@butlerw/vellum 0.1.0

package/src/tui/components/backtrack/BacktrackControls.tsx

@@ -0,0 +1,402 @@
+/**
+ * BacktrackControls Component (T058)
+ *
+ * UI component for displaying and controlling conversation backtracking.
+ * Shows undo/redo status, current branch, and branch selector.
+ *
+ * @module tui/components/backtrack/BacktrackControls
+ */
+
+import { Box, Text, useInput } from "ink";
+import type React from "react";
+import { memo, useCallback, useState } from "react";
+import type { BacktrackState, Branch } from "../../hooks/useBacktrack.js";
+import { useTUITranslation } from "../../i18n/index.js";
+import { useTheme } from "../../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props for the BacktrackControls component.
+ */
+export interface BacktrackControlsProps {
+  /** Current backtrack state */
+  readonly backtrackState: BacktrackState;
+  /** Available branches */
+  readonly branches: ReadonlyArray<Branch<unknown>>;
+  /** Handler for undo action */
+  readonly onUndo: () => void;
+  /** Handler for redo action */
+  readonly onRedo: () => void;
+  /** Handler for creating a new branch */
+  readonly onCreateBranch: () => void;
+  /** Handler for switching branches */
+  readonly onSwitchBranch: (branchId: string) => void;
+  /** Whether the component is focused for input */
+  readonly isFocused?: boolean;
+  /** Whether to show in compact mode */
+  readonly compact?: boolean;
+  /** Whether to show keyboard hints */
+  readonly showHints?: boolean;
+}
+
+/**
+ * Props for the BranchSelector sub-component.
+ */
+interface BranchSelectorProps {
+  readonly branches: ReadonlyArray<Branch<unknown>>;
+  readonly currentBranch: string;
+  readonly onSelect: (branchId: string) => void;
+  readonly onClose: () => void;
+  readonly isFocused: boolean;
+}
+
+// =============================================================================
+// Sub-Components
+// =============================================================================
+
+/**
+ * Branch selector popup for choosing between branches.
+ */
+function BranchSelector({
+  branches,
+  currentBranch,
+  onSelect,
+  onClose,
+  isFocused,
+}: BranchSelectorProps): React.JSX.Element {
+  const { theme } = useTheme();
+  const { t } = useTUITranslation();
+  const [selectedIndex, setSelectedIndex] = useState(() => {
+    const index = branches.findIndex((b) => b.name === currentBranch);
+    return index >= 0 ? index : 0;
+  });
+
+  useInput(
+    (input, key) => {
+      if (!isFocused) return;
+
+      if (key.upArrow || input === "k") {
+        setSelectedIndex((prev) => Math.max(0, prev - 1));
+      } else if (key.downArrow || input === "j") {
+        setSelectedIndex((prev) => Math.min(branches.length - 1, prev + 1));
+      } else if (key.return) {
+        const branch = branches[selectedIndex];
+        if (branch) {
+          onSelect(branch.id);
+        }
+        onClose();
+      } else if (key.escape || input === "q") {
+        onClose();
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  return (
+    <Box flexDirection="column" borderStyle="single" borderColor={theme.colors.muted} paddingX={1}>
+      <Text bold color={theme.colors.primary}>
+        {t("backtrack.selectBranch")}
+      </Text>
+      <Box marginTop={1} flexDirection="column">
+        {branches.map((branch, index) => {
+          const isSelected = index === selectedIndex;
+          const isCurrent = branch.name === currentBranch;
+
+          return (
+            <Box key={branch.id}>
+              <Text color={isSelected ? theme.colors.primary : undefined} inverse={isSelected}>
+                {isSelected ? "▸ " : "  "}
+                {branch.name}
+                {isCurrent ? ` ${t("backtrack.current")}` : ""}
+              </Text>
+            </Box>
+          );
+        })}
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>{t("backtrack.keybindings")}</Text>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Status indicator showing undo/redo availability.
+ */
+function StatusIndicator({
+  canUndo,
+  canRedo,
+  compact,
+  t,
+}: {
+  canUndo: boolean;
+  canRedo: boolean;
+  compact: boolean;
+  t: (key: string) => string;
+}): React.JSX.Element {
+  const { theme } = useTheme();
+
+  if (compact) {
+    return (
+      <Box>
+        <Text color={canUndo ? theme.colors.success : theme.colors.muted}>◀</Text>
+        <Text color={canRedo ? theme.colors.success : theme.colors.muted}>▶</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box gap={1}>
+      <Text color={canUndo ? theme.colors.success : theme.colors.muted}>
+        {"[<]"} {t("backtrack.undo")} {canUndo ? "+" : "x"}
+      </Text>
+      <Text color={canRedo ? theme.colors.success : theme.colors.muted}>
+        {"[>]"} {t("backtrack.redo")} {canRedo ? "+" : "x"}
+      </Text>
+    </Box>
+  );
+}
+
+/**
+ * Branch indicator showing current branch and fork count.
+ */
+function BranchIndicator({
+  currentBranch,
+  forkCount,
+  compact,
+  t,
+}: {
+  currentBranch: string;
+  forkCount: number;
+  compact: boolean;
+  onClick?: () => void;
+  t: (key: string) => string;
+}): React.JSX.Element {
+  const { theme } = useTheme();
+
+  if (compact) {
+    return (
+      <Box>
+        <Text color={theme.colors.info}>⎇{forkCount > 0 ? `+${forkCount}` : ""}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box gap={1}>
+      <Text color={theme.colors.info}>⎇ {currentBranch}</Text>
+      {forkCount > 0 && (
+        <Text dimColor>
+          ({forkCount} {forkCount !== 1 ? t("backtrack.forks") : t("backtrack.fork")})
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * History position indicator.
+ */
+function HistoryIndicator({
+  currentIndex,
+  historyLength,
+}: {
+  currentIndex: number;
+  historyLength: number;
+}): React.JSX.Element {
+  const position = currentIndex + 1;
+
+  return (
+    <Text dimColor>
+      [{position}/{historyLength}]
+    </Text>
+  );
+}
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+/**
+ * BacktrackControls displays undo/redo status and branch management UI.
+ *
+ * Features:
+ * - Visual indicators for undo/redo availability
+ * - Current branch display with fork count
+ * - Branch selector popup (Ctrl+B to toggle)
+ * - History position indicator
+ * - Keyboard shortcuts: Ctrl+Z (undo), Ctrl+Y (redo), Ctrl+B (branch)
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   backtrackState,
+ *   branches,
+ *   undo,
+ *   redo,
+ *   createBranch,
+ *   switchBranch,
+ * } = useBacktrack({ initialState: messages });
+ *
+ * <BacktrackControls
+ *   backtrackState={backtrackState}
+ *   branches={branches}
+ *   onUndo={undo}
+ *   onRedo={redo}
+ *   onCreateBranch={() => createBranch()}
+ *   onSwitchBranch={switchBranch}
+ *   isFocused={true}
+ *   showHints={true}
+ * />
+ * ```
+ */
+export const BacktrackControls = memo(function BacktrackControls({
+  backtrackState,
+  branches,
+  onUndo,
+  onRedo,
+  onCreateBranch,
+  onSwitchBranch,
+  isFocused = false,
+  compact = false,
+  showHints = true,
+}: BacktrackControlsProps): React.JSX.Element {
+  const { t } = useTUITranslation();
+  const [showBranchSelector, setShowBranchSelector] = useState(false);
+
+  const { canUndo, canRedo, forkCount, currentBranch, currentIndex, historyLength } =
+    backtrackState;
+
+  // Handle keyboard input
+  useInput(
+    (input, key) => {
+      if (!isFocused || showBranchSelector) return;
+
+      // Ctrl+Z for undo
+      if (key.ctrl && input === "z") {
+        onUndo();
+        return;
+      }
+
+      // Ctrl+Y for redo
+      if (key.ctrl && input === "y") {
+        onRedo();
+        return;
+      }
+
+      // Ctrl+B for branch selector or create branch
+      if (key.ctrl && input === "b") {
+        if (branches.length > 1) {
+          setShowBranchSelector(true);
+        } else {
+          onCreateBranch();
+        }
+        return;
+      }
+
+      // Ctrl+Shift+B to always create new branch
+      if (key.ctrl && key.shift && input === "B") {
+        onCreateBranch();
+        return;
+      }
+    },
+    { isActive: isFocused && !showBranchSelector }
+  );
+
+  const handleBranchSelect = useCallback(
+    (branchId: string) => {
+      onSwitchBranch(branchId);
+      setShowBranchSelector(false);
+    },
+    [onSwitchBranch]
+  );
+
+  const handleBranchClose = useCallback(() => {
+    setShowBranchSelector(false);
+  }, []);
+
+  // Branch selector overlay
+  if (showBranchSelector) {
+    return (
+      <BranchSelector
+        branches={branches}
+        currentBranch={currentBranch}
+        onSelect={handleBranchSelect}
+        onClose={handleBranchClose}
+        isFocused={isFocused}
+      />
+    );
+  }
+
+  // Compact mode - single line
+  if (compact) {
+    return (
+      <Box gap={1}>
+        <StatusIndicator canUndo={canUndo} canRedo={canRedo} compact={true} t={t} />
+        <BranchIndicator
+          currentBranch={currentBranch}
+          forkCount={forkCount}
+          compact={true}
+          onClick={() => setShowBranchSelector(true)}
+          t={t}
+        />
+        <HistoryIndicator currentIndex={currentIndex} historyLength={historyLength} />
+      </Box>
+    );
+  }
+
+  // Full mode
+  return (
+    <Box flexDirection="column">
+      <Box gap={2}>
+        <StatusIndicator canUndo={canUndo} canRedo={canRedo} compact={false} t={t} />
+        <Text dimColor>│</Text>
+        <BranchIndicator
+          currentBranch={currentBranch}
+          forkCount={forkCount}
+          compact={false}
+          onClick={() => setShowBranchSelector(true)}
+          t={t}
+        />
+        <Text dimColor>│</Text>
+        <HistoryIndicator currentIndex={currentIndex} historyLength={historyLength} />
+      </Box>
+
+      {showHints && (
+        <Box marginTop={1}>
+          <Text dimColor>
+            ^Z {t("backtrack.undo").toLowerCase()} • ^Y {t("backtrack.redo").toLowerCase()} • ^B{" "}
+            {branches.length > 1 ? t("backtrack.switchBranch") : t("backtrack.newBranch")}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  );
+});
+
+/**
+ * Compact status bar variant of BacktrackControls.
+ * Designed to fit in the status bar area.
+ */
+export function BacktrackStatusBar({
+  backtrackState,
+}: {
+  backtrackState: BacktrackState;
+}): React.JSX.Element {
+  const { theme } = useTheme();
+  const { canUndo, canRedo, currentBranch, currentIndex, historyLength } = backtrackState;
+
+  return (
+    <Box gap={1}>
+      <Text color={canUndo ? theme.colors.info : theme.colors.muted}>◀</Text>
+      <Text dimColor>
+        {currentIndex + 1}/{historyLength}
+      </Text>
+      <Text color={canRedo ? theme.colors.info : theme.colors.muted}>▶</Text>
+      {currentBranch !== "Main" && <Text color={theme.colors.warning}>⎇ {currentBranch}</Text>}
+    </Box>
+  );
+}

package/src/tui/components/backtrack/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Backtrack Components
+ *
+ * Components for conversation backtracking and branching UI.
+ *
+ * @module tui/components/backtrack
+ */
+
+export {
+  BacktrackControls,
+  type BacktrackControlsProps,
+  BacktrackStatusBar,
+} from "./BacktrackControls.js";

package/src/tui/components/common/AutoApprovalStatus.tsx

@@ -0,0 +1,251 @@
+/**
+ * AutoApprovalStatus Component (Phase 35+)
+ *
+ * Displays auto-approval status and limits in the TUI.
+ * Shows consecutive requests/cost for automatic tool approvals.
+ * Uses ASCII symbols instead of emoji for terminal compatibility.
+ *
+ * @module tui/components/common/AutoApprovalStatus
+ */
+
+import { Box, Text } from "ink";
+import type React from "react";
+import { memo } from "react";
+import { useTheme } from "../../theme/index.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Status severity level.
+ */
+export type AutoApprovalSeverity = "info" | "warning" | "error";
+
+/**
+ * Props for the AutoApprovalStatus component.
+ */
+export interface AutoApprovalStatusProps {
+  /** Number of consecutive auto-approved requests */
+  readonly consecutiveRequests: number;
+  /** Request limit for auto-approvals */
+  readonly requestLimit: number;
+  /** Cumulative cost of consecutive auto-approved operations in USD */
+  readonly consecutiveCost: number;
+  /** Cost limit for auto-approvals in USD */
+  readonly costLimit: number;
+  /** Percentage of request limit used (0-100) */
+  readonly requestPercentUsed: number;
+  /** Percentage of cost limit used (0-100) */
+  readonly costPercentUsed: number;
+  /** Whether any limit has been reached */
+  readonly limitReached?: boolean;
+  /** Which limit type was reached */
+  readonly limitType?: "requests" | "cost";
+  /** Whether to show in compact mode */
+  readonly compact?: boolean;
+  /** Override severity level */
+  readonly severity?: AutoApprovalSeverity;
+}
+
+// =============================================================================
+// Constants - ASCII Symbols (NO EMOJI)
+// =============================================================================
+
+/**
+ * ASCII symbols for different severity levels.
+ */
+const SEVERITY_SYMBOLS: Record<AutoApprovalSeverity, string> = {
+  info: "[i]",
+  warning: "[!]",
+  error: "[X]",
+} as const;
+
+/**
+ * ASCII symbol for auto-approval indicator.
+ */
+const AUTO_SYMBOL = "[>]";
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+/**
+ * Format cost as USD string.
+ */
+function formatCostUSD(cost: number): string {
+  return `$${cost.toFixed(2)}`;
+}
+
+/**
+ * Determine severity based on usage percentage.
+ */
+function getSeverityFromPercent(
+  requestPercent: number,
+  costPercent: number,
+  limitReached: boolean
+): AutoApprovalSeverity {
+  if (limitReached) return "error";
+  const maxPercent = Math.max(requestPercent, costPercent);
+  if (maxPercent >= 80) return "warning";
+  return "info";
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * AutoApprovalStatus - Displays auto-approval limits and status.
+ *
+ * Features:
+ * - Shows consecutive requests vs limit
+ * - Shows consecutive cost vs limit
+ * - Different severity levels (info, warning, error)
+ * - Compact and full display modes
+ * - ASCII-only symbols for terminal compatibility
+ *
+ * @example
+ * ```tsx
+ * // Normal status
+ * <AutoApprovalStatus
+ *   consecutiveRequests={45}
+ *   requestLimit={50}
+ *   consecutiveCost={3.50}
+ *   costLimit={5.00}
+ *   requestPercentUsed={90}
+ *   costPercentUsed={70}
+ * />
+ *
+ * // Limit reached
+ * <AutoApprovalStatus
+ *   consecutiveRequests={50}
+ *   requestLimit={50}
+ *   consecutiveCost={4.00}
+ *   costLimit={5.00}
+ *   requestPercentUsed={100}
+ *   costPercentUsed={80}
+ *   limitReached
+ *   limitType="requests"
+ * />
+ * ```
+ */
+export const AutoApprovalStatus: React.FC<AutoApprovalStatusProps> = memo(
+  function AutoApprovalStatus({
+    consecutiveRequests,
+    requestLimit,
+    consecutiveCost,
+    costLimit,
+    requestPercentUsed,
+    costPercentUsed,
+    limitReached = false,
+    limitType,
+    compact = false,
+    severity: severityProp,
+  }) {
+    const { theme } = useTheme();
+
+    // Determine severity from props or calculate from percentage
+    const severity =
+      severityProp ?? getSeverityFromPercent(requestPercentUsed, costPercentUsed, limitReached);
+
+    // Get colors based on severity
+    const getColor = () => {
+      switch (severity) {
+        case "error":
+          return theme.colors.error;
+        case "warning":
+          return theme.colors.warning;
+        default:
+          return theme.colors.info;
+      }
+    };
+
+    const symbol = SEVERITY_SYMBOLS[severity];
+    const color = getColor();
+
+    // Compact display: single line
+    // [i] Auto-approved: 45/50 requests ($3.50/$5.00)
+    if (compact) {
+      return (
+        <Box>
+          <Text color={color}>
+            {AUTO_SYMBOL} Auto-approved: {consecutiveRequests}/{requestLimit} requests (
+            {formatCostUSD(consecutiveCost)}/{formatCostUSD(costLimit)})
+          </Text>
+        </Box>
+      );
+    }
+
+    // Full display with limit reached message
+    if (limitReached) {
+      const limitMessage =
+        limitType === "requests"
+          ? `Request limit reached (${consecutiveRequests}/${requestLimit})`
+          : `Cost limit reached (${formatCostUSD(consecutiveCost)}/${formatCostUSD(costLimit)})`;
+
+      return (
+        <Box flexDirection="column" marginY={1}>
+          {/* Header line */}
+          <Box>
+            <Text color={color} bold>
+              {symbol} AUTO-APPROVAL LIMIT: {limitMessage}
+            </Text>
+          </Box>
+
+          {/* Instructions */}
+          <Box marginLeft={4}>
+            <Text dimColor>Waiting for user confirmation to continue...</Text>
+          </Box>
+
+          {/* Details */}
+          <Box marginLeft={4} marginTop={1}>
+            <Text>
+              {AUTO_SYMBOL} Requests: {consecutiveRequests}/{requestLimit} | Cost:{" "}
+              {formatCostUSD(consecutiveCost)}/{formatCostUSD(costLimit)}
+            </Text>
+          </Box>
+        </Box>
+      );
+    }
+
+    // Full display for warning state
+    return (
+      <Box flexDirection="column" marginY={1}>
+        {/* Header line */}
+        <Box>
+          <Text color={color} bold>
+            {symbol} Auto-Approval Status
+          </Text>
+        </Box>
+
+        {/* Request details */}
+        <Box marginLeft={4}>
+          <Text>
+            Requests:{" "}
+            <Text color={requestPercentUsed >= 80 ? theme.colors.warning : undefined}>
+              {consecutiveRequests}/{requestLimit}
+            </Text>{" "}
+            ({requestPercentUsed.toFixed(0)}%)
+          </Text>
+        </Box>
+
+        {/* Cost details */}
+        <Box marginLeft={4}>
+          <Text>
+            Cost:{" "}
+            <Text color={costPercentUsed >= 80 ? theme.colors.warning : undefined}>
+              {formatCostUSD(consecutiveCost)}/{formatCostUSD(costLimit)}
+            </Text>{" "}
+            ({costPercentUsed.toFixed(0)}%)
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+);
+
+/**
+ * Default export for convenience.
+ */
+export default AutoApprovalStatus;