@pro-vi/designer 0.3.5 → 0.3.7

package/README.md

@@ -118,7 +118,8 @@ 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` — probe 17 UI anchors. Wire into cron to catch claude.ai UI regressions.
+- `designer health [--json]` — probe 17 UI anchors. 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/cli.js

@@ -22,7 +22,9 @@ function parseFlags(args) {
         if (a.startsWith('--')) {
             const parts = a.slice(2).split('=');
             const k = parts[0] ?? '';
-            const v = parts[1] ?? args[++i] ?? true;
+            const next = args[i + 1];
+            const v = parts[1] ??
+                (next !== undefined && !next.startsWith('--') ? args[++i] : true);
             if (k)
                 out[k] = v;
         }
@@ -183,18 +185,31 @@ async function main() {
         case 'health': {
             const browser = createBrowser({ session: `designer-${key}` });
             const results = await runHealth(browser);
-            const worst = results.some((r) => r.status === 'fail') ? 'fail' : 'ok';
-            const icon = (s) => (s === 'ok' ? '✓' : s === 'fail' ? '✗' : '·');
-            for (const r of results) {
-                const line = `${icon(r.status)} [${r.category}] ${r.id} — ${r.description}${r.detail ? ' (' + r.detail + ')' : ''}`;
-                console.log(line);
-            }
             const counts = results.reduce((acc, r) => {
                 acc[r.status] = (acc[r.status] || 0) + 1;
                 return acc;
             }, {});
-            console.log(`\n${counts['ok'] || 0} ok, ${counts['fail'] || 0} fail, ${counts['skip'] || 0} skip`);
-            if (worst === 'fail')
+            const fail = results.some((r) => r.status === 'fail');
+            const url = (await browser.url().catch(() => '')) || '';
+            if (flags.json === true || flags.json === '') {
+                const payload = {
+                    ok: !fail,
+                    generatedAt: new Date().toISOString(),
+                    url,
+                    counts: { ok: counts['ok'] || 0, fail: counts['fail'] || 0, skip: counts['skip'] || 0 },
+                    results
+                };
+                console.log(JSON.stringify(payload, null, 2));
+            }
+            else {
+                const icon = (s) => (s === 'ok' ? '✓' : s === 'fail' ? '✗' : '·');
+                for (const r of results) {
+                    const line = `${icon(r.status)} [${r.category}] ${r.id} — ${r.description}${r.detail ? ' (' + r.detail + ')' : ''}`;
+                    console.log(line);
+                }
+                console.log(`\n${counts['ok'] || 0} ok, ${counts['fail'] || 0} fail, ${counts['skip'] || 0} skip`);
+            }
+            if (fail)
                 process.exit(2);
             break;
         }
@@ -427,11 +442,15 @@ Checks: agent-browser on PATH, CDP reachable at DESIGNER_CDP port, a /design tab
 selectors.json present, designer-loop skill installed at ~/.claude/skills/, MCP registration.
 
 Exits with code 2 if any check fails.`,
-    health: `designer health — probe every UI anchor this MCP depends on.
+    health: `designer health [--json] — probe every UI anchor this MCP depends on.
 
 Walks the current Chrome state (home / session) and checks each selector / button / URL /
 DOM pattern we rely on. Reports pass / fail / skip per anchor with actionable detail.
 
+Flags:
+  --json     Emit a structured { ok, generatedAt, url, counts, results } JSON payload
+             on stdout instead of icons. Exit code is unchanged.
+
 Exit code 2 on any fail — wire into cron or CI to catch UI regressions (e.g., claude.ai
 moving the Share button) before users do.`,
     'mcp': `designer mcp serve — start the MCP stdio server.
@@ -542,18 +561,37 @@ async function checkOnDesignSurface() {
     const port = process.env.DESIGNER_CDP || '9222';
     try {
         const res = await fetch(`http://127.0.0.1:${port}/json/list`);
-        if (!res.ok)
-            return { name: 'logged into claude.ai/design', status: 'fail', detail: `HTTP ${res.status}` };
+        if (!res.ok) {
+            return {
+                name: 'claude.ai/design tab',
+                status: 'fail',
+                detail: `CDP HTTP ${res.status} — debug Chrome may have died. Run \`designer setup\` to relaunch it.`
+            };
+        }
         const tabs = await res.json();
         const onDesign = tabs.find((t) => t.url && /claude\.ai\/design/.test(t.url));
-        if (!onDesign)
-            return { name: 'logged into claude.ai/design', status: 'warn', detail: 'no tab on claude.ai/design — sign in and navigate there in the debug Chrome window' };
-        if (/login|sign in/i.test(onDesign.title || ''))
-            return { name: 'logged into claude.ai/design', status: 'fail', detail: 'on a login page; sign in inside the debug Chrome window' };
-        return { name: 'logged into claude.ai/design', status: 'ok', detail: onDesign.url };
+        if (!onDesign) {
+            return {
+                name: 'claude.ai/design tab',
+                status: 'warn',
+                detail: 'no tab on claude.ai/design in the debug Chrome window. Open https://claude.ai/design THERE (not in your normal Chrome — they are separate profiles with separate cookies).'
+            };
+        }
+        if (/login|sign in/i.test(onDesign.title || '')) {
+            return {
+                name: 'signed in to claude.ai/design',
+                status: 'fail',
+                detail: 'on a login page. Sign in INSIDE the debug Chrome window (not your normal Chrome — that profile is signed in but its cookies are not shared).'
+            };
+        }
+        return { name: 'signed in to claude.ai/design', status: 'ok', detail: onDesign.url };
     }
     catch {
-        return { name: 'logged into claude.ai/design', status: 'fail', detail: 'CDP not reachable; fix CDP first' };
+        return {
+            name: 'claude.ai/design tab',
+            status: 'fail',
+            detail: 'debug Chrome unreachable. Run `designer setup` to launch it.'
+        };
     }
 }
 function checkSelectors() {

package/dist/scripts/anchor-patcher.js

@@ -0,0 +1,118 @@
+import ts from 'typescript';
+export function findAnchor(source, id) {
+    const sf = ts.createSourceFile('ui-anchors.ts', source, ts.ScriptTarget.Latest, true);
+    let result = null;
+    const visit = (node) => {
+        if (result)
+            return;
+        if (ts.isObjectLiteralExpression(node) && matchesAnchorWithId(node, id)) {
+            const checkProp = findProperty(node, 'check');
+            if (checkProp) {
+                const sel = extractSimpleHasSelectorArg(checkProp.initializer, sf);
+                if (sel)
+                    result = sel;
+            }
+            return;
+        }
+        ts.forEachChild(node, visit);
+    };
+    visit(sf);
+    return result;
+}
+export function canPatch(source, id) {
+    return findAnchor(source, id) !== null;
+}
+export function patchSelector(source, id, newSelector) {
+    const match = findAnchor(source, id);
+    if (!match) {
+        throw new Error(`anchor-patcher: id "${id}" is not patchable — either not found or its check is not the simple hasSelector(b, '...') shape`);
+    }
+    const escaped = escapeForQuote(newSelector, match.quote);
+    return (source.slice(0, match.literalStart) +
+        match.quote +
+        escaped +
+        match.quote +
+        source.slice(match.literalEnd));
+}
+function matchesAnchorWithId(obj, id) {
+    const idProp = findProperty(obj, 'id');
+    if (!idProp)
+        return false;
+    const init = idProp.initializer;
+    if (ts.isStringLiteralLike(init)) {
+        return init.text === id;
+    }
+    return false;
+}
+function findProperty(obj, name) {
+    for (const p of obj.properties) {
+        if (!ts.isPropertyAssignment(p))
+            continue;
+        const n = p.name;
+        if (ts.isIdentifier(n) && n.text === name)
+            return p;
+        if (ts.isStringLiteral(n) && n.text === name)
+            return p;
+    }
+    return null;
+}
+function extractSimpleHasSelectorArg(expr, sf) {
+    if (!ts.isArrowFunction(expr))
+        return null;
+    let body = expr.body;
+    if (ts.isParenthesizedExpression(body))
+        body = body.expression;
+    if (!ts.isObjectLiteralExpression(body))
+        return null;
+    if (body.properties.length !== 1)
+        return null;
+    const okProp = body.properties[0];
+    if (!okProp || !ts.isPropertyAssignment(okProp))
+        return null;
+    if (!ts.isIdentifier(okProp.name) || okProp.name.text !== 'ok')
+        return null;
+    const okValue = okProp.initializer;
+    if (!ts.isAwaitExpression(okValue))
+        return null;
+    const call = okValue.expression;
+    if (!ts.isCallExpression(call))
+        return null;
+    if (!ts.isIdentifier(call.expression) || call.expression.text !== 'hasSelector')
+        return null;
+    if (call.arguments.length !== 2)
+        return null;
+    const [arg0, arg1] = call.arguments;
+    if (!arg0 || !arg1)
+        return null;
+    if (!ts.isIdentifier(arg0) || arg0.text !== 'b')
+        return null;
+    if (!ts.isStringLiteralLike(arg1))
+        return null;
+    const raw = arg1.getText(sf);
+    const quote = detectQuote(raw);
+    if (!quote)
+        return null;
+    return {
+        literalStart: arg1.getStart(sf),
+        literalEnd: arg1.getEnd(),
+        quote,
+        currentSelector: arg1.text
+    };
+}
+function detectQuote(literalText) {
+    const first = literalText[0];
+    if (first === "'" || first === '"' || first === '`')
+        return first;
+    return null;
+}
+function escapeForQuote(s, quote) {
+    let out = s.replace(/\\/g, '\\\\');
+    if (quote === "'")
+        out = out.replace(/'/g, "\\'");
+    else if (quote === '"')
+        out = out.replace(/"/g, '\\"');
+    else {
+        out = out.replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+    }
+    return out;
+}