@swarmclawai/swarmclaw 0.4.5 → 0.5.0

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

@@ -3,6 +3,7 @@ import { loadSessions, saveSessions, deleteSession, active, loadAgents } from '@
 import { notFound } from '@/lib/server/collection-helpers'
 import { enqueueSessionRun } from '@/lib/server/session-run-manager'
 import { normalizeProviderEndpoint } from '@/lib/openclaw-endpoint'
+import { ensureMainSessionFlag, isProtectedMainSession } from '@/lib/server/main-session'
 
 function buildSessionAwakeningPrompt(user: string | null | undefined): string {
   const displayName = typeof user === 'string' && user.trim() ? user.trim() : 'there'
@@ -22,6 +23,7 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
   const updates = await req.json()
   const sessions = loadSessions()
   if (!sessions[id]) return notFound()
+  const wasProtectedMain = isProtectedMainSession(sessions[id])
   const hadMessagesBefore = Array.isArray(sessions[id].messages) && sessions[id].messages.length > 0
 
   const agentIdUpdateProvided = updates.agentId !== undefined
@@ -33,7 +35,13 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
 
   const linkedAgent = nextAgentId ? loadAgents()[nextAgentId] : null
 
-  if (updates.name !== undefined) sessions[id].name = updates.name
+  if (updates.name !== undefined) {
+    const nextName = typeof updates.name === 'string' ? updates.name.trim() : String(updates.name || '')
+    if (wasProtectedMain && nextName !== '__main__') {
+      return new NextResponse('Cannot rename main chat session', { status: 400 })
+    }
+    sessions[id].name = updates.name
+  }
   if (updates.cwd !== undefined) sessions[id].cwd = updates.cwd
   if (updates.provider !== undefined) sessions[id].provider = updates.provider
   else if (agentIdUpdateProvided && linkedAgent?.provider) sessions[id].provider = linkedAgent.provider
@@ -62,8 +70,9 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
   if (updates.heartbeatIntervalSec !== undefined) sessions[id].heartbeatIntervalSec = updates.heartbeatIntervalSec
   if (updates.pinned !== undefined) sessions[id].pinned = !!updates.pinned
   if (!Array.isArray(sessions[id].messages)) sessions[id].messages = []
+  ensureMainSessionFlag(sessions[id])
 
-  const shouldKickoffAwakening = sessions[id].name === '__main__'
+  const shouldKickoffAwakening = isProtectedMainSession(sessions[id])
     && agentIdUpdateProvided
     && !!sessions[id].agentId
     && !hadMessagesBefore
@@ -92,7 +101,7 @@ export async function PUT(req: Request, { params }: { params: Promise<{ id: stri
 export async function DELETE(_req: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
   const sessions = loadSessions()
-  if (sessions[id]?.name === '__main__') {
+  if (isProtectedMainSession(sessions[id])) {
     return new NextResponse('Cannot delete main chat session', { status: 403 })
   }
   if (active.has(id)) {

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

@@ -7,6 +7,7 @@ import { WORKSPACE_DIR } from '@/lib/server/data-dir'
 import { notify } from '@/lib/server/ws-hub'
 import { getSessionRunState } from '@/lib/server/session-run-manager'
 import { normalizeProviderEndpoint } from '@/lib/openclaw-endpoint'
+import { ensureMainSessionFlag, isProtectedMainSession } from '@/lib/server/main-session'
 export const dynamic = 'force-dynamic'
 
 
@@ -27,16 +28,18 @@ export async function DELETE(req: Request) {
     return new NextResponse('Missing ids', { status: 400 })
   }
   const sessions = loadSessions()
+  let deleted = 0
   for (const id of ids) {
-    if (sessions[id]?.name === '__main__') continue
+    if (isProtectedMainSession(sessions[id])) continue
     if (active.has(id)) {
       try { active.get(id).kill() } catch {}
       active.delete(id)
     }
     deleteSession(id)
+    deleted += 1
   }
   notify('sessions')
-  return NextResponse.json({ deleted: ids.length })
+  return NextResponse.json({ deleted, requested: ids.length })
 }
 
 export async function POST(req: Request) {
@@ -86,6 +89,7 @@ export async function POST(req: Request) {
     heartbeatEnabled: body.heartbeatEnabled ?? null,
     heartbeatIntervalSec: body.heartbeatIntervalSec ?? null,
   }
+  ensureMainSessionFlag(sessions[id])
   saveSessions(sessions)
   notify('sessions')
   return NextResponse.json(sessions[id])

package/src/app/globals.css

@@ -79,6 +79,9 @@
 }
 
 :root {
+  --font-dm-sans: 'Segoe UI';
+  --font-sora: 'Segoe UI';
+  --font-jetbrains-mono: 'SF Mono';
   --radius: 0.625rem;
   --background: #08080d;
   --foreground: #e2e2ec;
@@ -203,6 +206,17 @@ body {
   100% { background-position: 0% 50%; }
 }
 
+/* AI avatar mood animations */
+@keyframes ai-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
+@keyframes ai-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); } 50% { box-shadow: 0 0 12px 4px rgba(99,102,241,0.35); } }
+@keyframes ai-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }
+@keyframes ai-bounce { 0%,100% { transform: scale(1); } 40% { transform: scale(1.25); } 60% { transform: scale(0.95); } }
+
+.ai-mood-pulse { animation: ai-pulse 2s ease-in-out infinite; }
+.ai-mood-glow { animation: ai-glow 1.8s ease-in-out infinite; }
+.ai-mood-shake { animation: ai-shake 0.5s ease-in-out; }
+.ai-mood-bounce { animation: ai-bounce 0.6s ease-out; }
+
 /* ===== Markdown content ===== */
 .msg-content pre {
   background: #0a0a12 !important;

package/src/app/layout.tsx

@@ -1,27 +1,8 @@
 import type { Metadata, Viewport } from "next"
-import { Sora, DM_Sans, JetBrains_Mono } from "next/font/google"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { Toaster } from "@/components/ui/sonner"
 import "./globals.css"
 
-const sora = Sora({
-  variable: "--font-sora",
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700", "800"],
-})
-
-const dmSans = DM_Sans({
-  variable: "--font-dm-sans",
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700"],
-})
-
-const jetbrainsMono = JetBrains_Mono({
-  variable: "--font-jetbrains-mono",
-  subsets: ["latin"],
-  weight: ["400", "500"],
-})
-
 export const metadata: Metadata = {
   title: "SwarmClaw",
   description: "AI agent orchestration dashboard with multi-provider support",
@@ -34,6 +15,10 @@ export const viewport: Viewport = {
   viewportFit: "cover",
 }
 
+// Avoid static prerendering for the app shell. This prevents flaky
+// Turbopack prerender failures seen in detached fresh-install builds.
+export const dynamic = "force-dynamic"
+
 export default function RootLayout({
   children,
 }: Readonly<{
@@ -41,7 +26,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="dark">
-      <body className={`${sora.variable} ${dmSans.variable} ${jetbrainsMono.variable} antialiased`} cz-shortcut-listen="true">
+      <body className="antialiased" cz-shortcut-listen="true">
         <TooltipProvider>
           {children}
           <Toaster />

package/src/cli/index.js

@@ -17,6 +17,9 @@ const COMMAND_GROUPS = [
       cmd('create', 'POST', '/agents', 'Create an agent', { expectsJsonBody: true }),
       cmd('update', 'PUT', '/agents/:id', 'Update an agent', { expectsJsonBody: true }),
       cmd('delete', 'DELETE', '/agents/:id', 'Delete an agent'),
+      cmd('trash', 'GET', '/agents/trash', 'List trashed agents'),
+      cmd('restore', 'POST', '/agents/trash', 'Restore a trashed agent', { expectsJsonBody: true }),
+      cmd('purge', 'DELETE', '/agents/trash', 'Permanently delete a trashed agent', { expectsJsonBody: true }),
       cmd('thread', 'POST', '/agents/:id/thread', 'Get or create agent thread session'),
     ],
   },
@@ -205,10 +208,36 @@ const COMMAND_GROUPS = [
   },
   {
     name: 'openclaw',
-    description: 'OpenClaw discovery and sync',
+    description: 'OpenClaw discovery, gateway control, and runtime APIs',
     commands: [
       cmd('discover', 'GET', '/openclaw/discover', 'Discover OpenClaw gateways'),
       cmd('directory', 'GET', '/openclaw/directory', 'List directory entries from running OpenClaw connectors'),
+      cmd('gateway-status', 'GET', '/openclaw/gateway', 'Check OpenClaw gateway connection status'),
+      cmd('gateway', 'POST', '/openclaw/gateway', 'Call OpenClaw gateway RPC/control action', { expectsJsonBody: true }),
+      cmd('config-sync', 'GET', '/openclaw/config-sync', 'Detect OpenClaw gateway config issues'),
+      cmd('config-sync-repair', 'POST', '/openclaw/config-sync', 'Repair a detected OpenClaw config issue', { expectsJsonBody: true }),
+      cmd('approvals', 'GET', '/openclaw/approvals', 'List pending OpenClaw execution approvals'),
+      cmd('approvals-resolve', 'POST', '/openclaw/approvals', 'Resolve an OpenClaw execution approval', { expectsJsonBody: true }),
+      cmd('cron', 'GET', '/openclaw/cron', 'List OpenClaw cron jobs'),
+      cmd('cron-action', 'POST', '/openclaw/cron', 'Create/run/remove OpenClaw cron jobs', { expectsJsonBody: true }),
+      cmd('agent-files', 'GET', '/openclaw/agent-files', 'Fetch OpenClaw agent files'),
+      cmd('agent-files-set', 'PUT', '/openclaw/agent-files', 'Save an OpenClaw agent file', { expectsJsonBody: true }),
+      cmd('dotenv-keys', 'GET', '/openclaw/dotenv-keys', 'List gateway .env keys'),
+      cmd('exec-config', 'GET', '/openclaw/exec-config', 'Fetch OpenClaw exec approval config'),
+      cmd('exec-config-set', 'PUT', '/openclaw/exec-config', 'Save OpenClaw exec approval config', { expectsJsonBody: true }),
+      cmd('history-preview', 'GET', '/openclaw/history', 'Preview OpenClaw session history'),
+      cmd('history-merge', 'POST', '/openclaw/history', 'Merge OpenClaw session history into local session', { expectsJsonBody: true }),
+      cmd('media', 'GET', '/openclaw/media', 'Proxy OpenClaw media/file content'),
+      cmd('models', 'GET', '/openclaw/models', 'List allowed OpenClaw models'),
+      cmd('permissions', 'GET', '/openclaw/permissions', 'Get OpenClaw permission preset/config'),
+      cmd('permissions-set', 'PUT', '/openclaw/permissions', 'Apply OpenClaw permission preset', { expectsJsonBody: true }),
+      cmd('sandbox-env', 'GET', '/openclaw/sandbox-env', 'List OpenClaw sandbox env allowlist'),
+      cmd('sandbox-env-set', 'PUT', '/openclaw/sandbox-env', 'Update OpenClaw sandbox env allowlist', { expectsJsonBody: true }),
+      cmd('skills', 'GET', '/openclaw/skills', 'List OpenClaw skills and eligibility'),
+      cmd('skills-update', 'PATCH', '/openclaw/skills', 'Update OpenClaw skill state/config', { expectsJsonBody: true }),
+      cmd('skills-save', 'PUT', '/openclaw/skills', 'Save OpenClaw skill allowlist mode/config', { expectsJsonBody: true }),
+      cmd('skills-install', 'POST', '/openclaw/skills/install', 'Install OpenClaw skill dependencies', { expectsJsonBody: true }),
+      cmd('skills-remove', 'POST', '/openclaw/skills/remove', 'Remove OpenClaw skill', { expectsJsonBody: true }),
       cmd('sync', 'POST', '/openclaw/sync', 'Run OpenClaw sync action', { expectsJsonBody: true }),
     ],
   },
@@ -303,6 +332,9 @@ const COMMAND_GROUPS = [
         defaultBody: { action: 'disable_all' },
       }),
       cmd('messages', 'GET', '/sessions/:id/messages', 'Get session messages'),
+      cmd('messages-update', 'PUT', '/sessions/:id/messages', 'Update session message metadata (e.g. bookmark)', { expectsJsonBody: true }),
+      cmd('fork', 'POST', '/sessions/:id/fork', 'Fork session from a specific message index', { expectsJsonBody: true }),
+      cmd('edit-resend', 'POST', '/sessions/:id/edit-resend', 'Edit and resend from a specific message index', { expectsJsonBody: true }),
       cmd('main-loop', 'GET', '/sessions/:id/main-loop', 'Get main mission loop state'),
       cmd('main-loop-action', 'POST', '/sessions/:id/main-loop', 'Control main mission loop (pause/resume/set_goal/set_mode/clear_events/nudge)', {
         expectsJsonBody: true,

package/src/cli/spec.js

@@ -7,6 +7,9 @@ const COMMAND_GROUPS = {
       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'] },
+      trash: { description: 'List trashed agents', method: 'GET', path: '/agents/trash' },
+      restore: { description: 'Restore a trashed agent', method: 'POST', path: '/agents/trash' },
+      purge: { description: 'Permanently delete a trashed agent', method: 'DELETE', path: '/agents/trash' },
     },
   },
   auth: {
@@ -130,6 +133,40 @@ const COMMAND_GROUPS = {
       graph: { description: 'Get orchestrator graph structure', method: 'GET', path: '/orchestrator/graph' },
     },
   },
+  openclaw: {
+    description: 'OpenClaw discovery, gateway control, and runtime APIs',
+    commands: {
+      discover: { description: 'Discover OpenClaw gateways', method: 'GET', path: '/openclaw/discover' },
+      directory: { description: 'List directory entries from running OpenClaw connectors', method: 'GET', path: '/openclaw/directory' },
+      'gateway-status': { description: 'Check OpenClaw gateway connection status', method: 'GET', path: '/openclaw/gateway' },
+      gateway: { description: 'Call OpenClaw gateway RPC/control action', method: 'POST', path: '/openclaw/gateway' },
+      'config-sync': { description: 'Detect OpenClaw gateway config issues', method: 'GET', path: '/openclaw/config-sync' },
+      'config-sync-repair': { description: 'Repair a detected OpenClaw config issue', method: 'POST', path: '/openclaw/config-sync' },
+      approvals: { description: 'List pending OpenClaw execution approvals', method: 'GET', path: '/openclaw/approvals' },
+      'approvals-resolve': { description: 'Resolve an OpenClaw execution approval', method: 'POST', path: '/openclaw/approvals' },
+      cron: { description: 'List OpenClaw cron jobs', method: 'GET', path: '/openclaw/cron' },
+      'cron-action': { description: 'Create/run/remove OpenClaw cron jobs', method: 'POST', path: '/openclaw/cron' },
+      'agent-files': { description: 'Fetch OpenClaw agent files', method: 'GET', path: '/openclaw/agent-files' },
+      'agent-files-set': { description: 'Save an OpenClaw agent file', method: 'PUT', path: '/openclaw/agent-files' },
+      'dotenv-keys': { description: 'List gateway .env keys', method: 'GET', path: '/openclaw/dotenv-keys' },
+      'exec-config': { description: 'Fetch OpenClaw exec approval config', method: 'GET', path: '/openclaw/exec-config' },
+      'exec-config-set': { description: 'Save OpenClaw exec approval config', method: 'PUT', path: '/openclaw/exec-config' },
+      'history-preview': { description: 'Preview OpenClaw session history', method: 'GET', path: '/openclaw/history' },
+      'history-merge': { description: 'Merge OpenClaw session history into local session', method: 'POST', path: '/openclaw/history' },
+      media: { description: 'Proxy OpenClaw media/file content', method: 'GET', path: '/openclaw/media' },
+      models: { description: 'List allowed OpenClaw models', method: 'GET', path: '/openclaw/models' },
+      permissions: { description: 'Get OpenClaw permission preset/config', method: 'GET', path: '/openclaw/permissions' },
+      'permissions-set': { description: 'Apply OpenClaw permission preset', method: 'PUT', path: '/openclaw/permissions' },
+      'sandbox-env': { description: 'List OpenClaw sandbox env allowlist', method: 'GET', path: '/openclaw/sandbox-env' },
+      'sandbox-env-set': { description: 'Update OpenClaw sandbox env allowlist', method: 'PUT', path: '/openclaw/sandbox-env' },
+      skills: { description: 'List OpenClaw skills and eligibility', method: 'GET', path: '/openclaw/skills' },
+      'skills-update': { description: 'Update OpenClaw skill state/config', method: 'PATCH', path: '/openclaw/skills' },
+      'skills-save': { description: 'Save OpenClaw skill allowlist mode/config', method: 'PUT', path: '/openclaw/skills' },
+      'skills-install': { description: 'Install OpenClaw skill dependencies', method: 'POST', path: '/openclaw/skills/install' },
+      'skills-remove': { description: 'Remove OpenClaw skill', method: 'POST', path: '/openclaw/skills/remove' },
+      sync: { description: 'Run OpenClaw sync action', method: 'POST', path: '/openclaw/sync' },
+    },
+  },
   plugins: {
     description: 'Plugin listing/config/install',
     commands: {
@@ -187,6 +224,9 @@ const COMMAND_GROUPS = {
       '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'] },
+      'messages-update': { description: 'Update session message metadata (e.g. bookmark)', method: 'PUT', path: '/sessions/:id/messages', params: ['id'] },
+      fork: { description: 'Fork session from a specific message index', method: 'POST', path: '/sessions/:id/fork', params: ['id'] },
+      'edit-resend': { description: 'Edit and resend from a specific message index', method: 'POST', path: '/sessions/:id/edit-resend', 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 },

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

@@ -0,0 +1,45 @@
+'use client'
+
+import { useMemo } from 'react'
+import multiavatar from '@multiavatar/multiavatar'
+
+interface Props {
+  seed?: string | null
+  name: string
+  size?: number
+  className?: string
+}
+
+export function AgentAvatar({ seed, name, size = 32, className = '' }: Props) {
+  const svgHtml = useMemo(() => {
+    if (!seed) return null
+    return multiavatar(seed)
+  }, [seed])
+
+  if (svgHtml) {
+    return (
+      <div
+        className={`shrink-0 rounded-full overflow-hidden ${className}`}
+        style={{ width: size, height: size }}
+        dangerouslySetInnerHTML={{ __html: svgHtml }}
+      />
+    )
+  }
+
+  // Fallback: initials
+  const initials = name
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((w) => w[0] || '')
+    .join('')
+    .toUpperCase()
+
+  return (
+    <div
+      className={`shrink-0 rounded-full flex items-center justify-center bg-accent-soft text-accent-bright font-600 ${className}`}
+      style={{ width: size, height: size, fontSize: size * 0.38 }}
+    >
+      {initials || '?'}
+    </div>
+  )
+}

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

@@ -15,14 +15,17 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { ConfirmDialog } from '@/components/shared/confirm-dialog'
+import { useApprovalStore } from '@/stores/use-approval-store'
+import { AgentAvatar } from './agent-avatar'
 
 interface Props {
   agent: Agent
   isDefault?: boolean
+  isRunning?: boolean
   onSetDefault?: (id: string) => void
 }
 
-export function AgentCard({ agent, isDefault, onSetDefault }: Props) {
+export function AgentCard({ agent, isDefault, isRunning, onSetDefault }: Props) {
   const setEditingAgentId = useAppStore((s) => s.setEditingAgentId)
   const setAgentSheetOpen = useAppStore((s) => s.setAgentSheetOpen)
   const loadSessions = useAppStore((s) => s.loadSessions)
@@ -34,6 +37,8 @@ export function AgentCard({ agent, isDefault, onSetDefault }: Props) {
   const [dialogOpen, setDialogOpen] = useState(false)
   const [taskInput, setTaskInput] = useState('')
   const [confirmDelete, setConfirmDelete] = useState(false)
+  const approvals = useApprovalStore((s) => s.approvals)
+  const pendingApprovalCount = Object.values(approvals).filter((a) => a.agentId === agent.id).length
 
   const handleClick = () => {
     setEditingAgentId(agent.id)
@@ -111,13 +116,22 @@ export function AgentCard({ agent, isDefault, onSetDefault }: Props) {
               onClick={() => setConfirmDelete(true)}
               className="text-red-400 focus:text-red-400"
             >
-              Delete
+              Move to Trash
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
 
         <div className="flex items-center gap-2.5">
+          <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={28} />
+          {isRunning && (
+            <span className="shrink-0 w-2 h-2 rounded-full bg-emerald-400" style={{ animation: 'pulse 2s ease infinite' }} title="Running" />
+          )}
           <span className="font-display text-[14px] font-600 truncate flex-1 tracking-[-0.01em]">{agent.name}</span>
+          {pendingApprovalCount > 0 && (
+            <span className="shrink-0 inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full bg-red-500 text-white text-[10px] font-700">
+              {pendingApprovalCount}
+            </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
@@ -207,9 +221,9 @@ export function AgentCard({ agent, isDefault, onSetDefault }: Props) {
 
       <ConfirmDialog
         open={confirmDelete}
-        title="Delete Agent"
-        message={`Are you sure you want to delete "${agent.name}"? This cannot be undone.`}
-        confirmLabel="Delete"
+        title="Move to Trash"
+        message={`Move "${agent.name}" to trash? You can restore it later from the trash.`}
+        confirmLabel="Move to Trash"
         danger
         onConfirm={handleDelete}
         onCancel={() => setConfirmDelete(false)}

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>
+  )
+}