codeloop 0.1.11 → 0.1.13

package/dist/commands/design.d.ts

@@ -0,0 +1,15 @@
+export interface DesignFetchOptions {
+    file?: string;
+    out?: string;
+    config?: string;
+    token?: string;
+}
+export interface DesignCompareOptions {
+    screen?: string;
+    all?: boolean;
+    designs?: string;
+    threshold?: string;
+}
+export declare function designFetchCommand(opts: DesignFetchOptions): Promise<void>;
+export declare function designCompareCommand(opts: DesignCompareOptions): Promise<void>;
+//# sourceMappingURL=design.d.ts.map

package/dist/commands/design.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"design.d.ts","sourceRoot":"","sources":["../../src/commands/design.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+CD,wBAAsB,kBAAkB,CAAC,IAAI,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CA4HhF;AAED,wBAAsB,oBAAoB,CAAC,IAAI,EAAE,oBAAoB,GAAG,OAAO,CAAC,IAAI,CAAC,CA8DpF"}

package/dist/commands/design.js

@@ -0,0 +1,252 @@
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "fs";
+import { extname, join, resolve } from "path";
+import chalk from "chalk";
+import ora from "ora";
+import { printBox, printError, printInfo, printSuccess, printWarning } from "../utils/ui.js";
+const FIGMA_API_BASE = "https://api.figma.com/v1";
+function parseFigmaFileKey(input) {
+    if (!input)
+        return null;
+    if (!input.includes("/") && !input.includes("?"))
+        return input;
+    const match = input.match(/\/(?:file|design)\/([A-Za-z0-9]+)/);
+    return match ? match[1] : null;
+}
+function loadFigmaConfig(cwd, configPath) {
+    const path = configPath ? resolve(cwd, configPath) : join(cwd, ".codeloop", "figma.json");
+    if (!existsSync(path))
+        return null;
+    try {
+        const raw = readFileSync(path, "utf-8");
+        const parsed = JSON.parse(raw);
+        if (!parsed || !Array.isArray(parsed.frames))
+            return null;
+        return parsed;
+    }
+    catch {
+        return null;
+    }
+}
+function resolveToken(opts, config) {
+    if (opts.token)
+        return opts.token;
+    if (config?.token)
+        return config.token;
+    const envName = config?.token_env || "FIGMA_API_TOKEN";
+    return process.env[envName] || process.env.FIGMA_API_TOKEN;
+}
+export async function designFetchCommand(opts) {
+    printBox("CodeLoop — Figma Sync");
+    const cwd = process.cwd();
+    const config = loadFigmaConfig(cwd, opts.config);
+    const fileKey = (opts.file ? parseFigmaFileKey(opts.file) : null) ||
+        config?.file_key ||
+        (config?.file_url ? parseFigmaFileKey(config.file_url) : null);
+    if (!fileKey) {
+        printError("No Figma file specified.");
+        console.log("");
+        console.log("  Provide one of:");
+        console.log(`    ${chalk.cyan("--file <figma-url-or-key>")}`);
+        console.log(`    ${chalk.cyan(".codeloop/figma.json")} with ${chalk.dim("{ file_url | file_key, frames }")}`);
+        console.log("");
+        process.exitCode = 1;
+        return;
+    }
+    const token = resolveToken(opts, config);
+    if (!token) {
+        printError("No Figma token. Set FIGMA_API_TOKEN env var, pass --token, or add `token`/`token_env` to .codeloop/figma.json.");
+        process.exitCode = 1;
+        return;
+    }
+    const frames = config?.frames || [];
+    if (frames.length === 0) {
+        printError("No frames listed.");
+        console.log(`  Add ${chalk.cyan("frames")} to ${chalk.cyan(".codeloop/figma.json")}:`);
+        console.log(chalk.dim('  { "file_url": "...", "frames": [{ "node_id": "1:23", "screen_name": "home", "scales": [1, 2] }] }'));
+        process.exitCode = 1;
+        return;
+    }
+    const outDir = resolve(cwd, opts.out || "designs");
+    mkdirSync(outDir, { recursive: true });
+    const spinner = ora(`Fetching ${frames.length} frame(s) from Figma`).start();
+    const byScale = new Map();
+    for (const frame of frames) {
+        const scales = frame.scales && frame.scales.length > 0 ? frame.scales : [2];
+        for (const scale of scales) {
+            const list = byScale.get(scale) || [];
+            list.push(frame);
+            byScale.set(scale, list);
+        }
+    }
+    let downloaded = 0;
+    const errors = [];
+    for (const [scale, group] of byScale.entries()) {
+        const ids = group.map((f) => f.node_id).join(",");
+        const format = group[0].format || "png";
+        const url = `${FIGMA_API_BASE}/images/${fileKey}?ids=${encodeURIComponent(ids)}&format=${format}&scale=${scale}`;
+        let response;
+        try {
+            response = await fetch(url, { headers: { "X-Figma-Token": token } });
+        }
+        catch (err) {
+            errors.push(`Network error at scale ${scale}: ${err.message}`);
+            continue;
+        }
+        if (!response.ok) {
+            errors.push(`Figma API ${response.status} ${response.statusText} at scale ${scale}`);
+            continue;
+        }
+        const payload = (await response.json());
+        if (payload.err) {
+            errors.push(`Figma error at scale ${scale}: ${payload.err}`);
+            continue;
+        }
+        const images = payload.images || {};
+        for (const frame of group) {
+            const imgUrl = images[frame.node_id];
+            if (!imgUrl) {
+                errors.push(`No image for ${frame.screen_name} (${frame.node_id}) @${scale}x`);
+                continue;
+            }
+            const fileName = scale === 1 ? `${frame.screen_name}.${format}` : `${frame.screen_name}@${scale}x.${format}`;
+            const outPath = join(outDir, fileName);
+            try {
+                const imgResp = await fetch(imgUrl);
+                if (!imgResp.ok) {
+                    errors.push(`Download failed for ${fileName}: HTTP ${imgResp.status}`);
+                    continue;
+                }
+                const buf = Buffer.from(await imgResp.arrayBuffer());
+                writeFileSync(outPath, buf);
+                downloaded++;
+            }
+            catch (err) {
+                errors.push(`Download error for ${fileName}: ${err.message}`);
+            }
+        }
+    }
+    if (downloaded > 0) {
+        spinner.succeed(`Downloaded ${downloaded} frame(s) to ${chalk.cyan(outDir)}`);
+    }
+    else {
+        spinner.fail("No frames downloaded");
+    }
+    if (errors.length > 0) {
+        console.log("");
+        printWarning(`${errors.length} issue(s):`);
+        for (const e of errors.slice(0, 10))
+            console.log(`    - ${e}`);
+        if (errors.length > 10)
+            console.log(`    ... and ${errors.length - 10} more`);
+        if (downloaded === 0)
+            process.exitCode = 1;
+    }
+    console.log("");
+    printInfo("Next: ask the AI agent to run codeloop_verify, then codeloop_design_compare with mode='all'.");
+}
+export async function designCompareCommand(opts) {
+    printBox("CodeLoop — Design Compare");
+    const cwd = process.cwd();
+    const designsDir = resolve(cwd, opts.designs || "designs");
+    const refs = listLocalReferences(designsDir);
+    const figmaConfig = loadFigmaConfig(cwd);
+    if (refs.length === 0 && !figmaConfig) {
+        printError(`No references found under ${designsDir}/ and no .codeloop/figma.json.`);
+        console.log("");
+        console.log(`  Add PNG/JPEG/WebP files under ${chalk.cyan("designs/")} or run:`);
+        console.log(`    ${chalk.cyan("codeloop design fetch --file <figma-url>")}`);
+        process.exitCode = 1;
+        return;
+    }
+    if (refs.length > 0) {
+        printSuccess(`Found ${refs.length} local reference(s) under ${designsDir}/.`);
+        for (const ref of refs.slice(0, 10)) {
+            console.log(`    - ${ref.relative}${ref.viewport ? chalk.dim(` (viewport: ${ref.viewport})`) : ""}`);
+        }
+        if (refs.length > 10)
+            console.log(`    ... and ${refs.length - 10} more`);
+    }
+    if (figmaConfig) {
+        printInfo(`Figma config detected: ${figmaConfig.frames.length} frame(s) in .codeloop/figma.json`);
+    }
+    const latestRun = findLatestRunWithScreenshots(cwd);
+    if (!latestRun) {
+        console.log("");
+        printWarning("No verification runs with screenshots found yet.");
+        console.log(`  Run ${chalk.cyan("codeloop_verify")} (or ask the AI agent to call it) first to populate ${chalk.cyan("artifacts/runs/<run>/screenshots/")}.`);
+        return;
+    }
+    console.log("");
+    printSuccess(`Latest run: ${chalk.cyan(latestRun.runId)} (${latestRun.screenshotCount} screenshots).`);
+    console.log("");
+    printInfo("Design compare runs inside the MCP server. Trigger it from the agent:");
+    console.log(`    ${chalk.dim("// in Cursor or Claude Code:")}`);
+    console.log(`    ${chalk.cyan("Call codeloop_design_compare with { mode: 'all' } to compare every reference.")}`);
+    console.log(`    ${chalk.cyan("If any screen scores below the design_match_threshold, gate_check will return continue_fixing and the agent will loop.")}`);
+    console.log("");
+    if (opts.screen) {
+        printInfo(`Single-screen mode: pass { mode: 'single', screen_name: '${opts.screen}', reference_image_path: 'designs/${opts.screen}.png' }.`);
+    }
+    if (opts.threshold) {
+        printInfo(`Override threshold via .codeloop/config.json (design_match_threshold: ${opts.threshold}).`);
+    }
+}
+function listLocalReferences(designsDir) {
+    if (!existsSync(designsDir))
+        return [];
+    const out = [];
+    const exts = [".png", ".jpg", ".jpeg", ".webp"];
+    const visit = (dir, viewport) => {
+        let entries;
+        try {
+            entries = readdirSync(dir, { withFileTypes: true });
+        }
+        catch {
+            return;
+        }
+        for (const entry of entries) {
+            const name = entry.name;
+            const full = join(dir, name);
+            if (entry.isDirectory() && viewport === undefined) {
+                visit(full, name);
+                continue;
+            }
+            if (!entry.isFile())
+                continue;
+            if (!exts.includes(extname(name).toLowerCase()))
+                continue;
+            const relative = viewport ? `${viewport}/${name}` : name;
+            out.push({ path: full, relative, viewport });
+        }
+    };
+    visit(designsDir);
+    return out;
+}
+function findLatestRunWithScreenshots(cwd) {
+    const runsDir = join(cwd, "artifacts", "runs");
+    if (!existsSync(runsDir))
+        return null;
+    let entries;
+    try {
+        entries = readdirSync(runsDir).filter((d) => d.startsWith("run_"));
+    }
+    catch {
+        return null;
+    }
+    entries.sort().reverse();
+    for (const id of entries) {
+        const screenshotsDir = join(runsDir, id, "screenshots");
+        if (!existsSync(screenshotsDir))
+            continue;
+        try {
+            const pngs = readdirSync(screenshotsDir).filter((f) => f.toLowerCase().endsWith(".png"));
+            if (pngs.length > 0)
+                return { runId: id, screenshotCount: pngs.length };
+        }
+        catch {
+            /* skip */
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=design.js.map

package/dist/commands/design.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design.js","sourceRoot":"","sources":["../../src/commands/design.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -6,6 +6,7 @@ import { authCommand } from "./commands/auth.js";
 import { initCommand } from "./commands/init.js";
 import { statusCommand } from "./commands/status.js";
 import { configureCommand } from "./commands/configure.js";
+import { designFetchCommand, designCompareCommand } from "./commands/design.js";
 const program = new Command();
 program
     .name("codeloop")
@@ -41,5 +42,24 @@ program
     .alias("config")
     .description("Interactively edit CodeLoop configuration for this project")
     .action(configureCommand);
+const design = program
+    .command("design")
+    .description("Design comparison helpers (Figma sync + local compare smoke test)");
+design
+    .command("fetch")
+    .description("Pull frames listed in .codeloop/figma.json into designs/ via the Figma REST API")
+    .option("-f, --file <figma-url>", "Figma file URL or key (overrides .codeloop/figma.json)")
+    .option("-o, --out <dir>", "Output directory (default: designs/)")
+    .option("-c, --config <path>", "Path to figma.json (default: .codeloop/figma.json)")
+    .option("-t, --token <token>", "Figma personal access token (default: FIGMA_API_TOKEN env)")
+    .action((options) => designFetchCommand(options));
+design
+    .command("compare")
+    .description("Inspect references + latest run, then prompt the agent to call codeloop_design_compare")
+    .option("-s, --screen <name>", "Single-screen mode: focus on this screen name")
+    .option("--all", "Multi-screen mode (default)")
+    .option("-d, --designs <dir>", "Designs directory (default: designs/)")
+    .option("-t, --threshold <num>", "Match threshold override (e.g. 0.9)")
+    .action((options) => designCompareCommand(options));
 program.parse();
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,UAAU,CAAC;KAChB,WAAW,CAAC,wDAAwD,CAAC;KACrE,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,OAAO,CAAC,QAAQ,CAAC;KACjB,WAAW,CAAC,kDAAkD,CAAC;KAC/D,MAAM,CAAC,aAAa,CAAC,CAAC;AAEzB,OAAO;KACJ,OAAO,CAAC,OAAO,CAAC;KAChB,WAAW,CAAC,yDAAyD,CAAC;KACtE,MAAM,CAAC,YAAY,CAAC,CAAC;AAExB,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,gFAAgF,CAAC;KAC7F,MAAM,CAAC,cAAc,EAAE,qDAAqD,CAAC;KAC7E,MAAM,CAAC,cAAc,EAAE,uDAAuD,CAAC;KAC/E,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;AAE7C,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CACV,sFAAsF,CACvF;KACA,MAAM,CAAC,cAAc,EAAE,gFAAgF,CAAC;KACxG,MAAM,CAAC,qBAAqB,EAAE,+CAA+C,CAAC;KAC9E,MAAM,CAAC,WAAW,EAAE,6DAA6D,CAAC;KAClF,MAAM,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;AAE7C,OAAO;KACJ,OAAO,CAAC,QAAQ,CAAC;KACjB,WAAW,CACV,4CAA4C,CAC7C;KACA,MAAM,CAAC,aAAa,CAAC,CAAC;AAEzB,OAAO;KACJ,OAAO,CAAC,WAAW,CAAC;KACpB,KAAK,CAAC,QAAQ,CAAC;KACf,WAAW,CAAC,4DAA4D,CAAC;KACzE,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAE5B,OAAO,CAAC,KAAK,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/templates/claude-agents.d.ts

@@ -1,5 +1,5 @@
 export declare const CODELOOP_LOOP_MD = "You are a QA loop runner. Use CodeLoop MCP tools to verify code quality.\n\nComplete lifecycle for every development session:\n1. Call codeloop_verify to run all checks\n2. Call codeloop_diagnose to classify failures\n3. Fix only confirmed issues\n4. Repeat verification until all checks pass (AUTOMATIC \u2014 do NOT ask user between loops)\n5. For UI projects: capture screenshots (codeloop_capture_screenshot for every page)\n   then run codeloop_visual_review to analyze them\n6. For UI projects: codeloop_start_recording \u2192 use codeloop_interact with EVERY element\n   (click, type, fill forms, test auth flows, validate errors, scroll, hover, drag) \u2192\n   codeloop_stop_recording \u2192 codeloop_interaction_replay\n   The video MUST show active interaction with every element, never a static page.\n7. Call codeloop_gate_check to evaluate completion (require confidence >= 94%)\n   If gate returns \"continue_fixing\", LOOP BACK to step 1 immediately \u2014 do NOT ask user.\n   Maximum 15 loops before escalation.\n8. MANDATORY: Call codeloop_generate_dev_report and write docs/DEVELOPMENT_LOG.md\n9. Stop when all gates pass at >= 94% or escalation is needed\n\nNever mark a task complete without evidence from CodeLoop.\nNever skip the development log \u2014 it is the final deliverable proving CodeLoop powered the process.\nNever ask the user between loop iterations \u2014 the auto-fix loop is fully automatic.\n";
 export declare const CODELOOP_QA_MD = "You are a QA verification specialist. Run CodeLoop visual review,\nvideo capture, and design comparison. Report structured issues with severity,\nevidence, and fix hints.\n\nFor UI projects, you MUST always perform ALL three:\n1. Screenshot review (codeloop_capture_screenshot for every page + codeloop_visual_review) \u2014 static per-page correctness\n2. Video capture review \u2014 codeloop_start_recording \u2192 use codeloop_interact to interact with EVERY\n   element on every page (click, type, fill forms, test auth, validate errors, scroll, hover, drag)\n   \u2192 codeloop_stop_recording \u2192 codeloop_interaction_replay \u2014 dynamic flow, transitions, animations\n3. Development log generation \u2014 codeloop_generate_dev_report \u2192 docs/DEVELOPMENT_LOG.md\n\nThe video MUST show the app changing state through active interaction using codeloop_interact.\nA recording of a static page is NOT valid evidence. The gate_check will REJECT static videos.\n\nUse codeloop_interact for ALL interactions \u2014 do NOT use raw osascript/PowerShell/xdotool.\ncodeloop_interact works on all platforms: macOS, Windows, Linux, browser (Playwright),\nAndroid emulator (adb), iOS Simulator (simctl), and supports Maestro flow generation.\n\nCRITICAL \u2014 WINDOW FOCUS (especially on single-monitor setups):\n- codeloop_capture_screenshot: ALWAYS pass app_name so the app is brought to front for capture\n- codeloop_start_recording: ALWAYS pass app_name (required) \u2014 brings app to front\n- codeloop_interact: AUTOMATICALLY brings the app to front before each interaction \u2014 this ensures\n  interactions always hit the app window, NOT the IDE, even when the IDE regains focus between calls\n- codeloop_stop_recording: AUTOMATICALLY restores the IDE to front after recording stops\nWithout these focus switches, on single-monitor setups the IDE stays in front and all\nscreenshots/interactions capture the IDE instead of the app.\n";
 export declare const CODELOOP_ADVISOR_MD = "You are an infrastructure and tooling advisor. Use CodeLoop\nrecommendation tools to suggest the best tools based on the\nproject stack, budget, and constraints. Always explain your\nreasoning and include tradeoffs.\n";
-export declare const CLAUDE_MD = "# CodeLoop Integration\n\nCodeLoop provides automated verification for AI-generated code via MCP tools. Follow these rules to ensure code quality.\n\n## After implementing or modifying any feature:\n1. Call codeloop_verify to run all checks on the current project\n2. Read the structured output carefully \u2014 trust deterministic results first, visual diffs second, model opinions third\n3. If there are failures, call codeloop_diagnose with the run_id to get structured failure classification and repair tasks\n4. Fix ONLY the confirmed issues listed in the repair tasks \u2014 do not guess or fix unrelated code\n5. After fixing, call codeloop_verify again to confirm the fixes worked\n6. Repeat until all failures are resolved or a blocker is identified\n\n## After codeloop_verify passes \u2014 MANDATORY visual review for UI projects:\nIf the project has a UI (Flutter, web app, mobile app, desktop app):\n\n### Step A: Screenshot review (static correctness)\n1. Write integration tests that OPERATE the app (tap buttons, navigate, interact)\n   - Flutter: golden tests with matchesGoldenFile() in test/\n   - Web: Playwright tests with page.screenshot()\n   - Mobile: Maestro flows (auto-capture screenshots)\n2. Run codeloop_verify \u2014 it runs integration tests and collects screenshots\n3. Call codeloop_visual_review to analyze ALL captured screenshots\n4. Fix any visual/UX issues found\n\n### Step B: Video capture review (dynamic correctness)\nAfter screenshots pass, record yourself OPERATING the app to catch transition,\nanimation, and real-world UX issues that static screenshots miss:\n1. Build and launch the app (if not already running)\n2. Call codeloop_start_recording with target_type=\"browser\" for web apps. CodeLoop auto-launches\n   a headed Playwright browser and sets app_name automatically. For desktop apps, pass app_name\n   matching the process name. For mobile, use target_type=\"android_emulator\" or \"ios_simulator\".\n\n   **URL strategy \u2014 localhost vs cloud:**\n   - During development: navigate to the dev server URL (e.g., http://localhost:3000)\n   - After deployment: navigate to the production URL\n   - If the dev server is not running, start it first before recording\n   - target_type auto-detects from the project when omitted\n\n3. While recording is active, use codeloop_interact to interact with EVERY element in the app.\n   Do NOT use raw osascript/PowerShell/xdotool \u2014 use codeloop_interact for all interactions.\n   target_type is auto-detected from the active recording, so you can omit it.\n   The video MUST show real interactions, not a still image. Follow this MANDATORY checklist:\n\n   A. **Navigation** \u2014 visit EVERY page/route. After each navigation, verify the page loaded\n      (not 404). Use navigate_url action. Wait 2s between navigations.\n\n   B. **Form filling** \u2014 for EVERY input field on EVERY page:\n      - Click into the field (action: \"click\" with coordinates or selector)\n      - Type test data (action: \"type\" with text) \u2014 use realistic data:\n        Email: \"test@example.com\", Password: \"TestPass123!\", Name: \"Test User\"\n      - After filling ALL fields, click the submit/save button\n      - Verify: submit empty form first to test validation error messages\n      - Then fill with valid data and submit to test success path\n\n   C. **Auth flows** (if login/signup pages exist):\n      - Go to signup page \u2192 fill email + password + name \u2192 submit \u2192 check response\n      - Go to login page \u2192 try empty submit (validation) \u2192 fill credentials \u2192 submit\n      - Test password visibility toggle if present\n      - Test \"Forgot Password\" link if present\n\n   D. **Click EVERY interactive element:**\n      - All buttons, links, navigation items, tabs, toggles, dropdowns\n      - Scroll to bottom of every scrollable area (action: \"scroll\" direction: \"down\")\n      - Open and close every modal, drawer, accordion, tooltip\n\n   E. **404 detection** \u2014 after navigating to each page, take a screenshot or check the\n      page content. If any page shows 404/error/blank, report it as a critical issue.\n\n   F. **Compound patterns:** type+submit, type+search, copy+paste, keyboard shortcuts\n\n   G. **Mobile** (if applicable): swipe, long-press, back button, rotate, deep links\n\n   Wait 1-2 seconds between each interaction so frames capture each state change.\n4. Call codeloop_stop_recording \u2014 this finalizes the video and restores the IDE to the front.\n5. Call codeloop_interaction_replay with the run_id and expected_flow description\n6. Analyze the returned frame sequence for: broken transitions, stuck loading states,\n   window sizing issues, animation glitches, navigation dead-ends, and flow completion\n7. Fix any dynamic UX issues found\n8. ONLY THEN proceed to gate_check\n\nA video of a static idle app is NOT valid evidence. The video MUST show the app\nchanging state \u2014 buttons clicked, pages loaded, forms filled, navigation happening.\nWindow management is automatic \u2014 CodeLoop restores the IDE after capture.\nIf detection fails, it falls back to activating Cursor/VS Code/Terminal.\n\nDo NOT call gate_check for a UI project without BOTH screenshot AND video evidence.\n\n## THE CODELOOP AUTO-FIX LOOP (MANDATORY)\n\nThis is an AUTOMATIC loop. You do NOT ask the user for permission to continue.\nYou do NOT stop and report partial progress. You keep going until the gate passes.\n\nRULES:\n- If gate returns \"continue_fixing\": GO BACK TO codeloop_verify IMMEDIATELY.\n  Do NOT ask the user. Do NOT report partial results. Just fix and re-verify.\n- If gate returns \"escalate\": STOP and report blockers to the user.\n  Only escalate after 8 failed fix attempts OR a true blocker.\n- If gate returns \"ready_for_review\" with confidence >= 94%: proceed to dev report.\n- Maximum loop iterations: 15. After 15 loops without reaching 94%, escalate.\n\n## Before marking any task or feature as complete:\n1. Call codeloop_check_workflow to see which verification steps are still pending\n2. Complete ALL pending steps listed by codeloop_check_workflow\n3. Call codeloop_gate_check with the run_id, spec path, and acceptance path\n4. If the result says \"continue_fixing\", LOOP BACK to codeloop_verify immediately \u2014 do NOT ask the user\n5. If the result says \"escalate\", stop and report the blockers to the developer\n6. Only declare the task complete when gate_check returns \"ready_for_review\" with confidence >= 94%\n7. Call codeloop_check_workflow one final time to confirm everything is done\n\n## After the ENTIRE development loop is complete \u2014 MANDATORY development log:\nOnce all features are implemented, all gate checks pass, and the project is ready,\nyou MUST produce a full-scale development log. This is NOT optional.\n\n1. Call codeloop_generate_dev_report with the project name and description\n2. Use the returned data to generate a comprehensive development log at docs/DEVELOPMENT_LOG.md\n3. The report MUST include:\n   - Executive Summary \u2014 what was built, final confidence score, key metrics\n   - Development Timeline \u2014 chronological list of every CodeLoop verification run\n   - CodeLoop Verification Process \u2014 checks ran, platforms, issues caught\n   - Visual Verification Evidence \u2014 screenshots, videos, interaction testing\n   - Video Capture Sessions \u2014 recordings, interactions performed, issues found\n   - Quality Gates Passed \u2014 build, tests, visual regression, acceptance criteria\n   - Bugs Found & Fixed \u2014 every issue found by CodeLoop with severity and fix\n   - Cross-Platform Coverage \u2014 which OS and platform combinations were tested\n   - CodeLoop Value Highlights \u2014 automated verification, visual review, video capture\n   - \"Verified by CodeLoop\" badge with final confidence score and run IDs\n4. Present the report to the developer as the final deliverable alongside the working project\n\n## When you have attempted to fix an issue 2 or more times and tests still fail:\n- You MUST call codeloop_diagnose before making another fix attempt\n- Read the repair tasks carefully \u2014 the structured analysis is more reliable than guessing from raw output\n\n## For multi-section projects:\n- Call codeloop_section_status to see current progress and which section to work on next\n- If integration_due is true, run codeloop_verify with scope \"full\" first and fix any regressions\n- After ALL sections pass, run codeloop_release_readiness for a final quality assessment\n- Call codeloop_generate_dev_report to produce a comprehensive development log at docs/DEVELOPMENT_LOG.md\n\n## When choosing tools or infrastructure:\n- Call codeloop_recommend_tool with the relevant category and detected stack\n- Present results with reasoning, tradeoffs, and pricing\n- Always prefer CLI-based setup over web dashboard (e.g., `vercel login`, `heroku login`, `firebase login`)\n- Guide the user through CLI installation and authentication when needed\n- Verify CLI auth with a status command after login (e.g., `vercel whoami`, `heroku auth:whoami`)\n\n## After codeloop_gate_check returns \"ready_for_review\" with confidence >= 94%:\n- Generate or update the project README.md with:\n  - Project description and key features\n  - Prerequisites and setup instructions\n  - How to run locally\n  - How to run tests\n  - Architecture overview (key directories and files)\n  - CodeLoop verification: \"Verified by CodeLoop (run_id: {id}). Confidence: {score}%. Gates passed: {list}. Tests: {passed}/{total} passed.\"\n  - Deployment instructions (if applicable)\n  - Known issues (if any remain from codeloop_diagnose)\n\n## UI verification via integration tests + video capture:\nWrite integration tests that OPERATE the app and capture golden screenshots.\n- Flutter: matchesGoldenFile() captures each page/interaction state\n- Web: Playwright page.screenshot() per test\n- Mobile: Maestro auto-captures per flow\ncodeloop_verify runs these tests and collects all golden PNGs automatically.\ncodeloop_visual_review returns them as images for analysis.\n\nAfter screenshot review, actively operate the app while recording:\n- Call codeloop_start_recording with target_type=\"browser\" for web apps (auto-launches Playwright,\n  auto-sets app_name). For desktop apps, pass app_name. For mobile, use target_type as needed.\n- URL strategy: use localhost during dev (e.g., http://localhost:3000), production URL after deploy.\n  If dev server is not running, start it first. target_type auto-detects from project when omitted.\n- Use codeloop_interact for ALL interactions \u2014 target_type is auto-detected from the active recording:\n  **Web apps (all use selector-based Playwright \u2014 no coordinate guessing):**\n  click, double_click, right_click, hover, type, keystroke, hotkey, scroll, drag_drop,\n  type_and_submit, type_and_tab, fill_form, select_option, toggle, upload_file,\n  navigate_url, navigate_back, navigate_forward, wait\n  **Desktop native apps (coordinate-based + OS accessibility):**\n  click, type, keystroke, hotkey, scroll, drag_drop, long_press, win_ui_inspect, win_ui_automate\n  **Mobile apps (ADB/simctl + Maestro):**\n  click, type, keystroke, swipe, long_press, back_button, home_button, deep_link,\n  launch_app, clear_app_data, grant_permission, rotate_device, biometric_auth,\n  mock_location, simulate_network, maestro_flow\n- Do NOT use raw osascript/PowerShell/xdotool \u2014 always use codeloop_interact\n- Wait 1-2s between interactions; use codeloop_capture_screenshot (with app_name) to verify each worked\n- A static video is NOT valid \u2014 the video must show state changes\n- Call codeloop_stop_recording (finalizes video + logs, restores IDE to front)\n- Call codeloop_interaction_replay to extract frames, app logs, and analyze the flow\n  The AI correlates visual frames with runtime log errors for comprehensive analysis\n\n## Terminal authorization:\n- Common development commands (flutter, npm, git, brew, etc.) are pre-authorized via permissions.allow\n- If a command is blocked, check the allow-list in .claude/settings.local.json\n- For Cursor users: before running your first command, tell the user:\n  \"To avoid clicking 'Run' on every command, enable Cursor Auto-Run:\n  Cmd+Shift+J \u2192 Features \u2192 Terminal \u2192 Auto-Run Mode \u2192 Yolo\"\n- For service provider CLIs: install via the recommended package manager, then authenticate\n\n## Never:\n- Mark a task complete without evidence from codeloop_gate_check\n- Skip visual review (screenshots + video) for a project that has a user interface\n- Skip video capture \u2014 screenshots alone miss transitions, animations, and flow bugs\n- Skip the development log \u2014 codeloop_generate_dev_report MUST be called when the loop completes\n- Let a recording run idle \u2014 the video MUST show active interaction with every UI element\n- Ignore codeloop_verify results\n- Modify files outside the allowed_file_scope from repair tasks\n- Continue fixing after 8 failed repair attempts \u2014 escalate instead\n\n## Development lifecycle \u2014 complete workflow:\nEvery CodeLoop-powered development session follows this mandatory lifecycle:\n1. Implement \u2192 write/modify code\n2. Verify \u2192 codeloop_verify (tests, lint, build)\n3. Diagnose \u2192 codeloop_diagnose (if failures)\n4. Fix \u2192 repair confirmed issues only \u2192 LOOP BACK to step 2\n5. Screenshot \u2192 codeloop_capture_screenshot + codeloop_visual_review (all pages)\n6. Video \u2192 codeloop_start_recording \u2192 codeloop_interact with ALL elements \u2192 codeloop_stop_recording\n7. Replay \u2192 codeloop_interaction_replay (analyze frames + logs)\n8. Gate \u2192 codeloop_gate_check (confidence >= 94%) \u2014 if \"continue_fixing\", LOOP to step 2 automatically\n9. Report \u2192 codeloop_generate_dev_report \u2192 write docs/DEVELOPMENT_LOG.md\n10. Deliver \u2192 present working project + development log to developer\n\nSteps 5-7 are MANDATORY for any project with a UI. Step 9 is MANDATORY for every project.\nThe loop between steps 2-8 is AUTOMATIC. Do NOT ask the user between iterations.\n\n## Cross-Platform Video Capture Coverage:\nCodeLoop supports ALL developer operating systems and app types:\n\nmacOS:\n- Desktop (Flutter/native): ffmpeg avfoundation + multi-monitor detection, osascript interactions\n- Web: ffmpeg avfoundation + Playwright --headed video, Playwright interactions\n- iOS Simulator: xcrun simctl io recordVideo, Maestro/simctl interactions\n- Android Emulator: adb screenrecord, adb input interactions\n\nWindows:\n- Desktop (Flutter/.NET): ffmpeg gdigrab + window bounds, PowerShell user32.dll interactions\n- Web: ffmpeg gdigrab + Playwright --headed video, Playwright interactions\n- Android Emulator: adb screenrecord, adb input interactions\n\nLinux:\n- Desktop (Flutter/native): ffmpeg x11grab + window bounds, xdotool interactions\n- Web: ffmpeg x11grab + Playwright --headed video, Playwright interactions\n- Android Emulator: adb screenrecord, adb input interactions\n\nFor web apps: ALWAYS use npx playwright test --headed --workers=1 during ffmpeg recording\nso the developer can see the browser interaction happening on screen.\n";
+export declare const CLAUDE_MD = "# CodeLoop Integration\n\nCodeLoop provides automated verification for AI-generated code via MCP tools. Follow these rules to ensure code quality.\n\n## After implementing or modifying any feature:\n1. Call codeloop_verify to run all checks on the current project\n2. Read the structured output carefully \u2014 trust deterministic results first, visual diffs second, model opinions third\n3. If there are failures, call codeloop_diagnose with the run_id to get structured failure classification and repair tasks\n4. Fix ONLY the confirmed issues listed in the repair tasks \u2014 do not guess or fix unrelated code\n5. After fixing, call codeloop_verify again to confirm the fixes worked\n6. Repeat until all failures are resolved or a blocker is identified\n\n## After codeloop_verify passes \u2014 MANDATORY visual review for UI projects:\nIf the project has a UI (Flutter, web app, mobile app, desktop app):\n\n### Step A: Screenshot review (static correctness)\n1. Build and run the app\n2. Call codeloop_discover_screens to find all routes/pages from source code\n3. Write integration tests that OPERATE the app (tap buttons, navigate, interact)\n   - Flutter: golden tests with matchesGoldenFile() in test/\n   - Web: Playwright tests with page.screenshot()\n   - Mobile: Maestro flows (auto-capture screenshots)\n4. Run codeloop_verify \u2014 it runs integration tests and collects screenshots\n5. Call codeloop_visual_review to analyze ALL captured screenshots\n6. Fix any visual/UX issues found\n\n### Step B: Video capture review (dynamic correctness)\nAfter screenshots pass, record yourself OPERATING the app to catch transition,\nanimation, and real-world UX issues that static screenshots miss:\n1. Build and launch the app (if not already running)\n2. Call codeloop_start_recording with target_type=\"browser\" for web apps. CodeLoop auto-launches\n   a headed Playwright browser and sets app_name automatically. For desktop apps, pass app_name\n   matching the process name. For mobile, use target_type=\"android_emulator\" or \"ios_simulator\".\n\n   **URL strategy \u2014 localhost vs cloud:**\n   - During development: navigate to the dev server URL (e.g., http://localhost:3000)\n   - After deployment: navigate to the production URL\n   - If the dev server is not running, start it first before recording\n   - target_type auto-detects from the project when omitted\n\n3. While recording is active, use codeloop_interact to interact with EVERY element in the app.\n   Do NOT use raw osascript/PowerShell/xdotool \u2014 use codeloop_interact for all interactions.\n   target_type is auto-detected from the active recording, so you can omit it.\n   The video MUST show real interactions, not a still image. Follow this MANDATORY checklist:\n\n   A. **Navigation** \u2014 visit EVERY page/route. After each navigation, verify the page loaded\n      (not 404). Use navigate_url action. Wait 2s between navigations.\n\n   B. **Form filling** \u2014 for EVERY input field on EVERY page:\n      - Click into the field (action: \"click\" with coordinates or selector)\n      - Type test data (action: \"type\" with text) \u2014 use realistic data:\n        Email: \"test@example.com\", Password: \"TestPass123!\", Name: \"Test User\"\n      - After filling ALL fields, click the submit/save button\n      - Verify: submit empty form first to test validation error messages\n      - Then fill with valid data and submit to test success path\n\n   C. **Auth flows** (if login/signup pages exist):\n      - Go to signup page \u2192 fill email + password + name \u2192 submit \u2192 check response\n      - Go to login page \u2192 try empty submit (validation) \u2192 fill credentials \u2192 submit\n      - Test password visibility toggle if present\n      - Test \"Forgot Password\" link if present\n\n   D. **Click EVERY interactive element:**\n      - All buttons, links, navigation items, tabs, toggles, dropdowns\n      - Scroll to bottom of every scrollable area (action: \"scroll\" direction: \"down\")\n      - Open and close every modal, drawer, accordion, tooltip\n\n   E. **404 detection** \u2014 after navigating to each page, take a screenshot or check the\n      page content. If any page shows 404/error/blank, report it as a critical issue.\n\n   F. **Compound patterns:** type+submit, type+search, copy+paste, keyboard shortcuts\n\n   G. **Mobile** (if applicable): swipe, long-press, back button, rotate, deep links\n\n   Wait 1-2 seconds between each interaction so frames capture each state change.\n4. Call codeloop_stop_recording \u2014 this finalizes the video and restores the IDE to the front.\n5. Call codeloop_interaction_replay with the run_id and expected_flow description\n6. Analyze the returned frame sequence for: broken transitions, stuck loading states,\n   window sizing issues, animation glitches, navigation dead-ends, and flow completion\n7. Fix any dynamic UX issues found\n8. ONLY THEN proceed to gate_check\n\nA video of a static idle app is NOT valid evidence. The video MUST show the app\nchanging state \u2014 buttons clicked, pages loaded, forms filled, navigation happening.\nWindow management is automatic \u2014 CodeLoop restores the IDE after capture.\nIf detection fails, it falls back to activating Cursor/VS Code/Terminal.\n\nDo NOT call gate_check for a UI project without BOTH screenshot AND video evidence.\n\n## DESIGN COMPARISON (MANDATORY WHEN REFERENCES EXIST)\n\nIf the project has any reference designs, design comparison is MANDATORY and BLOCKS gate_check until every screen passes:\n- Files under `designs/` ending in .png, .jpg, .jpeg, or .webp (subfolders treated as viewports)\n- A `.codeloop/figma.json` config (Figma frames are fetched automatically when FIGMA_API_TOKEN is set)\n\nWorkflow:\n1. After codeloop_verify captures screenshots, call codeloop_design_compare with mode=\"all\"\n   - Auto-discovers every reference under designs/ and designs/<viewport>/\n   - Fetches Figma frames listed in .codeloop/figma.json when a token is configured\n   - Writes artifacts/runs/<run>/design_compare_summary.json + per-screen diff PNGs\n2. The MCP response returns reference, actual, and diff images for the worst-scoring screens\n   for you to assess visually (layout, typography, colors, spacing, hierarchy).\n3. If any screen scores below config.design_match_threshold (default 0.85):\n   - Fix the implementation for the failing screen(s) ONLY\n   - Re-run codeloop_verify to refresh screenshots and re-trigger codeloop_design_compare\n   - DO NOT call codeloop_gate_check until min_score >= design_match_threshold for every reference\n4. The design_compare_evidence gate is a BLOCKER. gate_check returns continue_fixing until\n   every reference matches.\n\nSingle-screen mode: pass mode=\"single\", reference_image_path, and screen_name when the user\nasks to compare ONE specific screen.\n\nFigma sync: pass figma_file_url (and optionally figma_token) so frames are pulled before\ncomparison. Or run `codeloop design fetch --file <figma-url>` from the terminal once and\nlet MCP read the local files.\n\n## THE CODELOOP AUTO-FIX LOOP (MANDATORY)\n\nThis is an AUTOMATIC loop. You do NOT ask the user for permission to continue.\nYou do NOT stop and report partial progress. You keep going until the gate passes.\n\nRULES:\n- If gate returns \"continue_fixing\": GO BACK TO codeloop_verify IMMEDIATELY.\n  Do NOT ask the user. Do NOT report partial results. Just fix and re-verify.\n- If gate returns \"escalate\": STOP and report blockers to the user.\n  Only escalate after 8 failed fix attempts OR a true blocker.\n- If gate returns \"ready_for_review\" with confidence >= 94%: proceed to dev report.\n- Maximum loop iterations: 15. After 15 loops without reaching 94%, escalate.\n\n## Before marking any task or feature as complete:\n1. Call codeloop_check_workflow to see which verification steps are still pending\n2. Complete ALL pending steps listed by codeloop_check_workflow\n3. Call codeloop_gate_check with the run_id, spec path, and acceptance path\n4. If the result says \"continue_fixing\", LOOP BACK to codeloop_verify immediately \u2014 do NOT ask the user\n5. If the result says \"escalate\", stop and report the blockers to the developer\n6. Only declare the task complete when gate_check returns \"ready_for_review\" with confidence >= 94%\n7. Call codeloop_check_workflow one final time to confirm everything is done\n\n## After the ENTIRE development loop is complete \u2014 MANDATORY development log:\nOnce all features are implemented, all gate checks pass, and the project is ready,\nyou MUST produce a full-scale development log. This is NOT optional.\n\n1. Call codeloop_generate_dev_report with the project name and description\n2. Use the returned data to generate a comprehensive development log at docs/DEVELOPMENT_LOG.md\n3. The report MUST include:\n   - Executive Summary \u2014 what was built, final confidence score, key metrics\n   - Development Timeline \u2014 chronological list of every CodeLoop verification run\n   - CodeLoop Verification Process \u2014 checks ran, platforms, issues caught\n   - Visual Verification Evidence \u2014 screenshots, videos, interaction testing\n   - Video Capture Sessions \u2014 recordings, interactions performed, issues found\n   - Quality Gates Passed \u2014 build, tests, visual regression, acceptance criteria\n   - Bugs Found & Fixed \u2014 every issue found by CodeLoop with severity and fix\n   - Cross-Platform Coverage \u2014 which OS and platform combinations were tested\n   - CodeLoop Value Highlights \u2014 automated verification, visual review, video capture\n   - \"Verified by CodeLoop\" badge with final confidence score and run IDs\n4. Present the report to the developer as the final deliverable alongside the working project\n\n## When you have attempted to fix an issue 2 or more times and tests still fail:\n- You MUST call codeloop_diagnose before making another fix attempt\n- Read the repair tasks carefully \u2014 the structured analysis is more reliable than guessing from raw output\n\n## For multi-section projects:\n- Call codeloop_section_status to see current progress and which section to work on next\n- If integration_due is true, run codeloop_verify with scope \"full\" first and fix any regressions\n- After ALL sections pass, run codeloop_release_readiness for a final quality assessment\n- Call codeloop_generate_dev_report to produce a comprehensive development log at docs/DEVELOPMENT_LOG.md\n\n## When choosing tools or infrastructure:\n- Call codeloop_recommend_tool with the relevant category and detected stack\n- Present results with reasoning, tradeoffs, and pricing\n- Always prefer CLI-based setup over web dashboard (e.g., `vercel login`, `heroku login`, `firebase login`)\n- Guide the user through CLI installation and authentication when needed\n- Verify CLI auth with a status command after login (e.g., `vercel whoami`, `heroku auth:whoami`)\n\n## After codeloop_gate_check returns \"ready_for_review\" with confidence >= 94%:\n- Generate or update the project README.md with:\n  - Project description and key features\n  - Prerequisites and setup instructions\n  - How to run locally\n  - How to run tests\n  - Architecture overview (key directories and files)\n  - CodeLoop verification: \"Verified by CodeLoop (run_id: {id}). Confidence: {score}%. Gates passed: {list}. Tests: {passed}/{total} passed.\"\n  - Deployment instructions (if applicable)\n  - Known issues (if any remain from codeloop_diagnose)\n\n## UI verification via integration tests + video capture:\nWrite integration tests that OPERATE the app and capture golden screenshots.\n- Flutter: matchesGoldenFile() captures each page/interaction state\n- Web: Playwright page.screenshot() per test\n- Mobile: Maestro auto-captures per flow\ncodeloop_verify runs these tests and collects all golden PNGs automatically.\ncodeloop_visual_review returns them as images for analysis.\n\nAfter screenshot review, actively operate the app while recording:\n- Call codeloop_start_recording with target_type=\"browser\" for web apps (auto-launches Playwright,\n  auto-sets app_name). For desktop apps, pass app_name. For mobile, use target_type as needed.\n- URL strategy: use localhost during dev (e.g., http://localhost:3000), production URL after deploy.\n  If dev server is not running, start it first. target_type auto-detects from project when omitted.\n- Use codeloop_interact for ALL interactions \u2014 target_type is auto-detected from the active recording:\n  **Web apps (all use selector-based Playwright \u2014 no coordinate guessing):**\n  click, double_click, right_click, hover, type, keystroke, hotkey, scroll, drag_drop,\n  type_and_submit, type_and_tab, fill_form, select_option, toggle, upload_file,\n  navigate_url, navigate_back, navigate_forward, wait, sequence\n  **Desktop native apps (coordinate-based + OS accessibility):**\n  click, double_click, right_click, hover, type, keystroke, hotkey, scroll, drag_drop,\n  long_press, win_ui_inspect, win_ui_automate, sequence\n  **Mobile apps (ADB/simctl + Maestro):**\n  click, type, keystroke, swipe, long_press, back_button, home_button, deep_link,\n  launch_app, clear_app_data, grant_permission, rotate_device, biometric_auth,\n  mock_location, simulate_network, maestro_flow, sequence\n- Do NOT use raw osascript/PowerShell/xdotool \u2014 always use codeloop_interact\n- Wait 1-2s between interactions; use codeloop_capture_screenshot (with app_name) to verify each worked\n- A static video is NOT valid \u2014 the video must show state changes\n- Call codeloop_stop_recording (finalizes video + logs, restores IDE to front)\n- Call codeloop_interaction_replay to extract frames, app logs, and analyze the flow\n  The AI correlates visual frames with runtime log errors for comprehensive analysis\n\n**App logs:** CodeLoop automatically captures app runtime logs during video recording:\n- Flutter apps: flutter logs output\n- Android: adb logcat filtered to the app\n- iOS Simulator: simctl log stream\n- Native macOS: log stream --process\n- Web: browser console events via Playwright\n- Backend: dev server stdout/stderr\nThese logs are included in the interaction_replay analysis so you can correlate\nvisual frames with runtime errors, warnings, and exceptions.\n\n## Terminal authorization:\n- Common development commands (flutter, npm, git, brew, etc.) are pre-authorized via permissions.allow\n- If a command is blocked, check the allow-list in .claude/settings.local.json\n- For Cursor users: before running your first command, tell the user:\n  \"To avoid clicking 'Run' on every command, enable Cursor Auto-Run:\n  Cmd+Shift+J \u2192 Features \u2192 Terminal \u2192 Auto-Run Mode \u2192 Yolo\"\n- For service provider CLIs: install via the recommended package manager, then authenticate\n\n## Never:\n- Mark a task complete without evidence from codeloop_gate_check\n- Skip visual review (screenshots + video) for a project that has a user interface\n- Skip video capture \u2014 screenshots alone miss transitions, animations, and flow bugs\n- Skip the development log \u2014 codeloop_generate_dev_report MUST be called when the loop completes\n- Let a recording run idle \u2014 the video MUST show active interaction with every UI element\n- Ignore codeloop_verify results\n- Modify files outside the allowed_file_scope from repair tasks\n- Continue fixing after 8 failed repair attempts \u2014 escalate instead\n- Produce a video that only shows a static page \u2014 every interactive element must be exercised\n\n## Development lifecycle \u2014 complete workflow:\nEvery CodeLoop-powered development session follows this mandatory lifecycle:\n1. Implement \u2192 write/modify code\n2. Verify \u2192 codeloop_verify (tests, lint, build)\n3. Diagnose \u2192 codeloop_diagnose (if failures)\n4. Fix \u2192 repair confirmed issues only \u2192 LOOP BACK to step 2\n5. Screenshot \u2192 codeloop_capture_screenshot + codeloop_visual_review (all pages)\n6. Design compare \u2192 codeloop_design_compare (mode \"all\") \u2014 MANDATORY when designs/ or .codeloop/figma.json exist\n7. Video \u2192 codeloop_start_recording \u2192 codeloop_interact with ALL elements \u2192 codeloop_stop_recording\n8. Replay \u2192 codeloop_interaction_replay (analyze frames + logs)\n9. Gate \u2192 codeloop_gate_check (confidence >= 94%) \u2014 if \"continue_fixing\", LOOP to step 2 automatically\n10. Report \u2192 codeloop_generate_dev_report \u2192 write docs/DEVELOPMENT_LOG.md\n11. Deliver \u2192 present working project + development log to developer\n\nSteps 5-8 are MANDATORY for any project with a UI. Step 6 is MANDATORY whenever\nreferences exist. Step 10 is MANDATORY for every project.\nThe loop between steps 2-9 is AUTOMATIC. Do NOT ask the user between iterations.\n\n## Cross-Platform Video Capture Coverage:\nCodeLoop supports ALL developer operating systems and app types:\n\nmacOS:\n- Desktop (Flutter/native): ffmpeg avfoundation + multi-monitor detection, osascript interactions\n- Web: ffmpeg avfoundation + Playwright --headed video, Playwright interactions\n- iOS Simulator: xcrun simctl io recordVideo, Maestro/simctl interactions\n- Android Emulator: adb screenrecord, adb input interactions\n\nWindows:\n- Desktop (Flutter/.NET): ffmpeg gdigrab + window bounds, PowerShell user32.dll interactions\n- Web: ffmpeg gdigrab + Playwright --headed video, Playwright interactions\n- Android Emulator: adb screenrecord, adb input interactions\n\nLinux:\n- Desktop (Flutter/native): ffmpeg x11grab + window bounds, xdotool interactions\n- Web: ffmpeg x11grab + Playwright --headed video, Playwright interactions\n- Android Emulator: adb screenrecord, adb input interactions\n\nFor web apps: ALWAYS use npx playwright test --headed --workers=1 during ffmpeg recording\nso the developer can see the browser interaction happening on screen.\n";
 //# sourceMappingURL=claude-agents.d.ts.map

package/dist/templates/claude-agents.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"claude-agents.d.ts","sourceRoot":"","sources":["../../src/templates/claude-agents.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,85CAsB5B,CAAC;AAEF,eAAO,MAAM,cAAc,45DA0B1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,8NAI/B,CAAC;AAEF,eAAO,MAAM,SAAS,u6dAkPrB,CAAC"}
+{"version":3,"file":"claude-agents.d.ts","sourceRoot":"","sources":["../../src/templates/claude-agents.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,85CAsB5B,CAAC;AAEF,eAAO,MAAM,cAAc,45DA0B1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,8NAI/B,CAAC;AAEF,eAAO,MAAM,SAAS,0+iBA6RrB,CAAC"}

package/dist/templates/claude-agents.js

@@ -69,13 +69,15 @@ CodeLoop provides automated verification for AI-generated code via MCP tools. Fo
 If the project has a UI (Flutter, web app, mobile app, desktop app):
 
 ### Step A: Screenshot review (static correctness)
-1. Write integration tests that OPERATE the app (tap buttons, navigate, interact)
+1. Build and run the app
+2. Call codeloop_discover_screens to find all routes/pages from source code
+3. Write integration tests that OPERATE the app (tap buttons, navigate, interact)
    - Flutter: golden tests with matchesGoldenFile() in test/
    - Web: Playwright tests with page.screenshot()
    - Mobile: Maestro flows (auto-capture screenshots)
-2. Run codeloop_verify — it runs integration tests and collects screenshots
-3. Call codeloop_visual_review to analyze ALL captured screenshots
-4. Fix any visual/UX issues found
+4. Run codeloop_verify — it runs integration tests and collects screenshots
+5. Call codeloop_visual_review to analyze ALL captured screenshots
+6. Fix any visual/UX issues found
 
 ### Step B: Video capture review (dynamic correctness)
 After screenshots pass, record yourself OPERATING the app to catch transition,
@@ -140,6 +142,33 @@ If detection fails, it falls back to activating Cursor/VS Code/Terminal.
 
 Do NOT call gate_check for a UI project without BOTH screenshot AND video evidence.
 
+## DESIGN COMPARISON (MANDATORY WHEN REFERENCES EXIST)
+
+If the project has any reference designs, design comparison is MANDATORY and BLOCKS gate_check until every screen passes:
+- Files under \`designs/\` ending in .png, .jpg, .jpeg, or .webp (subfolders treated as viewports)
+- A \`.codeloop/figma.json\` config (Figma frames are fetched automatically when FIGMA_API_TOKEN is set)
+
+Workflow:
+1. After codeloop_verify captures screenshots, call codeloop_design_compare with mode="all"
+   - Auto-discovers every reference under designs/ and designs/<viewport>/
+   - Fetches Figma frames listed in .codeloop/figma.json when a token is configured
+   - Writes artifacts/runs/<run>/design_compare_summary.json + per-screen diff PNGs
+2. The MCP response returns reference, actual, and diff images for the worst-scoring screens
+   for you to assess visually (layout, typography, colors, spacing, hierarchy).
+3. If any screen scores below config.design_match_threshold (default 0.85):
+   - Fix the implementation for the failing screen(s) ONLY
+   - Re-run codeloop_verify to refresh screenshots and re-trigger codeloop_design_compare
+   - DO NOT call codeloop_gate_check until min_score >= design_match_threshold for every reference
+4. The design_compare_evidence gate is a BLOCKER. gate_check returns continue_fixing until
+   every reference matches.
+
+Single-screen mode: pass mode="single", reference_image_path, and screen_name when the user
+asks to compare ONE specific screen.
+
+Figma sync: pass figma_file_url (and optionally figma_token) so frames are pulled before
+comparison. Or run \`codeloop design fetch --file <figma-url>\` from the terminal once and
+let MCP read the local files.
+
 ## THE CODELOOP AUTO-FIX LOOP (MANDATORY)
 
 This is an AUTOMATIC loop. You do NOT ask the user for permission to continue.
@@ -226,13 +255,14 @@ After screenshot review, actively operate the app while recording:
   **Web apps (all use selector-based Playwright — no coordinate guessing):**
   click, double_click, right_click, hover, type, keystroke, hotkey, scroll, drag_drop,
   type_and_submit, type_and_tab, fill_form, select_option, toggle, upload_file,
-  navigate_url, navigate_back, navigate_forward, wait
+  navigate_url, navigate_back, navigate_forward, wait, sequence
   **Desktop native apps (coordinate-based + OS accessibility):**
-  click, type, keystroke, hotkey, scroll, drag_drop, long_press, win_ui_inspect, win_ui_automate
+  click, double_click, right_click, hover, type, keystroke, hotkey, scroll, drag_drop,
+  long_press, win_ui_inspect, win_ui_automate, sequence
   **Mobile apps (ADB/simctl + Maestro):**
   click, type, keystroke, swipe, long_press, back_button, home_button, deep_link,
   launch_app, clear_app_data, grant_permission, rotate_device, biometric_auth,
-  mock_location, simulate_network, maestro_flow
+  mock_location, simulate_network, maestro_flow, sequence
 - Do NOT use raw osascript/PowerShell/xdotool — always use codeloop_interact
 - Wait 1-2s between interactions; use codeloop_capture_screenshot (with app_name) to verify each worked
 - A static video is NOT valid — the video must show state changes
@@ -240,6 +270,16 @@ After screenshot review, actively operate the app while recording:
 - Call codeloop_interaction_replay to extract frames, app logs, and analyze the flow
   The AI correlates visual frames with runtime log errors for comprehensive analysis
 
+**App logs:** CodeLoop automatically captures app runtime logs during video recording:
+- Flutter apps: flutter logs output
+- Android: adb logcat filtered to the app
+- iOS Simulator: simctl log stream
+- Native macOS: log stream --process
+- Web: browser console events via Playwright
+- Backend: dev server stdout/stderr
+These logs are included in the interaction_replay analysis so you can correlate
+visual frames with runtime errors, warnings, and exceptions.
+
 ## Terminal authorization:
 - Common development commands (flutter, npm, git, brew, etc.) are pre-authorized via permissions.allow
 - If a command is blocked, check the allow-list in .claude/settings.local.json
@@ -257,6 +297,7 @@ After screenshot review, actively operate the app while recording:
 - Ignore codeloop_verify results
 - Modify files outside the allowed_file_scope from repair tasks
 - Continue fixing after 8 failed repair attempts — escalate instead
+- Produce a video that only shows a static page — every interactive element must be exercised
 
 ## Development lifecycle — complete workflow:
 Every CodeLoop-powered development session follows this mandatory lifecycle:
@@ -265,14 +306,16 @@ Every CodeLoop-powered development session follows this mandatory lifecycle:
 3. Diagnose → codeloop_diagnose (if failures)
 4. Fix → repair confirmed issues only → LOOP BACK to step 2
 5. Screenshot → codeloop_capture_screenshot + codeloop_visual_review (all pages)
-6. Video → codeloop_start_recording → codeloop_interact with ALL elements → codeloop_stop_recording
-7. Replay → codeloop_interaction_replay (analyze frames + logs)
-8. Gate → codeloop_gate_check (confidence >= 94%) — if "continue_fixing", LOOP to step 2 automatically
-9. Report → codeloop_generate_dev_report → write docs/DEVELOPMENT_LOG.md
-10. Deliver → present working project + development log to developer
-
-Steps 5-7 are MANDATORY for any project with a UI. Step 9 is MANDATORY for every project.
-The loop between steps 2-8 is AUTOMATIC. Do NOT ask the user between iterations.
+6. Design compare → codeloop_design_compare (mode "all") — MANDATORY when designs/ or .codeloop/figma.json exist
+7. Video → codeloop_start_recording → codeloop_interact with ALL elements → codeloop_stop_recording
+8. Replay → codeloop_interaction_replay (analyze frames + logs)
+9. Gate → codeloop_gate_check (confidence >= 94%) — if "continue_fixing", LOOP to step 2 automatically
+10. Report → codeloop_generate_dev_report → write docs/DEVELOPMENT_LOG.md
+11. Deliver → present working project + development log to developer
+
+Steps 5-8 are MANDATORY for any project with a UI. Step 6 is MANDATORY whenever
+references exist. Step 10 is MANDATORY for every project.
+The loop between steps 2-9 is AUTOMATIC. Do NOT ask the user between iterations.
 
 ## Cross-Platform Video Capture Coverage:
 CodeLoop supports ALL developer operating systems and app types:

package/dist/templates/claude-agents.js.map

@@ -1 +1 @@
-{"version":3,"file":"claude-agents.js","sourceRoot":"","sources":["../../src/templates/claude-agents.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;CAsB/B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B7B,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;CAIlC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkPxB,CAAC"}
+{"version":3,"file":"claude-agents.js","sourceRoot":"","sources":["../../src/templates/claude-agents.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;CAsB/B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;CA0B7B,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;CAIlC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6RxB,CAAC"}

package/dist/templates/cursor-rules.d.ts

@@ -1,6 +1,6 @@
-export declare const CORE_MDC = "---\ndescription: CodeLoop core verification rules for all projects\nglobs: [\"**/*\"]\n---\n\n# CodeLoop Verification Rules\n\n## FIRST: Before running any terminal commands, show this to the user:\n\nBefore you run your first terminal command in this session, display this\nmessage to the user in the chat:\n\n\"\u26A1 **CodeLoop Quick Setup** \u2014 To avoid clicking 'Run' on every terminal\ncommand, enable Cursor Auto-Run (one-time):\n**Cmd+Shift+J** \u2192 Features \u2192 Terminal \u2192 Auto-Run Mode \u2192 **Yolo**\n(or 'Auto-Run with Allowlist' for safer mode)\"\n\nOnly show this once per session. If the user has already enabled Auto-Run,\nthey can ignore this message.\n\n## After implementing or modifying any feature:\n1. Call codeloop_verify to run all checks on the current project\n2. Read the structured output carefully \u2014 trust deterministic results first, visual diffs second, model opinions third\n3. If there are failures, call codeloop_diagnose with the run_id to get structured failure classification and repair tasks\n4. Fix ONLY the confirmed issues listed in the repair tasks \u2014 do not guess or fix unrelated code\n5. After fixing, call codeloop_verify again to confirm the fixes worked\n6. Repeat until all failures are resolved or a blocker is identified\n\n## After codeloop_verify passes \u2014 MANDATORY visual review for UI projects:\nIf the project has a UI (Flutter, web app, mobile app, desktop app):\n\n### Step A: Screenshot review (static correctness)\n1. Build and run the app\n2. Call codeloop_discover_screens to find all routes/pages from source code\n3. Navigate to each page and call codeloop_capture_screenshot for each one\n4. Explore buttons, tabs, menus, and links to find additional pages\n5. Call codeloop_visual_review to analyze ALL captured screenshots\n6. Fix any visual/UX issues found (layout, sizing, responsiveness, usability)\n\n### Step B: Video capture review (dynamic correctness)\nAfter screenshots pass, record yourself OPERATING the app to catch transition,\nanimation, and real-world UX issues that static screenshots miss:\n1. Build and launch the app (if not already running)\n2. Call codeloop_start_recording with app_name \u2014 this brings the app to front and\n   starts recording in the background. The app window is un-minimized automatically.\n3. While recording is active, use codeloop_interact to interact with EVERY element in the app.\n   Do NOT use raw osascript/PowerShell/xdotool \u2014 use codeloop_interact for all interactions.\n   The video MUST show real interactions, not a still image. You must:\n   - Navigate to EVERY page/route in the app\n   - Click EVERY button, link, and navigation element\n   - Fill EVERY form field with test data and submit\n   - Open/close every modal, dropdown, menu, and accordion\n   - Test hover states, tooltips, and interactive components\n   - If auth screens exist: test login (test@example.com / TestPass123!), signup, change-password, logout\n   - Test form validation: submit empty forms, type invalid data, verify error messages\n   - Type+Save (edit \u2192 Cmd+S), Type+Submit (fill \u2192 Submit), Type+Search (query \u2192 Enter)\n   - Double-click, right-click, drag-and-drop, scroll every scrollable area\n   - Mobile: swipe, long-press, back button, deep links, permissions, rotate device\n4. Wait 1-2 seconds between each interaction so frames capture each state change.\n5. Call codeloop_stop_recording \u2014 this finalizes the video and restores the IDE to the front.\n6. Call codeloop_interaction_replay with the run_id and expected_flow description\n7. Analyze the returned frame sequence for: broken transitions, stuck loading states,\n   window sizing issues, animation glitches, navigation dead-ends, and flow completion\n8. Fix any dynamic UX issues found\n9. ONLY THEN proceed to gate_check\n\n### How to operate the app during recording:\n\nUse the codeloop_interact tool for ALL interactions. Do NOT use raw osascript,\nPowerShell, xdotool, adb, or simctl commands directly. codeloop_interact\nhandles all platforms automatically:\n\n**Available actions:** click, double_click, right_click, hover, type, keystroke,\nhotkey, scroll, drag_drop, long_press, type_and_submit, type_and_tab, fill_form,\nselect_option, toggle, upload_file, navigate_url, navigate_back, navigate_forward,\nwait, swipe, back_button, home_button, deep_link, grant_permission, rotate_device,\nbiometric_auth, launch_app, clear_app_data, mock_location, simulate_network,\nmaestro_flow, win_ui_inspect, win_ui_automate, sequence.\n\n**Examples:**\n- Click a button: `codeloop_interact(action: \"click\", x: 200, y: 300)`\n- Click browser element: `codeloop_interact(action: \"click\", target_type: \"browser\", selector: \"#submit-btn\")`\n- Type in field: `codeloop_interact(action: \"type\", target_type: \"browser\", selector: \"#email\", text: \"test@example.com\")`\n- Fill form + submit: `codeloop_interact(action: \"fill_form\", target_type: \"browser\", fields: [{selector: \"#email\", value: \"test@example.com\"}, {selector: \"#password\", value: \"TestPass123!\"}], submit_selector: \"#login-btn\")`\n- Scroll down: `codeloop_interact(action: \"scroll\", direction: \"down\", amount: 300)`\n- Press Enter: `codeloop_interact(action: \"keystroke\", key: \"enter\")`\n- Save with hotkey: `codeloop_interact(action: \"hotkey\", keys: \"cmd+s\")`\n- Type and search: `codeloop_interact(action: \"type_and_submit\", selector: \"#search\", text: \"query\")`\n- Android tap: `codeloop_interact(action: \"click\", target_type: \"android_emulator\", x: 540, y: 960)`\n- Android swipe: `codeloop_interact(action: \"swipe\", target_type: \"android_emulator\", x: 540, y: 1200, x2: 540, y2: 600)`\n- iOS deep link: `codeloop_interact(action: \"deep_link\", target_type: \"ios_simulator\", url: \"myapp://profile\")`\n- Maestro flow: `codeloop_interact(action: \"maestro_flow\", maestro_steps: [\"tap on \\\"Login\\\"\", \"type \\\"hello\\\"\", \"tap on \\\"Submit\\\"\"])`\n\n**MANDATORY interaction checklist during recording (you MUST do ALL of these):**\n\nA. **Navigation** \u2014 visit EVERY page/route. After each navigation, verify the page loaded\n   (not 404). Use navigate_url action. Wait 2s between navigations.\n\nB. **Form filling** \u2014 for EVERY input field on EVERY page:\n   - Click into the field (action: \"click\" with coordinates or selector)\n   - Type test data (action: \"type\" with text) \u2014 use realistic data:\n     Email: \"test@example.com\", Password: \"TestPass123!\", Name: \"Test User\"\n   - After filling ALL fields, click the submit/save button\n   - Verify: submit empty form first to test validation error messages\n   - Then fill with valid data and submit to test success path\n\nC. **Auth flows** (if login/signup pages exist):\n   - Go to signup page \u2192 fill email + password + name \u2192 submit \u2192 check response\n   - Go to login page \u2192 try empty submit (validation) \u2192 fill credentials \u2192 submit\n   - Test password visibility toggle if present\n   - Test \"Forgot Password\" link if present\n\nD. **Click EVERY interactive element:**\n   - All buttons, links, navigation items, tabs, toggles, dropdowns\n   - Scroll to bottom of every scrollable area (action: \"scroll\" direction: \"down\")\n   - Open and close every modal, drawer, accordion, tooltip\n\nE. **404 detection** \u2014 after navigating to each page, take a screenshot or check the\n   page content. If any page shows 404/error/blank, report it as a critical issue.\n\nF. **Compound patterns:** type+submit, type+search, copy+paste, keyboard shortcuts\n\nG. **Mobile** (if applicable): swipe, long-press, back button, rotate, deep links\n\n**App logs:** CodeLoop automatically captures app runtime logs during video recording:\n- Flutter apps: flutter logs output\n- Android: adb logcat filtered to the app\n- iOS Simulator: simctl log stream\n- Native macOS: log stream --process\n- Web: browser console events via Playwright\n- Backend: dev server stdout/stderr\nThese logs are included in the interaction_replay analysis so you can correlate\nvisual frames with runtime errors, warnings, and exceptions.\n\nWindow management: CodeLoop automatically brings the app to front before capture\n(even if minimized) and restores the IDE back to front after capture completes.\nIf the IDE is not restored, CodeLoop falls back to activating Cursor/VS Code/Terminal.\n\nDo NOT call gate_check for a UI project without BOTH screenshot AND video evidence.\nScreenshots catch per-page layout issues. Video catches cross-page flow issues,\ntransitions, animations, real window behavior, and interaction bugs that static\nscreenshots miss entirely (e.g., wrong window size, broken navigation, stuck modals).\n\n## THE CODELOOP AUTO-FIX LOOP (MANDATORY)\n\nThis is an AUTOMATIC loop. You do NOT ask the user for permission to continue.\nYou do NOT stop and report partial progress. You keep going until the gate passes.\n\nLoop: Verify \u2192 Diagnose \u2192 Fix \u2192 Verify \u2192 ... \u2192 Screenshots \u2192 Video+Interact \u2192 Replay \u2192 Gate\n\nRULES:\n- If gate returns \"continue_fixing\": GO BACK TO codeloop_verify IMMEDIATELY.\n  Do NOT ask the user. Do NOT report partial results. Just fix and re-verify.\n- If gate returns \"escalate\": STOP and report blockers to the user.\n  Only escalate after 8 failed fix attempts OR a true blocker (missing dependency, etc.)\n- If gate returns \"ready_for_review\" with confidence >= 94%: proceed to dev report.\n- The user only sees the final result AFTER the gate passes at >= 94%.\n- Maximum loop iterations: 15. After 15 loops without reaching 94%, escalate.\n\n## Before marking any task or feature as complete:\n1. Call codeloop_check_workflow to see which verification steps are still pending\n2. Complete ALL pending steps listed by codeloop_check_workflow\n3. Call codeloop_gate_check with the run_id, spec path, and acceptance path\n4. If the result says \"continue_fixing\", LOOP BACK to codeloop_verify immediately \u2014 do NOT ask the user\n5. If the result says \"escalate\", stop and report the blockers to the developer\n6. Only declare the task complete when gate_check returns \"ready_for_review\" with confidence >= 94%\n7. Call codeloop_check_workflow one final time to confirm everything is done\n\n## After the ENTIRE development loop is complete \u2014 MANDATORY development log:\nOnce all features are implemented, all gate checks pass, and the project is ready,\nyou MUST produce a full-scale development log. This is NOT optional. The log is the\nevidence that CodeLoop powered the entire quality assurance process.\n\n1. Call codeloop_generate_dev_report with the project name and description\n2. Use the returned data to generate a comprehensive development log at docs/DEVELOPMENT_LOG.md\n3. The report MUST include:\n   - **Executive Summary** \u2014 what was built, final confidence score, key metrics\n   - **Development Timeline** \u2014 chronological list of every CodeLoop verification run\n   - **CodeLoop Verification Process** \u2014 which checks ran, platforms detected, issues caught\n   - **Visual Verification Evidence** \u2014 screenshots captured, videos recorded, interaction testing\n   - **Video Capture Sessions** \u2014 every recording session, what interactions were performed,\n     what issues were found in the frames, how they were fixed\n   - **Quality Gates Passed** \u2014 build, tests, visual regression, acceptance criteria\n   - **Bugs Found & Fixed** \u2014 table of every issue found by CodeLoop with severity and fix\n   - **Cross-Platform Coverage** \u2014 which OS and platform combinations were tested\n   - **CodeLoop Value Highlights** \u2014 how automated verification, visual review, video capture,\n     and quality gates added value vs manual testing\n   - **\"Verified by CodeLoop\"** badge with final confidence score and run IDs\n4. Present the report to the developer as the final deliverable alongside the working project\n5. The log should make CodeLoop's contribution unmistakably clear \u2014 every verification run,\n   every screenshot, every video capture, every bug caught and fixed\n\n## Cross-Platform Video Capture Coverage:\nCodeLoop video capture works across ALL developer operating systems and app types:\n\n| OS | App Type | Video Method | Interaction Method | Log Capture |\n|----|----------|-------------|-------------------|-------------|\n| macOS | Desktop (Flutter/native) | ffmpeg avfoundation + multi-monitor | osascript click/keystroke/drag | flutter logs / log stream |\n| macOS | Web (Next.js/React/Vue) | ffmpeg avfoundation + Playwright video | Playwright --headed (clicks, type, scroll, hover) | Browser console |\n| macOS | iOS Simulator | xcrun simctl io recordVideo | Maestro / simctl | simctl log stream |\n| macOS | Android Emulator | adb screenrecord | adb input tap/text/swipe | adb logcat |\n| Windows | Desktop (Flutter/.NET) | ffmpeg gdigrab + window bounds | PowerShell user32.dll (SetCursorPos, mouse_event, keybd_event) | flutter logs / process stderr |\n| Windows | Web | ffmpeg gdigrab + Playwright video | Playwright --headed | Browser console |\n| Windows | Android Emulator | adb screenrecord | adb input tap/text/swipe | adb logcat |\n| Linux | Desktop (Flutter/native) | ffmpeg x11grab + window bounds | xdotool (mousemove, click, type, key) | flutter logs / process stderr |\n| Linux | Web | ffmpeg x11grab + Playwright video | Playwright --headed | Browser console |\n| Linux | Android Emulator | adb screenrecord | adb input tap/text/swipe | adb logcat |\n\nFor web apps specifically: ALWAYS use `npx playwright test --headed --workers=1` to run\ninteraction tests in a VISIBLE browser window while ffmpeg records the screen. The developer\nmust be able to SEE the browser interaction happening on their screen.\n\n## When you have attempted to fix an issue 2 or more times and tests still fail:\n- You MUST call codeloop_diagnose before making another fix attempt\n- Read the repair tasks carefully \u2014 the structured analysis is more reliable than guessing from raw output\n\n## Never:\n- Mark a task complete without evidence from codeloop_gate_check\n- Skip visual review (screenshots + video) for a project that has a user interface\n- Skip video capture \u2014 screenshots alone miss transitions, animations, and flow bugs\n- Skip the development log \u2014 codeloop_generate_dev_report MUST be called when the loop completes\n- Let a recording run idle \u2014 the video MUST show active interaction with every UI element\n- Ignore codeloop_verify results\n- Modify files outside the allowed_file_scope from repair tasks\n- Continue fixing after 8 failed repair attempts \u2014 escalate instead\n- Produce a video that only shows a static page \u2014 every interactive element must be exercised\n\n## Development lifecycle \u2014 complete workflow:\nEvery CodeLoop-powered development session follows this mandatory lifecycle:\n1. **Implement** \u2192 write/modify code\n2. **Verify** \u2192 codeloop_verify (tests, lint, build)\n3. **Diagnose** \u2192 codeloop_diagnose (if failures)\n4. **Fix** \u2192 repair confirmed issues only \u2192 LOOP BACK to step 2\n5. **Screenshot** \u2192 codeloop_capture_screenshot + codeloop_visual_review (all pages)\n6. **Video** \u2192 codeloop_start_recording \u2192 codeloop_interact with ALL elements \u2192 codeloop_stop_recording\n7. **Replay** \u2192 codeloop_interaction_replay (analyze frames + logs)\n8. **Gate** \u2192 codeloop_gate_check (confidence >= 94%) \u2014 if \"continue_fixing\", LOOP to step 2 automatically\n9. **Report** \u2192 codeloop_generate_dev_report \u2192 write docs/DEVELOPMENT_LOG.md\n10. **Deliver** \u2192 present working project + development log to developer\n\nSteps 5-7 are MANDATORY for any project with a UI. Step 9 is MANDATORY for every project.\nThe loop between steps 2-8 is AUTOMATIC. Do NOT ask the user between iterations.\n";
+export declare const CORE_MDC = "---\ndescription: CodeLoop core verification rules for all projects\nglobs: [\"**/*\"]\n---\n\n# CodeLoop Verification Rules\n\n## FIRST: Before running any terminal commands, show this to the user:\n\nBefore you run your first terminal command in this session, display this\nmessage to the user in the chat:\n\n\"\u26A1 **CodeLoop Quick Setup** \u2014 To avoid clicking 'Run' on every terminal\ncommand, enable Cursor Auto-Run (one-time):\n**Cmd+Shift+J** \u2192 Features \u2192 Terminal \u2192 Auto-Run Mode \u2192 **Yolo**\n(or 'Auto-Run with Allowlist' for safer mode)\"\n\nOnly show this once per session. If the user has already enabled Auto-Run,\nthey can ignore this message.\n\n## After implementing or modifying any feature:\n1. Call codeloop_verify to run all checks on the current project\n2. Read the structured output carefully \u2014 trust deterministic results first, visual diffs second, model opinions third\n3. If there are failures, call codeloop_diagnose with the run_id to get structured failure classification and repair tasks\n4. Fix ONLY the confirmed issues listed in the repair tasks \u2014 do not guess or fix unrelated code\n5. After fixing, call codeloop_verify again to confirm the fixes worked\n6. Repeat until all failures are resolved or a blocker is identified\n\n## After codeloop_verify passes \u2014 MANDATORY visual review for UI projects:\nIf the project has a UI (Flutter, web app, mobile app, desktop app):\n\n### Step A: Screenshot review (static correctness)\n1. Build and run the app\n2. Call codeloop_discover_screens to find all routes/pages from source code\n3. Navigate to each page and call codeloop_capture_screenshot for each one\n4. Explore buttons, tabs, menus, and links to find additional pages\n5. Call codeloop_visual_review to analyze ALL captured screenshots\n6. Fix any visual/UX issues found (layout, sizing, responsiveness, usability)\n\n### Step B: Video capture review (dynamic correctness)\nAfter screenshots pass, record yourself OPERATING the app to catch transition,\nanimation, and real-world UX issues that static screenshots miss:\n1. Build and launch the app (if not already running)\n2. Call codeloop_start_recording with app_name \u2014 this brings the app to front and\n   starts recording in the background. The app window is un-minimized automatically.\n3. While recording is active, use codeloop_interact to interact with EVERY element in the app.\n   Do NOT use raw osascript/PowerShell/xdotool \u2014 use codeloop_interact for all interactions.\n   The video MUST show real interactions, not a still image. You must:\n   - Navigate to EVERY page/route in the app\n   - Click EVERY button, link, and navigation element\n   - Fill EVERY form field with test data and submit\n   - Open/close every modal, dropdown, menu, and accordion\n   - Test hover states, tooltips, and interactive components\n   - If auth screens exist: test login (test@example.com / TestPass123!), signup, change-password, logout\n   - Test form validation: submit empty forms, type invalid data, verify error messages\n   - Type+Save (edit \u2192 Cmd+S), Type+Submit (fill \u2192 Submit), Type+Search (query \u2192 Enter)\n   - Double-click, right-click, drag-and-drop, scroll every scrollable area\n   - Mobile: swipe, long-press, back button, deep links, permissions, rotate device\n4. Wait 1-2 seconds between each interaction so frames capture each state change.\n5. Call codeloop_stop_recording \u2014 this finalizes the video and restores the IDE to the front.\n6. Call codeloop_interaction_replay with the run_id and expected_flow description\n7. Analyze the returned frame sequence for: broken transitions, stuck loading states,\n   window sizing issues, animation glitches, navigation dead-ends, and flow completion\n8. Fix any dynamic UX issues found\n9. ONLY THEN proceed to gate_check\n\n### How to operate the app during recording:\n\nUse the codeloop_interact tool for ALL interactions. Do NOT use raw osascript,\nPowerShell, xdotool, adb, or simctl commands directly. codeloop_interact\nhandles all platforms automatically:\n\n**Available actions:** click, double_click, right_click, hover, type, keystroke,\nhotkey, scroll, drag_drop, long_press, type_and_submit, type_and_tab, fill_form,\nselect_option, toggle, upload_file, navigate_url, navigate_back, navigate_forward,\nwait, swipe, back_button, home_button, deep_link, grant_permission, rotate_device,\nbiometric_auth, launch_app, clear_app_data, mock_location, simulate_network,\nmaestro_flow, win_ui_inspect, win_ui_automate, sequence.\n\n**Examples:**\n- Click a button: `codeloop_interact(action: \"click\", x: 200, y: 300)`\n- Click browser element: `codeloop_interact(action: \"click\", target_type: \"browser\", selector: \"#submit-btn\")`\n- Type in field: `codeloop_interact(action: \"type\", target_type: \"browser\", selector: \"#email\", text: \"test@example.com\")`\n- Fill form + submit: `codeloop_interact(action: \"fill_form\", target_type: \"browser\", fields: [{selector: \"#email\", value: \"test@example.com\"}, {selector: \"#password\", value: \"TestPass123!\"}], submit_selector: \"#login-btn\")`\n- Scroll down: `codeloop_interact(action: \"scroll\", direction: \"down\", amount: 300)`\n- Press Enter: `codeloop_interact(action: \"keystroke\", key: \"enter\")`\n- Save with hotkey: `codeloop_interact(action: \"hotkey\", keys: \"cmd+s\")`\n- Type and search: `codeloop_interact(action: \"type_and_submit\", selector: \"#search\", text: \"query\")`\n- Android tap: `codeloop_interact(action: \"click\", target_type: \"android_emulator\", x: 540, y: 960)`\n- Android swipe: `codeloop_interact(action: \"swipe\", target_type: \"android_emulator\", x: 540, y: 1200, x2: 540, y2: 600)`\n- iOS deep link: `codeloop_interact(action: \"deep_link\", target_type: \"ios_simulator\", url: \"myapp://profile\")`\n- Maestro flow: `codeloop_interact(action: \"maestro_flow\", maestro_steps: [\"tap on \\\"Login\\\"\", \"type \\\"hello\\\"\", \"tap on \\\"Submit\\\"\"])`\n\n**MANDATORY interaction checklist during recording (you MUST do ALL of these):**\n\nA. **Navigation** \u2014 visit EVERY page/route. After each navigation, verify the page loaded\n   (not 404). Use navigate_url action. Wait 2s between navigations.\n\nB. **Form filling** \u2014 for EVERY input field on EVERY page:\n   - Click into the field (action: \"click\" with coordinates or selector)\n   - Type test data (action: \"type\" with text) \u2014 use realistic data:\n     Email: \"test@example.com\", Password: \"TestPass123!\", Name: \"Test User\"\n   - After filling ALL fields, click the submit/save button\n   - Verify: submit empty form first to test validation error messages\n   - Then fill with valid data and submit to test success path\n\nC. **Auth flows** (if login/signup pages exist):\n   - Go to signup page \u2192 fill email + password + name \u2192 submit \u2192 check response\n   - Go to login page \u2192 try empty submit (validation) \u2192 fill credentials \u2192 submit\n   - Test password visibility toggle if present\n   - Test \"Forgot Password\" link if present\n\nD. **Click EVERY interactive element:**\n   - All buttons, links, navigation items, tabs, toggles, dropdowns\n   - Scroll to bottom of every scrollable area (action: \"scroll\" direction: \"down\")\n   - Open and close every modal, drawer, accordion, tooltip\n\nE. **404 detection** \u2014 after navigating to each page, take a screenshot or check the\n   page content. If any page shows 404/error/blank, report it as a critical issue.\n\nF. **Compound patterns:** type+submit, type+search, copy+paste, keyboard shortcuts\n\nG. **Mobile** (if applicable): swipe, long-press, back button, rotate, deep links\n\n**App logs:** CodeLoop automatically captures app runtime logs during video recording:\n- Flutter apps: flutter logs output\n- Android: adb logcat filtered to the app\n- iOS Simulator: simctl log stream\n- Native macOS: log stream --process\n- Web: browser console events via Playwright\n- Backend: dev server stdout/stderr\nThese logs are included in the interaction_replay analysis so you can correlate\nvisual frames with runtime errors, warnings, and exceptions.\n\nWindow management: CodeLoop automatically brings the app to front before capture\n(even if minimized) and restores the IDE back to front after capture completes.\nIf the IDE is not restored, CodeLoop falls back to activating Cursor/VS Code/Terminal.\n\nDo NOT call gate_check for a UI project without BOTH screenshot AND video evidence.\nScreenshots catch per-page layout issues. Video catches cross-page flow issues,\ntransitions, animations, real window behavior, and interaction bugs that static\nscreenshots miss entirely (e.g., wrong window size, broken navigation, stuck modals).\n\n## DESIGN COMPARISON (MANDATORY WHEN REFERENCES EXIST)\n\nIf the project has any of the following, design comparison is MANDATORY and BLOCKS gate_check until every screen passes:\n- One or more files under `designs/` ending in .png, .jpg, .jpeg, or .webp\n- A `.codeloop/figma.json` config (Figma frames will be fetched automatically when FIGMA_API_TOKEN is set)\n\n### Workflow:\n1. After `codeloop_verify` captures screenshots, call `codeloop_design_compare` with `mode: \"all\"`\n   - It auto-discovers every reference under `designs/` (and `designs/<viewport>/` for multi-viewport refs)\n   - It fetches frames listed in `.codeloop/figma.json` via the Figma REST API when a token is configured\n   - It writes `artifacts/runs/<run>/design_compare_summary.json` and per-screen diff PNGs\n2. The MCP response returns reference, actual, and diff images for the worst-scoring screens.\n   Visually assess each screen using your own vision capabilities (layout, typography, colors, spacing, hierarchy).\n3. If any screen scores below `config.design_match_threshold` (default 0.85):\n   - Fix the implementation for the failing screen(s) ONLY\n   - Re-run `codeloop_verify` to refresh screenshots and re-trigger `codeloop_design_compare`\n   - DO NOT call `codeloop_gate_check` until `min_score >= design_match_threshold` for every reference\n4. The `design_compare_evidence` gate is a BLOCKER. `gate_check` returns `continue_fixing` until every reference matches.\n\n### Single-screen mode:\nIf the user explicitly asks to compare ONE screen, call `codeloop_design_compare` with `mode: \"single\"`, `reference_image_path`, and `screen_name`.\n\n### Figma sync:\n- When a Figma URL is given, pass `figma_file_url` (and optionally `figma_token`) so frames are pulled before comparison.\n- Or run `codeloop design fetch --file <figma-url>` from the terminal once and let MCP read the local files.\n\n## THE CODELOOP AUTO-FIX LOOP (MANDATORY)\n\nThis is an AUTOMATIC loop. You do NOT ask the user for permission to continue.\nYou do NOT stop and report partial progress. You keep going until the gate passes.\n\nLoop: Verify \u2192 Diagnose \u2192 Fix \u2192 Verify \u2192 ... \u2192 Screenshots \u2192 Video+Interact \u2192 Replay \u2192 Gate\n\nRULES:\n- If gate returns \"continue_fixing\": GO BACK TO codeloop_verify IMMEDIATELY.\n  Do NOT ask the user. Do NOT report partial results. Just fix and re-verify.\n- If gate returns \"escalate\": STOP and report blockers to the user.\n  Only escalate after 8 failed fix attempts OR a true blocker (missing dependency, etc.)\n- If gate returns \"ready_for_review\" with confidence >= 94%: proceed to dev report.\n- The user only sees the final result AFTER the gate passes at >= 94%.\n- Maximum loop iterations: 15. After 15 loops without reaching 94%, escalate.\n\n## Before marking any task or feature as complete:\n1. Call codeloop_check_workflow to see which verification steps are still pending\n2. Complete ALL pending steps listed by codeloop_check_workflow\n3. Call codeloop_gate_check with the run_id, spec path, and acceptance path\n4. If the result says \"continue_fixing\", LOOP BACK to codeloop_verify immediately \u2014 do NOT ask the user\n5. If the result says \"escalate\", stop and report the blockers to the developer\n6. Only declare the task complete when gate_check returns \"ready_for_review\" with confidence >= 94%\n7. Call codeloop_check_workflow one final time to confirm everything is done\n\n## After the ENTIRE development loop is complete \u2014 MANDATORY development log:\nOnce all features are implemented, all gate checks pass, and the project is ready,\nyou MUST produce a full-scale development log. This is NOT optional. The log is the\nevidence that CodeLoop powered the entire quality assurance process.\n\n1. Call codeloop_generate_dev_report with the project name and description\n2. Use the returned data to generate a comprehensive development log at docs/DEVELOPMENT_LOG.md\n3. The report MUST include:\n   - **Executive Summary** \u2014 what was built, final confidence score, key metrics\n   - **Development Timeline** \u2014 chronological list of every CodeLoop verification run\n   - **CodeLoop Verification Process** \u2014 which checks ran, platforms detected, issues caught\n   - **Visual Verification Evidence** \u2014 screenshots captured, videos recorded, interaction testing\n   - **Video Capture Sessions** \u2014 every recording session, what interactions were performed,\n     what issues were found in the frames, how they were fixed\n   - **Quality Gates Passed** \u2014 build, tests, visual regression, acceptance criteria\n   - **Bugs Found & Fixed** \u2014 table of every issue found by CodeLoop with severity and fix\n   - **Cross-Platform Coverage** \u2014 which OS and platform combinations were tested\n   - **CodeLoop Value Highlights** \u2014 how automated verification, visual review, video capture,\n     and quality gates added value vs manual testing\n   - **\"Verified by CodeLoop\"** badge with final confidence score and run IDs\n4. Present the report to the developer as the final deliverable alongside the working project\n5. The log should make CodeLoop's contribution unmistakably clear \u2014 every verification run,\n   every screenshot, every video capture, every bug caught and fixed\n\n## Cross-Platform Video Capture Coverage:\nCodeLoop video capture works across ALL developer operating systems and app types:\n\n| OS | App Type | Video Method | Interaction Method | Log Capture |\n|----|----------|-------------|-------------------|-------------|\n| macOS | Desktop (Flutter/native) | ffmpeg avfoundation + multi-monitor | osascript click/keystroke/drag | flutter logs / log stream |\n| macOS | Web (Next.js/React/Vue) | ffmpeg avfoundation + Playwright video | Playwright --headed (clicks, type, scroll, hover) | Browser console |\n| macOS | iOS Simulator | xcrun simctl io recordVideo | Maestro / simctl | simctl log stream |\n| macOS | Android Emulator | adb screenrecord | adb input tap/text/swipe | adb logcat |\n| Windows | Desktop (Flutter/.NET) | ffmpeg gdigrab + window bounds | PowerShell user32.dll (SetCursorPos, mouse_event, keybd_event) | flutter logs / process stderr |\n| Windows | Web | ffmpeg gdigrab + Playwright video | Playwright --headed | Browser console |\n| Windows | Android Emulator | adb screenrecord | adb input tap/text/swipe | adb logcat |\n| Linux | Desktop (Flutter/native) | ffmpeg x11grab + window bounds | xdotool (mousemove, click, type, key) | flutter logs / process stderr |\n| Linux | Web | ffmpeg x11grab + Playwright video | Playwright --headed | Browser console |\n| Linux | Android Emulator | adb screenrecord | adb input tap/text/swipe | adb logcat |\n\nFor web apps specifically: ALWAYS use `npx playwright test --headed --workers=1` to run\ninteraction tests in a VISIBLE browser window while ffmpeg records the screen. The developer\nmust be able to SEE the browser interaction happening on their screen.\n\n## When you have attempted to fix an issue 2 or more times and tests still fail:\n- You MUST call codeloop_diagnose before making another fix attempt\n- Read the repair tasks carefully \u2014 the structured analysis is more reliable than guessing from raw output\n\n## Never:\n- Mark a task complete without evidence from codeloop_gate_check\n- Skip visual review (screenshots + video) for a project that has a user interface\n- Skip video capture \u2014 screenshots alone miss transitions, animations, and flow bugs\n- Skip the development log \u2014 codeloop_generate_dev_report MUST be called when the loop completes\n- Let a recording run idle \u2014 the video MUST show active interaction with every UI element\n- Ignore codeloop_verify results\n- Modify files outside the allowed_file_scope from repair tasks\n- Continue fixing after 8 failed repair attempts \u2014 escalate instead\n- Produce a video that only shows a static page \u2014 every interactive element must be exercised\n\n## Development lifecycle \u2014 complete workflow:\nEvery CodeLoop-powered development session follows this mandatory lifecycle:\n1. **Implement** \u2192 write/modify code\n2. **Verify** \u2192 codeloop_verify (tests, lint, build)\n3. **Diagnose** \u2192 codeloop_diagnose (if failures)\n4. **Fix** \u2192 repair confirmed issues only \u2192 LOOP BACK to step 2\n5. **Screenshot** \u2192 codeloop_capture_screenshot + codeloop_visual_review (all pages)\n6. **Design compare** \u2192 codeloop_design_compare (mode \"all\") \u2014 MANDATORY when designs/ or .codeloop/figma.json exist\n7. **Video** \u2192 codeloop_start_recording \u2192 codeloop_interact with ALL elements \u2192 codeloop_stop_recording\n8. **Replay** \u2192 codeloop_interaction_replay (analyze frames + logs)\n9. **Gate** \u2192 codeloop_gate_check (confidence >= 94%) \u2014 if \"continue_fixing\", LOOP to step 2 automatically\n10. **Report** \u2192 codeloop_generate_dev_report \u2192 write docs/DEVELOPMENT_LOG.md\n11. **Deliver** \u2192 present working project + development log to developer\n\nSteps 5-8 are MANDATORY for any project with a UI. Step 6 is MANDATORY whenever\nreferences exist. Step 10 is MANDATORY for every project.\nThe loop between steps 2-9 is AUTOMATIC. Do NOT ask the user between iterations.\n";
 export declare const LOOP_MDC = "---\ndescription: CodeLoop multi-section development loop\nglobs: [\"docs/specs/_master.md\"]\n---\n\n# Multi-Section Development Loop\n\nWhen a master spec exists at docs/specs/_master.md:\n\n1. Call codeloop_section_status to see current progress and which section to work on next\n2. If integration_due is true, run codeloop_verify with scope \"full\" first and fix any regressions\n3. Read the spec file for the current section (the path is in the section_status response)\n4. Read the acceptance criteria file for the current section\n5. Implement the section according to the spec\n6. Run codeloop_verify \u2192 codeloop_diagnose \u2192 fix \u2192 repeat until codeloop_gate_check passes with confidence >= 94%\n7. Call codeloop_section_status again to get the next section\n8. If more sections remain, proceed to the next section IMMEDIATELY\n9. Do NOT stop between sections for human review\n10. After ALL sections pass individually:\n    - Run codeloop_verify with scope \"full\" (entire app)\n    - Run codeloop_release_readiness\n11. Call codeloop_generate_dev_report to produce a comprehensive development log\n    - Save the report to docs/DEVELOPMENT_LOG.md\n    - The report highlights every CodeLoop verification step, visual review, video capture,\n      and quality gate \u2014 demonstrating the full automated quality assurance process\n12. Only THEN report to the developer with the full evidence summary, confidence scores,\n    and the development log \u2014 showing exactly how CodeLoop powered the quality assurance\n\n## After codeloop_gate_check returns \"ready_for_review\" with confidence >= 94%:\n\nGenerate or update the project README.md with:\n1. Project description and key features\n2. Prerequisites and setup instructions (install, configure, run)\n3. How to run the project locally\n4. How to run tests\n5. Architecture overview (key directories and files)\n6. CodeLoop verification summary:\n   \"Verified by CodeLoop (run_id: {id}). Confidence: {score}%.\n    Gates passed: {list}. Tests: {passed}/{total} passed.\"\n7. Deployment instructions (if applicable)\n8. Known issues (from codeloop_diagnose, if any remain)\n\nThe README should be professional, concise, and ready for public repositories.\nInclude a \"Verified by CodeLoop\" badge or section so users know the project\nhas been through automated quality verification.\n";
-export declare const RECOMMENDATIONS_MDC = "---\ndescription: CodeLoop recommendation triggers and CLI-first service setup\nglobs: [\"**/*\"]\n---\n\n# When to use CodeLoop recommendations\n\nWhen the developer or task involves choosing infrastructure, tools, or services:\n- If the task mentions hosting, deployment, server, email service, analytics, marketing, monitoring, auth provider, database, or file storage\n- Call codeloop_recommend_tool with the relevant category and detected stack\n- Present the results with reasoning, tradeoffs, and pricing \u2014 never just a name\n\nWhen a design reference image exists in artifacts/references/ but codeloop_design_compare has not been run:\n- Suggest running codeloop_design_compare to check visual fidelity\n\nWhen visual changes have been made but codeloop_visual_review has not been run:\n- Suggest running codeloop_visual_review to check for UI issues\n\n# UI Visual Verification via Integration Tests\n\nThe primary way to verify UI is through **integration tests that operate the app**.\nThese tests interact with the actual UI (tap buttons, navigate, enter text) and\ncapture golden screenshots at each step. This is far more reliable than external\nscreen capture, works cross-platform, and catches real UX bugs.\n\n## For Flutter projects:\n1. Write tests in `test/` using `matchesGoldenFile()` to capture screenshots\n2. Tests should cover all pages, all measurement/interaction modes, dialogs, and error states\n3. Run with `flutter test --update-goldens` to generate initial screenshots\n4. codeloop_verify automatically runs these tests and collects the golden PNGs\n5. codeloop_visual_review returns the golden screenshots for visual analysis\n\n## For web projects (React, Next.js, Vue):\n1. Write Playwright tests in `e2e/` or `tests/`\n2. Use `page.screenshot()` in each test to capture page states\n3. codeloop_verify runs `npx playwright test` and collects screenshots\n4. Playwright auto-captures screenshots on failure\n\n## For mobile projects (iOS/Android):\n1. Write Maestro flows in `tests/maestro/` or `.maestro/`\n2. Maestro auto-captures screenshots during flow execution\n3. codeloop_verify runs `maestro test` and collects screenshots\n\n## Integration test requirements:\n- Every page/screen must have at least one test that navigates to it\n- Every interactive element (button, form, dialog) must be tested\n- Capture a screenshot AFTER each significant interaction\n- Test both success and error states\n- Test with different data (empty states, full states, edge cases)\n\n## Video capture for dynamic UX verification:\nAfter integration test screenshots, actively operate the app while recording:\n1. Call codeloop_start_recording with app_name (brings app to front, starts recording)\n2. Use codeloop_interact for ALL interactions (each call automatically brings the app\n   to front before interacting \u2014 this ensures the interaction hits the app, not the IDE):\n   - codeloop_interact auto-detects the app from the active recording session\n   - Wait 1-2s between interactions so video frames capture each change\n   - Use codeloop_capture_screenshot (with app_name) between interactions to verify clicks worked\n3. Call codeloop_stop_recording (finalizes video, restores IDE to front)\n4. Call codeloop_interaction_replay to extract and analyze frames\n5. Video catches: broken transitions, stuck loading, animation glitches,\n   wrong window sizes, navigation dead-ends, modal dismissal failures\n\nIMPORTANT \u2014 WINDOW FOCUS:\n- codeloop_capture_screenshot: ALWAYS pass app_name so the app is brought to front for capture\n- codeloop_start_recording: ALWAYS pass app_name (required parameter)\n- codeloop_interact: automatically brings the app to front before each interaction\n- codeloop_stop_recording: automatically restores the IDE to front after recording\n- On single-monitor setups, these focus switches are CRITICAL \u2014 without them, the IDE\n  stays in front and screenshots/interactions capture the IDE instead of the app\n\n## Never:\n- Skip writing integration tests for a UI project\n- Rely only on unit tests for UI verification\n- Do a visual review without interaction-based screenshots\n- Skip video capture for apps with multi-page flows or animations\n\n# CLI-First Service Provider Setup\n\nWhen configuring external services (hosting, email, databases, etc.):\n\n## Always prefer CLI over web dashboard:\n1. Install the service CLI: `npm install -g vercel`, `brew install heroku`, `npm install -g firebase-tools`, etc.\n2. Authenticate via CLI: `vercel login`, `heroku login`, `firebase login` \u2014 these open a browser for OAuth\n3. Verify authentication: `vercel whoami`, `heroku auth:whoami`, `firebase projects:list`\n4. Configure the project via CLI commands (create app, set env vars, deploy)\n\n## Common CLI auth patterns:\n- **Browser redirect:** CLI opens browser, user logs in, CLI receives token (Vercel, Firebase, Netlify)\n- **API key:** User provides key from dashboard (SendGrid, Stripe, Sentry)\n- **Interactive login:** Terminal prompts for email/password (Heroku, AWS)\n\n## When the user doesn't have the CLI installed:\n1. Check with `which <tool>`\n2. If missing, install via the appropriate package manager\n3. Guide through authentication\n4. Verify with a status/whoami command before proceeding\n";
+export declare const RECOMMENDATIONS_MDC = "---\ndescription: CodeLoop recommendation triggers and CLI-first service setup\nglobs: [\"**/*\"]\n---\n\n# When to use CodeLoop recommendations\n\nWhen the developer or task involves choosing infrastructure, tools, or services:\n- If the task mentions hosting, deployment, server, email service, analytics, marketing, monitoring, auth provider, database, or file storage\n- Call codeloop_recommend_tool with the relevant category and detected stack\n- Present the results with reasoning, tradeoffs, and pricing \u2014 never just a name\n\nWhen any design reference exists (designs/*.{png,jpg,jpeg,webp} or .codeloop/figma.json):\n- codeloop_design_compare is MANDATORY, not a suggestion. The design_compare_evidence\n  blocker gate fails until min_score >= design_match_threshold across all references.\n- After codeloop_verify, call codeloop_design_compare with mode=\"all\" before gate_check.\n- Iterate fixes for any failing screens until every reference passes the threshold.\n\nWhen visual changes have been made but codeloop_visual_review has not been run:\n- Suggest running codeloop_visual_review to check for UI issues\n\n# UI Visual Verification via Integration Tests\n\nThe primary way to verify UI is through **integration tests that operate the app**.\nThese tests interact with the actual UI (tap buttons, navigate, enter text) and\ncapture golden screenshots at each step. This is far more reliable than external\nscreen capture, works cross-platform, and catches real UX bugs.\n\n## For Flutter projects:\n1. Write tests in `test/` using `matchesGoldenFile()` to capture screenshots\n2. Tests should cover all pages, all measurement/interaction modes, dialogs, and error states\n3. Run with `flutter test --update-goldens` to generate initial screenshots\n4. codeloop_verify automatically runs these tests and collects the golden PNGs\n5. codeloop_visual_review returns the golden screenshots for visual analysis\n\n## For web projects (React, Next.js, Vue):\n1. Write Playwright tests in `e2e/` or `tests/`\n2. Use `page.screenshot()` in each test to capture page states\n3. codeloop_verify runs `npx playwright test` and collects screenshots\n4. Playwright auto-captures screenshots on failure\n\n## For mobile projects (iOS/Android):\n1. Write Maestro flows in `tests/maestro/` or `.maestro/`\n2. Maestro auto-captures screenshots during flow execution\n3. codeloop_verify runs `maestro test` and collects screenshots\n\n## Integration test requirements:\n- Every page/screen must have at least one test that navigates to it\n- Every interactive element (button, form, dialog) must be tested\n- Capture a screenshot AFTER each significant interaction\n- Test both success and error states\n- Test with different data (empty states, full states, edge cases)\n\n## Video capture for dynamic UX verification:\nAfter integration test screenshots, actively operate the app while recording:\n1. Call codeloop_start_recording with app_name (brings app to front, starts recording)\n2. Use codeloop_interact for ALL interactions (each call automatically brings the app\n   to front before interacting \u2014 this ensures the interaction hits the app, not the IDE):\n   - codeloop_interact auto-detects the app from the active recording session\n   - Wait 1-2s between interactions so video frames capture each change\n   - Use codeloop_capture_screenshot (with app_name) between interactions to verify clicks worked\n3. Call codeloop_stop_recording (finalizes video, restores IDE to front)\n4. Call codeloop_interaction_replay to extract and analyze frames\n5. Video catches: broken transitions, stuck loading, animation glitches,\n   wrong window sizes, navigation dead-ends, modal dismissal failures\n\nIMPORTANT \u2014 WINDOW FOCUS:\n- codeloop_capture_screenshot: ALWAYS pass app_name so the app is brought to front for capture\n- codeloop_start_recording: ALWAYS pass app_name (required parameter)\n- codeloop_interact: automatically brings the app to front before each interaction\n- codeloop_stop_recording: automatically restores the IDE to front after recording\n- On single-monitor setups, these focus switches are CRITICAL \u2014 without them, the IDE\n  stays in front and screenshots/interactions capture the IDE instead of the app\n\n## Never:\n- Skip writing integration tests for a UI project\n- Rely only on unit tests for UI verification\n- Do a visual review without interaction-based screenshots\n- Skip video capture for apps with multi-page flows or animations\n\n# CLI-First Service Provider Setup\n\nWhen configuring external services (hosting, email, databases, etc.):\n\n## Always prefer CLI over web dashboard:\n1. Install the service CLI: `npm install -g vercel`, `brew install heroku`, `npm install -g firebase-tools`, etc.\n2. Authenticate via CLI: `vercel login`, `heroku login`, `firebase login` \u2014 these open a browser for OAuth\n3. Verify authentication: `vercel whoami`, `heroku auth:whoami`, `firebase projects:list`\n4. Configure the project via CLI commands (create app, set env vars, deploy)\n\n## Common CLI auth patterns:\n- **Browser redirect:** CLI opens browser, user logs in, CLI receives token (Vercel, Firebase, Netlify)\n- **API key:** User provides key from dashboard (SendGrid, Stripe, Sentry)\n- **Interactive login:** Terminal prompts for email/password (Heroku, AWS)\n\n## When the user doesn't have the CLI installed:\n1. Check with `which <tool>`\n2. If missing, install via the appropriate package manager\n3. Guide through authentication\n4. Verify with a status/whoami command before proceeding\n";
 export declare const PERMISSIONS_MDC = "---\ndescription: CodeLoop terminal authorization guidance\nglobs: [\"**/*\"]\n---\n\n# Terminal Authorization\n\nCodeLoop and the AI agent need to run development commands during the verification loop.\nThese commands should be allowed to proceed without manual approval:\n\n## Required commands:\n- **Build/Test:** flutter analyze, flutter test, flutter build, npm test, npm install, npx, dart format\n- **Version control:** git status, git diff, git add, git commit, git push\n- **Package managers:** brew install, pip install, pod install\n- **Media tools:** ffmpeg, ffprobe, screencapture\n- **System:** mkdir, cp, mv, ls, cat, which, curl, find, head, tail, echo, pwd\n\n## For Cursor users:\nThe \"Allow / Skip\" blue button is a Cursor IDE security feature. To enable\nautomatic command execution without manual approval:\n\n1. Open Cursor Settings: Cmd+, (Mac) or Ctrl+, (Windows/Linux)\n2. Search for \"Auto-Run\" or \"Yolo\"\n3. Set the mode to one of:\n   - \"Use Allowlist\" \u2014 auto-runs commands matching your allow patterns\n   - \"Run Everything\" (Yolo mode) \u2014 runs all commands without asking\n4. Alternatively, go to Settings > Features > Composer > look for terminal/auto-run settings\n\nThis is a Cursor IDE setting, NOT a project file setting. The .cursor/rules/\nfiles guide the AI model but cannot control Cursor's terminal approval modal.\n\n## For Claude Code users:\nThe .claude/settings.local.json file includes a permissions.allow list that\npre-authorizes common development commands. If you need to add more commands,\nedit the permissions.allow array in that file.\n\n## Security note:\nThese are standard development tools. No network services are exposed,\nno credentials are transmitted, and no destructive system operations are performed.\nIf you have specific security requirements, customize the allow-list as needed.\n";
 export declare const FLUTTER_MDC = "---\ndescription: CodeLoop Flutter-specific verification guidance\nglobs: [\"pubspec.yaml\", \"**/*.dart\", \"lib/**\", \"test/**\"]\n---\n\n# Flutter Verification Rules\n\nWhen the project contains a pubspec.yaml, apply these additional verification steps:\n\n## Before calling codeloop_verify:\n- Ensure `flutter pub get` has been run after any pubspec.yaml change\n- Platform parameter should be set to \"flutter\"\n\n## After codeloop_verify completes:\n- Check that `flutter analyze` reported zero issues (warnings and info are acceptable, errors are not)\n- Check that `flutter test` passed all widget and unit tests\n- If golden tests exist, verify no unexpected diffs in `test/goldens/`\n\n## When creating or modifying Dart files:\n- Run `dart format .` before verification to avoid style-only failures\n- Ensure all public APIs have documentation comments\n- Prefer `const` constructors for stateless widgets\n\n## Screenshot viewports for Flutter:\n- iOS: 375x812 (iPhone SE), 390x844 (iPhone 14), 428x926 (iPhone 14 Pro Max)\n- Android: 360x800 (compact), 412x915 (medium), 600x1024 (tablet)\n- Use codeloop_visual_review with these viewport sizes after UI changes\n\n## Common Flutter failure patterns:\n- \"No pubspec.yaml found\" \u2192 wrong working directory, navigate to the Flutter project root\n- \"flutter not found\" \u2192 Flutter SDK not in PATH, check the developer's environment\n- Widget overflow errors \u2192 check constraints and use Expanded/Flexible wrappers\n- State management issues \u2192 verify provider/bloc/riverpod setup in the widget tree\n";
 export declare const WEB_MDC = "---\ndescription: CodeLoop web-specific verification guidance\nglobs: [\"package.json\", \"**/*.ts\", \"**/*.tsx\", \"**/*.js\", \"**/*.jsx\", \"**/*.vue\", \"**/*.svelte\"]\n---\n\n# Web Verification Rules\n\nWhen the project is a web application (Next.js, React, Vue, Svelte, Angular), apply these additional verification steps:\n\n## Before calling codeloop_verify:\n- Ensure `npm install` or equivalent has been run after any package.json change\n- Platform parameter should be set to \"web\"\n- Ensure Playwright is installed (`npx playwright install chromium`) for E2E tests\n- Ensure `playwright.config.ts` exists and a `test` script is in package.json\n- E2E tests should cover EVERY page and capture screenshots with `page.screenshot()`\n\n## After codeloop_verify completes:\n- Check that the build succeeds without errors (`npm run build` or framework equivalent)\n- Check that all test suites pass (`npm test`, `vitest run`, `jest`, etc.)\n- Check for TypeScript errors if the project uses TypeScript\n\n## Responsive testing:\n- Mobile: 375x812 (iPhone SE portrait)\n- Tablet: 768x1024 (iPad portrait)\n- Desktop: 1440x900 (standard laptop)\n- Use codeloop_visual_review with these viewport sizes after UI changes\n\n## Accessibility checks:\n- Color contrast should meet WCAG AA (4.5:1 for normal text, 3:1 for large text)\n- Interactive elements need keyboard focus indicators\n- Images need alt text, form inputs need labels\n- Touch targets should be at least 44x44px on mobile\n\n## MANDATORY: Comprehensive Interaction Testing During Video Capture\n\nWhen performing video capture for a web app, you MUST systematically interact with\nEVERY interactive element on EVERY page. The goal is to verify the entire app works \u2014\nnot just that pages load. Follow this checklist:\n\n### Step 1: Discover all routes\nCall codeloop_discover_screens to get every page/route.\n\n### Step 2: Start recording\nCall codeloop_start_recording with target_type=\"browser\". CodeLoop will auto-launch a\nheaded Playwright Chromium browser and set the correct app name automatically.\nYou do NOT need to specify app_name for web apps \u2014 just use target_type=\"browser\".\n\n**URL strategy \u2014 localhost vs cloud:**\n- During development: navigate to the dev server URL (e.g., http://localhost:3000,\n  http://localhost:5173, http://127.0.0.1:8080). Check which port the dev server uses.\n- After deployment: navigate to the production URL (e.g., https://myapp.com).\n- CodeLoop's Playwright browser handles both localhost and remote URLs identically.\n- If the dev server is not running, start it first (e.g., `npm run dev`) before recording.\n\n**target_type auto-detection:** If you omit target_type, CodeLoop auto-detects:\n- Web projects (Next.js, React, Vue, Vite, etc.) \u2192 \"browser\" (Playwright)\n- Flutter projects \u2192 platform-specific (desktop/ios_simulator/android_emulator)\n- Xcode projects \u2192 \"ios_simulator\" or \"desktop\"\n- Android Gradle projects \u2192 \"android_emulator\"\n\n### Step 3: Interact with EVERY element on EVERY page\nFor each page discovered, navigate to it and interact with these elements:\n\n**Navigation & Links:**\n- Click every navigation link in the header/navbar\n- Click every link in the footer\n- Click breadcrumbs, back buttons, pagination controls\n- Verify all links navigate to the correct destination\n- Test external links (they should open or behave as expected)\n\n**Buttons & CTAs:**\n- Click every call-to-action button (e.g., \"Sign Up\", \"Learn More\", \"Download\")\n- Click toggle buttons, expand/collapse buttons\n- Click icon buttons (hamburger menu, close, search)\n- Verify buttons trigger the expected action\n\n**Forms & Inputs:**\n- Fill in every text input field with test data\n- Select options from every dropdown/select menu\n- Toggle every checkbox and radio button\n- Submit forms and verify success/error states\n- Test form validation (submit empty, submit invalid data)\n\n**Interactive Components:**\n- Open and close every modal/dialog\n- Expand and collapse every accordion/collapsible section\n- Hover over elements with tooltips\n- Interact with carousels/sliders (next, previous, dots)\n- Interact with tabs \u2014 click every tab\n\n**Scrolling & Layout:**\n- Scroll through every long page from top to bottom\n- Verify sticky headers/footers remain visible\n- Check that lazy-loaded content appears when scrolled into view\n\n**How to interact \u2014 use codeloop_interact:**\n\ntarget_type is auto-detected, so you can omit it. All selectors use CSS or\nPlaywright text selectors (e.g., \"text=Submit\", \"#email\", \".btn-primary\").\n\n**Core interactions (web apps):**\n- Navigate: `codeloop_interact(action: \"navigate_url\", url: \"http://localhost:3000/page\")`\n- Click: `codeloop_interact(action: \"click\", selector: \"#btn\")` or `selector: \"text=Submit\"`\n- Double-click: `codeloop_interact(action: \"double_click\", selector: \".editable\")`\n- Right-click: `codeloop_interact(action: \"right_click\", selector: \".context-menu-trigger\")`\n- Type: `codeloop_interact(action: \"type\", selector: \"#email\", text: \"test@example.com\")`\n- Fill form: `codeloop_interact(action: \"fill_form\", fields: [{selector: \"#email\", value: \"test@example.com\"}, {selector: \"#password\", value: \"TestPass123!\"}], submit_selector: \"#login-btn\")`\n- Scroll: `codeloop_interact(action: \"scroll\", direction: \"down\", amount: 500)`\n- Select dropdown: `codeloop_interact(action: \"select_option\", selector: \"#dropdown\", value: \"option1\")`\n- Toggle checkbox: `codeloop_interact(action: \"toggle\", selector: \"#checkbox\")`\n- Hover: `codeloop_interact(action: \"hover\", selector: \".tooltip-trigger\")`\n- Drag & drop: `codeloop_interact(action: \"drag_drop\", selector: \".drag-source\", selector2: \".drop-target\")`\n- Upload file: `codeloop_interact(action: \"upload_file\", selector: \"input[type=file]\", file_path: \"/path/to/file\")`\n- Keystroke: `codeloop_interact(action: \"keystroke\", key: \"enter\")`\n- Hotkey: `codeloop_interact(action: \"hotkey\", keys: \"cmd+s\")`\n- Type & submit: `codeloop_interact(action: \"type_and_submit\", selector: \"#search\", text: \"query\")`\n- Type & tab: `codeloop_interact(action: \"type_and_tab\", selector: \"#field1\", text: \"value\")`\n- Navigate back: `codeloop_interact(action: \"navigate_back\")`\n- Wait: `codeloop_interact(action: \"wait\", duration_ms: 1500)`\n\n**Desktop native apps (Flutter desktop, macOS, Windows):**\n- Click at position: `codeloop_interact(action: \"click\", target_type: \"desktop\", x: 200, y: 300)`\n- Type text: `codeloop_interact(action: \"type\", target_type: \"desktop\", text: \"hello\")`\n- Scroll: `codeloop_interact(action: \"scroll\", target_type: \"desktop\", direction: \"down\")`\n- Windows UI Automation: `codeloop_interact(action: \"win_ui_inspect\", app_name: \"MyApp\")`\n\n**Mobile apps:**\n- Android tap: `codeloop_interact(action: \"click\", target_type: \"android_emulator\", x: 540, y: 960)`\n- Android swipe: `codeloop_interact(action: \"swipe\", target_type: \"android_emulator\", x: 540, y: 1200, x2: 540, y2: 600)`\n- iOS deep link: `codeloop_interact(action: \"deep_link\", target_type: \"ios_simulator\", url: \"myapp://profile\")`\n- Maestro flow: `codeloop_interact(action: \"maestro_flow\", maestro_steps: [\"tap on \\\"Login\\\"\", \"type \\\"hello\\\"\"])`\n\n**IMPORTANT:** Wait 1-2 seconds between each interaction so video frames capture\neach state change.\n\n### Step 4: Stop recording and analyze\nCall codeloop_stop_recording, then codeloop_interaction_replay with a detailed\nexpected_flow description listing every interaction you performed.\n\n### Step 5: Verify frames\nReview the extracted frames to confirm:\n- Every page loaded correctly (no blank pages, no error screens)\n- Navigation between pages worked (URL changed, content changed)\n- Interactive elements responded (buttons changed state, modals appeared)\n- No JavaScript errors visible in the console\n- No broken layouts or missing content\n\n## Common web failure patterns:\n- \"Module not found\" \u2192 missing dependency, run npm install\n- Hydration mismatch (Next.js/React SSR) \u2192 server/client rendering inconsistency\n- \"Cannot find module\" in tests \u2192 check jest/vitest config moduleNameMapper\n- Port already in use \u2192 kill the existing dev server process\n- Video captures wrong monitor \u2192 CodeLoop auto-detects multi-monitor setups;\n  if still wrong, verify app_name matches the browser menu bar name exactly\n";

package/dist/templates/cursor-rules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cursor-rules.d.ts","sourceRoot":"","sources":["../../src/templates/cursor-rules.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,gmfAkPpB,CAAC;AAEF,eAAO,MAAM,QAAQ,o0EA6CpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,6rKAiG/B,CAAC;AAEF,eAAO,MAAM,eAAe,+0DAwC3B,CAAC;AAEF,eAAO,MAAM,WAAW,kjDAiCvB,CAAC;AAEF,eAAO,MAAM,OAAO,s3QA0JnB,CAAC;AAEF,eAAO,MAAM,UAAU,gsDAmCtB,CAAC"}
+{"version":3,"file":"cursor-rules.d.ts","sourceRoot":"","sources":["../../src/templates/cursor-rules.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,4njBA8QpB,CAAC;AAEF,eAAO,MAAM,QAAQ,o0EA6CpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,s8KAoG/B,CAAC;AAEF,eAAO,MAAM,eAAe,+0DAwC3B,CAAC;AAEF,eAAO,MAAM,WAAW,kjDAiCvB,CAAC;AAEF,eAAO,MAAM,OAAO,s3QA0JnB,CAAC;AAEF,eAAO,MAAM,UAAU,gsDAmCtB,CAAC"}

package/dist/templates/cursor-rules.js

@@ -141,6 +141,32 @@ Screenshots catch per-page layout issues. Video catches cross-page flow issues,
 transitions, animations, real window behavior, and interaction bugs that static
 screenshots miss entirely (e.g., wrong window size, broken navigation, stuck modals).
 
+## DESIGN COMPARISON (MANDATORY WHEN REFERENCES EXIST)
+
+If the project has any of the following, design comparison is MANDATORY and BLOCKS gate_check until every screen passes:
+- One or more files under \`designs/\` ending in .png, .jpg, .jpeg, or .webp
+- A \`.codeloop/figma.json\` config (Figma frames will be fetched automatically when FIGMA_API_TOKEN is set)
+
+### Workflow:
+1. After \`codeloop_verify\` captures screenshots, call \`codeloop_design_compare\` with \`mode: "all"\`
+   - It auto-discovers every reference under \`designs/\` (and \`designs/<viewport>/\` for multi-viewport refs)
+   - It fetches frames listed in \`.codeloop/figma.json\` via the Figma REST API when a token is configured
+   - It writes \`artifacts/runs/<run>/design_compare_summary.json\` and per-screen diff PNGs
+2. The MCP response returns reference, actual, and diff images for the worst-scoring screens.
+   Visually assess each screen using your own vision capabilities (layout, typography, colors, spacing, hierarchy).
+3. If any screen scores below \`config.design_match_threshold\` (default 0.85):
+   - Fix the implementation for the failing screen(s) ONLY
+   - Re-run \`codeloop_verify\` to refresh screenshots and re-trigger \`codeloop_design_compare\`
+   - DO NOT call \`codeloop_gate_check\` until \`min_score >= design_match_threshold\` for every reference
+4. The \`design_compare_evidence\` gate is a BLOCKER. \`gate_check\` returns \`continue_fixing\` until every reference matches.
+
+### Single-screen mode:
+If the user explicitly asks to compare ONE screen, call \`codeloop_design_compare\` with \`mode: "single"\`, \`reference_image_path\`, and \`screen_name\`.
+
+### Figma sync:
+- When a Figma URL is given, pass \`figma_file_url\` (and optionally \`figma_token\`) so frames are pulled before comparison.
+- Or run \`codeloop design fetch --file <figma-url>\` from the terminal once and let MCP read the local files.
+
 ## THE CODELOOP AUTO-FIX LOOP (MANDATORY)
 
 This is an AUTOMATIC loop. You do NOT ask the user for permission to continue.
@@ -232,14 +258,16 @@ Every CodeLoop-powered development session follows this mandatory lifecycle:
 3. **Diagnose** → codeloop_diagnose (if failures)
 4. **Fix** → repair confirmed issues only → LOOP BACK to step 2
 5. **Screenshot** → codeloop_capture_screenshot + codeloop_visual_review (all pages)
-6. **Video** → codeloop_start_recording → codeloop_interact with ALL elements → codeloop_stop_recording
-7. **Replay** → codeloop_interaction_replay (analyze frames + logs)
-8. **Gate** → codeloop_gate_check (confidence >= 94%) — if "continue_fixing", LOOP to step 2 automatically
-9. **Report** → codeloop_generate_dev_report → write docs/DEVELOPMENT_LOG.md
-10. **Deliver** → present working project + development log to developer
-
-Steps 5-7 are MANDATORY for any project with a UI. Step 9 is MANDATORY for every project.
-The loop between steps 2-8 is AUTOMATIC. Do NOT ask the user between iterations.
+6. **Design compare** → codeloop_design_compare (mode "all") — MANDATORY when designs/ or .codeloop/figma.json exist
+7. **Video** → codeloop_start_recording → codeloop_interact with ALL elements → codeloop_stop_recording
+8. **Replay** → codeloop_interaction_replay (analyze frames + logs)
+9. **Gate** → codeloop_gate_check (confidence >= 94%) — if "continue_fixing", LOOP to step 2 automatically
+10. **Report** → codeloop_generate_dev_report → write docs/DEVELOPMENT_LOG.md
+11. **Deliver** → present working project + development log to developer
+
+Steps 5-8 are MANDATORY for any project with a UI. Step 6 is MANDATORY whenever
+references exist. Step 10 is MANDATORY for every project.
+The loop between steps 2-9 is AUTOMATIC. Do NOT ask the user between iterations.
 `;
 export const LOOP_MDC = `---
 description: CodeLoop multi-section development loop
@@ -299,8 +327,11 @@ When the developer or task involves choosing infrastructure, tools, or services:
 - Call codeloop_recommend_tool with the relevant category and detected stack
 - Present the results with reasoning, tradeoffs, and pricing — never just a name
 
-When a design reference image exists in artifacts/references/ but codeloop_design_compare has not been run:
-- Suggest running codeloop_design_compare to check visual fidelity
+When any design reference exists (designs/*.{png,jpg,jpeg,webp} or .codeloop/figma.json):
+- codeloop_design_compare is MANDATORY, not a suggestion. The design_compare_evidence
+  blocker gate fails until min_score >= design_match_threshold across all references.
+- After codeloop_verify, call codeloop_design_compare with mode="all" before gate_check.
+- Iterate fixes for any failing screens until every reference passes the threshold.
 
 When visual changes have been made but codeloop_visual_review has not been run:
 - Suggest running codeloop_visual_review to check for UI issues

package/dist/templates/cursor-rules.js.map

@@ -1 +1 @@
-{"version":3,"file":"cursor-rules.js","sourceRoot":"","sources":["../../src/templates/cursor-rules.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkPvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CvB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiGlC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC9B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC1B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0JtB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCzB,CAAC"}
+{"version":3,"file":"cursor-rules.js","sourceRoot":"","sources":["../../src/templates/cursor-rules.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CvB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoGlC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC9B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC1B,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0JtB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeloop",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "CLI tool for CodeLoop — automated verification for AI coding agents",
   "type": "module",
   "bin": {