horizon-code 0.1.0

package/src/chat/messages.ts

@@ -0,0 +1,48 @@
+import type { Message, ContentBlock } from "./types.ts";
+
+let messageCounter = 0;
+
+export function createMessage(
+  role: Message["role"],
+  blocks: ContentBlock[],
+  status: Message["status"] = "complete",
+): Message {
+  return {
+    id: `msg-${Date.now()}-${messageCounter++}`,
+    role,
+    content: blocks,
+    timestamp: Date.now(),
+    status,
+  };
+}
+
+export function createUserMessage(text: string): Message {
+  return createMessage("user", [{ type: "text", text }]);
+}
+
+export function createAssistantMessage(text: string, status: Message["status"] = "complete"): Message {
+  return createMessage("assistant", [{ type: "markdown", text }], status);
+}
+
+export function createSystemMessage(text: string): Message {
+  return createMessage("system", [{ type: "text", text }]);
+}
+
+export function createToolCallBlock(toolName: string, args: Record<string, unknown>): ContentBlock {
+  return { type: "tool-call", toolName, toolArgs: args };
+}
+
+export function createToolResultBlock(toolName: string, result: unknown): ContentBlock {
+  return { type: "tool-result", toolName, toolResult: result };
+}
+
+export function createErrorBlock(text: string): ContentBlock {
+  return { type: "error", text };
+}
+
+export function getMessageText(message: Message): string {
+  return message.content
+    .filter((b) => b.type === "text" || b.type === "markdown")
+    .map((b) => b.text ?? "")
+    .join("\n");
+}

package/src/chat/renderer.ts

@@ -0,0 +1,243 @@
+import {
+  BoxRenderable,
+  TextRenderable,
+  MarkdownRenderable,
+  SyntaxStyle,
+  RGBA,
+  type CliRenderer,
+} from "@opentui/core";
+import { COLORS } from "../theme/colors.ts";
+import { renderToolWidget } from "../research/widgets.ts";
+import { renderStrategyWidget } from "../strategy/widgets.ts";
+import { linkifyUrls } from "../util/hyperlink.ts";
+import type { Message, ContentBlock } from "./types.ts";
+
+const h = (hex: string) => RGBA.fromHex(hex);
+const syntaxStyle = SyntaxStyle.fromStyles({
+  "@keyword":          { fg: h("#C586C0") },
+  "@function":         { fg: h("#DCDCAA") },
+  "@function.builtin": { fg: h("#DCDCAA") },
+  "@function.method":  { fg: h("#DCDCAA") },
+  "@string":           { fg: h("#CE9178") },
+  "@number":           { fg: h("#B5CEA8") },
+  "@comment":          { fg: h("#6A9955"), italic: true },
+  "@variable":         { fg: h("#9CDCFE") },
+  "@property":         { fg: h("#9CDCFE") },
+  "@type":             { fg: h("#4EC9B0") },
+  "@constructor":      { fg: h("#4EC9B0") },
+  "@constant":         { fg: h("#4FC1FF") },
+  "@constant.builtin": { fg: h("#569CD6") },
+  "@operator":         { fg: h("#D4D4D4") },
+  "@escape":           { fg: h("#D7BA7D") },
+  "@embedded":         { fg: h("#D7BA7D") },
+  "@punctuation.special": { fg: h("#D7BA7D") },
+});
+
+// Braille spinner frames
+const BRAILLE = [
+  "\u2801", "\u2803", "\u2807", "\u280f",
+  "\u281f", "\u283f", "\u287f", "\u28ff",
+  "\u28fe", "\u28fc", "\u28f8", "\u28f0",
+  "\u28e0", "\u28c0", "\u2880", "\u2800",
+];
+
+// Tool name → human-readable label
+function toolLabel(name: string): string {
+  return name.replace(/_/g, " ");
+}
+
+export class ChatRenderer {
+  private spinnerNodes: TextRenderable[] = [];
+  private spinnerTimer: ReturnType<typeof setInterval> | null = null;
+  private spinnerFrame = 0;
+  private _showToolCalls = true;
+
+  constructor(private renderer: CliRenderer) {}
+
+  setShowToolCalls(show: boolean): void { this._showToolCalls = show; }
+
+  startSpinnerAnimation(): void {
+    if (this.spinnerTimer) return;
+    this.spinnerFrame = 0;
+    this.spinnerTimer = setInterval(() => {
+      if (this.spinnerNodes.length === 0) return;
+      this.spinnerFrame = (this.spinnerFrame + 1) % BRAILLE.length;
+      const char = BRAILLE[this.spinnerFrame]!;
+      for (const node of this.spinnerNodes) {
+        node.content = `${char} `;
+      }
+      this.renderer.requestRender();
+    }, 60);
+  }
+
+  stopSpinnerAnimation(): void {
+    if (this.spinnerTimer) {
+      clearInterval(this.spinnerTimer);
+      this.spinnerTimer = null;
+    }
+    this.spinnerNodes = [];
+  }
+
+  renderMessage(message: Message): BoxRenderable {
+    const isUser = message.role === "user";
+
+    const box = new BoxRenderable(this.renderer, {
+      id: `msg-${message.id}`,
+      flexDirection: "column",
+      width: "100%",
+      backgroundColor: isUser ? COLORS.selection : undefined,
+      paddingLeft: 1,
+      paddingRight: 1,
+      marginTop: 1,
+    });
+
+    if (message.role === "user" || message.role === "assistant") {
+      box.add(new TextRenderable(this.renderer, {
+        id: `msg-label-${message.id}`,
+        content: isUser ? "U S E R" : "H O R I Z O N",
+        fg: isUser ? COLORS.textMuted : COLORS.borderDim,
+      }));
+    }
+
+    for (let i = 0; i < message.content.length; i++) {
+      const block = message.content[i]!;
+      const renderable = this.renderBlock(block, message, i);
+      if (renderable) box.add(renderable);
+    }
+
+    return box;
+  }
+
+  private renderBlock(
+    block: ContentBlock,
+    message: Message,
+    index: number,
+  ): BoxRenderable | TextRenderable | MarkdownRenderable | null {
+    switch (block.type) {
+      case "text":
+        return new TextRenderable(this.renderer, {
+          id: `msg-text-${message.id}-${index}`,
+          content: linkifyUrls(block.text ?? ""),
+          fg: COLORS.text,
+        });
+
+      case "markdown":
+        return new MarkdownRenderable(this.renderer, {
+          id: `msg-md-${message.id}-${index}`,
+          content: block.text ?? "",
+          syntaxStyle,
+          streaming: message.status === "streaming",
+        });
+
+      case "tool-widget": {
+        const widget = renderToolWidget(block.toolName ?? "", block.widgetData, this.renderer)
+          ?? renderStrategyWidget(block.toolName ?? "", block.widgetData, this.renderer);
+        return widget;
+      }
+
+      case "tool-call":
+        return this._showToolCalls ? this.renderToolCall(block, message.id, index) : null;
+
+      case "tool-result":
+        return this._showToolCalls ? this.renderToolResult(block, message.id, index) : null;
+
+      case "thinking":
+        return this.renderThinking(message.id, index);
+
+      case "error":
+        return new TextRenderable(this.renderer, {
+          id: `msg-err-${message.id}-${index}`,
+          content: `x ${block.text ?? "Unknown error"}`,
+          fg: COLORS.error,
+        });
+
+      default:
+        return null;
+    }
+  }
+
+  private renderThinking(msgId: string, index: number): BoxRenderable {
+    const box = new BoxRenderable(this.renderer, {
+      id: `msg-think-${msgId}-${index}`,
+      flexDirection: "row",
+    });
+
+    const spinner = new TextRenderable(this.renderer, {
+      id: `msg-think-spin-${msgId}-${index}`,
+      content: `${BRAILLE[0]} `,
+      fg: COLORS.textMuted,
+    });
+    this.spinnerNodes.push(spinner);
+    box.add(spinner);
+
+    box.add(new TextRenderable(this.renderer, {
+      id: `msg-think-label-${msgId}-${index}`,
+      content: "thinking",
+      fg: COLORS.textMuted,
+    }));
+
+    return box;
+  }
+
+  // Tool in-progress: braille spinner + name
+  private renderToolCall(block: ContentBlock, msgId: string, index: number): BoxRenderable {
+    const box = new BoxRenderable(this.renderer, {
+      id: `msg-tool-${msgId}-${index}`,
+      flexDirection: "row",
+    });
+
+    const spinner = new TextRenderable(this.renderer, {
+      id: `msg-tool-icon-${msgId}-${index}`,
+      content: `${BRAILLE[0]} `,
+      fg: COLORS.textMuted,
+    });
+    this.spinnerNodes.push(spinner);
+    box.add(spinner);
+
+    box.add(new TextRenderable(this.renderer, {
+      id: `msg-tool-name-${msgId}-${index}`,
+      content: toolLabel(block.toolName ?? "tool"),
+      fg: COLORS.textMuted,
+    }));
+
+    return box;
+  }
+
+  // Tool completed: tick or error icon + name
+  private renderToolResult(block: ContentBlock, msgId: string, index: number): BoxRenderable {
+    const box = new BoxRenderable(this.renderer, {
+      id: `msg-result-${msgId}-${index}`,
+      flexDirection: "row",
+      marginBottom: 1,
+    });
+
+    const hasError = block.toolResult && typeof block.toolResult === "object" && "error" in (block.toolResult as any);
+    box.add(new TextRenderable(this.renderer, {
+      id: `msg-result-icon-${msgId}-${index}`,
+      content: hasError ? "x " : ". ",
+      fg: hasError ? COLORS.error : COLORS.success,
+    }));
+
+    const label = toolLabel(block.toolName ?? "done");
+    const errorText = hasError ? ` — ${((block.toolResult as any).error ?? "").slice(0, 60)}` : "";
+    box.add(new TextRenderable(this.renderer, {
+      id: `msg-result-name-${msgId}-${index}`,
+      content: label + errorText,
+      fg: hasError ? COLORS.error : COLORS.textMuted,
+    }));
+
+    return box;
+  }
+
+  updateStreamingMessage(_msgId: string, container: BoxRenderable, text: string): void {
+    // Find the last MarkdownRenderable in the container (could be at any index after tool blocks)
+    const children = container.getChildren();
+    let lastMd: MarkdownRenderable | null = null;
+    for (const child of children) {
+      if (child instanceof MarkdownRenderable) lastMd = child;
+    }
+    if (lastMd) {
+      lastMd.content = text;
+    }
+  }
+}

package/src/chat/types.ts

@@ -0,0 +1,18 @@
+export type MessageRole = "user" | "assistant" | "system";
+
+export interface ContentBlock {
+  type: "text" | "markdown" | "tool-call" | "tool-result" | "tool-widget" | "thinking" | "error";
+  text?: string;
+  toolName?: string;
+  toolArgs?: Record<string, unknown>;
+  toolResult?: unknown;
+  widgetData?: unknown;
+}
+
+export interface Message {
+  id: string;
+  role: MessageRole;
+  content: ContentBlock[];
+  timestamp: number;
+  status: "pending" | "thinking" | "streaming" | "complete" | "error";
+}

package/src/components/code-panel.ts

@@ -0,0 +1,329 @@
+// Code panel — split-view right panel with tabs: Code, Logs, Dashboard
+// Sits beside the chat in a horizontal flex layout (not an overlay)
+
+import {
+  BoxRenderable,
+  TextRenderable,
+  ScrollBoxRenderable,
+  MarkdownRenderable,
+  SyntaxStyle,
+  RGBA,
+  type CliRenderer,
+} from "@opentui/core";
+type TreeSitterClient = any;
+import { COLORS } from "../theme/colors.ts";
+
+const h = (hex: string) => RGBA.fromHex(hex);
+
+// Python syntax colors (matches highlights.scm groups)
+const syntaxStyle = SyntaxStyle.fromStyles({
+  "@keyword":          { fg: h("#C586C0") },          // purple
+  "@function":         { fg: h("#DCDCAA") },          // yellow
+  "@function.builtin": { fg: h("#DCDCAA") },          // yellow
+  "@function.method":  { fg: h("#DCDCAA") },          // yellow
+  "@string":           { fg: h("#CE9178") },          // orange
+  "@number":           { fg: h("#B5CEA8") },          // light green
+  "@comment":          { fg: h("#6A9955"), italic: true }, // green
+  "@variable":         { fg: h("#9CDCFE") },          // light blue
+  "@property":         { fg: h("#9CDCFE") },          // light blue
+  "@type":             { fg: h("#4EC9B0") },          // teal
+  "@constructor":      { fg: h("#4EC9B0") },          // teal
+  "@constant":         { fg: h("#4FC1FF") },          // bright blue
+  "@constant.builtin": { fg: h("#569CD6") },          // blue
+  "@operator":         { fg: h("#D4D4D4") },          // gray
+  "@escape":           { fg: h("#D7BA7D") },          // gold
+  "@embedded":         { fg: h("#D7BA7D") },          // gold
+  "@punctuation.special": { fg: h("#D7BA7D") },       // gold
+});
+
+type PanelTab = "code" | "logs" | "dashboard";
+
+export class CodePanel {
+  readonly container: BoxRenderable;
+  private tabBar: BoxRenderable;
+  private tabTexts: Map<PanelTab, TextRenderable> = new Map();
+  private statusIcon: TextRenderable;
+
+  // Tab content areas
+  private codeScroll: ScrollBoxRenderable;
+  private codeMd: MarkdownRenderable;
+  private logsScroll: ScrollBoxRenderable;
+  private logsMd: MarkdownRenderable;
+  private dashScroll: ScrollBoxRenderable;
+  private dashMd: MarkdownRenderable;
+
+  private footerText: TextRenderable;
+  private _visible = false;
+  private _activeTab: PanelTab = "code";
+  private _code = "";
+  private _name = "";
+  private _phase = "";
+  private _logs = "";
+  private _dashboardHtml = "";
+  private _validationStatus: "pending" | "valid" | "invalid" | "none" = "none";
+
+  constructor(private renderer: CliRenderer) {
+    this.container = new BoxRenderable(renderer, {
+      id: "code-panel",
+      width: "50%",
+      height: "100%",
+      flexDirection: "column",
+      borderColor: COLORS.borderDim,
+    });
+    this.container.visible = false;
+
+    // ── Tab bar ──
+    this.tabBar = new BoxRenderable(renderer, {
+      id: "code-tabs",
+      height: 1,
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      paddingLeft: 1,
+      paddingRight: 1,
+      backgroundColor: COLORS.bgDarker,
+      flexShrink: 0,
+    });
+
+    // Validation status icon
+    this.statusIcon = new TextRenderable(renderer, {
+      id: "code-status", content: "  ", fg: COLORS.textMuted,
+    });
+    this.tabBar.add(this.statusIcon);
+
+    // Tab pills
+    const tabs: { id: PanelTab; label: string }[] = [
+      { id: "code", label: "Code" },
+      { id: "logs", label: "Logs" },
+      { id: "dashboard", label: "Dashboard" },
+    ];
+    for (const tab of tabs) {
+      const text = new TextRenderable(renderer, {
+        id: `code-tab-${tab.id}`,
+        content: ` ${tab.label} `,
+        fg: COLORS.textMuted,
+      });
+      this.tabTexts.set(tab.id, text);
+      this.tabBar.add(text);
+    }
+
+    this.container.add(this.tabBar);
+
+    // ── Code tab content ──
+    this.codeScroll = new ScrollBoxRenderable(renderer, {
+      id: "code-scroll",
+      flexGrow: 1,
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 1,
+      stickyScroll: false,
+    });
+    this.codeMd = new MarkdownRenderable(renderer, {
+      id: "code-md",
+      content: "*no strategy loaded*\n\n*Describe a strategy in the chat to get started.*",
+      syntaxStyle,
+    });
+    this.codeScroll.add(this.codeMd);
+    this.container.add(this.codeScroll);
+
+    // ── Logs tab content ──
+    this.logsScroll = new ScrollBoxRenderable(renderer, {
+      id: "logs-scroll",
+      flexGrow: 1,
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 1,
+      stickyScroll: true,
+      stickyStart: "bottom",
+    });
+    this.logsScroll.visible = false;
+    this.logsMd = new MarkdownRenderable(renderer, {
+      id: "logs-md",
+      content: "*no process running*\n\n*Use run_strategy to start.*",
+      syntaxStyle,
+    });
+    this.logsScroll.add(this.logsMd);
+    this.container.add(this.logsScroll);
+
+    // ── Dashboard tab content ──
+    this.dashScroll = new ScrollBoxRenderable(renderer, {
+      id: "dash-scroll",
+      flexGrow: 1,
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 1,
+      stickyScroll: false,
+    });
+    this.dashScroll.visible = false;
+    this.dashMd = new MarkdownRenderable(renderer, {
+      id: "dash-md",
+      content: "*no dashboard generated*\n\n*Ask the LLM to build a dashboard.*",
+      syntaxStyle,
+    });
+    this.dashScroll.add(this.dashMd);
+    this.container.add(this.dashScroll);
+
+    // ── Footer ──
+    this.footerText = new TextRenderable(renderer, {
+      id: "code-footer",
+      content: " ^G close  |  Tab cycle  |  1 code  2 logs  3 dash",
+      fg: COLORS.borderDim,
+    });
+    this.container.add(this.footerText);
+
+    this.updateTabBar();
+  }
+
+  get visible(): boolean { return this._visible; }
+  get activeTab(): PanelTab { return this._activeTab; }
+  getCode(): string { return this._code; }
+
+  /** Enable Python syntax highlighting by setting a tree-sitter client */
+  setTreeSitterClient(client: TreeSitterClient): void {
+    (this.codeMd as any).treeSitterClient = client;
+    (this.logsMd as any).treeSitterClient = client;
+    (this.dashMd as any).treeSitterClient = client;
+  }
+
+  // ── Tab switching ──
+
+  setTab(tab: PanelTab): void {
+    this._activeTab = tab;
+    this.codeScroll.visible = tab === "code";
+    this.logsScroll.visible = tab === "logs";
+    this.dashScroll.visible = tab === "dashboard";
+    // Refresh content for the active tab
+    if (tab === "code") this.updateCodeContent();
+    else if (tab === "logs") this.updateLogsContent();
+    else if (tab === "dashboard") this.updateDashContent();
+    this.updateTabBar();
+    this.renderer.requestRender();
+  }
+
+  cycleTab(): void {
+    const order: PanelTab[] = ["code", "logs", "dashboard"];
+    const idx = order.indexOf(this._activeTab);
+    this.setTab(order[(idx + 1) % order.length]!);
+  }
+
+  // ── Content setters ──
+
+  setCode(code: string, status: "pending" | "valid" | "invalid" | "none" = "none"): void {
+    this._code = code;
+    this._validationStatus = status;
+    if (this._activeTab === "code") this.updateCodeContent();
+    this.updateStatusIcon();
+  }
+
+  setStrategy(name: string, phase: string): void {
+    this._name = name;
+    this._phase = phase;
+    this.updateTabBar();
+  }
+
+  setLogs(logs: string): void {
+    this._logs = logs;
+    if (this._activeTab === "logs") this.updateLogsContent();
+  }
+
+  appendLog(line: string): void {
+    this._logs += (this._logs ? "\n" : "") + line;
+    // Keep last 200 lines
+    const lines = this._logs.split("\n");
+    if (lines.length > 200) this._logs = lines.slice(-200).join("\n");
+    if (this._activeTab === "logs") this.updateLogsContent();
+  }
+
+  setDashboardHtml(html: string): void {
+    this._dashboardHtml = html;
+    if (this._activeTab === "dashboard") this.updateDashContent();
+  }
+
+  // ── Visibility ──
+
+  show(): void {
+    this._visible = true;
+    this.container.visible = true;
+    this.renderer.requestRender();
+  }
+
+  hide(): void {
+    this._visible = false;
+    this.container.visible = false;
+    this.renderer.requestRender();
+  }
+
+  toggle(): void {
+    if (this._visible) this.hide();
+    else this.show();
+  }
+
+  // ── Internal rendering ──
+
+  private updateTabBar(): void {
+    for (const [id, text] of this.tabTexts) {
+      if (id === this._activeTab) {
+        text.fg = "#212121";
+        text.bg = COLORS.accent;
+        text.content = id === "code"
+          ? ` ${this._name || "Code"} `
+          : ` ${id.charAt(0).toUpperCase() + id.slice(1)} `;
+      } else {
+        text.fg = COLORS.textMuted;
+        text.bg = undefined;
+        text.content = ` ${id.charAt(0).toUpperCase() + id.slice(1)} `;
+      }
+    }
+  }
+
+  private updateStatusIcon(): void {
+    switch (this._validationStatus) {
+      case "valid":
+        this.statusIcon.content = ". ";
+        this.statusIcon.fg = COLORS.success;
+        break;
+      case "invalid":
+        this.statusIcon.content = "x ";
+        this.statusIcon.fg = COLORS.error;
+        break;
+      case "pending":
+        this.statusIcon.content = "~ ";
+        this.statusIcon.fg = COLORS.warning;
+        break;
+      default:
+        this.statusIcon.content = "  ";
+        this.statusIcon.fg = COLORS.textMuted;
+    }
+  }
+
+  private updateCodeContent(): void {
+    if (!this._code) {
+      if (this._validationStatus === "pending") {
+        this.codeMd.content = "*Generating strategy code...*\n\n*The code will appear here when ready.*";
+      } else {
+        this.codeMd.content = "*no strategy loaded*\n\n*Describe a strategy in the chat to get started.*";
+      }
+    } else {
+      this.codeMd.content = "```python\n" + this._code + "\n```";
+    }
+    this.renderer.requestRender();
+  }
+
+  private updateLogsContent(): void {
+    if (!this._logs) {
+      this.logsMd.content = "*no process running*\n\n*Use run_strategy to start.*";
+    } else {
+      this.logsMd.content = "```\n" + this._logs + "\n```";
+    }
+    this.renderer.requestRender();
+  }
+
+  private updateDashContent(): void {
+    if (!this._dashboardHtml) {
+      this.dashMd.content = "*no dashboard generated*\n\n*Ask the LLM to build a dashboard.*";
+    } else {
+      this.dashMd.content = "```html\n" + this._dashboardHtml + "\n```";
+    }
+    this.renderer.requestRender();
+  }
+}