horizon-code 0.1.0

package/src/components/mode-bar.ts

@@ -0,0 +1,245 @@
+import { BoxRenderable, TextRenderable, type CliRenderer } from "@opentui/core";
+import { COLORS } from "../theme/colors.ts";
+
+export type Mode = "research" | "strategy" | "portfolio";
+
+const MODE_CONFIG: Record<Mode, { label: string; icon: string; color: string }> = {
+  research:  { label: "Research",  icon: "~", color: COLORS.secondary },
+  strategy:  { label: "Strategy",  icon: ">", color: COLORS.accent },
+  portfolio: { label: "Portfolio", icon: "o", color: COLORS.success },
+};
+
+export class ModeBar {
+  private container: BoxRenderable;
+  private modeText: TextRenderable;
+  private statusText: TextRenderable;
+  private metricsText: TextRenderable;
+  private _current: Mode = "research";
+  private _privacy = false;
+  private _showMetrics = false;
+  private _queueCount = 0;
+  private _paused = false;
+  private _bgProcessCount = 0;
+  private _contextUsed = 0;
+  private _contextMax = 200000;
+  private _budgetPct = 0;
+  private _tier: string = "";
+  get currentTier(): string { return this._tier; }
+  private onChangeCallback: ((mode: Mode) => void) | null = null;
+
+  // Session metrics
+  private _tokensIn = 0;
+  private _tokensOut = 0;
+  private _totalCost = 0;
+  private _requestCount = 0;
+  private _streamStartTime = 0;
+  private _currentStreamTokens = 0;
+  private _lastTokPerSec = 0;
+
+  constructor(private renderer: CliRenderer) {
+    this.container = new BoxRenderable(renderer, {
+      id: "mode-bar",
+      height: 1,
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      paddingLeft: 2,
+      paddingRight: 2,
+      flexShrink: 0,
+    });
+
+    // Active mode (single label, colored)
+    this.modeText = new TextRenderable(renderer, {
+      id: "mode-label", content: "", fg: COLORS.textMuted,
+    });
+    this.container.add(this.modeText);
+
+    // Status: generating / queue count / paused
+    this.statusText = new TextRenderable(renderer, {
+      id: "mode-status", content: "", fg: COLORS.textMuted,
+    });
+    this.container.add(this.statusText);
+
+    this.container.add(new BoxRenderable(renderer, { id: "mode-spacer", flexGrow: 1 }));
+
+    // Metrics (right-aligned)
+    this.metricsText = new TextRenderable(renderer, {
+      id: "mode-metrics", content: "", fg: COLORS.borderDim,
+    });
+    this.container.add(this.metricsText);
+
+    this.updateDisplay();
+  }
+
+  get renderable(): BoxRenderable { return this.container; }
+  get current(): Mode { return this._current; }
+  get privacyEnabled(): boolean { return this._privacy; }
+  get metricsEnabled(): boolean { return this._showMetrics; }
+
+  onChange(cb: (mode: Mode) => void): void { this.onChangeCallback = cb; }
+
+  cycle(): void {
+    const modes: Mode[] = ["research", "strategy", "portfolio"];
+    const idx = modes.indexOf(this._current);
+    this._current = modes[(idx + 1) % modes.length]!;
+    this.updateDisplay();
+    this.onChangeCallback?.(this._current);
+  }
+
+  setMode(mode: Mode): void {
+    if (this._current === mode) return;
+    this._current = mode;
+    this.updateDisplay();
+    this.onChangeCallback?.(this._current);
+  }
+
+  // ── Context tracking ──
+
+  setBudgetUsage(pct: number, tier: string): void {
+    this._budgetPct = pct;
+    this._tier = tier;
+    if (this._showMetrics) {
+      this.updateMetricsDisplay();
+      this.renderer.requestRender();
+    }
+  }
+
+  setContextUsage(used: number, max?: number): void {
+    this._contextUsed = used;
+    if (max) this._contextMax = max;
+    if (this._showMetrics) {
+      this.updateMetricsDisplay();
+      this.renderer.requestRender();
+    }
+  }
+
+  get contextPct(): number {
+    return this._contextMax > 0 ? this._contextUsed / this._contextMax : 0;
+  }
+
+  // ── Status indicators ──
+
+  setQueueCount(count: number): void {
+    this._queueCount = count;
+    this.updateStatus();
+  }
+
+  setPaused(paused: boolean): void {
+    this._paused = paused;
+    this.updateStatus();
+  }
+
+  setBgProcessCount(count: number): void {
+    this._bgProcessCount = count;
+    this.updateStatus();
+  }
+
+  togglePrivacy(): void { this._privacy = !this._privacy; this.updateDisplay(); }
+  toggleMetrics(): void { this._showMetrics = !this._showMetrics; this.updateDisplay(); }
+
+  // ── Stream tracking ──
+
+  streamStart(): void {
+    this._streamStartTime = Date.now();
+    this._currentStreamTokens = 0;
+    this.updateStatus();
+  }
+
+  streamDelta(chars: number): void {
+    this._currentStreamTokens += Math.round(chars / 4);
+    if (this._showMetrics) {
+      const elapsed = (Date.now() - this._streamStartTime) / 1000;
+      if (elapsed > 0.5) {
+        this._lastTokPerSec = Math.round(this._currentStreamTokens / elapsed);
+        this.updateMetricsDisplay();
+        this.renderer.requestRender();
+      }
+    }
+  }
+
+  streamEnd(inputText: string, outputText: string): void {
+    const tokIn = Math.round(inputText.length / 4);
+    const tokOut = Math.round(outputText.length / 4);
+    const elapsed = (Date.now() - this._streamStartTime) / 1000;
+    this._tokensIn += tokIn;
+    this._tokensOut += tokOut;
+    this._totalCost += (tokIn * 0.000003) + (tokOut * 0.000015);
+    this._requestCount++;
+    this._lastTokPerSec = elapsed > 0 ? Math.round(tokOut / elapsed) : 0;
+    this.updateDisplay();
+    this.renderer.requestRender();
+  }
+
+  resetUsage(): void {
+    this._tokensIn = 0; this._tokensOut = 0; this._totalCost = 0;
+    this._requestCount = 0; this._lastTokPerSec = 0;
+    this.updateDisplay();
+  }
+
+  // ── Rendering ──
+
+  private updateDisplay(): void {
+    const m = MODE_CONFIG[this._current];
+    this.modeText.content = ` ${m.icon} ${m.label} `;
+    this.modeText.fg = "#212121";
+    this.modeText.bg = m.color;
+    this.updateStatus();
+    this.updateMetricsDisplay();
+  }
+
+  private updateStatus(): void {
+    const parts: string[] = [];
+    if (this._paused) {
+      parts.push("paused -- /resume to continue");
+    } else if (this._queueCount > 0) {
+      parts.push(`${this._queueCount} queued`);
+    }
+    if (this._bgProcessCount > 0) {
+      parts.push(`${this._bgProcessCount} running`);
+    }
+    this.statusText.content = parts.length > 0 ? `  ${parts.join("  ")}` : "";
+    this.statusText.fg = this._paused ? COLORS.warning : this._bgProcessCount > 0 ? COLORS.success : COLORS.textMuted;
+  }
+
+  private updateMetricsDisplay(): void {
+    if (!this._showMetrics) { this.metricsText.content = ""; return; }
+    if (this._requestCount === 0 && this._contextUsed === 0) {
+      this.metricsText.content = "no usage yet";
+      this.metricsText.fg = COLORS.borderDim;
+      return;
+    }
+
+    const totalTok = this._tokensIn + this._tokensOut;
+    const parts: string[] = [];
+
+    // Tier badge
+    if (this._tier) {
+      parts.push(this._tier.toUpperCase());
+    }
+
+    // Budget bar
+    if (this._budgetPct > 0 || this._tier) {
+      const bFilled = Math.round(this._budgetPct * 8);
+      const bBar = "\u2588".repeat(bFilled) + "\u2591".repeat(8 - bFilled);
+      const bPctStr = `${Math.round(this._budgetPct * 100)}%`;
+      parts.push(`[${bBar}] ${bPctStr}`);
+    }
+
+    // Context bar: [████░░░░] 34%
+    const pct = this.contextPct;
+    const barW = 10;
+    const filled = Math.round(pct * barW);
+    const bar = "\u2588".repeat(filled) + "\u2591".repeat(barW - filled);
+    const pctStr = `${Math.round(pct * 100)}%`;
+    const barColor = pct > 0.8 ? COLORS.error : pct > 0.6 ? COLORS.warning : COLORS.textMuted;
+    parts.push(`ctx [${bar}] ${pctStr}`);
+
+    if (totalTok > 0) parts.push(`${totalTok.toLocaleString()} tok`);
+    if (this._totalCost > 0) parts.push(`$${this._totalCost.toFixed(4)}`);
+    if (this._requestCount > 0) parts.push(`${this._requestCount} req`);
+    if (this._lastTokPerSec > 0) parts.push(`${this._lastTokPerSec} t/s`);
+
+    this.metricsText.content = parts.join("  ·  ");
+    this.metricsText.fg = barColor;
+  }
+}

package/src/components/session-panel.ts

@@ -0,0 +1,294 @@
+import { BoxRenderable, TextRenderable, InputRenderable, type CliRenderer } from "@opentui/core";
+import { COLORS } from "../theme/colors.ts";
+import { ICONS } from "../theme/icons.ts";
+import { store } from "../state/store.ts";
+
+function timeAgo(ts: number): string {
+  const diff = Date.now() - ts;
+  if (diff < 60000) return "now";
+  if (diff < 3600000) return `${Math.floor(diff / 60000)}m`;
+  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h`;
+  return `${Math.floor(diff / 86400000)}d`;
+}
+
+export class SessionPanel {
+  private panel: BoxRenderable;
+  private listBox: BoxRenderable;
+  private renameInput: InputRenderable | null = null;
+  private _visible = false;
+  private selectedIndex = 0;
+  private sortedSessions: ReturnType<typeof store.get>["sessions"] = [];
+  private confirmingDelete = false;
+  private _renaming = false;
+  private renamingSessionId: string | null = null;
+  private onSelectCallback: ((sessionId: string) => void) | null = null;
+  private onNewCallback: (() => void) | null = null;
+  private onDeleteCallback: ((sessionId: string) => void) | null = null;
+  private onRenameCallback: ((sessionId: string, name: string) => void) | null = null;
+  private onPinCallback: ((sessionId: string) => void) | null = null;
+  private onOpenTabCallback: ((sessionId: string) => void) | null = null;
+  private onRenameEndCallback: (() => void) | null = null;
+
+  constructor(private renderer: CliRenderer) {
+    this.panel = new BoxRenderable(renderer, {
+      id: "session-panel",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: 34,
+      height: "100%",
+      backgroundColor: COLORS.bgDarker,
+      flexDirection: "column",
+      border: ["right"],
+      borderStyle: "single",
+      borderColor: COLORS.borderDim,
+      paddingTop: 1,
+      paddingLeft: 1,
+      paddingRight: 1,
+    });
+    this.panel.visible = false;
+
+    this.panel.add(new TextRenderable(renderer, {
+      id: "session-title",
+      content: "chats",
+      fg: COLORS.textMuted,
+      attributes: 1,
+      marginBottom: 1,
+    }));
+
+    this.listBox = new BoxRenderable(renderer, {
+      id: "session-list",
+      flexDirection: "column",
+      flexGrow: 1,
+    });
+    this.panel.add(this.listBox);
+
+    this.panel.add(new TextRenderable(renderer, {
+      id: "session-hints",
+      content: "enter switch  o open  n new  d del  r rename  p pin",
+      fg: COLORS.borderDim,
+      marginTop: 1,
+    }));
+
+    renderer.root.add(this.panel);
+  }
+
+  get visible(): boolean { return this._visible; }
+  get isRenaming(): boolean { return this._renaming; }
+
+  onSelect(cb: (sessionId: string) => void): void { this.onSelectCallback = cb; }
+  onNew(cb: () => void): void { this.onNewCallback = cb; }
+  onDelete(cb: (sessionId: string) => void): void { this.onDeleteCallback = cb; }
+  onRename(cb: (sessionId: string, name: string) => void): void { this.onRenameCallback = cb; }
+  onPin(cb: (sessionId: string) => void): void { this.onPinCallback = cb; }
+  onOpenTab(cb: (sessionId: string) => void): void { this.onOpenTabCallback = cb; }
+  onRenameEnd(cb: () => void): void { this.onRenameEndCallback = cb; }
+
+  toggle(): void { if (this._visible) this.hide(); else this.show(); }
+
+  show(): void {
+    this._visible = true;
+    this.panel.visible = true;
+    this.confirmingDelete = false;
+    this.exitRename();
+    this.selectedIndex = 0;
+    this.updateList(); // populate sortedSessions first
+    const state = store.get();
+    const idx = this.sortedSessions.findIndex((s) => s.id === state.activeSessionId);
+    if (idx >= 0) this.selectedIndex = idx;
+    this.updateList(); // re-render with correct selection
+    this.renderer.requestRender();
+  }
+
+  hide(): void {
+    this._visible = false;
+    this.panel.visible = false;
+    this.exitRename();
+    this.renderer.requestRender();
+  }
+
+  navigate(delta: number): void {
+    if (this._renaming) return;
+    if (this.sortedSessions.length === 0) return;
+    this.confirmingDelete = false;
+    this.selectedIndex = Math.max(0, Math.min(this.sortedSessions.length - 1, this.selectedIndex + delta));
+    this.updateList();
+    this.renderer.requestRender();
+  }
+
+  selectCurrent(): void {
+    if (this._renaming) return;
+    const session = this.sortedSessions[this.selectedIndex];
+    if (!session) return;
+    if (this.confirmingDelete) {
+      this.onDeleteCallback?.(session.id);
+      this.confirmingDelete = false;
+      if (this.selectedIndex > 0) this.selectedIndex--;
+      this.updateList();
+      return;
+    }
+    this.onSelectCallback?.(session.id);
+    this.hide();
+  }
+
+  createNew(): void {
+    this.onNewCallback?.();
+    this.updateList();
+    // New session is most recent, should be first in sorted (by updatedAt desc)
+    this.selectedIndex = 0;
+    this.updateList();
+    this.renderer.requestRender();
+  }
+
+  handleAction(key: string): void {
+    if (key === "rename-cancel") {
+      this.exitRename();
+      this.updateList();
+      this.renderer.requestRender();
+      return;
+    }
+    if (this._renaming) return;
+    const session = this.sortedSessions[this.selectedIndex];
+    if (!session) return;
+
+    if (key === "d") {
+      if (this.confirmingDelete) {
+        this.onDeleteCallback?.(session.id);
+        this.confirmingDelete = false;
+        if (this.selectedIndex > 0) this.selectedIndex--;
+      } else {
+        this.confirmingDelete = true;
+      }
+      this.updateList();
+      this.renderer.requestRender();
+    } else if (key === "p") {
+      this.onPinCallback?.(session.id);
+      this.updateList();
+      this.renderer.requestRender();
+    } else if (key === "o") {
+      // Open in a new tab (keeps current tab open)
+      this.onOpenTabCallback?.(session.id);
+      this.hide();
+    } else if (key === "r") {
+      this._renaming = true;
+      this.renamingSessionId = session.id;
+      this.confirmingDelete = false;
+      this.updateList();
+      this.renderer.requestRender();
+    }
+  }
+
+  private exitRename(): void {
+    this._renaming = false;
+    this.renamingSessionId = null;
+    this.renameInput = null;
+    this.onRenameEndCallback?.();
+  }
+
+  // Compat stubs
+  completeRename(_: string): boolean { return false; }
+  cancelRename(): void { this.exitRename(); }
+
+  private updateList(): void {
+    for (const child of this.listBox.getChildren()) this.listBox.remove(child.id);
+
+    const state = store.get();
+    this.sortedSessions = [...state.sessions].sort((a, b) => {
+      const aPinned = a.pinned ? 1 : 0;
+      const bPinned = b.pinned ? 1 : 0;
+      if (aPinned !== bPinned) return bPinned - aPinned;
+      return b.updatedAt - a.updatedAt;
+    });
+
+    let lastWasPinned = false;
+
+    for (let i = 0; i < this.sortedSessions.length; i++) {
+      const session = this.sortedSessions[i]!;
+      const isSelected = i === this.selectedIndex;
+      const isActive = session.id === state.activeSessionId;
+      const isOpen = state.openTabIds.includes(session.id);
+      const isPinned = !!session.pinned;
+      const msgCount = session.messages.filter((m) => m.role === "user").length;
+      const ago = timeAgo(session.updatedAt);
+
+      if (lastWasPinned && !isPinned) {
+        this.listBox.add(new TextRenderable(this.renderer, {
+          id: `session-sep-${i}`,
+          content: "  " + "\u2500".repeat(28),
+          fg: COLORS.borderDim,
+        }));
+      }
+      lastWasPinned = isPinned;
+
+      const pointer = isSelected ? ICONS.pointer : " ";
+      const dot = isActive ? ICONS.running : isOpen ? ICONS.dot : " ";
+      const pin = isPinned ? "* " : "  ";
+      const name = session.name.length > 14 ? session.name.slice(0, 14) + ".." : session.name.padEnd(16);
+      const meta = `${msgCount > 0 ? String(msgCount).padStart(2) : "  "} ${ago.padStart(3)}`;
+
+      let content = `${pointer}${dot}${pin}${name} ${meta}`;
+      let fg = isSelected ? COLORS.text : COLORS.textMuted;
+
+      if (isSelected && this.confirmingDelete) {
+        content = `${pointer} delete? d=yes esc=no`;
+        fg = COLORS.error as any;
+      }
+
+      this.listBox.add(new TextRenderable(this.renderer, {
+        id: `session-item-${i}`,
+        content,
+        fg,
+        attributes: isSelected ? 1 : 0,
+      }));
+
+      // Insert rename input right below the selected session
+      if (isSelected && this._renaming && this.renamingSessionId === session.id) {
+        const renameRow = new BoxRenderable(this.renderer, {
+          id: `session-rename-${i}`,
+          flexDirection: "row",
+          height: 1,
+          width: "100%",
+          paddingLeft: 4,
+        });
+
+        renameRow.add(new TextRenderable(this.renderer, {
+          id: `session-rename-label-${i}`,
+          content: "> ",
+          fg: COLORS.accent,
+        }));
+
+        this.renameInput = new InputRenderable(this.renderer, {
+          id: `session-rename-input-${i}`,
+          placeholder: "new name",
+          textColor: COLORS.text,
+          placeholderColor: COLORS.borderDim,
+          flexGrow: 1,
+        });
+
+        this.renameInput.value = "";
+
+        this.renameInput.on("enter", () => {
+          const newName = this.renameInput?.value.trim();
+          if (newName && this.renamingSessionId) {
+            this.onRenameCallback?.(this.renamingSessionId, newName);
+          }
+          this.exitRename();
+          this.updateList();
+          this.renderer.requestRender();
+        });
+
+        renameRow.add(this.renameInput);
+        this.listBox.add(renameRow);
+
+        // Defer focus to next tick so the renderable is fully mounted
+        const input = this.renameInput;
+        const r = this.renderer;
+        setTimeout(() => {
+          r.focusRenderable(input);
+          input.focus();
+          r.requestRender();
+        }, 10);
+      }
+    }
+  }
+}