npm - critique - Versions diffs - 0.1.9 → 0.1.10 - Mend

critique 0.1.9 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/AGENTS.md CHANGED Viewed

@@ -8,7 +8,12 @@ ALWAYS!
 ## bun
-NEVER run bun run index.tsx. You cannot directly run the tui app. it will hang. instead ask me to do so.
+NEVER run the interactive TUI (e.g. `bun run src/cli.tsx` without arguments). It will hang. Instead ask the user to run it.
+The `web` command is safe to run - it generates HTML and exits:
+```bash
+bun run src/cli.tsx web
+```
 NEVER use require. just import at the top of the file with esm

package/CHANGELOG.md CHANGED Viewed

@@ -1,3 +1,17 @@
+# 0.1.10
+- Default command:
+  - Add `--filter <pattern>` option to filter files by glob pattern (e.g. `critique --filter 'src/**/*.ts'`)
+- Web command:
+  - Add support for comparing two refs: `critique web <base> <head>`
+  - Add `--filter <pattern>` option to filter files by glob pattern
+  - Add auto light/dark mode based on system preference (uses CSS `prefers-color-scheme`)
+  - Disabled when `--theme` is specified
+  - Fix browser rendering for Safari/Chrome subpixel issues
+- Themes:
+  - Change default theme to `github` (dark)
+  - Fix opencode theme line number contrast (was nearly invisible on dark background)
 # 0.1.9
 - Performance:

package/README.md CHANGED Viewed

@@ -27,16 +27,26 @@ critique
 # View staged changes
 critique --staged
+# View the last commit (works whether pushed or unpushed)
+critique HEAD
 # View a specific commit
 critique --commit HEAD~1
 critique abc1234
+# View combined changes from last N commits
+critique HEAD~3 HEAD    # shows all changes from 3 commits ago to now
 # Compare two branches (PR-style, shows what head added since diverging from base)
 critique main feature-branch    # what feature-branch added vs main
 critique main HEAD              # what current branch added vs main
 # Watch mode - auto-refresh on file changes
 critique --watch
+# Filter files by glob pattern (can be used multiple times)
+critique --filter "src/**/*.ts"
+critique --filter "src/**/*.ts" --filter "lib/**/*.js"
 ```
 ### Navigation
@@ -85,9 +95,15 @@ critique web
 # View staged changes
 critique web --staged
+# View the last commit (works whether pushed or unpushed)
+critique web HEAD
 # View a specific commit
 critique web --commit HEAD~1
+# View combined changes from last N commits
+critique web HEAD~3 HEAD
 # Generate local HTML file instead of uploading
 critique web --local
@@ -112,6 +128,7 @@ critique web --cols 100 --rows 2000
 | `--cols <n>` | Terminal width for rendering | `240` |
 | `--rows <n>` | Terminal height for rendering | `2000` |
 | `--local` | Save HTML locally instead of uploading | - |
+| `--filter <pattern>` | Filter files by glob (can be used multiple times) | - |
 **Tips:**

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "critique",
   "module": "src/diff.tsx",
   "type": "module",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "private": false,
   "bin": "./src/cli.tsx",
   "scripts": {

package/src/ansi-html.ts CHANGED Viewed

@@ -13,6 +13,8 @@ export interface AnsiToHtmlOptions {
   fontSize?: string
   /** Trim empty lines from the end */
   trimEmptyLines?: boolean
+  /** Enable auto light/dark mode based on system preference */
+  autoTheme?: boolean
 }
 /**
@@ -156,7 +158,10 @@ html, body {
   color: ${textColor};
   font-family: ${fontFamily};
   font-size: ${fontSize};
-  line-height: 1.6;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 body {
   display: flex;
@@ -172,12 +177,19 @@ body {
   white-space: pre;
   display: flex;
   content-visibility: auto;
-  contain-intrinsic-block-size: auto 1lh;
+  contain-intrinsic-block-size: auto 1.5em;
   background-color: ${backgroundColor};
+  transform: translateZ(0);
+  backface-visibility: hidden;
 }
 .line span {
   white-space: pre;
 }
+${options.autoTheme ? `@media (prefers-color-scheme: light) {
+  html {
+    filter: invert(1) hue-rotate(180deg);
+  }
+}` : ''}
 </style>
 </head>
 <body>
@@ -195,7 +207,10 @@ ${content}
   function adjustFontSize() {
     const viewportWidth = window.innerWidth;
     const calculatedSize = (viewportWidth - padding) / (cols * charRatio);
-    const fontSize = Math.max(minFontSize, Math.min(maxFontSize, calculatedSize));
+    // Round to nearest even integer to prevent subpixel rendering issues
+    // (with line-height: 1.5, even font-size always yields integer line-height)
+    const clamped = Math.max(minFontSize, Math.min(maxFontSize, calculatedSize));
+    const fontSize = Math.round(clamped / 2) * 2;
     document.body.style.fontSize = fontSize + 'px';
   }

package/src/cli.tsx CHANGED Viewed

@@ -562,20 +562,23 @@ cli
   .option("--commit <ref>", "Show changes from a specific commit")
   .option("--watch", "Watch for file changes and refresh diff")
   .option("--context <lines>", "Number of context lines (default: 3)")
+  .option("--filter <pattern>", "Filter files by glob pattern (can be used multiple times)")
   .action(async (base, head, options) => {
     try {
       const contextArg = options.context ? `-U${options.context}` : "";
+      const filters = options.filter ? (Array.isArray(options.filter) ? options.filter : [options.filter]) : [];
+      const filterArg = filters.length > 0 ? `-- ${filters.map((f: string) => `"${f}"`).join(" ")}` : "";
       const gitCommand = (() => {
         if (options.staged)
-          return `git diff --cached --no-prefix ${contextArg}`.trim();
+          return `git diff --cached --no-prefix ${contextArg} ${filterArg}`.trim();
         if (options.commit)
-          return `git show ${options.commit} --no-prefix ${contextArg}`.trim();
+          return `git show ${options.commit} --no-prefix ${contextArg} ${filterArg}`.trim();
         // Two refs: compare base...head (three-dot, shows changes since branches diverged, like GitHub PRs)
         if (base && head)
-          return `git diff ${base}...${head} --no-prefix ${contextArg}`.trim();
+          return `git diff ${base}...${head} --no-prefix ${contextArg} ${filterArg}`.trim();
         // Single ref: show that commit's changes
-        if (base) return `git show ${base} --no-prefix ${contextArg}`.trim();
-        return `git add -N . && git diff --no-prefix ${contextArg}`.trim();
+        if (base) return `git show ${base} --no-prefix ${contextArg} ${filterArg}`.trim();
+        return `git add -N . && git diff --no-prefix ${contextArg} ${filterArg}`.trim();
       })();
       const shouldWatch = options.watch && !base && !head && !options.commit;
@@ -1010,7 +1013,7 @@ const WORKER_URL =
   process.env.CRITIQUE_WORKER_URL || "https://critique.work";
 cli
-  .command("web [ref]", "Generate web preview of diff")
+  .command("web [base] [head]", "Generate web preview of diff")
   .option("--staged", "Show staged changes")
   .option("--commit <ref>", "Show changes from a specific commit")
   .option(
@@ -1027,25 +1030,31 @@ cli
   .option("--open", "Open in browser after generating")
   .option("--context <lines>", "Number of context lines (default: 3)")
   .option("--theme <name>", "Theme to use for rendering")
-  .action(async (ref, options) => {
+  .option("--filter <pattern>", "Filter files by glob pattern (can be used multiple times)")
+  .action(async (base, head, options) => {
     const pty = await import("@xmorse/bun-pty");
     const { ansiToHtmlDocument } = await import("./ansi-html.ts");
     const contextArg = options.context ? `-U${options.context}` : "";
+    const filters = options.filter ? (Array.isArray(options.filter) ? options.filter : [options.filter]) : [];
+    const filterArg = filters.length > 0 ? `-- ${filters.map((f: string) => `"${f}"`).join(" ")}` : "";
     const gitCommand = (() => {
       if (options.staged)
-        return `git diff --cached --no-prefix ${contextArg}`.trim();
+        return `git diff --cached --no-prefix ${contextArg} ${filterArg}`.trim();
       if (options.commit)
-        return `git show ${options.commit} --no-prefix ${contextArg}`.trim();
-      if (ref) return `git show ${ref} --no-prefix ${contextArg}`.trim();
-      return `git add -N . && git diff --no-prefix ${contextArg}`.trim();
+        return `git show ${options.commit} --no-prefix ${contextArg} ${filterArg}`.trim();
+      // Two refs: compare base...head (three-dot, shows changes since branches diverged, like GitHub PRs)
+      if (base && head)
+        return `git diff ${base}...${head} --no-prefix ${contextArg} ${filterArg}`.trim();
+      // Single ref: show that commit's changes
+      if (base) return `git show ${base} --no-prefix ${contextArg} ${filterArg}`.trim();
+      return `git add -N . && git diff --no-prefix ${contextArg} ${filterArg}`.trim();
     })();
     const desktopCols = parseInt(options.cols) || 240;
     const mobileCols = parseInt(options.mobileCols) || 100;
-    const themeName = options.theme && themeNames.includes(options.theme)
-      ? options.theme
-      : defaultThemeName;
+    const customTheme = options.theme && themeNames.includes(options.theme);
+    const themeName = customTheme ? options.theme : defaultThemeName;
     console.log("Capturing diff output...");
@@ -1124,7 +1133,7 @@ cli
       const backgroundColor = rgbaToHex(theme.background);
       const textColor = rgbaToHex(theme.text);
-      return ansiToHtmlDocument(ansiOutput, { cols, rows: renderRows, backgroundColor, textColor });
+      return ansiToHtmlDocument(ansiOutput, { cols, rows: renderRows, backgroundColor, textColor, autoTheme: !customTheme });
     }
     // Generate desktop and mobile versions in parallel

package/src/themes/opencode.json CHANGED Viewed

@@ -138,8 +138,8 @@
       "light": "lightStep2"
     },
     "diffLineNumber": {
-      "dark": "darkStep3",
-      "light": "lightStep3"
+      "dark": "darkStep8",
+      "light": "lightStep8"
     },
     "diffAddedLineNumberBg": {
       "dark": "#1b2b34",

package/src/themes.ts CHANGED Viewed

@@ -237,7 +237,7 @@ export function getSyntaxTheme(
 export const themeNames = Object.keys(THEME_FILES).sort();
-export const defaultThemeName = "github-light";
+export const defaultThemeName = "github";
 // Helper to convert RGBA to hex string
 export function rgbaToHex(rgba: RGBA): string {