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.
This commit is contained in:
Lukas May
154
docs/wireframes/content-tab.md
Normal file
154
docs/wireframes/content-tab.md
Normal file
@@ -0,0 +1,154 @@
|
||||
# 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`
|
||||
Reference in New Issue
Block a user