tlc-claude-code 1.2.26 → 1.2.28

package/dashboard/dist/components/ProjectList.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { ProjectCard } from './ProjectCard.js';
+export function ProjectList({ projects, onSelect, sortBy = 'name', filter = '', }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // Filter projects
+    const filteredProjects = useMemo(() => {
+        if (!filter)
+            return projects;
+        const lowerFilter = filter.toLowerCase();
+        return projects.filter(p => p.name.toLowerCase().includes(lowerFilter) ||
+            p.description?.toLowerCase().includes(lowerFilter));
+    }, [projects, filter]);
+    // Sort projects
+    const sortedProjects = useMemo(() => {
+        const sorted = [...filteredProjects];
+        switch (sortBy) {
+            case 'name':
+                sorted.sort((a, b) => a.name.localeCompare(b.name));
+                break;
+            case 'activity':
+                // Sort by lastActivity (assuming ISO date string or relative time)
+                sorted.sort((a, b) => {
+                    if (!a.lastActivity)
+                        return 1;
+                    if (!b.lastActivity)
+                        return -1;
+                    return b.lastActivity.localeCompare(a.lastActivity);
+                });
+                break;
+            case 'status':
+                // Sort by test status (failing first)
+                sorted.sort((a, b) => {
+                    const aFailing = a.tests?.failing || 0;
+                    const bFailing = b.tests?.failing || 0;
+                    return bFailing - aFailing;
+                });
+                break;
+        }
+        return sorted;
+    }, [filteredProjects, sortBy]);
+    // Handle keyboard navigation
+    useInput((input, key) => {
+        if (sortedProjects.length === 0)
+            return;
+        if (key.downArrow || input === 'j') {
+            setSelectedIndex(prev => Math.min(prev + 1, sortedProjects.length - 1));
+        }
+        else if (key.upArrow || input === 'k') {
+            setSelectedIndex(prev => Math.max(prev - 1, 0));
+        }
+        else if (key.return && onSelect) {
+            onSelect(sortedProjects[selectedIndex]);
+        }
+    });
+    // Empty state
+    if (sortedProjects.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Text, { dimColor: true, children: filter ? `No projects matching "${filter}"` : 'No projects found' }), _jsx(Text, { dimColor: true, children: filter ? 'Try a different search term' : 'Run /tlc:new-project to create one' })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: [sortedProjects.length, " project", sortedProjects.length !== 1 ? 's' : '', filter && ` matching "${filter}"`] }) }), sortedProjects.map((project, index) => (_jsx(Box, { marginBottom: 1, children: _jsx(ProjectCard, { ...project, isSelected: index === selectedIndex }) }, project.id))), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u2022 Enter select" }) })] }));
+}

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

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

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { ProjectList } from './ProjectList.js';
+const sampleProjects = [
+    {
+        id: '1',
+        name: 'Alpha Project',
+        description: 'First project',
+        tests: { passing: 10, failing: 0, total: 10 },
+        coverage: 85,
+        lastActivity: '1 hour ago',
+    },
+    {
+        id: '2',
+        name: 'Beta Project',
+        description: 'Second project',
+        tests: { passing: 8, failing: 2, total: 10 },
+        coverage: 65,
+        lastActivity: '2 hours ago',
+    },
+    {
+        id: '3',
+        name: 'Gamma Project',
+        description: 'Third project',
+        tests: { passing: 5, failing: 5, total: 10 },
+        coverage: 50,
+        lastActivity: '3 hours ago',
+    },
+];
+describe('ProjectList', () => {
+    it('renders list of projects', () => {
+        const { lastFrame } = render(_jsx(ProjectList, { projects: sampleProjects }));
+        expect(lastFrame()).toContain('Alpha Project');
+        expect(lastFrame()).toContain('Beta Project');
+        expect(lastFrame()).toContain('Gamma Project');
+    });
+    it('shows project count', () => {
+        const { lastFrame } = render(_jsx(ProjectList, { projects: sampleProjects }));
+        expect(lastFrame()).toContain('3 projects');
+    });
+    it('shows single project count correctly', () => {
+        const { lastFrame } = render(_jsx(ProjectList, { projects: [sampleProjects[0]] }));
+        expect(lastFrame()).toContain('1 project');
+    });
+    it('filters projects by name', () => {
+        const { lastFrame } = render(_jsx(ProjectList, { projects: sampleProjects, filter: "Alpha" }));
+        expect(lastFrame()).toContain('Alpha Project');
+        expect(lastFrame()).not.toContain('Beta Project');
+        expect(lastFrame()).toContain('matching "Alpha"');
+    });
+    it('filters projects by description', () => {
+        const { lastFrame } = render(_jsx(ProjectList, { projects: sampleProjects, filter: "Second" }));
+        expect(lastFrame()).toContain('Beta Project');
+        expect(lastFrame()).not.toContain('Alpha Project');
+    });
+    it('shows empty state when no projects', () => {
+        const { lastFrame } = render(_jsx(ProjectList, { projects: [] }));
+        expect(lastFrame()).toContain('No projects found');
+        expect(lastFrame()).toContain('/tlc:new-project');
+    });
+    it('shows empty state when filter matches nothing', () => {
+        const { lastFrame } = render(_jsx(ProjectList, { projects: sampleProjects, filter: "nonexistent" }));
+        expect(lastFrame()).toContain('No projects matching');
+        expect(lastFrame()).toContain('Try a different search term');
+    });
+    it('sorts by name by default', () => {
+        const { lastFrame } = render(_jsx(ProjectList, { projects: sampleProjects }));
+        const output = lastFrame() || '';
+        const alphaIndex = output.indexOf('Alpha');
+        const betaIndex = output.indexOf('Beta');
+        const gammaIndex = output.indexOf('Gamma');
+        expect(alphaIndex).toBeLessThan(betaIndex);
+        expect(betaIndex).toBeLessThan(gammaIndex);
+    });
+    it('sorts by status (failing first)', () => {
+        const { lastFrame } = render(_jsx(ProjectList, { projects: sampleProjects, sortBy: "status" }));
+        const output = lastFrame() || '';
+        // Gamma has most failures (5), should be first
+        const gammaIndex = output.indexOf('Gamma');
+        const alphaIndex = output.indexOf('Alpha');
+        expect(gammaIndex).toBeLessThan(alphaIndex);
+    });
+    it('shows navigation hint', () => {
+        const { lastFrame } = render(_jsx(ProjectList, { projects: sampleProjects }));
+        expect(lastFrame()).toContain('↑/k ↓/j navigate');
+        expect(lastFrame()).toContain('Enter select');
+    });
+    it('first project is selected by default', () => {
+        const { lastFrame } = render(_jsx(ProjectList, { projects: sampleProjects }));
+        expect(lastFrame()).toContain('▶');
+    });
+});

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

@@ -0,0 +1,32 @@
+export interface TLCConfig {
+    project?: string;
+    version?: string;
+    quality?: {
+        coverageThreshold?: number;
+        qualityScoreThreshold?: number;
+    };
+    git?: {
+        mainBranch?: string;
+    };
+    paths?: {
+        planning?: string;
+        tests?: string;
+    };
+    team?: {
+        enabled?: boolean;
+    };
+    testFrameworks?: {
+        primary?: string;
+        e2e?: string;
+    };
+}
+export interface SettingsPanelProps {
+    config: TLCConfig;
+    configPath?: string;
+    isEditing?: boolean;
+    isActive?: boolean;
+    onEdit?: () => void;
+    onSave?: (config: TLCConfig) => void;
+    onCancel?: () => void;
+}
+export declare function SettingsPanel({ config, configPath, isEditing, isActive, onEdit, onSave, onCancel, }: SettingsPanelProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/SettingsPanel.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import { Box, Text, useInput } from 'ink';
+function formatValue(value) {
+    if (value === undefined || value === null || value === '') {
+        return '—';
+    }
+    if (typeof value === 'boolean') {
+        return value ? 'enabled' : 'disabled';
+    }
+    return String(value);
+}
+function buildSections(config) {
+    return [
+        {
+            key: 'project',
+            label: 'Project',
+            items: [
+                { key: 'project', label: 'Name', value: config.project, type: 'string' },
+                { key: 'version', label: 'Version', value: config.version, type: 'string' },
+            ],
+        },
+        {
+            key: 'quality',
+            label: 'Quality',
+            items: [
+                {
+                    key: 'coverageThreshold',
+                    label: 'Coverage Threshold',
+                    value: config.quality?.coverageThreshold,
+                    type: 'number',
+                },
+                {
+                    key: 'qualityScoreThreshold',
+                    label: 'Quality Score Threshold',
+                    value: config.quality?.qualityScoreThreshold,
+                    type: 'number',
+                },
+            ],
+        },
+        {
+            key: 'git',
+            label: 'Git',
+            items: [
+                {
+                    key: 'mainBranch',
+                    label: 'Main Branch',
+                    value: config.git?.mainBranch,
+                    type: 'string',
+                },
+            ],
+        },
+        {
+            key: 'paths',
+            label: 'Paths',
+            items: [
+                {
+                    key: 'planning',
+                    label: 'Planning Directory',
+                    value: config.paths?.planning,
+                    type: 'string',
+                },
+                {
+                    key: 'tests',
+                    label: 'Tests Directory',
+                    value: config.paths?.tests,
+                    type: 'string',
+                },
+            ],
+        },
+        {
+            key: 'team',
+            label: 'Team',
+            items: [
+                {
+                    key: 'enabled',
+                    label: 'Team Mode',
+                    value: config.team?.enabled,
+                    type: 'boolean',
+                },
+            ],
+        },
+        {
+            key: 'testFrameworks',
+            label: 'Test Frameworks',
+            items: [
+                {
+                    key: 'primary',
+                    label: 'Primary Framework',
+                    value: config.testFrameworks?.primary,
+                    type: 'string',
+                },
+                {
+                    key: 'e2e',
+                    label: 'E2E Framework',
+                    value: config.testFrameworks?.e2e,
+                    type: 'string',
+                },
+            ],
+        },
+    ];
+}
+export function SettingsPanel({ config, configPath = '.tlc.json', isEditing = false, isActive = true, onEdit, onSave, onCancel, }) {
+    const [activeSection, setActiveSection] = useState(0);
+    const [activeItem, setActiveItem] = useState(0);
+    const sections = useMemo(() => buildSections(config), [config]);
+    const currentSection = sections[activeSection];
+    const totalItems = currentSection?.items.length || 0;
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // Edit mode controls
+        if (isEditing) {
+            if (key.escape && onCancel) {
+                onCancel();
+            }
+            else if ((key.return || input === 's') && onSave) {
+                onSave(config);
+            }
+            return;
+        }
+        // View mode controls
+        if (input === 'e' && onEdit) {
+            onEdit();
+        }
+        // Section navigation (Tab)
+        if (key.tab) {
+            setActiveSection((prev) => (prev + 1) % sections.length);
+            setActiveItem(0);
+        }
+        // Item navigation
+        if (key.downArrow || input === 'j') {
+            setActiveItem((prev) => Math.min(prev + 1, totalItems - 1));
+        }
+        else if (key.upArrow || input === 'k') {
+            setActiveItem((prev) => Math.max(prev - 1, 0));
+        }
+    }, { isActive });
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Settings" }), isEditing && _jsx(Text, { color: "yellow", children: " [editing]" })] }), _jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: "Config: " }), _jsx(Text, { color: "cyan", children: configPath })] }), sections.map((section, sectionIdx) => {
+                const isSectionActive = sectionIdx === activeSection;
+                return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, borderStyle: isSectionActive ? 'double' : 'single', borderColor: isSectionActive ? 'cyan' : 'gray', paddingX: 1, children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: isSectionActive ? 'cyan' : 'white', children: section.label }) }), section.items.map((item, itemIdx) => {
+                            const isItemActive = isSectionActive && itemIdx === activeItem;
+                            const displayValue = formatValue(item.value);
+                            const isNotSet = displayValue === '—';
+                            return (_jsxs(Box, { children: [_jsx(Text, { color: isItemActive ? 'cyan' : undefined, children: isItemActive ? '▶ ' : '  ' }), _jsx(Box, { width: 24, children: _jsxs(Text, { dimColor: true, children: [item.label, ":"] }) }), _jsxs(Text, { color: isNotSet
+                                            ? 'gray'
+                                            : item.type === 'boolean'
+                                                ? item.value
+                                                    ? 'green'
+                                                    : 'yellow'
+                                                : 'white', bold: isItemActive, children: [displayValue, item.type === 'number' && !isNotSet && '%'] }), isEditing && isItemActive && (_jsx(Text, { color: "yellow", children: " \u2190" }))] }, item.key));
+                        })] }, section.key));
+            }), _jsx(Box, { marginTop: 1, children: isEditing ? (_jsx(Text, { dimColor: true, children: "Enter/s save \u2022 Esc cancel \u2022 \u2191/k \u2193/j navigate" })) : (_jsx(Text, { dimColor: true, children: "e edit \u2022 Tab section \u2022 \u2191/k \u2193/j navigate" })) })] }));
+}

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

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

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

@@ -0,0 +1,196 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { SettingsPanel } from './SettingsPanel.js';
+const sampleConfig = {
+    project: 'my-app',
+    version: '1.2.0',
+    quality: {
+        coverageThreshold: 80,
+        qualityScoreThreshold: 75,
+    },
+    git: {
+        mainBranch: 'main',
+    },
+    paths: {
+        planning: '.planning',
+        tests: 'src/__tests__',
+    },
+    team: {
+        enabled: true,
+    },
+    testFrameworks: {
+        primary: 'vitest',
+        e2e: 'playwright',
+    },
+};
+describe('SettingsPanel', () => {
+    describe('Config Display', () => {
+        it('shows project name', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toContain('my-app');
+        });
+        it('shows version', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toContain('1.2.0');
+        });
+        it('shows coverage threshold', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toContain('80');
+        });
+        it('shows quality threshold', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toContain('75');
+        });
+        it('shows main branch', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toContain('main');
+        });
+        it('shows test framework', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toContain('vitest');
+        });
+    });
+    describe('Category Grouping', () => {
+        it('shows Quality section', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toMatch(/quality/i);
+        });
+        it('shows Git section', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toMatch(/git/i);
+        });
+        it('shows Paths section', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toMatch(/paths/i);
+        });
+        it('shows Team section', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toMatch(/team/i);
+        });
+        it('shows Test Frameworks section', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toMatch(/test|framework/i);
+        });
+    });
+    describe('Edit Mode', () => {
+        it('shows edit hint', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toMatch(/e|edit/i);
+        });
+        it('shows editable state when editing', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig, isEditing: true }));
+            expect(lastFrame()).toMatch(/editing|edit mode/i);
+        });
+        it('shows save hint in edit mode', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig, isEditing: true }));
+            expect(lastFrame()).toMatch(/save|enter|s/i);
+        });
+        it('shows cancel hint in edit mode', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig, isEditing: true }));
+            expect(lastFrame()).toMatch(/cancel|esc/i);
+        });
+    });
+    describe('Config File Path', () => {
+        it('shows config file path', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig, configPath: ".tlc.json" }));
+            expect(lastFrame()).toContain('.tlc.json');
+        });
+        it('shows default path when not specified', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toMatch(/\.tlc\.json|config/i);
+        });
+    });
+    describe('Missing Config', () => {
+        it('handles empty config gracefully', () => {
+            const emptyConfig = {
+                project: '',
+                version: '',
+                quality: {},
+                git: {},
+                paths: {},
+                team: {},
+                testFrameworks: {},
+            };
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: emptyConfig }));
+            expect(lastFrame()).toMatch(/settings|config/i);
+        });
+        it('shows not configured message for missing values', () => {
+            const partialConfig = {
+                project: 'test',
+                version: '1.0.0',
+                quality: {},
+                git: {},
+                paths: {},
+                team: {},
+                testFrameworks: {},
+            };
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: partialConfig }));
+            expect(lastFrame()).toMatch(/not.*set|default|—/i);
+        });
+    });
+    describe('Validation', () => {
+        it('shows validation for coverage threshold', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig, isEditing: true }));
+            // Should indicate valid range
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('Callbacks', () => {
+        it('calls onSave when save triggered', () => {
+            const onSave = vi.fn();
+            render(_jsx(SettingsPanel, { config: sampleConfig, isEditing: true, onSave: onSave }));
+            // Save happens on Enter/s key
+        });
+        it('calls onCancel when cancel triggered', () => {
+            const onCancel = vi.fn();
+            render(_jsx(SettingsPanel, { config: sampleConfig, isEditing: true, onCancel: onCancel }));
+            // Cancel happens on Esc key
+        });
+        it('calls onEdit when edit triggered', () => {
+            const onEdit = vi.fn();
+            render(_jsx(SettingsPanel, { config: sampleConfig, onEdit: onEdit }));
+            // Edit happens on 'e' key
+        });
+    });
+    describe('Navigation', () => {
+        it('shows navigation hints', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toMatch(/↑|↓|j|k|navigate/i);
+        });
+        it('shows section navigation hint', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toMatch(/tab|section/i);
+        });
+    });
+    describe('Team Settings', () => {
+        it('shows team enabled status', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toMatch(/enabled|true|yes/i);
+        });
+        it('shows team disabled status', () => {
+            const disabledTeam = {
+                ...sampleConfig,
+                team: { enabled: false },
+            };
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: disabledTeam }));
+            expect(lastFrame()).toMatch(/disabled|false|no|solo/i);
+        });
+    });
+    describe('Header', () => {
+        it('shows Settings title', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toMatch(/settings/i);
+        });
+    });
+    describe('Paths Display', () => {
+        it('shows planning path', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toContain('.planning');
+        });
+        it('shows tests path', () => {
+            const { lastFrame } = render(_jsx(SettingsPanel, { config: sampleConfig }));
+            expect(lastFrame()).toContain('src/__tests__');
+        });
+    });
+});

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

@@ -0,0 +1,16 @@
+import { ConnectionState } from './ConnectionStatus.js';
+import { Environment } from './EnvironmentBadge.js';
+export interface StatusBarProps {
+    projectName?: string;
+    version?: string;
+    branch?: string;
+    environment?: Environment;
+    connectionState?: ConnectionState;
+    currentPhase?: number;
+    totalPhases?: number;
+    testsPassing?: number;
+    testsTotal?: number;
+    testsFailing?: number;
+    width?: number;
+}
+export declare function StatusBar({ projectName, version, branch, environment, connectionState, currentPhase, totalPhases, testsPassing, testsTotal, testsFailing, width, }: StatusBarProps): import("react/jsx-runtime").JSX.Element;

package/dashboard/dist/components/StatusBar.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from 'ink';
+const connectionConfig = {
+    connected: { icon: '●', color: 'green' },
+    connecting: { icon: '◐', color: 'yellow' },
+    disconnected: { icon: '○', color: 'red' },
+};
+const envColors = {
+    local: 'green',
+    vps: 'cyan',
+    staging: 'yellow',
+    production: 'red',
+};
+export function StatusBar({ projectName, version, branch, environment, connectionState, currentPhase, totalPhases, testsPassing, testsTotal, testsFailing, width, }) {
+    const sections = [];
+    // Project name and version
+    if (projectName) {
+        sections.push(_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "white", children: projectName }), version && _jsxs(Text, { dimColor: true, children: [" v", version] })] }, "project"));
+    }
+    // Branch
+    if (branch) {
+        sections.push(_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "\u2387 " }), _jsx(Text, { color: "cyan", children: branch })] }, "branch"));
+    }
+    // Environment
+    if (environment) {
+        const color = envColors[environment];
+        sections.push(_jsx(Box, { children: _jsxs(Text, { color: color, children: [environment === 'production' ? '⚠ ' : '', environment] }) }, "env"));
+    }
+    // Phase progress
+    if (currentPhase !== undefined && totalPhases !== undefined) {
+        sections.push(_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Phase " }), _jsxs(Text, { children: [currentPhase, "/", totalPhases] })] }, "phase"));
+    }
+    // Test status
+    if (testsPassing !== undefined && testsTotal !== undefined) {
+        const hasFailing = testsFailing !== undefined && testsFailing > 0;
+        sections.push(_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Tests " }), _jsxs(Text, { color: hasFailing ? 'red' : 'green', children: [testsPassing, "/", testsTotal] }), hasFailing && (_jsxs(Text, { color: "red", children: [" (", testsFailing, " fail)"] }))] }, "tests"));
+    }
+    // Connection status
+    if (connectionState) {
+        const config = connectionConfig[connectionState];
+        sections.push(_jsx(Box, { children: _jsx(Text, { color: config.color, children: config.icon }) }, "connection"));
+    }
+    // Help hint (always shown)
+    sections.push(_jsx(Box, { children: _jsx(Text, { dimColor: true, children: "? help" }) }, "help"));
+    return (_jsx(Box, { width: width, justifyContent: "space-between", children: sections.map((section, idx) => (_jsxs(React.Fragment, { children: [section, idx < sections.length - 1 && (_jsx(Text, { dimColor: true, children: " \u2502 " }))] }, idx))) }));
+}

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

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