fix: resolve 8 issues from code review

1. ci.ts: fix --pr arg parsing reading args[0] when flag absent
2. ci.ts: add isDirectRun guard so main() doesn't run on import
3. capture.ts: fix stories.json parsing — handle Storybook v7+ wrapper
4. supabase.ts: fix storage path mismatch in insertDiffs (include runId)
5. prefilter.ts: replace queue.shift() with index pointer (O(1) dequeue)
6. vr-init.md: remove nonexistent --config flag from capture command
7. vr-watch.md: replace nonexistent --routes flag with --scope=staged
8. comment.ts: escape pipe/newline in Gemini output for markdown tables

All 44 tests passing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: juancguerrerodev

commands/vr-init.md

@@ -38,7 +38,7 @@ Initialize DojoWatch in the current project. This sets up the configuration, dis
 
 7. **Initial capture.** If the user confirms, remind them to start their dev server, then run:
    ```bash
-   npx tsx ${CLAUDE_PLUGIN_ROOT}/scripts/capture.ts --config .dojowatch/config.json --scope all
+   npx tsx ${CLAUDE_PLUGIN_ROOT}/scripts/capture.ts --scope=all
    ```
 
 8. **Promote to baselines.** Run:

commands/vr-watch.md

@@ -18,7 +18,7 @@ Start a file watcher that re-captures affected routes when source files change,
    - Look up the saved file in `.dojowatch/routeMap.json` to find affected routes
    - If the file maps to routes, run a scoped capture:
      ```bash
-     npx tsx ${CLAUDE_PLUGIN_ROOT}/scripts/capture.ts --routes <affected-routes>
+     npx tsx ${CLAUDE_PLUGIN_ROOT}/scripts/capture.ts --scope=staged
      ```
    - Run quick prefilter comparison against baselines
    - Report any visual changes inline (pixel diff count, affected areas)

scripts/capture.ts

@@ -124,8 +124,15 @@ export async function captureStorybook(
     );
   }
 
-  const storiesData = (await response.json()) as Record<string, { id: string; title: string; name: string }>;
-  const storyIds = Object.keys(storiesData);
+  const rawData = (await response.json()) as
+    | { v: number; stories: Record<string, { id: string; title: string; name: string }> }
+    | Record<string, { id: string; title: string; name: string }>;
+
+  // Storybook v7+ wraps stories under a "stories" key
+  const storiesData = "stories" in rawData && typeof rawData.stories === "object"
+    ? rawData.stories
+    : rawData;
+  const storyIds = Object.keys(storiesData).filter((k) => k !== "v");
 
   console.log(pc.dim(`  Found ${storyIds.length} Storybook stories`));
 

scripts/ci.ts

@@ -21,8 +21,10 @@ import type { CheckRun } from "./types.js";
 
 async function main(): Promise<void> {
   const args = process.argv.slice(2);
-  const prArg = args.find((a) => a.startsWith("--pr="))?.split("=")[1]
-    ?? args[args.indexOf("--pr") + 1];
+  const prEqArg = args.find((a) => a.startsWith("--pr="))?.split("=")[1];
+  const prFlagIdx = args.indexOf("--pr");
+  const prSpaceArg = prFlagIdx !== -1 ? args[prFlagIdx + 1] : undefined;
+  const prArg = prEqArg ?? prSpaceArg;
   const prNumber = prArg ? parseInt(prArg, 10) : undefined;
   const uploadFlag = args.includes("--upload");
 
@@ -210,7 +212,12 @@ function getGitCommitSha(): string {
   }
 }
 
-main().catch((err) => {
-  console.error(pc.red(`CI failed: ${err}`));
-  process.exit(1);
-});
+const isDirectRun =
+  process.argv[1]?.endsWith("ci.ts") ||
+  process.argv[1]?.endsWith("ci.js");
+if (isDirectRun) {
+  main().catch((err) => {
+    console.error(pc.red(`CI failed: ${err}`));
+    process.exit(1);
+  });
+}

scripts/comment.ts

@@ -2,6 +2,11 @@ import { execFileSync } from "node:child_process";
 import pc from "picocolors";
 import type { AnalysisResult, CheckRun, DiffResult } from "./types.js";
 
+/** Escape pipe and newline characters for use inside markdown table cells. */
+function escMd(text: string): string {
+  return text.replace(/\|/g, "\\|").replace(/\n/g, " ");
+}
+
 /**
  * Generate a markdown comment body from analysis results.
  */
@@ -53,7 +58,7 @@ export function generateCommentMarkdown(
       const diffUrl = diffUrls?.get(name);
       const thumbnailCol = diffUrl ? ` [![diff](${diffUrl})](${diffUrl})` : "";
       lines.push(
-        `| ${sev} | ${screenshot}: ${diff.element}${thumbnailCol} | ${diff.description} | ${diff.suggested_fix ?? "—"} |`
+        `| ${sev} | ${escMd(screenshot)}: ${escMd(diff.element)}${thumbnailCol} | ${escMd(diff.description)} | ${escMd(diff.suggested_fix ?? "—")} |`
       );
     }
     lines.push("");

scripts/prefilter.ts

@@ -129,11 +129,12 @@ function floodFill(
 ): Array<[number, number]> {
   const pixels: Array<[number, number]> = [];
   const queue: Array<[number, number]> = [[startX, startY]];
+  let queueHead = 0;
 
   visited[startY * width + startX] = 1;
 
-  while (queue.length > 0) {
-    const [cx, cy] = queue.shift()!;
+  while (queueHead < queue.length) {
+    const [cx, cy] = queue[queueHead++];;
     pixels.push([cx, cy]);
 
     // Check 8 neighbors (including diagonals)

scripts/supabase.ts

@@ -186,10 +186,10 @@ export async function insertDiffs(
         run_id: runId,
         name: pf.name,
         viewport: pf.viewport,
-        baseline_storage_path: `${project}/${pf.name}.png`,
-        current_storage_path: `${project}/captures/${pf.name}.png`,
+        baseline_storage_path: `${project}/${pf.name}-${pf.viewport}.png`,
+        current_storage_path: `${project}/captures/${runId}/${pf.name}.png`,
         diff_storage_path: pf.diffImagePath
-          ? `${project}/diffs/${basename(pf.diffImagePath)}`
+          ? `${project}/diffs/${runId}/${basename(pf.diffImagePath)}`
           : null,
         pixel_diff_percent: pf.pixelDiffPercent,
         tier: pf.tier,