@unbrained/pm-web 2026.9.18 → 2026.9.23

package/public/src/views/graph-canvas.ts

@@ -230,6 +230,12 @@ function escHtml(s: string): string {
     .replace(/"/g, '"');
 }
 
+/** Builds a tag-to-color map from a tag frequency map, assigning palette colors to the most frequent tags in descending order. */
+export function tagColorMapFromFreq(freq: Map<string, number>): Map<string, string> {
+  const top = [...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, TAG_PALETTE.length).map(([t]) => t);
+  return new Map(top.map((t, i) => [t, TAG_PALETTE[i]]));
+}
+
 // ═══════════════════════════════════════════════════════════════
 // GraphCanvas class
 // ═══════════════════════════════════════════════════════════════
@@ -682,6 +688,23 @@ export class GraphCanvas {
     return a.source.id === b.source.id && a.target.id === b.target.id && a.type === b.type;
   }
 
+  /** Returns the bidirectional edge key, flag, and curve direction for the given source/target node pair. */
+  private edgeBidirInfo(s: SimNode, t: SimNode): { key: string; isBiDir: boolean; curveDir: number } {
+    const key = [s.id, t.id].sort().join('|');
+    const isBiDir = this.biDirPairs.has(key);
+    const curveDir = isBiDir ? (s.id < t.id ? 1 : -1) : 0;
+    return { key, isBiDir, curveDir };
+  }
+
+  /** Computes the start and end points of an edge segment, offset from the node radii along the unit direction vector. */
+  private edgeEndpoints(s: SimNode, t: SimNode, nx: number, ny: number): { x1: number; y1: number; x2: number; y2: number } {
+    const x1 = s.x + nx * s.r;
+    const y1 = s.y + ny * s.r;
+    const x2 = t.x - nx * (t.r + 7);
+    const y2 = t.y - ny * (t.r + 7);
+    return { x1, y1, x2, y2 };
+  }
+
   private buildEdgeGeometry(edge: SimEdge): EdgeGeometry {
     const { source: s, target: t } = edge;
 
@@ -693,17 +716,12 @@ export class GraphCanvas {
     const px = -dy / len;
     const py = dx / len;
 
-    const key = [s.id, t.id].sort().join('|');
-    const isBiDir = this.biDirPairs.has(key);
-    const curveDir = isBiDir ? (s.id < t.id ? 1 : -1) : 0;
+    const { key, isBiDir, curveDir } = this.edgeBidirInfo(s, t);
     const cpOffset = isBiDir ? len * 0.22 * curveDir : 0;
     const cpX = (s.x + t.x) / 2 + px * cpOffset;
     const cpY = (s.y + t.y) / 2 + py * cpOffset;
 
-    const x1 = s.x + nx * s.r;
-    const y1 = s.y + ny * s.r;
-    const x2 = t.x - nx * (t.r + 7);
-    const y2 = t.y - ny * (t.r + 7);
+    const { x1, y1, x2, y2 } = this.edgeEndpoints(s, t, nx, ny);
 
     const qX = (u: number): number => (1 - u) * (1 - u) * x1 + 2 * (1 - u) * u * cpX + u * u * x2;
     const qY = (u: number): number => (1 - u) * (1 - u) * y1 + 2 * (1 - u) * u * cpY + u * u * y2;
@@ -839,8 +857,7 @@ export class GraphCanvas {
       for (const n of this.nodes) {
         for (const t of n.tags ?? []) freq.set(t, (freq.get(t) ?? 0) + 1);
       }
-      const top = [...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, TAG_PALETTE.length).map(([t]) => t);
-      this.tagColorMap = new Map(top.map((t, i) => [t, TAG_PALETTE[i]]));
+      this.tagColorMap = tagColorMapFromFreq(freq);
     } else {
       this.tagColorMap = new Map();
     }
@@ -1474,9 +1491,7 @@ export class GraphCanvas {
     const py =  dx / len;
 
     // Determine curvature direction for bidirectional edges
-    const key      = [s.id, t.id].sort().join('|');
-    const isBiDir  = this.biDirPairs.has(key);
-    const curveDir = isBiDir ? (s.id < t.id ? 1 : -1) : 0;
+    const { isBiDir, curveDir } = this.edgeBidirInfo(s, t);
     const curvature = isBiDir ? 0.22 : 0.0;
     const cpFactor  = len * curvature * curveDir;
 
@@ -1487,10 +1502,7 @@ export class GraphCanvas {
     // Start/end points offset from node radii
     const nx = dx / len;
     const ny = dy / len;
-    const x1 = s.x + nx * s.r;
-    const y1 = s.y + ny * s.r;
-    const x2 = t.x - nx * (t.r + 7);
-    const y2 = t.y - ny * (t.r + 7);
+    const { x1, y1, x2, y2 } = this.edgeEndpoints(s, t, nx, ny);
 
     const color = onCritPath ? '#fbbf24' : getEdgeColor(edge.type);
     const isActive = highlighted || onCritPath;
@@ -2020,14 +2032,11 @@ export class GraphCanvas {
     }
   }
 
-  private onMouseDown(e: MouseEvent): void {
-    if (e.button !== 0) return;
-    this.canvas.focus();
-    const { x, y } = this.getPos(e);
+  /** Initiates a pointer drag at the given canvas coordinates: records the start position, performs a hit test, and begins either a node drag or canvas pan. */
+  private beginPointerDrag(x: number, y: number, setCursor: boolean): void {
     this.lastX = x; this.lastY = y;
     this.downX = x; this.downY = y;
     this.hasMoved = false;
-
     const [wx, wy] = this.toWorld(x, y);
     const hit = this.hitTest(wx, wy);
     if (hit) {
@@ -2036,32 +2045,72 @@ export class GraphCanvas {
       hit.fx = hit.x;
       hit.fy = hit.y;
       this.alpha = Math.max(this.alpha, 0.25);
-      this.canvas.style.cursor = 'grabbing';
+      if (setCursor) this.canvas.style.cursor = 'grabbing';
     } else {
       this.isDraggingCanvas = true;
-      this.canvas.style.cursor = 'grabbing';
+      if (setCursor) this.canvas.style.cursor = 'grabbing';
     }
   }
 
-  private onMouseMove(e: MouseEvent): void {
-    const r  = this.canvas.getBoundingClientRect();
-    const x  = e.clientX - r.left;
-    const y  = e.clientY - r.top;
-    const dx = x - this.lastX;
-    const dy = y - this.lastY;
-
-    if (Math.abs(x - this.downX) > 3 || Math.abs(y - this.downY) > 3) this.hasMoved = true;
+  /** Returns the canvas-relative coordinates of the first touch, or null when there is not exactly one active touch. */
+  private firstTouchPos(e: TouchEvent): { x: number; y: number } | null {
+    if (e.touches.length !== 1) return null;
+    const rect = this.canvas.getBoundingClientRect();
+    return { x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top };
+  }
 
+  /** Handles a pointer move during an active drag: updates hasMoved, drags the grabbed node or pans the canvas, and returns true when a drag consumed the event. */
+  private handleDragMove(x: number, y: number, dx: number, dy: number, moveThreshold: number, clearFlyOnNode: boolean): boolean {
+    if (Math.abs(x - this.downX) > moveThreshold || Math.abs(y - this.downY) > moveThreshold) this.hasMoved = true;
     if (this.isDraggingNode && this.dragNode) {
       const [wx, wy] = this.toWorld(x, y);
       this.dragNode.fx = wx;
       this.dragNode.fy = wy;
-      this.flyTarget   = null;
-    } else if (this.isDraggingCanvas) {
+      if (clearFlyOnNode) this.flyTarget = null;
+      return true;
+    }
+    if (this.isDraggingCanvas) {
       this.tx += dx;
       this.ty += dy;
       this.flyTarget = null;
-    } else {
+      return true;
+    }
+    return false;
+  }
+
+  /** Ends a node drag gesture: if the pointer did not move, toggles selection and flies to the node, then clears the drag state. Returns true when a node drag was in progress. */
+  private endNodeDrag(): boolean {
+    if (!this.isDraggingNode || !this.dragNode) return false;
+    if (!this.hasMoved) {
+      const id     = this.dragNode.id;
+      const newSel = this.filter.selectedId === id ? null : id;
+      this.filter  = { ...this.filter, selectedId: newSel };
+      this.particles = [];
+      this.lastParticleSpawn = 0;
+      this.onSelectNode(newSel);
+      if (newSel) this.flyTo(this.dragNode);
+    }
+    this.dragNode.fx = null;
+    this.dragNode.fy = null;
+    this.dragNode    = null;
+    return true;
+  }
+
+  private onMouseDown(e: MouseEvent): void {
+    if (e.button !== 0) return;
+    this.canvas.focus();
+    const { x, y } = this.getPos(e);
+    this.beginPointerDrag(x, y, true);
+  }
+
+  private onMouseMove(e: MouseEvent): void {
+    const r  = this.canvas.getBoundingClientRect();
+    const x  = e.clientX - r.left;
+    const y  = e.clientY - r.top;
+    const dx = x - this.lastX;
+    const dy = y - this.lastY;
+
+    if (!this.handleDragMove(x, y, dx, dy, 3, true)) {
       const [wx, wy]  = this.toWorld(x, y);
       const hit       = this.hitTest(wx, wy);
       const newHov    = hit?.id ?? null;
@@ -2079,19 +2128,7 @@ export class GraphCanvas {
   private onMouseUp(e: MouseEvent): void {
     if (e.button !== 0) return;
 
-    if (this.isDraggingNode && this.dragNode) {
-      if (!this.hasMoved) {
-        const id     = this.dragNode.id;
-        const newSel = this.filter.selectedId === id ? null : id;
-        this.filter  = { ...this.filter, selectedId: newSel };
-        this.particles = [];
-        this.lastParticleSpawn = 0;
-        this.onSelectNode(newSel);
-        if (newSel) this.flyTo(this.dragNode);
-      }
-      this.dragNode.fx = null;
-      this.dragNode.fy = null;
-      this.dragNode    = null;
+    if (this.endNodeDrag()) {
       this.isDraggingNode = false;
     } else if (this.isDraggingCanvas) {
       this.isDraggingCanvas = false;
@@ -2121,25 +2158,11 @@ export class GraphCanvas {
 
   private onTouchStart(e: TouchEvent): void {
     e.preventDefault();
-    const rect = this.canvas.getBoundingClientRect();
-    if (e.touches.length === 1) {
-      const x = e.touches[0].clientX - rect.left;
-      const y = e.touches[0].clientY - rect.top;
-      this.lastX = x; this.lastY = y;
-      this.downX = x; this.downY = y;
-      this.hasMoved = false;
-      const [wx, wy] = this.toWorld(x, y);
-      const hit = this.hitTest(wx, wy);
-      if (hit) {
-        this.isDraggingNode = true;
-        this.dragNode = hit;
-        hit.fx = hit.x;
-        hit.fy = hit.y;
-        this.alpha = Math.max(this.alpha, 0.25);
-      } else {
-        this.isDraggingCanvas = true;
-      }
+    const pos = this.firstTouchPos(e);
+    if (pos) {
+      this.beginPointerDrag(pos.x, pos.y, false);
     } else if (e.touches.length === 2) {
+      const rect = this.canvas.getBoundingClientRect();
       this.isDraggingNode = false;
       this.isDraggingCanvas = false;
       if (this.dragNode) { this.dragNode.fx = null; this.dragNode.fy = null; this.dragNode = null; }
@@ -2153,25 +2176,16 @@ export class GraphCanvas {
 
   private onTouchMove(e: TouchEvent): void {
     e.preventDefault();
-    const rect = this.canvas.getBoundingClientRect();
-    if (e.touches.length === 1) {
-      const x  = e.touches[0].clientX - rect.left;
-      const y  = e.touches[0].clientY - rect.top;
+    const pos = this.firstTouchPos(e);
+    if (pos) {
+      const { x, y } = pos;
       const dx = x - this.lastX;
       const dy = y - this.lastY;
-      if (Math.abs(x - this.downX) > 5 || Math.abs(y - this.downY) > 5) this.hasMoved = true;
-      if (this.isDraggingNode && this.dragNode) {
-        const [wx, wy] = this.toWorld(x, y);
-        this.dragNode.fx = wx;
-        this.dragNode.fy = wy;
-      } else if (this.isDraggingCanvas) {
-        this.tx += dx;
-        this.ty += dy;
-        this.flyTarget = null;
-      }
+      this.handleDragMove(x, y, dx, dy, 5, false);
       this.lastX = x;
       this.lastY = y;
     } else if (e.touches.length === 2) {
+      const rect = this.canvas.getBoundingClientRect();
       const dx   = e.touches[0].clientX - e.touches[1].clientX;
       const dy   = e.touches[0].clientY - e.touches[1].clientY;
       const dist = Math.sqrt(dx * dx + dy * dy);
@@ -2190,20 +2204,7 @@ export class GraphCanvas {
   private onTouchEnd(e: TouchEvent): void {
     e.preventDefault();
     if (e.touches.length === 0) {
-      if (this.isDraggingNode && this.dragNode) {
-        if (!this.hasMoved) {
-          const id     = this.dragNode.id;
-          const newSel = this.filter.selectedId === id ? null : id;
-          this.filter  = { ...this.filter, selectedId: newSel };
-          this.particles = [];
-          this.lastParticleSpawn = 0;
-          this.onSelectNode(newSel);
-          if (newSel) this.flyTo(this.dragNode);
-        }
-        this.dragNode.fx = null;
-        this.dragNode.fy = null;
-        this.dragNode    = null;
-      }
+      this.endNodeDrag();
       this.isDraggingNode   = false;
       this.isDraggingCanvas = false;
     }

package/public/src/views/graph.js

@@ -5,13 +5,18 @@ import { api } from '../api.js';
 import { state } from '../state.js';
 import { escHtml } from '../utils.js';
 import { toast } from '../components/toast.js';
-import { GraphCanvas } from './graph-canvas.js';
+import { browserWindow } from '../browser-window.js';
+import { GraphCanvas, tagColorMapFromFreq } from './graph-canvas.js';
 // ── Module state ──────────────────────────────────────────────
 let currentGraph = null;
 let selectedNodeId = '';
 const canvasRef = { current: null };
 let physicsLabel = 'Pause Physics';
 let graphSyncInFlight = false;
+/** Record whether a graph sync is running, outside the async sync function. */
+function setGraphSyncInFlight(active) {
+    graphSyncInFlight = active;
+}
 let infoDrawerOpen = false;
 let relDrawerOpen = false;
 let filterOpen = false;
@@ -70,7 +75,7 @@ function showCtxMenu(nodeId, x, y) {
         return b;
     };
     if (isItem) {
-        menu.appendChild(btn('⊡', 'Open Item', () => window.__app?.openItemDetail(nodeId)));
+        menu.appendChild(btn('⊡', 'Open Item', () => browserWindow().__app?.openItemDetail(nodeId)));
         const sep1 = document.createElement('div');
         sep1.className = 'graph-ctx-sep';
         menu.appendChild(sep1);
@@ -302,7 +307,7 @@ function blockerStats(rels) {
 function visibleGraph(graph) {
     const nodes = graph.nodes || [];
     let rels = graph.relationships || [];
-    const connected = new Set(rels.flatMap((r) => [r.from, r.to]));
+    const connected = connectedNodeIds(rels);
     // Dep mode: restrict to dependency/block edges
     if (filter.depMode) {
         rels = rels.filter(isDependencyRel);
@@ -352,23 +357,69 @@ function visibleGraph(graph) {
     });
     return { nodes: visNodes, rels: visRels, connected };
 }
-// ── Canvas data conversion ────────────────────────────────────
-/** Converts graph nodes into canvas display nodes, attaching each node's edge degree (computed from the relationships) so the renderer can size them. */
-function toCanvasNodes(nodes, rels) {
-    const deg = degreeMap(rels);
-    return nodes.map((n) => ({
+// ── Shared graph helpers ─────────────────────────────────────
+/** Returns the set of node ids that appear as either endpoint of any relationship in the given list. */
+function connectedNodeIds(rels) {
+    return new Set(rels.flatMap((r) => [r.from, r.to]));
+}
+/** Counts how many times each relationship type appears, returning a type-to-count record. */
+function countRelTypes(rels) {
+    return rels.reduce((acc, r) => { acc[r.type] = (acc[r.type] || 0) + 1; return acc; }, {});
+}
+/** Counts how many nodes fall into each type category, returning a type-to-count record. */
+function countNodeTypes(nodes) {
+    return nodes.reduce((acc, n) => {
+        const t = nodeType(n);
+        acc[t] = (acc[t] || 0) + 1;
+        return acc;
+    }, {});
+}
+/** Converts a single graph node into a canvas display node with the given edge degree, copying id, label, type, status, lane, degree, and tags. */
+function nodeToCanvasNode(n, degree) {
+    return {
         id: n.id,
         label: nodeTitle(n),
         type: nodeType(n),
         status: nodeStatus(n),
         lane: nodeLane(n),
-        degree: deg.get(n.id) || 0,
+        degree,
         tags: Array.isArray(n.properties?.tags)
             ? n.properties.tags.map(String)
             : [],
-        priority: n.properties?.priority !== undefined ? Number(n.properties.priority) : undefined,
-        assignee: n.properties?.assignee ? String(n.properties.assignee) : undefined,
-    }));
+    };
+}
+/** Destroys the current canvas instance and re-renders the graph view from scratch. */
+function refreshGraph() {
+    canvasRef.current?.destroy();
+    canvasRef.current = null;
+    void renderGraphView();
+}
+/** Displays an error message on a form-error element, extracting the message from an unknown catch value. */
+function displayFormError(errEl, err) {
+    if (errEl) {
+        errEl.textContent = err instanceof Error ? err.message : String(err);
+        errEl.style.display = '';
+    }
+}
+/** Reads the four physics-slider input elements from the DOM, returning null for any that are missing. */
+function getPhysicsInputs() {
+    return {
+        rep: document.getElementById('graph-physics-repulsion'),
+        linkDist: document.getElementById('graph-physics-linkdist'),
+        linkStr: document.getElementById('graph-physics-linkstr'),
+        gravity: document.getElementById('graph-physics-gravity'),
+    };
+}
+// ── Canvas data conversion ────────────────────────────────────
+/** Converts graph nodes into canvas display nodes, attaching each node's edge degree (computed from the relationships) so the renderer can size them. */
+function toCanvasNodes(nodes, rels) {
+    const deg = degreeMap(rels);
+    return nodes.map((n) => {
+        const cn = nodeToCanvasNode(n, deg.get(n.id) || 0);
+        cn.priority = n.properties?.priority !== undefined ? Number(n.properties.priority) : undefined;
+        cn.assignee = n.properties?.assignee ? String(n.properties.assignee) : undefined;
+        return cn;
+    });
 }
 function toCanvasEdges(rels) {
     return rels.map((r) => ({ from: r.from, to: r.to, type: r.type }));
@@ -596,15 +647,11 @@ function renderInfoPanel(data, fullItem) {
     const nodes = graph.nodes || [];
     const rels = graph.relationships || [];
     const byId = new Map(nodes.map((n) => [n.id, n]));
-    const connected = new Set(rels.flatMap((r) => [r.from, r.to]));
+    const connected = connectedNodeIds(rels);
     const itemNodes = nodes.filter(isItemNode);
-    const relCounts = rels.reduce((acc, r) => { acc[r.type] = (acc[r.type] || 0) + 1; return acc; }, {});
+    const relCounts = countRelTypes(rels);
     const selectedNode = selectedNodeId ? byId.get(selectedNodeId) : undefined;
-    const typeCounts = nodes.reduce((acc, n) => {
-        const t = nodeType(n);
-        acc[t] = (acc[t] || 0) + 1;
-        return acc;
-    }, {});
+    const typeCounts = countNodeTypes(nodes);
     return `
     <div class="graph-panel-title">Graph Coverage</div>
     ${renderCoverage(itemNodes, rels, connected, relCounts)}
@@ -712,9 +759,9 @@ function renderGraphShell(data) {
     const rels = graph.relationships || [];
     const itemNodes = nodes.filter(isItemNode);
     const facetNodes = nodes.filter(isFacetNode);
-    const connected = new Set(rels.flatMap((r) => [r.from, r.to]));
+    const connected = connectedNodeIds(rels);
     const isolated = itemNodes.filter((n) => !connected.has(n.id)).length;
-    const relCounts = rels.reduce((acc, r) => { acc[r.type] = (acc[r.type] || 0) + 1; return acc; }, {});
+    const relCounts = countRelTypes(rels);
     const relOptions = Object.keys(relCounts).sort();
     const errText = compactError(data.extensionError);
     const { rels: visRels } = visibleGraph(graph);
@@ -985,7 +1032,7 @@ function initCanvas() {
                 selectedItemCache = null;
         },
         onOpenNode(id) {
-            window.__app?.openItemDetail(id);
+            browserWindow().__app?.openItemDetail(id);
         },
         onContextMenu(id, x, y) { showCtxMenu(id, x, y); },
     });
@@ -1030,7 +1077,6 @@ const TYPE_COLORS_MAP = {
     task: '#2dd4bf', feature: '#60a5fa', epic: '#a78bfa', bug: '#f87171',
     milestone: '#fbbf24', story: '#34d399', chore: '#94a3b8', release: '#38bdf8',
 };
-const TAG_PALETTE_JS = ['#2dd4bf', '#60a5fa', '#a78bfa', '#f87171', '#fbbf24', '#34d399', '#fb923c', '#e879f9'];
 /** Computes a tag-to-color map by ranking tags by how often they appear across the nodes and assigning each of the most frequent ones a palette color. */
 function computeTagColorMap(nodes) {
     const freq = new Map();
@@ -1039,8 +1085,7 @@ function computeTagColorMap(nodes) {
         for (const t of tags)
             freq.set(t, (freq.get(t) ?? 0) + 1);
     }
-    const top = [...freq.entries()].sort((a, b) => b[1] - a[1]).slice(0, TAG_PALETTE_JS.length).map(([t]) => t);
-    return new Map(top.map((t, i) => [t, TAG_PALETTE_JS[i]]));
+    return tagColorMapFromFreq(freq);
 }
 /** Rebuilds the legend HUD HTML to match the current color mode (status, type, or tag) or dependency mode, including clickable tag chips when coloring by tag. */
 function updateLegend() {
@@ -1049,11 +1094,7 @@ function updateLegend() {
         return;
     const nodes = currentGraph?.graph?.nodes ?? [];
     if (filter.colorMode === 'type') {
-        const typeCounts = nodes.filter(isItemNode).reduce((acc, n) => {
-            const t = nodeType(n);
-            acc[t] = (acc[t] || 0) + 1;
-            return acc;
-        }, {});
+        const typeCounts = countNodeTypes(nodes.filter(isItemNode));
         const shown = Object.entries(typeCounts).sort((a, b) => b[1] - a[1]).slice(0, 6);
         legend.innerHTML = `
       <span><i class="legend-dot legend-facet"></i>Metadata</span>
@@ -1122,7 +1163,7 @@ function updateLegend() {
 function bindInfoPanelEvents() {
     document.getElementById('graph-open-selected')?.addEventListener('click', () => {
         if (selectedNodeId)
-            window.__app?.openItemDetail(selectedNodeId);
+            browserWindow().__app?.openItemDetail(selectedNodeId);
     });
     document.getElementById('graph-clear-selected')?.addEventListener('click', () => {
         selectedNodeId = '';
@@ -1177,18 +1218,18 @@ function bindHudEvents() {
     document.getElementById('graph-back-btn')?.addEventListener('click', () => {
         removeCtxMenu();
         // Remove graph keyboard handler
-        const kh = window.__graphKeyHandler;
+        const kh = browserWindow().__graphKeyHandler;
         if (kh) {
             document.removeEventListener('keydown', kh);
-            delete window.__graphKeyHandler;
+            delete browserWindow().__graphKeyHandler;
         }
-        window.__app?.showView('items');
+        browserWindow().__app?.showView('items');
     });
     const runGraphSync = async () => {
         if (!state.currentProject || graphSyncInFlight)
             return;
         const syncBtn = document.getElementById('graph-sync-btn');
-        graphSyncInFlight = true;
+        setGraphSyncInFlight(true);
         if (syncBtn) {
             syncBtn.disabled = true;
             syncBtn.textContent = 'Syncing…';
@@ -1202,7 +1243,7 @@ function bindHudEvents() {
             toast(err instanceof Error ? err.message : String(err), 'error');
         }
         finally {
-            graphSyncInFlight = false;
+            setGraphSyncInFlight(false);
             if (syncBtn) {
                 syncBtn.disabled = false;
                 syncBtn.textContent = '⧉ Sync';
@@ -1366,10 +1407,7 @@ function bindHudEvents() {
         document.getElementById('graph-physics-panel-toggle')?.classList.toggle('active', physicsOpen);
         if (physicsOpen && canvasRef.current) {
             const params = canvasRef.current.getPhysicsParams();
-            const repEl = document.getElementById('graph-physics-repulsion');
-            const ldEl = document.getElementById('graph-physics-linkdist');
-            const lsEl = document.getElementById('graph-physics-linkstr');
-            const gEl = document.getElementById('graph-physics-gravity');
+            const { rep: repEl, linkDist: ldEl, linkStr: lsEl, gravity: gEl } = getPhysicsInputs();
             if (repEl) {
                 repEl.value = String(params.repulsion);
             }
@@ -1405,10 +1443,7 @@ function bindHudEvents() {
     bindPhysicsSlider('graph-physics-gravity', 'graph-physics-gravity-val', 'centerForce', 1000, 3);
     document.getElementById('graph-physics-reset')?.addEventListener('click', () => {
         canvasRef.current?.setPhysicsParams({ repulsion: 2000, linkDistance: 140, linkStrength: 0.065, centerForce: 0.010 });
-        const repEl = document.getElementById('graph-physics-repulsion');
-        const ldEl = document.getElementById('graph-physics-linkdist');
-        const lsEl = document.getElementById('graph-physics-linkstr');
-        const gEl = document.getElementById('graph-physics-gravity');
+        const { rep: repEl, linkDist: ldEl, linkStr: lsEl, gravity: gEl } = getPhysicsInputs();
         if (repEl)
             repEl.value = '2000';
         if (ldEl)
@@ -1513,7 +1548,7 @@ function bindHudEvents() {
     };
     document.addEventListener('keydown', graphKeyHandler);
     // Store for cleanup on graph exit
-    window.__graphKeyHandler = graphKeyHandler;
+    browserWindow().__graphKeyHandler = graphKeyHandler;
 }
 // ── URL routing (pushState) ─────────────────────────────────
 /** Serializes the current selection and filter into URL query parameters and replaces the browser history entry so the view can be restored or shared. */
@@ -1622,16 +1657,10 @@ function showAddDependencyModal() {
         try {
             await api('POST', `/projects/${state.currentProject.id}/pm/deps/${fromId}`, { targetId: toId, rel: relType });
             document.getElementById('graph-add-dep-modal')?.remove();
-            // Refresh graph
-            canvasRef.current?.destroy();
-            canvasRef.current = null;
-            void renderGraphView();
+            refreshGraph();
         }
         catch (err) {
-            if (errEl) {
-                errEl.textContent = err instanceof Error ? err.message : String(err);
-                errEl.style.display = '';
-            }
+            displayFormError(errEl, err);
         }
     });
 }
@@ -1649,7 +1678,7 @@ function showRemoveDependencyModal() {
         return `<option value="${i}">${escHtml(dependencyLabel(r))}: ${escHtml(nodeTitle(from || { id: r.from }))} → ${escHtml(nodeTitle(to || { id: r.to }))}</option>`;
     }).join('');
     if (!depRels.length) {
-        window.__app?.toast('No dependencies to remove', 'info');
+        browserWindow().__app?.toast('No dependencies to remove', 'info');
         return;
     }
     const html = `
@@ -1687,16 +1716,10 @@ function showRemoveDependencyModal() {
         try {
             await api('DELETE', `/projects/${state.currentProject.id}/pm/deps/${rel.from}`, { targetId: rel.to, rel: rel.type });
             document.getElementById('graph-remove-dep-modal')?.remove();
-            // Refresh graph
-            canvasRef.current?.destroy();
-            canvasRef.current = null;
-            void renderGraphView();
+            refreshGraph();
         }
         catch (err) {
-            if (errEl) {
-                errEl.textContent = err instanceof Error ? err.message : String(err);
-                errEl.style.display = '';
-            }
+            displayFormError(errEl, err);
         }
     });
 }
@@ -1828,24 +1851,16 @@ export async function renderLocalGraph(containerId, nodeId, depth = 2) {
             if (id !== nodeId) {
                 const n = nodes.find((nd) => nd.id === id);
                 if (n && isItemNode(n)) {
-                    window.__app?.openItemDetail(id);
+                    browserWindow().__app?.openItemDetail(id);
                 }
             }
         },
         onOpenNode(id) {
-            window.__app?.openItemDetail(id);
+            browserWindow().__app?.openItemDetail(id);
         },
         onContextMenu() { },
     });
-    const canvasNodes = subNodes.map((n) => ({
-        id: n.id,
-        label: nodeTitle(n),
-        type: nodeType(n),
-        status: nodeStatus(n),
-        lane: nodeLane(n),
-        degree: deg.get(n.id) || 0,
-        tags: Array.isArray(n.properties?.tags) ? n.properties.tags.map(String) : [],
-    }));
+    const canvasNodes = subNodes.map((n) => nodeToCanvasNode(n, deg.get(n.id) || 0));
     const canvasEdges = subRels.map((r) => ({ from: r.from, to: r.to, type: r.type }));
     canvas.setData(canvasNodes, canvasEdges);
     canvas.setSelected(nodeId);