agentacta 1.4.0 → 1.5.0

package/public/app.js

@@ -3,25 +3,68 @@ const $$ = (s, p = document) => [...p.querySelectorAll(s)];
 const content = $('#content');
 const API = '/api';
 
-const THEME_KEY = 'agentacta-theme';
+const THEME_KEY = 'agentacta-theme'; // legacy
+const THEME_MODE_KEY = 'agentacta-theme-mode'; // system | light | dark
+const THEME_DARK_VARIANT_KEY = 'agentacta-dark-variant'; // default | trueblack
+
+function lsGet(key) {
+  try { return localStorage.getItem(key); } catch { return null; }
+}
+
+function lsSet(key, value) {
+  try { localStorage.setItem(key, value); } catch {}
+}
+
+function resolveTheme(mode, darkVariant) {
+  if (mode === 'light') return 'light';
+  if (mode === 'dark') return darkVariant === 'trueblack' ? 'oled' : 'dark';
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  return prefersDark ? (darkVariant === 'trueblack' ? 'oled' : 'dark') : 'light';
+}
 
 function applyTheme(theme) {
   document.documentElement.setAttribute('data-theme', theme);
   const meta = document.querySelector('meta[name="theme-color"]');
-  if (meta) meta.setAttribute('content', theme === 'light' ? '#f5f7fb' : '#0a0e1a');
+  if (meta) {
+    const color = theme === 'light' ? '#f5f7fb' : (theme === 'oled' ? '#000000' : '#0a0e1a');
+    meta.setAttribute('content', color);
+  }
+}
+
+function applyThemeFromPrefs() {
+  const mode = lsGet(THEME_MODE_KEY) || 'light';
+  const darkVariant = lsGet(THEME_DARK_VARIANT_KEY) || 'default';
+  window._themeMode = mode;
+  window._themeDarkVariant = darkVariant;
+  applyTheme(resolveTheme(mode, darkVariant));
 }
 
 function initTheme() {
-  const saved = localStorage.getItem(THEME_KEY);
-  const theme = saved === 'dark' || saved === 'light' ? saved : 'light';
-  applyTheme(theme);
+  // Migrate legacy key if present.
+  const legacy = lsGet(THEME_KEY);
+  if (!lsGet(THEME_MODE_KEY) && (legacy === 'light' || legacy === 'dark')) {
+    lsSet(THEME_MODE_KEY, legacy);
+  }
+  if (!lsGet(THEME_DARK_VARIANT_KEY)) {
+    lsSet(THEME_DARK_VARIANT_KEY, 'default');
+  }
+  applyThemeFromPrefs();
+
+  if (!window._themeMediaBound) {
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    media.addEventListener?.('change', () => {
+      if ((lsGet(THEME_MODE_KEY) || 'light') === 'system') applyThemeFromPrefs();
+    });
+    window._themeMediaBound = true;
+  }
 }
 
 function toggleTheme() {
-  const current = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
-  const next = current === 'light' ? 'dark' : 'light';
-  localStorage.setItem(THEME_KEY, next);
-  applyTheme(next);
+  const currentApplied = document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
+  const nextMode = currentApplied === 'light' ? 'dark' : 'light';
+  lsSet(THEME_MODE_KEY, nextMode);
+  window._themeMode = nextMode;
+  applyThemeFromPrefs();
 }
 
 async function api(path, options = {}) {
@@ -199,7 +242,8 @@ function updateNavActive(view) {
 }
 
 function handleRoute() {
-  const raw = (window.location.hash || '').slice(1) || 'search';
+  clearJumpUi();
+  const raw = (window.location.hash || '').slice(1) || 'overview';
   if (window._sseCleanup) { window._sseCleanup(); window._sseCleanup = null; }
   if (window._timelineScrollHandler) { window.removeEventListener('scroll', window._timelineScrollHandler); window._timelineScrollHandler = null; }
 
@@ -208,14 +252,15 @@ function handleRoute() {
     if (id) { viewSession(id); return; }
   }
 
-  const view = raw === 'sessions' || raw === 'timeline' || raw === 'files' || raw === 'stats' ? raw : 'search';
+  const normalized = raw === 'search' ? 'overview' : raw;
+  const view = normalized === 'overview' || normalized === 'sessions' || normalized === 'timeline' || normalized === 'files' || normalized === 'stats' ? normalized : 'overview';
   window._lastView = view;
   updateNavActive(view);
-  if (view === 'sessions') viewSessions();
+  if (view === 'overview') viewOverview();
+  else if (view === 'sessions') viewSessions();
   else if (view === 'files') viewFiles();
   else if (view === 'timeline') viewTimeline();
-  else if (view === 'stats') viewStats();
-  else viewSearch(window._lastSearchQuery || '');
+  else viewStats();
 }
 
 window.addEventListener('popstate', () => {
@@ -310,6 +355,56 @@ function normalizeAgentLabel(a) {
   return a;
 }
 
+function clearJumpUi() {
+  const indicator = document.getElementById('jumpIndicator');
+  if (indicator) indicator.remove();
+  const returnBtn = document.getElementById('returnJumpBtn');
+  if (returnBtn) returnBtn.remove();
+}
+
+function cleanSessionSummary(text, fallbackText = '') {
+  const pick = (input) => {
+    const raw = (input || '').trim();
+    if (!raw) return '';
+
+    const jsonFence = /```json[\s\S]*?```/gi;
+    const fences = [...raw.matchAll(jsonFence)];
+    if (fences.length >= 2) {
+      const second = fences[1];
+      const after = raw.slice(second.index + second[0].length).trim();
+      if (after) {
+        const line = after.split(/\r?\n/).map(l => l.trim()).find(Boolean);
+        if (line) return line;
+      }
+    }
+
+    const lines = raw.split(/\r?\n/).map(l => l.trim()).filter(Boolean);
+    const skip = [
+      /^conversation info/i,
+      /^sender/i,
+      /^```/,
+      /^\{/, /^\}/,
+      /^"(message_id|sender_id|sender|timestamp|label|id|name)"/i,
+      /^untrusted metadata/i
+    ];
+
+    let candidate = lines.find(l => !skip.some(rx => rx.test(l)));
+    if (candidate) {
+      candidate = candidate
+        .replace(/^\[cron:[^\]]+\]\s*/i, '')
+        .replace(/^\[heartbeat:[^\]]+\]\s*/i, '')
+        .trim();
+    }
+    if (!candidate || skip.some(rx => rx.test(candidate))) {
+      if (/heartbeat session/i.test(raw)) return 'Heartbeat session';
+      return '';
+    }
+    return candidate;
+  };
+
+  return pick(text) || pick(fallbackText) || 'Session activity';
+}
+
 function isInternalProjectTag(tag) {
   if (!tag) return true;
   if (tag.startsWith('agent:')) return true;
@@ -352,7 +447,7 @@ function renderSessionItem(s) {
           ${renderModelTags(s)}
         </span>
       </div>
-      <div class="session-summary">${escHtml(truncate(s.summary || 'No summary', 120))}</div>
+      <div class="session-summary">${escHtml(truncate(cleanSessionSummary(s.summary, s.initial_prompt), 120))}</div>
       <div class="session-meta">
         <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>
@@ -364,6 +459,7 @@ function renderSessionItem(s) {
 // --- Views ---
 
 async function viewSearch(query = '') {
+  clearJumpUi();
   const typeFilter = window._searchType || '';
   const roleFilter = window._searchRole || '';
 
@@ -414,10 +510,12 @@ async function viewSearch(query = '') {
 
 async function showSearchHome() {
   const el = $('#results');
+  const reqId = (window._searchReqSeq = (window._searchReqSeq || 0) + 1);
   el.innerHTML = `${skeletonRows(4, 'session')}`;
 
   const stats = await api('/stats');
   const sessions = await api('/sessions?limit=5');
+  if (reqId !== window._searchReqSeq) return;
   if (stats._error || sessions._error) {
     el.innerHTML = '<div class="empty"><h2>Unable to load</h2><p>Server unavailable. Pull to refresh or try again.</p></div>';
     return;
@@ -425,6 +523,7 @@ async function showSearchHome() {
 
   let suggestions = [];
   try { const r = await fetch('/api/suggestions'); const d = await r.json(); suggestions = d.suggestions || []; } catch(e) { suggestions = []; }
+  if (reqId !== window._searchReqSeq) return;
 
   let html = `
     <div class="search-stats" style="margin-top:8px">
@@ -463,6 +562,7 @@ async function showSearchHome() {
 
 async function doSearch(q) {
   const el = $('#results');
+  const reqId = (window._searchReqSeq = (window._searchReqSeq || 0) + 1);
   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 = `${skeletonRows(6, 'event')}`;
@@ -474,6 +574,7 @@ async function doSearch(q) {
   if (role) url += `&role=${role}`;
 
   const data = await api(url);
+  if (reqId !== window._searchReqSeq) return;
 
   if (data._error || data.error) { el.innerHTML = `<div class="empty"><p>${escHtml(data.error || 'Server error')}</p></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; }
@@ -508,6 +609,7 @@ async function doSearch(q) {
 }
 
 async function viewSessions() {
+  clearJumpUi();
   window._currentSessionId = null;
   content.innerHTML = `<div class="page-title">Sessions</div>${skeletonRows(4, 'session')}`;
   transitionView();
@@ -528,6 +630,8 @@ async function viewSessions() {
 }
 
 async function viewSession(id) {
+  clearJumpUi();
+  window._recentSessionIds = [id, ...(window._recentSessionIds || []).filter(x => x !== id)].slice(0, 5);
   if (window._sseCleanup) { window._sseCleanup(); window._sseCleanup = null; }
   window._currentSessionId = id;
   setHash('session/' + encodeURIComponent(id));
@@ -621,6 +725,7 @@ async function viewSession(id) {
   }
 
   $('#backBtn').addEventListener('click', () => {
+    clearJumpUi();
     if (window._navDepth > 0) {
       history.back();
     } else {
@@ -671,19 +776,65 @@ async function viewSession(id) {
 
   const jumpBtn = $('#jumpToStartBtn');
   if (jumpBtn) {
-    jumpBtn.addEventListener('click', () => {
-      // Load all remaining events to find the first message
+    jumpBtn.addEventListener('click', async () => {
+      const fromY = window.scrollY || window.pageYOffset || 0;
+
+      jumpBtn.classList.add('jumping');
+      jumpBtn.disabled = true;
+
+      // Let button state paint before heavy DOM work.
+      await new Promise(requestAnimationFrame);
+
+      // Load remaining events in chunks so UI stays responsive.
+      let loops = 0;
       while (rendered < allEvents.length) {
         renderBatch();
+        loops += 1;
+        if (loops % 2 === 0) await new Promise(requestAnimationFrame);
       }
+
       const firstMessage = document.querySelector(`[data-event-id="${s.first_message_id}"]`);
-      if (firstMessage) {
-        firstMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      if (!firstMessage) {
+        jumpBtn.classList.remove('jumping');
+        jumpBtn.disabled = false;
+        return;
+      }
+
+      const targetY = Math.max(0, firstMessage.getBoundingClientRect().top + fromY - (window.innerHeight * 0.35));
+      const distance = Math.abs(targetY - fromY);
+      const useSmooth = distance < 1800;
+
+      window.scrollTo({ top: targetY, behavior: useSmooth ? 'smooth' : 'auto' });
+
+      const doneDelay = useSmooth ? 500 : 120;
+      setTimeout(() => {
         firstMessage.classList.add('event-highlight');
+        setTimeout(() => firstMessage.classList.remove('event-highlight'), 2000);
+
+        jumpBtn.classList.remove('jumping');
+        jumpBtn.disabled = false;
+
+        let returnBtn = document.getElementById('returnJumpBtn');
+        if (!returnBtn) {
+          returnBtn = document.createElement('button');
+          returnBtn.id = 'returnJumpBtn';
+          returnBtn.className = 'return-jump-btn';
+          returnBtn.innerHTML = `<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="M12 19V5"></path><polyline points="5 12 12 5 19 12"></polyline></svg>`;
+          returnBtn.setAttribute('aria-label', 'Back to previous spot');
+          returnBtn.title = 'Back to previous spot';
+          document.body.appendChild(returnBtn);
+        }
+        returnBtn.classList.add('show');
+
+        returnBtn.onclick = () => {
+          window.scrollTo({ top: fromY, behavior: 'smooth' });
+          returnBtn.classList.remove('show');
+        };
+
         setTimeout(() => {
-          firstMessage.classList.remove('event-highlight');
-        }, 2000);
-      }
+          if (returnBtn) returnBtn.classList.remove('show');
+        }, 9000);
+      }, doneDelay);
     });
   }
 
@@ -765,12 +916,13 @@ async function viewSession(id) {
 }
 
 async function viewTimeline(date) {
+  clearJumpUi();
   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';
-  window._timelineState = { date, limit: 100, offset: 0, hasMore: true, loading: false };
+  window._timelineState = { date, limit: 100, offset: 0, hasMore: true, loading: false, seenEventIds: new Set() };
 
   content.innerHTML = `<div class="page-title">Timeline</div>
     <input type="date" class="date-input" id="dateInput" value="${date}">
@@ -797,10 +949,11 @@ async function viewTimeline(date) {
 
     state.hasMore = !!data.hasMore;
     state.offset += (data.events || []).length;
+    (data.events || []).forEach(ev => state.seenEventIds.add(ev.id));
 
     if (!append) {
       if (!data.events.length) {
-        el.innerHTML = '<div class="empty"><h2>No activity</h2><p>Nothing recorded on this day</p></div>';
+        el.innerHTML = `<div class="timeline-events-wrap" id="timelineWrap"><div class="timeline-line"></div><div class="empty" id="timelineEmpty"><h2>No activity</h2><p>Nothing recorded on this day</p></div></div>`;
         return;
       }
       el.innerHTML = `<div class="timeline-events-wrap" id="timelineWrap"><div class="timeline-line"></div>${data.events.map(renderTimelineEvent).join('')}</div>`;
@@ -829,21 +982,35 @@ async function viewTimeline(date) {
   const todayStr = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(today.getDate()).padStart(2,'0')}`;
   if (window._timelineSse) { window._timelineSse.close(); window._timelineSse = null; }
   if (date === todayStr) {
-    const sse = new EventSource(`/api/timeline/stream?after=${encodeURIComponent(new Date().toISOString())}`);
+    const sse = new EventSource(`/api/timeline/stream?after=${encodeURIComponent(new Date().toISOString())}&afterId=`);
     window._timelineSse = sse;
     sse.onmessage = (evt) => {
       try {
         const rows = JSON.parse(evt.data);
-        const wrap = $('#timelineWrap');
-        if (wrap && rows.length) {
-          const html = rows.map(renderTimelineEvent).join('');
-          wrap.insertAdjacentHTML('afterbegin', html);
-          // Flash new events
-          rows.forEach(r => {
-            const el = wrap.querySelector(`[data-event-id="${r.id}"]`);
-            if (el) { el.classList.add('event-highlight'); setTimeout(() => el.classList.remove('event-highlight'), 2000); }
-          });
+        if (!rows.length) return;
+
+        const fresh = rows.filter(r => !state.seenEventIds.has(r.id));
+        if (!fresh.length) return;
+        fresh.forEach(r => state.seenEventIds.add(r.id));
+
+        let wrap = $('#timelineWrap');
+        if (!wrap) {
+          el.innerHTML = `<div class="timeline-events-wrap" id="timelineWrap"><div class="timeline-line"></div></div>`;
+          wrap = $('#timelineWrap');
         }
+
+        const empty = $('#timelineEmpty');
+        if (empty) empty.remove();
+
+        const html = fresh.map(renderTimelineEvent).join('');
+        wrap.insertAdjacentHTML('afterbegin', html);
+        state.offset += fresh.length;
+
+        // Flash new events
+        fresh.forEach(r => {
+          const rowEl = wrap.querySelector(`[data-event-id="${r.id}"]`);
+          if (rowEl) { rowEl.classList.add('event-highlight'); setTimeout(() => rowEl.classList.remove('event-highlight'), 2000); }
+        });
       } catch {}
     };
   }
@@ -854,33 +1021,100 @@ async function viewTimeline(date) {
   });
 }
 
-async function viewStats() {
-  content.innerHTML = `<div class="page-title">Stats</div><div class="stat-grid">${skeletonRows(5, 'stats')}</div>`;
+async function viewOverview() {
+  clearJumpUi();
+  content.innerHTML = `<div class="page-title">Overview</div><div class="stat-grid">${skeletonRows(5, 'stats')}</div>`;
   transitionView();
   const data = await api('/stats');
-  if (data._error) {
+  const sessionsRes = await api('/sessions?limit=30');
+  if (data._error || sessionsRes._error) {
     content.innerHTML = '<div class="empty"><h2>Unable to load</h2><p>Server unavailable. Pull to refresh or try again.</p></div>';
     return;
   }
 
-  let html = `<div class="page-title">Stats</div>
+  const sessions = sessionsRes.sessions || [];
+  const nowMs = Date.now();
+  const ACTIVE_WINDOW_MIN = 15;
+  const activeNow = sessions
+    .filter(s => {
+      const t = s.end_time || s.start_time;
+      if (!t) return false;
+      const ageMin = (nowMs - new Date(t).getTime()) / 60000;
+      return ageMin >= 0 && ageMin <= ACTIVE_WINDOW_MIN;
+    })
+    .slice(0, 4);
+  const activeIds = new Set(activeNow.map(s => s.id));
+  const recentSessions = sessions.filter(s => !activeIds.has(s.id)).slice(0, 6);
+  const uniqueTools = new Set((data.tools || []).filter(t => t).map(t => fmtToolGroup(t)));
+
+  let html = `<div class="page-title">Overview</div>
+
+    <div class="section-label">Key Metrics</div>
     <div class="stat-grid">
       <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">${new Set((data.tools||[]).filter(t=>t).map(t=>fmtToolGroup(t))).size}</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 style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:var(--space-md);margin-bottom:var(--space-md)">
+    <div class="section-label">Active Now (${activeNow.length})</div>
+    ${activeNow.length ? activeNow.map(renderSessionItem).join('') : `<div class="empty" style="margin-bottom:var(--space-xl)"><p>No active sessions right now</p></div>`}
+
+    <div class="section-label">Recent Sessions</div>
+    ${recentSessions.map(renderSessionItem).join('')}
+  `;
+
+  content.innerHTML = html;
+  transitionView();
+  $$('.session-item').forEach(item => item.addEventListener('click', () => viewSession(item.dataset.id)));
+}
+
+async function viewStats() {
+  clearJumpUi();
+  content.innerHTML = `<div class="page-title">Settings</div>${skeletonRows(4, 'session')}`;
+  transitionView();
+  const data = await api('/stats');
+  if (data._error) {
+    content.innerHTML = '<div class="empty"><h2>Unable to load</h2><p>Server unavailable. Pull to refresh or try again.</p></div>';
+    return;
+  }
+
+  const uniqueTools = new Set((data.tools||[]).filter(t=>t).map(t=>fmtToolGroup(t)));
+  const themeMode = lsGet(THEME_MODE_KEY) || 'light';
+  const darkVariant = lsGet(THEME_DARK_VARIANT_KEY) || 'default';
+
+  let html = `<div class="settings-page">
+    <div class="page-title">Settings</div>
+
+    <div class="section-label">System</div>
+    <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:var(--space-md);margin-bottom:var(--space-md)">
       <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" id="dbSizeValue">${escHtml(data.dbSize?.display || 'N/A')}</div></div>
     </div>
-    <div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:var(--space-xl)">
+    <p class="settings-help" style="margin-bottom:var(--space-sm)">Date range: ${fmtDate(data.dateRange?.earliest)} — ${fmtDate(data.dateRange?.latest)}</p>
+    <div class="settings-maintenance">
       <button class="export-btn" id="optimizeDbBtn">Optimize Database</button>
-      <span style="color:var(--text-tertiary);font-size:12px;line-height:1.5">Reclaims unused space and merges pending writes. Safe to run anytime, doesn't delete any data.</span>
-      <span id="optimizeDbStatus" style="color:var(--text-tertiary);font-size:12px"></span>
+      <span id="optimizeDbStatus" class="settings-maintenance-status"></span>
+    </div>
+    <p class="settings-help">Reclaims unused space and merges pending writes. Safe to run anytime, doesn't delete any data.</p>
+
+    <div class="section-label">Appearance</div>
+    <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:var(--space-md);margin-bottom:var(--space-xl)">
+      <div class="config-card">
+        <div class="config-label">Theme Mode</div>
+        <select id="themeModeSelect" class="settings-select">
+          <option value="system" ${themeMode==='system'?'selected':''}>System</option>
+          <option value="light" ${themeMode==='light'?'selected':''}>Light</option>
+          <option value="dark" ${themeMode==='dark'?'selected':''}>Dark</option>
+        </select>
+      </div>
+      <div class="config-card">
+        <div class="config-label">Dark Variant</div>
+        <select id="darkVariantSelect" class="settings-select">
+          <option value="default" ${darkVariant==='default'?'selected':''}>Default</option>
+          <option value="trueblack" ${darkVariant==='trueblack'?'selected':''}>True Black</option>
+        </select>
+      </div>
     </div>
 
     ${data.sessionDirs && data.sessionDirs.length ? (() => {
@@ -912,15 +1146,38 @@ async function viewStats() {
     })() : ''}
 
     ${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(--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="tools-grid">${[...new Set((data.tools||[]).filter(t => t).map(t => fmtToolGroup(t)))].sort().map(t => `<span class="tool-chip">${escHtml(t)}</span>`).join('')}</div>
-  `;
+
+    <div class="section-label">System Info</div>
+    <div id="systemInfoContainer" style="display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:var(--space-md);margin-bottom:var(--space-md)">
+      <div class="config-card"><div class="config-label">Version</div><div class="config-value" id="sysVersion">…</div></div>
+      <div class="config-card"><div class="config-label">Uptime</div><div class="config-value" id="sysUptime">…</div></div>
+      <div class="config-card"><div class="config-label">Indexed Sessions</div><div class="config-value" id="sysSessions">…</div></div>
+      <div class="config-card"><div class="config-label">Node.js</div><div class="config-value" id="sysNode">…</div></div>
+    </div>
+  </div>`;
 
   content.innerHTML = html;
   transitionView();
 
+  const themeModeSelect = $('#themeModeSelect');
+  const darkVariantSelect = $('#darkVariantSelect');
+  if (themeModeSelect) {
+    themeModeSelect.addEventListener('change', () => {
+      lsSet(THEME_MODE_KEY, themeModeSelect.value);
+      window._themeMode = themeModeSelect.value;
+      applyThemeFromPrefs();
+    });
+  }
+  if (darkVariantSelect) {
+    darkVariantSelect.addEventListener('change', () => {
+      lsSet(THEME_DARK_VARIANT_KEY, darkVariantSelect.value);
+      window._themeDarkVariant = darkVariantSelect.value;
+      applyThemeFromPrefs();
+    });
+  }
+
   const optimizeBtn = $('#optimizeDbBtn');
   const optimizeStatus = $('#optimizeDbStatus');
   if (optimizeBtn) {
@@ -938,9 +1195,35 @@ async function viewStats() {
       optimizeBtn.disabled = false;
     });
   }
+
+  // Fetch system info
+  api('/health').then(h => {
+    if (h._error) return;
+    const fmtUptime = (s) => {
+      const d = Math.floor(s / 86400);
+      const hr = Math.floor((s % 86400) / 3600);
+      const m = Math.floor((s % 3600) / 60);
+      if (d > 0) return `${d}d ${hr}h`;
+      if (hr > 0) return `${hr}h ${m}m`;
+      return `${m}m`;
+    };
+    const fmtBytes = (b) => {
+      if (b >= 1024 * 1024) return `${(b / (1024 * 1024)).toFixed(1)} MB`;
+      return `${(b / 1024).toFixed(1)} KB`;
+    };
+    const v = $('#sysVersion');
+    const u = $('#sysUptime');
+    const sc = $('#sysSessions');
+    const n = $('#sysNode');
+    if (v) v.textContent = `v${h.version}`;
+    if (u) u.textContent = fmtUptime(h.uptime);
+    if (sc) sc.textContent = String(h.sessions);
+    if (n) n.textContent = h.node;
+  });
 }
 
 async function viewFiles() {
+  clearJumpUi();
   window._lastView = 'files';
   content.innerHTML = `<div class="page-title">Files</div>${skeletonRows(6, 'file')}`;
   transitionView();
@@ -1112,6 +1395,7 @@ function renderFileItem(f) {
 }
 
 async function viewFileDetail(filePath) {
+  clearJumpUi();
   content.innerHTML = '<div class="loading">Loading</div>';
   const data = await api(`/files/sessions?path=${encodeURIComponent(filePath)}`);
   if (data._error) {
@@ -1138,7 +1422,7 @@ async function viewFileDetail(filePath) {
 // --- Navigation ---
 window._searchType = '';
 window._searchRole = '';
-window._lastView = 'sessions';
+window._lastView = 'overview';
 
 $$('.nav-item').forEach(item => {
   item.addEventListener('click', () => {
@@ -1149,7 +1433,7 @@ $$('.nav-item').forEach(item => {
     window._lastView = view;
     updateNavActive(view);
     setHash(view);
-    if (view === 'search') viewSearch();
+    if (view === 'overview') viewOverview();
     else if (view === 'sessions') viewSessions();
     else if (view === 'files') viewFiles();
     else if (view === 'timeline') viewTimeline();
@@ -1157,9 +1441,259 @@ $$('.nav-item').forEach(item => {
   });
 });
 
+// --- Command Palette (Cmd+K) ---
+window._cmdk = { open: false, index: 0, items: [], scrollY: 0 };
+
+function closeCmdk() {
+  const el = $('#cmdkOverlay');
+  if (el) el.remove();
+
+  document.documentElement.classList.remove('cmdk-open');
+  document.body.classList.remove('cmdk-open');
+
+  window._cmdk.open = false;
+}
+
+function execCmdkItem(i) {
+  const item = window._cmdk.items[i];
+  if (!item) return;
+  closeCmdk();
+  item.action();
+}
+
+function renderCmdkList() {
+  const list = $('#cmdkList');
+  if (!list) return;
+  const { items, index } = window._cmdk;
+  if (!items.length) {
+    list.innerHTML = '<div class="cmdk-empty"><h4>No results</h4>Try a different search term</div>';
+    return;
+  }
+
+  let html = '';
+  let lastGroup = '';
+  items.forEach((item, i) => {
+    if (item.group !== lastGroup) {
+      lastGroup = item.group;
+      html += `<div class="cmdk-group-label">${escHtml(lastGroup)}</div>`;
+    }
+    html += `<button type="button" class="cmdk-item ${i === index ? 'active' : ''}" data-i="${i}">
+      <div class="cmdk-item-body">
+        <div class="cmdk-item-title">${escHtml(item.title)}</div>
+        ${item.sub ? `<div class="cmdk-item-sub">${escHtml(item.sub)}</div>` : ''}
+      </div>
+      ${item.meta ? `<span class="cmdk-item-meta">${escHtml(item.meta)}</span>` : ''}
+    </button>`;
+  });
+  list.innerHTML = html;
+
+  if (!list.dataset.bound) {
+    list.addEventListener('click', (e) => {
+      const btn = e.target.closest('.cmdk-item');
+      if (!btn) return;
+      e.preventDefault();
+      const idx = Number(btn.dataset.i || -1);
+      if (idx >= 0) execCmdkItem(idx);
+    });
+
+    list.addEventListener('pointermove', (e) => {
+      if (e.pointerType && e.pointerType !== 'mouse') return;
+      const btn = e.target.closest('.cmdk-item');
+      if (!btn) return;
+      const idx = Number(btn.dataset.i || -1);
+      if (idx >= 0 && idx !== window._cmdk.index) {
+        window._cmdk.index = idx;
+        renderCmdkList();
+      }
+    });
+
+    list.dataset.bound = '1';
+  }
+
+  // scroll active into view
+  const active = list.querySelector('.cmdk-item.active');
+  if (active) active.scrollIntoView({ block: 'nearest' });
+}
+
+async function loadCmdkResults(query) {
+  const list = $('#cmdkList');
+  if (!list) return;
+  const q = (query || '').trim();
+  if (!q) { loadCmdkHome(); return; }
+
+  list.innerHTML = '<div class="cmdk-loading">Searching\u2026</div>';
+
+  const [searchRes, sessionsRes, filesRes] = await Promise.all([
+    api(`/search?q=${encodeURIComponent(q)}&limit=6`),
+    api('/sessions?limit=20'),
+    api('/files?limit=20')
+  ]);
+
+  const items = [];
+
+  (sessionsRes.sessions || [])
+    .filter(s => cleanSessionSummary(s.summary, s.initial_prompt).toLowerCase().includes(q.toLowerCase()))
+    .slice(0, 3)
+    .forEach(s => items.push({
+      group: 'Sessions',
+      title: truncate(cleanSessionSummary(s.summary, s.initial_prompt), 64),
+      sub: shortSessionId(s.id),
+      meta: fmtTime(s.start_time),
+      action: () => viewSession(s.id)
+    }));
+
+  (filesRes.files || [])
+    .filter(f => f.file_path.toLowerCase().includes(q.toLowerCase()))
+    .slice(0, 2)
+    .forEach(f => items.push({
+      group: 'Files',
+      title: f.file_path.split('/').pop(),
+      sub: f.file_path,
+      meta: `${f.touch_count} touches`,
+      action: () => viewFileDetail(f.file_path)
+    }));
+
+  (searchRes.results || []).slice(0, 4).forEach(r => items.push({
+    group: 'Search Results',
+    title: truncate(r.content || r.tool_args || r.tool_result || '', 66),
+    sub: shortSessionId(r.session_id),
+    meta: fmtTime(r.timestamp),
+    action: () => viewSession(r.session_id)
+  }));
+
+  window._cmdk.items = items;
+  window._cmdk.index = 0;
+  renderCmdkList();
+}
+
+async function loadCmdkHome() {
+  const list = $('#cmdkList');
+  if (!list) return;
+  list.innerHTML = '<div class="cmdk-loading">Loading\u2026</div>';
+
+  const items = [
+    { group: 'Go to', title: 'Sessions', sub: 'Browse all sessions', action: () => { setHash('sessions'); handleRoute(); } },
+    { group: 'Go to', title: 'Timeline', sub: 'Today and historical events', action: () => { setHash('timeline'); handleRoute(); } },
+    { group: 'Go to', title: 'Overview', sub: 'Dashboard summary', action: () => { setHash('overview'); handleRoute(); } },
+    { group: 'Go to', title: 'Files', sub: 'Touched files explorer', action: () => { setHash('files'); handleRoute(); } },
+    { group: 'Go to', title: 'Settings', sub: 'Configuration and maintenance', action: () => { setHash('stats'); handleRoute(); } },
+  ];
+
+  const sessionsRes = await api('/sessions?limit=20');
+
+  const sessionList = sessionsRes.sessions || [];
+  const sessionMap = new Map(sessionList.map(s => [s.id, s]));
+
+  const recentIds = window._recentSessionIds || [];
+  const missingIds = recentIds.filter(id => !sessionMap.has(id));
+  if (missingIds.length) {
+    const fetched = await Promise.all(missingIds.map(id => api(`/sessions/${id}`)));
+    fetched.forEach(r => {
+      if (r && !r._error && r.session) sessionMap.set(r.session.id, r.session);
+    });
+  }
+
+  recentIds.forEach(id => {
+    const s = sessionMap.get(id);
+    if (!s) return;
+    items.push({
+      group: 'Recently Opened',
+      title: truncate(cleanSessionSummary(s.summary, s.initial_prompt), 64),
+      sub: shortSessionId(s.id),
+      meta: fmtTime(s.start_time),
+      action: () => viewSession(s.id)
+    });
+  });
+
+  sessionList.forEach(s => items.push({
+    group: 'Recent Sessions',
+    title: truncate(cleanSessionSummary(s.summary, s.initial_prompt), 64),
+    sub: shortSessionId(s.id),
+    meta: fmtTime(s.start_time),
+    action: () => viewSession(s.id)
+  }));
+
+  window._cmdk.items = items;
+  window._cmdk.index = 0;
+  renderCmdkList();
+}
+
+function openCmdk() {
+  if ($('#cmdkOverlay')) { $('#cmdkInput')?.focus(); return; }
+
+  const overlay = document.createElement('div');
+  overlay.className = 'cmdk-overlay';
+  overlay.id = 'cmdkOverlay';
+  overlay.innerHTML = `<div class="cmdk-dialog" role="dialog" aria-modal="true">
+    <div class="cmdk-input-wrap">
+      <svg width="16" height="16" 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 id="cmdkInput" type="text" placeholder="Search sessions, files, or jump to a view" />
+      <kbd>ESC</kbd>
+    </div>
+    <div class="cmdk-list" id="cmdkList"></div>
+  </div>`;
+  document.body.appendChild(overlay);
+  window._cmdk.open = true;
+
+  const input = $('#cmdkInput');
+  const isMobile = window.matchMedia('(max-width: 768px)').matches;
+
+  document.documentElement.classList.add('cmdk-open');
+  document.body.classList.add('cmdk-open');
+
+  if (isMobile) {
+    // iOS keyboard requires focus in the same user gesture call stack.
+    try {
+      input.focus({ preventScroll: true });
+    } catch {
+      input.focus();
+    }
+    input.setSelectionRange(input.value.length, input.value.length);
+  } else {
+    input.focus();
+  }
+
+  let debounce;
+  input.addEventListener('input', () => {
+    clearTimeout(debounce);
+    debounce = setTimeout(() => loadCmdkResults(input.value), 150);
+  });
+
+  overlay.addEventListener('click', e => { if (e.target === overlay) closeCmdk(); });
+
+  overlay.addEventListener('keydown', e => {
+    if (e.key === 'Escape') { e.preventDefault(); closeCmdk(); return; }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      window._cmdk.index = Math.min(window._cmdk.index + 1, window._cmdk.items.length - 1);
+      renderCmdkList();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      window._cmdk.index = Math.max(window._cmdk.index - 1, 0);
+      renderCmdkList();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      execCmdkItem(window._cmdk.index);
+    }
+  });
+
+  loadCmdkHome();
+}
+
 initTheme();
 document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
 document.getElementById('theme-toggle-mobile')?.addEventListener('click', toggleTheme);
+document.getElementById('cmdkBtn')?.addEventListener('click', () => openCmdk());
+document.getElementById('mobile-search-btn')?.addEventListener('click', () => openCmdk());
+document.addEventListener('keydown', e => {
+  if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+    e.preventDefault();
+    if (window._cmdk.open) closeCmdk();
+    else openCmdk();
+    return;
+  }
+  if (e.key === 'Escape' && window._cmdk.open) { e.preventDefault(); closeCmdk(); }
+});
 handleRoute();
 
 // Swipe right from left edge to go back