Add memory graph template

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 %}