@cliangdev/flux-plugin 0.2.0 → 0.3.0

package/src/dashboard/public/app.js

@@ -0,0 +1,869 @@
+/**
+ * Flux Dashboard Client Application
+ */
+
+// State
+let treeData = [];
+let tagsData = [];
+let selectedRef = null;
+let activeTag = "All";
+let statusFilter = "";
+let searchQuery = "";
+let ws = null;
+let reconnectAttempts = 0;
+let projectKey = "flux-dashboard";
+const MAX_RECONNECT_ATTEMPTS = 10;
+const RECONNECT_BASE_DELAY = 1000;
+
+// DOM Elements
+const elements = {
+  tree: document.getElementById("tree"),
+  tagsList: document.getElementById("tags-list"),
+  contentHeader: document.getElementById("content-header"),
+  contentBody: document.getElementById("content-body"),
+  connectionStatus: document.getElementById("connection-status"),
+  search: document.getElementById("search"),
+  statusFilter: document.getElementById("status-filter"),
+  themeToggle: document.getElementById("theme-toggle"),
+  themeIcon: document.getElementById("theme-icon"),
+  sidebar: document.getElementById("sidebar"),
+  sidebarResize: document.getElementById("sidebar-resize"),
+  depGraphToggle: document.getElementById("dep-graph-toggle"),
+  depGraphOverlay: document.getElementById("dep-graph-overlay"),
+  depGraphClose: document.getElementById("dep-graph-close"),
+  depGraphSvg: document.getElementById("dep-graph-svg"),
+  depTypeFilter: document.getElementById("dep-type-filter"),
+};
+
+// Initialize
+document.addEventListener("DOMContentLoaded", () => {
+  initTheme();
+  initSidebarResize();
+  connectWebSocket();
+  loadData();
+  setupEventListeners();
+});
+
+// Theme Management
+function initTheme() {
+  loadProjectKey().then(() => {
+    const savedTheme = localStorage.getItem(`${projectKey}-theme`);
+    if (savedTheme === "dark") {
+      setTheme("dark");
+    } else {
+      setTheme("light");
+    }
+  });
+}
+
+async function loadProjectKey() {
+  try {
+    const response = await fetch("/api/tree");
+    const data = await response.json();
+    if (data.length > 0 && data[0].projectId) {
+      projectKey = `flux-${data[0].projectId}`;
+    }
+  } catch {}
+}
+
+function setTheme(theme) {
+  document.documentElement.setAttribute("data-theme", theme);
+  elements.themeIcon.innerHTML = theme === "dark" ? "☼" : "☾";
+  localStorage.setItem(`${projectKey}-theme`, theme);
+}
+
+function toggleTheme() {
+  const currentTheme = document.documentElement.getAttribute("data-theme");
+  setTheme(currentTheme === "dark" ? "light" : "dark");
+}
+
+// Sidebar Resize
+function initSidebarResize() {
+  const savedWidth = localStorage.getItem(`${projectKey}-sidebar-width`);
+  if (savedWidth) {
+    elements.sidebar.style.width = `${savedWidth}px`;
+  }
+
+  let isResizing = false;
+
+  elements.sidebarResize.addEventListener("mousedown", (e) => {
+    isResizing = true;
+    elements.sidebarResize.classList.add("dragging");
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    e.preventDefault();
+  });
+
+  document.addEventListener("mousemove", (e) => {
+    if (!isResizing) return;
+
+    const newWidth = e.clientX;
+    if (newWidth >= 200 && newWidth <= 500) {
+      elements.sidebar.style.width = `${newWidth}px`;
+    }
+  });
+
+  document.addEventListener("mouseup", () => {
+    if (isResizing) {
+      isResizing = false;
+      elements.sidebarResize.classList.remove("dragging");
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      localStorage.setItem(
+        `${projectKey}-sidebar-width`,
+        elements.sidebar.offsetWidth,
+      );
+    }
+  });
+}
+
+// WebSocket Connection
+function connectWebSocket() {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  ws = new WebSocket(`${protocol}//${window.location.host}/ws`);
+
+  ws.onopen = () => {
+    reconnectAttempts = 0;
+    updateConnectionStatus("connected");
+  };
+
+  ws.onmessage = (event) => {
+    try {
+      const data = JSON.parse(event.data);
+      if (data.type === "update") {
+        loadData();
+        if (selectedRef) {
+          loadContent(selectedRef);
+        }
+      }
+    } catch (e) {
+      console.error("WebSocket message error:", e);
+    }
+  };
+
+  ws.onclose = () => {
+    updateConnectionStatus("disconnected");
+    attemptReconnect();
+  };
+
+  ws.onerror = () => {
+    updateConnectionStatus("disconnected");
+  };
+}
+
+function attemptReconnect() {
+  if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
+    return;
+  }
+
+  reconnectAttempts++;
+  updateConnectionStatus("reconnecting");
+
+  const delay = RECONNECT_BASE_DELAY * 2 ** (reconnectAttempts - 1);
+  setTimeout(() => {
+    if (ws.readyState === WebSocket.CLOSED) {
+      connectWebSocket();
+    }
+  }, delay);
+}
+
+function updateConnectionStatus(status) {
+  const el = elements.connectionStatus;
+  el.className = `status ${status}`;
+
+  switch (status) {
+    case "connected":
+      el.innerHTML = "&#9679; Connected";
+      break;
+    case "reconnecting":
+      el.innerHTML = "&#9680; Reconnecting...";
+      break;
+    case "disconnected":
+      el.innerHTML = "&#9675; Disconnected";
+      break;
+  }
+}
+
+// Data Loading
+async function loadData() {
+  try {
+    const [treeResponse, tagsResponse] = await Promise.all([
+      fetch("/api/tree"),
+      fetch("/api/tags"),
+    ]);
+
+    treeData = await treeResponse.json();
+    tagsData = await tagsResponse.json();
+
+    renderTags();
+    renderTree();
+  } catch (error) {
+    console.error("Failed to load data:", error);
+  }
+}
+
+async function loadContent(ref) {
+  selectedRef = ref;
+
+  try {
+    let endpoint;
+    if (ref.includes("-P")) {
+      endpoint = `/api/prd/${ref}`;
+    } else if (ref.includes("-E")) {
+      endpoint = `/api/epic/${ref}`;
+    } else {
+      endpoint = `/api/task/${ref}`;
+    }
+
+    const response = await fetch(endpoint);
+    const data = await response.json();
+
+    renderContent(data, ref);
+  } catch (error) {
+    console.error("Failed to load content:", error);
+    elements.contentBody.innerHTML = `<div class="empty-state"><p>Error loading content</p></div>`;
+  }
+}
+
+// Event Listeners
+function setupEventListeners() {
+  elements.search.addEventListener("input", (e) => {
+    searchQuery = e.target.value.toLowerCase();
+    renderTree();
+  });
+
+  elements.statusFilter.addEventListener("change", (e) => {
+    statusFilter = e.target.value;
+    renderTree();
+  });
+
+  elements.themeToggle.addEventListener("click", toggleTheme);
+
+  // Dependency graph events
+  elements.depGraphToggle.addEventListener("click", openDepGraph);
+  elements.depGraphClose.addEventListener("click", closeDepGraph);
+  elements.depGraphOverlay.addEventListener("click", (e) => {
+    if (e.target === elements.depGraphOverlay) {
+      closeDepGraph();
+    }
+  });
+  elements.depTypeFilter.addEventListener("change", renderDepGraph);
+
+  // Close on Escape
+  document.addEventListener("keydown", (e) => {
+    if (
+      e.key === "Escape" &&
+      !elements.depGraphOverlay.classList.contains("hidden")
+    ) {
+      closeDepGraph();
+    }
+  });
+}
+
+// Rendering
+function renderTags() {
+  elements.tagsList.innerHTML = tagsData
+    .map(
+      (tag) => `
+      <span class="tag-pill ${activeTag === tag.tag ? "active" : ""}" data-tag="${tag.tag}">
+        ${tag.tag}<span class="tag-count">(${tag.count})</span>
+      </span>
+    `,
+    )
+    .join("");
+
+  elements.tagsList.querySelectorAll(".tag-pill").forEach((pill) => {
+    pill.addEventListener("click", () => {
+      activeTag = pill.dataset.tag;
+      renderTags();
+      renderTree();
+    });
+  });
+}
+
+function renderTree() {
+  const filtered = filterTree(treeData);
+
+  if (filtered.length === 0) {
+    elements.tree.innerHTML = `<div class="empty-state"><p>No items match your filters</p></div>`;
+    return;
+  }
+
+  elements.tree.innerHTML = filtered.map((prd) => renderPrdNode(prd)).join("");
+
+  // Add click handlers
+  elements.tree.querySelectorAll(".tree-node-content").forEach((node) => {
+    node.addEventListener("click", (e) => {
+      const ref = node.dataset.ref;
+
+      // Handle expand/collapse
+      if (e.target.classList.contains("tree-expand")) {
+        const children = node.parentElement.querySelector(".tree-children");
+        if (children) {
+          children.classList.toggle("collapsed");
+          e.target.textContent = children.classList.contains("collapsed")
+            ? "▶"
+            : "▼";
+        }
+        return;
+      }
+
+      // Select node
+      elements.tree.querySelectorAll(".tree-node-content").forEach((n) => {
+        n.classList.remove("selected");
+      });
+      node.classList.add("selected");
+      loadContent(ref);
+    });
+  });
+}
+
+function filterTree(data) {
+  return data.filter((prd) => {
+    // Tag filter
+    if (activeTag !== "All" && prd.tag !== activeTag) {
+      return false;
+    }
+
+    // Status filter
+    if (statusFilter && prd.status !== statusFilter) {
+      return false;
+    }
+
+    // Search filter
+    if (searchQuery) {
+      const matchesPrd =
+        prd.ref.toLowerCase().includes(searchQuery) ||
+        prd.title.toLowerCase().includes(searchQuery);
+
+      const matchesChildren = prd.epics?.some(
+        (epic) =>
+          epic.ref.toLowerCase().includes(searchQuery) ||
+          epic.title.toLowerCase().includes(searchQuery) ||
+          epic.tasks?.some(
+            (task) =>
+              task.ref.toLowerCase().includes(searchQuery) ||
+              task.title.toLowerCase().includes(searchQuery),
+          ),
+      );
+
+      return matchesPrd || matchesChildren;
+    }
+
+    return true;
+  });
+}
+
+function renderPrdNode(prd) {
+  const hasChildren = prd.epics && prd.epics.length > 0;
+  const statusClass = getStatusClass(prd.status);
+  const statusIcon = getStatusIcon(prd.status);
+
+  return `
+    <div class="tree-node">
+      <div class="tree-node-content ${selectedRef === prd.ref ? "selected" : ""}" data-ref="${prd.ref}" title="${escapeHtml(prd.title)}">
+        <span class="tree-expand">${hasChildren ? "▼" : ""}</span>
+        <span class="tree-status ${statusClass}">${statusIcon}</span>
+        <span class="tree-ref">${prd.ref}</span>
+        <span class="tree-title">${escapeHtml(prd.title)}</span>
+      </div>
+      ${hasChildren ? `<div class="tree-children">${prd.epics.map((epic) => renderEpicNode(epic)).join("")}</div>` : ""}
+    </div>
+  `;
+}
+
+function renderEpicNode(epic) {
+  const hasChildren = epic.tasks && epic.tasks.length > 0;
+  const statusClass = getStatusClass(epic.status);
+  const statusIcon = getStatusIcon(epic.status);
+
+  return `
+    <div class="tree-node">
+      <div class="tree-node-content ${selectedRef === epic.ref ? "selected" : ""}" data-ref="${epic.ref}" title="${escapeHtml(epic.title)}">
+        <span class="tree-expand">${hasChildren ? "▼" : ""}</span>
+        <span class="tree-status ${statusClass}">${statusIcon}</span>
+        <span class="tree-ref">${epic.ref}</span>
+        <span class="tree-title">${escapeHtml(epic.title)}</span>
+      </div>
+      ${hasChildren ? `<div class="tree-children">${epic.tasks.map((task) => renderTaskNode(task)).join("")}</div>` : ""}
+    </div>
+  `;
+}
+
+function renderTaskNode(task) {
+  const statusClass = getStatusClass(task.status);
+  const statusIcon = getStatusIcon(task.status);
+
+  return `
+    <div class="tree-node">
+      <div class="tree-node-content ${selectedRef === task.ref ? "selected" : ""}" data-ref="${task.ref}" title="${escapeHtml(task.title)}">
+        <span class="tree-expand"></span>
+        <span class="tree-status ${statusClass}">${statusIcon}</span>
+        <span class="tree-ref">${task.ref}</span>
+        <span class="tree-title">${escapeHtml(task.title)}</span>
+      </div>
+    </div>
+  `;
+}
+
+function renderContent(data, ref) {
+  const type = ref.includes("-P")
+    ? "prd"
+    : ref.includes("-E")
+      ? "epic"
+      : "task";
+
+  // Header
+  let headerHtml = `<h1>${escapeHtml(data.title)}</h1>`;
+  headerHtml += `<div class="content-meta">`;
+  headerHtml += `<span><strong>Ref:</strong> ${data.ref}</span>`;
+  headerHtml += `<span><strong>Status:</strong> ${data.status}</span>`;
+
+  if (type === "prd" && data.tag) {
+    headerHtml += `<span><strong>Tag:</strong> ${data.tag}</span>`;
+  }
+
+  if (type === "task" && data.priority) {
+    headerHtml += `<span><strong>Priority:</strong> ${data.priority}</span>`;
+  }
+
+  headerHtml += `</div>`;
+
+  elements.contentHeader.innerHTML = headerHtml;
+
+  // Body
+  let bodyHtml = "";
+
+  if (type === "prd" && data.markdown) {
+    bodyHtml = marked.parse(data.markdown);
+  } else if (data.description) {
+    bodyHtml = marked.parse(data.description);
+  }
+
+  // Acceptance Criteria
+  if (data.criteria && data.criteria.length > 0) {
+    const met = data.criteria.filter((c) => c.is_met || c.isMet).length;
+    const total = data.criteria.length;
+    const percent = Math.round((met / total) * 100);
+
+    bodyHtml += `
+      <div class="criteria-list">
+        <h3>Acceptance Criteria (${met}/${total})</h3>
+        <div class="progress-bar">
+          <div class="progress-fill" style="width: ${percent}%"></div>
+        </div>
+        ${data.criteria
+          .map(
+            (c) => `
+          <div class="criteria-item ${c.is_met || c.isMet ? "criteria-met" : ""}">
+            <input type="checkbox" class="criteria-checkbox" ${c.is_met || c.isMet ? "checked" : ""} disabled />
+            <span class="criteria-text">${escapeHtml(c.criteria)}</span>
+          </div>
+        `,
+          )
+          .join("")}
+      </div>
+    `;
+  }
+
+  // Dependencies
+  if (data.dependencies && data.dependencies.length > 0) {
+    bodyHtml += `
+      <div class="dependencies">
+        <h4>Dependencies</h4>
+        ${data.dependencies
+          .map(
+            (dep) => `
+          <div class="dependency-item">
+            <span>Depends on: ${dep.dependsOnTaskId || dep.depends_on_task_id || "Unknown"}</span>
+          </div>
+        `,
+          )
+          .join("")}
+      </div>
+    `;
+  }
+
+  elements.contentBody.innerHTML = bodyHtml;
+
+  // Apply syntax highlighting
+  elements.contentBody.querySelectorAll("pre code").forEach((block) => {
+    if (typeof hljs !== "undefined") {
+      hljs.highlightElement(block);
+    }
+  });
+}
+
+// Helpers
+function getStatusClass(status) {
+  switch (status) {
+    case "COMPLETED":
+      return "completed";
+    case "IN_PROGRESS":
+      return "in-progress";
+    default:
+      return "pending";
+  }
+}
+
+function getStatusIcon(status) {
+  switch (status) {
+    case "COMPLETED":
+      return "●";
+    case "IN_PROGRESS":
+      return "◐";
+    default:
+      return "○";
+  }
+}
+
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// Dependency Graph
+let depGraphData = null;
+
+async function openDepGraph() {
+  elements.depGraphOverlay.classList.remove("hidden");
+  await loadDepGraph();
+}
+
+function closeDepGraph() {
+  elements.depGraphOverlay.classList.add("hidden");
+}
+
+async function loadDepGraph() {
+  try {
+    const [depsResponse, treeResponse] = await Promise.all([
+      fetch("/api/dependencies"),
+      fetch("/api/tree"),
+    ]);
+
+    const deps = await depsResponse.json();
+    const tree = await treeResponse.json();
+
+    // Build node map from tree data
+    const nodes = new Map();
+    for (const prd of tree) {
+      nodes.set(prd.ref, {
+        ref: prd.ref,
+        title: prd.title,
+        type: "prd",
+        status: prd.status,
+      });
+      if (prd.epics) {
+        for (const epic of prd.epics) {
+          nodes.set(epic.ref, {
+            ref: epic.ref,
+            title: epic.title,
+            type: "epic",
+            status: epic.status,
+          });
+          if (epic.tasks) {
+            for (const task of epic.tasks) {
+              nodes.set(task.ref, {
+                ref: task.ref,
+                title: task.title,
+                type: "task",
+                status: task.status,
+              });
+            }
+          }
+        }
+      }
+    }
+
+    depGraphData = { edges: deps.edges || [], nodes };
+    renderDepGraph();
+  } catch (error) {
+    console.error("Failed to load dependency graph:", error);
+    elements.depGraphSvg.innerHTML = `
+      <foreignObject x="0" y="0" width="100%" height="100%">
+        <div class="dep-graph-empty">
+          <p>&#9888;</p>
+          <p>Failed to load dependencies</p>
+        </div>
+      </foreignObject>
+    `;
+  }
+}
+
+function renderDepGraph() {
+  if (!depGraphData) return;
+
+  const filterType = elements.depTypeFilter.value;
+  let edges = depGraphData.edges;
+  const nodes = depGraphData.nodes;
+
+  // Filter edges by type
+  if (filterType !== "all") {
+    edges = edges.filter((e) => e.type === filterType);
+  }
+
+  if (edges.length === 0) {
+    const container = elements.depGraphSvg.parentElement;
+    const w = container.clientWidth || 600;
+    const h = container.clientHeight || 400;
+    elements.depGraphSvg.setAttribute("viewBox", `0 0 ${w} ${h}`);
+    elements.depGraphSvg.style.width = `${w}px`;
+    elements.depGraphSvg.style.height = `${h}px`;
+    elements.depGraphSvg.innerHTML = `
+      <text x="${w / 2}" y="${h / 2 - 20}" text-anchor="middle" class="empty-icon" style="font-size: 48px; fill: var(--text-secondary);">&#9670;</text>
+      <text x="${w / 2}" y="${h / 2 + 20}" text-anchor="middle" style="font-size: 14px; fill: var(--text-secondary);">No dependencies${filterType !== "all" ? ` for ${filterType}s` : ""}</text>
+    `;
+    return;
+  }
+
+  // Collect unique nodes involved in dependencies
+  const involvedNodes = new Set();
+  for (const edge of edges) {
+    involvedNodes.add(edge.from);
+    involvedNodes.add(edge.to);
+  }
+
+  // Detect circular dependencies using DFS
+  const circularEdges = detectCircularDeps(edges);
+
+  // Layout: simple layered approach
+  const layout = computeLayout(Array.from(involvedNodes), edges, nodes);
+
+  // Render SVG
+  renderSvgGraph(layout, edges, nodes, circularEdges);
+}
+
+function detectCircularDeps(edges) {
+  const graph = new Map();
+  for (const edge of edges) {
+    if (!graph.has(edge.from)) graph.set(edge.from, []);
+    graph.get(edge.from).push(edge.to);
+  }
+
+  const circular = new Set();
+  const visited = new Set();
+  const recStack = new Set();
+
+  function dfs(node, path) {
+    visited.add(node);
+    recStack.add(node);
+
+    const neighbors = graph.get(node) || [];
+    for (const neighbor of neighbors) {
+      if (!visited.has(neighbor)) {
+        if (dfs(neighbor, [...path, node])) {
+          circular.add(`${node}->${neighbor}`);
+        }
+      } else if (recStack.has(neighbor)) {
+        // Found cycle
+        circular.add(`${node}->${neighbor}`);
+        return true;
+      }
+    }
+
+    recStack.delete(node);
+    return false;
+  }
+
+  for (const node of graph.keys()) {
+    if (!visited.has(node)) {
+      dfs(node, []);
+    }
+  }
+
+  return circular;
+}
+
+function computeLayout(nodeRefs, edges, _nodesMap) {
+  // Compute in-degree for topological layering
+  // Edge semantics: {from: A, to: B} means "A depends on B"
+  // For layout: B should come before A (B is the root/dependency)
+  // So we reverse edge direction: treat as B -> A for layering
+  const inDegree = new Map();
+  const outEdges = new Map();
+
+  for (const ref of nodeRefs) {
+    inDegree.set(ref, 0);
+    outEdges.set(ref, []);
+  }
+
+  for (const edge of edges) {
+    if (inDegree.has(edge.from) && inDegree.has(edge.to)) {
+      // Reverse: "from depends on to" means to -> from for layout
+      inDegree.set(edge.from, inDegree.get(edge.from) + 1);
+      outEdges.get(edge.to).push(edge.from);
+    }
+  }
+
+  // Assign layers using Kahn's algorithm variant
+  const layers = [];
+  const assigned = new Set();
+  const remaining = new Set(nodeRefs);
+
+  while (remaining.size > 0) {
+    // Find nodes with 0 in-degree among remaining
+    const layer = [];
+    for (const ref of remaining) {
+      if (inDegree.get(ref) === 0) {
+        layer.push(ref);
+      }
+    }
+
+    // If no 0 in-degree nodes, pick one (handles cycles)
+    if (layer.length === 0) {
+      layer.push(remaining.values().next().value);
+    }
+
+    layers.push(layer);
+
+    for (const ref of layer) {
+      assigned.add(ref);
+      remaining.delete(ref);
+      // Decrease in-degree of neighbors
+      for (const neighbor of outEdges.get(ref) || []) {
+        if (remaining.has(neighbor)) {
+          inDegree.set(neighbor, inDegree.get(neighbor) - 1);
+        }
+      }
+    }
+  }
+
+  // Compute positions - larger boxes for title/description/status
+  const nodeWidth = 200;
+  const nodeHeight = 70;
+  const layerGap = 120;
+  const nodeGap = 40;
+
+  const positions = new Map();
+  let maxWidth = 0;
+
+  for (let i = 0; i < layers.length; i++) {
+    const layer = layers[i];
+    const layerWidth = layer.length * nodeWidth + (layer.length - 1) * nodeGap;
+    maxWidth = Math.max(maxWidth, layerWidth);
+
+    for (let j = 0; j < layer.length; j++) {
+      const ref = layer[j];
+      positions.set(ref, {
+        x: j * (nodeWidth + nodeGap) + nodeWidth / 2,
+        y: i * layerGap + nodeHeight / 2 + 40,
+        layer: i,
+        index: j,
+      });
+    }
+  }
+
+  // Center each layer
+  for (let i = 0; i < layers.length; i++) {
+    const layer = layers[i];
+    const layerWidth = layer.length * nodeWidth + (layer.length - 1) * nodeGap;
+    const offset = (maxWidth - layerWidth) / 2;
+
+    for (const ref of layer) {
+      const pos = positions.get(ref);
+      pos.x += offset;
+    }
+  }
+
+  return {
+    positions,
+    width: maxWidth + 80,
+    height: layers.length * layerGap + 80,
+  };
+}
+
+function renderSvgGraph(layout, edges, nodesMap, circularEdges) {
+  const { positions, width, height } = layout;
+  const boxWidth = 180;
+  const boxHeight = 60;
+
+  // Set SVG dimensions
+  elements.depGraphSvg.setAttribute("viewBox", `0 0 ${width} ${height}`);
+  elements.depGraphSvg.style.width = `${width}px`;
+  elements.depGraphSvg.style.height = `${height}px`;
+
+  let svg = "";
+
+  // Draw edges first (behind nodes) - simple connector lines
+  for (const edge of edges) {
+    // Edge: "from depends on to", but layout is reversed so "to" is above "from"
+    // Draw line from dependency (to) down to dependent (from)
+    const dependent = positions.get(edge.from);
+    const dependency = positions.get(edge.to);
+    if (!dependent || !dependency) continue;
+
+    const isCircular = circularEdges.has(`${edge.from}->${edge.to}`);
+
+    // Line from bottom of dependency to top of dependent
+    const startX = dependency.x;
+    const startY = dependency.y + boxHeight / 2;
+    const endX = dependent.x;
+    const endY = dependent.y - boxHeight / 2;
+
+    // Simple path: vertical down, then horizontal if needed, then vertical to target
+    let path;
+    if (startX === endX) {
+      // Straight vertical line
+      path = `M ${startX} ${startY} L ${endX} ${endY}`;
+    } else {
+      // Step connector: down, across, down
+      const midY = (startY + endY) / 2;
+      path = `M ${startX} ${startY} L ${startX} ${midY} L ${endX} ${midY} L ${endX} ${endY}`;
+    }
+
+    svg += `
+      <path class="edge ${isCircular ? "circular" : ""}" d="${path}" />
+      <circle cx="${startX}" cy="${startY}" r="3" class="edge-dot" />
+      <circle cx="${endX}" cy="${endY}" r="3" class="edge-dot ${isCircular ? "circular" : ""}" />
+    `;
+  }
+
+  // Draw nodes
+  for (const [ref, pos] of positions) {
+    const node = nodesMap.get(ref);
+    const title = node?.title || ref;
+    const status = node?.status || "PENDING";
+    const statusClass = getStatusClass(status);
+
+    // Truncate title for display
+    const truncatedTitle =
+      title.length > 22 ? `${title.substring(0, 22)}...` : title;
+
+    // Format status for display
+    const statusDisplay = status.replace(/_/g, " ");
+
+    svg += `
+      <g class="node" data-ref="${ref}" onclick="selectNodeFromGraph('${ref}')">
+        <rect
+          x="${pos.x - boxWidth / 2}"
+          y="${pos.y - boxHeight / 2}"
+          width="${boxWidth}"
+          height="${boxHeight}"
+          class="node-box ${statusClass}"
+        />
+        <text x="${pos.x - boxWidth / 2 + 10}" y="${pos.y - boxHeight / 2 + 18}" class="node-ref">${ref}</text>
+        <text x="${pos.x - boxWidth / 2 + 10}" y="${pos.y - boxHeight / 2 + 34}" class="node-title">${escapeHtml(truncatedTitle)}</text>
+        <text x="${pos.x - boxWidth / 2 + 10}" y="${pos.y - boxHeight / 2 + 50}" class="node-status ${statusClass}">${statusDisplay}</text>
+      </g>
+    `;
+  }
+
+  elements.depGraphSvg.innerHTML = svg;
+}
+
+// Global function for graph node clicks
+window.selectNodeFromGraph = (ref) => {
+  closeDepGraph();
+  loadContent(ref);
+
+  // Find and select the node in the tree
+  const node = elements.tree.querySelector(`[data-ref="${ref}"]`);
+  if (node) {
+    elements.tree.querySelectorAll(".tree-node-content").forEach((n) => {
+      n.classList.remove("selected");
+    });
+    node.classList.add("selected");
+    node.scrollIntoView({ behavior: "smooth", block: "center" });
+  }
+};