Implement robust WebSocket reconnection logic for the web frontend:
- Detect connection loss immediately via onclose handler
- Show 'Reconnecting...' status indicator with yellow dot
- Implement exponential backoff (1s, 2s, 4s, 8s, 16s, max 30s)
- Re-sync state automatically after successful reconnection
- Show reconnection attempt count in brackets
- Manual reconnect button appears after max retries (10)
- Green dot with glow for connected state
- Red dot for disconnected state
- Animated pulse effect on reconnecting indicator
UI States:
- Connected: Green dot with glow
- Reconnecting: Yellow pulsing dot with countdown and attempt count
- Disconnected: Red dot with manual retry button
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
## TUI Theme Support
- Create ThemeManager class with dark/light theme palettes
- Update colors.ts to use theme system via proxy pattern
- Add Ctrl+T keybinding for theme toggle
- Add theme commands to CommandPalette (theme:toggle, theme:dark, theme:light)
- Persist theme preference to ~/.fabric/theme.json
- Update footer to show current theme
## Web Dashboard Theme Support
- Create ThemeContext with React context API
- Add light theme CSS variables (data-theme="light")
- Add ThemeToggle button to header
- Persist theme preference to localStorage
- Support system color scheme preference detection
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Implements persistent storage for historical session analytics:
- Add HistoricalStore class using better-sqlite3
- Schema includes sessions, task_metrics, and error_history tables
- Session management: start/end sessions with worker/task/cost metrics
- Task metrics: record per-bead completion times, costs, tokens
- Error history: track errors with resolution status
- Historical queries: worker comparison across sessions
- Learned recoveries: extract patterns from historical error resolutions
- Integration with EventStore for automatic session persistence
- Historical query methods in WorkerAnalytics
- Enhanced recovery suggestions using historical data in RecoveryManager
- Comprehensive unit tests (20 passing tests)
Database stored at ~/.needle/fabric.db for cross-session persistence.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Previously Escape only handled view mode changes. Now it first checks
if the WorkerDetail modal is visible and closes it before returning
to the default view.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added comprehensive E2E test suite for WorkerDetail component with 39 test cases covering:
- Worker status display (active, idle, error)
- Event count and current tool display
- Last seen timestamp formatting
- Recent events list rendering
- Collision alert display
- Current activity section
- CSS classes and accessibility features
- Edge cases and error handling
All tests passing.
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Comprehensive E2E test suite covering:
- Chronological order display (100+ events)
- Timestamp formatting and display
- Level colors for debug/info/warn/error
- Scrolling behavior with maxLines buffer
- Filtering by worker, level, search term, time range
- Pause/resume workflow
- High volume event handling (1000+ events)
All 36 tests passing.
Co-Authored-By: Claude Worker <noreply@anthropic.com>
- Replaced basic terminal colors with light/bright variants for better visibility
- Changed gray to light-black for consistent muting across terminal themes
- Changed backgrounds from black to 'default' for light theme compatibility
- Updated text colors to light-white, light-cyan, etc. for better contrast
- All status indicators (active, idle, error) now use light variants
- Heat levels use progressive light colors for better differentiation
- Updated tests to expect new light-green-fg, light-yellow-fg, light-red-fg tags
The new color scheme provides better contrast and readability in both
light and dark terminal themes by using blessed's light color variants
and avoiding hard-coded black/white backgrounds.
Co-Authored-By: Claude Worker <noreply@anthropic.com>
- Created comprehensive regression test suite with 73 new tests
- Test coverage includes:
- Component integration and coordination
- View mode transitions (heatmap, DAG, replay, errors, etc.)
- Focus mode behavior with worker/bead pinning
- Keyboard navigation and bindings
- Command palette integration
- Error handling and edge cases
- Performance and resource management
- State consistency across renders
- Rendered output format validation
All 1213 tests pass (3 skipped), verifying no regressions in TUI functionality.
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Created comprehensive E2E test verifying LogTailer and ActivityStream integration:
- Tests real-time log file tailing with file system changes
- Verifies new events appended to log file appear in ActivityStream
- Tests sequential and bulk event appending
- Validates NEEDLE format event parsing
- Tests pause/resume functionality
- Includes error handling for malformed JSON and empty lines
- Tests initial content loading and cleanup
All 13 E2E tests pass successfully.
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Added vitest test to verify WorkerGrid component renders worker entries with correct status colors (green for active, yellow for idle, red for error). Test verifies blessed color tags are present in rendered content.
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Added `tags: true` to all blessed.box and blessed.log elements to enable
processing of blessed markup tags like {bold}, {gray-fg}, {blue-fg}, etc.
Without this option, blessed displays the tags as literal text instead
of rendering them as terminal colors and styles.
Components fixed:
- ActivityStream, CollisionAlert, CommandPalette, CrossReferencePanel
- DependencyDag, DiffView, FileHeatmap, FilterPanel
- SemanticNarrativePanel, SessionReplay, WorkerAnalyticsPanel
- WorkerDetail, WorkerGrid, app.ts
Also adds beads for frankentui migration with proper dependency chain:
- Implementation tasks (Rust workspace, types, parser, widgets)
- E2E tests blocked by their respective implementations
- Regression suite blocked by all widget implementations
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Changed all blessed imports from namespace import (import * as blessed)
to default import (import blessed from 'blessed') in 28 files.
This fixes "blessed.screen is not a function" runtime error that occurs
when ESM modules import CommonJS blessed package with namespace syntax.
Also includes WorkerAnalyticsPanel property additions for type compliance.
Fixes: bd-31x
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Handle NEEDLE's aligned format (worker as flat string) alongside
legacy format (worker as nested object) for backwards compatibility.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Accept ISO timestamp strings, convert to Unix milliseconds for internal use
- Use 'event' field as event type (map to 'msg' for internal use)
- Flatten worker object to string: ${runner}-${identifier}
- Infer log level from event name (error/warn/info/debug)
- Extract bead_id, duration_ms from data payload
- Add session, provider, model fields from NEEDLE format
- Maintain backward compatibility with legacy format
- Add comprehensive NEEDLE format test cases
Verified with actual NEEDLE log files:
- 146/146 lines parsed successfully
- Correctly identifies error-level events (claim_exhausted)
- Correctly identifies warn-level events (claim_retry)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
- Create WorkerAnalyticsPanel.ts with worker metrics display
- Add support for list view, detail view, and aggregated view
- Implement multiple sort modes (beads, error rate, cost, efficiency)
- Wire into app.ts with 'A' keyboard shortcut
- Update help documentation with Worker Analytics section
- Close bd-3af
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Implemented TUI component to display full Claude conversation for a worker:
- User prompts with role indicators
- Assistant responses with syntax highlighting
- Collapsible tool calls with arguments
- Tool results with success/error indicators
- Thinking blocks
- Search functionality across conversation
- Scrolling support
- Export to JSON/Markdown/Text
Features:
- Role-based color coding (user, assistant, tool)
- Basic syntax highlighting for code blocks
- Keyboard shortcuts for navigation and search
- Comprehensive test coverage (24 tests)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Implemented GitIntegration component showing live git status per workspace:
- Display current branch with tracking info (ahead/behind)
- Show staged, unstaged, and untracked files with status icons
- Display recent commits with hash, time, and message
- Detect and highlight merge conflicts
- Keyboard shortcuts: [I] toggle view, [r] refresh, [c] clear
- Full test coverage (17 tests passing)
- Integrated into main TUI app with view mode toggle
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
- Add SessionDigest component with 5 tabs: Summary, Beads, Files, Errors, Workers
- Display session statistics, completed beads, modified files, errors, worker summaries
- Add export functionality for JSON, Markdown, and plain text formats
- Integrate with app.ts via 'G' key binding
- Add help text for session digest commands
- Generate session digest from event store data
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Integrated CollisionAlert component into the main TUI application with the following features:
- Added collision alert panel to UI layout (hidden by default)
- Added 'C' keyboard shortcut to toggle collision alert view
- Added collision detection to event processing pipeline
- Collision alerts auto-update when new events are processed
- Added collision view mode with dedicated header and footer
- Updated footer to show collision shortcut in default view
- Updated help overlay with collision alert controls
- Added command palette support for 'collisions' command
- Collision alerts can be acknowledged individually or all at once
- Alerts are grouped by severity (critical/error, warning, info)
All tests pass (1046 passed, 3 skipped).
Co-Authored-By: Claude Worker <noreply@anthropic.com>
- Add GitEvent types (GitStatusEvent, GitCommitEvent, GitBranchEvent, GitDiffEvent)
- Implement git event parsing in gitParser.ts
- Support parsing git status (staged, unstaged, untracked files)
- Support parsing git commits with file changes
- Support parsing git branch information
- Support parsing git diff output with line counts
- Add comprehensive unit tests (19 tests)
- All tests pass (1011 total tests)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
FileHeatmap component is fully integrated into main TUI app:
- Keyboard shortcut 'H' toggles heatmap view
- Real-time file access aggregation from event store
- Shows most-touched files with multiple sort modes
- All tests passing (943 tests, including 130 FileHeatmap tests)
Additional fixes:
- Fixed ErrorGroupPanel options to support bottom property
- Added vitest globals configuration for proper TypeScript support
- Fixed type assertions in server.test.ts
- Created comprehensive integration documentation
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Implemented Focus Mode functionality with the following features:
- Added keybindings: p (pin/unpin worker), P (pin/unpin bead), F (toggle focus)
- Visual indicators (📌) for pinned workers and beads
- Dimmed display for non-pinned items when Focus Mode is enabled
- Updated footer to show Focus Mode status and pinned items
- Updated help overlay with Focus Mode documentation
- Added setFocusMode methods to WorkerGrid and ActivityStream components
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Comprehensive worker performance metrics tracking system:
Features:
- Beads per hour calculation
- Average completion time tracking
- Error rate monitoring
- Cost per bead calculation (USD)
- Idle percentage tracking
- Time-series data storage and retrieval
- Performance trend analysis
- Aggregated analytics across all workers
Implementation:
- Added WorkerAnalytics types to types.ts
- Created workerAnalytics.ts module with full aggregation logic
- Integrated with EventStore for automatic event processing
- 25 comprehensive unit tests (all passing)
- Exported from index.ts for public API access
Technical highlights:
- Automatic activity period detection with 5-minute gap threshold
- Time-series snapshots at configurable intervals (default 1 hour)
- Flexible time window filtering (hour/day/week/all)
- Worker ranking by performance, error rate, and cost efficiency
- Performance trend detection (improving/declining/stable)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Implement comprehensive session digest generation module that aggregates:
- Beads completed with duration tracking
- Files modified with tool and worker attribution
- Errors encountered with categorization
- Time spent per worker
- Token usage and estimated costs
Features:
- SessionDigestGenerator class for digest creation
- Markdown formatting with tables and summaries
- CLI integration via 'fabric digest' command
- Support for time range and worker filtering
- Comprehensive test coverage (14 tests, all passing)
CLI Usage:
fabric digest -f <logfile> [options]
Options: --output, --worker, --since, --until, --max-files, --max-errors
All tests passing: 616/616
Co-Authored-By: Claude <noreply@anthropic.com>
## Summary
Completed session replay feature implementation with comprehensive testing and TUI integration.
## Changes
1. **Comprehensive Unit Tests (55 tests)**
- Created SessionReplay.test.ts with full test coverage
- Tests for initialization, loading, filtering, playback controls
- Tests for navigation, speed control, callbacks, edge cases
- All tests passing ✅
2. **TUI Integration**
- Integrated SessionReplay into main TUI app
- Added hotkey 'R' to toggle session replay view
- Loads all current events from store into replay
- Dynamic footer with playback state and controls
- Updated help overlay with replay instructions
3. **Features Available**
- Load events from store and replay chronologically
- Playback controls: play, pause, step forward/backward
- Speed control: 0.5x, 1x, 2x, 5x, 10x
- Timeline visualization with progress bar
- Event filtering by worker, level, bead, path, time range
- Keyboard shortcuts for all controls
- Jump to start/end, seek by percentage
## How to Use
1. Launch FABRIC TUI: `fabric tui`
2. Press 'R' to enter session replay mode
3. Use Space to play/pause, arrows to navigate
4. Press Esc to return to main view
## CLI Command
Also available as standalone: `fabric replay -f ~/.needle/logs/workers.log`
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added extensive test coverage including:
- Edge cases with optional field type validation
- Unicode and special character handling
- Very long messages and timestamps
- Custom field preservation (arrays, objects, nested data)
- Performance tests with large batches (1000, 5000, 10000 lines)
- Mixed valid/invalid line handling
- Empty string handling for optional fields
- Duration formatting edge cases
- Worker ID edge cases
All 67 tests passing, performance target met (<1s for 1000 lines, <5s for 10000 lines).
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Implemented comprehensive filtering system for ActivityStream in both TUI and Web:
TUI Changes:
- Extended ActivityFilter interface with time range filters (since/until)
- Created FilterPanel component with all filter controls:
* Worker ID filter
* Log level filter (debug/info/warn/error)
* Search term filter
* Time range filters (since/until)
* Clear all filters button
- Added filter state persistence to file storage (~/.fabric-filter-state.json)
- Added getFilter(), getEventsCount(), getFilteredEventsCount() methods
- Updated ActivityStream tests with time range filtering tests
Web Changes:
- Created FilterControls component with all filter controls
- Implemented complete filtering logic in ActivityStream component
- Added filter state persistence using localStorage
- Added CSS styles for filter controls panel
- Updated ActivityStream to support showFilters prop
- Updated tests to cover filtering functionality
All 465 tests passing.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Integrated CrossReferenceManager with EventStore to enable cross-reference
hyperlinking across events, workers, files, and beads. This allows navigation
between related activities in the FABRIC dashboard.
Changes:
- Integrated CrossReferenceManager into InMemoryEventStore
- Added batch processing for cross-reference relationship detection
- Added 11 new API methods to store for cross-reference queries
- Updated web server to use store's cross-reference methods
- Added comprehensive test coverage (11 new tests)
- All 55 tests passing
Features:
- Automatic link detection between events, workers, files, and beads
- Relationship detection (same_bead, same_file, same_worker, temporal_proximity, etc.)
- Navigation path finding between entities
- Cross-reference statistics and queries
- Web API endpoints for cross-reference data
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Port TUI RecoveryPanel.ts to React web frontend:
- Add RecoverySuggestion, RecoveryAction, and related types to types.ts
- Create RecoveryPanel.tsx component with:
- Recovery suggestions list with expandable actions
- Priority badges and category icons
- Automated/manual action indicators
- Execute and dismiss buttons for actions
- Detail panel for selected suggestion
- Add CSS styles for recovery panel and toggle button
- Integrate RecoveryPanel into App.tsx with toggle button in header
All 442 tests pass.
Co-Authored-By: Claude Worker <noreply@anthropic.com>
- Add comprehensive test suite with 52 test cases covering:
- Constructor and initialization
- Event addition and formatting
- Pause/unpause functionality
- Filtering by worker, level, and search
- Key bindings (p for pause, C-c for clear)
- Edge cases (empty messages, unicode, special chars)
- Position options (string and numeric)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
- Import and render DependencyDag component in App.tsx
- Add showDependencyDag state toggle
- Add DAG button in header with 🔗 icon
- Add CSS styles for dag-toggle button
- All 390 tests pass including 14 DependencyDag tests
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Port TUI FileHeatmap.ts to React web frontend with:
- Full component implementation with heat visualization
- Sort mode cycling (modifications, recent, workers, collisions)
- Collision filtering and directory filtering
- Entry selection with detail panel
- Worker display and modification statistics
- Comprehensive test suite (15 tests)
- API endpoints already integrated in server
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create DependencyDag.tsx with interactive task dependency visualization
- Add DAG types to web frontend types
- Add /api/dag endpoint to server.ts
- Add CSS styles for DAG panel
- Add unit tests
Co-Authored-By: Claude Worker <noreply@anthropic.com>
