@su-record/vibe 2.16.2 → 2.16.4

package/hooks/scripts/clone-extract.js

@@ -12,6 +12,9 @@
  *   screenshot.png       — full-page screenshot
  *   stylesheets.json     — @font-face + @keyframes harvested from all sheets
  *   states.json          — non-default state rules (hover/focus/active/checked/tab/aria/data-state)
+ *   behaviors.json       — ACTIVE interaction sweep: scroll-triggered header/nav diffs +
+ *                          click-driven tab groups (content-swap detection). Captures JS-set
+ *                          state that static CSS harvesting can't see. Skip with --no-interact.
  *   asset-map.json       — remote URL → local path mapping
  *   assets/images/*, assets/fonts/*
  *
@@ -78,7 +81,7 @@ const CSS_PROPS = [
 // ─── CLI parse ──────────────────────────────────────────────────────
 function parseArgs(argv) {
   const [, , cmd, urlArg, ...rest] = argv;
-  const opts = { stealth: false, ignoreRobots: false };
+  const opts = { stealth: false, ignoreRobots: false, interact: true };
   for (const arg of rest) {
     if (arg.startsWith('--out=')) opts.out = arg.slice(6);
     else if (arg.startsWith('--viewport=')) opts.viewport = arg.slice(11);
@@ -86,6 +89,7 @@ function parseArgs(argv) {
     else if (arg.startsWith('--wait=')) opts.wait = Number(arg.slice(7));
     else if (arg === '--stealth') opts.stealth = true;
     else if (arg === '--ignore-robots') opts.ignoreRobots = true;
+    else if (arg === '--no-interact') opts.interact = false;
   }
   return { cmd, url: urlArg, opts };
 }
@@ -241,7 +245,7 @@ const PAGE_EXTRACT = `
   // Deterministic: read state-dependent declarations straight from the stylesheets
   // (no scripted clicking/hovering, so the output stays reproducible).
   const propSet = new Set(props);
-  const STATE_RE = /:hover|:focus(?:-visible|-within)?|:active|:checked|:target|\\[aria-(?:expanded|selected|current|pressed)|\\[data-(?:state|active|open|selected)|\\[open\\]|\\.is-[a-z-]+|\\.(?:active|open|selected|expanded|current|show|visible)(?![\\w-])/i;
+  const STATE_RE = /:hover|:focus(?:-visible|-within)?|:active|:checked|:target|\\[aria-(?:expanded|selected|current|pressed)|\\[data-(?:state|active|open|selected)|\\[open\\]|\\.is-[a-z-]+|\\.has-[a-z-]+|\\.(?:active|open|selected|expanded|current|show|visible|scrolled|sticky|stuck|pinned|fixed|shrink|shrunk|compact|affix|headroom|scrolling)(?![\\w-])/i;
   const harvestStateRule = (rule, media) => {
     if (rule.selectorText && STATE_RE.test(rule.selectorText)) {
       const decl = {};
@@ -556,6 +560,155 @@ async function freezeAnimations(page) {
   });
 }
 
+// ─── Active interaction sweep ───────────────────────────────────────
+// Static CSS harvesting (states.json) only sees declared :hover/:active/[data-state]
+// rules. It is blind to JS-set state: a header that gains a class on scroll, a tab
+// group that swaps content on click, Framer/GSAP inline-style animations. This sweep
+// actually drives the page and diffs computed styles before/after — the #1 accuracy fix.
+
+// Subset of props worth diffing for scroll/click state changes (kept small on purpose).
+const BEHAVIOR_PROPS = [
+  'background-color', 'background-image', 'box-shadow', 'backdrop-filter',
+  'height', 'min-height', 'padding-top', 'padding-bottom',
+  'transform', 'opacity', 'position', 'top',
+  'border-bottom-width', 'border-bottom-color', 'color',
+];
+
+// Pure style differ — exported for testing. Returns { prop: { from, to } } for changed props.
+function diffStyles(a, b) {
+  const out = {};
+  if (!a || !b) return out;
+  const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+  for (const k of keys) {
+    const from = a[k] ?? null;
+    const to = b[k] ?? null;
+    if (from !== to && (from || to)) out[k] = { from, to };
+  }
+  return out;
+}
+
+// In-page: tag sticky/fixed/top-bar elements with a probe attr so we can re-find them.
+const TAG_SCROLL_CANDIDATES = `(function () {
+  const els = Array.from(document.querySelectorAll(
+    'header, nav, [class*="header" i], [class*="nav" i], [class*="sticky" i], [class*="fixed" i]'
+  ));
+  const out = []; let i = 0;
+  for (const el of els) {
+    if (i >= 6) break;
+    const cs = getComputedStyle(el);
+    const r = el.getBoundingClientRect();
+    const sticky = cs.position === 'fixed' || cs.position === 'sticky';
+    const topBar = r.top >= 0 && r.top < 120 && r.width > window.innerWidth * 0.5;
+    if (!sticky && !topBar) continue;
+    if (el.closest('[data-clone-probe]')) continue;
+    el.setAttribute('data-clone-probe', 'sc' + i);
+    const cls = (el.getAttribute('class') || '').trim().split(/\\s+/).filter(Boolean)[0] || '';
+    out.push({ probe: 'sc' + i, tag: el.tagName.toLowerCase(), cls });
+    i++;
+  }
+  return out;
+})`;
+
+const SNAP_PROBES = `(function (props) {
+  const out = {};
+  document.querySelectorAll('[data-clone-probe]').forEach((el) => {
+    const cs = getComputedStyle(el); const o = {};
+    for (const p of props) { const v = cs.getPropertyValue(p); if (v) o[p] = v.trim(); }
+    out[el.getAttribute('data-clone-probe')] = o;
+  });
+  return out;
+})`;
+
+// In-page: tag tab-like groups (≥2 siblings) so we can click them.
+const TAG_TAB_GROUPS = `(function () {
+  const els = Array.from(document.querySelectorAll(
+    '[role="tab"], [aria-selected], button[class*="tab" i], li[class*="tab" i], [data-state="active"], [data-state="inactive"]'
+  ));
+  const groups = new Map();
+  for (const el of els) {
+    const p = el.parentElement; if (!p) continue;
+    if (!groups.has(p)) groups.set(p, []);
+    groups.get(p).push(el);
+  }
+  const out = []; let g = 0;
+  for (const [, items] of groups) {
+    if (g >= 4) break;
+    if (items.length < 2) continue;
+    items.forEach((el, idx) => el.setAttribute('data-clone-tab', g + '_' + idx));
+    out.push({ group: g, count: items.length, labels: items.map((el) => (el.textContent || '').trim().slice(0, 40)).filter(Boolean) });
+    g++;
+  }
+  return out;
+})`;
+
+// Fingerprint the visible text near a tab group, to detect content swaps on click.
+const TAB_CONTENT_FP = `(function (g) {
+  const first = document.querySelector('[data-clone-tab="' + g + '_0"]');
+  if (!first) return null;
+  const box = first.closest('section, main, div');
+  const root = box ? (box.parentElement || box) : document.body;
+  return (root.innerText || '').replace(/\\s+/g, ' ').trim().slice(0, 4000);
+})`;
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+async function runInteractionSweep(page) {
+  const behaviors = { scroll: [], interactive: [] };
+
+  // ── Scroll-triggered state (header/nav shrink, background, shadow on scroll) ──
+  const candidates = await page.evaluate(`(${TAG_SCROLL_CANDIDATES})()`);
+  if (candidates.length) {
+    const before = await page.evaluate(`(${SNAP_PROBES})(${JSON.stringify(BEHAVIOR_PROPS)})`);
+    const innerH = await page.evaluate('window.innerHeight');
+    const triggerY = Math.min(700, Math.max(200, Math.round(innerH * 0.9)));
+    await page.evaluate(`window.scrollTo(0, ${triggerY})`);
+    await wait(500);
+    const after = await page.evaluate(`(${SNAP_PROBES})(${JSON.stringify(BEHAVIOR_PROPS)})`);
+    await page.evaluate('window.scrollTo(0, 0)');
+    await wait(300);
+    for (const c of candidates) {
+      const changed = diffStyles(before[c.probe], after[c.probe]);
+      if (Object.keys(changed).length) {
+        behaviors.scroll.push({
+          label: c.cls ? `${c.tag}.${c.cls}` : c.tag,
+          tag: c.tag, cls: c.cls, triggerScrollY: triggerY, changed,
+        });
+      }
+    }
+  }
+
+  // ── Click-driven tab groups (content swap detection) ──
+  const groups = await page.evaluate(`(${TAG_TAB_GROUPS})()`);
+  for (const grp of groups) {
+    try {
+      const beforeFp = await page.evaluate(`(${TAB_CONTENT_FP})(${grp.group})`);
+      const clicked = await page.evaluate(
+        `(function (g) { const t = document.querySelector('[data-clone-tab="' + g + '_1"]'); if (!t) return false; t.click(); return true; })(${grp.group})`
+      );
+      if (!clicked) continue;
+      await wait(450);
+      const afterFp = await page.evaluate(`(${TAB_CONTENT_FP})(${grp.group})`);
+      // restore default state
+      await page.evaluate(
+        `(function (g) { const t = document.querySelector('[data-clone-tab="' + g + '_0"]'); if (t) t.click(); })(${grp.group})`
+      );
+      await wait(200);
+      behaviors.interactive.push({
+        kind: 'tab-group',
+        count: grp.count,
+        tabLabels: grp.labels,
+        contentSwapsOnClick: beforeFp != null && afterFp != null && beforeFp !== afterFp,
+      });
+    } catch { /* one bad group must not abort the whole sweep */ }
+  }
+
+  // Clean up probe attributes BEFORE static extraction so they don't pollute output.
+  await page.evaluate(
+    'document.querySelectorAll("[data-clone-probe],[data-clone-tab]").forEach((e) => { e.removeAttribute("data-clone-probe"); e.removeAttribute("data-clone-tab"); })'
+  );
+  return behaviors;
+}
+
 // HTML sanitization: strip scripts/analytics before saving
 function sanitizeHtml(html) {
   return html
@@ -617,6 +770,17 @@ async function capture({ url, opts }) {
     if (opts.wait) await new Promise((r) => setTimeout(r, opts.wait));
     else await new Promise((r) => setTimeout(r, 1200));
 
+    // Active interaction sweep (before freezing — it observes real transitions/JS state).
+    let behaviors = null;
+    if (opts.interact) {
+      try {
+        behaviors = await runInteractionSweep(page);
+        console.log(`[clone-extract] interaction sweep: ${behaviors.scroll.length} scroll-state, ${behaviors.interactive.length} tab-group(s)`);
+      } catch (e) {
+        console.log(`[clone-extract] interaction sweep skipped: ${e.message}`);
+      }
+    }
+
     await freezeAnimations(page);
 
     // PAGE_EXTRACT is a parenthesized function-expression string. page.evaluate treats a
@@ -731,6 +895,22 @@ async function capture({ url, opts }) {
       }, null, 2),
     );
     fs.writeFileSync(path.join(opts.out, 'asset-map.json'), JSON.stringify(assetMap, null, 2));
+    if (behaviors) {
+      // Rewrite any remote asset URLs captured in scroll-state background-image diffs.
+      for (const s of behaviors.scroll) {
+        for (const ch of Object.values(s.changed)) {
+          if (typeof ch.from === 'string') ch.from = rewriteCssValue(ch.from);
+          if (typeof ch.to === 'string') ch.to = rewriteCssValue(ch.to);
+        }
+      }
+      fs.writeFileSync(
+        path.join(opts.out, 'behaviors.json'),
+        JSON.stringify({
+          meta: { url, bp: opts.bp || null, capturedAt: new Date().toISOString() },
+          ...behaviors,
+        }, null, 2),
+      );
+    }
 
     const okCount = Object.values(assetMap).filter((a) => a.status === 'ok').length;
     console.log(`[clone-extract] done → ${opts.out}`);
@@ -742,15 +922,20 @@ async function capture({ url, opts }) {
 }
 
 // ─── Entry ──────────────────────────────────────────────────────────
-const { cmd, url, opts } = parseArgs(process.argv);
+const isMain = process.argv[1] && process.argv[1].replace(/\\/g, '/').endsWith('clone-extract.js');
+if (isMain) {
+  const { cmd, url, opts } = parseArgs(process.argv);
+
+  if (cmd !== 'capture') {
+    console.error('Usage: node clone-extract.js capture <URL> --out=<dir> --viewport=WxH[@DPR] --bp=mo|pc [--stealth] [--ignore-robots] [--no-interact] [--wait=ms]');
+    process.exit(1);
+  }
 
-if (cmd !== 'capture') {
-  console.error('Usage: node clone-extract.js capture <URL> --out=<dir> --viewport=WxH[@DPR] --bp=mo|pc [--stealth] [--ignore-robots] [--wait=ms]');
-  process.exit(1);
+  capture({ url, opts }).catch((err) => {
+    console.error(`[clone-extract] FAIL: ${err.message}`);
+    if (process.env.DEBUG) console.error(err.stack);
+    process.exit(1);
+  });
 }
 
-capture({ url, opts }).catch((err) => {
-  console.error(`[clone-extract] FAIL: ${err.message}`);
-  if (process.env.DEBUG) console.error(err.stack);
-  process.exit(1);
-});
+export { diffStyles };

package/hooks/scripts/clone-spec.js

@@ -27,15 +27,12 @@ function parseArgs(argv) {
     if (a.startsWith('--out=')) opts.out = a.slice(6);
     else if (a.startsWith('--section=')) opts.section = a.slice(10);
     else if (a.startsWith('--feature=')) opts.feature = a.slice(10);
+    else if (a.startsWith('--behaviors=')) opts.behaviors = a.slice(12);
   }
   return { sectionsPath, opts };
 }
 
 const { sectionsPath, opts } = parseArgs(process.argv);
-if (!sectionsPath || !opts.out) {
-  console.error('Usage: node clone-spec.js <sections.json> --out=<dir> [--section=Name] [--feature=name]');
-  process.exit(1);
-}
 
 // ─── Helpers ────────────────────────────────────────────────────────
 function safeName(name) {
@@ -95,6 +92,40 @@ function componentsBlock(components) {
   }).join('\n');
 }
 
+// True if any node in the section subtree matches a behavior's tag (+ optional class).
+function sectionHasNode(section, tag, cls) {
+  const hit = (n) => {
+    if (n.tag === tag && (!cls || (n.classes || '').split(/\s+/).includes(cls))) return true;
+    return (n.children || []).some(hit);
+  };
+  return (section.children || []).some(hit);
+}
+
+function behaviorsBlock(section, behaviors) {
+  if (!behaviors) return null;
+  const scroll = (behaviors.scroll || []).filter((b) => sectionHasNode(section, b.tag, b.cls));
+  // Tab groups aren't tag-keyed; attach to any section that contains a [role=tab]-ish node.
+  const tabs = (behaviors.interactive || []).filter(() =>
+    sectionHasNode(section, 'button') || sectionHasNode(section, 'li') || sectionHasNode(section, 'a'),
+  );
+  if (!scroll.length && !tabs.length) return null;
+
+  const lines = [];
+  for (const b of scroll) {
+    const diffs = Object.entries(b.changed)
+      .map(([k, v]) => `    - ${k}: \`${v.from}\` → \`${v.to}\``).join('\n');
+    lines.push(`- **Scroll-triggered** on \`${b.label}\` (past ~${b.triggerScrollY}px scroll):\n${diffs}`);
+  }
+  for (const t of tabs) {
+    const labels = (t.tabLabels || []).map((l) => `"${l}"`).join(', ') || '(unlabeled)';
+    const swap = t.contentSwapsOnClick
+      ? '**content SWAPS on click** → extract every tab\'s content/assets, build click-driven'
+      : 'no content swap detected (styling-only tabs)';
+    lines.push(`- **Tab group** ×${t.count} [${labels}]: ${swap}`);
+  }
+  return lines.join('\n');
+}
+
 function assetsBlock(images) {
   const bg = (images && images.bg) || [];
   const content = (images && images.content) || [];
@@ -105,12 +136,16 @@ function assetsBlock(images) {
 }
 
 // ─── Spec rendering ─────────────────────────────────────────────────
-function renderSpec(section, meta) {
+function renderSpec(section, meta, behaviors) {
   const box = section.box || {};
   const texts = collectText(section);
   const textBlock = texts.length
     ? texts.map((t) => `- "${t}"`).join('\n')
     : '- (no direct text — likely visual/asset-only section)';
+  const behavior = behaviorsBlock(section, behaviors);
+  const behaviorSection = behavior
+    ? `\n## Dynamic behaviors — observed by ACTIVE capture (not guesses)\n_Captured by driving the live page (scroll/click). These override the static heuristic above._\n${behavior}\n`
+    : '';
   return `# ${section.name} — Clone Spec (${meta.bp})
 
 > Auto-generated skeleton from sections.json by clone-spec.js. **This is a build contract.**
@@ -123,7 +158,7 @@ function renderSpec(section, meta) {
 
 ## Interaction model — ⚠ confirm before building
 ${interactionBlock(section.interaction)}
-
+${behaviorSection}
 ## States to reproduce
 _Harvested non-default state rules (hover/focus/active/checked/tab/aria/data-state). Implement each._
 ${statesBlock(section.states)}
@@ -162,6 +197,13 @@ function main() {
     viewport: data.meta && data.meta.viewport,
     bp: opts.section ? (data.meta && data.meta.bp) : (data.meta && data.meta.bp) || '?',
   };
+  // behaviors.json (active interaction sweep) lives next to the source computed.json.
+  const behaviorsPath = opts.behaviors || path.join(path.dirname(sectionsPath), 'behaviors.json');
+  let behaviors = null;
+  if (fs.existsSync(behaviorsPath)) {
+    try { behaviors = JSON.parse(fs.readFileSync(behaviorsPath, 'utf8')); } catch { behaviors = null; }
+  }
+
   let sections = data.sections || [];
   if (opts.section) sections = sections.filter((s) => s.name === opts.section);
   if (!sections.length) {
@@ -172,15 +214,24 @@ function main() {
   fs.mkdirSync(opts.out, { recursive: true });
   for (const section of sections) {
     const file = path.join(opts.out, `${safeName(section.name)}.spec.md`);
-    fs.writeFileSync(file, renderSpec(section, meta));
+    fs.writeFileSync(file, renderSpec(section, meta, behaviors));
     console.log(`[clone-spec] wrote ${file}`);
   }
   console.log(`[clone-spec] done → ${sections.length} spec(s) in ${opts.out}`);
 }
 
-try { main(); }
-catch (e) {
-  console.error(`[clone-spec] FAIL: ${e.message}`);
-  if (process.env.DEBUG) console.error(e.stack);
-  process.exit(1);
+const isMain = process.argv[1] && process.argv[1].replace(/\\/g, '/').endsWith('clone-spec.js');
+if (isMain) {
+  if (!sectionsPath || !opts.out) {
+    console.error('Usage: node clone-spec.js <sections.json> --out=<dir> [--section=Name] [--feature=name] [--behaviors=path]');
+    process.exit(1);
+  }
+  try { main(); }
+  catch (e) {
+    console.error(`[clone-spec] FAIL: ${e.message}`);
+    if (process.env.DEBUG) console.error(e.stack);
+    process.exit(1);
+  }
 }
+
+export { sectionHasNode, behaviorsBlock };

package/hooks/scripts/llm-orchestrate.js

@@ -105,6 +105,7 @@ function resolveModel(providerName, config) {
   if (providerName === 'gpt-codex') return config.models?.gptCodex || 'gpt-5.3-codex';
   if (providerName === 'gpt') return config.models?.gpt || 'gpt-5.5';
   if (providerName === 'antigravity') return config.models?.antigravity || 'antigravity';
+  if (providerName === 'zai') return config.models?.zaiCoding || config.models?.zai || 'glm-5.2';
   if (providerName === 'claude') return 'claude';
   return providerName;
 }
@@ -271,6 +272,46 @@ function callCodexCli(prompt, sysPrompt, jsonMode, model, timeoutMs) {
   });
 }
 
+// ZAI (Z.ai / GLM) — OpenAI 호환 HTTP API (CLI 없음)
+const ZAI_BASE_GENERAL = 'https://api.z.ai/api/paas/v4';
+const ZAI_BASE_CODING = 'https://api.z.ai/api/coding/paas/v4';
+
+function callZaiApi(prompt, sysPrompt, jsonMode, model, timeoutMs) {
+  const vibeConfig = readVibeConfig();
+  const codingKey = vibeConfig.credentials?.zai?.codingApiKey || process.env.ZAI_CODING_API_KEY;
+  const generalKey = vibeConfig.credentials?.zai?.apiKey || process.env.ZAI_API_KEY;
+  const useCoding = Boolean(codingKey);
+  const apiKey = codingKey || generalKey;
+  if (!apiKey) return Promise.reject(new Error('ZAI API key not set (vibe zai coding-key <key>)'));
+
+  const base = useCoding ? ZAI_BASE_CODING : ZAI_BASE_GENERAL;
+  const system = sysPrompt && sysPrompt !== DEFAULT_SYSTEM_PROMPT ? sysPrompt : DEFAULT_SYSTEM_PROMPT;
+  const content = jsonMode ? `${prompt}\n\nRespond with valid JSON only.` : prompt;
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeoutMs || CLI_TIMEOUT_MS);
+
+  return fetch(`${base}/chat/completions`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${apiKey}` },
+    body: JSON.stringify({
+      model,
+      messages: [{ role: 'system', content: system }, { role: 'user', content }],
+      max_tokens: 4096,
+      temperature: 0,
+    }),
+    signal: controller.signal,
+  }).then(async (res) => {
+    if (!res.ok) {
+      const body = await res.text().catch(() => '');
+      throw new Error(`zai api failed (code ${res.status}): ${body.slice(0, 500)}`);
+    }
+    const data = await res.json();
+    const text = data?.choices?.[0]?.message?.content?.trim();
+    if (!text) throw new Error('zai api returned empty response');
+    return text;
+  }).finally(() => clearTimeout(timer));
+}
+
 function callAntigravityCli(prompt, sysPrompt, jsonMode, timeoutMs) {
   const fullPrompt = buildCliPrompt(prompt, sysPrompt, jsonMode);
   const args = ['-p', fullPrompt];
@@ -357,6 +398,14 @@ async function callProvider(providerName, prompt, sysPrompt, jsonMode, timeoutMs
     return await callAntigravityCli(prompt, sysPrompt, jsonMode, timeoutMs);
   }
 
+  if (providerName === 'zai') {
+    // coding 키가 있으면 coding plan flagship(5.2), 아니면 일반 API 상한(5.1)
+    const hasCoding = Boolean(vibeConfig.credentials?.zai?.codingApiKey || process.env.ZAI_CODING_API_KEY);
+    const fallback = hasCoding ? 'glm-5.2' : 'glm-5.1';
+    const model = vibeConfig.models?.zaiCoding || vibeConfig.models?.zai || process.env.ZAI_MODEL || fallback;
+    return await callZaiApi(prompt, sysPrompt, jsonMode, model, timeoutMs);
+  }
+
   if (providerName === 'claude') {
     return await callClaudeCli(prompt, sysPrompt, jsonMode, timeoutMs);
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@su-record/vibe",
-  "version": "2.16.2",
-  "description": "AI Coding Framework for Claude Code — 42+ agents, 70 skills, multi-LLM orchestration",
+  "version": "2.16.4",
+  "description": "AI Coding Framework for Claude Code — 42+ agents, 73 skills, multi-LLM orchestration",
   "type": "module",
   "main": "dist/cli/index.js",
   "exports": {
@@ -27,6 +27,8 @@
     "dev": "tsc --watch",
     "gen:skill-docs": "npx tsx scripts/gen-skill-docs.ts",
     "gen:skill-docs:check": "npx tsx scripts/gen-skill-docs.ts --check",
+    "sync:agent-models": "npx tsx scripts/sync-agent-models.ts",
+    "sync:agent-models:check": "npx tsx scripts/sync-agent-models.ts --check",
     "validate:skill-invocation": "npx tsx scripts/validate-skill-invocation.ts",
     "validate:counts": "npx tsx scripts/validate-counts.ts",
     "test": "vitest run",

package/skills/clone/SKILL.md

@@ -41,6 +41,11 @@ The rendered DOM is the source of truth for markup. Screenshots are for pixel ve
 
 6. Do NOT ship default-state-only. Implement every harvested state (hover/focus/active/open/
    tab-switch) from states.json / the section spec.
+
+7. Do NOT ignore behaviors.json. The ACTIVE interaction sweep (scroll-state diffs +
+   click-driven tab content-swap detection) catches JS-set state that static CSS harvesting
+   is blind to. When the spec's "Dynamic behaviors" block conflicts with the static
+   interaction heuristic, the active capture wins.
 ```
 
 ## Full Flow
@@ -119,6 +124,7 @@ node {{VIBE_PATH}}/hooks/scripts/clone-extract.js capture <URL> \
   ├── computed.json       — per-element computed CSS + bounding box
   ├── screenshot.png      — full-page screenshot
   ├── states.json         — non-default state rules (hover/focus/active/checked/tab/aria/data-state)
+  ├── behaviors.json      — ACTIVE sweep: scroll-triggered header/nav diffs + click-driven tab groups
   ├── assets/
   │   ├── images/         — all <img>, background-image, <picture> sources
   │   └── fonts/          — @font-face srcs
@@ -136,8 +142,14 @@ node {{VIBE_PATH}}/hooks/scripts/clone-extract.js capture <URL> \
 6. Rewrite asset URLs in rendered.html and computed.json to local paths
 7. Strip inline analytics/tracking scripts before saving rendered.html
 8. Harvest non-default state rules from all stylesheets → states.json
-   (deterministic: read :hover/:focus/:active/:checked/[aria-*]/[data-state]/.is-*/.active
-    declarations straight from CSS — NO scripted clicking, so output stays reproducible)
+   (deterministic: read :hover/:focus/:active/:checked/[aria-*]/[data-state]/.is-*/.active/
+    .scrolled/.sticky/.pinned/… declarations straight from CSS — NO scripted clicking)
+9. ACTIVE interaction sweep → behaviors.json (runs after lazy-load, before freeze).
+   Drives the live page to capture JS-set state that CSS harvesting can't see:
+   - Scroll-state diff: tag sticky/fixed/top-bar headers+nav, snapshot computed CSS at
+     scroll 0, scroll past threshold, re-snapshot, diff → {prop: {from, to}, triggerScrollY}
+   - Tab groups: click tab-like sibling sets, detect whether content swaps on click
+   Disable with --no-interact (restores the old fully-deterministic, screenshot-stable capture).
 ```
 
 ---
@@ -256,7 +268,9 @@ node {{VIBE_PATH}}/hooks/scripts/clone-validate.js \
 ```
 
 ⛔ **No section is built without a completed spec.** Step 0 emits `_specs/{Section}.spec.md`
-   (interaction model + states + computed CSS + assets + text + checklist). Before writing a
+   (interaction model + **active-capture Dynamic behaviors** + states + computed CSS + assets +
+   text + checklist). clone-spec.js auto-loads `behaviors.json` from the sections.json dir and
+   attaches matching scroll/tab behaviors per section. Before writing a
    section's component, Claude reviews its spec and resolves every `TODO` (confirm interaction
    model, list states to implement, choose tags, replace copyrighted text). The spec is the
    contract AND the audit trail — it forces extraction rigor before any code is written.
@@ -407,4 +421,5 @@ Claude must:
 | clone-refine.js produces empty sections | Site likely uses Shadow DOM or canvas rendering. Report and ask whether to fall back to screenshot-only mode. |
 | Pixel diff stuck > 0.05 after 5 rounds | Likely font fallback or anti-aliasing. Report metric, allow user to accept threshold. |
 | Interaction model guess wrong (Phase 5) | section.interaction is a static-DOM heuristic. Re-observe the live site, correct the model in the spec, rebuild the section for the confirmed model. |
-| states.json empty but site has hover/tabs | States may be set via inline JS, not CSS rules. Note in the spec and capture them manually from the live site during Phase 5. |
+| states.json empty but site has hover/tabs | States may be set via inline JS, not CSS rules. Check behaviors.json (active sweep captures scroll/tab JS state). If still missing, note in the spec and capture manually during Phase 5. |
+| behaviors.json missing or empty | Active sweep was disabled (--no-interact), hit no sticky/tab elements, or errored (logged, non-fatal). Falls back to static states.json. Re-run without --no-interact to retry. |

package/skills/create-prd/agents/edge-case-finder.md

@@ -1,5 +1,5 @@
 ---
-name: edge-case-finder
+name: prd-edge-case-finder
 role: Identifies edge cases, constraints, and risks for each requirement
 tools: [Read, WebSearch]
 ---
@@ -17,8 +17,8 @@ Stress-tests the requirements by systematically exploring what happens at bounda
 - Flag security concerns: injection, over-fetching, authorization bypass
 
 ## Input
-- User stories and acceptance criteria from requirements-writer
-- Research brief from researcher (constraints section)
+- User stories and acceptance criteria from prd-requirements-writer
+- Research brief from prd-researcher (constraints section)
 
 ## Output
 Edge cases and risks appended to each user story, plus a global risks section:
@@ -41,7 +41,7 @@ Edge cases and risks appended to each user story, plus a global risks section:
 ```
 
 ## Communication
-- Reports findings to: prioritizer, reviewer
+- Reports findings to: prd-prioritizer, prd-reviewer
 - Receives instructions from: orchestrator (create-prd skill)
 
 ## Domain Knowledge

package/skills/create-prd/agents/prioritizer.md

@@ -1,5 +1,5 @@
 ---
-name: prioritizer
+name: prd-prioritizer
 role: Applies RICE and MoSCoW scoring to rank requirements for implementation
 tools: [Read]
 ---
@@ -17,8 +17,8 @@ Applies structured scoring frameworks to the full requirements list to produce a
 - Document prioritization rationale so it can be revisited
 
 ## Input
-- User stories from requirements-writer
-- Edge cases from edge-case-finder
+- User stories from prd-requirements-writer
+- Edge cases from prd-edge-case-finder
 - Optional: team velocity or sprint capacity
 
 ## Output
@@ -53,7 +53,7 @@ US-01 must ship before US-02 (filter requires results to exist)
 ```
 
 ## Communication
-- Reports findings to: reviewer
+- Reports findings to: prd-reviewer
 - Receives instructions from: orchestrator (create-prd skill)
 
 ## Domain Knowledge

package/skills/create-prd/agents/requirements-writer.md

@@ -1,5 +1,5 @@
 ---
-name: requirements-writer
+name: prd-requirements-writer
 role: Writes user stories and acceptance criteria from research brief
 tools: [Read, Write]
 ---
@@ -17,7 +17,7 @@ Translates research findings and user goals into structured user stories with cl
 - Avoid implementation details — describe behavior, not code
 
 ## Input
-- Research brief from researcher
+- Research brief from prd-researcher
 - User personas or target segment description
 - Optional: existing SPEC or feature file for context
 
@@ -41,7 +41,7 @@ so that I can find items without browsing all categories.
 ```
 
 ## Communication
-- Reports findings to: edge-case-finder, prioritizer, reviewer
+- Reports findings to: prd-edge-case-finder, prd-prioritizer, prd-reviewer
 - Receives instructions from: orchestrator (create-prd skill)
 
 ## Domain Knowledge

package/skills/create-prd/agents/researcher.md

@@ -1,5 +1,5 @@
 ---
-name: researcher
+name: prd-researcher
 role: Gathers market context and user needs using web search and codebase analysis
 tools: [WebSearch, Read, Glob, Grep, Bash]
 ---
@@ -14,7 +14,7 @@ Gathers external context — competitor patterns, industry standards, user expec
 - Identify common user expectations and mental models for this feature type
 - Review existing codebase for related patterns, conventions, or prior art
 - Surface relevant regulatory, accessibility, or compliance constraints
-- Compile source references so requirements-writer can cite evidence
+- Compile source references so prd-requirements-writer can cite evidence
 
 ## Input
 - Feature or problem description from the user
@@ -48,7 +48,7 @@ Research brief:
 ```
 
 ## Communication
-- Reports findings to: requirements-writer, edge-case-finder
+- Reports findings to: prd-requirements-writer, prd-edge-case-finder
 - Receives instructions from: orchestrator (create-prd skill)
 
 ## Domain Knowledge

package/skills/create-prd/agents/reviewer.md

@@ -1,5 +1,5 @@
 ---
-name: reviewer
+name: prd-reviewer
 role: Reviews PRD completeness and testability before sign-off
 tools: [Read]
 ---
@@ -18,8 +18,8 @@ Final quality gate for the PRD. Checks that every requirement is testable, every
 
 ## Input
 - Complete PRD draft assembled from all agents
-- Edge cases from edge-case-finder
-- Prioritized backlog from prioritizer
+- Edge cases from prd-edge-case-finder
+- Prioritized backlog from prd-prioritizer
 
 ## Output
 PRD review report:

package/skills/create-prd/orchestrator.md

@@ -6,6 +6,8 @@ agents: [researcher, edge-case-finder, requirements-writer, prioritizer, reviewe
 
 # Create-PRD Orchestrator
 
+> 구조·섹션·네이밍은 vibe/rules/orchestrator-contract.md (SSOT) 를 따른다.
+
 ## Workflow
 
 ### Phase 1: Gather Context