glassbox 0.2.7 → 0.3.0

package/dist/cli.js

@@ -87,7 +87,8 @@ var init_schema = __esm({
     id TEXT PRIMARY KEY DEFAULT 'singleton',
     sort_mode TEXT NOT NULL DEFAULT 'folder',
     risk_sort_dimension TEXT NOT NULL DEFAULT 'aggregate',
-    show_risk_scores BOOLEAN NOT NULL DEFAULT FALSE
+    show_risk_scores BOOLEAN NOT NULL DEFAULT FALSE,
+    ignore_whitespace BOOLEAN NOT NULL DEFAULT FALSE
   );
 `;
   }
@@ -142,6 +143,7 @@ async function initSchema(db2) {
   await addColumnIfMissing(db2, "ai_file_scores", "notes", "TEXT");
   await addColumnIfMissing(db2, "ai_analyses", "progress_completed", "INTEGER NOT NULL DEFAULT 0");
   await addColumnIfMissing(db2, "ai_analyses", "progress_total", "INTEGER NOT NULL DEFAULT 0");
+  await addColumnIfMissing(db2, "user_preferences", "ignore_whitespace", "BOOLEAN NOT NULL DEFAULT FALSE");
   await db2.exec(
     `UPDATE ai_analyses SET status = 'failed', error_message = 'Interrupted (server restarted)' WHERE status = 'running'`
   );
@@ -389,7 +391,7 @@ init_queries();
 init_connection();
 import { mkdirSync as mkdirSync7 } from "fs";
 import { tmpdir } from "os";
-import { join as join9, resolve as resolve2 } from "path";
+import { join as join9, resolve as resolve3 } from "path";
 
 // src/debug.ts
 var debugEnabled = false;
@@ -798,7 +800,7 @@ async function getUserPreferences() {
     ["singleton"]
   );
   if (result.rows.length === 0) {
-    return { sort_mode: "folder", risk_sort_dimension: "aggregate", show_risk_scores: false };
+    return { sort_mode: "folder", risk_sort_dimension: "aggregate", show_risk_scores: false, ignore_whitespace: false };
   }
   return result.rows[0];
 }
@@ -807,13 +809,14 @@ async function saveUserPreferences(prefs) {
   const current = await getUserPreferences();
   const merged = { ...current, ...prefs };
   await db2.query(
-    `INSERT INTO user_preferences (id, sort_mode, risk_sort_dimension, show_risk_scores)
-     VALUES ($1, $2, $3, $4)
+    `INSERT INTO user_preferences (id, sort_mode, risk_sort_dimension, show_risk_scores, ignore_whitespace)
+     VALUES ($1, $2, $3, $4, $5)
      ON CONFLICT (id) DO UPDATE SET
        sort_mode = EXCLUDED.sort_mode,
        risk_sort_dimension = EXCLUDED.risk_sort_dimension,
-       show_risk_scores = EXCLUDED.show_risk_scores`,
-    ["singleton", merged.sort_mode, merged.risk_sort_dimension, merged.show_risk_scores]
+       show_risk_scores = EXCLUDED.show_risk_scores,
+       ignore_whitespace = EXCLUDED.ignore_whitespace`,
+    ["singleton", merged.sort_mode, merged.risk_sort_dimension, merged.show_risk_scores, merged.ignore_whitespace]
   );
 }
 
@@ -1493,6 +1496,34 @@ function getFileContent(filePath, ref, cwd) {
 function getHeadCommit(cwd) {
   return execSync2("git rev-parse HEAD", { cwd, encoding: "utf-8" }).trim();
 }
+function parseModeString(modeStr) {
+  if (modeStr === "uncommitted") return { type: "uncommitted" };
+  if (modeStr === "staged") return { type: "staged" };
+  if (modeStr === "unstaged") return { type: "unstaged" };
+  if (modeStr === "all") return { type: "all" };
+  if (modeStr.startsWith("commit:")) return { type: "commit", sha: modeStr.slice(7) };
+  if (modeStr.startsWith("range:")) {
+    const parts = modeStr.slice(6).split("..");
+    return { type: "range", from: parts[0], to: parts[1] || "HEAD" };
+  }
+  if (modeStr.startsWith("branch:")) return { type: "branch", name: modeStr.slice(7) };
+  if (modeStr.startsWith("files:")) return { type: "files", patterns: modeStr.slice(6).split(",") };
+  return { type: "uncommitted" };
+}
+function getSingleFileDiff(mode, filePath, repoRoot, extraFlags = "") {
+  if (mode.type === "all") {
+    return createNewFileDiff(filePath, repoRoot);
+  }
+  const diffArgs = getDiffArgs(mode);
+  let rawDiff;
+  try {
+    rawDiff = git(`${diffArgs} -U3 ${extraFlags} -- ${filePath}`, repoRoot);
+  } catch {
+    rawDiff = "";
+  }
+  const diffs = parseDiff(rawDiff);
+  return diffs[0] ?? null;
+}
 function getModeString(mode) {
   switch (mode.type) {
     case "uncommitted":
@@ -1686,7 +1717,7 @@ async function updateReviewDiffs(reviewId, newDiffs, headCommit) {
 // src/server.ts
 import { serve } from "@hono/node-server";
 import { exec } from "child_process";
-import { existsSync as existsSync5, readFileSync as readFileSync6 } from "fs";
+import { existsSync as existsSync5, readFileSync as readFileSync7 } from "fs";
 import { Hono as Hono4 } from "hono";
 import { dirname, join as join6 } from "path";
 import { fileURLToPath } from "url";
@@ -2408,8 +2439,8 @@ function isRetriable(err) {
   return msg.includes("429") || msg.includes("500") || msg.includes("502") || msg.includes("503") || msg.includes("504") || msg.includes("rate_limit");
 }
 function sleep(ms) {
-  return new Promise((resolve3) => {
-    setTimeout(resolve3, ms);
+  return new Promise((resolve4) => {
+    setTimeout(resolve4, ms);
   });
 }
 
@@ -2453,8 +2484,8 @@ function randomLines(count) {
   return lines.sort((a, b) => a.line - b.line);
 }
 function sleep2(ms) {
-  return new Promise((resolve3) => {
-    setTimeout(resolve3, ms);
+  return new Promise((resolve4) => {
+    setTimeout(resolve4, ms);
   });
 }
 async function mockRiskAnalysisBatch(files) {
@@ -2906,7 +2937,7 @@ aiApiRoutes.post("/preferences", async (c) => {
 
 // src/routes/api.ts
 init_queries();
-import { existsSync as existsSync4, mkdirSync as mkdirSync4, readFileSync as readFileSync5, writeFileSync as writeFileSync4 } from "fs";
+import { existsSync as existsSync4, mkdirSync as mkdirSync4, readFileSync as readFileSync6, writeFileSync as writeFileSync4 } from "fs";
 import { Hono as Hono2 } from "hono";
 import { join as join5 } from "path";
 
@@ -3052,6 +3083,198 @@ async function generateReviewExport(reviewId, repoRoot, isCurrent) {
   return archivePath;
 }
 
+// src/git/image.ts
+import { execSync as execSync4 } from "child_process";
+import { readFileSync as readFileSync5 } from "fs";
+import { resolve as resolve2 } from "path";
+var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set([".png", ".jpg", ".jpeg", ".gif", ".webp", ".svg"]);
+function isImageFile(filePath) {
+  const ext = filePath.slice(filePath.lastIndexOf(".")).toLowerCase();
+  return IMAGE_EXTENSIONS.has(ext);
+}
+function getContentType(filePath) {
+  const ext = filePath.slice(filePath.lastIndexOf(".")).toLowerCase();
+  switch (ext) {
+    case ".png":
+      return "image/png";
+    case ".jpg":
+    case ".jpeg":
+      return "image/jpeg";
+    case ".gif":
+      return "image/gif";
+    case ".webp":
+      return "image/webp";
+    case ".svg":
+      return "image/svg+xml";
+    default:
+      return "application/octet-stream";
+  }
+}
+function getOldRef(mode) {
+  switch (mode.type) {
+    case "uncommitted":
+      return "HEAD";
+    case "staged":
+      return "HEAD";
+    case "unstaged":
+      return null;
+    // old = index, use ':'
+    case "commit":
+      return `${mode.sha}~1`;
+    case "range":
+      return mode.from;
+    case "branch":
+      return mode.name;
+    case "files":
+      return "HEAD";
+    case "all":
+      return null;
+  }
+}
+function getNewRef(mode) {
+  switch (mode.type) {
+    case "uncommitted":
+      return null;
+    // working tree
+    case "staged":
+      return null;
+    // index, but git show : works
+    case "unstaged":
+      return null;
+    // working tree
+    case "commit":
+      return mode.sha;
+    case "range":
+      return mode.to;
+    case "branch":
+      return "HEAD";
+    case "files":
+      return null;
+    case "all":
+      return null;
+  }
+}
+function gitShowFile(ref, filePath, repoRoot) {
+  try {
+    const spec = ref === ":" ? `:${filePath}` : `${ref}:${filePath}`;
+    return execSync4(`git show "${spec}"`, { cwd: repoRoot, maxBuffer: 50 * 1024 * 1024 });
+  } catch {
+    return null;
+  }
+}
+function readWorkingFile(filePath, repoRoot) {
+  try {
+    return readFileSync5(resolve2(repoRoot, filePath));
+  } catch {
+    return null;
+  }
+}
+function getOldImage(mode, filePath, oldPath, repoRoot) {
+  const ref = getOldRef(mode);
+  const path = oldPath ?? filePath;
+  if (ref === null) {
+    const data2 = readWorkingFile(path, repoRoot);
+    if (!data2) return null;
+    return { data: data2, size: data2.length };
+  }
+  const actualRef = mode.type === "unstaged" ? ":" : ref;
+  const data = gitShowFile(actualRef, path, repoRoot);
+  if (!data) return null;
+  return { data, size: data.length };
+}
+function getNewImage(mode, filePath, repoRoot) {
+  const ref = getNewRef(mode);
+  if (ref === null) {
+    if (mode.type === "staged") {
+      const data3 = gitShowFile(":", filePath, repoRoot);
+      if (!data3) return null;
+      return { data: data3, size: data3.length };
+    }
+    const data2 = readWorkingFile(filePath, repoRoot);
+    if (!data2) return null;
+    return { data: data2, size: data2.length };
+  }
+  const data = gitShowFile(ref, filePath, repoRoot);
+  if (!data) return null;
+  return { data, size: data.length };
+}
+async function extractMetadata(data, filePath) {
+  const ext = filePath.slice(filePath.lastIndexOf(".")).toLowerCase();
+  if (ext === ".svg") {
+    const text = data.toString("utf-8");
+    const widthMatch = text.match(/\bwidth\s*=\s*["']([^"']+)["']/);
+    const heightMatch = text.match(/\bheight\s*=\s*["']([^"']+)["']/);
+    const viewBoxMatch = text.match(/\bviewBox\s*=\s*["']([^"']+)["']/);
+    let width = widthMatch ? parseFloat(widthMatch[1]) : null;
+    let height = heightMatch ? parseFloat(heightMatch[1]) : null;
+    if (width === null && height === null && viewBoxMatch) {
+      const parts = viewBoxMatch[1].split(/[\s,]+/);
+      if (parts.length >= 4) {
+        width = parseFloat(parts[2]);
+        height = parseFloat(parts[3]);
+      }
+    }
+    return {
+      format: "svg",
+      width: width !== null && !isNaN(width) ? width : null,
+      height: height !== null && !isNaN(height) ? height : null,
+      fileSize: data.length,
+      colorSpace: null,
+      channels: null,
+      depth: null,
+      hasAlpha: null,
+      density: null,
+      exif: null
+    };
+  }
+  const sharp = (await import("sharp")).default;
+  const meta = await sharp(data).metadata();
+  let exif = null;
+  if (meta.exif) {
+    try {
+      exif = {};
+      if (meta.orientation) exif["Orientation"] = String(meta.orientation);
+    } catch {
+    }
+  }
+  return {
+    format: meta.format ?? ext.slice(1),
+    width: meta.width ?? null,
+    height: meta.height ?? null,
+    fileSize: data.length,
+    colorSpace: meta.space ?? null,
+    channels: meta.channels ?? null,
+    depth: meta.depth ?? null,
+    hasAlpha: meta.hasAlpha ?? null,
+    density: meta.density ?? null,
+    exif
+  };
+}
+function formatMetadataLines(meta) {
+  const lines = [];
+  lines.push(`Format: ${meta.format}`);
+  if (meta.width !== null && meta.height !== null) {
+    lines.push(`Dimensions: ${meta.width} \xD7 ${meta.height}`);
+  }
+  lines.push(`File size: ${formatBytes(meta.fileSize)}`);
+  if (meta.colorSpace) lines.push(`Color space: ${meta.colorSpace}`);
+  if (meta.channels !== null) lines.push(`Channels: ${meta.channels}`);
+  if (meta.depth) lines.push(`Bit depth: ${meta.depth}`);
+  if (meta.hasAlpha !== null) lines.push(`Alpha: ${meta.hasAlpha ? "yes" : "no"}`);
+  if (meta.density !== null) lines.push(`Density: ${meta.density} DPI`);
+  if (meta.exif) {
+    for (const [key, value] of Object.entries(meta.exif)) {
+      lines.push(`EXIF ${key}: ${value}`);
+    }
+  }
+  return lines;
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
 // src/outline/parser.ts
 var BRACE_LANGS = /* @__PURE__ */ new Set([
   "javascript",
@@ -3410,6 +3633,22 @@ apiRoutes.post("/review/reopen", async (c) => {
   await updateReviewStatus(reviewId, "in_progress");
   return c.json({ status: "in_progress" });
 });
+apiRoutes.post("/review/refresh", async (c) => {
+  const reviewId = resolveReviewId(c);
+  const repoRoot = c.get("repoRoot");
+  const review = await getReview(reviewId);
+  if (!review) return c.json({ error: "Review not found" }, 404);
+  const mode = parseModeString(review.mode);
+  const headCommit = getHeadCommit(repoRoot);
+  const diffs = getFileDiffs(mode, repoRoot);
+  const result = await updateReviewDiffs(reviewId, diffs, headCommit);
+  return c.json({
+    updated: result.updated,
+    added: result.added,
+    stale: result.stale,
+    fileCount: diffs.length
+  });
+});
 apiRoutes.delete("/review/:id", async (c) => {
   const reviewId = c.req.param("id");
   const currentReviewId = c.get("currentReviewId");
@@ -3548,7 +3787,7 @@ function readProjectSettings(repoRoot) {
   const settingsPath = join5(repoRoot, ".glassbox", "settings.json");
   try {
     if (existsSync4(settingsPath)) {
-      return JSON.parse(readFileSync5(settingsPath, "utf-8"));
+      return JSON.parse(readFileSync6(settingsPath, "utf-8"));
     }
   } catch {
   }
@@ -3571,6 +3810,47 @@ apiRoutes.patch("/project-settings", async (c) => {
   writeProjectSettings(repoRoot, current);
   return c.json(current);
 });
+apiRoutes.get("/image/:fileId/metadata", async (c) => {
+  const fileId = c.req.param("fileId");
+  const file = await getReviewFile(fileId);
+  if (!file) return c.json({ error: "Not found" }, 404);
+  const repoRoot = c.get("repoRoot");
+  const review = await getReview(file.review_id);
+  if (!review) return c.json({ error: "Review not found" }, 404);
+  const mode = parseModeString(review.mode);
+  const diff = JSON.parse(file.diff_data ?? "{}");
+  const oldPath = diff.oldPath ?? null;
+  const status = diff.status ?? "modified";
+  const oldImage = status !== "added" ? getOldImage(mode, file.file_path, oldPath, repoRoot) : null;
+  const newImage = status !== "deleted" ? getNewImage(mode, file.file_path, repoRoot) : null;
+  const [oldMeta, newMeta] = await Promise.all([
+    oldImage ? extractMetadata(oldImage.data, oldPath ?? file.file_path) : null,
+    newImage ? extractMetadata(newImage.data, file.file_path) : null
+  ]);
+  return c.json({
+    old: oldMeta ? formatMetadataLines(oldMeta) : null,
+    new: newMeta ? formatMetadataLines(newMeta) : null
+  });
+});
+apiRoutes.get("/image/:fileId/:side", async (c) => {
+  const fileId = c.req.param("fileId");
+  const side = c.req.param("side");
+  if (side !== "old" && side !== "new") return c.text("Invalid side", 400);
+  const file = await getReviewFile(fileId);
+  if (!file) return c.text("Not found", 404);
+  const repoRoot = c.get("repoRoot");
+  const review = await getReview(file.review_id);
+  if (!review) return c.text("Review not found", 404);
+  const mode = parseModeString(review.mode);
+  const diff = JSON.parse(file.diff_data ?? "{}");
+  const oldPath = diff.oldPath ?? null;
+  const image = side === "old" ? getOldImage(mode, file.file_path, oldPath, repoRoot) : getNewImage(mode, file.file_path, repoRoot);
+  if (!image) return c.text("Image not available", 404);
+  const contentType = getContentType(file.file_path);
+  return new Response(image.data, {
+    headers: { "Content-Type": contentType, "Cache-Control": "no-cache" }
+  });
+});
 
 // src/routes/pages.tsx
 import { Hono as Hono3 } from "hono";
@@ -3644,6 +3924,52 @@ function jsx(tag, props) {
   return new SafeHtml(`<${tag}${attrStr}>${childStr}</${tag}>`);
 }
 
+// src/components/imageDiff.tsx
+function ImageDiff({ file, diff }) {
+  const fileId = file.id;
+  const isAdded = diff.status === "added";
+  const isDeleted = diff.status === "deleted";
+  const hasOld = !isAdded;
+  const hasNew = !isDeleted;
+  const hasComparison = hasOld && hasNew;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "image-diff",
+      "data-file-id": fileId,
+      "data-file-path": file.file_path,
+      "data-has-old": String(hasOld),
+      "data-has-new": String(hasNew),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "image-diff-panel image-diff-metadata active", "data-panel": "metadata", children: /* @__PURE__ */ jsx("div", { className: "image-metadata-loading", children: "Loading metadata..." }) }),
+        hasComparison && /* @__PURE__ */ jsx("div", { className: "image-diff-panel image-diff-visual", "data-panel": "difference", children: /* @__PURE__ */ jsx("div", { className: "image-visual-canvas", "data-zoomable": "true", children: /* @__PURE__ */ jsx("div", { className: "image-zoom-wrap", children: [
+          /* @__PURE__ */ jsx("img", { className: "image-layer image-layer-old", src: `/api/image/${fileId}/old`, alt: "Old version" }),
+          /* @__PURE__ */ jsx("img", { className: "image-layer image-layer-new image-blend", src: `/api/image/${fileId}/new`, alt: "New version" })
+        ] }) }) }),
+        hasComparison && /* @__PURE__ */ jsx("div", { className: "image-diff-panel image-diff-visual", "data-panel": "slice", children: /* @__PURE__ */ jsx("div", { className: "image-visual-canvas", "data-zoomable": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "image-zoom-wrap", children: [
+            /* @__PURE__ */ jsx("img", { className: "image-layer image-layer-old", src: `/api/image/${fileId}/old`, alt: "Old version" }),
+            /* @__PURE__ */ jsx("img", { className: "image-layer image-layer-new image-slice-clipped", src: `/api/image/${fileId}/new`, alt: "New version" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "slice-line" }),
+          /* @__PURE__ */ jsx("div", { className: "slice-handle slice-handle-a" }),
+          /* @__PURE__ */ jsx("div", { className: "slice-handle slice-handle-b" })
+        ] }) }),
+        !hasComparison && /* @__PURE__ */ jsx("div", { className: "image-diff-single", children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: `/api/image/${fileId}/${isAdded ? "new" : "old"}`,
+              alt: isAdded ? "New image" : "Deleted image"
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "image-diff-status", children: isAdded ? "New file" : "Deleted file" })
+        ] })
+      ]
+    }
+  );
+}
+
 // src/components/diffView.tsx
 function DiffView({ file, diff, annotations, mode }) {
   const annotationsByLine = {};
@@ -3657,7 +3983,7 @@ function DiffView({ file, diff, annotations, mode }) {
       /* @__PURE__ */ jsx("span", { className: "file-path", children: diff.filePath }),
       /* @__PURE__ */ jsx("div", { className: "diff-header-actions", children: /* @__PURE__ */ jsx("span", { className: `file-status ${diff.status}`, children: diff.status }) })
     ] }),
-    diff.isBinary ? /* @__PURE__ */ jsx("div", { className: "hunk-separator", children: "Binary file" }) : diff.status === "added" || diff.status === "deleted" || mode === "unified" ? /* @__PURE__ */ jsx(UnifiedDiff, { hunks: diff.hunks, annotationsByLine }) : /* @__PURE__ */ jsx(SplitDiff, { hunks: diff.hunks, annotationsByLine })
+    diff.isBinary && isImageFile(diff.filePath) ? /* @__PURE__ */ jsx(ImageDiff, { file, diff }) : diff.isBinary ? /* @__PURE__ */ jsx("div", { className: "hunk-separator", children: "Binary file" }) : diff.status === "added" || diff.status === "deleted" || mode === "unified" ? /* @__PURE__ */ jsx(UnifiedDiff, { hunks: diff.hunks, annotationsByLine }) : /* @__PURE__ */ jsx(SplitDiff, { hunks: diff.hunks, annotationsByLine })
   ] });
 }
 function getAnnotations(pair, annotationsByLine) {
@@ -4177,6 +4503,10 @@ function getHistoryScript() {
 
 // src/routes/pages.tsx
 init_queries();
+var zoomOutSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>';
+var zoomInSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>';
+var actualSizeSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><text x="12" y="15.5" text-anchor="middle" font-size="9" font-weight="bold" fill="currentColor" stroke="none">1:1</text></svg>';
+var fitSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></svg>';
 var pageRoutes = new Hono3();
 pageRoutes.get("/", async (c) => {
   const reviewId = c.get("reviewId");
@@ -4223,14 +4553,30 @@ pageRoutes.get("/", async (c) => {
       ] }),
       /* @__PURE__ */ jsx("div", { className: "diff-container", id: "diff-container", style: "display:none" }),
       /* @__PURE__ */ jsx("div", { className: "diff-toolbar", id: "diff-toolbar", style: "display:none", children: [
-        /* @__PURE__ */ jsx("div", { className: "diff-toolbar-left", children: [
-          /* @__PURE__ */ jsx("div", { className: "segmented-control", children: [
-            /* @__PURE__ */ jsx("button", { className: "segment active", "data-diff-mode": "split", children: "Split" }),
-            /* @__PURE__ */ jsx("button", { className: "segment", "data-diff-mode": "unified", children: "Unified" })
+        /* @__PURE__ */ jsx("div", { className: "diff-toolbar-text", children: [
+          /* @__PURE__ */ jsx("div", { className: "diff-toolbar-left", children: [
+            /* @__PURE__ */ jsx("div", { className: "segmented-control", children: [
+              /* @__PURE__ */ jsx("button", { className: "segment active", "data-diff-mode": "split", children: "Split" }),
+              /* @__PURE__ */ jsx("button", { className: "segment", "data-diff-mode": "unified", children: "Unified" })
+            ] }),
+            /* @__PURE__ */ jsx("button", { className: "toolbar-btn", id: "wrap-toggle", children: "Wrap" }),
+            /* @__PURE__ */ jsx("button", { className: "toolbar-btn", id: "whitespace-toggle", children: "Ignore Whitespace" })
           ] }),
-          /* @__PURE__ */ jsx("button", { className: "toolbar-btn", id: "wrap-toggle", children: "Wrap" })
+          /* @__PURE__ */ jsx("div", { className: "diff-toolbar-right", children: /* @__PURE__ */ jsx("button", { className: "toolbar-btn", id: "language-btn", children: "Plain Text" }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "diff-toolbar-right", children: /* @__PURE__ */ jsx("button", { className: "toolbar-btn", id: "language-btn", children: "Plain Text" }) })
+        /* @__PURE__ */ jsx("div", { className: "diff-toolbar-image", style: "display:none", children: [
+          /* @__PURE__ */ jsx("div", { className: "diff-toolbar-left", children: /* @__PURE__ */ jsx("div", { className: "segmented-control", children: [
+            /* @__PURE__ */ jsx("button", { className: "segment active", "data-image-mode": "metadata", children: "Metadata" }),
+            /* @__PURE__ */ jsx("button", { className: "segment", "data-image-mode": "difference", children: "Difference" }),
+            /* @__PURE__ */ jsx("button", { className: "segment", "data-image-mode": "slice", children: "Slice" })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "diff-toolbar-right", children: [
+            /* @__PURE__ */ jsx("button", { className: "image-zoom-btn", "data-zoom-action": "out", title: "Zoom out", children: raw(zoomOutSvg) }),
+            /* @__PURE__ */ jsx("button", { className: "image-zoom-btn", "data-zoom-action": "fit", title: "Fit to view", children: raw(fitSvg) }),
+            /* @__PURE__ */ jsx("button", { className: "image-zoom-btn", "data-zoom-action": "actual", title: "Actual size (1:1)", children: raw(actualSizeSvg) }),
+            /* @__PURE__ */ jsx("button", { className: "image-zoom-btn", "data-zoom-action": "in", title: "Zoom in", children: raw(zoomInSvg) })
+          ] })
+        ] })
       ] })
     ] })
   ] }) });
@@ -4239,10 +4585,22 @@ pageRoutes.get("/", async (c) => {
 pageRoutes.get("/file/:fileId", async (c) => {
   const fileId = c.req.param("fileId");
   const mode = c.req.query("mode") === "unified" ? "unified" : "split";
+  const ignoreWhitespace = c.req.query("ignoreWhitespace") === "1";
   const file = await getReviewFile(fileId);
   if (!file) return c.text("File not found", 404);
   const annotations = await getAnnotationsForFile(fileId);
-  const diff = JSON.parse(file.diff_data ?? "{}");
+  let diff = JSON.parse(file.diff_data ?? "{}");
+  if (ignoreWhitespace) {
+    const repoRoot = c.get("repoRoot");
+    const review = await getReview(file.review_id);
+    if (review) {
+      const reviewMode = parseModeString(review.mode);
+      const regenerated = getSingleFileDiff(reviewMode, file.file_path, repoRoot, "-w");
+      if (regenerated) {
+        diff = regenerated;
+      }
+    }
+  }
   const html = /* @__PURE__ */ jsx(DiffView, { file, diff, annotations, mode });
   return c.html(html.toString());
 });
@@ -4296,14 +4654,30 @@ pageRoutes.get("/review/:reviewId", async (c) => {
       ] }),
       /* @__PURE__ */ jsx("div", { className: "diff-container", id: "diff-container", style: "display:none" }),
       /* @__PURE__ */ jsx("div", { className: "diff-toolbar", id: "diff-toolbar", style: "display:none", children: [
-        /* @__PURE__ */ jsx("div", { className: "diff-toolbar-left", children: [
-          /* @__PURE__ */ jsx("div", { className: "segmented-control", children: [
-            /* @__PURE__ */ jsx("button", { className: "segment active", "data-diff-mode": "split", children: "Split" }),
-            /* @__PURE__ */ jsx("button", { className: "segment", "data-diff-mode": "unified", children: "Unified" })
+        /* @__PURE__ */ jsx("div", { className: "diff-toolbar-text", children: [
+          /* @__PURE__ */ jsx("div", { className: "diff-toolbar-left", children: [
+            /* @__PURE__ */ jsx("div", { className: "segmented-control", children: [
+              /* @__PURE__ */ jsx("button", { className: "segment active", "data-diff-mode": "split", children: "Split" }),
+              /* @__PURE__ */ jsx("button", { className: "segment", "data-diff-mode": "unified", children: "Unified" })
+            ] }),
+            /* @__PURE__ */ jsx("button", { className: "toolbar-btn", id: "wrap-toggle", children: "Wrap" }),
+            /* @__PURE__ */ jsx("button", { className: "toolbar-btn", id: "whitespace-toggle", children: "Ignore Whitespace" })
           ] }),
-          /* @__PURE__ */ jsx("button", { className: "toolbar-btn", id: "wrap-toggle", children: "Wrap" })
+          /* @__PURE__ */ jsx("div", { className: "diff-toolbar-right", children: /* @__PURE__ */ jsx("button", { className: "toolbar-btn", id: "language-btn", children: "Plain Text" }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "diff-toolbar-right", children: /* @__PURE__ */ jsx("button", { className: "toolbar-btn", id: "language-btn", children: "Plain Text" }) })
+        /* @__PURE__ */ jsx("div", { className: "diff-toolbar-image", style: "display:none", children: [
+          /* @__PURE__ */ jsx("div", { className: "diff-toolbar-left", children: /* @__PURE__ */ jsx("div", { className: "segmented-control", children: [
+            /* @__PURE__ */ jsx("button", { className: "segment active", "data-image-mode": "metadata", children: "Metadata" }),
+            /* @__PURE__ */ jsx("button", { className: "segment", "data-image-mode": "difference", children: "Difference" }),
+            /* @__PURE__ */ jsx("button", { className: "segment", "data-image-mode": "slice", children: "Slice" })
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "diff-toolbar-right", children: [
+            /* @__PURE__ */ jsx("button", { className: "image-zoom-btn", "data-zoom-action": "out", title: "Zoom out", children: raw(zoomOutSvg) }),
+            /* @__PURE__ */ jsx("button", { className: "image-zoom-btn", "data-zoom-action": "fit", title: "Fit to view", children: raw(fitSvg) }),
+            /* @__PURE__ */ jsx("button", { className: "image-zoom-btn", "data-zoom-action": "actual", title: "Actual size (1:1)", children: raw(actualSizeSvg) }),
+            /* @__PURE__ */ jsx("button", { className: "image-zoom-btn", "data-zoom-action": "in", title: "Zoom in", children: raw(zoomInSvg) })
+          ] })
+        ] })
       ] })
     ] })
   ] }) });
@@ -4319,10 +4693,10 @@ pageRoutes.get("/history", async (c) => {
 
 // src/server.ts
 function tryServe(fetch2, port) {
-  return new Promise((resolve3, reject) => {
+  return new Promise((resolve4, reject) => {
     const server = serve({ fetch: fetch2, port });
     server.on("listening", () => {
-      resolve3(port);
+      resolve4(port);
     });
     server.on("error", (err) => {
       if (err.code === "EADDRINUSE") {
@@ -4344,11 +4718,11 @@ async function startServer(port, reviewId, repoRoot, options) {
   const selfDir = dirname(fileURLToPath(import.meta.url));
   const distDir = existsSync5(join6(selfDir, "client", "styles.css")) ? join6(selfDir, "client") : join6(selfDir, "..", "dist", "client");
   app.get("/static/styles.css", (c) => {
-    const css = readFileSync6(join6(distDir, "styles.css"), "utf-8");
+    const css = readFileSync7(join6(distDir, "styles.css"), "utf-8");
     return c.text(css, 200, { "Content-Type": "text/css", "Cache-Control": "no-cache" });
   });
   app.get("/static/app.js", (c) => {
-    const js = readFileSync6(join6(distDir, "app.global.js"), "utf-8");
+    const js = readFileSync7(join6(distDir, "app.global.js"), "utf-8");
     return c.text(js, 200, { "Content-Type": "application/javascript", "Cache-Control": "no-cache" });
   });
   app.route("/api", apiRoutes);
@@ -4384,7 +4758,7 @@ async function startServer(port, reviewId, repoRoot, options) {
 }
 
 // src/skills.ts
-import { existsSync as existsSync6, mkdirSync as mkdirSync5, readFileSync as readFileSync7, writeFileSync as writeFileSync5 } from "fs";
+import { existsSync as existsSync6, mkdirSync as mkdirSync5, readFileSync as readFileSync8, writeFileSync as writeFileSync5 } from "fs";
 import { join as join7 } from "path";
 var SKILL_VERSION = 1;
 function versionHeader() {
@@ -4397,7 +4771,7 @@ function parseVersionHeader(content) {
 }
 function updateFile(path, content) {
   if (existsSync6(path)) {
-    const existing = readFileSync7(path, "utf-8");
+    const existing = readFileSync8(path, "utf-8");
     const version = parseVersionHeader(existing);
     if (version !== null && version >= SKILL_VERSION) {
       return false;
@@ -4501,7 +4875,7 @@ function ensureSkills() {
 }
 
 // src/update-check.ts
-import { existsSync as existsSync7, mkdirSync as mkdirSync6, readFileSync as readFileSync8, writeFileSync as writeFileSync6 } from "fs";
+import { existsSync as existsSync7, mkdirSync as mkdirSync6, readFileSync as readFileSync9, writeFileSync as writeFileSync6 } from "fs";
 import { get } from "https";
 import { homedir as homedir3 } from "os";
 import { dirname as dirname2, join as join8 } from "path";
@@ -4512,7 +4886,7 @@ var PACKAGE_NAME = "glassbox";
 function getCurrentVersion() {
   try {
     const dir = dirname2(fileURLToPath2(import.meta.url));
-    const pkg = JSON.parse(readFileSync8(join8(dir, "..", "package.json"), "utf-8"));
+    const pkg = JSON.parse(readFileSync9(join8(dir, "..", "package.json"), "utf-8"));
     return pkg.version;
   } catch {
     return "0.0.0";
@@ -4521,7 +4895,7 @@ function getCurrentVersion() {
 function getLastCheckDate() {
   try {
     if (existsSync7(CHECK_FILE)) {
-      return readFileSync8(CHECK_FILE, "utf-8").trim();
+      return readFileSync9(CHECK_FILE, "utf-8").trim();
     }
   } catch {
   }
@@ -4538,10 +4912,10 @@ function isFirstUseToday() {
   return last !== today;
 }
 function fetchLatestVersion() {
-  return new Promise((resolve3) => {
+  return new Promise((resolve4) => {
     const req = get(`https://registry.npmjs.org/${PACKAGE_NAME}/latest`, { timeout: 5e3 }, (res) => {
       if (res.statusCode !== 200) {
-        resolve3(null);
+        resolve4(null);
         return;
       }
       let data = "";
@@ -4550,18 +4924,18 @@ function fetchLatestVersion() {
       });
       res.on("end", () => {
         try {
-          resolve3(JSON.parse(data).version);
+          resolve4(JSON.parse(data).version);
         } catch {
-          resolve3(null);
+          resolve4(null);
         }
       });
     });
     req.on("error", () => {
-      resolve3(null);
+      resolve4(null);
     });
     req.on("timeout", () => {
       req.destroy();
-      resolve3(null);
+      resolve4(null);
     });
   });
 }
@@ -4699,7 +5073,7 @@ function parseArgs(argv) {
         port = parseInt(args[++i], 10);
         break;
       case "--data-dir":
-        dataDir = resolve2(args[++i]);
+        dataDir = resolve3(args[++i]);
         break;
       case "--resume":
         resume = true;
@@ -4755,7 +5129,7 @@ async function main() {
     console.log("AI service test mode enabled \u2014 using mock AI responses");
   }
   if (debug) {
-    console.log(`[debug] Build timestamp: ${"2026-03-16T03:14:46.229Z"}`);
+    console.log(`[debug] Build timestamp: ${"2026-03-16T07:44:26.425Z"}`);
   }
   if (projectDir) {
     process.chdir(projectDir);