groove-dev 0.27.134 → 0.27.136

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

@@ -1,7 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useGrooveStore } from '../../stores/groove';
 import { TuningSlider } from '../ui/slider';
-import { Button } from '../ui/button';
 import { Tooltip } from '../ui/tooltip';
 import { RotateCcw } from 'lucide-react';
 
@@ -32,14 +31,14 @@ export function ParameterPanel() {
 
   return (
     <div className="space-y-1">
-      <div className="flex items-center justify-between mb-2">
-        <span className="text-xs font-semibold font-sans text-text-2 uppercase tracking-wider">Parameters</span>
+      <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>
         <Tooltip content="Reset to defaults">
           <button
             onClick={handleReset}
-            className="p-1 rounded text-text-3 hover:text-accent hover:bg-accent/10 transition-colors cursor-pointer"
+            className="p-1 text-text-4 hover:text-accent transition-colors cursor-pointer"
           >
-            <RotateCcw size={12} />
+            <RotateCcw size={11} />
           </button>
         </Tooltip>
       </div>

package/packages/gui/src/components/lab/preset-manager.jsx

@@ -7,7 +7,7 @@ import { Dialog, DialogContent } from '../ui/dialog';
 import { Tooltip } from '../ui/tooltip';
 import { ScrollArea } from '../ui/scroll-area';
 import { cn } from '../../lib/cn';
-import { Save, Trash2, Download, BookmarkCheck } from 'lucide-react';
+import { Save, Trash2, BookmarkCheck } from 'lucide-react';
 
 function SavePresetDialog({ open, onOpenChange }) {
   const savePreset = useGrooveStore((s) => s.saveLabPreset);
@@ -56,31 +56,31 @@ export function PresetManager() {
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
-        <span className="text-xs font-semibold font-sans text-text-2 uppercase tracking-wider">Presets</span>
+        <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider">Presets</span>
         <Tooltip content="Save current settings as preset">
           <button
             onClick={() => setSaveOpen(true)}
-            className="p-1 rounded text-text-3 hover:text-accent hover:bg-accent/10 transition-colors cursor-pointer"
+            className="p-1 text-text-4 hover:text-accent transition-colors cursor-pointer"
           >
-            <Save size={14} />
+            <Save size={13} />
           </button>
         </Tooltip>
       </div>
 
       {presets.length === 0 ? (
-        <div className="px-3 py-3 text-center">
-          <BookmarkCheck size={16} className="mx-auto text-text-4 mb-1" />
-          <p className="text-2xs text-text-3 font-sans">No presets saved</p>
+        <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>
       ) : (
         <ScrollArea className="max-h-32">
-          <div className="space-y-0.5">
+          <div className="space-y-px">
             {presets.map((preset) => (
               <div
                 key={preset.id}
                 className={cn(
-                  'flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors',
-                  activePreset === preset.id ? 'bg-accent/10' : 'hover:bg-surface-5/50',
+                  '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',
                 )}
               >
                 <button
@@ -97,7 +97,7 @@ export function PresetManager() {
                 <Tooltip content="Delete preset">
                   <button
                     onClick={() => deletePreset(preset.id)}
-                    className="p-0.5 rounded text-text-4 hover:text-danger hover:bg-danger/10 transition-colors cursor-pointer flex-shrink-0"
+                    className="p-0.5 text-text-4 hover:text-danger transition-colors cursor-pointer flex-shrink-0"
                   >
                     <Trash2 size={10} />
                   </button>

package/packages/gui/src/components/lab/runtime-config.jsx

@@ -8,7 +8,7 @@ import { Dialog, DialogContent } from '../ui/dialog';
 import { Select, SelectTrigger, SelectContent, SelectItem } from '../ui/select';
 import { Tooltip } from '../ui/tooltip';
 import { ScrollArea } from '../ui/scroll-area';
-import { Plus, Trash2, Loader2, WifiOff, RotateCcw, HardDrive, Play, CheckCircle, AlertTriangle, Info, ChevronRight, Wrench } from 'lucide-react';
+import { Plus, Trash2, Loader2, WifiOff, RotateCcw, HardDrive, Play, CheckCircle, AlertTriangle, ChevronRight, Wrench } from 'lucide-react';
 import { cn } from '../../lib/cn';
 
 const RUNTIME_TYPES = [
@@ -85,18 +85,16 @@ function AddRuntimeDialog({ open, onOpenChange }) {
 }
 
 function RuntimeItem({ runtime, active, onSelect, onTest, onRemove, testing }) {
-  const statusColor = runtime.status === 'connected' ? 'success' : runtime.status === 'error' ? 'danger' : 'default';
-
   return (
     <button
       onClick={() => onSelect(runtime.id)}
       className={cn(
-        'w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-left transition-colors cursor-pointer',
-        active ? 'bg-accent/10 text-text-0' : 'text-text-2 hover:bg-surface-5/50 hover:text-text-0',
+        'w-full flex items-center gap-2.5 px-2.5 py-2 text-left transition-colors cursor-pointer rounded-sm',
+        active ? 'bg-accent/8 text-text-0' : 'text-text-2 hover:bg-surface-3 hover:text-text-0',
       )}
     >
       <span className={cn(
-        'w-2 h-2 rounded-full flex-shrink-0',
+        'w-1.5 h-1.5 rounded-full flex-shrink-0',
         runtime.status === 'connected' ? 'bg-success' : runtime.status === 'error' ? 'bg-danger' : 'bg-text-4',
       )} />
       <div className="flex-1 min-w-0">
@@ -107,24 +105,24 @@ function RuntimeItem({ runtime, active, onSelect, onTest, onRemove, testing }) {
           {runtime.status === 'error' && <span className="text-danger">Unreachable</span>}
         </div>
       </div>
-      <div className="flex items-center gap-1 flex-shrink-0">
+      <div className="flex items-center gap-0.5 flex-shrink-0">
         {runtime.latency != null && (
-          <span className="text-2xs font-mono text-text-3">{Math.round(runtime.latency)}ms</span>
+          <span className="text-2xs font-mono text-text-4 mr-1">{Math.round(runtime.latency)}ms</span>
         )}
         <Tooltip content="Test connection">
           <button
             onClick={(e) => { e.stopPropagation(); onTest(runtime.id); }}
-            className="p-1 rounded text-text-4 hover:text-accent hover:bg-accent/10 transition-colors cursor-pointer"
+            className="p-1 text-text-4 hover:text-accent transition-colors cursor-pointer"
           >
-            {testing === runtime.id ? <Loader2 size={12} className="animate-spin" /> : <RotateCcw size={12} />}
+            {testing === runtime.id ? <Loader2 size={11} className="animate-spin" /> : <RotateCcw size={11} />}
           </button>
         </Tooltip>
         <Tooltip content="Remove">
           <button
             onClick={(e) => { e.stopPropagation(); onRemove(runtime.id); }}
-            className="p-1 rounded text-text-4 hover:text-danger hover:bg-danger/10 transition-colors cursor-pointer"
+            className="p-1 text-text-4 hover:text-danger transition-colors cursor-pointer"
           >
-            <Trash2 size={12} />
+            <Trash2 size={11} />
           </button>
         </Tooltip>
       </div>
@@ -149,15 +147,15 @@ function LaunchStatus({ phase, error }) {
   if (!phase) return null;
   return (
     <div className={cn(
-      'flex items-center gap-2 px-3 py-2 rounded-md text-xs font-sans',
-      phase === 'ready' && 'bg-success/10 text-success',
-      phase === 'error' && 'bg-danger/10 text-danger',
-      (phase === 'starting' || phase === 'checking') && 'bg-accent/10 text-accent',
+      'flex items-center gap-2 px-2.5 py-1.5 text-2xs font-sans rounded-sm',
+      phase === 'ready' && 'bg-success/8 text-success',
+      phase === 'error' && 'bg-danger/8 text-danger',
+      (phase === 'starting' || phase === 'checking') && 'bg-accent/8 text-accent',
     )}>
-      {phase === 'starting' && <><Loader2 size={12} className="animate-spin" /> Starting server...</>}
-      {phase === 'checking' && <><Loader2 size={12} className="animate-spin" /> Checking...</>}
-      {phase === 'ready' && <><CheckCircle size={12} /> Server ready</>}
-      {phase === 'error' && <><AlertTriangle size={12} /> {error || 'Launch failed'}</>}
+      {phase === 'starting' && <><Loader2 size={11} className="animate-spin" /> Starting server...</>}
+      {phase === 'checking' && <><Loader2 size={11} className="animate-spin" /> Checking...</>}
+      {phase === 'ready' && <><CheckCircle size={11} /> Server ready</>}
+      {phase === 'error' && <><AlertTriangle size={11} /> {error || 'Launch failed'}</>}
     </div>
   );
 }
@@ -199,29 +197,28 @@ export function LaunchModel() {
 
   return (
     <div className="space-y-3">
-      <span className="text-xs font-semibold font-sans text-text-2 uppercase tracking-wider">Launch Model</span>
+      <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider">Launch Model</span>
 
       {localModels.length === 0 ? (
-        <div className="px-3 py-4 text-center">
-          <HardDrive size={20} className="mx-auto text-text-4 mb-1.5" />
+        <div className="py-5 text-center">
+          <HardDrive size={18} className="mx-auto text-text-4 mb-1.5" />
           <p className="text-xs text-text-3 font-sans">No downloaded models</p>
-          <p className="text-2xs text-text-4 font-sans mt-1">Download GGUFs from the Models tab</p>
+          <p className="text-2xs text-text-4 font-sans mt-0.5">Download GGUFs from the Models tab</p>
         </div>
       ) : (
         <>
-          {/* Model list */}
           <ScrollArea className="max-h-36">
-            <div className="space-y-0.5">
+            <div className="space-y-px">
               {localModels.map((m) => (
                 <button
                   key={m.id}
                   onClick={() => setSelectedModel(m.id)}
                   className={cn(
-                    'w-full flex items-center gap-2 px-3 py-2 rounded-md text-left transition-colors cursor-pointer',
-                    selectedModel === m.id ? 'bg-accent/10 text-text-0' : 'text-text-2 hover:bg-surface-5/50 hover:text-text-0',
+                    'w-full flex items-center gap-2 px-2.5 py-2 text-left transition-colors cursor-pointer rounded-sm',
+                    selectedModel === m.id ? 'bg-accent/8 text-text-0' : 'text-text-2 hover:bg-surface-3 hover:text-text-0',
                   )}
                 >
-                  <HardDrive size={12} className={cn('flex-shrink-0', selectedModel === m.id ? 'text-accent' : 'text-text-4')} />
+                  <HardDrive size={11} className={cn('flex-shrink-0', selectedModel === m.id ? 'text-accent' : 'text-text-4')} />
                   <div className="flex-1 min-w-0">
                     <div className="text-xs font-sans font-medium truncate">
                       {m.filename?.replace(/\.gguf$/i, '') || m.id}
@@ -232,28 +229,27 @@ export function LaunchModel() {
                       {m.sizeBytes && <span>{formatSize(m.sizeBytes)}</span>}
                     </div>
                   </div>
-                  {selectedModel === m.id && <ChevronRight size={12} className="text-accent flex-shrink-0" />}
+                  {selectedModel === m.id && <ChevronRight size={11} className="text-accent flex-shrink-0" />}
                 </button>
               ))}
             </div>
           </ScrollArea>
 
-          {/* Backend picker — show when model selected */}
           {selectedModel && (
             <div className="space-y-2">
-              <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider">Backend</span>
-              <div className="space-y-1">
+              <span className="text-2xs font-semibold font-sans text-text-4 uppercase tracking-wider">Backend</span>
+              <div className="space-y-px">
                 {BACKENDS.map((b) => (
                   <button
                     key={b.id}
                     onClick={() => setSelectedBackend(b.id)}
                     className={cn(
-                      'w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-left transition-colors cursor-pointer',
-                      selectedBackend === b.id ? 'bg-accent/10' : 'hover:bg-surface-5/50',
+                      'w-full flex items-center gap-2.5 px-2.5 py-2 text-left transition-colors cursor-pointer rounded-sm',
+                      selectedBackend === b.id ? 'bg-accent/8' : 'hover:bg-surface-3',
                     )}
                   >
                     <span className={cn(
-                      'w-2 h-2 rounded-full border-2 flex-shrink-0',
+                      'w-2 h-2 rounded-full border-[1.5px] flex-shrink-0',
                       selectedBackend === b.id ? 'border-accent bg-accent' : 'border-text-4',
                     )} />
                     <div className="flex-1 min-w-0">
@@ -269,9 +265,8 @@ export function LaunchModel() {
                 ))}
               </div>
 
-              {/* Binary status for llama.cpp */}
               {selectedBackend === 'llama-cpp' && (
-                <div className="px-3">
+                <div className="px-2.5">
                   {llamaInstalled === null && (
                     <div className="flex items-center gap-2 text-2xs text-text-3 font-sans">
                       <Loader2 size={10} className="animate-spin" /> Checking llama-server...
@@ -287,7 +282,7 @@ export function LaunchModel() {
                       <div className="flex items-center gap-2 text-2xs text-danger font-sans">
                         <AlertTriangle size={10} /> llama-server not found
                       </div>
-                      <code className="block text-2xs font-mono text-text-3 bg-surface-1 px-2 py-1 rounded">brew install llama.cpp</code>
+                      <code className="block text-2xs font-mono text-text-3 bg-surface-2 px-2 py-1 rounded-sm">brew install llama.cpp</code>
                       <button
                         onClick={checkLlama}
                         className="flex items-center gap-1.5 text-2xs font-sans text-accent hover:text-accent/80 transition-colors cursor-pointer"
@@ -299,37 +294,43 @@ export function LaunchModel() {
                 </div>
               )}
 
-              {/* Setup assistant for vLLM/TGI */}
               {!currentBackend?.autoLaunch && (
                 <div className="space-y-2">
-                  <Button variant="primary" size="sm" className="w-full" onClick={handleLaunchAssistant} disabled={assistantLaunching}>
+                  <button
+                    onClick={handleLaunchAssistant}
+                    disabled={assistantLaunching}
+                    className={cn(
+                      'w-full flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-sans font-medium rounded-sm transition-colors cursor-pointer',
+                      assistantLaunching ? 'bg-accent/20 text-accent' : 'bg-accent text-surface-0 hover:bg-accent/90',
+                    )}
+                  >
                     {assistantLaunching
-                      ? <><Loader2 size={12} className="animate-spin mr-1.5" /> Starting Assistant...</>
-                      : <><Wrench size={12} className="mr-1.5" /> Setup {currentBackend?.label} with Assistant</>
+                      ? <><Loader2 size={12} className="animate-spin" /> Starting Assistant...</>
+                      : <><Wrench size={12} /> Setup {currentBackend?.label} with Assistant</>
                     }
-                  </Button>
-                  <p className="text-2xs text-text-4 font-sans px-1">
+                  </button>
+                  <p className="text-2xs text-text-4 font-sans">
                     An AI assistant will check your system and handle the installation, or start your server manually and add it as a Runtime below.
                   </p>
                 </div>
               )}
 
-              {/* Launch button + status */}
               {currentBackend?.autoLaunch && (
                 <div className="space-y-2">
-                  <Button
-                    variant="primary"
-                    size="sm"
-                    className="w-full"
+                  <button
                     disabled={!canLaunch}
                     onClick={handleLaunch}
+                    className={cn(
+                      'w-full flex items-center justify-center gap-1.5 px-3 py-2 text-xs font-sans font-medium rounded-sm transition-colors cursor-pointer',
+                      canLaunch ? 'bg-accent text-surface-0 hover:bg-accent/90' : 'bg-surface-3 text-text-4 cursor-not-allowed',
+                    )}
                   >
                     {launching ? (
-                      <><Loader2 size={12} className="animate-spin mr-1.5" /> Starting...</>
+                      <><Loader2 size={12} className="animate-spin" /> Starting...</>
                     ) : (
-                      <><Play size={12} className="mr-1.5" /> Launch</>
+                      <><Play size={12} /> Launch</>
                     )}
-                  </Button>
+                  </button>
                   <LaunchStatus phase={launchPhase} error={launchError} />
                 </div>
               )}
@@ -360,28 +361,31 @@ export function RuntimeConfig() {
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
-        <span className="text-xs font-semibold font-sans text-text-2 uppercase tracking-wider">Runtimes</span>
+        <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider">Runtimes</span>
         <Tooltip content="Add runtime">
           <button
             onClick={() => setDialogOpen(true)}
-            className="p-1 rounded text-text-3 hover:text-accent hover:bg-accent/10 transition-colors cursor-pointer"
+            className="p-1 text-text-4 hover:text-accent transition-colors cursor-pointer"
           >
-            <Plus size={14} />
+            <Plus size={13} />
           </button>
         </Tooltip>
       </div>
 
       {runtimes.length === 0 ? (
-        <div className="px-3 py-4 text-center">
-          <WifiOff size={20} className="mx-auto text-text-4 mb-1.5" />
+        <div className="py-5 text-center">
+          <WifiOff size={18} className="mx-auto text-text-4 mb-1.5" />
           <p className="text-xs text-text-3 font-sans">No runtimes configured</p>
-          <Button variant="ghost" size="sm" className="mt-2" onClick={() => setDialogOpen(true)}>
-            <Plus size={12} className="mr-1" /> Add Runtime
-          </Button>
+          <button
+            onClick={() => setDialogOpen(true)}
+            className="mt-2 flex items-center gap-1 mx-auto px-3 py-1.5 text-2xs font-sans text-text-3 hover:text-text-1 transition-colors cursor-pointer"
+          >
+            <Plus size={11} /> Add Runtime
+          </button>
         </div>
       ) : (
         <ScrollArea className="max-h-48">
-          <div className="space-y-0.5">
+          <div className="space-y-px">
             {runtimes.map((rt) => (
               <RuntimeItem
                 key={rt.id}

package/packages/gui/src/components/lab/system-prompt-editor.jsx

@@ -11,26 +11,26 @@ import { tags as t } from '@lezer/highlight';
 import { markdown } from '@codemirror/lang-markdown';
 
 const editorTheme = EditorView.theme({
-  '&': { backgroundColor: '#13161b', color: '#d4d8e0', fontFamily: 'var(--font-mono)', fontSize: '12px', height: '100%', lineHeight: '1.6' },
+  '&': { backgroundColor: 'var(--color-surface-1)', color: '#d4d8e0', fontFamily: 'var(--font-mono)', fontSize: '11px', height: '100%', lineHeight: '1.6' },
   '.cm-scroller': { overflow: 'auto', padding: '4px 0' },
   '.cm-content': { caretColor: '#33afbc', padding: '0 8px' },
   '.cm-cursor': { borderLeftColor: '#33afbc', borderLeftWidth: '1.5px' },
-  '.cm-gutters': { backgroundColor: '#13161b', borderRight: '1px solid #1e2229', color: '#404852', minWidth: '32px' },
-  '.cm-activeLine': { backgroundColor: 'rgba(255, 255, 255, 0.03)' },
+  '.cm-gutters': { backgroundColor: 'var(--color-surface-1)', borderRight: 'none', color: '#404852', minWidth: '28px' },
+  '.cm-activeLine': { backgroundColor: 'rgba(255, 255, 255, 0.02)' },
   '&.cm-focused .cm-selectionBackground, .cm-selectionBackground': { backgroundColor: 'rgba(51, 175, 188, 0.15)' },
 });
 
 const promptHighlightStyle = 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.function(t.variableName), t.labelName], color: '#dcc9a0' },
   { tag: [t.meta, t.comment], color: '#6e7681', fontStyle: 'italic' },
   { tag: t.strong, fontWeight: 'bold' },
   { tag: t.emphasis, fontStyle: 'italic' },
   { tag: t.link, color: '#7ab0df', textDecoration: 'underline' },
   { tag: t.heading, fontWeight: '400', color: '#bcc2cd' },
-  { tag: [t.processingInstruction, t.string, t.inserted], color: '#73c991' },
-  { tag: [t.atom, t.bool], color: '#c4956a' },
+  { tag: [t.processingInstruction, t.string, t.inserted], color: '#95b2b8' },
+  { tag: [t.atom, t.bool], color: '#d4a07a' },
   { tag: t.invalid, color: '#d4736e' },
 ]);
 
@@ -90,29 +90,29 @@ export function SystemPromptEditor() {
   }, [systemPrompt]);
 
   return (
-    <div className="space-y-1">
+    <div className="space-y-1.5">
       <button
         onClick={() => setCollapsed(!collapsed)}
         className="flex items-center gap-1.5 w-full cursor-pointer group"
       >
         {collapsed ? (
-          <ChevronRight size={12} className="text-text-3 group-hover:text-text-1 transition-colors" />
+          <ChevronRight size={11} className="text-text-4 group-hover:text-text-2 transition-colors" />
         ) : (
-          <ChevronDown size={12} className="text-text-3 group-hover:text-text-1 transition-colors" />
+          <ChevronDown size={11} className="text-text-4 group-hover:text-text-2 transition-colors" />
         )}
-        <span className="text-xs font-semibold font-sans text-text-2 uppercase tracking-wider group-hover:text-text-1 transition-colors">
+        <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider group-hover:text-text-2 transition-colors">
           System Prompt
         </span>
-        <span className="text-2xs font-mono text-text-4 ml-auto">{charCount > 0 ? `${charCount} chars` : ''}</span>
+        <span className="text-2xs font-mono text-text-4 ml-auto">{charCount > 0 ? `${charCount}` : ''}</span>
       </button>
 
       <div className={cn(
         'overflow-hidden transition-all duration-200',
-        collapsed ? 'h-0' : 'h-40',
+        collapsed ? 'h-0' : 'h-36',
       )}>
         <div
           ref={containerRef}
-          className="h-full rounded-md border border-border-subtle overflow-hidden"
+          className="h-full border border-border-subtle rounded-sm overflow-hidden"
         />
       </div>
     </div>

package/packages/gui/src/components/layout/breadcrumb-bar.jsx

@@ -153,7 +153,7 @@ export function BreadcrumbBar({
   return (
     <header
       className={cn(
-        'h-11 flex-shrink-0 flex items-center gap-3 px-4 pt-0.5 bg-surface-3 border-b border-border relative',
+        'h-12 flex-shrink-0 flex items-center gap-3 px-4 bg-surface-3 border-b border-border relative',
         darwinDrag && 'pl-24 electron-drag electron-no-drag-children',
       )}
     >

package/packages/gui/src/components/preview/preview-workspace.jsx

@@ -6,34 +6,74 @@ import { cn } from '../../lib/cn';
 import { timeAgo } from '../../lib/format';
 import { PreviewToolbar } from './preview-toolbar';
 import { ScreenshotOverlay } from './screenshot-overlay';
+import { TableTree } from '../ui/table-tree';
+
+function parsePreviewSegments(text) {
+  const lines = text.split('\n');
+  const segments = [];
+  let i = 0;
+  let textLines = [];
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line.includes('|') && i + 1 < lines.length && /^\|?\s*[-:]+/.test(lines[i + 1])) {
+      if (textLines.length > 0) {
+        segments.push({ type: 'text', content: textLines.join('\n') });
+        textLines = [];
+      }
+      const headers = line.split('|').map((c) => c.trim()).filter(Boolean);
+      i += 2;
+      const rows = [];
+      while (i < lines.length && lines[i].includes('|')) {
+        rows.push(lines[i].split('|').map((c) => c.trim()).filter(Boolean));
+        i++;
+      }
+      segments.push({ type: 'table', headers, rows });
+    } else {
+      textLines.push(line);
+      i++;
+    }
+  }
+  if (textLines.length > 0) segments.push({ type: 'text', content: textLines.join('\n') });
+  return segments;
+}
 
 function RenderedMarkdown({ text }) {
   if (!text) return null;
-  const parts = text.split(/(```[\s\S]*?```|`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*)/g);
+  const segments = parsePreviewSegments(text);
   return (
     <>
-      {parts.map((part, i) => {
-        if (!part) return null;
-        if (part.startsWith('```') && part.endsWith('```')) {
-          const inner = part.slice(3, -3);
-          const nl = inner.indexOf('\n');
-          const code = nl >= 0 ? inner.slice(nl + 1) : inner;
-          return (
-            <pre key={i} className="my-2 px-3 py-2 rounded-lg bg-surface-0 border border-border-subtle overflow-x-auto">
-              <code className="text-xs font-mono text-text-1 whitespace-pre">{code}</code>
-            </pre>
-          );
-        }
-        if (part.startsWith('`') && part.endsWith('`')) {
-          return <code key={i} className="px-1.5 py-0.5 rounded bg-surface-0 text-xs font-mono text-accent">{part.slice(1, -1)}</code>;
-        }
-        if (part.startsWith('**') && part.endsWith('**')) {
-          return <strong key={i} className="font-semibold text-text-0">{part.slice(2, -2)}</strong>;
-        }
-        if (part.startsWith('*') && part.endsWith('*')) {
-          return <em key={i} className="italic">{part.slice(1, -1)}</em>;
+      {segments.map((seg, idx) => {
+        if (seg.type === 'table') {
+          return <TableTree key={idx} headers={seg.headers} rows={seg.rows} />;
         }
-        return <span key={i}>{part}</span>;
+        const parts = seg.content.split(/(```[\s\S]*?```|`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*)/g);
+        return (
+          <span key={idx}>
+            {parts.map((part, i) => {
+              if (!part) return null;
+              if (part.startsWith('```') && part.endsWith('```')) {
+                const inner = part.slice(3, -3);
+                const nl = inner.indexOf('\n');
+                const code = nl >= 0 ? inner.slice(nl + 1) : inner;
+                return (
+                  <pre key={i} className="my-2 px-3 py-2 rounded-lg bg-surface-0 border border-border-subtle overflow-x-auto">
+                    <code className="text-xs font-mono text-text-1 whitespace-pre">{code}</code>
+                  </pre>
+                );
+              }
+              if (part.startsWith('`') && part.endsWith('`')) {
+                return <code key={i} className="px-1.5 py-0.5 rounded bg-surface-0 text-xs font-mono text-accent">{part.slice(1, -1)}</code>;
+              }
+              if (part.startsWith('**') && part.endsWith('**')) {
+                return <strong key={i} className="font-semibold text-text-0">{part.slice(2, -2)}</strong>;
+              }
+              if (part.startsWith('*') && part.endsWith('*')) {
+                return <em key={i} className="italic">{part.slice(1, -1)}</em>;
+              }
+              return <span key={i}>{part}</span>;
+            })}
+          </span>
+        );
       })}
     </>
   );

package/packages/gui/src/components/ui/slider.jsx

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

package/packages/gui/src/components/ui/table-tree.jsx

@@ -0,0 +1,38 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+export function TableTree({ headers, rows }) {
+  if (!headers?.length || !rows?.length) return null;
+  return (
+    <div className="space-y-3 my-2 font-sans">
+      {rows.map((row, ri) => {
+        const restItems = headers.slice(1).map((h, j) => ({
+          label: h,
+          value: row[j + 1] ?? '',
+        }));
+        return (
+          <div key={ri}>
+            <div className="text-xs font-semibold text-text-0">
+              {headers[0]}: {row[0] ?? ''}
+            </div>
+            <div>
+              {restItems.map(({ label, value }, j) => {
+                const isLast = j === restItems.length - 1;
+                return (
+                  <div key={j} className="flex items-baseline gap-1 text-xs leading-5">
+                    <span className="text-text-3 font-mono w-3 flex-shrink-0">
+                      {isLast ? '└' : '├'}
+                    </span>
+                    <span className="text-text-1">{label}:</span>
+                    <code className="px-1.5 py-0.5 rounded bg-surface-0 text-xs font-mono text-accent">
+                      {value}
+                    </code>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}