@swarmclawai/swarmclaw 0.5.3 → 0.6.2

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

@@ -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 }[] = []
@@ -308,7 +350,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')
@@ -342,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
 
@@ -367,84 +408,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-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}
+            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>
+  )
+}