@webpieces/nx-webpieces-rules 0.4.852 → 0.4.854

package/src/lib/graph-visualizer.d.ts

@@ -10,6 +10,7 @@
  * graph can't reach.
  */
 import type { EnhancedGraph } from './graph-sorter';
+import { GraphRenderModel } from './graph-render-model';
 /**
  * One node's design page, handed to the browser so the node menu can offer "View Design" for the
  * boxes that HAVE one and omit the item entirely for the boxes that do not.
@@ -31,8 +32,8 @@ export declare class VisualizationPaths {
  * client — the inliner is a blind split/join, so a second occurrence (in a comment, say) would be
  * replaced by the entire DOT too, bloating every generated page.
  */
-export declare const CLIENT_DOT_PLACEHOLDER: string;
-/** Same contract as CLIENT_DOT_PLACEHOLDER, for the node → design.html links the menu offers. */
+export declare const CLIENT_MODEL_PLACEHOLDER: string;
+/** Same contract as CLIENT_MODEL_PLACEHOLDER, for the node → design.html links the menu offers. */
 export declare const CLIENT_DESIGN_LINKS_PLACEHOLDER: string;
 /**
  * Read a compiled browser client sitting beside this file.
@@ -44,6 +45,8 @@ export declare const CLIENT_DESIGN_LINKS_PLACEHOLDER: string;
 export declare function readCompiledClient(name: string): string;
 export declare class GraphVisualizer {
     private readonly clientJs;
+    private readonly filterJs;
+    private readonly filterAssets;
     private readonly snapshot;
     private readonly names;
     private readonly responsibilities;
@@ -57,7 +60,7 @@ export declare class GraphVisualizer {
      * a source checkout (the source there is .client.ts). A unit test running from source supplies the
      * text itself rather than requiring the package to have been built first.
      */
-    constructor(clientJs?: () => string);
+    constructor(clientJs?: () => string, filterJs?: () => string);
     /**
      * A project tagged `drawOnGraph:false` is hidden from the rendered graph —
      * its node, its rank placement, its dropdown option, its responsibilities
@@ -122,6 +125,7 @@ export declare class GraphVisualizer {
      * Generate Graphviz DOT format from the graph
      */
     generateDot(graph: EnhancedGraph, title?: string): string;
+    generateRenderModel(graph: EnhancedGraph, title?: string): GraphRenderModel;
     /**
      * Refuse to draw a graph that would render something false.
      *
@@ -144,7 +148,7 @@ export declare class GraphVisualizer {
     /**
      * Generate interactive HTML with embedded SVG using viz.js
      */
-    generateHTML(dot: string, links: DesignLink[], title?: string, lockControl?: string, responsibilitiesHtml?: string): string;
+    generateHTML(model: GraphRenderModel, links: DesignLink[], title?: string, lockControl?: string, responsibilitiesHtml?: string): string;
     /**
      * The lock control (a single-select dropdown, rendered below the legend).
      * Picking a module LOCKS the graph into that box's hover view — its full

package/src/lib/graph-visualizer.js

@@ -11,7 +11,7 @@
  * graph can't reach.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GraphVisualizer = exports.CLIENT_DESIGN_LINKS_PLACEHOLDER = exports.CLIENT_DOT_PLACEHOLDER = exports.VisualizationPaths = exports.DesignLink = void 0;
+exports.GraphVisualizer = exports.CLIENT_DESIGN_LINKS_PLACEHOLDER = exports.CLIENT_MODEL_PLACEHOLDER = exports.VisualizationPaths = exports.DesignLink = void 0;
 exports.readCompiledClient = readCompiledClient;
 const tslib_1 = require("tslib");
 const fs = tslib_1.__importStar(require("fs"));
@@ -23,6 +23,8 @@ const graph_level_bands_1 = require("./graph-level-bands");
 const graph_cycles_1 = require("./graph-cycles");
 const graph_responsibilities_1 = require("./graph-responsibilities");
 const graph_node_menu_1 = require("./graph-node-menu");
+const dot_syntax_1 = require("./dot-syntax");
+const graph_render_model_1 = require("./graph-render-model");
 const toError_1 = require("../toError");
 /**
  * Framework (libType) colors for visualization — nodes are filled by the FIRST
@@ -73,8 +75,8 @@ exports.VisualizationPaths = VisualizationPaths;
  * client — the inliner is a blind split/join, so a second occurrence (in a comment, say) would be
  * replaced by the entire DOT too, bloating every generated page.
  */
-exports.CLIENT_DOT_PLACEHOLDER = '__' + 'DOT' + '__';
-/** Same contract as CLIENT_DOT_PLACEHOLDER, for the node → design.html links the menu offers. */
+exports.CLIENT_MODEL_PLACEHOLDER = '__' + 'RENDER_MODEL' + '__';
+/** Same contract as CLIENT_MODEL_PLACEHOLDER, for the node → design.html links the menu offers. */
 exports.CLIENT_DESIGN_LINKS_PLACEHOLDER = '__' + 'DESIGN_LINKS' + '__';
 /**
  * Read a compiled browser client sitting beside this file.
@@ -94,6 +96,8 @@ function readCompiledClient(name) {
 }
 class GraphVisualizer {
     clientJs;
+    filterJs;
+    filterAssets = new graph_render_model_1.GraphFilterAssets();
     snapshot = new saved_snapshot_1.SavedSnapshot();
     names = new graph_names_1.GraphNames();
     responsibilities = new graph_responsibilities_1.ResponsibilitiesRenderer();
@@ -107,8 +111,9 @@ class GraphVisualizer {
      * a source checkout (the source there is .client.ts). A unit test running from source supplies the
      * text itself rather than requiring the package to have been built first.
      */
-    constructor(clientJs = () => readCompiledClient('graph-visualizer.client.js')) {
+    constructor(clientJs = () => readCompiledClient('graph-visualizer.client.js'), filterJs = () => readCompiledClient('graph-filter.client.js')) {
         this.clientJs = clientJs;
+        this.filterJs = filterJs;
     }
     /**
      * A project tagged `drawOnGraph:false` is hidden from the rendered graph —
@@ -192,7 +197,7 @@ class GraphVisualizer {
         if (served.length > 0)
             attrs.push(`label="implements: ${this.labelledApis(served)}", fontsize=9`);
         const suffix = attrs.length === 0 ? '' : ` [${attrs.join(', ')}]`;
-        return `  "${from}" -> "${to}"${suffix};\n`;
+        return `  "${(0, dot_syntax_1.dotValue)(from)}" -> "${(0, dot_syntax_1.dotValue)(to)}"${suffix};\n`;
     }
     /**
      * The contract names for an edge label, sorted and capped so a shared api-lib serving a dozen
@@ -238,22 +243,32 @@ class GraphVisualizer {
      * Generate Graphviz DOT format from the graph
      */
     generateDot(graph, title = 'Monorepo Dependency Architecture') {
+        return this.generateRenderModel(graph, title).fullDot;
+    }
+    generateRenderModel(graph, title = 'Monorepo Dependency Architecture') {
         this.assertDrawable(graph);
+        const model = new graph_render_model_1.GraphRenderModel();
         let dot = 'digraph Architecture {\n';
         dot += '  rankdir=TB;\n';
         dot += '  node [shape=box, style=filled, fontname="Arial"];\n';
         dot += '  edge [fontname="Arial"];\n\n';
+        model.header = dot;
         const bands = this.levelBands(graph);
-        dot += this.dotNodes(graph);
+        model.bands = bands;
+        dot += this.dotNodes(graph, model);
         dot += '\n';
         dot += this.bandLayout.dot(bands);
         dot += '\n';
-        dot += this.dotEdges(graph);
+        dot += this.dotEdges(graph, model);
+        const footerStart = dot.length;
         dot += '\n  labelloc="t";\n';
-        dot += `  label="${title}\\n(from architecture/dependencies.json)";\n`;
+        dot += `  label="${(0, dot_syntax_1.dotValue)(title)}\\n(from architecture/dependencies.json)";\n`;
         dot += '  fontsize=20;\n';
         dot += '}\n';
-        return dot;
+        model.footer = dot.slice(footerStart);
+        model.completeEndpoints();
+        model.fullDot = dot;
+        return model;
     }
     /**
      * Refuse to draw a graph that would render something false.
@@ -299,7 +314,7 @@ class GraphVisualizer {
     // role; the label shows the env set + role (e.g. [browser, node] · server).
     // No node carries a URL: EVERY box is clickable and opens the floating node
     // menu instead, which is where a design page is reached (see designLinks).
-    dotNodes(graph) {
+    dotNodes(graph, model) {
         let dot = '';
         for (const project of Object.keys(graph)) {
             const info = graph[project];
@@ -314,14 +329,14 @@ class GraphVisualizer {
             const envSet = `[${frameworks.join(', ')}]`;
             const labelMeta = `L${info.level} · ${envSet} · ${role}`;
             // Identity is the project key; the LABEL is the pretty short name.
-            dot += `  "${nodeId}" [fillcolor="${color}"${border}, label="${shortName}\\n(${labelMeta})"];\n`;
+            dot += model.node(nodeId, `  "${(0, dot_syntax_1.dotValue)(nodeId)}" [fillcolor="${color}"${border}, label="${(0, dot_syntax_1.dotValue)(shortName)}\\n(${(0, dot_syntax_1.dotValue)(labelMeta)})"];\n`);
         }
         return dot;
     }
     // Edge lines (dependencies). An edge to an api-lib is styled by WHY it exists
     // (implements/uses/uses-implements, from apiRelations); every other dependency
     // keeps the default plain arrow.
-    dotEdges(graph) {
+    dotEdges(graph, model) {
         let dot = '';
         for (const project of Object.keys(graph)) {
             const info = graph[project];
@@ -333,7 +348,7 @@ class GraphVisualizer {
                 // is dropped so no connection dangles into empty space.
                 if (graph[dep] !== undefined && this.isHidden(graph[dep]))
                     continue;
-                dot += this.edgeDot(nodeId, this.names.getNodeId(dep), info.apiRelations?.[dep]);
+                dot += model.edge(nodeId, this.names.getNodeId(dep), this.edgeDot(nodeId, this.names.getNodeId(dep), info.apiRelations?.[dep]));
             }
         }
         return dot;
@@ -341,10 +356,10 @@ class GraphVisualizer {
     /**
      * Generate interactive HTML with embedded SVG using viz.js
      */
-    generateHTML(dot, links, title = 'Monorepo Dependency Architecture', lockControl = '', responsibilitiesHtml = '') {
+    generateHTML(model, links, title = 'Monorepo Dependency Architecture', lockControl = '', responsibilitiesHtml = '') {
         const styles = this.styles();
         const legend = this.legend();
-        const script = this.script(dot, links);
+        const script = this.script(model, links);
         return `<!DOCTYPE html>
 <html>
 <head>
@@ -356,13 +371,15 @@ class GraphVisualizer {
 <body>
     <h1>${title}</h1>
     ${this.snapshot.html()}
-    <p class="hint">💡 <strong>Click any box</strong> for its menu — <strong>View Design</strong> (only where that project has a generated <strong>design.html</strong>, i.e. what the AI sees inside it) and <strong>Lock/Unlock</strong>, which is the same lock as the dropdown below.</p>
+    <p class="hint">💡 <strong>Click any box</strong> for its menu — <strong>View Design</strong> (only where that project has a generated <strong>design.html</strong>, i.e. what the AI sees inside it) and <strong>Lock/Unlock</strong>, which is the same lock as the dropdown below. <strong>Filter Unconnected</strong> removes unrelated boxes and compacts the graph while preserving each L-number row.</p>
     <p class="hint">🔦 <strong>Hover any box</strong> to trace its <em>entire</em> dependency chain — every ancestor above it (all the way up) <em>and</em> every dependency below it (all the way down), with all the boxes and lines between — while the rest of the graph dims so you can follow one box at a glance.</p>
     ${legend}
     ${lockControl}
+    ${this.filterAssets.html()}
     <div id="graph"></div>
     ${responsibilitiesHtml}
     <script>${this.nodeMenu.script()}</script>
+    <script>${this.filterJs()}</script>
     <script>${script}</script>
 </body>
 </html>`;
@@ -436,6 +453,7 @@ class GraphVisualizer {
             vertical-align: middle;
         }
         ${this.componentStyles()}
+        ${this.filterAssets.styles()}
     `;
     }
     // Styles for the lock dropdown and the responsibilities card list below the
@@ -594,10 +612,10 @@ class GraphVisualizer {
      * ONCE in the client (never in one of its comments): every literal occurrence would otherwise be
      * replaced by the whole DOT.
      */
-    script(dot, links) {
+    script(model, links) {
         return this.clientJs()
-            .split(exports.CLIENT_DOT_PLACEHOLDER).join(JSON.stringify(dot))
-            .split(exports.CLIENT_DESIGN_LINKS_PLACEHOLDER).join(JSON.stringify(links));
+            .split(exports.CLIENT_MODEL_PLACEHOLDER).join(this.filterAssets.json(model))
+            .split(exports.CLIENT_DESIGN_LINKS_PLACEHOLDER).join(this.filterAssets.json(links));
     }
     /**
      * Write the committed architecture visualization to
@@ -617,7 +635,7 @@ class GraphVisualizer {
         }
         const lockControl = this.lockControl(graph);
         const responsibilities = this.responsibilities.generateSection(graph, workspaceRoot);
-        const html = this.generateHTML(this.generateDot(graph, title), this.designLinks(graph), title, lockControl, responsibilities);
+        const html = this.generateHTML(this.generateRenderModel(graph, title), this.designLinks(graph), title, lockControl, responsibilities);
         const htmlPath = path.join(outputDir, 'dependencies.html');
         fs.writeFileSync(htmlPath, html, 'utf-8');
         return new VisualizationPaths(htmlPath);

package/src/lib/graph-visualizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-visualizer.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-visualizer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Graph Visualizer\n *\n * Generates visual representations of the architecture graph:\n * - DOT format (for Graphviz)\n * - Interactive HTML (using viz.js)\n *\n * All behavior lives on the injectable GraphVisualizer class so webpieces DI +\n * @DocumentDesign can wire it — module-scope functions are a dead end the DI\n * graph can't reach.\n */\n\nimport * as fs from 'fs';\nimport { SavedSnapshot } from './saved-snapshot';\nimport * as path from 'path';\nimport { execSync } from 'child_process';\nimport type { EnhancedGraph } from './graph-sorter';\nimport type { ApiRef, ApiRelation, ApiRelationKind } from './api-usage/api-relations';\nimport { GraphNames, NodeIdOwner } from './graph-names';\nimport { LevelBand, LevelBandLayout } from './graph-level-bands';\nimport { ProjectAdjacency, ProjectCycleDetector } from './graph-cycles';\nimport { ResponsibilitiesRenderer } from './graph-responsibilities';\nimport { GraphNodeMenu } from './graph-node-menu';\nimport { toError } from '../toError';\n\n/**\n * Framework (libType) colors for visualization — nodes are filled by the FIRST\n * env in their set that has a color, so it is obvious at a glance which side a\n * project targets. A project's full env set is shown in the label.\n */\nconst FRAMEWORK_COLORS: Record<string, string> = {\n    angular: '#FCE4EC', // pink   - Angular front-end\n    react: '#E3F2FD', // blue   - React front-end\n    browser: '#EDE7F6', // purple - browser (front-end base env)\n    express: '#E8F5E9', // green  - Express / server side\n    node: '#FFF9C4', // yellow - node (server base env)\n};\n\nconst DEFAULT_FRAMEWORK_COLOR = '#F5F5F5'; // grey - unknown/empty env set\n\n/**\n * Directory (repo-relative) that the committed architecture HTML lives in.\n * Node click-through links are computed relative to this so they resolve when\n * the file is opened straight from the checkout.\n */\nconst ARCH_OUTPUT_DIR = 'architecture';\n\n/** Contracts named on one `implements` edge label before it truncates to \"+N more\". */\nconst MAX_EDGE_LABEL_APIS = 4;\n\n\n/**\n * One node's design page, handed to the browser so the node menu can offer \"View Design\" for the\n * boxes that HAVE one and omit the item entirely for the boxes that do not.\n *\n * The link is data on the PAGE now, not a `URL=` attribute in the DOT: a URL made viz.js wrap the\n * box in an `<a>` and clicking navigated straight out, which the menu replaces.\n */\nexport class DesignLink {\n    constructor(\n        public readonly nodeId: string,\n        public readonly href: string\n    ) {}\n}\n\nexport class VisualizationPaths {\n    htmlPath: string;\n\n    constructor(htmlPath: string) {\n        this.htmlPath = htmlPath;\n    }\n}\n\n/**\n * The token the client scripts carry where the DOT belongs. It must appear EXACTLY ONCE in a compiled\n * client — the inliner is a blind split/join, so a second occurrence (in a comment, say) would be\n * replaced by the entire DOT too, bloating every generated page.\n */\nexport const CLIENT_DOT_PLACEHOLDER = '__' + 'DOT' + '__';\n\n/** Same contract as CLIENT_DOT_PLACEHOLDER, for the node → design.html links the menu offers. */\nexport const CLIENT_DESIGN_LINKS_PLACEHOLDER = '__' + 'DESIGN_LINKS' + '__';\n\n/**\n * Read a compiled browser client sitting beside this file.\n *\n * It is generated from the matching `.client.ts` by tsc, so it exists in `dist` and in the published\n * tarball but NOT in a source checkout. The error says that outright rather than surfacing a bare\n * ENOENT, because \"the build has not run\" and \"the file is missing\" look identical otherwise.\n */\n// webpieces-disable no-function-outside-class -- module-level resolver for the default injected into GraphVisualizer/RuntimeHtmlPage; making it a class would need a container in a module both of them load eagerly\nexport function readCompiledClient(name: string): string {\n    const file = path.join(__dirname, name);\n    if (!fs.existsSync(file)) {\n        throw new Error(\n            `${name} not found beside ${__dirname}. It is COMPILED from ${name.replace(/\\.js$/, '.ts')} `\n            + 'by tsc, so it only exists after a build — run the package build, or inject the text.');\n    }\n    return fs.readFileSync(file, 'utf-8');\n}\n\nexport class GraphVisualizer {\n    private readonly snapshot = new SavedSnapshot();\n    private readonly names = new GraphNames();\n    private readonly responsibilities = new ResponsibilitiesRenderer();\n    private readonly bandLayout = new LevelBandLayout();\n    private readonly cycles = new ProjectCycleDetector();\n    /** The ONE floating-node-menu implementation, shared with the per-project design pages. */\n    private readonly nodeMenu = new GraphNodeMenu();\n\n    /**\n     * How to obtain the browser client's text. Injected so HTML generation does not depend on BUILD\n     * ORDER: the default reads the compiled sibling, which exists in the tarball and in dist but NOT in\n     * a source checkout (the source there is .client.ts). A unit test running from source supplies the\n     * text itself rather than requiring the package to have been built first.\n     */\n    constructor(\n        private readonly clientJs: () => string =\n        (): string => readCompiledClient('graph-visualizer.client.js'),\n    ) {}\n\n    /**\n     * A project tagged `drawOnGraph:false` is hidden from the rendered graph —\n     * its node, its rank placement, its dropdown option, its responsibilities\n     * card, and every edge touching it are all omitted. It stays in the JSON.\n     */\n    private isHidden(entry: EnhancedGraph[string]): boolean {\n        return entry.drawOnGraph === false;\n    }\n\n    /**\n     * Fill color for an env set — the color of the first env in the set that has\n     * a known color, else the default.\n     */\n    private frameworkColor(frameworks: string[]): string {\n        for (const env of frameworks) {\n            const color = FRAMEWORK_COLORS[env];\n            if (color !== undefined) return color;\n        }\n        return DEFAULT_FRAMEWORK_COLOR;\n    }\n\n    /**\n     * Role border styling — fill stays keyed on framework; the border shows a\n     * project's ROLE at a glance. Server and client are the top-level runnable\n     * nodes, so they get bold, colored borders to stand out:\n     *   server       → thick GREEN border  (a runnable server app)\n     *   app          → thick BLUE border   (a runnable non-HTTP app, e.g. a tooling app)\n     *   bundle       → thick PURPLE border (an aggregator that bundles several apps)\n     *   client       → thick RED border    (a client app, e.g. angular)\n     *   designed-lib → bold border         (a library with a generated @DocumentDesign design)\n     *   lib / other  → plain thin border\n     */\n    private roleBorderAttrs(role: string): string {\n        if (role === 'server') return ', color=\"green\", penwidth=3';\n        if (role === 'app') return ', color=\"#1976d2\", penwidth=3';\n        if (role === 'bundle') return ', color=\"#6A1B9A\", penwidth=3';\n        if (role === 'client') return ', color=\"red\", penwidth=3';\n        if (role === 'api-lib') return ', color=\"#EF6C00\", penwidth=2';\n        if (role === 'api-client') return ', color=\"#00838F\", penwidth=2';\n        if (role === 'designed-lib') return ', penwidth=2';\n        return '';\n    }\n\n    /**\n     * Edge styling by API-relation kind (why the edge exists):\n     *   implements       → BLACK dashed (a controller serves this api-lib's contract)\n     *   uses             → BLACK solid (a generated client calls it) — same as a\n     *                      plain library import, since a plain dependency IS a use.\n     *   uses-implements  → BLUE dashed, thicker (does both — implements some\n     *                      contracts of the api-lib, uses others)\n     *   plain lib (none) → the default thin black solid arrow, unchanged.\n     * `kind` is undefined for every non-api-lib dependency edge.\n     */\n    private edgeAttrs(kind: ApiRelationKind | undefined): string {\n        if (kind === 'implements') return 'style=dashed';\n        if (kind === 'uses-implements') return 'style=dashed, color=\"#1976d2\", penwidth=2';\n        return '';\n    }\n\n    /**\n     * The DOT attribute list for ONE dependency edge. An edge that IMPLEMENTS contracts is also\n     * LABELED with them: the dashed line alone says \"something here is implemented\", which reads as\n     * \"the tool did not detect anything\" to everyone who has not memorized the legend. Naming the\n     * contracts makes `auth-store-api` visibly resolve to the server that serves it — the single\n     * most important relationship in a microservice architecture, and the one the diagram was\n     * silent about.\n     */\n    private edgeDot(from: string, to: string, relation: ApiRelation | undefined): string {\n        const attrs: string[] = [];\n        const styling = this.edgeAttrs(relation?.kind);\n        if (styling !== '') attrs.push(styling);\n        const served = (relation?.implements ?? []).map((ref: ApiRef) => ref.api);\n        if (served.length > 0) attrs.push(`label=\"implements: ${this.labelledApis(served)}\", fontsize=9`);\n        const suffix = attrs.length === 0 ? '' : ` [${attrs.join(', ')}]`;\n        return `  \"${from}\" -> \"${to}\"${suffix};\\n`;\n    }\n\n    /**\n     * The contract names for an edge label, sorted and capped so a shared api-lib serving a dozen\n     * contracts cannot blow the edge label up into a wall of text. The truncation is stated in the\n     * label (\"+N more\") rather than silent — the full list is in dependencies.json.\n     */\n    private labelledApis(apis: string[]): string {\n        const sorted = [...apis].sort();\n        if (sorted.length <= MAX_EDGE_LABEL_APIS) return sorted.join(', ');\n        const shown = sorted.slice(0, MAX_EDGE_LABEL_APIS).join(', ');\n        return `${shown} +${sorted.length - MAX_EDGE_LABEL_APIS} more`;\n    }\n\n    /**\n     * Href for a node's design page: the project's committed design.html, made\n     * relative to architecture/dependencies.html. Returns null when the project\n     * has no generated DI design (no design.json → no design page exists).\n     */\n    private designHtmlHref(designFile: string | undefined): string | null {\n        if (!designFile) return null;\n        const designHtml = designFile.replace(/design\\.json$/, 'design.html');\n        return path.posix.relative(ARCH_OUTPUT_DIR, designHtml);\n    }\n\n    /**\n     * The design pages that EXIST, one entry per visible node that has one. A node absent from this\n     * list gets no \"View Design\" item at all — the item is never rendered dead or greyed out.\n     */\n    designLinks(graph: EnhancedGraph): DesignLink[] {\n        const links: DesignLink[] = [];\n        for (const project of Object.keys(graph)) {\n            const info = graph[project];\n            if (this.isHidden(info)) continue;\n            const href = this.designHtmlHref(info.designFile);\n            if (href === null) continue;\n            links.push(new DesignLink(this.names.getNodeId(project), href));\n        }\n        return links;\n    }\n\n    /**\n     * Generate Graphviz DOT format from the graph\n     */\n    generateDot(graph: EnhancedGraph, title: string = 'Monorepo Dependency Architecture'): string {\n        this.assertDrawable(graph);\n        let dot = 'digraph Architecture {\\n';\n        dot += '  rankdir=TB;\\n';\n        dot += '  node [shape=box, style=filled, fontname=\"Arial\"];\\n';\n        dot += '  edge [fontname=\"Arial\"];\\n\\n';\n\n        const bands = this.levelBands(graph);\n\n        dot += this.dotNodes(graph);\n        dot += '\\n';\n        dot += this.bandLayout.dot(bands);\n        dot += '\\n';\n        dot += this.dotEdges(graph);\n\n        dot += '\\n  labelloc=\"t\";\\n';\n        dot += `  label=\"${title}\\\\n(from architecture/dependencies.json)\";\\n`;\n        dot += '  fontsize=20;\\n';\n        dot += '}\\n';\n\n        return dot;\n    }\n\n    /**\n     * Refuse to draw a graph that would render something false.\n     *\n     * Two conditions, both of which produced a confidently-wrong picture with no warning at all:\n     *  - two projects sharing a node id fuse into one box, which UNIONS their two rank sets and\n     *    collapses two whole dependency levels onto one row (see graph-names.ts);\n     *  - a cycle makes the level numbers every row is keyed on meaningless (see graph-cycles.ts).\n     */\n    private assertDrawable(graph: EnhancedGraph): void {\n        const owners: NodeIdOwner[] = [];\n        const adjacency: ProjectAdjacency = {};\n        for (const project of Object.keys(graph)) {\n            owners.push(new NodeIdOwner(project, graph[project].level));\n            adjacency[project] = graph[project].dependsOn ?? [];\n        }\n        this.names.assertUniqueNodeIds(owners);\n        this.cycles.assertAcyclic(adjacency, 'architecture/dependencies.json');\n    }\n\n    /**\n     * The visible projects grouped into one band per dependency level, ordered HIGHEST LEVEL FIRST\n     * so the emitted bands read top-to-bottom with L0 last (hidden projects are omitted, so no\n     * stray rank=same name is emitted for an absent node). LevelBandLayout turns these into the\n     * rank sets and the invisible chain that pins them — see graph-level-bands.ts for why the\n     * chain is required at all.\n     */\n    private levelBands(graph: EnhancedGraph): LevelBand[] {\n        const byLevel = new Map<number, string[]>();\n        for (const project of Object.keys(graph)) {\n            if (this.isHidden(graph[project])) continue;\n            const level = graph[project].level;\n            const nodeIds = byLevel.get(level);\n            if (nodeIds === undefined) byLevel.set(level, [this.names.getNodeId(project)]);\n            else nodeIds.push(this.names.getNodeId(project));\n        }\n        const levels = [...byLevel.keys()].sort((a: number, b: number): number => b - a);\n        return levels.map((level: number): LevelBand =>\n            new LevelBand(level, [...(byLevel.get(level) as string[])].sort()));\n    }\n\n    // Node lines: fill colored by framework env set (libType), border shaped by\n    // role; the label shows the env set + role (e.g. [browser, node] · server).\n    // No node carries a URL: EVERY box is clickable and opens the floating node\n    // menu instead, which is where a design page is reached (see designLinks).\n    private dotNodes(graph: EnhancedGraph): string {\n        let dot = '';\n        for (const project of Object.keys(graph)) {\n            const info = graph[project];\n            if (this.isHidden(info)) continue;\n            const nodeId = this.names.getNodeId(project);\n            const shortName = this.names.getShortName(project);\n            const frameworks = info.framework ?? [];\n            const role = info.role ?? 'lib';\n            const color = this.frameworkColor(frameworks);\n            const border = this.roleBorderAttrs(role);\n            const envSet = `[${frameworks.join(', ')}]`;\n            const labelMeta = `L${info.level} · ${envSet} · ${role}`;\n            // Identity is the project key; the LABEL is the pretty short name.\n            dot += `  \"${nodeId}\" [fillcolor=\"${color}\"${border}, label=\"${shortName}\\\\n(${labelMeta})\"];\\n`;\n        }\n        return dot;\n    }\n\n    // Edge lines (dependencies). An edge to an api-lib is styled by WHY it exists\n    // (implements/uses/uses-implements, from apiRelations); every other dependency\n    // keeps the default plain arrow.\n    private dotEdges(graph: EnhancedGraph): string {\n        let dot = '';\n        for (const project of Object.keys(graph)) {\n            const info = graph[project];\n            if (this.isHidden(info)) continue;\n            const nodeId = this.names.getNodeId(project);\n            for (const dep of info.dependsOn || []) {\n                // Both endpoints must be visible — an edge to/from a hidden box\n                // is dropped so no connection dangles into empty space.\n                if (graph[dep] !== undefined && this.isHidden(graph[dep])) continue;\n                dot += this.edgeDot(nodeId, this.names.getNodeId(dep), info.apiRelations?.[dep]);\n            }\n        }\n        return dot;\n    }\n\n    /**\n     * Generate interactive HTML with embedded SVG using viz.js\n     */\n    generateHTML(\n        dot: string,\n        links: DesignLink[],\n        title: string = 'Monorepo Dependency Architecture',\n        lockControl: string = '',\n        responsibilitiesHtml: string = ''\n    ): string {\n        const styles = this.styles();\n        const legend = this.legend();\n        const script = this.script(dot, links);\n\n        return `<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\">\n    <title>${title}</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/@viz-js/viz@3.28.0/dist/viz-global.js\"></script>\n    <style>${styles}</style>\n</head>\n<body>\n    <h1>${title}</h1>\n    ${this.snapshot.html()}\n    <p class=\"hint\">💡 <strong>Click any box</strong> for its menu — <strong>View Design</strong> (only where that project has a generated <strong>design.html</strong>, i.e. what the AI sees inside it) and <strong>Lock/Unlock</strong>, which is the same lock as the dropdown below.</p>\n    <p class=\"hint\">🔦 <strong>Hover any box</strong> to trace its <em>entire</em> dependency chain — every ancestor above it (all the way up) <em>and</em> every dependency below it (all the way down), with all the boxes and lines between — while the rest of the graph dims so you can follow one box at a glance.</p>\n    ${legend}\n    ${lockControl}\n    <div id=\"graph\"></div>\n    ${responsibilitiesHtml}\n    <script>${this.nodeMenu.script()}</script>\n    <script>${script}</script>\n</body>\n</html>`;\n    }\n\n    /**\n     * The lock control (a single-select dropdown, rendered below the legend).\n     * Picking a module LOCKS the graph into that box's hover view — its full\n     * ancestor + descendant chain stays lit while everything else stays dimmed —\n     * and narrows the responsibilities list below the graph to just that chain.\n     * The first option, \"All\", is the default and clears the lock. Hover still\n     * works on top of a lock; leaving a box returns to the locked view.\n     *\n     * Options are ordered by level DESCENDING to match the responsibilities cards.\n     */\n    lockControl(graph: EnhancedGraph): string {\n        const projects = Object.keys(graph);\n        projects.sort((a: string, b: string): number => {\n            const levelDiff = graph[b].level - graph[a].level;\n            if (levelDiff !== 0) return levelDiff;\n            return a.localeCompare(b);\n        });\n        let options = '';\n        for (const project of projects) {\n            if (this.isHidden(graph[project])) continue;\n            // The VALUE is the node id the SVG is keyed on; the TEXT stays the pretty short name.\n            const nodeId = this.names.getNodeId(project);\n            const shortName = this.names.getShortName(project);\n            options += `<option value=\"${nodeId}\">L${graph[project].level} · ${shortName}</option>`;\n        }\n        return `<div class=\"wp-lock-control\">\n        <label for=\"wp-lock\">🔒 Lock a box (dim the rest &amp; filter responsibilities):</label>\n        <select id=\"wp-lock\"><option value=\"\">All (no lock)</option>${options}</select>\n    </div>`;\n    }\n\n    private styles(): string {\n        return `\n        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #f5f5f5; }\n        h1 { text-align: center; color: #333; }\n        .hint { text-align: center; color: #555; margin: 0 0 16px; }\n        /* Every box is clickable (the floating node menu replaced direct\n         * navigation), so the menu's own stylesheet carries the cursor + blue\n         * glow, and the dim/undim rules a hover or a lock toggles. Both are\n         * shared verbatim with the per-project design pages. */\n        ${this.nodeMenu.styles()}\n        ${this.nodeMenu.dimStyles('#graph')}\n        #graph {\n            text-align: center;\n            background: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend {\n            margin: 20px auto;\n            max-width: 1100px;\n            padding: 15px;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend h2 { margin-top: 0; }\n        .legend-item { margin: 8px 0; }\n        .legend-box {\n            display: inline-block;\n            width: 20px;\n            height: 20px;\n            border: 1px solid #ccc;\n            margin-right: 10px;\n            vertical-align: middle;\n        }\n        ${this.componentStyles()}\n    `;\n    }\n\n    // Styles for the lock dropdown and the responsibilities card list below the\n    // graph. Split out of styles() to keep each method within the line limit.\n    private componentStyles(): string {\n        return `\n        /* The architecture graph is very wide, so lay the legend out as three\n         * side-by-side columns (fill / border / edge) instead of one tall\n         * column — it keeps the legend short next to the wide graph, and\n         * collapses back to a single column on narrow viewports. */\n        .legend-columns {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 28px;\n            align-items: start;\n        }\n        .legend-col h3 { margin: 0 0 8px; color: #333; font-size: 15px; }\n        @media (max-width: 800px) { .legend-columns { grid-template-columns: 1fr; } }\n        .wp-lock-control {\n            max-width: 600px;\n            margin: 0 auto 16px;\n            padding: 12px 15px;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n            text-align: center;\n        }\n        .wp-lock-control label { font-weight: bold; color: #333; margin-right: 8px; }\n        .wp-lock-control select { font-size: 14px; padding: 4px 8px; }\n        #wp-responsibilities { max-width: 900px; margin: 24px auto 0; }\n        #wp-responsibilities h2 { color: #333; }\n        .wp-resp-card {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n            margin: 10px 0;\n            padding: 10px 15px;\n        }\n        .wp-resp-card > summary { cursor: pointer; color: #333; }\n        .wp-resp-level {\n            display: inline-block;\n            min-width: 26px;\n            padding: 1px 6px;\n            margin-right: 6px;\n            border-radius: 4px;\n            background: #eef;\n            font-size: 12px;\n            font-weight: bold;\n            text-align: center;\n        }\n        .wp-resp-body { margin-top: 8px; color: #444; }\n        .wp-resp-body code {\n            background: #f2f2f2;\n            padding: 1px 4px;\n            border-radius: 3px;\n            font-family: monospace;\n        }\n        .wp-hidden { display: none; }`;\n    }\n\n    // The legend is laid out in three side-by-side columns (fill / border /\n    // edge) so it stays short next to the very wide architecture graph. Each\n    // column's rows come from a helper below to keep this method within the line\n    // limit; the footnote spans the full width beneath the columns.\n    private legend(): string {\n        return `<div class=\"legend\">\n        <h2>Legend</h2>\n        <div class=\"legend-columns\">\n            <div class=\"legend-col\">\n                <h3>Fill = framework (libType)</h3>\n                ${this.fillItems()}\n            </div>\n            <div class=\"legend-col\">\n                <h3>Border = role</h3>\n                ${this.borderItems()}\n            </div>\n            <div class=\"legend-col\">\n                <h3>Edge lines — <em>why</em> a project depends on an api-lib</h3>\n                ${this.edgeItems()}\n            </div>\n        </div>\n        <div class=\"legend-item\" style=\"margin-top: 15px;\">\n            <em>Each node label shows its dependency level (L#), its framework env set (e.g. [browser, node]), and its role. Every row is one dependency level and nothing else: the HIGHEST level is the top row, levels descend as you read down, and L0 — the foundation libraries everything else is built on — is always the bottom row. Transitive dependencies are allowed but not shown.</em>\n        </div>\n    </div>`;\n    }\n\n    // Column 1 — fill color keyed on the project's framework (libType) env set.\n    private fillItems(): string {\n        return `<div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #FCE4EC;\"></span>\n            <strong>angular:</strong> Angular front-end\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #E3F2FD;\"></span>\n            <strong>react:</strong> React front-end\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #EDE7F6;\"></span>\n            <strong>browser:</strong> browser front-end base env\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #E8F5E9;\"></span>\n            <strong>express:</strong> Express / server side\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #FFF9C4;\"></span>\n            <strong>node:</strong> node server base env\n        </div>`;\n    }\n\n    // Column 2 — border style keyed on the project's role.\n    private borderItems(): string {\n        return `<div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 3px solid green;\"></span>\n            <strong>server:</strong> runnable server app (thick green border)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 3px solid red;\"></span>\n            <strong>client:</strong> client app, e.g. angular (thick red border)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 2px solid #333;\"></span>\n            <strong>designed-lib:</strong> library with a generated @DocumentDesign design (bold border)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 1px solid #ccc;\"></span>\n            <strong>lib:</strong> plain library, no generated design (thin border)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 2px solid #EF6C00;\"></span>\n            <strong>api-lib:</strong> API-contract library (defines <code>@ApiPath</code>/<code>@Rpc</code>/<code>@PubSub</code> <code>*Api</code> classes)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 2px solid #00838F;\"></span>\n            <strong>api-client:</strong> a contract plus its default implementation that talks to an outside system through its SDK\n        </div>`;\n    }\n\n    // Column 3 — edge line style keyed on WHY a project depends on an api-lib.\n    private edgeItems(): string {\n        return `<div class=\"legend-item\">\n            <svg width=\"42\" height=\"12\" style=\"vertical-align: middle; margin-right: 10px;\"><line x1=\"0\" y1=\"6\" x2=\"42\" y2=\"6\" stroke=\"#333\" stroke-width=\"2\"/></svg>\n            <strong>uses:</strong> calls the API (generates an rpc/pubsub client via <code>createRpcClient</code>/<code>createPubSubClient</code>) — also covers a plain library import, since a plain dependency is just a use.\n        </div>\n        <div class=\"legend-item\">\n            <svg width=\"42\" height=\"12\" style=\"vertical-align: middle; margin-right: 10px;\"><line x1=\"0\" y1=\"6\" x2=\"42\" y2=\"6\" stroke=\"#333\" stroke-width=\"2\" stroke-dasharray=\"5,3\"/></svg>\n            <strong>implements:</strong> serves the API — labeled <code>implements: &lt;contracts&gt;</code> so you can see WHICH contracts resolve to this server without opening the JSON. NOTE: this is a build-dependency diagram, so a UML <em>implements</em> arrow can't be used; we use a dashed line to signal a build dep, because this server implements the api and the api is built first, then this server after.\n        </div>\n        <div class=\"legend-item\">\n            <svg width=\"42\" height=\"12\" style=\"vertical-align: middle; margin-right: 10px;\"><line x1=\"0\" y1=\"6\" x2=\"42\" y2=\"6\" stroke=\"#1976d2\" stroke-width=\"2\" stroke-dasharray=\"5,3\"/></svg>\n            <strong>uses/implements:</strong> both — implements some of the api-lib's contracts, uses others\n        </div>`;\n    }\n\n    /**\n     * The page script. The browser code lives in graph-visualizer.client.ts — real, linted TypeScript\n     * that tsc compiles in place, so what this inlines is its COMPILED .js sitting beside this file.\n     *\n     * The substitution is a blind split/join, which is why the placeholder token must appear EXACTLY\n     * ONCE in the client (never in one of its comments): every literal occurrence would otherwise be\n     * replaced by the whole DOT.\n     */\n    private script(dot: string, links: DesignLink[]): string {\n        return this.clientJs()\n            .split(CLIENT_DOT_PLACEHOLDER).join(JSON.stringify(dot))\n            .split(CLIENT_DESIGN_LINKS_PLACEHOLDER).join(JSON.stringify(links));\n    }\n\n    /**\n     * Write the committed architecture visualization to\n     * architecture/dependencies.html, next to dependencies.json.\n     *\n     * This is a checked-in artifact, regenerated deterministically by\n     * architecture:generate so every box keeps its menu, and the \"View Design\"\n     * item keeps pointing at each project's committed design.html as designs\n     * come and go. The DOT is embedded in the HTML (rendered client-side by\n     * viz.js). Output is deterministic (sorted graph in → same bytes out) so git\n     * only shows a diff when the architecture actually changed.\n     */\n    writeVisualization(\n        graph: EnhancedGraph,\n        workspaceRoot: string,\n        title: string = 'Monorepo Dependency Architecture'\n    ): VisualizationPaths {\n        const outputDir = path.join(workspaceRoot, ARCH_OUTPUT_DIR);\n\n        if (!fs.existsSync(outputDir)) {\n            fs.mkdirSync(outputDir, { recursive: true });\n        }\n\n        const lockControl = this.lockControl(graph);\n        const responsibilities = this.responsibilities.generateSection(graph, workspaceRoot);\n        const html = this.generateHTML(\n            this.generateDot(graph, title), this.designLinks(graph), title, lockControl, responsibilities);\n        const htmlPath = path.join(outputDir, 'dependencies.html');\n        fs.writeFileSync(htmlPath, html, 'utf-8');\n\n        return new VisualizationPaths(htmlPath);\n    }\n\n    /**\n     * Open the HTML visualization in the default browser\n     */\n    openVisualization(htmlPath: string): boolean {\n        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions\n        try {\n            const platform = process.platform;\n            let openCommand: string;\n\n            if (platform === 'darwin') {\n                openCommand = `open \"${htmlPath}\"`;\n            } else if (platform === 'win32') {\n                openCommand = `start \"\" \"${htmlPath}\"`;\n            } else {\n                openCommand = `xdg-open \"${htmlPath}\"`;\n            }\n\n            execSync(openCommand, { stdio: 'ignore' });\n            return true;\n        } catch (err: unknown) {\n            const error = toError(err);\n            console.warn(`⚠️  Could not open browser: ${error.message}`);\n            return false;\n        }\n    }\n}\n"]}
+{"version":3,"file":"graph-visualizer.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-visualizer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Graph Visualizer\n *\n * Generates visual representations of the architecture graph:\n * - DOT format (for Graphviz)\n * - Interactive HTML (using viz.js)\n *\n * All behavior lives on the injectable GraphVisualizer class so webpieces DI +\n * @DocumentDesign can wire it — module-scope functions are a dead end the DI\n * graph can't reach.\n */\n\nimport * as fs from 'fs';\nimport { SavedSnapshot } from './saved-snapshot';\nimport * as path from 'path';\nimport { execSync } from 'child_process';\nimport type { EnhancedGraph } from './graph-sorter';\nimport type { ApiRef, ApiRelation, ApiRelationKind } from './api-usage/api-relations';\nimport { GraphNames, NodeIdOwner } from './graph-names';\nimport { LevelBand, LevelBandLayout } from './graph-level-bands';\nimport { ProjectAdjacency, ProjectCycleDetector } from './graph-cycles';\nimport { ResponsibilitiesRenderer } from './graph-responsibilities';\nimport { GraphNodeMenu } from './graph-node-menu';\nimport { dotValue } from './dot-syntax';\nimport { GraphRenderModel, GraphFilterAssets } from './graph-render-model';\nimport { toError } from '../toError';\n\n/**\n * Framework (libType) colors for visualization — nodes are filled by the FIRST\n * env in their set that has a color, so it is obvious at a glance which side a\n * project targets. A project's full env set is shown in the label.\n */\nconst FRAMEWORK_COLORS: Record<string, string> = {\n    angular: '#FCE4EC', // pink   - Angular front-end\n    react: '#E3F2FD', // blue   - React front-end\n    browser: '#EDE7F6', // purple - browser (front-end base env)\n    express: '#E8F5E9', // green  - Express / server side\n    node: '#FFF9C4', // yellow - node (server base env)\n};\n\nconst DEFAULT_FRAMEWORK_COLOR = '#F5F5F5'; // grey - unknown/empty env set\n\n/**\n * Directory (repo-relative) that the committed architecture HTML lives in.\n * Node click-through links are computed relative to this so they resolve when\n * the file is opened straight from the checkout.\n */\nconst ARCH_OUTPUT_DIR = 'architecture';\n\n/** Contracts named on one `implements` edge label before it truncates to \"+N more\". */\nconst MAX_EDGE_LABEL_APIS = 4;\n\n\n/**\n * One node's design page, handed to the browser so the node menu can offer \"View Design\" for the\n * boxes that HAVE one and omit the item entirely for the boxes that do not.\n *\n * The link is data on the PAGE now, not a `URL=` attribute in the DOT: a URL made viz.js wrap the\n * box in an `<a>` and clicking navigated straight out, which the menu replaces.\n */\nexport class DesignLink {\n    constructor(\n        public readonly nodeId: string,\n        public readonly href: string\n    ) {}\n}\n\nexport class VisualizationPaths {\n    htmlPath: string;\n\n    constructor(htmlPath: string) {\n        this.htmlPath = htmlPath;\n    }\n}\n\n/**\n * The token the client scripts carry where the DOT belongs. It must appear EXACTLY ONCE in a compiled\n * client — the inliner is a blind split/join, so a second occurrence (in a comment, say) would be\n * replaced by the entire DOT too, bloating every generated page.\n */\nexport const CLIENT_MODEL_PLACEHOLDER = '__' + 'RENDER_MODEL' + '__';\n\n/** Same contract as CLIENT_MODEL_PLACEHOLDER, for the node → design.html links the menu offers. */\nexport const CLIENT_DESIGN_LINKS_PLACEHOLDER = '__' + 'DESIGN_LINKS' + '__';\n\n/**\n * Read a compiled browser client sitting beside this file.\n *\n * It is generated from the matching `.client.ts` by tsc, so it exists in `dist` and in the published\n * tarball but NOT in a source checkout. The error says that outright rather than surfacing a bare\n * ENOENT, because \"the build has not run\" and \"the file is missing\" look identical otherwise.\n */\n// webpieces-disable no-function-outside-class -- module-level resolver for the default injected into GraphVisualizer/RuntimeHtmlPage; making it a class would need a container in a module both of them load eagerly\nexport function readCompiledClient(name: string): string {\n    const file = path.join(__dirname, name);\n    if (!fs.existsSync(file)) {\n        throw new Error(\n            `${name} not found beside ${__dirname}. It is COMPILED from ${name.replace(/\\.js$/, '.ts')} `\n            + 'by tsc, so it only exists after a build — run the package build, or inject the text.');\n    }\n    return fs.readFileSync(file, 'utf-8');\n}\n\nexport class GraphVisualizer {\n    private readonly filterAssets = new GraphFilterAssets();\n    private readonly snapshot = new SavedSnapshot();\n    private readonly names = new GraphNames();\n    private readonly responsibilities = new ResponsibilitiesRenderer();\n    private readonly bandLayout = new LevelBandLayout();\n    private readonly cycles = new ProjectCycleDetector();\n    /** The ONE floating-node-menu implementation, shared with the per-project design pages. */\n    private readonly nodeMenu = new GraphNodeMenu();\n\n    /**\n     * How to obtain the browser client's text. Injected so HTML generation does not depend on BUILD\n     * ORDER: the default reads the compiled sibling, which exists in the tarball and in dist but NOT in\n     * a source checkout (the source there is .client.ts). A unit test running from source supplies the\n     * text itself rather than requiring the package to have been built first.\n     */\n    constructor(\n        private readonly clientJs: () => string =\n        (): string => readCompiledClient('graph-visualizer.client.js'),\n        private readonly filterJs: () => string =\n        (): string => readCompiledClient('graph-filter.client.js'),\n    ) {}\n\n    /**\n     * A project tagged `drawOnGraph:false` is hidden from the rendered graph —\n     * its node, its rank placement, its dropdown option, its responsibilities\n     * card, and every edge touching it are all omitted. It stays in the JSON.\n     */\n    private isHidden(entry: EnhancedGraph[string]): boolean {\n        return entry.drawOnGraph === false;\n    }\n\n    /**\n     * Fill color for an env set — the color of the first env in the set that has\n     * a known color, else the default.\n     */\n    private frameworkColor(frameworks: string[]): string {\n        for (const env of frameworks) {\n            const color = FRAMEWORK_COLORS[env];\n            if (color !== undefined) return color;\n        }\n        return DEFAULT_FRAMEWORK_COLOR;\n    }\n\n    /**\n     * Role border styling — fill stays keyed on framework; the border shows a\n     * project's ROLE at a glance. Server and client are the top-level runnable\n     * nodes, so they get bold, colored borders to stand out:\n     *   server       → thick GREEN border  (a runnable server app)\n     *   app          → thick BLUE border   (a runnable non-HTTP app, e.g. a tooling app)\n     *   bundle       → thick PURPLE border (an aggregator that bundles several apps)\n     *   client       → thick RED border    (a client app, e.g. angular)\n     *   designed-lib → bold border         (a library with a generated @DocumentDesign design)\n     *   lib / other  → plain thin border\n     */\n    private roleBorderAttrs(role: string): string {\n        if (role === 'server') return ', color=\"green\", penwidth=3';\n        if (role === 'app') return ', color=\"#1976d2\", penwidth=3';\n        if (role === 'bundle') return ', color=\"#6A1B9A\", penwidth=3';\n        if (role === 'client') return ', color=\"red\", penwidth=3';\n        if (role === 'api-lib') return ', color=\"#EF6C00\", penwidth=2';\n        if (role === 'api-client') return ', color=\"#00838F\", penwidth=2';\n        if (role === 'designed-lib') return ', penwidth=2';\n        return '';\n    }\n\n    /**\n     * Edge styling by API-relation kind (why the edge exists):\n     *   implements       → BLACK dashed (a controller serves this api-lib's contract)\n     *   uses             → BLACK solid (a generated client calls it) — same as a\n     *                      plain library import, since a plain dependency IS a use.\n     *   uses-implements  → BLUE dashed, thicker (does both — implements some\n     *                      contracts of the api-lib, uses others)\n     *   plain lib (none) → the default thin black solid arrow, unchanged.\n     * `kind` is undefined for every non-api-lib dependency edge.\n     */\n    private edgeAttrs(kind: ApiRelationKind | undefined): string {\n        if (kind === 'implements') return 'style=dashed';\n        if (kind === 'uses-implements') return 'style=dashed, color=\"#1976d2\", penwidth=2';\n        return '';\n    }\n\n    /**\n     * The DOT attribute list for ONE dependency edge. An edge that IMPLEMENTS contracts is also\n     * LABELED with them: the dashed line alone says \"something here is implemented\", which reads as\n     * \"the tool did not detect anything\" to everyone who has not memorized the legend. Naming the\n     * contracts makes `auth-store-api` visibly resolve to the server that serves it — the single\n     * most important relationship in a microservice architecture, and the one the diagram was\n     * silent about.\n     */\n    private edgeDot(from: string, to: string, relation: ApiRelation | undefined): string {\n        const attrs: string[] = [];\n        const styling = this.edgeAttrs(relation?.kind);\n        if (styling !== '') attrs.push(styling);\n        const served = (relation?.implements ?? []).map((ref: ApiRef) => ref.api);\n        if (served.length > 0) attrs.push(`label=\"implements: ${this.labelledApis(served)}\", fontsize=9`);\n        const suffix = attrs.length === 0 ? '' : ` [${attrs.join(', ')}]`;\n        return `  \"${dotValue(from)}\" -> \"${dotValue(to)}\"${suffix};\\n`;\n    }\n\n    /**\n     * The contract names for an edge label, sorted and capped so a shared api-lib serving a dozen\n     * contracts cannot blow the edge label up into a wall of text. The truncation is stated in the\n     * label (\"+N more\") rather than silent — the full list is in dependencies.json.\n     */\n    private labelledApis(apis: string[]): string {\n        const sorted = [...apis].sort();\n        if (sorted.length <= MAX_EDGE_LABEL_APIS) return sorted.join(', ');\n        const shown = sorted.slice(0, MAX_EDGE_LABEL_APIS).join(', ');\n        return `${shown} +${sorted.length - MAX_EDGE_LABEL_APIS} more`;\n    }\n\n    /**\n     * Href for a node's design page: the project's committed design.html, made\n     * relative to architecture/dependencies.html. Returns null when the project\n     * has no generated DI design (no design.json → no design page exists).\n     */\n    private designHtmlHref(designFile: string | undefined): string | null {\n        if (!designFile) return null;\n        const designHtml = designFile.replace(/design\\.json$/, 'design.html');\n        return path.posix.relative(ARCH_OUTPUT_DIR, designHtml);\n    }\n\n    /**\n     * The design pages that EXIST, one entry per visible node that has one. A node absent from this\n     * list gets no \"View Design\" item at all — the item is never rendered dead or greyed out.\n     */\n    designLinks(graph: EnhancedGraph): DesignLink[] {\n        const links: DesignLink[] = [];\n        for (const project of Object.keys(graph)) {\n            const info = graph[project];\n            if (this.isHidden(info)) continue;\n            const href = this.designHtmlHref(info.designFile);\n            if (href === null) continue;\n            links.push(new DesignLink(this.names.getNodeId(project), href));\n        }\n        return links;\n    }\n\n    /**\n     * Generate Graphviz DOT format from the graph\n     */\n    generateDot(graph: EnhancedGraph, title: string = 'Monorepo Dependency Architecture'): string {\n        return this.generateRenderModel(graph, title).fullDot;\n    }\n\n    generateRenderModel(graph: EnhancedGraph, title: string = 'Monorepo Dependency Architecture'): GraphRenderModel {\n        this.assertDrawable(graph);\n        const model = new GraphRenderModel();\n        let dot = 'digraph Architecture {\\n';\n        dot += '  rankdir=TB;\\n';\n        dot += '  node [shape=box, style=filled, fontname=\"Arial\"];\\n';\n        dot += '  edge [fontname=\"Arial\"];\\n\\n';\n\n        model.header = dot;\n        const bands = this.levelBands(graph);\n        model.bands = bands;\n\n        dot += this.dotNodes(graph, model);\n        dot += '\\n';\n        dot += this.bandLayout.dot(bands);\n        dot += '\\n';\n        dot += this.dotEdges(graph, model);\n\n        const footerStart = dot.length;\n        dot += '\\n  labelloc=\"t\";\\n';\n        dot += `  label=\"${dotValue(title)}\\\\n(from architecture/dependencies.json)\";\\n`;\n        dot += '  fontsize=20;\\n';\n        dot += '}\\n';\n\n        model.footer = dot.slice(footerStart);\n        model.completeEndpoints();\n        model.fullDot = dot;\n        return model;\n    }\n\n    /**\n     * Refuse to draw a graph that would render something false.\n     *\n     * Two conditions, both of which produced a confidently-wrong picture with no warning at all:\n     *  - two projects sharing a node id fuse into one box, which UNIONS their two rank sets and\n     *    collapses two whole dependency levels onto one row (see graph-names.ts);\n     *  - a cycle makes the level numbers every row is keyed on meaningless (see graph-cycles.ts).\n     */\n    private assertDrawable(graph: EnhancedGraph): void {\n        const owners: NodeIdOwner[] = [];\n        const adjacency: ProjectAdjacency = {};\n        for (const project of Object.keys(graph)) {\n            owners.push(new NodeIdOwner(project, graph[project].level));\n            adjacency[project] = graph[project].dependsOn ?? [];\n        }\n        this.names.assertUniqueNodeIds(owners);\n        this.cycles.assertAcyclic(adjacency, 'architecture/dependencies.json');\n    }\n\n    /**\n     * The visible projects grouped into one band per dependency level, ordered HIGHEST LEVEL FIRST\n     * so the emitted bands read top-to-bottom with L0 last (hidden projects are omitted, so no\n     * stray rank=same name is emitted for an absent node). LevelBandLayout turns these into the\n     * rank sets and the invisible chain that pins them — see graph-level-bands.ts for why the\n     * chain is required at all.\n     */\n    private levelBands(graph: EnhancedGraph): LevelBand[] {\n        const byLevel = new Map<number, string[]>();\n        for (const project of Object.keys(graph)) {\n            if (this.isHidden(graph[project])) continue;\n            const level = graph[project].level;\n            const nodeIds = byLevel.get(level);\n            if (nodeIds === undefined) byLevel.set(level, [this.names.getNodeId(project)]);\n            else nodeIds.push(this.names.getNodeId(project));\n        }\n        const levels = [...byLevel.keys()].sort((a: number, b: number): number => b - a);\n        return levels.map((level: number): LevelBand =>\n            new LevelBand(level, [...(byLevel.get(level) as string[])].sort()));\n    }\n\n    // Node lines: fill colored by framework env set (libType), border shaped by\n    // role; the label shows the env set + role (e.g. [browser, node] · server).\n    // No node carries a URL: EVERY box is clickable and opens the floating node\n    // menu instead, which is where a design page is reached (see designLinks).\n    private dotNodes(graph: EnhancedGraph, model: GraphRenderModel): string {\n        let dot = '';\n        for (const project of Object.keys(graph)) {\n            const info = graph[project];\n            if (this.isHidden(info)) continue;\n            const nodeId = this.names.getNodeId(project);\n            const shortName = this.names.getShortName(project);\n            const frameworks = info.framework ?? [];\n            const role = info.role ?? 'lib';\n            const color = this.frameworkColor(frameworks);\n            const border = this.roleBorderAttrs(role);\n            const envSet = `[${frameworks.join(', ')}]`;\n            const labelMeta = `L${info.level} · ${envSet} · ${role}`;\n            // Identity is the project key; the LABEL is the pretty short name.\n            dot += model.node(nodeId, `  \"${dotValue(nodeId)}\" [fillcolor=\"${color}\"${border}, label=\"${dotValue(shortName)}\\\\n(${dotValue(labelMeta)})\"];\\n`);\n        }\n        return dot;\n    }\n\n    // Edge lines (dependencies). An edge to an api-lib is styled by WHY it exists\n    // (implements/uses/uses-implements, from apiRelations); every other dependency\n    // keeps the default plain arrow.\n    private dotEdges(graph: EnhancedGraph, model: GraphRenderModel): string {\n        let dot = '';\n        for (const project of Object.keys(graph)) {\n            const info = graph[project];\n            if (this.isHidden(info)) continue;\n            const nodeId = this.names.getNodeId(project);\n            for (const dep of info.dependsOn || []) {\n                // Both endpoints must be visible — an edge to/from a hidden box\n                // is dropped so no connection dangles into empty space.\n                if (graph[dep] !== undefined && this.isHidden(graph[dep])) continue;\n                dot += model.edge(nodeId, this.names.getNodeId(dep), this.edgeDot(nodeId, this.names.getNodeId(dep), info.apiRelations?.[dep]));\n            }\n        }\n        return dot;\n    }\n\n    /**\n     * Generate interactive HTML with embedded SVG using viz.js\n     */\n    generateHTML(\n        model: GraphRenderModel,\n        links: DesignLink[],\n        title: string = 'Monorepo Dependency Architecture',\n        lockControl: string = '',\n        responsibilitiesHtml: string = ''\n    ): string {\n        const styles = this.styles();\n        const legend = this.legend();\n        const script = this.script(model, links);\n\n        return `<!DOCTYPE html>\n<html>\n<head>\n    <meta charset=\"utf-8\">\n    <title>${title}</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/@viz-js/viz@3.28.0/dist/viz-global.js\"></script>\n    <style>${styles}</style>\n</head>\n<body>\n    <h1>${title}</h1>\n    ${this.snapshot.html()}\n    <p class=\"hint\">💡 <strong>Click any box</strong> for its menu — <strong>View Design</strong> (only where that project has a generated <strong>design.html</strong>, i.e. what the AI sees inside it) and <strong>Lock/Unlock</strong>, which is the same lock as the dropdown below. <strong>Filter Unconnected</strong> removes unrelated boxes and compacts the graph while preserving each L-number row.</p>\n    <p class=\"hint\">🔦 <strong>Hover any box</strong> to trace its <em>entire</em> dependency chain — every ancestor above it (all the way up) <em>and</em> every dependency below it (all the way down), with all the boxes and lines between — while the rest of the graph dims so you can follow one box at a glance.</p>\n    ${legend}\n    ${lockControl}\n    ${this.filterAssets.html()}\n    <div id=\"graph\"></div>\n    ${responsibilitiesHtml}\n    <script>${this.nodeMenu.script()}</script>\n    <script>${this.filterJs()}</script>\n    <script>${script}</script>\n</body>\n</html>`;\n    }\n\n    /**\n     * The lock control (a single-select dropdown, rendered below the legend).\n     * Picking a module LOCKS the graph into that box's hover view — its full\n     * ancestor + descendant chain stays lit while everything else stays dimmed —\n     * and narrows the responsibilities list below the graph to just that chain.\n     * The first option, \"All\", is the default and clears the lock. Hover still\n     * works on top of a lock; leaving a box returns to the locked view.\n     *\n     * Options are ordered by level DESCENDING to match the responsibilities cards.\n     */\n    lockControl(graph: EnhancedGraph): string {\n        const projects = Object.keys(graph);\n        projects.sort((a: string, b: string): number => {\n            const levelDiff = graph[b].level - graph[a].level;\n            if (levelDiff !== 0) return levelDiff;\n            return a.localeCompare(b);\n        });\n        let options = '';\n        for (const project of projects) {\n            if (this.isHidden(graph[project])) continue;\n            // The VALUE is the node id the SVG is keyed on; the TEXT stays the pretty short name.\n            const nodeId = this.names.getNodeId(project);\n            const shortName = this.names.getShortName(project);\n            options += `<option value=\"${nodeId}\">L${graph[project].level} · ${shortName}</option>`;\n        }\n        return `<div class=\"wp-lock-control\">\n        <label for=\"wp-lock\">🔒 Lock a box (dim the rest &amp; filter responsibilities):</label>\n        <select id=\"wp-lock\"><option value=\"\">All (no lock)</option>${options}</select>\n    </div>`;\n    }\n\n    private styles(): string {\n        return `\n        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #f5f5f5; }\n        h1 { text-align: center; color: #333; }\n        .hint { text-align: center; color: #555; margin: 0 0 16px; }\n        /* Every box is clickable (the floating node menu replaced direct\n         * navigation), so the menu's own stylesheet carries the cursor + blue\n         * glow, and the dim/undim rules a hover or a lock toggles. Both are\n         * shared verbatim with the per-project design pages. */\n        ${this.nodeMenu.styles()}\n        ${this.nodeMenu.dimStyles('#graph')}\n        #graph {\n            text-align: center;\n            background: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend {\n            margin: 20px auto;\n            max-width: 1100px;\n            padding: 15px;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend h2 { margin-top: 0; }\n        .legend-item { margin: 8px 0; }\n        .legend-box {\n            display: inline-block;\n            width: 20px;\n            height: 20px;\n            border: 1px solid #ccc;\n            margin-right: 10px;\n            vertical-align: middle;\n        }\n        ${this.componentStyles()}\n        ${this.filterAssets.styles()}\n    `;\n    }\n\n    // Styles for the lock dropdown and the responsibilities card list below the\n    // graph. Split out of styles() to keep each method within the line limit.\n    private componentStyles(): string {\n        return `\n        /* The architecture graph is very wide, so lay the legend out as three\n         * side-by-side columns (fill / border / edge) instead of one tall\n         * column — it keeps the legend short next to the wide graph, and\n         * collapses back to a single column on narrow viewports. */\n        .legend-columns {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: 28px;\n            align-items: start;\n        }\n        .legend-col h3 { margin: 0 0 8px; color: #333; font-size: 15px; }\n        @media (max-width: 800px) { .legend-columns { grid-template-columns: 1fr; } }\n        .wp-lock-control {\n            max-width: 600px;\n            margin: 0 auto 16px;\n            padding: 12px 15px;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n            text-align: center;\n        }\n        .wp-lock-control label { font-weight: bold; color: #333; margin-right: 8px; }\n        .wp-lock-control select { font-size: 14px; padding: 4px 8px; }\n        #wp-responsibilities { max-width: 900px; margin: 24px auto 0; }\n        #wp-responsibilities h2 { color: #333; }\n        .wp-resp-card {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n            margin: 10px 0;\n            padding: 10px 15px;\n        }\n        .wp-resp-card > summary { cursor: pointer; color: #333; }\n        .wp-resp-level {\n            display: inline-block;\n            min-width: 26px;\n            padding: 1px 6px;\n            margin-right: 6px;\n            border-radius: 4px;\n            background: #eef;\n            font-size: 12px;\n            font-weight: bold;\n            text-align: center;\n        }\n        .wp-resp-body { margin-top: 8px; color: #444; }\n        .wp-resp-body code {\n            background: #f2f2f2;\n            padding: 1px 4px;\n            border-radius: 3px;\n            font-family: monospace;\n        }\n        .wp-hidden { display: none; }`;\n    }\n\n    // The legend is laid out in three side-by-side columns (fill / border /\n    // edge) so it stays short next to the very wide architecture graph. Each\n    // column's rows come from a helper below to keep this method within the line\n    // limit; the footnote spans the full width beneath the columns.\n    private legend(): string {\n        return `<div class=\"legend\">\n        <h2>Legend</h2>\n        <div class=\"legend-columns\">\n            <div class=\"legend-col\">\n                <h3>Fill = framework (libType)</h3>\n                ${this.fillItems()}\n            </div>\n            <div class=\"legend-col\">\n                <h3>Border = role</h3>\n                ${this.borderItems()}\n            </div>\n            <div class=\"legend-col\">\n                <h3>Edge lines — <em>why</em> a project depends on an api-lib</h3>\n                ${this.edgeItems()}\n            </div>\n        </div>\n        <div class=\"legend-item\" style=\"margin-top: 15px;\">\n            <em>Each node label shows its dependency level (L#), its framework env set (e.g. [browser, node]), and its role. Every row is one dependency level and nothing else: the HIGHEST level is the top row, levels descend as you read down, and L0 — the foundation libraries everything else is built on — is always the bottom row. Transitive dependencies are allowed but not shown.</em>\n        </div>\n    </div>`;\n    }\n\n    // Column 1 — fill color keyed on the project's framework (libType) env set.\n    private fillItems(): string {\n        return `<div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #FCE4EC;\"></span>\n            <strong>angular:</strong> Angular front-end\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #E3F2FD;\"></span>\n            <strong>react:</strong> React front-end\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #EDE7F6;\"></span>\n            <strong>browser:</strong> browser front-end base env\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #E8F5E9;\"></span>\n            <strong>express:</strong> Express / server side\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #FFF9C4;\"></span>\n            <strong>node:</strong> node server base env\n        </div>`;\n    }\n\n    // Column 2 — border style keyed on the project's role.\n    private borderItems(): string {\n        return `<div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 3px solid green;\"></span>\n            <strong>server:</strong> runnable server app (thick green border)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 3px solid red;\"></span>\n            <strong>client:</strong> client app, e.g. angular (thick red border)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 2px solid #333;\"></span>\n            <strong>designed-lib:</strong> library with a generated @DocumentDesign design (bold border)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 1px solid #ccc;\"></span>\n            <strong>lib:</strong> plain library, no generated design (thin border)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 2px solid #EF6C00;\"></span>\n            <strong>api-lib:</strong> API-contract library (defines <code>@ApiPath</code>/<code>@Rpc</code>/<code>@PubSub</code> <code>*Api</code> classes)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"border: 2px solid #00838F;\"></span>\n            <strong>api-client:</strong> a contract plus its default implementation that talks to an outside system through its SDK\n        </div>`;\n    }\n\n    // Column 3 — edge line style keyed on WHY a project depends on an api-lib.\n    private edgeItems(): string {\n        return `<div class=\"legend-item\">\n            <svg width=\"42\" height=\"12\" style=\"vertical-align: middle; margin-right: 10px;\"><line x1=\"0\" y1=\"6\" x2=\"42\" y2=\"6\" stroke=\"#333\" stroke-width=\"2\"/></svg>\n            <strong>uses:</strong> calls the API (generates an rpc/pubsub client via <code>createRpcClient</code>/<code>createPubSubClient</code>) — also covers a plain library import, since a plain dependency is just a use.\n        </div>\n        <div class=\"legend-item\">\n            <svg width=\"42\" height=\"12\" style=\"vertical-align: middle; margin-right: 10px;\"><line x1=\"0\" y1=\"6\" x2=\"42\" y2=\"6\" stroke=\"#333\" stroke-width=\"2\" stroke-dasharray=\"5,3\"/></svg>\n            <strong>implements:</strong> serves the API — labeled <code>implements: &lt;contracts&gt;</code> so you can see WHICH contracts resolve to this server without opening the JSON. NOTE: this is a build-dependency diagram, so a UML <em>implements</em> arrow can't be used; we use a dashed line to signal a build dep, because this server implements the api and the api is built first, then this server after.\n        </div>\n        <div class=\"legend-item\">\n            <svg width=\"42\" height=\"12\" style=\"vertical-align: middle; margin-right: 10px;\"><line x1=\"0\" y1=\"6\" x2=\"42\" y2=\"6\" stroke=\"#1976d2\" stroke-width=\"2\" stroke-dasharray=\"5,3\"/></svg>\n            <strong>uses/implements:</strong> both — implements some of the api-lib's contracts, uses others\n        </div>`;\n    }\n\n    /**\n     * The page script. The browser code lives in graph-visualizer.client.ts — real, linted TypeScript\n     * that tsc compiles in place, so what this inlines is its COMPILED .js sitting beside this file.\n     *\n     * The substitution is a blind split/join, which is why the placeholder token must appear EXACTLY\n     * ONCE in the client (never in one of its comments): every literal occurrence would otherwise be\n     * replaced by the whole DOT.\n     */\n    private script(model: GraphRenderModel, links: DesignLink[]): string {\n        return this.clientJs()\n            .split(CLIENT_MODEL_PLACEHOLDER).join(this.filterAssets.json(model))\n            .split(CLIENT_DESIGN_LINKS_PLACEHOLDER).join(this.filterAssets.json(links));\n    }\n\n    /**\n     * Write the committed architecture visualization to\n     * architecture/dependencies.html, next to dependencies.json.\n     *\n     * This is a checked-in artifact, regenerated deterministically by\n     * architecture:generate so every box keeps its menu, and the \"View Design\"\n     * item keeps pointing at each project's committed design.html as designs\n     * come and go. The DOT is embedded in the HTML (rendered client-side by\n     * viz.js). Output is deterministic (sorted graph in → same bytes out) so git\n     * only shows a diff when the architecture actually changed.\n     */\n    writeVisualization(\n        graph: EnhancedGraph,\n        workspaceRoot: string,\n        title: string = 'Monorepo Dependency Architecture'\n    ): VisualizationPaths {\n        const outputDir = path.join(workspaceRoot, ARCH_OUTPUT_DIR);\n\n        if (!fs.existsSync(outputDir)) {\n            fs.mkdirSync(outputDir, { recursive: true });\n        }\n\n        const lockControl = this.lockControl(graph);\n        const responsibilities = this.responsibilities.generateSection(graph, workspaceRoot);\n        const html = this.generateHTML(\n            this.generateRenderModel(graph, title), this.designLinks(graph), title, lockControl, responsibilities);\n        const htmlPath = path.join(outputDir, 'dependencies.html');\n        fs.writeFileSync(htmlPath, html, 'utf-8');\n\n        return new VisualizationPaths(htmlPath);\n    }\n\n    /**\n     * Open the HTML visualization in the default browser\n     */\n    openVisualization(htmlPath: string): boolean {\n        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions\n        try {\n            const platform = process.platform;\n            let openCommand: string;\n\n            if (platform === 'darwin') {\n                openCommand = `open \"${htmlPath}\"`;\n            } else if (platform === 'win32') {\n                openCommand = `start \"\" \"${htmlPath}\"`;\n            } else {\n                openCommand = `xdg-open \"${htmlPath}\"`;\n            }\n\n            execSync(openCommand, { stdio: 'ignore' });\n            return true;\n        } catch (err: unknown) {\n            const error = toError(err);\n            console.warn(`⚠️  Could not open browser: ${error.message}`);\n            return false;\n        }\n    }\n}\n"]}

package/src/lib/runtime-html-page.d.ts

@@ -1,3 +1,4 @@
+import { GraphRenderModel } from './graph-render-model';
 /**
  * The runtime-architecture HTML page: its styles, the shared floating node menu, the graph host
  * and the legend.
@@ -9,17 +10,19 @@
  */
 export declare class RuntimeHtmlPage {
     private readonly clientJs;
+    private readonly filterJs;
+    private readonly filterAssets;
     private readonly snapshot;
     /** The ONE floating-node-menu implementation, shared with dependencies.html and every design.html. */
     private readonly nodeMenu;
-    constructor(clientJs?: () => string);
-    render(dot: string, title: string): string;
+    constructor(clientJs?: () => string, filterJs?: () => string);
+    render(model: GraphRenderModel, title: string): string;
     /**
      * The browser half lives in runtime-visualizer.client.ts (matching graph-visualizer.client.ts)
      * rather than in a template literal here: it renders with @viz-js/viz v3, redraws every queue
      * node as a true horizontal cylinder, and wires the shared node menu onto every box — more
      * logic than belongs inline in a .ts string. The substitution is a blind split/join, so the
-     * placeholder must appear EXACTLY ONCE in the client.
+     * render-model placeholder must appear EXACTLY ONCE in the client.
      */
     private script;
     /**

package/src/lib/runtime-html-page.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RuntimeHtmlPage = void 0;
+const graph_render_model_1 = require("./graph-render-model");
 const saved_snapshot_1 = require("./saved-snapshot");
 const graph_visualizer_1 = require("./graph-visualizer");
 const graph_node_menu_1 = require("./graph-node-menu");
@@ -16,13 +17,16 @@ const runtime_viz_theme_1 = require("./runtime-viz-theme");
  */
 class RuntimeHtmlPage {
     clientJs;
+    filterJs;
+    filterAssets = new graph_render_model_1.GraphFilterAssets();
     snapshot = new saved_snapshot_1.SavedSnapshot();
     /** The ONE floating-node-menu implementation, shared with dependencies.html and every design.html. */
     nodeMenu = new graph_node_menu_1.GraphNodeMenu();
-    constructor(clientJs = () => (0, graph_visualizer_1.readCompiledClient)('runtime-visualizer.client.js')) {
+    constructor(clientJs = () => (0, graph_visualizer_1.readCompiledClient)('runtime-visualizer.client.js'), filterJs = () => (0, graph_visualizer_1.readCompiledClient)('graph-filter.client.js')) {
         this.clientJs = clientJs;
+        this.filterJs = filterJs;
     }
-    render(dot, title) {
+    render(model, title) {
         return `<!DOCTYPE html>
 <html>
 <head>
@@ -38,10 +42,13 @@ class RuntimeHtmlPage {
     <h1>${title}</h1>
     ${this.snapshot.html()}
     <p class="hint">💡 <strong>Click any box</strong> for its menu — <strong>Lock</strong> dims every other box and every arrow so one service, queue, datastore or external system stands alone; <strong>Unlock</strong> restores the whole picture.</p>
+    <p class="hint"><strong>Filter Unconnected</strong> keeps incoming and outgoing chains and compacts the picture. <strong>Turn off Filter</strong> restores it.</p>
+    ${this.filterAssets.html()}
     <div id="graph"></div>
     ${(0, runtime_viz_theme_1.legendHtml)()}
     <script>${this.nodeMenu.script()}</script>
-    <script>${this.script(dot)}</script>
+    <script>${this.filterJs()}</script>
+    <script>${this.script(model)}</script>
 </body>
 </html>`;
     }
@@ -50,10 +57,10 @@ class RuntimeHtmlPage {
      * rather than in a template literal here: it renders with @viz-js/viz v3, redraws every queue
      * node as a true horizontal cylinder, and wires the shared node menu onto every box — more
      * logic than belongs inline in a .ts string. The substitution is a blind split/join, so the
-     * placeholder must appear EXACTLY ONCE in the client.
+     * render-model placeholder must appear EXACTLY ONCE in the client.
      */
-    script(dot) {
-        return this.clientJs().split(graph_visualizer_1.CLIENT_DOT_PLACEHOLDER).join(JSON.stringify(dot));
+    script(model) {
+        return this.clientJs().split(graph_visualizer_1.CLIENT_MODEL_PLACEHOLDER).join(this.filterAssets.json(model));
     }
     /**
      * Page styles, including the shared menu stylesheet: the clickable cursor + blue glow on every
@@ -73,6 +80,7 @@ class RuntimeHtmlPage {
          * carries the cursor + blue glow and the dim/undim rules the lock toggles. Shared verbatim
          * with architecture/dependencies.html and every project's design.html. */
         ${this.nodeMenu.styles()}
+        ${this.filterAssets.styles()}
         ${this.nodeMenu.dimStyles('#graph')}
         #graph { text-align: center; background: white; padding: 20px; border-radius: 8px; overflow-x: auto; }
         #graph svg { max-width: 100%; height: auto; }

package/src/lib/runtime-html-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"runtime-html-page.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/runtime-html-page.ts"],"names":[],"mappings":";;;AAAA,qDAAiD;AACjD,yDAAgF;AAChF,uDAAkD;AAClD,2DAAiD;AAEjD;;;;;;;;GAQG;AACH,MAAa,eAAe;IAMH;IALJ,QAAQ,GAAG,IAAI,8BAAa,EAAE,CAAC;IAChD,sGAAsG;IACrF,QAAQ,GAAG,IAAI,+BAAa,EAAE,CAAC;IAEhD,YACqB,WAAyB,GAAW,EAAE,CACnD,IAAA,qCAAkB,EAAC,8BAA8B,CAAC;QADrC,aAAQ,GAAR,QAAQ,CAC6B;IACvD,CAAC;IAEJ,MAAM,CAAC,GAAW,EAAE,KAAa;QAC7B,OAAO;;;;;;;aAOF,KAAK;;aAEL,IAAI,CAAC,MAAM,EAAE;;;UAGhB,KAAK;MACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;;MAGpB,IAAA,8BAAU,GAAE;cACJ,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;cACtB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;;QAEtB,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACK,MAAM,CAAC,GAAW;QACtB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,yCAAsB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;IACnF,CAAC;IAED;;;;;;;;OAQG;IACK,MAAM;QACV,OAAO;;;;;;;UAOL,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;UACtB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sFAgC2C,CAAC;IACnF,CAAC;CACJ;AAjGD,0CAiGC","sourcesContent":["import { SavedSnapshot } from './saved-snapshot';\nimport { CLIENT_DOT_PLACEHOLDER, readCompiledClient } from './graph-visualizer';\nimport { GraphNodeMenu } from './graph-node-menu';\nimport { legendHtml } from './runtime-viz-theme';\n\n/**\n * The runtime-architecture HTML page: its styles, the shared floating node menu, the graph host\n * and the legend.\n *\n * A CLASS rather than a bag of module functions so the client-text seam can be a constructor\n * parameter the way GraphVisualizer's is: the default reads the COMPILED sibling, which exists in\n * dist and in the published tarball but NOT in a source checkout, and a unit test running from\n * source hands in the text itself instead of requiring the package to have been built first.\n */\nexport class RuntimeHtmlPage {\n    private readonly snapshot = new SavedSnapshot();\n    /** The ONE floating-node-menu implementation, shared with dependencies.html and every design.html. */\n    private readonly nodeMenu = new GraphNodeMenu();\n\n    constructor(\n        private readonly clientJs: () => string = (): string =>\n            readCompiledClient('runtime-visualizer.client.js'),\n    ) {}\n\n    render(dot: string, title: string): string {\n        return `<!DOCTYPE html>\n<html>\n<head>\n    <!-- REQUIRED: the cron node's label is a literal ⏰, and the DOT is embedded in this file. With\n         no declared charset the browser falls back to a locale guess and renders it as mojibake\n         (\"â °\") whenever the page is served without a charset header. -->\n    <meta charset=\"utf-8\">\n    <title>${title}</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/@viz-js/viz@3.28.0/dist/viz-global.js\"></script>\n    <style>${this.styles()}</style>\n</head>\n<body>\n    <h1>${title}</h1>\n    ${this.snapshot.html()}\n    <p class=\"hint\">💡 <strong>Click any box</strong> for its menu — <strong>Lock</strong> dims every other box and every arrow so one service, queue, datastore or external system stands alone; <strong>Unlock</strong> restores the whole picture.</p>\n    <div id=\"graph\"></div>\n    ${legendHtml()}\n    <script>${this.nodeMenu.script()}</script>\n    <script>${this.script(dot)}</script>\n</body>\n</html>`;\n    }\n\n    /**\n     * The browser half lives in runtime-visualizer.client.ts (matching graph-visualizer.client.ts)\n     * rather than in a template literal here: it renders with @viz-js/viz v3, redraws every queue\n     * node as a true horizontal cylinder, and wires the shared node menu onto every box — more\n     * logic than belongs inline in a .ts string. The substitution is a blind split/join, so the\n     * placeholder must appear EXACTLY ONCE in the client.\n     */\n    private script(dot: string): string {\n        return this.clientJs().split(CLIENT_DOT_PLACEHOLDER).join(JSON.stringify(dot));\n    }\n\n    /**\n     * Page styles, including the shared menu stylesheet: the clickable cursor + blue glow on every\n     * box, and the dim/undim rules the lock toggles, scoped to this page's `#graph` host. Those two\n     * blocks are shared verbatim with architecture/dependencies.html and every design.html.\n     *\n     * The legend swatches are hand-drawn inline SVG on purpose: the alternative is shelling out to\n     * Graphviz at generate time, which would make writing the HTML depend on a `dot` binary being\n     * installed — a dependency this tool does not otherwise have, since rendering is client-side.\n     */\n    private styles(): string {\n        return `\n        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #f5f5f5; }\n        h1 { text-align: center; color: #333; }\n        .hint { text-align: center; color: #555; margin: 0 0 16px; }\n        /* Every box is clickable and opens the shared floating menu, so the menu's own stylesheet\n         * carries the cursor + blue glow and the dim/undim rules the lock toggles. Shared verbatim\n         * with architecture/dependencies.html and every project's design.html. */\n        ${this.nodeMenu.styles()}\n        ${this.nodeMenu.dimStyles('#graph')}\n        #graph { text-align: center; background: white; padding: 20px; border-radius: 8px; overflow-x: auto; }\n        #graph svg { max-width: 100%; height: auto; }\n        .legend {\n            margin: 20px auto;\n            max-width: 1100px;\n            padding: 15px 20px;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend h2 { margin-top: 0; color: #333; }\n        .legend-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }\n        .legend-col h3 { margin: 0 0 10px; color: #333; font-size: 15px; border-bottom: 1px solid #eee; padding-bottom: 5px; }\n        .legend-item { margin: 9px 0; display: flex; align-items: center; gap: 10px; line-height: 1.4; color: #444; }\n        /* Prose rows carry no swatch, so they must NOT be flex containers: flex would promote every\n         * inline <strong>/<em>/<code> to a flex item and shred the sentence into columns. */\n        .legend-note { margin: 9px 0; line-height: 1.5; color: #444; }\n        .legend-box-anatomy {\n            margin: 0 0 12px;\n            padding: 8px 10px;\n            background: #f7f7f7;\n            border-radius: 4px;\n            font-family: monospace;\n            font-size: 12px;\n            line-height: 1.5;\n            color: #333;\n            white-space: pre;\n            overflow-x: auto;\n        }\n        .sw { flex: 0 0 auto; display: inline-flex; }\n        code { background: #f2f2f2; padding: 1px 4px; border-radius: 3px; font-family: monospace; }\n        @media (max-width: 900px) { .legend-columns { grid-template-columns: 1fr; } }`;\n    }\n}\n"]}
+{"version":3,"file":"runtime-html-page.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/runtime-html-page.ts"],"names":[],"mappings":";;;AAAA,6DAA2E;AAC3E,qDAAiD;AACjD,yDAAkF;AAClF,uDAAkD;AAClD,2DAAiD;AAEjD;;;;;;;;GAQG;AACH,MAAa,eAAe;IAOH;IAEA;IARJ,YAAY,GAAG,IAAI,sCAAiB,EAAE,CAAC;IACvC,QAAQ,GAAG,IAAI,8BAAa,EAAE,CAAC;IAChD,sGAAsG;IACrF,QAAQ,GAAG,IAAI,+BAAa,EAAE,CAAC;IAEhD,YACqB,WAAyB,GAAW,EAAE,CACnD,IAAA,qCAAkB,EAAC,8BAA8B,CAAC,EACrC,WAAyB,GAAW,EAAE,CAAC,IAAA,qCAAkB,EAAC,wBAAwB,CAAC;QAFnF,aAAQ,GAAR,QAAQ,CAC6B;QACrC,aAAQ,GAAR,QAAQ,CAA2E;IACrG,CAAC;IAEJ,MAAM,CAAC,KAAuB,EAAE,KAAa;QACzC,OAAO;;;;;;;aAOF,KAAK;;aAEL,IAAI,CAAC,MAAM,EAAE;;;UAGhB,KAAK;MACT,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE;;;MAGpB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE;;MAExB,IAAA,8BAAU,GAAE;cACJ,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;cACtB,IAAI,CAAC,QAAQ,EAAE;cACf,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;;QAExB,CAAC;IACL,CAAC;IAED;;;;;;OAMG;IACK,MAAM,CAAC,KAAuB;QAClC,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,2CAAwB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/F,CAAC;IAED;;;;;;;;OAQG;IACK,MAAM;QACV,OAAO;;;;;;;UAOL,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;UACtB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE;UAC1B,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sFAgC2C,CAAC;IACnF,CAAC;CACJ;AAvGD,0CAuGC","sourcesContent":["import { GraphRenderModel, GraphFilterAssets } from './graph-render-model';\nimport { SavedSnapshot } from './saved-snapshot';\nimport { CLIENT_MODEL_PLACEHOLDER, readCompiledClient } from './graph-visualizer';\nimport { GraphNodeMenu } from './graph-node-menu';\nimport { legendHtml } from './runtime-viz-theme';\n\n/**\n * The runtime-architecture HTML page: its styles, the shared floating node menu, the graph host\n * and the legend.\n *\n * A CLASS rather than a bag of module functions so the client-text seam can be a constructor\n * parameter the way GraphVisualizer's is: the default reads the COMPILED sibling, which exists in\n * dist and in the published tarball but NOT in a source checkout, and a unit test running from\n * source hands in the text itself instead of requiring the package to have been built first.\n */\nexport class RuntimeHtmlPage {\n    private readonly filterAssets = new GraphFilterAssets();\n    private readonly snapshot = new SavedSnapshot();\n    /** The ONE floating-node-menu implementation, shared with dependencies.html and every design.html. */\n    private readonly nodeMenu = new GraphNodeMenu();\n\n    constructor(\n        private readonly clientJs: () => string = (): string =>\n            readCompiledClient('runtime-visualizer.client.js'),\n        private readonly filterJs: () => string = (): string => readCompiledClient('graph-filter.client.js'),\n    ) {}\n\n    render(model: GraphRenderModel, title: string): string {\n        return `<!DOCTYPE html>\n<html>\n<head>\n    <!-- REQUIRED: the cron node's label is a literal ⏰, and the DOT is embedded in this file. With\n         no declared charset the browser falls back to a locale guess and renders it as mojibake\n         (\"â °\") whenever the page is served without a charset header. -->\n    <meta charset=\"utf-8\">\n    <title>${title}</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/@viz-js/viz@3.28.0/dist/viz-global.js\"></script>\n    <style>${this.styles()}</style>\n</head>\n<body>\n    <h1>${title}</h1>\n    ${this.snapshot.html()}\n    <p class=\"hint\">💡 <strong>Click any box</strong> for its menu — <strong>Lock</strong> dims every other box and every arrow so one service, queue, datastore or external system stands alone; <strong>Unlock</strong> restores the whole picture.</p>\n    <p class=\"hint\"><strong>Filter Unconnected</strong> keeps incoming and outgoing chains and compacts the picture. <strong>Turn off Filter</strong> restores it.</p>\n    ${this.filterAssets.html()}\n    <div id=\"graph\"></div>\n    ${legendHtml()}\n    <script>${this.nodeMenu.script()}</script>\n    <script>${this.filterJs()}</script>\n    <script>${this.script(model)}</script>\n</body>\n</html>`;\n    }\n\n    /**\n     * The browser half lives in runtime-visualizer.client.ts (matching graph-visualizer.client.ts)\n     * rather than in a template literal here: it renders with @viz-js/viz v3, redraws every queue\n     * node as a true horizontal cylinder, and wires the shared node menu onto every box — more\n     * logic than belongs inline in a .ts string. The substitution is a blind split/join, so the\n     * render-model placeholder must appear EXACTLY ONCE in the client.\n     */\n    private script(model: GraphRenderModel): string {\n        return this.clientJs().split(CLIENT_MODEL_PLACEHOLDER).join(this.filterAssets.json(model));\n    }\n\n    /**\n     * Page styles, including the shared menu stylesheet: the clickable cursor + blue glow on every\n     * box, and the dim/undim rules the lock toggles, scoped to this page's `#graph` host. Those two\n     * blocks are shared verbatim with architecture/dependencies.html and every design.html.\n     *\n     * The legend swatches are hand-drawn inline SVG on purpose: the alternative is shelling out to\n     * Graphviz at generate time, which would make writing the HTML depend on a `dot` binary being\n     * installed — a dependency this tool does not otherwise have, since rendering is client-side.\n     */\n    private styles(): string {\n        return `\n        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #f5f5f5; }\n        h1 { text-align: center; color: #333; }\n        .hint { text-align: center; color: #555; margin: 0 0 16px; }\n        /* Every box is clickable and opens the shared floating menu, so the menu's own stylesheet\n         * carries the cursor + blue glow and the dim/undim rules the lock toggles. Shared verbatim\n         * with architecture/dependencies.html and every project's design.html. */\n        ${this.nodeMenu.styles()}\n        ${this.filterAssets.styles()}\n        ${this.nodeMenu.dimStyles('#graph')}\n        #graph { text-align: center; background: white; padding: 20px; border-radius: 8px; overflow-x: auto; }\n        #graph svg { max-width: 100%; height: auto; }\n        .legend {\n            margin: 20px auto;\n            max-width: 1100px;\n            padding: 15px 20px;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend h2 { margin-top: 0; color: #333; }\n        .legend-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }\n        .legend-col h3 { margin: 0 0 10px; color: #333; font-size: 15px; border-bottom: 1px solid #eee; padding-bottom: 5px; }\n        .legend-item { margin: 9px 0; display: flex; align-items: center; gap: 10px; line-height: 1.4; color: #444; }\n        /* Prose rows carry no swatch, so they must NOT be flex containers: flex would promote every\n         * inline <strong>/<em>/<code> to a flex item and shred the sentence into columns. */\n        .legend-note { margin: 9px 0; line-height: 1.5; color: #444; }\n        .legend-box-anatomy {\n            margin: 0 0 12px;\n            padding: 8px 10px;\n            background: #f7f7f7;\n            border-radius: 4px;\n            font-family: monospace;\n            font-size: 12px;\n            line-height: 1.5;\n            color: #333;\n            white-space: pre;\n            overflow-x: auto;\n        }\n        .sw { flex: 0 0 auto; display: inline-flex; }\n        code { background: #f2f2f2; padding: 1px 4px; border-radius: 3px; font-family: monospace; }\n        @media (max-width: 900px) { .legend-columns { grid-template-columns: 1fr; } }`;\n    }\n}\n"]}