@pro-vi/designer 0.3.6 → 0.3.8

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.

package/dist/designer-controller.js

@@ -195,17 +195,42 @@ export class DesignerController {
         const { promptTextarea, sendButton } = this.selectors.composer;
         await this.browser.waitFor(promptTextarea);
         await this.browser.evalValue(`(() => {
-        const ta = document.querySelector(${JSON.stringify(promptTextarea)});
-        if (!ta) throw new Error('textarea not found');
-        const setter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
-        setter.call(ta, ${JSON.stringify(prompt)});
-        ta.dispatchEvent(new Event('input', { bubbles: true }));
-        ta.focus();
-        return true;
+        const el = document.querySelector(${JSON.stringify(promptTextarea)});
+        if (!el) throw new Error('composer input not found');
+        const text = ${JSON.stringify(prompt)};
+        if (el instanceof HTMLTextAreaElement) {
+          // Bypass React's value ownership via the native setter, then fire a
+          // bubbling input event.
+          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) {
+          // Deliver the text as a synthetic paste so the editor's own paste
+          // pipeline updates its internal state; execCommand('insertText')
+          // flattens multi-line prompts into one paragraph.
+          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) {
+            // No editor intercepted the paste — plain contenteditable fallback.
+            document.execCommand('insertText', false, text);
+          }
+          return true;
+        }
+        throw new Error('composer input is neither textarea nor contenteditable: ' + el.tagName);
       })()`);
         for (let i = 0; i < 30; i++) {
             await new Promise((r) => setTimeout(r, 150));
-            const disabled = await this.browser.evalValue(`(() => { const b = document.querySelector(${JSON.stringify(sendButton)}); return !b || b.disabled; })()`);
+            const disabled = await this.browser.evalValue(`(() => { const b = document.querySelector(${JSON.stringify(sendButton)}); return !b || b.disabled || b.getAttribute('aria-disabled') === 'true'; })()`);
             if (!disabled)
                 break;
         }
@@ -520,7 +545,9 @@ export class DesignerController {
         if (!opened)
             await this._clickButtonByText(/^Export$/);
         await new Promise((r) => setTimeout(r, 400));
-        await this._clickButtonByText(/handoff to claude code/i);
+        const viaSendTo = await this._clickClaudeCodeSendTo().catch(() => false);
+        if (!viaSendTo)
+            await this._clickButtonByText(/handoff to claude code/i);
         let handoffUrl = '';
         for (let i = 0; i < 30; i++) {
             await new Promise((r) => setTimeout(r, 300));
@@ -583,6 +610,28 @@ export class DesignerController {
         return true;
       })()`);
     }
+    async _clickClaudeCodeSendTo() {
+        const tabClicked = await this.browser.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;
+      })()`);
+        if (!tabClicked)
+            return false;
+        await new Promise((r) => setTimeout(r, 400));
+        return this.browser.evalValue(`(() => {
+        const sends = Array.from(document.querySelectorAll('button')).filter(b => (b.textContent || '').trim() === 'Send');
+        const target = sends.find(b => {
+          let row = b;
+          for (let i = 0; i < 3 && row.parentElement; i++) row = row.parentElement;
+          return /claude code/i.test(row.textContent || '');
+        });
+        if (!target) return false;
+        target.click();
+        return true;
+      })()`);
+    }
     async _dialogText() {
         return ((await this.browser
             .evalValue(`(() => {

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;
+}