feat: add LLM status indicator to header (koala73#1528)

Extract LlmStatusIndicator UI from PR koala73#1522 into a standalone PR.
Shows a green/red dot in the header indicating LLM provider reachability.
Polls /api/llm-health every 60s; hides itself on Vercel (404 fallback).

Wire up setupLlmStatusIndicator() in App.init(), which was missing in
the original PR (dead code fix).

Co-authored-by: Jon Torrez <jrtorrez31337@users.noreply.github.com>

Author: koala73

src/App.ts

@@ -383,6 +383,7 @@ export class App {
       unifiedSettings: null,
       pizzintIndicator: null,
       correlationEngine: null,
+      llmStatusIndicator: null,
       countryBriefPage: null,
       countryTimeline: null,
       positivePanel: null,
@@ -564,6 +565,7 @@ export class App {
     this.eventHandlers.setupPlaybackControl();
     this.eventHandlers.setupStatusPanel();
     this.eventHandlers.setupPizzIntIndicator();
+    this.eventHandlers.setupLlmStatusIndicator();
     this.eventHandlers.setupExportPanel();
 
     // Correlation engine

src/app/app-context.ts

@@ -13,7 +13,7 @@ import type { CountryTimeline } from '@/components/CountryTimeline';
 import type { PlaybackControl } from '@/components';
 import type { ExportPanel } from '@/utils';
 import type { UnifiedSettings } from '@/components/UnifiedSettings';
-import type { PizzIntIndicator } from '@/components';
+import type { PizzIntIndicator, LlmStatusIndicator } from '@/components';
 import type { ParsedMapUrlState } from '@/utils';
 import type { PositiveNewsFeedPanel } from '@/components/PositiveNewsFeedPanel';
 import type { CountersPanel } from '@/components/CountersPanel';
@@ -107,6 +107,7 @@ export interface AppContext {
   unifiedSettings: UnifiedSettings | null;
   pizzintIndicator: PizzIntIndicator | null;
   correlationEngine: CorrelationEngine | null;
+  llmStatusIndicator: LlmStatusIndicator | null;
   countryBriefPage: CountryBriefPanel | null;
   countryTimeline: CountryTimeline | null;
 

src/app/event-handlers.ts

@@ -8,6 +8,7 @@ import {
   PlaybackControl,
   StatusPanel,
   PizzIntIndicator,
+  LlmStatusIndicator,
   CIIPanel,
   PredictionPanel,
 } from '@/components';
@@ -767,6 +768,14 @@ export class EventHandlerManager implements AppModule {
     }
   }
 
+  setupLlmStatusIndicator(): void {
+    this.ctx.llmStatusIndicator = new LlmStatusIndicator();
+    const headerRight = this.ctx.container.querySelector('.header-right');
+    if (headerRight) {
+      headerRight.appendChild(this.ctx.llmStatusIndicator.getElement());
+    }
+  }
+
   setupExportPanel(): void {
     this.ctx.exportPanel = new ExportPanel(() => ({
       news: this.ctx.latestClusters.length > 0 ? this.ctx.latestClusters : this.ctx.allNews,

src/components/LlmStatusIndicator.ts

@@ -0,0 +1,88 @@
+// Small header indicator showing LLM provider reachability.
+// Polls /api/llm-health every 60s. Shows green dot when available, red when offline.
+
+import { h } from '@/utils/dom-utils';
+
+const POLL_INTERVAL_MS = 60_000;
+
+interface LlmHealthResponse {
+  available: boolean;
+  providers: Array<{ name: string; url: string; available: boolean }>;
+  checkedAt: number;
+}
+
+export class LlmStatusIndicator {
+  private element: HTMLElement;
+  private dot: HTMLElement;
+  private label: HTMLElement;
+  private timer: ReturnType<typeof setInterval> | null = null;
+
+  constructor() {
+    this.dot = h('span', {
+      style: 'display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff4444;margin-right:4px;',
+    });
+    this.label = h('span', {
+      style: 'font-size:9px;letter-spacing:0.5px;opacity:0.7;',
+    }, 'LLM');
+    this.element = h('div', {
+      className: 'llm-status-indicator',
+      title: 'LLM provider status — checking...',
+      style: 'display:flex;align-items:center;padding:0 6px;cursor:default;user-select:none;',
+    }, this.dot, this.label);
+
+    this.poll();
+    this.timer = setInterval(() => this.poll(), POLL_INTERVAL_MS);
+  }
+
+  private async poll(): Promise<void> {
+    try {
+      const resp = await fetch('/api/llm-health', {
+        signal: AbortSignal.timeout(5_000),
+      });
+      if (resp.status === 404) {
+        // Endpoint only exists in sidecar/Docker — hide indicator on Vercel
+        this.element.style.display = 'none';
+        this.destroy();
+        return;
+      }
+      if (!resp.ok) {
+        this.setStatus(false, 'LLM', 'Health endpoint error');
+        return;
+      }
+      const data: LlmHealthResponse = await resp.json();
+      const active = data.providers.filter(p => p.available);
+      // Show the active provider name in the label (first available wins the chain)
+      const activeName = active.length > 0 ? active[0]!.name.toUpperCase() : '';
+      const tooltipLines: string[] = [];
+      for (const p of data.providers) {
+        tooltipLines.push(`${p.available ? '●' : '○'} ${p.name} — ${p.available ? 'online' : 'offline'}`);
+      }
+      this.setStatus(
+        data.available,
+        activeName || 'LLM',
+        data.available
+          ? `LLM via ${activeName}\n${tooltipLines.join('\n')}`
+          : `LLM offline — AI features unavailable\n${tooltipLines.join('\n')}`,
+      );
+    } catch {
+      this.setStatus(false, 'LLM', 'LLM health check failed');
+    }
+  }
+
+  private setStatus(available: boolean, labelText: string, tooltip: string): void {
+    this.dot.style.background = available ? '#44ff88' : '#ff4444';
+    this.label.textContent = labelText;
+    this.element.title = tooltip;
+  }
+
+  public getElement(): HTMLElement {
+    return this.element;
+  }
+
+  public destroy(): void {
+    if (this.timer) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+}

src/components/index.ts

@@ -17,6 +17,7 @@ export * from './EconomicPanel';
 export * from './SearchModal';
 export * from './MobileWarningModal';
 export * from './PizzIntIndicator';
+export * from './LlmStatusIndicator';
 export * from './GdeltIntelPanel';
 export * from './LiveNewsPanel';
 export * from './LiveWebcamsPanel';