@swarmclawai/swarmclaw 0.4.0 → 0.5.0

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

@@ -5,6 +5,7 @@ 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'
+import { AgentAvatar } from './agent-avatar'
 
 interface Props {
   inSidebar?: boolean
@@ -130,32 +131,38 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
               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...
+                {/* Avatar with status dot */}
+                <div className="relative shrink-0">
+                  <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={36} />
+                  <div className={`absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-bg ${
+                    isWorking ? 'bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.4)]' : 'bg-text-3/30'
+                  }`} />
                 </div>
-              ) : preview ? (
-                <div className="text-[12px] text-text-3/70 mt-1 truncate pl-[18px]">
-                  {preview}
+                <div className="flex flex-col flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="font-display text-[13.5px] font-600 truncate flex-1 tracking-[-0.01em]">
+                      {agent.name}
+                    </span>
+                    <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-0.5 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-0.5 truncate">
+                      {preview}
+                    </div>
+                  ) : null}
                 </div>
-              ) : null}
+              </div>
             </button>
           )
         })}

package/src/components/agents/agent-files-editor.tsx

@@ -0,0 +1,185 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { api } from '@/lib/api-client'
+import { PersonalityBuilder } from './personality-builder'
+
+const FILES = ['SOUL.md', 'IDENTITY.md', 'USER.md', 'TOOLS.md', 'HEARTBEAT.md', 'MEMORY.md', 'AGENTS.md'] as const
+const GUIDED_FILES = new Set(['SOUL.md', 'IDENTITY.md', 'USER.md'])
+
+interface FileState {
+  content: string
+  original: string
+  loading: boolean
+  saving: boolean
+  error?: string
+}
+
+interface Props {
+  agentId: string
+}
+
+export function AgentFilesEditor({ agentId }: Props) {
+  const [activeTab, setActiveTab] = useState<string>(FILES[0])
+  const [files, setFiles] = useState<Record<string, FileState>>({})
+  const [guidedMode, setGuidedMode] = useState(false)
+
+  const loadFiles = useCallback(async () => {
+    const initial: Record<string, FileState> = {}
+    for (const f of FILES) {
+      initial[f] = { content: '', original: '', loading: true, saving: false }
+    }
+    setFiles(initial)
+
+    try {
+      const result = await api<Record<string, { content: string; error?: string }>>('GET', `/openclaw/agent-files?agentId=${agentId}`)
+      setFiles((prev) => {
+        const next = { ...prev }
+        for (const [name, data] of Object.entries(result)) {
+          next[name] = {
+            content: data.content,
+            original: data.content,
+            loading: false,
+            saving: false,
+            error: data.error,
+          }
+        }
+        return next
+      })
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      setFiles((prev) => {
+        const next = { ...prev }
+        for (const f of FILES) {
+          next[f] = { ...next[f], loading: false, error: message }
+        }
+        return next
+      })
+    }
+  }, [agentId])
+
+  useEffect(() => { loadFiles() }, [loadFiles])
+
+  const handleContentChange = (filename: string, content: string) => {
+    setFiles((prev) => ({
+      ...prev,
+      [filename]: { ...prev[filename], content },
+    }))
+  }
+
+  const handleSave = async (filename: string) => {
+    const file = files[filename]
+    if (!file || file.content === file.original) return
+
+    setFiles((prev) => ({
+      ...prev,
+      [filename]: { ...prev[filename], saving: true, error: undefined },
+    }))
+
+    try {
+      await api('PUT', '/openclaw/agent-files', { agentId, filename, content: file.content })
+      setFiles((prev) => ({
+        ...prev,
+        [filename]: { ...prev[filename], saving: false, original: prev[filename].content },
+      }))
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      setFiles((prev) => ({
+        ...prev,
+        [filename]: { ...prev[filename], saving: false, error: message },
+      }))
+    }
+  }
+
+  const handleGuidedSave = (content: string) => {
+    handleContentChange(activeTab, content)
+  }
+
+  const current = files[activeTab]
+  const isDirty = current && current.content !== current.original
+  const showGuided = guidedMode && GUIDED_FILES.has(activeTab)
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Tab bar */}
+      <div className="flex gap-0.5 px-2 pt-2 pb-1 overflow-x-auto shrink-0">
+        {FILES.map((f) => {
+          const fileState = files[f]
+          const dirty = fileState && fileState.content !== fileState.original
+          return (
+            <button
+              key={f}
+              onClick={() => setActiveTab(f)}
+              className={`px-2.5 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all whitespace-nowrap
+                ${activeTab === f
+                  ? 'bg-accent-soft text-accent-bright'
+                  : 'bg-transparent text-text-3 hover:text-text-2'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {f.replace('.md', '')}
+              {dirty && <span className="ml-1 text-amber-400">*</span>}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Guided toggle for personality files */}
+      {GUIDED_FILES.has(activeTab) && (
+        <div className="px-3 py-1 shrink-0">
+          <button
+            onClick={() => setGuidedMode(!guidedMode)}
+            className={`text-[10px] font-600 px-2 py-0.5 rounded-[6px] cursor-pointer transition-all border-none
+              ${guidedMode ? 'bg-accent-soft text-accent-bright' : 'bg-white/[0.04] text-text-3 hover:text-text-2'}`}
+            style={{ fontFamily: 'inherit' }}
+          >
+            {guidedMode ? 'Raw Editor' : 'Guided Editor'}
+          </button>
+        </div>
+      )}
+
+      {/* Editor area */}
+      <div className="flex-1 min-h-0 px-2 pb-2 overflow-y-auto">
+        {current?.loading ? (
+          <div className="flex items-center justify-center h-full text-[13px] text-text-3/50">Loading...</div>
+        ) : current?.error ? (
+          <div className="flex items-center justify-center h-full text-[13px] text-red-400">{current.error}</div>
+        ) : showGuided ? (
+          <div className="p-2">
+            <PersonalityBuilder
+              agentId={agentId}
+              fileType={activeTab as 'IDENTITY.md' | 'USER.md' | 'SOUL.md'}
+              content={current?.content ?? ''}
+              onSave={handleGuidedSave}
+            />
+          </div>
+        ) : (
+          <textarea
+            value={current?.content ?? ''}
+            onChange={(e) => handleContentChange(activeTab, e.target.value)}
+            className="w-full h-full resize-none rounded-[10px] border border-white/[0.06] bg-black/20 px-3 py-2.5
+              text-[13px] text-text font-mono leading-relaxed outline-none
+              placeholder:text-text-3/40 focus:border-white/[0.12] transition-colors"
+            placeholder={`${activeTab} content...`}
+            style={{ fontFamily: 'ui-monospace, monospace' }}
+          />
+        )}
+      </div>
+
+      {/* Save bar */}
+      <div className="shrink-0 px-3 pb-2 flex items-center gap-2">
+        <button
+          onClick={() => handleSave(activeTab)}
+          disabled={!isDirty || current?.saving}
+          className="px-4 py-1.5 rounded-[8px] border-none bg-accent-bright text-white text-[12px] font-600
+            cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed transition-all hover:brightness-110"
+          style={{ fontFamily: 'inherit' }}
+        >
+          {current?.saving ? 'Saving...' : 'Save'}
+        </button>
+        {isDirty && (
+          <span className="text-[11px] text-amber-400/70">Unsaved changes</span>
+        )}
+      </div>
+    </div>
+  )
+}

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
@@ -16,6 +18,12 @@ export function AgentList({ inSidebar }: Props) {
   const currentUser = useAppStore((s) => s.currentUser)
   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')
 
@@ -35,16 +43,59 @@ 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) => {
         if (search && !p.name.toLowerCase().includes(search.toLowerCase())) return false
         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])
+  }, [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 (
@@ -87,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}
@@ -99,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

@@ -9,8 +9,43 @@ import { toast } from 'sonner'
 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 NATIVE_CAPABILITY_PROVIDER_IDS = new Set<ProviderType>(['claude-cli', 'codex-cli', 'opencode-cli', 'openclaw'])
+const HB_PRESETS = [30, 60, 120, 300, 600, 1800, 3600] as const
+
+function formatHbDuration(sec: number): string {
+  if (sec >= 3600) {
+    const h = Math.floor(sec / 3600)
+    const m = Math.floor((sec % 3600) / 60)
+    return m > 0 ? `${h}h${m}m` : `${h}h`
+  }
+  if (sec >= 60) return `${Math.floor(sec / 60)}m`
+  return `${sec}s`
+}
+
+/** Parse a stored heartbeatInterval string or heartbeatIntervalSec number to a select-friendly string of seconds */
+function parseDurationToSec(interval: string | number | null | undefined, intervalSec: number | null | undefined): string {
+  if (intervalSec != null && Number.isFinite(intervalSec) && intervalSec > 0) {
+    // Snap to nearest preset if close, otherwise use raw value
+    const closest = HB_PRESETS.find((p) => p === Math.round(intervalSec))
+    if (closest) return String(closest)
+  }
+  if (typeof interval === 'number' && Number.isFinite(interval) && interval > 0) {
+    return String(Math.round(interval))
+  }
+  if (interval != null && typeof interval === 'string' && interval.trim()) {
+    const t = interval.trim().toLowerCase()
+    const n = Number(t)
+    if (Number.isFinite(n) && n > 0) return String(Math.round(n))
+    const m = t.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s?)?$/)
+    if (m && (m[1] || m[2] || m[3])) {
+      const total = (m[1] ? parseInt(m[1]) * 3600 : 0) + (m[2] ? parseInt(m[2]) * 60 : 0) + (m[3] ? parseInt(m[3]) : 0)
+      if (total > 0) return String(total)
+    }
+  }
+  return '' // default
+}
 
 export function AgentSheet() {
   const open = useAppStore((s) => s.agentSheetOpen)
@@ -19,6 +54,8 @@ export function AgentSheet() {
   const setEditingId = useAppStore((s) => s.setEditingAgentId)
   const agents = useAppStore((s) => s.agents)
   const loadAgents = useAppStore((s) => s.loadAgents)
+  const projects = useAppStore((s) => s.projects)
+  const loadProjects = useAppStore((s) => s.loadProjects)
   const providers = useAppStore((s) => s.providers)
   const loadProviders = useAppStore((s) => s.loadProviders)
   const credentials = useAppStore((s) => s.credentials)
@@ -60,9 +97,13 @@ export function AgentSheet() {
   const [capInput, setCapInput] = useState('')
   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 [heartbeatInterval, setHeartbeatInterval] = useState('')
+  const [heartbeatIntervalSec, setHeartbeatIntervalSec] = useState('')  // '' = default (30m)
   const [heartbeatModel, setHeartbeatModel] = useState('')
+  const [heartbeatPrompt, setHeartbeatPrompt] = useState('')
   const [addingKey, setAddingKey] = useState(false)
   const [newKeyName, setNewKeyName] = useState('')
   const [newKeyValue, setNewKeyValue] = useState('')
@@ -105,6 +146,7 @@ export function AgentSheet() {
       loadProviders()
       loadCredentials()
       loadSkills()
+      loadProjects()
       loadClaudeSkills()
       setTestStatus('idle')
       setTestMessage('')
@@ -130,9 +172,13 @@ export function AgentSheet() {
         setCapInput('')
         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)
-        setHeartbeatInterval(editing.heartbeatInterval != null ? String(editing.heartbeatInterval) : '')
+        setHeartbeatIntervalSec(parseDurationToSec(editing.heartbeatInterval, editing.heartbeatIntervalSec))
         setHeartbeatModel(editing.heartbeatModel || '')
+        setHeartbeatPrompt(editing.heartbeatPrompt || '')
       } else {
         setName('')
         setDescription('')
@@ -154,9 +200,13 @@ export function AgentSheet() {
         setCapInput('')
         setOllamaMode('local')
         setOpenclawEnabled(false)
+        setProjectId(undefined)
+        setAvatarSeed('')
+        setThinkingLevel('')
         setHeartbeatEnabled(false)
-        setHeartbeatInterval('')
+        setHeartbeatIntervalSec('')
         setHeartbeatModel('')
+        setHeartbeatPrompt('')
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -244,9 +294,14 @@ export function AgentSheet() {
       fallbackCredentialIds,
       platformAssignScope,
       capabilities,
+      projectId: projectId || undefined,
+      avatarSeed: avatarSeed.trim() || undefined,
+      thinkingLevel: thinkingLevel || undefined,
       heartbeatEnabled,
-      heartbeatInterval: heartbeatInterval.trim() || null,
+      heartbeatInterval: heartbeatIntervalSec ? formatHbDuration(Number(heartbeatIntervalSec)) : null,
+      heartbeatIntervalSec: heartbeatIntervalSec ? Number(heartbeatIntervalSec) : null,
       heartbeatModel: heartbeatModel.trim() || null,
+      heartbeatPrompt: heartbeatPrompt.trim() || null,
     }
     if (editing) {
       await updateAgent(editing.id, data)
@@ -330,8 +385,7 @@ export function AgentSheet() {
 
   // Whether this provider needs a connection test before saving.
   // Only CLI providers (no remote connection) skip the test.
-  const CLI_ONLY_PROVIDERS: Set<ProviderType> = new Set(['claude-cli', 'codex-cli', 'opencode-cli'])
-  const needsTest = !providerNeedsKey && !CLI_ONLY_PROVIDERS.has(provider)
+  const needsTest = !providerNeedsKey && !NON_LANGGRAPH_PROVIDER_IDS.has(provider)
 
   const [saving, setSaving] = useState(false)
 
@@ -402,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' }} />
@@ -451,6 +528,46 @@ export function AgentSheet() {
         <p className="text-[11px] text-text-3/70 mt-1.5">Press Enter or comma to add. Other agents see these when deciding delegation.</p>
       </div>}
 
+      {/* Project */}
+      {Object.keys(projects).length > 0 && (
+        <div className="mb-8">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+            Project <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+          </label>
+          <select
+            value={projectId || ''}
+            onChange={(e) => setProjectId(e.target.value || undefined)}
+            className={inputClass}
+            style={{ fontFamily: 'inherit' }}
+          >
+            <option value="">None</option>
+            {Object.values(projects).map((p) => (
+              <option key={p.id} value={p.id}>{p.name}</option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {/* Thinking Level */}
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
+          Thinking Level <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+        </label>
+        <select
+          value={thinkingLevel}
+          onChange={(e) => setThinkingLevel(e.target.value as typeof thinkingLevel)}
+          className={inputClass}
+          style={{ fontFamily: 'inherit' }}
+        >
+          <option value="">None (default)</option>
+          <option value="minimal">Minimal — Direct and concise</option>
+          <option value="low">Low — Brief reasoning</option>
+          <option value="medium">Medium — Moderate analysis</option>
+          <option value="high">High — Deep, thorough reasoning</option>
+        </select>
+        <p className="text-[11px] text-text-3/70 mt-1.5">Controls reasoning depth. Anthropic models use extended thinking; OpenAI o-series uses reasoning_effort. Others get system prompt guidance.</p>
+      </div>
+
       {/* Heartbeat Configuration */}
       <div className="mb-8">
         <div className="flex items-center justify-between mb-3">
@@ -467,14 +584,16 @@ export function AgentSheet() {
           <div className="space-y-4 mt-3">
             <div>
               <label className="block text-[12px] text-text-3/70 mb-1.5">Interval</label>
-              <input
-                type="text"
-                value={heartbeatInterval}
-                onChange={(e) => setHeartbeatInterval(e.target.value)}
-                placeholder="30s, 5m, 1h (default: 30m)"
+              <select
+                value={heartbeatIntervalSec}
+                onChange={(e) => setHeartbeatIntervalSec(e.target.value)}
                 className={inputClass}
-                style={{ fontFamily: 'inherit' }}
-              />
+              >
+                <option value="">Default (30m)</option>
+                {HB_PRESETS.map((sec) => (
+                  <option key={sec} value={String(sec)}>{formatHbDuration(sec)}</option>
+                ))}
+              </select>
             </div>
             <div>
               <label className="block text-[12px] text-text-3/70 mb-1.5">Model override <span className="text-text-3/50">(optional, cheaper model)</span></label>
@@ -487,6 +606,17 @@ export function AgentSheet() {
                 style={{ fontFamily: 'inherit' }}
               />
             </div>
+            <div>
+              <label className="block text-[12px] text-text-3/70 mb-1.5">Instructions <span className="text-text-3/50">(what to do each tick)</span></label>
+              <textarea
+                value={heartbeatPrompt}
+                onChange={(e) => setHeartbeatPrompt(e.target.value)}
+                placeholder="Describe what this agent should do during heartbeat ticks..."
+                rows={4}
+                className={`${inputClass} resize-y min-h-[100px]`}
+                style={{ fontFamily: 'inherit' }}
+              />
+            </div>
           </div>
         )}
         <p className="text-[11px] text-text-3/70 mt-1.5">Periodic check-in runs on idle sessions using this agent. Processes pending events and monitors status.</p>
@@ -765,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">
@@ -1249,3 +1381,4 @@ export function AgentSheet() {
     </BottomSheet>
   )
 }
+