agentacta 1.1.4 → 1.2.0

package/public/app.js

@@ -54,10 +54,13 @@ function escHtml(s) {
 
 function truncate(s, n = 200) {
   if (!s) return '';
-  return s.length > n ? s.slice(0, n) + '…' : s;
+  return s.length > n ? s.slice(0, n) + '\u2026' : s;
 }
 
-// Removed jumpToInitialPrompt - now handled within session view
+function shortSessionId(id) {
+  if (!id) return '';
+  return id.length > 24 ? `${id.slice(0, 8)}\u2026${id.slice(-8)}` : id;
+}
 
 function badgeClass(type, role) {
   if (type === 'tool_call') return 'badge-tool_call';
@@ -67,6 +70,12 @@ function badgeClass(type, role) {
   return 'badge-message';
 }
 
+function transitionView() {
+  content.classList.remove('view-enter');
+  void content.offsetWidth;
+  content.classList.add('view-enter');
+}
+
 function renderEvent(ev) {
   const badge = `<span class="event-badge ${badgeClass(ev.type, ev.role)}">${ev.type === 'tool_call' ? 'tool' : ev.role || ev.type}</span>`;
   let body = '';
@@ -82,7 +91,7 @@ function renderEvent(ev) {
       }
     }
   } else if (ev.type === 'tool_result') {
-    body = `<span class="tool-name">→ ${escHtml(ev.tool_name)}</span>`;
+    body = `<span class="tool-name">\u2192 ${escHtml(ev.tool_name)}</span>`;
     if (ev.content) {
       body += `<div class="tool-args">${escHtml(truncate(ev.content, 500))}</div>`;
     }
@@ -97,6 +106,40 @@ function renderEvent(ev) {
   </div>`;
 }
 
+function renderTimelineEvent(ev) {
+  const typeClass = ev.type === 'tool_call' || ev.type === 'tool_result' ? 'type-tool' :
+                    ev.role === 'user' ? 'type-user' :
+                    ev.role === 'assistant' ? 'type-assistant' : '';
+
+  const badge = `<span class="event-badge ${badgeClass(ev.type, ev.role)}">${ev.type === 'tool_call' ? 'tool' : ev.role || ev.type}</span>`;
+  let body = '';
+
+  if (ev.type === 'tool_call') {
+    body = `<span class="tool-name">${escHtml(ev.tool_name)}</span>`;
+    if (ev.tool_args) {
+      try {
+        const args = JSON.parse(ev.tool_args);
+        body += `<div class="tool-args">${escHtml(JSON.stringify(args, null, 2))}</div>`;
+      } catch {
+        body += `<div class="tool-args">${escHtml(ev.tool_args)}</div>`;
+      }
+    }
+  } else if (ev.type === 'tool_result') {
+    body = `<span class="tool-name">\u2192 ${escHtml(ev.tool_name)}</span>`;
+    if (ev.content) {
+      body += `<div class="tool-args">${escHtml(truncate(ev.content, 500))}</div>`;
+    }
+  } else {
+    body = `<div class="event-content">${escHtml(ev.content || '')}</div>`;
+  }
+
+  return `<div class="timeline-event ${typeClass}" data-event-id="${ev.id}">
+    <div class="event-time">${fmtTimeShort(ev.timestamp)}</div>
+    ${badge}
+    <div class="event-body">${body}</div>
+  </div>`;
+}
+
 function fmtDuration(start, end) {
   if (!start) return '';
   const ms = (end ? new Date(end) : new Date()) - new Date(start);
@@ -113,6 +156,13 @@ function fmtTimeOnly(ts) {
   return new Date(ts).toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
 }
 
+function normalizeAgentLabel(a) {
+  if (!a) return a;
+  if (a === 'main') return 'openclaw-main';
+  if (a.startsWith('claude-') || a.startsWith('claude--')) return 'claude-code';
+  return a;
+}
+
 function renderProjectTags(s) {
   let projects = [];
   if (s.projects) {
@@ -122,7 +172,6 @@ function renderProjectTags(s) {
 }
 
 function renderModelTags(s) {
-  // Prefer models array if present, fall back to single model
   let models = [];
   if (s.models) {
     try { models = JSON.parse(s.models); } catch {}
@@ -133,23 +182,23 @@ function renderModelTags(s) {
 
 function renderSessionItem(s) {
   const duration = fmtDuration(s.start_time, s.end_time);
-  const timeRange = `${fmtTime(s.start_time)} → ${s.end_time ? fmtTimeOnly(s.end_time) : 'now'}`;
+  const timeRange = `${fmtTime(s.start_time)} \u2192 ${s.end_time ? fmtTimeOnly(s.end_time) : 'now'}`;
 
   return `
     <div class="session-item" data-id="${s.id}">
       <div class="session-header">
-        <span class="session-time">${timeRange} · ${duration}</span>
+        <span class="session-time">${timeRange} \u00b7 ${duration}</span>
         <span style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
           ${renderProjectTags(s)}
-          ${s.agent && s.agent !== 'main' ? `<span class="session-agent">${escHtml(s.agent)}</span>` : ''}
+          ${s.agent && s.agent !== 'main' ? `<span class="session-agent">${escHtml(normalizeAgentLabel(s.agent))}</span>` : ''}
           ${s.session_type ? `<span class="session-type">${escHtml(s.session_type)}</span>` : ''}
           ${renderModelTags(s)}
         </span>
       </div>
       <div class="session-summary">${escHtml(truncate(s.summary || 'No summary', 120))}</div>
       <div class="session-meta">
-        <span>💬 ${s.message_count}</span>
-        <span>🔧 ${s.tool_count}</span>
+        <span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> ${s.message_count}</span>
+        <span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg> ${s.tool_count}</span>
       </div>
     </div>
   `;
@@ -163,8 +212,8 @@ async function viewSearch(query = '') {
 
   let html = `<div class="page-title">Search</div>
     <div class="search-bar">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-      <input type="text" id="searchInput" placeholder="Search messages, tool calls, files…" value="${escHtml(query)}">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+      <input type="text" id="searchInput" placeholder="Search messages, tool calls, files\u2026" value="${escHtml(query)}">
     </div>
     <div class="filters">
       <span class="filter-chip ${typeFilter===''?'active':''}" data-filter="type" data-val="">All</span>
@@ -177,6 +226,7 @@ async function viewSearch(query = '') {
     <div id="results"></div>`;
 
   content.innerHTML = html;
+  transitionView();
 
   const input = $('#searchInput');
   input.focus();
@@ -202,7 +252,7 @@ async function viewSearch(query = '') {
 
 async function showSearchHome() {
   const el = $('#results');
-  el.innerHTML = '<div class="loading">Loading…</div>';
+  el.innerHTML = '<div class="loading">Loading</div>';
 
   const stats = await api('/stats');
   const sessions = await api('/sessions?limit=5');
@@ -211,17 +261,17 @@ async function showSearchHome() {
   try { const r = await fetch('/api/suggestions'); const d = await r.json(); suggestions = d.suggestions || []; } catch(e) { suggestions = []; }
 
   let html = `
-    <div class="stat-grid" style="margin-top:8px">
-      <div class="stat-card"><div class="label">Sessions</div><div class="value">${stats.sessions}</div></div>
-      <div class="stat-card"><div class="label">Messages</div><div class="value">${stats.messages.toLocaleString()}</div></div>
-      <div class="stat-card"><div class="label">Tool Calls</div><div class="value">${stats.toolCalls.toLocaleString()}</div></div>
-      <div class="stat-card"><div class="label">Tokens</div><div class="value">${(stats.totalTokens || 0).toLocaleString()}</div></div>
+    <div class="search-stats" style="margin-top:8px">
+      <div class="search-stat"><div class="num">${stats.sessions}</div><div class="lbl">Sessions</div></div>
+      <div class="search-stat"><div class="num">${stats.messages.toLocaleString()}</div><div class="lbl">Messages</div></div>
+      <div class="search-stat"><div class="num">${stats.toolCalls.toLocaleString()}</div><div class="lbl">Tool Calls</div></div>
+      <div class="search-stat"><div class="num">${fmtTokens(stats.totalTokens || 0)}</div><div class="lbl">Tokens</div></div>
     </div>
 
-    <div class="section-label">Quick Search</div>
+    ${suggestions.length ? `<div class="section-label">Quick Search</div>
     <div class="filters" id="suggestions">
-      ${suggestions.map(s => `<span class="filter-chip suggestion" data-q="${s}">${s}</span>`).join('')}
-    </div>
+      ${suggestions.map(s => `<span class="suggestion-chip" data-q="${s}">${s}</span>`).join('')}
+    </div>` : ''}
 
     <div class="section-label">Recent Sessions</div>
     ${sessions.sessions.map(renderSessionItem).join('')}
@@ -229,7 +279,7 @@ async function showSearchHome() {
 
   el.innerHTML = html;
 
-  $$('.suggestion', el).forEach(chip => {
+  $$('.suggestion-chip', el).forEach(chip => {
     chip.addEventListener('click', () => {
       $('#searchInput').value = chip.dataset.q;
       doSearch(chip.dataset.q);
@@ -249,7 +299,7 @@ async function doSearch(q) {
   const el = $('#results');
   if (!q.trim()) { el.innerHTML = '<div class="empty"><h2>Type to search</h2><p>Search across all sessions, messages, and tool calls</p></div>'; return; }
 
-  el.innerHTML = '<div class="loading">Searching…</div>';
+  el.innerHTML = '<div class="loading">Searching</div>';
 
   const type = window._searchType || '';
   const role = window._searchRole || '';
@@ -260,13 +310,13 @@ async function doSearch(q) {
   const data = await api(url);
 
   if (data.error) { el.innerHTML = `<div class="empty"><p>${escHtml(data.error)}</p></div>`; return; }
-  if (!data.results.length) { el.innerHTML = '<div class="empty"><h2>No results</h2></div>'; return; }
+  if (!data.results.length) { el.innerHTML = '<div class="empty"><h2>No results</h2><p>Try a different search term or adjust filters</p></div>'; return; }
 
-  let header = `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
+  let header = `<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)">
     <span class="section-label" style="margin:0">${data.results.length} results</span>
     <div style="display:flex;gap:8px">
-      <a class="export-btn" href="#" onclick="dlExport('/api/export/search?q=${encodeURIComponent(q)}&format=md','search.md');return false">📄 MD</a>
-      <a class="export-btn" href="#" onclick="dlExport('/api/export/search?q=${encodeURIComponent(q)}&format=json','search.json');return false">📋 JSON</a>
+      <a class="export-btn" href="#" onclick="dlExport('/api/export/search?q=${encodeURIComponent(q)}&format=md','search.md');return false">MD</a>
+      <a class="export-btn" href="#" onclick="dlExport('/api/export/search?q=${encodeURIComponent(q)}&format=json','search.json');return false">JSON</a>
     </div>
   </div>`;
 
@@ -276,7 +326,7 @@ async function doSearch(q) {
         <span class="event-badge ${badgeClass(r.type, r.role)}">${r.type === 'tool_call' ? 'tool' : r.role || r.type}</span>
         <span class="session-time">${fmtTime(r.timestamp)}</span>
         ${r.tool_name ? `<span class="tool-name">${escHtml(r.tool_name)}</span>` : ''}
-        <span class="session-link" data-session="${r.session_id}">view session →</span>
+        <span class="session-link" data-session="${r.session_id}">view session \u2192</span>
       </div>
       <div class="result-content">${escHtml(truncate(r.content || r.tool_args || r.tool_result || '', 400))}</div>
     </div>
@@ -293,12 +343,13 @@ async function doSearch(q) {
 
 async function viewSessions() {
   window._currentSessionId = null;
-  content.innerHTML = '<div class="loading">Loading…</div>';
+  content.innerHTML = '<div class="loading">Loading</div>';
   const data = await api('/sessions?limit=200');
 
   let html = `<div class="page-title">Sessions</div>`;
   html += data.sessions.map(renderSessionItem).join('');
   content.innerHTML = html;
+  transitionView();
 
   $$('.session-item').forEach(item => {
     item.addEventListener('click', () => viewSession(item.dataset.id));
@@ -307,7 +358,7 @@ async function viewSessions() {
 
 async function viewSession(id) {
   window._currentSessionId = id;
-  content.innerHTML = '<div class="loading">Loading…</div>';
+  content.innerHTML = '<div class="loading">Loading</div>';
   const data = await api(`/sessions/${id}`);
 
   if (data.error) { content.innerHTML = `<div class="empty"><h2>${data.error}</h2></div>`; return; }
@@ -315,28 +366,34 @@ async function viewSession(id) {
   const s = data.session;
   const cost = fmtCost(s.total_cost);
   let html = `
-    <div class="back-btn" id="backBtn">← Back</div>
+    <div class="back-btn" id="backBtn">\u2190 Back</div>
     <div class="page-title">Session</div>
-    <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px">
-      ${s.first_message_id ? `<button class="jump-to-start-btn" id="jumpToStartBtn" title="Jump to initial prompt">↗️ Initial Prompt</button>` : ''}
-      ${data.hasArchive ? `<a class="export-btn" href="#" onclick="dlExport('/api/archive/export/${id}','session.jsonl');return false">📦 JSONL</a>` : ''}
-      <a class="export-btn" href="#" onclick="dlExport('/api/export/session/${id}?format=md','session.md');return false">📄 MD</a>
-      <a class="export-btn" href="#" onclick="dlExport('/api/export/session/${id}?format=json','session.json');return false">📋 JSON</a>
+    <div class="session-id-row">
+      <span class="session-id-label">ID</span>
+      <span class="session-id-value" title="${escHtml(id)}">${escHtml(id)}</span>
+      <button class="session-id-copy" id="copySessionId" title="Copy session ID">\u29c9</button>
+      <span class="session-id-copied" id="copyConfirm">Copied!</span>
     </div>
-    <div class="session-item" style="cursor:default">
-      <div class="session-header">
-        <span class="session-time">${fmtDate(s.start_time)} · ${fmtTimeShort(s.start_time)} – ${fmtTimeShort(s.end_time)}</span>
+    <div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:12px">
+      ${s.first_message_id ? `<button class="jump-to-start-btn" id="jumpToStartBtn" title="Jump to initial prompt">Initial Prompt</button>` : ''}
+      ${data.hasArchive ? `<a class="export-btn" href="#" onclick="dlExport('/api/archive/export/${id}','session.jsonl');return false">JSONL</a>` : ''}
+      <a class="export-btn" href="#" onclick="dlExport('/api/export/session/${id}?format=md','session.md');return false">MD</a>
+      <a class="export-btn" href="#" onclick="dlExport('/api/export/session/${id}?format=json','session.json');return false">JSON</a>
+    </div>
+    <div class="session-detail-card">
+      <div class="session-header" style="margin-bottom:12px">
+        <span class="session-time">${fmtDate(s.start_time)} \u00b7 ${fmtTimeShort(s.start_time)} \u2013 ${fmtTimeShort(s.end_time)}</span>
         <span style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
           ${renderProjectTags(s)}
-          ${s.agent && s.agent !== 'main' ? `<span class="session-agent">${escHtml(s.agent)}</span>` : ''}
+          ${s.agent && s.agent !== 'main' ? `<span class="session-agent">${escHtml(normalizeAgentLabel(s.agent))}</span>` : ''}
           ${s.session_type ? `<span class="session-type">${escHtml(s.session_type)}</span>` : ''}
           ${renderModelTags(s)}
         </span>
       </div>
-      <div class="session-meta" style="display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px">
-        <span>💬 ${s.message_count} messages</span>
-        <span>🔧 ${s.tool_count} tools</span>
-        ${s.output_tokens ? `<span>📤 ${fmtTokens(s.output_tokens)} output</span><span>📥 ${fmtTokens(s.input_tokens + s.cache_read_tokens)} input</span>` : s.total_tokens ? `<span>🔤 ${fmtTokens(s.total_tokens)} tokens</span><span></span>` : '<span></span><span></span>'}
+      <div class="session-detail-grid">
+        <span><span class="detail-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></span> ${s.message_count} messages</span>
+        <span><span class="detail-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></span> ${s.tool_count} tools</span>
+        ${s.output_tokens ? `<span><span class="detail-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/></svg></span> ${fmtTokens(s.output_tokens)} output</span><span><span class="detail-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg></span> ${fmtTokens(s.input_tokens + s.cache_read_tokens)} input</span>` : s.total_tokens ? `<span><span class="detail-icon"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/></svg></span> ${fmtTokens(s.total_tokens)} tokens</span><span></span>` : '<span></span><span></span>'}
       </div>
     </div>
     <div class="section-label">Events</div>
@@ -344,6 +401,7 @@ async function viewSession(id) {
 
   html += data.events.map(renderEvent).join('');
   content.innerHTML = html;
+  transitionView();
 
   $('#backBtn').addEventListener('click', () => {
     if (window._lastView === 'timeline') viewTimeline();
@@ -352,15 +410,54 @@ async function viewSession(id) {
     else viewSessions();
   });
 
+  $('#copySessionId').addEventListener('click', async () => {
+    const conf = $('#copyConfirm');
+    const showCopied = () => {
+      conf.textContent = 'Copied!';
+      conf.classList.add('show');
+      setTimeout(() => conf.classList.remove('show'), 1500);
+    };
+
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(id);
+        showCopied();
+        return;
+      }
+
+      const ta = document.createElement('textarea');
+      ta.value = id;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      ta.style.pointerEvents = 'none';
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(ta);
+
+      if (ok) showCopied();
+      else throw new Error('Copy failed');
+    } catch {
+      conf.textContent = 'Press Ctrl/Cmd+C';
+      conf.classList.add('show');
+      setTimeout(() => {
+        conf.classList.remove('show');
+        conf.textContent = 'Copied!';
+      }, 1800);
+    }
+  });
+
   const jumpBtn = $('#jumpToStartBtn');
   if (jumpBtn) {
     jumpBtn.addEventListener('click', () => {
       const firstMessage = document.querySelector(`[data-event-id="${s.first_message_id}"]`);
       if (firstMessage) {
         firstMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        firstMessage.style.background = 'var(--accent-bg)';
+        firstMessage.classList.add('event-highlight');
         setTimeout(() => {
-          firstMessage.style.background = '';
+          firstMessage.classList.remove('event-highlight');
         }, 2000);
       }
     });
@@ -368,13 +465,17 @@ async function viewSession(id) {
 }
 
 async function viewTimeline(date) {
-  if (!date) date = new Date().toISOString().slice(0, 10);
+  if (!date) {
+    const now = new Date();
+    date = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')}`;
+  }
   window._lastView = 'timeline';
 
   let html = `<div class="page-title">Timeline</div>
     <input type="date" class="date-input" id="dateInput" value="${date}">
-    <div id="timelineContent"><div class="loading">Loading…</div></div>`;
+    <div id="timelineContent"><div class="loading">Loading</div></div>`;
   content.innerHTML = html;
+  transitionView();
 
   const data = await api(`/timeline?date=${date}`);
   const el = $('#timelineContent');
@@ -382,52 +483,76 @@ async function viewTimeline(date) {
   if (!data.events.length) {
     el.innerHTML = '<div class="empty"><h2>No activity</h2><p>Nothing recorded on this day</p></div>';
   } else {
-    el.innerHTML = data.events.map(renderEvent).join('');
+    el.innerHTML = `<div class="timeline-events-wrap">
+      <div class="timeline-line"></div>
+      ${data.events.map(renderTimelineEvent).join('')}
+    </div>`;
   }
 
   $('#dateInput').addEventListener('change', e => viewTimeline(e.target.value));
 }
 
 async function viewStats() {
-  content.innerHTML = '<div class="loading">Loading…</div>';
+  content.innerHTML = '<div class="loading">Loading</div>';
   const data = await api('/stats');
 
   let html = `<div class="page-title">Stats</div>
     <div class="stat-grid">
-      <div class="stat-card"><div class="label">Sessions</div><div class="value">${data.sessions}</div></div>
-      <div class="stat-card"><div class="label">Messages</div><div class="value">${data.messages.toLocaleString()}</div></div>
-      <div class="stat-card"><div class="label">Tool Calls</div><div class="value">${data.toolCalls.toLocaleString()}</div></div>
-      <div class="stat-card"><div class="label">Unique Tools</div><div class="value">${data.uniqueTools}</div></div>
-      <div class="stat-card"><div class="label">Total Tokens</div><div class="value">${(data.totalTokens || 0).toLocaleString()}</div></div>
+      <div class="stat-card accent-blue"><div class="label">Sessions</div><div class="value">${data.sessions}</div></div>
+      <div class="stat-card accent-green"><div class="label">Messages</div><div class="value">${data.messages.toLocaleString()}</div></div>
+      <div class="stat-card accent-amber"><div class="label">Tool Calls</div><div class="value">${data.toolCalls.toLocaleString()}</div></div>
+      <div class="stat-card accent-purple"><div class="label">Unique Tools</div><div class="value">${data.uniqueTools}</div></div>
+      <div class="stat-card accent-teal"><div class="label">Total Tokens</div><div class="value">${(data.totalTokens || 0).toLocaleString()}</div></div>
     </div>
 
     <div class="section-label">Configuration</div>
-    <div class="stat-grid">
-      <div class="stat-card"><div class="label">Storage Mode</div><div class="value" style="font-size:18px">${escHtml(data.storageMode || 'reference')}</div></div>
-      <div class="stat-card"><div class="label">DB Size</div><div class="value" style="font-size:18px">${escHtml(data.dbSize?.display || 'N/A')}</div></div>
+    <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:var(--space-md);margin-bottom:var(--space-xl)">
+      <div class="config-card"><div class="config-label">Storage Mode</div><div class="config-value">${escHtml(data.storageMode || 'reference')}</div></div>
+      <div class="config-card"><div class="config-label">DB Size</div><div class="config-value">${escHtml(data.dbSize?.display || 'N/A')}</div></div>
     </div>
 
-    ${data.sessionDirs && data.sessionDirs.length ? `<div class="section-label">Sessions Paths</div>
-    <div style="font-size:13px;color:var(--text2);font-family:var(--mono)">
-      ${data.sessionDirs.map(d => {
-        const display = d.path.replace(/^\/home\/[^/]+/, '~').replace(/^\/Users\/[^/]+/, '~');
-        return `<div style="margin-bottom:4px">📂 ${escHtml(display)} <span style="color:var(--accent)">(${escHtml(d.agent)})</span></div>`;
-      }).join('')}
-    </div>` : ''}
+    ${data.sessionDirs && data.sessionDirs.length ? (() => {
+      const dirs = data.sessionDirs || [];
+      const claudeDirs = dirs.filter(d => d.agent === 'claude-code' || /^claude-/.test(d.agent || ''));
+      const otherDirs = dirs.filter(d => !(d.agent === 'claude-code' || /^claude-/.test(d.agent || '')));
+
+      const lines = [];
+
+      if (claudeDirs.length) {
+        const projects = new Set();
+        for (const d of claudeDirs) {
+          const m = (d.path || '').match(/[\\/]\\.claude[\\/]projects[\\/]([^\\/]+)$/);
+          if (m && m[1]) projects.add(m[1]);
+        }
+        const projectCount = projects.size || claudeDirs.length;
+        lines.push(`<div style="display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-subtle)"><span style="color:var(--text-tertiary)">~/.claude/projects/*</span> <span style="color:var(--accent);font-size:12px">claude-code \u00b7 ${projectCount} workspace${projectCount === 1 ? '' : 's'}</span></div>`);
+      }
+
+      for (const d of otherDirs) {
+        const display = (d.path || '').replace(/^\/home\/[^/]+/, '~').replace(/^\/Users\/[^/]+/, '~');
+        lines.push(`<div style="display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-subtle)"><span style="color:var(--text-tertiary)">${escHtml(display)}</span> <span style="color:var(--accent);font-size:12px">${escHtml(normalizeAgentLabel(d.agent))}</span></div>`);
+      }
+
+      return `<div class="section-label">Session Paths</div>
+      <div class="config-card" style="margin-bottom:var(--space-xl)">
+        <div style="font-size:12.5px;font-family:var(--font-mono)">${lines.join('')}</div>
+      </div>`;
+    })() : ''}
 
-    ${data.agents && data.agents.length > 1 ? `<div class="section-label">Agents</div><div class="filters">${data.agents.map(a => `<span class="filter-chip">${escHtml(a)}</span>`).join('')}</div>` : ''}
+    ${data.agents && data.agents.length > 1 ? `<div class="section-label">Agents</div><div class="filters" style="margin-bottom:var(--space-xl)">${data.agents.map(a => `<span class="filter-chip">${escHtml(a)}</span>`).join('')}</div>` : ''}
     <div class="section-label">Date Range</div>
-    <p style="color:var(--text2);font-size:14px">${fmtDate(data.dateRange?.earliest)} — ${fmtDate(data.dateRange?.latest)}</p>
+    <p style="color:var(--text-secondary);font-size:13px;margin-bottom:var(--space-xl)">${fmtDate(data.dateRange?.earliest)} \u2014 ${fmtDate(data.dateRange?.latest)}</p>
     <div class="section-label">Tools Used</div>
-    <div class="filters">${(data.tools||[]).filter(t => t).sort().map(t => `<span class="filter-chip">${escHtml(t)}</span>`).join('')}</div>
+    <div class="tools-grid">${(data.tools||[]).filter(t => t).sort().map(t => `<span class="tool-chip">${escHtml(t)}</span>`).join('')}</div>
   `;
 
   content.innerHTML = html;
+  transitionView();
 }
 
 async function viewFiles() {
   window._lastView = 'files';
-  content.innerHTML = '<div class="loading">Loading…</div>';
+  content.innerHTML = '<div class="loading">Loading</div>';
   const data = await api('/files?limit=500');
   window._allFiles = data.files || [];
   window._fileSort = window._fileSort || 'touches';
@@ -443,8 +568,6 @@ function getFileExt(p) {
 }
 
 function getFileDir(p) {
-  // Group by project-level directory
-  // Strip common home dir prefixes
   let rel = p.replace(/^\/home\/[^/]+\//, '~/').replace(/^\/Users\/[^/]+\//, '~/');
   if (rel.startsWith('~/')) rel = rel.slice(2);
   const parts = rel.split('/');
@@ -455,53 +578,48 @@ function getFileDir(p) {
 function renderFiles() {
   let files = [...window._allFiles];
 
-  // Search filter
   const q = window._fileSearch.toLowerCase();
   if (q) files = files.filter(f => f.file_path.toLowerCase().includes(q));
 
-  // Extension filter
   if (window._fileFilter) {
     files = files.filter(f => getFileExt(f.file_path) === window._fileFilter);
   }
 
-  // Sort
   const sort = window._fileSort;
   if (sort === 'touches') files.sort((a, b) => b.touch_count - a.touch_count);
   else if (sort === 'recent') files.sort((a, b) => new Date(b.last_touched) - new Date(a.last_touched));
   else if (sort === 'name') files.sort((a, b) => a.file_path.localeCompare(b.file_path));
   else if (sort === 'sessions') files.sort((a, b) => b.session_count - a.session_count);
 
-  // Get unique extensions for filter chips
   const exts = [...new Set(window._allFiles.map(f => getFileExt(f.file_path)))].sort();
 
   let html = `<div class="page-title">Files</div>
     <div class="search-bar" style="margin-bottom:12px">
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
-      <input type="text" id="fileSearchInput" placeholder="Filter by filename or path…" value="${escHtml(window._fileSearch)}">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+      <input type="text" id="fileSearchInput" placeholder="Filter by filename or path\u2026" value="${escHtml(window._fileSearch)}">
     </div>
     <div class="filters" style="margin-bottom:8px">
       <span class="filter-chip ${sort==='touches'?'active':''}" data-sort="touches">Most touched</span>
       <span class="filter-chip ${sort==='recent'?'active':''}" data-sort="recent">Recent</span>
       <span class="filter-chip ${sort==='sessions'?'active':''}" data-sort="sessions">Most sessions</span>
-      <span class="filter-chip ${sort==='name'?'active':''}" data-sort="name">A-Z</span>
+      <span class="filter-chip ${sort==='name'?'active':''}" data-sort="name">A\u2013Z</span>
     </div>
     <div class="filters" style="margin-bottom:12px">
       <span class="filter-chip ext-chip ${!window._fileFilter?'active':''}" data-ext="">All</span>
       ${exts.map(e => `<span class="filter-chip ext-chip ${window._fileFilter===e?'active':''}" data-ext="${e}">${e}</span>`).join('')}
     </div>
     <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
-      <span style="color:var(--text2);font-size:13px">${files.length} files</span>
-      <span class="filter-chip ${window._fileGrouped?'active':''}" id="groupToggle" style="cursor:pointer">📂 Group by directory</span>
+      <span style="color:var(--text-tertiary);font-size:12px;font-weight:500">${files.length} files</span>
+      <span class="filter-chip ${window._fileGrouped?'active':''}" id="groupToggle" style="cursor:pointer">Group by directory</span>
     </div>
     <div id="filesList"></div>`;
 
   content.innerHTML = html;
+  transitionView();
 
-  // Render file list
   const listEl = $('#filesList');
 
   if (window._fileGrouped && !q) {
-    // Group by directory
     const groups = {};
     files.forEach(f => {
       const dir = getFileDir(f.file_path);
@@ -509,7 +627,6 @@ function renderFiles() {
       groups[dir].push(f);
     });
 
-    // Sort groups by active sort criteria
     const groupMetric = (files) => {
       if (sort === 'touches') return files.reduce((s, f) => s + f.touch_count, 0);
       if (sort === 'sessions') return files.reduce((s, f) => s + f.session_count, 0);
@@ -528,9 +645,9 @@ function renderFiles() {
       return `
         <div class="file-group">
           <div class="file-group-header" data-dir="${escHtml(dir)}">
-            <span class="file-group-arrow">▶</span>
+            <span class="file-group-arrow">\u25b6</span>
             <span class="file-group-name">~/${escHtml(dir)}</span>
-            <span style="color:var(--text2);font-size:12px;margin-left:auto">${dirFiles.length} files · ${groupStat}</span>
+            <span style="color:var(--text-tertiary);font-size:12px;margin-left:auto">${dirFiles.length} files \u00b7 ${groupStat}</span>
           </div>
           <div class="file-group-items" style="display:none">
             ${dirFiles.map(f => renderFileItem(f)).join('')}
@@ -544,10 +661,10 @@ function renderFiles() {
         const arrow = h.querySelector('.file-group-arrow');
         if (items.style.display === 'none') {
           items.style.display = 'block';
-          arrow.textContent = '▼';
+          arrow.textContent = '\u25bc';
         } else {
           items.style.display = 'none';
-          arrow.textContent = '▶';
+          arrow.textContent = '\u25b6';
         }
       });
     });
@@ -555,7 +672,6 @@ function renderFiles() {
     listEl.innerHTML = files.map(f => renderFileItem(f)).join('');
   }
 
-  // Event listeners — must re-attach every render since innerHTML replaces DOM
   let debounce;
   const searchInput = $('#fileSearchInput');
   searchInput.addEventListener('input', e => {
@@ -563,7 +679,6 @@ function renderFiles() {
     debounce = setTimeout(() => { window._fileSearch = e.target.value; renderFiles(); }, 200);
   });
 
-  // Preserve cursor position after re-render
   const cursorPos = window._fileCursorPos || 0;
   searchInput.setSelectionRange(cursorPos, cursorPos);
   if (window._fileSearch) searchInput.focus();
@@ -582,7 +697,6 @@ function renderFiles() {
     item.addEventListener('click', () => viewFileDetail(item.dataset.path));
   });
 
-  // Track cursor for re-renders
   searchInput.addEventListener('keyup', () => { window._fileCursorPos = searchInput.selectionStart; });
 }
 
@@ -591,11 +705,11 @@ function renderFileItem(f) {
   const dir = f.file_path.split('/').slice(0, -1).join('/');
   return `
     <div class="file-item" data-path="${escHtml(f.file_path)}">
-      <div class="file-path"><span style="color:var(--text)">${escHtml(fname)}</span> <span style="color:var(--text2);font-size:12px">${escHtml(dir)}/</span></div>
+      <div class="file-path"><span style="color:var(--text-primary);font-weight:500">${escHtml(fname)}</span> <span style="color:var(--text-tertiary);font-size:12px">${escHtml(dir)}/</span></div>
       <div class="file-meta">
         <span>${f.touch_count} touches</span>
         <span>${f.session_count} sessions</span>
-        <span style="color:var(--orange)">${escHtml(f.operations)}</span>
+        <span style="color:var(--amber)">${escHtml(f.operations)}</span>
         <span class="session-time">${fmtTime(f.last_touched)}</span>
       </div>
     </div>
@@ -603,17 +717,18 @@ function renderFileItem(f) {
 }
 
 async function viewFileDetail(filePath) {
-  content.innerHTML = '<div class="loading">Loading…</div>';
+  content.innerHTML = '<div class="loading">Loading</div>';
   const data = await api(`/files/sessions?path=${encodeURIComponent(filePath)}`);
 
   let html = `
-    <div class="back-btn" id="backBtn">← Back</div>
+    <div class="back-btn" id="backBtn">\u2190 Back</div>
     <div class="page-title" style="word-break:break-all;font-size:16px">${escHtml(filePath)}</div>
     <div class="section-label">${data.sessions.length} sessions touched this file</div>
   `;
 
   html += data.sessions.map(s => renderSessionItem(s)).join('');
   content.innerHTML = html;
+  transitionView();
 
   $('#backBtn').addEventListener('click', () => viewFiles());
   $$('.session-item').forEach(item => {
@@ -645,7 +760,7 @@ viewSearch();
 // Swipe right from left edge to go back
 (function initSwipeBack() {
   let startX = 0, startY = 0, swiping = false;
-  const edgeWidth = 30; // px from left edge
+  const edgeWidth = 30;
   const threshold = 80;
 
   document.addEventListener('touchstart', e => {
@@ -661,7 +776,6 @@ viewSearch();
     if (!swiping) return;
     const dx = e.touches[0].clientX - startX;
     const dy = Math.abs(e.touches[0].clientY - startY);
-    // Cancel if vertical movement exceeds horizontal (it's a scroll)
     if (dy > dx) { swiping = false; }
   }, { passive: true });
 
@@ -685,7 +799,7 @@ viewSearch();
   const indicator = document.createElement('div');
   indicator.className = 'ptr-indicator';
   indicator.id = 'ptr';
-  indicator.textContent = '↓ Pull to refresh';
+  indicator.textContent = '\u2193 Pull to refresh';
   document.body.appendChild(indicator);
 
   document.addEventListener('touchstart', e => {
@@ -700,7 +814,7 @@ viewSearch();
     const diff = e.touches[0].clientY - startY;
     if (diff > 20 && window.scrollY <= 0) {
       indicator.classList.add('visible');
-      indicator.textContent = diff > threshold ? '↑ Release to refresh' : '↓ Pull to refresh';
+      indicator.textContent = diff > threshold ? '\u2191 Release to refresh' : '\u2193 Pull to refresh';
     } else {
       indicator.classList.remove('visible');
     }
@@ -711,11 +825,10 @@ viewSearch();
     pulling = false;
     const diff = e.changedTouches[0].clientY - startY;
     if (diff > threshold && indicator.classList.contains('visible')) {
-      indicator.textContent = 'Refreshing…';
+      indicator.textContent = 'Refreshing\u2026';
       indicator.classList.add('refreshing');
       try {
         await api('/reindex');
-        // If viewing a session detail, refresh it in place
         const backBtn = $('#backBtn');
         if (backBtn && window._currentSessionId) {
           await viewSession(window._currentSessionId);