@youtyan/code-viewer 0.1.10 → 0.1.12

package/web/app.js

@@ -131,6 +131,164 @@
     };
   }
 
+  // web-src/fuzzy-search.ts
+  function basenameStart(path) {
+    const slash = path.lastIndexOf("/");
+    return slash < 0 ? 0 : slash + 1;
+  }
+  function isBoundary(path, index) {
+    if (index <= 0)
+      return true;
+    const prev = path[index - 1];
+    return prev === "/" || prev === "-" || prev === "_" || prev === "." || prev === " ";
+  }
+  function toRanges(indices) {
+    const ranges = [];
+    for (const index of indices) {
+      const last = ranges[ranges.length - 1];
+      if (last && last.end === index) {
+        last.end = index + 1;
+      } else {
+        ranges.push({ start: index, end: index + 1 });
+      }
+    }
+    return ranges;
+  }
+  function fuzzyMatchPath(query, path) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+      return { score: 0, ranges: [] };
+    const lowerPath = path.toLowerCase();
+    const baseStart = basenameStart(path);
+    const indices = [];
+    let from = 0;
+    let score = 0;
+    for (const ch of q) {
+      const index = lowerPath.indexOf(ch, from);
+      if (index < 0)
+        return null;
+      indices.push(index);
+      score += 10;
+      if (index >= baseStart)
+        score += 8;
+      if (isBoundary(path, index))
+        score += 6;
+      const prev = indices[indices.length - 2];
+      if (prev != null && prev + 1 === index)
+        score += 12;
+      from = index + 1;
+    }
+    const first = indices[0] || 0;
+    score -= Math.min(first, 40);
+    if (indices[0] >= baseStart)
+      score += 20;
+    const basename = lowerPath.slice(baseStart);
+    if (basename.startsWith(q))
+      score += 30;
+    if (basename === q || basename.startsWith(q + "."))
+      score += 25;
+    if (lowerPath.endsWith(q))
+      score += 15;
+    return { score, ranges: toRanges(indices) };
+  }
+  function rankFuzzyPaths(query, items) {
+    return items.map((item) => {
+      const match = fuzzyMatchPath(query, item.path);
+      return match ? { item, score: match.score, ranges: match.ranges } : null;
+    }).filter((item) => item !== null).sort((a, b) => b.score - a.score || a.item.path.localeCompare(b.item.path));
+  }
+  function isGlobPathQuery(query) {
+    return /[*?]/.test(query.trim());
+  }
+  function escapeRegexChar(ch) {
+    return /[\\^$+?.()|{}]/.test(ch) ? "\\" + ch : ch;
+  }
+  function globToRegExp(query) {
+    const pattern = query.trim();
+    if (!pattern)
+      return null;
+    let source = "^";
+    for (let i = 0;i < pattern.length; i++) {
+      const ch = pattern[i];
+      if (ch === "*") {
+        if (pattern[i + 1] === "*") {
+          source += ".*";
+          i++;
+        } else {
+          source += "[^/]*";
+        }
+      } else if (ch === "?") {
+        source += "[^/]";
+      } else if (ch === "[") {
+        const close = pattern.indexOf("]", i + 1);
+        if (close < 0) {
+          source += "\\[";
+        } else {
+          const body = pattern.slice(i + 1, close).replace(/\\/g, "\\\\");
+          source += "[" + body + "]";
+          i = close;
+        }
+      } else {
+        source += escapeRegexChar(ch);
+      }
+    }
+    source += "$";
+    try {
+      return new RegExp(source, "i");
+    } catch {
+      return null;
+    }
+  }
+  function globMatchPath(query, path) {
+    const regex = globToRegExp(query);
+    const baseStart = basenameStart(path);
+    const basename = path.slice(baseStart);
+    if (!regex || !regex.test(path) && (query.includes("/") || !regex.test(basename)))
+      return null;
+    const literal = query.replace(/[*?[\]]+/g, " ").trim().split(/\s+/).filter(Boolean);
+    const ranges = [];
+    const lowerPath = path.toLowerCase();
+    for (const part of literal) {
+      const start = lowerPath.indexOf(part.toLowerCase());
+      if (start >= 0)
+        ranges.push({ start, end: start + part.length });
+    }
+    ranges.sort((a, b) => a.start - b.start || a.end - b.end);
+    const mergedRanges = [];
+    for (const range of ranges) {
+      const last = mergedRanges[mergedRanges.length - 1];
+      if (last && last.end >= range.start) {
+        last.end = Math.max(last.end, range.end);
+      } else {
+        mergedRanges.push({ ...range });
+      }
+    }
+    const score = 1000 - Math.min(path.length, 200) + (path.slice(baseStart).toLowerCase().endsWith(query.replace(/^\*+/, "").toLowerCase()) ? 50 : 0);
+    return { score, ranges: mergedRanges };
+  }
+  function rankPathMatches(query, items) {
+    if (isGlobPathQuery(query)) {
+      return items.map((item) => {
+        const match = globMatchPath(query, item.path);
+        return match ? { item, score: match.score, ranges: match.ranges, mode: "glob" } : null;
+      }).filter((item) => item !== null).sort((a, b) => b.score - a.score || a.item.path.localeCompare(b.item.path));
+    }
+    return rankFuzzyPaths(query, items).map((item) => ({ ...item, mode: "fuzzy" }));
+  }
+
+  // web-src/search-palette.ts
+  var PALETTE_RESULT_LIMIT = 50;
+  function limitPaletteResults(items) {
+    return items.slice(0, PALETTE_RESULT_LIMIT);
+  }
+  function movePaletteSelection(index, count, direction) {
+    if (count <= 0)
+      return -1;
+    if (index < 0)
+      return direction > 0 ? 0 : count - 1;
+    return (index + direction + count) % count;
+  }
+
   // web-src/catch-up.ts
   function shouldCatchUpDiff(route) {
     return route.screen !== "repo" && !(route.screen === "file" && route.view === "blob");
@@ -160,6 +318,24 @@
       to: raw.slice(sep + 2) || fallback.to
     };
   }
+  function parseLineTarget(value) {
+    const raw = value || "";
+    const range = /^(\d+)-(\d+)$/.exec(raw);
+    if (range) {
+      const a = Number(range[1]);
+      const b = Number(range[2]);
+      const start = Math.min(a, b);
+      const end = Math.max(a, b);
+      if (start > 0)
+        return { start, end };
+      return;
+    }
+    const line = Number(raw);
+    return Number.isInteger(line) && line > 0 ? line : undefined;
+  }
+  function formatLineTarget(line) {
+    return typeof line === "number" ? String(line) : line.start + "-" + line.end;
+  }
   function parseRoute(pathname, search, fallbackRange) {
     const params = new URLSearchParams(search);
     const legacyRange = parseLegacyRange(params.get("range"), fallbackRange);
@@ -178,14 +354,20 @@
         };
       case "/todif":
       case "/todiff":
-        return { screen: "diff", range };
+        return {
+          screen: "diff",
+          range,
+          ...params.get("path") ? { path: params.get("path") || "" } : {},
+          ...parseLineTarget(params.get("line")) ? { line: parseLineTarget(params.get("line")) } : {}
+        };
       case "/file": {
         const path = params.get("path") || "";
         const target = params.get("target") || "";
         const ref = target || params.get("ref") || "worktree";
+        const line = parseLineTarget(params.get("line"));
         if (!path)
           return { screen: "unknown", reason: "missing-path", rawPathname: pathname, rawSearch: search, range };
-        return { screen: "file", path, ref, range, view: target ? "blob" : "detail" };
+        return { screen: "file", path, ref, range, view: target ? "blob" : "detail", ...line ? { line } : {} };
       }
       default:
         return { screen: "unknown", reason: "unknown-pathname", rawPathname: pathname, rawSearch: search, range };
@@ -204,11 +386,11 @@
       }
       case "file":
         if (route.view === "blob") {
-          return "/file?path=" + encodeURIComponent(route.path) + "&target=" + encodeURIComponent(route.ref || "worktree");
+          return "/file?path=" + encodeURIComponent(route.path) + "&target=" + encodeURIComponent(route.ref || "worktree") + (route.line ? "&line=" + encodeURIComponent(formatLineTarget(route.line)) : "");
         }
-        return "/file?path=" + encodeURIComponent(route.path) + "&ref=" + encodeURIComponent(route.ref || "worktree") + "&from=" + encodeURIComponent(route.range.from || "") + "&to=" + encodeURIComponent(route.range.to || "worktree");
+        return "/file?path=" + encodeURIComponent(route.path) + "&ref=" + encodeURIComponent(route.ref || "worktree") + "&from=" + encodeURIComponent(route.range.from || "") + "&to=" + encodeURIComponent(route.range.to || "worktree") + (route.line ? "&line=" + encodeURIComponent(formatLineTarget(route.line)) : "");
       case "diff":
-        return "/todif?from=" + encodeURIComponent(route.range.from || "") + "&to=" + encodeURIComponent(route.range.to || "worktree");
+        return "/todif?from=" + encodeURIComponent(route.range.from || "") + "&to=" + encodeURIComponent(route.range.to || "worktree") + (route.path ? "&path=" + encodeURIComponent(route.path) : "") + (route.line ? "&line=" + encodeURIComponent(formatLineTarget(route.line)) : "");
       case "unknown":
         return "/todif?from=" + encodeURIComponent(route.range.from || "") + "&to=" + encodeURIComponent(route.range.to || "worktree");
       default:
@@ -6393,6 +6575,7 @@
     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;
@@ -6498,6 +6681,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;
@@ -6565,10 +6842,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];
@@ -6840,7 +7117,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");
@@ -6859,7 +7136,41 @@
         return;
       enqueueLoad(f2, card, 5);
     }
-    function scrollToFile(path) {
+    function clearDiffLineFocus() {
+      document.querySelectorAll(".gdp-diff-line-target").forEach((row) => {
+        row.classList.remove("gdp-diff-line-target");
+      });
+    }
+    function diffRowLineNumber(row) {
+      const newLine = row.querySelector(".line-num2, td.d2h-code-side-linenumber");
+      const raw = (newLine?.textContent || "").trim();
+      const line = Number(raw);
+      return Number.isInteger(line) && line > 0 ? line : null;
+    }
+    function focusDiffLine(card, line) {
+      const start = lineTargetStart(line);
+      if (!start)
+        return false;
+      const rows = Array.from(card.querySelectorAll("table.d2h-diff-table tr"));
+      const row = rows.find((candidate) => diffRowLineNumber(candidate) === start);
+      if (!row)
+        return false;
+      clearDiffLineFocus();
+      row.classList.add("gdp-diff-line-target");
+      row.scrollIntoView({ behavior: "smooth", block: "center" });
+      return true;
+    }
+    function applyDiffRouteFocus(card) {
+      if (STATE.route.screen !== "diff" || !STATE.route.path || !STATE.route.line)
+        return false;
+      if (card && card.dataset.path !== STATE.route.path)
+        return false;
+      const targetCard = card || document.querySelector(diffCardSelector(STATE.route.path));
+      if (!targetCard)
+        return false;
+      return focusDiffLine(targetCard, STATE.route.line);
+    }
+    function scrollToFile(path, line) {
       const card = document.querySelector(diffCardSelector(path));
       if (!card)
         return;
@@ -6875,7 +7186,9 @@
         if (f2)
           enqueueLoad(f2, card, 10);
       }
-      card.scrollIntoView({ behavior: "smooth", block: "start" });
+      if (!line || !focusDiffLine(card, line)) {
+        card.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
     }
     function markActive(path) {
       STATE.activeFile = path;
@@ -7510,7 +7823,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";
@@ -7948,7 +8261,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)
@@ -8046,9 +8359,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);
@@ -8562,12 +8875,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");
@@ -8623,23 +8938,24 @@
       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;
         const line = lines[index];
         const tr = document.createElement("tr");
+        tr.dataset.line = String(index + 1);
+        tr.classList.toggle("gdp-source-line-target", lineInSourceTarget(index + 1, currentSourceLineTarget(target)));
         const num = document.createElement("td");
         num.className = "gdp-source-line-number";
         num.textContent = String(index + 1);
+        bindSourceLineNumber(num, card, target, 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 || " ";
         }
@@ -8726,6 +9042,69 @@
         url.searchParams.delete("virtual");
       return url.pathname + url.search;
     }
+    function currentSourceLineTarget(target) {
+      const routeTarget = sourceTargetFromRoute();
+      return sourceTargetsEqual(routeTarget, target) && STATE.route.screen === "file" ? STATE.route.line : undefined;
+    }
+    function lineTargetStart(line) {
+      if (!line)
+        return;
+      return typeof line === "number" ? line : line.start;
+    }
+    function lineInSourceTarget(lineNumber, target) {
+      if (!target)
+        return false;
+      if (typeof target === "number")
+        return lineNumber === target;
+      return lineNumber >= target.start && lineNumber <= target.end;
+    }
+    let SOURCE_LINE_DRAG = null;
+    function normalizeSourceLineSelection(start, end) {
+      const a2 = Math.max(1, Math.floor(start));
+      const b2 = Math.max(1, Math.floor(end));
+      const from = Math.min(a2, b2);
+      const to = Math.max(a2, b2);
+      return from === to ? from : { start: from, end: to };
+    }
+    function setSourceLineRoute(target, line) {
+      if (STATE.route.screen !== "file")
+        return;
+      setRoute({
+        screen: "file",
+        path: target.path,
+        ref: target.ref,
+        view: STATE.route.view,
+        range: currentRange(),
+        line
+      }, true);
+    }
+    function syncRenderedSourceLineHighlights(card, target) {
+      const lineTarget = currentSourceLineTarget(target);
+      card.querySelectorAll("[data-line]").forEach((row) => {
+        const line = Number(row.dataset.line || "0");
+        row.classList.toggle("gdp-source-line-target", lineInSourceTarget(line, lineTarget));
+      });
+    }
+    function updateSourceLineSelection(card, target, start, end) {
+      setSourceLineRoute(target, normalizeSourceLineSelection(start, end));
+      syncRenderedSourceLineHighlights(card, target);
+    }
+    function beginSourceLineSelection(event, card, target, line) {
+      event.preventDefault();
+      SOURCE_LINE_DRAG = { target, start: line };
+      updateSourceLineSelection(card, target, line, line);
+    }
+    function bindSourceLineNumber(num, card, target, line) {
+      num.addEventListener("mousedown", (e2) => beginSourceLineSelection(e2, card, target, line));
+      num.addEventListener("mouseenter", () => {
+        if (!SOURCE_LINE_DRAG || !sourceTargetsEqual(SOURCE_LINE_DRAG.target, target))
+          return;
+        updateSourceLineSelection(card, target, SOURCE_LINE_DRAG.start, line);
+      });
+    }
+    document.addEventListener("mouseup", () => {
+      SOURCE_LINE_DRAG = null;
+    });
     function renderVirtualSource(target, textValue, lines, hljsRef, lang) {
       const wrap = document.createElement("div");
       wrap.className = "gdp-source-virtual";
@@ -8764,7 +9143,8 @@
       full.title = "Render every line without virtualization. This can be slow for large files.";
       full.addEventListener("click", (e2) => {
         e2.preventDefault();
-        history.pushState(null, "", full.href);
+        const url = new URL(full.href, window.location.origin);
+        setRoute(parseRoute(url.pathname, url.search, currentRange()), true);
         renderStandaloneSource(target);
       });
       actions.append(copy, full);
@@ -8798,9 +9178,12 @@
         for (let index = start;index < end; index++) {
           const row = document.createElement("div");
           row.className = "gdp-source-virtual-row";
+          row.dataset.line = String(index + 1);
+          row.classList.toggle("gdp-source-line-target", lineInSourceTarget(index + 1, currentSourceLineTarget(target)));
           const num = document.createElement("span");
           num.className = "gdp-source-virtual-line-number";
           num.textContent = String(index + 1);
+          bindSourceLineNumber(num, wrap, target, index + 1);
           const code2 = document.createElement("span");
           code2.className = "gdp-source-virtual-line-code";
           const line = lines[index] ?? "";
@@ -9048,6 +9431,7 @@
             return;
           if (!rendered)
             return;
+          scrollStandaloneSourceLine(card, lineTargetStart(STATE.route.screen === "file" ? STATE.route.line : undefined));
           finishSourceLoad(req);
         }
       } catch (err) {
@@ -9061,6 +9445,19 @@
         renderSourceError(card, target, "Cannot load " + target.path + " at " + target.ref);
       }
     }
+    function scrollStandaloneSourceLine(card, line) {
+      if (!line || line < 1)
+        return;
+      const virtualScroller = card.querySelector(".gdp-source-virtual-scroller");
+      if (virtualScroller) {
+        const centeredOffset = virtualScroller.clientHeight / 2 - VIRTUAL_SOURCE_ROW_HEIGHT / 2;
+        virtualScroller.scrollTop = Math.max(0, (line - 1) * VIRTUAL_SOURCE_ROW_HEIGHT - Math.max(0, centeredOffset));
+        return;
+      }
+      const row = card.querySelector('.gdp-source-table tr[data-line="' + String(line) + '"]');
+      if (row)
+        row.scrollIntoView({ block: "center" });
+    }
     function applySourceRouteToShell() {
       const target = sourceTargetFromRoute();
       setPageMode();
@@ -9249,6 +9646,7 @@
       card.classList.add("loaded");
       card.style.minHeight = "";
       mountDiff(card, file, data);
+      applyDiffRouteFocus(card);
       card.style.containIntrinsicSize = Math.max(card.offsetHeight, file.estimated_height_px || 200) + "px";
       applyViewedToCard(card, STATE.viewedFiles.has(file.path), true);
       if (data.truncated && data.mode === "preview") {
@@ -9450,7 +9848,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() {
@@ -9680,10 +10078,409 @@
       input.focus();
       input.select();
     }
+    let PALETTE = null;
+    const REPO_FILE_CACHE = new Map;
+    function paletteSource() {
+      if (STATE.route.screen === "diff")
+        return "diff";
+      if (STATE.route.screen === "file" && STATE.route.view !== "blob")
+        return "diff";
+      return "repo";
+    }
+    function paletteRef(source) {
+      if (source === "diff")
+        return STATE.to && STATE.to !== "worktree" ? STATE.to : "worktree";
+      if (STATE.route.screen === "repo")
+        return STATE.route.ref || "worktree";
+      if (STATE.route.screen === "file")
+        return STATE.route.ref || "worktree";
+      return STATE.repoRef || "worktree";
+    }
+    function closeSearchPalette() {
+      if (!PALETTE)
+        return;
+      PALETTE.controller?.abort();
+      if (PALETTE.debounce)
+        window.clearTimeout(PALETTE.debounce);
+      PALETTE.root.remove();
+      PALETTE = null;
+    }
+    function createPalette(mode) {
+      closeSearchPalette();
+      const root = document.createElement("div");
+      root.className = "gdp-palette-backdrop";
+      const dialog = document.createElement("div");
+      dialog.className = "gdp-palette";
+      dialog.setAttribute("role", "dialog");
+      dialog.setAttribute("aria-modal", "true");
+      const label = document.createElement("div");
+      label.className = "gdp-palette-label";
+      label.textContent = mode === "file" ? "Files" : "Grep";
+      const input = document.createElement("input");
+      input.className = "gdp-palette-input";
+      input.type = "search";
+      input.autocomplete = "off";
+      input.spellcheck = false;
+      input.placeholder = mode === "file" ? "Search files" : "Search text";
+      input.setAttribute("role", "combobox");
+      input.setAttribute("aria-expanded", "true");
+      input.setAttribute("aria-controls", "gdp-palette-list");
+      const status = document.createElement("div");
+      status.className = "gdp-palette-status";
+      const controls = document.createElement("div");
+      controls.className = "gdp-palette-controls";
+      const list2 = document.createElement("div");
+      list2.id = "gdp-palette-list";
+      list2.className = "gdp-palette-list";
+      list2.setAttribute("role", "listbox");
+      dialog.append(label, input, controls, status, list2);
+      root.appendChild(dialog);
+      document.body.appendChild(root);
+      const state = {
+        root,
+        input,
+        controls,
+        list: list2,
+        status,
+        mode,
+        grepRegex: false,
+        selected: -1,
+        items: [],
+        composing: false,
+        diffSnapshot: [...STATE.files]
+      };
+      PALETTE = state;
+      root.addEventListener("mousedown", (e2) => {
+        if (e2.target === root)
+          closeSearchPalette();
+      });
+      input.addEventListener("compositionstart", () => {
+        state.composing = true;
+      });
+      input.addEventListener("compositionend", () => {
+        state.composing = false;
+      });
+      input.addEventListener("input", () => updatePaletteResults(state));
+      input.addEventListener("keydown", (e2) => handlePaletteKeydown(e2, state));
+      input.focus();
+      updatePaletteResults(state);
+      return state;
+    }
+    function renderPaletteControls(state) {
+      state.controls.innerHTML = "";
+      if (state.mode === "file") {
+        const hint2 = document.createElement("span");
+        hint2.className = "gdp-palette-mode-hint";
+        hint2.textContent = isGlobPathQuery(state.input.value) ? "Glob: * ? []" : "Fuzzy path search";
+        state.controls.appendChild(hint2);
+        return;
+      }
+      const plain = document.createElement("button");
+      plain.type = "button";
+      plain.className = "gdp-palette-mode-button";
+      plain.setAttribute("aria-pressed", String(!state.grepRegex));
+      plain.textContent = "Plain";
+      plain.addEventListener("mousedown", (e2) => {
+        e2.preventDefault();
+        state.grepRegex = false;
+        renderPaletteControls(state);
+        updatePaletteResults(state);
+        state.input.focus();
+      });
+      const regex = document.createElement("button");
+      regex.type = "button";
+      regex.className = "gdp-palette-mode-button";
+      regex.setAttribute("aria-pressed", String(state.grepRegex));
+      regex.textContent = ".* Regex";
+      regex.title = "Alt+R";
+      regex.addEventListener("mousedown", (e2) => {
+        e2.preventDefault();
+        state.grepRegex = true;
+        renderPaletteControls(state);
+        updatePaletteResults(state);
+        state.input.focus();
+      });
+      const hint = document.createElement("span");
+      hint.className = "gdp-palette-mode-hint";
+      hint.textContent = "Alt+R toggles regex";
+      state.controls.append(plain, regex, hint);
+    }
+    function regexQueryIsValid(query) {
+      try {
+        new RegExp(query);
+        return true;
+      } catch {
+        return false;
+      }
+    }
+    function appendHighlightedPath(parent, path, ranges) {
+      let cursor = 0;
+      for (const range of ranges) {
+        if (range.start > cursor)
+          parent.appendChild(document.createTextNode(path.slice(cursor, range.start)));
+        const mark = document.createElement("mark");
+        mark.textContent = path.slice(range.start, range.end);
+        parent.appendChild(mark);
+        cursor = range.end;
+      }
+      if (cursor < path.length)
+        parent.appendChild(document.createTextNode(path.slice(cursor)));
+    }
+    function renderPalette(state) {
+      state.list.innerHTML = "";
+      state.items.forEach((item, index) => {
+        const row = document.createElement("button");
+        row.type = "button";
+        row.id = "gdp-palette-item-" + index;
+        row.className = "gdp-palette-row";
+        row.setAttribute("role", "option");
+        row.setAttribute("aria-selected", index === state.selected ? "true" : "false");
+        const title = document.createElement("span");
+        title.className = "gdp-palette-row-title";
+        const detail = document.createElement("span");
+        detail.className = "gdp-palette-row-detail";
+        if (item.kind === "file") {
+          title.textContent = item.path.split("/").pop() || item.path;
+          appendHighlightedPath(detail, item.displayPath, item.ranges);
+          if (item.old_path && item.displayPath !== item.old_path) {
+            detail.appendChild(document.createTextNode("  " + item.old_path));
+          }
+        } else {
+          title.textContent = item.path + ":" + item.line;
+          detail.textContent = item.preview;
+        }
+        row.append(title, detail);
+        row.addEventListener("mouseenter", () => {
+          state.selected = index;
+          syncPaletteSelection(state);
+        });
+        row.addEventListener("mousedown", (e2) => {
+          e2.preventDefault();
+          state.selected = index;
+          selectPaletteItem(state);
+        });
+        state.list.appendChild(row);
+      });
+      syncPaletteSelection(state);
+    }
+    function syncPaletteSelection(state) {
+      state.input.setAttribute("aria-activedescendant", state.selected >= 0 ? "gdp-palette-item-" + state.selected : "");
+      state.list.querySelectorAll(".gdp-palette-row").forEach((row, index) => {
+        row.setAttribute("aria-selected", index === state.selected ? "true" : "false");
+        if (index === state.selected)
+          row.scrollIntoView({ block: "nearest" });
+      });
+    }
+    async function repoPaletteFiles(ref) {
+      const cached = REPO_FILE_CACHE.get(ref);
+      if (cached && cached.generation === SERVER_GENERATION)
+        return cached;
+      const params = new URLSearchParams;
+      params.set("ref", ref);
+      const res = await trackLoad(fetch("/_files?" + params.toString()).then((r2) => {
+        if (!r2.ok)
+          throw new Error("failed to load files");
+        return r2.json();
+      }));
+      REPO_FILE_CACHE.set(ref, res);
+      return res;
+    }
+    function diffFilePaletteItems(state, query) {
+      const matchPath = isGlobPathQuery(query) ? globMatchPath : fuzzyMatchPath;
+      const candidates = state.diffSnapshot.map((file) => {
+        const current = matchPath(query, file.path);
+        const old = file.old_path ? matchPath(query, file.old_path) : null;
+        const best = old && (!current || old.score > current.score) ? { match: old, displayPath: file.old_path || file.path } : current ? { match: current, displayPath: file.path } : null;
+        return best ? { file, ...best } : null;
+      }).filter((item) => item !== null).sort((a2, b2) => b2.match.score - a2.match.score || a2.file.path.localeCompare(b2.file.path));
+      return limitPaletteResults(candidates).map((candidate) => ({
+        kind: "file",
+        path: candidate.file.path,
+        old_path: candidate.file.old_path,
+        displayPath: candidate.displayPath,
+        ref: paletteRef("diff"),
+        targetPath: fileSourceTarget(candidate.file).path,
+        targetRef: fileSourceTarget(candidate.file).ref,
+        source: "diff",
+        ranges: candidate.match.ranges
+      }));
+    }
+    async function updateFilePalette(state, query) {
+      renderPaletteControls(state);
+      const source = paletteSource();
+      if (!query.trim()) {
+        const base2 = source === "diff" ? state.diffSnapshot.map((file) => {
+          const target = fileSourceTarget(file);
+          return { kind: "file", path: file.path, old_path: file.old_path, displayPath: file.path, ref: paletteRef(source), targetPath: target.path, targetRef: target.ref, source, ranges: [] };
+        }) : [];
+        state.items = limitPaletteResults(base2);
+        state.selected = state.items.length ? 0 : -1;
+        state.status.textContent = source === "diff" ? state.diffSnapshot.length + " diff files" : "Type to search repository files";
+        renderPalette(state);
+        return;
+      }
+      if (source === "diff") {
+        state.items = diffFilePaletteItems(state, query);
+      } else {
+        state.status.textContent = "Loading files...";
+        const ref = paletteRef(source);
+        const response = await repoPaletteFiles(ref);
+        if (PALETTE !== state || state.input.value !== query)
+          return;
+        state.items = limitPaletteResults(rankPathMatches(query, response.files)).map((match2) => ({
+          kind: "file",
+          path: match2.item.path,
+          displayPath: match2.item.path,
+          ref,
+          source,
+          ranges: match2.ranges
+        }));
+      }
+      state.selected = state.items.length ? 0 : -1;
+      state.status.textContent = state.items.length ? state.items.length + " results" : "No results";
+      renderPalette(state);
+    }
+    function updateGrepPalette(state, query) {
+      renderPaletteControls(state);
+      state.controller?.abort();
+      if (state.debounce)
+        window.clearTimeout(state.debounce);
+      if (!query.trim()) {
+        state.items = [];
+        state.selected = -1;
+        state.status.textContent = "Type to grep";
+        renderPalette(state);
+        return;
+      }
+      if (state.grepRegex && !regexQueryIsValid(query)) {
+        state.controller?.abort();
+        state.items = [];
+        state.selected = -1;
+        state.status.textContent = "Invalid regular expression";
+        renderPalette(state);
+        return;
+      }
+      state.status.textContent = "Searching...";
+      state.debounce = window.setTimeout(() => {
+        const source = paletteSource();
+        const ref = paletteRef(source);
+        const params = new URLSearchParams;
+        params.set("ref", ref);
+        params.set("q", query);
+        params.set("max", "200");
+        if (state.grepRegex)
+          params.set("regex", "1");
+        if (source === "diff") {
+          for (const file of state.diffSnapshot)
+            params.append("path", file.path);
+        }
+        const controller = new AbortController;
+        state.controller = controller;
+        trackLoad(fetch("/_grep?" + params.toString(), { signal: controller.signal }).then((r2) => {
+          if (!r2.ok)
+            throw new Error("grep failed");
+          return r2.json();
+        })).then((response) => {
+          if (PALETTE !== state || controller.signal.aborted)
+            return;
+          state.items = limitPaletteResults(response.matches.map((match2) => ({
+            kind: "grep",
+            path: match2.path,
+            line: match2.line,
+            column: match2.column,
+            preview: match2.preview,
+            ref,
+            source
+          })));
+          state.selected = state.items.length ? 0 : -1;
+          state.status.textContent = response.engine + (state.grepRegex ? " regex" : " plain") + (response.truncated ? " truncated" : "") + " - " + state.items.length + " results";
+          renderPalette(state);
+        }).catch((err) => {
+          if (isAbortError(err))
+            return;
+          state.status.textContent = "Search failed";
+        });
+      }, 80);
+    }
+    function updatePaletteResults(state) {
+      const query = state.input.value;
+      if (state.mode === "file") {
+        updateFilePalette(state, query).catch(() => {
+          state.status.textContent = "Search failed";
+        });
+      } else {
+        updateGrepPalette(state, query);
+      }
+    }
+    function selectPaletteItem(state) {
+      const item = state.items[state.selected];
+      if (!item)
+        return;
+      closeSearchPalette();
+      if (item.kind === "file") {
+        if (item.source === "diff") {
+          if (STATE.route.screen === "file") {
+            setRoute({ screen: "file", path: item.targetPath || item.path, ref: item.targetRef || item.ref, range: currentRange() });
+            applySourceRouteToShell();
+          } else {
+            scrollToFile(item.path);
+          }
+        } else {
+          setRoute({ screen: "file", path: item.path, ref: item.ref, view: "blob", range: currentRange() });
+          renderStandaloneSource({ path: item.path, ref: item.ref });
+        }
+        return;
+      }
+      if (item.source === "diff") {
+        setRoute({ screen: "diff", range: currentRange(), path: item.path, line: item.line });
+        scrollToFile(item.path, item.line);
+      } else {
+        setRoute({ screen: "file", path: item.path, ref: item.ref, view: "blob", line: item.line, range: currentRange() });
+        renderStandaloneSource({ path: item.path, ref: item.ref });
+      }
+    }
+    function handlePaletteKeydown(e2, state) {
+      if (e2.key === "Escape") {
+        e2.preventDefault();
+        closeSearchPalette();
+        return;
+      }
+      if (e2.key === "Enter") {
+        if (state.composing)
+          return;
+        e2.preventDefault();
+        selectPaletteItem(state);
+        return;
+      }
+      if (state.mode === "grep" && e2.altKey && e2.key.toLowerCase() === "r") {
+        e2.preventDefault();
+        state.grepRegex = !state.grepRegex;
+        updatePaletteResults(state);
+        return;
+      }
+      const direction = e2.key === "ArrowDown" || e2.ctrlKey && e2.key.toLowerCase() === "n" ? 1 : e2.key === "ArrowUp" || e2.ctrlKey && e2.key.toLowerCase() === "p" ? -1 : 0;
+      if (direction) {
+        e2.preventDefault();
+        state.selected = movePaletteSelection(state.selected, state.items.length, direction);
+        syncPaletteSelection(state);
+      }
+    }
+    function openSearchPalette(mode) {
+      createPalette(mode);
+    }
     document.addEventListener("keydown", (e2) => {
       if ((e2.metaKey || e2.ctrlKey) && e2.key.toLowerCase() === "k") {
         e2.preventDefault();
-        focusFileFilter();
+        if (PALETTE?.mode === "file")
+          return;
+        openSearchPalette("file");
+        return;
+      }
+      if ((e2.metaKey || e2.ctrlKey) && e2.key.toLowerCase() === "g") {
+        e2.preventDefault();
+        if (PALETTE?.mode === "grep")
+          return;
+        openSearchPalette("grep");
         return;
       }
       const targetEl = e2.target;
@@ -9842,7 +10639,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);
@@ -9851,7 +10648,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);
@@ -9859,7 +10656,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("");