tlc-claude-code 1.2.26 → 1.2.28

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('*');
+        });
+    });
+});

package/dashboard/dist/styles/tokens.d.ts

@@ -0,0 +1,150 @@
+/**
+ * Design Tokens - Colors, spacing, typography, and themes
+ */
+export declare const colors: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    success: {
+        50: string;
+        100: string;
+        500: string;
+        600: string;
+        700: string;
+    };
+    warning: {
+        50: string;
+        100: string;
+        500: string;
+        600: string;
+        700: string;
+    };
+    error: {
+        50: string;
+        100: string;
+        500: string;
+        600: string;
+        700: string;
+    };
+    info: {
+        50: string;
+        100: string;
+        500: string;
+        600: string;
+        700: string;
+    };
+    white: string;
+    black: string;
+};
+export declare const spacing: {
+    0: string;
+    0.5: string;
+    1: string;
+    1.5: string;
+    2: string;
+    2.5: string;
+    3: string;
+    3.5: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    12: string;
+    14: string;
+    16: string;
+};
+export declare const typography: {
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    fontWeight: {
+        normal: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+    };
+    lineHeight: {
+        none: number;
+        tight: number;
+        snug: number;
+        normal: number;
+        relaxed: number;
+        loose: number;
+    };
+    fontFamily: {
+        sans: string;
+        mono: string;
+    };
+};
+export declare const themes: {
+    light: {
+        background: string;
+        foreground: string;
+        muted: string;
+        mutedForeground: string;
+        border: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        accent: string;
+        accentForeground: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+    dark: {
+        background: string;
+        foreground: string;
+        muted: string;
+        mutedForeground: string;
+        border: string;
+        primary: string;
+        primaryForeground: string;
+        secondary: string;
+        secondaryForeground: string;
+        accent: string;
+        accentForeground: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+    };
+};
+export type Theme = keyof typeof themes;
+/**
+ * Generate CSS custom properties for a theme
+ */
+export declare function generateCSSVariables(theme: Theme): string;

package/dashboard/dist/styles/tokens.js

@@ -0,0 +1,184 @@
+/**
+ * Design Tokens - Colors, spacing, typography, and themes
+ */
+export const colors = {
+    // Primary palette
+    primary: {
+        50: '#eff6ff',
+        100: '#dbeafe',
+        200: '#bfdbfe',
+        300: '#93c5fd',
+        400: '#60a5fa',
+        500: '#3b82f6',
+        600: '#2563eb',
+        700: '#1d4ed8',
+        800: '#1e40af',
+        900: '#1e3a8a',
+    },
+    // Neutral grays
+    gray: {
+        50: '#f9fafb',
+        100: '#f3f4f6',
+        200: '#e5e7eb',
+        300: '#d1d5db',
+        400: '#9ca3af',
+        500: '#6b7280',
+        600: '#4b5563',
+        700: '#374151',
+        800: '#1f2937',
+        900: '#111827',
+    },
+    // Status colors
+    success: {
+        50: '#f0fdf4',
+        100: '#dcfce7',
+        500: '#22c55e',
+        600: '#16a34a',
+        700: '#15803d',
+    },
+    warning: {
+        50: '#fffbeb',
+        100: '#fef3c7',
+        500: '#f59e0b',
+        600: '#d97706',
+        700: '#b45309',
+    },
+    error: {
+        50: '#fef2f2',
+        100: '#fee2e2',
+        500: '#ef4444',
+        600: '#dc2626',
+        700: '#b91c1c',
+    },
+    info: {
+        50: '#eff6ff',
+        100: '#dbeafe',
+        500: '#3b82f6',
+        600: '#2563eb',
+        700: '#1d4ed8',
+    },
+    // Pure colors
+    white: '#ffffff',
+    black: '#000000',
+};
+export const spacing = {
+    0: '0',
+    0.5: '0.125rem',
+    1: '0.25rem',
+    1.5: '0.375rem',
+    2: '0.5rem',
+    2.5: '0.625rem',
+    3: '0.75rem',
+    3.5: '0.875rem',
+    4: '1rem',
+    5: '1.25rem',
+    6: '1.5rem',
+    7: '1.75rem',
+    8: '2rem',
+    9: '2.25rem',
+    10: '2.5rem',
+    12: '3rem',
+    14: '3.5rem',
+    16: '4rem',
+};
+export const typography = {
+    fontSize: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.25rem',
+    },
+    fontWeight: {
+        normal: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+    },
+    lineHeight: {
+        none: 1,
+        tight: 1.25,
+        snug: 1.375,
+        normal: 1.5,
+        relaxed: 1.625,
+        loose: 2,
+    },
+    fontFamily: {
+        sans: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    },
+};
+export const themes = {
+    light: {
+        background: colors.white,
+        foreground: colors.gray[900],
+        muted: colors.gray[100],
+        mutedForeground: colors.gray[500],
+        border: colors.gray[200],
+        primary: colors.primary[600],
+        primaryForeground: colors.white,
+        secondary: colors.gray[100],
+        secondaryForeground: colors.gray[900],
+        accent: colors.primary[50],
+        accentForeground: colors.primary[700],
+        success: colors.success[600],
+        warning: colors.warning[600],
+        error: colors.error[600],
+        info: colors.info[600],
+    },
+    dark: {
+        background: colors.gray[900],
+        foreground: colors.gray[50],
+        muted: colors.gray[800],
+        mutedForeground: colors.gray[400],
+        border: colors.gray[700],
+        primary: colors.primary[500],
+        primaryForeground: colors.white,
+        secondary: colors.gray[800],
+        secondaryForeground: colors.gray[100],
+        accent: colors.gray[800],
+        accentForeground: colors.primary[400],
+        success: colors.success[500],
+        warning: colors.warning[500],
+        error: colors.error[500],
+        info: colors.info[500],
+    },
+};
+/**
+ * Generate CSS custom properties for a theme
+ */
+export function generateCSSVariables(theme) {
+    const themeTokens = themes[theme];
+    const lines = [];
+    // Theme colors
+    for (const [key, value] of Object.entries(themeTokens)) {
+        lines.push(`  --color-${key}: ${value};`);
+    }
+    // Primary palette
+    for (const [shade, value] of Object.entries(colors.primary)) {
+        lines.push(`  --color-primary-${shade}: ${value};`);
+    }
+    // Gray palette
+    for (const [shade, value] of Object.entries(colors.gray)) {
+        lines.push(`  --color-gray-${shade}: ${value};`);
+    }
+    // Spacing
+    for (const [key, value] of Object.entries(spacing)) {
+        const normalizedKey = String(key).replace('.', '_');
+        lines.push(`  --spacing-${normalizedKey}: ${value};`);
+    }
+    // Typography
+    for (const [key, value] of Object.entries(typography.fontSize)) {
+        lines.push(`  --font-size-${key}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(typography.fontWeight)) {
+        lines.push(`  --font-weight-${key}: ${value};`);
+    }
+    for (const [key, value] of Object.entries(typography.lineHeight)) {
+        lines.push(`  --line-height-${key}: ${value};`);
+    }
+    return `:root {\n${lines.join('\n')}\n}`;
+}

package/dashboard/dist/styles/tokens.test.d.ts

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

package/dashboard/dist/styles/tokens.test.js

@@ -0,0 +1,95 @@
+import { describe, it, expect } from 'vitest';
+import { colors, spacing, typography, themes, generateCSSVariables, } from './tokens.js';
+describe('tokens', () => {
+    describe('colors', () => {
+        it('has primary color palette', () => {
+            expect(colors.primary).toBeDefined();
+            expect(colors.primary[500]).toBeDefined();
+        });
+        it('has status colors', () => {
+            expect(colors.success).toBeDefined();
+            expect(colors.warning).toBeDefined();
+            expect(colors.error).toBeDefined();
+            expect(colors.info).toBeDefined();
+        });
+        it('has neutral grays', () => {
+            expect(colors.gray).toBeDefined();
+            expect(colors.gray[50]).toBeDefined();
+            expect(colors.gray[900]).toBeDefined();
+        });
+    });
+    describe('spacing', () => {
+        it('has spacing scale', () => {
+            expect(spacing[0]).toBe('0');
+            expect(spacing[1]).toBe('0.25rem');
+            expect(spacing[4]).toBe('1rem');
+            expect(spacing[8]).toBe('2rem');
+        });
+        it('has 16 steps', () => {
+            expect(Object.keys(spacing).length).toBeGreaterThanOrEqual(13);
+        });
+    });
+    describe('typography', () => {
+        it('has font sizes', () => {
+            expect(typography.fontSize.xs).toBeDefined();
+            expect(typography.fontSize.sm).toBeDefined();
+            expect(typography.fontSize.base).toBeDefined();
+            expect(typography.fontSize.lg).toBeDefined();
+            expect(typography.fontSize.xl).toBeDefined();
+        });
+        it('has font weights', () => {
+            expect(typography.fontWeight.normal).toBe(400);
+            expect(typography.fontWeight.medium).toBe(500);
+            expect(typography.fontWeight.semibold).toBe(600);
+            expect(typography.fontWeight.bold).toBe(700);
+        });
+        it('has line heights', () => {
+            expect(typography.lineHeight.tight).toBeDefined();
+            expect(typography.lineHeight.normal).toBeDefined();
+            expect(typography.lineHeight.relaxed).toBeDefined();
+        });
+    });
+    describe('themes', () => {
+        it('has light theme', () => {
+            expect(themes.light).toBeDefined();
+            expect(themes.light.background).toBeDefined();
+            expect(themes.light.foreground).toBeDefined();
+            expect(themes.light.primary).toBeDefined();
+        });
+        it('has dark theme', () => {
+            expect(themes.dark).toBeDefined();
+            expect(themes.dark.background).toBeDefined();
+            expect(themes.dark.foreground).toBeDefined();
+            expect(themes.dark.primary).toBeDefined();
+        });
+        it('has contrasting background/foreground', () => {
+            expect(themes.light.background).not.toBe(themes.light.foreground);
+            expect(themes.dark.background).not.toBe(themes.dark.foreground);
+        });
+    });
+    describe('generateCSSVariables', () => {
+        it('generates CSS custom properties', () => {
+            const css = generateCSSVariables('light');
+            expect(css).toContain('--color-primary');
+            expect(css).toContain('--color-background');
+            expect(css).toContain('--spacing-4');
+        });
+        it('generates different values for dark theme', () => {
+            const lightCSS = generateCSSVariables('light');
+            const darkCSS = generateCSSVariables('dark');
+            expect(lightCSS).not.toBe(darkCSS);
+        });
+        it('includes spacing variables', () => {
+            const css = generateCSSVariables('light');
+            expect(css).toContain('--spacing-0');
+            expect(css).toContain('--spacing-1');
+            expect(css).toContain('--spacing-8');
+        });
+        it('includes typography variables', () => {
+            const css = generateCSSVariables('light');
+            expect(css).toContain('--font-size-sm');
+            expect(css).toContain('--font-size-base');
+            expect(css).toContain('--font-weight-bold');
+        });
+    });
+});

package/dashboard/dist/test/setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dashboard/dist/test/setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dashboard/package.json

@@ -23,11 +23,14 @@
     "react": "^18.3.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^14.3.1",
     "@types/dockerode": "^3.3.31",
     "@types/node": "^22.10.0",
     "@types/react": "^18.3.12",
     "@vitest/coverage-v8": "^4.0.18",
     "ink-testing-library": "^4.0.0",
+    "jsdom": "^27.4.0",
     "memfs": "^4.56.10",
     "tsx": "^4.19.2",
     "typescript": "^5.7.2",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tlc-claude-code",
-  "version": "1.2.26",
+  "version": "1.2.28",
   "description": "TLC - Test Led Coding for Claude Code",
   "bin": {
     "tlc": "./bin/tlc.js",