FABRIC/ROADMAP.md

FABRIC Implementation Roadmap

Overview

This roadmap outlines the implementation plan for FABRIC (Flow Analysis & Bead Reporting Interface Console). Features are organized into phases with clear priorities.

Current Status

Completed:

• Phase 1: Core Infrastructure ✅ COMPLETE

  • types.ts - Core type definitions
  • parser.ts - Log line parsing
  • store.ts - In-memory event store
  • tailer.ts - Log file tailing
  • cli.ts - Command-line interface
  • index.ts - Main exports
  • Basic test coverage

• Phase 2: TUI Implementation ✅ COMPLETE

  • P0: Setup blessed TUI framework
  • P1: Worker Grid Panel
  • P1: Activity Stream Panel
  • P2: Worker Detail View
  • P2: Keyboard Navigation
  • P3: Stuck Detection (src/tui/utils/stuckDetection.ts)
  • P3: Inline Diff View (src/tui/components/DiffView.ts)
  • P4: Command Palette
  • P4: Cost Tracking (src/tui/utils/costTracking.ts)

• Phase 3: Web Dashboard ✅ COMPLETE (2026-03-03)

  • P1: Express HTTP server with static file serving (src/web/server.ts)
  • P1: WebSocket server for real-time updates
  • P1: React frontend scaffold with Vite (src/web/frontend/)
  • P1: WorkerGrid component for web
  • P1: ActivityStream component for web
  • P1: Web command added to CLI
  • Dark theme styling

In Progress:

• Phase 3.5: Web Frontend Parity (tests & enhancements)

Phase 2: TUI Implementation

Priority Order

Priority	Feature	Description	Effort
P0	Setup blessed	Add blessed library for TUI framework	Low
P1	Worker Grid Panel	Display all active workers with status	Medium
P1	Activity Stream Panel	Scrolling log output with filtering	Medium
P2	Worker Detail View	Detailed view for single worker	Medium
P2	Keyboard Navigation	j/k scroll, / search, Tab switch, q quit	Low
P3	Stuck Detection	Detect workers spinning their wheels	Medium
P3	Inline Diff View	Show diffs in Edit tool calls	Medium
P4	Command Palette	Ctrl+K universal search	Medium
P4	Cost Tracking	Token usage and budget alerts	Medium

Implementation Approach

1. Use blessed for terminal UI
2. Create modular components in src/tui/ directory
3. Each feature gets its own file
4. Shared state management via store

TUI Architecture

src/
├── tui/
│   ├── index.ts          # TUI entry point
│   ├── app.ts            # Main application class
│   ├── components/
│   │   ├── WorkerGrid.ts     # Worker status grid
│   │   ├── ActivityStream.ts # Log stream panel
│   │   ├── WorkerDetail.ts  # Worker detail view
│   │   ├── CommandPalette.ts # Ctrl+K search
│   │   └── DiffView.ts      # Inline diff display
│   ├── screens/
│   │   ├── MainScreen.ts    # Main dashboard view
│   │   └── DetailScreen.ts  # Worker detail screen
│   └── utils/
│       ├── colors.ts        # Color scheme
│       └── keyboard.ts      # Key bindings
└── ...

Phase 3: Web Dashboard ✅ COMPLETE

Priority	Feature	Description	Status
P1	HTTP Server	Express server with static file serving	✅ Done
P1	WebSocket	Real-time updates via ws	✅ Done
P1	React Frontend	Browser UI with Vite build	✅ Done
P1	Worker Grid	Worker cards with status	✅ Done
P1	Activity Stream	Real-time event feed	✅ Done
P1	CLI Web Command	fabric web starts server	✅ Done

Implementation Files:

• src/web/server.ts - Express + WebSocket server
• src/web/frontend/src/App.tsx - Main React app with WebSocket
• src/web/frontend/src/components/WorkerGrid.tsx - Worker cards
• src/web/frontend/src/components/ActivityStream.tsx - Event stream
• src/web/frontend/src/index.css - Dark theme styling
• vite.config.ts - Build configuration

Phase 3.5: Web Frontend Parity (Remaining Work)

Priority	Feature	Description	Bead
P2	Parser Tests	Unit tests for parser.ts	bd-1a2
P2	Store Tests	Unit tests for store.ts	bd-2en
P2	Worker Overview Cards	Enhanced worker cards component	bd-31n
P2	Activity Feed Filtering	Filter activity feed by worker/type	bd-1wo

Intelligence Features (Phase 4+)

These can be added incrementally after core UI is working:

• Cross-Reference Hyperlinking
• Worker Collision Detection
• Session Replay
• Smart Error Grouping
• Task Dependency DAG
• File Heatmap
• Recovery Playbook

Quick Start for Workers

1. Start with P0: Setup blessed
2. Then P1: Worker Grid Panel
3. Then P1: Activity Stream Panel
4. Continue through priority order

Testing Strategy

• Unit tests for each component
• Integration tests for TUI workflows
• Visual testing with sample log files