@swarmclawai/swarmclaw 0.5.3 → 0.6.2

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

@@ -6,12 +6,16 @@ import { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { ConnectorPlatformIcon, CONNECTOR_PLATFORM_META } from '@/components/shared/connector-platform-icon'
 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 { HeartbeatMoment, ActivityMoment, isNotableTool } from './activity-moment'
 import { useApprovalStore } from '@/stores/use-approval-store'
+import { useWs } from '@/hooks/use-ws'
+import { GatewayDisconnectOverlay, useGatewayStatus } from '@/components/settings/gateway-disconnect-overlay'
 
 const INTRO_GREETINGS = [
   'What can I help you with?',
@@ -55,6 +59,10 @@ export function MessageList({ messages, streaming }: Props) {
   const retryLastMessage = useChatStore((s) => s.retryLastMessage)
   const editAndResend = useChatStore((s) => s.editAndResend)
   const sendMessage = useChatStore((s) => s.sendMessage)
+  const hasMoreMessages = useChatStore((s) => s.hasMoreMessages)
+  const loadingMore = useChatStore((s) => s.loadingMore)
+  const totalMessages = useChatStore((s) => s.totalMessages)
+  const loadMoreMessages = useChatStore((s) => s.loadMoreMessages)
   const forkSession = useAppStore((s) => s.forkSession)
   const session = useAppStore((s) => {
     const id = s.currentSessionId
@@ -71,6 +79,38 @@ export function MessageList({ messages, streaming }: Props) {
   const showOk = appSettings.heartbeatShowOk ?? false
   const showAlerts = appSettings.heartbeatShowAlerts ?? true
 
+  // Gateway disconnect overlay for openclaw agents
+  const isOpenClaw = agent?.provider === 'openclaw'
+  const gatewayStatus = useGatewayStatus()
+  const showGatewayOverlay = isOpenClaw && gatewayStatus === 'disconnected'
+
+  // 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)
@@ -79,6 +119,10 @@ export function MessageList({ messages, streaming }: Props) {
   // Bookmark filter
   const [bookmarkFilter, setBookmarkFilter] = useState(false)
 
+  // Connector source filter
+  const [connectorFilter, setConnectorFilter] = useState<string | null>(null)
+  const [connectorFilterCollapsed, setConnectorFilterCollapsed] = useState(false)
+
   const toggleBookmark = useCallback(async (index: number) => {
     if (!sessionId) return
     const msg = messages[index]
@@ -137,10 +181,24 @@ export function MessageList({ messages, streaming }: Props) {
     }
   }
 
-  // Apply bookmark filter
-  const filteredMessages = bookmarkFilter
+  // Collect unique connector sources for filter UI
+  const connectorSources = new Map<string, { platform: string; connectorName: string }>()
+  for (const msg of displayedMessages) {
+    if (msg.source?.connectorId && !connectorSources.has(msg.source.connectorId)) {
+      connectorSources.set(msg.source.connectorId, {
+        platform: msg.source.platform,
+        connectorName: msg.source.connectorName,
+      })
+    }
+  }
+
+  // Apply bookmark + connector filter
+  let filteredMessages = bookmarkFilter
     ? displayedMessages.filter((msg) => msg.bookmarked)
     : displayedMessages
+  if (connectorFilter) {
+    filteredMessages = filteredMessages.filter((msg) => msg.source?.connectorId === connectorFilter)
+  }
 
   // Search matches
   const searchMatches = searchQuery.trim()
@@ -245,6 +303,23 @@ export function MessageList({ messages, streaming }: Props) {
     return () => window.removeEventListener('swarmclaw:scroll-bottom', handler)
   }, [handleScrollToBottom])
 
+  // Scroll to a specific message by index (used by search)
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const handler = (e: Event) => {
+      const idx = (e as CustomEvent).detail?.index
+      if (typeof idx !== 'number') return
+      const el = scrollRef.current?.querySelector(`[data-message-index="${idx}"]`) as HTMLElement | null
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        el.classList.add('bg-accent-bright/10')
+        setTimeout(() => el.classList.remove('bg-accent-bright/10'), 2000)
+      }
+    }
+    window.addEventListener('swarmclaw:scroll-to-message', handler)
+    return () => window.removeEventListener('swarmclaw:scroll-to-message', handler)
+  }, [])
+
   // Ctrl+F search toggle
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
@@ -267,7 +342,7 @@ export function MessageList({ messages, streaming }: Props) {
   }, [searchOpen])
 
   return (
-    <div className="relative flex-1 min-h-0 min-w-0">
+    <div className="relative flex-1 min-h-0 min-w-0 flex flex-col overflow-hidden">
       {/* 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]">
@@ -281,6 +356,7 @@ export function MessageList({ messages, streaming }: Props) {
             value={searchQuery}
             onChange={(e) => { setSearchQuery(e.target.value); setSearchIdx(0) }}
             placeholder="Search in conversation..."
+            aria-label="Search messages"
             className="flex-1 bg-transparent text-text text-[13px] outline-none placeholder:text-text-3/50"
             style={{ fontFamily: 'inherit' }}
             onKeyDown={(e) => {
@@ -315,7 +391,7 @@ export function MessageList({ messages, streaming }: Props) {
           <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'}`}
+            className={`p-1 rounded-[6px] hover:bg-white/[0.04] cursor-pointer border-none bg-transparent transition-colors ${bookmarkFilter ? 'text-amber-500' : '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" />
@@ -331,12 +407,104 @@ export function MessageList({ messages, streaming }: Props) {
         </div>
       )}
 
+      {/* Connector source filter — shown when connector messages exist */}
+      {connectorSources.size > 0 && (
+        <div className="flex items-center gap-1.5 px-6 md:px-12 lg:px-16 py-1.5 border-b border-white/[0.04]">
+          <button
+            onClick={() => setConnectorFilterCollapsed((c) => !c)}
+            className="flex items-center gap-1 text-[10px] text-text-3/50 uppercase tracking-wider font-600 mr-1 bg-transparent border-none cursor-pointer hover:text-text-3/70 transition-colors p-0"
+            title={connectorFilterCollapsed ? 'Expand source filter' : 'Collapse source filter'}
+          >
+            <svg
+              width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"
+              className="transition-transform duration-200"
+              style={{ transform: connectorFilterCollapsed ? 'rotate(-90deg)' : 'rotate(0deg)' }}
+            >
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+            Source
+            {connectorFilterCollapsed && connectorFilter && (
+              <span className="text-accent-bright/70 normal-case tracking-normal">
+                ({connectorSources.get(connectorFilter)?.connectorName || connectorFilter})
+              </span>
+            )}
+          </button>
+          {!connectorFilterCollapsed && (
+            <>
+              <button
+                onClick={() => setConnectorFilter(null)}
+                className={`px-2 py-1 rounded-[6px] text-[11px] font-600 cursor-pointer border-none transition-all ${
+                  !connectorFilter ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2 hover:bg-white/[0.04]'
+                }`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                All
+              </button>
+              {Array.from(connectorSources.entries()).map(([cid, info]) => {
+                const active = connectorFilter === cid
+                const meta = CONNECTOR_PLATFORM_META[info.platform as keyof typeof CONNECTOR_PLATFORM_META]
+                return (
+                  <button
+                    key={cid}
+                    onClick={() => setConnectorFilter(active ? null : cid)}
+                    className={`flex items-center gap-1.5 px-2 py-1 rounded-[6px] text-[11px] font-600 cursor-pointer border-none transition-all ${
+                      active ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2 hover:bg-white/[0.04]'
+                    }`}
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    <ConnectorPlatformIcon platform={info.platform as keyof typeof CONNECTOR_PLATFORM_META} size={12} />
+                    {info.connectorName || meta?.label || info.platform}
+                  </button>
+                )
+              })}
+            </>
+          )}
+        </div>
+      )}
+
       <div
         ref={scrollRef}
         onScroll={updateScrollState}
-        className="h-full overflow-y-auto px-6 md:px-12 lg:px-16 py-6 fade-up"
+        className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-6 md:px-12 lg:px-16 pt-6 pb-10 fade-up"
       >
-        <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" />
+          {hasMoreMessages && (
+            <div className="flex justify-center py-3">
+              <button
+                onClick={async () => {
+                  const el = scrollRef.current
+                  const prevHeight = el?.scrollHeight ?? 0
+                  await loadMoreMessages()
+                  // Preserve scroll position after prepending
+                  if (el) {
+                    requestAnimationFrame(() => {
+                      el.scrollTop += el.scrollHeight - prevHeight
+                    })
+                  }
+                }}
+                disabled={loadingMore}
+                className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-white/[0.08] bg-surface/80 text-text-3 text-[12px] font-600 hover:bg-surface-2 hover:text-text-2 transition-colors cursor-pointer disabled:opacity-50"
+              >
+                {loadingMore ? (
+                  <>
+                    <span className="w-3 h-3 rounded-full border-2 border-text-3/30 border-t-text-2 animate-spin" />
+                    Loading...
+                  </>
+                ) : (
+                  <>
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+                      <path d="M12 19V5" />
+                      <path d="m5 12 7-7 7 7" />
+                    </svg>
+                    Load earlier messages
+                    <span className="text-text-3/50">({totalMessages - messages.length} more)</span>
+                  </>
+                )}
+              </button>
+            </div>
+          )}
           {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} />
@@ -347,6 +515,41 @@ export function MessageList({ messages, streaming }: Props) {
             </div>
           )}
           {filteredMessages.map((msg, i) => {
+            // Context-clear divider — render a visual separator instead of a bubble
+            if (msg.kind === 'context-clear') {
+              const originalIndex = messages.indexOf(msg)
+              return (
+                <div key={`ctx-clear-${msg.time}-${i}`} className="group/ctx flex items-center gap-4 py-3">
+                  <div className="flex-1 h-px bg-amber-400/20" />
+                  <span className="flex items-center gap-1.5 text-[10px] font-600 text-amber-400/60 uppercase tracking-[0.1em]">
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="shrink-0">
+                      <line x1="2" y1="12" x2="22" y2="12" />
+                      <polyline points="8 8 4 12 8 16" />
+                      <polyline points="16 8 20 12 16 16" />
+                    </svg>
+                    New context
+                    {msg.time ? ` · ${new Date(msg.time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}` : ''}
+                  </span>
+                  {sessionId && originalIndex >= 0 && (
+                    <button
+                      type="button"
+                      onClick={async () => {
+                        try {
+                          await api('DELETE', `/sessions/${sessionId}/messages`, { messageIndex: originalIndex })
+                          setMessages(messages.filter((_: Message, idx: number) => idx !== originalIndex))
+                        } catch { /* best-effort */ }
+                      }}
+                      className="opacity-0 group-hover/ctx:opacity-100 text-[10px] font-600 text-amber-400/60 hover:text-amber-400 bg-transparent border-none cursor-pointer transition-all px-1.5 py-0.5 rounded-[4px] hover:bg-amber-400/10"
+                      title="Undo — restore full context"
+                    >
+                      Undo
+                    </button>
+                  )}
+                  <div className="flex-1 h-px bg-amber-400/20" />
+                </div>
+              )
+            }
+
             // Find original index in the full messages array for API calls
             const originalIndex = messages.indexOf(msg)
             const isLastAssistant = msg.role === 'assistant' && !streaming
@@ -358,8 +561,25 @@ 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}`}>
+              <div key={`${msg.time}-${i}`} data-message-index={i}>
                 {showDateSep && (
                   <div className="flex items-center gap-4 py-2 mb-2">
                     <div className="flex-1 h-px bg-white/[0.06]" />
@@ -381,6 +601,7 @@ export function MessageList({ messages, streaming }: Props) {
                     onToggleBookmark={toggleBookmark}
                     onEditResend={handleEditResend}
                     onFork={handleFork}
+                    momentOverlay={momentOverlay}
                   />
                 </div>
               </div>
@@ -389,11 +610,12 @@ export function MessageList({ messages, streaming }: Props) {
           <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' && (
+          {appSettings.suggestionsEnabled !== false && !streaming && filteredMessages.length > 0 && filteredMessages[filteredMessages.length - 1]?.role === 'assistant' && (
             <SuggestionsBar lastMessage={filteredMessages[filteredMessages.length - 1]} onSend={sendMessage} />
           )}
         </div>
       </div>
+      {showGatewayOverlay && <GatewayDisconnectOverlay />}
       {showScrollToBottom && (
         <button
           onClick={handleScrollToBottom}

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

@@ -1,20 +1,38 @@
 'use client'
 
 import { useMemo, useState } from 'react'
-import ReactMarkdown from 'react-markdown'
-import remarkGfm from 'remark-gfm'
-import rehypeHighlight from 'rehype-highlight'
 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 { ActivityMoment, isNotableTool } from './activity-moment'
 import { useChatStore, type ToolEvent } from '@/stores/use-chat-store'
+import { isStructuredMarkdown } from './markdown-utils'
 
 function ToolEventsSection({ toolEvents }: { toolEvents: ToolEvent[] }) {
   const [expanded, setExpanded] = useState(false)
   const shouldCollapse = toolEvents.length > 2
   const latestTool = toolEvents[toolEvents.length - 1]
 
+  // When collapsed, collect deduplicated media from all tool events so files remain visible
+  const collapsedMedia = useMemo(() => {
+    if (!shouldCollapse || expanded) return null
+    const seen = new Set<string>()
+    const images: string[] = []
+    const videos: string[] = []
+    const pdfs: { name: string; url: string }[] = []
+    const files: { name: string; url: string }[] = []
+    for (const ev of toolEvents) {
+      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 }
+  }, [toolEvents, shouldCollapse, expanded])
+
   if (shouldCollapse && !expanded) {
     return (
       <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mb-2">
@@ -33,6 +51,33 @@ function ToolEventsSection({ toolEvents }: { toolEvents: ToolEvent[] }) {
             latest: {latestTool?.name || 'unknown'}
           </span>
         </button>
+        {collapsedMedia && (
+          <>
+            {collapsedMedia.images.map((src, i) => (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img key={`ci-${i}`} src={src} alt={`Screenshot ${i + 1}`} loading="lazy"
+                className="max-w-[400px] rounded-[10px] border border-white/10"
+                onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }} />
+            ))}
+            {collapsedMedia.videos.map((src, i) => (
+              <video key={`cv-${i}`} src={src} controls playsInline preload="none" className="max-w-full rounded-[10px] border border-white/10" />
+            ))}
+            {collapsedMedia.pdfs.map((file, i) => (
+              <div key={`cp-${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} />
+              </div>
+            ))}
+            {collapsedMedia.files.map((file, i) => (
+              <a key={`cf-${i}`} href={file.url} download className="flex items-center gap-2 px-3 py-2 rounded-[10px] border border-white/10 bg-surface/60 text-[13px] text-text-2 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}
+              </a>
+            ))}
+          </>
+        )}
       </div>
     )
   }
@@ -63,18 +108,46 @@ interface Props {
 }
 
 export function StreamingBubble({ text, assistantName, agentAvatarSeed, agentName }: Props) {
-  const rendered = useMemo(() => text, [text])
   const toolEvents = useChatStore((s) => s.toolEvents)
   const streamPhase = useChatStore((s) => s.streamPhase)
   const streamToolName = useChatStore((s) => s.streamToolName)
+  const thinkingText = useChatStore((s) => s.thinkingText)
+  const wide = useMemo(() => isStructuredMarkdown(text), [text])
+
+  // Track which activity moments have been dismissed
+  const [dismissedIds, setDismissedIds] = useState<Set<string>>(new Set())
+
+  // Find the latest completed notable tool event that hasn't been dismissed
+  let currentMoment: { id: string; name: string; input: string } | null = null
+  for (let i = toolEvents.length - 1; i >= 0; i--) {
+    const event = toolEvents[i]
+    if (event.status === 'done' && isNotableTool(event.name) && !dismissedIds.has(event.id)) {
+      currentMoment = { id: event.id, name: event.name, input: event.input }
+      break
+    }
+  }
+
+  const handleDismiss = (momentId: string) => {
+    setDismissedIds((prev) => new Set(prev).add(momentId))
+  }
 
   return (
     <div
-      className="flex flex-col items-start"
+      className="flex flex-col items-start relative pl-[44px]"
       style={{ animation: 'msg-in-left 0.35s cubic-bezier(0.16, 1, 0.3, 1)' }}
     >
+      <div className="absolute left-[4px] top-0 relative">
+        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={28} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
+        {currentMoment && (
+          <ActivityMoment
+            key={currentMoment.id}
+            toolName={currentMoment.name}
+            toolInput={currentMoment.input}
+            onDismiss={() => handleDismiss(currentMoment!.id)}
+          />
+        )}
+      </div>
       <div className="flex items-center gap-2.5 mb-2 px-1">
-        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={36} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
         <span className="text-[12px] font-600 text-text-3">{assistantName || 'Claude'}</span>
         <span className="w-2 h-2 rounded-full bg-accent-bright" style={{ animation: 'pulse 1.5s ease infinite' }} />
         {streamPhase === 'tool' && streamToolName && (
@@ -82,50 +155,34 @@ export function StreamingBubble({ text, assistantName, agentAvatarSeed, agentNam
         )}
       </div>
 
+      {/* Collapsed thinking section (shown when text has started but thinking exists) */}
+      {text && thinkingText && (
+        <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>
+            </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">
+                {thinkingText}
+              </div>
+            </div>
+          </details>
+        </div>
+      )}
+
       {/* Tool call events (collapsible when > 2) */}
       {toolEvents.length > 0 && (
         <ToolEventsSection toolEvents={toolEvents} />
       )}
 
-      {rendered && (
-        <div className="max-w-[85%] md:max-w-[72%] bubble-ai px-5 py-3.5">
-          <div className="msg-content streaming-cursor text-[15px] leading-[1.7] break-words text-text">
-            <ReactMarkdown
-              remarkPlugins={[remarkGfm]}
-              rehypePlugins={[rehypeHighlight]}
-              components={{
-                pre({ children }) {
-                  return <pre>{children}</pre>
-                },
-                code({ className, children }) {
-                  const isBlock = className?.startsWith('language-') || className?.startsWith('hljs')
-                  if (isBlock) {
-                    return <CodeBlock className={className}>{children}</CodeBlock>
-                  }
-                  return <code className={className}>{children}</code>
-                },
-                a({ href, children }) {
-                  if (!href) return <>{children}</>
-                  const ytMatch = href.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/)
-                  if (ytMatch) {
-                    return (
-                      <div className="my-2">
-                        <iframe
-                          src={`https://www.youtube-nocookie.com/embed/${ytMatch[1]}`}
-                          className="w-full aspect-video rounded-[10px] border border-white/10"
-                          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                          allowFullScreen
-                          title="YouTube video"
-                        />
-                      </div>
-                    )
-                  }
-                  return <a href={href} target="_blank" rel="noopener noreferrer">{children}</a>
-                },
-              }}
-            >
-              {rendered}
-            </ReactMarkdown>
+      {text && (
+        <div className={`${wide ? 'max-w-[92%] md:max-w-[85%]' : 'max-w-[85%] md:max-w-[72%]'} bubble-ai px-5 py-3.5`}>
+          <div className="streaming-cursor text-[15px] leading-[1.7] break-words text-text whitespace-pre-wrap">
+            {text}
           </div>
         </div>
       )}

package/src/components/chat/suggestions-bar.tsx

@@ -53,7 +53,7 @@ export function SuggestionsBar({ lastMessage, onSend }: Props) {
 
   return (
     <div
-      className="flex flex-wrap gap-2 px-1 pt-2"
+      className="flex flex-wrap gap-2 px-1 pt-2 ml-10"
       style={{ animation: 'fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1)' }}
     >
       {suggestions.map((text) => (