skilldrop-cli 0.16.21 → 0.16.23

package/packs/solution-architect/skills/interactive-diagram/examples/checkout-map.json

@@ -0,0 +1,48 @@
+{
+ "type": "architecture",
+ "title": "What a checkout request touches",
+ "question": "What happens between a shopper pressing Pay and a courier being booked?",
+ "summary": "The API prices the cart from Redis (falling back to Postgres), charges Stripe, records the order and puts it on a RabbitMQ queue; a separate worker books the courier and marks the order booked. The shopper's response returns before the courier is booked.",
+ "groups": [
+  {"id": "compose", "label": "docker-compose stack"},
+  {"id": "data", "label": "Data", "parent": "compose"}
+ ],
+ "nodes": [
+  {"id": "shopper", "label": "Shopper's browser", "kind": "client", "assumed": true, "detail": "Nothing in this repo shows the client; the API's POST /checkout is the entry point."},
+  {"id": "api", "label": "Checkout API", "kind": "service", "note": "FastAPI · POST /checkout", "group": "compose",
+   "evidence": ["api/checkout.py:29-41#def checkout", "docker-compose.yml:2-8"]},
+  {"id": "cache", "label": "Price cache", "kind": "cache", "note": "Redis, 5 min TTL", "group": "data",
+   "evidence": ["api/checkout.py:20-24#ex=300", "docker-compose.yml:17-18"]},
+  {"id": "db", "label": "Orders database", "kind": "database", "note": "Postgres 16", "group": "data",
+   "evidence": ["api/checkout.py:22#from products", "api/checkout.py:36#insert into orders", "docker-compose.yml:15-16"]},
+  {"id": "broker", "label": "fulfilment queue", "kind": "queue", "note": "RabbitMQ", "group": "compose",
+   "evidence": ["api/checkout.py:39-40#routing_key=\"fulfilment\"", "docker-compose.yml:19-20"]},
+  {"id": "worker", "label": "Fulfilment worker", "kind": "worker", "group": "compose",
+   "evidence": ["worker/fulfil.py:13-19#def on_message", "docker-compose.yml:9-14"]},
+  {"id": "stripe", "label": "Stripe", "kind": "external", "note": "PaymentIntent",
+   "evidence": ["api/checkout.py:32-35#stripe.PaymentIntent.create"]},
+  {"id": "courier", "label": "Courier API", "kind": "external", "note": "courier.example",
+   "evidence": ["worker/fulfil.py:16#courier.example/v2/bookings"]}
+ ],
+ "edges": [
+  {"id": "pay", "from": "shopper", "to": "api", "label": "POST /checkout", "emphasis": true, "assumed": true},
+  {"id": "price", "from": "api", "to": "cache", "label": "get price:<sku>", "evidence": ["api/checkout.py:20"]},
+  {"id": "miss", "from": "api", "to": "db", "label": "price on cache miss, insert order", "evidence": ["api/checkout.py:22", "api/checkout.py:36-38"]},
+  {"id": "charge", "from": "api", "to": "stripe", "label": "create + confirm payment", "emphasis": true, "evidence": ["api/checkout.py:32-35"]},
+  {"id": "publish", "from": "api", "to": "broker", "label": "publish order_id", "style": "dashed", "evidence": ["api/checkout.py:39-40"]},
+  {"id": "consume", "from": "broker", "to": "worker", "label": "consume", "style": "dashed", "evidence": ["worker/fulfil.py:22#basic_consume"]},
+  {"id": "book", "from": "worker", "to": "courier", "label": "book courier", "evidence": ["worker/fulfil.py:16"]},
+  {"id": "mark", "from": "worker", "to": "db", "label": "read address, mark booked", "evidence": ["worker/fulfil.py:15", "worker/fulfil.py:17"]}
+ ],
+ "story": [
+  {"text": "The shopper's browser posts the cart to the Checkout API (the client itself is not in this repo).", "edges": ["pay"]},
+  {"text": "Each line is priced from Redis; a miss reads Postgres and caches the price for five minutes.", "edges": ["price", "miss"]},
+  {"text": "Stripe is charged and confirmed in the same call; anything but 'succeeded' returns 402.", "edges": ["charge"]},
+  {"text": "The order is inserted, then its id is published to the fulfilment queue, and the API answers the shopper.", "edges": ["miss", "publish"]},
+  {"text": "Later, the worker takes the id, reads the address, books the courier and marks the order booked.", "edges": ["consume", "book", "mark"]}
+ ],
+ "notes": [
+  "The worker reads orders.address, but the API's insert does not write an address. Where it comes from is not in this repo.",
+  "Left out: the products table's other readers, and anything after the courier booking."
+ ]
+}

package/packs/solution-architect/skills/interactive-diagram/examples/checkout-map.md

@@ -0,0 +1,31 @@
+# Worked example — what a checkout request touches
+
+## Input
+
+> Map what happens in this repo between a shopper pressing Pay and a courier being booked. One
+> HTML file I can send to the team.
+
+The repository: [`inputs/checkout/`](inputs/checkout/) — `docker-compose.yml`, `api/checkout.py`
+(FastAPI), `worker/fulfil.py`.
+
+## Output
+
+[What a checkout request touches](checkout-map.html) — one page, opens offline.
+
+The API prices the cart from Redis (falling back to Postgres), charges Stripe, records the order
+and puts its id on a RabbitMQ queue; a separate worker books the courier and marks the order
+booked. The shopper gets their answer before the courier is booked.
+
+- **Assumed (dashed):** the shopper's browser and its POST — no client is in this repo.
+- **Worth a look:** the worker reads `orders.address`, but the API's insert never writes one.
+- **Left out:** other readers of the products table, and anything after the courier booking.
+
+22 of 22 file citations checked against the repository.
+
+## Why this is the right output
+
+- Every box and arrow on the page cites the file and lines it came from; click one to see them.
+- The two things the code does not show are drawn dashed, not stated as fact.
+- The map answers the one question asked, and says what it left out.
+- The page was built from [`checkout-map.json`](checkout-map.json) with
+  `python3 scripts/build_diagram.py examples/checkout-map.json -o examples/checkout-map.html --repo-root examples/inputs/checkout`.

package/packs/solution-architect/skills/interactive-diagram/examples/checkout-trace.html

@@ -0,0 +1,203 @@
+<!doctype html>
+<html lang="en" data-theme-default="auto"><head><meta charset="utf-8">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'sha256-KdTstAM29gVIP104X7Tju5/PTeQKbRDMMG1TjJdsOyI='; style-src 'unsafe-inline'; img-src data: blob:; base-uri 'none'; form-action 'none'">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<!-- One self-contained file: no external scripts, styles, fonts or requests. The policy above makes the browser refuse any. -->
+<title>Where a slow checkout spent its time</title><meta name="generator" content="interactive-diagram (skilldrop)"></head>
+<body>
+<header class="top"><h1>Where a slow checkout spent its time</h1><p class="q">Why did this checkout take 1.8 seconds?</p><p class="sum">Two thirds of it was the Stripe call, and most of that was waiting on Stripe, not the TLS handshake. A cache miss on prices cost another 350 ms before payment even started.</p><div class="findings"><b>What it shows</b><ul><li>The whole of POST /checkout took 1.8 s.</li><li>What the whole waited on most: stripe.PaymentIntent.create, 1.1 s of its own work (60%); select price from products (cache miss), 346 ms of its own work (19%); insert into orders, 165 ms of its own work (9%).</li><li>POST /checkout takes 1.8 s but only 27 ms of it is its own; the rest is waiting on what it calls.</li><li>price cart takes 380 ms but only 15 ms of it is its own; the rest is waiting on what it calls.</li></ul></div><p class="muted" style="font-size:12px;margin:6px 0 0">9 of 9 file citations checked against the repository</p></header>
+<section class="text" id="outline" aria-label="The diagram as text">
+<details open><summary>The diagram as text</summary><h2>Spans, in call order</h2><p>Total 1.8 s. What it waited on, in order: verify session → redis MGET price:* → select price from products (cache miss) → stripe.PaymentIntent.create → TLS handshake api.stripe.com → insert into orders → publish fulfilment.</p><ul><li><b>POST /checkout</b>: starts at 0 ms, takes 1.8 s (100%) <span class="ev">(<code>checkout-trace.jsonl:1</code> ✓)</span></li><li> <b>verify session</b>: starts at 4 ms, takes 34 ms (2%) <span class="ev">(<code>checkout-trace.jsonl:2</code> ✓)</span></li><li> <b>price cart</b>: starts at 40 ms, takes 380 ms (21%) <span class="ev">(<code>checkout-trace.jsonl:3</code> ✓)</span></li><li>  <b>redis MGET price:*</b>: starts at 42 ms, takes 19 ms (1%) <span class="ev">(<code>checkout-trace.jsonl:4</code> ✓)</span></li><li>  <b>select price from products (cache miss)</b>: starts at 64 ms, takes 346 ms (19%) <span class="ev">(<code>checkout-trace.jsonl:5</code> ✓)</span></li><li> <b>stripe.PaymentIntent.create</b>: starts at 430 ms, takes 1.2 s (65%) <span class="ev">(<code>checkout-trace.jsonl:6</code> ✓)</span></li><li>  <b>TLS handshake api.stripe.com</b>: starts at 431 ms, takes 89 ms (5%) <span class="ev">(<code>checkout-trace.jsonl:7</code> ✓)</span></li><li> <b>insert into orders</b>: starts at 1.6 s, takes 165 ms (9%) <span class="ev">(<code>checkout-trace.jsonl:8</code> ✓)</span></li><li> <b>publish fulfilment</b>: starts at 1.8 s, takes 44 ms (2%) <span class="ev">(<code>checkout-trace.jsonl:9</code> ✓)</span></li></ul><h2>Notes</h2><ul><li>One trace, from checkout-trace.jsonl. It says where this request spent its time, not how often checkouts are this slow.</li></ul></details></section>
+<nav class="bar" aria-label="Diagram controls">
+<input id="find" type="search" placeholder="Find a part…" aria-label="Find a part">
+<button id="zin" title="Zoom in">+</button><button id="zout" title="Zoom out">−</button><button id="zfit" title="Fit to screen">Fit</button>
+<span class="sep"></span><button id="tour">Walk through</button><button id="prev" title="Previous step">←</button><button id="next" title="Next step">→</button>
+<span class="sep"></span><button id="xsvg">SVG</button><button id="xpng">PNG</button><button id="xmmd" title="Copy and download Mermaid">Mermaid</button>
+<button id="theme" title="Light or dark">◐</button>
+<span class="hint">Click a part for detail and evidence · shift-click a second part for the path · drag to pan · scroll to zoom</span></nav>
+<div class="legend"><span>▬ a span, to scale</span><span style="color:var(--hl)">▭ what the whole waited on (the critical path)</span><span style="color:var(--bad)">▭ failed</span><span>total 1.8 s</span></div>
+<div class="caption" id="caption" aria-live="polite"></div>
+<div class="wrap"><div id="stage"><svg id="map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1381 352" width="1381" height="352" role="group" aria-label="Where a slow checkout spent its time"><defs><marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" class="arrowhead"/></marker><marker id="arrow-start" viewBox="0 0 10 10" refX="1" refY="5" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" class="arrowhead"/></marker><marker id="tri" viewBox="0 0 12 12" refX="11" refY="6" markerUnits="userSpaceOnUse" markerWidth="14" markerHeight="14" orient="auto-start-reverse"><path d="M1,1 L11,6 L1,11 z" class="mk-open"/></marker><marker id="open" viewBox="0 0 12 12" refX="11" refY="6" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto-start-reverse"><path d="M1,1 L11,6 L1,11" class="mk-line"/></marker><marker id="dia-solid" viewBox="0 0 16 10" refX="15" refY="5" markerUnits="userSpaceOnUse" markerWidth="18" markerHeight="11" orient="auto-start-reverse"><path d="M1,5 L8,1 L15,5 L8,9 z" class="arrowhead"/></marker><marker id="dia-open" viewBox="0 0 16 10" refX="15" refY="5" markerUnits="userSpaceOnUse" markerWidth="18" markerHeight="11" orient="auto-start-reverse"><path d="M1,5 L8,1 L15,5 L8,9 z" class="mk-open"/></marker></defs><rect class="canvas" x="0" y="0" width="1381" height="352"/><g class="axis"><line class="grid" x1="341.8" y1="44" x2="341.8" y2="316.0"/><text x="341.8" y="38" text-anchor="middle">0 ms</text><line class="grid" x1="581.0" y1="44" x2="581.0" y2="316.0"/><text x="581.0" y="38" text-anchor="middle">500 ms</text><line class="grid" x1="820.1" y1="44" x2="820.1" y2="316.0"/><text x="820.1" y="38" text-anchor="middle">1.0 s</text><line class="grid" x1="1059.2" y1="44" x2="1059.2" y2="316.0"/><text x="1059.2" y="38" text-anchor="middle">1.5 s</text></g><g class="node span crit" id="n-a1" data-id="a1" tabindex="0" role="button" aria-label="POST /checkout, 1.8 s"><title>POST /checkout — 1.8 s</title><rect class="rowbg" x="20" y="56.0" width="1341.8" height="26"/><text class="label wf" x="30.0" y="73.0">POST /checkout</text><rect class="shape bar" style="fill:#3b82f6" x="341.8" y="60.0" width="880.0" height="18.0" rx="3"/><text class="note wf" x="1227.8" y="73.0">1.8 s</text></g><g class="node span crit" id="n-a2" data-id="a2" tabindex="0" role="button" aria-label="verify session, 34 ms"><title>verify session — 34 ms</title><rect class="rowbg" x="20" y="84.0" width="1341.8" height="26"/><text class="label wf" x="48.0" y="101.0">verify session</text><rect class="shape bar" style="fill:#3b82f6" x="343.8" y="88.0" width="16.3" height="18.0" rx="3"/><text class="note wf" x="366.0" y="101.0">34 ms</text></g><g class="node span crit" id="n-a3" data-id="a3" tabindex="0" role="button" aria-label="price cart, 380 ms"><title>price cart — 380 ms</title><rect class="rowbg" x="20" y="112.0" width="1341.8" height="26"/><text class="label wf" x="48.0" y="129.0">price cart</text><rect class="shape bar" style="fill:#3b82f6" x="361.0" y="116.0" width="181.7" height="18.0" rx="3"/><text class="note wf" x="548.7" y="129.0">380 ms</text></g><g class="node span crit" id="n-a4" data-id="a4" tabindex="0" role="button" aria-label="redis MGET price:*, 19 ms"><title>redis MGET price:* — 19 ms</title><rect class="rowbg" x="20" y="140.0" width="1341.8" height="26"/><text class="label wf" x="66.0" y="157.0">redis MGET price:*</text><rect class="shape bar" style="fill:#16a34a" x="361.9" y="144.0" width="9.1" height="18.0" rx="3"/><text class="note wf" x="377.0" y="157.0">19 ms</text></g><g class="node span crit" id="n-a5" data-id="a5" tabindex="0" role="button" aria-label="select price from products (cache miss), 346 ms"><title>select price from products (cache miss) — 346 ms</title><rect class="rowbg" x="20" y="168.0" width="1341.8" height="26"/><text class="label wf" x="66.0" y="185.0">select price from products (cache miss)</text><rect class="shape bar" style="fill:#d97706" x="372.4" y="172.0" width="165.5" height="18.0" rx="3"/><text class="note wf" x="543.9" y="185.0">346 ms</text></g><g class="node span crit" id="n-a6" data-id="a6" tabindex="0" role="button" aria-label="stripe.PaymentIntent.create, 1.2 s"><title>stripe.PaymentIntent.create — 1.2 s</title><rect class="rowbg" x="20" y="196.0" width="1341.8" height="26"/><text class="label wf" x="48.0" y="213.0">stripe.PaymentIntent.create</text><rect class="shape bar" style="fill:#8b5cf6" x="547.5" y="200.0" width="569.1" height="18.0" rx="3"/><text class="note wf" x="1122.6" y="213.0">1.2 s</text></g><g class="node span crit" id="n-a7" data-id="a7" tabindex="0" role="button" aria-label="TLS handshake api.stripe.com, 89 ms"><title>TLS handshake api.stripe.com — 89 ms</title><rect class="rowbg" x="20" y="224.0" width="1341.8" height="26"/><text class="label wf" x="66.0" y="241.0">TLS handshake api.stripe.com</text><rect class="shape bar" style="fill:#8b5cf6" x="548.0" y="228.0" width="42.6" height="18.0" rx="3"/><text class="note wf" x="596.5" y="241.0">89 ms</text></g><g class="node span crit" id="n-a8" data-id="a8" tabindex="0" role="button" aria-label="insert into orders, 165 ms"><title>insert into orders — 165 ms</title><rect class="rowbg" x="20" y="252.0" width="1341.8" height="26"/><text class="label wf" x="48.0" y="269.0">insert into orders</text><rect class="shape bar" style="fill:#d97706" x="1119.0" y="256.0" width="78.9" height="18.0" rx="3"/><text class="note wf" x="1203.9" y="269.0">165 ms</text></g><g class="node span crit" id="n-a9" data-id="a9" tabindex="0" role="button" aria-label="publish fulfilment, 44 ms"><title>publish fulfilment — 44 ms</title><rect class="rowbg" x="20" y="280.0" width="1341.8" height="26"/><text class="label wf" x="48.0" y="297.0">publish fulfilment</text><rect class="shape bar" style="fill:#0d9488" x="1198.9" y="284.0" width="21.0" height="18.0" rx="3"/><text class="note wf" x="1225.9" y="297.0">44 ms</text></g></svg></div><aside id="panel" aria-live="polite"></aside></div>
+<style id="diagram-css">
+:root{--bg:#f7f8fa;--panel:#ffffff;--ink:#16181d;--muted:#5b6170;--line:#d5d9e0;--edge:#6b7385;--accent:#2563eb;
+--warn:#b45309;--ok:#15803d;--bad:#b91c1c;--hl:#f59e0b;--canvas:#fbfcfd;--group:#eef1f6;--group2:#e6eaf2;--shadow:0 1px 2px rgba(0,0,0,.06)}
+:root[data-theme=dark]{--bg:#0f1115;--panel:#171a21;--ink:#e7e9ee;--muted:#9aa1b2;--line:#2b303b;--edge:#8b93a7;--accent:#60a5fa;
+--warn:#f59e0b;--ok:#4ade80;--bad:#f87171;--hl:#fbbf24;--canvas:#12151b;--group:#1a1e27;--group2:#20252f;--shadow:none}
+*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
+body{display:flex;flex-direction:column}body>*{flex:none}section.text{order:10}
+header.top{padding:18px 24px 10px;max-width:1400px}header.top h1{margin:0 0 4px;font-size:21px}
+.q{color:var(--muted);margin:0 0 6px}.sum{margin:0;max-width:900px}
+.bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 24px;position:sticky;top:0;background:var(--bg);z-index:5;border-bottom:1px solid var(--line)}
+.bar button,.bar input{font:inherit;font-size:13px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:6px;padding:4px 9px;cursor:pointer}
+.bar input{cursor:text;width:180px}.bar button:hover{border-color:var(--accent)}.bar .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
+.bar .hint{color:var(--muted);font-size:12px;margin-left:auto}
+.wrap{display:flex;gap:0;height:calc(100vh - 150px);min-height:420px;padding:10px 24px 0}
+#stage{flex:1;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--canvas);touch-action:none;cursor:grab}
+#stage.drag{cursor:grabbing}#stage svg{position:absolute;left:0;top:0;width:100%;height:100%}
+aside#panel{width:340px;margin-left:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:auto;padding:14px 16px;display:none}
+aside#panel.open{display:block}aside h3{margin:0 0 2px;font-size:16px}aside .kind{color:var(--muted);font-size:12px;margin-bottom:8px}
+aside .close{float:right;border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer}
+aside pre{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:8px;overflow:auto;font-size:12px;max-height:260px}
+aside ul{padding-left:18px;margin:4px 0}aside a.jump{color:var(--accent);cursor:pointer;text-decoration:none}
+aside .acts button{font:inherit;font-size:12px;margin:2px 4px 2px 0;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:5px;padding:3px 7px;cursor:pointer}
+.caption{display:none;margin:8px 24px 0;padding:8px 12px;border-left:3px solid var(--hl);background:var(--panel);border-radius:4px}
+.caption.on{display:block}
+section.text{max-width:1100px;padding:10px 24px 40px}section.text h2{font-size:15px;margin:18px 0 4px}
+.tag{font-size:11px;padding:0 5px;border-radius:4px;border:1px solid var(--line);margin-left:4px}.tag.warn{color:var(--warn);border-color:var(--warn)}
+.tag.st-added{color:var(--ok);border-color:var(--ok)}.tag.st-removed{color:var(--bad);border-color:var(--bad)}.tag.st-changed{color:var(--accent);border-color:var(--accent)}
+.muted{color:var(--muted)}.ev{color:var(--muted);font-size:12px}code{font-size:12px}
+.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted);padding:6px 24px 0}
+.legend i{display:inline-block;width:22px;height:0;border-top:2px solid var(--edge);vertical-align:middle;margin-right:5px}
+.legend i.d{border-top-style:dashed}.legend i.a{border-top:2px dashed var(--warn)}
+.findings{margin:10px 0 0;padding:8px 14px;border-left:3px solid var(--accent);background:var(--panel);border-radius:4px;max-width:1000px}
+.findings ul{margin:4px 0 0;padding-left:18px}.findings li{margin:2px 0}
+table.answers{border-collapse:collapse;margin:10px 0 0;max-width:1100px;font-size:13px}
+table.answers th,table.answers td{border:1px solid var(--line);padding:5px 9px;text-align:left;vertical-align:top}
+table.answers th{background:var(--group2);font-weight:600}table.answers td.ev{font-size:12px;color:var(--muted)}
+.issues{margin:8px 24px 0;padding:8px 12px;border:1px solid var(--warn);border-radius:6px;color:var(--warn);font-size:13px}
+/* diagram */
+.canvas{fill:var(--canvas)}
+.group rect{fill:var(--group);stroke:var(--line);stroke-width:1}.group.d2 rect{fill:var(--group2)}.group.d3 rect{fill:var(--group)}
+.glabel{font-size:12px;font-weight:600;fill:var(--muted);letter-spacing:.02em}
+.group.st-removed rect{stroke:var(--bad);stroke-dasharray:6 4;fill:none}
+.node{cursor:pointer;outline:none}.node .shape{stroke-width:1.5;fill:var(--panel)}.node .shape.solid{fill:var(--ink);stroke:var(--ink)}
+.node .shape-line{fill:none;stroke-width:1.2}.node .glyph{fill:var(--muted)}
+.node .label{font-size:13px;font-weight:600;fill:var(--ink)}.node .note{font-size:11px;fill:var(--muted)}
+.node .badge{font-size:10px;fill:var(--ok)}.node .badge.warn{fill:var(--warn)}
+.table-head{fill:var(--group2)}.fname{font-size:12px;fill:var(--ink)}.ftype{font-size:11px;fill:var(--muted)}.fkey{font-size:9px;font-weight:700;fill:var(--warn)}
+.c-blue .shape,.c-blue .shape-line{stroke:#3b82f6}.c-violet .shape{stroke:#8b5cf6}.c-green .shape,.c-green .shape-line{stroke:#16a34a}
+.c-teal .shape,.c-teal .shape-line{stroke:#0d9488}.c-amber .shape,.c-amber .shape-line{stroke:#d97706}.c-slate .shape{stroke:#64748b}
+.c-rose .shape{stroke:#e11d48}.c-indigo .shape{stroke:#4f46e5}.k-external .shape{stroke-dasharray:5 3}
+.node.assumed .shape{stroke:var(--warn)!important;stroke-dasharray:6 4}
+.node.st-added .shape{stroke:var(--ok)!important;stroke-width:2.5}.node.st-changed .shape{stroke:var(--accent)!important;stroke-width:2.5}
+.node.st-removed{opacity:.55}.node.st-removed .shape{stroke:var(--bad)!important;stroke-dasharray:6 4}.node.st-removed .label{text-decoration:line-through}
+.edge .line{fill:none;stroke:var(--edge);stroke-width:1.5}.edge .hit{fill:none;stroke:transparent;stroke-width:12;cursor:pointer}
+.edge.s-dashed .line{stroke-dasharray:7 5}.edge.s-dotted .line{stroke-dasharray:2 4}.edge.emph .line{stroke-width:2.6}
+.edge.assumed .line{stroke:var(--warn);stroke-dasharray:6 4}.edge.st-added .line{stroke:var(--ok);stroke-width:2.2}
+.edge.st-removed .line{stroke:var(--bad);stroke-dasharray:6 4;opacity:.7}
+.arrowhead{fill:var(--edge)}.lbg{fill:var(--canvas);opacity:.92}.elabel{font-size:11px;fill:var(--muted)}.card{font-size:11px;font-weight:700;fill:var(--muted)}
+.lifeline{stroke:var(--line);stroke-width:1.2;stroke-dasharray:4 4}.seqno{font-size:10px;fill:var(--muted)}
+.frame rect{fill:none;stroke:var(--muted);stroke-width:1}.frame .ftab{fill:var(--group2);stroke:var(--muted)}.frame text{font-size:11px;fill:var(--ink);font-weight:600}
+svg.focus .node,svg.focus .edge,svg.focus .group{opacity:.18;transition:opacity .15s}
+svg.focus .on,svg.focus .group.on{opacity:1}svg .node.on .shape{stroke-width:2.6}svg .edge.on .line{stroke:var(--hl);stroke-width:2.6}
+svg .node.sel .shape{stroke:var(--hl)!important;stroke-width:3}svg .node:focus-visible .shape{stroke:var(--accent)!important;stroke-width:3}
+@media (prefers-reduced-motion:no-preference){svg .edge.on.flow .line{stroke-dasharray:8 6;animation:flow 1s linear infinite}}
+@keyframes flow{to{stroke-dashoffset:-28}}
+.lane rect{fill:var(--group);stroke:var(--line)}.lane-line{stroke:var(--line);stroke-width:2}
+.axis line{stroke:var(--muted);stroke-width:1}.axis text{font-size:11px;fill:var(--muted)}.axis .grid{stroke:var(--line);stroke-dasharray:2 4}
+.brk{stroke:var(--muted);stroke-width:1.5;fill:none}.brk-label{font-size:10px;fill:var(--muted)}
+.node.event .shape{stroke-width:2;fill:var(--panel)}.node.event .bar{fill:var(--group2);stroke-width:1.5}
+.node.event .leader{stroke:var(--line);stroke-width:1}.node.event.approx .shape{stroke-dasharray:3 2}.node .label.tl{font-size:12px}.node .note.tl{font-size:10px}
+.node.span .rowbg{fill:transparent}.node.span:hover .rowbg,.node.span.on .rowbg{fill:var(--group)}
+.node.span .bar{stroke:none;opacity:.88}.node.span.crit .bar{stroke:var(--hl);stroke-width:2.5;opacity:1}
+.node.span.err .bar{stroke:var(--bad);stroke-width:2.5}.node .label.wf{font-size:12px;font-weight:500}.node .note.wf{font-size:11px}
+.node .label.italic{font-style:italic}.mk-open{fill:var(--canvas);stroke:var(--edge);stroke-width:1.2}.mk-line{fill:none;stroke:var(--edge);stroke-width:1.4}
+.edge.tree .line{stroke:var(--line);stroke-width:1.5}
+aside table.facts{border-collapse:collapse;font-size:13px;margin:6px 0}aside table.facts th{text-align:left;color:var(--muted);font-weight:400;padding:2px 10px 2px 0}
+@media print{.bar,aside,.caption{display:none!important}.wrap{height:auto}#stage{border:0}#stage svg{position:static;height:auto}}
+</style>
+<script type="application/json" id="diagram-data">{"type": "waterfall", "slug": "where-a-slow-checkout-spent-its-time", "source_url": null, "story": [], "nodes": [{"id": "a1", "label": "POST /checkout", "kind": "span", "note": null, "detail": null, "fields": [], "evidence": [{"file": "checkout-trace.jsonl", "start": 1, "end": 1, "quote": "POST /checkout", "verified": true, "snippet": "{\"span\": \"POST /checkout\", \"id\": \"a1\", \"parent\": null, \"service\": \"api\", \"start_ms\": 0, \"end_ms\": 1840}"}], "assumed": false, "status": null, "facts": [["starts at", "0 ms"], ["takes", "1.8 s"], ["share of the whole", "100%"], ["time of its own (not in a child span)", "27 ms"], ["on the critical path", "yes"]], "group_label": null}, {"id": "a2", "label": "verify session", "kind": "span", "note": null, "detail": null, "fields": [], "evidence": [{"file": "checkout-trace.jsonl", "start": 2, "end": 2, "quote": "verify session", "verified": true, "snippet": "{\"span\": \"verify session\", \"id\": \"a2\", \"parent\": \"a1\", \"service\": \"api\", \"start_ms\": 4, \"end_ms\": 38}"}], "assumed": false, "status": null, "facts": [["starts at", "4 ms"], ["takes", "34 ms"], ["share of the whole", "2%"], ["time of its own (not in a child span)", "34 ms"], ["on the critical path", "yes"]], "group_label": null}, {"id": "a3", "label": "price cart", "kind": "span", "note": null, "detail": null, "fields": [], "evidence": [{"file": "checkout-trace.jsonl", "start": 3, "end": 3, "quote": "price cart", "verified": true, "snippet": "{\"span\": \"price cart\", \"id\": \"a3\", \"parent\": \"a1\", \"service\": \"api\", \"start_ms\": 40, \"end_ms\": 420}"}], "assumed": false, "status": null, "facts": [["starts at", "40 ms"], ["takes", "380 ms"], ["share of the whole", "21%"], ["time of its own (not in a child span)", "15 ms"], ["on the critical path", "yes"]], "group_label": null}, {"id": "a4", "label": "redis MGET price:*", "kind": "span", "note": null, "detail": null, "fields": [], "evidence": [{"file": "checkout-trace.jsonl", "start": 4, "end": 4, "quote": "redis MGET price:*", "verified": true, "snippet": "{\"span\": \"redis MGET price:*\", \"id\": \"a4\", \"parent\": \"a3\", \"service\": \"redis\", \"start_ms\": 42, \"end_ms\": 61}"}], "assumed": false, "status": null, "facts": [["starts at", "42 ms"], ["takes", "19 ms"], ["share of the whole", "1%"], ["time of its own (not in a child span)", "19 ms"], ["on the critical path", "yes"]], "group_label": null}, {"id": "a5", "label": "select price from products (cache miss)", "kind": "span", "note": null, "detail": null, "fields": [], "evidence": [{"file": "checkout-trace.jsonl", "start": 5, "end": 5, "quote": "select price from products (cache miss)", "verified": true, "snippet": "{\"span\": \"select price from products (cache miss)\", \"id\": \"a5\", \"parent\": \"a3\", \"service\": \"postgres\", \"start_ms\": 64, \"end_ms\": 410}"}], "assumed": false, "status": null, "facts": [["starts at", "64 ms"], ["takes", "346 ms"], ["share of the whole", "19%"], ["time of its own (not in a child span)", "346 ms"], ["on the critical path", "yes"]], "group_label": null}, {"id": "a6", "label": "stripe.PaymentIntent.create", "kind": "span", "note": null, "detail": null, "fields": [], "evidence": [{"file": "checkout-trace.jsonl", "start": 6, "end": 6, "quote": "stripe.PaymentIntent.create", "verified": true, "snippet": "{\"span\": \"stripe.PaymentIntent.create\", \"id\": \"a6\", \"parent\": \"a1\", \"service\": \"stripe\", \"start_ms\": 430, \"end_ms\": 1620}"}], "assumed": false, "status": null, "facts": [["starts at", "430 ms"], ["takes", "1.2 s"], ["share of the whole", "65%"], ["time of its own (not in a child span)", "1.1 s"], ["on the critical path", "yes"]], "group_label": null}, {"id": "a7", "label": "TLS handshake api.stripe.com", "kind": "span", "note": null, "detail": null, "fields": [], "evidence": [{"file": "checkout-trace.jsonl", "start": 7, "end": 7, "quote": "TLS handshake api.stripe.com", "verified": true, "snippet": "{\"span\": \"TLS handshake api.stripe.com\", \"id\": \"a7\", \"parent\": \"a6\", \"service\": \"stripe\", \"start_ms\": 431, \"end_ms\": 520}"}], "assumed": false, "status": null, "facts": [["starts at", "431 ms"], ["takes", "89 ms"], ["share of the whole", "5%"], ["time of its own (not in a child span)", "89 ms"], ["on the critical path", "yes"]], "group_label": null}, {"id": "a8", "label": "insert into orders", "kind": "span", "note": null, "detail": null, "fields": [], "evidence": [{"file": "checkout-trace.jsonl", "start": 8, "end": 8, "quote": "insert into orders", "verified": true, "snippet": "{\"span\": \"insert into orders\", \"id\": \"a8\", \"parent\": \"a1\", \"service\": \"postgres\", \"start_ms\": 1625, \"end_ms\": 1790}"}], "assumed": false, "status": null, "facts": [["starts at", "1.6 s"], ["takes", "165 ms"], ["share of the whole", "9%"], ["time of its own (not in a child span)", "165 ms"], ["on the critical path", "yes"]], "group_label": null}, {"id": "a9", "label": "publish fulfilment", "kind": "span", "note": null, "detail": null, "fields": [], "evidence": [{"file": "checkout-trace.jsonl", "start": 9, "end": 9, "quote": "publish fulfilment", "verified": true, "snippet": "{\"span\": \"publish fulfilment\", \"id\": \"a9\", \"parent\": \"a1\", \"service\": \"rabbitmq\", \"start_ms\": 1792, \"end_ms\": 1836}"}], "assumed": false, "status": null, "facts": [["starts at", "1.8 s"], ["takes", "44 ms"], ["share of the whole", "2%"], ["time of its own (not in a child span)", "44 ms"], ["on the critical path", "yes"]], "group_label": null}], "edges": [{"id": "w-a2", "from": "a1", "to": "a2", "label": "", "detail": null, "evidence": [], "assumed": false, "status": null}, {"id": "w-a3", "from": "a1", "to": "a3", "label": "", "detail": null, "evidence": [], "assumed": false, "status": null}, {"id": "w-a4", "from": "a3", "to": "a4", "label": "", "detail": null, "evidence": [], "assumed": false, "status": null}, {"id": "w-a5", "from": "a3", "to": "a5", "label": "", "detail": null, "evidence": [], "assumed": false, "status": null}, {"id": "w-a6", "from": "a1", "to": "a6", "label": "", "detail": null, "evidence": [], "assumed": false, "status": null}, {"id": "w-a7", "from": "a6", "to": "a7", "label": "", "detail": null, "evidence": [], "assumed": false, "status": null}, {"id": "w-a8", "from": "a1", "to": "a8", "label": "", "detail": null, "evidence": [], "assumed": false, "status": null}, {"id": "w-a9", "from": "a1", "to": "a9", "label": "", "detail": null, "evidence": [], "assumed": false, "status": null}], "mermaid": "gantt\n    title Where a slow checkout spent its time\n    dateFormat x\n    axisFormat %S.%L\n    section api\n    POST /checkout :crit, a1, 0, 1840\n    verify session :crit, a2, 4, 38\n    price cart :crit, a3, 40, 420\n    section redis\n    redis MGET price -* :crit, a4, 42, 61\n    section postgres\n    select price from products (cache miss) :crit, a5, 64, 410\n    insert into orders :crit, a8, 1625, 1790\n    section stripe\n    stripe.PaymentIntent.create :crit, a6, 430, 1620\n    TLS handshake api.stripe.com :crit, a7, 431, 520\n    section rabbitmq\n    publish fulfilment :crit, a9, 1792, 1836\n", "words": {"out": "Child spans", "in": "Parent span", "reach_out": "Everything it spawned", "reach_in": "What it ran under"}, "auto_steps": [{"text": "verify session: 34 ms, 2% of the whole, 34 ms of its own", "nodes": ["a2"]}, {"text": "redis MGET price:*: 19 ms, 1% of the whole, 19 ms of its own", "nodes": ["a4"]}, {"text": "select price from products (cache miss): 346 ms, 19% of the whole, 346 ms of its own", "nodes": ["a5"]}, {"text": "stripe.PaymentIntent.create: 1.2 s, 65% of the whole, 1.1 s of its own", "nodes": ["a6"]}, {"text": "TLS handshake api.stripe.com: 89 ms, 5% of the whole, 89 ms of its own", "nodes": ["a7"]}, {"text": "insert into orders: 165 ms, 9% of the whole, 165 ms of its own", "nodes": ["a8"]}, {"text": "publish fulfilment: 44 ms, 2% of the whole, 44 ms of its own", "nodes": ["a9"]}]}</script>
+<script>
+(function(){
+var DATA=JSON.parse(document.getElementById('diagram-data').textContent);var WD=DATA.words;
+var svg=document.getElementById('map'),stage=document.getElementById('stage'),panel=document.getElementById('panel');
+var root=document.documentElement;
+var pref=localStorage.getItem('idg-theme')||root.getAttribute('data-theme-default');
+if(pref==='auto'||!pref){pref=window.matchMedia&&matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}
+root.setAttribute('data-theme',pref);
+var W=+svg.getAttribute('width'),H=+svg.getAttribute('height');svg.removeAttribute('width');svg.removeAttribute('height');
+var vb={x:0,y:0,w:W,h:H};
+function apply(){svg.setAttribute('viewBox',vb.x+' '+vb.y+' '+vb.w+' '+vb.h)}
+function fit(){var r=stage.getBoundingClientRect();var s=Math.max(W/r.width,H/r.height,0.6);vb.w=r.width*s;vb.h=r.height*s;vb.x=(W-vb.w)/2;vb.y=(H-vb.h)/2;apply()}
+function zoom(f,cx,cy){var r=stage.getBoundingClientRect();if(cx==null){cx=r.width/2;cy=r.height/2}
+ var px=vb.x+cx/r.width*vb.w,py=vb.y+cy/r.height*vb.h;var nw=Math.min(Math.max(vb.w*f,120),W*6);var k=nw/vb.w;
+ vb.x=px-(px-vb.x)*k;vb.y=py-(py-vb.y)*k;vb.w=nw;vb.h=vb.h*k;apply()}
+stage.addEventListener('wheel',function(e){e.preventDefault();var r=stage.getBoundingClientRect();zoom(e.deltaY>0?1.12:1/1.12,e.clientX-r.left,e.clientY-r.top)},{passive:false});
+var drag=null;
+stage.addEventListener('pointerdown',function(e){if(e.target.closest('.node')||e.target.closest('.edge'))return;drag={x:e.clientX,y:e.clientY,vx:vb.x,vy:vb.y};stage.classList.add('drag');stage.setPointerCapture(e.pointerId)});
+stage.addEventListener('pointermove',function(e){if(!drag)return;var r=stage.getBoundingClientRect();vb.x=drag.vx-(e.clientX-drag.x)*vb.w/r.width;vb.y=drag.vy-(e.clientY-drag.y)*vb.h/r.height;apply()});
+stage.addEventListener('pointerup',function(){drag=null;stage.classList.remove('drag')});
+// Lookups are Maps, never plain objects: ids come from the spec and the URL, and a key such as
+// __proto__ must stay a key.
+var nodes=new Map(),edges=new Map(),outE=new Map(),inE=new Map();
+DATA.nodes.forEach(function(n){nodes.set(n.id,n);outE.set(n.id,[]);inE.set(n.id,[])});
+DATA.edges.forEach(function(e){edges.set(e.id,e);if(outE.has(e.from))outE.get(e.from).push(e.id);if(inE.has(e.to))inE.get(e.to).push(e.id)});
+function el(kind,id){return document.getElementById(kind+'-'+id)}
+function clear(){svg.classList.remove('focus');svg.querySelectorAll('.on,.sel,.flow').forEach(function(x){x.classList.remove('on','sel','flow')})}
+function light(ns,es,flow){clear();svg.classList.add('focus');ns.forEach(function(i){var x=el('n',i);x&&x.classList.add('on')});
+ es.forEach(function(i){var x=el('e',i);if(x){x.classList.add('on');flow&&x.classList.add('flow')}})}
+function reach(id,dir){if(!nodes.has(id))return {n:[],e:[]};var seen=new Set([id]),es=[],q=[id];while(q.length){var u=q.shift();(dir>0?outE.get(u):inE.get(u)).forEach(function(eid){var e=edges.get(eid);es.push(eid);var v=dir>0?e.to:e.from;if(!seen.has(v)){seen.add(v);q.push(v)}})}
+ return {n:Array.from(seen),e:es}}
+function path(a,b,directed){if(!nodes.has(a)||!nodes.has(b))return null;var prev=new Map([[a,null]]),q=[a];while(q.length){var u=q.shift();if(u===b)break;
+ var nb=outE.get(u).map(function(i){return [edges.get(i).to,i]});if(!directed)nb=nb.concat(inE.get(u).map(function(i){return [edges.get(i).from,i]}));
+ nb.forEach(function(p){if(!prev.has(p[0])){prev.set(p[0],[u,p[1]]);q.push(p[0])}})}
+ if(!prev.has(b))return null;var ns=[b],es=[],c=b;while(prev.get(c)){es.push(prev.get(c)[1]);c=prev.get(c)[0];ns.push(c)}return {n:ns.reverse(),e:es.reverse()}}
+function esc(s){return String(s==null?'':s).replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]})}
+function evHtml(list){if(!list||!list.length)return '<p class="muted">No evidence cited.</p>';
+ return '<ul>'+list.map(function(e){var t=e.said!=null?(esc(e.source||'user')+': “'+esc(e.said)+'”'):esc(e.file+(e.start?':'+e.start+(e.end!==e.start?'-'+e.end:''):''));
+  if(e.file&&DATA.source_url){t='<a href="'+esc(DATA.source_url.replace(/\/?$/,'/')+e.file+(e.start?'#L'+e.start+(e.end!==e.start?'-L'+e.end:''):''))+'" target="_blank" rel="noopener">'+t+'</a>'}
+  var v=e.verified===true?' <span class="tag" style="color:var(--ok)">checked</span>':(e.verified===null&&e.file?' <span class="tag">not checked</span>':'');
+  return '<li>'+t+v+(e.snippet?'<pre>'+esc(e.snippet)+'</pre>':'')+'</li>'}).join('')+'</ul>'}
+var selected=null;
+function show(kind,id){var x=kind==='n'?nodes.get(id):edges.get(id);if(!x)return;var h='<button class="close" aria-label="Close">×</button>';
+ if(kind==='n'){h+='<h3>'+esc(x.label)+'</h3><div class="kind">'+esc(x.kind)+(x.group_label?' · '+esc(x.group_label):'')+(x.assumed?' · <span style="color:var(--warn)">assumption</span>':'')+(x.status?' · '+esc(x.status):'')+'</div>';
+  if(x.note)h+='<p>'+esc(x.note)+'</p>';if(x.detail)h+='<p>'+esc(x.detail)+'</p>';
+  if(x.fields&&x.fields.length)h+='<ul>'+x.fields.map(function(f){return '<li><code>'+esc(f.name)+'</code> '+esc(f.type||'')+(f.key?' <b>'+esc([].concat(f.key).join('/').toUpperCase())+'</b>':'')+(f.references?' → '+esc(f.references):'')+(f.note?' — '+esc(f.note):'')+'</li>'}).join('')+'</ul>';
+  if(x.facts&&x.facts.length)h+='<table class="facts">'+x.facts.map(function(f){return '<tr><th>'+esc(f[0])+'</th><td>'+esc(f[1])+'</td></tr>'}).join('')+'</table>';
+  h+='<div class="acts"><button data-act="out">'+esc(WD.reach_out)+'</button><button data-act="in">'+esc(WD.reach_in)+'</button><button data-act="near">Neighbours</button></div>';
+  h+='<p class="muted" style="font-size:12px">Shift-click another part to see the path between them.</p>';
+  var o=outE.get(id).map(function(i){var e=edges.get(i);return '<li><a class="jump" data-n="'+esc(e.to)+'">'+esc(nodes.get(e.to).label)+'</a>'+(e.label?' — '+esc(e.label):'')+'</li>'}).join('');
+  var n=inE.get(id).map(function(i){var e=edges.get(i);return '<li><a class="jump" data-n="'+esc(e.from)+'">'+esc(nodes.get(e.from).label)+'</a>'+(e.label?' — '+esc(e.label):'')+'</li>'}).join('');
+  if(o)h+='<b>'+esc(WD.out)+'</b><ul>'+o+'</ul>';if(n)h+='<b>'+esc(WD.in)+'</b><ul>'+n+'</ul>';
+  h+='<b>Evidence</b>'+evHtml(x.evidence);
+  var nb=new Set([id]);outE.get(id).concat(inE.get(id)).forEach(function(i){nb.add(edges.get(i).from);nb.add(edges.get(i).to)});light(Array.from(nb),outE.get(id).concat(inE.get(id)));el('n',id).classList.add('sel');
+ }else{h+='<h3>'+esc(nodes.get(x.from).label)+' → '+esc(nodes.get(x.to).label)+'</h3><div class="kind">'+(x.label?esc(x.label):'connection')+(x.assumed?' · <span style="color:var(--warn)">assumption</span>':'')+(x.status?' · '+esc(x.status):'')+'</div>';
+  if(x.detail)h+='<p>'+esc(x.detail)+'</p>';h+='<b>Evidence</b>'+evHtml(x.evidence);light([x.from,x.to],[id],true)}
+ panel.innerHTML=h;panel.classList.add('open');selected=kind==='n'?id:null;
+ panel.querySelector('.close').onclick=function(){panel.classList.remove('open');clear();selected=null};
+ panel.querySelectorAll('.jump').forEach(function(a){a.onclick=function(){show('n',a.getAttribute('data-n'))}});
+ panel.querySelectorAll('[data-act]').forEach(function(b){b.onclick=function(){var a=b.getAttribute('data-act');
+  if(a==='near'){show('n',id);return}var r=reach(id,a==='out'?1:-1);light(r.n,r.e,true);el('n',id).classList.add('sel')}})}
+svg.addEventListener('click',function(e){var g=e.target.closest('.node');if(g){var id=g.getAttribute('data-id');
+  if(e.shiftKey&&selected&&selected!==id){var p=path(selected,id,true)||path(selected,id,false);if(p){light(p.n,p.e,true)}return}show('n',id);return}
+ var ed=e.target.closest('.edge');if(ed){show('e',ed.getAttribute('data-id'));return}});
+svg.addEventListener('keydown',function(e){var g=e.target.closest&&e.target.closest('.node');if(g&&(e.key==='Enter'||e.key===' ')){e.preventDefault();show('n',g.getAttribute('data-id'))}});
+document.addEventListener('keydown',function(e){if(e.key==='Escape'){panel.classList.remove('open');clear();selected=null}
+ if(e.target.tagName==='INPUT')return;if(e.key==='ArrowRight'&&tour)step(1);if(e.key==='ArrowLeft'&&tour)step(-1)});
+var q=document.getElementById('find');q.addEventListener('input',function(){var v=q.value.trim().toLowerCase();if(!v){clear();return}
+ var ns=DATA.nodes.filter(function(n){return (n.label+' '+(n.note||'')+' '+(n.fields||[]).map(function(f){return f.name}).join(' ')).toLowerCase().indexOf(v)>=0}).map(function(n){return n.id});light(ns,[])});
+document.getElementById('zin').onclick=function(){zoom(1/1.25)};document.getElementById('zout').onclick=function(){zoom(1.25)};document.getElementById('zfit').onclick=fit;
+document.getElementById('theme').onclick=function(){var t=root.getAttribute('data-theme')==='dark'?'light':'dark';root.setAttribute('data-theme',t);try{localStorage.setItem('idg-theme',t)}catch(e){}};
+function download(name,type,data){var a=document.createElement('a');a.href=URL.createObjectURL(new Blob([data],{type:type}));a.download=name;document.body.appendChild(a);a.click();setTimeout(function(){URL.revokeObjectURL(a.href);a.remove()},500)}
+function standalone(){var c=svg.cloneNode(true);c.setAttribute('viewBox','0 0 '+W+' '+H);c.setAttribute('width',W);c.setAttribute('height',H);c.classList.remove('focus');
+ c.querySelectorAll('.on,.sel,.flow').forEach(function(x){x.classList.remove('on','sel','flow')});
+ var cs=getComputedStyle(root),vars=['--bg','--panel','--ink','--muted','--line','--edge','--accent','--warn','--ok','--bad','--hl','--canvas','--group','--group2'].map(function(v){return v+':'+cs.getPropertyValue(v)}).join(';');
+ var st=document.createElementNS('http://www.w3.org/2000/svg','style');st.textContent='svg{'+vars+';font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}'+document.getElementById('diagram-css').textContent.split('/* diagram */')[1];
+ c.insertBefore(st,c.firstChild);return new XMLSerializer().serializeToString(c)}
+var base=(DATA.slug||'diagram');window.interactiveDiagram={svg:standalone,mermaid:function(){return DATA.mermaid}};
+document.getElementById('xsvg').onclick=function(){download(base+'.svg','image/svg+xml',standalone())};
+document.getElementById('xpng').onclick=function(){var img=new Image();img.onload=function(){var k=2,cv=document.createElement('canvas');cv.width=W*k;cv.height=H*k;var ctx=cv.getContext('2d');ctx.scale(k,k);ctx.drawImage(img,0,0);cv.toBlob(function(b){download(base+'.png','image/png',b)})};
+ img.src='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(standalone())};
+document.getElementById('xmmd').onclick=function(){var t=DATA.mermaid;if(navigator.clipboard)navigator.clipboard.writeText(t).catch(function(){});download(base+'.mmd','text/plain',t)};
+var tour=null,cap=document.getElementById('caption');
+var steps=DATA.story&&DATA.story.length?DATA.story:(DATA.auto_steps&&DATA.auto_steps.length)?DATA.auto_steps:(DATA.type==='sequence'?DATA.edges.map(function(m,i){return {text:(i+1)+'. '+nodes.get(m.from).label+' → '+nodes.get(m.to).label+(m.label?': '+m.label:''),edges:[m.id],nodes:[m.from,m.to]}}):[]);
+var tb=document.getElementById('tour');if(!steps.length){tb.style.display='none'}
+function step(d){tour.i=Math.max(0,Math.min(steps.length-1,tour.i+d));var s=steps[tour.i];
+ light((s.nodes||[]).concat((s.edges||[]).map(function(i){return edges.get(i)?edges.get(i).from:null}).filter(Boolean)).concat((s.edges||[]).map(function(i){return edges.get(i)?edges.get(i).to:null}).filter(Boolean)),s.edges||[],true);
+ cap.innerHTML='<b>Step '+(tour.i+1)+' of '+steps.length+'</b> — '+esc(s.text||'')+' <span class="muted">(← → to move, Esc to stop)</span>';cap.classList.add('on')}
+tb.onclick=function(){if(tour){tour=null;cap.classList.remove('on');clear();tb.textContent='Walk through';return}tour={i:-1};tb.textContent='Stop';step(1)};
+document.getElementById('prev').onclick=function(){if(tour)step(-1)};document.getElementById('next').onclick=function(){if(!tour){tb.onclick()}else step(1)};
+if(!steps.length){document.getElementById('prev').style.display='none';document.getElementById('next').style.display='none'}
+function size(){var wr=document.querySelector('.wrap');var avail=Math.max(window.innerHeight-150,360);var r=stage.getBoundingClientRect();
+ var s=Math.max(W/Math.max(r.width,1),0.6);wr.style.height=Math.min(avail,Math.max(H/s+24,300))+'px'}
+size();fit();window.addEventListener('resize',function(){size();fit()});
+function hash(){var h=decodeURIComponent(location.hash.slice(1));if(!h)return;var kv=new Map();h.split('&').forEach(function(p){var i=p.indexOf('=');if(i>0)kv.set(p.slice(0,i),p.slice(i+1))});
+ if(kv.get('theme'))root.setAttribute('data-theme',kv.get('theme'));
+ if(kv.get('n')&&nodes.get(kv.get('n')))show('n',kv.get('n'));if(kv.get('e')&&edges.get(kv.get('e')))show('e',kv.get('e'));
+ if(kv.get('path')){var ab=kv.get('path').split(',');var p=path(ab[0],ab[1],true)||path(ab[0],ab[1],false);if(p)light(p.n,p.e,true)}
+ if(kv.get('reach')){var ar=kv.get('reach').split(',');var r=reach(ar[0],ar[1]==='up'?-1:1);light(r.n,r.e,true)}
+ if(kv.get('step')&&steps.length){tour={i:-1};tb.textContent='Stop';step(+kv.get('step'))}}
+hash();window.addEventListener('hashchange',hash);
+})();
+</script>
+</body></html>

package/packs/solution-architect/skills/interactive-diagram/examples/checkout-trace.json

@@ -0,0 +1,110 @@
+{
+ "type": "waterfall",
+ "title": "Where a slow checkout spent its time",
+ "unit": "ms",
+ "question": "Why did this checkout take 1.8 seconds?",
+ "summary": "Two thirds of it was the Stripe call, and most of that was waiting on Stripe, not the TLS handshake. A cache miss on prices cost another 350 ms before payment even started.",
+ "spans": [
+  {
+   "id": "a1",
+   "label": "POST /checkout",
+   "start": 0,
+   "end": 1840,
+   "service": "api",
+   "evidence": [
+    "checkout-trace.jsonl:1#POST /checkout"
+   ]
+  },
+  {
+   "id": "a2",
+   "label": "verify session",
+   "start": 4,
+   "end": 38,
+   "service": "api",
+   "parent": "a1",
+   "evidence": [
+    "checkout-trace.jsonl:2#verify session"
+   ]
+  },
+  {
+   "id": "a3",
+   "label": "price cart",
+   "start": 40,
+   "end": 420,
+   "service": "api",
+   "parent": "a1",
+   "evidence": [
+    "checkout-trace.jsonl:3#price cart"
+   ]
+  },
+  {
+   "id": "a4",
+   "label": "redis MGET price:*",
+   "start": 42,
+   "end": 61,
+   "service": "redis",
+   "parent": "a3",
+   "evidence": [
+    "checkout-trace.jsonl:4#redis MGET price:*"
+   ]
+  },
+  {
+   "id": "a5",
+   "label": "select price from products (cache miss)",
+   "start": 64,
+   "end": 410,
+   "service": "postgres",
+   "parent": "a3",
+   "evidence": [
+    "checkout-trace.jsonl:5#select price from products (cache miss)"
+   ]
+  },
+  {
+   "id": "a6",
+   "label": "stripe.PaymentIntent.create",
+   "start": 430,
+   "end": 1620,
+   "service": "stripe",
+   "parent": "a1",
+   "evidence": [
+    "checkout-trace.jsonl:6#stripe.PaymentIntent.create"
+   ]
+  },
+  {
+   "id": "a7",
+   "label": "TLS handshake api.stripe.com",
+   "start": 431,
+   "end": 520,
+   "service": "stripe",
+   "parent": "a6",
+   "evidence": [
+    "checkout-trace.jsonl:7#TLS handshake api.stripe.com"
+   ]
+  },
+  {
+   "id": "a8",
+   "label": "insert into orders",
+   "start": 1625,
+   "end": 1790,
+   "service": "postgres",
+   "parent": "a1",
+   "evidence": [
+    "checkout-trace.jsonl:8#insert into orders"
+   ]
+  },
+  {
+   "id": "a9",
+   "label": "publish fulfilment",
+   "start": 1792,
+   "end": 1836,
+   "service": "rabbitmq",
+   "parent": "a1",
+   "evidence": [
+    "checkout-trace.jsonl:9#publish fulfilment"
+   ]
+  }
+ ],
+ "notes": [
+  "One trace, from checkout-trace.jsonl. It says where this request spent its time, not how often checkouts are this slow."
+ ]
+}