groove-dev 0.27.174 → 0.27.179

package/packages/gui/src/components/agents/spawn-wizard.jsx

@@ -15,6 +15,7 @@ import {
   Check, Users, Plus,
 } from 'lucide-react';
 import { api } from '../../lib/api';
+import { useToast } from '../../lib/hooks/use-toast';
 import { Dialog, DialogContent } from '../ui/dialog';
 import { INTEGRATION_LOGOS } from '../../lib/integration-logos';
 
@@ -52,6 +53,7 @@ export function SpawnWizard() {
   const detailPanel = useGrooveStore((s) => s.detailPanel);
   const closeDetail = useGrooveStore((s) => s.closeDetail);
   const spawnAgent = useGrooveStore((s) => s.spawnAgent);
+  const toast = useToast();
   const fetchProviders = useGrooveStore((s) => s.fetchProviders);
   const teams = useGrooveStore((s) => s.teams);
   const activeTeamId = useGrooveStore((s) => s.activeTeamId);
@@ -84,6 +86,8 @@ export function SpawnWizard() {
   const [ollamaInstalled, setOllamaInstalled] = useState([]);
   const [ollamaServerRunning, setOllamaServerRunning] = useState(false);
   const [fast, setFast] = useState(false);
+  const [authMode, setAuthMode] = useState('subscription');
+  const [claudeHasKey, setClaudeHasKey] = useState(false);
   const [teamMode, setTeamMode] = useState('new');
   const [newTeamName, setNewTeamName] = useState('');
   const [selectedTeamId, setSelectedTeamId] = useState('');
@@ -142,7 +146,7 @@ export function SpawnWizard() {
         setPersonalities(Array.isArray(data) ? data : data.personalities || []);
       }).catch(() => {});
       setRole(''); setCustomRole(''); setName('');
-      setProvider(_presetProvider); setModel(_presetModel); setFast(false);
+      setProvider(_presetProvider); setModel(_presetModel); setFast(false); setAuthMode('subscription');
       setTeamMode('new'); setSelectedTeamId('');
       setNewTeamName(_presetModel
         ? _presetModel.split(':').pop().replace(/[-_]/g, ' ')
@@ -173,6 +177,13 @@ export function SpawnWizard() {
     }).catch(() => setRecommendations([]));
   }, [selectedRole, open]);
 
+  useEffect(() => {
+    if (!open) return;
+    api.get('/credentials')
+      .then((list) => setClaudeHasKey(Array.isArray(list) && list.some((c) => c.provider === 'claude-code')))
+      .catch(() => setClaudeHasKey(false));
+  }, [open]);
+
   useEffect(() => {
     if (!open || provider !== 'ollama') { setOllamaInstalled([]); return; }
     api.get('/providers/ollama/models').then((data) => {
@@ -208,6 +219,7 @@ export function SpawnWizard() {
         ...(selectedIntegrations.length > 0 && { integrationApproval }),
         ...(selectedRepos.length > 0 && { repos: selectedRepos }),
         ...(fast && { fast: true }),
+        ...(provider === 'claude-code' && { authMode }),
         ...(selectedPersonality && { personality: selectedPersonality }),
         ...(selectedRole === 'ambassador' && selectedPeerId && { peerId: selectedPeerId }),
         ...(teamId && { teamId }),
@@ -220,6 +232,10 @@ export function SpawnWizard() {
 
   async function handleSpawn() {
     if (!selectedRole) return;
+    if (provider === 'claude-code' && authMode === 'usage' && !claudeHasKey) {
+      toast.error('Add an Anthropic API key in Settings → Providers to spawn with usage credits.');
+      return;
+    }
     try {
       const preflight = await api.post('/agents/preflight', {
         role: selectedRole,
@@ -543,6 +559,39 @@ export function SpawnWizard() {
                   </label>
                 )}
 
+                {/* Billing mode — subscription (OAuth) vs usage credits (API key) */}
+                {provider === 'claude-code' && (
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-text-2 font-sans">Billing</label>
+                    <div className="flex gap-1 p-0.5 rounded-md bg-surface-3 w-fit">
+                      {[
+                        { id: 'subscription', label: 'Subscription' },
+                        { id: 'usage', label: 'Usage credits' },
+                      ].map((opt) => (
+                        <button
+                          key={opt.id}
+                          type="button"
+                          onClick={() => setAuthMode(opt.id)}
+                          className={cn(
+                            'px-2.5 py-1 rounded text-2xs font-semibold font-sans transition-colors',
+                            authMode === opt.id ? 'bg-accent text-white' : 'text-text-2 hover:text-text-0',
+                          )}
+                        >
+                          {opt.label}
+                        </button>
+                      ))}
+                    </div>
+                    {authMode === 'usage' && !claudeHasKey && (
+                      <p className="text-2xs text-warning font-sans">
+                        No Anthropic API key stored — add one in Settings → Providers before spawning.
+                      </p>
+                    )}
+                    {authMode === 'subscription' && (
+                      <p className="text-2xs text-text-3 font-sans">Uses your Claude Code login (Pro/Max).</p>
+                    )}
+                  </div>
+                )}
+
                 {/* Ollama model status */}
                 {provider === 'ollama' && model && (
                   <div className="flex items-center gap-2 flex-wrap text-2xs font-sans">

package/packages/gui/src/components/auto-agents/auto-agent-card.jsx

@@ -0,0 +1,139 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useRef, useEffect } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { timeAgo, fmtDollar } from '../../lib/format';
+import { cn } from '../../lib/cn';
+import {
+  Play, Pause, RotateCcw, MoreHorizontal, Trash2, Pencil, Zap,
+  Clock, Activity, DollarSign, Hash,
+} from 'lucide-react';
+
+function statusBadge(agent) {
+  if (agent.paused) return { variant: 'warning', label: 'Paused', dot: false };
+  if (agent.lastRunStatus === 'running') return { variant: 'info', label: 'Running', dot: true };
+  if (agent.activeAgent) return { variant: 'info', label: 'Running', dot: true };
+  if (!agent.enabled) return { variant: 'default', label: 'Disabled', dot: false };
+  if (agent.consecutiveFailures >= 5) return { variant: 'danger', label: 'Auto-Paused', dot: false };
+  return { variant: 'success', label: 'Active', dot: false };
+}
+
+export function AutoAgentCard({ agent }) {
+  const selectAutoAgent = useGrooveStore((s) => s.selectAutoAgent);
+  const pauseAutoAgent = useGrooveStore((s) => s.pauseAutoAgent);
+  const resumeAutoAgent = useGrooveStore((s) => s.resumeAutoAgent);
+  const triggerAutoAgent = useGrooveStore((s) => s.triggerAutoAgent);
+  const deleteAutoAgent = useGrooveStore((s) => s.deleteAutoAgent);
+  const selectedId = useGrooveStore((s) => s.selectedAutoAgentId);
+
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef(null);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    function handleClick(e) {
+      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [menuOpen]);
+
+  const a = agent;
+  const badge = statusBadge(a);
+  const isSelected = selectedId === a.id;
+  const phase = a.state?.phase || 'idle';
+
+  return (
+    <div
+      onClick={() => selectAutoAgent(a.id)}
+      className={cn(
+        'rounded-md border bg-surface-1 overflow-hidden transition-colors cursor-pointer',
+        isSelected ? 'border-accent ring-1 ring-accent/30' : 'border-border-subtle hover:border-border',
+      )}
+    >
+      {/* Header */}
+      <div className="px-4 py-3 flex items-start gap-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold text-text-0 font-sans truncate">{a.name}</span>
+            <Badge variant={badge.variant} dot={badge.dot ? 'pulse' : undefined} className="text-2xs flex-shrink-0">
+              {badge.label}
+            </Badge>
+          </div>
+          {a.description && (
+            <p className="text-2xs text-text-3 font-sans mt-0.5 line-clamp-2">{a.description}</p>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 flex-shrink-0">
+          {a.paused ? (
+            <Button variant="ghost" size="icon-sm" onClick={(e) => { e.stopPropagation(); resumeAutoAgent(a.id); }}>
+              <Play size={12} />
+            </Button>
+          ) : (
+            <Button variant="ghost" size="icon-sm" onClick={(e) => { e.stopPropagation(); pauseAutoAgent(a.id); }}>
+              <Pause size={12} />
+            </Button>
+          )}
+          <Button variant="ghost" size="icon-sm" onClick={(e) => { e.stopPropagation(); triggerAutoAgent(a.id); }}>
+            <Zap size={12} />
+          </Button>
+          <div className="relative" ref={menuRef}>
+            <Button variant="ghost" size="icon-sm" onClick={(e) => { e.stopPropagation(); setMenuOpen(!menuOpen); }}>
+              <MoreHorizontal size={12} />
+            </Button>
+            {menuOpen && (
+              <div className="absolute right-0 top-full mt-1 z-50 bg-surface-2 border border-border rounded-md shadow-lg py-1 min-w-[140px]">
+                <button
+                  onClick={(e) => { e.stopPropagation(); setMenuOpen(false); deleteAutoAgent(a.id); }}
+                  className="w-full px-3 py-1.5 text-xs font-sans text-danger hover:bg-surface-3 text-left flex items-center gap-2"
+                >
+                  <Trash2 size={11} /> Delete
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Stats row */}
+      <div className="px-4 pb-3 flex items-center gap-4 text-2xs text-text-3 font-mono">
+        <span className="flex items-center gap-1">
+          <Activity size={10} className="text-text-4" />
+          {phase}
+        </span>
+        <span className="flex items-center gap-1">
+          <Hash size={10} className="text-text-4" />
+          {a.totalCycles || 0} cycles
+        </span>
+        <span className="flex items-center gap-1">
+          <DollarSign size={10} className="text-text-4" />
+          {fmtDollar(a.totalCost || 0)}
+        </span>
+        <span className="flex items-center gap-1">
+          <Clock size={10} className="text-text-4" />
+          {a.cadenceDescription || a.cadence}
+        </span>
+      </div>
+
+      {/* Active agent indicator */}
+      {a.activeAgent && (
+        <div className="px-4 pb-2">
+          <div className="flex items-center gap-2 text-2xs font-sans text-accent">
+            <span className="inline-block w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
+            Agent {a.activeAgent.id} running
+          </div>
+        </div>
+      )}
+
+      {/* Last run */}
+      {a.lastRunAt && !a.activeAgent && (
+        <div className="px-4 pb-2 text-2xs text-text-4 font-sans">
+          Last run {timeAgo(a.lastRunAt)} · {a.lastRunStatus || 'unknown'}
+        </div>
+      )}
+    </div>
+  );
+}

package/packages/gui/src/components/auto-agents/auto-agent-detail.jsx

@@ -0,0 +1,286 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useEffect, useCallback } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+import { Tabs } from '../ui/tabs';
+import { timeAgo, fmtDollar } from '../../lib/format';
+import { cn } from '../../lib/cn';
+import {
+  Play, Pause, Zap, ArrowLeft, Save,
+  BookOpen, FileText, Clock, Activity, ListOrdered,
+} from 'lucide-react';
+
+function JournalTab({ agentId }) {
+  const fetchJournal = useGrooveStore((s) => s.fetchAutoAgentJournal);
+  const [entries, setEntries] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    fetchJournal(agentId).then((data) => { setEntries(data || []); setLoading(false); });
+  }, [agentId]);
+
+  if (loading) return <div className="p-4 text-xs text-text-4 font-sans">Loading journal...</div>;
+  if (entries.length === 0) return <div className="p-4 text-xs text-text-4 font-sans">No journal entries yet.</div>;
+
+  return (
+    <div className="p-3 space-y-2 overflow-y-auto">
+      {[...entries].reverse().map((e, i) => (
+        <div key={i} className="rounded border border-border-subtle bg-surface-0 px-3 py-2">
+          <div className="flex items-center gap-2 text-2xs text-text-3 font-mono">
+            <span>{timeAgo(e.timestamp)}</span>
+            <Badge variant={e.event?.includes('fail') || e.event?.includes('error') ? 'danger' : 'default'} className="text-2xs">
+              {e.event}
+            </Badge>
+            {e.cycle && <span className="text-text-4">cycle {e.cycle}</span>}
+          </div>
+          {e.details && <p className="text-xs text-text-1 font-sans mt-1">{e.details}</p>}
+          {e.lesson && <p className="text-xs text-accent font-sans mt-1 italic">Lesson: {e.lesson}</p>}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function RunsTab({ agentId }) {
+  const fetchRuns = useGrooveStore((s) => s.fetchAutoAgentRuns);
+  const openDetail = useGrooveStore((s) => s.openDetail);
+  const [runs, setRuns] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    fetchRuns(agentId).then((data) => { setRuns(data || []); setLoading(false); });
+  }, [agentId]);
+
+  if (loading) return <div className="p-4 text-xs text-text-4 font-sans">Loading runs...</div>;
+  if (runs.length === 0) return <div className="p-4 text-xs text-text-4 font-sans">No runs yet.</div>;
+
+  return (
+    <div className="p-3 space-y-2 overflow-y-auto">
+      {runs.map((r) => (
+        <div
+          key={r.runId}
+          className="rounded border border-border-subtle bg-surface-0 px-3 py-2 cursor-pointer hover:border-border"
+          onClick={() => r.agentId && openDetail({ type: 'agent', agentId: r.agentId })}
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-2xs font-mono text-text-3">
+              <Badge
+                variant={r.status === 'completed' ? 'success' : r.status === 'running' ? 'info' : 'danger'}
+                className="text-2xs"
+              >
+                {r.status}
+              </Badge>
+              <span>{r.agentId}</span>
+            </div>
+            <span className="text-2xs text-text-4 font-mono">{timeAgo(r.startedAt || r.completedAt)}</span>
+          </div>
+          <div className="flex items-center gap-3 mt-1 text-2xs text-text-4 font-mono">
+            <span>{r.tokensUsed?.toLocaleString() || 0} tokens</span>
+            <span>{fmtDollar(r.costUsd || 0)}</span>
+            <span>{r.turns || 0} turns</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function EditorTab({ agentId, type }) {
+  const fetchPrompt = useGrooveStore((s) => s.fetchAutoAgentPrompt);
+  const fetchRoadmap = useGrooveStore((s) => s.fetchAutoAgentRoadmap);
+  const updatePrompt = useGrooveStore((s) => s.updateAutoAgentPrompt);
+  const updateRoadmap = useGrooveStore((s) => s.updateAutoAgentRoadmap);
+
+  const [content, setContent] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    setDirty(false);
+    const fetcher = type === 'prompt' ? fetchPrompt : fetchRoadmap;
+    fetcher(agentId).then((data) => { setContent(data || ''); setLoading(false); });
+  }, [agentId, type]);
+
+  const save = useCallback(() => {
+    const updater = type === 'prompt' ? updatePrompt : updateRoadmap;
+    updater(agentId, content);
+    setDirty(false);
+  }, [agentId, type, content]);
+
+  if (loading) return <div className="p-4 text-xs text-text-4 font-sans">Loading...</div>;
+
+  return (
+    <div className="flex flex-col h-full">
+      <textarea
+        value={content}
+        onChange={(e) => { setContent(e.target.value); setDirty(true); }}
+        className="flex-1 w-full p-3 bg-surface-0 text-text-1 text-xs font-mono resize-none border-0 focus:outline-none"
+        placeholder={type === 'prompt' ? 'System prompt for this auto agent...' : 'Roadmap with staged goals...'}
+      />
+      {dirty && (
+        <div className="px-3 py-2 border-t border-border-subtle flex justify-end">
+          <Button variant="primary" size="sm" onClick={save} className="gap-1.5">
+            <Save size={12} /> Save {type}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StateTab({ agentId }) {
+  const fetchDetail = useGrooveStore((s) => s.fetchAutoAgentDetail);
+  const [detail, setDetail] = useState(null);
+
+  useEffect(() => {
+    fetchDetail(agentId).then(setDetail);
+  }, [agentId]);
+
+  if (!detail) return <div className="p-4 text-xs text-text-4 font-sans">Loading state...</div>;
+
+  const { state, definition } = detail;
+
+  return (
+    <div className="p-3 space-y-3 overflow-y-auto">
+      <div className="space-y-2">
+        <h4 className="text-2xs font-semibold text-text-2 font-sans uppercase tracking-wide">Current State</h4>
+        <div className="grid grid-cols-2 gap-2 text-xs font-sans">
+          <div className="bg-surface-0 rounded px-3 py-2 border border-border-subtle">
+            <span className="text-text-4 text-2xs">Phase</span>
+            <p className="text-text-0 font-mono">{state?.phase || 'idle'}</p>
+          </div>
+          <div className="bg-surface-0 rounded px-3 py-2 border border-border-subtle">
+            <span className="text-text-4 text-2xs">Cycle</span>
+            <p className="text-text-0 font-mono">{state?.cycle || 0}</p>
+          </div>
+        </div>
+        {state?.phase_note && (
+          <div className="bg-surface-0 rounded px-3 py-2 border border-border-subtle">
+            <span className="text-text-4 text-2xs">Phase Note</span>
+            <p className="text-text-1 text-xs font-sans">{state.phase_note}</p>
+          </div>
+        )}
+        {state?.champion && (
+          <div className="bg-surface-0 rounded px-3 py-2 border border-border-subtle">
+            <span className="text-text-4 text-2xs">Champion</span>
+            <pre className="text-text-1 text-2xs font-mono mt-1 whitespace-pre-wrap">{JSON.stringify(state.champion, null, 2)}</pre>
+          </div>
+        )}
+        {state?.error && (
+          <div className="bg-danger/10 rounded px-3 py-2 border border-danger/30">
+            <span className="text-danger text-2xs font-semibold">Error</span>
+            <p className="text-danger text-xs font-sans">{state.error}</p>
+          </div>
+        )}
+      </div>
+
+      {/* Config summary */}
+      <div className="space-y-2">
+        <h4 className="text-2xs font-semibold text-text-2 font-sans uppercase tracking-wide">Configuration</h4>
+        <div className="bg-surface-0 rounded px-3 py-2 border border-border-subtle text-2xs font-mono text-text-3 space-y-1">
+          <div>Cadence: {definition?.cadenceDescription || definition?.cadence}</div>
+          <div>Provider: {definition?.agentConfig?.provider} · Model: {definition?.agentConfig?.model}</div>
+          <div>Timeout: {definition?.timeout}s · Stale threshold: {definition?.staleThresholdMinutes}min</div>
+          {definition?.maxIterations && <div>Max iterations: {definition.maxIterations}</div>}
+          {definition?.guardrails?.length > 0 && <div>Guardrails: {definition.guardrails.length}</div>}
+        </div>
+      </div>
+
+      {/* History */}
+      {state?.history?.length > 0 && (
+        <div className="space-y-2">
+          <h4 className="text-2xs font-semibold text-text-2 font-sans uppercase tracking-wide">
+            History ({state.history.length})
+          </h4>
+          <div className="space-y-1">
+            {state.history.slice(-10).reverse().map((h, i) => (
+              <div key={i} className="text-2xs font-mono text-text-3 bg-surface-0 rounded px-2 py-1 border border-border-subtle">
+                [{timeAgo(h.timestamp)}] {h.tag || h.event}: {h.note || h.details || ''}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const TABS = [
+  { id: 'state',   label: 'State',   icon: Activity },
+  { id: 'journal', label: 'Journal', icon: BookOpen },
+  { id: 'runs',    label: 'Runs',    icon: ListOrdered },
+  { id: 'prompt',  label: 'Prompt',  icon: FileText },
+  { id: 'roadmap', label: 'Roadmap', icon: Clock },
+];
+
+export function AutoAgentDetail({ agentId, onBack }) {
+  const [activeTab, setActiveTab] = useState('state');
+  const autoAgents = useGrooveStore((s) => s.autoAgents);
+  const pauseAutoAgent = useGrooveStore((s) => s.pauseAutoAgent);
+  const resumeAutoAgent = useGrooveStore((s) => s.resumeAutoAgent);
+  const triggerAutoAgent = useGrooveStore((s) => s.triggerAutoAgent);
+
+  const agent = autoAgents.find((a) => a.id === agentId);
+  if (!agent) return <div className="p-4 text-xs text-text-4">Agent not found</div>;
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="px-4 py-3 border-b border-border-subtle bg-surface-1 flex items-center gap-3">
+        <Button variant="ghost" size="icon-sm" onClick={onBack}>
+          <ArrowLeft size={14} />
+        </Button>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-sm font-semibold text-text-0 font-sans truncate">{agent.name}</h3>
+          <p className="text-2xs text-text-3 font-sans truncate">{agent.description}</p>
+        </div>
+        <div className="flex items-center gap-1">
+          {agent.paused ? (
+            <Button variant="ghost" size="sm" onClick={() => resumeAutoAgent(agentId)} className="gap-1 text-xs">
+              <Play size={12} /> Resume
+            </Button>
+          ) : (
+            <Button variant="ghost" size="sm" onClick={() => pauseAutoAgent(agentId)} className="gap-1 text-xs">
+              <Pause size={12} /> Pause
+            </Button>
+          )}
+          <Button variant="primary" size="sm" onClick={() => triggerAutoAgent(agentId)} className="gap-1 text-xs">
+            <Zap size={12} /> Trigger
+          </Button>
+        </div>
+      </div>
+
+      {/* Tab bar */}
+      <div className="flex items-center border-b border-border-subtle bg-surface-1 px-2">
+        {TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            className={cn(
+              'flex items-center gap-1.5 px-3 py-2 text-xs font-sans border-b-2 transition-colors cursor-pointer',
+              activeTab === tab.id
+                ? 'border-accent text-accent'
+                : 'border-transparent text-text-3 hover:text-text-1',
+            )}
+          >
+            <tab.icon size={12} />
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab content */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        {activeTab === 'state' && <StateTab agentId={agentId} />}
+        {activeTab === 'journal' && <JournalTab agentId={agentId} />}
+        {activeTab === 'runs' && <RunsTab agentId={agentId} />}
+        {activeTab === 'prompt' && <EditorTab agentId={agentId} type="prompt" />}
+        {activeTab === 'roadmap' && <EditorTab agentId={agentId} type="roadmap" />}
+      </div>
+    </div>
+  );
+}