From 18c7f94ddbf717c181c4cbd452a9ebfb5ddeff7d Mon Sep 17 00:00:00 2001 From: jeda Date: Thu, 5 Mar 2026 03:54:06 +0000 Subject: [PATCH] feat(bd-3ih): Improve color scheme contrast in TUI panels - 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 --- .beads/issues.jsonl | 4 +- src/tui/components/WorkerGrid.test.ts | 6 +- src/tui/utils/colors.ts | 85 +++++++++++++++------------ 3 files changed, 52 insertions(+), 43 deletions(-) diff --git a/.beads/issues.jsonl b/.beads/issues.jsonl index 3d8d84c..283a4c0 100644 --- a/.beads/issues.jsonl +++ b/.beads/issues.jsonl @@ -8,7 +8,7 @@ {"id":"bd-1qh","title":"Test TUI [j/k] keys scroll within focused panel","status":"closed","priority":1,"issue_type":"task","created_at":"2026-03-05T00:23:41.249565538Z","created_by":"coder","updated_at":"2026-03-05T00:31:40.802936940Z","closed_at":"2026-03-05T00:31:40.802635367Z","close_reason":"done","source_repo":".","compaction_level":0,"original_size":0,"comments":[{"id":4,"issue_id":"bd-1qh","author":"Jed Arden","text":"Manual TUI testing task - requires human interaction to verify keyboard shortcuts. Closing as not suitable for autonomous worker implementation.","created_at":"2026-03-05T00:31:40Z"}]} {"id":"bd-1se","title":"ALERT: Worker claude-code-glm-5-alpha has no work available","description":"# Worker Starvation Alert\n\nWorker **claude-code-glm-5-alpha** has exhausted all priorities and found zero work.\n\nThis is considered an error state - there should always be more work.\n\n## Worker State\n\n- **Executor:** claude-code-glm-5\n- **Model:** glm-5\n- **Workspace:** /home/coder/FABRIC\n- **Root Boundary:** /home/coder/FABRIC\n- **Last completion:** \n- **Beads completed:** 0\n- **Claim success rate:** %\n- **Uptime:** 72116s (h)\n- **Consecutive empty iterations:** 5\n\n## Priorities Exhausted\n\n1. ✗ Local workspace (bottoms-up): No beads in /home/coder/FABRIC or subfolders\n2. ✗ Parent exploration: No suitable workspaces found\n3. ✓ Maintenance: Completed (cleaned orphaned claims/locks)\n4. ✗ Gap analysis: false - No gaps found or created\n5. ✗ HUMAN alternatives: true - No HUMAN beads found to unblock\n\n## Discovered Workspaces\n\nTotal: 1\n\n- /home/coder/FABRIC\n\n## Required Actions\n\n1. Review discovery roots: Are all project folders being scanned?\n2. Check if projects need new features/tasks\n3. Review ROADMAP.md files across projects\n4. Enable gap analysis if disabled: `--enable-gap-analysis`\n5. Enable HUMAN alternatives if disabled\n6. Create manual beads to bootstrap work\n\n---\n*This alert was created automatically by Priority 6*","status":"closed","priority":0,"issue_type":"human","assignee":"coder","created_at":"2026-03-04T23:59:25.275941679Z","created_by":"coder","updated_at":"2026-03-05T00:08:15.714591728Z","closed_at":"2026-03-05T00:08:15.315497970Z","close_reason":"done","source_repo":".","compaction_level":0,"original_size":0,"comments":[{"id":2,"issue_id":"bd-1se","author":"Jed Arden","text":"Legitimate starvation - FABRIC project is 100% complete.\n\nVerification:\n- ready-queue.json: 0 available beads\n- issues.jsonl: 0 open non-HUMAN beads\n- ROADMAP.md: 100% completion (164 closed beads)\n\nAll phases complete:\n- Phase 1: Core Infrastructure ✅\n- Phase 2: TUI Implementation ✅\n- Phase 3: Web Dashboard ✅\n- Phase 3.5: Web Frontend Parity ✅\n\nRemaining Phase 4+ features are untracked nice-to-haves. No further work required.","created_at":"2026-03-05T00:08:15Z"}]} {"id":"bd-21r","title":"Implement log parser in Rust (NEEDLE JSON format)","status":"closed","priority":1,"issue_type":"task","created_at":"2026-03-05T00:50:07.569832798Z","created_by":"coder","updated_at":"2026-03-05T00:55:12.991859741Z","closed_at":"2026-03-05T00:55:12.991331899Z","close_reason":"done","closed_by_session":"frankentui-needs-rust-project","source_repo":".","compaction_level":0,"original_size":0} -{"id":"bd-29t","title":"E2E test: ActivityStream displays scrolling log entries","description":"Create a vitest test that verifies ActivityStream component displays log entries in chronological order with proper timestamps and level colors. Test scrolling behavior and filtering.","status":"open","priority":1,"issue_type":"task","created_at":"2026-03-05T00:50:18.922388746Z","created_by":"coder","updated_at":"2026-03-05T00:56:22.276186455Z","source_repo":".","compaction_level":0,"original_size":0,"dependencies":[{"issue_id":"bd-29t","depends_on_id":"bd-2kq","type":"blocks","created_at":"2026-03-05T00:50:53.033928858Z","created_by":"coder","metadata":"{}","thread_id":""}]} +{"id":"bd-29t","title":"E2E test: ActivityStream displays scrolling log entries","description":"Create a vitest test that verifies ActivityStream component displays log entries in chronological order with proper timestamps and level colors. Test scrolling behavior and filtering.","status":"in_progress","priority":1,"issue_type":"task","assignee":"coder","created_at":"2026-03-05T00:50:18.922388746Z","created_by":"coder","updated_at":"2026-03-05T03:52:15.611865742Z","source_repo":".","compaction_level":0,"original_size":0,"dependencies":[{"issue_id":"bd-29t","depends_on_id":"bd-2kq","type":"blocks","created_at":"2026-03-05T00:50:53.033928858Z","created_by":"coder","metadata":"{}","thread_id":""}]} {"id":"bd-2b3","title":"Verify TUI renders colors correctly in tmux session","description":"Launch FABRIC TUI with 'node dist/cli.js tui' and verify that colors render correctly. Check that blessed tags like {bold}, {yellow-fg}, {blue-fg} are being interpreted as terminal colors rather than showing as literal text. Test in a tmux session.","status":"in_progress","priority":0,"issue_type":"task","assignee":"coder","created_at":"2026-03-05T00:49:50.523038244Z","created_by":"coder","updated_at":"2026-03-05T00:56:18.431007340Z","source_repo":".","compaction_level":0,"original_size":0} {"id":"bd-2dr","title":"Create WorkerGrid widget using frankentui","status":"closed","priority":1,"issue_type":"task","created_at":"2026-03-05T00:50:07.895144632Z","created_by":"coder","updated_at":"2026-03-05T00:55:13.926163714Z","closed_at":"2026-03-05T00:55:13.924973676Z","close_reason":"done","closed_by_session":"frankentui-needs-rust-project","source_repo":".","compaction_level":0,"original_size":0} {"id":"bd-2fv","title":"Test TUI [/] key opens search functionality","status":"closed","priority":1,"issue_type":"task","created_at":"2026-03-05T00:23:41.509836857Z","created_by":"coder","updated_at":"2026-03-05T00:31:40.968989763Z","closed_at":"2026-03-05T00:31:40.968715659Z","close_reason":"done","source_repo":".","compaction_level":0,"original_size":0,"comments":[{"id":5,"issue_id":"bd-2fv","author":"Jed Arden","text":"Manual TUI testing task - requires human interaction to verify keyboard shortcuts. Closing as not suitable for autonomous worker implementation.","created_at":"2026-03-05T00:31:40Z"}]} @@ -27,7 +27,7 @@ {"id":"bd-3a1","title":"Set up Rust workspace for fabric-tui crate","status":"closed","priority":1,"issue_type":"task","created_at":"2026-03-05T00:50:06.733832459Z","created_by":"coder","updated_at":"2026-03-05T00:55:11.387073701Z","closed_at":"2026-03-05T00:55:11.386781814Z","close_reason":"done","closed_by_session":"frankentui-needs-rust-project","source_repo":".","compaction_level":0,"original_size":0} {"id":"bd-3at","title":"ALERT: Worker claude-code-glm-5-alpha has no work available","description":"# Worker Starvation Alert\n\nWorker **claude-code-glm-5-alpha** has exhausted all priorities and found zero work.\n\nThis is considered an error state - there should always be more work.\n\n## Worker State\n\n- **Executor:** claude-code-glm-5\n- **Model:** glm-5\n- **Workspace:** /home/coder/FABRIC\n- **Root Boundary:** /home/coder/FABRIC\n- **Last completion:** \n- **Beads completed:** 0\n- **Claim success rate:** %\n- **Uptime:** 73162s (h)\n- **Consecutive empty iterations:** 5\n\n## Priorities Exhausted\n\n1. ✗ Local workspace (bottoms-up): No beads in /home/coder/FABRIC or subfolders\n2. ✗ Parent exploration: No suitable workspaces found\n3. ✓ Maintenance: Completed (cleaned orphaned claims/locks)\n4. ✗ Gap analysis: false - No gaps found or created\n5. ✗ HUMAN alternatives: true - No HUMAN beads found to unblock\n\n## Discovered Workspaces\n\nTotal: 1\n\n- /home/coder/FABRIC\n\n## Required Actions\n\n1. Review discovery roots: Are all project folders being scanned?\n2. Check if projects need new features/tasks\n3. Review ROADMAP.md files across projects\n4. Enable gap analysis if disabled: `--enable-gap-analysis`\n5. Enable HUMAN alternatives if disabled\n6. Create manual beads to bootstrap work\n\n---\n*This alert was created automatically by Priority 6*","status":"closed","priority":0,"issue_type":"human","assignee":"coder","created_at":"2026-03-05T00:16:52.000971106Z","created_by":"coder","updated_at":"2026-03-05T00:22:58.447039491Z","closed_at":"2026-03-05T00:22:58.446638824Z","close_reason":"LEGITIMATE STARVATION - Project 100% complete\n\nVerified state:\n- ready-queue.json: 0 beads available\n- issues.jsonl: 0 open beads\n- ROADMAP.md: 100% complete (164 closed beads)\n- All phases (1, 2, 3, 3.5) complete\n- Phase 4+ features are 'nice-to-have' and untracked\n\nThis is expected behavior - no work available because project is finished.\nWorker starvation resolved by project completion.","source_repo":".","compaction_level":0,"original_size":0} {"id":"bd-3f4","title":"ALERT: Worker claude-code-glm-5-alpha has no work available","description":"# Worker Starvation Alert\n\nWorker **claude-code-glm-5-alpha** has exhausted all priorities and found zero work.\n\nThis is considered an error state - there should always be more work.\n\n## Worker State\n\n- **Executor:** claude-code-glm-5\n- **Model:** glm-5\n- **Workspace:** /home/coder/FABRIC\n- **Root Boundary:** /home/coder/FABRIC\n- **Last completion:** \n- **Beads completed:** 0\n- **Claim success rate:** %\n- **Uptime:** 71683s (h)\n- **Consecutive empty iterations:** 5\n\n## Priorities Exhausted\n\n1. ✗ Local workspace (bottoms-up): No beads in /home/coder/FABRIC or subfolders\n2. ✗ Parent exploration: No suitable workspaces found\n3. ✓ Maintenance: Completed (cleaned orphaned claims/locks)\n4. ✗ Gap analysis: false - No gaps found or created\n5. ✗ HUMAN alternatives: true - No HUMAN beads found to unblock\n\n## Discovered Workspaces\n\nTotal: 1\n\n- /home/coder/FABRIC\n\n## Required Actions\n\n1. Review discovery roots: Are all project folders being scanned?\n2. Check if projects need new features/tasks\n3. Review ROADMAP.md files across projects\n4. Enable gap analysis if disabled: `--enable-gap-analysis`\n5. Enable HUMAN alternatives if disabled\n6. Create manual beads to bootstrap work\n\n---\n*This alert was created automatically by Priority 6*","status":"closed","priority":0,"issue_type":"human","assignee":"coder","created_at":"2026-03-04T23:52:12.717585382Z","created_by":"coder","updated_at":"2026-03-04T23:58:00.640211969Z","closed_at":"2026-03-04T23:58:00.639941342Z","close_reason":"LEGITIMATE STARVATION - Project 100% complete\n\nInvestigation findings:\n- Ready queue: 0 beads available\n- Open beads: 0 (all 164 beads closed)\n- Project completion: 100%\n\nAll phases complete:\n- Phase 1: Core Infrastructure ✅\n- Phase 2: TUI Implementation ✅\n- Phase 3: Web Dashboard ✅\n- Phase 3.5: Web Frontend Parity ✅\n- Phase 3.5: Intelligence Features ✅\n\nNo work available because the project is finished. Remaining Phase 4+ features are untracked nice-to-haves.\n\nWorker correctly detected project completion state.","source_repo":".","compaction_level":0,"original_size":0} -{"id":"bd-3ih","title":"Improve color scheme contrast in TUI panels","description":"Review the current color scheme in src/tui/utils/colors.ts and improve contrast between text, backgrounds, and status indicators. Ensure the TUI is readable in both light and dark terminal themes.","status":"open","priority":2,"issue_type":"task","created_at":"2026-03-05T00:55:20.614305112Z","created_by":"coder","updated_at":"2026-03-05T00:56:09.171300674Z","source_repo":".","compaction_level":0,"original_size":0} +{"id":"bd-3ih","title":"Improve color scheme contrast in TUI panels","description":"Review the current color scheme in src/tui/utils/colors.ts and improve contrast between text, backgrounds, and status indicators. Ensure the TUI is readable in both light and dark terminal themes.","status":"in_progress","priority":2,"issue_type":"task","assignee":"coder","created_at":"2026-03-05T00:55:20.614305112Z","created_by":"coder","updated_at":"2026-03-05T03:51:59.793318450Z","source_repo":".","compaction_level":0,"original_size":0} {"id":"bd-3p3","title":"Create WorkerDetail panel using frankentui","status":"closed","priority":1,"issue_type":"task","created_at":"2026-03-05T00:50:08.743933037Z","created_by":"coder","updated_at":"2026-03-05T00:55:15.669620398Z","closed_at":"2026-03-05T00:55:15.669331219Z","close_reason":"done","closed_by_session":"frankentui-needs-rust-project","source_repo":".","compaction_level":0,"original_size":0} {"id":"bd-3rf","title":"Regression test suite for frankentui TUI","description":"Create a comprehensive vitest test suite that covers all TUI components and interactions. Include snapshot tests for rendered output and verify no regressions in existing functionality.","status":"in_progress","priority":1,"issue_type":"task","assignee":"coder","created_at":"2026-03-05T00:50:21.706237127Z","created_by":"coder","updated_at":"2026-03-05T03:47:07.231740003Z","source_repo":".","compaction_level":0,"original_size":0,"dependencies":[{"issue_id":"bd-3rf","depends_on_id":"bd-1q7","type":"blocks","created_at":"2026-03-05T00:50:57.804302894Z","created_by":"coder","metadata":"{}","thread_id":""},{"issue_id":"bd-3rf","depends_on_id":"bd-2dr","type":"blocks","created_at":"2026-03-05T00:50:56.030863188Z","created_by":"coder","metadata":"{}","thread_id":""},{"issue_id":"bd-3rf","depends_on_id":"bd-2kq","type":"blocks","created_at":"2026-03-05T00:50:56.632506959Z","created_by":"coder","metadata":"{}","thread_id":""},{"issue_id":"bd-3rf","depends_on_id":"bd-3p3","type":"blocks","created_at":"2026-03-05T00:50:57.206813408Z","created_by":"coder","metadata":"{}","thread_id":""}]} {"id":"bd-o0x","title":"Add worker count badge to header","description":"Add a badge or counter in the TUI header showing the total number of active workers and their statuses (e.g., '3 workers: 2 active, 1 idle'). Update this count in real-time as workers join or leave.","status":"in_progress","priority":2,"issue_type":"task","assignee":"coder","created_at":"2026-03-05T00:55:21.576725313Z","created_by":"coder","updated_at":"2026-03-05T00:56:27.828955388Z","source_repo":".","compaction_level":0,"original_size":0} diff --git a/src/tui/components/WorkerGrid.test.ts b/src/tui/components/WorkerGrid.test.ts index 26d97cb..ee3dedd 100644 --- a/src/tui/components/WorkerGrid.test.ts +++ b/src/tui/components/WorkerGrid.test.ts @@ -312,9 +312,9 @@ describe('WorkerGrid', () => { const content = mockBoxInstance.setContent.mock.calls[0][0]; // Check for status color tags - expect(content).toContain('{green-fg}'); // active - expect(content).toContain('{yellow-fg}'); // idle - expect(content).toContain('{red-fg}'); // error + expect(content).toContain('{light-green-fg}'); // active + expect(content).toContain('{light-yellow-fg}'); // idle + expect(content).toContain('{light-red-fg}'); // error }); it('should show collision indicator when worker has collision', () => { diff --git a/src/tui/utils/colors.ts b/src/tui/utils/colors.ts index 5b6bf54..46f48b8 100644 --- a/src/tui/utils/colors.ts +++ b/src/tui/utils/colors.ts @@ -2,57 +2,66 @@ * FABRIC TUI Color Scheme * * Color definitions for terminal UI rendering. + * Uses bright/light color variants for better contrast and + * readability in both light and dark terminal themes. + * + * Blessed color options: + * - Basic: black, red, green, yellow, blue, magenta, cyan, white + * - Light variants: light-red, light-green, light-yellow, light-blue, + * light-magenta, light-cyan, light-white + * - Gray: light-black (better than 'gray' for consistency) */ export const colors = { - // Status colors - active: 'green', - idle: 'yellow', - error: 'red', + // Status colors - using bright variants for visibility + active: 'light-green', + idle: 'light-yellow', + error: 'light-red', - // Log level colors - debug: 'gray', - info: 'white', - warn: 'yellow', - warning: 'yellow', - error_level: 'red', + // Log level colors - optimized for readability + debug: 'light-black', // Muted but visible + info: 'light-cyan', // Distinct from text + warn: 'light-yellow', // High visibility warning + warning: 'light-yellow', // Alias for warn + error_level: 'light-red', // High visibility error - // UI colors - border: 'blue', - header: 'cyan', - focus: 'green', - muted: 'gray', - text: 'white', - selected: 'green', + // UI colors - improved contrast + border: 'light-blue', + header: 'light-cyan', + focus: 'light-green', + muted: 'light-black', // Consistent muted color + text: 'light-white', // Bright readable text + selected: 'light-green', - // Background colors - bgPanel: 'black', - bgFocus: 'blue', + // Background colors - transparent/none for theme compatibility + bgPanel: 'default', // Use terminal's default background + bgFocus: 'blue', // Distinct but not too bright // Input colors - inputBg: 'black', + inputBg: 'default', // Use terminal's default background inputFocusBg: 'blue', - dim: 'gray', + dim: 'light-black', - // Heat level colors - heatCold: 'blue', - heatWarm: 'yellow', - heatHot: 'magenta', - heatCritical: 'red', + // Heat level colors - progressive intensity + heatCold: 'light-blue', + heatWarm: 'light-yellow', + heatHot: 'light-magenta', + heatCritical: 'light-red', // Named colors (for components that reference by name) - green: 'green', - yellow: 'yellow', - blue: 'blue', - red: 'red', - cyan: 'cyan', - magenta: 'magenta', - orange: 'orange', - purple: 'magenta', - teal: 'cyan', - white: 'white', + // Using light variants for better contrast + green: 'light-green', + yellow: 'light-yellow', + blue: 'light-blue', + red: 'light-red', + cyan: 'light-cyan', + magenta: 'light-magenta', + orange: 'yellow', // Orange not widely supported, use yellow + purple: 'light-magenta', + teal: 'light-cyan', + white: 'light-white', black: 'black', - gray: 'gray', + gray: 'light-black', // Consistent gray using light-black } as const; export type ColorName = keyof typeof colors;