arc402-cli 0.8.0 → 0.9.1

package/src/tui/InputLine.tsx

@@ -1,7 +1,8 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 import { Box, Text, useInput } from "ink";
 import TextInput from "ink-text-input";
 import { createProgram } from "../program.js";
+import { CompletionDropdown } from "./components/CompletionDropdown.js";
 
 const BUILTIN_CMDS = ["help", "exit", "quit", "clear", "status"];
 
@@ -11,8 +12,7 @@ interface InputLineProps {
 }
 
 /**
- * Input line with command history navigation and tab completion.
- * Uses ink-text-input for text input with cursor.
+ * Input line with command history navigation, tab completion, and dropdown.
  */
 export function InputLine({ onSubmit, isDisabled = false }: InputLineProps) {
   const [value, setValue] = useState("");
@@ -20,6 +20,11 @@ export function InputLine({ onSubmit, isDisabled = false }: InputLineProps) {
   const [historyIdx, setHistoryIdx] = useState(-1);
   const [historyTemp, setHistoryTemp] = useState("");
 
+  // Dropdown state
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [dropdownIdx, setDropdownIdx] = useState(0);
+  const [dropdownCandidates, setDropdownCandidates] = useState<string[]>([]);
+
   // Lazily build command list for tab completion
   const [topCmds] = useState<string[]>(() => {
     try {
@@ -44,12 +49,30 @@ export function InputLine({ onSubmit, isDisabled = false }: InputLineProps) {
     }
   });
 
+  const getCompletions = useCallback(
+    (input: string): string[] => {
+      const allTop = [...BUILTIN_CMDS, ...topCmds];
+      const trimmed = input.trimStart();
+      const spaceIdx = trimmed.indexOf(" ");
+
+      if (spaceIdx === -1) {
+        return allTop.filter((cmd) => cmd.startsWith(trimmed));
+      }
+      const parent = trimmed.slice(0, spaceIdx);
+      const rest = trimmed.slice(spaceIdx + 1);
+      const subs = subCmds.get(parent) ?? [];
+      return subs
+        .filter((s) => s.startsWith(rest))
+        .map((s) => `${parent} ${s}`);
+    },
+    [topCmds, subCmds]
+  );
+
   const handleSubmit = useCallback(
     (val: string) => {
       const trimmed = val.trim();
       if (!trimmed) return;
 
-      // Add to history (avoid duplicate of last entry)
       setHistory((prev) => {
         if (prev[prev.length - 1] === trimmed) return prev;
         return [...prev, trimmed];
@@ -57,6 +80,7 @@ export function InputLine({ onSubmit, isDisabled = false }: InputLineProps) {
       setHistoryIdx(-1);
       setHistoryTemp("");
       setValue("");
+      setShowDropdown(false);
 
       onSubmit(trimmed);
     },
@@ -67,7 +91,33 @@ export function InputLine({ onSubmit, isDisabled = false }: InputLineProps) {
     (_input, key) => {
       if (isDisabled) return;
 
-      // Up arrow — history prev
+      // ── Dropdown navigation ───────────────────────────────────────────
+      if (showDropdown) {
+        if (key.upArrow) {
+          setDropdownIdx((i) => Math.max(0, i - 1));
+          return;
+        }
+        if (key.downArrow) {
+          setDropdownIdx((i) =>
+            Math.min(dropdownCandidates.length - 1, i + 1)
+          );
+          return;
+        }
+        if (key.return) {
+          // Select the highlighted candidate
+          if (dropdownCandidates[dropdownIdx]) {
+            setValue(dropdownCandidates[dropdownIdx] + " ");
+          }
+          setShowDropdown(false);
+          return;
+        }
+        if (key.escape) {
+          setShowDropdown(false);
+          return;
+        }
+      }
+
+      // ── History navigation ────────────────────────────────────────────
       if (key.upArrow) {
         setHistory((hist) => {
           setHistoryIdx((idx) => {
@@ -88,7 +138,6 @@ export function InputLine({ onSubmit, isDisabled = false }: InputLineProps) {
         return;
       }
 
-      // Down arrow — history next
       if (key.downArrow) {
         setHistory((hist) => {
           setHistoryIdx((idx) => {
@@ -109,32 +158,27 @@ export function InputLine({ onSubmit, isDisabled = false }: InputLineProps) {
         return;
       }
 
-      // Tab — completion
+      // ── Tab — completion / dropdown ───────────────────────────────────
       if (_input === "\t") {
-        const allTop = [...BUILTIN_CMDS, ...topCmds];
-        const trimmed = value.trimStart();
-        const spaceIdx = trimmed.indexOf(" ");
+        const completions = getCompletions(value);
 
-        let completions: string[];
-        if (spaceIdx === -1) {
-          completions = allTop.filter((cmd) => cmd.startsWith(trimmed));
-        } else {
-          const parent = trimmed.slice(0, spaceIdx);
-          const rest = trimmed.slice(spaceIdx + 1);
-          const subs = subCmds.get(parent) ?? [];
-          completions = subs
-            .filter((s) => s.startsWith(rest))
-            .map((s) => `${parent} ${s}`);
+        if (completions.length === 0) {
+          setShowDropdown(false);
+          return;
         }
 
-        if (completions.length === 0) return;
-
         if (completions.length === 1) {
           setValue(completions[0] + " ");
+          setShowDropdown(false);
           return;
         }
 
-        // Find common prefix
+        // Show dropdown with multiple candidates
+        setDropdownCandidates(completions);
+        setDropdownIdx(0);
+        setShowDropdown(true);
+
+        // Also advance to common prefix
         const common = completions.reduce((a, b) => {
           let i = 0;
           while (i < a.length && i < b.length && a[i] === b[i]) i++;
@@ -144,21 +188,52 @@ export function InputLine({ onSubmit, isDisabled = false }: InputLineProps) {
           setValue(common);
         }
       }
+
+      // ── Escape — dismiss dropdown ─────────────────────────────────────
+      if (key.escape) {
+        setShowDropdown(false);
+      }
     },
     { isActive: !isDisabled }
   );
 
+  // Dismiss dropdown when value changes (user types more)
+  const handleChange = useCallback(
+    (newVal: string) => {
+      setValue(newVal);
+      // If dropdown is open, update candidates live
+      if (showDropdown) {
+        const completions = getCompletions(newVal);
+        if (completions.length <= 1) {
+          setShowDropdown(false);
+        } else {
+          setDropdownCandidates(completions);
+          setDropdownIdx(0);
+        }
+      }
+    },
+    [showDropdown, getCompletions]
+  );
+
   return (
-    <Box>
-      <Text color="cyan">◈</Text>
-      <Text dimColor> arc402 </Text>
-      <Text color="white">{">"} </Text>
-      <TextInput
-        value={value}
-        onChange={setValue}
-        onSubmit={handleSubmit}
-        focus={!isDisabled}
+    <Box flexDirection="column">
+      {/* Completion dropdown renders above the input */}
+      <CompletionDropdown
+        candidates={dropdownCandidates}
+        selectedIndex={dropdownIdx}
+        visible={showDropdown}
       />
+      <Box>
+        <Text color="cyan">◈</Text>
+        <Text dimColor> arc402 </Text>
+        <Text color="white">{">"} </Text>
+        <TextInput
+          value={value}
+          onChange={handleChange}
+          onSubmit={handleSubmit}
+          focus={!isDisabled}
+        />
+      </Box>
     </Box>
   );
 }

package/src/tui/Viewport.tsx

@@ -17,13 +17,10 @@ export function Viewport({ lines, scrollOffset, isAutoScroll }: ViewportProps) {
   const { stdout } = useStdout();
   const termRows = stdout?.rows ?? 24;
 
-  // We'll compute the viewport height: total rows minus fixed areas
-  // Header is approximately bannerLines + separator (~14-16 rows)
-  // Footer is 1 row
-  // We'll use a reasonable estimate here; the parent App can pass exact height
-  const HEADER_ROWS = 15; // approximate
-  const FOOTER_ROWS = 1;
-  const viewportHeight = Math.max(1, termRows - HEADER_ROWS - FOOTER_ROWS);
+  // Approximate viewport height for scroll slicing.
+  // The actual flex layout handles visual sizing; this is for computing
+  // which lines to show in the scroll window.
+  const viewportHeight = Math.max(1, termRows - 18);
 
   // Compute the window slice
   // scrollOffset=0 → show last viewportHeight lines

package/src/tui/components/Button.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Box, Text, useFocus, useInput } from "ink";
+
+export interface ButtonProps {
+  label: string;
+  onPress: () => void;
+  variant?: "primary" | "danger" | "dim";
+}
+
+const VARIANT_COLORS: Record<string, string> = {
+  primary: "cyan",
+  danger: "red",
+  dim: "gray",
+};
+
+export function Button({ label, onPress, variant = "primary" }: ButtonProps) {
+  const { isFocused } = useFocus();
+
+  useInput(
+    (_input, key) => {
+      if (key.return) {
+        onPress();
+      }
+    },
+    { isActive: isFocused }
+  );
+
+  const color = isFocused ? VARIANT_COLORS[variant] ?? "cyan" : "white";
+
+  return (
+    <Box>
+      <Text color={color} bold={isFocused}>
+        {isFocused ? "▸ " : "  "}
+        {label}
+      </Text>
+    </Box>
+  );
+}

package/src/tui/components/CeremonyView.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { StepSpinner } from "./StepSpinner.js";
+import type { StepStatus } from "./StepSpinner.js";
+
+export interface CeremonyStep {
+  label: string;
+  status: StepStatus;
+  detail?: string;
+  error?: string;
+}
+
+export interface CeremonyViewProps {
+  title: string;
+  steps: CeremonyStep[];
+}
+
+export function CeremonyView({ title, steps }: CeremonyViewProps) {
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          ◈ {title}
+        </Text>
+      </Box>
+      {steps.map((step, i) => (
+        <StepSpinner
+          key={i}
+          step={i + 1}
+          total={steps.length}
+          label={step.label}
+          status={step.status}
+          detail={step.detail}
+          error={step.error}
+        />
+      ))}
+    </Box>
+  );
+}

package/src/tui/components/CompletionDropdown.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Box, Text } from "ink";
+
+export interface CompletionDropdownProps {
+  candidates: string[];
+  selectedIndex: number;
+  visible: boolean;
+}
+
+const MAX_VISIBLE = 8;
+
+export function CompletionDropdown({
+  candidates,
+  selectedIndex,
+  visible,
+}: CompletionDropdownProps) {
+  if (!visible || candidates.length === 0) return null;
+
+  // Window the list if there are too many candidates
+  let startIdx = 0;
+  if (candidates.length > MAX_VISIBLE) {
+    startIdx = Math.max(0, selectedIndex - Math.floor(MAX_VISIBLE / 2));
+    startIdx = Math.min(startIdx, candidates.length - MAX_VISIBLE);
+  }
+  const visibleCandidates = candidates.slice(
+    startIdx,
+    startIdx + MAX_VISIBLE
+  );
+
+  return (
+    <Box flexDirection="column" marginLeft={4}>
+      <Box>
+        <Text dimColor>{"┌─ completions ─"}</Text>
+      </Box>
+      {visibleCandidates.map((candidate, i) => {
+        const actualIdx = startIdx + i;
+        const isSelected = actualIdx === selectedIndex;
+        return (
+          <Box key={candidate}>
+            <Text dimColor>{"│"}</Text>
+            <Text color={isSelected ? "cyan" : "white"} bold={isSelected}>
+              {isSelected ? " ▸ " : "   "}
+              {candidate}
+            </Text>
+          </Box>
+        );
+      })}
+      <Box>
+        <Text dimColor>{"└─"}</Text>
+        {candidates.length > MAX_VISIBLE && (
+          <Text dimColor>
+            {" "}
+            ({candidates.length} total)
+          </Text>
+        )}
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/ConfirmPrompt.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { Button } from "./Button.js";
+
+export interface ConfirmPromptProps {
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmLabel?: string;
+  cancelLabel?: string;
+}
+
+export function ConfirmPrompt({
+  message,
+  onConfirm,
+  onCancel,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+}: ConfirmPromptProps) {
+  return (
+    <Box flexDirection="column">
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          ◈ {message}
+        </Text>
+      </Box>
+      <Box gap={2}>
+        <Button label={confirmLabel} onPress={onConfirm} variant="primary" />
+        <Button label={cancelLabel} onPress={onCancel} variant="dim" />
+      </Box>
+      <Box marginTop={1}>
+        <Text dimColor>Tab to switch · Enter to select</Text>
+      </Box>
+    </Box>
+  );
+}

package/src/tui/components/InteractiveTable.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import { Box, Text, useInput } from "ink";
+
+export interface Column {
+  header: string;
+  key: string;
+  width?: number;
+  align?: "left" | "right";
+}
+
+export interface InteractiveTableProps {
+  columns: Column[];
+  rows: Record<string, string>[];
+  onSelect?: (row: Record<string, string>, index: number) => void;
+  selectedIndex?: number;
+}
+
+const MAX_VISIBLE_ROWS = 15;
+
+export function InteractiveTable({
+  columns,
+  rows,
+  onSelect,
+  selectedIndex: controlledIdx,
+}: InteractiveTableProps) {
+  const [internalIdx, setInternalIdx] = useState(0);
+  const selectedIndex = controlledIdx ?? internalIdx;
+
+  useInput((_input, key) => {
+    if (key.upArrow) {
+      setInternalIdx((i) => Math.max(0, i - 1));
+    }
+    if (key.downArrow) {
+      setInternalIdx((i) => Math.min(rows.length - 1, i + 1));
+    }
+    if (key.return && onSelect && rows[selectedIndex]) {
+      onSelect(rows[selectedIndex], selectedIndex);
+    }
+  });
+
+  // Compute column widths
+  const colWidths = columns.map((col) => {
+    if (col.width) return col.width;
+    let max = col.header.length;
+    for (const row of rows) {
+      const val = row[col.key] ?? "";
+      if (val.length > max) max = val.length;
+    }
+    return Math.min(max + 2, 30);
+  });
+
+  const pad = (text: string, width: number, align: "left" | "right" = "left"): string => {
+    const truncated = text.length > width ? text.slice(0, width - 1) + "…" : text;
+    if (align === "right") return truncated.padStart(width);
+    return truncated.padEnd(width);
+  };
+
+  // Window visible rows
+  let startRow = 0;
+  if (rows.length > MAX_VISIBLE_ROWS) {
+    startRow = Math.max(0, selectedIndex - Math.floor(MAX_VISIBLE_ROWS / 2));
+    startRow = Math.min(startRow, rows.length - MAX_VISIBLE_ROWS);
+  }
+  const visibleRows = rows.slice(startRow, startRow + MAX_VISIBLE_ROWS);
+
+  // Header
+  const headerLine = columns
+    .map((col, i) => pad(col.header, colWidths[i], col.align))
+    .join("  ");
+  const separatorLine = "─".repeat(headerLine.length);
+
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text bold color="white">
+          {" "}
+          {headerLine}
+        </Text>
+      </Box>
+      <Box>
+        <Text dimColor> {separatorLine}</Text>
+      </Box>
+      {visibleRows.map((row, vi) => {
+        const actualIdx = startRow + vi;
+        const isSelected = actualIdx === selectedIndex;
+        const line = columns
+          .map((col, i) => pad(row[col.key] ?? "", colWidths[i], col.align))
+          .join("  ");
+        return (
+          <Box key={actualIdx}>
+            <Text color={isSelected ? "cyan" : "white"} bold={isSelected}>
+              {isSelected ? "▸" : " "} {line}
+            </Text>
+          </Box>
+        );
+      })}
+      {rows.length > MAX_VISIBLE_ROWS && (
+        <Box>
+          <Text dimColor>
+            {" "}
+            ({rows.length} rows · ↑↓ navigate · Enter select)
+          </Text>
+        </Box>
+      )}
+      {rows.length <= MAX_VISIBLE_ROWS && rows.length > 0 && (
+        <Box>
+          <Text dimColor> (↑↓ navigate · Enter select)</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/StepSpinner.tsx

@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from "react";
+import { Box, Text } from "ink";
+
+const SPINNER_FRAMES = ["◈", "◇", "◆", "◇"];
+const SPINNER_INTERVAL = 120;
+
+export type StepStatus = "pending" | "running" | "done" | "error";
+
+export interface StepSpinnerProps {
+  step: number;
+  total: number;
+  label: string;
+  status: StepStatus;
+  detail?: string;
+  error?: string;
+}
+
+export function StepSpinner({
+  step,
+  total,
+  label,
+  status,
+  detail,
+  error,
+}: StepSpinnerProps) {
+  const [frame, setFrame] = useState(0);
+
+  useEffect(() => {
+    if (status !== "running") return;
+    const timer = setInterval(() => {
+      setFrame((f) => (f + 1) % SPINNER_FRAMES.length);
+    }, SPINNER_INTERVAL);
+    return () => clearInterval(timer);
+  }, [status]);
+
+  const prefix = `Step ${step}/${total}`;
+
+  if (status === "pending") {
+    return (
+      <Box>
+        <Text dimColor>  {prefix} — {label}</Text>
+      </Box>
+    );
+  }
+
+  if (status === "running") {
+    return (
+      <Box flexDirection="column">
+        <Box>
+          <Text color="cyan"> {SPINNER_FRAMES[frame]} {prefix} — {label}...</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  if (status === "done") {
+    return (
+      <Box flexDirection="column">
+        <Box>
+          <Text color="green"> ✓ {prefix} — {label}</Text>
+        </Box>
+        {detail && (
+          <Box>
+            <Text dimColor>   └ {detail}</Text>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  // error
+  return (
+    <Box flexDirection="column">
+      <Box>
+        <Text color="red"> ✗ {prefix} — {label}</Text>
+      </Box>
+      {error && (
+        <Box>
+          <Text color="red">   └ {error}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/components/Toast.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect } from "react";
+import { Box, Text } from "ink";
+
+export type ToastVariant = "info" | "success" | "warning" | "error";
+
+export interface ToastData {
+  id: string;
+  message: string;
+  variant: ToastVariant;
+  duration?: number;
+}
+
+export interface ToastProps {
+  toast: ToastData;
+  onDismiss: (id: string) => void;
+}
+
+const VARIANT_CONFIG: Record<ToastVariant, { icon: string; color: string }> = {
+  info: { icon: "◈", color: "cyan" },
+  success: { icon: "✓", color: "green" },
+  warning: { icon: "⚠", color: "yellow" },
+  error: { icon: "✗", color: "red" },
+};
+
+export function Toast({ toast, onDismiss }: ToastProps) {
+  const { icon, color } = VARIANT_CONFIG[toast.variant];
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onDismiss(toast.id);
+    }, toast.duration ?? 5000);
+    return () => clearTimeout(timer);
+  }, [toast.id, toast.duration, onDismiss]);
+
+  return (
+    <Box>
+      <Text color={color}>
+        {icon} {toast.message}
+      </Text>
+    </Box>
+  );
+}
+
+export interface ToastContainerProps {
+  toasts: ToastData[];
+  onDismiss: (id: string) => void;
+}
+
+export function ToastContainer({ toasts, onDismiss }: ToastContainerProps) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <Box flexDirection="column">
+      {toasts.map((toast) => (
+        <Toast key={toast.id} toast={toast} onDismiss={onDismiss} />
+      ))}
+    </Box>
+  );
+}