arc402-cli 0.9.18 → 0.10.0

package/src/tui/App.tsx

@@ -1,263 +0,0 @@
-import React, { useState, useCallback, useEffect, useRef } from "react";
-import { createRequire } from "node:module";
-import { Box, Text, useApp, useInput, useStdout } from "ink";
-import { Header } from "./Header.js";
-import { Viewport } from "./Viewport.js";
-import { Footer } from "./Footer.js";
-import { InputLine } from "./InputLine.js";
-import { useCommand } from "./useCommand.js";
-import { useChat } from "./useChat.js";
-import { useScroll } from "./useScroll.js";
-import { useNotifications } from "./useNotifications.js";
-import { ToastContainer } from "./components/Toast.js";
-import { createProgram } from "../program.js";
-import chalk from "chalk";
-
-const pkg = createRequire(import.meta.url)("../../package.json") as { version: string };
-
-const BUILTIN_CMDS = ["help", "exit", "quit", "clear", "status"];
-
-interface AppProps {
-  version: string;
-  network?: string;
-  wallet?: string;
-  balance?: string;
-}
-
-/**
- * Root TUI component — fixed header/footer with scrollable viewport.
- */
-export function App({ version, network, wallet, balance }: AppProps) {
-  const { exit } = useApp();
-
-  const { stdout } = useStdout();
-
-  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();
-
-  // Compute viewport height from actual fixed rows:
-  //   Header: 6 (art) + 1 (blank) + 1 (subtitle) + 1 (separator) = 9
-  //   + 1 status line if any status items present
-  //   App chrome: 1 (top separator) + 1 (bottom separator) + 1 (input line) = 3
-  const rows = stdout?.rows ?? process.stdout.rows ?? 24;
-  const hasStatus = !!(network || wallet || balance);
-  const headerRows = 9 + (hasStatus ? 1 : 0);
-  const chromeRows = 3; // top separator + bottom separator + input line
-  const viewportHeight = Math.max(1, rows - headerRows - chromeRows);
-
-  const { scrollOffset, isAutoScroll, scrollUp, scrollDown, snapToBottom } =
-    useScroll(viewportHeight);
-
-  const { toasts, dismiss: dismissToast } = useNotifications();
-
-  // 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 [];
-    }
-  });
-
-  // ── Enhanced keyboard shortcuts ────────────────────────────────────────
-  useInput((input, key) => {
-    // Ctrl+L — clear viewport
-    if (key.ctrl && input === "l") {
-      setOutputBuffer([]);
-      return;
-    }
-    // Escape — cancel / clear (snap to bottom if scrolled)
-    if (key.escape) {
-      snapToBottom();
-      return;
-    }
-  });
-
-  // ── Batched line appender ─────────────────────────────────────────────────
-  // Accumulate lines in a ref and flush once per microtask so that rapid
-  // onLine() calls (stdout monkey-patch, child-process pipe) produce a
-  // single React state update instead of one re-render per line.
-  const pendingLines = useRef<string[]>([]);
-  const flushScheduled = useRef(false);
-
-  const appendLine = useCallback((line: string) => {
-    pendingLines.current.push(line);
-    if (!flushScheduled.current) {
-      flushScheduled.current = true;
-      queueMicrotask(() => {
-        const batch = pendingLines.current;
-        pendingLines.current = [];
-        flushScheduled.current = false;
-        if (batch.length > 0) {
-          setOutputBuffer((prev) => [...prev, ...batch]);
-        }
-      });
-    }
-  }, []);
-
-  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 cols = Math.min(stdout?.columns ?? process.stdout.columns ?? 80, 120);
-
-  return (
-    <Box flexDirection="column" height="100%">
-      {/* BANNER — memoized, participates in flex layout */}
-      <Header version={version} network={network} wallet={wallet} balance={balance} />
-
-      {/* Separator */}
-      <Box flexShrink={0}>
-        <Text dimColor>{"─".repeat(cols)}</Text>
-      </Box>
-
-      {/* VIEWPORT — fills remaining space */}
-      <Viewport
-        lines={outputBuffer}
-        scrollOffset={scrollOffset}
-        isAutoScroll={isAutoScroll}
-        height={viewportHeight}
-      />
-
-      {/* Notification toasts — above footer */}
-      <ToastContainer toasts={toasts} onDismiss={dismissToast} />
-
-      {/* Bottom separator */}
-      <Box flexShrink={0}>
-        <Text dimColor>{"─".repeat(cols)}</Text>
-      </Box>
-
-      {/* FOOTER — fixed, input pinned */}
-      <Footer>
-        <InputLine onSubmit={handleCommand} isDisabled={isDisabled} />
-      </Footer>
-    </Box>
-  );
-}

package/src/tui/Footer.tsx

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

@@ -1,45 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-import { getBannerArt, getStatusItems } from "../ui/banner.js";
-import type { BannerConfig } from "../ui/banner.js";
-
-interface HeaderProps {
-  version: string;
-  network?: string;
-  wallet?: string;
-  balance?: string;
-}
-
-/**
- * Fixed header showing the ASCII art banner + status info.
- * Status items use flexWrap to adapt to narrow terminals.
- */
-export const Header = React.memo(function Header({
-  network,
-  wallet,
-  balance,
-}: HeaderProps) {
-  const { artLines, subtitle, separator } = getBannerArt();
-  const statusItems = getStatusItems({ network, wallet, balance });
-
-  return (
-    <Box flexDirection="column" flexShrink={0}>
-      {artLines.map((line, i) => (
-        <Text key={i}>{line}</Text>
-      ))}
-      <Text> </Text>
-      <Text>{subtitle}</Text>
-      <Text>{separator}</Text>
-      {statusItems.length > 0 && (
-        <Box flexWrap="wrap" columnGap={2}>
-          {statusItems.map((item) => (
-            <Box key={item.label}>
-              <Text dimColor>{item.label}</Text>
-              <Text>{"  "}{item.value}</Text>
-            </Box>
-          ))}
-        </Box>
-      )}
-    </Box>
-  );
-});

package/src/tui/InputLine.tsx

@@ -1,243 +0,0 @@
-import React, { useState, useCallback, useMemo } from "react";
-import { Box, Text, useInput } from "ink";
-import { CustomTextInput } from "./components/CustomTextInput.js";
-import { createProgram } from "../program.js";
-import { CompletionDropdown } from "./components/CompletionDropdown.js";
-
-const BUILTIN_CMDS = ["help", "exit", "quit", "clear", "status"];
-
-interface InputLineProps {
-  onSubmit: (value: string) => void;
-  isDisabled?: boolean;
-}
-
-/**
- * Input line with command history navigation, tab completion, and dropdown.
- */
-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("");
-
-  // 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 {
-      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 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;
-
-      setHistory((prev) => {
-        if (prev[prev.length - 1] === trimmed) return prev;
-        return [...prev, trimmed];
-      });
-      setHistoryIdx(-1);
-      setHistoryTemp("");
-      setValue("");
-      setShowDropdown(false);
-
-      onSubmit(trimmed);
-    },
-    [onSubmit]
-  );
-
-  useInput(
-    (_input, key) => {
-      if (isDisabled) return;
-
-      // ── 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) => {
-            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;
-      }
-
-      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 / dropdown ───────────────────────────────────
-      if (key.tab) {
-        const completions = getCompletions(value);
-
-        if (completions.length === 0) {
-          setShowDropdown(false);
-          return;
-        }
-
-        if (completions.length === 1) {
-          setValue(completions[0] + " ");
-          setShowDropdown(false);
-          return;
-        }
-
-        // 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++;
-          return a.slice(0, i);
-        });
-        if (common.length > value.trimStart().length) {
-          setValue(common);
-        }
-      }
-
-      // ── Escape — dismiss dropdown ─────────────────────────────────────
-      if (key.escape) {
-        setShowDropdown(false);
-      }
-    },
-    { isActive: !isDisabled }
-  );
-
-  // Auto-show completions as user types (no Tab needed)
-  const handleChange = useCallback(
-    (newVal: string) => {
-      setValue(newVal);
-      const trimmed = newVal.trimStart();
-      if (trimmed.length >= 2) {
-        const completions = getCompletions(newVal);
-        if (completions.length > 1) {
-          setDropdownCandidates(completions);
-          setDropdownIdx(0);
-          setShowDropdown(true);
-        } else {
-          setShowDropdown(false);
-        }
-      } else {
-        setShowDropdown(false);
-      }
-    },
-    [getCompletions]
-  );
-
-  return (
-    <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>
-        <CustomTextInput
-          value={value}
-          onChange={handleChange}
-          onSubmit={handleSubmit}
-          focus={!isDisabled}
-          suppressEnter={showDropdown}
-        />
-      </Box>
-    </Box>
-  );
-}

package/src/tui/Viewport.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import { Box, Text } from "ink";
-
-interface ViewportProps {
-  lines: string[];
-  scrollOffset: number;
-  isAutoScroll: boolean;
-  height: number;
-}
-
-/**
- * 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, height }: ViewportProps) {
-  const viewportHeight = Math.max(1, height);
-
-  // 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);
-
-  const canScrollUp = startIdx > 0;
-  const canScrollDown = scrollOffset > 0;
-
-  return (
-    <Box flexDirection="column" flexGrow={1}>
-      {canScrollUp && (
-        <Text dimColor>{"  \u2191 more (Shift+Up)"}</Text>
-      )}
-      {visibleLines.map((line, i) => (
-        <Text key={startIdx + i}>{line}</Text>
-      ))}
-      {canScrollDown && !isAutoScroll && (
-        <Text dimColor>{"  \u2193 more (Shift+Down / Esc)"}</Text>
-      )}
-    </Box>
-  );
-}