groove-dev 0.27.136 → 0.27.138

package/packages/gui/src/components/editor/editor-status-bar.jsx

@@ -1,4 +1,9 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useRef, useEffect } from 'react';
+import { Palette } from 'lucide-react';
+import { useGrooveStore } from '../../stores/groove';
+import { EDITOR_THEMES } from './code-editor';
+import { cn } from '../../lib/cn';
 
 const LANG_LABELS = {
   javascript: 'JavaScript',
@@ -10,13 +15,74 @@ const LANG_LABELS = {
   python: 'Python',
 };
 
+const themeKeys = Object.keys(EDITOR_THEMES);
+const darkThemes = themeKeys.filter((k) => !['githubLight', 'vscodeLight', 'eclipse', 'xcodeLight', 'solarizedLight', 'gruvboxLight', 'materialLight', 'duotoneLight', 'quietlight', 'bbedit', 'tokyoNightDay', 'basicLight'].includes(k));
+const lightThemes = themeKeys.filter((k) => !darkThemes.includes(k));
+
 export function EditorStatusBar({ cursorPos, language }) {
+  const editorTheme = useGrooveStore((s) => s.editorTheme);
+  const setEditorTheme = useGrooveStore((s) => s.setEditorTheme);
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (menuRef.current && !menuRef.current.contains(e.target)) setOpen(false);
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
   return (
     <div className="flex items-center justify-between h-6 px-3 bg-surface-1 border-t border-border-subtle text-2xs font-sans text-text-3 flex-shrink-0 select-none">
       <div className="flex items-center gap-3">
         <span>Ln {cursorPos.line}, Col {cursorPos.col}</span>
       </div>
       <div className="flex items-center gap-3">
+        <div className="relative" ref={menuRef}>
+          <button
+            onClick={() => setOpen(!open)}
+            className="flex items-center gap-1.5 hover:text-text-0 transition-colors cursor-pointer"
+          >
+            <Palette size={10} />
+            <span>{EDITOR_THEMES[editorTheme]?.label || editorTheme}</span>
+          </button>
+          {open && (
+            <div className="absolute bottom-6 right-0 w-48 max-h-72 overflow-y-auto rounded-md border border-border bg-surface-2 shadow-xl z-50 py-1 scrollbar-thin">
+              <div className="px-2 py-1 text-2xs text-text-4 font-semibold uppercase tracking-wider">Dark</div>
+              {darkThemes.map((key) => (
+                <button
+                  key={key}
+                  onClick={() => { setEditorTheme(key); setOpen(false); }}
+                  className={cn(
+                    'w-full text-left px-3 py-1 text-2xs font-sans cursor-pointer transition-colors',
+                    key === editorTheme
+                      ? 'text-accent bg-accent/10'
+                      : 'text-text-1 hover:bg-surface-4',
+                  )}
+                >
+                  {EDITOR_THEMES[key].label}
+                </button>
+              ))}
+              <div className="px-2 py-1 mt-1 text-2xs text-text-4 font-semibold uppercase tracking-wider border-t border-border-subtle">Light</div>
+              {lightThemes.map((key) => (
+                <button
+                  key={key}
+                  onClick={() => { setEditorTheme(key); setOpen(false); }}
+                  className={cn(
+                    'w-full text-left px-3 py-1 text-2xs font-sans cursor-pointer transition-colors',
+                    key === editorTheme
+                      ? 'text-accent bg-accent/10'
+                      : 'text-text-1 hover:bg-surface-4',
+                  )}
+                >
+                  {EDITOR_THEMES[key].label}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
         <span className="cursor-default">{LANG_LABELS[language] || language || 'Plain Text'}</span>
         <span>Spaces: 2</span>
         <span>UTF-8</span>

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

@@ -4,42 +4,31 @@ import { useGrooveStore } from '../../stores/groove';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { EditorView, keymap, lineNumbers } from '@codemirror/view';
-import { EditorState } from '@codemirror/state';
+import { EditorState, Compartment } from '@codemirror/state';
 import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
-import { syntaxHighlighting, HighlightStyle } from '@codemirror/language';
-import { tags as t } from '@lezer/highlight';
 import { markdown } from '@codemirror/lang-markdown';
+import { EDITOR_THEMES } from '../editor/code-editor';
 
-const editorTheme = EditorView.theme({
-  '&': { backgroundColor: 'var(--color-surface-1)', color: '#d4d8e0', fontFamily: 'var(--font-mono)', fontSize: '11px', height: '100%', lineHeight: '1.6' },
+const promptChrome = EditorView.theme({
+  '&': { 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: 'var(--color-surface-1)', borderRight: 'none', color: '#404852', minWidth: '28px' },
+  '.cm-content': { padding: '0 8px' },
+  '.cm-gutters': { borderRight: 'none', 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: '#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: '#95b2b8' },
-  { tag: [t.atom, t.bool], color: '#d4a07a' },
-  { tag: t.invalid, color: '#d4736e' },
-]);
+function getThemeExt(key) {
+  return EDITOR_THEMES[key]?.ext || EDITOR_THEMES.vscodeDark.ext;
+}
 
 export function SystemPromptEditor() {
   const systemPrompt = useGrooveStore((s) => s.labSystemPrompt);
   const setSystemPrompt = useGrooveStore((s) => s.setLabSystemPrompt);
+  const themeKey = useGrooveStore((s) => s.editorTheme);
   const [collapsed, setCollapsed] = useState(false);
   const containerRef = useRef(null);
   const viewRef = useRef(null);
+  const themeCompartment = useRef(new Compartment());
   const externalUpdate = useRef(false);
 
   const charCount = systemPrompt.length;
@@ -51,6 +40,8 @@ export function SystemPromptEditor() {
   useEffect(() => {
     if (!containerRef.current) return;
 
+    const initialTheme = getThemeExt(useGrooveStore.getState().editorTheme);
+
     const updateListener = EditorView.updateListener.of((update) => {
       if (update.docChanged) {
         handleChange(update.state.doc.toString());
@@ -62,10 +53,10 @@ export function SystemPromptEditor() {
       extensions: [
         lineNumbers(),
         history(),
-        syntaxHighlighting(promptHighlightStyle),
+        themeCompartment.current.of(initialTheme),
+        promptChrome,
         markdown(),
         keymap.of([...defaultKeymap, ...historyKeymap]),
-        editorTheme,
         updateListener,
         EditorView.lineWrapping,
       ],
@@ -76,6 +67,12 @@ export function SystemPromptEditor() {
     return () => view.destroy();
   }, []);
 
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    view.dispatch({ effects: themeCompartment.current.reconfigure(getThemeExt(themeKey)) });
+  }, [themeKey]);
+
   useEffect(() => {
     const view = viewRef.current;
     if (!view) return;

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

@@ -196,6 +196,7 @@ export const useGrooveStore = create((set, get) => ({
   editorChangedFiles: {},
   editorRecentSaves: {},
   editorSidebarWidth: Number(localStorage.getItem('groove:editorSidebarWidth')) || 240,
+  editorTheme: localStorage.getItem('groove:editorTheme') || 'vscodeDark',
 
   // ── Workspace Mode ────────────────────────────────────────
   workspaceMode: localStorage.getItem('groove:workspaceMode') === 'true',
@@ -2810,6 +2811,10 @@ export const useGrooveStore = create((set, get) => ({
     set({ editorSidebarWidth: width });
     localStorage.setItem('groove:editorSidebarWidth', String(width));
   },
+  setEditorTheme(theme) {
+    set({ editorTheme: theme });
+    localStorage.setItem('groove:editorTheme', theme);
+  },
 
   updateFileContent(path, content) {
     set((s) => ({ editorFiles: { ...s.editorFiles, [path]: { ...s.editorFiles[path], content } } }));

package/model-workspace/LAB-ASSISTANT-BUILD-PLAN.md

@@ -1,341 +0,0 @@
-# Lab Assistant — Build Plan
-
-## Overview
-
-Add an embedded AI assistant to the Model Lab that helps users set up inference runtimes (vLLM, TGI) without leaving the Lab. One agent, one chat, inline in the center panel. The agent handles system recon, installation, configuration, server startup, and auto-creates the Lab runtime when done.
-
-## User Flow
-
-1. User selects a model + picks vLLM or TGI backend in the Launch Model section
-2. Clicks **"Setup vLLM with Assistant"** button
-3. Center panel switches from Playground to Assistant tab — agent chat appears
-4. Agent: "Let me check your system..." → runs nvidia-smi, checks CUDA, Python, Docker, VRAM
-5. Agent: "You have an RTX 4090 with 24GB VRAM. I'll set up vLLM via Docker with Qwen3-8B."
-6. Agent installs, configures, starts the server, validates with a health check
-7. Agent calls `POST http://localhost:31415/api/lab/runtimes` to register the runtime
-8. Runtime appears in the Lab's left panel automatically (via WebSocket event)
-9. Agent: "Done! Switch to the Playground tab to start chatting."
-10. User clicks "Switch to Playground" — model is ready to use
-
-## Architecture
-
-```
-User clicks "Setup vLLM"
-  → store.launchLabAssistant('vllm')
-    → POST /api/lab/assistant { backend: 'vllm' }
-      → daemon reads templates/vllm-setup.json
-      → daemon.processes.spawn({ role: 'lab-assistant', prompt: ... })
-      → returns { agentId }
-    → store sets labAssistantAgentId, switches to Assistant tab
-    → agent output streams via WebSocket → chatHistory[agentId]
-
-Agent runs system commands, installs vLLM, starts server
-  → agent calls: curl POST /api/lab/runtimes (on localhost)
-    → daemon creates runtime, broadcasts lab:runtime:added
-    → store.fetchLabRuntimes() fires → left panel updates
-```
-
-## Implementation
-
-### 1. Team Templates (new files)
-
-**`packages/daemon/templates/vllm-setup.json`**
-
-Single-agent template. Role is `lab-assistant` (avoids the `planner` role which is restricted to planning-only in `ROLE_PROMPTS`).
-
-```json
-{
-  "name": "vllm-setup",
-  "description": "Lab Assistant for vLLM installation and configuration",
-  "agents": [
-    {
-      "role": "lab-assistant",
-      "scope": [],
-      "provider": "claude-code",
-      "prompt": "SEE PROMPT SPEC BELOW"
-    }
-  ]
-}
-```
-
-**`packages/daemon/templates/tgi-setup.json`** — same structure, TGI-specific prompt.
-
-#### Planner Prompt Spec (vLLM)
-
-The prompt is the hardest part. It must cover:
-
-**Identity**: "You are a GROOVE Lab Assistant. You help the user set up a vLLM inference server. Be conversational, report progress clearly."
-
-**System Recon** (run these commands, report findings):
-- `nvidia-smi` — GPU model, VRAM, driver version
-- `nvcc --version` — CUDA toolkit version
-- `python3 --version` and `pip3 --version`
-- `docker --version`
-- `free -h` — available RAM
-- `df -h /` — disk space
-
-**Decision Matrix**:
-- Docker available + NVIDIA GPU → Docker path (simplest)
-- No Docker, Python 3.8+ and CUDA → pip path
-- No GPU → warn user, suggest llama.cpp/Ollama instead
-- VRAM sizing: <8GB → 1-3B models, 8-16GB → 7B, 16-24GB → 13B, 24-48GB → 30-70B quantized, 48GB+ → 70B+
-
-**Installation**:
-- Docker: `docker run --runtime nvidia --gpus all -v ~/.cache/huggingface:/root/.cache/huggingface -p 8000:8000 --ipc=host vllm/vllm-openai:latest --model <model>`
-- Pip: `pip install vllm && vllm serve <model> --host 0.0.0.0 --port 8000`
-- Must use `nohup` or `docker run -d` so server persists after agent exits
-
-**Validation**: `curl http://localhost:8000/v1/models` — confirm JSON response
-
-**Runtime Registration**:
-```bash
-PORT=$(cat ~/.groove/daemon.port 2>/dev/null || echo 31415)
-curl -s -X POST http://localhost:$PORT/api/lab/runtimes \
-  -H 'Content-Type: application/json' \
-  -d '{"name":"vLLM - <model>","type":"vllm","endpoint":"http://localhost:8000"}'
-```
-
-**Completion**: Tell user to switch to Playground tab.
-
-**Error Handling**: Explain errors clearly, suggest fixes, offer retry. Common issues: CUDA mismatch, insufficient VRAM, Docker not running, missing nvidia-container-toolkit.
-
-#### TGI Prompt Spec
-
-Same structure, but:
-- Docker: `ghcr.io/huggingface/text-generation-inference`
-- Default port: 8080
-- Model loading with `--model-id`
-- Runtime type: `"tgi"`
-
----
-
-### 2. Daemon Endpoint
-
-**File**: `packages/daemon/src/api.js`
-**Location**: After the existing lab endpoints (after `GET /api/lab/sessions/:id`, around line 6760)
-
-**`POST /api/lab/assistant`**
-
-```
-Request:  { "backend": "vllm" | "tgi" }
-Response: { "agentId": "abc123", "backend": "vllm" }
-```
-
-Implementation:
-1. Validate `backend` is "vllm" or "tgi"
-2. Read template: `readFileSync(resolve(__dirname, '../templates/${backend}-setup.json'), 'utf8')`
-3. Parse JSON, extract the agent config (first entry in `agents` array)
-4. Spawn agent via `daemon.processes.spawn()` with:
-   - `role`: "lab-assistant"
-   - `provider`: agent config provider or daemon default
-   - `prompt`: agent config prompt
-   - `teamId`: default team ID
-   - `metadata`: `{ labAssistant: true, backend }`
-5. Return `201` with `{ agentId: agent.id, backend }`
-
-**Import needed**: `readFileSync` from `fs`, `resolve` from `path` (likely already imported in api.js)
-
----
-
-### 3. Store State & Actions
-
-**File**: `packages/gui/src/stores/groove.js`
-
-**New state** (add after `labLaunchError`):
-```js
-labAssistantAgentId: null,
-labAssistantMode: false,
-labAssistantBackend: null,
-```
-
-**New actions** (add after the existing lab actions block):
-
-```js
-async launchLabAssistant(backend) {
-  const existing = get().labAssistantAgentId;
-  if (existing) {
-    // If assistant already running, just switch to its tab
-    const agent = get().agents.find((a) => a.id === existing);
-    if (agent && agent.status === 'running') {
-      set({ labAssistantMode: true });
-      return;
-    }
-  }
-  try {
-    const data = await api.post('/lab/assistant', { backend });
-    set({ labAssistantAgentId: data.agentId, labAssistantMode: true, labAssistantBackend: backend });
-    get().addToast('info', `Lab Assistant started for ${backend}`);
-  } catch (err) {
-    get().addToast('error', 'Failed to start assistant', err.message);
-  }
-},
-
-dismissLabAssistant() {
-  set({ labAssistantMode: false });
-},
-
-clearLabAssistant() {
-  const id = get().labAssistantAgentId;
-  if (id) api.delete(`/agents/${id}`).catch(() => {});
-  set({ labAssistantAgentId: null, labAssistantMode: false, labAssistantBackend: null });
-},
-```
-
-**No WebSocket changes needed** — `agent:output` already populates `chatHistory[agentId]`, and `lab:runtime:added` already triggers `fetchLabRuntimes()`.
-
----
-
-### 4. Lab Assistant Component (new file)
-
-**File**: `packages/gui/src/components/lab/lab-assistant.jsx`
-
-A focused chat component for the lab assistant agent. Reads from `chatHistory[labAssistantAgentId]`, sends via the existing agent instruction mechanism.
-
-**Structure**:
-```
-LabAssistant
-├── Header: backend badge, agent status, dismiss "X" button
-├── ScrollArea: message list
-│   ├── Agent messages (left-aligned, border-l accent)
-│   └── User messages (right-aligned, accent/10 bg)
-├── Thinking indicator (when agent is processing)
-├── Completion banner: "Setup complete — Switch to Playground" button
-└── Input: textarea + send button (Enter to send, Shift+Enter newline)
-```
-
-**Key store selectors**:
-- `labAssistantAgentId` — which agent to display
-- `chatHistory[agentId]` — message history
-- `agents.find(a => a.id === agentId)` — agent status (running/completed/error)
-- `dismissLabAssistant` — switch back to playground
-
-**Sending messages**: Use the existing `instructAgent(agentId, message)` store action (check if this exists — it should be the mechanism used by AgentChat). If not, use `api.post('/agents/${id}/instruct', { message })`.
-
-**Styling**: Match `chat-playground.jsx` patterns exactly — same message bubble styles, same input area, same auto-scroll logic. License header on line 1.
-
-**Completion detection**: When `agent.status !== 'running'` and the last message exists, show the "Switch to Playground" button.
-
----
-
-### 5. Center Panel Mode Switch
-
-**File**: `packages/gui/src/views/model-lab.jsx`
-
-**New import**: `import { LabAssistant } from '../components/lab/lab-assistant';`
-
-**New store selectors** in `ModelLabView`:
-```js
-const labAssistantAgentId = useGrooveStore((s) => s.labAssistantAgentId);
-const labAssistantMode = useGrooveStore((s) => s.labAssistantMode);
-```
-
-**Replace the center panel** (currently `<div className="flex-1 min-w-0 p-3"><ChatPlayground /></div>`) with:
-
-```jsx
-<div className="flex-1 min-w-0 flex flex-col">
-  {/* Tab bar — only visible when assistant exists */}
-  {labAssistantAgentId && (
-    <div className="flex-shrink-0 flex items-center gap-1 px-3 pt-2">
-      <button
-        onClick={() => set({ labAssistantMode: 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={() => set({ labAssistantMode: 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">
-    {labAssistantMode && labAssistantAgentId ? <LabAssistant /> : <ChatPlayground />}
-  </div>
-</div>
-```
-
-Note: The tab buttons need to call store's `set` function — either expose `setLabAssistantMode(bool)` as a store action, or use `dismissLabAssistant()` and `set({ labAssistantMode: true })`. Cleanest approach: add a `setLabAssistantMode(mode)` action to the store.
-
----
-
-### 6. LaunchModel Button
-
-**File**: `packages/gui/src/components/lab/runtime-config.jsx`
-
-**In the `LaunchModel` component**, replace the static guidance box for vLLM/TGI:
-
-Change from:
-```jsx
-{!currentBackend?.autoLaunch && (
-  <div>...manual setup guidance...</div>
-)}
-```
-
-To:
-```jsx
-{!currentBackend?.autoLaunch && (
-  <div className="space-y-2">
-    <Button variant="primary" size="sm" className="w-full" onClick={handleLaunchAssistant} disabled={assistantLaunching}>
-      {assistantLaunching
-        ? <><Loader2 size={12} className="animate-spin mr-1.5" /> Starting Assistant...</>
-        : <><Wrench size={12} className="mr-1.5" /> Setup {currentBackend?.label} with Assistant</>
-      }
-    </Button>
-    <p className="text-2xs text-text-4 font-sans px-1">
-      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>
-)}
-```
-
-**New imports**: `Wrench` from lucide-react, `launchLabAssistant` from store.
-
-**Update BACKENDS array** subtitle for vLLM/TGI:
-```js
-{ id: 'vllm', label: 'vLLM', subtitle: 'GPU-optimized, guided setup', autoLaunch: false },
-{ id: 'tgi', label: 'TGI', subtitle: 'HuggingFace, guided setup', autoLaunch: false },
-```
-
----
-
-## File Summary
-
-| File | Action | Description |
-|------|--------|-------------|
-| `packages/daemon/templates/vllm-setup.json` | CREATE | vLLM setup agent template + prompt |
-| `packages/daemon/templates/tgi-setup.json` | CREATE | TGI setup agent template + prompt |
-| `packages/daemon/src/api.js` | MODIFY | Add `POST /api/lab/assistant` endpoint |
-| `packages/gui/src/stores/groove.js` | MODIFY | Add labAssistant state + actions |
-| `packages/gui/src/components/lab/lab-assistant.jsx` | CREATE | Assistant chat component |
-| `packages/gui/src/views/model-lab.jsx` | MODIFY | Center panel tab switch |
-| `packages/gui/src/components/lab/runtime-config.jsx` | MODIFY | "Setup with Assistant" button |
-
-## Build Order
-
-1. Team templates (`vllm-setup.json`, `tgi-setup.json`)
-2. Daemon endpoint (`POST /api/lab/assistant` in `api.js`)
-3. Store state and actions (`groove.js`)
-4. Lab Assistant component (`lab-assistant.jsx`)
-5. Center panel mode switch (`model-lab.jsx`)
-6. LaunchModel button (`runtime-config.jsx`)
-7. `npm run build` from `packages/gui/`
-8. End-to-end test
-
-## Key Constraints
-
-- **Role must be `lab-assistant`** — not `planner` (which is restricted to planning-only in `ROLE_PROMPTS`)
-- **Agent sends messages via WebSocket** — the `chatHistory[agentId]` pattern already handles this
-- **Runtime creation via curl** — the agent calls the daemon REST API directly. The daemon is on localhost:31415 (or read from `~/.groove/daemon.port`)
-- **Server must persist** — use `nohup`, `docker run -d`, or background processes so the inference server outlives the agent
-- **No inline styles** — Tailwind CSS only
-- **License header** — `// FSL-1.1-Apache-2.0 — see LICENSE` on every new source file
-- **ESM imports** — all files use `import`/`export`
-- **Do NOT restart the daemon** — verify with `npm run build` only