@leroylabs/cli 0.1.6 → 0.1.7

package/bin/leroy.mjs

@@ -2,7 +2,6 @@
 
 import { createInterface } from "node:readline/promises";
 import { stdin as input, stderr, stdout as output } from "node:process";
-import React from "react";
 
 import { parseArgs } from "../src/args.mjs";
 import { LeroyMcpClient } from "../src/client.mjs";
@@ -10,7 +9,7 @@ import { configPath, resolvedConfig, writeConfig } from "../src/config.mjs";
 import { createDemoResponse } from "../src/demo.mjs";
 import { usageError } from "../src/errors.mjs";
 import { formatEvaluation, formatHelp } from "../src/format.mjs";
-import { LiveEvidenceApp, render } from "../src/live-ui.mjs";
+import { renderLiveEvidence } from "../src/live-ui.mjs";
 import { ansiForeground, LEROY_COLORS } from "../src/colors.mjs";
 
 const ANSI = {
@@ -45,22 +44,20 @@ function printMissingApiKeyGuidance(options) {
   printError(`${promptStyle("▲", ["green"], colorEnabled)} ${promptStyle("Connect Leroy", ["bold", "white"], colorEnabled)}`);
   printError();
   printError(`  ${promptStyle("Live market evidence requires an MCP key.", ["white"], colorEnabled)}`);
-  printError(`  ${promptStyle("Create or activate one at", ["neutral"], colorEnabled)}`);
-  printError(`  ${promptStyle("https://getleroy.com/mcp", ["green"], colorEnabled)}`);
+  printError(`  ${promptStyle("Create or activate one at", ["neutral"], colorEnabled)} ${promptStyle("https://getleroy.com/mcp", ["green"], colorEnabled)}`);
   printError();
   printError(`  ${promptStyle("›", ["green"], colorEnabled)} Run ${promptStyle("leroy connect", ["bold", "white"], colorEnabled)} to continue.`);
 }
 
 async function connect(options) {
   const config = await resolvedConfig(options);
+  const colorEnabled = output.isTTY && !options.noColor;
   let apiKey = config.apiKey;
   if (!apiKey && input.isTTY) {
-    const colorEnabled = output.isTTY && !options.noColor;
     print();
     print(`${promptStyle("▲", ["green"], colorEnabled)} ${promptStyle("Connect Leroy", ["bold", "white"], colorEnabled)}`);
     print();
-    print(`  ${promptStyle("Create or activate an MCP key at", ["neutral"], colorEnabled)}`);
-    print(`  ${promptStyle("https://getleroy.com/mcp", ["green"], colorEnabled)}`);
+    print(`  ${promptStyle("Create or activate an MCP key at", ["neutral"], colorEnabled)} ${promptStyle("https://getleroy.com/mcp", ["green"], colorEnabled)}`);
     print();
     const readline = createInterface({ input, output });
     apiKey = (await readline.question(`  ${promptStyle("›", ["green"], colorEnabled)} Paste your ${promptStyle("lr_live_", ["bold", "white"], colorEnabled)} key: `)).trim();
@@ -70,11 +67,16 @@ async function connect(options) {
     print(`No API key supplied. Run: leroy connect --api-key lr_live_...`);
     return 2;
   }
-  print("Checking Leroy connection...");
+  print();
+  print(`  ${promptStyle("Checking Leroy connection...", ["white"], colorEnabled)}`);
   const client = new LeroyMcpClient({ endpoint: config.endpoint, apiKey });
   await client.initialize();
   await writeConfig({ endpoint: config.endpoint, apiKey });
-  print(`Connected. Credentials saved to ${configPath()}`);
+  print();
+  print(`  ${promptStyle("Connected!", ["bold", "green"], colorEnabled)}`);
+  print();
+  print(`  ${promptStyle(`Credentials saved to ${configPath()}`, ["white"], colorEnabled)}`);
+  print();
   return 0;
 }
 
@@ -99,13 +101,12 @@ async function evaluate(options) {
     client = new LeroyMcpClient({ endpoint: config.endpoint, apiKey: config.apiKey });
   }
   if (input.isTTY && output.isTTY && !options.json && !options.setup && !options.verbose) {
-    const app = render(React.createElement(LiveEvidenceApp, {
+    await renderLiveEvidence({
       client,
       request,
       colorEnabled: !options.noColor,
       polling: false,
-    }), { exitOnCtrlC: true });
-    await app.waitUntilExit();
+    });
     return 0;
   }
   const response = await client.evaluate(request);
@@ -143,13 +144,13 @@ async function watch(options) {
     }
     client = new LeroyMcpClient({ endpoint: config.endpoint, apiKey: config.apiKey });
   }
-  const app = render(React.createElement(LiveEvidenceApp, {
+  await renderLiveEvidence({
     client,
     request,
     colorEnabled: !options.noColor,
     intervalMs: options.intervalSeconds * 1_000,
-  }), { exitOnCtrlC: true });
-  await app.waitUntilExit();
+    polling: true,
+  });
   return 0;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leroylabs/cli",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Command-line access to Leroy market evidence.",
   "homepage": "https://getleroy.com",
   "type": "module",
@@ -15,11 +15,6 @@
   "bin": {
     "leroy": "bin/leroy.mjs"
   },
-  "dependencies": {
-    "cli-table3": "^0.6.5",
-    "ink": "^7.1.1",
-    "react": "^19.2.8"
-  },
   "engines": {
     "node": ">=22"
   }

package/src/live-ui.mjs

@@ -1,84 +1,86 @@
-import React, { useEffect, useState } from "react";
-import Table from "cli-table3";
-import { Box, Text, render, useApp, useInput, useWindowSize } from "ink";
+import { stdin as processInput, stdout as processOutput } from "node:process";
 
 import { ansiForeground, LEROY_COLORS } from "./colors.mjs";
 import { buildEvaluationViewModel } from "./format.mjs";
 
-const COLORS = {
-  green: LEROY_COLORS.green,
-  red: LEROY_COLORS.red,
-  white: "white",
-  muted: LEROY_COLORS.neutral,
-  content: LEROY_COLORS.neutral,
-  neutral: LEROY_COLORS.neutral,
-  inactive: LEROY_COLORS.inactive,
-  border: LEROY_COLORS.inactive,
-};
-
-const MONOCHROME = Object.fromEntries(Object.keys(COLORS).map((key) => [key, undefined]));
 const MAX_CARD_WIDTH = 67;
 const MIN_CARD_WIDTH = 64;
 const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
 const LOADING_STEP_DELAY_MS = 110;
 const STRATEGY_COUNT = 41;
-const STRATEGY_BAR_COUNT = 20;
-const STRATEGY_CELL_COUNT = STRATEGY_BAR_COUNT;
-const TABLE_STYLE = {
-  "padding-left": 0,
-  "padding-right": 0,
-  head: [],
-  border: [],
-};
-const ANSI_CODES = {
-  white: 37,
-  green: `38;2;0;212;27`,
-  red: `38;2;242;86;47`,
-  muted: 90,
-  neutral: `38;2;143;149;145`,
-  inactive: `38;2;41;51;43`,
+const STRATEGY_CELL_COUNT = 20;
+
+const ANSI = {
+  reset: "\u001b[0m",
+  bold: "\u001b[1m",
+  white: "\u001b[37m",
+  muted: "\u001b[90m",
+  green: ansiForeground(LEROY_COLORS.green),
+  red: ansiForeground(LEROY_COLORS.red),
+  neutral: ansiForeground(LEROY_COLORS.neutral),
+  inactive: ansiForeground(LEROY_COLORS.inactive),
+  yellow: "\u001b[33m",
+  hideCursor: "\u001b[?25l",
+  showCursor: "\u001b[?25h",
 };
 
-function tableChars() {
+function record(value) {
+  return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+
+function clamp(value, minimum, maximum) {
+  return Math.min(maximum, Math.max(minimum, value));
+}
+
+function terminalColumns(output = processOutput) {
+  return Number.isFinite(output.columns) && output.columns > 0 ? output.columns : 80;
+}
+
+function layoutFor(columns) {
+  const width = clamp(columns - 4, MIN_CARD_WIDTH, MAX_CARD_WIDTH);
   return {
-    top: "",
-    "top-mid": "",
-    "top-left": "",
-    "top-right": "",
-    bottom: "",
-    "bottom-mid": "",
-    "bottom-left": "",
-    "bottom-right": "",
-    left: "",
-    "left-mid": "",
-    mid: "",
-    "mid-mid": "",
-    right: "",
-    "right-mid": "",
-    middle: "",
+    width,
+    innerWidth: width - 4,
+    sectionWidth: width - 6,
+    padding: "  ",
   };
 }
 
-function palette(colorEnabled) {
-  return colorEnabled ? COLORS : MONOCHROME;
+function style(value, tones, colorEnabled) {
+  const text = String(value);
+  if (!colorEnabled || !tones?.length) return text;
+  const prefix = tones.map((tone) => ANSI[tone] ?? "").join("");
+  return prefix ? `${prefix}${text}${ANSI.reset}` : text;
 }
 
-function record(value) {
-  return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+function tone(value, colorName, colorEnabled, bold = false) {
+  return style(value, [bold ? "bold" : null, colorName].filter(Boolean), colorEnabled);
 }
 
-function clamp(value, minimum, maximum) {
-  return Math.min(maximum, Math.max(minimum, value));
+function visibleLength(value) {
+  return String(value).replace(/\u001b\[[0-9;?]*[A-Za-z]/g, "").length;
 }
 
-function frameKey(response, view) {
-  const frame = record(response.current_market_frame);
-  return JSON.stringify({
-    sourceTime: view.frameSourceTime,
-    tapeId: frame.tape_id ?? frame.tapeId ?? null,
-    last: view.last,
-    status: view.status,
-  });
+function alignCell(cell, width) {
+  const padding = " ".repeat(Math.max(0, width - visibleLength(cell.content)));
+  return cell.hAlign === "right" ? `${padding}${cell.content}` : `${cell.content}${padding}`;
+}
+
+function tableValue(value, colorName, colorEnabled, { bold = false, hAlign = "left" } = {}) {
+  return { content: tone(value, colorName, colorEnabled, bold), hAlign };
+}
+
+function tableColumnWidths(rows) {
+  return rows[0].map((_, columnIndex) => Math.max(
+    ...rows.map((row) => visibleLength(row[columnIndex]?.content ?? "")),
+  ) + 2);
+}
+
+function renderTable(rows, colWidths, colorEnabled, { divider = true } = {}) {
+  const lines = rows.map((row) => row.map((cell, index) => alignCell(cell, colWidths[index])).join("").trimEnd());
+  if (!divider) return lines;
+  const dividerLine = tone("─".repeat(Math.max(1, colWidths.reduce((total, width) => total + width, 0))), "inactive", colorEnabled);
+  return [lines[0], dividerLine, ...lines.slice(1)];
 }
 
 function numberLabel(value, digits = 2) {
@@ -108,14 +110,11 @@ function signedPercent(value) {
 }
 
 function absolutePercent(value) {
-  return typeof value === "number" && Number.isFinite(value)
-    ? `${Math.abs(value).toFixed(2)}%`
-    : null;
+  return typeof value === "number" && Number.isFinite(value) ? `${Math.abs(value).toFixed(2)}%` : null;
 }
 
 function marketVolumeLabel(value) {
-  if (typeof value !== "number" || !Number.isFinite(value)) return "—";
-  return `${value.toFixed(2)}x`;
+  return typeof value === "number" && Number.isFinite(value) ? `${value.toFixed(2)}x` : "—";
 }
 
 function metricTone(value) {
@@ -123,47 +122,12 @@ function metricTone(value) {
   return value > 0 ? "green" : "red";
 }
 
-function tableContent(value, tone, colorEnabled, bold = false) {
-  const text = String(value);
-  const code = ANSI_CODES[tone];
-  return colorEnabled && code
-    ? `${bold ? "\u001b[1m" : ""}\u001b[${code}m${text}\u001b[39m${bold ? "\u001b[22m" : ""}`
-    : text;
-}
-
-function tableValue(value, tone, colorEnabled, { bold = false, hAlign = "left" } = {}) {
-  const content = tableContent(value, tone, colorEnabled, bold);
-  return { content, hAlign };
-}
-
-function visibleLength(value) {
-  return String(value).replace(/\u001b\[[0-9;?]*[A-Za-z]/g, "").length;
-}
-
-function renderTable(rows, colWidths, colorEnabled, { divider = true } = {}) {
-  const table = new Table({ chars: tableChars(), style: TABLE_STYLE, colWidths });
-  table.push(...rows);
-  const lines = table.toString().split("\n").map((line) => line.trimEnd());
-  if (!divider) return lines.join("\n");
-  const dividerLine = "─".repeat(Math.max(1, colWidths.reduce((total, width) => total + width, 0)));
-  const coloredDivider = colorEnabled
-    ? `${ansiForeground(LEROY_COLORS.inactive)}${dividerLine}\u001b[39m`
-    : dividerLine;
-  return [lines[0], coloredDivider, ...lines.slice(1)].join("\n");
-}
-
-function tableColumnWidths(rows) {
-  return rows[0].map((_, columnIndex) => Math.max(
-    ...rows.map((row) => visibleLength(row[columnIndex]?.content ?? "")),
-  ) + 2);
-}
-
 function hasMarketMetrics(setup) {
   return [setup?.sessionReturnPct, setup?.volumeRatio, setup?.vwapDistancePct, setup?.atrPct]
     .some((value) => typeof value === "number" && Number.isFinite(value));
 }
 
-function MarketSetupTable({ symbol, setup, market, colorEnabled }) {
+function renderMarketSetupTable({ symbol, setup, market, colorEnabled }) {
   const columns = [
     { symbol, setup },
     ...(hasMarketMetrics(market) ? [{ symbol: market.symbol, setup: market }] : []),
@@ -200,15 +164,7 @@ function MarketSetupTable({ symbol, setup, market, colorEnabled }) {
       ...columns.map((column) => tableValue(absolutePercent(column.setup.atrPct) ?? "—", "white", colorEnabled, { bold: true })),
     ],
   ];
-  return React.createElement(Box, { flexDirection: "column", width: "100%" },
-    React.createElement(Text, null, renderTable(rows, tableColumnWidths(rows), colorEnabled)),
-  );
-}
-
-function strategyLabel(text, tone, alignment, width) {
-  return React.createElement(Box, { key: text, width: `${100 / width}%`, justifyContent: alignment },
-    React.createElement(Text, { color: tone }, text),
-  );
+  return renderTable(rows, tableColumnWidths(rows), colorEnabled);
 }
 
 function proportionalSignalCells(segments, total) {
@@ -232,59 +188,50 @@ function proportionalSignalCells(segments, total) {
   return allocations.flatMap((segment) => Array.from({ length: segment.count }, () => segment.key));
 }
 
-function StrategyMix({ strategy, colorEnabled }) {
-  const colors = palette(colorEnabled);
+function alignedLabel(text, alignment, width) {
+  const space = Math.max(0, width - visibleLength(text));
+  if (alignment === "right") return `${" ".repeat(space)}${text}`;
+  if (alignment === "center") {
+    const left = Math.floor(space / 2);
+    return `${" ".repeat(left)}${text}${" ".repeat(space - left)}`;
+  }
+  return `${text}${" ".repeat(space)}`;
+}
+
+function renderStrategyMix(strategy, colorEnabled) {
   const neutralCount = strategy.counts.neutral + strategy.counts.warming;
   const segments = [
-    { key: "buy", count: strategy.counts.buy, tone: colors.green },
-    { key: "neutral", count: neutralCount, tone: colors.neutral },
-    { key: "sell", count: strategy.counts.sell, tone: colors.red },
+    { key: "buy", count: strategy.counts.buy, colorName: "green" },
+    { key: "neutral", count: neutralCount, colorName: "neutral" },
+    { key: "sell", count: strategy.counts.sell, colorName: "red" },
   ];
   const total = segments.reduce((sum, segment) => sum + segment.count, 0);
-  const stateList = proportionalSignalCells(segments, total);
-  const toneByState = Object.fromEntries(segments.map((segment) => [segment.key, segment.tone]));
-  const paddedStates = [
-    ...stateList,
-    ...Array.from({ length: STRATEGY_CELL_COUNT - stateList.length }, () => null),
-  ];
+  const toneByState = Object.fromEntries(segments.map((segment) => [segment.key, segment.colorName]));
+  const activeStates = proportionalSignalCells(segments, total);
+  const states = [
+    ...activeStates,
+    ...Array.from({ length: STRATEGY_CELL_COUNT - activeStates.length }, () => null),
+  ].slice(0, STRATEGY_CELL_COUNT);
+  const cells = states.map((state, index) => `${tone(
+    strengthCellGlyph(Boolean(state), colorEnabled),
+    state ? toneByState[state] ?? "neutral" : "inactive",
+    colorEnabled,
+  )}${index < states.length - 1 ? " " : ""}`).join("");
   const rowWidth = STRATEGY_CELL_COUNT * 2 + STRATEGY_CELL_COUNT - 1;
-  const strategyRow = React.createElement(Text, {
-    width: rowWidth,
-  }, paddedStates.map((state, cellIndex) => React.createElement(Text, {
-      key: `strategy-cell-${cellIndex}`,
-      color: state ? toneByState[state] ?? colors.neutral : colors.inactive,
-    }, `${strengthCellGlyph(Boolean(state), colorEnabled)}${cellIndex < paddedStates.length - 1 ? " " : ""}`)));
   const labels = segments.map((segment) => `${segment.key[0].toUpperCase()}${segment.key.slice(1)} ${segment.count}`);
-
-  return React.createElement(Box, { flexDirection: "column" },
-    strategyRow,
-    React.createElement(Box, { flexDirection: "row", width: rowWidth + 1, marginTop: 1 },
-      labels.map((label, index) => strategyLabel(
-        label,
-        segments[index].tone,
-        index === 0 ? "flex-start" : index === labels.length - 1 ? "flex-end" : "center",
-        segments.length,
-      )),
-    ),
-  );
-}
-
-function StatusLine({ icon, iconColor, textColor, children, marginTop = 0 }) {
-  return React.createElement(Box, { flexDirection: "row", marginTop },
-    React.createElement(Box, { width: 3 },
-      React.createElement(Text, { color: iconColor, bold: true }, icon),
-    ),
-    React.createElement(Text, { color: textColor }, children),
-  );
+  const labelWidth = (rowWidth + 1) / labels.length;
+  const labelLine = labels.map((label, index) => tone(
+    alignedLabel(label, index === 0 ? "left" : index === labels.length - 1 ? "right" : "center", labelWidth),
+    segments[index].colorName,
+    colorEnabled,
+  )).join("");
+  return [cells, "", labelLine];
 }
 
-function OutcomeTable({ outcomes, colorEnabled }) {
-  const colors = palette(colorEnabled);
+function renderOutcomeTable(outcomes, colorEnabled) {
   const hasHistoricalOutcomes = outcomes.some((outcome) => [outcome.mean, outcome.winRate, outcome.liftBps]
     .some((value) => typeof value === "number" && Number.isFinite(value)));
-  if (!hasHistoricalOutcomes) {
-    return React.createElement(Text, { color: colors.content }, "No historical outcomes available.");
-  }
+  if (!hasHistoricalOutcomes) return [tone("No historical outcomes available.", "neutral", colorEnabled)];
   const rows = [
     [
       tableValue("Timeframe", "muted", colorEnabled, { bold: true }),
@@ -303,44 +250,13 @@ function OutcomeTable({ outcomes, colorEnabled }) {
       ...outcomes.map((outcome) => tableValue(bpsLabel(outcome.liftBps), metricTone(outcome.liftBps), colorEnabled, { bold: true, hAlign: "right" })),
     ],
   ];
-  return React.createElement(Box, { flexDirection: "column" },
-    React.createElement(Text, null, renderTable(rows, tableColumnWidths(rows), colorEnabled)),
-  );
+  return renderTable(rows, tableColumnWidths(rows), colorEnabled);
 }
 
-function sideTone(side, colors) {
-  if (side === "buy") return colors.green;
-  if (side === "sell") return colors.red;
-  return colors.white;
-}
-
-function SectionHeading({ label, meta, colors, width = "100%" }) {
-  return React.createElement(Box, {
-    flexDirection: "row",
-    width,
-    justifyContent: "space-between",
-  },
-    React.createElement(Box, { flexDirection: "row", flexGrow: 1 },
-      React.createElement(Box, { width: 2 },
-        React.createElement(Text, { color: colors.green, bold: true }, "▲"),
-      ),
-      React.createElement(Text, { color: colors.white, bold: true }, label),
-    ),
-    meta ? React.createElement(Text, { color: colors.white, bold: true }, meta) : null,
-  );
-}
-
-function SectionBody({ children, colors, paddingLeft = 1 }) {
-  return React.createElement(Box, {
-    flexDirection: "column",
-    width: "100%",
-    borderStyle: "single",
-    borderColor: colors.border,
-    borderTop: false,
-    borderBottom: false,
-    borderRight: false,
-    paddingLeft,
-  }, children);
+function sideTone(side) {
+  if (side === "buy") return "green";
+  if (side === "sell") return "red";
+  return "white";
 }
 
 function fallbackMarketSessionStatus(value = new Date()) {
@@ -363,293 +279,335 @@ function fallbackMarketSessionStatus(value = new Date()) {
     : "closed";
 }
 
-function RailSpacer({ colors }) {
-  return React.createElement(Box, {
-    height: 1,
-    width: "100%",
-    borderStyle: "single",
-    borderColor: colors.border,
-    borderTop: false,
-    borderBottom: false,
-    borderRight: false,
-  });
+function fitColumns(left, right, width) {
+  if (!right) return left;
+  return `${left}${" ".repeat(Math.max(1, width - visibleLength(left) - visibleLength(right)))}${right}`;
 }
 
-function QueryHeader({ view, colors }) {
+function renderQueryHeader(view, colorEnabled, layout) {
   const side = typeof view.side === "string" ? view.side.toUpperCase() : "MARKET";
   const marketSessionStatus = view.marketSessionStatus ?? fallbackMarketSessionStatus();
   const marketIsOpen = marketSessionStatus === "open";
-  const timestamp = [view.frameDate, view.frameTime]
-    .filter((value) => value && value !== "—")
-    .join(" · ") || "—";
-  return React.createElement(Box, {
-    flexDirection: "column",
-    width: "100%",
-    marginTop: 1,
-  },
-    React.createElement(Box, { flexDirection: "row", width: "100%", paddingRight: 2, justifyContent: "space-between" },
-      React.createElement(Text, { color: colors.white },
-        React.createElement(Text, { color: sideTone(view.side, colors), bold: true }, side),
-        " · ",
-        React.createElement(Text, { color: colors.white, bold: true }, view.symbol),
-        " @ ",
-        view.last,
-      ),
-      React.createElement(Text, { color: colors.muted }, timestamp),
-    ),
-    React.createElement(Box, { flexDirection: "row", width: "100%", paddingRight: 2, justifyContent: "flex-end" },
-      React.createElement(Text, { color: marketIsOpen ? colors.green : colors.red, bold: true }, "●"),
-      React.createElement(Text, { color: colors.white, bold: true }, `  Market ${marketIsOpen ? "Open" : "Closed"}`),
-    ),
-  );
-}
-
-function HistoricalEvidence({ view, colorEnabled }) {
+  const timestamp = [view.frameDate, view.frameTime].filter((value) => value && value !== "—").join(" · ") || "—";
+  const left = `${tone(side, sideTone(view.side), colorEnabled, true)} · ${tone(view.symbol, "white", colorEnabled, true)} @ ${tone(view.last, "white", colorEnabled)}`;
+  const status = `${tone("●", marketIsOpen ? "green" : "red", colorEnabled, true)}${tone(`  Market ${marketIsOpen ? "Open" : "Closed"}`, "white", colorEnabled, true)}`;
+  return [
+    `${layout.padding}${fitColumns(left, tone(timestamp, "neutral", colorEnabled), layout.sectionWidth)}`,
+    `${layout.padding}${fitColumns("", status, layout.sectionWidth)}`,
+  ];
+}
+
+function renderSectionHeading(label, meta, colorEnabled, layout) {
+  const left = `${tone("▲", "green", colorEnabled, true)} ${tone(label, "white", colorEnabled, true)}`;
+  const right = meta ? tone(meta, "white", colorEnabled, true) : "";
+  return `${layout.padding}${fitColumns(left, right, layout.sectionWidth)}`;
+}
+
+function railLine(colorEnabled, layout) {
+  return `${layout.padding}${tone("│", "inactive", colorEnabled)}`;
+}
+
+function bodyLine(content, colorEnabled, layout) {
+  return `${layout.padding}${tone("│", "inactive", colorEnabled)} ${content}`;
+}
+
+function renderHistoricalEvidence(view, colorEnabled) {
   const sampleLabel = view.match.score === 5
     ? " exact observations"
     : view.match.score > 0
       ? " comparable observations"
       : " observations";
   const matchLabel = view.match.label === "No match" ? "No Match" : `${view.match.label} Match`;
-  const matchDetails = view.match.score > 0
-    ? `${view.match.rowCount}${sampleLabel}`
-    : "No comparable observations.";
+  const matchDetails = view.match.score > 0 ? `${view.match.rowCount}${sampleLabel}` : "No comparable observations.";
   const matchStrength = [
-    Array.from({ length: 5 }, (_, index) => tableContent(
+    Array.from({ length: 5 }, (_, index) => tone(
       strengthCellGlyph(index < view.match.score, colorEnabled),
       index < view.match.score ? "green" : "neutral",
       colorEnabled,
     )).join(" "),
-    tableContent(matchLabel, view.match.score > 0 ? "white" : "muted", colorEnabled, true),
+    tone(matchLabel, view.match.score > 0 ? "white" : "muted", colorEnabled, true),
   ].join("  ");
   const rows = [
-    [
-      tableValue("Match Strength", "muted", colorEnabled, { bold: true }),
-      { content: matchStrength, hAlign: "left" },
-    ],
-    [
-      tableValue("Match Details", "muted", colorEnabled, { bold: true }),
-      tableValue(matchDetails, "content", colorEnabled, { bold: true }),
-    ],
-    [
-      tableValue("Date Range", "muted", colorEnabled, { bold: true }),
-      tableValue(view.archiveWindow, "content", colorEnabled),
-    ],
+    [tableValue("Match Strength", "muted", colorEnabled, { bold: true }), { content: matchStrength, hAlign: "left" }],
+    [tableValue("Match Details", "muted", colorEnabled, { bold: true }), tableValue(matchDetails, "neutral", colorEnabled, { bold: true })],
+    [tableValue("Date Range", "muted", colorEnabled, { bold: true }), tableValue(view.archiveWindow, "neutral", colorEnabled)],
   ];
-  return React.createElement(Text, null, renderTable(rows, tableColumnWidths(rows), colorEnabled, { divider: false }));
+  return renderTable(rows, tableColumnWidths(rows), colorEnabled, { divider: false });
 }
 
-function LoadingSteps({ columns, colorEnabled, symbol, progress, error, paddingX = 2, terminalWidth }) {
-  const colors = palette(colorEnabled);
-  const width = terminalWidth ?? clamp(columns - 4, MIN_CARD_WIDTH, MAX_CARD_WIDTH);
-  const [spinnerIndex, setSpinnerIndex] = useState(0);
-
-  useEffect(() => {
-    if (progress.completed >= 4) return undefined;
-    const timer = setInterval(() => {
-      setSpinnerIndex((current) => (current + 1) % SPINNER_FRAMES.length);
-    }, 90);
-    return () => clearInterval(timer);
-  }, [colorEnabled, progress.completed]);
-
-  const steps = [
+function loadingLabels(symbol, durationMs) {
+  return [
     `Loading live market data for ${String(symbol).toUpperCase()}.`,
     `Running ${STRATEGY_COUNT} strategy evaluations.`,
     "Checking for historical matches.",
-    progress.durationMs === null ? "Finishing…" : `Finished in ${progress.durationMs}ms.`,
+    durationMs === null ? "Finishing…" : `Finished in ${durationMs}ms.`,
   ];
+}
 
-  return React.createElement(Box, {
-    flexDirection: "column",
-    width,
-    paddingX,
-  }, steps.map((label, index) => {
+export function renderLoadingSteps({ symbol, progress = { completed: 0, durationMs: null }, error = null, spinnerIndex = 0, colorEnabled = true, columns = 80 }) {
+  const layout = layoutFor(columns);
+  const labels = loadingLabels(symbol, progress.durationMs);
+  return ["", ...labels.map((label, index) => {
     const isDone = index < progress.completed;
-    const isActive = index === progress.completed && progress.completed < steps.length;
+    const isActive = index === progress.completed && progress.completed < labels.length;
     const isFailed = Boolean(error) && isActive;
-    return React.createElement(StatusLine, {
-      key: label,
-      icon: isFailed ? "!" : isDone ? "✓" : isActive ? SPINNER_FRAMES[spinnerIndex] : "·",
-      iconColor: isFailed ? colors.red : isDone ? colors.green : isActive ? colors.white : colors.muted,
-      textColor: isDone ? colors.white : isFailed ? colors.white : colors.muted,
-      marginTop: index === 0 ? 1 : 0,
-    }, isFailed ? `${label} ${error}` : label);
-  }),
-  );
-}
-
-function EvidenceView({ response, colorEnabled, columns, phase, updatedAt, error, progress }) {
-  const colors = palette(colorEnabled);
+    const icon = isFailed ? "!" : isDone ? "✓" : isActive ? SPINNER_FRAMES[spinnerIndex % SPINNER_FRAMES.length] : "·";
+    const iconColor = isFailed ? "red" : isDone ? "green" : isActive ? "white" : "muted";
+    const textColor = isDone || isFailed ? "white" : "muted";
+    const text = isFailed ? `${label} ${error}` : label;
+    return `${layout.padding}${tone(icon, iconColor, colorEnabled, true)}  ${tone(text, textColor, colorEnabled)}`;
+  })].join("\n");
+}
+
+export function renderEvidenceView(response, { colorEnabled = true, columns = 80, phase = "live", updatedAt = null, error = null, progress = { completed: 4, durationMs: null } } = {}) {
+  const layout = layoutFor(columns);
   const view = buildEvaluationViewModel(response);
-  const width = clamp(columns - 4, MIN_CARD_WIDTH, MAX_CARD_WIDTH);
-  const sectionWidth = Math.max(1, width - 6);
   const updatedText = updatedAt
     ? new Date(updatedAt).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })
     : "—";
-  const liveTone = phase === "error" ? colors.red : phase === "checking" ? "yellow" : colors.green;
+  const liveTone = phase === "error" ? "red" : phase === "checking" ? "yellow" : "green";
   if (view.status === "artifact_unavailable") {
-    return React.createElement(Box, {
-      flexDirection: "column",
-      width,
-      paddingX: 2,
+    const lines = ["", ""];
+    lines.push(`${layout.padding}${tone("!", liveTone, colorEnabled, true)}  ${tone("Market Memory unavailable", "white", colorEnabled)}`);
+    lines.push("");
+    lines.push(`${layout.padding}${tone("The private evidence reader is unavailable. Retrying on the next tape check.", "neutral", colorEnabled)}`);
+    lines.push("");
+    lines.push(`${layout.padding}${tone(`updated ${updatedText} · q/esc to exit`, "neutral", colorEnabled)}`);
+    if (error) {
+      lines.push("");
+      lines.push(`${layout.padding}${tone("!", "red", colorEnabled, true)}  ${tone(error, "white", colorEnabled)}`);
+    }
+    return lines.join("\n");
+  }
+
+  const lines = renderLoadingSteps({
+    symbol: view.symbol,
+    progress,
+    colorEnabled,
+    columns,
+  }).split("\n");
+  lines.push("");
+  lines.push(...renderQueryHeader(view, colorEnabled, layout));
+  lines.push("");
+
+  lines.push(renderSectionHeading("Strategy Signals", `${view.strategy.total} Evaluated`, colorEnabled, layout));
+  lines.push(railLine(colorEnabled, layout));
+  lines.push(...renderStrategyMix(view.strategy, colorEnabled).map((line) => bodyLine(line, colorEnabled, layout)));
+  lines.push(railLine(colorEnabled, layout));
+
+  lines.push(renderSectionHeading("Market Context", null, colorEnabled, layout));
+  lines.push(railLine(colorEnabled, layout));
+  lines.push(...renderMarketSetupTable({
+    symbol: view.symbol,
+    setup: view.marketSetup,
+    market: view.marketOverview,
+    colorEnabled,
+  }).map((line) => bodyLine(line, colorEnabled, layout)));
+  lines.push(railLine(colorEnabled, layout));
+
+  lines.push(renderSectionHeading("Historical Evidence", null, colorEnabled, layout));
+  lines.push(railLine(colorEnabled, layout));
+  lines.push(...renderHistoricalEvidence(view, colorEnabled).map((line) => bodyLine(line, colorEnabled, layout)));
+  lines.push(railLine(colorEnabled, layout));
+
+  lines.push(renderSectionHeading("Observed Outcomes", null, colorEnabled, layout));
+  lines.push(railLine(colorEnabled, layout));
+  lines.push(...renderOutcomeTable(view.outcomes, colorEnabled).map((line) => bodyLine(line, colorEnabled, layout)));
+  if (error) {
+    lines.push("");
+    lines.push(`${layout.padding}${tone("!", "red", colorEnabled, true)}  ${tone(error, "white", colorEnabled)}`);
+  }
+  lines.push("", "");
+  return lines.join("\n");
+}
+
+function frameKey(response, view) {
+  const frame = record(response.current_market_frame);
+  return JSON.stringify({
+    sourceTime: view.frameSourceTime,
+    tapeId: frame.tape_id ?? frame.tapeId ?? null,
+    last: view.last,
+    status: view.status,
+  });
+}
+
+function createExitController() {
+  let stopped = false;
+  const listeners = new Set();
+  return {
+    get stopped() {
+      return stopped;
+    },
+    stop() {
+      if (stopped) return;
+      stopped = true;
+      for (const listener of listeners) listener();
+      listeners.clear();
+    },
+    wait(milliseconds) {
+      if (stopped) return Promise.resolve(true);
+      return new Promise((resolve) => {
+        const onStop = () => {
+          clearTimeout(timer);
+          resolve(true);
+        };
+        const timer = setTimeout(() => {
+          listeners.delete(onStop);
+          resolve(false);
+        }, milliseconds);
+        listeners.add(onStop);
+      });
     },
-      React.createElement(StatusLine, { icon: "!", iconColor: liveTone, textColor: colors.white, marginTop: 2 }, "Market Memory unavailable"),
-      React.createElement(Text, { color: colors.muted, marginTop: 1 }, "The private evidence reader is unavailable. Retrying on the next tape check."),
-      React.createElement(Text, { color: colors.muted, marginTop: 1 }, `updated ${updatedText} · q/esc to exit`),
-      error ? React.createElement(StatusLine, { icon: "!", iconColor: colors.red, textColor: colors.white, marginTop: 1 }, error) : null,
-    );
+  };
+}
+
+class NativeTerminalRenderer {
+  constructor(output) {
+    this.output = output;
+    this.lineCount = 0;
+    this.started = false;
   }
 
-  return React.createElement(Box, {
-    flexDirection: "column",
-    width,
-    paddingX: 2,
-  },
-    React.createElement(LoadingSteps, {
-      columns,
-      colorEnabled,
-      symbol: view.symbol,
-      progress,
-      error: null,
-      paddingX: 0,
-      terminalWidth: Math.max(1, width - 4),
-    }),
-    React.createElement(QueryHeader, { view, colors }),
-    React.createElement(Box, { flexDirection: "column", marginTop: 1 },
-      React.createElement(SectionHeading, {
-        label: "Strategy Signals",
-        meta: `${view.strategy.total} Evaluated`,
-        colors,
-        width: sectionWidth,
-      }),
-      React.createElement(RailSpacer, { colors }),
-      React.createElement(SectionBody, { colors },
-        React.createElement(StrategyMix, {
-          strategy: view.strategy,
-          colorEnabled,
-        }),
-      ),
-    ),
-    React.createElement(RailSpacer, { colors }),
-    React.createElement(Box, { flexDirection: "column" },
-      React.createElement(SectionHeading, { label: "Market Context", colors, width: sectionWidth }),
-      React.createElement(RailSpacer, { colors }),
-      React.createElement(SectionBody, { colors },
-        React.createElement(MarketSetupTable, {
-          symbol: view.symbol,
-          setup: view.marketSetup,
-          market: view.marketOverview,
-          colorEnabled,
-        }),
-      ),
-    ),
-    React.createElement(RailSpacer, { colors }),
-    React.createElement(Box, { flexDirection: "column" },
-      React.createElement(SectionHeading, { label: "Historical Evidence", colors, width: sectionWidth }),
-      React.createElement(RailSpacer, { colors }),
-      React.createElement(SectionBody, { colors },
-        React.createElement(HistoricalEvidence, { view, colorEnabled }),
-      ),
-    ),
-    React.createElement(RailSpacer, { colors }),
-    React.createElement(Box, { flexDirection: "column" },
-      React.createElement(SectionHeading, { label: "Observed Outcomes", colors, width: sectionWidth }),
-      React.createElement(RailSpacer, { colors }),
-      React.createElement(SectionBody, { colors },
-        React.createElement(OutcomeTable, {
-          outcomes: view.outcomes,
-          colorEnabled,
-        }),
-      ),
-    ),
-    error ? React.createElement(StatusLine, { icon: "!", iconColor: colors.red, textColor: colors.white, marginTop: 1 }, error) : null,
-    React.createElement(Box, { height: 2 }),
-  );
+  draw(frame) {
+    if (!this.output.isTTY) {
+      this.output.write(`${frame}\n`);
+      return;
+    }
+    if (!this.started) {
+      this.output.write(ANSI.hideCursor);
+      this.started = true;
+    }
+    if (this.lineCount > 0) this.output.write(`\u001b[${this.lineCount}F`);
+    this.output.write("\u001b[J");
+    this.output.write(`${frame}\n`);
+    const columns = terminalColumns(this.output);
+    this.lineCount = frame.split("\n").reduce((total, line) => (
+      total + Math.max(1, Math.ceil(visibleLength(line) / columns))
+    ), 0);
+  }
+
+  finish() {
+    if (this.started) this.output.write(ANSI.showCursor);
+  }
 }
 
-export function LiveEvidenceApp({ client, request, colorEnabled = true, intervalMs = 60_000, polling = true }) {
-  const { columns = 80 } = useWindowSize();
-  const { exit } = useApp();
-  const [state, setState] = useState({ response: null, phase: "connecting", updatedAt: null, frameKey: null, updateCount: 0, error: null, progress: { completed: 0, durationMs: null } });
+function attachExitKeys(input, controller) {
+  if (!input.isTTY || typeof input.on !== "function") return () => {};
+  const canSetRawMode = typeof input.setRawMode === "function";
+  const wasRaw = Boolean(input.isRaw);
+  const onData = (chunk) => {
+    const key = String(chunk);
+    if (key === "\u0003" || key === "\u001b" || key.toLowerCase() === "q") controller.stop();
+  };
+  if (canSetRawMode) input.setRawMode(true);
+  input.resume();
+  input.on("data", onData);
+  return () => {
+    input.off("data", onData);
+    if (canSetRawMode) input.setRawMode(wasRaw);
+    if (typeof input.pause === "function") input.pause();
+  };
+}
 
-  useInput((input, key) => {
-    if (input.toLowerCase() === "q" || key.escape) exit();
-  });
+async function loadEvidence({ client, request, response, renderer, colorEnabled, columns, controller }) {
+  const startedAt = Date.now();
+  let spinnerIndex = 0;
+  let progress = { completed: response ? 4 : 0, durationMs: response ? 0 : null };
+  if (!response) renderer.draw(renderLoadingSteps({ symbol: request.symbol, progress, spinnerIndex, colorEnabled, columns }));
+
+  const evaluation = Promise.resolve()
+    .then(() => client.evaluate(request))
+    .then((nextResponse) => ({ kind: "response", response: nextResponse }))
+    .catch((error) => ({ kind: "error", error }));
+
+  let result;
+  while (!controller.stopped && !result) {
+    result = await Promise.race([
+      evaluation,
+      controller.wait(90).then((stopped) => stopped ? { kind: "stopped" } : { kind: "tick" }),
+    ]);
+    if (result.kind === "tick") {
+      spinnerIndex = (spinnerIndex + 1) % SPINNER_FRAMES.length;
+      if (!response) renderer.draw(renderLoadingSteps({ symbol: request.symbol, progress, spinnerIndex, colorEnabled, columns }));
+      result = null;
+    }
+  }
+  if (controller.stopped || result?.kind === "stopped") return { stopped: true };
+  if (result.kind === "error") {
+    const message = result.error instanceof Error ? result.error.message : String(result.error);
+    if (response) {
+      renderer.draw(renderEvidenceView(response, { colorEnabled, columns, phase: "error", error: message, progress }));
+    } else {
+      renderer.draw(renderLoadingSteps({ symbol: request.symbol, progress: { completed: 0, durationMs: null }, error: message, spinnerIndex, colorEnabled, columns }));
+    }
+    return { error: message };
+  }
 
-  useEffect(() => {
-    let active = true;
-    let busy = false;
-    const refresh = async () => {
-      if (!active || busy) return;
-      busy = true;
-      const startedAt = Date.now();
-      setState((current) => ({ ...current, phase: current.response ? "checking" : "connecting", error: null }));
-      try {
-        const response = await client.evaluate(request);
-        if (!active) return;
+  const durationMs = Date.now() - startedAt;
+  for (let completed = 1; completed <= 4; completed += 1) {
+    progress = { completed, durationMs: completed === 4 ? durationMs : progress.durationMs };
+    if (response) {
+      renderer.draw(renderEvidenceView(response, { colorEnabled, columns, phase: "checking", progress }));
+    } else {
+      renderer.draw(renderLoadingSteps({ symbol: request.symbol, progress, spinnerIndex, colorEnabled, columns }));
+    }
+    if (completed < 4 && await controller.wait(LOADING_STEP_DELAY_MS)) return { stopped: true };
+  }
+  if (await controller.wait(LOADING_STEP_DELAY_MS)) return { stopped: true };
+  return { response: result.response, durationMs, progress };
+}
+
+export async function renderLiveEvidence({
+  client,
+  request,
+  colorEnabled = true,
+  intervalMs = 60_000,
+  polling = true,
+  input = processInput,
+  output = processOutput,
+} = {}) {
+  const renderer = new NativeTerminalRenderer(output);
+  const controller = createExitController();
+  const detachKeys = attachExitKeys(input, controller);
+  let response = null;
+  let updatedAt = null;
+  let currentFrameKey = null;
+  let progress = { completed: 0, durationMs: null };
+  try {
+    do {
+      const loaded = await loadEvidence({
+        client,
+        request,
+        response,
+        renderer,
+        colorEnabled,
+        columns: terminalColumns(output),
+        controller,
+      });
+      if (loaded.stopped) break;
+      if (loaded.response) {
+        response = loaded.response;
+        progress = loaded.progress;
         const view = buildEvaluationViewModel(response);
-        const nextKey = frameKey(response, view);
-        const durationMs = Date.now() - startedAt;
-        for (let completed = 1; completed <= 4; completed += 1) {
-          if (!active) return;
-          setState((current) => ({
-            ...current,
-            progress: { completed, durationMs: completed === 4 ? durationMs : current.progress.durationMs },
-          }));
-          if (completed < 4) await new Promise((resolve) => setTimeout(resolve, LOADING_STEP_DELAY_MS));
-        }
-        if (!active) return;
-        await new Promise((resolve) => setTimeout(resolve, LOADING_STEP_DELAY_MS));
-        if (!active) return;
-        setState((current) => ({
-          response,
+        const nextFrameKey = frameKey(response, view);
+        updatedAt = currentFrameKey === nextFrameKey ? updatedAt : Date.now();
+        currentFrameKey = nextFrameKey;
+        renderer.draw(renderEvidenceView(response, {
+          colorEnabled,
+          columns: terminalColumns(output),
           phase: "live",
-          updatedAt: current.frameKey === nextKey ? current.updatedAt : Date.now(),
-          frameKey: nextKey,
-          updateCount: current.frameKey === nextKey ? current.updateCount : current.updateCount + 1,
-          error: null,
-          progress: { completed: 4, durationMs },
+          updatedAt,
+          progress,
         }));
-      } catch (error) {
-        if (!active) return;
-        setState((current) => ({ ...current, phase: "error", updatedAt: Date.now(), error: error instanceof Error ? error.message : String(error) }));
-      } finally {
-        busy = false;
       }
-    };
-    void refresh();
-    const timer = polling ? setInterval(() => { void refresh(); }, intervalMs) : null;
-    return () => {
-      active = false;
-      if (timer) clearInterval(timer);
-    };
-  }, [client, intervalMs, polling, request]);
-
-  useEffect(() => {
-    if (polling || !state.response) return undefined;
-    const timer = setTimeout(() => exit(), 120);
-    return () => clearTimeout(timer);
-  }, [exit, polling, state.response]);
-
-  if (!state.response) {
-    return React.createElement(LoadingSteps, {
-      columns,
-      colorEnabled,
-      symbol: request.symbol,
-      progress: state.progress,
-      error: state.error,
-    });
+      if (!polling) {
+        await controller.wait(120);
+        break;
+      }
+      if (await controller.wait(intervalMs)) break;
+    } while (!controller.stopped);
+  } finally {
+    detachKeys();
+    renderer.finish();
   }
-
-  return React.createElement(EvidenceView, {
-    response: state.response,
-    colorEnabled,
-    columns,
-    phase: state.phase,
-    updatedAt: state.updatedAt,
-    error: state.error,
-    progress: state.progress,
-  });
 }
-
-export { render };