@swarmclawai/swarmclaw 0.5.3 → 0.6.2

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

@@ -1,11 +1,13 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
-import { useChatStore, type PendingFile } from '@/stores/use-chat-store'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useChatStore } from '@/stores/use-chat-store'
 import { useAppStore } from '@/stores/use-app-store'
 import { uploadImage } from '@/lib/upload'
 import { useAutoResize } from '@/hooks/use-auto-resize'
 import { useSpeechRecognition } from '@/hooks/use-speech-recognition'
+import { FilePreview } from '@/components/shared/file-preview'
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
 
 interface Props {
   streaming: boolean
@@ -13,36 +15,7 @@ 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>
-  )
-}
+// FilePreview is now imported from @/components/shared/file-preview
 
 export function ChatInput({ streaming, onSend, onStop }: Props) {
   const [value, setValue] = useState('')
@@ -53,16 +26,51 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
   const addPendingFile = useChatStore((s) => s.addPendingFile)
   const removePendingFile = useChatStore((s) => s.removePendingFile)
   const speechRecognitionLang = useAppStore((s) => s.appSettings.speechRecognitionLang)
+  const sessionId = useAppStore((s) => s.currentSessionId)
+
+  const queuedMessages = useChatStore((s) => s.queuedMessages)
+  const addQueuedMessage = useChatStore((s) => s.addQueuedMessage)
+  const removeQueuedMessage = useChatStore((s) => s.removeQueuedMessage)
+
+  // Draft persistence: restore on session change
+  const draftTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  useEffect(() => {
+    if (!sessionId) return
+    const draft = localStorage.getItem(`sc_draft_${sessionId}`)
+    setValue(draft || '')
+  }, [sessionId])
+
+  // Debounced save to localStorage
+  useEffect(() => {
+    if (!sessionId) return
+    if (draftTimerRef.current) clearTimeout(draftTimerRef.current)
+    draftTimerRef.current = setTimeout(() => {
+      if (value) localStorage.setItem(`sc_draft_${sessionId}`, value)
+      else localStorage.removeItem(`sc_draft_${sessionId}`)
+    }, 300)
+    return () => { if (draftTimerRef.current) clearTimeout(draftTimerRef.current) }
+  }, [value, sessionId])
 
   const handleSend = useCallback(() => {
     const text = value.trim()
-    if ((!text && !pendingFiles.length) || streaming) return
+    if (!text && !pendingFiles.length) return
+    // If streaming, queue the message instead of blocking
+    if (streaming) {
+      if (text) {
+        addQueuedMessage(text)
+        setValue('')
+        if (textareaRef.current) textareaRef.current.style.height = 'auto'
+      }
+      return
+    }
     onSend(text || 'See attached file(s).')
     setValue('')
+    if (sessionId) localStorage.removeItem(`sc_draft_${sessionId}`)
     if (textareaRef.current) {
       textareaRef.current.style.height = 'auto'
     }
-  }, [value, streaming, onSend, pendingFiles.length])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, streaming, onSend, pendingFiles.length, sessionId])
 
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -84,8 +92,8 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
     try {
       const result = await uploadImage(file)
       addPendingFile({ file, path: result.path, url: result.url })
-    } catch {
-      // ignore upload errors
+    } catch (err: unknown) {
+      console.error('File upload failed:', err instanceof Error ? err.message : String(err))
     }
   }, [addPendingFile])
 
@@ -131,6 +139,27 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
           </div>
         )}
 
+        {queuedMessages.length > 0 && (
+          <div className="flex flex-wrap items-center gap-1.5 mb-2">
+            <span className="label-mono text-amber-400/70">Queued</span>
+            {queuedMessages.map((msg, i) => (
+              <span key={i} className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-[8px] bg-amber-500/10 border border-amber-500/15 text-[12px] text-amber-300 font-mono max-w-[200px]">
+                <span className="truncate">{msg}</span>
+                <button
+                  type="button"
+                  onClick={() => removeQueuedMessage(i)}
+                  className="shrink-0 text-amber-400/60 hover:text-amber-300 border-none bg-transparent cursor-pointer p-0"
+                >
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                    <line x1="18" y1="6" x2="6" y2="18" />
+                    <line x1="6" y1="6" x2="18" y2="18" />
+                  </svg>
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+
         <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">
 
@@ -198,6 +227,31 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
               </button>
             )}
 
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => { useChatStore.getState().clearContext() }}
+                  disabled={streaming}
+                  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-amber-400 hover:bg-amber-400/10 transition-all duration-200 disabled:opacity-30 disabled:pointer-events-none"
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
+                    <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>
+                  <span className="hidden sm:inline">New context</span>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top" sideOffset={8}
+                className="bg-raised border border-white/[0.08] text-text shadow-[0_8px_32px_rgba(0,0,0,0.5)] rounded-[10px] px-3.5 py-2.5 max-w-[220px]">
+                <div className="font-display text-[12px] font-600 mb-0.5">New context window</div>
+                <div className="text-[11px] text-text-3 leading-[1.4]">Adds a marker — messages above it won&apos;t be sent to the AI. Nothing is deleted.</div>
+              </TooltipContent>
+            </Tooltip>
+
             <div className="flex-1" />
 
             <span className="text-[11px] text-text-3/60 tabular-nums mr-2 font-mono">
@@ -206,17 +260,27 @@ export function ChatInput({ streaming, onSend, onStop }: Props) {
 
             <button
               onClick={handleSend}
-              disabled={!hasContent || streaming}
+              disabled={!hasContent}
               className={`w-9 h-9 rounded-[11px] border-none flex items-center justify-center
                 shrink-0 cursor-pointer transition-all duration-250
-                ${hasContent && !streaming
-                  ? 'bg-[#6366F1] text-white active:scale-90 shadow-[0_4px_16px_rgba(99,102,241,0.3)]'
+                ${hasContent
+                  ? streaming
+                    ? 'bg-amber-500/20 text-amber-400 active:scale-90 border border-amber-500/30'
+                    : 'bg-accent-bright text-white active:scale-90 shadow-[0_4px_16px_rgba(99,102,241,0.3)]'
                   : 'bg-white/[0.04] text-text-3 pointer-events-none'}`}
+              title={streaming ? 'Queue message' : 'Send message'}
             >
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
-                <line x1="12" y1="19" x2="12" y2="5" />
-                <polyline points="5 12 12 5 19 12" />
-              </svg>
+              {streaming && hasContent ? (
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                  <line x1="12" y1="5" x2="12" y2="19" />
+                  <line x1="5" y1="12" x2="19" y2="12" />
+                </svg>
+              ) : (
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                  <line x1="12" y1="19" x2="12" y2="5" />
+                  <polyline points="5 12 12 5 19 12" />
+                </svg>
+              )}
             </button>
           </div>
         </div>

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { api } from '@/lib/api-client'
 import { useAppStore } from '@/stores/use-app-store'
 import { Badge } from '@/components/ui/badge'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import type { MemoryEntry } from '@/types'
 
 export function KnowledgeList() {
@@ -13,6 +14,8 @@ export function KnowledgeList() {
   const [error, setError] = useState<string | null>(null)
   const [activeTag, setActiveTag] = useState<string | null>(null)
   const searchRef = useRef(search)
+  const agents = useAppStore((s) => s.agents)
+  const loadAgents = useAppStore((s) => s.loadAgents)
   const setKnowledgeSheetOpen = useAppStore((s) => s.setKnowledgeSheetOpen)
   const setEditingKnowledgeId = useAppStore((s) => s.setEditingKnowledgeId)
 
@@ -40,8 +43,10 @@ export function KnowledgeList() {
 
   // Initial load
   useEffect(() => {
+    loadAgents()
     const timer = setTimeout(() => { void load(searchRef.current, activeTag) }, 0)
     return () => clearTimeout(timer)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [load, activeTag])
 
   // Debounced search
@@ -120,8 +125,14 @@ export function KnowledgeList() {
       {entries.length > 0 ? (
         <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 meta = entry.metadata as { tags?: string[]; scope?: 'global' | 'agent'; agentIds?: string[] } | undefined
             const tags = meta?.tags || []
+            const entryScope = meta?.scope || 'global'
+            const entryAgentIds = meta?.agentIds || []
+            const scopeLabel = entryScope === 'global' ? 'Global' : `${entryAgentIds.length} agent(s)`
+            const scopedAgents = entryScope === 'agent'
+              ? entryAgentIds.map((id) => agents[id]).filter(Boolean)
+              : []
             return (
               <div
                 key={entry.id}
@@ -162,6 +173,25 @@ export function KnowledgeList() {
                     ))}
                   </div>
                 )}
+                <div className="flex items-center gap-2 mt-1.5">
+                  <span className={`text-[10px] font-600 ${
+                    entryScope === 'global' ? 'text-emerald-400' : 'text-amber-400'
+                  }`}>
+                    {scopeLabel}
+                  </span>
+                  {scopedAgents.length > 0 && (
+                    <div className="flex items-center gap-1.5">
+                      <div className="flex items-center -space-x-1.5">
+                        {scopedAgents.slice(0, 5).map((agent) => (
+                          <AgentAvatar key={agent.id} seed={agent.avatarSeed} name={agent.name} size={16} className="ring-1 ring-surface" />
+                        ))}
+                      </div>
+                      {scopedAgents.length > 5 && (
+                        <span className="text-[10px] font-600 text-text-3/60 ml-0.5">+{scopedAgents.length - 5}</span>
+                      )}
+                    </div>
+                  )}
+                </div>
               </div>
             )
           })}

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { api } from '@/lib/api-client'
 import { useAppStore } from '@/stores/use-app-store'
 import { BottomSheet } from '@/components/shared/bottom-sheet'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 import type { MemoryEntry } from '@/types'
 
 const ACCEPTED_TYPES = '.txt,.md,.csv,.json,.jsonl,.html,.xml,.yaml,.yml,.toml,.py,.js,.ts,.tsx,.jsx,.go,.rs,.java,.c,.cpp,.h,.rb,.php,.sh,.sql,.log,.pdf'
@@ -21,16 +22,26 @@ export function KnowledgeSheet() {
   const open = useAppStore((s) => s.knowledgeSheetOpen)
   const setOpen = useAppStore((s) => s.setKnowledgeSheetOpen)
   const editingId = useAppStore((s) => s.editingKnowledgeId)
+  const agents = useAppStore((s) => s.agents)
+  const loadAgents = useAppStore((s) => s.loadAgents)
 
   const [title, setTitle] = useState('')
   const [content, setContent] = useState('')
   const [tags, setTags] = useState('')
+  const [scope, setScope] = useState<'global' | 'agent'>('global')
+  const [agentIds, setAgentIds] = useState<string[]>([])
   const [saving, setSaving] = useState(false)
   const [uploadedFile, setUploadedFile] = useState<{ name: string; url: string; size: number } | null>(null)
   const [uploading, setUploading] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
   const dragCounter = useRef(0)
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const agentList = Object.values(agents)
+
+  useEffect(() => {
+    if (open) loadAgents()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open])
 
   useEffect(() => {
     if (!open) return
@@ -38,8 +49,10 @@ export function KnowledgeSheet() {
       void api<MemoryEntry>('GET', `/knowledge/${editingId}`).then((entry) => {
         setTitle(entry.title)
         setContent(entry.content)
-        const meta = entry.metadata as { tags?: string[] } | undefined
+        const meta = entry.metadata as { tags?: string[]; scope?: 'global' | 'agent'; agentIds?: string[] } | undefined
         setTags(meta?.tags?.join(', ') || '')
+        setScope(meta?.scope || 'global')
+        setAgentIds(meta?.agentIds || [])
       }).catch(() => {
         setOpen(false)
       })
@@ -47,6 +60,8 @@ export function KnowledgeSheet() {
       setTitle('')
       setContent('')
       setTags('')
+      setScope('global')
+      setAgentIds([])
       setUploadedFile(null)
     }
   }, [open, editingId, setOpen])
@@ -56,6 +71,8 @@ export function KnowledgeSheet() {
     setTitle('')
     setContent('')
     setTags('')
+    setScope('global')
+    setAgentIds([])
     setUploadedFile(null)
     setIsDragging(false)
     dragCounter.current = 0
@@ -128,6 +145,16 @@ export function KnowledgeSheet() {
     if (file) void handleUpload(file)
   }, [handleUpload])
 
+  const toggleAgent = (id: string) => {
+    setAgentIds((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id])
+  }
+
+  const scopeHelperText = scope === 'global'
+    ? 'This knowledge will be accessible to all agents'
+    : agentIds.length === 0
+      ? 'Select which agents can access this knowledge'
+      : `${agentIds.length} agent(s) selected`
+
   const handleSave = async () => {
     setSaving(true)
     try {
@@ -135,6 +162,8 @@ export function KnowledgeSheet() {
         title: title.trim() || 'Untitled',
         content,
         tags: parseTags(tags),
+        scope,
+        agentIds: scope === 'agent' ? agentIds : [],
       }
 
       if (editingId) {
@@ -294,6 +323,58 @@ export function KnowledgeSheet() {
         />
       </div>
 
+      <div className="mb-8">
+        <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Scope</label>
+        <div className="flex p-1 rounded-[12px] bg-bg border border-white/[0.06]">
+          {(['global', 'agent'] as const).map((s) => (
+            <button
+              key={s}
+              onClick={() => setScope(s)}
+              className={`flex-1 py-2.5 rounded-[10px] text-center cursor-pointer transition-all text-[13px] font-600 border-none ${
+                scope === s ? 'bg-accent-soft text-accent-bright' : 'bg-transparent text-text-3 hover:text-text-2'
+              }`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {s === 'global' ? 'Global' : 'Specific'}
+            </button>
+          ))}
+        </div>
+        <p className="text-[11px] text-text-3/60 mt-1.5 pl-1">{scopeHelperText}</p>
+      </div>
+
+      {scope === 'agent' && (
+        <div className="mb-8">
+          <label className="block font-display text-[12px] font-600 text-text-2 uppercase tracking-[0.08em] mb-3">Agents</label>
+          <div className="max-h-[240px] overflow-y-auto rounded-[12px] border border-white/[0.06] bg-white/[0.03]">
+            {agentList.length === 0 ? (
+              <p className="p-3 text-[12px] text-text-3">No agents available</p>
+            ) : (
+              agentList.map((agent) => {
+                const selected = agentIds.includes(agent.id)
+                return (
+                  <button
+                    key={agent.id}
+                    onClick={() => toggleAgent(agent.id)}
+                    className={`w-full flex items-center gap-2.5 px-3 py-2 text-left transition-all cursor-pointer ${
+                      selected ? 'bg-accent-soft/40' : 'hover:bg-white/[0.04]'
+                    }`}
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    <AgentAvatar seed={agent.avatarSeed} name={agent.name} size={24} />
+                    <span className="text-[13px] text-text flex-1 truncate">{agent.name}</span>
+                    {selected && (
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="text-accent-bright shrink-0">
+                        <polyline points="20 6 9 17 4 12" />
+                      </svg>
+                    )}
+                  </button>
+                )
+              })
+            )}
+          </div>
+        </div>
+      )}
+
       <div className="flex gap-3 pt-2 border-t border-white/[0.04]">
         <button
           onClick={onClose}
@@ -305,7 +386,7 @@ export function KnowledgeSheet() {
         <button
           onClick={() => { void handleSave() }}
           disabled={!title.trim() || saving}
-          className="flex-1 py-3.5 rounded-[14px] border-none bg-[#6366F1] text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
+          className="flex-1 py-3.5 rounded-[14px] border-none bg-accent-bright text-white text-[15px] font-600 cursor-pointer active:scale-[0.97] disabled:opacity-30 transition-all shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110"
           style={{ fontFamily: 'inherit' }}
         >
           {saving ? 'Saving...' : 'Save'}