@swarmclawai/swarmclaw 0.4.5 → 0.5.0

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

@@ -4,6 +4,8 @@ import { useEffect, useMemo, useState, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { AgentCard } from './agent-card'
+import { TrashList } from './trash-list'
+import { useApprovalStore } from '@/stores/use-approval-store'
 
 interface Props {
   inSidebar?: boolean
@@ -17,6 +19,11 @@ export function AgentList({ inSidebar }: Props) {
   const loadSessions = useAppStore((s) => s.loadSessions)
   const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
   const activeProjectFilter = useAppStore((s) => s.activeProjectFilter)
+  const showTrash = useAppStore((s) => s.showTrash)
+  const setShowTrash = useAppStore((s) => s.setShowTrash)
+  const fleetFilter = useAppStore((s) => s.fleetFilter)
+  const setFleetFilter = useAppStore((s) => s.setFleetFilter)
+  const approvals = useApprovalStore((s) => s.approvals)
   const [search, setSearch] = useState('')
   const [filter, setFilter] = useState<'all' | 'orchestrator' | 'agent'>('all')
 
@@ -36,6 +43,24 @@ export function AgentList({ inSidebar }: Props) {
 
   useEffect(() => { loadAgents() }, [])
 
+  // Compute which agents are "running" (have active sessions)
+  const runningAgentIds = useMemo(() => {
+    const ids = new Set<string>()
+    for (const s of Object.values(sessions)) {
+      if (s.agentId && s.active) ids.add(s.agentId)
+    }
+    return ids
+  }, [sessions])
+
+  // Approval counts per agent
+  const approvalsByAgent = useMemo(() => {
+    const counts: Record<string, number> = {}
+    for (const a of Object.values(approvals)) {
+      counts[a.agentId] = (counts[a.agentId] || 0) + 1
+    }
+    return counts
+  }, [approvals])
+
   const filtered = useMemo(() => {
     return Object.values(agents)
       .filter((p) => {
@@ -43,10 +68,34 @@ export function AgentList({ inSidebar }: Props) {
         if (filter === 'orchestrator' && !p.isOrchestrator) return false
         if (filter === 'agent' && p.isOrchestrator) return false
         if (activeProjectFilter && p.projectId !== activeProjectFilter) return false
+        // Fleet filter
+        if (fleetFilter === 'running' && !runningAgentIds.has(p.id)) return false
+        if (fleetFilter === 'approvals' && !(approvalsByAgent[p.id] > 0)) return false
         return true
       })
       .sort((a, b) => b.updatedAt - a.updatedAt)
-  }, [agents, search, filter, activeProjectFilter])
+  }, [agents, search, filter, activeProjectFilter, fleetFilter, runningAgentIds, approvalsByAgent])
+
+  if (showTrash) {
+    return (
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="px-4 py-2.5 flex items-center gap-2">
+          <button
+            onClick={() => setShowTrash(false)}
+            className="px-3 py-1.5 rounded-[8px] text-[12px] font-600 text-text-3 bg-transparent border-none cursor-pointer hover:text-text-2 transition-all flex items-center gap-1.5"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M19 12H5" /><polyline points="12 19 5 12 12 5" />
+            </svg>
+            Back to Agents
+          </button>
+          <span className="text-[13px] font-600 text-text-2">Trash</span>
+        </div>
+        <TrashList />
+      </div>
+    )
+  }
 
   if (!filtered.length && !search) {
     return (
@@ -89,7 +138,26 @@ export function AgentList({ inSidebar }: Props) {
           />
         </div>
       )}
-      <div className="flex gap-1 px-4 pb-2">
+      {/* Fleet filter: All / Running / Approvals */}
+      <div className="flex gap-1 px-4 pb-1 items-center">
+        {(['all', 'running', 'approvals'] as const).map((f) => {
+          const count = f === 'running' ? runningAgentIds.size
+            : f === 'approvals' ? Object.keys(approvalsByAgent).length
+            : null
+          return (
+            <button
+              key={f}
+              onClick={() => setFleetFilter(f)}
+              className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 capitalize cursor-pointer transition-all
+                ${fleetFilter === f ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {f}{count ? ` (${count})` : ''}
+            </button>
+          )
+        })}
+      </div>
+      <div className="flex gap-1 px-4 pb-2 items-center">
         {(['all', 'orchestrator', 'agent'] as const).map((f) => (
           <button
             key={f}
@@ -101,10 +169,21 @@ export function AgentList({ inSidebar }: Props) {
             {f}
           </button>
         ))}
+        <div className="flex-1" />
+        <button
+          onClick={() => setShowTrash(true)}
+          aria-label="View trash"
+          className="p-1.5 rounded-[6px] text-text-3/50 hover:text-text-3 bg-transparent border-none cursor-pointer transition-all hover:bg-white/[0.04]"
+        >
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <polyline points="3 6 5 6 21 6" />
+            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+          </svg>
+        </button>
       </div>
       <div className="flex flex-col gap-1 px-2 pb-4">
         {filtered.map((p) => (
-          <AgentCard key={p.id} agent={p} isDefault={p.id === defaultAgentId} onSetDefault={handleSetDefault} />
+          <AgentCard key={p.id} agent={p} isDefault={p.id === defaultAgentId} isRunning={runningAgentIds.has(p.id)} onSetDefault={handleSetDefault} />
         ))}
       </div>
     </div>

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

@@ -10,6 +10,7 @@ import { ModelCombobox } from '@/components/shared/model-combobox'
 import type { ProviderType, ClaudeSkill } from '@/types'
 import { AVAILABLE_TOOLS, PLATFORM_TOOLS } from '@/lib/tool-definitions'
 import { NATIVE_CAPABILITY_PROVIDER_IDS, NON_LANGGRAPH_PROVIDER_IDS } from '@/lib/provider-sets'
+import { AgentAvatar } from './agent-avatar'
 
 const HB_PRESETS = [30, 60, 120, 300, 600, 1800, 3600] as const
 
@@ -97,6 +98,7 @@ export function AgentSheet() {
   const [ollamaMode, setOllamaMode] = useState<'local' | 'cloud'>('local')
   const [openclawEnabled, setOpenclawEnabled] = useState(false)
   const [projectId, setProjectId] = useState<string | undefined>(undefined)
+  const [avatarSeed, setAvatarSeed] = useState('')
   const [thinkingLevel, setThinkingLevel] = useState<'' | 'minimal' | 'low' | 'medium' | 'high'>('')
   const [heartbeatEnabled, setHeartbeatEnabled] = useState(false)
   const [heartbeatIntervalSec, setHeartbeatIntervalSec] = useState('')  // '' = default (30m)
@@ -171,6 +173,7 @@ export function AgentSheet() {
         setOllamaMode(editing.credentialId && editing.provider === 'ollama' ? 'cloud' : 'local')
         setOpenclawEnabled(editing.provider === 'openclaw')
         setProjectId(editing.projectId)
+        setAvatarSeed(editing.avatarSeed || '')
         setThinkingLevel(editing.thinkingLevel || '')
         setHeartbeatEnabled(editing.heartbeatEnabled || false)
         setHeartbeatIntervalSec(parseDurationToSec(editing.heartbeatInterval, editing.heartbeatIntervalSec))
@@ -198,6 +201,7 @@ export function AgentSheet() {
         setOllamaMode('local')
         setOpenclawEnabled(false)
         setProjectId(undefined)
+        setAvatarSeed('')
         setThinkingLevel('')
         setHeartbeatEnabled(false)
         setHeartbeatIntervalSec('')
@@ -291,6 +295,7 @@ export function AgentSheet() {
       platformAssignScope,
       capabilities,
       projectId: projectId || undefined,
+      avatarSeed: avatarSeed.trim() || undefined,
       thinkingLevel: thinkingLevel || undefined,
       heartbeatEnabled,
       heartbeatInterval: heartbeatIntervalSec ? formatHbDuration(Number(heartbeatIntervalSec)) : null,
@@ -451,6 +456,29 @@ export function AgentSheet() {
         <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. SEO Researcher" className={inputClass} style={{ fontFamily: 'inherit' }} />
       </div>
 
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Avatar</label>
+        <div className="flex items-center gap-3">
+          <AgentAvatar seed={avatarSeed || null} name={name || 'A'} size={40} />
+          <input
+            type="text"
+            value={avatarSeed}
+            onChange={(e) => setAvatarSeed(e.target.value)}
+            placeholder="Avatar seed (any text)"
+            className={inputClass}
+            style={{ fontFamily: 'inherit', flex: 1 }}
+          />
+          <button
+            type="button"
+            onClick={() => setAvatarSeed(Math.random().toString(36).slice(2, 10))}
+            className="px-3 py-2 rounded-[10px] border border-white/[0.08] bg-transparent text-text-3 text-[12px] font-600 cursor-pointer transition-all hover:bg-white/[0.04] shrink-0"
+            style={{ fontFamily: 'inherit' }}
+          >
+            Randomize
+          </button>
+        </div>
+      </div>
+
       <div className="mb-8">
         <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Description</label>
         <input type="text" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="What does this agent do?" className={inputClass} style={{ fontFamily: 'inherit' }} />
@@ -867,6 +895,8 @@ export function AgentSheet() {
         </div>
       )}
 
+      {/* OpenClaw manages its own models — no selector needed */}
+
       {/* Ollama Mode Toggle */}
       {!openclawEnabled && provider === 'ollama' && (
         <div className="mb-8">
@@ -1351,3 +1381,4 @@ export function AgentSheet() {
     </BottomSheet>
   )
 }
+

package/src/components/agents/cron-job-form.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import { useState } from 'react'
+import type { GatewayCronJob } from '@/types'
+import { api } from '@/lib/api-client'
+
+interface Props {
+  agentId: string
+  onSaved: () => void
+  onCancel: () => void
+}
+
+export function CronJobForm({ agentId, onSaved, onCancel }: Props) {
+  const [name, setName] = useState('')
+  const [scheduleKind, setScheduleKind] = useState<'at' | 'every' | 'cron'>('every')
+  const [scheduleValue, setScheduleValue] = useState('1h')
+  const [timezone, setTimezone] = useState('')
+  const [payloadKind, setPayloadKind] = useState<'systemEvent' | 'agentTurn'>('agentTurn')
+  const [payloadText, setPayloadText] = useState('')
+  const [sessionTarget, setSessionTarget] = useState<'main' | 'isolated'>('main')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+
+  const handleSave = async () => {
+    if (!name.trim()) return
+    setSaving(true)
+    setError('')
+
+    const job: Partial<GatewayCronJob> = {
+      name: name.trim(),
+      agentId,
+      enabled: true,
+      schedule: { kind: scheduleKind, value: scheduleValue, timezone: timezone || undefined },
+      payload: {
+        kind: payloadKind,
+        ...(payloadKind === 'agentTurn' ? { message: payloadText } : { text: payloadText }),
+      },
+      sessionTarget,
+    }
+
+    try {
+      await api('POST', '/openclaw/cron', { action: 'add', job })
+      onSaved()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to create')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const inputClass = 'w-full px-3 py-2 rounded-[10px] border border-white/[0.06] bg-black/20 text-[13px] text-text outline-none placeholder:text-text-3/40 focus:border-white/[0.12] transition-colors'
+
+  return (
+    <div className="flex flex-col gap-3 p-4 border border-white/[0.06] rounded-[12px] bg-white/[0.02]">
+      <div>
+        <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Name</label>
+        <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Job name" className={inputClass} />
+      </div>
+
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Schedule Type</label>
+          <select value={scheduleKind} onChange={(e) => setScheduleKind(e.target.value as typeof scheduleKind)} className={inputClass}>
+            <option value="every">Every (interval)</option>
+            <option value="at">At (specific time)</option>
+            <option value="cron">Cron expression</option>
+          </select>
+        </div>
+        <div>
+          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Value</label>
+          <input
+            type="text"
+            value={scheduleValue}
+            onChange={(e) => setScheduleValue(e.target.value)}
+            placeholder={scheduleKind === 'cron' ? '0 */6 * * *' : scheduleKind === 'at' ? '09:00' : '1h'}
+            className={inputClass}
+          />
+        </div>
+      </div>
+
+      {scheduleKind !== 'every' && (
+        <div>
+          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Timezone</label>
+          <input type="text" value={timezone} onChange={(e) => setTimezone(e.target.value)} placeholder="America/New_York" className={inputClass} />
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Payload</label>
+          <select value={payloadKind} onChange={(e) => setPayloadKind(e.target.value as typeof payloadKind)} className={inputClass}>
+            <option value="agentTurn">Agent Turn</option>
+            <option value="systemEvent">System Event</option>
+          </select>
+        </div>
+        <div>
+          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Session</label>
+          <select value={sessionTarget} onChange={(e) => setSessionTarget(e.target.value as typeof sessionTarget)} className={inputClass}>
+            <option value="main">Main session</option>
+            <option value="isolated">Isolated session</option>
+          </select>
+        </div>
+      </div>
+
+      <div>
+        <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-1">Message / Text</label>
+        <textarea
+          value={payloadText}
+          onChange={(e) => setPayloadText(e.target.value)}
+          placeholder="Message to send..."
+          rows={2}
+          className={`${inputClass} resize-none`}
+        />
+      </div>
+
+      {error && <p className="text-[12px] text-red-400">{error}</p>}
+
+      <div className="flex gap-2 justify-end">
+        <button
+          onClick={onCancel}
+          className="px-3 py-1.5 rounded-[8px] border border-white/[0.08] bg-transparent text-text-3 text-[12px] font-600 cursor-pointer transition-all hover:bg-white/[0.04]"
+          style={{ fontFamily: 'inherit' }}
+        >
+          Cancel
+        </button>
+        <button
+          onClick={handleSave}
+          disabled={saving || !name.trim()}
+          className="px-4 py-1.5 rounded-[8px] border-none bg-accent-bright text-white text-[12px] font-600 cursor-pointer disabled:opacity-30 transition-all hover:brightness-110"
+          style={{ fontFamily: 'inherit' }}
+        >
+          {saving ? 'Creating...' : 'Create'}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/agents/exec-config-panel.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { api } from '@/lib/api-client'
+import type { ExecApprovalConfig, ExecApprovalSnapshot } from '@/types'
+
+interface Props {
+  agentId: string
+}
+
+export function ExecConfigPanel({ agentId }: Props) {
+  const [config, setConfig] = useState<ExecApprovalConfig>({ security: 'deny', askMode: 'off', patterns: [] })
+  const [hash, setHash] = useState('')
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [newPattern, setNewPattern] = useState('')
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError('')
+    try {
+      const snap = await api<ExecApprovalSnapshot>('GET', `/openclaw/exec-config?agentId=${agentId}`)
+      setConfig(snap.file)
+      setHash(snap.hash)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load')
+    } finally {
+      setLoading(false)
+    }
+  }, [agentId])
+
+  useEffect(() => { load() }, [load])
+
+  const save = async (patch: Partial<ExecApprovalConfig>) => {
+    const updated = { ...config, ...patch }
+    setConfig(updated)
+    setSaving(true)
+    setError('')
+    try {
+      const result = await api<{ ok: boolean; hash: string }>('PUT', '/openclaw/exec-config', {
+        agentId,
+        config: updated,
+        baseHash: hash,
+      })
+      setHash(result.hash)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Save failed')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const addPattern = () => {
+    const p = newPattern.trim()
+    if (!p || config.patterns.includes(p)) return
+    save({ patterns: [...config.patterns, p] })
+    setNewPattern('')
+  }
+
+  const removePattern = (idx: number) => {
+    save({ patterns: config.patterns.filter((_, i) => i !== idx) })
+  }
+
+  if (loading) return <div className="p-4 text-[13px] text-text-3/50">Loading exec config...</div>
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* Security Level */}
+      <div>
+        <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-2">Security Level</label>
+        <select
+          value={config.security}
+          onChange={(e) => save({ security: e.target.value as ExecApprovalConfig['security'] })}
+          disabled={saving}
+          className="w-full px-3 py-2 rounded-[10px] border border-white/[0.06] bg-black/20 text-[13px] text-text outline-none"
+        >
+          <option value="deny">Deny (block all)</option>
+          <option value="allowlist">Allowlist (matched patterns only)</option>
+          <option value="full">Full (allow all)</option>
+        </select>
+      </div>
+
+      {/* Ask Mode */}
+      <div>
+        <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-2">Ask Mode</label>
+        <select
+          value={config.askMode}
+          onChange={(e) => save({ askMode: e.target.value as ExecApprovalConfig['askMode'] })}
+          disabled={saving}
+          className="w-full px-3 py-2 rounded-[10px] border border-white/[0.06] bg-black/20 text-[13px] text-text outline-none"
+        >
+          <option value="off">Off</option>
+          <option value="on-miss">On miss (ask when no pattern matches)</option>
+          <option value="always">Always ask</option>
+        </select>
+      </div>
+
+      {/* Patterns */}
+      {config.security === 'allowlist' && (
+        <div>
+          <label className="block text-[11px] font-600 uppercase tracking-wider text-text-3/50 mb-2">
+            Allowed Patterns
+          </label>
+          <div className="flex flex-col gap-1 mb-2">
+            {config.patterns.map((p, i) => (
+              <div key={i} className="flex items-center gap-2 py-1 px-2 rounded-[8px] bg-white/[0.02] border border-white/[0.04]">
+                <span className="text-[12px] text-text font-mono truncate flex-1">{p}</span>
+                <button
+                  onClick={() => removePattern(i)}
+                  disabled={saving}
+                  className="text-red-400/60 hover:text-red-400 text-[10px] bg-transparent border-none cursor-pointer"
+                >
+                  Remove
+                </button>
+              </div>
+            ))}
+            {!config.patterns.length && (
+              <span className="text-[12px] text-text-3/40">No patterns configured</span>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={newPattern}
+              onChange={(e) => setNewPattern(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && addPattern()}
+              placeholder="e.g. npm run *"
+              className="flex-1 px-3 py-1.5 rounded-[8px] border border-white/[0.06] bg-black/20 text-[12px] text-text font-mono outline-none placeholder:text-text-3/40"
+            />
+            <button
+              onClick={addPattern}
+              disabled={saving || !newPattern.trim()}
+              className="px-3 py-1.5 rounded-[8px] border-none bg-accent-bright text-white text-[11px] font-600 cursor-pointer disabled:opacity-30 transition-all"
+              style={{ fontFamily: 'inherit' }}
+            >
+              Add
+            </button>
+          </div>
+        </div>
+      )}
+
+      {error && <p className="text-[12px] text-red-400">{error}</p>}
+      {saving && <p className="text-[11px] text-text-3/50">Saving...</p>}
+    </div>
+  )
+}