groove-dev 0.27.8 → 0.27.11

package/node_modules/@groove-dev/gui/src/components/settings/server-dialog.jsx

@@ -0,0 +1,192 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useEffect } from 'react';
+import { Dialog, DialogContent } from '../ui/dialog';
+import { Button } from '../ui/button';
+import { FolderBrowser } from '../agents/folder-browser';
+import { cn } from '../../lib/cn';
+import { FolderSearch } from 'lucide-react';
+
+export function ServerDialog({ open, onOpenChange, server, onSave }) {
+  const [name, setName] = useState('');
+  const [host, setHost] = useState('');
+  const [user, setUser] = useState('');
+  const [sshPort, setSshPort] = useState(22);
+  const [sshKeyPath, setSshKeyPath] = useState('');
+  const [autoStart, setAutoStart] = useState(false);
+  const [autoConnect, setAutoConnect] = useState(false);
+  const [keyBrowserOpen, setKeyBrowserOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      if (server) {
+        setName(server.name || '');
+        setHost(server.host || '');
+        setUser(server.user || '');
+        setSshPort(server.port || 22);
+        setSshKeyPath(server.sshKeyPath || '');
+        setAutoStart(server.autoStart || false);
+        setAutoConnect(server.autoConnect || false);
+      } else {
+        setName('');
+        setHost('');
+        setUser('');
+        setSshPort(22);
+        setSshKeyPath('');
+        setAutoStart(false);
+        setAutoConnect(false);
+      }
+    }
+  }, [open, server]);
+
+  async function handleSave() {
+    if (!name.trim() || !host.trim() || !user.trim()) return;
+    setSaving(true);
+    try {
+      const data = {
+        name: name.trim(),
+        host: host.trim(),
+        user: user.trim(),
+        port: sshPort,
+        sshKeyPath: sshKeyPath.trim(),
+        autoStart,
+        autoConnect,
+      };
+      if (server?.id) data.id = server.id;
+      await onSave(data);
+      onOpenChange(false);
+    } catch {}
+    setSaving(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        title={server ? `Edit ${server.name}` : 'Add Remote Server'}
+        description="Configure SSH connection to a remote server"
+        className="max-w-[460px]"
+      >
+        <div className="px-5 py-4 space-y-4">
+          {/* Name */}
+          <div>
+            <label className="text-2xs font-semibold text-text-2 font-sans mb-1.5 block">Name</label>
+            <input
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="api-vps"
+              className="w-full h-9 px-3 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+              autoFocus
+            />
+          </div>
+
+          {/* Host */}
+          <div>
+            <label className="text-2xs font-semibold text-text-2 font-sans mb-1.5 block">Host</label>
+            <input
+              value={host}
+              onChange={(e) => setHost(e.target.value)}
+              placeholder="165.22.180.45 or hostname"
+              className="w-full h-9 px-3 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+            />
+          </div>
+
+          {/* User + SSH Port */}
+          <div className="flex gap-3">
+            <div className="flex-1">
+              <label className="text-2xs font-semibold text-text-2 font-sans mb-1.5 block">User</label>
+              <input
+                value={user}
+                onChange={(e) => setUser(e.target.value)}
+                placeholder="root"
+                className="w-full h-9 px-3 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+              />
+            </div>
+            <div className="w-24">
+              <label className="text-2xs font-semibold text-text-2 font-sans mb-1.5 block">SSH Port</label>
+              <input
+                value={sshPort}
+                onChange={(e) => setSshPort(Number(e.target.value) || 22)}
+                type="number"
+                className="w-full h-9 px-3 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+              />
+            </div>
+          </div>
+
+          {/* SSH Key */}
+          <div>
+            <label className="text-2xs font-semibold text-text-2 font-sans mb-1.5 block">SSH Key</label>
+            <div className="flex items-center gap-1.5">
+              <input
+                value={sshKeyPath}
+                onChange={(e) => setSshKeyPath(e.target.value)}
+                placeholder="~/.ssh/id_ed25519"
+                className="flex-1 h-9 px-3 text-xs bg-surface-0 border border-border rounded-md text-text-0 font-mono placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+              />
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={() => setKeyBrowserOpen(true)}
+                className="h-9 px-2.5 flex-shrink-0"
+              >
+                <FolderSearch size={13} />
+              </Button>
+            </div>
+          </div>
+
+          {/* Toggles */}
+          <div className="space-y-3 pt-1">
+            <label className="flex items-center justify-between cursor-pointer">
+              <span className="text-xs text-text-2 font-sans">Auto-start daemon on connect</span>
+              <ToggleSwitch value={autoStart} onChange={setAutoStart} />
+            </label>
+            <label className="flex items-center justify-between cursor-pointer">
+              <span className="text-xs text-text-2 font-sans">Auto-connect on Groove launch</span>
+              <ToggleSwitch value={autoConnect} onChange={setAutoConnect} />
+            </label>
+          </div>
+
+          {/* Actions */}
+          <div className="flex justify-end gap-2 pt-2">
+            <Button variant="ghost" size="sm" onClick={() => onOpenChange(false)} className="h-8 text-xs px-4 text-text-3">
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={handleSave}
+              disabled={!name.trim() || !host.trim() || !user.trim() || saving}
+              className="h-8 text-xs px-4"
+            >
+              {saving ? 'Saving...' : 'Save'}
+            </Button>
+          </div>
+        </div>
+
+        {/* File browser for SSH key */}
+        <FolderBrowser
+          open={keyBrowserOpen}
+          onOpenChange={setKeyBrowserOpen}
+          currentPath={sshKeyPath || '~/.ssh'}
+          onSelect={(path) => setSshKeyPath(path)}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function ToggleSwitch({ value, onChange }) {
+  return (
+    <button
+      onClick={() => onChange(!value)}
+      className={cn(
+        'w-9 h-5 rounded-full p-0.5 transition-colors cursor-pointer',
+        value ? 'bg-accent' : 'bg-surface-5',
+      )}
+    >
+      <div className={cn(
+        'w-4 h-4 rounded-full bg-white shadow-sm transition-transform',
+        value ? 'translate-x-4' : 'translate-x-0',
+      )} />
+    </button>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/ui/approval-modal.jsx

@@ -0,0 +1,63 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { AnimatePresence, motion } from 'framer-motion';
+import { ShieldCheck, ShieldX, AlertTriangle } from 'lucide-react';
+import { Button } from '../ui/button';
+import { useGrooveStore } from '../../stores/groove';
+
+export function ApprovalModal() {
+  const pendingApprovals = useGrooveStore((s) => s.pendingApprovals);
+  const approveRequest = useGrooveStore((s) => s.approveRequest);
+  const rejectRequest = useGrooveStore((s) => s.rejectRequest);
+
+  if (!pendingApprovals?.length) return null;
+
+  return (
+    <div className="fixed bottom-10 left-1/2 -translate-x-1/2 z-50 w-full max-w-md flex flex-col gap-2 px-4">
+      <AnimatePresence>
+        {pendingApprovals.map((approval) => (
+          <motion.div
+            key={approval.id}
+            initial={{ y: 20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: 20, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="rounded-lg border border-accent/30 bg-surface-2/95 backdrop-blur-md shadow-xl shadow-accent/5 overflow-hidden"
+          >
+            <div className="px-4 py-3 flex items-start gap-3">
+              <AlertTriangle size={16} className="text-warning shrink-0 mt-0.5" />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-semibold text-text-0 font-sans truncate">
+                  {approval.agentName || 'Agent'} needs approval
+                </p>
+                {approval.action?.description && (
+                  <p className="text-2xs text-text-3 font-sans mt-0.5 line-clamp-2">
+                    {approval.action.description}
+                  </p>
+                )}
+              </div>
+            </div>
+            <div className="px-4 py-2.5 border-t border-border-subtle flex items-center justify-end gap-2">
+              <Button
+                size="sm"
+                variant="ghost"
+                className="text-danger hover:bg-danger/10"
+                onClick={() => rejectRequest(approval.id)}
+              >
+                <ShieldX size={14} className="mr-1" />
+                Reject
+              </Button>
+              <Button
+                size="sm"
+                variant="accent"
+                onClick={() => approveRequest(approval.id)}
+              >
+                <ShieldCheck size={14} className="mr-1" />
+                Approve
+              </Button>
+            </div>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/ui/toast.jsx

@@ -78,7 +78,7 @@ export function ToastContainer() {
   const toasts = useGrooveStore((s) => s.toasts);
 
   return (
-    <div className="fixed bottom-4 right-4 z-[100] flex flex-col-reverse gap-2">
+    <div className="fixed bottom-10 left-[60px] z-[100] flex flex-col-reverse gap-2">
       <AnimatePresence mode="popLayout">
         {toasts.slice(-3).map((toast) => (
           <ToastItem key={toast.id} toast={toast} />

package/node_modules/@groove-dev/gui/src/lib/edition.js

@@ -0,0 +1,4 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+export const isPro = __GROOVE_EDITION__ === 'pro';
+export const edition = __GROOVE_EDITION__;

package/node_modules/@groove-dev/gui/src/lib/electron.js

@@ -0,0 +1,17 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+export function isElectron() {
+  return !!(window.groove || navigator.userAgent.includes('Electron'));
+}
+
+export function getPlatform() {
+  return window.groove?.platform || 'browser';
+}
+
+export function openExternal(url) {
+  if (window.groove) {
+    window.groove.openExternal(url);
+  } else {
+    window.open(url, '_blank');
+  }
+}

package/node_modules/@groove-dev/gui/src/lib/status.js

@@ -42,6 +42,7 @@ export const ROLE_COLORS = {
   analyst:    { bg: 'rgba(198, 120, 221, 0.12)', text: '#c678dd', border: '#c678dd' },
   creative:   { bg: 'rgba(229, 192, 123, 0.12)', text: '#e5c07b', border: '#e5c07b' },
   slides:     { bg: 'rgba(209, 154, 102, 0.12)', text: '#d19a66', border: '#d19a66' },
+  chat:       { bg: 'rgba(198, 120, 221, 0.12)', text: '#c678dd', border: '#c678dd' },
 };
 
 export function roleColor(role) {

package/node_modules/@groove-dev/gui/src/stores/groove.js

@@ -7,6 +7,7 @@ import { api } from '../lib/api';
 const WS_URL = `ws://${window.location.hostname}:${window.location.port || 31415}`;
 
 let toastCounter = 0;
+let plannerPollInterval = null;
 
 function loadJSON(key, fallback = {}) {
   try { return JSON.parse(localStorage.getItem(key) || JSON.stringify(fallback)); }
@@ -46,6 +47,7 @@ export const useGrooveStore = create((set, get) => ({
   detailPanel: null,              // null | { type: 'agent', agentId } | { type: 'spawn' } | { type: 'journalist' }
   teamDetailPanels: {},            // { [teamId]: detailPanel } — persists panel state per team
   commandPaletteOpen: false,
+  quickConnectOpen: false,
 
   // ── Node expansion (click-to-open persistent panels) ───────
   expandedNodes: loadJSON('groove:expandedNodes'),
@@ -79,6 +81,14 @@ export const useGrooveStore = create((set, get) => ({
   // ── Toasts ────────────────────────────────────────────────
   toasts: [],
 
+  // ── Tunnels ────────────────────────────────────────────────
+  savedTunnels: [],
+  activeTunnelId: null,
+
+  // ── GitHub Repo Import ────────────────────────────────────
+  importedRepos: [],
+  importInProgress: false,
+
   // ── Editor state ──────────────────────────────────────────
   editorFiles: {},
   editorActiveFile: null,
@@ -132,6 +142,22 @@ export const useGrooveStore = create((set, get) => ({
               || p.contextUsage !== a.contextUsage || p.name !== a.name || p.model !== a.model;
           });
           set({ agents: changed ? msg.data : prev, tokenTimeline: timeline, hydrated: true });
+
+          // Poll for recommended-team.json while a planner is running
+          const hasRunningPlanner = msg.data.some((a) => a.role === 'planner' && a.status === 'running');
+          if (hasRunningPlanner && !plannerPollInterval && !get().recommendedTeam) {
+            plannerPollInterval = setInterval(() => {
+              if (get().recommendedTeam) {
+                clearInterval(plannerPollInterval);
+                plannerPollInterval = null;
+                return;
+              }
+              get().checkRecommendedTeam();
+            }, 3000);
+          } else if ((!hasRunningPlanner || get().recommendedTeam) && plannerPollInterval) {
+            clearInterval(plannerPollInterval);
+            plannerPollInterval = null;
+          }
           break;
         }
 
@@ -320,7 +346,6 @@ export const useGrooveStore = create((set, get) => ({
 
         case 'approval:request':
           set((s) => ({ pendingApprovals: [...s.pendingApprovals, msg.data] }));
-          get().addToast('warning', `Approval needed: ${msg.data?.agentName || 'agent'}`, msg.data?.action?.description);
           break;
 
         case 'approval:resolved': {
@@ -351,10 +376,32 @@ export const useGrooveStore = create((set, get) => ({
         case 'gateway:status':
           set({ gateways: msg.data || [] });
           break;
+
+        case 'tunnel.connected':
+          set({ activeTunnelId: msg.data?.id || null });
+          get().fetchTunnels();
+          break;
+
+        case 'tunnel.disconnected':
+          set({ activeTunnelId: null });
+          get().fetchTunnels();
+          break;
+
+        case 'tunnel.health': {
+          const tunnels = get().savedTunnels.map((t) =>
+            t.id === msg.data?.id ? { ...t, latencyMs: msg.data.latencyMs, healthy: msg.data.healthy } : t,
+          );
+          set({ savedTunnels: tunnels });
+          break;
+        }
       }
     };
 
     ws.onclose = () => {
+      if (plannerPollInterval) {
+        clearInterval(plannerPollInterval);
+        plannerPollInterval = null;
+      }
       set({ connected: false, hydrated: false, ws: null, daemonHost: null, tunneled: false });
       setTimeout(() => get().connect(), 2000);
     };
@@ -462,6 +509,7 @@ export const useGrooveStore = create((set, get) => ({
     set((s) => ({ detailPanel: null, teamDetailPanels: { ...s.teamDetailPanels, [tid]: null } }));
   },
   toggleCommandPalette() { set((s) => ({ commandPaletteOpen: !s.commandPaletteOpen })); },
+  toggleQuickConnect() { set((s) => ({ quickConnectOpen: !s.quickConnectOpen })); },
 
   setDetailPanelWidth(w) {
     set({ detailPanelWidth: w });
@@ -596,9 +644,7 @@ export const useGrooveStore = create((set, get) => ({
 
       // Check if all recommended roles already exist in the planner's team.
       // If so, auto-delegate instead of showing the "Launch Team" modal.
-      const planners = get().agents.filter((a) => a.role === 'planner');
-      const planner = planners.sort((a, b) => (b.lastActivity || '').localeCompare(a.lastActivity || ''))[0];
-      const teamId = planner?.teamId;
+      const teamId = data.teamId || null;
 
       if (teamId) {
         const teamAgents = get().agents.filter((a) => a.teamId === teamId && a.role !== 'planner');
@@ -624,7 +670,7 @@ export const useGrooveStore = create((set, get) => ({
       }
 
       // New agents needed — show the modal for approval
-      set({ recommendedTeam: data });
+      set({ recommendedTeam: { ...data, teamId: data.teamId || null } });
     } catch {
       set({ recommendedTeam: null });
     }
@@ -632,9 +678,10 @@ export const useGrooveStore = create((set, get) => ({
 
   async launchRecommendedTeam(modifiedAgents) {
     try {
+      const teamId = get().recommendedTeam?.teamId || null;
       set({ recommendedTeam: null }); // Dismiss modal immediately
       get().addToast('info', 'Launching team...');
-      const body = modifiedAgents ? { agents: modifiedAgents } : undefined;
+      const body = { ...(modifiedAgents && { agents: modifiedAgents }), ...(teamId && { teamId }) };
       const result = await api.post('/recommended-team/launch', body);
       const sub = [
         result.phase2Pending ? `${result.phase2Pending} QC queued` : '',
@@ -657,6 +704,92 @@ export const useGrooveStore = create((set, get) => ({
     }
   },
 
+  // ── GitHub Repo Import ────────────────────────────────────
+
+  async fetchImportedRepos() {
+    try {
+      const repos = await api.get('/repos/imported');
+      set({ importedRepos: repos });
+    } catch { /* ignore */ }
+  },
+
+  async previewRepo(repoUrl) {
+    return api.post('/repos/preview', { repoUrl });
+  },
+
+  async importRepo(repoUrl, targetPath, createTeam, teamName) {
+    set({ importInProgress: true });
+    try {
+      const result = await api.post('/repos/import', { repoUrl, targetPath, createTeam, teamName });
+      get().fetchImportedRepos();
+      return result;
+    } finally {
+      set({ importInProgress: false });
+    }
+  },
+
+  async softRemoveRepo(importId) {
+    await api.delete('/repos/' + importId + '/remove');
+    get().fetchImportedRepos();
+  },
+
+  async hardNukeRepo(importId, deleteFiles = true) {
+    await api.delete('/repos/' + importId + '/nuke?deleteFiles=' + deleteFiles);
+    get().fetchImportedRepos();
+  },
+
+  // ── Tunnels ──────────────────────────────────────────────
+
+  async fetchTunnels() {
+    try {
+      const tunnels = await api.get('/tunnels');
+      set({ savedTunnels: Array.isArray(tunnels) ? tunnels : [] });
+    } catch {}
+  },
+
+  async saveTunnel(config) {
+    const result = await api.post('/tunnels', config);
+    get().fetchTunnels();
+    return result;
+  },
+
+  async updateTunnel(id, config) {
+    const result = await api.patch('/tunnels/' + id, config);
+    get().fetchTunnels();
+    return result;
+  },
+
+  async deleteTunnel(id) {
+    await api.delete('/tunnels/' + id);
+    get().fetchTunnels();
+  },
+
+  async testTunnel(id) {
+    return api.post('/tunnels/' + id + '/test');
+  },
+
+  async connectTunnel(id) {
+    const result = await api.post('/tunnels/' + id + '/connect');
+    set({ activeTunnelId: id });
+    get().fetchTunnels();
+    if (result.url) window.open(result.url, '_blank');
+    return result;
+  },
+
+  async disconnectTunnel(id) {
+    await api.post('/tunnels/' + id + '/disconnect');
+    set({ activeTunnelId: null });
+    get().fetchTunnels();
+  },
+
+  async installTunnel(id) {
+    return api.post('/tunnels/' + id + '/install');
+  },
+
+  async startTunnel(id) {
+    return api.post('/tunnels/' + id + '/start');
+  },
+
   // ── Journalist ────────────────────────────────────────────
 
   async fetchJournalist() {

package/node_modules/@groove-dev/gui/src/views/dashboard.jsx

@@ -112,54 +112,53 @@ export default function DashboardView() {
 
       <KpiStrip kpis={kpis} />
 
-      <div className="flex-1 min-h-0 grid" style={{
-        gridTemplateRows: 'minmax(0, 1fr) minmax(0, 1fr)',
-        gridTemplateColumns: '2fr 2.5fr 1.5fr',
-        background: '#282c34',
-        gap: '1px',
-      }}>
-        <div className="min-w-0 min-h-0 overflow-hidden bg-surface-1 relative">
-          <TokenChart data={snapshots} />
-        </div>
+      <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="min-w-0 min-h-0 overflow-hidden bg-surface-1 relative">
+            <TokenChart data={snapshots} />
+          </div>
 
-        <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>
+          <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>
+            </div>
+            <CacheRing
+              cacheRead={tokens.cacheReadTokens}
+              cacheCreation={tokens.cacheCreationTokens}
+              totalInput={tokens.totalInputTokens}
+            />
           </div>
-          <CacheRing
-            cacheRead={tokens.cacheReadTokens}
-            cacheCreation={tokens.cacheCreationTokens}
-            totalInput={tokens.totalInputTokens}
-          />
-        </div>
 
-        <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>
+          <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>
+            </div>
+            <RoutingChart routing={routing} agentBreakdown={agentBreakdown} />
           </div>
-          <RoutingChart routing={routing} agentBreakdown={agentBreakdown} />
         </div>
 
-        <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>
+        <div className="min-h-0 flex-1 grid" style={{ gridTemplateColumns: '2fr 2.5fr 1.5fr', gap: '0 1px' }}>
+          <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>
+            </div>
+            <FleetPanel agentBreakdown={agentBreakdown} rotating={rotating} teams={teams} />
           </div>
-          <FleetPanel agentBreakdown={agentBreakdown} rotating={rotating} teams={teams} />
-        </div>
 
-        <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">
+            <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 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>
       </div>