Session Report

#!/usr/bin/env node
/* eslint-disable */
/**
 * analyze-sessions.js
 *
 * Scans ~/.claude/projects/**.jsonl transcript files and reports token usage,
 * message counts, runtime, cache breaks, subagent and skill activity.
 *
 * Output is human-readable text by default; pass --json for machine-readable.
 *
 * Usage:
 *   node scripts/analyze-sessions.js [--dir <projects-dir>] [--json] [--since <ISO|7d|24h>] [--top N]
 *
 * Notes on JSONL structure (discovered empirically):
 *  - One API response is split into MULTIPLE `type:"assistant"` entries (one per
 *    content block). They share the same `requestId` / `message.id`, and only the
 *    LAST one carries the final `output_tokens`. We dedupe by requestId and keep
 *    the max output_tokens to avoid 3-10x overcounting.
 *  - `type:"user"` entries include tool_result messages, interrupt markers,
 *    compact summaries and meta-injected text. A "human" message is one where
 *    isSidechain/isMeta/isCompactSummary are falsy and the content is a plain
 *    string (or text block) that isn't a tool_result or interrupt marker.
 *  - Subagent transcripts live in <project>/<sessionId>/subagents/*.jsonl with a
 *    sibling *.meta.json containing {agentType}. When meta is absent we fall back
 *    to the filename label (`agent-a<label>-<hash>.jsonl` → label) or "fork".
 *  - Resumed sessions can re-serialize prior entries into a new file; we dedupe
 *    globally by entry `uuid` so replayed history isn't double-counted.
 */

import fs from 'fs'
import os from 'os'
import path from 'path'
import readline from 'readline'

// ---------------------------------------------------------------------------
// CLI args
// ---------------------------------------------------------------------------
const argv = process.argv.slice(2)
function flag(name, dflt) {
  const i = argv.indexOf(name)
  if (i === -1) return dflt
  const v = argv[i + 1]
  return v === undefined || v.startsWith('--') ? true : v
}
const ROOT = flag('--dir', path.join(os.homedir(), '.claude', 'projects'))
const AS_JSON = argv.includes('--json')
const TOP_N = parseInt(flag('--top', '15'), 10)
const SINCE = parseSince(flag('--since', null))
const CACHE_BREAK_THRESHOLD = parseInt(flag('--cache-break', '100000'), 10)
const IDLE_GAP_MS = 5 * 60 * 1000 // gaps >5min don't count toward "active" time

function parseSince(s) {
  if (!s) return null
  const m = /^(\d+)([dh])$/.exec(s)
  if (m) {
    const ms = m[2] === 'd' ? 86400000 : 3600000
    return new Date(Date.now() - parseInt(m[1], 10) * ms)
  }
  const d = new Date(s)
  return isNaN(d) ? null : d
}

// ---------------------------------------------------------------------------
// Stats container
// ---------------------------------------------------------------------------
function newStats() {
  return {
    sessions: new Set(),
    apiCalls: 0,
    inputUncached: 0, // usage.input_tokens
    inputCacheCreate: 0, // usage.cache_creation_input_tokens
    inputCacheRead: 0, // usage.cache_read_input_tokens
    outputTokens: 0,
    humanMessages: 0,
    wallClockMs: 0,
    activeMs: 0,
    cacheBreaks: [], // [{ts, session, project, uncached, total}]
    subagentCalls: 0,
    subagentTokens: 0, // total (in+out) inside subagent transcripts
    skillInvocations: {}, // name -> count
    firstTs: null,
    lastTs: null,
  }
}

function addUsage(s, u) {
  s.apiCalls++
  s.inputUncached += u.input_tokens || 0
  s.inputCacheCreate += u.cache_creation_input_tokens || 0
  s.inputCacheRead += u.cache_read_input_tokens || 0
  s.outputTokens += u.output_tokens || 0
}

// ---------------------------------------------------------------------------
// File discovery
// ---------------------------------------------------------------------------
function* walk(dir) {
  let ents
  try {
    ents = fs.readdirSync(dir, { withFileTypes: true })
  } catch {
    return
  }
  for (const e of ents) {
    const p = path.join(dir, e.name)
    if (e.isDirectory()) yield* walk(p)
    else if (e.isFile() && e.name.endsWith('.jsonl')) yield p
  }
}

function classifyFile(p) {
  // returns { project, sessionId, kind, agentId?, agentTypeHint? }
  // agentTypeHint is from meta.json or filename label; final type is resolved
  // in main() after the parent-transcript map is built.
  const rel = path.relative(ROOT, p)
  const parts = rel.split(path.sep)
  const project = parts[0]
  const subIdx = parts.indexOf('subagents')
  if (subIdx !== -1) {
    const sessionId = parts[subIdx - 1]
    const base = path.basename(p, '.jsonl')
    const agentId = base.replace(/^agent-/, '')
    return {
      project,
      sessionId,
      kind: 'subagent',
      agentId,
      agentTypeHint:
        inferAgentTypeFromMeta(p) || inferAgentTypeFromFilename(base),
    }
  }
  if (parts.includes('workflows')) {
    const sessionId = parts[1]
    return { project, sessionId, kind: 'subagent', agentTypeHint: 'workflow' }
  }
  const sessionId = path.basename(p, '.jsonl')
  return { project, sessionId, kind: 'main' }
}

function inferAgentTypeFromMeta(jsonlPath) {
  const metaPath = jsonlPath.replace(/\.jsonl$/, '.meta.json')
  try {
    const m = JSON.parse(fs.readFileSync(metaPath, 'utf8'))
    if (m && typeof m.agentType === 'string') return m.agentType
  } catch {
    /* no meta */
  }
  return null
}

function inferAgentTypeFromFilename(base) {
  // agentId = 'a' + hex16  OR  'a' + label + '-' + hex16  (src/utils/uuid.ts)
  const m = /^agent-a([a-zA-Z_][\w-]*?)-[0-9a-f]{6,}$/.exec(base)
  if (m) return m[1] // internal background fork label
  return null // unlabeled — resolve via agentIdToType map or default to 'fork'
}

// ---------------------------------------------------------------------------
// Per-file streaming parse
// ---------------------------------------------------------------------------
const seenUuids = new Set() // global dedupe across resumed sessions
const seenRequestIds = new Set() // global dedupe for usage accounting
const toolUseIdToType = new Map() // tool_use id -> subagent_type (from Agent/Task tool_use)
const agentIdToType = new Map() // agentId -> subagent_type (linked via tool_result)
const toolUseIdToPrompt = new Map() // tool_use id -> promptKey (Agent spawned during this prompt)
const agentIdToPrompt = new Map() // agentId -> promptKey
const prompts = new Map() // promptKey -> { text, ts, project, sessionId, ...usage }
const sessionTurns = new Map() // sessionId -> [promptKey, ...] in transcript order
const sessionSpans = new Map() // sessionId -> {project, firstTs, lastTs, tokens}

function promptRecord(key, init) {
  let r = prompts.get(key)
  if (!r) {
    r = {
      text: init.text,
      ts: init.ts,
      project: init.project,
      sessionId: init.sessionId,
      apiCalls: 0,
      subagentCalls: 0,
      inputUncached: 0,
      inputCacheCreate: 0,
      inputCacheRead: 0,
      outputTokens: 0,
    }
    prompts.set(key, r)
  }
  return r
}

async function processFile(p, info, buckets) {
  const rl = readline.createInterface({
    input: fs.createReadStream(p, { encoding: 'utf8' }),
    crlfDelay: Infinity,
  })

  // Per-file: dedupe API calls by requestId, keep the one with max output_tokens.
  // We collect first, then commit, because earlier blocks have stale output counts.
  const fileApiCalls = new Map() // key -> {usage, ts}
  let firstTs = null
  let lastTs = null
  let prevTs = null
  let activeMs = 0
  let currentSkill = null // skill attribution for this turn
  // Prompt attribution: in main files this is set on each human message; in
  // subagent files it's inherited from the spawning prompt (via agentIdToPrompt).
  let currentPrompt =
    info.kind === 'subagent' && info.agentId
      ? agentIdToPrompt.get(info.agentId) || null
      : null

  const project = buckets.project
  const overall = buckets.overall
  const subagent = buckets.subagent // may be null
  const skillStats = buckets.skillStats // map name -> stats

  for await (const line of rl) {
    if (!line) continue
    let e
    try {
      e = JSON.parse(line)
    } catch {
      continue
    }

    // global uuid dedupe (resumed sessions replay history)
    if (e.uuid) {
      if (seenUuids.has(e.uuid)) continue
      seenUuids.add(e.uuid)
    }

    // timestamp tracking
    if (e.timestamp) {
      const ts = Date.parse(e.timestamp)
      if (!isNaN(ts)) {
        if (SINCE && ts < SINCE.getTime()) continue
        if (firstTs === null) firstTs = ts
        if (prevTs !== null) {
          const gap = ts - prevTs
          if (gap > 0 && gap < IDLE_GAP_MS) activeMs += gap
        }
        prevTs = ts
        lastTs = ts
      }
    }

    if (e.type === 'user') {
      // Link Agent tool_result -> agentId for type + prompt attribution.
      const tur = e.toolUseResult
      if (tur && tur.agentId) {
        const c0 = Array.isArray(e.message?.content)
          ? e.message.content[0]
          : null
        const tuid = c0 && c0.tool_use_id
        if (tuid) {
          const st = toolUseIdToType.get(tuid)
          if (st) agentIdToType.set(tur.agentId, st)
          const pk = toolUseIdToPrompt.get(tuid)
          if (pk) {
            agentIdToPrompt.set(tur.agentId, pk)
            const r = prompts.get(pk)
            if (r) r.subagentCalls++
          }
        }
      }
      handleUser(
        e,
        info,
        { project, overall, subagent },
        v => {
          currentSkill = v
        },
        pk => {
          currentPrompt = pk
        },
      )
      continue
    }

    if (e.type === 'assistant') {
      const msg = e.message || {}
      const usage = msg.usage
      // detect Skill / Agent tool calls in content
      if (Array.isArray(msg.content)) {
        for (const c of msg.content) {
          if (c && c.type === 'tool_use') {
            if (c.name === 'Skill' && c.input && c.input.skill) {
              const sk = String(c.input.skill)
              bumpSkill(overall, sk)
              bumpSkill(project, sk)
              if (subagent) bumpSkill(subagent, sk)
              currentSkill = sk
            }
            if (c.name === 'Agent' || c.name === 'Task') {
              if (c.input && c.input.subagent_type) {
                toolUseIdToType.set(c.id, String(c.input.subagent_type))
              }
              if (currentPrompt) toolUseIdToPrompt.set(c.id, currentPrompt)
            }
          }
        }
      }
      if (!usage) continue
      const key =
        e.requestId ||
        (msg.id && msg.id.startsWith('msg_0') && msg.id.length > 10
          ? msg.id
          : null) ||
        `${p}:${e.uuid || ''}`
      const prev = fileApiCalls.get(key)
      if (
        !prev ||
        (usage.output_tokens || 0) >= (prev.usage.output_tokens || 0)
      ) {
        fileApiCalls.set(key, {
          usage,
          ts: e.timestamp,
          skill: currentSkill,
          prompt: currentPrompt,
        })
      }
      continue
    }
  }

  // commit timestamps
  if (firstTs !== null && lastTs !== null) {
    const wall = lastTs - firstTs
    for (const s of [overall, project, subagent].filter(Boolean)) {
      s.wallClockMs += wall
      s.activeMs += activeMs
      if (!s.firstTs || firstTs < s.firstTs) s.firstTs = firstTs
      if (!s.lastTs || lastTs > s.lastTs) s.lastTs = lastTs
    }
  }

  // session span (for by_day timeline) — subagent files roll into parent sessionId
  let span = sessionSpans.get(info.sessionId)
  if (!span) {
    span = { project: info.project, firstTs: null, lastTs: null, tokens: 0 }
    sessionSpans.set(info.sessionId, span)
  }
  if (firstTs !== null) {
    if (span.firstTs === null || firstTs < span.firstTs) span.firstTs = firstTs
    if (span.lastTs === null || lastTs > span.lastTs) span.lastTs = lastTs
  }

  // commit API calls
  for (const [key, { usage, ts, skill, prompt }] of fileApiCalls) {
    if (key && seenRequestIds.has(key)) continue
    seenRequestIds.add(key)

    const tot =
      (usage.input_tokens || 0) +
      (usage.cache_creation_input_tokens || 0) +
      (usage.cache_read_input_tokens || 0) +
      (usage.output_tokens || 0)
    span.tokens += tot

    const targets = [overall, project]
    if (subagent) targets.push(subagent)
    if (skill && skillStats) {
      if (!skillStats.has(skill)) skillStats.set(skill, newStats())
      targets.push(skillStats.get(skill))
    }
    for (const s of targets) addUsage(s, usage)

    if (prompt) {
      const r = prompts.get(prompt)
      if (r) {
        r.apiCalls++
        r.inputUncached += usage.input_tokens || 0
        r.inputCacheCreate += usage.cache_creation_input_tokens || 0
        r.inputCacheRead += usage.cache_read_input_tokens || 0
        r.outputTokens += usage.output_tokens || 0
      }
    }

    // subagent token accounting on parent buckets
    if (info.kind === 'subagent') {
      overall.subagentTokens += tot
      project.subagentTokens += tot
      if (subagent) subagent.subagentTokens += tot
    }

    // cache break detection
    const uncached =
      (usage.input_tokens || 0) + (usage.cache_creation_input_tokens || 0)
    if (uncached > CACHE_BREAK_THRESHOLD) {
      const total = uncached + (usage.cache_read_input_tokens || 0)
      const cb = {
        ts,
        session: info.sessionId,
        project: info.project,
        uncached,
        total,
        kind: info.kind,
        agentType: info.agentType,
        prompt,
      }
      overall.cacheBreaks.push(cb)
      project.cacheBreaks.push(cb)
      if (subagent) subagent.cacheBreaks.push(cb)
    }
  }

  // only count this file toward session/subagent tallies if it had in-range entries
  if (firstTs !== null || fileApiCalls.size > 0) {
    for (const s of [overall, project, subagent].filter(Boolean)) {
      s.sessions.add(info.sessionId)
    }
    if (info.kind === 'subagent') {
      overall.subagentCalls++
      project.subagentCalls++
      if (subagent) subagent.subagentCalls++
    }
  }
}

function handleUser(
  e,
  info,
  { project, overall, subagent },
  setSkill,
  setPrompt,
) {
  if (e.isMeta || e.isCompactSummary) return
  const content = e.message && e.message.content
  let isToolResult = false
  let text = null
  if (typeof content === 'string') {
    text = content
  } else if (Array.isArray(content)) {
    const first = content[0]
    if (first && first.type === 'tool_result') isToolResult = true
    else if (first && first.type === 'text') text = first.text || ''
  }
  if (isToolResult) return

  let slashCmd = null
  if (text) {
    // Auto-continuations (task notifications, scheduled wakeups) are not new
    // human prompts; keep attributing to the previously active prompt.
    if (
      text.startsWith('<task-notification') ||
      text.startsWith('<scheduled-wakeup') ||
      text.startsWith('<background-task')
    ) {
      return
    }
    const m = /<command-(?:name|message)>\/?([^<]+)<\/command-/.exec(text)
    if (m) {
      slashCmd = m[1].trim()
      bumpSkill(overall, slashCmd)
      bumpSkill(project, slashCmd)
      if (subagent) bumpSkill(subagent, slashCmd)
      setSkill(slashCmd)
    } else {
      setSkill(null) // plain human message resets skill attribution
    }
    if (text.startsWith('[Request interrupted')) return
  }

  // Only count as human message / start a prompt in main (non-sidechain) transcripts
  if (info.kind === 'main' && !e.isSidechain) {
    overall.humanMessages++
    project.humanMessages++
    const pk = e.uuid || `${info.sessionId}:${e.timestamp}`
    promptRecord(pk, {
      text: promptPreview(text, slashCmd),
      ts: e.timestamp,
      project: info.project,
      sessionId: info.sessionId,
    })
    setPrompt(pk)
    let turns = sessionTurns.get(info.sessionId)
    if (!turns) sessionTurns.set(info.sessionId, (turns = []))
    turns.push(pk)
  }
}

function promptPreview(text, slashCmd) {
  if (slashCmd) return `/${slashCmd}`
  if (!text) return '(non-text)'
  const t = text
    .replace(/<[^>]+>/g, ' ')
    .replace(/\s+/g, ' ')
    .trim()
  return t.length > 240 ? t.slice(0, 237) + '…' : t
}

// ±2 user messages around a given prompt, with the api-call count that
// followed each one. Used for drill-down in the HTML report.
function buildContext(pk) {
  const r = prompts.get(pk)
  if (!r) return null
  const turns = sessionTurns.get(r.sessionId)
  if (!turns) return null
  const i = turns.indexOf(pk)
  if (i === -1) return null
  const lo = Math.max(0, i - 2)
  const hi = Math.min(turns.length, i + 3)
  return turns.slice(lo, hi).map((k, j) => {
    const t = prompts.get(k) || {}
    return {
      text: t.text || '',
      ts: t.ts || null,
      calls: t.apiCalls || 0,
      here: lo + j === i,
    }
  })
}

function bumpSkill(s, name) {
  s.skillInvocations[name] = (s.skillInvocations[name] || 0) + 1
}

const _btCache = new Map()
function birthtime(p) {
  let t = _btCache.get(p)
  if (t === undefined) {
    try {
      t = fs.statSync(p).birthtimeMs
    } catch {
      t = 0
    }
    _btCache.set(p, t)
  }
  return t
}

// ---------------------------------------------------------------------------
// Main
// ---------------------------------------------------------------------------
async function main() {
  const overall = newStats()
  const perProject = new Map() // project -> stats
  const perSubagent = new Map() // agentType -> stats
  const perSkill = new Map() // skill -> stats (token-attributed)

  // Classify, then sort main files before subagent files. Fork-style subagents
  // replay parent entries with identical uuids; processing parents first ensures
  // the global uuid-dedupe attributes those entries to the parent, not the fork.
  // Among subagents, sort by birthtime so a parent subagent is processed before
  // any nested children it spawned (needed for prompt-attribution propagation).
  const files = [...walk(ROOT)]
    .map(p => ({ p, info: classifyFile(p) }))
    .sort((a, b) => {
      const ka = a.info.kind === 'main' ? 0 : 1
      const kb = b.info.kind === 'main' ? 0 : 1
      if (ka !== kb) return ka - kb
      if (ka === 1) return birthtime(a.p) - birthtime(b.p)
      return 0
    })
  let n = 0
  for (const { p, info } of files) {
    if (!perProject.has(info.project)) perProject.set(info.project, newStats())
    const project = perProject.get(info.project)

    let subagent = null
    if (info.kind === 'subagent') {
      // Resolve agent type: meta.json/filename hint > parent-transcript map > 'fork'
      const at =
        info.agentTypeHint ||
        (info.agentId && agentIdToType.get(info.agentId)) ||
        'fork'
      info.agentType = at
      if (!perSubagent.has(at)) perSubagent.set(at, newStats())
      subagent = perSubagent.get(at)
    }

    await processFile(p, info, {
      overall,
      project,
      subagent,
      skillStats: perSkill,
    })
    n++
    if (!AS_JSON && n % 200 === 0) {
      process.stderr.write(`\r  scanned ${n}/${files.length} files…`)
    }
  }
  if (!AS_JSON)
    process.stderr.write(`\r  scanned ${n}/${files.length} files.\n`)

  // Drop empty buckets (created for files that had no in-range entries under --since)
  for (const m of [perProject, perSubagent, perSkill]) {
    for (const [k, v] of m) {
      if (v.apiCalls === 0 && v.sessions.size === 0) m.delete(k)
    }
  }

  if (AS_JSON) {
    printJson({ overall, perProject, perSubagent, perSkill })
  } else {
    printText({ overall, perProject, perSubagent, perSkill })
  }
}

// ---------------------------------------------------------------------------
// Output
// ---------------------------------------------------------------------------
function fmt(n) {
  if (n >= 1e9) return (n / 1e9).toFixed(2) + 'B'
  if (n >= 1e6) return (n / 1e6).toFixed(2) + 'M'
  if (n >= 1e3) return (n / 1e3).toFixed(1) + 'k'
  return String(n)
}
function pct(a, b) {
  return b > 0 ? ((100 * a) / b).toFixed(1) + '%' : '—'
}
function hrs(ms) {
  return (ms / 3600000).toFixed(1)
}

function summarize(s) {
  const inTotal = s.inputUncached + s.inputCacheCreate + s.inputCacheRead
  return {
    sessions: s.sessions.size,
    api_calls: s.apiCalls,
    input_tokens: {
      uncached: s.inputUncached,
      cache_create: s.inputCacheCreate,
      cache_read: s.inputCacheRead,
      total: inTotal,
      pct_cached:
        inTotal > 0 ? +((100 * s.inputCacheRead) / inTotal).toFixed(1) : 0,
    },
    output_tokens: s.outputTokens,
    human_messages: s.humanMessages,
    hours: { wall_clock: +hrs(s.wallClockMs), active: +hrs(s.activeMs) },
    cache_breaks_over_100k: s.cacheBreaks.length,
    subagent: {
      calls: s.subagentCalls,
      total_tokens: s.subagentTokens,
      avg_tokens_per_call:
        s.subagentCalls > 0
          ? Math.round(s.subagentTokens / s.subagentCalls)
          : 0,
    },
    skill_invocations: s.skillInvocations,
    span: s.firstTs
      ? {
          from: new Date(s.firstTs).toISOString(),
          to: new Date(s.lastTs).toISOString(),
        }
      : null,
  }
}

function printJson({ overall, perProject, perSubagent, perSkill }) {
  const out = {
    root: ROOT,
    generated_at: new Date().toISOString(),
    overall: summarize(overall),
    cache_breaks: overall.cacheBreaks
      .sort((a, b) => b.uncached - a.uncached)
      .slice(0, 100)
      .map(({ prompt, ...b }) => ({
        ...b,
        context: prompt ? buildContext(prompt) : null,
      })),
    by_project: Object.fromEntries(
      [...perProject].map(([k, v]) => [k, summarize(v)]),
    ),
    by_subagent_type: Object.fromEntries(
      [...perSubagent].map(([k, v]) => [k, summarize(v)]),
    ),
    by_skill: Object.fromEntries(
      [...perSkill].map(([k, v]) => [k, summarize(v)]),
    ),
    top_prompts: topPrompts(100),
    by_day: buildByDay(),
  }
  process.stdout.write(JSON.stringify(out, null, 2) + '\n')
}

// Group sessions into local-date buckets for the timeline view. A session is
// placed on the day its first message landed; tokens for that session (incl.
// subagents) count toward that day even if it ran past midnight.
function buildByDay() {
  const DOW = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  const days = new Map() // yyyy-mm-dd -> {date, dow, tokens, sessions:[]}
  for (const [id, s] of sessionSpans) {
    if (s.firstTs === null || s.tokens === 0) continue
    const d0 = new Date(s.firstTs)
    const key = `${d0.getFullYear()}-${String(d0.getMonth() + 1).padStart(2, '0')}-${String(d0.getDate()).padStart(2, '0')}`
    let day = days.get(key)
    if (!day) {
      day = { date: key, dow: DOW[d0.getDay()], tokens: 0, sessions: [] }
      days.set(key, day)
    }
    const base = new Date(
      d0.getFullYear(),
      d0.getMonth(),
      d0.getDate(),
    ).getTime()
    day.tokens += s.tokens
    day.sessions.push({
      id,
      project: s.project,
      tokens: s.tokens,
      start_min: Math.max(0, Math.round((s.firstTs - base) / 60000)),
      end_min: Math.max(1, Math.round((s.lastTs - base) / 60000)),
    })
  }
  for (const d of days.values()) {
    // peak concurrency via 10-min buckets, capped at 24h for display
    const b = new Array(144).fill(0)
    for (const s of d.sessions) {
      const lo = Math.min(143, Math.floor(s.start_min / 10))
      const hi = Math.min(144, Math.ceil(Math.min(s.end_min, 1440) / 10))
      for (let i = lo; i < hi; i++) b[i]++
    }
    d.peak = Math.max(0, ...b)
    d.peak_at_min = d.peak > 0 ? b.indexOf(d.peak) * 10 : 0
    d.sessions.sort((a, b) => a.start_min - b.start_min)
  }
  return [...days.values()].sort((a, b) => a.date.localeCompare(b.date))
}

function promptTotal(r) {
  return (
    r.inputUncached + r.inputCacheCreate + r.inputCacheRead + r.outputTokens
  )
}

function topPrompts(n) {
  return [...prompts.entries()]
    .filter(([, r]) => r.apiCalls > 0)
    .sort((a, b) => promptTotal(b[1]) - promptTotal(a[1]))
    .slice(0, n)
    .map(([pk, r]) => ({
      ts: r.ts,
      project: r.project,
      session: r.sessionId,
      text: r.text,
      api_calls: r.apiCalls,
      subagent_calls: r.subagentCalls,
      total_tokens: promptTotal(r),
      input: {
        uncached: r.inputUncached,
        cache_create: r.inputCacheCreate,
        cache_read: r.inputCacheRead,
      },
      output: r.outputTokens,
      context: buildContext(pk),
    }))
}

function printText({ overall, perProject, perSubagent, perSkill }) {
  const line = (...a) => console.log(...a)
  const hr = () => line('─'.repeat(78))

  line()
  line(`Claude Code session analysis — ${ROOT}`)
  if (SINCE) line(`(since ${SINCE.toISOString()})`)
  hr()
  printBlock('OVERALL', overall)

  hr()
  line(
    `CACHE BREAKS (>${fmt(CACHE_BREAK_THRESHOLD)} uncached input on a single call)`,
  )
  const breaks = overall.cacheBreaks
    .sort((a, b) => b.uncached - a.uncached)
    .slice(0, TOP_N)
  if (breaks.length === 0) line('  none')
  for (const b of breaks) {
    line(
      `  ${fmt(b.uncached).padStart(8)} uncached / ${fmt(b.total).padStart(8)} total  ` +
        `${(b.ts || '').slice(0, 19)}  ${b.project}` +
        (b.kind === 'subagent' ? `  [${b.agentType}]` : ''),
    )
  }
  if (overall.cacheBreaks.length > TOP_N)
    line(`  … ${overall.cacheBreaks.length - TOP_N} more`)

  hr()
  line(
    'MOST EXPENSIVE PROMPTS (total tokens incl. subagents spawned during the turn)',
  )
  const top = topPrompts(TOP_N)
  if (top.length === 0) line('  none')
  for (const r of top) {
    const inTot = r.input.uncached + r.input.cache_create + r.input.cache_read
    line(
      `  ${fmt(r.total_tokens).padStart(8)}  ` +
        `(in ${fmt(inTot)} ${pct(r.input.cache_read, inTot)} cached, out ${fmt(r.output)})  ` +
        `${r.api_calls} calls` +
        (r.subagent_calls ? `, ${r.subagent_calls} subagents` : '') +
        `  ${(r.ts || '').slice(0, 16)}  ${r.project}`,
    )
    line(`           "${r.text}"`)
  }
  line(
    '  (note: internal background forks like task_summary/compact are not attributed to a prompt)',
  )

  hr()
  line('BY PROJECT (top by total input tokens)')
  const projects = [...perProject.entries()].sort(
    (a, b) => totalIn(b[1]) - totalIn(a[1]),
  )
  for (const [name, s] of projects.slice(0, TOP_N)) {
    printBlock(name, s, '  ')
    line()
  }
  if (projects.length > TOP_N)
    line(`  … ${projects.length - TOP_N} more projects`)

  hr()
  line('BY SUBAGENT TYPE')
  const agents = [...perSubagent.entries()].sort(
    (a, b) => totalIn(b[1]) - totalIn(a[1]),
  )
  for (const [name, s] of agents) {
    printBlock(name, s, '  ')
    line()
  }

  hr()
  line(
    'BY SKILL / SLASH COMMAND (tokens attributed = from invocation until next human msg)',
  )
  const skills = [...perSkill.entries()].sort(
    (a, b) => totalIn(b[1]) - totalIn(a[1]),
  )
  for (const [name, s] of skills.slice(0, TOP_N)) {
    printBlock(name, s, '  ')
    line()
  }
  if (skills.length > TOP_N) line(`  … ${skills.length - TOP_N} more`)
  line()
}

function totalIn(s) {
  return s.inputUncached + s.inputCacheCreate + s.inputCacheRead
}

function printBlock(title, s, indent = '') {
  const inTotal = totalIn(s)
  console.log(`${indent}${title}`)
  console.log(
    `${indent}  sessions: ${s.sessions.size}   api calls: ${s.apiCalls}   human msgs: ${s.humanMessages}`,
  )
  console.log(
    `${indent}  input:  ${fmt(inTotal)} total  ` +
      `(uncached ${fmt(s.inputUncached)}, cache-create ${fmt(s.inputCacheCreate)}, cache-read ${fmt(s.inputCacheRead)} = ${pct(s.inputCacheRead, inTotal)} cached)`,
  )
  console.log(`${indent}  output: ${fmt(s.outputTokens)}`)
  console.log(
    `${indent}  hours:  ${hrs(s.wallClockMs)} wall-clock, ${hrs(s.activeMs)} active (gaps >5m excluded)`,
  )
  console.log(
    `${indent}  cache breaks >${fmt(CACHE_BREAK_THRESHOLD)}: ${s.cacheBreaks.length}`,
  )
  console.log(
    `${indent}  subagents: ${s.subagentCalls} calls, ${fmt(s.subagentTokens)} tokens, avg ${fmt(
      s.subagentCalls ? Math.round(s.subagentTokens / s.subagentCalls) : 0,
    )}/call`,
  )
  const topSkills = Object.entries(s.skillInvocations)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 5)
  if (topSkills.length)
    console.log(
      `${indent}  skills: ${topSkills.map(([k, v]) => `${k}×${v}`).join(', ')}`,
    )
}

main().catch(e => {
  console.error(e)
  process.exit(1)
})

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>claude usage</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<style>
  :root {
    /* anthropic / claude-code palette */
    --ivory: #FAF9F5;
    --term-bg: #1a1918;
    --term-fg: #d1cfc5;
    --titlebar: #252321;
    --outline: rgba(255,255,255,0.08);
    --hover: rgba(255,255,255,0.035);
    --clay: #D97757;
    --dim: rgb(136,136,136);
    --subtle: rgb(80,80,80);
    --green: rgb(78,186,101);
    --red: rgb(255,107,128);
    --blue: rgb(177,185,249);
    --yellow: rgb(255,193,7);
    --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Monaco, monospace;
  }

  * { box-sizing: border-box; }
  html { background: var(--ivory); }
  body {
    margin: 0; padding: 48px 24px 80px;
    font: 13px/1.55 var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--term-fg);
  }

  /* ——— terminal window chrome ——— */
  .term {
    max-width: 1180px; margin: 0 auto;
    background: var(--term-bg);
    border-radius: 8px;
    outline: 1px solid var(--outline);
    box-shadow: 0 20px 60px rgba(20,20,19,0.22);
  }
  .titlebar {
    background: var(--titlebar);
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid var(--outline);
    padding: 11px 14px;
    display: flex; align-items: center; gap: 7px;
  }
  .titlebar .dot { width: 11px; height: 11px; border-radius: 50%; background: #3a3836; }
  .titlebar .path { margin-left: 14px; color: var(--dim); font-size: 11px; }
  .term-body { padding: 22px 30px 30px; }

  /* ——— command + hero ——— */
  .cmd { color: var(--dim); margin-bottom: 6px; }
  .cmd .prompt { color: var(--clay); }
  .cmd .flag { color: var(--blue); }
  #meta-line { color: var(--subtle); font-size: 11px; }

  #hero { margin: 14px 0 6px; }
  #hero-total { font-size: 56px; font-weight: 700; line-height: 1; }
  #hero-total .unit { color: var(--clay); }
  #hero-total .label { font-size: 18px; font-weight: 400; color: var(--dim); margin-left: 8px; }
  #hero-split { color: var(--dim); margin-top: 8px; }
  #hero-split b { color: var(--term-fg); font-weight: 500; }
  #hero-split .ok { color: var(--green); }
  #hero-split .warn { color: var(--yellow); }

  /* ——— sections ——— */
  section { margin-top: 26px; }
  .hr { color: var(--subtle); overflow: hidden; white-space: nowrap;
        user-select: none; margin-bottom: 8px; }
  .hr::after { content: '────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────'; }
  h2 { all: unset; display: block; color: var(--clay); font-weight: 500; }
  h2::before { content: '▸ '; }
  h2 .hint { color: var(--subtle); font-size: 11px; font-weight: 400; margin-left: 10px; }
  .section-body { margin-top: 10px; }

  /* ——— overall stat grid ——— */
  #overall-grid { display: grid; gap: 4px 28px;
                  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .stat { padding: 4px 0; }
  .stat .label { font-size: 11px; color: var(--dim); }
  .stat .val { font-size: 20px; font-weight: 500; }
  .stat .detail { font-size: 11px; color: var(--subtle); }

  /* ——— takeaways ——— */
  .take { display: grid; grid-template-columns: 9ch 1fr; gap: 18px;
          padding: 6px 0; align-items: baseline; }
  .take .fig { text-align: right; font-weight: 700; font-size: 15px; }
  .take .txt { color: var(--dim); }
  .take .txt b { color: var(--term-fg); font-weight: 500; }
  .take.bad  .fig { color: var(--red); }
  .take.good .fig { color: var(--green); }
  .take.info .fig { color: var(--blue); }

  /* ——— callouts (recommendations) ——— */
  .callout { padding: 6px 0 6px 14px; border-left: 2px solid var(--subtle);
             color: var(--dim); margin: 6px 0; }
  .callout b, .callout code { color: var(--term-fg); }

  /* ——— day pills + session gantt ——— */
  .days { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .dpill { flex: 1; min-width: 84px; max-width: 140px; background: none;
           border: 1px solid var(--subtle); border-radius: 4px;
           padding: 9px 6px; font: inherit; color: var(--dim);
           cursor: pointer; text-align: center; }
  .dpill:hover { border-color: var(--dim); background: var(--hover); }
  .dpill .dow { font-size: 10px; color: var(--subtle); display: block; }
  .dpill .date { font-size: 11px; color: var(--term-fg); font-weight: 500;
                 display: block; margin: 2px 0 4px; }
  .dpill .pct { font-size: 16px; font-weight: 700; color: var(--term-fg); display: block; }
  .dpill .ns { font-size: 10px; color: var(--subtle); display: block; margin-top: 2px; }
  .dpill.heaviest .pct { color: var(--clay); }
  .dpill.sel { border-color: var(--clay); background: rgba(217,119,87,0.10); }
  .gantt-hd { display: flex; justify-content: space-between; align-items: baseline;
              margin-bottom: 6px; }
  .gantt-hd .day { color: var(--term-fg); font-weight: 500; }
  .gantt-hd .stats { font-size: 11px; color: var(--dim); }
  .gantt-hd .stats b { color: var(--clay); }
  .gantt { position: relative; border-top: 1px solid var(--outline);
           border-bottom: 1px solid var(--outline); min-height: 32px; }
  .lane { position: relative; height: 16px;
          border-bottom: 1px dashed rgba(255,255,255,0.04); }
  .seg { position: absolute; top: 2px; height: 12px; border-radius: 2px;
         opacity: .85; cursor: crosshair; }
  .seg:hover { opacity: 1; outline: 1px solid var(--term-fg); z-index: 2; }
  .gantt-rule { position: absolute; top: 0; bottom: 0; width: 0;
                border-left: 1px dashed var(--subtle); opacity: .4;
                pointer-events: none; }
  .gantt-axis { display: flex; justify-content: space-between;
                font-size: 10px; color: var(--subtle); padding: 4px 0; }
  .gantt-leg { font-size: 10px; color: var(--subtle); margin-top: 8px;
               display: flex; gap: 14px; flex-wrap: wrap; }
  .gantt-leg .sw { display: inline-block; width: 14px; height: 10px;
                   border-radius: 2px; vertical-align: middle; margin-right: 4px; }

  /* ——— block-char bars ——— */
  .bar { display: grid; grid-template-columns: 26ch 1fr 8ch; gap: 14px;
         padding: 2px 0; align-items: center; }
  .bar .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar .blocks { color: var(--clay); white-space: pre; overflow: hidden; }
  .bar .blocks .empty { color: var(--subtle); }
  .bar .pct { text-align: right; color: var(--dim); }
  .bar:hover .name { color: var(--clay); }

  /* ——— drill-down lists (top prompts, cache breaks) ——— */
  .drill details { border-top: 1px solid var(--outline); }
  .drill details:last-of-type { border-bottom: 1px solid var(--outline); }
  .drill summary { list-style: none; cursor: pointer;
    display: grid; grid-template-columns: 8ch 1fr; gap: 16px;
    padding: 9px 4px; align-items: baseline; }
  .drill summary::-webkit-details-marker { display: none; }
  .drill summary:hover { background: var(--hover); }
  .drill .amt { font-weight: 700; text-align: right; color: var(--clay); }
  .drill .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .drill .meta { grid-column: 2; font-size: 11px; color: var(--subtle); }
  .drill details[open] summary .desc { white-space: normal; }
  .drill .body { padding: 4px 4px 14px calc(8ch + 20px); font-size: 12px; color: var(--dim); }

  /* ——— transcript context (±2 user msgs) — light inset for legibility ——— */
  .ctx { margin: 8px 0 12px; padding: 10px 14px;
         background: #F0EEE6; color: #1a1918;
         border-radius: 6px; font-size: 12px; }
  .ctx-msg { padding: 4px 0; white-space: pre-wrap; }
  .ctx-msg .who { color: #87867F; font-size: 11px; }
  .ctx-msg .ts { color: #87867F; font-size: 10px; margin-left: 8px; }
  .ctx-msg.here { margin: 2px -14px; padding: 6px 11px 6px 14px;
                  border-left: 3px solid var(--clay);
                  background: rgba(217,119,87,0.10); }
  .ctx-msg.here .who { color: var(--clay); font-weight: 500; }
  .ctx-gap { color: #87867F; font-size: 11px; padding: 3px 0 3px 7ch; }
  .ctx-gap::before { content: '⟨ '; }
  .ctx-gap::after  { content: ' ⟩'; }
  .ctx-break { margin: 2px -14px; padding: 8px 11px 8px 14px;
               border-left: 3px solid #BD5E6D;
               background: rgba(189,94,109,0.12); color: #A63244; }
  .ctx-break b { color: #1a1918; margin-right: 6px; }

  .more-btn { display: block; width: 100%; margin-top: 10px; padding: 9px;
              background: none; border: 1px dashed var(--subtle); cursor: pointer;
              font: 500 11px/1 var(--mono); letter-spacing: 0.06em;
              color: var(--dim); }
  .more-btn:hover { border-color: var(--dim); color: var(--term-fg); }

  /* ——— tables ——— */
  .scroll { max-height: 440px; overflow: auto;
            border-top: 1px solid var(--outline); border-bottom: 1px solid var(--outline); }
  table { width: 100%; border-collapse: collapse; font-size: 12px; }
  th, td { text-align: left; padding: 6px 10px; }
  td { border-top: 1px solid rgba(255,255,255,0.04); }
  th { position: sticky; top: 0; background: var(--term-bg); z-index: 1;
       font-weight: 500; font-size: 11px; color: var(--subtle);
       cursor: pointer; user-select: none;
       border-bottom: 1px solid var(--outline); }
  th:hover { color: var(--dim); }
  th.sorted { color: var(--clay); }
  th.sorted::after { content: ' ↓'; }
  th.sorted.asc::after { content: ' ↑'; }
  td.num, th.num { text-align: right; }
  tbody tr:hover td { background: var(--hover); }

  footer { margin-top: 28px; color: var(--subtle); font-size: 11px;
           display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

  code { color: var(--blue); }
  a { color: var(--clay); }
  ::selection { background: var(--clay); color: var(--term-bg); }

  @media (max-width: 760px) {
    body { padding: 20px 12px 48px; }
    .term-body { padding: 16px 16px 24px; }
    #hero-total { font-size: 40px; }
    .bar { grid-template-columns: 14ch 1fr 7ch; gap: 8px; }
    .drill summary { grid-template-columns: 6ch 1fr; }
    .drill .body { padding-left: 12px; }
    .take { grid-template-columns: 7ch 1fr; gap: 12px; }
  }
</style>
</head>
<body>

<div class="term">
  <div class="titlebar">
    <span class="dot"></span><span class="dot"></span><span class="dot"></span>
    <span class="path" id="title-path">~/.claude — session-report</span>
  </div>
  <div class="term-body">

    <div class="cmd"><span class="prompt">&gt;</span> claude usage <span id="cmd-flags"></span></div>
    <div id="meta-line">loading…</div>

    <div id="hero">
      <div id="hero-total">—</div>
      <div id="hero-split"></div>
    </div>

    <!-- ====================================================================
         FINDINGS — agent fills this. 3–5 one-line takeaways. Use .bad for
         waste/anomalies, .good for healthy signals, .info for neutral.
         ==================================================================== -->
    <section>
      <div class="hr"></div>
      <h2>findings</h2>
      <div class="section-body" id="takeaways">
        <!-- AGENT: anomalies -->
        <div class="take"><div class="fig">—</div><div class="txt">No findings generated yet.</div></div>
        <!-- /AGENT -->
      </div>
    </section>

    <!-- ====================================================================
         Everything below renders automatically from #report-data.
         ==================================================================== -->
    <section>
      <div class="hr"></div>
      <h2>summary</h2>
      <div class="section-body" id="overall-grid"></div>
    </section>

    <section>
      <div class="hr"></div>
      <h2>tokens by project<span class="hint">share of total</span></h2>
      <div class="section-body" id="project-bars"></div>
    </section>

    <section id="timeline-section">
      <div class="hr"></div>
      <h2>session timeline by day<span class="hint">click a day · ←/→ to navigate</span></h2>
      <div class="section-body">
        <div class="days" id="day-pills"></div>
        <div class="gantt-hd">
          <span class="day" id="g-day">—</span>
          <span class="stats" id="g-stats"></span>
        </div>
        <div class="gantt-axis"><span>00:00</span><span>06:00</span><span>12:00</span><span>18:00</span><span>24:00</span></div>
        <div class="gantt" id="gantt"></div>
        <div class="gantt-leg" id="gantt-leg"></div>
      </div>
    </section>

    <section>
      <div class="hr"></div>
      <h2>most expensive prompts<span class="hint">click to expand context</span></h2>
      <div class="section-body drill" id="top-prompts"></div>
    </section>

    <section>
      <div class="hr"></div>
      <h2>cache breaks<span class="hint">&gt;100k uncached · click for context</span></h2>
      <div class="section-body drill" id="cache-breaks"></div>
    </section>

    <section>
      <div class="hr"></div>
      <h2>projects</h2>
      <div class="section-body scroll"><table id="tbl-projects"></table></div>
    </section>

    <section>
      <div class="hr"></div>
      <h2>subagent types</h2>
      <div class="section-body scroll"><table id="tbl-subagents"></table></div>
    </section>

    <section>
      <div class="hr"></div>
      <h2>skills &amp; slash commands</h2>
      <div class="section-body scroll"><table id="tbl-skills"></table></div>
    </section>

    <section>
      <div class="hr"></div>
      <h2>recommendations</h2>
      <div class="section-body">
        <!-- AGENT: optimizations -->
        <div class="callout">No suggestions generated yet.</div>
        <!-- /AGENT -->
      </div>
    </section>

    <footer>
      <span id="foot-gen"></span>
      <span id="foot-stats"></span>
    </footer>

  </div>
</div>

<!-- ========================================================================
     DATA — agent replaces the {} below with the full --json output.
     ======================================================================== -->
<script id="report-data" type="application/json">{}</script>

<script>
(function() {
  const DATA = JSON.parse(document.getElementById('report-data').textContent || '{}');
  const $ = id => document.getElementById(id);
  const fmt = n => n>=1e9 ? (n/1e9).toFixed(2)+'B' : n>=1e6 ? (n/1e6).toFixed(2)+'M'
              : n>=1e3 ? (n/1e3).toFixed(1)+'k' : String(n);
  const pct = (a,b) => b>0 ? ((100*a/b).toFixed(1)+'%') : '—';
  const esc = s => String(s).replace(/[&<>"]/g, c =>
    ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));
  const short = p => String(p||'').replace(/^-Users-[^-]+-/,'').replace(/^code-/,'');
  const MON = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  const niceDate = iso => { const d = new Date(iso); return isNaN(d) ? '' :
    `${MON[d.getMonth()]} ${d.getDate()} · ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`; };

  if (!DATA.overall) { $('meta-line').textContent = 'no data — embed JSON in #report-data.'; return; }

  // header + hero
  const o = DATA.overall, it = o.input_tokens;
  const GRAND = it.total + o.output_tokens;
  const share = n => GRAND>0 ? (100*n/GRAND).toFixed(1)+'%' : '—';
  const span = o.span;
  $('cmd-flags').innerHTML = DATA.since
    ? `<span class="flag">--since</span> ${esc(DATA.since)}` : '';
  $('meta-line').textContent =
    (span ? `${span.from.slice(0,10)} → ${span.to.slice(0,10)}` : '') +
    ` · ${DATA.root || ''}`;
  $('foot-gen').textContent = `generated ${DATA.generated_at?.slice(0,16).replace('T',' ') || ''}`;
  $('foot-stats').textContent =
    `${o.sessions} sessions · ${o.api_calls} api calls · ${o.human_messages} prompts`;

  const num = fmt(GRAND), m = num.match(/^([\d.]+)([A-Za-z]*)$/);
  $('hero-total').innerHTML =
    `${m?m[1]:num}<span class="unit">${m?m[2]:''}</span><span class="label">tokens</span>`;
  const cacheCls = it.pct_cached>=85 ? 'ok' : 'warn';
  $('hero-split').innerHTML =
    `<b>${fmt(it.total)}</b> input <span class="${cacheCls}">(${it.pct_cached}% cache-read)</span> · `+
    `<b>${fmt(o.output_tokens)}</b> output · all figures below are % of this total`;

  // overall stat grid
  $('overall-grid').innerHTML = [
    ['sessions', o.sessions],
    ['api calls', o.api_calls],
    ['human msgs', o.human_messages],
    ['active hours', o.hours.active, `${o.hours.wall_clock} wall-clock`],
    ['cache breaks', o.cache_breaks_over_100k, '>100k uncached'],
    ['subagent calls', o.subagent.calls, `avg ${fmt(o.subagent.avg_tokens_per_call)}`],
  ].map(([l,v,d]) =>
    `<div class="stat"><div class="label">${l}</div>`+
    `<div class="val">${typeof v==='number'&&v>=1e4?fmt(v):v}</div>`+
    (d?`<div class="detail">${d}</div>`:'')+`</div>`).join('');

  // session timeline by day
  (function() {
    const days = (DATA.by_day||[]).slice(-14);
    if (!days.length) { $('timeline-section').style.display='none'; return; }
    const PCOL = ['rgb(177,185,249)','rgb(78,186,101)','#D97757','rgb(255,193,7)',
                  'rgb(255,107,128)','#9b8cff','#6ec1d6','#c792ea'];
    const dayTotal = days.reduce((a,d)=>a+d.tokens,0) || 1;
    const tokMax = Math.max(...days.map(d=>d.tokens));
    const projects = [...new Set(days.flatMap(d=>d.sessions.map(s=>s.project)))];
    const colorOf = p => PCOL[projects.indexOf(p)%PCOL.length];
    const hhmm = m => (m>=1440?`+${Math.floor(m/1440)}d `:'') +
      `${String(Math.floor(m/60)%24).padStart(2,'0')}:${String(m%60).padStart(2,'0')}`;
    const md = iso => { const [,mo,da]=iso.split('-'); return `${MON[+mo-1]} ${+da}`; };
    let sel = days.findIndex(d=>d.tokens===tokMax);

    function pills() {
      $('day-pills').innerHTML = days.map((d,i)=>
        `<button class="dpill${d.tokens===tokMax?' heaviest':''}${i===sel?' sel':''}" data-i="${i}">`+
        `<span class="dow">${esc(d.dow)}</span>`+
        `<span class="date">${esc(md(d.date))}</span>`+
        `<span class="pct">${(100*d.tokens/dayTotal).toFixed(1)}%</span>`+
        `<span class="ns">${d.sessions.length} sess</span></button>`
      ).join('');
      $('day-pills').querySelectorAll('.dpill').forEach(el=>
        el.onclick=()=>{sel=+el.dataset.i;pills();gantt();});
    }
    function gantt() {
      const d = days[sel], DAY = 1440;
      $('g-day').textContent = `${d.dow} ${md(d.date)}`;
      $('g-stats').innerHTML = `${d.sessions.length} sessions · ${fmt(d.tokens)} tokens`+
        ` · peak <b>${d.peak}</b> concurrent at <b>${hhmm(d.peak_at_min)}</b>`;
      const lanes = [];
      for (const s of d.sessions) {
        let placed = false;
        for (const L of lanes) if (L[L.length-1].end_min <= s.start_min) { L.push(s); placed=true; break; }
        if (!placed) lanes.push([s]);
      }
      let h = '';
      for (let t=0;t<=24;t+=6) h += `<div class="gantt-rule" style="left:${100*t/24}%"></div>`;
      h += lanes.map(L=>`<div class="lane">${L.map(s=>{
        const end = Math.min(s.end_min, DAY);
        const w = Math.max(0.15, 100*(end-s.start_min)/DAY);
        const tip = `folder: ${short(s.project)}\n`+
          `${hhmm(s.start_min)}–${hhmm(s.end_min)} · ${fmt(s.tokens)} tokens\n`+
          `session ${s.id}`;
        return `<span class="seg" style="left:${100*s.start_min/DAY}%;width:${w}%;`+
          `background:${colorOf(s.project)}" title="${esc(tip)}"></span>`;
      }).join('')}</div>`).join('');
      $('gantt').innerHTML = h || '<div class="callout">no sessions</div>';
    }
    document.addEventListener('keydown',e=>{
      if (e.key==='ArrowRight'&&sel<days.length-1){sel++;pills();gantt();e.preventDefault();}
      if (e.key==='ArrowLeft'&&sel>0){sel--;pills();gantt();e.preventDefault();}
    });
    $('gantt-leg').innerHTML = projects.slice(0,12).map(p=>
      `<span><span class="sw" style="background:${colorOf(p)}"></span>${esc(short(p))}</span>`).join('');
    pills(); gantt();
  })();

  // block-char project bars
  (function() {
    const W = 48;
    const rows = Object.entries(DATA.by_project||{})
      .map(([k,v]) => [k, v.input_tokens.total + v.output_tokens])
      .sort((a,b)=>b[1]-a[1]).slice(0,15);
    const max = rows[0]?.[1] || 1;
    $('project-bars').innerHTML = rows.map(([k,v]) => {
      const n = Math.max(1, Math.round(W*v/max));
      return `<div class="bar"><span class="name" title="${esc(k)} — ${fmt(v)}">${esc(short(k))}</span>`+
        `<span class="blocks">${'█'.repeat(n)}<span class="empty">${'░'.repeat(W-n)}</span></span>`+
        `<span class="pct">${share(v)}</span></div>`;
    }).join('');
  })();

  // ±2 user-message transcript context
  function renderContext(ctx, mark) {
    if (!ctx || !ctx.length) return '<div class="ctx-gap">no transcript context available</div>';
    let h = '<div class="ctx">';
    ctx.forEach((m, i) => {
      const who = m.here ? '&gt; user' : '  user';
      h += `<div class="ctx-msg${m.here?' here':''}">`+
           `<span class="who">${who}</span>  ${esc(m.text||'(non-text)')}`+
           `<span class="ts">${niceDate(m.ts)}</span></div>`;
      if (m.here && mark) h += mark;
      if (i < ctx.length-1 || m.here)
        h += `<div class="ctx-gap">${m.calls} api call${m.calls===1?'':'s'}</div>`;
    });
    return h + '</div>';
  }

  // expandable drill-down list with "show N more" toggle
  function drillList(hostId, items, rowFn, empty) {
    const SHOW = 5;
    const host = $(hostId);
    if (!items.length) { host.innerHTML = `<div class="callout">${empty}</div>`; return; }
    const head = items.slice(0,SHOW).map(rowFn).join('');
    const rest = items.slice(SHOW).map(rowFn).join('');
    host.innerHTML = head + (rest
      ? `<div hidden>${rest}</div><button class="more-btn">show ${items.length-SHOW} more</button>`
      : '');
    const btn = host.querySelector('.more-btn');
    if (btn) btn.onclick = () => {
      const r = btn.previousElementSibling; r.hidden = !r.hidden;
      btn.textContent = r.hidden ? `show ${items.length-SHOW} more` : 'show less';
    };
  }

  drillList('top-prompts', (DATA.top_prompts||[]).slice(0,100), p => {
    const inTot = p.input.uncached+p.input.cache_create+p.input.cache_read;
    return `<details><summary>`+
      `<span class="amt">${share(p.total_tokens)}</span>`+
      `<span class="desc">${esc(p.text)}</span>`+
      `<span class="meta">${niceDate(p.ts)} · ${esc(short(p.project))} · ${p.api_calls} calls`+
        (p.subagent_calls?` · ${p.subagent_calls} subagents`:'')+
        ` · ${pct(p.input.cache_read,inTot)} cached</span>`+
      `</summary><div class="body">`+
      renderContext(p.context)+
      `<div>session <code>${esc(p.session)}</code></div>`+
      `<div>in: uncached ${fmt(p.input.uncached)} · cache-create ${fmt(p.input.cache_create)} · `+
      `cache-read ${fmt(p.input.cache_read)} · out ${fmt(p.output)}</div>`+
      `</div></details>`;
  }, 'No prompts in range.');

  drillList('cache-breaks', (DATA.cache_breaks||[]).slice(0,100), b =>
    `<details><summary>`+
    `<span class="amt">${fmt(b.uncached)}</span>`+
    `<span class="desc">${esc(short(b.project))} · `+
      `${b.kind==='subagent'?esc(b.agentType||'subagent'):'main'}</span>`+
    `<span class="meta">${niceDate(b.ts)} · ${pct(b.uncached,b.total)} of ${fmt(b.total)} uncached</span>`+
    `</summary><div class="body">`+
    renderContext(b.context,
      `<div class="ctx-break"><b>${fmt(b.uncached)}</b> uncached `+
      `(${pct(b.uncached,b.total)} of ${fmt(b.total)}) — cache break here</div>`)+
    `<div>session <code>${esc(b.session)}</code></div>`+
    `</div></details>`,
  'No cache breaks over threshold.');

  // sortable table
  function table(el, cols, rows) {
    let sortIdx = cols.findIndex(c=>c.sort), asc = false;
    function render() {
      const sorted = rows.slice().sort((a,b)=>{
        const va=a[sortIdx], vb=b[sortIdx];
        return (asc?1:-1)*(typeof va==='number' ? va-vb : String(va).localeCompare(String(vb)));
      });
      el.innerHTML = `<thead><tr>${cols.map((c,i)=>
        `<th class="${c.num?'num':''} ${i===sortIdx?'sorted'+(asc?' asc':''):''}" data-i="${i}">${c.h}</th>`
      ).join('')}</tr></thead><tbody>${sorted.map(r=>
        `<tr>${r.map((v,i)=>`<td class="${cols[i].num?'num':''}">${
          cols[i].fmt?cols[i].fmt(v):esc(v)}</td>`).join('')}</tr>`
      ).join('')}</tbody>`;
      el.querySelectorAll('th').forEach(th=>th.onclick=()=>{
        const i=+th.dataset.i; if(i===sortIdx)asc=!asc; else{sortIdx=i;asc=false;} render();
      });
    }
    render();
  }

  function statRows(obj) {
    return Object.entries(obj||{}).map(([k,v])=>[
      short(k), GRAND>0 ? 100*(v.input_tokens.total+v.output_tokens)/GRAND : 0,
      v.sessions, v.api_calls, v.human_messages,
      v.input_tokens.total, v.input_tokens.pct_cached, v.output_tokens,
      v.hours.active, v.cache_breaks_over_100k,
      v.subagent.calls, v.subagent.avg_tokens_per_call,
    ]);
  }
  const statCols = [
    {h:'name'},{h:'% total',num:1,sort:1,fmt:v=>v.toFixed(1)+'%'},
    {h:'sess',num:1},{h:'calls',num:1},{h:'msgs',num:1},
    {h:'input',num:1,fmt:fmt},{h:'%cached',num:1,fmt:v=>v+'%'},
    {h:'output',num:1,fmt:fmt},{h:'active h',num:1},{h:'breaks',num:1},
    {h:'subagents',num:1},{h:'avg sub tok',num:1,fmt:fmt},
  ];
  table($('tbl-projects'), statCols, statRows(DATA.by_project));
  table($('tbl-subagents'), statCols, statRows(DATA.by_subagent_type));
  table($('tbl-skills'), statCols, statRows(DATA.by_skill));
})();
</script>
</body>
</html>