groove-dev 0.27.174 → 0.27.179

package/node_modules/@groove-dev/gui/src/components/auto-agents/setup-wizard.jsx

@@ -0,0 +1,284 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useGrooveStore } from '../../stores/groove';
+import { Button } from '../ui/button';
+import { Badge } from '../ui/badge';
+import { Sheet, SheetContent } from '../ui/sheet';
+import { cn } from '../../lib/cn';
+import { api } from '../../lib/api';
+import {
+  Bot, Send, ArrowRight, Sparkles, Clock, Shield, FileText,
+  ChevronDown, ChevronUp, Edit3, Check, X,
+} from 'lucide-react';
+
+const CADENCE_PRESETS = [
+  { label: 'Every 15 min', value: '*/15 * * * *' },
+  { label: 'Every 30 min', value: '*/30 * * * *' },
+  { label: 'Every hour',   value: '0 * * * *' },
+  { label: 'Every 2 hours', value: '0 */2 * * *' },
+  { label: 'Every 6 hours', value: '0 */6 * * *' },
+  { label: 'Daily 9 AM',   value: '0 9 * * *' },
+  { label: 'Weekdays 9 AM', value: '0 9 * * 1-5' },
+];
+
+const SETUP_SYSTEM_PROMPT = `You are a setup assistant for creating autonomous AI agents in Groove.
+Your job is to interview the user about what they want their auto agent to do, then generate a complete configuration.
+
+Ask 3-5 focused questions to understand:
+1. What is the agent's goal/objective?
+2. What tools, APIs, or commands will it need?
+3. What should it never do? (guardrails)
+4. How often should it check in? (cadence)
+5. What does success look like? (milestones/roadmap)
+
+After gathering enough info, generate a JSON config block wrapped in \`\`\`json ... \`\`\` with this exact shape:
+{
+  "ready": true,
+  "name": "short-kebab-name",
+  "description": "One-line description",
+  "cadence": "0 * * * *",
+  "role": "fullstack",
+  "prompt": "Full system prompt for the agent...",
+  "roadmap": "## Stage 1: ...\\n## Stage 2: ...",
+  "guardrails": ["Never do X", "Always do Y"],
+  "maxIterations": null
+}
+
+Make the prompt comprehensive — include identity, philosophy, available tools, failure handling, and the never-park directive.
+Make the roadmap have 2-4 stages with clear graduation criteria.
+Keep the conversation friendly and efficient. Ask one question at a time.`;
+
+function ChatMessage({ msg }) {
+  const isUser = msg.role === 'user';
+  return (
+    <div className={cn('flex gap-2', isUser ? 'justify-end' : 'justify-start')}>
+      {!isUser && (
+        <div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center flex-shrink-0 mt-0.5">
+          <Sparkles size={12} className="text-accent" />
+        </div>
+      )}
+      <div className={cn(
+        'max-w-[85%] rounded-lg px-3 py-2 text-xs font-sans',
+        isUser
+          ? 'bg-accent text-surface-0 rounded-br-sm'
+          : 'bg-surface-2 text-text-1 rounded-bl-sm',
+      )}>
+        <p className="whitespace-pre-wrap">{msg.content}</p>
+      </div>
+    </div>
+  );
+}
+
+function ConfigPreview({ config, onDeploy, onEdit, deploying }) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="rounded-lg border border-accent/30 bg-accent/5 p-4 space-y-3">
+      <div className="flex items-center gap-2">
+        <Bot size={16} className="text-accent" />
+        <span className="text-sm font-semibold text-text-0 font-sans">Ready to Deploy</span>
+      </div>
+
+      <div className="grid grid-cols-2 gap-2 text-xs font-sans">
+        <div>
+          <span className="text-text-4 text-2xs">Name</span>
+          <p className="text-text-0">{config.name}</p>
+        </div>
+        <div>
+          <span className="text-text-4 text-2xs">Cadence</span>
+          <p className="text-text-0">{CADENCE_PRESETS.find(p => p.value === config.cadence)?.label || config.cadence}</p>
+        </div>
+      </div>
+
+      {config.description && (
+        <p className="text-xs text-text-2 font-sans">{config.description}</p>
+      )}
+
+      {config.guardrails?.length > 0 && (
+        <div>
+          <span className="text-2xs text-text-4 font-sans flex items-center gap-1">
+            <Shield size={10} /> Guardrails
+          </span>
+          <ul className="text-2xs text-text-2 font-sans mt-1 space-y-0.5">
+            {config.guardrails.map((g, i) => <li key={i}>• {g}</li>)}
+          </ul>
+        </div>
+      )}
+
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="text-2xs text-accent font-sans flex items-center gap-1 cursor-pointer hover:underline"
+      >
+        {expanded ? <ChevronUp size={10} /> : <ChevronDown size={10} />}
+        {expanded ? 'Hide' : 'Show'} full config
+      </button>
+
+      {expanded && (
+        <pre className="text-2xs font-mono text-text-3 bg-surface-0 rounded p-2 overflow-x-auto max-h-48 overflow-y-auto border border-border-subtle">
+          {JSON.stringify(config, null, 2)}
+        </pre>
+      )}
+
+      <div className="flex gap-2 pt-1">
+        <Button variant="primary" size="sm" onClick={onDeploy} disabled={deploying} className="flex-1 gap-1.5">
+          {deploying ? 'Deploying...' : <><Check size={12} /> Deploy Agent</>}
+        </Button>
+        <Button variant="outline" size="sm" onClick={onEdit} className="gap-1.5">
+          <Edit3 size={12} /> Edit
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export function AutoAgentSetupWizard() {
+  const open = useGrooveStore((s) => s.autoAgentWizardOpen);
+  const closeWizard = useGrooveStore((s) => s.closeAutoAgentWizard);
+  const createAutoAgent = useGrooveStore((s) => s.createAutoAgent);
+  const setActiveView = useGrooveStore((s) => s.setActiveView);
+
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [config, setConfig] = useState(null);
+  const [deploying, setDeploying] = useState(false);
+  const scrollRef = useRef(null);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (open && messages.length === 0) {
+      setMessages([{
+        role: 'assistant',
+        content: "Hey! I'll help you set up an autonomous agent. What task do you want it to handle? Tell me what you're trying to accomplish and I'll help configure everything.",
+      }]);
+      setConfig(null);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  const sendMessage = useCallback(async () => {
+    if (!input.trim() || loading) return;
+    const userMsg = { role: 'user', content: input.trim() };
+    const newMessages = [...messages, userMsg];
+    setMessages(newMessages);
+    setInput('');
+    setLoading(true);
+
+    try {
+      const chatHistory = newMessages.map(m => ({ role: m.role, content: m.content }));
+      const result = await api.post('/auto-agents/setup-chat', {
+        messages: chatHistory,
+        systemPrompt: SETUP_SYSTEM_PROMPT,
+      });
+
+      const assistantMsg = { role: 'assistant', content: result.response };
+      setMessages(prev => [...prev, assistantMsg]);
+
+      if (result.config) {
+        setConfig(result.config);
+      }
+    } catch (err) {
+      setMessages(prev => [...prev, {
+        role: 'assistant',
+        content: `Sorry, I hit an error: ${err.message}. Let me try again — could you rephrase that?`,
+      }]);
+    } finally {
+      setLoading(false);
+    }
+  }, [input, messages, loading]);
+
+  const handleDeploy = useCallback(async () => {
+    if (!config) return;
+    setDeploying(true);
+    try {
+      const result = await createAutoAgent(config);
+      if (result) {
+        setActiveView('auto-agents');
+      }
+    } finally {
+      setDeploying(false);
+    }
+  }, [config]);
+
+  const handleClose = () => {
+    closeWizard();
+    setMessages([]);
+    setConfig(null);
+    setInput('');
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={(o) => { if (!o) handleClose(); }}>
+      <SheetContent title="New Auto Agent" width={520} onClose={handleClose}>
+        <div className="flex flex-col h-full">
+          {/* Chat area */}
+          <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-4 space-y-3">
+            {messages.map((msg, i) => <ChatMessage key={i} msg={msg} />)}
+
+            {loading && (
+              <div className="flex gap-2">
+                <div className="w-6 h-6 rounded-full bg-accent/10 flex items-center justify-center flex-shrink-0">
+                  <Sparkles size={12} className="text-accent animate-pulse" />
+                </div>
+                <div className="bg-surface-2 rounded-lg px-3 py-2 rounded-bl-sm">
+                  <span className="text-xs text-text-3 font-sans animate-pulse">Thinking...</span>
+                </div>
+              </div>
+            )}
+
+            {config && (
+              <ConfigPreview
+                config={config}
+                onDeploy={handleDeploy}
+                onEdit={() => setConfig(null)}
+                deploying={deploying}
+              />
+            )}
+          </div>
+
+          {/* Input area */}
+          <div className="border-t border-border-subtle px-4 py-3">
+            <div className="flex items-center gap-2">
+              <input
+                ref={inputRef}
+                type="text"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); } }}
+                placeholder={config ? 'Ask to adjust the config...' : 'Describe what you want the agent to do...'}
+                className="flex-1 bg-surface-0 border border-border-subtle rounded-md px-3 py-2 text-xs text-text-0 font-sans placeholder:text-text-4 focus:outline-none focus:border-accent"
+                disabled={loading}
+              />
+              <Button
+                variant="primary"
+                size="icon-sm"
+                onClick={sendMessage}
+                disabled={!input.trim() || loading}
+              >
+                <Send size={14} />
+              </Button>
+            </div>
+            {!config && (
+              <div className="flex flex-wrap gap-1.5 mt-2">
+                {['ML training pipeline', 'Content generation', 'Data monitoring', 'Code review'].map(s => (
+                  <button
+                    key={s}
+                    onClick={() => { setInput(s); inputRef.current?.focus(); }}
+                    className="px-2 py-0.5 text-2xs font-sans text-text-3 bg-surface-2 rounded-full hover:bg-surface-3 cursor-pointer transition-colors"
+                  >
+                    {s}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/fleet/fleet-pane.jsx

@@ -1,6 +1,6 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
 import { useEffect, useRef, useState } from 'react';
-import { X } from 'lucide-react';
+import { X, PanelRight } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
 import { Badge } from '../ui/badge';
@@ -27,7 +27,7 @@ const STATUS_LABEL = {
   rotating: 'Rotating',
 };
 
-export function FleetPane({ agentId, paneIndex }) {
+export function FleetPane({ agentId, paneIndex, readOnly = false }) {
   const effectiveId = agentId || null;
   const lastIdRef = useRef(effectiveId);
   if (effectiveId) lastIdRef.current = effectiveId;
@@ -36,6 +36,9 @@ export function FleetPane({ agentId, paneIndex }) {
   const liveAgent = useGrooveStore((s) => resolvedId ? s.agents.find((a) => a.id === resolvedId) : null);
   const fleetSelectAgent = useGrooveStore((s) => s.fleetSelectAgent);
   const fleetMarkRead = useGrooveStore((s) => s.fleetMarkRead);
+  const openDetail = useGrooveStore((s) => s.openDetail);
+  const detailPanel = useGrooveStore((s) => s.detailPanel);
+  const isPanelOpen = detailPanel?.type === 'agent' && detailPanel?.agentId === resolvedId;
 
   const lastAgentRef = useRef(liveAgent);
   const [gone, setGone] = useState(false);
@@ -92,6 +95,16 @@ export function FleetPane({ agentId, paneIndex }) {
         )}>
           {ctxPct}%
         </span>
+        <button
+          onClick={() => openDetail({ type: 'agent', agentId: resolvedId })}
+          className={cn(
+            'p-1 rounded-md transition-colors cursor-pointer',
+            isPanelOpen ? 'text-accent' : 'text-text-3 hover:text-text-0 hover:bg-surface-3',
+          )}
+          title="Open agent panel"
+        >
+          <PanelRight size={14} />
+        </button>
         <button
           onClick={() => fleetSelectAgent(null, paneIndex)}
           className="p-1 rounded-md text-text-3 hover:text-text-0 hover:bg-surface-3 transition-colors cursor-pointer"
@@ -103,7 +116,7 @@ export function FleetPane({ agentId, paneIndex }) {
 
       {/* Agent feed */}
       <div className="flex-1 min-h-0">
-        <AgentFeed agent={agent} />
+        <AgentFeed agent={agent} readOnly={readOnly} />
       </div>
     </div>
   );

package/node_modules/@groove-dev/gui/src/components/layout/activity-bar.jsx

@@ -1,5 +1,5 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { Network, Code2, ChartSpline, Puzzle, Users, Box, FlaskConical, Newspaper, Settings, Globe, MessageCircle, BookOpen, LayoutList } from 'lucide-react';
+import { Network, Code2, ChartSpline, Puzzle, Users, Box, FlaskConical, Newspaper, Settings, Globe, MessageCircle, BookOpen, LayoutList, Bot } from 'lucide-react';
 import { cn } from '../../lib/cn';
 import { Tooltip } from '../ui/tooltip';
 import { useGrooveStore } from '../../stores/groove';
@@ -12,6 +12,7 @@ const BASE_NAV_ITEMS = [
   { id: 'editor',      icon: Code2,         label: 'Editor' },
   { id: 'dashboard',   icon: ChartSpline,   label: 'Dashboard' },
   { id: 'memory',      icon: BookOpen,      label: 'Memory' },
+  { id: 'auto-agents', icon: Bot,           label: 'Auto Agents' },
   { id: 'teams',       icon: Users,         label: 'Teams' },
   { id: 'marketplace', icon: Puzzle,        label: 'Marketplace' },
   { id: 'models',      icon: Box,           label: 'Models' },

package/node_modules/@groove-dev/gui/src/stores/groove.js

@@ -14,6 +14,7 @@ import { createNetworkSlice } from './slices/network-slice.js';
 import { createPreviewSlice } from './slices/preview-slice.js';
 import { createMarketplaceSlice } from './slices/marketplace-slice.js';
 import { createAutomationsSlice } from './slices/automations-slice.js';
+import { createAutoAgentsSlice } from './slices/auto-agents-slice.js';
 
 const WS_URL = `ws://${window.location.hostname}:${window.location.port || 31415}`;
 
@@ -39,6 +40,7 @@ export const useGrooveStore = create((set, get) => ({
   ...createPreviewSlice(set, get),
   ...createMarketplaceSlice(set, get),
   ...createAutomationsSlice(set, get),
+  ...createAutoAgentsSlice(set, get),
 
   // ── Connection ────────────────────────────────────────────
   connected: false,
@@ -654,6 +656,18 @@ export const useGrooveStore = create((set, get) => ({
           get().fetchAutomations();
           break;
 
+        case 'auto-agent:created':
+        case 'auto-agent:updated':
+        case 'auto-agent:deleted':
+        case 'auto-agent:paused':
+        case 'auto-agent:resumed':
+        case 'auto-agent:cycle-complete':
+        case 'auto-agent:auto-paused':
+        case 'auto-agent:state-updated':
+        case 'auto-agent:iteration-started':
+          get().fetchAutoAgents();
+          break;
+
         case 'gateway:status':
           set({ gateways: msg.data || [] });
           break;

package/node_modules/@groove-dev/gui/src/stores/slices/agents-slice.js

@@ -38,6 +38,8 @@ export const createAgentsSlice = (set, get) => ({
   // ── Agent Actions ─────────────────────────────────────────
 
   selectAgent(id) {
+    // In fleet view, selection is managed by fleetSelectAgent — don't override detail panel here
+    if (get().activeView === 'fleet') return;
     const tid = get().activeTeamId;
     const match = get().agents.find((a) => a.id === id);
     if (tid && match && match.teamId && match.teamId !== tid) return;

package/node_modules/@groove-dev/gui/src/stores/slices/auto-agents-slice.js

@@ -0,0 +1,149 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+
+import { api } from '../../lib/api';
+
+export const createAutoAgentsSlice = (set, get) => ({
+  autoAgents: [],
+  autoAgentWizardOpen: false,
+  autoAgentWizardStep: 'chat',
+  autoAgentSetupMessages: [],
+  autoAgentSetupConfig: null,
+  selectedAutoAgentId: null,
+
+  async fetchAutoAgents() {
+    try {
+      const data = await api.get('/auto-agents');
+      set({ autoAgents: Array.isArray(data) ? data : [] });
+    } catch { /* ignore */ }
+  },
+
+  async createAutoAgent(config) {
+    try {
+      const result = await api.post('/auto-agents', config);
+      get().addToast('success', 'Auto agent created');
+      get().fetchAutoAgents();
+      set({ autoAgentWizardOpen: false, autoAgentSetupMessages: [], autoAgentSetupConfig: null });
+      return result;
+    } catch (err) {
+      get().addToast('error', 'Failed to create auto agent', err.message);
+    }
+  },
+
+  async updateAutoAgent(id, updates) {
+    try {
+      await api.patch(`/auto-agents/${encodeURIComponent(id)}`, updates);
+      get().fetchAutoAgents();
+    } catch (err) {
+      get().addToast('error', 'Failed to update', err.message);
+    }
+  },
+
+  async deleteAutoAgent(id) {
+    try {
+      await api.delete(`/auto-agents/${encodeURIComponent(id)}`);
+      get().addToast('info', 'Auto agent deleted');
+      get().fetchAutoAgents();
+      if (get().selectedAutoAgentId === id) set({ selectedAutoAgentId: null });
+    } catch (err) {
+      get().addToast('error', 'Failed to delete', err.message);
+    }
+  },
+
+  async pauseAutoAgent(id) {
+    try {
+      await api.post(`/auto-agents/${encodeURIComponent(id)}/pause`);
+      get().fetchAutoAgents();
+    } catch (err) {
+      get().addToast('error', 'Failed to pause', err.message);
+    }
+  },
+
+  async resumeAutoAgent(id) {
+    try {
+      await api.post(`/auto-agents/${encodeURIComponent(id)}/resume`);
+      get().fetchAutoAgents();
+    } catch (err) {
+      get().addToast('error', 'Failed to resume', err.message);
+    }
+  },
+
+  async triggerAutoAgent(id) {
+    try {
+      const result = await api.post(`/auto-agents/${encodeURIComponent(id)}/trigger`);
+      get().addToast('success', 'Iteration triggered');
+      get().fetchAutoAgents();
+      return result;
+    } catch (err) {
+      get().addToast('error', 'Failed to trigger', err.message);
+    }
+  },
+
+  async fetchAutoAgentDetail(id) {
+    try {
+      return await api.get(`/auto-agents/${encodeURIComponent(id)}`);
+    } catch { return null; }
+  },
+
+  async fetchAutoAgentJournal(id) {
+    try {
+      return await api.get(`/auto-agents/${encodeURIComponent(id)}/journal?limit=100`);
+    } catch { return []; }
+  },
+
+  async fetchAutoAgentRuns(id) {
+    try {
+      return await api.get(`/auto-agents/${encodeURIComponent(id)}/runs?limit=30`);
+    } catch { return []; }
+  },
+
+  async fetchAutoAgentRoadmap(id) {
+    try {
+      const res = await fetch(`/api/auto-agents/${encodeURIComponent(id)}/roadmap`);
+      return await res.text();
+    } catch { return ''; }
+  },
+
+  async fetchAutoAgentPrompt(id) {
+    try {
+      const res = await fetch(`/api/auto-agents/${encodeURIComponent(id)}/prompt`);
+      return await res.text();
+    } catch { return ''; }
+  },
+
+  async updateAutoAgentPrompt(id, content) {
+    try {
+      await api.put(`/auto-agents/${encodeURIComponent(id)}/prompt`, { content });
+      get().addToast('success', 'Prompt updated');
+    } catch (err) {
+      get().addToast('error', 'Failed to update prompt', err.message);
+    }
+  },
+
+  async updateAutoAgentRoadmap(id, content) {
+    try {
+      await api.put(`/auto-agents/${encodeURIComponent(id)}/roadmap`, { content });
+      get().addToast('success', 'Roadmap updated');
+    } catch (err) {
+      get().addToast('error', 'Failed to update roadmap', err.message);
+    }
+  },
+
+  openAutoAgentWizard() {
+    set({
+      autoAgentWizardOpen: true,
+      autoAgentWizardStep: 'chat',
+      autoAgentSetupMessages: [],
+      autoAgentSetupConfig: null,
+    });
+  },
+  closeAutoAgentWizard() {
+    set({ autoAgentWizardOpen: false, autoAgentSetupMessages: [], autoAgentSetupConfig: null });
+  },
+  selectAutoAgent(id) { set({ selectedAutoAgentId: id }); },
+
+  addAutoAgentSetupMessage(msg) {
+    set((s) => ({ autoAgentSetupMessages: [...s.autoAgentSetupMessages, msg] }));
+  },
+  setAutoAgentSetupConfig(config) { set({ autoAgentSetupConfig: config }); },
+  setAutoAgentWizardStep(step) { set({ autoAgentWizardStep: step }); },
+});

package/node_modules/@groove-dev/gui/src/stores/slices/ui-slice.js

@@ -6,7 +6,7 @@ let toastCounter = 0;
 
 export const createUiSlice = (set, get) => ({
   // ── Navigation ────────────────────────────────────────────
-  activeView: 'agents',           // 'agents' | 'editor' | 'dashboard' | 'marketplace' | 'teams' | 'settings'
+  activeView: 'agents',           // 'agents' | 'editor' | 'dashboard' | 'marketplace' | 'teams' | 'auto-agents' | 'settings'
   detailPanel: null,              // null | { type: 'agent', agentId } | { type: 'spawn' } | { type: 'journalist' }
   teamDetailPanels: {},            // { [teamId]: detailPanel } — persists panel state per team
   commandPaletteOpen: false,
@@ -91,7 +91,19 @@ export const createUiSlice = (set, get) => ({
     localStorage.setItem('groove:detailWidth', String(w));
   },
   setTerminalVisible(v) {
-    set({ terminalVisible: v });
+    const updates = { terminalVisible: v };
+    // In fleet view, opening the terminal auto-opens the agent panel so the
+    // terminal is constrained to the left column rather than spanning full width.
+    if (v && get().activeView === 'fleet') {
+      const selectedId = get().fleetSelectedAgents[0];
+      if (selectedId && !get().detailPanel) {
+        const tid = get().activeTeamId;
+        const panel = { type: 'agent', agentId: selectedId };
+        updates.detailPanel = panel;
+        updates.teamDetailPanels = { ...get().teamDetailPanels, [tid]: panel };
+      }
+    }
+    set(updates);
     localStorage.setItem('groove:terminalVisible', String(v));
   },
   setTerminalHeight(h) {
@@ -120,15 +132,6 @@ export const createUiSlice = (set, get) => ({
     if (pane === 1 && agentId === null) {
       updates.fleetSplitMode = false;
     }
-    const primaryId = agentId || selected[0];
-    if (primaryId) {
-      const tid = get().activeTeamId;
-      const panel = { type: 'agent', agentId: primaryId };
-      updates.detailPanel = panel;
-      updates.teamDetailPanels = { ...get().teamDetailPanels, [tid]: panel };
-    } else {
-      updates.detailPanel = null;
-    }
     set(updates);
   },
   fleetToggleSplit() {

package/node_modules/@groove-dev/gui/src/views/auto-agents.jsx

@@ -0,0 +1,70 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useEffect } from 'react';
+import { useGrooveStore } from '../stores/groove';
+import { Button } from '../components/ui/button';
+import { AutoAgentCard } from '../components/auto-agents/auto-agent-card';
+import { AutoAgentDetail } from '../components/auto-agents/auto-agent-detail';
+import { AutoAgentSetupWizard } from '../components/auto-agents/setup-wizard';
+import { Plus, Bot } from 'lucide-react';
+
+export default function AutoAgentsView() {
+  const autoAgents = useGrooveStore((s) => s.autoAgents);
+  const fetchAutoAgents = useGrooveStore((s) => s.fetchAutoAgents);
+  const openWizard = useGrooveStore((s) => s.openAutoAgentWizard);
+  const selectedId = useGrooveStore((s) => s.selectedAutoAgentId);
+  const selectAutoAgent = useGrooveStore((s) => s.selectAutoAgent);
+
+  useEffect(() => {
+    fetchAutoAgents();
+    const interval = setInterval(fetchAutoAgents, 10000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // Detail view
+  if (selectedId) {
+    return (
+      <div className="flex flex-col h-full">
+        <AutoAgentDetail agentId={selectedId} onBack={() => selectAutoAgent(null)} />
+        <AutoAgentSetupWizard />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex items-center justify-between px-5 py-4 border-b border-border-subtle bg-surface-1">
+        <h2 className="text-sm font-semibold text-text-0 font-sans uppercase tracking-wide">Auto Agents</h2>
+        <Button variant="primary" size="sm" onClick={openWizard} className="gap-1.5">
+          <Plus size={12} /> New Auto Agent
+        </Button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto">
+        {autoAgents.length === 0 ? (
+          <div className="flex-1 flex items-center justify-center h-full">
+            <div className="text-center space-y-3 py-20">
+              <Bot size={28} className="mx-auto text-text-4" />
+              <p className="text-xs font-sans text-text-3">No auto agents yet</p>
+              <p className="text-2xs font-sans text-text-4 max-w-xs mx-auto">
+                Auto agents run autonomously on a schedule — iterating, learning, and making progress on complex tasks 24/7.
+              </p>
+              <Button variant="primary" size="sm" onClick={openWizard} className="gap-1.5 mt-2">
+                <Plus size={12} /> Create Auto Agent
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="p-4 space-y-3">
+            {autoAgents.map((a) => (
+              <AutoAgentCard key={a.id} agent={a} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <AutoAgentSetupWizard />
+    </div>
+  );
+}