smartcontext-proxy 0.2.0 → 0.2.1

package/dist/src/system/pf-redirect.js

@@ -0,0 +1,177 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.enablePFRedirect = enablePFRedirect;
+exports.disablePFRedirect = disablePFRedirect;
+exports.isPFRedirectActive = isPFRedirectActive;
+exports.refreshPFRules = refreshPFRules;
+const node_child_process_1 = require("node:child_process");
+const node_fs_1 = __importDefault(require("node:fs"));
+const node_dns_1 = __importDefault(require("node:dns"));
+const node_path_1 = __importDefault(require("node:path"));
+const PF_ANCHOR = 'com.smartcontext';
+const PF_CONF_PATH = node_path_1.default.join(process.env['HOME'] || '.', '.smartcontext', 'pf-smartcontext.conf');
+/** Known LLM provider hostnames to intercept */
+const LLM_HOSTS = [
+    'api.anthropic.com',
+    'api.openai.com',
+    'generativelanguage.googleapis.com',
+    'openrouter.ai',
+    'api.together.xyz',
+    'api.fireworks.ai',
+    'api.mistral.ai',
+    'api.cohere.com',
+    'api.groq.com',
+    'api.deepseek.com',
+];
+/**
+ * Resolve hostnames to IPs for pf rules.
+ * pf works at IP level, not DNS.
+ */
+async function resolveHosts() {
+    const results = new Map();
+    for (const host of LLM_HOSTS) {
+        try {
+            const addrs = await new Promise((resolve, reject) => {
+                node_dns_1.default.resolve4(host, (err, addresses) => {
+                    if (err)
+                        reject(err);
+                    else
+                        resolve(addresses);
+                });
+            });
+            results.set(host, addrs);
+        }
+        catch {
+            // Host might not resolve — skip
+        }
+    }
+    return results;
+}
+/**
+ * Generate pf redirect rules.
+ * Redirects outgoing HTTPS (port 443) traffic to LLM provider IPs
+ * to our local proxy port.
+ */
+function generatePFConf(hostIPs, proxyPort) {
+    const lines = [
+        `# SmartContext Proxy — auto-generated pf rules`,
+        `# Redirects LLM API traffic to local proxy`,
+        ``,
+    ];
+    // Collect all IPs into a pf table
+    const allIPs = [];
+    for (const [host, ips] of hostIPs) {
+        lines.push(`# ${host}: ${ips.join(', ')}`);
+        allIPs.push(...ips);
+    }
+    if (allIPs.length === 0) {
+        lines.push('# No IPs resolved — no rules');
+        return lines.join('\n');
+    }
+    lines.push('');
+    lines.push(`table <llm_providers> { ${allIPs.join(', ')} }`);
+    lines.push('');
+    // Redirect outgoing HTTPS to LLM providers → local proxy
+    // rdr-to changes destination to localhost:proxyPort
+    lines.push(`rdr pass on lo0 proto tcp from any to <llm_providers> port 443 -> 127.0.0.1 port ${proxyPort}`);
+    lines.push('');
+    // Route the traffic through loopback so rdr applies
+    lines.push(`pass out on en0 route-to (lo0 127.0.0.1) proto tcp from any to <llm_providers> port 443`);
+    lines.push(`pass out on en1 route-to (lo0 127.0.0.1) proto tcp from any to <llm_providers> port 443`);
+    lines.push('');
+    return lines.join('\n');
+}
+/**
+ * Install pf redirect rules.
+ * Requires sudo.
+ */
+async function enablePFRedirect(proxyPort) {
+    try {
+        const hostIPs = await resolveHosts();
+        let totalIPs = 0;
+        for (const ips of hostIPs.values())
+            totalIPs += ips.length;
+        if (totalIPs === 0) {
+            return { success: false, message: 'No LLM provider IPs resolved', ips: 0 };
+        }
+        const conf = generatePFConf(hostIPs, proxyPort);
+        node_fs_1.default.mkdirSync(node_path_1.default.dirname(PF_CONF_PATH), { recursive: true });
+        node_fs_1.default.writeFileSync(PF_CONF_PATH, conf);
+        // Load anchor into pf
+        try {
+            (0, node_child_process_1.execFileSync)('sudo', ['pfctl', '-a', PF_ANCHOR, '-f', PF_CONF_PATH], { stdio: 'pipe' });
+        }
+        catch (err) {
+            return { success: false, message: `pfctl load failed: ${err}`, ips: totalIPs };
+        }
+        // Enable pf if not already enabled
+        try {
+            (0, node_child_process_1.execFileSync)('sudo', ['pfctl', '-e'], { stdio: 'pipe' });
+        }
+        catch {
+            // Already enabled — ok
+        }
+        return { success: true, message: `pf redirect active: ${totalIPs} IPs from ${hostIPs.size} hosts → :${proxyPort}`, ips: totalIPs };
+    }
+    catch (err) {
+        return { success: false, message: `Failed: ${err}`, ips: 0 };
+    }
+}
+/**
+ * Remove pf redirect rules.
+ */
+function disablePFRedirect() {
+    try {
+        // Flush anchor rules
+        try {
+            (0, node_child_process_1.execFileSync)('sudo', ['pfctl', '-a', PF_ANCHOR, '-F', 'all'], { stdio: 'pipe' });
+        }
+        catch { }
+        // Remove conf file
+        try {
+            node_fs_1.default.unlinkSync(PF_CONF_PATH);
+        }
+        catch { }
+        return { success: true, message: 'pf redirect removed' };
+    }
+    catch (err) {
+        return { success: false, message: `Failed: ${err}` };
+    }
+}
+/**
+ * Check if pf redirect is active.
+ */
+function isPFRedirectActive() {
+    try {
+        const result = (0, node_child_process_1.execFileSync)('sudo', ['pfctl', '-a', PF_ANCHOR, '-sr'], {
+            encoding: 'utf-8',
+            stdio: ['pipe', 'pipe', 'pipe'],
+        });
+        return result.includes('rdr') || result.includes('route-to');
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Refresh IP addresses (IPs can change due to DNS).
+ * Call periodically to keep rules current.
+ */
+async function refreshPFRules(proxyPort) {
+    const hostIPs = await resolveHosts();
+    let totalIPs = 0;
+    for (const ips of hostIPs.values())
+        totalIPs += ips.length;
+    if (totalIPs === 0)
+        return;
+    const conf = generatePFConf(hostIPs, proxyPort);
+    node_fs_1.default.writeFileSync(PF_CONF_PATH, conf);
+    try {
+        (0, node_child_process_1.execFileSync)('sudo', ['pfctl', '-a', PF_ANCHOR, '-f', PF_CONF_PATH], { stdio: 'pipe' });
+    }
+    catch { }
+}
+//# sourceMappingURL=pf-redirect.js.map

package/dist/src/test/dashboard.test.js

@@ -40,6 +40,7 @@ function httpRequest(url, options, body) {
         node_assert_1.default.ok(res.headers['content-type']?.includes('text/html'));
         node_assert_1.default.ok(res.body.includes('SmartContext Proxy'));
         node_assert_1.default.ok(res.body.includes('Total Requests'));
+        node_assert_1.default.ok(res.body.includes('Settings'));
     });
     (0, node_test_1.it)('returns status via /_sc/status', async () => {
         const res = await httpRequest(`http://127.0.0.1:${PORT}/_sc/status`, { method: 'GET' });

package/dist/src/ui/dashboard.d.ts

@@ -1,2 +1,11 @@
 import type { MetricsCollector } from '../metrics/collector.js';
-export declare 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 declare function renderDashboard(metrics: MetricsCollector, state: DashboardState): string;

package/dist/src/ui/dashboard.js

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderDashboard = renderDashboard;
-function renderDashboard(metrics, paused) {
+function renderDashboard(metrics, state) {
     const stats = metrics.getStats();
     const recent = metrics.getRecent(20);
-    const uptime = metrics.getUptime();
-    const uptimeStr = formatDuration(uptime);
-    const statusBadge = paused
+    const uptimeStr = formatDuration(metrics.getUptime());
+    const savingsAmount = estimateCostSaved(stats.totalOriginalTokens - stats.totalOptimizedTokens);
+    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">
 <head>
@@ -21,17 +23,23 @@ function renderDashboard(metrics, paused) {
   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; }
@@ -47,20 +55,46 @@ function renderDashboard(metrics, paused) {
   .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>
@@ -81,9 +115,10 @@ function renderDashboard(metrics, paused) {
   </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">
@@ -113,12 +148,7 @@ function renderDashboard(metrics, paused) {
       <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>
@@ -130,31 +160,88 @@ function renderDashboard(metrics, paused) {
       <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>`;
@@ -174,9 +261,7 @@ function formatDuration(ms) {
         return `${Math.floor(s / 60)}m ${s % 60}s`;
     return `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`;
 }
-/** Rough cost estimate based on Anthropic/OpenAI pricing */
 function estimateCostSaved(tokensSaved) {
-    // Assume avg $15/1M input tokens (Opus pricing)
     const cost = (tokensSaved / 1000000) * 15;
     return cost.toFixed(2);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smartcontext-proxy",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Intelligent context window optimization proxy for LLM APIs",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",

package/src/proxy/connect-proxy.ts

@@ -7,7 +7,10 @@ import type { SmartContextConfig } from '../config/schema.js';
 import type { ProviderAdapter } from '../providers/types.js';
 import { ContextOptimizer } from '../context/optimizer.js';
 import { MetricsCollector } from '../metrics/collector.js';
-import { renderDashboard } from '../ui/dashboard.js';
+import { renderDashboard, type DashboardState } from '../ui/dashboard.js';
+import { isABEnabled, enableABTest, disableABTest, getABSummary, getABResults } from '../context/ab-test.js';
+import { isCAInstalled } from '../tls/trust-store.js';
+import { cacheRealIPs, getRealIP, isDNSRedirectActive, enableDNSRedirect, disableDNSRedirect } from '../system/dns-redirect.js';
 
 /**
  * HTTP CONNECT proxy that transparently intercepts LLM traffic.
@@ -22,6 +25,8 @@ export class ConnectProxy {
   private optimizer: ContextOptimizer | null = null;
   private adapters = new Map<string, ProviderAdapter>();
   private paused = false;
+  private debugHeaders = false;
+  private systemProxyActive = false;
   private requestCounter = { value: 0 };
   private config: SmartContextConfig;
 
@@ -80,7 +85,7 @@ export class ConnectProxy {
     // Dashboard
     if (path === '/' && method === 'GET') {
       res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-      res.end(renderDashboard(this.metrics, this.paused));
+      res.end(renderDashboard(this.metrics, this.getDashboardState()));
       return;
     }
 
@@ -115,7 +120,7 @@ export class ConnectProxy {
     res.end(JSON.stringify({ error: 'Not found' }));
   }
 
-  private handleAPI(path: string, method: string, req: http.IncomingMessage, res: http.ServerResponse): void {
+  private async handleAPI(path: string, method: string, req: http.IncomingMessage, res: http.ServerResponse): Promise<void> {
     res.setHeader('Content-Type', 'application/json');
 
     switch (path) {
@@ -141,12 +146,71 @@ export class ConnectProxy {
         this.paused = false;
         res.end(JSON.stringify({ ok: true, state: 'running' }));
         break;
+      case '/_sc/ab-test/enable':
+        enableABTest();
+        res.end(JSON.stringify({ ok: true, abTest: true }));
+        break;
+      case '/_sc/ab-test/disable':
+        disableABTest();
+        res.end(JSON.stringify({ ok: true, abTest: false }));
+        break;
+      case '/_sc/ab-test/results':
+        res.end(JSON.stringify(getABResults()));
+        break;
+      case '/_sc/ab-test/summary':
+        res.end(JSON.stringify(getABSummary()));
+        break;
+      case '/_sc/debug-headers/enable':
+        this.debugHeaders = true;
+        this.config.logging.debug_headers = true;
+        res.end(JSON.stringify({ ok: true, debugHeaders: true }));
+        break;
+      case '/_sc/debug-headers/disable':
+        this.debugHeaders = false;
+        this.config.logging.debug_headers = false;
+        res.end(JSON.stringify({ ok: true, debugHeaders: false }));
+        break;
+      case '/_sc/system-proxy/enable':
+        try {
+          // Cache real IPs before overriding DNS
+          await cacheRealIPs();
+          const dnsResult = enableDNSRedirect();
+          this.systemProxyActive = dnsResult.success;
+          res.end(JSON.stringify({ ok: dnsResult.success, message: dnsResult.message, method: 'dns-redirect' }));
+        } catch (err) {
+          res.end(JSON.stringify({ ok: false, error: String(err) }));
+        }
+        break;
+      case '/_sc/system-proxy/disable':
+        try {
+          const disableResult = disableDNSRedirect();
+          this.systemProxyActive = false;
+          res.end(JSON.stringify({ ok: disableResult.success, message: disableResult.message }));
+        } catch (err) {
+          res.end(JSON.stringify({ ok: false, error: String(err) }));
+        }
+        break;
       default:
         res.writeHead(404);
         res.end(JSON.stringify({ error: `Unknown: ${path}` }));
     }
   }
 
+  private getDashboardState(): DashboardState {
+    let caInstalled = false;
+    try { caInstalled = isCAInstalled(); } catch {}
+
+    return {
+      paused: this.paused,
+      mode: this.optimizer ? 'optimizing' : 'transparent',
+      proxyType: 'connect',
+      abTestEnabled: isABEnabled(),
+      debugHeaders: this.debugHeaders,
+      caInstalled,
+      systemProxyActive: this.systemProxyActive,
+    };
+  }
+
   private generatePAC(): string {
     const { getLLMHostnames } = require('./classifier.js');
     const hosts = getLLMHostnames();

package/src/proxy/server.ts

@@ -11,7 +11,7 @@ import type { EmbeddingAdapter } from '../embedding/types.js';
 import type { StorageAdapter } from '../storage/types.js';
 import { estimateTokens } from '../context/chunker.js';
 import { getTextContent } from '../context/canonical.js';
-import { renderDashboard } from '../ui/dashboard.js';
+import { renderDashboard, type DashboardState } from '../ui/dashboard.js';
 
 export class ProxyServer {
   private server: http.Server;
@@ -72,7 +72,16 @@ export class ProxyServer {
     // Dashboard (root path)
     if (path === '/' && method === 'GET') {
       res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
-      res.end(renderDashboard(this.metrics, this.paused));
+      const state: DashboardState = {
+        paused: this.paused,
+        mode: this.optimizer ? 'optimizing' : 'transparent',
+        proxyType: 'legacy',
+        abTestEnabled: false,
+        debugHeaders: this.config.logging.debug_headers,
+        caInstalled: false,
+        systemProxyActive: false,
+      };
+      res.end(renderDashboard(this.metrics, state));
       return;
     }