wiggum-cli 0.12.1 → 0.13.1

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

@@ -1,12 +1,16 @@
 /**
  * InitScreen - Full Ink-based init workflow
  *
- * Handles the complete project initialization flow within the TUI:
+ * Handles the complete project initialization flow within the TUI.
+ * High-level steps (some may be skipped if already configured):
  * 1. Scanning project structure
- * 2. API key collection (if needed)
- * 3. Model selection
- * 4. AI analysis
- * 5. File generation
+ * 2. Provider selection
+ * 3. API key collection (if needed) + optional save
+ * 4. Model selection
+ * 5. AI analysis (agentic)
+ * 6. Confirmation + file generation
+ *
+ * Wrapped in AppShell for consistent layout.
  */
 import React from 'react';
 import type { SessionState } from '../../repl/session-state.js';
@@ -14,6 +18,8 @@ import type { SessionState } from '../../repl/session-state.js';
  * Props for the InitScreen component
  */
 export interface InitScreenProps {
+    /** Pre-built header element from App */
+    header: React.ReactNode;
     /** Project root directory */
     projectRoot: string;
     /** Current session state */
@@ -26,7 +32,6 @@ export interface InitScreenProps {
 /**
  * InitScreen component
  *
- * The complete Ink-based init workflow. Replaces the readline-based
- * init flow with native Ink components.
+ * The complete Ink-based init workflow wrapped in AppShell.
  */
-export declare function InitScreen({ projectRoot, sessionState, onComplete, onCancel, }: InitScreenProps): React.ReactElement;
+export declare function InitScreen({ header, projectRoot, sessionState, onComplete, onCancel, }: InitScreenProps): React.ReactElement;

package/dist/tui/screens/InitScreen.js

@@ -2,19 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * InitScreen - Full Ink-based init workflow
  *
- * Handles the complete project initialization flow within the TUI:
+ * Handles the complete project initialization flow within the TUI.
+ * High-level steps (some may be skipped if already configured):
  * 1. Scanning project structure
- * 2. API key collection (if needed)
- * 3. Model selection
- * 4. AI analysis
- * 5. File generation
+ * 2. Provider selection
+ * 3. API key collection (if needed) + optional save
+ * 4. Model selection
+ * 5. AI analysis (agentic)
+ * 6. Confirmation + file generation
+ *
+ * Wrapped in AppShell for consistent layout.
  */
 import { useEffect, useRef, useCallback } from 'react';
 import { Box, Text, useInput } from 'ink';
-import { colors, theme } from '../theme.js';
+import { colors, phase } from '../theme.js';
 import { useInit, INIT_PHASE_CONFIGS, INIT_TOTAL_PHASES } from '../hooks/useInit.js';
-import { FooterStatusBar } from '../components/FooterStatusBar.js';
-import { WorkingIndicator } from '../components/WorkingIndicator.js';
+import { AppShell } from '../components/AppShell.js';
 import { Select } from '../components/Select.js';
 import { PasswordInput } from '../components/PasswordInput.js';
 import { Confirm } from '../components/Confirm.js';
@@ -30,17 +33,11 @@ import { saveContext, toPersistedScanResult, toPersistedAIAnalysis, getGitMetada
 import { logger } from '../../utils/logger.js';
 import path from 'node:path';
 import { updateSessionState } from '../../repl/session-state.js';
-/**
- * Provider options for the select component
- */
 const PROVIDER_OPTIONS = [
     { value: 'anthropic', label: 'Anthropic', hint: 'recommended' },
     { value: 'openai', label: 'OpenAI' },
     { value: 'openrouter', label: 'OpenRouter', hint: 'multiple providers' },
 ];
-/**
- * Get model options for a provider
- */
 function getModelOptions(provider) {
     return AVAILABLE_MODELS[provider].map((m) => ({
         value: m.value,
@@ -51,24 +48,18 @@ function getModelOptions(provider) {
 /**
  * InitScreen component
  *
- * The complete Ink-based init workflow. Replaces the readline-based
- * init flow with native Ink components.
+ * The complete Ink-based init workflow wrapped in AppShell.
  */
-export function InitScreen({ projectRoot, sessionState, onComplete, onCancel, }) {
+export function InitScreen({ header, projectRoot, sessionState, onComplete, onCancel, }) {
     const { state, initialize, setScanResult, setExistingProvider, selectProvider, setApiKey, setSaveKey, selectModel, setAiProgress, updateToolCall, setEnhancedResult, setAiError, confirmGeneration, setGenerating, setGenerationComplete, setError, } = useInit();
-    // Store API key in ref (not in state for security)
     const apiKeyRef = useRef(null);
-    // Track if AI analysis has started
     const aiAnalysisStarted = useRef(false);
-    // Track if generation has started
     const generationStarted = useRef(false);
-    // Handle Escape to cancel
-    useInput((input, key) => {
+    useInput((_input, key) => {
         if (key.escape) {
             onCancel();
         }
     });
-    // Initialize on mount
     useEffect(() => {
         initialize(projectRoot);
     }, [projectRoot, initialize]);
@@ -76,39 +67,37 @@ export function InitScreen({ projectRoot, sessionState, onComplete, onCancel, })
     useEffect(() => {
         if (state.phase !== 'scanning' || state.scanResult)
             return;
+        let cancelled = false;
         const runScan = async () => {
             try {
                 const scanner = new Scanner();
                 const result = await scanner.scan(projectRoot);
+                if (cancelled)
+                    return;
                 setScanResult(result);
-                // Check for existing API key
                 const existingProvider = getAvailableProvider();
                 if (existingProvider) {
                     setExistingProvider(existingProvider);
                 }
-                else {
-                    // Need to collect API key - go to provider select
-                    // This is done by checking state.hasApiKey in render
-                }
             }
             catch (error) {
+                if (cancelled)
+                    return;
                 setError(`Failed to scan project: ${error instanceof Error ? error.message : String(error)}`);
             }
         };
         runScan();
+        return () => { cancelled = true; };
     }, [state.phase, state.scanResult, projectRoot, setScanResult, setExistingProvider, setError]);
-    // Transition from scan to provider select if no API key
     useEffect(() => {
         if (state.phase === 'scanning' && state.scanResult && !state.hasApiKey) {
-            // Check one more time for available provider (in case env was set after initial check)
             const existingProvider = getAvailableProvider();
             if (existingProvider) {
                 setExistingProvider(existingProvider);
             }
-            // Otherwise stay at scanning which will show provider-select
         }
     }, [state.phase, state.scanResult, state.hasApiKey, setExistingProvider]);
-    // Run AI analysis when in ai-analysis phase
+    // Run AI analysis
     useEffect(() => {
         if (state.phase !== 'ai-analysis' || aiAnalysisStarted.current)
             return;
@@ -116,7 +105,12 @@ export function InitScreen({ projectRoot, sessionState, onComplete, onCancel, })
             return;
         aiAnalysisStarted.current = true;
         const runAnalysis = async () => {
-            initTracing();
+            try {
+                initTracing();
+            }
+            catch (err) {
+                logger.error(`Failed to init tracing: ${err instanceof Error ? err.message : String(err)}`);
+            }
             const aiEnhancer = new AIEnhancer({
                 provider: state.provider,
                 model: state.model,
@@ -150,7 +144,6 @@ export function InitScreen({ projectRoot, sessionState, onComplete, onCancel, })
                 else {
                     setEnhancedResult(enhancedResult);
                 }
-                // Persist context for /sync and /new
                 try {
                     const git = await getGitMetadata(projectRoot);
                     await saveContext({
@@ -162,8 +155,9 @@ export function InitScreen({ projectRoot, sessionState, onComplete, onCancel, })
                     }, projectRoot);
                 }
                 catch (saveErr) {
-                    logger.error(`Failed to save project context: ${saveErr instanceof Error ? saveErr.message : String(saveErr)}`);
-                    // Non-blocking: don't fail /init if context save fails
+                    const reason = saveErr instanceof Error ? saveErr.message : String(saveErr);
+                    logger.error(`Failed to save project context: ${reason}`);
+                    setAiError(`Warning: AI analysis succeeded but context could not be saved (${reason}). Run /sync after init to persist context.`);
                 }
             }
             catch (error) {
@@ -173,9 +167,13 @@ export function InitScreen({ projectRoot, sessionState, onComplete, onCancel, })
                 await flushTracing();
             }
         };
-        runAnalysis();
+        runAnalysis().catch((err) => {
+            const reason = err instanceof Error ? err.message : String(err);
+            logger.error(`AI analysis failed unexpectedly: ${reason}`);
+            setAiError(reason);
+        });
     }, [state.phase, state.scanResult, state.provider, state.model, setAiProgress, updateToolCall, setEnhancedResult, setAiError]);
-    // Run generation when in generating phase
+    // Run generation
     useEffect(() => {
         if (state.phase !== 'generating' || generationStarted.current)
             return;
@@ -183,7 +181,6 @@ export function InitScreen({ projectRoot, sessionState, onComplete, onCancel, })
             return;
         generationStarted.current = true;
         const runGeneration = async () => {
-            // Use enhanced result if available, otherwise use scan result
             const sourceResult = state.enhancedResult || state.scanResult;
             const generator = new Generator({
                 existingFiles: 'backup',
@@ -193,18 +190,22 @@ export function InitScreen({ projectRoot, sessionState, onComplete, onCancel, })
             try {
                 setGenerating('Writing configuration files...');
                 const generationResult = await generator.generate(sourceResult);
-                // Extract generated file paths (keep full relative paths)
                 const generatedFiles = generationResult.writeSummary.results
                     .filter((f) => f.action === 'created' || f.action === 'backed_up' || f.action === 'overwritten')
                     .map((f) => path.relative(projectRoot, f.path));
-                // Save API key to .ralph/.env.local if requested
                 if (state.apiKeyEnteredThisSession && state.saveKeyToEnv && state.provider && apiKeyRef.current) {
-                    const envVar = getApiKeyEnvVar(state.provider);
-                    const envLocalPath = path.join(projectRoot, '.ralph', '.env.local');
-                    writeKeysToEnvFile(envLocalPath, { [envVar]: apiKeyRef.current });
+                    try {
+                        const envVar = getApiKeyEnvVar(state.provider);
+                        const envLocalPath = path.join(projectRoot, '.ralph', '.env.local');
+                        writeKeysToEnvFile(envLocalPath, { [envVar]: apiKeyRef.current });
+                    }
+                    catch (envErr) {
+                        const reason = envErr instanceof Error ? envErr.message : String(envErr);
+                        logger.error(`Failed to save API key to .env.local: ${reason}`);
+                        setError(`API key was not saved to .env.local (${reason}). You may need to set the environment variable manually.`);
+                    }
                 }
                 setGenerationComplete(generatedFiles);
-                // Load config and update session state
                 const config = await loadConfigWithDefaults(projectRoot);
                 const newSessionState = updateSessionState(sessionState, {
                     provider: state.provider ?? undefined,
@@ -213,14 +214,17 @@ export function InitScreen({ projectRoot, sessionState, onComplete, onCancel, })
                     config,
                     initialized: true,
                 });
-                // Pass generated files to completion handler for thread history
                 onComplete(newSessionState, generatedFiles);
             }
             catch (error) {
                 setError(`Failed to generate files: ${error instanceof Error ? error.message : String(error)}`);
             }
         };
-        runGeneration();
+        runGeneration().catch((err) => {
+            const reason = err instanceof Error ? err.message : String(err);
+            logger.error(`Generation failed unexpectedly: ${reason}`);
+            setError(reason);
+        });
     }, [
         state.phase,
         state.scanResult,
@@ -236,49 +240,44 @@ export function InitScreen({ projectRoot, sessionState, onComplete, onCancel, })
         setError,
         onComplete,
     ]);
-    // Handle provider selection
     const handleProviderSelect = useCallback((provider) => {
         selectProvider(provider);
     }, [selectProvider]);
-    // Handle API key input
     const handleApiKeySubmit = useCallback((key) => {
         if (!state.provider)
             return;
-        // Store key in ref
         apiKeyRef.current = key;
-        // Set key in environment for this session
         const envVar = getApiKeyEnvVar(state.provider);
         process.env[envVar] = key;
         setApiKey(key);
     }, [state.provider, setApiKey]);
-    // Handle save key confirmation
     const handleSaveKeyConfirm = useCallback((save) => {
         setSaveKey(save);
     }, [setSaveKey]);
-    // Handle model selection
     const handleModelSelect = useCallback((model) => {
         selectModel(model);
     }, [selectModel]);
-    // Handle generation confirmation
     const handleConfirmGeneration = useCallback((confirmed) => {
         confirmGeneration(confirmed);
     }, [confirmGeneration]);
-    // Get current phase config
     const phaseConfig = INIT_PHASE_CONFIGS[state.phase];
-    // Render based on current phase
-    const renderPhaseContent = () => {
+    const phaseString = `${phaseConfig.name} (${phaseConfig.number}/${INIT_TOTAL_PHASES})`;
+    // Determine if we're in a "working" state (show spinner)
+    const isWorking = (state.phase === 'scanning' && !state.scanResult) ||
+        state.phase === 'ai-analysis' ||
+        state.phase === 'generating';
+    const workingStatus = state.phase === 'scanning' ? (state.workingStatus || 'Scanning project structure...')
+        : state.phase === 'ai-analysis' ? (state.workingStatus || 'Analyzing codebase...')
+            : state.phase === 'generating' ? (state.workingStatus || 'Generating configuration files...')
+                : '';
+    // Build the input element based on phase
+    const renderInput = () => {
         switch (state.phase) {
             case 'scanning':
                 if (state.scanResult && !state.hasApiKey) {
-                    // Scan done but no API key - show provider select
                     return (_jsx(Select, { message: "Select your AI provider:", options: PROVIDER_OPTIONS, onSelect: handleProviderSelect, onCancel: onCancel }));
                 }
-                // Still scanning
-                return (_jsx(WorkingIndicator, { state: {
-                        isWorking: true,
-                        status: state.workingStatus || 'Scanning project structure...',
-                        hint: 'esc to cancel',
-                    } }));
+                return null;
             case 'provider-select':
                 return (_jsx(Select, { message: "Select your AI provider:", options: PROVIDER_OPTIONS, onSelect: handleProviderSelect, onCancel: onCancel }));
             case 'key-input':
@@ -289,37 +288,37 @@ export function InitScreen({ projectRoot, sessionState, onComplete, onCancel, })
                 if (!state.provider)
                     return null;
                 return (_jsx(Select, { message: "Select model:", options: getModelOptions(state.provider), onSelect: handleModelSelect, onCancel: onCancel }));
-            case 'ai-analysis':
-                return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["Running AI analysis with", ' ', _jsxs(Text, { color: colors.blue, children: [state.provider, "/", state.model] })] }) }), state.toolCalls.length > 0 && (_jsx(Box, { marginBottom: 1, flexDirection: "column", children: state.toolCalls.map((tc) => (_jsx(ToolCallCard, { toolName: tc.actionName, status: tc.status === 'running' ? 'running' : tc.status === 'success' ? 'complete' : tc.status === 'error' ? 'error' : 'pending', input: tc.description, output: tc.output, error: tc.error }, tc.id))) })), _jsx(WorkingIndicator, { state: {
-                                isWorking: true,
-                                status: state.workingStatus || 'Analyzing codebase...',
-                                hint: 'esc to cancel',
-                            } })] }));
             case 'confirm':
-                return (_jsxs(Box, { flexDirection: "column", children: [state.enhancedResult?.aiAnalysis && (_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { color: colors.green, children: "AI Analysis Complete" }), state.tokenUsage && (_jsxs(Text, { dimColor: true, children: ["Tokens: ", state.tokenUsage.inputTokens, " in / ", state.tokenUsage.outputTokens, " out"] }))] })), state.error && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: colors.orange, children: ["Warning: ", state.error] }) })), _jsx(Confirm, { message: "Generate Ralph configuration files?", onConfirm: handleConfirmGeneration, onCancel: onCancel, initialValue: true })] }));
-            case 'generating':
-                return (_jsx(WorkingIndicator, { state: {
-                        isWorking: true,
-                        status: state.workingStatus || 'Generating configuration files...',
-                        hint: 'please wait',
-                    } }));
-            case 'complete':
-                // Brief completion message - full summary added to thread by App
-                return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: colors.green, children: [theme.chars.bullet, " "] }), _jsx(Text, { children: "Initialization complete." })] }));
-            case 'error':
-                return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: colors.pink, bold: true, children: "Error" }), _jsx(Text, { color: colors.pink, children: state.error }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press Esc to go back" }) })] }));
+                return (_jsx(Confirm, { message: "Generate Ralph configuration files?", onConfirm: handleConfirmGeneration, onCancel: onCancel, initialValue: true }));
             default:
                 return null;
         }
     };
-    // Show scan result summary when available
+    // Scan summary display
     const renderScanSummary = () => {
         if (!state.scanResult || state.phase === 'scanning')
             return null;
         const { stack } = state.scanResult;
-        return (_jsxs(Box, { marginBottom: 1, flexDirection: "column", children: [_jsx(Text, { color: colors.yellow, bold: true, children: "Detected Stack" }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [stack.framework && (_jsxs(Text, { children: ["Framework:", ' ', _jsxs(Text, { color: colors.blue, children: [stack.framework.name, stack.framework.version ? ` ${stack.framework.version}` : ''] })] })), _jsxs(Text, { children: ["Language: ", _jsx(Text, { color: colors.blue, children: "TypeScript" })] }), stack.testing?.unit && (_jsxs(Text, { children: ["Testing: ", _jsx(Text, { color: colors.blue, children: stack.testing.unit.name })] })), _jsxs(Text, { children: ["Package Manager:", ' ', _jsx(Text, { color: colors.blue, children: stack.packageManager?.name || 'npm' })] })] })] }));
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: colors.yellow, bold: true, children: "Detected Stack" }), _jsxs(Box, { paddingLeft: 2, flexDirection: "column", children: [stack.framework && (_jsxs(Text, { children: ["Framework:", ' ', _jsxs(Text, { color: colors.blue, children: [stack.framework.name, stack.framework.version ? ` ${stack.framework.version}` : ''] })] })), _jsxs(Text, { children: ["Language: ", _jsx(Text, { color: colors.blue, children: "TypeScript" })] }), stack.testing?.unit && (_jsxs(Text, { children: ["Testing: ", _jsx(Text, { color: colors.blue, children: stack.testing.unit.name })] })), _jsxs(Text, { children: ["Package Manager:", ' ', _jsx(Text, { color: colors.blue, children: stack.packageManager?.name || 'npm' })] })] })] }));
     };
-    // Build phase string for status line
-    const phaseString = `${phaseConfig.name} (${phaseConfig.number}/${INIT_TOTAL_PHASES})`;
-    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(Box, { marginTop: 1, children: renderScanSummary() }), _jsx(Box, { marginTop: 1, children: renderPhaseContent() }), _jsx(FooterStatusBar, { action: "Initialize Project", phase: phaseString, path: projectRoot })] }));
+    // Phase-specific content (displayed in content area)
+    const renderPhaseContent = () => {
+        switch (state.phase) {
+            case 'ai-analysis':
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { children: ["Running AI analysis with", ' ', _jsxs(Text, { color: colors.blue, children: [state.provider, "/", state.model] })] }) }), state.toolCalls.length > 0 && (_jsx(Box, { flexDirection: "column", children: state.toolCalls.map((tc) => (_jsx(ToolCallCard, { toolName: tc.actionName, status: tc.status === 'running' ? 'running' : tc.status === 'success' ? 'complete' : tc.status === 'error' ? 'error' : 'pending', input: tc.description, output: tc.output, error: tc.error }, tc.id))) }))] }));
+            case 'confirm':
+                return (_jsxs(Box, { flexDirection: "column", children: [state.enhancedResult?.aiAnalysis && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: colors.green, children: [phase.complete, " "] }), _jsx(Text, { children: "AI Analysis Complete" })] }), state.tokenUsage && (_jsxs(Text, { dimColor: true, children: ["Tokens: ", state.tokenUsage.inputTokens, " in / ", state.tokenUsage.outputTokens, " out"] }))] })), state.error && (_jsxs(Text, { color: colors.orange, children: ["Warning: ", state.error] }))] }));
+            case 'complete':
+                return (_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: colors.green, children: [phase.complete, " "] }), _jsx(Text, { children: "Initialization complete." })] }));
+            case 'error':
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: colors.pink, bold: true, children: "Error" }), _jsx(Text, { color: colors.pink, children: state.error }), _jsx(Text, { dimColor: true, children: "Press Esc to go back" })] }));
+            default:
+                return null;
+        }
+    };
+    return (_jsxs(AppShell, { header: header, tips: state.phase === 'error' ? 'Esc to go back' : 'Esc to cancel', isWorking: isWorking, workingStatus: workingStatus, workingHint: "esc to cancel", error: state.phase === 'error' ? state.error : null, input: renderInput(), footerStatus: {
+            action: 'Initialize Project',
+            phase: phaseString,
+            path: projectRoot,
+        }, children: [renderScanSummary(), renderPhaseContent()] }));
 }

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

@@ -7,14 +7,21 @@
  * 2. Goals - Understand what to build
  * 3. Interview - Clarifying questions
  * 4. Generation - Generate the specification
+ * 5. Complete - Show summary and return to shell
+ *
+ * Wrapped in AppShell for consistent layout. On completion,
+ * shows SpecCompletionSummary inline before returning to shell.
  */
 import React from 'react';
 import type { AIProvider } from '../../ai/providers.js';
 import type { ScanResult } from '../../scanner/types.js';
+import type { Message } from '../components/MessageList.js';
 /**
  * Props for the InterviewScreen component
  */
 export interface InterviewScreenProps {
+    /** Pre-built header element from App */
+    header: React.ReactNode;
     /** Name of the feature being specified */
     featureName: string;
     /** Project root directory path */
@@ -27,8 +34,8 @@ export interface InterviewScreenProps {
     scanResult?: ScanResult;
     /** Path to specs directory (relative to project root, defaults to '.ralph/specs') */
     specsPath?: string;
-    /** Called when spec generation is complete - receives spec and conversation messages */
-    onComplete: (spec: string, messages: import('../components/MessageList.js').Message[]) => void;
+    /** 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 */
     onCancel: () => void;
 }
@@ -36,10 +43,6 @@ export interface InterviewScreenProps {
  * InterviewScreen component
  *
  * The main screen for the /new command interview flow. Combines all TUI
- * components (MessageList, WorkingIndicator, ChatInput, MultiSelect,
- * FooterStatusBar) to create the complete interview experience.
- *
- * Uses the useSpecGenerator hook for state and InterviewOrchestrator
- * to bridge to the AI conversation.
+ * components within an AppShell layout.
  */
-export declare function InterviewScreen({ featureName, projectRoot, provider, model, scanResult, specsPath, onComplete, onCancel, }: InterviewScreenProps): React.ReactElement;
+export declare function InterviewScreen({ header, featureName, projectRoot, provider, model, scanResult, specsPath, onComplete, onCancel, }: InterviewScreenProps): React.ReactElement;