@swarmclawai/swarmclaw 0.5.3 → 0.6.2

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useState, useCallback, useEffect } from 'react'
+import { memo, useState, useCallback, useMemo } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
@@ -9,129 +9,26 @@ import { useAppStore } from '@/stores/use-app-store'
 import { AiAvatar } from '@/components/shared/avatar'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { CodeBlock } from './code-block'
-import { ToolCallBubble } from './tool-call-bubble'
+import { ToolCallBubble, extractMedia } from './tool-call-bubble'
 import { ToolRequestBanner } from './tool-request-banner'
-import { api } from '@/lib/api-client'
-
-const FILE_PATH_RE = /^(\/[\w./-]+\.\w{1,10})$/
-const DIR_PATH_RE = /^(\/[\w./-]+)\/?$/
-const PREVIEWABLE_EXT = /\.(html?|svg|css|js|jsx|ts|tsx|json|md|txt|py|sh)$/i
-const SERVEABLE_EXT = /\.(html?|svg|css|js|jsx|ts|tsx)$/i
-
-function FilePathChip({ filePath }: { filePath: string }) {
-  const canPreview = PREVIEWABLE_EXT.test(filePath)
-  const canServe = SERVEABLE_EXT.test(filePath)
-  const serveUrl = `/api/files/serve?path=${encodeURIComponent(filePath)}`
-
-  const [serverState, setServerState] = useState<{
-    running: boolean; url?: string; loading: boolean; type?: string; framework?: string
-  }>({ running: false, loading: false })
-
-  // Check if a server is already running for this path on mount
-  useEffect(() => {
-    if (!canServe) return
-    api<{ running: boolean; url?: string; type?: string }>('POST', '/preview-server', { action: 'status', path: filePath })
-      .then((res) => { if (res.running) setServerState({ running: true, url: res.url, type: res.type, loading: false }) })
-      .catch((err) => console.error('Dev server check failed:', err))
-  }, [filePath, canServe])
-
-  const handleStartServer = async () => {
-    setServerState((s) => ({ ...s, loading: true }))
-    try {
-      const res = await api<{ running: boolean; url?: string; type?: string; framework?: string }>('POST', '/preview-server', { action: 'start', path: filePath })
-      setServerState({ running: res.running, url: res.url, type: res.type, framework: res.framework, loading: false })
-    } catch {
-      setServerState((s) => ({ ...s, loading: false }))
-    }
-  }
-
-  const handleStopServer = async () => {
-    setServerState((s) => ({ ...s, loading: true }))
-    try {
-      await api('POST', '/preview-server', { action: 'stop', path: filePath })
-      setServerState({ running: false, loading: false })
-    } catch {
-      setServerState((s) => ({ ...s, loading: false }))
-    }
-  }
-
-  const frameworkLabel = serverState.framework
-    ? serverState.framework.charAt(0).toUpperCase() + serverState.framework.slice(1)
-    : null
+import { AttachmentChip, parseAttachmentUrl } from '@/components/shared/attachment-chip'
+import { isStructuredMarkdown } from './markdown-utils'
+import { FilePathChip, FILE_PATH_RE, DIR_PATH_RE } from './file-path-chip'
+import { TransferAgentPicker } from './transfer-agent-picker'
+import { DelegationBanner, DelegationSourceBanner, TaskCompletionCard, parseTaskCompletion } from './delegation-banner'
+import { ConnectorPlatformIcon, CONNECTOR_PLATFORM_META } from '@/components/shared/connector-platform-icon'
+
+/** Parse delegation-source metadata prefix from system messages */
+const DELEGATION_SOURCE_RE = /^\[delegation-source:([^:]*):([^:]*):([^\]]*)\]/
+function parseDelegationSource(text: string): { delegatorId: string; delegatorName: string; delegatorAvatarSeed: string; rest: string } | null {
+  const m = text.match(DELEGATION_SOURCE_RE)
+  if (!m) return null
+  return { delegatorId: m[1], delegatorName: m[2], delegatorAvatarSeed: m[3], rest: text.slice(m[0].length).replace(/^\n/, '') }
+}
 
-  return (
-    <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-[8px] bg-white/[0.06] border border-white/[0.08] font-mono text-[13px]">
-      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3/50 shrink-0">
-        <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>
-      <span className="text-sky-400">{filePath}</span>
-      {canPreview && !serverState.running && (
-        <a
-          href={serveUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] bg-white/[0.06] hover:bg-white/[0.10] text-[10px] font-600 text-text-3 hover:text-text-2 no-underline transition-colors cursor-pointer"
-          title="Open file"
-        >
-          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
-            <polyline points="15 3 21 3 21 9" />
-            <line x1="10" y1="14" x2="21" y2="3" />
-          </svg>
-          Open
-        </a>
-      )}
-      {canServe && !serverState.running && (
-        <button
-          onClick={handleStartServer}
-          disabled={serverState.loading}
-          className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] bg-emerald-500/15 hover:bg-emerald-500/25 text-emerald-400 text-[10px] font-600 border-none cursor-pointer transition-colors disabled:opacity-50"
-          title="Start preview server — auto-detects npm projects (React, Next, Vite, etc.) and runs the dev command"
-        >
-          <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
-            <polygon points="5 3 19 12 5 21 5 3" />
-          </svg>
-          {serverState.loading ? 'Starting...' : 'Serve'}
-        </button>
-      )}
-      {canServe && serverState.running && (
-        <>
-          {frameworkLabel && (
-            <span className="px-1.5 py-0.5 rounded-[4px] bg-indigo-500/15 text-indigo-300 text-[9px] font-700 uppercase tracking-wider">
-              {frameworkLabel}
-            </span>
-          )}
-          {serverState.type === 'npm' && (
-            <span className="px-1.5 py-0.5 rounded-[4px] bg-amber-500/15 text-amber-300 text-[9px] font-700 uppercase tracking-wider">
-              npm
-            </span>
-          )}
-          <a
-            href={serverState.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] bg-emerald-500/15 hover:bg-emerald-500/25 text-emerald-400 text-[10px] font-600 no-underline transition-colors"
-            title="Open preview server"
-          >
-            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" style={{ animation: 'pulse 2s ease infinite' }} />
-            {serverState.url}
-          </a>
-          <button
-            onClick={handleStopServer}
-            disabled={serverState.loading}
-            className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-[4px] bg-red-500/15 hover:bg-red-500/25 text-red-400 text-[10px] font-600 border-none cursor-pointer transition-colors disabled:opacity-50"
-            title="Stop preview server"
-          >
-            <svg width="8" height="8" viewBox="0 0 24 24" fill="currentColor">
-              <rect x="4" y="4" width="16" height="16" rx="2" />
-            </svg>
-            Stop
-          </button>
-        </>
-      )}
-    </span>
-  )
+/** Try to parse JSON safely, returning null on failure */
+function tryParseJson(s: string): Record<string, unknown> | null {
+  try { return JSON.parse(s) } catch { return null }
 }
 
 function fmtTime(ts: number): string {
@@ -151,9 +48,26 @@ function relativeTime(ts: number): string {
   return d.toLocaleDateString([], { month: 'short', day: 'numeric' })
 }
 
+interface HeartbeatMeta {
+  goal?: string
+  status?: string
+  next_action?: string
+}
+
+function parseHeartbeatMeta(text: string): HeartbeatMeta | null {
+  const match = text.match(/\[AGENT_HEARTBEAT_META\]\s*(\{[^\n]*\})/i)
+  if (!match?.[1]) return null
+  try {
+    const parsed = JSON.parse(match[1])
+    if (typeof parsed === 'object' && parsed !== null) return parsed as HeartbeatMeta
+  } catch { /* ignore */ }
+  return null
+}
+
 function heartbeatSummary(text: string): string {
   const clean = (text || '')
     .replace(/\bHEARTBEAT_OK\b/gi, '')
+    .replace(/\[AGENT_HEARTBEAT_META\]\s*\{[^\n]*\}/gi, '')
     .replace(/\*\*(.*?)\*\*/g, '$1')
     .replace(/\*(.*?)\*/g, '$1')
     .replace(/`([^`]+)`/g, '$1')
@@ -169,166 +83,15 @@ function heartbeatSummary(text: string): string {
   return clean.length > 180 ? `${clean.slice(0, 180)}...` : clean
 }
 
-const IMAGE_ATTACH_RE = /\.(png|jpg|jpeg|gif|webp|svg|bmp|ico)$/i
-const PREVIEWABLE_ATTACH_RE = /\.(html?|svg)$/i
-const CODE_ATTACH_RE = /\.(js|jsx|ts|tsx|css|json|md|txt|py|sh|rb|go|rs|c|cpp|h|java|yaml|yml|toml|xml|sql|graphql)$/i
-const PDF_ATTACH_RE = /\.pdf$/i
-const FILE_TYPE_COLORS: Record<string, string> = {
-  html: 'text-orange-400', htm: 'text-orange-400', svg: 'text-emerald-400',
-  js: 'text-yellow-400', jsx: 'text-yellow-400', ts: 'text-blue-400', tsx: 'text-blue-400',
-  py: 'text-green-400', json: 'text-amber-300', css: 'text-purple-400', scss: 'text-pink-400',
-  md: 'text-text-2', txt: 'text-text-3', pdf: 'text-red-400',
-}
-
-function parseAttachmentUrl(filePath?: string, fileUrl?: string) {
-  const url = fileUrl || (filePath ? `/api/uploads/${filePath.split('/').pop()}` : '')
-  const rawName = filePath?.split('/').pop() || fileUrl?.split('/').pop() || 'file'
-  const filename = rawName.replace(/^[a-f0-9]+-/, '').split('?')[0]
-  return { url, filename }
+const STATUS_COLORS: Record<string, string> = {
+  progress: '#F59E0B',
+  ok: '#22C55E',
+  idle: '#6B7280',
+  blocked: '#EF4444',
 }
 
-function AttachmentChip({ url, filename, isUserMsg }: { url: string; filename: string; isUserMsg?: boolean }) {
-  const isImage = IMAGE_ATTACH_RE.test(filename)
-  const isCode = CODE_ATTACH_RE.test(filename)
-  const isPdf = PDF_ATTACH_RE.test(filename)
-  const [lightbox, setLightbox] = useState(false)
-  const [codePreview, setCodePreview] = useState<string | null>(null)
-  const [codeExpanded, setCodeExpanded] = useState(false)
-
-  if (isImage) {
-    return (
-      <>
-        <img
-          src={url} alt="Attached"
-          loading="lazy"
-          className="max-w-[240px] rounded-[12px] mb-2 border border-white/10 cursor-pointer hover:border-white/25 transition-colors"
-          onClick={() => setLightbox(true)}
-          onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
-        />
-        {lightbox && (
-          <div
-            className="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm cursor-pointer"
-            onClick={() => setLightbox(false)}
-          >
-            <img src={url} alt="Preview" className="max-w-[90vw] max-h-[90vh] rounded-[12px] shadow-2xl" />
-          </div>
-        )}
-      </>
-    )
-  }
-
-  if (isPdf) {
-    return (
-      <div className="mb-2 rounded-[12px] border border-white/[0.08] bg-[rgba(255,255,255,0.02)] overflow-hidden" style={{ maxWidth: 480 }}>
-        <div className="flex items-center gap-3 px-4 py-2.5">
-          <div className="flex items-center justify-center w-8 h-8 rounded-[8px] shrink-0 bg-red-500/10 text-red-400">
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
-              <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>
-          </div>
-          <span className="text-[13px] font-500 truncate flex-1">{filename}</span>
-          <a href={url} download={filename} className="text-[11px] font-600 text-text-3 hover:text-text-2 no-underline">Download</a>
-        </div>
-        <iframe src={url} loading="lazy" className="w-full h-[300px] border-t border-white/[0.06]" title={filename} />
-      </div>
-    )
-  }
-
-  const ext = filename.split('.').pop()?.toLowerCase() || ''
-  const colorClass = FILE_TYPE_COLORS[ext] || 'text-text-3'
-  const isPreviewable = PREVIEWABLE_ATTACH_RE.test(filename)
-
-  const chipBg = isUserMsg
-    ? 'bg-[rgba(0,0,0,0.25)] border-white/[0.12]'
-    : 'bg-[rgba(255,255,255,0.04)] border-white/[0.08]'
-  const iconBg = isUserMsg ? 'bg-white/[0.12]' : 'bg-white/[0.05]'
-  const btnBg = isUserMsg
-    ? 'bg-white/[0.12] hover:bg-white/[0.18] text-white/80'
-    : 'bg-white/[0.06] hover:bg-white/[0.10] text-text-3'
-
-  const handleCodePreview = async () => {
-    if (codePreview !== null) { setCodeExpanded(!codeExpanded); return }
-    try {
-      const serveUrl = `/api/files/serve?path=${encodeURIComponent(url.replace('/api/uploads/', ''))}`
-      const res = await fetch(url.startsWith('/api/files/') ? url : serveUrl)
-      if (!res.ok) return
-      const text = await res.text()
-      setCodePreview(text)
-      setCodeExpanded(true)
-    } catch {
-      // ignore
-    }
-  }
-
-  return (
-    <div className="mb-2">
-      <div className={`flex items-center gap-3 px-4 py-2.5 rounded-[12px] border ${chipBg}`}>
-        <div className={`flex items-center justify-center w-8 h-8 rounded-[8px] shrink-0 ${iconBg} ${colorClass}`}>
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
-            <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>
-        </div>
-        <div className="flex flex-col flex-1 min-w-0">
-          <span className={`text-[13px] font-500 truncate ${isUserMsg ? 'text-white' : 'text-text'}`}>{filename}</span>
-          <span className={`text-[11px] uppercase tracking-wide ${isUserMsg ? 'text-white/50' : 'text-text-3/70'}`}>{ext || 'file'}</span>
-        </div>
-        {isCode && (
-          <button
-            onClick={handleCodePreview}
-            className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] text-[11px] font-600 no-underline transition-colors shrink-0 border-none cursor-pointer ${
-              isUserMsg ? 'bg-white/[0.15] hover:bg-white/[0.22] text-white' : 'bg-accent-soft hover:bg-accent-soft/80 text-accent-bright'
-            }`}
-          >
-            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-              <polyline points="16 18 22 12 16 6" />
-              <polyline points="8 6 2 12 8 18" />
-            </svg>
-            {codeExpanded ? 'Hide' : 'Preview'}
-          </button>
-        )}
-        {isPreviewable && (
-          <a href={url} target="_blank" rel="noopener noreferrer"
-            className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] text-[11px] font-600 no-underline transition-colors shrink-0 ${
-              isUserMsg ? 'bg-white/[0.15] hover:bg-white/[0.22] text-white' : 'bg-accent-soft hover:bg-accent-soft/80 text-accent-bright'
-            }`}
-            title="Preview in new tab">
-            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-              <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-              <circle cx="12" cy="12" r="3" />
-            </svg>
-            Preview
-          </a>
-        )}
-        <a href={url} download={filename}
-          className={`flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] text-[11px] font-600 no-underline transition-colors shrink-0 ${btnBg}`}>
-          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-            <polyline points="7 10 12 15 17 10" />
-            <line x1="12" y1="15" x2="12" y2="3" />
-          </svg>
-          Download
-        </a>
-      </div>
-      {isCode && codeExpanded && codePreview !== null && (
-        <div className="mt-1 rounded-[10px] border border-white/[0.06] overflow-hidden" style={{ animation: 'fade-in 0.2s ease' }}>
-          <CodeBlock className={`language-${ext}`}>
-            {codePreview.split('\n').slice(0, codeExpanded ? undefined : 10).join('\n')}
-          </CodeBlock>
-          {codePreview.split('\n').length > 10 && (
-            <button
-              onClick={() => setCodeExpanded((v) => !v)}
-              className="w-full px-3 py-1.5 text-[10px] text-text-3 hover:text-text-2 bg-white/[0.02] hover:bg-white/[0.04] border-none border-t border-white/[0.06] cursor-pointer transition-colors"
-            >
-              {codePreview.split('\n').length > 10 ? `Show all ${codePreview.split('\n').length} lines` : 'Show less'}
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
+// AttachmentChip, parseAttachmentUrl, regex constants, and FILE_TYPE_COLORS
+// are now imported from @/components/shared/attachment-chip
 
 function renderAttachments(message: Message) {
   const isUser = message.role === 'user'
@@ -374,18 +137,11 @@ interface Props {
   onToggleBookmark?: (index: number) => void
   onEditResend?: (index: number, newText: string) => void
   onFork?: (index: number) => void
+  onTransferToAgent?: (messageIndex: number, agentId: string) => void
+  momentOverlay?: React.ReactNode
 }
 
-function isStructuredMarkdown(text: string): boolean {
-  if (!text) return false
-  return /```/.test(text)
-    || /^#{1,4}\s/m.test(text)
-    || /^[-*]\s/m.test(text)
-    || /^\d+\.\s/m.test(text)
-    || /\|.*\|.*\|/m.test(text)
-}
-
-export const MessageBubble = memo(function MessageBubble({ message, assistantName, agentAvatarSeed, agentName, isLast, onRetry, messageIndex, onToggleBookmark, onEditResend, onFork }: Props) {
+export const MessageBubble = memo(function MessageBubble({ message, assistantName, agentAvatarSeed, 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)
@@ -394,11 +150,61 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
   const [toolEventsExpanded, setToolEventsExpanded] = useState(false)
   const [editing, setEditing] = useState(false)
   const [editText, setEditText] = useState('')
+  const [transferPickerOpen, setTransferPickerOpen] = useState(false)
   const toolEvents = message.toolEvents || []
   const hasToolEvents = !isUser && toolEvents.length > 0
   const visibleToolEvents = toolEventsExpanded ? [...toolEvents].reverse() : toolEvents.slice(-1)
   const isStructured = !isUser && !isHeartbeat && isStructuredMarkdown(message.text)
 
+  // When collapsed, collect media from hidden tool events so files are always visible
+  const hiddenMedia = useMemo(() => {
+    if (toolEventsExpanded || toolEvents.length <= 1) return null
+    // Collect URLs from the visible (last) tool event to avoid showing duplicates
+    const lastOutput = toolEvents[toolEvents.length - 1]?.output || ''
+    const visibleMedia = extractMedia(lastOutput)
+    const seen = new Set<string>([
+      ...visibleMedia.images,
+      ...visibleMedia.videos,
+      ...visibleMedia.pdfs.map((p) => p.url),
+      ...visibleMedia.files.map((f) => f.url),
+    ])
+    const images: string[] = []
+    const videos: string[] = []
+    const pdfs: { name: string; url: string }[] = []
+    const files: { name: string; url: string }[] = []
+    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.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) } }
+    }
+    if (!images.length && !videos.length && !pdfs.length && !files.length) return null
+    return { images, videos, pdfs, files }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [message.toolEvents, toolEventsExpanded])
+
+  // Collect all media URLs already rendered via tool events to avoid duplicates in markdown
+  const toolEventMediaUrls = useMemo(() => {
+    if (!toolEvents.length) return null
+    const urls = new Set<string>()
+    for (const ev of toolEvents) {
+      if (!ev.output) continue
+      const m = extractMedia(ev.output)
+      for (const url of m.images) urls.add(url)
+      for (const url of m.videos) urls.add(url)
+    }
+    return urls.size > 0 ? urls : null
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [message.toolEvents])
+
+  // Detect delegation-source system messages
+  const delegationSource = !isUser && message.kind === 'system' ? parseDelegationSource(message.text || '') : null
+  // Detect task completion system messages (delegated or direct)
+  const taskCompletion = !isUser && message.kind === 'system' ? parseTaskCompletion(message.text || '') : null
+  const displayText = delegationSource ? delegationSource.rest : message.text
+
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(message.text).then(() => {
       setCopied(true)
@@ -408,14 +214,29 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
 
   return (
     <div
-      className={`group ${isUser ? 'flex flex-col items-end' : 'flex flex-col items-start'}`}
+      className={`group ${isUser ? 'flex flex-col items-end' : 'flex flex-col items-start relative pl-[44px]'}`}
       style={{ animation: `${isUser ? 'msg-in-right' : 'msg-in-left'} 0.35s cubic-bezier(0.16, 1, 0.3, 1)` }}
     >
+      {/* Avatar on spine (assistant) */}
+      {!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" />}
+          </div>
+          {momentOverlay}
+        </div>
+      )}
       {/* Sender label + timestamp */}
       <div className={`flex items-center gap-2.5 mb-2 px-1 ${isUser ? 'flex-row-reverse' : ''}`}>
-        {!isUser && (agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={36} /> : <AiAvatar size="sm" />)}
-        <span className={`text-[12px] font-600 ${isUser ? 'text-accent-bright/70' : 'text-text-3'}`}>
-          {isUser ? (currentUser ? currentUser.charAt(0).toUpperCase() + currentUser.slice(1) : 'You') : (assistantName || 'Claude')}
+        <span className={`text-[12px] font-600 flex items-center gap-1.5 ${isUser ? 'text-accent-bright/70' : 'text-text-3'}`}>
+          {message.source && (
+            <ConnectorPlatformIcon platform={message.source.platform} size={12} />
+          )}
+          {isUser
+            ? (message.source?.senderName
+                ? `${message.source.senderName} via ${CONNECTOR_PLATFORM_META[message.source.platform]?.label || message.source.platform}`
+                : (currentUser ? currentUser.charAt(0).toUpperCase() + currentUser.slice(1) : 'You'))
+            : (assistantName || 'Claude')}
         </span>
         <span className="text-[11px] text-text-3/70 font-mono" title={message.time ? new Date(message.time).toLocaleString() : ''}>
           {message.time ? relativeTime(message.time) : ''}
@@ -435,23 +256,183 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
             </button>
           )}
           <div className={`${toolEventsExpanded ? 'max-h-[320px] overflow-y-auto pr-1 flex flex-col gap-2' : 'flex flex-col gap-2'}`}>
-            {visibleToolEvents.map((event, i) => (
-              <ToolCallBubble
-                key={`${message.time}-tool-${toolEventsExpanded ? `all-${i}` : `latest-${toolEvents.length - 1}`}`}
-                event={{
-                  id: `${message.time}-${toolEventsExpanded ? i : toolEvents.length - 1}`,
-                  name: event.name,
-                  input: event.input,
-                  output: event.output,
-                  status: event.error ? 'error' : 'done',
+            {visibleToolEvents.map((event, i) => {
+              const key = `${message.time}-tool-${toolEventsExpanded ? `all-${i}` : `latest-${toolEvents.length - 1}`}`
+
+              if (event.name === 'delegate_to_agent') {
+                const inp = tryParseJson(event.input || '{}')
+                const out = tryParseJson(event.output || '{}')
+                return (
+                  <DelegationBanner
+                    key={key}
+                    agentName={out?.agentName as string || inp?.agentName as string || inp?.agentId as string || 'Agent'}
+                    agentAvatarSeed={(out?.agentAvatarSeed as string) || null}
+                    taskPreview={(inp?.task as string || '').slice(0, 100)}
+                    taskId={(out?.taskId as string) || null}
+                    status="delegating"
+                  />
+                )
+              }
+
+              if (event.name === 'check_delegation_status') {
+                const out = tryParseJson(event.output || '{}')
+                const rawStatus = out?.status as string || ''
+                const mapped = rawStatus === 'completed' ? 'completed' as const
+                  : rawStatus === 'failed' ? 'failed' as const
+                  : 'checking' as const
+                return (
+                  <DelegationBanner
+                    key={key}
+                    agentName={out?.agentName as string || 'Agent'}
+                    agentAvatarSeed={(out?.agentAvatarSeed as string) || null}
+                    taskPreview={(out?.title as string || '').slice(0, 100)}
+                    taskId={(out?.taskId as string) || null}
+                    status={mapped}
+                  />
+                )
+              }
+
+              return (
+                <ToolCallBubble
+                  key={key}
+                  event={{
+                    id: `${message.time}-${toolEventsExpanded ? i : toolEvents.length - 1}`,
+                    name: event.name,
+                    input: event.input,
+                    output: event.output,
+                    status: event.error ? 'error' : 'done',
+                  }}
+                />
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Media from hidden tool calls (shown when collapsed so files are never buried) */}
+      {hiddenMedia && (
+        <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2">
+          {hiddenMedia.images.map((src, i) => (
+            <div key={`himg-${i}`} className="relative group/img">
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={src}
+                alt={`Screenshot ${i + 1}`}
+                loading="lazy"
+                className="max-w-[400px] rounded-[10px] border border-white/10 cursor-pointer hover:border-white/25 transition-all"
+                onClick={() => {
+                  import('@/stores/use-chat-store').then(({ useChatStore }) =>
+                    useChatStore.getState().setPreviewContent({ type: 'image', url: src, title: `Screenshot ${i + 1}` })
+                  )
                 }}
+                onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
               />
-            ))}
-          </div>
+              <a
+                href={src}
+                download
+                onClick={(e) => e.stopPropagation()}
+                className="absolute top-2 right-2 bg-black/60 backdrop-blur-sm rounded-[8px] p-1.5 hover:bg-black/80 opacity-0 group-hover/img:opacity-100 transition-opacity"
+                title="Download"
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                  <polyline points="7 10 12 15 17 10" />
+                  <line x1="12" y1="15" x2="12" y2="3" />
+                </svg>
+              </a>
+            </div>
+          ))}
+          {hiddenMedia.videos.map((src, i) => (
+            <video key={`hvid-${i}`} src={src} controls playsInline preload="none" className="max-w-full rounded-[10px] border border-white/10" />
+          ))}
+          {hiddenMedia.pdfs.map((file, i) => (
+            <div key={`hpdf-${i}`} className="rounded-[10px] border border-white/10 overflow-hidden">
+              <iframe src={file.url} loading="lazy" className="w-full h-[400px] bg-white" title={file.name} />
+              <a
+                href={file.url}
+                download
+                onClick={(e) => e.stopPropagation()}
+                className="flex items-center gap-2 px-3 py-2 bg-surface/80 border-t border-white/10 text-[12px] text-text-2 hover:text-text no-underline transition-colors"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                  <polyline points="7 10 12 15 17 10" />
+                  <line x1="12" y1="15" x2="12" y2="3" />
+                </svg>
+                {file.name}
+              </a>
+            </div>
+          ))}
+          {hiddenMedia.files.map((file, i) => (
+            <a
+              key={`hfile-${i}`}
+              href={file.url}
+              download
+              onClick={(e) => e.stopPropagation()}
+              className="flex items-center gap-2 px-3 py-2 rounded-[10px] border border-white/10 bg-surface/60 hover:bg-surface-2 transition-colors text-[13px] text-text-2 hover:text-text no-underline"
+            >
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <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>
+              {file.name}
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="ml-auto opacity-50">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                <polyline points="7 10 12 15 17 10" />
+                <line x1="12" y1="15" x2="12" y2="3" />
+              </svg>
+            </a>
+          ))}
         </div>
       )}
 
-      {/* Message bubble */}
+      {/* Thinking block (collapsible, shown for assistant messages with persisted thinking) */}
+      {!isUser && message.thinking && (
+        <div className="max-w-[85%] md:max-w-[72%] mb-2">
+          <details className="group rounded-[12px] border border-purple-500/15 bg-purple-500/[0.04]">
+            <summary className="flex items-center gap-2 px-3.5 py-2.5 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-purple-400/60 shrink-0 transition-transform group-open:rotate-90">
+                <polyline points="9 18 15 12 9 6" />
+              </svg>
+              <span className="text-[11px] font-600 text-purple-400/70 uppercase tracking-[0.05em]">Thinking</span>
+              <span className="text-[10px] text-text-3/40 font-mono">{Math.ceil(message.thinking.length / 4)} tokens</span>
+            </summary>
+            <div className="px-3.5 pb-3 pt-1 max-h-[300px] overflow-y-auto">
+              <div className="text-[13px] leading-[1.6] text-text-3/70 whitespace-pre-wrap break-words">
+                {message.thinking}
+              </div>
+            </div>
+          </details>
+        </div>
+      )}
+
+      {/* Delegation source banner (receiving agent's chat) */}
+      {delegationSource && (() => {
+        const taskLinkMatch = delegationSource.rest.match(/\[([^\]]+)\]\(#task:([^)]+)\)/)
+        const dsTaskTitle = taskLinkMatch?.[1] || ''
+        const dsTaskId = taskLinkMatch?.[2] || null
+        const descLines = delegationSource.rest.split('\n\n').slice(1).filter((l) => !l.startsWith('Working directory:') && !l.startsWith("I'll begin"))
+        const dsDescription = descLines.join(' ').trim().slice(0, 200)
+        return (
+          <div className="max-w-[85%] md:max-w-[72%] mb-2">
+            <DelegationSourceBanner
+              delegatorName={delegationSource.delegatorName}
+              delegatorAvatarSeed={delegationSource.delegatorAvatarSeed || null}
+              taskTitle={dsTaskTitle}
+              taskId={dsTaskId}
+              description={dsDescription}
+            />
+          </div>
+        )
+      })()}
+
+      {/* Task completion card (replaces bubble for task result system messages) */}
+      {taskCompletion ? (
+        <div className="max-w-[85%] md:max-w-[72%]">
+          <TaskCompletionCard info={{ ...taskCompletion, imageUrl: message.imageUrl }} />
+        </div>
+      ) : (
+      /* Message bubble */
       <div className={`${isStructured ? 'max-w-[92%] md:max-w-[85%]' : 'max-w-[85%] md:max-w-[72%]'} ${isUser ? 'bubble-user px-5 py-3.5' : isHeartbeat ? 'bubble-ai px-4 py-3' : 'bubble-ai px-5 py-3.5'}`}>
         {renderAttachments(message)}
 
@@ -464,12 +445,43 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
             >
               <div className="flex items-center justify-between gap-3">
                 <div className="flex items-center gap-2">
-                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
+                  {(() => {
+                    const meta = parseHeartbeatMeta(message.text)
+                    const statusColor = meta?.status ? (STATUS_COLORS[meta.status] || '#6B7280') : '#22C55E'
+                    return <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: statusColor }} />
+                  })()}
                   <span className="text-[11px] uppercase tracking-[0.08em] text-text-2 font-600">Heartbeat</span>
+                  {(() => {
+                    const meta = parseHeartbeatMeta(message.text)
+                    if (!meta?.status) return null
+                    const color = STATUS_COLORS[meta.status] || '#6B7280'
+                    return <span className="text-[10px] font-500 px-1.5 py-0.5 rounded-[4px]" style={{ color, background: `${color}18` }}>{meta.status}</span>
+                  })()}
                 </div>
                 <span className="text-[11px] text-text-3">{heartbeatExpanded ? 'Collapse' : 'Expand'}</span>
               </div>
-              <p className="text-[13px] text-text-2/90 leading-[1.5] mt-1.5">{heartbeatSummary(message.text)}</p>
+              {(() => {
+                const meta = parseHeartbeatMeta(message.text)
+                if (meta && (meta.goal || meta.next_action)) {
+                  return (
+                    <div className="mt-2 flex flex-col gap-1">
+                      {meta.goal && (
+                        <div className="flex items-baseline gap-1.5">
+                          <span className="text-[10px] uppercase tracking-[0.06em] text-text-3 font-600 shrink-0">Goal</span>
+                          <span className="text-[12px] text-text-2/90 truncate">{meta.goal}</span>
+                        </div>
+                      )}
+                      {meta.next_action && (
+                        <div className="flex items-baseline gap-1.5">
+                          <span className="text-[10px] uppercase tracking-[0.06em] text-text-3 font-600 shrink-0">Next</span>
+                          <span className="text-[12px] text-text-2/90 truncate">{meta.next_action}</span>
+                        </div>
+                      )}
+                    </div>
+                  )
+                }
+                return <p className="text-[13px] text-text-2/90 leading-[1.5] mt-1.5">{heartbeatSummary(message.text)}</p>
+              })()}
             </button>
             {heartbeatExpanded && (
               <div className="msg-content text-[14px] leading-[1.7] text-text break-words px-3 py-2 rounded-[10px] border border-white/[0.08] bg-black/20">
@@ -487,7 +499,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
                     },
                   }}
                 >
-                  {message.text}
+                  {message.text.replace(/\[AGENT_HEARTBEAT_META\]\s*\{[^\n]*\}/gi, '').trim()}
                 </ReactMarkdown>
               </div>
             )}
@@ -515,6 +527,8 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
                 },
                 img({ src, alt }) {
                   if (!src || typeof src !== 'string') return null
+                  // Skip images already rendered via tool events
+                  if (toolEventMediaUrls?.has(src)) return null
                   const isVideo = /\.(mp4|webm|mov|avi)$/i.test(src)
                   if (isVideo) {
                     return (
@@ -538,6 +552,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
                         onClick={async () => {
                           const store = useAppStore.getState()
                           await store.loadTasks(true)
+                          store.setTaskSheetViewOnly(true)
                           store.setEditingTaskId(taskMatch[1])
                           store.setTaskSheetOpen(true)
                         }}
@@ -610,11 +625,12 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
                 },
               }}
             >
-              {message.text}
+              {displayText}
             </ReactMarkdown>
           </div>
         )}
       </div>
+      )}
 
       {/* Tool access request banners */}
       {!isUser && <ToolRequestBanner
@@ -625,10 +641,10 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
       {/* Bookmark indicator */}
       {message.bookmarked && (
         <div className={`flex items-center gap-1 mt-1 px-1 ${isUser ? 'justify-end' : ''}`}>
-          <svg width="10" height="10" viewBox="0 0 24 24" fill="#F59E0B" stroke="#F59E0B" strokeWidth="2" className="shrink-0">
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2" className="shrink-0 text-amber-400">
             <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
           </svg>
-          <span className="text-[10px] text-[#F59E0B]/70 font-600">Bookmarked</span>
+          <span className="text-[10px] text-amber-400/70 font-600">Bookmarked</span>
         </div>
       )}
 
@@ -651,9 +667,9 @@ 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"
-            style={{ fontFamily: 'inherit', color: message.bookmarked ? '#F59E0B' : undefined }}
+            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' : ''}`}
+            style={{ fontFamily: 'inherit' }}
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill={message.bookmarked ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="2" strokeLinecap="round">
               <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
@@ -709,6 +725,31 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
             Retry
           </button>
         )}
+        {!isUser && typeof messageIndex === 'number' && onTransferToAgent && (
+          <div className="relative">
+            <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"
+              style={{ fontFamily: 'inherit' }}
+            >
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <path d="M8 3L4 7l4 4" />
+                <path d="M4 7h16" />
+                <path d="M16 21l4-4-4-4" />
+                <path d="M20 17H4" />
+              </svg>
+              Transfer
+            </button>
+            {transferPickerOpen && (
+              <TransferAgentPicker
+                onSelect={(agentId) => { onTransferToAgent(messageIndex, agentId); setTransferPickerOpen(false) }}
+                onClose={() => setTransferPickerOpen(false)}
+              />
+            )}
+          </div>
+        )}
       </div>
 
       {/* Inline edit mode */}