glassbox 0.3.6 → 0.4.1

package/dist/cli.js

@@ -88,7 +88,9 @@ var init_schema = __esm({
     sort_mode TEXT NOT NULL DEFAULT 'folder',
     risk_sort_dimension TEXT NOT NULL DEFAULT 'aggregate',
     show_risk_scores BOOLEAN NOT NULL DEFAULT FALSE,
-    ignore_whitespace BOOLEAN NOT NULL DEFAULT FALSE
+    ignore_whitespace BOOLEAN NOT NULL DEFAULT FALSE,
+    svg_view_mode TEXT NOT NULL DEFAULT 'code',
+    last_image_mode TEXT NOT NULL DEFAULT 'metadata'
   );
 `;
   }
@@ -144,6 +146,8 @@ async function initSchema(db2) {
   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 addColumnIfMissing(db2, "user_preferences", "svg_view_mode", "TEXT NOT NULL DEFAULT 'code'");
+  await addColumnIfMissing(db2, "user_preferences", "last_image_mode", "TEXT NOT NULL DEFAULT 'metadata'");
   await db2.exec(
     `UPDATE ai_analyses SET status = 'failed', error_message = 'Interrupted (server restarted)' WHERE status = 'running'`
   );
@@ -391,7 +395,7 @@ init_queries();
 init_connection();
 import { mkdirSync as mkdirSync7 } from "fs";
 import { tmpdir } from "os";
-import { join as join9, resolve as resolve3 } from "path";
+import { join as join10, resolve as resolve4 } from "path";
 
 // src/debug.ts
 var debugEnabled = false;
@@ -800,7 +804,7 @@ async function getUserPreferences() {
     ["singleton"]
   );
   if (result.rows.length === 0) {
-    return { sort_mode: "folder", risk_sort_dimension: "aggregate", show_risk_scores: false, ignore_whitespace: false };
+    return { sort_mode: "folder", risk_sort_dimension: "aggregate", show_risk_scores: false, ignore_whitespace: false, svg_view_mode: "code", last_image_mode: "metadata" };
   }
   return result.rows[0];
 }
@@ -809,14 +813,16 @@ 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, ignore_whitespace)
-     VALUES ($1, $2, $3, $4, $5)
+    `INSERT INTO user_preferences (id, sort_mode, risk_sort_dimension, show_risk_scores, ignore_whitespace, svg_view_mode, last_image_mode)
+     VALUES ($1, $2, $3, $4, $5, $6, $7)
      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,
-       ignore_whitespace = EXCLUDED.ignore_whitespace`,
-    ["singleton", merged.sort_mode, merged.risk_sort_dimension, merged.show_risk_scores, merged.ignore_whitespace]
+       ignore_whitespace = EXCLUDED.ignore_whitespace,
+       svg_view_mode = EXCLUDED.svg_view_mode,
+       last_image_mode = EXCLUDED.last_image_mode`,
+    ["singleton", merged.sort_mode, merged.risk_sort_dimension, merged.show_risk_scores, merged.ignore_whitespace, merged.svg_view_mode, merged.last_image_mode]
   );
 }
 
@@ -1717,9 +1723,9 @@ 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 readFileSync7 } from "fs";
+import { existsSync as existsSync6, readFileSync as readFileSync8 } from "fs";
 import { Hono as Hono4 } from "hono";
-import { dirname, join as join6 } from "path";
+import { dirname, join as join7 } from "path";
 import { fileURLToPath } from "url";
 
 // src/routes/ai-api.ts
@@ -2439,8 +2445,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((resolve4) => {
-    setTimeout(resolve4, ms);
+  return new Promise((resolve5) => {
+    setTimeout(resolve5, ms);
   });
 }
 
@@ -2484,8 +2490,8 @@ function randomLines(count) {
   return lines.sort((a, b) => a.line - b.line);
 }
 function sleep2(ms) {
-  return new Promise((resolve4) => {
-    setTimeout(resolve4, ms);
+  return new Promise((resolve5) => {
+    setTimeout(resolve5, ms);
   });
 }
 async function mockRiskAnalysisBatch(files) {
@@ -2937,9 +2943,10 @@ aiApiRoutes.post("/preferences", async (c) => {
 
 // src/routes/api.ts
 init_queries();
-import { existsSync as existsSync4, mkdirSync as mkdirSync4, readFileSync as readFileSync6, writeFileSync as writeFileSync4 } from "fs";
+import { execSync as execSync5 } from "child_process";
+import { existsSync as existsSync5, mkdirSync as mkdirSync4, readFileSync as readFileSync7, writeFileSync as writeFileSync4 } from "fs";
 import { Hono as Hono2 } from "hono";
-import { join as join5 } from "path";
+import { join as join6, resolve as resolve3 } from "path";
 
 // src/export/generate.ts
 init_queries();
@@ -3103,6 +3110,9 @@ function isImageFile(filePath) {
   const ext = filePath.slice(filePath.lastIndexOf(".")).toLowerCase();
   return IMAGE_EXTENSIONS.has(ext);
 }
+function isSvgFile(filePath) {
+  return filePath.slice(filePath.lastIndexOf(".")).toLowerCase() === ".svg";
+}
 function getContentType(filePath) {
   const ext = filePath.slice(filePath.lastIndexOf(".")).toLowerCase();
   switch (ext) {
@@ -3397,6 +3407,139 @@ function parseWebp(data) {
   return { format: "webp", width, height, colorSpace: "srgb", channels: hasAlpha ? 4 : 3, depth: null, hasAlpha, density: null, exif: null };
 }
 
+// src/git/svg-rasterize.ts
+import { existsSync as existsSync4, readFileSync as readFileSync6 } from "fs";
+import { createRequire } from "module";
+import { join as join5 } from "path";
+var initialized = false;
+var ResvgClass;
+var fontBuffers = [];
+async function ensureInit() {
+  if (initialized) return;
+  const require2 = createRequire(import.meta.url);
+  const resvgPath = require2.resolve("@resvg/resvg-wasm");
+  const wasmPath = resvgPath.replace(/index\.(js|mjs)$/, "index_bg.wasm");
+  const wasmBuffer = readFileSync6(wasmPath);
+  const mod = await import("@resvg/resvg-wasm");
+  await mod.initWasm(wasmBuffer);
+  ResvgClass = mod.Resvg;
+  fontBuffers = loadSystemFonts();
+  initialized = true;
+}
+function loadSystemFonts() {
+  const buffers = [];
+  const candidates = getFontCandidates();
+  for (const path of candidates) {
+    if (!existsSync4(path)) continue;
+    try {
+      buffers.push(readFileSync6(path));
+    } catch {
+    }
+  }
+  return buffers;
+}
+function getFontCandidates() {
+  switch (process.platform) {
+    case "darwin": {
+      const sys = "/System/Library/Fonts";
+      const sup = "/System/Library/Fonts/Supplemental";
+      return [
+        // Core system fonts (serif, sans-serif, monospace)
+        join5(sys, "Helvetica.ttc"),
+        join5(sys, "Times.ttc"),
+        join5(sys, "Courier.ttc"),
+        join5(sys, "Menlo.ttc"),
+        join5(sys, "SFPro.ttf"),
+        join5(sys, "SFNS.ttf"),
+        join5(sys, "SFNSMono.ttf"),
+        // Supplemental (common named fonts in SVGs)
+        join5(sup, "Arial.ttf"),
+        join5(sup, "Arial Bold.ttf"),
+        join5(sup, "Georgia.ttf"),
+        join5(sup, "Verdana.ttf"),
+        join5(sup, "Tahoma.ttf"),
+        join5(sup, "Trebuchet MS.ttf"),
+        join5(sup, "Impact.ttf"),
+        join5(sup, "Comic Sans MS.ttf"),
+        join5(sup, "Courier New.ttf"),
+        join5(sup, "Times New Roman.ttf")
+      ];
+    }
+    case "linux":
+      return [
+        // DejaVu (most common Linux fallback)
+        "/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",
+        "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",
+        "/usr/share/fonts/truetype/dejavu/DejaVuSerif.ttf",
+        "/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf",
+        // Liberation (metric-compatible with Arial/Times/Courier)
+        "/usr/share/fonts/truetype/liberation/LiberationSans-Regular.ttf",
+        "/usr/share/fonts/truetype/liberation/LiberationSerif-Regular.ttf",
+        "/usr/share/fonts/truetype/liberation/LiberationMono-Regular.ttf",
+        // Noto (common on modern distros)
+        "/usr/share/fonts/truetype/noto/NotoSans-Regular.ttf"
+      ];
+    case "win32": {
+      const winFonts = join5(process.env.WINDIR ?? "C:\\Windows", "Fonts");
+      return [
+        join5(winFonts, "arial.ttf"),
+        join5(winFonts, "arialbd.ttf"),
+        join5(winFonts, "times.ttf"),
+        join5(winFonts, "cour.ttf"),
+        join5(winFonts, "verdana.ttf"),
+        join5(winFonts, "tahoma.ttf"),
+        join5(winFonts, "georgia.ttf"),
+        join5(winFonts, "consola.ttf"),
+        join5(winFonts, "segoeui.ttf")
+      ];
+    }
+    default:
+      return [];
+  }
+}
+function parseSvgDimensions(svg) {
+  const widthMatch = svg.match(/\bwidth\s*=\s*["']([^"']+)["']/);
+  const heightMatch = svg.match(/\bheight\s*=\s*["']([^"']+)["']/);
+  const viewBoxMatch = svg.match(/\bviewBox\s*=\s*["']([^"']+)["']/);
+  let width = widthMatch ? parseFloat(widthMatch[1]) : NaN;
+  let height = heightMatch ? parseFloat(heightMatch[1]) : NaN;
+  if ((isNaN(width) || isNaN(height)) && viewBoxMatch) {
+    const parts = viewBoxMatch[1].split(/[\s,]+/);
+    if (parts.length >= 4) {
+      if (isNaN(width)) width = parseFloat(parts[2]);
+      if (isNaN(height)) height = parseFloat(parts[3]);
+    }
+  }
+  if (isNaN(width)) width = 300;
+  if (isNaN(height)) height = 150;
+  return { width, height };
+}
+function svgUsesExternalFonts(svgData) {
+  const svg = svgData.toString("utf-8");
+  return /<text[\s>]/i.test(svg) || /font-family/i.test(svg) || /@font-face/i.test(svg);
+}
+async function rasterizeSvg(svgData) {
+  await ensureInit();
+  const svgString = svgData.toString("utf-8");
+  const { width, height } = parseSvgDimensions(svgString);
+  const maxDim = Math.max(width, height);
+  const scale = Math.min(10, 8e3 / maxDim);
+  const targetWidth = Math.round(width * scale);
+  const resvg = new ResvgClass(svgString, {
+    fitTo: { mode: "width", value: targetWidth },
+    font: {
+      loadSystemFonts: false,
+      fontBuffers,
+      defaultFontFamily: "Helvetica"
+    }
+  });
+  const rendered = resvg.render();
+  const png = Buffer.from(rendered.asPng());
+  rendered.free();
+  resvg.free();
+  return png;
+}
+
 // src/outline/parser.ts
 var BRACE_LANGS = /* @__PURE__ */ new Set([
   "javascript",
@@ -3826,6 +3969,23 @@ apiRoutes.patch("/files/:fileId/status", async (c) => {
   await updateFileStatus(c.req.param("fileId"), status);
   return c.json({ ok: true });
 });
+apiRoutes.post("/files/:fileId/reveal", async (c) => {
+  const file = await getReviewFile(c.req.param("fileId"));
+  if (!file) return c.json({ error: "Not found" }, 404);
+  const repoRoot = c.get("repoRoot");
+  const fullPath = resolve3(repoRoot, file.file_path);
+  try {
+    if (process.platform === "darwin") {
+      execSync5(`open -R "${fullPath}"`);
+    } else if (process.platform === "win32") {
+      execSync5(`explorer /select,"${fullPath}"`);
+    } else {
+      execSync5(`xdg-open "${resolve3(fullPath, "..")}"`);
+    }
+  } catch {
+  }
+  return c.json({ ok: true });
+});
 function autoExport(c) {
   scheduleAutoExport(c.get("reviewId"), c.get("repoRoot"));
 }
@@ -3916,19 +4076,19 @@ apiRoutes.get("/context/:fileId", async (c) => {
   return c.json({ lines });
 });
 function readProjectSettings(repoRoot) {
-  const settingsPath = join5(repoRoot, ".glassbox", "settings.json");
+  const settingsPath = join6(repoRoot, ".glassbox", "settings.json");
   try {
-    if (existsSync4(settingsPath)) {
-      return JSON.parse(readFileSync6(settingsPath, "utf-8"));
+    if (existsSync5(settingsPath)) {
+      return JSON.parse(readFileSync7(settingsPath, "utf-8"));
     }
   } catch {
   }
   return {};
 }
 function writeProjectSettings(repoRoot, settings) {
-  const dir = join5(repoRoot, ".glassbox");
+  const dir = join6(repoRoot, ".glassbox");
   mkdirSync4(dir, { recursive: true });
-  writeFileSync4(join5(dir, "settings.json"), JSON.stringify(settings, null, 2), "utf-8");
+  writeFileSync4(join6(dir, "settings.json"), JSON.stringify(settings, null, 2), "utf-8");
 }
 apiRoutes.get("/project-settings", (c) => {
   const repoRoot = c.get("repoRoot");
@@ -3978,6 +4138,16 @@ apiRoutes.get("/image/:fileId/:side", async (c) => {
   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);
+  if (isSvgFile(file.file_path)) {
+    try {
+      const png = await rasterizeSvg(image.data);
+      return new Response(png, {
+        headers: { "Content-Type": "image/png", "Cache-Control": "no-cache" }
+      });
+    } catch {
+      return c.text("SVG rasterization failed", 500);
+    }
+  }
   const contentType = getContentType(file.file_path);
   return new Response(image.data, {
     headers: { "Content-Type": contentType, "Cache-Control": "no-cache" }
@@ -4057,7 +4227,7 @@ function jsx(tag, props) {
 }
 
 // src/components/imageDiff.tsx
-function ImageDiff({ file, diff }) {
+function ImageDiff({ file, diff, fontWarning, baseWidth, baseHeight }) {
   const fileId = file.id;
   const isAdded = diff.status === "added";
   const isDeleted = diff.status === "deleted";
@@ -4072,8 +4242,11 @@ function ImageDiff({ file, diff }) {
       "data-file-path": file.file_path,
       "data-has-old": String(hasOld),
       "data-has-new": String(hasNew),
+      ...baseWidth ? { "data-base-width": String(baseWidth) } : {},
+      ...baseHeight ? { "data-base-height": String(baseHeight) } : {},
       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..." }) }),
+        fontWarning && /* @__PURE__ */ jsx("div", { className: "image-font-warning", children: "This SVG uses text that may render differently depending on locally installed fonts." }),
+        /* @__PURE__ */ jsx("div", { className: "image-diff-panel image-diff-metadata", "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" })
@@ -4101,6 +4274,7 @@ function ImageDiff({ file, diff }) {
 }
 
 // src/components/diffView.tsx
+var revealSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><line x1="12" y1="11" x2="12" y2="17"/><polyline points="9 14 12 11 15 14"/></svg>';
 function DiffView({ file, diff, annotations, mode }) {
   const annotationsByLine = {};
   for (const a of annotations) {
@@ -4108,13 +4282,25 @@ function DiffView({ file, diff, annotations, mode }) {
     if (!(key in annotationsByLine)) annotationsByLine[key] = [];
     annotationsByLine[key].push(a);
   }
-  return /* @__PURE__ */ jsx("div", { className: "diff-view", "data-file-id": file.id, "data-file-path": file.file_path, children: [
-    /* @__PURE__ */ jsx("div", { className: "diff-header", children: [
-      /* @__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 && 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 })
-  ] });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "diff-view",
+      "data-file-id": file.id,
+      "data-file-path": file.file_path,
+      ...isSvgFile(diff.filePath) ? { "data-is-svg": "true" } : {},
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "diff-header", children: [
+          /* @__PURE__ */ jsx("div", { className: "diff-header-file", children: [
+            /* @__PURE__ */ jsx("span", { className: "file-path", children: diff.filePath }),
+            /* @__PURE__ */ jsx("button", { className: "reveal-btn", "data-file-id": file.id, title: "Reveal in file manager", children: raw(revealSvg) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "diff-header-actions", children: /* @__PURE__ */ jsx("span", { className: `file-status ${diff.status}`, children: diff.status }) })
+        ] }),
+        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) {
   const leftAnns = pair.left ? annotationsByLine[`${pair.left.oldNum}:old`] ?? [] : [];
@@ -4637,6 +4823,7 @@ var zoomOutSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
 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 revealSvgIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/><line x1="12" y1="11" x2="12" y2="17"/><polyline points="9 14 12 11 15 14"/></svg>';
 var pageRoutes = new Hono3();
 pageRoutes.get("/", async (c) => {
   const reviewId = c.get("reviewId");
@@ -4684,6 +4871,10 @@ 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-svg-toggle", style: "display:none", children: /* @__PURE__ */ jsx("div", { className: "segmented-control", children: [
+            /* @__PURE__ */ jsx("button", { className: "segment active", "data-svg-mode": "code", children: "Code" }),
+            /* @__PURE__ */ jsx("button", { className: "segment", "data-svg-mode": "rendered", children: "Rendered" })
+          ] }) }),
           /* @__PURE__ */ jsx("div", { className: "diff-toolbar-text", children: [
             /* @__PURE__ */ jsx("div", { className: "diff-toolbar-left", children: [
               /* @__PURE__ */ jsx("div", { className: "segmented-control", children: [
@@ -4719,10 +4910,53 @@ 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 view = c.req.query("view");
   const file = await getReviewFile(fileId);
   if (!file) return c.text("File not found", 404);
+  const diff = JSON.parse(file.diff_data ?? "{}");
+  if (view === "rendered" && isSvgFile(file.file_path)) {
+    const repoRoot = c.get("repoRoot");
+    const review = await getReview(file.review_id);
+    let fontWarning = false;
+    let svgBaseWidth = 300;
+    let svgBaseHeight = 150;
+    if (review) {
+      const reviewMode = parseModeString(review.mode);
+      const oldImg = diff.status !== "added" ? getOldImage(reviewMode, file.file_path, diff.oldPath ?? null, repoRoot) : null;
+      const newImg = diff.status !== "deleted" ? getNewImage(reviewMode, file.file_path, repoRoot) : null;
+      const svgData = newImg ?? oldImg;
+      if (svgData) {
+        const dims = parseSvgDimensions(svgData.data.toString("utf-8"));
+        svgBaseWidth = dims.width;
+        svgBaseHeight = dims.height;
+      }
+      if (oldImg && svgUsesExternalFonts(oldImg.data) || newImg && svgUsesExternalFonts(newImg.data)) {
+        fontWarning = true;
+      }
+    }
+    const html2 = /* @__PURE__ */ jsx("div", { className: "diff-view", "data-file-id": file.id, "data-file-path": file.file_path, "data-is-svg": "true", children: [
+      /* @__PURE__ */ jsx("div", { className: "diff-header", children: [
+        /* @__PURE__ */ jsx("div", { className: "diff-header-file", children: [
+          /* @__PURE__ */ jsx("span", { className: "file-path", children: diff.filePath }),
+          /* @__PURE__ */ jsx("button", { className: "reveal-btn", "data-file-id": file.id, title: "Reveal in file manager", children: raw(revealSvgIcon) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "diff-header-actions", children: /* @__PURE__ */ jsx("span", { className: `file-status ${diff.status}`, children: diff.status }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        ImageDiff,
+        {
+          file,
+          diff,
+          fontWarning,
+          baseWidth: svgBaseWidth,
+          baseHeight: svgBaseHeight
+        }
+      )
+    ] });
+    return c.html(html2.toString());
+  }
   const annotations = await getAnnotationsForFile(fileId);
-  let diff = JSON.parse(file.diff_data ?? "{}");
+  let finalDiff = diff;
   if (ignoreWhitespace) {
     const repoRoot = c.get("repoRoot");
     const review = await getReview(file.review_id);
@@ -4730,11 +4964,11 @@ pageRoutes.get("/file/:fileId", async (c) => {
       const reviewMode = parseModeString(review.mode);
       const regenerated = getSingleFileDiff(reviewMode, file.file_path, repoRoot, "-w");
       if (regenerated) {
-        diff = regenerated;
+        finalDiff = regenerated;
       }
     }
   }
-  const html = /* @__PURE__ */ jsx(DiffView, { file, diff, annotations, mode });
+  const html = /* @__PURE__ */ jsx(DiffView, { file, diff: finalDiff, annotations, mode });
   return c.html(html.toString());
 });
 pageRoutes.get("/review/:reviewId", async (c) => {
@@ -4788,6 +5022,10 @@ 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-svg-toggle", style: "display:none", children: /* @__PURE__ */ jsx("div", { className: "segmented-control", children: [
+            /* @__PURE__ */ jsx("button", { className: "segment active", "data-svg-mode": "code", children: "Code" }),
+            /* @__PURE__ */ jsx("button", { className: "segment", "data-svg-mode": "rendered", children: "Rendered" })
+          ] }) }),
           /* @__PURE__ */ jsx("div", { className: "diff-toolbar-text", children: [
             /* @__PURE__ */ jsx("div", { className: "diff-toolbar-left", children: [
               /* @__PURE__ */ jsx("div", { className: "segmented-control", children: [
@@ -4829,10 +5067,10 @@ pageRoutes.get("/history", async (c) => {
 
 // src/server.ts
 function tryServe(fetch2, port) {
-  return new Promise((resolve4, reject) => {
+  return new Promise((resolve5, reject) => {
     const server = serve({ fetch: fetch2, port });
     server.on("listening", () => {
-      resolve4(port);
+      resolve5(port);
     });
     server.on("error", (err) => {
       if (err.code === "EADDRINUSE") {
@@ -4852,13 +5090,13 @@ async function startServer(port, reviewId, repoRoot, options) {
     await next();
   });
   const selfDir = dirname(fileURLToPath(import.meta.url));
-  const distDir = existsSync5(join6(selfDir, "client", "styles.css")) ? join6(selfDir, "client") : join6(selfDir, "..", "dist", "client");
+  const distDir = existsSync6(join7(selfDir, "client", "styles.css")) ? join7(selfDir, "client") : join7(selfDir, "..", "dist", "client");
   app.get("/static/styles.css", (c) => {
-    const css = readFileSync7(join6(distDir, "styles.css"), "utf-8");
+    const css = readFileSync8(join7(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 = readFileSync7(join6(distDir, "app.global.js"), "utf-8");
+    const js = readFileSync8(join7(distDir, "app.global.js"), "utf-8");
     return c.text(js, 200, { "Content-Type": "application/javascript", "Cache-Control": "no-cache" });
   });
   app.route("/api", apiRoutes);
@@ -4894,8 +5132,8 @@ async function startServer(port, reviewId, repoRoot, options) {
 }
 
 // src/skills.ts
-import { existsSync as existsSync6, mkdirSync as mkdirSync5, readFileSync as readFileSync8, writeFileSync as writeFileSync5 } from "fs";
-import { join as join7 } from "path";
+import { existsSync as existsSync7, mkdirSync as mkdirSync5, readFileSync as readFileSync9, writeFileSync as writeFileSync5 } from "fs";
+import { join as join8 } from "path";
 var SKILL_VERSION = 1;
 function versionHeader() {
   return `<!-- glassbox-skill-version: ${SKILL_VERSION} -->`;
@@ -4906,8 +5144,8 @@ function parseVersionHeader(content) {
   return parseInt(match[1], 10);
 }
 function updateFile(path, content) {
-  if (existsSync6(path)) {
-    const existing = readFileSync8(path, "utf-8");
+  if (existsSync7(path)) {
+    const existing = readFileSync9(path, "utf-8");
     const version = parseVersionHeader(existing);
     if (version !== null && version >= SKILL_VERSION) {
       return false;
@@ -4933,7 +5171,7 @@ function skillBody() {
   ].join("\n");
 }
 function ensureClaudeSkills(cwd) {
-  const dir = join7(cwd, ".claude", "skills", "glassbox");
+  const dir = join8(cwd, ".claude", "skills", "glassbox");
   mkdirSync5(dir, { recursive: true });
   const content = [
     "---",
@@ -4946,10 +5184,10 @@ function ensureClaudeSkills(cwd) {
     skillBody(),
     ""
   ].join("\n");
-  return updateFile(join7(dir, "SKILL.md"), content);
+  return updateFile(join8(dir, "SKILL.md"), content);
 }
 function ensureCursorRules(cwd) {
-  const rulesDir = join7(cwd, ".cursor", "rules");
+  const rulesDir = join8(cwd, ".cursor", "rules");
   mkdirSync5(rulesDir, { recursive: true });
   const content = [
     "---",
@@ -4961,10 +5199,10 @@ function ensureCursorRules(cwd) {
     skillBody(),
     ""
   ].join("\n");
-  return updateFile(join7(rulesDir, "glassbox.mdc"), content);
+  return updateFile(join8(rulesDir, "glassbox.mdc"), content);
 }
 function ensureCopilotPrompts(cwd) {
-  const promptsDir = join7(cwd, ".github", "prompts");
+  const promptsDir = join8(cwd, ".github", "prompts");
   mkdirSync5(promptsDir, { recursive: true });
   const content = [
     "---",
@@ -4975,10 +5213,10 @@ function ensureCopilotPrompts(cwd) {
     skillBody(),
     ""
   ].join("\n");
-  return updateFile(join7(promptsDir, "glassbox.prompt.md"), content);
+  return updateFile(join8(promptsDir, "glassbox.prompt.md"), content);
 }
 function ensureWindsurfRules(cwd) {
-  const rulesDir = join7(cwd, ".windsurf", "rules");
+  const rulesDir = join8(cwd, ".windsurf", "rules");
   mkdirSync5(rulesDir, { recursive: true });
   const content = [
     "---",
@@ -4990,39 +5228,39 @@ function ensureWindsurfRules(cwd) {
     skillBody(),
     ""
   ].join("\n");
-  return updateFile(join7(rulesDir, "glassbox.md"), content);
+  return updateFile(join8(rulesDir, "glassbox.md"), content);
 }
 function ensureSkills() {
   const cwd = process.cwd();
   const platforms = [];
-  if (existsSync6(join7(cwd, ".claude"))) {
+  if (existsSync7(join8(cwd, ".claude"))) {
     if (ensureClaudeSkills(cwd)) platforms.push("Claude Code");
   }
-  if (existsSync6(join7(cwd, ".cursor"))) {
+  if (existsSync7(join8(cwd, ".cursor"))) {
     if (ensureCursorRules(cwd)) platforms.push("Cursor");
   }
-  if (existsSync6(join7(cwd, ".github", "prompts")) || existsSync6(join7(cwd, ".github", "copilot-instructions.md"))) {
+  if (existsSync7(join8(cwd, ".github", "prompts")) || existsSync7(join8(cwd, ".github", "copilot-instructions.md"))) {
     if (ensureCopilotPrompts(cwd)) platforms.push("GitHub Copilot");
   }
-  if (existsSync6(join7(cwd, ".windsurf"))) {
+  if (existsSync7(join8(cwd, ".windsurf"))) {
     if (ensureWindsurfRules(cwd)) platforms.push("Windsurf");
   }
   return platforms;
 }
 
 // src/update-check.ts
-import { existsSync as existsSync7, mkdirSync as mkdirSync6, readFileSync as readFileSync9, writeFileSync as writeFileSync6 } from "fs";
+import { existsSync as existsSync8, mkdirSync as mkdirSync6, readFileSync as readFileSync10, writeFileSync as writeFileSync6 } from "fs";
 import { get } from "https";
 import { homedir as homedir3 } from "os";
-import { dirname as dirname2, join as join8 } from "path";
+import { dirname as dirname2, join as join9 } from "path";
 import { fileURLToPath as fileURLToPath2 } from "url";
-var DATA_DIR = join8(homedir3(), ".glassbox");
-var CHECK_FILE = join8(DATA_DIR, "last-update-check");
+var DATA_DIR = join9(homedir3(), ".glassbox");
+var CHECK_FILE = join9(DATA_DIR, "last-update-check");
 var PACKAGE_NAME = "glassbox";
 function getCurrentVersion() {
   try {
     const dir = dirname2(fileURLToPath2(import.meta.url));
-    const pkg = JSON.parse(readFileSync9(join8(dir, "..", "package.json"), "utf-8"));
+    const pkg = JSON.parse(readFileSync10(join9(dir, "..", "package.json"), "utf-8"));
     return pkg.version;
   } catch {
     return "0.0.0";
@@ -5030,8 +5268,8 @@ function getCurrentVersion() {
 }
 function getLastCheckDate() {
   try {
-    if (existsSync7(CHECK_FILE)) {
-      return readFileSync9(CHECK_FILE, "utf-8").trim();
+    if (existsSync8(CHECK_FILE)) {
+      return readFileSync10(CHECK_FILE, "utf-8").trim();
     }
   } catch {
   }
@@ -5048,10 +5286,10 @@ function isFirstUseToday() {
   return last !== today;
 }
 function fetchLatestVersion() {
-  return new Promise((resolve4) => {
+  return new Promise((resolve5) => {
     const req = get(`https://registry.npmjs.org/${PACKAGE_NAME}/latest`, { timeout: 5e3 }, (res) => {
       if (res.statusCode !== 200) {
-        resolve4(null);
+        resolve5(null);
         return;
       }
       let data = "";
@@ -5060,18 +5298,18 @@ function fetchLatestVersion() {
       });
       res.on("end", () => {
         try {
-          resolve4(JSON.parse(data).version);
+          resolve5(JSON.parse(data).version);
         } catch {
-          resolve4(null);
+          resolve5(null);
         }
       });
     });
     req.on("error", () => {
-      resolve4(null);
+      resolve5(null);
     });
     req.on("timeout", () => {
       req.destroy();
-      resolve4(null);
+      resolve5(null);
     });
   });
 }
@@ -5209,7 +5447,7 @@ function parseArgs(argv) {
         port = parseInt(args[++i], 10);
         break;
       case "--data-dir":
-        dataDir = resolve3(args[++i]);
+        dataDir = resolve4(args[++i]);
         break;
       case "--resume":
         resume = true;
@@ -5265,13 +5503,13 @@ async function main() {
     console.log("AI service test mode enabled \u2014 using mock AI responses");
   }
   if (debug) {
-    console.log(`[debug] Build timestamp: ${"2026-03-17T07:45:42.146Z"}`);
+    console.log(`[debug] Build timestamp: ${"2026-03-19T04:05:06.487Z"}`);
   }
   if (projectDir) {
     process.chdir(projectDir);
   }
   if (dataDir === null) {
-    dataDir = join9(process.cwd(), ".glassbox");
+    dataDir = join10(process.cwd(), ".glassbox");
   }
   if (demo !== null) {
     const scenario = DEMO_SCENARIOS.find((s) => s.id === demo);
@@ -5283,7 +5521,7 @@ async function main() {
       }
       process.exit(1);
     }
-    dataDir = join9(tmpdir(), `glassbox-demo-${demo}-${Date.now()}`);
+    dataDir = join10(tmpdir(), `glassbox-demo-${demo}-${Date.now()}`);
     setDemoMode(demo);
     console.log(`
   DEMO MODE: ${scenario.label}