@asrunjs/asrun 0.6.0 → 0.7.0

package/.claude/settings.json

@@ -1,5 +1,5 @@
-{
-  "sandbox": {
-    "excludedCommands": ["pnpm asrun *", "pnpm status *", "pnpm heal:evidence *", "tail *", "head *"]
-  }
-}
+{
+  "sandbox": {
+    "excludedCommands": ["pnpm asrun *", "pnpm status *", "pnpm heal:evidence *", "tail *", "head *"]
+  }
+}

package/.claude/skills/exploring-cases/references/assertion-targets.md

@@ -1,103 +1,103 @@
-# Assertion targets: never guess what a check looks at
-
-Shared by `exploring-cases`, `generating-specs` and healing. It is binding in all three.
-
-A check that looks at an image, a logo, a file, a piece of text or a place on the page must say **exactly which one**.
-"The logo", "the header", "the first image" are not targets. A spec built on a guessed target passes or fails for
-the wrong reason: a baseline once saved a content image instead of a logo, and a composer check once looked at a
-close icon instead of the logo.
-
-**When in doubt, ask. Never pick.** A wrong guess that passes is worse than a question.
-
-## The target card
-Every such check gets a card in the case, under `## Targets` (after `## Visual checks`). The checks refer to it as
-`[T1]`, `[T2]`, ... (in "Expected", "Visual checks" and in steps).
-
-```
-## Targets
-### T1 Preview logo
-- What: the product logo (the ACME wordmark), not the avatar or a content image.
-- Where: top-right corner of the preview page (`/preview/view/documents/...`).
-- Identified by: the image with alt text "<observed alt>" inside the page header region (role and name, or test id; never `.first()`).
-- Not: any element that shows item data (images, amounts, "Content #1").
-- Ready when: the image is visible and its natural width is above 0.
-- Reference example-staging: .explore/targets/documents/published-flow/T1-example-staging.png
-- Reference example-production: .explore/targets/documents/published-flow/T1-example-production.png
-```
-
-Fields:
-- `What` (required): the thing itself, in words a QA person agrees with. Say what it is and, when a look-alike
-  exists on the page, what it is not.
-- `Where` (required): the region of the page, dialog, tab or file page.
-- `Identified by` (required): how it is told apart from every look-alike: role and accessible name, test id (`data-tn`),
-  alt text, `title`, or an anchor element and a relation to it. Never a position (`.first()`, `.nth()`, "the first
-  image") unless the case's author wrote that exact rule (then quote them).
-- `Not` (recommended): the look-alikes that must not be matched. It is what `/gen-spec` and a reviewer check a baseline against.
-- `Ready when` (required when the content loads after an action): see `readiness.md`.
-- For a PDF or another multi-page file, also `Pages` (`all`, `first`, `last`, `1, 3`, plus the case's own words when it limits
-  the pages: see "Which pages are checked" in `readiness.md`; the default is every page) and `Region` (a corner or a box,
-  as fractions of the page: `top-left 30% x 12%`). Text that must or must not appear goes under `What` / `Not`.
-- `Reference <profile-id>` (one per profile explored): a screenshot of the page with the target outlined
-  (`browser_highlight`, then `browser_take_screenshot`), saved under `.explore/targets/<case-id>/T<n>-<profile-id>.png`.
-  `.explore/` is git-ignored, because the pages are logged in. Write `none: <reason>` when it could not be taken.
-  A reference is evidence for the reader; it is never a test baseline.
-
-`pnpm case:check` fails on a card without What/Where/Identified by and warns on a check about an image, logo, file,
-screenshot or PDF that has no `[T<n>]`.
-
-## Which checks need a card
-Any check whose words include logo, image, icon, photo, screenshot, PDF, file, download, color, or "shows <profile>", and
-every check that gets a screenshot baseline or an image/hash comparison. Text checks need a card when the text can
-occur more than once on the page (a product name in a header and in a footer).
-
-## When to ask (a `🚫 TODO [blocking]` block, not a guess)
-Ask instead of choosing when ANY of these is true:
-1. **More than one candidate** matches the description (two logos, a logo and a watermark, several images with alt text).
-2. **The only way to find it is by position** (`.first()`, `.nth()`, "the image at the top").
-3. **The only locator is generic**: `img`, `svg`, `img, svg`, `[alt]`, a CSS class chain.
-4. **The area contains dynamic data**: rows, prices, dates, avatars, counts. A screenshot of it is never stable.
-5. **It has no stable identity**: no alt, title, name or test id, so a rename or a reorder silently changes what is checked.
-6. **The case says something different from the page** (the case says "top-right corner", the page has the logo top-left).
-7. **It could not be opened or seen** in this run (a dialog, a file, a tab that needs data that is gone).
-8. **A value is unknown** for a profile (no entry in the case's `## Values`), or the profiles differ where the case
-   says "same".
-
-The question names the exact thing wanted: image, text, place or UI element. Write it like this, with the candidates
-as evidence, so the person answers by pointing:
-
-```
-- The preview shows the product logo in its top-right corner [T1].
-  - 🚫 TODO [blocking]: Which element is the logo? Candidates on example-staging: (a) the image with alt "Example" in the page header, (b) the first content image "Content #1", (c) the avatar. (candidates highlighted in .explore/targets/documents/published-flow/T1-candidates-example-staging.png)
-    - ✍️ Answer:
-```
-
-The parent sentence is the guess, so a `[blocking]` card is never turned into a check. `/gen-spec` writes
-`test.fixme(true, '<the question>')` for it.
-
-In an **attended** run, do not write the question first: ask the person to outline the target in the browser with
-`browser_annotate`, then write the card from the annotation (the annotated screenshot is the Reference).
-
-## How a card is made (exploring)
-1. Find every candidate: `browser_find` / `browser_snapshot`, and count them. Do not stop at the first match.
-2. Decide with the rules above: exactly one candidate with a stable identity and no dynamic data means a card;
-   anything else means a question.
-3. Outline the target with `browser_highlight`, take the screenshot to `.explore/targets/...`, then `browser_hide_highlight`.
-4. **Look at the screenshot** (read the image file) and say in the card what it shows. If it shows something other than
-   the card's `What` (a content image instead of a logo), the card is wrong: fix it before going on. This is the step that
-   would have caught the wrong baseline.
-5. Do this for every profile that has an entry in the case's `## Values`. A target that differs between profiles is not
-   settled: write a `[blocking]` question instead of encoding one profile's locator as if it held for all.
-
-## What the spec does with a card (generating)
-- The check is written against `Identified by`, and the line before it is `// target: T<n>`. `pnpm spec:lint` fails a
-  screenshot, a logo/image locator or a position pick that has no target comment.
-- A semantic assertion always comes before a pixel one: the element's alt/title/src or role matches, and it is where
-  `Where` says, then `toHaveScreenshot` on that element only.
-- A card with `Not:` gets a check that the matched element is not one of those (for example it shows no item text).
-- Screenshot only elements without dynamic data. If the target card cannot give such an element, it is a question.
-
-## What healing does with a card
-Before deciding "product changed" or "test is wrong", check **the assertion itself**: does the locator still point to
-what the card's `What` says? Open the baseline and the failure screenshot and compare each with the card. A baseline
-that shows something else is a test bug: delete it and report it (a person creates the new one). A card that no longer
-matches the page is a question for the person, not something to rewrite quietly.
+# Assertion targets: never guess what a check looks at
+
+Shared by `exploring-cases`, `generating-specs` and healing. It is binding in all three.
+
+A check that looks at an image, a logo, a file, a piece of text or a place on the page must say **exactly which one**.
+"The logo", "the header", "the first image" are not targets. A spec built on a guessed target passes or fails for
+the wrong reason: a baseline once saved a content image instead of a logo, and a composer check once looked at a
+close icon instead of the logo.
+
+**When in doubt, ask. Never pick.** A wrong guess that passes is worse than a question.
+
+## The target card
+Every such check gets a card in the case, under `## Targets` (after `## Visual checks`). The checks refer to it as
+`[T1]`, `[T2]`, ... (in "Expected", "Visual checks" and in steps).
+
+```
+## Targets
+### T1 Preview logo
+- What: the product logo (the ACME wordmark), not the avatar or a content image.
+- Where: top-right corner of the preview page (`/preview/view/documents/...`).
+- Identified by: the image with alt text "<observed alt>" inside the page header region (role and name, or test id; never `.first()`).
+- Not: any element that shows item data (images, amounts, "Content #1").
+- Ready when: the image is visible and its natural width is above 0.
+- Reference example-staging: .explore/targets/documents/published-flow/T1-example-staging.png
+- Reference example-production: .explore/targets/documents/published-flow/T1-example-production.png
+```
+
+Fields:
+- `What` (required): the thing itself, in words a QA person agrees with. Say what it is and, when a look-alike
+  exists on the page, what it is not.
+- `Where` (required): the region of the page, dialog, tab or file page.
+- `Identified by` (required): how it is told apart from every look-alike: role and accessible name, test id (`data-tn`),
+  alt text, `title`, or an anchor element and a relation to it. Never a position (`.first()`, `.nth()`, "the first
+  image") unless the case's author wrote that exact rule (then quote them).
+- `Not` (recommended): the look-alikes that must not be matched. It is what `/gen-spec` and a reviewer check a baseline against.
+- `Ready when` (required when the content loads after an action): see `readiness.md`.
+- For a PDF or another multi-page file, also `Pages` (`all`, `first`, `last`, `1, 3`, plus the case's own words when it limits
+  the pages: see "Which pages are checked" in `readiness.md`; the default is every page) and `Region` (a corner or a box,
+  as fractions of the page: `top-left 30% x 12%`). Text that must or must not appear goes under `What` / `Not`.
+- `Reference <profile-id>` (one per profile explored): a screenshot of the page with the target outlined
+  (`browser_highlight`, then `browser_take_screenshot`), saved under `.explore/targets/<case-id>/T<n>-<profile-id>.png`.
+  `.explore/` is git-ignored, because the pages are logged in. Write `none: <reason>` when it could not be taken.
+  A reference is evidence for the reader; it is never a test baseline.
+
+`pnpm case:check` fails on a card without What/Where/Identified by and warns on a check about an image, logo, file,
+screenshot or PDF that has no `[T<n>]`.
+
+## Which checks need a card
+Any check whose words include logo, image, icon, photo, screenshot, PDF, file, download, color, or "shows <profile>", and
+every check that gets a screenshot baseline or an image/hash comparison. Text checks need a card when the text can
+occur more than once on the page (a product name in a header and in a footer).
+
+## When to ask (a `🚫 TODO [blocking]` block, not a guess)
+Ask instead of choosing when ANY of these is true:
+1. **More than one candidate** matches the description (two logos, a logo and a watermark, several images with alt text).
+2. **The only way to find it is by position** (`.first()`, `.nth()`, "the image at the top").
+3. **The only locator is generic**: `img`, `svg`, `img, svg`, `[alt]`, a CSS class chain.
+4. **The area contains dynamic data**: rows, prices, dates, avatars, counts. A screenshot of it is never stable.
+5. **It has no stable identity**: no alt, title, name or test id, so a rename or a reorder silently changes what is checked.
+6. **The case says something different from the page** (the case says "top-right corner", the page has the logo top-left).
+7. **It could not be opened or seen** in this run (a dialog, a file, a tab that needs data that is gone).
+8. **A value is unknown** for a profile (no entry in the case's `## Values`), or the profiles differ where the case
+   says "same".
+
+The question names the exact thing wanted: image, text, place or UI element. Write it like this, with the candidates
+as evidence, so the person answers by pointing:
+
+```
+- The preview shows the product logo in its top-right corner [T1].
+  - 🚫 TODO [blocking]: Which element is the logo? Candidates on example-staging: (a) the image with alt "Example" in the page header, (b) the first content image "Content #1", (c) the avatar. (candidates highlighted in .explore/targets/documents/published-flow/T1-candidates-example-staging.png)
+    - ✍️ Answer:
+```
+
+The parent sentence is the guess, so a `[blocking]` card is never turned into a check. `/gen-spec` writes
+`test.fixme(true, '<the question>')` for it.
+
+In an **attended** run, do not write the question first: ask the person to outline the target in the browser with
+`browser_annotate`, then write the card from the annotation (the annotated screenshot is the Reference).
+
+## How a card is made (exploring)
+1. Find every candidate: `browser_find` / `browser_snapshot`, and count them. Do not stop at the first match.
+2. Decide with the rules above: exactly one candidate with a stable identity and no dynamic data means a card;
+   anything else means a question.
+3. Outline the target with `browser_highlight`, take the screenshot to `.explore/targets/...`, then `browser_hide_highlight`.
+4. **Look at the screenshot** (read the image file) and say in the card what it shows. If it shows something other than
+   the card's `What` (a content image instead of a logo), the card is wrong: fix it before going on. This is the step that
+   would have caught the wrong baseline.
+5. Do this for every profile that has an entry in the case's `## Values`. A target that differs between profiles is not
+   settled: write a `[blocking]` question instead of encoding one profile's locator as if it held for all.
+
+## What the spec does with a card (generating)
+- The check is written against `Identified by`, and the line before it is `// target: T<n>`. `pnpm spec:lint` fails a
+  screenshot, a logo/image locator or a position pick that has no target comment.
+- A semantic assertion always comes before a pixel one: the element's alt/title/src or role matches, and it is where
+  `Where` says, then `toHaveScreenshot` on that element only.
+- A card with `Not:` gets a check that the matched element is not one of those (for example it shows no item text).
+- Screenshot only elements without dynamic data. If the target card cannot give such an element, it is a question.
+
+## What healing does with a card
+Before deciding "product changed" or "test is wrong", check **the assertion itself**: does the locator still point to
+what the card's `What` says? Open the baseline and the failure screenshot and compare each with the card. A baseline
+that shows something else is a test bug: delete it and report it (a person creates the new one). A card that no longer
+matches the page is a question for the person, not something to rewrite quietly.

package/.claude/skills/exploring-cases/references/handoff-card.js

@@ -1,128 +1,128 @@
-async (page) => {
-  // Floating "YOUR TURN" card for a handoff to a person. Do not copy, shorten or rewrite this file: load it with
-  // browser_run_code_unsafe({filename}) after setting the options (see user-handoff.md, "The wait loop").
-  const ctx = page.context();
-  const cfg = ctx.__handoffCfg || {};
-  const message = cfg.message || 'Do the step, then press Done';
-  const copy = Array.isArray(cfg.copy) ? cfg.copy : [];
-  const doneText = cfg.doneText || null;
-  const maxMs = cfg.maxMs || 600000;
-  await ctx.grantPermissions(['clipboard-read', 'clipboard-write']).catch(() => {});
-
-  const paint = (p) => p.evaluate(({message, copy}) => {
-    if (document.getElementById('__ASRUN_panel')) return;
-    const KEY = '__ASRUN_panel_state';
-    let state = {minimized: false, left: null, top: null};
-    try { state = {...state, ...JSON.parse(sessionStorage.getItem(KEY) || '{}')}; } catch (e) {}
-    const save = () => { try { sessionStorage.setItem(KEY, JSON.stringify(state)); } catch (e) {} };
-    const icon = (body) => '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + body + '</svg>';
-    const ICON = {
-      copy: icon('<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>'),
-      check: icon('<polyline points="20 6 9 17 4 12"/>'),
-      up: icon('<polyline points="18 15 12 9 6 15"/>'),
-      down: icon('<polyline points="6 9 12 15 18 9"/>'),
-      move: icon('<polyline points="5 9 2 12 5 15"/><polyline points="9 5 12 2 15 5"/><polyline points="15 19 12 22 9 19"/><polyline points="19 9 22 12 19 15"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="12" y1="2" x2="12" y2="22"/>'),
-    };
-    const host = document.createElement('div');
-    host.id = '__ASRUN_panel';
-    host.style.cssText = 'all:initial;position:fixed;z-index:2147483647;left:16px;bottom:16px';
-    const root = host.attachShadow({mode: 'open'});
-    root.innerHTML = '<style>' +
-      '.card{width:300px;max-width:calc(100vw - 32px);background:#1e3340;color:#fff;font:13px/1.4 system-ui,sans-serif;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.35);overflow:hidden}' +
-      '.card.min{width:auto}.card.ok{background:#15803d}' +
-      '.bar{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 12px;background:#b45309;cursor:grab;user-select:none;touch-action:none}' +
-      '.ok .bar{background:#166534;align-items:flex-start;padding-top:9px}.bar b{flex:1;min-width:0;font-size:12px;letter-spacing:.04em;white-space:nowrap}.ok .bar b{white-space:normal;line-height:1.35}.grip{display:inline-flex;opacity:.8}' +
-      'button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,.18);color:#fff;font:600 12px system-ui,sans-serif}' +
-      'button:hover{background:rgba(255,255,255,.3)}' +
-      '.body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}.min .body,.ok .body{display:none}' +
-      '.mini-done{display:none}.min .mini-done{display:inline-flex}' +
-      '.chip{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.28);padding:4px 4px 4px 8px;border-radius:4px}' +
-      '.chip span{flex:1;font:12px ui-monospace,Menlo,monospace;word-break:break-all;user-select:all}' +
-      '.row{display:flex;gap:8px}.row .primary{background:#15803d}.row .primary:hover{background:#16a34a}' +
-      '</style>' +
-      '<div class="card" id="card"><div class="bar" id="bar" title="Drag to move"><span class="grip">' + ICON.move + '</span><b id="title">YOUR TURN</b>' +
-      '<button class="mini-done" data-a="done">Done</button><button id="toggle" title="Minimize or expand" aria-label="Minimize or expand"></button></div>' +
-      '<div class="body"><div id="msg"></div><div id="chips"></div><div class="row">' +
-      '<button class="primary" data-a="done">Done</button><button data-a="skip">Cannot do this</button></div></div></div>';
-    const card = root.getElementById('card'), bar = root.getElementById('bar'), toggle = root.getElementById('toggle');
-    root.getElementById('msg').textContent = message;
-    const chips = root.getElementById('chips');
-    chips.style.cssText = 'display:' + (copy.length ? 'flex' : 'none') + ';flex-direction:column;gap:6px';
-    for (const text of copy) {
-      const chip = document.createElement('div');
-      chip.className = 'chip';
-      chip.innerHTML = '<span></span><button aria-label="Copy to clipboard" title="Copy">' + ICON.copy + '</button>';
-      chip.firstChild.textContent = text;
-      const btn = chip.lastChild;
-      btn.addEventListener('click', async () => {
-        try { await navigator.clipboard.writeText(text); } catch (e) {
-          const area = document.createElement('textarea');
-          area.value = text; area.style.cssText = 'position:fixed;opacity:0';
-          document.body.appendChild(area); area.select(); document.execCommand('copy'); area.remove();
-        }
-        btn.innerHTML = ICON.check + 'Copied';
-        setTimeout(() => { btn.innerHTML = ICON.copy; }, 1200);
-      });
-      chips.appendChild(chip);
-    }
-    const apply = () => {
-      card.classList.toggle('min', state.minimized);
-      toggle.innerHTML = state.minimized ? ICON.up : ICON.down;
-      root.getElementById('title').textContent = state.minimized ? 'YOUR TURN' : 'YOUR TURN: control is yours';
-    };
-    const place = () => {
-      if (state.left === null) return;
-      const r = host.getBoundingClientRect();
-      const left = Math.max(0, Math.min(innerWidth - Math.min(r.width, 80), state.left));
-      const top = Math.max(0, Math.min(innerHeight - 36, state.top));
-      host.style.left = left + 'px'; host.style.top = top + 'px'; host.style.bottom = 'auto';
-    };
-    root.addEventListener('mousedown', (e) => { if (e.target.closest('button')) e.preventDefault(); });
-    root.addEventListener('click', (e) => { const a = e.target.closest('[data-a]'); if (a) window.__handoff = a.dataset.a; });
-    toggle.addEventListener('click', () => { state.minimized = !state.minimized; save(); apply(); place(); });
-    let drag = null;
-    bar.addEventListener('pointerdown', (e) => {
-      if (e.target.closest('button')) return;
-      const r = host.getBoundingClientRect();
-      drag = {dx: e.clientX - r.left, dy: e.clientY - r.top};
-      bar.setPointerCapture(e.pointerId); bar.style.cursor = 'grabbing';
-    });
-    bar.addEventListener('pointermove', (e) => {
-      if (!drag) return;
-      state.left = e.clientX - drag.dx; state.top = e.clientY - drag.dy; place();
-    });
-    bar.addEventListener('pointerup', () => { drag = null; bar.style.cursor = 'grab'; save(); });
-    host.__finish = () => {
-      card.classList.remove('min'); card.classList.add('ok');
-      toggle.style.display = 'none';
-      root.getElementById('title').textContent = 'Done: control is back with Playwright. Do not touch the page.';
-      setTimeout(() => host.remove(), 2000);
-    };
-    apply();
-    document.documentElement.appendChild(host);
-    place();
-    if (!document.title.startsWith('YOUR TURN | ')) document.title = 'YOUR TURN | ' + document.title;
-  }, {message, copy}).catch(() => {});
-
-  for (const p of ctx.pages()) await p.evaluate(() => { window.__handoff = null; }).catch(() => {});
-  const started = Date.now();
-  let outcome = null;
-  while (!outcome && Date.now() - started < maxMs) {
-    for (const p of ctx.pages()) {
-      await paint(p);
-      const flag = await p.evaluate(() => window.__handoff || null).catch(() => null);
-      if (flag) outcome = flag;
-      else if (doneText && await p.getByText(doneText).first().isVisible().catch(() => false)) outcome = 'condition';
-    }
-    if (!outcome) await page.waitForTimeout(500);
-  }
-  for (const p of ctx.pages()) {
-    await p.evaluate(() => {
-      document.getElementById('__ASRUN_panel')?.__finish();
-      document.title = document.title.replace(/^YOUR TURN \| /, '');
-    }).catch(() => {});
-  }
-  await page.waitForTimeout(2300);
-  for (const p of ctx.pages()) await p.evaluate(() => sessionStorage.removeItem('__ASRUN_panel_state')).catch(() => {});
-  return {outcome: outcome || 'timeout', waitedMs: Date.now() - started};
-}
+async (page) => {
+  // Floating "YOUR TURN" card for a handoff to a person. Do not copy, shorten or rewrite this file: load it with
+  // browser_run_code_unsafe({filename}) after setting the options (see user-handoff.md, "The wait loop").
+  const ctx = page.context();
+  const cfg = ctx.__handoffCfg || {};
+  const message = cfg.message || 'Do the step, then press Done';
+  const copy = Array.isArray(cfg.copy) ? cfg.copy : [];
+  const doneText = cfg.doneText || null;
+  const maxMs = cfg.maxMs || 600000;
+  await ctx.grantPermissions(['clipboard-read', 'clipboard-write']).catch(() => {});
+
+  const paint = (p) => p.evaluate(({message, copy}) => {
+    if (document.getElementById('__ASRUN_panel')) return;
+    const KEY = '__ASRUN_panel_state';
+    let state = {minimized: false, left: null, top: null};
+    try { state = {...state, ...JSON.parse(sessionStorage.getItem(KEY) || '{}')}; } catch (e) {}
+    const save = () => { try { sessionStorage.setItem(KEY, JSON.stringify(state)); } catch (e) {} };
+    const icon = (body) => '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' + body + '</svg>';
+    const ICON = {
+      copy: icon('<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>'),
+      check: icon('<polyline points="20 6 9 17 4 12"/>'),
+      up: icon('<polyline points="18 15 12 9 6 15"/>'),
+      down: icon('<polyline points="6 9 12 15 18 9"/>'),
+      move: icon('<polyline points="5 9 2 12 5 15"/><polyline points="9 5 12 2 15 5"/><polyline points="15 19 12 22 9 19"/><polyline points="19 9 22 12 19 15"/><line x1="2" y1="12" x2="22" y2="12"/><line x1="12" y1="2" x2="12" y2="22"/>'),
+    };
+    const host = document.createElement('div');
+    host.id = '__ASRUN_panel';
+    host.style.cssText = 'all:initial;position:fixed;z-index:2147483647;left:16px;bottom:16px';
+    const root = host.attachShadow({mode: 'open'});
+    root.innerHTML = '<style>' +
+      '.card{width:300px;max-width:calc(100vw - 32px);background:#1e3340;color:#fff;font:13px/1.4 system-ui,sans-serif;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.35);overflow:hidden}' +
+      '.card.min{width:auto}.card.ok{background:#15803d}' +
+      '.bar{display:flex;align-items:center;gap:8px;padding:7px 8px 7px 12px;background:#b45309;cursor:grab;user-select:none;touch-action:none}' +
+      '.ok .bar{background:#166534;align-items:flex-start;padding-top:9px}.bar b{flex:1;min-width:0;font-size:12px;letter-spacing:.04em;white-space:nowrap}.ok .bar b{white-space:normal;line-height:1.35}.grip{display:inline-flex;opacity:.8}' +
+      'button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:3px 8px;border-radius:4px;background:rgba(255,255,255,.18);color:#fff;font:600 12px system-ui,sans-serif}' +
+      'button:hover{background:rgba(255,255,255,.3)}' +
+      '.body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}.min .body,.ok .body{display:none}' +
+      '.mini-done{display:none}.min .mini-done{display:inline-flex}' +
+      '.chip{display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.28);padding:4px 4px 4px 8px;border-radius:4px}' +
+      '.chip span{flex:1;font:12px ui-monospace,Menlo,monospace;word-break:break-all;user-select:all}' +
+      '.row{display:flex;gap:8px}.row .primary{background:#15803d}.row .primary:hover{background:#16a34a}' +
+      '</style>' +
+      '<div class="card" id="card"><div class="bar" id="bar" title="Drag to move"><span class="grip">' + ICON.move + '</span><b id="title">YOUR TURN</b>' +
+      '<button class="mini-done" data-a="done">Done</button><button id="toggle" title="Minimize or expand" aria-label="Minimize or expand"></button></div>' +
+      '<div class="body"><div id="msg"></div><div id="chips"></div><div class="row">' +
+      '<button class="primary" data-a="done">Done</button><button data-a="skip">Cannot do this</button></div></div></div>';
+    const card = root.getElementById('card'), bar = root.getElementById('bar'), toggle = root.getElementById('toggle');
+    root.getElementById('msg').textContent = message;
+    const chips = root.getElementById('chips');
+    chips.style.cssText = 'display:' + (copy.length ? 'flex' : 'none') + ';flex-direction:column;gap:6px';
+    for (const text of copy) {
+      const chip = document.createElement('div');
+      chip.className = 'chip';
+      chip.innerHTML = '<span></span><button aria-label="Copy to clipboard" title="Copy">' + ICON.copy + '</button>';
+      chip.firstChild.textContent = text;
+      const btn = chip.lastChild;
+      btn.addEventListener('click', async () => {
+        try { await navigator.clipboard.writeText(text); } catch (e) {
+          const area = document.createElement('textarea');
+          area.value = text; area.style.cssText = 'position:fixed;opacity:0';
+          document.body.appendChild(area); area.select(); document.execCommand('copy'); area.remove();
+        }
+        btn.innerHTML = ICON.check + 'Copied';
+        setTimeout(() => { btn.innerHTML = ICON.copy; }, 1200);
+      });
+      chips.appendChild(chip);
+    }
+    const apply = () => {
+      card.classList.toggle('min', state.minimized);
+      toggle.innerHTML = state.minimized ? ICON.up : ICON.down;
+      root.getElementById('title').textContent = state.minimized ? 'YOUR TURN' : 'YOUR TURN: control is yours';
+    };
+    const place = () => {
+      if (state.left === null) return;
+      const r = host.getBoundingClientRect();
+      const left = Math.max(0, Math.min(innerWidth - Math.min(r.width, 80), state.left));
+      const top = Math.max(0, Math.min(innerHeight - 36, state.top));
+      host.style.left = left + 'px'; host.style.top = top + 'px'; host.style.bottom = 'auto';
+    };
+    root.addEventListener('mousedown', (e) => { if (e.target.closest('button')) e.preventDefault(); });
+    root.addEventListener('click', (e) => { const a = e.target.closest('[data-a]'); if (a) window.__handoff = a.dataset.a; });
+    toggle.addEventListener('click', () => { state.minimized = !state.minimized; save(); apply(); place(); });
+    let drag = null;
+    bar.addEventListener('pointerdown', (e) => {
+      if (e.target.closest('button')) return;
+      const r = host.getBoundingClientRect();
+      drag = {dx: e.clientX - r.left, dy: e.clientY - r.top};
+      bar.setPointerCapture(e.pointerId); bar.style.cursor = 'grabbing';
+    });
+    bar.addEventListener('pointermove', (e) => {
+      if (!drag) return;
+      state.left = e.clientX - drag.dx; state.top = e.clientY - drag.dy; place();
+    });
+    bar.addEventListener('pointerup', () => { drag = null; bar.style.cursor = 'grab'; save(); });
+    host.__finish = () => {
+      card.classList.remove('min'); card.classList.add('ok');
+      toggle.style.display = 'none';
+      root.getElementById('title').textContent = 'Done: control is back with Playwright. Do not touch the page.';
+      setTimeout(() => host.remove(), 2000);
+    };
+    apply();
+    document.documentElement.appendChild(host);
+    place();
+    if (!document.title.startsWith('YOUR TURN | ')) document.title = 'YOUR TURN | ' + document.title;
+  }, {message, copy}).catch(() => {});
+
+  for (const p of ctx.pages()) await p.evaluate(() => { window.__handoff = null; }).catch(() => {});
+  const started = Date.now();
+  let outcome = null;
+  while (!outcome && Date.now() - started < maxMs) {
+    for (const p of ctx.pages()) {
+      await paint(p);
+      const flag = await p.evaluate(() => window.__handoff || null).catch(() => null);
+      if (flag) outcome = flag;
+      else if (doneText && await p.getByText(doneText).first().isVisible().catch(() => false)) outcome = 'condition';
+    }
+    if (!outcome) await page.waitForTimeout(500);
+  }
+  for (const p of ctx.pages()) {
+    await p.evaluate(() => {
+      document.getElementById('__ASRUN_panel')?.__finish();
+      document.title = document.title.replace(/^YOUR TURN \| /, '');
+    }).catch(() => {});
+  }
+  await page.waitForTimeout(2300);
+  for (const p of ctx.pages()) await p.evaluate(() => sessionStorage.removeItem('__ASRUN_panel_state')).catch(() => {});
+  return {outcome: outcome || 'timeout', waitedMs: Date.now() - started};
+}

package/.claude/skills/making-cases/references/gaps.md

@@ -1,36 +1,36 @@
-# Gap analysis
-
-Ask every question in one message, each with a suggested default, so the user can answer "yes to all" or correct
-single lines. Never ask a question whose answer is already in the notes, `AGENTS.md`, `profiles.yaml` or the existing cases.
-
-## What to look for
-| Gap | Typical question | Suggested default |
-|---|---|---|
-| "check X" without an expected result | What exactly must be true for X (text, logo, count, color)? | Visible and not empty; the value per profile goes in `## Values` |
-| Logo checks | Which logo element and which value per profile? | The product logo is visible and not empty; the value per profile goes in `## Values`, and name the element as a target to settle in `/explore-case` (`[T<n>]`, see `exploring-cases/references/assertion-targets.md`). Ask the user for the exact image/text/place when the notes say only "the logo" and the page may hold several. |
-| A check on an image, logo, file or PDF | Which exact image, text, place or UI element, and where? | Write the check with a `[T<n>]` reference and leave the card to `/explore-case`; never describe it as "the first image" |
-| Page loads data after an action | What shows that the content is really there? | Add `Ready when: <signal>` if the notes name one; else leave it to `/explore-case` |
-| Starting state | Does the case need existing data (a published document, a shared document)? | The case creates what it needs; never depends on pre-existing data |
-| Delete path | How is the created data removed, and from where? | From the list page, with the item's menu; keep a `[blocking]` TODO block until confirmed |
-| Write level | Does this step write? | Yes if it creates, edits, publishes, shares or deletes |
-| Email | Does this step send email? | Yes for share/send/invite; skipped in production and for `email: false` profiles |
-| Environments | Must this case run in production, or only staging? | All environments; production writes need the usual confirmation |
-| Suites | Smoke, regression, or both? | A read-only landing check: `[smoke, regression]`; a flow that writes: `[regression]` |
-| Profiles | Do all profiles see the same UI? | Yes; the exact literals that differ go in `## Values`, never in the steps |
-| Unclear words | What does "collaborator button" / "..." button open? | Describe only what is observed; mark `(observed, 🔍 to be confirmed by QA)` |
-| Unused lines | A statement that fits no case | Ask where it belongs; never drop it silently |
-
-## Marking unknowns in a case
-- Unknown expected value: write the suggested default as a normal sentence and hang a TODO block under it, in the
-  shape of `<framework>/.claude/skills/exploring-cases/references/open-questions.md`:
-
-  ```
-  - The preview header shows the product logo, visible and not empty.
-    - ❓ TODO [non-blocking]: Which logo must it be? (👁️ not observed)
-      - ✍️ Answer:
-  ```
-
-  The user accepts the default by deleting the block, or types an answer. Never write a bare `TODO: ...` line, a
-  question as the only text, or `Suggested:`.
-- Seen on a page during exploration but not stated in the notes: `- <observation> (observed, 🔍 to be confirmed by QA)`.
-- Never turn an observation into a hard requirement on your own.
+# Gap analysis
+
+Ask every question in one message, each with a suggested default, so the user can answer "yes to all" or correct
+single lines. Never ask a question whose answer is already in the notes, `AGENTS.md`, `profiles.yaml` or the existing cases.
+
+## What to look for
+| Gap | Typical question | Suggested default |
+|---|---|---|
+| "check X" without an expected result | What exactly must be true for X (text, logo, count, color)? | Visible and not empty; the value per profile goes in `## Values` |
+| Logo checks | Which logo element and which value per profile? | The product logo is visible and not empty; the value per profile goes in `## Values`, and name the element as a target to settle in `/explore-case` (`[T<n>]`, see `exploring-cases/references/assertion-targets.md`). Ask the user for the exact image/text/place when the notes say only "the logo" and the page may hold several. |
+| A check on an image, logo, file or PDF | Which exact image, text, place or UI element, and where? | Write the check with a `[T<n>]` reference and leave the card to `/explore-case`; never describe it as "the first image" |
+| Page loads data after an action | What shows that the content is really there? | Add `Ready when: <signal>` if the notes name one; else leave it to `/explore-case` |
+| Starting state | Does the case need existing data (a published document, a shared document)? | The case creates what it needs; never depends on pre-existing data |
+| Delete path | How is the created data removed, and from where? | From the list page, with the item's menu; keep a `[blocking]` TODO block until confirmed |
+| Write level | Does this step write? | Yes if it creates, edits, publishes, shares or deletes |
+| Email | Does this step send email? | Yes for share/send/invite; skipped in production and for `email: false` profiles |
+| Environments | Must this case run in production, or only staging? | All environments; production writes need the usual confirmation |
+| Suites | Smoke, regression, or both? | A read-only landing check: `[smoke, regression]`; a flow that writes: `[regression]` |
+| Profiles | Do all profiles see the same UI? | Yes; the exact literals that differ go in `## Values`, never in the steps |
+| Unclear words | What does "collaborator button" / "..." button open? | Describe only what is observed; mark `(observed, 🔍 to be confirmed by QA)` |
+| Unused lines | A statement that fits no case | Ask where it belongs; never drop it silently |
+
+## Marking unknowns in a case
+- Unknown expected value: write the suggested default as a normal sentence and hang a TODO block under it, in the
+  shape of `<framework>/.claude/skills/exploring-cases/references/open-questions.md`:
+
+  ```
+  - The preview header shows the product logo, visible and not empty.
+    - ❓ TODO [non-blocking]: Which logo must it be? (👁️ not observed)
+      - ✍️ Answer:
+  ```
+
+  The user accepts the default by deleting the block, or types an answer. Never write a bare `TODO: ...` line, a
+  question as the only text, or `Suggested:`.
+- Seen on a page during exploration but not stated in the notes: `- <observation> (observed, 🔍 to be confirmed by QA)`.
+- Never turn an observation into a hard requirement on your own.