agentacta 1.3.4 → 2026.3.5

package/public/app.js

@@ -3,10 +3,74 @@ const $$ = (s, p = document) => [...p.querySelectorAll(s)];
 const content = $('#content');
 const API = '/api';
 
-async function api(path) {
+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) {
+    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() {
+  // 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 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 = {}) {
   let res;
   try {
-    res = await fetch(API + path);
+    res = await fetch(API + path, options);
   } catch (err) {
     // Network error (server down, offline, etc.)
     return { _error: true, error: 'Network error' };
@@ -71,6 +135,26 @@ function escHtml(s) {
   return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 }
 
+function fmtToolName(name) {
+  if (!name) return '';
+  // MCP tools: mcp__provider__action → mcp_provider_action
+  const mcp = name.match(/^mcp__(.+?)__(.+)$/);
+  if (mcp) {
+    const provider = mcp[1].replace(/__/g, '_');
+    const action = mcp[2].replace(/__/g, '_');
+    return `mcp_${provider}_${action}`;
+  }
+  return name;
+}
+
+function fmtToolGroup(name) {
+  if (!name) return '';
+  // MCP tools: collapse to mcp_provider (no action)
+  const mcp = name.match(/^mcp__(.+?)__/);
+  if (mcp) return 'mcp_' + mcp[1].replace(/__/g, '_');
+  return name;
+}
+
 function truncate(s, n = 200) {
   if (!s) return '';
   return s.length > n ? s.slice(0, n) + '\u2026' : s;
@@ -95,6 +179,48 @@ function transitionView() {
   content.classList.add('view-enter');
 }
 
+function skeletonLine(width = '100%', height = '12px') {
+  return `<div class="skeleton-line" style="width:${width};height:${height}"></div>`;
+}
+
+function skeletonRows(count = 6, kind = 'event') {
+  if (kind === 'session') {
+    return Array.from({ length: count }).map(() => `
+      <div class="session-item skeleton-card">
+        <div class="skeleton-line" style="width:58%;height:12px"></div>
+        <div class="skeleton-line" style="width:90%;height:14px"></div>
+        <div class="skeleton-line" style="width:72%;height:14px"></div>
+      </div>
+    `).join('');
+  }
+  if (kind === 'stats') {
+    return Array.from({ length: count }).map(() => `
+      <div class="stat-card skeleton-card">
+        <div class="skeleton-line" style="width:44%;height:10px"></div>
+        <div class="skeleton-line" style="width:66%;height:28px;margin-top:8px"></div>
+      </div>
+    `).join('');
+  }
+  if (kind === 'file') {
+    return Array.from({ length: count }).map(() => `
+      <div class="file-item skeleton-card">
+        <div class="skeleton-line" style="width:62%;height:13px"></div>
+        <div class="skeleton-line" style="width:86%;height:12px;margin-top:10px"></div>
+      </div>
+    `).join('');
+  }
+  return Array.from({ length: count }).map(() => `
+    <div class="event-item skeleton-row">
+      <div class="skeleton-line" style="width:72px;height:10px"></div>
+      <div class="skeleton-line" style="width:60px;height:16px"></div>
+      <div class="event-body">
+        <div class="skeleton-line" style="width:82%;height:12px"></div>
+        <div class="skeleton-line" style="width:66%;height:12px;margin-top:8px"></div>
+      </div>
+    </div>
+  `).join('');
+}
+
 // --- Hash routing ---
 window._navDepth = 0;
 
@@ -116,22 +242,25 @@ 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; }
 
   if (raw.startsWith('session/')) {
     const id = decodeURIComponent(raw.slice('session/'.length));
     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', () => {
@@ -144,7 +273,7 @@ function renderEvent(ev) {
   let body = '';
 
   if (ev.type === 'tool_call') {
-    body = `<span class="tool-name">${escHtml(ev.tool_name)}</span>`;
+    body = `<span class="tool-name">${escHtml(fmtToolName(ev.tool_name))}</span>`;
     if (ev.tool_args) {
       try {
         const args = JSON.parse(ev.tool_args);
@@ -154,7 +283,7 @@ function renderEvent(ev) {
       }
     }
   } else if (ev.type === 'tool_result') {
-    body = `<span class="tool-name">\u2192 ${escHtml(ev.tool_name)}</span>`;
+    body = `<span class="tool-name">\u2192 ${escHtml(fmtToolName(ev.tool_name))}</span>`;
     if (ev.content) {
       body += `<div class="tool-args">${escHtml(truncate(ev.content, 500))}</div>`;
     }
@@ -178,7 +307,7 @@ function renderTimelineEvent(ev) {
   let body = '';
 
   if (ev.type === 'tool_call') {
-    body = `<span class="tool-name">${escHtml(ev.tool_name)}</span>`;
+    body = `<span class="tool-name">${escHtml(fmtToolName(ev.tool_name))}</span>`;
     if (ev.tool_args) {
       try {
         const args = JSON.parse(ev.tool_args);
@@ -188,7 +317,7 @@ function renderTimelineEvent(ev) {
       }
     }
   } else if (ev.type === 'tool_result') {
-    body = `<span class="tool-name">\u2192 ${escHtml(ev.tool_name)}</span>`;
+    body = `<span class="tool-name">\u2192 ${escHtml(fmtToolName(ev.tool_name))}</span>`;
     if (ev.content) {
       body += `<div class="tool-args">${escHtml(truncate(ev.content, 500))}</div>`;
     }
@@ -226,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;
@@ -268,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>
@@ -280,6 +459,7 @@ function renderSessionItem(s) {
 // --- Views ---
 
 async function viewSearch(query = '') {
+  clearJumpUi();
   const typeFilter = window._searchType || '';
   const roleFilter = window._searchRole || '';
 
@@ -296,7 +476,12 @@ async function viewSearch(query = '') {
       <span class="filter-chip ${roleFilter==='user'?'active':''}" data-filter="role" data-val="user">User</span>
       <span class="filter-chip ${roleFilter==='assistant'?'active':''}" data-filter="role" data-val="assistant">Assistant</span>
     </div>
-    <div id="results"></div>`;
+    <div id="results">
+      <div class="search-bar skeleton-card" style="margin-top:6px">
+        <div class="skeleton-line" style="height:16px;width:40%"></div>
+      </div>
+      ${skeletonRows(4, 'session')}
+    </div>`;
 
   content.innerHTML = html;
   transitionView();
@@ -325,10 +510,12 @@ async function viewSearch(query = '') {
 
 async function showSearchHome() {
   const el = $('#results');
-  el.innerHTML = '<div class="loading">Loading</div>';
+  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;
@@ -336,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">
@@ -374,9 +562,10 @@ 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 = '<div class="loading">Searching</div>';
+  el.innerHTML = `${skeletonRows(6, 'event')}`;
 
   const type = window._searchType || '';
   const role = window._searchRole || '';
@@ -385,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; }
@@ -402,7 +592,7 @@ async function doSearch(q) {
       <div class="result-meta">
         <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>` : ''}
+        ${r.tool_name ? `<span class="tool-name">${escHtml(fmtToolName(r.tool_name))}</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>
@@ -419,8 +609,10 @@ async function doSearch(q) {
 }
 
 async function viewSessions() {
+  clearJumpUi();
   window._currentSessionId = null;
-  content.innerHTML = '<div class="loading">Loading</div>';
+  content.innerHTML = `<div class="page-title">Sessions</div>${skeletonRows(4, 'session')}`;
+  transitionView();
   const data = await api('/sessions?limit=200');
   if (data._error) {
     content.innerHTML = '<div class="empty"><h2>Unable to load</h2><p>Server unavailable. Pull to refresh or try again.</p></div>';
@@ -438,10 +630,18 @@ 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));
   window.scrollTo(0, 0);
+  content.innerHTML = `
+    <div class="back-btn">← Back</div>
+    <div class="page-title">Session</div>
+    ${skeletonRows(8, 'event')}
+  `;
+  transitionView();
   const data = await api(`/sessions/${id}`);
 
   if (data._error || data.error) { content.innerHTML = `<div class="empty"><h2>${escHtml(data.error || 'Unable to load')}</h2></div>`; return; }
@@ -525,6 +725,7 @@ async function viewSession(id) {
   }
 
   $('#backBtn').addEventListener('click', () => {
+    clearJumpUi();
     if (window._navDepth > 0) {
       history.back();
     } else {
@@ -575,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);
     });
   }
 
@@ -669,58 +916,205 @@ 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, seenEventIds: new Set() };
 
-  let html = `<div class="page-title">Timeline</div>
+  content.innerHTML = `<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>`;
-  content.innerHTML = html;
+    <div id="timelineContent">${skeletonRows(8, 'event')}</div>
+    <div id="timelineLoadMore" class="loading-more" style="display:none">Loading more…</div>`;
   transitionView();
 
-  const data = await api(`/timeline?date=${date}`);
-  if (data._error) {
-    $('#timelineContent').innerHTML = '<div class="empty"><h2>Unable to load</h2><p>Server unavailable. Pull to refresh or try again.</p></div>';
-    return;
-  }
   const el = $('#timelineContent');
+  const state = window._timelineState;
 
-  if (!data.events.length) {
-    el.innerHTML = '<div class="empty"><h2>No activity</h2><p>Nothing recorded on this day</p></div>';
-  } else {
-    el.innerHTML = `<div class="timeline-events-wrap">
-      <div class="timeline-line"></div>
-      ${data.events.map(renderTimelineEvent).join('')}
-    </div>`;
+  async function loadTimelinePage(append = false) {
+    if (state.loading || (!state.hasMore && append)) return;
+    state.loading = true;
+    if (append) $('#timelineLoadMore').style.display = 'block';
+
+    const data = await api(`/timeline?date=${state.date}&limit=${state.limit}&offset=${state.offset}`);
+    state.loading = false;
+    $('#timelineLoadMore').style.display = 'none';
+
+    if (data._error) {
+      if (!append) el.innerHTML = '<div class="empty"><h2>Unable to load</h2><p>Server unavailable. Pull to refresh or try again.</p></div>';
+      return;
+    }
+
+    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="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>`;
+      return;
+    }
+
+    const wrap = $('#timelineWrap');
+    if (wrap) {
+      wrap.insertAdjacentHTML('beforeend', data.events.map(renderTimelineEvent).join(''));
+    }
+  }
+
+  await loadTimelinePage(false);
+
+  if (window._timelineScrollHandler) window.removeEventListener('scroll', window._timelineScrollHandler);
+  window._timelineScrollHandler = () => {
+    const st = window._timelineState;
+    if (!st || st.loading || !st.hasMore) return;
+    const nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 300;
+    if (nearBottom) loadTimelinePage(true);
+  };
+  window.addEventListener('scroll', window._timelineScrollHandler, { passive: true });
+
+  // Live updates via SSE (only for today)
+  const today = new 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())}&afterId=`);
+    window._timelineSse = sse;
+    sse.onmessage = (evt) => {
+      try {
+        const rows = JSON.parse(evt.data);
+        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 {}
+    };
   }
 
-  $('#dateInput').addEventListener('change', e => viewTimeline(e.target.value));
+  $('#dateInput').addEventListener('change', e => {
+    if (window._timelineSse) { window._timelineSse.close(); window._timelineSse = null; }
+    viewTimeline(e.target.value);
+  });
 }
 
-async function viewStats() {
-  content.innerHTML = '<div class="loading">Loading</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">${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 style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:var(--space-md);margin-bottom:var(--space-xl)">
+    <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">${escHtml(data.dbSize?.display || 'N/A')}</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>
+    <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 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 ? (() => {
@@ -752,19 +1146,54 @@ 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">${(data.tools||[]).filter(t => t).sort().map(t => `<span class="tool-chip">${escHtml(t)}</span>`).join('')}</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>`;
 
   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) {
+    optimizeBtn.addEventListener('click', async () => {
+      optimizeBtn.disabled = true;
+      optimizeStatus.textContent = 'Optimizing…';
+      const result = await api('/maintenance', { method: 'POST' });
+      if (result._error || !result.ok) {
+        optimizeStatus.textContent = `Failed: ${result.error || 'Unknown error'}`;
+      } else {
+        optimizeStatus.textContent = `${result.sizeBefore?.display || 'N/A'} → ${result.sizeAfter?.display || 'N/A'}`;
+        const dbSizeValue = $('#dbSizeValue');
+        if (dbSizeValue) dbSizeValue.textContent = result.sizeAfter?.display || 'N/A';
+      }
+      optimizeBtn.disabled = false;
+    });
+  }
 }
 
 async function viewFiles() {
+  clearJumpUi();
   window._lastView = 'files';
-  content.innerHTML = '<div class="loading">Loading</div>';
+  content.innerHTML = `<div class="page-title">Files</div>${skeletonRows(6, 'file')}`;
+  transitionView();
   const data = await api('/files?limit=500');
   if (data._error) {
     content.innerHTML = '<div class="empty"><h2>Unable to load</h2><p>Server unavailable. Pull to refresh or try again.</p></div>';
@@ -933,6 +1362,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) {
@@ -959,16 +1389,18 @@ async function viewFileDetail(filePath) {
 // --- Navigation ---
 window._searchType = '';
 window._searchRole = '';
-window._lastView = 'sessions';
+window._lastView = 'overview';
 
 $$('.nav-item').forEach(item => {
   item.addEventListener('click', () => {
     if (window._sseCleanup) { window._sseCleanup(); window._sseCleanup = null; }
+    if (window._timelineScrollHandler) { window.removeEventListener('scroll', window._timelineScrollHandler); window._timelineScrollHandler = null; }
+    if (window._timelineSse) { window._timelineSse.close(); window._timelineSse = null; }
     const view = item.dataset.view;
     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();
@@ -976,6 +1408,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