@pro-vi/designer 0.3.2 → 0.3.4

package/dist/browser.js

@@ -1,7 +1,7 @@
 import { spawn } from 'node:child_process';
 const BIN = process.env.DESIGNER_AGENT_BROWSER_BIN || 'agent-browser';
 const DEFAULT_SESSION = process.env.DESIGNER_SESSION_NAME || 'designer';
-const CDP = process.env.DESIGNER_CDP || '';
+const CDP = process.env.DESIGNER_CDP ?? '9222';
 export function createBrowser({ session = DEFAULT_SESSION, headed = true, timeoutMs = 30_000, cdp = CDP } = {}) {
     const baseEnv = {
         ...process.env,
@@ -53,6 +53,17 @@ export function createBrowser({ session = DEFAULT_SESSION, headed = true, timeou
         close: () => run(['close']).catch(() => null),
         url: () => run(['get', 'url']),
         title: () => run(['get', 'title']),
+        tabs: async () => {
+            const out = await run(['tab', 'list', '--json']);
+            const env = JSON.parse(out);
+            if (env.success === false) {
+                throw new Error(`agent-browser tab list failed: ${JSON.stringify(env.error)}`);
+            }
+            return env.data?.tabs ?? [];
+        },
+        activateTab: async (index) => {
+            await run(['tab', String(index)]);
+        },
         snapshot: ({ interactive = true, scope } = {}) => {
             const args = ['snapshot', '--json'];
             if (interactive)

package/dist/cli.js

@@ -517,9 +517,6 @@ async function checkAgentBrowser() {
 }
 async function checkCdp() {
     const port = process.env.DESIGNER_CDP || '9222';
-    if (!process.env.DESIGNER_CDP) {
-        return { name: `CDP at port ${port}`, status: 'warn', detail: 'DESIGNER_CDP not set; defaulting to 9222. export DESIGNER_CDP=9222 to silence.' };
-    }
     try {
         const res = await fetch(`http://127.0.0.1:${port}/json/version`);
         if (!res.ok)

package/dist/designer-controller.js

@@ -90,19 +90,55 @@ export class DesignerController {
         }
         throw new Error(`Unknown action: ${action}`);
     }
+    async selectMatchingTab() {
+        const tabs = await this.browser.tabs().catch(() => []);
+        if (tabs.length === 0)
+            return { matched: false, candidates: 0 };
+        const stored = getSession(this.key);
+        const targetRoot = stored?.designUrl?.split('?')[0];
+        const candidates = tabs.filter((t) => {
+            if (t.type !== 'page' || !t.url)
+                return false;
+            if (targetRoot)
+                return t.url.startsWith(targetRoot);
+            return /^https:\/\/claude\.ai\/design(\/|$|\?)/.test(t.url);
+        });
+        if (candidates.length === 0)
+            return { matched: false, candidates: 0 };
+        candidates.sort((a, b) => (Number(b.active) - Number(a.active)) || (a.index - b.index));
+        for (const cand of candidates) {
+            await this.browser.activateTab(cand.index).catch(() => null);
+            const composerOk = await this.browser.isVisible(this.selectors.composer.promptTextarea).catch(() => false);
+            const homeOk = this.selectors.login.signedInIndicator
+                ? await this.browser.isVisible(this.selectors.login.signedInIndicator).catch(() => false)
+                : false;
+            if (composerOk || homeOk) {
+                upsertSession(this.key, { lastUrl: await this.currentUrl() });
+                return { matched: true, candidates: candidates.length };
+            }
+        }
+        return { matched: false, candidates: candidates.length };
+    }
     async ensureReady() {
         await ensureCdpUp();
-        const u = await this.currentUrl();
-        if (!/claude\.ai\/design/.test(u)) {
-            await this.browser.open(DESIGN_HOME);
-            await this.browser.waitLoad('networkidle').catch(() => null);
+        const picked = await this.selectMatchingTab();
+        if (picked.matched) {
+            return { ok: true, url: await this.currentUrl(), inSession: await this.isInSession() };
+        }
+        if (picked.candidates === 0) {
+            const u = await this.currentUrl();
+            if (!/claude\.ai\/design/.test(u)) {
+                await this.browser.open(DESIGN_HOME);
+                await this.browser.waitLoad('networkidle').catch(() => null);
+            }
         }
         const homeOk = this.selectors.login.signedInIndicator
             ? await this.browser.isVisible(this.selectors.login.signedInIndicator).catch(() => false)
             : false;
         const sessionOk = await this.browser.isVisible(this.selectors.composer.promptTextarea).catch(() => false);
         if (!homeOk && !sessionOk) {
-            throw new Error('Not signed in to claude.ai/design, or on an unrecognized page. Sign in in the CDP-attached Chrome.');
+            const suffix = picked.candidates > 0 ? ` (checked ${picked.candidates} tab(s))` : '';
+            throw new Error(`Not signed in to claude.ai/design, or on an unrecognized page${suffix}. Sign in in the CDP-attached Chrome.`);
         }
         upsertSession(this.key, { lastUrl: await this.currentUrl() });
         return { ok: true, url: await this.currentUrl(), inSession: await this.isInSession() };
@@ -329,17 +365,25 @@ export class DesignerController {
       })()`).catch(() => null);
         await new Promise((r) => setTimeout(r, 600));
         const result = await this.browser.evalValue(`(() => {
-        const spans = Array.from(document.querySelectorAll('span'));
+        // Walk all text nodes — Claude's file panel wraps filenames in styled-
+        // component <div>s whose class hashes change across deploys. Tag-based
+        // scraping misses them; text-node walking is resilient.
         const seen = new Set();
         const files = [];
-        for (const s of spans) {
-          if (s.children.length) continue;
-          const t = (s.textContent || '').trim();
-          if (!/^[A-Za-z0-9 _.()\\-]+\\.(html|js|css|jsx)$/i.test(t) || seen.has(t)) continue;
+        let designFilesLabelVisible = false;
+        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+        let node;
+        while ((node = walker.nextNode())) {
+          const t = (node.textContent || '').trim();
+          if (t === 'Design Files') designFilesLabelVisible = true;
+          if (!/^[A-Za-z0-9 _.()\\-]+\\.(html|js|css|jsx|tsx|ts|md|json|svg)$/i.test(t)) continue;
+          if (t.length > 80 || seen.has(t)) continue;
           seen.add(t);
           files.push(t);
         }
-        // Folders: rows whose sibling text is 'Folder' (a Claude-side label)
+        // Folders: rows whose sibling text is 'Folder' (a Claude-side label).
+        // Still tag-based since folder rows are structurally different —
+        // revisit if this breaks.
         const folderSet = new Set();
         const divs = Array.from(document.querySelectorAll('div'));
         for (const d of divs) {
@@ -349,12 +393,15 @@ export class DesignerController {
             folderSet.add(lines[0]);
           }
         }
-        return { files, folders: Array.from(folderSet) };
-      })()`).catch(() => ({ files: [], folders: [] }));
+        return { files, folders: Array.from(folderSet), designFilesLabelVisible };
+      })()`).catch(() => ({ files: [], folders: [], designFilesLabelVisible: false }));
+        const files = Array.isArray(result.files) ? result.files : [];
+        const folders = Array.isArray(result.folders) ? result.folders : [];
+        const emptyButLabelVisible = files.length === 0 && result.designFilesLabelVisible === true;
         return {
-            files: Array.isArray(result.files) ? result.files : [],
-            folders: Array.isArray(result.folders) ? result.folders : [],
-            authoritative: (result.folders?.length ?? 0) === 0
+            files,
+            folders,
+            authoritative: !emptyButLabelVisible && folders.length === 0
         };
     }
     async openFile(filename) {

package/dist/scripts/probe.js

@@ -3,9 +3,6 @@ import { createBrowser } from "../browser.js";
 const cmd = process.argv[2];
 const arg = process.argv[3];
 const browser = createBrowser({ headed: true });
-if (!process.env.DESIGNER_CDP) {
-    console.error('[probe] DESIGNER_CDP not set — using agent-browser-managed session (may be blocked by Cloudflare/SSO). Prefer: export DESIGNER_CDP=9222 and relaunch Chrome with --remote-debugging-port=9222.');
-}
 async function main() {
     switch (cmd) {
         case 'login':
@@ -43,12 +40,26 @@ async function main() {
         case 'close':
             await browser.close();
             break;
+        case 'tabs': {
+            const tabs = await browser.tabs();
+            const composer = '[data-testid="chat-composer-input"]';
+            const signedIn = '[data-testid="create-project-button"]';
+            for (const t of tabs) {
+                await browser.activateTab(t.index).catch(() => null);
+                const composerOk = await browser.isVisible(composer).catch(() => false);
+                const signedInOk = await browser.isVisible(signedIn).catch(() => false);
+                const flag = composerOk ? 'composer' : signedInOk ? 'home' : 'unrecognized';
+                console.log(`[${t.index}] active=${t.active ? 'Y' : 'N'} ${flag.padEnd(12)} ${t.url}`);
+            }
+            break;
+        }
         default:
             console.log(`Usage:
   probe.ts login                  open headed window for manual login
   probe.ts open <url>             navigate
   probe.ts url                    print current url
   probe.ts title                  print current title
+  probe.ts tabs                   list CDP tabs with readiness verdict
   probe.ts snapshot [scope]       interactive a11y tree (text)
   probe.ts snapshot-json [scope]  interactive a11y tree (JSON)
   probe.ts screenshot [path]      full-page screenshot

package/dist/ui-anchors.js

@@ -153,6 +153,45 @@ export const UI_ANCHORS = [
             const ok = /[?&]file=/.test(url);
             return { ok: true, detail: ok ? 'file param present' : '(no file open — not a regression)' };
         }
+    },
+    {
+        id: 'session.fileListScrape',
+        category: 'session',
+        description: 'filename text nodes detectable (listFiles scrape still works)',
+        requires: 'session',
+        check: async (b, url) => {
+            const result = await b
+                .evalValue(`(() => {
+            const seen = new Set();
+            const files = [];
+            const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+            let node;
+            while ((node = walker.nextNode())) {
+              const t = (node.textContent || '').trim();
+              if (!/^[A-Za-z0-9 _.()\\-]+\\.(html|js|css|jsx|tsx|ts|md|json|svg)$/i.test(t)) continue;
+              if (t.length > 80 || seen.has(t)) continue;
+              seen.add(t);
+              files.push(t);
+            }
+            return { files };
+          })()`)
+                .catch(() => ({ files: [] }));
+            const files = Array.isArray(result.files) ? result.files : [];
+            if (files.length === 0) {
+                return { ok: false, detail: 'found 0 filenames — scraper regex or DOM layout regressed' };
+            }
+            const match = url.match(/[?&]file=([^&]+)/);
+            if (match && match[1]) {
+                const activeFile = decodeURIComponent(match[1]);
+                if (!files.includes(activeFile)) {
+                    return {
+                        ok: false,
+                        detail: `active file "${activeFile}" not in scrape ([${files.slice(0, 3).join(', ')}...]) — scraper missing files`
+                    };
+                }
+            }
+            return { ok: true, detail: `${files.length} file(s) detected` };
+        }
     }
 ];
 export async function runHealth(browser, opts = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pro-vi/designer",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "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",