arc402-cli 0.7.5 → 0.9.0

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

package/src/tui/index.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { render } from "ink";
-import { App } from "./App";
-import fs from "fs";
-import path from "path";
-import os from "os";
+import { App } from "./App.js";
+import fs from "node:fs";
+import path from "node:path";
+import os from "node:os";
+import { createRequire } from "node:module";
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const pkg = require("../../package.json") as { version: string };
+const pkg = createRequire(import.meta.url)("../../package.json") as { version: string };
 
 const CONFIG_PATH = path.join(os.homedir(), ".arc402", "config.json");
 
@@ -30,8 +30,7 @@ async function getBalance(
   address: string
 ): Promise<string | undefined> {
   try {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    const ethersLib = require("ethers") as typeof import("ethers");
+    const ethersLib = await import("ethers");
     const provider = new ethersLib.ethers.JsonRpcProvider(rpcUrl);
     const bal = await Promise.race([
       provider.getBalance(address),
@@ -59,14 +58,33 @@ export async function launchTUI(): Promise<void> {
     balance = await getBalance(config.rpcUrl, config.walletContractAddress);
   }
 
+  // Enter alternate screen buffer (full-screen mode)
+  process.stdout.write("\x1b[?1049h");
+  // Hide cursor initially — Ink manages it
+  process.stdout.write("\x1b[?25l");
+
+  const restore = () => {
+    process.stdout.write("\x1b[?25h"); // show cursor
+    process.stdout.write("\x1b[?1049l"); // leave alternate buffer
+  };
+
+  // Ensure restore on unexpected exit
+  process.on("exit", restore);
+  process.on("SIGINT", restore);
+  process.on("SIGTERM", restore);
+
   const { waitUntilExit } = render(
     <App
       version={pkg.version}
       network={config.network}
       wallet={walletDisplay}
       balance={balance}
-    />
+    />,
+    { exitOnCtrlC: true }
   );
 
   await waitUntilExit();
+
+  // Clean restore
+  restore();
 }

package/src/tui/useChat.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback } from "react";
 import chalk from "chalk";
-import { c } from "../ui/colors";
+import { c } from "../ui/colors.js";
 
 interface UseChatResult {
   send: (message: string, onLine: (line: string) => void) => Promise<void>;

package/src/tui/useCommand.ts

@@ -1,43 +1,7 @@
 import { useState, useCallback } from "react";
-import { createProgram } from "../program";
-import { spawn } from "child_process";
+import { createProgram } from "../program.js";
 import chalk from "chalk";
-import { c } from "../ui/colors";
-
-/**
- * Commands that use interactive prompts or WalletConnect QR flows.
- * These MUST run in a child process so they can own stdin/stdout directly,
- * because Ink holds stdin in raw mode for its own input handling.
- */
-const INTERACTIVE_COMMANDS = new Set([
-  "wallet deploy",
-  "wallet set-guardian",
-  "wallet unfreeze",
-  "wallet authorize-machine-key",
-  "wallet revoke-machine-key",
-  "wallet set-passkey",
-  "wallet set-interceptor",
-  "wallet set-velocity-limit",
-  "wallet upgrade-registry",
-  "wallet execute-registry-upgrade",
-  "wallet cancel-registry-upgrade",
-  "wallet register-policy",
-  "wallet whitelist-contract",
-  "wallet governance setup",
-  "wallet policy set-limit",
-  "wallet policy set-daily-limit",
-  "wallet policy set",
-  "wallet import",
-  "config init",
-]);
-
-function isInteractiveCommand(input: string): boolean {
-  const normalized = input.trim();
-  for (const cmd of INTERACTIVE_COMMANDS) {
-    if (normalized === cmd || normalized.startsWith(cmd + " ")) return true;
-  }
-  return false;
-}
+import { c } from "../ui/colors.js";
 
 interface UseCommandResult {
   execute: (input: string, onLine: (line: string) => void) => Promise<void>;
@@ -46,13 +10,8 @@ interface UseCommandResult {
 
 /**
  * Dispatches parsed commands to the commander program.
- *
- * NON-INTERACTIVE commands: captures stdout/stderr by monkey-patching
- * process.stdout.write and routes output to the viewport.
- *
- * INTERACTIVE commands (WalletConnect, prompts): spawns a child process
- * running `arc402 <command>` with inherited stdin so that QR codes render
- * and prompts accept input. Output is captured line-by-line into the viewport.
+ * Captures stdout/stderr by monkey-patching process.stdout.write
+ * and routes all output to the viewport buffer via onLine callback.
  */
 export function useCommand(): UseCommandResult {
   const [isRunning, setIsRunning] = useState(false);
@@ -61,13 +20,89 @@ export function useCommand(): UseCommandResult {
     async (input: string, onLine: (line: string) => void): Promise<void> => {
       setIsRunning(true);
 
-      if (isInteractiveCommand(input)) {
-        await executeInteractive(input, onLine);
-      } else {
-        await executeInProcess(input, onLine);
+      // Capture stdout/stderr
+      const originalStdoutWrite = process.stdout.write.bind(process.stdout);
+      const originalStderrWrite = process.stderr.write.bind(process.stderr);
+
+      let captureBuffer = "";
+
+      const flushBuffer = (): void => {
+        if (!captureBuffer) return;
+        const lines = captureBuffer.split("\n");
+        captureBuffer = lines.pop() ?? "";
+        for (const line of lines) {
+          onLine(line);
+        }
+      };
+
+      const capturedWrite = (
+        chunk: string | Uint8Array,
+        encodingOrCb?: BufferEncoding | ((err?: Error | null) => void),
+        cb?: (err?: Error | null) => void
+      ): boolean => {
+        const str =
+          typeof chunk === "string"
+            ? chunk
+            : Buffer.from(chunk).toString("utf8");
+        captureBuffer += str;
+        flushBuffer();
+        // call callback if provided
+        const callback =
+          typeof encodingOrCb === "function" ? encodingOrCb : cb;
+        if (callback) callback();
+        return true;
+      };
+
+      // Monkey-patch (cast through unknown to bypass strict overload checking)
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (process.stdout as any).write = capturedWrite;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (process.stderr as any).write = capturedWrite;
+
+      try {
+        const tokens = parseTokens(input);
+        const prog = createProgram();
+        prog.exitOverride();
+        prog.configureOutput({
+          writeOut: (str: string) => process.stdout.write(str),
+          writeErr: (str: string) => process.stderr.write(str),
+        });
+
+        await prog.parseAsync(["node", "arc402", ...tokens]);
+      } catch (err) {
+        const e = err as { code?: string; message?: string };
+        if (
+          e.code === "commander.helpDisplayed" ||
+          e.code === "commander.version" ||
+          e.code === "commander.executeSubCommandAsync"
+        ) {
+          // already written or normal exit — no-op
+        } else if (e.code === "commander.unknownCommand") {
+          const tokens = parseTokens(input);
+          onLine(
+            ` ${c.failure} ${chalk.red(`Unknown command: ${chalk.white(tokens[0])}`)} `
+          );
+          onLine(chalk.dim("  Type 'help' for available commands"));
+        } else if (e.code?.startsWith("commander.")) {
+          onLine(` ${c.failure} ${chalk.red(e.message ?? String(err))}`);
+        } else {
+          onLine(` ${c.failure} ${chalk.red(e.message ?? String(err))}`);
+        }
+      } finally {
+        // Flush remaining buffer
+        if (captureBuffer.trim()) {
+          onLine(captureBuffer);
+          captureBuffer = "";
+        }
+
+        // Restore original write functions
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (process.stdout as any).write = originalStdoutWrite;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (process.stderr as any).write = originalStderrWrite;
+
+        setIsRunning(false);
       }
-
-      setIsRunning(false);
     },
     []
   );
@@ -75,138 +110,6 @@ export function useCommand(): UseCommandResult {
   return { execute, isRunning };
 }
 
-/**
- * Run an interactive command as a child process with inherited stdin.
- * Ink is temporarily suspended so the child can own the terminal.
- */
-async function executeInteractive(
-  input: string,
-  onLine: (line: string) => void
-): Promise<void> {
-  const tokens = parseTokens(input);
-
-  onLine(chalk.dim("  ◈ Launching interactive session..."));
-  onLine("");
-
-  return new Promise<void>((resolve) => {
-    // Spawn arc402 as a child process with full terminal access.
-    // Use stdio: 'inherit' so the child owns stdin/stdout/stderr directly.
-    // This means its output goes straight to the terminal (not captured in viewport)
-    // but that's correct — the child needs raw terminal access for QR codes, prompts, etc.
-    const child = spawn(
-      process.execPath,
-      [process.argv[1], ...tokens],
-      {
-        stdio: "inherit",
-        env: { ...process.env, ARC402_NO_TUI: "1" }, // prevent child from launching its own TUI
-        cwd: process.cwd(),
-      }
-    );
-
-    child.on("close", (code) => {
-      onLine("");
-      if (code === 0) {
-        onLine(` ${c.success} ${chalk.dim("Command completed")}`);
-      } else {
-        onLine(` ${c.failure} ${chalk.red(`Command exited with code ${code}`)}`);
-      }
-      resolve();
-    });
-
-    child.on("error", (err) => {
-      onLine(` ${c.failure} ${chalk.red(`Failed to spawn: ${err.message}`)}`);
-      resolve();
-    });
-  });
-}
-
-/**
- * Run a non-interactive command in-process with captured output.
- */
-async function executeInProcess(
-  input: string,
-  onLine: (line: string) => void
-): Promise<void> {
-  // Capture stdout/stderr
-  const originalStdoutWrite = process.stdout.write.bind(process.stdout);
-  const originalStderrWrite = process.stderr.write.bind(process.stderr);
-
-  let captureBuffer = "";
-
-  const flushBuffer = (): void => {
-    if (!captureBuffer) return;
-    const lines = captureBuffer.split("\n");
-    captureBuffer = lines.pop() ?? "";
-    for (const line of lines) {
-      onLine(line);
-    }
-  };
-
-  const capturedWrite = (
-    chunk: string | Uint8Array,
-    encodingOrCb?: BufferEncoding | ((err?: Error | null) => void),
-    cb?: (err?: Error | null) => void
-  ): boolean => {
-    const str =
-      typeof chunk === "string"
-        ? chunk
-        : Buffer.from(chunk).toString("utf8");
-    captureBuffer += str;
-    flushBuffer();
-    const callback =
-      typeof encodingOrCb === "function" ? encodingOrCb : cb;
-    if (callback) callback();
-    return true;
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (process.stdout as any).write = capturedWrite;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (process.stderr as any).write = capturedWrite;
-
-  try {
-    const tokens = parseTokens(input);
-    const prog = createProgram();
-    prog.exitOverride();
-    prog.configureOutput({
-      writeOut: (str) => process.stdout.write(str),
-      writeErr: (str) => process.stderr.write(str),
-    });
-
-    await prog.parseAsync(["node", "arc402", ...tokens]);
-  } catch (err) {
-    const e = err as { code?: string; message?: string };
-    if (
-      e.code === "commander.helpDisplayed" ||
-      e.code === "commander.version" ||
-      e.code === "commander.executeSubCommandAsync"
-    ) {
-      // already written or normal exit — no-op
-    } else if (e.code === "commander.unknownCommand") {
-      const tokens = parseTokens(input);
-      onLine(
-        ` ${c.failure} ${chalk.red(`Unknown command: ${chalk.white(tokens[0])}`)} `
-      );
-      onLine(chalk.dim("  Type 'help' for available commands"));
-    } else if (e.code?.startsWith("commander.")) {
-      onLine(` ${c.failure} ${chalk.red(e.message ?? String(err))}`);
-    } else {
-      onLine(` ${c.failure} ${chalk.red(e.message ?? String(err))}`);
-    }
-  } finally {
-    // Flush remaining buffer
-    if (captureBuffer.trim()) {
-      onLine(captureBuffer);
-      captureBuffer = "";
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (process.stdout as any).write = originalStdoutWrite;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    (process.stderr as any).write = originalStderrWrite;
-  }
-}
-
 // Shell-style tokenizer
 function parseTokens(input: string): string[] {
   const tokens: string[] = [];

package/src/tui/useNotifications.ts

@@ -0,0 +1,28 @@
+import { useState, useCallback } from "react";
+import type { ToastData, ToastVariant } from "./components/Toast.js";
+
+let _nextId = 0;
+
+interface UseNotificationsResult {
+  toasts: ToastData[];
+  push: (message: string, variant?: ToastVariant, duration?: number) => void;
+  dismiss: (id: string) => void;
+}
+
+export function useNotifications(): UseNotificationsResult {
+  const [toasts, setToasts] = useState<ToastData[]>([]);
+
+  const push = useCallback(
+    (message: string, variant: ToastVariant = "info", duration?: number) => {
+      const id = `toast-${++_nextId}`;
+      setToasts((prev) => [...prev, { id, message, variant, duration }]);
+    },
+    []
+  );
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return { toasts, push, dismiss };
+}

package/src/ui/banner.ts

@@ -1,7 +1,7 @@
+import { createRequire } from "node:module";
 import chalk from "chalk";
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const _pkg = require("../../package.json") as { version: string };
+const _pkg = createRequire(import.meta.url)("../../package.json") as { version: string };
 
 const ART = `
  ██████╗ ██████╗  ██████╗      ██╗  ██╗ ██████╗ ██████╗
@@ -44,6 +44,33 @@ export function getBannerLines(config?: BannerConfig): string[] {
   return lines;
 }
 
+export interface StatusItem {
+  label: string;
+  value: string;
+}
+
+/** Returns the ASCII art lines (no status info) and a subtitle line. */
+export function getBannerArt(): { artLines: string[]; subtitle: string; separator: string } {
+  const artLines: string[] = [];
+  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?: BannerConfig): StatusItem[] {
+  const items: StatusItem[] = [];
+  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?: BannerConfig): void {
   for (const line of getBannerLines(config)) {
     console.log(line);