@swarmclawai/swarmclaw 0.2.0

package/src/cli/spec.js

@@ -0,0 +1,284 @@
+const COMMAND_GROUPS = {
+  agents: {
+    description: 'Manage agents',
+    commands: {
+      list: { description: 'List agents', method: 'GET', path: '/agents' },
+      get: { description: 'Get an agent by id (from list)', virtualGet: true, collectionPath: '/agents', params: ['id'] },
+      create: { description: 'Create an agent', method: 'POST', path: '/agents' },
+      update: { description: 'Update an agent', method: 'PUT', path: '/agents/:id', params: ['id'] },
+      delete: { description: 'Delete an agent', method: 'DELETE', path: '/agents/:id', params: ['id'] },
+      generate: { description: 'Generate an agent definition', method: 'POST', path: '/agents/generate' },
+    },
+  },
+  auth: {
+    description: 'Access-key auth checks',
+    commands: {
+      status: { description: 'Get auth setup status', method: 'GET', path: '/auth' },
+      login: { description: 'Validate an access key', method: 'POST', path: '/auth' },
+    },
+  },
+  connectors: {
+    description: 'Manage chat connectors',
+    commands: {
+      list: { description: 'List connectors', method: 'GET', path: '/connectors' },
+      get: { description: 'Get connector details', method: 'GET', path: '/connectors/:id', params: ['id'] },
+      create: { description: 'Create a connector', method: 'POST', path: '/connectors' },
+      update: { description: 'Update connector config', method: 'PUT', path: '/connectors/:id', params: ['id'] },
+      delete: { description: 'Delete connector', method: 'DELETE', path: '/connectors/:id', params: ['id'] },
+      start: {
+        description: 'Start connector runtime',
+        method: 'PUT',
+        path: '/connectors/:id',
+        params: ['id'],
+        staticBody: { action: 'start' },
+      },
+      stop: {
+        description: 'Stop connector runtime',
+        method: 'PUT',
+        path: '/connectors/:id',
+        params: ['id'],
+        staticBody: { action: 'stop' },
+      },
+      repair: {
+        description: 'Repair connector runtime',
+        method: 'PUT',
+        path: '/connectors/:id',
+        params: ['id'],
+        staticBody: { action: 'repair' },
+      },
+    },
+  },
+  credentials: {
+    description: 'Manage encrypted provider credentials',
+    commands: {
+      list: { description: 'List credentials', method: 'GET', path: '/credentials' },
+      get: { description: 'Get credential metadata by id (from list)', virtualGet: true, collectionPath: '/credentials', params: ['id'] },
+      create: { description: 'Create credential', method: 'POST', path: '/credentials' },
+      delete: { description: 'Delete credential', method: 'DELETE', path: '/credentials/:id', params: ['id'] },
+    },
+  },
+  daemon: {
+    description: 'Daemon lifecycle controls',
+    commands: {
+      status: { description: 'Get daemon status', method: 'GET', path: '/daemon' },
+      start: { description: 'Start daemon', method: 'POST', path: '/daemon', staticBody: { action: 'start' } },
+      stop: { description: 'Stop daemon', method: 'POST', path: '/daemon', staticBody: { action: 'stop' } },
+      'health-check': { description: 'Run daemon health checks immediately', method: 'POST', path: '/daemon/health-check' },
+    },
+  },
+  dirs: {
+    description: 'Directory browsing helpers',
+    commands: {
+      list: { description: 'List directories (supports --query path=/some/dir)', method: 'GET', path: '/dirs' },
+      pick: { description: 'Open native picker (body: {"mode":"file|folder"})', method: 'POST', path: '/dirs/pick' },
+    },
+  },
+  documents: {
+    description: 'File uploads/downloads and TTS audio',
+    commands: {
+      upload: {
+        description: 'Upload a file (requires --file)',
+        method: 'POST',
+        path: '/upload',
+        upload: true,
+      },
+      fetch: {
+        description: 'Download an uploaded file by filename',
+        method: 'GET',
+        path: '/uploads/:filename',
+        params: ['filename'],
+        binary: true,
+      },
+      tts: {
+        description: 'Generate TTS audio (body: {"text":"..."})',
+        method: 'POST',
+        path: '/tts',
+        binary: true,
+      },
+    },
+  },
+  generate: {
+    description: 'Structured AI generation helpers',
+    commands: {
+      create: { description: 'Generate object from prompt/type', method: 'POST', path: '/generate' },
+      info: { description: 'Get active generator provider/model', method: 'GET', path: '/generate/info' },
+    },
+  },
+  logs: {
+    description: 'Application logs',
+    commands: {
+      list: { description: 'Fetch logs (supports --query lines=200,level=INFO)', method: 'GET', path: '/logs' },
+      clear: { description: 'Clear log file', method: 'DELETE', path: '/logs' },
+    },
+  },
+  memory: {
+    description: 'Agent memory entries',
+    commands: {
+      list: { description: 'List memory entries (supports --query q=term,agentId=id)', method: 'GET', path: '/memory' },
+      get: { description: 'Get memory entry by id', method: 'GET', path: '/memory/:id', params: ['id'] },
+      create: { description: 'Create memory entry', method: 'POST', path: '/memory' },
+      update: { description: 'Update memory entry', method: 'PUT', path: '/memory/:id', params: ['id'] },
+      delete: { description: 'Delete memory entry', method: 'DELETE', path: '/memory/:id', params: ['id'] },
+      maintenance: { description: 'Analyze memory dedupe/prune candidates', method: 'GET', path: '/memory/maintenance' },
+      'maintenance-run': { description: 'Run memory dedupe/prune maintenance', method: 'POST', path: '/memory/maintenance' },
+    },
+  },
+  'memory-images': {
+    description: 'Stored memory image assets',
+    commands: {
+      get: { description: 'Download memory image by filename', method: 'GET', path: '/memory-images/:filename', params: ['filename'], binary: true },
+    },
+  },
+  orchestrator: {
+    description: 'Orchestrator runs and run-state APIs',
+    commands: {
+      run: { description: 'Run orchestrator task now', method: 'POST', path: '/orchestrator/run', waitable: true },
+      runs: { description: 'List queued/running/completed runs', method: 'GET', path: '/runs' },
+      'run-get': { description: 'Get run by id', method: 'GET', path: '/runs/:id', params: ['id'] },
+    },
+  },
+  plugins: {
+    description: 'Plugin listing/config/install',
+    commands: {
+      list: { description: 'List installed plugins', method: 'GET', path: '/plugins' },
+      update: { description: 'Enable/disable plugin (body: {"filename":"x.js","enabled":true})', method: 'POST', path: '/plugins' },
+      marketplace: { description: 'Get plugin marketplace registry', method: 'GET', path: '/plugins/marketplace' },
+      install: { description: 'Install plugin by URL', method: 'POST', path: '/plugins/install' },
+    },
+  },
+  providers: {
+    description: 'Provider configs and model overrides',
+    commands: {
+      list: { description: 'List providers', method: 'GET', path: '/providers' },
+      create: { description: 'Create custom provider', method: 'POST', path: '/providers' },
+      get: { description: 'Get provider by id', method: 'GET', path: '/providers/:id', params: ['id'] },
+      update: { description: 'Update provider config', method: 'PUT', path: '/providers/:id', params: ['id'] },
+      delete: { description: 'Delete custom provider', method: 'DELETE', path: '/providers/:id', params: ['id'] },
+      configs: { description: 'List provider configs only', method: 'GET', path: '/providers/configs' },
+      ollama: { description: 'List local Ollama models', method: 'GET', path: '/providers/ollama' },
+      'openclaw-health': { description: 'Probe OpenClaw endpoint and auth status', method: 'GET', path: '/providers/openclaw/health' },
+      'models-get': { description: 'Get provider model overrides', method: 'GET', path: '/providers/:id/models', params: ['id'] },
+      'models-set': { description: 'Set provider model overrides', method: 'PUT', path: '/providers/:id/models', params: ['id'] },
+      'models-reset': { description: 'Delete provider model overrides', method: 'DELETE', path: '/providers/:id/models', params: ['id'] },
+    },
+  },
+  schedules: {
+    description: 'Scheduled task automation',
+    commands: {
+      list: { description: 'List schedules', method: 'GET', path: '/schedules' },
+      create: { description: 'Create schedule', method: 'POST', path: '/schedules' },
+      get: { description: 'Get schedule by id (from list)', virtualGet: true, collectionPath: '/schedules', params: ['id'] },
+      update: { description: 'Update schedule', method: 'PUT', path: '/schedules/:id', params: ['id'] },
+      delete: { description: 'Delete schedule', method: 'DELETE', path: '/schedules/:id', params: ['id'] },
+      run: { description: 'Trigger schedule immediately', method: 'POST', path: '/schedules/:id/run', params: ['id'] },
+    },
+  },
+  secrets: {
+    description: 'Encrypted secret vault',
+    commands: {
+      list: { description: 'List secret metadata', method: 'GET', path: '/secrets' },
+      get: { description: 'Get secret metadata by id (from list)', virtualGet: true, collectionPath: '/secrets', params: ['id'] },
+      create: { description: 'Create secret', method: 'POST', path: '/secrets' },
+      update: { description: 'Update secret metadata', method: 'PUT', path: '/secrets/:id', params: ['id'] },
+      delete: { description: 'Delete secret', method: 'DELETE', path: '/secrets/:id', params: ['id'] },
+    },
+  },
+  sessions: {
+    description: 'Interactive chat sessions',
+    commands: {
+      list: { description: 'List sessions', method: 'GET', path: '/sessions' },
+      create: { description: 'Create session', method: 'POST', path: '/sessions' },
+      get: { description: 'Get session by id (from list)', virtualGet: true, collectionPath: '/sessions', params: ['id'] },
+      update: { description: 'Update session fields', method: 'PUT', path: '/sessions/:id', params: ['id'] },
+      delete: { description: 'Delete one session', method: 'DELETE', path: '/sessions/:id', params: ['id'] },
+      'delete-many': { description: 'Delete multiple sessions (body: {"ids":[...]})', method: 'DELETE', path: '/sessions' },
+      'heartbeat-disable-all': { description: 'Disable all session heartbeats and cancel queued heartbeat runs', method: 'POST', path: '/sessions/heartbeat' },
+      messages: { description: 'Get session message history', method: 'GET', path: '/sessions/:id/messages', params: ['id'] },
+      'main-loop': { description: 'Get main mission loop state for a session', method: 'GET', path: '/sessions/:id/main-loop', params: ['id'] },
+      'main-loop-action': { description: 'Control main mission loop (pause/resume/set_goal/set_mode/clear_events/nudge)', method: 'POST', path: '/sessions/:id/main-loop', params: ['id'] },
+      chat: { description: 'Send chat message (SSE stream)', method: 'POST', path: '/sessions/:id/chat', params: ['id'], stream: true, waitable: true },
+      stop: { description: 'Cancel active/running session work', method: 'POST', path: '/sessions/:id/stop', params: ['id'] },
+      clear: { description: 'Clear session history', method: 'POST', path: '/sessions/:id/clear', params: ['id'] },
+      mailbox: { description: 'List mailbox envelopes for a session', method: 'GET', path: '/sessions/:id/mailbox', params: ['id'] },
+      'mailbox-action': { description: 'Send/ack/clear mailbox envelopes', method: 'POST', path: '/sessions/:id/mailbox', params: ['id'] },
+      deploy: { description: 'Deploy session workspace git changes', method: 'POST', path: '/sessions/:id/deploy', params: ['id'] },
+      devserver: { description: 'Start/stop/status dev server (body: {"action":"start|stop|status"})', method: 'POST', path: '/sessions/:id/devserver', params: ['id'] },
+      browser: { description: 'Check browser runtime for session', method: 'GET', path: '/sessions/:id/browser', params: ['id'] },
+      'browser-clear': { description: 'Close browser runtime for session', method: 'DELETE', path: '/sessions/:id/browser', params: ['id'] },
+    },
+  },
+  settings: {
+    description: 'Global app settings',
+    commands: {
+      get: { description: 'Get settings', method: 'GET', path: '/settings' },
+      update: { description: 'Update settings', method: 'PUT', path: '/settings' },
+    },
+  },
+  setup: {
+    description: 'Setup and provider validation helpers',
+    commands: {
+      'check-provider': { description: 'Validate provider credentials/endpoint', method: 'POST', path: '/setup/check-provider' },
+      doctor: { description: 'Run local setup diagnostics', method: 'GET', path: '/setup/doctor' },
+    },
+  },
+  skills: {
+    description: 'SwarmClaw and Claude skills',
+    commands: {
+      list: { description: 'List SwarmClaw skills', method: 'GET', path: '/skills' },
+      get: { description: 'Get SwarmClaw skill by id', method: 'GET', path: '/skills/:id', params: ['id'] },
+      create: { description: 'Create SwarmClaw skill', method: 'POST', path: '/skills' },
+      update: { description: 'Update SwarmClaw skill', method: 'PUT', path: '/skills/:id', params: ['id'] },
+      delete: { description: 'Delete SwarmClaw skill', method: 'DELETE', path: '/skills/:id', params: ['id'] },
+      import: { description: 'Import skill from URL', method: 'POST', path: '/skills/import' },
+      claude: { description: 'List local ~/.claude/skills', method: 'GET', path: '/claude-skills' },
+    },
+  },
+  system: {
+    description: 'System and version endpoints',
+    commands: {
+      ip: { description: 'Get local bind IP/port', method: 'GET', path: '/ip' },
+      usage: { description: 'Get usage summary', method: 'GET', path: '/usage' },
+      version: { description: 'Get local/remote git version info', method: 'GET', path: '/version' },
+      update: { description: 'Update to latest stable release tag (fallback: main)', method: 'POST', path: '/version/update' },
+    },
+  },
+  tasks: {
+    description: 'Task board operations',
+    commands: {
+      list: { description: 'List tasks', method: 'GET', path: '/tasks' },
+      get: { description: 'Get task by id', method: 'GET', path: '/tasks/:id', params: ['id'] },
+      create: { description: 'Create task', method: 'POST', path: '/tasks' },
+      update: { description: 'Update task', method: 'PUT', path: '/tasks/:id', params: ['id'] },
+      delete: { description: 'Archive task', method: 'DELETE', path: '/tasks/:id', params: ['id'] },
+      archive: { description: 'Archive task', method: 'DELETE', path: '/tasks/:id', params: ['id'] },
+    },
+  },
+  webhooks: {
+    description: 'Inbound webhook triggers',
+    commands: {
+      trigger: { description: 'Trigger webhook by id', method: 'POST', path: '/webhooks/:id', params: ['id'], waitable: true },
+    },
+  },
+}
+
+const GROUP_NAMES = Object.keys(COMMAND_GROUPS)
+
+function listCoveredRoutes() {
+  const routes = []
+  for (const group of GROUP_NAMES) {
+    const commands = COMMAND_GROUPS[group].commands
+    for (const action of Object.keys(commands)) {
+      const cmd = commands[action]
+      if (cmd.method && cmd.path) {
+        routes.push(`${cmd.method.toUpperCase()} ${cmd.path}`)
+      }
+    }
+  }
+  return routes
+}
+
+module.exports = {
+  COMMAND_GROUPS,
+  GROUP_NAMES,
+  listCoveredRoutes,
+}

package/src/components/agents/agent-card.tsx

@@ -0,0 +1,219 @@
+'use client'
+
+import { useState } from 'react'
+import type { Agent } from '@/types'
+import { useAppStore } from '@/stores/use-app-store'
+import { useChatStore } from '@/stores/use-chat-store'
+import { api } from '@/lib/api-client'
+import { createAgent, deleteAgent } from '@/lib/agents'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { ConfirmDialog } from '@/components/shared/confirm-dialog'
+
+interface Props {
+  agent: Agent
+  isDefault?: boolean
+  onSetDefault?: (id: string) => void
+}
+
+export function AgentCard({ agent, isDefault, onSetDefault }: Props) {
+  const setEditingAgentId = useAppStore((s) => s.setEditingAgentId)
+  const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
+  const loadSessions = useAppStore((s) => s.loadSessions)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const setCurrentSession = useAppStore((s) => s.setCurrentSession)
+  const setActiveView = useAppStore((s) => s.setActiveView)
+  const setMessages = useChatStore((s) => s.setMessages)
+  const [running, setRunning] = useState(false)
+  const [dialogOpen, setDialogOpen] = useState(false)
+  const [taskInput, setTaskInput] = useState('')
+  const [confirmDelete, setConfirmDelete] = useState(false)
+
+  const handleClick = () => {
+    setEditingAgentId(agent.id)
+    setAgentSheetOpen(true)
+  }
+
+  const handleRunClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setTaskInput('')
+    setDialogOpen(true)
+  }
+
+  const handleConfirmRun = async () => {
+    if (!taskInput.trim()) return
+    setDialogOpen(false)
+    setRunning(true)
+    try {
+      const result = await api<{ ok: boolean; sessionId: string }>('POST', '/orchestrator/run', { agentId: agent.id, task: taskInput })
+      if (result.sessionId) {
+        await loadSessions()
+        setMessages([])
+        setCurrentSession(result.sessionId)
+        setActiveView('sessions')
+      }
+    } catch (err) {
+      console.error('Orchestrator run failed:', err)
+    }
+    setRunning(false)
+  }
+
+  const handleDuplicate = async () => {
+    const { id: _id, createdAt: _ca, updatedAt: _ua, ...rest } = agent
+    await createAgent({ ...rest, name: agent.name + ' (Copy)' })
+    await loadAgents()
+  }
+
+  const handleDelete = async () => {
+    await deleteAgent(agent.id)
+    await loadAgents()
+    setConfirmDelete(false)
+  }
+
+  return (
+    <>
+      <div
+        onClick={handleClick}
+        className="group relative py-3.5 px-4 cursor-pointer rounded-[14px]
+          transition-all duration-200 active:scale-[0.98]
+          bg-transparent border border-transparent hover:bg-white/[0.05] hover:border-white/[0.08]"
+      >
+        {/* Three-dot dropdown */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              onClick={(e) => e.stopPropagation()}
+              aria-label="Agent options"
+              className="absolute top-3 right-3 p-0.5 rounded-[6px] opacity-0 group-hover:opacity-60 hover:!opacity-100
+                transition-opacity bg-transparent border-none cursor-pointer text-text-3 hover:bg-white/[0.06]"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
+                <circle cx="12" cy="5" r="2" />
+                <circle cx="12" cy="12" r="2" />
+                <circle cx="12" cy="19" r="2" />
+              </svg>
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="min-w-[140px]">
+            <DropdownMenuItem onClick={handleClick}>Edit</DropdownMenuItem>
+            <DropdownMenuItem onClick={handleDuplicate}>Duplicate</DropdownMenuItem>
+            {!isDefault && onSetDefault && (
+              <DropdownMenuItem onClick={() => onSetDefault(agent.id)}>Set Default</DropdownMenuItem>
+            )}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={() => setConfirmDelete(true)}
+              className="text-red-400 focus:text-red-400"
+            >
+              Delete
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <div className="flex items-center gap-2.5">
+          <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{agent.name}</span>
+          {isDefault && (
+            <span className="shrink-0 text-[10px] font-600 uppercase tracking-wider text-accent-bright bg-accent-soft px-2 py-0.5 rounded-[6px]">
+              default
+            </span>
+          )}
+          {agent.isOrchestrator && (
+            <button
+              onClick={handleRunClick}
+              disabled={running}
+              className="shrink-0 text-[10px] font-600 uppercase tracking-wider px-2.5 py-1 rounded-[6px] cursor-pointer
+                transition-all border-none bg-[#6366F1]/20 text-[#818CF8] hover:bg-[#6366F1]/30 disabled:opacity-40"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {running ? '...' : 'Run'}
+            </button>
+          )}
+          {agent.isOrchestrator && (
+            <span className="shrink-0 text-[10px] font-600 uppercase tracking-wider text-amber-400/80 bg-amber-400/[0.08] px-2 py-0.5 rounded-[6px]">
+              orch
+            </span>
+          )}
+        </div>
+        <div className="text-[12px] text-text-3/70 mt-1.5 truncate">{agent.description}</div>
+        <div className="flex items-center gap-2 mt-1.5">
+          <span className="text-[11px] text-text-3/60 font-mono">{agent.model || agent.provider}</span>
+          {agent.tools?.includes('browser') && (
+            <span className="text-[10px] font-600 uppercase tracking-wider text-sky-400/70 bg-sky-400/[0.08] px-1.5 py-0.5 rounded-[5px]">
+              browser
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-3 mt-1.5 text-[11px] text-text-3/50">
+          {(agent as any).lastUsedAt ? (
+            <span>Last used: {(() => {
+              const days = Math.floor((Date.now() - (agent as any).lastUsedAt) / 86400000)
+              return days === 0 ? 'today' : `${days}d ago`
+            })()}</span>
+          ) : (agent as any).updatedAt ? (
+            <span>Updated: {(() => {
+              const days = Math.floor((Date.now() - agent.updatedAt) / 86400000)
+              return days === 0 ? 'today' : `${days}d ago`
+            })()}</span>
+          ) : null}
+          {(agent as any).totalCost != null && (agent as any).totalCost > 0 && (
+            <span>Cost: ${((agent as any).totalCost as number).toFixed(2)}</span>
+          )}
+        </div>
+      </div>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="sm:max-w-[420px]">
+          <DialogHeader>
+            <DialogTitle>Run Orchestrator</DialogTitle>
+          </DialogHeader>
+          <div className="py-3">
+            <label className="block text-[12px] font-600 text-text-3 mb-2">Task for {agent.name}</label>
+            <input
+              type="text"
+              value={taskInput}
+              onChange={(e) => setTaskInput(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') handleConfirmRun() }}
+              placeholder="Describe the task..."
+              autoFocus
+              className="w-full px-4 py-3 rounded-[12px] border border-white/[0.08] bg-surface text-text text-[14px] outline-none transition-all placeholder:text-text-3/50 focus:border-white/[0.15]"
+              style={{ fontFamily: 'inherit' }}
+            />
+          </div>
+          <DialogFooter>
+            <button
+              onClick={() => setDialogOpen(false)}
+              className="px-4 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-text-2 text-[13px] font-600 cursor-pointer hover:bg-surface-2 transition-all"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Cancel
+            </button>
+            <button
+              onClick={handleConfirmRun}
+              disabled={!taskInput.trim()}
+              className="px-4 py-2 rounded-[10px] border-none bg-[#6366F1] text-white text-[13px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Run
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmDialog
+        open={confirmDelete}
+        title="Delete Agent"
+        message={`Are you sure you want to delete "${agent.name}"? This cannot be undone.`}
+        confirmLabel="Delete"
+        danger
+        onConfirm={handleDelete}
+        onCancel={() => setConfirmDelete(false)}
+      />
+    </>
+  )
+}

package/src/components/agents/agent-chat-list.tsx

@@ -0,0 +1,165 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { useChatStore } from '@/stores/use-chat-store'
+import { fetchMessages } from '@/lib/sessions'
+import type { Agent, Session } from '@/types'
+
+interface Props {
+  inSidebar?: boolean
+  onSelect?: () => void
+}
+
+export function AgentChatList({ inSidebar, onSelect }: Props) {
+  const agents = useAppStore((s) => s.agents)
+  const sessions = useAppStore((s) => s.sessions)
+  const loadAgents = useAppStore((s) => s.loadAgents)
+  const currentAgentId = useAppStore((s) => s.currentAgentId)
+  const setCurrentAgent = useAppStore((s) => s.setCurrentAgent)
+  const setMessages = useChatStore((s) => s.setMessages)
+  const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
+  const tasks = useAppStore((s) => s.tasks)
+  const streamingSessionId = useChatStore((s) => s.streamingSessionId)
+  const [search, setSearch] = useState('')
+
+  useEffect(() => { loadAgents() }, [loadAgents])
+
+  // Build agent list sorted by last activity in their thread session
+  const sortedAgents = useMemo(() => {
+    return Object.values(agents)
+      .filter((a) => {
+        if (search && !a.name.toLowerCase().includes(search.toLowerCase())) return false
+        return true
+      })
+      .sort((a, b) => {
+        const aSession = a.threadSessionId ? sessions[a.threadSessionId] : null
+        const bSession = b.threadSessionId ? sessions[b.threadSessionId] : null
+        const aTime = (aSession as Session | null)?.lastActiveAt || a.updatedAt
+        const bTime = (bSession as Session | null)?.lastActiveAt || b.updatedAt
+        return bTime - aTime
+      })
+  }, [agents, sessions, search])
+
+  // Compute running tasks per agent
+  const runningAgentIds = useMemo(() => {
+    const set = new Set<string>()
+    for (const task of Object.values(tasks)) {
+      if (task.status === 'running' && task.agentId) set.add(task.agentId)
+    }
+    return set
+  }, [tasks])
+
+  const handleSelect = async (agent: Agent) => {
+    await setCurrentAgent(agent.id)
+    // Load messages for the thread
+    const state = useAppStore.getState()
+    if (state.currentSessionId) {
+      try {
+        const msgs = await fetchMessages(state.currentSessionId)
+        setMessages(msgs)
+      } catch { /* ignore */ }
+    }
+    onSelect?.()
+    // Delay scroll so React renders the new messages first
+    if (typeof window !== 'undefined') {
+      setTimeout(() => {
+        window.dispatchEvent(new CustomEvent('swarmclaw:scroll-bottom'))
+      }, 100)
+    }
+  }
+
+  if (!sortedAgents.length && !search) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center gap-4 text-text-3 p-8 text-center">
+        <div className="w-12 h-12 rounded-[14px] bg-accent-soft flex items-center justify-center mb-1">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright">
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+            <circle cx="12" cy="7" r="4" />
+          </svg>
+        </div>
+        <p className="font-display text-[15px] font-600 text-text-2">No agents yet</p>
+        <p className="text-[13px] text-text-3/50">Create agents to start chatting</p>
+        {!inSidebar && (
+          <button
+            onClick={() => setAgentSheetOpen(true)}
+            className="mt-3 px-8 py-3 rounded-[14px] border-none bg-[#6366F1] text-white
+              text-[14px] font-600 cursor-pointer active:scale-95 transition-all duration-200
+              shadow-[0_4px_16px_rgba(99,102,241,0.2)]"
+            style={{ fontFamily: 'inherit' }}
+          >
+            + New Agent
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto">
+      {(sortedAgents.length > 5 || search) && (
+        <div className="px-4 py-2.5">
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search agents..."
+            className="w-full px-4 py-2.5 rounded-[12px] border border-white/[0.04] bg-surface text-text
+              text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
+            style={{ fontFamily: 'inherit' }}
+          />
+        </div>
+      )}
+      <div className="flex flex-col gap-0.5 px-2 pb-4">
+        {sortedAgents.map((agent) => {
+          const threadSession = agent.threadSessionId ? sessions[agent.threadSessionId] as Session | undefined : undefined
+          const lastMsg = threadSession?.messages?.at(-1)
+          const isActive = currentAgentId === agent.id
+          const isWorking = runningAgentIds.has(agent.id) || (threadSession?.active ?? false) || (threadSession?.heartbeatEnabled ?? false)
+          const isTyping = streamingSessionId === agent.threadSessionId
+          const preview = lastMsg?.text?.slice(0, 80)?.replace(/\n/g, ' ') || ''
+
+          return (
+            <button
+              key={agent.id}
+              onClick={() => handleSelect(agent)}
+              className={`w-full text-left py-3 px-3.5 rounded-[12px] cursor-pointer transition-all duration-150 border-none
+                ${isActive
+                  ? 'bg-accent-soft/80 border border-accent-bright/20'
+                  : 'bg-transparent hover:bg-white/[0.02]'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              <div className="flex items-center gap-2.5">
+                {/* Status dot */}
+                <div className={`w-2 h-2 rounded-full shrink-0 ${
+                  isWorking ? 'bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.4)]' : 'bg-text-3/20'
+                }`} />
+                <span className="font-display text-[13.5px] font-600 truncate flex-1 tracking-[-0.01em]">
+                  {agent.name}
+                </span>
+                {/* Provider badge */}
+                <span className="text-[10px] text-text-3/60 font-mono shrink-0">
+                  {agent.model ? agent.model.split('/').pop()?.split(':')[0] : agent.provider}
+                </span>
+              </div>
+              {isTyping ? (
+                <div className="text-[12px] text-accent-bright/70 mt-1 pl-[18px] flex items-center gap-1.5">
+                  <span className="flex gap-0.5">
+                    <span className="w-1 h-1 rounded-full bg-accent-bright/70 animate-bounce [animation-delay:0ms]" />
+                    <span className="w-1 h-1 rounded-full bg-accent-bright/70 animate-bounce [animation-delay:150ms]" />
+                    <span className="w-1 h-1 rounded-full bg-accent-bright/70 animate-bounce [animation-delay:300ms]" />
+                  </span>
+                  Typing...
+                </div>
+              ) : preview ? (
+                <div className="text-[12px] text-text-3/70 mt-1 truncate pl-[18px]">
+                  {preview}
+                </div>
+              ) : null}
+            </button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}