tlc-claude-code 1.4.2 → 1.4.4

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

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

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

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Box } from 'ink';
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+// Import components to test accessibility
+import { Button } from './ui/Button.js';
+import { Modal } from './ui/Modal.js';
+import { Dropdown } from './ui/Dropdown.js';
+import { Toast } from './ui/Toast.js';
+import { Input } from './ui/Input.js';
+import { CommandPalette } from './CommandPalette.js';
+describe('Accessibility', () => {
+    describe('Keyboard Navigation', () => {
+        it('Button is keyboard accessible', () => {
+            const { lastFrame } = render(_jsx(Button, { children: "Click me" }));
+            expect(lastFrame()).toContain('Click me');
+            // Buttons should render and be focusable
+        });
+        it('Modal shows keyboard hints', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, closeable: true, children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toMatch(/esc/i);
+        });
+        it('Dropdown shows navigation hints', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: [{ value: '1', label: 'Option 1' }], onSelect: () => { }, isOpen: true }));
+            expect(lastFrame()).toMatch(/↑|↓|enter|esc/i);
+        });
+        it('CommandPalette shows navigation hints', () => {
+            const { lastFrame } = render(_jsx(CommandPalette, { commands: [{ id: '1', name: 'Test', description: 'Test command' }], onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/↑|↓|j|k|enter|esc/i);
+        });
+    });
+    describe('Focus Indicators', () => {
+        it('Button shows focus state', () => {
+            const { lastFrame: focused } = render(_jsx(Button, { isFocused: true, children: "Focused" }));
+            const { lastFrame: unfocused } = render(_jsx(Button, { isFocused: false, children: "Unfocused" }));
+            // Both should render, focused may have different styling
+            expect(focused()).toContain('Focused');
+            expect(unfocused()).toContain('Unfocused');
+        });
+        it('Input shows focus state', () => {
+            const { lastFrame } = render(_jsx(Input, { placeholder: "Type here", focus: true }));
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Screen Reader Support', () => {
+        it('Modal has title for identification', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, title: "Important Dialog", children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toContain('Important Dialog');
+        });
+        it('Toast shows variant type', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "error", message: "Something went wrong" }));
+            expect(lastFrame()).toMatch(/error|✕|✖/i);
+        });
+        it('Toast shows message content', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "success", message: "Operation completed" }));
+            expect(lastFrame()).toContain('Operation completed');
+        });
+    });
+    describe('Color Contrast', () => {
+        it('Primary text is visible (not dimmed by default)', () => {
+            const { lastFrame } = render(_jsx(Text, { children: "Primary text" }));
+            expect(lastFrame()).toContain('Primary text');
+        });
+        it('Muted text uses dimColor', () => {
+            const { lastFrame } = render(_jsx(Text, { dimColor: true, children: "Muted text" }));
+            expect(lastFrame()).toContain('Muted text');
+        });
+        it('Error state uses red color', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "error", message: "Error" }));
+            // Should contain error indicator
+            expect(lastFrame()).toMatch(/✕|error/i);
+        });
+        it('Success state uses green color', () => {
+            const { lastFrame } = render(_jsx(Toast, { variant: "success", message: "Success" }));
+            expect(lastFrame()).toMatch(/✓|success/i);
+        });
+    });
+    describe('Logical Tab Order', () => {
+        it('Modal content is contained', () => {
+            const { lastFrame } = render(_jsxs(Modal, { isOpen: true, onClose: () => { }, title: "Dialog", children: [_jsx(Text, { children: "First element" }), _jsx(Text, { children: "Second element" })] }));
+            const output = lastFrame() || '';
+            const firstIdx = output.indexOf('First element');
+            const secondIdx = output.indexOf('Second element');
+            // First should appear before second
+            expect(firstIdx).toBeLessThan(secondIdx);
+        });
+        it('Dropdown options in logical order', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: [
+                    { value: '1', label: 'First' },
+                    { value: '2', label: 'Second' },
+                    { value: '3', label: 'Third' },
+                ], onSelect: () => { }, isOpen: true }));
+            const output = lastFrame() || '';
+            const firstIdx = output.indexOf('First');
+            const secondIdx = output.indexOf('Second');
+            const thirdIdx = output.indexOf('Third');
+            expect(firstIdx).toBeLessThan(secondIdx);
+            expect(secondIdx).toBeLessThan(thirdIdx);
+        });
+    });
+    describe('Reduced Motion Support', () => {
+        it('Skeleton uses static characters (no animation in terminal)', () => {
+            // In terminal, we use static shimmer characters
+            // Animation is simulated through character choice, not actual motion
+            const { lastFrame } = render(_jsx(Box, { children: _jsx(Text, { color: "gray", children: "\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591" }) }));
+            expect(lastFrame()).toContain('░');
+        });
+    });
+    describe('Icon-Only Buttons', () => {
+        it('Button with icon still has text for context', () => {
+            const { lastFrame } = render(_jsx(Button, { leftIcon: "+", children: "Add Item" }));
+            expect(lastFrame()).toContain('Add Item');
+            expect(lastFrame()).toContain('+');
+        });
+    });
+});

package/dashboard/dist/components/layout/MobileNav.d.ts

@@ -0,0 +1,16 @@
+export interface NavItem {
+    key: string;
+    label: string;
+    icon: string;
+    badge?: number;
+}
+export interface MobileNavProps {
+    items: NavItem[];
+    activeKey: string;
+    onNavigate: (key: string) => void;
+    compact?: boolean;
+    maxItems?: number;
+    isTTY?: boolean;
+}
+export declare function MobileNav({ items, activeKey, onNavigate, compact, maxItems, isTTY, }: MobileNavProps): import("react/jsx-runtime").JSX.Element;
+export default MobileNav;

package/dashboard/dist/components/layout/MobileNav.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+export function MobileNav({ items, activeKey, onNavigate, compact = false, maxItems = 5, isTTY = true, }) {
+    const [focusIndex, setFocusIndex] = useState(items.findIndex(i => i.key === activeKey));
+    // Handle keyboard navigation
+    useInput((input, key) => {
+        if (!isTTY)
+            return;
+        if (key.leftArrow || input === 'h') {
+            setFocusIndex(prev => Math.max(0, prev - 1));
+        }
+        if (key.rightArrow || input === 'l') {
+            setFocusIndex(prev => Math.min(items.length - 1, prev + 1));
+        }
+        if (key.return) {
+            const item = items[focusIndex];
+            if (item) {
+                onNavigate(item.key);
+            }
+        }
+    }, { isActive: isTTY });
+    const visibleItems = items.slice(0, maxItems);
+    const hasMore = items.length > maxItems;
+    return (_jsxs(Box, { borderStyle: "single", borderColor: "gray", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, paddingX: 1, justifyContent: "space-around", children: [visibleItems.map((item, idx) => {
+                const isActive = item.key === activeKey;
+                const isFocused = idx === focusIndex;
+                return (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginX: 1, children: [isActive && _jsx(Text, { color: "cyan", children: "\u25CF" }), !isActive && _jsx(Text, { children: " " }), _jsx(Text, { color: isActive ? 'cyan' : isFocused ? 'white' : 'gray', children: item.icon }), item.badge !== undefined && item.badge > 0 && (_jsx(Text, { color: "red", bold: true, children: item.badge })), !compact && (_jsx(Text, { color: isActive ? 'cyan' : isFocused ? 'white' : 'gray', dimColor: !isActive && !isFocused, children: item.label.length > 8 ? item.label.slice(0, 6) + '..' : item.label }))] }, item.key));
+            }), hasMore && (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginX: 1, children: [_jsx(Text, { color: "gray", children: "\u22EF" }), !compact && _jsx(Text, { color: "gray", children: "more" })] }))] }));
+}
+export default MobileNav;

package/dashboard/dist/components/layout/MobileNav.test.d.ts

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

package/dashboard/dist/components/layout/MobileNav.test.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { MobileNav } from './MobileNav.js';
+const sampleItems = [
+    { key: 'projects', label: 'Projects', icon: '📁' },
+    { key: 'tasks', label: 'Tasks', icon: '📋' },
+    { key: 'chat', label: 'Chat', icon: '💬' },
+    { key: 'logs', label: 'Logs', icon: '📜' },
+    { key: 'settings', label: 'Settings', icon: '⚙️' },
+];
+describe('MobileNav', () => {
+    describe('Rendering', () => {
+        it('renders navigation items', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { } }));
+            expect(lastFrame()).toContain('Projects');
+            expect(lastFrame()).toContain('Tasks');
+        });
+        it('renders item icons', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { } }));
+            expect(lastFrame()).toContain('📁');
+            expect(lastFrame()).toContain('📋');
+        });
+        it('renders item labels', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { } }));
+            expect(lastFrame()).toContain('Projects');
+            expect(lastFrame()).toContain('Logs');
+        });
+    });
+    describe('Active State', () => {
+        it('shows active indicator on current item', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "tasks", onNavigate: () => { } }));
+            // Active item should have some visual indicator
+            expect(lastFrame()).toContain('Tasks');
+        });
+        it('highlights active item differently', () => {
+            const { lastFrame: activeProjects } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { } }));
+            const { lastFrame: activeTasks } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "tasks", onNavigate: () => { } }));
+            // Both should render but with different active states
+            expect(activeProjects()).toContain('Projects');
+            expect(activeTasks()).toContain('Tasks');
+        });
+    });
+    describe('Navigation', () => {
+        it('calls onNavigate when item selected', () => {
+            const onNavigate = vi.fn();
+            render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: onNavigate }));
+            expect(onNavigate).toBeDefined();
+        });
+    });
+    describe('Compact Mode', () => {
+        it('can hide labels in compact mode', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { }, compact: true }));
+            // Icons should still show
+            expect(lastFrame()).toContain('📁');
+        });
+        it('shows only icons when compact', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { }, compact: true }));
+            // Should render icons
+            expect(lastFrame()).toMatch(/📁|📋|💬|📜|⚙️/);
+        });
+    });
+    describe('Max Items', () => {
+        it('limits visible items', () => {
+            const manyItems = Array.from({ length: 10 }, (_, i) => ({
+                key: `item${i}`,
+                label: `Item ${i}`,
+                icon: '●',
+            }));
+            const { lastFrame } = render(_jsx(MobileNav, { items: manyItems, activeKey: "item0", onNavigate: () => { }, maxItems: 5 }));
+            // Should show limited items or "more" indicator
+            expect(lastFrame()).toBeDefined();
+        });
+        it('shows overflow menu when items exceed max', () => {
+            const manyItems = Array.from({ length: 8 }, (_, i) => ({
+                key: `item${i}`,
+                label: `Item ${i}`,
+                icon: '●',
+            }));
+            const { lastFrame } = render(_jsx(MobileNav, { items: manyItems, activeKey: "item0", onNavigate: () => { }, maxItems: 4 }));
+            // Should show "more" or overflow indicator
+            expect(lastFrame()).toMatch(/more|\.{3}|»|⋯/i);
+        });
+    });
+    describe('Badge Support', () => {
+        it('shows badge on item', () => {
+            const itemsWithBadge = [
+                { key: 'tasks', label: 'Tasks', icon: '📋', badge: 3 },
+                ...sampleItems.slice(1),
+            ];
+            const { lastFrame } = render(_jsx(MobileNav, { items: itemsWithBadge, activeKey: "tasks", onNavigate: () => { } }));
+            expect(lastFrame()).toContain('3');
+        });
+    });
+    describe('Layout', () => {
+        it('renders in horizontal layout', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { } }));
+            // All items should be on roughly same line (horizontal)
+            const output = lastFrame() || '';
+            // Check that items appear to be side by side
+            expect(output).toContain('Projects');
+            expect(output).toContain('Tasks');
+        });
+    });
+    describe('Keyboard Navigation', () => {
+        it('accepts isTTY prop for keyboard support', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleItems, activeKey: "projects", onNavigate: () => { }, isTTY: true }));
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+});

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

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

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

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Suspense, lazy } from 'react';
+import { Text, Box } from 'ink';
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+describe('Performance', () => {
+    describe('Code Splitting', () => {
+        it('App renders without full component tree', () => {
+            // In terminal UI, we test that minimal components render quickly
+            const { lastFrame } = render(_jsx(Text, { children: "App Shell" }));
+            expect(lastFrame()).toContain('App Shell');
+        });
+        it('Skeleton placeholder renders immediately', () => {
+            // Skeleton should render fast as loading state
+            const { lastFrame } = render(_jsx(Box, { children: _jsx(Text, { color: "gray", children: "\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591\u2591" }) }));
+            expect(lastFrame()).toContain('░');
+        });
+    });
+    describe('Lazy Loading', () => {
+        it('Suspense fallback renders while loading', () => {
+            const LazyComponent = lazy(() => Promise.resolve({
+                default: () => _jsx(Text, { children: "Loaded" }),
+            }));
+            const { lastFrame } = render(_jsx(Suspense, { fallback: _jsx(Text, { children: "Loading..." }), children: _jsx(LazyComponent, {}) }));
+            // Should show either loading or loaded
+            const output = lastFrame() || '';
+            expect(output.length).toBeGreaterThan(0);
+        });
+        it('Non-critical content can be deferred', () => {
+            // Pattern: render critical content first
+            const CriticalContent = () => _jsx(Text, { children: "Critical: Dashboard" });
+            const DeferredContent = () => _jsx(Text, { children: "Deferred: Analytics" });
+            const { lastFrame } = render(_jsxs(Box, { flexDirection: "column", children: [_jsx(CriticalContent, {}), _jsx(Suspense, { fallback: _jsx(Text, { children: "Loading analytics..." }), children: _jsx(DeferredContent, {}) })] }));
+            expect(lastFrame()).toContain('Critical: Dashboard');
+        });
+    });
+    describe('Bundle Size Indicators', () => {
+        it('Components use minimal dependencies', () => {
+            // Verify components render with basic ink primitives
+            const { lastFrame } = render(_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { bold: true, children: "Header" }), _jsx(Text, { children: "Content" }), _jsx(Text, { dimColor: true, children: "Footer" })] }));
+            expect(lastFrame()).toContain('Header');
+            expect(lastFrame()).toContain('Content');
+            expect(lastFrame()).toContain('Footer');
+        });
+        it('No heavy external libraries required for basic render', () => {
+            // Basic components should render with just ink
+            const { lastFrame } = render(_jsx(Box, { borderStyle: "single", padding: 1, children: _jsx(Text, { children: "Bordered box" }) }));
+            expect(lastFrame()).toContain('Bordered box');
+        });
+    });
+    describe('Render Performance', () => {
+        it('Simple component renders quickly', () => {
+            const start = performance.now();
+            const { lastFrame } = render(_jsx(Text, { children: "Simple text" }));
+            const duration = performance.now() - start;
+            expect(lastFrame()).toContain('Simple text');
+            // Should render in reasonable time (< 100ms for simple component)
+            expect(duration).toBeLessThan(100);
+        });
+        it('List renders without blocking', () => {
+            const items = Array.from({ length: 100 }, (_, i) => `Item ${i}`);
+            const start = performance.now();
+            const { lastFrame } = render(_jsx(Box, { flexDirection: "column", children: items.slice(0, 10).map((item, i) => (_jsx(Text, { children: item }, i))) }));
+            const duration = performance.now() - start;
+            expect(lastFrame()).toContain('Item 0');
+            // Even with 10 items, should be fast
+            expect(duration).toBeLessThan(200);
+        });
+        it('Memoized components do not re-render unnecessarily', () => {
+            const renderCount = { count: 0 };
+            const MemoizedComponent = React.memo(function MemoizedComponent({ text }) {
+                renderCount.count++;
+                return _jsx(Text, { children: text });
+            });
+            const { rerender, lastFrame } = render(_jsx(MemoizedComponent, { text: "Hello" }));
+            expect(renderCount.count).toBe(1);
+            // Re-render with same props
+            rerender(_jsx(MemoizedComponent, { text: "Hello" }));
+            // Should not increase render count significantly
+            expect(renderCount.count).toBeLessThanOrEqual(2);
+        });
+    });
+    describe('Memory Efficiency', () => {
+        it('Components render and can be unmounted', () => {
+            // In ink-testing-library, unmount doesn't trigger useEffect cleanup
+            // the same way as react-dom. We verify the component lifecycle works.
+            const CleanupComponent = () => {
+                return _jsx(Text, { children: "Cleanup test" });
+            };
+            const { unmount, lastFrame } = render(_jsx(CleanupComponent, {}));
+            expect(lastFrame()).toContain('Cleanup test');
+            // Verify unmount completes without error
+            expect(() => unmount()).not.toThrow();
+        });
+        it('Event handlers are properly attached', () => {
+            // For terminal apps, we use useInput hook
+            // This test ensures the pattern is followed
+            const { lastFrame } = render(_jsxs(Box, { children: [_jsx(Text, { children: "Press any key" }), _jsx(Text, { dimColor: true, children: "(keyboard input enabled)" })] }));
+            expect(lastFrame()).toContain('Press any key');
+        });
+    });
+    describe('No Render-Blocking', () => {
+        it('Progressive content display', () => {
+            // Content should render top-to-bottom
+            const { lastFrame } = render(_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: "Line 1" }), _jsx(Text, { children: "Line 2" }), _jsx(Text, { children: "Line 3" })] }));
+            const output = lastFrame() || '';
+            const line1Idx = output.indexOf('Line 1');
+            const line2Idx = output.indexOf('Line 2');
+            const line3Idx = output.indexOf('Line 3');
+            expect(line1Idx).toBeLessThan(line2Idx);
+            expect(line2Idx).toBeLessThan(line3Idx);
+        });
+    });
+});

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

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

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

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Box } from 'ink';
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+// Import layout components
+import { Shell } from './layout/Shell.js';
+import { Sidebar } from './layout/Sidebar.js';
+import { MobileNav } from './layout/MobileNav.js';
+const sampleNavItems = [
+    { key: 'projects', label: 'Projects', icon: '📁' },
+    { key: 'tasks', label: 'Tasks', icon: '📋' },
+    { key: 'logs', label: 'Logs', icon: '📜' },
+];
+describe('Responsive Layout', () => {
+    describe('Shell Layout', () => {
+        it('renders with sidebar', () => {
+            const { lastFrame } = render(_jsx(Shell, { header: _jsx(Text, { children: "Header" }), footer: _jsx(Text, { children: "Footer" }), sidebar: _jsx(Text, { children: "Sidebar" }), showSidebar: true, children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toContain('Sidebar');
+            expect(lastFrame()).toContain('Content');
+        });
+        it('renders without sidebar when hidden', () => {
+            const { lastFrame } = render(_jsx(Shell, { header: _jsx(Text, { children: "Header" }), footer: _jsx(Text, { children: "Footer" }), sidebar: _jsx(Text, { children: "Sidebar" }), showSidebar: false, children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toContain('Content');
+            // Content should still be present when sidebar hidden
+        });
+        it('renders header and footer', () => {
+            const { lastFrame } = render(_jsx(Shell, { header: _jsx(Text, { children: "Header Content" }), footer: _jsx(Text, { children: "Footer Content" }), children: _jsx(Text, { children: "Main" }) }));
+            expect(lastFrame()).toContain('Header Content');
+            expect(lastFrame()).toContain('Footer Content');
+        });
+    });
+    describe('Sidebar Component', () => {
+        it('renders navigation items', () => {
+            const { lastFrame } = render(_jsxs(Sidebar, { title: "TLC", children: [_jsx(Text, { children: "Item 1" }), _jsx(Text, { children: "Item 2" })] }));
+            expect(lastFrame()).toContain('TLC');
+            expect(lastFrame()).toContain('Item 1');
+            expect(lastFrame()).toContain('Item 2');
+        });
+        it('shows title', () => {
+            const { lastFrame } = render(_jsx(Sidebar, { title: "Dashboard", children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toContain('Dashboard');
+        });
+    });
+    describe('MobileNav for Phone Layout', () => {
+        it('renders all navigation items', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleNavItems, activeKey: "projects", onNavigate: () => { } }));
+            expect(lastFrame()).toContain('Projects');
+            expect(lastFrame()).toContain('Tasks');
+            expect(lastFrame()).toContain('Logs');
+        });
+        it('shows active indicator', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleNavItems, activeKey: "tasks", onNavigate: () => { } }));
+            // Active item should be highlighted
+            expect(lastFrame()).toContain('Tasks');
+        });
+        it('supports compact mode for small screens', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleNavItems, activeKey: "projects", onNavigate: () => { }, compact: true }));
+            // Icons should still show in compact mode
+            expect(lastFrame()).toContain('📁');
+        });
+        it('limits visible items for very small screens', () => {
+            const manyItems = Array.from({ length: 10 }, (_, i) => ({
+                key: `item${i}`,
+                label: `Item ${i}`,
+                icon: '●',
+            }));
+            const { lastFrame } = render(_jsx(MobileNav, { items: manyItems, activeKey: "item0", onNavigate: () => { }, maxItems: 4 }));
+            // Should show overflow indicator
+            expect(lastFrame()).toMatch(/more|⋯/i);
+        });
+    });
+    describe('Touch Targets', () => {
+        it('Button has sufficient padding for touch', () => {
+            // In terminal UI, we ensure buttons have visible brackets
+            const { lastFrame } = render(_jsx(Box, { children: _jsx(Text, { children: "[  OK  ]" }) }));
+            expect(lastFrame()).toContain('[');
+            expect(lastFrame()).toContain(']');
+        });
+        it('Navigation items are spaced apart', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: sampleNavItems, activeKey: "projects", onNavigate: () => { } }));
+            // Items should all be visible (spaced)
+            expect(lastFrame()).toContain('Projects');
+            expect(lastFrame()).toContain('Tasks');
+            expect(lastFrame()).toContain('Logs');
+        });
+    });
+    describe('Content Fitting', () => {
+        it('Content renders without truncation', () => {
+            const { lastFrame } = render(_jsx(Box, { width: 80, children: _jsx(Text, { children: "This is a reasonably long text that should fit within the viewport" }) }));
+            expect(lastFrame()).toContain('This is a reasonably long text');
+        });
+        it('Long labels truncate gracefully', () => {
+            const { lastFrame } = render(_jsx(MobileNav, { items: [
+                    { key: 'long', label: 'Very Long Navigation Item Label', icon: '📁' },
+                ], activeKey: "long", onNavigate: () => { } }));
+            // Should render something (truncated or full)
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Readable Font Sizes', () => {
+        it('Primary text renders clearly', () => {
+            const { lastFrame } = render(_jsx(Text, { children: "Primary readable text" }));
+            expect(lastFrame()).toContain('Primary readable text');
+        });
+        it('Secondary text renders with dimColor', () => {
+            const { lastFrame } = render(_jsx(Text, { dimColor: true, children: "Secondary text" }));
+            expect(lastFrame()).toContain('Secondary text');
+        });
+        it('Bold text renders for emphasis', () => {
+            const { lastFrame } = render(_jsx(Text, { bold: true, children: "Important text" }));
+            expect(lastFrame()).toContain('Important text');
+        });
+    });
+});

package/dashboard/dist/components/ui/Dropdown.d.ts

@@ -0,0 +1,22 @@
+export interface DropdownOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    group?: string;
+}
+export interface DropdownProps {
+    options: DropdownOption[];
+    onSelect: (value: string | string[]) => void;
+    value?: string | string[];
+    placeholder?: string;
+    isOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    multiple?: boolean;
+    filterable?: boolean;
+    filterQuery?: string;
+    onFilterChange?: (query: string) => void;
+    maxHeight?: number;
+    isTTY?: boolean;
+}
+export declare function Dropdown({ options, onSelect, value, placeholder, isOpen, onOpenChange, multiple, filterable, filterQuery, onFilterChange, maxHeight, isTTY, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export default Dropdown;

package/dashboard/dist/components/ui/Dropdown.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState, useMemo } from 'react';
+export function Dropdown({ options, onSelect, value, placeholder = 'Select...', isOpen = false, onOpenChange, multiple = false, filterable = false, filterQuery = '', onFilterChange, maxHeight = 10, isTTY = true, }) {
+    const [highlightIndex, setHighlightIndex] = useState(0);
+    // Filter options based on query
+    const filteredOptions = useMemo(() => {
+        if (!filterQuery)
+            return options;
+        const query = filterQuery.toLowerCase();
+        return options.filter(opt => opt.label.toLowerCase().includes(query) ||
+            opt.value.toLowerCase().includes(query));
+    }, [options, filterQuery]);
+    // Group options
+    const groupedOptions = useMemo(() => {
+        const groups = {};
+        filteredOptions.forEach(opt => {
+            const group = opt.group || '__default__';
+            if (!groups[group])
+                groups[group] = [];
+            groups[group].push(opt);
+        });
+        return groups;
+    }, [filteredOptions]);
+    // Get display value
+    const displayValue = useMemo(() => {
+        if (!value)
+            return placeholder;
+        if (Array.isArray(value)) {
+            if (value.length === 0)
+                return placeholder;
+            const labels = value.map(v => {
+                const opt = options.find(o => o.value === v);
+                return opt?.label || v;
+            });
+            return labels.join(', ');
+        }
+        const opt = options.find(o => o.value === value);
+        return opt?.label || placeholder;
+    }, [value, options, placeholder]);
+    // Check if option is selected
+    const isSelected = (optValue) => {
+        if (Array.isArray(value))
+            return value.includes(optValue);
+        return value === optValue;
+    };
+    // Handle keyboard input
+    useInput((input, key) => {
+        if (!isOpen || !isTTY)
+            return;
+        if (key.escape) {
+            onOpenChange?.(false);
+            return;
+        }
+        if (key.downArrow || input === 'j') {
+            setHighlightIndex(prev => {
+                let next = prev + 1;
+                while (next < filteredOptions.length && filteredOptions[next]?.disabled) {
+                    next++;
+                }
+                return next < filteredOptions.length ? next : prev;
+            });
+            return;
+        }
+        if (key.upArrow || input === 'k') {
+            setHighlightIndex(prev => {
+                let next = prev - 1;
+                while (next >= 0 && filteredOptions[next]?.disabled) {
+                    next--;
+                }
+                return next >= 0 ? next : prev;
+            });
+            return;
+        }
+        if (key.return) {
+            const selected = filteredOptions[highlightIndex];
+            if (selected && !selected.disabled) {
+                if (multiple) {
+                    const currentValues = Array.isArray(value) ? value : [];
+                    const newValues = isSelected(selected.value)
+                        ? currentValues.filter(v => v !== selected.value)
+                        : [...currentValues, selected.value];
+                    onSelect(newValues);
+                }
+                else {
+                    onSelect(selected.value);
+                    onOpenChange?.(false);
+                }
+            }
+            return;
+        }
+        // Type-ahead filtering
+        if (filterable && input && input.length === 1 && /[a-zA-Z0-9]/.test(input)) {
+            onFilterChange?.(filterQuery + input);
+        }
+    }, { isActive: isTTY && isOpen });
+    if (!isOpen) {
+        // Closed state - show trigger
+        return (_jsxs(Box, { children: [_jsx(Text, { children: displayValue }), _jsx(Text, { color: "gray", children: " \u25BE" })] }));
+    }
+    // Open state - show dropdown list
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: displayValue }), _jsx(Text, { color: "cyan", children: " \u25B4" })] }), filterable && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "gray", children: "> " }), _jsx(Text, { children: filterQuery }), _jsx(Text, { color: "cyan", children: "\u258F" })] })), _jsx(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", borderColor: "gray", paddingX: 1, children: filteredOptions.length === 0 ? (_jsx(Text, { color: "gray", children: "No matching options" })) : (Object.entries(groupedOptions).map(([group, opts]) => (_jsxs(Box, { flexDirection: "column", children: [group !== '__default__' && (_jsx(Text, { bold: true, color: "cyan", children: group })), opts.slice(0, maxHeight).map((opt, idx) => {
+                            const globalIdx = filteredOptions.indexOf(opt);
+                            const isHighlighted = globalIdx === highlightIndex;
+                            const isChecked = isSelected(opt.value);
+                            return (_jsxs(Box, { children: [_jsx(Text, { color: isHighlighted ? 'cyan' : undefined, children: isHighlighted ? '▶ ' : '  ' }), multiple && (_jsx(Text, { color: isChecked ? 'green' : 'gray', children: isChecked ? '☑ ' : '☐ ' })), _jsx(Text, { color: opt.disabled ? 'gray' : undefined, dimColor: opt.disabled, children: opt.label })] }, opt.value));
+                        })] }, group)))) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "\u2191\u2193 navigate | Enter select | Esc close" }) })] }));
+}
+export default Dropdown;