Cost breakdown modal: show costs by stage and model when clicking cost badge

[eltmon]

Summary

When clicking on the cost badge on an issue card, show a modal/popover with detailed cost breakdown.

Requirements

Breakdown by Stage

• Planning cost - Cost of the planning agent session
• Implementation cost - Cost of the main working agent session
• Specialist costs (each separately):
  • Review agent cost
  • Test agent cost
  • Merge agent cost
• Subagent costs - Costs from nested subagents (see note below)
• Total cost - Sum of all stages

Breakdown by Model

• Group costs by model used (opus, sonnet, haiku)
• Show token counts per model
• Show percentage of total cost per model

UI Design

• Click on cost badge opens a modal or slide-out panel
• Clean table layout with columns: Stage | Model | Tokens | Cost
• Summary section at bottom with totals by model
• Duration per stage would be nice-to-have

Technical Notes

The backend already tracks:

• Agent state files in ~/.panopticon/agents/{agent-id}/state.json with type field (planning vs regular)
• Specialist session IDs via getSessionId() in specialists.ts
• Session JSONL files contain model info per message

Need to:

1. Add API endpoint /api/issues/:id/cost-breakdown that returns structured cost data
2. Create frontend modal component with cost breakdown UI
3. Wire up click handler on cost badge to open modal

⚠️ Dependency: Subagent Cost Tracking (PAN-81)

Current gap: Subagent costs are not being captured in cost calculations.

Claude Code stores subagent sessions in nested directories:

~/.claude/projects/<workspace>/
├── session-id.jsonl              # Main agent (✓ counted)
└── session-id/
    └── subagents/
        └── agent-xxx.jsonl       # Subagent (✗ NOT counted\!)

Why this matters for PAN-77:

• Review-agent spawns code-review-performance, code-review-security subagents
• These use Haiku model but their costs are currently invisible
• The "Specialist costs" breakdown would be incomplete/misleading

Options:

1. Wait for PAN-81 - Event-sourced tracking will capture all costs uniformly
2. Quick fix first - Update parseWorkspaceSessionUsageAsync to recursively include subagents/ directories
3. Show "incomplete" warning - If subagent data unavailable, indicate costs may be understated

Attribution question: Should subagent costs:

• Roll up into parent agent? (e.g., code-review-performance → review-agent total)
• Show as separate line items? (more granular but cluttered)
• Both? (collapsible tree view)

Recommend: Roll up into parent by default, with expandable detail on click.

Acceptance Criteria

• Clicking cost badge opens breakdown modal
• Shows costs separated by planning/implementation/specialists
• Includes subagent costs (rolled up into parent agent)
• Shows costs grouped by model
• Shows token counts alongside dollar amounts
• Modal is dismissable (click outside or X button)

[eltmon]

Clarification: Backward Compatibility

This feature should be backward compatible:

• Issues that were worked on before this feature is implemented should continue displaying just the total cost
• Don't attempt to reconstruct or recover stage breakdowns from historical data
• The cost badge click should either:
  • Open the breakdown modal (if detailed data exists)
  • Do nothing / show "detailed breakdown not available" (if only total exists)

The breakdown tracking should start fresh from when this feature is implemented.