groove-dev 0.27.142 → 0.27.144

package/packages/gui/src/stores/slices/teams-slice.js

@@ -0,0 +1,413 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+import { api } from '../../lib/api';
+
+export const createTeamsSlice = (set, get) => ({
+  // ── Teams ─────────────────────────────────────────────────
+  teams: [],
+  archivedTeams: [],
+  activeTeamId: localStorage.getItem('groove:activeTeamId') || null,
+
+  // ── Team Launch Config (set during planner spawn, cascades to team) ──
+  teamLaunchConfig: null, // { provider, model, reasoningEffort, temperature, verbosity, mode }
+
+  // ── Team Builder ──────────────────────────────────────────
+  teamBuilderOpen: false,
+  teamBuilderRoles: [],
+  teamBuilderSettings: { provider: null, model: null, reasoningEffort: 50, temperature: 0.5 },
+  teamBuilderTask: '',
+  teamTemplates: { builtIn: [], custom: [] },
+
+  // ── Recommended Team ──────────────────────────────────────
+  recommendedTeam: null,  // { name, agents: [...] } from planner
+  _delegatingTeamIds: new Set(),
+
+  // ── Teams ─────────────────────────────────────────────────
+
+  async fetchTeams() {
+    try {
+      const data = await api.get('/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;
+      set({ teams, activeTeamId: resolved });
+      if (resolved) localStorage.setItem('groove:activeTeamId', resolved);
+    } catch { /* ignore */ }
+  },
+
+  switchTeam(id) {
+    const { activeTeamId, detailPanel, teamDetailPanels, teamPreviews } = get();
+    const updated = { ...teamDetailPanels };
+    if (activeTeamId) updated[activeTeamId] = detailPanel;
+    const restored = updated[id] || null;
+    const tp = teamPreviews[id];
+    const previewUpdate = tp
+      ? { previewState: { url: tp.url, teamId: id, kind: tp.kind, deviceSize: 'desktop', screenshotMode: false } }
+      : {};
+    set({ activeTeamId: id, detailPanel: restored, teamDetailPanels: updated, ...previewUpdate });
+    localStorage.setItem('groove:activeTeamId', id);
+  },
+
+  async createTeam(name, workingDir, mode) {
+    try {
+      const body = { name };
+      if (workingDir) body.workingDir = workingDir;
+      if (mode) body.mode = mode;
+      const team = await api.post('/teams', body);
+      // Only set activeTeamId — the WS team:created handler adds to the teams array
+      set({ activeTeamId: team.id });
+      localStorage.setItem('groove:activeTeamId', team.id);
+      get().addToast('success', `Team "${name}" created`);
+      return team;
+    } catch (err) {
+      get().addToast('error', 'Failed to create team', err.message);
+      throw err;
+    }
+  },
+
+  async archiveTeam(id) {
+    const team = get().teams.find((t) => t.id === id);
+    try {
+      await api.delete(`/teams/${encodeURIComponent(id)}`);
+      const wiped = team?.isDefault ? 'wiped' : 'archived';
+      get().addToast('success', `Team "${team?.name}" ${wiped}`, wiped === 'archived' ? 'Files preserved — restore anytime from Archived Teams' : undefined);
+      get().fetchArchivedTeams();
+    } catch (err) {
+      get().addToast('error', 'Failed to archive team', err.message);
+    }
+  },
+
+  async deleteTeamPermanently(id) {
+    const team = get().teams.find((t) => t.id === id);
+    try {
+      await api.delete(`/teams/${encodeURIComponent(id)}?permanent=true`);
+      get().addToast('success', `Team "${team?.name}" permanently deleted`);
+    } catch (err) {
+      get().addToast('error', 'Failed to delete team', err.message);
+    }
+  },
+
+  async deleteTeam(id) {
+    return get().archiveTeam(id);
+  },
+
+  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 fetchArchivedTeams() {
+    try {
+      const data = await api.get('/teams/archived');
+      set({ archivedTeams: data.archived || data.teams || [] });
+    } catch { /* endpoint may not exist yet */ }
+  },
+
+  async restoreTeam(archivedId) {
+    try {
+      await api.post(`/teams/archived/${encodeURIComponent(archivedId)}/restore`);
+      get().addToast('success', 'Team restored');
+      get().fetchArchivedTeams();
+    } catch (err) {
+      get().addToast('error', 'Failed to restore team', err.message);
+    }
+  },
+
+  async purgeTeam(archivedId) {
+    try {
+      await api.delete(`/teams/archived/${encodeURIComponent(archivedId)}`);
+      get().addToast('info', 'Archived team permanently deleted');
+      get().fetchArchivedTeams();
+    } catch (err) {
+      get().addToast('error', 'Failed to purge team', err.message);
+    }
+  },
+
+  async cloneTeam(id) {
+    const team = get().teams.find((t) => t.id === id);
+    if (!team) return;
+    const sourceAgents = get().agents.filter((a) => a.teamId === id);
+    try {
+      const newTeam = await api.post('/teams', { name: `${team.name} (copy)` });
+      set({ activeTeamId: newTeam.id });
+      localStorage.setItem('groove:activeTeamId', newTeam.id);
+      for (const agent of sourceAgents) {
+        await api.post('/agents', {
+          role: agent.role,
+          name: agent.name,
+          provider: agent.provider,
+          model: agent.model,
+          scope: agent.scope,
+          teamId: newTeam.id,
+        });
+      }
+      get().addToast('success', `Cloned "${team.name}" with ${sourceAgents.length} agent${sourceAgents.length !== 1 ? 's' : ''}`);
+      return newTeam;
+    } catch (err) {
+      get().addToast('error', 'Failed to clone team', err.message);
+    }
+  },
+
+  async renameTeam(id, name) {
+    try {
+      const team = await api.patch(`/teams/${encodeURIComponent(id)}`, { name });
+      set((s) => ({ teams: s.teams.map((t) => (t.id === id ? team : t)) }));
+      return team;
+    } catch (err) {
+      get().addToast('error', 'Failed to rename team', err.message);
+      throw err;
+    }
+  },
+
+  async promoteTeam(id) {
+    try {
+      const team = await api.post(`/teams/${encodeURIComponent(id)}/promote`);
+      set((s) => ({ teams: s.teams.filter((t) => t.id !== id) }));
+      get().addToast('success', 'Team promoted — files moved to project directory');
+      return team;
+    } catch (err) {
+      get().addToast('error', 'Failed to promote team', err.message);
+      throw err;
+    }
+  },
+
+  // ── Recommended Team ──────────────────────────────────────
+
+  async checkRecommendedTeam() {
+    try {
+      const data = await api.get('/recommended-team');
+      if (!data || !data.agents?.length) {
+        set({ recommendedTeam: null });
+        return;
+      }
+
+      // Check if all recommended roles already exist in the planner's team.
+      // If so, auto-delegate instead of showing the "Launch Team" modal.
+      const teamId = data.teamId || null;
+
+      if (teamId) {
+        const teamAgents = get().agents.filter((a) => a.teamId === teamId && a.role !== 'planner');
+        const phase1Roles = data.agents.filter((a) => !a.phase || a.phase === 1).map((a) => a.role);
+        const allExist = phase1Roles.every((role) => teamAgents.some((a) => a.role === role));
+
+        if (allExist && phase1Roles.length > 0) {
+          // Guard: skip if already delegating for this team (poll race)
+          if (get()._delegatingTeamIds.has(teamId)) return;
+          set((s) => ({ recommendedTeam: null, _delegatingTeamIds: new Set([...s._delegatingTeamIds, teamId]) }));
+          try {
+            const tlc = get().teamLaunchConfig;
+            const result = await api.post('/recommended-team/launch', {
+              teamId,
+              ...(tlc?.provider && { teamProvider: tlc.provider }),
+              ...(tlc?.model && { teamModel: tlc.model }),
+              ...(tlc?.reasoningEffort != null && { teamReasoningEffort: tlc.reasoningEffort }),
+              ...(tlc?.temperature != null && { teamTemperature: tlc.temperature }),
+            });
+            const agents = result.agents || [];
+            const failures = result.failed || [];
+            const names = agents.map((a) => a.name).join(', ') || '';
+
+            if (agents.length === 0 && failures.length > 0) {
+              get().addToast('error', 'Delegation failed', failures.map(f => f.role + ': ' + f.error).join(', '));
+            } else {
+              get().addToast('success', 'Planner delegated work', names ? `→ ${names}` : undefined);
+              if (failures.length > 0) {
+                get().addToast('warning', `${failures.length} agent(s) failed to spawn`, failures.map(f => f.role + ': ' + f.error).join(', '));
+              }
+            }
+            if (agents.length > 0) {
+              set((s) => ({
+                thinkingAgents: new Set([...s.thinkingAgents, ...agents.map((a) => a.id)]),
+              }));
+            }
+          } finally {
+            set((s) => {
+              const next = new Set(s._delegatingTeamIds);
+              next.delete(teamId);
+              return { _delegatingTeamIds: next };
+            });
+          }
+          return;
+        }
+      }
+
+      // New agents needed — show the modal for approval
+      set({ recommendedTeam: { ...data, teamId: data.teamId || null } });
+    } catch {
+      set({ recommendedTeam: null });
+    }
+  },
+
+  async launchRecommendedTeam(modifiedAgents) {
+    try {
+      const teamId = get().recommendedTeam?.teamId || null;
+      const tlc = get().teamLaunchConfig;
+      set({ recommendedTeam: null }); // Dismiss modal immediately
+      get().addToast('info', 'Launching team...');
+      const body = {
+        ...(modifiedAgents && { agents: modifiedAgents }),
+        ...(teamId && { teamId }),
+        ...(tlc?.provider && { teamProvider: tlc.provider }),
+        ...(tlc?.model && { teamModel: tlc.model }),
+        ...(tlc?.reasoningEffort != null && { teamReasoningEffort: tlc.reasoningEffort }),
+        ...(tlc?.temperature != null && { teamTemperature: tlc.temperature }),
+        ...(tlc?.verbosity != null && { teamVerbosity: tlc.verbosity }),
+      };
+      const result = await api.post('/recommended-team/launch', body);
+      const totalOk = (result.launched || 0) + (result.reused || 0);
+      const failures = result.failed || [];
+
+      if (totalOk === 0 && failures.length > 0) {
+        get().addToast('error', 'Team launch failed', failures.map(f => f.role + ': ' + f.error).join(', '));
+      } else {
+        const sub = [
+          result.phase2Pending ? `${result.phase2Pending} QC queued` : '',
+          result.projectDir ? `→ ${result.projectDir}/` : '',
+        ].filter(Boolean).join(' · ');
+        get().addToast('success', `Launched ${totalOk} agents`, sub || undefined);
+        if (failures.length > 0) {
+          get().addToast('warning', `${failures.length} agent(s) failed to spawn`, failures.map(f => f.role + ': ' + f.error).join(', '));
+        }
+      }
+      // Set thinking indicator for all launched/reused agents
+      const launchedAgents = result.agents || [];
+      if (launchedAgents.length > 0) {
+        set((s) => ({
+          thinkingAgents: new Set([...s.thinkingAgents, ...launchedAgents.map((a) => a.id)]),
+        }));
+      }
+      // Clean up stale files — scoped to the launched team so plans in other
+      // teams' workspaces survive. The launch endpoint already unlinks the
+      // exact plan it read; this is a belt-and-suspenders sweep.
+      const launchedTeamId = body?.teamId || result?.teamId || null;
+      if (launchedTeamId) {
+        api.post('/cleanup', { teamId: launchedTeamId }).catch(() => {});
+      }
+      return result;
+    } catch (err) {
+      get().addToast('error', 'Launch failed', err.message);
+      throw err;
+    }
+  },
+
+  // ── Team Builder ──────────────────────────────────────────
+
+  openTeamBuilder() { set({ teamBuilderOpen: true }); },
+  closeTeamBuilder() {
+    set({
+      teamBuilderOpen: false,
+      teamBuilderRoles: [],
+      teamBuilderSettings: { provider: null, model: null, reasoningEffort: 50, temperature: 0.5 },
+      teamBuilderTask: '',
+    });
+  },
+  addTeamBuilderRole(role) {
+    set((s) => ({
+      teamBuilderRoles: [...s.teamBuilderRoles, {
+        role, name: '', provider: null, model: null,
+        reasoningEffort: null, temperature: null, prompt: '',
+      }],
+    }));
+  },
+  removeTeamBuilderRole(index) {
+    set((s) => ({ teamBuilderRoles: s.teamBuilderRoles.filter((_, i) => i !== index) }));
+  },
+  updateTeamBuilderRole(index, updates) {
+    set((s) => ({
+      teamBuilderRoles: s.teamBuilderRoles.map((r, i) => i === index ? { ...r, ...updates } : r),
+    }));
+  },
+  applyTemplate(template) {
+    set({
+      teamBuilderRoles: (template.roles || []).map((r) => ({
+        role: typeof r === 'string' ? r : r.role,
+        name: '', provider: null, model: null,
+        reasoningEffort: null, temperature: null, prompt: '',
+      })),
+    });
+  },
+  setTeamBuilderSettings(settings) {
+    set((s) => ({ teamBuilderSettings: { ...s.teamBuilderSettings, ...settings } }));
+  },
+  setTeamBuilderTask(task) { set({ teamBuilderTask: task }); },
+
+  async fetchTeamTemplates() {
+    try {
+      const data = await api.get('/team-templates');
+      const builtIn = [];
+      const custom = [];
+      for (const [key, tmpl] of Object.entries(data || {})) {
+        const entry = { ...tmpl, name: key };
+        if (tmpl.builtIn) builtIn.push(entry);
+        else custom.push(entry);
+      }
+      set({ teamTemplates: { builtIn, custom } });
+    } catch { /* endpoint may not exist yet */ }
+  },
+
+  async saveTeamTemplate(name) {
+    try {
+      const { teamBuilderRoles, teamBuilderSettings } = get();
+      await api.post('/team-templates', {
+        name,
+        roles: teamBuilderRoles.map((r) => r.role),
+        settings: teamBuilderSettings,
+      });
+      get().addToast('success', `Template "${name}" saved`);
+      get().fetchTeamTemplates();
+    } catch (err) {
+      get().addToast('error', 'Failed to save template', err.message);
+    }
+  },
+
+  async deleteTeamTemplate(name) {
+    try {
+      await api.delete(`/team-templates/${encodeURIComponent(name)}`);
+      get().addToast('info', `Template "${name}" deleted`);
+      get().fetchTeamTemplates();
+    } catch (err) {
+      get().addToast('error', 'Failed to delete template', err.message);
+    }
+  },
+
+  async launchTeamBuilder() {
+    const { teamBuilderRoles, teamBuilderSettings, teamBuilderTask, activeTeamId } = get();
+    if (teamBuilderRoles.length === 0) return;
+    set({ teamLaunchConfig: {
+      provider: teamBuilderSettings.provider || null,
+      model: teamBuilderSettings.model || null,
+      reasoningEffort: teamBuilderSettings.reasoningEffort,
+      temperature: teamBuilderSettings.temperature,
+    }});
+    get().closeTeamBuilder();
+    try {
+      const body = {
+        task: teamBuilderTask,
+        roles: teamBuilderRoles,
+        settings: teamBuilderSettings,
+        launchMode: 'plan-first',
+        teamId: activeTeamId,
+      };
+      const result = await api.post('/team-builder/launch', body);
+      get().addToast('success', 'Planner spawned — team will build automatically');
+      return result;
+    } catch (err) {
+      get().addToast('error', 'Team launch failed', err.message);
+      throw err;
+    }
+  },
+});

package/packages/gui/src/stores/slices/ui-slice.js

@@ -0,0 +1,98 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+import { loadJSON, persistJSON } from '../helpers.js';
+
+let toastCounter = 0;
+
+export const createUiSlice = (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,
+  quickConnectOpen: false,
+  upgradeModalOpen: false,
+
+  // ── Node expansion (click-to-open persistent panels) ───────
+  expandedNodes: loadJSON('groove:expandedNodes'),
+
+  // ── Layout persistence ────────────────────────────────────
+  detailPanelWidth: Number(localStorage.getItem('groove:detailWidth')) || 480,
+  terminalVisible: localStorage.getItem('groove:terminalVisible') === 'true',
+  terminalHeight: Number(localStorage.getItem('groove:terminalHeight')) || 260,
+  terminalFullHeight: false,
+
+  // ── Toasts ────────────────────────────────────────────────
+  toasts: [],
+
+  // ── Version / Auto-Update ──────────────────────────────────
+  version: null,
+  updateReady: null,
+  updateProgress: null,
+  updateModalOpen: false,
+
+  // ── Navigation ────────────────────────────────────────────
+
+  setActiveView(view) { set({ activeView: view }); },
+
+  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 } }));
+  },
+  clearSelection() {
+    const tid = get().activeTeamId;
+    set((s) => ({ detailPanel: null, teamDetailPanels: { ...s.teamDetailPanels, [tid]: null } }));
+  },
+  toggleCommandPalette() { set((s) => ({ commandPaletteOpen: !s.commandPaletteOpen })); },
+  toggleQuickConnect() { set((s) => ({ quickConnectOpen: !s.quickConnectOpen })); },
+  setUpgradeModalOpen: (open) => set({ upgradeModalOpen: open }),
+
+  setDetailPanelWidth(w) {
+    set({ detailPanelWidth: w });
+    localStorage.setItem('groove:detailWidth', String(w));
+  },
+  setTerminalVisible(v) {
+    set({ terminalVisible: v });
+    localStorage.setItem('groove:terminalVisible', String(v));
+  },
+  setTerminalHeight(h) {
+    set({ terminalHeight: h });
+    localStorage.setItem('groove:terminalHeight', String(h));
+  },
+  setTerminalFullHeight(v) { set({ terminalFullHeight: v }); },
+
+  toggleNodeExpanded(id) {
+    const expanded = { ...get().expandedNodes };
+    expanded[id] = !expanded[id];
+    if (!expanded[id]) delete expanded[id];
+    set({ expandedNodes: expanded });
+    persistJSON('groove:expandedNodes', expanded);
+  },
+
+  // ── Toasts ────────────────────────────────────────────────
+
+  addToast(type, message, detail, action, options = {}) {
+    const id = ++toastCounter;
+    const persistent = !!options.persistent;
+    const duration = options.duration;
+    const actions = options.actions;
+    set((s) => ({ toasts: [...s.toasts, { id, type, message, detail, action, actions, persistent, duration }] }));
+  },
+  removeToast(id) {
+    set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) }));
+  },
+
+  installUpdate() {
+    window.groove?.update?.installUpdate();
+  },
+  setUpdateModalOpen(open) {
+    set({ updateModalOpen: open });
+  },
+  checkForUpdate() {
+    window.groove?.update?.checkForUpdate();
+  },
+});

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

@@ -79,7 +79,7 @@ function saveTeamViewport(teamId, viewport) {
 /* ── Team Tab Bar (IDE-style) ──────────────────────────────── */
 
 function teamStatus(agents, teamId) {
-  const ta = agents.filter((a) => a.teamId === teamId);
+  const ta = agents.filter((a) => a.teamId === teamId && !a.metadata?.scheduled);
   if (ta.length === 0) return 'idle';
   const running = ta.some((a) => a.status === 'running' || a.status === 'starting');
   if (running) return 'working';
@@ -173,10 +173,10 @@ export function TeamTabBar() {
         style={{ scrollbarWidth: 'none', msOverflowStyle: 'none', WebkitOverflowScrolling: 'touch' }}
       >
       {teams.map((team) => {
-        const count = agents.filter((a) => a.teamId === team.id).length;
+        const count = agents.filter((a) => a.teamId === team.id && !a.metadata?.scheduled).length;
         const isActive = team.id === activeTeamId;
         const isRenaming = renamingId === team.id;
-        const running = agents.filter((a) => a.teamId === team.id && (a.status === 'running' || a.status === 'starting')).length;
+        const running = agents.filter((a) => a.teamId === team.id && !a.metadata?.scheduled && (a.status === 'running' || a.status === 'starting')).length;
 
         return (
           <ContextMenu key={team.id}>
@@ -332,7 +332,7 @@ function AgentTreeInner() {
   const prevAgentsRef = useRef([]);
   const agents = useMemo(() => {
     const next = allAgents
-      .filter((a) => a.teamId === activeTeamId)
+      .filter((a) => a.teamId === activeTeamId && !a.metadata?.scheduled)
       .sort((a, b) => (a.name || a.id).localeCompare(b.name || b.id));
     const prev = prevAgentsRef.current;
     if (prev.length === next.length && prev.every((p, i) => p.id === next[i].id && p.status === next[i].status && p.name === next[i].name && p.model === next[i].model && p.tokensUsed === next[i].tokensUsed && p.contextUsage === next[i].contextUsage)) return prev;
@@ -1579,7 +1579,7 @@ export default function AgentsView() {
     } catch { /* toast handles */ }
   }
 
-  const teamAgents = allAgents.filter((a) => a.teamId === activeTeamId);
+  const teamAgents = allAgents.filter((a) => a.teamId === activeTeamId && !a.metadata?.scheduled);
   const hydrated = useGrooveStore((s) => s.hydrated);
   const [showLoader, setShowLoader] = useState(true);
 

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

@@ -18,10 +18,9 @@ import { BarChart3 } from 'lucide-react';
 
 function DashboardSkeleton() {
   return (
-    <div className="flex-1 grid gap-px p-0" style={{
+    <div className="flex-1 grid gap-px p-0 bg-surface-3" style={{
       gridTemplateRows: 'auto minmax(0, 1fr) minmax(0, 1fr)',
       gridTemplateColumns: '2fr 2.5fr 1.5fr',
-      background: '#282c34',
     }}>
       <div className="col-span-3"><Skeleton className="h-[72px] rounded-none" /></div>
       <Skeleton className="rounded-none" />
@@ -90,14 +89,14 @@ export default function DashboardView() {
   const events = timeline.events || data.events || [];
 
   const kpis = [
-    { 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.' },
+    { label: 'Tokens Used',  value: fmtNum(tokens.totalTokens),        sparkData: kpiHistory.tokens,      color: HEX.text3, 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.text3, 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: HEX.text3, 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.text3, 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.text3, 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.text3, 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.text3, hint: 'Running agents out of total spawned this session (including completed and crashed).' },
+    { label: 'Turns',        value: fmtNum(tokens.totalTurns),         sparkData: kpiHistory.turns,       color: HEX.text3, hint: 'Total conversation turns across all agents. Each turn is one request-response cycle with the AI provider.' },
   ];
 
   return (
@@ -113,8 +112,8 @@ export default function DashboardView() {
 
       <KpiStrip kpis={kpis} />
 
-      <div className="flex-1 min-h-0 flex flex-col" style={{ background: '#282c34', gap: '1px' }}>
-        <div className="min-h-0 flex-1 grid" style={{ gridTemplateColumns: '3fr 1.5fr 1.5fr', gap: '0 1px' }}>
+      <div className="flex-1 min-h-0 flex flex-col bg-surface-3 gap-px">
+        <div className="min-h-0 flex-1 grid gap-x-px" style={{ gridTemplateColumns: '3fr 1.5fr 1.5fr' }}>
           <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1 relative">
             <TokenChart data={snapshots} />
           </div>
@@ -138,7 +137,7 @@ export default function DashboardView() {
           </div>
         </div>
 
-        <div className="min-h-0 flex-1 grid" style={{ gridTemplateColumns: '2fr 2.5fr 1.5fr', gap: '0 1px' }}>
+        <div className="min-h-0 flex-1 grid gap-x-px" style={{ gridTemplateColumns: '2fr 2.5fr 1.5fr' }}>
           <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>