copilot-tracer 1.0.4 → 1.0.6

package/dist/webServer.js

@@ -4,11 +4,11 @@ import { Server } from 'socket.io';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { execSync } from 'child_process';
-import { getTraces, getTrace, getSessionSummary } from './db.js';
+import { getTraces, getTrace, getSessionSummary, getDashboard, updateProjectLocalPath, getProjectTraces, getProjectSessionSummary } from './db.js';
 import { traceEvents } from './proxy.js';
 import { registerOtlpRoutes } from './otlpReceiver.js';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
-export function startWebServer(port = 4747, sessionId) {
+export function startWebServer(port = 4747, sessionId, projectId) {
     const app = express();
     const httpServer = createServer(app);
     const io = new Server(httpServer, { cors: { origin: '*' } });
@@ -16,7 +16,7 @@ export function startWebServer(port = 4747, sessionId) {
     app.use(express.static(path.join(__dirname, '../web')));
     // Register OTLP receiver routes
     app.use(express.json({ limit: '10mb' }));
-    registerOtlpRoutes(app, sessionId ?? 'default');
+    registerOtlpRoutes(app, sessionId ?? 'default', projectId);
     // API
     app.get('/api/traces', (req, res) => {
         const sid = req.query.sessionId || undefined; // undefined = all sessions
@@ -81,14 +81,45 @@ ${prompt.trim()}`;
             return res.json(null);
         res.json(getSessionSummary(sid));
     });
+    app.get('/api/dashboard', (_req, res) => {
+        res.json(getDashboard());
+    });
+    // Project registration — CLI registers its local path for a project
+    app.post('/api/projects', (req, res) => {
+        const { projectId, localPath } = req.body;
+        if (!projectId || !localPath) {
+            res.status(400).json({ error: 'projectId and localPath required' });
+            return;
+        }
+        updateProjectLocalPath(projectId, localPath);
+        res.json({ ok: true });
+    });
+    // Project-scoped traces
+    app.get('/api/projects/:id/traces', (req, res) => {
+        const traces = getProjectTraces(req.params.id, 200);
+        res.json(traces);
+    });
+    // Project-scoped summary
+    app.get('/api/projects/:id/summary', (req, res) => {
+        res.json(getProjectSessionSummary(req.params.id));
+    });
     // Socket.io — push real-time updates
     io.on('connection', (socket) => {
+        const projectId = socket.handshake.query.projectId;
         // Send current state on connect
-        const sid = sessionId;
-        socket.emit('init', {
-            traces: getTraces(sid, 200),
-            summary: sid ? getSessionSummary(sid) : null,
-        });
+        if (projectId) {
+            socket.emit('init', {
+                traces: getProjectTraces(projectId, 200),
+                summary: getProjectSessionSummary(projectId),
+            });
+        }
+        else {
+            const sid = sessionId;
+            socket.emit('init', {
+                traces: getTraces(sid, 200),
+                summary: sid ? getSessionSummary(sid) : null,
+            });
+        }
         const onUpdate = (entry) => socket.emit('trace:update', entry);
         const onDone = (entry) => socket.emit('trace:done', entry);
         traceEvents.on('trace:update', onUpdate);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "copilot-tracer",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Real-time tracing and prompt-refinement companion for GitHub Copilot CLI and VS Code Copilot — tracks tokens, AI credits, tool calls, and refined prompts with console and web UI",
   "keywords": [
     "copilot",
@@ -14,7 +14,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/chuongnd/copilot-tracer.git"
+    "url": "https://github.com/chuongxl/copilot-tracer.git"
   },
   "engines": {
     "node": ">=18"

package/web/index.html

@@ -8,13 +8,11 @@
 <script type="module">
   import * as webllm from 'https://esm.run/@mlc-ai/web-llm';
 
-  // ─── REFINE ENGINE — Phase 1: instant heuristics · Phase 2: webLLM ───────
   let refineOpen = false;
   let engine = null;
 
   const tok = t => Math.ceil((t || '').length / 4);
 
-  // Phase 1 — instant local analysis
   function analyzePrompt(t) {
     const issues = [], suggestions = [];
     if ([/\bplease\b/,/\bcould you\b/,/\bcan you\b/,/\bI want you to\b/,/\bkindly\b/,/\bthank you\b/,/\bif you don.t mind\b/].some(r => r.test(t)))
@@ -66,10 +64,9 @@
       <div class=refine-optimized id=refined-text style="display:none"></div>
       <div id=refine-actions style="display:none">
         <button class="refine-copy-btn" onclick="copyRefined()">📋 Copy optimized prompt</button>
-        <div class=refine-stats id=refine-stats></div>
+        <div class="refine-stats" id=refine-stats></div>
       </div>`;
 
-    // Phase 2 — webLLM
     const progressEl = () => document.getElementById('refine-progress');
     const optimizingEl = document.getElementById('refine-optimizing');
     const refinedEl = document.getElementById('refined-text');
@@ -127,8 +124,23 @@ Reply with ONLY the rewritten prompt. No explanation, no preamble.`;
 </script>
 <style>
   * { box-sizing: border-box; margin: 0; padding: 0; }
-  body { background: #0d1117; color: #c9d1d9; font-family: 'Segoe UI', system-ui, monospace; font-size: 13px; }
-  
+  body { background: #0d1117; color: #c9d1d9; font-family: 'Segoe UI', system-ui, monospace; font-size: 13px; display: flex; height: 100vh; }
+
+  /* ── Sidebar ─────────────────────────────────── */
+  .sidebar { width: 56px; background: #161b22; border-right: 1px solid #30363d; display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 4px; flex-shrink: 0; }
+  .sidebar-brand { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 12px; }
+  .sidebar-link { width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none; color: #8b949e; transition: all 0.15s; cursor: pointer; gap: 2px; }
+  .sidebar-link:hover { background: #21262d; color: #c9d1d9; }
+  .sidebar-link.active { background: #1f3358; color: #58a6ff; }
+  .sidebar-icon { font-size: 16px; line-height: 1; }
+  .sidebar-label { font-size: 8px; text-transform: uppercase; letter-spacing: 0.3px; }
+
+  /* ── Main content area ───────────────────────── */
+  .content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+  .page { display: none; flex-direction: column; flex: 1; overflow: hidden; }
+  .page.active { display: flex; }
+
+  /* ── Header (live tracer) ────────────────────── */
   header { background: #161b22; border-bottom: 1px solid #30363d; padding: 12px 20px; display: flex; align-items: center; gap: 16px; }
   header h1 { color: #58a6ff; font-size: 16px; font-weight: 700; }
   .badge { background: #21262d; border: 1px solid #30363d; border-radius: 12px; padding: 2px 10px; font-size: 11px; color: #8b949e; }
@@ -136,7 +148,8 @@ Reply with ONLY the rewritten prompt. No explanation, no preamble.`;
   #status-dot { width: 8px; height: 8px; border-radius: 50%; background: #3fb950; display: inline-block; animation: pulse 2s infinite; }
   @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
 
-  .stats-bar { background: #161b22; border-bottom: 1px solid #30363d; padding: 8px 20px; display: flex; gap: 24px; }
+  /* ── Stats bar (live tracer) ─────────────────── */
+  .stats-bar { background: #161b22; border-bottom: 1px solid #30363d; padding: 8px 20px; display: flex; gap: 24px; flex-wrap: wrap; }
   .stat { display: flex; flex-direction: column; }
   .stat-label { font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; }
   .stat-value { font-size: 15px; font-weight: 700; color: #e6edf3; }
@@ -145,9 +158,10 @@ Reply with ONLY the rewritten prompt. No explanation, no preamble.`;
   .stat-value.skills { color: #d2a8ff; }
   .stat-value.mcps { color: #56d364; }
 
-  .main { display: flex; height: calc(100vh - 100px); }
+  /* ── Main split (live tracer) ────────────────── */
+  .main { display: flex; flex: 1; overflow: hidden; }
   .table-panel { flex: 1; overflow: auto; }
-  .detail-panel { width: 420px; border-left: 1px solid #30363d; background: #161b22; overflow: auto; display: none; flex-direction: column; }
+  .detail-panel { width: 420px; border-left: 1px solid #30363d; background: #161b22; overflow: auto; display: none; flex-direction: column; flex-shrink: 0; }
   .detail-panel.open { display: flex; }
 
   table { width: 100%; border-collapse: collapse; }
@@ -177,7 +191,7 @@ Reply with ONLY the rewritten prompt. No explanation, no preamble.`;
   .pill-mcp { background: #0a3622; color: #56d364; }
   .pill:hover { opacity: 0.8; filter: brightness(1.2); }
 
-  /* Detail panel */
+  /* ── Detail panel ────────────────────────────── */
   .detail-header { padding: 14px 16px; border-bottom: 1px solid #30363d; display: flex; justify-content: space-between; align-items: center; }
   .detail-header h3 { color: #58a6ff; font-size: 13px; }
   .close-btn { background: none; border: none; color: #8b949e; cursor: pointer; font-size: 18px; line-height: 1; }
@@ -190,7 +204,7 @@ Reply with ONLY the rewritten prompt. No explanation, no preamble.`;
   .detail-box.response { color: #56d364; }
   .detail-box.prompt { color: #e6edf3; max-height: none; overflow: visible; }
 
-  /* Call graph */
+  /* ── Call graph ──────────────────────────────── */
   .call-tree { font-family: monospace; font-size: 12px; }
   .call-node { padding: 4px 0; }
   .call-node-header { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
@@ -203,7 +217,7 @@ Reply with ONLY the rewritten prompt. No explanation, no preamble.`;
   .call-io .label { color: #58a6ff; margin-right: 4px; }
   .call-io.error { color: #f85149; }
 
-  /* Refine panel */
+  /* ── Refine panel ────────────────────────────── */
   .refine-btn { background: #1f2d1f; border: 1px solid #238636; color: #7ee787; border-radius: 6px; padding: 5px 12px; font-size: 11px; cursor: pointer; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; }
   .refine-btn:hover { background: #238636; color: #fff; }
   .refine-panel { margin-top: 12px; background: #0d1117; border: 1px solid #238636; border-radius: 8px; padding: 14px; display: none; }
@@ -227,6 +241,8 @@ Reply with ONLY the rewritten prompt. No explanation, no preamble.`;
   .refine-suggestion { font-size: 11px; padding: 4px 8px; border-radius: 4px; background: #0d2230; border-left: 3px solid #1f6feb; color: #8b949e; }
   @keyframes refine-spin { to { transform: rotate(360deg); } }
   .refine-spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid #30363d; border-top-color: #58a6ff; border-radius: 50%; animation: refine-spin .7s linear infinite; vertical-align: middle; margin-right: 4px; }
+
+  /* ── Modal ───────────────────────────────────── */
   .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; align-items: center; justify-content: center; }
   .modal-overlay.open { display: flex; }
   .modal { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 20px; width: 560px; max-height: 80vh; overflow: auto; }
@@ -234,58 +250,118 @@ Reply with ONLY the rewritten prompt. No explanation, no preamble.`;
   .modal-close { float: right; background: none; border: none; color: #8b949e; cursor: pointer; font-size: 20px; margin-top: -4px; }
 
   .empty { padding: 40px; text-align: center; color: #8b949e; }
+
+  /* ── Dashboard page ──────────────────────────── */
+  .dash-header { padding: 20px 24px 0; }
+  .dash-header h2 { color: #e6edf3; font-size: 18px; font-weight: 600; }
+  .dash-header p { color: #8b949e; font-size: 12px; margin-top: 4px; }
+
+  .dash-totals { display: flex; gap: 16px; padding: 16px 24px; flex-wrap: wrap; }
+  .dash-total-card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 14px 20px; min-width: 140px; flex: 1; }
+  .dash-total-label { font-size: 10px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; }
+  .dash-total-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
+  .dash-total-value.credits { color: #f0883e; }
+  .dash-total-value.tokens { color: #79c0ff; }
+  .dash-total-value.sessions { color: #d2a8ff; }
+
+  .dash-section-title { padding: 16px 24px 8px; font-size: 12px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; }
+
+  .dash-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 0 24px 24px; }
+  .dash-project-card { background: #161b22; border: 1px solid #30363d; border-radius: 8px; padding: 16px; cursor: pointer; transition: border-color 0.15s; }
+  .dash-project-card:hover { border-color: #58a6ff; }
+  .dash-project-path { color: #e6edf3; font-size: 13px; font-weight: 600; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .dash-project-stats { display: flex; gap: 16px; flex-wrap: wrap; }
+  .dash-project-stat { display: flex; flex-direction: column; }
+  .dash-project-stat-label { font-size: 9px; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; }
+  .dash-project-stat-value { font-size: 14px; font-weight: 600; color: #c9d1d9; margin-top: 2px; }
+  .dash-project-stat-value.credits { color: #f0883e; }
+  .dash-project-last-active { margin-top: 10px; font-size: 11px; color: #8b949e; }
+  .dash-empty { padding: 60px 24px; text-align: center; color: #8b949e; }
+  .dash-empty p { margin-top: 8px; font-size: 12px; }
+  .dash-empty code { background: #21262d; padding: 2px 6px; border-radius: 4px; font-size: 11px; color: #79c0ff; }
 </style>
 </head>
 <body>
 
-<header>
-  <span id="status-dot"></span>
-  <h1>🤖 Copilot Tracer</h1>
-  <span class="badge live">LIVE</span>
-  <span class="badge" id="session-badge">Session: —</span>
-</header>
-
-<div class="stats-bar">
-  <div class="stat"><span class="stat-label">Total Prompts</span><span class="stat-value" id="s-prompts">0</span></div>
-  <div class="stat"><span class="stat-label">AI Credits</span><span class="stat-value credits" id="s-credits">0.00 cr | $0.0000</span></div>
-  <div class="stat"><span class="stat-label">Total Tokens</span><span class="stat-value tokens" id="s-tokens">0</span></div>
-  <div class="stat"><span class="stat-label">Cached</span><span class="stat-value tokens" id="s-cached">0</span></div>
-  <div class="stat"><span class="stat-label">Reasoning</span><span class="stat-value" style="color:#d2a8ff" id="s-reasoning">0</span></div>
-  <div class="stat"><span class="stat-label">Skill Calls</span><span class="stat-value skills" id="s-skills">0</span></div>
-  <div class="stat"><span class="stat-label">Agent Calls</span><span class="stat-value tokens" id="s-agents">0</span></div>
-  <div class="stat"><span class="stat-label">MCP Calls</span><span class="stat-value mcps" id="s-mcps">0</span></div>
-  <div class="stat"><span class="stat-label">Total Duration</span><span class="stat-value" id="s-duration">0s</span></div>
-</div>
-
-<div class="main">
-  <div class="table-panel">
-    <table>
-      <thead>
-        <tr>
-          <th>Date / Time</th>
-          <th>Prompt</th>
-          <th>AI Credits</th>
-          <th>Duration</th>
-          <th>Cached Tokens</th>
-          <th>Written Tokens</th>
-          <th>Reasoning Tokens</th>
-          <th>Skills</th>
-          <th>Agents</th>
-          <th>MCPs</th>
-        </tr>
-      </thead>
-      <tbody id="trace-tbody">
-        <tr><td colspan="10" class="empty">Waiting for Copilot CLI activity...</td></tr>
-      </tbody>
-    </table>
+<!-- ── Sidebar ──────────────────────────────── -->
+<nav class="sidebar">
+  <div class="sidebar-brand">🤖</div>
+  <a href="#/dashboard" class="sidebar-link active" data-page="dashboard" title="Dashboard">
+    <span class="sidebar-icon">📊</span>
+    <span class="sidebar-label">Home</span>
+  </a>
+  <a href="#/live" class="sidebar-link" data-page="live" title="Live Tracer">
+    <span class="sidebar-icon">📡</span>
+    <span class="sidebar-label">Live</span>
+  </a>
+</nav>
+
+<!-- ── Main content ─────────────────────────── -->
+<div class="content">
+
+  <!-- ═══════════════ DASHBOARD PAGE ═══════════════ -->
+  <div id="page-dashboard" class="page active">
+    <div class="dash-header">
+      <h2>Dashboard</h2>
+      <p>All traced projects and sessions</p>
+    </div>
+    <div class="dash-totals" id="dash-totals"></div>
+    <div class="dash-section-title">Projects</div>
+    <div id="dash-projects" class="dash-projects"></div>
   </div>
 
-  <div class="detail-panel" id="detail-panel">
-    <div class="detail-header">
-      <h3 id="detail-title">Trace Detail</h3>
-      <button class="close-btn" onclick="closeDetail()">×</button>
+  <!-- ═══════════════ LIVE TRACER PAGE ═══════════════ -->
+  <div id="page-live" class="page">
+    <header>
+      <span id="status-dot"></span>
+      <h1>🤖 Copilot Tracer</h1>
+      <span class="badge live">LIVE</span>
+      <span class="badge" id="session-badge">Session: —</span>
+    </header>
+
+    <div class="stats-bar">
+      <div class="stat"><span class="stat-label">Total Prompts</span><span class="stat-value" id="s-prompts">0</span></div>
+      <div class="stat"><span class="stat-label">AI Credits</span><span class="stat-value credits" id="s-credits">0.00 cr | $0.0000</span></div>
+      <div class="stat"><span class="stat-label">Total Tokens</span><span class="stat-value tokens" id="s-tokens">0</span></div>
+      <div class="stat"><span class="stat-label">Cached</span><span class="stat-value tokens" id="s-cached">0</span></div>
+      <div class="stat"><span class="stat-label">Reasoning</span><span class="stat-value" style="color:#d2a8ff" id="s-reasoning">0</span></div>
+      <div class="stat"><span class="stat-label">Skill Calls</span><span class="stat-value skills" id="s-skills">0</span></div>
+      <div class="stat"><span class="stat-label">Agent Calls</span><span class="stat-value tokens" id="s-agents">0</span></div>
+      <div class="stat"><span class="stat-label">MCP Calls</span><span class="stat-value mcps" id="s-mcps">0</span></div>
+      <div class="stat"><span class="stat-label">Total Duration</span><span class="stat-value" id="s-duration">0s</span></div>
+    </div>
+
+    <div class="main">
+      <div class="table-panel">
+        <table>
+          <thead>
+            <tr>
+              <th>Date / Time</th>
+              <th>Prompt</th>
+              <th>AI Credits</th>
+              <th>Duration</th>
+              <th>Cached Tokens</th>
+              <th>Written Tokens</th>
+              <th>Reasoning Tokens</th>
+              <th>Skills</th>
+              <th>Agents</th>
+              <th>MCPs</th>
+            </tr>
+          </thead>
+          <tbody id="trace-tbody">
+            <tr><td colspan="10" class="empty">Waiting for Copilot CLI activity...</td></tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="detail-panel" id="detail-panel">
+        <div class="detail-header">
+          <h3 id="detail-title">Trace Detail</h3>
+          <button class="close-btn" onclick="closeDetail()">×</button>
+        </div>
+        <div class="detail-body" id="detail-body"></div>
+      </div>
     </div>
-    <div class="detail-body" id="detail-body"></div>
   </div>
 </div>
 
@@ -299,30 +375,168 @@ Reply with ONLY the rewritten prompt. No explanation, no preamble.`;
 </div>
 
 <script>
+  // ── Routing ────────────────────────────────────
+  const pages = ['dashboard', 'live'];
   const socket = io();
   let traces = {};
   let summary = null;
   let selectedId = null;
+  let currentProjectId = null;
+  let liveSocket = null;
+  let dashboardRefreshPending = false;
+
+  // Main socket listens for all trace events — refreshes dashboard in real-time
+  // (regardless of active page, so it's fresh when you switch back)
+  socket.on('trace:update', () => scheduleDashboardRefresh());
+  socket.on('trace:done', () => scheduleDashboardRefresh());
+
+  function navigateTo(page, projectId) {
+    if (!pages.includes(page)) page = 'dashboard';
+    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
+    document.querySelectorAll('.sidebar-link').forEach(l => l.classList.remove('active'));
+    const pageEl = document.getElementById('page-' + page);
+    const linkEl = document.querySelector(`[data-page="${page}"]`);
+    if (pageEl) pageEl.classList.add('active');
+    if (linkEl) linkEl.classList.add('active');
+
+    if (page === 'dashboard') {
+      loadDashboard();
+    } else if (page === 'live') {
+      connectLiveSocket(projectId);
+    }
+  }
 
-  socket.on('init', (data) => {
-    data.traces.forEach(t => traces[t.id] = t);
-    summary = data.summary;
-    render();
-  });
+  function getHashPage() {
+    const hash = location.hash.replace('#/', '').split('?')[0];
+    return pages.includes(hash) ? hash : 'dashboard';
+  }
 
-  socket.on('trace:update', (t) => {
-    traces[t.id] = t;
-    updateSummaryFromTraces();
-    render();
-    if (selectedId === t.id) renderDetail(t);
-  });
+  function getHashProject() {
+    const match = location.hash.match(/project=([^&]+)/);
+    return match ? decodeURIComponent(match[1]) : null;
+  }
 
-  socket.on('trace:done', (t) => {
-    traces[t.id] = t;
-    updateSummaryFromTraces();
-    render();
+  function connectLiveSocket(projectId) {
+    // Disconnect existing live socket
+    if (liveSocket) { liveSocket.disconnect(); liveSocket = null; }
+    currentProjectId = projectId || null;
+
+    // Reset state
+    traces = {};
+    summary = null;
+    selectedId = null;
+
+    // Connect with project filter
+    const query = currentProjectId ? { projectId: currentProjectId } : {};
+    liveSocket = io({ query });
+    liveSocket.on('init', (data) => {
+      data.traces.forEach(t => traces[t.id] = t);
+      summary = data.summary;
+      render();
+    });
+    liveSocket.on('trace:update', (t) => {
+      traces[t.id] = t;
+      updateSummaryFromTraces();
+      render();
+      if (selectedId === t.id) renderDetail(t);
+    });
+    liveSocket.on('trace:done', (t) => {
+      traces[t.id] = t;
+      updateSummaryFromTraces();
+      render();
+    });
+
+    // Update session badge
+    const badge = document.getElementById('session-badge');
+    if (badge) badge.textContent = currentProjectId ? `Project: ${currentProjectId.replace('project:', '')}` : 'Session: —';
+  }
+
+  window.addEventListener('hashchange', () => {
+    navigateTo(getHashPage(), getHashProject());
   });
 
+  // ── Dashboard ──────────────────────────────────
+  function scheduleDashboardRefresh() {
+    if (dashboardRefreshPending) return;
+    dashboardRefreshPending = true;
+    setTimeout(() => { dashboardRefreshPending = false; loadDashboard(); }, 500);
+  }
+
+  async function loadDashboard() {
+    try {
+      const res = await fetch('/api/dashboard');
+      const data = await res.json();
+      renderDashboard(data);
+    } catch (e) {
+      console.error('Dashboard load failed:', e);
+    }
+  }
+
+  function renderDashboard(data) {
+    const totalsEl = document.getElementById('dash-totals');
+    totalsEl.innerHTML = `
+      <div class="dash-total-card">
+        <div class="dash-total-label">Projects</div>
+        <div class="dash-total-value">${data.totals.projects}</div>
+      </div>
+      <div class="dash-total-card">
+        <div class="dash-total-label">Sessions</div>
+        <div class="dash-total-value sessions">${data.totals.sessions}</div>
+      </div>
+      <div class="dash-total-card">
+        <div class="dash-total-label">Total Tokens</div>
+        <div class="dash-total-value tokens">${data.totals.tokens.toLocaleString()}</div>
+      </div>
+      <div class="dash-total-card">
+        <div class="dash-total-label">Total AI Credits</div>
+        <div class="dash-total-value credits">${fmtCredits(data.totals.credits)}</div>
+      </div>
+    `;
+
+    const projectsEl = document.getElementById('dash-projects');
+    if (!data.projects.length) {
+      projectsEl.innerHTML = `
+        <div class="dash-empty">
+          <div style="font-size:32px;margin-bottom:8px">📡</div>
+          <div style="font-size:14px;color:#e6edf3;margin-bottom:4px">No projects traced yet</div>
+          <p>Start the tracer with a project path:</p>
+          <p style="margin-top:8px"><code>copilot-tracer --project-path /path/to/repo</code></p>
+        </div>`;
+      return;
+    }
+
+    projectsEl.innerHTML = data.projects.map(p => {
+      const shortPath = p.localPath
+        ? p.localPath.replace(/^\/Users\/[^/]+/, '~')
+        : (p.repoUrl || p.path).replace(/^https?:\/\/github\.com\//, 'gh:').replace(/\.git$/, '');
+      const lastActive = p.lastActiveAt ? fmtDateTime(p.lastActiveAt) : '—';
+      const repoBadge = p.repoUrl ? `<div style="margin-top:6px;font-size:10px;color:#58a6ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${escHtml(p.repoUrl)}">${escHtml(p.repoUrl.replace(/^https?:\/\/github\.com\//, '').replace(/\.git$/, ''))}</div>` : '';
+      return `
+        <div class="dash-project-card" onclick="location.hash='#/live?project=${encodeURIComponent(p.id)}'">
+          <div class="dash-project-path" title="${escHtml(p.localPath || p.repoUrl || p.path)}">${escHtml(shortPath)}</div>
+          ${repoBadge}
+          <div class="dash-project-stats">
+            <div class="dash-project-stat">
+              <span class="dash-project-stat-label">Sessions</span>
+              <span class="dash-project-stat-value">${p.sessionCount}</span>
+            </div>
+            <div class="dash-project-stat">
+              <span class="dash-project-stat-label">Tokens</span>
+              <span class="dash-project-stat-value tokens">${p.totalTokens.toLocaleString()}</span>
+            </div>
+            <div class="dash-project-stat">
+              <span class="dash-project-stat-label">AI Credits</span>
+              <span class="dash-project-stat-value credits">${fmtCredits(p.totalCredits)}</span>
+            </div>
+          </div>
+          <div class="dash-project-last-active">Last active: ${lastActive}</div>
+        </div>`;
+    }).join('');
+  }
+
+  // ── Live Tracer (Socket.io) ────────────────────
+  // Connection is managed by connectLiveSocket()
+
   function updateSummaryFromTraces() {
     const arr = Object.values(traces);
     summary = {
@@ -355,7 +569,6 @@ Reply with ONLY the rewritten prompt. No explanation, no preamble.`;
   }
 
   function render() {
-    // Stats bar
     if (summary) {
       document.getElementById('s-prompts').textContent = summary.totalEntries;
       document.getElementById('s-credits').textContent = fmtCredits(summary.totalCredits);
@@ -548,6 +761,16 @@ Duration:         ${fmtDuration(t.durationMs)}
   function escHtml(s) {
     return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
   }
+
+  // ── Init ───────────────────────────────────────
+  const initPage = getHashPage();
+  const initProject = getHashProject();
+  if (initPage === 'live') {
+    connectLiveSocket(initProject);
+  } else {
+    loadDashboard();
+  }
+  navigateTo(initPage, initProject);
 </script>
 </body>
 </html>