tlc-claude-code 0.6.2 → 0.6.3

package/dashboard/dist/App.d.ts

@@ -0,0 +1,5 @@
+interface AppProps {
+    isTTY?: boolean;
+}
+export declare function App({ isTTY }: AppProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dashboard/dist/App.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useApp, useInput } from 'ink';
+import { useState, useCallback } from 'react';
+import { ChatPane } from './components/ChatPane.js';
+import { StatusPane } from './components/StatusPane.js';
+import { PreviewPane } from './components/PreviewPane.js';
+import { AgentsPane } from './components/AgentsPane.js';
+import { GitHubPane } from './components/GitHubPane.js';
+import { markIssueComplete, markIssueInProgress } from './components/PlanSync.js';
+export function App({ isTTY = true }) {
+    const { exit } = useApp();
+    const [activePane, setActivePane] = useState('chat');
+    const [pendingTasks, setPendingTasks] = useState(new Map());
+    useInput((input, key) => {
+        if (input === 'q' && key.ctrl) {
+            exit();
+        }
+        if (key.tab) {
+            setActivePane(prev => {
+                const panes = ['chat', 'github', 'agents', 'preview'];
+                const idx = panes.indexOf(prev);
+                return panes[(idx + 1) % panes.length];
+            });
+        }
+        // Number keys to quick-switch panes
+        if (input === '1')
+            setActivePane('chat');
+        if (input === '2')
+            setActivePane('github');
+        if (input === '3')
+            setActivePane('agents');
+        if (input === '4')
+            setActivePane('preview');
+    }, { isActive: isTTY });
+    const handleAssignToAgent = useCallback(async (issue) => {
+        await markIssueInProgress(issue.number);
+        setPendingTasks(prev => new Map(prev).set(issue.number, issue.title));
+        // Agent assignment happens in AgentsPane
+    }, []);
+    const handleTaskComplete = useCallback(async (issueNumber) => {
+        await markIssueComplete(issueNumber);
+        setPendingTasks(prev => {
+            const next = new Map(prev);
+            next.delete(issueNumber);
+            return next;
+        });
+    }, []);
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", height: "100%", children: [_jsxs(Box, { borderStyle: "single", paddingX: 1, justifyContent: "space-between", children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: "cyan", children: "TDD Dashboard" }), _jsx(Text, { color: "gray", children: " | " }), _jsx(Text, { color: activePane === 'chat' ? 'cyan' : 'gray', children: "[1]Chat " }), _jsx(Text, { color: activePane === 'github' ? 'cyan' : 'gray', children: "[2]GitHub " }), _jsx(Text, { color: activePane === 'agents' ? 'cyan' : 'gray', children: "[3]Agents " }), _jsx(Text, { color: activePane === 'preview' ? 'cyan' : 'gray', children: "[4]Preview" })] }), _jsx(Box, { children: _jsx(Text, { color: "cyan", bold: true, children: "| TDD |" }) })] }), _jsxs(Box, { flexGrow: 1, flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", width: "60%", borderStyle: "single", borderColor: activePane === 'chat' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'chat' ? 'cyan' : 'white', children: "Chat" }) }), _jsx(ChatPane, { isActive: activePane === 'chat', isTTY: isTTY })] }), _jsxs(Box, { flexDirection: "column", width: "40%", children: [_jsxs(Box, { flexDirection: "column", height: "30%", borderStyle: "single", borderColor: activePane === 'github' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'github' ? 'cyan' : 'white', children: "GitHub Issues" }) }), _jsx(GitHubPane, { isActive: activePane === 'github', isTTY: isTTY, onAssignToAgent: handleAssignToAgent })] }), _jsxs(Box, { flexDirection: "column", height: "30%", borderStyle: "single", borderColor: activePane === 'agents' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'agents' ? 'cyan' : 'white', children: "Agents" }) }), _jsx(AgentsPane, { isActive: activePane === 'agents', isTTY: isTTY, onTaskComplete: handleTaskComplete })] }), _jsxs(Box, { flexDirection: "column", height: "20%", borderStyle: "single", borderColor: "gray", children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, children: "Status" }) }), _jsx(StatusPane, {})] }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "single", borderColor: activePane === 'preview' ? 'cyan' : 'gray', children: [_jsx(Box, { paddingX: 1, borderStyle: "single", borderBottom: true, borderLeft: false, borderRight: false, borderTop: false, children: _jsx(Text, { bold: true, color: activePane === 'preview' ? 'cyan' : 'white', children: "Preview" }) }), _jsx(PreviewPane, { isActive: activePane === 'preview', isTTY: isTTY })] })] })] }), _jsx(Box, { borderStyle: "single", paddingX: 1, children: _jsx(Text, { dimColor: true, children: "Tab: cycle panes | 1-4: jump to pane | Ctrl+Q: quit" }) })] }));
+}

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

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

package/dashboard/dist/App.test.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from 'ink-testing-library';
+import { App } from './App.js';
+// Mock the PlanSync module
+vi.mock('./components/PlanSync.js', () => ({
+    markIssueComplete: vi.fn().mockResolvedValue(undefined),
+    markIssueInProgress: vi.fn().mockResolvedValue(undefined),
+}));
+// Mock child_process for StatusPane
+vi.mock('child_process', () => ({
+    exec: vi.fn((cmd, opts, cb) => {
+        if (typeof opts === 'function') {
+            cb = opts;
+        }
+        const error = new Error('command not found');
+        if (cb)
+            cb(error, '', '');
+        return { stdout: null, stderr: null };
+    }),
+}));
+vi.mock('util', async () => {
+    const actual = await vi.importActual('util');
+    return {
+        ...actual,
+        promisify: (fn) => async (...args) => {
+            return new Promise((resolve, reject) => {
+                fn(...args, (err, stdout, stderr) => {
+                    if (err)
+                        reject(err);
+                    else
+                        resolve({ stdout, stderr });
+                });
+            });
+        },
+    };
+});
+describe('App', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('initial render', () => {
+        it('renders without error', () => {
+            const { lastFrame } = render(_jsx(App, {}));
+            expect(lastFrame()).toBeDefined();
+        });
+        it('shows TDD Dashboard header', () => {
+            const { lastFrame } = render(_jsx(App, {}));
+            const output = lastFrame();
+            expect(output).toContain('TDD Dashboard');
+        });
+        it('shows all pane labels in header', () => {
+            const { lastFrame } = render(_jsx(App, {}));
+            const output = lastFrame();
+            expect(output).toContain('[1]Chat');
+            expect(output).toContain('[2]GitHub');
+            expect(output).toContain('[3]Agents');
+            expect(output).toContain('[4]Preview');
+        });
+        it('shows footer with keyboard hints', () => {
+            const { lastFrame } = render(_jsx(App, {}));
+            const output = lastFrame();
+            expect(output).toContain('Tab: cycle panes');
+            expect(output).toContain('Ctrl+Q: quit');
+        });
+    });
+    describe('pane sections', () => {
+        it('shows Chat pane', () => {
+            const { lastFrame } = render(_jsx(App, {}));
+            const output = lastFrame();
+            expect(output).toContain('Chat');
+        });
+        it('shows GitHub Issues pane', () => {
+            const { lastFrame } = render(_jsx(App, {}));
+            const output = lastFrame();
+            expect(output).toContain('GitHub Issues');
+        });
+        it('shows Agents pane', () => {
+            const { lastFrame } = render(_jsx(App, {}));
+            const output = lastFrame();
+            expect(output).toContain('Agents');
+        });
+        it('shows Status pane', () => {
+            const { lastFrame } = render(_jsx(App, {}));
+            const output = lastFrame();
+            expect(output).toContain('Status');
+        });
+        it('shows Preview pane', () => {
+            const { lastFrame } = render(_jsx(App, {}));
+            const output = lastFrame();
+            expect(output).toContain('Preview');
+        });
+    });
+    describe('keyboard navigation', () => {
+        it('switches to github pane when pressing 2', () => {
+            const { lastFrame, stdin } = render(_jsx(App, {}));
+            stdin.write('2');
+            const output = lastFrame();
+            // GitHub pane should now be active (shown by highlighting)
+            expect(output).toContain('GitHub');
+        });
+        it('switches to agents pane when pressing 3', () => {
+            const { lastFrame, stdin } = render(_jsx(App, {}));
+            stdin.write('3');
+            const output = lastFrame();
+            expect(output).toContain('Agents');
+        });
+        it('switches to preview pane when pressing 4', () => {
+            const { lastFrame, stdin } = render(_jsx(App, {}));
+            stdin.write('4');
+            const output = lastFrame();
+            expect(output).toContain('Preview');
+        });
+        it('switches back to chat pane when pressing 1', () => {
+            const { lastFrame, stdin } = render(_jsx(App, {}));
+            stdin.write('2'); // switch away
+            stdin.write('1'); // switch back
+            const output = lastFrame();
+            expect(output).toContain('Chat');
+        });
+        it('cycles panes with tab', () => {
+            const { lastFrame, stdin } = render(_jsx(App, {}));
+            // Tab key
+            stdin.write('\t');
+            const output = lastFrame();
+            // Should have cycled to next pane
+            expect(output).toBeDefined();
+        });
+    });
+    describe('TDD branding', () => {
+        it('shows TDD indicator in header', () => {
+            const { lastFrame } = render(_jsx(App, {}));
+            const output = lastFrame();
+            expect(output).toContain('TDD');
+        });
+    });
+});

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

@@ -0,0 +1,18 @@
+import { ChildProcess } from 'child_process';
+type AgentStatus = 'idle' | 'working' | 'done' | 'error';
+interface Agent {
+    id: number;
+    status: AgentStatus;
+    task: string | null;
+    issueNumber: number | null;
+    output: string[];
+    process: ChildProcess | null;
+}
+interface AgentsPaneProps {
+    isActive: boolean;
+    isTTY?: boolean;
+    onTaskComplete?: (issueNumber: number) => void;
+}
+export declare function AgentsPane({ isActive, isTTY, onTaskComplete }: AgentsPaneProps): import("react/jsx-runtime").JSX.Element;
+export declare function getIdleAgent(agents: Agent[]): Agent | undefined;
+export {};

package/dashboard/dist/components/AgentsPane.js

@@ -0,0 +1,77 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState, useCallback } from 'react';
+import Spinner from 'ink-spinner';
+import { spawn } from 'child_process';
+const MAX_AGENTS = 3;
+export function AgentsPane({ isActive, isTTY = true, onTaskComplete }) {
+    const [agents, setAgents] = useState([
+        { id: 1, status: 'idle', task: null, issueNumber: null, output: [], process: null },
+        { id: 2, status: 'idle', task: null, issueNumber: null, output: [], process: null },
+        { id: 3, status: 'idle', task: null, issueNumber: null, output: [], process: null },
+    ]);
+    const assignTask = useCallback((agentId, task, issueNumber) => {
+        setAgents(prev => prev.map(agent => {
+            if (agent.id !== agentId)
+                return agent;
+            // Spawn Claude Code process for this task
+            const proc = spawn('claude', ['-p', `Work on task: ${task}. When done, output TASK_COMPLETE.`], {
+                cwd: process.cwd(),
+                stdio: ['pipe', 'pipe', 'pipe']
+            });
+            const output = [];
+            proc.stdout?.on('data', (data) => {
+                const text = data.toString();
+                output.push(text);
+                // Check if task is complete
+                if (text.includes('TASK_COMPLETE')) {
+                    setAgents(prev => prev.map(a => a.id === agentId ? { ...a, status: 'done', output } : a));
+                    onTaskComplete?.(issueNumber);
+                }
+            });
+            proc.stderr?.on('data', (data) => {
+                output.push(`[ERROR] ${data.toString()}`);
+            });
+            proc.on('close', (code) => {
+                setAgents(prev => prev.map(a => a.id === agentId ? {
+                    ...a,
+                    status: code === 0 ? 'done' : 'error',
+                    process: null
+                } : a));
+            });
+            return {
+                ...agent,
+                status: 'working',
+                task,
+                issueNumber,
+                output: [],
+                process: proc
+            };
+        }));
+    }, [onTaskComplete]);
+    const stopAgent = useCallback((agentId) => {
+        setAgents(prev => prev.map(agent => {
+            if (agent.id !== agentId)
+                return agent;
+            agent.process?.kill();
+            return { ...agent, status: 'idle', task: null, issueNumber: null, process: null };
+        }));
+    }, []);
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        // 1, 2, 3 to select agent
+        // s to stop selected agent
+        const agentNum = parseInt(input);
+        if (agentNum >= 1 && agentNum <= 3) {
+            const agent = agents[agentNum - 1];
+            if (agent.status === 'working') {
+                stopAgent(agentNum);
+            }
+        }
+    }, { isActive: isTTY });
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { bold: true, children: ["Agents (", agents.filter(a => a.status === 'working').length, "/", MAX_AGENTS, " active)"] }) }), agents.map((agent) => (_jsxs(Box, { marginBottom: 1, children: [_jsxs(Text, { color: "gray", children: ["[", agent.id, "] "] }), agent.status === 'idle' && (_jsx(Text, { color: "gray", children: "Idle" })), agent.status === 'working' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "yellow", children: _jsx(Spinner, { type: "dots" }) }), _jsxs(Text, { color: "cyan", children: [" #", agent.issueNumber, ": "] }), _jsxs(Text, { children: [agent.task?.slice(0, 30), "..."] })] })), agent.status === 'done' && (_jsxs(_Fragment, { children: [_jsx(Text, { color: "green", children: "Done " }), _jsxs(Text, { color: "gray", children: ["#", agent.issueNumber] })] })), agent.status === 'error' && (_jsx(Text, { color: "red", children: "Error" }))] }, agent.id))), isActive && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "[1-3] Stop agent" }) }))] }));
+}
+export function getIdleAgent(agents) {
+    return agents.find(a => a.status === 'idle');
+}

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

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

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { AgentsPane, getIdleAgent } from './AgentsPane.js';
+describe('AgentsPane', () => {
+    describe('getIdleAgent', () => {
+        it('returns first idle agent', () => {
+            const agents = [
+                { id: 1, status: 'working', task: 'task1', issueNumber: 1, output: [], process: null },
+                { id: 2, status: 'idle', task: null, issueNumber: null, output: [], process: null },
+                { id: 3, status: 'idle', task: null, issueNumber: null, output: [], process: null },
+            ];
+            const idle = getIdleAgent(agents);
+            expect(idle?.id).toBe(2);
+        });
+        it('returns undefined when all agents busy', () => {
+            const agents = [
+                { id: 1, status: 'working', task: 'task1', issueNumber: 1, output: [], process: null },
+                { id: 2, status: 'working', task: 'task2', issueNumber: 2, output: [], process: null },
+                { id: 3, status: 'done', task: 'task3', issueNumber: 3, output: [], process: null },
+            ];
+            const idle = getIdleAgent(agents);
+            expect(idle).toBeUndefined();
+        });
+        it('returns undefined for empty array', () => {
+            const idle = getIdleAgent([]);
+            expect(idle).toBeUndefined();
+        });
+    });
+    describe('component rendering', () => {
+        it('renders with all agents idle', () => {
+            const { lastFrame } = render(_jsx(AgentsPane, { isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Agents');
+            expect(output).toContain('0/3 active');
+            expect(output).toContain('[1]');
+            expect(output).toContain('[2]');
+            expect(output).toContain('[3]');
+            expect(output).toContain('Idle');
+        });
+        it('shows controls when active', () => {
+            const { lastFrame } = render(_jsx(AgentsPane, { isActive: true }));
+            const output = lastFrame();
+            expect(output).toContain('[1-3] Stop agent');
+        });
+        it('hides controls when inactive', () => {
+            const { lastFrame } = render(_jsx(AgentsPane, { isActive: false }));
+            const output = lastFrame();
+            expect(output).not.toContain('[1-3] Stop agent');
+        });
+    });
+});

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

@@ -0,0 +1,6 @@
+interface ChatPaneProps {
+    isActive: boolean;
+    isTTY?: boolean;
+}
+export declare function ChatPane({ isActive, isTTY }: ChatPaneProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dashboard/dist/components/ChatPane.js

@@ -0,0 +1,34 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { useState, useCallback } from 'react';
+export function ChatPane({ isActive, isTTY = true }) {
+    const [messages, setMessages] = useState([
+        { role: 'system', content: 'TDD Dashboard ready. Type a message to start.' }
+    ]);
+    const [input, setInput] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const sendMessage = useCallback(async (text) => {
+        if (!text.trim() || isLoading)
+            return;
+        // Add user message
+        setMessages(prev => [...prev, { role: 'user', content: text }]);
+        setInput('');
+        setIsLoading(true);
+        // TODO: Integrate with Claude Code CLI
+        // For now, simulate a response
+        setTimeout(() => {
+            setMessages(prev => [...prev, {
+                    role: 'assistant',
+                    content: `Received: "${text}"\n\nClaude Code integration coming soon...`
+                }]);
+            setIsLoading(false);
+        }, 500);
+    }, [isLoading]);
+    const handleSubmit = useCallback((value) => {
+        sendMessage(value);
+    }, [sendMessage]);
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, padding: 1, children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, overflowY: "hidden", children: [messages.slice(-10).map((msg, i) => (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: msg.role === 'user' ? 'green' :
+                                msg.role === 'assistant' ? 'cyan' :
+                                    'gray', children: [msg.role === 'user' ? '> ' : msg.role === 'assistant' ? '  ' : '# ', msg.content] }) }, i))), isLoading && (_jsx(Text, { color: "yellow", children: "Thinking..." }))] }), _jsxs(Box, { borderStyle: "round", borderColor: isActive ? 'green' : 'gray', paddingX: 1, children: [_jsx(Text, { color: "green", children: "> " }), isTTY ? (_jsx(TextInput, { value: input, onChange: setInput, onSubmit: handleSubmit, focus: isActive, placeholder: "Type a message..." })) : (_jsx(Text, { color: "gray", children: "Input disabled (no TTY)" }))] })] }));
+}

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

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

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect } from 'vitest';
+import { render } from 'ink-testing-library';
+import { ChatPane } from './ChatPane.js';
+describe('ChatPane', () => {
+    describe('initial render', () => {
+        it('shows welcome message', () => {
+            const { lastFrame } = render(_jsx(ChatPane, { isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('TDD Dashboard ready');
+        });
+        it('shows input prompt', () => {
+            const { lastFrame } = render(_jsx(ChatPane, { isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('>');
+        });
+    });
+    describe('active state', () => {
+        it('renders without error when active', () => {
+            const { lastFrame } = render(_jsx(ChatPane, { isActive: true }));
+            expect(lastFrame()).toBeDefined();
+        });
+        it('renders without error when inactive', () => {
+            const { lastFrame } = render(_jsx(ChatPane, { isActive: false }));
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+    describe('message display', () => {
+        it('shows system messages with # prefix', () => {
+            const { lastFrame } = render(_jsx(ChatPane, { isActive: false }));
+            const output = lastFrame();
+            // System message has # prefix
+            expect(output).toContain('#');
+        });
+    });
+});

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

@@ -0,0 +1,16 @@
+interface Issue {
+    number: number;
+    title: string;
+    state: 'open' | 'closed';
+    labels: string[];
+    assignee: string | null;
+}
+interface GitHubPaneProps {
+    isActive: boolean;
+    isTTY?: boolean;
+    onAssignToAgent?: (issue: Issue) => void;
+}
+export declare function GitHubPane({ isActive, isTTY, onAssignToAgent }: GitHubPaneProps): import("react/jsx-runtime").JSX.Element;
+export declare function syncTaskToGitHub(title: string, body: string): Promise<number | null>;
+export declare function markIssueComplete(number: number): Promise<void>;
+export {};

package/dashboard/dist/components/GitHubPane.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useState, useEffect, useCallback } from 'react';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+const execAsync = promisify(exec);
+export function GitHubPane({ isActive, isTTY = true, onAssignToAgent }) {
+    const [issues, setIssues] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const fetchIssues = useCallback(async () => {
+        try {
+            // Use gh CLI to fetch issues
+            const { stdout } = await execAsync('gh issue list --label "tdd" --state open --json number,title,state,labels,assignee --limit 20', { cwd: process.cwd() });
+            const parsed = JSON.parse(stdout || '[]');
+            setIssues(parsed.map((i) => ({
+                number: i.number,
+                title: i.title,
+                state: i.state,
+                labels: i.labels?.map((l) => l.name) || [],
+                assignee: i.assignee?.login || null
+            })));
+            setError(null);
+        }
+        catch (e) {
+            // Try without label filter
+            try {
+                const { stdout } = await execAsync('gh issue list --state open --json number,title,state,labels,assignee --limit 10', { cwd: process.cwd() });
+                const parsed = JSON.parse(stdout || '[]');
+                setIssues(parsed.map((i) => ({
+                    number: i.number,
+                    title: i.title,
+                    state: i.state,
+                    labels: i.labels?.map((l) => l.name) || [],
+                    assignee: i.assignee?.login || null
+                })));
+                setError(null);
+            }
+            catch (e2) {
+                setError('gh CLI not available or not in a repo');
+                setIssues([]);
+            }
+        }
+        setLoading(false);
+    }, []);
+    useEffect(() => {
+        fetchIssues();
+        const interval = setInterval(fetchIssues, 30000); // Refresh every 30s
+        return () => clearInterval(interval);
+    }, [fetchIssues]);
+    const createIssue = useCallback(async (title, body) => {
+        try {
+            await execAsync(`gh issue create --title "${title}" --body "${body}" --label "tdd"`, { cwd: process.cwd() });
+            fetchIssues();
+        }
+        catch (e) {
+            setError('Failed to create issue');
+        }
+    }, [fetchIssues]);
+    const closeIssue = useCallback(async (number) => {
+        try {
+            await execAsync(`gh issue close ${number}`, { cwd: process.cwd() });
+            fetchIssues();
+        }
+        catch (e) {
+            setError('Failed to close issue');
+        }
+    }, [fetchIssues]);
+    useInput((input, key) => {
+        if (!isActive)
+            return;
+        if (key.upArrow && selectedIndex > 0) {
+            setSelectedIndex(prev => prev - 1);
+        }
+        if (key.downArrow && selectedIndex < issues.length - 1) {
+            setSelectedIndex(prev => prev + 1);
+        }
+        if (input === 'a' && issues[selectedIndex]) {
+            onAssignToAgent?.(issues[selectedIndex]);
+        }
+        if (input === 'c' && issues[selectedIndex]) {
+            closeIssue(issues[selectedIndex].number);
+        }
+        if (input === 'r') {
+            setLoading(true);
+            fetchIssues();
+        }
+    }, { isActive: isTTY });
+    if (loading) {
+        return (_jsx(Box, { padding: 1, children: _jsx(Text, { color: "gray", children: "Loading issues..." }) }));
+    }
+    if (error) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { color: "red", children: error }), _jsx(Text, { dimColor: true, children: "Make sure gh CLI is installed and authenticated." })] }));
+    }
+    if (issues.length === 0) {
+        return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "No open issues." }), _jsx(Text, { dimColor: true, children: "Create issues with 'gh issue create'" })] }));
+    }
+    return (_jsxs(Box, { padding: 1, flexDirection: "column", children: [issues.slice(0, 6).map((issue, idx) => (_jsxs(Box, { children: [_jsx(Text, { color: idx === selectedIndex && isActive ? 'cyan' : 'white', children: idx === selectedIndex && isActive ? '> ' : '  ' }), _jsxs(Text, { color: "green", children: ["#", issue.number, " "] }), _jsxs(Text, { children: [issue.title.slice(0, 35), issue.title.length > 35 ? '...' : ''] }), issue.labels.includes('in-progress') && (_jsx(Text, { color: "yellow", children: " [WIP]" }))] }, issue.number))), isActive && (_jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Text, { dimColor: true, children: "[a] Assign to agent | [c] Close | [r] Refresh" }) }))] }));
+}
+// Helper to sync a task to GitHub
+export async function syncTaskToGitHub(title, body) {
+    try {
+        const { stdout } = await promisify(exec)(`gh issue create --title "${title}" --body "${body}" --label "tdd" --json number`, { cwd: process.cwd() });
+        const parsed = JSON.parse(stdout);
+        return parsed.number;
+    }
+    catch (e) {
+        return null;
+    }
+}
+export async function markIssueComplete(number) {
+    try {
+        await promisify(exec)(`gh issue close ${number} --comment "Completed by TDD agent"`, {
+            cwd: process.cwd()
+        });
+    }
+    catch (e) {
+        // Ignore errors
+    }
+}

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

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

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

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from 'ink-testing-library';
+import { GitHubPane } from './GitHubPane.js';
+// Mock child_process to avoid actual gh calls
+vi.mock('child_process', () => ({
+    exec: vi.fn((cmd, opts, cb) => {
+        if (typeof opts === 'function') {
+            cb = opts;
+        }
+        // Simulate gh CLI not available by default
+        const error = new Error('gh not found');
+        if (cb)
+            cb(error, '', '');
+        return { stdout: null, stderr: null };
+    }),
+}));
+vi.mock('util', async () => {
+    const actual = await vi.importActual('util');
+    return {
+        ...actual,
+        promisify: (fn) => async (...args) => {
+            return new Promise((resolve, reject) => {
+                fn(...args, (err, stdout, stderr) => {
+                    if (err)
+                        reject(err);
+                    else
+                        resolve({ stdout, stderr });
+                });
+            });
+        },
+    };
+});
+describe('GitHubPane', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('loading state', () => {
+        it('shows loading message initially', () => {
+            const { lastFrame } = render(_jsx(GitHubPane, { isActive: false }));
+            const output = lastFrame();
+            expect(output).toContain('Loading issues...');
+        });
+    });
+    describe('error state', () => {
+        it('shows error when gh CLI fails', async () => {
+            const { lastFrame } = render(_jsx(GitHubPane, { isActive: false }));
+            // Wait for effect to run
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            expect(output).toContain('gh CLI not available');
+        });
+        it('shows install hint on error', async () => {
+            const { lastFrame } = render(_jsx(GitHubPane, { isActive: false }));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            expect(output).toContain('Make sure gh CLI is installed');
+        });
+    });
+    describe('controls', () => {
+        it('shows controls when active and has issues', async () => {
+            // This test would need proper mocking of successful gh response
+            // For now, we test that the component doesn't crash
+            const { lastFrame } = render(_jsx(GitHubPane, { isActive: true }));
+            await new Promise(resolve => setTimeout(resolve, 100));
+            const output = lastFrame();
+            // Either shows controls or error state
+            expect(output).toBeDefined();
+        });
+    });
+    describe('callback', () => {
+        it('accepts onAssignToAgent callback', () => {
+            const mockCallback = vi.fn();
+            const { lastFrame } = render(_jsx(GitHubPane, { isActive: true, onAssignToAgent: mockCallback }));
+            // Component should render without error
+            expect(lastFrame()).toBeDefined();
+        });
+    });
+});