groove-dev 0.27.134 → 0.27.136

package/packages/gui/src/stores/groove.js

@@ -220,6 +220,7 @@ export const useGrooveStore = create((set, get) => ({
   }),
   labSystemPrompt: localStorage.getItem('groove:labSystemPrompt') || '',
   labStreaming: false,
+  labAbortController: null,
   labLocalModels: [],
   labLaunching: null,
   labLlamaInstalled: null,
@@ -3501,6 +3502,9 @@ export const useGrooveStore = create((set, get) => ({
       return { labSessions: sessions };
     });
 
+    const abortController = new AbortController();
+    set({ labAbortController: abortController });
+
     const startTime = performance.now();
     let firstTokenTime = null;
     let tokenCount = 0;
@@ -3536,6 +3540,7 @@ export const useGrooveStore = create((set, get) => ({
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(body),
+        signal: abortController.signal,
       });
 
       if (!res.ok) {
@@ -3639,20 +3644,29 @@ export const useGrooveStore = create((set, get) => ({
         });
       }
     } catch (err) {
-      set((s) => {
-        const sessions = s.labSessions.map((sess) => {
-          if (sess.id !== sessionId) return sess;
-          const msgs = [...sess.messages];
-          msgs[msgs.length - 1] = { ...msgs[msgs.length - 1], content: `Error: ${err.message}`, error: true };
-          return { ...sess, messages: msgs };
+      if (err.name === 'AbortError') {
+        // User cancelled — keep whatever content was already streamed
+      } else {
+        set((s) => {
+          const sessions = s.labSessions.map((sess) => {
+            if (sess.id !== sessionId) return sess;
+            const msgs = [...sess.messages];
+            msgs[msgs.length - 1] = { ...msgs[msgs.length - 1], content: `Error: ${err.message}`, error: true };
+            return { ...sess, messages: msgs };
+          });
+          return { labSessions: sessions };
         });
-        return { labSessions: sessions };
-      });
+      }
     } finally {
-      set({ labStreaming: false });
+      set({ labStreaming: false, labAbortController: null });
     }
   },
 
+  stopLabInference() {
+    const ctrl = get().labAbortController;
+    if (ctrl) ctrl.abort();
+  },
+
   saveLabPreset(name) {
     const st = get();
     const preset = {

package/packages/gui/src/views/editor.jsx

@@ -121,7 +121,7 @@ export default function EditorView() {
       {sidebarCollapsed && (
         <button
           onClick={() => setSidebarCollapsed(false)}
-          className="flex-shrink-0 w-6 flex items-center justify-center border-r border-border bg-surface-2 text-text-4 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
+          className="flex-shrink-0 w-6 flex items-start justify-center pt-2 border-r border-border bg-surface-2 text-text-4 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
           title="Show sidebar"
         >
           <PanelLeftOpen size={14} />

package/packages/gui/src/views/model-lab.jsx

@@ -2,7 +2,6 @@
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { useGrooveStore } from '../stores/groove';
 import { ScrollArea } from '../components/ui/scroll-area';
-import { Badge } from '../components/ui/badge';
 import { Tooltip } from '../components/ui/tooltip';
 import { Combobox } from '../components/ui/combobox';
 import { RuntimeConfig, LaunchModel } from '../components/lab/runtime-config';
@@ -13,7 +12,7 @@ import { LabAssistant } from '../components/lab/lab-assistant';
 import { MetricsPanel } from '../components/lab/metrics-panel';
 import { PresetManager } from '../components/lab/preset-manager';
 import { cn } from '../lib/cn';
-import { FlaskConical, PanelLeftOpen, PanelRightOpen, Box } from 'lucide-react';
+import { FlaskConical, PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Box } from 'lucide-react';
 
 const LEFT_DEFAULT = 280;
 const LEFT_MIN = 220;
@@ -32,7 +31,7 @@ function ModelSelector() {
 
   return (
     <div className="space-y-1.5">
-      <span className="text-xs font-semibold font-sans text-text-2 uppercase tracking-wider">Model</span>
+      <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider">Model</span>
       <Combobox
         value={activeModel || ''}
         onChange={setActiveModel}
@@ -53,15 +52,38 @@ function ModelSelector() {
   );
 }
 
-function ResizeHandle({ onMouseDown, direction = 'vertical' }) {
+function ResizeHandle({ onMouseDown }) {
   return (
     <div
       onMouseDown={onMouseDown}
-      className={cn(
-        'flex-shrink-0 bg-border hover:bg-accent/40 transition-colors',
-        direction === 'vertical' ? 'w-px cursor-col-resize hover:w-0.5' : 'h-px cursor-row-resize hover:h-0.5',
-      )}
-    />
+      className="flex-shrink-0 w-[3px] cursor-col-resize group relative"
+    >
+      <div className="absolute inset-y-0 -left-1 -right-1" />
+      <div className="absolute inset-y-0 left-[1px] w-px bg-border group-hover:bg-accent/50 transition-colors" />
+    </div>
+  );
+}
+
+function PanelToggle({ collapsed, onClick, side }) {
+  const Icon = side === 'left'
+    ? (collapsed ? PanelLeftOpen : PanelLeftClose)
+    : (collapsed ? PanelRightOpen : PanelRightClose);
+  const label = side === 'left'
+    ? (collapsed ? 'Show config' : 'Hide config')
+    : (collapsed ? 'Show metrics' : 'Hide metrics');
+
+  return (
+    <Tooltip content={label}>
+      <button
+        onClick={onClick}
+        className={cn(
+          'p-1 transition-colors cursor-pointer',
+          collapsed ? 'text-text-4 hover:text-text-1' : 'text-text-3 hover:text-text-1',
+        )}
+      >
+        <Icon size={14} />
+      </button>
+    </Tooltip>
   );
 }
 
@@ -130,93 +152,79 @@ export default function ModelLabView() {
 
   return (
     <div className="h-full flex flex-col bg-surface-0">
-      {/* Header */}
-      <div className="flex-shrink-0 flex items-center justify-between px-5 py-2.5 border-b border-border">
-        <div className="flex items-center gap-2.5">
-          <FlaskConical size={16} className="text-accent" />
-          <h1 className="text-sm font-bold font-sans text-text-0">Model Lab</h1>
-          <Badge variant="accent">Beta</Badge>
-        </div>
-        <div className="flex items-center gap-1">
-          <Tooltip content={leftCollapsed ? 'Show config panel' : 'Hide config panel'}>
-            <button
-              onClick={() => setLeftCollapsed(!leftCollapsed)}
-              className={cn(
-                'p-1.5 rounded-md transition-colors cursor-pointer',
-                leftCollapsed ? 'text-text-3 hover:text-accent hover:bg-accent/10' : 'text-accent bg-accent/10',
-              )}
-            >
-              <PanelLeftOpen size={14} />
-            </button>
-          </Tooltip>
-          <Tooltip content={rightCollapsed ? 'Show metrics panel' : 'Hide metrics panel'}>
-            <button
-              onClick={() => setRightCollapsed(!rightCollapsed)}
-              className={cn(
-                'p-1.5 rounded-md transition-colors cursor-pointer',
-                rightCollapsed ? 'text-text-3 hover:text-accent hover:bg-accent/10' : 'text-accent bg-accent/10',
-              )}
-            >
-              <PanelRightOpen size={14} />
-            </button>
-          </Tooltip>
-        </div>
-      </div>
-
       {/* 3-panel layout */}
       <div className="flex-1 flex min-h-0">
         {/* Left panel — config */}
         <div
           className={cn(
-            'flex-shrink-0 border-r border-border transition-all duration-200 overflow-hidden',
-            leftCollapsed && 'w-0 border-r-0',
+            'flex-shrink-0 transition-all duration-200 overflow-hidden',
+            leftCollapsed && 'w-0',
           )}
           style={leftCollapsed ? undefined : { width: leftWidth }}
         >
-          <ScrollArea className="h-full">
-            <div className="px-4 py-4 space-y-5">
-              <LaunchModel />
-              <div className="border-t border-border-subtle" />
-              <RuntimeConfig />
-              <div className="border-t border-border-subtle" />
-              <ModelSelector />
-              <div className="border-t border-border-subtle" />
-              <ParameterPanel />
-              <div className="border-t border-border-subtle" />
-              <PresetManager />
-              <div className="border-t border-border-subtle" />
-              <SystemPromptEditor />
+          <div className="h-full flex flex-col">
+            <div className="flex-shrink-0 flex items-center justify-between px-4 h-10">
+              <div className="flex items-center gap-2">
+                <FlaskConical size={13} className="text-accent" />
+                <span className="text-xs font-semibold font-sans text-text-1">Model Lab</span>
+              </div>
+              <PanelToggle collapsed={false} onClick={() => setLeftCollapsed(true)} side="left" />
             </div>
-          </ScrollArea>
+            <ScrollArea className="flex-1 min-h-0">
+              <div className="px-4 pb-4 space-y-5">
+                <LaunchModel />
+                <div className="h-px bg-border-subtle" />
+                <RuntimeConfig />
+                <div className="h-px bg-border-subtle" />
+                <ModelSelector />
+                <div className="h-px bg-border-subtle" />
+                <ParameterPanel />
+                <div className="h-px bg-border-subtle" />
+                <PresetManager />
+                <div className="h-px bg-border-subtle" />
+                <SystemPromptEditor />
+              </div>
+            </ScrollArea>
+          </div>
         </div>
 
         {!leftCollapsed && <ResizeHandle onMouseDown={onLeftMouseDown} />}
 
         {/* Center panel — chat playground / assistant */}
         <div className="flex-1 min-w-0 flex flex-col">
-          {labAssistantAgentId && (
-            <div className="flex-shrink-0 flex items-center gap-1 px-3 pt-2">
-              <button
-                onClick={() => setLabAssistantMode(false)}
-                className={cn(
-                  'px-3 py-1.5 text-xs font-sans font-medium rounded-t-md transition-colors cursor-pointer',
-                  !labAssistantMode ? 'text-accent bg-accent/10' : 'text-text-3 hover:text-text-1',
-                )}
-              >
-                Playground
-              </button>
-              <button
-                onClick={() => setLabAssistantMode(true)}
-                className={cn(
-                  'px-3 py-1.5 text-xs font-sans font-medium rounded-t-md transition-colors cursor-pointer',
-                  labAssistantMode ? 'text-accent bg-accent/10' : 'text-text-3 hover:text-text-1',
-                )}
-              >
-                Assistant
-              </button>
-            </div>
-          )}
-          <div className="flex-1 min-h-0 p-3">
+          {/* Center header bar */}
+          <div className="flex-shrink-0 flex items-center h-10 px-3 gap-2">
+            {leftCollapsed && (
+              <PanelToggle collapsed onClick={() => setLeftCollapsed(false)} side="left" />
+            )}
+            {labAssistantAgentId && (
+              <div className="flex items-center gap-px bg-surface-2 rounded p-px">
+                <button
+                  onClick={() => setLabAssistantMode(false)}
+                  className={cn(
+                    'px-3 py-1 text-2xs font-sans font-medium rounded-sm transition-colors cursor-pointer',
+                    !labAssistantMode ? 'text-text-0 bg-surface-4' : 'text-text-3 hover:text-text-1',
+                  )}
+                >
+                  Playground
+                </button>
+                <button
+                  onClick={() => setLabAssistantMode(true)}
+                  className={cn(
+                    'px-3 py-1 text-2xs font-sans font-medium rounded-sm transition-colors cursor-pointer',
+                    labAssistantMode ? 'text-text-0 bg-surface-4' : 'text-text-3 hover:text-text-1',
+                  )}
+                >
+                  Assistant
+                </button>
+              </div>
+            )}
+            <div className="flex-1" />
+            {rightCollapsed && (
+              <PanelToggle collapsed onClick={() => setRightCollapsed(false)} side="right" />
+            )}
+          </div>
+          <div className="flex-1 min-h-0">
             {labAssistantMode && labAssistantAgentId ? <LabAssistant /> : <ChatPlayground />}
           </div>
         </div>
@@ -226,16 +234,22 @@ export default function ModelLabView() {
         {/* Right panel — metrics */}
         <div
           className={cn(
-            'flex-shrink-0 border-l border-border transition-all duration-200 overflow-hidden',
-            rightCollapsed && 'w-0 border-l-0',
+            'flex-shrink-0 transition-all duration-200 overflow-hidden',
+            rightCollapsed && 'w-0',
           )}
           style={rightCollapsed ? undefined : { width: rightWidth }}
         >
-          <ScrollArea className="h-full">
-            <div className="px-4 py-4">
-              <MetricsPanel />
+          <div className="h-full flex flex-col">
+            <div className="flex-shrink-0 flex items-center justify-between px-4 h-10">
+              <span className="text-2xs font-semibold font-sans text-text-3 uppercase tracking-wider">Metrics</span>
+              <PanelToggle collapsed={false} onClick={() => setRightCollapsed(true)} side="right" />
             </div>
-          </ScrollArea>
+            <ScrollArea className="flex-1 min-h-0">
+              <div className="px-4 pb-4">
+                <MetricsPanel />
+              </div>
+            </ScrollArea>
+          </div>
         </div>
       </div>
     </div>

package/plan_files/DELEGATE_YIELD_TRAINING_TAGS.md

@@ -0,0 +1,135 @@
+# Groove Team: Delegate/Yield Tag Extraction from Planner Telemetry
+
+## Context
+
+The Hummingbird chassis is being trained on Groove planner telemetry data to learn orchestration — decomposing tasks, sequencing work, dispatching to specialists. The chassis already learns this well from the existing ReAct tag format (thought, action, observation, resolution).
+
+We're adding two new coordination tags to the protocol:
+
+| Tag | Purpose | Example |
+|-----|---------|---------|
+| `<delegate>` | "This needs a different specialist — re-route" | `<delegate>Create a PostgreSQL schema for user auth with sessions table</delegate>` |
+| `<yield>` | "My part is done, here's my artifact for the next agent" | `<yield path="phase_01/api.py">Flask REST API with auth endpoints</yield>` |
+
+The delegation behavior already exists in Groove planner sessions — it just isn't captured with these tags. Every time a planner agent reads `recommended-team.json` and dispatches work to a specialist agent, that's a delegation. Every time an agent produces an artifact that the next agent consumes, that's a yield.
+
+## What We Need
+
+### 1. Retroactive Tagging of Existing Planner Telemetry
+
+Go through existing planner session trajectory_logs and identify two patterns:
+
+**Pattern A — Delegation (dispatch to specialist):**
+
+Look for sequences where the planner:
+1. Reads `recommended-team.json` or `AGENTS_REGISTRY.md`
+2. Reasons about which specialist to use (in a thought step)
+3. Dispatches work to a specialist agent
+
+The dispatch moment should become a `<delegate>` step. The content is the rewritten task — what the planner told the specialist to do.
+
+Before (current format):
+```json
+{"step": 4, "type": "thought", "content": "This needs a backend specialist to implement the API endpoints..."}
+{"step": 5, "type": "action", "tool": "Agent", "content": "Dispatch to backend-2: Implement REST endpoints for user authentication with JWT tokens and session management"}
+{"step": 6, "type": "observation", "content": "Agent dispatched to backend-2"}
+```
+
+After (with delegate tag):
+```json
+{"step": 4, "type": "thought", "content": "This needs a backend specialist to implement the API endpoints..."}
+{"step": 5, "type": "delegate", "content": "Implement REST endpoints for user authentication with JWT tokens and session management"}
+```
+
+Key rules:
+- The delegate content is the TASK, not "dispatch to backend-2." The delegating agent doesn't choose the target — the router does.
+- Strip any agent ID references (backend-2, fullstack-7, etc.) from the content — just the task description.
+- The thought step before the delegate should contain the reasoning about WHY this needs a different specialist.
+- A delegate is a terminal step — it replaces resolution. Nothing comes after it in that firing.
+
+**Pattern B — Yield (artifact handoff):**
+
+Look for sequences where an agent:
+1. Produces a file or artifact (Write, Edit)
+2. That artifact is subsequently read by a different agent in the same pipeline
+
+The artifact production should become a `<yield>` step.
+
+Before (current format):
+```json
+{"step": 7, "type": "action", "tool": "Write", "content": "Writing api.py with Flask endpoints..."}
+{"step": 8, "type": "observation", "content": "File written successfully"}
+{"step": 9, "type": "resolution", "content": "API endpoints implemented. The backend agent can now build on this."}
+```
+
+After (with yield tag):
+```json
+{"step": 7, "type": "action", "tool": "Write", "content": "Writing api.py with Flask endpoints..."}
+{"step": 8, "type": "observation", "content": "File written successfully"}
+{"step": 9, "type": "yield", "content": "Flask REST API with auth endpoints", "path": "api.py"}
+```
+
+Key rules:
+- The yield content is a SHORT summary (~10-20 tokens) of what the artifact is — enough for the next agent's prompt.
+- The path field is the file path of the artifact.
+- A yield is a terminal step — it replaces resolution. The agent's work is done; the next agent picks up.
+- Only tag as yield if another agent actually consumed the artifact. If the agent resolved directly to the user, keep it as resolution.
+
+### 2. Step Format
+
+Both new step types follow the same shape as existing steps:
+
+```json
+{
+  "step": 5,
+  "type": "delegate",
+  "content": "The rewritten task for the next specialist",
+  "timestamp": 1777412000.5,
+  "token_count": 15
+}
+```
+
+```json
+{
+  "step": 9,
+  "type": "yield",
+  "content": "Short artifact summary",
+  "path": "phase_01/output_file.py",
+  "timestamp": 1777412001.2,
+  "token_count": 8
+}
+```
+
+They flow through the same `_processStep -> EnvelopeBuilder.addStep -> envelope -> Central Command` path as all other steps.
+
+### 3. Future Telemetry Capture
+
+Once nano agents are running and producing `<delegate>` and `<yield>` tags in their output, the chassis parser should emit these as step objects into the trajectory capture:
+
+- When parser sees `<delegate>task</delegate>` → emit `{"type": "delegate", "content": "task"}`
+- When parser sees `<yield path="...">summary</yield>` → emit `{"type": "yield", "content": "summary", "path": "..."}`
+
+Same as how the current parser emits thought/action/observation/resolution steps.
+
+### 4. What NOT to Do
+
+- Do NOT add empty delegate/yield steps to sessions where they don't occur. If a session resolves normally, it ends with resolution. The absence of delegate/yield is correct.
+- Do NOT change the thought or resolution content. Only add/modify the terminal step (replacing resolution with delegate or yield where the pattern matches).
+- Do NOT invent delegation where it didn't happen. Only tag real dispatch-to-specialist moments.
+
+### 5. Output
+
+Deliver the retroactively tagged sessions as:
+- Same JSONL format as current planner telemetry
+- Same file location (ingestion/ directory)
+- Filename convention: `2026-05-09-planner-delegated-{hash}.jsonl` or similar
+
+We'll run these through the standard `build_production_data.py` pipeline.
+
+### 6. Estimated Yield
+
+From the 139 organic planner sessions currently in the training set:
+- Most sessions involve at least one specialist dispatch → expect 80-120 delegate examples
+- Many multi-agent sessions involve artifact handoffs → expect 40-80 yield examples
+
+This organic data is highest quality — real frontier model orchestration decisions. It sets the standard that our synthetic generation will match.