@swarmclawai/swarmclaw 0.6.4 → 0.6.6

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

@@ -0,0 +1,74 @@
+import { NextResponse } from 'next/server'
+import { genId } from '@/lib/id'
+import { loadWallets, upsertWallet, loadAgents, saveAgents } from '@/lib/server/storage'
+import { generateSolanaKeypair } from '@/lib/server/solana'
+import { notify } from '@/lib/server/ws-hub'
+import type { AgentWallet, WalletChain } from '@/types'
+export const dynamic = 'force-dynamic'
+
+/** Strip encryptedPrivateKey from wallet for safe API responses */
+function stripPrivateKey(wallet: Record<string, unknown>): Record<string, unknown> {
+  return Object.fromEntries(Object.entries(wallet).filter(([k]) => k !== 'encryptedPrivateKey'))
+}
+
+export async function GET() {
+  const wallets = loadWallets() as Record<string, AgentWallet>
+  const safe = Object.fromEntries(
+    Object.entries(wallets).map(([id, w]) => [id, stripPrivateKey(w as unknown as Record<string, unknown>)]),
+  )
+  return NextResponse.json(safe)
+}
+
+export async function POST(req: Request) {
+  const body = await req.json()
+  const agentId = typeof body.agentId === 'string' ? body.agentId.trim() : ''
+  if (!agentId) {
+    return NextResponse.json({ error: 'agentId is required' }, { status: 400 })
+  }
+
+  const agents = loadAgents()
+  if (!agents[agentId]) {
+    return NextResponse.json({ error: 'Agent not found' }, { status: 404 })
+  }
+
+  // Check agent doesn't already have a wallet
+  const existing = loadWallets() as Record<string, AgentWallet>
+  const hasWallet = Object.values(existing).some((w) => w.agentId === agentId)
+  if (hasWallet) {
+    return NextResponse.json({ error: 'Agent already has a wallet' }, { status: 409 })
+  }
+
+  const chain: WalletChain = body.chain === 'solana' ? 'solana' : 'solana' // extensible later
+  const { publicKey, encryptedPrivateKey } = generateSolanaKeypair()
+
+  const id = genId()
+  const now = Date.now()
+
+  const wallet: AgentWallet = {
+    id,
+    agentId,
+    chain,
+    publicKey,
+    encryptedPrivateKey,
+    label: typeof body.label === 'string' ? body.label : undefined,
+    spendingLimitLamports: typeof body.spendingLimitLamports === 'number' ? body.spendingLimitLamports : 100_000_000,
+    dailyLimitLamports: typeof body.dailyLimitLamports === 'number' ? body.dailyLimitLamports : 1_000_000_000,
+    requireApproval: body.requireApproval !== false,
+    createdAt: now,
+    updatedAt: now,
+  }
+
+  upsertWallet(id, wallet)
+
+  // Link wallet to agent
+  const agent = agents[agentId]
+  agent.walletId = id
+  agent.updatedAt = now
+  agents[agentId] = agent
+  saveAgents(agents)
+
+  notify('wallets')
+  notify('agents')
+
+  return NextResponse.json(stripPrivateKey(wallet as unknown as Record<string, unknown>))
+}

package/src/app/globals.css

@@ -215,6 +215,14 @@ textarea:hover::-webkit-scrollbar { width: 6px; }
   to { opacity: 1; transform: translateY(0); }
 }
 @keyframes spin { to { transform: rotate(360deg); } }
+@keyframes pulse-glow {
+  0%, 100% { transform: scale(1); opacity: 0.45; }
+  50% { transform: scale(1.2); opacity: 0.85; }
+}
+@keyframes avatar-pulse {
+  0%, 100% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+}
 @keyframes slide-in-left {
   from { transform: translateX(-100%); }
   to { transform: translateX(0); }

package/src/cli/index.js

@@ -485,6 +485,21 @@ const COMMAND_GROUPS = [
       }),
     ],
   },
+  {
+    name: 'wallets',
+    description: 'Manage agent wallets and wallet transactions',
+    commands: [
+      cmd('list', 'GET', '/wallets', 'List wallets'),
+      cmd('get', 'GET', '/wallets/:id', 'Get wallet by id'),
+      cmd('create', 'POST', '/wallets', 'Create wallet', { expectsJsonBody: true }),
+      cmd('update', 'PATCH', '/wallets/:id', 'Update wallet settings', { expectsJsonBody: true }),
+      cmd('delete', 'DELETE', '/wallets/:id', 'Delete wallet'),
+      cmd('send', 'POST', '/wallets/:id/send', 'Send funds from wallet', { expectsJsonBody: true }),
+      cmd('approve', 'POST', '/wallets/:id/approve', 'Approve or deny a pending wallet transaction', { expectsJsonBody: true }),
+      cmd('transactions', 'GET', '/wallets/:id/transactions', 'List wallet transactions'),
+      cmd('balance-history', 'GET', '/wallets/:id/balance-history', 'Get wallet balance history'),
+    ],
+  },
   {
     name: 'upload',
     description: 'Upload raw file/blob',

package/src/cli/spec.js

@@ -351,6 +351,20 @@ const COMMAND_GROUPS = {
       metrics: { description: 'Get task board metrics (supports --query range=24h|7d|30d)', method: 'GET', path: '/tasks/metrics' },
     },
   },
+  wallets: {
+    description: 'Agent wallet operations',
+    commands: {
+      list: { description: 'List wallets', method: 'GET', path: '/wallets' },
+      get: { description: 'Get wallet by id', method: 'GET', path: '/wallets/:id', params: ['id'] },
+      create: { description: 'Create wallet', method: 'POST', path: '/wallets' },
+      update: { description: 'Update wallet settings', method: 'PATCH', path: '/wallets/:id', params: ['id'] },
+      delete: { description: 'Delete wallet', method: 'DELETE', path: '/wallets/:id', params: ['id'] },
+      send: { description: 'Send funds from wallet', method: 'POST', path: '/wallets/:id/send', params: ['id'] },
+      approve: { description: 'Approve or deny pending wallet transaction', method: 'POST', path: '/wallets/:id/approve', params: ['id'] },
+      transactions: { description: 'List wallet transactions', method: 'GET', path: '/wallets/:id/transactions', params: ['id'] },
+      'balance-history': { description: 'Get wallet balance history', method: 'GET', path: '/wallets/:id/balance-history', params: ['id'] },
+    },
+  },
   webhooks: {
     description: 'Inbound webhook triggers',
     commands: {

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

@@ -13,6 +13,7 @@ function sanitizeSvg(svg: string): string {
 
 interface Props {
   seed?: string | null
+  avatarUrl?: string | null
   name: string
   size?: number
   className?: string
@@ -27,7 +28,7 @@ const STATUS_COLORS: Record<string, string> = {
 
 const HEART_PATH = 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'
 
-export function AgentAvatar({ seed, name, size = 32, className = '', status, heartbeatPulse }: Props) {
+export function AgentAvatar({ seed, avatarUrl, name, size = 32, className = '', status, heartbeatPulse }: Props) {
   const svgHtml = useMemo(() => {
     if (!seed) return null
     return sanitizeSvg(multiavatar(seed))
@@ -53,6 +54,19 @@ export function AgentAvatar({ seed, name, size = 32, className = '', status, hea
     </svg>
   ) : null
 
+  if (avatarUrl) {
+    return (
+      <div className={`relative shrink-0 ${className}`} style={{ width: size, height: size }}>
+        <div className="rounded-full overflow-hidden w-full h-full">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={avatarUrl} alt={name} className="w-full h-full object-cover" draggable={false} />
+        </div>
+        {heartEl}
+        {dot}
+      </div>
+    )
+  }
+
   if (svgHtml) {
     return (
       <div className={`relative shrink-0 ${className}`} style={{ width: size, height: size }}>

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

@@ -157,6 +157,7 @@ export function AgentCard({ agent, isDefault, isRunning, isOnline, isSelected, o
         <div className="flex items-center gap-2.5">
           <AgentAvatar
             seed={agent.avatarSeed}
+            avatarUrl={agent.avatarUrl}
             name={agent.name}
             size={28}
             status={isRunning ? 'busy' : isOnline ? 'online' : undefined}

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

@@ -223,7 +223,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
             >
               <div className="flex items-center gap-2.5">
                 <div className="relative shrink-0">
-                  <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={36} />
+                  <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} 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'
                   }`} />

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

@@ -7,7 +7,8 @@ import { api } from '@/lib/api-client'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { toast } from 'sonner'
 import { ModelCombobox } from '@/components/shared/model-combobox'
-import type { ProviderType, ClaudeSkill } from '@/types'
+import type { ProviderType, ClaudeSkill, AgentWallet } from '@/types'
+import { WalletSection } from '@/components/wallets/wallet-section'
 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'
@@ -105,12 +106,15 @@ export function AgentSheet() {
   const [openclawEnabled, setOpenclawEnabled] = useState(false)
   const [projectId, setProjectId] = useState<string | undefined>(undefined)
   const [avatarSeed, setAvatarSeed] = useState('')
+  const [avatarUrl, setAvatarUrl] = useState<string | null>(null)
+  const [uploading, setUploading] = useState(false)
   const [thinkingLevel, setThinkingLevel] = useState<'' | 'minimal' | 'low' | 'medium' | 'high'>('')
   const [voiceId, setVoiceId] = useState('')
   const [heartbeatEnabled, setHeartbeatEnabled] = useState(false)
   const [heartbeatIntervalSec, setHeartbeatIntervalSec] = useState('')  // '' = default (30m)
   const [heartbeatModel, setHeartbeatModel] = useState('')
   const [heartbeatPrompt, setHeartbeatPrompt] = useState('')
+  const [agentWallet, setAgentWallet] = useState<(Omit<AgentWallet, 'encryptedPrivateKey'> & { balanceLamports?: number; balanceSol?: number }) | null>(null)
   const [addingKey, setAddingKey] = useState(false)
   const [newKeyName, setNewKeyName] = useState('')
   const [newKeyValue, setNewKeyValue] = useState('')
@@ -178,18 +182,27 @@ export function AgentSheet() {
         setMcpDisabledTools(editing.mcpDisabledTools || [])
         setFallbackCredentialIds(editing.fallbackCredentialIds || [])
         // platformAssignScope derived from isOrchestrator — no separate state
-        setCapabilities(editing.capabilities || [])
+        setCapabilities(Array.isArray(editing.capabilities) ? editing.capabilities : [])
         setCapInput('')
         setOllamaMode(editing.credentialId && editing.provider === 'ollama' ? 'cloud' : 'local')
         setOpenclawEnabled(editing.provider === 'openclaw')
         setProjectId(editing.projectId)
         setAvatarSeed(editing.avatarSeed || crypto.randomUUID().slice(0, 8))
+        setAvatarUrl(editing.avatarUrl || null)
         setThinkingLevel(editing.thinkingLevel || '')
         setVoiceId(editing.elevenLabsVoiceId || '')
         setHeartbeatEnabled(editing.heartbeatEnabled || false)
         setHeartbeatIntervalSec(parseDurationToSec(editing.heartbeatInterval, editing.heartbeatIntervalSec))
         setHeartbeatModel(editing.heartbeatModel || '')
         setHeartbeatPrompt(editing.heartbeatPrompt || '')
+        // Load wallet if agent has one
+        if (editing.walletId) {
+          api<Omit<AgentWallet, 'encryptedPrivateKey'> & { balanceLamports?: number; balanceSol?: number }>('GET', `/wallets/${editing.walletId}`)
+            .then(setAgentWallet)
+            .catch(() => setAgentWallet(null))
+        } else {
+          setAgentWallet(null)
+        }
       } else {
         setName('')
         setDescription('')
@@ -310,6 +323,7 @@ export function AgentSheet() {
       capabilities,
       projectId: projectId || undefined,
       avatarSeed: avatarSeed.trim() || undefined,
+      avatarUrl: avatarUrl || null,
       thinkingLevel: thinkingLevel || undefined,
       elevenLabsVoiceId: voiceId.trim() || null,
       heartbeatEnabled,
@@ -480,30 +494,82 @@ export function AgentSheet() {
 
       <div className="mb-8">
         <SectionLabel>Avatar</SectionLabel>
-        <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(crypto.randomUUID().slice(0, 8))}
-            className="inline-flex items-center gap-1.5 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] hover:text-text-2 active:scale-95 shrink-0"
-            style={{ fontFamily: 'inherit' }}
-            title="Shuffle avatar"
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-              <rect x="4" y="4" width="16" height="16" rx="2" />
-              <circle cx="9" cy="9" r="1" fill="currentColor" />
-              <circle cx="15" cy="15" r="1" fill="currentColor" />
-            </svg>
-            Shuffle
-          </button>
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center gap-4">
+            <div className="relative group shrink-0">
+              <AgentAvatar seed={avatarUrl ? null : (avatarSeed || null)} avatarUrl={avatarUrl} name={name || 'A'} size={64} />
+              <label className="absolute inset-0 rounded-full flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
+                  <circle cx="12" cy="13" r="4" />
+                </svg>
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={async (e) => {
+                    const file = e.target.files?.[0]
+                    if (!file) return
+                    setUploading(true)
+                    try {
+                      const res = await fetch('/api/upload', {
+                        method: 'POST',
+                        headers: { 'x-filename': file.name },
+                        body: await file.arrayBuffer(),
+                      })
+                      const data = await res.json()
+                      if (data.url) {
+                        setAvatarUrl(data.url)
+                        setAvatarSeed('')
+                      }
+                    } finally {
+                      setUploading(false)
+                      e.target.value = ''
+                    }
+                  }}
+                />
+              </label>
+            </div>
+            <div className="flex flex-col gap-1.5 flex-1 min-w-0">
+              {avatarUrl && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setAvatarUrl(null)
+                    if (!avatarSeed) setAvatarSeed(crypto.randomUUID().slice(0, 8))
+                  }}
+                  className="text-[11px] text-text-3 hover:text-red-400 transition-colors self-start cursor-pointer"
+                >
+                  Remove custom image
+                </button>
+              )}
+              {uploading && <span className="text-[11px] text-text-3">Uploading...</span>}
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <input
+              type="text"
+              value={avatarSeed}
+              onChange={(e) => { setAvatarSeed(e.target.value); setAvatarUrl(null) }}
+              placeholder="Avatar seed (any text)"
+              className={inputClass}
+              style={{ fontFamily: 'inherit', flex: 1 }}
+            />
+            <button
+              type="button"
+              onClick={() => { setAvatarSeed(crypto.randomUUID().slice(0, 8)); setAvatarUrl(null) }}
+              className="inline-flex items-center gap-1.5 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] hover:text-text-2 active:scale-95 shrink-0"
+              style={{ fontFamily: 'inherit' }}
+              title="Shuffle avatar"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <rect x="4" y="4" width="16" height="16" rx="2" />
+                <circle cx="9" cy="9" r="1" fill="currentColor" />
+                <circle cx="15" cy="15" r="1" fill="currentColor" />
+              </svg>
+              Shuffle
+            </button>
+          </div>
         </div>
       </div>
 
@@ -666,6 +732,26 @@ export function AgentSheet() {
         <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>
       </div>
 
+      {/* Wallet Section */}
+      {editingId && (
+        <WalletSection
+          agentId={editingId}
+          wallet={agentWallet}
+          onWalletCreated={async () => {
+            await loadAgents()
+            // Fetch the wallet for this agent
+            try {
+              const wallets = await api<Record<string, Omit<AgentWallet, 'encryptedPrivateKey'>>>('GET', '/wallets')
+              const match = Object.values(wallets).find((w) => w.agentId === editingId)
+              if (match) {
+                const detail = await api<Omit<AgentWallet, 'encryptedPrivateKey'> & { balanceLamports?: number; balanceSol?: number }>('GET', `/wallets/${match.id}`)
+                setAgentWallet(detail)
+              }
+            } catch { /* ignore */ }
+          }}
+        />
+      )}
+
       {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">

package/src/components/chat/chat-area.tsx

@@ -146,8 +146,8 @@ export function ChatArea() {
     if (!sessionId) return
     try {
       const msgs = await fetchMessages(sessionId)
-      if (msgs.length > messagesLenRef.current) {
-        const newMsgs = msgs.slice(messagesLenRef.current)
+      if (msgs.length !== messagesLenRef.current) {
+        const newMsgs = msgs.length > messagesLenRef.current ? msgs.slice(messagesLenRef.current) : []
         setMessages(msgs)
         if (ttsEnabledRef.current && typeof document !== 'undefined' && document.visibilityState === 'visible') {
           const latestAssistant = [...newMsgs].reverse().find((m) => {

package/src/components/chat/chat-header.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState, useMemo, useRef } from 'react'
+import { useEffect, useState, useMemo, useRef, useCallback } from 'react'
 import type { Session } from '@/types'
 import { useAppStore } from '@/stores/use-app-store'
 import { useChatStore } from '@/stores/use-chat-store'
@@ -17,6 +17,7 @@ import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { ModelCombobox } from '@/components/shared/model-combobox'
 import { toast } from 'sonner'
 import type { ProviderType } from '@/types'
+import { useWs } from '@/hooks/use-ws'
 
 function shortPath(p: string): string {
   return (p || '').replace(/^\/Users\/\w+/, '~')
@@ -106,6 +107,19 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const [renameError, setRenameError] = useState('')
   const renameInputRef = useRef<HTMLInputElement>(null)
   const renameContainerRef = useRef<HTMLSpanElement>(null)
+  const setWalletPanelAgentId = useAppStore((s) => s.setWalletPanelAgentId)
+  const [walletBalance, setWalletBalance] = useState<number | null>(null)
+
+  const fetchWalletBalance = useCallback(async () => {
+    if (!agent?.walletId) { setWalletBalance(null); return }
+    try {
+      const data = await api<{ balanceSol?: number }>('GET', `/wallets/${agent.walletId}`)
+      setWalletBalance(data.balanceSol ?? null)
+    } catch { setWalletBalance(null) }
+  }, [agent?.walletId])
+
+  useEffect(() => { fetchWalletBalance() }, [fetchWalletBalance])
+  useWs('wallets', fetchWalletBalance)
 
   // Find linked task for this session
   const linkedTask = useMemo(() => {
@@ -458,7 +472,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
   const hasToolToggles = ((agent?.tools?.length ?? 0) > 0) || ((session.tools?.length ?? 0) > 0)
   const hasMemoryLink = !!(agent && session.tools?.includes('memory'))
   const hasSourceFilter = !!hasMultipleSources
-  const hasContextBar = !!(hasToolToggles || isMainSession || hasMemoryLink || hasSourceFilter || linkedTask || resumeHandle || (isOpenClawAgent && openclawSessionKey) || browserActive)
+  const hasContextBar = !!(isMainSession || hasMemoryLink || hasSourceFilter || linkedTask || resumeHandle || (isOpenClawAgent && openclawSessionKey) || browserActive)
 
   return (
     <header
@@ -486,26 +500,26 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
           <div className="relative shrink-0">
             {streaming && (
               <div
-                className="absolute -inset-[3px] rounded-full opacity-40"
+                className="absolute -inset-[4px] rounded-full"
                 style={{
-                  background: 'conic-gradient(from 0deg, var(--color-accent-bright), transparent 120deg, transparent 240deg, var(--color-accent-bright))',
-                  animation: 'spin 2.5s linear infinite',
-                  filter: 'blur(3px)',
+                  background: 'radial-gradient(circle, var(--color-accent-bright), transparent 70%)',
+                  animation: 'pulse-glow 2s ease-in-out infinite',
+                  filter: 'blur(5px)',
                 }}
               />
             )}
             <div
-              className="relative rounded-full"
+              className="relative rounded-full transition-transform duration-500"
               style={{
                 padding: 2,
                 background: streaming
-                  ? 'conic-gradient(from 0deg, var(--color-accent-bright), transparent 120deg, transparent 240deg, var(--color-accent-bright))'
+                  ? 'linear-gradient(135deg, var(--color-accent-bright), var(--color-accent))'
                   : 'linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03))',
-                animation: streaming ? 'spin 2.5s linear infinite' : undefined,
+                animation: streaming ? 'avatar-pulse 2s ease-in-out infinite' : undefined,
               }}
             >
               <div className="rounded-full bg-bg">
-                <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={hasContextBar ? 44 : 34} />
+                <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={(hasContextBar || hasToolToggles) ? 44 : 34} />
               </div>
             </div>
           </div>
@@ -513,8 +527,9 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
 
         {/* Identity + metadata — fills center */}
         <div className="flex-1 min-w-0 flex items-center gap-3">
-          {/* Name + inline badges */}
-          <div className="flex items-center gap-2 min-w-0 shrink">
+          {/* Name (row 1) + tools (row 2) */}
+          <div className="flex flex-col gap-0.5 min-w-0 shrink">
+          <div className="flex items-center gap-2 min-w-0">
             {renaming && agent ? (
               <span ref={renameContainerRef} className="inline-flex items-center gap-2">
                 <input
@@ -585,10 +600,28 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
               <span className="shrink-0 w-2 h-2 rounded-full bg-accent-bright" style={{ animation: 'pulse 1.5s ease infinite' }} />
             )}
           </div>
+          {hasToolToggles && <ChatToolToggles session={session} />}
+          </div>
 
-          {/* Metadata tray: model · usage · path · status */}
+          {/* Metadata tray: wallet · model · path · status */}
           <div className="flex items-center gap-1.5 min-w-0 overflow-hidden">
             <span className="text-text-3/10 text-[10px] select-none shrink-0">/</span>
+            {walletBalance !== null && (
+              <>
+                <button
+                  type="button"
+                  onClick={() => { setWalletPanelAgentId(agent!.id); setActiveView('wallets') }}
+                  className="inline-flex items-center gap-1 shrink-0 bg-transparent border-none p-0.5 rounded-[4px] cursor-pointer text-[11px] text-text-3/45 font-mono hover:text-text-3/70 hover:bg-white/[0.04] transition-colors"
+                  title="View wallet"
+                >
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                    <rect x="2" y="6" width="20" height="14" rx="2" /><path d="M22 10H18a2 2 0 0 0 0 4h4" />
+                  </svg>
+                  {walletBalance.toFixed(3)} SOL
+                </button>
+                <span className="text-text-3/10 text-[10px] select-none shrink-0">·</span>
+              </>
+            )}
             {modelName && (
               <div className="relative shrink-0" ref={modelSwitcherRef}>
                 <button
@@ -727,7 +760,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
               </button>
               {hbDropdownOpen && (
                 <div className="absolute top-full right-0 mt-1 py-1 rounded-[10px] border border-white/[0.06] bg-bg/95 backdrop-blur-md shadow-lg z-50 min-w-[80px]">
-                  {[1800, 3600, 7200, 21600, 43200].map((sec) => (
+                  {[...(typeof window !== 'undefined' && window.location.hostname === 'localhost' ? [10, 15, 30, 60] : []), 1800, 3600, 7200, 21600, 43200].map((sec) => (
                     <button
                       key={sec}
                       onClick={() => handleSelectHeartbeatInterval(sec)}
@@ -809,11 +842,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
 
       {/* Context bar: tools, mission controls, links */}
       {hasContextBar && (
-        <div className="flex items-center gap-1.5 px-3.5 pb-1.5 overflow-x-auto scrollbar-none">
-          {hasToolToggles && <ChatToolToggles session={session} />}
-          {hasToolToggles && (hasMemoryLink || isMainSession || linkedTask || resumeHandle || isOpenClawAgent || browserActive) && (
-            <div className="w-px h-4 bg-white/[0.05] shrink-0" />
-          )}
+        <div className="flex items-center gap-1.5 px-3.5 pb-1.5 flex-wrap">
           {isMainSession && (
             <>
               <button

package/src/components/chat/chat-tool-toggles.tsx

@@ -76,7 +76,7 @@ export function ChatToolToggles({ session }: Props) {
               {group.tools.map((tool) => {
                 const enabled = sessionTools.includes(tool.id)
                 return (
-                  <label key={tool.id} className="flex items-center gap-2.5 py-1.5 cursor-pointer">
+                  <label key={tool.id} className="flex items-center gap-2.5 py-1.5 cursor-pointer" title={tool.description}>
                     <div
                       onClick={() => toggleTool(tool.id)}
                       className={`w-8 h-[18px] rounded-full transition-all duration-200 relative cursor-pointer shrink-0

package/src/components/chat/delegation-banner.test.ts

@@ -0,0 +1,27 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import { parseTaskCompletion } from './delegation-banner'
+
+describe('parseTaskCompletion', () => {
+  it('extracts output files and report path from completion payload', () => {
+    const text = [
+      'Task completed: **[Build docs](#task:abc12345)**',
+      '',
+      'Working directory: `/tmp/work`',
+      '',
+      'Output files:',
+      '- `docs/guide.md`',
+      '- `docs/faq.md`',
+      '',
+      'Task report: `data/task-reports/abc12345.md`',
+      '',
+      'Done.',
+    ].join('\n')
+    const parsed = parseTaskCompletion(text)
+    assert.ok(parsed)
+    assert.deepEqual(parsed?.outputFiles, ['docs/guide.md', 'docs/faq.md'])
+    assert.equal(parsed?.reportPath, 'data/task-reports/abc12345.md')
+    assert.equal(parsed?.workingDir, '/tmp/work')
+  })
+})
+