feat: model panel shows input/output/cache breakdown per model

Each model row now shows a breakdown line:
  in 1.2M  out 8.4M  cache 4.9B

Hover tooltip also shows full breakdown.
Numbers now match top bar — billed tokens as primary, cache as detail.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: vicarious11

src/agenttop/web/static/css/theme.css

@@ -291,6 +291,7 @@ h3 { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--sp-3); co
 .model-stats { display: flex; gap: var(--sp-3); font-size: var(--text-xs); font-family: var(--font-mono); }
 .model-tokens { color: var(--text-secondary); }
 .model-cost { color: var(--tool-claude); }
+.model-breakdown { display: flex; gap: var(--sp-2); font-size: 9px; font-family: var(--font-mono); color: var(--text-dim); padding-top: 1px; }
 .model-bar-track { height: 4px; background: var(--bg-elevated); border-radius: 2px; display: flex; overflow: hidden; }
 .model-seg { height: 100%; transition: width var(--duration-normal); }
 .seg-input  { background: var(--accent); opacity: 0.8; }

src/agenttop/web/static/js/panels.js

@@ -77,7 +77,7 @@ const Panels = {
       const iPct = (m.input  / maxBilled * 100).toFixed(2);
       const oPct = (m.output / maxBilled * 100).toFixed(2);
       return `
-        <div class="model-row">
+        <div class="model-row" title="In: ${App.formatNum(m.input)} | Out: ${App.formatNum(m.output)} | Cache: ${App.formatNum(m.cache)}">
           <div class="model-info">
             <span class="model-name" style="color:${m.color}">${m.name}</span>
             <span class="model-stats">
@@ -89,6 +89,11 @@ const Panels = {
             <div class="model-seg seg-input" style="width:${iPct}%" title="Input: ${App.formatNum(m.input)}"></div>
             <div class="model-seg seg-output" style="width:${oPct}%" title="Output: ${App.formatNum(m.output)}"></div>
           </div>
+          <div class="model-breakdown">
+            <span>in ${App.formatNum(m.input)}</span>
+            <span>out ${App.formatNum(m.output)}</span>
+            ${m.cache > 0 ? `<span>cache ${App.formatNum(m.cache)}</span>` : ''}
+          </div>
         </div>
       `;
     }).join('');