fix(dashboard): repair AgentsView mobile header and reorder actions

The AgentsView mobile header was wrapping onto two rows because
DocumentsView.css carried leaked agents-view-* rules forcing
flex-wrap: wrap on the header/controls/title and width: 100% on the
primary-actions group. Removed those stale overrides so AgentsView's
own mobile rules can take effect.

Header changes:
- Drop the Refresh button.
- Reorder: Bot icon, view-toggle, then primary-actions on the far right
  (Controls icon left of New Agent +). Controls is now icon-only with
  no text label on every viewport.
- Bump the Bot icon to 24px (was 20) and give its mobile container a
  32x32 footprint to align with the view-toggle pill.
- Pin primary-actions to the right via space-between on the controls
  flex container; everything stays on one row at <=320px.

Layout: move AgentMetricsBar (stats cards) above the agent collection
so stats sit on top of the list/board/tree/org views.

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

packages/dashboard/app/components/AgentsView.css

@@ -868,6 +868,7 @@
     flex-direction: row;
     align-items: center;
     flex-wrap: nowrap;
+    justify-content: flex-start;
     gap: var(--space-xs);
     padding: var(--space-sm) var(--space-md);
   }
@@ -883,31 +884,27 @@
     display: none;
   }
 
+  /* Layout: title (Bot) on the left, view-toggle right after it, then the
+     primary-actions group pinned to the far right of the row. The flex
+     container grows to fill remaining space, and `space-between` separates
+     the toggle (left side) from primary-actions (right side). */
   .agents-view-controls {
     flex: 1 1 auto;
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: space-between;
     gap: var(--space-xs);
     min-width: 0;
   }
 
-  /* View toggle (List/Board/Tree/Org) — compact icon-only group */
+  /* View toggle (List/Board/Tree/Org) — keep the 32px pill chrome from the
+     base styles. Inner buttons stay at the base 28×28 (centered in the 2px
+     pill padding). All surrounding header icons below are sized to match
+     that 28×28 inner footprint so every icon lines up with the view-toggle
+     buttons. */
   .agents-view-controls .view-toggle {
-    display: inline-flex;
     flex: 0 0 auto;
-    gap: 0;
-  }
-
-  .agents-view-controls .view-toggle-btn {
-    width: 32px;
-    height: 32px;
-    min-width: 32px;
-    padding: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
   }
 
   .agents-view-primary-actions {
@@ -918,30 +915,46 @@
     flex: 0 0 auto;
   }
 
-  /* Controls button: icon-only on mobile to save horizontal space */
+  /* Controls button: icon-only on mobile, sized to match view-toggle buttons */
   .agent-controls-trigger {
     padding: 0;
-    width: 32px;
-    height: 32px;
-    min-width: 32px;
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
     font-size: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
 
-  /* New Agent: icon + short label, tightened */
+  /* New Agent: icon-only on mobile, sized to match view-toggle buttons.
+     Text is visually hidden via font-size: 0 (the SVG icon keeps its size). */
   .agents-view-primary-actions .btn--primary {
-    height: 32px;
-    padding: 0 var(--space-sm);
-    font-size: 12px;
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
+    padding: 0;
+    font-size: 0;
+    gap: 0;
     white-space: nowrap;
-    gap: var(--space-xs);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .agents-view-primary-actions .btn-icon {
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
+  }
+
+  /* Title's Bot icon: 32×32 footprint so it sits at the same outer height
+     as the view-toggle pill. The icon itself is 24px (set in JSX), giving
+     it more visual weight than the surrounding 16px button icons. */
+  .agents-view-title {
     width: 32px;
     height: 32px;
-    min-width: 32px;
+    align-items: center;
+    justify-content: center;
   }
 }

packages/dashboard/app/components/AgentsView.tsx

@@ -667,7 +667,7 @@ export function AgentsView({ addToast, projectId }: AgentsViewProps) {
     <div className="agents-view">
       <div className="agents-view-header">
         <div className="agents-view-title">
-          <Bot size={20} />
+          <Bot size={24} />
           <h2>Agents</h2>
         </div>
         <div className="agents-view-controls">
@@ -712,14 +712,15 @@ export function AgentsView({ addToast, projectId }: AgentsViewProps) {
           <div className="agents-view-primary-actions">
             <button
               ref={controlsTriggerRef}
-              className={`btn agent-controls-trigger${isControlsPanelOpen ? " agent-controls-trigger--active" : ""}`}
+              className={`btn-icon agent-controls-trigger${isControlsPanelOpen ? " agent-controls-trigger--active" : ""}`}
               onClick={() => setIsControlsPanelOpen((open) => !open)}
+              title="Controls"
+              aria-label="Controls"
               aria-haspopup="dialog"
               aria-expanded={isControlsPanelOpen}
               aria-controls={controlsPanelId}
             >
               <SlidersHorizontal size={16} />
-              Controls
             </button>
             <button
               className="btn btn--primary"
@@ -731,14 +732,6 @@ export function AgentsView({ addToast, projectId }: AgentsViewProps) {
               <Plus size={16} />
               New Agent
             </button>
-            <button
-              className="btn-icon"
-              onClick={() => void loadAgents()}
-              title="Refresh"
-              disabled={isLoading}
-            >
-              <RefreshCw size={16} className={isLoading ? "spin" : ""} />
-            </button>
           </div>
         </div>
       </div>
@@ -863,6 +856,9 @@ export function AgentsView({ addToast, projectId }: AgentsViewProps) {
           projectId={projectId}
         />
 
+        {/* Stats cards — shown above the agent list */}
+        <AgentMetricsBar stats={stats} />
+
         {/* Agent Collection */}
         {agentView === "tree" ? (
           <div className="agent-tree__view">
@@ -1264,7 +1260,6 @@ export function AgentsView({ addToast, projectId }: AgentsViewProps) {
         )}
 
         {/* Secondary sections */}
-        <AgentMetricsBar stats={stats} />
         <ActiveAgentsPanel agents={activeAgents} projectId={projectId} onAgentSelect={setSelectedAgentId} />
       </div>
 

packages/dashboard/app/components/DocumentsView.css

@@ -622,16 +622,6 @@
     margin-left: auto;
   }
 
-  .agents-view-primary-actions {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  .agents-view-primary-actions .btn,
-  .agents-view-primary-actions .btn-icon {
-    min-height: calc(var(--space-2xl) + var(--space-xs));
-  }
-
   .agent-controls-panel {
     left: var(--space-md);
     right: var(--space-md);
@@ -704,28 +694,10 @@
     margin-bottom: var(--space-sm);
   }
 
-  .agents-view-header {
-    padding: var(--space-sm) var(--space-md);
-    flex-wrap: wrap;
-    gap: var(--space-sm);
-  }
-
-  .agents-view-title h2 {
-    font-size: 16px;
-  }
-
   .agents-view-content {
     padding: var(--space-md);
   }
 
-  .agents-view-controls {
-    flex-wrap: wrap;
-  }
-
-  .agents-view-title {
-    flex-wrap: wrap;
-  }
-
 
   /* Skills View mobile */
   .skills-view-header {