icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/knowledge_graph.html

@@ -0,0 +1,739 @@
+{% extends "base.html" %}
+{% block title %}Knowledge Graph — Text Network Analysis{% endblock %}
+{% block content %}
+<style>
+    .kg-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; height: calc(100vh - 56px); }
+    .kg-sidebar { background: var(--surface); border-right: 1px solid var(--border); overflow-y: auto; padding: 16px; }
+    .kg-main { display: flex; flex-direction: column; overflow: hidden; }
+    .kg-graph-container { flex: 1; position: relative; background: #0a0f1e; overflow: hidden; }
+    .kg-canvas { width: 100%; height: 100%; }
+    .kg-toolbar { display: flex; gap: 8px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); align-items: center; flex-wrap: wrap; }
+    .kg-bottom { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); max-height: 300px; }
+    .kg-panel { background: var(--surface); padding: 16px; overflow-y: auto; border-right: 1px solid var(--border); }
+    .kg-panel h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 10px; }
+
+    /* Chat panel */
+    .kg-chat { display: flex; flex-direction: column; background: var(--surface); }
+    .kg-chat-messages { flex: 1; overflow-y: auto; padding: 12px; max-height: 220px; }
+    .kg-chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
+    .kg-chat-input input { flex: 1; }
+    .chat-msg { margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
+    .chat-msg.user { color: var(--accent); }
+    .chat-msg.assistant { color: var(--text); }
+    .chat-msg .sender { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
+    .chat-msg.user .sender { color: var(--accent); }
+    .chat-msg.assistant .sender { color: var(--success); }
+    .chat-msg pre { background: var(--surface2); padding: 8px; border-radius: 4px; margin-top: 4px; white-space: pre-wrap; font-size: 12px; }
+
+    /* Sidebar components */
+    .kg-section { margin-bottom: 20px; }
+    .kg-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
+    .kg-input-group { margin-bottom: 12px; }
+    .kg-input-group label { font-size: 12px; color: var(--text-dim); display: block; margin-bottom: 4px; }
+    .kg-input-group textarea { width: 100%; min-height: 80px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 8px; font-size: 13px; resize: vertical; }
+    .kg-input-group input[type="text"], .kg-input-group input[type="url"] { width: 100%; }
+    .kg-input-group select { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); padding: 8px; font-size: 13px; }
+
+    /* Graph list */
+    .kg-graph-list { list-style: none; padding: 0; }
+    .kg-graph-list li { padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; cursor: pointer; font-size: 13px; transition: all .15s; }
+    .kg-graph-list li:hover { border-color: var(--accent); background: rgba(59,130,246,.05); }
+    .kg-graph-list li.active { border-color: var(--accent); background: rgba(59,130,246,.1); }
+    .kg-graph-list li .graph-name { font-weight: 600; }
+    .kg-graph-list li .graph-meta { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
+
+    /* Stats strip */
+    .kg-stats { display: flex; gap: 12px; flex-wrap: wrap; }
+    .kg-stat { text-align: center; }
+    .kg-stat .val { font-size: 20px; font-weight: 700; }
+    .kg-stat .lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
+
+    /* Community chips */
+    .comm-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; margin: 2px; }
+
+    /* Gap cards */
+    .gap-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 10px; margin-bottom: 8px; font-size: 12px; }
+    .gap-card .gap-score { font-weight: 700; }
+
+    /* Node tooltip */
+    .kg-tooltip { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-size: 12px; pointer-events: none; z-index: 100; display: none; min-width: 180px; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
+
+    /* Loading overlay */
+    .kg-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--text-dim); font-size: 14px; }
+
+    /* Source tabs */
+    .source-tabs { display: flex; gap: 4px; margin-bottom: 12px; }
+    .source-tab { padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; background: var(--surface2); color: var(--text-dim); border: 1px solid transparent; }
+    .source-tab.active { border-color: var(--accent); color: var(--accent); }
+
+    @media (max-width: 900px) {
+        .kg-layout { grid-template-columns: 1fr; }
+        .kg-sidebar { max-height: 300px; }
+        .kg-bottom { grid-template-columns: 1fr; }
+    }
+</style>
+
+<div class="kg-layout">
+    <!-- Sidebar -->
+    <div class="kg-sidebar">
+        <div class="kg-section">
+            <div class="kg-section-title">Ingest Source</div>
+            <div class="source-tabs">
+                <div class="source-tab active" data-source="text" onclick="switchSource(this)">Text</div>
+                <div class="source-tab" data-source="url" onclick="switchSource(this)">URL</div>
+                <div class="source-tab" data-source="file" onclick="switchSource(this)">File</div>
+                <div class="source-tab" data-source="youtube" onclick="switchSource(this)">YouTube</div>
+                <div class="source-tab" data-source="database" onclick="switchSource(this)">Database</div>
+                <div class="source-tab" data-source="code" onclick="switchSource(this)">Code</div>
+            </div>
+            <div id="source-text" class="kg-input-group">
+                <textarea id="input-text" placeholder="Paste text to analyze...&#10;&#10;The knowledge graph will reveal topic clusters, key concepts, and structural gaps in the discourse."></textarea>
+            </div>
+            <div id="source-url" class="kg-input-group" style="display:none">
+                <input type="url" id="input-url" class="nl-input" placeholder="https://example.com/article">
+            </div>
+            <div id="source-file" class="kg-input-group" style="display:none">
+                <input type="text" id="input-file" class="nl-input" placeholder="/path/to/document.md">
+            </div>
+            <div id="source-youtube" class="kg-input-group" style="display:none">
+                <input type="url" id="input-youtube" class="nl-input" placeholder="https://youtube.com/watch?v=...">
+            </div>
+            <div id="source-database" class="kg-input-group" style="display:none">
+                <select id="input-db-source">
+                    <option value="knowledge_base">Knowledge Base</option>
+                    <option value="compliance_controls">Compliance Controls</option>
+                    <option value="audit_trail">Audit Trail</option>
+                    <option value="memory">Memory Entries</option>
+                    <option value="requirements">Requirements</option>
+                    <option value="threats">Threat Models</option>
+                    <option value="research">Research Dossiers</option>
+                    <option value="digital_thread">Digital Thread</option>
+                </select>
+            </div>
+            <div id="source-code" class="kg-input-group" style="display:none">
+                <input type="text" id="input-code-dir" class="nl-input" placeholder="tools/" value="tools/">
+            </div>
+            <div class="kg-input-group">
+                <input type="text" id="graph-name" class="nl-input" placeholder="Graph name" value="Untitled">
+            </div>
+            <div style="display:flex;gap:8px">
+                <button class="btn btn-primary" onclick="analyzeNew()" id="btn-analyze">Analyze</button>
+                <button class="btn btn-sm" style="background:var(--surface2);color:var(--text-dim);border:1px solid var(--border)" onclick="appendToGraph()">+ Append</button>
+            </div>
+        </div>
+
+        <div class="kg-section">
+            <div class="kg-section-title">Saved Graphs</div>
+            <ul class="kg-graph-list" id="graph-list">
+                <li class="empty" style="border:none;padding:8px 0;color:var(--text-dim);font-size:12px">No graphs yet. Analyze some text to create one.</li>
+            </ul>
+        </div>
+
+        <div class="kg-section" id="stats-section" style="display:none">
+            <div class="kg-section-title">Graph Stats</div>
+            <div class="kg-stats" id="graph-stats"></div>
+        </div>
+
+        <div class="kg-section" id="communities-section" style="display:none">
+            <div class="kg-section-title">Topic Clusters</div>
+            <div id="community-list"></div>
+        </div>
+    </div>
+
+    <!-- Main area -->
+    <div class="kg-main">
+        <div class="kg-toolbar">
+            <span style="font-size:13px;color:var(--text-dim)">Layout:</span>
+            <select id="layout-select" onchange="changeLayout()" style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:4px 8px;font-size:12px">
+                <option value="force">Force Atlas</option>
+                <option value="circular">Circular</option>
+                <option value="grid">Grid</option>
+            </select>
+            <span style="font-size:13px;color:var(--text-dim)">Size by:</span>
+            <select id="size-select" onchange="updateNodeSizes()" style="background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:4px 8px;font-size:12px">
+                <option value="centrality">Centrality</option>
+                <option value="degree">Degree</option>
+                <option value="occurrences">Occurrences</option>
+            </select>
+            <button class="btn btn-sm" style="background:var(--surface2);color:var(--text-dim);border:1px solid var(--border)" onclick="generateInsights()">AI Insights</button>
+            <button class="btn btn-sm" style="background:var(--surface2);color:var(--text-dim);border:1px solid var(--border)" onclick="layerPeel()">Layer Peel</button>
+            <button class="btn btn-sm" style="background:var(--surface2);color:var(--text-dim);border:1px solid var(--border)" onclick="exportGraph()">Export JSON</button>
+            <div style="flex:1"></div>
+            <span id="node-count" style="font-size:12px;color:var(--text-dim)"></span>
+        </div>
+
+        <!-- Graph canvas -->
+        <div class="kg-graph-container">
+            <canvas id="kg-canvas" class="kg-canvas"></canvas>
+            <div class="kg-tooltip" id="tooltip"></div>
+            <div class="kg-loading" id="loading" style="display:none">Analyzing text network...</div>
+            <div class="kg-loading" id="empty-state">
+                <div style="text-align:center">
+                    <div style="font-size:48px;margin-bottom:12px;opacity:.3">&#9678;</div>
+                    <div style="font-size:16px;margin-bottom:6px">Knowledge Graph Engine</div>
+                    <div style="font-size:13px;color:var(--text-dim)">Paste text, enter a URL, or select a database source<br>to build an interactive text network graph.</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Bottom panels: Gaps + Chat -->
+        <div class="kg-bottom">
+            <div class="kg-panel" id="gaps-panel">
+                <h3>Structural Gaps (Blind Spots)</h3>
+                <div id="gaps-list">
+                    <div style="font-size:12px;color:var(--text-dim)">Analyze text to discover structural gaps between topic clusters.</div>
+                </div>
+            </div>
+            <div class="kg-chat">
+                <div class="kg-chat-messages" id="chat-messages">
+                    <div class="chat-msg assistant">
+                        <div class="sender">GraphRAG Assistant</div>
+                        <div>Ask me anything about the knowledge graph, your codebase, infrastructure, or compliance frameworks. I use GraphRAG to find connections across your ICDEV knowledge base.</div>
+                    </div>
+                </div>
+                <div class="kg-chat-input">
+                    <input type="text" id="chat-input" class="nl-input" placeholder="Ask about codebase, infrastructure, frameworks..."
+                           onkeydown="if(event.key==='Enter')sendChat()" style="padding:8px 12px;font-size:13px">
+                    <button class="btn btn-primary btn-sm" onclick="sendChat()">Send</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+// ── State ───────────────────────────────────────────────────────
+let currentGraph = null;
+let currentGraphId = null;
+let graphNodes = [];
+let graphEdges = [];
+let nodePositions = {};
+let hoveredNode = null;
+let draggingNode = null;
+let dragOffset = {x:0, y:0};
+let panOffset = {x:0, y:0};
+let scale = 1;
+let isPanning = false;
+let panStart = {x:0, y:0};
+
+const COMM_COLORS = [
+    '#3b82f6','#ef4444','#22c55e','#f59e0b','#8b5cf6',
+    '#ec4899','#06b6d4','#f97316','#14b8a6','#a855f7','#64748b','#84cc16'
+];
+
+// ── Source tab switching ────────────────────────────────────────
+function switchSource(el) {
+    document.querySelectorAll('.source-tab').forEach(t => t.classList.remove('active'));
+    el.classList.add('active');
+    ['text','url','file','youtube','database','code'].forEach(s => {
+        document.getElementById('source-'+s).style.display = s === el.dataset.source ? '' : 'none';
+    });
+}
+
+// ── API calls ───────────────────────────────────────────────────
+async function api(endpoint, data) {
+    const resp = await fetch('/api/knowledge-graph/' + endpoint, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(data)
+    });
+    return resp.json();
+}
+
+async function apiGet(endpoint) {
+    const resp = await fetch('/api/knowledge-graph/' + endpoint);
+    return resp.json();
+}
+
+// ── Analyze new text ────────────────────────────────────────────
+async function analyzeNew() {
+    const activeSource = document.querySelector('.source-tab.active').dataset.source;
+    const name = document.getElementById('graph-name').value || 'Untitled';
+    const payload = {name};
+
+    if (activeSource === 'text') payload.text = document.getElementById('input-text').value;
+    else if (activeSource === 'url') payload.url = document.getElementById('input-url').value;
+    else if (activeSource === 'file') payload.file_path = document.getElementById('input-file').value;
+    else if (activeSource === 'youtube') payload.youtube_url = document.getElementById('input-youtube').value;
+    else if (activeSource === 'database') payload.db_source = document.getElementById('input-db-source').value;
+    else if (activeSource === 'code') payload.code_dir = document.getElementById('input-code-dir').value;
+
+    document.getElementById('loading').style.display = '';
+    document.getElementById('empty-state').style.display = 'none';
+    document.getElementById('btn-analyze').disabled = true;
+
+    try {
+        const result = await api('analyze', payload);
+        if (result.error) { alert(result.error); return; }
+        currentGraph = result;
+        currentGraphId = result.graph_id;
+        renderGraph(result);
+        loadGraphList();
+    } catch(e) { alert('Analysis failed: ' + e.message); }
+    finally {
+        document.getElementById('loading').style.display = 'none';
+        document.getElementById('btn-analyze').disabled = false;
+    }
+}
+
+async function appendToGraph() {
+    if (!currentGraphId) { alert('No active graph. Analyze text first.'); return; }
+    const activeSource = document.querySelector('.source-tab.active').dataset.source;
+    const payload = {graph_id: currentGraphId};
+
+    if (activeSource === 'text') payload.text = document.getElementById('input-text').value;
+    else if (activeSource === 'url') payload.url = document.getElementById('input-url').value;
+    else if (activeSource === 'file') payload.file_path = document.getElementById('input-file').value;
+    else if (activeSource === 'database') payload.db_source = document.getElementById('input-db-source').value;
+    else if (activeSource === 'code') payload.code_dir = document.getElementById('input-code-dir').value;
+
+    document.getElementById('loading').style.display = '';
+    try {
+        const result = await api('append', payload);
+        if (result.error) { alert(result.error); return; }
+        currentGraph = result;
+        renderGraph(result);
+    } catch(e) { alert('Append failed: ' + e.message); }
+    finally { document.getElementById('loading').style.display = 'none'; }
+}
+
+async function loadGraph(graphId) {
+    document.getElementById('loading').style.display = '';
+    document.getElementById('empty-state').style.display = 'none';
+    try {
+        const result = await apiGet('load/' + graphId);
+        if (result.error) { alert(result.error); return; }
+        currentGraph = result;
+        currentGraphId = graphId;
+        renderGraph(result);
+    } catch(e) { alert('Load failed: ' + e.message); }
+    finally { document.getElementById('loading').style.display = 'none'; }
+}
+
+async function loadGraphList() {
+    try {
+        const result = await apiGet('list');
+        const list = document.getElementById('graph-list');
+        if (!result.graphs || !result.graphs.length) {
+            list.innerHTML = '<li class="empty" style="border:none;padding:8px 0;color:var(--text-dim);font-size:12px">No graphs yet.</li>';
+            return;
+        }
+        list.innerHTML = result.graphs.map(g => `
+            <li onclick="loadGraph('${g.id}')" class="${g.id === currentGraphId ? 'active' : ''}">
+                <div class="graph-name">${g.name}</div>
+                <div class="graph-meta">${g.stats?.unique_concepts || '?'} concepts · ${g.stats?.num_communities || '?'} clusters · ${g.source_type}</div>
+            </li>
+        `).join('');
+    } catch(e) { console.error('Failed to load graph list', e); }
+}
+
+// ── AI features ─────────────────────────────────────────────────
+async function generateInsights() {
+    if (!currentGraphId) return alert('No active graph.');
+    addChatMsg('assistant', 'Generating AI insights for structural gaps...');
+    try {
+        const result = await api('insights', {graph_id: currentGraphId, type: 'questions'});
+        if (result.questions) {
+            for (const q of result.questions) {
+                let msg = `**Gap between clusters ${q.community_pair[0]} and ${q.community_pair[1]}** (score: ${q.gap_score})\n`;
+                msg += `Concepts A: ${q.concepts_a.join(', ')}\nConcepts B: ${q.concepts_b.join(', ')}\n\n`;
+                if (q.ai_questions) msg += `AI Questions:\n${q.ai_questions}`;
+                else msg += q.deterministic_questions.map((q,i) => `${i+1}. ${q}`).join('\n');
+                addChatMsg('assistant', msg);
+            }
+        }
+    } catch(e) { addChatMsg('assistant', 'Insight generation failed: ' + e.message); }
+}
+
+async function layerPeel() {
+    if (!currentGraphId) return alert('No active graph.');
+    try {
+        const result = await api('insights', {graph_id: currentGraphId, type: 'layer_peel'});
+        let msg = '**Layer Peel Analysis** — Removing prominent nodes to reveal hidden concepts:\n\n';
+        if (result.hidden_concepts) {
+            msg += 'Hidden concepts revealed:\n';
+            result.hidden_concepts.slice(0,10).forEach(c => {
+                msg += `  · ${c.concept} (centrality: ${c.centrality.toFixed(4)}, cluster: ${c.community})\n`;
+            });
+        }
+        if (result.discourse_entrance_points) {
+            msg += '\nDiscourse entrance points (high influence per occurrence):\n';
+            result.discourse_entrance_points.slice(0,5).forEach(e => {
+                msg += `  · ${e.concept} (influence/occ: ${e.influence_per_occurrence.toFixed(4)})\n`;
+            });
+        }
+        addChatMsg('assistant', msg);
+    } catch(e) { addChatMsg('assistant', 'Layer peel failed: ' + e.message); }
+}
+
+// ── Chat ────────────────────────────────────────────────────────
+async function sendChat() {
+    const input = document.getElementById('chat-input');
+    const query = input.value.trim();
+    if (!query) return;
+    input.value = '';
+    addChatMsg('user', query);
+
+    try {
+        const result = await api('chat', {query, graph_id: currentGraphId});
+        if (result.error) { addChatMsg('assistant', 'Error: ' + result.error); return; }
+
+        let msg = '';
+        if (result.response) {
+            msg = result.response;
+        } else if (result.results && result.results.length) {
+            msg = `Found ${result.results.length} related concepts:\n\n`;
+            result.results.slice(0,10).forEach(r => {
+                msg += `· **${r.concept}** — score: ${r.score}, cluster: ${r.community}, neighbors: ${(r.neighbors||[]).slice(0,5).join(', ')}\n`;
+            });
+            if (result.relevant_gaps && result.relevant_gaps.length) {
+                msg += '\nStructural gaps (blind spots):\n';
+                result.relevant_gaps.slice(0,3).forEach(g => {
+                    msg += `· Gap between [${(g.community_a_top_concepts||[]).join(',')}] and [${(g.community_b_top_concepts||[]).join(',')}] (score: ${g.gap_score})\n`;
+                });
+            }
+        } else {
+            msg = result.context || 'No relevant concepts found. Try a different query or ingest more data.';
+        }
+        addChatMsg('assistant', msg);
+    } catch(e) { addChatMsg('assistant', 'Chat error: ' + e.message); }
+}
+
+function addChatMsg(role, text) {
+    const container = document.getElementById('chat-messages');
+    const div = document.createElement('div');
+    div.className = 'chat-msg ' + role;
+    // Simple markdown-ish formatting
+    const formatted = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>').replace(/\n/g, '<br>');
+    div.innerHTML = `<div class="sender">${role === 'user' ? 'You' : 'GraphRAG'}</div><div>${formatted}</div>`;
+    container.appendChild(div);
+    container.scrollTop = container.scrollHeight;
+}
+
+// ── Graph rendering (Canvas 2D) ─────────────────────────────────
+function renderGraph(data) {
+    graphNodes = data.nodes || [];
+    graphEdges = data.edges || [];
+    document.getElementById('empty-state').style.display = 'none';
+
+    // Update stats
+    const stats = data.stats || {};
+    document.getElementById('stats-section').style.display = '';
+    document.getElementById('graph-stats').innerHTML = `
+        <div class="kg-stat"><div class="val blue">${stats.unique_concepts || graphNodes.length}</div><div class="lbl">Concepts</div></div>
+        <div class="kg-stat"><div class="val purple">${stats.total_edges || graphEdges.length}</div><div class="lbl">Edges</div></div>
+        <div class="kg-stat"><div class="val green">${stats.num_communities || '?'}</div><div class="lbl">Clusters</div></div>
+        <div class="kg-stat"><div class="val orange">${stats.density ? stats.density.toFixed(3) : '?'}</div><div class="lbl">Density</div></div>
+    `;
+    document.getElementById('node-count').textContent = `${graphNodes.length} nodes · ${graphEdges.length} edges`;
+
+    // Communities
+    const comms = data.communities || [];
+    if (comms.length) {
+        document.getElementById('communities-section').style.display = '';
+        document.getElementById('community-list').innerHTML = comms.map(c =>
+            `<div style="margin-bottom:6px"><span class="comm-chip" style="background:${COMM_COLORS[c.id % COMM_COLORS.length]}22;color:${COMM_COLORS[c.id % COMM_COLORS.length]}">Cluster ${c.id}</span> <span style="font-size:11px;color:var(--text-dim)">${c.size} concepts</span><br><span style="font-size:12px">${(c.top_concepts||[]).join(', ')}</span></div>`
+        ).join('');
+    }
+
+    // Gaps
+    const gaps = data.structural_gaps || [];
+    const gapsEl = document.getElementById('gaps-list');
+    if (gaps.length) {
+        gapsEl.innerHTML = gaps.slice(0,8).map(g => `
+            <div class="gap-card">
+                <span class="gap-score" style="color:${g.gap_score > 0.7 ? 'var(--danger)' : g.gap_score > 0.4 ? 'var(--warning)' : 'var(--success)'}">
+                    Gap: ${g.gap_score.toFixed(2)}
+                </span>
+                <span style="font-size:11px;color:var(--text-dim)"> between cluster ${g.community_a} and ${g.community_b}</span><br>
+                <span style="font-size:11px"><span style="color:${COMM_COLORS[g.community_a % COMM_COLORS.length]}">${(g.community_a_top_concepts||[]).join(', ')}</span>
+                ↔ <span style="color:${COMM_COLORS[g.community_b % COMM_COLORS.length]}">${(g.community_b_top_concepts||[]).join(', ')}</span></span>
+            </div>
+        `).join('');
+    } else {
+        gapsEl.innerHTML = '<div style="font-size:12px;color:var(--text-dim)">No significant structural gaps detected.</div>';
+    }
+
+    // Layout nodes
+    layoutNodes();
+    drawGraph();
+}
+
+function layoutNodes() {
+    const canvas = document.getElementById('kg-canvas');
+    const w = canvas.width = canvas.offsetWidth;
+    const h = canvas.height = canvas.offsetHeight;
+    const layout = document.getElementById('layout-select').value;
+    nodePositions = {};
+    panOffset = {x: 0, y: 0};
+    scale = 1;
+
+    if (layout === 'circular') {
+        graphNodes.forEach((n, i) => {
+            const angle = (2 * Math.PI * i) / graphNodes.length;
+            const r = Math.min(w, h) * 0.38;
+            nodePositions[n.id] = { x: w/2 + r * Math.cos(angle), y: h/2 + r * Math.sin(angle) };
+        });
+    } else if (layout === 'grid') {
+        const cols = Math.ceil(Math.sqrt(graphNodes.length));
+        const cellW = w / (cols + 1);
+        const cellH = h / (Math.ceil(graphNodes.length / cols) + 1);
+        graphNodes.forEach((n, i) => {
+            nodePositions[n.id] = { x: (i % cols + 1) * cellW, y: (Math.floor(i / cols) + 1) * cellH };
+        });
+    } else {
+        // Force Atlas (simplified Fruchterman-Reingold)
+        const area = w * h;
+        const k = Math.sqrt(area / Math.max(graphNodes.length, 1)) * 0.8;
+
+        // Random initial positions
+        graphNodes.forEach(n => {
+            nodePositions[n.id] = { x: w * 0.2 + Math.random() * w * 0.6, y: h * 0.2 + Math.random() * h * 0.6 };
+        });
+
+        // Build adjacency for quick lookup
+        const adjSet = {};
+        graphEdges.forEach(e => {
+            if (!adjSet[e.source]) adjSet[e.source] = new Set();
+            if (!adjSet[e.target]) adjSet[e.target] = new Set();
+            adjSet[e.source].add(e.target);
+            adjSet[e.target].add(e.source);
+        });
+
+        // Iterations
+        const iterations = Math.min(200, 50 + graphNodes.length);
+        for (let iter = 0; iter < iterations; iter++) {
+            const temp = k * (1 - iter / iterations) * 0.5;
+            const disp = {};
+            graphNodes.forEach(n => { disp[n.id] = {x: 0, y: 0}; });
+
+            // Repulsive forces
+            for (let i = 0; i < graphNodes.length; i++) {
+                for (let j = i + 1; j < graphNodes.length; j++) {
+                    const ni = graphNodes[i].id, nj = graphNodes[j].id;
+                    const pi = nodePositions[ni], pj = nodePositions[nj];
+                    let dx = pi.x - pj.x, dy = pi.y - pj.y;
+                    const dist = Math.max(Math.sqrt(dx*dx + dy*dy), 0.01);
+                    const force = k * k / dist * 0.5;
+                    dx = dx / dist * force;
+                    dy = dy / dist * force;
+                    disp[ni].x += dx; disp[ni].y += dy;
+                    disp[nj].x -= dx; disp[nj].y -= dy;
+                }
+            }
+
+            // Attractive forces (edges)
+            graphEdges.forEach(e => {
+                const pi = nodePositions[e.source], pj = nodePositions[e.target];
+                if (!pi || !pj) return;
+                let dx = pi.x - pj.x, dy = pi.y - pj.y;
+                const dist = Math.max(Math.sqrt(dx*dx + dy*dy), 0.01);
+                const force = dist / k * (e.weight || 1) * 0.3;
+                dx = dx / dist * force;
+                dy = dy / dist * force;
+                disp[e.source].x -= dx; disp[e.source].y -= dy;
+                disp[e.target].x += dx; disp[e.target].y += dy;
+            });
+
+            // Community attraction (same community nodes attract slightly)
+            for (let i = 0; i < graphNodes.length; i++) {
+                for (let j = i + 1; j < graphNodes.length; j++) {
+                    if (graphNodes[i].community === graphNodes[j].community) {
+                        const ni = graphNodes[i].id, nj = graphNodes[j].id;
+                        const pi = nodePositions[ni], pj = nodePositions[nj];
+                        let dx = pi.x - pj.x, dy = pi.y - pj.y;
+                        const dist = Math.max(Math.sqrt(dx*dx + dy*dy), 0.01);
+                        const force = dist * 0.01;
+                        dx = dx / dist * force;
+                        dy = dy / dist * force;
+                        disp[ni].x -= dx; disp[ni].y -= dy;
+                        disp[nj].x += dx; disp[nj].y += dy;
+                    }
+                }
+            }
+
+            // Apply
+            graphNodes.forEach(n => {
+                const d = disp[n.id];
+                const dist = Math.max(Math.sqrt(d.x*d.x + d.y*d.y), 0.01);
+                const pos = nodePositions[n.id];
+                pos.x += d.x / dist * Math.min(dist, temp);
+                pos.y += d.y / dist * Math.min(dist, temp);
+                pos.x = Math.max(40, Math.min(w - 40, pos.x));
+                pos.y = Math.max(40, Math.min(h - 40, pos.y));
+            });
+        }
+    }
+    drawGraph();
+}
+
+function getNodeSize(node) {
+    const metric = document.getElementById('size-select').value;
+    const maxMap = {centrality: 0, degree: 0, occurrences: 0};
+    graphNodes.forEach(n => {
+        maxMap.centrality = Math.max(maxMap.centrality, n.centrality || 0);
+        maxMap.degree = Math.max(maxMap.degree, n.degree || 0);
+        maxMap.occurrences = Math.max(maxMap.occurrences, n.occurrences || 0);
+    });
+    const val = node[metric] || 0;
+    const maxVal = maxMap[metric] || 1;
+    return 4 + (val / maxVal) * 20;
+}
+
+function drawGraph() {
+    const canvas = document.getElementById('kg-canvas');
+    const ctx = canvas.getContext('2d');
+    const w = canvas.width, h = canvas.height;
+
+    ctx.clearRect(0, 0, w, h);
+    ctx.save();
+    ctx.translate(panOffset.x, panOffset.y);
+    ctx.scale(scale, scale);
+
+    // Draw edges
+    ctx.globalAlpha = 0.2;
+    const maxWeight = Math.max(...graphEdges.map(e => e.weight || 1), 1);
+    graphEdges.forEach(e => {
+        const ps = nodePositions[e.source], pt = nodePositions[e.target];
+        if (!ps || !pt) return;
+        ctx.beginPath();
+        ctx.moveTo(ps.x, ps.y);
+        ctx.lineTo(pt.x, pt.y);
+        ctx.strokeStyle = '#475569';
+        ctx.lineWidth = 0.5 + (e.weight / maxWeight) * 2;
+        ctx.stroke();
+    });
+    ctx.globalAlpha = 1;
+
+    // Draw nodes
+    graphNodes.forEach(n => {
+        const pos = nodePositions[n.id];
+        if (!pos) return;
+        const r = getNodeSize(n);
+        const color = COMM_COLORS[(n.community || 0) % COMM_COLORS.length];
+
+        ctx.beginPath();
+        ctx.arc(pos.x, pos.y, r, 0, Math.PI * 2);
+        ctx.fillStyle = color + (n.id === hoveredNode ? 'ff' : '99');
+        ctx.fill();
+        if (n.id === hoveredNode) {
+            ctx.strokeStyle = '#fff';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+        }
+
+        // Label (only for larger nodes or hovered)
+        if (r > 8 || n.id === hoveredNode) {
+            ctx.fillStyle = '#e2e8f0';
+            ctx.font = `${Math.max(9, r * 0.7)}px -apple-system, sans-serif`;
+            ctx.textAlign = 'center';
+            ctx.fillText(n.label || n.id, pos.x, pos.y + r + 12);
+        }
+    });
+
+    ctx.restore();
+}
+
+// ── Canvas interaction ──────────────────────────────────────────
+function setupCanvasEvents() {
+    const canvas = document.getElementById('kg-canvas');
+    const tooltip = document.getElementById('tooltip');
+
+    canvas.addEventListener('mousemove', e => {
+        const rect = canvas.getBoundingClientRect();
+        const mx = (e.clientX - rect.left - panOffset.x) / scale;
+        const my = (e.clientY - rect.top - panOffset.y) / scale;
+
+        if (draggingNode) {
+            nodePositions[draggingNode].x = mx;
+            nodePositions[draggingNode].y = my;
+            drawGraph();
+            return;
+        }
+
+        if (isPanning) {
+            panOffset.x += e.clientX - panStart.x;
+            panOffset.y += e.clientY - panStart.y;
+            panStart = {x: e.clientX, y: e.clientY};
+            drawGraph();
+            return;
+        }
+
+        // Hit test
+        let found = null;
+        for (const n of graphNodes) {
+            const pos = nodePositions[n.id];
+            if (!pos) continue;
+            const dx = mx - pos.x, dy = my - pos.y;
+            const r = getNodeSize(n) + 4;
+            if (dx*dx + dy*dy < r*r) { found = n; break; }
+        }
+
+        if (found) {
+            hoveredNode = found.id;
+            canvas.style.cursor = 'pointer';
+            tooltip.style.display = '';
+            tooltip.style.left = (e.clientX - canvas.getBoundingClientRect().left + 12) + 'px';
+            tooltip.style.top = (e.clientY - canvas.getBoundingClientRect().top - 10) + 'px';
+            tooltip.innerHTML = `<strong>${found.label}</strong><br>
+                Centrality: ${(found.centrality||0).toFixed(4)}<br>
+                Occurrences: ${found.occurrences||0}<br>
+                Degree: ${found.degree||0}<br>
+                Cluster: ${found.community||0}`;
+        } else {
+            hoveredNode = null;
+            canvas.style.cursor = 'grab';
+            tooltip.style.display = 'none';
+        }
+        drawGraph();
+    });
+
+    canvas.addEventListener('mousedown', e => {
+        if (hoveredNode) {
+            draggingNode = hoveredNode;
+            canvas.style.cursor = 'grabbing';
+        } else {
+            isPanning = true;
+            panStart = {x: e.clientX, y: e.clientY};
+            canvas.style.cursor = 'grabbing';
+        }
+    });
+
+    canvas.addEventListener('mouseup', () => {
+        draggingNode = null;
+        isPanning = false;
+    });
+
+    canvas.addEventListener('wheel', e => {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? 0.9 : 1.1;
+        scale *= delta;
+        scale = Math.max(0.1, Math.min(5, scale));
+        drawGraph();
+    });
+
+    // Resize
+    new ResizeObserver(() => {
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        drawGraph();
+    }).observe(canvas);
+}
+
+function changeLayout() { if (graphNodes.length) layoutNodes(); }
+function updateNodeSizes() { drawGraph(); }
+
+function exportGraph() {
+    if (!currentGraph) return alert('No active graph.');
+    const blob = new Blob([JSON.stringify(currentGraph, null, 2)], {type: 'application/json'});
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url; a.download = `knowledge-graph-${currentGraphId || 'export'}.json`;
+    a.click(); URL.revokeObjectURL(url);
+}
+
+// ── Init ────────────────────────────────────────────────────────
+setupCanvasEvents();
+loadGraphList();
+</script>
+{% endblock %}