tlc-claude-code 1.2.27 → 1.2.29

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Header } from './Header.js';
+describe('Header', () => {
+    it('renders title', () => {
+        const { lastFrame } = render(_jsx(Header, { title: "TLC Dashboard" }));
+        expect(lastFrame()).toContain('TLC Dashboard');
+    });
+    it('renders subtitle', () => {
+        const { lastFrame } = render(_jsx(Header, { title: "TLC", subtitle: "v1.0.0" }));
+        const output = lastFrame();
+        expect(output).toContain('TLC');
+        expect(output).toContain('v1.0.0');
+    });
+    it('renders breadcrumbs', () => {
+        const { lastFrame } = render(_jsx(Header, { title: "TLC", breadcrumbs: ['Home', 'Projects', 'MyApp'] }));
+        const output = lastFrame();
+        expect(output).toContain('Home');
+        expect(output).toContain('Projects');
+        expect(output).toContain('MyApp');
+    });
+    it('renders actions', () => {
+        const { lastFrame } = render(_jsx(Header, { title: "TLC", actions: _jsx(_Fragment, { children: "[q]Quit" }) }));
+        expect(lastFrame()).toContain('Quit');
+    });
+    it('renders status indicator', () => {
+        const { lastFrame } = render(_jsx(Header, { title: "TLC", status: "online" }));
+        expect(lastFrame()).toContain('●');
+    });
+    it('renders separator between breadcrumbs', () => {
+        const { lastFrame } = render(_jsx(Header, { title: "TLC", breadcrumbs: ['A', 'B'] }));
+        expect(lastFrame()).toContain('›');
+    });
+});

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ShellProps {
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    sidebar?: React.ReactNode;
+    sidebarWidth?: number;
+    showSidebar?: boolean;
+    children: React.ReactNode;
+}
+export declare function Shell({ header, footer, sidebar, sidebarWidth, showSidebar, children, }: ShellProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function Shell({ header, footer, sidebar, sidebarWidth = 30, showSidebar = true, children, }) {
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [header && (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: typeof header === 'string' ? (_jsx(Text, { bold: true, color: "cyan", children: header })) : (header) })), _jsxs(Box, { flexGrow: 1, flexDirection: "row", children: [sidebar && showSidebar && (_jsx(Box, { width: sidebarWidth, borderStyle: "single", borderColor: "gray", flexDirection: "column", paddingX: 1, children: typeof sidebar === 'string' ? _jsx(Text, { children: sidebar }) : sidebar })), _jsx(Box, { flexGrow: 1, flexDirection: "column", paddingX: 1, children: typeof children === 'string' ? _jsx(Text, { children: children }) : children })] }), footer && (_jsx(Box, { borderStyle: "single", borderColor: "gray", paddingX: 1, children: typeof footer === 'string' ? (_jsx(Text, { dimColor: true, children: footer })) : (footer) }))] }));
+}

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

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

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Text } from 'ink';
+import { Shell } from './Shell.js';
+describe('Shell', () => {
+    it('renders children', () => {
+        const { lastFrame } = render(_jsx(Shell, { children: _jsx(Text, { children: "Content here" }) }));
+        expect(lastFrame()).toContain('Content here');
+    });
+    it('renders header', () => {
+        const { lastFrame } = render(_jsx(Shell, { header: "TLC Dashboard", children: _jsx(Text, { children: "Content" }) }));
+        expect(lastFrame()).toContain('TLC Dashboard');
+    });
+    it('renders footer', () => {
+        const { lastFrame } = render(_jsx(Shell, { footer: "Press q to quit", children: _jsx(Text, { children: "Content" }) }));
+        expect(lastFrame()).toContain('Press q to quit');
+    });
+    it('renders sidebar when provided', () => {
+        const { lastFrame } = render(_jsx(Shell, { sidebar: _jsx(Text, { children: "Sidebar" }), children: _jsx(Text, { children: "Main content" }) }));
+        const output = lastFrame();
+        expect(output).toContain('Sidebar');
+        expect(output).toContain('Main content');
+    });
+    it('respects sidebarWidth', () => {
+        const { lastFrame } = render(_jsx(Shell, { sidebar: _jsx(Text, { children: "Nav" }), sidebarWidth: 20, children: _jsx(Text, { children: "Main" }) }));
+        expect(lastFrame()).toContain('Nav');
+        expect(lastFrame()).toContain('Main');
+    });
+    it('can hide sidebar', () => {
+        const { lastFrame } = render(_jsx(Shell, { sidebar: _jsx(Text, { children: "Hidden" }), showSidebar: false, children: _jsx(Text, { children: "Only main" }) }));
+        expect(lastFrame()).toContain('Only main');
+    });
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface SidebarProps {
+    title?: string;
+    children: React.ReactNode;
+}
+export declare function Sidebar({ title, children }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export interface SidebarItemProps {
+    label: string;
+    icon?: string;
+    active?: boolean;
+    badge?: string;
+    shortcut?: string;
+}
+export declare function SidebarItem({ label, icon, active, badge, shortcut, }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function Sidebar({ title, children }) {
+    return (_jsxs(Box, { flexDirection: "column", paddingY: 1, children: [title && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "cyan", children: title }) })), children] }));
+}
+export function SidebarItem({ label, icon, active = false, badge, shortcut, }) {
+    return (_jsxs(Box, { children: [shortcut && (_jsxs(Text, { color: "gray", children: ["[", shortcut, "] "] })), icon && _jsxs(Text, { children: [icon, " "] }), _jsx(Text, { bold: active, color: active ? 'cyan' : 'white', inverse: active, children: label }), badge && (_jsxs(Text, { color: "yellow", children: [" (", badge, ")"] }))] }));
+}

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

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

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Sidebar, SidebarItem } from './Sidebar.js';
+describe('Sidebar', () => {
+    it('renders children', () => {
+        const { lastFrame } = render(_jsx(Sidebar, { children: _jsx(SidebarItem, { label: "Home" }) }));
+        expect(lastFrame()).toContain('Home');
+    });
+    it('renders title when provided', () => {
+        const { lastFrame } = render(_jsx(Sidebar, { title: "Navigation", children: _jsx(SidebarItem, { label: "Home" }) }));
+        expect(lastFrame()).toContain('Navigation');
+    });
+});
+describe('SidebarItem', () => {
+    it('renders label', () => {
+        const { lastFrame } = render(_jsx(SidebarItem, { label: "Dashboard" }));
+        expect(lastFrame()).toContain('Dashboard');
+    });
+    it('renders with icon', () => {
+        const { lastFrame } = render(_jsx(SidebarItem, { label: "Home", icon: "\uD83C\uDFE0" }));
+        const output = lastFrame();
+        expect(output).toContain('🏠');
+        expect(output).toContain('Home');
+    });
+    it('shows active state', () => {
+        const { lastFrame } = render(_jsx(SidebarItem, { label: "Active", active: true }));
+        expect(lastFrame()).toContain('Active');
+    });
+    it('shows badge when provided', () => {
+        const { lastFrame } = render(_jsx(SidebarItem, { label: "Issues", badge: "5" }));
+        const output = lastFrame();
+        expect(output).toContain('Issues');
+        expect(output).toContain('5');
+    });
+    it('shows keyboard shortcut', () => {
+        const { lastFrame } = render(_jsx(SidebarItem, { label: "Chat", shortcut: "1" }));
+        expect(lastFrame()).toContain('1');
+    });
+});

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface BadgeProps {
+    variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    size?: 'sm' | 'md';
+    showDot?: boolean;
+    showBrackets?: boolean;
+    children: React.ReactNode;
+}
+export declare function Badge({ variant, size, showDot, showBrackets, children, }: BadgeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Box } from 'ink';
+const variantColors = {
+    success: 'green',
+    warning: 'yellow',
+    error: 'red',
+    info: 'blue',
+    neutral: 'gray',
+};
+export function Badge({ variant = 'neutral', size = 'md', showDot = false, showBrackets = true, children, }) {
+    const color = variantColors[variant];
+    return (_jsxs(Box, { children: [showBrackets && _jsx(Text, { color: color, children: "[" }), showDot && _jsx(Text, { color: color, children: "\u25CF " }), _jsx(Text, { color: color, bold: size === 'md', children: children }), showBrackets && _jsx(Text, { color: color, children: "]" })] }));
+}

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

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

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Badge } from './Badge.js';
+describe('Badge', () => {
+    it('renders badge text', () => {
+        const { lastFrame } = render(_jsx(Badge, { children: "Active" }));
+        expect(lastFrame()).toContain('Active');
+    });
+    describe('variants', () => {
+        it('renders success variant', () => {
+            const { lastFrame } = render(_jsx(Badge, { variant: "success", children: "Passed" }));
+            expect(lastFrame()).toContain('Passed');
+        });
+        it('renders warning variant', () => {
+            const { lastFrame } = render(_jsx(Badge, { variant: "warning", children: "Pending" }));
+            expect(lastFrame()).toContain('Pending');
+        });
+        it('renders error variant', () => {
+            const { lastFrame } = render(_jsx(Badge, { variant: "error", children: "Failed" }));
+            expect(lastFrame()).toContain('Failed');
+        });
+        it('renders info variant', () => {
+            const { lastFrame } = render(_jsx(Badge, { variant: "info", children: "Note" }));
+            expect(lastFrame()).toContain('Note');
+        });
+        it('renders neutral variant', () => {
+            const { lastFrame } = render(_jsx(Badge, { variant: "neutral", children: "Draft" }));
+            expect(lastFrame()).toContain('Draft');
+        });
+    });
+    describe('sizes', () => {
+        it('renders small size', () => {
+            const { lastFrame } = render(_jsx(Badge, { size: "sm", children: "Small" }));
+            expect(lastFrame()).toContain('Small');
+        });
+        it('renders medium size (default)', () => {
+            const { lastFrame } = render(_jsx(Badge, { children: "Medium" }));
+            expect(lastFrame()).toContain('Medium');
+        });
+    });
+    describe('dot indicator', () => {
+        it('shows dot when enabled', () => {
+            const { lastFrame } = render(_jsx(Badge, { showDot: true, children: "Active" }));
+            const output = lastFrame();
+            expect(output).toContain('Active');
+            expect(output).toContain('●');
+        });
+        it('hides dot by default', () => {
+            const { lastFrame } = render(_jsx(Badge, { children: "Status" }));
+            const output = lastFrame();
+            expect(output).toContain('Status');
+            expect(output).not.toContain('●');
+        });
+    });
+    describe('brackets', () => {
+        it('shows brackets by default', () => {
+            const { lastFrame } = render(_jsx(Badge, { children: "Test" }));
+            const output = lastFrame();
+            expect(output).toContain('[');
+            expect(output).toContain(']');
+        });
+        it('can hide brackets', () => {
+            const { lastFrame } = render(_jsx(Badge, { showBrackets: false, children: "Test" }));
+            const output = lastFrame();
+            expect(output).toContain('Test');
+        });
+    });
+});

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface ButtonProps {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    loading?: boolean;
+    disabled?: boolean;
+    leftIcon?: string;
+    rightIcon?: string;
+    showBrackets?: boolean;
+    isFocused?: boolean;
+    children: React.ReactNode;
+}
+export declare function Button({ variant, loading, disabled, leftIcon, rightIcon, showBrackets, isFocused, children, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Box } from 'ink';
+import Spinner from 'ink-spinner';
+const variantColors = {
+    primary: 'blue',
+    secondary: 'white',
+    ghost: 'gray',
+    danger: 'red',
+};
+export function Button({ variant = 'primary', loading = false, disabled = false, leftIcon, rightIcon, showBrackets = true, isFocused = false, children, }) {
+    const color = variantColors[variant];
+    const dimmed = disabled || loading;
+    return (_jsxs(Box, { children: [showBrackets && (_jsx(Text, { color: isFocused ? 'cyan' : 'gray', dimColor: dimmed, children: "[" })), loading && (_jsxs(Text, { color: color, children: [_jsx(Spinner, { type: "dots" }), ' '] })), leftIcon && !loading && (_jsxs(Text, { color: color, dimColor: dimmed, children: [leftIcon, ' '] })), _jsx(Text, { color: color, bold: variant === 'primary' || isFocused, dimColor: dimmed, children: children }), rightIcon && !loading && (_jsxs(Text, { color: color, dimColor: dimmed, children: [' ', rightIcon] })), showBrackets && (_jsx(Text, { color: isFocused ? 'cyan' : 'gray', dimColor: dimmed, children: "]" }))] }));
+}

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

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

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Button } from './Button.js';
+describe('Button', () => {
+    it('renders button text', () => {
+        const { lastFrame } = render(_jsx(Button, { children: "Click me" }));
+        expect(lastFrame()).toContain('Click me');
+    });
+    describe('variants', () => {
+        it('renders primary variant with highlight', () => {
+            const { lastFrame } = render(_jsx(Button, { variant: "primary", children: "Primary" }));
+            expect(lastFrame()).toContain('Primary');
+        });
+        it('renders secondary variant', () => {
+            const { lastFrame } = render(_jsx(Button, { variant: "secondary", children: "Secondary" }));
+            expect(lastFrame()).toContain('Secondary');
+        });
+        it('renders ghost variant', () => {
+            const { lastFrame } = render(_jsx(Button, { variant: "ghost", children: "Ghost" }));
+            expect(lastFrame()).toContain('Ghost');
+        });
+        it('renders danger variant', () => {
+            const { lastFrame } = render(_jsx(Button, { variant: "danger", children: "Danger" }));
+            expect(lastFrame()).toContain('Danger');
+        });
+    });
+    describe('states', () => {
+        it('shows disabled state with dimmed text', () => {
+            const { lastFrame } = render(_jsx(Button, { disabled: true, children: "Disabled" }));
+            expect(lastFrame()).toContain('Disabled');
+        });
+        it('shows loading state with spinner', () => {
+            const { lastFrame } = render(_jsx(Button, { loading: true, children: "Loading" }));
+            const output = lastFrame();
+            expect(output).toContain('Loading');
+            // Should show spinner character
+            expect(output).toMatch(/[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏◐◓◑◒]/);
+        });
+    });
+    describe('icons', () => {
+        it('renders with left icon', () => {
+            const { lastFrame } = render(_jsx(Button, { leftIcon: "+", children: "Add" }));
+            const output = lastFrame();
+            expect(output).toContain('+');
+            expect(output).toContain('Add');
+        });
+        it('renders with right icon', () => {
+            const { lastFrame } = render(_jsx(Button, { rightIcon: "\u2192", children: "Next" }));
+            const output = lastFrame();
+            expect(output).toContain('Next');
+            expect(output).toContain('→');
+        });
+    });
+    describe('brackets', () => {
+        it('renders with brackets by default', () => {
+            const { lastFrame } = render(_jsx(Button, { children: "OK" }));
+            const output = lastFrame();
+            expect(output).toContain('[');
+            expect(output).toContain(']');
+        });
+        it('can hide brackets', () => {
+            const { lastFrame } = render(_jsx(Button, { showBrackets: false, children: "OK" }));
+            const output = lastFrame();
+            expect(output).toContain('OK');
+        });
+    });
+    describe('focus', () => {
+        it('shows focus indicator when focused', () => {
+            const { lastFrame } = render(_jsx(Button, { isFocused: true, children: "Focused" }));
+            expect(lastFrame()).toContain('Focused');
+        });
+        it('shows different style when not focused', () => {
+            const { lastFrame: focused } = render(_jsx(Button, { isFocused: true, children: "Test" }));
+            const { lastFrame: unfocused } = render(_jsx(Button, { isFocused: false, children: "Test" }));
+            // Both should render the text
+            expect(focused()).toContain('Test');
+            expect(unfocused()).toContain('Test');
+        });
+    });
+});

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export interface CardProps {
+    variant?: 'default' | 'elevated' | 'outlined';
+    title?: string;
+    padding?: number;
+    width?: number | string;
+    children: React.ReactNode;
+}
+export declare function Card({ variant, title, padding, width, children, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export interface CardHeaderProps {
+    children: React.ReactNode;
+}
+export declare function CardHeader({ children }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface CardBodyProps {
+    children: React.ReactNode;
+}
+export declare function CardBody({ children }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
+export interface CardFooterProps {
+    children: React.ReactNode;
+}
+export declare function CardFooter({ children }: CardFooterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+const borderStyles = {
+    default: 'single',
+    elevated: 'double',
+    outlined: 'round',
+};
+export function Card({ variant = 'default', title, padding = 1, width, children, }) {
+    const content = typeof children === 'string' ? _jsx(Text, { children: children }) : children;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: borderStyles[variant], borderColor: "gray", paddingX: padding, paddingY: padding > 0 ? 0 : 0, width: width, children: [title && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "white", children: title }) })), content] }));
+}
+export function CardHeader({ children }) {
+    return (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: "white", children: children }) }));
+}
+export function CardBody({ children }) {
+    return (_jsx(Box, { flexDirection: "column", children: typeof children === 'string' ? _jsx(Text, { children: children }) : children }));
+}
+export function CardFooter({ children }) {
+    return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: children }) }));
+}

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

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

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Card, CardHeader, CardBody, CardFooter } from './Card.js';
+describe('Card', () => {
+    it('renders children', () => {
+        const { lastFrame } = render(_jsx(Card, { children: "Content" }));
+        expect(lastFrame()).toContain('Content');
+    });
+    it('renders with border by default', () => {
+        const { lastFrame } = render(_jsx(Card, { children: "Test" }));
+        const output = lastFrame() ?? '';
+        // Should contain box-drawing characters (various unicode box drawing)
+        expect(output).toContain('Test');
+        // Ink uses various box characters depending on style
+        expect(output.length).toBeGreaterThan('Test'.length);
+    });
+    describe('variants', () => {
+        it('renders default variant', () => {
+            const { lastFrame } = render(_jsx(Card, { variant: "default", children: "Default" }));
+            expect(lastFrame()).toContain('Default');
+        });
+        it('renders elevated variant with double border', () => {
+            const { lastFrame } = render(_jsx(Card, { variant: "elevated", children: "Elevated" }));
+            const output = lastFrame();
+            expect(output).toContain('Elevated');
+        });
+        it('renders outlined variant', () => {
+            const { lastFrame } = render(_jsx(Card, { variant: "outlined", children: "Outlined" }));
+            expect(lastFrame()).toContain('Outlined');
+        });
+    });
+    describe('title', () => {
+        it('renders title when provided', () => {
+            const { lastFrame } = render(_jsx(Card, { title: "My Card", children: "Body" }));
+            const output = lastFrame();
+            expect(output).toContain('My Card');
+            expect(output).toContain('Body');
+        });
+    });
+    describe('padding', () => {
+        it('respects padding prop', () => {
+            const { lastFrame } = render(_jsx(Card, { padding: 2, children: "Padded" }));
+            expect(lastFrame()).toContain('Padded');
+        });
+    });
+});
+describe('CardHeader', () => {
+    it('renders header content', () => {
+        const { lastFrame } = render(_jsx(CardHeader, { children: "Header" }));
+        expect(lastFrame()).toContain('Header');
+    });
+    it('renders with bold style', () => {
+        const { lastFrame } = render(_jsx(CardHeader, { children: "Title" }));
+        expect(lastFrame()).toContain('Title');
+    });
+});
+describe('CardBody', () => {
+    it('renders body content', () => {
+        const { lastFrame } = render(_jsx(CardBody, { children: "Body content" }));
+        expect(lastFrame()).toContain('Body content');
+    });
+});
+describe('CardFooter', () => {
+    it('renders footer content', () => {
+        const { lastFrame } = render(_jsx(CardFooter, { children: "Footer" }));
+        expect(lastFrame()).toContain('Footer');
+    });
+    it('renders with dimmed style', () => {
+        const { lastFrame } = render(_jsx(CardFooter, { children: "Actions" }));
+        expect(lastFrame()).toContain('Actions');
+    });
+});
+describe('Card composition', () => {
+    it('renders header, body, and footer together', () => {
+        const { lastFrame } = render(_jsxs(Card, { children: [_jsx(CardHeader, { children: "Title" }), _jsx(CardBody, { children: "Content here" }), _jsx(CardFooter, { children: "Actions" })] }));
+        const output = lastFrame();
+        expect(output).toContain('Title');
+        expect(output).toContain('Content here');
+        expect(output).toContain('Actions');
+    });
+});

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

@@ -0,0 +1,13 @@
+export interface InputProps {
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    helperText?: string;
+    error?: string;
+    type?: 'text' | 'password';
+    focus?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+}
+export declare function Input({ value, placeholder, label, helperText, error, type, focus, disabled, onChange, onSubmit, }: InputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text, Box } from 'ink';
+import TextInput from 'ink-text-input';
+export function Input({ value = '', placeholder = '', label, helperText, error, type = 'text', focus = false, disabled = false, onChange = () => { }, onSubmit, }) {
+    const displayValue = type === 'password' ? '*'.repeat(value.length) : value;
+    const borderColor = error ? 'red' : focus ? 'cyan' : 'gray';
+    return (_jsxs(Box, { flexDirection: "column", children: [label && (_jsx(Box, { marginBottom: 0, children: _jsx(Text, { color: "white", bold: true, children: label }) })), _jsxs(Box, { children: [_jsx(Text, { color: borderColor, children: "[" }), disabled ? (_jsx(Text, { dimColor: true, children: displayValue || placeholder })) : focus ? (_jsx(TextInput, { value: value, placeholder: placeholder, onChange: onChange, onSubmit: onSubmit, mask: type === 'password' ? '*' : undefined })) : (_jsx(Text, { color: value ? 'white' : 'gray', children: displayValue || placeholder })), _jsx(Text, { color: borderColor, children: "]" })] }), error && (_jsx(Box, { children: _jsxs(Text, { color: "red", children: ["\u2717 ", error] }) })), helperText && !error && (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: helperText }) }))] }));
+}

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

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

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { Input } from './Input.js';
+describe('Input', () => {
+    it('renders with placeholder', () => {
+        const { lastFrame } = render(_jsx(Input, { placeholder: "Enter text..." }));
+        expect(lastFrame()).toContain('Enter text...');
+    });
+    it('renders with value', () => {
+        const { lastFrame } = render(_jsx(Input, { value: "Hello", onChange: () => { } }));
+        expect(lastFrame()).toContain('Hello');
+    });
+    describe('label', () => {
+        it('renders label when provided', () => {
+            const { lastFrame } = render(_jsx(Input, { label: "Username" }));
+            expect(lastFrame()).toContain('Username');
+        });
+    });
+    describe('helper text', () => {
+        it('renders helper text when provided', () => {
+            const { lastFrame } = render(_jsx(Input, { helperText: "Must be unique" }));
+            expect(lastFrame()).toContain('Must be unique');
+        });
+    });
+    describe('error state', () => {
+        it('shows error message when provided', () => {
+            const { lastFrame } = render(_jsx(Input, { error: "Invalid input" }));
+            expect(lastFrame()).toContain('Invalid input');
+        });
+        it('shows error indicator', () => {
+            const { lastFrame } = render(_jsx(Input, { error: "Error" }));
+            expect(lastFrame()).toContain('✗');
+        });
+    });
+    describe('focus', () => {
+        it('shows focus indicator when focused', () => {
+            const { lastFrame } = render(_jsx(Input, { focus: true, placeholder: "Focused" }));
+            const output = lastFrame();
+            expect(output).toContain('Focused');
+        });
+        it('shows different style when not focused', () => {
+            const { lastFrame: focused } = render(_jsx(Input, { focus: true, placeholder: "Test" }));
+            const { lastFrame: unfocused } = render(_jsx(Input, { focus: false, placeholder: "Test" }));
+            // Both should render
+            expect(focused()).toBeTruthy();
+            expect(unfocused()).toBeTruthy();
+        });
+    });
+    describe('disabled', () => {
+        it('shows disabled state', () => {
+            const { lastFrame } = render(_jsx(Input, { disabled: true, placeholder: "Disabled" }));
+            expect(lastFrame()).toContain('Disabled');
+        });
+    });
+    describe('types', () => {
+        it('renders text type by default', () => {
+            const { lastFrame } = render(_jsx(Input, { value: "visible", onChange: () => { } }));
+            expect(lastFrame()).toContain('visible');
+        });
+        it('masks password type', () => {
+            const { lastFrame } = render(_jsx(Input, { type: "password", value: "secret", onChange: () => { } }));
+            const output = lastFrame();
+            expect(output).not.toContain('secret');
+            expect(output).toContain('*');
+        });
+    });
+});