arc402-cli 0.9.18 → 0.10.0

package/src/tui/WalletConnectPairing.tsx

@@ -1,114 +0,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-import { Box, Text } from "ink";
-import type { WCCallbacks } from "../walletconnect.js";
-import { renderQR } from "../ui/qr-render.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 using our compact renderer
-    try {
-      const lines = renderQR(wcUri);
-      setQrLines(lines);
-    } 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

@@ -1,38 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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/CustomTextInput.tsx

@@ -1,132 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Text, useInput } from "ink";
-
-interface CustomTextInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  onSubmit?: (value: string) => void;
-  focus?: boolean;
-  /** When true, Enter key is NOT handled — let parent handle it (e.g. dropdown selection) */
-  suppressEnter?: boolean;
-}
-
-/**
- * Minimal text input that does NOT intercept Tab, Up, Down, Escape, or Ctrl+C,
- * allowing parent useInput handlers to receive those keys.
- */
-export function CustomTextInput({
-  value,
-  onChange,
-  onSubmit,
-  focus = true,
-  suppressEnter = false,
-}: CustomTextInputProps) {
-  const [cursorPos, setCursorPos] = useState(value.length);
-  const [cursorVisible, setCursorVisible] = useState(true);
-
-  // Keep cursor within bounds when value changes externally
-  useEffect(() => {
-    setCursorPos((pos) => Math.min(pos, value.length));
-  }, [value]);
-
-  // Blink cursor
-  useEffect(() => {
-    if (!focus) return;
-    const timer = setInterval(() => {
-      setCursorVisible((v) => !v);
-    }, 530);
-    return () => clearInterval(timer);
-  }, [focus]);
-
-  useInput(
-    (input, key) => {
-      // Keys we explicitly do NOT handle — let parent see them:
-      // Tab, Up, Down, Escape, Ctrl+C
-      if (key.tab || key.upArrow || key.downArrow || key.escape) return;
-      if (input === "\x03") return; // Ctrl+C
-
-      // Enter/Return — submit (unless suppressed for dropdown selection)
-      if (key.return) {
-        if (!suppressEnter) {
-          onSubmit?.(value);
-        }
-        return;
-      }
-
-      // Backspace
-      if (key.backspace || key.delete) {
-        if (cursorPos > 0) {
-          const next = value.slice(0, cursorPos - 1) + value.slice(cursorPos);
-          setCursorPos(cursorPos - 1);
-          onChange(next);
-        }
-        return;
-      }
-
-      // Left arrow
-      if (key.leftArrow) {
-        setCursorPos((p) => Math.max(0, p - 1));
-        return;
-      }
-
-      // Right arrow
-      if (key.rightArrow) {
-        setCursorPos((p) => Math.min(value.length, p + 1));
-        return;
-      }
-
-      // Home (Ctrl+A)
-      if (input === "\x01") {
-        setCursorPos(0);
-        return;
-      }
-
-      // End (Ctrl+E)
-      if (input === "\x05") {
-        setCursorPos(value.length);
-        return;
-      }
-
-      // Ctrl+U — clear line
-      if (input === "\x15") {
-        setCursorPos(0);
-        onChange("");
-        return;
-      }
-
-      // Ctrl+K — kill to end of line
-      if (input === "\x0B") {
-        onChange(value.slice(0, cursorPos));
-        return;
-      }
-
-      // Ignore other control characters
-      if (input.length > 0 && input.charCodeAt(0) < 32) return;
-
-      // Regular character input (including paste)
-      if (input.length > 0) {
-        const next =
-          value.slice(0, cursorPos) + input + value.slice(cursorPos);
-        setCursorPos(cursorPos + input.length);
-        onChange(next);
-      }
-    },
-    { isActive: focus }
-  );
-
-  if (!focus) {
-    return <Text dimColor>{value}</Text>;
-  }
-
-  const before = value.slice(0, cursorPos);
-  const cursorChar = cursorPos < value.length ? value[cursorPos] : " ";
-  const after = value.slice(cursorPos + 1);
-
-  return (
-    <Text>
-      {before}
-      <Text inverse={cursorVisible}>{cursorChar}</Text>
-      {after}
-    </Text>
-  );
-}

package/src/tui/components/InteractiveTable.tsx

@@ -1,106 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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>
-  );
-}