critique 0.1.121 → 0.1.122

package/dist/cli.js

@@ -937,7 +937,7 @@ async function runWebMode(diffContent, options) {
                 const { renderDiffToOgImage } = await import("./image.js");
                 const ogImg = await renderDiffToOgImage(diffContent, {
                     themeName: "github-light",
-                    stabilizeMs: 100,
+                    stabilizeMs: 2000,
                 });
                 if (ogImg) {
                     await uploadOgImage(result.id, ogImg);

package/dist/review/review-app.test.js

@@ -791,11 +791,11 @@ The diagram above should not wrap.`,
          Architecture                                                       
                                                                             
          ┌─────────────┐     ┌─────────────┐     ┌─────────────┐            
-           ┌─────────────┐                                                  
+         ┌─────────────┐                                                    
          │   Client    │────▶│   Router    │────▶│  Handler    │────▶│      
-           Database   │                                                     
+         Database   │                                                       
          └─────────────┘     └─────────────┘     └─────────────┘            
-           └─────────────┘                                                  
+         └─────────────┘                                                    
                                                                             
                                                                             
        src/config.ts +1-0                                                   

package/dist/web-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"web-utils.d.ts","sourceRoot":"","sources":["../src/web-utils.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAiB,aAAa,EAAE,YAAY,EAA+B,MAAM,gBAAgB,CAAA;AAC7G,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAMhE,eAAO,MAAM,UAAU,QAA6D,CAAA;AAEpF,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;IACnC,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;4EACwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AAqTD,wBAAsB,iBAAiB,CACrC,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,cAAc,GACtB,OAAO,CAAC,aAAa,CAAC,CAGxB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAMpD;AAYD;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,YAAY,GAAG,MAAM,GAAG,IAAI,CAwBnE;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,KAAK,CAAC;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAAC,GACvD,GAAG,CAAC,MAAM,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAgB5C;AA+BD;;GAEG;AACH,wBAAsB,aAAa,CACjC,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE,cAAc,GACtB,OAAO,CAAC,MAAM,CAAC,CAyFjB;AAED;;GAEG;AACH,wBAAsB,qBAAqB,CACzC,WAAW,EAAE,MAAM,EACnB,OAAO,EAAE;IACP,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,GACA,OAAO,CAAC;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC,CA0C9E;AAED,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,UAAU,EAAE,UAAU,GAAG,IAAI,CAAA;CAC9B;AAED;;;;GAIG;AACH,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,mBAAmB,GAC3B,OAAO,CAAC,aAAa,CAAC,CAwGxB;AAED;;GAEG;AACH,wBAAsB,mBAAmB,CACvC,OAAO,EAAE,mBAAmB,GAC3B,OAAO,CAAC,MAAM,CAAC,CAqBjB;AAED;;GAEG;AACH,wBAAsB,2BAA2B,CAC/C,OAAO,EAAE;IACP,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,UAAU,EAAE,UAAU,GAAG,IAAI,CAAA;IAC7B,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kFAAkF;IAClF,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,GACA,OAAO,CAAC;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAAC,CAkD9E;AAED;;GAEG;AACH,wBAAsB,UAAU,CAC9B,WAAW,EAAE,MAAM,EACnB,UAAU,EAAE,MAAM,EAClB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GACtB,OAAO,CAAC,YAAY,CAAC,CAuCvB;AAED;;;;GAIG;AACH,wBAAsB,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAqB9E;AAED;;GAEG;AACH,wBAAsB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAa9D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAIlF;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAMtD;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAe5D;AAED;;;GAGG;AACH,wBAAsB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,CA8BzE"}
+{"version":3,"file":"web-utils.d.ts","sourceRoot":"","sources":["../src/web-utils.tsx"],"names":[],"mappings":"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"}

package/dist/web-utils.js

@@ -8,6 +8,7 @@ import fs from "fs";
 import { tmpdir } from "os";
 import { join } from "path";
 import { getResolvedTheme, rgbaToHex } from "./themes.js";
+import { DiffRenderable } from "@opentuah/core";
 import { loadStoredLicenseKey, loadOrCreateOwnerSecret } from "./license.js";
 const execAsync = promisify(exec);
 // Worker URL for uploading HTML previews
@@ -41,39 +42,70 @@ function getContentHeight(root) {
     return Math.ceil(maxBottom);
 }
 /**
- * Wait for async rendering (tree-sitter highlighting etc.) to stabilize.
+ * Find all DiffRenderable instances in the renderer tree.
+ * Walks the tree recursively checking instanceof DiffRenderable.
+ */
+function findDiffRenderables(root) {
+    const results = [];
+    function walk(node) {
+        if (!node.getChildren)
+            return;
+        for (const child of node.getChildren()) {
+            if (child instanceof DiffRenderable) {
+                results.push(child);
+            }
+            walk(child);
+        }
+    }
+    walk(root);
+    return results;
+}
+/**
+ * Wait for tree-sitter syntax highlighting to complete on all diff elements,
+ * then wait for rendering to stabilize (no more requestRender calls).
  *
- * Uses an idle+max model:
- * - Exits when no render requests for `idleMs` (tree-sitter is done)
- * - Hard cap at `maxMs` to prevent unbounded waits on huge diffs
- * - Polls at `pollMs` granularity (finer than the idle threshold)
+ * Two-phase approach:
+ * 1. Wait for DiffRenderable.isHighlighting to become false on all diffs
+ *    (deterministic, exits as soon as tree-sitter is done)
+ * 2. Wait for render idle — no new requestRender calls for idleMs
+ *    (catches deferred rebuilds like DiffRenderable.requestRebuild which
+ *    uses queueMicrotask to schedule buildView + requestRender after
+ *    highlighting completes)
  *
- * The old approach used a single `stabilizeMs` with 100ms polling, which
- * meant stabilizeMs=100 gave only one polling window and could miss late
- * highlights, while stabilizeMs=500 was wastefully slow for small diffs.
+ * Phase 2 is critical because DiffRenderable's split view rebuild happens
+ * asynchronously via microtask AFTER isHighlighting goes false. Without it,
+ * the captured frame may have concealed (unhighlighted) content on one side.
  */
-async function waitForRenderStabilization(renderer, renderOnce, stabilizeMs = 500) {
-    // Derive idle/max from the legacy parameter:
-    // - Interactive TUI (500ms): idleMs=200, maxMs=800
-    // - Web/batch (100ms):       idleMs=80,  maxMs=400
-    const idleMs = Math.max(Math.round(stabilizeMs * 0.4), 60);
-    const maxMs = Math.max(stabilizeMs, Math.round(stabilizeMs * 4));
+async function waitForHighlightAndRenderStabilization(renderer, renderOnce, maxMs = 2000) {
+    const startTime = Date.now();
     const pollMs = 20;
+    const idleMs = 80;
+    // Track render requests to detect when rendering has quiesced
     let lastRenderTime = Date.now();
-    const startTime = lastRenderTime;
     const originalRequestRender = renderer.root.requestRender.bind(renderer.root);
     renderer.root.requestRender = function () {
         lastRenderTime = Date.now();
         originalRequestRender();
     };
-    while (true) {
+    // Do one render cycle to kick off highlighting
+    await renderOnce();
+    // Phase 1: wait for isHighlighting to become false on all diffs
+    while (Date.now() - startTime < maxMs) {
+        const diffs = findDiffRenderables(renderer.root);
+        if (diffs.length === 0 || diffs.every(d => !d.isHighlighting)) {
+            break;
+        }
+        await new Promise(resolve => setTimeout(resolve, pollMs));
+        await renderOnce();
+    }
+    // Phase 2: wait for render to stabilize (catches deferred rebuilds)
+    // Reset the render timestamp so we wait for any post-highlight renders
+    lastRenderTime = Date.now();
+    await renderOnce();
+    while (Date.now() - startTime < maxMs) {
         const now = Date.now();
-        // Exit if idle long enough (no render requests for idleMs)
         if (now - lastRenderTime >= idleMs)
             break;
-        // Exit if hard cap reached
-        if (now - startTime >= maxMs)
-            break;
         await new Promise(resolve => setTimeout(resolve, pollMs));
         await renderOnce();
     }
@@ -203,8 +235,8 @@ async function renderDiffToFrameWithSectionPositions(diffContent, options) {
         resize(options.cols, finalHeight);
         await renderOnce();
     }
-    // Wait for async highlighting to complete (only once at the end)
-    await waitForRenderStabilization(renderer, renderOnce, options.stabilizeMs ?? 500);
+    // Wait for tree-sitter highlighting + render stabilization
+    await waitForHighlightAndRenderStabilization(renderer, renderOnce, options.stabilizeMs ?? 2000);
     const sectionPositions = [];
     for (let idx = 0; idx < fileNames.length; idx++) {
         const section = fileSectionRefs.get(idx);
@@ -419,7 +451,9 @@ export async function captureResponsiveHtml(diffContent, options) {
     // These act as upper bounds to prevent runaway memory usage
     const desktopRows = Math.max(options.baseRows * 3, 5000);
     const mobileRows = Math.max(Math.ceil(desktopRows * (options.desktopCols / options.mobileCols)), 10000);
-    const stabilizeMs = options.stabilizeMs ?? 100;
+    // With deterministic isHighlighting detection, stabilizeMs is just a safety cap.
+    // The function exits instantly when highlighting completes, so 2000ms is fine.
+    const stabilizeMs = options.stabilizeMs ?? 2000;
     // Run all renders in parallel: desktop HTML, mobile HTML, and OG image
     const ogImagePromise = options.skipOgImage
         ? Promise.resolve(null)
@@ -532,8 +566,8 @@ export async function renderReviewToFrame(options) {
         resize(options.cols, finalHeight);
         await renderOnce();
     }
-    // Wait for async highlighting to complete (only once at the end)
-    await waitForRenderStabilization(renderer, renderOnce, options.stabilizeMs ?? 500);
+    // Wait for tree-sitter highlighting + render stabilization
+    await waitForHighlightAndRenderStabilization(renderer, renderOnce, options.stabilizeMs ?? 2000);
     // Capture the final frame
     const buffer = renderer.currentRenderBuffer;
     const cursorState = renderer.getCursorState();
@@ -575,7 +609,7 @@ export async function captureReviewResponsiveHtml(options) {
     // These act as upper bounds to prevent runaway memory usage
     const desktopRows = Math.max(options.baseRows * 3, 5000);
     const mobileRows = Math.max(Math.ceil(desktopRows * (options.desktopCols / options.mobileCols)), 10000);
-    const stabilizeMs = options.stabilizeMs ?? 100;
+    const stabilizeMs = options.stabilizeMs ?? 2000;
     // Generate OG image from first few hunks' raw diff (in parallel with HTML renders)
     const ogImagePromise = options.skipOgImage
         ? Promise.resolve(null)

package/package.json

@@ -2,7 +2,7 @@
   "name": "critique",
   "module": "src/diff.tsx",
   "type": "module",
-  "version": "0.1.121",
+  "version": "0.1.122",
   "license": "MIT",
   "private": false,
   "bin": "./dist/cli.js",
@@ -44,8 +44,8 @@
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.13.1",
     "@clack/prompts": "1.0.0-alpha.9",
-    "@opentuah/core": "0.1.96",
-    "@opentuah/react": "0.1.96",
+    "@opentuah/core": "0.1.97",
+    "@opentuah/react": "0.1.97",
     "@parcel/watcher": "^2.5.6",
     "diff": "^8.0.2",
     "goke": "^6.1.3",

package/src/cli.tsx

@@ -1187,7 +1187,7 @@ async function runWebMode(
         const { renderDiffToOgImage } = await import("./image.js");
         const ogImg = await renderDiffToOgImage(diffContent, {
           themeName: "github-light",
-          stabilizeMs: 100,
+          stabilizeMs: 2000,
         });
         if (ogImg) {
           await uploadOgImage(result.id, ogImg);

package/src/review/review-app.test.tsx

@@ -928,11 +928,11 @@ The diagram above should not wrap.`,
          Architecture                                                       
                                                                             
          ┌─────────────┐     ┌─────────────┐     ┌─────────────┐            
-           ┌─────────────┐                                                  
+         ┌─────────────┐                                                    
          │   Client    │────▶│   Router    │────▶│  Handler    │────▶│      
-           Database   │                                                     
+         Database   │                                                       
          └─────────────┘     └─────────────┘     └─────────────┘            
-           └─────────────┘                                                  
+         └─────────────┘                                                    
                                                                             
                                                                             
        src/config.ts +1-0                                                   

package/src/web-utils.tsx

@@ -9,6 +9,7 @@ import { tmpdir } from "os"
 import { join } from "path"
 import { getResolvedTheme, rgbaToHex } from "./themes.js"
 import type { BoxRenderable, CapturedFrame, CapturedLine, RootRenderable, CliRenderer } from "@opentuah/core"
+import { DiffRenderable } from "@opentuah/core"
 import type { IndexedHunk, ReviewYaml } from "./review/types.js"
 import { loadStoredLicenseKey, loadOrCreateOwnerSecret } from "./license.js"
 
@@ -93,43 +94,80 @@ function getContentHeight(root: RootRenderable): number {
 }
 
 /**
- * Wait for async rendering (tree-sitter highlighting etc.) to stabilize.
+ * Find all DiffRenderable instances in the renderer tree.
+ * Walks the tree recursively checking instanceof DiffRenderable.
+ */
+function findDiffRenderables(root: RootRenderable): InstanceType<typeof DiffRenderable>[] {
+  const results: InstanceType<typeof DiffRenderable>[] = []
+
+  function walk(node: { getChildren?: () => any[] }) {
+    if (!node.getChildren) return
+    for (const child of node.getChildren()) {
+      if (child instanceof DiffRenderable) {
+        results.push(child)
+      }
+      walk(child)
+    }
+  }
+
+  walk(root)
+  return results
+}
+
+/**
+ * Wait for tree-sitter syntax highlighting to complete on all diff elements,
+ * then wait for rendering to stabilize (no more requestRender calls).
  *
- * Uses an idle+max model:
- * - Exits when no render requests for `idleMs` (tree-sitter is done)
- * - Hard cap at `maxMs` to prevent unbounded waits on huge diffs
- * - Polls at `pollMs` granularity (finer than the idle threshold)
+ * Two-phase approach:
+ * 1. Wait for DiffRenderable.isHighlighting to become false on all diffs
+ *    (deterministic, exits as soon as tree-sitter is done)
+ * 2. Wait for render idle — no new requestRender calls for idleMs
+ *    (catches deferred rebuilds like DiffRenderable.requestRebuild which
+ *    uses queueMicrotask to schedule buildView + requestRender after
+ *    highlighting completes)
  *
- * The old approach used a single `stabilizeMs` with 100ms polling, which
- * meant stabilizeMs=100 gave only one polling window and could miss late
- * highlights, while stabilizeMs=500 was wastefully slow for small diffs.
+ * Phase 2 is critical because DiffRenderable's split view rebuild happens
+ * asynchronously via microtask AFTER isHighlighting goes false. Without it,
+ * the captured frame may have concealed (unhighlighted) content on one side.
  */
-async function waitForRenderStabilization(
+async function waitForHighlightAndRenderStabilization(
   renderer: CliRenderer,
   renderOnce: () => Promise<void>,
-  stabilizeMs: number = 500
+  maxMs: number = 2000
 ): Promise<void> {
-  // Derive idle/max from the legacy parameter:
-  // - Interactive TUI (500ms): idleMs=200, maxMs=800
-  // - Web/batch (100ms):       idleMs=80,  maxMs=400
-  const idleMs = Math.max(Math.round(stabilizeMs * 0.4), 60)
-  const maxMs = Math.max(stabilizeMs, Math.round(stabilizeMs * 4))
+  const startTime = Date.now()
   const pollMs = 20
+  const idleMs = 80
 
+  // Track render requests to detect when rendering has quiesced
   let lastRenderTime = Date.now()
-  const startTime = lastRenderTime
   const originalRequestRender = renderer.root.requestRender.bind(renderer.root)
   renderer.root.requestRender = function() {
     lastRenderTime = Date.now()
     originalRequestRender()
   }
 
-  while (true) {
+  // Do one render cycle to kick off highlighting
+  await renderOnce()
+
+  // Phase 1: wait for isHighlighting to become false on all diffs
+  while (Date.now() - startTime < maxMs) {
+    const diffs = findDiffRenderables(renderer.root)
+    if (diffs.length === 0 || diffs.every(d => !d.isHighlighting)) {
+      break
+    }
+    await new Promise(resolve => setTimeout(resolve, pollMs))
+    await renderOnce()
+  }
+
+  // Phase 2: wait for render to stabilize (catches deferred rebuilds)
+  // Reset the render timestamp so we wait for any post-highlight renders
+  lastRenderTime = Date.now()
+  await renderOnce()
+
+  while (Date.now() - startTime < maxMs) {
     const now = Date.now()
-    // Exit if idle long enough (no render requests for idleMs)
     if (now - lastRenderTime >= idleMs) break
-    // Exit if hard cap reached
-    if (now - startTime >= maxMs) break
     await new Promise(resolve => setTimeout(resolve, pollMs))
     await renderOnce()
   }
@@ -315,8 +353,8 @@ async function renderDiffToFrameWithSectionPositions(
     await renderOnce()
   }
   
-  // Wait for async highlighting to complete (only once at the end)
-  await waitForRenderStabilization(renderer, renderOnce, options.stabilizeMs ?? 500)
+  // Wait for tree-sitter highlighting + render stabilization
+  await waitForHighlightAndRenderStabilization(renderer, renderOnce, options.stabilizeMs ?? 2000)
 
   const sectionPositions: FileSectionPosition[] = []
   for (let idx = 0; idx < fileNames.length; idx++) {
@@ -585,7 +623,9 @@ export async function captureResponsiveHtml(
   // These act as upper bounds to prevent runaway memory usage
   const desktopRows = Math.max(options.baseRows * 3, 5000)
   const mobileRows = Math.max(Math.ceil(desktopRows * (options.desktopCols / options.mobileCols)), 10000)
-  const stabilizeMs = options.stabilizeMs ?? 100
+  // With deterministic isHighlighting detection, stabilizeMs is just a safety cap.
+  // The function exits instantly when highlighting completes, so 2000ms is fine.
+  const stabilizeMs = options.stabilizeMs ?? 2000
 
   // Run all renders in parallel: desktop HTML, mobile HTML, and OG image
   const ogImagePromise = options.skipOgImage
@@ -725,8 +765,8 @@ export async function renderReviewToFrame(
     await renderOnce()
   }
   
-  // Wait for async highlighting to complete (only once at the end)
-  await waitForRenderStabilization(renderer, renderOnce, options.stabilizeMs ?? 500)
+  // Wait for tree-sitter highlighting + render stabilization
+  await waitForHighlightAndRenderStabilization(renderer, renderOnce, options.stabilizeMs ?? 2000)
 
   // Capture the final frame
   const buffer = renderer.currentRenderBuffer
@@ -792,7 +832,7 @@ export async function captureReviewResponsiveHtml(
   // These act as upper bounds to prevent runaway memory usage
   const desktopRows = Math.max(options.baseRows * 3, 5000)
   const mobileRows = Math.max(Math.ceil(desktopRows * (options.desktopCols / options.mobileCols)), 10000)
-  const stabilizeMs = options.stabilizeMs ?? 100
+  const stabilizeMs = options.stabilizeMs ?? 2000
 
   // Generate OG image from first few hunks' raw diff (in parallel with HTML renders)
   const ogImagePromise = options.skipOgImage

package/src/.test-stdin-pager-tmp/binary.diff

@@ -1,3 +0,0 @@
-diff --git a/logo.png b/logo.png
-new file mode 100644
-Binary files /dev/null and b/logo.png differ

package/src/.test-stdin-pager-tmp/colored.diff

@@ -1,8 +0,0 @@
-diff --git a/src/hello.ts b/src/hello.ts
---- a/src/hello.ts
-+++ b/src/hello.ts
-@@ -1,3 +1,3 @@
- const greeting = 'hello'
--console.log(greeting)
-+console.log(greeting + ' world')
- export default greeting

package/src/.test-stdin-pager-tmp/context-only.diff

@@ -1,7 +0,0 @@
-diff --git a/readme.md b/readme.md
---- a/readme.md
-+++ b/readme.md
-@@ -1,3 +1,3 @@
- # My Project
- 
- Some description

package/src/.test-stdin-pager-tmp/delete.diff

@@ -1,9 +0,0 @@
-diff --git a/src/deprecated.ts b/src/deprecated.ts
-deleted file mode 100644
---- a/src/deprecated.ts
-+++ /dev/null
-@@ -1,4 +0,0 @@
--// This module is no longer needed
--export function oldHelper() {
--  return 'deprecated'
--}

package/src/.test-stdin-pager-tmp/large.diff

@@ -1,19 +0,0 @@
-diff --git a/config.json b/config.json
---- a/config.json
-+++ b/config.json
-@@ -1,9 +1,11 @@
- {
--  "name": "my-app",
-+  "name": "my-awesome-app",
--  "version": "1.0.0",
-+  "version": "2.0.0",
-   "description": "A sample app",
--  "main": "index.js",
-+  "main": "dist/index.js",
-+  "types": "dist/index.d.ts",
-   "scripts": {
--    "build": "tsc"
-+    "build": "tsc --project tsconfig.build.json",
-+    "test": "bun test"
-   }
- }

package/src/.test-stdin-pager-tmp/multi.diff

@@ -1,20 +0,0 @@
-diff --git a/src/index.ts b/src/index.ts
---- a/src/index.ts
-+++ b/src/index.ts
-@@ -1,4 +1,6 @@
- import { App } from './app'
-+import { Logger } from './logger'
- 
- const app = new App()
-+const logger = new Logger()
- app.start()
-diff --git a/src/logger.ts b/src/logger.ts
-new file mode 100644
---- /dev/null
-+++ b/src/logger.ts
-@@ -0,0 +1,5 @@
-+export class Logger {
-+  log(msg: string) {
-+    console.log(`[LOG] ${msg}`)
-+  }
-+}

package/src/.test-stdin-pager-tmp/newfile.diff

@@ -1,12 +0,0 @@
-diff --git a/src/utils.ts b/src/utils.ts
-new file mode 100644
---- /dev/null
-+++ b/src/utils.ts
-@@ -0,0 +1,7 @@
-+export function clamp(value: number, min: number, max: number): number {
-+  return Math.min(Math.max(value, min), max)
-+}
-+
-+export function identity<T>(x: T): T {
-+  return x
-+}

package/src/.test-stdin-pager-tmp/rename.diff

@@ -1,11 +0,0 @@
-diff --git a/src/old-name.ts b/src/new-name.ts
-similarity index 90%
-rename from src/old-name.ts
-rename to src/new-name.ts
---- a/src/old-name.ts
-+++ b/src/new-name.ts
-@@ -1,3 +1,3 @@
--export const name = 'old'
-+export const name = 'new'
- export const version = 1
- export default name

package/src/.test-stdin-pager-tmp/single.diff

@@ -1,8 +0,0 @@
-diff --git a/src/hello.ts b/src/hello.ts
---- a/src/hello.ts
-+++ b/src/hello.ts
-@@ -1,3 +1,3 @@
- const greeting = 'hello'
--console.log(greeting)
-+console.log(greeting + ' world')
- export default greeting