@swarmclawai/swarmclaw 0.6.7 → 0.7.0

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

@@ -5,6 +5,7 @@ import { searchMemory } from '@/lib/memory'
 import { useAppStore } from '@/stores/use-app-store'
 import { MemoryCard } from './memory-card'
 import { MemoryDetail } from './memory-detail'
+import { MemoryGraphView } from './memory-graph-view'
 import type { MemoryEntry } from '@/types'
 
 export function MemoryBrowser() {
@@ -19,6 +20,7 @@ export function MemoryBrowser() {
   const [loaded, setLoaded] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [categoryFilter, setCategoryFilter] = useState<string>('')
+  const [viewMode, setViewMode] = useState<'list' | 'graph'>('list')
   const searchRef = useRef(search)
 
   // Derive the API agentId from the filter
@@ -102,12 +104,26 @@ export function MemoryBrowser() {
 
   return (
     <div className="flex-1 flex h-full min-w-0">
-      {/* Left: Memory card list */}
+      {/* Left: Memory card list or Graph Toggle */}
       <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>
+            <div className="flex bg-white/[0.04] p-0.5 rounded-[8px]">
+               <button 
+                 onClick={() => setViewMode('list')}
+                 className={`p-1 rounded-[6px] transition-colors ${viewMode === 'list' ? 'bg-white/[0.08] text-text' : 'text-text-3 hover:text-text-2'}`}
+               >
+                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+               </button>
+               <button 
+                 onClick={() => setViewMode('graph')}
+                 className={`p-1 rounded-[6px] transition-colors ${viewMode === 'graph' ? 'bg-white/[0.08] text-text' : 'text-text-3 hover:text-text-2'}`}
+               >
+                 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+               </button>
+            </div>
             <span className="text-[10px] font-mono tabular-nums text-text-3/50">{filtered.length}</span>
           </div>
           <input
@@ -150,56 +166,68 @@ export function MemoryBrowser() {
 
         {/* 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}
-                    agentAvatarUrl={showAgent ? (agent?.avatarUrl || 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>
+          {viewMode === 'list' ? (
+            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}
+                      agentAvatarUrl={showAgent ? (agent?.avatarUrl || null) : undefined}
+                      onClick={() => setSelectedMemoryId(e.id)}
+                    />
+                  )
+                })}
               </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>
+            ) : 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 className="p-4 text-[12px] text-text-3 italic">
+              Graph view enabled in main area.
             </div>
-          ) : null}
+          )}
         </div>
       </div>
 
-      {/* Right: Detail */}
+      {/* Right: Detail or Graph */}
       <div className="flex-1 flex flex-col min-w-0">
-        <MemoryDetail />
+        {viewMode === 'graph' ? (
+          <div className="flex-1 p-4 flex flex-col">
+            <MemoryGraphView />
+          </div>
+        ) : (
+          <MemoryDetail />
+        )}
       </div>
     </div>
   )

package/src/components/memory/memory-graph-view.tsx

@@ -0,0 +1,203 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { api } from '@/lib/api-client'
+import { useAppStore } from '@/stores/use-app-store'
+
+interface Node {
+  id: string
+  title: string
+  category: string
+  agentId?: string | null
+  x: number
+  y: number
+  vx: number
+  vy: number
+}
+
+interface Link {
+  source: string
+  target: string
+  type: string
+}
+
+export function MemoryGraphView() {
+  const [data, setData] = useState<{ nodes: Node[]; links: Link[] }>({ nodes: [], links: [] })
+  const [loading, setLoading] = useState(true)
+  const [hoveredNode, setHoveredNode] = useState<string | null>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const requestRef = useRef<number>(null)
+  
+  const selectedMemoryId = useAppStore((s) => s.selectedMemoryId)
+  const setSelectedMemoryId = useAppStore((s) => s.setSelectedMemoryId)
+  const memoryAgentFilter = useAppStore((s) => s.memoryAgentFilter)
+
+  useEffect(() => {
+    async function load() {
+      setLoading(true)
+      try {
+        const url = `/memory/graph${memoryAgentFilter ? `?agentId=${memoryAgentFilter}` : ''}`
+        const res = await api<{ nodes: Node[]; links: Link[] }>('GET', url)
+        
+        // Initialize positions
+        const nodes = res.nodes.map(n => ({
+          ...n,
+          x: Math.random() * 800,
+          y: Math.random() * 600,
+          vx: 0,
+          vy: 0
+        }))
+        
+        setData({ nodes, links: res.links })
+      } catch (err) {
+        console.error('Failed to load memory graph', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [memoryAgentFilter])
+
+  // Simple Force-Directed Simulation
+  useEffect(() => {
+    if (data.nodes.length === 0) return
+
+    const animate = () => {
+      setData(prev => {
+        const nodes = [...prev.nodes]
+        const links = prev.links
+        
+        // 1. Repulsion between all nodes
+        for (let i = 0; i < nodes.length; i++) {
+          for (let j = i + 1; j < nodes.length; j++) {
+            const dx = nodes[i].x - nodes[j].x
+            const dy = nodes[i].y - nodes[j].y
+            const distSq = dx * dx + dy * dy + 0.1
+            const force = 400 / distSq
+            const fx = dx * force
+            const fy = dy * force
+            nodes[i].vx += fx
+            nodes[i].vy += fy
+            nodes[j].vx -= fx
+            nodes[j].vy -= fy
+          }
+        }
+
+        // 2. Attraction along links
+        for (const link of links) {
+          const source = nodes.find(n => n.id === link.source)
+          const target = nodes.find(n => n.id === link.target)
+          if (source && target) {
+            const dx = target.x - source.x
+            const dy = target.y - source.y
+            const dist = Math.sqrt(dx * dx + dy * dy) + 0.1
+            const force = (dist - 100) * 0.02
+            const fx = (dx / dist) * force
+            const fy = (dy / dist) * force
+            source.vx += fx
+            source.vy += fy
+            target.vx -= fx
+            target.vy -= fy
+          }
+        }
+
+        // 3. Centering force
+        const cx = 400
+        const cy = 300
+        for (const node of nodes) {
+          node.vx += (cx - node.x) * 0.01
+          node.vy += (cy - node.y) * 0.01
+        }
+
+        // 4. Update positions with damping
+        for (const node of nodes) {
+          node.x += node.vx
+          node.y += node.vy
+          node.vx *= 0.8
+          node.vy *= 0.8
+        }
+
+        return { nodes, links }
+      })
+      requestRef.current = requestAnimationFrame(animate)
+    }
+
+    requestRef.current = requestAnimationFrame(animate)
+    return () => {
+      if (requestRef.current) cancelAnimationFrame(requestRef.current)
+    }
+  }, [data.nodes.length])
+
+  if (loading) {
+    return (
+      <div className="flex-1 flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent-bright"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div ref={containerRef} className="flex-1 relative overflow-hidden bg-black/20 rounded-[16px] border border-white/[0.06]">
+      <svg width="100%" height="100%" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
+        {/* Links */}
+        {data.links.map((link, i) => {
+          const s = data.nodes.find(n => n.id === link.source)
+          const t = data.nodes.find(n => n.id === link.target)
+          if (!s || !t) return null
+          return (
+            <line
+              key={i}
+              x1={s.x} y1={s.y}
+              x2={t.x} y2={t.y}
+              stroke="white"
+              strokeOpacity="0.1"
+              strokeWidth="1"
+            />
+          )
+        })}
+
+        {/* Nodes */}
+        {data.nodes.map(node => (
+          <g 
+            key={node.id} 
+            transform={`translate(${node.x},${node.y})`}
+            onMouseEnter={() => setHoveredNode(node.id)}
+            onMouseLeave={() => setHoveredNode(null)}
+            onClick={() => setSelectedMemoryId(node.id)}
+            className="cursor-pointer"
+          >
+            <circle
+              r={selectedMemoryId === node.id ? 8 : 5}
+              fill={node.category === 'knowledge' ? '#10B981' : '#6366F1'}
+              stroke="white"
+              strokeWidth={selectedMemoryId === node.id ? 2 : 0}
+              className="transition-all"
+            />
+            {(hoveredNode === node.id || selectedMemoryId === node.id) && (
+              <text
+                y="-12"
+                textAnchor="middle"
+                className="text-[10px] fill-text font-600 pointer-events-none"
+                style={{ filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.5))' }}
+              >
+                {node.title}
+              </text>
+            )}
+          </g>
+        ))}
+      </svg>
+      
+      {/* Legend */}
+      <div className="absolute bottom-4 left-4 p-3 bg-surface/80 backdrop-blur rounded-[12px] border border-white/[0.06] flex flex-col gap-2">
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-[#10B981]" />
+          <span className="text-[11px] text-text-3">Knowledge</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="w-3 h-3 rounded-full bg-[#6366F1]" />
+          <span className="text-[11px] text-text-3">Note / Working</span>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -80,7 +80,7 @@ export function MemoryList({ inSidebar: _inSidebar, onSelect }: Props) {
   return (
     <div className="flex-1 flex flex-col overflow-y-auto">
       {/* Search */}
-      <div className="px-3 py-2 shrink-0">
+      <div className="px-3 py-2 shrink-0" style={{ animation: 'fade-up 0.4s var(--ease-spring)' }}>
         <input
           type="text"
           value={search}
@@ -94,7 +94,7 @@ export function MemoryList({ inSidebar: _inSidebar, onSelect }: Props) {
 
       {/* Agent filter tabs */}
       {entries.length > 0 && hasMultipleAgents && (
-        <div className="px-3 pb-1.5 shrink-0">
+        <div className="px-3 pb-1.5 shrink-0" style={{ animation: 'fade-up 0.4s var(--ease-spring) 0.05s both' }}>
           <div className="flex gap-1 flex-wrap">
             <button
               onClick={() => setMemoryAgentFilter(null)}
@@ -125,7 +125,7 @@ export function MemoryList({ inSidebar: _inSidebar, onSelect }: Props) {
 
       {/* Category filter */}
       {entries.length > 0 && uniqueCategories.length > 1 && (
-        <div className="px-3 pb-1.5 shrink-0">
+        <div className="px-3 pb-1.5 shrink-0" style={{ animation: 'fade-up 0.4s var(--ease-spring) 0.1s both' }}>
           <div className="flex gap-1 flex-wrap">
             <button
               onClick={() => setCategoryFilter('')}
@@ -153,21 +153,28 @@ export function MemoryList({ inSidebar: _inSidebar, onSelect }: Props) {
       {/* Memory cards */}
       {filtered.length > 0 ? (
         <div className="flex flex-col gap-0.5 px-2 pb-4">
-          {filtered.map((e) => (
-            <MemoryCard
+          {filtered.map((e, idx) => (
+            <div
               key={e.id}
-              entry={e}
-              active={e.id === selectedMemoryId}
-              agentName={e.agentId ? (agents[e.agentId]?.name || null) : null}
-              onClick={() => {
-                setSelectedMemoryId(e.id)
-                onSelect?.()
+              style={{
+                animation: 'fade-up 0.4s var(--ease-spring) both',
+                animationDelay: `${0.15 + idx * 0.02}s`
               }}
-            />
+            >
+              <MemoryCard
+                entry={e}
+                active={e.id === selectedMemoryId}
+                agentName={e.agentId ? (agents[e.agentId]?.name || null) : null}
+                onClick={() => {
+                  setSelectedMemoryId(e.id)
+                  onSelect?.()
+                }}
+              />
+            </div>
           ))}
         </div>
       ) : error ? (
-        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center">
+        <div className="flex-1 flex flex-col items-center justify-center gap-3 text-text-3 p-8 text-center" style={{ animation: 'fade-up 0.5s var(--ease-spring)' }}>
           <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