arc402-cli 0.8.0 → 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

@@ -58,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/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

@@ -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);