critique 0.1.3 → 0.1.6

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# 0.1.6
+
+- Web preview:
+  - Fix horizontal centering using flexbox on body instead of margin auto
+
+# 0.1.5
+
+- Web preview:
+  - Switch to `ghostty-opentui` for unlimited scrollback (fixes truncation on large diffs)
+  - Dynamically calculate rows from diff content instead of hardcoded limit
+  - Add `--open` flag to open browser (disabled by default)
+  - Center container horizontally with `max-width: 100vw` (fixes iPad overflow)
+  - Set line background color to reduce Safari content-visibility flicker
+  - Reduce min font size from 8px to 4px for better mobile fit
+  - Fix JSX syntax error (`treeSitterClient={undefined}`)
+
+# 0.1.4
+
+- Web preview:
+  - Fix syntax highlighting not appearing in web output
+  - Allow multiple renders before capturing (syntax highlighting is async)
+  - Use debounced exit (300ms after last render) instead of blocking re-renders
+
 # 0.1.3
 
 - Themes:

package/bun.lock

@@ -13,7 +13,7 @@
         "@xmorse/bun-pty": "0.4.0",
         "cac": "^6.7.14",
         "diff": "^8.0.2",
-        "opentui-ansi-vt": "1.2.11",
+        "ghostty-opentui": "^1.3.11",
         "react": "^19.2.0",
         "react-error-boundary": "^6.0.0",
         "shiki": "^3.20.0",
@@ -374,6 +374,8 @@
 
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
+    "ghostty-opentui": ["ghostty-opentui@1.3.11", "", { "dependencies": { "strip-ansi": "^7.1.2" }, "peerDependencies": { "@opentui/core": "*" }, "optionalPeers": ["@opentui/core"] }, "sha512-taKOhQD65dip/GBi2eDicyS6Z+m7T6CAWyUcFUVP3nX+JKTCiOwfncGqhnqtSa8VE3mG6VHaPzIimDVN7pdD6w=="],
+
     "gifwrap": ["gifwrap@0.10.1", "", { "dependencies": { "image-q": "^4.0.0", "omggif": "^1.0.10" } }, "sha512-2760b1vpJHNmLzZ/ubTtNnEx5WApN/PYWJvXvgS+tL1egTTthayFYIQQNi136FLEDcN/IyEY2EcGpIITD6eYUw=="],
 
     "glob-to-regexp": ["glob-to-regexp@0.4.1", "", {}, "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="],
@@ -432,8 +434,6 @@
 
     "oniguruma-to-es": ["oniguruma-to-es@4.3.4", "", { "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.0.1", "regex-recursion": "^6.0.2" } }, "sha512-3VhUGN3w2eYxnTzHn+ikMI+fp/96KoRSVK9/kMTcFqj1NRDh2IhQCKvYxDnWePKRXY/AqH+Fuiyb7VHSzBjHfA=="],
 
-    "opentui-ansi-vt": ["opentui-ansi-vt@1.2.11", "", { "dependencies": { "strip-ansi": "^7.1.2" }, "peerDependencies": { "@opentui/core": "*" }, "optionalPeers": ["@opentui/core"] }, "sha512-T+uxxisV2m8LaYgnzvHqnJX6gLJZ5UrvMVpEwjC4ocxKP2DtY++//IRvVDo1db9c2nT3Sz8H/sw22X9CXW/Igg=="],
-
     "pako": ["pako@1.0.11", "", {}, "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="],
 
     "parse-bmfont-ascii": ["parse-bmfont-ascii@1.0.6", "", {}, "sha512-U4RrVsUFCleIOBsIGYOMKjn9PavsGOXxbvYGtMOEfnId0SVNsgehXh1DxUdVPLoxd5mvcEtvmKs2Mmf0Mpa1ZA=="],

package/package.json

@@ -2,7 +2,7 @@
   "name": "critique",
   "module": "src/diff.tsx",
   "type": "module",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "private": false,
   "bin": "./src/cli.tsx",
   "scripts": {
@@ -30,7 +30,7 @@
     "@xmorse/bun-pty": "0.4.0",
     "cac": "^6.7.14",
     "diff": "^8.0.2",
-    "opentui-ansi-vt": "1.2.11",
+    "ghostty-opentui": "^1.3.11",
     "react": "^19.2.0",
     "react-error-boundary": "^6.0.0",
     "shiki": "^3.20.0",

package/src/ansi-html.ts

@@ -1,4 +1,4 @@
-import { ptyToJson, StyleFlags, type TerminalData, type TerminalLine, type TerminalSpan } from "opentui-ansi-vt"
+import { ptyToJson, StyleFlags, type TerminalData, type TerminalLine, type TerminalSpan } from "ghostty-opentui"
 
 export interface AnsiToHtmlOptions {
   cols?: number
@@ -147,21 +147,30 @@ html {
 }
 html, body {
   height: 100%;
+  max-width: 100vw;
+  overflow-x: hidden;
   background-color: ${backgroundColor};
   color: #c5c8c6;
   font-family: ${fontFamily};
   font-size: ${fontSize};
   line-height: 1.6;
 }
+body {
+  display: flex;
+  justify-content: center;
+}
 #content {
   padding: 16px;
   overflow-x: auto;
+  max-width: 100vw;
+  box-sizing: border-box;
 }
 .line {
   white-space: pre;
   display: flex;
   content-visibility: auto;
   contain-intrinsic-block-size: auto 1lh;
+  background-color: ${backgroundColor};
 }
 .line span {
   white-space: pre;
@@ -177,7 +186,7 @@ ${content}
   const cols = ${cols};
   const charRatio = ${charWidthRatio};
   const padding = ${padding};
-  const minFontSize = 8;
+  const minFontSize = 4;
   const maxFontSize = 16;
 
   function adjustFontSize() {

package/src/cli.tsx

@@ -225,6 +225,7 @@ function DiffView({ diff, view, filetype, themeName }: DiffViewProps) {
     <diff
       diff={diff}
       view={view}
+      treeSitterClient={undefined}
       filetype={filetype}
       syntaxStyle={syntaxStyle}
       showLineNumbers
@@ -998,8 +999,9 @@ cli
     "Number of columns for rendering (use ~100 for mobile)",
     { default: 240 },
   )
-  .option("--rows <rows>", "Number of rows for rendering", { default: 2000 })
-  .option("--local", "Open local preview instead of uploading")
+  
+  .option("--local", "Save local preview instead of uploading")
+  .option("--open", "Open in browser after generating")
   .option("--context <lines>", "Number of context lines (default: 3)")
   .action(async (ref, options) => {
     const pty = await import("@xmorse/bun-pty");
@@ -1016,7 +1018,6 @@ cli
     })();
 
     const cols = parseInt(options.cols) || 240;
-    const rows = parseInt(options.rows) || 2000;
 
     console.log("Capturing diff output...");
 
@@ -1030,6 +1031,14 @@ cli
       process.exit(0);
     }
 
+    // Calculate required rows from diff content
+    const { parsePatch } = await import("diff");
+    const files = parsePatch(gitDiff);
+    const renderRows = files.reduce((sum, file) => {
+      const diffLines = file.hunks.reduce((h, hunk) => h + hunk.lines.length, 0);
+      return sum + diffLines + 5; // header + margin per file
+    }, 100); // base padding
+
     // Write diff to temp file
     const diffFile = join(tmpdir(), `critique-web-diff-${Date.now()}.patch`);
     fs.writeFileSync(diffFile, gitDiff);
@@ -1045,12 +1054,12 @@ cli
         "--cols",
         String(cols),
         "--rows",
-        String(rows),
+        String(renderRows),
       ],
       {
         name: "xterm-256color",
         cols: cols,
-        rows: rows,
+        rows: renderRows,
 
         cwd: process.cwd(),
         env: { ...process.env, TERM: "xterm-256color" } as Record<
@@ -1088,25 +1097,27 @@ cli
     }
 
     // Convert ANSI to HTML document
-    const html = ansiToHtmlDocument(ansiOutput, { cols, rows });
+    const html = ansiToHtmlDocument(ansiOutput, { cols, rows: renderRows });
 
     if (options.local) {
-      // Save locally and open
+      // Save locally
       const htmlFile = join(tmpdir(), `critique-${Date.now()}.html`);
       fs.writeFileSync(htmlFile, html);
       console.log(`Saved to: ${htmlFile}`);
 
-      // Try to open in browser
-      const openCmd =
-        process.platform === "darwin"
-          ? "open"
-          : process.platform === "win32"
-            ? "start"
-            : "xdg-open";
-      try {
-        await execAsync(`${openCmd} "${htmlFile}"`);
-      } catch {
-        console.log("Could not open browser automatically");
+      // Open in browser if requested
+      if (options.open) {
+        const openCmd =
+          process.platform === "darwin"
+            ? "open"
+            : process.platform === "win32"
+              ? "start"
+              : "xdg-open";
+        try {
+          await execAsync(`${openCmd} "${htmlFile}"`);
+        } catch {
+          console.log("Could not open browser automatically");
+        }
       }
       process.exit(0);
     }
@@ -1132,17 +1143,19 @@ cli
       console.log(`\nPreview URL: ${result.url}`);
       console.log(`(expires in 7 days)`);
 
-      // Try to open in browser
-      const openCmd =
-        process.platform === "darwin"
-          ? "open"
-          : process.platform === "win32"
-            ? "start"
-            : "xdg-open";
-      try {
-        await execAsync(`${openCmd} "${result.url}"`);
-      } catch {
-        // Silent fail - user can copy URL
+      // Open in browser if requested
+      if (options.open) {
+        const openCmd =
+          process.platform === "darwin"
+            ? "open"
+            : process.platform === "win32"
+              ? "start"
+              : "xdg-open";
+        try {
+          await execAsync(`${openCmd} "${result.url}"`);
+        } catch {
+          // Silent fail - user can copy URL
+        }
       }
     } catch (error: any) {
       console.error("Failed to upload:", error.message);
@@ -1164,7 +1177,7 @@ cli
   .option("--rows <rows>", "Terminal rows", { default: 1000 })
   .action(async (diffFile: string, options) => {
     const cols = parseInt(options.cols) || 120;
-    const rows = parseInt(options.rows) || 40;
+    const rows = parseInt(options.rows) || 1000;
 
     const { parsePatch, formatPatch } = await import("diff");
 
@@ -1201,7 +1214,7 @@ cli
       process.exit(0);
     }
 
-    // Override terminal size
+    // Override terminal size (rows calculated by caller from diff content)
     process.stdout.columns = cols;
     process.stdout.rows = rows;
 
@@ -1210,20 +1223,23 @@ cli
       useAlternateScreen: false,
     });
 
-    // Track if we've rendered once
-    let hasRendered = false;
+    // Wait for syntax highlighting to complete (it's async)
+    // Allow multiple renders, then exit after highlighting is ready
+    let renderCount = 0;
     const originalRequestRender = renderer.root.requestRender.bind(
       renderer.root,
     );
+    let exitTimeout: ReturnType<typeof setTimeout> | undefined;
     renderer.root.requestRender = function () {
-      if (hasRendered) return; // Skip subsequent renders
-      hasRendered = true;
+      renderCount++;
       originalRequestRender();
-      // Exit after the first render completes
-      setTimeout(() => {
+      // Reset timeout on each render - exit 1s after last render
+      // Tree-sitter highlighting is async and can take time for multiple files
+      if (exitTimeout) clearTimeout(exitTimeout);
+      exitTimeout = setTimeout(() => {
         renderer.destroy();
         process.exit(0);
-      }, 100);
+      }, 1000);
     };
 
     // Use unified diff for narrow viewports (mobile), split view for wider ones