@swarmclawai/swarmclaw 0.5.2 → 0.6.0

package/src/components/logs/log-list.tsx

@@ -162,7 +162,7 @@ export function LogList() {
               <button
                 key={i}
                 onClick={() => { setLevelFilter(f.levels); setSearch(f.search) }}
-                className="group flex items-center gap-1 px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none bg-accent-soft text-accent-bright hover:bg-[#6366F1]/15"
+                className="group flex items-center gap-1 px-2 py-1 rounded-[6px] text-[10px] font-600 cursor-pointer transition-all border-none bg-accent-soft text-accent-bright hover:bg-accent-bright/15"
               >
                 {f.name}
                 <span
@@ -337,7 +337,7 @@ export function LogList() {
                 <button
                   onClick={handleCreateTask}
                   disabled={creatingTask}
-                  className="px-5 py-3 rounded-[14px] border-none bg-[#6366F1] text-white text-[14px] font-600
+                  className="px-5 py-3 rounded-[14px] border-none bg-accent-bright text-white text-[14px] font-600
                     cursor-pointer active:scale-[0.97] disabled:opacity-40 transition-all
                     shadow-[0_4px_20px_rgba(99,102,241,0.25)] hover:brightness-110 shrink-0"
                   style={{ fontFamily: 'inherit' }}

package/src/components/mcp-servers/mcp-server-sheet.tsx

@@ -207,7 +207,7 @@ function McpServerForm({ editing, onClose, loadMcpServers }: {
         <button onClick={onClose} className="flex-1 py-3.5 rounded-[14px] border border-white/[0.08] bg-transparent text-text-2 text-[15px] font-600 cursor-pointer hover:bg-surface-2 transition-all" style={{ fontFamily: 'inherit' }}>
           Cancel
         </button>
-        <button onClick={handleSave} disabled={!canSave} 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" style={{ fontFamily: 'inherit' }}>
+        <button onClick={handleSave} disabled={!canSave} 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' }}>
           {editing ? 'Save' : 'Create'}
         </button>
       </div>

package/src/components/memory/memory-agent-list.tsx

@@ -0,0 +1,143 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAppStore } from '@/stores/use-app-store'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
+import { getMemoryCounts } from '@/lib/memory'
+
+export function MemoryAgentList() {
+  const agents = useAppStore((s) => s.agents)
+  const memoryAgentFilter = useAppStore((s) => s.memoryAgentFilter)
+  const setMemoryAgentFilter = useAppStore((s) => s.setMemoryAgentFilter)
+  const setSelectedMemoryId = useAppStore((s) => s.setSelectedMemoryId)
+  const refreshKey = useAppStore((s) => s.memoryRefreshKey)
+
+  const [counts, setCounts] = useState<Record<string, number>>({})
+
+  useEffect(() => {
+    getMemoryCounts()
+      .then((data) => setCounts(data))
+      .catch(() => {/* ignore */})
+  }, [refreshKey])
+
+  const totalCount = Object.values(counts).reduce((a, b) => a + b, 0)
+  const globalCount = counts['_global'] || 0
+
+  const agentList = Object.values(agents).sort((a, b) =>
+    a.name.localeCompare(b.name),
+  )
+
+  const handleSelect = (agentId: string | null) => {
+    setMemoryAgentFilter(agentId)
+    setSelectedMemoryId(null)
+  }
+
+  return (
+    <div className="flex-1 flex flex-col overflow-y-auto">
+      {/* Header */}
+      <div className="px-4 pt-4 pb-2 shrink-0">
+        <h2 className="font-display text-[14px] font-600 text-text-2 tracking-[-0.01em]">Memory</h2>
+      </div>
+
+      {/* All Memories row */}
+      <div className="px-2 flex flex-col gap-0.5">
+        <button
+          onClick={() => handleSelect(null)}
+          className={`relative flex items-center gap-3 px-3 py-2.5 rounded-[10px] cursor-pointer transition-all w-full text-left border-none
+            ${!memoryAgentFilter
+              ? 'bg-accent-soft'
+              : 'bg-transparent hover:bg-white/[0.02]'}`}
+          style={{ fontFamily: 'inherit' }}
+        >
+          {!memoryAgentFilter && (
+            <div className="absolute left-0 top-2.5 bottom-2.5 w-[2.5px] rounded-full bg-accent-bright" />
+          )}
+          <div className="w-[28px] h-[28px] rounded-full bg-white/[0.06] flex items-center justify-center shrink-0">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className={!memoryAgentFilter ? 'text-accent-bright' : 'text-text-3'}>
+              <ellipse cx="12" cy="5" rx="9" ry="3" />
+              <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+              <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+            </svg>
+          </div>
+          <span className={`text-[13px] font-600 flex-1 ${!memoryAgentFilter ? 'text-accent-bright' : 'text-text-2'}`}>
+            All Memories
+          </span>
+          {totalCount > 0 && (
+            <span className="text-[10px] font-mono tabular-nums text-text-3/60 bg-white/[0.04] px-1.5 py-0.5 rounded-[5px]">
+              {totalCount}
+            </span>
+          )}
+        </button>
+
+        {/* Global row */}
+        <button
+          onClick={() => handleSelect('_global')}
+          className={`relative flex items-center gap-3 px-3 py-2.5 rounded-[10px] cursor-pointer transition-all w-full text-left border-none
+            ${memoryAgentFilter === '_global'
+              ? 'bg-accent-soft'
+              : 'bg-transparent hover:bg-white/[0.02]'}`}
+          style={{ fontFamily: 'inherit' }}
+        >
+          {memoryAgentFilter === '_global' && (
+            <div className="absolute left-0 top-2.5 bottom-2.5 w-[2.5px] rounded-full bg-accent-bright" />
+          )}
+          <div className="w-[28px] h-[28px] rounded-full bg-white/[0.06] flex items-center justify-center shrink-0">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className={memoryAgentFilter === '_global' ? 'text-accent-bright' : 'text-text-3'}>
+              <circle cx="12" cy="12" r="10" />
+              <line x1="2" y1="12" x2="22" y2="12" />
+              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+            </svg>
+          </div>
+          <span className={`text-[13px] font-600 flex-1 ${memoryAgentFilter === '_global' ? 'text-accent-bright' : 'text-text-2'}`}>
+            Global
+          </span>
+          {globalCount > 0 && (
+            <span className="text-[10px] font-mono tabular-nums text-text-3/60 bg-white/[0.04] px-1.5 py-0.5 rounded-[5px]">
+              {globalCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* Divider */}
+      <div className="mx-4 my-2 border-t border-white/[0.04]" />
+
+      {/* Agent list */}
+      <div className="px-2 flex flex-col gap-0.5 pb-4">
+        {agentList.map((agent) => {
+          const count = counts[agent.id] || 0
+          const isActive = memoryAgentFilter === agent.id
+          return (
+            <button
+              key={agent.id}
+              onClick={() => handleSelect(agent.id)}
+              className={`relative flex items-center gap-3 px-3 py-2 rounded-[10px] cursor-pointer transition-all w-full text-left border-none
+                ${isActive
+                  ? 'bg-accent-soft'
+                  : 'bg-transparent hover:bg-white/[0.02]'}`}
+              style={{ fontFamily: 'inherit' }}
+            >
+              {isActive && (
+                <div className="absolute left-0 top-2 bottom-2 w-[2.5px] rounded-full bg-accent-bright" />
+              )}
+              <AgentAvatar seed={agent.avatarSeed || null} name={agent.name} size={28} />
+              <span className={`text-[13px] font-600 flex-1 truncate ${isActive ? 'text-accent-bright' : 'text-text-2'}`}>
+                {agent.name}
+              </span>
+              {count > 0 && (
+                <span className="text-[10px] font-mono tabular-nums text-text-3/60 bg-white/[0.04] px-1.5 py-0.5 rounded-[5px]">
+                  {count}
+                </span>
+              )}
+            </button>
+          )
+        })}
+        {agentList.length === 0 && (
+          <div className="text-[12px] text-text-3/50 px-3 py-4 text-center">
+            No agents yet
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/memory/memory-browser.tsx

@@ -0,0 +1,205 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { searchMemory } from '@/lib/memory'
+import { useAppStore } from '@/stores/use-app-store'
+import { MemoryCard } from './memory-card'
+import { MemoryDetail } from './memory-detail'
+import type { MemoryEntry } from '@/types'
+
+export function MemoryBrowser() {
+  const selectedMemoryId = useAppStore((s) => s.selectedMemoryId)
+  const setSelectedMemoryId = useAppStore((s) => s.setSelectedMemoryId)
+  const refreshKey = useAppStore((s) => s.memoryRefreshKey)
+  const agents = useAppStore((s) => s.agents)
+  const memoryAgentFilter = useAppStore((s) => s.memoryAgentFilter)
+
+  const [search, setSearch] = useState('')
+  const [entries, setEntries] = useState<MemoryEntry[]>([])
+  const [loaded, setLoaded] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [categoryFilter, setCategoryFilter] = useState<string>('')
+  const searchRef = useRef(search)
+
+  // Derive the API agentId from the filter
+  const apiAgentId = useMemo(() => {
+    if (!memoryAgentFilter) return undefined // all
+    if (memoryAgentFilter === '_global') return undefined // we'll filter client-side
+    return memoryAgentFilter
+  }, [memoryAgentFilter])
+
+  const load = useCallback(async (query: string) => {
+    try {
+      const results = await searchMemory({ q: query || undefined, agentId: apiAgentId })
+      setEntries(Array.isArray(results) ? results : [])
+      setError(null)
+    } catch {
+      setError('Unable to load memories right now.')
+    }
+    setLoaded(true)
+  }, [apiAgentId])
+
+  useEffect(() => {
+    searchRef.current = search
+  }, [search])
+
+  useEffect(() => {
+    const timer = setTimeout(() => { void load(searchRef.current) }, 0)
+    return () => clearTimeout(timer)
+  }, [refreshKey, load])
+
+  useEffect(() => {
+    const timer = setTimeout(() => { void load(search) }, 300)
+    return () => clearTimeout(timer)
+  }, [search, load])
+
+  // Reset selection when filter changes
+  useEffect(() => {
+    setSelectedMemoryId(null)
+    setCategoryFilter('')
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [memoryAgentFilter])
+
+  const uniqueCategories = useMemo(() => {
+    const cats = new Set<string>()
+    for (const e of entries) cats.add(e.category || 'note')
+    return Array.from(cats).sort()
+  }, [entries])
+
+  const filtered = useMemo(() => {
+    return entries.filter((e) => {
+      // Client-side global filter
+      if (memoryAgentFilter === '_global' && e.agentId) return false
+      if (categoryFilter && (e.category || 'note') !== categoryFilter) return false
+      return true
+    })
+  }, [entries, memoryAgentFilter, categoryFilter])
+
+  const filterLabel = useMemo(() => {
+    if (!memoryAgentFilter) return 'All Memories'
+    if (memoryAgentFilter === '_global') return 'Global Memories'
+    return agents[memoryAgentFilter]?.name || 'Agent'
+  }, [memoryAgentFilter, agents])
+
+  // No agent selected prompt
+  if (!memoryAgentFilter && !loaded && entries.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center px-8">
+        <div className="text-center max-w-[380px]">
+          <div className="w-14 h-14 rounded-[16px] bg-white/[0.03] flex items-center justify-center mb-4 mx-auto">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" className="text-text-3/60">
+              <ellipse cx="12" cy="5" rx="9" ry="3" />
+              <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+              <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+            </svg>
+          </div>
+          <h2 className="font-display text-[15px] font-600 text-text-2 mb-2">Browse Memories</h2>
+          <p className="text-[13px] text-text-3/70">Select an agent from the sidebar to browse their memories, or view all.</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 flex h-full min-w-0">
+      {/* Left: Memory card list */}
+      <div className="w-[360px] shrink-0 border-r border-white/[0.06] flex flex-col overflow-hidden">
+        {/* Header + search */}
+        <div className="px-3 pt-3 pb-1 shrink-0">
+          <div className="flex items-center gap-2 mb-2">
+            <h3 className="font-display text-[13px] font-600 text-text-2 tracking-[-0.01em] flex-1 truncate">{filterLabel}</h3>
+            <span className="text-[10px] font-mono tabular-nums text-text-3/50">{filtered.length}</span>
+          </div>
+          <input
+            type="text"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search memories..."
+            className="w-full px-4 py-2.5 rounded-[12px] border border-white/[0.04] bg-surface text-text
+              text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
+            style={{ fontFamily: 'inherit' }}
+          />
+        </div>
+
+        {/* Category chips */}
+        {entries.length > 0 && uniqueCategories.length > 1 && (
+          <div className="px-3 py-1.5 shrink-0">
+            <div className="flex gap-1 flex-wrap">
+              <button
+                onClick={() => setCategoryFilter('')}
+                className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all border-none
+                  ${!categoryFilter ? 'bg-white/[0.06] text-text-2' : 'bg-transparent text-text-3/70 hover:text-text-3'}`}
+                style={{ fontFamily: 'inherit' }}
+              >
+                all
+              </button>
+              {uniqueCategories.map((c) => (
+                <button
+                  key={c}
+                  onClick={() => setCategoryFilter(categoryFilter === c ? '' : c)}
+                  className={`px-3 py-1.5 rounded-[8px] text-[11px] font-600 cursor-pointer transition-all border-none
+                    ${categoryFilter === c ? 'bg-white/[0.06] text-text-2' : 'bg-transparent text-text-3/70 hover:text-text-3'}`}
+                  style={{ fontFamily: 'inherit' }}
+                >
+                  {c}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Cards */}
+        <div className="flex-1 overflow-y-auto">
+          {filtered.length > 0 ? (
+            <div className="flex flex-col gap-0.5 px-2 pb-4">
+              {filtered.map((e) => {
+                // Show agent info on cards when in "All Memories" view
+                const showAgent = !memoryAgentFilter
+                const agent = showAgent && e.agentId ? agents[e.agentId] : null
+                return (
+                  <MemoryCard
+                    key={e.id}
+                    entry={e}
+                    active={e.id === selectedMemoryId}
+                    agentName={showAgent ? (agent?.name || null) : undefined}
+                    agentAvatarSeed={showAgent ? (agent?.avatarSeed || null) : undefined}
+                    onClick={() => setSelectedMemoryId(e.id)}
+                  />
+                )
+              })}
+            </div>
+          ) : error ? (
+            <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
+              <p className="font-display text-[14px] font-600 text-text-2">Couldn&apos;t load memories</p>
+              <p className="text-[12px] text-text-3/60">{error}</p>
+              <button
+                onClick={() => { void load(search) }}
+                className="px-3 py-1.5 rounded-[8px] bg-accent-soft text-accent-bright text-[12px] font-600 cursor-pointer border-none"
+                style={{ fontFamily: 'inherit' }}
+              >
+                Retry
+              </button>
+            </div>
+          ) : loaded ? (
+            <div className="flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
+              <div className="w-10 h-10 rounded-[12px] bg-accent-soft flex items-center justify-center">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-accent-bright">
+                  <ellipse cx="12" cy="5" rx="9" ry="3" />
+                  <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" />
+                  <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" />
+                </svg>
+              </div>
+              <p className="font-display text-[14px] font-600 text-text-2">No memories yet</p>
+              <p className="text-[12px] text-text-3/50">Agents store knowledge here as they learn</p>
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      {/* Right: Detail */}
+      <div className="flex-1 flex flex-col min-w-0">
+        <MemoryDetail />
+      </div>
+    </div>
+  )
+}

package/src/components/memory/memory-card.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import type { MemoryEntry } from '@/types'
+import { AgentAvatar } from '@/components/agents/agent-avatar'
 
 function timeAgo(ts: number): string {
   if (!ts) return ''
@@ -15,10 +16,11 @@ interface Props {
   entry: MemoryEntry
   active?: boolean
   agentName?: string | null
+  agentAvatarSeed?: string | null
   onClick: () => void
 }
 
-export function MemoryCard({ entry, active, agentName, onClick }: Props) {
+export function MemoryCard({ entry, active, agentName, agentAvatarSeed, onClick }: Props) {
   return (
     <div
       onClick={onClick}
@@ -35,14 +37,33 @@ export function MemoryCard({ entry, active, agentName, onClick }: Props) {
         <span className="shrink-0 text-[9px] font-700 uppercase tracking-wider text-accent-bright/70 bg-accent-soft px-1.5 py-0.5 rounded-[5px]">
           {entry.category || 'note'}
         </span>
+        {entry.pinned && (
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor" className="shrink-0 text-amber-400/80">
+            <path d="M16 2l-4 4-4-4-2 2 4 4-5 5v1h1l5-5 4 4 2-2-4-4 4-4z" transform="rotate(45 12 12)" />
+          </svg>
+        )}
         <span className="font-display text-[13px] font-600 truncate flex-1 tracking-[-0.01em]">{entry.title}</span>
         <span className="text-[10px] text-text-3/60 shrink-0 tabular-nums font-mono">
           {timeAgo(entry.updatedAt || entry.createdAt)}
         </span>
       </div>
-      <div className="text-[12px] text-text-2/40 mt-1 truncate leading-relaxed">
+      <div className="text-[12px] text-text-2/40 mt-1 line-clamp-3 leading-relaxed">
         {entry.content || '(empty)'}
       </div>
+      {(entry.image?.path || entry.imagePath) && (
+        <div className="mt-2 w-10 h-10 rounded-[6px] overflow-hidden bg-white/[0.04] shrink-0">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={
+              (entry.image?.path || entry.imagePath || '').startsWith('data/memory-images/')
+                ? `/api/memory-images/${(entry.image?.path || entry.imagePath || '').split('/').pop()}`
+                : (entry.image?.path || entry.imagePath || '')
+            }
+            alt=""
+            className="w-full h-full object-cover"
+          />
+        </div>
+      )}
       {(entry.references?.length || entry.linkedMemoryIds?.length || entry.image?.path || entry.imagePath) && (
         <div className="flex items-center gap-2 mt-1.5 text-[10px] text-text-3/35">
           {entry.references?.length ? <span>{entry.references.length} ref{entry.references.length === 1 ? '' : 's'}</span> : null}
@@ -50,14 +71,20 @@ export function MemoryCard({ entry, active, agentName, onClick }: Props) {
           {(entry.image?.path || entry.imagePath) ? <span>image</span> : null}
         </div>
       )}
-      {agentName && (
+      {agentName ? (
+        <div className="flex items-center gap-1.5 mt-1.5">
+          <AgentAvatar seed={agentAvatarSeed || null} name={agentName} size={16} />
+          <span className="text-[10px] text-text-3/60 truncate">{agentName}</span>
+        </div>
+      ) : !entry.agentId ? (
         <div className="flex items-center gap-1 mt-1.5">
-          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/50">
-            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
+          <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/50">
+            <circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" />
+            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
           </svg>
-          <span className="text-[10px] text-text-3/60 truncate">{agentName}</span>
+          <span className="text-[10px] text-text-3/50">Global</span>
         </div>
-      )}
+      ) : null}
     </div>
   )
 }