wiggum-cli 0.8.0 → 0.9.0

package/src/tui/app.tsx

@@ -2,16 +2,26 @@
  * Main Ink Application Entry Point
  *
  * The root component for the Ink-based TUI. Routes to different screens
- * based on the mode/screen prop. Currently supports the interview screen
- * for the /new command, with room to add more screens (init, main shell,
- * monitor) as needed.
+ * based on the current screen state. Manages session state and navigation.
  */
 
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { render, type Instance } from 'ink';
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
 import type { AIProvider } from '../ai/providers.js';
 import type { ScanResult } from '../scanner/types.js';
+import type { SessionState } from '../repl/session-state.js';
+import { loadConfigWithDefaults } from '../utils/config.js';
 import { InterviewScreen } from './screens/InterviewScreen.js';
+import { WelcomeScreen } from './screens/WelcomeScreen.js';
+import { InitScreen } from './screens/InitScreen.js';
+import { MainShell, type NavigationTarget, type NavigationProps } from './screens/MainShell.js';
+
+/**
+ * Available screen types for the App component
+ */
+export type AppScreen = 'welcome' | 'shell' | 'interview' | 'init';
 
 /**
  * Props for the interview screen
@@ -29,88 +39,226 @@ export interface InterviewAppProps {
   scanResult?: ScanResult;
 }
 
-/**
- * Available screen types for the App component
- * Start with just 'interview', add more screens later as needed:
- * - 'init' - Project initialization wizard
- * - 'shell' - Main interactive shell
- * - 'monitor' - Agent monitoring dashboard
- */
-export type AppScreen = 'interview';
-
 /**
  * Props for the main App component
  */
 export interface AppProps {
-  /** Screen to display */
+  /** Initial screen to display */
   screen: AppScreen;
+  /** Initial session state */
+  initialSessionState: SessionState;
+  /** CLI version */
+  version?: string;
   /** Props for the interview screen (required when screen is 'interview') */
   interviewProps?: InterviewAppProps;
   /** Called when the screen completes successfully */
   onComplete?: (result: string) => void;
   /** Called when the user exits/cancels */
   onExit?: () => void;
+  /** Called when init workflow should run (outside of Ink) */
+  onRunInit?: () => void;
 }
 
 /**
  * Main App component for the Ink-based TUI
  *
- * Routes to different screens based on the `screen` prop. Currently
- * only supports the interview screen for spec generation. The component
- * structure allows easy addition of new screens in the future.
+ * Routes to different screens based on the current screen state.
+ * Manages session state and provides navigation between screens.
  *
  * @example
  * ```tsx
- * // Render the interview screen
  * renderApp({
- *   screen: 'interview',
- *   interviewProps: {
- *     featureName: 'user-auth',
- *     projectRoot: '/path/to/project',
- *     provider: 'anthropic',
- *     model: 'claude-sonnet-4-5-20250514',
- *   },
- *   onComplete: (spec) => {
- *     fs.writeFileSync('spec.md', spec);
- *   },
- *   onExit: () => {
- *     process.exit(0);
- *   },
+ *   screen: 'welcome',
+ *   initialSessionState: sessionState,
+ *   version: '0.8.0',
+ *   onExit: () => process.exit(0),
  * });
  * ```
  */
 export function App({
-  screen,
+  screen: initialScreen,
+  initialSessionState,
+  version = '0.8.0',
   interviewProps,
   onComplete,
   onExit,
+  onRunInit,
 }: AppProps): React.ReactElement | null {
-  // Route to the appropriate screen based on the screen prop
-  if (screen === 'interview' && interviewProps) {
-    return (
-      <InterviewScreen
-        featureName={interviewProps.featureName}
-        projectRoot={interviewProps.projectRoot}
-        provider={interviewProps.provider}
-        model={interviewProps.model}
-        scanResult={interviewProps.scanResult}
-        onComplete={(spec) => {
-          onComplete?.(spec);
-        }}
-        onCancel={() => {
-          onExit?.();
-        }}
-      />
-    );
-  }
+  const [currentScreen, setCurrentScreen] = useState<AppScreen>(initialScreen);
+  const [screenProps, setScreenProps] = useState<NavigationProps | null>(
+    interviewProps ? { featureName: interviewProps.featureName } : null
+  );
+  const [sessionState, setSessionState] = useState<SessionState>(initialSessionState);
+
+  /**
+   * Navigate to a different screen
+   */
+  const navigate = useCallback((target: NavigationTarget, props?: NavigationProps) => {
+    setScreenProps(props || null);
+    setCurrentScreen(target);
+  }, []);
+
+  /**
+   * Handle interview completion - save spec to disk and notify
+   */
+  const handleInterviewComplete = useCallback(async (spec: string) => {
+    // Get feature name from navigation props or initial interview props
+    const featureName = screenProps?.featureName || interviewProps?.featureName;
+
+    if (featureName && typeof featureName === 'string') {
+      try {
+        // Load config to get specs directory
+        const config = await loadConfigWithDefaults(sessionState.projectRoot);
+        const specsDir = join(sessionState.projectRoot, config.paths.specs);
+
+        // Create specs directory if it doesn't exist
+        if (!existsSync(specsDir)) {
+          mkdirSync(specsDir, { recursive: true });
+        }
+
+        // Write spec to file
+        const specPath = join(specsDir, `${featureName}.md`);
+        writeFileSync(specPath, spec, 'utf-8');
+
+        // Call onComplete with the spec path for logging
+        onComplete?.(specPath);
+      } catch (error) {
+        // If saving fails, still call onComplete with spec content
+        onComplete?.(spec);
+      }
+    } else {
+      onComplete?.(spec);
+    }
+
+    // If started on interview (--tui mode), call onExit to resolve promise
+    // Otherwise, return to shell
+    if (initialScreen === 'interview') {
+      onExit?.();
+    } else {
+      navigate('shell');
+    }
+  }, [onComplete, navigate, initialScreen, onExit, screenProps, interviewProps, sessionState.projectRoot]);
+
+  /**
+   * Handle interview cancel
+   */
+  const handleInterviewCancel = useCallback(() => {
+    // If started on interview (--tui mode), call onExit to resolve promise
+    // Otherwise, return to shell
+    if (initialScreen === 'interview') {
+      onExit?.();
+    } else {
+      navigate('shell');
+    }
+  }, [navigate, initialScreen, onExit]);
+
+  /**
+   * Handle welcome continue
+   */
+  const handleWelcomeContinue = useCallback(() => {
+    navigate('shell');
+  }, [navigate]);
 
-  // Future screens would be added here:
-  // if (screen === 'init' && initProps) { ... }
-  // if (screen === 'shell' && shellProps) { ... }
-  // if (screen === 'monitor' && monitorProps) { ... }
+  /**
+   * Handle session state changes
+   */
+  const handleSessionStateChange = useCallback((newState: SessionState) => {
+    setSessionState(newState);
+  }, []);
 
-  // Fallback - shouldn't happen in normal usage
-  return null;
+  // Route to the appropriate screen
+  switch (currentScreen) {
+    case 'welcome':
+      return (
+        <WelcomeScreen
+          provider={sessionState.provider}
+          model={sessionState.model}
+          version={version}
+          isInitialized={sessionState.initialized}
+          onContinue={handleWelcomeContinue}
+        />
+      );
+
+    case 'shell':
+      return (
+        <MainShell
+          sessionState={sessionState}
+          onNavigate={navigate}
+          onSessionStateChange={handleSessionStateChange}
+        />
+      );
+
+    case 'interview': {
+      // Get feature name from props or navigation
+      const featureName = screenProps?.featureName || interviewProps?.featureName;
+
+      if (!featureName || typeof featureName !== 'string') {
+        // Missing feature name, go back to shell
+        navigate('shell');
+        return null;
+      }
+
+      if (!sessionState.provider) {
+        // No provider configured, can't run interview
+        navigate('shell');
+        return null;
+      }
+
+      return (
+        <InterviewScreen
+          featureName={featureName}
+          projectRoot={sessionState.projectRoot}
+          provider={sessionState.provider}
+          model={sessionState.model}
+          scanResult={sessionState.scanResult}
+          onComplete={handleInterviewComplete}
+          onCancel={handleInterviewCancel}
+        />
+      );
+    }
+
+    case 'init': {
+      // Handle init workflow - requires running outside Ink due to readline prompts
+      const handleRunInit = () => {
+        if (onRunInit) {
+          onRunInit();
+        } else {
+          // No init handler provided, return to shell with message
+          navigate('shell');
+        }
+      };
+
+      return (
+        <InitScreen
+          onRunInit={handleRunInit}
+          onCancel={() => navigate('shell')}
+        />
+      );
+    }
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * Render options for renderApp
+ */
+export interface RenderAppOptions {
+  /** Initial screen to display */
+  screen: AppScreen;
+  /** Initial session state */
+  initialSessionState: SessionState;
+  /** CLI version */
+  version?: string;
+  /** Props for interview screen (if starting directly on interview) */
+  interviewProps?: InterviewAppProps;
+  /** Called when spec generation completes */
+  onComplete?: (result: string) => void;
+  /** Called when user exits */
+  onExit?: () => void;
+  /** Called when init workflow should run (outside of Ink) */
+  onRunInit?: () => void;
 }
 
 /**
@@ -119,20 +267,31 @@ export function App({
  * Helper function that wraps Ink's render() to provide a clean API
  * for starting the TUI from command handlers.
  *
- * @param props - App component props
+ * @param options - Render options
  * @returns Ink Instance that can be used to control/cleanup the render
  *
  * @example
  * ```typescript
- * // In a command handler
  * const instance = renderApp({
- *   screen: 'interview',
- *   interviewProps: { ... },
- *   onComplete: (spec) => { ... },
+ *   screen: 'welcome',
+ *   initialSessionState: state,
+ *   version: '0.8.0',
  *   onExit: () => instance.unmount(),
  * });
+ *
+ * await instance.waitUntilExit();
  * ```
  */
-export function renderApp(props: AppProps): Instance {
-  return render(<App {...props} />);
+export function renderApp(options: RenderAppOptions): Instance {
+  return render(
+    <App
+      screen={options.screen}
+      initialSessionState={options.initialSessionState}
+      version={options.version}
+      interviewProps={options.interviewProps}
+      onComplete={options.onComplete}
+      onExit={options.onExit}
+      onRunInit={options.onRunInit}
+    />
+  );
 }

package/src/tui/components/WiggumBanner.tsx

@@ -0,0 +1,66 @@
+/**
+ * WiggumBanner - ASCII art banner component
+ *
+ * Displays the Wiggum CLI ASCII art logo in Simpson yellow.
+ * Inspired by Claude Code's welcome banner style.
+ */
+
+import React from 'react';
+import { Text, Box } from 'ink';
+import { colors } from '../theme.js';
+
+/**
+ * ASCII art banner for Wiggum CLI
+ * Block-style font to match the cfonts 'block' style
+ */
+const BANNER = `
+██╗    ██╗██╗ ██████╗  ██████╗ ██╗   ██╗███╗   ███╗
+██║    ██║██║██╔════╝ ██╔════╝ ██║   ██║████╗ ████║
+██║ █╗ ██║██║██║  ███╗██║  ███╗██║   ██║██╔████╔██║
+██║███╗██║██║██║   ██║██║   ██║██║   ██║██║╚██╔╝██║
+╚███╔███╔╝██║╚██████╔╝╚██████╔╝╚██████╔╝██║ ╚═╝ ██║
+ ╚══╝╚══╝ ╚═╝ ╚═════╝  ╚═════╝  ╚═════╝ ╚═╝     ╚═╝
+`;
+
+/**
+ * Props for WiggumBanner component
+ */
+export interface WiggumBannerProps {
+  /** Optional color override (defaults to Simpson yellow) */
+  color?: string;
+  /** Whether to show a compact version */
+  compact?: boolean;
+}
+
+/**
+ * WiggumBanner component
+ *
+ * Displays the Wiggum CLI ASCII art logo.
+ *
+ * @example
+ * ```tsx
+ * <WiggumBanner />
+ * <WiggumBanner color="blue" />
+ * <WiggumBanner compact />
+ * ```
+ */
+export function WiggumBanner({
+  color = colors.yellow,
+  compact = false,
+}: WiggumBannerProps): React.ReactElement {
+  if (compact) {
+    return (
+      <Box>
+        <Text color={color} bold>
+          WIGGUM CLI
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      <Text color={color}>{BANNER}</Text>
+    </Box>
+  );
+}

package/src/tui/demo.tsx

@@ -0,0 +1,111 @@
+#!/usr/bin/env node
+/**
+ * TUI Demo - Test the Ink components visually
+ *
+ * Run with: npx tsx src/tui/demo.tsx
+ */
+
+import React, { useState, useEffect } from 'react';
+import { render, Box, Text, useInput } from 'ink';
+import { PhaseHeader } from './components/PhaseHeader.js';
+import { MessageList, type Message } from './components/MessageList.js';
+import { WorkingIndicator } from './components/WorkingIndicator.js';
+import { ChatInput } from './components/ChatInput.js';
+import { colors } from './theme.js';
+
+function Demo(): React.ReactElement {
+  const [messages, setMessages] = useState<Message[]>([
+    { id: '1', role: 'system', content: 'Spec Generator initialized for feature: demo-feature' },
+    { id: '2', role: 'assistant', content: 'Welcome! Let\'s create a specification for your feature.' },
+  ]);
+  const [phase, setPhase] = useState(1);
+  const [isWorking, setIsWorking] = useState(false);
+  const [workingStatus, setWorkingStatus] = useState('');
+
+  // Handle user input
+  const handleSubmit = (value: string) => {
+    // Add user message
+    setMessages(prev => [...prev, {
+      id: String(Date.now()),
+      role: 'user' as const,
+      content: value || '(empty - continue)',
+    }]);
+
+    // Simulate AI working
+    setIsWorking(true);
+    setWorkingStatus('Thinking...');
+
+    setTimeout(() => {
+      // Simulate tool call
+      setMessages(prev => [...prev, {
+        id: String(Date.now()),
+        role: 'assistant' as const,
+        content: 'Great! Let me analyze that...',
+        toolCalls: [{
+          toolName: 'Read File',
+          status: 'complete' as const,
+          input: 'package.json',
+          output: '42 lines read',
+        }],
+      }]);
+
+      setIsWorking(false);
+      setPhase(p => Math.min(p + 1, 4));
+    }, 1500);
+  };
+
+  // Handle escape to exit
+  useInput((input, key) => {
+    if (key.escape) {
+      process.exit(0);
+    }
+  });
+
+  const phaseNames = ['Context', 'Goals', 'Interview', 'Generation'];
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Box marginBottom={1}>
+        <Text color={colors.yellow} bold>Ink TUI Demo</Text>
+        <Text color={colors.brown}> - Press Esc to exit</Text>
+      </Box>
+
+      <PhaseHeader
+        currentPhase={phase}
+        totalPhases={4}
+        phaseName={phaseNames[phase - 1]}
+      />
+
+      <Box marginY={1}>
+        <MessageList messages={messages} />
+      </Box>
+
+      <Box marginY={1}>
+        <WorkingIndicator
+          state={{
+            isWorking,
+            status: workingStatus,
+            hint: 'esc to cancel',
+          }}
+        />
+      </Box>
+
+      <Box marginTop={1}>
+        <ChatInput
+          onSubmit={handleSubmit}
+          disabled={isWorking}
+          allowEmpty={phase === 1}
+          placeholder={
+            phase === 1
+              ? 'Enter URL or file path, or press Enter to continue...'
+              : 'Type your response...'
+          }
+        />
+      </Box>
+    </Box>
+  );
+}
+
+// Render the demo
+console.clear();
+render(<Demo />);

package/src/tui/hooks/useSpecGenerator.ts

@@ -178,6 +178,28 @@ export interface UseSpecGeneratorReturn {
    * Complete a tool execution
    */
   completeToolCall: (toolId: string, output?: string, error?: string) => void;
+
+  // Orchestrator-specific actions
+
+  /**
+   * Set the current phase (used by orchestrator)
+   */
+  setPhase: (phase: GeneratorPhase) => void;
+
+  /**
+   * Set the generated spec (used by orchestrator on completion)
+   */
+  setGeneratedSpec: (spec: string) => void;
+
+  /**
+   * Set an error state (used by orchestrator on error)
+   */
+  setError: (error: string) => void;
+
+  /**
+   * Set working state with status message (used by orchestrator)
+   */
+  setWorking: (isWorking: boolean, status: string) => void;
 }
 
 /**
@@ -571,6 +593,52 @@ export function useSpecGenerator(): UseSpecGeneratorReturn {
     setState(initialState);
   }, []);
 
+  /**
+   * Set the current phase (used by orchestrator)
+   */
+  const setPhase = useCallback((phase: GeneratorPhase) => {
+    setState((prev) => ({
+      ...prev,
+      phase,
+    }));
+  }, []);
+
+  /**
+   * Set the generated spec (used by orchestrator on completion)
+   */
+  const setGeneratedSpec = useCallback((spec: string) => {
+    setState((prev) => ({
+      ...prev,
+      generatedSpec: spec,
+      phase: 'complete',
+      isWorking: false,
+      awaitingInput: false,
+    }));
+  }, []);
+
+  /**
+   * Set an error state (used by orchestrator on error)
+   */
+  const setError = useCallback((error: string) => {
+    setState((prev) => ({
+      ...prev,
+      error,
+      isWorking: false,
+    }));
+  }, []);
+
+  /**
+   * Set working state with status message (used by orchestrator)
+   */
+  const setWorking = useCallback((isWorking: boolean, status: string) => {
+    setState((prev) => ({
+      ...prev,
+      isWorking,
+      workingStatus: status,
+      awaitingInput: !isWorking && prev.phase !== 'complete',
+    }));
+  }, []);
+
   return {
     state,
     submitAnswer,
@@ -585,5 +653,10 @@ export function useSpecGenerator(): UseSpecGeneratorReturn {
     setReady,
     startToolCall,
     completeToolCall,
+    // Orchestrator-specific actions
+    setPhase,
+    setGeneratedSpec,
+    setError,
+    setWorking,
   };
 }

package/src/tui/orchestration/index.ts

@@ -0,0 +1,10 @@
+/**
+ * TUI Orchestration
+ * Exports orchestration classes that bridge TUI components to AI services
+ */
+
+export {
+  InterviewOrchestrator,
+  type InterviewOrchestratorOptions,
+  type SessionContext,
+} from './interview-orchestrator.js';