arc402-cli 0.8.0 → 0.9.0

package/dist/ui/banner.d.ts

@@ -5,5 +5,17 @@ export interface BannerConfig {
 }
 /** Returns banner as an array of plain lines (no trailing newlines). */
 export declare function getBannerLines(config?: BannerConfig): string[];
+export interface StatusItem {
+    label: string;
+    value: string;
+}
+/** Returns the ASCII art lines (no status info) and a subtitle line. */
+export declare function getBannerArt(): {
+    artLines: string[];
+    subtitle: string;
+    separator: string;
+};
+/** Returns structured status items for flexWrap rendering. */
+export declare function getStatusItems(config?: BannerConfig): StatusItem[];
 export declare function renderBanner(config?: BannerConfig): void;
 //# sourceMappingURL=banner.d.ts.map

package/dist/ui/banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,EAAE,CAsB9D;AAED,wBAAgB,YAAY,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,IAAI,CAIxD"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.ts"],"names":[],"mappings":"AAeA,MAAM,WAAW,YAAY;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wEAAwE;AACxE,wBAAgB,cAAc,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,MAAM,EAAE,CAsB9D;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wEAAwE;AACxE,wBAAgB,YAAY,IAAI;IAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CAU1F;AAED,8DAA8D;AAC9D,wBAAgB,cAAc,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,EAAE,CAMlE;AAED,wBAAgB,YAAY,CAAC,MAAM,CAAC,EAAE,YAAY,GAAG,IAAI,CAIxD"}

package/dist/ui/banner.js

@@ -33,6 +33,29 @@ export function getBannerLines(config) {
     lines.push("");
     return lines;
 }
+/** Returns the ASCII art lines (no status info) and a subtitle line. */
+export function getBannerArt() {
+    const artLines = [];
+    for (const l of ART.split("\n").slice(1)) {
+        artLines.push(chalk.cyan(l));
+    }
+    return {
+        artLines,
+        subtitle: " " + chalk.dim(`agent-to-agent arcing · v${_pkg.version}`),
+        separator: " " + SEPARATOR,
+    };
+}
+/** Returns structured status items for flexWrap rendering. */
+export function getStatusItems(config) {
+    const items = [];
+    if (config?.network)
+        items.push({ label: "Network", value: config.network });
+    if (config?.wallet)
+        items.push({ label: "Wallet", value: config.wallet });
+    if (config?.balance)
+        items.push({ label: "Balance", value: config.balance });
+    return items;
+}
 export function renderBanner(config) {
     for (const line of getBannerLines(config)) {
         console.log(line);

package/dist/ui/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../src/ui/banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,IAAI,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,oBAAoB,CAAwB,CAAC;AAEzF,MAAM,GAAG,GAAG;;;;;;wDAM4C,CAAC;AAEzD,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC;AAQ1E,wEAAwE;AACxE,MAAM,UAAU,cAAc,CAAC,MAAqB;IAClD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,sCAAsC;IACtC,KAAK,MAAM,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5B,CAAC;IACD,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACf,KAAK,CAAC,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC,4BAA4B,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IACxE,KAAK,CAAC,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IAC5B,IAAI,MAAM,EAAE,CAAC;QACX,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACf,IAAI,MAAM,CAAC,OAAO;YAChB,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAC1E,IAAI,MAAM,CAAC,MAAM;YACf,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QACzE,IAAI,MAAM,CAAC,OAAO;YAChB,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IAC5E,CAAC;IACD,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACf,KAAK,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC,4BAA4B,CAAC,EAAE,CAAC,CAAC;IAC1D,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACf,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,MAAqB;IAChD,KAAK,MAAM,IAAI,IAAI,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;QAC1C,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC;AACH,CAAC"}
+{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../src/ui/banner.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arc402-cli",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "ARC-402 CLI for discovery, negotiation payloads, hire/remediation/dispute workflows, and network reads",
   "bin": {
     "arc402": "./dist/index.js"

package/src/tui/App.tsx

@@ -1,14 +1,16 @@
 import React, { useState, useCallback, useEffect } from "react";
 import { createRequire } from "node:module";
-import { Box, Text, useApp } from "ink";
-import { Header } from "./Header.js";
+import { Box, Text, Static, useApp, useInput } from "ink";
 import { Viewport } from "./Viewport.js";
 import { Footer } from "./Footer.js";
 import { InputLine } from "./InputLine.js";
 import { useCommand } from "./useCommand.js";
 import { useChat } from "./useChat.js";
 import { useScroll } from "./useScroll.js";
+import { useNotifications } from "./useNotifications.js";
+import { ToastContainer } from "./components/Toast.js";
 import { createProgram } from "../program.js";
+import { getBannerArt, getStatusItems } from "../ui/banner.js";
 import chalk from "chalk";
 
 const pkg = createRequire(import.meta.url)("../../package.json") as { version: string };
@@ -27,6 +29,32 @@ interface AppProps {
  */
 export function App({ version, network, wallet, balance }: AppProps) {
   const { exit } = useApp();
+
+  // Banner computed once — rendered via <Static> so it never re-renders
+  const [bannerData] = useState(() => {
+    const { artLines, subtitle, separator } = getBannerArt();
+    const statusItems = getStatusItems({ network, wallet, balance });
+    // Build static items: art lines + subtitle + separator + status + help hint
+    const items: { id: string; text: string }[] = [];
+    artLines.forEach((line, i) => items.push({ id: `art-${i}`, text: line }));
+    items.push({ id: "blank-1", text: "" });
+    items.push({ id: "subtitle", text: subtitle });
+    items.push({ id: "separator", text: separator });
+    if (statusItems.length > 0) {
+      items.push({ id: "blank-2", text: "" });
+      // Status items as a single formatted line for <Static>
+      // (FlexWrap rendering happens in the Header component for non-Static contexts)
+      const statusLine = statusItems
+        .map((s) => `\x1b[2m${s.label}\x1b[22m  ${s.value}`)
+        .join("    ");
+      items.push({ id: "status", text: ` ${statusLine}` });
+    }
+    items.push({ id: "blank-3", text: "" });
+    items.push({ id: "hint", text: " \x1b[2mType 'help' to get started\x1b[22m" });
+    items.push({ id: "blank-4", text: "" });
+    return items;
+  });
+
   const [outputBuffer, setOutputBuffer] = useState<string[]>([
     chalk.dim("  Type 'help' to see available commands"),
     "",
@@ -45,6 +73,8 @@ export function App({ version, network, wallet, balance }: AppProps) {
   const { scrollOffset, isAutoScroll, scrollUp, scrollDown, snapToBottom } =
     useScroll(viewportHeight);
 
+  const { toasts, dismiss: dismissToast } = useNotifications();
+
   // Get top-level command names for dispatch detection
   const [topCmds] = useState<string[]>(() => {
     try {
@@ -55,6 +85,20 @@ export function App({ version, network, wallet, balance }: AppProps) {
     }
   });
 
+  // ── Enhanced keyboard shortcuts ────────────────────────────────────────
+  useInput((input, key) => {
+    // Ctrl+L — clear viewport
+    if (key.ctrl && input === "l") {
+      setOutputBuffer([]);
+      return;
+    }
+    // Escape — cancel / clear (snap to bottom if scrolled)
+    if (key.escape) {
+      snapToBottom();
+      return;
+    }
+  });
+
   const appendLine = useCallback((line: string) => {
     setOutputBuffer((prev) => [...prev, line]);
   }, []);
@@ -185,13 +229,10 @@ export function App({ version, network, wallet, balance }: AppProps) {
 
   return (
     <Box flexDirection="column" height="100%">
-      {/* HEADER — fixed, never scrolls */}
-      <Header
-        version={version}
-        network={network}
-        wallet={wallet}
-        balance={balance}
-      />
+      {/* BANNER — rendered once via <Static>, never re-renders */}
+      <Static items={bannerData}>
+        {(item) => <Text key={item.id}>{item.text}</Text>}
+      </Static>
 
       {/* Separator */}
       <Box>
@@ -205,6 +246,9 @@ export function App({ version, network, wallet, balance }: AppProps) {
         isAutoScroll={isAutoScroll}
       />
 
+      {/* Notification toasts — above footer */}
+      <ToastContainer toasts={toasts} onDismiss={dismissToast} />
+
       {/* Bottom separator */}
       <Box>
         <Text dimColor>{"─".repeat(60)}</Text>

package/src/tui/Header.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { getBannerLines } from "../ui/banner.js";
+import { getBannerArt, getStatusItems } from "../ui/banner.js";
+import type { BannerConfig } from "../ui/banner.js";
 
 interface HeaderProps {
   version: string;
@@ -11,20 +12,40 @@ interface HeaderProps {
 
 /**
  * Fixed header showing the ASCII art banner + status info.
- * Never re-renders unless config changes.
+ * Status items use flexWrap to adapt to narrow terminals.
  */
 export const Header = React.memo(function Header({
   network,
   wallet,
   balance,
 }: HeaderProps) {
-  const bannerLines = getBannerLines({ network, wallet, balance });
+  const { artLines, subtitle, separator } = getBannerArt();
+  const statusItems = getStatusItems({ network, wallet, balance });
 
   return (
     <Box flexDirection="column">
-      {bannerLines.map((line, i) => (
+      {artLines.map((line, i) => (
         <Text key={i}>{line}</Text>
       ))}
+      <Text>{""}</Text>
+      <Text>{subtitle}</Text>
+      <Text>{separator}</Text>
+      {statusItems.length > 0 && (
+        <>
+          <Text>{""}</Text>
+          <Box flexWrap="wrap" columnGap={2}>
+            {statusItems.map((item) => (
+              <Box key={item.label}>
+                <Text dimColor>{item.label}</Text>
+                <Text>  {item.value}</Text>
+              </Box>
+            ))}
+          </Box>
+        </>
+      )}
+      <Text>{""}</Text>
+      <Text dimColor>{" Type 'help' to get started"}</Text>
+      <Text>{""}</Text>
     </Box>
   );
 });

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/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>
+  );
+}