wiggum-cli 0.7.8 → 0.8.0

package/dist/tui/theme.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Theme configuration for Ink-based Terminal UI
+ *
+ * Adapts the Simpson color palette for Ink's styling system.
+ * Import from './theme.js' to use these constants in Ink components.
+ */
+/**
+ * Simpson color palette - hex values for Ink components
+ *
+ * Usage in Ink:
+ *   <Text color={colors.yellow}>Yellow text</Text>
+ *   <Box borderColor={colors.brown}>...</Box>
+ */
+export declare const colors: {
+    /** Marge Simpson hair / sky blue */
+    readonly blue: "#2f64d6";
+    /** Simpson family skin tone - primary accent */
+    readonly yellow: "#f8db27";
+    /** Homer's hair / wood tones - secondary/muted */
+    readonly brown: "#9c5b01";
+    /** Highlights and emphasis */
+    readonly white: "#ffffff";
+    /** Danger/warnings/errors */
+    readonly pink: "#ff81c1";
+};
+/**
+ * Box drawing characters for custom borders
+ */
+export declare const box: {
+    readonly topLeft: "┌";
+    readonly topRight: "┐";
+    readonly bottomLeft: "└";
+    readonly bottomRight: "┘";
+    readonly horizontal: "─";
+    readonly vertical: "│";
+};
+/**
+ * Phase/progress indicator characters
+ */
+export declare const phase: {
+    readonly pending: "○";
+    readonly active: "◐";
+    readonly complete: "✓";
+    readonly error: "✗";
+};
+/**
+ * Phase status type for type-safe status handling
+ */
+export type PhaseStatus = keyof typeof phase;
+/**
+ * Color name type for type-safe color selection
+ */
+export type ColorName = keyof typeof colors;
+/**
+ * Get color hex value by name
+ */
+export declare function getColor(name: ColorName): string;
+/**
+ * Get phase character by status
+ */
+export declare function getPhaseChar(status: PhaseStatus): string;
+//# sourceMappingURL=theme.d.ts.map

package/dist/tui/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/tui/theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,MAAM;IACjB,oCAAoC;;IAEpC,gDAAgD;;IAEhD,kDAAkD;;IAElD,8BAA8B;;IAE9B,6BAA6B;;CAErB,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,GAAG;;;;;;;CAON,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,KAAK;;;;;CAKR,CAAC;AAEX;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,KAAK,CAAC;AAE7C;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,MAAM,CAAC;AAE5C;;GAEG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAEhD;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAExD"}

package/dist/tui/theme.js

@@ -0,0 +1,58 @@
+/**
+ * Theme configuration for Ink-based Terminal UI
+ *
+ * Adapts the Simpson color palette for Ink's styling system.
+ * Import from './theme.js' to use these constants in Ink components.
+ */
+/**
+ * Simpson color palette - hex values for Ink components
+ *
+ * Usage in Ink:
+ *   <Text color={colors.yellow}>Yellow text</Text>
+ *   <Box borderColor={colors.brown}>...</Box>
+ */
+export const colors = {
+    /** Marge Simpson hair / sky blue */
+    blue: '#2f64d6',
+    /** Simpson family skin tone - primary accent */
+    yellow: '#f8db27',
+    /** Homer's hair / wood tones - secondary/muted */
+    brown: '#9c5b01',
+    /** Highlights and emphasis */
+    white: '#ffffff',
+    /** Danger/warnings/errors */
+    pink: '#ff81c1',
+};
+/**
+ * Box drawing characters for custom borders
+ */
+export const box = {
+    topLeft: '\u250c',
+    topRight: '\u2510',
+    bottomLeft: '\u2514',
+    bottomRight: '\u2518',
+    horizontal: '\u2500',
+    vertical: '\u2502',
+};
+/**
+ * Phase/progress indicator characters
+ */
+export const phase = {
+    pending: '\u25cb', // ○
+    active: '\u25d0', // ◐
+    complete: '\u2713', // ✓
+    error: '\u2717', // ✗
+};
+/**
+ * Get color hex value by name
+ */
+export function getColor(name) {
+    return colors[name];
+}
+/**
+ * Get phase character by status
+ */
+export function getPhaseChar(status) {
+    return phase[status];
+}
+//# sourceMappingURL=theme.js.map

package/dist/tui/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/tui/theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,oCAAoC;IACpC,IAAI,EAAE,SAAS;IACf,gDAAgD;IAChD,MAAM,EAAE,SAAS;IACjB,kDAAkD;IAClD,KAAK,EAAE,SAAS;IAChB,8BAA8B;IAC9B,KAAK,EAAE,SAAS;IAChB,6BAA6B;IAC7B,IAAI,EAAE,SAAS;CACP,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG;IACjB,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,QAAQ;IACpB,WAAW,EAAE,QAAQ;IACrB,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,QAAQ;CACV,CAAC;AAEX;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,OAAO,EAAE,QAAQ,EAAE,IAAI;IACvB,MAAM,EAAE,QAAQ,EAAE,IAAI;IACtB,QAAQ,EAAE,QAAQ,EAAE,IAAI;IACxB,KAAK,EAAE,QAAQ,EAAE,IAAI;CACb,CAAC;AAYX;;GAEG;AACH,MAAM,UAAU,QAAQ,CAAC,IAAe;IACtC,OAAO,MAAM,CAAC,IAAI,CAAC,CAAC;AACtB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,MAAmB;IAC9C,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;AACvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiggum-cli",
-  "version": "0.7.8",
+  "version": "0.8.0",
   "description": "AI-powered feature development loop CLI",
   "type": "module",
   "main": "dist/index.js",
@@ -37,11 +37,16 @@
     "braintrust": "^2.0.2",
     "cfonts": "^3.2.0",
     "commander": "^12.1.0",
+    "ink": "^5.2.1",
+    "ink-spinner": "^5.0.0",
+    "ink-text-input": "^6.0.0",
     "picocolors": "^1.0.0",
+    "react": "^18.3.1",
     "zod": "^4.3.5"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",
+    "@types/react": "^19.2.9",
     "typescript": "^5.3.0",
     "vitest": "^4.0.17"
   },

package/src/tui/app.tsx

@@ -0,0 +1,138 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import { render, type Instance } from 'ink';
+import type { AIProvider } from '../ai/providers.js';
+import type { ScanResult } from '../scanner/types.js';
+import { InterviewScreen } from './screens/InterviewScreen.js';
+
+/**
+ * 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;
+}
+
+/**
+ * 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 */
+  screen: AppScreen;
+  /** 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;
+}
+
+/**
+ * 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.
+ *
+ * @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);
+ *   },
+ * });
+ * ```
+ */
+export function App({
+  screen,
+  interviewProps,
+  onComplete,
+  onExit,
+}: 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?.();
+        }}
+      />
+    );
+  }
+
+  // Future screens would be added here:
+  // if (screen === 'init' && initProps) { ... }
+  // if (screen === 'shell' && shellProps) { ... }
+  // if (screen === 'monitor' && monitorProps) { ... }
+
+  // Fallback - shouldn't happen in normal usage
+  return null;
+}
+
+/**
+ * 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 props - App component props
+ * @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) => { ... },
+ *   onExit: () => instance.unmount(),
+ * });
+ * ```
+ */
+export function renderApp(props: AppProps): Instance {
+  return render(<App {...props} />);
+}

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>
+  );
+}