@pro-vi/designer 0.3.6 → 0.3.8

package/dist/scripts/ci-health.js

@@ -0,0 +1,277 @@
+#!/usr/bin/env -S node --import tsx
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { spawn, spawnSync } from 'node:child_process';
+import { createBrowser } from "../browser.js";
+import { runHealth } from "../ui-anchors.js";
+import { REPO_ROOT } from "../repo-root.js";
+const CDP_PORT = process.env.DESIGNER_CDP || '9222';
+const CHROME_PROFILE = path.join(os.homedir(), '.chrome-designer-profile');
+const CHROME_APP = '/Applications/Google Chrome.app';
+const HOME_URL = 'https://claude.ai/design';
+const HOME_READY_SEL = '[data-testid="project-creator"]';
+const SESSION_READY_SEL = '[data-testid="chat-composer-input"]';
+const BROWSER_TIMEOUT_MS = 15_000;
+function runDoctor() {
+    const bin = path.join(REPO_ROOT, 'bin', 'designer');
+    const r = spawnSync(bin, ['doctor'], { encoding: 'utf8', timeout: 60_000 });
+    return {
+        exitCode: r.status ?? -1,
+        stdout: r.stdout || '',
+        stderr: r.stderr || ''
+    };
+}
+function pkgVersion() {
+    const p = JSON.parse(fs.readFileSync(path.join(REPO_ROOT, 'package.json'), 'utf8'));
+    return p.version;
+}
+function todayUtc() {
+    return new Date().toISOString().slice(0, 10);
+}
+function scrubArtifact(s) {
+    if (!s)
+        return s;
+    return s
+        .replace(/\/[a-z]\/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/gi, (m) => m.slice(0, 3) + '<redacted>')
+        .replace(/(https?:\/\/[^\s?#]+)[?#][^\s]*/g, '$1')
+        .replace(/\/Users\/[^\/\s]+/g, '/Users/<redacted>')
+        .replace(/\/home\/[^\/\s]+/g, '/home/<redacted>');
+}
+function scrubNav(n) {
+    if (!n)
+        return n;
+    return {
+        target: scrubArtifact(n.target),
+        landedOn: scrubArtifact(n.landedOn),
+        ...(n.error !== undefined ? { error: scrubArtifact(n.error) } : {})
+    };
+}
+function ensureDir(p) {
+    fs.mkdirSync(p, { recursive: true });
+}
+async function pingCdp() {
+    try {
+        const ac = new AbortController();
+        const t = setTimeout(() => ac.abort(), 2000);
+        const r = await fetch(`http://127.0.0.1:${CDP_PORT}/json/version`, { signal: ac.signal });
+        clearTimeout(t);
+        if (!r.ok)
+            return { ok: false, detail: `HTTP ${r.status}` };
+        const j = await r.json().catch(() => null);
+        return { ok: !!j?.Browser, detail: j?.Browser || 'no Browser field' };
+    }
+    catch (e) {
+        return { ok: false, detail: e.message };
+    }
+}
+async function ensureCdp() {
+    const first = await pingCdp();
+    if (first.ok)
+        return { alive: true, attemptedRestart: false, detail: first.detail };
+    console.log(`[ci-health] CDP unreachable on :${CDP_PORT} (${first.detail}) — attempting narrow Chrome relaunch`);
+    spawn('open', [
+        '-na',
+        CHROME_APP,
+        '--args',
+        `--remote-debugging-port=${CDP_PORT}`,
+        `--user-data-dir=${CHROME_PROFILE}`
+    ], { detached: true, stdio: 'ignore' }).unref();
+    for (let i = 0; i < 8; i++) {
+        await new Promise((r) => setTimeout(r, 2000));
+        const r = await pingCdp();
+        if (r.ok)
+            return { alive: true, attemptedRestart: true, detail: r.detail };
+    }
+    const final = await pingCdp();
+    return { alive: false, attemptedRestart: true, detail: final.detail };
+}
+function updateStreak(outDir, results) {
+    const streakPath = path.join(outDir, 'streak.json');
+    let streak = {};
+    if (fs.existsSync(streakPath)) {
+        try {
+            const raw = fs.readFileSync(streakPath, 'utf8');
+            const parsed = JSON.parse(raw);
+            if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+                for (const [k, v] of Object.entries(parsed)) {
+                    if (typeof v === 'number' && Number.isFinite(v) && v >= 0)
+                        streak[k] = v;
+                }
+            }
+        }
+        catch (e) {
+            console.log(`[ci-health] streak.json unreadable (${e.message}); resetting`);
+            streak = {};
+        }
+    }
+    const verdict = new Map();
+    for (const r of results) {
+        if (r.status === 'skip')
+            continue;
+        const prev = verdict.get(r.id);
+        if (r.status === 'fail') {
+            verdict.set(r.id, 'fail');
+        }
+        else if (r.status === 'ok' && prev !== 'fail') {
+            verdict.set(r.id, 'ok');
+        }
+    }
+    for (const [id, v] of verdict) {
+        if (v === 'fail') {
+            streak[id] = (streak[id] ?? 0) + 1;
+        }
+        else {
+            streak[id] = 0;
+        }
+    }
+    try {
+        fs.writeFileSync(streakPath, JSON.stringify(streak, null, 2) + '\n');
+    }
+    catch (e) {
+        console.log(`[ci-health] streak.json write failed (${e.message}); continuing`);
+        return;
+    }
+    const flagged = Object.entries(streak).filter(([, n]) => n >= 2);
+    if (flagged.length > 0) {
+        console.log(`[ci-health] streak >= 2: ${flagged.map(([id, n]) => `${id}=${n}`).join(', ')}`);
+    }
+}
+async function adaptiveWait(browser, sel, label) {
+    try {
+        await browser.waitFor(sel);
+    }
+    catch (e) {
+        console.log(`[ci-health] ${label} ready-selector ${sel} not seen within ${BROWSER_TIMEOUT_MS}ms — proceeding (${e.message})`);
+    }
+}
+async function maybeSnapshot(browser) {
+    try {
+        const url = (await browser.url().catch(() => '')) || '';
+        const html = await browser.evalValue('document.documentElement.outerHTML').catch(() => '');
+        const dir = path.join(REPO_ROOT, 'artifacts', 'health', todayUtc());
+        ensureDir(dir);
+        const htmlPath = path.join(dir, 'page.html');
+        fs.writeFileSync(htmlPath, typeof html === 'string' ? html : '');
+        const shotPath = path.join(dir, 'page.png');
+        await browser.screenshot(shotPath, { full: true }).catch(() => null);
+        return {
+            url,
+            htmlBytes: typeof html === 'string' ? html.length : 0,
+            screenshotPath: fs.existsSync(shotPath) ? path.relative(REPO_ROOT, shotPath) : undefined
+        };
+    }
+    catch {
+        return null;
+    }
+}
+async function main() {
+    const startedAt = new Date().toISOString();
+    const isReprobe = process.env.DESIGNER_REPROBE === '1';
+    const artifactName = isReprobe ? `${todayUtc()}.reprobe.json` : `${todayUtc()}.json`;
+    const cdp = await ensureCdp();
+    if (!cdp.alive) {
+        const payload = {
+            ok: false,
+            generatedAt: startedAt,
+            finishedAt: new Date().toISOString(),
+            designerVersion: pkgVersion(),
+            reason: 'cdp-unreachable',
+            cdp,
+            hint: `Chrome with --remote-debugging-port=${CDP_PORT} could not be reached or relaunched. On the runner, run \`designer setup\` interactively to re-establish the session, then re-run this workflow.`
+        };
+        const outDir = path.join(REPO_ROOT, 'artifacts', 'health');
+        ensureDir(outDir);
+        fs.writeFileSync(path.join(outDir, artifactName), JSON.stringify(payload, null, 2));
+        console.error(`[ci-health] FAIL — CDP unreachable on :${CDP_PORT} (${cdp.detail}); restart attempted=${cdp.attemptedRestart}`);
+        process.exit(2);
+    }
+    console.log(`[ci-health] CDP alive — ${cdp.detail}${cdp.attemptedRestart ? ' (restarted)' : ''}`);
+    const doctor = runDoctor();
+    const browser = createBrowser({ session: 'designer-default', timeoutMs: BROWSER_TIMEOUT_MS });
+    let homeNav = null;
+    try {
+        await browser.open(HOME_URL);
+        await adaptiveWait(browser, HOME_READY_SEL, 'home');
+        const landedOn = (await browser.url().catch(() => '')) || '';
+        homeNav = { target: HOME_URL, landedOn };
+        console.log(`[ci-health] navigated to home — landed=${landedOn}`);
+    }
+    catch (e) {
+        homeNav = { target: HOME_URL, landedOn: '', error: e.message };
+        console.log(`[ci-health] home navigation failed — ${e.message}; home anchors will fail loudly`);
+    }
+    const homeResults = await runHealth(browser, { phase: 'home' });
+    const probeUrl = process.env.DESIGNER_PROBE_PROJECT_URL;
+    let sessionNav = null;
+    let sessionResults = [];
+    if (probeUrl) {
+        try {
+            await browser.open(probeUrl);
+            await adaptiveWait(browser, SESSION_READY_SEL, 'session');
+            const landedOn = (await browser.url().catch(() => '')) || '';
+            sessionNav = { target: probeUrl, landedOn };
+            console.log(`[ci-health] navigated to canary — landed=${landedOn}`);
+        }
+        catch (e) {
+            sessionNav = { target: probeUrl, landedOn: '', error: e.message };
+            console.log(`[ci-health] canary navigation failed — ${e.message}; session anchors will fail loudly`);
+        }
+        sessionResults = await runHealth(browser, { phase: 'session' });
+    }
+    else {
+        console.log('[ci-health] DESIGNER_PROBE_PROJECT_URL unset — skipping session phase');
+    }
+    const results = [...homeResults, ...sessionResults];
+    const counts = {
+        ok: results.filter((r) => r.status === 'ok').length,
+        fail: results.filter((r) => r.status === 'fail').length,
+        skip: results.filter((r) => r.status === 'skip').length
+    };
+    const fail = counts.fail > 0;
+    const url = (await browser.url().catch(() => '')) || '';
+    const diag = fail ? await maybeSnapshot(browser) : null;
+    const payload = {
+        ok: !fail,
+        generatedAt: startedAt,
+        finishedAt: new Date().toISOString(),
+        designerVersion: pkgVersion(),
+        chromeUrl: scrubArtifact(url),
+        canary: scrubNav(sessionNav),
+        homeNav: scrubNav(homeNav),
+        doctor: {
+            exitCode: doctor.exitCode,
+            stdout: scrubArtifact(doctor.stdout),
+            stderr: scrubArtifact(doctor.stderr)
+        },
+        health: {
+            ok: !fail,
+            counts,
+            results
+        },
+        diagnostics: diag
+    };
+    const outDir = path.join(REPO_ROOT, 'artifacts', 'health');
+    ensureDir(outDir);
+    const outFile = path.join(outDir, artifactName);
+    fs.writeFileSync(outFile, JSON.stringify(payload, null, 2));
+    if (!isReprobe) {
+        updateStreak(outDir, results);
+    }
+    else {
+        console.log('[ci-health] re-probe mode — skipping updateStreak + writing to .reprobe.json');
+    }
+    const summary = `[ci-health] ${payload.ok ? 'OK' : 'FAIL'} — health ${counts.ok} ok / ${counts.fail} fail / ${counts.skip} skip · doctor exit ${doctor.exitCode} · v${payload.designerVersion}`;
+    console.log(summary);
+    if (fail) {
+        const failed = results.filter((r) => r.status === 'fail').map((r) => `  ${r.id} — ${r.detail || r.description}`);
+        console.log(failed.join('\n'));
+    }
+    console.log(`[ci-health] wrote ${path.relative(REPO_ROOT, outFile)}`);
+    if (fail)
+        process.exit(2);
+}
+main().catch((e) => {
+    console.error(`[ci-health] threw: ${e.message}`);
+    process.exit(3);
+});

package/dist/setup.js

@@ -4,6 +4,7 @@ import os from 'node:os';
 import { spawn, spawnSync } from 'node:child_process';
 import { createHash } from 'node:crypto';
 import { REPO_ROOT } from "./repo-root.js";
+import { createBrowser } from "./browser.js";
 const SKILL_SRC = path.join(REPO_ROOT, 'skills', 'designer-loop', 'SKILL.md');
 const SKILL_DEST_DIR = path.join(os.homedir(), '.claude', 'skills', 'designer-loop');
 const SKILL_DEST = path.join(SKILL_DEST_DIR, 'SKILL.md');
@@ -26,27 +27,26 @@ async function isCdpUp(port) {
         return false;
     }
 }
-async function getDesignTab(port) {
-    try {
-        const res = await fetch(`http://127.0.0.1:${port}/json/list`, { signal: AbortSignal.timeout(2000) });
-        if (!res.ok)
-            return null;
-        const tabs = (await res.json());
-        for (const t of tabs) {
-            if (t.url && /claude\.ai\/design/.test(t.url) && !/login/i.test(t.url)) {
-                return { url: t.url, title: t.title || '' };
-            }
-        }
-        return null;
-    }
-    catch {
-        return null;
-    }
+async function verifySignedIn(browser) {
+    const js = '!!(document.querySelector(\'[data-testid="project-creator"]\') || document.querySelector(\'[data-testid="chat-composer-input"]\'))';
+    return browser.evalValue(js).catch(() => false);
 }
 function chromeRunning() {
     const r = spawnSync('pgrep', ['-f', 'Google Chrome.app/Contents/MacOS/Google Chrome'], { stdio: 'pipe' });
     return r.status === 0 && (r.stdout?.toString().trim().length ?? 0) > 0;
 }
+function cdpChromeProfileStatus(port) {
+    if (!/^\d+$/.test(port))
+        return 'unknown';
+    const r = spawnSync('sh', ['-c', `ps -Axww -o command | grep -- '--remote-debugging-port=${port}' | grep -v grep`], { stdio: 'pipe' });
+    if (r.status !== 0)
+        return 'unknown';
+    const out = r.stdout?.toString() ?? '';
+    if (!out.includes('--user-data-dir='))
+        return 'unknown';
+    const escaped = PROFILE.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    return new RegExp(`--user-data-dir=${escaped}(?= |$)`, 'm').test(out) ? 'match' : 'mismatch';
+}
 async function pollUntil(name, fn, opts) {
     const start = Date.now();
     let emittedReminder = false;
@@ -126,8 +126,22 @@ function step2AgentBrowser() {
 }
 async function step3Chrome(port) {
     if (await isCdpUp(port)) {
-        log('chrome', 'ok', `CDP already up on :${port}`);
-        return true;
+        const profileStatus = cdpChromeProfileStatus(port);
+        if (profileStatus !== 'mismatch') {
+            log('chrome', 'ok', `CDP already up on :${port}${profileStatus === 'match' ? ' (profile matches)' : ''}`);
+            return true;
+        }
+        log('chrome', 'wait', `A debug Chrome is on :${port} with a different --user-data-dir (expected ${PROFILE}).\n` +
+            `   Quit it — I'll launch one with the right profile once it's gone. (Or set DESIGNER_CDP to a free port.)`);
+        const freed = await pollUntil('chrome', async () => !(await isCdpUp(port)), {
+            intervalMs: 1000,
+            timeoutMs: 5 * 60_000,
+            reminder: `Still waiting for the wrong-profile debug Chrome on :${port} to quit.`
+        });
+        if (!freed) {
+            log('chrome', 'fail', `Timed out waiting for the debug Chrome on :${port} to quit. Quit it manually, then re-run setup.`);
+            return false;
+        }
     }
     if (chromeRunning()) {
         log('chrome', 'wait', 'A non-debug Chrome is running. Quit it (Cmd+Q on the Chrome menu, then close Activity Monitor entries if any). I am polling.');
@@ -164,23 +178,21 @@ async function step3Chrome(port) {
     return true;
 }
 async function step4SignIn(port) {
-    const tab = await getDesignTab(port);
-    if (tab) {
-        log('login', 'ok', `Signed in. Tab on ${tab.url.replace(/\?.*$/, '')}`);
-        return true;
-    }
-    log('login', 'wait', 'Sign in to Claude in the DEBUG Chrome window I just opened (it is a separate window with no extensions/bookmarks — NOT your normal Chrome; the two have separate cookie jars). Then navigate to claude.ai/design. I am polling.');
-    const ok = await pollUntil('login', async () => (await getDesignTab(port)) !== null, {
+    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), {
         intervalMs: 2000,
         timeoutMs: 10 * 60_000,
-        reminder: 'Still waiting for a tab on claude.ai/design in the debug window (signing into your normal Chrome will not help — different profile).',
+        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.',
         hint60s: "If Chrome shows a Google 'new device' or 2FA prompt, complete that first — setup is waiting on you."
     });
     if (!ok) {
-        log('login', 'fail', 'Timed out waiting for sign-in. Re-run setup when ready.');
+        log('login', 'fail', 'Timed out waiting for a signed-in claude.ai/design session. Re-run setup when ready.');
         return false;
     }
-    log('login', 'ok', 'Signed in.');
+    const url = (await browser.url().catch(() => '')) || 'claude.ai/design';
+    log('login', 'ok', `Signed in. Tab on ${url.replace(/\?.*$/, '')}`);
     return true;
 }
 function step5Skill() {

package/dist/ui-anchors.js

@@ -70,7 +70,7 @@ export const UI_ANCHORS = [
         category: 'session',
         description: 'send button',
         requires: 'session',
-        check: async (b) => ({ ok: await hasSelector(b, '[data-testid="chat-send-button"]') })
+        check: async (b) => ({ ok: await hasSelector(b, '[data-testid="chat-send-button"], button[title^="Send ("]') })
     },
     {
         id: 'session.htmlViewerIframe',
@@ -108,15 +108,9 @@ export const UI_ANCHORS = [
     {
         id: 'session.chatTurnPrefix',
         category: 'pattern',
-        description: "chat turns prefixed with 'You\\n' / 'Claude\\n'",
+        description: 'chat-messages renders >=2 turn rows (data-index API)',
         requires: 'session',
-        check: async (b) => {
-            const sample = await b.evalValue(`(() => { const c = document.querySelector('[data-testid="chat-messages"]'); const inner = c && c.children[0]; if (!inner) return ''; return Array.from(inner.children).slice(0, 3).map(d => (d.innerText||'').slice(0, 40)).join('|'); })()`).catch(() => '');
-            if (!sample)
-                return { ok: false, detail: 'no chat turns' };
-            const ok = /(^|\|)(You|Claude)(\\n|\n|$)/.test(sample) || /You\n|Claude\n/.test(sample);
-            return { ok, detail: ok ? undefined : `first turns: ${sample.slice(0, 120)}` };
-        }
+        check: async (b) => ({ ok: await hasSelector(b, '[data-testid="chat-messages"] [data-index="1"]') })
     },
     {
         id: 'share.shareButton',
@@ -128,16 +122,30 @@ export const UI_ANCHORS = [
     {
         id: 'share.handoffMenuItem',
         category: 'share',
-        description: 'Handoff-to-Claude-Code menu item (inside Share dropdown)',
+        description: 'Handoff-to-Claude-Code action (Share → Send to… tab → Claude Code row, or the legacy dropdown item)',
         requires: 'session',
         check: async (b) => {
             const opened = await b.evalValue(`(() => { const btn = Array.from(document.querySelectorAll('button')).find(x => (x.textContent||'').trim() === 'Share'); if (!btn) return false; btn.click(); return true; })()`).catch(() => false);
             if (!opened)
                 return { ok: false, detail: 'Share button not clickable' };
             await new Promise((r) => setTimeout(r, 400));
-            const found = await hasButtonMatching(b, /handoff to claude code/i);
+            let found = await hasButtonMatching(b, /handoff to claude code/i);
+            if (!found) {
+                const tabClicked = await b.evalValue(`(() => { const tab = Array.from(document.querySelectorAll('button[role="tab"]')).find(t => /send to/i.test(t.textContent || '')); if (!tab) return false; tab.click(); return true; })()`).catch(() => false);
+                if (tabClicked) {
+                    await new Promise((r) => setTimeout(r, 400));
+                    found = await b.evalValue(`(() => {
+              const sends = Array.from(document.querySelectorAll('button')).filter(x => (x.textContent || '').trim() === 'Send');
+              return sends.some(x => {
+                let row = x;
+                for (let i = 0; i < 3 && row.parentElement; i++) row = row.parentElement;
+                return /claude code/i.test(row.textContent || '');
+              });
+            })()`).catch(() => false);
+                }
+            }
             await b.evalValue(`document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true })); true`).catch(() => null);
-            return { ok: found, detail: found ? undefined : 'Share opened but no Handoff-to-Claude-Code item' };
+            return { ok: found, detail: found ? undefined : 'Share opened but no Claude Code handoff action (checked legacy item and Send to… tab)' };
         }
     },
     {
@@ -202,6 +210,32 @@ export const UI_ANCHORS = [
 ];
 export async function runHealth(browser, opts = {}) {
     const currentUrl = (await browser.url().catch(() => '')) || '';
+    if (opts.phase) {
+        const phase = opts.phase;
+        const results = [];
+        for (const a of UI_ANCHORS) {
+            const applicable = a.requires === 'any' ||
+                (phase === 'home' && a.requires === 'home') ||
+                (phase === 'session' && a.requires === 'session');
+            if (!applicable)
+                continue;
+            const base = {
+                id: a.id,
+                category: a.category,
+                description: a.description,
+                requires: a.requires,
+                phase
+            };
+            try {
+                const r = await a.check(browser, currentUrl);
+                results.push({ ...base, status: r.ok ? 'ok' : 'fail', detail: r.detail });
+            }
+            catch (e) {
+                results.push({ ...base, status: 'fail', detail: `threw: ${e.message}` });
+            }
+        }
+        return results;
+    }
     const inSession = /\/design\/p\/[a-f0-9-]+/i.test(currentUrl);
     const onHome = /\/design\/?$/.test(currentUrl) || currentUrl.endsWith('/design');
     const state = inSession ? 'session' : onHome ? 'home' : 'other';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pro-vi/designer",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "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",
@@ -32,13 +32,17 @@
     "doctor": "tsx cli.ts doctor",
     "check": "tsc --noEmit",
     "build": "tsc -p tsconfig.build.json",
-    "prepublishOnly": "npm run check && npm run build",
+    "prepack": "npm run check && npm run build",
     "postinstall": "node scripts/postinstall.mjs",
-    "probe": "tsx scripts/probe.ts"
+    "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"
   },
   "dependencies": {
+    "@anthropic-ai/sdk": "^0.102.0",
     "@modelcontextprotocol/sdk": "^1.26.0",
-    "zod": "^3.23.8"
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",
@@ -48,6 +52,10 @@
   "engines": {
     "node": ">=20"
   },
+  "os": [
+    "darwin",
+    "linux"
+  ],
   "files": [
     "dist/",
     "bin/",

package/selectors.json

@@ -18,7 +18,7 @@
   },
   "composer": {
     "promptTextarea": "[data-testid=\"chat-composer-input\"]",
-    "sendButton": "[data-testid=\"chat-send-button\"]",
+    "sendButton": "[data-testid=\"chat-send-button\"], button[title^=\"Send (\"]",
     "stopButton": null,
     "attachButton": "button[aria-label=\"Attach file\"]",
     "modelButton": "[data-testid=\"model-selector-button\"]"