wiggum-cli 0.7.8 → 0.9.0

package/src/tui/app.tsx

@@ -0,0 +1,297 @@
+/**
+ * Main Ink Application Entry Point
+ *
+ * The root component for the Ink-based TUI. Routes to different screens
+ * based on the current screen state. Manages session state and navigation.
+ */
+
+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
+ */
+export interface InterviewAppProps {
+  /** Name of the feature being specified */
+  featureName: string;
+  /** Project root directory path */
+  projectRoot: string;
+  /** AI provider to use */
+  provider: AIProvider;
+  /** Model ID to use */
+  model: string;
+  /** Optional scan result with detected tech stack */
+  scanResult?: ScanResult;
+}
+
+/**
+ * Props for the main App component
+ */
+export interface AppProps {
+  /** 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 current screen state.
+ * Manages session state and provides navigation between screens.
+ *
+ * @example
+ * ```tsx
+ * renderApp({
+ *   screen: 'welcome',
+ *   initialSessionState: sessionState,
+ *   version: '0.8.0',
+ *   onExit: () => process.exit(0),
+ * });
+ * ```
+ */
+export function App({
+  screen: initialScreen,
+  initialSessionState,
+  version = '0.8.0',
+  interviewProps,
+  onComplete,
+  onExit,
+  onRunInit,
+}: AppProps): React.ReactElement | null {
+  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]);
+
+  /**
+   * Handle session state changes
+   */
+  const handleSessionStateChange = useCallback((newState: SessionState) => {
+    setSessionState(newState);
+  }, []);
+
+  // 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;
+}
+
+/**
+ * Render the App component to the terminal
+ *
+ * Helper function that wraps Ink's render() to provide a clean API
+ * for starting the TUI from command handlers.
+ *
+ * @param options - Render options
+ * @returns Ink Instance that can be used to control/cleanup the render
+ *
+ * @example
+ * ```typescript
+ * const instance = renderApp({
+ *   screen: 'welcome',
+ *   initialSessionState: state,
+ *   version: '0.8.0',
+ *   onExit: () => instance.unmount(),
+ * });
+ *
+ * await instance.waitUntilExit();
+ * ```
+ */
+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/ChatInput.tsx

@@ -0,0 +1,105 @@
+/**
+ * ChatInput - Multi-line input with history for chat interactions
+ *
+ * Displays a prompt character followed by a text input.
+ * Handles submission on Enter and clears input after submit.
+ */
+
+import React, { useState } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { colors } from '../theme.js';
+
+/**
+ * Props for the ChatInput component
+ */
+export interface ChatInputProps {
+  /** Called when user presses Enter with the current input value */
+  onSubmit: (value: string) => void;
+  /** Placeholder text when empty */
+  placeholder?: string;
+  /** Whether input is disabled (e.g., during AI processing) */
+  disabled?: boolean;
+  /** Prompt character/text shown before input (default "> ") */
+  prompt?: string;
+  /** Allow empty submissions (e.g., to continue/skip phases) */
+  allowEmpty?: boolean;
+}
+
+/**
+ * ChatInput component
+ *
+ * Provides a text input with a prompt character for chat-style interactions.
+ * Clears input after submission. Shows dimmed appearance when disabled.
+ *
+ * @example
+ * ```tsx
+ * <ChatInput
+ *   onSubmit={(value) => console.log('User said:', value)}
+ *   placeholder="Type your response..."
+ *   disabled={isProcessing}
+ * />
+ * // Renders: > Type your response...
+ * ```
+ */
+export function ChatInput({
+  onSubmit,
+  placeholder = 'Type your message...',
+  disabled = false,
+  prompt = '> ',
+  allowEmpty = false,
+}: ChatInputProps): React.ReactElement {
+  const [value, setValue] = useState('');
+
+  /**
+   * Handle input submission
+   * Calls onSubmit with current value and clears the input
+   */
+  const handleSubmit = (submittedValue: string): void => {
+    // Don't submit when disabled
+    if (disabled) {
+      return;
+    }
+
+    // Don't submit empty values unless allowEmpty is true
+    if (!submittedValue.trim() && !allowEmpty) {
+      return;
+    }
+
+    onSubmit(submittedValue);
+    setValue('');
+  };
+
+  /**
+   * Handle value changes
+   * Only update if not disabled
+   */
+  const handleChange = (newValue: string): void => {
+    if (!disabled) {
+      setValue(newValue);
+    }
+  };
+
+  // When disabled, show a waiting message
+  if (disabled) {
+    return (
+      <Box flexDirection="row">
+        <Text dimColor color={colors.brown}>
+          {prompt}[waiting for AI...]
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="row">
+      <Text color={colors.yellow}>{prompt}</Text>
+      <TextInput
+        value={value}
+        onChange={handleChange}
+        onSubmit={handleSubmit}
+        placeholder={placeholder}
+      />
+    </Box>
+  );
+}

package/src/tui/components/MessageList.tsx

@@ -0,0 +1,186 @@
+/**
+ * MessageList - Scrollable conversation history display
+ *
+ * Displays the full conversation history including:
+ * - User messages
+ * - Assistant messages (with optional streaming)
+ * - System messages
+ * - Tool call cards inline with assistant messages
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { colors } from '../theme.js';
+import { StreamingText } from './StreamingText.js';
+import { ToolCallCard, type ToolCallStatus } from './ToolCallCard.js';
+
+/**
+ * Tool call information for assistant messages
+ */
+export interface ToolCall {
+  /** Name of the tool being executed */
+  toolName: string;
+  /** Current execution status */
+  status: ToolCallStatus;
+  /** Input passed to the tool */
+  input: string;
+  /** Output when complete */
+  output?: string;
+  /** Error message if failed */
+  error?: string;
+}
+
+/**
+ * Message in the conversation history
+ */
+export interface Message {
+  /** Unique identifier for the message */
+  id: string;
+  /** Who sent the message */
+  role: 'user' | 'assistant' | 'system';
+  /** Text content of the message */
+  content: string;
+  /** Tool calls included in assistant messages */
+  toolCalls?: ToolCall[];
+  /** Whether this message is currently streaming */
+  isStreaming?: boolean;
+}
+
+/**
+ * Props for the MessageList component
+ */
+export interface MessageListProps {
+  /** Array of messages to display */
+  messages: Message[];
+  /** Optional max height in lines (for future scrolling support) */
+  maxHeight?: number;
+}
+
+/**
+ * Renders a single user message
+ */
+function UserMessage({ content }: { content: string }): React.ReactElement {
+  return (
+    <Box flexDirection="row" marginY={1}>
+      <Text color={colors.white} bold>
+        You:{' '}
+      </Text>
+      <Text color={colors.white}>{content}</Text>
+    </Box>
+  );
+}
+
+/**
+ * Renders a single assistant message with optional tool calls and streaming
+ */
+function AssistantMessage({
+  content,
+  toolCalls,
+  isStreaming,
+}: {
+  content: string;
+  toolCalls?: ToolCall[];
+  isStreaming?: boolean;
+}): React.ReactElement {
+  return (
+    <Box flexDirection="column" marginY={1}>
+      {/* Tool calls appear before the message content */}
+      {toolCalls &&
+        toolCalls.length > 0 &&
+        toolCalls.map((toolCall, index) => (
+          <Box key={`tool-${index}`} marginBottom={1}>
+            <ToolCallCard
+              toolName={toolCall.toolName}
+              status={toolCall.status}
+              input={toolCall.input}
+              output={toolCall.output}
+              error={toolCall.error}
+            />
+          </Box>
+        ))}
+
+      {/* Message content with prefix */}
+      <Box flexDirection="row">
+        <Text color={colors.yellow} bold>
+          AI:{' '}
+        </Text>
+        {isStreaming ? (
+          <StreamingText text={content} isStreaming={true} color={colors.yellow} />
+        ) : (
+          <Text color={colors.yellow}>{content}</Text>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Renders a system message (dimmed text)
+ */
+function SystemMessage({ content }: { content: string }): React.ReactElement {
+  return (
+    <Box flexDirection="row" marginY={1}>
+      <Text color={colors.brown} dimColor>
+        {content}
+      </Text>
+    </Box>
+  );
+}
+
+/**
+ * MessageList component
+ *
+ * Displays the full conversation history. Each message type has
+ * distinct styling:
+ * - User messages: "You: " prefix in white
+ * - Assistant messages: "AI: " prefix in yellow, with inline tool cards
+ * - System messages: dimmed brown text
+ *
+ * For streaming messages, uses the StreamingText component to show
+ * the cursor indicator.
+ *
+ * @example
+ * ```tsx
+ * <MessageList
+ *   messages={[
+ *     { id: '1', role: 'system', content: 'Interview started' },
+ *     { id: '2', role: 'assistant', content: 'Hello! What would you like to build?' },
+ *     { id: '3', role: 'user', content: 'A todo app' },
+ *     { id: '4', role: 'assistant', content: 'Let me check...',
+ *       toolCalls: [{ toolName: 'Read File', status: 'running', input: 'package.json' }],
+ *       isStreaming: true
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export function MessageList({ messages, maxHeight }: MessageListProps): React.ReactElement {
+  // Note: maxHeight is accepted for future scrolling support
+  // Currently renders all messages - parent handles any scroll-like behavior
+  // by controlling which messages are passed in
+
+  return (
+    <Box
+      flexDirection="column"
+      {...(maxHeight ? { height: maxHeight } : {})}
+    >
+      {messages.map((message) => {
+        switch (message.role) {
+          case 'user':
+            return <UserMessage key={message.id} content={message.content} />;
+          case 'assistant':
+            return (
+              <AssistantMessage
+                key={message.id}
+                content={message.content}
+                toolCalls={message.toolCalls}
+                isStreaming={message.isStreaming}
+              />
+            );
+          case 'system':
+            return <SystemMessage key={message.id} content={message.content} />;
+        }
+      })}
+    </Box>
+  );
+}

package/src/tui/components/PhaseHeader.tsx

@@ -0,0 +1,63 @@
+/**
+ * PhaseHeader - Current phase indicator for multi-step workflows
+ *
+ * Displays the current phase with a horizontal line border.
+ * Format: ━━━ Phase X of Y: PhaseName ━━━
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { colors } from '../theme.js';
+
+/**
+ * Props for the PhaseHeader component
+ */
+export interface PhaseHeaderProps {
+  /** Current phase number (1-based) */
+  currentPhase: number;
+  /** Total number of phases */
+  totalPhases: number;
+  /** Name of the current phase */
+  phaseName: string;
+}
+
+/**
+ * Heavy horizontal box drawing character (U+2501)
+ */
+const HEAVY_HORIZONTAL = '\u2501';
+
+/**
+ * PhaseHeader component
+ *
+ * Shows the current phase progress with surrounding horizontal lines.
+ * Uses Simpson yellow for visibility.
+ *
+ * @example
+ * ```tsx
+ * <PhaseHeader
+ *   currentPhase={2}
+ *   totalPhases={4}
+ *   phaseName="Understanding Requirements"
+ * />
+ * // Renders: ━━━ Phase 2 of 4: Understanding Requirements ━━━
+ * ```
+ */
+export function PhaseHeader({
+  currentPhase,
+  totalPhases,
+  phaseName,
+}: PhaseHeaderProps): React.ReactElement {
+  // Build the phase text
+  const phaseText = `Phase ${currentPhase} of ${totalPhases}: ${phaseName}`;
+
+  // Create horizontal line segments (3 characters each side)
+  const lineSegment = HEAVY_HORIZONTAL.repeat(3);
+
+  return (
+    <Box flexDirection="row" justifyContent="center" width="100%">
+      <Text color={colors.yellow}>
+        {lineSegment} {phaseText} {lineSegment}
+      </Text>
+    </Box>
+  );
+}