fix(colors): stop defaulting to the unknown color name 'gray'

src/utils/__tests__/default-colors.test.ts

@@ -0,0 +1,68 @@
+import chalk from 'chalk';
+import {
+    afterAll,
+    beforeAll,
+    describe,
+    expect,
+    it
+} from 'vitest';
+
+import {
+    DEFAULT_SETTINGS,
+    type Settings
+} from '../../types/Settings';
+import type { WidgetItem } from '../../types/Widget';
+import {
+    COLOR_MAP,
+    updateColorMap
+} from '../colors';
+import { renderStatusLine } from '../renderer';
+import { WIDGET_MANIFEST } from '../widget-manifest';
+
+const BRIGHT_BLACK_FG = '\x1b[90m';
+
+describe('default colors resolve through COLOR_MAP', () => {
+    it('every widget default color is a COLOR_MAP name', () => {
+        const known = new Set(COLOR_MAP.map(entry => entry.name));
+        for (const entry of WIDGET_MANIFEST) {
+            const color = entry.create().getDefaultColor();
+            expect(known.has(color), `${entry.type} -> '${color}'`).toBe(true);
+        }
+    });
+});
+
+describe('uncolored separator default', () => {
+    const previousLevel = chalk.level;
+
+    beforeAll(() => {
+        chalk.level = 1;
+        updateColorMap();
+    });
+
+    afterAll(() => {
+        chalk.level = previousLevel;
+        updateColorMap();
+    });
+
+    it('paints a separator with no explicit color as bright black', () => {
+        const widgets: WidgetItem[] = [
+            { id: 'a', type: 'custom-text' },
+            { id: 'sep', type: 'separator' },
+            { id: 'b', type: 'custom-text' }
+        ];
+        const settings: Settings = {
+            ...DEFAULT_SETTINGS,
+            colorLevel: 1,
+            inheritSeparatorColors: false
+        };
+        const preRendered = widgets.map(widget => ({
+            content: widget.type === 'separator' ? '' : widget.id.toUpperCase(),
+            plainLength: widget.type === 'separator' ? 0 : 1,
+            widget
+        }));
+
+        const out = renderStatusLine(widgets, settings, { isPreview: false, terminalWidth: 200 }, preRendered, []);
+
+        expect(out).toContain(`${BRIGHT_BLACK_FG} | `);
+    });
+});

src/utils/renderer.ts

@@ -1126,7 +1126,7 @@ export function renderStatusLine(
             const formattedSep = formatSeparator(sepChar);
 
             // Check if we should inherit colors from the previous widget
-            let separatorColor = widget.color ?? 'gray';
+            let separatorColor = widget.color ?? 'brightBlack';
             let separatorBg = widget.backgroundColor;
             let separatorBold = widget.bold;
             let separatorDim = widget.dim;

src/widgets/GitSha.ts

@@ -17,7 +17,7 @@ import {
 } from './shared/hideable';
 
 export class GitShaWidget implements Widget {
-    getDefaultColor(): string { return 'gray'; }
+    getDefaultColor(): string { return 'brightBlack'; }
     getDescription(): string { return 'Shows short commit hash (SHA)'; }
     getDisplayName(): string { return 'Git SHA'; }
     getCategory(): string { return 'Git'; }

src/widgets/TerminalWidth.ts

@@ -8,7 +8,7 @@ import type {
 import { getTerminalWidth } from '../utils/terminal';
 
 export class TerminalWidthWidget implements Widget {
-    getDefaultColor(): string { return 'gray'; }
+    getDefaultColor(): string { return 'brightBlack'; }
     getDescription(): string { return 'Shows current terminal width in columns'; }
     getDisplayName(): string { return 'Terminal Width'; }
     getCategory(): string { return 'Environment'; }

src/widgets/Version.ts

@@ -7,7 +7,7 @@ import type {
 } from '../types/Widget';
 
 export class VersionWidget implements Widget {
-    getDefaultColor(): string { return 'gray'; }
+    getDefaultColor(): string { return 'brightBlack'; }
     getDescription(): string { return 'Shows Claude Code CLI version number'; }
     getDisplayName(): string { return 'Version'; }
     getCategory(): string { return 'Core'; }