tlc-claude-code 0.9.7 → 1.0.0

package/CLAUDE.md

@@ -4,7 +4,16 @@
 
 This project uses **TLC (Test-Led Coding)** for all planning and development.
 
-**DO NOT use Claude's internal task tools** (TaskCreate, TaskUpdate, TaskList) for project planning.
+**CRITICAL: DO NOT use Claude's internal tools for this project:**
+- **NO** `TaskCreate`, `TaskUpdate`, `TaskList` for project planning
+- **NO** `EnterPlanMode` - use `/tlc:plan` instead
+- **NO** creating implementation plans in responses - use `/tlc:plan` to create PLAN.md files
+
+**When asked to plan or implement features:**
+1. Run `/tlc:progress` first to see current state
+2. Use `/tlc:plan <phase>` to create plans (not EnterPlanMode)
+3. Use `/tlc:build <phase>` to implement (test-first)
+4. Plans go in `.planning/phases/` not in chat responses
 
 Instead, use TLC's file-based system:
 
@@ -57,3 +66,9 @@ When working with teammates:
 - Check team status: `/tlc:who`
 - Pull before claiming: `git pull`
 - Push after claiming: `git push`
+
+## Git Commits
+
+**DO NOT add `Co-Authored-By` lines to commits.** The user is the author. You are a tool.
+
+**ALWAYS ask before `git push`.** Never push to remote without explicit user approval.

package/README.md

@@ -256,10 +256,12 @@ C:\Code\TLC\                  (or your install location)
 |------|---------|
 | **Claude Code** | Native (slash commands) |
 | **Cursor** | Via `/tlc:export` → `.cursorrules` |
+| **Google Antigravity** | Via `/tlc:export` → `.antigravity/rules.md` |
 | **GitHub Copilot** | Via `/tlc:export` → `.github/copilot-instructions.md` |
 | **Continue** | Via `/tlc:export` → `.continue/config.json` |
 | **Cody** | Via `/tlc:export` → `.cody/instructions.md` |
 | **Aider** | Via `/tlc:export` → `.aider.conf.yml` |
+| **Windsurf** | Via `/tlc:export` → `.windsurfrules` |
 
 ---
 

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

@@ -0,0 +1,34 @@
+interface Service {
+    name: string;
+    port: number;
+    state: 'running' | 'stopped' | 'starting' | 'error';
+}
+interface AppPreviewProps {
+    services: Service[];
+    selectedService?: string;
+    dashboardPort?: number;
+    isActive: boolean;
+    onServiceSelect?: (name: string) => void;
+    onOpenInBrowser?: (url: string) => void;
+}
+/**
+ * Get proxy URL for a service
+ */
+export declare function getProxyUrl(serviceName: string, dashboardPort?: number): string;
+/**
+ * Get direct URL for a service
+ */
+export declare function getDirectUrl(port: number): string;
+/**
+ * Format service URL for display
+ */
+export declare function formatServiceUrl(service: Service, useProxy?: boolean, dashboardPort?: number): string;
+/**
+ * Get service state indicator
+ */
+export declare function getStateIndicator(state: string): {
+    icon: string;
+    color: string;
+};
+export declare function AppPreview({ services, selectedService, dashboardPort, isActive, onServiceSelect, onOpenInBrowser, }: AppPreviewProps): import("react/jsx-runtime").JSX.Element;
+export default AppPreview;

package/dashboard/dist/components/AppPreview.js

@@ -0,0 +1,87 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+/**
+ * Get proxy URL for a service
+ */
+export function getProxyUrl(serviceName, dashboardPort = 3147) {
+    return `http://localhost:${dashboardPort}/proxy/${serviceName}`;
+}
+/**
+ * Get direct URL for a service
+ */
+export function getDirectUrl(port) {
+    return `http://localhost:${port}`;
+}
+/**
+ * Format service URL for display
+ */
+export function formatServiceUrl(service, useProxy = true, dashboardPort = 3147) {
+    if (useProxy) {
+        return getProxyUrl(service.name, dashboardPort);
+    }
+    return getDirectUrl(service.port);
+}
+/**
+ * Get service state indicator
+ */
+export function getStateIndicator(state) {
+    switch (state) {
+        case 'running':
+            return { icon: '●', color: 'green' };
+        case 'starting':
+            return { icon: '◐', color: 'yellow' };
+        case 'stopped':
+            return { icon: '○', color: 'gray' };
+        case 'error':
+            return { icon: '✗', color: 'red' };
+        default:
+            return { icon: '?', color: 'gray' };
+    }
+}
+function ServiceSelector({ services, selected, onSelect, }) {
+    return (_jsx(Box, { flexDirection: "row", gap: 2, children: services.map((service, idx) => {
+            const isSelected = selected === service.name;
+            const { icon, color } = getStateIndicator(service.state);
+            return (_jsx(Box, { children: _jsxs(Text, { color: color, bold: isSelected, underline: isSelected, children: ["[", idx + 1, "] ", icon, " ", service.name] }) }, service.name));
+        }) }));
+}
+function PreviewInfo({ service, dashboardPort, }) {
+    const proxyUrl = getProxyUrl(service.name, dashboardPort);
+    const directUrl = getDirectUrl(service.port);
+    const { icon, color } = getStateIndicator(service.state);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: service.name }), _jsxs(Text, { color: color, children: [" ", icon, " ", service.state] })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Proxy URL:  " }), _jsx(Text, { color: "cyan", children: proxyUrl })] }), _jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "Direct URL: " }), _jsx(Text, { color: "cyan", children: directUrl })] })] }), service.state === 'running' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "green", children: "Ready for preview" }) })), service.state === 'stopped' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "Service not running" }) })), service.state === 'starting' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: "Starting..." }) })), service.state === 'error' && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "red", children: "Service error - check logs" }) }))] }));
+}
+export function AppPreview({ services, selectedService, dashboardPort = 3147, isActive, onServiceSelect, onOpenInBrowser, }) {
+    const [useProxy, setUseProxy] = useState(true);
+    const runningServices = services.filter(s => s.state === 'running' || s.state === 'starting');
+    const selected = selectedService
+        ? services.find(s => s.name === selectedService)
+        : runningServices[0];
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // Number keys to select service
+        const num = parseInt(input, 10);
+        if (num >= 1 && num <= services.length) {
+            onServiceSelect?.(services[num - 1].name);
+        }
+        // Toggle proxy mode
+        if (input === 'p') {
+            setUseProxy(!useProxy);
+        }
+        // Open in browser
+        if (input === 'o' && selected && selected.state === 'running') {
+            const url = formatServiceUrl(selected, useProxy, dashboardPort);
+            onOpenInBrowser?.(url);
+        }
+    }, { isActive });
+    if (services.length === 0) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "App Preview" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "No services configured" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Run /tlc:start to begin" }) })] }));
+    }
+    if (runningServices.length === 0) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "App Preview" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: "No services running" }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: [services.length, " service", services.length !== 1 ? 's' : '', " configured but stopped"] }) }), _jsx(Box, { marginTop: 1, children: _jsx(ServiceSelector, { services: services, selected: selected?.name, onSelect: onServiceSelect || (() => { }) }) })] }));
+    }
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "App Preview " }), _jsxs(Text, { dimColor: true, children: ["(", runningServices.length, "/", services.length, " running)"] })] }), _jsx(ServiceSelector, { services: services, selected: selected?.name, onSelect: onServiceSelect || (() => { }) }), selected && (_jsx(PreviewInfo, { service: selected, dashboardPort: dashboardPort })), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Mode: " }), _jsx(Text, { color: useProxy ? 'green' : 'yellow', children: useProxy ? 'Proxy' : 'Direct' })] }), isActive && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["[1-", services.length, "] Select  [p] Toggle proxy  [o] Open browser"] }) }))] }));
+}
+export default AppPreview;

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

@@ -0,0 +1,151 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { AppPreview, getProxyUrl, getDirectUrl, formatServiceUrl, getStateIndicator, } from './AppPreview.js';
+describe('AppPreview', () => {
+    describe('getProxyUrl', () => {
+        it('generates proxy URL with default port', () => {
+            const url = getProxyUrl('api');
+            expect(url).toBe('http://localhost:3147/proxy/api');
+        });
+        it('uses custom dashboard port', () => {
+            const url = getProxyUrl('web', 8080);
+            expect(url).toBe('http://localhost:8080/proxy/web');
+        });
+    });
+    describe('getDirectUrl', () => {
+        it('generates direct URL', () => {
+            const url = getDirectUrl(3000);
+            expect(url).toBe('http://localhost:3000');
+        });
+    });
+    describe('formatServiceUrl', () => {
+        const service = { name: 'api', port: 3001, state: 'running' };
+        it('returns proxy URL by default', () => {
+            const url = formatServiceUrl(service);
+            expect(url).toContain('/proxy/api');
+        });
+        it('returns direct URL when proxy disabled', () => {
+            const url = formatServiceUrl(service, false);
+            expect(url).toBe('http://localhost:3001');
+        });
+    });
+    describe('getStateIndicator', () => {
+        it('returns green for running', () => {
+            const { icon, color } = getStateIndicator('running');
+            expect(color).toBe('green');
+            expect(icon).toBe('●');
+        });
+        it('returns yellow for starting', () => {
+            const { icon, color } = getStateIndicator('starting');
+            expect(color).toBe('yellow');
+        });
+        it('returns gray for stopped', () => {
+            const { icon, color } = getStateIndicator('stopped');
+            expect(color).toBe('gray');
+        });
+        it('returns red for error', () => {
+            const { icon, color } = getStateIndicator('error');
+            expect(color).toBe('red');
+        });
+    });
+    describe('component rendering', () => {
+        it('renders empty state when no services', () => {
+            const { lastFrame } = render(_jsx(AppPreview, { services: [], isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('No services configured');
+        });
+        it('shows message when no services running', () => {
+            const services = [
+                { name: 'api', port: 3001, state: 'stopped' },
+            ];
+            const { lastFrame } = render(_jsx(AppPreview, { services: services, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('No services running');
+        });
+        it('renders running services', () => {
+            const services = [
+                { name: 'api', port: 3001, state: 'running' },
+                { name: 'web', port: 3000, state: 'running' },
+            ];
+            const { lastFrame } = render(_jsx(AppPreview, { services: services, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('api');
+            expect(output).toContain('web');
+            expect(output).toContain('2/2 running');
+        });
+        it('shows proxy and direct URLs', () => {
+            const services = [
+                { name: 'api', port: 3001, state: 'running' },
+            ];
+            const { lastFrame } = render(_jsx(AppPreview, { services: services, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Proxy URL');
+            expect(output).toContain('/proxy/api');
+            expect(output).toContain('Direct URL');
+            expect(output).toContain('3001');
+        });
+        it('shows selected service info', () => {
+            const services = [
+                { name: 'api', port: 3001, state: 'running' },
+                { name: 'web', port: 3000, state: 'stopped' },
+            ];
+            const { lastFrame } = render(_jsx(AppPreview, { services: services, selectedService: "api", isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Ready for preview');
+        });
+        it('shows starting state', () => {
+            const services = [
+                { name: 'api', port: 3001, state: 'starting' },
+            ];
+            const { lastFrame } = render(_jsx(AppPreview, { services: services, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Starting');
+        });
+        it('shows error state indicator', () => {
+            const services = [
+                { name: 'api', port: 3001, state: 'error' },
+            ];
+            const { lastFrame } = render(_jsx(AppPreview, { services: services, isActive: false }));
+            const output = lastFrame();
+            // Error services show the error indicator (✗) in the selector
+            expect(output).toContain('✗');
+            expect(output).toContain('api');
+        });
+        it('shows controls when active', () => {
+            const services = [
+                { name: 'api', port: 3001, state: 'running' },
+            ];
+            const { lastFrame } = render(_jsx(AppPreview, { services: services, isActive: true }));
+            const output = lastFrame();
+            expect(output).toContain('Select');
+            expect(output).toContain('Toggle proxy');
+            expect(output).toContain('Open browser');
+        });
+        it('hides controls when inactive', () => {
+            const services = [
+                { name: 'api', port: 3001, state: 'running' },
+            ];
+            const { lastFrame } = render(_jsx(AppPreview, { services: services, isActive: false }));
+            const output = lastFrame();
+            expect(output).not.toContain('Open browser');
+        });
+        it('shows proxy mode indicator', () => {
+            const services = [
+                { name: 'api', port: 3001, state: 'running' },
+            ];
+            const { lastFrame } = render(_jsx(AppPreview, { services: services, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Mode:');
+            expect(output).toContain('Proxy');
+        });
+        it('uses custom dashboard port', () => {
+            const services = [
+                { name: 'api', port: 3001, state: 'running' },
+            ];
+            const { lastFrame } = render(_jsx(AppPreview, { services: services, dashboardPort: 8080, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('8080');
+        });
+    });
+});

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

@@ -0,0 +1,33 @@
+interface Route {
+    method: string;
+    path: string;
+    summary?: string;
+    tags?: string[];
+}
+interface DocsPaneProps {
+    routes: Route[];
+    selectedRoute?: Route;
+    specFile?: string;
+    isActive: boolean;
+    onRouteSelect?: (route: Route) => void;
+    onRefresh?: () => void;
+    onOpenSpec?: () => void;
+}
+/**
+ * Get method color
+ */
+export declare function getMethodColor(method: string): string;
+/**
+ * Format method for display (fixed width)
+ */
+export declare function formatMethod(method: string): string;
+/**
+ * Group routes by tag
+ */
+export declare function groupByTag(routes: Route[]): Record<string, Route[]>;
+/**
+ * Count routes by method
+ */
+export declare function countByMethod(routes: Route[]): Record<string, number>;
+export declare function DocsPane({ routes, selectedRoute, specFile, isActive, onRouteSelect, onRefresh, onOpenSpec, }: DocsPaneProps): import("react/jsx-runtime").JSX.Element;
+export default DocsPane;

package/dashboard/dist/components/DocsPane.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+/**
+ * Get method color
+ */
+export function getMethodColor(method) {
+    switch (method.toUpperCase()) {
+        case 'GET':
+            return 'green';
+        case 'POST':
+            return 'yellow';
+        case 'PUT':
+            return 'blue';
+        case 'PATCH':
+            return 'cyan';
+        case 'DELETE':
+            return 'red';
+        default:
+            return 'gray';
+    }
+}
+/**
+ * Format method for display (fixed width)
+ */
+export function formatMethod(method) {
+    return method.toUpperCase().padEnd(7);
+}
+/**
+ * Group routes by tag
+ */
+export function groupByTag(routes) {
+    const groups = {};
+    for (const route of routes) {
+        const tag = route.tags?.[0] || 'default';
+        if (!groups[tag]) {
+            groups[tag] = [];
+        }
+        groups[tag].push(route);
+    }
+    return groups;
+}
+/**
+ * Count routes by method
+ */
+export function countByMethod(routes) {
+    const counts = {};
+    for (const route of routes) {
+        const method = route.method.toUpperCase();
+        counts[method] = (counts[method] || 0) + 1;
+    }
+    return counts;
+}
+function RouteList({ routes, selectedRoute, onSelect, }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [routes.slice(0, 10).map((route, idx) => {
+                const isSelected = selectedRoute?.path === route.path &&
+                    selectedRoute?.method === route.method;
+                return (_jsxs(Box, { children: [_jsx(Text, { color: getMethodColor(route.method), bold: isSelected, children: formatMethod(route.method) }), _jsx(Text, { dimColor: !isSelected, bold: isSelected, underline: isSelected, children: route.path })] }, `${route.method}-${route.path}`));
+            }), routes.length > 10 && (_jsxs(Text, { dimColor: true, children: ["... and ", routes.length - 10, " more"] }))] }));
+}
+function RouteDetails({ route }) {
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", paddingX: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: getMethodColor(route.method), bold: true, children: route.method.toUpperCase() }), _jsxs(Text, { bold: true, children: [" ", route.path] })] }), route.summary && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Summary: " }), _jsx(Text, { children: route.summary })] })), route.tags && route.tags.length > 0 && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Tags: " }), _jsx(Text, { children: route.tags.join(', ') })] }))] }));
+}
+function MethodSummary({ routes }) {
+    const counts = countByMethod(routes);
+    const methods = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
+    return (_jsx(Box, { flexDirection: "row", gap: 2, children: methods.map(method => {
+            const count = counts[method] || 0;
+            if (count === 0)
+                return null;
+            return (_jsxs(Box, { children: [_jsx(Text, { color: getMethodColor(method), children: method }), _jsxs(Text, { dimColor: true, children: [": ", count] })] }, method));
+        }) }));
+}
+export function DocsPane({ routes, selectedRoute, specFile, isActive, onRouteSelect, onRefresh, onOpenSpec, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [viewMode, setViewMode] = useState('list');
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // Navigation
+        if (key.upArrow) {
+            setSelectedIndex(Math.max(0, selectedIndex - 1));
+            if (routes[selectedIndex - 1]) {
+                onRouteSelect?.(routes[selectedIndex - 1]);
+            }
+        }
+        if (key.downArrow) {
+            setSelectedIndex(Math.min(routes.length - 1, selectedIndex + 1));
+            if (routes[selectedIndex + 1]) {
+                onRouteSelect?.(routes[selectedIndex + 1]);
+            }
+        }
+        // Actions
+        if (input === 'r') {
+            onRefresh?.();
+        }
+        if (input === 'o') {
+            onOpenSpec?.();
+        }
+        if (input === 'v') {
+            setViewMode(viewMode === 'list' ? 'grouped' : 'list');
+        }
+    }, { isActive });
+    if (routes.length === 0) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "API Documentation" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "yellow", children: "No routes documented" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Run /tlc:docs to generate documentation" }) })] }));
+    }
+    const grouped = groupByTag(routes);
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "API Documentation " }), _jsxs(Text, { dimColor: true, children: ["(", routes.length, " endpoints)"] })] }), _jsx(MethodSummary, { routes: routes }), specFile && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { dimColor: true, children: "Spec: " }), _jsx(Text, { color: "cyan", children: specFile })] })), _jsx(Box, { marginTop: 1, children: viewMode === 'list' ? (_jsx(RouteList, { routes: routes, selectedRoute: selectedRoute || routes[selectedIndex], onSelect: onRouteSelect || (() => { }) })) : (_jsx(Box, { flexDirection: "column", children: Object.entries(grouped).map(([tag, tagRoutes]) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: tag }), _jsx(RouteList, { routes: tagRoutes, selectedRoute: selectedRoute || routes[selectedIndex], onSelect: onRouteSelect || (() => { }) })] }, tag))) })) }), (selectedRoute || routes[selectedIndex]) && (_jsx(RouteDetails, { route: selectedRoute || routes[selectedIndex] })), isActive && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[\u2191\u2193] Navigate  [v] Toggle view  [r] Refresh  [o] Open spec" }) }))] }));
+}
+export default DocsPane;

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

@@ -0,0 +1,154 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { DocsPane, getMethodColor, formatMethod, groupByTag, countByMethod, } from './DocsPane.js';
+describe('DocsPane', () => {
+    describe('getMethodColor', () => {
+        it('returns green for GET', () => {
+            expect(getMethodColor('GET')).toBe('green');
+            expect(getMethodColor('get')).toBe('green');
+        });
+        it('returns yellow for POST', () => {
+            expect(getMethodColor('POST')).toBe('yellow');
+        });
+        it('returns blue for PUT', () => {
+            expect(getMethodColor('PUT')).toBe('blue');
+        });
+        it('returns cyan for PATCH', () => {
+            expect(getMethodColor('PATCH')).toBe('cyan');
+        });
+        it('returns red for DELETE', () => {
+            expect(getMethodColor('DELETE')).toBe('red');
+        });
+        it('returns gray for unknown', () => {
+            expect(getMethodColor('OPTIONS')).toBe('gray');
+        });
+    });
+    describe('formatMethod', () => {
+        it('formats method to fixed width', () => {
+            expect(formatMethod('GET').length).toBe(7);
+            expect(formatMethod('DELETE').length).toBe(7);
+        });
+        it('uppercases method', () => {
+            expect(formatMethod('get')).toBe('GET    ');
+        });
+    });
+    describe('groupByTag', () => {
+        it('groups routes by first tag', () => {
+            const routes = [
+                { method: 'GET', path: '/users', tags: ['users'] },
+                { method: 'POST', path: '/users', tags: ['users'] },
+                { method: 'GET', path: '/posts', tags: ['posts'] },
+            ];
+            const grouped = groupByTag(routes);
+            expect(grouped['users']).toHaveLength(2);
+            expect(grouped['posts']).toHaveLength(1);
+        });
+        it('uses default for routes without tags', () => {
+            const routes = [
+                { method: 'GET', path: '/health' },
+            ];
+            const grouped = groupByTag(routes);
+            expect(grouped['default']).toHaveLength(1);
+        });
+    });
+    describe('countByMethod', () => {
+        it('counts routes by method', () => {
+            const routes = [
+                { method: 'GET', path: '/a' },
+                { method: 'GET', path: '/b' },
+                { method: 'POST', path: '/c' },
+            ];
+            const counts = countByMethod(routes);
+            expect(counts['GET']).toBe(2);
+            expect(counts['POST']).toBe(1);
+        });
+        it('uppercases method names', () => {
+            const routes = [
+                { method: 'get', path: '/a' },
+                { method: 'Get', path: '/b' },
+            ];
+            const counts = countByMethod(routes);
+            expect(counts['GET']).toBe(2);
+        });
+    });
+    describe('component rendering', () => {
+        it('renders empty state when no routes', () => {
+            const { lastFrame } = render(_jsx(DocsPane, { routes: [], isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('No routes documented');
+            expect(output).toContain('/tlc:docs');
+        });
+        it('renders route count', () => {
+            const routes = [
+                { method: 'GET', path: '/users' },
+                { method: 'POST', path: '/users' },
+            ];
+            const { lastFrame } = render(_jsx(DocsPane, { routes: routes, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('2 endpoints');
+        });
+        it('renders routes list', () => {
+            const routes = [
+                { method: 'GET', path: '/users' },
+                { method: 'POST', path: '/posts' },
+            ];
+            const { lastFrame } = render(_jsx(DocsPane, { routes: routes, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('GET');
+            expect(output).toContain('/users');
+            expect(output).toContain('POST');
+            expect(output).toContain('/posts');
+        });
+        it('renders method summary', () => {
+            const routes = [
+                { method: 'GET', path: '/a' },
+                { method: 'GET', path: '/b' },
+                { method: 'POST', path: '/c' },
+            ];
+            const { lastFrame } = render(_jsx(DocsPane, { routes: routes, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('GET');
+            expect(output).toContain('POST');
+        });
+        it('renders spec file path', () => {
+            const routes = [{ method: 'GET', path: '/test' }];
+            const { lastFrame } = render(_jsx(DocsPane, { routes: routes, specFile: "docs/api/openapi.json", isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Spec:');
+            expect(output).toContain('openapi.json');
+        });
+        it('renders selected route details', () => {
+            const routes = [
+                { method: 'GET', path: '/users', summary: 'List all users', tags: ['users'] },
+            ];
+            const { lastFrame } = render(_jsx(DocsPane, { routes: routes, selectedRoute: routes[0], isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('List all users');
+            expect(output).toContain('users');
+        });
+        it('renders controls when active', () => {
+            const routes = [{ method: 'GET', path: '/test' }];
+            const { lastFrame } = render(_jsx(DocsPane, { routes: routes, isActive: true }));
+            const output = lastFrame();
+            expect(output).toContain('Navigate');
+            expect(output).toContain('Refresh');
+            expect(output).toContain('Open spec');
+        });
+        it('hides controls when inactive', () => {
+            const routes = [{ method: 'GET', path: '/test' }];
+            const { lastFrame } = render(_jsx(DocsPane, { routes: routes, isActive: false }));
+            const output = lastFrame();
+            expect(output).not.toContain('Refresh');
+        });
+        it('truncates long route lists', () => {
+            const routes = Array.from({ length: 15 }, (_, i) => ({
+                method: 'GET',
+                path: `/route-${i}`,
+            }));
+            const { lastFrame } = render(_jsx(DocsPane, { routes: routes, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('and 5 more');
+        });
+    });
+});

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

@@ -0,0 +1,22 @@
+interface SecurityData {
+    total: number;
+    critical: number;
+    high: number;
+    moderate: number;
+    low: number;
+}
+interface OutdatedData {
+    total: number;
+    major?: number;
+    minor?: number;
+    patch?: number;
+}
+interface HealthData {
+    security: SecurityData;
+    outdated: OutdatedData;
+}
+interface HealthPaneProps {
+    data?: HealthData;
+}
+export declare function HealthPane({ data }: HealthPaneProps): import("react/jsx-runtime").JSX.Element;
+export {};