@swarmclawai/swarmclaw 0.6.4 → 0.6.6

package/src/components/chat/delegation-banner.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
 import { useAppStore } from '@/stores/use-app-store'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { api } from '@/lib/api-client'
@@ -10,6 +10,7 @@ type DelegationStatus = 'delegating' | 'checking' | 'completed' | 'failed'
 interface DelegationBannerProps {
   agentName: string
   agentAvatarSeed: string | null
+  agentAvatarUrl?: string | null
   taskPreview: string
   taskId: string | null
   status: DelegationStatus
@@ -60,7 +61,7 @@ function statusText(status: DelegationStatus, name: string): string {
   }
 }
 
-export function DelegationBanner({ agentName, agentAvatarSeed, taskPreview, taskId, status }: DelegationBannerProps) {
+export function DelegationBanner({ agentName, agentAvatarSeed, agentAvatarUrl, taskPreview, taskId, status }: DelegationBannerProps) {
   const cfg = STATUS_CONFIG[status]
 
   const handleTaskClick = () => {
@@ -83,7 +84,7 @@ export function DelegationBanner({ agentName, agentAvatarSeed, taskPreview, task
       }}
     >
       <div className="shrink-0" style={{ animation: 'delegation-handoff-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both' }}>
-        <AgentAvatar seed={agentAvatarSeed} name={agentName} size={24} />
+        <AgentAvatar seed={agentAvatarSeed} avatarUrl={agentAvatarUrl} name={agentName} size={24} />
       </div>
       <StatusIcon status={status} color={cfg.color} />
       <div className="flex flex-col gap-0.5 min-w-0 flex-1">
@@ -120,6 +121,8 @@ export interface TaskCompletionInfo {
   /** The agent that executed the task (present on delegated results) */
   executorName: string | null
   workingDir: string | null
+  reportPath: string | null
+  outputFiles: string[]
   resumeInfo: string | null
   resultBody: string
   imageUrl?: string
@@ -140,12 +143,32 @@ export function parseTaskCompletion(text: string): TaskCompletionInfo | null {
   const sections = bodyStart === -1 ? [] : text.slice(bodyStart + 2).split('\n\n')
 
   let workingDir: string | null = null
+  let reportPath: string | null = null
+  const outputFiles: string[] = []
   let resumeInfo: string | null = null
   const resultParts: string[] = []
 
   for (const section of sections) {
     if (section.startsWith('Working directory: ')) {
       workingDir = section.replace('Working directory: ', '').replace(/^`|`$/g, '')
+    } else if (section.startsWith('Output files:')) {
+      const fromBackticks = [...section.matchAll(/`([^`\n]+)`/g)].map((m) => (m[1] || '').trim()).filter(Boolean)
+      if (fromBackticks.length > 0) {
+        for (const fileRef of fromBackticks) {
+          if (!outputFiles.includes(fileRef)) outputFiles.push(fileRef)
+        }
+      } else {
+        const fromBullets = section
+          .split('\n')
+          .slice(1)
+          .map((line) => line.replace(/^\s*-\s*/, '').trim())
+          .filter(Boolean)
+        for (const fileRef of fromBullets) {
+          if (!outputFiles.includes(fileRef)) outputFiles.push(fileRef)
+        }
+      }
+    } else if (section.startsWith('Task report: ')) {
+      reportPath = section.replace('Task report: ', '').replace(/^`|`$/g, '')
     } else if (/^(Claude session|Codex thread|OpenCode session|CLI session):/.test(section)) {
       resumeInfo = section
     } else if (section.trim()) {
@@ -153,12 +176,21 @@ export function parseTaskCompletion(text: string): TaskCompletionInfo | null {
     }
   }
 
-  return { status, taskTitle, taskId, executorName, workingDir, resumeInfo, resultBody: resultParts.join('\n\n') }
+  return {
+    status,
+    taskTitle,
+    taskId,
+    executorName,
+    workingDir,
+    reportPath,
+    outputFiles,
+    resumeInfo,
+    resultBody: resultParts.join('\n\n'),
+  }
 }
 
 export function TaskCompletionCard({ info }: { info: TaskCompletionInfo }) {
   const isSuccess = info.status === 'completed'
-  const [expanded, setExpanded] = useState(false)
 
   const handleTaskClick = () => {
     if (!info.taskId) return
@@ -170,10 +202,6 @@ export function TaskCompletionCard({ info }: { info: TaskCompletionInfo }) {
     })
   }
 
-  // Truncate result for preview
-  const resultPreview = info.resultBody.length > 200 ? info.resultBody.slice(0, 200) + '...' : info.resultBody
-  const hasLongResult = info.resultBody.length > 200
-
   return (
     <div
       className="rounded-[14px] overflow-hidden"
@@ -278,6 +306,47 @@ export function TaskCompletionCard({ info }: { info: TaskCompletionInfo }) {
           </div>
         )}
 
+        {info.outputFiles.length > 0 && (
+          <div className="flex flex-col gap-1">
+            <span className="text-[11px] text-text-3/55">Output files</span>
+            <div className="flex flex-wrap gap-1.5">
+              {info.outputFiles.map((fileRef) => {
+                const openPath = info.workingDir && !fileRef.startsWith('/') && !fileRef.startsWith('~/')
+                  ? `${info.workingDir.replace(/\/$/, '')}/${fileRef}`
+                  : fileRef
+                return (
+                  <button
+                    key={fileRef}
+                    type="button"
+                    onClick={() => { api('POST', '/files/open', { path: openPath }).catch(() => {}) }}
+                    className="px-2 py-1 rounded-[7px] text-[10px] font-mono bg-white/[0.03] border border-white/[0.08] text-text-3/70 hover:text-text-3 cursor-pointer max-w-full truncate"
+                    title={`Open ${openPath}`}
+                  >
+                    {fileRef}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        )}
+
+        {info.reportPath && (
+          <div className="flex items-center gap-2">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="shrink-0 text-text-3/40">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+            </svg>
+            <button
+              type="button"
+              onClick={() => { api('POST', '/files/open', { path: info.reportPath }).catch(() => {}) }}
+              className="text-[11px] text-text-3/60 hover:text-text-3 font-mono truncate bg-transparent border-none p-0 cursor-pointer transition-colors"
+              title="Open task report"
+            >
+              {info.reportPath}
+            </button>
+          </div>
+        )}
+
         {/* Image artifact */}
         {info.imageUrl && (
           <div className="mt-0.5">
@@ -295,19 +364,35 @@ export function TaskCompletionCard({ info }: { info: TaskCompletionInfo }) {
         {/* Result body */}
         {info.resultBody && (
           <div className="mt-0.5">
-            <div className="rounded-[10px] bg-white/[0.02] border border-white/[0.04] px-3 py-2.5">
-              <pre className="text-[12px] leading-[1.6] text-text-3/80 whitespace-pre-wrap break-words m-0 font-mono">
-                {expanded ? info.resultBody : resultPreview}
-              </pre>
-              {hasLongResult && (
-                <button
-                  type="button"
-                  onClick={() => setExpanded((v) => !v)}
-                  className="mt-2 text-[11px] font-600 text-text-3/50 hover:text-text-3 bg-transparent border-none cursor-pointer p-0 transition-colors"
+            <div className="rounded-[10px] bg-white/[0.02] border border-white/[0.04] px-3 py-2.5 max-h-[260px] overflow-y-auto">
+              <div className="text-[12px] leading-[1.6] text-text-3/80 break-words">
+                <ReactMarkdown
+                  components={{
+                    a: ({ href, children }) => (
+                      <a
+                        href={href}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-emerald-300 hover:text-emerald-200 underline decoration-emerald-300/40"
+                      >
+                        {children}
+                      </a>
+                    ),
+                    img: ({ src, alt }) => (
+                      // eslint-disable-next-line @next/next/no-img-element
+                      <img
+                        src={src || ''}
+                        alt={alt || 'Task artifact'}
+                        loading="lazy"
+                        className="max-w-full rounded-[8px] border border-white/[0.08] my-2"
+                      />
+                    ),
+                    p: ({ children }) => <p className="m-0 mb-2">{children}</p>,
+                  }}
                 >
-                  {expanded ? 'Show less' : 'Show full result'}
-                </button>
-              )}
+                  {info.resultBody}
+                </ReactMarkdown>
+              </div>
             </div>
           </div>
         )}
@@ -321,12 +406,13 @@ export function TaskCompletionCard({ info }: { info: TaskCompletionInfo }) {
 interface DelegationSourceBannerProps {
   delegatorName: string
   delegatorAvatarSeed: string | null
+  delegatorAvatarUrl?: string | null
   taskTitle: string
   taskId: string | null
   description: string
 }
 
-export function DelegationSourceBanner({ delegatorName, delegatorAvatarSeed, taskTitle, taskId, description }: DelegationSourceBannerProps) {
+export function DelegationSourceBanner({ delegatorName, delegatorAvatarSeed, delegatorAvatarUrl, taskTitle, taskId, description }: DelegationSourceBannerProps) {
   const handleTaskClick = () => {
     if (!taskId) return
     const store = useAppStore.getState()
@@ -343,7 +429,7 @@ export function DelegationSourceBanner({ delegatorName, delegatorAvatarSeed, tas
       style={{ animation: 'delegation-handoff-in 0.45s cubic-bezier(0.16, 1, 0.3, 1)' }}
     >
       <div className="shrink-0 mt-0.5" style={{ animation: 'delegation-handoff-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both' }}>
-        <AgentAvatar seed={delegatorAvatarSeed} name={delegatorName} size={24} />
+        <AgentAvatar seed={delegatorAvatarSeed} avatarUrl={delegatorAvatarUrl} name={delegatorName} size={24} />
       </div>
       <div className="flex flex-col gap-1 min-w-0 flex-1">
         <span className="text-[12px] font-600 text-indigo-400">

package/src/components/chat/message-bubble.tsx

@@ -136,6 +136,7 @@ interface Props {
   message: Message
   assistantName?: string
   agentAvatarSeed?: string
+  agentAvatarUrl?: string | null
   agentName?: string
   isLast?: boolean
   onRetry?: () => void
@@ -147,7 +148,7 @@ interface Props {
   momentOverlay?: React.ReactNode
 }
 
-export const MessageBubble = memo(function MessageBubble({ message, assistantName, agentAvatarSeed, agentName, isLast, onRetry, messageIndex, onToggleBookmark, onEditResend, onFork, onTransferToAgent, momentOverlay }: Props) {
+export const MessageBubble = memo(function MessageBubble({ message, assistantName, agentAvatarSeed, agentAvatarUrl, agentName, isLast, onRetry, messageIndex, onToggleBookmark, onEditResend, onFork, onTransferToAgent, momentOverlay }: Props) {
   const isUser = message.role === 'user'
   const isHeartbeat = !isUser && (message.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(message.text || ''))
   const currentUser = useAppStore((s) => s.currentUser)
@@ -231,7 +232,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
       {!isUser && (
         <div className="absolute left-[4px] top-0">
           <div style={momentOverlay ? { animation: 'avatar-moment-pulse 0.6s ease' } : undefined}>
-            {agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={28} /> : <AiAvatar size="sm" />}
+            {agentName ? <AgentAvatar seed={agentAvatarSeed || null} avatarUrl={agentAvatarUrl} name={agentName} size={28} /> : <AiAvatar size="sm" />}
           </div>
           {momentOverlay}
         </div>

package/src/components/chat/message-list.tsx

@@ -439,7 +439,7 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
           )}
           {filteredMessages.length === 0 && !streaming && (
             <div className="flex flex-col items-center justify-center gap-3 py-20 text-center" style={{ animation: 'fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both' }}>
-              <AgentAvatar seed={agent?.avatarSeed || null} name={agent?.name || 'Agent'} size={48} />
+              <AgentAvatar seed={agent?.avatarSeed || null} avatarUrl={agent?.avatarUrl} name={agent?.name || 'Agent'} size={48} />
               <span className="font-display text-[16px] font-600 text-text-2">{agent?.name || 'Assistant'}</span>
               <span className="text-[14px] text-text-3/60">
                 {INTRO_GREETINGS[stableHash(agent?.id || session?.id || '') % INTRO_GREETINGS.length]}
@@ -526,6 +526,7 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
                     message={msg}
                     assistantName={assistantName}
                     agentAvatarSeed={agent?.avatarSeed}
+                    agentAvatarUrl={agent?.avatarUrl}
                     agentName={agent?.name}
                     isLast={isLastAssistant}
                     onRetry={isLastAssistant ? retryLastMessage : undefined}
@@ -540,9 +541,9 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
             )
           })}
           <ApprovalCards agentId={agent?.id} />
-          {streaming && !displayText && <ThinkingIndicator assistantName={assistantName} agentAvatarSeed={agent?.avatarSeed} agentName={agent?.name} />}
-          {streaming && displayText && <StreamingBubble text={displayText} assistantName={assistantName} agentAvatarSeed={agent?.avatarSeed} agentName={agent?.name} />}
-          {appSettings.suggestionsEnabled !== false && !streaming && filteredMessages.length > 0 && filteredMessages[filteredMessages.length - 1]?.role === 'assistant' && (
+          {streaming && !displayText && <ThinkingIndicator assistantName={assistantName} agentAvatarSeed={agent?.avatarSeed} agentAvatarUrl={agent?.avatarUrl} agentName={agent?.name} />}
+          {streaming && displayText && <StreamingBubble text={displayText} assistantName={assistantName} agentAvatarSeed={agent?.avatarSeed} agentAvatarUrl={agent?.avatarUrl} agentName={agent?.name} />}
+          {appSettings.suggestionsEnabled === true && !streaming && filteredMessages.length > 0 && filteredMessages[filteredMessages.length - 1]?.role === 'assistant' && (
             <SuggestionsBar lastMessage={filteredMessages[filteredMessages.length - 1]} onSend={sendMessage} />
           )}
         </div>

package/src/components/chat/streaming-bubble.tsx

@@ -104,10 +104,11 @@ interface Props {
   text: string
   assistantName?: string
   agentAvatarSeed?: string
+  agentAvatarUrl?: string | null
   agentName?: string
 }
 
-export function StreamingBubble({ text, assistantName, agentAvatarSeed, agentName }: Props) {
+export function StreamingBubble({ text, assistantName, agentAvatarSeed, agentAvatarUrl, agentName }: Props) {
   const toolEvents = useChatStore((s) => s.toolEvents)
   const streamPhase = useChatStore((s) => s.streamPhase)
   const streamToolName = useChatStore((s) => s.streamToolName)
@@ -137,7 +138,7 @@ export function StreamingBubble({ text, assistantName, agentAvatarSeed, agentNam
       style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}
     >
       <div className="absolute left-[4px] top-0 relative">
-        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={28} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
+        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} avatarUrl={agentAvatarUrl} name={agentName} size={28} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
         {currentMoment && (
           <ActivityMoment
             key={currentMoment.id}

package/src/components/chat/thinking-indicator.tsx

@@ -10,6 +10,7 @@ import { useChatStore } from '@/stores/use-chat-store'
 interface Props {
   assistantName?: string
   agentAvatarSeed?: string
+  agentAvatarUrl?: string | null
   agentName?: string
 }
 
@@ -34,7 +35,7 @@ function ElapsedTimer({ startTime }: { startTime: number }) {
   )
 }
 
-export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentName }: Props) {
+export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentAvatarUrl, agentName }: Props) {
   const streamPhase = useChatStore((s) => s.streamPhase)
   const streamToolName = useChatStore((s) => s.streamToolName)
   const thinkingText = useChatStore((s) => s.thinkingText)
@@ -50,7 +51,7 @@ export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentName }:
     <div className="flex flex-col items-start relative pl-[44px]"
       style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}>
       <div className="absolute left-[4px] top-0">
-        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={28} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
+        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} avatarUrl={agentAvatarUrl} name={agentName} size={28} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
       </div>
       <div className="flex items-center gap-2.5 mb-2 px-1">
         <span className="text-[12px] font-600 text-text-3">{assistantName || 'Claude'}</span>

package/src/components/chat/transfer-agent-picker.tsx

@@ -52,7 +52,7 @@ export function TransferAgentPicker({ excludeIds, filterIds, onSelect, onClose }
               className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-white/[0.06] transition-colors cursor-pointer bg-transparent border-none"
               style={{ fontFamily: 'inherit' }}
             >
-              <AgentAvatar seed={a.avatarSeed} name={a.name} size={20} />
+              <AgentAvatar seed={a.avatarSeed} avatarUrl={a.avatarUrl} name={a.name} size={20} />
               <span className="text-[12px] text-text truncate">{a.name}</span>
             </button>
           ))}

package/src/components/chatrooms/agent-hover-card.tsx

@@ -46,7 +46,7 @@ export function AgentHoverCard({ agent, children, status }: Props) {
       <HoverCardContent align="start" className="w-[280px]">
         {/* Header: avatar + name + model */}
         <div className="flex items-center gap-2">
-          <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={28} status={status} />
+          <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={28} status={status} />
           <div className="min-w-0 flex-1">
             <div className="text-[13px] font-600 text-text truncate">{agent.name}</div>
             <div className="label-mono truncate">{agent.model}</div>

package/src/components/chatrooms/chatroom-input.tsx

@@ -203,7 +203,7 @@ export function ChatroomInput({ agents, onSend, disabled }: Props) {
                 selectedIndex === i + 1 ? 'bg-white/[0.08]' : 'hover:bg-white/[0.06]'
               }`}
             >
-              <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={20} />
+              <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={20} />
               <span className="text-[13px] text-text">{agent.name}</span>
             </button>
           ))}

package/src/components/chatrooms/chatroom-message.tsx

@@ -172,7 +172,7 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
               className="bg-transparent border-none p-0 cursor-pointer transition-all duration-150 hover:scale-110 hover:-translate-y-0.5"
               style={momentOverlay ? { animation: 'avatar-moment-pulse 0.6s ease' } : undefined}
             >
-              <AgentAvatar seed={agent.avatarSeed || null} name={message.senderName} size={28} status={streamingAgentIds?.has(message.senderId) ? 'busy' : 'online'} />
+              <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={message.senderName} size={28} status={streamingAgentIds?.has(message.senderId) ? 'busy' : 'online'} />
             </button>
           ) : (
             <div style={momentOverlay ? { animation: 'avatar-moment-pulse 0.6s ease' } : undefined}>

package/src/components/chatrooms/chatroom-sheet.tsx

@@ -178,7 +178,7 @@ export function ChatroomSheet() {
                         selected ? 'bg-accent-soft/40' : 'hover:bg-white/[0.04]'
                       }`}
                     >
-                      <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                      <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
                       <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
                       {selected && (
                         <CheckIcon size={14} className="text-accent-bright shrink-0" />

package/src/components/chatrooms/chatroom-typing-bar.tsx

@@ -63,7 +63,7 @@ export function ChatroomTypingBar({ streamingAgents }: Props) {
         return (
           <div key={agentId} className="flex gap-2.5 px-4 py-1.5" style={{ animation: 'msg-in 0.2s ease-out both' }}>
             <div className="shrink-0 mt-0.5 w-7">
-              <AgentAvatar seed={agent?.avatarSeed || null} name={a.name} size={28} />
+              <AgentAvatar seed={agent?.avatarSeed || null} avatarUrl={agent?.avatarUrl} name={a.name} size={28} />
             </div>
             <div className="flex-1 min-w-0">
               <div className="flex items-baseline gap-2 mb-0.5">

package/src/components/chatrooms/chatroom-view.tsx

@@ -192,7 +192,7 @@ export function ChatroomView() {
                   onClick={() => navigateToAgent(agent.id)}
                   className="relative transition-all duration-200 hover:scale-110 hover:z-10 hover:-translate-y-0.5 cursor-pointer bg-transparent border-none p-0"
                 >
-                  <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={22} status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
+                  <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={22} status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
                 </button>
               </TooltipTrigger>
               <TooltipContent side="bottom" sideOffset={6}>

package/src/components/connectors/connector-list.tsx

@@ -206,7 +206,7 @@ export function ConnectorList({ inSidebar }: { inSidebar?: boolean }) {
                   </>
                 ) : agent ? (
                   <>
-                    <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={24} />
+                    <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
                     <div className="flex-1 min-w-0">
                       <span className="text-[12px] font-600 text-text-2 block truncate">{agent.name}</span>
                       <span className="text-[10px] text-text-3/60 block">{agent.provider}/{agent.model}</span>

package/src/components/home/home-view.tsx

@@ -353,7 +353,7 @@ export function HomeView() {
                     style={{ fontFamily: 'inherit' }}
                   >
                     <div className="relative">
-                      <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={36} />
+                      <AgentAvatar seed={agent.avatarSeed} 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-surface ${
                         isTyping ? 'bg-accent-bright animate-pulse'
                           : isOnline ? 'bg-emerald-400 shadow-[0_0_6px_rgba(52,211,153,0.4)]'
@@ -414,6 +414,7 @@ export function HomeView() {
                   >
                     <AgentAvatar
                       seed={agent?.avatarSeed}
+                      avatarUrl={agent?.avatarUrl}
                       name={displayName}
                       size={28}
                     />

package/src/components/knowledge/knowledge-list.tsx

@@ -183,7 +183,7 @@ export function KnowledgeList() {
                     <div className="flex items-center gap-1.5">
                       <div className="flex items-center -space-x-1.5">
                         {scopedAgents.slice(0, 5).map((agent) => (
-                          <AgentAvatar key={agent.id} seed={agent.avatarSeed} name={agent.name} size={16} className="ring-1 ring-surface" />
+                          <AgentAvatar key={agent.id} seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={16} className="ring-1 ring-surface" />
                         ))}
                       </div>
                       {scopedAgents.length > 5 && (

package/src/components/knowledge/knowledge-sheet.tsx

@@ -360,7 +360,7 @@ export function KnowledgeSheet() {
                     }`}
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                    <AgentAvatar seed={agent.avatarSeed} avatarUrl={agent.avatarUrl} name={agent.name} size={24} />
                     <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
                     {selected && (
                       <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright shrink-0">

package/src/components/layout/app-layout.tsx

@@ -41,6 +41,7 @@ import { PluginSheet } from '@/components/plugins/plugin-sheet'
 import { RunList } from '@/components/runs/run-list'
 import { ActivityFeed } from '@/components/activity/activity-feed'
 import { MetricsDashboard } from '@/components/usage/metrics-dashboard'
+import { WalletPanel } from '@/components/wallets/wallet-panel'
 import { ProjectList } from '@/components/projects/project-list'
 import { ProjectDetail } from '@/components/projects/project-detail'
 import { ProjectSheet } from '@/components/projects/project-sheet'
@@ -398,6 +399,11 @@ export function AppLayout() {
                 <line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" />
               </svg>
             </NavItem>
+            <NavItem view="wallets" label="Wallets" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('wallets')}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="2" y="6" width="20" height="14" rx="2" /><path d="M22 10H18a2 2 0 0 0 0 4h4" /><path d="M6 6V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2" />
+              </svg>
+            </NavItem>
             <NavItem view="runs" label="Runs" expanded={railExpanded} active={activeView} sidebarOpen={sidebarOpen} onClick={() => handleNavClick('runs')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
@@ -519,8 +525,8 @@ export function AppLayout() {
         </div>
       )}
 
-      {/* Desktop: Side panel */}
-      {isDesktop && sidebarOpen && (
+      {/* Desktop: Side panel (wallets has its own built-in sidebar) */}
+      {isDesktop && sidebarOpen && activeView !== 'wallets' && (
         <div
           className="w-[280px] shrink-0 bg-raised border-r border-white/[0.04] flex flex-col h-full"
           style={{ animation: 'panel-in 0.2s cubic-bezier(0.16, 1, 0.3, 1)' }}
@@ -727,6 +733,8 @@ export function AppLayout() {
             <ActivityFeed />
           ) : activeView === 'usage' ? (
             <MetricsDashboard />
+          ) : activeView === 'wallets' ? (
+            <WalletPanel />
           ) : activeView === 'chatrooms' ? (
             <div className="flex-1 flex h-full min-w-0">
               <div className="w-[280px] shrink-0 border-r border-white/[0.06] flex flex-col">
@@ -886,6 +894,7 @@ const VIEW_DESCRIPTIONS: Record<AppView, string> = {
   logs: 'Application logs & error tracking',
   plugins: 'Extend agent capabilities with custom plugins',
   usage: 'Usage metrics, cost tracking & agent performance',
+  wallets: 'Agent crypto wallets — hold funds, send SOL, manage spending',
   runs: 'Live run monitoring & history',
   settings: 'Manage providers, API keys & orchestrator engine',
   projects: 'Group agents, tasks & schedules into projects',
@@ -895,7 +904,7 @@ const VIEW_DESCRIPTIONS: Record<AppView, string> = {
 const FULL_WIDTH_VIEWS = new Set<AppView>([
   'home', 'chatrooms', 'schedules', 'secrets', 'providers', 'skills',
   'connectors', 'webhooks', 'mcp_servers', 'knowledge', 'plugins',
-  'usage', 'runs', 'logs', 'settings', 'activity', 'projects',
+  'usage', 'wallets', 'runs', 'logs', 'settings', 'activity', 'projects',
 ])
 
 const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents' | 'home'>, { icon: string; title: string; description: string; features: string[] }> = {
@@ -1007,6 +1016,12 @@ const VIEW_EMPTY_STATES: Record<Exclude<AppView, 'agents' | 'home'>, { icon: str
     description: 'Audit trail of all entity mutations across the system.',
     features: ['Track agent, task, and connector changes', 'Filter by entity type and action', 'Real-time updates via WebSocket', 'Relative timestamps'],
   },
+  wallets: {
+    icon: 'wallet',
+    title: 'Wallets',
+    description: 'Agent crypto wallets for autonomous financial operations on Solana.',
+    features: ['Create Solana wallets for agents', 'Per-transaction and daily spending limits', 'User approval for transactions', 'Balance tracking and transaction history'],
+  },
 }
 
 function ViewEmptyState({ view }: { view: AppView }) {

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

@@ -120,7 +120,7 @@ export function MemoryAgentList() {
               {isActive && (
                 <div className="absolute left-0 top-2 bottom-2 w-[2.5px] rounded-full bg-accent-bright" />
               )}
-              <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={28} />
+              <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={28} />
               <span className={`text-[13px] font-600 flex-1 truncate ${isActive ? 'text-accent-bright' : 'text-text-2'}`}>
                 {agent.name}
               </span>

package/src/components/memory/memory-browser.tsx

@@ -163,6 +163,7 @@ export function MemoryBrowser() {
                     active={e.id === selectedMemoryId}
                     agentName={showAgent ? (agent?.name || null) : undefined}
                     agentAvatarSeed={showAgent ? (agent?.avatarSeed || null) : undefined}
+                    agentAvatarUrl={showAgent ? (agent?.avatarUrl || null) : undefined}
                     onClick={() => setSelectedMemoryId(e.id)}
                   />
                 )

package/src/components/memory/memory-card.tsx

@@ -17,10 +17,11 @@ interface Props {
   active?: boolean
   agentName?: string | null
   agentAvatarSeed?: string | null
+  agentAvatarUrl?: string | null
   onClick: () => void
 }
 
-export function MemoryCard({ entry, active, agentName, agentAvatarSeed, onClick }: Props) {
+export function MemoryCard({ entry, active, agentName, agentAvatarSeed, agentAvatarUrl, onClick }: Props) {
   return (
     <div
       onClick={onClick}
@@ -73,7 +74,7 @@ export function MemoryCard({ entry, active, agentName, agentAvatarSeed, onClick
       )}
       {agentName ? (
         <div className="flex items-center gap-1.5 mt-1.5">
-          <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={16} />
+          <AgentAvatar seed={agentAvatarSeed || null} avatarUrl={agentAvatarUrl} name={agentName} size={16} />
           <span className="text-[10px] text-text-3/60 truncate">{agentName}</span>
         </div>
       ) : !entry.agentId ? (

package/src/components/memory/memory-detail.tsx

@@ -329,7 +329,7 @@ export function MemoryDetail() {
                           : 'bg-white/[0.02] border-white/[0.06] text-text-3 hover:text-text-2 hover:bg-white/[0.04]'}`}
                       style={{ fontFamily: 'inherit' }}
                     >
-                      <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={16} />
+                      <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={16} />
                       <span className="truncate max-w-[100px]">{agent.name}</span>
                     </button>
                   ))}
@@ -360,7 +360,7 @@ export function MemoryDetail() {
                                 : 'bg-white/[0.02] border-white/[0.06] text-text-3 hover:text-text-2 hover:bg-white/[0.04]'}`}
                             style={{ fontFamily: 'inherit' }}
                           >
-                            <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={16} />
+                            <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={16} />
                             <span className="truncate max-w-[100px]">{agent.name}</span>
                           </button>
                         )
@@ -406,7 +406,7 @@ export function MemoryDetail() {
                       const a = agents[aid]
                       return (
                         <span key={aid} className="flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-white/[0.03] text-[11px] text-text-3">
-                          <AgentAvatar seed={a?.avatarSeed || null} name={a?.name || aid} size={16} />
+                          <AgentAvatar seed={a?.avatarSeed || null} avatarUrl={a?.avatarUrl} name={a?.name || aid} size={16} />
                           {a?.name || aid}
                         </span>
                       )

package/src/components/memory/memory-sheet.tsx

@@ -104,7 +104,7 @@ export function MemorySheet() {
                   : 'bg-white/[0.02] border-white/[0.06] text-text-3 hover:text-text-2 hover:bg-white/[0.04]'}`}
               style={{ fontFamily: 'inherit' }}
             >
-              <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={20} />
+              <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={20} />
               <span className="truncate max-w-[120px]">{agent.name}</span>
             </button>
           ))}
@@ -140,7 +140,7 @@ export function MemorySheet() {
                         : 'bg-white/[0.02] border-white/[0.06] text-text-3 hover:text-text-2 hover:bg-white/[0.04]'}`}
                     style={{ fontFamily: 'inherit' }}
                   >
-                    <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={20} />
+                    <AgentAvatar seed={agent.avatarSeed || null} avatarUrl={agent.avatarUrl} name={agent.name} size={20} />
                     <span className="truncate max-w-[120px]">{agent.name}</span>
                   </button>
                 )