horizon-code 0.1.0

package/src/components/settings-panel.ts

@@ -0,0 +1,372 @@
+// Settings panel — interactive settings with toggles, sliders, and selectors
+
+import { BoxRenderable, TextRenderable, type CliRenderer } from "@opentui/core";
+import { COLORS } from "../theme/colors.ts";
+
+import type { ThemeName } from "../theme/colors.ts";
+
+export interface HorizonSettings {
+  autoFocus: boolean;
+  verbosity: "short" | "normal" | "verbose";
+  modelPower: "fast" | "standard" | "pro" | "ultra";
+  autoCompact: boolean;
+  compactThreshold: number;
+  showToolCalls: boolean;
+  soundEnabled: boolean;
+  theme: ThemeName;
+  payAsYouGo: boolean;
+  liveMode: boolean;
+}
+
+const DEFAULT_SETTINGS: HorizonSettings = {
+  autoFocus: true,
+  verbosity: "normal",
+  modelPower: "standard",
+  autoCompact: true,
+  compactThreshold: 80,
+  showToolCalls: true,
+  soundEnabled: false,
+  theme: "dark",
+  payAsYouGo: false,
+  liveMode: false,
+};
+
+interface SettingDef {
+  key: keyof HorizonSettings | "__divider" | "__delete_chats";
+  label: string;
+  description: string;
+  type: "toggle" | "slider" | "select" | "divider" | "action";
+  options?: string[];
+  min?: number;
+  max?: number;
+}
+
+const SETTINGS_DEFS: SettingDef[] = [
+  {
+    key: "autoFocus", label: "Auto Focus",
+    description: "Focus input bar after sending a message",
+    type: "toggle",
+  },
+  {
+    key: "verbosity", label: "Response Style",
+    description: "Short = terse, Normal = default, Verbose = detailed",
+    type: "select", options: ["short", "normal", "verbose"],
+  },
+  {
+    key: "modelPower", label: "Intelligence",
+    description: "Higher = smarter, drains budget faster (0.25x/1x/2x/4x)",
+    type: "select", options: ["fast", "standard", "pro", "ultra"],
+  },
+  {
+    key: "autoCompact", label: "Smart Compact",
+    description: "Auto-compact when context reaches threshold to avoid quality loss",
+    type: "toggle",
+  },
+  {
+    key: "compactThreshold", label: "Compact Warning",
+    description: "Warn about compaction at this context %",
+    type: "slider", min: 50, max: 95,
+  },
+  {
+    key: "showToolCalls", label: "Show Tool Calls",
+    description: "Display tool call indicators in chat",
+    type: "toggle",
+  },
+  {
+    key: "soundEnabled", label: "Sound",
+    description: "Play terminal bell when generation completes",
+    type: "toggle",
+  },
+  {
+    key: "theme", label: "Theme",
+    description: "Applied instantly. Ultra themes: poly, limitless, apple-1984",
+    type: "select", options: ["dark", "light", "midnight", "nord", "solarized", "poly", "poly-dark", "limitless", "apple-1984"],
+  },
+  {
+    key: "__divider", label: "", description: "", type: "divider",
+  },
+  {
+    key: "payAsYouGo", label: "Pay As You Go",
+    description: "Allow extra charges when budget exhausted (off = hard stop)",
+    type: "toggle",
+  },
+  {
+    key: "liveMode", label: "Live Trading",
+    description: "Allow live deployments. OFF = paper only, even if requested",
+    type: "toggle",
+  },
+  {
+    key: "__divider", label: "", description: "", type: "divider",
+  },
+  {
+    key: "__delete_chats", label: "Delete All Chats",
+    description: "Permanently anonymize and delete all chat history",
+    type: "action",
+  },
+];
+
+export class SettingsPanel {
+  readonly container: BoxRenderable;
+  private listBox: BoxRenderable;
+  private _visible = false;
+  private selectedIndex = 0;
+  private _settings: HorizonSettings = { ...DEFAULT_SETTINGS };
+  private _confirmingDelete = false;
+  private onChangeCallback: ((settings: HorizonSettings) => void) | null = null;
+  private onDeleteChatsCallback: (() => void) | null = null;
+
+  constructor(private renderer: CliRenderer) {
+    this.container = new BoxRenderable(renderer, {
+      id: "settings-panel",
+      width: "50%",
+      height: "100%",
+      flexDirection: "column",
+      borderColor: COLORS.borderDim,
+    });
+    this.container.visible = false;
+
+    // Header
+    const header = new BoxRenderable(renderer, {
+      id: "settings-header",
+      height: 1,
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      paddingLeft: 1,
+      backgroundColor: COLORS.bgDarker,
+      flexShrink: 0,
+    });
+    header.add(new TextRenderable(renderer, {
+      id: "settings-title",
+      content: " Settings ",
+      fg: "#212121",
+      bg: COLORS.accent,
+    }));
+    this.container.add(header);
+
+    // Settings list
+    this.listBox = new BoxRenderable(renderer, {
+      id: "settings-list",
+      flexDirection: "column",
+      flexGrow: 1,
+      paddingTop: 1,
+      paddingLeft: 2,
+      paddingRight: 2,
+    });
+    this.container.add(this.listBox);
+
+    // Footer
+    this.container.add(new TextRenderable(renderer, {
+      id: "settings-footer",
+      content: " up/down navigate  left/right change  esc close",
+      fg: COLORS.borderDim,
+    }));
+
+    this.renderSettings();
+  }
+
+  get visible(): boolean { return this._visible; }
+  get settings(): HorizonSettings { return this._settings; }
+
+  onChange(cb: (settings: HorizonSettings) => void): void { this.onChangeCallback = cb; }
+  onDeleteChats(cb: () => void): void { this.onDeleteChatsCallback = cb; }
+
+  show(): void {
+    this._visible = true;
+    this.container.visible = true;
+    this.renderSettings();
+    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();
+  }
+
+  navigate(delta: number): void {
+    this._confirmingDelete = false;
+    let next = this.selectedIndex + delta;
+    // Skip dividers
+    while (next >= 0 && next < SETTINGS_DEFS.length && SETTINGS_DEFS[next]?.type === "divider") {
+      next += delta;
+    }
+    this.selectedIndex = Math.max(0, Math.min(SETTINGS_DEFS.length - 1, next));
+    this.renderSettings();
+    this.renderer.requestRender();
+  }
+
+  /** Called on Enter or up/down delta=0 — confirms delete if pending */
+  confirmAction(): void {
+    const def = SETTINGS_DEFS[this.selectedIndex];
+    if (!def || def.key !== "__delete_chats") return;
+    if (this._confirmingDelete) {
+      this.onDeleteChatsCallback?.();
+      this._confirmingDelete = false;
+    } else {
+      this._confirmingDelete = true;
+    }
+    this.renderSettings();
+    this.renderer.requestRender();
+  }
+
+  adjust(dir: "left" | "right"): void {
+    const def = SETTINGS_DEFS[this.selectedIndex]!;
+    const key = def.key;
+
+    // Delete action requires Enter to confirm — arrows don't trigger it
+    if (def.type === "divider" || def.type === "action") return;
+
+    if (def.type === "toggle") {
+      (this._settings as any)[key] = !(this._settings as any)[key];
+    } else if (def.type === "slider") {
+      const val = (this._settings as any)[key] as number;
+      const step = key === "compactThreshold" ? 5 : 1;
+      if (dir === "left") (this._settings as any)[key] = Math.max(def.min ?? 0, val - step);
+      else (this._settings as any)[key] = Math.min(def.max ?? 100, val + step);
+    } else if (def.type === "select" && def.options) {
+      const idx = def.options.indexOf((this._settings as any)[key]);
+      if (dir === "left") (this._settings as any)[key] = def.options[Math.max(0, idx - 1)];
+      else (this._settings as any)[key] = def.options[Math.min(def.options.length - 1, idx + 1)];
+    }
+
+    this.onChangeCallback?.(this._settings);
+    this.renderSettings();
+    this.renderer.requestRender();
+  }
+
+  private renderSettings(): void {
+    for (const child of this.listBox.getChildren()) this.listBox.remove(child.id);
+
+    for (let i = 0; i < SETTINGS_DEFS.length; i++) {
+      const def = SETTINGS_DEFS[i]!;
+      const selected = i === this.selectedIndex;
+
+      // Divider
+      if (def.type === "divider") {
+        this.listBox.add(new TextRenderable(this.renderer, {
+          id: `setting-div-${i}`,
+          content: "  " + "\u2500".repeat(36),
+          fg: COLORS.borderDim,
+          marginBottom: 1,
+        }));
+        continue;
+      }
+
+      // Action: delete all chats
+      if (def.type === "action" && def.key === "__delete_chats") {
+        const row = new BoxRenderable(this.renderer, {
+          id: `setting-row-${i}`, flexDirection: "column", width: "100%", marginBottom: 1,
+        });
+        const labelRow = new BoxRenderable(this.renderer, {
+          id: `setting-label-${i}`, flexDirection: "row", width: "100%",
+        });
+        const pointer = selected ? "> " : "  ";
+
+        if (selected && this._confirmingDelete) {
+          labelRow.add(new TextRenderable(this.renderer, {
+            id: `setting-ptr-${i}`, content: pointer, fg: COLORS.error,
+          }));
+          labelRow.add(new TextRenderable(this.renderer, {
+            id: `setting-name-${i}`,
+            content: "Confirm? Press again to delete all",
+            fg: COLORS.error, attributes: 1,
+          }));
+        } else {
+          labelRow.add(new TextRenderable(this.renderer, {
+            id: `setting-ptr-${i}`, content: pointer, fg: selected ? COLORS.error : COLORS.textMuted,
+          }));
+          labelRow.add(new TextRenderable(this.renderer, {
+            id: `setting-name-${i}`,
+            content: def.label,
+            fg: selected ? COLORS.error : COLORS.textMuted,
+          }));
+        }
+        row.add(labelRow);
+        if (selected && !this._confirmingDelete) {
+          row.add(new TextRenderable(this.renderer, {
+            id: `setting-desc-${i}`, content: `  ${def.description}`, fg: COLORS.borderDim,
+          }));
+        }
+        this.listBox.add(row);
+        continue;
+      }
+
+      const value = (this._settings as any)[def.key];
+
+      // Setting row
+      const row = new BoxRenderable(this.renderer, {
+        id: `setting-row-${i}`,
+        flexDirection: "column",
+        width: "100%",
+        marginBottom: 1,
+      });
+
+      // Label + value on one line
+      const labelRow = new BoxRenderable(this.renderer, {
+        id: `setting-label-${i}`,
+        flexDirection: "row",
+        width: "100%",
+      });
+
+      const pointer = selected ? "> " : "  ";
+      labelRow.add(new TextRenderable(this.renderer, {
+        id: `setting-ptr-${i}`,
+        content: pointer,
+        fg: selected ? COLORS.accent : COLORS.textMuted,
+      }));
+
+      labelRow.add(new TextRenderable(this.renderer, {
+        id: `setting-name-${i}`,
+        content: def.label.padEnd(20),
+        fg: selected ? COLORS.text : COLORS.textMuted,
+        attributes: selected ? 1 : 0,
+      }));
+
+      // Value rendering
+      let valueContent = "";
+      let valueColor: any = COLORS.text;
+
+      if (def.type === "toggle") {
+        valueContent = value ? "[on]" : "[off]";
+        valueColor = value ? COLORS.success : COLORS.borderDim;
+      } else if (def.type === "slider") {
+        const min = def.min ?? 0;
+        const max = def.max ?? 100;
+        const range = max - min;
+        const filled = Math.round(((value - min) / range) * 12);
+        const bar = "\u2588".repeat(filled) + "\u2591".repeat(12 - filled);
+        valueContent = `${bar} ${value}`;
+        valueColor = COLORS.text;
+      } else if (def.type === "select") {
+        valueContent = `< ${value} >`;
+        valueColor = COLORS.accent;
+      }
+
+      labelRow.add(new BoxRenderable(this.renderer, { id: `setting-sp-${i}`, flexGrow: 1 }));
+      labelRow.add(new TextRenderable(this.renderer, {
+        id: `setting-val-${i}`,
+        content: valueContent,
+        fg: valueColor,
+      }));
+
+      row.add(labelRow);
+
+      // Description (only for selected)
+      if (selected) {
+        row.add(new TextRenderable(this.renderer, {
+          id: `setting-desc-${i}`,
+          content: `  ${def.description}`,
+          fg: COLORS.borderDim,
+        }));
+      }
+
+      this.listBox.add(row);
+    }
+  }
+}

package/src/components/splash.ts

@@ -0,0 +1,156 @@
+import { BoxRenderable, TextRenderable, InputRenderable, type CliRenderer } from "@opentui/core";
+import { COLORS } from "../theme/colors.ts";
+
+// Big block letters — HORIZON
+const LOGO = [
+  " \u2588\u2588\u2557  \u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2557  \u2588\u2588\u2557",
+  " \u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551\u255a\u2550\u2550\u2588\u2588\u2588\u2554\u255d\u2588\u2588\u2554\u2550\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2551",
+  " \u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\u2588\u2588\u2551  \u2588\u2588\u2588\u2554\u255d \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2588\u2588\u2557\u2588\u2588\u2551",
+  " \u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551\u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u2588\u2588\u2551 \u2588\u2588\u2588\u2554\u255d  \u2588\u2588\u2551   \u2588\u2588\u2551\u2588\u2588\u2551\u255a\u2588\u2588\u2588\u2588\u2551",
+  " \u2588\u2588\u2551  \u2588\u2588\u2551\u255a\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551\u255a\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255d\u2588\u2588\u2551 \u255a\u2588\u2588\u2588\u2551",
+  " \u255a\u2550\u255d  \u255a\u2550\u255d \u255a\u2550\u2550\u2550\u2550\u2550\u255d \u255a\u2550\u255d  \u255a\u2550\u255d\u255a\u2550\u255d\u255a\u2550\u2550\u2550\u2550\u2550\u2550\u255d \u255a\u2550\u2550\u2550\u2550\u2550\u255d \u255a\u2550\u255d  \u255a\u2550\u2550\u255d",
+];
+
+
+export class Splash {
+  private overlay: BoxRenderable;
+  private input: InputRenderable;
+  private authText: TextRenderable;
+  private _visible = true;
+  private onSubmitCallback: ((text: string) => void) | null = null;
+
+  constructor(private renderer: CliRenderer) {
+    this.overlay = new BoxRenderable(renderer, {
+      id: "splash-overlay",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%",
+      backgroundColor: COLORS.bg,
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+    });
+
+    // ── Logo (centered) ──
+    for (let i = 0; i < LOGO.length; i++) {
+      this.overlay.add(new TextRenderable(renderer, {
+        id: `splash-logo-${i}`,
+        content: LOGO[i]!,
+        fg: COLORS.secondary,
+      }));
+    }
+
+    // Tagline
+    this.overlay.add(new TextRenderable(renderer, {
+      id: "splash-tagline",
+      content: "The Mathematical Company of California",
+      fg: COLORS.textMuted,
+      marginTop: 2,
+    }));
+
+    // Input
+    const inputWrapper = new BoxRenderable(renderer, {
+      id: "splash-input-wrap",
+      width: "60%",
+      minWidth: 50,
+      maxWidth: 80,
+      height: 3,
+      flexDirection: "row",
+      alignItems: "center",
+      marginTop: 3,
+      backgroundColor: COLORS.bgSecondary,
+      border: true,
+      borderStyle: "rounded",
+      borderColor: COLORS.borderDim,
+      focusedBorderColor: COLORS.secondary,
+      paddingLeft: 1,
+      paddingRight: 1,
+    });
+    this.overlay.add(inputWrapper);
+
+    const prompt = new TextRenderable(renderer, {
+      id: "splash-prompt",
+      content: "> ",
+      fg: COLORS.secondary,
+    });
+    inputWrapper.add(prompt);
+
+    this.input = new InputRenderable(renderer, {
+      id: "splash-input",
+      placeholder: "What would you like to do?",
+      textColor: COLORS.text,
+      placeholderColor: COLORS.textMuted,
+      flexGrow: 1,
+    });
+    inputWrapper.add(this.input);
+
+    this.input.on("enter", () => {
+      const text = this.input.value.trim();
+      if (text.length === 0) return;
+      this.input.value = "";
+      this.onSubmitCallback?.(text);
+    });
+
+    // Auth status
+    this.authText = new TextRenderable(renderer, {
+      id: "splash-auth",
+      content: "",
+      fg: COLORS.textMuted,
+      marginTop: 2,
+    });
+    this.overlay.add(this.authText);
+
+    // Hints
+    this.overlay.add(new TextRenderable(renderer, {
+      id: "splash-hints",
+      content: "^E previous chats  \u00b7  /tutorial guide  \u00b7  / commands  \u00b7  ^C quit",
+      fg: COLORS.borderDim,
+      marginTop: 2,
+    }));
+
+    renderer.root.add(this.overlay);
+  }
+
+  get visible(): boolean { return this._visible; }
+
+  onSubmit(cb: (text: string) => void): void { this.onSubmitCallback = cb; }
+
+  setAuthStatus(authenticated: boolean, email?: string, firstTime?: boolean): void {
+    if (authenticated) {
+      this.authText.content = `Logged in as ${email ?? "user"}`;
+      this.authText.fg = COLORS.success;
+      this.input.placeholder = "What would you like to do?";
+
+      if (firstTime) {
+        this.authText.content += `\n\n  New here? Type /tutorial to see what Horizon can do`;
+      }
+    } else {
+      this.authText.content = 'Type /login to authenticate with Google';
+      this.authText.fg = COLORS.warning;
+      this.input.placeholder = "Type /login to get started";
+    }
+  }
+
+  setLoading(message: string): void {
+    this.authText.content = message;
+    this.authText.fg = COLORS.textMuted;
+  }
+
+  focus(): void { this.renderer.focusRenderable(this.input); }
+
+  show(): void {
+    if (this._visible) return;
+    this._visible = true;
+    this.overlay.visible = true;
+    this.renderer.requestRender();
+  }
+
+  dismiss(): void {
+    if (!this._visible) return;
+    this._visible = false;
+    this.overlay.visible = false;
+    this.renderer.requestRender();
+  }
+}