feat(agent-plugin): visual pass on the decision-review and decision-board canvases (0.11.0)

.claude-plugin/marketplace.json

@@ -6,14 +6,14 @@
   },
   "metadata": {
     "description": "Decision memory for human- and agent-authored plans.",
-    "version": "0.10.0"
+    "version": "0.11.0"
   },
   "plugins": [
     {
       "name": "adrkit",
       "source": "./packages/adapters/agent-plugin",
       "description": "Load the architecture decisions that govern a change, check work against them, and audit code, documentation, and history for decisions that were never recorded. Ships decision-memory and decision-backfill skills, a read-only decision-checker agent, five slash commands, an advisory adr-review dynamic workflow for GitHub Copilot CLI, and a read-only decision-review canvas for the GitHub Copilot app, all driven by the adr CLI. Ships no MCP server: adrkit's MCP server is configured per project, and the skills use its tools when they are connected.",
-      "version": "0.10.0",
+      "version": "0.11.0",
       "author": {
         "name": "Mark Beacom",
         "url": "https://github.com/mbeacom"

AGENTS.md

@@ -771,7 +771,7 @@ will usually be a regression:
   including a variable whose name ends in `_SECRET_TOKEN`. Its arrival in the
   app, and hook firing in the app, an interactive CLI session, and subagent
   child sessions, are unmeasured.
-- `copilot plugin install` prints only a skill count. Version 0.10.0 should report
+- `copilot plugin install` prints only a skill count. Version 0.11.0 should report
   two skills; that does not inventory the agent or commands — verify them in a
   fresh session.
 
@@ -1016,6 +1016,50 @@ modes are unmeasured there. Load-bearing:
   through `session.log` with the id, kind, identity, and outcome
   (`not-confirmed` included), never the summary.
 
+### Canvas look and feel (0.11.0)
+
+Both canvases share one stylesheet and the board pans and zooms. **Rung 1**:
+unit tests, mutation plants, and headless SDK-host renders in Chrome;
+unmeasured in the Copilot app. Load-bearing:
+
+- **One shared stylesheet, generated from its tokens.** `canvas-theme.mjs`
+  exports `THEME_CSS`, and each page's `/app.css` is that block followed by
+  the page's own rules (no new route). Every colour is an alias that reads the
+  app's injected token first, `var(--background-color-default, var(--ak-bg))`,
+  so theming stays the app's. The `--ak-*` fallbacks come from `THEME_TOKENS`
+  and follow `prefers-color-scheme`; before 0.11.0 a dark render outside the
+  app kept a white page and dark text, and only native form controls followed
+  the system theme. The contrast test reads `THEME_TOKENS`,
+  so a hue changed there is checked at 4.5:1 on the background, the surface,
+  and its own tint, in both themes.
+- **No inline style on either page, tested.** `test/visual-pass.test.ts` fails
+  on a `style` attribute or element in the HTML and on `.style`, `'style'`,
+  `cssText`, `setProperty(`, `insertRule(`, or `CSSStyleSheet` in either
+  script. Sizes are class steps (the graph frame's `h-s` to `h-xl`), never
+  computed styles.
+- **Pan and zoom are pure helpers shipped twice.** `board-view.mjs` exports
+  them for the tests, and `board-page.mjs` embeds the same functions with
+  `Function.prototype.toString`. Each must stay self-contained ES2017 (no
+  imports, no module constants, no closures); a test runs the embedded copies.
+  A view is a `viewBox`, so zooming sets one attribute and rebuilds nothing.
+  Fit means the whole graph, so `fitView` may go below the 0.2 zoom minimum
+  and zooming out stops at that fit, not at 0.2 (review on #282).
+- **Dim the box, never the label.** A dimmed record keeps its text and focus
+  ring at full opacity (0.28 on the whole group puts a muted label at about
+  1.5:1 on the light surface, computed from the fallback tokens),
+  and a clipped title is cut by grapheme, never mid-character.
+- **A drag must not select.** A pointer drag past 4 px sets a flag the record's
+  click handler consumes, and the graph's `+ - 0` and arrow keys ignore events
+  from an input or button.
+- **The confirm step is an attribute, not a class.** `data-step="confirm"`
+  styles step 2 of the review controls, because the review tests find the box
+  by `className === 'review-controls'`. With recording off, the fixed note is
+  shown once above the queue and each disabled control carries it as its
+  description.
+- **Objector names are not shown, because `adr queue` does not report them.**
+  QueueReport v1 carries only the two objection counts; showing who raised each
+  needs a CLI field, not a page change.
+
 ## The OCI container (`ghcr.io/mbeacom/adrkit`)
 
 The OCI image is the fifth distribution surface, authorized by

CHANGELOG.md

@@ -66,6 +66,30 @@ Until `1.0.0`, minor releases may include breaking changes
   nothing, an accept wrote it, and a quick second click was rate-limited.
   Object, Resolve, and the app's autonomous modes are not yet measured there.
 
+### Changed
+
+- **The agent plugin's two Copilot app canvases get a visual pass (`adrkit`
+  0.11.0).** Function, routes, actions, the payload, and the
+  Content-Security-Policy are unchanged.
+  - Both pages share one stylesheet. Colours still come from the app's tokens
+    first; the built-in fallbacks now follow the system's light or dark
+    setting, where before every render outside the app was light. Text
+    colours meet 4.5:1 in both themes, checked by a test.
+  - Status is never colour alone: every badge has a symbol and its word.
+  - `decision-review` shows each governing decision as a card with its
+    status, verdict, and provenance (the `affects` pattern, or the marker's
+    file and line) in view; findings grouped by severity; notes collapsed; the
+    review cost in plain words under the button; and distinct loading, empty,
+    and error states.
+  - `decision-board` pans and zooms (drag, Ctrl or Cmd with the wheel, the
+    buttons, or `+`, `-`, `0`, and the arrows), dims everything but the
+    selected record's neighbors, and shows approvals as dots against the
+    quorum and objections as two labelled counts. The review controls label
+    their three steps, and with recording off one note above the list says
+    why. Objector names are not shown, because `adr queue` reports counts only.
+  - Rendered from a headless Copilot CLI 1.0.93 SDK host in Chrome at 900 and
+    420 px, light and dark, with no model calls; unmeasured in the Copilot app.
+
 ### Fixed
 
 - **Docs: the Spec Kit install command, the command names, and the checkout pin

docs/reference-verification-agent-plugin.md

@@ -1345,6 +1345,60 @@ recorded because they affect anyone testing a local build in the app.
   Each board allows one write at a time, but separate processes are not
   serialized, as ADR-0051 accepts for the CLI.
 
+## v0.11.0 canvas visual pass (2026-10-10)
+
+A presentation pass on `decision-review` and `decision-board`: one shared
+stylesheet (`canvas-theme.mjs`), light and dark fallbacks, badges with a
+symbol and a word, and pan and zoom on the board graph (`board-view.mjs`).
+Routes, actions, the payload, and the Content-Security-Policy are unchanged.
+
+### Headless renders (Copilot CLI 1.0.93 SDK host, Chrome 154 headless, no model calls)
+
+Each canvas was opened through `createSession({ pluginDirectories,
+requestCanvasRenderer: true, requestExtensions: true })` with no prompt sent and
+no `run_review`, and its page URL captured in Chrome over the DevTools protocol
+at 900 and 420 px wide, with `prefers-color-scheme` light and dark. Corpora:
+this repository's `docs/adr` (52 records, 255 relationships), a five-record
+fixture with a proposed record carrying two approvals of a quorum of three, one
+open and one resolved objection, and an SLA deadline, a 320-record synthetic
+corpus (past the 300-record budget), and a copy of the `adrkit-demo` corpus.
+
+| # | Surface | State | Result |
+|---|---|---|---|
+| V1 | review | governing records, before a review | Cards with status badge and provenance chips (`affects path: src/cache/**`, `marker src/cache/ttl.ts:1 names 0003`); cost line under the button |
+| V2 | review | stale-marker finding | Findings grouped, `Warnings (1)` |
+| V3 | review | no changed files | Distinct empty state; Run review disabled with its reason |
+| V4 | review | session directory outside a git work tree | `usage-error`; the fixed not-a-work-tree note shown open in a red callout, not repeated under Notes |
+| V5 | review | loading (state request held) | Spinner and "Reading the change and running adr check…" |
+| V6 | board | 52-record graph | Opens at the top at 0.6 scale (the whole graph would be smaller); edges at reduced weight; zoom bar and keyboard hint |
+| V7 | board | 320 records | Summary: status counts as badges, focus form |
+| V8 | board | a record focused | Neighbors bright, the rest dimmed; detail pane with status badge |
+| V9 | board | queue row selected | Approvals as dots (2 of 3), `1 unresolved` and `1 resolved` badges, SLA badge and deadline |
+| V10 | board | recording off (headless host has no elicitation) | All three controls disabled; one note above the list; each control carries it as its description |
+| V11 | both | dark vs light | All 36 after pairs differ, with dark page colours. In the 34 baseline pairs the dark render kept a white page and dark text: 16 were byte-identical, and the rest differed only in native form controls and timestamps |
+| V12 | board | viewport changed after load (900 to 420 px, through the chrome-devtools MCP) | The untouched graph re-opened for the new width: `viewBox` `0 -106.84 776 377.69` at 489 px, then `0 -116.33 588.33 396.67` at 353 px (0.6 scale). Before the fix, a change after load left a stale 0.39 scale |
+
+The finished review (verdicts `consistent` and `conflicts`), the enabled review
+controls, and the confirm step cannot be reached in the headless host, which
+has no completed run and no elicitation. Those three were rendered by a stub
+server that serves the shipped page strings with the real security headers and
+a snapshot captured from the host, with only `review` replaced: the confirm
+step shows "Step 2 of 3" in its own highlighted box and names step 3, the
+host's dialog. The chrome-devtools MCP was used for a spot check of keyboard
+order and accessible names on the fixture board.
+
+Screenshots, before and after, are kept with the track's working notes, not in
+the repository.
+
+### Not verified
+
+- **Any of this in the Copilot app.** The app injects its own theme tokens,
+  which replace the fallback colours, so the app's contrast is the app's.
+- Pan and zoom with a real trackpad pinch in the app's webview. A plain wheel
+  is left to scroll the panel, by design and by test; only Ctrl or Cmd with
+  the wheel zooms.
+- The enabled review controls and the confirm step outside the stub server.
+
 ## Verdict
 
 The plugin's six components load on Copilot CLI and function correctly against a

packages/adapters/agent-plugin/.claude-plugin/plugin.json

@@ -2,7 +2,7 @@
   "$schema": "https://json.schemastore.org/claude-code-plugin-manifest.json",
   "name": "adrkit",
   "displayName": "adrkit — decision memory",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Load the architecture decisions governing a change, check plans against them, audit existing code and documentation for missing decisions, draft new records deliberately, and (in GitHub Copilot CLI) run an advisory adr-review workflow, and open a read-only decision-review canvas in the GitHub Copilot app — driven by the adr CLI.",
   "author": {
     "name": "Mark Beacom",