@swarmclawai/swarmclaw 1.1.8 → 1.2.0

package/README.md

@@ -190,6 +190,23 @@ The building blocks are the same: **agents, tools, memory, delegation, schedules
 
 ## Release Notes
 
+### v1.1.9 Highlights
+
+- **Docker build stability**: limit Next.js page data workers to 1 in build mode to prevent `SQLITE_BUSY` contention.
+- **Async file I/O in providers**: Anthropic and OpenAI providers now use `fs.promises` for non-blocking attachment reads.
+- **Anthropic request timeout**: 60s timeout on Anthropic API requests prevents indefinite hangs.
+- **Graceful crash handling**: instrumentation now catches EPIPE and suppresses expected LangGraph unhandled rejections.
+- **Log tail optimization**: `/api/logs` reads only the last 256 KB instead of loading the entire log file.
+- **Thread session fast path**: `ensureAgentThreadSession` uses single-row lookup instead of full table scan when `threadSessionId` is set.
+- **Memory graph performance**: force-directed simulation writes to DOM imperatively instead of re-rendering React state per frame; stops when kinetic energy settles.
+- **Reduced polling frequency**: chat area WS polling intervals relaxed (messages/runs 2s to 10s, browser 5s to 30s) to lower server load.
+- **Chat list indexing**: connector lookup indexed by `agentId` for O(1) instead of O(n) per session filter.
+- **Sidebar skill badges**: skill draft count displayed as a badge on the Skills nav item.
+- **Route loading states**: added `loading.tsx` skeleton pages for activity, home, logs, memory, and tasks routes.
+- **Command palette cleanup**: fixed missing `setOpen` dependencies and removed unused props.
+- **Playwright proxy hardening**: improved stdio pipe handling for dev server restarts.
+- **Scheduler and run ledger fixes**: improved scheduler reliability and run ledger state tracking.
+
 ### v1.1.8 Highlights
 
 - **Agent live status**: real-time `/agents/:id/status` endpoint exposes goal, progress, and plan steps; org chart detail panel consumes it via `useAgentLiveStatus` hook.

package/next.config.ts

@@ -58,7 +58,6 @@ const nextConfig: NextConfig = {
     root: PROJECT_ROOT,
   },
   experimental: {
-    turbopackFileSystemCacheForDev: false,
     // Limit build workers to 1 inside Docker to avoid SQLITE_BUSY contention
     // when multiple workers collect page data concurrently.
     ...(process.env.SWARMCLAW_BUILD_MODE ? { cpus: 1 } : {}),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swarmclawai/swarmclaw",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "description": "Self-hosted AI runtime for OpenClaw, delegation, autonomy, runtime skills, crypto wallets, and chat platform connectors.",
   "license": "MIT",
   "publishConfig": {
@@ -104,7 +104,7 @@
     "langchain": "^1.2.30",
     "lucide-react": "^0.574.0",
     "mailparser": "^3.9.3",
-    "next": "16.1.6",
+    "next": "16.1.7",
     "next-themes": "^0.4.6",
     "nodemailer": "^8.0.1",
     "openclaw": "^2026.2.26",
@@ -140,7 +140,7 @@
   },
   "devDependencies": {
     "eslint": "^9",
-    "eslint-config-next": "16.1.6",
+    "eslint-config-next": "16.1.7",
     "tsx": "^4.20.6"
   },
   "optionalDependencies": {

package/src/app/activity/loading.tsx

@@ -0,0 +1,5 @@
+import { PageLoader } from '@/components/ui/page-loader'
+
+export default function Loading() {
+  return <PageLoader label="Loading activity..." />
+}

package/src/app/api/agents/[id]/thread/route.ts

@@ -1,6 +1,7 @@
 import { NextResponse } from 'next/server'
 import { buildAgentDisabledMessage, isAgentDisabled } from '@/lib/server/agents/agent-availability'
 import { ensureAgentThreadSession } from '@/lib/server/agents/agent-thread-session'
+import type { Agent } from '@/types'
 import { loadAgents } from '@/lib/server/storage'
 
 export async function POST(req: Request, { params }: { params: Promise<{ id: string }> }) {
@@ -11,7 +12,7 @@ export async function POST(req: Request, { params }: { params: Promise<{ id: str
   if (!agent) {
     return NextResponse.json({ error: 'Agent not found' }, { status: 404 })
   }
-  const session = ensureAgentThreadSession(agentId, user)
+  const session = ensureAgentThreadSession(agentId, user, agent as Agent)
   if (!session) {
     if (isAgentDisabled(agent)) {
       return NextResponse.json({ error: buildAgentDisabledMessage(agent, 'start new chats') }, { status: 409 })

package/src/app/api/logs/route.ts

@@ -2,6 +2,9 @@ import { NextResponse } from 'next/server'
 import fs from 'fs'
 import { APP_LOG_PATH } from '@/lib/server/data-dir'
 
+/** Max bytes to read from the tail of the log file (256 KB). */
+const TAIL_BYTES = 256 * 1024
+
 export async function GET(req: Request) {
   const { searchParams } = new URL(req.url)
   const lines = parseInt(searchParams.get('lines') || '200', 10)
@@ -13,7 +16,29 @@ export async function GET(req: Request) {
       return NextResponse.json({ entries: [], total: 0 })
     }
 
-    const content = fs.readFileSync(APP_LOG_PATH, 'utf8')
+    const stat = fs.statSync(APP_LOG_PATH)
+    const fileSize = stat.size
+    if (fileSize === 0) {
+      return NextResponse.json({ entries: [], total: 0 })
+    }
+
+    // Read only the tail of the file to avoid loading multi-MB logs into memory
+    const readSize = Math.min(fileSize, TAIL_BYTES)
+    const buf = Buffer.alloc(readSize)
+    const fd = fs.openSync(APP_LOG_PATH, 'r')
+    try {
+      fs.readSync(fd, buf, 0, readSize, fileSize - readSize)
+    } finally {
+      fs.closeSync(fd)
+    }
+
+    let content = buf.toString('utf8')
+    // If we didn't read from the start, drop the first partial line
+    if (readSize < fileSize) {
+      const firstNewline = content.indexOf('\n')
+      if (firstNewline >= 0) content = content.slice(firstNewline + 1)
+    }
+
     let allLines = content.split('\n').filter(Boolean)
 
     // Filter by level
@@ -33,8 +58,9 @@ export async function GET(req: Request) {
     const entries = allLines.slice(-lines).reverse().map(parseLine)
 
     return NextResponse.json({ entries, total })
-  } catch (err: any) {
-    return NextResponse.json({ error: err.message }, { status: 500 })
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : String(err)
+    return NextResponse.json({ error: message }, { status: 500 })
   }
 }
 
@@ -44,8 +70,9 @@ export async function DELETE() {
       fs.writeFileSync(APP_LOG_PATH, '')
     }
     return NextResponse.json({ ok: true })
-  } catch (err: any) {
-    return NextResponse.json({ error: err.message }, { status: 500 })
+  } catch (err: unknown) {
+    const message = err instanceof Error ? err.message : String(err)
+    return NextResponse.json({ error: message }, { status: 500 })
   }
 }
 

package/src/app/home/loading.tsx

@@ -0,0 +1,5 @@
+import { PageLoader } from '@/components/ui/page-loader'
+
+export default function Loading() {
+  return <PageLoader label="Loading home..." />
+}

package/src/app/logs/loading.tsx

@@ -0,0 +1,5 @@
+import { PageLoader } from '@/components/ui/page-loader'
+
+export default function Loading() {
+  return <PageLoader label="Loading logs..." />
+}

package/src/app/memory/loading.tsx

@@ -0,0 +1,5 @@
+import { PageLoader } from '@/components/ui/page-loader'
+
+export default function Loading() {
+  return <PageLoader label="Loading memory..." />
+}

package/src/app/tasks/loading.tsx

@@ -0,0 +1,5 @@
+import { PageLoader } from '@/components/ui/page-loader'
+
+export default function Loading() {
+  return <PageLoader label="Loading tasks..." />
+}

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

@@ -60,27 +60,22 @@ export function AgentList({ inSidebar }: Props) {
     return ids
   }, [sessions])
 
-  // Re-evaluate online status periodically (Date.now() can't be called in useMemo directly)
-  const [now, setNow] = useState(() => Date.now())
-  useEffect(() => {
-    const id = setInterval(() => setNow(Date.now()), 60_000)
-    return () => clearInterval(id)
-  }, [])
-
-  // Agents that are "online": heartbeat enabled + tools, or recently active (within 30min)
-  const onlineAgentIds = useMemo(() => {
+  // Compute online agent IDs — derives from agents and sessions data changes.
+  // The 30-minute threshold uses a callback to avoid calling Date.now() during render.
+  const computeOnlineIds = useCallback(() => {
     const ids = new Set<string>()
-    const recentThreshold = now - 30 * 60 * 1000
+    const recentThreshold = Date.now() - 30 * 60 * 1000
     for (const a of Object.values(agents)) {
       if (a.disabled === true) continue
       if (a.heartbeatEnabled === true && getEnabledCapabilityIds(a).length > 0) { ids.add(a.id); continue }
-      // Check if any session for this agent was active in the last 30 minutes
       for (const s of Object.values(sessions)) {
         if (s.agentId === a.id && (s.lastActiveAt ?? 0) > recentThreshold) { ids.add(a.id); break }
       }
     }
     return ids
-  }, [agents, sessions, now])
+  }, [agents, sessions])
+  const [onlineAgentIds, setOnlineAgentIds] = useState(() => computeOnlineIds())
+  useEffect(() => { setOnlineAgentIds(computeOnlineIds()) }, [computeOnlineIds])
 
   // Approval counts per agent
   const approvalsByAgent = useMemo(() => {

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

@@ -311,12 +311,12 @@ export function ChatArea() {
   useWs(
     sessionId ? `messages:${sessionId}` : '',
     refreshMessages,
-    shouldPollMessages ? 2000 : undefined,
+    shouldPollMessages ? 10_000 : undefined,
   )
   useWs(
     sessionId ? 'runs' : '',
     refreshQueue,
-    sessionId && (isServerActive || queuedCount > 0) ? 2000 : undefined,
+    sessionId && (isServerActive || queuedCount > 0) ? 10_000 : undefined,
   )
 
   // Listen for stream-end signal from the server — clears streaming state
@@ -363,7 +363,7 @@ export function ChatArea() {
   useWs(
     hasBrowserTool && sessionId ? `browser:${sessionId}` : '',
     checkBrowserStatus,
-    hasBrowserTool ? 5000 : undefined,
+    hasBrowserTool ? 30_000 : undefined,
   )
 
   const handleStopBrowser = useCallback(async () => {

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

@@ -64,13 +64,24 @@ export function ChatList({ inSidebar, onSelect }: Props) {
     }))
   }, [sessions, currentUser, showLocalPlatformSessions])
 
+  // Pre-index connectors by agentId for O(1) lookup instead of O(connectors) per session
+  const connectorByAgentId = useMemo(() => {
+    const index = new Map<string, typeof connectors[string]>()
+    for (const item of Object.values(connectors)) {
+      if (item.chatroomId == null && item.agentId && item.isEnabled !== false) {
+        index.set(item.agentId, item)
+      }
+    }
+    return index
+  }, [connectors])
+
   const filtered = useMemo(() => {
     return allUserSessions
       .filter((s) => {
         const unreadCount = (getSessionLastAssistantAt(s) || 0) > (lastReadTimestamps[s.id] || 0) ? 1 : 0
         if (search) {
           const agent = s.agentId ? agents[s.agentId] : null
-          const connector = Object.values(connectors).find((item) => item.chatroomId == null && item.agentId === s.agentId && item.isEnabled !== false)
+          const connector = s.agentId ? connectorByAgentId.get(s.agentId) : undefined
           const lastMessage = getSessionLastMessage(s)
           const haystack = [
             s.name,
@@ -102,7 +113,7 @@ export function ChatList({ inSidebar, onSelect }: Props) {
         if (sortMode === 'messages') return getSessionMessageCount(b) - getSessionMessageCount(a)
         return (b.lastActiveAt || 0) - (a.lastActiveAt || 0)
       })
-  }, [agents, allUserSessions, connectors, lastReadTimestamps, search, sortMode, typeFilter])
+  }, [agents, allUserSessions, connectorByAgentId, lastReadTimestamps, search, sortMode, typeFilter])
 
   const handleSelect = async (id: string) => {
     const agentId = sessions[id]?.agentId

package/src/components/layout/sidebar-rail.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { usePathname } from 'next/navigation'
 import { useAppStore } from '@/stores/use-app-store'
 import { Avatar } from '@/components/shared/avatar'
@@ -8,6 +8,7 @@ import { AgentAvatar } from '@/components/agents/agent-avatar'
 import { DaemonIndicator } from '@/components/layout/daemon-indicator'
 import { NotificationCenter } from '@/components/shared/notification-center'
 import { NavItem, RailTooltip } from '@/components/layout/nav-item'
+import { useWs } from '@/hooks/use-ws'
 import { FULL_WIDTH_VIEWS } from '@/lib/app/view-constants'
 import { pathToView, useNavigate } from '@/lib/app/navigation'
 import { safeStorageGet, safeStorageSet } from '@/lib/app/safe-storage'
@@ -29,16 +30,20 @@ export function SidebarRail({
   const navigateTo = useNavigate()
   const currentUser = useAppStore((s) => s.currentUser)
   const appSettings = useAppStore((s) => s.appSettings)
-  const agents = useAppStore((s) => s.agents)
+  const defaultAgent = useAppStore((s) => {
+    const defaultId = s.appSettings.defaultAgentId
+    if (defaultId && s.agents[defaultId]) return s.agents[defaultId]
+    const first = Object.values(s.agents)[0]
+    return first || null
+  })
   const currentAgentId = useAppStore((s) => s.currentAgentId)
   const sidebarOpen = useAppStore((s) => s.sidebarOpen)
   const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
+  const skillDraftCount = useAppStore((s) => s.skillDraftCount)
+  const loadSkillDraftCount = useAppStore((s) => s.loadSkillDraftCount)
 
   const activeView = pathToView(pathname) ?? 'home'
 
-  const defaultAgent = appSettings.defaultAgentId && agents[appSettings.defaultAgentId]
-    ? agents[appSettings.defaultAgentId]
-    : Object.values(agents)[0] || null
   const defaultAgentId = defaultAgent?.id || null
   const isDefaultChat = activeView === 'agents' && currentAgentId === defaultAgentId
 
@@ -49,6 +54,9 @@ export function SidebarRail({
   // Mobile always forces expanded
   const railExpanded = mobile || railExpandedStored
 
+  useEffect(() => { void loadSkillDraftCount() }, [loadSkillDraftCount])
+  useWs('skills', loadSkillDraftCount)
+
   const toggleRail = () => {
     if (mobile) return
     const next = !railExpandedStored
@@ -295,7 +303,7 @@ export function SidebarRail({
                 <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>
             </NavItem>
-            <NavItem view="skills" label="Skills" expanded={railExpanded} isActive={isNavActive('skills')} onClick={() => handleNavClick('skills')}>
+            <NavItem view="skills" label="Skills" badge={skillDraftCount} expanded={railExpanded} isActive={isNavActive('skills')} onClick={() => handleNavClick('skills')}>
               <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                 <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
               </svg>

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, useCallback } from 'react'
 import { api } from '@/lib/app/api-client'
 import { useAppStore } from '@/stores/use-app-store'
 
@@ -21,13 +21,19 @@ interface Link {
   type: string
 }
 
+/** Kinetic energy threshold — stop simulation when total energy drops below this. */
+const SETTLE_THRESHOLD = 0.5
+
 export function MemoryGraphView() {
-  const [data, setData] = useState<{ nodes: Node[]; links: Link[] }>({ nodes: [], links: [] })
+  const [initialData, setInitialData] = useState<{ nodes: Node[]; links: Link[] } | null>(null)
   const [loading, setLoading] = useState(true)
   const [hoveredNode, setHoveredNode] = useState<string | null>(null)
   const containerRef = useRef<HTMLDivElement>(null)
+  const svgRef = useRef<SVGSVGElement>(null)
   const requestRef = useRef<number>(null)
-  
+  const nodesRef = useRef<Node[]>([])
+  const linksRef = useRef<Link[]>([])
+
   const selectedMemoryId = useAppStore((s) => s.selectedMemoryId)
   const setSelectedMemoryId = useAppStore((s) => s.setSelectedMemoryId)
   const memoryAgentFilter = useAppStore((s) => s.memoryAgentFilter)
@@ -38,7 +44,7 @@ export function MemoryGraphView() {
       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,
@@ -47,8 +53,10 @@ export function MemoryGraphView() {
           vx: 0,
           vy: 0
         }))
-        
-        setData({ nodes, links: res.links })
+
+        nodesRef.current = nodes
+        linksRef.current = res.links
+        setInitialData({ nodes, links: res.links })
       } catch (err) {
         console.error('Failed to load memory graph', err)
       } finally {
@@ -58,75 +66,112 @@ export function MemoryGraphView() {
     load()
   }, [memoryAgentFilter])
 
-  // Simple Force-Directed Simulation
+  // Write positions directly to SVG DOM — no React state updates per frame
+  const updateDOM = useCallback(() => {
+    const svg = svgRef.current
+    if (!svg) return
+    const nodes = nodesRef.current
+
+    // Update link positions
+    const lineElements = svg.querySelectorAll<SVGLineElement>('[data-link]')
+    lineElements.forEach((el) => {
+      const srcId = el.getAttribute('data-src')
+      const tgtId = el.getAttribute('data-tgt')
+      const s = nodes.find(n => n.id === srcId)
+      const t = nodes.find(n => n.id === tgtId)
+      if (s && t) {
+        el.setAttribute('x1', String(s.x))
+        el.setAttribute('y1', String(s.y))
+        el.setAttribute('x2', String(t.x))
+        el.setAttribute('y2', String(t.y))
+      }
+    })
+
+    // Update node positions
+    const gElements = svg.querySelectorAll<SVGGElement>('[data-node-id]')
+    gElements.forEach((el) => {
+      const id = el.getAttribute('data-node-id')
+      const node = nodes.find(n => n.id === id)
+      if (node) {
+        el.setAttribute('transform', `translate(${node.x},${node.y})`)
+      }
+    })
+  }, [])
+
+  // Force-directed simulation running in refs, writing to DOM imperatively
   useEffect(() => {
-    if (data.nodes.length === 0) return
+    const nodes = nodesRef.current
+    const links = linksRef.current
+    if (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
-          }
-        }
+      let totalEnergy = 0
 
-        // 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
-          }
+      // 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
         }
+      }
 
-        // 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
+      // 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
         }
+      }
 
-        // 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
-        }
+      // 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
+        totalEnergy += node.vx * node.vx + node.vy * node.vy
+      }
+
+      // Write positions to DOM imperatively
+      updateDOM()
 
-        return { nodes, links }
-      })
-      requestRef.current = requestAnimationFrame(animate)
+      // Stop when settled
+      if (totalEnergy > SETTLE_THRESHOLD) {
+        requestRef.current = requestAnimationFrame(animate)
+      }
     }
 
     requestRef.current = requestAnimationFrame(animate)
     return () => {
       if (requestRef.current) cancelAnimationFrame(requestRef.current)
     }
-  }, [data.nodes.length])
+  }, [initialData, updateDOM])
 
   if (loading) {
     return (
@@ -136,17 +181,23 @@ export function MemoryGraphView() {
     )
   }
 
+  const nodes = nodesRef.current
+  const links = linksRef.current
+
   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">
+      <svg ref={svgRef} 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)
+        {links.map((link, i) => {
+          const s = nodes.find(n => n.id === link.source)
+          const t = nodes.find(n => n.id === link.target)
           if (!s || !t) return null
           return (
             <line
               key={i}
+              data-link=""
+              data-src={link.source}
+              data-tgt={link.target}
               x1={s.x} y1={s.y}
               x2={t.x} y2={t.y}
               stroke="white"
@@ -157,9 +208,10 @@ export function MemoryGraphView() {
         })}
 
         {/* Nodes */}
-        {data.nodes.map(node => (
-          <g 
-            key={node.id} 
+        {nodes.map(node => (
+          <g
+            key={node.id}
+            data-node-id={node.id}
             transform={`translate(${node.x},${node.y})`}
             onMouseEnter={() => setHoveredNode(node.id)}
             onMouseLeave={() => setHoveredNode(null)}
@@ -186,7 +238,7 @@ export function MemoryGraphView() {
           </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">