oh-my-design-cli 1.6.0 → 1.6.2

package/skills/claude-design/scripts/clickable_link.sh

@@ -0,0 +1,48 @@
+#!/usr/bin/env bash
+# clickable_link.sh — emit a terminal-clickable OSC-8 hyperlink for a URL.
+#
+# Part of the `claude-design` skill. Used at the end of the flow to surface the
+# resulting claude.ai/design canvas/result link in the terminal as a clickable
+# hyperlink, with a plain-URL fallback line for terminals that don't support OSC-8.
+#
+# Usage:  bash scripts/clickable_link.sh "<url>" ["<label>"]
+#   <url>    required — the link to make clickable
+#   <label>  optional — visible text for the hyperlink (defaults to the url)
+#
+# Behavior:
+#   - If stdout is a TTY, prints the OSC-8 hyperlink AND a plain-url fallback line.
+#   - If stdout is NOT a TTY, prints only the plain url (avoids junk escapes in pipes/files).
+#   - The plain-url fallback line is ALWAYS printed (even if the hyperlink line fails),
+#     so the URL is never lost.
+#   - Exits 2 with a usage message on stderr if no url argument is given.
+
+set -u
+
+if [ "$#" -lt 1 ] || [ -z "${1:-}" ]; then
+  printf 'usage: %s "<url>" ["<label>"]\n' "${0##*/}" >&2
+  exit 2
+fi
+
+url=$1
+label=${2:-$url}
+
+# Strip control characters (incl. ESC) from url/label so a malformed value cannot
+# break out of the OSC-8 sequence or inject terminal escapes. Treat the inputs as
+# data, not as terminal control. Uses tr; falls back to the raw value if tr fails.
+strip_ctrl() {
+  # Delete bytes 0x00-0x1F and 0x7F (C0 controls + DEL).
+  printf '%s' "$1" | tr -d '\000-\037\177' 2>/dev/null || printf '%s' "$1"
+}
+url=$(strip_ctrl "$url")
+label=$(strip_ctrl "$label")
+
+# ESC]8;;URL ESC\  LABEL  ESC]8;;ESC\   — OSC-8 hyperlink sequence.
+# Only when stdout is a TTY (otherwise escapes would be junk in pipes/files).
+# `|| true` so a transient write error here never prevents the plain-url fallback below.
+if [ -t 1 ]; then
+  printf '\033]8;;%s\033\\%s\033]8;;\033\\\n' "$url" "$label" || true
+fi
+
+# Plain-url fallback on its own line — ALWAYS printed (the only output when non-TTY,
+# and the safety net when the OSC-8 line is unsupported or failed).
+printf '%s\n' "$url"

package/skills/claude-design/scripts/collect_source.py

@@ -0,0 +1,178 @@
+#!/usr/bin/env python3
+"""collect_source.py — gather the landing/page-critical SOURCE files of a project
+and (optionally) concatenate them into ONE attachable bundle for Claude Design.
+
+WHY: a private GitHub URL is not referenceable by Claude Design. The robust way to
+let it "see the code" is to attach the actual local source. This picks the landing
+entry file + its locally-imported components + the main stylesheet, bounded.
+
+Usage:
+  python3 collect_source.py [--root DIR] [--entry FILE] [--max-files N]
+      [--max-kb N] [--json] [--bundle OUT.md]
+Defaults: root=cwd, max-files=16, max-kb=220.
+- --json   : print {entry, files:[{path,bytes}], total_bytes, note}
+- --bundle : write a single markdown bundle (each file under a `// ==== path ====`
+             header) suitable for one upload; prints the bundle path.
+Regex-based, stdlib only, never crashes.
+"""
+import argparse, os, re, sys, json
+
+SKIP_DIRS = {"node_modules", ".git", "dist", "build", ".next", "out", ".venv",
+             "venv", "__pycache__", ".cache", "coverage", ".turbo", ".vercel"}
+ENTRY_CANDIDATES = [
+    "src/app/page.tsx", "src/app/page.jsx", "app/page.tsx", "app/page.jsx",
+    "src/pages/index.tsx", "src/pages/index.jsx", "pages/index.tsx", "pages/index.jsx",
+    "src/App.tsx", "src/App.jsx", "src/main.tsx", "app/page.js",
+]
+CSS_CANDIDATES = [
+    "src/app/globals.css", "app/globals.css", "src/index.css", "src/styles/globals.css",
+    "styles/globals.css", "src/app/global.css", "src/main.css",
+]
+IMPORT_RE = re.compile(r"""(?:import|export)[^'"]*from\s*['"]([^'"]+)['"]""")
+CODE_EXTS = (".tsx", ".jsx", ".ts", ".js", ".vue", ".svelte", ".astro")
+
+
+def find_root_entry(root, entry):
+    if entry:
+        p = entry if os.path.isabs(entry) else os.path.join(root, entry)
+        return p if os.path.isfile(p) else None
+    for c in ENTRY_CANDIDATES:
+        p = os.path.join(root, c)
+        if os.path.isfile(p):
+            return p
+    return None
+
+
+def resolve_import(root, spec):
+    """Resolve a local import spec to candidate file paths (best-effort)."""
+    if not (spec.startswith("@/") or spec.startswith("./") or spec.startswith("../") or spec.startswith("@/")):
+        return []
+    if spec.startswith("@/"):
+        base = os.path.join(root, "src", spec[2:])
+        if not os.path.exists(os.path.dirname(base)):
+            base = os.path.join(root, spec[2:])  # some configs map @/ to root
+    else:  # relative — resolved by caller against the importer dir
+        base = spec
+    return [base]
+
+
+def collect(root, entry, max_files, max_kb):
+    files, seen = [], set()
+    note = []
+    entry_path = find_root_entry(root, entry)
+
+    def add(p):
+        try:
+            p = os.path.realpath(p)
+            if p in seen or not os.path.isfile(p):
+                return
+            sz = os.path.getsize(p)
+            seen.add(p)
+            files.append({"path": p, "bytes": sz})
+        except OSError:
+            pass
+
+    if entry_path:
+        add(entry_path)
+        try:
+            txt = open(entry_path, encoding="utf-8", errors="ignore").read()
+        except OSError:
+            txt = ""
+        importer_dir = os.path.dirname(entry_path)
+        for spec in IMPORT_RE.findall(txt):
+            cands = []
+            if spec.startswith("@/"):
+                cands = resolve_import(root, spec)
+            elif spec.startswith("./") or spec.startswith("../"):
+                cands = [os.path.normpath(os.path.join(importer_dir, spec))]
+            else:
+                continue
+            for base in cands:
+                # base may be a file (with/without ext), or a dir (barrel) -> include its code files
+                hit = False
+                for ext in ("",) + CODE_EXTS:
+                    fp = base + ext
+                    if os.path.isfile(fp):
+                        add(fp); hit = True; break
+                if not hit and os.path.isdir(base):
+                    note.append("barrel:" + os.path.relpath(base, root))
+                    try:
+                        for fn in sorted(os.listdir(base)):
+                            if fn.endswith(CODE_EXTS):
+                                add(os.path.join(base, fn))
+                    except OSError:
+                        pass
+                elif not hit:
+                    # maybe an index file in a dir
+                    for idx in ("index.tsx", "index.ts", "index.jsx", "index.js"):
+                        fp = os.path.join(base, idx)
+                        if os.path.isfile(fp):
+                            add(fp)
+    else:
+        note.append("no_entry_found")
+
+    # main stylesheet / tokens
+    for c in CSS_CANDIDATES:
+        p = os.path.join(root, c)
+        if os.path.isfile(p):
+            add(p); break
+
+    # bound by count then by cumulative size
+    files = files[:max_files]
+    out, total = [], 0
+    for f in files:
+        if total + f["bytes"] > max_kb * 1024 and out:
+            note.append("size_capped"); break
+        out.append(f); total += f["bytes"]
+    return {"root": root, "entry": entry_path, "files": out, "total_bytes": total,
+            "note": ", ".join(note) or "ok"}
+
+
+def write_bundle(res, out_path):
+    parts = ["# Source bundle — Claude Design 참고용 (로컬 코드)\n",
+             "> 이 프로젝트의 레포가 private 일 수 있어 URL 로 접근이 안 될 수 있습니다.",
+             "> 아래는 랜딩 페이지의 **실제 로컬 소스**(진입 page + import 컴포넌트 + 스타일/토큰)입니다.\n"]
+    root = res["root"]
+    for f in res["files"]:
+        rel = os.path.relpath(f["path"], root)
+        try:
+            body = open(f["path"], encoding="utf-8", errors="ignore").read()
+        except OSError:
+            body = "// (read error)"
+        lang = "tsx" if f["path"].endswith((".tsx", ".jsx")) else (
+            "ts" if f["path"].endswith((".ts", ".js")) else (
+                "css" if f["path"].endswith(".css") else ""))
+        parts.append(f"\n// ===== {rel} =====\n```{lang}\n{body}\n```\n")
+    with open(out_path, "w", encoding="utf-8") as fh:
+        fh.write("\n".join(parts))
+    return out_path
+
+
+def main():
+    ap = argparse.ArgumentParser(description="Collect landing source files / bundle for Claude Design.")
+    ap.add_argument("--root", default=os.getcwd())
+    ap.add_argument("--entry", default=None)
+    ap.add_argument("--max-files", type=int, default=16)
+    ap.add_argument("--max-kb", type=int, default=220)
+    ap.add_argument("--json", action="store_true")
+    ap.add_argument("--bundle", default=None, metavar="OUT")
+    a = ap.parse_args()
+    root = os.path.realpath(a.root)
+    res = collect(root, a.entry, a.max_files, a.max_kb)
+    if a.bundle:
+        res["bundle"] = write_bundle(res, a.bundle)
+    if a.json:
+        print(json.dumps(res, ensure_ascii=False, indent=1))
+    else:
+        print(f"entry: {res['entry']}")
+        print(f"files ({len(res['files'])}, {res['total_bytes']//1024}KB):")
+        for f in res["files"]:
+            print(f"  {os.path.relpath(f['path'], root)}  ({f['bytes']}B)")
+        if res.get("bundle"):
+            print(f"bundle -> {res['bundle']}")
+        print(f"note: {res['note']}")
+    return 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())

package/skills/claude-design/scripts/drive_claude_design.cjs

@@ -0,0 +1,378 @@
+#!/usr/bin/env node
+/**
+ * drive_claude_design.cjs — Playwright-based driver for claude.ai/design.
+ *
+ * WHY: claude-in-chrome's click/screenshot layer depends on OS foreground focus
+ * (a chronic bug: "Cannot access a chrome-extension:// URL of different extension").
+ * Playwright drives its OWN Chrome instance over CDP — no foreground dependency,
+ * and a dedicated profile means no conflicting extensions.
+ *
+ * AUTH: uses a persistent profile dir, so the user logs into claude.ai ONCE
+ * (headed) and every later run is fully automated.
+ *
+ * Run:  NODE_PATH=$(npm root -g) node drive_claude_design.cjs <config.json>
+ * config.json: { projectName, fidelity, prompt, assets[], profileDir, outFile,
+ *                shotDir, loginTimeoutMs, headless, questionAnswers[],
+ *                awaitAnswersMs, answersFile, questionGraceMs, maxQuestionRounds,
+ *                genTimeoutMs, questionsOut }
+ *
+ * claude.ai/design SOMETIMES interjects a "Quick questions" clarifying panel
+ * before generating (multiple-choice chip groups + a Continue button), usually a
+ * MINUTE+ in (after a collapsed "Reading files" phase) and in a "Questions" TAB
+ * that's closed by default. The panel renders in several brittle layouts, so the
+ * driver acts LAYOUT-INDEPENDENTLY: it watches for a visible Continue button and
+ * opens the tab. How it answers:
+ *   - AGENT-REASONED (best, when cfg.awaitAnswersMs is set): the driver dumps the
+ *     questions to cfg.questionsOut and emits QUESTIONS_AWAITING, then polls
+ *     cfg.answersFile. The agent running the skill reads the questions, picks the
+ *     APPROPRIATE option per question from the codebase brief, and writes a JSON
+ *     array of option-text substrings; the driver clicks exactly those.
+ *   - AUTONOMOUS fallback (no agent / timeout): clicks EVERY "Decide for me"/escape
+ *     chip (delegates each group to the context-aware design model).
+ *   - cfg.questionAnswers pre-supplies picks: [{ pick: "<substr>" | ["a","b"] }].
+ * Continue is clicked only AFTER answering, and RESULT_URL only after the design
+ * settles — so it's never the parked questions page.
+ *
+ * Resolve markers on stdout (grep-friendly): [cd] LOGIN_NEEDED / LOGGED_IN /
+ * CREATED / PROMPT_SET / ASSETS / SUBMITTED / QUESTIONS_DETECTED / QUESTIONS_AWAITING /
+ * ANSWERS_RECEIVED / QUESTIONS_ANSWERED / CONTINUE_CLICKED / NO_QUESTIONS /
+ * QUESTIONS_HANDLED / SETTLED / RESULT_URL=<url> / ERROR=<x> / FATAL=<x>.
+ * Browser is left OPEN after success so the user can watch.
+ */
+const fs = require('fs');
+const path = require('path');
+const os = require('os');
+const { chromium } = require('playwright');
+
+function log(...a) { console.log('[cd]', ...a); }
+const cfg = JSON.parse(fs.readFileSync(process.argv[2], 'utf8'));
+const HOME = os.homedir();
+const PROFILE = cfg.profileDir || path.join(HOME, '.claude/skills/claude-design/.runtime/chrome-profile');
+const SHOTDIR = cfg.shotDir || '/tmp/cd-shots';
+const OUT = cfg.outFile || '/tmp/cd-result.json';
+fs.mkdirSync(PROFILE, { recursive: true });
+fs.mkdirSync(SHOTDIR, { recursive: true });
+
+let SHOT = 0;
+async function shot(page, name) {
+  try { const p = path.join(SHOTDIR, `${String(++SHOT).padStart(2, '0')}-${name}.png`); await page.screenshot({ path: p, fullPage: false }); log('SHOT=' + p); } catch (e) {}
+}
+
+// Attach reference files via the composer's "Add to chat" → "Attach file" menu,
+// which triggers a native file picker (handled by Playwright's filechooser event).
+async function attachViaAddToChat(page, files) {
+  const add = page.locator('button[title="Add to chat"], [aria-label="Add to chat"]').first();
+  if (!(await add.count().catch(() => 0))) { log('attach: no Add-to-chat button'); return 0; }
+  async function onePass(list) {
+    await add.click().catch(() => {});
+    await page.waitForTimeout(500);
+    const item = page.locator('button:has-text("Attach file"), [role=menuitem]:has-text("Attach file")').first();
+    if (!(await item.count().catch(() => 0))) { await page.keyboard.press('Escape').catch(() => {}); return false; }
+    const [chooser] = await Promise.all([
+      page.waitForEvent('filechooser', { timeout: 8000 }).catch(() => null),
+      item.click().catch(() => {}),
+    ]);
+    if (!chooser) { await page.keyboard.press('Escape').catch(() => {}); return false; }
+    await chooser.setFiles(list).catch((e) => log('setFiles_warn=' + (e.message || '').split('\n')[0]));
+    return true;
+  }
+  // try all-at-once, else fall back to one-by-one
+  if (await onePass(files)) { await page.waitForTimeout(1800); return files.length; }
+  let n = 0;
+  for (const f of files) { if (await onePass([f])) { n++; await page.waitForTimeout(1400); } }
+  return n;
+}
+
+// Visible page-text length — the one reliable activity/settle signal. During the
+// file-reading phase, the clarifying panel, and design generation the main
+// document text keeps changing; when it stops changing for a sustained window the
+// run has settled. (claude.ai's Stop control has no stable selector, and the chat
+// keeps "reading/thinking/code" wording around forever, so neither is usable.)
+async function bodyLen(page) {
+  return await page.evaluate(() => (document.body.innerText || '').length).catch(() => -1);
+}
+
+// Layout-independent answering — robust where structural grouping is not.
+// claude.ai/design renders the panel in several layouts (with/without title,
+// varied nesting) and the chips live in a "Questions" TAB that's CLOSED by default.
+// So we don't parse groups; we just open the tab and click EVERY "Decide for me" /
+// escape chip top-to-bottom (each delegates its group to Claude — the appropriate
+// autonomous answer), then Continue. The reliable "a panel awaits" signal is a
+// VISIBLE Continue button (it clears once answered); the chat notice "Claude has
+// some questions" is permanent scrollback and must NOT drive the loop.
+
+// One round-trip snapshot of panel-relevant state.
+async function panelState(page) {
+  return await page.evaluate(() => {
+    const norm = s => (s || '').replace(/\s+/g, ' ').trim();
+    const vis = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 1 && r.height > 1 && s.visibility !== 'hidden' && s.display !== 'none'; };
+    const B = [...document.querySelectorAll('button,[role=button]')].filter(vis);
+    return {
+      contVisible: B.some(b => /^continue$/i.test(norm(b.innerText))),
+      decideCount: B.filter(b => /^decide for me$/i.test(norm(b.innerText))).length,
+      chipCount: B.filter(b => { const t = norm(b.innerText); return t && !/^(share|send|design system|design files|questions|continue|present|sj)$/i.test(t) && !/^claude opus/i.test(t); }).length,
+      generating: /generating (more )?questions|generating options|thinking…|writing questions/i.test(document.body.innerText || ''),
+      notice: /claude has some questions|quick questions about|a few (quick )?questions/i.test(document.body.innerText || ''),
+    };
+  }).catch(() => ({ contVisible: false, decideCount: 0, notice: false }));
+}
+
+// Open the Questions tab ONLY if its chips aren't already visible (don't toggle an
+// open tab shut).
+async function ensureQuestionsOpen(page) {
+  if ((await panelState(page)).contVisible) return true;
+  const tab = page.getByText(/^Questions$/);
+  if (await tab.count().catch(() => 0)) { await tab.first().click().catch(() => {}); await page.waitForTimeout(1500); return true; }
+  return false;
+}
+
+// Dump the open panel's questions for the agent to reason over: the visible option
+// chip labels (what the agent picks from) plus the readable panel text for context.
+async function extractQuestions(page) {
+  return await page.evaluate(() => {
+    const norm = s => (s || '').replace(/\s+/g, ' ').trim();
+    const vis = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 1 && r.height > 1 && s.visibility !== 'hidden'; };
+    const isGlobal = t => /^(share|send|design system|design files|questions|sj|new chat|copy|download|export|present|continue)$/i.test(t) || /^claude opus/i.test(t);
+    const chips = [...document.querySelectorAll('button,[role=button]')].filter(vis).map(b => norm(b.innerText)).filter(t => t && !isGlobal(t));
+    const cont = [...document.querySelectorAll('button,[role=button]')].filter(vis).find(b => /^continue$/i.test(norm(b.innerText)));
+    let panelText = '';
+    if (cont) { let x = cont; for (let i = 0; i < 8 && x.parentElement; i++) { x = x.parentElement; if ([...x.querySelectorAll('button,[role=button]')].filter(b => chips.includes(norm(b.innerText))).length >= Math.min(4, chips.length)) break; } panelText = norm(x.innerText).slice(0, 2000); }
+    return { chips, panelText };
+  }).catch(() => ({ chips: [], panelText: '' }));
+}
+
+// Apply answers to the open panel. `picks` = option-text substrings, clicked
+// strictly top-to-bottom by absolute Y (so duplicate labels across groups resolve
+// in order). If `sweepDecide`, also click every Decide/escape chip that ISN'T near
+// an already-picked one (fills groups the agent didn't answer; won't override one
+// it did). Returns chips clicked.
+async function answerVisiblePanel(page, picks, sweepDecide) {
+  let clicked = 0, lastAbsY = -1;
+  const pickedYs = [];
+  for (const sub of (picks || [])) {
+    const c = await page.evaluate(({ sub, lastAbsY }) => {
+      const norm = s => (s || '').replace(/\s+/g, ' ').trim();
+      const vis = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 1 && r.height > 1 && s.visibility !== 'hidden'; };
+      const cands = [...document.querySelectorAll('button,[role=button]')].filter(vis)
+        .filter(b => !/^continue$/i.test(norm(b.innerText)) && norm(b.innerText).toLowerCase().includes(String(sub).toLowerCase()))
+        .map(el => ({ el, absY: el.getBoundingClientRect().top + window.scrollY })).sort((a, b) => a.absY - b.absY);
+      const next = cands.find(c => c.absY > lastAbsY + 4) || cands[0];
+      if (!next) return null;
+      next.el.scrollIntoView({ block: 'center', behavior: 'instant' });
+      const r = next.el.getBoundingClientRect();
+      return { x: Math.round(r.x + r.width / 2), y: Math.round(r.y + r.height / 2), absY: next.absY };
+    }, { sub, lastAbsY }).catch(() => null);
+    if (c) { await page.mouse.click(c.x, c.y).catch(() => {}); lastAbsY = c.absY; pickedYs.push(c.absY); clicked++; await page.waitForTimeout(200); }
+  }
+  if (sweepDecide) {
+    lastAbsY = -1;
+    for (let guard = 0; guard < 30; guard++) {
+      const c = await page.evaluate(({ lastAbsY, pickedYs }) => {
+        const norm = s => (s || '').replace(/\s+/g, ' ').trim();
+        const vis = el => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 1 && r.height > 1 && s.visibility !== 'hidden'; };
+        const isPick = b => { const t = norm(b.innerText); return /^decide for me$/i.test(t) || /^(don'?t need|no tweaks?|none|skip|no preference|keep exactly|keep it mostly)\b/i.test(t); };
+        const cands = [...document.querySelectorAll('button,[role=button]')].filter(vis).filter(isPick)
+          .map(el => ({ el, absY: el.getBoundingClientRect().top + window.scrollY })).sort((a, b) => a.absY - b.absY);
+        const next = cands.find(c => c.absY > lastAbsY + 4 && !pickedYs.some(py => Math.abs(py - c.absY) < 110));
+        if (!next) return null;
+        next.el.scrollIntoView({ block: 'center', behavior: 'instant' });
+        const r = next.el.getBoundingClientRect();
+        return { x: Math.round(r.x + r.width / 2), y: Math.round(r.y + r.height / 2), absY: next.absY };
+      }, { lastAbsY, pickedYs }).catch(() => null);
+      if (!c) break;
+      await page.mouse.click(c.x, c.y).catch(() => {});
+      lastAbsY = c.absY; clicked++;
+      await page.waitForTimeout(200);
+    }
+  }
+  return clicked;
+}
+
+(async () => {
+  const ctx = await chromium.launchPersistentContext(PROFILE, {
+    channel: 'chrome',
+    headless: !!cfg.headless,
+    viewport: null,
+    args: ['--disable-blink-features=AutomationControlled', '--start-maximized', '--no-first-run', '--no-default-browser-check'],
+  });
+  let page = ctx.pages()[0] || await ctx.newPage();
+  page.setDefaultTimeout(45000);
+
+  const PROJ = 'input[placeholder="Project name"]';
+
+  log('goto claude.ai/design');
+  await page.goto('https://claude.ai/design', { waitUntil: 'domcontentloaded' }).catch(() => {});
+  await page.waitForTimeout(2500);
+  await shot(page, 'initial');
+
+  // ---- LOGIN WAIT: poll ALL pages for the create panel. CRITICAL: do NOT
+  //      force-navigate during login — that resets the user's login flow.
+  //      claude.ai auto-redirects to /design after login (returnTo). Crash-proof
+  //      via setTimeout (page.waitForTimeout throws if the page closes). ----
+  const deadline = Date.now() + (cfg.loginTimeoutMs || 300000);
+  let ready = false, warned = false;
+  while (Date.now() < deadline) {
+    try {
+      for (const pg of ctx.pages()) {
+        const vis = await pg.locator(PROJ).first().isVisible({ timeout: 600 }).catch(() => false);
+        if (vis) { page = pg; ready = true; break; }
+      }
+    } catch (e) { /* transient (a page is navigating/closing) — ignore and retry */ }
+    if (ready) break;
+    if (!warned) {
+      log('LOGIN_NEEDED — Playwright 가 연 그 Chrome 창에서 claude.ai 에 로그인하세요. 그 창 그대로 두면(닫지 말 것) 자동으로 이어집니다. 한 번만 하면 프로필에 저장됩니다.');
+      try { await ctx.pages()[0].screenshot({ path: path.join(SHOTDIR, '02-login.png') }); } catch {}
+      warned = true;
+    }
+    await new Promise(r => setTimeout(r, 2500));
+  }
+  if (!ready) { log('ERROR=login_timeout url=' + page.url()); fs.writeFileSync(OUT, JSON.stringify({ error: 'login_timeout' })); return; }
+  log('LOGGED_IN');
+  await shot(page, 'panel');
+
+  // ---- Fill project name ----
+  await page.fill(PROJ, cfg.projectName || 'claude-design');
+  log('name set:', cfg.projectName);
+
+  // ---- Fidelity (e.g. "High fidelity") ----
+  if (cfg.fidelity) {
+    const fb = page.getByRole('button', { name: cfg.fidelity, exact: true });
+    if (await fb.count().catch(() => 0)) { await fb.first().click().catch(() => {}); log('fidelity:', cfg.fidelity); }
+    else { const alt = page.getByText(cfg.fidelity, { exact: true }); if (await alt.count().catch(() => 0)) { await alt.first().click().catch(() => {}); log('fidelity(text):', cfg.fidelity); } }
+  }
+  await shot(page, 'precreate');
+
+  // ---- Create ----
+  const createBtn = page.getByRole('button', { name: 'Create', exact: true });
+  await createBtn.first().click();
+  log('CREATED clicked');
+  await page.waitForTimeout(3500);
+  await shot(page, 'aftercreate');
+
+  // ---- Find composer (editable prompt) on the project page ----
+  let composer = null;
+  const cd = Date.now() + 45000;
+  const cand = ['div[contenteditable="true"]', 'textarea', '[role="textbox"]'];
+  while (Date.now() < cd && !composer) {
+    for (const sel of cand) {
+      const loc = page.locator(sel).last();
+      if (await loc.count().catch(() => 0) && await loc.isVisible().catch(() => false) && await loc.isEditable().catch(() => false)) { composer = loc; break; }
+    }
+    if (!composer) await page.waitForTimeout(1500);
+  }
+  if (!composer) { log('ERROR=composer_not_found url=' + page.url()); await shot(page, 'no-composer'); }
+  else {
+    await composer.click().catch(() => {});
+    try { await composer.fill(cfg.prompt); } catch { await composer.type(cfg.prompt, { delay: 0 }); }
+    log('PROMPT_SET');
+    await shot(page, 'prompt');
+  }
+
+  // ---- Attach reference files (brand images + local source bundle) ----
+  const attachList = (cfg.attachFiles || cfg.assets || []).filter(a => { try { return fs.existsSync(a); } catch { return false; } });
+  if (attachList.length) {
+    let n = 0;
+    try { n = await attachViaAddToChat(page, attachList); } catch (e) { log('attach_err=' + (e.message || '').split('\n')[0]); }
+    log('ASSETS=' + n + '/' + attachList.length);
+    await page.waitForTimeout(2000);
+    await shot(page, 'assets');
+  } else { log('ASSETS=0 (no files)'); }
+
+  // ---- Submit ----
+  if (composer) {
+    const send = page.getByRole('button', { name: /^(send|submit|generate)$/i });
+    if (await send.count().catch(() => 0)) { await send.last().click().catch(() => {}); }
+    else { await composer.press('Enter').catch(() => {}); }
+    log('SUBMITTED');
+    await page.waitForTimeout(3000);
+    await shot(page, 'submitted');
+  }
+
+  // ---- Settle on the project URL (/design/p/<uuid>) ----
+  let url = page.url();
+  { const ud = Date.now() + 30000; while (Date.now() < ud) { if (/\/design\/p\//.test(page.url())) { url = page.url(); break; } await page.waitForTimeout(1500); } }
+
+  // ---- Watch from SUBMITTED until the design settles. The clarifying panel often
+  //      appears a MINUTE+ in (after a collapsed "Reading files" phase) and its chips
+  //      live in a CLOSED "Questions" tab — so each iteration we (1) detect the chat
+  //      notice "Claude has some questions", open that tab, and answer; else (2) track
+  //      page-text stability to decide we've settled. A minWatch floor stops us settling
+  //      during the quiet reading phase before the panel renders (the old premature bug).
+  const hardDeadline = Date.now() + (cfg.genTimeoutMs || 480000);
+  const minWatchUntil = Date.now() + (cfg.questionGraceMs || 165000); // ≥ time for a late panel to appear
+  const maxRounds = cfg.maxQuestionRounds || 8;
+  const submitLen = await bodyLen(page);
+  let round = 0, lastLen = -1, stable = 0, peakLen = submitLen, everAnswered = false, noticeOpens = 0;
+  while (Date.now() < hardDeadline) {
+    let st = await panelState(page);
+    // A panel is waiting if a Continue button is visible. Before the first answer,
+    // the persistent chat notice can also bootstrap one tab-open (bounded so it
+    // can't spin once answered).
+    if (!st.contVisible && st.notice && !everAnswered && noticeOpens < 3) { await ensureQuestionsOpen(page); noticeOpens++; st = await panelState(page); }
+    if (st.contVisible && round < maxRounds) {
+      // Wait for the panel to FULLY render before answering — claude.ai streams the
+      // questions in ("Generating questions…"), so we hold until that's gone AND the
+      // chip count is stable, else we'd answer a half-loaded panel.
+      let prev = -1, same = 0;
+      for (let k = 0; k < 18; k++) { const s = await panelState(page); if (!s.contVisible) break; const settled = !s.generating && s.chipCount === prev && s.chipCount > 0; if (settled) { if (++same >= 2) break; } else { same = 0; prev = s.chipCount; } await page.waitForTimeout(1500); }
+      await ensureQuestionsOpen(page);
+      round++;
+      log('QUESTIONS_DETECTED round=' + round + ' decideChips=' + (await panelState(page)).decideCount);
+
+      // Gather answers. Priority: agent-reasoned (await) > caller pre-supplied >
+      // autonomous "Decide for me". `picks` = option-text substrings.
+      const qOut = cfg.questionsOut || path.join(SHOTDIR, 'questions.json');
+      const answersFile = cfg.answersFile || qOut.replace(/\.json$/i, '') + '.answers.json';
+      const extracted = await extractQuestions(page);
+      let picks = (cfg.questionAnswers || []).flatMap(a => Array.isArray(a.pick) ? a.pick : (a.pick ? [a.pick] : (typeof a === 'string' ? [a] : [])));
+      let sweepDecide = true;
+      try { fs.writeFileSync(qOut, JSON.stringify({ round, answersFile, chips: extracted.chips, panelText: extracted.panelText }, null, 2)); } catch {}
+      if (cfg.awaitAnswersMs) {
+        // Hand the questions to the agent: it reads qOut, reasons over the brief,
+        // and writes answersFile (a JSON array of chosen option-text substrings).
+        try { if (fs.existsSync(answersFile)) fs.unlinkSync(answersFile); } catch {}
+        log('QUESTIONS_AWAITING file=' + qOut + ' answers=' + answersFile + ' chips=' + extracted.chips.length);
+        const dl = Date.now() + cfg.awaitAnswersMs;
+        while (Date.now() < dl) {
+          if (fs.existsSync(answersFile)) {
+            // Apply the agent's picks; KEEP the Decide-for-me sweep on so any group
+            // that streamed in after the agent answered still gets delegated (the
+            // pickedY-skip prevents the sweep from overriding an answered group).
+            try { const a = JSON.parse(fs.readFileSync(answersFile, 'utf8')); const got = Array.isArray(a) ? a : (a.picks || a.answers || []); if (got.length) { picks = got; log('ANSWERS_RECEIVED n=' + picks.length); } } catch (e) { log('answers_parse_warn=' + (e.message || '').split('\n')[0]); }
+            break;
+          }
+          await page.waitForTimeout(2000);
+        }
+        if (sweepDecide && Date.now() >= dl) log('ANSWERS_TIMEOUT (falling back to Decide-for-me)');
+      }
+      const n = await answerVisiblePanel(page, picks, sweepDecide);
+      log('QUESTIONS_ANSWERED=' + n + ' chips' + (sweepDecide ? (picks.length ? ' (picks+decide-sweep)' : ' (decide-sweep)') : ' (agent picks)'));
+      await shot(page, 'answered' + round);
+      const cont = page.getByRole('button', { name: /^continue$/i });
+      if (await cont.count().catch(() => 0)) { await cont.first().click({ timeout: 8000 }).catch((e) => log('continue_warn=' + (e.message || '').split('\n')[0])); log('CONTINUE_CLICKED'); }
+      everAnswered = true; lastLen = -1; stable = 0;
+      await page.waitForTimeout(5000);
+      continue;
+    }
+    // No panel waiting → track page-text stability to decide we've settled.
+    const len = await bodyLen(page);
+    if (len > peakLen) peakLen = len;
+    if (len === lastLen) stable++; else { stable = 0; lastLen = len; }
+    const activity = everAnswered || (peakLen - submitLen > 300);
+    // Don't settle before minWatch (a late panel may still be coming); after that,
+    // 6 stable samples (~30s unchanged) with real activity seen = settled.
+    if (stable >= 6 && activity && Date.now() > minWatchUntil) break;
+    await page.waitForTimeout(5000);
+  }
+  if (round === 0) log('NO_QUESTIONS'); else log('QUESTIONS_HANDLED rounds=' + round);
+  log(Date.now() >= hardDeadline ? 'GENERATION_TIMEOUT (capturing URL anyway)' : 'SETTLED');
+
+  // ---- Capture the real result URL ----
+  if (/\/design\/p\//.test(page.url())) url = page.url();
+  log('RESULT_URL=' + url);
+  fs.writeFileSync(OUT, JSON.stringify({ url, questionRounds: round }, null, 2));
+  await shot(page, 'final');
+
+  log('DONE — 브라우저는 열어 둡니다(생성 진행을 볼 수 있게). 닫으려면 이 창을 직접 닫으세요.');
+  // Intentionally do NOT close ctx: keep the browser open. Process stays alive.
+})().catch(e => { console.log('[cd] FATAL=' + (e && e.message ? e.message.split('\n')[0] : e)); try { fs.writeFileSync(OUT, JSON.stringify({ error: String(e && e.message || e) })); } catch {} process.exit(1); });