tlc-claude-code 1.2.28 → 1.3.0

package/README.md

@@ -58,10 +58,12 @@ No manual testing. No "does this work?" No vibes.
 ### Then Just Run
 
 ```bash
-/tlc
+/tlc:next
 ```
 
-TLC knows where you are and what's next.
+Shows what's next, asks "Proceed? [Y/n]", then executes. That's it.
+
+Or use `/tlc` for the full dashboard.
 
 ---
 
@@ -70,6 +72,8 @@ TLC knows where you are and what's next.
 ### For Solo Developers
 
 - **Test-first by default** — Claude writes tests before code
+- **Auto-parallelization** — Up to 10 agents run independent tasks simultaneously
+- **`/tlc:next`** — One command to progress. No decisions needed.
 - **Smart dashboard** — See progress, run actions
 - **Coverage gaps** — Find and fix untested code
 - **Auto-fix** — Automatically repair failing tests
@@ -95,10 +99,11 @@ TLC knows where you are and what's next.
 
 | Command | What It Does |
 |---------|--------------|
-| `/tlc` | **Smart entry point — knows what's next** |
+| `/tlc:next` | **Just do it — shows next action, asks once, executes** |
+| `/tlc` | Smart dashboard — full status view |
 | `/tlc:new-project` | Start new project with roadmap |
 | `/tlc:init` | Add TLC to existing codebase |
-| `/tlc:build` | Write tests → implement → verify |
+| `/tlc:build` | Write tests → implement (auto-parallelizes up to 10 agents) |
 | `/tlc:coverage` | Find and fix untested code |
 | `/tlc:quality` | Test quality scoring |
 | `/tlc:autofix` | Auto-repair failing tests |

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

@@ -0,0 +1,13 @@
+interface ModelUsage {
+    daily: number;
+    monthly: number;
+    requests: number;
+    budgetDaily: number;
+    budgetMonthly: number;
+}
+interface UsagePaneProps {
+    data?: Record<string, ModelUsage>;
+    alerts?: string[];
+}
+export declare function UsagePane({ data, alerts }: UsagePaneProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dashboard/dist/components/UsagePane.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+function formatCurrency(amount) {
+    return '$' + amount.toFixed(2);
+}
+function getUsageColor(used, budget) {
+    if (budget === 0)
+        return 'gray';
+    const percent = (used / budget) * 100;
+    if (percent >= 100)
+        return 'red';
+    if (percent >= 80)
+        return 'yellow';
+    return 'green';
+}
+function createBar(used, budget, width = 15) {
+    if (budget === 0)
+        return '░'.repeat(width);
+    const percent = Math.min(used / budget, 1.5); // Cap at 150% for display
+    const filled = Math.round(percent * width);
+    const bar = '█'.repeat(Math.min(filled, width)) + '░'.repeat(Math.max(0, width - filled));
+    return bar;
+}
+export function UsagePane({ data, alerts }) {
+    if (!data || Object.keys(data).length === 0) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Usage Dashboard" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "No usage data available." }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Run /tlc:usage to view." }) })] }));
+    }
+    const models = Object.keys(data);
+    // Calculate totals
+    let totalDaily = 0;
+    let totalMonthly = 0;
+    let totalRequests = 0;
+    let totalBudgetDaily = 0;
+    let totalBudgetMonthly = 0;
+    for (const model of models) {
+        const usage = data[model];
+        totalDaily += usage.daily;
+        totalMonthly += usage.monthly;
+        totalRequests += usage.requests;
+        totalBudgetDaily += usage.budgetDaily;
+        totalBudgetMonthly += usage.budgetMonthly;
+    }
+    const totalDailyPercent = totalBudgetDaily > 0 ? Math.round((totalDaily / totalBudgetDaily) * 100) : 0;
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Usage Dashboard" }), alerts && alerts.length > 0 && (_jsx(Box, { marginTop: 1, flexDirection: "column", children: alerts.map((alert, idx) => (_jsx(Box, { children: _jsxs(Text, { color: "yellow", children: ["\u26A0 ", alert] }) }, idx))) })), _jsx(Box, { marginTop: 1, flexDirection: "column", children: models.map((model) => {
+                    const usage = data[model];
+                    const dailyPercent = usage.budgetDaily > 0 ? Math.round((usage.daily / usage.budgetDaily) * 100) : 0;
+                    const isOver = usage.daily > usage.budgetDaily;
+                    const color = getUsageColor(usage.daily, usage.budgetDaily);
+                    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: model }), isOver && _jsx(Text, { color: "red", children: " OVER" })] }), _jsxs(Box, { children: [_jsxs(Text, { color: color, children: ["[", createBar(usage.daily, usage.budgetDaily), "]"] }), _jsx(Text, { children: " " }), _jsx(Text, { color: color, children: formatCurrency(usage.daily) }), _jsxs(Text, { dimColor: true, children: [" / ", formatCurrency(usage.budgetDaily)] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: color, children: [dailyPercent, "%"] })] }), _jsx(Box, { children: _jsxs(Text, { dimColor: true, children: ["  Requests: ", usage.requests] }) })] }, model));
+                }) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, children: [_jsx(Text, { bold: true, children: "Totals" }), _jsxs(Box, { children: [_jsx(Text, { children: "Daily:   " }), _jsx(Text, { color: getUsageColor(totalDaily, totalBudgetDaily), children: formatCurrency(totalDaily) }), _jsxs(Text, { dimColor: true, children: [" / ", formatCurrency(totalBudgetDaily)] }), _jsx(Text, { children: " " }), _jsxs(Text, { color: getUsageColor(totalDaily, totalBudgetDaily), children: [totalDailyPercent, "%"] })] }), _jsxs(Box, { children: [_jsx(Text, { children: "Monthly: " }), _jsx(Text, { color: getUsageColor(totalMonthly, totalBudgetMonthly), children: formatCurrency(totalMonthly) }), _jsxs(Text, { dimColor: true, children: [" / ", formatCurrency(totalBudgetMonthly)] })] }), _jsx(Box, { children: _jsxs(Text, { dimColor: true, children: ["Requests: ", totalRequests] }) })] })] }));
+}

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

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

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

@@ -0,0 +1,142 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render } from 'ink-testing-library';
+import { UsagePane } from './UsagePane.js';
+describe('UsagePane', () => {
+    beforeEach(() => {
+        vi.useFakeTimers();
+    });
+    afterEach(() => {
+        vi.useRealTimers();
+    });
+    it('renders without error', () => {
+        const { lastFrame } = render(_jsx(UsagePane, {}));
+        expect(lastFrame()).toBeDefined();
+    });
+    it('shows placeholder when no usage data', () => {
+        const { lastFrame } = render(_jsx(UsagePane, {}));
+        const output = lastFrame();
+        expect(output).toContain('Usage');
+    });
+    it('renders usage bars for each model', () => {
+        const usageData = {
+            openai: { daily: 5, monthly: 50, requests: 100, budgetDaily: 10, budgetMonthly: 100 },
+            deepseek: { daily: 2, monthly: 20, requests: 50, budgetDaily: 5, budgetMonthly: 50 },
+        };
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData }));
+        const output = lastFrame();
+        expect(output).toContain('openai');
+        expect(output).toContain('deepseek');
+    });
+    it('shows model names', () => {
+        const usageData = {
+            'gpt-4': { daily: 3, monthly: 30, requests: 60, budgetDaily: 10, budgetMonthly: 100 },
+        };
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData }));
+        const output = lastFrame();
+        expect(output).toContain('gpt-4');
+    });
+    it('shows dollar amounts', () => {
+        const usageData = {
+            openai: { daily: 5.50, monthly: 55.25, requests: 100, budgetDaily: 10, budgetMonthly: 100 },
+        };
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData }));
+        const output = lastFrame();
+        expect(output).toContain('$5.50');
+    });
+    it('shows budget limit', () => {
+        const usageData = {
+            openai: { daily: 5, monthly: 50, requests: 100, budgetDaily: 10, budgetMonthly: 100 },
+        };
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData }));
+        const output = lastFrame();
+        expect(output).toContain('$10');
+    });
+    it('highlights over-budget with warning color', () => {
+        const usageData = {
+            openai: { daily: 12, monthly: 120, requests: 150, budgetDaily: 10, budgetMonthly: 100 },
+        };
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData }));
+        const output = lastFrame();
+        // Should show the over-budget amount
+        expect(output).toContain('$12');
+        // Should have some indicator of over-budget
+        expect(output).toContain('OVER');
+    });
+    it('shows alert messages when provided', () => {
+        const usageData = {
+            openai: { daily: 8, monthly: 80, requests: 100, budgetDaily: 10, budgetMonthly: 100 },
+        };
+        const alerts = ['Budget Alert: openai at 80% of daily budget'];
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData, alerts: alerts }));
+        const output = lastFrame();
+        expect(output).toContain('80%');
+    });
+    it('shows percentage of budget used', () => {
+        const usageData = {
+            openai: { daily: 5, monthly: 50, requests: 100, budgetDaily: 10, budgetMonthly: 100 },
+        };
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData }));
+        const output = lastFrame();
+        expect(output).toContain('50%');
+    });
+    it('updates on data change', () => {
+        const usageData1 = {
+            openai: { daily: 5, monthly: 50, requests: 100, budgetDaily: 10, budgetMonthly: 100 },
+        };
+        const { lastFrame, rerender } = render(_jsx(UsagePane, { data: usageData1 }));
+        let output = lastFrame();
+        expect(output).toContain('$5');
+        const usageData2 = {
+            openai: { daily: 7, monthly: 70, requests: 140, budgetDaily: 10, budgetMonthly: 100 },
+        };
+        rerender(_jsx(UsagePane, { data: usageData2 }));
+        output = lastFrame();
+        expect(output).toContain('$7');
+    });
+    it('shows totals across all models', () => {
+        const usageData = {
+            openai: { daily: 5, monthly: 50, requests: 100, budgetDaily: 10, budgetMonthly: 100 },
+            deepseek: { daily: 3, monthly: 30, requests: 60, budgetDaily: 5, budgetMonthly: 50 },
+        };
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData }));
+        const output = lastFrame();
+        // Total daily: $8, Total budget: $15
+        expect(output).toContain('$8');
+    });
+    it('shows visual progress bar for usage', () => {
+        const usageData = {
+            openai: { daily: 5, monthly: 50, requests: 100, budgetDaily: 10, budgetMonthly: 100 },
+        };
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData }));
+        const output = lastFrame();
+        // Should contain some visual bar representation
+        expect(output).toBeTruthy();
+    });
+    it('handles zero usage gracefully', () => {
+        const usageData = {
+            openai: { daily: 0, monthly: 0, requests: 0, budgetDaily: 10, budgetMonthly: 100 },
+        };
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData }));
+        const output = lastFrame();
+        expect(output).toContain('$0');
+        expect(output).toContain('0%');
+    });
+    it('handles missing budget values', () => {
+        const usageData = {
+            openai: { daily: 5, monthly: 50, requests: 100, budgetDaily: 0, budgetMonthly: 0 },
+        };
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData }));
+        const output = lastFrame();
+        // Should still render without errors
+        expect(output).toBeDefined();
+    });
+    it('shows request count', () => {
+        const usageData = {
+            openai: { daily: 5, monthly: 50, requests: 150, budgetDaily: 10, budgetMonthly: 100 },
+        };
+        const { lastFrame } = render(_jsx(UsagePane, { data: usageData }));
+        const output = lastFrame();
+        expect(output).toContain('150');
+    });
+});

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

@@ -0,0 +1,19 @@
+export interface WorkspaceDoc {
+    id: string;
+    name: string;
+    path: string;
+    type: 'markdown' | 'mermaid';
+    content?: string;
+    linkedDocs?: string[];
+}
+export interface WorkspaceDocsPaneProps {
+    docs?: WorkspaceDoc[];
+    selectedDocId?: string;
+    loading?: boolean;
+    isActive: boolean;
+    onRefresh?: () => void;
+    onRegenerate?: () => void;
+    onSelectDoc?: (docId: string) => void;
+}
+export declare function WorkspaceDocsPane({ docs, selectedDocId, loading, isActive, onRefresh, onRegenerate, onSelectDoc, }: WorkspaceDocsPaneProps): import("react/jsx-runtime").JSX.Element;
+export default WorkspaceDocsPane;

package/dashboard/dist/components/WorkspaceDocsPane.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState } from 'react';
+/**
+ * Parse markdown content and render as terminal-friendly text
+ */
+function renderMarkdownLine(line) {
+    // Heading detection
+    if (line.startsWith('# ')) {
+        return { text: line.slice(2), bold: true, dimColor: false, color: 'cyan' };
+    }
+    if (line.startsWith('## ')) {
+        return { text: line.slice(3), bold: true, dimColor: false, color: 'cyan' };
+    }
+    if (line.startsWith('### ')) {
+        return { text: line.slice(4), bold: true, dimColor: false };
+    }
+    return { text: line, bold: false, dimColor: false };
+}
+function parseMarkdown(content) {
+    const blocks = [];
+    const lines = content.split('\n');
+    let i = 0;
+    while (i < lines.length) {
+        const line = lines[i];
+        // Check for code blocks (including mermaid)
+        if (line.startsWith('```')) {
+            const language = line.slice(3).trim();
+            const codeLines = [];
+            i++;
+            while (i < lines.length && !lines[i].startsWith('```')) {
+                codeLines.push(lines[i]);
+                i++;
+            }
+            if (language === 'mermaid') {
+                blocks.push({
+                    type: 'mermaid',
+                    content: codeLines.join('\n'),
+                    language: 'mermaid'
+                });
+            }
+            else {
+                blocks.push({
+                    type: 'code',
+                    content: codeLines.join('\n'),
+                    language: language || 'text'
+                });
+            }
+            i++;
+            continue;
+        }
+        // Check for headings
+        if (line.startsWith('#')) {
+            blocks.push({
+                type: 'heading',
+                content: line.replace(/^#+\s*/, '')
+            });
+            i++;
+            continue;
+        }
+        // Regular text
+        if (line.trim()) {
+            blocks.push({
+                type: 'text',
+                content: line
+            });
+        }
+        i++;
+    }
+    return blocks;
+}
+/**
+ * Render a content block as Ink elements
+ */
+function ContentBlockView({ block }) {
+    switch (block.type) {
+        case 'heading':
+            return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { bold: true, color: "cyan", children: block.content }) }));
+        case 'code':
+            return (_jsxs(Box, { marginTop: 1, flexDirection: "column", borderStyle: "single", paddingX: 1, children: [_jsx(Text, { dimColor: true, children: block.language }), _jsx(Text, { children: block.content })] }));
+        case 'mermaid':
+            return (_jsxs(Box, { marginTop: 1, flexDirection: "column", borderStyle: "double", paddingX: 1, children: [_jsx(Text, { bold: true, color: "magenta", children: "Mermaid Diagram" }), _jsx(Text, { dimColor: true, children: block.content })] }));
+        case 'text':
+        default:
+            return _jsx(Text, { children: block.content });
+    }
+}
+/**
+ * Doc list item component
+ */
+function DocListItem({ doc, isSelected, }) {
+    const linkCount = doc.linkedDocs?.length || 0;
+    return (_jsxs(Box, { children: [_jsxs(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, underline: isSelected, children: [isSelected ? '> ' : '  ', doc.name] }), linkCount > 0 && (_jsxs(Text, { dimColor: true, children: [" (", linkCount, " links)"] }))] }));
+}
+/**
+ * Document content viewer
+ */
+function DocContentView({ doc }) {
+    if (!doc.content) {
+        return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "No content available" }) }));
+    }
+    const blocks = parseMarkdown(doc.content);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, borderStyle: "single", paddingX: 1, children: [_jsx(Text, { bold: true, children: doc.name }), blocks.map((block, idx) => (_jsx(ContentBlockView, { block: block }, idx)))] }));
+}
+export function WorkspaceDocsPane({ docs = [], selectedDocId, loading = false, isActive, onRefresh, onRegenerate, onSelectDoc, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // Get actual selected doc (from prop or from index)
+    const actualSelectedDocId = selectedDocId || docs[selectedIndex]?.id;
+    const selectedDoc = docs.find(d => d.id === actualSelectedDocId);
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // Navigation
+        if (key.upArrow) {
+            const newIndex = Math.max(0, selectedIndex - 1);
+            setSelectedIndex(newIndex);
+            if (docs[newIndex] && onSelectDoc) {
+                onSelectDoc(docs[newIndex].id);
+            }
+        }
+        if (key.downArrow) {
+            const newIndex = Math.min(docs.length - 1, selectedIndex + 1);
+            setSelectedIndex(newIndex);
+            if (docs[newIndex] && onSelectDoc) {
+                onSelectDoc(docs[newIndex].id);
+            }
+        }
+        // Actions
+        if (input === 'r') {
+            onRefresh?.();
+        }
+        if (input === 'g') {
+            onRegenerate?.();
+        }
+    }, { isActive });
+    // Loading state
+    if (loading) {
+        return (_jsx(Box, { padding: 1, flexDirection: "column", children: _jsx(Text, { color: "yellow", children: "Loading docs..." }) }));
+    }
+    // Empty state
+    if (docs.length === 0) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Workspace Docs" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "gray", children: "No docs generated yet." }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Run /tlc:workspace-docs to generate documentation" }) })] }));
+    }
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Workspace Docs" }), _jsxs(Text, { dimColor: true, children: [" (", docs.length, ")"] })] }), _jsxs(Box, { flexDirection: "column", children: [docs.slice(0, 10).map((doc, idx) => (_jsx(DocListItem, { doc: doc, isSelected: doc.id === actualSelectedDocId }, doc.id))), docs.length > 10 && (_jsxs(Text, { dimColor: true, children: ["... and ", docs.length - 10, " more"] }))] }), selectedDoc && _jsx(DocContentView, { doc: selectedDoc }), isActive && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[arrows] Navigate  [r] Refresh  [g] Regenerate" }) }))] }));
+}
+export default WorkspaceDocsPane;

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

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

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

@@ -0,0 +1,242 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+import { WorkspaceDocsPane } from './WorkspaceDocsPane.js';
+describe('WorkspaceDocsPane', () => {
+    describe('doc list', () => {
+        it('renders doc list', () => {
+            const docs = [
+                { id: 'readme', name: 'README.md', path: '/docs/README.md', type: 'markdown' },
+                { id: 'api', name: 'API.md', path: '/docs/API.md', type: 'markdown' },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('README.md');
+            expect(output).toContain('API.md');
+        });
+        it('shows doc count in header', () => {
+            const docs = [
+                { id: 'doc1', name: 'Doc1.md', path: '/docs/Doc1.md', type: 'markdown' },
+                { id: 'doc2', name: 'Doc2.md', path: '/docs/Doc2.md', type: 'markdown' },
+                { id: 'doc3', name: 'Doc3.md', path: '/docs/Doc3.md', type: 'markdown' },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('3');
+        });
+    });
+    describe('markdown content', () => {
+        it('shows markdown content for selected doc', () => {
+            const docs = [
+                {
+                    id: 'readme',
+                    name: 'README.md',
+                    path: '/docs/README.md',
+                    type: 'markdown',
+                    content: '# Project Title\n\nThis is the readme content.'
+                },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, selectedDocId: "readme", isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Project Title');
+            expect(output).toContain('readme content');
+        });
+        it('renders headings distinctly', () => {
+            const docs = [
+                {
+                    id: 'doc1',
+                    name: 'Doc.md',
+                    path: '/docs/Doc.md',
+                    type: 'markdown',
+                    content: '## Section Heading\n\nParagraph text.'
+                },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, selectedDocId: "doc1", isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Section Heading');
+        });
+        it('renders code blocks', () => {
+            const docs = [
+                {
+                    id: 'code-doc',
+                    name: 'Code.md',
+                    path: '/docs/Code.md',
+                    type: 'markdown',
+                    content: '```typescript\nconst x = 1;\n```'
+                },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, selectedDocId: "code-doc", isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('const x = 1');
+        });
+    });
+    describe('mermaid diagrams', () => {
+        it('renders Mermaid diagrams', () => {
+            const docs = [
+                {
+                    id: 'arch',
+                    name: 'Architecture.md',
+                    path: '/docs/Architecture.md',
+                    type: 'markdown',
+                    content: '```mermaid\ngraph TD\n  A[Start] --> B[End]\n```'
+                },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, selectedDocId: "arch", isActive: false }));
+            const output = lastFrame();
+            // In terminal, mermaid is rendered as text representation
+            expect(output).toContain('Mermaid');
+        });
+        it('shows diagram type indicator', () => {
+            const docs = [
+                {
+                    id: 'flow',
+                    name: 'Flow.md',
+                    path: '/docs/Flow.md',
+                    type: 'markdown',
+                    content: '```mermaid\nsequenceDiagram\n  A->>B: Message\n```'
+                },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, selectedDocId: "flow", isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('sequenceDiagram');
+        });
+    });
+    describe('doc links', () => {
+        it('shows links between related docs', () => {
+            const docs = [
+                {
+                    id: 'main',
+                    name: 'Main.md',
+                    path: '/docs/Main.md',
+                    type: 'markdown',
+                    content: 'See [API Documentation](./API.md)',
+                    linkedDocs: ['api']
+                },
+                {
+                    id: 'api',
+                    name: 'API.md',
+                    path: '/docs/API.md',
+                    type: 'markdown'
+                },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, selectedDocId: "main", isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('API');
+        });
+        it('indicates linked docs in list view', () => {
+            const docs = [
+                {
+                    id: 'main',
+                    name: 'Main.md',
+                    path: '/docs/Main.md',
+                    type: 'markdown',
+                    linkedDocs: ['api', 'readme']
+                },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, isActive: false }));
+            const output = lastFrame();
+            // Should show link count
+            expect(output).toContain('2');
+        });
+    });
+    describe('loading state', () => {
+        it('shows loading state', () => {
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { loading: true, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Loading');
+        });
+        it('shows loading indicator while refreshing', () => {
+            const docs = [
+                { id: 'doc1', name: 'Doc.md', path: '/docs/Doc.md', type: 'markdown' },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, loading: true, isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Loading');
+        });
+    });
+    describe('empty state', () => {
+        it('shows empty state when no docs', () => {
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: [], isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('No docs');
+        });
+        it('shows hint to generate docs', () => {
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: [], isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('/tlc');
+        });
+    });
+    describe('refresh/regenerate', () => {
+        it('shows refresh button when active', () => {
+            const docs = [
+                { id: 'doc1', name: 'Doc.md', path: '/docs/Doc.md', type: 'markdown' },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, isActive: true }));
+            const output = lastFrame();
+            expect(output).toContain('Refresh');
+        });
+        it('accepts onRefresh callback prop', () => {
+            const onRefresh = vi.fn();
+            const docs = [
+                { id: 'doc1', name: 'Doc.md', path: '/docs/Doc.md', type: 'markdown' },
+            ];
+            // Verify component renders with callback without errors
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, isActive: true, onRefresh: onRefresh }));
+            const output = lastFrame();
+            // Controls should be shown indicating 'r' key works
+            expect(output).toContain('r');
+            expect(output).toContain('Refresh');
+        });
+        it('shows regenerate option', () => {
+            const docs = [
+                { id: 'doc1', name: 'Doc.md', path: '/docs/Doc.md', type: 'markdown' },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, isActive: true }));
+            const output = lastFrame();
+            expect(output).toContain('Regenerate');
+        });
+        it('accepts onRegenerate callback prop', () => {
+            const onRegenerate = vi.fn();
+            const docs = [
+                { id: 'doc1', name: 'Doc.md', path: '/docs/Doc.md', type: 'markdown' },
+            ];
+            // Verify component renders with callback without errors
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, isActive: true, onRegenerate: onRegenerate }));
+            const output = lastFrame();
+            // Controls should be shown indicating 'g' key works
+            expect(output).toContain('g');
+            expect(output).toContain('Regenerate');
+        });
+        it('hides controls when not active', () => {
+            const docs = [
+                { id: 'doc1', name: 'Doc.md', path: '/docs/Doc.md', type: 'markdown' },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, isActive: false }));
+            const output = lastFrame();
+            expect(output).not.toContain('Refresh');
+        });
+    });
+    describe('navigation', () => {
+        it('accepts onSelectDoc callback prop', () => {
+            const onSelectDoc = vi.fn();
+            const docs = [
+                { id: 'doc1', name: 'First.md', path: '/docs/First.md', type: 'markdown' },
+                { id: 'doc2', name: 'Second.md', path: '/docs/Second.md', type: 'markdown' },
+            ];
+            // Verify component renders with callback without errors
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, isActive: true, onSelectDoc: onSelectDoc }));
+            const output = lastFrame();
+            // Controls should be shown indicating arrow keys work
+            expect(output).toContain('arrows');
+            expect(output).toContain('Navigate');
+        });
+        it('shows navigation hints when active', () => {
+            const docs = [
+                { id: 'doc1', name: 'Doc.md', path: '/docs/Doc.md', type: 'markdown' },
+            ];
+            const { lastFrame } = render(_jsx(WorkspaceDocsPane, { docs: docs, isActive: true }));
+            const output = lastFrame();
+            expect(output).toContain('Navigate');
+        });
+    });
+});