wiggum-cli 0.7.8 → 0.8.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/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/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';