groove-dev 0.27.134 → 0.27.136

package/packages/gui/src/components/editor/code-editor.jsx

@@ -27,24 +27,24 @@ const LANGS = {
 const grooveHighlightStyle = HighlightStyle.define([
   { tag: t.keyword, color: '#b07fd5' },
   { tag: [t.name, t.deleted, t.character, t.macroName], color: '#d4d8e0' },
-  { tag: [t.function(t.variableName), t.labelName], color: '#7ab0df' },
-  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#c4956a' },
+  { tag: [t.function(t.variableName), t.labelName], color: '#dcc9a0' },
+  { tag: [t.color, t.constant(t.name), t.standard(t.name)], color: '#d4a07a' },
   { tag: [t.definition(t.name), t.separator], color: '#bcc2cd' },
-  { tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#cda869' },
-  { tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.special(t.string)], color: '#73c991' },
+  { tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace], color: '#e0c589' },
+  { tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.special(t.string)], color: '#89b4c4' },
   { tag: [t.meta, t.comment], color: '#6e7681', fontStyle: 'italic' },
   { tag: t.strong, fontWeight: 'bold' },
   { tag: t.emphasis, fontStyle: 'italic' },
   { tag: t.strikethrough, textDecoration: 'line-through' },
   { tag: t.link, color: '#7ab0df', textDecoration: 'underline' },
   { tag: t.heading, fontWeight: '400', color: '#bcc2cd' },
-  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#c4956a' },
-  { tag: [t.processingInstruction, t.string, t.inserted], color: '#73c991' },
+  { tag: [t.atom, t.bool, t.special(t.variableName)], color: '#d4a07a' },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: '#95b2b8' },
   { tag: t.invalid, color: '#d4736e' },
-  { tag: t.propertyName, color: '#7ab0df' },
+  { tag: t.propertyName, color: '#dcc9a0' },
   { tag: [t.tagName], color: '#d4736e' },
-  { tag: t.attributeName, color: '#cda869' },
-  { tag: t.attributeValue, color: '#73c991' },
+  { tag: t.attributeName, color: '#e0c589' },
+  { tag: t.attributeValue, color: '#95b2b8' },
 ]);
 
 // Custom theme overrides to match our design tokens

package/packages/gui/src/components/editor/file-tree.jsx

@@ -130,7 +130,7 @@ function TreeNode({ entry, depth = 0, activePath, onFileClick, onDirToggle, expa
       onDoubleClick={handleContextMenu}
       onContextMenu={handleContextMenu}
       className={cn(
-        'w-full flex items-center gap-1.5 py-[3px] text-[13px] font-sans cursor-pointer',
+        'w-full flex items-center gap-1.5 py-[3px] text-xs font-sans cursor-pointer',
         'hover:bg-surface-5 transition-colors text-left select-none',
         isActive && 'bg-accent/10 text-text-0',
         !isActive && 'text-text-1',

package/packages/gui/src/components/editor/terminal.jsx

@@ -29,6 +29,8 @@ function TerminalInstance({ tabId, visible, registerKill }) {
   const termIdRef = useRef(null);
   const handlerRef = useRef(null);
   const mountedRef = useRef(false);
+  const visibleRef = useRef(visible);
+  const lastSizeRef = useRef({ cols: 0, rows: 0 });
 
   useEffect(() => {
     registerKill?.(tabId, () => {
@@ -105,6 +107,9 @@ function TerminalInstance({ tabId, visible, registerKill }) {
       });
 
       term.onResize(({ cols, rows }) => {
+        if (cols === lastSizeRef.current.cols && rows === lastSizeRef.current.rows) return;
+        if (cols < 2 || rows < 2) return;
+        lastSizeRef.current = { cols, rows };
         const ws = useGrooveStore.getState().ws;
         if (ws?.readyState === WebSocket.OPEN && termIdRef.current) {
           ws.send(JSON.stringify({ type: 'terminal:resize', id: termIdRef.current, rows, cols }));
@@ -119,6 +124,7 @@ function TerminalInstance({ tabId, visible, registerKill }) {
     });
 
     const observer = new ResizeObserver(() => {
+      if (!visibleRef.current) return;
       requestAnimationFrame(() => { try { fitAddon.fit(); } catch {} });
     });
     observer.observe(containerRef.current);
@@ -135,6 +141,7 @@ function TerminalInstance({ tabId, visible, registerKill }) {
   }, []);
 
   useEffect(() => {
+    visibleRef.current = visible;
     if (visible && fitRef.current) {
       requestAnimationFrame(() => {
         try { fitRef.current.fit(); } catch {}

package/packages/gui/src/components/lab/chat-playground.jsx

@@ -5,23 +5,23 @@ 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, Loader2, Square, Clock, Zap, User, Bot } from 'lucide-react';
+import { Send, Plus, ChevronDown, Square, Clock, Zap, Bot } from 'lucide-react';
 
 function MessageMetrics({ metrics }) {
   if (!metrics) return null;
   return (
-    <div className="flex items-center gap-3 mt-1.5 pl-3">
+    <div className="flex items-center gap-3 mt-1 ml-5">
       {metrics.ttft != null && (
         <Tooltip content="Time to first token">
           <span className="text-2xs font-mono text-text-4 flex items-center gap-1">
-            <Clock size={10} /> {Math.round(metrics.ttft)}ms
+            <Clock size={9} /> {Math.round(metrics.ttft)}ms
           </span>
         </Tooltip>
       )}
       {metrics.tokensPerSec != null && (
         <Tooltip content="Tokens per second">
           <span className="text-2xs font-mono text-text-4 flex items-center gap-1">
-            <Zap size={10} /> {metrics.tokensPerSec.toFixed(1)} t/s
+            <Zap size={9} /> {metrics.tokensPerSec.toFixed(1)} t/s
           </span>
         </Tooltip>
       )}
@@ -37,9 +37,9 @@ function MessageMetrics({ metrics }) {
 
 function UserMessage({ msg }) {
   return (
-    <div className="flex justify-end">
-      <div className="max-w-[85%]">
-        <div className="px-3 py-2 rounded-xl rounded-br-sm bg-accent/10 border border-accent/15">
+    <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>
         </div>
       </div>
@@ -51,35 +51,35 @@ function AssistantMessage({ msg, streaming }) {
   const isStreaming = streaming && !msg.content && !msg.reasoning && !msg.error;
   const isReasoning = streaming && msg.reasoning && !msg.content;
   return (
-    <div>
-      <div className="text-2xs text-text-3 font-sans mb-0.5 font-medium flex items-center gap-1">
-        <Bot size={10} /> Assistant
+    <div className="animate-chat-fade-in">
+      <div className="flex items-center gap-1.5 mb-1">
+        <div className="w-4 h-4 rounded-sm bg-surface-4 flex items-center justify-center">
+          <Bot size={10} className="text-text-3" />
+        </div>
+        <span className="text-2xs text-text-3 font-sans font-medium">Assistant</span>
       </div>
       {msg.reasoning && (
-        <div className="border-l-2 border-text-4/30 pl-3 py-0.5 mb-1">
-          <div className="text-2xs font-sans text-text-3 italic whitespace-pre-wrap break-words leading-relaxed">
+        <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">
             {msg.reasoning}
-            {isReasoning && <span className="inline-block w-1 h-3 bg-text-4/50 ml-0.5 animate-pulse" />}
+            {isReasoning && <span className="inline-block w-1 h-3 bg-text-4/40 ml-0.5 animate-pulse" />}
           </div>
         </div>
       )}
-      <div className={cn(
-        'border-l-2 pl-3 py-0.5',
-        msg.error ? 'border-danger/40' : 'border-accent/40',
-      )}>
+      <div className="ml-5">
         {msg.content ? (
           <div className={cn(
             'text-xs font-sans whitespace-pre-wrap break-words leading-relaxed',
             msg.error ? 'text-danger' : 'text-text-1',
           )}>
             {msg.content}
-            {streaming && !msg.error && <span className="inline-block w-1.5 h-3.5 bg-accent/70 ml-0.5 animate-pulse" />}
+            {streaming && !msg.error && <span className="inline-block w-1.5 h-3.5 bg-accent/60 ml-0.5 animate-pulse" />}
           </div>
         ) : isStreaming ? (
-          <div className="flex items-center gap-1 py-1">
-            <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" />
-            <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" style={{ animationDelay: '150ms' }} />
-            <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" style={{ animationDelay: '300ms' }} />
+          <div className="flex items-center gap-1.5 py-1">
+            <span className="w-1 h-1 rounded-full bg-text-4 animate-pulse" />
+            <span className="w-1 h-1 rounded-full bg-text-4 animate-pulse" style={{ animationDelay: '150ms' }} />
+            <span className="w-1 h-1 rounded-full bg-text-4 animate-pulse" style={{ animationDelay: '300ms' }} />
           </div>
         ) : null}
       </div>
@@ -99,19 +99,19 @@ function SessionSelector({ sessions, activeSession, onSelect, onNew }) {
     <div className="relative">
       <button
         onClick={() => setOpen(!open)}
-        className="flex items-center gap-1.5 px-2 py-1 rounded-md text-2xs font-sans text-text-3 hover:text-text-1 hover:bg-surface-5/50 transition-colors cursor-pointer"
+        className="flex items-center gap-1 px-2 py-1 text-2xs font-sans text-text-3 hover:text-text-1 transition-colors cursor-pointer"
       >
         {label} <ChevronDown size={10} />
       </button>
       {open && (
-        <div className="absolute top-full left-0 mt-1 z-20 min-w-40 bg-surface-1 border border-border rounded-md shadow-xl py-1">
+        <div className="absolute top-full left-0 mt-1 z-20 min-w-40 bg-surface-2 border border-border rounded py-1 shadow-xl">
           {sessions.map((sess, i) => (
             <button
               key={sess.id}
               onClick={() => { onSelect(sess.id); setOpen(false); }}
               className={cn(
                 'w-full text-left px-3 py-1.5 text-xs font-sans cursor-pointer transition-colors',
-                sess.id === activeSession ? 'text-accent bg-accent/10' : 'text-text-2 hover:bg-surface-5 hover:text-text-0',
+                sess.id === activeSession ? 'text-accent bg-accent/8' : 'text-text-2 hover:bg-surface-4 hover:text-text-0',
               )}
             >
               Session {i + 1}
@@ -165,11 +165,10 @@ export function ChatPlayground() {
   const canSend = input.trim() && activeRuntime && activeModel && !streaming;
 
   return (
-    <div className="h-full flex flex-col bg-surface-0 rounded-lg border border-border overflow-hidden">
-      {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-border-subtle bg-surface-1">
-        <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold font-sans text-text-1">Playground</span>
+    <div className="h-full flex flex-col">
+      {/* Toolbar */}
+      <div className="flex-shrink-0 flex items-center justify-between px-4 pb-2">
+        <div className="flex items-center gap-1">
           <SessionSelector
             sessions={sessions}
             activeSession={activeSession}
@@ -178,20 +177,25 @@ export function ChatPlayground() {
           />
         </div>
         <Tooltip content="New session">
-          <Button variant="ghost" size="sm" onClick={newSession}>
-            <Plus size={12} className="mr-1" /> New
-          </Button>
+          <button
+            onClick={newSession}
+            className="flex items-center gap-1 px-2 py-1 text-2xs font-sans text-text-3 hover:text-text-1 transition-colors cursor-pointer"
+          >
+            <Plus size={11} /> New
+          </button>
         </Tooltip>
       </div>
 
       {/* Messages */}
       <ScrollArea ref={scrollRef} className="flex-1 min-h-0">
-        <div className="px-4 py-4 space-y-4">
+        <div className="px-4 py-3 space-y-5">
           {messages.length === 0 ? (
-            <div className="flex flex-col items-center justify-center py-16 text-center">
-              <Bot size={32} className="text-text-4 mb-3" />
+            <div className="flex flex-col items-center justify-center py-20 text-center">
+              <div className="w-10 h-10 rounded bg-surface-2 flex items-center justify-center mb-3">
+                <Bot size={20} className="text-text-4" />
+              </div>
               <p className="text-sm text-text-2 font-sans font-medium">Start a conversation</p>
-              <p className="text-xs text-text-3 font-sans mt-1">
+              <p className="text-xs text-text-4 font-sans mt-1">
                 {!activeRuntime ? 'Select a runtime to get started' : !activeModel ? 'Select a model to get started' : 'Send a message to test your model'}
               </p>
             </div>
@@ -212,8 +216,8 @@ export function ChatPlayground() {
       </ScrollArea>
 
       {/* Input */}
-      <div className="flex-shrink-0 px-3 py-3 border-t border-border-subtle bg-surface-1">
-        <div className="flex items-end gap-2">
+      <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}
@@ -223,29 +227,33 @@ export function ChatPlayground() {
             disabled={!activeRuntime || !activeModel}
             rows={1}
             className={cn(
-              'flex-1 resize-none bg-surface-0 border border-border rounded-lg px-3 py-2',
+              '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 focus:ring-1 focus:ring-accent',
+              'focus:outline-none',
               'disabled:opacity-40 disabled:cursor-not-allowed',
-              'min-h-[36px] max-h-32',
+              'min-h-[28px] max-h-32',
             )}
             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 variant="danger" size="icon" className="flex-shrink-0" onClick={() => {}}>
-              <Square size={14} />
-            </Button>
+            <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
-              variant="primary"
-              size="icon"
-              className="flex-shrink-0"
+            <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',
+              )}
             >
-              <Send size={14} />
-            </Button>
+              <Send size={12} />
+            </button>
           )}
         </div>
       </div>

package/packages/gui/src/components/lab/lab-assistant.jsx

@@ -2,21 +2,20 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { useGrooveStore } from '../../stores/groove';
 import { ScrollArea } from '../ui/scroll-area';
-import { Button } from '../ui/button';
 import { Badge } from '../ui/badge';
 import { cn } from '../../lib/cn';
-import { Send, X, Bot, ArrowRight, Loader2 } from 'lucide-react';
+import { Send, X, Bot, ArrowRight } from 'lucide-react';
 
 function AssistantMessage({ msg }) {
   return (
-    <div>
-      <div className="text-2xs text-text-3 font-sans mb-0.5 font-medium flex items-center gap-1">
-        <Bot size={10} /> Lab Assistant
+    <div className="animate-chat-fade-in">
+      <div className="flex items-center gap-1.5 mb-1">
+        <div className="w-4 h-4 rounded-sm bg-surface-4 flex items-center justify-center">
+          <Bot size={10} className="text-text-3" />
+        </div>
+        <span className="text-2xs text-text-3 font-sans font-medium">Lab Assistant</span>
       </div>
-      <div className={cn(
-        'border-l-2 pl-3 py-0.5',
-        msg.error ? 'border-danger/40' : 'border-accent/40',
-      )}>
+      <div className="ml-5">
         <div className={cn(
           'text-xs font-sans whitespace-pre-wrap break-words leading-relaxed',
           msg.error ? 'text-danger' : 'text-text-1',
@@ -30,9 +29,9 @@ function AssistantMessage({ msg }) {
 
 function UserMessage({ msg }) {
   return (
-    <div className="flex justify-end">
-      <div className="max-w-[85%]">
-        <div className="px-3 py-2 rounded-xl rounded-br-sm bg-accent/10 border border-accent/15">
+    <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.text}</p>
         </div>
       </div>
@@ -84,13 +83,12 @@ export function LabAssistant() {
   if (!agentId) return null;
 
   return (
-    <div className="h-full flex flex-col bg-surface-0 rounded-lg border border-border overflow-hidden">
+    <div className="h-full flex flex-col">
       {/* Header */}
-      <div className="flex items-center justify-between px-3 py-2 border-b border-border-subtle bg-surface-1">
+      <div className="flex-shrink-0 flex items-center justify-between px-4 pb-2">
         <div className="flex items-center gap-2">
-          <span className="text-xs font-semibold font-sans text-text-1">Lab Assistant</span>
           {backend && (
-            <Badge variant="accent" className="text-2xs">{backend}</Badge>
+            <span className="text-2xs font-mono text-text-3">{backend}</span>
           )}
           {agent && (
             <Badge
@@ -103,7 +101,7 @@ export function LabAssistant() {
         </div>
         <button
           onClick={dismissLabAssistant}
-          className="p-1 rounded text-text-4 hover:text-text-1 hover:bg-surface-5/50 transition-colors cursor-pointer"
+          className="p-1 text-text-4 hover:text-text-1 transition-colors cursor-pointer"
         >
           <X size={14} />
         </button>
@@ -111,12 +109,14 @@ export function LabAssistant() {
 
       {/* Messages */}
       <ScrollArea ref={scrollRef} className="flex-1 min-h-0">
-        <div className="px-4 py-4 space-y-4">
+        <div className="px-4 py-3 space-y-5">
           {messages.length === 0 && !isThinking ? (
-            <div className="flex flex-col items-center justify-center py-16 text-center">
-              <Bot size={32} className="text-text-4 mb-3" />
+            <div className="flex flex-col items-center justify-center py-20 text-center">
+              <div className="w-10 h-10 rounded bg-surface-2 flex items-center justify-center mb-3">
+                <Bot size={20} className="text-text-4" />
+              </div>
               <p className="text-sm text-text-2 font-sans font-medium">Setting up {backend}</p>
-              <p className="text-xs text-text-3 font-sans mt-1">The assistant is starting up...</p>
+              <p className="text-xs text-text-4 font-sans mt-1">The assistant is starting up...</p>
             </div>
           ) : (
             messages.map((msg, i) =>
@@ -128,18 +128,18 @@ export function LabAssistant() {
             )
           )}
 
-          {/* Thinking indicator */}
           {isThinking && (
-            <div>
-              <div className="text-2xs text-text-3 font-sans mb-0.5 font-medium flex items-center gap-1">
-                <Bot size={10} /> Lab Assistant
-              </div>
-              <div className="border-l-2 border-accent/40 pl-3 py-0.5">
-                <div className="flex items-center gap-1 py-1">
-                  <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" />
-                  <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" style={{ animationDelay: '150ms' }} />
-                  <span className="w-1.5 h-1.5 rounded-full bg-text-3 animate-pulse" style={{ animationDelay: '300ms' }} />
+            <div className="animate-chat-fade-in">
+              <div className="flex items-center gap-1.5 mb-1">
+                <div className="w-4 h-4 rounded-sm bg-surface-4 flex items-center justify-center">
+                  <Bot size={10} className="text-text-3" />
                 </div>
+                <span className="text-2xs text-text-3 font-sans font-medium">Lab Assistant</span>
+              </div>
+              <div className="ml-5 flex items-center gap-1.5 py-1">
+                <span className="w-1 h-1 rounded-full bg-text-4 animate-pulse" />
+                <span className="w-1 h-1 rounded-full bg-text-4 animate-pulse" style={{ animationDelay: '150ms' }} />
+                <span className="w-1 h-1 rounded-full bg-text-4 animate-pulse" style={{ animationDelay: '300ms' }} />
               </div>
             </div>
           )}
@@ -148,23 +148,22 @@ export function LabAssistant() {
 
       {/* Completion banner */}
       {isComplete && messages.length > 0 && (
-        <div className="flex-shrink-0 px-3 py-2 border-t border-border-subtle bg-success/5">
+        <div className="flex-shrink-0 px-4 py-2 bg-success/5 border-t border-success/10">
           <div className="flex items-center justify-between">
             <span className="text-xs font-sans text-success font-medium">Setup complete</span>
-            <Button
-              variant="primary"
-              size="sm"
+            <button
               onClick={() => setLabAssistantMode(false)}
+              className="flex items-center gap-1 px-3 py-1.5 text-xs font-sans font-medium text-surface-0 bg-accent hover:bg-accent/90 rounded-sm transition-colors cursor-pointer"
             >
-              <ArrowRight size={12} className="mr-1" /> Switch to Playground
-            </Button>
+              <ArrowRight size={12} /> Playground
+            </button>
           </div>
         </div>
       )}
 
       {/* Input */}
-      <div className="flex-shrink-0 px-3 py-3 border-t border-border-subtle bg-surface-1">
-        <div className="flex items-end gap-2">
+      <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}
@@ -174,24 +173,25 @@ export function LabAssistant() {
             disabled={!isRunning}
             rows={1}
             className={cn(
-              'flex-1 resize-none bg-surface-0 border border-border rounded-lg px-3 py-2',
+              '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 focus:ring-1 focus:ring-accent',
+              'focus:outline-none',
               'disabled:opacity-40 disabled:cursor-not-allowed',
-              'min-h-[36px] max-h-32',
+              'min-h-[28px] max-h-32',
             )}
             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`; }}
           />
-          <Button
-            variant="primary"
-            size="icon"
-            className="flex-shrink-0"
+          <button
             disabled={!input.trim() || !isRunning}
             onClick={handleSend}
+            className={cn(
+              'flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-sm transition-colors cursor-pointer',
+              input.trim() && isRunning ? 'bg-accent text-surface-0 hover:bg-accent/90' : 'bg-surface-3 text-text-4 cursor-not-allowed',
+            )}
           >
-            <Send size={14} />
-          </Button>
+            <Send size={12} />
+          </button>
         </div>
       </div>
     </div>

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

@@ -1,8 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useGrooveStore } from '../../stores/groove';
-import { Button } from '../ui/button';
 import { Tooltip } from '../ui/tooltip';
-import { Badge } from '../ui/badge';
 import { cn } from '../../lib/cn';
 import { fmtNum } from '../../lib/format';
 import { HEX, hexAlpha } from '../../lib/theme-hex';
@@ -11,24 +9,24 @@ import { Zap, Clock, Cpu, Hash, Timer, Link } from 'lucide-react';
 function TtftGauge({ value }) {
   if (value == null) {
     return (
-      <div className="text-center py-3">
-        <div className="text-2xl font-mono font-bold text-text-4">—</div>
-        <div className="text-2xs text-text-4 font-sans mt-0.5">TTFT</div>
+      <div className="text-center py-4">
+        <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>
     );
   }
-  const color = value < 200 ? 'success' : value < 500 ? 'warning' : 'danger';
+  const color = value < 200 ? 'text-success' : value < 500 ? 'text-warning' : 'text-danger';
   return (
-    <div className="text-center py-3">
-      <div className={cn('text-2xl font-mono font-bold', `text-${color}`)}>
+    <div className="text-center py-4">
+      <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-0.5">ms TTFT</div>
+      <div className="text-2xs text-text-3 font-sans mt-1">ms TTFT</div>
     </div>
   );
 }
 
-function Sparkline({ data, width = 120, height = 28, color = HEX.accent }) {
+function Sparkline({ data, width = 140, height = 32, color = HEX.accent }) {
   if (!data || data.length < 2) {
     return <div className="flex-shrink-0" style={{ width, height }} />;
   }
@@ -49,22 +47,22 @@ function Sparkline({ data, width = 120, height = 28, color = HEX.accent }) {
   const fillPoints = `0,${height} ${points} ${width},${height}`;
 
   return (
-    <svg width={width} height={height} className="flex-shrink-0">
-      <polyline points={fillPoints} fill={hexAlpha(color, 0.1)} stroke="none" />
-      <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" strokeOpacity="0.8" />
+    <svg width={width} height={height} className="w-full">
+      <polyline points={fillPoints} fill={hexAlpha(color, 0.08)} stroke="none" />
+      <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" strokeOpacity="0.7" />
     </svg>
   );
 }
 
 function MetricRow({ icon: Icon, label, value, unit, tooltip }) {
   const content = (
-    <div className="flex items-center justify-between py-1.5">
+    <div className="flex items-center justify-between py-2">
       <div className="flex items-center gap-2">
-        <Icon size={12} className="text-text-3 flex-shrink-0" />
-        <span className="text-xs text-text-2 font-sans">{label}</span>
+        <Icon size={11} className="text-text-4 flex-shrink-0" />
+        <span className="text-2xs text-text-3 font-sans">{label}</span>
       </div>
-      <span className="text-xs font-mono font-medium text-text-0">
-        {value != null ? value : '—'}{unit && value != null ? <span className="text-text-3 ml-0.5">{unit}</span> : ''}
+      <span className="text-xs font-mono font-medium text-text-1 tabular-nums">
+        {value != null ? value : '--'}{unit && value != null ? <span className="text-text-4 ml-0.5 text-2xs">{unit}</span> : ''}
       </span>
     </div>
   );
@@ -76,30 +74,30 @@ export function MetricsPanel() {
   const activeRuntime = useGrooveStore((s) => s.labActiveRuntime);
 
   return (
-    <div className="space-y-4">
-      <span className="text-xs font-semibold font-sans text-text-2 uppercase tracking-wider">Metrics</span>
-
+    <div className="space-y-5">
       {/* TTFT Gauge */}
-      <div className="bg-surface-1 rounded-lg border border-border-subtle px-4 py-2">
-        <TtftGauge value={metrics.ttft} />
-      </div>
+      <TtftGauge value={metrics.ttft} />
+
+      <div className="h-px bg-border-subtle" />
 
       {/* Tokens/sec with sparkline */}
-      <div className="bg-surface-1 rounded-lg border border-border-subtle px-4 py-3 space-y-2">
+      <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Zap size={12} className="text-accent" />
-            <span className="text-xs text-text-2 font-sans">Tokens/sec</span>
+          <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">
-            {metrics.tokensPerSec != null ? metrics.tokensPerSec.toFixed(1) : '—'}
+          <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} width={180} height={28} />
+        <Sparkline data={metrics.tokensPerSecHistory} />
       </div>
 
-      {/* Stats grid */}
-      <div className="bg-surface-1 rounded-lg border border-border-subtle px-4 py-2 divide-y divide-border-subtle">
+      <div className="h-px bg-border-subtle" />
+
+      {/* Stats */}
+      <div className="space-y-0">
         <MetricRow
           icon={Cpu}
           label="Memory"
@@ -124,11 +122,14 @@ export function MetricsPanel() {
 
       {/* Attach to agent */}
       {activeRuntime && (
-        <Tooltip content="Use current preset when spawning a new agent">
-          <Button variant="outline" size="sm" className="w-full">
-            <Link size={12} className="mr-1.5" /> Attach to Agent
-          </Button>
-        </Tooltip>
+        <>
+          <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">
+              <Link size={11} /> Attach to Agent
+            </button>
+          </Tooltip>
+        </>
       )}
     </div>
   );