groove-dev 0.27.144 → 0.27.146

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

@@ -0,0 +1,107 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { MessageCircleQuestion, Send } from 'lucide-react';
+import { Button } from '../ui/button';
+import { useGrooveStore } from '../../stores/groove';
+
+export function QuestionModal() {
+  const pendingQuestions = useGrooveStore((s) => s.pendingQuestions);
+  const answerQuestion = useGrooveStore((s) => s.answerQuestion);
+  const [answers, setAnswers] = useState({});
+
+  if (!pendingQuestions?.length) return null;
+
+  function handleSubmit(q) {
+    const questionAnswers = {};
+    for (const qItem of q.questions) {
+      const key = qItem.question || qItem.header || `q${q.questions.indexOf(qItem)}`;
+      questionAnswers[key] = answers[`${q.agentId}:${key}`] || '';
+    }
+    answerQuestion(q.agentId, questionAnswers);
+    setAnswers((prev) => {
+      const next = { ...prev };
+      for (const key of Object.keys(next)) {
+        if (key.startsWith(q.agentId + ':')) delete next[key];
+      }
+      return next;
+    });
+  }
+
+  return (
+    <div className="fixed bottom-10 left-1/2 -translate-x-1/2 z-50 w-full max-w-lg flex flex-col gap-2 px-4">
+      <AnimatePresence>
+        {pendingQuestions.map((q) => (
+          <motion.div
+            key={q.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">
+              <MessageCircleQuestion size={16} className="text-accent shrink-0 mt-0.5" />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-semibold text-text-0 font-sans">
+                  {q.agentName || 'Agent'} has a question
+                </p>
+              </div>
+            </div>
+            <div className="px-4 pb-3 flex flex-col gap-2">
+              {q.questions.map((qItem, i) => {
+                const key = qItem.question || qItem.header || `q${i}`;
+                const inputKey = `${q.agentId}:${key}`;
+                return (
+                  <div key={i}>
+                    <p className="text-2xs text-text-2 font-sans mb-1">{qItem.question || key}</p>
+                    {qItem.options?.length > 0 ? (
+                      <div className="flex flex-wrap gap-1">
+                        {qItem.options.map((opt) => {
+                          const label = typeof opt === 'string' ? opt : opt.label;
+                          const selected = answers[inputKey] === label;
+                          return (
+                            <button
+                              key={label}
+                              onClick={() => setAnswers((p) => ({ ...p, [inputKey]: label }))}
+                              className={`px-2 py-1 text-2xs rounded border font-sans transition-colors ${
+                                selected
+                                  ? 'border-accent bg-accent/20 text-text-0'
+                                  : 'border-border-subtle bg-surface-1 text-text-2 hover:border-accent/50'
+                              }`}
+                            >
+                              {label}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    ) : (
+                      <input
+                        type="text"
+                        className="w-full px-2 py-1.5 text-xs rounded border border-border-subtle bg-surface-1 text-text-0 font-sans placeholder:text-text-3 focus:outline-none focus:border-accent"
+                        placeholder="Type your answer..."
+                        value={answers[inputKey] || ''}
+                        onChange={(e) => setAnswers((p) => ({ ...p, [inputKey]: e.target.value }))}
+                        onKeyDown={(e) => e.key === 'Enter' && handleSubmit(q)}
+                      />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+            <div className="px-4 py-2.5 border-t border-border-subtle flex items-center justify-end">
+              <Button
+                size="sm"
+                variant="accent"
+                onClick={() => handleSubmit(q)}
+              >
+                <Send size={14} className="mr-1" />
+                Answer
+              </Button>
+            </div>
+          </motion.div>
+        ))}
+      </AnimatePresence>
+    </div>
+  );
+}

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

@@ -30,12 +30,12 @@ export function SheetContent({ children, className, title, side = 'right', width
             <DialogPrimitive.Title className="text-base font-semibold text-text-0 font-sans">
               {title}
             </DialogPrimitive.Title>
-            <DialogPrimitive.Close
+            <button
               onClick={onClose}
               className="p-1 rounded-md text-text-3 hover:text-text-0 hover:bg-surface-5 transition-colors cursor-pointer"
             >
               <X size={16} />
-            </DialogPrimitive.Close>
+            </button>
           </div>
         )}
         <DialogPrimitive.Description className="sr-only">Panel</DialogPrimitive.Description>

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

@@ -10,13 +10,13 @@ export function TuningSlider({
   const display = typeof fmt === 'function' ? fmt(value) : (typeof fmt === 'string' ? fmt : value);
 
   return (
-    <div className={cn('group flex items-center gap-2 py-1.5', disabled && 'opacity-40 pointer-events-none', className)}>
-      <span className="text-2xs text-text-2 font-sans w-20 shrink-0 truncate">{label}</span>
+    <div className={cn('group flex items-center gap-2.5 h-8', disabled && 'opacity-40 pointer-events-none', className)}>
+      <span className="text-[11px] text-text-2 font-sans w-[76px] shrink-0 truncate">{label}</span>
       <div className="relative flex-1 flex items-center h-5">
         <div className="absolute inset-y-0 flex items-center w-full pointer-events-none">
-          <div className="w-full h-1 rounded-full bg-surface-5">
+          <div className="w-full h-[3px] rounded-full bg-surface-5">
             <div
-              className="h-full rounded-full bg-accent/70 group-hover:bg-accent transition-colors"
+              className="h-full rounded-full bg-accent/60 group-hover:bg-accent transition-colors"
               style={{ width: `${pct}%` }}
             />
           </div>
@@ -30,20 +30,20 @@ export function TuningSlider({
           disabled={disabled}
           onChange={(e) => onChange(Number(e.target.value))}
           className="relative w-full h-5 appearance-none bg-transparent cursor-pointer
-            [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
+            [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-2.5 [&::-webkit-slider-thumb]:h-2.5
             [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent
             [&::-webkit-slider-thumb]:shadow-[0_0_0_2px_var(--color-surface-1)]
-            [&::-webkit-slider-thumb]:hover:bg-accent [&::-webkit-slider-thumb]:hover:shadow-[0_0_0_2px_var(--color-surface-1),0_0_8px_rgba(51,175,188,0.4)]
+            [&::-webkit-slider-thumb]:hover:shadow-[0_0_0_2px_var(--color-surface-1),0_0_6px_rgba(51,175,188,0.35)]
             [&::-webkit-slider-thumb]:active:scale-110
             [&::-webkit-slider-thumb]:transition-all
-            [&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:rounded-full
+            [&::-moz-range-thumb]:w-2.5 [&::-moz-range-thumb]:h-2.5 [&::-moz-range-thumb]:rounded-full
             [&::-moz-range-thumb]:bg-accent [&::-moz-range-thumb]:border-none
             [&::-moz-range-thumb]:shadow-[0_0_0_2px_var(--color-surface-1)]
             [&::-moz-range-track]:bg-transparent
             disabled:cursor-not-allowed"
         />
       </div>
-      <span className="text-2xs text-accent font-mono font-medium w-10 text-right shrink-0 tabular-nums">{display}</span>
+      <span className="text-[11px] text-accent font-mono font-medium w-9 text-right shrink-0 tabular-nums">{display}</span>
     </div>
   );
 }

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

@@ -45,6 +45,7 @@ export const ROLE_COLORS = {
   creative:   NEUTRAL_ROLE,
   slides:     NEUTRAL_ROLE,
   chat:       NEUTRAL_ROLE,
+  research:   NEUTRAL_ROLE,
 };
 
 export function roleColor(role) {

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

@@ -91,6 +91,11 @@ export const useGrooveStore = create((set, get) => ({
           if (data) set({ subscription: { ...get().subscription, ...data } });
         });
       }
+      if (window.groove?.update?.onUpdateAvailable) {
+        window.groove.update.onUpdateAvailable((data) => {
+          set({ updateProgress: { percent: 0, version: data.version } });
+        });
+      }
       if (window.groove?.update?.onUpdateProgress) {
         window.groove.update.onUpdateProgress((data) => {
           set({ updateProgress: data });
@@ -101,6 +106,18 @@ export const useGrooveStore = create((set, get) => ({
           set({ updateReady: data.version, updateModalOpen: true, updateProgress: null });
         });
       }
+      if (window.groove?.update?.getUpdateStatus) {
+        window.groove.update.getUpdateStatus().then((state) => {
+          if (!state) return;
+          if (state.downloaded) {
+            set({ updateReady: state.downloaded.version, updateProgress: null });
+          } else if (state.progress) {
+            set({ updateProgress: state.progress });
+          } else if (state.available) {
+            set({ updateProgress: { percent: 0, version: state.available.version } });
+          }
+        }).catch(() => {});
+      }
     };
 
     ws.onmessage = (event) => {
@@ -297,6 +314,11 @@ export const useGrooveStore = create((set, get) => ({
         }
 
         case 'agent:exit': {
+          if (msg.status === 'waiting_for_input') {
+            const waitAgent = get().agents.find((a) => a.id === msg.agentId);
+            get().addToast('info', `${waitAgent?.name || msg.agentId.slice(0, 8)} needs your input`, 'Check the question popup below');
+            break;
+          }
           const agent = get().agents.find((a) => a.id === msg.agentId);
           const name = agent?.name || msg.agentId;
           const isKill = msg.status === 'killed' || msg.code === 143 || msg.code === 137;
@@ -398,6 +420,14 @@ export const useGrooveStore = create((set, get) => ({
           get().addChatMessage(msg.agentId, 'system', 'Agent is working — message will be delivered when it finishes.');
           break;
 
+        case 'agent:question':
+          set((s) => ({ pendingQuestions: [...s.pendingQuestions, msg.data] }));
+          break;
+
+        case 'agent:question:resolved':
+          set((s) => ({ pendingQuestions: s.pendingQuestions.filter((q) => q.agentId !== msg.agentId) }));
+          break;
+
         case 'ollama:pull:progress':
           set({ ollamaPullProgress: { ...get().ollamaPullProgress, [msg.model]: { status: 'pulling', progress: msg.progress } } });
           break;
@@ -433,6 +463,8 @@ export const useGrooveStore = create((set, get) => ({
         case 'lab:runtime:added':
         case 'lab:runtime:updated':
         case 'lab:runtime:removed':
+        case 'lab:runtime:started':
+        case 'lab:runtime:stopped':
         case 'llama:server:stopped':
           get().fetchLabRuntimes();
           break;
@@ -871,6 +903,17 @@ export const useGrooveStore = create((set, get) => ({
           break;
         }
 
+        case 'conversation:tool': {
+          const { conversationId, name, summary } = msg.data || msg;
+          if (!conversationId) break;
+          set((s) => {
+            const tools = { ...s.conversationActiveTools };
+            tools[conversationId] = { name: name || 'Tool', summary: summary || null, timestamp: Date.now() };
+            return { conversationActiveTools: tools };
+          });
+          break;
+        }
+
         case 'conversation:chunk': {
           const { conversationId, text } = msg.data || msg;
           if (!conversationId || !text) break;
@@ -885,7 +928,9 @@ export const useGrooveStore = create((set, get) => ({
               arr.push({ from: 'assistant', text, timestamp: Date.now() });
             }
             msgs[conversationId] = arr.slice(-200);
-            return { conversationMessages: msgs, streamingConversationId: conversationId };
+            const tools = { ...s.conversationActiveTools };
+            delete tools[conversationId];
+            return { conversationMessages: msgs, streamingConversationId: conversationId, conversationActiveTools: tools };
           });
           break;
         }
@@ -893,7 +938,9 @@ export const useGrooveStore = create((set, get) => ({
         case 'conversation:complete': {
           const { conversationId } = msg.data || msg;
           if (conversationId && get().streamingConversationId === conversationId) {
-            set({ sendingMessage: false, streamingConversationId: null });
+            const tools = { ...get().conversationActiveTools };
+            delete tools[conversationId];
+            set({ sendingMessage: false, streamingConversationId: null, conversationActiveTools: tools });
           }
           if (conversationId) persistJSON('groove:conversationMessages', get().conversationMessages);
           break;

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

@@ -14,6 +14,15 @@ export const createAgentsSlice = (set, get) => ({
   // Track which agents are thinking (sent a message, waiting for response)
   thinkingAgents: new Set(),
 
+  // Pending questions from agents awaiting user input
+  pendingQuestions: [],
+
+  answerQuestion(agentId, answers) {
+    return api.post(`/agents/${agentId}/answer`, { answers }).then(() => {
+      set((s) => ({ pendingQuestions: s.pendingQuestions.filter((q) => q.agentId !== agentId) }));
+    });
+  },
+
   // ── Workspace Mode ────────────────────────────────────────
   workspaceMode: localStorage.getItem('groove:workspaceMode') === 'true',
   workspaceAgentId: null,
@@ -38,7 +47,7 @@ export const createAgentsSlice = (set, get) => ({
 
   async spawnAgent(config) {
     try {
-      const teamId = get().activeTeamId;
+      const teamId = config.teamId || get().activeTeamId;
       const agent = await api.post('/agents', { ...config, teamId });
       get().addToast('success', `Spawned ${agent.name}`);
       return agent;
@@ -407,15 +416,22 @@ export const createAgentsSlice = (set, get) => ({
 
         case 'read': {
           if (tags.length === 0) { addSystemMsg('Usage: [read] #tag1 #tag2 ...'); return true; }
+          const userText = rest.replace(/#[\w/.-]+/g, '').trim();
           get().addChatMessage(agentId, 'user', message, false);
           const readBrief = await api.post('/keeper/pull', { tags });
           if (readBrief?.brief) {
+            const memoryBlock = `\n\n---\nContext from memories (${tags.map(t => '#' + t).join(', ')}):\n\n${readBrief.brief}`;
+            set((s) => ({ thinkingAgents: new Set([...s.thinkingAgents, agentId]) }));
             await api.post(`/agents/${encodeURIComponent(agentId)}/instruct`, {
-              message: `Here is context from my tagged memories:\n\n${readBrief.brief}`,
+              message: userText ? `${userText}${memoryBlock}` : `Here is context from my tagged memories:\n\n${readBrief.brief}`,
             });
             addSystemMsg(`Sent ${tags.map(t => '#' + t).join(', ')} to agent`);
           } else {
             addSystemMsg(`No memories found for ${tags.map(t => '#' + t).join(', ')}`);
+            if (userText) {
+              set((s) => ({ thinkingAgents: new Set([...s.thinkingAgents, agentId]) }));
+              await api.post(`/agents/${encodeURIComponent(agentId)}/instruct`, { message: userText });
+            }
           }
           return true;
         }

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

@@ -10,6 +10,7 @@ export const createChatSlice = (set, get) => ({
   conversations: [],
   activeConversationId: localStorage.getItem('groove:activeConversationId') || null,
   conversationMessages: loadJSON('groove:conversationMessages'),
+  conversationActiveTools: {},
   sendingMessage: false,
   streamingConversationId: null,
   conversationRoles: loadJSON('groove:conversationRoles'),
@@ -166,20 +167,19 @@ export const createChatSlice = (set, get) => ({
 
     try {
       const body = { message };
-      if (conv.mode === 'api' || !conv.mode) {
-        const history = get().conversationMessages[conversationId] || [];
-        body.history = history.slice(0, -1);
-
-        const role = get().conversationRoles?.[conversationId];
-        const rules = ['Never use emojis in your responses.', 'Be professional, concise, and direct.'];
-        if (role) rules.unshift(`You are a professional ${role}. Respond with deep expertise in that domain.`);
-        const systemCtx = rules.join(' ');
-        body.history = [
-          { from: 'user', text: `Instructions: ${systemCtx}` },
-          { from: 'assistant', text: 'Understood.' },
-          ...body.history,
-        ];
-      }
+      const history = get().conversationMessages[conversationId] || [];
+      body.history = history.slice(0, -1);
+
+      const role = get().conversationRoles?.[conversationId];
+      const rules = ['Never use emojis in your responses.', 'Be professional, concise, and direct.'];
+      if (role && role !== 'chat') rules.unshift(`You are a professional ${role}. Respond with deep expertise in that domain.`);
+      if (role === 'research') rules.unshift('You are a research assistant. Help explore ideas, synthesize information, and provide thorough analysis with sources when possible.');
+      const systemCtx = rules.join(' ');
+      body.history = [
+        { from: 'user', text: `Instructions: ${systemCtx}` },
+        { from: 'assistant', text: 'Understood.' },
+        ...body.history,
+      ];
       const effort = get().conversationReasoningEffort?.[conversationId] || 'medium';
       const verbosity = get().conversationVerbosity?.[conversationId] || 'medium';
       if (conv.provider === 'codex') {

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

@@ -12,7 +12,7 @@ import { LabAssistant } from '../components/lab/lab-assistant';
 import { MetricsPanel } from '../components/lab/metrics-panel';
 import { PresetManager } from '../components/lab/preset-manager';
 import { cn } from '../lib/cn';
-import { FlaskConical, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Box } from 'lucide-react';
+import { FlaskConical, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Box, ChevronRight } from 'lucide-react';
 
 const LEFT_DEFAULT = 280;
 const LEFT_MIN = 220;
@@ -21,6 +21,39 @@ const RIGHT_DEFAULT = 240;
 const RIGHT_MIN = 200;
 const RIGHT_MAX = 360;
 
+export function SidebarSection({ label, action, children, className, collapsible = false, defaultOpen = true }) {
+  const [open, setOpen] = useState(defaultOpen);
+  const isOpen = collapsible ? open : true;
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {label && (
+        <div className="flex items-center justify-between h-6">
+          {collapsible ? (
+            <button
+              onClick={() => setOpen(!open)}
+              className="flex items-center gap-1.5 cursor-pointer group"
+            >
+              <ChevronRight
+                size={10}
+                className={cn(
+                  'text-text-4 transition-transform duration-150 flex-shrink-0',
+                  isOpen && 'rotate-90',
+                )}
+              />
+              <span className="text-[10px] font-semibold font-sans text-text-3 uppercase tracking-widest group-hover:text-text-2 transition-colors">{label}</span>
+            </button>
+          ) : (
+            <span className="text-[10px] font-semibold font-sans text-text-3 uppercase tracking-widest">{label}</span>
+          )}
+          {isOpen && action}
+        </div>
+      )}
+      {isOpen && children}
+    </div>
+  );
+}
+
 function ModelSelector() {
   const models = useGrooveStore((s) => s.labModels);
   const runtimes = useGrooveStore((s) => s.labRuntimes);
@@ -35,18 +68,16 @@ function ModelSelector() {
 
   if (!online) {
     return (
-      <div className="space-y-1.5">
-        <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider">Model</span>
-        <p className="text-2xs text-text-4 font-sans px-1">Start the runtime to select a model</p>
-      </div>
+      <SidebarSection label="Model">
+        <p className="text-2xs text-text-4 font-sans">Start the runtime to select a model</p>
+      </SidebarSection>
     );
   }
 
   if (models.length <= 1 && activeModel) return null;
 
   return (
-    <div className="space-y-1.5">
-      <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider">Model</span>
+    <SidebarSection label="Model">
       <Combobox
         value={activeModel || ''}
         onChange={setActiveModel}
@@ -60,7 +91,7 @@ function ModelSelector() {
           </div>
         )}
       />
-    </div>
+    </SidebarSection>
   );
 }
 
@@ -104,6 +135,7 @@ export default function ModelLabView() {
   const labAssistantAgentId = useGrooveStore((s) => s.labAssistantAgentId);
   const labAssistantMode = useGrooveStore((s) => s.labAssistantMode);
   const setLabAssistantMode = useGrooveStore((s) => s.setLabAssistantMode);
+  const launchLabAssistant = useGrooveStore((s) => s.launchLabAssistant);
 
   useEffect(() => { fetchLabRuntimes(); }, [fetchLabRuntimes]);
 
@@ -175,7 +207,7 @@ export default function ModelLabView() {
           style={leftCollapsed ? undefined : { width: leftWidth }}
         >
           <div className="h-full flex flex-col">
-            <div className="flex-shrink-0 flex items-center justify-between px-4 h-10">
+            <div className="flex-shrink-0 flex items-center justify-between px-4 h-10 border-b border-border-subtle">
               <div className="flex items-center gap-2">
                 <FlaskConical size={13} className="text-accent" />
                 <span className="text-xs font-semibold font-sans text-text-1">Model Lab</span>
@@ -183,7 +215,7 @@ export default function ModelLabView() {
               <PanelToggle collapsed={false} onClick={() => setLeftCollapsed(true)} side="left" />
             </div>
             <ScrollArea className="flex-1 min-h-0">
-              <div className="px-4 pb-4 space-y-5 divide-y divide-border-subtle [&>*]:pt-5 [&>*:first-child]:pt-0">
+              <div className="px-4 py-4 space-y-6">
                 <RuntimeSection />
                 <ModelSelector />
                 <ParameterPanel />
@@ -203,28 +235,32 @@ export default function ModelLabView() {
             {leftCollapsed && (
               <PanelToggle collapsed onClick={() => setLeftCollapsed(false)} side="left" />
             )}
-            {labAssistantAgentId && (
-              <div className="flex items-center gap-px bg-surface-2 rounded p-px">
-                <button
-                  onClick={() => setLabAssistantMode(false)}
-                  className={cn(
-                    'px-3 py-1 text-2xs font-sans font-medium rounded-sm transition-colors cursor-pointer',
-                    !labAssistantMode ? 'text-text-0 bg-surface-4' : 'text-text-3 hover:text-text-1',
-                  )}
-                >
-                  Playground
-                </button>
-                <button
-                  onClick={() => setLabAssistantMode(true)}
-                  className={cn(
-                    'px-3 py-1 text-2xs font-sans font-medium rounded-sm transition-colors cursor-pointer',
-                    labAssistantMode ? 'text-text-0 bg-surface-4' : 'text-text-3 hover:text-text-1',
-                  )}
-                >
-                  Assistant
-                </button>
-              </div>
-            )}
+            <div className="flex items-center gap-px bg-surface-2 rounded p-px">
+              <button
+                onClick={() => setLabAssistantMode(false)}
+                className={cn(
+                  'px-3 py-1 text-2xs font-sans font-medium rounded-sm transition-colors cursor-pointer',
+                  !labAssistantMode ? 'text-text-0 bg-surface-4' : 'text-text-3 hover:text-text-1',
+                )}
+              >
+                Playground
+              </button>
+              <button
+                onClick={() => {
+                  if (labAssistantAgentId) {
+                    setLabAssistantMode(true);
+                  } else {
+                    launchLabAssistant('lab-general');
+                  }
+                }}
+                className={cn(
+                  'px-3 py-1 text-2xs font-sans font-medium rounded-sm transition-colors cursor-pointer',
+                  labAssistantMode ? 'text-text-0 bg-surface-4' : 'text-text-3 hover:text-text-1',
+                )}
+              >
+                Assistant
+              </button>
+            </div>
             <div className="flex-1" />
             {rightCollapsed && (
               <PanelToggle collapsed onClick={() => setRightCollapsed(false)} side="right" />