horizon-code 0.2.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "horizon-code",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "AI-powered trading strategy terminal for Polymarket",
   "type": "module",
   "bin": {

package/src/ai/client.ts

@@ -152,6 +152,7 @@ import { zodSchema } from "@ai-sdk/provider-utils";
 
 function toolsToServerFormat(tools: Record<string, any>): Record<string, any> {
   const result: Record<string, any> = {};
+  let failures = 0;
   for (const [name, tool] of Object.entries(tools)) {
     if (!tool) continue;
     let params: any = { type: "object", properties: {} };
@@ -184,17 +185,26 @@ async function callServer(opts: {
   const config = loadConfig();
   if (!config.api_key) throw new Error("Not authenticated. Type /login.");
 
+  const toolPayload = toolsToServerFormat(opts.tools);
+  const body = JSON.stringify({
+    messages: opts.messages,
+    system: opts.system,
+    model_power: opts.modelPower,
+    tools: toolPayload,
+    response_format: opts.responseFormat,
+  });
+
+  // Use the caller's abort signal, with a fallback 2-min timeout
+  const timeoutSignal = AbortSignal.timeout(120000);
+  const combinedSignal = opts.signal
+    ? AbortSignal.any([opts.signal, timeoutSignal])
+    : timeoutSignal;
+
   const res = await fetch(`${getAuthUrl()}/api/v1/chat`, {
     method: "POST",
-    signal: opts.signal ?? AbortSignal.timeout(120000), // 2 min max
+    signal: combinedSignal,
     headers: { "Authorization": `Bearer ${config.api_key}`, "Content-Type": "application/json" },
-    body: JSON.stringify({
-      messages: opts.messages,
-      system: opts.system,
-      model_power: opts.modelPower,
-      tools: toolsToServerFormat(opts.tools),
-      response_format: opts.responseFormat,
-    }),
+    body,
   });
 
   if (!res.ok) {
@@ -248,7 +258,12 @@ export async function* chat(
         signal,
       });
     } catch (err: any) {
+      if (signal.aborted) {
+        yield { type: "finish" };
+        return;
+      }
       yield { type: "error", message: err.message };
+      yield { type: "finish" };
       return;
     }
 
@@ -262,6 +277,7 @@ export async function* chat(
     let eventCount = 0;
 
     for await (const event of consumeSSE(res)) {
+      if (signal.aborted) break;
       eventCount++;
       if (event.type === "meta") {
         yield {
@@ -323,6 +339,9 @@ export async function* chat(
     if (!hasToolCalls || pendingToolCalls.length === 0) {
       if (eventCount === 0) {
         yield { type: "error", message: "No response from server. Check your connection or try again." };
+      } else if (!hasToolCalls && jsonBuf === "" && emittedResponseLen === 0) {
+        // Server sent events (meta, usage) but no actual content
+        yield { type: "text-delta", textDelta: "*(Server returned no content. This may happen if the model is overloaded. Try again.)*" };
       }
       yield { type: "finish" };
       return;
@@ -351,6 +370,12 @@ export async function* chat(
       }
     }
 
+    // If aborted during tool execution, stop
+    if (signal.aborted) {
+      yield { type: "finish" };
+      return;
+    }
+
     // Add as assistant message — the LLM sees it already ran the tools
     serverMessages.push({ role: "assistant", content: assistantParts.join("\n\n") });
     // Prompt the LLM to continue with its response based on the tool results

package/src/ai/system-prompt.ts

@@ -15,7 +15,7 @@ const MODE_PROMPTS: Record<Mode, string> = {
 
 ## Mode: Research
 
-You have 13 research tools that fetch LIVE data from Polymarket, Kalshi, and the web. Use them.
+You have 29 research tools that fetch LIVE data from Polymarket, Kalshi, stocks, and the web. Use them.
 
 ### CRITICAL RULE
 When the user mentions ANY topic, event, market, or asks about what's happening — ALWAYS call a tool to search for real data. Never answer from your training data alone. Prediction markets change by the minute.
@@ -33,24 +33,66 @@ When the user mentions ANY topic, event, market, or asks about what's happening
 - kalshiEvents(query) — search Kalshi markets
 - webSearch(query) — search the internet for news, facts, context
 - calaKnowledge(query) — deep research on companies, people, industries
+- liquidityScanner(query, limit) — scan top markets ranked by liquidity, spread, volume
 
-**Analyze a specific market (requires a slug from polymarketEvents):**
+**Analyze a specific Polymarket (requires a slug from polymarketEvents):**
 - polymarketEventDetail(slug) — full details, sub-markets, price history, spreads
 - polymarketPriceHistory(slug, interval) — price chart (1h/6h/1d/1w/1m/max)
 - polymarketOrderBook(slug) — bid/ask depth
 - whaleTracker(slug) — large trades, smart money flow
 - newsSentiment(slug) — news sentiment score + articles
-- historicalVolatility(slug, interval) — realized vol, regime detection
+- historicalVolatility(slug, interval) — multi-estimator vol (close-to-close, Parkinson, Garman-Klass, EWMA), regime detection
+- marketMicrostructure(slug) — depth imbalance, effective spread, Kyle's lambda, liquidity score
+
+**Analyze a specific Kalshi market (requires a ticker from kalshiEvents):**
+- kalshiEventDetail(ticker) — full details, all sub-markets, spreads, volumes
+- kalshiOrderBook(ticker) — bid/ask depth for a Kalshi market
+- kalshiPriceHistory(ticker, period) — price chart for a Kalshi market
+
+**Whale & wallet analysis (requires wallet address from whaleTracker results):**
+- walletProfiler(address) — score a wallet: win rate, PnL, Sharpe, edge category (smart_money/neutral/weak_hand/bot)
+- botDetector(slug) — detect bots in a market: classify top traders, identify strategy types (market_maker, grid_bot, momentum, sniper)
+- marketFlow(slug, limit) — deep flow analysis: buy/sell volume, wallet concentration (Herfindahl), top movers
 
 **Quantitative analysis:**
 - evCalculator(slug, side, estimatedEdge, bankroll) — expected value + Kelly sizing
 - probabilityCalculator(slugA, slugB) — joint/conditional probability
 - compareMarkets(topic) — cross-platform price comparison (Polymarket vs Kalshi)
+- correlationAnalysis(slugA, slugB, interval) — price correlation, beta, dual sparklines between two markets
+- riskMetrics(slug, interval, confidenceLevel) — VaR, CVaR, max drawdown, Sharpe, Sortino, Calmar, skewness, kurtosis
+- marketRegime(slug, interval) — Hurst exponent, variance ratio, entropy — detect if market is trending, mean-reverting, or efficient
 
-### Tool Chaining
-When the user refers to a market from a previous result, reuse the SLUG from that result. Don't call polymarketEvents again — go straight to the detail tool. Look at conversation history for slugs.
+**Stock market (Yahoo Finance — free, no API key needed):**
+- stockQuote(symbols) — real-time quotes: price, change, volume, market cap, P/E, 52-week range, moving averages. Comma-separated: "AAPL,MSFT,TSLA"
+- stockChart(symbol, range, interval) — price chart with sparkline. Ranges: 1d, 5d, 1mo, 3mo, 6mo, 1y, 5y, max
+- stockSearch(query) — search tickers by name/keyword: "electric vehicles", "gold ETF"
+- stockScreener(symbols) — compare stocks side-by-side: P/E, market cap, 52-week, moving averages
 
-Use your intelligence to understand what the user wants. If they say "dig deeper into the first one" — that means polymarketEventDetail with the first slug. If they say "what do whales think" — that means whaleTracker. You're smart enough to figure this out without a flowchart.`,
+**Visualization:**
+- openChart(source, identifier, range) — open interactive Chart.js chart in browser. source: "polymarket" or "stock". Great for detailed analysis.
+
+### Tool Chaining
+When the user refers to a market from a previous result, reuse the SLUG (Polymarket) or TICKER (Kalshi) from that result. Don't search again — go straight to the detail tool.
+
+Use your intelligence to understand what the user wants:
+- "dig deeper" → polymarketEventDetail or kalshiEventDetail
+- "what do whales think" → whaleTracker
+- "show me the order book" → polymarketOrderBook or kalshiOrderBook
+- "how liquid is this" → marketMicrostructure
+- "do these markets correlate" → correlationAnalysis
+- "what's the best market to trade" → liquidityScanner
+- "compare Polymarket and Kalshi" → compareMarkets
+- "what's the volatility" → historicalVolatility (now shows 4 estimators)
+- "show me the Kalshi chart" → kalshiPriceHistory
+- "who are the bots" → botDetector
+- "analyze this wallet" → walletProfiler (needs 0x address from whaleTracker)
+- "where is the money flowing" → marketFlow
+- "what's the risk" → riskMetrics (VaR, CVaR, Sharpe, drawdown)
+- "is this market trending" → marketRegime (Hurst exponent, variance ratio)
+- "show me AAPL" → stockQuote("AAPL")
+- "compare big tech" → stockScreener("AAPL,MSFT,GOOG,AMZN,META")
+- "chart this" → openChart (opens interactive chart in browser)
+- "search for AI stocks" → stockSearch("artificial intelligence")`,
 
   strategy: "", // dynamically generated
 

package/src/app.ts

@@ -1,4 +1,4 @@
-import { BoxRenderable, ScrollBoxRenderable, type CliRenderer } from "@opentui/core";
+import { BoxRenderable, TextRenderable, ScrollBoxRenderable, type CliRenderer } from "@opentui/core";
 import { COLORS, setTheme, ULTRA_THEMES } from "./theme/colors.ts";
 import { Footer } from "./components/footer.ts";
 import { Splash } from "./components/splash.ts";
@@ -13,6 +13,8 @@ import { ModeBar } from "./components/mode-bar.ts";
 import { TabBar } from "./components/tab-bar.ts";
 import { InputBar } from "./components/input-bar.ts";
 import { ChatRenderer } from "./chat/renderer.ts";
+import { renderToolWidget } from "./research/widgets.ts";
+import { renderStrategyWidget } from "./strategy/widgets.ts";
 import { KeyHandler } from "./keys/handler.ts";
 import { store } from "./state/store.ts";
 import { createUserMessage } from "./chat/messages.ts";
@@ -26,6 +28,7 @@ import { autoFixStrategyCode } from "./strategy/validator.ts";
 import { CodeFenceDetector, finalizeStrategy, isStrategyCode, extractStrategyName } from "./strategy/code-stream.ts";
 import { loginWithBrowser, loginWithPassword, signOut, isLoggedIn, getUser } from "./platform/supabase.ts";
 import { loadConfig, saveConfig, setEncryptedEnv, removeEncryptedEnv, listEncryptedEnvNames } from "./platform/config.ts";
+import { EXCHANGE_PROFILES, getExchangeStatuses, getExchangeStatus } from "./platform/exchanges.ts";
 import { getTreeSitterClient, destroyTreeSitterClient } from "./syntax/setup.ts";
 import type { Message } from "./chat/types.ts";
 
@@ -33,7 +36,11 @@ import type { Message } from "./chat/types.ts";
 const WIDGET_TOOLS = new Set([
   "polymarketEvents", "polymarketEventDetail", "polymarketPriceHistory",
   "polymarketOrderBook", "whaleTracker", "newsSentiment", "evCalculator",
-  "kalshiEvents", "compareMarkets", "historicalVolatility",
+  "kalshiEvents", "kalshiEventDetail", "kalshiOrderBook", "kalshiPriceHistory",
+  "compareMarkets", "historicalVolatility",
+  "marketMicrostructure", "liquidityScanner", "correlationAnalysis",
+  "walletProfiler", "botDetector", "marketFlow", "riskMetrics", "marketRegime",
+  "stockQuote", "stockChart", "stockSearch", "stockScreener",
   "webSearch", "calaKnowledge", "probabilityCalculator",
   "edit_strategy", "validate_strategy",
   "backtest_strategy", "polymarket_data",
@@ -65,6 +72,8 @@ const SLASH_COMMANDS: Record<string, { description: string; usage: string }> = {
   "/strategies": { description: "List saved strategies", usage: "/strategies" },
   "/load":    { description: "Load a saved strategy", usage: "/load <name>" },
   "/env":     { description: "Manage encrypted API keys", usage: "/env [list|add|remove]" },
+  "/connect": { description: "Connect an exchange", usage: "/connect [polymarket|kalshi|alpaca|...]" },
+  "/exchanges": { description: "Show exchange connection status", usage: "/exchanges" },
   "/quit":    { description: "Exit Horizon", usage: "/quit" },
   "/exit":    { description: "Exit Horizon", usage: "/exit" },
 };
@@ -629,6 +638,11 @@ export class App {
         if (loginResult.success) {
           this.authenticated = true;
           this.showSystemMsg(`Logged in as ${loginResult.email}`);
+          // Start session sync + platform sync now that we have a live session
+          import("./platform/session-sync.ts").then(({ loadSessions, startAutoSave }) => {
+            loadSessions().catch(() => {});
+            startAutoSave();
+          }).catch(() => {});
           import("./platform/sync.ts").then(({ platformSync }) => {
             platformSync.start(30000).catch(() => {});
           });
@@ -769,6 +783,50 @@ export class App {
         }
         break;
       }
+      case "/connect": {
+        const exchangeId = arg.trim().toLowerCase();
+        if (!exchangeId) {
+          const statuses = getExchangeStatuses();
+          const lines = statuses.map(s => {
+            const icon = s.status === "connected" ? "●" : s.status === "partial" ? "◐" : "○";
+            const color = s.status === "connected" ? "green" : s.status === "partial" ? "yellow" : "dim";
+            return `  ${icon} ${s.profile.name.padEnd(20)} ${s.status.padEnd(14)} ${s.profile.category}`;
+          });
+          this.showSystemMsg(`Exchange Connections:\n${lines.join("\n")}\n\nUse /connect <exchange> to set up keys.`);
+        } else {
+          const profile = EXCHANGE_PROFILES.find(p => p.id === exchangeId || p.name.toLowerCase() === exchangeId);
+          if (!profile) {
+            const ids = EXCHANGE_PROFILES.map(p => p.id).join(", ");
+            this.showSystemMsg(`Unknown exchange: ${exchangeId}. Available: ${ids}`);
+          } else {
+            const status = getExchangeStatus(profile.id);
+            const lines = profile.keys.map(k => {
+              const isSet = status?.keysSet.includes(k.env);
+              return `  ${isSet ? "●" : "○"} ${k.label.padEnd(18)} ${k.env.padEnd(28)} ${isSet ? "set" : k.required ? "REQUIRED" : "optional"}`;
+            });
+            this.showSystemMsg(
+              `${profile.name} — ${profile.description}\n${lines.join("\n")}\n\n` +
+              `Set keys with: /env add <ENV_NAME> <value>\n` +
+              `Example: /env add ${profile.keys[0].env} <your-key>`
+            );
+          }
+        }
+        break;
+      }
+      case "/exchanges": {
+        const statuses = getExchangeStatuses();
+        const connected = statuses.filter(s => s.status === "connected");
+        const partial = statuses.filter(s => s.status === "partial");
+        const disconnected = statuses.filter(s => s.status === "disconnected");
+
+        let msg = "Exchange Status:\n";
+        if (connected.length > 0) msg += `\nConnected:\n${connected.map(s => `  ● ${s.profile.name} (${s.profile.category})`).join("\n")}`;
+        if (partial.length > 0) msg += `\nPartial:\n${partial.map(s => `  ◐ ${s.profile.name} — missing: ${s.keysMissing.join(", ")}`).join("\n")}`;
+        if (disconnected.length > 0) msg += `\nNot Connected:\n${disconnected.map(s => `  ○ ${s.profile.name}`).join("\n")}`;
+        msg += "\n\nUse /connect <exchange> to set up.";
+        this.showSystemMsg(msg);
+        break;
+      }
       case "/quit":
       case "/exit":
         this.quit();
@@ -881,7 +939,11 @@ export class App {
 
       if (!live) {
         this.splash.setAuthStatus(true, email);
-        this.showSystemMsg("Your session has expired. Type /login to sign in again.");
+        // Only warn about expired session if they actually had one before
+        // Don't warn if they just have an api_key (chat still works fine)
+        if (config.supabase_session) {
+          this.showSystemMsg("Supabase session expired — chat sync disabled. Type /login to reconnect.");
+        }
       } else {
         this.splash.setAuthStatus(true, email, firstTime);
       }
@@ -1274,7 +1336,33 @@ export class App {
           }
 
           if (WIDGET_TOOLS.has(part.toolName)) {
-            currentBlocks.push({ type: "tool-widget", toolName: part.toolName, widgetData: part.result });
+            const { showWidgets, widgetsInTab } = this.settingsPanel.settings;
+            if (showWidgets && !widgetsInTab) {
+              // Render inline in chat (default)
+              currentBlocks.push({ type: "tool-widget", toolName: part.toolName, widgetData: part.result });
+            } else if (showWidgets && widgetsInTab) {
+              // Render in the widgets tab
+              try {
+                const result = part.result;
+                // Skip error results — they'd render as empty widgets
+                if (result && typeof result === "object" && "error" in (result as any)) {
+                  const errBox = new BoxRenderable(this.renderer, { id: `wt-err-${Date.now()}`, flexDirection: "column" });
+                  errBox.add(new TextRenderable(this.renderer, { id: `wt-err-t-${Date.now()}`, content: `Error: ${(result as any).error}`, fg: COLORS.error }));
+                  this.codePanel.addWidget(part.toolName, errBox);
+                } else {
+                  const widget = renderToolWidget(part.toolName, result, this.renderer)
+                    ?? renderStrategyWidget(part.toolName, result, this.renderer);
+                  if (widget) {
+                    this.codePanel.addWidget(part.toolName, widget);
+                  }
+                }
+                if (!this.codePanel.visible) this.codePanel.show();
+                this.codePanel.setTab("widgets");
+              } catch {
+                // Widget rendering failed silently — don't break the stream
+              }
+            }
+            // else showWidgets=false: skip rendering, LLM still got the data
           }
 
           // Update code panel from edit_strategy/load_saved_strategy results

package/src/components/code-panel.ts

@@ -59,7 +59,7 @@ const syntaxStyle = SyntaxStyle.fromStyles({
   "@punctuation.special": { fg: h("#D7BA7D") },       // gold
 });
 
-type PanelTab = "code" | "logs" | "dashboard";
+type PanelTab = "code" | "logs" | "dashboard" | "widgets";
 
 export class CodePanel {
   readonly container: BoxRenderable;
@@ -74,6 +74,8 @@ export class CodePanel {
   private logsMd: MarkdownRenderable;
   private dashScroll: ScrollBoxRenderable;
   private dashMd: MarkdownRenderable;
+  private widgetsScroll: ScrollBoxRenderable;
+  private widgetsList: BoxRenderable;
 
   private footerText: TextRenderable;
   private _visible = false;
@@ -128,6 +130,7 @@ export class CodePanel {
       { id: "code", label: "Code" },
       { id: "logs", label: "Logs" },
       { id: "dashboard", label: "Metrics" },
+      { id: "widgets", label: "Widgets" },
     ];
     for (const tab of tabs) {
       const text = new TextRenderable(renderer, {
@@ -195,10 +198,34 @@ export class CodePanel {
     this.dashScroll.add(this.dashMd);
     this.container.add(this.dashScroll);
 
+    // ── Widgets tab content ──
+    this.widgetsScroll = new ScrollBoxRenderable(renderer, {
+      id: "widgets-scroll",
+      flexGrow: 1,
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 1,
+      stickyScroll: true,
+      stickyStart: "bottom",
+    });
+    this.widgetsScroll.visible = false;
+    this.widgetsList = new BoxRenderable(renderer, {
+      id: "widgets-list",
+      flexDirection: "column",
+      width: "100%",
+    });
+    this.widgetsList.add(new TextRenderable(renderer, {
+      id: "widgets-empty",
+      content: "*no widgets yet*\n\n*Tool results will appear here when \"Widgets in Tab\" is enabled in settings.*",
+      fg: COLORS.textMuted,
+    }));
+    this.widgetsScroll.add(this.widgetsList);
+    this.container.add(this.widgetsScroll);
+
     // ── Footer ──
     this.footerText = new TextRenderable(renderer, {
       id: "code-footer",
-      content: " ^G close  |  Tab cycle  |  1 code  2 logs  3 dash",
+      content: " ^G close  |  Tab cycle  |  1 code  2 logs  3 dash  4 widgets",
       fg: COLORS.borderDim,
     });
     this.container.add(this.footerText);
@@ -224,20 +251,72 @@ export class CodePanel {
     this.codeScroll.visible = tab === "code";
     this.logsScroll.visible = tab === "logs";
     this.dashScroll.visible = tab === "dashboard";
+    this.widgetsScroll.visible = tab === "widgets";
     // Refresh content for the active tab
     if (tab === "code") this.updateCodeContent();
     else if (tab === "logs") this.updateLogsContent();
     else if (tab === "dashboard") this.updateDashContent();
+    // Widgets tab: force scroll to bottom to show latest
+    if (tab === "widgets") this.widgetsScroll.scrollToBottom?.();
     this.updateTabBar();
     this.renderer.requestRender();
   }
 
   cycleTab(): void {
-    const order: PanelTab[] = ["code", "logs", "dashboard"];
+    const order: PanelTab[] = ["code", "logs", "dashboard", "widgets"];
     const idx = order.indexOf(this._activeTab);
     this.setTab(order[(idx + 1) % order.length]!);
   }
 
+  private _widgetCount = 0;
+
+  /** Add a widget renderable to the widgets tab */
+  addWidget(toolName: string, widget: BoxRenderable): void {
+    // Remove placeholder on first widget
+    if (this._widgetCount === 0) {
+      const children = this.widgetsList.getChildren();
+      for (const child of [...children]) {
+        this.widgetsList.remove(child);
+      }
+    }
+    this._widgetCount++;
+
+    // Separator between widgets
+    if (this._widgetCount > 1) {
+      this.widgetsList.add(new TextRenderable(this.renderer, {
+        id: `wt-sep-${Date.now()}-${this._widgetCount}`,
+        content: "",
+        fg: COLORS.borderDim,
+      }));
+    }
+
+    // Tool name header
+    this.widgetsList.add(new TextRenderable(this.renderer, {
+      id: `wt-hdr-${Date.now()}-${this._widgetCount}`,
+      content: `── ${toolName.replace(/_/g, " ")} ${"─".repeat(40)}`,
+      fg: COLORS.borderDim,
+    }));
+
+    // The widget itself
+    this.widgetsList.add(widget);
+
+    this.renderer.requestRender();
+  }
+
+  /** Clear all widgets from the tab */
+  clearWidgets(): void {
+    const children = this.widgetsList.getChildren();
+    for (const child of [...children]) {
+      this.widgetsList.remove(child);
+    }
+    this._widgetCount = 0;
+    this.widgetsList.add(new TextRenderable(this.renderer, {
+      id: `widgets-empty-${Date.now()}`,
+      content: "*no widgets yet*\n\n*Enable \"Widgets in Tab\" in /settings.*",
+      fg: COLORS.textMuted,
+    }));
+  }
+
   // ── Content setters ──
 
   setCode(code: string, status: "pending" | "valid" | "invalid" | "none" = "none"): void {
@@ -307,7 +386,7 @@ export class CodePanel {
         : id === "dashboard" ? "Metrics"
         : id.charAt(0).toUpperCase() + id.slice(1);
       if (id === this._activeTab) {
-        text.fg = "#212121";
+        text.fg = COLORS.bg;
         text.bg = COLORS.accent;
         text.content = ` ${label} `;
       } else {

package/src/components/footer.ts

@@ -47,6 +47,9 @@ export class Footer {
         this.streamingText.content = `${BRAILLE[this.spinnerFrame]} generating`;
         this.streamingText.fg = COLORS.accent;
         this.renderer.requestRender();
+      } else if (this.streamingText.content !== "") {
+        this.streamingText.content = "";
+        this.renderer.requestRender();
       }
     }, 60);
   }

package/src/components/hooks-panel.ts

@@ -35,7 +35,7 @@ export class HooksPanel {
       backgroundColor: COLORS.bgDarker, flexShrink: 0,
     });
     header.add(new TextRenderable(renderer, {
-      id: "hooks-title", content: " Hooks ", fg: "#212121", bg: COLORS.accent,
+      id: "hooks-title", content: " Hooks ", fg: COLORS.bg, bg: COLORS.accent,
     }));
     this.container.add(header);
 

package/src/components/mode-bar.ts

@@ -181,7 +181,7 @@ export class ModeBar {
   private updateDisplay(): void {
     const m = MODE_CONFIG[this._current];
     this.modeText.content = ` ${m.icon} ${m.label} `;
-    this.modeText.fg = "#212121";
+    this.modeText.fg = COLORS.bg;
     this.modeText.bg = m.color;
     this.updateStatus();
     this.updateMetricsDisplay();

package/src/components/settings-panel.ts

@@ -12,6 +12,8 @@ export interface HorizonSettings {
   autoCompact: boolean;
   compactThreshold: number;
   showToolCalls: boolean;
+  showWidgets: boolean;
+  widgetsInTab: boolean;
   soundEnabled: boolean;
   theme: ThemeName;
   payAsYouGo: boolean;
@@ -25,6 +27,8 @@ const DEFAULT_SETTINGS: HorizonSettings = {
   autoCompact: true,
   compactThreshold: 80,
   showToolCalls: true,
+  showWidgets: true,
+  widgetsInTab: false,
   soundEnabled: false,
   theme: "dark",
   payAsYouGo: false,
@@ -72,6 +76,16 @@ const SETTINGS_DEFS: SettingDef[] = [
     description: "Display tool call indicators in chat",
     type: "toggle",
   },
+  {
+    key: "showWidgets", label: "Show Widgets",
+    description: "Render tool results as visual widgets (off = text only, LLM still gets data)",
+    type: "toggle",
+  },
+  {
+    key: "widgetsInTab", label: "Widgets in Tab",
+    description: "Render widgets in a side tab instead of inline in chat",
+    type: "toggle",
+  },
   {
     key: "soundEnabled", label: "Sound",
     description: "Play terminal bell when generation completes",
@@ -139,7 +153,7 @@ export class SettingsPanel {
     header.add(new TextRenderable(renderer, {
       id: "settings-title",
       content: " Settings ",
-      fg: "#212121",
+      fg: COLORS.bg,
       bg: COLORS.accent,
     }));
     this.container.add(header);

package/src/components/tab-bar.ts

@@ -11,11 +11,14 @@ const MODE_LABEL: Record<string, string> = {
   portfolio: "(p)",
 };
 
-const MODE_COLOR: Record<string, string> = {
-  research: "#5c9cf5",   // COLORS.secondary
-  strategy: "#9d7cd8",   // COLORS.accent
-  portfolio: "#7fd88f",  // COLORS.success
-};
+function getModeColor(mode: string): string {
+  switch (mode) {
+    case "research": return COLORS.secondary;
+    case "strategy": return COLORS.accent;
+    case "portfolio": return COLORS.success;
+    default: return COLORS.secondary;
+  }
+}
 
 const BRAILLE = ["\u2801", "\u2803", "\u2807", "\u280f", "\u281f", "\u283f", "\u287f", "\u28ff", "\u28fe", "\u28fc", "\u28f8", "\u28f0", "\u28e0", "\u28c0", "\u2880", "\u2800"];
 
@@ -53,7 +56,7 @@ export class TabBar {
 
       const isActive = tabId === activeSessionId;
       const modeTag = MODE_LABEL[session.mode] ?? "(r)";
-      const modeColor = MODE_COLOR[session.mode] ?? COLORS.secondary;
+      const modeColor = getModeColor(session.mode);
 
       // Truncate name
       let name = session.name.length > 12 ? session.name.slice(0, 11) + "." : session.name;
@@ -69,7 +72,7 @@ export class TabBar {
       const tab = new TextRenderable(this.renderer, {
         id: `tab-${i}`,
         content: label,
-        fg: isActive ? "#212121" : COLORS.textMuted,
+        fg: isActive ? COLORS.bg : COLORS.textMuted,
         bg: isActive ? modeColor : undefined,
       });
       this.container.add(tab);

package/src/components/tutorial-panel.ts

@@ -667,7 +667,7 @@ export class TutorialPanel {
   private updateTabBar(): void {
     for (const [id, text] of this.tabTexts) {
       if (id === this._activeTab) {
-        text.fg = "#212121";
+        text.fg = COLORS.bg;
         text.bg = COLORS.secondary;
         text.content = ` ${TAB_LIST.find((t) => t.id === id)!.label} `;
       } else {