diff --git a/docs/design/artboards/d215/README.md b/docs/design/artboards/d215/README.md index 51a4beaab..dbab5e0a5 100644 --- a/docs/design/artboards/d215/README.md +++ b/docs/design/artboards/d215/README.md @@ -3,6 +3,8 @@ The spec for D215 (artboard v2). Open `index.html` in a browser. The toggle at the top switches it between light and dark, and every D215 surface has a frame at 1440 and at 390. - `index.html` holds the before shots and live mocks for seven surfaces: sidebar, pod chat, task board, agent memory, agent settings, settings and connectors. The mock's names, messages and task titles are neutral samples. Counts and times come from the captures. +- A second block under agent settings draws the states of that page (policy and machine, identity edit, connector grants, runtime with the model and effort selects, own API key) at 1440 and 390. The runtime and key frames follow V2RuntimeControls and V2AgentProviderKey, including the stored-model refusal and the key-save error. Those frames carry `data-state`, so `measure_after.js` skips them and `targets.json` does not move. +- A block under Settings draws the free-plan Plan row and the administrator-only Administration group (`data-state="admin-free"`, 1440 and 390, also skipped by the scorer). - The theme switch (sun / moon, D224) sits in the rail above the avatar at 1440. At 390 there is no rail, so the same switch rides the Pods top bar, left of Search. It is a two-item segment: the item for the theme in effect is the white key. - `before/` holds prod captures from 2026-10-31, blurred so they show layout and density only. - `targets.json` holds the helper-word and scroll targets per frame. `cap/measure_after.js` writes it from `index.html`. diff --git a/docs/design/artboards/d215/cap/measure_after.js b/docs/design/artboards/d215/cap/measure_after.js index 37bb4d7f8..5f7ed4802 100644 --- a/docs/design/artboards/d215/cap/measure_after.js +++ b/docs/design/artboards/d215/cap/measure_after.js @@ -62,7 +62,7 @@ async function artboard() { await p.waitForTimeout(800); const res = await p.evaluate(() => { const out = {}; - document.querySelectorAll('.frame').forEach(f => { + document.querySelectorAll('.frame:not([data-state])').forEach(f => { const app = f.querySelector('.app'); f.style.setProperty('--s', 1); f.style.overflow = 'visible'; f.style.aspectRatio = 'auto'; f.style.height = app.offsetHeight + 'px'; f.style.width = app.offsetWidth + 'px'; f.style.maxWidth = 'none'; let words = 0; const w = document.createTreeWalker(app, NodeFilter.SHOW_TEXT); diff --git a/docs/design/artboards/d215/index.html b/docs/design/artboards/d215/index.html index 9d0e11eab..da0f1f67a 100644 --- a/docs/design/artboards/d215/index.html +++ b/docs/design/artboards/d215/index.html @@ -355,6 +355,10 @@ details.disc > summary .chev { color: var(--ph); transition: transform 160ms; } details.disc[open] > summary .chev { transform: rotate(180deg); } .dbody { padding: 0 16px 14px 210px; display: grid; gap: 8px; } +#s-agent-states details.disc > summary .lb { font-size: 13px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; } +#s-agent-states details.disc > summary .lb svg.i { width: 16px; height: 16px; color: var(--se); } +#s-agent-states details.disc > summary .vl { font-size: 13.5px; color: var(--ink2); min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } +#s-agent-states details.disc > summary .vl .mo { font-size: 12px; color: var(--mu); } .field { height: 34px; border-radius: 9px; background: var(--p); box-shadow: inset 0 0 0 1px var(--b); display: flex; align-items: center; padding: 0 10px; font-size: 13.5px; color: var(--ink); gap: 8px; min-width: 0; } .field .mu { font-size: 12px; } .sel { height: 28px; border-radius: 8px; background: var(--sf); box-shadow: inset 0 0 0 1px var(--b); display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 10px; font-size: 12.5px; color: var(--ink2); white-space: nowrap; } @@ -966,6 +970,25 @@