@webpieces/nx-webpieces-rules 0.4.881 → 0.4.883

package/src/lib/graph-render-model.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-render-model.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-render-model.ts"],"names":[],"mappings":"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","sourcesContent":["import { dotValue } from './dot-syntax';\nimport { LevelBand } from './graph-level-bands';\nimport { LegendFacts, NodeFacts, NodeModeDots } from './graph-color-modes';\n\n/**\n * Renderer-owned records, captured while emitting DOT, never recovered by parsing labels.\n *\n * `dot` is the statement `fullDot` carries. `modes` and `tags` are set only by the architecture\n * graph, whose page switches color modes by re-rendering each box from its per-mode statement and\n * filters boxes by their role and framework tags; the runtime graph has one look and leaves both null.\n */\nexport class RenderNode {\n    constructor(\n        public readonly id: string,\n        public readonly dot: string,\n        public readonly modes: NodeModeDots | null,\n        public readonly tags: NodeTags | null,\n    ) {}\n}\n\n/** What the architecture page's Filter matches a box on: its level, role and framework tags. */\nexport class NodeTags {\n    constructor(\n        public readonly level: number,\n        public readonly role: string,\n        public readonly frameworks: string[],\n    ) {}\n}\n\nexport class RenderEdge {\n    constructor(\n        public readonly from: string,\n        public readonly to: string,\n        public readonly dot: string,\n        public readonly id: string,\n    ) {}\n}\n\n/** The immutable drawable snapshot carried by a generated page. */\nexport class GraphRenderModel {\n    readonly nodes: RenderNode[] = [];\n    readonly edges: RenderEdge[] = [];\n    bands: LevelBand[] = [];\n    fullDot = '';\n    header = '';\n    footer = '';\n    /** The colors and roles in use, so the page's legend lists exactly those (architecture graph). */\n    legend = new LegendFacts();\n\n    node(id: string, dot: string): string {\n        this.nodes.push(new RenderNode(id, dot, null, null));\n        return dot;\n    }\n\n    /** A box drawn differently per color mode; `fullDot` carries its RUNTIME statement. */\n    styledNode(facts: NodeFacts, modes: NodeModeDots): string {\n        this.nodes.push(\n            new RenderNode(facts.nodeId, modes.runtime, modes, new NodeTags(facts.level, facts.role, facts.frameworks)),\n        );\n        return modes.runtime;\n    }\n\n    completeEndpoints(): void {\n        const ids = new Set(this.nodes.map((node) => node.id));\n        for (const edge of this.edges) {\n            for (const id of [edge.from, edge.to]) {\n                if (ids.has(id)) continue;\n                ids.add(id);\n                this.node(id, `  \"${dotValue(id)}\";\\n`);\n            }\n        }\n    }\n\n    edge(from: string, to: string, dot: string): string {\n        const id = `wp-real-edge-${this.edges.length}`;\n        const statement = `${dot.slice(0, -2)} [id=\"${id}\"];\\n`;\n        this.edges.push(new RenderEdge(from, to, statement, id));\n        return statement;\n    }\n}\n\n/** Shared filter chrome and script-safe JSON for pages opened directly from disk. */\nexport class GraphFilterAssets {\n    json<T>(value: T): string {\n        return JSON.stringify(value).replace(/</g, '\\\\u003c');\n    }\n\n    html(): string {\n        return (\n            '<p id=\"wp-filter-status\" hidden>Filtering: <strong id=\"wp-filter-anchor\"></strong> ' +\n            '<button id=\"wp-filter-off\" type=\"button\">Turn off Filter</button></p>' +\n            '<p id=\"wp-graph-error\" role=\"alert\" hidden></p>'\n        );\n    }\n\n    styles(): string {\n        return (\n            '#wp-filter-status { text-align:center; } #wp-graph-error { color:#b71c1c; } ' +\n            '#graph .wp-filter-anchor polygon, #graph .wp-filter-anchor path, ' +\n            '#graph .wp-filter-anchor ellipse { stroke:#1565c0; stroke-width:3; }'\n        );\n    }\n}\n"]}
+{"version":3,"file":"graph-render-model.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-render-model.ts"],"names":[],"mappings":"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","sourcesContent":["import { dotValue } from './dot-syntax';\nimport { LevelBand } from './graph-level-bands';\nimport { LegendFacts, NodeFacts, NodeModeDots } from './graph-color-modes';\n\n/**\n * Renderer-owned records, captured while emitting DOT, never recovered by parsing labels.\n *\n * `dot` is the statement `fullDot` carries. `modes` and `tags` are set only by the architecture\n * graph, whose page switches color modes by re-rendering each box from its per-mode statement and\n * filters boxes by their role and framework tags; the runtime graph has one look and leaves both null.\n *\n * `products` is set on BOTH graphs (#1179): the products a box belongs to, which each page's product\n * filter matches on. Empty for a box in no product.\n */\nexport class RenderNode {\n    constructor(\n        public readonly id: string,\n        public readonly dot: string,\n        public readonly modes: NodeModeDots | null,\n        public readonly tags: NodeTags | null,\n        public readonly products: string[],\n    ) {}\n}\n\n/** What the architecture page's Filter matches a box on: its level, role and framework tags. */\nexport class NodeTags {\n    constructor(\n        public readonly level: number,\n        public readonly role: string,\n        public readonly frameworks: string[],\n    ) {}\n}\n\nexport class RenderEdge {\n    constructor(\n        public readonly from: string,\n        public readonly to: string,\n        public readonly dot: string,\n        public readonly id: string,\n    ) {}\n}\n\n/** The immutable drawable snapshot carried by a generated page. */\nexport class GraphRenderModel {\n    readonly nodes: RenderNode[] = [];\n    readonly edges: RenderEdge[] = [];\n    bands: LevelBand[] = [];\n    fullDot = '';\n    header = '';\n    footer = '';\n    /** The colors and roles in use, so the page's legend lists exactly those (architecture graph). */\n    legend = new LegendFacts();\n\n    node(id: string, dot: string, products: string[] = []): string {\n        this.nodes.push(new RenderNode(id, dot, null, null, products));\n        return dot;\n    }\n\n    /**\n     * Every product a declared box (a queue, a cron trigger, an external system) inherits from the\n     * services its edges touch (#1179): it belongs to whichever product's services it is attached to.\n     * Called by the runtime graph once every edge is emitted; RenderNode is immutable, so a node gains\n     * its products by being replaced.\n     */\n    attachProducts(isService: (id: string) => boolean): void {\n        const byId = new Map<string, RenderNode>();\n        for (const node of this.nodes) byId.set(node.id, node);\n        for (let index = 0; index < this.nodes.length; index++) {\n            const node = this.nodes[index];\n            if (isService(node.id)) continue;\n            const inherited = new Set<string>();\n            for (const edge of this.edges) {\n                const other = edge.from === node.id ? edge.to : edge.to === node.id ? edge.from : null;\n                if (other === null || !isService(other)) continue;\n                for (const product of byId.get(other)?.products ?? []) inherited.add(product);\n            }\n            if (inherited.size === 0) continue;\n            this.nodes[index] = new RenderNode(node.id, node.dot, node.modes, node.tags, [...inherited].sort());\n        }\n    }\n\n    /** A box drawn differently per color mode; `fullDot` carries its RUNTIME statement. */\n    styledNode(facts: NodeFacts, modes: NodeModeDots): string {\n        this.nodes.push(\n            new RenderNode(\n                facts.nodeId,\n                modes.runtime,\n                modes,\n                new NodeTags(facts.level, facts.role, facts.frameworks),\n                facts.products,\n            ),\n        );\n        return modes.runtime;\n    }\n\n    completeEndpoints(): void {\n        const ids = new Set(this.nodes.map((node) => node.id));\n        for (const edge of this.edges) {\n            for (const id of [edge.from, edge.to]) {\n                if (ids.has(id)) continue;\n                ids.add(id);\n                this.node(id, `  \"${dotValue(id)}\";\\n`);\n            }\n        }\n    }\n\n    edge(from: string, to: string, dot: string): string {\n        const id = `wp-real-edge-${this.edges.length}`;\n        const statement = `${dot.slice(0, -2)} [id=\"${id}\"];\\n`;\n        this.edges.push(new RenderEdge(from, to, statement, id));\n        return statement;\n    }\n}\n\n/** Shared filter chrome and script-safe JSON for pages opened directly from disk. */\nexport class GraphFilterAssets {\n    json<T>(value: T): string {\n        return JSON.stringify(value).replace(/</g, '\\\\u003c');\n    }\n\n    html(): string {\n        return (\n            '<p id=\"wp-filter-status\" hidden>Filtering: <strong id=\"wp-filter-anchor\"></strong> ' +\n            '<button id=\"wp-filter-off\" type=\"button\">Turn off Filter</button></p>' +\n            '<p id=\"wp-graph-error\" role=\"alert\" hidden></p>'\n        );\n    }\n\n    styles(): string {\n        return (\n            '#wp-filter-status { text-align:center; } #wp-graph-error { color:#b71c1c; } ' +\n            '#graph .wp-filter-anchor polygon, #graph .wp-filter-anchor path, ' +\n            '#graph .wp-filter-anchor ellipse { stroke:#1565c0; stroke-width:3; }'\n        );\n    }\n}\n"]}

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

@@ -23,6 +23,11 @@ import type { ProjectApiRelations } from './api-usage/api-relations';
  *    transport (rpc | pubsub). Derived by scanning source (see api-usage/).
  */
 export interface GraphEntry {
+    /**
+     * The project's row: its dependency depth (0 = no deps) — except that every server, client and
+     * app (APP_ROLES) is pinned to the TOP level, and a bundle above the apps it aggregates (#1179,
+     * graph-entry-levels.ts). Every dependency still sits strictly below its dependent.
+     */
     level: number;
     dependsOn: string[];
     framework?: string[];
@@ -56,6 +61,14 @@ export interface GraphEntry {
      * Absent (the overwhelmingly normal case) means this project cuts nothing.
      */
     cutLegacyCycle?: string[];
+    /**
+     * The products this project belongs to (#1179), sorted: every product whose `product:<name>`-tagged
+     * project reaches it by a downward walk over `dependsOn` (a tagged project is in its own products).
+     * It is the project's blast radius — a change here is a change to each of these products. DERIVED,
+     * never declared on a library; absent when no product reaches it (and everywhere when no project
+     * carries a `product:` tag). See graph-products.ts.
+     */
+    products?: string[];
     shortDescription?: string;
     responsibilitiesFile?: string;
     designFile?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"graph-sorter.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-sorter.ts"],"names":[],"mappings":";AAAA;;;;;;;GAOG;;AAuFH,4DAyCC;AASD,wDAgBC;AAtJD,iDAAsD;AA2EtD;;;;;;;;GAQG;AACH,SAAgB,wBAAwB,CAAC,KAA+B;IACpE,MAAM,MAAM,GAAe,EAAE,CAAC;IAC9B,MAAM,SAAS,GAAG,IAAI,GAAG,EAAU,CAAC;IACpC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEvC,OAAO,SAAS,CAAC,IAAI,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC;QACzC,MAAM,YAAY,GAAa,EAAE,CAAC;QAElC,KAAK,MAAM,OAAO,IAAI,WAAW,EAAE,CAAC;YAChC,IAAI,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC;gBAAE,SAAS;YAErC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAClC,uEAAuE;YACvE,MAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YAEpE,IAAI,mBAAmB,EAAE,CAAC;gBACtB,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/B,CAAC;QACL,CAAC;QAED,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC5B,gFAAgF;YAChF,mFAAmF;YACnF,kFAAkF;YAClF,IAAI,mCAAoB,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC;YACrE,sFAAsF;YACtF,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAS,EAAW,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YAChF,MAAM,IAAI,KAAK,CACX,+EAA+E,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CACxG,CAAC;QACN,CAAC;QAED,4DAA4D;QAC5D,YAAY,CAAC,IAAI,EAAE,CAAC;QACpB,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAE1B,oBAAoB;QACpB,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED;;;;;;GAMG;AACH,SAAgB,sBAAsB,CAAC,KAA+B;IAClE,MAAM,MAAM,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAkB,EAAE,CAAC;IAEjC,+DAA+D;IAC/D,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE;QACjC,KAAK,MAAM,OAAO,IAAI,KAAK,EAAE,CAAC;YAC1B,6CAA6C;YAC7C,MAAM,CAAC,OAAO,CAAC,GAAG;gBACd,KAAK,EAAE,UAAU;gBACjB,SAAS,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;aAC3C,CAAC;QACN,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAClB,CAAC","sourcesContent":["/**\n * Graph Sorter\n *\n * Performs topological sorting on the dependency graph to:\n * 1. Detect circular dependencies (fails if cycle found)\n * 2. Assign level numbers to each project (level 0 = no deps, level 1 = depends on level 0, etc.)\n * 3. Group projects into layers for deterministic ordering\n */\n\nimport type { ProjectApiRelations } from './api-usage/api-relations';\nimport { ProjectCycleDetector } from './graph-cycles';\n\n/**\n * Graph entry with level metadata plus AI-oriented metadata filled in by\n * enrichGraph() (lib/graph-metadata.ts) before the graph is saved:\n *  - framework: the project's libType — the SET of runtime environments it is\n *    validated to run in, drawn from browser | react | angular | node | express\n *    (e.g. [\"browser\",\"node\"]); from its `framework:` nx tags (source of truth)\n *    or inferred from package.json deps\n *  - shortDescription: summary extracted from the project's responsibilities.md\n *  - responsibilitiesFile: repo-relative path to the FULL responsibilities doc\n *  - designFile: repo-relative path to the generated DI design.json (only for\n *    project.json projects)\n *  - apiRelations: for each api-lib in `dependsOn`, WHY the edge exists — the\n *    APIs this project implements (serves) and/or uses (calls), each with its\n *    transport (rpc | pubsub). Derived by scanning source (see api-usage/).\n */\nexport interface GraphEntry {\n    level: number;\n    dependsOn: string[];\n    framework?: string[];\n    role?: string;\n    /**\n     * The name CLIENTS address this app by at runtime (`new ClientConfig('helper-fsdb')`) — its\n     * deployed service name, DECLARED in project.json as metadata.webpieces.serviceName. Absent for\n     * anything nothing calls by name (libraries, browser apps). See service-name-resolver.ts.\n     */\n    serviceName?: string;\n    /**\n     * The service(s) this project's clients call when the call site cannot carry a literal\n     * `ClientConfig` — the symmetric half of `serviceName`. DECLARED in project.json as\n     * metadata.webpieces.callsService, either a single service name (every untargeted `uses` aims\n     * there) or an `{ apiClassName: serviceName }` map (a client that calls several). Absent for a\n     * project that never calls anything, or one whose call sites all carry literals.\n     * See service-name-resolver.ts.\n     */\n    callsService?: string | Record<string, string>;\n    /**\n     * When false, the project is hidden from the rendered architecture graphs\n     * (its box AND every edge touching it are omitted from dependencies.html and\n     * the runtime graph). It stays in this JSON so the data view is complete.\n     * Absent means drawn (the default). From the project's `drawOnGraph:` nx tag.\n     */\n    drawOnGraph?: boolean;\n    /**\n     * Target service names whose RUNTIME edge from this project is cut out of leveling and cycle\n     * detection, from this project's `cutLegacyCycle:<target>` nx tags. Per EDGE, not per project.\n     * An admission of legacy debt, never an approved pattern — see cut-legacy-cycle-resolver.ts.\n     * Absent (the overwhelmingly normal case) means this project cuts nothing.\n     */\n    cutLegacyCycle?: string[];\n    shortDescription?: string;\n    responsibilitiesFile?: string;\n    designFile?: string;\n    apiRelations?: ProjectApiRelations;\n    runtimeDeclaration?: string;\n    runtimeComposition?: boolean;\n    /**\n     * The @webpieces runtime packages this project's OWN package.json declares — http-routing,\n     * http-server, http-client-node, http-client-browser, cloudtasks-client. Omitted when it\n     * declares none, so TOTAL absence across the file means the file predates this field and\n     * nothing is auto-hidden (see runtime-graph.ts). Core/util/logging packages are deliberately\n     * not markers; see runtime-participant-resolver.ts for why.\n     *\n     * The runtime graph ORs this over a node's library closure: a server whose whole webpieces\n     * stack comes from a shared bootstrap lib participates even though it declares nothing itself.\n     */\n    webpiecesRuntime?: string[];\n}\n\n/**\n * Enhanced graph format with level information\n */\nexport type EnhancedGraph = Record<string, GraphEntry>;\n\n/**\n * Compute topological layers for dependency graph using Kahn's algorithm\n *\n * Projects are grouped into layers where each layer only depends on previous layers.\n * Throws an error if a circular dependency is detected.\n *\n * @param graph - Dependency graph { project: [deps] }\n * @returns Array of layers, each containing sorted project names\n */\nexport function computeTopologicalLayers(graph: Record<string, string[]>): string[][] {\n    const layers: string[][] = [];\n    const processed = new Set<string>();\n    const allProjects = Object.keys(graph);\n\n    while (processed.size < allProjects.length) {\n        const currentLayer: string[] = [];\n\n        for (const project of allProjects) {\n            if (processed.has(project)) continue;\n\n            const deps = graph[project] || [];\n            // Check if all dependencies are in previous layers (already processed)\n            const allDepsInPrevLayers = deps.every((dep) => processed.has(dep));\n\n            if (allDepsInPrevLayers) {\n                currentLayer.push(project);\n            }\n        }\n\n        if (currentLayer.length === 0) {\n            // No progress made = circular dependency. ProjectCycleDetector is the ONE cycle\n            // implementation in this package — it names every chain, in project keys, with the\n            // fix — so this reports through it rather than keeping a second, weaker DFS here.\n            new ProjectCycleDetector().assertAcyclic(graph, 'the project graph');\n            // Unreachable: Kahn only stalls on a cycle, and the assert above throws on every one.\n            const remaining = allProjects.filter((p: string): boolean => !processed.has(p));\n            throw new Error(\n                `Topological sort stalled with no cycle to report — projects left unlayered: ${remaining.join(', ')}`,\n            );\n        }\n\n        // Sort alphabetically within layer for deterministic output\n        currentLayer.sort();\n        layers.push(currentLayer);\n\n        // Mark as processed\n        currentLayer.forEach((p) => processed.add(p));\n    }\n\n    return layers;\n}\n\n/**\n * Sort graph in topological order with alphabetical sorting within layers\n * Returns enhanced format with level metadata\n *\n * @param graph - Unsorted dependency graph { project: [deps] }\n * @returns Sorted graph with level metadata { project: { level: number, dependsOn: [deps] } }\n */\nexport function sortGraphTopologically(graph: Record<string, string[]>): EnhancedGraph {\n    const layers = computeTopologicalLayers(graph);\n    const result: EnhancedGraph = {};\n\n    // Add projects layer by layer (dependencies before dependents)\n    layers.forEach((layer, levelIndex) => {\n        for (const project of layer) {\n            // Already sorted alphabetically within layer\n            result[project] = {\n                level: levelIndex,\n                dependsOn: (graph[project] || []).sort(),\n            };\n        }\n    });\n\n    return result;\n}\n"]}
+{"version":3,"file":"graph-sorter.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/graph-sorter.ts"],"names":[],"mappings":";AAAA;;;;;;;GAOG;;AAoGH,4DAyCC;AASD,wDAgBC;AAnKD,iDAAsD;AAwFtD;;;;;;;;GAQG;AACH,SAAgB,wBAAwB,CAAC,KAA+B;IACpE,MAAM,MAAM,GAAe,EAAE,CAAC;IAC9B,MAAM,SAAS,GAAG,IAAI,GAAG,EAAU,CAAC;IACpC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEvC,OAAO,SAAS,CAAC,IAAI,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC;QACzC,MAAM,YAAY,GAAa,EAAE,CAAC;QAElC,KAAK,MAAM,OAAO,IAAI,WAAW,EAAE,CAAC;YAChC,IAAI,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC;gBAAE,SAAS;YAErC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAClC,uEAAuE;YACvE,MAAM,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;YAEpE,IAAI,mBAAmB,EAAE,CAAC;gBACtB,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAC/B,CAAC;QACL,CAAC;QAED,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YAC5B,gFAAgF;YAChF,mFAAmF;YACnF,kFAAkF;YAClF,IAAI,mCAAoB,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC;YACrE,sFAAsF;YACtF,MAAM,SAAS,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAS,EAAW,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YAChF,MAAM,IAAI,KAAK,CACX,+EAA+E,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CACxG,CAAC;QACN,CAAC;QAED,4DAA4D;QAC5D,YAAY,CAAC,IAAI,EAAE,CAAC;QACpB,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAE1B,oBAAoB;QACpB,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAClD,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED;;;;;;GAMG;AACH,SAAgB,sBAAsB,CAAC,KAA+B;IAClE,MAAM,MAAM,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAkB,EAAE,CAAC;IAEjC,+DAA+D;IAC/D,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,UAAU,EAAE,EAAE;QACjC,KAAK,MAAM,OAAO,IAAI,KAAK,EAAE,CAAC;YAC1B,6CAA6C;YAC7C,MAAM,CAAC,OAAO,CAAC,GAAG;gBACd,KAAK,EAAE,UAAU;gBACjB,SAAS,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE;aAC3C,CAAC;QACN,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAClB,CAAC","sourcesContent":["/**\n * Graph Sorter\n *\n * Performs topological sorting on the dependency graph to:\n * 1. Detect circular dependencies (fails if cycle found)\n * 2. Assign level numbers to each project (level 0 = no deps, level 1 = depends on level 0, etc.)\n * 3. Group projects into layers for deterministic ordering\n */\n\nimport type { ProjectApiRelations } from './api-usage/api-relations';\nimport { ProjectCycleDetector } from './graph-cycles';\n\n/**\n * Graph entry with level metadata plus AI-oriented metadata filled in by\n * enrichGraph() (lib/graph-metadata.ts) before the graph is saved:\n *  - framework: the project's libType — the SET of runtime environments it is\n *    validated to run in, drawn from browser | react | angular | node | express\n *    (e.g. [\"browser\",\"node\"]); from its `framework:` nx tags (source of truth)\n *    or inferred from package.json deps\n *  - shortDescription: summary extracted from the project's responsibilities.md\n *  - responsibilitiesFile: repo-relative path to the FULL responsibilities doc\n *  - designFile: repo-relative path to the generated DI design.json (only for\n *    project.json projects)\n *  - apiRelations: for each api-lib in `dependsOn`, WHY the edge exists — the\n *    APIs this project implements (serves) and/or uses (calls), each with its\n *    transport (rpc | pubsub). Derived by scanning source (see api-usage/).\n */\nexport interface GraphEntry {\n    /**\n     * The project's row: its dependency depth (0 = no deps) — except that every server, client and\n     * app (APP_ROLES) is pinned to the TOP level, and a bundle above the apps it aggregates (#1179,\n     * graph-entry-levels.ts). Every dependency still sits strictly below its dependent.\n     */\n    level: number;\n    dependsOn: string[];\n    framework?: string[];\n    role?: string;\n    /**\n     * The name CLIENTS address this app by at runtime (`new ClientConfig('helper-fsdb')`) — its\n     * deployed service name, DECLARED in project.json as metadata.webpieces.serviceName. Absent for\n     * anything nothing calls by name (libraries, browser apps). See service-name-resolver.ts.\n     */\n    serviceName?: string;\n    /**\n     * The service(s) this project's clients call when the call site cannot carry a literal\n     * `ClientConfig` — the symmetric half of `serviceName`. DECLARED in project.json as\n     * metadata.webpieces.callsService, either a single service name (every untargeted `uses` aims\n     * there) or an `{ apiClassName: serviceName }` map (a client that calls several). Absent for a\n     * project that never calls anything, or one whose call sites all carry literals.\n     * See service-name-resolver.ts.\n     */\n    callsService?: string | Record<string, string>;\n    /**\n     * When false, the project is hidden from the rendered architecture graphs\n     * (its box AND every edge touching it are omitted from dependencies.html and\n     * the runtime graph). It stays in this JSON so the data view is complete.\n     * Absent means drawn (the default). From the project's `drawOnGraph:` nx tag.\n     */\n    drawOnGraph?: boolean;\n    /**\n     * Target service names whose RUNTIME edge from this project is cut out of leveling and cycle\n     * detection, from this project's `cutLegacyCycle:<target>` nx tags. Per EDGE, not per project.\n     * An admission of legacy debt, never an approved pattern — see cut-legacy-cycle-resolver.ts.\n     * Absent (the overwhelmingly normal case) means this project cuts nothing.\n     */\n    cutLegacyCycle?: string[];\n    /**\n     * The products this project belongs to (#1179), sorted: every product whose `product:<name>`-tagged\n     * project reaches it by a downward walk over `dependsOn` (a tagged project is in its own products).\n     * It is the project's blast radius — a change here is a change to each of these products. DERIVED,\n     * never declared on a library; absent when no product reaches it (and everywhere when no project\n     * carries a `product:` tag). See graph-products.ts.\n     */\n    products?: string[];\n    shortDescription?: string;\n    responsibilitiesFile?: string;\n    designFile?: string;\n    apiRelations?: ProjectApiRelations;\n    runtimeDeclaration?: string;\n    runtimeComposition?: boolean;\n    /**\n     * The @webpieces runtime packages this project's OWN package.json declares — http-routing,\n     * http-server, http-client-node, http-client-browser, cloudtasks-client. Omitted when it\n     * declares none, so TOTAL absence across the file means the file predates this field and\n     * nothing is auto-hidden (see runtime-graph.ts). Core/util/logging packages are deliberately\n     * not markers; see runtime-participant-resolver.ts for why.\n     *\n     * The runtime graph ORs this over a node's library closure: a server whose whole webpieces\n     * stack comes from a shared bootstrap lib participates even though it declares nothing itself.\n     */\n    webpiecesRuntime?: string[];\n}\n\n/**\n * Enhanced graph format with level information\n */\nexport type EnhancedGraph = Record<string, GraphEntry>;\n\n/**\n * Compute topological layers for dependency graph using Kahn's algorithm\n *\n * Projects are grouped into layers where each layer only depends on previous layers.\n * Throws an error if a circular dependency is detected.\n *\n * @param graph - Dependency graph { project: [deps] }\n * @returns Array of layers, each containing sorted project names\n */\nexport function computeTopologicalLayers(graph: Record<string, string[]>): string[][] {\n    const layers: string[][] = [];\n    const processed = new Set<string>();\n    const allProjects = Object.keys(graph);\n\n    while (processed.size < allProjects.length) {\n        const currentLayer: string[] = [];\n\n        for (const project of allProjects) {\n            if (processed.has(project)) continue;\n\n            const deps = graph[project] || [];\n            // Check if all dependencies are in previous layers (already processed)\n            const allDepsInPrevLayers = deps.every((dep) => processed.has(dep));\n\n            if (allDepsInPrevLayers) {\n                currentLayer.push(project);\n            }\n        }\n\n        if (currentLayer.length === 0) {\n            // No progress made = circular dependency. ProjectCycleDetector is the ONE cycle\n            // implementation in this package — it names every chain, in project keys, with the\n            // fix — so this reports through it rather than keeping a second, weaker DFS here.\n            new ProjectCycleDetector().assertAcyclic(graph, 'the project graph');\n            // Unreachable: Kahn only stalls on a cycle, and the assert above throws on every one.\n            const remaining = allProjects.filter((p: string): boolean => !processed.has(p));\n            throw new Error(\n                `Topological sort stalled with no cycle to report — projects left unlayered: ${remaining.join(', ')}`,\n            );\n        }\n\n        // Sort alphabetically within layer for deterministic output\n        currentLayer.sort();\n        layers.push(currentLayer);\n\n        // Mark as processed\n        currentLayer.forEach((p) => processed.add(p));\n    }\n\n    return layers;\n}\n\n/**\n * Sort graph in topological order with alphabetical sorting within layers\n * Returns enhanced format with level metadata\n *\n * @param graph - Unsorted dependency graph { project: [deps] }\n * @returns Sorted graph with level metadata { project: { level: number, dependsOn: [deps] } }\n */\nexport function sortGraphTopologically(graph: Record<string, string[]>): EnhancedGraph {\n    const layers = computeTopologicalLayers(graph);\n    const result: EnhancedGraph = {};\n\n    // Add projects layer by layer (dependencies before dependents)\n    layers.forEach((layer, levelIndex) => {\n        for (const project of layer) {\n            // Already sorted alphabetically within layer\n            result[project] = {\n                level: levelIndex,\n                dependsOn: (graph[project] || []).sort(),\n            };\n        }\n    });\n\n    return result;\n}\n"]}

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

@@ -1,8 +1,9 @@
 /**
- * The three color modes (graph-color-modes.ts), the viewer's remembered choice, and Impact's data.
+ * The four color modes (graph-color-modes.ts), the viewer's remembered choice, and Impact's data.
  *
- * The mode is deep-linkable (`#runtime`, `#architecture`, `#impact`, which win over the remembered
- * one) and remembered per viewer in localStorage. Storage can be missing or throw (a private window,
+ * The mode is deep-linkable (`#runtime`, `#architecture`, `#impact`, `#product`, which win over the
+ * remembered one) and remembered per viewer in localStorage. Product is unavailable on a page whose
+ * workspace declares no `product:` tag. Storage can be missing or throw (a private window,
  * blocked site data, a file:// page in some browsers), so every access is wrapped and the page works
  * without it.
  *
@@ -12,6 +13,7 @@
  * set reads.
  */
 declare class WpModeState {
+    private readonly hasProducts;
     static readonly MODES: string[];
     static readonly NAMES: string[];
     static readonly SUBTITLES: string[];
@@ -20,7 +22,10 @@ declare class WpModeState {
     readonly scans: ImpactJson[];
     kind: string;
     mode: string;
-    constructor();
+    /** @param hasProducts some box belongs to a product, so the Product mode has something to show */
+    constructor(hasProducts: boolean);
+    /** '' when Product can be shown, else why not. */
+    productReason(): string;
     /** The active scan; null when the page has no Impact data. */
     get impact(): ImpactJson | null;
     /** '' when Impact can be shown, else the one line the drawer and the Filter popover say instead. */
@@ -40,25 +45,28 @@ declare class WpModeState {
     private read;
 }
 /**
- * One state of the Filter popover: a change scope plus the selected Runtime and Role chips. The page
- * holds the APPLIED one; the popover edits a copy until "Show N projects".
+ * One state of the Filter popover: a change scope plus the selected Runtime, Role and Product chips.
+ * The page holds the APPLIED one; the popover edits a copy until "Show N projects".
  */
 declare class WpFilterChoice {
     scope: string;
     readonly runtimes: Set<string>;
     readonly roles: Set<string>;
+    readonly products: Set<string>;
     copy(): WpFilterChoice;
     /** How many filters are active: the drawer button's badge. */
     count(): number;
+    /** The chip set a `data-wp-chip-group` (or a pill's group) names. */
+    group(name: string): Set<string>;
 }
 /**
- * The Filter popover's three groups, INTERSECTED: a box stays when it is in the change scope, AND has
- * any selected runtime chip (when one is selected), AND has any selected role chip (likewise).
+ * The Filter popover's four groups, INTERSECTED: a box stays when it is in the change scope, AND has
+ * any selected runtime chip (when one is selected), AND has any selected role chip (likewise), AND
+ * belongs to any selected product (likewise — several products are the UNION of their closures).
  */
 declare class WpProjectFilter {
     private readonly model;
     private readonly modes;
-    static readonly SCOPE_NAMES: Map<string, string>;
     constructor(model: RenderModelJson, modes: WpModeState);
     /** The node ids a change scope keeps; null for "everything" (and whenever Impact is unavailable). */
     scopeSet(scope: string): Set<string> | null;
@@ -111,7 +119,7 @@ declare class GraphDrawer {
     readonly popover: GraphFilterPopover;
     constructor(page: GraphPage);
     wire(): void;
-    /** "Color by": the pill trigger opens the menu of three; picking one switches and closes it. */
+    /** "Color by": the pill trigger opens the menu of four; picking one switches and closes it. */
     private wireModeMenu;
     /** The "Changed on this branch" / "Last commit" toggle, in the drawer and in the Filter popover. */
     private wireImpactKinds;
@@ -133,6 +141,8 @@ declare class GraphDrawer {
     private syncFilterToggle;
     /** The drawer button's count badge, and one removable pill per active filter in the top bar. */
     private syncFilter;
+    /** A change scope's name, read from the Filter popover's markup: the shell owns the ONE copy. */
+    private scopeLabel;
     /** A pill, built with text nodes so no value is parsed as HTML. */
     private pill;
     private impactNote;

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

@@ -1,9 +1,10 @@
 "use strict";
 /**
- * The three color modes (graph-color-modes.ts), the viewer's remembered choice, and Impact's data.
+ * The four color modes (graph-color-modes.ts), the viewer's remembered choice, and Impact's data.
  *
- * The mode is deep-linkable (`#runtime`, `#architecture`, `#impact`, which win over the remembered
- * one) and remembered per viewer in localStorage. Storage can be missing or throw (a private window,
+ * The mode is deep-linkable (`#runtime`, `#architecture`, `#impact`, `#product`, which win over the
+ * remembered one) and remembered per viewer in localStorage. Product is unavailable on a page whose
+ * workspace declares no `product:` tag. Storage can be missing or throw (a private window,
  * blocked site data, a file:// page in some browsers), so every access is wrapped and the page works
  * without it.
  *
@@ -13,18 +14,32 @@
  * set reads.
  */
 class WpModeState {
-    static MODES = ['runtime', 'architecture', 'impact'];
-    static NAMES = ['Runtime', 'Architecture', 'Impact'];
-    static SUBTITLES = ['where the code can run', 'servers · clients · APIs', 'what changed'];
+    hasProducts;
+    static MODES = ['runtime', 'architecture', 'impact', 'product'];
+    static NAMES = ['Runtime', 'Architecture', 'Impact', 'Product'];
+    static SUBTITLES = [
+        'where the code can run',
+        'servers · clients · APIs',
+        'what changed',
+        'which products it belongs to',
+    ];
     static STORAGE_KEY = 'wp-architecture-graph-mode';
     static KIND_STORAGE_KEY = 'wp-architecture-graph-impact-kind';
     scans = window.__WP_IMPACT__?.scans ?? [];
     kind = '';
     mode = 'runtime';
-    constructor() {
+    /** @param hasProducts some box belongs to a product, so the Product mode has something to show */
+    constructor(hasProducts) {
+        this.hasProducts = hasProducts;
         this.kind = this.initialKind();
         this.mode = this.initial();
     }
+    /** '' when Product can be shown, else why not. */
+    productReason() {
+        return this.hasProducts
+            ? ''
+            : 'No products here: tag servers, clients and apps product:<name> in their project.json, then regenerate.';
+    }
     /** The active scan; null when the page has no Impact data. */
     get impact() {
         return this.scans.find((scan) => scan.kind === this.kind) ?? null;
@@ -65,7 +80,13 @@ class WpModeState {
         return this.scans[0]?.kind ?? '';
     }
     available(mode) {
-        return WpModeState.MODES.includes(mode) && (mode !== 'impact' || this.impactReason() === '');
+        if (!WpModeState.MODES.includes(mode))
+            return false;
+        if (mode === 'impact')
+            return this.impactReason() === '';
+        if (mode === 'product')
+            return this.productReason() === '';
+        return true;
     }
     name(mode) {
         return WpModeState.NAMES[WpModeState.MODES.indexOf(mode)] ?? mode;
@@ -125,13 +146,14 @@ class WpModeState {
     }
 }
 /**
- * One state of the Filter popover: a change scope plus the selected Runtime and Role chips. The page
- * holds the APPLIED one; the popover edits a copy until "Show N projects".
+ * One state of the Filter popover: a change scope plus the selected Runtime, Role and Product chips.
+ * The page holds the APPLIED one; the popover edits a copy until "Show N projects".
  */
 class WpFilterChoice {
     scope = 'everything';
     runtimes = new Set();
     roles = new Set();
+    products = new Set();
     copy() {
         const copy = new WpFilterChoice();
         copy.scope = this.scope;
@@ -139,27 +161,31 @@ class WpFilterChoice {
             copy.runtimes.add(runtime);
         for (const role of this.roles)
             copy.roles.add(role);
+        for (const product of this.products)
+            copy.products.add(product);
         return copy;
     }
     /** How many filters are active: the drawer button's badge. */
     count() {
-        return (this.scope === 'everything' ? 0 : 1) + this.runtimes.size + this.roles.size;
+        return (this.scope === 'everything' ? 0 : 1) + this.runtimes.size + this.roles.size + this.products.size;
+    }
+    /** The chip set a `data-wp-chip-group` (or a pill's group) names. */
+    group(name) {
+        if (name === 'role')
+            return this.roles;
+        if (name === 'product')
+            return this.products;
+        return this.runtimes;
     }
 }
 /**
- * The Filter popover's three groups, INTERSECTED: a box stays when it is in the change scope, AND has
- * any selected runtime chip (when one is selected), AND has any selected role chip (likewise).
+ * The Filter popover's four groups, INTERSECTED: a box stays when it is in the change scope, AND has
+ * any selected runtime chip (when one is selected), AND has any selected role chip (likewise), AND
+ * belongs to any selected product (likewise — several products are the UNION of their closures).
  */
 class WpProjectFilter {
     model;
     modes;
-    static SCOPE_NAMES = new Map([
-        ['everything', 'Everything'],
-        ['changed', 'Changed'],
-        ['dependents', 'Changed + what uses them'],
-        ['dependencies', 'Changed + what they use'],
-        ['build', 'Whole build of this branch'],
-    ]);
     constructor(model, modes) {
         this.model = model;
         this.modes = modes;
@@ -196,6 +222,8 @@ class WpProjectFilter {
                 continue;
             if (!this.anyOf(choice.roles, node.tags === null ? [] : [node.tags.role]))
                 continue;
+            if (!this.anyOf(choice.products, node.products))
+                continue;
             kept.add(node.id);
         }
         return kept;
@@ -328,7 +356,7 @@ class GraphFilterPopover {
         });
         document.querySelectorAll('.wp-chip[data-wp-chip]').forEach((chip) => {
             chip.addEventListener('click', () => {
-                const set = chip.dataset['wpChipGroup'] === 'role' ? this.draft.roles : this.draft.runtimes;
+                const set = this.draft.group(chip.dataset['wpChipGroup'] ?? '');
                 const value = chip.dataset['wpChip'] ?? '';
                 if (set.has(value))
                     set.delete(value);
@@ -380,7 +408,7 @@ class GraphFilterPopover {
             count.textContent = reason === '' ? String(this.page.scopeCount(count.dataset['wpScopeCount'] ?? '')) : '';
         });
         document.querySelectorAll('.wp-chip[data-wp-chip]').forEach((chip) => {
-            const set = chip.dataset['wpChipGroup'] === 'role' ? this.draft.roles : this.draft.runtimes;
+            const set = this.draft.group(chip.dataset['wpChipGroup'] ?? '');
             chip.setAttribute('aria-pressed', String(set.has(chip.dataset['wpChip'] ?? '')));
         });
         const apply = this.byId('wp-filter-apply');
@@ -427,7 +455,7 @@ class GraphDrawer {
             this.closeModeMenu(false);
         });
     }
-    /** "Color by": the pill trigger opens the menu of three; picking one switches and closes it. */
+    /** "Color by": the pill trigger opens the menu of four; picking one switches and closes it. */
     wireModeMenu() {
         this.byId('wp-mode-trigger')?.addEventListener('click', (ev) => {
             ev.stopPropagation();
@@ -540,7 +568,7 @@ class GraphDrawer {
             this.lockInput()?.focus();
             return;
         }
-        const index = ['1', '2', '3'].indexOf(ev.key);
+        const index = ['1', '2', '3', '4'].indexOf(ev.key);
         if (index >= 0 && !menuOpen) {
             this.page.setMode(WpModeState.MODES[index]);
             return;
@@ -576,6 +604,8 @@ class GraphDrawer {
             button.disabled = !modes.available(mode);
             if (mode === 'impact')
                 button.title = reason === '' ? 'Key 3' : reason;
+            if (mode === 'product')
+                button.title = modes.productReason() === '' ? 'Key 4' : modes.productReason();
         });
         this.text('wp-mode-current', modes.name(modes.mode));
         this.text('wp-mode-current-sub', modes.subtitle(modes.mode));
@@ -621,13 +651,19 @@ class GraphDrawer {
             return;
         const items = [];
         if (filter.scope !== 'everything')
-            items.push(this.pill(WpProjectFilter.SCOPE_NAMES.get(filter.scope) ?? filter.scope, 'scope', filter.scope));
+            items.push(this.pill(this.scopeLabel(filter.scope), 'scope', filter.scope));
         for (const runtime of filter.runtimes)
             items.push(this.pill(runtime, 'runtime', runtime));
         for (const role of filter.roles)
             items.push(this.pill(role, 'role', role));
+        for (const product of filter.products)
+            items.push(this.pill(`product: ${product}`, 'product', product));
         pills.replaceChildren(...items);
     }
+    /** A change scope's name, read from the Filter popover's markup: the shell owns the ONE copy. */
+    scopeLabel(scope) {
+        return document.querySelector(`[data-wp-scope-label="${scope}"]`)?.textContent ?? scope;
+    }
     /** A pill, built with text nodes so no value is parsed as HTML. */
     pill(label, group, value) {
         const pill = document.createElement('span');
@@ -652,8 +688,8 @@ class GraphDrawer {
         // An available scan with a note is an EMPTY one, e.g. "Nothing changed on this branch yet".
         if (impact.reason !== '')
             return `${impact.label}: ${impact.reason}.`;
-        const stats = `${impact.label}: ${impact.touched.length} touched · ${impact.affected.length} affected · ` +
-            `${impact.buildInputs.length} build inputs — nx affected, ${impact.changedFiles} changed files.`;
+        const stats = `${impact.label}: ${impact.touched.length} changed · ${impact.affected.length} dependents · ` +
+            `${impact.buildInputs.length} dependencies — nx affected, ${impact.changedFiles} changed files.`;
         const cause = this.globalCause(impact);
         return cause === '' ? stats : `${cause}. ${stats}`;
     }
@@ -702,7 +738,7 @@ class GraphDrawer {
 }
 class GraphPage extends WpFilterPage {
     highlighter = null;
-    modes = new WpModeState();
+    modes = new WpModeState(this.model.nodes.some((node) => node.products.length > 0));
     projects = new WpProjectFilter(this.model, this.modes);
     applied = new WpFilterChoice();
     drawer = new GraphDrawer(this);
@@ -726,6 +762,8 @@ class GraphPage extends WpFilterPage {
             return modes.architecture;
         if (this.modes.mode === 'impact')
             return modes[this.modes.status(node.id)];
+        if (this.modes.mode === 'product')
+            return modes.product;
         return modes.runtime;
     }
     usesFullDot() {
@@ -821,10 +859,8 @@ class GraphPage extends WpFilterPage {
         const next = this.applied.copy();
         if (group === 'scope')
             next.scope = 'everything';
-        else if (group === 'role')
-            next.roles.delete(value);
         else
-            next.runtimes.delete(value);
+            next.group(group).delete(value);
         this.applyFilter(next);
     }
     syncControls() {