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

critique 0.1.8 → 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 (11) hide show

package/AGENTS.md +6 -1
package/CHANGELOG.md +33 -0
package/README.md +17 -0
package/package.json +1 -1
package/src/ansi-html.ts +23 -5
package/src/cli.tsx +157 -94
package/src/themes/github-light.json +56 -0
package/src/themes/opencode-light.json +62 -0
package/src/themes/opencode.json +2 -2
package/src/themes.ts +70 -64
package/src/worker.ts +58 -5

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,36 @@
+# 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:
+  - 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/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.8",
+  "version": "0.1.10",
   "private": false,
   "bin": "./src/cli.tsx",
   "scripts": {

package/src/ansi-html.ts CHANGED Viewed

@@ -5,12 +5,16 @@ 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 */
   fontSize?: string
   /** Trim empty lines from the end */
   trimEmptyLines?: boolean
+  /** Enable auto light/dark mode based on system preference */
+  autoTheme?: boolean
 }
 /**
@@ -121,7 +125,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,10 +155,13 @@ 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;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
 }
 body {
   display: flex;
@@ -169,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>
@@ -192,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

@@ -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
@@ -553,26 +562,39 @@ 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 { 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 +658,7 @@ cli
           fetchDiff();
+          // Set up file watching only if --watch flag is used
           if (!shouldWatch) {
             return;
           }
@@ -646,21 +669,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 +732,6 @@ cli
         return <App parsedFiles={parsedFiles} />;
       }
-      const renderer = await createCliRenderer({
-        onDestroy() {
-          process.exit(0);
-        },
-        exitOnCtrlC: true,
-      });
       createRoot(renderer).render(
         React.createElement(
           ErrorBoundary,
@@ -991,33 +1013,48 @@ 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(
     "--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)")
-  .action(async (ref, options) => {
+  .option("--theme <name>", "Theme to use for rendering")
+  .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 cols = parseInt(options.cols) || 240;
+    const desktopCols = parseInt(options.cols) || 240;
+    const mobileCols = parseInt(options.mobileCols) || 100;
+    const customTheme = options.theme && themeNames.includes(options.theme);
+    const themeName = customTheme ? options.theme : defaultThemeName;
     console.log("Capturing diff output...");
@@ -1034,7 +1071,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 +1080,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, autoTheme: !customTheme });
     }
-    // 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 +1169,7 @@ cli
               ? "start"
               : "xdg-open";
         try {
-          await execAsync(`${openCmd} "${htmlFile}"`);
+          await execAsync(`${openCmd} "${htmlFileDesktop}"`);
         } catch {
           console.log("Could not open browser automatically");
         }
@@ -1130,7 +1185,7 @@ cli
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ html }),
+        body: JSON.stringify({ html: htmlDesktop, htmlMobile }),
       });
       if (!response.ok) {
@@ -1162,7 +1217,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 +1230,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 +1305,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 +1352,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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/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

@@ -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,7 +235,7 @@ export function getSyntaxTheme(
   };
 }
-export const themeNames = Object.keys(DEFAULT_THEMES).sort();
+export const themeNames = Object.keys(THEME_FILES).sort();
 export const defaultThemeName = "github";

package/src/worker.ts CHANGED Viewed

@@ -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