smartcontext-proxy 0.1.0 → 0.2.1

package/src/tls/ca-manager.ts

@@ -0,0 +1,140 @@
+import forge from 'node-forge';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const CA_DIR = path.join(process.env['HOME'] || '.', '.smartcontext', 'ca');
+const HOSTS_DIR = path.join(CA_DIR, 'hosts');
+const CA_CERT_PATH = path.join(CA_DIR, 'smartcontext-ca.crt');
+const CA_KEY_PATH = path.join(CA_DIR, 'smartcontext-ca.key');
+
+export interface CertPair {
+  cert: string; // PEM
+  key: string;  // PEM
+}
+
+let cachedCA: { cert: forge.pki.Certificate; key: forge.pki.rsa.PrivateKey } | null = null;
+const hostCertCache = new Map<string, CertPair>();
+
+/** Ensure root CA exists, generate if not */
+export function ensureCA(): CertPair {
+  fs.mkdirSync(CA_DIR, { recursive: true });
+  fs.mkdirSync(HOSTS_DIR, { recursive: true });
+
+  if (fs.existsSync(CA_CERT_PATH) && fs.existsSync(CA_KEY_PATH)) {
+    const cert = fs.readFileSync(CA_CERT_PATH, 'utf-8');
+    const key = fs.readFileSync(CA_KEY_PATH, 'utf-8');
+    cachedCA = {
+      cert: forge.pki.certificateFromPem(cert),
+      key: forge.pki.privateKeyFromPem(key) as forge.pki.rsa.PrivateKey,
+    };
+    return { cert, key };
+  }
+
+  // Generate new root CA
+  const keys = forge.pki.rsa.generateKeyPair(2048);
+  const cert = forge.pki.createCertificate();
+
+  cert.publicKey = keys.publicKey;
+  cert.serialNumber = generateSerial();
+  cert.validity.notBefore = new Date();
+  cert.validity.notAfter = new Date();
+  cert.validity.notAfter.setFullYear(cert.validity.notAfter.getFullYear() + 10);
+
+  const attrs = [
+    { name: 'commonName', value: 'SmartContext Proxy CA' },
+    { name: 'organizationName', value: 'SmartContext' },
+  ];
+
+  cert.setSubject(attrs);
+  cert.setIssuer(attrs);
+
+  cert.setExtensions([
+    { name: 'basicConstraints', cA: true, critical: true },
+    { name: 'keyUsage', keyCertSign: true, cRLSign: true, critical: true },
+    { name: 'subjectKeyIdentifier' },
+  ]);
+
+  cert.sign(keys.privateKey, forge.md.sha256.create());
+
+  const certPem = forge.pki.certificateToPem(cert);
+  const keyPem = forge.pki.privateKeyToPem(keys.privateKey);
+
+  fs.writeFileSync(CA_CERT_PATH, certPem);
+  fs.writeFileSync(CA_KEY_PATH, keyPem, { mode: 0o600 });
+
+  cachedCA = { cert, key: keys.privateKey };
+
+  return { cert: certPem, key: keyPem };
+}
+
+/** Generate a TLS certificate for a specific hostname, signed by our CA */
+export function getCertForHost(hostname: string): CertPair {
+  // Check memory cache
+  const cached = hostCertCache.get(hostname);
+  if (cached) return cached;
+
+  // Check disk cache
+  const certPath = path.join(HOSTS_DIR, `${hostname}.crt`);
+  const keyPath = path.join(HOSTS_DIR, `${hostname}.key`);
+
+  if (fs.existsSync(certPath) && fs.existsSync(keyPath)) {
+    const pair = {
+      cert: fs.readFileSync(certPath, 'utf-8'),
+      key: fs.readFileSync(keyPath, 'utf-8'),
+    };
+    hostCertCache.set(hostname, pair);
+    return pair;
+  }
+
+  // Generate new cert
+  if (!cachedCA) ensureCA();
+
+  const keys = forge.pki.rsa.generateKeyPair(2048);
+  const cert = forge.pki.createCertificate();
+
+  cert.publicKey = keys.publicKey;
+  cert.serialNumber = generateSerial();
+  cert.validity.notBefore = new Date();
+  cert.validity.notAfter = new Date();
+  cert.validity.notAfter.setFullYear(cert.validity.notAfter.getFullYear() + 1);
+
+  cert.setSubject([{ name: 'commonName', value: hostname }]);
+  cert.setIssuer(cachedCA!.cert.subject.attributes);
+
+  cert.setExtensions([
+    { name: 'basicConstraints', cA: false },
+    { name: 'keyUsage', digitalSignature: true, keyEncipherment: true },
+    { name: 'extKeyUsage', serverAuth: true },
+    {
+      name: 'subjectAltName',
+      altNames: [
+        { type: 2, value: hostname }, // DNS
+        ...(isIP(hostname) ? [{ type: 7, ip: hostname }] : []),
+      ],
+    },
+  ]);
+
+  cert.sign(cachedCA!.key, forge.md.sha256.create());
+
+  const certPem = forge.pki.certificateToPem(cert);
+  const keyPem = forge.pki.privateKeyToPem(keys.privateKey);
+
+  fs.writeFileSync(certPath, certPem);
+  fs.writeFileSync(keyPath, keyPem, { mode: 0o600 });
+
+  const pair = { cert: certPem, key: keyPem };
+  hostCertCache.set(hostname, pair);
+  return pair;
+}
+
+export function getCACertPath(): string {
+  return CA_CERT_PATH;
+}
+
+function generateSerial(): string {
+  return Date.now().toString(16) + Math.random().toString(16).slice(2, 10);
+}
+
+function isIP(str: string): boolean {
+  return /^\d{1,3}(\.\d{1,3}){3}$/.test(str) || str.includes(':');
+}

package/src/tls/trust-store.ts

@@ -0,0 +1,123 @@
+import { execFileSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { getCACertPath } from './ca-manager.js';
+
+const CA_NAME = 'SmartContext Proxy CA';
+
+export interface TrustStoreResult {
+  success: boolean;
+  message: string;
+  requiresSudo: boolean;
+}
+
+/** Install CA cert into system trust store */
+export function installCA(): TrustStoreResult {
+  const certPath = getCACertPath();
+  if (!fs.existsSync(certPath)) {
+    return { success: false, message: 'CA cert not found. Run ensureCA() first.', requiresSudo: false };
+  }
+
+  if (process.platform === 'darwin') {
+    return installMacOS(certPath);
+  } else if (process.platform === 'linux') {
+    return installLinux(certPath);
+  }
+
+  return { success: false, message: `Unsupported platform: ${process.platform}`, requiresSudo: false };
+}
+
+/** Remove CA cert from system trust store */
+export function uninstallCA(): TrustStoreResult {
+  if (process.platform === 'darwin') {
+    return uninstallMacOS();
+  } else if (process.platform === 'linux') {
+    return uninstallLinux();
+  }
+
+  return { success: false, message: `Unsupported platform: ${process.platform}`, requiresSudo: false };
+}
+
+/** Check if CA is installed in trust store */
+export function isCAInstalled(): boolean {
+  if (process.platform === 'darwin') {
+    try {
+      const result = execFileSync('security', [
+        'find-certificate', '-c', CA_NAME, '-Z',
+        '/Library/Keychains/System.keychain',
+      ], { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'pipe'] });
+      return result.includes(CA_NAME);
+    } catch {
+      return false;
+    }
+  } else if (process.platform === 'linux') {
+    const dest = '/usr/local/share/ca-certificates/smartcontext-ca.crt';
+    return fs.existsSync(dest);
+  }
+  return false;
+}
+
+function installMacOS(certPath: string): TrustStoreResult {
+  try {
+    // Add to system keychain (requires admin)
+    execFileSync('sudo', [
+      'security', 'add-trusted-cert',
+      '-d', '-r', 'trustRoot',
+      '-k', '/Library/Keychains/System.keychain',
+      certPath,
+    ], { stdio: 'pipe' });
+
+    return { success: true, message: 'CA installed in macOS System Keychain', requiresSudo: true };
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    if (msg.includes('sudo') || msg.includes('password')) {
+      return { success: false, message: 'Requires sudo. Run: sudo smartcontext-proxy install', requiresSudo: true };
+    }
+    return { success: false, message: `Failed to install CA: ${msg}`, requiresSudo: true };
+  }
+}
+
+function uninstallMacOS(): TrustStoreResult {
+  try {
+    execFileSync('sudo', [
+      'security', 'remove-trusted-cert',
+      '-d', getCACertPath(),
+    ], { stdio: 'pipe' });
+
+    return { success: true, message: 'CA removed from macOS System Keychain', requiresSudo: true };
+  } catch (err) {
+    // Try alternative: delete by name
+    try {
+      execFileSync('sudo', [
+        'security', 'delete-certificate',
+        '-c', CA_NAME,
+        '/Library/Keychains/System.keychain',
+      ], { stdio: 'pipe' });
+      return { success: true, message: 'CA removed from macOS System Keychain', requiresSudo: true };
+    } catch {
+      return { success: false, message: `Failed to remove CA: ${err}`, requiresSudo: true };
+    }
+  }
+}
+
+function installLinux(certPath: string): TrustStoreResult {
+  const dest = '/usr/local/share/ca-certificates/smartcontext-ca.crt';
+  try {
+    execFileSync('sudo', ['cp', certPath, dest], { stdio: 'pipe' });
+    execFileSync('sudo', ['update-ca-certificates'], { stdio: 'pipe' });
+    return { success: true, message: 'CA installed in Linux trust store', requiresSudo: true };
+  } catch (err) {
+    return { success: false, message: `Failed: ${err}`, requiresSudo: true };
+  }
+}
+
+function uninstallLinux(): TrustStoreResult {
+  const dest = '/usr/local/share/ca-certificates/smartcontext-ca.crt';
+  try {
+    execFileSync('sudo', ['rm', '-f', dest], { stdio: 'pipe' });
+    execFileSync('sudo', ['update-ca-certificates', '--fresh'], { stdio: 'pipe' });
+    return { success: true, message: 'CA removed from Linux trust store', requiresSudo: true };
+  } catch (err) {
+    return { success: false, message: `Failed: ${err}`, requiresSudo: true };
+  }
+}

package/src/tray/bridge.ts

@@ -0,0 +1,61 @@
+import { execFile, type ChildProcess } from 'node:child_process';
+import path from 'node:path';
+import fs from 'node:fs';
+
+let trayProcess: ChildProcess | null = null;
+
+const TRAY_BINARY_DIR = path.join(__dirname, '..', '..', 'native', 'macos', 'SmartContextTray');
+const TRAY_BUILD_DIR = path.join(TRAY_BINARY_DIR, '.build', 'release');
+const TRAY_BINARY = path.join(TRAY_BUILD_DIR, 'SmartContextTray');
+
+/** Build the native tray app if not already built */
+export function buildTray(): boolean {
+  if (process.platform !== 'darwin') return false;
+
+  if (fs.existsSync(TRAY_BINARY)) return true;
+
+  try {
+    const { execFileSync } = require('node:child_process');
+    execFileSync('swift', ['build', '-c', 'release'], {
+      cwd: TRAY_BINARY_DIR,
+      stdio: 'pipe',
+      timeout: 60000,
+    });
+    return fs.existsSync(TRAY_BINARY);
+  } catch (err) {
+    console.log(`Tray build failed: ${err}`);
+    return false;
+  }
+}
+
+/** Launch the tray app */
+export function startTray(): boolean {
+  if (process.platform !== 'darwin') return false;
+  if (trayProcess) return true;
+
+  if (!buildTray()) {
+    console.log('Tray app not available (build failed or not macOS)');
+    return false;
+  }
+
+  trayProcess = execFile(TRAY_BINARY, [], {}, (err) => {
+    if (err) console.log(`Tray exited: ${err.message}`);
+    trayProcess = null;
+  });
+
+  trayProcess.unref();
+  return true;
+}
+
+/** Stop the tray app */
+export function stopTray(): void {
+  if (trayProcess) {
+    trayProcess.kill('SIGTERM');
+    trayProcess = null;
+  }
+}
+
+/** Check if tray is running */
+export function isTrayRunning(): boolean {
+  return trayProcess !== null && !trayProcess.killed;
+}

package/src/ui/dashboard.ts

@@ -1,17 +1,28 @@
 import type { MetricsCollector } from '../metrics/collector.js';
-import type { StorageAdapter } from '../storage/types.js';
 
-export function renderDashboard(metrics: MetricsCollector, paused: boolean): string {
+export interface DashboardState {
+  paused: boolean;
+  mode: 'transparent' | 'optimizing';
+  proxyType: 'connect' | 'legacy';
+  abTestEnabled: boolean;
+  debugHeaders: boolean;
+  caInstalled: boolean;
+  systemProxyActive: boolean;
+}
+
+export function renderDashboard(metrics: MetricsCollector, state: DashboardState): string {
   const stats = metrics.getStats();
   const recent = metrics.getRecent(20);
-  const uptime = metrics.getUptime();
-  const uptimeStr = formatDuration(uptime);
+  const uptimeStr = formatDuration(metrics.getUptime());
+  const savingsAmount = estimateCostSaved(stats.totalOriginalTokens - stats.totalOptimizedTokens);
 
-  const statusBadge = paused
+  const stateBadge = state.paused
     ? '<span class="badge paused">PAUSED</span>'
     : '<span class="badge running">RUNNING</span>';
 
-  const savingsAmount = estimateCostSaved(stats.totalOriginalTokens - stats.totalOptimizedTokens);
+  const modeBadge = state.mode === 'optimizing'
+    ? '<span class="badge opt">OPTIMIZING</span>'
+    : '<span class="badge transparent">TRANSPARENT</span>';
 
   return `<!DOCTYPE html>
 <html lang="en">
@@ -24,17 +35,23 @@ export function renderDashboard(metrics: MetricsCollector, paused: boolean): str
   body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: #0f1117; color: #e1e4e8; }
   .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
   header { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid #21262d; margin-bottom: 24px; }
-  h1 { font-size: 20px; font-weight: 600; }
+  h1 { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
   h2 { font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #8b949e; }
-  .badge { padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
+  .badge { padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
   .badge.running { background: #238636; color: #fff; }
   .badge.paused { background: #d29922; color: #000; }
-  .controls { display: flex; gap: 8px; }
-  .btn { padding: 6px 16px; border-radius: 6px; border: 1px solid #30363d; background: #21262d; color: #e1e4e8; cursor: pointer; font-size: 13px; }
-  .btn:hover { background: #30363d; }
+  .badge.opt { background: #1f6feb; color: #fff; }
+  .badge.transparent { background: #30363d; color: #8b949e; }
+  .badge.on { background: #238636; color: #fff; }
+  .badge.off { background: #30363d; color: #8b949e; }
+  .controls { display: flex; gap: 8px; align-items: center; }
+  .btn { padding: 6px 16px; border-radius: 6px; border: 1px solid #30363d; background: #21262d; color: #e1e4e8; cursor: pointer; font-size: 13px; transition: all 0.15s; }
+  .btn:hover { background: #30363d; border-color: #484f58; }
   .btn.primary { background: #238636; border-color: #238636; }
+  .btn.primary:hover { background: #2ea043; }
   .btn.warn { background: #d29922; border-color: #d29922; color: #000; }
-  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 24px; }
+  .btn.danger { background: #da3633; border-color: #da3633; }
+  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
   .card { background: #161b22; border: 1px solid #21262d; border-radius: 8px; padding: 20px; }
   .card .value { font-size: 32px; font-weight: 700; color: #58a6ff; }
   .card .label { font-size: 13px; color: #8b949e; margin-top: 4px; }
@@ -50,20 +67,46 @@ export function renderDashboard(metrics: MetricsCollector, paused: boolean): str
   .tab.active { color: #e1e4e8; border-bottom-color: #58a6ff; }
   .tab-content { display: none; }
   .tab-content.active { display: block; }
+  .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+  .setting { background: #161b22; border: 1px solid #21262d; border-radius: 8px; padding: 16px; display: flex; justify-content: space-between; align-items: center; }
+  .setting-info { flex: 1; }
+  .setting-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
+  .setting-desc { font-size: 12px; color: #8b949e; }
+  .toggle { position: relative; width: 44px; height: 24px; cursor: pointer; }
+  .toggle input { display: none; }
+  .toggle .slider { position: absolute; inset: 0; background: #30363d; border-radius: 12px; transition: 0.2s; }
+  .toggle .slider:before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #8b949e; border-radius: 50%; transition: 0.2s; }
+  .toggle input:checked + .slider { background: #238636; }
+  .toggle input:checked + .slider:before { transform: translateX(20px); background: #fff; }
+  .status-row { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
+  .status-pill { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #8b949e; }
+  .dot { width: 8px; height: 8px; border-radius: 50%; }
+  .dot.green { background: #3fb950; }
+  .dot.yellow { background: #d29922; }
+  .dot.red { background: #f85149; }
+  .dot.gray { background: #484f58; }
   .refresh-note { font-size: 11px; color: #484f58; text-align: right; margin-top: 8px; }
 </style>
 </head>
 <body>
 <div class="container">
   <header>
-    <h1>SmartContext Proxy ${statusBadge}</h1>
+    <h1>SmartContext Proxy ${stateBadge} ${modeBadge}</h1>
     <div class="controls">
-      ${paused
+      ${state.paused
         ? '<button class="btn primary" onclick="api(\'/_sc/resume\')">Resume</button>'
         : '<button class="btn warn" onclick="api(\'/_sc/pause\')">Pause</button>'}
     </div>
   </header>
 
+  <div class="status-row">
+    <div class="status-pill"><div class="dot ${state.caInstalled ? 'green' : 'red'}"></div>CA Certificate</div>
+    <div class="status-pill"><div class="dot ${state.systemProxyActive ? 'green' : 'gray'}"></div>System Proxy</div>
+    <div class="status-pill"><div class="dot ${state.mode === 'optimizing' ? 'green' : 'gray'}"></div>Context Optimization</div>
+    <div class="status-pill"><div class="dot ${state.abTestEnabled ? 'yellow' : 'gray'}"></div>A/B Test</div>
+    <div class="status-pill"><div class="dot ${state.proxyType === 'connect' ? 'green' : 'gray'}"></div>${state.proxyType === 'connect' ? 'Transparent' : 'Legacy'} Mode</div>
+  </div>
+
   <div class="grid">
     <div class="card savings">
       <div class="value">$${savingsAmount}</div>
@@ -84,9 +127,10 @@ export function renderDashboard(metrics: MetricsCollector, paused: boolean): str
   </div>
 
   <div class="tab-bar">
-    <div class="tab active" onclick="switchTab('feed')">Live Feed</div>
-    <div class="tab" onclick="switchTab('providers')">By Provider</div>
-    <div class="tab" onclick="switchTab('models')">By Model</div>
+    <div class="tab active" onclick="switchTab('feed',this)">Live Feed</div>
+    <div class="tab" onclick="switchTab('providers',this)">By Provider</div>
+    <div class="tab" onclick="switchTab('models',this)">By Model</div>
+    <div class="tab" onclick="switchTab('settings',this)">Settings</div>
   </div>
 
   <div id="tab-feed" class="tab-content active">
@@ -116,12 +160,7 @@ export function renderDashboard(metrics: MetricsCollector, paused: boolean): str
       <thead><tr><th>Provider</th><th>Requests</th><th>Tokens Saved</th><th>Savings %</th></tr></thead>
       <tbody>
         ${Object.entries(stats.byProvider).map(([name, s]) => `
-          <tr>
-            <td>${name}</td>
-            <td class="mono">${s.requests}</td>
-            <td class="mono">${formatTokens(s.tokensSaved)}</td>
-            <td class="savings-pct">${s.savingsPercent}%</td>
-          </tr>
+          <tr><td>${name}</td><td class="mono">${s.requests}</td><td class="mono">${formatTokens(s.tokensSaved)}</td><td class="savings-pct">${s.savingsPercent}%</td></tr>
         `).join('')}
       </tbody>
     </table>
@@ -133,31 +172,88 @@ export function renderDashboard(metrics: MetricsCollector, paused: boolean): str
       <thead><tr><th>Model</th><th>Requests</th><th>Tokens Saved</th><th>Savings %</th></tr></thead>
       <tbody>
         ${Object.entries(stats.byModel).map(([name, s]) => `
-          <tr>
-            <td>${name}</td>
-            <td class="mono">${s.requests}</td>
-            <td class="mono">${formatTokens(s.tokensSaved)}</td>
-            <td class="savings-pct">${s.savingsPercent}%</td>
-          </tr>
+          <tr><td>${name}</td><td class="mono">${s.requests}</td><td class="mono">${formatTokens(s.tokensSaved)}</td><td class="savings-pct">${s.savingsPercent}%</td></tr>
         `).join('')}
       </tbody>
     </table>
   </div>
 
-  <div class="refresh-note">Uptime: ${uptimeStr} | Auto-refresh: 10s</div>
+  <div id="tab-settings" class="tab-content">
+    <h2>Controls</h2>
+    <div class="settings-grid">
+      <div class="setting">
+        <div class="setting-info">
+          <div class="setting-name">Context Optimization</div>
+          <div class="setting-desc">Optimize LLM context windows to reduce token usage</div>
+        </div>
+        <label class="toggle">
+          <input type="checkbox" ${!state.paused ? 'checked' : ''} onchange="api(this.checked ? '/_sc/resume' : '/_sc/pause')">
+          <span class="slider"></span>
+        </label>
+      </div>
+
+      <div class="setting">
+        <div class="setting-info">
+          <div class="setting-name">A/B Test Mode</div>
+          <div class="setting-desc">Send each request twice to compare quality</div>
+        </div>
+        <label class="toggle">
+          <input type="checkbox" ${state.abTestEnabled ? 'checked' : ''} onchange="api(this.checked ? '/_sc/ab-test/enable' : '/_sc/ab-test/disable')">
+          <span class="slider"></span>
+        </label>
+      </div>
+
+      <div class="setting">
+        <div class="setting-info">
+          <div class="setting-name">Debug Headers</div>
+          <div class="setting-desc">Add X-SmartContext-* headers to responses</div>
+        </div>
+        <label class="toggle">
+          <input type="checkbox" ${state.debugHeaders ? 'checked' : ''} onchange="api(this.checked ? '/_sc/debug-headers/enable' : '/_sc/debug-headers/disable')">
+          <span class="slider"></span>
+        </label>
+      </div>
+
+      <div class="setting">
+        <div class="setting-info">
+          <div class="setting-name">System Proxy</div>
+          <div class="setting-desc">Auto-intercept all LLM traffic system-wide</div>
+        </div>
+        <label class="toggle">
+          <input type="checkbox" ${state.systemProxyActive ? 'checked' : ''} onchange="api(this.checked ? '/_sc/system-proxy/enable' : '/_sc/system-proxy/disable')">
+          <span class="slider"></span>
+        </label>
+      </div>
+    </div>
+  </div>
+
+  <div class="refresh-note">v0.2.0 | Uptime: ${uptimeStr} | Auto-refresh: 5s</div>
 </div>
 <script>
-function switchTab(name) {
+function switchTab(name, el) {
   document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
   document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
   document.getElementById('tab-' + name).classList.add('active');
-  event.target.classList.add('active');
+  if (el) el.classList.add('active');
+  location.hash = name;
 }
 async function api(path) {
   await fetch(path, { method: 'POST' });
   location.reload();
 }
-setTimeout(() => location.reload(), 10000);
+// Restore tab from URL hash
+(function() {
+  var hash = location.hash.replace('#', '');
+  if (hash && document.getElementById('tab-' + hash)) {
+    document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
+    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+    document.getElementById('tab-' + hash).classList.add('active');
+    document.querySelectorAll('.tab').forEach(t => {
+      if (t.getAttribute('onclick') && t.getAttribute('onclick').indexOf("'" + hash + "'") !== -1) t.classList.add('active');
+    });
+  }
+})();
+setTimeout(() => { var h = location.hash; location.reload(); if (h) location.hash = h; }, 5000);
 </script>
 </body>
 </html>`;
@@ -176,9 +272,7 @@ function formatDuration(ms: number): string {
   return `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`;
 }
 
-/** Rough cost estimate based on Anthropic/OpenAI pricing */
 function estimateCostSaved(tokensSaved: number): string {
-  // Assume avg $15/1M input tokens (Opus pricing)
   const cost = (tokensSaved / 1000000) * 15;
   return cost.toFixed(2);
 }

package/src/ui/ws-feed.ts

@@ -0,0 +1,32 @@
+import { WebSocketServer, WebSocket } from 'ws';
+import type { Server } from 'node:http';
+import type { RequestMetric } from '../metrics/collector.js';
+
+let wss: WebSocketServer | null = null;
+
+/** Attach WebSocket server to existing HTTP server */
+export function attachWebSocketFeed(server: Server): void {
+  wss = new WebSocketServer({ server, path: '/_sc/ws' });
+
+  wss.on('connection', (ws) => {
+    ws.send(JSON.stringify({ type: 'connected', timestamp: Date.now() }));
+  });
+}
+
+/** Broadcast a new request metric to all connected clients */
+export function broadcastMetric(metric: RequestMetric): void {
+  if (!wss) return;
+
+  const data = JSON.stringify({ type: 'request', data: metric });
+
+  for (const client of wss.clients) {
+    if (client.readyState === WebSocket.OPEN) {
+      client.send(data);
+    }
+  }
+}
+
+/** Get count of connected WebSocket clients */
+export function getConnectedClients(): number {
+  return wss?.clients.size || 0;
+}