tlc-claude-code 1.2.27 → 1.2.29

package/dashboard/dist/components/EnvironmentBadge.test.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { EnvironmentBadge } from './EnvironmentBadge.js';
+describe('EnvironmentBadge', () => {
+    describe('Environment Detection', () => {
+        it('shows local environment', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "local" }));
+            expect(lastFrame()).toMatch(/local|dev/i);
+        });
+        it('shows staging environment', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "staging" }));
+            expect(lastFrame()).toMatch(/staging|stage/i);
+        });
+        it('shows production environment', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "production" }));
+            expect(lastFrame()).toMatch(/prod|production/i);
+        });
+        it('shows VPS environment', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "vps" }));
+            expect(lastFrame()).toMatch(/vps|server/i);
+        });
+    });
+    describe('Colors', () => {
+        it('uses green for local', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "local" }));
+            // Just verify it renders
+            expect(lastFrame()).toContain('local');
+        });
+        it('uses yellow for staging', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "staging" }));
+            expect(lastFrame()).toContain('staging');
+        });
+        it('uses red for production', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "production" }));
+            expect(lastFrame()).toMatch(/prod/i);
+        });
+        it('uses cyan for VPS', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "vps" }));
+            expect(lastFrame()).toMatch(/vps/i);
+        });
+    });
+    describe('Branch Info', () => {
+        it('shows branch name', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "local", branch: "main" }));
+            expect(lastFrame()).toContain('main');
+        });
+        it('shows feature branch', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "vps", branch: "feature/auth" }));
+            expect(lastFrame()).toContain('feature/auth');
+        });
+    });
+    describe('Version Info', () => {
+        it('shows version', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "production", version: "1.2.3" }));
+            expect(lastFrame()).toContain('1.2.3');
+        });
+        it('shows commit hash', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "staging", commit: "abc1234" }));
+            expect(lastFrame()).toContain('abc1234');
+        });
+    });
+    describe('Production Warning', () => {
+        it('shows warning for production', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "production" }));
+            expect(lastFrame()).toMatch(/⚠|warning|prod|!|caution/i);
+        });
+        it('no warning for local', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "local" }));
+            const output = lastFrame() || '';
+            // Should not have production warning
+            expect(output).toContain('local');
+        });
+    });
+    describe('Compact Mode', () => {
+        it('shows compact badge', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "local", compact: true }));
+            expect(lastFrame()).toMatch(/local|L|DEV/i);
+        });
+        it('shows full badge by default', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "staging", branch: "develop" }));
+            expect(lastFrame()).toContain('staging');
+            expect(lastFrame()).toContain('develop');
+        });
+    });
+    describe('URL Display', () => {
+        it('shows environment URL', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "vps", url: "https://dev.example.com" }));
+            expect(lastFrame()).toContain('dev.example.com');
+        });
+    });
+    describe('Connection Status', () => {
+        it('shows connected status', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "vps", connected: true }));
+            expect(lastFrame()).toMatch(/●|connected|online/i);
+        });
+        it('shows disconnected status', () => {
+            const { lastFrame } = render(_jsx(EnvironmentBadge, { environment: "vps", connected: false }));
+            expect(lastFrame()).toMatch(/○|disconnected|offline/i);
+        });
+    });
+});

package/dashboard/dist/components/FocusIndicator.d.ts

@@ -0,0 +1,19 @@
+export interface FocusArea {
+    id: string;
+    label: string;
+    shortcut?: string;
+}
+export interface FocusIndicatorProps {
+    areas: FocusArea[];
+    currentArea: string;
+    isTrapped?: boolean;
+    trappedLabel?: string;
+    showSkipLinks?: boolean;
+    highContrast?: boolean;
+    compact?: boolean;
+    breadcrumb?: string[];
+    isActive?: boolean;
+    onFocusChange?: (areaId: string) => void;
+    onEscape?: () => void;
+}
+export declare function FocusIndicator({ areas, currentArea, isTrapped, trappedLabel, showSkipLinks, highContrast, compact, breadcrumb, isActive, onFocusChange, onEscape, }: FocusIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/FocusIndicator.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useInput } from 'ink';
+export function FocusIndicator({ areas, currentArea, isTrapped = false, trappedLabel, showSkipLinks = false, highContrast = false, compact = false, breadcrumb, isActive = true, onFocusChange, onEscape, }) {
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // Escape from trap
+        if (key.escape && isTrapped && onEscape) {
+            onEscape();
+            return;
+        }
+        // Tab navigation
+        if (key.tab && !isTrapped && onFocusChange) {
+            const currentIndex = areas.findIndex((a) => a.id === currentArea);
+            const nextIndex = key.shift
+                ? (currentIndex - 1 + areas.length) % areas.length
+                : (currentIndex + 1) % areas.length;
+            onFocusChange(areas[nextIndex].id);
+            return;
+        }
+        // Number shortcut navigation
+        if (!isTrapped && onFocusChange) {
+            const num = parseInt(input, 10);
+            if (num >= 1 && num <= areas.length) {
+                onFocusChange(areas[num - 1].id);
+            }
+        }
+    }, { isActive });
+    // Empty state
+    if (areas.length === 0) {
+        return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "No focus areas" }) }));
+    }
+    // Trapped mode (modal)
+    if (isTrapped) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: "yellow", bold: true, children: ["\u25B6 ", trappedLabel || 'Modal'] }), _jsx(Text, { dimColor: true, children: " (Esc to close)" })] }), !compact && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: areas.map((a) => a.label).join(' │ ') }) }))] }));
+    }
+    // Compact mode
+    if (compact) {
+        const current = areas.find((a) => a.id === currentArea);
+        return (_jsxs(Box, { children: [_jsxs(Text, { color: "cyan", bold: true, children: ["\u25B6 ", current?.label || currentArea] }), _jsx(Text, { dimColor: true, children: " Tab to navigate" })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [showSkipLinks && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: "[Skip to main content]" }) })), breadcrumb && breadcrumb.length > 0 && (_jsx(Box, { marginBottom: 1, children: breadcrumb.map((item, idx) => (_jsxs(React.Fragment, { children: [idx > 0 && _jsx(Text, { dimColor: true, children: " \u203A " }), _jsx(Text, { color: idx === breadcrumb.length - 1 ? 'cyan' : undefined, dimColor: idx !== breadcrumb.length - 1, children: item })] }, idx))) })), _jsx(Box, { children: areas.map((area, idx) => {
+                    const isCurrent = area.id === currentArea;
+                    return (_jsxs(Box, { marginRight: 2, children: [_jsx(Text, { color: isCurrent ? 'cyan' : undefined, children: isCurrent ? '▶ ' : '  ' }), area.shortcut && (_jsxs(Text, { color: highContrast ? 'white' : 'yellow', children: ["[", area.shortcut, "]"] })), _jsx(Text, { bold: isCurrent || highContrast, color: isCurrent ? 'cyan' : highContrast ? 'white' : undefined, dimColor: !isCurrent && !highContrast, children: area.label })] }, area.id));
+                }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Tab next \u2022 Shift+Tab prev \u2022 1-", areas.length, " jump"] }) })] }));
+}

package/dashboard/dist/components/FocusIndicator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dashboard/dist/components/FocusIndicator.test.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { FocusIndicator } from './FocusIndicator.js';
+const sampleAreas = [
+    { id: 'projects', label: 'Projects', shortcut: '1' },
+    { id: 'tasks', label: 'Tasks', shortcut: '2' },
+    { id: 'logs', label: 'Logs', shortcut: '3' },
+    { id: 'team', label: 'Team', shortcut: '4' },
+];
+describe('FocusIndicator', () => {
+    describe('Current Focus', () => {
+        it('shows current focus area', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects" }));
+            expect(lastFrame()).toContain('Projects');
+        });
+        it('highlights current area', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "tasks" }));
+            expect(lastFrame()).toContain('Tasks');
+        });
+        it('shows focus indicator icon', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "logs" }));
+            expect(lastFrame()).toMatch(/▶|→|●|focus/i);
+        });
+    });
+    describe('Tab Navigation', () => {
+        it('shows all focus areas', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects" }));
+            expect(lastFrame()).toContain('Projects');
+            expect(lastFrame()).toContain('Tasks');
+            expect(lastFrame()).toContain('Logs');
+            expect(lastFrame()).toContain('Team');
+        });
+        it('shows area shortcuts', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects" }));
+            expect(lastFrame()).toContain('1');
+            expect(lastFrame()).toContain('2');
+        });
+        it('shows Tab hint for navigation', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects" }));
+            expect(lastFrame()).toMatch(/tab/i);
+        });
+        it('calls onFocusChange when area changed', () => {
+            const onFocusChange = vi.fn();
+            render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", onFocusChange: onFocusChange }));
+            // Focus change happens on Tab or number key
+        });
+    });
+    describe('Focus Trap', () => {
+        it('shows modal indicator when trapped', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", isTrapped: true, trappedLabel: "Settings" }));
+            expect(lastFrame()).toContain('Settings');
+        });
+        it('shows escape hint when trapped', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", isTrapped: true }));
+            expect(lastFrame()).toMatch(/esc|close|exit/i);
+        });
+        it('dims other areas when trapped', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", isTrapped: true }));
+            // When trapped, main areas should be dimmed
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Skip Links', () => {
+        it('shows skip to content hint', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", showSkipLinks: true }));
+            expect(lastFrame()).toMatch(/skip|content|main/i);
+        });
+    });
+    describe('High Contrast Mode', () => {
+        it('supports high contrast mode', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", highContrast: true }));
+            expect(lastFrame()).toContain('Projects');
+        });
+        it('uses bold text in high contrast', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", highContrast: true }));
+            // Visual verification - renders without error
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Compact Mode', () => {
+        it('shows compact indicator', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", compact: true }));
+            expect(lastFrame()).toContain('Projects');
+        });
+        it('hides shortcuts in compact mode', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", compact: true }));
+            const output = lastFrame() || '';
+            // Should be shorter
+            expect(output.length).toBeLessThan(200);
+        });
+    });
+    describe('Breadcrumb Path', () => {
+        it('shows breadcrumb when path provided', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", breadcrumb: ['Dashboard', 'Projects', 'Alpha'] }));
+            expect(lastFrame()).toContain('Dashboard');
+            expect(lastFrame()).toContain('Alpha');
+        });
+        it('uses separator for breadcrumb', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", breadcrumb: ['A', 'B'] }));
+            expect(lastFrame()).toMatch(/›|>|→|\//);
+        });
+    });
+    describe('Empty State', () => {
+        it('handles no areas gracefully', () => {
+            const { lastFrame } = render(_jsx(FocusIndicator, { areas: [], currentArea: "" }));
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Callbacks', () => {
+        it('calls onEscape when trapped and Esc pressed', () => {
+            const onEscape = vi.fn();
+            render(_jsx(FocusIndicator, { areas: sampleAreas, currentArea: "projects", isTrapped: true, onEscape: onEscape }));
+            // Escape happens on Esc key
+        });
+    });
+});

package/dashboard/dist/components/KeyboardHelp.d.ts

@@ -0,0 +1,15 @@
+export interface Shortcut {
+    key: string;
+    description: string;
+    context: string;
+}
+export interface KeyboardHelpProps {
+    shortcuts: Shortcut[];
+    searchQuery?: string;
+    currentContext?: string;
+    compact?: boolean;
+    isActive?: boolean;
+    onClose?: () => void;
+    onSearch?: (query: string) => void;
+}
+export declare function KeyboardHelp({ shortcuts, searchQuery, currentContext, compact, isActive, onClose, onSearch, }: KeyboardHelpProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/KeyboardHelp.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+function groupByContext(shortcuts) {
+    const groups = {};
+    const order = ['global', 'navigation', 'actions'];
+    for (const shortcut of shortcuts) {
+        if (!groups[shortcut.context]) {
+            groups[shortcut.context] = [];
+        }
+        groups[shortcut.context].push(shortcut);
+    }
+    // Sort by predefined order, then alphabetically
+    const sortedContexts = Object.keys(groups).sort((a, b) => {
+        const aIndex = order.indexOf(a);
+        const bIndex = order.indexOf(b);
+        if (aIndex !== -1 && bIndex !== -1)
+            return aIndex - bIndex;
+        if (aIndex !== -1)
+            return -1;
+        if (bIndex !== -1)
+            return 1;
+        return a.localeCompare(b);
+    });
+    return sortedContexts.map((context) => ({
+        context,
+        shortcuts: groups[context],
+    }));
+}
+export function KeyboardHelp({ shortcuts, searchQuery = '', currentContext, compact = false, isActive = true, onClose, onSearch, }) {
+    // Filter shortcuts
+    const filteredShortcuts = useMemo(() => {
+        if (!searchQuery)
+            return shortcuts;
+        const query = searchQuery.toLowerCase();
+        return shortcuts.filter((s) => s.key.toLowerCase().includes(query) ||
+            s.description.toLowerCase().includes(query));
+    }, [shortcuts, searchQuery]);
+    // Group shortcuts
+    const groupedShortcuts = useMemo(() => groupByContext(filteredShortcuts), [filteredShortcuts]);
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // Close on Escape or ?
+        if (key.escape || input === '?') {
+            onClose?.();
+        }
+    }, { isActive });
+    // Empty state
+    if (shortcuts.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Keyboard Shortcuts" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No shortcuts configured" }) })] }));
+    }
+    // No matches
+    if (filteredShortcuts.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, children: "Keyboard Shortcuts" }) }), searchQuery && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Search: " }), _jsxs(Text, { color: "yellow", children: ["\"", searchQuery, "\""] })] })), _jsxs(Text, { color: "yellow", children: ["No shortcuts matching \"", searchQuery, "\""] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Esc close \u2022 / search" }) })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Keyboard Shortcuts" }), _jsxs(Text, { dimColor: true, children: [" (", filteredShortcuts.length, ")"] })] }), searchQuery && (_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Search: " }), _jsxs(Text, { color: "yellow", children: ["\"", searchQuery, "\""] })] })), groupedShortcuts.map((group) => {
+                const isCurrentContext = group.context === currentContext;
+                return (_jsxs(Box, { flexDirection: "column", marginBottom: compact ? 0 : 1, children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, color: isCurrentContext ? 'cyan' : 'gray', children: [group.context.toUpperCase(), isCurrentContext && ' (current)'] }) }), group.shortcuts.map((shortcut, idx) => (_jsxs(Box, { marginBottom: compact ? 0 : 1, children: [_jsx(Box, { width: 16, children: _jsx(Text, { color: "yellow", bold: true, children: shortcut.key }) }), _jsx(Text, { children: shortcut.description })] }, `${group.context}-${idx}`)))] }, group.context));
+            }), _jsx(Box, { marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Esc or ? close \u2022 / search" }) })] }));
+}

package/dashboard/dist/components/KeyboardHelp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dashboard/dist/components/KeyboardHelp.test.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { KeyboardHelp } from './KeyboardHelp.js';
+const sampleShortcuts = [
+    // Global
+    { key: '?', description: 'Show keyboard help', context: 'global' },
+    { key: 'Ctrl+K', description: 'Open command palette', context: 'global' },
+    { key: 'q', description: 'Quit', context: 'global' },
+    // Navigation
+    { key: 'j/↓', description: 'Move down', context: 'navigation' },
+    { key: 'k/↑', description: 'Move up', context: 'navigation' },
+    { key: 'h/←', description: 'Move left', context: 'navigation' },
+    { key: 'l/→', description: 'Move right', context: 'navigation' },
+    { key: 'Tab', description: 'Next section', context: 'navigation' },
+    { key: 'Shift+Tab', description: 'Previous section', context: 'navigation' },
+    // Actions
+    { key: 'Enter', description: 'Select/confirm', context: 'actions' },
+    { key: 'Esc', description: 'Cancel/back', context: 'actions' },
+    { key: 'e', description: 'Edit', context: 'actions' },
+    { key: 'r', description: 'Refresh', context: 'actions' },
+];
+describe('KeyboardHelp', () => {
+    describe('Shortcut Display', () => {
+        it('shows shortcut keys', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            expect(lastFrame()).toContain('Ctrl+K');
+            expect(lastFrame()).toContain('j/↓');
+        });
+        it('shows shortcut descriptions', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            expect(lastFrame()).toContain('Open command palette');
+            expect(lastFrame()).toContain('Move down');
+        });
+        it('formats key combinations clearly', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            expect(lastFrame()).toContain('Ctrl+K');
+            expect(lastFrame()).toContain('Shift+Tab');
+        });
+    });
+    describe('Context Grouping', () => {
+        it('shows Global section', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            expect(lastFrame()).toMatch(/global/i);
+        });
+        it('shows Navigation section', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            expect(lastFrame()).toMatch(/navigation/i);
+        });
+        it('shows Actions section', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            expect(lastFrame()).toMatch(/actions/i);
+        });
+        it('groups shortcuts by context', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            // All navigation shortcuts should be together
+            expect(lastFrame()).toContain('Move down');
+            expect(lastFrame()).toContain('Move up');
+        });
+    });
+    describe('Search', () => {
+        it('filters shortcuts by key', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts, searchQuery: "ctrl" }));
+            expect(lastFrame()).toContain('Ctrl+K');
+        });
+        it('filters shortcuts by description', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts, searchQuery: "palette" }));
+            expect(lastFrame()).toContain('command palette');
+        });
+        it('shows no results message', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts, searchQuery: "xyznonexistent" }));
+            expect(lastFrame()).toMatch(/no.*match|no.*shortcut|not.*found/i);
+        });
+        it('is case insensitive', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts, searchQuery: "CTRL" }));
+            expect(lastFrame()).toContain('Ctrl+K');
+        });
+    });
+    describe('Dismissible Overlay', () => {
+        it('shows close hint', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            expect(lastFrame()).toMatch(/esc|close|dismiss|\?/i);
+        });
+        it('calls onClose when dismissed', () => {
+            const onClose = vi.fn();
+            render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts, onClose: onClose }));
+            // Close happens on Esc or ? key
+        });
+    });
+    describe('Current Context', () => {
+        it('highlights current context shortcuts', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts, currentContext: "navigation" }));
+            expect(lastFrame()).toMatch(/navigation/i);
+        });
+        it('shows all shortcuts when no context', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            expect(lastFrame()).toContain('Quit');
+            expect(lastFrame()).toContain('Move down');
+            expect(lastFrame()).toContain('Select/confirm');
+        });
+    });
+    describe('Header', () => {
+        it('shows Keyboard Shortcuts title', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            expect(lastFrame()).toMatch(/keyboard|shortcuts|help/i);
+        });
+        it('shows shortcut count', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            // Should show total count
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Empty State', () => {
+        it('shows message when no shortcuts', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: [] }));
+            expect(lastFrame()).toMatch(/no.*shortcut|empty/i);
+        });
+    });
+    describe('Compact Mode', () => {
+        it('supports compact display', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts, compact: true }));
+            expect(lastFrame()).toContain('Ctrl+K');
+        });
+    });
+    describe('Navigation', () => {
+        it('shows search hint', () => {
+            const { lastFrame } = render(_jsx(KeyboardHelp, { shortcuts: sampleShortcuts }));
+            expect(lastFrame()).toMatch(/\/|search|type/i);
+        });
+    });
+});

package/dashboard/dist/components/LogSearch.d.ts

@@ -0,0 +1,13 @@
+export interface LogSearchProps {
+    query: string;
+    matchCount?: number;
+    currentMatch?: number;
+    caseSensitive?: boolean;
+    isActive?: boolean;
+    onChange: (query: string) => void;
+    onClose: () => void;
+    onNext?: () => void;
+    onPrev?: () => void;
+    onToggleCase?: () => void;
+}
+export declare function LogSearch({ query, matchCount, currentMatch, caseSensitive, isActive, onChange, onClose, onNext, onPrev, onToggleCase, }: LogSearchProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/LogSearch.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+export function LogSearch({ query, matchCount = 0, currentMatch = 0, caseSensitive = false, isActive = true, onChange, onClose, onNext, onPrev, onToggleCase, }) {
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // Close on Escape
+        if (key.escape) {
+            onClose();
+            return;
+        }
+        // Submit on Enter (just keeps current search)
+        if (key.return) {
+            return;
+        }
+        // Next/Prev match
+        if (input === 'n' && !key.ctrl && matchCount > 0) {
+            onNext?.();
+            return;
+        }
+        if (input === 'N' && matchCount > 0) {
+            onPrev?.();
+            return;
+        }
+        // Toggle case sensitivity
+        if (key.ctrl && input === 'c') {
+            onToggleCase?.();
+            return;
+        }
+        // Backspace
+        if (key.backspace || key.delete) {
+            onChange(query.slice(0, -1));
+            return;
+        }
+        // Regular character input
+        if (input && !key.ctrl && !key.meta) {
+            onChange(query + input);
+        }
+    }, { isActive });
+    const hasMatches = matchCount > 0;
+    const showMatchCount = query.length > 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "/" }), _jsx(Text, { children: query }), _jsx(Text, { color: "cyan", children: "\u258F" }), showMatchCount && (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: hasMatches ? 'green' : 'red', children: currentMatch > 0 ? `${currentMatch} of ${matchCount}` : `${matchCount} match${matchCount !== 1 ? 'es' : ''}` }) })), caseSensitive && (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { color: "magenta", children: "[Aa]" }) }))] }), query.length === 0 && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Type to search logs..." }) })), query.length > 0 && matchCount === 0 && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: "No matches found" }) })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Enter search \u2022 Esc close", matchCount > 1 && ' • n/N next/prev'] }) })] }));
+}

package/dashboard/dist/components/LogSearch.test.d.ts

@@ -0,0 +1 @@
+export {};