feat(dashboard): rearrange agent + task detail panels

- AgentsView: agent metrics bar moves to the top of the scrolling
  content (was below the agent list); token-usage panel moves into
  the controls dropdown next to the heartbeat slider, which is now
  scrollable so the added content fits on short viewports.
- AgentsView mobile: 2x2 grid for the metric cards with tighter
  padding and smaller value/label text so labels don't crowd off
  the card on narrow phones.
- TaskDetailModal: new "Stats" tab at the end of the fixed tab list
  hosts the token-usage panel, removed from the inline definition
  body.

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

packages/dashboard/app/components/AgentsView.css

@@ -834,6 +834,29 @@
 }
 
 @media (max-width: 768px) {
+  /* Stats cards: drop to a 2x2 grid with tighter padding so they
+     don't squeeze the labels off the card on narrow phones. */
+  .agent-metrics-bar {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--space-sm);
+    margin-bottom: var(--space-md);
+  }
+
+  .agent-metric-card {
+    padding: var(--space-sm) var(--space-md);
+    gap: var(--space-sm);
+    min-width: 0;
+  }
+
+  .agent-metric-value {
+    font-size: 16px;
+  }
+
+  .agent-metric-label {
+    font-size: calc(var(--space-sm) + var(--space-xs) * 0.5);
+  }
+
   .agent-org-chart {
     padding: var(--space-sm);
     padding-bottom: calc(var(--space-lg) + var(--space-sm));