critique 0.1.41 → 0.1.42

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# 0.1.42
+
+- New `--image` flag for all diff commands:
+  - Generates WebP images of terminal output (saved to /tmp)
+  - Splits long diffs into multiple images (70 lines per image)
+  - Uses takumi for high-performance image rendering
+  - `@takumi-rs/core` and `@takumi-rs/helpers` added as optional dependencies
+  - Library export: `import { renderTerminalToImages } from "critique/src/image.ts"`
+- Web output: Use default theme to enable dark/light mode switching based on system preference
+- `review` command:
+  - Improved AI prompt: order hunks by code flow, think upfront before writing, split heavy logic across sections
+- Dependencies:
+  - Update opentui to `367a9408`
+
 # 0.1.41
 
 - `review` command:

package/bun.lock

@@ -7,8 +7,8 @@
       "dependencies": {
         "@agentclientprotocol/sdk": "^0.12.0",
         "@clack/prompts": "1.0.0-alpha.9",
-        "@opentui/core": "https://pkg.pr.new/anomalyco/opentui/@opentui/core@302acd5f2860aaeecf5a1a60325c195e3a0597e4",
-        "@opentui/react": "https://pkg.pr.new/anomalyco/opentui/@opentui/react@302acd5f2860aaeecf5a1a60325c195e3a0597e4",
+        "@opentui/core": "https://pkg.pr.new/anomalyco/opentui/@opentui/core@367a94087821b3b5feedd35bbb57df43b10a286e",
+        "@opentui/react": "https://pkg.pr.new/anomalyco/opentui/@opentui/react@367a94087821b3b5feedd35bbb57df43b10a286e",
         "@parcel/watcher": "^2.5.1",
         "bun-pty": "^0.4.7",
         "cac": "^6.7.14",
@@ -27,6 +27,10 @@
         "typescript": "^5.9.3",
         "wrangler": "^4.19.1",
       },
+      "optionalDependencies": {
+        "@takumi-rs/core": "^0.65.0",
+        "@takumi-rs/helpers": "^0.65.0",
+      },
     },
   },
   "packages": {
@@ -222,21 +226,21 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.9", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" } }, "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ=="],
 
-    "@opentui/core": ["@opentui/core@https://pkg.pr.new/anomalyco/opentui/@opentui/core@302acd5f2860aaeecf5a1a60325c195e3a0597e4", { "dependencies": { "bun-ffi-structs": "0.1.2", "diff": "8.0.2", "jimp": "1.6.0", "marked": "17.0.1", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-darwin-arm64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", "@opentui/core-darwin-x64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-darwin-x64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", "@opentui/core-linux-arm64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-linux-arm64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", "@opentui/core-linux-x64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-linux-x64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", "@opentui/core-win32-arm64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-win32-arm64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", "@opentui/core-win32-x64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-win32-x64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", "bun-webgpu": "0.1.4", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }],
+    "@opentui/core": ["@opentui/core@https://pkg.pr.new/anomalyco/opentui/@opentui/core@367a94087821b3b5feedd35bbb57df43b10a286e", { "dependencies": { "bun-ffi-structs": "0.1.2", "diff": "8.0.2", "jimp": "1.6.0", "marked": "17.0.1", "yoga-layout": "3.2.1" }, "optionalDependencies": { "@dimforge/rapier2d-simd-compat": "^0.17.3", "@opentui/core-darwin-arm64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-darwin-arm64@367a94087821b3b5feedd35bbb57df43b10a286e", "@opentui/core-darwin-x64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-darwin-x64@367a94087821b3b5feedd35bbb57df43b10a286e", "@opentui/core-linux-arm64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-linux-arm64@367a94087821b3b5feedd35bbb57df43b10a286e", "@opentui/core-linux-x64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-linux-x64@367a94087821b3b5feedd35bbb57df43b10a286e", "@opentui/core-win32-arm64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-win32-arm64@367a94087821b3b5feedd35bbb57df43b10a286e", "@opentui/core-win32-x64": "https://pkg.pr.new/anomalyco/opentui/@opentui/core-win32-x64@367a94087821b3b5feedd35bbb57df43b10a286e", "bun-webgpu": "0.1.4", "planck": "^1.4.2", "three": "0.177.0" }, "peerDependencies": { "web-tree-sitter": "0.25.10" } }],
 
-    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-darwin-arm64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", {}],
+    "@opentui/core-darwin-arm64": ["@opentui/core-darwin-arm64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-darwin-arm64@367a94087821b3b5feedd35bbb57df43b10a286e", {}],
 
-    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-darwin-x64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", {}],
+    "@opentui/core-darwin-x64": ["@opentui/core-darwin-x64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-darwin-x64@367a94087821b3b5feedd35bbb57df43b10a286e", {}],
 
-    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-linux-arm64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", {}],
+    "@opentui/core-linux-arm64": ["@opentui/core-linux-arm64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-linux-arm64@367a94087821b3b5feedd35bbb57df43b10a286e", {}],
 
-    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-linux-x64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", {}],
+    "@opentui/core-linux-x64": ["@opentui/core-linux-x64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-linux-x64@367a94087821b3b5feedd35bbb57df43b10a286e", {}],
 
-    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-win32-arm64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", {}],
+    "@opentui/core-win32-arm64": ["@opentui/core-win32-arm64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-win32-arm64@367a94087821b3b5feedd35bbb57df43b10a286e", {}],
 
-    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-win32-x64@302acd5f2860aaeecf5a1a60325c195e3a0597e4", {}],
+    "@opentui/core-win32-x64": ["@opentui/core-win32-x64@https://pkg.pr.new/anomalyco/opentui/@opentui/core-win32-x64@367a94087821b3b5feedd35bbb57df43b10a286e", {}],
 
-    "@opentui/react": ["@opentui/react@https://pkg.pr.new/anomalyco/opentui/@opentui/react@302acd5f2860aaeecf5a1a60325c195e3a0597e4", { "dependencies": { "@opentui/core": "https://pkg.pr.new/anomalyco/opentui/@opentui/core@302acd5f2860aaeecf5a1a60325c195e3a0597e4", "react-reconciler": "^0.32.0" }, "peerDependencies": { "react": ">=19.0.0", "react-devtools-core": "^7.0.1", "ws": "^8.18.0" } }],
+    "@opentui/react": ["@opentui/react@https://pkg.pr.new/anomalyco/opentui/@opentui/react@367a94087821b3b5feedd35bbb57df43b10a286e", { "dependencies": { "@opentui/core": "https://pkg.pr.new/anomalyco/opentui/@opentui/core@367a94087821b3b5feedd35bbb57df43b10a286e", "react-reconciler": "^0.32.0" }, "peerDependencies": { "react": ">=19.0.0", "react-devtools-core": "^7.0.1", "ws": "^8.18.0" } }],
 
     "@parcel/watcher": ["@parcel/watcher@2.5.4", "", { "dependencies": { "detect-libc": "^2.0.3", "is-glob": "^4.0.3", "node-addon-api": "^7.0.0", "picomatch": "^4.0.3" }, "optionalDependencies": { "@parcel/watcher-android-arm64": "2.5.4", "@parcel/watcher-darwin-arm64": "2.5.4", "@parcel/watcher-darwin-x64": "2.5.4", "@parcel/watcher-freebsd-x64": "2.5.4", "@parcel/watcher-linux-arm-glibc": "2.5.4", "@parcel/watcher-linux-arm-musl": "2.5.4", "@parcel/watcher-linux-arm64-glibc": "2.5.4", "@parcel/watcher-linux-arm64-musl": "2.5.4", "@parcel/watcher-linux-x64-glibc": "2.5.4", "@parcel/watcher-linux-x64-musl": "2.5.4", "@parcel/watcher-win32-arm64": "2.5.4", "@parcel/watcher-win32-ia32": "2.5.4", "@parcel/watcher-win32-x64": "2.5.4" } }, "sha512-WYa2tUVV5HiArWPB3ydlOc4R2ivq0IDrlqhMi3l7mVsFEXNcTfxYFPIHXHXIh/ca/y/V5N4E1zecyxdIBjYnkQ=="],
 
@@ -276,6 +280,26 @@
 
     "@speed-highlight/core": ["@speed-highlight/core@1.2.14", "", {}, "sha512-G4ewlBNhUtlLvrJTb88d2mdy2KRijzs4UhnlrOSRT4bmjh/IqNElZa3zkrZ+TC47TwtlDWzVLFADljF1Ijp5hA=="],
 
+    "@takumi-rs/core": ["@takumi-rs/core@0.65.0", "", { "optionalDependencies": { "@takumi-rs/core-darwin-arm64": "0.65.0", "@takumi-rs/core-darwin-x64": "0.65.0", "@takumi-rs/core-linux-arm64-gnu": "0.65.0", "@takumi-rs/core-linux-arm64-musl": "0.65.0", "@takumi-rs/core-linux-x64-gnu": "0.65.0", "@takumi-rs/core-linux-x64-musl": "0.65.0", "@takumi-rs/core-win32-arm64-msvc": "0.65.0", "@takumi-rs/core-win32-x64-msvc": "0.65.0" } }, "sha512-lBNG+NRc602ul7Kxy9UohlbnFLVyloQP/DTxQzyNH+8khpdaIQTxpdHouzRzxf6upRDVDIVX5TG8oT16jKUAvQ=="],
+
+    "@takumi-rs/core-darwin-arm64": ["@takumi-rs/core-darwin-arm64@0.65.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Ii6ILOANG6IeGThsuYjG5azlHXyHWWdVbM1ps3+SJyUg2g4Qn+nTruKGqHQOLNdZ5+37vpTg4PWh79XrUvjXpw=="],
+
+    "@takumi-rs/core-darwin-x64": ["@takumi-rs/core-darwin-x64@0.65.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-SJGeFVQ2foVHpYL6EiD+jNJnvQmegDLbbJ/SzbaYemJ/kjza2vNDg251urXne6daQ+HoGXLjhQtzW1C5Nyyf5g=="],
+
+    "@takumi-rs/core-linux-arm64-gnu": ["@takumi-rs/core-linux-arm64-gnu@0.65.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-YbwZzQTugFwvYErXs2W/QsngPSU5H6ZtYJNdbz9/qk8EEU6eB593XiBxE9/1vbq6Sb3mH84mPXElf1BmWJlvzw=="],
+
+    "@takumi-rs/core-linux-arm64-musl": ["@takumi-rs/core-linux-arm64-musl@0.65.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-iZpzfnD1/Gyof3p+fYUIBxNkDH9vQviOeihZ7yAtPbGmY4AbnOjoUBHDyJoKWE0el/x1W17efvNE7FuvzP0O5Q=="],
+
+    "@takumi-rs/core-linux-x64-gnu": ["@takumi-rs/core-linux-x64-gnu@0.65.0", "", { "os": "linux", "cpu": "x64" }, "sha512-kL4VclPYz7nmQuadCVSrAFvdy8LaJX5RPymG3upaHPcz0i7A8KmWY8jnQcDDkGQfPIi2lFncnt/sknCiaJ1t4Q=="],
+
+    "@takumi-rs/core-linux-x64-musl": ["@takumi-rs/core-linux-x64-musl@0.65.0", "", { "os": "linux", "cpu": "x64" }, "sha512-2way2sF3p5bMlhGsDMmQGTPxtc37241POzAJ0bPRKR1fumylEAaADuXvN95qM4x9751iTke/wVhJOL28nV7asw=="],
+
+    "@takumi-rs/core-win32-arm64-msvc": ["@takumi-rs/core-win32-arm64-msvc@0.65.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-yCZqiu1b3XXhDUE7OaA5RdVg/nYcZU1nzToY7ViE4fR8PqOK54Ad8qOAKYZCTr4FwCB4sWo88/R7K1n0nPFpfA=="],
+
+    "@takumi-rs/core-win32-x64-msvc": ["@takumi-rs/core-win32-x64-msvc@0.65.0", "", { "os": "win32", "cpu": "x64" }, "sha512-SAw224AhLcKa9+ttO4IxeTquOvyz8pnDeGugzmQZerYO18kOuOCiP1g4VRhM1drpEFN7bbnhSnIvrewg5m4akw=="],
+
+    "@takumi-rs/helpers": ["@takumi-rs/helpers@0.65.0", "", {}, "sha512-3BsiW0iP3Y7xUPmT/tJBClb59qTxtHEYHQUznXdtDA0qyN6YAWABA6U0DTd3la6XHMEDyKaHV263OL679FyPaA=="],
+
     "@tokenizer/token": ["@tokenizer/token@0.3.0", "", {}, "sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A=="],
 
     "@types/bun": ["@types/bun@1.3.5", "", { "dependencies": { "bun-types": "1.3.5" } }, "sha512-RnygCqNrd3srIPEWBd5LFeUYG7plCoH2Yw9WaZGyNmdTEei+gWaHqydbaIRkIkcbXwhBT94q78QljxN0Sk838w=="],

package/package.json

@@ -2,7 +2,7 @@
   "name": "critique",
   "module": "src/diff.tsx",
   "type": "module",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "private": false,
   "bin": "./src/cli.tsx",
   "scripts": {
@@ -24,8 +24,8 @@
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.12.0",
     "@clack/prompts": "1.0.0-alpha.9",
-    "@opentui/core": "https://pkg.pr.new/anomalyco/opentui/@opentui/core@302acd5f2860aaeecf5a1a60325c195e3a0597e4",
-    "@opentui/react": "https://pkg.pr.new/anomalyco/opentui/@opentui/react@302acd5f2860aaeecf5a1a60325c195e3a0597e4",
+    "@opentui/core": "https://pkg.pr.new/anomalyco/opentui/@opentui/core@367a94087821b3b5feedd35bbb57df43b10a286e",
+    "@opentui/react": "https://pkg.pr.new/anomalyco/opentui/@opentui/react@367a94087821b3b5feedd35bbb57df43b10a286e",
     "@parcel/watcher": "^2.5.1",
     "bun-pty": "^0.4.7",
     "cac": "^6.7.14",
@@ -35,5 +35,9 @@
     "picocolors": "^1.1.1",
     "react": "^19.2.0",
     "zustand": "^5.0.8"
+  },
+  "optionalDependencies": {
+    "@takumi-rs/core": "^0.65.0",
+    "@takumi-rs/helpers": "^0.65.0"
   }
 }

package/src/cli.tsx

@@ -504,7 +504,8 @@ async function runReviewMode(
 
       // Write hunks to temp file for the render command
       const hunksFile = writeTempFile(JSON.stringify(hunks), "critique-hunks", ".json");
-      const themeName = persistedState.themeName ?? defaultThemeName;
+      // For web, always use default theme (with auto dark/light inversion) unless explicitly overridden
+      const themeName = defaultThemeName;
 
       // Calculate rows needed based on hunks
       const totalLines = hunks.reduce((sum, h) => sum + h.lines.length, 0);
@@ -834,7 +835,8 @@ async function runResumeMode(options: ResumeModeOptions) {
       }).join("\n");
     const yamlFile = writeTempFile(yamlContent, "critique-review", ".yaml");
 
-    const themeName = persistedState.themeName ?? defaultThemeName;
+    // For web, always use default theme (with auto dark/light inversion) unless explicitly overridden
+    const themeName = defaultThemeName;
     const totalLines = review.hunks.reduce((sum, h) => sum + h.lines.length, 0);
     const baseRows = Math.max(200, totalLines * 2 + 100);
 
@@ -918,6 +920,16 @@ interface WebModeOptions {
   '--'?: string[];
 }
 
+// Image mode handler
+interface ImageModeOptions {
+  staged?: boolean;
+  commit?: string;
+  context?: string;
+  filter?: string;
+  theme?: string;
+  '--'?: string[];
+}
+
 async function runWebMode(
   base: string | undefined,
   head: string | undefined,
@@ -943,9 +955,10 @@ async function runWebMode(
 
   const desktopCols = options.cols || 230;
   const mobileCols = options.mobileCols || 100;
+  // For web, always use default theme (with auto dark/light inversion) unless explicitly overridden via --theme
   const themeName = options.theme && themeNames.includes(options.theme)
     ? options.theme
-    : persistedState.themeName ?? defaultThemeName;
+    : defaultThemeName;
 
   console.log("Capturing diff output...");
 
@@ -1009,6 +1022,118 @@ async function runWebMode(
   }
 }
 
+async function runImageMode(
+  base: string | undefined,
+  head: string | undefined,
+  options: ImageModeOptions
+) {
+  const { renderTerminalToImages } = await import("./image.ts");
+  const { writeTempFile, cleanupTempFile } = await import("./web-utils.ts");
+
+  const gitCommand = buildGitCommand({
+    staged: options.staged,
+    commit: options.commit,
+    base,
+    head,
+    context: options.context,
+    filter: options.filter,
+    positionalFilters: options['--'],
+  });
+
+  const themeName = options.theme && themeNames.includes(options.theme)
+    ? options.theme
+    : persistedState.themeName ?? defaultThemeName;
+
+  console.log("Capturing diff output...");
+
+  // Get the git diff
+  const { stdout: gitDiff } = await execAsync(gitCommand, {
+    encoding: "utf-8",
+  });
+
+  if (!gitDiff.trim()) {
+    console.log("No changes to display");
+    process.exit(0);
+  }
+
+  // Write diff to temp file
+  const diffFile = writeTempFile(gitDiff, "critique-image-diff", ".patch");
+
+  // Build render command for image capture
+  const renderCommand = [
+    process.argv[1]!, // path to cli.tsx
+    "web-render",
+    diffFile,
+    "--theme",
+    themeName,
+    "--cols",
+    "120",
+    "--rows",
+    "10000",
+  ];
+
+  console.log("Rendering to images...");
+
+  try {
+    // Capture PTY output
+    const decoder = new TextDecoder();
+    let ansiOutput = "";
+    const cols = 120;
+    const rows = 10000;
+
+    const proc = Bun.spawn(["bun", ...renderCommand], {
+      cwd: process.cwd(),
+      env: {
+        ...process.env,
+        TERM: "xterm-256color",
+      },
+      terminal: {
+        cols,
+        rows,
+        data(terminal, data) {
+          ansiOutput += decoder.decode(data, { stream: true });
+        },
+      },
+    });
+
+    await proc.exited;
+    proc.terminal?.close();
+    ansiOutput += decoder.decode();
+
+    // Clean up diff temp file
+    cleanupTempFile(diffFile);
+
+    if (!ansiOutput.trim()) {
+      console.error("No output captured");
+      process.exit(1);
+    }
+
+    // Strip terminal cleanup sequences
+    const clearIdx = ansiOutput.lastIndexOf("\x1b[H\x1b[J");
+    if (clearIdx > 0) {
+      ansiOutput = ansiOutput.slice(0, clearIdx);
+    }
+
+    // Render to images
+    const result = await renderTerminalToImages(ansiOutput, {
+      cols,
+      themeName,
+    });
+
+    console.log(`\nGenerated ${result.imageCount} image${result.imageCount === 1 ? "" : "s"}:`);
+    for (const path of result.paths) {
+      console.log(`  ${path}`);
+    }
+
+    process.exit(0);
+  } catch (error: unknown) {
+    cleanupTempFile(diffFile);
+    const message = error instanceof Error ? error.message : String(error);
+    console.error("Failed to generate images:", message);
+    process.exit(1);
+  }
+}
+
 // Error boundary component
 interface ErrorBoundaryProps {
   children: React.ReactNode;
@@ -1354,6 +1479,7 @@ cli
   .option("--filter <pattern>", "Filter files by glob pattern (can be used multiple times)")
   .option("--theme <name>", "Theme to use for rendering")
   .option("--web [title]", "Generate web preview instead of TUI")
+  .option("--image", "Generate images instead of TUI (saved to /tmp)")
   .option("--open", "Open in browser (with --web)")
   .option("--cols <cols>", "Desktop columns for web render", { default: 240 })
   .option("--mobile-cols <cols>", "Mobile columns for web render", { default: 100 })
@@ -1411,6 +1537,19 @@ cli
       return;
     }
 
+    // If --image flag, delegate to image generation logic
+    if (options.image) {
+      await runImageMode(base, head, {
+        staged: options.staged,
+        commit: options.commit,
+        context: options.context,
+        filter: options.filter,
+        theme: options.theme,
+        '--': options['--'],
+      });
+      return;
+    }
+
     try {
       const gitCommand = buildGitCommand({
         staged: options.staged,

package/src/image.ts

@@ -0,0 +1,304 @@
+// Terminal output to image conversion using takumi.
+// Converts ANSI terminal output to images, splitting into multiple pages if needed.
+// Exports renderTerminalToImages() for library and CLI use.
+
+import { tmpdir } from "os"
+import { join } from "path"
+import fs from "fs"
+import { ptyToJson, StyleFlags, type TerminalLine, type TerminalSpan } from "ghostty-opentui"
+import { getResolvedTheme, rgbaToHex } from "./themes.ts"
+
+export interface RenderToImagesOptions {
+  /** Terminal columns for parsing (default: 120) */
+  cols?: number
+  /** Terminal rows for parsing (default: 10000, effectively unlimited) */
+  rows?: number
+  /** Theme name for colors */
+  themeName?: string
+  /** Image width in pixels (default: 1200) */
+  imageWidth?: number
+  /** Font size in pixels (default: 14) */
+  fontSize?: number
+  /** Line height multiplier (default: 1.7) */
+  lineHeight?: number
+  /** Maximum lines per image before splitting (default: 70) */
+  maxLinesPerImage?: number
+  /** Output format: webp, png, or jpeg (default: webp) */
+  format?: "webp" | "png" | "jpeg"
+  /** Quality for lossy formats 0-100 (default: 85) */
+  quality?: number
+}
+
+export interface RenderResult {
+  /** Array of image buffers */
+  images: Buffer[]
+  /** Paths where images were saved */
+  paths: string[]
+  /** Total number of lines in the output */
+  totalLines: number
+  /** Number of images generated */
+  imageCount: number
+}
+
+/**
+ * Convert terminal spans to takumi text nodes.
+ * Following shiki-image pattern: only display: inline and color styles.
+ */
+function spanToNode(
+  span: TerminalSpan,
+  text: typeof import("@takumi-rs/helpers").text
+) {
+  const style: Record<string, string | number> = {
+    display: "inline",
+  }
+
+  if (span.fg) {
+    style.color = span.fg
+  }
+  if (span.bg) {
+    style.backgroundColor = span.bg
+  }
+  if (span.flags & StyleFlags.BOLD) {
+    style.fontWeight = "bold"
+  }
+  if (span.flags & StyleFlags.ITALIC) {
+    style.fontStyle = "italic"
+  }
+  if (span.flags & StyleFlags.FAINT) {
+    style.opacity = 0.5
+  }
+
+  return text(span.text, style as any)
+}
+
+/**
+ * Convert a terminal line to a takumi container node.
+ * All lines treated the same - render spans with background.
+ * Uses negative margin to eliminate gaps (takumi doesn't respect container height for backgrounds).
+ */
+function lineToNode(
+  line: TerminalLine,
+  container: typeof import("@takumi-rs/helpers").container,
+  text: typeof import("@takumi-rs/helpers").text,
+  backgroundColor: string,
+  lineHeight: number,
+  fontSize: number
+) {
+  const lineHeightPx = Math.round(fontSize * lineHeight)
+  
+  // Calculate negative margin to eliminate gaps between lines
+  // The gap is proportional to the extra space from line-height (lineHeight - 1) * fontSize
+  // We use ~50% of that as overlap to close the gaps
+  const gapOverlap = Math.round((lineHeight - 1) * fontSize * 0.5)
+
+  // Get text children from spans, or use a visible character if empty
+  let textChildren = line.spans.map((span) => spanToNode(span, text))
+  if (textChildren.length === 0) {
+    textChildren = [text("X", { color: backgroundColor })]
+  }
+
+  return container({
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      width: "100%",
+      height: lineHeightPx,
+      marginBottom: -gapOverlap,
+      backgroundColor,
+    },
+    children: textChildren,
+  })
+}
+
+/**
+ * Check if a line is empty (no spans or only whitespace)
+ */
+function isLineEmpty(line: TerminalLine): boolean {
+  if (line.spans.length === 0) return true
+  return line.spans.every((span) => span.text.trim() === "")
+}
+
+/**
+ * Trim empty lines from the end of the lines array
+ */
+function trimEmptyLines(lines: TerminalLine[]): TerminalLine[] {
+  let result = [...lines]
+  while (result.length > 0 && isLineEmpty(result[result.length - 1]!)) {
+    result = result.slice(0, -1)
+  }
+  return result
+}
+
+/**
+ * Render terminal output to images.
+ * This is the main export for library use.
+ *
+ * @param ansiOutput - Raw ANSI terminal output string or Buffer
+ * @param options - Rendering options
+ * @returns Promise with image buffers and saved file paths
+ */
+export async function renderTerminalToImages(
+  ansiOutput: string | Buffer,
+  options: RenderToImagesOptions = {}
+): Promise<RenderResult> {
+  // Try to import takumi - it's an optional dependency
+  let takumiCore: typeof import("@takumi-rs/core")
+  let takumiHelpers: typeof import("@takumi-rs/helpers")
+
+  try {
+    takumiCore = await import("@takumi-rs/core")
+    takumiHelpers = await import("@takumi-rs/helpers")
+  } catch {
+    throw new Error(
+      "takumi is not installed. Install it with: bun add @takumi-rs/core @takumi-rs/helpers"
+    )
+  }
+
+  const { Renderer } = takumiCore
+  const { container, text } = takumiHelpers
+
+  const {
+    cols = 120,
+    rows = 10000,
+    themeName = "tokyonight",
+    imageWidth = 1200,
+    fontSize = 14,
+    lineHeight = 1.9,
+    maxLinesPerImage = 70,
+    format = "webp",
+    quality = 85,
+  } = options
+
+  // Parse ANSI to terminal data
+  const data = ptyToJson(ansiOutput, { cols, rows })
+  let lines = trimEmptyLines(data.lines)
+
+  if (lines.length === 0) {
+    throw new Error("No content to render")
+  }
+
+  // Get theme colors
+  const theme = getResolvedTheme(themeName)
+  const backgroundColor = rgbaToHex(theme.background)
+  const textColor = rgbaToHex(theme.text)
+
+  // Calculate dimensions
+  const lineHeightPx = Math.round(fontSize * lineHeight)
+  const paddingY = 24
+  const paddingX = 32
+
+  // Split lines into chunks
+  const chunks: TerminalLine[][] = []
+  for (let i = 0; i < lines.length; i += maxLinesPerImage) {
+    chunks.push(lines.slice(i, i + maxLinesPerImage))
+  }
+
+  // Create renderer with bundled Geist font (included in takumi)
+  const renderer = new Renderer()
+
+  const images: Buffer[] = []
+  const paths: string[] = []
+  const timestamp = Date.now()
+
+  for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
+    const chunk = chunks[chunkIndex]!
+    const imageHeight = chunk.length * lineHeightPx + paddingY * 2
+
+    // Build the root container for this chunk
+    // Explicit dimensions, lines stack with explicit heights
+    const contentHeight = chunk.length * lineHeightPx
+    
+    const rootNode = container({
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 0,
+        width: "100%",
+        height: "100%",
+        backgroundColor,
+        color: textColor,
+        fontFamily: "monospace",
+        fontSize,
+        whiteSpace: "pre",
+        paddingTop: paddingY,
+        paddingBottom: paddingY,
+        paddingLeft: paddingX,
+        paddingRight: paddingX,
+      },
+      children: chunk.map((line) => lineToNode(line, container, text, backgroundColor, lineHeight, fontSize)),
+    })
+
+    // Render to image
+    const imageBuffer = await renderer.render(rootNode, {
+      width: imageWidth,
+      height: imageHeight,
+      format,
+      quality,
+    })
+
+    images.push(Buffer.from(imageBuffer))
+
+    // Save to /tmp
+    const filename = `critique-${timestamp}-${chunkIndex + 1}.${format}`
+    const filepath = join(tmpdir(), filename)
+    fs.writeFileSync(filepath, imageBuffer)
+    paths.push(filepath)
+  }
+
+  return {
+    images,
+    paths,
+    totalLines: lines.length,
+    imageCount: chunks.length,
+  }
+}
+
+/**
+ * Capture PTY output and render to images.
+ * Similar to captureToHtml but outputs images instead.
+ */
+export async function captureToImages(
+  renderCommand: string[],
+  options: RenderToImagesOptions & { themeName: string }
+): Promise<RenderResult> {
+  const decoder = new TextDecoder()
+  let ansiOutput = ""
+
+  const cols = options.cols ?? 120
+  const rows = options.rows ?? 10000
+
+  // Use Bun.Terminal for real PTY support
+  const proc = Bun.spawn(["bun", ...renderCommand], {
+    cwd: process.cwd(),
+    env: {
+      ...process.env,
+      TERM: "xterm-256color",
+    },
+    terminal: {
+      cols,
+      rows,
+      data(terminal, data) {
+        ansiOutput += decoder.decode(data, { stream: true })
+      },
+    },
+  })
+
+  await proc.exited
+
+  // Close terminal and flush decoder
+  proc.terminal?.close()
+  ansiOutput += decoder.decode()
+
+  if (!ansiOutput.trim()) {
+    throw new Error("No output captured")
+  }
+
+  // Strip terminal cleanup sequences
+  const clearIdx = ansiOutput.lastIndexOf("\x1b[H\x1b[J")
+  if (clearIdx > 0) {
+    ansiOutput = ansiOutput.slice(0, clearIdx)
+  }
+
+  return renderTerminalToImages(ansiOutput, options)
+}

package/src/review/acp-client.ts

@@ -462,16 +462,30 @@ IMPORTANT: Never use emojis or non-ASCII characters except for box-drawing chara
 READING ORDER - The Guiding Principle
 ═══════════════════════════════════════════════════════════════════════════════
 
-The reader reads top to bottom. You control their mental model. Order groups so each builds on the previous:
+THINK HARD BEFORE WRITING. Before you start editing the YAML file, carefully plan the full order of all hunks. Consider:
+- What is the main story of this change?
+- What should the reader understand first to make everything else click?
+- Which hunks are essential vs supporting details?
 
-1. Config/infrastructure (sets the stage)
-2. Types and interfaces (vocabulary)
-3. Core utilities (foundational pieces)
-4. Main implementation (reader now has context)
-5. Integration and usage (how it connects)
-6. Tests and docs (validation)
+The reader reads top to bottom. You control their mental model. 
 
-Show "what" before "how". Show data structures before code that uses them.
+ORDER BY CODE FLOW - Follow how the code actually executes in the app:
+- Start with entry points (what gets called first)
+- Then show what those call (the next layer down)
+- Continue down to the dependencies
+
+This creates an intuitive progression: dependants before dependencies. The reader follows the same path the code takes at runtime.
+
+Practical ordering:
+1. Entry points and main implementation (routes, handlers, commands - where execution starts)
+2. Business logic (what the entry points call)
+3. Types and interfaces (if needed to understand the above)
+4. Integration points (how it connects to external systems)
+5. Tests and docs (validation)
+6. Utilities and helpers (supporting functions - reader already saw them being used)
+7. Config/infrastructure (setup, boilerplate - least essential)
+
+Utils, infra, and config are supporting cast - put them last. The reader already saw them referenced above and can now understand their implementation.
 
 ═══════════════════════════════════════════════════════════════════════════════
 WHAT TO EXPLAIN - Why Over What
@@ -568,6 +582,12 @@ SPLITTING RULES - NEVER SHOW MORE THAN 10 LINES AT ONCE
 CRITICAL: Never show hunks larger than 10 lines. This is the most important rule.
 Split aggressively to reduce cognitive load. Readers absorb small chunks better.
 
+For HEAVY LOGIC - split even one or two lines at a time:
+- When code is dense or complex, show exactly what happens step by step
+- Follow the same order the code executes - reader builds the mental model progressively
+- You can interleave hunks from different files to follow the execution flow
+- Example: show a function call, then the function it calls, then back to the caller
+
 For ADDED FILES (new files):
 - Split into logical parts: imports, types, then each function/method separately
 - Each function/class method gets its own chunk with a brief description
@@ -578,6 +598,8 @@ For MODIFIED FILES:
 - Split by logical boundaries (functions, concerns, before/after)
 - Use numbered headers for sequential parts: ## 1. Parse input  ## 2. Validate  ## 3. Execute
 
+You control the order. Reorder and interleave hunks freely to tell the clearest story.
+
 Every chunk MUST have a description explaining its purpose, even just one line.
 
 Lines use cat -n format (1-based). Use lineRange to reference specific portions of large hunks.