Trace analytics on Usage page (turns/tools/web/tokens per agent), quiet loading states, X for sidebar delete, compact files header

server/src/index.js

@@ -14,6 +14,7 @@ import * as groups from './groups.js';
 import * as order from './order.js';
 import { attach, agentInfo, deriveState, stop } from './runner.js';
 import { buildUsage } from './usage.js';
+import { buildTraces } from './traces.js';
 import { startVisibilityWatch, isPublic, visibility } from './visibility.js';
 
 ensureDirs();
@@ -90,6 +91,8 @@ app.get('/api/clis', (_req, res) => res.json(cliCatalog()));
 
 app.get('/api/usage', async (req, res) => res.json(await buildUsage(req.query.debug === '1')));
 
+app.get('/api/traces', async (_req, res) => res.json(await buildTraces()));
+
 const hfToken = () => process.env.HF_TOKEN || process.env.HUGGING_FACE_HUB_TOKEN || process.env.HF_API_TOKEN || null;
 
 // Env var names that existed at build time (baked in by the Dockerfile). Names

server/src/traces.js

@@ -0,0 +1,222 @@
+import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import path from 'node:path';
+import * as store from './sessions.js';
+
+// Workspace-wide trace analytics: parse every Claude transcript and Codex
+// rollout on the Space into per-conversation stats (turns, tool calls, web
+// searches, tokens), attribute them to Agent Manager sessions where possible
+// (Claude: transcript filename == sessionUuid; Codex: pinned codexSessionId),
+// and aggregate the rest as "other".
+//
+// Parsing is memoized per file by (mtime, size), so repeat calls only re-read
+// files that actually changed — important on the bucket mount.
+
+const fileCache = new Map(); // path -> { key, stats }
+let resultMemo = { ts: 0, val: null };
+const TTL = 30_000;
+
+function emptyStats() {
+  return { turns: 0, prompts: 0, toolCalls: 0, tools: {}, web: 0, tokensIn: 0, tokensOut: 0, cacheRead: 0, firstTs: 0, lastTs: 0, files: 0 };
+}
+
+function addTs(st, iso) {
+  const t = Date.parse(iso);
+  if (!t) return;
+  if (!st.firstTs || t < st.firstTs) st.firstTs = t;
+  if (t > st.lastTs) st.lastTs = t;
+}
+
+function mergeInto(a, b) {
+  a.turns += b.turns; a.prompts += b.prompts; a.toolCalls += b.toolCalls; a.web += b.web;
+  a.tokensIn += b.tokensIn; a.tokensOut += b.tokensOut; a.cacheRead += b.cacheRead; a.files += b.files;
+  for (const [k, v] of Object.entries(b.tools)) a.tools[k] = (a.tools[k] || 0) + v;
+  if (b.firstTs && (!a.firstTs || b.firstTs < a.firstTs)) a.firstTs = b.firstTs;
+  if (b.lastTs > a.lastTs) a.lastTs = b.lastTs;
+}
+
+// ---------- Claude transcripts (CLAUDE_CONFIG_DIR/projects/**/<uuid>.jsonl) ----------
+// Multi-block assistant messages repeat the same message.id AND usage across
+// several lines — dedupe both turns/usage (by message id) and tool_use blocks
+// (by block id) or everything double-counts.
+function parseClaude(txt) {
+  const st = emptyStats();
+  st.files = 1;
+  const seenMsg = new Set();
+  const seenTool = new Set();
+  for (const line of txt.split('\n')) {
+    if (!line) continue;
+    let j; try { j = JSON.parse(line); } catch { continue; }
+    if (j.timestamp) addTs(st, j.timestamp);
+    if (j.type === 'assistant' && j.message) {
+      const m = j.message;
+      const id = m.id || `${j.uuid || Math.random()}`;
+      if (!seenMsg.has(id)) {
+        seenMsg.add(id);
+        st.turns++;
+        const u = m.usage;
+        if (u) {
+          st.tokensIn += (u.input_tokens || 0) + (u.cache_creation_input_tokens || 0);
+          st.cacheRead += u.cache_read_input_tokens || 0;
+          st.tokensOut += u.output_tokens || 0;
+          const w = u.server_tool_use;
+          if (w) st.web += (w.web_search_requests || 0) + (w.web_fetch_requests || 0);
+        }
+      }
+      if (Array.isArray(m.content)) {
+        for (const c of m.content) {
+          if (c && c.type === 'tool_use' && !seenTool.has(c.id)) {
+            seenTool.add(c.id);
+            st.toolCalls++;
+            const name = c.name || 'tool';
+            st.tools[name] = (st.tools[name] || 0) + 1;
+            if (/^web(search|fetch)$/i.test(name)) st.web++;
+          }
+        }
+      }
+    } else if (j.type === 'user' && !j.toolUseResult) {
+      st.prompts++;
+    }
+  }
+  return st;
+}
+
+// ---------- Codex rollouts (CODEX_HOME/sessions/**/rollout-*-<uuid>.jsonl) ----------
+function parseCodex(txt) {
+  const st = emptyStats();
+  st.files = 1;
+  let tok = null; // token_count events are cumulative per run — keep the last
+  for (const line of txt.split('\n')) {
+    if (!line) continue;
+    let j; try { j = JSON.parse(line); } catch { continue; }
+    if (j.timestamp) addTs(st, j.timestamp);
+    const p = j.payload || {};
+    if (j.type === 'response_item') {
+      switch (p.type) {
+        case 'message':
+          if (p.role === 'assistant') st.turns++;
+          else if (p.role === 'user') st.prompts++;
+          break;
+        case 'function_call':
+        case 'custom_tool_call':
+        case 'local_shell_call': {
+          st.toolCalls++;
+          const name = p.name || p.type;
+          st.tools[name] = (st.tools[name] || 0) + 1;
+          break;
+        }
+        case 'web_search_call':
+          st.web++;
+          break;
+        default:
+      }
+    } else if (j.type === 'event_msg' && p.type === 'token_count' && p.info && p.info.total_token_usage) {
+      tok = p.info.total_token_usage;
+    }
+  }
+  if (tok) {
+    const cached = tok.cached_input_tokens || 0;
+    st.tokensIn = Math.max(0, (tok.input_tokens || 0) - cached); // align with Claude: fresh input only
+    st.cacheRead = cached;
+    st.tokensOut = tok.output_tokens || 0;
+  }
+  return st;
+}
+
+async function statsFor(p, parser) {
+  let m;
+  try { m = await fsp.stat(p); } catch { return null; }
+  const key = `${m.mtimeMs}:${m.size}`;
+  const c = fileCache.get(p);
+  if (c && c.key === key) return c.stats;
+  let stats;
+  try { stats = parser(await fsp.readFile(p, 'utf8')); } catch { return null; }
+  fileCache.set(p, { key, stats });
+  return stats;
+}
+
+async function claudeFiles() {
+  const home = process.env.HOME || '';
+  const dirs = [process.env.CLAUDE_CONFIG_DIR, path.join(home, '.claude'), path.join(home, '.config', 'claude')]
+    .filter(Boolean).filter((d, i, a) => a.indexOf(d) === i);
+  const out = [];
+  for (const d of dirs) {
+    const proj = path.join(d, 'projects');
+    let projects = [];
+    try { projects = await fsp.readdir(proj, { withFileTypes: true }); } catch { continue; }
+    for (const e of projects) {
+      if (!e.isDirectory()) continue;
+      let files = [];
+      try { files = await fsp.readdir(path.join(proj, e.name)); } catch { continue; }
+      for (const f of files) if (f.endsWith('.jsonl')) out.push(path.join(proj, e.name, f));
+    }
+  }
+  return out;
+}
+
+async function codexFiles() {
+  const home = process.env.CODEX_HOME || path.join(process.env.HOME || '', '.codex');
+  const root = path.join(home, 'sessions');
+  const out = [];
+  const walk = async (dir, depth) => {
+    if (depth > 5) return;
+    let ents = [];
+    try { ents = await fsp.readdir(dir, { withFileTypes: true }); } catch { return; }
+    for (const e of ents) {
+      const p = path.join(dir, e.name);
+      if (e.isDirectory()) await walk(p, depth + 1);
+      else if (e.name.startsWith('rollout-') && e.name.endsWith('.jsonl')) out.push(p);
+    }
+  };
+  await walk(root, 0);
+  return out;
+}
+
+const UUID_RE = /([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})(?:\.jsonl)?$/;
+
+async function build() {
+  const sessions = store.list();
+  const byClaudeUuid = new Map(sessions.filter((s) => s.cli === 'claude' && s.sessionUuid).map((s) => [s.sessionUuid, s]));
+  const byCodexId = new Map(sessions.filter((s) => s.codexSessionId).map((s) => [s.codexSessionId, s]));
+
+  const perSession = new Map(); // session id -> stats
+  const other = emptyStats();
+  const totals = emptyStats();
+
+  const attribute = (session, stats) => {
+    if (!stats) return;
+    mergeInto(totals, stats);
+    if (session) {
+      if (!perSession.has(session.id)) perSession.set(session.id, emptyStats());
+      mergeInto(perSession.get(session.id), stats);
+    } else {
+      mergeInto(other, stats);
+    }
+  };
+
+  for (const p of await claudeFiles()) {
+    const m = path.basename(p).match(UUID_RE);
+    attribute(m ? byClaudeUuid.get(m[1]) : null, await statsFor(p, parseClaude));
+  }
+  for (const p of await codexFiles()) {
+    const m = path.basename(p).match(UUID_RE);
+    attribute(m ? byCodexId.get(m[1]) : null, await statsFor(p, parseCodex));
+  }
+
+  return {
+    sessions: sessions
+      .filter((s) => perSession.has(s.id))
+      .map((s) => ({ id: s.id, name: s.name, cli: s.cli, path: s.path, ...perSession.get(s.id) }))
+      .sort((a, b) => b.lastTs - a.lastTs),
+    other: other.files ? other : null,
+    totals,
+    generatedAt: new Date().toISOString(),
+  };
+}
+
+export function buildTraces() {
+  if (resultMemo.val && Date.now() - resultMemo.ts < TTL) return resultMemo.val;
+  const val = build().catch(() => ({ sessions: [], other: null, totals: emptyStats(), generatedAt: new Date().toISOString() }));
+  resultMemo = { ts: Date.now(), val };
+  return val;
+}

web/src/api.ts

@@ -60,6 +60,16 @@ export interface ProviderUsage {
 export interface Usage { providers: Record<string, ProviderUsage>; generatedAt: string; }
 export const getUsage = (): Promise<Usage> => fetch('/api/usage').then(json);
 
+// ---- trace analytics ----
+export interface TraceStats {
+  turns: number; prompts: number; toolCalls: number; tools: Record<string, number>;
+  web: number; tokensIn: number; tokensOut: number; cacheRead: number;
+  firstTs: number; lastTs: number; files: number;
+}
+export interface SessionTraces extends TraceStats { id: string; name: string; cli: string; path: string | null; }
+export interface Traces { sessions: SessionTraces[]; other: TraceStats | null; totals: TraceStats; generatedAt: string; }
+export const getTraces = (): Promise<Traces> => fetch('/api/traces').then(json);
+
 // ---- files ----
 export interface FileEntry { name: string; dir: boolean; size: number; }
 export interface FileListing { path: string; root: string; entries: FileEntry[]; }

web/src/components/FilesPane.tsx

@@ -139,21 +139,14 @@ export default function FilesPane({
 
   return (
     <div className={`slot${focused ? ' focused' : ''}`} onMouseDown={onFocus}>
+      {/* One compact bar: logo, navigation, upload, close — no title. */}
       <div
-        className={`pane-head${dragId ? ' draggable' : ''}`}
+        className={`pane-head files-head${dragId ? ' draggable' : ''}`}
         draggable={!!dragId}
         onDragStart={dragId ? (e) => { e.dataTransfer.setData('text/plain', dragId); e.dataTransfer.effectAllowed = 'move'; onDragActive?.(true); } : undefined}
         onDragEnd={dragId ? () => onDragActive?.(false) : undefined}
       >
-        <div className="ph-left">
-          <Logo cli="files" size={16} tint="#d99a2b" />
-          <span className="status idle" />
-        </div>
-        <span className="ph-title">{session.name}</span>
-        <button className="mini-btn ph-close" title="Close" onClick={(e) => { e.stopPropagation(); onClose(); }}><CloseGlyph /></button>
-      </div>
-
-      <div className="files-bar">
+        <Logo cli="files" size={16} tint="#d99a2b" />
         <button className="mini-btn" title="Up" disabled={!root} onClick={up}><UpGlyph /></button>
         <div className="crumbs">
           {crumbs.map((c, i) => (
@@ -168,6 +161,7 @@ export default function FilesPane({
           <UploadGlyph /> Upload
           <input type="file" multiple hidden onChange={(e) => { if (e.target.files) upload(e.target.files); e.target.value = ''; }} />
         </label>
+        <button className="mini-btn ph-close" title="Close" onClick={(e) => { e.stopPropagation(); onClose(); }}><CloseGlyph /></button>
       </div>
 
       <div

web/src/components/Sidebar.tsx

@@ -4,7 +4,7 @@ import { STATE_LABEL } from '../types';
 import Logo from './Logo';
 import NewSession from './NewSession';
 import FolderPicker from './FolderPicker';
-import { SlidersGlyph, SunGlyph, MoonGlyph, TrashGlyph, PencilGlyph, StopGlyph } from './icons';
+import { SlidersGlyph, SunGlyph, MoonGlyph, CloseGlyph, PencilGlyph, StopGlyph } from './icons';
 
 type Zone = 'before' | 'after' | 'on';
 
@@ -132,7 +132,7 @@ export default function Sidebar({
         <Logo cli={s.cli} size={11} tint={colorOf[s.cli]} />
         <span className="row-actions">
           {s.running && <button className="mini-btn" title="Stop" onClick={(e) => { e.stopPropagation(); onStopSession(s.id); }}><StopGlyph /></button>}
-          <button className="mini-btn" title="Delete" onClick={(e) => { e.stopPropagation(); onDeleteSession(s.id); }}><TrashGlyph /></button>
+          <button className="mini-btn" title="Delete" onClick={(e) => { e.stopPropagation(); onDeleteSession(s.id); }}><CloseGlyph /></button>
         </span>
       </div>
     );
@@ -167,7 +167,7 @@ export default function Sidebar({
               <span className="count">{g.sessionIds.length}</span>
               <span className="row-actions">
                 <button className="mini-btn" title="Rename" onClick={(e) => { e.stopPropagation(); startEdit(ref, g.name); }}><PencilGlyph /></button>
-                <button className="mini-btn" title="Delete group" onClick={(e) => { e.stopPropagation(); onDeleteGroup(g.id); }}><TrashGlyph /></button>
+                <button className="mini-btn" title="Delete group" onClick={(e) => { e.stopPropagation(); onDeleteGroup(g.id); }}><CloseGlyph /></button>
               </span>
             </>
           )}

web/src/components/UsagePanel.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import * as api from '../api';
-import type { Usage, QuotaWindow } from '../api';
+import type { Usage, QuotaWindow, Traces, TraceStats } from '../api';
+import Logo from './Logo';
 
 const PROVS = [
   { id: 'claude', label: 'Claude Code', color: '#d97757' },
@@ -17,6 +18,16 @@ const resetStr = (s?: number) => {
   if (mins < 60) return `resets in ${mins}m`;
   return `resets in ${Math.floor(mins / 60)}h ${mins % 60}m`;
 };
+const fmtAgo = (ts: number) => {
+  if (!ts) return '—';
+  const m = Math.round((Date.now() - ts) / 60000);
+  if (m < 1) return 'now';
+  if (m < 60) return `${m}m ago`;
+  if (m < 48 * 60) return `${Math.round(m / 60)}h ago`;
+  return `${Math.round(m / 1440)}d ago`;
+};
+const topTools = (tools: Record<string, number>) =>
+  Object.entries(tools).sort((a, b) => b[1] - a[1]).slice(0, 5).map(([k, v]) => `${k} ${v}`).join(' · ');
 
 function Bar({ label, q }: { label: string; q?: QuotaWindow }) {
   if (!q || q.usedPercent == null) return null;
@@ -30,13 +41,36 @@ function Bar({ label, q }: { label: string; q?: QuotaWindow }) {
   );
 }
 
+function TraceRow({ label, cli, path, st, strong }: { label: string; cli?: string; path?: string | null; st: TraceStats; strong?: boolean }) {
+  const cachePct = st.tokensIn + st.cacheRead > 0 ? Math.round((st.cacheRead / (st.tokensIn + st.cacheRead)) * 100) : 0;
+  return (
+    <tr className={strong ? 'tr-total' : undefined}>
+      <td className="tr-agent" title={path || undefined}>
+        {cli && <Logo cli={cli} size={12} />}
+        <span>{label}</span>
+      </td>
+      <td>{st.turns}</td>
+      <td>{st.prompts}</td>
+      <td title={topTools(st.tools) || undefined}>{st.toolCalls}</td>
+      <td>{st.web}</td>
+      <td title={`${cachePct}% served from cache (${fmtTok(st.cacheRead)} cached)`}>{fmtTok(st.tokensIn)}</td>
+      <td>{fmtTok(st.tokensOut)}</td>
+      <td className="tr-when">{fmtAgo(st.lastTs)}</td>
+    </tr>
+  );
+}
+
 export default function UsagePanel() {
   const [u, setU] = useState<Usage | null>(null);
+  const [t, setT] = useState<Traces | null>(null);
   const [err, setErr] = useState(false);
-  useEffect(() => { api.getUsage().then(setU).catch(() => setErr(true)); }, []);
+  useEffect(() => {
+    api.getUsage().then(setU).catch(() => setErr(true));
+    api.getTraces().then(setT).catch(() => {});
+  }, []);
 
-  if (err) return <div className="placeholder"><p>Usage data unavailable (is <span className="mono">ccusage</span> installed?).</p></div>;
-  if (!u) return <div className="placeholder"><p>Loading…</p></div>;
+  if (err) return <div className="usage-msg mono">usage unavailable — is ccusage installed?</div>;
+  if (!u) return <div className="usage-msg mono">reading usage…<span className="et-cursor" /></div>;
 
   return (
     <div className="usage">
@@ -67,6 +101,29 @@ export default function UsagePanel() {
           </div>
         );
       })}
+
+      <h3>Traces</h3>
+      <div className="s-help">
+        Parsed from every Claude Code transcript and Codex rollout stored on this Space —
+        hover the tools count for the breakdown, tokens-in for the cache share.
+      </div>
+      {!t ? (
+        <div className="usage-msg mono">analyzing traces…<span className="et-cursor" /></div>
+      ) : t.totals.files === 0 ? (
+        <div className="usage-msg mono">no traces yet — run a Claude or Codex session.</div>
+      ) : (
+        <table className="traces-table">
+          <thead>
+            <tr><th>agent</th><th>turns</th><th>prompts</th><th>tools</th><th>web</th><th>tok in</th><th>tok out</th><th>last active</th></tr>
+          </thead>
+          <tbody>
+            {t.sessions.map((s) => <TraceRow key={s.id} label={s.name} cli={s.cli} path={s.path} st={s} />)}
+            {t.other && <TraceRow label={`other traces (${t.other.files} files)`} st={t.other} />}
+            <TraceRow label={`total (${t.totals.files} files)`} st={t.totals} strong />
+          </tbody>
+        </table>
+      )}
+
       <div className="s-help">
         Token counts and quota are read from each agent's local logs on the Space. They reflect the state as of that agent's <em>last model call here</em> — running a session updates them; activity outside the Space won't.
       </div>

web/src/styles.css

@@ -308,9 +308,9 @@ body {
 
 .brand-actions { display: flex; gap: 6px; }
 
-/* files pane */
-.files-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel); border-bottom: 1px solid var(--border); font-size: 12px; flex: none; }
-.files-bar .spacer { flex: 1; }
+/* files pane — one compact header bar (logo · nav · upload · close) */
+.pane-head.files-head { display: flex; align-items: center; gap: 7px; }
+.files-head .spacer { flex: 1; }
 .crumbs { display: flex; align-items: center; gap: 1px; overflow: hidden; white-space: nowrap; }
 .crumb { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 12px; padding: 1px 4px; border-radius: var(--r-sm); }
 .crumb:hover { background: var(--panel-2); }
@@ -446,6 +446,20 @@ body {
 
 /* usage page */
 .usage { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
+.usage-msg { color: var(--muted); font-size: 12.5px; padding: 14px 2px; }
+.usage-msg .et-cursor { height: 12px; width: 6px; margin-left: 6px; }
+.usage h3 { margin: 14px 0 0; font-size: 14px; }
+
+/* trace analytics: hairline rows, mono numbers, no card-cage */
+.traces-table { width: 100%; border-collapse: collapse; font-size: 12px; }
+.traces-table th { text-align: right; font-weight: 500; color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 6px 10px; border-bottom: 1px solid var(--border); }
+.traces-table th:first-child { text-align: left; }
+.traces-table td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.traces-table tbody tr:hover { background: var(--panel-2); }
+.traces-table .tr-agent { text-align: left; display: flex; align-items: center; gap: 7px; overflow: hidden; }
+.traces-table .tr-agent span { overflow: hidden; text-overflow: ellipsis; }
+.traces-table .tr-when { color: var(--muted); font-size: 11px; }
+.traces-table .tr-total td { font-weight: 600; border-top: 1px solid var(--border-strong); border-bottom: none; }
 .usage-top { display: flex; align-items: center; gap: 8px; }
 .usage-top .spacer { flex: 1; }
 .usage-top .s-muted { font-size: 12px; }