@rpcajr/smart-graph-indexer 1.0.0

package/dist/ui.js

@@ -0,0 +1,1003 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateGraphHtml = generateGraphHtml;
+const path = __importStar(require("path"));
+function generateGraphHtml(engine) {
+    const report = engine.getReport();
+    const projectName = path.basename(engine.projectPath) || 'Project';
+    // Format data for Vis.js
+    const nodes = [];
+    const edges = [];
+    const nodeMap = new Map();
+    let idCounter = 1;
+    // Add all files as nodes
+    for (const file of report.files) {
+        const id = idCounter++;
+        nodeMap.set(file, id);
+        // Determine language based on extension for icon/color
+        const ext = path.extname(file).toLowerCase();
+        let group = 'other';
+        let color = '#7f8c8d'; // gray
+        if (['.ts', '.tsx', '.js', '.jsx'].includes(ext)) {
+            group = 'typescript';
+            color = '#3178c6';
+        }
+        else if (ext === '.py') {
+            group = 'python';
+            color = '#3776ab';
+        }
+        else if (ext === '.cs') {
+            group = 'csharp';
+            color = '#178600';
+        }
+        else if (ext === '.java') {
+            group = 'java';
+            color = '#b07219';
+        }
+        else if (ext === '.go') {
+            group = 'go';
+            color = '#00add8';
+        }
+        else if (ext === '.rs') {
+            group = 'rust';
+            color = '#dee5e7';
+        }
+        else if (ext === '.rb') {
+            group = 'ruby';
+            color = '#701516';
+        }
+        else if (['.cpp', '.hpp', '.cc', '.h', '.c'].includes(ext)) {
+            group = 'cpp';
+            color = '#f34b7d';
+        }
+        const skeleton = engine.getFileSkeleton(file);
+        const symbolsCount = skeleton?.symbols.length ?? 0;
+        const tooltipText = `${file}\nSymbols: ${symbolsCount}\nImports: ${skeleton?.dependencies.length ?? 0}`;
+        nodes.push({
+            id,
+            label: path.basename(file),
+            title: tooltipText,
+            value: Math.max(5, symbolsCount), // size based on symbol count
+            color: {
+                background: '#1e1e2e',
+                border: color,
+                highlight: {
+                    background: color,
+                    border: '#ffffff'
+                }
+            },
+            font: { color: '#cdd6f4' },
+            borderWidth: 2,
+            shape: 'dot',
+            filePath: file,
+            symbols: skeleton?.symbols || [],
+            dependencies: skeleton?.dependencies || []
+        });
+    }
+    // Add edges
+    for (const [sourceFile, data] of Object.entries(report.dependencyGraph)) {
+        const sourceId = nodeMap.get(sourceFile);
+        if (!sourceId)
+            continue;
+        for (const targetName of data.imports) {
+            // Find if target matches a file in our project
+            const targetFile = report.files.find(f => {
+                const baseF = path.basename(f, path.extname(f));
+                const baseT = path.basename(targetName, path.extname(targetName));
+                return f === targetName || baseF === baseT;
+            });
+            if (targetFile) {
+                const targetId = nodeMap.get(targetFile);
+                if (targetId && sourceId !== targetId) {
+                    edges.push({
+                        from: sourceId,
+                        to: targetId,
+                        arrows: 'to',
+                        color: { color: '#a6adc8', highlight: '#f5c2e7' },
+                        width: 1
+                    });
+                }
+            }
+        }
+    }
+    return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SmartGraphIndexer - ${projectName}</title>
+  <!-- Vis.js for Network Graph -->
+  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+  <!-- Google Fonts Outfit -->
+  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg-base: #0f0f16;
+      --bg-surface: #1e1e2e;
+      --bg-panel: rgba(30, 30, 46, 0.7);
+      --text-main: #cdd6f4;
+      --text-muted: #a6adc8;
+      --accent: #cba6f7;
+      --accent-glow: rgba(203, 166, 247, 0.4);
+      --border: #313244;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: 'Outfit', sans-serif;
+    }
+
+    body {
+      background-color: var(--bg-base);
+      color: var(--text-main);
+      height: 100vh;
+      overflow: hidden;
+      display: flex;
+    }
+
+    /* Glassmorphism sidebar */
+    .sidebar {
+      width: 400px;
+      background: var(--bg-panel);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      z-index: 10;
+      transition: transform 0.3s ease;
+      position: relative;
+    }
+
+    .header {
+      padding: 20px 24px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .header h1 {
+      font-size: 22px;
+      font-weight: 800;
+      background: linear-gradient(45deg, #cba6f7, #f5c2e7);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin-bottom: 4px;
+      word-break: break-all;
+    }
+
+    .header p {
+      font-size: 12px;
+      color: var(--text-muted);
+    }
+
+    /* Token Stats Panel */
+    .stats-panel {
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--border);
+      background: rgba(203, 166, 247, 0.02);
+    }
+
+    .stats-title {
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: var(--accent);
+      margin-bottom: 10px;
+      font-weight: 600;
+    }
+
+    .stats-grid {
+      display: flex;
+      gap: 12px;
+    }
+
+    .stat-card {
+      flex: 1;
+      background: rgba(15, 15, 22, 0.4);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 8px;
+      text-align: center;
+    }
+
+    .stat-value {
+      font-size: 15px;
+      font-weight: 800;
+      color: #a6e3a1; /* green */
+    }
+
+    .stat-label {
+      font-size: 9.5px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    /* Premium Tabs styling */
+    .tabs-header {
+      display: flex;
+      background: rgba(15, 15, 22, 0.3);
+      border-bottom: 1px solid var(--border);
+    }
+
+    .tab-btn {
+      flex: 1;
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      padding: 12px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      position: relative;
+      outline: none;
+    }
+
+    .tab-btn.active {
+      color: var(--accent);
+      background: rgba(203, 166, 247, 0.03);
+    }
+
+    .tab-btn.active::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: var(--accent);
+      box-shadow: 0 0 8px var(--accent);
+    }
+
+    .search-box {
+      padding: 14px 24px;
+      border-bottom: 1px solid var(--border);
+    }
+
+    .search-input {
+      width: 100%;
+      padding: 10px 14px;
+      background: rgba(15, 15, 22, 0.6);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      color: var(--text-main);
+      font-size: 13px;
+      outline: none;
+      transition: all 0.3s ease;
+    }
+
+    .search-input:focus {
+      border-color: var(--accent);
+      box-shadow: 0 0 10px var(--accent-glow);
+    }
+
+    .content-panel {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px 24px 60px 24px; /* leaves space for footer */
+    }
+
+    .tab-panel {
+      display: none;
+      animation: fadeIn 0.3s ease forwards;
+    }
+
+    .tab-panel.active-panel {
+      display: block;
+    }
+
+    .empty-state {
+      text-align: center;
+      color: var(--text-muted);
+      margin-top: 40px;
+      font-weight: 300;
+      font-size: 13px;
+    }
+
+    /* Node Details Panel */
+    .detail-card {
+      display: none;
+    }
+
+    .detail-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: #ffffff;
+      margin-bottom: 6px;
+      word-break: break-all;
+    }
+
+    .detail-path {
+      font-size: 11px;
+      color: var(--text-muted);
+      background: rgba(0, 0, 0, 0.2);
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-family: monospace;
+      margin-bottom: 16px;
+      display: inline-block;
+    }
+
+    .section-title {
+      font-size: 12.5px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      color: var(--accent);
+      margin-bottom: 10px;
+      margin-top: 20px;
+      font-weight: 600;
+    }
+
+    .symbol-list {
+      list-style: none;
+    }
+
+    .symbol-item {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 8px 10px;
+      margin-bottom: 8px;
+      font-size: 12.5px;
+    }
+
+    .symbol-header {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 4px;
+    }
+
+    .symbol-name {
+      font-weight: 600;
+      color: #f5e0dc;
+    }
+
+    .symbol-kind {
+      font-size: 10px;
+      padding: 1px 5px;
+      border-radius: 4px;
+      background: rgba(203, 166, 247, 0.15);
+      color: var(--accent);
+    }
+
+    .symbol-sig {
+      font-family: monospace;
+      font-size: 10.5px;
+      color: var(--text-muted);
+      overflow-x: auto;
+      white-space: nowrap;
+      padding-top: 2px;
+    }
+
+    .symbol-doc {
+      font-size: 11px;
+      color: #a6e3a1;
+      font-style: italic;
+      margin-top: 4px;
+      border-left: 2px solid #a6e3a1;
+      padding-left: 6px;
+    }
+
+    .dep-badge {
+      display: inline-block;
+      padding: 5px 8px;
+      border-radius: 20px;
+      background: rgba(245, 194, 231, 0.08);
+      border: 1px solid rgba(245, 194, 231, 0.2);
+      color: #f5c2e7;
+      font-size: 11.5px;
+      margin-right: 6px;
+      margin-bottom: 6px;
+    }
+
+    /* Detailed UI History Layout */
+    .session-card {
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      margin-bottom: 16px;
+      overflow: hidden;
+    }
+
+    .session-header {
+      background: rgba(255, 255, 255, 0.03);
+      padding: 12px 16px;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--border);
+      transition: background 0.3s ease;
+    }
+
+    .session-header:hover {
+      background: rgba(255, 255, 255, 0.06);
+    }
+
+    .session-meta {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .session-date {
+      font-size: 13px;
+      font-weight: 600;
+      color: #ffffff;
+    }
+
+    .session-summary {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    .session-savings {
+      font-size: 14px;
+      font-weight: 800;
+      color: #a6e3a1;
+    }
+
+    .session-body {
+      padding: 14px;
+    }
+
+    .history-item {
+      padding: 12px 0;
+      border-bottom: 1px solid rgba(49, 50, 68, 0.2);
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .history-item:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    .history-row-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .history-tool-badge {
+      font-size: 9.5px;
+      font-weight: 700;
+      color: var(--accent);
+      background: rgba(203, 166, 247, 0.12);
+      padding: 2px 6px;
+      border-radius: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .history-time {
+      font-size: 10px;
+      color: var(--text-muted);
+    }
+
+    .history-target {
+      font-family: monospace;
+      font-size: 10.5px;
+      color: #b4befe;
+      background: rgba(0, 0, 0, 0.2);
+      padding: 4px 8px;
+      border-radius: 4px;
+      word-break: break-all;
+    }
+
+    .history-metrics {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    .history-saved {
+      font-weight: 700;
+      color: #a6e3a1; /* green */
+    }
+
+    .progress-bar-container {
+      width: 100%;
+      height: 4px;
+      background: rgba(49, 50, 68, 0.4);
+      border-radius: 2px;
+      overflow: hidden;
+      margin-top: 2px;
+    }
+
+    .progress-bar-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #cba6f7, #a6e3a1);
+      border-radius: 2px;
+      transition: width 0.4s ease;
+    }
+
+    /* Main view area */
+    .view-area {
+      flex: 1;
+      position: relative;
+      height: 100%;
+    }
+
+    #network-container {
+      width: 100%;
+      height: 100%;
+      background-color: var(--bg-base);
+    }
+
+    /* Float controls */
+    .controls {
+      position: absolute;
+      bottom: 24px;
+      right: 24px;
+      display: flex;
+      gap: 12px;
+      z-index: 5;
+    }
+
+    .btn {
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      color: var(--text-main);
+      padding: 10px 16px;
+      border-radius: 8px;
+      cursor: pointer;
+      font-weight: 600;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      transition: all 0.3s ease;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    }
+
+    .btn:hover {
+      border-color: var(--accent);
+      color: #ffffff;
+      box-shadow: 0 4px 16px var(--accent-glow);
+    }
+
+    /* Sidebar Footer Logo */
+    .sidebar-footer {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 16px 24px;
+      background: linear-gradient(180deg, rgba(30, 30, 46, 0) 0%, rgba(30, 30, 46, 0.95) 100%);
+      border-top: 1px solid rgba(49, 50, 68, 0.4);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 11px;
+      color: var(--text-muted);
+      z-index: 12;
+    }
+
+    .sidebar-footer span {
+      font-weight: 600;
+      color: var(--accent);
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Sidebar details panel -->
+  <div class="sidebar">
+    <div class="header">
+      <h1>${projectName}</h1>
+      <p>Project Dependencies Map</p>
+    </div>
+
+    <!-- Token Stats persistent widget -->
+    <div class="stats-panel">
+      <div class="stats-title">Token Savings (RTK)</div>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-value" id="stat-saved-tokens">0</div>
+          <div class="stat-label">Tokens Saved</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value" id="stat-efficiency">0%</div>
+          <div class="stat-label">Efficiency</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tab selectors -->
+    <div class="tabs-header">
+      <button class="tab-btn active" id="tab-graph" onclick="switchTab('graph')">Graph</button>
+      <button class="tab-btn" id="tab-history" onclick="switchTab('history')">History (RTK)</button>
+    </div>
+    
+    <!-- Tab panels wrapper -->
+    <div class="content-panel">
+      
+      <!-- Panel 1: Graph/AST Details -->
+      <div id="panel-graph" class="tab-panel active-panel">
+        <div class="search-box" style="padding: 0 0 16px 0; border-bottom: none;">
+          <input type="text" id="search" class="search-input" placeholder="Search file or symbol...">
+        </div>
+        
+        <div id="empty-state" class="empty-state">
+          <p>Select a file node in the graph to view structural signatures and skeletons.</p>
+        </div>
+
+        <div id="detail-card" class="detail-card">
+          <div id="detail-title" class="detail-title">Parser.ts</div>
+          <div id="detail-path" class="detail-path">src/parser.ts</div>
+
+          <div class="section-title">Imports & Dependencies</div>
+          <div id="detail-deps"></div>
+
+          <div class="section-title">Symbols & Signatures (AST)</div>
+          <ul id="detail-symbols" class="symbol-list"></ul>
+        </div>
+      </div>
+
+      <!-- Panel 2: Persistent History Log -->
+      <div id="panel-history" class="tab-panel">
+        <div id="history-container">
+          <!-- Populated dynamically via JS -->
+        </div>
+      </div>
+
+    </div>
+
+    <!-- Graphical Footer Branding -->
+    <div class="sidebar-footer">
+      <div>Mapped by <span>SmartGraphIndexer</span></div>
+      <div>v1.0.0</div>
+    </div>
+  </div>
+
+  <!-- Graph interactive area -->
+  <div class="view-area">
+    <div id="network-container"></div>
+    <div class="controls">
+      <button class="btn" onclick="fitGraph()">Fit Graph</button>
+      <button class="btn" onclick="togglePhysics()">Pause Physics</button>
+    </div>
+  </div>
+
+  <script type="text/javascript">
+    const rawNodes = ${JSON.stringify(nodes)};
+    const rawEdges = ${JSON.stringify(edges)};
+    const tokenStats = ${JSON.stringify(report.tokenStats || {})};
+
+    // Populate token stats in UI
+    function formatNumber(num) {
+      if (num === undefined || isNaN(num)) return '0';
+      if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+      if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
+      return num.toString();
+    }
+
+    if (tokenStats && tokenStats.totalTokensSaved !== undefined) {
+      document.getElementById('stat-saved-tokens').innerText = formatNumber(tokenStats.totalTokensSaved);
+      document.getElementById('stat-efficiency').innerText = (tokenStats.efficiencyPercentage || 0) + '%';
+    }
+
+    // Switch Tabs
+    function switchTab(tabName) {
+      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+      document.querySelectorAll('.tab-panel').forEach(panel => panel.classList.remove('active-panel'));
+
+      if (tabName === 'graph') {
+        document.getElementById('tab-graph').classList.add('active');
+        document.getElementById('panel-graph').classList.add('active-panel');
+      } else {
+        document.getElementById('tab-history').classList.add('active');
+        document.getElementById('panel-history').classList.add('active-panel');
+        renderHistory();
+      }
+    }
+
+    // Render history grouped by session
+    function renderHistory() {
+      const container = document.getElementById('history-container');
+      container.innerHTML = '';
+
+      if (!tokenStats || !tokenStats.history || tokenStats.history.length === 0) {
+        container.innerHTML = '<div class="empty-state">No stats records found. Start using the MCP to log savings.</div>';
+        return;
+      }
+
+      // Group by sessionId
+      const sessions = {};
+      tokenStats.history.forEach(item => {
+        if (!sessions[item.sessionId]) {
+          sessions[item.sessionId] = [];
+        }
+        sessions[item.sessionId].push(item);
+      });
+
+      // Sort sessions descending by date
+      const sortedSessionIds = Object.keys(sessions).sort((a, b) => new Date(b).getTime() - new Date(a).getTime());
+
+      sortedSessionIds.forEach((sessId, index) => {
+        const items = sessions[sessId];
+        const date = new Date(sessId);
+        const dateStr = date.toLocaleDateString('en-US') + ' ' + date.toLocaleTimeString('en-US', {hour: '2-digit', minute:'2-digit'});
+        
+        let sessionSaved = 0;
+        let sessionUsed = 0;
+        let sessionRaw = 0;
+        let sessionTime = 0;
+        let sessionCalls = items.length;
+
+        items.forEach(it => {
+          sessionSaved += it.saved;
+          sessionUsed += it.actual;
+          sessionRaw += it.alternative;
+          sessionTime += (it.execTimeMs || 0);
+        });
+
+        const sessionEff = sessionRaw > 0 ? Math.round((sessionSaved / sessionRaw) * 100) : 0;
+        const avgTime = sessionCalls > 0 ? Math.round(sessionTime / sessionCalls) : 0;
+
+        const card = document.createElement('div');
+        card.className = 'session-card';
+
+        const header = document.createElement('div');
+        header.className = 'session-header';
+        header.onclick = () => {
+          const body = card.querySelector('.session-body');
+          body.style.display = body.style.display === 'none' ? 'block' : 'none';
+        };
+
+        header.innerHTML = \`
+          <div class="session-meta">
+            <span class="session-date">\${dateStr}</span>
+            <span class="session-summary">\${sessionCalls} optimized requests</span>
+          </div>
+          <div class="session-savings">+\${formatNumber(sessionSaved)}</div>
+        \`;
+
+        const body = document.createElement('div');
+        body.className = 'session-body';
+        body.style.display = index === 0 ? 'block' : 'none';
+
+        // Add RTK Console Output Mock
+        const consoleMock = document.createElement('div');
+        consoleMock.style.cssText = 'background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); padding: 12px; border-radius: 6px; font-family: monospace; font-size: 11.5px; margin-bottom: 12px; color: #a6e3a1; border-left: 3px solid var(--accent); line-height: 1.4;';
+        
+        // Build meter block
+        const filledBlocks = Math.round(sessionEff / 10);
+        const emptyBlocks = 10 - filledBlocks;
+        const meterStr = '='.repeat(filledBlocks) + ' '.repeat(emptyBlocks);
+
+        consoleMock.innerHTML = \`
+          <div style="font-weight: 800; color: var(--accent); margin-bottom: 6px;">RTK Token Savings (Session Scope)</div>
+          <div style="border-bottom: 1px dashed rgba(49, 50, 68, 0.6); margin-bottom: 6px; padding-bottom: 6px;">
+            <div>Total requests:       \${sessionCalls}</div>
+            <div>Input tokens (Used):   \${sessionUsed}</div>
+            <div>Raw cost (No MCP):   \${sessionRaw}</div>
+            <div>Tokens saved:        \${sessionSaved} (\${sessionEff}.0%)</div>
+            <div>Total exec time:     \${sessionTime}ms (avg \${avgTime}ms)</div>
+          </div>
+          <div style="display: flex; align-items: center; gap: 8px;">
+            <div>Efficiency meter:</div>
+            <div style="color: #a6e3a1; font-weight: bold;">[\${meterStr}] \${sessionEff}%</div>
+          </div>
+        \`;
+        body.appendChild(consoleMock);
+
+        // Add Divider Header
+        const requestsHeader = document.createElement('div');
+        requestsHeader.className = 'section-title';
+        requestsHeader.style.cssText = 'margin-top: 12px; margin-bottom: 8px; font-size: 11px;';
+        requestsHeader.innerText = 'By Request';
+        body.appendChild(requestsHeader);
+
+        items.forEach(it => {
+          const itDate = new Date(it.timestamp);
+          const timeStr = itDate.toLocaleTimeString('en-US', {hour: '2-digit', minute:'2-digit', second:'2-digit'});
+          const eff = it.alternative > 0 ? Math.round((it.saved / it.alternative) * 100) : 0;
+          
+          const itemDiv = document.createElement('div');
+          itemDiv.className = 'history-item';
+          
+          let targetHtml = it.target ? \`<div class="history-target">\${it.target}</div>\` : '';
+          
+          itemDiv.innerHTML = \`
+            <div class="history-row-top">
+              <span class="history-tool-badge">\${it.toolName}</span>
+              <span class="history-time">\${timeStr}</span>
+            </div>
+            \${targetHtml}
+            <div class="history-metrics">
+              <span>Used: <strong>\${it.actual}</strong> | Raw: <strong>\${it.alternative}</strong> | Time: <strong>\${it.execTimeMs || 0}ms</strong></span>
+              <span class="history-saved">Saved: <strong>+\&nbsp;\${formatNumber(it.saved)}</strong> (\${eff}%)</span>
+            </div>
+            <div class="progress-bar-container">
+              <div class="progress-bar-fill" style="width: \${eff}%"></div>
+            </div>
+          \`;
+          body.appendChild(itemDiv);
+        });
+
+        card.appendChild(header);
+        card.appendChild(body);
+        container.appendChild(card);
+      });
+    }
+
+    const containerNet = document.getElementById('network-container');
+    const nodesDataSet = new vis.DataSet(rawNodes);
+    const edgesDataSet = new vis.DataSet(rawEdges);
+
+    const data = {
+      nodes: nodesDataSet,
+      edges: edgesDataSet
+    };
+
+    const options = {
+      nodes: {
+        scaling: {
+          min: 10,
+          max: 30
+        }
+      },
+      edges: {
+        smooth: {
+          type: 'continuous',
+          roundness: 0.5
+        }
+      },
+      physics: {
+        stabilization: true,
+        barnesHut: {
+          gravitationalConstant: -3000,
+          centralGravity: 0.3,
+          springLength: 95,
+          springConstant: 0.04
+        }
+      },
+      interaction: {
+        hover: true,
+        tooltipDelay: 100
+      }
+    };
+
+    const network = new vis.Network(containerNet, data, options);
+
+    // Event listener for click
+    network.on("click", function (params) {
+      if (params.nodes.length > 0) {
+        const nodeId = params.nodes[0];
+        const node = nodesDataSet.get(nodeId);
+        showDetails(node);
+      } else {
+        hideDetails();
+      }
+    });
+
+    function showDetails(node) {
+      document.getElementById('empty-state').style.display = 'none';
+      const card = document.getElementById('detail-card');
+      card.style.display = 'block';
+
+      document.getElementById('detail-title').innerText = node.label;
+      document.getElementById('detail-path').innerText = node.filePath;
+
+      // Render deps
+      const depsContainer = document.getElementById('detail-deps');
+      depsContainer.innerHTML = '';
+      if (node.dependencies.length === 0) {
+        depsContainer.innerHTML = '<span style="color: var(--text-muted); font-size:13px;">No external dependencies</span>';
+      } else {
+        node.dependencies.forEach(dep => {
+          const span = document.createElement('span');
+          span.className = 'dep-badge';
+          span.innerText = dep;
+          depsContainer.appendChild(span);
+        });
+      }
+
+      // Render symbols
+      const symbolsContainer = document.getElementById('detail-symbols');
+      symbolsContainer.innerHTML = '';
+      if (node.symbols.length === 0) {
+        symbolsContainer.innerHTML = '<li style="color: var(--text-muted); font-size:13px;">No public symbols extracted</li>';
+      } else {
+        node.symbols.forEach(sym => {
+          const li = document.createElement('li');
+          li.className = 'symbol-item';
+          
+          let docHtml = sym.docstring ? \`<div class="symbol-doc">\${sym.docstring}</div>\` : '';
+          
+          li.innerHTML = \`
+            <div class="symbol-header">
+              <span class="symbol-name">\${sym.name}</span>
+              <span class="symbol-kind">\${sym.kind}</span>
+            </div>
+            <div class="symbol-sig">\${sym.signature}</div>
+            \${docHtml}
+          \`;
+          symbolsContainer.appendChild(li);
+        });
+      }
+    }
+
+    function hideDetails() {
+      document.getElementById('empty-state').style.display = 'block';
+      document.getElementById('detail-card').style.display = 'none';
+    }
+
+    // Search bar filtering
+    document.getElementById('search').addEventListener('input', function(e) {
+      const val = e.target.value.toLowerCase();
+      if (!val) {
+        nodesDataSet.forEach(node => {
+          nodesDataSet.update({ id: node.id, hidden: false });
+        });
+        return;
+      }
+
+      nodesDataSet.forEach(node => {
+        const fileMatch = node.filePath.toLowerCase().includes(val);
+        const symbolMatch = node.symbols.some(s => s.name.toLowerCase().includes(val));
+        
+        nodesDataSet.update({
+          id: node.id,
+          hidden: !(fileMatch || symbolMatch)
+        });
+      });
+    });
+
+    function fitGraph() {
+      network.fit({ animation: true });
+    }
+
+    let physicsEnabled = true;
+    function togglePhysics() {
+      physicsEnabled = !physicsEnabled;
+      network.setOptions({ physics: physicsEnabled });
+      event.target.innerText = physicsEnabled ? 'Pause Physics' : 'Resume Physics';
+    }
+  </script>
+</body>
+</html>
+  `;
+}