ontoref/crates/ontoref-daemon/templates/pages/graph.html

{% extends "base.html" %}

{% block title %}Ontology Graph — Ontoref{% endblock title %}
{% block nav_graph %}active{% endblock nav_graph %}
{% block nav_group_knowledge %}active{% endblock nav_group_knowledge %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/cytoscape@3.30.2/dist/cytoscape.min.js"></script>
<script src="/assets/vendor/cytoscape-navigator.js"></script>
<style>
  #graph-root {
    display: flex;
    height: calc(100vh - 148px);
    min-height: 400px;
    gap: 0;
    user-select: none;
  }
  #graph-root:fullscreen,
  #graph-root:-webkit-full-screen {
    height: 100dvh;
    background: oklch(var(--b1));
  }

  #cy-wrapper {
    flex: 1 1 auto;
    min-width: 220px;
    overflow: hidden;
    border-radius: 0.5rem;
    position: relative;
  }
  #cy { width: 100%; height: 100%; }

  /* Floating controls — bottom-right */
  #cy-controls {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  #cy-controls button {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid oklch(var(--bc) / 0.18);
    background: oklch(var(--b2) / 0.90);
    color: oklch(var(--bc));
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  #cy-controls button:hover {
    background: oklch(var(--p) / 0.85);
    border-color: oklch(var(--p));
    color: oklch(var(--pc));
  }
  #cy-controls button svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    pointer-events: none;
  }
  .ctrl-divider {
    height: 1px;
    background: oklch(var(--bc) / 0.15);
    margin: 2px 0;
  }

  /* Minimap — bottom-left */
  #cy-nav {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 10;
    width: 160px;
    height: 96px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid oklch(var(--bc) / 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  /* navigator internals */
  #cy-nav canvas { display: block; }
  .cy-navigator-view {
    border: 2px solid oklch(var(--p) / 0.7) !important;
    background: oklch(var(--p) / 0.12) !important;
    border-radius: 2px !important;
  }

  #resize-handle {
    flex: 0 0 6px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 20;
    transition: background 0.15s;
  }
  #resize-handle:hover,
  #resize-handle.dragging { background: oklch(var(--p) / 0.5); }
  #resize-handle::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 40px;
    border-radius: 99px;
    background: oklch(var(--bc) / 0.25);
  }

  #detail-panel {
    flex: 0 0 300px;
    min-width: 160px;
    max-width: 60%;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0.5rem;
  }
</style>
{% endblock head %}

{% block content %}
<input type="hidden" id="graph-slug" value="{% if slug %}{{ slug }}{% endif %}">

<!-- Legend modal -->
<dialog id="legend-modal" class="modal">
  <div class="modal-box w-11/12 max-w-2xl">
    <div class="flex justify-between items-center mb-5">
      <h3 class="font-bold text-lg">Graph Legend</h3>
      <form method="dialog"><button class="btn btn-sm btn-circle btn-ghost">✕</button></form>
    </div>
    <div class="space-y-6 text-sm overflow-y-auto max-h-[70vh] pr-1">

      <!-- Levels -->
      <section>
        <p class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-3">Levels — abstraction of knowledge</p>
        <div class="space-y-3">
          <div class="flex items-start gap-3">
            <span class="btn btn-xs btn-warning flex-shrink-0 pointer-events-none select-none" style="min-width:80px">◆ Axiom</span>
            <div>
              <p class="font-medium leading-snug">Fundamental invariant</p>
              <p class="text-base-content/60 leading-relaxed mt-0.5">What the project holds to be unconditionally true. Axioms cannot change without a formal ADR. They anchor the rest of the graph — every Tension and Practice traces back to at least one Axiom.</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <span class="btn btn-xs btn-error flex-shrink-0 pointer-events-none select-none" style="min-width:80px">● Tension</span>
            <div>
              <p class="font-medium leading-snug">Active contradiction</p>
              <p class="text-base-content/60 leading-relaxed mt-0.5">A force the project holds without resolving. Tensions are not problems to eliminate — they are productive oppositions that generate direction. Each Practice exists because a Tension demands a response.</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <span class="btn btn-xs btn-success flex-shrink-0 pointer-events-none select-none" style="min-width:80px">▪ Practice</span>
            <div>
              <p class="font-medium leading-snug">Concrete approach</p>
              <p class="text-base-content/60 leading-relaxed mt-0.5">How the project operationalizes a Tension. Practices are the most mutable layer — they evolve as the project learns. They map directly to artifacts, ADRs, and code.</p>
            </div>
          </div>
        </div>
      </section>

      <div class="divider my-0"></div>

      <!-- Poles -->
      <section>
        <p class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-3">Poles — which force drives the node</p>
        <div class="space-y-3">
          <div class="flex items-start gap-3">
            <span class="btn btn-xs flex-shrink-0 pointer-events-none select-none" style="background:#f59e0b;color:#111;border-color:#f59e0b;min-width:64px">Yang</span>
            <div>
              <p class="font-medium leading-snug">Active · building · outward</p>
              <p class="text-base-content/60 leading-relaxed mt-0.5">Nodes that assert, create, or push outward. Yang principles drive the definition of what a project <em>does</em> and what it makes available to others.</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <span class="btn btn-xs flex-shrink-0 pointer-events-none select-none" style="background:#3b82f6;color:#fff;border-color:#3b82f6;min-width:64px">Yin</span>
            <div>
              <p class="font-medium leading-snug">Receptive · constraining · protective</p>
              <p class="text-base-content/60 leading-relaxed mt-0.5">Nodes that receive, limit, or protect. Yin principles define what the project <em>refuses</em>, what boundaries it holds, and what it conserves.</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <span class="btn btn-xs flex-shrink-0 pointer-events-none select-none" style="background:#8b5cf6;color:#fff;border-color:#8b5cf6;min-width:64px">Spiral</span>
            <div>
              <p class="font-medium leading-snug">Dialectical · both/and · evolving</p>
              <p class="text-base-content/60 leading-relaxed mt-0.5">Nodes that hold both sides simultaneously and move through the tension. Spiral principles cannot be resolved into Yang or Yin — they are the engine of change itself.</p>
            </div>
          </div>
        </div>
      </section>

      <div class="divider my-0"></div>

      <!-- Layouts -->
      <section>
        <p class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-3">Layouts — how the graph is arranged</p>
        <div class="space-y-3">
          <div class="flex items-start gap-3">
            <div class="join flex-shrink-0">
              <span class="join-item btn btn-xs btn-primary pointer-events-none select-none">Hierarchy</span>
            </div>
            <div>
              <p class="font-medium leading-snug">Breadth-first top-down</p>
              <p class="text-base-content/60 leading-relaxed mt-0.5">Axioms at the root, Tensions in the middle, Practices at the leaves. Use this to trace causality: which invariants drive which contradictions, and which contradictions demand which responses.</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <div class="join flex-shrink-0">
              <span class="join-item btn btn-xs btn-ghost pointer-events-none select-none">Force</span>
            </div>
            <div>
              <p class="font-medium leading-snug">Physics simulation (COSE)</p>
              <p class="text-base-content/60 leading-relaxed mt-0.5">Nodes are pulled together by edges and pushed apart by repulsion. Heavily connected nodes cluster at the center. Use this to find hubs — nodes that influence many others — and isolated areas that may be undertested or underdocumented.</p>
            </div>
          </div>
        </div>
      </section>

      <div class="divider my-0"></div>

      <!-- Visual cues -->
      <section>
        <p class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-3">Visual cues</p>
        <div class="space-y-2.5">
          <div class="flex items-center gap-3">
            <span class="inline-block w-4 h-4 rounded-sm flex-shrink-0" style="background:#f59e0b;outline:3px solid #f59e0b;outline-offset:1px"></span>
            <p class="text-base-content/70"><span class="font-medium text-base-content">Gold border</span> — invariant node. Cannot be modified without creating a formal ADR.</p>
          </div>
          <div class="flex items-center gap-3">
            <span class="inline-block w-4 h-4 rounded-sm flex-shrink-0" style="background:#6b7280;outline:2px solid #fff;outline-offset:1px"></span>
            <p class="text-base-content/70"><span class="font-medium text-base-content">White border</span> — currently selected node.</p>
          </div>
          <div class="flex items-center gap-3">
            <span class="inline-block w-4 h-4 rounded-sm flex-shrink-0 opacity-20" style="background:#6b7280"></span>
            <p class="text-base-content/70"><span class="font-medium text-base-content">Dimmed nodes</span> — not connected to the selected node. Click the canvas to clear.</p>
          </div>
        </div>
      </section>

      <div class="divider my-0"></div>

      <!-- Shortcuts -->
      <section>
        <p class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-3">Keyboard shortcuts</p>
        <div class="grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs">
          <div class="flex gap-2 items-center"><kbd class="kbd kbd-xs">f</kbd><span class="text-base-content/60">Fit all nodes in view</span></div>
          <div class="flex gap-2 items-center"><kbd class="kbd kbd-xs">+</kbd><span class="text-base-content/60">Zoom in</span></div>
          <div class="flex gap-2 items-center"><kbd class="kbd kbd-xs">g</kbd><span class="text-base-content/60">Toggle full screen</span></div>
          <div class="flex gap-2 items-center"><kbd class="kbd kbd-xs">−</kbd><span class="text-base-content/60">Zoom out</span></div>
          <div class="flex gap-2 items-center"><kbd class="kbd kbd-xs">Esc</kbd><span class="text-base-content/60">Close detail panel</span></div>
        </div>
      </section>

    </div>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

<!-- ADR modal -->
<dialog id="adr-modal" class="modal">
  <div class="modal-box w-11/12 max-w-2xl">
    <div class="flex justify-between items-center mb-4">
      <h3 class="font-bold text-lg" id="adr-modal-title">ADR</h3>
      <form method="dialog"><button class="btn btn-sm btn-circle btn-ghost">✕</button></form>
    </div>
    <div id="adr-modal-body" class="text-sm space-y-3 overflow-y-auto max-h-[60vh]">
      <span class="loading loading-spinner loading-sm"></span>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>

<!-- Toolbar -->
<div class="mb-2 flex flex-wrap items-center justify-between gap-2 text-sm">
  <h1 class="text-xl font-bold">Ontology Graph</h1>
  <div class="flex flex-wrap gap-1 items-center">
    <!-- Level filters (toggle = hide that level) -->
    <button class="filter-btn btn btn-xs btn-warning"   data-level="Axiom">◆ Axiom</button>
    <button class="filter-btn btn btn-xs btn-error"     data-level="Tension">● Tension</button>
    <button class="filter-btn btn btn-xs btn-success"   data-level="Practice">▪ Practice</button>
    <div class="w-px h-4 bg-base-content/20 mx-1"></div>
    <!-- Pole filters -->
    <button class="filter-btn btn btn-xs" style="background:#f59e0b;color:#111;border-color:#f59e0b" data-pole="Yang">Yang</button>
    <button class="filter-btn btn btn-xs" style="background:#3b82f6;color:#fff;border-color:#3b82f6" data-pole="Yin">Yin</button>
    <button class="filter-btn btn btn-xs" style="background:#8b5cf6;color:#fff;border-color:#8b5cf6" data-pole="Spiral">Spiral</button>
    <div class="w-px h-4 bg-base-content/20 mx-1"></div>
    <!-- Layout -->
    <div class="join">
      <button id="btn-bfs"  class="join-item btn btn-xs btn-primary">Hierarchy</button>
      <button id="btn-cose" class="join-item btn btn-xs btn-ghost">Force</button>
    </div>
    <button id="btn-reset" class="btn btn-xs btn-ghost">Reset</button>
    <button id="btn-legend" class="btn btn-xs btn-ghost" title="Graph legend">?</button>
  </div>
</div>

<!-- Split: graph | drag handle | detail -->
<div id="graph-root">
  <div id="cy-wrapper" class="bg-base-200">
    <div id="cy"></div>

    <!-- Minimap -->
    <div id="cy-nav"></div>

    <!-- Floating zoom + nav controls -->
    <div id="cy-controls">
      <button id="cy-zoom-in"   title="Zoom in">+</button>
      <button id="cy-zoom-out"  title="Zoom out">−</button>
      <div class="ctrl-divider"></div>
      <button id="cy-fit"       title="Fit to view"></button>
      <button id="cy-fullscreen" title="Full screen"></button>
    </div>
  </div>

  <div id="resize-handle"></div>

  <div id="detail-panel" class="bg-base-200 p-4 hidden">
    <div class="flex justify-between items-start mb-2">
      <h3 class="font-bold text-base leading-tight" id="d-name"></h3>
      <button id="btn-close-panel" class="btn btn-xs btn-ghost ml-2 flex-shrink-0">✕</button>
    </div>
    <div class="flex flex-wrap gap-1 mb-2" id="d-badges"></div>
    <p class="text-xs text-base-content/70 mb-3 leading-relaxed" id="d-description"></p>
    <div id="d-artifacts" class="hidden mb-3">
      <p class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-1">Artifacts</p>
      <ul id="d-artifact-list" class="text-xs font-mono text-base-content/60 space-y-1 break-all"></ul>
    </div>
    <div id="d-adrs" class="hidden mb-3">
      <p class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-1">Validated by</p>
      <ul id="d-adr-list" class="text-xs font-mono space-y-1"></ul>
    </div>
    <div id="d-edges" class="hidden">
      <p class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-1">Connections</p>
      <ul id="d-edge-list" class="text-xs text-base-content/60 space-y-1"></ul>
    </div>
  </div>
</div>
{% endblock content %}

{% block scripts %}
<script>
const GRAPH = {{ graph_json | safe }};

// ── Icons ─────────────────────────────────────────────────────
const SVG_FIT = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>`;
const SVG_FS_ENTER = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>`;
const SVG_FS_EXIT  = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/></svg>`;

document.getElementById('cy-fit').innerHTML        = SVG_FIT;
document.getElementById('cy-fullscreen').innerHTML = SVG_FS_ENTER;

// ── Graph data ────────────────────────────────────────────────
const POLE_COLOR = { Yang: "#f59e0b", Yin: "#3b82f6", Spiral: "#8b5cf6" };
const LEVEL_SHAPE = {
  Axiom:    "diamond",
  Tension:  "ellipse",
  Practice: "round-rectangle",
  Project:  "hexagon",
  Moment:   "triangle",
};
const EDGE_STYLE = {
  ManifestsIn: { color: "#6b7280" },
  DependsOn:   { color: "#ef4444" },
  Resolves:    { color: "#22c55e" },
  Implies:     { color: "#f59e0b" },
  Complements: { color: "#3b82f6" },
  Contradicts: { color: "#ec4899", dashed: true },
  TensionWith: { color: "#f97316", dashed: true },
  Contains:    { color: "#a3a3a3" },
  FlowsTo:     { color: "#06b6d4" },
  SpiralsWith: { color: "#8b5cf6" },
  LimitedBy:   { color: "#f43f5e" },
  ValidatedBy: { color: "#84cc16" },
};

const nodes = (GRAPH.nodes || []).map(n => ({
  data: {
    id:             n.id,
    label:          n.name || n.id,
    pole:           n.pole || "",
    level:          n.level || "",
    description:    n.description || "",
    invariant:      !!n.invariant,
    artifact_paths: n.artifact_paths || [],
    adrs:           n.adrs || [],
    color:          POLE_COLOR[n.pole] || "#6b7280",
    shape:          LEVEL_SHAPE[n.level] || "ellipse",
  }
}));

const edges = (GRAPH.edges || []).map(e => {
  const s = EDGE_STYLE[e.kind] || {};
  return {
    data: {
      id:     `${e.from}__${e.to}__${e.kind}`,
      source: e.from,
      target: e.to,
      kind:   e.kind || "",
      note:   e.note || "",
      color:  s.color || "#6b7280",
      dashed: !!s.dashed,
    }
  };
});

// ── Cytoscape ─────────────────────────────────────────────────
const cy = cytoscape({
  container: document.getElementById("cy"),
  elements: { nodes, edges },
  style: [
    {
      selector: "node",
      style: {
        "background-color":        "data(color)",
        "shape":                   "data(shape)",
        "width":                   32,
        "height":                  32,
        "border-width":            2,
        "border-color":            "#111827",
        "label":                   "data(label)",
        "color":                   "#f9fafb",
        "font-size":               "10px",
        "font-family":             "ui-sans-serif, system-ui, sans-serif",
        "font-weight":             500,
        "text-valign":             "bottom",
        "text-halign":             "center",
        "text-margin-y":           6,
        "text-wrap":               "wrap",
        "text-max-width":          "100px",
        "text-background-color":   "#0f172a",
        "text-background-opacity": 0.85,
        "text-background-shape":   "round-rectangle",
        "text-background-padding": "3px",
        "text-outline-width":      0,
      }
    },
    {
      selector: "node[?invariant]",
      style: { "border-color": "#f59e0b", "border-width": 3 }
    },
    {
      selector: "node:selected",
      style: { "border-color": "#ffffff", "border-width": 3 }
    },
    {
      selector: "node.faded",
      style: { "opacity": 0.2, "text-opacity": 0.2 }
    },
    {
      selector: "edge",
      style: {
        "line-color":         "data(color)",
        "target-arrow-color": "data(color)",
        "target-arrow-shape": "triangle",
        "curve-style":        "bezier",
        "width":              1.5,
        "arrow-scale":        0.8,
        "opacity":            0.6,
      }
    },
    {
      selector: "edge[?dashed]",
      style: { "line-style": "dashed", "line-dash-pattern": [6, 4] }
    },
    {
      selector: "edge.faded",
      style: { "opacity": 0.05 }
    },
    {
      selector: "edge.highlighted",
      style: {
        "opacity":  1,
        "width":    2.5,
        "label":    "data(kind)",
        "font-size": "9px",
        "color":    "#e5e7eb",
        "text-background-color":   "#0f172a",
        "text-background-opacity": 0.85,
        "text-background-padding": "2px",
        "text-background-shape":   "round-rectangle",
      }
    },
  ],
  layout: buildBfsLayout(false),
  wheelSensitivity: 0.3,
  boxSelectionEnabled: false,
  minZoom: 0.1,
  maxZoom: 4,
});

// ── Minimap (navigator) ───────────────────────────────────────
if (typeof cy.navigator === 'function') {
  cy.navigator({
    container: document.getElementById('cy-nav'),
    viewLiveFramerate: 0,
    thumbnailEventFramerate: 30,
    thumbnailLiveFramerate: false,
    dblClickDelay: 200,
    removeCustomContainer: false,
    rerenderDelay: 100,
  });
} else {
  document.getElementById('cy-nav').style.display = 'none';
}

// ── Layout builders ───────────────────────────────────────────
function buildBfsLayout(animate) {
  return {
    name: "breadthfirst",
    directed: true,
    animate: !!animate,
    animationDuration: 500,
    animationEasing: 'ease-in-out-cubic',
    spacingFactor: 2.2,
    padding: 48,
    fit: true,
    avoidOverlap: true,
    nodeDimensionsIncludeLabels: true,
  };
}

function buildCoseLayout() {
  return {
    name:             "cose",
    animate:          false,
    randomize:        true,
    componentSpacing: 120,
    nodeRepulsion:    800000,
    nodeOverlap:      80,
    idealEdgeLength:  220,
    edgeElasticity:   20,
    nestingFactor:    1.0,
    gravity:          2,
    numIter:          3000,
    initialTemp:      2000,
    coolingFactor:    0.99,
    minTemp:          1.0,
    fit:              true,
    padding:          60,
  };
}

// ── Zoom at cursor ────────────────────────────────────────────
// Track last known mouse position over the canvas for cursor-centered zoom.
let lastCursorViewport = null;

document.getElementById('cy').addEventListener('mousemove', e => {
  const rect = e.currentTarget.getBoundingClientRect();
  lastCursorViewport = { x: e.clientX - rect.left, y: e.clientY - rect.top };
});
document.getElementById('cy').addEventListener('mouseleave', () => {
  lastCursorViewport = null;
});

function zoomAt(factor) {
  const oldZoom = cy.zoom();
  const newZoom = Math.max(cy.minZoom(), Math.min(cy.maxZoom(), oldZoom * factor));
  if (newZoom === oldZoom) return;

  if (lastCursorViewport) {
    const pan = cy.pan();
    const { x, y } = lastCursorViewport;
    cy.animate({
      zoom: newZoom,
      pan: {
        x: x - (x - pan.x) * (newZoom / oldZoom),
        y: y - (y - pan.y) * (newZoom / oldZoom),
      },
    }, { duration: 180, easing: 'ease-in-out-quad' });
  } else {
    cy.animate({ zoom: newZoom }, { duration: 180, easing: 'ease-in-out-quad' });
  }
}

// ── Floating controls ─────────────────────────────────────────
document.getElementById('cy-zoom-in').addEventListener('click',  () => zoomAt(1.35));
document.getElementById('cy-zoom-out').addEventListener('click', () => zoomAt(1 / 1.35));

document.getElementById('cy-fit').addEventListener('click', () => {
  cy.animate({ fit: { eles: cy.elements(':visible'), padding: 48 } }, { duration: 350, easing: 'ease-in-out-cubic' });
});

// ── Full-screen ───────────────────────────────────────────────
const graphRoot     = document.getElementById('graph-root');
const btnFullscreen = document.getElementById('cy-fullscreen');

function isFullscreen() {
  return !!(document.fullscreenElement || document.webkitFullscreenElement);
}

btnFullscreen.addEventListener('click', () => {
  if (!isFullscreen()) {
    const req = graphRoot.requestFullscreen || graphRoot.webkitRequestFullscreen;
    if (req) req.call(graphRoot);
  } else {
    const exit = document.exitFullscreen || document.webkitExitFullscreen;
    if (exit) exit.call(document);
  }
});

function onFullscreenChange() {
  const fs = isFullscreen();
  btnFullscreen.innerHTML = fs ? SVG_FS_EXIT : SVG_FS_ENTER;
  btnFullscreen.title     = fs ? 'Exit full screen' : 'Full screen';
  requestAnimationFrame(() => { cy.resize(); cy.fit(undefined, 48); });
}

document.addEventListener('fullscreenchange',       onFullscreenChange);
document.addEventListener('webkitfullscreenchange', onFullscreenChange);

// ── Filters ───────────────────────────────────────────────────
const hiddenLevels = new Set();
const hiddenPoles  = new Set();

function applyFilters() {
  cy.nodes().forEach(n => {
    const hide = hiddenLevels.has(n.data("level")) || hiddenPoles.has(n.data("pole"));
    if (hide) n.hide(); else n.show();
  });
  cy.edges().forEach(e => {
    if (e.source().hidden() || e.target().hidden()) e.hide();
    else e.show();
  });
}

document.querySelectorAll(".filter-btn[data-level]").forEach(btn => {
  btn.addEventListener("click", () => {
    const level = btn.dataset.level;
    if (hiddenLevels.has(level)) {
      hiddenLevels.delete(level);
      btn.style.opacity = "1";
      btn.style.textDecoration = "";
    } else {
      hiddenLevels.add(level);
      btn.style.opacity = "0.4";
      btn.style.textDecoration = "line-through";
    }
    applyFilters();
  });
});

document.querySelectorAll(".filter-btn[data-pole]").forEach(btn => {
  btn.addEventListener("click", () => {
    const pole = btn.dataset.pole;
    if (hiddenPoles.has(pole)) {
      hiddenPoles.delete(pole);
      btn.style.opacity = "1";
      btn.style.textDecoration = "";
    } else {
      hiddenPoles.add(pole);
      btn.style.opacity = "0.4";
      btn.style.textDecoration = "line-through";
    }
    applyFilters();
  });
});

// ── Layout buttons ────────────────────────────────────────────
const btnBfs  = document.getElementById("btn-bfs");
const btnCose = document.getElementById("btn-cose");

btnBfs.addEventListener("click", () => {
  cy.layout(buildBfsLayout(true)).run();
  btnBfs.classList.add("btn-primary");  btnBfs.classList.remove("btn-ghost");
  btnCose.classList.add("btn-ghost");   btnCose.classList.remove("btn-primary");
});

btnCose.addEventListener("click", () => {
  cy.layout(buildCoseLayout()).run();
  btnCose.classList.add("btn-primary"); btnCose.classList.remove("btn-ghost");
  btnBfs.classList.add("btn-ghost");    btnBfs.classList.remove("btn-primary");
});

document.getElementById("btn-legend").addEventListener("click", () => {
  document.getElementById("legend-modal").showModal();
});

document.getElementById("btn-reset").addEventListener("click", () => {
  cy.elements().removeClass("faded highlighted");
  cy.animate(
    { fit: { eles: cy.elements(':visible'), padding: 48 } },
    { duration: 400, easing: 'ease-in-out-cubic' }
  );
  closePanel();
});

// ── Node detail panel ─────────────────────────────────────────
const panel      = document.getElementById("detail-panel");
const dName      = document.getElementById("d-name");
const dBadges    = document.getElementById("d-badges");
const dDesc      = document.getElementById("d-description");
const dArtifacts = document.getElementById("d-artifacts");
const dList      = document.getElementById("d-artifact-list");
const dAdrs      = document.getElementById("d-adrs");
const dAdrList   = document.getElementById("d-adr-list");
const dEdges     = document.getElementById("d-edges");
const dEdgeList  = document.getElementById("d-edge-list");

function closePanel() {
  panel.classList.add("hidden");
  cy.elements().removeClass("faded highlighted");
}

cy.on("tap", "node", evt => {
  const node = evt.target;
  const d    = node.data();

  panel.classList.remove("hidden");

  dName.textContent = d.label;
  dBadges.innerHTML =
    `<span class="badge badge-xs badge-outline">${d.level}</span>` +
    `<span class="badge badge-xs" style="background:${d.color};color:#111;border:none">${d.pole}</span>` +
    (d.invariant ? `<span class="badge badge-xs badge-warning">invariant</span>` : "");

  dDesc.textContent = d.description;

  if (d.artifact_paths.length) {
    dArtifacts.classList.remove("hidden");
    dList.innerHTML = d.artifact_paths.map(p =>
      `<li class="break-all"><code>${p}</code></li>`
    ).join("");
  } else {
    dArtifacts.classList.add("hidden");
  }

  if (d.adrs.length) {
    dAdrs.classList.remove("hidden");
    dAdrList.innerHTML = d.adrs.map(a =>
      `<li><span class="text-success mr-1">◆</span>` +
      `<button class="adr-link font-mono text-base-content/70 hover:text-primary underline-offset-2 hover:underline cursor-pointer bg-transparent border-none p-0" data-adr="${a}">${a}</button></li>`
    ).join("");
  } else {
    dAdrs.classList.add("hidden");
  }

  const conn = node.connectedEdges();
  if (conn.length) {
    dEdges.classList.remove("hidden");
    dEdgeList.innerHTML = conn.map(e => {
      const isSrc = e.data("source") === d.id;
      const other = isSrc
        ? cy.getElementById(e.data("target")).data("label")
        : cy.getElementById(e.data("source")).data("label");
      const arrow = isSrc ? "→" : "←";
      return `<li class="flex gap-1"><span class="opacity-40 flex-shrink-0">${arrow}</span>` +
             `<span class="text-base-content/80 flex-shrink-0">${e.data("kind")}</span>` +
             `<span class="opacity-60 break-all">${other}</span></li>`;
    }).join("");
  } else {
    dEdges.classList.add("hidden");
  }

  // Dim non-neighbours
  cy.elements().addClass("faded").removeClass("highlighted");
  node.closedNeighborhood().removeClass("faded").addClass("highlighted");

  // Animate center + zoom to selected node
  cy.animate(
    { center: { eles: node }, zoom: Math.max(cy.zoom(), 1.2) },
    { duration: 350, easing: 'ease-in-out-cubic' }
  );
});

cy.on("tap", evt => {
  if (evt.target === cy) closePanel();
});

document.getElementById("btn-close-panel").addEventListener("click", closePanel);

// ── Resizable split ───────────────────────────────────────────
const handle    = document.getElementById("resize-handle");
const cyWrapper = document.getElementById("cy-wrapper");

let resizing = false;

handle.addEventListener("mousedown", e => {
  resizing = true;
  handle.classList.add("dragging");
  document.body.style.cursor = "col-resize";
  e.preventDefault();
});

document.addEventListener("mousemove", e => {
  if (!resizing) return;
  const rect = graphRoot.getBoundingClientRect();
  const hW   = handle.offsetWidth;
  const cyW  = Math.max(220, e.clientX - rect.left);
  const panW = Math.max(160, rect.width - cyW - hW);
  if (cyW + panW + hW <= rect.width + 2) {
    cyWrapper.style.flex = `0 0 ${cyW}px`;
    if (!panel.classList.contains("hidden")) {
      panel.style.flex = `0 0 ${panW}px`;
    }
    cy.resize();
  }
});

document.addEventListener("mouseup", () => {
  if (!resizing) return;
  resizing = false;
  handle.classList.remove("dragging");
  document.body.style.cursor = "";
});

// ── ADR modal ─────────────────────────────────────────────────
const adrModal      = document.getElementById("adr-modal");
const adrModalTitle = document.getElementById("adr-modal-title");
const adrModalBody  = document.getElementById("adr-modal-body");
const GRAPH_SLUG    = document.getElementById("graph-slug").value || null;

function renderAdrBody(data) {
  if (data.error) {
    return `<p class="text-error">${data.error}</p>`;
  }
  const rows = Object.entries(data)
    .filter(([k]) => k !== "id")
    .map(([k, v]) => {
      const label = k.replace(/_/g, " ");
      let val;
      if (Array.isArray(v)) {
        if (v.length === 0) return null;
        val = `<ul class="list-disc pl-4 space-y-0.5">${v.map(item =>
          typeof item === "object"
            ? `<li><pre class="text-xs whitespace-pre-wrap">${JSON.stringify(item, null, 2)}</pre></li>`
            : `<li>${item}</li>`
        ).join("")}</ul>`;
      } else if (typeof v === "object" && v !== null) {
        val = `<pre class="text-xs whitespace-pre-wrap bg-base-300 p-2 rounded">${JSON.stringify(v, null, 2)}</pre>`;
      } else {
        val = `<span class="text-base-content/80">${v}</span>`;
      }
      return `<div><p class="text-xs font-semibold text-base-content/40 uppercase tracking-wider mb-0.5">${label}</p>${val}</div>`;
    })
    .filter(Boolean)
    .join("");
  return rows || `<p class="text-base-content/50">No details available.</p>`;
}

async function fetchAdr(id) {
  adrModalTitle.textContent = id;
  adrModalBody.innerHTML = `<span class="loading loading-spinner loading-sm"></span>`;
  adrModal.showModal();

  const slug = GRAPH_SLUG ? `&slug=${encodeURIComponent(GRAPH_SLUG)}` : "";
  try {
    const res  = await fetch(`/api/adr/${encodeURIComponent(id)}?${slug}`);
    const data = await res.json();
    adrModalBody.innerHTML = renderAdrBody(data);
  } catch (err) {
    adrModalBody.innerHTML = `<p class="text-error">Failed to load ADR: ${err}</p>`;
  }
}

document.addEventListener("click", e => {
  const btn = e.target.closest(".adr-link");
  if (btn) fetchAdr(btn.dataset.adr);
});

// ── Keyboard shortcuts ────────────────────────────────────────
document.addEventListener('keydown', e => {
  // Skip when focus is inside an input, textarea, or dialog
  const tag = document.activeElement?.tagName;
  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
  if (document.querySelector('dialog[open]')) return;

  switch (e.key) {
    case 'f':
    case 'F':
      e.preventDefault();
      cy.animate({ fit: { eles: cy.elements(':visible'), padding: 48 } }, { duration: 350, easing: 'ease-in-out-cubic' });
      break;
    case '+':
    case '=':
      e.preventDefault();
      zoomAt(1.35);
      break;
    case '-':
      e.preventDefault();
      zoomAt(1 / 1.35);
      break;
    case 'g':
    case 'G':
      e.preventDefault();
      btnFullscreen.click();
      break;
    case 'Escape':
      // Only close panel; fullscreen exit is handled natively by the browser
      if (!isFullscreen() && !panel.classList.contains('hidden')) {
        e.preventDefault();
        closePanel();
      }
      break;
  }
});
</script>
{% endblock scripts %}