From 9f14a6b2263a4d041b28a35c9d091f2fb56d4880 Mon Sep 17 00:00:00 2001 From: jeda Date: Mon, 2 Mar 2026 02:35:55 +0000 Subject: [PATCH] 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 --- docs/plan.md | 169 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 169 insertions(+) diff --git a/docs/plan.md b/docs/plan.md index 05fc43a..c6aa512 100644 --- a/docs/plan.md +++ b/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 {" │ │ +│ │ 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