@webpieces/nx-webpieces-rules 0.4.528 → 0.4.529

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webpieces/nx-webpieces-rules",
-  "version": "0.4.528",
+  "version": "0.4.529",
   "description": "Nx-specific webpieces validation rules and graph tooling. Bundles all @webpieces rule packages with Nx graph validators and an inference plugin.",
   "type": "commonjs",
   "main": "./src/index.js",
@@ -22,11 +22,11 @@
     "bin/**/*"
   ],
   "dependencies": {
-    "@webpieces/ai-hook-rules": "0.4.528",
-    "@webpieces/code-rules": "0.4.528",
-    "@webpieces/eslint-rules": "0.4.528",
-    "@webpieces/pr-gate": "0.4.528",
-    "@webpieces/rules-config": "0.4.528",
+    "@webpieces/ai-hook-rules": "0.4.529",
+    "@webpieces/code-rules": "0.4.529",
+    "@webpieces/eslint-rules": "0.4.529",
+    "@webpieces/pr-gate": "0.4.529",
+    "@webpieces/rules-config": "0.4.529",
     "madge": "8.0.0"
   },
   "peerDependencies": {

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

@@ -69,10 +69,17 @@
         var first = shapes[0];
         var fill = first.getAttribute('fill') || 'none';
         var stroke = first.getAttribute('stroke') || 'black';
+        // Measured BEFORE the shapes go: the record separator is where the label text starts.
+        var separator = separatorX(shapes);
         for (var i = 0; i < shapes.length; i++) shapes[i].remove();
 
         var ry = (box.y1 - box.y0) / 2;
         var rx = Math.max(6, ry * CAP_RATIO);
+        // A box listing several queues is TALL, and a cap scaled off half-height alone would then
+        // reach past the empty leading field and sit on top of the first characters of the label.
+        // Graphviz sizes that field from the font, not from the label's height, so the separator is
+        // the only honest bound on how far right the cap may go.
+        if (separator !== null) rx = Math.max(6, Math.min(rx, separator - box.x0));
         var body =
             'M' + (box.x0 + rx) + ',' + box.y0 +
             ' L' + (box.x1 - rx) + ',' + box.y0 +
@@ -94,6 +101,21 @@
         // through the far end of the cylinder.
     }
 
+    /**
+     * The x of the record's field separator — the VERTICAL polyline Graphviz draws between the empty
+     * leading field and the label — or null if this node has none.
+     */
+    function separatorX(shapes) {
+        for (var i = 0; i < shapes.length; i++) {
+            if (shapes[i].tagName !== 'polyline') continue;
+            var nums = (shapes[i].getAttribute('points') || '').match(/-?[\d.]+/g);
+            if (!nums || nums.length < 4) continue;
+            var x = parseFloat(nums[0]);
+            if (Math.abs(x - parseFloat(nums[2])) < 0.5) return x;
+        }
+        return null;
+    }
+
     /** The union bounding box of some SVG shape elements, from their raw geometry attributes. */
     function boundsOf(shapes) {
         var xs = [], ys = [];

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

@@ -15,7 +15,11 @@
  * Shape says what a node IS and line style says what a call IS. Solid = rpc: the
  * request follows the arrow and the response flows back. Dashed = event: it flows
  * in the arrow's direction and returns once it is queued. A queue is a sideways
- * cylinder, a datastore an upright one.
+ * cylinder, a datastore an upright one. A queue box lists ONE LINE PER QUEUE: the
+ * unit underneath is still the METHOD (what Terraform creates, and what
+ * runtime-dependencies.json records), but queues of one contract sharing the same
+ * producers and consumers are drawn together instead of as adjacent near-identical
+ * boxes — every queue is still named, only the node count drops.
  *
  * Calls that leave the repo (a contract NOTHING in-repo implements — firestore,
  * gmail, ...) are drawn as terminal nodes, so the vendor systems that actually

package/src/lib/runtime-visualizer.js

@@ -16,7 +16,11 @@
  * Shape says what a node IS and line style says what a call IS. Solid = rpc: the
  * request follows the arrow and the response flows back. Dashed = event: it flows
  * in the arrow's direction and returns once it is queued. A queue is a sideways
- * cylinder, a datastore an upright one.
+ * cylinder, a datastore an upright one. A queue box lists ONE LINE PER QUEUE: the
+ * unit underneath is still the METHOD (what Terraform creates, and what
+ * runtime-dependencies.json records), but queues of one contract sharing the same
+ * producers and consumers are drawn together instead of as adjacent near-identical
+ * boxes — every queue is still named, only the node count drops.
  *
  * Calls that leave the repo (a contract NOTHING in-repo implements — firestore,
  * gmail, ...) are drawn as terminal nodes, so the vendor systems that actually
@@ -166,37 +170,141 @@ function nodeLabel(name, svc) {
     return label;
 }
 /**
- * DOT for ONE runtime edge. rpc → a direct labeled SOLID arrow (producer calls consumer, response
- * comes back). pubsub → the producer enqueues and the consumer is delivered later, so we draw
- * producer → QUEUE → consumer through a sideways-cylinder queue node with DASHED arrows.
+ * DOT for ONE NON-QUEUED runtime edge: a direct labeled SOLID arrow (producer calls consumer, the
+ * response comes back). Queued (pubsub) hops are drawn by {@link queuesDot} instead, because they
+ * are merged across methods and therefore cannot be emitted one edge at a time.
  *
  * Solid vs dashed is the graph's one line-level distinction: solid is a call that returns a
  * response, dashed is an event that returns as soon as it is queued.
  */
 // webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file
-function edgeDot(edge, queues) {
+function edgeDot(edge) {
     const from = (0, dot_syntax_1.dotValue)(getShortName(edge.from));
     const to = (0, dot_syntax_1.dotValue)(getShortName(edge.to));
-    // Kept RAW: an ordinary edge label needs dotValue, the record-mode queue label needs
-    // recordValue, and recordValue already applies dotValue — escaping here would double it.
     const viaRaw = edge.via.map((v) => getShortName(v)).join(', ');
-    if (edge.type !== 'pubsub') {
-        return `  "${from}" -> "${to}" [label="${(0, dot_syntax_1.dotValue)(viaRaw)}"];\n`;
+    return `  "${from}" -> "${to}" [label="${(0, dot_syntax_1.dotValue)(viaRaw)}"];\n`;
+}
+/** The VISIBLE producers and consumers of one queue, gathered from the edges that survived hiding. */
+class QueueEndpoints {
+    producers = new Set();
+    consumers = new Set();
+}
+/**
+ * One drawn queue BOX: the queue keys (`Api.method`) it shows, and the endpoints they all share.
+ * Several keys land in one box only when they agree on all three of contract, producers and
+ * consumers — see {@link queuesDot}.
+ */
+class QueueGroup {
+    members;
+    producers;
+    consumers;
+    constructor(members, producers, consumers) {
+        this.members = members;
+        this.producers = producers;
+        this.consumers = consumers;
     }
-    // The queue node is identified by the METHOD, not by the (from,to) pair, so every producer and
-    // consumer of one queue converges on ONE box — including a service that enqueues to itself,
-    // which then renders as a visible loop through its queue instead of vanishing.
-    const queueId = edge.queue === undefined ? `queue__${from}__${to}` : `queue__${dotId(edge.queue)}`;
-    const queueName = edge.queue === undefined ? undefined : queues[edge.queue]?.queueName;
+}
+/**
+ * The label line for ONE queue inside a box: `Api.method`, and the Terraform queue name ONLY when it
+ * is not the derived `${Api}-${method}`.
+ *
+ * Printing a derived name was pure restatement — the line above it already said `Api.method`, so
+ * every queue box carried a second line that added nothing and doubled its height. A `@Queue(...)`
+ * OVERRIDE is the opposite: that string appears nowhere else on the graph, and it is the one string
+ * Terraform must match, so it stays.
+ */
+// webpieces-disable no-function-outside-class -- DOT label builder, matching getShortName in this file
+function queueLine(key, queue) {
+    const line = (0, dot_syntax_1.recordValue)(key);
+    if (queue === undefined)
+        return line;
+    if (queue.queueName === `${queue.api}-${queue.method}`)
+        return line;
+    return `${line}\\nqueue: ${(0, dot_syntax_1.recordValue)(queue.queueName)}`;
+}
+/** The node statement + enqueue/deliver arrows for one queue box. Names arrive pre-escaped. */
+// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file
+function queueBoxDot(id, body, producers, consumers) {
     // Record-mode label: the text must clear recordValue(), and QUEUE_LABEL_PREFIX supplies the
-    // empty leading field that draws the cylinder's end cap.
-    const body = edge.queue === undefined
-        ? `${(0, dot_syntax_1.recordValue)(viaRaw)}\\nqueue`
-        : `${(0, dot_syntax_1.recordValue)(edge.queue)}\\nqueue: ${(0, dot_syntax_1.recordValue)(queueName ?? edge.queue)}`;
-    return (`  "${queueId}" [shape=${QUEUE_SHAPE}, style="filled", fillcolor="${QUEUE_FILL}", ` +
-        `class="${QUEUE_CLASS}", label="${QUEUE_LABEL_PREFIX}${body}"];\n` +
-        `  "${from}" -> "${queueId}" [label="enqueue", style=dashed];\n` +
-        `  "${queueId}" -> "${to}" [label="deliver", style=dashed];\n`);
+    // empty leading field that draws the cylinder's end cap. Drop it and the node silently
+    // degrades to a plain box.
+    let dot = `  "${id}" [shape=${QUEUE_SHAPE}, style="filled", fillcolor="${QUEUE_FILL}", ` +
+        `class="${QUEUE_CLASS}", label="${QUEUE_LABEL_PREFIX}${body}"];\n`;
+    for (const producer of producers)
+        dot += `  "${producer}" -> "${id}" [label="enqueue", style=dashed];\n`;
+    for (const consumer of consumers)
+        dot += `  "${id}" -> "${consumer}" [label="deliver", style=dashed];\n`;
+    return dot;
+}
+/**
+ * Group the queued hops into boxes. The key is (contract, producer SET, consumer SET) — NOT the
+ * (from,to) pair of some edge.
+ *
+ * A queue node converges EVERY producer and consumer of its method onto one box, so keying by a
+ * service PAIR would re-split a two-producer queue into two boxes and invent topology nobody wrote.
+ * Only queues of the same contract whose producer and consumer sets are IDENTICAL may share a box;
+ * anything else stays separate, because merging it would assert a routing that does not exist.
+ */
+// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file
+function groupQueues(byQueue, graph) {
+    const groups = new Map();
+    // Sorted keys → the first member of every group, and therefore its node id, is deterministic.
+    for (const key of [...byQueue.keys()].sort()) {
+        const ends = byQueue.get(key);
+        const producers = [...ends.producers].sort();
+        const consumers = [...ends.consumers].sort();
+        const api = graph.queues[key]?.api ?? key.split('.')[0];
+        const mergeKey = [api, producers.join(','), consumers.join(',')].join(PAIR_SEP);
+        const existing = groups.get(mergeKey);
+        if (existing === undefined)
+            groups.set(mergeKey, new QueueGroup([key], producers, consumers));
+        else
+            existing.members.push(key);
+    }
+    return [...groups.values()];
+}
+/**
+ * The queued half of the graph: producer → QUEUE → consumer, drawn with a sideways-cylinder node and
+ * DASHED arrows (an event returns as soon as it is queued).
+ *
+ * One BOX may list several queues, one per line. The unit Cloud Tasks and Terraform create is still
+ * the METHOD — that is what runtime-dependencies.json records and this render never changes it — but
+ * two methods of one contract flowing between exactly the same producers and consumers drew two
+ * adjacent boxes whose only difference was the method name, and each carried a `queue:` line that
+ * merely restated it. Listing them inside ONE box keeps every queue named (you can still see which
+ * one is stuck) at a fraction of the node count.
+ */
+// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file
+function queuesDot(graph, hidden) {
+    const queued = graph.runtimeEdges.filter((e) => e.type === 'pubsub' && !hidden.has(e.from) && !hidden.has(e.to));
+    if (queued.length === 0)
+        return '';
+    let dot = '\n  // Queued hops. Each LINE in a box is one Cloud Tasks queue; queues of one contract\n' +
+        '  // sharing the same producers AND consumers are drawn in a single box.\n';
+    // A contract with no committed method table (a dependencies.json predating apiContracts) has no
+    // per-method queue at all, so it keeps the historical unnamed per-pair box.
+    const byQueue = new Map();
+    for (const edge of queued) {
+        const from = (0, dot_syntax_1.dotValue)(getShortName(edge.from));
+        const to = (0, dot_syntax_1.dotValue)(getShortName(edge.to));
+        if (edge.queue === undefined) {
+            // Kept RAW: recordValue already applies dotValue, so escaping here would double it.
+            const viaRaw = edge.via.map((v) => getShortName(v)).join(', ');
+            dot += queueBoxDot(`queue__${from}__${to}`, `${(0, dot_syntax_1.recordValue)(viaRaw)}\\nqueue`, [from], [to]);
+            continue;
+        }
+        if (!byQueue.has(edge.queue))
+            byQueue.set(edge.queue, new QueueEndpoints());
+        byQueue.get(edge.queue).producers.add(from);
+        byQueue.get(edge.queue).consumers.add(to);
+    }
+    for (const group of groupQueues(byQueue, graph)) {
+        const body = group.members
+            .map((key) => queueLine(key, graph.queues[key]))
+            .join('\\n');
+        dot += queueBoxDot(`queue__${dotId(group.members[0])}`, body, group.producers, group.consumers);
+    }
+    return dot;
 }
 /** A DOT-safe node-id fragment: anything but letters, digits and `_` becomes `_`. */
 // webpieces-disable no-function-outside-class -- DOT id builder, matching getShortName in this file
@@ -354,8 +462,12 @@ function generateRuntimeDot(graph, title = 'WebPieces Runtime Architecture', opt
     for (const edge of graph.runtimeEdges) {
         if (hidden.has(edge.from) || hidden.has(edge.to))
             continue;
-        dot += edgeDot(edge, graph.queues);
+        // Queued hops are merged across methods, so they cannot be emitted one edge at a time.
+        if (edge.type === 'pubsub')
+            continue;
+        dot += edgeDot(edge);
     }
+    dot += queuesDot(graph, hidden);
     dot += triggerDot(graph, hidden);
     if (options.showExternalNodes) {
         dot += externalSystemsDot(graph, hidden);
@@ -414,7 +526,7 @@ function legendHtml() {
             <div class="legend-col">
                 <h3>Node shapes &mdash; <em>what a box is</em></h3>
                 ${item(sw.service, '<strong>service</strong> &mdash; a deployable in this repo; fill is its dependency level')}
-                ${item(sw.queue, '<strong>queue</strong> &mdash; one box <em>per method</em>, the unit Cloud Tasks and Terraform actually create')}
+                ${item(sw.queue, '<strong>queue</strong> &mdash; each <em>line</em> in the box is one Cloud Tasks queue, the unit Terraform actually creates. Queues of one contract that flow between the <em>same</em> producer and consumer share a box; every one is still named, so you can always see <em>which</em> queue is stuck.')}
                 ${item(sw.database, '<strong>database</strong> &mdash; a datastore outside this repo')}
                 ${item(sw.storage, '<strong>object storage</strong> &mdash; a bucket outside this repo')}
                 ${item(sw.external, '<strong>external system</strong> &mdash; outside this repo; nothing here implements it. Pointing <strong>OUT</strong> = a system this repo calls (firestore, gmail). Pointing <strong>IN</strong> = an endpoint driven from outside (a Pub/Sub push, a Gmail or Twilio webhook).')}

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

@@ -1 +1 @@
-{"version":3,"file":"runtime-visualizer.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/runtime-visualizer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Runtime Visualizer\n *\n * Renders the runtime microservice graph (services + inferred Z -> X edges,\n * each labeled with the api(s) they flow over) to DOT + interactive HTML in\n * tmp/webpieces/runtime-architecture.{dot,html}.\n *\n * Each service node names the contracts it IMPLEMENTS. That list used to be\n * collapsed into a server/client boolean and thrown away — leaving an api that a\n * server serves but nothing in-repo calls completely invisible, and making a\n * correct api design look like a detection failure. What a service USES is NOT\n * listed: every use already draws an outgoing arrow labeled with the same\n * contract, so repeating it in the box only made every box wider.\n *\n * Shape says what a node IS and line style says what a call IS. Solid = rpc: the\n * request follows the arrow and the response flows back. Dashed = event: it flows\n * in the arrow's direction and returns once it is queued. A queue is a sideways\n * cylinder, a datastore an upright one.\n *\n * Calls that leave the repo (a contract NOTHING in-repo implements — firestore,\n * gmail, ...) are drawn as terminal nodes, so the vendor systems that actually\n * page you at 3am stop being missing from the picture. One that DECLARES what it\n * is, via an `@externalSystem` JSDoc tag or an `external:` nx tag, gets the shape\n * of the thing it is; the rest stay generic dashed boxes. They are RENDER-ONLY:\n * derivation, levels and cycle detection never see them.\n *\n * The same is true in the other direction for endpoints nothing in-repo CALLS: a\n * `cron` method hangs off a clock and an `external` method off a dashed inbound\n * box. Those are the entry points that wake a service up at 3am, and a graph\n * built only from in-repo callers cannot show them at all.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport type { RuntimeGraph, RuntimeEdge, RuntimeQueue, RuntimeService, RuntimeTrigger } from './runtime-graph';\nimport { dotValue, recordValue, assertValidDot } from './dot-syntax';\n\nconst LEVEL_COLORS: Record<number, string> = {\n    0: '#E8F5E9',\n    1: '#E3F2FD',\n    2: '#FFF3E0',\n    3: '#FCE4EC',\n};\n\nconst QUEUE_FILL = '#FFF3E0';\n\n/**\n * The queue node is an `Mrecord` whose FIRST field is empty, which draws a rounded outline with a\n * vertical cap line near one end — a cylinder lying on its side, distinguishing a queue from the\n * upright cylinder that now means a database.\n *\n * Two things here are load-bearing and easy to break:\n *\n * 1. NO surrounding `{}`. Record fields lay out along the rank direction, and this graph is\n *    `rankdir=TB` (see {@link generateRuntimeDot}), where the default is horizontal — which is what\n *    we want. Adding braces TOGGLES that, turning the cap line into a band across the top.\n * 2. The leading space is the empty field. The record parser trims it to nothing, which is the\n *    point; it must survive as its own field, so the `|` cannot be dropped.\n *\n * Graphviz has no sideways cylinder and never has: `orientation=` is documented as rotating POLYGON\n * shapes, and `cylinder` is drawn with beziers, so it silently ignores the attribute (graphviz issue\n * #2244, open since 2022 and still reproducible on 13.0.0). This is the closest native shape.\n */\nconst QUEUE_SHAPE = 'Mrecord';\nconst QUEUE_LABEL_PREFIX = ' |';\n\n/**\n * Marker class stamped on every queue node. Graphviz copies `class` straight into the rendered\n * `<g class=\"node wp_queue\">`, which is how runtime-visualizer.client.js finds these nodes and\n * redraws them as true horizontal cylinders in the browser.\n *\n * A CLASS rather than an id prefix, because queue-kind EXTERNAL systems are queues too and share the\n * `system__` id space with databases — which must stay upright. Underscored, not hyphenated: DOT\n * emits a hyphen as `&#45;`, which is harmless but needlessly surprising to anyone reading the SVG.\n */\nconst QUEUE_CLASS = 'wp_queue';\n\n/** Fill for the upright cylinder standing for an external DATASTORE (firestore, postgres, ...). */\nconst DATABASE_FILL = '#E1F5FE';\n\n/** Shape per external-system kind. Anything unrecognised falls back to the generic dashed box. */\nconst EXTERNAL_SHAPES: Record<string, string> = {\n    database: 'cylinder',\n    cache: 'cylinder',\n    queue: 'Mrecord',\n    storage: 'folder',\n};\n\n/** Fill per external-system kind, paired with {@link EXTERNAL_SHAPES}. */\nconst EXTERNAL_FILLS: Record<string, string> = {\n    database: DATABASE_FILL,\n    cache: DATABASE_FILL,\n    queue: QUEUE_FILL,\n    storage: '#F3E5F5',\n};\n\n/** Fill + border for the dashed terminal node standing for a system outside this repo. */\nconst EXTERNAL_FILL = '#FAFAFA';\nconst EXTERNAL_BORDER = '#9E9E9E';\n\n/** Fill + border for the clock node standing for a scheduler-driven endpoint. */\nconst CRON_FILL = '#FFF9C4';\nconst CRON_BORDER = '#F9A825';\n\n/** Apis per line inside a node label — beyond this the box grows wider than it is readable. */\nconst APIS_PER_LABEL_LINE = 3;\n\n/** Separator for the (service, external-library) grouping key; illegal in both project names. */\nconst PAIR_SEP = '|';\n\n/** Render options for the runtime graph. */\nexport class RuntimeVizOptions {\n    constructor(\n        /**\n         * Draw the dashed terminal nodes for contracts nothing in-repo implements. On by default;\n         * a repo whose external surface is noisy can turn them off in webpieces.config.json\n         * (runtime-architecture.showExternalNodes).\n         */\n        public readonly showExternalNodes: boolean = true,\n    ) {}\n}\n\nfunction getShortName(name: string): string {\n    return name.includes('/') ? name.split('/').pop()! : name;\n}\n\n/** Chunk a list into `\\n`-separated label lines of at most APIS_PER_LABEL_LINE entries. */\n// webpieces-disable no-function-outside-class -- DOT label builder, matching getShortName in this file\nfunction labelList(entries: string[]): string {\n    const lines: string[] = [];\n    const safe = entries.map((entry: string) => dotValue(entry));\n    for (let i = 0; i < safe.length; i += APIS_PER_LABEL_LINE) {\n        lines.push(safe.slice(i, i + APIS_PER_LABEL_LINE).join(', '));\n    }\n    return lines.join('\\\\n');\n}\n\n/**\n * The implemented-api entries for a node label. An api served through an EMBEDDED LIBRARY is\n * annotated with that library, because \"who implements WarmupApi?\" otherwise requires knowing that\n * the derivation walks the dependsOn closure and then walking it by hand.\n */\n// webpieces-disable no-function-outside-class -- DOT label builder, matching getShortName in this file\nfunction implementsEntries(svc: RuntimeService): string[] {\n    return svc.implements.map((api: string) => {\n        const via = svc.implementsVia?.[api];\n        return via === undefined ? api : `${api} (via ${getShortName(via)})`;\n    });\n}\n\n/**\n * The full node label: name, role/level/declared service name, then the contracts it SERVES.\n *\n * What a service USES is deliberately absent. Every `uses` entry already draws an outgoing arrow —\n * to the implementing service, to a queue, or to an external node — and the arrow carries the same\n * contract name as its label, so listing them in the box restated the picture and made every box\n * wider than it needed to be. `implements` stays because it has no such arrow: an api a service\n * serves but nothing in-repo calls is invisible otherwise.\n *\n * The one case this loses information is `showExternalNodes:false`, where an outbound call draws no\n * node and therefore no arrow. That is precisely what that opt-out asks for, and the legend says so.\n */\n// webpieces-disable no-function-outside-class -- DOT label builder, matching getShortName in this file\nfunction nodeLabel(name: string, svc: RuntimeService): string {\n    // The DECLARED role when the graph carries one; the old inference only as a fallback for a\n    // runtime-dependencies.json committed before `role` existed. Inferring it labelled every server\n    // with no implements as a \"client\", which is exactly wrong for a queue-driven service.\n    const role = svc.role ?? (svc.implements.length > 0 ? 'server' : 'client');\n    // The declared name is quoted for the reader — those quotes MUST be DOT-escaped, or they end\n    // the label string and the whole graph stops parsing.\n    const declared = svc.serviceName === undefined ? '' : `, \\\\\"${dotValue(svc.serviceName)}\\\\\"`;\n    let label = `${dotValue(getShortName(name))}\\\\n(${role}, L${svc.level}${declared})`;\n    if (svc.implements.length > 0) label += `\\\\nimplements: ${labelList(implementsEntries(svc))}`;\n    return label;\n}\n\n/**\n * DOT for ONE runtime edge. rpc → a direct labeled SOLID arrow (producer calls consumer, response\n * comes back). pubsub → the producer enqueues and the consumer is delivered later, so we draw\n * producer → QUEUE → consumer through a sideways-cylinder queue node with DASHED arrows.\n *\n * Solid vs dashed is the graph's one line-level distinction: solid is a call that returns a\n * response, dashed is an event that returns as soon as it is queued.\n */\n// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file\nfunction edgeDot(edge: RuntimeEdge, queues: Record<string, RuntimeQueue>): string {\n    const from = dotValue(getShortName(edge.from));\n    const to = dotValue(getShortName(edge.to));\n    // Kept RAW: an ordinary edge label needs dotValue, the record-mode queue label needs\n    // recordValue, and recordValue already applies dotValue — escaping here would double it.\n    const viaRaw = edge.via.map((v: string) => getShortName(v)).join(', ');\n    if (edge.type !== 'pubsub') {\n        return `  \"${from}\" -> \"${to}\" [label=\"${dotValue(viaRaw)}\"];\\n`;\n    }\n    // The queue node is identified by the METHOD, not by the (from,to) pair, so every producer and\n    // consumer of one queue converges on ONE box — including a service that enqueues to itself,\n    // which then renders as a visible loop through its queue instead of vanishing.\n    const queueId = edge.queue === undefined ? `queue__${from}__${to}` : `queue__${dotId(edge.queue)}`;\n    const queueName = edge.queue === undefined ? undefined : queues[edge.queue]?.queueName;\n    // Record-mode label: the text must clear recordValue(), and QUEUE_LABEL_PREFIX supplies the\n    // empty leading field that draws the cylinder's end cap.\n    const body =\n        edge.queue === undefined\n            ? `${recordValue(viaRaw)}\\\\nqueue`\n            : `${recordValue(edge.queue)}\\\\nqueue: ${recordValue(queueName ?? edge.queue)}`;\n    return (\n        `  \"${queueId}\" [shape=${QUEUE_SHAPE}, style=\"filled\", fillcolor=\"${QUEUE_FILL}\", ` +\n        `class=\"${QUEUE_CLASS}\", label=\"${QUEUE_LABEL_PREFIX}${body}\"];\\n` +\n        `  \"${from}\" -> \"${queueId}\" [label=\"enqueue\", style=dashed];\\n` +\n        `  \"${queueId}\" -> \"${to}\" [label=\"deliver\", style=dashed];\\n`\n    );\n}\n\n/** A DOT-safe node-id fragment: anything but letters, digits and `_` becomes `_`. */\n// webpieces-disable no-function-outside-class -- DOT id builder, matching getShortName in this file\nfunction dotId(raw: string): string {\n    return raw.replace(/[^A-Za-z0-9_]/g, '_');\n}\n\n/**\n * The clock and outside-system nodes for endpoints NOTHING in-repo calls.\n *\n * A cron sweep and a GCP push subscription are real runtime entry points with real Terraform behind\n * them, but they produce no runtime EDGE (there is no in-repo caller), so until now they were simply\n * absent — a server's most operationally interesting endpoint could be invisible on its own graph.\n * Both are drawn pointing INTO the service that serves them, the opposite direction from\n * {@link externalDot}'s outbound vendor calls.\n */\n// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file\nfunction triggerDot(graph: RuntimeGraph, hidden: Set<string>): string {\n    const triggers = graph.triggers.filter((t: RuntimeTrigger) => !hidden.has(t.service));\n    if (triggers.length === 0) return '';\n\n    let dot = '\\n  // Entry points nothing in this repo calls: a clock, or a system outside the repo.\\n';\n    for (const trigger of triggers) {\n        const service = dotValue(getShortName(trigger.service));\n        const label = dotValue(`${trigger.api}.${trigger.method}`);\n        if (trigger.kind === 'cron') {\n            const id = `cron__${dotId(`${trigger.api}_${trigger.method}`)}`;\n            const schedule = dotValue(trigger.queueName ?? `${trigger.api}-${trigger.method}`);\n            dot +=\n                `  \"${id}\" [shape=circle, style=\"filled\", fillcolor=\"${CRON_FILL}\", ` +\n                `color=\"${CRON_BORDER}\", label=\"⏰\\\\ncron\"];\\n` +\n                `  \"${id}\" -> \"${service}\" [label=\"${label}\\\\n${schedule}\", color=\"${CRON_BORDER}\"];\\n`;\n            continue;\n        }\n        const id = `inbound__${dotId(trigger.api)}`;\n        dot +=\n            `  \"${id}\" [shape=box, style=\"dashed,filled\", fillcolor=\"${EXTERNAL_FILL}\", ` +\n            `color=\"${EXTERNAL_BORDER}\", label=\"${dotValue(trigger.api)}\\\\n(external caller)\"];\\n` +\n            `  \"${id}\" -> \"${service}\" [label=\"${label}\", style=dashed, color=\"${EXTERNAL_BORDER}\"];\\n`;\n    }\n    return dot;\n}\n\n/**\n * The DECLARED external systems — the ones that said what they are, so they get a shape that says\n * it: a cylinder for a database, a folder for a bucket. Everything undeclared falls through to\n * {@link externalDot}'s generic grey box, which is why adding this broke nothing existing.\n *\n * The arrows are SOLID. A call to firestore or postgres is synchronous — it returns a value — and\n * the graph's rule is that solid means \"response comes back\". Being outside the repo is carried by\n * the node's shape, never by the line style; conflating the two is what made a blocking database\n * read look like an event.\n */\n// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file\nfunction externalSystemsDot(graph: RuntimeGraph, hidden: Set<string>): string {\n    const systems = graph.externalSystems ?? {};\n    const ids = Object.keys(systems).sort();\n    if (ids.length === 0) return '';\n\n    let dot = '\\n  // Declared external systems — drawn with the shape of what they actually are.\\n';\n    for (const id of ids) {\n        const system = systems[id];\n        const shape = EXTERNAL_SHAPES[system.kind] ?? 'box';\n        const fill = EXTERNAL_FILLS[system.kind] ?? EXTERNAL_FILL;\n        // An Mrecord-shaped system needs the same empty leading field as a queue node, or it\n        // renders as a plain box and silently loses the sideways-cylinder read.\n        const isQueue = shape === QUEUE_SHAPE;\n        const prefix = isQueue ? QUEUE_LABEL_PREFIX : '';\n        const text = isQueue ? recordValue(system.label) : dotValue(system.label);\n        // Only a queue-kind system is marked: a database here is an UPRIGHT cylinder and must not be\n        // caught by the browser-side reshaping that lays queues on their side.\n        const marker = isQueue ? `class=\"${QUEUE_CLASS}\", ` : '';\n        dot +=\n            `  \"system__${dotId(id)}\" [shape=${shape}, style=\"filled\", fillcolor=\"${fill}\", ` +\n            `${marker}label=\"${prefix}${text}\\\\n(external ${dotValue(system.kind)})\"];\\n`;\n    }\n    for (const id of ids) {\n        const system = systems[id];\n        const via = system.apis.length === 0 ? '' : ` [label=\"${labelList([...system.apis].sort())}\"]`;\n        for (const service of [...system.usedBy].sort()) {\n            if (hidden.has(service)) continue;\n            dot += `  \"${dotValue(getShortName(service))}\" -> \"system__${dotId(id)}\"${via};\\n`;\n        }\n    }\n    return dot;\n}\n\n/**\n * The dashed terminal nodes + edges for calls that LEAVE the repo. Built from `unresolvedUses` —\n * a contract used by a node and implemented by nobody in-repo — which the derivation already\n * computes and which was, until now, only ever printed as a warning.\n *\n * Grouped by the api-lib that owns the contracts, so a service reaching three firestore contracts\n * draws ONE `lib-firestore (external)` box rather than three. These are drawn, never derived: they\n * are absent from levels, cycle detection and the transitive implements attribution.\n *\n * A contract carrying an `@externalSystem` declaration is skipped here — {@link externalSystemsDot}\n * has already drawn it with a real shape, and rendering it in both places would double the node.\n */\n// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file\nfunction externalDot(graph: RuntimeGraph, hidden: Set<string>): string {\n    // \"service|externalName\" -> the apis flowing over it.\n    const apisByPair = new Map<string, string[]>();\n    for (const use of graph.unresolvedUses) {\n        if (hidden.has(use.service)) continue;\n        if (graph.apis[use.api]?.externalSystem !== undefined) continue;\n        const external = dotValue(getShortName(graph.apis[use.api]?.owner ?? use.api));\n        const key = `${use.service}${PAIR_SEP}${external}`;\n        if (!apisByPair.has(key)) apisByPair.set(key, []);\n        apisByPair.get(key)!.push(use.api);\n    }\n    if (apisByPair.size === 0) return '';\n\n    let dot = '\\n  // Systems outside this repo — no in-repo service implements these contracts.\\n';\n    // The node ID is prefixed so an external library can never collide with a service of the same\n    // short name; only the label carries the bare name.\n    const externals = new Set([...apisByPair.keys()].map((key: string) => key.split(PAIR_SEP)[1]));\n    for (const external of [...externals].sort()) {\n        dot +=\n            `  \"external__${external}\" [shape=box, style=\"dashed,filled\", fillcolor=\"${EXTERNAL_FILL}\", ` +\n            `color=\"${EXTERNAL_BORDER}\", label=\"${external}\\\\n(external)\"];\\n`;\n    }\n    for (const key of [...apisByPair.keys()].sort()) {\n        const parts = key.split(PAIR_SEP);\n        const service = parts[0];\n        const external = parts[1];\n        const via = labelList(apisByPair.get(key)!.sort());\n        // SOLID: this is a synchronous call that returns a value. Dashed is reserved for events, and\n        // \"outside the repo\" is already said by the node's dashed border.\n        dot +=\n            `  \"${dotValue(getShortName(service))}\" -> \"external__${external}\" ` +\n            `[label=\"${via}\", color=\"${EXTERNAL_BORDER}\"];\\n`;\n    }\n    return dot;\n}\n\n/** Build the Graphviz DOT for the runtime service graph. */\n// webpieces-disable no-function-outside-class -- module entry point, matching the sibling builders here\nexport function generateRuntimeDot(\n    graph: RuntimeGraph,\n    title: string = 'WebPieces Runtime Architecture',\n    options: RuntimeVizOptions = new RuntimeVizOptions(),\n): string {\n    let dot = 'digraph RuntimeArchitecture {\\n';\n    dot += '  rankdir=TB;\\n';\n    dot += '  node [shape=box, style=\"filled,rounded\", fontname=\"Arial\"];\\n';\n    dot += '  edge [fontname=\"Arial\", fontsize=10];\\n\\n';\n\n    // Services tagged drawOnGraph:false stay in the JSON but are omitted here —\n    // both their node and any edge touching them are dropped from the render.\n    const hidden = new Set(\n        Object.keys(graph.services).filter((name: string) => graph.services[name].drawOnGraph === false)\n    );\n\n    for (const name of Object.keys(graph.services)) {\n        if (hidden.has(name)) continue;\n        const svc = graph.services[name];\n        const color = LEVEL_COLORS[svc.level] || '#F5F5F5';\n        dot += `  \"${dotValue(getShortName(name))}\" [fillcolor=\"${color}\", label=\"${nodeLabel(name, svc)}\"];\\n`;\n    }\n\n    dot += '\\n';\n\n    for (const edge of graph.runtimeEdges) {\n        if (hidden.has(edge.from) || hidden.has(edge.to)) continue;\n        dot += edgeDot(edge, graph.queues);\n    }\n\n    dot += triggerDot(graph, hidden);\n\n    if (options.showExternalNodes) {\n        dot += externalSystemsDot(graph, hidden);\n        dot += externalDot(graph, hidden);\n    }\n\n    dot += '\\n  labelloc=\"t\";\\n';\n    dot += `  label=\"${dotValue(title)}\\\\n(from architecture/runtime-dependencies.json)\";\\n`;\n    dot += '  fontsize=20;\\n';\n    dot += '}\\n';\n    // Nothing downstream parses this DOT until a human opens the page, so parse-shape is checked\n    // HERE — a graph that cannot render is a generation failure, not a blank page to discover later.\n    assertValidDot(dot, 'runtime-architecture.dot');\n    return dot;\n}\n\n/**\n * Inline SVG swatches for the legend, hand-drawn to match what Graphviz emits for each shape.\n *\n * Hand-drawn on purpose: the alternative is shelling out to Graphviz at generate time, which would\n * make writing the HTML depend on a `dot` binary being installed — a dependency this tool does not\n * otherwise have, since rendering happens in the browser.\n */\nclass LegendSwatches {\n    readonly service =\n        '<svg width=\"46\" height=\"26\"><rect x=\"1\" y=\"3\" width=\"44\" height=\"20\" rx=\"7\" fill=\"#E8F5E9\" stroke=\"#333\"/></svg>';\n    /**\n     * A cylinder on its side — the SAME geometry runtime-visualizer.client.js draws on the real\n     * node, so the legend cannot drift from the picture it explains.\n     */\n    readonly queue =\n        `<svg width=\"46\" height=\"26\"><path d=\"M9,5 H37 A8,8 0 0 1 37,21 H9 A8,8 0 0 1 9,5 Z\" fill=\"${QUEUE_FILL}\" stroke=\"#333\"/>` +\n        '<path d=\"M9,5 A8,8 0 0 1 9,21\" fill=\"none\" stroke=\"#333\"/></svg>';\n    readonly database =\n        `<svg width=\"46\" height=\"26\"><path d=\"M8,7 a15,4 0 0 1 30,0 v12 a15,4 0 0 1 -30,0 z\" fill=\"${DATABASE_FILL}\" stroke=\"#333\"/>` +\n        '<path d=\"M8,7 a15,4 0 0 0 30,0\" fill=\"none\" stroke=\"#333\"/></svg>';\n    readonly storage =\n        '<svg width=\"46\" height=\"26\"><path d=\"M2,22 V6 H16 l3,3 H44 V22 Z\" fill=\"#F3E5F5\" stroke=\"#333\"/></svg>';\n    readonly external =\n        `<svg width=\"46\" height=\"26\"><rect x=\"1\" y=\"3\" width=\"44\" height=\"20\" fill=\"${EXTERNAL_FILL}\" ` +\n        `stroke=\"${EXTERNAL_BORDER}\" stroke-dasharray=\"4,3\"/></svg>`;\n    readonly cron =\n        `<svg width=\"46\" height=\"26\"><circle cx=\"23\" cy=\"13\" r=\"11\" fill=\"${CRON_FILL}\" stroke=\"${CRON_BORDER}\"/>` +\n        '<text x=\"23\" y=\"18\" font-size=\"12\" text-anchor=\"middle\">&#9200;</text></svg>';\n    readonly solid =\n        '<svg width=\"60\" height=\"20\"><line x1=\"2\" y1=\"10\" x2=\"48\" y2=\"10\" stroke=\"#333\" stroke-width=\"1.5\"/>' +\n        '<path d=\"M48,6 L57,10 L48,14 Z\" fill=\"#333\"/></svg>';\n    readonly dashed =\n        '<svg width=\"60\" height=\"20\"><line x1=\"2\" y1=\"10\" x2=\"48\" y2=\"10\" stroke=\"#333\" stroke-width=\"1.5\" ' +\n        'stroke-dasharray=\"5,4\"/><path d=\"M48,6 L57,10 L48,14 Z\" fill=\"#333\"/></svg>';\n    readonly scheduled =\n        `<svg width=\"60\" height=\"20\"><line x1=\"2\" y1=\"10\" x2=\"48\" y2=\"10\" stroke=\"${CRON_BORDER}\" stroke-width=\"1.5\"/>` +\n        `<path d=\"M48,6 L57,10 L48,14 Z\" fill=\"${CRON_BORDER}\"/></svg>`;\n}\n\n/**\n * The legend. Three columns — what a box IS, what a line MEANS, how to read a box — replacing the\n * three paragraphs of prose that used to restate the picture in words. Styled after\n * {@link GraphVisualizer}'s legend so the two graphs in this repo look like one tool.\n */\n// webpieces-disable no-function-outside-class -- HTML builder, matching the sibling builders in this file\nfunction legendHtml(): string {\n    const sw = new LegendSwatches();\n    const item = (swatch: string, text: string): string =>\n        `<div class=\"legend-item\"><span class=\"sw\">${swatch}</span><span>${text}</span></div>`;\n    return `<div class=\"legend\">\n        <h2>Legend</h2>\n        <div class=\"legend-columns\">\n            <div class=\"legend-col\">\n                <h3>Node shapes &mdash; <em>what a box is</em></h3>\n                ${item(sw.service, '<strong>service</strong> &mdash; a deployable in this repo; fill is its dependency level')}\n                ${item(sw.queue, '<strong>queue</strong> &mdash; one box <em>per method</em>, the unit Cloud Tasks and Terraform actually create')}\n                ${item(sw.database, '<strong>database</strong> &mdash; a datastore outside this repo')}\n                ${item(sw.storage, '<strong>object storage</strong> &mdash; a bucket outside this repo')}\n                ${item(sw.external, '<strong>external system</strong> &mdash; outside this repo; nothing here implements it. Pointing <strong>OUT</strong> = a system this repo calls (firestore, gmail). Pointing <strong>IN</strong> = an endpoint driven from outside (a Pub/Sub push, a Gmail or Twilio webhook).')}\n                ${item(sw.cron, '<strong>cron</strong> &mdash; a scheduler fires this endpoint')}\n            </div>\n            <div class=\"legend-col\">\n                <h3>Lines &mdash; <em>what a call is</em></h3>\n                ${item(sw.solid, '<strong>solid = rpc</strong> &mdash; the request follows the arrow, the response flows back')}\n                ${item(sw.dashed, '<strong>dashed = event</strong> &mdash; asynchronous: the event flows in the direction of the arrow and returns once it is in the queue')}\n                ${item(sw.scheduled, '<strong>scheduled</strong> &mdash; a cron invocation')}\n                <div class=\"legend-note\"><em>Every line is labeled with the contract the call flows over. A service that enqueues to itself loops through its own queue &mdash; a queue decouples the two sides, so it is not a dependency cycle.</em></div>\n            </div>\n            <div class=\"legend-col\">\n                <h3>Reading a box</h3>\n                <pre class=\"legend-box-anatomy\">name\n(server|client, L#)\nimplements: &lt;contracts it serves&gt;\n</pre>\n                <div class=\"legend-note\">A box lists only what it <strong>serves</strong>. What it <em>calls</em> is on its outgoing arrows.</div>\n                <div class=\"legend-note\"><code>(via &lt;lib&gt;)</code> = served through an embedded library, not its own source.</div>\n            </div>\n        </div>\n    </div>`;\n}\n\nfunction generateRuntimeHtml(dot: string, title: string): string {\n    // The browser half lives in a plain .js asset (matching graph-visualizer.client.js) rather than\n    // in a template literal here: it renders with @viz-js/viz v3 AND redraws every queue node as a\n    // true horizontal cylinder, which is more logic than belongs inline in a .ts string.\n    const clientJs = fs.readFileSync(path.join(__dirname, 'runtime-visualizer.client.js'), 'utf-8');\n    const script = clientJs.split('__DOT__').join(JSON.stringify(dot));\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>\n        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #f5f5f5; }\n        h1 { text-align: center; color: #333; }\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    </style>\n</head>\n<body>\n    <h1>${title}</h1>\n    <div id=\"graph\"></div>\n    ${legendHtml()}\n    <script>${script}</script>\n</body>\n</html>`;\n}\n\nexport interface RuntimeVisualizationPaths {\n    dotPath: string;\n    htmlPath: string;\n}\n\n/** Write the DOT + HTML renderings to tmp/webpieces/. */\nexport function writeRuntimeVisualization(\n    graph: RuntimeGraph,\n    workspaceRoot: string,\n    title: string = 'WebPieces Runtime Architecture',\n    options: RuntimeVizOptions = new RuntimeVizOptions(),\n): RuntimeVisualizationPaths {\n    const outputDir = path.join(workspaceRoot, 'tmp', 'webpieces');\n    if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });\n\n    const dot = generateRuntimeDot(graph, title, options);\n    const dotPath = path.join(outputDir, 'runtime-architecture.dot');\n    fs.writeFileSync(dotPath, dot, 'utf-8');\n\n    const htmlPath = path.join(outputDir, 'runtime-architecture.html');\n    fs.writeFileSync(htmlPath, generateRuntimeHtml(dot, title), 'utf-8');\n\n    return { dotPath, htmlPath };\n}\n"]}
+{"version":3,"file":"runtime-visualizer.js","sourceRoot":"","sources":["../../../../../../packages/tooling/nx-webpieces-rules/src/lib/runtime-visualizer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Runtime Visualizer\n *\n * Renders the runtime microservice graph (services + inferred Z -> X edges,\n * each labeled with the api(s) they flow over) to DOT + interactive HTML in\n * tmp/webpieces/runtime-architecture.{dot,html}.\n *\n * Each service node names the contracts it IMPLEMENTS. That list used to be\n * collapsed into a server/client boolean and thrown away — leaving an api that a\n * server serves but nothing in-repo calls completely invisible, and making a\n * correct api design look like a detection failure. What a service USES is NOT\n * listed: every use already draws an outgoing arrow labeled with the same\n * contract, so repeating it in the box only made every box wider.\n *\n * Shape says what a node IS and line style says what a call IS. Solid = rpc: the\n * request follows the arrow and the response flows back. Dashed = event: it flows\n * in the arrow's direction and returns once it is queued. A queue is a sideways\n * cylinder, a datastore an upright one. A queue box lists ONE LINE PER QUEUE: the\n * unit underneath is still the METHOD (what Terraform creates, and what\n * runtime-dependencies.json records), but queues of one contract sharing the same\n * producers and consumers are drawn together instead of as adjacent near-identical\n * boxes — every queue is still named, only the node count drops.\n *\n * Calls that leave the repo (a contract NOTHING in-repo implements — firestore,\n * gmail, ...) are drawn as terminal nodes, so the vendor systems that actually\n * page you at 3am stop being missing from the picture. One that DECLARES what it\n * is, via an `@externalSystem` JSDoc tag or an `external:` nx tag, gets the shape\n * of the thing it is; the rest stay generic dashed boxes. They are RENDER-ONLY:\n * derivation, levels and cycle detection never see them.\n *\n * The same is true in the other direction for endpoints nothing in-repo CALLS: a\n * `cron` method hangs off a clock and an `external` method off a dashed inbound\n * box. Those are the entry points that wake a service up at 3am, and a graph\n * built only from in-repo callers cannot show them at all.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport type { RuntimeGraph, RuntimeEdge, RuntimeQueue, RuntimeService, RuntimeTrigger } from './runtime-graph';\nimport { dotValue, recordValue, assertValidDot } from './dot-syntax';\n\nconst LEVEL_COLORS: Record<number, string> = {\n    0: '#E8F5E9',\n    1: '#E3F2FD',\n    2: '#FFF3E0',\n    3: '#FCE4EC',\n};\n\nconst QUEUE_FILL = '#FFF3E0';\n\n/**\n * The queue node is an `Mrecord` whose FIRST field is empty, which draws a rounded outline with a\n * vertical cap line near one end — a cylinder lying on its side, distinguishing a queue from the\n * upright cylinder that now means a database.\n *\n * Two things here are load-bearing and easy to break:\n *\n * 1. NO surrounding `{}`. Record fields lay out along the rank direction, and this graph is\n *    `rankdir=TB` (see {@link generateRuntimeDot}), where the default is horizontal — which is what\n *    we want. Adding braces TOGGLES that, turning the cap line into a band across the top.\n * 2. The leading space is the empty field. The record parser trims it to nothing, which is the\n *    point; it must survive as its own field, so the `|` cannot be dropped.\n *\n * Graphviz has no sideways cylinder and never has: `orientation=` is documented as rotating POLYGON\n * shapes, and `cylinder` is drawn with beziers, so it silently ignores the attribute (graphviz issue\n * #2244, open since 2022 and still reproducible on 13.0.0). This is the closest native shape.\n */\nconst QUEUE_SHAPE = 'Mrecord';\nconst QUEUE_LABEL_PREFIX = ' |';\n\n/**\n * Marker class stamped on every queue node. Graphviz copies `class` straight into the rendered\n * `<g class=\"node wp_queue\">`, which is how runtime-visualizer.client.js finds these nodes and\n * redraws them as true horizontal cylinders in the browser.\n *\n * A CLASS rather than an id prefix, because queue-kind EXTERNAL systems are queues too and share the\n * `system__` id space with databases — which must stay upright. Underscored, not hyphenated: DOT\n * emits a hyphen as `&#45;`, which is harmless but needlessly surprising to anyone reading the SVG.\n */\nconst QUEUE_CLASS = 'wp_queue';\n\n/** Fill for the upright cylinder standing for an external DATASTORE (firestore, postgres, ...). */\nconst DATABASE_FILL = '#E1F5FE';\n\n/** Shape per external-system kind. Anything unrecognised falls back to the generic dashed box. */\nconst EXTERNAL_SHAPES: Record<string, string> = {\n    database: 'cylinder',\n    cache: 'cylinder',\n    queue: 'Mrecord',\n    storage: 'folder',\n};\n\n/** Fill per external-system kind, paired with {@link EXTERNAL_SHAPES}. */\nconst EXTERNAL_FILLS: Record<string, string> = {\n    database: DATABASE_FILL,\n    cache: DATABASE_FILL,\n    queue: QUEUE_FILL,\n    storage: '#F3E5F5',\n};\n\n/** Fill + border for the dashed terminal node standing for a system outside this repo. */\nconst EXTERNAL_FILL = '#FAFAFA';\nconst EXTERNAL_BORDER = '#9E9E9E';\n\n/** Fill + border for the clock node standing for a scheduler-driven endpoint. */\nconst CRON_FILL = '#FFF9C4';\nconst CRON_BORDER = '#F9A825';\n\n/** Apis per line inside a node label — beyond this the box grows wider than it is readable. */\nconst APIS_PER_LABEL_LINE = 3;\n\n/** Separator for the (service, external-library) grouping key; illegal in both project names. */\nconst PAIR_SEP = '|';\n\n/** Render options for the runtime graph. */\nexport class RuntimeVizOptions {\n    constructor(\n        /**\n         * Draw the dashed terminal nodes for contracts nothing in-repo implements. On by default;\n         * a repo whose external surface is noisy can turn them off in webpieces.config.json\n         * (runtime-architecture.showExternalNodes).\n         */\n        public readonly showExternalNodes: boolean = true,\n    ) {}\n}\n\nfunction getShortName(name: string): string {\n    return name.includes('/') ? name.split('/').pop()! : name;\n}\n\n/** Chunk a list into `\\n`-separated label lines of at most APIS_PER_LABEL_LINE entries. */\n// webpieces-disable no-function-outside-class -- DOT label builder, matching getShortName in this file\nfunction labelList(entries: string[]): string {\n    const lines: string[] = [];\n    const safe = entries.map((entry: string) => dotValue(entry));\n    for (let i = 0; i < safe.length; i += APIS_PER_LABEL_LINE) {\n        lines.push(safe.slice(i, i + APIS_PER_LABEL_LINE).join(', '));\n    }\n    return lines.join('\\\\n');\n}\n\n/**\n * The implemented-api entries for a node label. An api served through an EMBEDDED LIBRARY is\n * annotated with that library, because \"who implements WarmupApi?\" otherwise requires knowing that\n * the derivation walks the dependsOn closure and then walking it by hand.\n */\n// webpieces-disable no-function-outside-class -- DOT label builder, matching getShortName in this file\nfunction implementsEntries(svc: RuntimeService): string[] {\n    return svc.implements.map((api: string) => {\n        const via = svc.implementsVia?.[api];\n        return via === undefined ? api : `${api} (via ${getShortName(via)})`;\n    });\n}\n\n/**\n * The full node label: name, role/level/declared service name, then the contracts it SERVES.\n *\n * What a service USES is deliberately absent. Every `uses` entry already draws an outgoing arrow —\n * to the implementing service, to a queue, or to an external node — and the arrow carries the same\n * contract name as its label, so listing them in the box restated the picture and made every box\n * wider than it needed to be. `implements` stays because it has no such arrow: an api a service\n * serves but nothing in-repo calls is invisible otherwise.\n *\n * The one case this loses information is `showExternalNodes:false`, where an outbound call draws no\n * node and therefore no arrow. That is precisely what that opt-out asks for, and the legend says so.\n */\n// webpieces-disable no-function-outside-class -- DOT label builder, matching getShortName in this file\nfunction nodeLabel(name: string, svc: RuntimeService): string {\n    // The DECLARED role when the graph carries one; the old inference only as a fallback for a\n    // runtime-dependencies.json committed before `role` existed. Inferring it labelled every server\n    // with no implements as a \"client\", which is exactly wrong for a queue-driven service.\n    const role = svc.role ?? (svc.implements.length > 0 ? 'server' : 'client');\n    // The declared name is quoted for the reader — those quotes MUST be DOT-escaped, or they end\n    // the label string and the whole graph stops parsing.\n    const declared = svc.serviceName === undefined ? '' : `, \\\\\"${dotValue(svc.serviceName)}\\\\\"`;\n    let label = `${dotValue(getShortName(name))}\\\\n(${role}, L${svc.level}${declared})`;\n    if (svc.implements.length > 0) label += `\\\\nimplements: ${labelList(implementsEntries(svc))}`;\n    return label;\n}\n\n/**\n * DOT for ONE NON-QUEUED runtime edge: a direct labeled SOLID arrow (producer calls consumer, the\n * response comes back). Queued (pubsub) hops are drawn by {@link queuesDot} instead, because they\n * are merged across methods and therefore cannot be emitted one edge at a time.\n *\n * Solid vs dashed is the graph's one line-level distinction: solid is a call that returns a\n * response, dashed is an event that returns as soon as it is queued.\n */\n// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file\nfunction edgeDot(edge: RuntimeEdge): string {\n    const from = dotValue(getShortName(edge.from));\n    const to = dotValue(getShortName(edge.to));\n    const viaRaw = edge.via.map((v: string) => getShortName(v)).join(', ');\n    return `  \"${from}\" -> \"${to}\" [label=\"${dotValue(viaRaw)}\"];\\n`;\n}\n\n/** The VISIBLE producers and consumers of one queue, gathered from the edges that survived hiding. */\nclass QueueEndpoints {\n    readonly producers = new Set<string>();\n    readonly consumers = new Set<string>();\n}\n\n/**\n * One drawn queue BOX: the queue keys (`Api.method`) it shows, and the endpoints they all share.\n * Several keys land in one box only when they agree on all three of contract, producers and\n * consumers — see {@link queuesDot}.\n */\nclass QueueGroup {\n    constructor(\n        public readonly members: string[],\n        public readonly producers: string[],\n        public readonly consumers: string[],\n    ) {}\n}\n\n/**\n * The label line for ONE queue inside a box: `Api.method`, and the Terraform queue name ONLY when it\n * is not the derived `${Api}-${method}`.\n *\n * Printing a derived name was pure restatement — the line above it already said `Api.method`, so\n * every queue box carried a second line that added nothing and doubled its height. A `@Queue(...)`\n * OVERRIDE is the opposite: that string appears nowhere else on the graph, and it is the one string\n * Terraform must match, so it stays.\n */\n// webpieces-disable no-function-outside-class -- DOT label builder, matching getShortName in this file\nfunction queueLine(key: string, queue: RuntimeQueue | undefined): string {\n    const line = recordValue(key);\n    if (queue === undefined) return line;\n    if (queue.queueName === `${queue.api}-${queue.method}`) return line;\n    return `${line}\\\\nqueue: ${recordValue(queue.queueName)}`;\n}\n\n/** The node statement + enqueue/deliver arrows for one queue box. Names arrive pre-escaped. */\n// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file\nfunction queueBoxDot(id: string, body: string, producers: string[], consumers: string[]): string {\n    // Record-mode label: the text must clear recordValue(), and QUEUE_LABEL_PREFIX supplies the\n    // empty leading field that draws the cylinder's end cap. Drop it and the node silently\n    // degrades to a plain box.\n    let dot =\n        `  \"${id}\" [shape=${QUEUE_SHAPE}, style=\"filled\", fillcolor=\"${QUEUE_FILL}\", ` +\n        `class=\"${QUEUE_CLASS}\", label=\"${QUEUE_LABEL_PREFIX}${body}\"];\\n`;\n    for (const producer of producers) dot += `  \"${producer}\" -> \"${id}\" [label=\"enqueue\", style=dashed];\\n`;\n    for (const consumer of consumers) dot += `  \"${id}\" -> \"${consumer}\" [label=\"deliver\", style=dashed];\\n`;\n    return dot;\n}\n\n/**\n * Group the queued hops into boxes. The key is (contract, producer SET, consumer SET) — NOT the\n * (from,to) pair of some edge.\n *\n * A queue node converges EVERY producer and consumer of its method onto one box, so keying by a\n * service PAIR would re-split a two-producer queue into two boxes and invent topology nobody wrote.\n * Only queues of the same contract whose producer and consumer sets are IDENTICAL may share a box;\n * anything else stays separate, because merging it would assert a routing that does not exist.\n */\n// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file\nfunction groupQueues(byQueue: Map<string, QueueEndpoints>, graph: RuntimeGraph): QueueGroup[] {\n    const groups = new Map<string, QueueGroup>();\n    // Sorted keys → the first member of every group, and therefore its node id, is deterministic.\n    for (const key of [...byQueue.keys()].sort()) {\n        const ends = byQueue.get(key)!;\n        const producers = [...ends.producers].sort();\n        const consumers = [...ends.consumers].sort();\n        const api = graph.queues[key]?.api ?? key.split('.')[0];\n        const mergeKey = [api, producers.join(','), consumers.join(',')].join(PAIR_SEP);\n        const existing = groups.get(mergeKey);\n        if (existing === undefined) groups.set(mergeKey, new QueueGroup([key], producers, consumers));\n        else existing.members.push(key);\n    }\n    return [...groups.values()];\n}\n\n/**\n * The queued half of the graph: producer → QUEUE → consumer, drawn with a sideways-cylinder node and\n * DASHED arrows (an event returns as soon as it is queued).\n *\n * One BOX may list several queues, one per line. The unit Cloud Tasks and Terraform create is still\n * the METHOD — that is what runtime-dependencies.json records and this render never changes it — but\n * two methods of one contract flowing between exactly the same producers and consumers drew two\n * adjacent boxes whose only difference was the method name, and each carried a `queue:` line that\n * merely restated it. Listing them inside ONE box keeps every queue named (you can still see which\n * one is stuck) at a fraction of the node count.\n */\n// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file\nfunction queuesDot(graph: RuntimeGraph, hidden: Set<string>): string {\n    const queued = graph.runtimeEdges.filter(\n        (e: RuntimeEdge) => e.type === 'pubsub' && !hidden.has(e.from) && !hidden.has(e.to),\n    );\n    if (queued.length === 0) return '';\n\n    let dot =\n        '\\n  // Queued hops. Each LINE in a box is one Cloud Tasks queue; queues of one contract\\n' +\n        '  // sharing the same producers AND consumers are drawn in a single box.\\n';\n\n    // A contract with no committed method table (a dependencies.json predating apiContracts) has no\n    // per-method queue at all, so it keeps the historical unnamed per-pair box.\n    const byQueue = new Map<string, QueueEndpoints>();\n    for (const edge of queued) {\n        const from = dotValue(getShortName(edge.from));\n        const to = dotValue(getShortName(edge.to));\n        if (edge.queue === undefined) {\n            // Kept RAW: recordValue already applies dotValue, so escaping here would double it.\n            const viaRaw = edge.via.map((v: string) => getShortName(v)).join(', ');\n            dot += queueBoxDot(`queue__${from}__${to}`, `${recordValue(viaRaw)}\\\\nqueue`, [from], [to]);\n            continue;\n        }\n        if (!byQueue.has(edge.queue)) byQueue.set(edge.queue, new QueueEndpoints());\n        byQueue.get(edge.queue)!.producers.add(from);\n        byQueue.get(edge.queue)!.consumers.add(to);\n    }\n\n    for (const group of groupQueues(byQueue, graph)) {\n        const body = group.members\n            .map((key: string) => queueLine(key, graph.queues[key]))\n            .join('\\\\n');\n        dot += queueBoxDot(`queue__${dotId(group.members[0])}`, body, group.producers, group.consumers);\n    }\n    return dot;\n}\n\n/** A DOT-safe node-id fragment: anything but letters, digits and `_` becomes `_`. */\n// webpieces-disable no-function-outside-class -- DOT id builder, matching getShortName in this file\nfunction dotId(raw: string): string {\n    return raw.replace(/[^A-Za-z0-9_]/g, '_');\n}\n\n/**\n * The clock and outside-system nodes for endpoints NOTHING in-repo calls.\n *\n * A cron sweep and a GCP push subscription are real runtime entry points with real Terraform behind\n * them, but they produce no runtime EDGE (there is no in-repo caller), so until now they were simply\n * absent — a server's most operationally interesting endpoint could be invisible on its own graph.\n * Both are drawn pointing INTO the service that serves them, the opposite direction from\n * {@link externalDot}'s outbound vendor calls.\n */\n// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file\nfunction triggerDot(graph: RuntimeGraph, hidden: Set<string>): string {\n    const triggers = graph.triggers.filter((t: RuntimeTrigger) => !hidden.has(t.service));\n    if (triggers.length === 0) return '';\n\n    let dot = '\\n  // Entry points nothing in this repo calls: a clock, or a system outside the repo.\\n';\n    for (const trigger of triggers) {\n        const service = dotValue(getShortName(trigger.service));\n        const label = dotValue(`${trigger.api}.${trigger.method}`);\n        if (trigger.kind === 'cron') {\n            const id = `cron__${dotId(`${trigger.api}_${trigger.method}`)}`;\n            const schedule = dotValue(trigger.queueName ?? `${trigger.api}-${trigger.method}`);\n            dot +=\n                `  \"${id}\" [shape=circle, style=\"filled\", fillcolor=\"${CRON_FILL}\", ` +\n                `color=\"${CRON_BORDER}\", label=\"⏰\\\\ncron\"];\\n` +\n                `  \"${id}\" -> \"${service}\" [label=\"${label}\\\\n${schedule}\", color=\"${CRON_BORDER}\"];\\n`;\n            continue;\n        }\n        const id = `inbound__${dotId(trigger.api)}`;\n        dot +=\n            `  \"${id}\" [shape=box, style=\"dashed,filled\", fillcolor=\"${EXTERNAL_FILL}\", ` +\n            `color=\"${EXTERNAL_BORDER}\", label=\"${dotValue(trigger.api)}\\\\n(external caller)\"];\\n` +\n            `  \"${id}\" -> \"${service}\" [label=\"${label}\", style=dashed, color=\"${EXTERNAL_BORDER}\"];\\n`;\n    }\n    return dot;\n}\n\n/**\n * The DECLARED external systems — the ones that said what they are, so they get a shape that says\n * it: a cylinder for a database, a folder for a bucket. Everything undeclared falls through to\n * {@link externalDot}'s generic grey box, which is why adding this broke nothing existing.\n *\n * The arrows are SOLID. A call to firestore or postgres is synchronous — it returns a value — and\n * the graph's rule is that solid means \"response comes back\". Being outside the repo is carried by\n * the node's shape, never by the line style; conflating the two is what made a blocking database\n * read look like an event.\n */\n// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file\nfunction externalSystemsDot(graph: RuntimeGraph, hidden: Set<string>): string {\n    const systems = graph.externalSystems ?? {};\n    const ids = Object.keys(systems).sort();\n    if (ids.length === 0) return '';\n\n    let dot = '\\n  // Declared external systems — drawn with the shape of what they actually are.\\n';\n    for (const id of ids) {\n        const system = systems[id];\n        const shape = EXTERNAL_SHAPES[system.kind] ?? 'box';\n        const fill = EXTERNAL_FILLS[system.kind] ?? EXTERNAL_FILL;\n        // An Mrecord-shaped system needs the same empty leading field as a queue node, or it\n        // renders as a plain box and silently loses the sideways-cylinder read.\n        const isQueue = shape === QUEUE_SHAPE;\n        const prefix = isQueue ? QUEUE_LABEL_PREFIX : '';\n        const text = isQueue ? recordValue(system.label) : dotValue(system.label);\n        // Only a queue-kind system is marked: a database here is an UPRIGHT cylinder and must not be\n        // caught by the browser-side reshaping that lays queues on their side.\n        const marker = isQueue ? `class=\"${QUEUE_CLASS}\", ` : '';\n        dot +=\n            `  \"system__${dotId(id)}\" [shape=${shape}, style=\"filled\", fillcolor=\"${fill}\", ` +\n            `${marker}label=\"${prefix}${text}\\\\n(external ${dotValue(system.kind)})\"];\\n`;\n    }\n    for (const id of ids) {\n        const system = systems[id];\n        const via = system.apis.length === 0 ? '' : ` [label=\"${labelList([...system.apis].sort())}\"]`;\n        for (const service of [...system.usedBy].sort()) {\n            if (hidden.has(service)) continue;\n            dot += `  \"${dotValue(getShortName(service))}\" -> \"system__${dotId(id)}\"${via};\\n`;\n        }\n    }\n    return dot;\n}\n\n/**\n * The dashed terminal nodes + edges for calls that LEAVE the repo. Built from `unresolvedUses` —\n * a contract used by a node and implemented by nobody in-repo — which the derivation already\n * computes and which was, until now, only ever printed as a warning.\n *\n * Grouped by the api-lib that owns the contracts, so a service reaching three firestore contracts\n * draws ONE `lib-firestore (external)` box rather than three. These are drawn, never derived: they\n * are absent from levels, cycle detection and the transitive implements attribution.\n *\n * A contract carrying an `@externalSystem` declaration is skipped here — {@link externalSystemsDot}\n * has already drawn it with a real shape, and rendering it in both places would double the node.\n */\n// webpieces-disable no-function-outside-class -- DOT string builder, matching getShortName in this file\nfunction externalDot(graph: RuntimeGraph, hidden: Set<string>): string {\n    // \"service|externalName\" -> the apis flowing over it.\n    const apisByPair = new Map<string, string[]>();\n    for (const use of graph.unresolvedUses) {\n        if (hidden.has(use.service)) continue;\n        if (graph.apis[use.api]?.externalSystem !== undefined) continue;\n        const external = dotValue(getShortName(graph.apis[use.api]?.owner ?? use.api));\n        const key = `${use.service}${PAIR_SEP}${external}`;\n        if (!apisByPair.has(key)) apisByPair.set(key, []);\n        apisByPair.get(key)!.push(use.api);\n    }\n    if (apisByPair.size === 0) return '';\n\n    let dot = '\\n  // Systems outside this repo — no in-repo service implements these contracts.\\n';\n    // The node ID is prefixed so an external library can never collide with a service of the same\n    // short name; only the label carries the bare name.\n    const externals = new Set([...apisByPair.keys()].map((key: string) => key.split(PAIR_SEP)[1]));\n    for (const external of [...externals].sort()) {\n        dot +=\n            `  \"external__${external}\" [shape=box, style=\"dashed,filled\", fillcolor=\"${EXTERNAL_FILL}\", ` +\n            `color=\"${EXTERNAL_BORDER}\", label=\"${external}\\\\n(external)\"];\\n`;\n    }\n    for (const key of [...apisByPair.keys()].sort()) {\n        const parts = key.split(PAIR_SEP);\n        const service = parts[0];\n        const external = parts[1];\n        const via = labelList(apisByPair.get(key)!.sort());\n        // SOLID: this is a synchronous call that returns a value. Dashed is reserved for events, and\n        // \"outside the repo\" is already said by the node's dashed border.\n        dot +=\n            `  \"${dotValue(getShortName(service))}\" -> \"external__${external}\" ` +\n            `[label=\"${via}\", color=\"${EXTERNAL_BORDER}\"];\\n`;\n    }\n    return dot;\n}\n\n/** Build the Graphviz DOT for the runtime service graph. */\n// webpieces-disable no-function-outside-class -- module entry point, matching the sibling builders here\nexport function generateRuntimeDot(\n    graph: RuntimeGraph,\n    title: string = 'WebPieces Runtime Architecture',\n    options: RuntimeVizOptions = new RuntimeVizOptions(),\n): string {\n    let dot = 'digraph RuntimeArchitecture {\\n';\n    dot += '  rankdir=TB;\\n';\n    dot += '  node [shape=box, style=\"filled,rounded\", fontname=\"Arial\"];\\n';\n    dot += '  edge [fontname=\"Arial\", fontsize=10];\\n\\n';\n\n    // Services tagged drawOnGraph:false stay in the JSON but are omitted here —\n    // both their node and any edge touching them are dropped from the render.\n    const hidden = new Set(\n        Object.keys(graph.services).filter((name: string) => graph.services[name].drawOnGraph === false)\n    );\n\n    for (const name of Object.keys(graph.services)) {\n        if (hidden.has(name)) continue;\n        const svc = graph.services[name];\n        const color = LEVEL_COLORS[svc.level] || '#F5F5F5';\n        dot += `  \"${dotValue(getShortName(name))}\" [fillcolor=\"${color}\", label=\"${nodeLabel(name, svc)}\"];\\n`;\n    }\n\n    dot += '\\n';\n\n    for (const edge of graph.runtimeEdges) {\n        if (hidden.has(edge.from) || hidden.has(edge.to)) continue;\n        // Queued hops are merged across methods, so they cannot be emitted one edge at a time.\n        if (edge.type === 'pubsub') continue;\n        dot += edgeDot(edge);\n    }\n\n    dot += queuesDot(graph, hidden);\n    dot += triggerDot(graph, hidden);\n\n    if (options.showExternalNodes) {\n        dot += externalSystemsDot(graph, hidden);\n        dot += externalDot(graph, hidden);\n    }\n\n    dot += '\\n  labelloc=\"t\";\\n';\n    dot += `  label=\"${dotValue(title)}\\\\n(from architecture/runtime-dependencies.json)\";\\n`;\n    dot += '  fontsize=20;\\n';\n    dot += '}\\n';\n    // Nothing downstream parses this DOT until a human opens the page, so parse-shape is checked\n    // HERE — a graph that cannot render is a generation failure, not a blank page to discover later.\n    assertValidDot(dot, 'runtime-architecture.dot');\n    return dot;\n}\n\n/**\n * Inline SVG swatches for the legend, hand-drawn to match what Graphviz emits for each shape.\n *\n * Hand-drawn on purpose: the alternative is shelling out to Graphviz at generate time, which would\n * make writing the HTML depend on a `dot` binary being installed — a dependency this tool does not\n * otherwise have, since rendering happens in the browser.\n */\nclass LegendSwatches {\n    readonly service =\n        '<svg width=\"46\" height=\"26\"><rect x=\"1\" y=\"3\" width=\"44\" height=\"20\" rx=\"7\" fill=\"#E8F5E9\" stroke=\"#333\"/></svg>';\n    /**\n     * A cylinder on its side — the SAME geometry runtime-visualizer.client.js draws on the real\n     * node, so the legend cannot drift from the picture it explains.\n     */\n    readonly queue =\n        `<svg width=\"46\" height=\"26\"><path d=\"M9,5 H37 A8,8 0 0 1 37,21 H9 A8,8 0 0 1 9,5 Z\" fill=\"${QUEUE_FILL}\" stroke=\"#333\"/>` +\n        '<path d=\"M9,5 A8,8 0 0 1 9,21\" fill=\"none\" stroke=\"#333\"/></svg>';\n    readonly database =\n        `<svg width=\"46\" height=\"26\"><path d=\"M8,7 a15,4 0 0 1 30,0 v12 a15,4 0 0 1 -30,0 z\" fill=\"${DATABASE_FILL}\" stroke=\"#333\"/>` +\n        '<path d=\"M8,7 a15,4 0 0 0 30,0\" fill=\"none\" stroke=\"#333\"/></svg>';\n    readonly storage =\n        '<svg width=\"46\" height=\"26\"><path d=\"M2,22 V6 H16 l3,3 H44 V22 Z\" fill=\"#F3E5F5\" stroke=\"#333\"/></svg>';\n    readonly external =\n        `<svg width=\"46\" height=\"26\"><rect x=\"1\" y=\"3\" width=\"44\" height=\"20\" fill=\"${EXTERNAL_FILL}\" ` +\n        `stroke=\"${EXTERNAL_BORDER}\" stroke-dasharray=\"4,3\"/></svg>`;\n    readonly cron =\n        `<svg width=\"46\" height=\"26\"><circle cx=\"23\" cy=\"13\" r=\"11\" fill=\"${CRON_FILL}\" stroke=\"${CRON_BORDER}\"/>` +\n        '<text x=\"23\" y=\"18\" font-size=\"12\" text-anchor=\"middle\">&#9200;</text></svg>';\n    readonly solid =\n        '<svg width=\"60\" height=\"20\"><line x1=\"2\" y1=\"10\" x2=\"48\" y2=\"10\" stroke=\"#333\" stroke-width=\"1.5\"/>' +\n        '<path d=\"M48,6 L57,10 L48,14 Z\" fill=\"#333\"/></svg>';\n    readonly dashed =\n        '<svg width=\"60\" height=\"20\"><line x1=\"2\" y1=\"10\" x2=\"48\" y2=\"10\" stroke=\"#333\" stroke-width=\"1.5\" ' +\n        'stroke-dasharray=\"5,4\"/><path d=\"M48,6 L57,10 L48,14 Z\" fill=\"#333\"/></svg>';\n    readonly scheduled =\n        `<svg width=\"60\" height=\"20\"><line x1=\"2\" y1=\"10\" x2=\"48\" y2=\"10\" stroke=\"${CRON_BORDER}\" stroke-width=\"1.5\"/>` +\n        `<path d=\"M48,6 L57,10 L48,14 Z\" fill=\"${CRON_BORDER}\"/></svg>`;\n}\n\n/**\n * The legend. Three columns — what a box IS, what a line MEANS, how to read a box — replacing the\n * three paragraphs of prose that used to restate the picture in words. Styled after\n * {@link GraphVisualizer}'s legend so the two graphs in this repo look like one tool.\n */\n// webpieces-disable no-function-outside-class -- HTML builder, matching the sibling builders in this file\nfunction legendHtml(): string {\n    const sw = new LegendSwatches();\n    const item = (swatch: string, text: string): string =>\n        `<div class=\"legend-item\"><span class=\"sw\">${swatch}</span><span>${text}</span></div>`;\n    return `<div class=\"legend\">\n        <h2>Legend</h2>\n        <div class=\"legend-columns\">\n            <div class=\"legend-col\">\n                <h3>Node shapes &mdash; <em>what a box is</em></h3>\n                ${item(sw.service, '<strong>service</strong> &mdash; a deployable in this repo; fill is its dependency level')}\n                ${item(sw.queue, '<strong>queue</strong> &mdash; each <em>line</em> in the box is one Cloud Tasks queue, the unit Terraform actually creates. Queues of one contract that flow between the <em>same</em> producer and consumer share a box; every one is still named, so you can always see <em>which</em> queue is stuck.')}\n                ${item(sw.database, '<strong>database</strong> &mdash; a datastore outside this repo')}\n                ${item(sw.storage, '<strong>object storage</strong> &mdash; a bucket outside this repo')}\n                ${item(sw.external, '<strong>external system</strong> &mdash; outside this repo; nothing here implements it. Pointing <strong>OUT</strong> = a system this repo calls (firestore, gmail). Pointing <strong>IN</strong> = an endpoint driven from outside (a Pub/Sub push, a Gmail or Twilio webhook).')}\n                ${item(sw.cron, '<strong>cron</strong> &mdash; a scheduler fires this endpoint')}\n            </div>\n            <div class=\"legend-col\">\n                <h3>Lines &mdash; <em>what a call is</em></h3>\n                ${item(sw.solid, '<strong>solid = rpc</strong> &mdash; the request follows the arrow, the response flows back')}\n                ${item(sw.dashed, '<strong>dashed = event</strong> &mdash; asynchronous: the event flows in the direction of the arrow and returns once it is in the queue')}\n                ${item(sw.scheduled, '<strong>scheduled</strong> &mdash; a cron invocation')}\n                <div class=\"legend-note\"><em>Every line is labeled with the contract the call flows over. A service that enqueues to itself loops through its own queue &mdash; a queue decouples the two sides, so it is not a dependency cycle.</em></div>\n            </div>\n            <div class=\"legend-col\">\n                <h3>Reading a box</h3>\n                <pre class=\"legend-box-anatomy\">name\n(server|client, L#)\nimplements: &lt;contracts it serves&gt;\n</pre>\n                <div class=\"legend-note\">A box lists only what it <strong>serves</strong>. What it <em>calls</em> is on its outgoing arrows.</div>\n                <div class=\"legend-note\"><code>(via &lt;lib&gt;)</code> = served through an embedded library, not its own source.</div>\n            </div>\n        </div>\n    </div>`;\n}\n\nfunction generateRuntimeHtml(dot: string, title: string): string {\n    // The browser half lives in a plain .js asset (matching graph-visualizer.client.js) rather than\n    // in a template literal here: it renders with @viz-js/viz v3 AND redraws every queue node as a\n    // true horizontal cylinder, which is more logic than belongs inline in a .ts string.\n    const clientJs = fs.readFileSync(path.join(__dirname, 'runtime-visualizer.client.js'), 'utf-8');\n    const script = clientJs.split('__DOT__').join(JSON.stringify(dot));\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>\n        body { margin: 0; padding: 20px; font-family: Arial, sans-serif; background: #f5f5f5; }\n        h1 { text-align: center; color: #333; }\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    </style>\n</head>\n<body>\n    <h1>${title}</h1>\n    <div id=\"graph\"></div>\n    ${legendHtml()}\n    <script>${script}</script>\n</body>\n</html>`;\n}\n\nexport interface RuntimeVisualizationPaths {\n    dotPath: string;\n    htmlPath: string;\n}\n\n/** Write the DOT + HTML renderings to tmp/webpieces/. */\nexport function writeRuntimeVisualization(\n    graph: RuntimeGraph,\n    workspaceRoot: string,\n    title: string = 'WebPieces Runtime Architecture',\n    options: RuntimeVizOptions = new RuntimeVizOptions(),\n): RuntimeVisualizationPaths {\n    const outputDir = path.join(workspaceRoot, 'tmp', 'webpieces');\n    if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir, { recursive: true });\n\n    const dot = generateRuntimeDot(graph, title, options);\n    const dotPath = path.join(outputDir, 'runtime-architecture.dot');\n    fs.writeFileSync(dotPath, dot, 'utf-8');\n\n    const htmlPath = path.join(outputDir, 'runtime-architecture.html');\n    fs.writeFileSync(htmlPath, generateRuntimeHtml(dot, title), 'utf-8');\n\n    return { dotPath, htmlPath };\n}\n"]}