argus-code 0.3.1__tar.gz → 0.4.0__tar.gz

{argus_code-0.3.1 → argus_code-0.4.0}/.gitignore

@@ -11,6 +11,9 @@ coverage/
 # Personal planning notes — kept local, not published
 docs/
 
+# Brainstorming visual-companion mockups
+.superpowers/
+
 # Python build / virtualenv / cache artifacts
 __pycache__/
 *.py[cod]

{argus_code-0.3.1 → argus_code-0.4.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: argus-code
-Version: 0.3.1
+Version: 0.4.0
 Summary: Local-first dashboard for Claude Code cost, token, tool-usage, and full-text search analytics
 Project-URL: Homepage, https://github.com/KrishBhimani/argus-code
 Project-URL: Repository, https://github.com/KrishBhimani/argus-code.git
@@ -79,7 +79,7 @@ ingest finishes (~5–10s for a typical install).
 | Page | What it answers |
 |---|---|
 | **Overview** | How many tokens have I burned? How much would I have paid on the API? Where does my spend land each day? Plus a **"What needs attention"** card that surfaces detector findings (e.g. a tool whose error rate spiked this week). |
-| **Sessions** | Sortable table of every session — project, model, tokens, cost, duration. Click any row to drill in. |
+| **Sessions** | Sortable table of every session — project, model, tokens, cost, duration. Click any row to drill in: an **Overview** tab with totals and the turns table, and a **Timeline** tab showing per-turn token burn (chart + trace feed), every tool call, and failures — with the actual error output inline when search indexing is on. |
 | **Tools** | Tool-call leaderboard (Bash vs Edit vs Read vs WebFetch…), error rates per tool, MCP server breakdown, sub-agent invocations. |
 | **Search** *(opt-in)* | Full-text search over every prompt you've typed AND every assistant response, your replies, and tool output. SQLite FTS5, sub-millisecond, no embeddings. |
 | **Trends** | Tokens and cost bucketed by day / week / month, grouped by model. |

{argus_code-0.3.1 → argus_code-0.4.0}/README.md

@@ -27,7 +27,7 @@ ingest finishes (~5–10s for a typical install).
 | Page | What it answers |
 |---|---|
 | **Overview** | How many tokens have I burned? How much would I have paid on the API? Where does my spend land each day? Plus a **"What needs attention"** card that surfaces detector findings (e.g. a tool whose error rate spiked this week). |
-| **Sessions** | Sortable table of every session — project, model, tokens, cost, duration. Click any row to drill in. |
+| **Sessions** | Sortable table of every session — project, model, tokens, cost, duration. Click any row to drill in: an **Overview** tab with totals and the turns table, and a **Timeline** tab showing per-turn token burn (chart + trace feed), every tool call, and failures — with the actual error output inline when search indexing is on. |
 | **Tools** | Tool-call leaderboard (Bash vs Edit vs Read vs WebFetch…), error rates per tool, MCP server breakdown, sub-agent invocations. |
 | **Search** *(opt-in)* | Full-text search over every prompt you've typed AND every assistant response, your replies, and tool output. SQLite FTS5, sub-millisecond, no embeddings. |
 | **Trends** | Tokens and cost bucketed by day / week / month, grouped by model. |

argus_code-0.4.0/dashboard/src/pages/session.astro

@@ -0,0 +1,479 @@
+---
+import Default from '../layouts/Default.astro';
+---
+<Default title="Argus — Session">
+  <p style="margin:0 0 1rem;"><a href="/sessions">← All sessions</a></p>
+  <div class="sd-tabs">
+    <button id="tab-btn-overview" class="sd-tab active" type="button">Overview</button>
+    <button id="tab-btn-timeline" class="sd-tab" type="button">Timeline</button>
+  </div>
+  <div id="content">
+    <div class="card"><div class="skel" style="width:60%;height:1.5em;"></div></div>
+  </div>
+  <div id="timeline-content" style="display:none;">
+    <div class="card"><div class="skel" style="width:60%;height:1.5em;"></div></div>
+  </div>
+  <button id="to-top" type="button" title="Back to top">↑</button>
+
+  <!--
+    is:global so the styles apply to the result list we render via innerHTML
+    (Astro's component-scoped styles wouldn't reach those nodes). Class
+    names are namespaced (sd-…) to keep them out of the global pool.
+  -->
+  <style is:global>
+    .sd-seg-card {
+      background: var(--bg-1);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 0.75rem 1rem;
+      margin-bottom: 0.55rem;
+    }
+    .sd-seg-meta {
+      font-size: 0.74rem;
+      color: var(--text-2);
+      margin-bottom: 0.3rem;
+    }
+    .sd-seg-snippet {
+      font-size: 0.88rem;
+      color: var(--text-0);
+      white-space: pre-wrap;
+      word-break: break-word;
+      line-height: 1.4;
+      overflow-wrap: anywhere;
+    }
+    .sd-seg-snippet mark {
+      background: rgba(240, 136, 62, 0.28);
+      color: var(--text-0);
+      padding: 0 1px;
+      border-radius: 2px;
+    }
+    .sd-role-pill {
+      display: inline-block;
+      padding: 0.05em 0.55em;
+      border-radius: 4px;
+      font-size: 0.7rem;
+      font-weight: 500;
+    }
+    .sd-role-pill.role-user        { background: rgba(126,231,135,0.16); color: var(--good); }
+    .sd-role-pill.role-assistant   { background: rgba(88,166,255,0.16); color: var(--codex); }
+    .sd-role-pill.role-thinking    { background: rgba(188,140,255,0.16); color: #bc8cff; }
+    .sd-role-pill.role-tool_result { background: var(--bg-2); color: var(--text-2); }
+    .sd-tabs {
+      display: flex; gap: 0.4rem; margin-bottom: 1rem;
+      border-bottom: 1px solid var(--border);
+    }
+    .sd-tab {
+      background: none; border: none; border-bottom: 2px solid transparent;
+      color: var(--text-2); font: inherit; font-size: 0.9rem;
+      padding: 0.4rem 0.9rem; cursor: pointer;
+    }
+    .sd-tab.active { color: var(--text-0); border-bottom-color: var(--accent, #f0883e); }
+    .sd-turn-hdr {
+      display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem;
+      font-size: 0.85rem; margin-bottom: 0.4rem;
+    }
+    .sd-tool-row {
+      padding: 0.15rem 0 0.15rem 1.2rem; font-size: 0.84rem; color: var(--text-1);
+    }
+    .sd-tool-row .ok { color: var(--good); }
+    .sd-tool-row .fail { color: #f85149; font-weight: 600; }
+    .sd-tool-size { color: var(--text-2); font-size: 0.76rem; margin-left: 0.4rem; }
+    .sd-chip {
+      display: inline-block; background: rgba(188,140,255,0.16); color: #bc8cff;
+      border-radius: 4px; font-size: 0.7rem; padding: 0.05em 0.5em; margin-left: 0.4rem;
+    }
+    .sd-err-box {
+      margin: 0.25rem 0 0.5rem 1.2rem; background: rgba(248,81,73,0.08);
+      border: 1px solid rgba(248,81,73,0.4); border-radius: 4px;
+      padding: 0.35rem 0.6rem; font-size: 0.8rem; color: #f85149;
+    }
+    .sd-err-box pre {
+      margin: 0.4rem 0 0; white-space: pre-wrap; word-break: break-word;
+      color: var(--text-1); font-size: 0.78rem;
+    }
+    .sd-err-box summary { cursor: pointer; }
+    .sd-err-hint {
+      margin: 0.25rem 0 0.5rem 1.2rem; font-size: 0.78rem;
+      color: var(--text-2); font-style: italic;
+    }
+    .sd-no-tools { padding-left: 1.2rem; font-size: 0.8rem; color: var(--text-2); font-style: italic; }
+    .tl-expandable { cursor: pointer; }
+    .tl-expandable:hover b { color: var(--accent, #f0883e); }
+    .sd-out-box {
+      margin: 0.25rem 0 0.5rem 1.2rem; background: var(--bg-2);
+      border: 1px solid var(--border); border-radius: 4px;
+      padding: 0.35rem 0.6rem; font-size: 0.78rem; color: var(--text-2);
+    }
+    .sd-out-box pre {
+      margin: 0; white-space: pre-wrap; word-break: break-word;
+      color: var(--text-1); max-height: 280px; overflow: auto;
+    }
+    #to-top {
+      position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 50;
+      width: 40px; height: 40px; border-radius: 50%;
+      background: var(--bg-1); color: var(--text-1);
+      border: 1px solid var(--border); font-size: 1.1rem; cursor: pointer;
+      display: none; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+    }
+    #to-top:hover { color: var(--text-0); border-color: var(--accent, #f0883e); }
+  </style>
+
+  <script>
+    import { api, type Turn, type TimelineTurn } from '../scripts/api';
+    import { turnTokensBar } from '../scripts/charts';
+    import { usd, tok, num, dur, escapeHtml } from '../scripts/format';
+
+    const TZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const TZ_ABBREV = (() => {
+      const d = new Date();
+      const m = d.toLocaleTimeString('en-US', { timeZoneName: 'short' }).match(/[A-Z]{2,5}$/);
+      return m ? m[0] : '';
+    })();
+
+    const fmtLocalDateTime = (iso: string) => {
+      if (!iso) return '—';
+      return new Date(iso).toLocaleString([], {
+        year: 'numeric', month: '2-digit', day: '2-digit',
+        hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false,
+      });
+    };
+    const fmtLocalTime = (iso: string) => {
+      if (!iso) return '—';
+      return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
+    };
+
+    function safeSnippet(s: string): string {
+      const open = '\x00MK_OPEN\x00';
+      const close = '\x00MK_CLOSE\x00';
+      const stripped = s.replace(/<mark>/g, open).replace(/<\/mark>/g, close);
+      return escapeHtml(stripped).replace(new RegExp(open, 'g'), '<mark>').replace(new RegExp(close, 'g'), '</mark>');
+    }
+    function roleLabel(role: string): string {
+      switch (role) {
+        case 'user':        return 'you said';
+        case 'assistant':   return 'claude said';
+        case 'thinking':    return 'claude thinking';
+        case 'tool_result': return 'tool output';
+        default:            return role;
+      }
+    }
+
+    const params = new URLSearchParams(location.search);
+    const id = params.get('id');
+    const initialQ = params.get('q') ?? '';
+    const root = document.getElementById('content')!;
+    if (!id) { root.innerHTML = '<p class="empty">No session id.</p>'; }
+    else {
+      api.session(id).then(d => {
+        if (!d) { root.innerHTML = '<p class="empty">Session not found.</p>'; return; }
+        const { session: s, turns } = d;
+        const totalTokens = s.total_fresh_input_tokens + s.total_output_tokens + s.total_cache_read_tokens + s.total_cache_write_tokens;
+        const subAgents = (s.metadata as any)?.sub_agent_session_ids as string[] | undefined;
+        const reportedDelta = s.agent_reported_cost_usd != null
+          ? `<span style="color:var(--text-2);font-size:0.8rem;"> (agent reported: ${usd(s.agent_reported_cost_usd)})</span>` : '';
+
+        root.innerHTML = `
+          <div class="grid-cards" style="margin-bottom:1.2rem;">
+            <div class="card kpi"><span class="kpi-label">Tokens</span><span class="kpi-value tokens">${tok(totalTokens)}</span><span class="kpi-sub">${num(totalTokens)} total${subAgents?.length ? ` · incl. ${subAgents.length} sub-agent${subAgents.length === 1 ? '' : 's'}` : ''}</span></div>
+            <div class="card kpi"><span class="kpi-label">Cost <span style="color:var(--text-2);font-weight:400;">(est.)</span></span><span class="kpi-value cost">~${usd(s.total_cost_usd)}</span><span class="kpi-sub">${reportedDelta}</span></div>
+            <div class="card kpi"><span class="kpi-label">Turns</span><span class="kpi-value">${num(s.turn_count)}</span><span class="kpi-sub">${turns.length} loaded</span></div>
+            <div class="card kpi"><span class="kpi-label">Duration</span><span class="kpi-value">${dur(s.duration_sec)}</span><span class="kpi-sub">started ${fmtLocalDateTime(s.started_at)}</span></div>
+          </div>
+
+          <div class="card" style="margin-bottom:1rem;">
+            <h3>Session</h3>
+            <table style="border:none;">
+              <tbody>
+                <tr><td style="width:25%;color:var(--text-2);">Claude Code</td><td><code>${escapeHtml(s.agent_version ?? '—')}</code></td></tr>
+                <tr><td style="color:var(--text-2);">Project</td><td class="mono">${escapeHtml(s.project_path || '—')}</td></tr>
+                <tr><td style="color:var(--text-2);">Primary model</td><td><code>${escapeHtml(s.primary_model)}</code></td></tr>
+                <tr><td style="color:var(--text-2);">Started</td><td>${fmtLocalDateTime(s.started_at)} <span style="color:var(--text-2);font-size:0.8rem;">${escapeHtml(TZ_ABBREV)} (${escapeHtml(TZ)})</span></td></tr>
+                <tr><td style="color:var(--text-2);">Ended</td><td>${s.ended_at ? fmtLocalDateTime(s.ended_at) : '<span style="color:var(--text-2);">— still active</span>'}</td></tr>
+                <tr><td style="color:var(--text-2);">Fresh input</td><td>${num(s.total_fresh_input_tokens)} tokens</td></tr>
+                <tr><td style="color:var(--text-2);">Output</td><td>${num(s.total_output_tokens)} tokens</td></tr>
+                <tr><td style="color:var(--text-2);">Cache writes</td><td>${num(s.total_cache_write_tokens)} tokens</td></tr>
+                <tr><td style="color:var(--text-2);">Cache reads</td><td>${num(s.total_cache_read_tokens)} tokens</td></tr>
+                <tr><td style="color:var(--text-2);">Pricing version</td><td><code>${escapeHtml(s.pricing_table_version)}</code></td></tr>
+                <tr><td style="color:var(--text-2);">Session id</td><td class="mono" style="word-break:break-all;">${escapeHtml(s.id)}</td></tr>
+              </tbody>
+            </table>
+          </div>
+
+          ${subAgents?.length ? `
+          <div class="card" style="margin-bottom:1rem;">
+            <h3>Sub-agents (${subAgents.length})</h3>
+            <ul style="margin:0;padding-left:1.2rem;color:var(--text-1);font-size:0.88rem;">
+              ${subAgents.map(id => `<li><a href="/session?id=${encodeURIComponent(id)}" class="mono">${escapeHtml(id)}</a></li>`).join('')}
+            </ul>
+          </div>` : ''}
+
+          <div class="card" style="margin-bottom:1rem;">
+            <div style="display:flex;gap:0.6rem;align-items:center;flex-wrap:wrap;">
+              <h3 style="margin:0;flex-shrink:0;">Search this session</h3>
+              <input id="seg-q" type="text" placeholder="Find text in this session…"
+                style="flex:1;min-width:200px;background:var(--bg-2);color:var(--text-0);
+                       border:1px solid var(--border);border-radius:6px;padding:0.4rem 0.7rem;
+                       font-size:0.9rem;font-family:inherit;outline:none;" />
+              <span id="seg-count" style="color:var(--text-2);font-size:0.8rem;"></span>
+            </div>
+            <div id="seg-results" style="margin-top:0.8rem;"></div>
+          </div>
+
+          <div class="card">
+            <div style="display:flex;justify-content:space-between;align-items:baseline;">
+              <h3 style="margin:0;">Turns timeline</h3>
+              <span style="color:var(--text-2);font-size:0.75rem;">times in ${TZ_ABBREV} (${TZ})</span>
+            </div>
+            ${turns.length ? `
+            <table style="margin-top:0.8rem;">
+              <thead>
+                <tr>
+                  <th class="num">#</th><th>Time</th><th>Model</th>
+                  <th class="num">Fresh in</th><th class="num">Cache read</th><th class="num">Cache write</th>
+                  <th class="num">Output</th><th class="num">Tools</th><th class="num">Cost <span class="est">(est.)</span></th>
+                </tr>
+              </thead>
+              <tbody>
+                ${turns.map((t: Turn) => `
+                  <tr>
+                    <td class="num">${t.sequence}</td>
+                    <td>${fmtLocalTime(t.timestamp)}</td>
+                    <td><code>${escapeHtml(t.model)}</code></td>
+                    <td class="num tok">${num(t.fresh_input_tokens)}</td>
+                    <td class="num tok">${num(t.cache_read_tokens)}</td>
+                    <td class="num tok">${num(t.cache_write_tokens)}</td>
+                    <td class="num tok">${num(t.output_tokens)}</td>
+                    <td class="num">${t.tool_calls_count}</td>
+                    <td class="num cost">~${usd(t.cost_usd)}</td>
+                  </tr>`).join('')}
+              </tbody>
+            </table>` : '<p class="empty">No turns recorded for this session.</p>'}
+          </div>
+        `;
+
+        // Wire the per-session search box
+        const segQ = document.getElementById('seg-q') as HTMLInputElement;
+        const segResults = document.getElementById('seg-results')!;
+        const segCount = document.getElementById('seg-count')!;
+        let debTimer: any;
+
+        async function runSegSearch() {
+          const q = segQ.value.trim();
+          if (!q) {
+            segResults.innerHTML = '';
+            segCount.textContent = '';
+            return;
+          }
+          try {
+            const r = await api.sessionTranscriptSearch(id!, q, 200);
+            segCount.textContent = `${r.total} match${r.total === 1 ? '' : 'es'}`;
+            if (r.segments.length === 0) {
+              segResults.innerHTML = '<p class="empty" style="margin:0.5rem 0;">No matches in this session.</p>';
+              return;
+            }
+            // Sort chronologically so the user can read in conversation order
+            const sorted = r.segments.slice().sort((a, b) =>
+              Date.parse(a.timestamp) - Date.parse(b.timestamp));
+            segResults.innerHTML = sorted.map(s => `
+              <div class="sd-seg-card">
+                <div class="sd-seg-meta">
+                  <span class="sd-role-pill role-${s.role}">${roleLabel(s.role)}</span>
+                  <span style="margin-left:0.5rem;">${fmtLocalTime(s.timestamp)}</span>
+                </div>
+                <div class="sd-seg-snippet">${safeSnippet(s.snippet)}</div>
+              </div>
+            `).join('');
+          } catch {
+            segResults.innerHTML = '<p class="empty">Search failed.</p>';
+          }
+        }
+
+        segQ.addEventListener('input', () => {
+          clearTimeout(debTimer);
+          debTimer = setTimeout(runSegSearch, 150);
+        });
+
+        // Auto-run if a query came from the URL (?q=…)
+        if (initialQ) {
+          segQ.value = initialQ;
+          runSegSearch();
+        }
+      });
+
+      // ─── Tabs ───────────────────────────────────────────────────────
+      const overviewPane = document.getElementById('content')!;
+      const timelinePane = document.getElementById('timeline-content')!;
+      const btnOverview = document.getElementById('tab-btn-overview')!;
+      const btnTimeline = document.getElementById('tab-btn-timeline')!;
+      let timelineLoaded = false;
+
+      function showTab(tab: 'overview' | 'timeline') {
+        const onOverview = tab === 'overview';
+        overviewPane.style.display = onOverview ? '' : 'none';
+        timelinePane.style.display = onOverview ? 'none' : '';
+        btnOverview.classList.toggle('active', onOverview);
+        btnTimeline.classList.toggle('active', !onOverview);
+        if (!onOverview && !timelineLoaded) {
+          timelineLoaded = true;
+          loadTimeline();
+        }
+      }
+      btnOverview.addEventListener('click', () => showTab('overview'));
+      btnTimeline.addEventListener('click', () => showTab('timeline'));
+
+      // ─── Timeline tab ───────────────────────────────────────────────
+      // "Burn" = tokens this turn actually generated/consumed at full rate.
+      // Cache reads are the rolling context window — monotonically growing
+      // and 20-50x larger, they'd drown the signal if charted directly.
+      const turnBurn = (t: TimelineTurn) =>
+        t.fresh_input_tokens + t.output_tokens;
+
+      function toolRow(c: TimelineTurn['tool_calls'][number], searchEnabled: boolean): string {
+        const status = c.is_error
+          ? '<span class="fail">✗ failed</span>'
+          : '<span class="ok">✓</span>';
+        const chip = c.subagent_type
+          ? `<span class="sd-chip">${escapeHtml(c.subagent_type)}</span>` : '';
+        const size = `<span class="sd-tool-size">${(c.input_size / 1024).toFixed(1)} KB</span>`;
+        let errDetail = '';
+        if (c.is_error) {
+          if (c.error_text) {
+            const text = c.error_text;
+            const head = text.length > 200 ? text.slice(0, 200) + '…' : text;
+            errDetail = text.length > 200
+              ? `<details class="sd-err-box"><summary>${escapeHtml(head)}</summary><pre>${escapeHtml(text)}</pre></details>`
+              : `<div class="sd-err-box">${escapeHtml(text)}</div>`;
+          } else {
+            errDetail = `<div class="sd-err-hint">${searchEnabled
+              ? 'error output not indexed yet — restart argus (or argusd) and reload'
+              : 'enable search indexing in Settings to see error output'}</div>`;
+          }
+        }
+        // Rows without an inline error box expand on click to show the
+        // call's indexed output.
+        const expandable = !c.is_error;
+        const attrs = expandable
+          ? ` tl-expandable" data-tu="${escapeHtml(c.tool_use_id)}" title="click to show output`
+          : '';
+        return `<div class="sd-tool-row${attrs}">▸ <b>${escapeHtml(c.tool_name)}</b>${chip}${size} ${status}</div>${errDetail}`;
+      }
+
+      async function loadTimeline() {
+        const d = await api.sessionTimeline(id!);
+        if (!d) {
+          timelinePane.innerHTML = '<p class="empty">Timeline unavailable.</p>';
+          return;
+        }
+        if (d.turns.length === 0) {
+          timelinePane.innerHTML = '<p class="empty">No turns recorded for this session.</p>';
+          return;
+        }
+        const cardHtml = (t: TimelineTurn) => `
+            <div class="card tl-turn" data-fail="${t.tool_calls.some(c => c.is_error === 1) ? 1 : 0}" id="tl-turn-${t.sequence}" style="margin-bottom:0.6rem;">
+              <div class="sd-turn-hdr">
+                <span>#${t.sequence} · ${fmtLocalTime(t.timestamp)} · <code>${escapeHtml(t.model)}</code></span>
+                <span><span class="tok">${tok(turnBurn(t))} tok</span> <span style="color:var(--text-2);font-size:0.78rem;">· ${tok(t.cache_read_tokens)} cache read</span> · <span class="cost">~${usd(t.cost_usd)}</span></span>
+              </div>
+              ${t.tool_calls.length
+                ? t.tool_calls.map(c => toolRow(c, d.search_enabled)).join('')
+                : '<div class="sd-no-tools">no tools — text reply</div>'}
+            </div>`;
+        // Parsing one giant innerHTML for a 700-turn session visibly hangs
+        // the tab — render the first chunk, defer the rest behind a button.
+        const CHUNK = 150;
+        const cards = d.turns.map(cardHtml);
+        let renderedCount = Math.min(cards.length, CHUNK);
+        const totalCalls = d.turns.reduce((n, t) => n + t.tool_calls.length, 0);
+        const failedCalls = d.turns.reduce((n, t) => n + t.tool_calls.filter(c => c.is_error === 1).length, 0);
+        const failedTurns = d.turns.filter(t => t.tool_calls.some(c => c.is_error === 1)).length;
+        timelinePane.innerHTML = `
+          <div style="display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:0.8rem;font-size:0.88rem;color:var(--text-1);">
+            <span><b>${num(d.turns.length)}</b> turns</span>
+            <span><b>${num(totalCalls)}</b> tool calls</span>
+            <span style="${failedCalls ? 'color:#f85149;' : ''}"><b>${num(failedCalls)}</b> failed${failedCalls ? ` <span style="color:var(--text-2);">across ${num(failedTurns)} turn${failedTurns === 1 ? '' : 's'}</span>` : ''}</span>
+          </div>
+          <div class="card" style="margin-bottom:1rem;">
+            <div style="display:flex;justify-content:space-between;align-items:baseline;">
+              <h3 style="margin:0;">Fresh + output tokens per turn</h3>
+              <span style="color:var(--text-2);font-size:0.75rem;">red = turn contains a failed tool call · click a bar to jump · drag the slider to zoom</span>
+            </div>
+            <div id="tl-chart" style="height:200px;margin-top:0.6rem;"></div>
+          </div>
+          <div style="display:flex;justify-content:flex-end;margin-bottom:0.6rem;">
+            <label style="color:var(--text-2);font-size:0.8rem;cursor:pointer;user-select:none;">
+              <input type="checkbox" id="tl-fail-only" style="vertical-align:-2px;" /> failures only
+            </label>
+          </div>
+          <div id="tl-feed">${cards.slice(0, renderedCount).join('')}</div>
+          ${cards.length > CHUNK ? `<button id="tl-more" type="button" style="width:100%;background:none;color:var(--text-2);border:1px dashed var(--border);border-radius:6px;padding:0.5rem;font:inherit;font-size:0.85rem;cursor:pointer;">Show remaining ${cards.length - CHUNK} turns</button>` : ''}
+          <p id="tl-fail-empty" class="empty" style="display:none;">No failed tool calls in this session.</p>
+        `;
+        const failOnly = document.getElementById('tl-fail-only') as HTMLInputElement;
+        function applyFailFilter() {
+          let visible = 0;
+          timelinePane.querySelectorAll<HTMLElement>('.tl-turn').forEach(el => {
+            const show = !failOnly.checked || el.dataset.fail === '1';
+            el.style.display = show ? '' : 'none';
+            if (show) visible++;
+          });
+          document.getElementById('tl-fail-empty')!.style.display = visible ? 'none' : '';
+        }
+        function renderRest() {
+          if (renderedCount >= cards.length) return;
+          document.getElementById('tl-feed')!.insertAdjacentHTML('beforeend', cards.slice(renderedCount).join(''));
+          renderedCount = cards.length;
+          document.getElementById('tl-more')?.remove();
+        }
+        document.getElementById('tl-more')?.addEventListener('click', renderRest);
+        failOnly.addEventListener('change', () => {
+          if (failOnly.checked) renderRest(); // a filter over a partial feed would lie
+          applyFailFilter();
+        });
+        turnTokensBar(
+          document.getElementById('tl-chart')!,
+          d.turns.map(t => ({
+            sequence: t.sequence,
+            tokens: turnBurn(t),
+            cacheRead: t.cache_read_tokens,
+            hasError: t.tool_calls.some(c => c.is_error === 1),
+          })),
+          seq => {
+            if (!document.getElementById(`tl-turn-${seq}`)) renderRest();
+            document.getElementById(`tl-turn-${seq}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          },
+        );
+        // Click a successful tool call → lazily fetch + toggle its output.
+        timelinePane.addEventListener('click', async ev => {
+          const row = (ev.target as HTMLElement).closest<HTMLElement>('.tl-expandable');
+          if (!row) return;
+          const existing = row.nextElementSibling;
+          if (existing && existing.classList.contains('sd-out-box')) {
+            existing.remove();
+            return;
+          }
+          const box = document.createElement('div');
+          box.className = 'sd-out-box';
+          box.textContent = 'loading…';
+          row.after(box);
+          const r = await api.sessionToolOutput(id!, row.dataset.tu!);
+          if (!r) box.textContent = 'failed to load output';
+          else if (!r.search_enabled) box.textContent = 'enable search indexing in Settings to see tool output';
+          else if (!r.found) box.textContent = 'output not indexed — it may have been empty, or restart argus to backfill';
+          else box.innerHTML = `<pre>${escapeHtml(r.text!)}</pre>`;
+        });
+      }
+
+      // ─── Back-to-top ──────────────────────────────────────────────────
+      const toTop = document.getElementById('to-top')!;
+      let toTopVisible = false;
+      window.addEventListener('scroll', () => {
+        const v = window.scrollY > 600;
+        if (v !== toTopVisible) { // style write per scroll event janks big DOMs
+          toTopVisible = v;
+          toTop.style.display = v ? 'block' : 'none';
+        }
+      }, { passive: true });
+      toTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
+    }
+  </script>
+</Default>

{argus_code-0.3.1 → argus_code-0.4.0}/dashboard/src/scripts/api.ts

@@ -34,6 +34,27 @@ export interface Turn {
   metadata: Record<string, unknown>;
 }
 
+export interface TimelineToolCall {
+  tool_name: string;
+  tool_use_id: string;
+  is_error: 0 | 1;
+  input_size: number;
+  subagent_type: string | null;
+  error_text: string | null;
+}
+
+export interface TimelineTurn {
+  sequence: number;
+  timestamp: string;
+  model: string;
+  fresh_input_tokens: number;
+  cache_read_tokens: number;
+  cache_write_tokens: number;
+  output_tokens: number;
+  cost_usd: number;
+  tool_calls: TimelineToolCall[];
+}
+
 export interface Overview {
   window: string;
   total_cost_usd: number;
@@ -78,6 +99,12 @@ export interface Alert {
 export const api = {
   sessions: (q = '') => fetch('/api/sessions' + q).then(r => r.json() as Promise<{ sessions: Session[] }>),
   session: (id: string) => fetch('/api/sessions/' + encodeURIComponent(id)).then(r => r.ok ? r.json() as Promise<{ session: Session; turns: Turn[] }> : null),
+  sessionTimeline: (id: string) =>
+    fetch(`/api/sessions/${encodeURIComponent(id)}/timeline`)
+      .then(r => r.ok ? r.json() as Promise<{ search_enabled: boolean; turns: TimelineTurn[] }> : null),
+  sessionToolOutput: (id: string, toolUseId: string) =>
+    fetch(`/api/sessions/${encodeURIComponent(id)}/tool-output/${encodeURIComponent(toolUseId)}`)
+      .then(r => r.ok ? r.json() as Promise<{ search_enabled: boolean; found: boolean; text: string | null }> : null),
   overview: (window: string) => fetch('/api/overview?window=' + window).then(r => r.json() as Promise<Overview>),
   trends: (granularity: string, groupBy: string) => fetch(`/api/trends?granularity=${granularity}&groupBy=${groupBy}`).then(r => r.json() as Promise<{ points: { bucket: string; groups: Record<string, { cost: number; tokens: number; sessions: number }> }[] }>),
   pricing: () => fetch('/api/pricing').then(r => r.json() as Promise<{ version: string }>),

{argus_code-0.3.1 → argus_code-0.4.0}/dashboard/src/scripts/charts.ts

@@ -1,10 +1,10 @@
 import * as echarts from 'echarts/core';
 import { LineChart, BarChart, HeatmapChart, PieChart } from 'echarts/charts';
-import { GridComponent, TooltipComponent, TitleComponent, LegendComponent, VisualMapComponent, MarkLineComponent } from 'echarts/components';
+import { GridComponent, TooltipComponent, TitleComponent, LegendComponent, VisualMapComponent, MarkLineComponent, DataZoomComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { tok } from './format';
 
-echarts.use([LineChart, BarChart, HeatmapChart, PieChart, GridComponent, TooltipComponent, TitleComponent, LegendComponent, VisualMapComponent, MarkLineComponent, CanvasRenderer]);
+echarts.use([LineChart, BarChart, HeatmapChart, PieChart, GridComponent, TooltipComponent, TitleComponent, LegendComponent, VisualMapComponent, MarkLineComponent, DataZoomComponent, CanvasRenderer]);
 
 const THEME = {
   textStyle: { color: '#9ba6b3', fontFamily: '-apple-system, system-ui, sans-serif' },
@@ -178,23 +178,68 @@ export function calendarHeatmap(el: HTMLElement, days: { day: string; value: num
   return c;
 }
 
-export function trendsLine(el: HTMLElement, points: { bucket: string; groups: Record<string, { cost: number }> }[]) {
+export function turnTokensBar(
+  el: HTMLElement,
+  turns: { sequence: number; tokens: number; cacheRead: number; hasError: boolean }[],
+  onBarClick: (sequence: number) => void,
+) {
+  const c = makeChart(el);
+  c.setOption({
+    ...THEME,
+    // Animating hundreds of bars on load and on every zoom drag visibly
+    // janks large sessions.
+    animation: turns.length <= 200,
+    tooltip: {
+      ...THEME.tooltip,
+      trigger: 'item',
+      formatter: (p: any) => {
+        const t = turns[p.dataIndex];
+        return `Turn #${t.sequence}<br>${tok(t.tokens)} fresh + output<br><span style="color:#6b7585;">${tok(t.cacheRead)} cache read (context)</span>${t.hasError ? '<br><span style="color:#f85149;">contains a failed tool call</span>' : ''}`;
+      },
+    },
+    grid: { left: 50, right: 18, top: 12, bottom: 52 },
+    xAxis: { type: 'category', data: turns.map(t => '#' + t.sequence), ...AXIS },
+    yAxis: { type: 'value', axisLabel: { ...AXIS.axisLabel, formatter: (v: number) => tok(v) }, splitLine: AXIS.splitLine, axisLine: { show: false } },
+    dataZoom: [
+      { type: 'inside' },
+      {
+        type: 'slider', height: 16, bottom: 8,
+        borderColor: '#262d3a', backgroundColor: '#11151c',
+        fillerColor: 'rgba(88,166,255,0.15)',
+        handleStyle: { color: '#58a6ff' },
+        textStyle: { color: '#6b7585', fontSize: 9 },
+      },
+    ],
+    series: [{
+      type: 'bar',
+      barMaxWidth: 26,
+      data: turns.map(t => ({
+        value: t.tokens,
+        itemStyle: { color: t.hasError ? '#f85149' : '#58a6ff', borderRadius: [3, 3, 0, 0] },
+      })),
+    }],
+  });
+  c.on('click', (p: any) => onBarClick(turns[p.dataIndex].sequence));
+  return c;
+}
+
+export function trendsLine(el: HTMLElement, points: { bucket: string; groups: Record<string, { tokens: number }> }[]) {
   const c = makeChart(el);
   const allKeys = [...new Set(points.flatMap(p => Object.keys(p.groups)))];
   const palette = ['#f0883e', '#58a6ff', '#7ee787', '#d29922', '#bc8cff', '#f85149'];
   c.setOption({
     ...THEME,
-    tooltip: { ...THEME.tooltip, trigger: 'axis', valueFormatter: (v: number) => '$' + v.toFixed(2) },
+    tooltip: { ...THEME.tooltip, trigger: 'axis', valueFormatter: (v: number) => tok(v) + ' tokens' },
     legend: { data: allKeys, textStyle: { color: '#9ba6b3', fontSize: 11 }, top: 0 },
-    grid: { left: 50, right: 18, top: 38, bottom: 30 },
+    grid: { left: 56, right: 18, top: 38, bottom: 30 },
     xAxis: { type: 'category', data: points.map(p => p.bucket), ...AXIS },
-    yAxis: { type: 'value', axisLabel: { ...AXIS.axisLabel, formatter: '${value}' }, splitLine: AXIS.splitLine, axisLine: { show: false } },
+    yAxis: { type: 'value', axisLabel: { ...AXIS.axisLabel, formatter: (v: number) => tok(v) }, splitLine: AXIS.splitLine, axisLine: { show: false } },
     series: allKeys.map((k, i) => ({
       type: 'line', name: k,
       smooth: true, symbol: 'circle', symbolSize: 5,
       lineStyle: { color: palette[i % palette.length], width: 2 },
       itemStyle: { color: palette[i % palette.length] },
-      data: points.map(p => +(p.groups[k]?.cost ?? 0).toFixed(4)),
+      data: points.map(p => p.groups[k]?.tokens ?? 0),
     })),
   });
   return c;