groove-dev 0.27.144 → 0.27.146

package/node_modules/@groove-dev/gui/src/components/lab/chat-playground.jsx

@@ -5,7 +5,7 @@ import { ScrollArea } from '../ui/scroll-area';
 import { Button } from '../ui/button';
 import { Tooltip } from '../ui/tooltip';
 import { cn } from '../../lib/cn';
-import { Send, Plus, ChevronDown, Square, Clock, Zap, Bot } from 'lucide-react';
+import { SendHorizontal, Plus, ChevronDown, Clock, Zap, Bot } from 'lucide-react';
 
 function MessageMetrics({ metrics }) {
   if (!metrics) return null;
@@ -40,7 +40,7 @@ function UserMessage({ msg }) {
     <div className="flex justify-end animate-chat-fade-in">
       <div className="max-w-[80%]">
         <div className="px-3.5 py-2 bg-accent/8 rounded rounded-br-none">
-          <p className="text-xs text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">{msg.content}</p>
+          <p className="text-sm text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">{msg.content}</p>
         </div>
       </div>
     </div>
@@ -60,7 +60,7 @@ function AssistantMessage({ msg, streaming }) {
       </div>
       {msg.reasoning && (
         <div className="ml-5 mb-1.5 pl-3 border-l border-text-4/20 py-1">
-          <div className="text-2xs font-sans text-text-4 italic whitespace-pre-wrap break-words leading-relaxed">
+          <div className="text-xs font-sans text-text-4 italic whitespace-pre-wrap break-words leading-relaxed">
             {msg.reasoning}
             {isReasoning && <span className="inline-block w-1 h-3 bg-text-4/40 ml-0.5 animate-pulse" />}
           </div>
@@ -69,7 +69,7 @@ function AssistantMessage({ msg, streaming }) {
       <div className="ml-5">
         {msg.content ? (
           <div className={cn(
-            'text-xs font-sans whitespace-pre-wrap break-words leading-relaxed',
+            'text-sm font-sans whitespace-pre-wrap break-words leading-relaxed',
             msg.error ? 'text-danger' : 'text-text-1',
           )}>
             {msg.content}
@@ -217,44 +217,52 @@ export function ChatPlayground() {
 
       {/* Input */}
       <div className="flex-shrink-0 px-4 py-3">
-        <div className="flex items-end gap-2 bg-surface-1 border border-border-subtle rounded-md p-1.5 focus-within:border-accent/30 transition-colors">
-          <textarea
-            ref={inputRef}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder={!activeRuntime ? 'Select a runtime first' : !activeModel ? 'Select a model first' : 'Type a message...'}
-            disabled={!activeRuntime || !activeModel}
-            rows={1}
-            className={cn(
-              'flex-1 resize-none bg-transparent px-2 py-1.5',
-              'text-xs text-text-0 font-sans placeholder:text-text-4',
-              'focus:outline-none',
-              'disabled:opacity-40 disabled:cursor-not-allowed',
-              'min-h-[28px] max-h-32',
+        <div className="flex flex-col rounded-lg border border-border-subtle bg-surface-0 transition-colors overflow-hidden focus-within:border-text-4/40">
+          <div className="px-1">
+            <textarea
+              ref={inputRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder={!activeRuntime ? 'Select a runtime first' : !activeModel ? 'Select a model first' : 'Type a message...'}
+              disabled={!activeRuntime || !activeModel}
+              rows={1}
+              className={cn(
+                'w-full resize-none px-3 py-2.5 text-[13px]',
+                'bg-transparent font-sans text-text-0',
+                'placeholder:text-text-4',
+                'focus:outline-none',
+                'disabled:opacity-40 disabled:cursor-not-allowed',
+              )}
+              style={{ height: 88 }}
+            />
+          </div>
+          <div className="flex items-center gap-1 px-1.5 pb-1.5 pt-0.5">
+            <div className="flex-1" />
+            {streaming && (
+              <button
+                onClick={() => useGrooveStore.getState().stopLabInference()}
+                title="Stop generation"
+                className="group w-7 h-7 flex items-center justify-center rounded-md transition-colors cursor-pointer"
+              >
+                <span className="relative flex items-center justify-center w-3.5 h-3.5">
+                  <span className="absolute inset-0 rounded-full bg-accent/30 group-hover:bg-red-500/30 animate-ping [animation-duration:2s] transition-colors" />
+                  <span className="relative w-2.5 h-2.5 rounded-full bg-accent group-hover:bg-red-500 transition-colors" />
+                </span>
+              </button>
             )}
-            style={{ height: 'auto', overflowY: input.split('\n').length > 4 ? 'auto' : 'hidden' }}
-            onInput={(e) => { e.target.style.height = 'auto'; e.target.style.height = `${Math.min(e.target.scrollHeight, 128)}px`; }}
-          />
-          {streaming ? (
-            <button
-              onClick={() => useGrooveStore.getState().stopLabInference()}
-              className="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-sm bg-danger/15 text-danger hover:bg-danger/25 transition-colors cursor-pointer"
-            >
-              <Square size={12} />
-            </button>
-          ) : (
             <button
               disabled={!canSend}
               onClick={handleSend}
               className={cn(
-                'flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-sm transition-colors cursor-pointer',
-                canSend ? 'bg-accent text-surface-0 hover:bg-accent/90' : 'bg-surface-3 text-text-4 cursor-not-allowed',
+                'w-7 h-7 flex items-center justify-center rounded-md transition-colors cursor-pointer',
+                'disabled:opacity-15 disabled:cursor-not-allowed',
+                canSend ? 'text-text-0 hover:text-text-1' : 'text-text-4',
               )}
             >
-              <Send size={12} />
+              <SendHorizontal size={15} />
             </button>
-          )}
+          </div>
         </div>
       </div>
     </div>

package/node_modules/@groove-dev/gui/src/components/lab/lab-assistant.jsx

@@ -307,7 +307,7 @@ export function LabAssistant() {
             <span className="relative w-1.5 h-1.5 rounded-full bg-accent" />
           </div>
           <span className="text-2xs font-sans text-text-2">
-            Lab Assistant is setting up <span className="font-medium text-text-1">{backend?.toUpperCase()}</span>
+            Lab Assistant {backend === 'lab-general' ? 'is active' : <>is setting up <span className="font-medium text-text-1">{backend?.toUpperCase()}</span></>}
           </span>
           <div className="flex-1" />
           <Badge variant="success" className="text-2xs">running</Badge>
@@ -322,8 +322,14 @@ export function LabAssistant() {
               <div className="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-3">
                 <FlaskConical size={22} className="text-accent" />
               </div>
-              <p className="text-sm text-text-1 font-sans font-medium">Setting up {backend?.toUpperCase()}</p>
-              <p className="text-[13px] text-text-3 font-sans mt-1.5">The assistant is starting up and will begin configuring your runtime...</p>
+              <p className="text-sm text-text-1 font-sans font-medium">
+                {backend === 'lab-general' ? 'Lab Assistant' : `Setting up ${backend?.toUpperCase()}`}
+              </p>
+              <p className="text-[13px] text-text-3 font-sans mt-1.5">
+                {backend === 'lab-general'
+                  ? 'Ask about runtime setup, model configs, context windows, prompts, or anything else...'
+                  : 'The assistant is starting up and will begin configuring your runtime...'}
+              </p>
             </div>
           ) : (
             messages.map((msg, i) =>

package/node_modules/@groove-dev/gui/src/components/lab/metrics-panel.jsx

@@ -115,6 +115,7 @@ function SparklineSection({ icon: Icon, label, value, unit, data, color = HEX.ac
 export function MetricsPanel() {
   const metrics = useGrooveStore((s) => s.labMetrics);
   const activeRuntime = useGrooveStore((s) => s.labActiveRuntime);
+  const activeModel = useGrooveStore((s) => s.labActiveModel);
   const activeSession = useGrooveStore((s) => s.labActiveSession);
   const sessions = useGrooveStore((s) => s.labSessions);
 
@@ -276,11 +277,20 @@ export function MetricsPanel() {
       </div>
 
       {/* Attach to agent */}
-      {activeRuntime && (
+      {activeRuntime && activeModel && (
         <>
           <div className="h-px bg-border-subtle" />
-          <Tooltip content="Use current preset when spawning a new agent">
-            <button className="w-full flex items-center justify-center gap-1.5 px-3 py-2 text-2xs font-sans text-text-3 hover:text-text-1 border border-border-subtle rounded-sm hover:border-border transition-colors cursor-pointer">
+          <Tooltip content="Spawn a new agent using this runtime and model">
+            <button
+              onClick={() => {
+                useGrooveStore.getState().openDetail({
+                  type: 'spawn',
+                  presetProvider: 'local',
+                  presetModel: `runtime:${activeRuntime}:${activeModel}`,
+                });
+              }}
+              className="w-full flex items-center justify-center gap-1.5 px-3 py-2 text-2xs font-sans text-text-3 hover:text-text-1 border border-border-subtle rounded-sm hover:border-border transition-colors cursor-pointer"
+            >
               <Link size={11} /> Attach to Agent
             </button>
           </Tooltip>

package/node_modules/@groove-dev/gui/src/components/lab/parameter-panel.jsx

@@ -1,9 +1,10 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState } from 'react';
 import { useGrooveStore } from '../../stores/groove';
+import { SidebarSection } from '../../views/model-lab';
 import { TuningSlider } from '../ui/slider';
 import { Tooltip } from '../ui/tooltip';
-import { RotateCcw, Brain, Braces, ChevronRight, Dices, X, Plus } from 'lucide-react';
+import { RotateCcw, ChevronRight, Dices, X, Plus } from 'lucide-react';
 import { cn } from '../../lib/cn';
 
 const DEFAULTS = {
@@ -25,40 +26,42 @@ const PENALTY_SLIDERS = [
   { key: 'presencePenalty', label: 'Pres Penalty', min: 0, max: 2, step: 0.01 },
 ];
 
-function ParamGroup({ title, defaultOpen = true, children }) {
+function ParamGroup({ title, defaultOpen = false, children }) {
   const [open, setOpen] = useState(defaultOpen);
   return (
     <div>
       <button
         onClick={() => setOpen(!open)}
-        className="w-full flex items-center gap-1.5 py-1.5 text-left cursor-pointer group"
+        className="w-full flex items-center gap-1.5 h-7 text-left cursor-pointer group"
       >
         <ChevronRight
           size={10}
           className={cn('text-text-4 transition-transform duration-150 flex-shrink-0', open && 'rotate-90')}
         />
-        <span className="text-2xs font-semibold text-text-4 font-sans uppercase tracking-wider">{title}</span>
+        <span className="text-[10px] font-semibold text-text-4 font-sans uppercase tracking-widest">{title}</span>
       </button>
-      {open && <div className="space-y-0.5 pb-1">{children}</div>}
+      {open && <div className="space-y-1 pl-0.5 pt-1">{children}</div>}
     </div>
   );
 }
 
-function ToggleRow({ icon: Icon, label, active, onClick, description }) {
+function ToggleSwitch({ label, active, onClick, description }) {
   return (
     <Tooltip content={description} side="right">
       <button
         onClick={onClick}
-        className={cn(
-          'w-full flex items-center gap-2 px-2 py-1.5 rounded-sm transition-colors cursor-pointer text-left',
-          active ? 'bg-accent/8' : 'hover:bg-surface-3',
-        )}
+        className="w-full flex items-center gap-2.5 h-9 text-left cursor-pointer group"
       >
-        <Icon size={12} className={cn(active ? 'text-accent' : 'text-text-4')} />
-        <span className="flex-1 text-2xs font-sans text-text-2">{label}</span>
-        <span className={cn('text-2xs font-mono', active ? 'text-accent' : 'text-text-4')}>
-          {active ? 'ON' : 'OFF'}
-        </span>
+        <span className="text-[11px] font-sans text-text-2 flex-1">{label}</span>
+        <div className={cn(
+          'w-7 h-[16px] rounded-full transition-colors relative flex-shrink-0',
+          active ? 'bg-accent' : 'bg-surface-5',
+        )}>
+          <div className={cn(
+            'absolute top-[2px] w-3 h-3 rounded-full bg-white shadow-sm transition-all',
+            active ? 'left-[14px]' : 'left-[2px]',
+          )} />
+        </div>
       </button>
     </Tooltip>
   );
@@ -69,26 +72,28 @@ function SeedInput({ value, onChange }) {
     onChange(Math.floor(Math.random() * 2147483647));
   }
   return (
-    <div className="flex items-center gap-1.5 px-2 py-1">
-      <span className="text-2xs text-text-3 font-sans flex-shrink-0 w-12">Seed</span>
-      <input
-        type="number"
-        min={0}
-        value={value ?? ''}
-        onChange={(e) => onChange(e.target.value === '' ? null : parseInt(e.target.value, 10))}
-        placeholder="Random"
-        className="flex-1 min-w-0 h-6 px-1.5 text-2xs font-mono bg-surface-1 border border-border rounded-sm text-text-1 placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent tabular-nums"
-      />
-      <Tooltip content="Randomize seed">
-        <button onClick={handleRandomize} className="p-0.5 text-text-4 hover:text-accent transition-colors cursor-pointer">
-          <Dices size={12} />
-        </button>
-      </Tooltip>
-      {value != null && (
-        <button onClick={() => onChange(null)} className="p-0.5 text-text-4 hover:text-danger transition-colors cursor-pointer">
-          <X size={10} />
-        </button>
-      )}
+    <div className="pt-2">
+      <span className="text-[11px] text-text-2 font-sans block mb-2.5">Seed</span>
+      <div className="flex items-center gap-1.5">
+        <input
+          type="number"
+          min={0}
+          value={value ?? ''}
+          onChange={(e) => onChange(e.target.value === '' ? null : parseInt(e.target.value, 10))}
+          placeholder="Random"
+          className="flex-1 min-w-0 h-7 px-2.5 text-[11px] font-mono bg-surface-1 border border-border rounded text-text-1 placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent/50 focus:border-accent/50 tabular-nums"
+        />
+        <Tooltip content="Randomize seed">
+          <button onClick={handleRandomize} className="p-0.5 text-text-4 hover:text-accent transition-colors cursor-pointer">
+            <Dices size={12} />
+          </button>
+        </Tooltip>
+        {value != null && (
+          <button onClick={() => onChange(null)} className="p-0.5 text-text-4 hover:text-danger transition-colors cursor-pointer">
+            <X size={10} />
+          </button>
+        )}
+      </div>
     </div>
   );
 }
@@ -113,35 +118,35 @@ function StopSequenceInput({ sequences, onChange }) {
   }
 
   return (
-    <div className="px-2 py-1 space-y-1.5">
-      <span className="text-2xs text-text-3 font-sans">Stop Sequences</span>
-      {sequences.length > 0 && (
-        <div className="flex flex-wrap gap-1">
-          {sequences.map((s, i) => (
-            <span key={i} className="inline-flex items-center gap-0.5 px-1.5 py-0.5 bg-surface-3 rounded text-2xs font-mono text-text-2">
-              {s.length > 12 ? s.slice(0, 12) + '...' : s}
-              <button onClick={() => handleRemove(i)} className="text-text-4 hover:text-danger cursor-pointer"><X size={8} /></button>
-            </span>
-          ))}
-        </div>
-      )}
-      <div className="flex gap-1">
+    <div className="pt-2">
+      <span className="text-[11px] text-text-2 font-sans block mb-2.5">Stop Sequences</span>
+      <div className="flex items-center gap-1.5">
         <input
           value={input}
           onChange={(e) => setInput(e.target.value)}
           onKeyDown={handleKeyDown}
           placeholder="Add sequence..."
           maxLength={100}
-          className="flex-1 min-w-0 h-6 px-1.5 text-2xs font-mono bg-surface-1 border border-border rounded-sm text-text-1 placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+          className="flex-1 min-w-0 h-7 px-2.5 text-[11px] font-mono bg-surface-1 border border-border rounded text-text-1 placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent/50 focus:border-accent/50"
         />
         <button
           onClick={handleAdd}
           disabled={!input.trim() || sequences.length >= 10}
-          className="p-1 text-text-4 hover:text-accent disabled:opacity-30 transition-colors cursor-pointer"
+          className="p-0.5 text-text-4 hover:text-accent disabled:opacity-30 transition-colors cursor-pointer"
         >
           <Plus size={12} />
         </button>
       </div>
+      {sequences.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mt-2.5">
+          {sequences.map((s, i) => (
+            <span key={i} className="inline-flex items-center gap-1 px-1.5 py-0.5 bg-surface-2 border border-border-subtle rounded text-[10px] font-mono text-text-2">
+              {s.length > 12 ? s.slice(0, 12) + '...' : s}
+              <button onClick={() => handleRemove(i)} className="text-text-4 hover:text-danger cursor-pointer"><X size={8} /></button>
+            </span>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
@@ -157,9 +162,11 @@ export function ParameterPanel() {
   }
 
   return (
-    <div className="space-y-1">
-      <div className="flex items-center justify-between mb-1">
-        <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider">Parameters</span>
+    <SidebarSection
+      label="Parameters"
+      collapsible
+      defaultOpen={false}
+      action={
         <Tooltip content="Reset to defaults">
           <button
             onClick={handleReset}
@@ -168,19 +175,16 @@ export function ParameterPanel() {
             <RotateCcw size={11} />
           </button>
         </Tooltip>
-      </div>
-
-      {/* Mode toggles */}
-      <div className="space-y-px pb-1">
-        <ToggleRow
-          icon={Brain}
+      }
+    >
+      <div className="space-y-0.5 rounded-md bg-surface-1/50 border border-border-subtle px-3 py-2">
+        <ToggleSwitch
           label="Thinking"
           active={parameters.thinking}
           onClick={() => setParameter('thinking', !parameters.thinking)}
           description="Chain-of-thought for supported models (Qwen3, etc.)"
         />
-        <ToggleRow
-          icon={Braces}
+        <ToggleSwitch
           label="JSON Mode"
           active={parameters.jsonMode}
           onClick={() => setParameter('jsonMode', !parameters.jsonMode)}
@@ -188,7 +192,6 @@ export function ParameterPanel() {
         />
       </div>
 
-      {/* Sampling group */}
       <ParamGroup title="Sampling">
         {SAMPLING_SLIDERS.map((s) => (
           <TuningSlider
@@ -203,7 +206,6 @@ export function ParameterPanel() {
         ))}
       </ParamGroup>
 
-      {/* Generation group */}
       <ParamGroup title="Generation">
         <TuningSlider
           label="Max Tokens"
@@ -221,7 +223,6 @@ export function ParameterPanel() {
         />
       </ParamGroup>
 
-      {/* Penalties group — collapsed by default */}
       <ParamGroup title="Penalties" defaultOpen={false}>
         {PENALTY_SLIDERS.map((s) => (
           <TuningSlider
@@ -235,6 +236,6 @@ export function ParameterPanel() {
           />
         ))}
       </ParamGroup>
-    </div>
+    </SidebarSection>
   );
 }

package/node_modules/@groove-dev/gui/src/components/lab/preset-manager.jsx

@@ -1,6 +1,7 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useState } from 'react';
 import { useGrooveStore } from '../../stores/groove';
+import { SidebarSection } from '../../views/model-lab';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Dialog, DialogContent } from '../ui/dialog';
@@ -54,33 +55,35 @@ export function PresetManager() {
   const [saveOpen, setSaveOpen] = useState(false);
 
   return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider">Presets</span>
+    <SidebarSection
+      label="Presets"
+      collapsible
+      defaultOpen={false}
+      action={
         <Tooltip content="Save current settings as preset">
           <button
             onClick={() => setSaveOpen(true)}
             className="p-1 text-text-4 hover:text-accent transition-colors cursor-pointer"
           >
-            <Save size={13} />
+            <Save size={12} />
           </button>
         </Tooltip>
-      </div>
-
+      }
+    >
       {presets.length === 0 ? (
-        <div className="py-3 text-center">
-          <BookmarkCheck size={14} className="mx-auto text-text-4 mb-1" />
-          <p className="text-2xs text-text-4 font-sans">No presets saved</p>
+        <div className="py-5 text-center rounded-md bg-surface-1/50 border border-border-subtle">
+          <BookmarkCheck size={14} className="mx-auto text-text-4 mb-1.5" />
+          <p className="text-[10px] text-text-4 font-sans">No presets saved</p>
         </div>
       ) : (
         <ScrollArea className="max-h-32">
-          <div className="space-y-px">
+          <div className="space-y-1 rounded-md bg-surface-1/50 border border-border-subtle p-2">
             {presets.map((preset) => (
               <div
                 key={preset.id}
                 className={cn(
-                  'flex items-center gap-2 px-2.5 py-1.5 rounded-sm transition-colors',
-                  activePreset === preset.id ? 'bg-accent/8' : 'hover:bg-surface-3',
+                  'flex items-center gap-2.5 px-2.5 py-2 rounded transition-colors',
+                  activePreset === preset.id ? 'bg-accent/10' : 'hover:bg-surface-3',
                 )}
               >
                 <button
@@ -88,7 +91,7 @@ export function PresetManager() {
                   className="flex-1 text-left min-w-0 cursor-pointer"
                 >
                   <div className={cn(
-                    'text-xs font-sans truncate',
+                    'text-[11px] font-sans truncate',
                     activePreset === preset.id ? 'text-accent font-medium' : 'text-text-2',
                   )}>
                     {preset.name}
@@ -109,6 +112,6 @@ export function PresetManager() {
       )}
 
       <SavePresetDialog open={saveOpen} onOpenChange={setSaveOpen} />
-    </div>
+    </SidebarSection>
   );
 }