@pro-vi/designer 0.3.9 → 0.3.11

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

@@ -1,3 +1,4 @@
+import { RunStateObserver } from "./run-state.js";
 async function hasSelector(browser, sel) {
     return !!(await browser
         .evalValue(`!!document.querySelector(${JSON.stringify(sel)})`)
@@ -8,7 +9,112 @@ async function hasButtonMatching(browser, pattern) {
         .evalValue(`(() => { const re = new RegExp(${JSON.stringify(pattern.source)}, ${JSON.stringify(pattern.flags)}); return Array.from(document.querySelectorAll('button')).some(b => re.test((b.textContent || '').trim())); })()`)
         .catch(() => false));
 }
+function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+async function submitTurnRpcCanary(browser) {
+    const prompt = 'Health check: answer in chat only with the single word ok. Do not create, modify, or delete files.';
+    const filled = await browser
+        .evalValue(`(() => {
+        const el = document.querySelector('[data-testid="chat-composer-input"]');
+        if (!el) return false;
+        const text = ${JSON.stringify(prompt)};
+        if (el instanceof HTMLTextAreaElement) {
+          const setter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
+          setter.call(el, text);
+          el.dispatchEvent(new Event('input', { bubbles: true }));
+          el.focus();
+          return true;
+        }
+        if (el.isContentEditable) {
+          el.focus();
+          const sel = window.getSelection();
+          const range = document.createRange();
+          range.selectNodeContents(el);
+          sel.removeAllRanges();
+          sel.addRange(range);
+          const dt = new DataTransfer();
+          dt.setData('text/plain', text);
+          const unhandled = el.dispatchEvent(new ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true }));
+          if (unhandled) document.execCommand('insertText', false, text);
+          return true;
+        }
+        return false;
+      })()`)
+        .catch(() => false);
+    if (!filled)
+        return { ok: false, detail: 'composer not fillable for canary prompt' };
+    for (let i = 0; i < 30; i++) {
+        const disabled = await browser
+            .evalValue(`(() => {
+          const b = document.querySelector('[data-testid="chat-send-button"], button[title^="Send ("]');
+          return !b || b.disabled || b.getAttribute('aria-disabled') === 'true';
+        })()`)
+            .catch(() => true);
+        if (!disabled)
+            break;
+        await sleep(150);
+    }
+    const clicked = await browser
+        .evalValue(`(() => {
+        const b = document.querySelector('[data-testid="chat-send-button"], button[title^="Send ("]');
+        if (!b || b.disabled || b.getAttribute('aria-disabled') === 'true') return false;
+        b.click();
+        return true;
+      })()`)
+        .catch(() => false);
+    return clicked ? { ok: true } : { ok: false, detail: 'send button unavailable for canary prompt' };
+}
+async function checkTurnRpcContract(_browser, currentUrl) {
+    if (process.env.DESIGNER_TURN_RPC_CANARY !== '1') {
+        return { ok: true, status: 'skip', detail: 'turn-RPC canary disabled (DESIGNER_TURN_RPC_CANARY!=1)' };
+    }
+    if ((process.env.DESIGNER_CDP ?? '9222') === '') {
+        return { ok: true, status: 'skip', detail: "CDP disabled (DESIGNER_CDP=''); turn-RPC canary not probed" };
+    }
+    const observer = await RunStateObserver.attach({ preferUrlPrefix: currentUrl.split('?')[0] || null });
+    if (!observer) {
+        return { ok: true, status: 'skip', detail: 'CDP observer unavailable; turn-RPC canary not probed' };
+    }
+    try {
+        observer.beginRun();
+        const submitted = await submitTurnRpcCanary(_browser);
+        if (!submitted.ok)
+            return { ok: true, status: 'skip', detail: submitted.detail };
+        const terminal = await observer.awaitTerminal({ stallMs: 25_000, hardTimeoutMs: 75_000 });
+        const summary = observer.signalSummary();
+        const detail = `heartbeat x${summary.heartbeat}, release ${summary.release > 0 ? 'seen' : 'missing'}, ` +
+            `chat x${summary.chatOpen}, chunks x${summary.chatChunk}, terminal=${terminal.terminal}` +
+            (summary.observedRpcPaths.length ? `, observed=[${summary.observedRpcPaths.join(', ')}]` : ', observed=[]');
+        return {
+            ok: terminal.terminal === 'finished' && summary.release > 0 && summary.chatOpen > 0,
+            detail
+        };
+    }
+    finally {
+        observer.close();
+    }
+}
 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 +171,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',
@@ -90,6 +221,13 @@ export const UI_ANCHORS = [
         requires: 'session',
         check: async (b) => ({ ok: await hasSelector(b, '[data-testid="chat-messages"]') })
     },
+    {
+        id: 'network.turnRpcContract',
+        category: 'pattern',
+        description: 'OmeletteService Chat/RenewTurn/ReleaseTurn network contract',
+        requires: 'session',
+        check: checkTurnRpcContract
+    },
     {
         id: 'session.iframeSrcPattern',
         category: 'pattern',
@@ -228,7 +366,7 @@ export async function runHealth(browser, opts = {}) {
             };
             try {
                 const r = await a.check(browser, currentUrl);
-                results.push({ ...base, status: r.ok ? 'ok' : 'fail', detail: r.detail });
+                results.push({ ...base, status: r.status ?? (r.ok ? 'ok' : 'fail'), detail: r.detail });
             }
             catch (e) {
                 results.push({ ...base, status: 'fail', detail: `threw: ${e.message}` });
@@ -251,7 +389,7 @@ export async function runHealth(browser, opts = {}) {
         }
         try {
             const r = await a.check(browser, currentUrl);
-            results.push({ ...base, status: r.ok ? 'ok' : 'fail', detail: r.detail });
+            results.push({ ...base, status: r.status ?? (r.ok ? 'ok' : 'fail'), detail: r.detail });
         }
         catch (e) {
             results.push({ ...base, status: 'fail', detail: `threw: ${e.message}` });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pro-vi/designer",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "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",
@@ -30,7 +30,7 @@
     "cli": "tsx cli.ts",
     "setup": "tsx cli.ts setup",
     "doctor": "tsx cli.ts doctor",
-    "test": "npm run build && node --test tests/cli-metadata.test.mjs",
+    "test": "npm run build && node --test tests/cli-metadata.test.mjs && node --import tsx --test tests/run-state.*.test.mjs tests/cdp-trace.*.test.mjs",
     "check": "tsc --noEmit",
     "build": "tsc -p tsconfig.build.json",
     "prepack": "npm run check && npm run build",
@@ -38,7 +38,9 @@
     "probe": "tsx scripts/probe.ts",
     "probe:health": "tsx scripts/ci-health.ts",
     "auto-heal": "tsx scripts/auto-heal.ts",
-    "smoke": "bash scripts/install-smoke.sh"
+    "smoke": "bash scripts/install-smoke.sh",
+    "trace": "tsx scripts/trace-spike.ts",
+    "trace:analyze": "tsx scripts/trace-analyze.ts"
   },
   "dependencies": {
     "@anthropic-ai/sdk": "^0.102.0",
@@ -53,7 +55,7 @@
     "typescript": "^6.0.3"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22"
   },
   "os": [
     "darwin",