@swarmclawai/swarmclaw 0.6.4 → 0.6.7

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) => {
@@ -324,17 +324,32 @@ export function ChatArea() {
       <DevServerBar status={devServerStatus} onStop={handleStopDevServer} />
 
       {messagesLoading && !messages.length ? (
-        <div className="flex-1 flex items-center justify-center">
-          <div className="flex flex-col items-center gap-3" style={{ animation: 'fade-in 0.2s ease' }}>
-            <div className="relative w-10 h-10">
-              <div className="absolute inset-0 rounded-full border-2 border-white/[0.06]" />
-              <div className="absolute inset-0 rounded-full border-2 border-transparent border-t-accent-bright animate-spin" />
+        <div className="flex-1 flex flex-col gap-5 px-4 md:px-12 lg:px-16 py-8" style={{ animation: 'fade-in 0.2s ease' }}>
+          {/* Skeleton message bubbles */}
+          <div className="flex gap-3 max-w-[70%]">
+            <div className="w-8 h-8 rounded-full bg-white/[0.06] animate-pulse shrink-0" />
+            <div className="flex-1 space-y-2">
+              <div className="h-3 w-24 rounded bg-white/[0.06] animate-pulse" />
+              <div className="h-16 rounded-[12px] bg-white/[0.04] animate-pulse" />
+            </div>
+          </div>
+          <div className="flex gap-3 max-w-[60%] self-end flex-row-reverse">
+            <div className="w-8 h-8 rounded-full bg-white/[0.06] animate-pulse shrink-0" />
+            <div className="flex-1 space-y-2">
+              <div className="h-3 w-16 rounded bg-white/[0.06] animate-pulse ml-auto" />
+              <div className="h-10 rounded-[12px] bg-white/[0.04] animate-pulse" />
+            </div>
+          </div>
+          <div className="flex gap-3 max-w-[65%]">
+            <div className="w-8 h-8 rounded-full bg-white/[0.06] animate-pulse shrink-0" />
+            <div className="flex-1 space-y-2">
+              <div className="h-3 w-20 rounded bg-white/[0.06] animate-pulse" />
+              <div className="h-24 rounded-[12px] bg-white/[0.04] animate-pulse" />
             </div>
-            <span className="text-[13px] text-text-3/50 font-500">Loading messages...</span>
           </div>
         </div>
       ) : isEmpty ? (
-        <div className="flex-1 flex flex-col items-center justify-center px-6 pb-4 relative">
+        <div className="flex-1 flex flex-col items-center justify-center px-6 pb-[120px] md:pb-4 relative">
           {/* Atmospheric background glow */}
           <div className="absolute inset-0 pointer-events-none overflow-hidden">
             <div className="absolute top-[20%] left-[50%] -translate-x-1/2 w-[500px] h-[300px]"

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

@@ -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>
@@ -515,7 +516,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
             )}
           </div>
         ) : (
-          <div className={`msg-content text-[15px] break-words ${isUser ? 'leading-[1.6] text-white/95' : 'leading-[1.7] text-text'}`}>
+          <div className={`msg-content text-[15px] md:text-[14px] break-words ${isUser ? 'leading-[1.6] text-white/95' : 'leading-[1.7] text-text'}`}>
             <ReactMarkdown
               remarkPlugins={[remarkGfm]}
               rehypePlugins={[rehypeHighlight]}
@@ -659,12 +660,12 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
       )}
 
       {/* Action buttons */}
-      <div className={`flex items-center gap-1 mt-1.5 px-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ${isUser ? 'justify-end' : ''}`}>
+      <div className={`flex items-center gap-1 mt-1.5 px-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-200 ${isUser ? 'justify-end' : ''}`}>
         <button
           onClick={handleCopy}
           aria-label="Copy message"
-          className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-            text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+          className="flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+            text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all justify-center md:justify-start"
           style={{ fontFamily: 'inherit' }}
         >
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -677,8 +678,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
           <button
             onClick={() => onToggleBookmark(messageIndex)}
             aria-label={message.bookmarked ? 'Remove bookmark' : 'Bookmark message'}
-            className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-              text-[11px] font-500 cursor-pointer hover:bg-white/[0.04] transition-all ${message.bookmarked ? 'text-amber-400' : ''}`}
+            className={`flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+              text-[11px] font-500 cursor-pointer hover:bg-white/[0.04] transition-all justify-center md:justify-start ${message.bookmarked ? 'text-amber-400' : ''}`}
             style={{ fontFamily: 'inherit' }}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill={message.bookmarked ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -691,8 +692,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
           <button
             onClick={() => { setEditText(message.text); setEditing(true) }}
             aria-label="Edit and resend"
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all justify-center md:justify-start"
             style={{ fontFamily: 'inherit' }}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -706,8 +707,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
           <button
             onClick={() => onFork(messageIndex)}
             aria-label="Fork conversation from here"
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all justify-center md:justify-start"
             style={{ fontFamily: 'inherit' }}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -724,8 +725,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
           <button
             onClick={onRetry}
             aria-label="Retry message"
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+              text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all justify-center md:justify-start"
             style={{ fontFamily: 'inherit' }}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
@@ -740,8 +741,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
             <button
               onClick={() => setTransferPickerOpen(!transferPickerOpen)}
               aria-label="Transfer to another agent"
-              className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-[8px] border-none bg-transparent
-                text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all"
+              className="flex items-center gap-1.5 px-2.5 py-1.5 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0 rounded-[8px] border-none bg-transparent
+                text-[11px] font-500 text-text-3 cursor-pointer hover:text-text-2 hover:bg-white/[0.04] transition-all justify-center md:justify-start"
               style={{ fontFamily: 'inherit' }}
             >
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">

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

@@ -397,7 +397,7 @@ export function MessageList({ messages, streaming, connectorFilter = null }: Pro
       <div
         ref={scrollRef}
         onScroll={updateScrollState}
-        className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-6 md:px-12 lg:px-16 pt-6 pb-10 fade-up"
+        className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-4 md:px-12 lg:px-16 pt-6 pb-[120px] md:pb-10 fade-up"
       >
         <div className="flex flex-col gap-6 relative">
           {/* Chat spine — vertical line for assistant messages */}
@@ -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}