critique 0.1.11 → 0.1.13

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# 0.1.13
+
+- Docs:
+  - Enhance web preview section in README
+  - Add `/v/` short URL alias documentation
+
+# 0.1.12
+
+- Web preview:
+  - Add client-side mobile detection with redirect to `?v=mobile`
+  - Simplify worker: redirect mobile devices instead of content negotiation
+  - Remove `Vary` header - URL now determines content, better caching
+  - Increase cache max-age to 24h (was 1h)
+
 # 0.1.11
 
 - All commands:

package/README.md

@@ -86,7 +86,13 @@ Use the interactive UI to select files. Selected files are immediately applied a
 
 ### Web Preview
 
-Generate a shareable web preview of your diff that you can send to anyone - no installation required:
+Generate a shareable web preview of your diff that you can send to anyone - no installation required.
+
+**Example:** [critique.work/v/b8faf4362c247bfc46f5098a028e00f0](https://critique.work/v/b8faf4362c247bfc46f5098a028e00f0)
+
+Great for background agents that can't render terminal UIs, like [kimaki.xyz](https://kimaki.xyz) which runs OpenCode in Discord.
+
+![Web Preview](screenshot-web.png)
 
 ```bash
 # Upload to critique.work and get a shareable URL
@@ -95,29 +101,32 @@ critique web
 # View staged changes
 critique web --staged
 
-# View the last commit (works whether pushed or unpushed)
+# View the last commit
 critique web HEAD
 
 # View a specific commit
 critique web --commit HEAD~1
 
-# View combined changes from last N commits
-critique web HEAD~3 HEAD
+# Compare branches (PR-style diff)
+critique web main feature-branch
+
+# Filter specific files
+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
-
-# Adjust rendering size (use ~100 cols for mobile-friendly output)
-critique web --cols 100 --rows 2000
 ```
 
-**How it works:**
+**Features:**
 
-1. Captures the terminal UI output using a PTY (pseudo-terminal)
-2. Converts ANSI escape codes to styled HTML with syntax highlighting
-3. Uploads the HTML to [critique.work](https://critique.work) (Cloudflare Worker + KV storage)
-4. Returns a shareable URL that expires after 7 days
-5. Automatically opens the preview in your browser
+- **Mobile optimized** - Automatically detects mobile devices and serves a unified diff view optimized for smaller screens. Add `?v=mobile` to any URL to force mobile view.
+- **Dark/Light mode** - Automatically adapts to your system's color scheme preference using CSS `prefers-color-scheme`.
+- **Syntax highlighting** - Full syntax highlighting for 18+ languages, same as the terminal UI.
+- **Split view** - Side-by-side diff on desktop, unified view on mobile.
+- **Fast loading** - HTML is streamed for quick initial render, cached for 24 hours.
 
 **Options:**
 
@@ -126,14 +135,24 @@ critique web --cols 100 --rows 2000
 | `--staged` | Show staged changes | - |
 | `--commit <ref>` | Show changes from a specific commit | - |
 | `--cols <n>` | Terminal width for rendering | `240` |
-| `--rows <n>` | Terminal height for rendering | `2000` |
+| `--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) | - |
+
+**How it works:**
+
+1. Captures the terminal UI output using a PTY (pseudo-terminal)
+2. Converts ANSI escape codes to styled HTML with syntax highlighting
+3. Generates both desktop (240 cols, split view) and mobile (100 cols, unified view) versions
+4. Uploads to [critique.work](https://critique.work) (Cloudflare Worker + KV storage)
+5. Returns a shareable URL that expires after 7 days
 
 **Tips:**
 
-- Use `--cols 100` for mobile-friendly output (switches to unified diff view instead of split view)
 - The URL is based on a SHA-256 hash of the content, so identical diffs produce the same URL (deduplication)
+- Use `?v=desktop` or `?v=mobile` query params to force a specific version
 - If upload fails, critique automatically saves the HTML locally as a fallback
 
 ## Features

package/package.json

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

package/src/ansi-html.ts

@@ -204,6 +204,17 @@ ${content}
   const minFontSize = 4;
   const maxFontSize = 16;
 
+  // Redirect mobile devices to ?v=mobile for optimized view
+  // Only redirect if not already on a forced version
+  const params = new URLSearchParams(window.location.search);
+  if (!params.has('v')) {
+    const isMobile = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Opera M(obi|ini)|Windows Phone|webOS/i.test(navigator.userAgent);
+    if (isMobile) {
+      params.set('v', 'mobile');
+      window.location.replace(window.location.pathname + '?' + params.toString());
+    }
+  }
+
   function adjustFontSize() {
     const viewportWidth = window.innerWidth;
     const calculatedSize = (viewportWidth - padding) / (cols * charRatio);

package/src/worker.ts

@@ -80,7 +80,7 @@ app.post("/upload", async (c) => {
     }
 
     const url = new URL(c.req.url)
-    const viewUrl = `${url.origin}/view/${id}`
+    const viewUrl = `${url.origin}/v/${id}`
 
     return c.json({ id, url: viewUrl })
   } catch (error) {
@@ -89,21 +89,31 @@ app.post("/upload", async (c) => {
 })
 
 // View HTML content with streaming
-// GET /view/:id
-// Query params: ?v=desktop or ?v=mobile to force a version
-app.get("/view/:id", async (c) => {
+// GET /v/:id (short) or /view/:id (legacy)
+// Query params: ?v=desktop or ?v=mobile to select version
+// Server redirects mobile devices to ?v=mobile, client JS also handles redirect
+async function handleView(c: any) {
   const id = c.req.param("id")
 
   if (!id || !/^[a-f0-9]{16,32}$/.test(id)) {
     return c.text("Invalid ID", 400)
   }
 
-  // Check for forced version via query param
-  const forcedVersion = c.req.query("v")
-  const isMobile = forcedVersion === "mobile" || (forcedVersion !== "desktop" && isMobileDevice(c))
+  // Check for version query param
+  const version = c.req.query("v")
+  
+  // If no version specified and mobile device detected, redirect to ?v=mobile
+  // This is a fallback - client JS also handles this redirect
+  if (!version && isMobileDevice(c)) {
+    const url = new URL(c.req.url)
+    url.searchParams.set("v", "mobile")
+    return c.redirect(url.toString(), 302)
+  }
 
-  // Try to get the appropriate version
+  // Serve the appropriate version based on query param
+  const isMobile = version === "mobile"
   let html: string | null = null
+  
   if (isMobile) {
     // Try mobile version first, fall back to desktop
     html = await c.env.CRITIQUE_KV.get(`${id}-mobile`)
@@ -120,11 +130,9 @@ app.get("/view/:id", async (c) => {
 
   // Stream the HTML content for faster initial load
   return stream(c, async (s) => {
-    // Set content type header
     c.header("Content-Type", "text/html; charset=utf-8")
-    // Vary by User-Agent and Sec-CH-UA-Mobile for proper caching
-    c.header("Vary", "User-Agent, Sec-CH-UA-Mobile")
-    c.header("Cache-Control", "public, max-age=3600")
+    // Cache is now safe - URL determines content, no Vary needed
+    c.header("Cache-Control", "public, max-age=86400")
 
     // Stream in chunks for better performance
     const chunkSize = 16 * 1024 // 16KB chunks
@@ -136,7 +144,10 @@ app.get("/view/:id", async (c) => {
       offset += chunkSize
     }
   })
-})
+}
+
+app.get("/v/:id", handleView)
+app.get("/view/:id", handleView)
 
 // Get raw HTML content (for debugging/API access)
 // GET /raw/:id
@@ -159,8 +170,8 @@ app.get("/raw/:id", async (c) => {
 })
 
 // Check if content exists
-// HEAD /view/:id
-app.on("HEAD", "/view/:id", async (c) => {
+// HEAD /v/:id or /view/:id
+async function handleHead(c: any) {
   const id = c.req.param("id")
 
   if (!id || !/^[a-f0-9]{16,32}$/.test(id)) {
@@ -175,6 +186,9 @@ app.on("HEAD", "/view/:id", async (c) => {
 
   c.header("Content-Length", String(html.length))
   return c.body(null, 200)
-})
+}
+
+app.on("HEAD", "/v/:id", handleHead)
+app.on("HEAD", "/view/:id", handleHead)
 
 export default app