Add missing commands to TUI command palette as listed in docs/plan.md:
- worker:<id> - Jump to worker detail view
- bead:<id> - Show all events for a bead (cross-reference view)
- file:<pattern> - Show all operations on matching files
- filter:last:<duration> - Filter to last N minutes (e.g., 5m, 1h)
- goto:<timestamp> - Jump to specific timestamp in activity stream
- export - Export current view to .fabric-replay file
- export:link - Generate shareable base64 link
- export:import - Import replay file
Also added support methods in ActivityStream:
- setTimeFilter() for time-based filtering
- scrollToTimestamp() for timestamp navigation
- Enhanced setFilter() to support beadId and filePattern
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Wire shared EventDeduplicator across all ingestion paths (JSONL tailer,
OTLP/gRPC receiver, OTLP/HTTP receiver) so duplicate events from dual
ingestion are silently dropped on (session_id, worker_id, sequence).
Also adds docs/needle-exporter-wiring.md (OTLP configuration guide for
NEEDLE), SpanDag React component, EventFilter.eventType field, and
various test/layout fixes.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Replace coarse NeedleWorkerStatus ('idle'|'executing'|'draining'|'starting')
with the real NEEDLE state machine: BOOTING→SELECTING→CLAIMING→WORKING→CLOSING→STOPPED.
- Add NeedleState type, VALID_TRANSITIONS map, needleStateToStatus() helper in types.ts
- Track needleState + lastStateTransition per worker by consuming worker.state_transition events
- Surface all six states in TUI worker cards (WorkerGrid, WorkerDetail) with per-state icons/colors
- Surface all six states in web WorkerGrid.tsx with NEEDLE_STATE_LABELS and NEEDLE_STATE_COLORS
- Add getNeedleStateColor/getNeedleStateIcon to colors.ts
- Rewire stuck detection to fire on state-transition gaps (state_gap pattern in stuckDetection.ts)
- Add sequence-based event ordering via compareEventsBySequence and queryOrdered()
- Legacy event-type fallback preserved for workers not emitting state_transition events
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Verify WorkerDetail displays correct worker information including status
(active/idle/error), uptime formatting, beads completed count, last
activity details (bead, tool, duration, error), and recent events with
proper color tags and truncation.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Create vitest E2E test that verifies WorkerGrid component renders
worker entries with correct status colors:
- Green (light-green-fg) for active workers
- Yellow (light-yellow-fg) for idle workers
- Red (light-red-fg) for error workers
The test mocks blessed screen and verifies the content contains
appropriate color tags matching the theme system's status colors.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add scripts/fabric-web.sh for managing FABRIC web server as tmux session
- Supports start/stop/restart/status/logs commands
- Auto-restarts on crash via tmux session management
- Configurable via FABRIC_PORT and FABRIC_LOG_PATH env vars
- Fix TypeScript build error in CommandPalette.test.ts
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Integrate fuzzyMatch utility for fzf-style fuzzy matching on label, category, and action fields
- Highlight matching characters in yellow using blessed tags
- Add recent commands history (last 10), persisted to ~/.fabric/recent-commands.json
- Boost recently-used commands in fuzzy search scoring
- Show recent commands first when no query is entered
- Arrow key navigation with wrapping (pre-existing)
- Add comprehensive test suite (13 tests)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Verified and closed bd-2u6 - FileContextPanel is fully implemented for both TUI and Web:
Features:
- Split view: Activity (left) | File Context (right)
- Auto-update when file event selected
- Syntax highlighting based on file extension (TS, JS, Python, Rust, Go, etc.)
- Line numbers with highlight on relevant lines
- Sticky panel - stays visible while scrolling activity
- File history: see all operations on this file
- Quick toggle between recently touched files ([/]/[] keys)
- 'Open in Editor' button (launches configured editor)
TUI Layout:
- Ctrl+F to toggle file context panel
- { and } to resize split view
- Tab to switch focus between panels
Web Layout:
- Collapsible side panel with toggle button
- Resizable divider
- Pop out to separate window
Editor Integration:
- Uses $EDITOR env var
- Supports VS Code, vim, nano, etc.
- Opens at specific line number
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Implements save/load/delete functionality for focus mode pin configurations:
**TUI Changes:**
- [ key to save current focus configuration as named preset
- ] key to cycle through saved presets
- Preset commands in CommandPalette (Ctrl+K):
- preset:save - Save current focus
- preset:list - List all presets
- preset:load:<name> - Load a specific preset
- preset:delete:<name> - Delete a preset
- Presets stored in ~/.fabric/focus-presets.json
- Updated help text with new keybindings
**Web Changes:**
- Preset dropdown in header with save/load/delete UI
- Modal dialog for saving new presets
- Presets stored in localStorage
- Styled with CSS matching existing UI
**Core:**
- FocusPresetManager utility class for preset CRUD operations
- Storage abstraction (Memory, LocalStorage, File-based)
- Full test coverage for preset management
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Add PR preview functionality to the Git Integration panel:
- Generate PR title from commit messages
- Auto-generate PR description with file changes summary
- Generate commit message preview from activity
- List files changed with +/lines count
- Detect potential conflicts with upstream
- Rebase recommendation when conflicts detected
- New keyboard shortcuts: [p] Preview PR, [d] Diff, [s] Status
- PRPreview type with conflict detection and file stats
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add export/import functionality for session replay:
**Export Features:**
- Export as shareable link (base64 encoded events in URL parameter)
- Export as .fabric-replay file (JSON format)
- Share button in replay controls with dropdown menu
**Import Features:**
- Import from .fabric-replay file via file picker
- Import from URL parameter (?replay=base64EncodedEvents)
- Automatic detection and loading of replay data from URL
**Implementation:**
- src/utils/replayExport.ts: Core export/import utilities for Node.js
- src/web/frontend/src/utils/replayExport.ts: Browser-specific utilities
- Updated web SessionReplay.tsx with export dropdown and status messages
- Updated TUI SessionReplay.ts with exportToFile/importFromFile methods
- Added session replay panel to App.tsx with URL parameter support
- Added CSS styles for export dropdown, status messages, and replay panel
**Export Format:**
```json
{
"version": "1.0",
"exportedAt": 1709337600,
"eventCount": 150,
"events": [...],
"metadata": {
"sessionStart": 1709337000,
"sessionEnd": 1709337600,
"workerCount": 3
}
}
```
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <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>
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>
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>
- 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>
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>
## 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>
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>
- 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>
- Add comprehensive unit tests for WorkerGrid component
- Mock blessed box and screen elements
- Test constructor, updateWorkers, selection navigation
- Test render output (status icons, collision indicators)
- Test key bindings (up/down/k/j/g/G)
- Cover edge cases (no workers, empty events, long descriptions)
All 29 tests pass. Total test suite: 183 tests passing.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add recovery playbook feature that suggests recovery actions when workers encounter errors.
Implementation includes:
- RecoverySuggestion, RecoveryAction, RecoveryPlaybookEntry types in types.ts
- recoveryPlaybook.ts utility module with RecoveryManager class
- Predefined playbooks for each error category (network, permission, timeout, etc.)
- Pattern matching to map errors to actionable recovery steps
- Integration with InMemoryEventStore for easy access to suggestions
- RecoveryPanel TUI component for displaying suggestions
- Console formatting utilities for CLI output
Recovery actions include:
- Automated actions (retry, backoff, investigate)
- Manual actions (fix permissions, install dependencies)
- Escalation to human when automated recovery not possible
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement file heatmap visualization that tracks which files are modified
most frequently and by which workers. Helps identify hotspots and potential
collision areas.
Features:
- Track file modifications across all workers
- Heat levels (cold/warm/hot/critical) based on modification frequency
- Worker contribution percentages per file
- Collision risk detection for files with multiple workers
- Sortable by modifications, recent activity, workers, or collisions
- Filter by directory or collision-only files
- Statistics overview with heat distribution
Integration:
- Press 'H' in TUI to toggle heatmap view
- Press 's' to cycle sort modes
- Press 'c' to toggle collision-only filter
- Press 'Esc' to return to default view
Also fixed pre-existing DependencyDag component build issues:
- Created missing dagUtils.ts utility module
- Fixed import paths and type annotations
Tests: 20 new tests for file heatmap, all 154 tests passing
Co-Authored-By: Claude Worker <noreply@anthropic.com>
- Add SessionReplay component with full playback controls
- Add replay command to CLI with filter support
- Fix color type references in SessionReplay
- Add EventFilter type import to CLI
- Add File Heatmap types for future feature
Co-Authored-By: Claude Worker <noreply@anthropic.com>
Implement smart error grouping to cluster similar errors together and reduce
noise in the activity stream. Uses pattern matching on error messages and
stack traces to group related errors.
Features:
- Error categorization into 9 categories (network, permission, validation, etc.)
- Pattern-based fingerprinting for grouping similar errors
- Normalization of variable data (IPs, paths, UUIDs, timestamps)
- Severity calculation based on frequency and recency
- Integration with InMemoryEventStore for automatic error tracking
New files:
- src/errorGrouping.ts - Error grouping module
- src/errorGrouping.test.ts - Comprehensive test suite (34 tests)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
