groove-dev 0.27.143 → 0.27.145

package/packages/gui/src/components/lab/metrics-panel.jsx

@@ -4,29 +4,29 @@ import { Tooltip } from '../ui/tooltip';
 import { cn } from '../../lib/cn';
 import { fmtNum } from '../../lib/format';
 import { HEX, hexAlpha } from '../../lib/theme-hex';
-import { Zap, Clock, Cpu, Hash, Timer, Link } from 'lucide-react';
+import { Zap, Clock, Cpu, Hash, Timer, Link, MessageSquare, TrendingUp, ArrowUpRight, ArrowDownRight, Layers } from 'lucide-react';
 
 function TtftGauge({ value }) {
   if (value == null) {
     return (
-      <div className="text-center py-4">
+      <div className="text-center py-3">
         <div className="text-2xl font-mono font-bold text-text-4 tabular-nums">--</div>
-        <div className="text-2xs text-text-4 font-sans mt-1">TTFT</div>
+        <div className="text-2xs text-text-4 font-sans mt-0.5">TTFT</div>
       </div>
     );
   }
   const color = value < 200 ? 'text-success' : value < 500 ? 'text-warning' : 'text-danger';
   return (
-    <div className="text-center py-4">
+    <div className="text-center py-3">
       <div className={cn('text-2xl font-mono font-bold tabular-nums', color)}>
         {Math.round(value)}
       </div>
-      <div className="text-2xs text-text-3 font-sans mt-1">ms TTFT</div>
+      <div className="text-2xs text-text-3 font-sans mt-0.5">ms TTFT</div>
     </div>
   );
 }
 
-function Sparkline({ data, width = 140, height = 32, color = HEX.accent }) {
+function Sparkline({ data, width = 140, height = 28, color = HEX.accent }) {
   if (!data || data.length < 2) {
     return <div className="flex-shrink-0" style={{ width, height }} />;
   }
@@ -54,11 +54,11 @@ function Sparkline({ data, width = 140, height = 32, color = HEX.accent }) {
   );
 }
 
-function MetricRow({ icon: Icon, label, value, unit, tooltip }) {
+function MetricRow({ icon: Icon, label, value, unit, tooltip, accent }) {
   const content = (
-    <div className="flex items-center justify-between py-2">
+    <div className="flex items-center justify-between py-1.5">
       <div className="flex items-center gap-2">
-        <Icon size={11} className="text-text-4 flex-shrink-0" />
+        <Icon size={11} className={cn('flex-shrink-0', accent ? 'text-accent' : 'text-text-4')} />
         <span className="text-2xs text-text-3 font-sans">{label}</span>
       </div>
       <span className="text-xs font-mono font-medium text-text-1 tabular-nums">
@@ -69,48 +69,203 @@ function MetricRow({ icon: Icon, label, value, unit, tooltip }) {
   return tooltip ? <Tooltip content={tooltip}>{content}</Tooltip> : content;
 }
 
+function SectionLabel({ children }) {
+  return (
+    <span className="text-2xs font-semibold font-sans text-text-4 uppercase tracking-wider">{children}</span>
+  );
+}
+
+function CapacityBar({ used, total, label }) {
+  if (!total) return null;
+  const pct = Math.min((used / total) * 100, 100);
+  const color = pct < 50 ? 'bg-success' : pct < 80 ? 'bg-warning' : 'bg-danger';
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between">
+        <span className="text-2xs text-text-3 font-sans">{label}</span>
+        <span className="text-2xs font-mono text-text-2 tabular-nums">{Math.round(pct)}%</span>
+      </div>
+      <div className="h-1.5 bg-surface-3 rounded-full overflow-hidden">
+        <div className={cn('h-full rounded-full transition-all duration-300', color)} style={{ width: `${pct}%` }} />
+      </div>
+      <div className="text-2xs font-mono text-text-4 tabular-nums">
+        {fmtNum(used)} / {fmtNum(total)}
+      </div>
+    </div>
+  );
+}
+
+function SparklineSection({ icon: Icon, label, value, unit, data, color = HEX.accent }) {
+  return (
+    <div className="space-y-1.5">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1.5">
+          <Icon size={11} className="text-accent" />
+          <span className="text-2xs text-text-3 font-sans">{label}</span>
+        </div>
+        <span className="text-sm font-mono font-bold text-text-0 tabular-nums">
+          {value != null ? value : '--'}{unit && value != null ? <span className="text-text-4 ml-0.5 text-xs">{unit}</span> : ''}
+        </span>
+      </div>
+      <Sparkline data={data} color={color} />
+    </div>
+  );
+}
+
 export function MetricsPanel() {
   const metrics = useGrooveStore((s) => s.labMetrics);
   const activeRuntime = useGrooveStore((s) => s.labActiveRuntime);
+  const activeSession = useGrooveStore((s) => s.labActiveSession);
+  const sessions = useGrooveStore((s) => s.labSessions);
+
+  const session = sessions.find((s) => s.id === activeSession);
+  const messageCount = session?.messages?.length || 0;
+  const generationCount = metrics.generationCount || 0;
+  const avgTps = metrics.tokensPerSecHistory.length > 0
+    ? (metrics.tokensPerSecHistory.reduce((a, b) => a + (b || 0), 0) / metrics.tokensPerSecHistory.length)
+    : null;
+  const avgTtft = metrics.ttftHistory?.length > 0
+    ? (metrics.ttftHistory.reduce((a, b) => a + (b || 0), 0) / metrics.ttftHistory.length)
+    : null;
+  const peakTps = metrics.tokensPerSecHistory.length > 0
+    ? Math.max(...metrics.tokensPerSecHistory.filter((v) => v != null))
+    : null;
+
+  const sessionDuration = metrics.sessionStartTime
+    ? Math.round((Date.now() - metrics.sessionStartTime) / 1000)
+    : null;
+
+  function fmtDuration(secs) {
+    if (secs == null) return null;
+    if (secs < 60) return `${secs}s`;
+    if (secs < 3600) return `${Math.floor(secs / 60)}m ${secs % 60}s`;
+    return `${Math.floor(secs / 3600)}h ${Math.floor((secs % 3600) / 60)}m`;
+  }
 
   return (
-    <div className="space-y-5">
-      {/* TTFT Gauge */}
+    <div className="space-y-4">
+      {/* Performance */}
       <TtftGauge value={metrics.ttft} />
 
+      <SparklineSection
+        icon={Zap}
+        label="Tokens/sec"
+        value={metrics.tokensPerSec != null ? metrics.tokensPerSec.toFixed(1) : null}
+        data={metrics.tokensPerSecHistory}
+      />
+
+      {metrics.ttftHistory?.length > 1 && (
+        <SparklineSection
+          icon={Clock}
+          label="TTFT Trend"
+          value={metrics.ttft != null ? `${Math.round(metrics.ttft)}` : null}
+          unit="ms"
+          data={metrics.ttftHistory}
+          color={HEX.warning || HEX.accent}
+        />
+      )}
+
       <div className="h-px bg-border-subtle" />
 
-      {/* Tokens/sec with sparkline */}
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-1.5">
-            <Zap size={11} className="text-accent" />
-            <span className="text-2xs text-text-3 font-sans">Tokens/sec</span>
-          </div>
-          <span className="text-sm font-mono font-bold text-text-0 tabular-nums">
-            {metrics.tokensPerSec != null ? metrics.tokensPerSec.toFixed(1) : '--'}
-          </span>
-        </div>
-        <Sparkline data={metrics.tokensPerSecHistory} />
+      {/* Token Usage */}
+      <div className="space-y-1">
+        <SectionLabel>Tokens</SectionLabel>
+        <MetricRow
+          icon={Hash}
+          label="Total"
+          value={metrics.totalTokens > 0 ? fmtNum(metrics.totalTokens) : null}
+          tooltip="Total tokens generated this session"
+        />
+        {metrics.promptTokens > 0 && (
+          <MetricRow
+            icon={ArrowUpRight}
+            label="Prompt"
+            value={fmtNum(metrics.promptTokens)}
+            tooltip="Input/prompt tokens"
+          />
+        )}
+        {metrics.completionTokens > 0 && (
+          <MetricRow
+            icon={ArrowDownRight}
+            label="Completion"
+            value={fmtNum(metrics.completionTokens)}
+            tooltip="Output/completion tokens"
+          />
+        )}
       </div>
 
       <div className="h-px bg-border-subtle" />
 
-      {/* Stats */}
-      <div className="space-y-0">
+      {/* Session Stats */}
+      <div className="space-y-1">
+        <SectionLabel>Session</SectionLabel>
+        <MetricRow
+          icon={MessageSquare}
+          label="Messages"
+          value={messageCount > 0 ? messageCount : null}
+          tooltip="Messages in current session"
+        />
+        <MetricRow
+          icon={Layers}
+          label="Generations"
+          value={generationCount > 0 ? generationCount : null}
+          tooltip="Number of model generations"
+        />
+        {avgTps != null && (
+          <MetricRow
+            icon={TrendingUp}
+            label="Avg TPS"
+            value={avgTps.toFixed(1)}
+            tooltip="Average tokens/sec across session"
+          />
+        )}
+        {avgTtft != null && (
+          <MetricRow
+            icon={Clock}
+            label="Avg TTFT"
+            value={`${Math.round(avgTtft)}`}
+            unit="ms"
+            tooltip="Average time to first token"
+          />
+        )}
+        {peakTps != null && (
+          <MetricRow
+            icon={Zap}
+            label="Peak TPS"
+            value={peakTps.toFixed(1)}
+            accent
+            tooltip="Highest tokens/sec this session"
+          />
+        )}
+        <MetricRow
+          icon={Timer}
+          label="Duration"
+          value={fmtDuration(sessionDuration)}
+          tooltip="Time since first generation"
+        />
+      </div>
+
+      <div className="h-px bg-border-subtle" />
+
+      {/* Resources */}
+      <div className="space-y-1">
+        <SectionLabel>Resources</SectionLabel>
         <MetricRow
           icon={Cpu}
           label="Memory"
           value={metrics.memory != null ? `${(metrics.memory / 1024 / 1024).toFixed(0)}` : null}
           unit="MB"
-          tooltip="GPU/CPU memory usage"
-        />
-        <MetricRow
-          icon={Hash}
-          label="Total Tokens"
-          value={metrics.totalTokens > 0 ? fmtNum(metrics.totalTokens) : null}
-          tooltip="Total tokens generated this session"
+          tooltip="Current GPU/CPU memory usage"
         />
+        {metrics.peakMemory != null && metrics.peakMemory > 0 && (
+          <MetricRow
+            icon={Cpu}
+            label="Peak Memory"
+            value={`${(metrics.peakMemory / 1024 / 1024).toFixed(0)}`}
+            unit="MB"
+            tooltip="Peak memory usage this session"
+          />
+        )}
         <MetricRow
           icon={Timer}
           label="Gen Time"

package/packages/gui/src/components/lab/parameter-panel.jsx

@@ -1,24 +1,156 @@
 // 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 } from 'lucide-react';
+import { RotateCcw, ChevronRight, Dices, X, Plus } from 'lucide-react';
+import { cn } from '../../lib/cn';
 
 const DEFAULTS = {
-  temperature: 0.7, topP: 0.9, topK: 40, repeatPenalty: 1.1,
+  temperature: 0.7, topP: 0.9, topK: 40, minP: 0, repeatPenalty: 1.1,
   maxTokens: 2048, frequencyPenalty: 0, presencePenalty: 0,
+  thinking: false, seed: null, stopSequences: [], jsonMode: false,
 };
 
-const SLIDERS = [
+const SAMPLING_SLIDERS = [
   { key: 'temperature', label: 'Temperature', min: 0, max: 2, step: 0.01 },
   { key: 'topP', label: 'Top P', min: 0, max: 1, step: 0.01 },
+  { key: 'minP', label: 'Min P', min: 0, max: 1, step: 0.01 },
   { key: 'topK', label: 'Top K', min: 0, max: 200, step: 1 },
+];
+
+const PENALTY_SLIDERS = [
   { key: 'repeatPenalty', label: 'Repeat Penalty', min: 0, max: 2, step: 0.01 },
-  { key: 'maxTokens', label: 'Max Tokens', min: 1, max: 32768, step: 1, format: (v) => v >= 1000 ? `${(v / 1000).toFixed(1)}k` : v },
   { key: 'frequencyPenalty', label: 'Freq Penalty', min: 0, max: 2, step: 0.01 },
   { key: 'presencePenalty', label: 'Pres Penalty', min: 0, max: 2, step: 0.01 },
 ];
 
+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 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-[10px] font-semibold text-text-4 font-sans uppercase tracking-widest">{title}</span>
+      </button>
+      {open && <div className="space-y-1 pl-0.5 pt-1">{children}</div>}
+    </div>
+  );
+}
+
+function ToggleSwitch({ label, active, onClick, description }) {
+  return (
+    <Tooltip content={description} side="right">
+      <button
+        onClick={onClick}
+        className="w-full flex items-center gap-2.5 h-9 text-left cursor-pointer group"
+      >
+        <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>
+  );
+}
+
+function SeedInput({ value, onChange }) {
+  function handleRandomize() {
+    onChange(Math.floor(Math.random() * 2147483647));
+  }
+  return (
+    <div className="space-y-2 pt-1.5">
+      <span className="text-[11px] text-text-2 font-sans">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>
+  );
+}
+
+function StopSequenceInput({ sequences, onChange }) {
+  const [input, setInput] = useState('');
+
+  function handleAdd() {
+    const val = input.trim();
+    if (!val || sequences.length >= 10 || sequences.includes(val)) return;
+    onChange([...sequences, val]);
+    setInput('');
+  }
+
+  function handleRemove(idx) {
+    onChange(sequences.filter((_, i) => i !== idx));
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === 'Enter') { e.preventDefault(); handleAdd(); }
+    if (e.key === 'Backspace' && !input && sequences.length) handleRemove(sequences.length - 1);
+  }
+
+  return (
+    <div className="space-y-2 pt-1.5">
+      <span className="text-[11px] text-text-2 font-sans">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-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-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">
+          {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>
+  );
+}
+
 export function ParameterPanel() {
   const parameters = useGrooveStore((s) => s.labParameters);
   const setParameter = useGrooveStore((s) => s.setLabParameter);
@@ -30,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}
@@ -41,19 +175,67 @@ export function ParameterPanel() {
             <RotateCcw size={11} />
           </button>
         </Tooltip>
+      }
+    >
+      <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.)"
+        />
+        <ToggleSwitch
+          label="JSON Mode"
+          active={parameters.jsonMode}
+          onClick={() => setParameter('jsonMode', !parameters.jsonMode)}
+          description="Constrain output to valid JSON"
+        />
       </div>
-      {SLIDERS.map((s) => (
+
+      <ParamGroup title="Sampling">
+        {SAMPLING_SLIDERS.map((s) => (
+          <TuningSlider
+            key={s.key}
+            label={s.label}
+            value={parameters[s.key]}
+            onChange={(v) => setParameter(s.key, v)}
+            min={s.min}
+            max={s.max}
+            step={s.step}
+          />
+        ))}
+      </ParamGroup>
+
+      <ParamGroup title="Generation">
         <TuningSlider
-          key={s.key}
-          label={s.label}
-          value={parameters[s.key]}
-          onChange={(v) => setParameter(s.key, v)}
-          min={s.min}
-          max={s.max}
-          step={s.step}
-          formatValue={s.format}
+          label="Max Tokens"
+          value={parameters.maxTokens}
+          onChange={(v) => setParameter('maxTokens', v)}
+          min={1}
+          max={32768}
+          step={1}
+          formatValue={(v) => v >= 1000 ? `${(v / 1000).toFixed(1)}k` : v}
         />
-      ))}
-    </div>
+        <SeedInput value={parameters.seed} onChange={(v) => setParameter('seed', v)} />
+        <StopSequenceInput
+          sequences={parameters.stopSequences || []}
+          onChange={(v) => setParameter('stopSequences', v)}
+        />
+      </ParamGroup>
+
+      <ParamGroup title="Penalties" defaultOpen={false}>
+        {PENALTY_SLIDERS.map((s) => (
+          <TuningSlider
+            key={s.key}
+            label={s.label}
+            value={parameters[s.key]}
+            onChange={(v) => setParameter(s.key, v)}
+            min={s.min}
+            max={s.max}
+            step={s.step}
+          />
+        ))}
+      </ParamGroup>
+    </SidebarSection>
   );
 }

package/packages/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>
   );
 }