@swarmclawai/swarmclaw 0.6.0 → 0.6.2

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

@@ -6,6 +6,7 @@ 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'
@@ -14,6 +15,7 @@ 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?',
@@ -57,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
@@ -73,6 +79,11 @@ 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)
@@ -108,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]
@@ -166,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()
@@ -274,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) => {
@@ -296,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]">
@@ -310,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) => {
@@ -344,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" />
@@ -360,14 +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 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} />
@@ -378,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
@@ -407,7 +579,7 @@ export function MessageList({ messages, streaming }: Props) {
             }
 
             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]" />
@@ -438,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

@@ -3,7 +3,7 @@
 import { useMemo, useState } from 'react'
 import { AiAvatar } from '@/components/shared/avatar'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
-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'
@@ -13,6 +13,26 @@ function ToolEventsSection({ toolEvents }: { toolEvents: ToolEvent[] }) {
   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">
@@ -31,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>
     )
   }
@@ -64,6 +111,7 @@ export function StreamingBubble({ text, assistantName, agentAvatarSeed, agentNam
   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
@@ -107,6 +155,25 @@ 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} />

package/src/components/chat/tool-call-bubble.tsx

@@ -20,6 +20,7 @@ const TOOL_COLORS: Record<string, string> = {
   web_search: '#3B82F6',
   web_fetch: '#3B82F6',
   delegate_to_agent: '#6366F1',
+  check_delegation_status: '#6366F1',
   delegate_to_claude_code: '#6366F1',
   delegate_to_codex_cli: '#0EA5E9',
   delegate_to_opencode_cli: '#14B8A6',
@@ -71,6 +72,7 @@ export const TOOL_LABELS: Record<string, string> = {
   codex_cli: 'Codex CLI',
   opencode_cli: 'OpenCode CLI',
   delegate_to_agent: 'Agent Delegation',
+  check_delegation_status: 'Check Delegation',
   delegate_to_claude_code: 'Claude Code',
   delegate_to_codex_cli: 'Codex CLI',
   delegate_to_opencode_cli: 'OpenCode CLI',
@@ -107,6 +109,7 @@ export const TOOL_DESCRIPTIONS: Record<string, string> = {
   codex_cli: 'Enable delegation to OpenAI Codex CLI',
   opencode_cli: 'Enable delegation to OpenCode CLI',
   delegate_to_agent: 'Delegate a task to another agent',
+  check_delegation_status: 'Check the status of a delegated task',
   delegate_to_claude_code: 'Delegate complex coding tasks to Claude Code',
   delegate_to_codex_cli: 'Delegate complex coding tasks to Codex CLI',
   delegate_to_opencode_cli: 'Delegate complex coding tasks to OpenCode CLI',
@@ -164,6 +167,45 @@ function formatJson(raw: string): string {
   }
 }
 
+/** Relative time label like "2h ago", "5m ago" */
+function relativeTime(ts: number): string {
+  const diff = Date.now() - ts
+  if (diff < 60_000) return 'just now'
+  if (diff < 3_600_000) return `${Math.round(diff / 60_000)}m ago`
+  if (diff < 86_400_000) return `${Math.round(diff / 3_600_000)}h ago`
+  return `${Math.round(diff / 86_400_000)}d ago`
+}
+
+/** Format search_history_tool output into human-readable text */
+function formatSearchHistoryOutput(raw: string): string | null {
+  try {
+    const parsed = JSON.parse(raw)
+    const matches = parsed?.matches
+    if (!Array.isArray(matches) || matches.length === 0) {
+      return parsed?.query ? `No matches found for "${parsed.query}"` : null
+    }
+    const header = `Found ${matches.length} match${matches.length === 1 ? '' : 'es'}${parsed.query ? ` for "${parsed.query}"` : ''}`
+    const lines = matches.slice(0, 10).map((m: Record<string, unknown>, i: number) => {
+      const role = String(m.role || 'unknown')
+      const kind = m.kind ? ` (${m.kind})` : ''
+      const time = typeof m.time === 'number' ? ` · ${relativeTime(m.time)}` : ''
+      const text = String(m.text || '').replace(/\s+/g, ' ').trim().slice(0, 200)
+      return `${i + 1}. [${role}]${kind}${time}\n   ${text}${String(m.text || '').length > 200 ? '...' : ''}`
+    })
+    return `${header}\n\n${lines.join('\n\n')}`
+  } catch {
+    return null
+  }
+}
+
+/** Try to produce a human-readable output for known tool types */
+function formatToolOutput(toolName: string, raw: string): string {
+  if (toolName === 'search_history_tool') {
+    return formatSearchHistoryOutput(raw) || formatJson(raw)
+  }
+  return formatJson(raw)
+}
+
 /** Extract a human-readable preview from tool input */
 function getInputPreview(name: string, input: string): string {
   try {
@@ -218,7 +260,7 @@ function getInputPreview(name: string, input: string): string {
 }
 
 /** Extract embedded images, videos, PDFs, and file links from tool output */
-function extractMedia(output: string): { images: string[]; videos: string[]; pdfs: { name: string; url: string }[]; files: { name: string; url: string }[]; cleanText: string } {
+export function extractMedia(output: string): { images: string[]; videos: string[]; pdfs: { name: string; url: string }[]; files: { name: string; url: string }[]; cleanText: string } {
   const images: string[] = []
   const videos: string[] = []
   const pdfs: { name: string; url: string }[] = []
@@ -341,8 +383,8 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
 
   const formattedCleanOutput = useMemo(() => {
     if (!media.cleanText) return ''
-    return formatJson(media.cleanText)
-  }, [media.cleanText])
+    return formatToolOutput(event.name, media.cleanText)
+  }, [event.name, media.cleanText])
 
   const hasMedia = media.images.length > 0 || media.videos.length > 0 || media.pdfs.length > 0 || media.files.length > 0
 

package/src/components/chat/transfer-agent-picker.tsx

@@ -30,7 +30,7 @@ export function TransferAgentPicker({ excludeIds, filterIds, onSelect, onClose }
   return (
     <>
       <div className="fixed inset-0 z-40" onClick={onClose} />
-      <div className="absolute left-0 bottom-full mb-2 z-50 w-[220px] rounded-[10px] bg-[#1a1a2e]/95 backdrop-blur-xl border border-white/[0.1] shadow-[0_12px_40px_rgba(0,0,0,0.5)] overflow-hidden">
+      <div className="absolute left-0 bottom-full mb-2 z-50 w-[220px] rounded-[10px] bg-surface/95 backdrop-blur-xl border border-white/[0.1] shadow-[0_12px_40px_rgba(0,0,0,0.5)] overflow-hidden">
         <div className="p-2">
           <input
             value={query}

package/src/components/chatrooms/chatroom-list.tsx

@@ -24,6 +24,13 @@ export function ChatroomList() {
   useEffect(() => { refresh() }, [refresh])
   useWs('chatrooms', refresh, 15_000)
 
+  // Auto-select the latest chatroom when none is selected
+  useEffect(() => {
+    if (currentChatroomId) return
+    const latest = Object.values(chatrooms).sort((a, b) => b.updatedAt - a.updatedAt)[0]
+    if (latest) setCurrentChatroom(latest.id)
+  }, [chatrooms, currentChatroomId, setCurrentChatroom])
+
   const [filter, setFilter] = useState<'all' | 'active' | 'recent'>('all')
 
   const sorted = useMemo(() =>
@@ -63,7 +70,7 @@ export function ChatroomList() {
                   type="button"
                   onClick={() => setFilter(f)}
                   data-active={filter === f || undefined}
-                  className="px-3 py-1.5 rounded-[8px] text-[11px] font-600 border-none cursor-pointer transition-all
+                  className="px-3 py-1.5 rounded-[8px] text-[11px] font-600 border-none cursor-pointer transition-all focus-visible:ring-1 focus-visible:ring-accent-bright/50
                     data-[active]:bg-accent-soft data-[active]:text-accent-bright
                     bg-transparent text-text-3 hover:text-text-2 hover:bg-white/[0.04]"
                 >

package/src/components/chatrooms/chatroom-message.tsx

@@ -14,6 +14,7 @@ import { AgentHoverCard } from './agent-hover-card'
 import { ChatroomToolRequestBanner } from './chatroom-tool-request-banner'
 import { isStructuredMarkdown } from '@/components/chat/markdown-utils'
 import { TransferAgentPicker } from '@/components/chat/transfer-agent-picker'
+import { ConnectorPlatformIcon, CONNECTOR_PLATFORM_META } from '@/components/shared/connector-platform-icon'
 import type { ChatroomMessage, Agent } from '@/types'
 
 interface Props {
@@ -188,13 +189,17 @@ export function ChatroomMessageBubble({ message, agents, onToggleReaction, onRep
           <div className="flex items-baseline gap-2 mb-0.5">
             {!isUser && agent ? (
               <AgentHoverCard agent={agent}>
-                <span className="text-[13px] font-600 text-accent-bright hover:underline cursor-pointer">
+                <span className="text-[13px] font-600 text-accent-bright hover:underline cursor-pointer flex items-center gap-1.5">
+                  {message.source && <ConnectorPlatformIcon platform={message.source.platform} size={12} />}
                   {message.senderName}
                 </span>
               </AgentHoverCard>
             ) : (
-              <span className="text-[13px] font-600 text-text">
-                {message.senderName}
+              <span className="text-[13px] font-600 text-text flex items-center gap-1.5">
+                {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}`
+                  : message.senderName}
               </span>
             )}
             <span className="label-mono" title={new Date(message.time).toLocaleString()}>{formatRelativeTime(message.time)}</span>

package/src/components/chatrooms/chatroom-view.tsx

@@ -177,7 +177,7 @@ export function ChatroomView() {
           </svg>
         </div>
         <div className="flex-1 min-w-0">
-          <h3 className="text-[14px] font-600 text-text truncate">{chatroom.name}</h3>
+          <h3 className="text-[14px] font-700 text-text truncate">{chatroom.name}</h3>
           <p className="text-[11px] text-text-3 truncate">
             {memberAgents.length} agent{memberAgents.length !== 1 ? 's' : ''}
             {chatroom.description ? ` · ${chatroom.description}` : ''}
@@ -192,7 +192,7 @@ export function ChatroomView() {
                   onClick={() => navigateToAgent(agent.id)}
                   className="relative transition-all duration-200 hover:scale-110 hover:z-10 hover:-translate-y-0.5 cursor-pointer bg-transparent border-none p-0"
                 >
-                  <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={22} className="ring-1 ring-bg" status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
+                  <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={22} status={streamingAgents.has(agent.id) ? 'busy' : 'online'} />
                 </button>
               </TooltipTrigger>
               <TooltipContent side="bottom" sideOffset={6}>
@@ -201,7 +201,7 @@ export function ChatroomView() {
             </Tooltip>
           ))}
           {memberAgents.length > 5 && (
-            <div className="w-[22px] h-[22px] rounded-full bg-white/[0.08] flex items-center justify-center text-[9px] text-text-3 ring-1 ring-bg">
+            <div className="w-[22px] h-[22px] rounded-full bg-white/[0.08] flex items-center justify-center text-[9px] text-text-3">
               +{memberAgents.length - 5}
             </div>
           )}