wiggum-cli 0.8.0 → 0.9.1

package/src/tui/screens/InitScreen.tsx

@@ -0,0 +1,63 @@
+/**
+ * InitScreen - Screen for the /init command workflow
+ *
+ * Handles project initialization within the TUI context.
+ * Since the init workflow uses readline-based prompts, this screen
+ * signals that init should run outside of Ink.
+ */
+
+import React, { useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { colors } from '../theme.js';
+
+/**
+ * Props for the InitScreen component
+ */
+export interface InitScreenProps {
+  /** Called to trigger the init workflow (runs outside Ink) */
+  onRunInit: () => void;
+  /** Called when user cancels */
+  onCancel: () => void;
+}
+
+/**
+ * InitScreen component
+ *
+ * Displays a message and triggers the init workflow.
+ * The actual init workflow runs outside of Ink because it uses
+ * readline-based interactive prompts.
+ */
+export function InitScreen({
+  onRunInit,
+  onCancel: _onCancel,
+}: InitScreenProps): React.ReactElement {
+  // Trigger init workflow on mount
+  useEffect(() => {
+    // Small delay to allow the screen to render before unmounting
+    const timer = setTimeout(() => {
+      onRunInit();
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [onRunInit]);
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box marginBottom={1}>
+        <Text color={colors.yellow} bold>
+          Initializing Project
+        </Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text>Starting initialization workflow...</Text>
+      </Box>
+
+      <Box>
+        <Text dimColor>
+          Press Ctrl+C to cancel
+        </Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/screens/InterviewScreen.tsx

@@ -9,8 +9,8 @@
  * 4. Generation - Generate the specification
  */
 
-import React, { useEffect, useCallback } from 'react';
-import { Box, useInput } from 'ink';
+import React, { useEffect, useCallback, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
 import type { AIProvider } from '../../ai/providers.js';
 import type { ScanResult } from '../../scanner/types.js';
 import { PhaseHeader } from '../components/PhaseHeader.js';
@@ -21,7 +21,10 @@ import {
   useSpecGenerator,
   PHASE_CONFIGS,
   TOTAL_DISPLAY_PHASES,
+  type GeneratorPhase,
 } from '../hooks/useSpecGenerator.js';
+import { InterviewOrchestrator } from '../orchestration/interview-orchestrator.js';
+import { colors } from '../theme.js';
 
 /**
  * Props for the InterviewScreen component
@@ -50,19 +53,8 @@ export interface InterviewScreenProps {
  * components (PhaseHeader, MessageList, WorkingIndicator, ChatInput) to
  * create the complete interview experience.
  *
- * Uses the useSpecGenerator hook to manage state and actions.
- *
- * @example
- * ```tsx
- * <InterviewScreen
- *   featureName="user-auth"
- *   projectRoot="/path/to/project"
- *   provider="anthropic"
- *   model="claude-sonnet-4-5-20250514"
- *   onComplete={(spec) => writeSpec(spec)}
- *   onCancel={() => process.exit(0)}
- * />
- * ```
+ * Uses the useSpecGenerator hook for state and InterviewOrchestrator
+ * to bridge to the AI conversation.
  */
 export function InterviewScreen({
   featureName,
@@ -75,33 +67,167 @@ export function InterviewScreen({
 }: InterviewScreenProps): React.ReactElement {
   const {
     state,
-    submitAnswer,
     initialize,
+    addMessage,
+    updateStreamingMessage,
+    completeStreamingMessage,
+    startToolCall,
+    completeToolCall,
+    setPhase,
+    setGeneratedSpec,
+    setError,
+    setWorking,
+    setReady,
   } = useSpecGenerator();
 
-  // Initialize the generator when the component mounts
+  // Track orchestrator instance
+  const orchestratorRef = useRef<InterviewOrchestrator | null>(null);
+
+  // Track if we're in streaming mode for the current message
+  const isStreamingRef = useRef(false);
+  const streamContentRef = useRef('');
+
+  // Track if component is unmounted to prevent callbacks after cleanup
+  const isCancelledRef = useRef(false);
+
+  // Use refs for callbacks to avoid stale closures and unnecessary effect re-runs
+  const onCompleteRef = useRef(onComplete);
+  onCompleteRef.current = onComplete;
+
+  // Initialize the orchestrator when the component mounts
   useEffect(() => {
+    // Reset cancelled flag on mount
+    isCancelledRef.current = false;
+
+    // Initialize hook state
     initialize({
       featureName,
       projectRoot,
       provider,
       model,
     });
-  }, [featureName, projectRoot, provider, model, initialize]);
 
-  // Call onComplete when spec is generated
-  useEffect(() => {
-    if (state.generatedSpec) {
-      onComplete(state.generatedSpec);
-    }
-  }, [state.generatedSpec, onComplete]);
+    // Create orchestrator with callbacks that check for cancellation
+    const orchestrator = new InterviewOrchestrator({
+      featureName,
+      projectRoot,
+      provider,
+      model,
+      scanResult,
+      onMessage: (role, content) => {
+        if (isCancelledRef.current) return;
+        addMessage(role, content);
+      },
+      onStreamChunk: (chunk) => {
+        if (isCancelledRef.current) return;
+        if (!isStreamingRef.current) {
+          // Start a new streaming message
+          isStreamingRef.current = true;
+          streamContentRef.current = chunk;
+          addMessage('assistant', chunk);
+        } else {
+          // Append to existing streaming content
+          streamContentRef.current += chunk;
+          updateStreamingMessage(streamContentRef.current);
+        }
+      },
+      onStreamComplete: () => {
+        if (isCancelledRef.current) return;
+        if (isStreamingRef.current) {
+          completeStreamingMessage();
+          isStreamingRef.current = false;
+          streamContentRef.current = '';
+        }
+      },
+      onToolStart: (toolName, input) => {
+        if (isCancelledRef.current) return '';
+        return startToolCall(toolName, input);
+      },
+      onToolEnd: (toolId, output, error) => {
+        if (isCancelledRef.current) return;
+        completeToolCall(toolId, output, error);
+      },
+      onPhaseChange: (phase: GeneratorPhase) => {
+        if (isCancelledRef.current) return;
+        setPhase(phase);
+      },
+      onComplete: (spec) => {
+        if (isCancelledRef.current) return;
+        setGeneratedSpec(spec);
+        // Use ref to avoid stale closure
+        onCompleteRef.current(spec);
+      },
+      onError: (error) => {
+        if (isCancelledRef.current) return;
+        setError(error);
+      },
+      onWorkingChange: (isWorking, status) => {
+        if (isCancelledRef.current) return;
+        setWorking(isWorking, status);
+      },
+      onReady: () => {
+        if (isCancelledRef.current) return;
+        setReady();
+      },
+    });
 
-  // Handle user input submission
+    orchestratorRef.current = orchestrator;
+
+    // Start the orchestrator
+    orchestrator.start();
+
+    // Cleanup: mark as cancelled to prevent callbacks after unmount
+    return () => {
+      isCancelledRef.current = true;
+      orchestratorRef.current = null;
+    };
+  }, [featureName, projectRoot, provider, model, scanResult]);
+
+  // Handle user input submission based on current phase
   const handleSubmit = useCallback(
     async (value: string) => {
-      await submitAnswer(value);
+      const orchestrator = orchestratorRef.current;
+      if (!orchestrator) return;
+
+      // Add user message to display
+      if (value) {
+        addMessage('user', value);
+      }
+
+      const currentPhase = orchestrator.getPhase();
+
+      switch (currentPhase) {
+        case 'context':
+          if (value) {
+            // User entered a reference URL/path
+            await orchestrator.addReference(value);
+          } else {
+            // Empty input = done with context, advance to goals
+            await orchestrator.advanceToGoals();
+          }
+          break;
+
+        case 'goals':
+          // User entered their goals
+          await orchestrator.submitGoals(value);
+          break;
+
+        case 'interview':
+          if (value.toLowerCase() === 'done' || value.toLowerCase() === 'skip') {
+            // Skip to generation
+            await orchestrator.skipToGeneration();
+          } else {
+            // Submit answer
+            await orchestrator.submitAnswer(value);
+          }
+          break;
+
+        default:
+          // In generation or complete phase, ignore input
+          break;
+      }
     },
-    [submitAnswer]
+    [addMessage]
   );
 
   // Handle keyboard input for Escape key
@@ -115,8 +241,7 @@ export function InterviewScreen({
   const phaseConfig = PHASE_CONFIGS[state.phase];
 
   // Determine if input should be disabled
-  // Input is enabled when awaiting input and not working
-  const inputDisabled = !state.awaitingInput || state.isWorking;
+  const inputDisabled = !state.awaitingInput || state.isWorking || state.phase === 'complete';
 
   // Build the working indicator state
   const workingState = {
@@ -125,6 +250,24 @@ export function InterviewScreen({
     hint: 'esc to cancel',
   };
 
+  // Get placeholder text based on phase
+  const getPlaceholder = () => {
+    switch (state.phase) {
+      case 'context':
+        return 'Enter URL or file path, or press Enter to continue...';
+      case 'goals':
+        return 'Describe what you want to build...';
+      case 'interview':
+        return 'Type your response (or "done" to generate spec)...';
+      case 'generation':
+        return 'Generating specification...';
+      case 'complete':
+        return 'Specification complete!';
+      default:
+        return 'Type your response...';
+    }
+  };
+
   return (
     <Box flexDirection="column" padding={1}>
       {/* Phase header showing current progress */}
@@ -134,31 +277,43 @@ export function InterviewScreen({
         phaseName={phaseConfig.name}
       />
 
+      {/* Error display */}
+      {state.error && (
+        <Box marginY={1}>
+          <Text color="red">Error: {state.error}</Text>
+        </Box>
+      )}
+
       {/* Conversation history */}
       <Box marginY={1}>
         <MessageList messages={state.messages} />
       </Box>
 
       {/* Working indicator when AI is processing */}
-      <Box marginY={1}>
-        <WorkingIndicator state={workingState} />
-      </Box>
+      {state.isWorking && (
+        <Box marginY={1}>
+          <WorkingIndicator state={workingState} />
+        </Box>
+      )}
+
+      {/* Completion message */}
+      {state.phase === 'complete' && (
+        <Box marginY={1}>
+          <Text color={colors.green}>Specification generated successfully!</Text>
+        </Box>
+      )}
 
       {/* User input area */}
-      <Box marginTop={1}>
-        <ChatInput
-          onSubmit={handleSubmit}
-          disabled={inputDisabled}
-          allowEmpty={state.phase === 'context'}
-          placeholder={
-            state.phase === 'context'
-              ? 'Enter URL or file path, or press Enter to continue...'
-              : state.phase === 'goals'
-                ? 'Describe what you want to build...'
-                : 'Type your response...'
-          }
-        />
-      </Box>
+      {state.phase !== 'complete' && (
+        <Box marginTop={1}>
+          <ChatInput
+            onSubmit={handleSubmit}
+            disabled={inputDisabled}
+            allowEmpty={state.phase === 'context'}
+            placeholder={getPlaceholder()}
+          />
+        </Box>
+      )}
     </Box>
   );
 }

package/src/tui/screens/MainShell.tsx

@@ -0,0 +1,290 @@
+/**
+ * MainShell - Ink-based REPL replacement
+ *
+ * The main interactive shell for Wiggum CLI, replacing the readline REPL.
+ * Handles slash commands and provides navigation to other screens.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput, useApp } from 'ink';
+import { MessageList, type Message } from '../components/MessageList.js';
+import { ChatInput } from '../components/ChatInput.js';
+import { colors } from '../theme.js';
+import {
+  parseInput,
+  resolveCommandAlias,
+  formatHelpText,
+  type ReplCommandName,
+} from '../../repl/command-parser.js';
+import type { SessionState } from '../../repl/session-state.js';
+
+/**
+ * Navigation targets for the shell
+ */
+export type NavigationTarget = 'welcome' | 'shell' | 'interview' | 'init';
+
+/**
+ * Navigation props passed to target screens
+ */
+export interface NavigationProps {
+  featureName?: string;
+  [key: string]: unknown;
+}
+
+/**
+ * Props for MainShell component
+ */
+export interface MainShellProps {
+  /** Current session state */
+  sessionState: SessionState;
+  /** Called when navigating to another screen */
+  onNavigate: (target: NavigationTarget, props?: NavigationProps) => void;
+  /** Called when session state changes */
+  onSessionStateChange?: (state: SessionState) => void;
+}
+
+/**
+ * Generate a unique ID for messages
+ */
+function generateId(): string {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+/**
+ * MainShell component
+ *
+ * The main interactive shell that handles slash commands and navigation.
+ * Replaces the readline-based REPL with an Ink-powered TUI.
+ *
+ * @example
+ * ```tsx
+ * <MainShell
+ *   sessionState={state}
+ *   onNavigate={(target, props) => setScreen(target, props)}
+ * />
+ * ```
+ */
+export function MainShell({
+  sessionState,
+  onNavigate,
+}: MainShellProps): React.ReactElement {
+  const { exit } = useApp();
+  const [messages, setMessages] = useState<Message[]>([]);
+
+  /**
+   * Add a system message to the conversation
+   */
+  const addSystemMessage = useCallback((content: string) => {
+    const message: Message = {
+      id: generateId(),
+      role: 'system',
+      content,
+    };
+    setMessages((prev) => [...prev, message]);
+  }, []);
+
+  /**
+   * Handle /help command
+   */
+  const handleHelp = useCallback(() => {
+    addSystemMessage(formatHelpText());
+  }, [addSystemMessage]);
+
+  /**
+   * Handle /init command
+   */
+  const handleInit = useCallback(() => {
+    // Navigate to init screen
+    onNavigate('init');
+  }, [onNavigate]);
+
+  /**
+   * Handle /new command
+   */
+  const handleNew = useCallback((args: string[]) => {
+    if (args.length === 0) {
+      addSystemMessage('Feature name required. Usage: /new <feature-name>');
+      return;
+    }
+
+    if (!sessionState.initialized) {
+      addSystemMessage('Project not initialized. Run /init first.');
+      return;
+    }
+
+    const featureName = args[0];
+    onNavigate('interview', { featureName });
+  }, [sessionState.initialized, onNavigate, addSystemMessage]);
+
+  /**
+   * Handle /run command
+   */
+  const handleRun = useCallback((args: string[]) => {
+    if (args.length === 0) {
+      addSystemMessage('Feature name required. Usage: /run <feature-name>');
+      return;
+    }
+
+    if (!sessionState.initialized) {
+      addSystemMessage('Project not initialized. Run /init first.');
+      return;
+    }
+
+    // TODO: Implement run screen navigation
+    addSystemMessage(`Run command for "${args[0]}" - not yet implemented in TUI mode.`);
+  }, [sessionState.initialized, addSystemMessage]);
+
+  /**
+   * Handle /monitor command
+   */
+  const handleMonitor = useCallback((args: string[]) => {
+    if (args.length === 0) {
+      addSystemMessage('Feature name required. Usage: /monitor <feature-name>');
+      return;
+    }
+
+    // TODO: Implement monitor screen navigation
+    addSystemMessage(`Monitor command for "${args[0]}" - not yet implemented in TUI mode.`);
+  }, [addSystemMessage]);
+
+  /**
+   * Handle /config command
+   */
+  const handleConfig = useCallback((args: string[]) => {
+    // TODO: Implement config screen or inline config
+    if (args.length === 0) {
+      addSystemMessage('Config management - not yet implemented in TUI mode. Use CLI: wiggum config');
+    } else {
+      addSystemMessage(`Config: ${args.join(' ')} - not yet implemented in TUI mode.`);
+    }
+  }, [addSystemMessage]);
+
+  /**
+   * Handle /exit command
+   */
+  const handleExit = useCallback(() => {
+    addSystemMessage('Goodbye!');
+    // Small delay to show message before exit
+    setTimeout(() => {
+      exit();
+    }, 100);
+  }, [addSystemMessage, exit]);
+
+  /**
+   * Execute a slash command
+   */
+  const executeCommand = useCallback((commandName: ReplCommandName, args: string[]) => {
+    switch (commandName) {
+      case 'help':
+        handleHelp();
+        break;
+      case 'init':
+        handleInit();
+        break;
+      case 'new':
+        handleNew(args);
+        break;
+      case 'run':
+        handleRun(args);
+        break;
+      case 'monitor':
+        handleMonitor(args);
+        break;
+      case 'config':
+        handleConfig(args);
+        break;
+      case 'exit':
+        handleExit();
+        break;
+      default:
+        addSystemMessage(`Unknown command: ${commandName}`);
+    }
+  }, [handleHelp, handleInit, handleNew, handleRun, handleMonitor, handleConfig, handleExit, addSystemMessage]);
+
+  /**
+   * Handle natural language input
+   */
+  const handleNaturalLanguage = useCallback((_text: string) => {
+    // For now, just show a tip (text parameter reserved for future AI chat)
+    addSystemMessage('Tip: Use /help to see available commands, or /new <feature> to create a spec.');
+  }, [addSystemMessage]);
+
+  /**
+   * Handle user input submission
+   */
+  const handleSubmit = useCallback((value: string) => {
+    const parsed = parseInput(value);
+
+    switch (parsed.type) {
+      case 'empty':
+        // Ignore empty input
+        break;
+
+      case 'slash-command': {
+        const { command } = parsed;
+        if (!command) break;
+
+        const resolvedName = resolveCommandAlias(command.name);
+        if (!resolvedName) {
+          addSystemMessage(`Unknown command: /${command.name}. Type /help for available commands.`);
+          break;
+        }
+
+        executeCommand(resolvedName, command.args);
+        break;
+      }
+
+      case 'natural-language': {
+        handleNaturalLanguage(parsed.text!);
+        break;
+      }
+    }
+  }, [executeCommand, handleNaturalLanguage, addSystemMessage]);
+
+  // Handle Ctrl+C
+  useInput((input, key) => {
+    if (key.ctrl && input === 'c') {
+      addSystemMessage('Use /exit to quit');
+    }
+  });
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text color={colors.yellow} bold>Wiggum Interactive Mode</Text>
+        <Text dimColor> │ </Text>
+        {sessionState.initialized ? (
+          <Text color={colors.green}>Ready</Text>
+        ) : (
+          <Text color={colors.orange}>Not initialized - run /init</Text>
+        )}
+      </Box>
+
+      {/* Status bar */}
+      <Box marginBottom={1}>
+        <Text dimColor>
+          {sessionState.provider ? `${sessionState.provider}/${sessionState.model}` : 'No provider configured'}
+        </Text>
+        <Text dimColor> │ Type /help for commands</Text>
+      </Box>
+
+      {/* Message history */}
+      {messages.length > 0 && (
+        <Box marginY={1} flexDirection="column">
+          <MessageList messages={messages} />
+        </Box>
+      )}
+
+      {/* Input */}
+      <Box marginTop={1}>
+        <ChatInput
+          onSubmit={handleSubmit}
+          disabled={false}
+          placeholder="Enter command or type /help..."
+          prompt="wiggum> "
+        />
+      </Box>
+    </Box>
+  );
+}