arc402-cli 0.7.5 → 0.9.0

package/src/commands/workroom.ts

@@ -1,4 +1,5 @@
 import { Command } from "commander";
+import * as crypto from "node:crypto";
 import * as fs from "fs";
 import * as path from "path";
 import * as os from "os";
@@ -7,12 +8,16 @@ import { spawnSync, execSync } from "child_process";
 import {
   ARC402_DIR,
   runCmd,
-} from "../openshell-runtime";
-import { DAEMON_LOG, DAEMON_TOML } from "../daemon/config";
-import { c } from "../ui/colors";
-import { startSpinner } from "../ui/spinner";
-import { renderTree } from "../ui/tree";
-import { formatAddress } from "../ui/format";
+} from "../openshell-runtime.js";
+import { DAEMON_LOG, DAEMON_TOML, loadDaemonConfig } from "../daemon/config.js";
+import { c } from "../ui/colors.js";
+import { startSpinner } from "../ui/spinner.js";
+import { renderTree } from "../ui/tree.js";
+import { formatAddress } from "../ui/format.js";
+
+import { fileURLToPath } from "node:url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 // ─── Daemon lifecycle notify ──────────────────────────────────────────────────
 
@@ -27,7 +32,6 @@ function notifyDaemonWorkroomStatus(
     let daemonPort = port;
     if (fs.existsSync(DAEMON_TOML)) {
       try {
-        const { loadDaemonConfig } = require("../daemon/config") as typeof import("../daemon/config");
         const cfg = loadDaemonConfig();
         daemonPort = cfg.relay?.listen_port ?? port;
       } catch { /* use default */ }
@@ -101,7 +105,7 @@ function buildImage(): boolean {
 function getPolicyHash(): string {
   if (!fs.existsSync(POLICY_FILE)) return "(no policy file)";
   const content = fs.readFileSync(POLICY_FILE, "utf-8");
-  const crypto = require("crypto");
+  // crypto imported at top level
   return "0x" + crypto.createHash("sha256").update(content).digest("hex").slice(0, 16);
 }
 
@@ -131,7 +135,7 @@ export function registerWorkroomCommands(program: Command): void {
       if (!fs.existsSync(POLICY_FILE)) {
         console.log(c.dim("No policy file found. Generating default..."));
         // Import and call the existing policy generator
-        const { registerOpenShellCommands } = require("./openshell");
+        const { registerOpenShellCommands } = await import("./openshell.js");
         console.log(c.dim(`Policy file will be generated at: ${POLICY_FILE}`));
         console.log(c.dim("Run 'arc402 workroom policy preset core-launch' after init to apply defaults."));
       } else {
@@ -797,7 +801,7 @@ No learnings yet. Complete your first hired task to start accumulating expertise
     .command("token-usage [agreementId]")
     .description("Show token usage for a specific agreement or across all jobs.")
     .action(async (agreementId) => {
-      const { readUsageReport, formatUsageReport } = require("../daemon/token-metering");
+      const { readUsageReport, formatUsageReport } = await import("../daemon/token-metering.js");
 
       if (agreementId) {
         const usage = readUsageReport(agreementId);

package/src/daemon/config.ts

@@ -6,6 +6,7 @@
 import * as fs from "fs";
 import * as path from "path";
 import * as os from "os";
+import { ethers } from "ethers";
 import { parse as parseToml } from "smol-toml";
 
 export const DAEMON_DIR = path.join(os.homedir(), ".arc402");
@@ -249,7 +250,7 @@ export function loadMachineKey(config: DaemonConfig): { privateKey: string; addr
     throw new Error(`Machine key not found. Set environment variable: ${envVarName}`);
   }
 
-  const { ethers } = require("ethers") as typeof import("ethers");
+  // ethers imported at top level
   let address: string;
   try {
     const w = new ethers.Wallet(privateKey);

package/src/daemon/hire-listener.ts

@@ -5,9 +5,9 @@
 import * as http from "http";
 import * as https from "https";
 import { ethers } from "ethers";
-import type { DaemonConfig } from "./config";
-import type { DaemonDB } from "./index";
-import type { Notifier } from "./notify";
+import type { DaemonConfig } from "./config.js";
+import type { DaemonDB } from "./index.js";
+import type { Notifier } from "./notify.js";
 
 export interface HireProposal {
   messageId: string;

package/src/daemon/index.ts

@@ -8,6 +8,7 @@
  * Signals: SIGTERM → graceful shutdown.
  */
 import * as fs from "fs";
+import * as os from "os";
 import * as path from "path";
 import * as net from "net";
 import * as http from "http";
@@ -25,12 +26,12 @@ import {
   DAEMON_DB,
   DAEMON_SOCK,
   type DaemonConfig,
-} from "./config";
-import { verifyWallet, getWalletBalance } from "./wallet-monitor";
-import { buildNotifier } from "./notify";
-import { HireListener } from "./hire-listener";
-import { UserOpsManager, buildAcceptCalldata } from "./userops";
-import { generateReceipt, extractLearnings, createJobDirectory, cleanJobDirectory } from "./job-lifecycle";
+} from "./config.js";
+import { verifyWallet, getWalletBalance } from "./wallet-monitor.js";
+import { buildNotifier } from "./notify.js";
+import { HireListener } from "./hire-listener.js";
+import { UserOpsManager, buildAcceptCalldata } from "./userops.js";
+import { generateReceipt, extractLearnings, createJobDirectory, cleanJobDirectory } from "./job-lifecycle.js";
 
 // ─── State DB ─────────────────────────────────────────────────────────────────
 
@@ -432,7 +433,7 @@ function formatUptime(seconds: number): string {
 // ─── Daemon main ──────────────────────────────────────────────────────────────
 
 // Extend config with serviceAgreementAddress (loaded from CLI config if available)
-declare module "./config" {
+declare module "./config.js" {
   interface DaemonConfig {
     serviceAgreementAddress?: string;
   }
@@ -448,7 +449,7 @@ export async function runDaemon(foreground = false): Promise<void> {
   let config: DaemonConfig;
   try {
     config = loadDaemonConfig();
-    log({ event: "config_loaded", path: require("path").join(require("os").homedir(), ".arc402", "daemon.toml") });
+    log({ event: "config_loaded", path: path.join(os.homedir(), ".arc402", "daemon.toml") });
   } catch (err) {
     process.stderr.write(`Config error: ${err}\n`);
     process.exit(1);
@@ -763,7 +764,7 @@ export async function runDaemon(foreground = false): Promise<void> {
           }
 
           // Policy check
-          const { evaluatePolicy } = await import("./hire-listener");
+          const { evaluatePolicy } = await import("./hire-listener.js");
           const activeCount = db.countActiveHireRequests();
           const policyResult = evaluatePolicy(proposal, config, activeCount);
 

package/src/daemon/job-lifecycle.ts

@@ -13,7 +13,7 @@ import * as fs from "fs";
 import * as path from "path";
 import * as os from "os";
 import * as crypto from "crypto";
-import { readUsageReport, type AggregatedTokenUsage } from "./token-metering";
+import { readUsageReport, type AggregatedTokenUsage } from "./token-metering.js";
 
 const ARC402_DIR = path.join(os.homedir(), ".arc402");
 const RECEIPTS_DIR = path.join(ARC402_DIR, "receipts");

package/src/daemon/notify.ts

@@ -4,7 +4,7 @@
  */
 import * as https from "https";
 import * as http from "http";
-import type { DaemonConfig } from "./config";
+import type { DaemonConfig } from "./config.js";
 
 export type NotifyEvent =
   | "hire_request"
@@ -133,11 +133,11 @@ export class EmailChannel implements NotificationChannel {
   async send(title: string, body: string): Promise<void> {
     // nodemailer is an optional runtime dependency — load via require to skip
     // compile-time module resolution. Throws a clear message if not installed.
-    // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let nodemailer: any;
     try {
-      // Using Function constructor avoids TypeScript static import analysis.
-      nodemailer = (new Function("require", "return require('nodemailer')"))(require);
+      // @ts-expect-error nodemailer is an optional dependency
+      nodemailer = await import("nodemailer");
     } catch {
       throw new Error("nodemailer is not installed. Run: npm install nodemailer");
     }

package/src/daemon/userops.ts

@@ -3,10 +3,10 @@
  * Wraps protocol calls (accept, fulfill) into ERC-4337 UserOperations.
  */
 import { ethers } from "ethers";
-import { BundlerClient } from "../bundler";
-import type { UserOperation } from "../bundler";
-import type { DaemonConfig } from "./config";
-import { ARC402_WALLET_EXECUTE_ABI } from "../abis";
+import { BundlerClient } from "../bundler.js";
+import type { UserOperation } from "../bundler.js";
+import type { DaemonConfig } from "./config.js";
+import { ARC402_WALLET_EXECUTE_ABI } from "../abis.js";
 
 // ServiceAgreement calldata encoders
 const SA_IFACE = new ethers.Interface([

package/src/daemon/wallet-monitor.ts

@@ -3,11 +3,11 @@
  * Steps 4 and 5 of the daemon startup sequence (Spec 32 §3).
  */
 import { ethers } from "ethers";
-import type { DaemonConfig } from "./config";
+import type { DaemonConfig } from "./config.js";
 import {
   ARC402_WALLET_GUARDIAN_ABI,
   ARC402_WALLET_MACHINE_KEY_ABI,
-} from "../abis";
+} from "../abis.js";
 
 export interface WalletStatus {
   contractAddress: string;

package/src/endpoint-notify.ts

@@ -4,7 +4,7 @@
  * and POSTs lifecycle events after onchain transactions.
  */
 import { ethers } from "ethers";
-import { AGENT_REGISTRY_ABI } from "./abis";
+import { AGENT_REGISTRY_ABI } from "./abis.js";
 import * as dns from "dns/promises";
 
 export const DEFAULT_REGISTRY_ADDRESS = "0xD5c2851B00090c92Ba7F4723FB548bb30C9B6865";

package/src/index.ts

@@ -1,11 +1,12 @@
 #!/usr/bin/env node
-import { createProgram } from "./program";
-import { startREPL } from "./repl";
-import { configExists, loadConfig, saveConfig } from "./config";
+import { createRequire } from "node:module";
+import { createProgram } from "./program.js";
+import { startREPL } from "./repl.js";
+import { configExists, loadConfig, saveConfig } from "./config.js";
 
 // ── Upgrade safety check ────────────────────────────────────────────────────
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const currentVersion: string = (require("../package.json") as { version: string }).version;
+const _require = createRequire(import.meta.url);
+const currentVersion: string = (_require("../package.json") as { version: string }).version;
 
 function checkUpgrade(): void {
   if (!configExists()) return;
@@ -53,9 +54,9 @@ if (printMode) {
     process.exit(1);
   });
 } else if (process.stdout.isTTY && !hasSubcommand && process.argv.length <= 2 && !process.env.ARC402_NO_TUI) {
-  // TTY with no subcommand — launch Ink TUI (unless spawned by TUI as a child process)
+  // TTY with no subcommand — launch Ink TUI
   checkUpgrade();
-  void import("./tui/index").then(({ launchTUI }) => launchTUI()).catch((e: unknown) => {
+  void import("./tui/index.js").then(({ launchTUI }) => launchTUI()).catch((e: unknown) => {
     console.error("TUI failed to start:", e instanceof Error ? e.message : String(e));
     // Fallback to REPL
     void startREPL();

package/src/openshell-runtime.ts

@@ -3,7 +3,11 @@ import * as os from "os";
 import * as path from "path";
 import { spawnSync } from "child_process";
 import { parse as parseToml } from "smol-toml";
-import { loadConfig } from "./config";
+import { loadConfig } from "./config.js";
+
+import { fileURLToPath } from "node:url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
 export const ARC402_DIR = path.join(os.homedir(), ".arc402");
 export const OPENSHELL_TOML = path.join(ARC402_DIR, "openshell.toml");

package/src/program.ts

@@ -1,38 +1,39 @@
+import { createRequire } from "node:module";
 import { Command } from "commander";
-import { registerAcceptCommand } from "./commands/accept";
-import { registerAgentCommands } from "./commands/agent";
-import { registerAgreementsCommands } from "./commands/agreements";
-import { registerArbitratorCommand } from "./commands/arbitrator";
-import { registerCancelCommand } from "./commands/cancel";
-import { registerChannelCommands } from "./commands/channel";
-import { registerConfigCommands } from "./commands/config";
-import { registerDeliverCommand } from "./commands/deliver";
-import { registerDiscoverCommand } from "./commands/discover";
-import { registerEndpointCommands } from "./commands/endpoint";
-import { registerDisputeCommand } from "./commands/dispute";
-import { registerHireCommand } from "./commands/hire";
-import { registerHandshakeCommand } from "./commands/agent-handshake";
-import { registerNegotiateCommands } from "./commands/negotiate";
-import { registerRelayCommands } from "./commands/relay";
-import { registerRemediateCommands } from "./commands/remediate";
-import { registerDaemonCommands } from "./commands/daemon";
-import { registerOpenShellCommands } from "./commands/openshell";
-import { registerWorkroomCommands } from "./commands/workroom";
-import { registerArenaHandshakeCommands } from "./commands/arena-handshake";
-import { registerTrustCommand } from "./commands/trust";
-import { registerWalletCommands } from "./commands/wallet";
-import { registerOwnerCommands } from "./commands/owner";
-import { registerSetupCommands } from "./commands/setup";
-import { registerVerifyCommand } from "./commands/verify";
-import { registerContractInteractionCommands } from "./commands/contract-interaction";
-import { registerWatchtowerCommands } from "./commands/watchtower";
-import { registerColdStartCommands } from "./commands/coldstart";
-import { registerDoctorCommand } from "./commands/doctor";
-import { registerMigrateCommands } from "./commands/migrate";
-import { registerFeedCommand } from "./commands/feed";
-import { registerArenaCommands } from "./commands/arena";
-import { registerWatchCommand } from "./commands/watch";
-import { registerBackupCommand } from "./commands/backup";
+import { registerAcceptCommand } from "./commands/accept.js";
+import { registerAgentCommands } from "./commands/agent.js";
+import { registerAgreementsCommands } from "./commands/agreements.js";
+import { registerArbitratorCommand } from "./commands/arbitrator.js";
+import { registerCancelCommand } from "./commands/cancel.js";
+import { registerChannelCommands } from "./commands/channel.js";
+import { registerConfigCommands } from "./commands/config.js";
+import { registerDeliverCommand } from "./commands/deliver.js";
+import { registerDiscoverCommand } from "./commands/discover.js";
+import { registerEndpointCommands } from "./commands/endpoint.js";
+import { registerDisputeCommand } from "./commands/dispute.js";
+import { registerHireCommand } from "./commands/hire.js";
+import { registerHandshakeCommand } from "./commands/agent-handshake.js";
+import { registerNegotiateCommands } from "./commands/negotiate.js";
+import { registerRelayCommands } from "./commands/relay.js";
+import { registerRemediateCommands } from "./commands/remediate.js";
+import { registerDaemonCommands } from "./commands/daemon.js";
+import { registerOpenShellCommands } from "./commands/openshell.js";
+import { registerWorkroomCommands } from "./commands/workroom.js";
+import { registerArenaHandshakeCommands } from "./commands/arena-handshake.js";
+import { registerTrustCommand } from "./commands/trust.js";
+import { registerWalletCommands } from "./commands/wallet.js";
+import { registerOwnerCommands } from "./commands/owner.js";
+import { registerSetupCommands } from "./commands/setup.js";
+import { registerVerifyCommand } from "./commands/verify.js";
+import { registerContractInteractionCommands } from "./commands/contract-interaction.js";
+import { registerWatchtowerCommands } from "./commands/watchtower.js";
+import { registerColdStartCommands } from "./commands/coldstart.js";
+import { registerDoctorCommand } from "./commands/doctor.js";
+import { registerMigrateCommands } from "./commands/migrate.js";
+import { registerFeedCommand } from "./commands/feed.js";
+import { registerArenaCommands } from "./commands/arena.js";
+import { registerWatchCommand } from "./commands/watch.js";
+import { registerBackupCommand } from "./commands/backup.js";
 import reputation from "./commands/reputation.js";
 import policy from "./commands/policy.js";
 
@@ -43,8 +44,7 @@ export function createProgram(): Command {
     .description(
       "ARC-402 CLI aligned to canonical-capability discovery → negotiate → hire → remediate → dispute workflow"
     )
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
-    .version((require("../package.json") as { version: string }).version);
+    .version((createRequire(import.meta.url)("../package.json") as { version: string }).version);
 
   registerConfigCommands(program);
   registerHandshakeCommand(program);

package/src/repl.ts

@@ -3,9 +3,9 @@ import fs from "fs";
 import path from "path";
 import os from "os";
 import readline from "readline";
-import { createProgram } from "./program";
-import { getBannerLines, BannerConfig } from "./ui/banner";
-import { c } from "./ui/colors";
+import { createProgram } from "./program.js";
+import { getBannerLines, BannerConfig } from "./ui/banner.js";
+import { c } from "./ui/colors.js";
 
 // ─── Config helpers ────────────────────────────────────────────────────────────
 

package/src/tui/App.tsx

@@ -1,14 +1,20 @@
-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 React, { useState, useCallback, useEffect } from "react";
+import { createRequire } from "node:module";
+import { Box, Text, Static, useApp, useInput } from "ink";
+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 { getBannerArt, getStatusItems } from "../ui/banner.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 {
@@ -19,22 +25,35 @@ interface AppProps {
 }
 
 /**
- * Root TUI component — box-drawn frame with fixed header/footer, scrollable viewport.
- *
- * ┌─────────────────────────────────────────────┐
- * │  ASCII banner + status info                  │  ← FIXED header
- * ├─────────────────────────────────────────────┤
- * │  scrollable output                           │  ← VIEWPORT
- * ├─────────────────────────────────────────────┤
- * │  ◈ arc402 > _                                │  ← FIXED footer
- * └─────────────────────────────────────────────┘
+ * Root TUI component — fixed header/footer with scrollable viewport.
  */
 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
+
+  // Banner computed once — rendered via <Static> so it never re-renders
+  const [bannerData] = useState(() => {
+    const { artLines, subtitle, separator } = getBannerArt();
+    const statusItems = getStatusItems({ network, wallet, balance });
+    // Build static items: art lines + subtitle + separator + status + help hint
+    const items: { id: string; text: string }[] = [];
+    artLines.forEach((line, i) => items.push({ id: `art-${i}`, text: line }));
+    items.push({ id: "blank-1", text: "" });
+    items.push({ id: "subtitle", text: subtitle });
+    items.push({ id: "separator", text: separator });
+    if (statusItems.length > 0) {
+      items.push({ id: "blank-2", text: "" });
+      // Status items as a single formatted line for <Static>
+      // (FlexWrap rendering happens in the Header component for non-Static contexts)
+      const statusLine = statusItems
+        .map((s) => `\x1b[2m${s.label}\x1b[22m  ${s.value}`)
+        .join("    ");
+      items.push({ id: "status", text: ` ${statusLine}` });
+    }
+    items.push({ id: "blank-3", text: "" });
+    items.push({ id: "hint", text: " \x1b[2mType 'help' to get started\x1b[22m" });
+    items.push({ id: "blank-4", text: "" });
+    return items;
+  });
 
   const [outputBuffer, setOutputBuffer] = useState<string[]>([
     chalk.dim("  Type 'help' to see available commands"),
@@ -46,14 +65,16 @@ export function App({ version, network, wallet, balance }: AppProps) {
   const { send, isSending } = useChat();
 
   // Approximate viewport height for scroll management
-  const HEADER_ROWS = 17;
-  const FOOTER_ROWS = 3;
+  const HEADER_ROWS = 15;
+  const FOOTER_ROWS = 1;
   const rows = process.stdout.rows ?? 24;
   const viewportHeight = Math.max(1, rows - HEADER_ROWS - FOOTER_ROWS);
 
   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 {
@@ -64,6 +85,20 @@ export function App({ version, network, wallet, balance }: AppProps) {
     }
   });
 
+  // ── 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;
+    }
+  });
+
   const appendLine = useCallback((line: string) => {
     setOutputBuffer((prev) => [...prev, line]);
   }, []);
@@ -192,49 +227,37 @@ export function App({ version, network, wallet, balance }: AppProps) {
 
   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}
-      />
+      {/* BANNER — rendered once via <Static>, never re-renders */}
+      <Static items={bannerData}>
+        {(item) => <Text key={item.id}>{item.text}</Text>}
+      </Static>
 
-      {/* Mid separator */}
-      <Text dimColor>{midBorder}</Text>
+      {/* Separator */}
+      <Box>
+        <Text dimColor>{"─".repeat(60)}</Text>
+      </Box>
 
       {/* VIEWPORT — fills remaining space */}
       <Viewport
         lines={outputBuffer}
         scrollOffset={scrollOffset}
         isAutoScroll={isAutoScroll}
-        innerWidth={inner}
       />
 
-      {/* Footer separator */}
-      <Text dimColor>{midBorder}</Text>
+      {/* Notification toasts — above footer */}
+      <ToastContainer toasts={toasts} onDismiss={dismissToast} />
 
-      {/* FOOTER — input pinned */}
+      {/* Bottom separator */}
       <Box>
-        <Text dimColor>│</Text>
-        <Box flexGrow={1}>
-          <InputLine onSubmit={handleCommand} isDisabled={isDisabled} />
-        </Box>
-        <Text dimColor>│</Text>
+        <Text dimColor>{"─".repeat(60)}</Text>
       </Box>
 
-      {/* Bottom border */}
-      <Text dimColor>{botBorder}</Text>
+      {/* FOOTER — fixed, input pinned */}
+      <Footer>
+        <InputLine onSubmit={handleCommand} isDisabled={isDisabled} />
+      </Footer>
     </Box>
   );
 }

package/src/tui/Header.tsx

@@ -1,37 +1,51 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { getBannerLines } from "../ui/banner";
+import { getBannerArt, getStatusItems } from "../ui/banner.js";
+import type { BannerConfig } from "../ui/banner.js";
 
 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.
+ * Status items use flexWrap to adapt to narrow terminals.
  */
 export const Header = React.memo(function Header({
   network,
   wallet,
   balance,
-  innerWidth = 58,
 }: HeaderProps) {
-  const bannerLines = getBannerLines({ network, wallet, balance });
+  const { artLines, subtitle, separator } = getBannerArt();
+  const statusItems = getStatusItems({ 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>
+      {artLines.map((line, i) => (
+        <Text key={i}>{line}</Text>
       ))}
+      <Text>{""}</Text>
+      <Text>{subtitle}</Text>
+      <Text>{separator}</Text>
+      {statusItems.length > 0 && (
+        <>
+          <Text>{""}</Text>
+          <Box flexWrap="wrap" columnGap={2}>
+            {statusItems.map((item) => (
+              <Box key={item.label}>
+                <Text dimColor>{item.label}</Text>
+                <Text>  {item.value}</Text>
+              </Box>
+            ))}
+          </Box>
+        </>
+      )}
+      <Text>{""}</Text>
+      <Text dimColor>{" Type 'help' to get started"}</Text>
+      <Text>{""}</Text>
     </Box>
   );
 });