horizon-code 0.1.0

package/src/research/widgets.ts

@@ -0,0 +1,523 @@
+// CLI widgets for research tool results
+// Designed for wide terminals (100+ cols) — uses horizontal space aggressively
+
+import { BoxRenderable, TextRenderable, type CliRenderer } from "@opentui/core";
+import { COLORS } from "../theme/colors.ts";
+
+const SPARK = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+const BAR = "\u2588";
+
+let widgetCounter = 0;
+function uid(): string { return `w-${Date.now()}-${widgetCounter++}`; }
+
+function sparkline(values: number[], width: number): string {
+  if (values.length === 0) return "";
+  const sampled: number[] = [];
+  for (let i = 0; i < width; i++) {
+    const idx = Math.floor((i / width) * values.length);
+    sampled.push(values[idx] ?? 0);
+  }
+  const min = Math.min(...sampled);
+  const max = Math.max(...sampled);
+  const range = max - min || 1;
+  return sampled.map((v) => {
+    const idx = Math.min(Math.floor(((v - min) / range) * SPARK.length), SPARK.length - 1);
+    return SPARK[idx];
+  }).join("");
+}
+
+function pnlColor(val: number): string { return val >= 0 ? COLORS.success : COLORS.error; }
+
+function fmtPrice(p: number | string | null): string {
+  if (p === null || p === undefined) return "--";
+  const n = typeof p === "string" ? parseFloat(p) : p;
+  return isNaN(n) ? "--" : `${(n * 100).toFixed(0)}c`;
+}
+
+function fmtDollar(p: number | string | null): string {
+  if (p === null || p === undefined) return "--";
+  const n = typeof p === "string" ? parseFloat(p) : p;
+  return isNaN(n) ? "--" : `$${n.toFixed(2)}`;
+}
+
+function fmtVol(v: number): string {
+  if (v >= 1000000) return `$${(v / 1000000).toFixed(1)}M`;
+  if (v >= 1000) return `$${(v / 1000).toFixed(0)}k`;
+  return `$${v}`;
+}
+
+function fmtPct(v: number | null): string {
+  if (v === null || v === undefined) return "";
+  const pct = (v * 100).toFixed(1);
+  return v >= 0 ? `+${pct}%` : `${pct}%`;
+}
+
+// Two-column row: label (dimmed, left) + value (colored, right) on the same line
+function kv(parent: BoxRenderable, renderer: CliRenderer, label: string, value: string, color?: string, labelWidth = 12): void {
+  const row = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+  row.add(new TextRenderable(renderer, { id: uid(), content: label.padEnd(labelWidth), fg: COLORS.textMuted }));
+  row.add(new TextRenderable(renderer, { id: uid(), content: value, fg: color ?? COLORS.text }));
+  parent.add(row);
+}
+
+// Horizontal pair of KV blocks side by side
+function kvPair(parent: BoxRenderable, renderer: CliRenderer,
+  l1: string, v1: string, c1: string | undefined,
+  l2: string, v2: string, c2: string | undefined,
+): void {
+  const row = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+  row.add(new TextRenderable(renderer, { id: uid(), content: l1.padEnd(12), fg: COLORS.textMuted }));
+  row.add(new TextRenderable(renderer, { id: uid(), content: v1.padEnd(16), fg: c1 ?? COLORS.text }));
+  row.add(new TextRenderable(renderer, { id: uid(), content: l2.padEnd(12), fg: COLORS.textMuted }));
+  row.add(new TextRenderable(renderer, { id: uid(), content: v2, fg: c2 ?? COLORS.text }));
+  parent.add(row);
+}
+
+function sep(parent: BoxRenderable, renderer: CliRenderer): void {
+  parent.add(new TextRenderable(renderer, { id: uid(), content: "\u2500".repeat(72), fg: COLORS.borderDim }));
+}
+
+// ── Public dispatcher ──
+
+export function renderToolWidget(toolName: string, data: any, renderer: CliRenderer): BoxRenderable | null {
+  switch (toolName) {
+    case "polymarketEvents": return renderMarketList(data, renderer);
+    case "polymarketEventDetail": return renderEventDetail(data, renderer);
+    case "polymarketPriceHistory": return renderPriceChart(data, renderer);
+    case "polymarketOrderBook": return renderOrderBook(data, renderer);
+    case "whaleTracker": return renderWhaleTracker(data, renderer);
+    case "newsSentiment": return renderSentiment(data, renderer);
+    case "evCalculator": return renderEV(data, renderer);
+    case "kalshiEvents": return renderKalshiList(data, renderer);
+    case "compareMarkets": return renderComparison(data, renderer);
+    case "historicalVolatility": return renderVolatility(data, renderer);
+    case "webSearch": return renderWebSearch(data, renderer);
+    case "calaKnowledge": return renderCala(data, renderer);
+    case "probabilityCalculator": return renderProbability(data, renderer);
+    default: return null;
+  }
+}
+
+// ── Market list ──
+// Single wide row per market: #  Title                           Yes 52c  No 48c  24h $1.2M  liq $850k  +2.1%
+
+function renderMarketList(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+  const events = Array.isArray(data) ? data : (data?.events ?? data?.results ?? []);
+
+  for (let idx = 0; idx < Math.min(events.length, 8); idx++) {
+    const e = events[idx];
+    const market = e.markets?.[0];
+    const yesPrice = market?.yesPrice ? parseFloat(market.yesPrice) : null;
+    const noPrice = market?.noPrice ? parseFloat(market.noPrice) : null;
+    const change = e.oneDayPriceChange;
+
+    const row = new BoxRenderable(renderer, { id: uid(), flexDirection: "row", width: "100%" });
+
+    row.add(new TextRenderable(renderer, { id: uid(), content: `${(idx + 1).toString().padStart(2)}  `, fg: COLORS.textMuted }));
+
+    // Title — allow up to 40 chars
+    const title = (e.title ?? "").length > 40 ? e.title.slice(0, 40) + "..." : (e.title ?? "").padEnd(43);
+    row.add(new TextRenderable(renderer, { id: uid(), content: title, fg: COLORS.text, attributes: 1 }));
+
+    // Yes/No prices inline
+    if (yesPrice !== null) row.add(new TextRenderable(renderer, { id: uid(), content: `  Y ${fmtPrice(yesPrice)}`.padEnd(9), fg: COLORS.success }));
+    if (noPrice !== null) row.add(new TextRenderable(renderer, { id: uid(), content: `N ${fmtPrice(noPrice)}`.padEnd(8), fg: COLORS.error }));
+
+    // Volume + liquidity inline
+    if (e.volume24hr) row.add(new TextRenderable(renderer, { id: uid(), content: `  ${fmtVol(e.volume24hr).padEnd(7)}`, fg: COLORS.textMuted }));
+    if (e.liquidity) row.add(new TextRenderable(renderer, { id: uid(), content: `  liq ${fmtVol(e.liquidity)}`, fg: COLORS.textMuted }));
+
+    // Change
+    if (change !== undefined && change !== null && change !== 0) {
+      row.add(new TextRenderable(renderer, { id: uid(), content: `  ${fmtPct(change)}`, fg: pnlColor(change) }));
+    }
+
+    box.add(row);
+
+    // Slug on a dim second line (compact)
+    if (e.slug) {
+      box.add(new TextRenderable(renderer, { id: uid(), content: `      ${e.slug}`, fg: COLORS.borderDim }));
+    }
+  }
+
+  return box;
+}
+
+// ── Event detail ──
+// Title, then markets as wide rows, then stats + sparkline side by side
+
+function renderEventDetail(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+
+  box.add(new TextRenderable(renderer, { id: uid(), content: data.title ?? "", fg: COLORS.text, attributes: 1 }));
+  sep(box, renderer);
+
+  // Markets as wide rows
+  for (const m of (data.markets ?? []).slice(0, 5)) {
+    const row = new BoxRenderable(renderer, { id: uid(), flexDirection: "row", width: "100%" });
+    const q = (m.question ?? "").padEnd(40).slice(0, 40);
+    row.add(new TextRenderable(renderer, { id: uid(), content: q, fg: COLORS.textMuted }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: `Yes ${fmtDollar(m.yesPrice)}`.padEnd(12), fg: COLORS.success }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: `No ${fmtDollar(m.noPrice)}`.padEnd(12), fg: COLORS.error }));
+    if (m.spread !== null && m.spread !== undefined) {
+      row.add(new TextRenderable(renderer, { id: uid(), content: `spread ${(m.spread * 100).toFixed(1)}%`, fg: COLORS.textMuted }));
+    }
+    box.add(row);
+  }
+
+  sep(box, renderer);
+
+  // Stats as two columns side by side
+  kvPair(box, renderer, "Volume", fmtVol(data.volume ?? 0), undefined, "24h Volume", fmtVol(data.volume24hr ?? 0), undefined);
+  kvPair(box, renderer, "Liquidity", fmtVol(data.liquidity ?? 0), undefined, "Ends", data.endDate ? new Date(data.endDate).toLocaleDateString() : "--", undefined);
+
+  // Wide sparkline
+  if (data.priceHistory?.length > 3) {
+    const prices = data.priceHistory.map((p: any) => p.p);
+    const spark = sparkline(prices, 68);
+    const trend = prices[prices.length - 1] >= prices[0];
+    box.add(new TextRenderable(renderer, { id: uid(), content: "", fg: COLORS.borderDim }));
+    box.add(new TextRenderable(renderer, { id: uid(), content: spark, fg: trend ? COLORS.success : COLORS.error }));
+  }
+
+  return box;
+}
+
+// ── Price chart ──
+// Wide sparkline + stats row all on one level
+
+function renderPriceChart(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+
+  const title = `${data.marketQuestion ?? data.title} (${data.interval})`;
+  box.add(new TextRenderable(renderer, { id: uid(), content: title, fg: COLORS.text, attributes: 1 }));
+
+  if (data.priceHistory?.length > 0) {
+    const prices = data.priceHistory.map((p: any) => p.p);
+    const trend = (data.change ?? 0) >= 0;
+
+    // Wide sparkline
+    box.add(new TextRenderable(renderer, { id: uid(), content: sparkline(prices, 72), fg: trend ? COLORS.success : COLORS.error }));
+
+    // All stats on one row
+    const stats = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+    stats.add(new TextRenderable(renderer, { id: uid(), content: `Current ${fmtDollar(data.current)}`.padEnd(18), fg: COLORS.text }));
+    stats.add(new TextRenderable(renderer, { id: uid(), content: `High ${fmtDollar(data.high)}`.padEnd(16), fg: COLORS.success }));
+    stats.add(new TextRenderable(renderer, { id: uid(), content: `Low ${fmtDollar(data.low)}`.padEnd(16), fg: COLORS.error }));
+    stats.add(new TextRenderable(renderer, { id: uid(), content: `Change ${fmtPct(data.change)}`.padEnd(16), fg: pnlColor(data.change ?? 0) }));
+    stats.add(new TextRenderable(renderer, { id: uid(), content: `${data.dataPoints ?? 0} pts`, fg: COLORS.textMuted }));
+    box.add(stats);
+  }
+
+  return box;
+}
+
+// ── Order book ──
+// Wider bars (40 chars), asks and bids side by side if terminal allows, else stacked
+
+function renderOrderBook(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+
+  // Header row: title + spread info inline
+  const header = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+  header.add(new TextRenderable(renderer, { id: uid(), content: `Order Book -- ${data.outcome ?? "Yes"}`, fg: COLORS.text, attributes: 1 }));
+  header.add(new TextRenderable(renderer, { id: uid(), content: `     Bid ${fmtDollar(data.bestBid)}`, fg: COLORS.success }));
+  header.add(new TextRenderable(renderer, { id: uid(), content: `  Ask ${fmtDollar(data.bestAsk)}`, fg: COLORS.error }));
+  if (data.spread !== null) {
+    header.add(new TextRenderable(renderer, { id: uid(), content: `  Spread ${(data.spread * 100).toFixed(2)}%`, fg: COLORS.textMuted }));
+  }
+  box.add(header);
+  sep(box, renderer);
+
+  const allSizes = [...(data.bids ?? []), ...(data.asks ?? [])].map((l: any) => l.size);
+  const maxSize = Math.max(...allSizes, 1);
+  const barWidth = 36;
+
+  // Asks (reversed — highest first)
+  for (const a of (data.asks ?? []).slice(0, 6).reverse()) {
+    const barLen = Math.round((a.size / maxSize) * barWidth);
+    const bar = BAR.repeat(barLen) + " ".repeat(barWidth - barLen);
+    const row = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+    row.add(new TextRenderable(renderer, { id: uid(), content: `${a.price.toFixed(2).padStart(6)}`, fg: COLORS.error }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: ` ${bar} `, fg: COLORS.error }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: `${a.size.toLocaleString().padStart(8)}`, fg: COLORS.textMuted }));
+    box.add(row);
+  }
+
+  // Mid separator
+  box.add(new TextRenderable(renderer, { id: uid(), content: `${"─".repeat(barWidth + 18)}`, fg: COLORS.borderDim }));
+
+  // Bids
+  for (const b of (data.bids ?? []).slice(0, 6)) {
+    const barLen = Math.round((b.size / maxSize) * barWidth);
+    const bar = BAR.repeat(barLen) + " ".repeat(barWidth - barLen);
+    const row = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+    row.add(new TextRenderable(renderer, { id: uid(), content: `${b.price.toFixed(2).padStart(6)}`, fg: COLORS.success }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: ` ${bar} `, fg: COLORS.success }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: `${b.size.toLocaleString().padStart(8)}`, fg: COLORS.textMuted }));
+    box.add(row);
+  }
+
+  return box;
+}
+
+// ── Whale tracker ──
+// Flow summary inline, trades as wide table rows
+
+function renderWhaleTracker(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+
+  // Title + flow on same line
+  const flow = data.flow;
+  const header = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+  header.add(new TextRenderable(renderer, { id: uid(), content: `Whale Activity -- ${(data.title ?? "").slice(0, 30)}`, fg: COLORS.text, attributes: 1 }));
+  if (flow) {
+    const color = flow.direction === "inflow" ? COLORS.success : COLORS.error;
+    header.add(new TextRenderable(renderer, {
+      id: uid(),
+      content: `     Net: ${fmtVol(Math.abs(flow.netFlow))} ${flow.direction}  (Buy ${fmtVol(flow.buyVolume)} / Sell ${fmtVol(flow.sellVolume)})`,
+      fg: color,
+    }));
+  }
+  box.add(header);
+  sep(box, renderer);
+
+  // Trades as wide rows: side  name             size        @ price
+  for (const t of (data.largeTrades ?? []).slice(0, 8)) {
+    const color = t.side === "BUY" ? COLORS.success : t.side === "SELL" ? COLORS.error : COLORS.textMuted;
+    const name = (t.name ?? "Anon").padEnd(18).slice(0, 18);
+    const row = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+    row.add(new TextRenderable(renderer, { id: uid(), content: (t.side ?? "---").padEnd(5), fg: color }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: name, fg: COLORS.textMuted }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: `${(t.size ?? 0).toLocaleString().padStart(10)}`, fg: COLORS.text }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: ` @ ${fmtDollar(t.price)}`, fg: COLORS.textMuted }));
+    box.add(row);
+  }
+
+  return box;
+}
+
+// ── Sentiment ──
+// Gauge bar wider, score + signals inline with gauge
+
+function renderSentiment(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+  const s = data.sentiment;
+
+  box.add(new TextRenderable(renderer, { id: uid(), content: `Sentiment -- ${(data.title ?? "").slice(0, 50)}`, fg: COLORS.text, attributes: 1 }));
+
+  if (s) {
+    const normalized = (s.score + 1) / 2;
+    const width = 50;
+    const filled = Math.round(normalized * width);
+    const gauge = BAR.repeat(filled) + " ".repeat(width - filled);
+    const color = s.score >= 0.1 ? COLORS.success : s.score <= -0.1 ? COLORS.error : COLORS.textMuted;
+
+    // Gauge + score on same row
+    const gaugeRow = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+    gaugeRow.add(new TextRenderable(renderer, { id: uid(), content: "bear ", fg: COLORS.error }));
+    gaugeRow.add(new TextRenderable(renderer, { id: uid(), content: gauge, fg: color }));
+    gaugeRow.add(new TextRenderable(renderer, { id: uid(), content: ` bull   ${s.label} (${s.score > 0 ? "+" : ""}${s.score})  ${s.bullishSignals} bull / ${s.bearishSignals} bear`, fg: color }));
+    box.add(gaugeRow);
+  }
+
+  // Articles inline
+  if ((data.articles ?? []).length > 0) {
+    sep(box, renderer);
+    for (const a of data.articles.slice(0, 4)) {
+      box.add(new TextRenderable(renderer, { id: uid(), content: `  - ${(a.title ?? "Untitled").slice(0, 80)}`, fg: COLORS.textMuted }));
+    }
+  }
+
+  return box;
+}
+
+// ── EV Calculator ──
+// Two columns: left = probabilities, right = position sizing
+
+function renderEV(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+
+  const header = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+  header.add(new TextRenderable(renderer, { id: uid(), content: `EV Analysis -- ${(data.title ?? "").slice(0, 40)}`, fg: COLORS.text, attributes: 1 }));
+  header.add(new TextRenderable(renderer, { id: uid(), content: `     ${data.side?.toUpperCase()} @ ${fmtDollar(data.marketPrice)}`, fg: COLORS.textMuted }));
+  box.add(header);
+  sep(box, renderer);
+
+  // Two columns
+  kvPair(box, renderer,
+    "True Prob", `${(data.trueProb * 100).toFixed(1)}%`, undefined,
+    "Edge", `${(data.edge * 100).toFixed(1)}%`, data.edge > 0 ? COLORS.success : COLORS.error,
+  );
+  kvPair(box, renderer,
+    "EV/Dollar", `${(data.evPerDollar * 100).toFixed(1)}%`, pnlColor(data.evPerDollar),
+    "Risk/Reward", `${data.riskMetrics?.riskReward?.toFixed(1)}x`, undefined,
+  );
+
+  const ps = data.positionSizing;
+  if (ps) {
+    sep(box, renderer);
+    kvPair(box, renderer,
+      "Full Kelly", `$${ps.fullKelly?.amount?.toFixed(0)} (${(ps.fullKelly?.fraction * 100).toFixed(1)}%)`, undefined,
+      "Half Kelly", `$${ps.halfKelly?.amount?.toFixed(0)}`, COLORS.success,
+    );
+    kv(box, renderer, "Quarter", `$${ps.quarterKelly?.amount?.toFixed(0)}`, COLORS.textMuted);
+  }
+
+  return box;
+}
+
+// ── Kalshi list ──
+// Wide rows: price  title (long)  category
+
+function renderKalshiList(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+  const events = Array.isArray(data) ? data : (data?.events ?? []);
+
+  for (const e of events.slice(0, 8)) {
+    const market = e.markets?.[0];
+    const price = market ? `$${(market.yesBid / 100).toFixed(2)}` : "--";
+    const title = (e.title ?? "").padEnd(55).slice(0, 55);
+
+    const row = new BoxRenderable(renderer, { id: uid(), flexDirection: "row", width: "100%" });
+    row.add(new TextRenderable(renderer, { id: uid(), content: price.padEnd(8), fg: COLORS.text, attributes: 1 }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: title, fg: COLORS.text }));
+    row.add(new BoxRenderable(renderer, { id: uid(), flexGrow: 1 }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: e.category ?? "", fg: COLORS.textMuted }));
+    box.add(row);
+  }
+
+  return box;
+}
+
+// ── Cross-platform comparison ──
+// One row per pair: Poly price  |  Kalshi price  |  Diff  |  Title
+
+function renderComparison(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+
+  box.add(new TextRenderable(renderer, { id: uid(), content: `Cross-Platform -- "${data.topic}"`, fg: COLORS.text, attributes: 1 }));
+  sep(box, renderer);
+
+  // Header
+  const hdr = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+  hdr.add(new TextRenderable(renderer, { id: uid(), content: "Polymarket".padEnd(14), fg: COLORS.textMuted }));
+  hdr.add(new TextRenderable(renderer, { id: uid(), content: "Kalshi".padEnd(14), fg: COLORS.textMuted }));
+  hdr.add(new TextRenderable(renderer, { id: uid(), content: "Diff".padEnd(10), fg: COLORS.textMuted }));
+  hdr.add(new TextRenderable(renderer, { id: uid(), content: "Market", fg: COLORS.textMuted }));
+  box.add(hdr);
+
+  for (const c of (data.comparisons ?? []).slice(0, 5)) {
+    const diff = c.priceDiff;
+    const diffStr = diff !== null ? fmtPct(diff) : "--";
+    const diffColor = diff !== null ? (Math.abs(diff) > 0.03 ? COLORS.warning : COLORS.textMuted) : COLORS.textMuted;
+    const title = (c.polymarket?.title ?? c.kalshi?.title ?? "").slice(0, 35);
+
+    const row = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+    row.add(new TextRenderable(renderer, { id: uid(), content: fmtDollar(c.polymarket?.yesPrice).padEnd(14), fg: COLORS.text }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: fmtDollar(c.kalshi?.yesPrice).padEnd(14), fg: COLORS.text }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: diffStr.padEnd(10), fg: diffColor }));
+    row.add(new TextRenderable(renderer, { id: uid(), content: title, fg: COLORS.textMuted }));
+    box.add(row);
+  }
+
+  if ((data.comparisons ?? []).length === 0) {
+    box.add(new TextRenderable(renderer, { id: uid(), content: "No matching markets found across platforms", fg: COLORS.textMuted }));
+  }
+
+  return box;
+}
+
+// ── Volatility ──
+// Stats horizontal, sparkline wide
+
+function renderVolatility(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+
+  box.add(new TextRenderable(renderer, { id: uid(), content: `Volatility -- ${(data.title ?? "").slice(0, 50)}`, fg: COLORS.text, attributes: 1 }));
+
+  const regime = data.volatilityRegime;
+  const regimeColor = regime === "high" ? COLORS.error : regime === "low" ? COLORS.success : COLORS.textMuted;
+
+  // All stats on one row
+  const statsRow = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+  statsRow.add(new TextRenderable(renderer, { id: uid(), content: `Regime ${(regime ?? "?").toUpperCase()}`.padEnd(18), fg: regimeColor }));
+  statsRow.add(new TextRenderable(renderer, { id: uid(), content: `Ann. Vol ${((data.realizedVolatility ?? 0) * 100).toFixed(1)}%`.padEnd(20), fg: COLORS.text }));
+  statsRow.add(new TextRenderable(renderer, { id: uid(), content: `Daily StdDev ${((data.dailyStdDev ?? 0) * 100).toFixed(3)}%`, fg: COLORS.text }));
+  box.add(statsRow);
+
+  if (data.priceHistory?.length > 3) {
+    const prices = data.priceHistory.map((p: any) => p.p);
+    const trend = prices[prices.length - 1] >= prices[0];
+    box.add(new TextRenderable(renderer, { id: uid(), content: sparkline(prices, 72), fg: trend ? COLORS.success : COLORS.error }));
+  }
+
+  return box;
+}
+
+// ── Web search ──
+
+function renderWebSearch(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+  const results = Array.isArray(data) ? data : (data?.results ?? []);
+
+  for (const r of results.slice(0, 6)) {
+    const row = new BoxRenderable(renderer, { id: uid(), flexDirection: "row", width: "100%" });
+    row.add(new TextRenderable(renderer, { id: uid(), content: `  - ${(r.title ?? "Untitled").slice(0, 70)}`, fg: COLORS.text }));
+    if (r.snippet) {
+      row.add(new TextRenderable(renderer, { id: uid(), content: `  ${(r.snippet ?? "").slice(0, 50)}`, fg: COLORS.textMuted }));
+    }
+    box.add(row);
+  }
+
+  return box;
+}
+
+// ── Cala knowledge ──
+
+function renderCala(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+
+  if (data.content) {
+    box.add(new TextRenderable(renderer, { id: uid(), content: (data.content as string).slice(0, 800), fg: COLORS.text }));
+  }
+
+  if (data.sources?.length > 0) {
+    sep(box, renderer);
+    for (const s of data.sources.slice(0, 3)) {
+      box.add(new TextRenderable(renderer, { id: uid(), content: `  - ${(s.fact ?? s.source ?? "").slice(0, 90)}`, fg: COLORS.textMuted }));
+    }
+  }
+
+  return box;
+}
+
+// ── Probability ──
+// All on two rows
+
+function renderProbability(data: any, renderer: CliRenderer): BoxRenderable {
+  const box = new BoxRenderable(renderer, { id: uid(), flexDirection: "column", marginBottom: 1 });
+
+  box.add(new TextRenderable(renderer, { id: uid(), content: "Probability Analysis", fg: COLORS.text, attributes: 1 }));
+  sep(box, renderer);
+
+  if (data.marketA && data.marketB) {
+    kvPair(box, renderer,
+      "A", `${data.marketA.title} (${(data.marketA.probability * 100).toFixed(0)}%)`, undefined,
+      "B", `${data.marketB.title} (${(data.marketB.probability * 100).toFixed(0)}%)`, undefined,
+    );
+  }
+
+  const joint = `${((data.jointProbability ?? 0) * 100).toFixed(1)}%`;
+  const pAB = data.pAGivenB !== null ? `${((data.pAGivenB ?? 0) * 100).toFixed(1)}%` : "--";
+  const pBA = data.pBGivenA !== null ? `${((data.pBGivenA ?? 0) * 100).toFixed(1)}%` : "--";
+
+  const row = new BoxRenderable(renderer, { id: uid(), flexDirection: "row" });
+  row.add(new TextRenderable(renderer, { id: uid(), content: `Joint ${joint}`.padEnd(20), fg: COLORS.text }));
+  row.add(new TextRenderable(renderer, { id: uid(), content: `P(A|B) ${pAB}`.padEnd(20), fg: COLORS.text }));
+  row.add(new TextRenderable(renderer, { id: uid(), content: `P(B|A) ${pBA}`, fg: COLORS.text }));
+  box.add(row);
+
+  return box;
+}