horizon-code 0.1.0

package/src/components/footer.ts

@@ -0,0 +1,72 @@
+import { BoxRenderable, TextRenderable, type CliRenderer } from "@opentui/core";
+import { COLORS } from "../theme/colors.ts";
+import { store } from "../state/store.ts";
+
+const BRAILLE = ["\u2801", "\u2803", "\u2807", "\u280f", "\u281f", "\u283f", "\u287f", "\u28ff", "\u28fe", "\u28fc", "\u28f8", "\u28f0", "\u28e0", "\u28c0", "\u2880", "\u2800"];
+
+export class Footer {
+  private container: BoxRenderable;
+  private streamingText: TextRenderable;
+  private hintsText: TextRenderable;
+  private _privacy = false;
+  private spinnerFrame = 0;
+  private spinnerTimer: ReturnType<typeof setInterval> | null = null;
+
+  constructor(private renderer: CliRenderer) {
+    this.container = new BoxRenderable(renderer, {
+      id: "footer",
+      height: 1,
+      width: "100%",
+      backgroundColor: COLORS.bgDarker,
+      flexDirection: "row",
+      alignItems: "center",
+      paddingLeft: 2,
+      paddingRight: 2,
+      flexShrink: 0,
+    });
+
+    this.streamingText = new TextRenderable(renderer, {
+      id: "footer-streaming", content: "", fg: COLORS.textMuted,
+    });
+    this.container.add(this.streamingText);
+
+    this.container.add(new BoxRenderable(renderer, { id: "footer-spacer", flexGrow: 1 }));
+
+    this.hintsText = new TextRenderable(renderer, {
+      id: "footer-hints",
+      content: "esc stop  ^N new chat  ^L ^H switch  ^W close  ^R mode  ^E chats  ^D bots  / cmd",
+      fg: COLORS.borderDim,
+    });
+    this.container.add(this.hintsText);
+
+    // Smooth spinner animation — own interval, not dependent on store updates
+    this.spinnerTimer = setInterval(() => {
+      const session = store.getActiveSession();
+      if (session?.isStreaming) {
+        this.spinnerFrame = (this.spinnerFrame + 1) % BRAILLE.length;
+        this.streamingText.content = `${BRAILLE[this.spinnerFrame]} generating`;
+        this.streamingText.fg = COLORS.accent;
+        this.renderer.requestRender();
+      }
+    }, 60);
+  }
+
+  get renderable(): BoxRenderable { return this.container; }
+
+  setPrivacy(active: boolean): void { this._privacy = active; }
+  setMetrics(_active: boolean): void {}
+
+  update(): void {
+    const session = store.getActiveSession();
+    if (!session?.isStreaming) {
+      this.streamingText.content = "";
+    }
+  }
+
+  destroy(): void {
+    if (this.spinnerTimer) {
+      clearInterval(this.spinnerTimer);
+      this.spinnerTimer = null;
+    }
+  }
+}

package/src/components/hooks-panel.ts

@@ -0,0 +1,224 @@
+// Hooks panel — manage user-defined bash commands for strategy lifecycle events
+
+import { BoxRenderable, TextRenderable, InputRenderable, type CliRenderer } from "@opentui/core";
+import { COLORS } from "../theme/colors.ts";
+import { loadHooks, saveHooks, HOOK_EVENTS, type HookConfig, type HookEvent } from "../hooks/executor.ts";
+
+type PanelMode = "list" | "add_event" | "add_command";
+
+export class HooksPanel {
+  readonly container: BoxRenderable;
+  private listBox: BoxRenderable;
+  private inputBox: BoxRenderable;
+  private hookInput: InputRenderable;
+  private _visible = false;
+  private selectedIndex = 0;
+  private hooks: HookConfig[] = [];
+  private mode: PanelMode = "list";
+  private pendingEvent: HookEvent | null = null;
+  private eventSelectIndex = 0;
+
+  constructor(private renderer: CliRenderer) {
+    this.container = new BoxRenderable(renderer, {
+      id: "hooks-panel",
+      width: "50%",
+      height: "100%",
+      flexDirection: "column",
+      borderColor: COLORS.borderDim,
+    });
+    this.container.visible = false;
+
+    // Header
+    const header = new BoxRenderable(renderer, {
+      id: "hooks-header", height: 1, width: "100%",
+      flexDirection: "row", alignItems: "center", paddingLeft: 1,
+      backgroundColor: COLORS.bgDarker, flexShrink: 0,
+    });
+    header.add(new TextRenderable(renderer, {
+      id: "hooks-title", content: " Hooks ", fg: "#212121", bg: COLORS.accent,
+    }));
+    this.container.add(header);
+
+    // List
+    this.listBox = new BoxRenderable(renderer, {
+      id: "hooks-list", flexDirection: "column", flexGrow: 1,
+      paddingTop: 1, paddingLeft: 2, paddingRight: 2,
+    });
+    this.container.add(this.listBox);
+
+    // Input row (for adding hooks)
+    this.inputBox = new BoxRenderable(renderer, {
+      id: "hooks-input-box", flexDirection: "row", height: 1,
+      width: "100%", paddingLeft: 2,
+    });
+    this.inputBox.visible = false;
+    this.inputBox.add(new TextRenderable(renderer, {
+      id: "hooks-input-label", content: "> ", fg: COLORS.accent,
+    }));
+    this.hookInput = new InputRenderable(renderer, {
+      id: "hooks-input", placeholder: "bash command",
+      textColor: COLORS.text, placeholderColor: COLORS.borderDim, flexGrow: 1,
+    });
+    this.hookInput.on("enter", () => this.onInputSubmit());
+    this.inputBox.add(this.hookInput);
+    this.container.add(this.inputBox);
+
+    // Footer
+    this.container.add(new TextRenderable(renderer, {
+      id: "hooks-footer",
+      content: " a add  d delete  space toggle  esc close",
+      fg: COLORS.borderDim,
+    }));
+
+    this.hooks = loadHooks();
+  }
+
+  get visible(): boolean { return this._visible; }
+
+  show(): void {
+    this._visible = true;
+    this.container.visible = true;
+    this.hooks = loadHooks();
+    this.mode = "list";
+    this.selectedIndex = 0;
+    this.render();
+    this.renderer.requestRender();
+  }
+
+  hide(): void {
+    this._visible = false;
+    this.container.visible = false;
+    this.mode = "list";
+    this.inputBox.visible = false;
+    this.renderer.requestRender();
+  }
+
+  toggle(): void { this._visible ? this.hide() : this.show(); }
+
+  navigate(delta: number): void {
+    if (this.mode === "add_event") {
+      this.eventSelectIndex = Math.max(0, Math.min(HOOK_EVENTS.length - 1, this.eventSelectIndex + delta));
+    } else {
+      const max = Math.max(0, this.hooks.length - 1);
+      this.selectedIndex = Math.max(0, Math.min(max, this.selectedIndex + delta));
+    }
+    this.render();
+    this.renderer.requestRender();
+  }
+
+  handleKey(key: string): void {
+    if (this.mode === "add_command") return; // input has focus
+
+    if (this.mode === "add_event") {
+      if (key === "return") {
+        this.pendingEvent = HOOK_EVENTS[this.eventSelectIndex]!;
+        this.mode = "add_command";
+        this.inputBox.visible = true;
+        this.hookInput.value = "";
+        setTimeout(() => { this.renderer.focusRenderable(this.hookInput); this.renderer.requestRender(); }, 10);
+        this.render();
+        this.renderer.requestRender();
+      } else if (key === "escape") {
+        this.mode = "list";
+        this.render();
+        this.renderer.requestRender();
+      }
+      return;
+    }
+
+    // List mode
+    if (key === "a") {
+      this.mode = "add_event";
+      this.eventSelectIndex = 0;
+      this.render();
+      this.renderer.requestRender();
+    } else if (key === "d" && this.hooks.length > 0) {
+      this.hooks.splice(this.selectedIndex, 1);
+      saveHooks(this.hooks);
+      if (this.selectedIndex > 0) this.selectedIndex--;
+      this.render();
+      this.renderer.requestRender();
+    } else if (key === " " && this.hooks.length > 0) {
+      this.hooks[this.selectedIndex]!.enabled = !this.hooks[this.selectedIndex]!.enabled;
+      saveHooks(this.hooks);
+      this.render();
+      this.renderer.requestRender();
+    }
+  }
+
+  private onInputSubmit(): void {
+    const cmd = this.hookInput.value.trim();
+    if (cmd && this.pendingEvent) {
+      this.hooks.push({ event: this.pendingEvent, command: cmd, enabled: true });
+      saveHooks(this.hooks);
+    }
+    this.mode = "list";
+    this.inputBox.visible = false;
+    this.pendingEvent = null;
+    this.selectedIndex = Math.max(0, this.hooks.length - 1);
+    this.render();
+    this.renderer.requestRender();
+  }
+
+  private render(): void {
+    for (const child of this.listBox.getChildren()) this.listBox.remove(child.id);
+
+    if (this.mode === "add_event") {
+      this.listBox.add(new TextRenderable(this.renderer, {
+        id: "hooks-select-title", content: "Select event:", fg: COLORS.text, attributes: 1, marginBottom: 1,
+      }));
+      for (let i = 0; i < HOOK_EVENTS.length; i++) {
+        const sel = i === this.eventSelectIndex;
+        this.listBox.add(new TextRenderable(this.renderer, {
+          id: `hooks-ev-${i}`,
+          content: `${sel ? "> " : "  "}${HOOK_EVENTS[i]}`,
+          fg: sel ? COLORS.text : COLORS.textMuted,
+          attributes: sel ? 1 : 0,
+        }));
+      }
+      return;
+    }
+
+    // List mode
+    if (this.hooks.length === 0) {
+      this.listBox.add(new TextRenderable(this.renderer, {
+        id: "hooks-empty", content: "No hooks configured.\nPress 'a' to add one.", fg: COLORS.textMuted,
+      }));
+      return;
+    }
+
+    for (let i = 0; i < this.hooks.length; i++) {
+      const h = this.hooks[i]!;
+      const sel = i === this.selectedIndex;
+      const status = h.enabled ? "[on] " : "[off]";
+      const statusColor = h.enabled ? COLORS.success : COLORS.borderDim;
+
+      const row = new BoxRenderable(this.renderer, {
+        id: `hook-row-${i}`, flexDirection: "column", width: "100%", marginBottom: 1,
+      });
+
+      const line = new BoxRenderable(this.renderer, {
+        id: `hook-line-${i}`, flexDirection: "row",
+      });
+      line.add(new TextRenderable(this.renderer, {
+        id: `hook-ptr-${i}`, content: sel ? "> " : "  ", fg: COLORS.accent,
+      }));
+      line.add(new TextRenderable(this.renderer, {
+        id: `hook-status-${i}`, content: status, fg: statusColor,
+      }));
+      line.add(new TextRenderable(this.renderer, {
+        id: `hook-event-${i}`, content: ` ${h.event} `, fg: COLORS.textMuted,
+      }));
+      row.add(line);
+
+      // Command on second line
+      row.add(new TextRenderable(this.renderer, {
+        id: `hook-cmd-${i}`,
+        content: `    ${h.command.length > 35 ? h.command.slice(0, 34) + "." : h.command}`,
+        fg: sel ? COLORS.text : COLORS.borderDim,
+      }));
+
+      this.listBox.add(row);
+    }
+  }
+}

package/src/components/input-bar.ts

@@ -0,0 +1,193 @@
+import { BoxRenderable, InputRenderable, TextRenderable, type CliRenderer } from "@opentui/core";
+import { COLORS } from "../theme/colors.ts";
+
+export class InputBar {
+  private container: BoxRenderable;
+  private input: InputRenderable;
+  private prompt: TextRenderable;
+
+  // Autocomplete
+  private acBox: BoxRenderable;
+  private acItems: TextRenderable[] = [];
+  private _acVisible = false;
+  private _acSelected = 0;
+  private _acMatches: string[] = [];
+  private _commands: Record<string, string> = {};
+
+  private onSubmitCallback: ((text: string) => void) | null = null;
+  private onAcChangeCallback: ((visible: boolean) => void) | null = null;
+
+  constructor(private renderer: CliRenderer) {
+    this.container = new BoxRenderable(renderer, {
+      id: "input-bar",
+      width: "100%",
+      flexDirection: "column",
+      flexShrink: 0,
+    });
+
+    // ── Autocomplete dropdown (above input, hidden by default) ──
+    this.acBox = new BoxRenderable(renderer, {
+      id: "input-ac",
+      width: "100%",
+      flexDirection: "column",
+      paddingLeft: 4,
+      backgroundColor: COLORS.bgSecondary,
+    });
+    this.acBox.visible = false;
+    this.container.add(this.acBox);
+
+    // Pre-create suggestion slots (max 8)
+    for (let i = 0; i < 8; i++) {
+      const item = new TextRenderable(renderer, {
+        id: `input-ac-${i}`, content: "", fg: COLORS.textMuted,
+      });
+      this.acItems.push(item);
+      this.acBox.add(item);
+    }
+
+    // ── Input row ──
+    const inputRow = new BoxRenderable(renderer, {
+      id: "input-row",
+      height: 3,
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      backgroundColor: COLORS.bgDarker,
+      paddingLeft: 2,
+    });
+    this.container.add(inputRow);
+
+    this.prompt = new TextRenderable(renderer, {
+      id: "input-prompt", content: "> ", fg: COLORS.textMuted,
+    });
+    inputRow.add(this.prompt);
+
+    this.input = new InputRenderable(renderer, {
+      id: "input-field",
+      placeholder: "Message Horizon... (/ for commands)",
+      textColor: COLORS.text,
+      flexGrow: 1,
+      paddingRight: 2,
+    });
+    inputRow.add(this.input);
+
+    // ── Events ──
+    this.input.on("enter", () => {
+      // If autocomplete visible and item selected, insert it
+      if (this._acVisible && this._acMatches.length > 0) {
+        this.input.value = this._acMatches[this._acSelected]! + " ";
+        this.hideAc();
+        return;
+      }
+
+      const text = this.input.value.trim();
+      if (text.length === 0) return;
+      this.input.value = "";
+      this.hideAc();
+      this.onSubmitCallback?.(text);
+    });
+
+    // Listen for text changes to trigger autocomplete
+    this.input.on("input", () => {
+      this.onInputChange();
+    });
+  }
+
+  get renderable(): BoxRenderable { return this.container; }
+  get inputRenderable(): InputRenderable { return this.input; }
+  get acVisible(): boolean { return this._acVisible; }
+
+  onSubmit(cb: (text: string) => void): void { this.onSubmitCallback = cb; }
+  onAcChange(cb: (visible: boolean) => void): void { this.onAcChangeCallback = cb; }
+
+  /** Register available slash commands for autocomplete */
+  setCommands(commands: Record<string, string>): void {
+    this._commands = commands;
+  }
+
+  focus(): void { this.renderer.focusRenderable(this.input); }
+  clear(): void { this.input.value = ""; this.hideAc(); }
+
+  // ── Autocomplete navigation (called from key handler) ──
+
+  acUp(): void {
+    if (!this._acVisible) return;
+    this._acSelected = Math.max(0, this._acSelected - 1);
+    this.renderAc();
+  }
+
+  acDown(): void {
+    if (!this._acVisible) return;
+    this._acSelected = Math.min(this._acMatches.length - 1, this._acSelected + 1);
+    this.renderAc();
+  }
+
+  acAccept(): void {
+    if (!this._acVisible || this._acMatches.length === 0) return;
+    this.input.value = this._acMatches[this._acSelected]! + " ";
+    this.hideAc();
+  }
+
+  acDismiss(): void {
+    this.hideAc();
+  }
+
+  // ── Internal ──
+
+  private onInputChange(): void {
+    const val = this.input.value;
+
+    // Only show autocomplete when typing a slash command
+    if (!val.startsWith("/") || val.includes(" ")) {
+      this.hideAc();
+      return;
+    }
+
+    const prefix = val.toLowerCase();
+    this._acMatches = Object.keys(this._commands)
+      .filter((cmd) => cmd.startsWith(prefix) && cmd !== val)
+      .slice(0, 8);
+
+    if (this._acMatches.length === 0) {
+      this.hideAc();
+      return;
+    }
+
+    this._acSelected = 0;
+    this._acVisible = true;
+    this.acBox.visible = true;
+    this.onAcChangeCallback?.(true);
+    this.renderAc();
+  }
+
+  private renderAc(): void {
+    for (let i = 0; i < this.acItems.length; i++) {
+      const item = this.acItems[i]!;
+      if (i < this._acMatches.length) {
+        const cmd = this._acMatches[i]!;
+        const desc = this._commands[cmd] ?? "";
+        const selected = i === this._acSelected;
+        item.content = `${selected ? ">" : " "} ${cmd.padEnd(16)} ${desc}`;
+        item.fg = selected ? COLORS.text : COLORS.textMuted;
+        item.bg = selected ? COLORS.selection : undefined;
+        item.visible = true;
+      } else {
+        item.content = "";
+        item.visible = false;
+      }
+    }
+    this.renderer.requestRender();
+  }
+
+  private hideAc(): void {
+    if (!this._acVisible) return;
+    this._acVisible = false;
+    this.acBox.visible = false;
+    this.onAcChangeCallback?.(false);
+    for (const item of this.acItems) {
+      item.content = "";
+      item.visible = false;
+    }
+    this.renderer.requestRender();
+  }
+}