pi-tau-web-server 1.0.8

package/src/public/session-sidebar.ts

@@ -0,0 +1,522 @@
+/**
+ * Session Sidebar - Lists sessions grouped by project, handles switching
+ */
+
+export type SidebarSession = {
+  filePath?: string;
+  file?: string;
+  name?: string | null;
+  firstMessage?: string | null;
+  timestamp?: string;
+  sessionName?: string;
+  sessionTimestamp?: string;
+  live?: boolean;
+  tmux?: boolean;
+  [key: string]: unknown;
+};
+
+export type SidebarProject = {
+  path?: string;
+  dirName?: string;
+  sessions?: SidebarSession[];
+  [key: string]: unknown;
+};
+
+type SearchResult = SidebarSession & {
+  project?: string;
+  matches: { snippet?: string }[];
+};
+
+export class SessionSidebar {
+  container: HTMLElement;
+  onSessionSelect: (session: SidebarSession | null, project: SidebarProject | null) => void;
+  activeSessionFile: string | null;
+  projects: SidebarProject[];
+  collapsedProjects: Set<string | undefined>;
+  searchQuery: string;
+  favourites: string[];
+  contextMenu: HTMLElement | null;
+  _searchTimer: ReturnType<typeof setTimeout> | null = null;
+  _searchResults: SearchResult[] | null = null;
+
+  constructor(container: HTMLElement, onSessionSelect: (session: SidebarSession | null, project: SidebarProject | null) => void) {
+    this.container = container;
+    this.onSessionSelect = onSessionSelect;
+    this.activeSessionFile = null;
+    this.projects = [];
+    this.collapsedProjects = new Set();
+    this.searchQuery = '';
+    this.favourites = JSON.parse(localStorage.getItem('tau-favourites') || '[]');
+    this.contextMenu = null;
+
+    // Close context menu on click anywhere
+    document.addEventListener('click', () => this.closeContextMenu());
+    document.addEventListener('contextmenu', (e) => {
+      // Close if right-clicking outside a session item
+      if (!(e.target as Element | null)?.closest('.session-item')) this.closeContextMenu();
+    });
+  }
+
+  saveFavourites() {
+    localStorage.setItem('tau-favourites', JSON.stringify(this.favourites));
+  }
+
+  isFavourite(filePath?: string) {
+    if (!filePath) return false;
+    return this.favourites.includes(filePath);
+  }
+
+  toggleFavourite(filePath?: string) {
+    if (!filePath) return;
+    const idx = this.favourites.indexOf(filePath);
+    if (idx >= 0) {
+      this.favourites.splice(idx, 1);
+    } else {
+      this.favourites.push(filePath);
+    }
+    this.saveFavourites();
+    this.render();
+  }
+
+  async loadSessions() {
+    try {
+      this.container.innerHTML = Array.from({length: 6}, () =>
+        '<div class="session-skeleton"><div class="session-skeleton-title"></div><div class="session-skeleton-meta"></div></div>'
+      ).join('');
+      const res = await fetch('/api/sessions');
+      const data = await res.json();
+      this.projects = data.projects || [];
+      this.render();
+    } catch (error) {
+      console.error('[Sidebar] Failed to load sessions:', error);
+      this.container.innerHTML = '<div class="session-loading">Failed to load sessions</div>';
+    }
+  }
+
+  setSearchQuery(query: string) {
+    this.searchQuery = query.toLowerCase().trim();
+
+    // Clear pending full-text search
+    if (this._searchTimer) clearTimeout(this._searchTimer);
+
+    if (!this.searchQuery) {
+      this._searchResults = null;
+      this.applySearch();
+      return;
+    }
+
+    // Instant: filter titles
+    this.applySearch();
+
+    // Debounced: full-text search (300ms)
+    if (this.searchQuery.length >= 2) {
+      this._searchTimer = setTimeout(() => this.fullTextSearch(this.searchQuery), 300);
+    }
+  }
+
+  async fullTextSearch(query: string) {
+    // Don't search if query changed since debounce
+    if (query !== this.searchQuery) return;
+
+    try {
+      const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
+      const data = await res.json();
+      if (query !== this.searchQuery) return; // stale
+
+      this._searchResults = data.results || [];
+      this.renderSearchResults();
+    } catch (err) {
+      console.error('[Sidebar] Search failed:', err);
+    }
+  }
+
+  renderSearchResults() {
+    if (!this._searchResults || this._searchResults.length === 0) return;
+
+    // Remove previous search results section
+    const existing = this.container.querySelector('.search-results-group');
+    if (existing) existing.remove();
+
+    const group = document.createElement('div');
+    group.className = 'search-results-group';
+
+    const header = document.createElement('div');
+    header.className = 'project-header search-results-header';
+    header.innerHTML = `<span>🔍</span> <span>Message matches</span> <span class="project-count">${this._searchResults.length}</span>`;
+    group.appendChild(header);
+
+    const sessionsDiv = document.createElement('div');
+    sessionsDiv.className = 'project-sessions';
+
+    for (const result of this._searchResults) {
+      const item = document.createElement('div');
+      item.className = 'session-item search-result-item';
+      item.dataset.filePath = result.filePath;
+
+      if (result.filePath === this.activeSessionFile) {
+        item.classList.add('active');
+      }
+
+      const title = result.sessionName || result.firstMessage || 'Untitled';
+      const snippet = result.matches[0]?.snippet || '';
+      const matchCount = result.matches.length;
+      const time = this.formatTime(result.sessionTimestamp);
+
+      item.innerHTML = `
+        <div class="session-title-row">
+          <div class="session-title" title="${this.escapeHtml(title)}">${this.escapeHtml(title)}</div>
+        </div>
+        <div class="search-snippet">${this.highlightMatch(snippet, this.searchQuery)}</div>
+        <div class="session-meta">${time}${matchCount > 1 ? ` · ${matchCount} matches` : ''}</div>
+      `;
+
+      // Find the matching project/session to pass to onSessionSelect
+      item.addEventListener('click', () => {
+        for (const project of this.projects) {
+          const session = project.sessions?.find(s => s.filePath === result.filePath);
+          if (session) {
+            this.onSessionSelect(session, project);
+            return;
+          }
+        }
+        // Session not in loaded list (unlikely) — try switching by path
+        this.onSessionSelect({ filePath: result.filePath, name: result.sessionName }, { path: result.project });
+      });
+
+      sessionsDiv.appendChild(item);
+    }
+
+    group.appendChild(sessionsDiv);
+    // Insert at top of container
+    this.container.insertBefore(group, this.container.firstChild);
+  }
+
+  highlightMatch(text: string, query: string) {
+    if (!query) return this.escapeHtml(text);
+    const escaped = this.escapeHtml(text);
+    const re = new RegExp(`(${query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+    return escaped.replace(re, '<mark>$1</mark>');
+  }
+
+  applySearch() {
+    if (!this.searchQuery) {
+      this.container.querySelectorAll('.session-item').forEach(el => el.classList.remove('hidden'));
+      this.container.querySelectorAll('.project-group').forEach(el => el.style.display = '');
+      const favSection = this.container.querySelector('.favourites-group');
+      if (favSection) favSection.style.display = '';
+      // Remove full-text results
+      const searchGroup = this.container.querySelector('.search-results-group');
+      if (searchGroup) searchGroup.remove();
+      return;
+    }
+
+    // Search favourites section
+    const favSection = this.container.querySelector('.favourites-group');
+    if (favSection) {
+      let hasVisible = false;
+      favSection.querySelectorAll('.session-item').forEach(item => {
+        const title = (item.querySelector('.session-title')?.textContent || '').toLowerCase();
+        const matches = title.includes(this.searchQuery);
+        item.classList.toggle('hidden', !matches);
+        if (matches) hasVisible = true;
+      });
+      favSection.style.display = hasVisible ? '' : 'none';
+    }
+
+    this.container.querySelectorAll('.project-group').forEach(group => {
+      let hasVisible = false;
+      group.querySelectorAll('.session-item').forEach(item => {
+        const title = (item.querySelector('.session-title')?.textContent || '').toLowerCase();
+        const matches = title.includes(this.searchQuery);
+        item.classList.toggle('hidden', !matches);
+        if (matches) hasVisible = true;
+      });
+      group.style.display = hasVisible ? '' : 'none';
+    });
+  }
+
+  setActive(filePath?: string | null) {
+    this.activeSessionFile = filePath ?? null;
+    this.container.querySelectorAll('.session-item').forEach(el => {
+      el.classList.toggle('active', el.dataset.filePath === filePath);
+    });
+  }
+
+  clearActive() {
+    this.activeSessionFile = null;
+    this.container.querySelectorAll('.session-item').forEach(el => el.classList.remove('active'));
+  }
+
+  // ═══════════════════════════════════════
+  // Context Menu
+  // ═══════════════════════════════════════
+
+  showContextMenu(e: MouseEvent, session: SidebarSession, project: SidebarProject, itemEl: HTMLElement) {
+    e.preventDefault();
+    this.closeContextMenu();
+
+    const isFav = this.isFavourite(session.filePath);
+    const menu = document.createElement('div');
+    menu.className = 'session-context-menu';
+
+    const items = [
+      { icon: isFav ? '★' : '☆', label: isFav ? 'Unfavourite' : 'Favourite', action: () => this.toggleFavourite(session.filePath) },
+      { icon: '✎', label: 'Rename', action: () => this.startRename(itemEl, session) },
+      { icon: '📋', label: 'Export HTML', action: () => this.exportSession(session) },
+      { icon: '🗑', label: 'Delete', action: () => this.deleteSession(session, itemEl) },
+    ];
+
+    for (const item of items) {
+      const row = document.createElement('div');
+      row.className = 'context-menu-item';
+      row.innerHTML = `<span class="context-menu-icon">${item.icon}</span>${item.label}`;
+      row.addEventListener('click', (ev) => {
+        ev.stopPropagation();
+        this.closeContextMenu();
+        item.action();
+      });
+      menu.appendChild(row);
+    }
+
+    // Position
+    document.body.appendChild(menu);
+    const rect = menu.getBoundingClientRect();
+    let x = e.clientX;
+    let y = e.clientY;
+    if (x + rect.width > window.innerWidth) x = window.innerWidth - rect.width - 8;
+    if (y + rect.height > window.innerHeight) y = window.innerHeight - rect.height - 8;
+    menu.style.left = `${x}px`;
+    menu.style.top = `${y}px`;
+
+    this.contextMenu = menu;
+  }
+
+  closeContextMenu() {
+    if (this.contextMenu) {
+      this.contextMenu.remove();
+      this.contextMenu = null;
+    }
+  }
+
+  startRename(itemEl: HTMLElement, session: SidebarSession) {
+    const titleEl = itemEl.querySelector('.session-title');
+    if (!titleEl) return;
+    const currentName = titleEl.textContent;
+
+    const input = document.createElement('input');
+    input.className = 'session-rename-input';
+    input.value = currentName;
+    titleEl.replaceWith(input);
+    input.focus();
+    input.select();
+
+    const commit = async () => {
+      const newName = input.value.trim();
+      if (newName && newName !== currentName) {
+        try {
+          await fetch('/api/rpc', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ type: 'set_session_name', name: newName, filePath: session.filePath }),
+          });
+        } catch { /* silent */ }
+      }
+      const newTitle = document.createElement('div');
+      newTitle.className = 'session-title';
+      newTitle.title = newName || currentName;
+      newTitle.textContent = newName || currentName;
+      input.replaceWith(newTitle);
+    };
+
+    input.addEventListener('blur', commit);
+    input.addEventListener('keydown', (ke) => {
+      if (ke.key === 'Enter') { ke.preventDefault(); input.blur(); }
+      if (ke.key === 'Escape') { input.value = currentName; input.blur(); }
+    });
+  }
+
+  async deleteSession(session: SidebarSession, itemEl: HTMLElement) {
+    if (!confirm(`Delete "${session.name || session.firstMessage || 'this session'}"?`)) return;
+    try {
+      const res = await fetch('/api/sessions/delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ filePath: session.filePath }),
+      });
+      if (res.ok) {
+        itemEl.remove();
+        // Remove from favourites if present
+        if (session.filePath) {
+          const favIdx = this.favourites.indexOf(session.filePath);
+          if (favIdx >= 0) {
+            this.favourites.splice(favIdx, 1);
+            this.saveFavourites();
+          }
+        }
+        // If this was the active session, clear it
+        if (session.filePath === this.activeSessionFile) {
+          this.clearActive();
+          if (this.onSessionSelect) this.onSessionSelect(null, null);
+        }
+      }
+    } catch (e) {
+      console.error('[Sidebar] Delete failed:', e);
+    }
+  }
+
+  async exportSession(session: SidebarSession) {
+    try {
+      const data = await (await fetch('/api/rpc', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ type: 'export_html', filePath: session.filePath }),
+      })).json();
+      if (data?.success && data.data?.path) {
+        await fetch('/api/open', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filePath: data.data.path }),
+        });
+      }
+    } catch { /* silent */ }
+  }
+
+  // ═══════════════════════════════════════
+  // Render
+  // ═══════════════════════════════════════
+
+  buildSessionItem(session: SidebarSession, project: SidebarProject) {
+    const item = document.createElement('div');
+    item.className = 'session-item';
+    item.dataset.filePath = session.filePath;
+
+    if (session.filePath === this.activeSessionFile) {
+      item.classList.add('active');
+    }
+
+    const title = session.name || session.firstMessage || 'Empty session';
+    const time = this.formatTime(session.timestamp);
+    const tmuxTag = session.live ? '<span class="session-tag tmux-tag">live</span>' : (session.tmux ? '<span class="session-tag tmux-tag">tmux</span>' : '');
+    const favIcon = this.isFavourite(session.filePath) ? '<span class="session-fav-icon">★</span>' : '';
+
+    item.innerHTML = `
+      <div class="session-title-row">
+        ${favIcon}
+        <div class="session-title" title="${this.escapeHtml(title)}">${this.escapeHtml(title)}</div>
+        ${tmuxTag}
+      </div>
+      <div class="session-meta">${time}</div>
+    `;
+
+    item.addEventListener('click', () => this.onSessionSelect(session, project));
+    item.addEventListener('contextmenu', (e) => this.showContextMenu(e, session, project, item));
+
+    return item;
+  }
+
+  render() {
+    if (this.projects.length === 0) {
+      this.container.innerHTML = '<div class="session-loading">No sessions found</div>';
+      return;
+    }
+
+    this.container.innerHTML = '';
+
+    // Favourites section — collect from all projects
+    const favSessions = [];
+    for (const project of this.projects) {
+      for (const session of project.sessions || []) {
+        if (this.isFavourite(session.filePath)) {
+          favSessions.push({ session, project });
+        }
+      }
+    }
+
+    if (favSessions.length > 0) {
+      const favGroup = document.createElement('div');
+      favGroup.className = 'favourites-group';
+
+      const header = document.createElement('div');
+      header.className = 'project-header favourites-header';
+      header.innerHTML = `<span class="fav-star">★</span> <span>Favourites</span> <span class="project-count">${favSessions.length}</span>`;
+      favGroup.appendChild(header);
+
+      const sessionsDiv = document.createElement('div');
+      sessionsDiv.className = 'project-sessions';
+      for (const { session, project } of favSessions) {
+        sessionsDiv.appendChild(this.buildSessionItem(session, project));
+      }
+      favGroup.appendChild(sessionsDiv);
+      this.container.appendChild(favGroup);
+    }
+
+    // Regular project groups
+    for (const project of this.projects) {
+      const group = document.createElement('div');
+      group.className = 'project-group';
+      const isCollapsed = this.collapsedProjects.has(project.dirName);
+
+      const header = document.createElement('div');
+      header.className = `project-header${isCollapsed ? ' collapsed' : ''}`;
+
+      const pathParts = (project.path || '').split('/').filter(Boolean);
+      const shortPath = pathParts.length > 0 ? pathParts[pathParts.length - 1] : (project.path || '');
+
+      header.innerHTML = `
+        <span class="chevron">▼</span>
+        <span title="${this.escapeHtml(project.path)}">${this.escapeHtml(shortPath)}</span>
+        <span class="project-count">${(project.sessions || []).length}</span>
+      `;
+
+      header.addEventListener('click', () => {
+        if (this.collapsedProjects.has(project.dirName)) {
+          this.collapsedProjects.delete(project.dirName);
+        } else {
+          this.collapsedProjects.add(project.dirName);
+        }
+        header.classList.toggle('collapsed');
+        sessionsDiv.classList.toggle('collapsed');
+      });
+
+      group.appendChild(header);
+
+      const sessionsDiv = document.createElement('div');
+      sessionsDiv.className = `project-sessions${isCollapsed ? ' collapsed' : ''}`;
+
+      for (const session of project.sessions || []) {
+        sessionsDiv.appendChild(this.buildSessionItem(session, project));
+      }
+
+      group.appendChild(sessionsDiv);
+      this.container.appendChild(group);
+    }
+
+    if (this.searchQuery) this.applySearch();
+  }
+
+  formatTime(isoTimestamp?: string) {
+    try {
+      const date = new Date(isoTimestamp || '');
+      const now = new Date();
+      const diffMs = now.getTime() - date.getTime();
+      const diffMins = Math.floor(diffMs / 60000);
+      const diffHours = Math.floor(diffMs / 3600000);
+      const days = Math.floor(diffMs / 86400000);
+
+      if (diffMins < 1) return 'Just now';
+      if (diffMins < 60) return `${diffMins}m ago`;
+      if (diffHours < 24) return `${diffHours}h ago`;
+      if (days === 1) return 'Yesterday';
+      if (days < 7) return date.toLocaleDateString([], { weekday: 'long' });
+      return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+    } catch {
+      return '';
+    }
+  }
+
+  escapeHtml(text: unknown) {
+    const div = document.createElement('div');
+    div.textContent = String(text ?? '');
+    return div.innerHTML;
+  }
+}

package/src/public/session-stats-card.ts

@@ -0,0 +1,176 @@
+/**
+ * Session Stats Card — the popover opened from the header context pill.
+ *
+ * Shows the same numbers pi's TUI status bar shows: context usage, input and
+ * output tokens, cache read, cache hit rate, and session cost. The
+ * authoritative data comes from pi's get_session_stats RPC (via the caller's
+ * fetchStats); when that is unavailable — no live session, a transient fetch
+ * failure, or null contextUsage right after compaction — the card degrades
+ * gracefully to the caller's locally-tracked fallback numbers instead of
+ * showing nothing.
+ */
+
+export type SessionStatsTokens = {
+  input?: number | null;
+  output?: number | null;
+  cacheRead?: number | null;
+  cacheWrite?: number | null;
+  total?: number | null;
+};
+
+export type SessionContextUsage = {
+  tokens?: number | null;
+  contextWindow?: number | null;
+  percent?: number | null;
+};
+
+export type SessionStats = {
+  tokens?: SessionStatsTokens | null;
+  cost?: number | null;
+  contextUsage?: SessionContextUsage | null;
+};
+
+/** Locally-tracked numbers used when authoritative stats are unavailable. */
+export type SessionStatsFallback = {
+  usage: { input?: number; output?: number; cacheRead?: number } | null;
+  cost: number;
+  /** Last known context tokens (fresh input + cache read). 0 = unknown. */
+  contextTokens: number;
+  /** Model context window size. 0 = unknown. */
+  contextWindow: number;
+};
+
+export type SessionStatsCardOptions = {
+  pillEl: HTMLElement;
+  cardEl: HTMLElement;
+  /** Fetch authoritative stats; resolve null when unavailable. */
+  fetchStats: () => Promise<SessionStats | null>;
+  getFallback: () => SessionStatsFallback;
+};
+
+function formatTokens(n: number) {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
+  return String(Math.round(n));
+}
+
+// Small inline icons matching the app's feather-style stroke icons.
+function icon(paths: string) {
+  return `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+}
+
+const ICONS = {
+  input: icon('<line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/>'),
+  output: icon('<line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>'),
+  cacheRead: icon('<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>'),
+  cacheHit: icon('<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/>'),
+};
+
+export function setupSessionStatsCard(options: SessionStatsCardOptions) {
+  const { pillEl, cardEl, fetchStats, getFallback } = options;
+
+  let lastStats: SessionStats | null = null;
+  let refreshSeq = 0;
+
+  function isOpen() {
+    return !cardEl.classList.contains('hidden');
+  }
+
+  function render() {
+    const fallback = getFallback();
+    const tokens = lastStats?.tokens || null;
+
+    const input = typeof tokens?.input === 'number' ? tokens.input : (fallback.usage?.input ?? null);
+    const output = typeof tokens?.output === 'number' ? tokens.output : (fallback.usage?.output ?? null);
+    const cacheRead = typeof tokens?.cacheRead === 'number' ? tokens.cacheRead : (fallback.usage?.cacheRead ?? null);
+    const cost = typeof lastStats?.cost === 'number' ? lastStats.cost : (fallback.cost > 0 ? fallback.cost : null);
+
+    // contextUsage may be absent, and its tokens/percent may be null right
+    // after compaction — fall back to the last locally-known numbers.
+    const cu = lastStats?.contextUsage || null;
+    const ctxWindow = typeof cu?.contextWindow === 'number' && cu.contextWindow > 0
+      ? cu.contextWindow
+      : (fallback.contextWindow > 0 ? fallback.contextWindow : null);
+    const ctxTokens = typeof cu?.tokens === 'number'
+      ? cu.tokens
+      : (fallback.contextTokens > 0 ? fallback.contextTokens : null);
+    let pct = typeof cu?.percent === 'number' ? cu.percent : null;
+    if (pct === null && ctxTokens !== null && ctxWindow) {
+      pct = (ctxTokens / ctxWindow) * 100;
+    }
+
+    const hitDenominator = (input ?? 0) + (cacheRead ?? 0);
+    const hitRate = cacheRead !== null && hitDenominator > 0 ? (cacheRead / hitDenominator) * 100 : null;
+
+    const sections: string[] = [];
+
+    if (pct !== null || (ctxTokens !== null && ctxWindow !== null)) {
+      const detail = ctxTokens !== null && ctxWindow !== null
+        ? `<span class="stats-context-detail">${formatTokens(ctxTokens)} / ${formatTokens(ctxWindow)}</span>`
+        : '';
+      sections.push(`
+        <div class="stats-row">
+          <span class="stats-label">Context</span>
+          <span class="stats-value">${pct !== null ? `${pct.toFixed(1)}%` : '—'}${detail}</span>
+        </div>`);
+    }
+
+    if (input !== null || output !== null || cacheRead !== null) {
+      sections.push(`
+        <div class="stats-row"><span class="stats-label"><span class="stats-icon">${ICONS.input}</span>Input</span><span class="stats-value">${input !== null ? formatTokens(input) : '—'}</span></div>
+        <div class="stats-row"><span class="stats-label"><span class="stats-icon">${ICONS.output}</span>Output</span><span class="stats-value">${output !== null ? formatTokens(output) : '—'}</span></div>
+        <div class="stats-row"><span class="stats-label"><span class="stats-icon">${ICONS.cacheRead}</span>Cache read</span><span class="stats-value">${cacheRead !== null ? formatTokens(cacheRead) : '—'}</span></div>
+        <div class="stats-row"><span class="stats-label"><span class="stats-icon">${ICONS.cacheHit}</span>Cache hit</span><span class="stats-value">${hitRate !== null ? `${hitRate.toFixed(1)}%` : '—'}</span></div>`);
+    }
+
+    if (cost !== null) {
+      sections.push(`
+        <div class="stats-row">
+          <span class="stats-label">Cost</span>
+          <span class="stats-value">$${cost.toFixed(3)} (sub)</span>
+        </div>`);
+    }
+
+    cardEl.innerHTML = sections.length
+      ? sections.join('<div class="stats-sep"></div>')
+      : '<div class="stats-empty">No usage data yet</div>';
+  }
+
+  // Re-fetch authoritative stats; re-render the card if it is showing.
+  // Refreshes can overlap (turn end, snapshot load, card open, session
+  // switch), so each carries a sequence number and only the newest one is
+  // allowed to write — a slow stale response must never clobber fresh stats.
+  async function refresh() {
+    const seq = ++refreshSeq;
+    const stats = await fetchStats();
+    if (seq !== refreshSeq) return;
+    lastStats = stats;
+    if (isOpen()) render();
+  }
+
+  async function open() {
+    render(); // show cached/fallback numbers immediately
+    cardEl.classList.remove('hidden');
+    pillEl.setAttribute('aria-expanded', 'true');
+    await refresh();
+  }
+
+  function close() {
+    cardEl.classList.add('hidden');
+    pillEl.setAttribute('aria-expanded', 'false');
+  }
+
+  pillEl.addEventListener('click', (e) => {
+    e.stopPropagation();
+    if (isOpen()) close();
+    else void open();
+  });
+
+  document.addEventListener('click', (e) => {
+    if (isOpen() && !cardEl.contains(e.target as Node) && !pillEl.contains(e.target as Node)) {
+      close();
+    }
+  });
+
+  return { refresh, close, isOpen };
+}