@webpieces/nx-webpieces-rules 0.4.872 → 0.4.874

package/README.md

@@ -109,23 +109,27 @@ their existing checks independently of visualization.
 ### Color modes and the page shell
 
 `architecture/dependencies.html` opens with the graph filling the viewport and every control
-in a collapsible dark drawer on the left: the color mode, a type-to-search **Lock** field
-(`/` focuses it, `Esc` unlocks), a **Hide unconnected** toggle, the legend (with a pop-out
-button) and the edge key. Help is the **?** popover, zoom floats bottom-right, and
-**Responsibilities** opens a right-hand panel from the drawer footer.
-
-The graph answers one question at a time. Pick a mode in the drawer, from **Mode ▸** in any
-box's menu, or with keys `1` `2` `3`; the choice is remembered per viewer and deep-linkable as
-`#runtime`, `#architecture` or `#impact`.
-
-- **Runtime** — where the code can run. Base runtimes are equal vertical stripes in the fixed
-  order browser | node | react-native; angular and react are an inset inside the browser
-  stripe, express inside the node stripe. A box may depend on a box that carries every color it
-  has. A box with several stripes or an inset carries its name on a light plate between two
-  stripe bands, so the text never straddles two colors.
+in a collapsible charcoal drawer on the left (violet accent): the **Color by** pulldown, the
+**Filter** button, a type-to-search **Lock** field (`/` focuses it, `Esc` unlocks), a **Hide
+unconnected** toggle, the legend (with a pop-out button) and the edge key. Help is the **?**
+popover, zoom floats bottom-right, and **Responsibilities** opens a right-hand panel from the
+drawer footer.
+
+The graph answers one question at a time. Pick a mode from the drawer's **Color by** pulldown
+(the one place to switch) or with keys `1` `2` `3`; the choice is remembered per viewer and
+deep-linkable as `#runtime`, `#architecture` or `#impact`. Every box carries the same three
+lines in every mode: `L3  name` (level dimmed, name bold), its role, and every framework tag.
+
+- **Runtime** — where the code can run. One runtime is a solid fill. One runtime plus a
+  specialization (angular/react inside browser, express inside node) is nested: a frame in the
+  base color around a rounded inner box in the specialization's color, which carries the text.
+  Several runtimes are full-height vertical stripes in the fixed order browser | node |
+  react-native, the text written across them (a specialization there shows in line 3 only). A
+  box may depend on a box that carries every color it has.
 - **Architecture** — servers · clients · APIs. A solid fill by role (server, client, app, bundle,
   api-lib, api-client, designed-lib, lib); framework color is not shown.
-- **Impact** — what this branch touches. `architecture:generate` runs
+- **Impact** — what this branch touches. `architecture:generate` and `architecture:visualize`
+  (`pnpm arch:visualize`, no regenerate needed) both run
   `nx show projects --affected --base=<fork point> --json` (no `--head`, so uncommitted and
   untracked work counts). Projects that own a changed file, by nx's own file ownership, are solid
   amber ("touched — files changed on this branch"); the rest of the affected set is light amber
@@ -135,8 +139,17 @@ box's menu, or with keys `1` `2` `3`; the choice is remembered per viewer and de
   it is written to `architecture/.impact/dependencies.impact.js`, never into the committed html or
   json. That directory holds its own `.gitignore` (`*`), so a consuming repo needs no gitignore
   entry. When nx or git cannot answer, no sidecar is written and Impact is disabled with a
-  one-line reason; generation never fails over it. `architecture:visualize` leaves the sidecar
-  as it is.
+  one-line reason; neither command fails over it. Impact state is never written on a box: color
+  and legend only. When files changed but no project owns one (a lockfile, the workspace
+  manifest), the legend names that workspace-global cause for the everything-affected result.
+
+**Filter** opens a popover of three groups that INTERSECT: *Changes on this branch* (Everything ·
+Changed · Changed + what uses them (nx affected) · Changed + what they use · Whole build of this
+branch, each with its project count; disabled with Impact's reason when there is no Impact
+data), *Runtime* chips and *Role* chips (a box matches a group when it carries any selected
+chip). "Show N projects" applies it; active filters show as removable pills in the top bar and
+a count badge on the drawer button. Every remaining box keeps its own L-row, a level left empty
+is a thin labeled band, and edges between remaining boxes stay drawn.
 
 The legend is generated per mode from the projects actually drawn, and the framework colors
 are keyed off `KNOWN_FRAMEWORKS` (`@webpieces/rules-sdk`), the same list the framework-tag
@@ -152,7 +165,7 @@ APIs and systems. The anchor indicator and all surviving node menus offer **Turn
 Filter**, restoring the full layout and independent Lock state. Responsibilities
 follow the retained set intersected with architecture Lock. Architecture Lock pins
 its chain in the foreground; hover adds a temporary chain without dimming locked
-nodes or edges, and leaving restores the Lock chain. The locked anchor keeps an amber outline,
+nodes or edges, and leaving restores the Lock chain. The locked anchor keeps a violet outline,
 and hover never changes responsibilities. A filtered-out Lock is suspended until
 the full graph returns. Hover and menu dismissal
 do not clear filtering, and no filter is persisted across reloads. Saved graph facts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webpieces/nx-webpieces-rules",
-  "version": "0.4.872",
+  "version": "0.4.874",
   "description": "Nx-specific webpieces validation rules, graph tooling, executors, and inference plugin.",
   "type": "commonjs",
   "main": "./src/index.js",
@@ -20,12 +20,12 @@
     "README.md"
   ],
   "dependencies": {
-    "@webpieces/api-doc-model": "0.4.872",
-    "@webpieces/core-util": "0.4.872",
-    "@webpieces/eslint-rules": "0.4.872",
-    "@webpieces/rules-config": "0.4.872",
+    "@webpieces/api-doc-model": "0.4.874",
+    "@webpieces/core-util": "0.4.874",
+    "@webpieces/eslint-rules": "0.4.874",
+    "@webpieces/rules-config": "0.4.874",
     "madge": "8.0.0",
-    "@webpieces/rules-sdk": "0.4.872"
+    "@webpieces/rules-sdk": "0.4.874"
   },
   "peerDependencies": {
     "@nx/devkit": ">=18.0.0"
@@ -41,7 +41,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "@webpieces/tooling-testkit": "0.4.872"
+    "@webpieces/tooling-testkit": "0.4.874"
   },
   "types": "./src/index.d.ts",
   "bin": {

package/src/executors/visualize/executor.d.ts

@@ -1,17 +1,31 @@
 /**
  * Visualize Executor
  *
- * Generates visual representations of the architecture graph (DOT + HTML)
- * and opens the visualization in a browser.
+ * Renders the SAVED architecture graph (DOT + HTML), refreshes this branch's Impact sidecar, and opens
+ * the visualization in a browser. It never regenerates the graph: the architecture facts stay the
+ * saved snapshot. Impact, though, is per-branch and gitignored (graph-impact.ts) — it is exactly the
+ * thing that goes stale when you switch branches — so viewing refreshes it with the same
+ * `nx show projects --affected --base=<fork point>` scan generate runs, against the saved graph.
  *
  * Usage:
- * nx run architecture:visualize
+ * nx run architecture:visualize   (pnpm arch:visualize)
  */
 import type { ExecutorContext } from '@nx/devkit';
+import { SavedSnapshot } from '../../lib/saved-snapshot';
+import { GraphVisualizer } from '../../lib/graph-visualizer';
+import { ImpactRefresh } from '../../lib/graph-impact';
 export interface VisualizeExecutorOptions {
     graphPath?: string;
 }
 export interface ExecutorResult {
     success: boolean;
 }
+/** The view pipeline: load the saved graph, write the page, refresh Impact, open the page. */
+export declare class SavedGraphViewer {
+    private readonly visualizer;
+    private readonly impact;
+    private readonly snapshot;
+    constructor(visualizer?: GraphVisualizer, impact?: ImpactRefresh, snapshot?: SavedSnapshot);
+    view(options: VisualizeExecutorOptions, context: ExecutorContext): Promise<ExecutorResult>;
+}
 export default function runExecutor(options: VisualizeExecutorOptions, context: ExecutorContext): Promise<ExecutorResult>;

package/src/executors/visualize/executor.js

@@ -2,51 +2,71 @@
 /**
  * Visualize Executor
  *
- * Generates visual representations of the architecture graph (DOT + HTML)
- * and opens the visualization in a browser.
+ * Renders the SAVED architecture graph (DOT + HTML), refreshes this branch's Impact sidecar, and opens
+ * the visualization in a browser. It never regenerates the graph: the architecture facts stay the
+ * saved snapshot. Impact, though, is per-branch and gitignored (graph-impact.ts) — it is exactly the
+ * thing that goes stale when you switch branches — so viewing refreshes it with the same
+ * `nx show projects --affected --base=<fork point>` scan generate runs, against the saved graph.
  *
  * Usage:
- * nx run architecture:visualize
+ * nx run architecture:visualize   (pnpm arch:visualize)
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SavedGraphViewer = void 0;
 exports.default = runExecutor;
+const tslib_1 = require("tslib");
+const path = tslib_1.__importStar(require("path"));
 const saved_snapshot_1 = require("../../lib/saved-snapshot");
 const graph_loader_1 = require("../../lib/graph-loader");
 const graph_visualizer_1 = require("../../lib/graph-visualizer");
+const graph_impact_1 = require("../../lib/graph-impact");
 const rules_config_1 = require("@webpieces/rules-config");
 const toError_1 = require("../../toError");
-async function runExecutor(options, context) {
-    const graphPath = options.graphPath ?? graph_loader_1.DEFAULT_GRAPH_PATH;
-    const workspaceRoot = context.root;
-    const snapshot = new saved_snapshot_1.SavedSnapshot();
-    console.log('\n🎨 Architecture Visualization\n');
-    console.log(snapshot.message());
-    // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- Nx command rendering boundary; success:false propagates failure to Nx
-    try {
-        // Load the saved graph
-        console.log('📂 Loading saved graph...');
-        const graphFile = snapshot.loadProjects(workspaceRoot, graphPath);
-        const graph = graphFile.projects;
-        // Generate visualization
-        console.log('🎨 Generating visualization...');
-        const visualizer = new graph_visualizer_1.GraphVisualizer();
-        const vizPaths = visualizer.writeVisualization(graph, workspaceRoot);
-        console.log(`✅ Generated: ${vizPaths.htmlPath}`);
-        // Try to open in browser
-        console.log('\n🌐 Opening visualization in browser...');
-        if (visualizer.openVisualization(vizPaths.htmlPath)) {
-            console.log('✅ Browser opened');
+/** The view pipeline: load the saved graph, write the page, refresh Impact, open the page. */
+class SavedGraphViewer {
+    visualizer;
+    impact;
+    snapshot;
+    constructor(visualizer = new graph_visualizer_1.GraphVisualizer(), impact = new graph_impact_1.ImpactRefresh(), snapshot = new saved_snapshot_1.SavedSnapshot()) {
+        this.visualizer = visualizer;
+        this.impact = impact;
+        this.snapshot = snapshot;
+    }
+    async view(options, context) {
+        const graphPath = options.graphPath ?? graph_loader_1.DEFAULT_GRAPH_PATH;
+        const workspaceRoot = context.root;
+        console.log('\n🎨 Architecture Visualization\n');
+        console.log(this.snapshot.message());
+        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- Nx command rendering boundary; success:false propagates failure to Nx
+        try {
+            console.log('📂 Loading saved graph...');
+            const graph = this.snapshot.loadProjects(workspaceRoot, graphPath).projects;
+            console.log('🎨 Generating visualization...');
+            const vizPaths = this.visualizer.writeVisualization(graph, workspaceRoot);
+            console.log(`✅ Generated: ${vizPaths.htmlPath}`);
+            // Impact is optional: it reports, it never throws, and it never touches committed files.
+            console.log('🟠 Refreshing this branch\'s impact (nx affected since the fork point)...');
+            console.log(await this.impact.run(path.dirname(vizPaths.htmlPath), workspaceRoot, graph));
+            console.log('\n🌐 Opening visualization in browser...');
+            if (this.visualizer.openVisualization(vizPaths.htmlPath)) {
+                console.log('✅ Browser opened');
+            }
+            else {
+                console.log(`⚠️  Could not auto-open. Open manually: ${vizPaths.htmlPath}`);
+            }
+            return { success: true };
         }
-        else {
-            console.log(`⚠️  Could not auto-open. Open manually: ${vizPaths.htmlPath}`);
+        catch (err) {
+            const error = (0, toError_1.toError)(err);
+            const rendered = error instanceof rules_config_1.RuleFailError ? (0, rules_config_1.renderRuleFailForHuman)(error) : error.message;
+            console.error(`❌ Visualization failed for ${graphPath}:`, rendered);
+            return { success: false };
         }
-        return { success: true };
-    }
-    catch (err) {
-        const error = (0, toError_1.toError)(err);
-        const rendered = error instanceof rules_config_1.RuleFailError ? (0, rules_config_1.renderRuleFailForHuman)(error) : error.message;
-        console.error(`❌ Visualization failed for ${graphPath}:`, rendered);
-        return { success: false };
     }
 }
+exports.SavedGraphViewer = SavedGraphViewer;
+// webpieces-disable no-function-outside-class -- nx executor module: nx resolves a default-export function here
+async function runExecutor(options, context) {
+    return new SavedGraphViewer().view(options, context);
+}
 //# sourceMappingURL=executor.js.map

package/src/executors/visualize/executor.js.map

@@ -1 +1 @@
-{"version":3,"file":"executor.js","sourceRoot":"","sources":["../../../../../../../packages/tooling/nx-webpieces-rules/src/executors/visualize/executor.ts"],"names":[],"mappings":";AAAA;;;;;;;;GAQG;;AAiBH,8BAuCC;AArDD,6DAAyD;AACzD,yDAA4D;AAC5D,iEAA6D;AAC7D,0DAAgF;AAChF,2CAAwC;AAUzB,KAAK,UAAU,WAAW,CACrC,OAAiC,EACjC,OAAwB;IAExB,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,IAAI,iCAAkB,CAAC;IAC1D,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IACnC,MAAM,QAAQ,GAAkB,IAAI,8BAAa,EAAE,CAAC;IAEpD,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAC;IACjD,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IAEhC,uIAAuI;IACvI,IAAI,CAAC;QACD,uBAAuB;QACvB,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;QACzC,MAAM,SAAS,GAAG,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;QAClE,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,CAAC;QAEjC,yBAAyB;QACzB,OAAO,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAC;QAC9C,MAAM,UAAU,GAAG,IAAI,kCAAe,EAAE,CAAC;QACzC,MAAM,QAAQ,GAAG,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QACrE,OAAO,CAAC,GAAG,CAAC,gBAAgB,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;QAEjD,yBAAyB;QACzB,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAC;QACxD,IAAI,UAAU,CAAC,iBAAiB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;YAClD,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QACpC,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,GAAG,CAAC,2CAA2C,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;QAChF,CAAC;QAED,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAC7B,CAAC;IAAC,OAAO,GAAY,EAAE,CAAC;QACpB,MAAM,KAAK,GAAG,IAAA,iBAAO,EAAC,GAAG,CAAC,CAAC;QAC3B,MAAM,QAAQ,GAAG,KAAK,YAAY,4BAAa,CAAC,CAAC,CAAC,IAAA,qCAAsB,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;QAChG,OAAO,CAAC,KAAK,CAAC,8BAA8B,SAAS,GAAG,EAAE,QAAQ,CAAC,CAAC;QACpE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IAC9B,CAAC;AACL,CAAC","sourcesContent":["/**\n * Visualize Executor\n *\n * Generates visual representations of the architecture graph (DOT + HTML)\n * and opens the visualization in a browser.\n *\n * Usage:\n * nx run architecture:visualize\n */\n\nimport type { ExecutorContext } from '@nx/devkit';\nimport { SavedSnapshot } from '../../lib/saved-snapshot';\nimport { DEFAULT_GRAPH_PATH } from '../../lib/graph-loader';\nimport { GraphVisualizer } from '../../lib/graph-visualizer';\nimport { RuleFailError, renderRuleFailForHuman } from '@webpieces/rules-config';\nimport { toError } from '../../toError';\n\nexport interface VisualizeExecutorOptions {\n    graphPath?: string;\n}\n\nexport interface ExecutorResult {\n    success: boolean;\n}\n\nexport default async function runExecutor(\n    options: VisualizeExecutorOptions,\n    context: ExecutorContext\n): Promise<ExecutorResult> {\n    const graphPath = options.graphPath ?? DEFAULT_GRAPH_PATH;\n    const workspaceRoot = context.root;\n    const snapshot: SavedSnapshot = new SavedSnapshot();\n\n    console.log('\\n🎨 Architecture Visualization\\n');\n    console.log(snapshot.message());\n\n    // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- Nx command rendering boundary; success:false propagates failure to Nx\n    try {\n        // Load the saved graph\n        console.log('📂 Loading saved graph...');\n        const graphFile = snapshot.loadProjects(workspaceRoot, graphPath);\n        const graph = graphFile.projects;\n\n        // Generate visualization\n        console.log('🎨 Generating visualization...');\n        const visualizer = new GraphVisualizer();\n        const vizPaths = visualizer.writeVisualization(graph, workspaceRoot);\n        console.log(`✅ Generated: ${vizPaths.htmlPath}`);\n\n        // Try to open in browser\n        console.log('\\n🌐 Opening visualization in browser...');\n        if (visualizer.openVisualization(vizPaths.htmlPath)) {\n            console.log('✅ Browser opened');\n        } else {\n            console.log(`⚠️  Could not auto-open. Open manually: ${vizPaths.htmlPath}`);\n        }\n\n        return { success: true };\n    } catch (err: unknown) {\n        const error = toError(err);\n        const rendered = error instanceof RuleFailError ? renderRuleFailForHuman(error) : error.message;\n        console.error(`❌ Visualization failed for ${graphPath}:`, rendered);\n        return { success: false };\n    }\n}\n"]}
+{"version":3,"file":"executor.js","sourceRoot":"","sources":["../../../../../../../packages/tooling/nx-webpieces-rules/src/executors/visualize/executor.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;;;AAiEH,8BAKC;;AApED,mDAA6B;AAE7B,6DAAyD;AACzD,yDAA4D;AAC5D,iEAA6D;AAC7D,yDAAuD;AACvD,0DAAgF;AAChF,2CAAwC;AAUxC,8FAA8F;AAC9F,MAAa,gBAAgB;IAEJ;IACA;IACA;IAHrB,YACqB,aAA8B,IAAI,kCAAe,EAAE,EACnD,SAAwB,IAAI,4BAAa,EAAE,EAC3C,WAA0B,IAAI,8BAAa,EAAE;QAF7C,eAAU,GAAV,UAAU,CAAyC;QACnD,WAAM,GAAN,MAAM,CAAqC;QAC3C,aAAQ,GAAR,QAAQ,CAAqC;IAC/D,CAAC;IAEJ,KAAK,CAAC,IAAI,CAAC,OAAiC,EAAE,OAAwB;QAClE,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,IAAI,iCAAkB,CAAC;QAC1D,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;QAEnC,OAAO,CAAC,GAAG,CAAC,mCAAmC,CAAC,CAAC;QACjD,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;QAErC,uIAAuI;QACvI,IAAI,CAAC;YACD,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;YACzC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC;YAE5E,OAAO,CAAC,GAAG,CAAC,gCAAgC,CAAC,CAAC;YAC9C,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;YAC1E,OAAO,CAAC,GAAG,CAAC,gBAAgB,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;YAEjD,yFAAyF;YACzF,OAAO,CAAC,GAAG,CAAC,2EAA2E,CAAC,CAAC;YACzF,OAAO,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC;YAE1F,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAC;YACxD,IAAI,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACvD,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;YACpC,CAAC;iBAAM,CAAC;gBACJ,OAAO,CAAC,GAAG,CAAC,2CAA2C,QAAQ,CAAC,QAAQ,EAAE,CAAC,CAAC;YAChF,CAAC;YAED,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;QAC7B,CAAC;QAAC,OAAO,GAAY,EAAE,CAAC;YACpB,MAAM,KAAK,GAAG,IAAA,iBAAO,EAAC,GAAG,CAAC,CAAC;YAC3B,MAAM,QAAQ,GAAG,KAAK,YAAY,4BAAa,CAAC,CAAC,CAAC,IAAA,qCAAsB,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC;YAChG,OAAO,CAAC,KAAK,CAAC,8BAA8B,SAAS,GAAG,EAAE,QAAQ,CAAC,CAAC;YACpE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QAC9B,CAAC;IACL,CAAC;CACJ;AA1CD,4CA0CC;AAED,gHAAgH;AACjG,KAAK,UAAU,WAAW,CACrC,OAAiC,EACjC,OAAwB;IAExB,OAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;AACzD,CAAC","sourcesContent":["/**\n * Visualize Executor\n *\n * Renders the SAVED architecture graph (DOT + HTML), refreshes this branch's Impact sidecar, and opens\n * the visualization in a browser. It never regenerates the graph: the architecture facts stay the\n * saved snapshot. Impact, though, is per-branch and gitignored (graph-impact.ts) — it is exactly the\n * thing that goes stale when you switch branches — so viewing refreshes it with the same\n * `nx show projects --affected --base=<fork point>` scan generate runs, against the saved graph.\n *\n * Usage:\n * nx run architecture:visualize   (pnpm arch:visualize)\n */\n\nimport * as path from 'path';\nimport type { ExecutorContext } from '@nx/devkit';\nimport { SavedSnapshot } from '../../lib/saved-snapshot';\nimport { DEFAULT_GRAPH_PATH } from '../../lib/graph-loader';\nimport { GraphVisualizer } from '../../lib/graph-visualizer';\nimport { ImpactRefresh } from '../../lib/graph-impact';\nimport { RuleFailError, renderRuleFailForHuman } from '@webpieces/rules-config';\nimport { toError } from '../../toError';\n\nexport interface VisualizeExecutorOptions {\n    graphPath?: string;\n}\n\nexport interface ExecutorResult {\n    success: boolean;\n}\n\n/** The view pipeline: load the saved graph, write the page, refresh Impact, open the page. */\nexport class SavedGraphViewer {\n    constructor(\n        private readonly visualizer: GraphVisualizer = new GraphVisualizer(),\n        private readonly impact: ImpactRefresh = new ImpactRefresh(),\n        private readonly snapshot: SavedSnapshot = new SavedSnapshot(),\n    ) {}\n\n    async view(options: VisualizeExecutorOptions, context: ExecutorContext): Promise<ExecutorResult> {\n        const graphPath = options.graphPath ?? DEFAULT_GRAPH_PATH;\n        const workspaceRoot = context.root;\n\n        console.log('\\n🎨 Architecture Visualization\\n');\n        console.log(this.snapshot.message());\n\n        // eslint-disable-next-line @webpieces/no-unmanaged-exceptions -- Nx command rendering boundary; success:false propagates failure to Nx\n        try {\n            console.log('📂 Loading saved graph...');\n            const graph = this.snapshot.loadProjects(workspaceRoot, graphPath).projects;\n\n            console.log('🎨 Generating visualization...');\n            const vizPaths = this.visualizer.writeVisualization(graph, workspaceRoot);\n            console.log(`✅ Generated: ${vizPaths.htmlPath}`);\n\n            // Impact is optional: it reports, it never throws, and it never touches committed files.\n            console.log('🟠 Refreshing this branch\\'s impact (nx affected since the fork point)...');\n            console.log(await this.impact.run(path.dirname(vizPaths.htmlPath), workspaceRoot, graph));\n\n            console.log('\\n🌐 Opening visualization in browser...');\n            if (this.visualizer.openVisualization(vizPaths.htmlPath)) {\n                console.log('✅ Browser opened');\n            } else {\n                console.log(`⚠️  Could not auto-open. Open manually: ${vizPaths.htmlPath}`);\n            }\n\n            return { success: true };\n        } catch (err: unknown) {\n            const error = toError(err);\n            const rendered = error instanceof RuleFailError ? renderRuleFailForHuman(error) : error.message;\n            console.error(`❌ Visualization failed for ${graphPath}:`, rendered);\n            return { success: false };\n        }\n    }\n}\n\n// webpieces-disable no-function-outside-class -- nx executor module: nx resolves a default-export function here\nexport default async function runExecutor(\n    options: VisualizeExecutorOptions,\n    context: ExecutorContext\n): Promise<ExecutorResult> {\n    return new SavedGraphViewer().view(options, context);\n}\n"]}

package/src/lib/graph-color-modes.d.ts

@@ -1,16 +1,17 @@
 /**
- * Graph color modes (#1155)
+ * Graph color modes (#1155, restyled by #1158)
  *
  * The architecture graph answers ONE question at a time instead of asking every box to encode two
  * (fill = framework AND border = role). Each box is emitted once per mode, so the page can switch
- * modes and re-render without regenerating anything:
+ * modes and re-render without regenerating anything. Every mode writes the SAME three lines on a box
+ * (level + name, role, every framework tag); only the color changes:
  *
- *  - RUNTIME      "where the code can run". Base runtimes are equal vertical stripes in the fixed
- *                 order browser | node | react-native; a specialization (angular/react inside
- *                 browser, express inside node) is an inset inside its base stripe. The dependency
- *                 rule becomes visual: a box may depend on a box carrying every color it has. The
- *                 name and meta sit on a light label PLATE across the middle, so they read on every
- *                 stripe combination while the stripes and insets stay visible above and below it.
+ *  - RUNTIME      "where the code can run". One runtime is a solid fill. One runtime plus a
+ *                 specialization (angular/react inside browser, express inside node) is NESTED: an
+ *                 outer frame in the base color around an inner rounded box in the specialization's
+ *                 color, carrying the text. Several runtimes are full-height vertical stripes in the
+ *                 fixed order browser | node | react-native, with the text written across them. The
+ *                 dependency rule becomes visual: a box may depend on a box carrying every color it has.
  *  - ARCHITECTURE "servers · clients · APIs". A solid fill by ROLE; framework color is not shown.
  *  - IMPACT       "what this branch touches". Projects owning a changed file are solid amber
  *                 ("touched"); the rest of nx's affected set is light amber ("affected": their ci
@@ -18,7 +19,7 @@
  *                 affected is light slate with a dashed border ("build input": compiled or restored
  *                 from cache, unchanged); everything else is grey. Which box is which is only known
  *                 per branch, so every box carries all four variants and the page picks one from the
- *                 sidecar (graph-impact.ts).
+ *                 sidecar (graph-impact.ts). The state is never written on the box: color + legend.
  */
 import { KnownFramework } from '@webpieces/rules-sdk';
 export declare enum GraphMode {
@@ -26,7 +27,7 @@ export declare enum GraphMode {
     ARCHITECTURE = "architecture",
     IMPACT = "impact"
 }
-/** One selectable mode as the drawer and the node menu show it. */
+/** One selectable mode as the drawer's Color-by pulldown shows it. */
 export declare class ModeInfo {
     readonly mode: GraphMode;
     readonly name: string;
@@ -35,25 +36,40 @@ export declare class ModeInfo {
 }
 /** In key order: `1` selects the first, `2` the second, `3` the third. */
 export declare const GRAPH_MODES: readonly ModeInfo[];
-/** A framework value's color and the BASE runtime it is drawn inside (itself, for a base). */
+/** Text on a light fill. */
+export declare const DARK_TEXT = "#1a1c22";
+/** Text on a dark fill. */
+export declare const LIGHT_TEXT = "#ffffff";
+/**
+ * A framework value's color, the text color that reads on it, and the BASE runtime it is drawn
+ * inside (itself, for a base).
+ */
 export declare class FrameworkStyle {
     readonly framework: KnownFramework;
     readonly base: KnownFramework;
     readonly color: string;
+    readonly fontColor: string;
     readonly description: string;
-    constructor(framework: KnownFramework, base: KnownFramework, color: string, description: string);
+    constructor(framework: KnownFramework, base: KnownFramework, color: string, fontColor: string, description: string);
     isBase(): boolean;
 }
 /**
  * Keyed by the shared vocabulary, so a framework added to KNOWN_FRAMEWORKS without a color here is a
  * COMPILE error — not a box silently painted grey and missing from the legend, which is exactly how
- * react-native shipped (#1155).
+ * react-native shipped (#1155). Every base is mid-light, so dark text reads on every stripe.
  */
 export declare const FRAMEWORK_STYLES: Record<KnownFramework, FrameworkStyle>;
 /** Stripe order, left to right. Fixed, so the same set always reads the same way. */
 export declare const BASE_ORDER: readonly KnownFramework[];
+/**
+ * The Filter popover's Runtime chips, and the order line 3 of a box lists framework tags in: the
+ * bases first, then the specializations.
+ */
+export declare const FRAMEWORK_ORDER: readonly KnownFramework[];
 /** A box with no known framework tag. */
 export declare const NO_RUNTIME_COLOR = "#e4e6ec";
+/** The class Graphviz stamps on a multi-runtime box's `<g>`: its outline is its LAST shape. */
+export declare const STRIPED_CLASS = "wp-striped";
 /** A role's solid fill and the text color that stays readable on it. */
 export declare class RoleStyle {
     readonly role: string;
@@ -62,7 +78,10 @@ export declare class RoleStyle {
     readonly description: string;
     constructor(role: string, fill: string, fontColor: string, description: string);
 }
-/** Every role role-resolver knows, in legend order (runnable things first). */
+/**
+ * Every role role-resolver knows, in legend order (runnable things first) — also the Filter popover's
+ * Role chips. `bundle` is indigo so no box color equals the page's violet accent.
+ */
 export declare const ROLE_STYLES: readonly RoleStyle[];
 /** The four impact shades (graph-impact.ts decides which box gets which). */
 export declare const IMPACT_TOUCHED = "#f5a524";
@@ -70,9 +89,7 @@ export declare const IMPACT_AFFECTED = "#fde3b0";
 export declare const IMPACT_BUILD_INPUT = "#e3e9f2";
 export declare const IMPACT_BUILD_INPUT_BORDER = "#7c8aa3";
 export declare const IMPACT_UNTOUCHED = "#eef0f4";
-/** The light plate the name and meta sit on, across every stripe of a multi-color box. */
-export declare const LABEL_PLATE = "#fbfbfd";
-/** What a box's per-mode rendering is computed from. */
+/** What a box's per-mode rendering — and the page's Filter — is computed from. */
 export declare class NodeFacts {
     readonly nodeId: string;
     readonly shortName: string;
@@ -110,27 +127,32 @@ export declare class NodeModeStyler {
     dots(facts: NodeFacts): NodeModeDots;
     /** Fold one drawn box into the legend facts. */
     record(legend: LegendFacts, facts: NodeFacts): void;
-    private statement;
-    private plainLabel;
-    private runtimeMeta;
-    private envMeta;
-    private architectureAttrs;
     /**
-     * Runtime mode. A box in ONE base runtime with no specialization is a plain fill — its dark text
-     * reads on any of the pastel base colors. Every other box (several runtimes, or a specialization)
-     * is an HTML-like table of three rows: a band of equal stripes, a light PLATE carrying the name and
-     * meta across all of them, and the same stripes again. The stripes and insets stay visible above
-     * and below the text, and the text never straddles two colors.
+     * Line 3 of every box: every framework tag, bases before specializations, any tag outside the
+     * shared vocabulary last (it still runs somewhere somebody declared).
      */
-    private runtime;
+    frameworkLine(frameworks: string[]): string;
+    /**
+     * The three lines, identical in every mode: `L3  name` (level dimmed, name bold), the role, and
+     * the framework tags. The level is dimmed by giving its text color an alpha channel, which
+     * Graphviz writes as `fill-opacity`, so it dims on any fill.
+     */
+    labelText(facts: NodeFacts, fontColor: string): string;
     /** `filled` for one runtime; equal `striped` weights for several (the last takes the remainder). */
     stripeAttrs(bases: KnownFramework[]): string;
+    private statement;
+    /** A solid fill, the three lines on it. `extra` carries border attributes. */
+    private plain;
+    /**
+     * Runtime mode. No runtime, or one runtime with no specialization: a solid fill. One runtime with a
+     * specialization: NESTED. Several runtimes: full-height stripes with the text across them (a
+     * specialization on such a box shows in line 3 only).
+     */
+    private runtime;
     /**
-     * Stripe band / plate / stripe band. Every stripe cell asks for the same minimum width (an
-     * estimate of the text's width split evenly), so the stripes come out equal and the plate spans
-     * exactly their total.
+     * An outer cell in the base color whose padding is the visible frame, holding an inner ROUNDED
+     * table in the specialization's color that carries the text. The node's own polygon stays its
+     * FIRST shape, so the hover glow and the lock outline land on the outer box only.
      */
-    private plateTable;
-    /** One stripe of a band: the base color, with its specialization inset inside a margin of it. */
-    private stripeCell;
+    private nestedTable;
 }