@swarmclawai/swarmclaw 0.5.2 → 0.6.0

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

@@ -1,14 +1,12 @@
 '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 { 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)
@@ -63,18 +61,45 @@ 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 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 && (
@@ -87,45 +112,10 @@ export function StreamingBubble({ text, assistantName, agentAvatarSeed, agentNam
         <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) => (

package/src/components/chat/thinking-indicator.tsx

@@ -1,5 +1,8 @@
 'use client'
 
+import { useEffect, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 import { AiAvatar } from '@/components/shared/avatar'
 import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { useChatStore } from '@/stores/use-chat-store'
@@ -10,31 +13,90 @@ interface Props {
   agentName?: string
 }
 
+function ElapsedTimer({ startTime }: { startTime: number }) {
+  const [elapsed, setElapsed] = useState(0)
+
+  useEffect(() => {
+    if (!startTime) return
+    const tick = () => setElapsed(Math.floor((Date.now() - startTime) / 1000))
+    tick()
+    const id = setInterval(tick, 250)
+    return () => clearInterval(id)
+  }, [startTime])
+
+  if (!elapsed) return null
+  const mins = Math.floor(elapsed / 60)
+  const secs = elapsed % 60
+  return (
+    <span className="text-[10px] text-text-3/50 font-mono tabular-nums">
+      {mins > 0 ? `${mins}m ${secs}s` : `${secs}s`}
+    </span>
+  )
+}
+
 export function ThinkingIndicator({ assistantName, agentAvatarSeed, agentName }: Props) {
   const streamPhase = useChatStore((s) => s.streamPhase)
   const streamToolName = useChatStore((s) => s.streamToolName)
+  const thinkingText = useChatStore((s) => s.thinkingText)
+  const thinkingStartTime = useChatStore((s) => s.thinkingStartTime)
 
   const statusText = streamPhase === 'tool' && streamToolName
     ? `Using ${streamToolName}...`
     : 'Thinking...'
 
+  const hasThinkingContent = thinkingText.trim().length > 0
+
   return (
-    <div className="flex flex-col items-start"
+    <div 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">
+        {agentName ? <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={28} /> : <AiAvatar size="sm" mood={streamPhase === 'tool' ? 'tool' : 'thinking'} />}
+      </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>
       </div>
-      <div className="bubble-ai px-6 py-5">
-        <div className="flex items-center gap-3">
-          <div className="flex gap-2">
-            <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
-            <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
-            <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
+
+      {hasThinkingContent ? (
+        <details className="group/think w-full max-w-[85%] md:max-w-[72%]">
+          <summary className="bubble-ai px-5 py-3.5 cursor-pointer list-none [&::-webkit-details-marker]:hidden">
+            <div className="flex items-center gap-3">
+              <div className="flex gap-2">
+                <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
+                <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
+                <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
+              </div>
+              <span className="text-[12px] text-text-3/60 font-mono">{statusText}</span>
+              <ElapsedTimer startTime={thinkingStartTime} />
+              <svg
+                width="12" height="12" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="2" strokeLinecap="round"
+                className="shrink-0 text-text-3/50 transition-transform duration-200 group-open/think:rotate-180 ml-auto"
+              >
+                <polyline points="6 9 12 15 18 9" />
+              </svg>
+            </div>
+          </summary>
+          <div className="mt-2 px-4 py-3 rounded-[12px] bg-bg/60 border border-white/[0.04] max-h-[300px] overflow-y-auto">
+            <div className="msg-content text-[13px] leading-[1.6] text-text-3/80">
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                {thinkingText}
+              </ReactMarkdown>
+            </div>
+          </div>
+        </details>
+      ) : (
+        <div className="bubble-ai px-6 py-5">
+          <div className="flex items-center gap-3">
+            <div className="flex gap-2">
+              <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite' }} />
+              <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.15s' }} />
+              <span className="w-[6px] h-[6px] rounded-full bg-accent-bright/60" style={{ animation: 'dot-bounce 1.2s ease-in-out infinite 0.3s' }} />
+            </div>
+            <span className="text-[12px] text-text-3/60 font-mono">{statusText}</span>
+            <ElapsedTimer startTime={thinkingStartTime} />
           </div>
-          <span className="text-[12px] text-text-3/60 font-mono">{statusText}</span>
         </div>
-      </div>
+      )}
     </div>
   )
 }

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

@@ -308,7 +308,6 @@ function TimeoutQuickFix({ event }: { event: ToolEvent }) {
 }
 
 export function ToolCallBubble({ event }: { event: ToolEvent }) {
-  const [expanded, setExpanded] = useState(false)
   const [imgExpanded, setImgExpanded] = useState(false)
   const isError = event.status === 'error'
   const color = isError ? '#F43F5E' : (TOOL_COLORS[event.name] || '#6366F1')
@@ -367,84 +366,81 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
 
   return (
     <div className="w-full text-left">
-      <button
-        onClick={() => isError && setExpanded(!expanded)}
-        className={`w-full text-left rounded-[12px] border bg-surface/80 backdrop-blur-sm transition-all duration-200 ${isError ? 'hover:bg-surface-2 cursor-pointer' : ''}`}
-        style={{ borderLeft: `3px solid ${color}`, borderColor: `${color}33` }}
-      >
-        <div className="flex items-center gap-2.5 px-3.5 py-2.5">
-          {isRunning ? (
-            <span className="w-3.5 h-3.5 shrink-0 rounded-full border-2 border-current animate-spin" style={{ color, borderTopColor: 'transparent' }} />
-          ) : isError ? (
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" className="shrink-0">
-              <line x1="18" y1="6" x2="6" y2="18" />
-              <line x1="6" y1="6" x2="18" y2="18" />
-            </svg>
-          ) : (
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" className="shrink-0">
-              <polyline points="20 6 9 17 4 12" />
-            </svg>
-          )}
-          <span className="text-[12px] font-700 uppercase tracking-wider shrink-0" style={{ color }}>
-            {label}
-          </span>
-          {delegationInfo ? (
-            <span className="text-[12px] text-text-2 font-mono truncate flex-1">
-              <span
-                role="link"
-                tabIndex={0}
-                onClick={handleAgentClick}
-                onKeyDown={(e) => e.key === 'Enter' && handleAgentClick(e as unknown as React.MouseEvent)}
-                className="text-accent-bright hover:underline cursor-pointer font-600"
-              >
-                {delegationInfo.agentName}
-              </span>
-              {delegationInfo.task && <span className="text-text-3">: {delegationInfo.task.slice(0, 80)}</span>}
-            </span>
-          ) : (
-            <span className="text-[12px] text-text-2 font-mono truncate flex-1">
-              {inputPreview}
-            </span>
-          )}
-          {hasMedia && !expanded && (
-            <span className="text-[10px] text-text-3/50 font-500 shrink-0">
-              {media.images.length > 0 && `${media.images.length} image${media.images.length > 1 ? 's' : ''}`}
-              {media.videos.length > 0 && `${(media.images.length > 0) ? ' · ' : ''}${media.videos.length} video${media.videos.length > 1 ? 's' : ''}`}
-              {media.pdfs.length > 0 && `${(media.images.length > 0 || media.videos.length > 0) ? ' · ' : ''}${media.pdfs.length} PDF${media.pdfs.length > 1 ? 's' : ''}`}
-              {media.files.length > 0 && `${(media.images.length > 0 || media.videos.length > 0 || media.pdfs.length > 0) ? ' · ' : ''}${media.files.length} file${media.files.length > 1 ? 's' : ''}`}
+      <details open={isError || isRunning || undefined} className="group/tool">
+        <summary
+          className="w-full text-left rounded-[12px] border bg-surface/80 backdrop-blur-sm transition-all duration-200 hover:bg-surface-2 cursor-pointer list-none [&::-webkit-details-marker]:hidden"
+          style={{ borderLeft: `3px solid ${color}`, borderColor: `${color}33` }}
+        >
+          <div className="flex items-center gap-2.5 px-3.5 py-2.5">
+            {isRunning ? (
+              <span className="w-3.5 h-3.5 shrink-0 rounded-full border-2 border-current animate-spin" style={{ color, borderTopColor: 'transparent' }} />
+            ) : isError ? (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" className="shrink-0">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            ) : (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" className="shrink-0">
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            )}
+            <span className="label-mono shrink-0" style={{ color }}>
+              {label}
             </span>
-          )}
-          {isError && (
+            {delegationInfo ? (
+              <span className="text-[12px] text-text-2 font-mono truncate flex-1">
+                <span
+                  role="link"
+                  tabIndex={0}
+                  onClick={handleAgentClick}
+                  onKeyDown={(e) => e.key === 'Enter' && handleAgentClick(e as unknown as React.MouseEvent)}
+                  className="text-accent-bright hover:underline cursor-pointer font-600"
+                >
+                  {delegationInfo.agentName}
+                </span>
+                {delegationInfo.task && <span className="text-text-3">: {delegationInfo.task.slice(0, 80)}</span>}
+              </span>
+            ) : (
+              <span className="text-[12px] text-text-2 font-mono truncate flex-1">
+                {inputPreview}
+              </span>
+            )}
+            {hasMedia && (
+              <span className="text-[10px] text-text-3/50 font-500 shrink-0 group-open/tool:hidden">
+                {media.images.length > 0 && `${media.images.length} image${media.images.length > 1 ? 's' : ''}`}
+                {media.videos.length > 0 && `${(media.images.length > 0) ? ' · ' : ''}${media.videos.length} video${media.videos.length > 1 ? 's' : ''}`}
+                {media.pdfs.length > 0 && `${(media.images.length > 0 || media.videos.length > 0) ? ' · ' : ''}${media.pdfs.length} PDF${media.pdfs.length > 1 ? 's' : ''}`}
+                {media.files.length > 0 && `${(media.images.length > 0 || media.videos.length > 0 || media.pdfs.length > 0) ? ' · ' : ''}${media.files.length} file${media.files.length > 1 ? 's' : ''}`}
+              </span>
+            )}
             <svg
               width="12" height="12" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" strokeWidth="2" strokeLinecap="round"
-              className={`shrink-0 text-text-3/70 transition-transform duration-200 ${expanded ? 'rotate-180' : ''}`}
+              className="shrink-0 text-text-3/70 transition-transform duration-200 group-open/tool:rotate-180"
             >
               <polyline points="6 9 12 15 18 9" />
             </svg>
+          </div>
+        </summary>
+
+        <div className="px-3.5 pb-3 pt-1 space-y-2 border-t border-white/[0.04] mt-0" onClick={(e) => e.stopPropagation()}>
+          <div className="label-mono">Input</div>
+          <pre className="text-[12px] text-text-2 font-mono whitespace-pre-wrap break-all bg-bg/50 rounded-[8px] px-3 py-2 max-h-[200px] overflow-y-auto">
+            {formattedInput}
+          </pre>
+          {event.output && (
+            <>
+              <div className="label-mono mt-2">{isError ? 'Error' : 'Output'}</div>
+              {formattedCleanOutput && (
+                <pre className="text-[12px] text-text-2 font-mono whitespace-pre-wrap break-all bg-bg/50 rounded-[8px] px-3 py-2 max-h-[300px] overflow-y-auto">
+                  {formattedCleanOutput}
+                </pre>
+              )}
+              {isError && <TimeoutQuickFix event={event} />}
+            </>
           )}
         </div>
-
-        {expanded && isError && (
-          <div className="px-3.5 pb-3 space-y-2" onClick={(e) => e.stopPropagation()}>
-            <div className="text-[11px] text-text-3/60 uppercase tracking-wider font-600">Input</div>
-            <pre className="text-[12px] text-text-2 font-mono whitespace-pre-wrap break-all bg-bg/50 rounded-[8px] px-3 py-2 max-h-[200px] overflow-y-auto">
-              {formattedInput}
-            </pre>
-            {event.output && (
-              <>
-                <div className="text-[11px] text-text-3/60 uppercase tracking-wider font-600 mt-2">Error</div>
-                {formattedCleanOutput && (
-                  <pre className="text-[12px] text-text-2 font-mono whitespace-pre-wrap break-all bg-bg/50 rounded-[8px] px-3 py-2 max-h-[300px] overflow-y-auto">
-                    {formattedCleanOutput}
-                  </pre>
-                )}
-                <TimeoutQuickFix event={event} />
-              </>
-            )}
-          </div>
-        )}
-      </button>
+      </details>
 
       {/* Render images below the tool call bubble (always visible when present) */}
       {media.images.length > 0 && (

package/src/components/chat/tool-request-banner.tsx

@@ -16,6 +16,7 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
   const [granted, setGranted] = useState<Set<string>>(new Set())
+  const [denied, setDenied] = useState<Set<string>>(new Set())
   const continueSentRef = useRef(false)
 
   const toolRequests: { toolId: string; reason: string }[] = []
@@ -74,10 +75,22 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
     }
   }
 
+  const handleDeny = (toolId: string) => {
+    setDenied((prev) => new Set(prev).add(toolId))
+    const label = TOOL_LABELS[toolId] || toolId
+    setTimeout(() => {
+      const { streaming, sendMessage } = useChatStore.getState()
+      if (!streaming) {
+        sendMessage(`Tool access denied for ${label} — proceed without it.`)
+      }
+    }, 200)
+  }
+
   return (
     <div className="max-w-[85%] md:max-w-[72%] flex flex-col gap-2 mt-2">
       {toolRequests.map(({ toolId, reason }) => {
         const isGranted = granted.has(toolId) || (session?.tools || []).includes(toolId)
+        const isDenied = denied.has(toolId)
         const label = TOOL_LABELS[toolId] || toolId
         return (
           <div
@@ -96,14 +109,25 @@ export function ToolRequestBanner({ text, toolOutputs = [] }: Props) {
             </div>
             {isGranted ? (
               <span className="text-[11px] text-emerald-400 font-600 shrink-0">Granted</span>
+            ) : isDenied ? (
+              <span className="text-[11px] text-red-400 font-600 shrink-0">Denied</span>
             ) : (
-              <button
-                onClick={() => handleGrant(toolId)}
-                className="px-3 py-1.5 rounded-[8px] bg-amber-500/20 hover:bg-amber-500/30 text-amber-300 text-[11px] font-600 border-none cursor-pointer transition-colors shrink-0"
-                style={{ fontFamily: 'inherit' }}
-              >
-                Grant
-              </button>
+              <div className="flex gap-1.5 shrink-0">
+                <button
+                  onClick={() => handleGrant(toolId)}
+                  className="px-3 py-1.5 rounded-[8px] bg-amber-500/20 hover:bg-amber-500/30 text-amber-300 text-[11px] font-600 border-none cursor-pointer transition-colors"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Grant
+                </button>
+                <button
+                  onClick={() => handleDeny(toolId)}
+                  className="px-3 py-1.5 rounded-[8px] bg-red-500/15 hover:bg-red-500/25 text-red-400 text-[11px] font-600 border-none cursor-pointer transition-colors"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  Deny
+                </button>
+              </div>
             )}
           </div>
         )

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

@@ -0,0 +1,63 @@
+'use client'
+
+import { useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+
+interface TransferAgentPickerProps {
+  /** Agent IDs to exclude from the list (e.g. current agent) */
+  excludeIds?: string[]
+  /** Restrict to these agent IDs only (e.g. chatroom members) */
+  filterIds?: string[]
+  onSelect: (agentId: string) => void
+  onClose: () => void
+}
+
+export function TransferAgentPicker({ excludeIds, filterIds, onSelect, onClose }: TransferAgentPickerProps) {
+  const agents = useAppStore((s) => s.agents)
+  const [query, setQuery] = useState('')
+
+  const excludeSet = new Set(excludeIds || [])
+  const filterSet = filterIds ? new Set(filterIds) : null
+
+  const filtered = Object.values(agents).filter((a) =>
+    !a.trashedAt
+    && !excludeSet.has(a.id)
+    && (!filterSet || filterSet.has(a.id))
+    && (!query || a.name.toLowerCase().includes(query.toLowerCase())),
+  )
+
+  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="p-2">
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search agents..."
+            autoFocus
+            className="w-full px-2 py-1.5 text-[12px] bg-white/[0.06] rounded-[6px] border border-white/[0.08] text-text placeholder:text-text-3/50 outline-none"
+            style={{ fontFamily: 'inherit' }}
+          />
+        </div>
+        <div className="max-h-[200px] overflow-y-auto">
+          {filtered.length === 0 && (
+            <div className="px-3 py-2 text-[11px] text-text-3/60 text-center">No agents</div>
+          )}
+          {filtered.map((a) => (
+            <button
+              key={a.id}
+              onClick={() => onSelect(a.id)}
+              className="w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-white/[0.06] transition-colors cursor-pointer bg-transparent border-none"
+              style={{ fontFamily: 'inherit' }}
+            >
+              <AgentAvatar seed={a.avatarSeed} name={a.name} size={20} />
+              <span className="text-[12px] text-text truncate">{a.name}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/chatrooms/agent-hover-card.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { useState } from 'react'
+import { HoverCard, HoverCardTrigger, HoverCardContent } from '@/components/ui/hover-card'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { useAppStore } from '@/stores/use-app-store'
+import { api } from '@/lib/api-client'
+import { AVAILABLE_TOOLS, PLATFORM_TOOLS, TOOL_LABELS } from '@/lib/tool-definitions'
+import type { Agent } from '@/types'
+
+interface Props {
+  agent: Agent
+  children: React.ReactNode
+  status?: 'idle' | 'busy' | 'online'
+}
+
+const ALL_TOOL_IDS = [...AVAILABLE_TOOLS, ...PLATFORM_TOOLS].map((t) => t.id)
+
+export function AgentHoverCard({ agent, children, status }: Props) {
+  const [showAll, setShowAll] = useState(false)
+  const [busy, setBusy] = useState(false)
+  const tools = agent.tools ?? []
+
+  const displayTools = showAll ? ALL_TOOL_IDS : tools
+
+  const toggleTool = async (toolId: string) => {
+    if (busy) return
+    setBusy(true)
+    try {
+      const current = agent.tools || []
+      const updated = current.includes(toolId)
+        ? current.filter((t) => t !== toolId)
+        : [...current, toolId]
+      await api('PUT', `/agents/${agent.id}`, { tools: updated })
+      useAppStore.getState().loadAgents()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        {children}
+      </HoverCardTrigger>
+      <HoverCardContent align="start" className="w-[280px]">
+        {/* Header: avatar + name + model */}
+        <div className="flex items-center gap-2">
+          <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={28} status={status} />
+          <div className="min-w-0 flex-1">
+            <div className="text-[13px] font-600 text-text truncate">{agent.name}</div>
+            <div className="label-mono truncate">{agent.model}</div>
+          </div>
+        </div>
+
+        {/* Description */}
+        {agent.description && (
+          <p className="text-[12px] text-text-3 mt-1.5 line-clamp-1">{agent.description}</p>
+        )}
+
+        {/* Tools toggles */}
+        <div className="mt-2">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-[10px] font-600 text-text-3/60 uppercase tracking-wider">Tools</span>
+            <button
+              onClick={() => setShowAll(!showAll)}
+              className="text-[10px] text-accent-bright/70 hover:text-accent-bright font-500 bg-transparent border-none cursor-pointer"
+            >
+              {showAll ? 'Show enabled' : 'Show all'}
+            </button>
+          </div>
+          <div className="max-h-[200px] overflow-y-auto -mx-1 px-1">
+            {displayTools.length === 0 && (
+              <p className="text-[11px] text-text-3/50 py-1">No tools enabled</p>
+            )}
+            {displayTools.map((toolId) => {
+              const enabled = tools.includes(toolId)
+              return (
+                <label key={toolId} className="flex items-center gap-2 py-1 cursor-pointer">
+                  <div
+                    onClick={(e) => { e.preventDefault(); toggleTool(toolId) }}
+                    className={`w-7 h-[16px] rounded-full transition-all duration-200 relative cursor-pointer shrink-0
+                      ${enabled ? 'bg-accent-bright' : 'bg-white/[0.12]'}`}
+                  >
+                    <div className={`absolute top-[2px] w-[12px] h-[12px] rounded-full bg-white transition-all duration-200
+                      ${enabled ? 'left-[13px]' : 'left-[2px]'}`} />
+                  </div>
+                  <span className={`text-[11px] ${enabled ? 'text-text-2' : 'text-text-3/70'}`}>
+                    {TOOL_LABELS[toolId] || toolId}
+                  </span>
+                </label>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Divider */}
+        <div className="border-t border-white/[0.06] my-2" />
+
+        {/* Actions */}
+        <div className="flex gap-2">
+          <button
+            onClick={() => {
+              useAppStore.getState().setActiveView('agents')
+              useAppStore.getState().setCurrentAgent(agent.id)
+            }}
+            className="flex-1 text-[12px] font-500 text-text-2 hover:text-text py-1 rounded-[6px] bg-white/[0.04] hover:bg-white/[0.08] transition-colors cursor-pointer"
+          >
+            Chat
+          </button>
+          <button
+            onClick={() => {
+              useAppStore.getState().setEditingAgentId(agent.id)
+              useAppStore.getState().setAgentSheetOpen(true)
+            }}
+            className="flex-1 text-[12px] font-500 text-text-2 hover:text-text py-1 rounded-[6px] bg-white/[0.04] hover:bg-white/[0.08] transition-colors cursor-pointer"
+          >
+            Edit
+          </button>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  )
+}