horizon-code 0.1.0

package/src/components/strategy-panel.ts

@@ -0,0 +1,489 @@
+import { BoxRenderable, TextRenderable, type CliRenderer } from "@opentui/core";
+import { COLORS } from "../theme/colors.ts";
+import { ICONS } from "../theme/icons.ts";
+import { store } from "../state/store.ts";
+import { isAuthenticated } from "../platform/auth.ts";
+import { platform } from "../platform/client.ts";
+import type { Deployment } from "../state/types.ts";
+
+let privacyMode = false;
+export function setPrivacyMode(enabled: boolean): void { privacyMode = enabled; }
+
+function blur(value: string): string {
+  return privacyMode ? "***" : value;
+}
+
+const BRAILLE = [
+  "\u2801", "\u2803", "\u2807", "\u280f", "\u281f", "\u283f", "\u287f", "\u28ff",
+  "\u28fe", "\u28fc", "\u28f8", "\u28f0", "\u28e0", "\u28c0", "\u2880", "\u2800",
+];
+
+const SPARK = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+
+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 norm = (v - min) / range;
+    const idx = Math.min(Math.floor(norm * SPARK.length), SPARK.length - 1);
+    return SPARK[idx];
+  }).join("");
+}
+
+function formatUptime(startedAt: number): string {
+  const ms = Date.now() - startedAt;
+  const days = Math.floor(ms / 86400000);
+  const hours = Math.floor((ms % 86400000) / 3600000);
+  if (days > 0) return `${days}d ${hours}h`;
+  const mins = Math.floor((ms % 3600000) / 60000);
+  return `${hours}h ${mins}m`;
+}
+
+export class StrategyPanel {
+  private panel: BoxRenderable;
+  private listBox: BoxRenderable;
+  private detailBox: BoxRenderable;
+  private _visible = false;
+  private selectedIndex = 0;
+  private expandedId: string | null = null;
+  private spinnerTimer: ReturnType<typeof setInterval> | null = null;
+  private spinnerFrame = 0;
+  private spinnerNodes: TextRenderable[] = [];
+
+  constructor(private renderer: CliRenderer) {
+    this.panel = new BoxRenderable(renderer, {
+      id: "strat-panel",
+      position: "absolute",
+      right: 0,
+      top: 0,
+      width: 52,
+      height: "100%",
+      backgroundColor: COLORS.bgDarker,
+      flexDirection: "column",
+      border: ["left"],
+      borderStyle: "single",
+      borderColor: COLORS.borderDim,
+      paddingTop: 1,
+      paddingLeft: 1,
+      paddingRight: 1,
+    });
+    this.panel.visible = false;
+
+    this.panel.add(new TextRenderable(renderer, {
+      id: "strat-title",
+      content: "strategies",
+      fg: COLORS.textMuted,
+      attributes: 1,
+      marginBottom: 1,
+    }));
+
+    this.listBox = new BoxRenderable(renderer, {
+      id: "strat-list",
+      flexDirection: "column",
+    });
+    this.panel.add(this.listBox);
+
+    this.panel.add(new TextRenderable(renderer, {
+      id: "strat-divider",
+      content: "\u2500".repeat(48),
+      fg: COLORS.borderDim,
+    }));
+
+    this.detailBox = new BoxRenderable(renderer, {
+      id: "strat-detail",
+      flexDirection: "column",
+      flexGrow: 1,
+      paddingTop: 1,
+    });
+    this.panel.add(this.detailBox);
+
+    this.panel.add(new TextRenderable(renderer, {
+      id: "strat-hints",
+      content: "\u2191\u2193 nav  \u23ce expand  esc close",
+      fg: COLORS.borderDim,
+    }));
+
+    renderer.root.add(this.panel);
+  }
+
+  get visible(): boolean { return this._visible; }
+
+  toggle(): void { this._visible ? this.hide() : this.show(); }
+
+  show(): void {
+    this._visible = true;
+    this.panel.visible = true;
+    this.selectedIndex = 0;
+    this.expandedId = null;
+    this.updateList();
+    this.updateDetail();
+    this.startSpinner();
+    this.renderer.requestRender();
+  }
+
+  hide(): void {
+    this._visible = false;
+    this.panel.visible = false;
+    this.stopSpinner();
+    this.renderer.requestRender();
+  }
+
+  navigate(delta: number): void {
+    const n = store.get().deployments.length;
+    if (n === 0) return;
+    this.selectedIndex = Math.max(0, Math.min(n - 1, this.selectedIndex + delta));
+    this.updateList();
+    if (this.expandedId) {
+      this.expandedId = store.get().deployments[this.selectedIndex]?.id ?? null;
+      this.updateDetail();
+    }
+    this.renderer.requestRender();
+  }
+
+  toggleExpand(): void {
+    const d = store.get().deployments[this.selectedIndex];
+    if (!d) return;
+    this.expandedId = this.expandedId === d.id ? null : d.id;
+    this.updateList();
+    this.updateDetail();
+    this.renderer.requestRender();
+  }
+
+  update(): void {
+    if (!this._visible) return;
+    this.updateList();
+    if (this.expandedId) this.updateDetail();
+  }
+
+  private startSpinner(): void {
+    if (this.spinnerTimer) return;
+    this.spinnerFrame = 0;
+    this.spinnerTimer = setInterval(() => {
+      this.spinnerFrame = (this.spinnerFrame + 1) % BRAILLE.length;
+      const ch = BRAILLE[this.spinnerFrame]!;
+      for (const n of this.spinnerNodes) n.content = ch;
+      this.renderer.requestRender();
+    }, 60);
+  }
+
+  private stopSpinner(): void {
+    if (this.spinnerTimer) { clearInterval(this.spinnerTimer); this.spinnerTimer = null; }
+    this.spinnerNodes = [];
+  }
+
+  // ── List ──
+
+  private updateList(): void {
+    this.spinnerNodes = [];
+    for (const c of this.listBox.getChildren()) this.listBox.remove(c.id);
+
+    const deployments = store.get().deployments;
+    if (deployments.length === 0) {
+      this.listBox.add(new TextRenderable(this.renderer, { id: "strat-empty", content: "  no strategies yet", fg: COLORS.textMuted }));
+      return;
+    }
+
+    // Fixed column layout: ptr(2) status(2) name(22) status_label(8) pnl(10)
+    for (let i = 0; i < deployments.length; i++) {
+      const d = deployments[i]!;
+      const sel = i === this.selectedIndex;
+
+      const row = new BoxRenderable(this.renderer, {
+        id: `strat-row-${i}`,
+        flexDirection: "row",
+        width: "100%",
+      });
+
+      // Pointer (2 chars)
+      row.add(new TextRenderable(this.renderer, {
+        id: `strat-ptr-${i}`,
+        content: sel ? `${ICONS.pointer} ` : "  ",
+        fg: COLORS.textMuted,
+      }));
+
+      // Status icon (2 chars)
+      if (["running", "starting", "pending"].includes(d.status)) {
+        const s = new TextRenderable(this.renderer, {
+          id: `strat-spin-${i}`, content: BRAILLE[this.spinnerFrame]!, fg: COLORS.success,
+        });
+        this.spinnerNodes.push(s);
+        row.add(s);
+        row.add(new TextRenderable(this.renderer, { id: `strat-sp1-${i}`, content: " ", fg: COLORS.textMuted }));
+      } else {
+        const icon = d.status === "error" ? "x" : d.status === "stopped" ? "-" : ".";
+        const color = d.status === "error" ? COLORS.error : d.status === "stopped" ? COLORS.textMuted : COLORS.borderDim;
+        row.add(new TextRenderable(this.renderer, {
+          id: `strat-icon-${i}`, content: `${icon} `, fg: color,
+        }));
+      }
+
+      // Name (truncated to 22 chars, padded)
+      const name = d.name.length > 22 ? d.name.slice(0, 21) + "." : d.name.padEnd(22);
+      row.add(new TextRenderable(this.renderer, {
+        id: `strat-name-${i}`,
+        content: name,
+        fg: sel ? COLORS.text : COLORS.textMuted,
+        attributes: sel ? 1 : 0,
+      }));
+
+      // Status label (8 chars)
+      const statusLabel = d.status.padEnd(8).slice(0, 8);
+      const statusColor = d.status === "running" ? COLORS.success
+        : d.status === "error" ? COLORS.error
+        : COLORS.borderDim;
+      row.add(new TextRenderable(this.renderer, {
+        id: `strat-status-${i}`,
+        content: ` ${statusLabel}`,
+        fg: statusColor,
+      }));
+
+      // P&L (right-aligned, 10 chars)
+      const pnl = d.metrics.total_pnl;
+      const pnlStr = pnl === 0 ? "" : this.fmtPnl(pnl);
+      row.add(new BoxRenderable(this.renderer, { id: `strat-sp-${i}`, flexGrow: 1 }));
+      if (pnlStr) {
+        row.add(new TextRenderable(this.renderer, {
+          id: `strat-pnl-${i}`,
+          content: pnlStr,
+          fg: pnl >= 0 ? COLORS.success : COLORS.error,
+        }));
+      }
+
+      this.listBox.add(row);
+    }
+  }
+
+  // ── Detail ──
+
+  private updateDetail(): void {
+    for (const c of this.detailBox.getChildren()) this.detailBox.remove(c.id);
+    if (!this.expandedId) {
+      this.detailBox.add(new TextRenderable(this.renderer, {
+        id: "strat-detail-hint", content: "select a deployment and press enter", fg: COLORS.borderDim,
+      }));
+      return;
+    }
+
+    const d = store.get().deployments.find((d) => d.id === this.expandedId);
+    if (!d) return;
+    const m = d.metrics;
+
+    // ── Equity sparkline ──
+    if (d.pnl_history.length > 3) {
+      const last = d.pnl_history[d.pnl_history.length - 1] ?? 0;
+      const first = d.pnl_history[0] ?? 0;
+      const color = last >= first ? COLORS.success : COLORS.error;
+      const spark = sparkline(d.pnl_history, 36);
+
+      this.detailBox.add(new TextRenderable(this.renderer, {
+        id: "strat-chart-label", content: "equity", fg: COLORS.borderDim,
+      }));
+      this.detailBox.add(new TextRenderable(this.renderer, {
+        id: "strat-chart", content: spark, fg: color,
+      }));
+    }
+
+    // ── Key metrics grid ──
+    this.detailBox.add(new TextRenderable(this.renderer, {
+      id: "strat-m-sep", content: "", fg: COLORS.borderDim,
+    }));
+
+    const grid: [string, string, string?][] = [
+      ["P&L", this.fmtPnl(m.total_pnl), m.total_pnl >= 0 ? COLORS.success : COLORS.error],
+      ["Realized", this.fmtPnl(m.realized_pnl)],
+      ["Unrealized", this.fmtPnl(m.unrealized_pnl)],
+      ["Exposure", blur(`$${m.total_exposure.toLocaleString()}`)],
+      ["Sharpe", m.sharpe_ratio.toFixed(2), m.sharpe_ratio >= 1.5 ? COLORS.success : m.sharpe_ratio < 0 ? COLORS.error : undefined],
+      ["Win Rate", `${(m.win_rate * 100).toFixed(0)}%`],
+      ["Profit Fct", m.profit_factor > 0 ? m.profit_factor.toFixed(1) : "\u2014"],
+      ["Max DD", `${m.max_drawdown_pct.toFixed(1)}%`, m.max_drawdown_pct < -2 ? COLORS.error : undefined],
+      ["Trades", `${m.total_trades}`],
+      ["Avg Return", `$${m.avg_return_per_trade.toFixed(2)}`],
+      ["Uptime", formatUptime(d.started_at)],
+      ["Orders", `${m.open_order_count} open`],
+    ];
+
+    for (let i = 0; i < grid.length; i++) {
+      const [label, value, color] = grid[i]!;
+      const row = new BoxRenderable(this.renderer, { id: `strat-g-${i}`, flexDirection: "row" });
+      row.add(new TextRenderable(this.renderer, {
+        id: `strat-gl-${i}`, content: (label ?? "").padEnd(12), fg: COLORS.textMuted,
+      }));
+      row.add(new TextRenderable(this.renderer, {
+        id: `strat-gv-${i}`, content: value ?? "", fg: (color as string) ?? COLORS.text,
+      }));
+      this.detailBox.add(row);
+    }
+
+    // ── Positions ──
+    if (d.positions.length > 0) {
+      this.detailBox.add(new TextRenderable(this.renderer, {
+        id: "strat-pos-h", content: "\npositions", fg: COLORS.borderDim,
+      }));
+
+      for (let i = 0; i < Math.min(d.positions.length, 5); i++) {
+        const p = d.positions[i]!;
+        const pnl = p.unrealized_pnl;
+        const pnlStr = pnl >= 0 ? `+$${pnl.toFixed(0)}` : `-$${Math.abs(pnl).toFixed(0)}`;
+        const sideChar = p.side === "BUY" ? "\u25b2" : "\u25bc";
+        const sizeStr = blur(`${p.size}@${p.avg_entry_price.toFixed(2)}`);
+        const row = new BoxRenderable(this.renderer, { id: `strat-pos-${i}`, flexDirection: "row" });
+        row.add(new TextRenderable(this.renderer, {
+          id: `strat-ps-${i}`, content: `  ${sideChar} `, fg: p.side === "BUY" ? COLORS.success : COLORS.error,
+        }));
+        row.add(new TextRenderable(this.renderer, {
+          id: `strat-pn-${i}`, content: p.slug, fg: COLORS.textMuted,
+        }));
+        row.add(new BoxRenderable(this.renderer, { id: `strat-psp-${i}`, flexGrow: 1 }));
+        row.add(new TextRenderable(this.renderer, {
+          id: `strat-pp-${i}`, content: `${sizeStr} ${blur(pnlStr)}`,
+          fg: privacyMode ? COLORS.textMuted : (pnl >= 0 ? COLORS.success : COLORS.error),
+        }));
+        this.detailBox.add(row);
+      }
+    }
+
+    // ── Recent orders ──
+    if (d.orders.length > 0) {
+      this.detailBox.add(new TextRenderable(this.renderer, {
+        id: "strat-ord-h", content: "\nrecent orders", fg: COLORS.borderDim,
+      }));
+
+      for (let i = 0; i < Math.min(d.orders.length, 3); i++) {
+        const o = d.orders[i]!;
+        const statusChar = o.status === "FILLED" ? ICONS.check : o.status === "LIVE" ? ICONS.running : ICONS.dot;
+        this.detailBox.add(new TextRenderable(this.renderer, {
+          id: `strat-ord-${i}`,
+          content: `  ${statusChar} ${o.side} ${o.slug} ${blur(`${o.size}@${o.price.toFixed(2)}`)} ${o.status.toLowerCase()}`,
+          fg: o.status === "FILLED" ? COLORS.textMuted : COLORS.text,
+        }));
+      }
+    }
+
+    // ── Actions ──
+    this.detailBox.add(new TextRenderable(this.renderer, {
+      id: "strat-act-sep", content: "\n" + "\u2500".repeat(38), fg: COLORS.borderDim,
+    }));
+
+    const actions: string[] = [];
+    if (d.status === "running") {
+      actions.push("p stop", "k kill");
+    } else if (d.status === "stopped" || d.status === "error" || d.status === "killed") {
+      actions.push("r restart");
+    } else if (d.status === "starting" || d.status === "pending") {
+      actions.push("k kill");
+    }
+
+    if (actions.length > 0) {
+      this.detailBox.add(new TextRenderable(this.renderer, {
+        id: "strat-actions",
+        content: actions.join("  \u00b7  "),
+        fg: COLORS.textMuted,
+      }));
+    }
+  }
+
+  // ── Actions ──
+
+  handleAction(key: string): void {
+    if (!this.expandedId) return;
+    const deployments = store.get().deployments;
+    const idx = deployments.findIndex((d) => d.id === this.expandedId);
+    if (idx < 0) return;
+    const d = deployments[idx]!;
+    const strategyId = d.strategyId;
+
+    let newStatus = d.status;
+    if (key === "p" && d.status === "running") newStatus = "stopped";
+    else if (key === "k" && ["running", "starting", "pending"].includes(d.status)) newStatus = "killed";
+    else if (key === "r" && ["stopped", "error", "killed"].includes(d.status)) newStatus = "starting";
+    else return;
+
+    // Optimistic update
+    const updated = deployments.map((dep) =>
+      dep.id === d.id ? { ...dep, status: newStatus as any } : dep
+    );
+    store.update({ deployments: updated });
+    this.updateList();
+    this.updateDetail();
+    this.renderer.requestRender();
+
+    if (!isAuthenticated()) return;
+
+    // All actions go through the platform API — it holds the worker secrets
+    if (key === "p" || key === "k") {
+      platform.stop(strategyId).catch((err) => {
+        this.showError(d.id, `Stop failed: ${err.message}`);
+      });
+    } else if (key === "r") {
+      platform.listDeployments(strategyId).then((deps) => {
+        const lastDep = deps.sort((a, b) =>
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+        )[0];
+        const credId = lastDep?.credential_id;
+        if (credId) {
+          platform.deploy(strategyId, {
+            credentialId: credId,
+            dryRun: d.dry_run,
+            deploymentMode: d.mode,
+          }).catch((err) => {
+            this.showError(d.id, `Restart failed: ${err.message}`);
+          });
+        } else {
+          this.showError(d.id, "No credential found for restart");
+        }
+      }).catch((err) => {
+        this.showError(d.id, `Restart failed: ${err.message}`);
+      });
+    }
+  }
+
+  private showError(deploymentId: string, message: string): void {
+    // Revert optimistic update and show error in status
+    const deployments = store.get().deployments;
+    const updated = deployments.map((dep) =>
+      dep.id === deploymentId ? { ...dep, status: "error" as any } : dep
+    );
+    store.update({ deployments: updated });
+    // Show error in detail panel
+    this.detailBox.add(new TextRenderable(this.renderer, {
+      id: "strat-error",
+      content: `\n${message}`,
+      fg: COLORS.error,
+    }));
+    this.updateList();
+    this.renderer.requestRender();
+  }
+
+  // ── Helpers ──
+
+  private statusIcon(status: string): string {
+    switch (status) {
+      case "running": return ICONS.running;
+      case "stopped": return ICONS.stopped;
+      case "error": case "killed": return ICONS.error;
+      case "scanner_idle": return ICONS.paused;
+      default: return ICONS.dot;
+    }
+  }
+
+  private statusColor(status: string): string {
+    switch (status) {
+      case "running": return COLORS.success;
+      case "error": case "killed": return COLORS.error;
+      default: return COLORS.textMuted;
+    }
+  }
+
+  private fmtPnl(pnl: number): string {
+    const raw = pnl >= 0 ? `+$${pnl.toFixed(0)}` : `-$${Math.abs(pnl).toFixed(0)}`;
+    return blur(raw);
+  }
+}

package/src/components/tab-bar.ts

@@ -0,0 +1,112 @@
+// Chat bar — shows open chats at the top of the chat column
+// Each chat is an independent workspace with its own mode, messages, strategy draft
+
+import { BoxRenderable, TextRenderable, type CliRenderer } from "@opentui/core";
+import { COLORS } from "../theme/colors.ts";
+import { store } from "../state/store.ts";
+
+const MODE_LABEL: Record<string, string> = {
+  research: "(r)",
+  strategy: "(s)",
+  portfolio: "(p)",
+};
+
+const MODE_COLOR: Record<string, string> = {
+  research: "#5c9cf5",   // COLORS.secondary
+  strategy: "#9d7cd8",   // COLORS.accent
+  portfolio: "#7fd88f",  // COLORS.success
+};
+
+const BRAILLE = ["\u2801", "\u2803", "\u2807", "\u280f", "\u281f", "\u283f", "\u287f", "\u28ff", "\u28fe", "\u28fc", "\u28f8", "\u28f0", "\u28e0", "\u28c0", "\u2880", "\u2800"];
+
+export class TabBar {
+  readonly container: BoxRenderable;
+  private spinnerFrame = 0;
+  private spinnerTimer: ReturnType<typeof setInterval> | null = null;
+
+  constructor(private renderer: CliRenderer) {
+    this.container = new BoxRenderable(renderer, {
+      id: "tab-bar",
+      height: 1,
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      backgroundColor: COLORS.bgDarker,
+      flexShrink: 0,
+      paddingLeft: 1,
+    });
+
+    this.startSpinner();
+    this.update();
+  }
+
+  update(): void {
+    for (const child of this.container.getChildren()) this.container.remove(child.id);
+
+    const state = store.get();
+    const { openTabIds, activeSessionId, sessions } = state;
+
+    for (let i = 0; i < openTabIds.length; i++) {
+      const tabId = openTabIds[i]!;
+      const session = sessions.find((s) => s.id === tabId);
+      if (!session) continue;
+
+      const isActive = tabId === activeSessionId;
+      const modeTag = MODE_LABEL[session.mode] ?? "(r)";
+      const modeColor = MODE_COLOR[session.mode] ?? COLORS.secondary;
+
+      // Truncate name
+      let name = session.name.length > 12 ? session.name.slice(0, 11) + "." : session.name;
+
+      // Streaming indicator
+      let indicator = "";
+      if (session.isStreaming) {
+        indicator = ` ${BRAILLE[this.spinnerFrame]!}`;
+      }
+
+      const label = ` ${name} ${modeTag}${indicator} `;
+
+      const tab = new TextRenderable(this.renderer, {
+        id: `tab-${i}`,
+        content: label,
+        fg: isActive ? "#212121" : COLORS.textMuted,
+        bg: isActive ? modeColor : undefined,
+      });
+      this.container.add(tab);
+
+      // Separator
+      if (i < openTabIds.length - 1) {
+        this.container.add(new TextRenderable(this.renderer, {
+          id: `tab-sep-${i}`,
+          content: " ",
+          fg: COLORS.borderDim,
+        }));
+      }
+    }
+
+    // [+] new tab button
+    this.container.add(new BoxRenderable(this.renderer, { id: "tab-spacer", flexGrow: 1 }));
+    this.container.add(new TextRenderable(this.renderer, {
+      id: "tab-new",
+      content: " + ",
+      fg: COLORS.textMuted,
+    }));
+  }
+
+  private startSpinner(): void {
+    this.spinnerTimer = setInterval(() => {
+      const anyStreaming = store.isAnyStreaming();
+      if (!anyStreaming) return;
+      this.spinnerFrame = (this.spinnerFrame + 1) % BRAILLE.length;
+      this.update();
+      this.renderer.requestRender();
+    }, 80);
+  }
+
+  destroy(): void {
+    if (this.spinnerTimer) {
+      clearInterval(this.spinnerTimer);
+      this.spinnerTimer = null;
+    }
+  }
+}