npm - toolnet-memory - Versions diffs - 0.3.5 → 0.3.7 - Mend

toolnet-memory 0.3.5 → 0.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/bin/toolnet-memory +44 -111
package/bundle/full-index.js +23 -22
package/bundle/graph-cli.js +1 -0
package/bundle/graph-index.js +1 -1
package/bundle/graph-ui.js +3 -0
package/bundle/help-cli.js +4 -0
package/bundle/impact.js +2 -2
package/bundle/mcp.js +20 -20
package/bundle/model-cli.js +2 -0
package/bundle/public/index.html +2987 -0
package/bundle/public/vendor/3d-force-graph.min.js +5 -0
package/bundle/runtime.js +6 -6
package/bundle/semantic.js +6 -6
package/bundle/shimmer-worker.js +1 -0
package/bundle/status-cli.js +4 -0
package/package.json +1 -1

package/bundle/public/index.html ADDED Viewed

@@ -0,0 +1,2987 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1, viewport-fit=cover"
+  />
+  <title>
+    ToolNet Memory · Graph
+  </title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    html,
+    body {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      overflow: hidden;
+      background:
+        #050608;
+      color:
+        #f6f7f9;
+      font-family:
+        Inter,
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+    }
+    #graph {
+      position: fixed;
+      inset: 0;
+    }
+    .panel {
+      position: fixed;
+      z-index: 20;
+      border:
+        1px solid
+        rgba(255,255,255,.12);
+      background:
+        rgba(10,12,17,.88);
+      backdrop-filter:
+        blur(20px);
+      -webkit-backdrop-filter:
+        blur(20px);
+      box-shadow:
+        0 22px 60px
+        rgba(0,0,0,.42);
+      border-radius:
+        18px;
+    }
+    #toolbar {
+      top:
+        max(
+          14px,
+          env(safe-area-inset-top)
+        );
+      left:
+        14px;
+      right:
+        14px;
+      padding:
+        14px;
+      display:
+        grid;
+      grid-template-columns:
+        auto minmax(170px, 1fr)
+        minmax(170px, 1fr)
+        minmax(150px, .7fr)
+        minmax(150px, .7fr)
+        auto;
+      gap:
+        10px;
+      align-items:
+        center;
+    }
+    .brand {
+      padding:
+        0 8px;
+      white-space:
+        nowrap;
+      font-weight:
+        750;
+      font-size:
+        18px;
+    }
+    .brand span {
+      opacity:
+        .45;
+      font-weight:
+        500;
+    }
+    input,
+    select,
+    button {
+      height:
+        42px;
+      min-width:
+        0;
+      border:
+        1px solid
+        rgba(255,255,255,.12);
+      border-radius:
+        11px;
+      background:
+        rgba(255,255,255,.06);
+      color:
+        white;
+      padding:
+        0 12px;
+      outline:
+        none;
+      font:
+        inherit;
+    }
+    button {
+      cursor:
+        pointer;
+    }
+    #project {
+      font-weight:
+        650;
+    }
+    #stats {
+      left:
+        14px;
+      bottom:
+        max(
+          14px,
+          env(safe-area-inset-bottom)
+        );
+      min-width:
+        220px;
+      padding:
+        14px 16px;
+      font-size:
+        13px;
+      line-height:
+        1.7;
+    }
+    .status {
+      margin-top:
+        5px;
+      opacity:
+        .55;
+      font-size:
+        11px;
+    }
+    #details {
+      top:
+        96px;
+      right:
+        14px;
+      bottom:
+        14px;
+      width:
+        min(
+          410px,
+          calc(100vw - 28px)
+        );
+      padding:
+        68px 20px 20px;
+      overflow-y:
+        auto;
+      transform:
+        translateX(
+          calc(100% + 30px)
+        );
+      transition:
+        transform .2s ease;
+    }
+    #details.open {
+      transform:
+        translateX(0);
+    }
+    .details-close {
+      position:
+        absolute;
+      top:
+        14px;
+      right:
+        14px;
+      width:
+        44px;
+      height:
+        44px;
+      display:
+        grid;
+      place-items:
+        center;
+      padding:
+        0;
+      border-radius:
+        50%;
+      font-size:
+        28px;
+      line-height:
+        1;
+    }
+    .detail-title {
+      font-size:
+        21px;
+      font-weight:
+        750;
+      line-height:
+        1.25;
+      overflow-wrap:
+        anywhere;
+    }
+    .path {
+      margin-top:
+        8px;
+      opacity:
+        .55;
+      font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        monospace;
+      font-size:
+        12px;
+      overflow-wrap:
+        anywhere;
+    }
+    .tag {
+      display:
+        inline-flex;
+      margin:
+        10px 5px 0 0;
+      padding:
+        5px 9px;
+      border:
+        1px solid
+        rgba(255,255,255,.12);
+      border-radius:
+        999px;
+      background:
+        rgba(255,255,255,.06);
+      font-size:
+        11px;
+    }
+    .section {
+      margin-top:
+        24px;
+    }
+    .section-title {
+      margin-bottom:
+        8px;
+      opacity:
+        .5;
+      font-size:
+        11px;
+      letter-spacing:
+        .1em;
+      text-transform:
+        uppercase;
+    }
+    .row {
+      display:
+        flex;
+      justify-content:
+        space-between;
+      gap:
+        12px;
+      padding:
+        9px 0;
+      border-bottom:
+        1px solid
+        rgba(255,255,255,.06);
+      font-size:
+        13px;
+    }
+    #loading {
+      position:
+        fixed;
+      inset:
+        0;
+      z-index:
+        100;
+      display:
+        grid;
+      place-items:
+        center;
+      background:
+        #050608;
+      padding:
+        24px;
+      text-align:
+        center;
+    }
+    @media (
+      max-width: 1000px
+    ) {
+      #toolbar {
+        grid-template-columns:
+          1fr 1fr;
+        top:
+          max(
+            10px,
+            env(safe-area-inset-top)
+          );
+        left:
+          10px;
+        right:
+          10px;
+      }
+      .brand {
+        grid-column:
+          1 / -1;
+        font-size:
+          17px;
+      }
+      #search {
+        grid-column:
+          1 / -1;
+      }
+      #details {
+        top:
+          10px;
+        right:
+          10px;
+        bottom:
+          10px;
+      }
+      #stats {
+        left:
+          10px;
+        bottom:
+          max(
+            10px,
+            env(safe-area-inset-bottom)
+          );
+      }
+    }
+    @media (
+      max-width: 1000px
+    ) {
+      #toolbar {
+        grid-template-columns:
+          repeat(12, minmax(0, 1fr));
+      }
+      .brand {
+        grid-column:
+          1 / -1;
+      }
+      #project {
+        grid-column:
+          1 / 10;
+        width:
+          100%;
+      }
+      #reset {
+        grid-column:
+          10 / 13;
+        width:
+          100%;
+        padding-left:
+          8px;
+        padding-right:
+          8px;
+      }
+      #search {
+        grid-column:
+          1 / -1;
+        width:
+          100%;
+      }
+      #cluster {
+        grid-column:
+          1 / 7;
+        width:
+          100%;
+      }
+      #edge {
+        grid-column:
+          7 / 13;
+        width:
+          100%;
+      }
+    }
+    .intel-summary {
+      display:
+        grid;
+      grid-template-columns:
+        1fr 1fr;
+      gap:
+        8px;
+      margin-top:
+        18px;
+    }
+    .intel-card {
+      padding:
+        12px;
+      border:
+        1px solid
+        rgba(255,255,255,.08);
+      border-radius:
+        12px;
+      background:
+        rgba(255,255,255,.035);
+    }
+    .intel-card strong {
+      display:
+        block;
+      font-size:
+        18px;
+      margin-top:
+        3px;
+    }
+    .intel-card span {
+      opacity:
+        .55;
+      font-size:
+        11px;
+    }
+    .relation-list {
+      display:
+        flex;
+      flex-direction:
+        column;
+      gap:
+        6px;
+    }
+    .relation-item {
+      width:
+        100%;
+      height:
+        auto;
+      min-height:
+        44px;
+      padding:
+        9px 11px;
+      display:
+        block;
+      text-align:
+        left;
+      border-radius:
+        10px;
+      cursor:
+        pointer;
+    }
+    .relation-name {
+      display:
+        block;
+      font-size:
+        12px;
+      font-weight:
+        650;
+      overflow-wrap:
+        anywhere;
+    }
+    .relation-meta {
+      display:
+        block;
+      margin-top:
+        4px;
+      opacity:
+        .45;
+      font-size:
+        10px;
+      font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        monospace;
+      overflow-wrap:
+        anywhere;
+    }
+    .relation-more {
+      margin-top:
+        7px;
+      opacity:
+        .45;
+      font-size:
+        11px;
+    }
+    .risk {
+      display:
+        inline-flex;
+      padding:
+        5px 9px;
+      margin-top:
+        8px;
+      border:
+        1px solid
+        rgba(255,255,255,.12);
+      border-radius:
+        999px;
+      font-size:
+        11px;
+      font-weight:
+        700;
+    }
+    .path-actions {
+      display:
+        flex;
+      gap:
+        8px;
+      margin-top:
+        10px;
+    }
+    .path-actions button {
+      flex:
+        1;
+      height:
+        auto;
+      min-height:
+        40px;
+      white-space:
+        normal;
+    }
+    .path-chain {
+      display:
+        flex;
+      flex-direction:
+        column;
+      gap:
+        5px;
+      margin-top:
+        9px;
+    }
+    .path-node {
+      height:
+        auto;
+      min-height:
+        36px;
+      padding:
+        7px 10px;
+      text-align:
+        left;
+      font-size:
+        11px;
+    }
+  </style>
+</head>
+<body>
+  <div id="loading">
+    Loading ToolNet projects…
+  </div>
+  <div id="graph"></div>
+  <div
+    id="toolbar"
+    class="panel"
+  >
+    <div class="brand">
+      ToolNet Memory
+      <span>/ Graph</span>
+    </div>
+    <select
+      id="project"
+      aria-label="Project"
+    >
+      <option>
+        Loading…
+      </option>
+    </select>
+    <button id="reset">
+      Reset
+    </button>
+    <input
+      id="search"
+      placeholder="Search symbol or file…"
+    />
+    <select
+      id="cluster"
+      aria-label="Subsystem"
+    >
+      <option value="">
+        All subsystems
+      </option>
+    </select>
+    <select
+      id="edge"
+      aria-label="Relation"
+    >
+      <option value="">
+        All relations
+      </option>
+    </select>
+  </div>
+  <div
+    id="stats"
+    class="panel"
+  ></div>
+  <div
+    id="details"
+    class="panel"
+  ></div>
+  <script src="/vendor/3d-force-graph.min.js"></script>
+  <script>
+    const state = {
+      raw:
+        null,
+      graph:
+        null,
+      project:
+        "",
+      search:
+        "",
+      cluster:
+        "",
+      edge:
+        "",
+      selected:
+        null,
+      pathStart:
+        null,
+      highlightedPath:
+        [],
+      viewMode:
+        "overview",
+      viewCluster:
+        "",
+      viewFile:
+        "",
+    };
+    const graphEl =
+      document.getElementById(
+        "graph"
+      );
+    const projectEl =
+      document.getElementById(
+        "project"
+      );
+    const searchEl =
+      document.getElementById(
+        "search"
+      );
+    const clusterEl =
+      document.getElementById(
+        "cluster"
+      );
+    const edgeEl =
+      document.getElementById(
+        "edge"
+      );
+    const statsEl =
+      document.getElementById(
+        "stats"
+      );
+    const detailsEl =
+      document.getElementById(
+        "details"
+      );
+    const colors = [
+      "#62a8ff",
+      "#ff8f6b",
+      "#67d49b",
+      "#c493ff",
+      "#ffd166",
+      "#73d2de",
+      "#ff6b9a",
+      "#9fd356",
+      "#e5989b",
+      "#8ecae6",
+      "#c9cba3",
+      "#f4a261",
+    ];
+    function escapeHtml(
+      value
+    ) {
+      return String(
+        value ?? ""
+      )
+        .replaceAll(
+          "&",
+          "&amp;"
+        )
+        .replaceAll(
+          "<",
+          "&lt;"
+        )
+        .replaceAll(
+          ">",
+          "&gt;"
+        )
+        .replaceAll(
+          '"',
+          "&quot;"
+        )
+        .replaceAll(
+          "'",
+          "&#039;"
+        );
+    }
+    function hashCode(
+      value
+    ) {
+      let hash =
+        0;
+      for (
+        let i = 0;
+        i < value.length;
+        i++
+      ) {
+        hash =
+          (
+            (
+              hash << 5
+            ) -
+            hash
+          ) +
+          value.charCodeAt(
+            i
+          );
+        hash |=
+          0;
+      }
+      return Math.abs(
+        hash
+      );
+    }
+    function nodeColor(
+      node
+    ) {
+      const value =
+        node.clusterLabel ||
+        node.cluster ||
+        node.layer ||
+        node.type ||
+        "other";
+      return colors[
+        hashCode(
+          value
+        ) %
+        colors.length
+      ];
+    }
+    function linkColor(
+      link
+    ) {
+      const map = {
+        CALL_REFERENCE:
+          "rgba(255,190,90,.72)",
+        CALLS:
+          "rgba(255,255,255,.30)",
+        IMPORTS:
+          "rgba(100,170,255,.46)",
+        USES_TYPE:
+          "rgba(190,130,255,.44)",
+        WRITES:
+          "rgba(255,100,100,.60)",
+        TESTS:
+          "rgba(100,220,150,.42)",
+        IMPLEMENTS:
+          "rgba(100,220,220,.48)",
+        INHERITS:
+          "rgba(235,140,255,.50)",
+      };
+      return (
+        map[link.type] ||
+        "rgba(255,255,255,.18)"
+      );
+    }
+    function closeDetails() {
+      state.selected =
+        null;
+      detailsEl
+        .classList
+        .remove(
+          "open"
+        );
+      detailsEl.innerHTML =
+        "";
+    }
+    const CALL_RELATIONS =
+      new Set([
+        "CALLS",
+        "CALL_REFERENCE",
+      ]);
+    const DEPENDENCY_RELATIONS =
+      new Set([
+        "CALLS",
+        "CALL_REFERENCE",
+        "IMPORTS",
+        "USES_TYPE",
+        "WRITES",
+        "INHERITS",
+        "IMPLEMENTS",
+        "ROUTE",
+      ]);
+    const IMPACT_WEIGHTS = {
+      CALLS: 4,
+      CALL_REFERENCE: 6,
+      USES_TYPE: 4,
+      TESTS: 2,
+      ROUTE: 4,
+      WRITES: 3,
+      IMPORTS: 3,
+      INHERITS: 5,
+      IMPLEMENTS: 5,
+      DEFINES: 1,
+    };
+    function endpointId(
+      link,
+      side
+    ) {
+      const value =
+        link[side];
+      return typeof value ===
+        "object"
+        ? value.id
+        : value;
+    }
+    function rawNode(
+      id
+    ) {
+      return state.raw
+        ?.nodes
+        ?.find(
+          node =>
+            node.id === id
+        );
+    }
+    function uniqueNodes(
+      values
+    ) {
+      const map =
+        new Map();
+      for (
+        const node
+        of values
+      ) {
+        if (
+          node &&
+          !map.has(
+            node.id
+          )
+        ) {
+          map.set(
+            node.id,
+            node
+          );
+        }
+      }
+      return [
+        ...map.values()
+      ];
+    }
+    function relatedNodes(
+      nodeId,
+      direction,
+      allowed
+    ) {
+      const result =
+        [];
+      for (
+        const link
+        of state.raw.links
+      ) {
+        if (
+          allowed &&
+          !allowed.has(
+            link.type
+          )
+        ) {
+          continue;
+        }
+        const source =
+          endpointId(
+            link,
+            "source"
+          );
+        const target =
+          endpointId(
+            link,
+            "target"
+          );
+        if (
+          direction ===
+            "incoming" &&
+          target ===
+            nodeId
+        ) {
+          const node =
+            rawNode(
+              source
+            );
+          if (node) {
+            result.push(
+              node
+            );
+          }
+        }
+        if (
+          direction ===
+            "outgoing" &&
+          source ===
+            nodeId
+        ) {
+          const node =
+            rawNode(
+              target
+            );
+          if (node) {
+            result.push(
+              node
+            );
+          }
+        }
+      }
+      return uniqueNodes(
+        result
+      );
+    }
+    function blastRadius(
+      startId,
+      maxDepth = 3
+    ) {
+      const visited =
+        new Map();
+      const queue = [
+        {
+          id:
+            startId,
+          depth:
+            0,
+          score:
+            0,
+        }
+      ];
+      visited.set(
+        startId,
+        {
+          depth:
+            0,
+          score:
+            0,
+        }
+      );
+      while (
+        queue.length
+      ) {
+        const current =
+          queue.shift();
+        if (
+          current.depth >=
+          maxDepth
+        ) {
+          continue;
+        }
+        for (
+          const link
+          of state.raw.links
+        ) {
+          const weight =
+            IMPACT_WEIGHTS[
+              link.type
+            ];
+          if (!weight) {
+            continue;
+          }
+          const source =
+            endpointId(
+              link,
+              "source"
+            );
+          const target =
+            endpointId(
+              link,
+              "target"
+            );
+          /*
+           * Reverse traversal:
+           * if source depends on target,
+           * changing target may affect source.
+           */
+          if (
+            target !==
+            current.id
+          ) {
+            continue;
+          }
+          const nextDepth =
+            current.depth +
+            1;
+          const nextScore =
+            current.score +
+            weight *
+            (
+              maxDepth -
+              current.depth
+            );
+          const previous =
+            visited.get(
+              source
+            );
+          if (
+            !previous ||
+            nextDepth <
+              previous.depth ||
+            nextScore >
+              previous.score
+          ) {
+            visited.set(
+              source,
+              {
+                depth:
+                  nextDepth,
+                score:
+                  nextScore,
+              }
+            );
+            queue.push({
+              id:
+                source,
+              depth:
+                nextDepth,
+              score:
+                nextScore,
+            });
+          }
+        }
+      }
+      visited.delete(
+        startId
+      );
+      const impacted =
+        [
+          ...visited.entries()
+        ]
+          .map(
+            ([id, info]) => ({
+              node:
+                rawNode(
+                  id
+                ),
+              ...info,
+            })
+          )
+          .filter(
+            item =>
+              item.node
+          )
+          .sort(
+            (a, b) =>
+              b.score -
+              a.score
+          );
+      const score =
+        impacted.reduce(
+          (
+            total,
+            item
+          ) =>
+            total +
+            item.score,
+          0
+        );
+      let risk =
+        "LOW";
+      if (
+        score >= 250 ||
+        impacted.length >= 40
+      ) {
+        risk =
+          "CRITICAL";
+      } else if (
+        score >= 120 ||
+        impacted.length >= 20
+      ) {
+        risk =
+          "HIGH";
+      } else if (
+        score >= 40 ||
+        impacted.length >= 8
+      ) {
+        risk =
+          "MEDIUM";
+      }
+      return {
+        impacted,
+        score,
+        risk,
+      };
+    }
+    function shortestPath(
+      fromId,
+      toId,
+      maxDepth = 10
+    ) {
+      if (
+        fromId ===
+        toId
+      ) {
+        return [
+          fromId
+        ];
+      }
+      const queue = [
+        {
+          id:
+            fromId,
+          path: [
+            fromId
+          ],
+        }
+      ];
+      const visited =
+        new Set([
+          fromId
+        ]);
+      while (
+        queue.length
+      ) {
+        const current =
+          queue.shift();
+        if (
+          current.path.length >
+          maxDepth
+        ) {
+          continue;
+        }
+        for (
+          const link
+          of state.raw.links
+        ) {
+          if (
+            !DEPENDENCY_RELATIONS
+              .has(
+                link.type
+              )
+          ) {
+            continue;
+          }
+          if (
+            endpointId(
+              link,
+              "source"
+            ) !==
+            current.id
+          ) {
+            continue;
+          }
+          const next =
+            endpointId(
+              link,
+              "target"
+            );
+          if (
+            visited.has(
+              next
+            )
+          ) {
+            continue;
+          }
+          const path = [
+            ...current.path,
+            next,
+          ];
+          if (
+            next ===
+            toId
+          ) {
+            return path;
+          }
+          visited.add(
+            next
+          );
+          queue.push({
+            id:
+              next,
+            path,
+          });
+        }
+      }
+      return null;
+    }
+    function relationHtml(
+      title,
+      nodes,
+      limit = 8
+    ) {
+      const visible =
+        nodes.slice(
+          0,
+          limit
+        );
+      return `
+        <div class="section">
+          <div class="section-title">
+            ${escapeHtml(
+              title
+            )}
+            · ${nodes.length}
+          </div>
+          ${
+            visible.length
+              ? `
+                <div class="relation-list">
+                  ${
+                    visible
+                      .map(
+                        node => `
+                          <button
+                            class="relation-item"
+                            data-jump-node="${escapeHtml(
+                              node.id
+                            )}"
+                          >
+                            <span class="relation-name">
+                              ${escapeHtml(
+                                node.qualifiedName ||
+                                node.name
+                              )}
+                            </span>
+                            <span class="relation-meta">
+                              ${escapeHtml(
+                                node.filePath
+                              )}
+                            </span>
+                          </button>
+                        `
+                      )
+                      .join("")
+                  }
+                </div>
+              `
+              : `
+                <div class="muted">
+                  None
+                </div>
+              `
+          }
+          ${
+            nodes.length >
+            limit
+              ? `
+                <div class="relation-more">
+                  +${
+                    nodes.length -
+                    limit
+                  } more
+                </div>
+              `
+              : ""
+          }
+        </div>
+      `;
+    }
+    function resetPathHighlight() {
+      state.highlightedPath =
+        [];
+      if (
+        !state.graph
+      ) {
+        return;
+      }
+      state.graph
+        .linkWidth(
+          link =>
+            link.type ===
+              "CALL_REFERENCE"
+              ? 1.2
+              : .45
+        )
+        .linkColor(
+          link =>
+            linkColor(
+              link
+            )
+        );
+    }
+    function isPathLink(
+      link,
+      path
+    ) {
+      const source =
+        endpointId(
+          link,
+          "source"
+        );
+      const target =
+        endpointId(
+          link,
+          "target"
+        );
+      for (
+        let i = 0;
+        i <
+        path.length - 1;
+        i++
+      ) {
+        if (
+          path[i] ===
+            source &&
+          path[i + 1] ===
+            target
+        ) {
+          return true;
+        }
+      }
+      return false;
+    }
+    function highlightPath(
+      path
+    ) {
+      state.highlightedPath =
+        path || [];
+      if (
+        !state.graph
+      ) {
+        return;
+      }
+      state.graph
+        .linkWidth(
+          link =>
+            isPathLink(
+              link,
+              state.highlightedPath
+            )
+              ? 3.5
+              : (
+                  link.type ===
+                    "CALL_REFERENCE"
+                    ? 1.2
+                    : .35
+                )
+        )
+        .linkColor(
+          link =>
+            isPathLink(
+              link,
+              state.highlightedPath
+            )
+              ? "rgba(255,225,80,.98)"
+              : linkColor(
+                  link
+                )
+        );
+    }
+    function flyToNode(
+      node
+    ) {
+      const distance =
+        70;
+      const length =
+        Math.hypot(
+          node.x || 1,
+          node.y || 1,
+          node.z || 1
+        );
+      const ratio =
+        1 +
+        distance /
+        length;
+      state.graph
+        .cameraPosition(
+          {
+            x:
+              node.x *
+              ratio,
+            y:
+              node.y *
+              ratio,
+            z:
+              node.z *
+              ratio,
+          },
+          node,
+          800
+        );
+    }
+    function jumpToNode(
+      id
+    ) {
+      /*
+       * Clear filters if destination is hidden.
+       */
+      searchEl.value =
+        "";
+      clusterEl.value =
+        "";
+      edgeEl.value =
+        "";
+      state.search =
+        "";
+      state.cluster =
+        "";
+      state.edge =
+        "";
+      applyFilters();
+      setTimeout(
+        () => {
+          const node =
+            state.graph
+              .graphData()
+              .nodes
+              .find(
+                item =>
+                  item.id ===
+                  id
+              );
+          if (!node) {
+            return;
+          }
+          showDetails(
+            node
+          );
+          flyToNode(
+            node
+          );
+        },
+        100
+      );
+    }
+    function showDetails(
+      node
+    ) {
+      if (
+        node.viewKind ===
+        "cluster"
+      ) {
+        void loadProject(
+          state.project,
+          {
+            mode:
+              "files",
+            cluster:
+              node.clusterLabel ||
+              node.name,
+          }
+        );
+        return;
+      }
+      if (
+        node.viewKind ===
+        "file"
+      ) {
+        void loadProject(
+          state.project,
+          {
+            mode:
+              "symbols",
+            file:
+              node.filePath,
+          }
+        );
+        return;
+      }
+      state.selected =
+        node;
+      detailsEl
+        .classList
+        .add(
+          "open"
+        );
+      const callers =
+        relatedNodes(
+          node.id,
+          "incoming",
+          CALL_RELATIONS
+        );
+      const callees =
+        relatedNodes(
+          node.id,
+          "outgoing",
+          CALL_RELATIONS
+        );
+      const dependencies =
+        relatedNodes(
+          node.id,
+          "outgoing",
+          DEPENDENCY_RELATIONS
+        );
+      const dependents =
+        relatedNodes(
+          node.id,
+          "incoming",
+          DEPENDENCY_RELATIONS
+        );
+      const blast =
+        blastRadius(
+          node.id,
+          3
+        );
+      let path =
+        null;
+      if (
+        state.pathStart &&
+        state.pathStart !==
+          node.id
+      ) {
+        path =
+          shortestPath(
+            state.pathStart,
+            node.id
+          );
+        if (path) {
+          highlightPath(
+            path
+          );
+        } else {
+          resetPathHighlight();
+        }
+      }
+      const pathStartNode =
+        state.pathStart
+          ? rawNode(
+              state.pathStart
+            )
+          : null;
+      detailsEl.innerHTML = `
+        <button
+          class="details-close"
+          id="details-close"
+          type="button"
+          aria-label="Close"
+        >
+          &times;
+        </button>
+        <div class="detail-title">
+          ${escapeHtml(
+            node.qualifiedName ||
+            node.name
+          )}
+        </div>
+        <div class="path">
+          ${escapeHtml(
+            node.filePath
+          )}
+        </div>
+        <div>
+          <span class="tag">
+            ${escapeHtml(
+              node.type
+            )}
+          </span>
+          ${
+            node.clusterLabel
+              ? `
+                <span class="tag">
+                  ${escapeHtml(
+                    node.clusterLabel
+                  )}
+                </span>
+              `
+              : ""
+          }
+          ${
+            node.layer
+              ? `
+                <span class="tag">
+                  ${escapeHtml(
+                    node.layer
+                  )}
+                </span>
+              `
+              : ""
+          }
+          ${
+            node.deadCode
+              ? `
+                <span class="tag">
+                  dead-code:
+                  ${escapeHtml(
+                    node.deadCode
+                      .confidence
+                  )}
+                </span>
+              `
+              : ""
+          }
+        </div>
+        <div class="intel-summary">
+          <div class="intel-card">
+            <span>Callers</span>
+            <strong>
+              ${callers.length}
+            </strong>
+          </div>
+          <div class="intel-card">
+            <span>Callees</span>
+            <strong>
+              ${callees.length}
+            </strong>
+          </div>
+          <div class="intel-card">
+            <span>Dependents</span>
+            <strong>
+              ${dependents.length}
+            </strong>
+          </div>
+          <div class="intel-card">
+            <span>Dependencies</span>
+            <strong>
+              ${dependencies.length}
+            </strong>
+          </div>
+        </div>
+        <div class="section">
+          <div class="section-title">
+            Blast Radius
+          </div>
+          <div class="row">
+            <span>Risk</span>
+            <strong>
+              ${blast.risk}
+            </strong>
+          </div>
+          <div class="row">
+            <span>Impacted nodes</span>
+            <strong>
+              ${blast.impacted.length}
+            </strong>
+          </div>
+          <div class="row">
+            <span>Impact score</span>
+            <strong>
+              ${blast.score}
+            </strong>
+          </div>
+          <span class="risk">
+            ${blast.risk}
+          </span>
+        </div>
+        ${
+          blast.impacted.length
+            ? relationHtml(
+                "Top Impacted",
+                blast.impacted
+                  .slice(
+                    0,
+                    8
+                  )
+                  .map(
+                    item =>
+                      item.node
+                  )
+              )
+            : ""
+        }
+        ${relationHtml(
+          "Callers",
+          callers
+        )}
+        ${relationHtml(
+          "Callees",
+          callees
+        )}
+        ${relationHtml(
+          "Dependencies",
+          dependencies
+        )}
+        ${relationHtml(
+          "Dependents",
+          dependents
+        )}
+        <div class="section">
+          <div class="section-title">
+            Shortest Path
+          </div>
+          ${
+            !state.pathStart
+              ? `
+                <div class="muted">
+                  Chọn node này làm điểm bắt đầu,
+                  sau đó click node khác.
+                </div>
+              `
+              : `
+                <div class="path">
+                  From:
+                  ${escapeHtml(
+                    pathStartNode
+                      ?.qualifiedName ||
+                    pathStartNode
+                      ?.name ||
+                    state.pathStart
+                  )}
+                </div>
+              `
+          }
+          <div class="path-actions">
+            <button
+              id="path-start"
+              type="button"
+            >
+              ${
+                state.pathStart ===
+                  node.id
+                  ? "Start selected"
+                  : "Set path start"
+              }
+            </button>
+            ${
+              state.pathStart
+                ? `
+                  <button
+                    id="path-clear"
+                    type="button"
+                  >
+                    Clear path
+                  </button>
+                `
+                : ""
+            }
+          </div>
+          ${
+            state.pathStart &&
+            state.pathStart !==
+              node.id
+              ? (
+                  path
+                    ? `
+                      <div class="path-chain">
+                        ${
+                          path.map(
+                            id => {
+                              const item =
+                                rawNode(
+                                  id
+                                );
+                              return `
+                                <button
+                                  class="path-node"
+                                  data-jump-node="${escapeHtml(
+                                    id
+                                  )}"
+                                >
+                                  ${escapeHtml(
+                                    item?.qualifiedName ||
+                                    item?.name ||
+                                    id
+                                  )}
+                                </button>
+                              `;
+                            }
+                          ).join("")
+                        }
+                      </div>
+                    `
+                    : `
+                      <div class="relation-more">
+                        Không tìm thấy directed path
+                        trong 10 bước.
+                      </div>
+                    `
+                )
+              : ""
+          }
+        </div>
+      `;
+      document
+        .getElementById(
+          "details-close"
+        )
+        ?.addEventListener(
+          "click",
+          event => {
+            event.stopPropagation();
+            closeDetails();
+          }
+        );
+      detailsEl
+        .querySelectorAll(
+          "[data-jump-node]"
+        )
+        .forEach(
+          element => {
+            element
+              .addEventListener(
+                "click",
+                event => {
+                  event.stopPropagation();
+                  jumpToNode(
+                    element.dataset
+                      .jumpNode
+                  );
+                }
+              );
+          }
+        );
+      document
+        .getElementById(
+          "path-start"
+        )
+        ?.addEventListener(
+          "click",
+          event => {
+            event.stopPropagation();
+            state.pathStart =
+              node.id;
+            resetPathHighlight();
+            showDetails(
+              node
+            );
+          }
+        );
+      document
+        .getElementById(
+          "path-clear"
+        )
+        ?.addEventListener(
+          "click",
+          event => {
+            event.stopPropagation();
+            state.pathStart =
+              null;
+            resetPathHighlight();
+            showDetails(
+              node
+            );
+          }
+        );
+    }
+    function populateFilters() {
+      clusterEl.innerHTML =
+        '<option value="">All subsystems</option>';
+      edgeEl.innerHTML =
+        '<option value="">All relations</option>';
+      const clusters =
+        [
+          ...new Set(
+            state.raw.nodes
+              .map(
+                node =>
+                  node.clusterLabel
+              )
+              .filter(Boolean)
+          )
+        ]
+          .sort();
+      for (
+        const value
+        of clusters
+      ) {
+        const option =
+          document.createElement(
+            "option"
+          );
+        option.value =
+          value;
+        option.textContent =
+          value;
+        clusterEl.appendChild(
+          option
+        );
+      }
+      const edges =
+        [
+          ...new Set(
+            state.raw.links
+              .map(
+                link =>
+                  link.type
+              )
+          )
+        ]
+          .sort();
+      for (
+        const value
+        of edges
+      ) {
+        const option =
+          document.createElement(
+            "option"
+          );
+        option.value =
+          value;
+        option.textContent =
+          value;
+        edgeEl.appendChild(
+          option
+        );
+      }
+    }
+    function filteredData() {
+      const search =
+        state.search
+          .trim()
+          .toLowerCase();
+      let nodes =
+        state.raw.nodes;
+      if (
+        state.cluster
+      ) {
+        nodes =
+          nodes.filter(
+            node =>
+              node.clusterLabel ===
+              state.cluster
+          );
+      }
+      if (
+        search
+      ) {
+        nodes =
+          nodes.filter(
+            node =>
+              node.name
+                ?.toLowerCase()
+                .includes(
+                  search
+                ) ||
+              node.qualifiedName
+                ?.toLowerCase()
+                .includes(
+                  search
+                ) ||
+              node.filePath
+                ?.toLowerCase()
+                .includes(
+                  search
+                )
+          );
+      }
+      const ids =
+        new Set(
+          nodes.map(
+            node =>
+              node.id
+          )
+        );
+      let links =
+        state.raw.links
+          .filter(
+            link => {
+              const source =
+                typeof link.source ===
+                  "object"
+                  ? link.source.id
+                  : link.source;
+              const target =
+                typeof link.target ===
+                  "object"
+                  ? link.target.id
+                  : link.target;
+              return (
+                ids.has(
+                  source
+                ) &&
+                ids.has(
+                  target
+                )
+              );
+            }
+          );
+      if (
+        state.edge
+      ) {
+        links =
+          links.filter(
+            link =>
+              link.type ===
+              state.edge
+          );
+      }
+      return {
+        nodes:
+          nodes.map(
+            node => ({
+              ...node
+            })
+          ),
+        links:
+          links.map(
+            link => ({
+              ...link,
+              source:
+                typeof link.source ===
+                  "object"
+                  ? link.source.id
+                  : link.source,
+              target:
+                typeof link.target ===
+                  "object"
+                  ? link.target.id
+                  : link.target,
+            })
+          ),
+      };
+    }
+    function renderStats(
+      data
+    ) {
+      const dashboard =
+        state.raw.dashboard ||
+        {};
+      statsEl.innerHTML = `
+        <div>
+          <strong>
+            ${data.nodes.length}
+          </strong>
+          nodes
+        </div>
+        <div>
+          <strong>
+            ${data.links.length}
+          </strong>
+          relationships
+        </div>
+        <div>
+          <strong>
+            ${state.raw.summary.files}
+          </strong>
+          files
+        </div>
+        <div>
+          <strong>
+            ${state.raw.summary.clusters}
+          </strong>
+          subsystems
+        </div>
+        <div class="status">
+          ${escapeHtml(
+            dashboard.name ||
+            state.project
+          )}
+          ${
+            dashboard.hasArchitecture
+              ? " · architecture"
+              : ""
+          }
+          ${
+            dashboard.hasAnalysis
+              ? " · analysis"
+              : ""
+          }
+        </div>
+      `;
+    }
+    function applyFilters() {
+      const data =
+        filteredData();
+      state.graph.graphData(
+        data
+      );
+      renderStats(
+        data
+      );
+    }
+    async function loadProject(
+      project,
+      options = {}
+    ) {
+      closeDetails();
+      const mode =
+        options.mode ||
+        "overview";
+      let loading =
+        document.getElementById(
+          "loading"
+        );
+      if (!loading) {
+        loading =
+          document.createElement(
+            "div"
+          );
+        loading.id =
+          "loading";
+        document.body
+          .appendChild(
+            loading
+          );
+      }
+      loading.textContent =
+        `Loading ${project} · ${mode}…`;
+      const params =
+        new URLSearchParams();
+      params.set(
+        "project",
+        project
+      );
+      params.set(
+        "mode",
+        mode
+      );
+      if (
+        options.cluster
+      ) {
+        params.set(
+          "cluster",
+          options.cluster
+        );
+      }
+      if (
+        options.file
+      ) {
+        params.set(
+          "file",
+          options.file
+        );
+      }
+      const response =
+        await fetch(
+          `/api/graph?${params.toString()}`
+        );
+      if (
+        !response.ok
+      ) {
+        const error =
+          await response
+            .json()
+            .catch(
+              () => null
+            );
+        throw new Error(
+          error?.error ||
+          "Unable to load graph"
+        );
+      }
+      state.project =
+        project;
+      state.viewMode =
+        mode;
+      state.viewCluster =
+        options.cluster ||
+        "";
+      state.viewFile =
+        options.file ||
+        "";
+      state.raw =
+        await response.json();
+      state.search =
+        "";
+      state.cluster =
+        "";
+      state.edge =
+        "";
+      state.pathStart =
+        null;
+      searchEl.value =
+        "";
+      clusterEl.value =
+        "";
+      edgeEl.value =
+        "";
+      populateFilters();
+      const data =
+        filteredData();
+      if (
+        !state.graph
+      ) {
+        state.graph =
+          ForceGraph3D()(
+            graphEl
+          )
+            .backgroundColor(
+              "#050608"
+            )
+            .nodeLabel(
+              node =>
+                `${
+                  node.qualifiedName ||
+                  node.name
+                }\n${
+                  node.filePath ||
+                  ""
+                }`
+            )
+            .nodeColor(
+              node =>
+                nodeColor(
+                  node
+                )
+            )
+            .nodeVal(
+              node =>
+                2 +
+                Math.min(
+                  10,
+                  Math.log2(
+                    1 +
+                    (
+                      node.incoming ||
+                      0
+                    ) +
+                    (
+                      node.outgoing ||
+                      0
+                    )
+                  )
+                )
+            )
+            .linkColor(
+              link =>
+                linkColor(
+                  link
+                )
+            )
+            .linkOpacity(
+              .38
+            )
+            .linkWidth(
+              link =>
+                link.type ===
+                  "CALL_REFERENCE"
+                  ? 1
+                  : .4
+            )
+            /*
+             * Particles across 200k relationships are extremely
+             * expensive on mobile GPUs. Keep them disabled.
+             */
+            .linkDirectionalParticles(
+              0
+            )
+            .onBackgroundClick(
+              () => {
+                closeDetails();
+              }
+            )
+            .onNodeClick(
+              node => {
+                if (
+                  node.viewKind ===
+                    "cluster" ||
+                  node.viewKind ===
+                    "file"
+                ) {
+                  showDetails(
+                    node
+                  );
+                  return;
+                }
+                showDetails(
+                  node
+                );
+                flyToNode(
+                  node
+                );
+              }
+            );
+      }
+      state.graph
+        .cooldownTicks(
+          mode ===
+            "overview"
+            ? 50
+            : 80
+        );
+      state.graph.graphData(
+        data
+      );
+      renderStats(
+        data
+      );
+      document.title =
+        `${
+          state.raw.dashboard
+            ?.name ||
+          project
+        } · ToolNet Graph`;
+      loading =
+        document.getElementById(
+          "loading"
+        );
+      if (loading) {
+        loading.remove();
+      }
+      setTimeout(
+        () => {
+          state.graph
+            .zoomToFit(
+              500,
+              45
+            );
+        },
+        150
+      );
+    }
+    async function main() {
+      const response =
+        await fetch(
+          "/api/projects"
+        );
+      if (
+        !response.ok
+      ) {
+        throw new Error(
+          "Unable to load ToolNet projects"
+        );
+      }
+      const catalog =
+        await response.json();
+      projectEl.innerHTML =
+        "";
+      for (
+        const project
+        of catalog.projects
+      ) {
+        const option =
+          document.createElement(
+            "option"
+          );
+        option.value =
+          project.remote;
+        option.textContent =
+          project.hasGraph
+            ? project.name
+            : `${project.name} · not indexed`;
+        option.disabled =
+          !project.hasGraph;
+        projectEl.appendChild(
+          option
+        );
+      }
+      const requested =
+        new URLSearchParams(
+          window.location.search
+        ).get(
+          "project"
+        );
+      const requestedValid =
+        catalog.projects
+          .some(
+            project =>
+              project.remote ===
+                requested &&
+              project.hasGraph
+          );
+      const selected =
+        requestedValid
+          ? requested
+          : catalog.defaultProject;
+      if (!selected) {
+        throw new Error(
+          "No indexed projects found"
+        );
+      }
+      projectEl.value =
+        selected;
+      await loadProject(
+        selected
+      );
+    }
+    projectEl.addEventListener(
+      "change",
+      async () => {
+        const project =
+          projectEl.value;
+        if (!project) {
+          return;
+        }
+        const url =
+          new URL(
+            window.location.href
+          );
+        url.searchParams.set(
+          "project",
+          project
+        );
+        history.replaceState(
+          {},
+          "",
+          url
+        );
+        try {
+          await loadProject(
+            project
+          );
+        } catch (
+          error
+        ) {
+          alert(
+            error.message
+          );
+        }
+      }
+    );
+    searchEl.addEventListener(
+      "input",
+      () => {
+        state.search =
+          searchEl.value;
+        applyFilters();
+      }
+    );
+    clusterEl.addEventListener(
+      "change",
+      () => {
+        state.cluster =
+          clusterEl.value;
+        applyFilters();
+      }
+    );
+    edgeEl.addEventListener(
+      "change",
+      () => {
+        state.edge =
+          edgeEl.value;
+        applyFilters();
+      }
+    );
+    document
+      .getElementById(
+        "reset"
+      )
+      .addEventListener(
+        "click",
+        () => {
+          if (
+            state.viewMode !==
+            "overview"
+          ) {
+            void loadProject(
+              state.project
+            );
+            return;
+          }
+          searchEl.value =
+            "";
+          clusterEl.value =
+            "";
+          edgeEl.value =
+            "";
+          state.search =
+            "";
+          state.cluster =
+            "";
+          state.edge =
+            "";
+          state.pathStart =
+            null;
+          resetPathHighlight();
+          closeDetails();
+          applyFilters();
+          state.graph
+            .zoomToFit(
+              700,
+              60
+            );
+        }
+      );
+    document.addEventListener(
+      "keydown",
+      event => {
+        if (
+          event.key ===
+          "Escape"
+        ) {
+          closeDetails();
+        }
+      }
+    );
+    main().catch(
+      error => {
+        const loading =
+          document.getElementById(
+            "loading"
+          );
+        if (
+          loading
+        ) {
+          loading.textContent =
+            error.message;
+        }
+        console.error(
+          error
+        );
+      }
+    );
+  </script>
+</body>
+</html>