@leroylabs/cli 0.1.2 → 0.1.4

package/src/live-ui.mjs

@@ -0,0 +1,655 @@
+import React, { useEffect, useState } from "react";
+import Table from "cli-table3";
+import { Box, Text, render, useApp, useInput, useWindowSize } from "ink";
+
+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`,
+};
+
+function tableChars() {
+  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: "",
+  };
+}
+
+function palette(colorEnabled) {
+  return colorEnabled ? COLORS : MONOCHROME;
+}
+
+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 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 numberLabel(value, digits = 2) {
+  return typeof value === "number" && Number.isFinite(value)
+    ? `${value > 0 ? "+" : value < 0 ? "−" : ""}${Math.abs(value).toFixed(digits)}%`
+    : "—";
+}
+
+function rateLabel(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "—";
+  return `${(value > 1 ? value : value * 100).toFixed(0)}%`;
+}
+
+function bpsLabel(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return "—";
+  return `${value > 0 ? "+" : value < 0 ? "−" : ""}${Math.abs(value).toFixed(2)}`;
+}
+
+function strengthCellGlyph(active, colorEnabled) {
+  return colorEnabled ? "██" : active ? "■■" : "□□";
+}
+
+function signedPercent(value) {
+  return typeof value === "number" && Number.isFinite(value)
+    ? `${value > 0 ? "+" : value < 0 ? "−" : ""}${Math.abs(value).toFixed(2)}%`
+    : null;
+}
+
+function absolutePercent(value) {
+  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`;
+}
+
+function metricTone(value) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value === 0) return "white";
+  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 }) {
+  const columns = [
+    { symbol, setup },
+    ...(hasMarketMetrics(market) ? [{ symbol: market.symbol, setup: market }] : []),
+  ];
+  const rows = [
+    [
+      tableValue("", null, colorEnabled),
+      ...columns.map((column) => tableValue(column.symbol, "muted", colorEnabled, { bold: true })),
+    ],
+    [
+      tableValue("Session", "muted", colorEnabled, { bold: true }),
+      ...columns.map((column) => tableValue(
+        signedPercent(column.setup.sessionReturnPct) ?? "—",
+        metricTone(column.setup.sessionReturnPct),
+        colorEnabled,
+        { bold: true },
+      )),
+    ],
+    [
+      tableValue("Volume", "muted", colorEnabled, { bold: true }),
+      ...columns.map((column) => tableValue(marketVolumeLabel(column.setup.volumeRatio), "white", colorEnabled, { bold: true })),
+    ],
+    [
+      tableValue("VWAP", "muted", colorEnabled, { bold: true }),
+      ...columns.map((column) => tableValue(
+        signedPercent(column.setup.vwapDistancePct) ?? "—",
+        metricTone(column.setup.vwapDistancePct),
+        colorEnabled,
+        { bold: true },
+      )),
+    ],
+    [
+      tableValue("Typical Range", "muted", colorEnabled, { bold: true }),
+      ...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),
+  );
+}
+
+function proportionalSignalCells(segments, total) {
+  if (total <= 0) return [];
+  const allocations = segments.map((segment) => {
+    const exact = (segment.count / total) * STRATEGY_CELL_COUNT;
+    return { ...segment, exact, count: Math.floor(exact) };
+  });
+  for (const segment of allocations) {
+    if (segment.count === 0 && segment.exact > 0) segment.count = 1;
+  }
+  let remaining = STRATEGY_CELL_COUNT - allocations.reduce((sum, segment) => sum + segment.count, 0);
+  while (remaining > 0) {
+    const segment = allocations.reduce((best, candidate) => {
+      if (!best) return candidate;
+      return candidate.exact - candidate.count > best.exact - best.count ? candidate : best;
+    }, null);
+    segment.count += 1;
+    remaining -= 1;
+  }
+  return allocations.flatMap((segment) => Array.from({ length: segment.count }, () => segment.key));
+}
+
+function StrategyMix({ strategy, colorEnabled }) {
+  const colors = palette(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 },
+  ];
+  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 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),
+  );
+}
+
+function OutcomeTable({ outcomes, colorEnabled }) {
+  const colors = palette(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.");
+  }
+  const rows = [
+    [
+      tableValue("Timeframe", "muted", colorEnabled, { bold: true }),
+      ...outcomes.map((outcome) => tableValue(`${outcome.horizon} Minutes`, "white", colorEnabled, { bold: true, hAlign: "right" })),
+    ],
+    [
+      tableValue("Avg. Return", "muted", colorEnabled, { bold: true }),
+      ...outcomes.map((outcome) => tableValue(numberLabel(outcome.mean), metricTone(outcome.mean), colorEnabled, { bold: true, hAlign: "right" })),
+    ],
+    [
+      tableValue("Win Rate", "muted", colorEnabled, { bold: true }),
+      ...outcomes.map((outcome) => tableValue(rateLabel(outcome.winRate), "white", colorEnabled, { bold: true, hAlign: "right" })),
+    ],
+    [
+      tableValue("Lift (BPS)", "muted", colorEnabled, { bold: true }),
+      ...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)),
+  );
+}
+
+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 fallbackMarketSessionStatus(value = new Date()) {
+  const dateParts = new Intl.DateTimeFormat("en-US", {
+    timeZone: "America/New_York",
+    weekday: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+    hourCycle: "h23",
+  }).formatToParts(value);
+  const weekday = dateParts.find((part) => part.type === "weekday")?.value;
+  const hour = Number(dateParts.find((part) => part.type === "hour")?.value ?? NaN);
+  const minute = Number(dateParts.find((part) => part.type === "minute")?.value ?? NaN);
+  const currentMinute = hour * 60 + minute;
+  return ["Mon", "Tue", "Wed", "Thu", "Fri"].includes(weekday)
+    && Number.isFinite(currentMinute)
+    && currentMinute >= 9 * 60 + 30
+    && currentMinute < 16 * 60
+    ? "open"
+    : "closed";
+}
+
+function RailSpacer({ colors }) {
+  return React.createElement(Box, {
+    height: 1,
+    width: "100%",
+    borderStyle: "single",
+    borderColor: colors.border,
+    borderTop: false,
+    borderBottom: false,
+    borderRight: false,
+  });
+}
+
+function QueryHeader({ view, colors }) {
+  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 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 matchStrength = [
+    Array.from({ length: 5 }, (_, index) => tableContent(
+      strengthCellGlyph(index < view.match.score, colorEnabled),
+      index < view.match.score ? "green" : "neutral",
+      colorEnabled,
+    )).join(" "),
+    tableContent(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),
+    ],
+  ];
+  return React.createElement(Text, null, 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 = [
+    `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.`,
+  ];
+
+  return React.createElement(Box, {
+    flexDirection: "column",
+    width,
+    paddingX,
+  }, steps.map((label, index) => {
+    const isDone = index < progress.completed;
+    const isActive = index === progress.completed && progress.completed < steps.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 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;
+  if (view.status === "artifact_unavailable") {
+    return React.createElement(Box, {
+      flexDirection: "column",
+      width,
+      paddingX: 2,
+    },
+      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,
+    );
+  }
+
+  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 }),
+  );
+}
+
+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 } });
+
+  useInput((input, key) => {
+    if (input.toLowerCase() === "q" || key.escape) exit();
+  });
+
+  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 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,
+          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 },
+        }));
+      } 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,
+    });
+  }
+
+  return React.createElement(EvidenceView, {
+    response: state.response,
+    colorEnabled,
+    columns,
+    phase: state.phase,
+    updatedAt: state.updatedAt,
+    error: state.error,
+    progress: state.progress,
+  });
+}
+
+export { render };