@swarmclawai/swarmclaw 0.4.5 → 0.5.0

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

@@ -7,6 +7,7 @@ import rehypeHighlight from 'rehype-highlight'
 import type { Message } from '@/types'
 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 { ToolRequestBanner } from './tool-request-banner'
@@ -170,6 +171,8 @@ function heartbeatSummary(text: string): string {
 
 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',
@@ -186,10 +189,49 @@ function parseAttachmentUrl(filePath?: string, fileUrl?: string) {
 
 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" className="max-w-[240px] rounded-[12px] mb-2 border border-white/10"
-        onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }} />
+      <>
+        <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>
     )
   }
 
@@ -197,7 +239,6 @@ function AttachmentChip({ url, filename, isUserMsg }: { url: string; filename: s
   const colorClass = FILE_TYPE_COLORS[ext] || 'text-text-3'
   const isPreviewable = PREVIEWABLE_ATTACH_RE.test(filename)
 
-  // Solid bg so chip is readable on both user (purple) and assistant bubbles
   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]'
@@ -206,40 +247,85 @@ function AttachmentChip({ url, filename, isUserMsg }: { url: string; filename: s
     ? '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={`flex items-center gap-3 px-4 py-2.5 mb-2 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>
-      {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">
+    <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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
-            <circle cx="12" cy="12" r="3" />
+            <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>
-          Preview
+          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>
       )}
-      <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>
   )
 }
@@ -280,17 +366,25 @@ function renderAttachments(message: Message) {
 interface Props {
   message: Message
   assistantName?: string
+  agentAvatarSeed?: string
+  agentName?: string
   isLast?: boolean
   onRetry?: () => void
+  messageIndex?: number
+  onToggleBookmark?: (index: number) => void
+  onEditResend?: (index: number, newText: string) => void
+  onFork?: (index: number) => void
 }
 
-export const MessageBubble = memo(function MessageBubble({ message, assistantName, isLast, onRetry }: Props) {
+export const MessageBubble = memo(function MessageBubble({ message, assistantName, agentAvatarSeed, agentName, isLast, onRetry, messageIndex, onToggleBookmark, onEditResend, onFork }: 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)
   const [copied, setCopied] = useState(false)
   const [heartbeatExpanded, setHeartbeatExpanded] = useState(false)
   const [toolEventsExpanded, setToolEventsExpanded] = useState(false)
+  const [editing, setEditing] = useState(false)
+  const [editText, setEditText] = useState('')
   const toolEvents = message.toolEvents || []
   const hasToolEvents = !isUser && toolEvents.length > 0
   const visibleToolEvents = toolEventsExpanded ? [...toolEvents].reverse() : toolEvents.slice(-1)
@@ -309,7 +403,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
     >
       {/* Sender label + timestamp */}
       <div className={`flex items-center gap-2.5 mb-2 px-1 ${isUser ? 'flex-row-reverse' : ''}`}>
-        {!isUser && <AiAvatar size="sm" />}
+        {!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>
@@ -414,12 +508,12 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
                   const isVideo = /\.(mp4|webm|mov|avi)$/i.test(src)
                   if (isVideo) {
                     return (
-                      <video src={src} controls className="max-w-full rounded-[10px] border border-white/10 my-2" />
+                      <video src={src} controls preload="none" className="max-w-full rounded-[10px] border border-white/10 my-2" />
                     )
                   }
                   return (
                     <a href={src} download target="_blank" rel="noopener noreferrer" className="block my-2">
-                      <img src={src} alt={alt || 'File'} className="max-w-full rounded-[10px] border border-white/10 hover:border-white/25 transition-colors cursor-pointer" onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }} />
+                      <img src={src} alt={alt || 'File'} loading="lazy" className="max-w-full rounded-[10px] border border-white/10 hover:border-white/25 transition-colors cursor-pointer" onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }} />
                     </a>
                   )
                 },
@@ -518,6 +612,16 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
         toolOutputs={toolEvents.map((e) => e.output || '').filter(Boolean)}
       />}
 
+      {/* 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">
+            <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>
+        </div>
+      )}
+
       {/* 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' : ''}`}>
         <button
@@ -533,6 +637,53 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
           </svg>
           {copied ? 'Copied' : 'Copy'}
         </button>
+        {typeof messageIndex === 'number' && onToggleBookmark && (
+          <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 }}
+          >
+            <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" />
+            </svg>
+            {message.bookmarked ? 'Unbookmark' : 'Bookmark'}
+          </button>
+        )}
+        {isUser && typeof messageIndex === 'number' && onEditResend && (
+          <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"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+            </svg>
+            Edit
+          </button>
+        )}
+        {typeof messageIndex === 'number' && onFork && (
+          <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"
+            style={{ fontFamily: 'inherit' }}
+          >
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              <circle cx="12" cy="18" r="3" />
+              <circle cx="6" cy="6" r="3" />
+              <circle cx="18" cy="6" r="3" />
+              <path d="M18 9v1a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V9" />
+              <path d="M12 12v3" />
+            </svg>
+            Fork
+          </button>
+        )}
         {!isUser && isLast && onRetry && (
           <button
             onClick={onRetry}
@@ -549,6 +700,37 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
           </button>
         )}
       </div>
+
+      {/* Inline edit mode */}
+      {editing && (
+        <div className={`max-w-[85%] md:max-w-[72%] mt-2 ${isUser ? 'self-end' : ''}`} style={{ animation: 'fade-in 0.2s ease' }}>
+          <textarea
+            value={editText}
+            onChange={(e) => setEditText(e.target.value)}
+            className="w-full min-h-[80px] p-3 rounded-[12px] bg-surface border border-white/[0.08] text-text text-[14px] resize-y outline-none focus:border-accent-bright/30"
+            style={{ fontFamily: 'inherit' }}
+          />
+          <div className="flex gap-2 mt-2 justify-end">
+            <button
+              onClick={() => setEditing(false)}
+              className="px-3 py-1.5 rounded-[8px] text-[11px] font-600 text-text-3 bg-white/[0.04] hover:bg-white/[0.07] border-none cursor-pointer transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => {
+                if (editText.trim() && typeof messageIndex === 'number' && onEditResend) {
+                  onEditResend(messageIndex, editText.trim())
+                  setEditing(false)
+                }
+              }}
+              className="px-3 py-1.5 rounded-[8px] text-[11px] font-600 text-white bg-accent-bright hover:bg-accent-bright/80 border-none cursor-pointer transition-colors"
+            >
+              Save & Resend
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   )
 })

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

@@ -1,12 +1,16 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import type { Message } from '@/types'
 import { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
 import { MessageBubble } from './message-bubble'
 import { StreamingBubble } from './streaming-bubble'
 import { ThinkingIndicator } from './thinking-indicator'
+import { SuggestionsBar } from './suggestions-bar'
+import { ExecApprovalCard } from './exec-approval-card'
+import { useApprovalStore } from '@/stores/use-approval-store'
 
 function dateSeparator(ts: number): string {
   const d = new Date(ts)
@@ -26,14 +30,19 @@ interface Props {
 export function MessageList({ messages, streaming }: Props) {
   const scrollRef = useRef<HTMLDivElement>(null)
   const [showScrollToBottom, setShowScrollToBottom] = useState(false)
-  const needsSnapRef = useRef(true)
+  const snapUntilRef = useRef(0)
   const prevSessionIdRef = useRef<string | null>(null)
-  const streamText = useChatStore((s) => s.streamText)
+  const displayText = useChatStore((s) => s.displayText)
+  const setMessages = useChatStore((s) => s.setMessages)
   const retryLastMessage = useChatStore((s) => s.retryLastMessage)
+  const editAndResend = useChatStore((s) => s.editAndResend)
+  const sendMessage = useChatStore((s) => s.sendMessage)
+  const forkSession = useAppStore((s) => s.forkSession)
   const session = useAppStore((s) => {
     const id = s.currentSessionId
     return id ? s.sessions[id] : null
   })
+  const sessionId = session?.id ?? null
   const agents = useAppStore((s) => s.agents)
   const agent = session?.agentId ? agents[session.agentId] : null
   const appSettings = useAppStore((s) => s.appSettings)
@@ -49,6 +58,37 @@ export function MessageList({ messages, streaming }: Props) {
   const [unreadCount, setUnreadCount] = useState(0)
   const prevMsgCountRef = useRef(messages.length)
 
+  // Bookmark filter
+  const [bookmarkFilter, setBookmarkFilter] = useState(false)
+
+  const toggleBookmark = useCallback(async (index: number) => {
+    if (!sessionId) return
+    const msg = messages[index]
+    if (!msg) return
+    const next = !msg.bookmarked
+    try {
+      await api('PUT', `/sessions/${sessionId}/messages`, { messageIndex: index, bookmarked: next })
+      const updated = [...messages]
+      updated[index] = { ...updated[index], bookmarked: next }
+      setMessages(updated)
+    } catch (err: unknown) {
+      console.error('Failed to toggle bookmark:', err instanceof Error ? err.message : String(err))
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId, messages])
+
+  const handleEditResend = useCallback(async (index: number, newText: string) => {
+    if (!sessionId || !editAndResend) return
+    await editAndResend(index, newText)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
+  const handleFork = useCallback(async (index: number) => {
+    if (!sessionId || !forkSession) return
+    await forkSession(sessionId, index)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sessionId])
+
   // In-thread search
   const [searchOpen, setSearchOpen] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
@@ -56,9 +96,9 @@ export function MessageList({ messages, streaming }: Props) {
   const searchInputRef = useRef<HTMLInputElement>(null)
 
   const isHeartbeatMessage = (msg: Message) =>
-    msg.role === 'assistant' && (msg.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(msg.text || ''))
+    msg.role === 'assistant' && (msg.kind === 'heartbeat' || /^\s*HEARTBEAT_OK\b/i.test(msg.text || '') || /^\s*NO_MESSAGE\b/i.test(msg.text || ''))
   const isHeartbeatOk = (msg: Message) =>
-    msg.suppressed === true || (msg.kind === 'heartbeat' && /^\s*HEARTBEAT_OK\b/i.test(msg.text || ''))
+    msg.suppressed === true || (msg.kind === 'heartbeat' && (/^\s*HEARTBEAT_OK\b/i.test(msg.text || '') || /^\s*NO_MESSAGE\b/i.test(msg.text || '')))
 
   const displayedMessages: Message[] = []
   for (const msg of messages) {
@@ -79,9 +119,14 @@ export function MessageList({ messages, streaming }: Props) {
     }
   }
 
+  // Apply bookmark filter
+  const filteredMessages = bookmarkFilter
+    ? displayedMessages.filter((msg) => msg.bookmarked)
+    : displayedMessages
+
   // Search matches
   const searchMatches = searchQuery.trim()
-    ? displayedMessages
+    ? filteredMessages
         .map((msg, i) => ({ msg, i }))
         .filter(({ msg }) => msg.text.toLowerCase().includes(searchQuery.toLowerCase()))
     : []
@@ -99,6 +144,10 @@ export function MessageList({ messages, streaming }: Props) {
     const nearBottom = isNearBottom(el)
     wasAtBottomRef.current = nearBottom
     setShowScrollToBottom(!nearBottom)
+    // Cancel snap window if user manually scrolls away
+    if (!nearBottom && Date.now() < snapUntilRef.current) {
+      snapUntilRef.current = 0
+    }
     if (nearBottom && unreadRef.current > 0) {
       unreadRef.current = 0
       setUnreadCount(0)
@@ -115,31 +164,52 @@ export function MessageList({ messages, streaming }: Props) {
     }
   }, [messages.length, isNearBottom])
 
-  // Detect session switch during render (no extra useEffect, no dep-array mismatch)
-  const sessionId = session?.id ?? null
-  if (sessionId !== prevSessionIdRef.current) {
-    prevSessionIdRef.current = sessionId
-    needsSnapRef.current = true
-    wasAtBottomRef.current = true
-  }
+  // Detect session switch — set snap window and reset scroll state.
+  // Must fire before the scroll positioning layoutEffect below.
+  useLayoutEffect(() => {
+    if (sessionId !== prevSessionIdRef.current) {
+      prevSessionIdRef.current = sessionId
+      wasAtBottomRef.current = true
+      snapUntilRef.current = Date.now() + 2000
+    }
+  }, [sessionId])
 
-  useEffect(() => {
+  // Position scroll before paint — no setState here to avoid cascading renders.
+  // The onScroll handler and the state-update effect below handle UI state.
+  useLayoutEffect(() => {
     const el = scrollRef.current
-    if (!el) return
-    if (needsSnapRef.current && messages.length > 0) {
-      // First render after session switch — snap instantly, no visible scroll
-      needsSnapRef.current = false
+    if (!el || messages.length === 0) return
+
+    const snapping = Date.now() < snapUntilRef.current
+
+    if (snapping || wasAtBottomRef.current) {
       el.scrollTop = el.scrollHeight
-      setShowScrollToBottom(false)
       wasAtBottomRef.current = true
-      return
-    }
-    // Auto-scroll if user was at bottom before new content arrived
-    if (wasAtBottomRef.current) {
-      el.scrollTop = el.scrollHeight
     }
+  }, [messages.length, displayText])
+
+  // Update scroll-related UI state after render (separate from layoutEffect to avoid cascading)
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el || messages.length === 0) return
     updateScrollState()
-  }, [messages.length, streamText, isNearBottom, updateScrollState])
+  }, [messages.length, displayText, updateScrollState])
+
+  // Re-snap when content resizes during snap window (lazy images increasing scrollHeight)
+  useEffect(() => {
+    const el = scrollRef.current
+    if (!el) return
+    const content = el.firstElementChild as HTMLElement | null
+    if (!content) return
+
+    const observer = new ResizeObserver(() => {
+      if (Date.now() < snapUntilRef.current || wasAtBottomRef.current) {
+        el.scrollTop = el.scrollHeight
+      }
+    })
+    observer.observe(content)
+    return () => observer.disconnect()
+  }, [sessionId])
 
   const handleScrollToBottom = useCallback(() => {
     const el = scrollRef.current
@@ -179,7 +249,7 @@ export function MessageList({ messages, streaming }: Props) {
   }, [searchOpen])
 
   return (
-    <div className="relative flex-1 min-h-0">
+    <div className="relative flex-1 min-h-0 min-w-0">
       {/* In-thread search bar */}
       {searchOpen && (
         <div className="absolute top-0 left-0 right-0 z-20 flex items-center gap-2 px-6 md:px-12 lg:px-16 py-2 bg-surface/95 backdrop-blur-sm border-b border-white/[0.06]">
@@ -224,6 +294,15 @@ export function MessageList({ messages, streaming }: Props) {
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="m6 9 6 6 6-6" /></svg>
           </button>
+          <button
+            onClick={() => setBookmarkFilter((v) => !v)}
+            aria-label={bookmarkFilter ? 'Show all messages' : 'Show bookmarked only'}
+            className={`p-1 rounded-[6px] hover:bg-white/[0.04] cursor-pointer border-none bg-transparent transition-colors ${bookmarkFilter ? 'text-[#F59E0B]' : 'text-text-3 hover:text-text-2'}`}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill={bookmarkFilter ? '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" />
+            </svg>
+          </button>
           <button
             onClick={() => { setSearchOpen(false); setSearchQuery(''); setSearchIdx(0) }}
             aria-label="Close search"
@@ -240,14 +319,16 @@ export function MessageList({ messages, streaming }: Props) {
         className="h-full overflow-y-auto px-6 md:px-12 lg:px-16 py-6"
       >
         <div className="flex flex-col gap-6">
-          {displayedMessages.map((msg, i) => {
+          {filteredMessages.map((msg, i) => {
+            // Find original index in the full messages array for API calls
+            const originalIndex = messages.indexOf(msg)
             const isLastAssistant = msg.role === 'assistant' && !streaming
-              && displayedMessages.slice(i + 1).every((m) => m.role !== 'assistant')
+              && filteredMessages.slice(i + 1).every((m) => m.role !== 'assistant')
             const isSearchMatch = searchQuery && searchMatches.some((m) => m.i === i)
             const isCurrentMatch = searchQuery && searchMatches[searchIdx]?.i === i
 
             // Date separator
-            const prevMsg = i > 0 ? displayedMessages[i - 1] : null
+            const prevMsg = i > 0 ? filteredMessages[i - 1] : null
             const showDateSep = msg.time && (!prevMsg?.time || new Date(msg.time).toDateString() !== new Date(prevMsg.time).toDateString())
 
             return (
@@ -265,15 +346,25 @@ export function MessageList({ messages, streaming }: Props) {
                   <MessageBubble
                     message={msg}
                     assistantName={assistantName}
+                    agentAvatarSeed={agent?.avatarSeed}
+                    agentName={agent?.name}
                     isLast={isLastAssistant}
                     onRetry={isLastAssistant ? retryLastMessage : undefined}
+                    messageIndex={originalIndex >= 0 ? originalIndex : undefined}
+                    onToggleBookmark={toggleBookmark}
+                    onEditResend={handleEditResend}
+                    onFork={handleFork}
                   />
                 </div>
               </div>
             )
           })}
-          {streaming && !streamText && <ThinkingIndicator assistantName={assistantName} />}
-          {streaming && streamText && <StreamingBubble text={streamText} assistantName={assistantName} />}
+          <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} />}
+          {!streaming && filteredMessages.length > 0 && filteredMessages[filteredMessages.length - 1]?.role === 'assistant' && (
+            <SuggestionsBar lastMessage={filteredMessages[filteredMessages.length - 1]} onSend={sendMessage} />
+          )}
         </div>
       </div>
       {showScrollToBottom && (
@@ -297,3 +388,16 @@ export function MessageList({ messages, streaming }: Props) {
     </div>
   )
 }
+
+function ApprovalCards({ agentId }: { agentId?: string | null }) {
+  const approvals = useApprovalStore((s) => s.approvals)
+  const cards = Object.values(approvals).filter((a) => !agentId || a.agentId === agentId)
+  if (!cards.length) return null
+  return (
+    <>
+      {cards.map((a) => (
+        <ExecApprovalCard key={a.id} approval={a} />
+      ))}
+    </>
+  )
+}