critique 0.1.8 → 0.1.9

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# 0.1.9
+
+- Performance:
+  - Lazy-load themes: Only the default (github) theme is loaded at startup; other themes load on-demand when selected
+  - Lazy-load `@parcel/watcher`: Native file watcher module is only loaded when `--watch` flag is used
+  - Parallelize `diff` module import with renderer creation
+- Web preview:
+  - Generate desktop and mobile HTML versions in parallel
+  - Add `--mobile-cols` option (default: 100) for mobile column width
+  - Add `--theme` option to specify theme for web preview
+  - Worker auto-detects mobile devices via `CF-Device-Type`, `Sec-CH-UA-Mobile`, or User-Agent regex
+  - Add `?v=desktop` / `?v=mobile` query params to force a specific version
+  - Mobile version uses more rows to accommodate line wrapping
+- Themes:
+  - Add `opencode-light` theme - light mode variant of OpenCode theme
+  - Change default theme from `github` to `opencode-light`
+  - Web preview now uses theme-aware colors (background, text, diff colors)
+  - Theme is changeable via state (press `t` in TUI to pick theme)
+
 # 0.1.8
 
 - Web preview:

package/package.json

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

package/src/ansi-html.ts

@@ -5,6 +5,8 @@ export interface AnsiToHtmlOptions {
   rows?: number
   /** 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 */
@@ -121,7 +123,8 @@ export function ansiToHtml(input: string | Buffer, options: AnsiToHtmlOptions =
 export function ansiToHtmlDocument(input: string | Buffer, options: AnsiToHtmlOptions = {}): string {
   const {
     cols = 500,
-    backgroundColor = "#0f0f0f",
+    backgroundColor = "#ffffff",
+    textColor = "#1a1a1a",
     fontFamily = "Monaco, Menlo, 'Ubuntu Mono', Consolas, monospace",
     fontSize = "14px",
   } = options
@@ -150,7 +153,7 @@ html, body {
   max-width: 100vw;
   overflow-x: hidden;
   background-color: ${backgroundColor};
-  color: #c5c8c6;
+  color: ${textColor};
   font-family: ${fontFamily};
   font-size: ${fontSize};
   line-height: 1.6;

package/src/cli.tsx

@@ -20,13 +20,22 @@ import { tmpdir, homedir } from "os";
 import { join } from "path";
 import { create } from "zustand";
 import Dropdown from "./dropdown.tsx";
-import * as watcher from "@parcel/watcher";
 import { debounce } from "./utils.ts";
+
+// Lazy-load watcher only when --watch is used
+let watcherModule: typeof import("@parcel/watcher") | null = null;
+async function getWatcher() {
+  if (!watcherModule) {
+    watcherModule = await import("@parcel/watcher");
+  }
+  return watcherModule;
+}
 import {
   getSyntaxTheme,
   getResolvedTheme,
   themeNames,
   defaultThemeName,
+  rgbaToHex,
 } from "./themes.ts";
 
 // State persistence
@@ -569,10 +578,20 @@ cli
         return `git add -N . && git diff --no-prefix ${contextArg}`.trim();
       })();
 
-      const { parsePatch, formatPatch } = await import("diff");
-
       const shouldWatch = options.watch && !base && !head && !options.commit;
 
+      // Parallelize diff module loading with renderer creation
+      const [diffModule, renderer] = await Promise.all([
+        import("diff"),
+        createCliRenderer({
+          onDestroy() {
+            process.exit(0);
+          },
+          exitOnCtrlC: true,
+        }),
+      ]);
+      const { parsePatch, formatPatch } = diffModule;
+
       function AppWithWatch() {
         const [parsedFiles, setParsedFiles] = React.useState<
           ParsedFile[] | null
@@ -636,6 +655,7 @@ cli
 
           fetchDiff();
 
+          // Set up file watching only if --watch flag is used
           if (!shouldWatch) {
             return;
           }
@@ -646,21 +666,26 @@ cli
             fetchDiff();
           }, 200);
 
-          let subscription: watcher.AsyncSubscription | undefined;
+          let subscription:
+            | Awaited<ReturnType<typeof import("@parcel/watcher").subscribe>>
+            | undefined;
 
-          watcher
-            .subscribe(cwd, (err, events) => {
-              if (err) {
-                return;
-              }
+          // Lazy-load watcher module only when watching
+          getWatcher().then((watcher) => {
+            watcher
+              .subscribe(cwd, (err, events) => {
+                if (err) {
+                  return;
+                }
 
-              if (events.length > 0) {
-                debouncedFetch();
-              }
-            })
-            .then((sub) => {
-              subscription = sub;
-            });
+                if (events.length > 0) {
+                  debouncedFetch();
+                }
+              })
+              .then((sub) => {
+                subscription = sub;
+              });
+          });
 
           return () => {
             if (subscription) {
@@ -704,12 +729,6 @@ cli
         return <App parsedFiles={parsedFiles} />;
       }
 
-      const renderer = await createCliRenderer({
-        onDestroy() {
-          process.exit(0);
-        },
-        exitOnCtrlC: true,
-      });
       createRoot(renderer).render(
         React.createElement(
           ErrorBoundary,
@@ -996,13 +1015,18 @@ cli
   .option("--commit <ref>", "Show changes from a specific commit")
   .option(
     "--cols <cols>",
-    "Number of columns for rendering (use ~100 for mobile)",
+    "Number of columns for desktop rendering",
     { default: 240 },
   )
-  
+  .option(
+    "--mobile-cols <cols>",
+    "Number of columns for mobile rendering",
+    { default: 100 },
+  )
   .option("--local", "Save local preview instead of uploading")
   .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) => {
     const pty = await import("@xmorse/bun-pty");
     const { ansiToHtmlDocument } = await import("./ansi-html.ts");
@@ -1017,7 +1041,11 @@ cli
       return `git add -N . && git diff --no-prefix ${contextArg}`.trim();
     })();
 
-    const cols = parseInt(options.cols) || 240;
+    const desktopCols = parseInt(options.cols) || 240;
+    const mobileCols = parseInt(options.mobileCols) || 100;
+    const themeName = options.theme && themeNames.includes(options.theme) 
+      ? options.theme 
+      : defaultThemeName;
 
     console.log("Capturing diff output...");
 
@@ -1034,7 +1062,7 @@ cli
     // Calculate required rows from diff content
     const { parsePatch } = await import("diff");
     const files = parsePatch(gitDiff);
-    const renderRows = files.reduce((sum, file) => {
+    const baseRenderRows = 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
@@ -1043,67 +1071,85 @@ cli
     const diffFile = join(tmpdir(), `critique-web-diff-${Date.now()}.patch`);
     fs.writeFileSync(diffFile, gitDiff);
 
-    // Spawn the TUI in a PTY to capture ANSI output
-    let ansiOutput = "";
-    const ptyProcess = pty.spawn(
-      "bun",
-      [
-        process.argv[1]!, // path to cli.tsx
-        "web-render",
-        diffFile,
-        "--cols",
-        String(cols),
-        "--rows",
-        String(renderRows),
-      ],
-      {
-        name: "xterm-256color",
-        cols: cols,
-        rows: renderRows,
-
-        cwd: process.cwd(),
-        env: { ...process.env, TERM: "xterm-256color" } as Record<
-          string,
-          string
-        >,
-      },
-    );
+    // Helper function to capture PTY output for a given column width
+    async function captureHtml(cols: number, renderRows: number): Promise<string> {
+      let ansiOutput = "";
+      const ptyProcess = pty.spawn(
+        "bun",
+        [
+          process.argv[1]!, // path to cli.tsx
+          "web-render",
+          diffFile,
+          "--cols",
+          String(cols),
+          "--rows",
+          String(renderRows),
+          "--theme",
+          themeName,
+        ],
+        {
+          name: "xterm-256color",
+          cols: cols,
+          rows: renderRows,
+          cwd: process.cwd(),
+          env: { ...process.env, TERM: "xterm-256color" } as Record<
+            string,
+            string
+          >,
+        },
+      );
 
-    ptyProcess.onData((data: string) => {
-      ansiOutput += data;
-    });
+      ptyProcess.onData((data: string) => {
+        ansiOutput += data;
+      });
 
-    await new Promise<void>((resolve) => {
-      ptyProcess.onExit(() => {
-        resolve();
+      await new Promise<void>((resolve) => {
+        ptyProcess.onExit(() => {
+          resolve();
+        });
       });
-    });
 
-    // Clean up temp file
-    fs.unlinkSync(diffFile);
+      if (!ansiOutput.trim()) {
+        throw new Error("No output captured");
+      }
 
-    if (!ansiOutput.trim()) {
-      console.log("No output captured");
-      process.exit(1);
-    }
+      // Strip terminal cleanup sequences that clear the screen
+      const clearIdx = ansiOutput.lastIndexOf("\x1b[H\x1b[J");
+      if (clearIdx > 0) {
+        ansiOutput = ansiOutput.slice(0, clearIdx);
+      }
 
-    console.log("Converting to HTML...");
+      // Get theme colors for HTML output
+      const theme = getResolvedTheme(themeName);
+      const backgroundColor = rgbaToHex(theme.background);
+      const textColor = rgbaToHex(theme.text);
 
-    // Strip terminal cleanup sequences that clear the screen
-    // The renderer outputs \x1b[H\x1b[J (cursor home + clear to end) on exit
-    const clearIdx = ansiOutput.lastIndexOf("\x1b[H\x1b[J");
-    if (clearIdx > 0) {
-      ansiOutput = ansiOutput.slice(0, clearIdx);
+      return ansiToHtmlDocument(ansiOutput, { cols, rows: renderRows, backgroundColor, textColor });
     }
 
-    // Convert ANSI to HTML document
-    const html = ansiToHtmlDocument(ansiOutput, { cols, rows: renderRows });
+    // Generate desktop and mobile versions in parallel
+    // Mobile needs more rows since lines wrap more with fewer columns
+    const mobileRenderRows = Math.ceil(baseRenderRows * (desktopCols / mobileCols));
+    console.log("Generating desktop and mobile versions in parallel...");
+    const [htmlDesktop, htmlMobile] = await Promise.all([
+      captureHtml(desktopCols, baseRenderRows),
+      captureHtml(mobileCols, mobileRenderRows),
+    ]);
+
+    // Clean up temp file
+    fs.unlinkSync(diffFile);
+
+    console.log("Converting to HTML...");
 
     if (options.local) {
       // Save locally
-      const htmlFile = join(tmpdir(), `critique-${Date.now()}.html`);
-      fs.writeFileSync(htmlFile, html);
-      console.log(`Saved to: ${htmlFile}`);
+      const timestamp = Date.now();
+      const htmlFileDesktop = join(tmpdir(), `critique-${timestamp}-desktop.html`);
+      const htmlFileMobile = join(tmpdir(), `critique-${timestamp}-mobile.html`);
+      fs.writeFileSync(htmlFileDesktop, htmlDesktop);
+      fs.writeFileSync(htmlFileMobile, htmlMobile);
+      console.log(`Saved desktop to: ${htmlFileDesktop}`);
+      console.log(`Saved mobile to: ${htmlFileMobile}`);
 
       // Open in browser if requested
       if (options.open) {
@@ -1114,7 +1160,7 @@ cli
               ? "start"
               : "xdg-open";
         try {
-          await execAsync(`${openCmd} "${htmlFile}"`);
+          await execAsync(`${openCmd} "${htmlFileDesktop}"`);
         } catch {
           console.log("Could not open browser automatically");
         }
@@ -1130,7 +1176,7 @@ cli
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ html }),
+        body: JSON.stringify({ html: htmlDesktop, htmlMobile }),
       });
 
       if (!response.ok) {
@@ -1162,7 +1208,7 @@ cli
 
       // Fallback to local file
       const htmlFile = join(tmpdir(), `critique-${Date.now()}.html`);
-      fs.writeFileSync(htmlFile, html);
+      fs.writeFileSync(htmlFile, htmlDesktop);
       console.log(`\nFallback: Saved locally to ${htmlFile}`);
       process.exit(1);
     }
@@ -1175,9 +1221,13 @@ cli
   })
   .option("--cols <cols>", "Terminal columns", { default: 120 })
   .option("--rows <rows>", "Terminal rows", { default: 1000 })
+  .option("--theme <name>", "Theme to use for rendering")
   .action(async (diffFile: string, options) => {
     const cols = parseInt(options.cols) || 120;
     const rows = parseInt(options.rows) || 1000;
+    const themeName = options.theme && themeNames.includes(options.theme)
+      ? options.theme
+      : defaultThemeName;
 
     const { parsePatch, formatPatch } = await import("diff");
 
@@ -1246,7 +1296,11 @@ cli
     const useSplitView = cols >= 150;
 
     // Static component - no hooks that cause re-renders
-    const webBg = getResolvedTheme(defaultThemeName).background;
+    const webTheme = getResolvedTheme(themeName);
+    const webBg = webTheme.background;
+    const webText = rgbaToHex(webTheme.text);
+    const webAddedColor = rgbaToHex(webTheme.diffAddedBg);
+    const webRemovedColor = rgbaToHex(webTheme.diffRemovedBg);
     function WebApp() {
       return (
         <box
@@ -1289,15 +1343,15 @@ cli
                     alignItems: "center",
                   }}
                 >
-                  <text>{fileName.trim()}</text>
-                  <text fg="#00ff00"> +{additions}</text>
-                  <text fg="#ff0000">-{deletions}</text>
+                  <text fg={webText}>{fileName.trim()}</text>
+                  <text fg="#2d8a47"> +{additions}</text>
+                  <text fg="#c53b53">-{deletions}</text>
                 </box>
                 <DiffView
                   diff={file.rawDiff || ""}
                   view={viewMode}
                   filetype={filetype}
-                  themeName={defaultThemeName}
+                  themeName={themeName}
                 />
               </box>
             );

package/src/themes/github-light.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "bg": "#ffffff",
+    "bgPanel": "#ffffff",
+    "bgElement": "#f0f3f6",
+    "fg": "#24292f",
+    "fgMuted": "#57606a",
+    "blue": "#0969da",
+    "green": "#1a7f37",
+    "red": "#cf222e",
+    "orange": "#bc4c00",
+    "purple": "#8250df",
+    "pink": "#bf3989",
+    "yellow": "#9a6700",
+    "cyan": "#1b7c83"
+  },
+  "theme": {
+    "primary": "blue",
+    "secondary": "purple",
+    "accent": "cyan",
+    "error": "red",
+    "warning": "yellow",
+    "success": "green",
+    "info": "orange",
+    "text": "fg",
+    "textMuted": "fgMuted",
+    "background": "bg",
+    "backgroundPanel": "bgPanel",
+    "backgroundElement": "bgElement",
+    "border": "#d0d7de",
+    "borderActive": "blue",
+    "borderSubtle": "#d8dee4",
+    "diffAdded": "green",
+    "diffRemoved": "red",
+    "diffContext": "fgMuted",
+    "diffHunkHeader": "blue",
+    "diffHighlightAdded": "#1a7f37",
+    "diffHighlightRemoved": "#cf222e",
+    "diffAddedBg": "#e6ffec",
+    "diffRemovedBg": "#fff0ee",
+    "diffContextBg": "bg",
+    "diffLineNumber": "fgMuted",
+    "diffAddedLineNumberBg": "#dafbe1",
+    "diffRemovedLineNumberBg": "#ffebe9",
+    "syntaxComment": "fgMuted",
+    "syntaxKeyword": "red",
+    "syntaxFunction": "purple",
+    "syntaxVariable": "orange",
+    "syntaxString": "blue",
+    "syntaxNumber": "cyan",
+    "syntaxType": "orange",
+    "syntaxOperator": "red",
+    "syntaxPunctuation": "fg"
+  }
+}

package/src/themes/opencode-light.json

@@ -0,0 +1,62 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "step1": "#ffffff",
+    "step2": "#fafafa",
+    "step3": "#f5f5f5",
+    "step4": "#ebebeb",
+    "step5": "#e1e1e1",
+    "step6": "#d4d4d4",
+    "step7": "#b8b8b8",
+    "step8": "#a0a0a0",
+    "step9": "#3b7dd8",
+    "step10": "#2968c3",
+    "step11": "#8a8a8a",
+    "step12": "#1a1a1a",
+    "secondary": "#7b5bb6",
+    "accent": "#d68c27",
+    "red": "#d1383d",
+    "orange": "#d68c27",
+    "green": "#3d9a57",
+    "cyan": "#318795",
+    "yellow": "#b0851f"
+  },
+  "theme": {
+    "primary": "step9",
+    "secondary": "secondary",
+    "accent": "accent",
+    "error": "red",
+    "warning": "orange",
+    "success": "green",
+    "info": "cyan",
+    "text": "step12",
+    "textMuted": "step11",
+    "background": "step1",
+    "backgroundPanel": "step1",
+    "backgroundElement": "step3",
+    "border": "step6",
+    "borderActive": "step7",
+    "borderSubtle": "step5",
+    "diffAdded": "#1e725c",
+    "diffRemoved": "#c53b53",
+    "diffContext": "#7086b5",
+    "diffHunkHeader": "#7086b5",
+    "diffHighlightAdded": "#4db380",
+    "diffHighlightRemoved": "#f52a65",
+    "diffAddedBg": "#e8f4e8",
+    "diffRemovedBg": "#fceced",
+    "diffContextBg": "step1",
+    "diffLineNumber": "step11",
+    "diffAddedLineNumberBg": "#dceadc",
+    "diffRemovedLineNumberBg": "#f5e0e1",
+    "syntaxComment": "step11",
+    "syntaxKeyword": "secondary",
+    "syntaxFunction": "step9",
+    "syntaxVariable": "red",
+    "syntaxString": "green",
+    "syntaxNumber": "orange",
+    "syntaxType": "yellow",
+    "syntaxOperator": "cyan",
+    "syntaxPunctuation": "step12"
+  }
+}

package/src/themes.ts

@@ -3,37 +3,9 @@
 
 import { parseColor, RGBA } from "@opentui/core";
 
-import aura from "./themes/aura.json";
-import ayu from "./themes/ayu.json";
-import catppuccin from "./themes/catppuccin.json";
-import catppuccinFrappe from "./themes/catppuccin-frappe.json";
-import catppuccinMacchiato from "./themes/catppuccin-macchiato.json";
-import cobalt2 from "./themes/cobalt2.json";
-import cursor from "./themes/cursor.json";
-import dracula from "./themes/dracula.json";
-import everforest from "./themes/everforest.json";
-import flexoki from "./themes/flexoki.json";
+// Only import the default theme statically for fast startup
+// Other themes are loaded on-demand when selected
 import github from "./themes/github.json";
-import gruvbox from "./themes/gruvbox.json";
-import kanagawa from "./themes/kanagawa.json";
-import lucentOrng from "./themes/lucent-orng.json";
-import material from "./themes/material.json";
-import matrix from "./themes/matrix.json";
-import mercury from "./themes/mercury.json";
-import monokai from "./themes/monokai.json";
-import nightowl from "./themes/nightowl.json";
-import nord from "./themes/nord.json";
-import oneDark from "./themes/one-dark.json";
-import opencode from "./themes/opencode.json";
-import orng from "./themes/orng.json";
-import palenight from "./themes/palenight.json";
-import rosepine from "./themes/rosepine.json";
-import solarized from "./themes/solarized.json";
-import synthwave84 from "./themes/synthwave84.json";
-import tokyonight from "./themes/tokyonight.json";
-import vercel from "./themes/vercel.json";
-import vesper from "./themes/vesper.json";
-import zenburn from "./themes/zenburn.json";
 
 type HexColor = `#${string}`;
 type RefName = string;
@@ -104,40 +76,74 @@ export interface SyntaxTheme {
   default: SyntaxThemeStyle;
 }
 
-const DEFAULT_THEMES: Record<string, ThemeJson> = {
-  aura,
-  ayu,
-  catppuccin,
-  "catppuccin-frappe": catppuccinFrappe,
-  "catppuccin-macchiato": catppuccinMacchiato,
-  cobalt2,
-  cursor,
-  dracula,
-  everforest,
-  flexoki,
-  github,
-  gruvbox,
-  kanagawa,
-  "lucent-orng": lucentOrng,
-  material,
-  matrix,
-  mercury,
-  monokai,
-  nightowl,
-  nord,
-  "one-dark": oneDark,
-  opencode,
-  orng,
-  palenight,
-  rosepine,
-  solarized,
-  synthwave84,
-  tokyonight,
-  vercel,
-  vesper,
-  zenburn,
+// Theme name to file mapping for lazy loading
+const THEME_FILES: Record<string, string> = {
+  aura: "aura.json",
+  ayu: "ayu.json",
+  catppuccin: "catppuccin.json",
+  "catppuccin-frappe": "catppuccin-frappe.json",
+  "catppuccin-macchiato": "catppuccin-macchiato.json",
+  cobalt2: "cobalt2.json",
+  cursor: "cursor.json",
+  dracula: "dracula.json",
+  everforest: "everforest.json",
+  flexoki: "flexoki.json",
+  github: "github.json",
+  "github-light": "github-light.json",
+  gruvbox: "gruvbox.json",
+  kanagawa: "kanagawa.json",
+  "lucent-orng": "lucent-orng.json",
+  material: "material.json",
+  matrix: "matrix.json",
+  mercury: "mercury.json",
+  monokai: "monokai.json",
+  nightowl: "nightowl.json",
+  nord: "nord.json",
+  "one-dark": "one-dark.json",
+  opencode: "opencode.json",
+  "opencode-light": "opencode-light.json",
+  orng: "orng.json",
+  palenight: "palenight.json",
+  rosepine: "rosepine.json",
+  solarized: "solarized.json",
+  synthwave84: "synthwave84.json",
+  tokyonight: "tokyonight.json",
+  vercel: "vercel.json",
+  vesper: "vesper.json",
+  zenburn: "zenburn.json",
 };
 
+// Cache for loaded themes
+const themeCache: Record<string, ThemeJson> = {
+  github, // Pre-loaded default theme
+};
+
+// Synchronously load a theme (themes are small JSON files)
+function loadTheme(name: string): ThemeJson {
+  if (themeCache[name]) {
+    return themeCache[name];
+  }
+  
+  const fileName = THEME_FILES[name];
+  if (!fileName) {
+    return github; // Fallback to default
+  }
+  
+  try {
+    // Use dynamic import with synchronous pattern for JSON
+    // This works because JSON imports are resolved at bundle time by Bun
+    const themePath = new URL(`./themes/${fileName}`, import.meta.url).pathname;
+    // Read file synchronously using Node fs (works in Bun)
+    const fs = require("fs");
+    const content = fs.readFileSync(themePath, "utf-8");
+    const themeJson = JSON.parse(content) as ThemeJson;
+    themeCache[name] = themeJson;
+    return themeJson;
+  } catch {
+    return github; // Fallback to default
+  }
+}
+
 function resolveTheme(
   themeJson: ThemeJson,
   mode: "dark" | "light",
@@ -198,7 +204,7 @@ export function getResolvedTheme(
   name: string,
   mode: "dark" | "light" = "dark",
 ): ResolvedTheme {
-  const themeJson = DEFAULT_THEMES[name] ?? DEFAULT_THEMES.github!;
+  const themeJson = loadTheme(name);
   return resolveTheme(themeJson, mode);
 }
 
@@ -229,9 +235,9 @@ export function getSyntaxTheme(
   };
 }
 
-export const themeNames = Object.keys(DEFAULT_THEMES).sort();
+export const themeNames = Object.keys(THEME_FILES).sort();
 
-export const defaultThemeName = "github";
+export const defaultThemeName = "github-light";
 
 // Helper to convert RGBA to hex string
 export function rgbaToHex(rgba: RGBA): string {

package/src/worker.ts

@@ -17,18 +17,47 @@ app.get("/", (c) => {
   return c.redirect("https://github.com/remorses/critique")
 })
 
+// Detect if request is from a mobile device
+function isMobileDevice(c: { req: { header: (name: string) => string | undefined } }): boolean {
+  // Check CF-Device-Type header (Cloudflare provides this on Enterprise/APO)
+  const cfDeviceType = c.req.header("CF-Device-Type")
+  if (cfDeviceType === "mobile" || cfDeviceType === "tablet") {
+    return true
+  }
+  if (cfDeviceType === "desktop") {
+    return false
+  }
+
+  // Check Sec-CH-UA-Mobile header (Chromium browsers only)
+  const secChUaMobile = c.req.header("Sec-CH-UA-Mobile")
+  if (secChUaMobile === "?1") {
+    return true
+  }
+  if (secChUaMobile === "?0") {
+    return false
+  }
+
+  // Fallback to User-Agent parsing with comprehensive regex
+  const userAgent = c.req.header("User-Agent") || ""
+  
+  // Comprehensive mobile detection regex (case-insensitive)
+  const mobileRegex = /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Silk|NetFront|Opera M(obi|ini)|Windows Phone|webOS|Fennec|Minimo|UCBrowser|UCWEB|SonyEricsson|Symbian|Nintendo|PSP|PlayStation|MIDP|CLDC|AvantGo|Maemo|PalmOS|PalmSource|DoCoMo|UP\.Browser|Blazer|Xiino|OneBrowser/i
+  
+  return mobileRegex.test(userAgent)
+}
+
 // Upload HTML content
-// POST /upload with JSON body { html: string }
+// POST /upload with JSON body { html: string, htmlMobile?: string }
 // Returns { id: string, url: string }
 app.post("/upload", async (c) => {
   try {
-    const body = await c.req.json<{ html: string }>()
+    const body = await c.req.json<{ html: string; htmlMobile?: string }>()
 
     if (!body.html || typeof body.html !== "string") {
       return c.json({ error: "Missing or invalid 'html' field" }, 400)
     }
 
-    // Generate hash of the HTML content as the key (enables caching/deduplication)
+    // Generate hash of the desktop HTML content as the key (enables caching/deduplication)
     const encoder = new TextEncoder()
     const data = encoder.encode(body.html)
     const hashBuffer = await crypto.subtle.digest("SHA-256", data)
@@ -38,11 +67,18 @@ app.post("/upload", async (c) => {
     // Use first 32 chars of hash as ID (128 bits, secure against guessing)
     const id = hashHex.slice(0, 32)
 
-    // Store in KV with 7 day expiration
+    // Store desktop version in KV with 7 day expiration
     await c.env.CRITIQUE_KV.put(id, body.html, {
       expirationTtl: 60 * 60 * 24 * 7, // 7 days
     })
 
+    // Store mobile version if provided
+    if (body.htmlMobile && typeof body.htmlMobile === "string") {
+      await c.env.CRITIQUE_KV.put(`${id}-mobile`, body.htmlMobile, {
+        expirationTtl: 60 * 60 * 24 * 7, // 7 days
+      })
+    }
+
     const url = new URL(c.req.url)
     const viewUrl = `${url.origin}/view/${id}`
 
@@ -54,6 +90,7 @@ 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) => {
   const id = c.req.param("id")
 
@@ -61,7 +98,21 @@ app.get("/view/:id", async (c) => {
     return c.text("Invalid ID", 400)
   }
 
-  const html = await c.env.CRITIQUE_KV.get(id)
+  // Check for forced version via query param
+  const forcedVersion = c.req.query("v")
+  const isMobile = forcedVersion === "mobile" || (forcedVersion !== "desktop" && isMobileDevice(c))
+
+  // Try to get the appropriate version
+  let html: string | null = null
+  if (isMobile) {
+    // Try mobile version first, fall back to desktop
+    html = await c.env.CRITIQUE_KV.get(`${id}-mobile`)
+    if (!html) {
+      html = await c.env.CRITIQUE_KV.get(id)
+    }
+  } else {
+    html = await c.env.CRITIQUE_KV.get(id)
+  }
 
   if (!html) {
     return c.text("Not found", 404)
@@ -71,6 +122,8 @@ app.get("/view/:id", async (c) => {
   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")
 
     // Stream in chunks for better performance