wiggum-cli 0.16.0 → 0.17.1

package/dist/tui/screens/AgentScreen.js

@@ -0,0 +1,209 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AgentScreen - TUI dashboard for the autonomous agent mode
+ *
+ * Displays issue processing status, a loop monitor, and an agent log.
+ * Two-column layout on wide terminals (>=65 cols), single-column on narrow.
+ *
+ * When a loop is running, the right panel splits: loop monitor (top) + log (bottom).
+ * When no loop is running, the right panel shows only the agent log.
+ *
+ * Wired to the orchestrator via useAgentOrchestrator hook, which
+ * interprets tool calls into structured React state. Console is patched
+ * on mount to prevent Ink rendering corruption.
+ *
+ * Wrapped in AppShell for consistent layout with header and footer.
+ */
+import { useEffect, useCallback, useState, useRef } from 'react';
+import { Box, Text, useInput, useStdout } from 'ink';
+import { AppShell } from '../components/AppShell.js';
+import { ActivityFeed } from '../components/ActivityFeed.js';
+import { colors, phase, theme } from '../theme.js';
+import { useAgentOrchestrator } from '../hooks/useAgentOrchestrator.js';
+import { formatNumber } from '../utils/loop-status.js';
+const NARROW_BREAKPOINT = 65;
+const SECTION_CHAR = '\u2500'; // ─
+function phaseLabel(p, activeIssue) {
+    switch (p) {
+        case 'idle': return 'Idle';
+        case 'planning': return 'Planning...';
+        case 'generating_spec': return 'Generating spec...';
+        case 'running_loop': return activeIssue?.loopPhase ?? 'Running loop...';
+        case 'reporting': return 'Reporting...';
+        case 'reflecting': return 'Reflecting...';
+        default: return String(p);
+    }
+}
+function logLevelColor(level) {
+    switch (level) {
+        case 'info': return colors.blue;
+        case 'warn': return colors.orange;
+        case 'error': return colors.pink;
+        case 'success': return colors.green;
+        default: return colors.gray;
+    }
+}
+/**
+ * Build a working status string from active issue state.
+ * Issue number/title is already shown in Active Issue panel — just show phase.
+ */
+function workingLabel(activeIssue) {
+    if (!activeIssue)
+        return 'Starting...';
+    return phaseLabel(activeIssue.phase, activeIssue);
+}
+/**
+ * Build the footer phase string from current state.
+ * Shows loop sub-phase and iteration instead of duplicating issue title.
+ */
+function footerPhase(status, activeIssue, completedCount, cancelling) {
+    if (cancelling)
+        return 'Cancelling...';
+    if (status === 'idle')
+        return 'Waiting';
+    if (status === 'complete')
+        return `Done \u2014 ${completedCount} issue${completedCount === 1 ? '' : 's'} processed`;
+    if (status === 'error')
+        return 'Error';
+    if (!activeIssue)
+        return 'Starting...';
+    const loopDetail = activeIssue.loopPhase ? ` \u00b7 ${activeIssue.loopPhase}` : '';
+    const iter = activeIssue.loopIterations != null ? ` (iter ${activeIssue.loopIterations})` : '';
+    return `#${activeIssue.issueNumber}${loopDetail}${iter}`;
+}
+/**
+ * Horizontal section separator line
+ */
+function SectionSeparator({ width }) {
+    const lineWidth = Math.max(1, width - 2); // account for panel padding
+    return _jsx(Text, { color: colors.separator, children: SECTION_CHAR.repeat(lineWidth) });
+}
+/**
+ * Issues panel content — shared between wide and narrow layouts
+ */
+function IssuesPanel({ activeIssue, queue, completed, panelWidth, }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: colors.yellow, children: "Active Issue" }), activeIssue ? (_jsxs(Box, { flexDirection: "column", marginLeft: 1, children: [_jsxs(Text, { children: [_jsxs(Text, { color: colors.blue, children: ["#", activeIssue.issueNumber] }), _jsxs(Text, { children: [" ", activeIssue.title] })] }), _jsxs(Text, { dimColor: true, children: [phase.active, " ", phaseLabel(activeIssue.phase, activeIssue), activeIssue.loopIterations != null ? ` (iter ${activeIssue.loopIterations})` : ''] })] })) : (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { dimColor: true, children: "No active issue" }) })), _jsx(SectionSeparator, { width: panelWidth }), _jsxs(Text, { bold: true, color: colors.yellow, children: ["Queue", _jsxs(Text, { dimColor: true, children: [" (", queue.length, ")"] })] }), queue.length === 0 ? (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { dimColor: true, children: "Empty" }) })) : (queue.slice(0, 5).map((issue) => (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { children: [_jsxs(Text, { dimColor: true, children: ["#", issue.issueNumber] }), _jsxs(Text, { children: [" ", issue.title] })] }) }, issue.issueNumber)))), queue.length > 5 && (_jsx(Box, { marginLeft: 1, children: _jsxs(Text, { dimColor: true, children: ["...and ", queue.length - 5, " more"] }) })), _jsx(SectionSeparator, { width: panelWidth }), _jsxs(Text, { bold: true, color: colors.yellow, children: ["Completed", _jsxs(Text, { dimColor: true, children: [" (", completed.length, ")"] })] }), completed.length === 0 ? (_jsx(Box, { marginLeft: 1, children: _jsx(Text, { dimColor: true, children: "None yet" }) })) : (completed.slice(-5).map((issue) => (_jsxs(Box, { marginLeft: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: issue.error ? colors.pink : colors.green, children: issue.error ? phase.error : phase.complete }), _jsxs(Text, { dimColor: true, children: [" #", issue.issueNumber] }), _jsxs(Text, { children: [" ", issue.title] })] }), issue.prUrl && (_jsxs(Text, { dimColor: true, children: ["  \\u2514 PR: ", issue.prUrl] }))] }, issue.issueNumber))))] }));
+}
+/**
+ * Log panel content — shared between wide and narrow layouts.
+ * tailSize controls how many entries to show (shrinks when monitor is visible).
+ */
+function LogPanel({ logEntries, tailSize = 20 }) {
+    const visible = logEntries.slice(-tailSize);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: colors.yellow, children: "Agent Log" }), visible.length === 0 ? (_jsx(Text, { dimColor: true, children: "Waiting for agent activity..." })) : (visible.map((entry, index) => (_jsx(Box, { children: _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: entry.timestamp.slice(11, 19) }), _jsx(Text, { children: " " }), _jsx(Text, { color: logLevelColor(entry.level), children: entry.message })] }) }, `${entry.timestamp}-${index}`))))] }));
+}
+/**
+ * ProgressBar — inline progress indicator
+ */
+function ProgressBar({ percent, width = 18 }) {
+    const safePercent = Math.max(0, Math.min(100, percent));
+    const filled = Math.round((safePercent / 100) * width);
+    const empty = Math.max(0, width - filled);
+    return (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: colors.green, children: '\u2588'.repeat(filled) }), _jsx(Text, { dimColor: true, children: '\u2591'.repeat(empty) })] }));
+}
+function formatDuration(start) {
+    const seconds = Math.max(0, Math.floor((Date.now() - start) / 1000));
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins}:${String(secs).padStart(2, '0')}`;
+}
+const PROGRESS_LABEL_WIDTH = 17;
+const padLabel = (label) => label.padEnd(PROGRESS_LABEL_WIDTH);
+/**
+ * Loop Monitor panel — shows progress, commits, and activity for the active loop
+ */
+function LoopMonitorPanel({ monitor, featureName, panelWidth, }) {
+    const { loopStatus, tasks, branch, recentCommits, activityEvents, startTime } = monitor;
+    const totalTokens = loopStatus.tokensInput + loopStatus.tokensOutput + loopStatus.cacheCreate + loopStatus.cacheRead;
+    const totalTasks = tasks.tasksDone + tasks.tasksPending;
+    const totalE2e = tasks.e2eDone + tasks.e2ePending;
+    const totalAll = totalTasks + totalE2e;
+    const doneAll = tasks.tasksDone + tasks.e2eDone;
+    const percentTasks = totalTasks > 0 ? Math.round((tasks.tasksDone / totalTasks) * 100) : 0;
+    const percentE2e = totalE2e > 0 ? Math.round((tasks.e2eDone / totalE2e) * 100) : 0;
+    const percentAll = totalAll > 0 ? Math.round((doneAll / totalAll) * 100) : 0;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, color: colors.yellow, children: ["Loop Monitor ", _jsxs(Text, { dimColor: true, children: ["\\u2014 ", featureName] })] }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { children: "Phase: " }), _jsx(Text, { color: colors.yellow, children: loopStatus.phase }), _jsx(Text, { dimColor: true, children: theme.statusLine.separator }), _jsx(Text, { children: "Iter: " }), _jsx(Text, { color: colors.green, children: loopStatus.iteration }), _jsxs(Text, { dimColor: true, children: ["/", loopStatus.maxIterations || '-'] }), _jsx(Text, { dimColor: true, children: theme.statusLine.separator }), _jsx(Text, { children: "Branch: " }), _jsx(Text, { color: colors.blue, children: branch })] }), totalTokens > 0 && (_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { children: "Tokens: " }), _jsx(Text, { color: colors.pink, children: formatNumber(totalTokens) }), _jsxs(Text, { dimColor: true, children: [" (in:", formatNumber(loopStatus.tokensInput), " out:", formatNumber(loopStatus.tokensOutput), " cache:", formatNumber(loopStatus.cacheRead), ")"] }), _jsx(Text, { dimColor: true, children: theme.statusLine.separator }), _jsxs(Text, { dimColor: true, children: ["Elapsed: ", formatDuration(startTime)] })] })), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 1, children: [_jsx(Text, { bold: true, children: padLabel('Implementation:') }), _jsx(ProgressBar, { percent: percentTasks }), _jsxs(Text, { children: [String(percentTasks).padStart(3), "%"] }), _jsxs(Text, { color: colors.green, children: ['\u2713', " ", tasks.tasksDone] }), _jsxs(Text, { color: colors.yellow, children: ['\u25cb', " ", tasks.tasksPending] })] }), totalE2e > 0 && (_jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 1, children: [_jsx(Text, { bold: true, children: padLabel('E2E Tests:') }), _jsx(ProgressBar, { percent: percentE2e }), _jsxs(Text, { children: [String(percentE2e).padStart(3), "%"] }), _jsxs(Text, { color: colors.green, children: ['\u2713', " ", tasks.e2eDone] }), _jsxs(Text, { color: colors.yellow, children: ['\u25cb', " ", tasks.e2ePending] })] })), _jsxs(Box, { flexDirection: "row", alignItems: "center", gap: 1, children: [_jsx(Text, { bold: true, children: padLabel('Overall:') }), _jsx(ProgressBar, { percent: percentAll }), _jsxs(Text, { children: [String(percentAll).padStart(3), "%"] }), _jsxs(Text, { color: colors.green, children: ['\u2713', " ", doneAll] }), _jsxs(Text, { color: colors.yellow, children: ['\u25cb', " ", totalAll - doneAll] })] })] }), recentCommits.length > 0 && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Recent Commits" }), recentCommits.map((c) => (_jsx(Box, { flexDirection: "row", children: _jsxs(Text, { dimColor: true, children: ["  ", c.hash, " ", c.title] }) }, c.hash)))] })), activityEvents.length > 0 && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Activity" }), _jsx(ActivityFeed, { events: activityEvents, maxEvents: 6 })] }))] }));
+}
+const REVIEW_MODES = ['manual', 'auto', 'merge'];
+export function AgentScreen({ header, projectRoot, agentOptions, onExit, }) {
+    const { stdout } = useStdout();
+    const columns = stdout?.columns ?? 80;
+    const isNarrow = columns < NARROW_BREAKPOINT;
+    // Patch console on mount to prevent Ink rendering corruption
+    // from any console.* calls in the orchestrator or AI SDK.
+    useEffect(() => {
+        let restore;
+        import('patch-console').then((mod) => {
+            const patchConsole = mod.default;
+            restore = patchConsole(() => {
+                // Swallow console output — Ink renders its own UI
+            });
+        }).catch(() => {
+            // patch-console not available — continue without it
+        });
+        return () => {
+            restore?.();
+        };
+    }, []);
+    const { status, activeIssue, queue, completed, logEntries, loopMonitor, error, abort } = useAgentOrchestrator({
+        projectRoot,
+        modelOverride: agentOptions?.modelOverride,
+        maxItems: agentOptions?.maxItems,
+        maxSteps: agentOptions?.maxSteps,
+        labels: agentOptions?.labels,
+        reviewMode: agentOptions?.reviewMode,
+        dryRun: agentOptions?.dryRun,
+    });
+    // Track whether the user requested cancellation
+    const [cancelling, setCancelling] = useState(false);
+    const [reviewMode, setReviewMode] = useState(agentOptions?.reviewMode ?? 'manual');
+    const onExitRef = useRef(onExit);
+    onExitRef.current = onExit;
+    // When cancelling and the orchestrator finishes, exit
+    useEffect(() => {
+        if (cancelling && (status === 'complete' || status === 'error')) {
+            onExitRef.current?.();
+        }
+    }, [cancelling, status]);
+    const isWorking = status === 'running' || cancelling;
+    const hasLoopMonitor = loopMonitor !== null && activeIssue?.phase === 'running_loop';
+    useInput(useCallback((input, key) => {
+        if (input === 'q' || key.escape) {
+            if (status === 'running') {
+                // Signal abort — stay mounted so cleanup can propagate to subprocesses
+                setCancelling(true);
+                abort();
+            }
+            else {
+                // Already done — exit immediately
+                onExitRef.current?.();
+            }
+            return;
+        }
+        // Shift+R cycles review mode (manual → auto → merge)
+        if (input === 'R') {
+            setReviewMode((prev) => {
+                const idx = REVIEW_MODES.indexOf(prev);
+                return REVIEW_MODES[(idx + 1) % REVIEW_MODES.length];
+            });
+        }
+    }, [abort, status]));
+    const tips = cancelling
+        ? 'Cancelling...'
+        : 'q exit \u2502 Esc back \u2502 Shift+R review mode';
+    const footerStatus = {
+        action: 'Agent',
+        phase: footerPhase(status, activeIssue, completed.length, cancelling),
+        extra: `review: ${reviewMode}`,
+    };
+    if (isNarrow) {
+        const panelWidth = Math.max(20, columns - 4);
+        return (_jsx(AppShell, { header: header, tips: tips, isWorking: isWorking, workingStatus: workingLabel(activeIssue), footerStatus: footerStatus, children: _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.brown, paddingX: 1, children: _jsx(IssuesPanel, { activeIssue: activeIssue, queue: queue, completed: completed, panelWidth: panelWidth }) }), hasLoopMonitor && (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.brown, paddingX: 1, children: _jsx(LoopMonitorPanel, { monitor: loopMonitor, featureName: activeIssue.loopFeatureName ?? `issue-${activeIssue.issueNumber}`, panelWidth: panelWidth }) })), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.brown, paddingX: 1, children: _jsx(LogPanel, { logEntries: logEntries, tailSize: hasLoopMonitor ? 8 : 20 }) })] }) }));
+    }
+    // Wide layout: two-column
+    const leftWidth = Math.max(30, Math.floor(columns * 0.4));
+    const rightWidth = Math.max(30, columns - leftWidth - 3);
+    const leftInnerWidth = leftWidth - 4; // border (2) + paddingX (2)
+    const rightInnerWidth = rightWidth - 4;
+    return (_jsx(AppShell, { header: header, tips: tips, isWorking: isWorking, workingStatus: workingLabel(activeIssue), footerStatus: footerStatus, children: _jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Box, { flexDirection: "column", width: leftWidth, borderStyle: "round", borderColor: colors.brown, paddingX: 1, children: _jsx(IssuesPanel, { activeIssue: activeIssue, queue: queue, completed: completed, panelWidth: leftInnerWidth }) }), _jsxs(Box, { flexDirection: "column", width: rightWidth, children: [hasLoopMonitor && (_jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.brown, paddingX: 1, marginBottom: 1, children: _jsx(LoopMonitorPanel, { monitor: loopMonitor, featureName: activeIssue.loopFeatureName ?? `issue-${activeIssue.issueNumber}`, panelWidth: rightInnerWidth }) })), _jsx(Box, { flexDirection: "column", borderStyle: "round", borderColor: colors.brown, paddingX: 1, children: _jsx(LogPanel, { logEntries: logEntries, tailSize: hasLoopMonitor ? 8 : 20 }) })] })] }) }));
+}

package/dist/tui/screens/InitScreen.js

@@ -186,6 +186,10 @@ export function InitScreen({ header, projectRoot, sessionState, onComplete, onCa
                 existingFiles: 'backup',
                 generateConfig: true,
                 verbose: false,
+                customVariables: {
+                    ...(state.provider ? { agentProvider: state.provider } : {}),
+                    ...(state.model ? { agentModel: state.model } : {}),
+                },
             });
             try {
                 setGenerating('Writing configuration files...');

package/dist/tui/screens/InterviewScreen.d.ts

@@ -34,6 +34,8 @@ export interface InterviewScreenProps {
     scanResult?: ScanResult;
     /** Path to specs directory (relative to project root, defaults to '.ralph/specs') */
     specsPath?: string;
+    /** References to auto-add during context phase (from CLI --issue/--context flags) */
+    initialReferences?: string[];
     /** Called when spec generation is complete - receives spec, messages, and specPath */
     onComplete: (spec: string, messages: Message[], specPath: string) => void;
     /** Called when user cancels the interview */
@@ -45,4 +47,4 @@ export interface InterviewScreenProps {
  * The main screen for the /new command interview flow. Combines all TUI
  * components within an AppShell layout.
  */
-export declare function InterviewScreen({ header, featureName, projectRoot, provider, model, scanResult, specsPath, onComplete, onCancel, }: InterviewScreenProps): React.ReactElement;
+export declare function InterviewScreen({ header, featureName, projectRoot, provider, model, scanResult, specsPath, initialReferences, onComplete, onCancel, }: InterviewScreenProps): React.ReactElement;

package/dist/tui/screens/InterviewScreen.js

@@ -14,11 +14,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * shows SpecCompletionSummary inline before returning to shell.
  */
 import { useEffect, useCallback, useRef, useState } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { Box, Text, useInput, useStdout } from 'ink';
 import { logger } from '../../utils/logger.js';
 import { MessageList } from '../components/MessageList.js';
 import { ChatInput } from '../components/ChatInput.js';
 import { MultiSelect } from '../components/MultiSelect.js';
+import { IssuePicker } from '../components/IssuePicker.js';
 import { AppShell } from '../components/AppShell.js';
 import { SpecCompletionSummary } from '../components/SpecCompletionSummary.js';
 import { useSpecGenerator, PHASE_CONFIGS, TOTAL_DISPLAY_PHASES, } from '../hooks/useSpecGenerator.js';
@@ -28,13 +29,15 @@ import { loadContext, toScanResultFromPersisted, getContextAge, } from '../../co
 import { join } from 'node:path';
 import { initTracing, flushTracing } from '../../utils/tracing.js';
 import { resolveOptionLabels } from '../types/interview.js';
+import { isGhInstalled, detectGitHubRemote, listRepoIssues, fetchGitHubIssue, } from '../../utils/github.js';
+import { clearScreen } from '../utils/clear-screen.js';
 /**
  * InterviewScreen component
  *
  * The main screen for the /new command interview flow. Combines all TUI
  * components within an AppShell layout.
  */
-export function InterviewScreen({ header, featureName, projectRoot, provider, model, scanResult, specsPath = '.ralph/specs', onComplete, onCancel, }) {
+export function InterviewScreen({ header, featureName, projectRoot, provider, model, scanResult, specsPath = '.ralph/specs', initialReferences, onComplete, onCancel, }) {
     const { state, initialize, addMessage, addStreamingMessage, updateStreamingMessage, completeStreamingMessage, startToolCall, completeToolCall, setPhase, setGeneratedSpec, setError, setWorking, setReady, } = useSpecGenerator();
     const orchestratorRef = useRef(null);
     const isStreamingRef = useRef(false);
@@ -47,6 +50,13 @@ export function InterviewScreen({ header, featureName, projectRoot, provider, mo
     messagesRef.current = state.messages;
     const [toolCallsExpanded, setToolCallsExpanded] = useState(false);
     const [currentQuestion, setCurrentQuestion] = useState(null);
+    const { stdout } = useStdout();
+    const [issuePickerVisible, setIssuePickerVisible] = useState(false);
+    const [issuePickerIssues, setIssuePickerIssues] = useState([]);
+    const [issuePickerLoading, setIssuePickerLoading] = useState(false);
+    const [issuePickerError, setIssuePickerError] = useState();
+    const [issuePickerRepo, setIssuePickerRepo] = useState(null);
+    const [hasReferences, setHasReferences] = useState(false);
     // Completion state: when spec is done, show summary inline
     const [completionData, setCompletionData] = useState(null);
     useEffect(() => {
@@ -202,6 +212,117 @@ export function InterviewScreen({ header, featureName, projectRoot, provider, mo
             orchestratorRef.current = null;
         };
     }, [featureName, projectRoot, provider, model, scanResult, specsPath]);
+    // Process initial references from CLI --issue/--context flags
+    const initialRefsProcessed = useRef(false);
+    useEffect(() => {
+        const orchestrator = orchestratorRef.current;
+        if (!orchestrator || !initialReferences?.length || initialRefsProcessed.current)
+            return;
+        if (state.phase !== 'context')
+            return;
+        if (!state.awaitingInput)
+            return;
+        initialRefsProcessed.current = true;
+        (async () => {
+            for (const ref of initialReferences) {
+                if (ref.startsWith('issue:')) {
+                    const value = ref.slice(6);
+                    if (/^\d+$/.test(value)) {
+                        // Bare issue number — resolve from repo remote
+                        const repo = await detectGitHubRemote(projectRoot);
+                        if (repo) {
+                            const detail = await fetchGitHubIssue(repo.owner, repo.repo, parseInt(value, 10));
+                            if (detail) {
+                                const content = `# ${detail.title}\n\n${detail.body ?? ''}`;
+                                orchestrator.addReferenceContent(content, `GitHub issue #${value}`);
+                                addMessage('system', `Added: GitHub issue #${value} ${detail.title}`);
+                                setHasReferences(true);
+                                continue;
+                            }
+                        }
+                        addMessage('system', `Could not fetch issue #${value} — no GitHub remote detected or gh CLI unavailable`);
+                    }
+                    else {
+                        // Full URL — use existing addReference which handles GitHub URLs
+                        addMessage('user', value);
+                        const added = await orchestrator.addReference(value);
+                        if (added)
+                            setHasReferences(true);
+                    }
+                }
+                else {
+                    addMessage('user', ref);
+                    const added = await orchestrator.addReference(ref);
+                    if (added)
+                        setHasReferences(true);
+                }
+            }
+        })();
+    }, [state.phase, state.awaitingInput, initialReferences, projectRoot, addMessage]);
+    const handleIssueCommand = useCallback(async (searchQuery) => {
+        setIssuePickerVisible(true);
+        setIssuePickerLoading(true);
+        setIssuePickerError(undefined);
+        try {
+            const ghAvailable = await isGhInstalled();
+            if (!ghAvailable) {
+                setIssuePickerError('Install GitHub CLI (gh) for issue browsing');
+                setIssuePickerLoading(false);
+                return;
+            }
+            let repo = issuePickerRepo;
+            if (!repo) {
+                repo = await detectGitHubRemote(projectRoot);
+                if (!repo) {
+                    setIssuePickerError('No GitHub remote detected in this project');
+                    setIssuePickerLoading(false);
+                    return;
+                }
+                setIssuePickerRepo(repo);
+            }
+            const result = await listRepoIssues(repo.owner, repo.repo, searchQuery);
+            if (result.error) {
+                setIssuePickerError(result.error);
+            }
+            setIssuePickerIssues(result.issues);
+        }
+        catch (err) {
+            setIssuePickerError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setIssuePickerLoading(false);
+        }
+    }, [projectRoot, issuePickerRepo]);
+    const handleIssueSelect = useCallback(async (issue) => {
+        clearScreen(stdout);
+        setIssuePickerVisible(false);
+        setIssuePickerIssues([]);
+        const orchestrator = orchestratorRef.current;
+        if (!orchestrator)
+            return;
+        const repo = issuePickerRepo;
+        if (!repo)
+            return;
+        setWorking(true, `Fetching issue #${issue.number}...`);
+        const detail = await fetchGitHubIssue(repo.owner, repo.repo, issue.number);
+        if (detail) {
+            const content = `# ${detail.title}\n\n${detail.body ?? ''}`;
+            orchestrator.addReferenceContent(content, `GitHub issue #${issue.number}`);
+            const labelStr = detail.labels.length > 0 ? ` [${detail.labels.join(', ')}]` : '';
+            addMessage('system', `\u2713 #${issue.number} ${detail.title}${labelStr}`);
+            setHasReferences(true);
+        }
+        else {
+            addMessage('system', `Failed to fetch issue #${issue.number}`);
+        }
+        setReady();
+    }, [stdout, issuePickerRepo, addMessage, setWorking, setReady]);
+    const handleIssueCancel = useCallback(() => {
+        clearScreen(stdout);
+        setIssuePickerVisible(false);
+        setIssuePickerIssues([]);
+        setIssuePickerError(undefined);
+    }, [stdout]);
     const handleSubmit = useCallback(async (value) => {
         try {
             const orchestrator = orchestratorRef.current;
@@ -209,19 +330,30 @@ export function InterviewScreen({ header, featureName, projectRoot, provider, mo
                 logger.debug('Interview submit ignored: orchestrator not ready yet');
                 return;
             }
-            if (value) {
+            const currentPhase = orchestrator.getPhase();
+            // In context phase, /issue is a command — don't echo it as user content
+            const isIssueCmd = currentPhase === 'context' && /^\/issue(?:\s|$)/i.test(value);
+            if (value && !isIssueCmd) {
                 addMessage('user', value);
             }
-            const currentPhase = orchestrator.getPhase();
             switch (currentPhase) {
-                case 'context':
+                case 'context': {
+                    const issueMatch = value.match(/^\/issue(?:\s+(.+))?$/i);
+                    if (issueMatch) {
+                        const searchQuery = issueMatch[1]?.trim();
+                        await handleIssueCommand(searchQuery);
+                        return;
+                    }
                     if (value) {
-                        await orchestrator.addReference(value);
+                        const added = await orchestrator.addReference(value);
+                        if (added)
+                            setHasReferences(true);
                     }
                     else {
                         await orchestrator.advanceToGoals();
                     }
                     break;
+                }
                 case 'goals':
                     await orchestrator.submitGoals(value);
                     break;
@@ -247,7 +379,7 @@ export function InterviewScreen({ header, featureName, projectRoot, provider, mo
             logger.error(`Interview submit failed: ${reason}`);
             setError(reason);
         }
-    }, [addMessage, currentQuestion, setError]);
+    }, [addMessage, currentQuestion, setError, handleIssueCommand]);
     const handleMultiSelectSubmit = useCallback(async (selectedValues) => {
         try {
             const orchestrator = orchestratorRef.current;
@@ -294,6 +426,8 @@ export function InterviewScreen({ header, featureName, projectRoot, provider, mo
             return;
         }
         if (key.escape) {
+            if (issuePickerVisible)
+                return;
             if (currentQuestion) {
                 setCurrentQuestion(null);
                 return;
@@ -312,7 +446,7 @@ export function InterviewScreen({ header, featureName, projectRoot, provider, mo
             return null;
         switch (state.phase) {
             case 'context':
-                return 'Enter URLs or file paths. Empty input to continue.';
+                return 'Enter URLs, file paths, or /issue to browse. Enter \u21b5 to continue.';
             case 'goals':
                 return 'Describe what you want to build.';
             case 'interview':
@@ -330,7 +464,9 @@ export function InterviewScreen({ header, featureName, projectRoot, provider, mo
     const getPlaceholder = () => {
         switch (state.phase) {
             case 'context':
-                return 'Enter URL, file path, or paste text (prefix with "text:" to force inline)...';
+                return hasReferences
+                    ? 'Add more references, or press Enter \u21b5 to continue to Goals...'
+                    : 'Enter URL, file path, /issue, or paste text (prefix "text:" for inline)...';
             case 'goals':
                 return 'Describe what you want to build...';
             case 'interview':
@@ -355,7 +491,7 @@ export function InterviewScreen({ header, featureName, projectRoot, provider, mo
                 })), onSubmit: handleMultiSelectSubmit, onChatMode: handleChatMode }, currentQuestion.id));
         }
         else {
-            inputElement = (_jsx(ChatInput, { onSubmit: handleSubmit, disabled: inputDisabled, allowEmpty: state.phase === 'context', placeholder: getPlaceholder() }));
+            inputElement = (_jsxs(Box, { flexDirection: "column", children: [_jsx(ChatInput, { onSubmit: handleSubmit, disabled: inputDisabled || issuePickerVisible, allowEmpty: state.phase === 'context', placeholder: getPlaceholder() }), issuePickerVisible && (_jsx(IssuePicker, { issues: issuePickerIssues, repoSlug: issuePickerRepo ? `${issuePickerRepo.owner}/${issuePickerRepo.repo}` : '...', onSelect: handleIssueSelect, onCancel: handleIssueCancel, isLoading: issuePickerLoading, error: issuePickerError }))] }));
         }
     }
     return (_jsx(AppShell, { header: header, tips: getTips(), isWorking: state.isWorking && !completionData, workingStatus: state.workingStatus, workingHint: "esc to cancel", error: state.error, input: inputElement, footerStatus: {

package/dist/tui/screens/MainShell.d.ts

@@ -11,7 +11,7 @@ import type { BackgroundRun } from '../hooks/useBackgroundRuns.js';
 /**
  * Navigation targets for the shell
  */
-export type NavigationTarget = 'shell' | 'interview' | 'init' | 'run';
+export type NavigationTarget = 'shell' | 'interview' | 'init' | 'run' | 'agent';
 /**
  * Navigation props passed to target screens
  */