@ebowwa/coder 0.2.1 → 0.7.64

package/packages/src/interfaces/ui/terminal/tui/console.ts

@@ -0,0 +1,49 @@
+/**
+ * Console Suppression Utilities
+ * Manages console output suppression during TUI mode
+ */
+
+/**
+ * Store original console methods for restoration
+ */
+const originalConsole = {
+  log: console.log,
+  error: console.error,
+  warn: console.warn,
+  info: console.info,
+};
+
+/**
+ * Suppress all console output during TUI mode
+ * Prevents TUI corruption from stray console output
+ */
+export function suppressConsole(): void {
+  console.log = () => {};
+  console.error = () => {};
+  console.warn = () => {};
+  console.info = () => {};
+}
+
+/**
+ * Restore original console methods
+ * Call when exiting TUI mode
+ */
+export function restoreConsole(): void {
+  console.log = originalConsole.log;
+  console.error = originalConsole.error;
+  console.warn = originalConsole.warn;
+  console.info = originalConsole.info;
+}
+
+/**
+ * Execute a function with console suppressed
+ * Automatically restores console after execution
+ */
+export async function withSuppressedConsole<T>(fn: () => Promise<T>): Promise<T> {
+  suppressConsole();
+  try {
+    return await fn();
+  } finally {
+    restoreConsole();
+  }
+}

package/packages/src/interfaces/ui/terminal/tui/index.ts

@@ -0,0 +1,90 @@
+/**
+ * TUI Module Exports
+ * Re-exports all components and utilities from the modular TUI package
+ */
+
+// Types
+export type {
+  InteractiveTUIProps,
+  SessionStore,
+  MessageAreaProps,
+  StatusBarProps,
+  InputFieldProps,
+  TerminalLayout,
+  CommandContext,
+  ContextInfo,
+} from "./types.js";
+
+// Console utilities
+export { suppressConsole, restoreConsole, withSuppressedConsole } from "./console.js";
+
+// Spinner utilities
+export {
+  spinnerFrames,
+  dotSpinnerFrames,
+  asciiSpinnerFrames,
+  arrowSpinnerFrames,
+  simpleDotFrames,
+  nextFrame,
+  getFrame,
+  createSpinnerIterator,
+} from "./spinner.js";
+
+// Components
+export { MessageArea } from "./MessageArea.js";
+export { StatusBar } from "./StatusBar.js";
+export { InputField } from "./InputField.js";
+
+// Hooks
+export { useInputHandler as useInputFieldHandler, useExitHandler } from "./useInputHandler.js";
+
+// Commands
+export { handleCommand, getHelpText } from "./commands.js";
+
+// Main component and entry point
+export { default as InteractiveTUI } from "./InteractiveTUI.js";
+export { runInteractiveTUI } from "./run.js";
+
+// TUI App (Ink-based)
+export {
+  createTUIApp,
+  type TUIAppProps,
+  type TUIAppHandle,
+  type Message as TUIMessage,
+} from "./tui-app.js";
+export { default as TUIApp } from "./tui-app.js";
+
+// TUI Footer
+export {
+  TUIFooter,
+  getTUIFooter,
+  enableTUIFooter,
+  disableTUIFooter,
+  renderTUIFooter,
+  clearTUIFooter,
+  ANSI,
+  type TUIFooterOptions,
+  type TUIFooterState,
+} from "./tui-footer.js";
+
+// Input Context (centralized keyboard input management)
+export {
+  InputProvider,
+  useInputContext,
+  useInputHandler,
+  useInputFocus,
+  useInputBlock,
+  InputPriority,
+  type InputHandler,
+  type InputHandlerOptions,
+  type InputContextValue,
+} from "./InputContext.js";
+
+// Message Store (centralized message state management)
+export {
+  MessageStoreProvider,
+  useMessageStore,
+  type UIMessage,
+  type MessageSubType,
+  type MessageStoreValue,
+} from "./MessageStore.js";

package/packages/src/interfaces/ui/terminal/tui/run.tsx

@@ -0,0 +1,42 @@
+/**
+ * TUI Entry Point
+ * Renders and runs the InteractiveTUI
+ *
+ * IMPORTANT: Ink manages terminal state (raw mode, stdin).
+ * The native input hook reads events without managing raw mode.
+ */
+
+import React from "react";
+import { render } from "ink";
+import InteractiveTUI from "./InteractiveTUI.js";
+import { suppressConsole, restoreConsole } from "./console.js";
+import type { InteractiveTUIProps } from "./types.js";
+
+/**
+ * Run the interactive TUI
+ */
+export async function runInteractiveTUI(
+  options: InteractiveTUIProps
+): Promise<void> {
+  // Suppress console output to prevent TUI corruption
+  suppressConsole();
+
+  // Ink manages raw mode and stdin
+  // Native input reads events without touching raw mode
+  const { unmount, waitUntilExit } = render(
+    <InteractiveTUI {...options} />,
+    {
+      exitOnCtrlC: false,
+      // Ensure Ink uses stdin properly
+      stdin: process.stdin,
+      stdout: process.stdout,
+      stderr: process.stderr,
+    }
+  );
+
+  await waitUntilExit();
+  unmount();
+
+  // Restore console output
+  restoreConsole();
+}

package/packages/src/interfaces/ui/terminal/tui/spinner.ts

@@ -0,0 +1,69 @@
+/**
+ * Spinner Animation
+ * Provides animated spinner frames for loading indicators
+ *
+ * This is the single source of truth for all spinner frames in Coder.
+ * Other modules should import from here rather than defining their own.
+ */
+
+// ============================================
+// SPINNER FRAME DEFINITIONS
+// ============================================
+
+/**
+ * Standard braille spinner frames (default)
+ * Used by: ora spinner, TUI footer, Ink components
+ */
+export const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const;
+
+/**
+ * Alternative dot spinner frames
+ * Rising dots pattern
+ */
+export const dotSpinnerFrames = ["⠁", "⠂", "⠄", "⡀", "⢀", "⠠", "⠐", "⠈"] as const;
+
+/**
+ * Simple ASCII spinner frames
+ * Fallback for limited terminal support
+ */
+export const asciiSpinnerFrames = ["|", "/", "-", "\\"] as const;
+
+/**
+ * Arrow spinner frames
+ * Used for tool execution indicators
+ */
+export const arrowSpinnerFrames = ["←", "↖", "↑", "↗", "→", "↘", "↓", "↙"] as const;
+
+/**
+ * Simple dots for minimal display
+ */
+export const simpleDotFrames = [".  ", ".. ", "...", "   "] as const;
+
+// ============================================
+// FRAME ITERATION UTILITIES
+// ============================================
+
+/**
+ * Get the next spinner frame index
+ */
+export function nextFrame(currentIndex: number, frames: readonly string[] = spinnerFrames): number {
+  return (currentIndex + 1) % frames.length;
+}
+
+/**
+ * Get a spinner frame by index (with wraparound)
+ */
+export function getFrame(index: number, frames: readonly string[] = spinnerFrames): string {
+  return frames[index % frames.length] ?? frames[0] ?? "";
+}
+
+/**
+ * Create a spinner iterator
+ */
+export function* createSpinnerIterator(frames: readonly string[] = spinnerFrames): Generator<string, never, unknown> {
+  let index = 0;
+  while (true) {
+    yield getFrame(index, frames);
+    index = nextFrame(index, frames);
+  }
+}

package/packages/src/interfaces/ui/terminal/tui/tui-app.tsx

@@ -0,0 +1,390 @@
+/**
+ * TUI App Component for Coder CLI
+ * Full Ink-based TUI with message area, status bar, and input field
+ */
+
+import React, { useState, useEffect, useCallback, useRef } from "react";
+import { render, Box, Text, useInput, useApp, useStdout } from "ink";
+import type { Key } from "ink";
+import chalk from "chalk";
+import type { PermissionMode } from "../../../../types/index.js";
+import {
+  calculateContextInfo,
+  getPermissionModeDisplay,
+} from "../shared/status-line.js";
+import { spinnerFrames } from "./spinner.js";
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface Message {
+  id: string;
+  role: "user" | "assistant" | "system";
+  content: string;
+  timestamp: number;
+}
+
+export interface TUIAppProps {
+  permissionMode: PermissionMode;
+  tokensUsed: number;
+  model: string;
+  messages: Message[];
+  isLoading?: boolean;
+  onSubmit: (value: string) => Promise<void>;
+  onExit?: () => void;
+}
+
+// ============================================
+// MESSAGE AREA COMPONENT
+// ============================================
+
+interface MessageAreaProps {
+  messages: Message[];
+  isLoading?: boolean;
+  height: number;
+}
+
+function MessageArea({ messages, isLoading, height }: MessageAreaProps) {
+  const visibleMessages = messages.slice(-height + 2); // Reserve 2 lines for padding
+
+  return (
+    <Box flexDirection="column" height={height} overflow="hidden">
+      {visibleMessages.map((msg) => (
+        <Box key={msg.id} flexDirection="column" marginBottom={1}>
+          <Text bold color={msg.role === "user" ? "cyan" : "magenta"}>
+            {msg.role === "user" ? "You:" : "Claude:"}
+          </Text>
+          <Text dimColor={msg.role === "system"}>{msg.content}</Text>
+        </Box>
+      ))}
+      {isLoading && (
+        <Box>
+          <Text dimColor>Thinking...</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+// ============================================
+// STATUS BAR COMPONENT
+// ============================================
+
+interface StatusBarProps {
+  permissionMode: PermissionMode;
+  tokensUsed: number;
+  model: string;
+  isLoading?: boolean;
+}
+
+function StatusBar({
+  permissionMode,
+  tokensUsed,
+  model,
+  isLoading,
+}: StatusBarProps) {
+  const [frame, setFrame] = useState(0);
+  const contextInfo = calculateContextInfo(tokensUsed, model);
+  const permDisplay = getPermissionModeDisplay(permissionMode);
+
+  // Spinner animation
+  useEffect(() => {
+    if (!isLoading) return;
+
+    const interval = setInterval(() => {
+      setFrame((f) => (f + 1) % spinnerFrames.length);
+    }, 80);
+
+    return () => clearInterval(interval);
+  }, [isLoading]);
+
+  // Build status line
+  const parts: string[] = [];
+
+  // Loading spinner
+  if (isLoading) {
+    parts.push(chalk.cyan(spinnerFrames[frame]));
+  }
+
+  // Context percentage
+  const contextValue = contextInfo.isCritical
+    ? chalk.red(`${contextInfo.percentRemaining.toFixed(0)}%`)
+    : contextInfo.isLow
+      ? chalk.yellow(`${contextInfo.percentRemaining.toFixed(0)}%`)
+      : `${contextInfo.percentRemaining.toFixed(0)}%`;
+  parts.push(`Context: ${contextValue}`);
+
+  // Permission mode
+  const permColor = permDisplay.color as "red" | "green" | "yellow" | "blue" | "magenta" | "cyan" | "white" | "gray";
+  const colorFn = chalk[permColor]?.bind(chalk) ?? chalk.gray;
+  parts.push(`${colorFn(permDisplay.symbol)} ${permDisplay.label}`);
+
+  const statusText = parts.join(" | ");
+
+  return (
+    <Box width="100%" paddingX={1}>
+      <Text dimColor>{statusText}</Text>
+    </Box>
+  );
+}
+
+// ============================================
+// INPUT FIELD COMPONENT
+// ============================================
+
+interface InputFieldProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: (value: string) => void;
+  placeholder?: string;
+  isActive?: boolean;
+}
+
+function InputField({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Type your message... (/help for commands)",
+  isActive = true,
+}: InputFieldProps) {
+  const [cursorPos, setCursorPos] = useState(0);
+
+  useInput(
+    (input, key) => {
+      if (!isActive) return;
+
+      if (key.return) {
+        if (value.trim()) {
+          onSubmit(value);
+        }
+        return;
+      }
+
+      if (key.backspace || key.delete) {
+        if (cursorPos > 0) {
+          onChange(value.slice(0, cursorPos - 1) + value.slice(cursorPos));
+          setCursorPos(cursorPos - 1);
+        }
+        return;
+      }
+
+      if (key.leftArrow) {
+        setCursorPos(Math.max(0, cursorPos - 1));
+        return;
+      }
+
+      if (key.rightArrow) {
+        setCursorPos(Math.min(value.length, cursorPos + 1));
+        return;
+      }
+
+      if (key.upArrow || key.downArrow) {
+        // Ignore up/down for now (could be used for history)
+        return;
+      }
+
+      // Regular character input
+      if (input && !key.ctrl && !key.meta) {
+        onChange(value.slice(0, cursorPos) + input + value.slice(cursorPos));
+        setCursorPos(cursorPos + input.length);
+      }
+    },
+    { isActive }
+  );
+
+  // Display value with cursor
+  const displayValue = value.length > 0 ? value : chalk.dim(placeholder);
+  const cursorChar = value.length > 0 ? "▋" : chalk.dim("▋");
+
+  // Calculate where cursor should appear
+  const beforeCursor = value.slice(0, cursorPos);
+  const afterCursor = value.slice(cursorPos);
+
+  return (
+    <Box borderStyle="round" borderColor="cyan" paddingX={1} width="100%">
+      <Text bold color="cyan">
+        You:{" "}
+      </Text>
+      {value.length > 0 ? (
+        <Text>
+          {beforeCursor}
+          {cursorChar}
+          {afterCursor}
+        </Text>
+      ) : (
+        <Text dimColor>{placeholder}</Text>
+      )}
+    </Box>
+  );
+}
+
+// ============================================
+// MAIN TUI APP COMPONENT
+// ============================================
+
+function TUIApp({
+  permissionMode,
+  tokensUsed,
+  model,
+  messages,
+  isLoading = false,
+  onSubmit,
+  onExit,
+}: TUIAppProps) {
+  const [inputValue, setInputValue] = useState("");
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+
+  // Calculate heights
+  const terminalHeight = stdout.rows || 24;
+  const inputHeight = 3; // Input field with border
+  const statusHeight = 1; // Status bar
+  const messageHeight = Math.max(5, terminalHeight - inputHeight - statusHeight - 2);
+
+  // Handle global keybindings
+  useInput(
+    (input, key) => {
+      // Ctrl+C to exit
+      if (key.ctrl && input === "c") {
+        if (onExit) onExit();
+        exit();
+      }
+    },
+    { isActive: true }
+  );
+
+  // Handle submit
+  const handleSubmit = useCallback(
+    async (value: string) => {
+      if (!value.trim()) return;
+
+      // Clear input
+      setInputValue("");
+
+      // Call onSubmit
+      await onSubmit(value);
+    },
+    [onSubmit]
+  );
+
+  return (
+    <Box flexDirection="column" height={terminalHeight} width="100%">
+      {/* Message area (scrollable) */}
+      <Box flexGrow={1} flexDirection="column" overflow="hidden">
+        <MessageArea
+          messages={messages}
+          isLoading={isLoading}
+          height={messageHeight}
+        />
+      </Box>
+
+      {/* Status bar */}
+      <StatusBar
+        permissionMode={permissionMode}
+        tokensUsed={tokensUsed}
+        model={model}
+        isLoading={isLoading}
+      />
+
+      {/* Input field */}
+      <InputField
+        value={inputValue}
+        onChange={setInputValue}
+        onSubmit={handleSubmit}
+        isActive={!isLoading}
+      />
+    </Box>
+  );
+}
+
+// ============================================
+// RENDER FUNCTION
+// ============================================
+
+export interface TUIAppHandle {
+  rerender: (props: Partial<TUIAppProps>) => void;
+  unmount: () => void;
+  waitUntilExit: () => Promise<void>;
+  addMessage: (message: Omit<Message, "id" | "timestamp">) => void;
+  setMessages: (messages: Message[]) => void;
+  setLoading: (isLoading: boolean) => void;
+  setTokensUsed: (tokens: number) => void;
+}
+
+/**
+ * Create and render the TUI app
+ */
+export function createTUIApp(
+  initialProps: Omit<TUIAppProps, "messages"> & { messages?: Message[] }
+): TUIAppHandle {
+  let currentProps: TUIAppProps = {
+    ...initialProps,
+    messages: initialProps.messages || [],
+  };
+
+  let rerenderFn: ((node: React.ReactNode) => void) | null = null;
+  let unmountFn: (() => void) | null = null;
+  let waitUntilExitFn: (() => Promise<void>) | null = null;
+
+  // Create the app
+  const { rerender, unmount, waitUntilExit } = render(
+    <TUIApp {...currentProps} />,
+    {
+      exitOnCtrlC: false,
+    }
+  );
+
+  rerenderFn = rerender;
+  unmountFn = unmount;
+  waitUntilExitFn = waitUntilExit;
+
+  return {
+    rerender: (newProps) => {
+      currentProps = { ...currentProps, ...newProps };
+      rerenderFn?.(<TUIApp {...currentProps} />);
+    },
+
+    unmount: () => {
+      unmountFn?.();
+    },
+
+    waitUntilExit: () => {
+      return waitUntilExitFn?.() || Promise.resolve();
+    },
+
+    addMessage: (message) => {
+      const newMessage: Message = {
+        ...message,
+        id: `msg-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+        timestamp: Date.now(),
+      };
+      currentProps = {
+        ...currentProps,
+        messages: [...currentProps.messages, newMessage],
+      };
+      rerenderFn?.(<TUIApp {...currentProps} />);
+    },
+
+    setMessages: (messages) => {
+      currentProps = { ...currentProps, messages };
+      rerenderFn?.(<TUIApp {...currentProps} />);
+    },
+
+    setLoading: (isLoading) => {
+      currentProps = { ...currentProps, isLoading };
+      rerenderFn?.(<TUIApp {...currentProps} />);
+    },
+
+    setTokensUsed: (tokensUsed) => {
+      currentProps = { ...currentProps, tokensUsed };
+      rerenderFn?.(<TUIApp {...currentProps} />);
+    },
+  };
+}
+
+// ============================================
+// EXPORTS
+// ============================================
+
+export default TUIApp;