tlc-claude-code 1.4.1 → 1.4.4

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;

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

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

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

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Dropdown } from './Dropdown.js';
+const sampleOptions = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3', disabled: true },
+    { value: 'option4', label: 'Option 4' },
+];
+describe('Dropdown', () => {
+    describe('Rendering', () => {
+        it('renders trigger button with placeholder', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, placeholder: "Select..." }));
+            expect(lastFrame()).toContain('Select...');
+        });
+        it('renders trigger with selected value', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, value: "option1" }));
+            expect(lastFrame()).toContain('Option 1');
+        });
+        it('shows dropdown indicator', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { } }));
+            expect(lastFrame()).toMatch(/▼|▾|↓|v/);
+        });
+    });
+    describe('Open State', () => {
+        it('shows options when open', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, isOpen: true }));
+            expect(lastFrame()).toContain('Option 1');
+            expect(lastFrame()).toContain('Option 2');
+            expect(lastFrame()).toContain('Option 4');
+        });
+        it('hides options when closed', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, isOpen: false }));
+            // Should show trigger but not full options list
+            const output = lastFrame() || '';
+            // Options list should not be visible when closed
+            expect(output).toBeDefined();
+        });
+    });
+    describe('Selection', () => {
+        it('highlights first option by default when open', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, isOpen: true }));
+            expect(lastFrame()).toMatch(/▶|→|>|\*/);
+        });
+        it('calls onSelect when option selected', () => {
+            const onSelect = vi.fn();
+            render(_jsx(Dropdown, { options: sampleOptions, onSelect: onSelect, isOpen: true }));
+            expect(onSelect).toBeDefined();
+        });
+        it('skips disabled options', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, isOpen: true }));
+            // Option 3 should be shown but dimmed/disabled
+            expect(lastFrame()).toContain('Option 3');
+        });
+    });
+    describe('Multi-Select', () => {
+        it('allows multiple selections', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, isOpen: true, multiple: true, value: ['option1', 'option2'] }));
+            expect(lastFrame()).toMatch(/✓|☑|✔/);
+        });
+        it('shows checkbox indicators in multi mode', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, isOpen: true, multiple: true }));
+            expect(lastFrame()).toMatch(/□|☐|☑|✓|\[ \]|\[x\]/i);
+        });
+    });
+    describe('Filtering', () => {
+        it('shows filter input when filterable', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, isOpen: true, filterable: true }));
+            expect(lastFrame()).toMatch(/search|filter|type|>|▏/i);
+        });
+        it('filters options based on query', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, isOpen: true, filterable: true, filterQuery: "1" }));
+            expect(lastFrame()).toContain('Option 1');
+        });
+    });
+    describe('Keyboard Hints', () => {
+        it('shows navigation hints when open', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, isOpen: true }));
+            expect(lastFrame()).toMatch(/↑|↓|j|k|enter|esc/i);
+        });
+    });
+    describe('Empty State', () => {
+        it('shows empty message when no options', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: [], onSelect: () => { }, isOpen: true }));
+            expect(lastFrame()).toMatch(/no.*option|empty/i);
+        });
+        it('shows no match message when filter returns empty', () => {
+            const { lastFrame } = render(_jsx(Dropdown, { options: sampleOptions, onSelect: () => { }, isOpen: true, filterable: true, filterQuery: "xyz" }));
+            expect(lastFrame()).toMatch(/no.*match|not.*found/i);
+        });
+    });
+    describe('Grouping', () => {
+        it('renders grouped options with headers', () => {
+            const groupedOptions = [
+                { value: 'a', label: 'A', group: 'Letters' },
+                { value: 'b', label: 'B', group: 'Letters' },
+                { value: '1', label: '1', group: 'Numbers' },
+            ];
+            const { lastFrame } = render(_jsx(Dropdown, { options: groupedOptions, onSelect: () => { }, isOpen: true }));
+            expect(lastFrame()).toContain('Letters');
+            expect(lastFrame()).toContain('Numbers');
+        });
+    });
+});

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

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    closeable?: boolean;
+    size?: 'small' | 'medium' | 'large' | 'fullscreen';
+    isTTY?: boolean;
+}
+export declare function Modal({ isOpen, onClose, title, children, footer, closeable, size, isTTY, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+export default Modal;

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+const sizeMap = {
+    small: { width: 40, height: 10 },
+    medium: { width: 60, height: 15 },
+    large: { width: 80, height: 20 },
+    fullscreen: { width: '100%', height: '100%' },
+};
+export function Modal({ isOpen, onClose, title, children, footer, closeable = true, size = 'medium', isTTY = true, }) {
+    // Handle keyboard input
+    useInput((input, key) => {
+        if (!isOpen || !closeable)
+            return;
+        if (key.escape) {
+            onClose();
+        }
+    }, { isActive: isTTY && isOpen });
+    if (!isOpen) {
+        return null;
+    }
+    const dimensions = sizeMap[size];
+    const isFullscreen = size === 'fullscreen';
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", width: isFullscreen ? undefined : dimensions.width, minHeight: isFullscreen ? undefined : dimensions.height, padding: 1, children: [_jsxs(Box, { justifyContent: "space-between", marginBottom: 1, children: [_jsx(Box, { children: title && _jsx(Text, { bold: true, color: "cyan", children: title }) }), closeable && (_jsx(Text, { color: "gray", children: "[esc] \u00D7" }))] }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "gray", children: '─'.repeat(isFullscreen ? 50 : dimensions.width - 4) }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: children }), footer && (_jsxs(_Fragment, { children: [_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: '─'.repeat(isFullscreen ? 50 : dimensions.width - 4) }) }), _jsx(Box, { marginTop: 1, children: footer })] }))] }));
+}
+export default Modal;

package/dashboard/dist/components/ui/Modal.test.d.ts

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

package/dashboard/dist/components/ui/Modal.test.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Modal } from './Modal.js';
+describe('Modal', () => {
+    describe('Rendering', () => {
+        it('renders children when open', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, children: _jsx(Text, { children: "Modal Content" }) }));
+            expect(lastFrame()).toContain('Modal Content');
+        });
+        it('does not render when closed', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: false, onClose: () => { }, children: _jsx(Text, { children: "Modal Content" }) }));
+            expect(lastFrame()).not.toContain('Modal Content');
+        });
+        it('renders title when provided', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, title: "My Modal", children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toContain('My Modal');
+        });
+        it('renders with border by default', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, children: _jsx(Text, { children: "Content" }) }));
+            const output = lastFrame() || '';
+            // Should have some border characters
+            expect(output).toMatch(/[─│╭╮╰╯]/);
+        });
+    });
+    describe('Close Behavior', () => {
+        it('calls onClose when closeable and overlay clicked', () => {
+            const onClose = vi.fn();
+            render(_jsx(Modal, { isOpen: true, onClose: onClose, closeable: true, children: _jsx(Text, { children: "Content" }) }));
+            expect(onClose).toBeDefined();
+        });
+        it('does not close when closeable=false', () => {
+            const onClose = vi.fn();
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: onClose, closeable: false, children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toContain('Content');
+        });
+        it('shows close button when closeable', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, closeable: true, children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toMatch(/×|X|✕|esc/i);
+        });
+        it('hides close button when not closeable', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, closeable: false, children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toContain('Content');
+        });
+    });
+    describe('Sizes', () => {
+        it('renders small size', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, size: "small", children: _jsx(Text, { children: "Small Modal" }) }));
+            expect(lastFrame()).toContain('Small Modal');
+        });
+        it('renders medium size (default)', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, children: _jsx(Text, { children: "Medium Modal" }) }));
+            expect(lastFrame()).toContain('Medium Modal');
+        });
+        it('renders large size', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, size: "large", children: _jsx(Text, { children: "Large Modal" }) }));
+            expect(lastFrame()).toContain('Large Modal');
+        });
+        it('renders fullscreen size', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, size: "fullscreen", children: _jsx(Text, { children: "Fullscreen Modal" }) }));
+            expect(lastFrame()).toContain('Fullscreen Modal');
+        });
+    });
+    describe('Title Display', () => {
+        it('has title visible', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, title: "Dialog", children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toContain('Dialog');
+        });
+        it('shows title for accessibility', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, title: "Accessible Title", children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toContain('Accessible Title');
+        });
+    });
+    describe('Footer', () => {
+        it('renders footer when provided', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, footer: _jsx(Text, { children: "Footer Content" }), children: _jsx(Text, { children: "Body" }) }));
+            expect(lastFrame()).toContain('Footer Content');
+        });
+        it('renders without footer when not provided', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, children: _jsx(Text, { children: "Body Only" }) }));
+            expect(lastFrame()).toContain('Body Only');
+        });
+    });
+    describe('Keyboard Hints', () => {
+        it('shows escape hint when closeable', () => {
+            const { lastFrame } = render(_jsx(Modal, { isOpen: true, onClose: () => { }, closeable: true, children: _jsx(Text, { children: "Content" }) }));
+            expect(lastFrame()).toMatch(/esc/i);
+        });
+    });
+});

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

@@ -0,0 +1,32 @@
+export type SkeletonVariant = 'text' | 'avatar' | 'card' | 'button' | 'table-row';
+export interface SkeletonProps {
+    variant?: SkeletonVariant;
+    width?: number;
+    height?: number;
+    lines?: number;
+    size?: number;
+    columns?: number;
+    rounded?: boolean;
+}
+export declare function Skeleton(props: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Skeleton {
+    var Text: ({ lines, width }: {
+        lines?: number;
+        width?: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Avatar: ({ size }: {
+        size?: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Card: ({ width, height }: {
+        width?: number;
+        height?: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Button: ({ width }: {
+        width?: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var TableRow: ({ columns, width }: {
+        columns?: number;
+        width?: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export default Skeleton;

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+// Shimmer/pulse characters for animation feel
+const SHIMMER_CHAR = '░';
+const SHIMMER_CHAR_ALT = '▒';
+function SkeletonLine({ width = 20 }) {
+    return _jsx(Text, { color: "gray", children: SHIMMER_CHAR.repeat(width) });
+}
+function SkeletonBase({ variant = 'text', width = 20, height = 1, lines = 1, size = 3, columns = 3, rounded = false, }) {
+    switch (variant) {
+        case 'text':
+            return (_jsx(Box, { flexDirection: "column", children: Array.from({ length: lines }).map((_, i) => (_jsx(SkeletonLine, { width: i === lines - 1 ? Math.floor(width * 0.7) : width }, i))) }));
+        case 'avatar':
+            // Render a circle-ish shape using characters
+            return (_jsx(Box, { flexDirection: "column", children: Array.from({ length: size }).map((_, row) => (_jsx(Box, { children: row === 0 || row === size - 1 ? (_jsxs(Text, { color: "gray", children: [' '.repeat(1), SHIMMER_CHAR.repeat(size - 2)] })) : (_jsx(Text, { color: "gray", children: SHIMMER_CHAR.repeat(size) })) }, row))) }));
+        case 'card':
+            const borderTop = rounded ? '╭' + '─'.repeat(width - 2) + '╮' : '┌' + '─'.repeat(width - 2) + '┐';
+            const borderBottom = rounded ? '╰' + '─'.repeat(width - 2) + '╯' : '└' + '─'.repeat(width - 2) + '┘';
+            return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", children: borderTop }), Array.from({ length: height - 2 }).map((_, i) => (_jsxs(Box, { children: [_jsx(Text, { color: "gray", children: "\u2502" }), _jsx(Text, { color: "gray", children: SHIMMER_CHAR.repeat(width - 2) }), _jsx(Text, { color: "gray", children: "\u2502" })] }, i))), _jsx(Text, { color: "gray", children: borderBottom })] }));
+        case 'button':
+            return (_jsx(Box, { children: _jsxs(Text, { color: "gray", children: ["[", SHIMMER_CHAR.repeat(width - 2), "]"] }) }));
+        case 'table-row':
+            return (_jsx(Box, { children: Array.from({ length: columns }).map((_, i) => (_jsx(Box, { marginRight: 2, children: _jsx(Text, { color: "gray", children: SHIMMER_CHAR.repeat(Math.floor(width / columns)) }) }, i))) }));
+        default:
+            return _jsx(SkeletonLine, { width: width });
+    }
+}
+// Main Skeleton component with sub-components
+export function Skeleton(props) {
+    return _jsx(SkeletonBase, { ...props });
+}
+// Convenience sub-components
+Skeleton.Text = function SkeletonText({ lines = 1, width = 20 }) {
+    return _jsx(SkeletonBase, { variant: "text", lines: lines, width: width });
+};
+Skeleton.Avatar = function SkeletonAvatar({ size = 3 }) {
+    return _jsx(SkeletonBase, { variant: "avatar", size: size });
+};
+Skeleton.Card = function SkeletonCard({ width = 30, height = 5 }) {
+    return _jsx(SkeletonBase, { variant: "card", width: width, height: height });
+};
+Skeleton.Button = function SkeletonButton({ width = 10 }) {
+    return _jsx(SkeletonBase, { variant: "button", width: width });
+};
+Skeleton.TableRow = function SkeletonTableRow({ columns = 3, width = 30 }) {
+    return _jsx(SkeletonBase, { variant: "table-row", columns: columns, width: width });
+};
+export default Skeleton;

package/dashboard/dist/components/ui/Skeleton.test.d.ts

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