Files
Codewalkers/docs/wireframes/content-tab.md
Lukas May 89db580ca4 docs: Add ASCII wireframe mockups for all frontend pages
Covers: app layout, initiatives list, initiative detail (4 tabs),
agents page, inbox, settings (health + projects), and all dialogs.
2026-03-02 17:28:14 +09:00

6.5 KiB

Content Tab (?tab=content)

Two-column layout: page tree sidebar + rich text editor with refine agent panel.

Default State (editing a page)

+============================================================================+
|  < Back                                                                    |
|  Auth System Overhaul    [ACTIVE]  [YOLO]  [git] main  [P] backend       |
|  [*Content*]  [ Plan ]  [ Execution ]  [ Review ]                        |
+============================================================================+
|           |                                                                |
|  Pages    |  [Refine with Agent]                               Saving...  |
|           |                                                                |
|  > Root   |  Overview                                                      |
|    > Auth |  ___________________________________________________________   |
|    > API  |                                                                |
|      > +  |  The authentication system needs a complete overhaul to        |
|    > +    |  support OAuth 2.0 and multi-tenant configurations.            |
|           |                                                                |
|           |  ## Current Problems                                           |
|           |                                                                |
|           |  - Session tokens expire too frequently                        |
|           |  - No support for SSO providers                                |
|           |  - Password reset flow is broken on mobile                     |
|           |                                                                |
|           |  ## Proposed Solution                                          |
|           |                                                                |
|           |  Migrate to JWT-based auth with refresh token rotation...      |
|           |                                                                |
|   192px   |                          flex-1                                |
+============================================================================+

Page Tree Sidebar (192px, border-right)

+-----------+
|  Pages    |
|           |
|  > Root Page Title     [+]   <-- hover shows + to add child
|    > Auth Overview     [+]
|      > Login Flow            <-- active page highlighted
|      > Token Design
|    > API Design        [+]
|    > Database Schema   [+]
|           |
+-----------+
  • FileText icon + truncated title per node
  • Active page gets accent background
  • Hover reveals + button to create child page
  • Indentation: 12px per depth level
  • Click navigates to page

Title Input

  Overview___________________________
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  3xl bold, transparent bg, no border
  Editable inline, auto-saves on blur

Tiptap Editor

Rich text editor with:

  • StarterKit (headings, lists, bold, italic, code blocks, etc.)
  • Slash commands (type / to trigger command palette)
  • Page links (inline links to other pages in the tree)
  • Auto-save via useAutoSave hook (debounced)

Refine Agent Panel States

Idle (no agent)

+------------------------------------------------------------------------+
|  [sparkles] Refine with Agent                                          |
+------------------------------------------------------------------------+

Clicking opens <RefineSpawnDialog>.

Running

+------------------------------------------------------------------------+
|  [spinner]  Architect is refining...                                   |
+------------------------------------------------------------------------+

Waiting for Input (questions)

+------------------------------------------------------------------------+
|  +------------------------------------------------------------------+  |
|  |  Q1: Should we include OAuth 2.0 PKCE flow?                     |  |
|  |  ( ) Yes, include PKCE                                          |  |
|  |  ( ) No, standard auth code flow is fine                        |  |
|  |  ( ) Let me specify: [________________]                         |  |
|  |                                                                  |  |
|  |  Q2: Which identity providers should we support?                 |  |
|  |  [x] Google                                                     |  |
|  |  [ ] GitHub                                                     |  |
|  |  [x] Microsoft                                                  |  |
|  |                                                                  |  |
|  |                         [ Cancel ]  [ Dismiss ]  [ Send Answers ]|  |
|  +------------------------------------------------------------------+  |
+------------------------------------------------------------------------+

Completed (with changes)

+------------------------------------------------------------------------+
|  [v] Agent completed                                                   |
|  +------------------------------------------------------------------+  |
|  |  [v] ChangeSet: 3 changes                          [>] expand   |  |
|  |                                                                  |  |
|  |     + page    "OAuth Flow"                                      |  |
|  |     ~ page    "Auth Overview" (modified)                        |  |
|  |     + page    "Token Rotation"                                  |  |
|  |                                                                  |  |
|  |                               [ Revert ]  [ Dismiss ]           |  |
|  +------------------------------------------------------------------+  |
+------------------------------------------------------------------------+

Completed (no changes)

+------------------------------------------------------------------------+
|  Agent completed -- no changes made.              [ Dismiss ]          |
+------------------------------------------------------------------------+

Crashed

+------------------------------------------------------------------------+
|  [!] Agent crashed unexpectedly.                  [ Retry ]            |
+------------------------------------------------------------------------+

Source

  • packages/web/src/components/editor/ContentTab.tsx
  • packages/web/src/components/editor/PageTree.tsx
  • packages/web/src/components/editor/RefineAgentPanel.tsx
  • packages/web/src/components/QuestionForm.tsx
  • packages/web/src/components/ChangeSetBanner.tsx