groove-dev 0.26.38 → 0.27.0

package/packages/gui/src/lib/hooks/use-dashboard.js

@@ -8,6 +8,8 @@ export function useDashboard() {
   const agents = useGrooveStore((s) => s.agents);
 
   const [data, setData] = useState(null);
+  const [teamBurn, setTeamBurn] = useState([]);
+  const [memory, setMemory] = useState({ constraints: [], discoveries: [], roles: [], specializations: null });
   const [loading, setLoading] = useState(true);
   const [kpiHistory, setKpiHistory] = useState({
     tokens: [], cost: [], saved: [], efficiency: [],
@@ -21,9 +23,23 @@ export function useDashboard() {
 
     async function fetch() {
       try {
-        const d = await api.get('/dashboard');
+        const [d, teams, constraints, discoveries, chainRoles, specs] = await Promise.all([
+          api.get('/dashboard'),
+          api.get('/tokens/by-team').catch(() => ({ teams: [] })),
+          api.get('/memory/constraints').catch(() => ({ constraints: [] })),
+          api.get('/memory/discoveries?limit=20').catch(() => ({ discoveries: [] })),
+          api.get('/memory/handoff-chain').catch(() => ({ roles: [] })),
+          api.get('/memory/specializations').catch(() => ({ perAgent: {}, perProjectRole: {} })),
+        ]);
         if (!alive) return;
         setData(d);
+        setTeamBurn(teams?.teams || []);
+        setMemory({
+          constraints: constraints?.constraints || [],
+          discoveries: discoveries?.discoveries || [],
+          roles: chainRoles?.roles || [],
+          specializations: specs || { perAgent: {}, perProjectRole: {} },
+        });
         setLoading(false);
         lastFetch.current = Date.now();
 
@@ -32,15 +48,16 @@ export function useDashboard() {
           const now = Date.now();
           const add = (arr, val) => [...arr.slice(-59), { t: now, v: val || 0 }];
           const totalUsed = d.tokens?.totalTokens || 0;
-          const totalSaved = d.tokens?.savings?.total || 0;
-          const hypothetical = totalUsed + totalSaved;
           const input = d.tokens?.totalInputTokens || 0;
           const output = d.tokens?.totalOutputTokens || 0;
+          const breakdown = d.agents?.breakdown || [];
+          const withQ = breakdown.filter((a) => a.quality?.score != null);
+          const avgQ = withQ.length > 0 ? withQ.reduce((s, a) => s + a.quality.score, 0) / withQ.length : 0;
           return {
             tokens: add(prev.tokens, totalUsed),
             cost: add(prev.cost, d.tokens?.totalCostUsd),
-            saved: add(prev.saved, totalSaved),
-            efficiency: add(prev.efficiency, hypothetical > 0 ? (totalSaved / hypothetical) * 100 : 0),
+            saved: add(prev.saved, avgQ),
+            efficiency: add(prev.efficiency, d.rotation?.totalRotations || 0),
             cache: add(prev.cache, d.tokens?.cacheHitRate),
             inputOutput: add(prev.inputOutput, output > 0 ? input / output : 0),
             agents: add(prev.agents, d.agents?.running || 0),
@@ -69,5 +86,6 @@ export function useDashboard() {
     data, loading, agents, connected, kpiHistory,
     lastFetch: lastFetch.current,
     agentBreakdown, routing, rotation, adaptive, journalist, rotating,
+    teamBurn, memory,
   };
 }

package/packages/gui/src/stores/groove.js

@@ -44,6 +44,7 @@ export const useGrooveStore = create((set, get) => ({
   // ── Navigation ────────────────────────────────────────────
   activeView: 'agents',           // 'agents' | 'editor' | 'dashboard' | 'marketplace' | 'teams' | 'settings'
   detailPanel: null,              // null | { type: 'agent', agentId } | { type: 'spawn' } | { type: 'journalist' }
+  teamDetailPanels: {},            // { [teamId]: detailPanel } — persists panel state per team
   commandPaletteOpen: false,
 
   // ── Layout persistence ────────────────────────────────────
@@ -57,8 +58,6 @@ export const useGrooveStore = create((set, get) => ({
   chatHistory: loadJSON('groove:chatHistory'),
   chatInputs: {},   // Per-agent draft input text — persists across tab switches
   tokenTimeline: {},
-  dashTelemetry: {},
-  ccChartTimeline: [],
 
   // ── Approvals ─────────────────────────────────────────────
   pendingApprovals: [],
@@ -264,7 +263,9 @@ export const useGrooveStore = create((set, get) => ({
               if (chatHistory[msg.oldAgentId]?.length) chatHistory[msg.newAgentId] = [...chatHistory[msg.oldAgentId]];
               if (tokenTimeline[msg.oldAgentId]?.length) tokenTimeline[msg.newAgentId] = [...tokenTimeline[msg.oldAgentId]];
               if (activityLog[msg.oldAgentId]?.length) activityLog[msg.newAgentId] = [...activityLog[msg.oldAgentId]];
-              return { chatHistory, tokenTimeline, activityLog, detailPanel: { type: 'agent', agentId: msg.newAgentId } };
+              const newPanel = { type: 'agent', agentId: msg.newAgentId };
+              const tid = get().activeTeamId;
+              return { chatHistory, tokenTimeline, activityLog, detailPanel: newPanel, teamDetailPanels: { ...s.teamDetailPanels, [tid]: newPanel } };
             });
           }
           break;
@@ -339,8 +340,17 @@ export const useGrooveStore = create((set, get) => ({
   async fetchTeams() {
     try {
       const data = await api.get('/teams');
-      const teams = data.teams || [];
+      let teams = data.teams || [];
       const defaultTeamId = data.defaultTeamId;
+      try {
+        const saved = JSON.parse(localStorage.getItem('groove:teamOrder') || '[]');
+        if (saved.length) {
+          const byId = Object.fromEntries(teams.map((t) => [t.id, t]));
+          const ordered = saved.filter((id) => byId[id]).map((id) => byId[id]);
+          const remaining = teams.filter((t) => !saved.includes(t.id));
+          teams = [...ordered, ...remaining];
+        }
+      } catch {}
       const { activeTeamId } = get();
       const ids = teams.map((t) => t.id);
       const resolved = ids.includes(activeTeamId) ? activeTeamId : defaultTeamId;
@@ -350,7 +360,11 @@ export const useGrooveStore = create((set, get) => ({
   },
 
   switchTeam(id) {
-    set({ activeTeamId: id, detailPanel: null });
+    const { activeTeamId, detailPanel, teamDetailPanels } = get();
+    const updated = { ...teamDetailPanels };
+    if (activeTeamId) updated[activeTeamId] = detailPanel;
+    const restored = updated[id] || null;
+    set({ activeTeamId: id, detailPanel: restored, teamDetailPanels: updated });
     localStorage.setItem('groove:activeTeamId', id);
   },
 
@@ -382,6 +396,14 @@ export const useGrooveStore = create((set, get) => ({
     }
   },
 
+  reorderTeams(fromIndex, toIndex) {
+    const teams = [...get().teams];
+    const [moved] = teams.splice(fromIndex, 1);
+    teams.splice(toIndex, 0, moved);
+    set({ teams });
+    try { localStorage.setItem('groove:teamOrder', JSON.stringify(teams.map((t) => t.id))); } catch {}
+  },
+
   async renameTeam(id, name) {
     try {
       const team = await api.patch(`/teams/${id}`, { name });
@@ -392,10 +414,23 @@ export const useGrooveStore = create((set, get) => ({
       throw err;
     }
   },
-  openDetail(descriptor) { set({ detailPanel: descriptor }); },
-  closeDetail() { set({ detailPanel: null }); },
-  selectAgent(id) { set({ detailPanel: { type: 'agent', agentId: id } }); },
-  clearSelection() { set({ detailPanel: null }); },
+  openDetail(descriptor) {
+    const tid = get().activeTeamId;
+    set((s) => ({ detailPanel: descriptor, teamDetailPanels: { ...s.teamDetailPanels, [tid]: descriptor } }));
+  },
+  closeDetail() {
+    const tid = get().activeTeamId;
+    set((s) => ({ detailPanel: null, teamDetailPanels: { ...s.teamDetailPanels, [tid]: null } }));
+  },
+  selectAgent(id) {
+    const tid = get().activeTeamId;
+    const panel = { type: 'agent', agentId: id };
+    set((s) => ({ detailPanel: panel, teamDetailPanels: { ...s.teamDetailPanels, [tid]: panel } }));
+  },
+  clearSelection() {
+    const tid = get().activeTeamId;
+    set((s) => ({ detailPanel: null, teamDetailPanels: { ...s.teamDetailPanels, [tid]: null } }));
+  },
   toggleCommandPalette() { set((s) => ({ commandPaletteOpen: !s.commandPaletteOpen })); },
 
   setDetailPanelWidth(w) {
@@ -656,6 +691,21 @@ export const useGrooveStore = create((set, get) => ({
   // Track which agents are thinking (sent a message, waiting for response)
   thinkingAgents: new Set(),
 
+  async stopAgent(id) {
+    try {
+      await api.post(`/agents/${id}/stop`);
+      // Clear thinking indicator
+      set((s) => {
+        const next = new Set(s.thinkingAgents);
+        next.delete(id);
+        return { thinkingAgents: next };
+      });
+      get().addToast('info', 'Stopped agent');
+    } catch (err) {
+      get().addToast('error', 'Stop failed', err.message);
+    }
+  },
+
   async instructAgent(id, message) {
     const agent = get().agents.find((a) => a.id === id);
     const isAlive = agent && (agent.status === 'running' || agent.status === 'starting');

package/packages/gui/src/views/agents.jsx

@@ -28,9 +28,33 @@ function savePositions(positions) {
   try { localStorage.setItem('groove:nodePositions', JSON.stringify(positions)); } catch {}
 }
 
+function loadTeamViewports() {
+  try { return JSON.parse(localStorage.getItem('groove:teamViewports') || '{}'); } catch { return {}; }
+}
+
+function saveTeamViewport(teamId, viewport) {
+  try {
+    const all = loadTeamViewports();
+    all[teamId] = viewport;
+    localStorage.setItem('groove:teamViewports', JSON.stringify(all));
+  } catch {}
+}
+
 /* ── Team Tab Bar (IDE-style) ──────────────────────────────── */
 
-function TeamTabBar() {
+function teamStatus(agents, teamId) {
+  const ta = agents.filter((a) => a.teamId === teamId);
+  if (ta.length === 0) return 'idle';
+  const running = ta.some((a) => a.status === 'running' || a.status === 'starting');
+  if (running) return 'working';
+  const allDone = ta.every((a) => a.status === 'completed');
+  if (allDone) return 'completed';
+  const anyCrashed = ta.some((a) => a.status === 'crashed');
+  if (anyCrashed) return 'crashed';
+  return 'idle';
+}
+
+export function TeamTabBar() {
   const teams = useGrooveStore((s) => s.teams);
   const activeTeamId = useGrooveStore((s) => s.activeTeamId);
   const agents = useGrooveStore((s) => s.agents);
@@ -39,11 +63,15 @@ function TeamTabBar() {
   const deleteTeam = useGrooveStore((s) => s.deleteTeam);
   const renameTeam = useGrooveStore((s) => s.renameTeam);
 
+  const reorderTeams = useGrooveStore((s) => s.reorderTeams);
+
   const [creating, setCreating] = useState(false);
   const [newName, setNewName] = useState('');
   const [renamingId, setRenamingId] = useState(null);
   const [renameValue, setRenameValue] = useState('');
   const submitting = useRef(false);
+  const [dragId, setDragId] = useState(null);
+  const [dragOverId, setDragOverId] = useState(null);
 
   function handleCreate() {
     const name = newName.trim();
@@ -77,18 +105,48 @@ function TeamTabBar() {
         return (
           <div
             key={team.id}
+            draggable={!isRenaming}
+            onDragStart={(e) => { setDragId(team.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', ''); }}
+            onDragEnd={() => { setDragId(null); setDragOverId(null); }}
+            onDragOver={(e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; if (dragId && dragId !== team.id) setDragOverId(team.id); }}
+            onDragLeave={() => { if (dragOverId === team.id) setDragOverId(null); }}
+            onDrop={(e) => {
+              e.preventDefault();
+              if (!dragId || dragId === team.id) return;
+              const from = teams.findIndex((t) => t.id === dragId);
+              const to = teams.findIndex((t) => t.id === team.id);
+              if (from !== -1 && to !== -1) reorderTeams(from, to);
+              setDragId(null);
+              setDragOverId(null);
+            }}
             onClick={() => !isRenaming && switchTeam(team.id)}
             onDoubleClick={() => startRename(team)}
             className={cn(
               'group relative flex items-center gap-2 px-4 h-9 text-xs font-sans cursor-pointer select-none transition-colors',
               isActive
-                ? 'bg-surface-0 text-text-0 font-semibold border-x border-x-border'
+                ? 'text-text-0 font-semibold border-x border-x-border bg-[#242830]'
                 : 'text-text-3 hover:text-text-1 hover:bg-surface-3/50',
+              dragId === team.id && 'opacity-40',
+              dragOverId === team.id && dragId !== team.id && 'border-l-2 !border-l-accent',
             )}
           >
             {/* Thin accent line at top */}
             {isActive && <div className="absolute top-0 left-0 right-0 h-px bg-accent" style={{ height: '0.5px' }} />}
-            <Users size={13} className={isActive ? 'text-accent' : 'text-text-4'} />
+            {(() => {
+              const status = teamStatus(agents, team.id);
+              const iconColor = status === 'working' ? 'text-green-400'
+                : status === 'completed' ? 'text-green-400'
+                : status === 'crashed' ? 'text-red-400'
+                : isActive ? 'text-accent' : 'text-text-4';
+              return (
+                <span className="relative flex-shrink-0">
+                  <Users size={13} className={cn(iconColor, status === 'working' && 'animate-pulse')} />
+                  {status === 'working' && (
+                    <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
+                  )}
+                </span>
+              );
+            })()}
 
             {isRenaming ? (
               <input
@@ -138,7 +196,7 @@ function TeamTabBar() {
 
             {/* Bottom edge hides the parent border for active tab */}
             {isActive && (
-              <div className="absolute bottom-[-1px] left-0 right-0 h-px bg-surface-0" />
+              <div className="absolute bottom-[-1px] left-0 right-0 h-px bg-[#242830]" />
             )}
           </div>
         );
@@ -193,8 +251,9 @@ function AgentTreeInner() {
     [allAgents, activeTeamId],
   );
 
-  const { fitView } = useReactFlow();
+  const { fitView, setViewport } = useReactFlow();
   const [prevCount, setPrevCount] = useState(0);
+  const prevTeamIdRef = useRef(activeTeamId);
 
   // Build nodes — positions are stable, data updates flow to node components
   const targetNodes = useMemo(() => {
@@ -346,11 +405,23 @@ function AgentTreeInner() {
     });
   }, [targetEdges, nodes, setEdges]);
 
-  // Only fitView when agents are added — debounced so team launches (multiple spawns)
-  // don't cause repeated zoom/pan jitter
   const agentIdStr = agents.map((a) => a.id).join(',');
   const fitTimer = useRef(null);
   useEffect(() => {
+    // Team switch — restore saved viewport instead of fitting
+    if (prevTeamIdRef.current !== activeTeamId) {
+      prevTeamIdRef.current = activeTeamId;
+      prevAgentIds.current = new Set(agents.map((a) => a.id));
+      setPrevCount(agents.length);
+      const saved = loadTeamViewports()[activeTeamId];
+      if (saved) {
+        setViewport(saved, { duration: 200 });
+      } else if (agents.length > 0) {
+        fitView({ padding: 0.3, maxZoom: 1.2, duration: 200 });
+      }
+      return;
+    }
+
     const currentIds = new Set(agents.map((a) => a.id));
     const isNewAgent = agents.length > 0 && [...currentIds].some((id) => !prevAgentIds.current.has(id));
     prevAgentIds.current = currentIds;
@@ -358,12 +429,15 @@ function AgentTreeInner() {
     if (prevCount === 0 && agents.length > 0) {
       fitView({ padding: 0.3, maxZoom: 1.2, duration: 0 });
     } else if (isNewAgent) {
-      // Debounce: wait 500ms for batch spawns to settle before fitting
       clearTimeout(fitTimer.current);
       fitTimer.current = setTimeout(() => fitView({ padding: 0.3, maxZoom: 1.2, duration: 300 }), 500);
     }
     setPrevCount(agents.length);
-  }, [agentIdStr, prevCount, fitView]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [agentIdStr, prevCount, fitView, activeTeamId, setViewport]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onMoveEnd = useCallback((_e, viewport) => {
+    saveTeamViewport(activeTeamId, viewport);
+  }, [activeTeamId]);
 
   const onNodeClick = useCallback((_e, node) => {
     if (node.id === ROOT_ID) return;
@@ -419,6 +493,7 @@ function AgentTreeInner() {
       onPaneClick={onPaneClick}
       onNodeDrag={onNodeDrag}
       onNodeDragStop={onNodeDragStop}
+      onMoveEnd={onMoveEnd}
       defaultViewport={{ x: 0, y: 0, zoom: 1.2 }}
       proOptions={{ hideAttribution: true }}
       minZoom={0.2}
@@ -651,7 +726,6 @@ export default function AgentsView() {
 
   return (
     <div className="flex flex-col h-full relative">
-      <TeamTabBar />
       <div className="flex-1 min-h-0">
         {isLoading ? (
           <div className={cn(

package/packages/gui/src/views/dashboard.jsx

@@ -8,6 +8,7 @@ import { TokenChart } from '../components/dashboard/token-chart';
 import { CacheRing } from '../components/dashboard/cache-ring';
 import { RoutingChart } from '../components/dashboard/routing-chart';
 import { IntelPanel } from '../components/dashboard/intel-panel';
+import { TeamBurnPanel } from '../components/dashboard/team-burn-panel';
 import { ActivityFeed } from '../components/dashboard/activity-feed';
 import { Skeleton } from '../components/ui/skeleton';
 import { HEX } from '../lib/theme-hex';
@@ -34,7 +35,7 @@ function DashboardSkeleton() {
 export default function DashboardView() {
   const {
     data, loading, agents, connected, kpiHistory, lastFetch,
-    agentBreakdown, routing, rotation, adaptive, journalist, rotating,
+    agentBreakdown, routing, rotation, adaptive, journalist, rotating, teamBurn, memory,
   } = useDashboard();
 
   const teams = useGrooveStore((s) => s.teams);
@@ -72,30 +73,34 @@ export default function DashboardView() {
     totalTurns: rawTokens.totalTurns || 0,
     agentCount: rawTokens.agentCount || 0,
     savings: rawTokens.savings || {},
+    internalOverhead: rawTokens.internalOverhead || { tokens: 0, costUsd: 0, components: {} },
   };
 
-  const totalHypothetical = tokens.totalTokens + (tokens.savings.total || 0);
-  const efficiency = totalHypothetical > 0 ? ((tokens.savings.total || 0) / totalHypothetical) * 100 : 0;
   const ioRatio = tokens.totalOutputTokens > 0 ? (tokens.totalInputTokens / tokens.totalOutputTokens).toFixed(1) : '—';
+  const totalRotations = rotation?.totalRotations || 0;
+
+  const agentsWithQ = (agentBreakdown || []).filter((a) => a.quality?.score != null);
+  const avgQuality = agentsWithQ.length > 0
+    ? Math.round(agentsWithQ.reduce((s, a) => s + a.quality.score, 0) / agentsWithQ.length)
+    : null;
 
   const timeline = data.timeline || {};
   const snapshots = timeline.snapshots || [];
   const events = timeline.events || data.events || [];
 
   const kpis = [
-    { label: 'Tokens Used',  value: fmtNum(tokens.totalTokens),        sparkData: kpiHistory.tokens,      color: HEX.accent },
-    { label: 'Total Cost',   value: fmtDollar(tokens.totalCostUsd),    sparkData: kpiHistory.cost,        color: HEX.warning },
-    { label: 'Tokens Saved', value: fmtNum(tokens.savings.total || 0), sparkData: kpiHistory.saved,       color: HEX.success },
-    { label: 'Efficiency',   value: fmtPct(efficiency),                sparkData: kpiHistory.efficiency,  color: HEX.purple },
-    { label: 'Cache Rate',   value: fmtPct(tokens.cacheHitRate * 100), sparkData: kpiHistory.cache,       color: HEX.info },
-    { label: 'I/O Ratio',    value: `${ioRatio}:1`,                    sparkData: kpiHistory.inputOutput, color: HEX.orange },
-    { label: 'Agents',       value: `${runningCount}/${agents.length}`, sparkData: kpiHistory.agents,      color: HEX.accent },
-    { label: 'Turns',        value: fmtNum(tokens.totalTurns),         sparkData: kpiHistory.turns,       color: HEX.text2 },
+    { label: 'Tokens Used',  value: fmtNum(tokens.totalTokens),        sparkData: kpiHistory.tokens,      color: HEX.accent, hint: 'Total tokens consumed across all agents — input, output, and cache tokens combined.' },
+    { label: 'Total Cost',   value: fmtDollar(tokens.totalCostUsd),    sparkData: kpiHistory.cost,        color: HEX.warning, hint: 'Actual cost reported by providers. Claude Code reports real billing; other providers use estimated rates.' },
+    { label: 'Quality',      value: avgQuality != null ? `${avgQuality}` : '—', sparkData: kpiHistory.saved, color: avgQuality >= 70 ? HEX.success : avgQuality >= 40 ? HEX.warning : HEX.danger, hint: 'Average session quality score (0-100) across running agents. Based on error rate, repetitions, file churn, and tool success. Below 40 triggers auto-rotation.' },
+    { label: 'Cache Rate',   value: fmtPct(tokens.cacheHitRate * 100), sparkData: kpiHistory.cache,       color: HEX.info, hint: 'Percentage of input tokens served from prompt cache. Higher = faster responses and lower cost. Managed by your AI provider.' },
+    { label: 'Rotations',    value: `${totalRotations}`,               sparkData: kpiHistory.efficiency,  color: HEX.purple, hint: 'Total context rotations — includes quality-based (auto), context threshold, natural compaction (provider-managed), and manual rotations.' },
+    { label: 'I/O Ratio',    value: `${ioRatio}:1`,                    sparkData: kpiHistory.inputOutput, color: HEX.orange, hint: 'Ratio of input to output tokens. High ratios mean agents are reading more than writing — common for analysis tasks.' },
+    { label: 'Agents',       value: `${runningCount}/${agents.length}`, sparkData: kpiHistory.agents,      color: HEX.accent, hint: 'Running agents out of total spawned this session (including completed and crashed).' },
+    { label: 'Turns',        value: fmtNum(tokens.totalTurns),         sparkData: kpiHistory.turns,       color: HEX.text2, hint: 'Total conversation turns across all agents. Each turn is one request-response cycle with the AI provider.' },
   ];
 
   return (
     <div className="flex flex-col h-full">
-      {/* Header */}
       <DashboardHeader
         connected={connected}
         runningCount={runningCount}
@@ -105,22 +110,18 @@ export default function DashboardView() {
         activeTeam={data.activeTeam}
       />
 
-      {/* KPI Strip */}
       <KpiStrip kpis={kpis} />
 
-      {/* Main grid */}
       <div className="flex-1 min-h-0 grid" style={{
         gridTemplateRows: 'minmax(0, 1fr) minmax(0, 1fr)',
         gridTemplateColumns: '3fr 1.5fr 1.5fr',
         background: '#282c34',
         gap: '1px',
       }}>
-        {/* R3C1: Token Flow Chart — self-sizing via absolute inset-0 */}
         <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1 relative">
           <TokenChart data={snapshots} />
         </div>
 
-        {/* R3C2: Cache Ring */}
         <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1 flex flex-col border-l border-border">
           <div className="px-3 pt-2.5 pb-1">
             <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">Cache Performance</span>
@@ -132,7 +133,6 @@ export default function DashboardView() {
           />
         </div>
 
-        {/* R3C3: Routing Chart */}
         <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1 flex flex-col border-l border-border">
           <div className="px-3 pt-2.5 pb-1">
             <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">Model Routing</span>
@@ -140,7 +140,6 @@ export default function DashboardView() {
           <RoutingChart routing={routing} agentBreakdown={agentBreakdown} />
         </div>
 
-        {/* R4C1: Agent Fleet */}
         <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1 flex flex-col border-t border-border">
           <div className="px-3 pt-2.5 pb-1 flex-shrink-0">
             <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">Agent Fleet</span>
@@ -148,18 +147,22 @@ export default function DashboardView() {
           <FleetPanel agentBreakdown={agentBreakdown} rotating={rotating} teams={teams} />
         </div>
 
-        {/* R4C2-3: Intel Panel (spans 2 cols) */}
-        <div className="col-span-2 min-w-0 min-h-0 overflow-hidden bg-surface-1 flex flex-col border-t border-l border-border">
+        <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1 flex flex-col border-t border-l border-border">
           <IntelPanel
             tokens={tokens}
             rotation={rotation}
             adaptive={adaptive}
             journalist={journalist}
+            agentBreakdown={agentBreakdown}
+            memory={memory}
           />
         </div>
+
+        <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1 flex flex-col border-t border-l border-border">
+          <TeamBurnPanel teams={teamBurn} />
+        </div>
       </div>
 
-      {/* Activity feed */}
       <div className="flex-shrink-0 bg-surface-1 border-t border-border">
         <ActivityFeed events={events} />
       </div>