skilldrop-cli 0.16.22 → 0.16.23

package/packs/solution-architect/skills/interactive-diagram/examples/incident-timeline.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>Card payments failing, 3 October</title><meta name="generator" content="interactive-diagram (skilldrop)"></head>
+<body>
+<header class="top"><h1>Card payments failing, 3 October</h1><p class="q">What happened, and how long did it take anyone to notice?</p><p class="sum">Errors climbed seven minutes after the 2.14 rollout, but the page fired 22 minutes later because the alert waits for a fixed 5% to hold. From the page, rollback took 28 minutes.</p><div class="findings"><b>What it shows</b><ul><li>From 03 Oct 09:12 to 06 Oct 14:00: 3d 4h.</li><li>Longest quiet stretch: 3d 3h, between Status page: resolved (03 Oct 10:30) and Postmortem (06 Oct 14:00).</li></ul></div><p class="muted" style="font-size:12px;margin:6px 0 0">11 of 11 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>Events, in time order</h2><p>03 Oct 09:12 to 06 Oct 14:00 (3d 4h).</p><ol><li><b>03 Oct 09:12</b> v2.14 rolled out <span class="muted">(Deploys)</span> <span class="ev">(<code>oncall-notes.md:5</code> ✓)</span></li><li><b>03 Oct 09:19</b> Card errors pass 5% <span class="muted">(Monitoring)</span> <span class="ev">(<code>oncall-notes.md:6</code> ✓)</span></li><li><b>03 Oct 09:41</b> Pager fires <span class="muted">(Monitoring)</span> <span class="ev">(<code>oncall-notes.md:7</code> ✓)</span></li><li><b>03 Oct 09:44</b> Ana acknowledges <span class="muted">(On-call)</span> <span class="ev">(<code>oncall-notes.md:8</code> ✓)</span></li><li><b>03 Oct 09:51</b> Rollout named as the cause <span class="muted">(On-call)</span> <span class="ev">(<code>oncall-notes.md:9</code> ✓)</span></li><li><b>03 Oct 09:58</b> Rollback to v2.13 <span class="muted">(Deploys)</span> <span class="ev">(<code>oncall-notes.md:10-11</code> ✓)</span></li><li><b>03 Oct 10:11</b> Errors back under 0.5% <span class="muted">(Monitoring)</span> <span class="ev">(<code>oncall-notes.md:12</code> ✓)</span></li><li><b>03 Oct 10:30</b> Status page: resolved <span class="muted">(On-call)</span> <span class="ev">(<code>oncall-notes.md:13</code> ✓)</span></li><li><b>06 Oct 14:00</b> Postmortem <span class="muted">(On-call)</span> <span class="ev">(<code>oncall-notes.md:14</code> ✓)</span></li></ol><h2>Notes</h2><ul><li>Customer impact (how many payments failed) is not in the notes, so it is not on the timeline.</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>● event</span><span>◆ milestone</span><span>▬ lasted from … to</span><span>// a quiet stretch, shortened</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 1401 368" width="1401" height="368" role="group" aria-label="Card payments failing, 3 October"><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="1401" height="368"/><g class="lane"><rect x="20" y="70.0" width="1341.5" height="68.0" rx="8"/><text class="glabel" x="32" y="124.0">Deploys</text><line class="lane-line" x1="180.0" y1="120.0" x2="1300.0" y2="120.0"/></g><g class="lane"><rect x="20" y="148.0" width="1341.5" height="68.0" rx="8"/><text class="glabel" x="32" y="202.0">Monitoring</text><line class="lane-line" x1="180.0" y1="198.0" x2="1300.0" y2="198.0"/></g><g class="lane"><rect x="20" y="226.0" width="1341.5" height="102.0" rx="8"/><text class="glabel" x="32" y="314.0">On-call</text><line class="lane-line" x1="180.0" y1="310.0" x2="1300.0" y2="310.0"/></g><g class="axis"><line x1="294.2" y1="44" x2="294.2" y2="52"/><text x="294.2" y="38" text-anchor="middle">03 Oct 09:20</text><line x1="424.5" y1="44" x2="424.5" y2="52"/><text x="424.5" y="38" text-anchor="middle">09:30</text><line x1="554.7" y1="44" x2="554.7" y2="52"/><text x="554.7" y="38" text-anchor="middle">09:40</text><line x1="685.0" y1="44" x2="685.0" y2="52"/><text x="685.0" y="38" text-anchor="middle">09:50</text><line x1="815.2" y1="44" x2="815.2" y2="52"/><text x="815.2" y="38" text-anchor="middle">10:00</text><line x1="945.5" y1="44" x2="945.5" y2="52"/><text x="945.5" y="38" text-anchor="middle">10:10</text><line x1="1075.7" y1="44" x2="1075.7" y2="52"/><text x="1075.7" y="38" text-anchor="middle">10:20</text><line x1="1206.0" y1="44" x2="1206.0" y2="52"/><text x="1206.0" y="38" text-anchor="middle">10:30</text><line x1="1270.0" y1="44" x2="1270.0" y2="52"/><text x="1270.0" y="38" text-anchor="middle">06 Oct 14:00</text><path class="brk" d="M1231.0,40 l6,16 M1239.0,40 l6,16"/><text class="brk-label" x="1238.0" y="66" text-anchor="middle">3d 3h later</text><line x1="180.0" y1="48" x2="1300.0" y2="48"/></g><g class="edge s-solid" id="e-e1" data-id="e1" data-from="deploy" data-to="climb"><title>caused</title><path class="hit" d="M190.0,120.0 L281.2,198.0"/><path class="line" d="M190.0,120.0 L281.2,198.0" marker-end="url(#arrow)"/></g><g class="edge s-solid" id="e-e2" data-id="e2" data-from="climb" data-to="page"><title>detected 22 min later</title><path class="hit" d="M281.2,198.0 L567.7,198.0"/><path class="line" d="M281.2,198.0 L567.7,198.0" marker-end="url(#arrow)"/></g><g class="node event c-amber k-change" id="n-deploy" data-id="deploy" tabindex="0" role="button" aria-label="03 Oct 09:12 v2.14 rolled out"><title>03 Oct 09:12 — v2.14 rolled out</title><line class="leader" x1="190.0" y1="113.0" x2="190.0" y2="98.0"/><circle class="shape" cx="190.0" cy="120.0" r="6.5"/><text class="label tl" x="187.0" y="94.0">v2.14 rolled out</text><text class="note tl" x="187.0" y="81.0">03 Oct 09:12</text></g><g class="node event c-rose k-alert" id="n-climb" data-id="climb" tabindex="0" role="button" aria-label="03 Oct 09:19 Card errors pass 5%"><title>03 Oct 09:19 — Card errors pass 5%</title><line class="leader" x1="281.2" y1="191.0" x2="281.2" y2="176.0"/><circle class="shape" cx="281.2" cy="198.0" r="6.5"/><text class="label tl" x="278.2" y="172.0">Card errors pass 5%</text><text class="note tl" x="278.2" y="159.0">03 Oct 09:19</text></g><g class="node event c-rose k-alert" id="n-page" data-id="page" tabindex="0" role="button" aria-label="03 Oct 09:41 Pager fires"><title>03 Oct 09:41 — Pager fires</title><line class="leader" x1="567.7" y1="191.0" x2="567.7" y2="176.0"/><circle class="shape" cx="567.7" cy="198.0" r="6.5"/><text class="label tl" x="564.7" y="172.0">Pager fires</text><text class="note tl" x="564.7" y="159.0">03 Oct 09:41</text></g><g class="node event c-green k-action" id="n-ack" data-id="ack" tabindex="0" role="button" aria-label="03 Oct 09:44 Ana acknowledges"><title>03 Oct 09:44 — Ana acknowledges</title><line class="leader" x1="606.8" y1="303.0" x2="606.8" y2="288.0"/><circle class="shape" cx="606.8" cy="310.0" r="6.5"/><text class="label tl" x="603.8" y="284.0">Ana acknowledges</text><text class="note tl" x="603.8" y="271.0">03 Oct 09:44</text></g><g class="node event c-green k-action" id="n-cause" data-id="cause" tabindex="0" role="button" aria-label="03 Oct 09:51 Rollout named as the cause"><title>03 Oct 09:51 — Rollout named as the cause</title><line class="leader" x1="698.0" y1="303.0" x2="698.0" y2="254.0"/><circle class="shape" cx="698.0" cy="310.0" r="6.5"/><text class="label tl" x="695.0" y="250.0">Rollout named as the cause</text><text class="note tl" x="695.0" y="237.0">03 Oct 09:51</text></g><g class="node event c-amber k-change" id="n-rollback" data-id="rollback" tabindex="0" role="button" aria-label="03 Oct 09:58 Rollback to v2.13"><title>03 Oct 09:58 — Rollback to v2.13</title><rect class="shape bar" x="789.2" y="115.0" width="143.3" height="10" rx="5"/><line class="leader" x1="789.2" y1="113.0" x2="789.2" y2="98.0"/><circle class="shape" cx="789.2" cy="120.0" r="6.5"/><text class="label tl" x="786.2" y="94.0">Rollback to v2.13</text><text class="note tl" x="786.2" y="81.0">03 Oct 09:58</text></g><g class="node event c-violet k-milestone" id="n-normal" data-id="normal" tabindex="0" role="button" aria-label="03 Oct 10:11 Errors back under 0.5%"><title>03 Oct 10:11 — Errors back under 0.5%</title><line class="leader" x1="958.5" y1="191.0" x2="958.5" y2="176.0"/><path class="shape" d="M958.5,190.0 l8,8 l-8,8 l-8,-8 z"/><text class="label tl" x="955.5" y="172.0">Errors back under 0.5%</text><text class="note tl" x="955.5" y="159.0">03 Oct 10:11</text></g><g class="node event c-green k-action" id="n-status" data-id="status" tabindex="0" role="button" aria-label="03 Oct 10:30 Status page: resolved"><title>03 Oct 10:30 — Status page: resolved</title><line class="leader" x1="1206.0" y1="303.0" x2="1206.0" y2="288.0"/><circle class="shape" cx="1206.0" cy="310.0" r="6.5"/><text class="label tl" x="1203.0" y="284.0">Status page: resolved</text><text class="note tl" x="1203.0" y="271.0">03 Oct 10:30</text></g><g class="node event c-violet k-milestone" id="n-pm" data-id="pm" tabindex="0" role="button" aria-label="06 Oct 14:00 Postmortem"><title>06 Oct 14:00 — Postmortem</title><line class="leader" x1="1270.0" y1="303.0" x2="1270.0" y2="254.0"/><path class="shape" d="M1270.0,302.0 l8,8 l-8,8 l-8,-8 z"/><text class="label tl" x="1267.0" y="250.0">Postmortem</text><text class="note tl" x="1267.0" y="237.0">06 Oct 14:00</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": "timeline", "slug": "card-payments-failing-3-october", "source_url": null, "story": [], "nodes": [{"id": "deploy", "label": "v2.14 rolled out", "kind": "change", "note": null, "detail": null, "fields": [], "evidence": [{"file": "oncall-notes.md", "start": 5, "end": 5, "quote": "v2.14 rolled out", "verified": true, "snippet": "09:12 deploy: payments v2.14 rolled out to all regions (release bot)"}], "assumed": false, "status": null, "facts": [["when", "03 Oct 09:12"], ["source", "Deploys"]], "group_label": null}, {"id": "climb", "label": "Card errors pass 5%", "kind": "alert", "note": null, "detail": null, "fields": [], "evidence": [{"file": "oncall-notes.md", "start": 6, "end": 6, "quote": "pass 5%", "verified": true, "snippet": "09:19 dashboard: card authorisation errors pass 5% and keep climbing"}], "assumed": false, "status": null, "facts": [["when", "03 Oct 09:19"], ["source", "Monitoring"]], "group_label": null}, {"id": "page", "label": "Pager fires", "kind": "alert", "note": null, "detail": "22 minutes after the climb began: the alert waits for 5% to hold for 20 minutes.", "fields": [], "evidence": [{"file": "oncall-notes.md", "start": 7, "end": 7, "quote": "22 minutes after", "verified": true, "snippet": "09:41 pager: \"card-auth-error-rate\" fires, 22 minutes after the climb began"}], "assumed": false, "status": null, "facts": [["when", "03 Oct 09:41"], ["source", "Monitoring"]], "group_label": null}, {"id": "ack", "label": "Ana acknowledges", "kind": "action", "note": null, "detail": null, "fields": [], "evidence": [{"file": "oncall-notes.md", "start": 8, "end": 8, "quote": "acknowledges", "verified": true, "snippet": "09:44 Ana acknowledges the page and opens the incident"}], "assumed": false, "status": null, "facts": [["when", "03 Oct 09:44"], ["source", "On-call"]], "group_label": null}, {"id": "cause", "label": "Rollout named as the cause", "kind": "action", "note": null, "detail": null, "fields": [], "evidence": [{"file": "oncall-notes.md", "start": 9, "end": 9, "quote": "started with the 2.14 rollout", "verified": true, "snippet": "09:51 Ana: errors started with the 2.14 rollout, nothing else changed"}], "assumed": false, "status": null, "facts": [["when", "03 Oct 09:51"], ["source", "On-call"]], "group_label": null}, {"id": "rollback", "label": "Rollback to v2.13", "kind": "change", "note": null, "detail": null, "fields": [], "evidence": [{"file": "oncall-notes.md", "start": 10, "end": 11, "quote": "rollback finished", "verified": true, "snippet": "09:58 rollback to v2.13 started\n10:09 rollback finished in all regions"}], "assumed": false, "status": null, "facts": [["when", "03 Oct 09:58"], ["source", "Deploys"]], "group_label": null}, {"id": "normal", "label": "Errors back under 0.5%", "kind": "milestone", "note": null, "detail": null, "fields": [], "evidence": [{"file": "oncall-notes.md", "start": 12, "end": 12, "quote": "back under 0.5%", "verified": true, "snippet": "10:11 dashboard: card errors back under 0.5%"}], "assumed": false, "status": null, "facts": [["when", "03 Oct 10:11"], ["source", "Monitoring"]], "group_label": null}, {"id": "status", "label": "Status page: resolved", "kind": "action", "note": null, "detail": null, "fields": [], "evidence": [{"file": "oncall-notes.md", "start": 13, "end": 13, "quote": "resolved", "verified": true, "snippet": "10:30 status page updated: resolved"}], "assumed": false, "status": null, "facts": [["when", "03 Oct 10:30"], ["source", "On-call"]], "group_label": null}, {"id": "pm", "label": "Postmortem", "kind": "milestone", "note": null, "detail": "Action: alert on the rise in the error rate, not on a fixed 5% for 20 minutes.", "fields": [], "evidence": [{"file": "oncall-notes.md", "start": 14, "end": 14, "quote": "postmortem held", "verified": true, "snippet": "6 Oct 14:00 postmortem held; action: alert on the error rate's rise, not a fixed 5% for 20 minutes"}], "assumed": false, "status": null, "facts": [["when", "06 Oct 14:00"], ["source", "On-call"]], "group_label": null}], "edges": [{"id": "e1", "from": "deploy", "to": "climb", "label": "caused", "detail": null, "evidence": [{"file": "oncall-notes.md", "start": 9, "end": 9, "quote": "errors started with the 2.14 rollout", "verified": true, "snippet": "09:51 Ana: errors started with the 2.14 rollout, nothing else changed"}], "assumed": false, "status": null}, {"id": "e2", "from": "climb", "to": "page", "label": "detected 22 min later", "detail": null, "evidence": [{"file": "oncall-notes.md", "start": 7, "end": 7, "verified": true, "snippet": "09:41 pager: \"card-auth-error-rate\" fires, 22 minutes after the climb began"}], "assumed": false, "status": null}], "mermaid": "timeline\n    title Card payments failing, 3 October\n    section Deploys\n        03 Oct 09.12 : v2.14 rolled out\n        03 Oct 09.58 : Rollback to v2.13\n    section Monitoring\n        03 Oct 09.19 : Card errors pass 5%\n        03 Oct 09.41 : Pager fires\n        03 Oct 10.11 : Errors back under 0.5%\n    section On-call\n        03 Oct 09.44 : Ana acknowledges\n        03 Oct 09.51 : Rollout named as the cause\n        03 Oct 10.30 : Status page - resolved\n        06 Oct 14.00 : Postmortem\n", "words": {"out": "Led to", "in": "Followed from", "reach_out": "What followed", "reach_in": "What led to it"}, "auto_steps": [{"text": "03 Oct 09:12 — v2.14 rolled out", "nodes": ["deploy"]}, {"text": "03 Oct 09:19 — Card errors pass 5%", "nodes": ["climb"]}, {"text": "03 Oct 09:41 — Pager fires", "nodes": ["page"]}, {"text": "03 Oct 09:44 — Ana acknowledges", "nodes": ["ack"]}, {"text": "03 Oct 09:51 — Rollout named as the cause", "nodes": ["cause"]}, {"text": "03 Oct 09:58 — Rollback to v2.13", "nodes": ["rollback"]}, {"text": "03 Oct 10:11 — Errors back under 0.5%", "nodes": ["normal"]}, {"text": "03 Oct 10:30 — Status page: resolved", "nodes": ["status"]}, {"text": "06 Oct 14:00 — Postmortem", "nodes": ["pm"]}]}</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/incident-timeline.json

@@ -0,0 +1,21 @@
+{"type": "timeline",
+ "title": "Card payments failing, 3 October",
+ "question": "What happened, and how long did it take anyone to notice?",
+ "summary": "Errors climbed seven minutes after the 2.14 rollout, but the page fired 22 minutes later because the alert waits for a fixed 5% to hold. From the page, rollback took 28 minutes.",
+ "groups": [{"id": "deploys", "label": "Deploys"}, {"id": "monitoring", "label": "Monitoring"}, {"id": "oncall", "label": "On-call"}],
+ "events": [
+  {"id": "deploy", "label": "v2.14 rolled out", "at": "2026-10-03T09:12", "lane": "deploys", "kind": "change", "evidence": ["oncall-notes.md:5#v2.14 rolled out"]},
+  {"id": "climb", "label": "Card errors pass 5%", "at": "2026-10-03T09:19", "lane": "monitoring", "kind": "alert", "evidence": ["oncall-notes.md:6#pass 5%"]},
+  {"id": "page", "label": "Pager fires", "at": "2026-10-03T09:41", "lane": "monitoring", "kind": "alert", "detail": "22 minutes after the climb began: the alert waits for 5% to hold for 20 minutes.", "evidence": ["oncall-notes.md:7#22 minutes after"]},
+  {"id": "ack", "label": "Ana acknowledges", "at": "2026-10-03T09:44", "lane": "oncall", "kind": "action", "evidence": ["oncall-notes.md:8#acknowledges"]},
+  {"id": "cause", "label": "Rollout named as the cause", "at": "2026-10-03T09:51", "lane": "oncall", "kind": "action", "evidence": ["oncall-notes.md:9#started with the 2.14 rollout"]},
+  {"id": "rollback", "label": "Rollback to v2.13", "at": "2026-10-03T09:58", "end": "2026-10-03T10:09", "lane": "deploys", "kind": "change", "evidence": ["oncall-notes.md:10-11#rollback finished"]},
+  {"id": "normal", "label": "Errors back under 0.5%", "at": "2026-10-03T10:11", "lane": "monitoring", "kind": "milestone", "evidence": ["oncall-notes.md:12#back under 0.5%"]},
+  {"id": "status", "label": "Status page: resolved", "at": "2026-10-03T10:30", "lane": "oncall", "kind": "action", "evidence": ["oncall-notes.md:13#resolved"]},
+  {"id": "pm", "label": "Postmortem", "at": "2026-10-06T14:00", "lane": "oncall", "kind": "milestone", "detail": "Action: alert on the rise in the error rate, not on a fixed 5% for 20 minutes.", "evidence": ["oncall-notes.md:14#postmortem held"]}
+ ],
+ "edges": [
+  {"from": "deploy", "to": "climb", "label": "caused", "evidence": ["oncall-notes.md:9#errors started with the 2.14 rollout"]},
+  {"from": "climb", "to": "page", "label": "detected 22 min later", "evidence": ["oncall-notes.md:7"]}
+ ],
+ "notes": ["Customer impact (how many payments failed) is not in the notes, so it is not on the timeline."]}

package/packs/solution-architect/skills/interactive-diagram/examples/inputs/incident/oncall-notes.md

@@ -0,0 +1,14 @@
+# Incident 2026-10-03: card payments failing
+
+Notes kept in the on-call channel, times in UTC.
+
+09:12 deploy: payments v2.14 rolled out to all regions (release bot)
+09:19 dashboard: card authorisation errors pass 5% and keep climbing
+09:41 pager: "card-auth-error-rate" fires, 22 minutes after the climb began
+09:44 Ana acknowledges the page and opens the incident
+09:51 Ana: errors started with the 2.14 rollout, nothing else changed
+09:58 rollback to v2.13 started
+10:09 rollback finished in all regions
+10:11 dashboard: card errors back under 0.5%
+10:30 status page updated: resolved
+6 Oct 14:00 postmortem held; action: alert on the error rate's rise, not a fixed 5% for 20 minutes

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

@@ -0,0 +1,9 @@
+{"span": "POST /checkout", "id": "a1", "parent": null, "service": "api", "start_ms": 0, "end_ms": 1840}
+{"span": "verify session", "id": "a2", "parent": "a1", "service": "api", "start_ms": 4, "end_ms": 38}
+{"span": "price cart", "id": "a3", "parent": "a1", "service": "api", "start_ms": 40, "end_ms": 420}
+{"span": "redis MGET price:*", "id": "a4", "parent": "a3", "service": "redis", "start_ms": 42, "end_ms": 61}
+{"span": "select price from products (cache miss)", "id": "a5", "parent": "a3", "service": "postgres", "start_ms": 64, "end_ms": 410}
+{"span": "stripe.PaymentIntent.create", "id": "a6", "parent": "a1", "service": "stripe", "start_ms": 430, "end_ms": 1620}
+{"span": "TLS handshake api.stripe.com", "id": "a7", "parent": "a6", "service": "stripe", "start_ms": 431, "end_ms": 520}
+{"span": "insert into orders", "id": "a8", "parent": "a1", "service": "postgres", "start_ms": 1625, "end_ms": 1790}
+{"span": "publish fulfilment", "id": "a9", "parent": "a1", "service": "rabbitmq", "start_ms": 1792, "end_ms": 1836}

package/packs/solution-architect/skills/interactive-diagram/examples/leave-approval.html

@@ -1,6 +1,6 @@
 <!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-x8uMUP6tcCdtva9qPkw2RN4FPyZ3BQ4hbm/v2UzDBzA='; style-src 'unsafe-inline'; img-src data: blob:; base-uri 'none'; form-action 'none'">
+<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>How annual leave gets approved</title><meta name="generator" content="interactive-diagram (skilldrop)"></head>
@@ -17,7 +17,7 @@
 <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><i></i>connection</span><span><i class="d"></i>async / optional</span><span><i class="a"></i>assumption (not shown by the evidence)</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 1807 239" width="1807" height="239" role="group" aria-label="How annual leave gets approved"><defs><marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" 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" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" class="arrowhead"/></marker></defs><rect class="canvas" x="0" y="0" width="1807" height="239"/><g class="edge s-solid" id="e-e1" data-id="e1" data-from="submit" data-to="manager"><title>submit → manager</title><path class="hit" d="M246.0,122.0 L275.0,122.0 Q282.0,122.0 289.0,122.0 L318.0,122.0"/><path class="line" d="M246.0,122.0 L275.0,122.0 Q282.0,122.0 289.0,122.0 L318.0,122.0" marker-end="url(#arrow)"/></g><g class="edge s-solid" id="e-e2" data-id="e2" data-from="manager" data-to="long"><title>approves</title><path class="hit" d="M497.0,108.0 L526.0,108.0 Q533.0,108.0 533.0,101.0 L533.0,94.0 Q533.0,87.0 540.0,87.0 L574.0,87.0"/><path class="line" d="M497.0,108.0 L526.0,108.0 Q533.0,108.0 533.0,101.0 L533.0,94.0 Q533.0,87.0 540.0,87.0 L574.0,87.0" marker-end="url(#arrow)"/><rect class="lbg" x="509.9" y="78.0" width="58.4" height="18.0" rx="3"/><text class="elabel" x="539.1" y="91.0" text-anchor="middle">approves</text></g><g class="edge s-solid assumed" id="e-e3" data-id="e3" data-from="manager" data-to="declined"><title>declines</title><path class="hit" d="M497.0,136.0 L526.0,136.0 Q533.0,136.0 533.0,143.0 L533.0,170.0 Q533.0,177.0 540.0,177.0 L569.0,177.0"/><path class="line" d="M497.0,136.0 L526.0,136.0 Q533.0,136.0 533.0,143.0 L533.0,170.0 Q533.0,177.0 540.0,177.0 L569.0,177.0" marker-end="url(#arrow)"/><rect class="lbg" x="506.6" y="147.5" width="52.9" height="18.0" rx="3"/><text class="elabel" x="533.0" y="160.5" text-anchor="middle">declines</text></g><g class="edge s-solid" id="e-e4" data-id="e4" data-from="long" data-to="hr"><title>yes</title><path class="hit" d="M756.3,75.2 L824.5,75.2 Q831.5,75.2 831.5,82.2 L831.5,115.0 Q831.5,122.0 838.5,122.0 L863.0,122.0"/><path class="line" d="M756.3,75.2 L824.5,75.2 Q831.5,75.2 831.5,82.2 L831.5,115.0 Q831.5,122.0 838.5,122.0 L863.0,122.0" marker-end="url(#arrow)"/><rect class="lbg" x="817.4" y="106.0" width="28.2" height="18.0" rx="3"/><text class="elabel" x="831.5" y="119.0" text-anchor="middle">yes</text></g><g class="edge s-solid" id="e-e5" data-id="e5" data-from="long" data-to="freeze"><title>no</title><path class="hit" d="M756.3,98.8 L815.5,98.8 Q822.5,98.8 822.5,91.8 L822.5,37.0 Q822.5,30.0 829.5,30.0 L1012.0,30.0 Q1019.0,30.0 1019.0,37.0 L1019.0,103.2 Q1019.0,110.2 1026.0,110.2 L1084.1,110.2"/><path class="line" d="M756.3,98.8 L815.5,98.8 Q822.5,98.8 822.5,91.8 L822.5,37.0 Q822.5,30.0 829.5,30.0 L1012.0,30.0 Q1019.0,30.0 1019.0,37.0 L1019.0,103.2 Q1019.0,110.2 1026.0,110.2 L1084.1,110.2" marker-end="url(#arrow)"/><rect class="lbg" x="909.7" y="21.0" width="22.1" height="18.0" rx="3"/><text class="elabel" x="920.8" y="34.0" text-anchor="middle">no</text></g><g class="edge s-solid" id="e-e6" data-id="e6" data-from="hr" data-to="freeze"><title>hr → freeze</title><path class="hit" d="M983.0,122.0 L1013.1,122.0 Q1019.0,122.0 1019.0,127.9 L1019.0,127.9 Q1019.0,133.8 1024.9,133.8 L1084.1,133.8"/><path class="line" d="M983.0,122.0 L1013.1,122.0 Q1019.0,122.0 1019.0,127.9 L1019.0,127.9 Q1019.0,133.8 1024.9,133.8 L1084.1,133.8" marker-end="url(#arrow)"/></g><g class="edge s-solid" id="e-e7" data-id="e7" data-from="freeze" data-to="director"><title>yes</title><path class="hit" d="M1233.9,110.2 L1297.6,110.2 Q1303.5,110.2 1303.5,116.1 L1303.5,116.1 Q1303.5,122.0 1309.4,122.0 L1335.0,122.0"/><path class="line" d="M1233.9,110.2 L1297.6,110.2 Q1303.5,110.2 1303.5,116.1 L1303.5,116.1 Q1303.5,122.0 1309.4,122.0 L1335.0,122.0" marker-end="url(#arrow)"/><rect class="lbg" x="1305.2" y="113.0" width="28.2" height="18.0" rx="3"/><text class="elabel" x="1319.2" y="126.0" text-anchor="middle">yes</text></g><g class="edge s-solid" id="e-e8" data-id="e8" data-from="freeze" data-to="booked"><title>no</title><path class="hit" d="M1233.9,133.8 L1287.5,133.8 Q1294.5,133.8 1294.5,126.8 L1294.5,37.0 Q1294.5,30.0 1301.5,30.0 L1517.0,30.0 Q1524.0,30.0 1524.0,37.0 L1524.0,102.7 Q1524.0,109.7 1531.0,109.7 L1563.8,109.7"/><path class="line" d="M1233.9,133.8 L1287.5,133.8 Q1294.5,133.8 1294.5,126.8 L1294.5,37.0 Q1294.5,30.0 1301.5,30.0 L1517.0,30.0 Q1524.0,30.0 1524.0,37.0 L1524.0,102.7 Q1524.0,109.7 1531.0,109.7 L1563.8,109.7" marker-end="url(#arrow)"/><rect class="lbg" x="1398.2" y="21.0" width="22.1" height="18.0" rx="3"/><text class="elabel" x="1409.2" y="34.0" text-anchor="middle">no</text></g><g class="edge s-solid" id="e-e9" data-id="e9" data-from="director" data-to="booked"><title>director → booked</title><path class="hit" d="M1488.0,122.0 L1517.8,122.0 Q1524.0,122.0 1524.0,128.2 L1524.0,128.2 Q1524.0,134.3 1530.2,134.3 L1563.8,134.3"/><path class="line" d="M1488.0,122.0 L1517.8,122.0 Q1524.0,122.0 1524.0,128.2 L1524.0,128.2 Q1524.0,134.3 1530.2,134.3 L1563.8,134.3" marker-end="url(#arrow)"/></g><g class="node c-green k-start" id="n-submit" data-id="submit" tabindex="0" role="button" aria-label="Submit request in the HR portal"><title>Submit request in the HR portal</title><rect class="shape" x="30.0" y="94.0" width="216.0" height="56.0" rx="28.0"/><text class="label" x="138.0" y="118.0" text-anchor="middle">Submit request in the HR</text><text class="label" x="138.0" y="135.0" text-anchor="middle">portal</text></g><g class="node c-rose k-manual" id="n-manager" data-id="manager" tabindex="0" role="button" aria-label="Line manager reviews"><title>Line manager reviews</title><rect class="shape" x="318.0" y="97.0" width="179.0" height="50.0" rx="6"/><text class="label" x="407.5" y="126.5" text-anchor="middle">Line manager reviews</text></g><g class="node c-amber k-decision" id="n-long" data-id="long" tabindex="0" role="button" aria-label="Over 10 working days?"><title>Over 10 working days?</title><path class="shape" d="M680.0,45.0 L786.0,87.0 L680.0,129.0 L574.0,87.0 Z"/><text class="label" x="680.0" y="83.0" text-anchor="middle">Over 10 working</text><text class="label" x="680.0" y="100.0" text-anchor="middle">days?</text></g><g class="node c-rose k-manual" id="n-hr" data-id="hr" tabindex="0" role="button" aria-label="HR approves"><title>HR approves</title><rect class="shape" x="863.0" y="97.0" width="120.0" height="50.0" rx="6"/><text class="label" x="923.0" y="126.5" text-anchor="middle">HR approves</text></g><g class="node c-amber k-decision" id="n-freeze" data-id="freeze" tabindex="0" role="button" aria-label="In the year-end freeze?"><title>In the year-end freeze?</title><path class="shape" d="M1159.0,80.0 L1263.0,122.0 L1159.0,164.0 L1055.0,122.0 Z"/><text class="label" x="1159.0" y="118.0" text-anchor="middle">In the year-end</text><text class="label" x="1159.0" y="135.0" text-anchor="middle">freeze?</text></g><g class="node c-rose k-manual" id="n-director" data-id="director" tabindex="0" role="button" aria-label="Director approves"><title>Director approves</title><rect class="shape" x="1335.0" y="97.0" width="153.0" height="50.0" rx="6"/><text class="label" x="1411.5" y="126.5" text-anchor="middle">Director approves</text></g><g class="node c-slate k-end" id="n-booked" data-id="booked" tabindex="0" role="button" aria-label="Booked in team calendar"><title>Booked in team calendar</title><rect class="shape" x="1560.0" y="100.0" width="207.0" height="44.0" rx="22.0"/><text class="label" x="1663.5" y="126.5" text-anchor="middle">Booked in team calendar</text></g><g class="node c-slate k-end assumed" id="n-declined" data-id="declined" tabindex="0" role="button" aria-label="Employee told it&#x27;s declined (assumption)"><title>Employee told it&#x27;s declined</title><rect class="shape" x="569.0" y="155.0" width="222.0" height="44.0" rx="22.0"/><text class="label" x="680.0" y="181.5" text-anchor="middle">Employee told it&#x27;s declined</text><text class="badge warn" x="786.0" y="151.0" text-anchor="end">assumed</text></g></svg></div><aside id="panel" aria-live="polite"></aside></div>
+<div class="wrap"><div id="stage"><svg id="map" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1071 405" width="1071" height="405" role="group" aria-label="How annual leave gets approved"><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="1071" height="405"/><g class="edge s-solid" id="e-e1" data-id="e1" data-from="submit" data-to="manager"><title>submit → manager</title><path class="hit" d="M274.5,107.0 L303.5,107.0 Q310.5,107.0 317.5,107.0 L346.5,107.0"/><path class="line" d="M274.5,107.0 L303.5,107.0 Q310.5,107.0 317.5,107.0 L346.5,107.0" marker-end="url(#arrow)"/></g><g class="edge s-solid" id="e-e2" data-id="e2" data-from="manager" data-to="long"><title>approves</title><path class="hit" d="M525.5,93.0 L550.0,93.0 Q557.0,93.0 557.0,86.0 L557.0,79.0 Q557.0,72.0 564.0,72.0 L602.5,72.0"/><path class="line" d="M525.5,93.0 L550.0,93.0 Q557.0,93.0 557.0,86.0 L557.0,79.0 Q557.0,72.0 564.0,72.0 L602.5,72.0" marker-end="url(#arrow)"/><rect class="lbg" x="541.4" y="63.0" width="58.4" height="18.0" rx="3"/><text class="elabel" x="570.6" y="76.0" text-anchor="middle">approves</text></g><g class="edge s-solid assumed" id="e-e3" data-id="e3" data-from="manager" data-to="declined"><title>declines</title><path class="hit" d="M525.5,121.0 L550.0,121.0 Q557.0,121.0 557.0,128.0 L557.0,155.0 Q557.0,162.0 564.0,162.0 L597.5,162.0"/><path class="line" d="M525.5,121.0 L550.0,121.0 Q557.0,121.0 557.0,128.0 L557.0,155.0 Q557.0,162.0 564.0,162.0 L597.5,162.0" marker-end="url(#arrow)"/><rect class="lbg" x="530.5" y="132.5" width="52.9" height="18.0" rx="3"/><text class="elabel" x="557.0" y="145.5" text-anchor="middle">declines</text></g><g class="edge s-solid" id="e-e4" data-id="e4" data-from="long" data-to="hr"><title>yes</title><path class="hit" d="M784.8,60.2 L844.0,60.2 Q851.0,60.2 851.0,67.2 L851.0,100.0 Q851.0,107.0 858.0,107.0 L891.5,107.0"/><path class="line" d="M784.8,60.2 L844.0,60.2 Q851.0,60.2 851.0,67.2 L851.0,100.0 Q851.0,107.0 858.0,107.0 L891.5,107.0" marker-end="url(#arrow)"/><rect class="lbg" x="817.1" y="51.2" width="28.2" height="18.0" rx="3"/><text class="elabel" x="831.1" y="64.2" text-anchor="middle">yes</text></g><g class="edge s-solid" id="e-e5" data-id="e5" data-from="long" data-to="freeze"><title>no</title><path class="hit" d="M784.8,83.8 L853.0,83.8 Q860.0,83.8 860.0,90.8 L860.0,191.5 Q860.0,198.5 853.0,198.5 L37.0,198.5 Q30.0,198.5 30.0,205.5 L30.0,289.2 Q30.0,296.2 37.0,296.2 L91.6,296.2"/><path class="line" d="M784.8,83.8 L853.0,83.8 Q860.0,83.8 860.0,90.8 L860.0,191.5 Q860.0,198.5 853.0,198.5 L37.0,198.5 Q30.0,198.5 30.0,205.5 L30.0,289.2 Q30.0,296.2 37.0,296.2 L91.6,296.2" marker-end="url(#arrow)"/><rect class="lbg" x="849.0" y="132.1" width="22.1" height="18.0" rx="3"/><text class="elabel" x="860.0" y="145.1" text-anchor="middle">no</text></g><g class="edge s-solid" id="e-e6" data-id="e6" data-from="hr" data-to="freeze"><title>hr → freeze</title><path class="hit" d="M1011.5,107.0 L1024.0,107.0 Q1031.0,107.0 1031.0,114.0 L1031.0,200.5 Q1031.0,207.5 1024.0,207.5 L46.0,207.5 Q39.0,207.5 39.0,214.5 L39.0,312.8 Q39.0,319.8 46.0,319.8 L91.6,319.8"/><path class="line" d="M1011.5,107.0 L1024.0,107.0 Q1031.0,107.0 1031.0,114.0 L1031.0,200.5 Q1031.0,207.5 1024.0,207.5 L46.0,207.5 Q39.0,207.5 39.0,214.5 L39.0,312.8 Q39.0,319.8 46.0,319.8 L91.6,319.8" marker-end="url(#arrow)"/></g><g class="edge s-solid" id="e-e7" data-id="e7" data-from="freeze" data-to="director"><title>yes</title><path class="hit" d="M241.4,296.2 L304.6,296.2 Q310.5,296.2 310.5,302.1 L310.5,302.1 Q310.5,308.0 316.4,308.0 L359.5,308.0"/><path class="line" d="M241.4,296.2 L304.6,296.2 Q310.5,296.2 310.5,302.1 L310.5,302.1 Q310.5,308.0 316.4,308.0 L359.5,308.0" marker-end="url(#arrow)"/><rect class="lbg" x="275.7" y="287.2" width="28.1" height="18.0" rx="3"/><text class="elabel" x="289.8" y="300.2" text-anchor="middle">yes</text></g><g class="edge s-solid" id="e-e8" data-id="e8" data-from="freeze" data-to="booked"><title>no</title><path class="hit" d="M241.4,319.8 L303.5,319.8 Q310.5,319.8 310.5,326.8 L310.5,358.0 Q310.5,365.0 317.5,365.0 L550.0,365.0 Q557.0,365.0 557.0,358.0 L557.0,302.7 Q557.0,295.7 564.0,295.7 L608.8,295.7"/><path class="line" d="M241.4,319.8 L303.5,319.8 Q310.5,319.8 310.5,326.8 L310.5,358.0 Q310.5,365.0 317.5,365.0 L550.0,365.0 Q557.0,365.0 557.0,358.0 L557.0,302.7 Q557.0,295.7 564.0,295.7 L608.8,295.7" marker-end="url(#arrow)"/><rect class="lbg" x="422.7" y="356.0" width="22.1" height="18.0" rx="3"/><text class="elabel" x="433.8" y="369.0" text-anchor="middle">no</text></g><g class="edge s-solid" id="e-e9" data-id="e9" data-from="director" data-to="booked"><title>director → booked</title><path class="hit" d="M512.5,308.0 L559.8,308.0 Q566.0,308.0 566.0,314.2 L566.0,314.2 Q566.0,320.3 572.2,320.3 L608.8,320.3"/><path class="line" d="M512.5,308.0 L559.8,308.0 Q566.0,308.0 566.0,314.2 L566.0,314.2 Q566.0,320.3 572.2,320.3 L608.8,320.3" marker-end="url(#arrow)"/></g><g class="node c-green k-start" id="n-submit" data-id="submit" tabindex="0" role="button" aria-label="Submit request in the HR portal"><title>Submit request in the HR portal</title><rect class="shape" x="58.5" y="79.0" width="216.0" height="56.0" rx="28.0"/><text class="label" x="166.5" y="103.0" text-anchor="middle">Submit request in the HR</text><text class="label" x="166.5" y="120.0" text-anchor="middle">portal</text></g><g class="node c-rose k-manual" id="n-manager" data-id="manager" tabindex="0" role="button" aria-label="Line manager reviews"><title>Line manager reviews</title><rect class="shape" x="346.5" y="82.0" width="179.0" height="50.0" rx="6"/><text class="label" x="436.0" y="111.5" text-anchor="middle">Line manager reviews</text></g><g class="node c-amber k-decision" id="n-long" data-id="long" tabindex="0" role="button" aria-label="Over 10 working days?"><title>Over 10 working days?</title><path class="shape" d="M708.5,30.0 L814.5,72.0 L708.5,114.0 L602.5,72.0 Z"/><text class="label" x="708.5" y="68.0" text-anchor="middle">Over 10 working</text><text class="label" x="708.5" y="85.0" text-anchor="middle">days?</text></g><g class="node c-rose k-manual" id="n-hr" data-id="hr" tabindex="0" role="button" aria-label="HR approves"><title>HR approves</title><rect class="shape" x="891.5" y="82.0" width="120.0" height="50.0" rx="6"/><text class="label" x="951.5" y="111.5" text-anchor="middle">HR approves</text></g><g class="node c-amber k-decision" id="n-freeze" data-id="freeze" tabindex="0" role="button" aria-label="In the year-end freeze?"><title>In the year-end freeze?</title><path class="shape" d="M166.5,266.0 L270.5,308.0 L166.5,350.0 L62.5,308.0 Z"/><text class="label" x="166.5" y="304.0" text-anchor="middle">In the year-end</text><text class="label" x="166.5" y="321.0" text-anchor="middle">freeze?</text></g><g class="node c-rose k-manual" id="n-director" data-id="director" tabindex="0" role="button" aria-label="Director approves"><title>Director approves</title><rect class="shape" x="359.5" y="283.0" width="153.0" height="50.0" rx="6"/><text class="label" x="436.0" y="312.5" text-anchor="middle">Director approves</text></g><g class="node c-slate k-end" id="n-booked" data-id="booked" tabindex="0" role="button" aria-label="Booked in team calendar"><title>Booked in team calendar</title><rect class="shape" x="605.0" y="286.0" width="207.0" height="44.0" rx="22.0"/><text class="label" x="708.5" y="312.5" text-anchor="middle">Booked in team calendar</text></g><g class="node c-slate k-end assumed" id="n-declined" data-id="declined" tabindex="0" role="button" aria-label="Employee told it&#x27;s declined (assumption)"><title>Employee told it&#x27;s declined</title><rect class="shape" x="597.5" y="140.0" width="222.0" height="44.0" rx="22.0"/><text class="label" x="708.5" y="166.5" text-anchor="middle">Employee told it&#x27;s declined</text><text class="badge warn" x="814.5" y="136.0" text-anchor="end">assumed</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)}
@@ -49,6 +49,11 @@ section.text{max-width:1100px;padding:10px 24px 40px}section.text h2{font-size:1
 .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)}
@@ -78,12 +83,23 @@ svg.focus .on,svg.focus .group.on{opacity:1}svg .node.on .shape{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": "workflow", "slug": "how-annual-leave-gets-approved", "source_url": null, "story": [], "nodes": [{"id": "submit", "label": "Submit request in the HR portal", "kind": "start", "note": null, "detail": null, "fields": [], "evidence": [{"said": "you request leave in the HR portal", "source": "user"}], "assumed": false, "status": null, "group_label": null}, {"id": "manager", "label": "Line manager reviews", "kind": "manual", "note": null, "detail": null, "fields": [], "evidence": [{"said": "it goes to your line manager first", "source": "user"}], "assumed": false, "status": null, "group_label": null}, {"id": "long", "label": "Over 10 working days?", "kind": "decision", "note": null, "detail": null, "fields": [], "evidence": [{"said": "anything over ten working days also needs HR", "source": "user"}], "assumed": false, "status": null, "group_label": null}, {"id": "hr", "label": "HR approves", "kind": "manual", "note": null, "detail": null, "fields": [], "evidence": [{"said": "also needs HR", "source": "user"}], "assumed": false, "status": null, "group_label": null}, {"id": "freeze", "label": "In the year-end freeze?", "kind": "decision", "note": null, "detail": null, "fields": [], "evidence": [{"said": "nothing in the last two weeks of December without the director", "source": "user"}], "assumed": false, "status": null, "group_label": null}, {"id": "director", "label": "Director approves", "kind": "manual", "note": null, "detail": null, "fields": [], "evidence": [{"said": "without the director", "source": "user"}], "assumed": false, "status": null, "group_label": null}, {"id": "booked", "label": "Booked in team calendar", "kind": "end", "note": null, "detail": null, "fields": [], "evidence": [{"said": "once it's approved it shows up in the team calendar by itself", "source": "user"}], "assumed": false, "status": null, "group_label": null}, {"id": "declined", "label": "Employee told it's declined", "kind": "end", "note": null, "detail": "The description doesn't say what happens when someone says no.", "fields": [], "evidence": [], "assumed": true, "status": null, "group_label": null}], "edges": [{"id": "e1", "from": "submit", "to": "manager", "label": "", "detail": null, "evidence": [{"said": "it goes to your line manager first", "source": "user"}], "assumed": false, "status": null}, {"id": "e2", "from": "manager", "to": "long", "label": "approves", "detail": null, "evidence": [{"said": "it goes to your line manager first", "source": "user"}], "assumed": false, "status": null}, {"id": "e3", "from": "manager", "to": "declined", "label": "declines", "detail": null, "evidence": [], "assumed": true, "status": null}, {"id": "e4", "from": "long", "to": "hr", "label": "yes", "detail": null, "evidence": [{"said": "anything over ten working days also needs HR", "source": "user"}], "assumed": false, "status": null}, {"id": "e5", "from": "long", "to": "freeze", "label": "no", "detail": null, "evidence": [{"said": "anything over ten working days also needs HR", "source": "user"}], "assumed": false, "status": null}, {"id": "e6", "from": "hr", "to": "freeze", "label": "", "detail": null, "evidence": [{"said": "also needs HR", "source": "user"}], "assumed": false, "status": null}, {"id": "e7", "from": "freeze", "to": "director", "label": "yes", "detail": null, "evidence": [{"said": "without the director", "source": "user"}], "assumed": false, "status": null}, {"id": "e8", "from": "freeze", "to": "booked", "label": "no", "detail": null, "evidence": [{"said": "once it's approved it shows up in the team calendar by itself", "source": "user"}], "assumed": false, "status": null}, {"id": "e9", "from": "director", "to": "booked", "label": "", "detail": null, "evidence": [{"said": "once it's approved it shows up in the team calendar by itself", "source": "user"}], "assumed": false, "status": null}], "mermaid": "flowchart LR\n    submit([\"Submit request in the HR portal\"])\n    manager[\"Line manager reviews\"]\n    long{\"Over 10 working days?\"}\n    hr[\"HR approves\"]\n    freeze{\"In the year-end freeze?\"}\n    director[\"Director approves\"]\n    booked([\"Booked in team calendar\"])\n    declined([\"Employee told it's declined\"])\n    submit --\u003e manager\n    manager --\u003e|\"approves\"| long\n    manager -.-\u003e|\"declines\"| declined\n    long --\u003e|\"yes\"| hr\n    long --\u003e|\"no\"| freeze\n    hr --\u003e freeze\n    freeze --\u003e|\"yes\"| director\n    freeze --\u003e|\"no\"| booked\n    director --\u003e booked\n    classDef assumed stroke-dasharray: 5 4\n    class declined assumed\n"}</script>
+<script type="application/json" id="diagram-data">{"type": "workflow", "slug": "how-annual-leave-gets-approved", "source_url": null, "story": [], "nodes": [{"id": "submit", "label": "Submit request in the HR portal", "kind": "start", "note": null, "detail": null, "fields": [], "evidence": [{"said": "you request leave in the HR portal", "source": "user"}], "assumed": false, "status": null, "facts": null, "group_label": null}, {"id": "manager", "label": "Line manager reviews", "kind": "manual", "note": null, "detail": null, "fields": [], "evidence": [{"said": "it goes to your line manager first", "source": "user"}], "assumed": false, "status": null, "facts": null, "group_label": null}, {"id": "long", "label": "Over 10 working days?", "kind": "decision", "note": null, "detail": null, "fields": [], "evidence": [{"said": "anything over ten working days also needs HR", "source": "user"}], "assumed": false, "status": null, "facts": null, "group_label": null}, {"id": "hr", "label": "HR approves", "kind": "manual", "note": null, "detail": null, "fields": [], "evidence": [{"said": "also needs HR", "source": "user"}], "assumed": false, "status": null, "facts": null, "group_label": null}, {"id": "freeze", "label": "In the year-end freeze?", "kind": "decision", "note": null, "detail": null, "fields": [], "evidence": [{"said": "nothing in the last two weeks of December without the director", "source": "user"}], "assumed": false, "status": null, "facts": null, "group_label": null}, {"id": "director", "label": "Director approves", "kind": "manual", "note": null, "detail": null, "fields": [], "evidence": [{"said": "without the director", "source": "user"}], "assumed": false, "status": null, "facts": null, "group_label": null}, {"id": "booked", "label": "Booked in team calendar", "kind": "end", "note": null, "detail": null, "fields": [], "evidence": [{"said": "once it's approved it shows up in the team calendar by itself", "source": "user"}], "assumed": false, "status": null, "facts": null, "group_label": null}, {"id": "declined", "label": "Employee told it's declined", "kind": "end", "note": null, "detail": "The description doesn't say what happens when someone says no.", "fields": [], "evidence": [], "assumed": true, "status": null, "facts": null, "group_label": null}], "edges": [{"id": "e1", "from": "submit", "to": "manager", "label": "", "detail": null, "evidence": [{"said": "it goes to your line manager first", "source": "user"}], "assumed": false, "status": null}, {"id": "e2", "from": "manager", "to": "long", "label": "approves", "detail": null, "evidence": [{"said": "it goes to your line manager first", "source": "user"}], "assumed": false, "status": null}, {"id": "e3", "from": "manager", "to": "declined", "label": "declines", "detail": null, "evidence": [], "assumed": true, "status": null}, {"id": "e4", "from": "long", "to": "hr", "label": "yes", "detail": null, "evidence": [{"said": "anything over ten working days also needs HR", "source": "user"}], "assumed": false, "status": null}, {"id": "e5", "from": "long", "to": "freeze", "label": "no", "detail": null, "evidence": [{"said": "anything over ten working days also needs HR", "source": "user"}], "assumed": false, "status": null}, {"id": "e6", "from": "hr", "to": "freeze", "label": "", "detail": null, "evidence": [{"said": "also needs HR", "source": "user"}], "assumed": false, "status": null}, {"id": "e7", "from": "freeze", "to": "director", "label": "yes", "detail": null, "evidence": [{"said": "without the director", "source": "user"}], "assumed": false, "status": null}, {"id": "e8", "from": "freeze", "to": "booked", "label": "no", "detail": null, "evidence": [{"said": "once it's approved it shows up in the team calendar by itself", "source": "user"}], "assumed": false, "status": null}, {"id": "e9", "from": "director", "to": "booked", "label": "", "detail": null, "evidence": [{"said": "once it's approved it shows up in the team calendar by itself", "source": "user"}], "assumed": false, "status": null}], "mermaid": "flowchart LR\n    submit([\"Submit request in the HR portal\"])\n    manager[\"Line manager reviews\"]\n    long{\"Over 10 working days?\"}\n    hr[\"HR approves\"]\n    freeze{\"In the year-end freeze?\"}\n    director[\"Director approves\"]\n    booked([\"Booked in team calendar\"])\n    declined([\"Employee told it's declined\"])\n    submit --\u003e manager\n    manager --\u003e|\"approves\"| long\n    manager -.-\u003e|\"declines\"| declined\n    long --\u003e|\"yes\"| hr\n    long --\u003e|\"no\"| freeze\n    hr --\u003e freeze\n    freeze --\u003e|\"yes\"| director\n    freeze --\u003e|\"no\"| booked\n    director --\u003e booked\n    classDef assumed stroke-dasharray: 5 4\n    class declined assumed\n", "words": {"out": "Goes to", "in": "Comes from", "reach_out": "What can follow", "reach_in": "What leads here"}, "auto_steps": []}</script>
 <script>
 (function(){
-var DATA=JSON.parse(document.getElementById('diagram-data').textContent);
+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');
@@ -127,11 +143,12 @@ function show(kind,id){var x=kind==='n'?nodes.get(id):edges.get(id);if(!x)return
  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>';
-  h+='<div class="acts"><button data-act="up">What it depends on</button><button data-act="down">What depends on it</button><button data-act="near">Neighbours</button></div>';
+  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>Goes to</b><ul>'+o+'</ul>';if(n)h+='<b>Comes from</b><ul>'+n+'</ul>';
+  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>';
@@ -140,7 +157,7 @@ function show(kind,id){var x=kind==='n'?nodes.get(id):edges.get(id);if(!x)return
  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==='down'?1:-1);light(r.n,r.e,true);el('n',id).classList.add('sel')}})}
+  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}});
@@ -163,7 +180,7 @@ document.getElementById('xpng').onclick=function(){var img=new Image();img.onloa
  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.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 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);

package/packs/solution-architect/skills/interactive-diagram/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "interactive-diagram",
-  "version": "0.1.0",
-  "description": "Turn a codebase, a system description, a process or a database schema into one self-contained interactive HTML diagram (architecture, workflow, data flow, lifecycle, ERD or sequence) where every box and arrow cites the file and line or the words it came from, anything inferred is drawn dashed as an assumption, and each cited line is checked against the repository before the page is written. Laid out automatically, opens offline with no CDN, and exports SVG, PNG and Mermaid. Use when the user asks to \"visualize\", \"map\" or \"make an interactive diagram of\" a repo, a request path, a pipeline, an approval process or a set of tables, or wants a diagram they can click through and share as one file.",
+  "version": "0.2.0",
+  "description": "Turn a codebase, a system description, a process or a database schema into one self-contained interactive HTML diagram (architecture, workflow, data flow, lifecycle, ERD, sequence, class, tree, timeline or waterfall) where every box and arrow cites the file and line or the words it came from, anything inferred is drawn dashed as an assumption, and each cited line is checked against the repository before the page is written. Laid out automatically, opens offline with no CDN, and exports SVG, PNG and Mermaid. Use when the user asks to \"visualize\", \"map\" or \"make an interactive diagram of\" a repo, a request path, a pipeline, an approval process, a set of tables, an incident's events or a slow trace, or wants a diagram they can click through and share as one file.",
   "entrypoint": "SKILL.md",
   "deps": {
     "npm": [],