wiggum-cli 0.7.7 → 0.8.0

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

@@ -0,0 +1,55 @@
+/**
+ * InterviewScreen - Main screen for the /new command interview flow
+ *
+ * The complete TUI for the spec generation interview process.
+ * Orchestrates user input and AI responses through multiple phases:
+ * 1. Context - Gather reference URLs/files
+ * 2. Goals - Understand what to build
+ * 3. Interview - Clarifying questions
+ * 4. Generation - Generate the specification
+ */
+import React from 'react';
+import type { AIProvider } from '../../ai/providers.js';
+import type { ScanResult } from '../../scanner/types.js';
+/**
+ * Props for the InterviewScreen component
+ */
+export interface InterviewScreenProps {
+    /** 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;
+    /** Called when spec generation is complete */
+    onComplete: (spec: string) => void;
+    /** Called when user cancels the interview */
+    onCancel: () => void;
+}
+/**
+ * InterviewScreen component
+ *
+ * The main screen for the /new command interview flow. Combines all TUI
+ * 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)}
+ * />
+ * ```
+ */
+export declare function InterviewScreen({ featureName, projectRoot, provider, model, scanResult, onComplete, onCancel, }: InterviewScreenProps): React.ReactElement;
+//# sourceMappingURL=InterviewScreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InterviewScreen.d.ts","sourceRoot":"","sources":["../../../src/tui/screens/InterviewScreen.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAiC,MAAM,OAAO,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAWzD;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,0CAA0C;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,QAAQ,EAAE,UAAU,CAAC;IACrB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,8CAA8C;IAC9C,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,WAAW,EACX,WAAW,EACX,QAAQ,EACR,KAAK,EACL,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE,oBAAoB,GAAG,KAAK,CAAC,YAAY,CAyF3C"}

package/dist/tui/screens/InterviewScreen.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * InterviewScreen - Main screen for the /new command interview flow
+ *
+ * The complete TUI for the spec generation interview process.
+ * Orchestrates user input and AI responses through multiple phases:
+ * 1. Context - Gather reference URLs/files
+ * 2. Goals - Understand what to build
+ * 3. Interview - Clarifying questions
+ * 4. Generation - Generate the specification
+ */
+import { useEffect, useCallback } from 'react';
+import { Box, useInput } from 'ink';
+import { PhaseHeader } from '../components/PhaseHeader.js';
+import { MessageList } from '../components/MessageList.js';
+import { WorkingIndicator } from '../components/WorkingIndicator.js';
+import { ChatInput } from '../components/ChatInput.js';
+import { useSpecGenerator, PHASE_CONFIGS, TOTAL_DISPLAY_PHASES, } from '../hooks/useSpecGenerator.js';
+/**
+ * InterviewScreen component
+ *
+ * The main screen for the /new command interview flow. Combines all TUI
+ * 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)}
+ * />
+ * ```
+ */
+export function InterviewScreen({ featureName, projectRoot, provider, model, scanResult, onComplete, onCancel, }) {
+    const { state, submitAnswer, initialize, } = useSpecGenerator();
+    // Initialize the generator when the component mounts
+    useEffect(() => {
+        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]);
+    // Handle user input submission
+    const handleSubmit = useCallback(async (value) => {
+        await submitAnswer(value);
+    }, [submitAnswer]);
+    // Handle keyboard input for Escape key
+    useInput((input, key) => {
+        if (key.escape) {
+            onCancel();
+        }
+    });
+    // Get current phase configuration
+    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;
+    // Build the working indicator state
+    const workingState = {
+        isWorking: state.isWorking,
+        status: state.workingStatus,
+        hint: 'esc to cancel',
+    };
+    return (_jsxs(Box, { flexDirection: "column", padding: 1, children: [_jsx(PhaseHeader, { currentPhase: phaseConfig.number, totalPhases: TOTAL_DISPLAY_PHASES, phaseName: phaseConfig.name }), _jsx(Box, { marginY: 1, children: _jsx(MessageList, { messages: state.messages }) }), _jsx(Box, { marginY: 1, children: _jsx(WorkingIndicator, { state: workingState }) }), _jsx(Box, { marginTop: 1, children: _jsx(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...' }) })] }));
+}
+//# sourceMappingURL=InterviewScreen.js.map

package/dist/tui/screens/InterviewScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InterviewScreen.js","sourceRoot":"","sources":["../../../src/tui/screens/InterviewScreen.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+/**
+ * Screen components for the Wiggum TUI
+ */
+export { InterviewScreen } from './InterviewScreen.js';
+export type { InterviewScreenProps } from './InterviewScreen.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/tui/screens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tui/screens/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/tui/screens/index.js

@@ -0,0 +1,5 @@
+/**
+ * Screen components for the Wiggum TUI
+ */
+export { InterviewScreen } from './InterviewScreen.js';
+//# sourceMappingURL=index.js.map

package/dist/tui/screens/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tui/screens/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}

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.7",
+  "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/commands/init.ts

@@ -28,7 +28,7 @@ import {
   fileTree,
   nextStepsBox,
 } from '../utils/colors.js';
-import { flushTracing } from '../utils/tracing.js';
+import { flushTracing, traced, initTracing } from '../utils/tracing.js';
 import { createShimmerSpinner, type ShimmerSpinner } from '../utils/spinner.js';
 import { startRepl, createSessionState } from '../repl/index.js';
 import { loadConfigWithDefaults } from '../utils/config.js';
@@ -288,8 +288,19 @@ export async function runInitWorkflow(
 
   let enhancedResult: EnhancedScanResult;
 
+  // Initialize tracing before creating parent span
+  initTracing();
+
   try {
-    enhancedResult = await aiEnhancer.enhance(scanResult);
+    enhancedResult = await traced(
+      async () => {
+        return await aiEnhancer.enhance(scanResult);
+      },
+      {
+        name: 'ai-analysis',
+        type: 'task',
+      }
+    );
 
     if (enhancedResult.aiEnhanced && enhancedResult.aiAnalysis) {
       // Set token usage on spinner before stopping

package/src/commands/new.ts

@@ -12,7 +12,7 @@ import { loadConfigWithDefaults, hasConfig } from '../utils/config.js';
 import { getAvailableProvider, type AIProvider, AVAILABLE_MODELS } from '../ai/providers.js';
 import { SpecGenerator } from '../ai/conversation/index.js';
 import { Scanner, type ScanResult } from '../scanner/index.js';
-import { flushTracing } from '../utils/tracing.js';
+import { flushTracing, traced, initTracing } from '../utils/tracing.js';
 import pc from 'picocolors';
 import * as prompts from '@clack/prompts';
 
@@ -281,9 +281,21 @@ export async function newCommand(feature: string, options: NewOptions = {}): Pro
       scanResult,
     });
 
-    const generatedSpec = await specGenerator.run();
+    // Initialize tracing BEFORE creating parent span (ensures logger is ready)
+    initTracing();
+
+    const generatedSpec = await traced(
+      async () => {
+        // All AI calls inside run() automatically become child spans
+        return await specGenerator.run();
+      },
+      {
+        name: `generate-spec-${feature}`,
+        type: 'task',
+      }
+    );
 
-    // Flush any pending Braintrust tracing spans (Task 2)
+    // Flush any pending Braintrust tracing spans
     await flushTracing();
 
     if (!generatedSpec) {

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