wiggum-cli 0.7.8 → 0.9.0

package/src/tui/components/StreamingText.tsx

@@ -0,0 +1,69 @@
+/**
+ * StreamingText - Renders AI response text with optional cursor
+ *
+ * Displays text as it streams in from the AI. The parent component
+ * is responsible for accumulating text chunks and passing them via
+ * the `text` prop. This component simply renders what it receives,
+ * optionally showing a cursor when streaming is in progress.
+ */
+
+import React from 'react';
+import { Text } from 'ink';
+import { colors } from '../theme.js';
+
+/**
+ * Block cursor character (U+2588 - Full Block)
+ */
+const CURSOR_CHAR = '\u2588';
+
+/**
+ * Props for the StreamingText component
+ */
+export interface StreamingTextProps {
+  /** The accumulated text to display */
+  text: string;
+  /** Whether streaming is still in progress */
+  isStreaming: boolean;
+  /** Optional text color (defaults to white) */
+  color?: string;
+  /** Whether to show cursor when streaming (defaults to true) */
+  showCursor?: boolean;
+}
+
+/**
+ * StreamingText component
+ *
+ * Renders text with an optional cursor indicator when streaming.
+ * The cursor appears at the end of the text while `isStreaming` is true.
+ *
+ * @example
+ * ```tsx
+ * // During streaming
+ * <StreamingText
+ *   text="Hello, world"
+ *   isStreaming={true}
+ * />
+ * // Renders: "Hello, world█"
+ *
+ * // After streaming completes
+ * <StreamingText
+ *   text="Hello, world!"
+ *   isStreaming={false}
+ * />
+ * // Renders: "Hello, world!"
+ * ```
+ */
+export function StreamingText({
+  text,
+  isStreaming,
+  color = colors.white,
+  showCursor = true,
+}: StreamingTextProps): React.ReactElement {
+  // Determine if cursor should be visible
+  const displayCursor = isStreaming && showCursor;
+
+  // Build the display text with optional cursor
+  const displayText = displayCursor ? `${text}${CURSOR_CHAR}` : text;
+
+  return <Text color={color}>{displayText}</Text>;
+}

package/src/tui/components/ToolCallCard.tsx

@@ -0,0 +1,215 @@
+/**
+ * ToolCallCard - Collapsible tool execution display
+ *
+ * Shows tool executions in a bordered card format, similar to Claude Code.
+ * Displays tool name, input, status indicator, and output/error.
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import { colors, box, phase } from '../theme.js';
+
+/**
+ * Tool execution status
+ */
+export type ToolCallStatus = 'pending' | 'running' | 'complete' | 'error';
+
+/**
+ * Props for the ToolCallCard component
+ */
+export interface ToolCallCardProps {
+  /** Name of the tool (e.g., "Read File", "Search Codebase") */
+  toolName: string;
+  /** Tool execution status */
+  status: ToolCallStatus;
+  /** Input passed to the tool (e.g., file path, search query) */
+  input: string;
+  /** Result summary when status is 'complete' */
+  output?: string;
+  /** Error message when status is 'error' */
+  error?: string;
+  /** Whether to show full details (default: false = collapsed) */
+  expanded?: boolean;
+}
+
+/**
+ * Maps status to phase indicator character
+ */
+function getStatusIndicator(status: ToolCallStatus): string {
+  switch (status) {
+    case 'pending':
+      return phase.pending;
+    case 'running':
+      return phase.active;
+    case 'complete':
+      return phase.complete;
+    case 'error':
+      return phase.error;
+  }
+}
+
+/**
+ * Gets the color for the status indicator
+ */
+function getStatusColor(status: ToolCallStatus): string {
+  switch (status) {
+    case 'pending':
+      return colors.brown;
+    case 'running':
+      return colors.yellow;
+    case 'complete':
+      return colors.yellow;
+    case 'error':
+      return colors.pink;
+  }
+}
+
+/**
+ * Gets human-readable status text
+ */
+function getStatusText(status: ToolCallStatus): string {
+  switch (status) {
+    case 'pending':
+      return 'Pending';
+    case 'running':
+      return 'Running';
+    case 'complete':
+      return 'Complete';
+    case 'error':
+      return 'Error';
+  }
+}
+
+/**
+ * ToolCallCard component
+ *
+ * Displays a tool execution in a bordered card format.
+ *
+ * @example
+ * ```tsx
+ * // Collapsed (default)
+ * <ToolCallCard
+ *   toolName="Read File"
+ *   status="complete"
+ *   input="src/utils/config.ts"
+ *   output="45 lines read"
+ * />
+ * // Renders:
+ * // ┌─ Read File ────────────────────────────────┐
+ * // │ src/utils/config.ts   ✓ 45 lines read      │
+ * // └────────────────────────────────────────────┘
+ *
+ * // Expanded
+ * <ToolCallCard
+ *   toolName="Read File"
+ *   status="complete"
+ *   input="src/utils/config.ts"
+ *   output="45 lines read"
+ *   expanded={true}
+ * />
+ * // Renders:
+ * // ┌─ Read File ────────────────────────────────┐
+ * // │ Input: src/utils/config.ts                 │
+ * // │ Status: Complete                           │
+ * // │ Result: 45 lines read                      │
+ * // └────────────────────────────────────────────┘
+ * ```
+ */
+export function ToolCallCard({
+  toolName,
+  status,
+  input,
+  output,
+  error,
+  expanded = false,
+}: ToolCallCardProps): React.ReactElement {
+  const statusIndicator = getStatusIndicator(status);
+  const statusColor = getStatusColor(status);
+  const statusText = getStatusText(status);
+
+  // Build the title with box drawing
+  const titlePadding = box.horizontal.repeat(3);
+  const title = `${box.horizontal} ${toolName} ${titlePadding}`;
+
+  // Determine result text
+  const resultText = status === 'error' ? error : output;
+
+  if (expanded) {
+    // Expanded layout: multiple lines with labels
+    return (
+      <Box flexDirection="column">
+        {/* Top border with title */}
+        <Box flexDirection="row">
+          <Text color={colors.brown}>{box.topLeft}</Text>
+          <Text color={colors.yellow}>{title}</Text>
+        </Box>
+
+        {/* Input line */}
+        <Box flexDirection="row">
+          <Text color={colors.brown}>{box.vertical} </Text>
+          <Text color={colors.brown}>Input: </Text>
+          <Text color={colors.white}>{input}</Text>
+        </Box>
+
+        {/* Status line */}
+        <Box flexDirection="row">
+          <Text color={colors.brown}>{box.vertical} </Text>
+          <Text color={colors.brown}>Status: </Text>
+          <Text color={statusColor}>
+            {statusIndicator} {statusText}
+          </Text>
+        </Box>
+
+        {/* Result/Error line (if present) */}
+        {resultText && (
+          <Box flexDirection="row">
+            <Text color={colors.brown}>{box.vertical} </Text>
+            <Text color={colors.brown}>{status === 'error' ? 'Error: ' : 'Result: '}</Text>
+            <Text color={status === 'error' ? colors.pink : colors.white}>{resultText}</Text>
+          </Box>
+        )}
+
+        {/* Bottom border */}
+        <Box flexDirection="row">
+          <Text color={colors.brown}>
+            {box.bottomLeft}
+            {box.horizontal.repeat(40)}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Collapsed layout: single content line
+  return (
+    <Box flexDirection="column">
+      {/* Top border with title */}
+      <Box flexDirection="row">
+        <Text color={colors.brown}>{box.topLeft}</Text>
+        <Text color={colors.yellow}>{title}</Text>
+      </Box>
+
+      {/* Content line: input + status + result */}
+      <Box flexDirection="row">
+        <Text color={colors.brown}>{box.vertical} </Text>
+        <Text color={colors.white}>{input}</Text>
+        <Text>   </Text>
+        <Text color={statusColor}>{statusIndicator}</Text>
+        {resultText && (
+          <>
+            <Text> </Text>
+            <Text color={status === 'error' ? colors.pink : colors.white}>{resultText}</Text>
+          </>
+        )}
+      </Box>
+
+      {/* Bottom border */}
+      <Box flexDirection="row">
+        <Text color={colors.brown}>
+          {box.bottomLeft}
+          {box.horizontal.repeat(40)}
+        </Text>
+      </Box>
+    </Box>
+  );
+}

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/components/WorkingIndicator.tsx

@@ -0,0 +1,72 @@
+/**
+ * WorkingIndicator - Spinner + status display during AI calls
+ *
+ * Displays an animated spinner with status text when the AI is processing.
+ * Similar to Claude Code's "Thinking..." indicator.
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+import Spinner from 'ink-spinner';
+import { colors } from '../theme.js';
+
+/**
+ * Working state object describing the current processing state
+ */
+export interface WorkingState {
+  /** Whether to show the indicator */
+  isWorking: boolean;
+  /** Status text (e.g., "Thinking...", "Reading files...", "Searching...") */
+  status: string;
+  /** Optional hint text (e.g., "esc to interrupt") */
+  hint?: string;
+}
+
+/**
+ * Props for the WorkingIndicator component
+ */
+export interface WorkingIndicatorProps {
+  /** Working state object */
+  state: WorkingState;
+}
+
+/**
+ * WorkingIndicator component
+ *
+ * Displays a spinner with status text when AI is processing.
+ * Returns null when not working.
+ *
+ * @example
+ * ```tsx
+ * <WorkingIndicator
+ *   state={{
+ *     isWorking: true,
+ *     status: "Thinking...",
+ *     hint: "esc to interrupt"
+ *   }}
+ * />
+ * // Renders: ⠋ Thinking... (esc to interrupt)
+ * ```
+ */
+export function WorkingIndicator({ state }: WorkingIndicatorProps): React.ReactElement | null {
+  const { isWorking, status, hint } = state;
+
+  // Don't render anything when not working
+  if (!isWorking) {
+    return null;
+  }
+
+  return (
+    <Box flexDirection="row" gap={1}>
+      <Text color={colors.yellow}>
+        <Spinner type="dots" />
+      </Text>
+      <Text color={colors.yellow}>{status}</Text>
+      {hint && (
+        <Text color={colors.brown} dimColor>
+          ({hint})
+        </Text>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Reusable Ink components for the Wiggum TUI
+ */
+
+export { WorkingIndicator } from './WorkingIndicator.js';
+export type { WorkingIndicatorProps, WorkingState } from './WorkingIndicator.js';
+
+export { PhaseHeader } from './PhaseHeader.js';
+export type { PhaseHeaderProps } from './PhaseHeader.js';
+
+export { StreamingText } from './StreamingText.js';
+export type { StreamingTextProps } from './StreamingText.js';
+
+export { ToolCallCard } from './ToolCallCard.js';
+export type { ToolCallCardProps, ToolCallStatus } from './ToolCallCard.js';
+
+export { MessageList } from './MessageList.js';
+export type { MessageListProps, Message, ToolCall } from './MessageList.js';
+
+export { ChatInput } from './ChatInput.js';
+export type { ChatInputProps } from './ChatInput.js';

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/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Custom React hooks for the Wiggum TUI
+ */
+
+export { useSpecGenerator } from './useSpecGenerator.js';
+export type {
+  GeneratorPhase,
+  PhaseConfig,
+  SpecGeneratorState,
+  SpecGeneratorOptions,
+  UseSpecGeneratorReturn,
+} from './useSpecGenerator.js';
+export { PHASE_CONFIGS, TOTAL_DISPLAY_PHASES } from './useSpecGenerator.js';