@ebowwa/coder 0.2.1 → 0.7.64

package/packages/src/interfaces/ui/terminal/tui/tui-footer.ts

@@ -0,0 +1,422 @@
+/**
+ * TUI Footer Component for Coder CLI
+ * Provides a persistent status bar at the bottom of the terminal
+ *
+ * Uses ANSI escape codes for cursor positioning:
+ * - ESC[s    Save cursor position
+ * - ESC[u    Restore cursor position
+ * - ESC[#;#H Move cursor to row, col
+ * - ESC[2K   Clear entire line
+ * - ESC[J    Clear from cursor to end of screen
+ */
+
+import chalk from "chalk";
+import type { PermissionMode } from "../../../../types/index.js";
+import {
+  calculateContextInfo,
+  formatPermissionMode,
+  type StatusLineOptions,
+} from "../shared/status-line.js";
+import { spinnerFrames } from "./spinner.js";
+
+// ============================================
+// ANSI ESCAPE CODES
+// ============================================
+
+const ANSI = {
+  // Cursor
+  SAVE_CURSOR: "\x1b[s",
+  RESTORE_CURSOR: "\x1b[u",
+  MOVE_TO: (row: number, col: number) => `\x1b[${row};${col}H`,
+  MOVE_TO_BOTTOM: (offset = 0) => `\x1b[999;1H\x1b[${offset + 1}A`,
+
+  // Clear
+  CLEAR_LINE: "\x1b[2K",
+  CLEAR_TO_END: "\x1b[J",
+  CLEAR_SCREEN: "\x1b[2J",
+
+  // Scrolling
+  SCROLL_UP: (lines: number) => `\x1b[${lines}S`,
+  SCROLL_DOWN: (lines: number) => `\x1b[${lines}T`,
+
+  // Colors reset
+  RESET: "\x1b[0m",
+
+  // Alternate screen buffer
+  ENTER_ALT_SCREEN: "\x1b[?1049h",
+  EXIT_ALT_SCREEN: "\x1b[?1049l",
+
+  // Cursor visibility
+  HIDE_CURSOR: "\x1b[?25l",
+  SHOW_CURSOR: "\x1b[?25h",
+};
+
+// Export ANSI for external use
+export { ANSI };
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface TUIFooterOptions {
+  /** Permission mode to display */
+  permissionMode: PermissionMode;
+  /** Tokens used in context */
+  tokensUsed: number;
+  /** Current model */
+  model: string;
+  /** Is loading/spinning */
+  isLoading?: boolean;
+  /** Verbose mode */
+  verbose?: boolean;
+  /** Show version */
+  showVersion?: boolean;
+}
+
+export interface TUIFooterState {
+  isEnabled: boolean;
+  lastRender: string;
+  lastOptions: TUIFooterOptions | null;
+  renderInterval: Timer | null;
+  spinnerFrame: number;
+  terminalHeight: number;
+  terminalWidth: number;
+}
+
+// ============================================
+// FOOTER RENDERER
+// ============================================
+
+/**
+ * Render footer content (without positioning)
+ */
+function renderFooterContent(options: TUIFooterOptions, spinnerFrame?: string): string {
+  const { permissionMode, tokensUsed, model, isLoading, verbose, showVersion } = options;
+  const contextInfo = calculateContextInfo(tokensUsed, model);
+
+  // Build status parts
+  const parts: string[] = [];
+
+  // 1. Loading spinner if active
+  if (isLoading && spinnerFrame) {
+    parts.push(chalk.cyan(spinnerFrame));
+  }
+
+  // 2. Context percentage with color
+  const contextValue = contextInfo.isCritical
+    ? chalk.red(`${contextInfo.percentRemaining.toFixed(0)}%`)
+    : contextInfo.isLow
+      ? chalk.yellow(`${contextInfo.percentRemaining.toFixed(0)}%`)
+      : chalk.dim(`${contextInfo.percentRemaining.toFixed(0)}%`);
+  parts.push(`Context: ${contextValue}`);
+
+  // 3. Permission mode
+  const permDisplay = formatPermissionMode(permissionMode);
+  parts.push(permDisplay);
+
+  // 4. Version (if verbose or showVersion)
+  if (verbose || showVersion) {
+    parts.push(chalk.dim(`v${getVersion()}`));
+  }
+
+  return parts.join(chalk.dim(" | "));
+}
+
+/**
+ * Get VERSION dynamically to avoid circular imports
+ */
+function getVersion(): string {
+  try {
+    // Dynamic import to avoid circular dependency
+    const statusLine = require("../shared/status-line.js");
+    return statusLine.VERSION || "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
+
+// ============================================
+// TUI FOOTER CLASS
+// ============================================
+
+export class TUIFooter {
+  private state: TUIFooterState;
+  private static instance: TUIFooter | null = null;
+
+  private constructor() {
+    this.state = {
+      isEnabled: false,
+      lastRender: "",
+      lastOptions: null,
+      renderInterval: null,
+      spinnerFrame: 0,
+      terminalHeight: process.stdout.rows || 24,
+      terminalWidth: process.stdout.columns || 80,
+    };
+  }
+
+  /**
+   * Get singleton instance
+   */
+  static getInstance(): TUIFooter {
+    if (!TUIFooter.instance) {
+      TUIFooter.instance = new TUIFooter();
+    }
+    return TUIFooter.instance;
+  }
+
+  /**
+   * Reset singleton (for testing)
+   */
+  static reset(): void {
+    if (TUIFooter.instance) {
+      TUIFooter.instance.disable();
+      TUIFooter.instance = null;
+    }
+  }
+
+  /**
+   * Enable the footer (start tracking terminal size)
+   */
+  enable(): void {
+    if (this.state.isEnabled) return;
+
+    this.state.isEnabled = true;
+    this.updateTerminalSize();
+
+    // Listen for terminal resize
+    process.stdout.on("resize", this.handleResize);
+  }
+
+  /**
+   * Disable the footer and clear it
+   */
+  disable(): void {
+    if (!this.state.isEnabled) return;
+
+    this.stopSpinner();
+    this.clear();
+
+    process.stdout.off("resize", this.handleResize);
+    this.state.isEnabled = false;
+  }
+
+  /**
+   * Check if footer is enabled
+   */
+  isEnabled(): boolean {
+    return this.state.isEnabled;
+  }
+
+  /**
+   * Update terminal dimensions
+   */
+  private updateTerminalSize(): void {
+    this.state.terminalHeight = process.stdout.rows || 24;
+    this.state.terminalWidth = process.stdout.columns || 80;
+  }
+
+  /**
+   * Handle terminal resize
+   */
+  private handleResize = (): void => {
+    this.updateTerminalSize();
+    if (this.state.lastOptions) {
+      this.render(this.state.lastOptions);
+    }
+  };
+
+  /**
+   * Render the footer at the bottom of the screen
+   * Saves cursor position, moves to bottom, renders, restores cursor
+   */
+  render(options: TUIFooterOptions): void {
+    if (!this.state.isEnabled) return;
+
+    this.state.lastOptions = options;
+
+    // Build footer content
+    const content = renderFooterContent(options);
+
+    // Skip if content unchanged (optimization)
+    if (content === this.state.lastRender && !options.isLoading) {
+      return;
+    }
+
+    this.state.lastRender = content;
+
+    // Build ANSI sequence:
+    // 1. Save cursor position
+    // 2. Move to bottom of screen
+    // 3. Clear the line
+    // 4. Render footer content
+    // 5. Restore cursor position
+    const output =
+      ANSI.SAVE_CURSOR +
+      ANSI.MOVE_TO_BOTTOM() +
+      ANSI.CLEAR_LINE +
+      "\r" + // Go to start of line
+      chalk.dim("┌") +
+      content +
+      ANSI.RESTORE_CURSOR;
+
+    process.stdout.write(output);
+  }
+
+  /**
+   * Render with loading spinner animation
+   */
+  renderLoading(options: TUIFooterOptions): void {
+    const frame = spinnerFrames[this.state.spinnerFrame];
+    this.state.spinnerFrame = (this.state.spinnerFrame + 1) % spinnerFrames.length;
+
+    const content = renderFooterContent(options, frame);
+    this.state.lastRender = content;
+
+    if (!this.state.isEnabled) return;
+
+    const output =
+      ANSI.SAVE_CURSOR +
+      ANSI.MOVE_TO_BOTTOM() +
+      ANSI.CLEAR_LINE +
+      "\r" +
+      chalk.dim("┌") +
+      content +
+      ANSI.RESTORE_CURSOR;
+
+    process.stdout.write(output);
+  }
+
+  /**
+   * Start spinner animation for loading state
+   */
+  startSpinner(options: TUIFooterOptions, interval = 80): void {
+    this.stopSpinner();
+
+    this.state.renderInterval = setInterval(() => {
+      this.renderLoading(options);
+    }, interval);
+  }
+
+  /**
+   * Stop spinner animation
+   */
+  stopSpinner(): void {
+    if (this.state.renderInterval) {
+      clearInterval(this.state.renderInterval);
+      this.state.renderInterval = null;
+    }
+  }
+
+  /**
+   * Clear the footer line
+   */
+  clear(): void {
+    if (!this.state.isEnabled) return;
+
+    const output =
+      ANSI.SAVE_CURSOR +
+      ANSI.MOVE_TO_BOTTOM() +
+      ANSI.CLEAR_LINE +
+      ANSI.RESTORE_CURSOR;
+
+    process.stdout.write(output);
+    this.state.lastRender = "";
+  }
+
+  /**
+   * Update just the token count (for incremental updates)
+   */
+  updateTokens(tokensUsed: number): void {
+    if (this.state.lastOptions) {
+      this.render({
+        ...this.state.lastOptions,
+        tokensUsed,
+      });
+    }
+  }
+
+  /**
+   * Update loading state
+   */
+  setLoading(isLoading: boolean): void {
+    if (this.state.lastOptions) {
+      const options = {
+        ...this.state.lastOptions,
+        isLoading,
+      };
+
+      if (isLoading) {
+        this.startSpinner(options);
+      } else {
+        this.stopSpinner();
+        this.render(options);
+      }
+    }
+  }
+
+  /**
+   * Get terminal dimensions
+   */
+  getTerminalSize(): { width: number; height: number } {
+    return {
+      width: this.state.terminalWidth,
+      height: this.state.terminalHeight,
+    };
+  }
+}
+
+// ============================================
+// CONVENIENCE EXPORTS
+// ============================================
+
+/**
+ * Get the global TUI footer instance
+ */
+export function getTUIFooter(): TUIFooter {
+  return TUIFooter.getInstance();
+}
+
+/**
+ * Enable TUI footer
+ */
+export function enableTUIFooter(): TUIFooter {
+  const footer = TUIFooter.getInstance();
+  footer.enable();
+  return footer;
+}
+
+/**
+ * Disable TUI footer
+ */
+export function disableTUIFooter(): void {
+  TUIFooter.getInstance().disable();
+}
+
+/**
+ * Render footer status (convenience function)
+ */
+export function renderTUIFooter(options: TUIFooterOptions): void {
+  TUIFooter.getInstance().render(options);
+}
+
+/**
+ * Clear the footer line
+ */
+export function clearTUIFooter(): void {
+  TUIFooter.getInstance().clear();
+}
+
+// ============================================
+// EXPORTS
+// ============================================
+
+export default {
+  TUIFooter,
+  getTUIFooter,
+  enableTUIFooter,
+  disableTUIFooter,
+  renderTUIFooter,
+  clearTUIFooter,
+  ANSI,
+};

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

@@ -0,0 +1,186 @@
+/**
+ * TUI Types
+ * Type definitions for the interactive TUI components
+ */
+
+import type { PermissionMode, ClaudeModel, Message as ApiMessage, ToolDefinition } from "../../../../types/index.js";
+import type { HookManager } from "../../../../ecosystem/hooks/index.js";
+import type { TerminalHandle } from "../../../../native/index.js";
+import type { LoadedSession, SessionSummary } from "../../../../core/sessions/types.js";
+
+/**
+ * Message sub-type for granular categorization
+ * - tool_call: Assistant is invoking a tool
+ * - tool_result: Tool execution result (success or error)
+ * - hook: Hook intercept/decision message
+ * - info: General system info (session start, commands, etc.)
+ * - error: Error messages
+ * - thinking: Extended thinking output
+ */
+export type MessageSubType =
+  | "tool_call"
+  | "tool_result"
+  | "hook"
+  | "info"
+  | "error"
+  | "thinking";
+
+/**
+ * UI-specific message representation
+ */
+export interface UIMessage {
+  id: string;
+  /** Base role: user, assistant, or system */
+  role: "user" | "assistant" | "system";
+  /** Message content for display */
+  content: string;
+  /** Timestamp in milliseconds */
+  timestamp: number;
+  /** Optional sub-type for granular display labels */
+  subType?: MessageSubType;
+  /** For tool messages: the tool name */
+  toolName?: string;
+  /** For tool_result: whether it was an error */
+  isError?: boolean;
+}
+
+/**
+ * Props for the main InteractiveTUI component
+ */
+export interface InteractiveTUIProps {
+  apiKey: string;
+  model: ClaudeModel;
+  permissionMode: PermissionMode;
+  maxTokens: number;
+  systemPrompt: string;
+  tools: ToolDefinition[];
+  hookManager: HookManager;
+  sessionStore: SessionStore;
+  sessionId: string;
+  setSessionId: (id: string) => void;
+  initialMessages: ApiMessage[];
+  workingDirectory: string;
+  onExit: () => void;
+}
+
+/**
+ * Session store interface (subset used by TUI)
+ */
+export interface SessionStore {
+  saveMessage(message: ApiMessage): Promise<void>;
+  saveMetrics(metrics: unknown): Promise<void>;
+  exportSession(sessionId: string, format: "jsonl" | "json" | "markdown"): Promise<string>;
+  listSessions(limit?: number): Promise<SessionSummary[]>;
+  resumeSession(sessionId: string): Promise<LoadedSession | null>;
+  createSession(options: {
+    model: string;
+    workingDirectory: string;
+    agentName?: string;
+    agentColor?: string;
+    teamName?: string;
+  }): Promise<string>;
+}
+
+/**
+ * Session info for listing
+ */
+export interface SessionInfo {
+  id: string;
+  messageCount: number;
+  lastActivity?: number;
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * Message area component props
+ */
+export interface MessageAreaProps {
+  messages: UIMessage[];
+  isLoading: boolean;
+  spinnerFrame: string;
+  height: number;
+  scrollOffset: number;
+  contextWarning: string | null;
+  streamingText?: string;
+}
+
+/**
+ * Status bar component props
+ */
+export interface StatusBarProps {
+  permissionMode: PermissionMode;
+  tokensUsed: number;
+  model: string;
+  isLoading: boolean;
+  spinnerFrame: string;
+}
+
+/**
+ * Input field component props
+ */
+export interface InputFieldProps {
+  value: string;
+  cursorPos: number;
+  placeholder: string;
+  isActive: boolean;
+}
+
+/**
+ * Terminal layout configuration
+ */
+export interface TerminalLayout {
+  terminalHeight: number;
+  inputHeight: number;
+  statusHeight: number;
+  messageHeight: number;
+}
+
+/**
+ * Command handler context
+ */
+export interface CommandContext {
+  sessionId: string;
+  setSessionId: (id: string) => void;
+  model: ClaudeModel;
+  setModel: (model: ClaudeModel) => void;
+  apiMessages: ApiMessage[];
+  setApiMessages: (messages: ApiMessage[]) => void;
+  setMessages: (messages: UIMessage[]) => void;
+  processedCountRef: React.MutableRefObject<number>;
+  totalCost: number;
+  setTotalCost: (cost: number) => void;
+  totalTokens: number;
+  setTotalTokens: (tokens: number) => void;
+  permissionMode: PermissionMode;
+  tools: ToolDefinition[];
+  workingDirectory: string;
+  sessionStore: SessionStore;
+  addSystemMessage: (content: string) => void;
+  messagesLength: number;
+  onExit: () => void;
+  exit: () => void;
+  // Session selection state
+  sessionSelectMode: boolean;
+  setSessionSelectMode: (mode: boolean) => void;
+  setSelectableSessions: (sessions: SessionInfo[]) => void;
+  // Help mode state
+  helpMode: boolean;
+  setHelpMode: (mode: boolean) => void;
+  helpSection: number;
+  setHelpSection: (section: number) => void;
+}
+
+/**
+ * Context info from status-line
+ */
+export interface ContextInfo {
+  percentRemaining: number;
+  isLow: boolean;
+  isCritical: boolean;
+}
+
+/**
+ * Re-export types from parent for convenience
+ */
+export type { PermissionMode, ClaudeModel, Message as ApiMessage, ToolDefinition } from "../../../../types/index.js";
+export type { HookManager } from "../../../../ecosystem/hooks/index.js";

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

@@ -0,0 +1,104 @@
+/**
+ * TUI Input Handler Hook
+ * Custom hook for handling keyboard input in TUI
+ */
+
+import { useCallback } from "react";
+import { useInput } from "ink";
+
+interface UseInputHandlerOptions {
+  isLoading: boolean;
+  inputValue: string;
+  cursorPos: number;
+  setInputValue: (value: string | ((prev: string) => string)) => void;
+  setCursorPos: (value: number | ((prev: number) => number)) => void;
+  onSubmit: (value: string) => void;
+  onCommand: (cmd: string) => void;
+}
+
+/**
+ * Hook for handling keyboard input in the TUI
+ */
+export function useInputHandler({
+  isLoading,
+  inputValue,
+  cursorPos,
+  setInputValue,
+  setCursorPos,
+  onSubmit,
+  onCommand,
+}: UseInputHandlerOptions) {
+  // Main input handler
+  useInput(
+    (input, key) => {
+      if (isLoading) return;
+
+      // Submit on Enter
+      if (key.return) {
+        if (inputValue.trim()) {
+          if (inputValue.startsWith("/")) {
+            onCommand(inputValue);
+          } else {
+            onSubmit(inputValue);
+          }
+          setInputValue("");
+          setCursorPos(0);
+        }
+        return;
+      }
+
+      // Backspace
+      if (key.backspace || key.delete) {
+        if (cursorPos > 0) {
+          setInputValue((v) => v.slice(0, cursorPos - 1) + v.slice(cursorPos));
+          setCursorPos((p) => p - 1);
+        }
+        return;
+      }
+
+      // Arrow keys
+      if (key.leftArrow) {
+        setCursorPos((p) => Math.max(0, p - 1));
+        return;
+      }
+
+      if (key.rightArrow) {
+        setCursorPos((p) => Math.min(inputValue.length, p + 1));
+        return;
+      }
+
+      // Home/End keys (Ctrl+A / Ctrl+E)
+      if (key.ctrl && input === "a") {
+        setCursorPos(0);
+        return;
+      }
+
+      if (key.ctrl && input === "e") {
+        setCursorPos(inputValue.length);
+        return;
+      }
+
+      // Regular character
+      if (input && !key.ctrl && !key.meta) {
+        setInputValue((v) => v.slice(0, cursorPos) + input + v.slice(cursorPos));
+        setCursorPos((p) => p + input.length);
+      }
+    },
+    { isActive: !isLoading }
+  );
+}
+
+/**
+ * Hook for handling exit shortcuts (Ctrl+C)
+ */
+export function useExitHandler(onExit: () => void, exit: () => void) {
+  useInput(
+    (input, key) => {
+      if (key.ctrl && input === "c") {
+        onExit();
+        exit();
+      }
+    },
+    { isActive: true }
+  );
+}