@swarmclawai/swarmclaw 0.6.3 → 0.6.6

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

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

@@ -90,6 +90,12 @@ const STATUS_COLORS: Record<string, string> = {
   blocked: '#EF4444',
 }
 
+function isGeneratedBrowserScreenshot(url: string): boolean {
+  const match = url.match(/\/api\/uploads\/([^/?#]+)/)
+  if (!match?.[1]) return false
+  return /^(browser|screenshot)-\d+\./i.test(match[1])
+}
+
 // AttachmentChip, parseAttachmentUrl, regex constants, and FILE_TYPE_COLORS
 // are now imported from @/components/shared/attachment-chip
 
@@ -130,6 +136,7 @@ interface Props {
   message: Message
   assistantName?: string
   agentAvatarSeed?: string
+  agentAvatarUrl?: string | null
   agentName?: string
   isLast?: boolean
   onRetry?: () => void
@@ -141,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)
@@ -162,6 +169,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
     // Collect URLs from the visible (last) tool event to avoid showing duplicates
     const lastOutput = toolEvents[toolEvents.length - 1]?.output || ''
     const visibleMedia = extractMedia(lastOutput)
+    const hasNamedVisibleImage = visibleMedia.images.some((url) => !isGeneratedBrowserScreenshot(url))
     const seen = new Set<string>([
       ...visibleMedia.images,
       ...visibleMedia.videos,
@@ -175,7 +183,10 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
     for (const ev of toolEvents.slice(0, -1)) {
       if (!ev.output) continue
       const m = extractMedia(ev.output)
-      for (const url of m.images) { if (!seen.has(url)) { seen.add(url); images.push(url) } }
+      for (const url of m.images) {
+        if (hasNamedVisibleImage && isGeneratedBrowserScreenshot(url)) continue
+        if (!seen.has(url)) { seen.add(url); images.push(url) }
+      }
       for (const url of m.videos) { if (!seen.has(url)) { seen.add(url); videos.push(url) } }
       for (const p of m.pdfs) { if (!seen.has(p.url)) { seen.add(p.url); pdfs.push(p) } }
       for (const f of m.files) { if (!seen.has(f.url)) { seen.add(f.url); files.push(f) } }
@@ -221,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/tool-call-bubble.test.ts

@@ -0,0 +1,28 @@
+import { describe, it } from 'node:test'
+import assert from 'node:assert/strict'
+import { extractMedia } from './tool-call-bubble'
+
+describe('extractMedia', () => {
+  it('dedupes browser-* screenshot variants when screenshot-* exists', () => {
+    const output = [
+      '![Screenshot](/api/uploads/browser-1772498741525.png)',
+      '![Screenshot](/api/uploads/screenshot-1772498741526.png)',
+      'Saved to: example_screenshot.png',
+    ].join('\n')
+
+    const media = extractMedia(output)
+    assert.deepEqual(media.images, ['/api/uploads/screenshot-1772498741526.png'])
+    assert.equal(media.cleanText, 'Saved to: example_screenshot.png')
+  })
+
+  it('keeps browser-* screenshot when it is the only image artifact', () => {
+    const output = [
+      '![Screenshot](/api/uploads/browser-1772498741525.png)',
+      'Saved to: example_screenshot.png',
+    ].join('\n')
+
+    const media = extractMedia(output)
+    assert.deepEqual(media.images, ['/api/uploads/browser-1772498741525.png'])
+    assert.equal(media.cleanText, 'Saved to: example_screenshot.png')
+  })
+})

package/src/components/chat/tool-call-bubble.tsx

@@ -265,6 +265,7 @@ export function extractMedia(output: string): { images: string[]; videos: string
   const videos: string[] = []
   const pdfs: { name: string; url: string }[] = []
   const files: { name: string; url: string }[] = []
+  const imageEntries: Array<{ filename: string; url: string }> = []
 
   // Extract ![alt](/api/uploads/filename) — detect videos vs images by extension
   let cleanText = output.replace(/!\[([^\]]*)\]\(\/api\/uploads\/([^)]+)\)/g, (_match, _alt, filename) => {
@@ -272,7 +273,7 @@ export function extractMedia(output: string): { images: string[]; videos: string
     if (/\.(mp4|webm|mov|avi)$/i.test(filename)) {
       videos.push(url)
     } else {
-      images.push(url)
+      imageEntries.push({ filename, url })
     }
     return ''
   })
@@ -291,6 +292,17 @@ export function extractMedia(output: string): { images: string[]; videos: string
   // Clean up leftover whitespace
   cleanText = cleanText.replace(/\n{3,}/g, '\n\n').trim()
 
+  // Playwright screenshot calls can surface both browser-*.png and screenshot-*.png
+  // for the same capture; prefer screenshot-* to avoid duplicate UI images.
+  const hasScreenshotVariant = imageEntries.some((entry) => /^screenshot-\d+\./i.test(entry.filename))
+  const seenImages = new Set<string>()
+  for (const entry of imageEntries) {
+    if (hasScreenshotVariant && /^browser-\d+\./i.test(entry.filename)) continue
+    if (seenImages.has(entry.url)) continue
+    seenImages.add(entry.url)
+    images.push(entry.url)
+  }
+
   return { images, videos, pdfs, files, cleanText }
 }
 

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>