@swarmclawai/swarmclaw 0.5.2 → 0.6.0

package/src/components/chat/file-path-chip.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { api } from '@/lib/api-client'
+
+export const FILE_PATH_RE = /^(\/[\w./-]+\.\w{1,10})$/
+export 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
+
+export 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: unknown) => 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
+
+  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>
+  )
+}

package/src/components/chat/markdown-utils.ts

@@ -0,0 +1,9 @@
+/** Detect if text contains structured markdown (code blocks, headings, lists, tables) */
+export 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)
+}

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useState, useCallback, useEffect } from 'react'
+import { memo, useState, useCallback } from 'react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import rehypeHighlight from 'rehype-highlight'
@@ -11,128 +11,10 @@ import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { CodeBlock } from './code-block'
 import { ToolCallBubble } 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
-
-  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>
-  )
-}
+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'
 
 function fmtTime(ts: number): string {
   return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
@@ -169,166 +51,8 @@ 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 }
-}
-
-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 +98,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,6 +111,7 @@ 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)
@@ -408,12 +126,20 @@ 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>
@@ -709,6 +435,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 */}

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

@@ -11,7 +11,9 @@ import { StreamingBubble } from './streaming-bubble'
 import { ThinkingIndicator } from './thinking-indicator'
 import { SuggestionsBar } from './suggestions-bar'
 import { ExecApprovalCard } from './exec-approval-card'
+import { HeartbeatMoment, ActivityMoment, isNotableTool } from './activity-moment'
 import { useApprovalStore } from '@/stores/use-approval-store'
+import { useWs } from '@/hooks/use-ws'
 
 const INTRO_GREETINGS = [
   'What can I help you with?',
@@ -71,6 +73,33 @@ export function MessageList({ messages, streaming }: Props) {
   const showOk = appSettings.heartbeatShowOk ?? false
   const showAlerts = appSettings.heartbeatShowAlerts ?? true
 
+  // Moment overlay for last assistant message (heartbeat or tool events)
+  type MomentType = { kind: 'heartbeat' } | { kind: 'tool'; name: string; input: string }
+  const [currentMoment, setCurrentMoment] = useState<MomentType | null>(null)
+
+  const heartbeatTopic = agent?.id ? `heartbeat:agent:${agent.id}` : ''
+  useWs(heartbeatTopic, () => {
+    setCurrentMoment({ kind: 'heartbeat' })
+  })
+
+  // Detect notable tool events on latest assistant message when messages change
+  const prevToolKeyRef = useRef<string | null>(null)
+  useEffect(() => {
+    const last = messages[messages.length - 1]
+    if (!last || last.role !== 'assistant' || !last.toolEvents?.length) return
+    const events = last.toolEvents
+    for (let i = events.length - 1; i >= 0; i--) {
+      if (isNotableTool(events[i].name)) {
+        const key = `${last.time}-${events[i].name}-${i}`
+        if (key !== prevToolKeyRef.current) {
+          prevToolKeyRef.current = key
+          setCurrentMoment({ kind: 'tool', name: events[i].name, input: events[i].input || '' })
+        }
+        return
+      }
+    }
+  }, [messages])
+
   // Unread count tracking
   const unreadRef = useRef(0)
   const [unreadCount, setUnreadCount] = useState(0)
@@ -336,7 +365,9 @@ export function MessageList({ messages, streaming }: Props) {
         onScroll={updateScrollState}
         className="h-full overflow-y-auto px-6 md:px-12 lg:px-16 py-6 fade-up"
       >
-        <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-6 relative">
+          {/* Chat spine — vertical line for assistant messages */}
+          <div className="absolute left-[15px] top-0 bottom-0 w-px bg-white/[0.06] pointer-events-none" />
           {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} />
@@ -358,6 +389,23 @@ export function MessageList({ messages, streaming }: Props) {
             const prevMsg = i > 0 ? filteredMessages[i - 1] : null
             const showDateSep = msg.time && (!prevMsg?.time || new Date(msg.time).toDateString() !== new Date(prevMsg.time).toDateString())
 
+            // Moment overlay — only on the last assistant message
+            let momentOverlay: React.ReactNode = null
+            if (isLastAssistant && currentMoment && !streaming) {
+              if (currentMoment.kind === 'heartbeat') {
+                momentOverlay = <HeartbeatMoment onDismiss={() => setCurrentMoment(null)} />
+              } else {
+                momentOverlay = (
+                  <ActivityMoment
+                    key={`${currentMoment.name}-${Date.now()}`}
+                    toolName={currentMoment.name}
+                    toolInput={currentMoment.input}
+                    onDismiss={() => setCurrentMoment(null)}
+                  />
+                )
+              }
+            }
+
             return (
               <div key={`${msg.time}-${i}`}>
                 {showDateSep && (
@@ -381,6 +429,7 @@ export function MessageList({ messages, streaming }: Props) {
                     onToggleBookmark={toggleBookmark}
                     onEditResend={handleEditResend}
                     onFork={handleFork}
+                    momentOverlay={momentOverlay}
                   />
                 </div>
               </div>