@pro-vi/designer 0.3.9 → 0.3.10

package/README.md

@@ -118,7 +118,7 @@ Writes `tasting.html` with variant tabs + 1/2/3 shortcuts + persistent notes, se
 ## Operations
 
 - `designer doctor` — diagnose setup state. Exits 2 on failure.
-- `designer health [--json]` — probe 17 UI anchors. Wire into cron to catch claude.ai UI regressions.
+- `designer health [--json]` — probe every UI anchor designer depends on. Wire into cron to catch claude.ai UI regressions.
 - **Daily CI** in `.github/workflows/`: `daily-health.yml` runs the auth-required UI probe on a self-hosted macOS runner once per day; `ci.yml` typechecks + builds + does a Docker clean-room install smoke on every PR; `release-please.yml` opens a release PR on conventional commits, merging it tags + publishes via `release-publish.yml`. Selector regressions land as auto-opened PRs under the `selectors-drift` label.
 
 ## Known quirks

package/dist/browser.js

@@ -12,9 +12,10 @@ export function createBrowser({ session = DEFAULT_SESSION, headed = true, timeou
     function connectFlags() {
         if (!cdp)
             return [];
+        const scope = ['--session', `designer-cdp-${cdp.replace(/[^a-zA-Z0-9.-]/g, '_')}`];
         if (cdp === 'auto' || cdp === '1' || cdp === 'true')
-            return ['--auto-connect'];
-        return ['--cdp', cdp];
+            return [...scope, '--auto-connect'];
+        return [...scope, '--cdp', cdp];
     }
     function run(args, { input, parseJson = false } = {}) {
         return new Promise((resolve, reject) => {
@@ -64,6 +65,15 @@ export function createBrowser({ session = DEFAULT_SESSION, headed = true, timeou
         activateTab: async (index) => {
             await run(['tab', String(index)]);
         },
+        reload: () => run(['reload']),
+        cookies: async () => {
+            const out = await run(['cookies', 'get', '--json']);
+            const env = JSON.parse(out);
+            if (env.success === false) {
+                throw new Error(`agent-browser cookies get failed: ${JSON.stringify(env.error)}`);
+            }
+            return env.data?.cookies ?? [];
+        },
         snapshot: ({ interactive = true, scope } = {}) => {
             const args = ['snapshot', '--json'];
             if (interactive)

package/dist/setup.js

@@ -162,7 +162,14 @@ async function step3Chrome(port) {
         log('chrome', 'fail', `Chrome not found at ${CHROME_BIN}. Set CHROME_BIN to override.`);
         return false;
     }
-    const child = spawn(CHROME_BIN, ['--remote-debugging-port=' + port, '--user-data-dir=' + PROFILE, 'https://claude.ai/design'], {
+    const child = spawn(CHROME_BIN, [
+        '--remote-debugging-port=' + port,
+        '--user-data-dir=' + PROFILE,
+        '--no-first-run',
+        '--no-default-browser-check',
+        '--disable-search-engine-choice-screen',
+        'https://claude.ai/design'
+    ], {
         detached: true,
         stdio: 'ignore'
     });
@@ -184,7 +191,28 @@ async function step4SignIn(port) {
     const browser = createBrowser({ session: 'designer-setup', cdp: port });
     await browser.open('https://claude.ai/design').catch(() => undefined);
     await sleep(2500);
-    const ok = await pollUntil('login', () => verifySignedIn(browser), {
+    const MAX_RECOVERY_NAVS = 4;
+    const hasAuthCookie = async () => {
+        try {
+            return (await browser.cookies()).some((c) => /^sessionKey/.test(c.name) && /claude\.ai$/.test(c.domain) && c.value.length > 20);
+        }
+        catch {
+            return false;
+        }
+    };
+    let recoveryNavs = 0;
+    const checkSignedIn = async () => {
+        if (await verifySignedIn(browser))
+            return true;
+        if (recoveryNavs < MAX_RECOVERY_NAVS && (await hasAuthCookie())) {
+            recoveryNavs++;
+            await browser.open('https://claude.ai/design').catch(() => undefined);
+            await sleep(3000);
+            return verifySignedIn(browser);
+        }
+        return false;
+    };
+    const ok = await pollUntil('login', checkSignedIn, {
         intervalMs: 2000,
         timeoutMs: 10 * 60_000,
         reminder: 'Sign in to Claude in the DEBUG Chrome window I just opened (a separate window with no extensions/bookmarks — NOT your normal Chrome; the two have separate cookie jars). Then return to claude.ai/design. I am polling.',
@@ -192,6 +220,9 @@ async function step4SignIn(port) {
     });
     if (!ok) {
         log('login', 'fail', 'Timed out waiting for a signed-in claude.ai/design session. Re-run setup when ready.');
+        const watched = await browser.url().catch(() => '(unreachable)');
+        const authCookie = await hasAuthCookie();
+        log('login', 'fail', `Watched tab: ${watched} | Claude auth cookie: ${authCookie ? 'present — login succeeded but the tab stayed stale; re-run: designer setup' : 'absent (or watched tab is off claude.ai origin) — see watched URL above'}`);
         return false;
     }
     const url = (await browser.url().catch(() => '')) || 'claude.ai/design';

package/dist/ui-anchors.js

@@ -9,6 +9,25 @@ async function hasButtonMatching(browser, pattern) {
         .catch(() => false));
 }
 export const UI_ANCHORS = [
+    {
+        id: 'login.signedIn',
+        category: 'pattern',
+        description: 'signed in (claude.ai is rendering the app shell, not the login wall)',
+        requires: 'any',
+        check: async (b, url) => {
+            if (/claude\.ai\/login/.test(url)) {
+                return { ok: false, detail: `signed out — Chrome is on the login wall (${url.slice(0, 80)}). Run: designer setup` };
+            }
+            if (/claude\.ai\/design/.test(url)) {
+                const signedIn = (await hasSelector(b, '[data-testid="project-creator"]')) ||
+                    (await hasSelector(b, '[data-testid="chat-composer-input"]'));
+                return signedIn
+                    ? { ok: true }
+                    : { ok: false, detail: `login wall rendered at ${url.slice(0, 80)} (no app shell) — signed out. Run: designer setup` };
+            }
+            return { ok: true, detail: `not on a claude.ai/design surface (url=${url.slice(0, 60)}) — sign-in not checked here` };
+        }
+    },
     {
         id: 'home.creator',
         category: 'home',
@@ -65,6 +84,31 @@ export const UI_ANCHORS = [
         requires: 'session',
         check: async (b) => ({ ok: await hasSelector(b, '[data-testid="chat-composer-input"]') })
     },
+    {
+        id: 'session.composerFillable',
+        category: 'session',
+        description: 'composer is fillable (textarea or contenteditable, per _submitPrompt)',
+        requires: 'session',
+        check: async (b) => {
+            const shape = await b
+                .evalValue(`(() => {
+            const el = document.querySelector('[data-testid="chat-composer-input"]');
+            if (!el) return { found: false };
+            const fillable = el instanceof HTMLTextAreaElement || el.isContentEditable;
+            return { found: true, tag: el.tagName, contentEditable: el.isContentEditable, fillable };
+          })()`)
+                .catch(() => ({ found: false }));
+            if (!shape.found)
+                return { ok: false, detail: 'composer not found' };
+            if (shape.fillable) {
+                return { ok: true, detail: shape.contentEditable ? 'contenteditable' : `<${(shape.tag || '').toLowerCase()}>` };
+            }
+            return {
+                ok: false,
+                detail: `composer is <${(shape.tag || '?').toLowerCase()}> — neither textarea nor contenteditable; _submitPrompt cannot fill it (composer shape drifted)`
+            };
+        }
+    },
     {
         id: 'session.sendButton',
         category: 'session',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pro-vi/designer",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "type": "module",
   "description": "MCP + CLI for autonomous iteration of claude.ai/design — drives the design surface via agent-browser, downloads handoff bundles, and exposes a tasting harness for full-viewport variant comparison.",
   "license": "MIT",