critique 0.1.78 → 0.1.103

package/AGENTS.md

@@ -131,3 +131,14 @@ npx opensrc <owner>/<repo>      # GitHub repo (e.g., npx opensrc vercel/ai)
 ```
 
 <!-- opensrc:end -->
+
+## opentui fork
+
+we are using an opentui fork with name opentuah with my personal PRs merged
+
+"@opentui/core": "npm:@opentuah/core@^0.1.80",
+"@opentui/react": "npm:@opentuah/react@^0.1.80",
+
+To find my opentui folder with that fork see kimaki projects via kimaki cli, the one named opentui.
+
+To apply fixes there you must create a new branch and then merge it in the branch called opentuah. then publish and update the versions here. to publish there is a script specifically for opentuah.

package/CHANGELOG.md

@@ -1,3 +1,174 @@
+# 0.1.103
+
+- Syntax highlighting:
+  - JSON: render punctuation (quotes/brackets/separators) using comment color instead of operator red / full-bright
+
+# 0.1.102
+
+- `critique --web` / `critique web`:
+  - Render the upload notice block in a single muted color (no mixed emphasis)
+
+# 0.1.101
+
+- `critique` / `critique --web` / OG images:
+  - Pass `addedBg`/`removedBg` alongside content backgrounds so opentui's word-level highlights don't inherit dark defaults on light themes
+  - Keep a small `github-light`-only `addedWordBg` override to make added word highlights visible in images
+
+# 0.1.100
+
+- Dependencies:
+  - Update `@opentui/core` / `@opentui/react` npm aliases to `@opentuah/*@0.1.88`
+  - Remove `@opentuah/core-darwin-arm64` optional dependency (core pulls the correct platform binary via its own optional deps)
+
+# 0.1.99
+
+- `critique` / `critique review` / `critique web` / `critique hunks list`:
+  - Define `--filter <pattern>` as an array schema in goke so repeated flags are parsed explicitly as `string[]`
+- `critique review`:
+  - Define `--session <id>` as an array schema so repeated session flags are handled natively
+
+# 0.1.98
+
+- Dependencies:
+  - Replace `@xmorse/cac` with `goke` for CLI argument parsing
+
+# 0.1.97
+
+- `README`:
+  - Make the `CodeRabbit` sponsor text clickable while keeping the compact logo link
+
+# 0.1.96
+
+- `README`:
+  - Add a bottom `Sponsors` section with a compact CodeRabbit logo link to `https://coderabbit.link/remorses`
+
+# 0.1.95
+
+- Syntax highlighting:
+  - `json`:
+    - Color JSON quote characters (`"`) separately as `punctuation.delimiter` while keeping string text highlighted as `property` (keys) and `string` (values)
+
+# 0.1.94
+
+- Syntax highlighting:
+  - Fix JSON syntax highlighting by using local query file with captures compatible with themes.ts (nvim-treesitter uses incompatible `#set!` and `#eq?` predicates)
+  - Fix syntax highlighting in web preview by pre-initializing TreeSitter client before rendering
+
+# 0.1.93
+
+- Dependencies:
+  - Update `@opentui/core` and `@opentui/react` npm aliases to `@opentuah/*@^0.1.81`
+
+# 0.1.92
+
+- `critique`:
+  - Keep dropdown search on `<textarea>` and fix filtering by syncing `plainText` from `onContentChange` in a microtask, plus extract shared filtering logic for deterministic matching across theme/file pickers
+  - Make watch-mode loading/empty backgrounds reactive to the selected theme by subscribing to `useAppStore` instead of reading `getState()` once
+- `critique pick`:
+  - Use the active global theme for picker UI colors instead of always forcing the default theme
+- `diff rendering`:
+  - Remount the `DiffView` wrapper on theme changes so internal diff backgrounds refresh more reliably when switching themes
+- Tests:
+  - Add `src/components/diff-view.test.tsx` to verify theme-switch background updates in `DiffView`
+  - Add dropdown filtering coverage via exported `filterDropdownOptions` tests in `src/dropdown.test.tsx`
+
+# 0.1.91
+
+- `critique`:
+  - Improve main diff layout scrolling behavior by allowing the scrollbox to shrink within the column layout (`flexShrink: 1`)
+- Tests:
+  - Add `src/cli-scroll.test.tsx` using opentui test renderer to verify mouse-wheel scrolling changes visible content in the main diff view
+  - Guard CLI entrypoint parsing with `import.meta.main` and export `App`/`AppProps` to support renderer-driven CLI view tests
+
+# 0.1.90
+
+- `critique`:
+  - Fix dropdown search input in file/theme pickers by switching to `<input onInput>` so typed text filters options immediately
+  - Ensure diff internals fully refresh on theme change by remounting `<diff>` when `themeName` changes
+  - Make loading/empty-state backgrounds reactive to theme changes in watch mode
+- `critique pick`:
+  - Use the currently selected global theme instead of always forcing the default theme
+- Tests:
+  - Add a dropdown regression test that reproduces and verifies theme search filtering
+  - Add a DiffView regression test that verifies diff background colors actually change after a runtime theme switch
+
+# 0.1.89
+
+- `critique`:
+  - Keep the main diff scrollbox focused so mouse-wheel scrolling works reliably in the default diff view
+
+# 0.1.88
+
+- Dependencies:
+  - Keep `@opentui/*` imports/package names and install Jake's fork via npm alias mapping
+  - Map `@opentui/core` -> `npm:@opentuah/core@latest` and `@opentui/react` -> `npm:@opentuah/react@latest`
+
+# 0.1.87
+
+- `hunks`:
+  - `critique hunks add <id>` now appends dirty submodule diffs before hunk lookup
+  - Fixes mismatch where IDs listed by `critique hunks list` for submodule changes could fail with "Hunk not found"
+
+# 0.1.86
+
+- New `hunks` commands for non-interactive selective staging:
+  - `critique hunks list` - list all hunks with stable IDs
+  - `critique hunks add <id>` - stage specific hunks by ID
+  - `--staged` flag to list staged hunks
+  - `--filter` flag to filter by file pattern
+  - Hunk IDs use format `file:@-old,len+new,len` (stable across runs)
+  - Uses `diff` npm package for reliable parsing instead of shell/awk
+- Switch to `@xmorse/cac` fork for space-separated subcommand support
+
+# 0.1.85
+
+- Docs: remove undocumented `--local` option from README (fixes #24)
+
+# 0.1.84
+
+- New `--scrollback` option: output diff to terminal scrollback instead of interactive TUI
+  - Renders using opentui test renderer and converts to ANSI escape sequences
+  - Auto-detects terminal color support (truecolor → 256 → 16 → plain text)
+  - Respects `FORCE_COLOR` and `NO_COLOR` environment variables
+  - Outputs plain text when piped (non-TTY)
+- Add `supports-color` dependency for terminal capability detection
+
+# 0.1.83
+
+- Internal:
+  - Update opentui to 0.1.77
+  - Simplify span capture: use opentui's built-in `getSpanLines()` instead of custom implementation
+  - Remove ~60 lines of duplicated span capture code in `web-utils.tsx`
+
+# 0.1.82
+
+- `--web`:
+  - Content-fitting for HTML rendering: starts with small buffer (100 rows), doubles until content fits, then shrinks to exact size
+  - Reduces memory usage for small diffs while still supporting large ones
+  - Rename `CaptureOptions.rows` to `maxRows` to clarify it's the upper bound for buffer growth
+
+# 0.1.81
+
+- `review`:
+  - Fix diagram overflow expanding container width - long diagrams now truncate from right instead of shifting all content left
+  - Update AI prompt: diagrams should be under 70 chars wide, prose must be outside code blocks
+
+# 0.1.80
+
+- OG images:
+  - Increased default font size from 16px to 20px for better readability
+  - Fixed text clipping by adding flexShrink 0 to all elements
+  - Always use github-light theme (no dark mode support in OG protocol)
+  - `review --web` now generates OG images from the first few hunks of the diff
+  - Fixed `buildPatch` to include `diff --git` header for proper diff parsing
+
+# 0.1.79
+
+- TUI:
+  - `critique`: Esc closes file/theme dropdowns before exiting
+  - `critique`: Add dropdown escape handling test coverage
+  - `critique review`: Esc closes the theme picker dropdown before exiting
+
 # 0.1.78
 
 - **Breaking change:** Single positional argument now uses `git diff` instead of `git show`

package/README.md

@@ -155,6 +155,58 @@ critique pick feature-branch
 
 Use the interactive UI to select files. Selected files are immediately applied as patches, deselected files are restored.
 
+### Selective Hunk Staging
+
+Non-interactive hunk staging for scripts and AI agents. Similar to `git add -p` but scriptable.
+
+```bash
+# List all unstaged hunks with stable IDs
+critique hunks list
+
+# List staged hunks
+critique hunks list --staged
+
+# Filter by file pattern
+critique hunks list --filter "src/**/*.ts"
+
+# Stage specific hunks by ID
+critique hunks add 'src/main.ts:@-10,6+10,7'
+
+# Stage multiple hunks
+critique hunks add 'src/main.ts:@-10,6+10,7' 'src/utils.ts:@-5,3+5,4'
+```
+
+**Hunk ID format:** `file:@-oldStart,oldLines+newStart,newLines`
+
+The ID is derived from the `@@` header in unified diff format, making it stable across runs (unlike incremental IDs).
+
+**Example workflow:**
+
+```bash
+# 1. List available hunks
+$ critique hunks list
+src/main.ts:@-10,6+10,7
+@@ -10,6 +10,7 @@
++import { newFeature } from './feature'
+---
+src/main.ts:@-50,3+51,5
+@@ -50,3 +51,5 @@
++  newFeature()
++  return result
+---
+
+# 2. Stage just the import hunk
+$ critique hunks add 'src/main.ts:@-10,6+10,7'
+Staged: src/main.ts:@-10,6+10,7
+
+# 3. Commit it separately
+$ git commit -m "Add newFeature import"
+
+# 4. Stage and commit the usage
+$ critique hunks add 'src/main.ts:@-50,3+51,5'
+$ git commit -m "Use newFeature in main"
+```
+
 ### Web Preview
 
 Generate a shareable web preview of your diff that you can send to anyone - no installation required.
@@ -187,9 +239,6 @@ critique web -- src/api.ts src/utils.ts
 
 # Custom title for the HTML page
 critique web --title "Fix authentication bug"
-
-# Generate local HTML file instead of uploading
-critique web --local
 ```
 
 **Features:**
@@ -208,7 +257,6 @@ critique web --local
 | `--commit <ref>` | Show changes from a specific commit | - |
 | `--cols <n>` | Terminal width for rendering | `240` |
 | `--mobile-cols <n>` | Terminal width for mobile version | `100` |
-| `--local` | Save HTML locally instead of uploading | - |
 | `--filter <pattern>` | Filter files by glob (can be used multiple times) | - |
 | `--title <text>` | Custom HTML document title | `Critique Diff` |
 | `--theme <name>` | Theme for rendering (disables auto dark/light mode) | - |
@@ -270,6 +318,14 @@ Files with more than 6000 lines of diff are also hidden for performance.
 - [diff](https://github.com/kpdecker/jsdiff) - Diff algorithm
 - [Hono](https://hono.dev/) - Web framework for the preview worker
 
+## Sponsors
+
+<a href="https://coderabbit.link/remorses" target="_blank" rel="noopener noreferrer">
+  <img src="https://github.com/coderabbitai.png" alt="CodeRabbit" height="24" />
+</a>
+
+Sponsored by [CodeRabbit](https://coderabbit.link/remorses).
+
 ## License
 
 MIT

package/global.d.ts

@@ -0,0 +1,5 @@
+// Type declarations for importing .scm files with Bun
+declare module "*.scm" {
+  const value: string
+  export default value
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "critique",
   "module": "src/diff.tsx",
   "type": "module",
-  "version": "0.1.78",
+  "version": "0.1.103",
   "license": "MIT",
   "private": false,
   "bin": "./src/cli.tsx",
@@ -28,16 +28,17 @@
   "dependencies": {
     "@agentclientprotocol/sdk": "^0.13.1",
     "@clack/prompts": "1.0.0-alpha.9",
-    "@opentui/core": "^0.1.75",
-    "@opentui/react": "^0.1.75",
+    "@opentui/core": "npm:@opentuah/core@0.1.88",
+    "@opentui/react": "npm:@opentuah/react@0.1.88",
     "@parcel/watcher": "^2.5.6",
-    "cac": "^6.7.14",
+    "goke": "^6.1.3",
     "diff": "^8.0.2",
     "js-yaml": "^4.1.1",
     "marked": "^17.0.1",
     "picocolors": "^1.1.1",
     "react": "^19.2.0",
     "resend": "^6.8.0",
+    "supports-color": "^10.2.2",
     "zustand": "^5.0.8"
   },
   "optionalDependencies": {

package/parsers-config.ts

@@ -3,6 +3,14 @@
 // Warn: when taking queries from the nvim-treesitter repo, make sure to include the query dependencies as well
 //       marked with for example `; inherits: ecma` at the top of the file. Just put the dependencies before the actual query.
 //       ALSO: Some queries use breaking changes in the nvim-treesitter repo, that are not compatible with the (web-)tree-sitter parser.
+import { resolve, dirname } from "path"
+import { fileURLToPath } from "url"
+
+// Local query files for languages where remote queries have incompatible predicates
+import jsonHighlights from "./queries/json/highlights.scm" with { type: "file" }
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
 export default {
   parsers: [
     {
@@ -164,7 +172,9 @@ export default {
       wasm: "https://github.com/tree-sitter/tree-sitter-json/releases/download/v0.24.8/tree-sitter-json.wasm",
       queries: {
         highlights: [
-          "https://raw.githubusercontent.com/nvim-treesitter/nvim-treesitter/refs/heads/master/queries/json/highlights.scm",
+          // Local query file - nvim-treesitter and tree-sitter-json queries use predicates/captures
+          // incompatible with web-tree-sitter or themes.ts
+          resolve(__dirname, jsonHighlights),
         ],
       },
     },

package/queries/json/highlights.scm

@@ -0,0 +1,42 @@
+; JSON highlights query for critique
+; Uses captures compatible with themes.ts mappings
+; No predicates (like #set! or #eq?) that are unsupported by web-tree-sitter
+
+(pair
+  key: (string
+    (string_content) @property))
+
+(pair
+  value: (string
+    (string_content) @string))
+
+(array
+  (string
+    (string_content) @string))
+
+(number) @number
+
+[
+  (true)
+  (false)
+] @boolean
+
+(null) @constant
+
+(escape_sequence) @string
+
+; Keep JSON punctuation muted (not operator-red / not full-bright)
+("\"") @comment
+
+; JSON separators should render muted, not like operators
+[
+  ","
+  ":"
+] @comment
+
+[
+  "["
+  "]"
+  "{"
+  "}"
+] @comment

package/scripts/fixtures/json-syntax-example.json

@@ -0,0 +1,13 @@
+{
+  "_comment": "Example JSON for critique syntax highlighting preview.",
+  "name": "critique",
+  "count": 12,
+  "enabled": true,
+  "ratio": 0.125,
+  "tags": ["diff", "tui", "web"],
+  "nested": {
+    "a": 1,
+    "b": null,
+    "url": "https://critique.work/v/example"
+  }
+}

package/scripts/preview-review.tsx

@@ -264,7 +264,7 @@ async function main() {
   if (webMode) {
     console.log("Capturing preview...")
     
-    const { htmlDesktop, htmlMobile } = await captureReviewResponsiveHtml({
+    const { htmlDesktop, htmlMobile, ogImage } = await captureReviewResponsiveHtml({
       hunks: exampleHunks,
       reviewData: exampleReviewData,
       desktopCols: 200,
@@ -275,7 +275,7 @@ async function main() {
     })
 
     console.log("Uploading...")
-    const result = await uploadHtml(htmlDesktop, htmlMobile)
+    const result = await uploadHtml(htmlDesktop, htmlMobile, ogImage)
     console.log(`\nPreview URL: ${result.url}`)
     console.log("(expires in 7 days)")
     return

package/src/ansi-output.test.ts

@@ -0,0 +1,205 @@
+import { describe, test, expect } from "bun:test"
+import { spanToAnsi, frameToAnsi } from "./ansi-output.ts"
+import { RGBA } from "@opentui/core"
+import type { CapturedFrame, CapturedSpan, CapturedLine } from "@opentui/core"
+
+const themeBg = RGBA.fromValues(0, 0, 0, 1) // Black background
+
+describe("spanToAnsi", () => {
+  test("plain text with no colors (level 0)", () => {
+    const span: CapturedSpan = {
+      text: "hello",
+      fg: RGBA.fromValues(1, 1, 1, 1),
+      bg: RGBA.fromValues(0, 0, 0, 0),
+      attributes: 0,
+      width: 5,
+    }
+    expect(spanToAnsi(span, 0, themeBg)).toMatchInlineSnapshot(`"hello"`)
+  })
+
+  test("truecolor foreground (level 3)", () => {
+    const span: CapturedSpan = {
+      text: "red",
+      fg: RGBA.fromValues(1, 0, 0, 1), // Pure red
+      bg: RGBA.fromValues(0, 0, 0, 0),
+      attributes: 0,
+      width: 3,
+    }
+    expect(spanToAnsi(span, 3, themeBg)).toMatchInlineSnapshot(`"\x1B[38;2;255;0;0mred\x1B[0m"`)
+  })
+
+  test("truecolor foreground and background (level 3)", () => {
+    const span: CapturedSpan = {
+      text: "styled",
+      fg: RGBA.fromValues(1, 1, 1, 1), // White
+      bg: RGBA.fromValues(0, 0, 1, 1), // Blue
+      attributes: 0,
+      width: 6,
+    }
+    expect(spanToAnsi(span, 3, themeBg)).toMatchInlineSnapshot(`"\x1B[38;2;255;255;255;48;2;0;0;255mstyled\x1B[0m"`)
+  })
+
+  test("256 colors (level 2)", () => {
+    const span: CapturedSpan = {
+      text: "256",
+      fg: RGBA.fromValues(1, 0, 0, 1), // Red
+      bg: RGBA.fromValues(0, 0, 0, 0),
+      attributes: 0,
+      width: 3,
+    }
+    expect(spanToAnsi(span, 2, themeBg)).toMatchInlineSnapshot(`"\x1B[38;5;196m256\x1B[0m"`)
+  })
+
+  test("16 colors (level 1)", () => {
+    const span: CapturedSpan = {
+      text: "basic",
+      fg: RGBA.fromValues(1, 0, 0, 1), // Red -> bright red
+      bg: RGBA.fromValues(0, 0, 0, 0),
+      attributes: 0,
+      width: 5,
+    }
+    expect(spanToAnsi(span, 1, themeBg)).toMatchInlineSnapshot(`"\x1B[31mbasic\x1B[0m"`)
+  })
+
+  test("bold attribute", () => {
+    const span: CapturedSpan = {
+      text: "bold",
+      fg: RGBA.fromValues(1, 1, 1, 1),
+      bg: RGBA.fromValues(0, 0, 0, 0),
+      attributes: 1, // BOLD
+      width: 4,
+    }
+    expect(spanToAnsi(span, 3, themeBg)).toMatchInlineSnapshot(`"\x1B[38;2;255;255;255;1mbold\x1B[0m"`)
+  })
+
+  test("multiple attributes (bold + italic + underline)", () => {
+    const span: CapturedSpan = {
+      text: "fancy",
+      fg: RGBA.fromValues(1, 1, 1, 1),
+      bg: RGBA.fromValues(0, 0, 0, 0),
+      attributes: 1 | 4 | 8, // BOLD | ITALIC | UNDERLINE
+      width: 5,
+    }
+    expect(spanToAnsi(span, 3, themeBg)).toMatchInlineSnapshot(`"\x1B[38;2;255;255;255;1;3;4mfancy\x1B[0m"`)
+  })
+
+  test("transparent foreground returns plain text", () => {
+    const span: CapturedSpan = {
+      text: "transparent",
+      fg: RGBA.fromValues(1, 1, 1, 0), // Fully transparent
+      bg: RGBA.fromValues(0, 0, 0, 0),
+      attributes: 0,
+      width: 11,
+    }
+    expect(spanToAnsi(span, 3, themeBg)).toMatchInlineSnapshot(`"transparent"`)
+  })
+
+  test("alpha blending with background", () => {
+    const span: CapturedSpan = {
+      text: "blend",
+      fg: RGBA.fromValues(1, 1, 1, 0.5), // 50% white on black bg = gray
+      bg: RGBA.fromValues(0, 0, 0, 0),
+      attributes: 0,
+      width: 5,
+    }
+    expect(spanToAnsi(span, 3, themeBg)).toMatchInlineSnapshot(`"\x1B[38;2;128;128;128mblend\x1B[0m"`)
+  })
+})
+
+describe("frameToAnsi", () => {
+  test("single line frame", () => {
+    const frame: CapturedFrame = {
+      cols: 10,
+      rows: 1,
+      cursor: [0, 0],
+      lines: [
+        {
+          spans: [
+            { text: "hello", fg: RGBA.fromValues(1, 0, 0, 1), bg: RGBA.fromValues(0, 0, 0, 0), attributes: 0, width: 5 },
+          ],
+        },
+      ],
+    }
+    expect(frameToAnsi(frame, themeBg)).toMatchInlineSnapshot(`"hello"`)
+  })
+
+  test("multi-line frame", () => {
+    const frame: CapturedFrame = {
+      cols: 10,
+      rows: 2,
+      cursor: [0, 0],
+      lines: [
+        {
+          spans: [
+            { text: "line1", fg: RGBA.fromValues(1, 0, 0, 1), bg: RGBA.fromValues(0, 0, 0, 0), attributes: 0, width: 5 },
+          ],
+        },
+        {
+          spans: [
+            { text: "line2", fg: RGBA.fromValues(0, 1, 0, 1), bg: RGBA.fromValues(0, 0, 0, 0), attributes: 0, width: 5 },
+          ],
+        },
+      ],
+    }
+    expect(frameToAnsi(frame, themeBg)).toMatchInlineSnapshot(`
+"line1
+line2"
+`)
+  })
+
+  test("trims empty lines from end", () => {
+    const frame: CapturedFrame = {
+      cols: 10,
+      rows: 3,
+      cursor: [0, 0],
+      lines: [
+        {
+          spans: [
+            { text: "content", fg: RGBA.fromValues(1, 1, 1, 1), bg: RGBA.fromValues(0, 0, 0, 0), attributes: 0, width: 7 },
+          ],
+        },
+        { spans: [] }, // Empty line
+        { spans: [{ text: "   ", fg: RGBA.fromValues(1, 1, 1, 1), bg: RGBA.fromValues(0, 0, 0, 0), attributes: 0, width: 3 }] }, // Whitespace only
+      ],
+    }
+    expect(frameToAnsi(frame, themeBg)).toMatchInlineSnapshot(`"content"`)
+  })
+
+  test("preserves empty lines when trimEmptyLines is false", () => {
+    const frame: CapturedFrame = {
+      cols: 10,
+      rows: 2,
+      cursor: [0, 0],
+      lines: [
+        {
+          spans: [
+            { text: "content", fg: RGBA.fromValues(1, 1, 1, 1), bg: RGBA.fromValues(0, 0, 0, 0), attributes: 0, width: 7 },
+          ],
+        },
+        { spans: [] },
+      ],
+    }
+    expect(frameToAnsi(frame, themeBg, { trimEmptyLines: false })).toMatchInlineSnapshot(`
+"content
+"
+`)
+  })
+
+  test("multiple spans per line", () => {
+    const frame: CapturedFrame = {
+      cols: 20,
+      rows: 1,
+      cursor: [0, 0],
+      lines: [
+        {
+          spans: [
+            { text: "red", fg: RGBA.fromValues(1, 0, 0, 1), bg: RGBA.fromValues(0, 0, 0, 0), attributes: 0, width: 3 },
+            { text: " ", fg: RGBA.fromValues(1, 1, 1, 1), bg: RGBA.fromValues(0, 0, 0, 0), attributes: 0, width: 1 },
+            { text: "green", fg: RGBA.fromValues(0, 1, 0, 1), bg: RGBA.fromValues(0, 0, 0, 0), attributes: 0, width: 5 },
+          ],
+        },
+      ],
+    }
+    expect(frameToAnsi(frame, themeBg)).toMatchInlineSnapshot(`"red green"`)
+  })
+})