ai-agent-session-center 2.0.2 → 2.0.3

package/public/index.html

@@ -4,7 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <title>AI Agent Session Center</title>
-  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230a0a1a'/%3E%3Ccircle cx='16' cy='13' r='7' fill='none' stroke='%2300e5ff' stroke-width='2'/%3E%3Ccircle cx='13.5' cy='12' r='1.5' fill='%2300e5ff'/%3E%3Ccircle cx='18.5' cy='12' r='1.5' fill='%2300e5ff'/%3E%3Cpath d='M13 16 Q16 19 19 16' fill='none' stroke='%2300e5ff' stroke-width='1' stroke-linecap='round'/%3E%3Crect x='14.5' y='4' width='3' height='3' rx='1' fill='%2300e5ff'/%3E%3Cline x1='16' y1='7' x2='16' y2='6' stroke='%2300e5ff' stroke-width='1.5'/%3E%3Crect x='9' y='22' width='14' height='6' rx='2' fill='none' stroke='%23ff9100' stroke-width='1.5'/%3E%3Cline x1='12' y1='24' x2='12' y2='26' stroke='%23ff9100' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='16' y1='24' x2='16' y2='26' stroke='%23ff9100' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='20' y1='24' x2='20' y2='26' stroke='%23ff9100' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E">
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="apple-touch-icon" href="/apple-touch-icon.svg">
+  <meta name="theme-color" content="#0a0a1a">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/main.css">
@@ -56,9 +58,6 @@
       <div id="nav-actions-items">
         <button id="qa-new-session" class="qa-btn qa-btn-terminal" title="Launch a new Claude session via SSH">+ NEW SESSION</button>
         <button id="qa-quick-session" class="qa-btn qa-btn-quick" title="Quick launch with last config + label">&#9889; QUICK</button>
-        <button id="qa-oneoff" class="qa-btn qa-btn-oneoff" title="Launch a one-off session (auto-review reminder)">ONEOFF</button>
-        <button id="qa-heavy" class="qa-btn qa-btn-heavy" title="Launch a high-priority session (auto-pinned, bold frame)">&#9733; HEAVY</button>
-        <button id="qa-important" class="qa-btn qa-btn-important" title="Launch an important session (alert on completion)">&#9888; IMPORTANT</button>
         <button id="qa-new-group" class="qa-btn" title="Create a new group">+ NEW GROUP</button>
         <div class="qa-separator"></div>
         <button id="qa-mute-all" class="qa-btn" title="Mute all sessions">&#9835; MUTE ALL</button>
@@ -98,18 +97,6 @@
         <span class="mobile-qa-icon">&#9889;</span>
         <span class="mobile-qa-label">QUICK</span>
       </button>
-      <button class="mobile-qa-item" data-action="oneoff" title="One-off Session">
-        <span class="mobile-qa-icon">&#128260;</span>
-        <span class="mobile-qa-label">ONEOFF</span>
-      </button>
-      <button class="mobile-qa-item" data-action="heavy" title="Heavy Session">
-        <span class="mobile-qa-icon">&#9733;</span>
-        <span class="mobile-qa-label">HEAVY</span>
-      </button>
-      <button class="mobile-qa-item" data-action="important" title="Important Session">
-        <span class="mobile-qa-icon">&#9888;</span>
-        <span class="mobile-qa-label">IMPORTANT</span>
-      </button>
       <button class="mobile-qa-item" data-action="new-group" title="New Group">
         <span class="mobile-qa-icon">&#128194;</span>
         <span class="mobile-qa-label">GROUP</span>
@@ -284,6 +271,9 @@
               <h3 id="detail-project-name"></h3>
               <div class="detail-title-row">
                 <input type="text" id="detail-title" placeholder="Add session title..." class="detail-title-input">
+                <button class="detail-title-edit-btn" id="detail-title-edit-btn" title="Edit title">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+                </button>
                 <input type="text" id="detail-label" list="detail-label-suggestions" placeholder="Label..." class="detail-label-input" autocomplete="off">
                 <datalist id="detail-label-suggestions"></datalist>
               </div>
@@ -487,7 +477,6 @@
       <div class="settings-tabs">
         <button class="settings-tab active" data-settings-tab="appearance">Appearance</button>
         <button class="settings-tab" data-settings-tab="sounds">Sounds</button>
-        <button class="settings-tab" data-settings-tab="labels">Labels</button>
         <button class="settings-tab" data-settings-tab="advanced">Advanced</button>
       </div>
 
@@ -764,15 +753,6 @@
         </div>
       </div>
 
-      <!-- Labels Tab -->
-      <div class="settings-tab-content" id="settings-tab-labels">
-        <div class="settings-section">
-          <h4>Built-in Label Alerts</h4>
-          <p class="settings-hint">Configure which sound and movement effect plays when a labeled session completes. These alerts fire on session end for ONEOFF, HEAVY, and IMPORTANT sessions.</p>
-          <div id="label-settings-grid" class="label-settings-grid"></div>
-        </div>
-      </div>
-
       <!-- Advanced Tab -->
       <div class="settings-tab-content" id="settings-tab-advanced">
         <div class="settings-section">

package/public/js/alarmManager.js

@@ -86,24 +86,3 @@ export function checkAlarms(session, allSessions) {
     approvalAlarmTimers.delete('input-' + session.sessionId);
   }
 }
-
-// Label completion alerts
-export function handleLabelAlerts(session) {
-  if (session.status !== 'ended' || isMuted(session.sessionId)) return;
-
-  const labelUpper = (session.label || '').toUpperCase();
-  const labelCfg = settingsManager.getLabelSettings();
-  if (labelCfg[labelUpper]) {
-    const cfg = labelCfg[labelUpper];
-    if (cfg.sound && cfg.sound !== 'none') soundManager.previewSound(cfg.sound);
-    if (cfg.movement && cfg.movement !== 'none') movementManager.trigger('alert', session.sessionId);
-    const card = document.querySelector(`.session-card[data-session-id="${session.sessionId}"] .css-robot`);
-    if (card && cfg.movement && cfg.movement !== 'none') {
-      card.removeAttribute('data-movement');
-      void card.offsetWidth;
-      card.setAttribute('data-movement', cfg.movement);
-      setTimeout(() => card.removeAttribute('data-movement'), 5000);
-    }
-  }
-
-}

package/public/js/app.js

@@ -14,7 +14,7 @@ import { openDB, persistSessionUpdate, put, del, getAll, clear, getQueue, migrat
 import { escapeHtml as utilEscapeHtml, debugLog, debugWarn } from './utils.js';
 import { initKeyboardShortcuts } from './keyboardShortcuts.js';
 import { initQuickActions, initShortcutsPanel } from './quickActions.js';
-import { handleEventSounds, checkAlarms, handleLabelAlerts, clearAlarm } from './alarmManager.js';
+import { handleEventSounds, checkAlarms, clearAlarm } from './alarmManager.js';
 
 let allSessions = {};
 let hasRestoredSelection = false;
@@ -150,18 +150,35 @@ async function init() {
     },
     onSnapshotCb(sessions, teams) {
       const serverIds = new Set(Object.keys(sessions));
+      // Also build a set of sessionId values to catch key/sessionId mismatches
+      const serverSessionIds = new Set();
+      for (const s of Object.values(sessions)) {
+        if (s.sessionId) serverSessionIds.add(s.sessionId);
+      }
       for (const cachedId of Object.keys(allSessions)) {
-        if (!serverIds.has(cachedId)) {
+        // Remove cached entries not on the server (by key OR by sessionId)
+        if (!serverIds.has(cachedId) && !serverSessionIds.has(cachedId)) {
           removeCard(cachedId);
           robotManager.removeRobot(cachedId);
           del('sessions', cachedId).catch(() => {});
           delete allSessions[cachedId];
         }
       }
+      // Deduplicate: if server sends entries with different keys but same sessionId,
+      // keep only the most recent one to prevent duplicate cards.
+      const deduped = new Map();
       for (const [id, session] of Object.entries(sessions)) {
-        allSessions[id] = session;
+        const sid = session.sessionId || id;
+        const existing = deduped.get(sid);
+        if (!existing || (session.lastActivityAt || 0) > (existing.lastActivityAt || 0)) {
+          deduped.set(sid, session);
+        }
       }
-      for (const session of Object.values(sessions)) {
+      // Use sessionId as the allSessions key (not the server's Map key) for consistency
+      for (const [sid, session] of deduped) {
+        allSessions[sid] = session;
+      }
+      for (const session of deduped.values()) {
         createOrUpdateCard(session);
         robotManager.updateRobot(session);
         persistSessionUpdate(session).catch(() => {});
@@ -230,9 +247,6 @@ async function init() {
       addActivityEntry(session);
       toggleEmptyState(Object.keys(allSessions).length === 0);
 
-      // Label completion alerts
-      handleLabelAlerts(session);
-
       // SSH sessions persist as disconnected cards; non-SSH auto-remove
       if (session.status === 'ended' && session.source !== 'ssh') {
         setTimeout(() => {

package/public/js/detailPanel.js

@@ -219,10 +219,38 @@ export function populateDetailPanel(session) {
       }
     });
   } else if (activeTab && activeTab.dataset.tab === 'terminal' && !session.terminalId) {
-    import('./terminalManager.js').then(tm => tm.detachTerminal());
+    import('./terminalManager.js').then(tm => {
+      tm.detachTerminal();
+      _showExternalSourceHint(session);
+    });
   }
 }
 
+const SOURCE_LABELS = {
+  vscode: 'VS Code', jetbrains: 'JetBrains', iterm: 'iTerm',
+  warp: 'Warp', kitty: 'Kitty', ghostty: 'Ghostty',
+  alacritty: 'Alacritty', wezterm: 'WezTerm', hyper: 'Hyper',
+  terminal: 'Terminal', tmux: 'tmux',
+};
+
+/** Show an informational hint in the terminal container for external-source sessions. */
+function _showExternalSourceHint(session) {
+  const isExternal = session.source && session.source !== 'ssh';
+  const container = document.getElementById('terminal-container');
+  if (!container || !isExternal) return;
+
+  const label = SOURCE_LABELS[session.source] || session.source;
+  container.innerHTML = `
+    <div class="terminal-external-hint">
+      <div class="terminal-external-hint-icon">&#x1F4E1;</div>
+      <div class="terminal-external-hint-title">External Session &mdash; ${escapeHtml(label)}</div>
+      <div class="terminal-external-hint-text">
+        This session was detected from <strong>${escapeHtml(label)}</strong> via hooks.<br>
+        No managed terminal is attached. Use the <strong>RECONNECT</strong> button to open a terminal and resume this session, or interact with it directly in ${escapeHtml(label)}.
+      </div>
+    </div>`;
+}
+
 /**
  * Restore the previously selected session + active tab after a page refresh.
  * Called from app.js after the snapshot arrives and sessions are populated.
@@ -328,77 +356,44 @@ export async function openSessionDetailFromHistory(sessionId) {
     data.session.accentColor || null
   );
 
-  // Populate conversation tab
+  // Populate conversation tab — tag raw data in-place, sort once
+  const prompts = data.prompts || [];
+  const toolCalls = data.tool_calls || [];
+  const responses = data.responses || [];
+  const events = data.events || [];
+
   const histConvItems = [];
-  for (const p of (data.prompts || [])) {
-    histConvItems.push({ type: 'user', text: p.text, timestamp: p.timestamp });
-  }
-  for (const t of (data.tool_calls || [])) {
-    histConvItems.push({ type: 'tool', tool: t.toolName, input: t.toolInputSummary, timestamp: t.timestamp });
-  }
-  for (const r of (data.responses || [])) {
-    histConvItems.push({ type: 'claude', text: r.textExcerpt, timestamp: r.timestamp });
-  }
-  histConvItems.sort((a, b) => b.timestamp - a.timestamp);
+  for (const p of prompts) histConvItems.push({ k: 'u', ts: p.timestamp, a: p.text, b: '' });
+  for (const t of toolCalls) histConvItems.push({ k: 't', ts: t.timestamp, a: t.toolName, b: t.toolInputSummary });
+  for (const r of responses) histConvItems.push({ k: 'c', ts: r.timestamp, a: r.textExcerpt, b: '' });
+  histConvItems.sort((a, b) => b.ts - a.ts);
+  const CONV_CFG = { u: ['conv-user', 'USER'], t: ['conv-tool', 'TOOL'], c: ['conv-claude', 'CLAUDE'] };
   const histConvContainer = document.getElementById('detail-conversation');
   histConvContainer.innerHTML = histConvItems.length > 0
-    ? histConvItems.map(item => {
-        if (item.type === 'user') {
-          return `<div class="conv-entry conv-user">
-            <div class="conv-header"><span class="conv-role">USER</span><span class="conv-time">${formatTime(item.timestamp)}</span><button class="conv-copy" title="Copy">COPY</button></div>
-            <div class="conv-text">${escapeHtml(item.text)}</div>
-          </div>`;
-        } else if (item.type === 'tool') {
-          return `<div class="conv-entry conv-tool">
-            <div class="conv-header"><span class="conv-role">TOOL</span><span class="conv-time">${formatTime(item.timestamp)}</span><button class="conv-copy" title="Copy">COPY</button></div>
-            <span class="conv-tool-name">${escapeHtml(item.tool)}</span>
-            <span class="conv-tool-input">${escapeHtml(item.input)}</span>
-          </div>`;
-        } else {
-          return `<div class="conv-entry conv-claude">
-            <div class="conv-header"><span class="conv-role">CLAUDE</span><span class="conv-time">${formatTime(item.timestamp)}</span><button class="conv-copy" title="Copy">COPY</button></div>
-            <div class="conv-text">${escapeHtml(item.text)}</div>
-          </div>`;
-        }
+    ? histConvItems.map(h => {
+        const [cls, role] = CONV_CFG[h.k];
+        const header = `<div class="conv-header"><span class="conv-role">${role}</span><span class="conv-time">${formatTime(h.ts)}</span><button class="conv-copy" title="Copy">COPY</button></div>`;
+        return h.k === 't'
+          ? `<div class="conv-entry ${cls}">${header}<span class="conv-tool-name">${escapeHtml(h.a)}</span><span class="conv-tool-input">${escapeHtml(h.b)}</span></div>`
+          : `<div class="conv-entry ${cls}">${header}<div class="conv-text">${escapeHtml(h.a)}</div></div>`;
       }).join('')
     : '<div class="tab-empty">No conversation recorded</div>';
 
-  // Populate activity tab
-  const histActivityItems = [];
-  for (const t of (data.tool_calls || [])) {
-    histActivityItems.push({ kind: 'tool', tool: t.toolName, input: t.toolInputSummary, timestamp: t.timestamp });
-  }
-  for (const e of (data.events || [])) {
-    histActivityItems.push({ kind: 'event', type: e.eventType, detail: e.detail, timestamp: e.timestamp });
-  }
-  for (const r of (data.responses || [])) {
-    histActivityItems.push({ kind: 'response', text: r.textExcerpt || r.text, timestamp: r.timestamp });
-  }
-  histActivityItems.sort((a, b) => b.timestamp - a.timestamp);
+  // Populate activity tab — reuse raw arrays, no intermediate copies
   const actEl = document.getElementById('detail-activity-log');
   if (actEl) {
-    actEl.innerHTML = histActivityItems.length > 0
-      ? histActivityItems.map(item => {
-          if (item.kind === 'tool') {
-            return `<div class="activity-entry activity-tool">
-              <span class="activity-time">${formatTime(item.timestamp)}</span>
-              <span class="activity-badge activity-badge-tool">${escapeHtml(item.tool)}</span>
-              <span class="activity-detail">${escapeHtml(item.input)}</span>
-            </div>`;
-          } else if (item.kind === 'response') {
-            return `<div class="activity-entry activity-response">
-              <span class="activity-time">${formatTime(item.timestamp)}</span>
-              <span class="activity-badge activity-badge-response">RESPONSE</span>
-              <span class="activity-detail">${escapeHtml(item.text)}</span>
-            </div>`;
-          } else {
-            return `<div class="activity-entry activity-event">
-              <span class="activity-time">${formatTime(item.timestamp)}</span>
-              <span class="activity-badge activity-badge-event">${escapeHtml(item.type)}</span>
-              <span class="activity-detail">${escapeHtml(item.detail)}</span>
-            </div>`;
-          }
-        }).join('')
+    const actItems = [];
+    for (const t of toolCalls) actItems.push({ k: 't', ts: t.timestamp, a: t.toolName, b: t.toolInputSummary });
+    for (const e of events) actItems.push({ k: 'e', ts: e.timestamp, a: e.eventType, b: e.detail });
+    for (const r of responses) actItems.push({ k: 'r', ts: r.timestamp, a: 'RESPONSE', b: r.textExcerpt || r.text });
+    actItems.sort((a, b) => b.ts - a.ts);
+    const ACT_CLS = { t: 'tool', e: 'event', r: 'response' };
+    actEl.innerHTML = actItems.length > 0
+      ? actItems.map(h => `<div class="activity-entry activity-${ACT_CLS[h.k]}">
+              <span class="activity-time">${formatTime(h.ts)}</span>
+              <span class="activity-badge activity-badge-${ACT_CLS[h.k]}">${escapeHtml(h.a)}</span>
+              <span class="activity-detail">${escapeHtml(h.b)}</span>
+            </div>`).join('')
       : '<div class="tab-empty">No activity recorded</div>';
   }
 
@@ -492,6 +487,10 @@ export function initDetailPanelHandlers() {
           const showBtn = !!(session.terminalId || session.lastTerminalId || session.status === 'ended');
           rbtn.classList.toggle('hidden', !showBtn);
         }
+        // Show external source hint when no terminal is attached
+        if (session && !session.terminalId) {
+          _showExternalSourceHint(session);
+        }
       }
     }
   });

package/public/js/historyPanel.js

@@ -1,4 +1,5 @@
 import { escapeHtml as _escapeHtml, formatDuration as _formatDuration, formatTime as _formatTime, sanitizeColor } from './utils.js';
+import { switchTo } from './navController.js';
 
 let currentPage = 1;
 let debounceTimer = null;
@@ -73,19 +74,7 @@ async function loadSessions() {
 
   const result = await apiFetch(`/api/db/sessions?${params}`);
 
-  // DB returns snake_case fields directly
-  const mapped = result.sessions.map(s => ({
-    id: s.id,
-    title: s.title || '',
-    project_name: s.project_name || '',
-    started_at: s.started_at,
-    ended_at: s.ended_at,
-    status: s.status,
-    total_prompts: s.total_prompts || 0,
-    total_tool_calls: s.total_tool_calls || 0,
-    git_branch: '',
-  }));
-  renderResults(mapped, result.total, result.page, result.pageSize);
+  renderResults(result.sessions, result.total, result.page, result.pageSize);
 }
 
 function renderResults(sessions, total, page, pageSize) {
@@ -104,15 +93,16 @@ function renderResults(sessions, total, page, pageSize) {
       year: 'numeric', month: 'short', day: 'numeric',
       hour: '2-digit', minute: '2-digit', hour12: false,
     });
-    return `<div class="history-row" data-session-id="${s.id}">
-      <span class="history-title">${escapeHtml(s.title)}</span>
-      <span class="history-project">${escapeHtml(s.project_name)}</span>
+    return `<div class="history-row" data-session-id="${s.id}" data-project-path="${escapeHtml(s.project_path || '')}">
+      <span class="history-title">${escapeHtml(s.title || '')}</span>
+      <span class="history-project">${escapeHtml(s.project_name || '')}</span>
       <span class="history-date">${date}</span>
       <span class="history-duration">${duration}</span>
       <span class="history-status ${s.status}">${s.status.toUpperCase()}</span>
-      <span class="history-prompts">${s.total_prompts} prompts</span>
-      <span class="history-tools">${s.total_tool_calls} tools</span>
+      <span class="history-prompts">${s.total_prompts || 0} prompts</span>
+      <span class="history-tools">${s.total_tool_calls || 0} tools</span>
       <span class="history-branch">${escapeHtml(s.git_branch || '')}</span>
+      <button class="history-resume" title="Resume session">&#9654;</button>
       <button class="history-delete" title="Delete session">&times;</button>
     </div>`;
   }).join('');
@@ -120,11 +110,44 @@ function renderResults(sessions, total, page, pageSize) {
   // Click handler for rows
   container.querySelectorAll('.history-row').forEach(row => {
     row.addEventListener('click', (e) => {
-      if (e.target.closest('.history-delete')) return;
+      if (e.target.closest('.history-delete') || e.target.closest('.history-resume')) return;
       openHistoryDetail(row.dataset.sessionId);
     });
   });
 
+  // Resume button handler — create terminal with claude --resume
+  container.querySelectorAll('.history-resume').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      const row = btn.closest('.history-row');
+      const sid = row.dataset.sessionId;
+      if (!sid || !/^[a-zA-Z0-9_-]+$/.test(sid)) return;
+      const projectPath = row.dataset.projectPath || '';
+      btn.disabled = true;
+      btn.textContent = '...';
+      try {
+        const body = { command: `claude --resume ${sid}` };
+        if (projectPath) body.workingDir = projectPath;
+        const resp = await fetch('/api/terminals', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(body),
+        });
+        const result = await resp.json();
+        if (result.ok) {
+          switchTo('live');
+        } else {
+          alert(result.error || 'Failed to resume session');
+        }
+      } catch (err) {
+        alert('Resume error: ' + err.message);
+      } finally {
+        btn.disabled = false;
+        btn.textContent = '\u25B6';
+      }
+    });
+  });
+
   // Delete button handler — delete from server DB
   container.querySelectorAll('.history-delete').forEach(btn => {
     btn.addEventListener('click', async (e) => {
@@ -196,8 +219,8 @@ async function openHistoryDetail(sessionId) {
 
   const sess = data.session;
   const prompts = data.prompts || [];
-  const responses = (data.responses || []).map(r => ({ ...r, text: r.text_excerpt || r.text || '' }));
-  const tools = (data.tool_calls || []).map(t => ({ tool: t.tool_name, input: t.tool_input_summary || '', timestamp: t.timestamp }));
+  const responses = data.responses || [];
+  const tools = data.tool_calls || [];
   const events = data.events || [];
 
   // Populate header
@@ -236,47 +259,30 @@ async function openHistoryDetail(sessionId) {
     });
   }
 
-  // Conversation tab (interleaved prompts + responses)
+  // Conversation tab (interleaved prompts + responses — single pass)
   const convoEl = document.getElementById('detail-conversation');
-  const allEntries = [
-    ...prompts.map(p => ({ type: 'prompt', timestamp: p.timestamp, text: p.text })),
-    ...responses.map(r => ({ type: 'response', timestamp: r.timestamp, text: r.text })),
-  ].sort((a, b) => a.timestamp - b.timestamp);
-  convoEl.innerHTML = allEntries.map(e => {
-    const cls = e.type === 'prompt' ? 'prompt-entry' : 'response-entry';
-    return `<div class="${cls}">
+  const allEntries = [];
+  for (const p of prompts) allEntries.push({ type: 'prompt', timestamp: p.timestamp, text: p.text });
+  for (const r of responses) allEntries.push({ type: 'response', timestamp: r.timestamp, text: r.text_excerpt || r.text || '' });
+  allEntries.sort((a, b) => a.timestamp - b.timestamp);
+  convoEl.innerHTML = allEntries.map(e => `<div class="${e.type}-entry">
       <span class="${e.type}-time">${formatTime(e.timestamp)}</span>
       <div class="${e.type}-text">${escapeHtml(e.text)}</div>
-    </div>`;
-  }).join('');
+    </div>`).join('');
 
-  // Activity tab (merged tool calls + events)
-  const histItems = [];
-  for (const t of tools) {
-    histItems.push({ kind: 'tool', tool: t.tool, input: t.input, timestamp: t.timestamp });
-  }
-  for (const e of events) {
-    histItems.push({ kind: 'event', type: e.event_type, detail: e.detail, timestamp: e.timestamp });
-  }
-  histItems.sort((a, b) => b.timestamp - a.timestamp);
+  // Activity tab (merged tool calls + events — tag in-place, sort once, render)
   const actEl = document.getElementById('detail-activity-log');
   if (actEl) {
+    const histItems = [];
+    for (const t of tools) histItems.push({ k: 't', ts: t.timestamp, a: t.tool_name, b: t.tool_input_summary || '' });
+    for (const e of events) histItems.push({ k: 'e', ts: e.timestamp, a: e.event_type, b: e.detail });
+    histItems.sort((a, b) => b.ts - a.ts);
     actEl.innerHTML = histItems.length > 0
-      ? histItems.map(item => {
-          if (item.kind === 'tool') {
-            return `<div class="activity-entry activity-tool">
-              <span class="activity-time">${formatTime(item.timestamp)}</span>
-              <span class="activity-badge activity-badge-tool">${escapeHtml(item.tool)}</span>
-              <span class="activity-detail">${escapeHtml(item.input)}</span>
-            </div>`;
-          } else {
-            return `<div class="activity-entry activity-event">
-              <span class="activity-time">${formatTime(item.timestamp)}</span>
-              <span class="activity-badge activity-badge-event">${escapeHtml(item.type)}</span>
-              <span class="activity-detail">${escapeHtml(item.detail)}</span>
-            </div>`;
-          }
-        }).join('')
+      ? histItems.map(h => `<div class="activity-entry activity-${h.k === 't' ? 'tool' : 'event'}">
+              <span class="activity-time">${formatTime(h.ts)}</span>
+              <span class="activity-badge activity-badge-${h.k === 't' ? 'tool' : 'event'}">${escapeHtml(h.a)}</span>
+              <span class="activity-detail">${escapeHtml(h.b)}</span>
+            </div>`).join('')
       : '<div class="tab-empty">No activity recorded</div>';
   }