@youtyan/code-viewer 0.1.9 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youtyan/code-viewer",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Local browser-based code and git diff viewer",
   "type": "module",
   "bin": {

package/web/app.js

@@ -6393,8 +6393,20 @@
     const VIRTUAL_SOURCE_ROW_HEIGHT = 20;
     const VIRTUAL_SOURCE_HIGHLIGHT_MAX_LINE_LENGTH = 2000;
     let highlightLoadPromise = null;
+    let sourceShikiLoadPromise = null;
     let highlightConfigured = false;
     let PROJECT_NAME = "";
+    let REPO_SIDEBAR_REF = null;
+    let REPO_SIDEBAR_LOAD_REF = null;
+    let REPO_SIDEBAR_LOAD = null;
+    function invalidateRepoSidebar() {
+      REPO_SIDEBAR_REF = null;
+      REPO_SIDEBAR_LOAD_REF = null;
+      REPO_SIDEBAR_LOAD = null;
+    }
+    function isRepoSidebarReusable(ref) {
+      return REPO_SIDEBAR_REF === (ref || "worktree") && isRepositorySidebarMode();
+    }
     const STATE = (() => {
       const igRaw = localStorage.getItem("gdp:ignore-ws");
       const fallbackRange = {
@@ -6487,6 +6499,100 @@
       });
       return highlightLoadPromise;
     }
+    const SOURCE_SHIKI_LANGS = Array.from(new Set([
+      "bash",
+      "bibtex",
+      "c",
+      "clojure",
+      "cmake",
+      "cpp",
+      "csharp",
+      "css",
+      "dart",
+      "diff",
+      "dockerfile",
+      "elixir",
+      "erlang",
+      "fortran",
+      "go",
+      "gradle",
+      "graphql",
+      "haskell",
+      "html",
+      "java",
+      "javascript",
+      "json",
+      "julia",
+      "kotlin",
+      "lua",
+      "make",
+      "markdown",
+      "nix",
+      "ocaml",
+      "perl",
+      "php",
+      "properties",
+      "protobuf",
+      "python",
+      "r",
+      "rst",
+      "ruby",
+      "rust",
+      "scala",
+      "scss",
+      "sql",
+      "swift",
+      "terraform",
+      "tex",
+      "toml",
+      "typescript",
+      "vim",
+      "vue",
+      "xml",
+      "yaml"
+    ]));
+    const SOURCE_SHIKI_LANG_ALIASES = {
+      makefile: "make",
+      objectivec: "c",
+      "objective-c": "c",
+      "objective-cpp": "cpp",
+      starlark: "python"
+    };
+    function normalizeSourceShikiLang(lang) {
+      if (!lang)
+        return null;
+      return SOURCE_SHIKI_LANG_ALIASES[lang] || lang;
+    }
+    function loadSourceShikiHighlighter() {
+      if (!sourceShikiLoadPromise) {
+        sourceShikiLoadPromise = import("/shiki.js").then((mod) => {
+          const typed = mod;
+          const langs = typed.bundledLanguages ? SOURCE_SHIKI_LANGS.filter((lang) => !!typed.bundledLanguages?.[lang]) : SOURCE_SHIKI_LANGS;
+          return typed.createHighlighter({
+            themes: ["github-light", "github-dark"],
+            langs
+          });
+        }).catch(() => null);
+      }
+      return sourceShikiLoadPromise;
+    }
+    function sourceShikiLines(textValue, lang, highlighter) {
+      try {
+        const html = highlighter.codeToHtml(textValue || " ", {
+          lang,
+          themes: { light: "github-light", dark: "github-dark" },
+          defaultColor: false
+        });
+        const template = document.createElement("template");
+        template.innerHTML = html;
+        const renderedLines = Array.from(template.content.querySelectorAll(".line"));
+        if (!renderedLines.length)
+          return null;
+        return renderedLines.map((line) => line.innerHTML || " ");
+      } catch {
+        return null;
+      }
+    }
     function rerenderLoadedDiffs() {
       document.querySelectorAll(".gdp-file-shell.loaded").forEach((card) => {
         const data = card._diffData;
@@ -6554,10 +6660,10 @@
     }
     function setFolderIcon(el, collapsed) {
       const path = collapsed ? FOLDER_ICON_PATHS.closed : FOLDER_ICON_PATHS.open;
-      el.innerHTML = '<svg class="octicon octicon-file-directory-' + (collapsed ? "fill" : "open-fill") + '" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true">' + '<path fill="currentColor" d="' + path + '"></path></svg>';
+      el.innerHTML = '<svg class="octicon octicon-file-directory-' + (collapsed ? "fill" : "open-fill") + '" viewBox="0 0 16 16" width="16" height="16" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="' + path + '"></path></svg>';
     }
     function setChevronIcon(el) {
-      el.innerHTML = '<svg class="octicon octicon-chevron-down" viewBox="0 0 12 12" width="12" height="12" fill="currentColor" aria-hidden="true">' + '<path fill="currentColor" d="' + CHEVRON_DOWN_12_PATH + '"></path></svg>';
+      el.innerHTML = '<svg class="octicon octicon-chevron-down" viewBox="0 0 12 12" width="12" height="12" fill="currentColor" aria-hidden="true"><path fill="currentColor" d="' + CHEVRON_DOWN_12_PATH + '"></path></svg>';
     }
     function iconSvg(className, paths) {
       const pathList = Array.isArray(paths) ? paths : [paths];
@@ -6768,6 +6874,8 @@
       ul.innerHTML = "";
       ul.classList.toggle("tree", STATE.sbView === "tree");
       STATE.files = files;
+      if (!onFileClick)
+        REPO_SIDEBAR_REF = null;
       if (STATE.sbView === "tree") {
         const root = buildTree(files);
         renderTreeNode(root, 0, ul, onFileClick);
@@ -6827,7 +6935,7 @@
       if (meta.totals) {
         const t2 = document.createElement("span");
         t2.className = "num";
-        t2.innerHTML = '<span class="add">+' + meta.totals.additions + "</span> " + '<span class="del">−' + meta.totals.deletions + "</span> " + "<span>" + meta.totals.files + " files</span>";
+        t2.innerHTML = '<span class="add">+' + meta.totals.additions + "</span> " + '<span class="del">−' + meta.totals.deletions + "</span> <span>" + meta.totals.files + " files</span>";
         el.appendChild(t2);
       }
       const u2 = document.createElement("span");
@@ -7168,6 +7276,7 @@
       });
       if (!res.ok)
         throw new Error(await res.text());
+      invalidateRepoSidebar();
       await loadRepo();
     }
     function createRepoUploadPanel(path) {
@@ -7282,8 +7391,8 @@
       removeStandaloneSource();
       $("#empty").classList.add("hidden");
       $("#diff").replaceChildren();
-      $("#filelist").replaceChildren();
-      $("#totals").textContent = "";
+      if (!isRepoSidebarReusable(meta.ref))
+        $("#totals").textContent = "";
       STATE.files = [];
       LOAD_QUEUE.length = 0;
       renderRepoBlobSidebar(meta.path || "", meta.ref);
@@ -7426,14 +7535,28 @@
     }
     function renderRepoBlobSidebar(currentPath, ref) {
       syncRepoTargetInput(ref);
+      const normalizedRef = ref || "worktree";
+      if (isRepoSidebarReusable(normalizedRef)) {
+        activateRepoSidebarPath(currentPath);
+        return Promise.resolve();
+      }
+      if (REPO_SIDEBAR_LOAD && REPO_SIDEBAR_LOAD_REF === normalizedRef) {
+        return REPO_SIDEBAR_LOAD.then(() => {
+          activateRepoSidebarPath(currentPath);
+        });
+      }
       const params = new URLSearchParams;
-      params.set("ref", ref || "worktree");
+      params.set("ref", normalizedRef);
       params.set("recursive", "1");
-      return trackLoad(fetch("/_tree?" + params.toString()).then((r2) => {
+      REPO_SIDEBAR_LOAD_REF = normalizedRef;
+      const load2 = trackLoad(fetch("/_tree?" + params.toString()).then((r2) => {
         if (!r2.ok)
           throw new Error("failed to load repository tree");
         return r2.json();
       })).then((meta) => {
+        const activeRepoRef = repoFileTargetFromRoute() || (STATE.route.screen === "repo" ? STATE.route.ref : "");
+        if ((activeRepoRef || "worktree") !== normalizedRef)
+          return;
         const files = meta.entries.map((entry, index) => ({
           order: index + 1,
           path: entry.path,
@@ -7443,19 +7566,31 @@
         }));
         renderSidebar(files, (file) => {
           if (file.type === "tree") {
-            setRoute(repoRoute(ref, file.path));
+            setRoute(repoRoute(normalizedRef, file.path));
             loadRepo();
             return;
           }
-          setRoute({ screen: "file", path: file.path, ref, view: "blob", range: currentRange() });
-          renderStandaloneSource({ path: file.path, ref });
+          setRoute({ screen: "file", path: file.path, ref: normalizedRef, view: "blob", range: currentRange() });
+          renderStandaloneSource({ path: file.path, ref: normalizedRef });
         });
-        markActive(currentPath);
-        applyFilter();
+        REPO_SIDEBAR_REF = normalizedRef;
+        activateRepoSidebarPath(currentPath);
       }).catch(() => {
+        REPO_SIDEBAR_REF = null;
         renderSidebar([], undefined);
         $("#totals").textContent = "Cannot load tree";
+      }).finally(() => {
+        if (REPO_SIDEBAR_LOAD === load2) {
+          REPO_SIDEBAR_LOAD_REF = null;
+          REPO_SIDEBAR_LOAD = null;
+        }
       });
+      REPO_SIDEBAR_LOAD = load2;
+      return load2;
+    }
+    function activateRepoSidebarPath(currentPath) {
+      markActive(currentPath);
+      applyFilter();
     }
     function createPlaceholder(f2) {
       const card = document.createElement("div");
@@ -7470,7 +7605,7 @@
       }
       const head = document.createElement("div");
       head.className = "gdp-shell-header";
-      head.innerHTML = '<span class="status-pill ' + escapeHtml2(f2.status || "M") + '">' + escapeHtml2(f2.status || "M") + "</span>" + '<span class="path">' + escapeHtml2(f2.display_path || f2.path) + "</span>" + '<span class="stats">' + '<span class="a">+' + (f2.additions || 0) + "</span>" + '<span class="d">−' + (f2.deletions || 0) + "</span>" + "</span>" + '<span class="size-tag ' + escapeHtml2(f2.size_class || "") + '">' + escapeHtml2(f2.size_class || "") + "</span>" + '<span class="loading-indicator" hidden>loading…</span>';
+      head.innerHTML = '<span class="status-pill ' + escapeHtml2(f2.status || "M") + '">' + escapeHtml2(f2.status || "M") + '</span><span class="path">' + escapeHtml2(f2.display_path || f2.path) + '</span><span class="stats"><span class="a">+' + (f2.additions || 0) + "</span>" + '<span class="d">−' + (f2.deletions || 0) + '</span></span><span class="size-tag ' + escapeHtml2(f2.size_class || "") + '">' + escapeHtml2(f2.size_class || "") + "</span>" + '<span class="loading-indicator" hidden>loading…</span>';
       card.appendChild(head);
       const body = document.createElement("div");
       body.className = "gdp-shell-body";
@@ -7908,7 +8043,7 @@
         const button = document.createElement("button");
         button.className = "gdp-expand-btn";
         button.title = spec.title;
-        button.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true">' + '<path fill="currentColor" d="' + EXPAND_ICON_PATHS[spec.direction] + '"/></svg>';
+        button.innerHTML = '<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path fill="currentColor" d="' + EXPAND_ICON_PATHS[spec.direction] + '"/></svg>';
         button.addEventListener("click", (e2) => {
           e2.stopPropagation();
           if (button.disabled)
@@ -8006,9 +8141,9 @@
           const num = sideIndex === 0 ? oldStart + i2 : newStart + i2;
           lnHtml = '<td class="d2h-code-side-linenumber d2h-cntx">' + num + "</td>";
         } else {
-          lnHtml = '<td class="d2h-code-linenumber d2h-cntx">' + '<div class="line-num1">' + (oldStart + i2) + "</div>" + '<div class="line-num2">' + (newStart + i2) + "</div>" + "</td>";
+          lnHtml = '<td class="d2h-code-linenumber d2h-cntx"><div class="line-num1">' + (oldStart + i2) + '</div><div class="line-num2">' + (newStart + i2) + "</div></td>";
         }
-        tr.innerHTML = lnHtml + '<td class="d2h-cntx">' + '<div class="' + (isSplit ? "d2h-code-side-line" : "d2h-code-line") + '">' + '<span class="d2h-code-line-prefix">&nbsp;</span>' + '<span class="d2h-code-line-ctn">' + escapeHtmlText(lines[i2]) + "</span>" + "</div>" + "</td>";
+        tr.innerHTML = lnHtml + '<td class="d2h-cntx"><div class="' + (isSplit ? "d2h-code-side-line" : "d2h-code-line") + '"><span class="d2h-code-line-prefix">&nbsp;</span><span class="d2h-code-line-ctn">' + escapeHtmlText(lines[i2]) + "</span></div></td>";
         frag.appendChild(tr);
       }
       tbody.insertBefore(frag, anchor);
@@ -8135,6 +8270,269 @@
     function isPreviewableSource(path) {
       return /\.(md|markdown|mdown|mkdn|mdx)$/i.test(path);
     }
+    const EXT_TO_LANG = {
+      js: "javascript",
+      mjs: "javascript",
+      cjs: "javascript",
+      ts: "typescript",
+      tsx: "typescript",
+      jsx: "javascript",
+      py: "python",
+      rb: "ruby",
+      go: "go",
+      rs: "rust",
+      java: "java",
+      kt: "kotlin",
+      swift: "swift",
+      c: "c",
+      h: "c",
+      cc: "cpp",
+      cpp: "cpp",
+      hpp: "cpp",
+      cs: "csharp",
+      php: "php",
+      lua: "lua",
+      sh: "bash",
+      bash: "bash",
+      zsh: "bash",
+      fish: "bash",
+      sql: "sql",
+      json: "json",
+      yaml: "yaml",
+      yml: "yaml",
+      toml: "toml",
+      tf: "terraform",
+      tfvars: "terraform",
+      hcl: "terraform",
+      xml: "xml",
+      html: "xml",
+      vue: "xml",
+      css: "css",
+      scss: "scss",
+      md: "markdown",
+      dockerfile: "dockerfile",
+      proto: "protobuf",
+      gradle: "gradle",
+      properties: "properties",
+      patch: "diff",
+      diff: "diff",
+      nix: "nix",
+      cue: "cue",
+      rego: "rego",
+      bicep: "bicep",
+      bazel: "starlark",
+      bzl: "starlark",
+      cmake: "cmake",
+      groovy: "groovy",
+      dart: "dart",
+      scala: "scala",
+      clj: "clojure",
+      cljs: "clojure",
+      cljc: "clojure",
+      edn: "clojure",
+      ex: "elixir",
+      exs: "elixir",
+      erl: "erlang",
+      hrl: "erlang",
+      hs: "haskell",
+      lhs: "haskell",
+      ml: "ocaml",
+      mli: "ocaml",
+      jl: "julia",
+      r: "r",
+      rmd: "r",
+      pl: "perl",
+      pm: "perl",
+      tcl: "tcl",
+      vim: "vim",
+      f: "fortran",
+      f90: "fortran",
+      m: "objective-c",
+      mm: "objective-cpp",
+      tex: "tex",
+      bib: "bibtex",
+      rst: "rst"
+    };
+    const TEXT_SOURCE_EXTENSIONS = new Set([
+      ...Object.keys(EXT_TO_LANG),
+      "txt",
+      "md",
+      "markdown",
+      "mdown",
+      "mkdn",
+      "mdx",
+      "json",
+      "jsonc",
+      "csv",
+      "tsv",
+      "yaml",
+      "yml",
+      "toml",
+      "hcl",
+      "tf",
+      "tfvars",
+      "tfstate",
+      "xml",
+      "html",
+      "htm",
+      "css",
+      "scss",
+      "sass",
+      "less",
+      "js",
+      "jsx",
+      "mjs",
+      "cjs",
+      "ts",
+      "tsx",
+      "mts",
+      "cts",
+      "vue",
+      "svelte",
+      "astro",
+      "rs",
+      "go",
+      "py",
+      "rb",
+      "php",
+      "java",
+      "kt",
+      "kts",
+      "c",
+      "cc",
+      "cpp",
+      "cxx",
+      "h",
+      "hpp",
+      "cs",
+      "swift",
+      "sh",
+      "bash",
+      "zsh",
+      "fish",
+      "ps1",
+      "sql",
+      "graphql",
+      "graphqls",
+      "gql",
+      "ini",
+      "conf",
+      "env",
+      "properties",
+      "gitignore",
+      "dockerignore",
+      "editorconfig",
+      "lock",
+      "log",
+      "patch",
+      "diff",
+      "sum",
+      "mk",
+      "proto",
+      "thrift",
+      "prisma",
+      "gradle",
+      "cmake",
+      "nix",
+      "cue",
+      "rego",
+      "bicep",
+      "bazel",
+      "bzl",
+      "dart",
+      "scala",
+      "clj",
+      "cljs",
+      "cljc",
+      "edn",
+      "ex",
+      "exs",
+      "erl",
+      "hrl",
+      "hs",
+      "lhs",
+      "ml",
+      "mli",
+      "jl",
+      "r",
+      "rmd",
+      "pl",
+      "pm",
+      "tcl",
+      "vim",
+      "groovy",
+      "f",
+      "f90",
+      "m",
+      "mm",
+      "pas",
+      "tex",
+      "bib",
+      "rst",
+      "adoc",
+      "org",
+      "ipynb",
+      "ejs",
+      "hbs",
+      "mustache",
+      "liquid",
+      "pug"
+    ]);
+    const TEXT_SOURCE_FILENAMES = new Set([
+      "readme",
+      "license",
+      "copying",
+      "authors",
+      "contributors",
+      "notice",
+      "changelog",
+      "todo",
+      "manifest",
+      "version",
+      "codeowners",
+      "go.mod",
+      "build.bazel",
+      "workspace.bazel",
+      "module.bazel",
+      "gemfile",
+      "rakefile",
+      "procfile",
+      "brewfile",
+      "gnumakefile",
+      "bsdmakefile",
+      ".gitattributes",
+      ".gitmodules",
+      ".npmrc",
+      ".nvmrc",
+      ".yarnrc",
+      ".prettierrc",
+      ".eslintrc",
+      ".babelrc",
+      ".stylelintrc"
+    ]);
+    const FILENAME_TO_LANG = {
+      dockerfile: "dockerfile",
+      makefile: "makefile",
+      gnumakefile: "makefile",
+      bsdmakefile: "makefile",
+      "go.mod": "go",
+      "build.bazel": "starlark",
+      "workspace.bazel": "starlark",
+      "module.bazel": "starlark"
+    };
+    function sourceFileName(path) {
+      return (path.split("/").pop() || path).toLowerCase();
+    }
+    function sourceFileExtension(name) {
+      const index = name.lastIndexOf(".");
+      return index >= 0 ? name.slice(index + 1) : "";
+    }
+    function isDockerfileName(name) {
+      return /^dockerfile(?:[.-].+)?$/i.test(name);
+    }
+    function isMakefileName(name) {
+      return /^makefile(?:[.-].+)?$/i.test(name);
+    }
     function sourceDisplayKind(path) {
       if (isVideo(path))
         return "video";
@@ -8142,9 +8540,13 @@
         return "image";
       if (/\.pdf$/i.test(path))
         return "pdf";
-      if (/\.(txt|md|markdown|mdown|mkdn|mdx|json|jsonc|csv|tsv|ya?ml|toml|xml|html?|css|scss|sass|less|js|jsx|mjs|cjs|ts|tsx|mts|cts|vue|svelte|astro|rs|go|py|rb|php|java|kt|kts|c|cc|cpp|cxx|h|hpp|cs|swift|sh|bash|zsh|fish|ps1|sql|graphql|gql|ini|conf|env|gitignore|dockerignore|editorconfig|lock|log)$/i.test(path))
+      const name = sourceFileName(path);
+      const ext = sourceFileExtension(name);
+      if (TEXT_SOURCE_EXTENSIONS.has(ext))
+        return "text";
+      if (TEXT_SOURCE_FILENAMES.has(name))
         return "text";
-      if (/\/?(readme|license|notice|changelog|dockerfile|makefile)$/i.test(path))
+      if (isDockerfileName(name) || isMakefileName(name))
         return "text";
       return "unsupported";
     }
@@ -8255,12 +8657,14 @@
         header.textContent = target.path + " @ " + target.ref;
       }
       const lang = inferLang(target.path);
-      const hljsRef = STATE.syntaxHighlight ? await loadSyntaxHighlighter() : null;
+      const usesVirtualSource = shouldVirtualizeSource(textValue, lines) && !isVirtualSourceDisabled();
+      const hljsRef = STATE.syntaxHighlight && usesVirtualSource ? await loadSyntaxHighlighter() : null;
+      const sourceShikiRef = STATE.syntaxHighlight && !usesVirtualSource ? await loadSourceShikiHighlighter() : null;
       if (signal?.aborted)
         return false;
       const previewable = isPreviewableSource(target.path);
       const tabsHost = card.querySelector(".gdp-file-detail-tabs");
-      if (shouldVirtualizeSource(textValue, lines) && !isVirtualSourceDisabled()) {
+      if (usesVirtualSource) {
         const virtualCode = renderVirtualSource(target, textValue, lines, hljsRef, lang);
         if (previewable) {
           const { tabs: tabs2, codeButton: codeButton2, previewButton: previewButton2 } = createSourceTabs("preview");
@@ -8316,6 +8720,8 @@
       const table2 = document.createElement("table");
       table2.className = "gdp-source-table";
       const tbody = document.createElement("tbody");
+      const sourceShikiLang = normalizeSourceShikiLang(lang);
+      const shikiLines = sourceShikiRef && sourceShikiLang ? sourceShikiLines(textValue, sourceShikiLang, sourceShikiRef) : null;
       for (let index = 0;index < lines.length; index++) {
         if (signal?.aborted)
           return false;
@@ -8326,13 +8732,9 @@
         num.textContent = String(index + 1);
         const code2 = document.createElement("td");
         code2.className = "gdp-source-line-code";
-        if (hljsRef && hljsRef.highlight && lang && (!hljsRef.getLanguage || hljsRef.getLanguage(lang))) {
-          try {
-            code2.innerHTML = hljsRef.highlight(line || " ", { language: lang, ignoreIllegals: true }).value;
-            code2.classList.add("hljs");
-          } catch {
-            code2.textContent = line || " ";
-          }
+        if (shikiLines && shikiLines[index] != null) {
+          code2.innerHTML = shikiLines[index] || " ";
+          code2.classList.add("shiki");
         } else {
           code2.textContent = line || " ";
         }
@@ -9005,46 +9407,15 @@
         });
       }
     }
-    const EXT_TO_LANG = {
-      js: "javascript",
-      mjs: "javascript",
-      cjs: "javascript",
-      ts: "typescript",
-      tsx: "typescript",
-      jsx: "javascript",
-      py: "python",
-      rb: "ruby",
-      go: "go",
-      rs: "rust",
-      java: "java",
-      kt: "kotlin",
-      swift: "swift",
-      c: "c",
-      h: "c",
-      cc: "cpp",
-      cpp: "cpp",
-      hpp: "cpp",
-      cs: "csharp",
-      php: "php",
-      lua: "lua",
-      sh: "bash",
-      bash: "bash",
-      zsh: "bash",
-      fish: "bash",
-      sql: "sql",
-      json: "json",
-      yaml: "yaml",
-      yml: "yaml",
-      toml: "toml",
-      xml: "xml",
-      html: "xml",
-      vue: "xml",
-      css: "css",
-      scss: "scss",
-      md: "markdown",
-      dockerfile: "dockerfile"
-    };
     function inferLang(path) {
+      const name = sourceFileName(path);
+      const fileLang = FILENAME_TO_LANG[name];
+      if (fileLang)
+        return fileLang;
+      if (isDockerfileName(name))
+        return "dockerfile";
+      if (isMakefileName(name))
+        return "makefile";
       const m = path.match(/\.([^.]+)$/);
       if (!m)
         return null;
@@ -9174,7 +9545,7 @@
         leftHTML = mediaTag(path, "HEAD");
         rightHTML = mediaTag(path, "worktree");
       }
-      container.innerHTML = '<div class="media-side"><div class="media-label del">Before</div>' + leftHTML + "</div>" + '<div class="media-side"><div class="media-label add">After</div>' + rightHTML + "</div>";
+      container.innerHTML = '<div class="media-side"><div class="media-label del">Before</div>' + leftHTML + '</div><div class="media-side"><div class="media-label add">After</div>' + rightHTML + "</div>";
       body.replaceWith(container);
     }
     function setupScrollSpy() {
@@ -9566,7 +9937,7 @@
           const [sha, subject, author, when] = c2.split("\t");
           if (!sha)
             continue;
-          html.push('<div class="rp-item-commit" data-val="' + escapeAttr(sha) + '">' + '<div class="row1">' + '<span class="sha">' + escapeHtml2(sha) + "</span>" + '<span class="subject" title="' + escapeAttr(subject || "") + '">' + escapeHtml2(subject || "") + "</span>" + "</div>" + '<div class="row2">' + '<span class="author">' + escapeHtml2(author || "") + "</span>" + '<span class="when">' + escapeHtml2(when || "") + "</span>" + "</div>" + "</div>");
+          html.push('<div class="rp-item-commit" data-val="' + escapeAttr(sha) + '"><div class="row1"><span class="sha">' + escapeHtml2(sha) + '</span><span class="subject" title="' + escapeAttr(subject || "") + '">' + escapeHtml2(subject || "") + '</span></div><div class="row2"><span class="author">' + escapeHtml2(author || "") + '</span><span class="when">' + escapeHtml2(when || "") + "</span></div></div>");
         }
       } else if (popTab === "branches") {
         const branches = (REFS.branches || []).filter(m);
@@ -9575,7 +9946,7 @@
         }
         for (const b2 of branches) {
           const cur = b2 === REFS.current;
-          html.push('<div class="rp-item-ref" data-val="' + escapeAttr(b2) + '">' + '<span class="name">' + escapeHtml2(b2) + "</span>" + (cur ? '<span class="badge cur">current</span>' : '<span class="badge">branch</span>') + "</div>");
+          html.push('<div class="rp-item-ref" data-val="' + escapeAttr(b2) + '"><span class="name">' + escapeHtml2(b2) + "</span>" + (cur ? '<span class="badge cur">current</span>' : '<span class="badge">branch</span>') + "</div>");
         }
       } else if (popTab === "tags") {
         const tags = (REFS.tags || []).filter(m);
@@ -9583,7 +9954,7 @@
           html.push('<div class="rp-empty">no tags</div>');
         }
         for (const t2 of tags) {
-          html.push('<div class="rp-item-ref" data-val="' + escapeAttr(t2) + '">' + '<span class="name">' + escapeHtml2(t2) + "</span>" + '<span class="badge">tag</span>' + "</div>");
+          html.push('<div class="rp-item-ref" data-val="' + escapeAttr(t2) + '"><span class="name">' + escapeHtml2(t2) + '</span><span class="badge">tag</span></div>');
         }
       }
       popBody.innerHTML = html.join("");
@@ -9826,6 +10197,7 @@
         clearTimeout(sseTimer);
       sseTimer = setTimeout(() => {
         sseTimer = null;
+        invalidateRepoSidebar();
         const savedScroll = window.scrollY;
         const savedActive = STATE.activeFile;
         load().then(() => {

package/web/shiki.js

@@ -13178,5 +13178,6 @@ var createHighlighter = /* @__PURE__ */ createBundledHighlighter({
   engine: () => (0, engine_oniguruma_exports.createOnigurumaEngine)(Promise.resolve().then(() => (init_wasm2(), exports_wasm2)))
 });
 export {
-  createHighlighter
+  createHighlighter,
+  bundledLanguages
 };

package/web/style.css

@@ -1660,6 +1660,14 @@ table.d2h-diff-table .d2h-code-line-prefix {
 .gdp-source-line-code.hljs {
   background: var(--bg);
 }
+.gdp-source-line-code.shiki,
+.gdp-source-line-code.shiki span {
+  color: var(--shiki-light) !important;
+}
+[data-theme="dark"] .gdp-source-line-code.shiki,
+[data-theme="dark"] .gdp-source-line-code.shiki span {
+  color: var(--shiki-dark) !important;
+}
 .gdp-source-virtual {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);

package/web-src/server/cache.ts

@@ -1,6 +1,10 @@
+import { lstatSync } from 'node:fs';
+import { join } from 'node:path';
+
 // Short enough that a browser reload self-heals stale git data, while still
 // coalescing bursts from one render pass.
 export const CACHE_TTL_MS = 1500;
+export const MAX_TIMED_CACHE_ENTRIES = 200;
 
 export type TimedCacheEntry<T> = T & { storedAt: number };
 
@@ -11,3 +15,50 @@ export function cacheFresh<T>(
 ): cached is TimedCacheEntry<T> {
   return !!cached && now - cached.storedAt <= ttlMs;
 }
+
+export function setTimedCacheEntry<T>(
+  cache: Map<string, TimedCacheEntry<T>>,
+  key: string,
+  value: T,
+  now = Date.now(),
+  maxEntries = MAX_TIMED_CACHE_ENTRIES,
+): void {
+  cache.set(key, { ...value, storedAt: now });
+  while (cache.size > maxEntries) {
+    const oldest = cache.keys().next().value;
+    if (oldest === undefined) break;
+    cache.delete(oldest);
+  }
+}
+
+export function worktreeFileSignature(path: string, cwd: string): string {
+  try {
+    const stats = lstatSync(join(cwd, path));
+    const inode = 'ino' in stats ? stats.ino : 0;
+    return `state:file|size:${stats.size}|mtime:${stats.mtimeMs}|ctime:${stats.ctimeMs}|ino:${inode}`;
+  } catch {
+    return 'state:missing';
+  }
+}
+
+export function fileDiffCacheKey(options: {
+  path: string;
+  oldPath?: string | null;
+  isUntracked: boolean;
+  range: { from?: string; to?: string };
+  extras: string[];
+  args: string[];
+  cwd: string;
+}): string {
+  const worktreeTarget = options.range.from === 'worktree' || !options.range.to || options.range.to === 'worktree';
+  if (options.isUntracked && !worktreeTarget) {
+    throw new Error('untracked file diffs require a worktree range');
+  }
+  const signature = worktreeTarget
+    ? `\0${worktreeFileSignature(options.path, options.cwd)}`
+    : '';
+  if (options.isUntracked) {
+    return `u\0${options.path}${signature}\0${options.extras.join('\0')}`;
+  }
+  return `t\0${options.path}\0${options.oldPath || ''}${signature}\0${[...options.extras, ...options.args].join('\0')}`;
+}

package/web-src/server/preview.ts

@@ -4,7 +4,7 @@ import { closeSync, constants, existsSync, openSync, readFileSync, realpathSync,
 import { basename, dirname, extname, join, normalize, relative } from 'node:path';
 import { APP_ENTRY_PATHS, SPA_PATHS } from '../routes';
 import type { DiffMeta, FileDiffResponse, FileMeta, FileRangeResponse, RepoTreeResponse } from '../types';
-import { cacheFresh, type TimedCacheEntry } from './cache';
+import { cacheFresh, fileDiffCacheKey, setTimedCacheEntry, type TimedCacheEntry } from './cache';
 import { startDevAssetReload } from './dev-assets';
 import * as git from './git';
 import { isSameWorktreeRange } from './range';
@@ -273,14 +273,14 @@ function handleDiffJson(url: URL) {
       fileCache.clear();
     }
     const body = JSON.stringify(payload);
-    metaCache.set(key, { body, sig, storedAt: Date.now() });
+    setTimedCacheEntry(metaCache, key, { body, sig });
     return new Response(body, { headers: { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' } });
   }
   const cached = metaCache.get(key);
   if (cacheFresh(cached)) return new Response(cached.body, { headers: { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' } });
   const payload = computePayload(extras, range);
   const body = JSON.stringify(payload);
-  metaCache.set(key, { body, sig: JSON.stringify({ ...payload, generation: undefined }), storedAt: Date.now() });
+  setTimedCacheEntry(metaCache, key, { body, sig: JSON.stringify({ ...payload, generation: undefined }) });
   return new Response(body, { headers: { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' } });
 }
 
@@ -420,9 +420,12 @@ function handleFileDiff(url: URL) {
   }
   const { args } = buildRangeArgs(range);
   const oldPath = url.searchParams.get('old_path');
-  const cacheKey = isUntracked
-    ? `u\0${path}\0${extras.join('\0')}`
-    : `t\0${path}\0${oldPath || ''}\0${[...extras, ...args].join('\0')}`;
+  let cacheKey: string;
+  try {
+    cacheKey = fileDiffCacheKey({ path, oldPath, isUntracked, range, extras, args, cwd });
+  } catch {
+    return text('invalid diff range', 400);
+  }
   const cached = fileCache.get(cacheKey);
   let diffText: string;
   let errText = '';
@@ -436,7 +439,7 @@ function handleFileDiff(url: URL) {
       diffText = res.stdout || '';
       if (res.code !== 0) errText = res.stderr;
     }
-    fileCache.set(cacheKey, { diffText, storedAt: Date.now() });
+    setTimedCacheEntry(fileCache, cacheKey, { diffText });
   }
   const mode = url.searchParams.get('mode') || 'full';
   const truncated = mode === 'preview'