groove-dev 0.27.142 → 0.27.144

package/node_modules/@groove-dev/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/node_modules/@groove-dev/gui/src/components/lab/parameter-panel.jsx

@@ -1,24 +1,151 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
+import { useState } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { TuningSlider } from '../ui/slider';
 import { Tooltip } from '../ui/tooltip';
-import { RotateCcw } from 'lucide-react';
+import { RotateCcw, Brain, Braces, 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 = true, 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"
+      >
+        <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>
+      </button>
+      {open && <div className="space-y-0.5 pb-1">{children}</div>}
+    </div>
+  );
+}
+
+function ToggleRow({ icon: Icon, 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',
+        )}
+      >
+        <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>
+      </button>
+    </Tooltip>
+  );
+}
+
+function SeedInput({ value, onChange }) {
+  function handleRandomize() {
+    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>
+  );
+}
+
+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="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">
+        <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"
+        />
+        <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"
+        >
+          <Plus size={12} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
 export function ParameterPanel() {
   const parameters = useGrooveStore((s) => s.labParameters);
   const setParameter = useGrooveStore((s) => s.setLabParameter);
@@ -42,18 +169,72 @@ export function ParameterPanel() {
           </button>
         </Tooltip>
       </div>
-      {SLIDERS.map((s) => (
+
+      {/* Mode toggles */}
+      <div className="space-y-px pb-1">
+        <ToggleRow
+          icon={Brain}
+          label="Thinking"
+          active={parameters.thinking}
+          onClick={() => setParameter('thinking', !parameters.thinking)}
+          description="Chain-of-thought for supported models (Qwen3, etc.)"
+        />
+        <ToggleRow
+          icon={Braces}
+          label="JSON Mode"
+          active={parameters.jsonMode}
+          onClick={() => setParameter('jsonMode', !parameters.jsonMode)}
+          description="Constrain output to valid JSON"
+        />
+      </div>
+
+      {/* Sampling group */}
+      <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>
+
+      {/* Generation group */}
+      <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}
         />
-      ))}
+        <SeedInput value={parameters.seed} onChange={(v) => setParameter('seed', v)} />
+        <StopSequenceInput
+          sequences={parameters.stopSequences || []}
+          onChange={(v) => setParameter('stopSequences', v)}
+        />
+      </ParamGroup>
+
+      {/* Penalties group — collapsed by default */}
+      <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>
     </div>
   );
 }