src/dashboard/routes/memory.py

@@ -120,3 +120,39 @@ async def delete_fact(fact_id: str):
     if not ok:
         raise HTTPException(404, "Fact not found")
     return {"success": True, "id": fact_id}
+
+@router.get("/visualize", response_class=HTMLResponse)
+async def memory_visualize(request: Request, query: str | None = None):
+    """Visualize related memories using D3.js."""
+    results = []
+    if query:
+        results = search_memories(query=query, limit=50)
+    else:
+        results = recall_personal_facts_with_ids()[:50]
+        
+    # Format for D3 (nodes and links)
+    nodes = []
+    links = []
+    
+    # Simple heuristic: link memories that share keywords or context
+    for i, res in enumerate(results):
+        nodes.append({
+            "id": i,
+            "text": res.get("content", "")[:50] + "...",
+            "type": res.get("context_type", "general")
+        })
+        
+        # Link to previous node for a simple chain, or more complex logic
+        if i > 0:
+            links.append({"source": i-1, "target": i})
+
+    return templates.TemplateResponse(
+        request,
+        "memory_graph.html",
+        {
+            "page_title": "Memory Visualization",
+            "nodes": nodes,
+            "links": links,
+            "query": query
+        },
+    )

src/dashboard/templates/memory_graph.html

@@ -0,0 +1,103 @@
+
+{% extends "base.html" %}
+
+{% block content %}
+<div class="container-fluid py-4">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+        <h1 class="h2">// MEMORY_VISUALIZATION: {{ query or 'Recent' }}</h1>
+        <a href="/memory" class="btn btn-sm mc-btn-secondary">Back to Browser</a>
+    </div>
+
+    <div class="mc-card p-0" style="height: 70vh; position: relative; overflow: hidden;">
+        <svg id="memory-graph" style="width: 100%; height: 100%;"></svg>
+    </div>
+</div>
+
+<script src="https://d3js.org/d3.v7.min.js"></script>
+<script>
+    const data = {
+        nodes: {{ nodes | tojson }},
+        links: {{ links | tojson }}
+    };
+
+    const svg = d3.select("#memory-graph");
+    const width = svg.node().getBoundingClientRect().width;
+    const height = svg.node().getBoundingClientRect().height;
+
+    const simulation = d3.forceSimulation(data.nodes)
+        .force("link", d3.forceLink(data.links).id(d => d.id).distance(100))
+        .force("charge", d3.forceManyBody().strength(-200))
+        .force("center", d3.forceCenter(width / 2, height / 2));
+
+    const link = svg.append("g")
+        .attr("stroke", "var(--border-color)")
+        .attr("stroke-opacity", 0.6)
+        .selectAll("line")
+        .data(data.links)
+        .join("line")
+        .attr("stroke-width", 1);
+
+    const node = svg.append("g")
+        .attr("stroke", "#fff")
+        .attr("stroke-width", 1.5)
+        .selectAll("circle")
+        .data(data.nodes)
+        .join("circle")
+        .attr("r", 8)
+        .attr("fill", d => d.type === 'fact' ? 'var(--accent-primary)' : 'var(--text-dim)')
+        .call(drag(simulation));
+
+    node.append("title")
+        .text(d => d.text);
+
+    const label = svg.append("g")
+        .selectAll("text")
+        .data(data.nodes)
+        .join("text")
+        .text(d => d.text.substring(0, 20))
+        .attr("font-size", "10px")
+        .attr("fill", "var(--text-bright)")
+        .attr("dx", 12)
+        .attr("dy", 4);
+
+    simulation.on("tick", () => {
+        link
+            .attr("x1", d => d.source.x)
+            .attr("y1", d => d.source.y)
+            .attr("x2", d => d.target.x)
+            .attr("y2", d => d.target.y);
+
+        node
+            .attr("cx", d => d.x)
+            .attr("cy", d => d.y);
+            
+        label
+            .attr("x", d => d.x)
+            .attr("y", d => d.y);
+    });
+
+    function drag(simulation) {
+        function dragstarted(event) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            event.subject.fx = event.subject.x;
+            event.subject.fy = event.subject.y;
+        }
+        
+        function dragged(event) {
+            event.subject.fx = event.x;
+            event.subject.fy = event.y;
+        }
+        
+        function dragended(event) {
+            if (!event.active) simulation.alphaTarget(0);
+            event.subject.fx = null;
+            event.subject.fy = null;
+        }
+        
+        return d3.drag()
+            .on("start", dragstarted)
+            .on("drag", dragged)
+            .on("end", dragended);
+    }
+</script>
+{% endblock %}