arc402-cli 0.7.5 → 0.9.0

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";
+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

@@ -5,30 +5,39 @@ interface ViewportProps {
   lines: string[];
   scrollOffset: number;
   isAutoScroll: boolean;
-  innerWidth?: number;
 }
 
 /**
- * Scrollable output area framed with │ … │ box-drawing borders.
- * Fills remaining terminal space between header and footer separators.
+ * Scrollable output area that fills remaining terminal space.
+ * Renders a window slice of the buffer, not terminal scroll.
+ * scrollOffset=0 means pinned to bottom (auto-scroll).
+ * Positive scrollOffset means scrolled up by that many lines.
  */
-export function Viewport({ lines, scrollOffset, isAutoScroll, innerWidth = 58 }: ViewportProps) {
+export function Viewport({ lines, scrollOffset, isAutoScroll }: ViewportProps) {
   const { stdout } = useStdout();
   const termRows = stdout?.rows ?? 24;
 
-  // Header (~14 rows) + top/mid/mid/bot borders (4) + footer input (1) = ~19 fixed rows
-  const FIXED_ROWS = 19;
-  const viewportHeight = Math.max(1, termRows - FIXED_ROWS);
+  // 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);
 
   // Compute the window slice
+  // scrollOffset=0 → show last viewportHeight lines
+  // scrollOffset=N → show lines ending viewportHeight+N from end
   const totalLines = lines.length;
   let endIdx: number;
   let startIdx: number;
 
   if (scrollOffset === 0) {
+    // Auto-scroll: pinned to bottom
     endIdx = totalLines;
     startIdx = Math.max(0, endIdx - viewportHeight);
   } else {
+    // Scrolled up: scrollOffset lines from bottom
     endIdx = Math.max(0, totalLines - scrollOffset);
     startIdx = Math.max(0, endIdx - viewportHeight);
   }
@@ -46,19 +55,14 @@ export function Viewport({ lines, scrollOffset, isAutoScroll, innerWidth = 58 }:
 
   return (
     <Box flexDirection="column" flexGrow={1}>
-      {paddedLines.map((line, i) => (
-        <Box key={i}>
-          <Text dimColor>│</Text>
-          <Text>{" " + line}</Text>
-          <Box flexGrow={1} />
-          <Text dimColor>│</Text>
-        </Box>
-      ))}
+      <Box flexDirection="column" flexGrow={1}>
+        {paddedLines.map((line, i) => (
+          <Text key={i}>{line}</Text>
+        ))}
+      </Box>
       {canScrollDown && !isAutoScroll && (
         <Box justifyContent="flex-end">
-          <Text dimColor>│ ↓ more</Text>
-          <Box flexGrow={1} />
-          <Text dimColor>│</Text>
+          <Text dimColor>↓ more</Text>
         </Box>
       )}
     </Box>

package/src/tui/WalletConnectPairing.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { Box, Text } from "ink";
+import type { WCCallbacks } from "../walletconnect.js";
+
+export type WCStage = "connecting" | "connected" | "chain-switching" | "ready" | "error";
+
+interface WalletConnectPairingProps {
+  projectId: string;
+  chainId: number;
+  onComplete: (result: { account: string }) => void;
+  onError: (err: string) => void;
+  /** Called once the component mounts — parent passes the connect function */
+  connect: (callbacks: WCCallbacks) => Promise<{ account: string }>;
+}
+
+/**
+ * Renders WalletConnect pairing inside the Ink TUI viewport:
+ * - ASCII QR code
+ * - Deep links for MetaMask, Rainbow, Trust, etc.
+ * - Status transitions: connecting → connected → chain-switching → ready
+ */
+export function WalletConnectPairing({
+  onComplete,
+  onError,
+  connect,
+}: WalletConnectPairingProps) {
+  const [stage, setStage] = useState<WCStage>("connecting");
+  const [uri, setUri] = useState<string | null>(null);
+  const [links, setLinks] = useState<Record<string, string>>({});
+  const [account, setAccount] = useState<string | null>(null);
+  const [qrLines, setQrLines] = useState<string[]>([]);
+  const [detail, setDetail] = useState<string>("");
+
+  const handleUri = useCallback((wcUri: string, wcLinks: Record<string, string>) => {
+    setUri(wcUri);
+    setLinks(wcLinks);
+    // Generate ASCII QR
+    try {
+      // qrcode-terminal writes to stdout — capture it
+      const origWrite = process.stdout.write.bind(process.stdout);
+      const captured: string[] = [];
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (process.stdout as any).write = (chunk: string | Uint8Array) => {
+        const str = typeof chunk === "string" ? chunk : Buffer.from(chunk).toString("utf8");
+        captured.push(str);
+        return true;
+      };
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      import("qrcode-terminal").then((qr) => {
+        qr.default.generate(wcUri, { small: true }, (code: string) => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          (process.stdout as any).write = origWrite;
+          setQrLines(code.split("\n"));
+        });
+      }).catch(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (process.stdout as any).write = origWrite;
+      });
+    } catch {
+      // QR rendering is best-effort
+    }
+  }, []);
+
+  const handleStatus = useCallback((status: WCStage, statusDetail?: string) => {
+    setStage(status);
+    if (statusDetail) setDetail(statusDetail);
+    if (status === "connected" && statusDetail) {
+      setAccount(statusDetail);
+    }
+  }, []);
+
+  useEffect(() => {
+    const callbacks: WCCallbacks = {
+      onUri: handleUri,
+      onStatus: handleStatus,
+    };
+    connect(callbacks)
+      .then((result) => onComplete(result))
+      .catch((err: unknown) => onError(err instanceof Error ? err.message : String(err)));
+  }, [connect, handleUri, handleStatus, onComplete, onError]);
+
+  const statusIcon = stage === "error" ? "✗" : stage === "ready" ? "✓" : "◈";
+  const statusColor = stage === "error" ? "red" : stage === "ready" ? "green" : "cyan";
+
+  const statusMessages: Record<WCStage, string> = {
+    connecting: "Waiting for wallet approval...",
+    connected: `Connected: ${account ?? ""}`,
+    "chain-switching": `Switching chain${detail ? `: ${detail}` : ""}...`,
+    ready: `Ready — ${account ?? ""}`,
+    error: detail || "Connection failed",
+  };
+
+  return (
+    <Box flexDirection="column" paddingLeft={1}>
+      <Text color="cyan" bold>WalletConnect Pairing</Text>
+      <Text> </Text>
+
+      {/* Status */}
+      <Box>
+        <Text color={statusColor}>{statusIcon} </Text>
+        <Text>{statusMessages[stage]}</Text>
+      </Box>
+      <Text> </Text>
+
+      {/* Deep links */}
+      {uri && stage === "connecting" && (
+        <>
+          <Text dimColor>Tap a link for your wallet app:</Text>
+          <Text> </Text>
+          {Object.entries(links).map(([name, link]) => (
+            <Box key={name} flexDirection="column">
+              <Text color="white">{name}:</Text>
+              <Text dimColor>{link}</Text>
+              <Text> </Text>
+            </Box>
+          ))}
+
+          {/* QR code */}
+          {qrLines.length > 0 && (
+            <>
+              <Text dimColor>Or scan QR:</Text>
+              {qrLines.map((line, i) => (
+                <Text key={i}>{line}</Text>
+              ))}
+            </>
+          )}
+        </>
+      )}
+    </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>
+  );
+}