@pro-vi/designer 0.3.10 → 0.3.11

package/dist/scripts/trace-spike.js

@@ -0,0 +1,274 @@
+#!/usr/bin/env -S node --import tsx
+import fs from 'node:fs';
+import path from 'node:path';
+import { DesignerController } from "../designer-controller.js";
+import { CdpTraceRecorder } from "../cdp-trace.js";
+import { artifactsRoot } from "../artifact-store.js";
+import { getSession } from "../session-store.js";
+const USAGE = `Usage:
+  trace-spike.ts quota   [--seconds 60]                 capture quota banner + short idle trace
+  trace-spike.ts idle    [--minutes 3]                  baseline noise trace
+  trace-spike.ts success "<prompt>" [--key K] [--name N] [--fidelity highfi|wireframe] [--decisive] [--sample-ms 1500]
+  trace-spike.ts noop    ["<prompt>"] [--key K]         chat-only prompt (expects no file change)
+  trace-spike.ts watch   [--key K]                      record until Ctrl-C (opportunistic capture)
+
+Traces land in artifacts/trace/<scenario>-<ts>/{trace.jsonl,manifest.json}.`;
+function parseArgv(argv) {
+    const positional = [];
+    const flags = {};
+    for (let i = 0; i < argv.length; i++) {
+        const a = argv[i];
+        if (!a)
+            continue;
+        if (a.startsWith('--')) {
+            const name = a.slice(2);
+            const next = argv[i + 1];
+            if (next !== undefined && !next.startsWith('--')) {
+                flags[name] = next;
+                i++;
+            }
+            else {
+                flags[name] = true;
+            }
+        }
+        else {
+            positional.push(a);
+        }
+    }
+    return { positional, flags };
+}
+function escapeRegExp(s) {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+const NOOP_PROMPT = 'Answer in chat only — do not create, modify, or delete any files: briefly describe what the current design does.';
+function buildSampleJs(c) {
+    const sel = c.selectors;
+    return `(() => {
+    const q = (s) => { try { return document.querySelector(s); } catch { return null; } };
+    const vis = (el) => { if (!el) return false; const r = el.getBoundingClientRect(); return r.width > 0 && r.height > 0; };
+    const composer = q(${JSON.stringify(sel.composer.promptTextarea)});
+    const send = q(${JSON.stringify(sel.composer.sendButton)});
+    const iframe = q(${JSON.stringify(sel.preview.iframeOrContainer)});
+    const msgs = q(${JSON.stringify(sel.messages.chatMessagesContainer)});
+    let chatTurnCount = 0; let lastTurnRole = null;
+    if (msgs) {
+      const turns = msgs.querySelectorAll('[data-index]');
+      chatTurnCount = turns.length;
+      const last = turns[turns.length - 1];
+      if (last) {
+        const t = (last.innerText || '').trim();
+        lastTurnRole = t.startsWith('Claude') ? 'assistant' : t.startsWith('You') ? 'user' : 'unknown';
+      }
+    }
+    // selectors.json has composer.stopButton: null — probe generically so the
+    // trace doubles as selector discovery for the real stop button.
+    let stopProbe = null;
+    for (const b of Array.from(document.querySelectorAll('button'))) {
+      const label = ((b.getAttribute('aria-label') || '') + ' ' + (b.textContent || '')).trim();
+      if (/\\b(stop|cancel)\\b/i.test(label) && vis(b)) {
+        stopProbe = {
+          label: label.slice(0, 80),
+          testid: b.getAttribute('data-testid'),
+          outerHTML: b.outerHTML.slice(0, 400)
+        };
+        break;
+      }
+    }
+    return {
+      url: location.href,
+      iframeSrc: iframe && iframe.src ? iframe.src : null,
+      composerVisible: vis(composer),
+      sendVisible: vis(send),
+      sendDisabled: send ? (send.disabled === true || send.getAttribute('aria-disabled') === 'true') : null,
+      chatTurnCount,
+      lastTurnRole,
+      stopProbe
+    };
+  })()`;
+}
+const QUOTA_BANNER_JS = `(() => {
+  // Find the smallest element whose text mentions a percentage AND
+  // weekly-limit language — that's the usage banner.
+  const all = Array.from(document.querySelectorAll('div, section, aside'));
+  let best = null;
+  for (const el of all) {
+    const t = (el.innerText || '').trim();
+    if (!t || t.length > 600) continue;
+    if (!/\\d+\\s*%/.test(t)) continue;
+    if (!/week|usage|limit|resets/i.test(t)) continue;
+    if (!best || t.length < (best.innerText || '').trim().length) best = el;
+  }
+  if (!best) return { found: false, text: null, outerHTML: null };
+  return { found: true, text: (best.innerText || '').trim(), outerHTML: best.outerHTML.slice(0, 8000) };
+})()`;
+function sleep(ms) {
+    return new Promise((r) => setTimeout(r, ms));
+}
+async function main() {
+    const { positional, flags } = parseArgv(process.argv.slice(2));
+    const scenario = positional[0] || '';
+    if (!['quota', 'idle', 'success', 'noop', 'watch'].includes(scenario)) {
+        console.log(USAGE);
+        process.exit(scenario ? 1 : 0);
+    }
+    const key = String(flags.key || 'trace-spike');
+    const sampleMs = Number(flags['sample-ms'] || (scenario === 'idle' || scenario === 'watch' ? 5000 : 1500));
+    const controller = new DesignerController({ key });
+    const ready = await controller.ensureReady();
+    console.log(`ready: ${ready.url}`);
+    let prompt = null;
+    if (scenario === 'success' || scenario === 'noop') {
+        prompt = positional[1] || (scenario === 'noop' ? NOOP_PROMPT : null);
+        if (!prompt) {
+            console.error('success requires a prompt argument');
+            process.exit(1);
+        }
+        const stored = getSession(key);
+        if (stored?.designUrl) {
+            await controller.resumeSession();
+        }
+        else if (scenario === 'noop') {
+            console.error(`No stored session for key=${key} — run a success scenario first so noop has a design to ask about.`);
+            process.exit(1);
+        }
+        else {
+            const name = String(flags.name || 'aurora-trace');
+            const fidelity = flags.fidelity === 'wireframe' ? 'wireframe' : 'highfi';
+            const created = await controller.createSession(name, fidelity);
+            console.log(`created session: ${created.url}`);
+        }
+    }
+    const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const outDir = path.join(artifactsRoot(), 'trace', `${scenario}-${stamp}`);
+    fs.mkdirSync(outDir, { recursive: true });
+    const targetUrlFlag = typeof flags['target-url'] === 'string' ? String(flags['target-url']) : null;
+    const recorder = await CdpTraceRecorder.attach({
+        outFile: path.join(outDir, 'trace.jsonl'),
+        preferUrlPrefix: getSession(key)?.designUrl?.split('?')[0] || null,
+        ...(targetUrlFlag ? { urlPattern: new RegExp('^' + escapeRegExp(targetUrlFlag)) } : {})
+    });
+    await recorder.start();
+    console.log(`recording → ${outDir}`);
+    const manifest = {
+        scenario,
+        key,
+        prompt,
+        startedAt: new Date().toISOString(),
+        endedAt: null,
+        aborted: false,
+        node: process.version,
+        cdp: recorder.targetInfo(),
+        iterate: null,
+        quota: null,
+        summary: null
+    };
+    const sampleJs = buildSampleJs(controller);
+    let samplerInFlight = false;
+    const sampler = setInterval(() => {
+        if (samplerInFlight)
+            return;
+        samplerInFlight = true;
+        controller.browser
+            .evalValue(sampleJs)
+            .then((sample) => recorder.record({ ts: Date.now(), kind: 'dom-sample', sample }))
+            .catch(() => null)
+            .finally(() => {
+            samplerInFlight = false;
+        });
+    }, sampleMs);
+    let finished = false;
+    const finalize = async (aborted) => {
+        if (finished)
+            return;
+        finished = true;
+        clearInterval(sampler);
+        manifest.aborted = aborted;
+        manifest.endedAt = new Date().toISOString();
+        manifest.summary = await recorder.stop();
+        fs.writeFileSync(path.join(outDir, 'manifest.json'), JSON.stringify(manifest, null, 2));
+        console.log(`\ntrace: ${path.join(outDir, 'trace.jsonl')}`);
+        console.log(`manifest: ${path.join(outDir, 'manifest.json')}`);
+        console.log(`events: ${manifest.summary.total} | bodies: ${manifest.summary.bodyCaptures} | reconnects: ${manifest.summary.reconnects}`);
+    };
+    process.on('SIGINT', () => {
+        void finalize(true).then(() => process.exit(130));
+    });
+    try {
+        if (scenario === 'quota') {
+            const screenshotPath = path.join(outDir, 'quota-banner.png');
+            await controller.browser.screenshot(screenshotPath, { full: true }).catch((e) => {
+                console.warn(`screenshot failed: ${e.message}`);
+                return '';
+            });
+            const banner = await controller.browser
+                .evalValue(QUOTA_BANNER_JS)
+                .catch(() => ({ found: false, text: null, outerHTML: null }));
+            let bannerHtmlPath = null;
+            if (banner.found && banner.outerHTML) {
+                bannerHtmlPath = path.join(outDir, 'quota-banner.html');
+                fs.writeFileSync(bannerHtmlPath, banner.outerHTML);
+            }
+            manifest.quota = {
+                bannerText: banner.text,
+                bannerHtmlPath,
+                screenshotPath: fs.existsSync(screenshotPath) ? screenshotPath : null
+            };
+            console.log(banner.found ? `banner: ${banner.text}` : 'banner: NOT FOUND (see screenshot)');
+            const seconds = Number(flags.seconds || 60);
+            recorder.marker('quota-idle-start', { seconds });
+            await sleep(seconds * 1000);
+            recorder.marker('quota-idle-end');
+        }
+        else if (scenario === 'idle') {
+            const minutes = Number(flags.minutes || 3);
+            recorder.marker('idle-start', { minutes });
+            await sleep(minutes * 60_000);
+            recorder.marker('idle-end');
+        }
+        else if (scenario === 'success' || scenario === 'noop') {
+            recorder.marker('iterate-start', { prompt, decisive: flags.decisive === true });
+            const result = await controller.iterate(prompt, { decisive: flags.decisive === true });
+            recorder.marker('iterate-done', {
+                failureMode: result.done.failureMode,
+                elapsedMs: result.done.elapsedMs,
+                changed: result.changed,
+                newFiles: result.newFiles
+            });
+            manifest.iterate = {
+                failureMode: result.done.failureMode,
+                ok: result.done.ok,
+                elapsedMs: result.done.elapsedMs,
+                changed: result.changed,
+                newFiles: result.newFiles,
+                removedFiles: result.removedFiles,
+                activeFile: result.activeFile,
+                htmlBytes: result.htmlBytes,
+                chatReplyBytes: result.chatReply ? result.chatReply.length : 0
+            };
+            console.log(`iterate: ok=${result.done.ok} failureMode=${result.done.failureMode} elapsed=${Math.round(result.done.elapsedMs / 1000)}s newFiles=[${result.newFiles.join(', ')}]`);
+            const banner = await controller.browser
+                .evalValue(QUOTA_BANNER_JS)
+                .catch(() => ({ found: false, text: null, outerHTML: null }));
+            if (banner.found && banner.outerHTML) {
+                const bannerHtmlPath = path.join(outDir, 'quota-banner.html');
+                fs.writeFileSync(bannerHtmlPath, banner.outerHTML);
+                manifest.quota = { bannerText: banner.text, bannerHtmlPath, screenshotPath: null };
+                console.log(`quota banner captured: ${banner.text}`);
+            }
+            await sleep(5000);
+        }
+        else if (scenario === 'watch') {
+            recorder.marker('watch-start');
+            console.log('watching — Ctrl-C to stop');
+            await new Promise(() => {
+            });
+        }
+    }
+    finally {
+        await finalize(false);
+    }
+}
+main().catch(async (e) => {
+    console.error(e.message);
+    process.exit(1);
+});

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,6 +9,92 @@ 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',
@@ -134,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',
@@ -272,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}` });
@@ -295,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.10",
+  "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",