arc402-cli 0.7.3 → 0.7.5

package/src/tui/App.tsx

@@ -0,0 +1,240 @@
+import React, { useState, useCallback } from "react";
+import { Box, Text, useApp, useStdout } from "ink";
+import { Header } from "./Header";
+import { Viewport } from "./Viewport";
+import { InputLine } from "./InputLine";
+import { useCommand } from "./useCommand";
+import { useChat } from "./useChat";
+import { useScroll } from "./useScroll";
+import { createProgram } from "../program";
+import chalk from "chalk";
+
+const BUILTIN_CMDS = ["help", "exit", "quit", "clear", "status"];
+
+interface AppProps {
+  version: string;
+  network?: string;
+  wallet?: string;
+  balance?: string;
+}
+
+/**
+ * Root TUI component — box-drawn frame with fixed header/footer, scrollable viewport.
+ *
+ * ┌─────────────────────────────────────────────┐
+ * │  ASCII banner + status info                  │  ← FIXED header
+ * ├─────────────────────────────────────────────┤
+ * │  scrollable output                           │  ← VIEWPORT
+ * ├─────────────────────────────────────────────┤
+ * │  ◈ arc402 > _                                │  ← FIXED footer
+ * └─────────────────────────────────────────────┘
+ */
+export function App({ version, network, wallet, balance }: AppProps) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const cols = stdout?.columns ?? 60;
+  const W = Math.min(cols, 80); // inner width between │ chars
+  const inner = W - 2; // space between the two │ border chars
+
+  const [outputBuffer, setOutputBuffer] = useState<string[]>([
+    chalk.dim("  Type 'help' to see available commands"),
+    "",
+  ]);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const { execute, isRunning } = useCommand();
+  const { send, isSending } = useChat();
+
+  // Approximate viewport height for scroll management
+  const HEADER_ROWS = 17;
+  const FOOTER_ROWS = 3;
+  const rows = process.stdout.rows ?? 24;
+  const viewportHeight = Math.max(1, rows - HEADER_ROWS - FOOTER_ROWS);
+
+  const { scrollOffset, isAutoScroll, scrollUp, scrollDown, snapToBottom } =
+    useScroll(viewportHeight);
+
+  // Get top-level command names for dispatch detection
+  const [topCmds] = useState<string[]>(() => {
+    try {
+      const prog = createProgram();
+      return prog.commands.map((cmd) => cmd.name());
+    } catch {
+      return [];
+    }
+  });
+
+  const appendLine = useCallback((line: string) => {
+    setOutputBuffer((prev) => [...prev, line]);
+  }, []);
+
+  const handleCommand = useCallback(
+    async (input: string): Promise<void> => {
+      // Echo command to viewport
+      appendLine(
+        chalk.cyanBright("◈") +
+          " " +
+          chalk.dim("arc402") +
+          " " +
+          chalk.white(">") +
+          " " +
+          chalk.white(input)
+      );
+
+      // Snap to bottom on new command
+      snapToBottom();
+      setIsProcessing(true);
+
+      const firstWord = input.split(/\s+/)[0];
+      const allKnown = [...BUILTIN_CMDS, ...topCmds];
+
+      // ── Built-in: exit/quit ────────────────────────────────────────────────
+      if (input === "exit" || input === "quit") {
+        appendLine(
+          " " + chalk.cyanBright("◈") + chalk.dim(" goodbye")
+        );
+        setIsProcessing(false);
+        setTimeout(() => exit(), 100);
+        return;
+      }
+
+      // ── Built-in: clear ────────────────────────────────────────────────────
+      if (input === "clear") {
+        setOutputBuffer([]);
+        setIsProcessing(false);
+        return;
+      }
+
+      // ── Built-in: help ─────────────────────────────────────────────────────
+      if (input === "help" || input === "/help") {
+        const lines: string[] = [];
+        try {
+          const prog = createProgram();
+          prog.exitOverride();
+          const helpText: string[] = [];
+          prog.configureOutput({
+            writeOut: (str) => helpText.push(str),
+            writeErr: (str) => helpText.push(str),
+          });
+          try {
+            await prog.parseAsync(["node", "arc402", "--help"]);
+          } catch {
+            /* commander throws after printing help */
+          }
+          for (const chunk of helpText) {
+            for (const l of chunk.split("\n")) lines.push(l);
+          }
+        } catch {
+          lines.push(chalk.red("Failed to load help"));
+        }
+        lines.push("");
+        lines.push(chalk.cyanBright("Chat"));
+        lines.push(
+          "  " +
+            chalk.white("<message>") +
+            chalk.dim("          Send message to OpenClaw gateway")
+        );
+        lines.push(
+          "  " +
+            chalk.white("/chat <message>") +
+            chalk.dim("   Explicitly route to chat")
+        );
+        lines.push(
+          chalk.dim(
+            "  Gateway: http://localhost:19000  (openclaw gateway start)"
+          )
+        );
+        lines.push("");
+        for (const l of lines) appendLine(l);
+        setIsProcessing(false);
+        return;
+      }
+
+      // ── Built-in: status ───────────────────────────────────────────────────
+      if (input === "status") {
+        if (network)
+          appendLine(
+            ` ${chalk.dim("Network")}   ${chalk.white(network)}`
+          );
+        if (wallet)
+          appendLine(` ${chalk.dim("Wallet")}    ${chalk.white(wallet)}`);
+        if (balance)
+          appendLine(` ${chalk.dim("Balance")}   ${chalk.white(balance)}`);
+        if (!network && !wallet && !balance)
+          appendLine(chalk.dim("  No config found. Run 'config init' to get started."));
+        appendLine("");
+        setIsProcessing(false);
+        return;
+      }
+
+      // ── /chat prefix or unknown command → chat ─────────────────────────────
+      const isExplicitChat = input.startsWith("/chat ");
+      const isChatInput =
+        isExplicitChat || (!allKnown.includes(firstWord) && firstWord !== "");
+
+      if (isChatInput) {
+        const msg = isExplicitChat ? input.slice(6).trim() : input;
+        if (msg) {
+          await send(msg, appendLine);
+        }
+        appendLine("");
+        setIsProcessing(false);
+        return;
+      }
+
+      // ── Dispatch to commander ──────────────────────────────────────────────
+      await execute(input, appendLine);
+      appendLine("");
+      setIsProcessing(false);
+    },
+    [appendLine, execute, send, snapToBottom, topCmds, network, wallet, balance, exit]
+  );
+
+  const isDisabled = isProcessing || isRunning || isSending;
+
+  const topBorder = "┌" + "─".repeat(inner) + "┐";
+  const midBorder = "├" + "─".repeat(inner) + "┤";
+  const botBorder = "└" + "─".repeat(inner) + "┘";
+
+  return (
+    <Box flexDirection="column" height="100%">
+      {/* Top border */}
+      <Text dimColor>{topBorder}</Text>
+
+      {/* HEADER — fixed, never scrolls */}
+      <Header
+        version={version}
+        network={network}
+        wallet={wallet}
+        balance={balance}
+        innerWidth={inner}
+      />
+
+      {/* Mid separator */}
+      <Text dimColor>{midBorder}</Text>
+
+      {/* VIEWPORT — fills remaining space */}
+      <Viewport
+        lines={outputBuffer}
+        scrollOffset={scrollOffset}
+        isAutoScroll={isAutoScroll}
+        innerWidth={inner}
+      />
+
+      {/* Footer separator */}
+      <Text dimColor>{midBorder}</Text>
+
+      {/* FOOTER — input pinned */}
+      <Box>
+        <Text dimColor>│</Text>
+        <Box flexGrow={1}>
+          <InputLine onSubmit={handleCommand} isDisabled={isDisabled} />
+        </Box>
+        <Text dimColor>│</Text>
+      </Box>
+
+      {/* Bottom border */}
+      <Text dimColor>{botBorder}</Text>
+    </Box>
+  );
+}

package/src/tui/Footer.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Box } from "ink";
+
+interface FooterProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Fixed footer containing the input line.
+ * Pinned at the bottom of the screen.
+ */
+export function Footer({ children }: FooterProps) {
+  return (
+    <Box flexShrink={0}>
+      {children}
+    </Box>
+  );
+}

package/src/tui/Header.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Box, Text } from "ink";
+import { getBannerLines } from "../ui/banner";
+
+interface HeaderProps {
+  version: string;
+  network?: string;
+  wallet?: string;
+  balance?: string;
+  innerWidth?: number;
+}
+
+/**
+ * Fixed header showing the ASCII art banner + status info.
+ * Each line is framed with │ … │ box-drawing borders.
+ */
+export const Header = React.memo(function Header({
+  network,
+  wallet,
+  balance,
+  innerWidth = 58,
+}: HeaderProps) {
+  const bannerLines = getBannerLines({ network, wallet, balance });
+
+  return (
+    <Box flexDirection="column">
+      {bannerLines.map((line, i) => (
+        <Box key={i}>
+          <Text dimColor>│</Text>
+          <Text>{" " + line}</Text>
+          <Box flexGrow={1} />
+          <Text dimColor>│</Text>
+        </Box>
+      ))}
+    </Box>
+  );
+});

package/src/tui/InputLine.tsx

@@ -0,0 +1,164 @@
+import React, { useState, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import TextInput from "ink-text-input";
+import { createProgram } from "../program";
+
+const BUILTIN_CMDS = ["help", "exit", "quit", "clear", "status"];
+
+interface InputLineProps {
+  onSubmit: (value: string) => void;
+  isDisabled?: boolean;
+}
+
+/**
+ * Input line with command history navigation and tab completion.
+ * Uses ink-text-input for text input with cursor.
+ */
+export function InputLine({ onSubmit, isDisabled = false }: InputLineProps) {
+  const [value, setValue] = useState("");
+  const [history, setHistory] = useState<string[]>([]);
+  const [historyIdx, setHistoryIdx] = useState(-1);
+  const [historyTemp, setHistoryTemp] = useState("");
+
+  // Lazily build command list for tab completion
+  const [topCmds] = useState<string[]>(() => {
+    try {
+      const prog = createProgram();
+      return prog.commands.map((cmd) => cmd.name());
+    } catch {
+      return [];
+    }
+  });
+  const [subCmds] = useState<Map<string, string[]>>(() => {
+    try {
+      const prog = createProgram();
+      const map = new Map<string, string[]>();
+      for (const cmd of prog.commands) {
+        if (cmd.commands.length > 0) {
+          map.set(cmd.name(), cmd.commands.map((s) => s.name()));
+        }
+      }
+      return map;
+    } catch {
+      return new Map();
+    }
+  });
+
+  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];
+      });
+      setHistoryIdx(-1);
+      setHistoryTemp("");
+      setValue("");
+
+      onSubmit(trimmed);
+    },
+    [onSubmit]
+  );
+
+  useInput(
+    (_input, key) => {
+      if (isDisabled) return;
+
+      // Up arrow — history prev
+      if (key.upArrow) {
+        setHistory((hist) => {
+          setHistoryIdx((idx) => {
+            if (idx === -1) {
+              setHistoryTemp(value);
+              const newIdx = hist.length - 1;
+              if (newIdx >= 0) setValue(hist[newIdx]);
+              return newIdx;
+            } else if (idx > 0) {
+              const newIdx = idx - 1;
+              setValue(hist[newIdx]);
+              return newIdx;
+            }
+            return idx;
+          });
+          return hist;
+        });
+        return;
+      }
+
+      // Down arrow — history next
+      if (key.downArrow) {
+        setHistory((hist) => {
+          setHistoryIdx((idx) => {
+            if (idx >= 0) {
+              const newIdx = idx + 1;
+              if (newIdx >= hist.length) {
+                setValue(historyTemp);
+                return -1;
+              } else {
+                setValue(hist[newIdx]);
+                return newIdx;
+              }
+            }
+            return idx;
+          });
+          return hist;
+        });
+        return;
+      }
+
+      // Tab — completion
+      if (_input === "\t") {
+        const allTop = [...BUILTIN_CMDS, ...topCmds];
+        const trimmed = value.trimStart();
+        const spaceIdx = trimmed.indexOf(" ");
+
+        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) return;
+
+        if (completions.length === 1) {
+          setValue(completions[0] + " ");
+          return;
+        }
+
+        // Find common prefix
+        const common = completions.reduce((a, b) => {
+          let i = 0;
+          while (i < a.length && i < b.length && a[i] === b[i]) i++;
+          return a.slice(0, i);
+        });
+        if (common.length > value.trimStart().length) {
+          setValue(common);
+        }
+      }
+    },
+    { isActive: !isDisabled }
+  );
+
+  return (
+    <Box>
+      <Text color="cyan">◈</Text>
+      <Text dimColor> arc402 </Text>
+      <Text color="white">{">"} </Text>
+      <TextInput
+        value={value}
+        onChange={setValue}
+        onSubmit={handleSubmit}
+        focus={!isDisabled}
+      />
+    </Box>
+  );
+}

package/src/tui/Viewport.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Box, Text, useStdout } from "ink";
+
+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.
+ */
+export function Viewport({ lines, scrollOffset, isAutoScroll, innerWidth = 58 }: 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);
+
+  // Compute the window slice
+  const totalLines = lines.length;
+  let endIdx: number;
+  let startIdx: number;
+
+  if (scrollOffset === 0) {
+    endIdx = totalLines;
+    startIdx = Math.max(0, endIdx - viewportHeight);
+  } else {
+    endIdx = Math.max(0, totalLines - scrollOffset);
+    startIdx = Math.max(0, endIdx - viewportHeight);
+  }
+
+  const visibleLines = lines.slice(startIdx, endIdx);
+
+  // Pad with empty lines if fewer than viewportHeight
+  const padCount = Math.max(0, viewportHeight - visibleLines.length);
+  const paddedLines = [
+    ...Array(padCount).fill(""),
+    ...visibleLines,
+  ];
+
+  const canScrollDown = scrollOffset > 0;
+
+  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>
+      ))}
+      {canScrollDown && !isAutoScroll && (
+        <Box justifyContent="flex-end">
+          <Text dimColor>│ ↓ more</Text>
+          <Box flexGrow={1} />
+          <Text dimColor>│</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

package/src/tui/index.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { render } from "ink";
+import { App } from "./App";
+import fs from "fs";
+import path from "path";
+import os from "os";
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const pkg = require("../../package.json") as { version: string };
+
+const CONFIG_PATH = path.join(os.homedir(), ".arc402", "config.json");
+
+interface Config {
+  network?: string;
+  walletContractAddress?: string;
+  rpcUrl?: string;
+}
+
+async function loadConfig(): Promise<Config> {
+  if (!fs.existsSync(CONFIG_PATH)) return {};
+  try {
+    return JSON.parse(fs.readFileSync(CONFIG_PATH, "utf-8")) as Config;
+  } catch {
+    return {};
+  }
+}
+
+async function getBalance(
+  rpcUrl: string,
+  address: string
+): Promise<string | undefined> {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const ethersLib = require("ethers") as typeof import("ethers");
+    const provider = new ethersLib.ethers.JsonRpcProvider(rpcUrl);
+    const bal = await Promise.race([
+      provider.getBalance(address),
+      new Promise<never>((_, r) =>
+        setTimeout(() => r(new Error("timeout")), 2000)
+      ),
+    ]);
+    return `${parseFloat(ethersLib.ethers.formatEther(bal)).toFixed(4)} ETH`;
+  } catch {
+    return undefined;
+  }
+}
+
+export async function launchTUI(): Promise<void> {
+  const config = await loadConfig();
+
+  let walletDisplay: string | undefined;
+  if (config.walletContractAddress) {
+    const w = config.walletContractAddress;
+    walletDisplay = `${w.slice(0, 6)}...${w.slice(-4)}`;
+  }
+
+  let balance: string | undefined;
+  if (config.rpcUrl && config.walletContractAddress) {
+    balance = await getBalance(config.rpcUrl, config.walletContractAddress);
+  }
+
+  const { waitUntilExit } = render(
+    <App
+      version={pkg.version}
+      network={config.network}
+      wallet={walletDisplay}
+      balance={balance}
+    />
+  );
+
+  await waitUntilExit();
+}

package/src/tui/useChat.ts

@@ -0,0 +1,103 @@
+import { useState, useCallback } from "react";
+import chalk from "chalk";
+import { c } from "../ui/colors";
+
+interface UseChatResult {
+  send: (message: string, onLine: (line: string) => void) => Promise<void>;
+  isSending: boolean;
+}
+
+/**
+ * Sends messages to the OpenClaw gateway and streams responses
+ * line-by-line into the viewport buffer via onLine callback.
+ */
+export function useChat(): UseChatResult {
+  const [isSending, setIsSending] = useState(false);
+
+  const send = useCallback(
+    async (message: string, onLine: (line: string) => void): Promise<void> => {
+      setIsSending(true);
+      const trimmed = message.trim().slice(0, 10000);
+
+      // Show thinking placeholder
+      onLine(chalk.dim(" ◈ ") + chalk.dim("thinking..."));
+
+      let res: Response;
+      try {
+        res = await fetch("http://localhost:19000/api/agent", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ message: trimmed, session: "arc402-tui" }),
+          signal: AbortSignal.timeout(30000),
+        });
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : String(err);
+        const isDown =
+          msg.includes("ECONNREFUSED") ||
+          msg.includes("fetch failed") ||
+          msg.includes("ENOTFOUND") ||
+          msg.includes("UND_ERR_SOCKET");
+        if (isDown) {
+          onLine(
+            " " +
+              chalk.yellow("⚠") +
+              " " +
+              chalk.dim("OpenClaw gateway not running. Start with: ") +
+              chalk.white("openclaw gateway start")
+          );
+        } else {
+          onLine(` ${c.failure} ${chalk.red(msg)}`);
+        }
+        setIsSending(false);
+        return;
+      }
+
+      if (!res.body) {
+        onLine(chalk.dim(" ◈ ") + chalk.white("(empty response)"));
+        setIsSending(false);
+        return;
+      }
+
+      const flushLine = (line: string): void => {
+        // Unwrap SSE data lines
+        if (line.startsWith("data: ")) {
+          line = line.slice(6);
+          if (line === "[DONE]") return;
+          try {
+            const j = JSON.parse(line) as {
+              text?: string;
+              content?: string;
+              delta?: { text?: string };
+            };
+            line = j.text ?? j.content ?? j.delta?.text ?? line;
+          } catch {
+            /* use raw */
+          }
+        }
+        if (line.trim()) {
+          onLine(chalk.dim(" ◈ ") + chalk.white(line));
+        }
+      };
+
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+        for (const line of lines) flushLine(line);
+      }
+
+      if (buffer.trim()) flushLine(buffer);
+
+      setIsSending(false);
+    },
+    []
+  );
+
+  return { send, isSending };
+}