@swarmclawai/swarmclaw 0.7.7 → 0.7.8

package/README.md

@@ -148,7 +148,7 @@ curl -fsSL https://raw.githubusercontent.com/swarmclawai/swarmclaw/main/install.
 ```
 
 The installer resolves the latest stable release tag and installs that version by default.
-To pin a version: `SWARMCLAW_VERSION=v0.7.7 curl ... | bash`
+To pin a version: `SWARMCLAW_VERSION=v0.7.8 curl ... | bash`
 
 Or run locally from the repo (friendly for non-technical users):
 
@@ -701,7 +701,7 @@ npm run update:easy     # safe update helper for local installs
 SwarmClaw uses tag-based releases (`vX.Y.Z`) as the stable channel.
 
 ```bash
-# example patch release (v0.7.7 style)
+# example patch release (v0.7.8 style)
 npm version patch
 git push origin main --follow-tags
 ```
@@ -711,15 +711,16 @@ On `v*` tags, GitHub Actions will:
 2. Create a GitHub Release
 3. Build and publish Docker images to `ghcr.io/swarmclawai/swarmclaw` (`:vX.Y.Z`, `:latest`, `:sha-*`)
 
-#### v0.7.7 Release Readiness Notes
+#### v0.7.8 Release Readiness Notes
 
-Before shipping `v0.7.7`, confirm the following user-facing changes are reflected in docs:
+Before shipping `v0.7.8`, confirm the following user-facing changes are reflected in docs:
 
-1. OpenClaw docs cover Smart Deploy end-to-end: onboarding, Providers, gateway editor, official-only SSH/VPS flows, safe exposure presets, and restore/backup lifecycle controls.
-2. Agent and provider docs explain gateway routing by tags/use-case, richer external runtime visibility, and import/export/clone flows for saved gateways.
-3. Site and README install/version strings are updated to `v0.7.7`, including install snippets, release notes index text, and sidebar/footer labels.
-4. Release notes summarize the user-visible operator changes from the current worktree, especially SSH deploy, remote lifecycle controls, routing preferences, and onboarding persistence.
-5. CLI docs include the expanded `openclaw deploy-*`, `openclaw remote-*`, and verify surfaces and do not reference removed or unofficial deployment paths.
+1. Project docs explain the new project operating-system fields: objective, audience, pilot priorities, open objectives, credential requirements, success metrics, and heartbeat prompt/interval.
+2. Task and approval docs cover the new approval controls, task/project management toggles, and durable task continuation behavior (`continueFromTaskId`, dependency blocking, and session resume reuse).
+3. Connector/operator docs mention automatic connector recovery on disconnect or dev-server restart, including bounded exponential backoff instead of silent disablement.
+4. Chat/runtime docs note the project-aware agent context, Gemini resume-handle visibility, and improved web/connector input handling where relevant.
+5. Site and README install/version strings are updated to `v0.7.8`, including install snippets, release notes index text, and sidebar/footer labels.
+6. Release notes summarize the user-visible changes from the current worktree, especially project operating context, approval/task controls, connector resilience, and chat/runtime polish.
 
 ## CLI
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swarmclawai/swarmclaw",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "description": "Self-hosted AI agent orchestration dashboard — manage LLM providers, orchestrate agent swarms, schedule tasks, and bridge agents to chat platforms.",
   "license": "MIT",
   "publishConfig": {

package/src/app/api/chats/route.ts

@@ -101,6 +101,7 @@ export async function POST(req: Request) {
       claudeCode: null,
       codex: null,
       opencode: null,
+      gemini: null,
     },
     messages: Array.isArray(body.messages) ? body.messages : [],
     createdAt: Date.now(), lastActiveAt: Date.now(),

package/src/app/api/connectors/[id]/route.ts

@@ -2,8 +2,10 @@ import { NextResponse } from 'next/server'
 import { loadConnectors, saveConnectors, logActivity } from '@/lib/server/storage'
 import { notify } from '@/lib/server/ws-hub'
 import { notFound } from '@/lib/server/collection-helpers'
+import { ensureDaemonStarted } from '@/lib/server/daemon-state'
 
 export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
+  ensureDaemonStarted('api/connectors/[id]:get')
   const { id } = await params
   const connectors = loadConnectors()
   const connector = connectors[id]
@@ -11,8 +13,21 @@ export async function GET(_req: Request, { params }: { params: Promise<{ id: str
 
   // Merge runtime status, QR code, and presence
   try {
-    const { getConnectorStatus, getConnectorQR, isConnectorAuthenticated, hasConnectorCredentials, getConnectorPresence } = await import('@/lib/server/connectors/manager')
-    connector.status = getConnectorStatus(id)
+    const { getConnectorStatus, getConnectorQR, isConnectorAuthenticated, hasConnectorCredentials, getConnectorPresence, getReconnectState } = await import('@/lib/server/connectors/manager')
+    const runtimeStatus = getConnectorStatus(id)
+    connector.status = runtimeStatus === 'running'
+      ? 'running'
+      : connector.lastError
+        ? 'error'
+        : 'stopped'
+    const rState = getReconnectState(id)
+    if (rState) {
+      const ext = connector as unknown as Record<string, unknown>
+      ext.reconnectAttempts = rState.attempts
+      ext.nextRetryAt = rState.nextRetryAt
+      ext.reconnectError = rState.error
+      ext.reconnectExhausted = rState.exhausted
+    }
     const qr = getConnectorQR(id)
     if (qr) connector.qrDataUrl = qr
     connector.authenticated = isConnectorAuthenticated(id)
@@ -26,6 +41,7 @@ export async function GET(_req: Request, { params }: { params: Promise<{ id: str
 }
 
 export async function PUT(req: Request, { params }: { params: Promise<{ id: string }> }) {
+  ensureDaemonStarted('api/connectors/[id]:put')
   const { id } = await params
   const body = await req.json()
   const connectors = loadConnectors()
@@ -38,12 +54,14 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
     try {
       const manager = await import('@/lib/server/connectors/manager')
       if (body.action === 'start') {
+        manager.clearReconnectState(id)
         await manager.startConnector(id)
         logActivity({ entityType: 'connector', entityId: id, action: 'started', actor: 'user', summary: `Connector started: "${connector.name}"` })
       } else if (body.action === 'stop') {
         await manager.stopConnector(id)
         logActivity({ entityType: 'connector', entityId: id, action: 'stopped', actor: 'user', summary: `Connector stopped: "${connector.name}"` })
       } else {
+        manager.clearReconnectState(id)
         await manager.repairConnector(id)
         logActivity({ entityType: 'connector', entityId: id, action: 'started', actor: 'user', summary: `Connector repaired: "${connector.name}"` })
       }

package/src/app/api/connectors/route.ts

@@ -2,19 +2,26 @@ import { NextResponse } from 'next/server'
 import { genId } from '@/lib/id'
 import { loadConnectors, saveConnectors } from '@/lib/server/storage'
 import { notify } from '@/lib/server/ws-hub'
+import { ensureDaemonStarted } from '@/lib/server/daemon-state'
 import { ConnectorCreateSchema, formatZodError } from '@/lib/validation/schemas'
 import { z } from 'zod'
 import type { Connector } from '@/types'
 export const dynamic = 'force-dynamic'
 
 
-export async function GET(_req: Request) {
+export async function GET() {
+  ensureDaemonStarted('api/connectors:get')
   const connectors = loadConnectors()
   // Merge runtime status from manager
   try {
     const { getConnectorStatus, isConnectorAuthenticated, hasConnectorCredentials, getConnectorQR, getReconnectState } = await import('@/lib/server/connectors/manager')
     for (const c of Object.values(connectors) as Connector[]) {
-      c.status = getConnectorStatus(c.id)
+      const runtimeStatus = getConnectorStatus(c.id)
+      c.status = runtimeStatus === 'running'
+        ? 'running'
+        : c.lastError
+          ? 'error'
+          : 'stopped'
       if (c.platform === 'whatsapp') {
         c.authenticated = isConnectorAuthenticated(c.id)
         c.hasCredentials = hasConnectorCredentials(c.id)
@@ -28,6 +35,7 @@ export async function GET(_req: Request) {
         ext.reconnectAttempts = rState.attempts
         ext.nextRetryAt = rState.nextRetryAt
         ext.reconnectError = rState.error
+        ext.reconnectExhausted = rState.exhausted
       }
     }
   } catch { /* manager not loaded yet */ }
@@ -35,6 +43,7 @@ export async function GET(_req: Request) {
 }
 
 export async function POST(req: Request) {
+  ensureDaemonStarted('api/connectors:post')
   const raw = await req.json()
   const parsed = ConnectorCreateSchema.safeParse(raw)
   if (!parsed.success) {
@@ -72,13 +81,8 @@ export async function POST(req: Request) {
     try {
       const { startConnector } = await import('@/lib/server/connectors/manager')
       await startConnector(id)
-      connector.isEnabled = true
-      connector.status = 'running'
-      connectors[id] = connector
-      saveConnectors(connectors)
-      notify('connectors')
     } catch { /* auto-start is best-effort */ }
   }
 
-  return NextResponse.json(connector)
+  return NextResponse.json(loadConnectors()[id] || connector)
 }

package/src/app/api/projects/[id]/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from 'next/server'
-import { loadProjects, saveProjects, deleteProject, loadAgents, saveAgents, loadTasks, saveTasks, loadSchedules, saveSchedules, loadSkills, saveSkills } from '@/lib/server/storage'
+import { loadProjects, saveProjects, deleteProject, loadAgents, saveAgents, loadTasks, saveTasks, loadSchedules, saveSchedules, loadSkills, saveSkills, loadSecrets, saveSecrets } from '@/lib/server/storage'
 import { mutateItem, deleteItem, notFound, type CollectionOps } from '@/lib/server/collection-helpers'
+import { ensureProjectWorkspace, normalizeProjectPatchInput } from '@/lib/server/project-utils'
 import { notify } from '@/lib/server/ws-hub'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -17,12 +18,14 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
   const { id } = await params
   const body = await req.json()
   const result = mutateItem(ops, id, (project) => {
-    Object.assign(project, body, { updatedAt: Date.now() })
+    const patch = normalizeProjectPatchInput(body && typeof body === 'object' ? body as Record<string, unknown> : {})
+    Object.assign(project, patch, { updatedAt: Date.now() })
     delete (project as Record<string, unknown>).id
     project.id = id
     return project
   })
   if (!result) return notFound()
+  ensureProjectWorkspace(id, result.name)
   return NextResponse.json(result)
 }
 
@@ -50,6 +53,7 @@ export async function DELETE(_req: Request, { params }: { params: Promise<{ id:
   clearProjectId(loadTasks, saveTasks, 'tasks')
   clearProjectId(loadSchedules, saveSchedules, 'schedules')
   clearProjectId(loadSkills, saveSkills, 'skills')
+  clearProjectId(loadSecrets, saveSecrets, 'secrets')
 
   return NextResponse.json({ ok: true })
 }

package/src/app/api/projects/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from 'next/server'
 import { genId } from '@/lib/id'
 import { loadProjects, saveProjects } from '@/lib/server/storage'
+import { ensureProjectWorkspace, normalizeProjectCreateInput } from '@/lib/server/project-utils'
 import { notify } from '@/lib/server/ws-hub'
 export const dynamic = 'force-dynamic'
 
@@ -13,15 +14,15 @@ export async function POST(req: Request) {
   const id = genId()
   const now = Date.now()
   const projects = loadProjects()
+  const normalized = normalizeProjectCreateInput(body && typeof body === 'object' ? body as Record<string, unknown> : {})
   projects[id] = {
     id,
-    name: body.name || 'Unnamed Project',
-    description: body.description || '',
-    color: body.color || undefined,
+    ...normalized,
     createdAt: now,
     updatedAt: now,
   }
   saveProjects(projects)
+  ensureProjectWorkspace(id, projects[id].name)
   notify('projects')
   return NextResponse.json(projects[id])
 }

package/src/app/api/secrets/[id]/route.ts

@@ -19,6 +19,7 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
     if (body.service !== undefined) secret.service = body.service
     if (body.scope !== undefined) secret.scope = body.scope
     if (body.agentIds !== undefined) secret.agentIds = body.agentIds
+    if (body.projectId !== undefined) secret.projectId = body.projectId || undefined
     secret.updatedAt = Date.now()
     return secret
   })

package/src/app/api/secrets/route.ts

@@ -10,7 +10,7 @@ export async function GET(_req: Request) {
   const safe = Object.fromEntries(
     Object.entries(secrets).map(([id, s]: [string, any]) => [
       id,
-      { id: s.id, name: s.name, service: s.service, scope: s.scope, agentIds: s.agentIds, createdAt: s.createdAt, updatedAt: s.updatedAt },
+      { id: s.id, name: s.name, service: s.service, scope: s.scope, agentIds: s.agentIds, projectId: s.projectId, createdAt: s.createdAt, updatedAt: s.updatedAt },
     ])
   )
   return NextResponse.json(safe)
@@ -33,6 +33,7 @@ export async function POST(req: Request) {
     encryptedValue: encryptKey(body.value),
     scope: body.scope || 'global',
     agentIds: body.agentIds || [],
+    projectId: typeof body.projectId === 'string' && body.projectId.trim() ? body.projectId.trim() : undefined,
     createdAt: now,
     updatedAt: now,
   }

package/src/app/api/settings/route.ts

@@ -126,6 +126,8 @@ export async function PUT(req: Request) {
   settings.taskQualityGateRequireVerification = parseBoolSetting(settings.taskQualityGateRequireVerification, false)
   settings.taskQualityGateRequireArtifact = parseBoolSetting(settings.taskQualityGateRequireArtifact, false)
   settings.taskQualityGateRequireReport = parseBoolSetting(settings.taskQualityGateRequireReport, false)
+  settings.taskManagementEnabled = parseBoolSetting(settings.taskManagementEnabled, true)
+  settings.projectManagementEnabled = parseBoolSetting(settings.projectManagementEnabled, true)
   settings.integrityMonitorEnabled = parseBoolSetting(settings.integrityMonitorEnabled, true)
   settings.sessionResetMode = settings.sessionResetMode === 'daily' ? 'daily' : settings.sessionResetMode === 'idle' ? 'idle' : null
   settings.sessionIdleTimeoutSec = parseIntSetting(

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

@@ -20,6 +20,38 @@ import { SoulLibraryPicker } from './soul-library-picker'
 import { HintTip } from '@/components/shared/hint-tip'
 
 const HB_PRESETS = [1800, 3600, 7200, 21600, 43200] as const
+const FALLBACK_ELEVENLABS_VOICE_ID = 'JBFqnCBsd6RMkjVDRZzb'
+
+type AgentSheetSectionId = 'overview' | 'instructions' | 'model' | 'tools'
+
+function SectionCard({
+  title,
+  description,
+  action,
+  children,
+  className = '',
+}: {
+  title: string
+  description?: string
+  action?: React.ReactNode
+  children: React.ReactNode
+  className?: string
+}) {
+  return (
+    <section className={`mb-8 rounded-[20px] border border-white/[0.06] bg-surface/70 p-5 sm:p-6 ${className}`}>
+      <div className="mb-5 flex items-start justify-between gap-4">
+        <div>
+          <h3 className="font-display text-[17px] font-700 tracking-[-0.02em] text-text">{title}</h3>
+          {description && (
+            <p className="mt-1 text-[13px] leading-[1.6] text-text-3/75">{description}</p>
+          )}
+        </div>
+        {action}
+      </div>
+      {children}
+    </section>
+  )
+}
 
 function formatHbDuration(sec: number): string {
   if (sec >= 3600) {
@@ -106,6 +138,7 @@ export function AgentSheet() {
   const credentials = useAppStore((s) => s.credentials)
   const loadCredentials = useAppStore((s) => s.loadCredentials)
   const appSettings = useAppStore((s) => s.appSettings)
+  const loadSettings = useAppStore((s) => s.loadSettings)
   const dynamicSkills = useAppStore((s) => s.skills)
   const mcpServers = useAppStore((s) => s.mcpServers)
   const loadSkills = useAppStore((s) => s.loadSkills)
@@ -196,6 +229,12 @@ export function AgentSheet() {
   const [soulLibraryOpen, setSoulLibraryOpen] = useState(false)
   const promptFileRef = useRef<HTMLInputElement>(null)
   const importFileRef = useRef<HTMLInputElement>(null)
+  const sectionRefs = useRef<Record<AgentSheetSectionId, HTMLDivElement | null>>({
+    overview: null,
+    instructions: null,
+    model: null,
+    tools: null,
+  })
 
   const handleFileUpload = (setter: (v: string) => void) => (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
@@ -212,6 +251,19 @@ export function AgentSheet() {
   const openclawGatewayProfiles = gatewayProfiles.filter((item) => item.provider === 'openclaw')
   const editing = editingId ? agents[editingId] : null
   const hasNativeCapabilities = NATIVE_CAPABILITY_PROVIDER_IDS.has(provider)
+  const globalVoiceId = typeof appSettings.elevenLabsVoiceId === 'string' ? appSettings.elevenLabsVoiceId.trim() : ''
+  const agentVoiceId = voiceId.trim()
+  const elevenLabsConfigured = appSettings.elevenLabsApiKeyConfigured === true
+  const voiceControlsAvailable = elevenLabsConfigured || appSettings.elevenLabsEnabled === true || !!globalVoiceId || !!agentVoiceId
+  const voicePlaybackEnabled = appSettings.elevenLabsEnabled === true
+  const effectiveVoiceId = agentVoiceId || globalVoiceId || FALLBACK_ELEVENLABS_VOICE_ID
+  const effectiveVoiceSource = agentVoiceId
+    ? 'Agent override'
+    : globalVoiceId
+      ? 'Global default'
+      : 'Built-in fallback'
+  const providerSummary = openclawEnabled ? 'OpenClaw gateway' : (currentProvider?.name || provider)
+  const modelSummary = openclawEnabled ? (gatewayProfileId ? 'Gateway-managed' : 'default') : (model || 'Select a model')
 
   const providerNeedsKey = !editing && (
     (currentProvider?.requiresApiKey && providerCredentials.length === 0 && !addingKey) ||
@@ -220,6 +272,7 @@ export function AgentSheet() {
 
   useEffect(() => {
     if (open) {
+      loadSettings()
       loadProviders()
       loadGatewayProfiles()
       loadCredentials()
@@ -412,6 +465,10 @@ export function AgentSheet() {
     setEditingId(null)
   }
 
+  const jumpToSection = (sectionId: AgentSheetSectionId) => {
+    sectionRefs.current[sectionId]?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
+
   const applyGatewayProfileSelection = (nextGatewayProfileId: string | null) => {
     setGatewayProfileId(nextGatewayProfileId)
     const gateway = openclawGatewayProfiles.find((item) => item.id === nextGatewayProfileId)
@@ -578,6 +635,7 @@ export function AgentSheet() {
         tools: editing.tools,
         plugins: editing.plugins,
         capabilities: editing.capabilities,
+        elevenLabsVoiceId: editing.elevenLabsVoiceId || null,
         soul: editing.soul,
         systemPrompt: editing.systemPrompt,
       }],
@@ -605,11 +663,12 @@ export function AgentSheet() {
         if (!importedAgent || typeof importedAgent !== 'object') throw new Error('Invalid agent pack')
         // Strip IDs and timestamps
         const { id: _id, createdAt: _ca, updatedAt: _ua, threadSessionId: _ts, ...agentData } = importedAgent
+        void [_id, _ca, _ua, _ts]
         await createAgent({ ...agentData, name: agentData.name || 'Imported Agent' })
         await loadAgents()
         toast.success(data?.kind === 'swarmclaw-agent-pack' ? 'Agent pack imported' : 'Agent imported')
         onClose()
-      } catch (err) {
+      } catch {
         toast.error('Invalid agent JSON file')
       }
     }
@@ -720,6 +779,56 @@ export function AgentSheet() {
         </div>
       </div>
 
+      <div className="mb-8 rounded-[20px] border border-white/[0.06] bg-white/[0.03] p-4 sm:p-5">
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
+          <div className="rounded-[14px] border border-white/[0.05] bg-black/10 p-3">
+            <p className="text-[11px] font-600 uppercase tracking-[0.08em] text-text-3">Provider</p>
+            <p className="mt-1 text-[14px] font-600 text-text">{providerSummary}</p>
+          </div>
+          <div className="rounded-[14px] border border-white/[0.05] bg-black/10 p-3">
+            <p className="text-[11px] font-600 uppercase tracking-[0.08em] text-text-3">Model</p>
+            <p className="mt-1 text-[14px] font-600 text-text">{modelSummary}</p>
+          </div>
+          <div className="rounded-[14px] border border-white/[0.05] bg-black/10 p-3">
+            <p className="text-[11px] font-600 uppercase tracking-[0.08em] text-text-3">Voice</p>
+            <p className="mt-1 text-[14px] font-600 text-text">{voiceControlsAvailable ? effectiveVoiceSource : 'Not configured'}</p>
+            {voiceControlsAvailable && (
+              <p className="mt-1 truncate text-[12px] text-text-3/75">{effectiveVoiceId}</p>
+            )}
+          </div>
+          <div className="rounded-[14px] border border-white/[0.05] bg-black/10 p-3">
+            <p className="text-[11px] font-600 uppercase tracking-[0.08em] text-text-3">Mode</p>
+            <p className="mt-1 text-[14px] font-600 text-text">{canDelegateToAgents ? 'Delegating agent' : 'Solo agent'}</p>
+            <p className="mt-1 text-[12px] text-text-3/75">
+              {routingTargets.length > 0 ? `${routingTargets.length} route${routingTargets.length === 1 ? '' : 's'} configured` : 'Single primary route'}
+            </p>
+          </div>
+        </div>
+        <div className="mt-4 flex flex-wrap gap-2">
+          {([
+            ['overview', 'Overview'],
+            ['instructions', 'Instructions'],
+            ['model', 'Model Setup'],
+            ['tools', 'Tools'],
+          ] as const).map(([sectionId, label]) => (
+            <button
+              key={sectionId}
+              type="button"
+              onClick={() => jumpToSection(sectionId)}
+              className="rounded-[10px] border border-white/[0.08] bg-transparent px-3 py-2 text-[12px] font-600 text-text-3 transition-all hover:bg-white/[0.04] hover:text-text-2"
+              style={{ fontFamily: 'inherit' }}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div ref={(node) => { sectionRefs.current.overview = node }}>
+      <SectionCard
+        title="Overview"
+        description="Basic identity, defaults, voice, heartbeat, and budget controls for this agent."
+      >
       <div className="mb-8">
         <SectionLabel>Name</SectionLabel>
         <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. SEO Researcher" className={inputClass} style={{ fontFamily: 'inherit' }} />
@@ -756,7 +865,7 @@ export function AgentSheet() {
                         setAvatarSeed('')
                         toast.success('Avatar image uploaded')
                       }
-                    } catch (err: unknown) {
+                    } catch {
                       toast.error('Failed to upload image')
                     } finally {
                       setUploading(false)
@@ -935,20 +1044,58 @@ export function AgentSheet() {
       </div>
 
       {/* ElevenLabs Voice ID */}
-      {appSettings.elevenLabsEnabled && (
+      {voiceControlsAvailable && (
         <div className="mb-8">
-          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
-            ElevenLabs Voice ID <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
-          </label>
+          <div className="mb-3 flex flex-wrap items-start justify-between gap-3">
+            <div>
+              <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em]">
+                Voice & Audio <span className="normal-case tracking-normal font-normal text-text-3">(optional)</span>
+              </label>
+              <p className="mt-1 text-[12px] leading-[1.6] text-text-3/70">
+                Set an agent-specific ElevenLabs voice or inherit the global default configured in Settings.
+              </p>
+            </div>
+            <div className={`rounded-[12px] border px-3 py-2 text-right ${
+              agentVoiceId
+                ? 'border-accent-bright/25 bg-accent-soft/20'
+                : 'border-white/[0.06] bg-white/[0.03]'
+            }`}>
+              <p className="text-[10px] font-700 uppercase tracking-[0.08em] text-text-3">
+                {effectiveVoiceSource}
+              </p>
+              <p className="mt-1 max-w-[240px] truncate font-mono text-[12px] text-text-2">{effectiveVoiceId}</p>
+            </div>
+          </div>
           <input
             type="text"
             value={voiceId}
             onChange={(e) => setVoiceId(e.target.value)}
-            placeholder="Leave blank for global default"
+            placeholder={globalVoiceId ? `Leave blank to use ${globalVoiceId}` : 'Leave blank for the global default'}
             className={inputClass}
             style={{ fontFamily: 'inherit' }}
           />
-          <p className="text-[11px] text-text-3/70 mt-1.5">Override the default voice for this agent. Leave blank to use the global default.</p>
+          <div className="mt-2 flex flex-wrap items-center gap-2">
+            {agentVoiceId && (
+              <button
+                type="button"
+                onClick={() => setVoiceId('')}
+                className="rounded-[9px] border border-white/[0.08] bg-transparent px-2.5 py-1.5 text-[11px] font-600 text-text-3 transition-all hover:bg-white/[0.04] hover:text-text-2"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Use global default
+              </button>
+            )}
+            {!voicePlaybackEnabled && (
+              <span className="rounded-[9px] border border-amber-400/20 bg-amber-400/[0.08] px-2.5 py-1.5 text-[11px] font-600 text-amber-300">
+                Voice playback is disabled globally
+              </span>
+            )}
+          </div>
+          <p className="text-[11px] text-text-3/70 mt-2">
+            {globalVoiceId
+              ? `Global default: ${globalVoiceId}. This agent can override it with a different voice ID.`
+              : 'No global default voice ID is set yet. If left blank, the built-in ElevenLabs fallback will be used.'}
+          </p>
         </div>
       )}
 
@@ -1107,6 +1254,8 @@ export function AgentSheet() {
             : 'When a configured cap is exceeded, a warning is shown but runs continue.'}
         </p>
       </div>
+      </SectionCard>
+      </div>
 
       {/* Wallet Section */}
       {editingId && (
@@ -1128,6 +1277,11 @@ export function AgentSheet() {
         />
       )}
 
+      <div ref={(node) => { sectionRefs.current.instructions = node }}>
+      <SectionCard
+        title="Instructions & Continuity"
+        description="Define personality, system behavior, and long-running context this agent should preserve."
+      >
       {provider !== 'openclaw' && (
         <div className="mb-8">
           <label className="flex items-center gap-2 font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-2">
@@ -1322,7 +1476,14 @@ export function AgentSheet() {
           />
         </div>
       </div>
+      </SectionCard>
+      </div>
 
+      <div ref={(node) => { sectionRefs.current.model = node }}>
+      <SectionCard
+        title="Model Setup"
+        description="Choose the provider, credentials, routing, and gateway preferences this agent should use."
+      >
       {/* OpenClaw Gateway Fields */}
       {openclawEnabled && (
         <div className="mb-8 space-y-5">
@@ -1411,13 +1572,13 @@ export function AgentSheet() {
                       onClick={async () => {
                         setSavingKey(true)
                         try {
-                          const cred = await api<any>('POST', '/credentials', { provider: 'openclaw', name: newKeyName.trim() || 'OpenClaw token', apiKey: newKeyValue.trim() })
+                          const cred = await api<{ id: string }>('POST', '/credentials', { provider: 'openclaw', name: newKeyName.trim() || 'OpenClaw token', apiKey: newKeyValue.trim() })
                           await loadCredentials()
                           setCredentialId(cred.id)
                           setAddingKey(false)
                           setNewKeyName('')
                           setNewKeyValue('')
-                        } catch (err: any) { toast.error(`Failed to save: ${err.message}`) }
+                        } catch (err: unknown) { toast.error(`Failed to save: ${err instanceof Error ? err.message : String(err)}`) }
                         finally { setSavingKey(false) }
                       }}
                       className="px-4 py-1.5 rounded-[8px] bg-accent-bright text-white text-[12px] font-600 cursor-pointer border-none hover:brightness-110 transition-all disabled:opacity-40"
@@ -1670,13 +1831,13 @@ export function AgentSheet() {
                   onClick={async () => {
                     setSavingKey(true)
                     try {
-                      const cred = await api<any>('POST', '/credentials', { provider, name: newKeyName.trim() || `${provider} key`, apiKey: newKeyValue.trim() })
+                      const cred = await api<{ id: string }>('POST', '/credentials', { provider, name: newKeyName.trim() || `${provider} key`, apiKey: newKeyValue.trim() })
                       await loadCredentials()
                       setCredentialId(cred.id)
                       setAddingKey(false)
                       setNewKeyName('')
                       setNewKeyValue('')
-                    } catch (err: any) { toast.error(`Failed to save: ${err.message}`) }
+                    } catch (err: unknown) { toast.error(`Failed to save: ${err instanceof Error ? err.message : String(err)}`) }
                     finally { setSavingKey(false) }
                   }}
                   className="px-4 py-1.5 rounded-[8px] bg-accent-bright text-white text-[12px] font-600 cursor-pointer border-none hover:brightness-110 transition-all disabled:opacity-40"
@@ -1877,7 +2038,14 @@ export function AgentSheet() {
           <p className="text-[11px] text-text-3/70 mt-2">No route pool yet. Add one if this agent should switch between cheaper, stronger, or gateway-specific models.</p>
         )}
       </div>
+      </SectionCard>
+      </div>
 
+      <div ref={(node) => { sectionRefs.current.tools = node }}>
+      <SectionCard
+        title="Tools & Delegation"
+        description="Enable plugins, skills, MCP tools, and delegation behavior for this agent."
+      >
       {/* Plugins — hidden for providers that manage capabilities outside LangGraph */}
       {!hasNativeCapabilities && (
         <div className="mb-8">
@@ -2024,7 +2192,7 @@ export function AgentSheet() {
           </label>
           <p className="text-[12px] text-text-3/60 mb-3">Connect external tool servers to this agent via MCP.</p>
           <div className="flex flex-wrap gap-2">
-            {Object.values(mcpServers).map((s: any) => {
+            {Object.values(mcpServers).map((s) => {
               const active = mcpServerIds.includes(s.id)
               return (
                 <button
@@ -2056,7 +2224,7 @@ export function AgentSheet() {
           </p>
           <div className="space-y-4">
             {mcpServerIds.map((serverId) => {
-              const server = (mcpServers as Record<string, any>)[serverId]
+              const server = mcpServers[serverId]
               const serverTools = mcpTools[serverId]
               if (!server || !serverTools?.length) return null
               const safeName = server.name.replace(/[^a-zA-Z0-9_]/g, '_')
@@ -2121,6 +2289,8 @@ export function AgentSheet() {
           />
         </div>
       )}
+      </SectionCard>
+      </div>
 
       {/* Provider key warning */}
       {providerNeedsKey && (