critique 0.1.46 → 0.1.49

package/CHANGELOG.md

@@ -1,8 +1,38 @@
+# 0.1.49
+
+- Add copy selection on mouseup: text selected with the mouse is automatically copied to clipboard when released
+  - Works across all TUI modes (diff viewer, review, loading states)
+  - Uses native clipboard commands (pbcopy, xclip, wl-copy) with OSC52 fallback for SSH
+  - New `useCopySelection` hook in `src/hooks/use-copy-selection.ts`
+- Disable click-to-scroll on directory tree files (conflicts with copy selection)
+
+# 0.1.48
+
+- Web rendering improvements:
+  - Fix review height estimation to use same row multiplier as regular diff capture (prevents scrollbars)
+  - Fix diagram wrapping by passing `renderer` prop to enable custom `renderNode` with `wrapMode: "none"`
+  - Remove `ghostty-opentui` dependency, use opentui test renderer directly for HTML generation
+- `review` command:
+  - Diagram code blocks (`lang="diagram"`) now use `wrapMode: "none"` to prevent line wrapping
+  - Added `flexShrink: 0` and `overflow: "hidden"` to diagram line boxes
+- Internal: Remove `web-render` and `review-web-render` CLI subcommands (replaced by test renderer approach)
+
+# 0.1.47
+
+- Add vim-style keyboard navigation:
+  - `G` (Shift+g) - scroll to bottom
+  - `gg` (double-tap g) - scroll to top
+  - `Ctrl+D` - half page down
+  - `Ctrl+U` - half page up
+- `review` command: change debug console toggle from `Ctrl+D` to `Ctrl+Z` (consistent with main viewer)
+- Fix theme loading on Windows by using `fileURLToPath` for proper path conversion
+
 # 0.1.46
 
 - Add directory tree view at top of diff TUIs (default, review, web commands)
 - Switch opentui packages to npm releases (from pkg.pr.new preview URLs)
 - Add missing `marked` dependency
+- Fix Q and Escape keys not working to exit when there are no changes to display (fixes #16)
 
 # 0.1.45
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "critique",
   "module": "src/diff.tsx",
   "type": "module",
-  "version": "0.1.46",
+  "version": "0.1.49",
   "private": false,
   "bin": "./src/cli.tsx",
   "scripts": {
@@ -22,22 +22,17 @@
     "wrangler": "^4.19.1"
   },
   "dependencies": {
-    "@agentclientprotocol/sdk": "^0.12.0",
+    "@agentclientprotocol/sdk": "^0.13.1",
     "@clack/prompts": "1.0.0-alpha.9",
-    "@opentui/core": "^0",
-    "@opentui/react": "^0",
-    "@parcel/watcher": "^2.5.1",
+    "@opentui/core": "^0.1.75",
+    "@opentui/react": "^0.1.75",
+    "@parcel/watcher": "^2.5.6",
     "cac": "^6.7.14",
     "diff": "^8.0.2",
-    "ghostty-opentui": "^1.3.12",
     "js-yaml": "^4.1.1",
     "marked": "^17.0.1",
     "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/scripts/preview-review.tsx

@@ -9,7 +9,7 @@ import * as React from "react"
 import { ReviewApp, ReviewAppView } from "../src/review/review-app.tsx"
 import { createHunk } from "../src/review/hunk-parser.ts"
 import type { ReviewYaml } from "../src/review/types.ts"
-import { captureResponsiveHtml, uploadHtml } from "../src/web-utils.ts"
+import { captureReviewResponsiveHtml, uploadHtml } from "../src/web-utils.ts"
 import fs from "fs"
 import { tmpdir } from "os"
 import { join } from "path"
@@ -210,21 +210,19 @@ All tests pass and coverage is at 95%.`,
 }
 
 async function main() {
-  // Web mode: capture and upload HTML, then open in browser
+  // Web mode: capture and upload HTML using test renderer
   if (webMode) {
     console.log("Capturing preview...")
     
-    const scriptPath = import.meta.path
-    const { htmlDesktop, htmlMobile } = await captureResponsiveHtml(
-      ["run", scriptPath, "--capture"],
-      {
-        desktopCols: 200,
-        mobileCols: 80,
-        baseRows: 200,
-        themeName: "github",
-        title: "Review Preview",
-      }
-    )
+    const { htmlDesktop, htmlMobile } = await captureReviewResponsiveHtml({
+      hunks: exampleHunks,
+      reviewData: exampleReviewData,
+      desktopCols: 200,
+      mobileCols: 80,
+      baseRows: 200,
+      themeName: "github",
+      title: "Review Preview",
+    })
 
     console.log("Uploading...")
     const result = await uploadHtml(htmlDesktop, htmlMobile)

package/src/ansi-html.ts

@@ -1,20 +1,17 @@
-// ANSI terminal output to HTML converter for web preview generation.
-// Uses ghostty-opentui to parse PTY output and generates responsive HTML documents
+// Terminal output to HTML converter for web preview generation.
+// Uses opentui's test renderer to capture structured span data and generates responsive HTML documents
 // with proper font scaling to fit terminal content within viewport width.
 
-import { ptyToJson, StyleFlags, type TerminalData, type TerminalLine, type TerminalSpan } from "ghostty-opentui"
+import { TextAttributes, rgbToHex, type RGBA } from "@opentui/core"
+import type { CapturedFrame, CapturedLine, CapturedSpan } from "@opentui/core"
 
-export interface AnsiToHtmlOptions {
-  cols?: number
-  rows?: number
+export interface ToHtmlOptions {
   /** Background color for the container */
   backgroundColor?: string
   /** Text color for the container */
   textColor?: string
   /** Font family for the output */
   fontFamily?: string
-  /** Font size for the output */
-  fontSize?: string
   /** Trim empty lines from the end */
   trimEmptyLines?: boolean
   /** Enable auto light/dark mode based on system preference */
@@ -34,34 +31,45 @@ function escapeHtml(text: string): string {
     .replace(/"/g, """)
 }
 
+/**
+ * Convert RGBA to hex string, returning null for transparent colors
+ */
+function rgbaToHexOrNull(rgba: RGBA): string | null {
+  if (rgba.a === 0) return null
+  return rgbToHex(rgba)
+}
+
 /**
  * Convert a single span to HTML
  * Always wraps in span for consistent inline-block sizing
  */
-function spanToHtml(span: TerminalSpan): string {
+function spanToHtml(span: CapturedSpan): string {
   const styles: string[] = []
   
-  if (span.fg) {
-    styles.push(`color:${span.fg}`)
+  const fg = rgbaToHexOrNull(span.fg)
+  const bg = rgbaToHexOrNull(span.bg)
+  
+  if (fg) {
+    styles.push(`color:${fg}`)
   }
-  if (span.bg) {
-    styles.push(`background-color:${span.bg}`)
+  if (bg) {
+    styles.push(`background-color:${bg}`)
   }
   
-  // Handle style flags
-  if (span.flags & StyleFlags.BOLD) {
+  // Handle style flags using TextAttributes
+  if (span.attributes & TextAttributes.BOLD) {
     styles.push("font-weight:bold")
   }
-  if (span.flags & StyleFlags.ITALIC) {
+  if (span.attributes & TextAttributes.ITALIC) {
     styles.push("font-style:italic")
   }
-  if (span.flags & StyleFlags.UNDERLINE) {
+  if (span.attributes & TextAttributes.UNDERLINE) {
     styles.push("text-decoration:underline")
   }
-  if (span.flags & StyleFlags.STRIKETHROUGH) {
+  if (span.attributes & TextAttributes.STRIKETHROUGH) {
     styles.push("text-decoration:line-through")
   }
-  if (span.flags & StyleFlags.FAINT) {
+  if (span.attributes & TextAttributes.DIM) {
     styles.push("opacity:0.5")
   }
   
@@ -78,7 +86,7 @@ function spanToHtml(span: TerminalSpan): string {
 /**
  * Convert a single line to HTML
  */
-function lineToHtml(line: TerminalLine): string {
+function lineToHtml(line: CapturedLine): string {
   if (line.spans.length === 0) {
     return ""
   }
@@ -88,22 +96,20 @@ function lineToHtml(line: TerminalLine): string {
 /**
  * Check if a line is empty (no spans or only whitespace content)
  */
-function isLineEmpty(line: TerminalLine): boolean {
+function isLineEmpty(line: CapturedLine): boolean {
   if (line.spans.length === 0) return true
   // Check if all spans contain only whitespace
   return line.spans.every(span => span.text.trim() === "")
 }
 
 /**
- * Converts ANSI terminal output to styled HTML.
- * Uses ptyToJson for parsing and renders HTML line by line.
+ * Converts captured frame to styled HTML.
+ * Renders HTML line by line from the CapturedFrame structure.
  */
-export function ansiToHtml(input: string | Buffer, options: AnsiToHtmlOptions = {}): string {
-  const { cols = 500, rows = 256, trimEmptyLines = true } = options
-
-  const data = ptyToJson(input, { cols, rows })
+export function frameToHtml(frame: CapturedFrame, options: ToHtmlOptions = {}): string {
+  const { trimEmptyLines = true } = options
 
-  let lines = data.lines
+  let lines = frame.lines
 
   // Trim empty lines from the end
   if (trimEmptyLines) {
@@ -113,7 +119,7 @@ export function ansiToHtml(input: string | Buffer, options: AnsiToHtmlOptions =
   }
 
   // Render each line as a div
-  const htmlLines = lines.map((line, idx) => {
+  const htmlLines = lines.map((line) => {
     const content = lineToHtml(line)
     // Use a div for each line to ensure proper line breaks
     // Empty lines get a span with nbsp for consistent flex behavior
@@ -124,21 +130,21 @@ export function ansiToHtml(input: string | Buffer, options: AnsiToHtmlOptions =
 }
 
 /**
- * Generates a complete HTML document from ANSI input.
+ * Generates a complete HTML document from captured frame.
  * Includes proper styling for terminal output display.
  * Font size automatically adjusts to fit content within viewport.
  */
-export function ansiToHtmlDocument(input: string | Buffer, options: AnsiToHtmlOptions = {}): string {
+export function frameToHtmlDocument(frame: CapturedFrame, options: ToHtmlOptions = {}): string {
   const {
-    cols = 500,
     backgroundColor = "#ffffff",
     textColor = "#1a1a1a",
     fontFamily = "'JetBrains Mono Nerd', 'JetBrains Mono', 'Fira Code', Monaco, Menlo, 'Ubuntu Mono', Consolas, monospace",
-    fontSize = "14px",
     title = "Critique Diff",
   } = options
 
-  const content = ansiToHtml(input, options)
+  const cols = frame.cols
+
+  const content = frameToHtml(frame, options)
 
   return `<!DOCTYPE html>
 <html>
@@ -234,4 +240,4 @@ ${content}
 </html>`
 }
 
-export type { TerminalData }
+export type { CapturedFrame, CapturedLine, CapturedSpan }