@swarmclawai/swarmclaw 0.3.0 → 0.4.0

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

@@ -2,6 +2,7 @@
 
 import { useState, useMemo } from 'react'
 import type { ToolEvent } from '@/stores/use-chat-store'
+import { useAppStore } from '@/stores/use-app-store'
 
 const TOOL_COLORS: Record<string, string> = {
   execute_command: '#F59E0B',
@@ -15,6 +16,7 @@ const TOOL_COLORS: Record<string, string> = {
   send_file: '#10B981',
   web_search: '#3B82F6',
   web_fetch: '#3B82F6',
+  delegate_to_agent: '#6366F1',
   delegate_to_claude_code: '#6366F1',
   delegate_to_codex_cli: '#0EA5E9',
   delegate_to_opencode_cli: '#14B8A6',
@@ -63,6 +65,7 @@ export const TOOL_LABELS: Record<string, string> = {
   claude_code: 'Claude Code',
   codex_cli: 'Codex CLI',
   opencode_cli: 'OpenCode CLI',
+  delegate_to_agent: 'Agent Delegation',
   delegate_to_claude_code: 'Claude Code',
   delegate_to_codex_cli: 'Codex CLI',
   delegate_to_opencode_cli: 'OpenCode CLI',
@@ -96,6 +99,7 @@ export const TOOL_DESCRIPTIONS: Record<string, string> = {
   claude_code: 'Enable delegation to Claude Code CLI',
   codex_cli: 'Enable delegation to OpenAI Codex CLI',
   opencode_cli: 'Enable delegation to OpenCode CLI',
+  delegate_to_agent: 'Delegate a task to another agent',
   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',
@@ -181,6 +185,7 @@ function getInputPreview(name: string, input: string): string {
       return ''
     }
     if (name === 'send_file') return parsed.filePath || ''
+    if (name === 'delegate_to_agent') return `${parsed.agentName}: ${(parsed.task || '').slice(0, 80)}`
 
     if (parsed.command) return parsed.command
     if (parsed.filePath) return parsed.filePath
@@ -280,6 +285,24 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
 
   const hasMedia = media.images.length > 0 || media.videos.length > 0 || media.pdfs.length > 0 || media.files.length > 0
 
+  // Parse delegation info for clickable agent link
+  const delegationInfo = useMemo(() => {
+    if (event.name !== 'delegate_to_agent') return null
+    try {
+      const parsed = JSON.parse(event.input)
+      return { agentName: parsed.agentName || '', agentId: parsed.agentId || '', task: parsed.task || '' }
+    } catch { return null }
+  }, [event.name, event.input])
+
+  const handleAgentClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (delegationInfo?.agentId) {
+      const store = useAppStore.getState()
+      store.setActiveView('agents')
+      store.setCurrentAgent(delegationInfo.agentId)
+    }
+  }
+
   return (
     <div className="w-full text-left">
       <button
@@ -303,9 +326,24 @@ export function ToolCallBubble({ event }: { event: ToolEvent }) {
           <span className="text-[12px] font-700 uppercase tracking-wider shrink-0" style={{ color }}>
             {label}
           </span>
-          <span className="text-[12px] text-text-2 font-mono truncate flex-1">
-            {inputPreview}
-          </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 any)}
+                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' : ''}`}

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

@@ -3,15 +3,7 @@
 import { useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { api } from '@/lib/api-client'
-
-const TOOL_LABELS: Record<string, string> = {
-  shell: 'Shell', files: 'Files', edit_file: 'Edit File', process: 'Process',
-  web_search: 'Web Search', web_fetch: 'Web Fetch', browser: 'Browser', memory: 'Memory',
-  claude_code: 'Claude Code', codex_cli: 'Codex CLI', opencode_cli: 'OpenCode CLI',
-  orchestrator: 'Orchestrator', manage_agents: 'Agents', manage_tasks: 'Tasks', manage_schedules: 'Schedules',
-  manage_skills: 'Skills', manage_documents: 'Documents', manage_webhooks: 'Webhooks',
-  manage_connectors: 'Connectors', manage_sessions: 'Sessions', manage_secrets: 'Secrets',
-}
+import { TOOL_LABELS } from '@/lib/tool-definitions'
 
 interface Props {
   text: string

package/src/components/connectors/connector-list.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useState } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
+import { useWs } from '@/hooks/use-ws'
 import { api } from '@/lib/api-client'
 import type { Connector } from '@/types'
 import { ConnectorPlatformBadge, getConnectorPlatformLabel } from '@/components/shared/connector-platform-icon'
@@ -24,14 +25,8 @@ export function ConnectorList({ inSidebar: _inSidebar }: { inSidebar?: boolean }
     setLoaded(true)
   }, [loadConnectors, loadAgents])
 
-  useEffect(() => {
-    const bootstrap = setTimeout(() => { void refresh() }, 0)
-    const poll = setInterval(() => { void loadConnectors() }, 15_000)
-    return () => {
-      clearTimeout(bootstrap)
-      clearInterval(poll)
-    }
-  }, [refresh, loadConnectors])
+  useEffect(() => { void refresh() }, [refresh])
+  useWs('connectors', loadConnectors, 15_000)
 
   // Auto-clear error after 5s
   useEffect(() => {

package/src/components/connectors/connector-sheet.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
 import { api } from '@/lib/api-client'
+import { useWs } from '@/hooks/use-ws'
 import { toast } from 'sonner'
 import type { Connector, ConnectorPlatform } from '@/types'
 import { ConnectorPlatformBadge } from '@/components/shared/connector-platform-icon'
@@ -255,35 +256,29 @@ export function ConnectorSheet() {
 
   // Poll for QR code when WhatsApp connector is running or connecting
   const isWaRunning = editing?.platform === 'whatsapp' && (editing?.status === 'running' || waConnecting)
-  useEffect(() => {
-    if (!editing || !isWaRunning) {
-      return
-    }
-    let cancelled = false
-    const poll = async () => {
-      try {
-        const data = await api<any>('GET', `/connectors/${editing.id}`)
-        if (!cancelled) {
-          setQrDataUrl(data.qrDataUrl || null)
-          setWaAuthenticated(data.authenticated ?? false)
-          setWaHasCreds(data.hasCredentials ?? false)
-          // Sync store with the individual endpoint's runtime status
-          if (data.status === 'running' && editing.status !== 'running') {
-            // Store is stale — update it directly
-            const store = useAppStore.getState()
-            const updated = { ...store.connectors }
-            if (updated[editing.id]) {
-              updated[editing.id] = { ...updated[editing.id], status: 'running' as const }
-              useAppStore.setState({ connectors: updated })
-            }
-          }
+  const pollWaStatus = useCallback(async () => {
+    if (!editing) return
+    try {
+      const data = await api<any>('GET', `/connectors/${editing.id}`)
+      setQrDataUrl(data.qrDataUrl || null)
+      setWaAuthenticated(data.authenticated ?? false)
+      setWaHasCreds(data.hasCredentials ?? false)
+      if (data.status === 'running' && editing.status !== 'running') {
+        const store = useAppStore.getState()
+        const updated = { ...store.connectors }
+        if (updated[editing.id]) {
+          updated[editing.id] = { ...updated[editing.id], status: 'running' as const }
+          useAppStore.setState({ connectors: updated })
         }
-      } catch { /* ignore */ }
-    }
-    poll()
-    const interval = setInterval(poll, 2000)
-    return () => { cancelled = true; clearInterval(interval) }
-  }, [editing?.id, isWaRunning])
+      }
+    } catch { /* ignore */ }
+  }, [editing?.id, editing?.status])
+
+  useEffect(() => {
+    if (editing && isWaRunning) pollWaStatus()
+  }, [editing?.id, isWaRunning, pollWaStatus])
+
+  useWs('connectors', pollWaStatus, isWaRunning ? 2000 : undefined)
 
   const handleSave = async () => {
     if (!agentId) return

package/src/components/input/chat-input.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useRef, useState } from 'react'
-import { useChatStore } from '@/stores/use-chat-store'
+import { useChatStore, type PendingFile } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
 import { uploadImage } from '@/lib/upload'
 import { useAutoResize } from '@/hooks/use-auto-resize'
@@ -13,23 +13,56 @@ interface Props {
   onStop: () => void
 }
 
+function FilePreview({ file, onRemove }: { file: PendingFile; onRemove: () => void }) {
+  const isImage = file.file.type.startsWith('image/')
+  return (
+    <div className="relative">
+      {isImage ? (
+        <img
+          src={URL.createObjectURL(file.file)}
+          alt="Preview"
+          className="h-16 rounded-[10px] object-cover border border-white/[0.06]"
+        />
+      ) : (
+        <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-[10px] border border-white/[0.06] bg-white/[0.03]">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3 shrink-0">
+            <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>
+          <span className="text-[13px] text-text-2 font-500 truncate max-w-[180px]">{file.file.name}</span>
+        </div>
+      )}
+      <button
+        onClick={onRemove}
+        className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full border border-white/10 bg-raised
+          text-text-2 text-[10px] cursor-pointer flex items-center justify-center
+          hover:bg-danger-soft hover:text-danger hover:border-danger/20 transition-colors"
+      >
+        &times;
+      </button>
+    </div>
+  )
+}
+
 export function ChatInput({ streaming, onSend, onStop }: Props) {
   const [value, setValue] = useState('')
   const { ref: textareaRef, resize } = useAutoResize()
   const fileInputRef = useRef<HTMLInputElement>(null)
-  const pendingImage = useChatStore((s) => s.pendingImage)
-  const setPendingImage = useChatStore((s) => s.setPendingImage)
+  const imageInputRef = useRef<HTMLInputElement>(null)
+  const pendingFiles = useChatStore((s) => s.pendingFiles)
+  const addPendingFile = useChatStore((s) => s.addPendingFile)
+  const removePendingFile = useChatStore((s) => s.removePendingFile)
   const speechRecognitionLang = useAppStore((s) => s.appSettings.speechRecognitionLang)
 
   const handleSend = useCallback(() => {
     const text = value.trim()
-    if (!text || streaming) return
-    onSend(text)
+    if ((!text && !pendingFiles.length) || streaming) return
+    onSend(text || 'See attached file(s).')
     setValue('')
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto'
     }
-  }, [value, streaming, onSend])
+  }, [value, streaming, onSend, pendingFiles.length])
 
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -47,6 +80,15 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
     { lang: speechRecognitionLang || undefined },
   )
 
+  const uploadAndAdd = useCallback(async (file: File) => {
+    try {
+      const result = await uploadImage(file)
+      addPendingFile({ file, path: result.path, url: result.url })
+    } catch {
+      // ignore upload errors
+    }
+  }, [addPendingFile])
+
   const handlePaste = useCallback(async (e: React.ClipboardEvent) => {
     const items = e.clipboardData?.items
     if (!items) return
@@ -54,35 +96,22 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
       if (item.type.startsWith('image/')) {
         e.preventDefault()
         const file = item.getAsFile()
-        if (!file) return
-        try {
-          const result = await uploadImage(file)
-          setPendingImage({ file, path: result.path, url: result.url })
-        } catch {
-          // ignore
-        }
+        if (file) await uploadAndAdd(file)
         return
       }
     }
-  }, [])
+  }, [uploadAndAdd])
 
   const handleFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0]
-    if (!file) return
-    try {
-      const result = await uploadImage(file)
-      setPendingImage({
-        file,
-        path: result.path,
-        url: result.url,
-      })
-    } catch {
-      // ignore
+    const files = e.target.files
+    if (!files?.length) return
+    for (const file of Array.from(files)) {
+      await uploadAndAdd(file)
     }
     e.target.value = ''
-  }, [])
+  }, [uploadAndAdd])
 
-  const hasContent = value.trim().length > 0 || !!pendingImage
+  const hasContent = value.trim().length > 0 || pendingFiles.length > 0
 
   return (
     <div className="shrink-0 px-6 md:px-12 lg:px-16 pb-4 pt-2"
@@ -105,33 +134,11 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
         <div className="glass rounded-[20px] overflow-hidden
           shadow-[0_4px_32px_rgba(0,0,0,0.3)] focus-within:border-border-focus focus-within:shadow-[0_4px_32px_rgba(99,102,241,0.08)] transition-all duration-300">
 
-          {pendingImage && (
-            <div className="flex items-center gap-2 px-5 pt-4">
-              <div className="relative">
-                {pendingImage.file.type.startsWith('image/') ? (
-                  <img
-                    src={URL.createObjectURL(pendingImage.file)}
-                    alt="Preview"
-                    className="h-16 rounded-[10px] object-cover border border-white/[0.06]"
-                  />
-                ) : (
-                  <div className="flex items-center gap-2.5 px-3 py-2.5 rounded-[10px] border border-white/[0.06] bg-white/[0.03]">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3 shrink-0">
-                      <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>
-                    <span className="text-[13px] text-text-2 font-500 truncate max-w-[180px]">{pendingImage.file.name}</span>
-                  </div>
-                )}
-                <button
-                  onClick={() => setPendingImage(null)}
-                  className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full border border-white/10 bg-raised
-                    text-text-2 text-[10px] cursor-pointer flex items-center justify-center
-                    hover:bg-danger-soft hover:text-danger hover:border-danger/20 transition-colors"
-                >
-                  &times;
-                </button>
-              </div>
+          {pendingFiles.length > 0 && (
+            <div className="flex items-center gap-2 px-5 pt-4 flex-wrap">
+              {pendingFiles.map((f, i) => (
+                <FilePreview key={`${f.path}-${i}`} file={f} onRemove={() => removePendingFile(i)} />
+              ))}
             </div>
           )}
 
@@ -162,7 +169,7 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
             </button>
 
             <button
-              onClick={() => fileInputRef.current?.click()}
+              onClick={() => imageInputRef.current?.click()}
               className="flex items-center gap-1.5 px-3 py-2 rounded-[10px] border-none bg-transparent
                 text-text-3 text-[13px] cursor-pointer hover:text-text-2 hover:bg-white/[0.05] transition-all duration-200"
               style={{ fontFamily: 'inherit' }}
@@ -217,7 +224,16 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
         <input
           ref={fileInputRef}
           type="file"
-          accept="image/*,.pdf,.txt,.md,.csv,.json,.xml,.html,.js,.ts,.tsx,.jsx,.py,.go,.rs,.java,.c,.cpp,.h,.yml,.yaml,.toml,.env,.log,.sh,.sql"
+          multiple
+          accept="image/*,.pdf,.txt,.md,.csv,.json,.xml,.html,.js,.ts,.tsx,.jsx,.py,.go,.rs,.java,.c,.cpp,.h,.yml,.yaml,.toml,.env,.log,.sh,.sql,.css,.scss"
+          onChange={handleFileChange}
+          className="hidden"
+        />
+        <input
+          ref={imageInputRef}
+          type="file"
+          multiple
+          accept="image/*"
           onChange={handleFileChange}
           className="hidden"
         />

package/src/components/knowledge/knowledge-list.tsx

@@ -12,7 +12,6 @@ export function KnowledgeList() {
   const [loaded, setLoaded] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [activeTag, setActiveTag] = useState<string | null>(null)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
   const searchRef = useRef(search)
   const setKnowledgeSheetOpen = useAppStore((s) => s.setKnowledgeSheetOpen)
   const setEditingKnowledgeId = useAppStore((s) => s.setEditingKnowledgeId)
@@ -64,7 +63,6 @@ export function KnowledgeList() {
     try {
       await api('DELETE', `/knowledge/${id}`)
       setEntries((prev) => prev.filter((e) => e.id !== id))
-      if (selectedId === id) setSelectedId(null)
     } catch {
       // silent
     }
@@ -78,7 +76,7 @@ export function KnowledgeList() {
     <div className="flex-1 flex flex-col overflow-y-auto">
       {/* Search — only show when there are entries */}
       {entries.length > 0 && (
-        <div className="px-3 py-2 shrink-0">
+        <div className="px-5 py-2 shrink-0">
           <input
             type="text"
             value={search}
@@ -93,7 +91,7 @@ export function KnowledgeList() {
 
       {/* Tag filters */}
       {uniqueTags.length > 0 && (
-        <div className="px-3 pb-1.5 shrink-0">
+        <div className="px-5 pb-1.5 shrink-0">
           <div className="flex gap-1 flex-wrap">
             <button
               onClick={() => setActiveTag(null)}
@@ -120,52 +118,50 @@ export function KnowledgeList() {
 
       {/* Entries */}
       {entries.length > 0 ? (
-        <div className="flex flex-col gap-0.5 px-2 pb-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 px-5 pb-6">
           {entries.map((entry) => {
             const meta = entry.metadata as { tags?: string[] } | undefined
             const tags = meta?.tags || []
             return (
               <div
                 key={entry.id}
-                onClick={() => setSelectedId(selectedId === entry.id ? null : entry.id)}
-                className={`p-3 rounded-[12px] border cursor-pointer transition-all
-                  ${selectedId === entry.id
-                    ? 'border-accent-bright/30 bg-accent-soft/30'
-                    : 'border-white/[0.04] bg-transparent hover:bg-surface-2'
-                  }`}
+                className="p-3 rounded-[12px] border border-white/[0.04] bg-transparent hover:bg-surface-2 transition-all relative group"
               >
                 <div className="flex items-start justify-between gap-2 mb-1">
                   <span className="font-display text-[13px] font-600 text-text truncate">{entry.title}</span>
-                  <span className="text-[10px] text-text-3/50 shrink-0">{formatDate(entry.createdAt)}</span>
+                  <div className="flex items-center gap-1.5 shrink-0">
+                    <button
+                      onClick={() => openSheet(entry.id)}
+                      className="text-text-3/40 hover:text-accent-bright transition-colors p-0.5 cursor-pointer"
+                      title="Edit"
+                    >
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                      </svg>
+                    </button>
+                    <button
+                      onClick={() => void handleDelete(entry.id)}
+                      className="text-text-3/40 hover:text-red-400 transition-colors p-0.5 cursor-pointer"
+                      title="Delete"
+                    >
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                        <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                      </svg>
+                    </button>
+                    <span className="text-[10px] text-text-3/50">{formatDate(entry.createdAt)}</span>
+                  </div>
                 </div>
                 <p className="text-[11px] text-text-3/60 line-clamp-2 mb-2">
                   {entry.content.slice(0, 200)}
                 </p>
                 {tags.length > 0 && (
-                  <div className="flex gap-1 flex-wrap mb-2">
+                  <div className="flex gap-1 flex-wrap">
                     {tags.map((t) => (
                       <Badge key={t} variant="secondary" className="text-[9px] px-1.5 py-0">{t}</Badge>
                     ))}
                   </div>
                 )}
-                {selectedId === entry.id && (
-                  <div className="flex gap-2 pt-2 border-t border-white/[0.04]">
-                    <button
-                      onClick={(e) => { e.stopPropagation(); openSheet(entry.id) }}
-                      className="px-2.5 py-1 rounded-[7px] text-[10px] font-600 text-accent-bright bg-accent-soft cursor-pointer border-none hover:brightness-110 transition-all"
-                      style={{ fontFamily: 'inherit' }}
-                    >
-                      Edit
-                    </button>
-                    <button
-                      onClick={(e) => { e.stopPropagation(); void handleDelete(entry.id) }}
-                      className="px-2.5 py-1 rounded-[7px] text-[10px] font-600 text-red-400 bg-red-400/10 cursor-pointer border-none hover:bg-red-400/20 transition-all"
-                      style={{ fontFamily: 'inherit' }}
-                    >
-                      Delete
-                    </button>
-                  </div>
-                )}
               </div>
             )
           })}