docs: add TUI and web dashboard mockups
ASCII mockups showing: - TUI main view with worker grid and activity stream - TUI worker detail view with focused log - Web dashboard with worker cards, activity feed, and timeline - Web worker detail modal Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jeda
parent
88ee6a4cf5
commit
9f14a6b226
1 changed files with 169 additions and 0 deletions
169
docs/plan.md
169
docs/plan.md
|
|
@ -70,6 +70,71 @@ Features:
|
|||
- Keyboard navigation (j/k scroll, / search, Tab switch panels, q quit)
|
||||
- Color-coded log levels
|
||||
|
||||
#### TUI Mockup
|
||||
|
||||
```
|
||||
┌─ FABRIC ─────────────────────────────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ Workers (4 active) [?] Help │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ ● w-alpha Running bd-1847 "Implement auth flow" 2m 34s │ │
|
||||
│ │ ● w-bravo Running bd-1852 "Fix login validation" 1m 12s │ │
|
||||
│ │ ○ w-charlie Idle - - - │ │
|
||||
│ │ ● w-delta Running bd-1849 "Add unit tests" 45s │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Activity Stream Filter: [All ▾] │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 14:32:07 w-alpha INFO Tool call: Edit src/auth/login.ts │ │
|
||||
│ │ 14:32:05 w-bravo DEBUG Reading file: src/validators/index.ts │ │
|
||||
│ │ 14:32:04 w-delta INFO Starting task bd-1849 │ │
|
||||
│ │ 14:32:01 w-alpha INFO Tool call: Read src/auth/types.ts │ │
|
||||
│ │ 14:31:58 w-bravo WARN Retry attempt 2/3 for API call │ │
|
||||
│ │ 14:31:55 w-alpha DEBUG Analyzing dependencies... │ │
|
||||
│ │ 14:31:52 w-charlie INFO Task bd-1845 completed (duration: 4m 12s) │ │
|
||||
│ │ 14:31:50 w-bravo INFO Tool call: Grep pattern="validateUser" │ │
|
||||
│ │ 14:31:47 w-alpha INFO Tool call: Glob **/*.ts │ │
|
||||
│ │ 14:31:44 w-charlie INFO Committing changes... │ │
|
||||
│ │ │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [Tab] Switch panel [j/k] Scroll [/] Search [f] Filter [q] Quit │
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### TUI Worker Detail View (when worker selected)
|
||||
|
||||
```
|
||||
┌─ FABRIC ─────────────────────────────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ Worker: w-alpha [Esc] Back │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ Status: ● Running │ │
|
||||
│ │ Task: bd-1847 "Implement auth flow" │ │
|
||||
│ │ Duration: 2m 34s │ │
|
||||
│ │ Events: 47 │ │
|
||||
│ │ Errors: 0 │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Worker Log │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 14:32:07 INFO Tool call: Edit src/auth/login.ts │ │
|
||||
│ │ old_string: "function login() {" │ │
|
||||
│ │ new_string: "async function login(): Promise<User> {" │ │
|
||||
│ │ 14:32:01 INFO Tool call: Read src/auth/types.ts │ │
|
||||
│ │ 14:31:55 DEBUG Analyzing dependencies... │ │
|
||||
│ │ 14:31:47 INFO Tool call: Glob **/*.ts │ │
|
||||
│ │ Found 23 files │ │
|
||||
│ │ 14:31:42 INFO Starting task bd-1847 │ │
|
||||
│ │ Task: "Implement auth flow" │ │
|
||||
│ │ Priority: P1 │ │
|
||||
│ │ │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ [j/k] Scroll [/] Search [Esc] Back to overview │
|
||||
└──────────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Web Mode (`fabric web`)
|
||||
|
||||
Live browser dashboard served on localhost:
|
||||
|
|
@ -84,6 +149,110 @@ Features:
|
|||
- Responsive layout
|
||||
- Auto-reconnect on connection loss
|
||||
|
||||
#### Web Mockup
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||||
│ ◉ FABRIC ┌─────────────────────────┐ │
|
||||
│ Flow Analysis & Bead Reporting Interface Console │ 🔍 Search... │ │
|
||||
│ └─────────────────────────┘ │
|
||||
├─────────────────────────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
|
||||
│ │ 4 Active │ │ 12 Completed │ │ 0 Errors │ │
|
||||
│ │ Workers │ │ Today │ │ Last Hour │ │
|
||||
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
|
||||
│ │
|
||||
│ Workers │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │
|
||||
│ │ │ ● w-alpha │ │ ● w-bravo │ │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ │ bd-1847 │ │ bd-1852 │ │ │
|
||||
│ │ │ Implement auth flow │ │ Fix login validation│ │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ │ ██████████░░ 2m 34s │ │ █████░░░░░░ 1m 12s │ │ │
|
||||
│ │ └─────────────────────┘ └─────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────────────────┐ ┌─────────────────────┐ │ │
|
||||
│ │ │ ○ w-charlie │ │ ● w-delta │ │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ │ Idle │ │ bd-1849 │ │ │
|
||||
│ │ │ │ │ Add unit tests │ │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ │ Ready for work │ │ ██░░░░░░░░░ 45s │ │ │
|
||||
│ │ └─────────────────────┘ └─────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Activity Feed Filter: [All levels ▾] │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ │ │
|
||||
│ │ 14:32:07 ● w-alpha INFO │ │
|
||||
│ │ Tool call: Edit src/auth/login.ts │ │
|
||||
│ │ ────────────────────────────────────────────────────────────────────── │ │
|
||||
│ │ 14:32:05 ● w-bravo DEBUG │ │
|
||||
│ │ Reading file: src/validators/index.ts │ │
|
||||
│ │ ────────────────────────────────────────────────────────────────────── │ │
|
||||
│ │ 14:32:04 ● w-delta INFO │ │
|
||||
│ │ Starting task bd-1849 │ │
|
||||
│ │ ────────────────────────────────────────────────────────────────────── │ │
|
||||
│ │ 14:31:58 ● w-bravo WARN │ │
|
||||
│ │ Retry attempt 2/3 for API call │ │
|
||||
│ │ ────────────────────────────────────────────────────────────────────── │ │
|
||||
│ │ 14:31:52 ○ w-charlie INFO │ │
|
||||
│ │ Task bd-1845 completed (duration: 4m 12s) │ │
|
||||
│ │ │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Timeline (last 10 minutes) │
|
||||
│ ┌──────────────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ 14:22 14:24 14:26 14:28 14:30 14:32 │ │
|
||||
│ │ alpha ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░███████████████████ │ │
|
||||
│ │ bravo ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░████████████ │ │
|
||||
│ │ charlie████████████████████████████████████████░░░░░░░░░░░░ │ │
|
||||
│ │ delta ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░███████ │ │
|
||||
│ └──────────────────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ ● Connected FABRIC v0.1.0 │
|
||||
└─────────────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### Web Worker Detail Modal (when worker card clicked)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────────────────────────┐
|
||||
│ │
|
||||
│ ┌───────────────────────────────────────────────────────────────────┐ │
|
||||
│ │ [✕] │ │
|
||||
│ │ Worker: w-alpha │ │
|
||||
│ │ │ │
|
||||
│ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
|
||||
│ │ │ ● Running │ │ 47 Events │ │ 0 Errors │ │ │
|
||||
│ │ └─────────────┘ └─────────────┘ └─────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ Current Task │ │
|
||||
│ │ ┌───────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ bd-1847 │ │ │
|
||||
│ │ │ Implement auth flow │ │ │
|
||||
│ │ │ Duration: 2m 34s │ │ │
|
||||
│ │ └───────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ │ Recent Activity │ │
|
||||
│ │ ┌───────────────────────────────────────────────────────────┐ │ │
|
||||
│ │ │ 14:32:07 INFO Edit src/auth/login.ts │ │ │
|
||||
│ │ │ 14:32:01 INFO Read src/auth/types.ts │ │ │
|
||||
│ │ │ 14:31:55 DEBUG Analyzing dependencies... │ │ │
|
||||
│ │ │ 14:31:47 INFO Glob **/*.ts (23 files) │ │ │
|
||||
│ │ │ 14:31:42 INFO Starting task bd-1847 │ │ │
|
||||
│ │ └───────────────────────────────────────────────────────────┘ │ │
|
||||
│ │ │ │
|
||||
│ └───────────────────────────────────────────────────────────────────┘ │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## CLI Interface
|
||||
|
||||
```bash
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue