@polderlabs/bizar 5.4.0 → 5.5.0

package/bizar-dash/src/web/views/SpawnAgentModal.tsx

@@ -0,0 +1,221 @@
+// src/web/views/SpawnAgentModal.tsx — modal form to spawn a background
+// agent directly from the dashboard. Calls POST /api/background,
+// tracks the resulting instanceId, and on success closes the modal
+// while the parent navigates to the new instance's detail view.
+//
+// Fields mirror the API body shape:
+//   agent       (string, required) — agent name
+//   prompt      (string, required) — initial prompt
+//   model       (string, optional) — "providerID/modelID"
+//   timeoutMs   (number, slider)   — 1min..4h, default 5min
+//   persistent  (boolean, toggle)  — auto-restart on failure
+//   tags        (string[], optional)
+import { useState, type FormEvent } from 'react';
+import { Plus, X } from 'lucide-react';
+import { Button } from '../components/Button';
+import { useToast } from '../components/Toast';
+import { api } from '../lib/api';
+
+type AgentOption = { name: string; description?: string };
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onCreated?: (instanceId: string) => void;
+  /** Available agents for the dropdown. Defaults to a small static set. */
+  agents?: AgentOption[];
+};
+
+const DEFAULT_AGENTS: AgentOption[] = [
+  { name: 'mimir', description: 'Deep research & codebase exploration' },
+  { name: 'frigg', description: 'Read-only codebase Q&A' },
+  { name: 'thor', description: 'Moderate-complexity implementation' },
+  { name: 'tyr', description: 'Complex feature implementation' },
+  { name: 'heimdall', description: 'Quick edits & simple tasks' },
+  { name: 'odin', description: 'Primary router agent' },
+];
+
+const TIMEOUT_PRESETS = [
+  { label: '1 min', value: 60_000 },
+  { label: '5 min', value: 300_000 },
+  { label: '15 min', value: 900_000 },
+  { label: '30 min', value: 1_800_000 },
+  { label: '1 hr', value: 3_600_000 },
+  { label: '4 hr', value: 14_400_000 },
+];
+
+export function SpawnAgentModal({ open, onClose, onCreated, agents = DEFAULT_AGENTS }: Props) {
+  const toast = useToast();
+  const [agent, setAgent] = useState<string>(agents[0]?.name || 'mimir');
+  const [prompt, setPrompt] = useState<string>('');
+  const [model, setModel] = useState<string>('');
+  const [timeoutMs, setTimeoutMs] = useState<number>(300_000);
+  const [persistent, setPersistent] = useState<boolean>(false);
+  const [tagsRaw, setTagsRaw] = useState<string>('');
+  const [submitting, setSubmitting] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+
+  if (!open) return null;
+
+  const onSubmit = async (ev: FormEvent<HTMLFormElement>) => {
+    ev.preventDefault();
+    setError(null);
+    if (!prompt.trim()) {
+      setError('Prompt is required.');
+      return;
+    }
+    setSubmitting(true);
+    try {
+      const tags = tagsRaw
+        .split(',')
+        .map((t) => t.trim())
+        .filter((t) => t.length > 0);
+      const body = {
+        agent,
+        prompt,
+        ...(model.trim() ? { model: model.trim() } : {}),
+        timeoutMs,
+        persistent,
+        maxRestarts: 3,
+        ...(tags.length > 0 ? { tags } : {}),
+      };
+      const res = await api.post<{
+        instanceId: string;
+        status: string;
+        sessionId?: string;
+        error?: string;
+        message?: string;
+      }>('/background', body);
+      if (res?.error) {
+        throw new Error(res.message || res.error);
+      }
+      toast.success(`Spawned ${agent} (${res.instanceId.slice(0, 14)}…)`);
+      onCreated?.(res.instanceId);
+      // Reset the form for next time.
+      setPrompt('');
+      setModel('');
+      setPersistent(false);
+      setTagsRaw('');
+      onClose();
+    } catch (err) {
+      setError((err as Error)?.message || 'Failed to spawn.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="modal-backdrop" role="dialog" aria-modal="true">
+      <div className="modal-card spawn-modal">
+        <div className="spawn-modal-header">
+          <h3>
+            <Plus size={18} /> Spawn background agent
+          </h3>
+          <Button variant="ghost" size="sm" onClick={onClose} title="Close">
+            <X size={14} />
+          </Button>
+        </div>
+        <form onSubmit={onSubmit} className="spawn-modal-body">
+          <label className="field">
+            <span className="field-label">Agent</span>
+            <select
+              className="field-input"
+              value={agent}
+              onChange={(e) => setAgent(e.target.value)}
+              required
+            >
+              {agents.map((a) => (
+                <option key={a.name} value={a.name}>
+                  {a.name}{a.description ? ` — ${a.description}` : ''}
+                </option>
+              ))}
+            </select>
+          </label>
+
+          <label className="field">
+            <span className="field-label">Initial prompt</span>
+            <textarea
+              className="field-input spawn-modal-textarea"
+              rows={5}
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              placeholder="What do you want this agent to do?"
+              required
+            />
+          </label>
+
+          <label className="field">
+            <span className="field-label">Model (optional)</span>
+            <input
+              type="text"
+              className="field-input"
+              value={model}
+              onChange={(e) => setModel(e.target.value)}
+              placeholder="providerID/modelID (leave blank for agent default)"
+            />
+          </label>
+
+          <div className="field">
+            <span className="field-label">Timeout</span>
+            <div className="spawn-modal-timeouts">
+              {TIMEOUT_PRESETS.map((p) => (
+                <button
+                  key={p.value}
+                  type="button"
+                  className={
+                    'spawn-modal-timeout-pill' +
+                    (p.value === timeoutMs ? ' spawn-modal-timeout-pill-active' : '')
+                  }
+                  onClick={() => setTimeoutMs(p.value)}
+                >
+                  {p.label}
+                </button>
+              ))}
+            </div>
+            <input
+              type="range"
+              min={60_000}
+              max={14_400_000}
+              step={60_000}
+              value={timeoutMs}
+              onChange={(e) => setTimeoutMs(Number(e.target.value))}
+              className="spawn-modal-slider"
+            />
+            <span className="muted">{(timeoutMs / 60_000).toFixed(0)} min</span>
+          </div>
+
+          <label className="field-checkbox">
+            <input
+              type="checkbox"
+              checked={persistent}
+              onChange={(e) => setPersistent(e.target.checked)}
+            />
+            <span>Persistent — auto-restart on terminal failure (max 3 attempts)</span>
+          </label>
+
+          <label className="field">
+            <span className="field-label">Tags (optional, comma-separated)</span>
+            <input
+              type="text"
+              className="field-input"
+              value={tagsRaw}
+              onChange={(e) => setTagsRaw(e.target.value)}
+              placeholder="e.g. refactor, urgent"
+            />
+          </label>
+
+          {error && <div className="spawn-modal-error">{error}</div>}
+
+          <div className="spawn-modal-actions">
+            <Button variant="ghost" size="sm" type="button" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="sm" type="submit" disabled={submitting}>
+              {submitting ? 'Spawning…' : 'Spawn agent'}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/bizar-dash/tests/BackgroundAgents.test.tsx

@@ -0,0 +1,160 @@
+// tests/BackgroundAgents.test.tsx — v5.x component tests for the
+// rewired BackgroundAgents view and SpawnAgentModal. Uses
+// @testing-library/react and the dashboard's vitest setup.
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { BackgroundAgents } from '../src/web/views/BackgroundAgents';
+import { ToastProvider } from '../src/web/components/Toast';
+
+// --- API mock ------------------------------------------------------------
+
+const mockApiGet = vi.fn();
+const mockApiPost = vi.fn();
+
+vi.mock('../src/web/lib/api', () => ({
+  api: {
+    get: (...args: unknown[]) => mockApiGet(...args),
+    post: (...args: unknown[]) => mockApiPost(...args),
+  },
+}));
+
+vi.mock('../src/web/lib/ws', () => ({
+  Ws: class {
+    constructor() {}
+    on() { return () => {}; }
+    onStatus() { return () => {}; }
+    close() {}
+  },
+}));
+
+// --- Helpers -------------------------------------------------------------
+
+const dummySnapshot = {} as any;
+const dummySettings = {} as any;
+
+function wrap(node: React.ReactNode) {
+  return <ToastProvider>{node}</ToastProvider>;
+}
+
+beforeEach(() => {
+  mockApiGet.mockReset();
+  mockApiPost.mockReset();
+  // Default: list returns empty.
+  mockApiGet.mockImplementation(async (path: string) => {
+    if (path === '/background') return { instances: [], status: { dir: '/tmp', exists: false, count: 0 } };
+    if (path.includes('/tool-calls')) return { toolCalls: [] };
+    if (path.includes('/output')) return { output: '', available: false };
+    if (path.includes('/tmux')) return { session: 'bgr_x', exists: false, attachCommand: 'tmux attach -t bgr_x', attachUrl: 'tmux://bgr_x' };
+    return {};
+  });
+});
+
+// --- Tests ---------------------------------------------------------------
+
+describe('BackgroundAgents — v5.x integration', () => {
+  it('renders empty state with a Spawn action', async () => {
+    render(wrap(<BackgroundAgents snapshot={dummySnapshot} settings={dummySettings} activeTab="background" setActiveTab={() => {}} refreshSnapshot={async () => {}} />));
+    await waitFor(() =>
+      expect(screen.getByText(/No active background agents/i)).toBeInTheDocument(),
+    );
+    expect(screen.getAllByRole('button', { name: /Spawn/i }).length).toBeGreaterThan(0);
+  });
+
+  it('renders an active card with pause + steer buttons', async () => {
+    mockApiGet.mockImplementation(async (path: string) => {
+      if (path === '/background') {
+        return {
+          instances: [
+            {
+              instanceId: 'bgr_running_x',
+              status: 'running',
+              agent: 'mimir',
+              prompt: 'say hi',
+              startedAt: Date.now() - 5000,
+              toolCallCount: 0,
+              tmuxSession: 'bgr_running_x',
+              tmuxActive: false,
+            },
+          ],
+          status: { dir: '/tmp', exists: true, count: 1 },
+        };
+      }
+      return {};
+    });
+    render(wrap(<BackgroundAgents snapshot={dummySnapshot} settings={dummySettings} activeTab="background" setActiveTab={() => {}} refreshSnapshot={async () => {}} />));
+    await waitFor(() => expect(screen.getByText('mimir')).toBeInTheDocument());
+    expect(screen.getByRole('button', { name: /Pause/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Steer/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Kill/i })).toBeInTheDocument();
+  });
+
+  it('renders a paused card with resume instead of pause', async () => {
+    mockApiGet.mockImplementation(async (path: string) => {
+      if (path === '/background') {
+        return {
+          instances: [
+            {
+              instanceId: 'bgr_paused_x',
+              status: 'paused',
+              agent: 'mimir',
+              prompt: 'paused run',
+              startedAt: Date.now() - 5000,
+              toolCallCount: 0,
+            },
+          ],
+          status: { dir: '/tmp', exists: true, count: 1 },
+        };
+      }
+      return {};
+    });
+    render(wrap(<BackgroundAgents snapshot={dummySnapshot} settings={dummySettings} activeTab="background" setActiveTab={() => {}} refreshSnapshot={async () => {}} />));
+    await waitFor(() => expect(screen.getByRole('button', { name: /Resume/i })).toBeInTheDocument());
+    expect(screen.queryByRole('button', { name: /Pause/i })).not.toBeInTheDocument();
+  });
+
+  it('progress bar shows when instance.progress is set', async () => {
+    mockApiGet.mockImplementation(async (path: string) => {
+      if (path === '/background') {
+        return {
+          instances: [
+            {
+              instanceId: 'bgr_progress_x',
+              status: 'running',
+              agent: 'mimir',
+              prompt: 'step',
+              startedAt: Date.now(),
+              toolCallCount: 1,
+              progress: 42,
+              progressMessage: 'halfway through',
+            },
+          ],
+          status: { dir: '/tmp', exists: true, count: 1 },
+        };
+      }
+      return {};
+    });
+    render(wrap(<BackgroundAgents snapshot={dummySnapshot} settings={dummySettings} activeTab="background" setActiveTab={() => {}} refreshSnapshot={async () => {}} />));
+    await waitFor(() => expect(screen.getByText(/42%/)).toBeInTheDocument());
+    expect(screen.getByText(/halfway through/i)).toBeInTheDocument();
+  });
+
+  it('pause button calls pause endpoint', async () => {
+    mockApiGet.mockImplementation(async (path: string) => {
+      if (path === '/background') {
+        return {
+          instances: [{ instanceId: 'bgr_x', status: 'running', agent: 'mimir', prompt: 'p', startedAt: Date.now(), toolCallCount: 0 }],
+          status: { dir: '/tmp', exists: true, count: 1 },
+        };
+      }
+      return {};
+    });
+    mockApiPost.mockResolvedValue({ ok: true });
+    render(wrap(<BackgroundAgents snapshot={dummySnapshot} settings={dummySettings} activeTab="background" setActiveTab={() => {}} refreshSnapshot={async () => {}} />));
+    const btn = await waitFor(() => screen.getByRole('button', { name: /Pause/i }));
+    await userEvent.click(btn);
+    await waitFor(() => {
+      expect(mockApiPost).toHaveBeenCalledWith('/background/bgr_x/pause', {});
+    });
+  });
+});

package/bizar-dash/tests/background-pause-resume.test.mjs

@@ -0,0 +1,46 @@
+/**
+ * tests/background-pause-resume.test.mjs
+ *
+ * v5.x — Tests for POST /api/background/:id/pause and .../resume.
+ *
+ * Validates the spawner's pure-logic surface WITHOUT spawning a real
+ * opencode subprocess (which would block on `opencode run` exiting).
+ * The pause/resume registry helpers are tested via error paths:
+ *   - unknown instance → "instance_not_tracked"
+ *   - paused state survives round-trip after a real spawn (skipped — see notes)
+ */
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+import {
+  pauseBgAgent,
+  resumeBgAgent,
+  status,
+  configureSpawner,
+} from '../src/server/bg-spawner.mjs';
+
+test('configureSpawner registers a broadcast hook without throwing', () => {
+  let received = null;
+  configureSpawner({ broadcast: (msg) => { received = msg; } });
+  assert.equal(typeof received, 'object');
+});
+
+test('pauseBgAgent on unknown instance returns instance_not_tracked', () => {
+  const r = pauseBgAgent('bgr_definitely_missing_id');
+  assert.equal(r.ok, false);
+  assert.equal(r.error, 'instance_not_tracked');
+});
+
+test('resumeBgAgent on unknown instance returns instance_not_tracked', () => {
+  const r = resumeBgAgent('bgr_definitely_missing_id');
+  assert.equal(r.ok, false);
+  assert.equal(r.error, 'instance_not_tracked');
+});
+
+test('status() returns count + ids diagnostics without throwing', () => {
+  const s = status();
+  assert.equal(typeof s.count, 'number');
+  assert.ok(Array.isArray(s.ids));
+  assert.ok(s.count >= 0);
+});

package/bizar-dash/tests/background-spawn-from-ui.test.mjs

@@ -0,0 +1,36 @@
+/**
+ * tests/background-spawn-from-ui.test.mjs
+ *
+ * v5.x — Validates the spawner's input-validation surface only —
+ * doesn't actually launch `opencode run` (that would block).
+ *
+ * The full happy-path test lives in a manual run-script (see
+ * scripts/bg-spawn-smoke.mjs, future work) because the dashboard
+ * sandbox can't guarantee opencode is installed + auth'd.
+ */
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+import { spawnBgAgent } from '../src/server/bg-spawner.mjs';
+
+test('spawnBgAgent rejects empty args', async () => {
+  const r = await spawnBgAgent({});
+  assert.equal(r.error, 'missing_required_fields');
+  assert.equal(r.instanceId, '');
+});
+
+test('spawnBgAgent rejects missing prompt', async () => {
+  const r = await spawnBgAgent({ agent: 'mimir', worktree: '/tmp' });
+  assert.equal(r.error, 'missing_required_fields');
+});
+
+test('spawnBgAgent rejects missing agent', async () => {
+  const r = await spawnBgAgent({ prompt: 'hi', worktree: '/tmp' });
+  assert.equal(r.error, 'missing_required_fields');
+});
+
+test('spawnBgAgent rejects missing worktree', async () => {
+  const r = await spawnBgAgent({ agent: 'mimir', prompt: 'hi' });
+  assert.equal(r.error, 'missing_required_fields');
+});

package/bizar-dash/tests/background-steer.test.mjs

@@ -0,0 +1,42 @@
+/**
+ * tests/background-steer.test.mjs
+ *
+ * v5.x — Tests for the steer-broker helper. Validates that the
+ * helper accepts a non-empty message and rejects empty input. We do
+ * NOT exercise the kill+respawn path here because it requires a real
+ * `opencode` binary on PATH; see background-spawn-from-ui.test.mjs
+ * for that path.
+ */
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { mkdtempSync } from 'node:fs';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+
+import { steerBgAgent } from '../src/server/bg-spawner.mjs';
+
+test('steerBgAgent rejects empty message', async () => {
+  const r = await steerBgAgent('bgr_nope', '');
+  assert.equal(r.ok, false);
+  assert.equal(r.error, 'message_empty');
+});
+
+test('steerBgAgent rejects whitespace-only message', async () => {
+  const r = await steerBgAgent('bgr_nope', '   ');
+  assert.equal(r.ok, false);
+  assert.equal(r.error, 'message_empty');
+});
+
+test('steerBgAgent with missing instance returns not_found', async () => {
+  const tmp = mkdtempSync(join(tmpdir(), 'bgspr-'));
+  const originalHome = process.env.HOME;
+  process.env.HOME = tmp;
+  try {
+    const r = await steerBgAgent('bgr_definitely_missing', 'go faster');
+    assert.equal(r.ok, false);
+    assert.match(r.error || '', /instance_not_found|file/);
+  } finally {
+    process.env.HOME = originalHome;
+  }
+});