wiggum-cli 0.12.1 → 0.13.1

package/dist/tui/components/HeaderContent.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { WiggumBanner } from './WiggumBanner.js';
+import { colors, theme } from '../theme.js';
+/**
+ * HeaderContent component
+ *
+ * Renders the banner and status row for the AppShell header zone.
+ */
+export function HeaderContent({ version, sessionState, backgroundRuns, compact = false, }) {
+    const activeRuns = backgroundRuns?.filter((r) => !r.completed && !r.pollError) ?? [];
+    const errorRuns = backgroundRuns?.filter((r) => r.pollError) ?? [];
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [_jsx(WiggumBanner, { compact: compact }), _jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: colors.pink, children: ["v", version] }), _jsx(Text, { dimColor: true, children: theme.statusLine.separator }), sessionState.provider ? (_jsxs(Text, { color: colors.blue, children: [sessionState.provider, "/", sessionState.model] })) : (_jsx(Text, { color: colors.orange, children: "not configured" })), _jsx(Text, { dimColor: true, children: theme.statusLine.separator }), _jsx(Text, { color: sessionState.initialized ? colors.green : colors.orange, children: sessionState.initialized ? 'Ready' : 'Not initialized' }), activeRuns.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: theme.statusLine.separator }), _jsxs(Text, { color: colors.green, children: [theme.chars.bulletLarge, " ", activeRuns[0].featureName, activeRuns[0].lastStatus.iteration > 0
+                                        ? ` (${activeRuns[0].lastStatus.iteration}/${activeRuns[0].lastStatus.maxIterations || '?'})`
+                                        : ''] }), activeRuns.length > 1 && (_jsxs(Text, { dimColor: true, children: [" +", activeRuns.length - 1, " more"] }))] })), errorRuns.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: theme.statusLine.separator }), _jsxs(Text, { color: colors.orange, children: [theme.chars.bullet, " ", errorRuns[0].featureName, " (status unknown)"] })] }))] })] }));
+}

package/dist/tui/components/MessageList.d.ts

@@ -3,7 +3,7 @@
  *
  * Displays the full conversation history with clean formatting:
  * - User messages: › prefix
- * - Assistant messages: ● bullet with clean markdown-like styling
+ * - Assistant messages: • dimmed bullet for context, bold header for questions
  * - Tool calls: Inline action indicators
  */
 import React from 'react';
@@ -44,7 +44,7 @@ export interface Message {
 export interface MessageListProps {
     /** Array of messages to display */
     messages: Message[];
-    /** Optional max height in lines (for future scrolling support) */
+    /** Optional max height in lines (clips content when set) */
     maxHeight?: number;
     /** Whether tool calls should show expanded preview (default: false) */
     toolCallsExpanded?: boolean;
@@ -53,21 +53,23 @@ export interface MessageListProps {
  * MessageList component
  *
  * Displays the full conversation history with clean styling:
- * - User messages: `› ` prefix in blue
- * - Assistant messages: `● ` prefix in yellow, with inline tool cards
- * - System messages: dimmed text
+ * - User messages: `› ` prefix in green
+ * - Assistant messages: context with dimmed bullet, questions with bold header
+ * - System messages: dimmed text (phase headers in yellow bold)
  *
  * @example
  * ```tsx
  * <MessageList
  *   messages={[
  *     { id: '1', role: 'user', content: 'Hello' },
- *     { id: '2', role: 'assistant', content: 'Hi! How can I help?' },
+ *     { id: '2', role: 'assistant', content: 'Let me think about that.\n\nWhat framework do you prefer?' },
  *   ]}
  * />
  * // Renders:
  * // › Hello
- * // ● Hi! How can I help?
+ * // • Let me think about that.
+ * // Next question:
+ * // What framework do you prefer?
  * ```
  */
 export declare function MessageList({ messages, maxHeight, toolCallsExpanded, }: MessageListProps): React.ReactElement;

package/dist/tui/components/MessageList.js

@@ -7,24 +7,24 @@ import { ToolCallCard } from './ToolCallCard.js';
  * Renders a single user message with › prefix in green
  */
 function UserMessage({ content }) {
-    return (_jsxs(Box, { flexDirection: "row", marginY: 1, children: [_jsxs(Text, { color: theme.colors.prompt, bold: true, children: [theme.chars.prompt, ' '] }), _jsx(Text, { color: theme.colors.userText, children: content })] }));
+    return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: theme.colors.prompt, bold: true, children: [theme.chars.prompt, ' '] }), _jsx(Text, { color: theme.colors.userText, children: content })] }));
 }
 /**
- * Renders a single assistant message with tool calls (no prefix - distinguished by color)
- * Differentiates between thinking/context (solid LED, italic) and questions (bold with prefix)
- * Preserves original paragraph order while styling differently
+ * Renders a single assistant message with tool calls
+ * Context/thinking paragraphs: dimmed bullet prefix, italic
+ * Question paragraphs: bold "Next question:" header, no bullet
  */
 function AssistantMessage({ content, toolCalls, isStreaming, toolCallsExpanded = false, }) {
     // Split content into paragraphs for differentiated styling
     const paragraphs = content ? content.split('\n\n').filter((p) => p.trim()) : [];
-    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [toolCalls && toolCalls.length > 0 && (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: toolCalls.map((toolCall, index) => (_jsx(ToolCallCard, { toolName: toolCall.toolName, status: toolCall.status, input: toolCall.input, output: toolCall.output, error: toolCall.error, expanded: toolCallsExpanded }, `tool-${index}`))) })), content && !isStreaming && (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: paragraphs.map((para, index) => {
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [toolCalls && toolCalls.length > 0 && (_jsx(Box, { flexDirection: "column", children: toolCalls.map((toolCall, index) => (_jsx(ToolCallCard, { toolName: toolCall.toolName, status: toolCall.status, input: toolCall.input, output: toolCall.output, error: toolCall.error, expanded: toolCallsExpanded }, `tool-${index}`))) })), content && !isStreaming && (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: paragraphs.map((para, index) => {
                     const isQuestion = para.trim().endsWith('?');
                     if (isQuestion) {
                         // Question - prominent, with "Next question:" prefix
-                        return (_jsxs(Box, { marginY: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Next question:" }), _jsx(Text, { color: theme.colors.aiText, children: para })] }, index));
+                        return (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Next question:" }), _jsx(Text, { color: theme.colors.aiText, children: para })] }, index));
                     }
                     else {
-                        // Context/thinking - solid grey LED, italic dimmed text
+                        // Context/thinking - dimmed bullet prefix, italic dimmed text
                         return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { dimColor: true, children: [theme.chars.bullet, " "] }), _jsx(Text, { dimColor: true, italic: true, children: para })] }, index));
                     }
                 }) })), content && isStreaming && (_jsx(Box, { flexDirection: "column", flexGrow: 1, children: _jsx(StreamingText, { text: content, isStreaming: true, color: theme.colors.aiText }) }))] }));
@@ -36,43 +36,49 @@ function AssistantMessage({ content, toolCalls, isStreaming, toolCallsExpanded =
 function SystemMessage({ content }) {
     // Check if this is a phase header (e.g., "Phase 2: Goals - Describe what you want to build")
     const phaseMatch = content.match(/^Phase (\d+): (.+?) - (.+)$/);
+    const isSuccess = content.startsWith('\u2713');
     const isSyncFailure = content.toLowerCase().startsWith('sync failed:');
     const isSyncMessage = content.toLowerCase().startsWith('sync:');
     if (phaseMatch) {
         const [, phaseNum, phaseName, description] = phaseMatch;
-        return (_jsxs(Box, { marginY: 1, flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.brand, bold: true, children: ["Phase ", phaseNum, ": ", phaseName] }), _jsx(Text, { dimColor: true, children: description })] }));
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: theme.colors.brand, bold: true, children: ["Phase ", phaseNum, ": ", phaseName] }), _jsx(Text, { dimColor: true, children: description })] }));
+    }
+    if (isSuccess) {
+        return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: colors.green, children: ['\u2713', " "] }), _jsx(Text, { children: content.slice(1).trimStart() })] }));
     }
     if (isSyncFailure) {
-        return (_jsx(Box, { marginY: 1, children: _jsx(Text, { color: colors.pink, children: content }) }));
+        return (_jsx(Box, { children: _jsx(Text, { color: colors.pink, children: content }) }));
     }
     if (isSyncMessage) {
-        return (_jsx(Box, { marginY: 1, children: _jsx(Text, { color: colors.blue, children: content }) }));
+        return (_jsx(Box, { children: _jsx(Text, { color: colors.blue, children: content }) }));
     }
-    return (_jsx(Box, { marginY: 1, children: _jsx(Text, { dimColor: true, children: content }) }));
+    return (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: content }) }));
 }
 /**
  * MessageList component
  *
  * Displays the full conversation history with clean styling:
- * - User messages: `› ` prefix in blue
- * - Assistant messages: `● ` prefix in yellow, with inline tool cards
- * - System messages: dimmed text
+ * - User messages: `› ` prefix in green
+ * - Assistant messages: context with dimmed bullet, questions with bold header
+ * - System messages: dimmed text (phase headers in yellow bold)
  *
  * @example
  * ```tsx
  * <MessageList
  *   messages={[
  *     { id: '1', role: 'user', content: 'Hello' },
- *     { id: '2', role: 'assistant', content: 'Hi! How can I help?' },
+ *     { id: '2', role: 'assistant', content: 'Let me think about that.\n\nWhat framework do you prefer?' },
  *   ]}
  * />
  * // Renders:
  * // › Hello
- * // ● Hi! How can I help?
+ * // • Let me think about that.
+ * // Next question:
+ * // What framework do you prefer?
  * ```
  */
 export function MessageList({ messages, maxHeight, toolCallsExpanded = false, }) {
-    return (_jsx(Box, { flexDirection: "column", ...(maxHeight ? { height: maxHeight } : {}), children: messages.map((message) => {
+    return (_jsx(Box, { flexDirection: "column", gap: 1, ...(maxHeight ? { height: maxHeight } : {}), children: messages.map((message) => {
             switch (message.role) {
                 case 'user':
                     return _jsx(UserMessage, { content: message.content }, message.id);

package/dist/tui/components/RunCompletionSummary.d.ts

@@ -0,0 +1,22 @@
+/**
+ * RunCompletionSummary - Displays run loop completion recap
+ *
+ * Shows the feature, iterations, tasks, tokens, branch, exit status,
+ * log tail, and "what's next" section after a feature loop completes.
+ */
+import React from 'react';
+import type { RunSummary } from '../screens/RunScreen.js';
+/**
+ * Props for RunCompletionSummary component
+ */
+export interface RunCompletionSummaryProps {
+    /** Run summary data */
+    summary: RunSummary;
+}
+/**
+ * RunCompletionSummary component
+ *
+ * Renders the run loop completion recap inline within the
+ * RunScreen content area.
+ */
+export declare function RunCompletionSummary({ summary, }: RunCompletionSummaryProps): React.ReactElement;

package/dist/tui/components/RunCompletionSummary.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { StatusLine } from './StatusLine.js';
+import { colors, theme } from '../theme.js';
+import { formatNumber } from '../utils/loop-status.js';
+/**
+ * RunCompletionSummary component
+ *
+ * Renders the run loop completion recap inline within the
+ * RunScreen content area.
+ */
+export function RunCompletionSummary({ summary, }) {
+    const totalTokens = summary.tokensInput + summary.tokensOutput;
+    const stoppedCodes = new Set([130, 143]);
+    const exitState = summary.exitCode === 0
+        ? { label: 'Complete', color: colors.green, message: 'Done. Feature loop completed successfully.' }
+        : stoppedCodes.has(summary.exitCode)
+            ? { label: 'Stopped', color: colors.orange, message: 'Stopped. Feature loop interrupted.' }
+            : summary.exitCodeInferred
+                ? { label: 'Unknown', color: colors.orange, message: `Done. Exit status uncertain (inferred code ${summary.exitCode}). Check logs for details.` }
+                : { label: 'Failed', color: colors.pink, message: `Done. Feature loop exited with code ${summary.exitCode}.` };
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(StatusLine, { action: "Run Loop", phase: exitState.label, path: summary.feature }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Summary" }), _jsxs(Text, { children: ["- Feature: ", summary.feature] }), _jsxs(Text, { children: ["- Iterations: ", summary.iterations, "/", summary.maxIterations] }), _jsxs(Text, { children: ["- Tasks: ", summary.tasksDone, "/", summary.tasksTotal] }), _jsxs(Text, { children: ["- Tokens: ", formatNumber(totalTokens), " (in:", formatNumber(summary.tokensInput), " out:", formatNumber(summary.tokensOutput), ")"] }), summary.branch && summary.branch !== '-' && (_jsxs(Text, { children: ["- Branch: ", summary.branch] }))] }), _jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsxs(Text, { color: exitState.color, children: [theme.chars.bullet, " "] }), _jsx(Text, { children: exitState.message })] }), (summary.errorTail || summary.logPath) && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [summary.logPath && (_jsxs(Text, { dimColor: true, children: ["Log: ", summary.logPath] })), summary.errorTail && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Last output:" }), summary.errorTail.split('\n').map((line, idx) => (_jsx(Text, { dimColor: true, children: line }, `${line}-${idx}`)))] }))] })), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "What's next:" }), _jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: colors.green, children: theme.chars.prompt }), _jsx(Text, { dimColor: true, children: "Review changes and open a PR if needed" })] }), _jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: colors.green, children: theme.chars.prompt }), _jsxs(Text, { color: colors.blue, children: ["/new ", '<feature>'] }), _jsx(Text, { dimColor: true, children: "Create another feature specification" })] }), _jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: colors.green, children: theme.chars.prompt }), _jsx(Text, { color: colors.blue, children: "/help" }), _jsx(Text, { dimColor: true, children: "See all commands" })] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter or Esc to return to shell" }) })] }));
+}

package/dist/tui/components/SpecCompletionSummary.d.ts

@@ -0,0 +1,47 @@
+/**
+ * SpecCompletionSummary - Displays spec generation recap
+ *
+ * Shows the goal, key decisions, file preview, and "what's next"
+ * section after a spec has been generated. Extracts a recap from
+ * the conversation history using heuristic text analysis.
+ */
+import React from 'react';
+import type { Message } from './MessageList.js';
+/**
+ * Props for the SpecCompletionSummary component
+ */
+export interface SpecCompletionSummaryProps {
+    /** Name of the feature */
+    featureName: string;
+    /** Generated spec content */
+    spec: string;
+    /** Path where spec was saved */
+    specPath: string;
+    /** Conversation messages from the interview */
+    messages: Message[];
+}
+/** Strip filler prefixes ('you want', 'understood', 'got it') from AI recap text and capitalize. */
+export declare function normalizeRecap(text: string): string;
+/** Strip user speech filler and normalize decision text: add trailing period if missing, capitalize. */
+export declare function normalizeUserDecision(text: string): string;
+/** Truncate text to max characters with ellipsis. */
+export declare function summarizeText(text: string, max?: number): string;
+/** Return true if the decision string is substantive enough to display (>= 8 chars and >= 3 words). */
+export declare function isUsefulDecision(entry: string): boolean;
+/**
+ * Extract goal and key decisions from conversation messages.
+ *
+ * @returns `goalCandidate` — a one-line summary of the feature goal, and
+ *          `decisions` — up to 4 key decisions extracted from the conversation.
+ */
+export declare function extractRecap(messages: Message[], featureName: string): {
+    goalCandidate: string;
+    decisions: string[];
+};
+/**
+ * SpecCompletionSummary component
+ *
+ * Renders the spec generation completion recap inline within the
+ * InterviewScreen content area.
+ */
+export declare function SpecCompletionSummary({ featureName, spec, specPath, messages, }: SpecCompletionSummaryProps): React.ReactElement;

package/dist/tui/components/SpecCompletionSummary.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { StatusLine } from './StatusLine.js';
+import { colors, theme } from '../theme.js';
+import { PHASE_CONFIGS } from '../hooks/useSpecGenerator.js';
+const MAX_RECAP_SOURCE_LENGTH = 1200;
+/** Strip filler prefixes ('you want', 'understood', 'got it') from AI recap text and capitalize. */
+export function normalizeRecap(text) {
+    let result = text.trim();
+    result = result.replace(/^[^a-z0-9]+/i, '');
+    result = result.replace(/^you want\s*/i, '');
+    result = result.replace(/^understood[:,]?\s*/i, '');
+    result = result.replace(/^got it[-\u2014:]*\s*/i, '');
+    return result.charAt(0).toUpperCase() + result.slice(1);
+}
+/** Strip user speech filler and normalize decision text: add trailing period if missing, capitalize. */
+export function normalizeUserDecision(text) {
+    let result = text.trim();
+    result = result.replace(/^[^a-z0-9]+/i, '');
+    result = result.replace(/^i (?:would like|want|need|prefer|expect) to\s*/i, '');
+    result = result.replace(/^i (?:would like|want|need|prefer|expect)\s*/i, '');
+    result = result.replace(/^please\s*/i, '');
+    result = result.replace(/^up to you[:,]?\s*/i, '');
+    result = result.replace(/^both\s*/i, 'Both ');
+    if (result && !/[.!?]$/.test(result)) {
+        result += '.';
+    }
+    return result.charAt(0).toUpperCase() + result.slice(1);
+}
+/** Truncate text to max characters with ellipsis. */
+export function summarizeText(text, max = 160) {
+    if (text.length <= max)
+        return text;
+    return `${text.slice(0, max - 1)}\u2026`;
+}
+/** Return true if the decision string is substantive enough to display (>= 8 chars and >= 3 words). */
+export function isUsefulDecision(entry) {
+    const normalized = entry.trim().toLowerCase();
+    if (normalized.length < 8)
+        return false;
+    const wordCount = normalized.split(/\s+/).length;
+    if (wordCount < 3)
+        return false;
+    if (['yes', 'no', 'both', 'ok', 'okay'].includes(normalized))
+        return false;
+    return true;
+}
+/**
+ * Extract goal and key decisions from conversation messages.
+ *
+ * @returns `goalCandidate` — a one-line summary of the feature goal, and
+ *          `decisions` — up to 4 key decisions extracted from the conversation.
+ */
+export function extractRecap(messages, featureName) {
+    const userMessages = messages
+        .filter((msg) => msg.role === 'user')
+        .map((msg) => msg.content.trim())
+        .filter((content) => content.length > 0 && content.length <= MAX_RECAP_SOURCE_LENGTH);
+    const nonUrlUserMessages = userMessages.filter((content) => !/^https?:\/\//i.test(content) && !/^www\./i.test(content));
+    const assistantParagraphs = messages
+        .filter((msg) => msg.role === 'assistant' && msg.content && msg.content.length <= MAX_RECAP_SOURCE_LENGTH)
+        .flatMap((msg) => msg.content.split('\n\n'))
+        .map((para) => para.replace(/\s+/g, ' ').trim())
+        .filter((para) => para.length > 0 && para.length <= 320);
+    const recapCandidates = assistantParagraphs
+        .map((para) => para.replace(/^[^a-z0-9]+/i, '').trim())
+        .filter((para) => /^(you want|understood|got it)/i.test(para))
+        .map((para) => para.split(/next question:/i)[0].trim())
+        .filter((para) => para.length > 0);
+    const goalCandidate = recapCandidates.length > 0
+        ? normalizeRecap(recapCandidates[0])
+        : (nonUrlUserMessages.find((content) => content.length > 20)
+            ? normalizeUserDecision(nonUrlUserMessages.find((content) => content.length > 20))
+            : (nonUrlUserMessages[0] ? normalizeUserDecision(nonUrlUserMessages[0]) : `Define "${featureName}"`));
+    const decisions = [];
+    const seen = new Set();
+    if (recapCandidates.length > 1) {
+        for (let i = 1; i < recapCandidates.length; i += 1) {
+            const entry = normalizeRecap(recapCandidates[i]);
+            const normalized = entry.toLowerCase();
+            if (!isUsefulDecision(entry))
+                continue;
+            if (seen.has(normalized))
+                continue;
+            decisions.push(entry);
+            seen.add(normalized);
+            if (decisions.length >= 4)
+                break;
+        }
+    }
+    else {
+        for (let i = nonUrlUserMessages.length - 1; i >= 0; i -= 1) {
+            const entry = nonUrlUserMessages[i];
+            const normalized = entry.toLowerCase();
+            if (entry === goalCandidate)
+                continue;
+            if (!isUsefulDecision(entry))
+                continue;
+            if (entry.length > 160)
+                continue;
+            if (seen.has(normalized))
+                continue;
+            decisions.unshift(normalizeUserDecision(entry));
+            seen.add(normalized);
+            if (decisions.length >= 4)
+                break;
+        }
+    }
+    return { goalCandidate, decisions };
+}
+/**
+ * SpecCompletionSummary component
+ *
+ * Renders the spec generation completion recap inline within the
+ * InterviewScreen content area.
+ */
+export function SpecCompletionSummary({ featureName, spec, specPath, messages, }) {
+    const specLines = spec ? spec.split('\n') : [];
+    const totalLines = specLines.length;
+    const previewLines = specLines.slice(0, 5);
+    const remainingLines = Math.max(0, totalLines - 5);
+    const { goalCandidate, decisions } = extractRecap(messages, featureName);
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(StatusLine, { action: "New Spec", phase: `Complete (${PHASE_CONFIGS.complete.number}/${PHASE_CONFIGS.complete.number})`, path: featureName }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Summary" }), _jsxs(Text, { children: ["- Goal: ", summarizeText(goalCandidate)] }), _jsxs(Text, { children: ["- Outcome: Spec written to ", specPath || `${featureName}.md`, " (", totalLines, " lines)"] })] }), decisions.length > 0 && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Key decisions" }), decisions.map((decision, idx) => (_jsxs(Text, { children: [idx + 1, ". ", summarizeText(decision, 120)] }, `${decision}-${idx}`)))] })), _jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsxs(Text, { color: colors.green, children: [theme.chars.bullet, " "] }), _jsx(Text, { bold: true, children: "Write" }), _jsxs(Text, { dimColor: true, children: ["(", specPath || `${featureName}.md`, ")"] })] }), _jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: [theme.chars.lineEnd, " Wrote ", totalLines, " lines"] }) }), _jsxs(Box, { marginLeft: 4, flexDirection: "column", children: [previewLines.map((line, i) => (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { dimColor: true, children: [String(i + 1).padStart(4), " "] }), _jsx(Text, { dimColor: true, children: line })] }, i))), remainingLines > 0 && (_jsxs(Text, { dimColor: true, children: ['\u2026', " +", remainingLines, " lines"] }))] }), _jsxs(Box, { marginTop: 1, flexDirection: "row", children: [_jsxs(Text, { color: colors.green, children: [theme.chars.bullet, " "] }), _jsx(Text, { children: "Done. Specification generated successfully." })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { bold: true, children: "What's next:" }), _jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: colors.green, children: theme.chars.prompt }), _jsx(Text, { dimColor: true, children: "Review the spec in your editor" })] }), _jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: colors.green, children: theme.chars.prompt }), _jsx(Text, { color: colors.blue, children: "/help" }), _jsx(Text, { dimColor: true, children: "See all commands" })] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Enter or Esc to return to shell" }) })] }));
+}

package/dist/tui/components/TipsBar.d.ts

@@ -0,0 +1,24 @@
+/**
+ * TipsBar - Contextual hints bar
+ *
+ * Renders a single dimmed line with slash commands highlighted in blue.
+ */
+import React from 'react';
+/**
+ * Props for TipsBar component
+ */
+export interface TipsBarProps {
+    /** Tip text - slash commands (e.g. /help) are auto-highlighted */
+    text: string;
+}
+/**
+ * TipsBar component
+ *
+ * Displays contextual tips with slash commands highlighted in blue.
+ *
+ * @example
+ * ```tsx
+ * <TipsBar text="Tip: /new <feature> to create spec, /help for commands" />
+ * ```
+ */
+export declare function TipsBar({ text }: TipsBarProps): React.ReactElement;

package/dist/tui/components/TipsBar.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { colors } from '../theme.js';
+/**
+ * TipsBar component
+ *
+ * Displays contextual tips with slash commands highlighted in blue.
+ *
+ * @example
+ * ```tsx
+ * <TipsBar text="Tip: /new <feature> to create spec, /help for commands" />
+ * ```
+ */
+export function TipsBar({ text }) {
+    // Split text on slash commands to highlight them
+    const parts = text.split(/(\/[a-zA-Z]+)/g);
+    return (_jsx(Box, { children: parts.map((part, i) => {
+            if (part.startsWith('/')) {
+                return _jsx(Text, { color: colors.blue, children: part }, i);
+            }
+            return _jsx(Text, { dimColor: true, children: part }, i);
+        }) }));
+}

package/dist/tui/components/WiggumBanner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Text, Box } from 'ink';
+import { Text, Box, useStdout } from 'ink';
 import { colors } from '../theme.js';
 /**
  * ASCII art banner for Wiggum CLI
@@ -12,6 +12,8 @@ const BANNER = `██╗    ██╗██╗ ██████╗  ███
 ╚███╔███╔╝██║╚██████╔╝╚██████╔╝╚██████╔╝██║ ╚═╝ ██║
  ╚══╝╚══╝ ╚═╝ ╚═════╝  ╚═════╝  ╚═════╝ ╚═╝     ╚═╝
 `;
+/** Minimum terminal columns needed to display the banner without wrapping */
+const BANNER_MIN_WIDTH = 55;
 /**
  * WiggumBanner component
  *
@@ -25,8 +27,11 @@ const BANNER = `██╗    ██╗██╗ ██████╗  ███
  * ```
  */
 export function WiggumBanner({ color = colors.yellow, compact = false, }) {
-    if (compact) {
+    const { stdout } = useStdout();
+    const columns = stdout?.columns ?? 80;
+    // Auto-compact when terminal is too narrow for the ASCII art
+    if (compact || columns < BANNER_MIN_WIDTH) {
         return (_jsx(Box, { children: _jsx(Text, { color: color, bold: true, children: "WIGGUM CLI" }) }));
     }
-    return (_jsx(Box, { flexDirection: "column", children: _jsx(Text, { color: color, children: BANNER }) }));
+    return (_jsx(Box, { flexDirection: "column", overflow: "hidden", children: _jsx(Text, { color: color, wrap: "truncate", children: BANNER }) }));
 }

package/dist/tui/hooks/useBackgroundRuns.d.ts

@@ -0,0 +1,52 @@
+/**
+ * useBackgroundRuns - Hook for tracking background run processes
+ *
+ * Manages a list of backgrounded feature loop runs, polling their
+ * status files periodically to track completion.
+ */
+import { type LoopStatus } from '../utils/loop-status.js';
+/**
+ * A backgrounded feature loop run
+ */
+export interface BackgroundRun {
+    /** Feature name being implemented */
+    featureName: string;
+    /** Timestamp when backgrounded */
+    backgroundedAt: number;
+    /** Path to the log file */
+    logPath: string;
+    /** Last polled status */
+    lastStatus: LoopStatus;
+    /** Whether the run has completed */
+    completed: boolean;
+    /** If polling was stopped due to repeated failures, the error reason */
+    pollError?: string;
+}
+/**
+ * Return type for useBackgroundRuns hook
+ */
+export interface UseBackgroundRunsReturn {
+    /** Current list of background runs */
+    runs: BackgroundRun[];
+    /** Add a feature to background tracking. Reads initial status and starts polling. */
+    background: (featureName: string) => void;
+    /** Remove a completed run from tracking */
+    dismiss: (featureName: string) => void;
+    /** Get a specific run by feature name */
+    getRun: (featureName: string) => BackgroundRun | undefined;
+}
+/**
+ * Hook to track background feature loop runs
+ *
+ * @example
+ * ```tsx
+ * const { runs, background, dismiss, getRun } = useBackgroundRuns();
+ *
+ * // When user presses Esc on RunScreen
+ * background('my-feature');
+ *
+ * // Check if a feature is running in background
+ * const run = getRun('my-feature');
+ * ```
+ */
+export declare function useBackgroundRuns(): UseBackgroundRunsReturn;

package/dist/tui/hooks/useBackgroundRuns.js

@@ -0,0 +1,121 @@
+/**
+ * useBackgroundRuns - Hook for tracking background run processes
+ *
+ * Manages a list of backgrounded feature loop runs, polling their
+ * status files periodically to track completion.
+ */
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { readLoopStatus, getLoopLogPath } from '../utils/loop-status.js';
+import { logger } from '../../utils/logger.js';
+const POLL_INTERVAL_MS = 5000;
+/**
+ * Hook to track background feature loop runs
+ *
+ * @example
+ * ```tsx
+ * const { runs, background, dismiss, getRun } = useBackgroundRuns();
+ *
+ * // When user presses Esc on RunScreen
+ * background('my-feature');
+ *
+ * // Check if a feature is running in background
+ * const run = getRun('my-feature');
+ * ```
+ */
+export function useBackgroundRuns() {
+    const [runs, setRuns] = useState([]);
+    const pollTimers = useRef(new Map());
+    const startPolling = useCallback((featureName) => {
+        // Clear existing timer if any
+        const existing = pollTimers.current.get(featureName);
+        if (existing)
+            clearInterval(existing);
+        let consecutiveFailures = 0;
+        const MAX_FAILURES = 3;
+        const timer = setInterval(() => {
+            try {
+                const status = readLoopStatus(featureName);
+                consecutiveFailures = 0;
+                const nowCompleted = !status.running;
+                setRuns((prev) => prev.map((run) => {
+                    if (run.featureName !== featureName)
+                        return run;
+                    return {
+                        ...run,
+                        lastStatus: status,
+                        completed: nowCompleted,
+                    };
+                }));
+                // Stop polling once the run completes
+                if (nowCompleted) {
+                    clearInterval(timer);
+                    pollTimers.current.delete(featureName);
+                }
+            }
+            catch (err) {
+                consecutiveFailures++;
+                logger.error(`Failed to poll status for ${featureName} (attempt ${consecutiveFailures}): ${err instanceof Error ? err.message : String(err)}`);
+                if (consecutiveFailures >= MAX_FAILURES) {
+                    const reason = err instanceof Error ? err.message : String(err);
+                    logger.error(`Stopping polling for ${featureName} after ${consecutiveFailures} consecutive failures`);
+                    clearInterval(timer);
+                    pollTimers.current.delete(featureName);
+                    setRuns((prev) => prev.map((run) => run.featureName === featureName
+                        ? { ...run, pollError: `Status polling failed: ${reason}` }
+                        : run));
+                }
+            }
+        }, POLL_INTERVAL_MS);
+        pollTimers.current.set(featureName, timer);
+    }, []);
+    const background = useCallback((featureName) => {
+        let status;
+        try {
+            status = readLoopStatus(featureName);
+        }
+        catch (err) {
+            logger.error(`Failed to read initial status for ${featureName}: ${err instanceof Error ? err.message : String(err)}`);
+            // Assume still running so polling can discover truth — if truly dead, polling will detect it
+            status = { running: true, iteration: 0, maxIterations: 0, phase: 'unknown', tokensInput: 0, tokensOutput: 0 };
+        }
+        const logPath = getLoopLogPath(featureName);
+        setRuns((prev) => {
+            // Don't add duplicates
+            if (prev.some((r) => r.featureName === featureName)) {
+                return prev;
+            }
+            return [...prev, {
+                    featureName,
+                    backgroundedAt: Date.now(),
+                    logPath,
+                    lastStatus: status,
+                    completed: !status.running,
+                }];
+        });
+        if (status.running) {
+            startPolling(featureName);
+        }
+    }, [startPolling]);
+    const dismiss = useCallback((featureName) => {
+        // Clear poll timer
+        const timer = pollTimers.current.get(featureName);
+        if (timer) {
+            clearInterval(timer);
+            pollTimers.current.delete(featureName);
+        }
+        setRuns((prev) => prev.filter((r) => r.featureName !== featureName));
+    }, []);
+    const getRun = useCallback((featureName) => {
+        return runs.find((r) => r.featureName === featureName);
+    }, [runs]);
+    // Cleanup all poll timers on unmount
+    useEffect(() => {
+        return () => {
+            for (const timer of pollTimers.current.values()) {
+                clearInterval(timer);
+            }
+            pollTimers.current.clear();
+        };
+    }, []);
+    return { runs, background, dismiss, getRun };
+}

package/dist/tui/orchestration/interview-orchestrator.js

@@ -385,7 +385,7 @@ export class InterviewOrchestrator {
         try {
             // Set initial phase
             this.onPhaseChange('context');
-            this.onMessage('system', `Spec Generator initialized for feature: ${this.featureName}`);
+            this.onMessage('system', `Phase 1: Context - New spec for feature: ${this.featureName}`);
             // Ready for context input
             this.onReady();
         }