@albinocrabs/o-switcher 0.1.1 → 0.2.0

package/src/tui.tsx

@@ -0,0 +1,214 @@
+/**
+ * O-Switcher TUI plugin for OpenCode.
+ *
+ * Provides:
+ *  - sidebar_footer: compact one-line status (active profile, health %, target count)
+ *  - /o-switcher-status route: full dashboard with all targets and their states
+ *  - /switcher slash command: navigates to the dashboard
+ *
+ * State is read from a file bridge written by the server plugin (state-bridge.ts).
+ * TUI plugins are loaded by Bun with babel-preset-solid transform — this file
+ * ships as source .tsx and is compiled at load time.
+ *
+ * NOTE: This file is excluded from tsconfig typecheck and tsup bundling.
+ * It runs in Bun's Solid.js context, not Node.js.
+ */
+
+import { createSignal, onCleanup } from 'solid-js';
+import type {
+  TuiPluginModule,
+  TuiPluginApi,
+  TuiSlotContext,
+} from '@opencode-ai/plugin/tui';
+import { readTuiState } from './state-bridge.js';
+import type { TuiStateFile, TuiTargetSummary } from './state-bridge.js';
+
+// ── Constants ─────────────────────────────────────────────────────
+
+const POLL_INTERVAL_MS = 2000;
+
+// ── Helpers ───────────────────────────────────────────────────────
+
+/** Format health score as percentage string. */
+const healthPct = (score: number): string => `${Math.round(score * 100)}%`;
+
+/** State icon by target state. */
+const stateIcon = (state: TuiTargetSummary['state']): string => {
+  const icons: Record<TuiTargetSummary['state'], string> = {
+    Active: '●',
+    CoolingDown: '◐',
+    ReauthRequired: '⚠',
+    PolicyBlocked: '✕',
+    CircuitOpen: '○',
+    CircuitHalfOpen: '◑',
+    Draining: '▽',
+    Disabled: '—',
+  };
+  return icons[state];
+};
+
+/** Display name: prefer profile, fall back to target_id. */
+const displayName = (t: TuiTargetSummary): string =>
+  t.profile ?? t.target_id;
+
+// ── State polling hook ────────────────────────────────────────────
+
+const useTuiState = () => {
+  const [state, setState] = createSignal<TuiStateFile | undefined>();
+
+  const timer = setInterval(async () => {
+    const s = await readTuiState();
+    setState(s);
+  }, POLL_INTERVAL_MS);
+
+  // Immediate first read
+  readTuiState().then((s) => setState(s));
+
+  onCleanup(() => clearInterval(timer));
+
+  return state;
+};
+
+// ── Components ────────────────────────────────────────────────────
+
+/** Sidebar footer: compact one-line status indicator. */
+const SidebarFooter = () => {
+  const state = useTuiState();
+
+  const label = (): string => {
+    const s = state();
+    if (!s || s.targets.length === 0) return '◌ o-switcher: no targets';
+
+    const activeTargets = s.targets.filter(
+      (t) => t.enabled && t.state === 'Active',
+    );
+    const totalEnabled = s.targets.filter((t) => t.enabled).length;
+
+    // Show the current active target name + health
+    const current = s.active_target_id
+      ? s.targets.find((t) => t.target_id === s.active_target_id)
+      : activeTargets[0];
+
+    if (!current) {
+      return `○ o-switcher: 0/${totalEnabled} active`;
+    }
+
+    const name = displayName(current);
+    const health = healthPct(current.health_score);
+    return `◉ ${name} (${health}) | ${activeTargets.length}/${totalEnabled} active`;
+  };
+
+  return <text truncate={true}>{label()}</text>;
+};
+
+/** Full status dashboard route. */
+const StatusDashboard = () => {
+  const state = useTuiState();
+
+  const content = (): string => {
+    const s = state();
+    if (!s) return '  Loading O-Switcher state...';
+    if (s.targets.length === 0) return '  No targets configured.';
+
+    const lines: string[] = [
+      '  O-Switcher Status',
+      '  ' + '─'.repeat(50),
+      '',
+    ];
+
+    // Header row
+    lines.push(
+      '  ' +
+        'Target'.padEnd(24) +
+        'State'.padEnd(14) +
+        'Health'.padEnd(10) +
+        'Latency',
+    );
+    lines.push('  ' + '─'.repeat(50));
+
+    for (const t of s.targets) {
+      const icon = stateIcon(t.state);
+      const name = displayName(t).slice(0, 22);
+      const stateStr = `${icon} ${t.state}`;
+      const health = healthPct(t.health_score);
+      const latency = t.latency_ema_ms > 0 ? `${Math.round(t.latency_ema_ms)}ms` : '—';
+      const activeMarker = t.target_id === s.active_target_id ? ' ◀' : '';
+      const disabledMark = t.enabled ? '' : ' (off)';
+
+      lines.push(
+        '  ' +
+          (name + disabledMark).padEnd(24) +
+          stateStr.padEnd(14) +
+          health.padEnd(10) +
+          latency +
+          activeMarker,
+      );
+    }
+
+    // Summary
+    const activeCount = s.targets.filter(
+      (t) => t.enabled && t.state === 'Active',
+    ).length;
+    const totalEnabled = s.targets.filter((t) => t.enabled).length;
+    const avgHealth =
+      totalEnabled > 0
+        ? s.targets
+            .filter((t) => t.enabled)
+            .reduce((sum, t) => sum + t.health_score, 0) / totalEnabled
+        : 0;
+
+    lines.push('');
+    lines.push('  ' + '─'.repeat(50));
+    lines.push(
+      `  ${activeCount}/${totalEnabled} targets active  |  avg health: ${healthPct(avgHealth)}`,
+    );
+
+    const age = Date.now() - s.updated_at;
+    const ageSec = Math.round(age / 1000);
+    lines.push(`  Updated ${ageSec}s ago`);
+
+    return lines.join('\n');
+  };
+
+  return <text wrapMode="none">{content()}</text>;
+};
+
+// ── Plugin entry point ────────────────────────────────────────────
+
+const tui = async (api: TuiPluginApi) => {
+  // Register sidebar footer slot
+  api.slots.register({
+    slots: {
+      sidebar_footer: (_ctx: TuiSlotContext, _props: { session_id: string }) => (
+        <SidebarFooter />
+      ),
+    },
+  });
+
+  // Register status dashboard route
+  api.route.register([
+    {
+      name: 'o-switcher-status',
+      render: () => <StatusDashboard />,
+    },
+  ]);
+
+  // Register /switcher slash command
+  api.command.register(() => [
+    {
+      title: 'O-Switcher Status',
+      value: 'o-switcher-status',
+      description: 'Show target health and routing status',
+      slash: {
+        name: 'switcher',
+        aliases: ['osw'],
+      },
+      onSelect: () => {
+        api.route.navigate('o-switcher-status');
+      },
+    },
+  ]);
+};
+
+const tuiModule: TuiPluginModule = { tui };
+export default tuiModule;