claude-dev-env 8.88.7 → 8.90.0

package/.agents/skills/pr-visual/README.md

@@ -0,0 +1,29 @@
+# PR visual
+
+A portable agent skill with Python tools. The agent reviews the PR summary and code, authors a source-backed scene, and returns an interactive HTML visual. Claude Code, Codex, and other agents can follow SKILL.md; no model API is embedded.
+
+Requires Python 3.11+, authenticated GitHub CLI for collection, and Playwright plus Chromium for browser verification. Collection and rendering use the standard library. Optional browser setup: `python -m pip install playwright`, then `python -m playwright install chromium`.
+
+```sh
+python scripts/collect.py https://github.com/OWNER/REPO/pull/NUMBER --out RUN/evidence
+python scripts/render.py SCENE.json --out RUN/visual.html --links-only
+python scripts/verify.py RUN/visual.html --out RUN/proof
+```
+
+Flow diagrams, decision trees, dependency graphs, comparisons, bar charts, line charts, and scatter plots share the same source details. Numerical chart coordinates resolve JSON pointers against captured source files. The renderer does not supply an independent semantic code review.
+
+Try the synthetic fixture gallery from this directory:
+
+```sh
+python scripts/render.py fixtures/flow.scene.json fixtures/bar.scene.json fixtures/line.scene.json fixtures/scatter.scene.json --out /tmp/pr-visual.html
+python scripts/verify.py /tmp/pr-visual.html --out /tmp/pr-visual-proof
+python -m pytest scripts/test_render.py
+```
+
+Add `--browser-path PATH` when Chromium is outside the usual locations. `--no-sandbox` is available for isolated containers that cannot run Chromium's sandbox. Private evidence and generated HTML belong outside the skill package.
+
+The npm installer ships this skill through `.agents/skills` in full and core installs. Claude's skills directory points to the same installed agent skill tree. Release automation publishes the npm package after merge.
+
+When Data is available, the skill can use its chart-selection and quantitative-review workflow and plan integrated visuals for distributions, heatmaps, composition, and uncertainty. These additional families require that workflow's supported renderer.
+
+Reviews start with compact PR selectors. Charts live inside relevant flow-step cards and their expansions. Render `fixtures/integrated.scene.json` to exercise that layout. Source examples can read numeric Python literals without executing the PR.

package/.agents/skills/pr-visual/SKILL.md

@@ -0,0 +1,62 @@
+---
+name: pr-visual
+description: Read a pull request's summary and code, trace the changed behavior, and return an interactive visual. Use for "visualize this PR", "draw this change", "PR visual", "chart this PR", "graph this change", or a PR URL with a request for a visual. Accept any accessible GitHub PR.
+---
+
+# PR visual
+
+Turn a PR into a visual explanation of what its code changes. Return the displayed visual.
+
+## Input and result
+
+Accept a PR URL. Resolve a bare PR number only when the repository is known.
+
+Read the description, changed code, relevant callers, and tests. Build an interactive diagram with short labels, visual drilldowns, source details, and a summary-to-code comparison.
+
+Use the current agent for interpretation. The collector and renderer run locally. The shell command alone does not review code. Complete the whole workflow when this skill is invoked.
+
+## Workflow
+
+1. **Capture the PR.** Run `python <skill-root>/scripts/collect.py <PR-URL> --out <run-dir>/evidence`. It saves the PR description, open or closed state, base and head commits, changed paths, patches, and full base/head changed-file source. Use an authorized GitHub connector if gh is unavailable. Preserve the same snapshot fields. If capture fails or a patch is incomplete, fetch the missing source before interpretation. Do not invent a complete review from a partial diff.
+2. **Trace the behavior.** Read the snapshot description and diff. Follow the code from its entry point to its output, including decisions, side effects, failure paths, and material callers. Fetch unchanged callers at the captured commit when needed. Read repository review instructions. Compare the summary with the code. Record material extra scope, contradictions, and limitations. Treat prose claims and past test reports as claims until supported by current source or observed execution.
+3. **Choose the format.** Read [the visual contract](references/visual-contract.md). Pick the structure the change needs. Use a state loop for a sampler, a decision tree for an admission gate, split lanes for two job paths, or an angle loop for capture. Keep the top dashboard to compact PR selectors. Embed quantitative charts inside the relevant flow-step cards and their expansions. Keep the review, charts, and evidence together on one Page. Use a chart when captured numerical data answers the question: bars for categories, lines for ordered observations, scatter for relationships. Read [format selection](references/formats.md). Keep the cream background, teal line icons, green progress paths, orange conditional paths, and generous spacing. Give every node a source-backed mini-diagram in a docked detail panel, related-step navigation, and collapsed exact explanation and sources. Keep the main map usable while the panel is open. Do not copy the shipping instructions into unrelated content.
+4. **Render the scene.** Write a scene JSON using [the scene contract](references/scene-contract.md). Attach immutable file-and-line evidence to every node. Render it with `python <skill-root>/scripts/render.py <scene.json> --out <run-dir>/visual.html`. For hosted display, add `--links-only` to omit full PR bodies and source excerpts while retaining the diagrams and immutable links. For a batch, pass multiple scene files to create a compact selector dashboard and flow reviews. Avoid a detached chart-demo gallery. Compare the generated diagram with the source once more. Fix misleading arrows, labels, implied guarantees, or omitted branches before continuing.
+5. **Verify and display.** Run `python <skill-root>/scripts/verify.py <run-dir>/visual.html --out <run-dir>/proof` with Playwright and Chromium available. Inspect the resulting screenshots. Exercise every mini-diagram, related-step jump, collapsed source disclosure, keyboard navigation, summary comparison, review notes, and zoom. Check the desktop side panel, mobile stacked panel, and two widgets sharing a host. Confirm the PR's latest head and state. If the head moved, recapture and revise; otherwise label the observed state and time. Display the HTML through the host's supported visualization tool. For Pages, read or create the destination and call `create_page_visualization`, then inspect its receipt and read back the embed. Return the visual or its direct Page link. A local HTML file is the fallback when no visualization host is available.
+
+## Evidence and review
+
+Follow [the evidence rules](references/evidence.md) for source review, CI claims, privacy, and coverage limits.
+
+## Optional Data workflow
+
+When the host provides Data, use its `visualize-data` skill for chart selection and quantitative review. Follow [format selection and Data integration](references/formats.md). The bundled renderer runs independently.
+
+## Tool behavior
+
+Use one read-only snapshot per captured head. Read GitHub and write local artifacts. Do not run PR code, post comments, publish reviews, change labels, dispatch workflows, enqueue, or merge as part of this skill.
+
+Use a new run directory for an independent invocation. Reusing an immutable snapshot is fine after checking its head and state. Stop with a concrete access error when source is unavailable.
+
+## Package
+
+`scripts/collect.py` captures source through authenticated gh. `scripts/render.py` validates evidence and produces self-contained HTML. `scripts/verify.py` exercises the browser output. `assets/viewer.html` owns presentation and interaction. Synthetic fixtures ship with the tool. Private PR snapshots stay in the run directory.
+
+## Reply
+
+Return the displayed visual and a short link to the saved result. Mention a material coverage gap when one remains. Keep the workflow narrative inside the artifact.
+
+## Layout
+
+| Path | Purpose |
+| --- | --- |
+| `scripts/collect.py` | Capture immutable PR evidence through gh |
+| `scripts/render.py` | Validate and render scenes |
+| `scripts/metrics.py` | Resolve chart coordinates from JSON and Python literals |
+| `scripts/verify.py` | Verify browser interactions and layout |
+| `scripts/visual_config/` | Shared constants |
+| `assets/` | Standalone viewer and icon symbol definitions |
+| `references/` | Scene, visual, and format contracts |
+| `fixtures/` | Synthetic flow, bar, line, and scatter examples |
+| `scripts/test_render.py` | Evidence and numerical validation cases |
+| `scripts/test_collect.py` | Capture consistency and stale-head cases |
+| `scripts/test_metrics.py` | Embedded-chart provenance and passive literal extraction |

package/.agents/skills/pr-visual/assets/icons.symbols

@@ -0,0 +1,27 @@
+
+<symbol id="apps" viewBox="0 0 48 48"><rect x="5" y="5" width="15" height="15" rx="4"/><rect x="28" y="5" width="15" height="15" rx="4"/><rect x="5" y="28" width="15" height="15" rx="4"/><rect x="28" y="28" width="15" height="15" rx="4"/></symbol>
+<symbol id="phone" viewBox="0 0 48 48"><rect x="11" y="3" width="26" height="42" rx="5"/><path d="M19 9h10M21 39h6"/><circle cx="19" cy="19" r="1"/><circle cx="29" cy="19" r="1"/><circle cx="19" cy="27" r="1"/><circle cx="29" cy="27" r="1"/></symbol>
+<symbol id="code" viewBox="0 0 48 48"><path d="m15 10-13 14 13 14m18-28 13 14-13 14M29 4 19 44"/></symbol>
+<symbol id="queue" viewBox="0 0 48 48"><rect x="7" y="13" width="27" height="31" rx="3"/><path d="M14 13V8h26v31h-6M21 8V3h25v30h-6M13 23h15M13 30h15M13 37h10"/></symbol>
+<symbol id="wrench" viewBox="0 0 48 48"><path d="M29 4a13 13 0 0 0-15 17L3 33a7 7 0 0 0 10 10l12-12A13 13 0 0 0 43 16L31 24l-8-8z"/><circle cx="9" cy="37" r="2"/></symbol>
+<symbol id="eye" viewBox="0 0 48 48"><path d="M2 24s8-13 22-13 22 13 22 13-8 13-22 13S2 24 2 24Z"/><circle cx="24" cy="24" r="6"/></symbol>
+<symbol id="flask" viewBox="0 0 48 48"><path d="M17 3h14M20 3v17L6 39q-4 6 4 6h28q8 0 4-6L28 20V3M13 31h23M21 36l3 3"/></symbol>
+<symbol id="list" viewBox="0 0 48 48"><rect x="8" y="4" width="33" height="40" rx="4"/><path d="m3 13 4 4 7-9m4 6h16M18 25h16M18 35h16M11 25h1M11 35h1"/></symbol>
+<symbol id="branches" viewBox="0 0 48 48"><circle cx="10" cy="8" r="5"/><circle cx="38" cy="8" r="5"/><circle cx="24" cy="40" r="5"/><path d="M10 13v6q0 10 14 10v6M38 13v6q0 10-14 10"/></symbol>
+<symbol id="check" viewBox="0 0 48 48"><circle cx="24" cy="24" r="21"/><path d="m11 24 9 9 18-19"/></symbol>
+<symbol id="github" viewBox="0 0 48 48"><path d="M15 38c-8 2-8-4-12-4M18 45v-8c-14 0-19-17-9-23-1-4 0-9 0-9s6 0 10 5a30 30 0 0 1 11 0c4-5 10-5 10-5s2 6 0 9c10 6 5 23-8 23v8"/></symbol>
+<symbol id="lock" viewBox="0 0 48 48"><rect x="7" y="20" width="34" height="25" rx="4"/><path d="M14 20V12a10 10 0 0 1 20 0v8M24 29v7"/></symbol>
+<symbol id="clock" viewBox="0 0 48 48"><circle cx="24" cy="25" r="20"/><path d="M24 12v13l9 6M17 2h14"/></symbol>
+<symbol id="person" viewBox="0 0 48 48"><circle cx="24" cy="11" r="8"/><path d="M7 43V33q0-12 17-12t17 12v10M16 32v11M32 32v11"/></symbol>
+<symbol id="merge" viewBox="0 0 48 48"><circle cx="12" cy="7" r="5"/><circle cx="12" cy="40" r="5"/><circle cx="37" cy="7" r="5"/><path d="M12 12v23M37 12v5q0 11-25 11"/></symbol>
+<symbol id="flag" viewBox="0 0 48 48"><path d="M7 46V3M7 4q10-6 20 0t16 0v23q-8 5-16 0t-20 0"/></symbol>
+<symbol id="screen" viewBox="0 0 48 48"><rect x="3" y="5" width="42" height="30" rx="4"/><path d="M18 35v8M30 35v8M11 43h26m-22-22 6 6 12-14"/></symbol>
+<symbol id="shield" viewBox="0 0 48 48"><path d="M24 2 4 10v14q0 16 20 23 20-7 20-23V10Z"/><path d="m12 24 8 8 17-18"/></symbol>
+<symbol id="ledger" viewBox="0 0 48 48"><rect x="9" y="4" width="35" height="41" rx="4"/><path d="M17 4v41M4 12h9M4 23h9M4 35h9M24 14h13M24 24h13M24 34h9"/></symbol>
+<symbol id="cpu" viewBox="0 0 48 48"><rect x="10" y="10" width="28" height="28" rx="3"/><rect x="18" y="18" width="12" height="12" rx="1"/><path d="M17 2v8M31 2v8M17 38v8M31 38v8M2 17h8M2 31h8M38 17h8M38 31h8"/></symbol>
+<symbol id="pause" viewBox="0 0 48 48"><rect x="10" y="7" width="8" height="34" rx="2"/><rect x="30" y="7" width="8" height="34" rx="2"/></symbol>
+<symbol id="refresh" viewBox="0 0 48 48"><path d="M42 17A19 19 0 0 0 7 11L2 18m0-12v12h12M6 31a19 19 0 0 0 35 6l5-7m0 12V30H34"/></symbol>
+
+<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 10 5 0 10z" fill="#294954"/></marker>
+<marker id="arrowGreen" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 10 5 0 10z" fill="#217757"/></marker>
+<marker id="arrowOrange" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 10 5 0 10z" fill="#b76531"/></marker>

package/.agents/skills/pr-visual/assets/viewer.html

@@ -0,0 +1,147 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>PR visual review</title><style>
+[data-pr-visual]{font-family:Arial,Helvetica,sans-serif;color:#17353f;background:#f6f5ef;width:100%;max-width:1600px;margin:0 auto;isolation:isolate;color-scheme:light}
+[data-pr-visual] *{box-sizing:border-box;color:inherit}[data-pr-visual] [hidden]{display:none!important}
+[data-pr-visual] button,[data-pr-visual] a{font:inherit}[data-pr-visual] button{cursor:pointer;opacity:1;text-shadow:none}
+[data-pr-visual] .toolbar{display:flex;align-items:center;gap:8px;padding:13px 22px;background:#17353f;color:#fff}
+[data-pr-visual] .brand{font-size:17px;font-weight:800;margin-right:auto}
+[data-pr-visual] .toolbar button{border:1px solid #6f8488;border-radius:6px;background:#2b4a54;color:#fff;padding:7px 11px;font-size:13px}
+[data-pr-visual] .tabs{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:10px;padding:16px 22px;background:#edf0e6;overflow:auto;border-bottom:1px solid #d5dcd2}
+[data-pr-visual] .tabs button{text-align:left;white-space:nowrap;border:1px solid #c5d1c1;border-radius:8px;background:#f9faf3;color:#17353f;padding:12px 14px;min-width:0}
+[data-pr-visual] .tabs button[aria-selected=true]{background:#17353f;border-color:#17353f;color:#fff}
+[data-pr-visual] .tab-number{font-size:11px;letter-spacing:.8px;opacity:.7;display:block;margin-bottom:5px}
+[data-pr-visual] .tab-name{font-size:15px;font-weight:700;display:block}
+[data-pr-visual] .workspace{display:grid;grid-template-columns:minmax(0,1fr);height:clamp(640px,78vw,1040px);overflow:hidden}
+[data-pr-visual] .workspace.open{grid-template-columns:minmax(0,1fr) min(440px,43%)}
+[data-pr-visual] .stage{overflow:auto;min-width:0;min-height:0;overscroll-behavior:contain;background:#f6f5ef}
+[data-pr-visual] .canvas{min-width:1040px;max-width:1540px;margin:auto}
+[data-pr-visual] svg{width:100%;display:block}[data-pr-visual] svg text{font-family:Arial,Helvetica,sans-serif;fill:#17353f}
+[data-pr-visual] .title{font-size:36px;font-weight:900;letter-spacing:-1px}[data-pr-visual] .subtitle{font-size:17px;fill:#5e7171}
+[data-pr-visual] .kicker{font-size:12px;font-weight:800;letter-spacing:1.5px}[data-pr-visual] .micro{font-size:13px;fill:#64746e}
+[data-pr-visual] .wire{fill:none;stroke:#294954;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}[data-pr-visual] .wire.green{stroke:#217757;stroke-width:3.5}[data-pr-visual] .wire.orange{stroke:#b76531}[data-pr-visual] .wire.dotted{stroke:#94a298;stroke-dasharray:5 8;stroke-width:2}
+[data-pr-visual] .disc{fill:#fffef8;stroke:#b9c8bd;stroke-width:2}[data-pr-visual] .disc.blue{fill:#d9e9ee;stroke:#8faeb9}[data-pr-visual] .disc.green{fill:#e4f0df;stroke:#9db996}[data-pr-visual] .disc.lime{fill:#d8f687;stroke:#a4c357}[data-pr-visual] .disc.orange,[data-pr-visual] .diamond{fill:#fae5cf;stroke:#ca955e;stroke-width:2}
+[data-pr-visual] .icon{fill:none;stroke:#17353f;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
+[data-pr-visual] .node{cursor:pointer;outline:none;pointer-events:bounding-box}[data-pr-visual] .node:hover .disc,[data-pr-visual] .node:focus .disc,[data-pr-visual] .node[aria-expanded=true] .disc,[data-pr-visual] .node:hover .diamond{stroke:#17353f;stroke-width:3}
+[data-pr-visual] .node-label{font-size:18px;font-weight:750}[data-pr-visual] .edge-label{font-size:12px;letter-spacing:1px;font-weight:800;fill:#217757}[data-pr-visual] .edge-label.orange{fill:#a45d2c}
+[data-pr-visual] .group{fill:#edf0e5;stroke:#b7c7b2;stroke-width:1.5}[data-pr-visual] .panel-label{font-size:12px;font-weight:800;letter-spacing:1.4px;fill:#64746e}
+[data-pr-visual] .step-card{fill:#fffef8;stroke:#aabdac;stroke-width:1.8}[data-pr-visual] .node:hover .step-card,[data-pr-visual] .node:focus .step-card,[data-pr-visual] .node[aria-expanded=true] .step-card{stroke:#217757;stroke-width:3}
+[data-pr-visual] .step-title{font-size:16px;font-weight:750}[data-pr-visual] .step-value{font-size:14px;font-weight:700}[data-pr-visual] .step-caption{font-size:11px;fill:#64746e}[data-pr-visual] .step-category{font-size:12px;fill:#52695f}
+[data-pr-visual] .foot-label{font-size:12px;font-weight:800;letter-spacing:1.4px}[data-pr-visual] .foot-text{font-size:16px}[data-pr-visual] .stamp{font-size:12px}
+[data-pr-visual] .drawer{padding:22px;background:#fffef7;border-left:1px solid #c8d1c4;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
+[data-pr-visual] .drawer header{display:flex;align-items:flex-start;gap:10px;flex:none}[data-pr-visual] .drawer h2{font-size:24px;line-height:1.25;margin:8px 0 18px;overflow-wrap:anywhere}
+[data-pr-visual] .drawer .close{margin-left:auto;flex:none;border:1px solid #879b8e;border-radius:6px;background:#fff;color:#17353f;padding:7px 10px;font-size:13px}
+[data-pr-visual] .drawer .close:hover{background:#e4f0df;color:#17353f}
+[data-pr-visual] .content{overflow:auto;min-height:0;overscroll-behavior:contain;padding-right:6px}[data-pr-visual] .drawer h3{font-size:14px;line-height:1.4;color:#496357;margin:16px 0 10px}[data-pr-visual] .drawer p{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
+[data-pr-visual] .drawer pre{font:12px/1.6 monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:#edf0e5;padding:12px;border-radius:6px}[data-pr-visual] .drawer a{display:block;color:#167550;overflow-wrap:anywhere;font-size:13px;margin:10px 0}
+[data-pr-visual] .embedded-chart{margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid #d5dcd2}[data-pr-visual] .embedded-chart h3{font-size:17px;margin:0 0 10px;color:#17353f}[data-pr-visual] .embedded-chart svg text{font-size:14px}[data-pr-visual] .chart-basis{display:block;font-size:10px;letter-spacing:1px;font-weight:800;color:#7c5b32;margin-top:8px}[data-pr-visual] .embedded-chart figcaption{font-size:12px;line-height:1.6;color:#64746e;margin-top:6px}
+[data-pr-visual] .detail-map .mini-label{font-size:12px;font-weight:700}[data-pr-visual] .detail-map .mini-edge{font-size:10px;fill:#64746e}
+[data-pr-visual] .detail-jumps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:18px}[data-pr-visual] .detail-jumps button{display:flex;flex-direction:column;align-items:center;gap:7px;background:#f2f5ea;border:1px solid #879b8e;border-radius:6px;padding:9px 4px;color:#17353f;font-size:11px;line-height:1.3}[data-pr-visual] .detail-jumps button span{color:#17353f}[data-pr-visual] .detail-jumps svg{width:24px;height:24px}
+[data-pr-visual] .exact-source{border-top:1px solid #d5dcd2;padding-top:14px;margin:18px 0}[data-pr-visual] .exact-source summary{font-size:13px;font-weight:700;color:#52695f;cursor:pointer}
+[data-pr-visual] .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
+[data-pr-visual] button:focus-visible,[data-pr-visual] summary:focus-visible,[data-pr-visual] a:focus-visible{outline:3px solid #17353f;outline-offset:3px}
+[data-pr-visual] .toolbar button:focus-visible{outline-color:#d8f687}
+@media(min-width:1100px){[data-pr-visual] .workspace.open .canvas{min-width:0}}
+@media(max-width:700px){[data-pr-visual] .toolbar{padding:12px;flex-wrap:wrap}[data-pr-visual] .brand{flex-basis:100%;margin-bottom:4px}[data-pr-visual] .tabs{padding:12px;grid-template-columns:repeat(5,155px);gap:8px}[data-pr-visual] .tabs button{padding:10px 12px}[data-pr-visual] .workspace.open{grid-template-columns:minmax(0,1fr);grid-template-rows:430px minmax(0,1fr)}[data-pr-visual] .drawer{grid-row:1;border-left:0;border-bottom:1px solid #c8d1c4;padding:16px}[data-pr-visual] .stage{grid-row:2}[data-pr-visual] .workspace:not(.open) .stage{grid-row:1}}
+@media print{[data-pr-visual] .toolbar,[data-pr-visual] .tabs,[data-pr-visual] .drawer{display:none!important}[data-pr-visual] .workspace{display:block;height:auto;overflow:visible}[data-pr-visual] .stage{overflow:visible}[data-pr-visual] .canvas{min-width:0;max-width:none}}
+</style></head><body><main data-pr-visual>
+<div class="toolbar"><span class="brand">PR visual review</span><button data-minus aria-label="Zoom out">&#8722;</button><button data-plus aria-label="Zoom in">+</button><button data-fit>Fit</button><button data-compare>Summary vs code</button><button data-review>Review notes</button></div>
+<nav class="tabs" role="tablist" aria-label="Pull request diagrams"></nav>
+<div class="workspace"><div class="stage"><div class="canvas" role="tabpanel"></div></div><aside class="drawer" aria-label="Diagram details" hidden><header><h2 data-detail-title></h2><button class="close" aria-label="Close details">Close</button></header><div class="content"></div></aside></div>
+<script type="application/json" data-scenes>__SCENES__</script><script>
+(()=>{
+const root=document.currentScript.closest('[data-pr-visual]'),$=s=>root.querySelector(s),all=s=>[...root.querySelectorAll(s)],ns='http://www.w3.org/2000/svg';
+const scenes=JSON.parse($('[data-scenes]').textContent),icons=`__ICONS__`,prefix='prv-'+Math.random().toString(36).slice(2)+'-';
+const canvas=$('.canvas'),tabs=$('.tabs'),drawer=$('.drawer'),workspace=$('.workspace'),content=$('.content');let active=0,zoom=1,lastFocus;
+canvas.id=prefix+'diagram';drawer.id=prefix+'details';
+function el(tag,attrs={},text){const n=document.createElementNS(ns,tag);Object.entries(attrs).forEach(([k,v])=>{if(k==='href'&&v.startsWith('#'))v='#'+prefix+v.slice(1);if(k==='marker-end')v=v.replace('#','#'+prefix);n.setAttribute(k,String(v))});if(text!==undefined)n.textContent=text;return n}
+function dom(tag,text,cls){const n=document.createElement(tag);if(text!==undefined)n.textContent=text;if(cls)n.className=cls;return n}
+function text(svg,x,y,value,cls,anchor='start'){svg.append(el('text',{x,y,class:cls,'text-anchor':anchor},value))}
+function lines(svg,x,y,values,cls,anchor='start',gap=23){(Array.isArray(values)?values:[values]).forEach((v,i)=>text(svg,x,y+i*gap,v,cls,anchor))}
+function mini(flow){const rows=Math.ceil(flow.steps.length/3),height=rows*125,svg=el('svg',{viewBox:`0 0 350 ${height}`,class:'detail-map',role:'img','aria-label':flow.title});
+ const positions=flow.steps.map((_,i)=>{const row=Math.floor(i/3),col=row%2?2-i%3:i%3;return {x:55+120*col,y:38+125*row}});
+ const edges=flow.edges||flow.steps.slice(1).map((_,i)=>({from:i,to:i+1}));
+ edges.forEach(e=>{const a=positions[e.from],b=positions[e.to],dx=b.x-a.x,dy=b.y-a.y,length=Math.hypot(dx,dy),ux=dx/length,uy=dy/length,kind=e.kind||'green';svg.append(el('path',{d:`M${a.x+ux*25} ${a.y+uy*25}L${b.x-ux*28} ${b.y-uy*28}`,class:`wire ${kind}`,'stroke-width':2,'marker-end':`url(#${kind==='orange'?'arrowOrange':'arrowGreen'})`}));if(e.label)text(svg,(a.x+b.x)/2+(!dx?32:0),(a.y+b.y)/2-8,e.label,'mini-edge','middle')});
+ flow.steps.forEach((step,i)=>{const {x,y}=positions[i];svg.append(el('circle',{cx:x,cy:y,r:24,class:`disc ${step.kind||'green'}`}));svg.append(el('use',{href:'#'+step.icon,x:x-15,y:y-15,width:30,height:30,class:'icon'}));lines(svg,x,y+43,step.label,'mini-label','middle',15)});return svg}
+function embeddedChart(chart){
+ const figure=dom('figure',undefined,'embedded-chart');figure.dataset.embeddedChart=chart.kind;
+ const svg=el('svg',{viewBox:'0 0 420 245',role:'img','aria-label':`${chart.title}. ${chart.caption}`}),left=42,right=398,top=36,bottom=181;
+ const points=chart.points,ys=points.map(p=>p.values.y),low=Math.min(0,...ys),high=Math.max(0,...ys),span=high-low||1,y=v=>bottom-(v-low)/span*(bottom-top);
+ const xs=points.map(p=>p.values.x),xmin=Math.min(...xs),xspan=Math.max(...xs)-xmin||1,isBar=chart.kind==='bar';
+ const x=(v,i)=>isBar?left+(i+.5)*(right-left)/points.length:left+(v-xmin)/xspan*(right-left);
+ for(let i=0;i<=4;i++){const v=low+span*i/4,yy=y(v);svg.append(el('line',{x1:left,y1:yy,x2:right,y2:yy,stroke:'#d9dfd2'}));text(svg,left-10,yy+4,Number(v.toPrecision(3)).toString(),'micro','end')}
+ svg.append(el('line',{x1:left,y1:y(0),x2:right,y2:y(0),stroke:'#64746e'}));
+ if(chart.kind==='line'){const sorted=points.map((p,i)=>({x:x(p.values.x,i),y:y(p.values.y)})).sort((a,b)=>a.x-b.x);svg.append(el('path',{d:sorted.map((p,i)=>`${i?'L':'M'}${p.x} ${p.y}`).join(' '),class:'wire green'}))}
+ points.forEach((p,i)=>{const xx=x(p.values.x,i),yy=y(p.values.y),width=Math.min(74,(right-left)/points.length*.55);svg.append(isBar?el('rect',{x:xx-width/2,y:Math.min(yy,y(0)),width,height:Math.max(2,Math.abs(yy-y(0))),rx:4,fill:'#9abd9b'}):el('circle',{cx:xx,cy:yy,r:5,fill:'#217757'}));
+ text(svg,xx,yy-9,String(p.values.y),'micro','middle');text(svg,xx,205,isBar?p.label:String(p.values.x),'micro','middle')});
+ text(svg,4,18,chart.y_label,'micro');text(svg,(left+right)/2,237,chart.x_label,'micro','middle');figure.append(svg);
+ figure.append(dom('span',chart.basis==='source-example'?'SOURCE EXAMPLE':'CAPTURED DATA','chart-basis'),dom('figcaption',chart.caption));return figure
+}
+function stepCard(group,node){
+ const {x,y}=node,chart=node.chart,left=x-78,right=x+78,top=y-8,bottom=y+69,points=chart.points;
+ group.append(el('rect',{x:x-106,y:y-80,width:212,height:201,rx:16,class:'step-card'}));
+ group.append(el('use',{href:'#'+node.icon,x:x-87,y:y-63,width:27,height:27,class:'icon'}));
+ text(group,x-47,y-43,node.label.join(' '),'step-title');
+ const ys=points.map(p=>p.values.y),low=Math.min(0,...ys),span=Math.max(0,...ys)-low||1,yy=v=>bottom-(v-low)/span*(bottom-top);
+ const xs=points.map(p=>p.values.x),xmin=Math.min(...xs),xspan=Math.max(...xs)-xmin||1;
+ const xx=(v,i)=>chart.kind==='bar'?left+(i+.5)*(right-left)/points.length:left+(v-xmin)/xspan*(right-left);
+ group.append(el('line',{x1:left,y1:yy(0),x2:right,y2:yy(0),stroke:'#ccd5c7'}));
+ const marks=el('g',{'data-step-chart':chart.kind});
+ if(chart.kind==='line'){marks.append(el('path',{d:[...points].sort((a,b)=>a.values.x-b.values.x).map((p,i)=>`${i?'L':'M'}${xx(p.values.x,i)} ${yy(p.values.y)}`).join(' '),class:'wire green'}))}
+ points.forEach((p,i)=>{const px=xx(p.values.x,i),py=yy(p.values.y),width=Math.min(30,(right-left)/points.length*.55);marks.append(chart.kind==='bar'?el('rect',{x:px-width/2,y:Math.min(py,yy(0)),width,height:Math.max(2,Math.abs(yy(0)-py)),rx:3,fill:'#91b78e'}):el('circle',{cx:px,cy:py,r:4,fill:'#217757'}));if(chart.kind==='bar'){text(marks,px,py-7,String(p.values.y),'step-value','middle');text(marks,px,bottom+18,p.label,'step-category','middle')}});
+ group.append(marks);text(group,x,y+108,(chart.unit||'Chart')+' \u00b7 '+(chart.basis==='source-example'?'source example':'captured data'),'step-caption','middle')
+}
+function cardArrow(svg,path,node,kind){
+ const length=path.getTotalLength();let position=length,point=path.getPointAtLength(position);
+ while(position>0&&point.x>=node.x-109&&point.x<=node.x+109&&point.y>=node.y-83&&point.y<=node.y+124){position-=2;point=path.getPointAtLength(Math.max(0,position))}
+ const before=path.getPointAtLength(Math.max(0,position-12));svg.append(el('path',{d:`M${before.x} ${before.y}L${point.x} ${point.y}`,class:`wire ${kind}`,'marker-end':`url(#${kind==='green'?'arrowGreen':kind==='orange'?'arrowOrange':'arrow'})`}))
+}
+function resetSelection(){all('[data-node]').forEach(n=>{n.setAttribute('aria-expanded','false');n.setAttribute('aria-controls',drawer.id)})}
+function close(restore=true){drawer.hidden=true;workspace.classList.remove('open');resetSelection();if(restore&&lastFocus?.isConnected)lastFocus.focus({preventScroll:true})}
+function showPanel(title,flow,paragraphs,sources=[],raw,related=[],trigger,chart){lastFocus=trigger||root.ownerDocument.activeElement;content.replaceChildren();$('[data-detail-title]').textContent=title;
+ if(chart){const figure=embeddedChart(chart);figure.prepend(dom('h3',chart.title));content.append(figure)}
+ content.append(dom('h3',flow.title),mini(flow));
+ if(related.length){content.append(dom('h3','Related steps'));const jumps=dom('div',undefined,'detail-jumps');related.forEach(n=>{const b=dom('button');b.dataset.detailTarget=n.id;const icon=el('svg',{viewBox:'0 0 48 48','aria-hidden':true});icon.append(el('use',{href:'#'+n.icon,width:48,height:48,class:'icon'}));b.append(icon,dom('span',n.label.join(' ')));b.onclick=()=>showNode(n.id);jumps.append(b)});content.append(jumps)}
+ const exact=dom('details',undefined,'exact-source');exact.append(dom('summary','Explanation and sources'));paragraphs.forEach(v=>exact.append(dom('p',v)));
+ sources.forEach(s=>{const a=dom('a',`${s.path} \u00b7 lines ${s.line}\u2013${s.end||s.line}`);a.href=s.url;a.target='_blank';a.rel='noopener noreferrer';exact.append(a);if(s.excerpt)exact.append(dom('pre',s.excerpt))});
+ if(raw)exact.append(dom('h3','PR description at capture'),dom('pre',raw));content.append(exact);content.scrollTop=0;drawer.hidden=false;workspace.classList.add('open');$('.close').focus({preventScroll:true})}
+function showNode(id){const s=scenes[active],n=s.nodes.find(n=>n.id===id);resetSelection();const trigger=all('[data-node]').find(g=>g.dataset.node===id);trigger.setAttribute('aria-expanded','true');const neighbors=new Set(s.edges.filter(e=>e.from===id||e.to===id).flatMap(e=>[e.from,e.to]));neighbors.delete(id);showPanel(n.label.join(' '),n.drilldown,n.detail,n.sources,undefined,s.nodes.filter(n=>neighbors.has(n.id)),trigger,n.chart)}
+$('.close').onclick=()=>close();root.addEventListener('keydown',e=>{if(e.key==='Escape'&&!drawer.hidden){e.preventDefault();close()}});
+function chartNode(svg,n,x,y,bar){
+ const g=el('g',{class:'node','data-node':n.id,tabindex:0,role:'button','aria-expanded':'false','aria-controls':drawer.id,'aria-label':`${n.label.join(' ')}: ${n.values.y}`});
+ g.append(el('title',{},`${n.label.join(' ')}: ${n.values.y}. Open source evidence.`));
+ g.append(bar||el('circle',{cx:x,cy:y,r:10,class:'disc green'}));
+ text(g,x,y-18,String(n.values.y),'node-label','middle');
+ if(bar)lines(g,x,768,n.label,'micro','middle',17);
+ const show=()=>showNode(n.id);g.onclick=show;g.onkeydown=e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();show()}};svg.append(g)
+}
+function drawChart(svg,s){
+ const chart=s.chart,isBar=chart.kind==='bar',left=160,right=1300,top=255,bottom=720;
+ const ys=s.nodes.map(n=>n.values.y),low=Math.min(0,...ys),high=Math.max(0,...ys),span=high-low||1;
+ const y=v=>bottom-(v-low)/span*(bottom-top),xs=s.nodes.map((n,i)=>isBar?i:n.values.x),xmin=Math.min(...xs),xspan=Math.max(...xs)-xmin||1;
+ const x=(v,i)=>isBar?left+(i+.5)*(right-left)/s.nodes.length:left+(v-xmin)/xspan*(right-left);
+ for(let i=0;i<=5;i++){const v=low+span*i/5,yy=y(v);svg.append(el('line',{x1:left,y1:yy,x2:right,y2:yy,stroke:'#d5dcd2'}));text(svg,left-18,yy+5,Number(v.toPrecision(4)).toString(),'micro','end')}
+ text(svg,left,214,chart.y_label,'kicker');text(svg,(left+right)/2,818,chart.x_label,'kicker','middle');
+ svg.append(el('line',{x1:left,y1:y(0),x2:right,y2:y(0),stroke:'#17353f','stroke-width':2}));
+ if(!isBar){for(let i=0;i<=5;i++){const v=xmin+xspan*i/5;text(svg,x(v),750,Number(v.toPrecision(4)).toString(),'micro','middle')}}
+ const points=s.nodes.map((n,i)=>({n,x:x(xs[i],i),y:y(n.values.y)}));
+ if(chart.kind==='line'){const sorted=[...points].sort((a,b)=>a.n.values.x-b.n.values.x);svg.append(el('path',{d:sorted.map((p,i)=>`${i?'L':'M'}${p.x} ${p.y}`).join(' '),class:'wire green'}))}
+ points.forEach(p=>{const width=Math.min(150,(right-left)/points.length*.6),bar=isBar?el('rect',{x:p.x-width/2,y:Math.min(p.y,y(0)),width,height:Math.max(2,Math.abs(y(0)-p.y)),rx:5,class:'disc green'}):undefined;chartNode(svg,p.n,p.x,p.y,bar)})
+}
+function draw(index){close(false);active=index;const s=scenes[index];[...tabs.children].forEach((b,i)=>{b.setAttribute('aria-selected',i===index);b.tabIndex=i===index?0:-1});canvas.replaceChildren();const svg=el('svg',{viewBox:'0 0 1440 1020',role:'img','aria-label':`${s.title}. ${s.subtitle}`});const desc=el('desc',{},s.alt);svg.append(desc);const defs=el('defs');defs.innerHTML=icons.replace(/id="([^"]+)"/g,(_,id)=>`id="${prefix}${id}"`);svg.append(defs,el('rect',{width:1440,height:1020,fill:'#f6f5ef'}));text(svg,40,54,s.title,'title');text(svg,42,86,s.subtitle,'subtitle');text(svg,1398,49,`PR #${s.pr.number} \u00b7 ${s.pr.merged?'MERGED':s.pr.state==='closed'?'CLOSED':s.pr.draft?'DRAFT':'OPEN'}`,'kicker','end');
+text(svg,42,128,s.before,'micro');text(svg,42,155,s.after,'micro');text(svg,1398,128,`${s.pr.changed_files} CHANGED FILES`,'kicker','end');
+if(s.chart){drawChart(svg,s)}else{
+(s.groups||[]).forEach(g=>{svg.append(el('rect',{x:g.x,y:g.y,width:g.w,height:g.h,rx:20,class:'group'}));text(svg,g.x+g.w/2,g.y+27,g.label,'panel-label','middle')});
+const chartArrows=[];s.edges.forEach(e=>{const cls=e.kind||'',target=s.nodes.find(n=>n.id===e.to),path=el('path',{d:e.path,class:`wire ${cls}`});if(target.chart)chartArrows.push({path,target,cls});else path.setAttribute('marker-end',`url(#${prefix}${cls==='green'?'arrowGreen':cls==='orange'?'arrowOrange':'arrow'})`);svg.append(path);if(e.label)text(svg,e.x,e.y,e.label,`edge-label ${cls}`,'middle')});
+s.nodes.forEach(n=>{const g=el('g',{class:'node','data-node':n.id,tabindex:0,role:'button','aria-expanded':'false','aria-controls':drawer.id,'aria-label':n.label.join(' ')});g.append(el('title',{},'Open code evidence'));if(n.chart){stepCard(g,n)}else if(n.kind==='decision'){g.append(el('path',{d:`M${n.x} ${n.y-54} L${n.x+62} ${n.y} L${n.x} ${n.y+54} L${n.x-62} ${n.y} Z`,class:'diamond'}));lines(g,n.x,n.y-3,n.label,'node-label','middle',21)}else{g.append(el('circle',{cx:n.x,cy:n.y,r:n.r||43,class:`disc ${n.kind||''}`}));g.append(el('use',{href:`#${n.icon}`,x:n.x-22,y:n.y-22,width:44,height:44,class:'icon'}));lines(g,n.x,n.y+70,n.label,'node-label','middle')}if(n.sub&&!n.chart)lines(g,n.x,n.y+(n.label.length>1?121:99),n.sub,'micro','middle',19);const show=()=>showNode(n.id);g.onclick=show;g.onkeydown=e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();show()}};svg.append(g)});
+chartArrows.forEach(({path,target,cls})=>cardArrow(svg,path,target,cls));
+}
+svg.append(el('line',{x1:40,y1:835,x2:1400,y2:835,stroke:'#d5dcd2','stroke-width':2}));s.notes.forEach((n,i)=>{const x=42+i*455;text(svg,x,876,n.label,'foot-label');lines(svg,x,907,n.text,'foot-text','start',23)});
+const when=new Date(s.pr.observed_at).toLocaleString('en-US',{timeZone:'America/New_York',month:'short',day:'numeric',hour:'numeric',minute:'2-digit'});text(svg,42,991,`Code reviewed \u00b7 ${when} ET \u00b7 ${s.pr.head.slice(0,10)}`,'stamp');text(svg,1398,991,'Click any symbol for code and source links.','micro','end');canvas.append(svg);const a=document.createElement('a');a.className='sr-only';a.href=s.pr.url;a.textContent=`Open PR ${s.pr.number}`;canvas.append(a);setZoom(1,true)}
+
+scenes.forEach((s,i)=>{const b=dom('button');b.dataset.reviewCard=String(i);b.append(dom('span',`PR #${s.pr.number}`,'tab-number'),dom('span',s.tab,'tab-name'));b.id=prefix+`tab-${i}`;b.role='tab';b.setAttribute('aria-controls',canvas.id);b.onclick=()=>draw(i);b.onkeydown=e=>{if(e.key==='ArrowRight'||e.key==='ArrowLeft'){e.preventDefault();const next=(i+(e.key==='ArrowRight'?1:scenes.length-1))%scenes.length;draw(next);tabs.children[next].focus()}};tabs.append(b)});
+function setZoom(value,fit=false){zoom=Math.max(.7,Math.min(2,value));canvas.style.width=fit?'':`${1440*zoom}px`;canvas.style.maxWidth=fit?'1540px':'none'}
+$('[data-plus]').onclick=()=>setZoom(zoom+.2);$('[data-minus]').onclick=()=>setZoom(zoom-.2);$('[data-fit]').onclick=()=>setZoom(1,true);
+$('[data-compare]').onclick=e=>showPanel('Summary vs code',{title:'Compare the claim with the implementation',steps:[{label:['PR','description'],icon:'list'},{label:['Trace the','code'],icon:'code'},{label:['Compare','behavior'],icon:'eye'}]},scenes[active].comparison,[],scenes[active].summary,scenes[active].nodes,e.currentTarget);
+$('[data-review]').onclick=e=>showPanel('Review notes',{title:'Scope and evidence',steps:[{label:['Captured','source'],icon:'ledger'},{label:['Reviewed','path'],icon:'branches'},{label:['Scope and','limitations'],icon:'shield'}]},scenes[active].review,[],undefined,scenes[active].nodes,e.currentTarget);
+draw(0);
+})();
+</script></main></body></html>

package/.agents/skills/pr-visual/fixtures/bar.scene.json

@@ -0,0 +1,193 @@
+{
+  "snapshot": "snapshot.json",
+  "tab": "Bar",
+  "title": "Bar chart with source evidence",
+  "subtitle": "Synthetic fixture: source-backed views of the same data.",
+  "before": "BEFORE: Measurements stored as JSON.",
+  "after": "AFTER: Inspect each sample and its source.",
+  "alt": "Three synthetic samples; click a sample to inspect its captured JSON.",
+  "nodes": [
+    {
+      "id": "sample-0",
+      "x": 300,
+      "y": 430,
+      "label": [
+        "Sample 1"
+      ],
+      "icon": "ledger",
+      "kind": "green",
+      "detail": [
+        "Synthetic fixture data, not a performance claim."
+      ],
+      "sources": [
+        {
+          "path": "metrics.json",
+          "line": 4,
+          "end": 5
+        }
+      ],
+      "drilldown": {
+        "title": "Inspect the recorded measurement",
+        "steps": [
+          {
+            "label": [
+              "Captured",
+              "JSON"
+            ],
+            "icon": "code"
+          },
+          {
+            "label": [
+              "Measured",
+              "duration"
+            ],
+            "icon": "ledger"
+          }
+        ]
+      },
+      "metrics": {
+        "x": {
+          "source": 0,
+          "pointer": "/samples/0/size"
+        },
+        "y": {
+          "source": 0,
+          "pointer": "/samples/0/duration_ms"
+        }
+      }
+    },
+    {
+      "id": "sample-1",
+      "x": 700,
+      "y": 430,
+      "label": [
+        "Sample 2"
+      ],
+      "icon": "ledger",
+      "kind": "green",
+      "detail": [
+        "Synthetic fixture data, not a performance claim."
+      ],
+      "sources": [
+        {
+          "path": "metrics.json",
+          "line": 8,
+          "end": 9
+        }
+      ],
+      "drilldown": {
+        "title": "Inspect the recorded measurement",
+        "steps": [
+          {
+            "label": [
+              "Captured",
+              "JSON"
+            ],
+            "icon": "code"
+          },
+          {
+            "label": [
+              "Measured",
+              "duration"
+            ],
+            "icon": "ledger"
+          }
+        ]
+      },
+      "metrics": {
+        "x": {
+          "source": 0,
+          "pointer": "/samples/1/size"
+        },
+        "y": {
+          "source": 0,
+          "pointer": "/samples/1/duration_ms"
+        }
+      }
+    },
+    {
+      "id": "sample-2",
+      "x": 1100,
+      "y": 430,
+      "label": [
+        "Sample 3"
+      ],
+      "icon": "ledger",
+      "kind": "green",
+      "detail": [
+        "Synthetic fixture data, not a performance claim."
+      ],
+      "sources": [
+        {
+          "path": "metrics.json",
+          "line": 12,
+          "end": 13
+        }
+      ],
+      "drilldown": {
+        "title": "Inspect the recorded measurement",
+        "steps": [
+          {
+            "label": [
+              "Captured",
+              "JSON"
+            ],
+            "icon": "code"
+          },
+          {
+            "label": [
+              "Measured",
+              "duration"
+            ],
+            "icon": "ledger"
+          }
+        ]
+      },
+      "metrics": {
+        "x": {
+          "source": 0,
+          "pointer": "/samples/2/size"
+        },
+        "y": {
+          "source": 0,
+          "pointer": "/samples/2/duration_ms"
+        }
+      }
+    }
+  ],
+  "edges": [],
+  "notes": [
+    {
+      "label": "SOURCE",
+      "text": [
+        "Captured JSON",
+        "Immutable source links"
+      ]
+    },
+    {
+      "label": "INTERACTION",
+      "text": [
+        "Select a sample",
+        "Inspect its source"
+      ]
+    },
+    {
+      "label": "SCOPE",
+      "text": [
+        "Synthetic data only",
+        "No benchmark claim"
+      ]
+    }
+  ],
+  "comparison": [
+    "The fixture description and rendered samples use the same captured JSON."
+  ],
+  "review": [
+    "This fixture checks the renderer, not a PR correctness verdict."
+  ],
+  "chart": {
+    "kind": "bar",
+    "x_label": "Sample size (items)",
+    "y_label": "Duration (ms)"
+  }
+}