trimprompt 1.0.29 → 1.0.31

package/index.html

@@ -41,6 +41,7 @@
       flex-direction: column;
       position: relative;
       overflow-x: hidden;
+      zoom: 80%;
     }
 
     /* Ambient radial glow background */
@@ -235,14 +236,16 @@
       font-family: 'Outfit', sans-serif;
       font-weight: 700;
       color: var(--text-muted);
-      padding: 1rem;
+      padding: 1.1rem 1.2rem;
       border-bottom: 1px solid var(--border);
+      vertical-align: middle;
     }
 
     td {
-      padding: 1rem;
+      padding: 1.1rem 1.2rem;
       border-bottom: 1px solid var(--border);
       color: var(--text);
+      vertical-align: middle;
     }
 
     tr:last-child td {
@@ -678,7 +681,13 @@
         </h2>
       </div>
       <div id="csa-body" style="display:none;">
-        <div id="csa-list"></div>
+        <div id="csa-list">
+          <div style="padding:40px 20px;text-align:center;color:#818CF8;font-size:13px;display:flex;align-items:center;justify-content:center;gap:12px;">
+            <style>@keyframes csaSpin { to { transform: rotate(360deg); } }</style>
+            <span style="width:18px;height:18px;border:2px solid #818CF8;border-top-color:transparent;border-radius:50%;display:inline-block;animation:csaSpin 0.8s linear infinite;"></span>
+            <span style="font-weight:500;">Loading Live Session Context Controls...</span>
+          </div>
+        </div>
         <div class="csa-summary" id="csa-summary"></div>
       </div>
     </div>
@@ -740,6 +749,7 @@
   <script>
     let savingsChart = null;
     let currentFilter = 'ai';
+    const expandedGroupKeys = new Set();
 
     const FEATURE_META = {
       filter:     { label: 'Filter',     color: '#6366F1', bg: 'rgba(99,102,241,0.12)' },
@@ -776,11 +786,17 @@
       { category: 'S — Security', features: [
         { key: 'redact',          title: 'Secret redaction (20 patterns)',             desc: 'AWS keys, API tokens, JWTs, DB strings auto-blocked',                                  badges: ['Claude','Cursor','Copilot','Gemini','Antigravity'], statKey: 'secrets', statSub: 'secrets blocked', status: 'active' },
       ]},
-      // --- P — Proxy section hidden for now (interceptor not functional yet). Re-enable by uncommenting. ---
-      // { category: 'P — Proxy (Universal AI API Compression)', features: [
-      //   { key: 'conv_compress',   title: 'Conversation history compression',          desc: 'Score old messages by importance, drop low-value ones. Via trim proxy',          badges: ['Claude Code CLI','Codex CLI','Aider','Copilot CLI','SDK / curl'], statSub: 'on conversation',      status: 'active' },
-      //   { key: 'resp_optimize',   title: 'Response length optimization',              desc: 'Set optimal max_tokens per request based on task complexity. Via trim proxy',     badges: ['Claude Code CLI','Codex CLI','Aider','Copilot CLI','SDK / curl'], statSub: 'on output',            status: 'active' },
-      // ], hasProxyToggle: true },
+      { category: 'V — CONVERSATION COMPRESSION (LIVE CONTEXT)', features: [
+        { key: 'conv_claude',      title: 'Claude Code Live Compression',        desc: 'Compresses active sessions in ~/.claude/projects/ via side-cache',    badges: ['Claude Code'], agentKey: 'claude',      statSub: 'on conversation', status: 'active' },
+        { key: 'conv_gemini',      title: 'Google Gemini Code Assistant',        desc: 'Compresses Gemini CLI & extension session logs in ~/.config/gemini/', badges: ['Gemini'],      agentKey: 'gemini',      statSub: 'on gemini logs',  status: 'active' },
+        { key: 'conv_codex',       title: 'Codex Shared Memory Compression',    desc: 'Compresses shared memory session logs with Claude',                   badges: ['Codex'],       agentKey: 'codex',       statSub: 'on shared memory', status: 'active' },
+        { key: 'conv_cursor',      title: 'Cursor Workspace State Compression', desc: 'Compresses workspaceStorage JSON/vscdb files in real-time',       badges: ['Cursor'],      agentKey: 'cursor',      statSub: 'on workspace state', status: 'active' },
+        { key: 'conv_aider',       title: 'Aider Chat History Optimizer',        desc: 'Compresses .aider.chat.history.md files automatically on launch',   badges: ['Aider'],       agentKey: 'aider',       statSub: 'on markdown logs', status: 'active' },
+        { key: 'conv_copilot',     title: 'Copilot CLI Session Trimmer',         desc: 'Compresses github-copilot-cli session state logs',                 badges: ['Copilot CLI'], agentKey: 'copilot',     statSub: 'on CLI sessions', status: 'active' },
+        { key: 'conv_openclaw',    title: 'OpenClaw ContextEngine Plugin',       desc: 'Runs as an internal ContextEngine plugin for OpenClaw pipeline',   badges: ['OpenClaw'],    agentKey: 'openclaw',    statSub: 'on plugin context', status: 'active' },
+        { key: 'conv_opencode',    title: 'OpenCode Config & Proxy Optimizer',   desc: 'Injects proxy config and compresses .opencode/sessions payloads',  badges: ['OpenCode'],    agentKey: 'opencode',    statSub: 'on open sessions', status: 'active' },
+        { key: 'conv_cortex',      title: 'Cortex Code SDK Library Mode',        desc: 'SDK wrapper library mode providing 60-65% token savings',          badges: ['Cortex Code'], agentKey: 'cortex',      statSub: 'on SDK memory', status: 'active' },
+      ]},
     ];
 
     let proxyRunning = false;
@@ -874,30 +890,52 @@
       try { await fetch('/api/config/features', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(csaToggles) }); } catch {}
     }
 
-    function renderCsaSection(logs) {
-      const pricePerM = PRICING_TABLE[document.getElementById('model-select').value] || 3.00;
-      const totalRaw = logs.reduce((s, l) => s + l.estimated_raw_tokens, 0);
-      const totalComp = logs.reduce((s, l) => s + l.estimated_compressed_tokens, 0);
-      const totalSaved = logs.reduce((s, l) => s + l.tokens_saved, 0);
-      const totalSecrets = logs.reduce((s, l) => s + (l.secrets_found || 0), 0);
-      const savedUsd = (totalSaved * pricePerM) / 1000000;
-      const reductionPct = totalRaw > 0 ? ((totalSaved / totalRaw) * 100).toFixed(1) : '0.0';
-
-      const featureCounts = {};
-      const featureSavings = {};
-      logs.forEach(l => {
-        (l.features || []).forEach(f => {
-          featureCounts[f] = (featureCounts[f] || 0) + 1;
-          featureSavings[f] = (featureSavings[f] || 0) + l.tokens_saved;
+    async function renderCsaSection(logs) {
+      try {
+        const modelSelect = document.getElementById('model-select');
+        const modelVal = modelSelect ? modelSelect.value : 'claude-opus-4-8';
+        const pricePerM = PRICING_TABLE[modelVal] || 3.00;
+        const totalRaw = logs.reduce((s, l) => s + (l.estimated_raw_tokens || 0), 0);
+        const totalComp = logs.reduce((s, l) => s + (l.estimated_compressed_tokens || 0), 0);
+        const totalSaved = logs.reduce((s, l) => s + (l.tokens_saved || 0), 0);
+        const totalSecrets = logs.reduce((s, l) => s + (l.secrets_found || 0), 0);
+        const savedUsd = (totalSaved * pricePerM) / 1000000;
+        const reductionPct = totalRaw > 0 ? ((totalSaved / totalRaw) * 100).toFixed(1) : '0.0';
+
+        const featureCounts = {};
+        const featureSavings = {};
+        logs.forEach(l => {
+          (l.features || []).forEach(f => {
+            featureCounts[f] = (featureCounts[f] || 0) + 1;
+            featureSavings[f] = (featureSavings[f] || 0) + (l.tokens_saved || 0);
+          });
+          if (l.command) {
+            const matched = CSA_FEATURES.flatMap(c => c.features).find(feat => feat.agentKey && (l.command.includes(`conv:${feat.agentKey}`) || l.command.includes(feat.agentKey)));
+            if (matched) {
+              featureCounts[matched.key] = (featureCounts[matched.key] || 0) + 1;
+              featureSavings[matched.key] = (featureSavings[matched.key] || 0) + (l.tokens_saved || 0);
+            }
+          }
         });
-      });
 
-      const list = document.getElementById('csa-list');
-      let html = '';
+        const list = document.getElementById('csa-list');
+        if (!list) return;
+        let html = '';
+
+        let globalConfigData = {};
+        try {
+          const cfgResp = await fetch('/api/config');
+          globalConfigData = await cfgResp.json();
+        } catch(e){}
 
       CSA_FEATURES.forEach(cat => {
         html += `<div class="csa-category">${cat.category}</div>`;
-        cat.features.forEach(f => {
+        const sortedFeatures = [...cat.features].sort((a, b) => {
+          const savA = featureSavings[a.key] || 0;
+          const savB = featureSavings[b.key] || 0;
+          return savB - savA;
+        });
+        sortedFeatures.forEach(f => {
           const isSoon = f.status === 'soon';
           const isOff = f.status === 'off';
           const defaultOn = f.status === 'active';
@@ -905,6 +943,7 @@
           const count = featureCounts[f.key] || 0;
           const statusLabels = { active: 'Active', off: 'Off by default', soon: 'Coming soon' };
           let statVal, statColor;
+          let statSubText = f.statSub;
           if (f.statKey === 'secrets') {
             statVal = totalSecrets.toLocaleString();
             statColor = '#EF4444';
@@ -916,21 +955,69 @@
             const featureSaved = (featureSavedTokens * pricePerM) / 1000000;
             statVal = '$' + featureSaved.toFixed(2);
             statColor = '#10B981';
+            if (featureSavedTokens > 0) {
+              statSubText = `<span style="color:#10B981;font-weight:600;">⚡ ${featureSavedTokens.toLocaleString()} tokens saved</span>`;
+            }
           }
           const rowClass = isSoon ? 'csa-row is-soon' : isOff ? 'csa-row is-off' : 'csa-row';
+
+          let liveBadge = `<span class="csa-status ${f.status}">${statusLabels[f.status]}</span>`;
+          let latestFileHtml = '';
+          let claudeCompactHtml = '';
+          if (f.agentKey) {
+            const sess = globalConfigData.latestSessions && globalConfigData.latestSessions[f.agentKey];
+            let isToday = false;
+            if (sess && sess.lastModified) {
+              const fileDate = new Date(sess.lastModified).toDateString();
+              const todayDate = new Date().toDateString();
+              if (fileDate === todayDate) isToday = true;
+            }
+
+            if (isToday) {
+              liveBadge = `<span style="background:rgba(16,185,129,0.25);color:#10B981;border:1px solid #10B981;padding:2px 10px;border-radius:12px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;gap:5px;margin-left:8px;box-shadow:0 0 10px rgba(16,185,129,0.2);"><span style="width:7px;height:7px;border-radius:50%;background:#10B981;box-shadow:0 0 6px #10B981;"></span>● LIVE SESSION TODAY</span>`;
+            } else {
+              liveBadge = `<span style="background:rgba(148,163,184,0.1);color:#94A3B8;border:1px solid rgba(148,163,184,0.2);padding:2px 8px;border-radius:12px;font-size:10px;font-weight:500;display:inline-flex;align-items:center;gap:4px;margin-left:8px;"><span style="width:6px;height:6px;border-radius:50%;background:#64748B;"></span>Idle</span>`;
+            }
+
+            if (f.agentKey) {
+              const agentConvLogs = logs.filter(l => l.command && l.command.includes(`conv:${f.agentKey}`));
+              const lastLog = agentConvLogs.length > 0 ? agentConvLogs[agentConvLogs.length - 1] : null;
+              const savedTokens = (sess && sess.activeSavedTokens > 0) ? sess.activeSavedTokens : (lastLog ? (lastLog.tokens_saved || lastLog.estimated_raw_tokens || 0) : 0);
+              if (savedTokens > 0 || (lastLog && lastLog.timestamp)) {
+                const timeStr = lastLog && lastLog.timestamp ? new Date(lastLog.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : (sess && sess.lastModified ? new Date(sess.lastModified).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : 'Today');
+                claudeCompactHtml = `<div style="font-size:11px;color:#F59E0B;margin-top:4px;font-family:sans-serif;display:inline-flex;align-items:center;gap:6px;font-weight:600;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);padding:2px 8px;border-radius:6px;"><span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:#F59E0B;box-shadow:0 0 6px #F59E0B;"></span>🟡 Last Compacted: ${timeStr} (${savedTokens.toLocaleString()} tokens)</div>`;
+              } else {
+                claudeCompactHtml = `<div style="font-size:11px;color:#F59E0B;margin-top:4px;font-family:sans-serif;display:inline-flex;align-items:center;gap:6px;font-weight:600;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.3);padding:2px 8px;border-radius:6px;"><span style="display:inline-block;width:6px;height:6px;border-radius:50%;background:#F59E0B;box-shadow:0 0 6px #F59E0B;"></span>🟡 Last Compacted: Active Monitoring</div>`;
+              }
+            }
+
+            if (sess && sess.fileName) {
+              latestFileHtml = `<div style="font-size:11px;color:#10B981;margin-top:3px;font-family:monospace;display:flex;align-items:center;gap:4px;"><span>📄 Latest Session:</span> <strong style="color:#F1F5F9;">${sess.fileName}</strong></div>`;
+            } else {
+              latestFileHtml = `<div style="font-size:11px;color:#64748B;margin-top:3px;font-family:monospace;"><span>📄 Waiting for active session file...</span></div>`;
+            }
+          }
+
           html += `<div class="${rowClass}">
             <label class="csa-toggle">
               <input type="checkbox" ${checked ? 'checked' : ''} ${isSoon ? 'disabled' : ''} onchange="saveCsaToggle('${f.key}', this.checked)">
               <span class="slider"></span>
             </label>
             <div class="csa-info">
-              <h4>${f.title}<span class="csa-status ${f.status}">${statusLabels[f.status]}</span></h4>
+              <h4>${f.title} ${liveBadge}</h4>
               <p>${f.desc}</p>
-              <div class="csa-badges">${f.badges.map(b => `<span class="csa-badge">${b}</span>`).join('')}</div>
+              ${latestFileHtml}
+              ${claudeCompactHtml}
+              <div class="csa-badges" style="margin-top:6px;">
+                ${f.badges.map(b => `<span class="csa-badge">${b}</span>`).join('')}
+                ${f.agentKey ? `<button type="button" style="background:rgba(245,158,11,0.15);border:1px solid rgba(245,158,11,0.4);color:#F59E0B;font-size:10px;padding:2px 8px;border-radius:4px;cursor:pointer;margin-left:6px;font-weight:600;" onclick="event.preventDefault(); runManualCompact('${f.agentKey}', this)">⚡ Compact Now</button>` : ''}
+                ${f.agentKey ? `<button style="background:rgba(16,185,129,0.12);border:1px solid rgba(16,185,129,0.3);color:#10B981;font-size:10px;padding:2px 8px;border-radius:4px;cursor:pointer;margin-left:4px;font-weight:600;" onclick="openAgentFolder('${f.agentKey}')">📁 Open Directory</button>` : ''}
+                ${f.agentKey ? `<button style="background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:#94A3B8;font-size:10px;padding:2px 8px;border-radius:4px;cursor:pointer;margin-left:4px;" onclick="openLocateModal('${f.agentKey}', '${f.title}')">⚙️ Change Path</button>` : ''}
+              </div>
             </div>
             <div class="csa-stat">
               <div class="csa-val" style="color:${statColor};">${statVal}</div>
-              <div class="csa-sub">${f.statSub}</div>
+              <div class="csa-sub">${statSubText}</div>
             </div>
           </div>`;
         });
@@ -962,14 +1049,87 @@
           <div class="csa-sum-label">Secrets Blocked</div>
           <div class="csa-sum-val" style="color:var(--red);">${totalSecrets.toLocaleString()}</div>
         </div>`;
+      } catch(err) {
+        console.error('Error rendering CSA section:', err);
+      }
+    }
+
+    async function openLocateModal(agentKey, title) {
+      let currentPath = 'Default system path';
+      try {
+        const resp = await fetch('/api/config');
+        const cfg = await resp.json();
+        if (cfg.resolvedPaths && cfg.resolvedPaths[agentKey]) {
+          currentPath = cfg.resolvedPaths[agentKey].join(' ; ');
+        }
+        if (cfg.custom_storage_paths && cfg.custom_storage_paths[agentKey]) {
+          currentPath = cfg.custom_storage_paths[agentKey];
+        }
+      } catch(e){}
+
+      const customPath = prompt(`⚙️ Configure Session Storage Directory for ${title}:\n\nCurrently Monitored Path:\n${currentPath}\n\nEnter custom directory path (or leave empty to reset to default):`, currentPath.includes(' ; ') ? '' : currentPath);
+      if (customPath !== null) {
+        try {
+          await fetch('/api/config/custom-path', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ agentKey, path: customPath.trim() || null })
+          });
+          alert(`Storage path updated for ${title}!\nMonitored directory is now active and saved permanently.`);
+          renderCsa();
+        } catch (e) {
+          alert('Failed to save path.');
+        }
+      }
+    }
+
+    async function openAgentFolder(agentKey) {
+      try {
+        const resp = await fetch('/api/config/open-dir', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ agentKey })
+        });
+        const res = await resp.json();
+        if (!res.success) {
+          alert('Could not open directory.');
+        }
+      } catch (e) {
+        alert('Error opening directory.');
+      }
+    }
+
+    async function runManualCompact(agentKey, btn) {
+      const origText = btn.innerText;
+      btn.innerText = '⏳ Compacting...';
+      btn.disabled = true;
+      try {
+        const resp = await fetch('/api/agent/compact', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ agentKey })
+        });
+        const res = await resp.json();
+        if (res.ok) {
+          btn.innerText = '✅ Compacted!';
+          setTimeout(() => { btn.innerText = origText; btn.disabled = false; }, 2000);
+          loadStats();
+        } else {
+          alert(res.message || 'Compaction finished');
+          btn.innerText = origText;
+          btn.disabled = false;
+        }
+      } catch(e) {
+        btn.innerText = origText;
+        btn.disabled = false;
+      }
     }
 
     function isAiCommand(log) {
-      // New logs have ai_detected field explicitly
-      if (log.ai_detected === true) return true;
-      if (log.ai_detected === false) return false;
-      // Old logs (before detection feature): assume AI — they went through TrimPrompt shims
-      return true;
+      if (!log) return false;
+      const cmd = log.command || '';
+      const feats = log.features || [];
+      return cmd.startsWith('conv:') || feats.includes('live-conv') || feats.some(f => typeof f === 'string' && f.startsWith('conv_'));
     }
 
     function setFilter(mode) {
@@ -1122,39 +1282,21 @@
 
     async function loadStats() {
       const select = document.getElementById('model-select');
-      const model = select.value;
+      const model = select ? select.value : 'auto';
 
       try {
-        // Fetch full history and compute AI-only stats client-side
-        const histResp = await fetch('/api/stats/history');
-        const allLogs = await histResp.json();
-        const aiLogs = allLogs.filter(l => isAiCommand(l));
-
         const summaryResp = await fetch(`/api/stats/summary?model=${model}`);
+        if (!summaryResp.ok) return;
         const data = await summaryResp.json();
 
-        // Summary counts ALL commands (all went through TrimPrompt and saved tokens)
-        const pricePerM = PRICING_TABLE[data.model_key] || PRICING_TABLE[model] || 3.00;
-        let totalRaw = 0, totalComp = 0, totalSaved = 0;
-        allLogs.forEach(l => {
-          totalRaw += l.estimated_raw_tokens;
-          totalComp += l.estimated_compressed_tokens;
-          totalSaved += l.tokens_saved;
-        });
-        const pct = totalRaw > 0 ? ((totalSaved / totalRaw) * 100).toFixed(1) : '0.0';
-        const rawCostUsd = (totalRaw * pricePerM) / 1000000;
-        const compCostUsd = (totalComp * pricePerM) / 1000000;
-        const savedUsd = (totalSaved * pricePerM) / 1000000;
-
-        document.getElementById('val-savings').innerText = `$${savedUsd.toFixed(4)}`;
-        document.getElementById('val-savings-desc').innerText = `based on ${data.model_name} pricing`;
-        document.getElementById('val-orig-cost').innerText = `$${rawCostUsd.toFixed(4)}`;
-        document.getElementById('val-comp-cost').innerText = `$${compCostUsd.toFixed(4)}`;
-        document.getElementById('val-reduction').innerText = `${pct}%`;
-        document.getElementById('val-tokens-desc').innerText = `raw: ${totalRaw.toLocaleString()} → compressed: ${totalComp.toLocaleString()}`;
-
-        // Return for chart model resolution
-        data.model_key = data.model_key || model;
+        if (data && data.raw_cost_usd !== undefined) {
+          document.getElementById('val-savings').innerText = `$${data.money_saved_usd.toFixed(4)}`;
+          document.getElementById('val-savings-desc').innerText = `based on ${data.model_name} pricing`;
+          document.getElementById('val-orig-cost').innerText = `$${data.raw_cost_usd.toFixed(4)}`;
+          document.getElementById('val-comp-cost').innerText = `$${data.compressed_cost_usd.toFixed(4)}`;
+          document.getElementById('val-reduction').innerText = `${data.savings_percentage}%`;
+          document.getElementById('val-tokens-desc').innerText = `raw: ${data.total_raw_tokens.toLocaleString()} → compressed: ${data.total_compressed_tokens.toLocaleString()}`;
+        }
         return data;
       } catch (err) {
         console.error('Failed to fetch summary stats', err);
@@ -1163,27 +1305,25 @@
 
     async function loadHistory() {
       const select = document.getElementById('model-select');
-      const model = select.value;
+      const model = select ? select.value : 'auto';
+
+      loadStats();
 
       try {
         const response = await fetch('/api/stats/history');
+        if (!response.ok) return;
         const logs = await response.json();
+        if (!Array.isArray(logs)) return;
         
-        let resolvedModel = model;
-        if (model === 'auto') {
-          const stats = await loadStats();
-          if (stats && stats.model_key) {
-            resolvedModel = stats.model_key;
-          }
-        }
+        const resolvedModel = model === 'auto' ? 'claude-opus-4-8' : model;
 
-        // Filter logs: AI-only for chart and summary, all for table if toggled
+        // Filter logs: AI-only for chart
         const aiLogs = logs.filter(l => isAiCommand(l));
 
-        // Chart + summary always use AI-only logs
+        // Chart always uses AI-only logs
         renderChart(aiLogs, resolvedModel);
 
-        // CSA Feature Controls
+        // CSA Feature Controls (Run asynchronously in background)
         renderCsaSection(logs);
 
         // Security banner — aggregate across all logs
@@ -1222,53 +1362,118 @@
           return;
         }
 
-        const INITIAL_LIMIT = 100;
-        const reversed = displayLogs.reverse();
+        // Group logs by command name
+        const groups = {};
+        displayLogs.forEach(l => {
+          const key = l.command || 'unknown';
+          if (!groups[key]) groups[key] = [];
+          groups[key].push(l);
+        });
+
+        // Sort groups by most recent log timestamp descending
+        const sortedGroupKeys = Object.keys(groups).sort((a, b) => {
+          const lastA = new Date(groups[a][groups[a].length - 1].timestamp).getTime();
+          const lastB = new Date(groups[b][groups[b].length - 1].timestamp).getTime();
+          return lastB - lastA;
+        });
+
         tbody.innerHTML = '';
 
-        function renderRow(log) {
-          const tr = document.createElement('tr');
-          const time = new Date(log.timestamp).toLocaleTimeString();
-          const savingsPct = log.raw_chars > 0
-            ? ((log.estimated_raw_tokens - log.estimated_compressed_tokens) / log.estimated_raw_tokens * 100).toFixed(1)
-            : '0.0';
-          tr.innerHTML = `
-            <td>${time}</td>
-            <td style="font-weight: 500;">${log.command}${log.secrets_found ? ' <span style="color:#F09595;font-size:11px;" title="' + log.secrets_found + ' secrets redacted">&#x1f6e1;' + log.secrets_found + '</span>' : ''}</td>
-            <td>${featureTagHtml(log.features)}</td>
-            <td>${log.estimated_raw_tokens.toLocaleString()}</td>
-            <td>${log.estimated_compressed_tokens.toLocaleString()}</td>
-            <td style="color: var(--emerald); font-weight: 600;">${savingsPct}%</td>
-            <td>
-              <span class="status-badge ${log.exit_code === 0 ? 'success' : 'fail'}">
-                ${log.exit_code}
-              </span>
-            </td>
-            <td>
-              <button class="btn-inspect" data-id="${log.id}" data-cmd="${log.command}" data-sec="${log.secrets_found || 0}" data-types="${(log.secret_types || []).join(',')}" onclick="inspectFromBtn(this)">Inspect</button>
-            </td>
+        sortedGroupKeys.forEach((cmdKey, gIdx) => {
+          const groupLogs = groups[cmdKey].reverse(); // Most recent first
+          const latestLog = groupLogs[0];
+          const latestTime = new Date(latestLog.timestamp).toLocaleTimeString();
+
+          let grpRaw = 0, grpComp = 0, grpSaved = 0, grpSecrets = 0;
+          const isLiveConvGroup = cmdKey.startsWith('conv:') || (latestLog.features && latestLog.features.includes('live-conv'));
+          if (isLiveConvGroup) {
+            grpRaw = latestLog.estimated_raw_tokens || 0;
+            grpComp = latestLog.estimated_compressed_tokens || 0;
+            grpSaved = grpRaw - grpComp;
+            groupLogs.forEach(l => { grpSecrets += (l.secrets_found || 0); });
+          } else {
+            groupLogs.forEach(l => {
+              grpRaw += (l.estimated_raw_tokens || 0);
+              grpComp += (l.estimated_compressed_tokens || 0);
+              grpSaved += (l.tokens_saved || 0);
+              grpSecrets += (l.secrets_found || 0);
+            });
+          }
+          const grpSavingsPct = grpRaw > 0 ? ((grpSaved / grpRaw) * 100).toFixed(1) : '0.0';
+          const groupId = `grp-${gIdx}`;
+          const isGroupExpanded = expandedGroupKeys.has(cmdKey);
+
+          const trHead = document.createElement('tr');
+          trHead.style.background = 'rgba(255,255,255,0.03)';
+          trHead.style.cursor = 'pointer';
+          trHead.style.borderBottom = '1px solid rgba(255,255,255,0.06)';
+          trHead.onclick = () => {
+            const el = document.querySelectorAll(`.${groupId}`);
+            const chev = document.getElementById(`chev-${groupId}`);
+            const isHidden = el[0] && el[0].style.display === 'none';
+            if (isHidden) {
+              expandedGroupKeys.add(cmdKey);
+            } else {
+              expandedGroupKeys.delete(cmdKey);
+            }
+            el.forEach(row => row.style.display = isHidden ? '' : 'none');
+            if (chev) chev.style.transform = isHidden ? 'rotate(90deg)' : 'rotate(0deg)';
+          };
+
+          const displayCmd = formatCommandName(latestLog.command);
+
+          trHead.innerHTML = `
+            <td style="font-size:12px;color:#94A3B8;white-space:nowrap;"><span id="chev-${groupId}" style="display:inline-block;transition:transform 0.2s;margin-right:6px;font-size:10px;transform:${isGroupExpanded ? 'rotate(90deg)' : 'rotate(0deg)'}">▶</span>${latestTime}</td>
+            <td style="font-weight: 600;color:#F1F5F9;text-transform:capitalize;">${displayCmd} <span style="font-size:11px;color:#818CF8;font-weight:400;margin-left:6px;">(${groupLogs.length} runs)</span>${grpSecrets ? ' <span style="color:#F09595;font-size:11px;" title="' + grpSecrets + ' secrets redacted">&#x1f6e1;' + grpSecrets + '</span>' : ''}</td>
+            <td>${featureTagHtml(latestLog.features)}</td>
+            <td style="font-weight:500;">${grpRaw.toLocaleString()}</td>
+            <td style="font-weight:500;">${grpComp.toLocaleString()}</td>
+            <td style="color: var(--emerald); font-weight: 700;">${grpSavingsPct}%</td>
+            <td><span class="status-badge success">Active</span></td>
+            <td><button class="btn-inspect" style="background:rgba(129,140,248,0.15);color:#818CF8;border:1px solid rgba(129,140,248,0.3);" onclick="event.stopPropagation(); this.closest('tr').click();">Details (${groupLogs.length})</button></td>
           `;
-          return tr;
-        }
-
-        reversed.slice(0, INITIAL_LIMIT).forEach(log => tbody.appendChild(renderRow(log)));
-
-        if (reversed.length > INITIAL_LIMIT) {
-          const moreTr = document.createElement('tr');
-          moreTr.id = 'show-more-row';
-          moreTr.innerHTML = `<td colspan="8" style="text-align:center;padding:12px;">
-            <button onclick="document.getElementById('show-more-row').remove();document.querySelectorAll('.hidden-log-row').forEach(r=>r.style.display='')" style="background:rgba(127,119,221,0.15);color:#7F77DD;border:none;padding:8px 24px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;">
-              Show ${reversed.length - INITIAL_LIMIT} more entries
-            </button>
-          </td>`;
-          tbody.appendChild(moreTr);
-          reversed.slice(INITIAL_LIMIT).forEach(log => {
-            const tr = renderRow(log);
-            tr.className = 'hidden-log-row';
-            tr.style.display = 'none';
+          tbody.appendChild(trHead);
+
+          // Append child rows
+          groupLogs.forEach(log => {
+            const tr = document.createElement('tr');
+            tr.className = groupId;
+            tr.style.display = isGroupExpanded ? '' : 'none';
+            tr.style.background = 'rgba(0,0,0,0.2)';
+            const time = new Date(log.timestamp).toLocaleTimeString();
+            const savingsPct = log.raw_chars > 0
+              ? ((log.estimated_raw_tokens - log.estimated_compressed_tokens) / log.estimated_raw_tokens * 100).toFixed(1)
+              : '0.0';
+            const isConvLog = log.command && log.command.includes('conv:');
+            let convBadgeHtml = '';
+            if (log.features && log.features.includes('trim_offload')) {
+              convBadgeHtml = `<div style="font-size:10px;color:#10B981;margin-top:4px;padding:2px 8px;border-radius:4px;background:rgba(16,185,129,0.1);display:inline-block;font-weight:600;">⚡ TrimPrompt Side-Cache Offloaded ${log.estimated_raw_tokens.toLocaleString()} Tokens</div>`;
+            } else if (log.features && log.features.includes('official_compact')) {
+              convBadgeHtml = `<div style="font-size:10px;color:#818CF8;margin-top:4px;padding:2px 8px;border-radius:4px;background:rgba(129,140,248,0.1);display:inline-block;font-weight:600;">📦 Official Agent Compact Saved ${log.estimated_raw_tokens.toLocaleString()} Tokens</div>`;
+            } else if (isConvLog) {
+              convBadgeHtml = `<div style="font-size:10px;color:#F59E0B;margin-top:4px;padding:2px 8px;border-radius:4px;background:rgba(245,158,11,0.1);display:inline-block;font-weight:500;">🔄 Active Session Context Monitored</div>`;
+            }
+            const childCmd = formatCommandName(log.command);
+
+            tr.innerHTML = `
+              <td style="padding-left:24px;font-size:11px;color:#64748B;white-space:nowrap;">↳ ${time}</td>
+              <td style="font-size:12px;color:#CBD5E1;text-transform:capitalize;">${childCmd}${convBadgeHtml}</td>
+              <td>${featureTagHtml(log.features)}</td>
+              <td style="font-size:12px;">${log.estimated_raw_tokens.toLocaleString()}</td>
+              <td style="font-size:12px;">${log.estimated_compressed_tokens.toLocaleString()}</td>
+              <td style="color: var(--emerald); font-size:12px;">${savingsPct}%</td>
+              <td>
+                <span class="status-badge ${log.exit_code === 0 ? 'success' : 'fail'}">
+                  ${log.exit_code}
+                </span>
+              </td>
+              <td>
+                <button class="btn-inspect" data-id="${log.id}" data-cmd="${log.command}" data-sec="${log.secrets_found || 0}" data-types="${(log.secret_types || []).join(',')}" onclick="inspectFromBtn(this)">Inspect</button>
+              </td>
+            `;
             tbody.appendChild(tr);
           });
-        }
+        });
       } catch (err) {
         console.error('Failed to fetch history logs', err);
       }
@@ -1278,6 +1483,15 @@
       return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
     }
 
+    function formatCommandName(cmd) {
+      if (!cmd) return 'unknown';
+      if (cmd.includes('conv:')) {
+        const parts = cmd.split('conv:');
+        return parts[1] || cmd;
+      }
+      return cmd;
+    }
+
     // Human-friendly labels for redactor rule types (see redactor.ts)
     const SECRET_TYPE_LABELS = {
       aws_key: 'AWS access key',
@@ -1354,7 +1568,8 @@
 
     async function inspectDiff(id, command, secretsFound, secretTypes) {
       try {
-        document.getElementById('modal-command-title').innerText = `Inspector: trim ${command}`;
+        const cleanCmd = formatCommandName(command);
+        document.getElementById('modal-command-title').innerText = `Inspector: trim ${cleanCmd}`;
         document.getElementById('diff-raw').innerText = 'Loading...';
         document.getElementById('diff-comp').innerText = 'Loading...';
         document.getElementById('diff-modal').style.display = 'flex';
@@ -1362,8 +1577,13 @@
         const response = await fetch(`/api/stats/inspect/${id}`);
         const data = await response.json();
 
-        document.getElementById('diff-raw').innerHTML = highlightRedacted(escapeHtml(data.raw), 'red');
-        document.getElementById('diff-comp').innerHTML = highlightRedacted(escapeHtml(data.compressed), 'green');
+        if (command && command.includes('conv:')) {
+          document.getElementById('diff-raw').innerHTML = `<div style="color:#F59E0B;font-size:13px;padding:24px;font-weight:600;line-height:1.6;">⚡ Live Conversation Context Monitor Active<br><span style="font-size:12px;color:#94A3B8;font-weight:400;">Savings achieved via conversation compaction (Native Hook & Side-Cache active)</span></div>`;
+          document.getElementById('diff-comp').innerHTML = `<div style="color:#10B981;font-size:13px;padding:24px;font-weight:600;line-height:1.6;">✅ Tokens Trimmed & Offloaded Live<br><span style="font-size:12px;color:#94A3B8;font-weight:400;">Active memory trimming and real-time token savings within conversation</span></div>`;
+        } else {
+          document.getElementById('diff-raw').innerHTML = highlightRedacted(escapeHtml(data.raw), 'red');
+          document.getElementById('diff-comp').innerHTML = highlightRedacted(escapeHtml(data.compressed), 'green');
+        }
 
         const info = detectFilterType(data.raw, data.compressed, command);
         const bar = document.getElementById('inspect-info-bar');