Show full token breakdown in session visualizer

[kirang89]

Problem

The session visualizer currently only displays total tokens per ask, even though the AskEntry type already carries a full token breakdown from Usage:

// session.ts – Usage interface
export interface Usage {
  inputTokens: number;
  outputTokens: number;
  totalTokens: number;
  cacheReadTokens: number;
  cacheWriteTokens: number;
}

This maps to the usage field on AskEntry in the visualizer (already stored and surfaced by visualizer-server.ts):

usage?: {
  input: number;
  output: number;
  totalTokens: number;
  cacheRead: number;
  cacheWrite: number;
};

Currently, the rendering in Visualizer.tsx only shows total:

{ask.usage && <>{formatTokens(ask.usage.totalTokens)} tokens</>}

Proposed Change

Expand the token display to show the full breakdown. Possible treatments:

• Inline summary – show input / output next to total, e.g. 4.2k tokens (3.1k in · 1.1k out)
• Tooltip / popover – hover over the token count to see the breakdown including cache read/write
• Expanded row – a collapsible detail row beneath the ask summary with a small token stats table

Cache tokens (cacheRead, cacheWrite) are particularly useful for diagnosing cost because cached reads are billed at a fraction of normal input cost. They should be included in the breakdown.

Acceptance Criteria

• Input tokens are displayed per ask
• Output tokens are displayed per ask
• Cache-read and cache-write tokens are surfaced (tooltip, expanded section, or inline)
• Display degrades gracefully when usage is absent (backwards compatibility with older session logs)