@youtyan/code-viewer 0.1.11 → 0.1.13

package/web/app.js

@@ -131,6 +131,309 @@
     };
   }
 
+  // web-src/focus-scope.ts
+  function isEditableKeyTarget(target) {
+    if (!target)
+      return false;
+    const tag = target.tagName;
+    return tag === "INPUT" || tag === "TEXTAREA" || target.closest('[contenteditable="true"]') != null;
+  }
+  function keymapScope(target) {
+    if (target?.closest("#content"))
+      return "main";
+    if (target?.closest("#sidebar"))
+      return "sidebar";
+    return "global";
+  }
+  function prepareKeyboardPanels(doc = document) {
+    const sidebar = doc.querySelector("#sidebar");
+    const content = doc.querySelector("#content");
+    if (sidebar)
+      sidebar.tabIndex = -1;
+    if (content)
+      content.tabIndex = -1;
+  }
+  function getPanelFocusScope(doc = document) {
+    const scope = doc.body?.dataset.focusScope;
+    return scope === "sidebar" || scope === "main" ? scope : null;
+  }
+  function setPanelFocusScope(scope, doc = document) {
+    if (!doc.body)
+      return;
+    if (scope)
+      doc.body.dataset.focusScope = scope;
+    else
+      delete doc.body.dataset.focusScope;
+  }
+  function restorePanelFocusScope(scope, doc = document) {
+    if (scope === "sidebar")
+      focusSidebarPanel(doc);
+    else if (scope === "main")
+      focusMainPanel(doc);
+    else
+      setPanelFocusScope(null, doc);
+  }
+  function focusSidebarPanel(doc = document) {
+    const active = doc.querySelector("#filelist li.active[data-path], #filelist .tree-dir.active[data-dirpath]");
+    const sidebar = doc.querySelector("#sidebar");
+    (active || sidebar)?.focus({ preventScroll: true });
+    setPanelFocusScope("sidebar", doc);
+  }
+  function focusMainPanel(doc = document) {
+    doc.querySelector("#content")?.focus({ preventScroll: true });
+    setPanelFocusScope("main", doc);
+  }
+  function findMainScrollTarget(doc = document) {
+    const active = doc.activeElement;
+    const activeScroller = active?.closest("#content .gdp-source-virtual-scroller");
+    if (activeScroller && activeScroller.offsetParent !== null)
+      return activeScroller;
+    const sourceScroller = doc.querySelector("#content .gdp-source-virtual-scroller");
+    if (sourceScroller && sourceScroller.offsetParent !== null)
+      return sourceScroller;
+    const content = doc.querySelector("#content");
+    if (!content || content.offsetParent === null)
+      return null;
+    const isScrollable = (item) => {
+      if (item.offsetParent === null)
+        return false;
+      const style = doc.defaultView?.getComputedStyle(item);
+      return !!style && /(auto|scroll)/.test(style.overflowY) && item.scrollHeight > item.clientHeight;
+    };
+    const preferred = Array.from(content.querySelectorAll(".gdp-source-viewer, .gdp-markdown-layout, .gdp-markdown-preview, .d2h-files-diff, .d2h-file-diff"));
+    const scrollable = preferred.find(isScrollable) || (isScrollable(content) ? content : null) || Array.from(content.querySelectorAll("*")).find(isScrollable);
+    return scrollable || doc.scrollingElement;
+  }
+
+  // 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/keymap.ts
+  var DEFAULT_KEY_BINDINGS = [
+    { action: "open-file-palette", key: "k", ctrl: true, allowEditable: true, allowPaletteOpen: true },
+    { action: "open-file-palette", key: "k", meta: true, allowEditable: true, allowPaletteOpen: true },
+    { action: "open-grep-palette", key: "g", ctrl: true, allowEditable: true, allowPaletteOpen: true },
+    { action: "open-grep-palette", key: "g", meta: true, allowEditable: true, allowPaletteOpen: true },
+    { action: "focus-file-filter", key: "/" },
+    { action: "focus-sidebar", key: "h", ctrl: true },
+    { action: "focus-main", key: "l", ctrl: true },
+    { action: "cancel-source-load", key: "escape", requires: { lightboxClosed: true } },
+    { action: "open-sidebar-item", key: "enter", scope: "sidebar" },
+    { action: "open-sidebar-item", key: "enter", scope: "global" },
+    { action: "sidebar-next", key: "j", scope: "sidebar" },
+    { action: "sidebar-next", key: "j", scope: "global" },
+    { action: "sidebar-previous", key: "k", scope: "sidebar" },
+    { action: "sidebar-previous", key: "k", scope: "global" },
+    { action: "sidebar-page-down", key: "d", scope: "sidebar", ctrl: true },
+    { action: "sidebar-page-down", key: "d", scope: "global", ctrl: true },
+    { action: "sidebar-page-up", key: "u", scope: "sidebar", ctrl: true },
+    { action: "sidebar-page-up", key: "u", scope: "global", ctrl: true },
+    { action: "sidebar-expand", key: "l", scope: "sidebar" },
+    { action: "sidebar-expand", key: "l", scope: "global" },
+    { action: "sidebar-collapse", key: "h", scope: "sidebar" },
+    { action: "sidebar-collapse", key: "h", scope: "global" },
+    { action: "scroll-main-down", key: "j", scope: "main" },
+    { action: "scroll-main-up", key: "k", scope: "main" },
+    { action: "scroll-main-page-down", key: "d", scope: "main", ctrl: true },
+    { action: "scroll-main-page-up", key: "u", scope: "main", ctrl: true },
+    { action: "tab-preview", key: "p", scope: "main", pendingG: true },
+    { action: "tab-code", key: "c", scope: "main", pendingG: true },
+    { action: "goto-top", key: "g", pendingG: true },
+    { action: "goto-bottom", key: "g", shift: true, pendingG: true },
+    { action: "goto-bottom", key: "g", shift: true },
+    { action: "start-g-sequence", key: "g", scope: "sidebar" },
+    { action: "start-g-sequence", key: "g", scope: "main" },
+    { action: "layout-unified", key: "u" },
+    { action: "layout-split", key: "s" },
+    { action: "toggle-theme", key: "t" }
+  ];
+  function resolveKeymapAction(event, context) {
+    const key = event.key.toLowerCase();
+    if (context.composing)
+      return null;
+    for (const binding of DEFAULT_KEY_BINDINGS) {
+      if (binding.key !== key)
+        continue;
+      if (binding.requires?.lightboxClosed && context.lightboxOpen)
+        continue;
+      if (binding.scope && binding.scope !== context.scope)
+        continue;
+      if (!!binding.pendingG !== !!context.pendingG)
+        continue;
+      if (context.paletteOpen && !binding.allowPaletteOpen)
+        continue;
+      if (context.editable && !binding.allowEditable)
+        continue;
+      if (!!binding.ctrl !== !!event.ctrlKey)
+        continue;
+      if (!!binding.meta !== !!event.metaKey)
+        continue;
+      if (!!binding.alt !== !!event.altKey)
+        continue;
+      if (!!binding.shift !== !!event.shiftKey)
+        continue;
+      if (!binding.ctrl && !binding.meta && !binding.alt && !binding.shift && (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey))
+        continue;
+      return binding.action;
+    }
+    return null;
+  }
+
+  // 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 +463,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,15 +499,28 @@
         };
       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 } : {} };
       }
+      case "/help":
+        return {
+          screen: "help",
+          range,
+          lang: params.get("lang") || "en",
+          section: params.get("section") || "keybindings"
+        };
       default:
         return { screen: "unknown", reason: "unknown-pathname", rawPathname: pathname, rawSearch: search, range };
     }
@@ -204,11 +538,20 @@
       }
       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 "help": {
+        const params = new URLSearchParams;
+        if (route.lang && route.lang !== "en")
+          params.set("lang", route.lang);
+        if (route.section && route.section !== "keybindings")
+          params.set("section", route.section);
+        const qs = params.toString();
+        return "/help" + (qs ? "?" + qs : "");
+      }
       case "unknown":
         return "/todif?from=" + encodeURIComponent(route.range.from || "") + "&to=" + encodeURIComponent(route.range.to || "worktree");
       default:
@@ -6002,7 +6345,29 @@
     return markdown;
   }
   function renderMarkdownHtml(textValue, target, highlighter, signal) {
-    return createMarkdownIt(target, highlighter, signal).render(textValue);
+    const md = createMarkdownIt(target, highlighter, signal);
+    const frontmatter = splitYamlFrontmatter(textValue);
+    if (!frontmatter)
+      return md.render(textValue);
+    return '<div class="gdp-markdown-frontmatter" data-gdp-frontmatter="yaml">' + md.render("```yaml\n" + frontmatter.yaml + "\n```\n") + "</div>" + md.render(frontmatter.body);
+  }
+  function splitYamlFrontmatter(textValue) {
+    if (!textValue.startsWith(`---
+`) && !textValue.startsWith(`---\r
+`))
+      return null;
+    const newline2 = textValue.startsWith(`---\r
+`) ? `\r
+` : `
+`;
+    const start = 3 + newline2.length;
+    const closing = textValue.indexOf(newline2 + "---" + newline2, start);
+    if (closing < 0)
+      return null;
+    return {
+      yaml: textValue.slice(start, closing),
+      body: textValue.slice(closing + newline2.length + 3 + newline2.length)
+    };
   }
   async function loadMarkdownHighlighter() {
     if (!shikiPromise) {
@@ -6399,6 +6764,177 @@
     let REPO_SIDEBAR_REF = null;
     let REPO_SIDEBAR_LOAD_REF = null;
     let REPO_SIDEBAR_LOAD = null;
+    let PENDING_G_SCOPE = null;
+    let PENDING_G_UNTIL = 0;
+    let SOURCE_CURSOR = null;
+    const SOURCE_CURSOR_TOTALS = new Map;
+    const HELP_LANGUAGES = ["en", "ja"];
+    const HELP_SECTIONS = ["keybindings"];
+    const HELP_CONTENT = {
+      en: {
+        languageLabel: "Language",
+        title: "Help",
+        sections: {
+          keybindings: {
+            nav: "Keybindings",
+            title: "Keyboard Shortcuts",
+            intro: "Use these shortcuts to move between panels and navigate files without leaving the keyboard.",
+            groups: [
+              { title: "Global", rows: [["Ctrl+K", "Open file palette"], ["Ctrl+G", "Open grep palette"], ["/", "Focus file filter"], ["t", "Toggle theme"]] },
+              { title: "Panels", rows: [["Ctrl+H", "Focus sidebar"], ["Ctrl+L", "Focus main panel"]] },
+              { title: "Sidebar", rows: [["j / k", "Move selection down / up"], ["Ctrl+D / Ctrl+U", "Move selection by half a page"], ["gg / Shift+G", "Move to top / bottom"], ["Enter", "Open selected item"], ["h / l", "Collapse / expand directory"]] },
+              { title: "Main Panel", rows: [["j / k", "Move code cursor down / up"], ["Ctrl+D / Ctrl+U", "Move code cursor by half a page"], ["gg / Shift+G", "Move code cursor to top / bottom"], ["gp / gc", "Switch to Preview / Code tab"]] }
+            ]
+          }
+        }
+      },
+      ja: {
+        languageLabel: "言語",
+        title: "ヘルプ",
+        sections: {
+          keybindings: {
+            nav: "キーバインド",
+            title: "キーバインド",
+            intro: "キーボードだけでパネル移動、ファイル選択、スクロールを行うためのショートカットです。",
+            groups: [
+              { title: "グローバル", rows: [["Ctrl+K", "ファイルパレットを開く"], ["Ctrl+G", "grep パレットを開く"], ["/", "ファイルフィルターへフォーカス"], ["t", "テーマ切り替え"]] },
+              { title: "パネル", rows: [["Ctrl+H", "サイドバーへフォーカス"], ["Ctrl+L", "メインパネルへフォーカス"]] },
+              { title: "サイドバー", rows: [["j / k", "選択を下 / 上へ移動"], ["Ctrl+D / Ctrl+U", "半ページ分選択を移動"], ["gg / Shift+G", "先頭 / 末尾へ移動"], ["Enter", "選択項目を開く"], ["h / l", "ディレクトリを閉じる / 開く"]] },
+              { title: "メインパネル", rows: [["j / k", "コードカーソルを下 / 上へ移動"], ["Ctrl+D / Ctrl+U", "コードカーソルを半ページ分移動"], ["gg / Shift+G", "コードカーソルを先頭 / 末尾へ移動"], ["gp / gc", "Preview / Code タブへ切り替え"]] }
+            ]
+          }
+        }
+      }
+    };
+    function sourceLineScrollAmount() {
+      const virtualRow = Array.from(document.querySelectorAll("#content .gdp-source-virtual-row")).find((item) => item.offsetParent !== null);
+      if (virtualRow)
+        return virtualRow.getBoundingClientRect().height || VIRTUAL_SOURCE_ROW_HEIGHT;
+      const sourceRow = Array.from(document.querySelectorAll("#content .gdp-source-table tr")).find((item) => item.offsetParent !== null);
+      if (sourceRow)
+        return sourceRow.getBoundingClientRect().height || 20;
+      const preview = document.querySelector("#content .gdp-markdown-preview:not([hidden])");
+      const lineHeight = Number.parseFloat(getComputedStyle(preview || document.body).lineHeight);
+      return Number.isFinite(lineHeight) && lineHeight > 0 ? lineHeight : 20;
+    }
+    function hasVisibleSourceCodeSurface() {
+      return Array.from(document.querySelectorAll("#content .gdp-source-virtual-scroller, #content .gdp-source-table")).some((item) => item.offsetParent !== null);
+    }
+    function sourceCursorKey(target) {
+      return target.ref + "\x00" + target.path;
+    }
+    function sourceCursorMatches(target, line) {
+      return !!SOURCE_CURSOR && sourceTargetsEqual(SOURCE_CURSOR.target, target) && SOURCE_CURSOR.line === line;
+    }
+    function syncSourceCursorRows(target) {
+      document.querySelectorAll("#content [data-line]").forEach((row) => {
+        const line = Number(row.dataset.line || "0");
+        row.classList.toggle("gdp-source-cursor", sourceCursorMatches(target, line));
+      });
+    }
+    function visibleSourceLineFallback() {
+      const scroller = findMainScrollTarget();
+      if (scroller)
+        return Math.max(1, Math.floor(scroller.scrollTop / VIRTUAL_SOURCE_ROW_HEIGHT) + 1);
+      const rows = $$("#content .gdp-source-table tr[data-line]");
+      const contentTop = document.querySelector("#content")?.getBoundingClientRect().top ?? 0;
+      const row = rows.find((item) => item.getBoundingClientRect().bottom >= Math.max(0, contentTop));
+      return Math.max(1, Number(row?.dataset.line || "1"));
+    }
+    function ensureSourceCursor(target) {
+      if (SOURCE_CURSOR && sourceTargetsEqual(SOURCE_CURSOR.target, target))
+        return SOURCE_CURSOR;
+      const routeLine = lineTargetStart(currentSourceLineTarget(target));
+      SOURCE_CURSOR = { target, line: routeLine || visibleSourceLineFallback() };
+      syncSourceCursorRows(target);
+      return SOURCE_CURSOR;
+    }
+    function resetSourceCursorForTarget(target, totalLines) {
+      const routeLine = lineTargetStart(currentSourceLineTarget(target));
+      SOURCE_CURSOR = { target, line: Math.max(1, Math.min(totalLines, routeLine || 1)) };
+    }
+    function scrollSourceCursorIntoView(cursor, edge = "nearest") {
+      const scroller = findMainScrollTarget();
+      if (scroller) {
+        const top = (cursor.line - 1) * VIRTUAL_SOURCE_ROW_HEIGHT;
+        const bottom = top + VIRTUAL_SOURCE_ROW_HEIGHT;
+        const before = scroller.scrollTop;
+        if (edge === "center")
+          scroller.scrollTop = Math.max(0, top - Math.round(scroller.clientHeight / 2));
+        else if (top < scroller.scrollTop)
+          scroller.scrollTop = top;
+        else if (bottom > scroller.scrollTop + scroller.clientHeight)
+          scroller.scrollTop = bottom - scroller.clientHeight;
+        if (scroller.scrollTop !== before)
+          scroller.dispatchEvent(new Event("scroll"));
+        scroller.__gdpRenderVirtualSource?.();
+        syncSourceCursorRows(cursor.target);
+        return;
+      }
+      document.querySelector('#content [data-line="' + cursor.line + '"]')?.scrollIntoView({ block: edge });
+    }
+    function moveSourceCursor(direction, unit, edge) {
+      if (!hasVisibleSourceCodeSurface())
+        return false;
+      const target = sourceTargetFromRoute();
+      if (!target)
+        return false;
+      const total = SOURCE_CURSOR_TOTALS.get(sourceCursorKey(target));
+      if (!total)
+        return false;
+      const cursor = ensureSourceCursor(target);
+      if (unit === "edge") {
+        cursor.line = edge === "bottom" ? total : 1;
+        syncSourceCursorRows(target);
+        scrollSourceCursorIntoView(cursor, "center");
+        return true;
+      }
+      const pageRows = Math.max(1, Math.floor((findMainScrollTarget()?.clientHeight || window.innerHeight) * 0.55 / (sourceLineScrollAmount() || VIRTUAL_SOURCE_ROW_HEIGHT)));
+      const delta = unit === "page" ? pageRows : 1;
+      cursor.line = Math.max(1, Math.min(total, cursor.line + direction * delta));
+      syncSourceCursorRows(target);
+      scrollSourceCursorIntoView(cursor);
+      return true;
+    }
+    function scrollMainPanel(direction, repeated = false, unit = "line") {
+      if (moveSourceCursor(direction, unit))
+        return;
+      const target = findMainScrollTarget();
+      const viewportHeight = target?.clientHeight || document.scrollingElement?.clientHeight || window.innerHeight;
+      const top = direction * (unit === "line" ? Math.round(sourceLineScrollAmount() || 32) : Math.round(viewportHeight * 0.55));
+      const behavior = repeated ? "auto" : "smooth";
+      if (target)
+        target.scrollBy({ top, behavior });
+      else
+        window.scrollBy({ top, behavior });
+    }
+    function scrollMainToEdge(edge) {
+      if (moveSourceCursor(edge === "bottom" ? 1 : -1, "edge", edge))
+        return;
+      const target = findMainScrollTarget();
+      if (target) {
+        target.scrollTo({ top: edge === "top" ? 0 : target.scrollHeight, behavior: "auto" });
+        return;
+      }
+      const top = edge === "top" ? 0 : Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+      window.scrollTo({ top, behavior: "auto" });
+    }
+    function switchSourceTab(tab) {
+      const tabs = document.querySelector("#content .gdp-source-tabs");
+      if (!tabs)
+        return false;
+      const button = tabs.querySelector('button[data-source-tab="' + tab + '"]');
+      if (!button || button.hidden || button.disabled)
+        return false;
+      button.click();
+      focusMainPanel();
+      return true;
+    }
+    function isFocusableClickTarget(target) {
+      if (!(target instanceof Element))
+        return false;
+      return !!target.closest('a, button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]');
+    }
     function invalidateRepoSidebar() {
       REPO_SIDEBAR_REF = null;
       REPO_SIDEBAR_LOAD_REF = null;
@@ -6741,6 +7277,7 @@
           const dir = item.dir;
           const li = document.createElement("li");
           li.className = "tree-dir";
+          li.tabIndex = -1;
           li.dataset.dirpath = dir.path;
           if (dir.explicit)
             li.dataset.explicit = "true";
@@ -6798,6 +7335,7 @@
             li.addEventListener("click", (e2) => {
               e2.stopPropagation();
               onFileClick({ path: dir.path, display_path: dir.path, type: "tree", children_omitted: dir.children_omitted });
+              focusSidebarPanel();
             });
           } else {
             li.addEventListener("click", toggleDir);
@@ -6808,6 +7346,7 @@
           const f2 = item.file;
           const li = document.createElement("li");
           li.className = "tree-file";
+          li.tabIndex = -1;
           li.dataset.path = f2.path;
           li.classList.toggle("viewed", !onFileClick && STATE.viewedFiles.has(f2.path));
           li.style.setProperty("--lvl-pad", 12 + depth * 14 + "px");
@@ -6832,6 +7371,7 @@
               onFileClick(f2);
             else
               scrollToFile(f2.path);
+            focusSidebarPanel();
           });
           if (!onFileClick)
             li.addEventListener("mouseenter", () => prefetchByPath(f2.path), { passive: true });
@@ -6842,6 +7382,7 @@
     function renderFlat(files, ul, onFileClick) {
       files.forEach((f2, i2) => {
         const li = document.createElement("li");
+        li.tabIndex = -1;
         li.dataset.index = String(i2);
         li.dataset.path = f2.path;
         li.classList.toggle("viewed", !onFileClick && STATE.viewedFiles.has(f2.path));
@@ -6863,6 +7404,7 @@
             onFileClick(f2);
           else
             scrollToFile(f2.path);
+          focusSidebarPanel();
         });
         if (!onFileClick)
           li.addEventListener("mouseenter", () => prefetchByPath(f2.path), { passive: true });
@@ -6954,7 +7496,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;
@@ -6970,7 +7546,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;
@@ -7095,6 +7673,12 @@
     function repoFileTargetFromRoute() {
       return STATE.route.screen === "file" && STATE.route.view === "blob" ? STATE.route.ref : null;
     }
+    function helpLanguageFromRoute() {
+      return STATE.route.screen === "help" && HELP_LANGUAGES.includes(STATE.route.lang) ? STATE.route.lang : "en";
+    }
+    function helpSectionFromRoute() {
+      return STATE.route.screen === "help" && HELP_SECTIONS.includes(STATE.route.section) ? STATE.route.section : "keybindings";
+    }
     function setRoute(route, replace2 = false) {
       const nextRoute = route.screen === "unknown" ? { screen: "diff", range: route.range } : route;
       STATE.route = nextRoute;
@@ -7115,6 +7699,7 @@
       document.body.classList.toggle("gdp-file-detail-page", STATE.route.screen === "file");
       document.body.classList.toggle("gdp-repo-blob-page", STATE.route.screen === "file" && STATE.route.view === "blob");
       document.body.classList.toggle("gdp-repo-page", STATE.route.screen === "repo");
+      document.body.classList.toggle("gdp-help-page", STATE.route.screen === "help");
       syncRepoTargetInput(repoFileTargetFromRoute() || "worktree");
     }
     function syncHeaderMenu() {
@@ -7129,12 +7714,104 @@
         if (link2.dataset.route === "diff") {
           link2.href = buildRoute({ screen: "diff", range: currentRange() });
         }
+        if (link2.dataset.route === "help") {
+          link2.href = buildRoute({ screen: "help", lang: helpLanguageFromRoute(), section: helpSectionFromRoute(), range: currentRange() });
+        }
       });
     }
     function removeStandaloneSource() {
       document.querySelectorAll(".gdp-standalone-source").forEach((el) => el.remove());
       document.querySelectorAll(".gdp-repo-blob-layout").forEach((el) => el.remove());
     }
+    function renderHelpPage() {
+      cancelActiveSourceLoad("navigation");
+      removeStandaloneSource();
+      LOAD_QUEUE.length = 0;
+      const target = $("#diff");
+      const empty = $("#empty");
+      empty.classList.add("hidden");
+      $("#meta").textContent = "";
+      $("#totals").textContent = "";
+      $("#filelist").textContent = "";
+      const lang = helpLanguageFromRoute();
+      const section = helpSectionFromRoute();
+      const content = HELP_CONTENT[lang];
+      const sectionContent = content.sections[section];
+      const shell = document.createElement("section");
+      shell.className = "gdp-help-shell";
+      const header = document.createElement("header");
+      header.className = "gdp-help-header";
+      const title = document.createElement("h1");
+      title.textContent = content.title;
+      const langSelect = document.createElement("select");
+      langSelect.className = "gdp-help-language";
+      langSelect.setAttribute("aria-label", content.languageLabel);
+      HELP_LANGUAGES.forEach((optionLang) => {
+        const option = document.createElement("option");
+        option.value = optionLang;
+        option.textContent = optionLang.toUpperCase();
+        option.selected = optionLang === lang;
+        langSelect.appendChild(option);
+      });
+      langSelect.addEventListener("change", () => {
+        setRoute({ screen: "help", lang: langSelect.value, section, range: currentRange() });
+        setPageMode();
+        renderHelpPage();
+        syncHeaderMenu();
+      });
+      header.append(title, langSelect);
+      const layout = document.createElement("div");
+      layout.className = "gdp-help-layout";
+      const helpNav = document.createElement("nav");
+      helpNav.className = "gdp-help-nav";
+      HELP_SECTIONS.forEach((helpSection) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = helpSection === section ? "active" : "";
+        button.textContent = content.sections[helpSection].nav;
+        button.addEventListener("click", () => {
+          setRoute({ screen: "help", lang, section: helpSection, range: currentRange() });
+          renderHelpPage();
+          syncHeaderMenu();
+        });
+        helpNav.appendChild(button);
+      });
+      const article = document.createElement("article");
+      article.className = "gdp-help-content";
+      const h2 = document.createElement("h2");
+      h2.textContent = sectionContent.title;
+      const intro = document.createElement("p");
+      intro.textContent = sectionContent.intro;
+      article.append(h2, intro);
+      sectionContent.groups.forEach((group) => {
+        const groupSection = document.createElement("section");
+        groupSection.className = "gdp-help-group";
+        const groupTitle = document.createElement("h3");
+        groupTitle.textContent = group.title;
+        const table2 = document.createElement("table");
+        group.rows.forEach(([keys, description]) => {
+          const tr = document.createElement("tr");
+          const keyCell = document.createElement("th");
+          keyCell.scope = "row";
+          keys.split(" / ").forEach((key, index) => {
+            if (index > 0)
+              keyCell.append(" / ");
+            const kbd = document.createElement("kbd");
+            kbd.textContent = key;
+            keyCell.appendChild(kbd);
+          });
+          const desc = document.createElement("td");
+          desc.textContent = description;
+          tr.append(keyCell, desc);
+          table2.appendChild(tr);
+        });
+        groupSection.append(groupTitle, table2);
+        article.appendChild(groupSection);
+      });
+      layout.append(helpNav, article);
+      shell.append(header, layout);
+      target.replaceChildren(shell);
+    }
     function renderShell(meta) {
       const newFiles = meta.files || [];
       STATE.files = newFiles;
@@ -8624,11 +9301,35 @@
       });
       return info;
     }
-    function createSourceTabs(active) {
+    function createSourceCopyButton(textValue) {
+      const copy = document.createElement("button");
+      copy.type = "button";
+      copy.className = "gdp-file-header-icon gdp-copy-source";
+      copy.title = "Copy source";
+      copy.setAttribute("aria-label", "Copy source");
+      copy.innerHTML = iconSvg("octicon-copy", COPY_16_PATHS);
+      copy.addEventListener("click", async () => {
+        try {
+          await navigator.clipboard.writeText(textValue);
+          copy.classList.add("copied");
+          setTimeout(() => {
+            copy.classList.remove("copied");
+          }, 1200);
+        } catch {
+          copy.classList.add("failed");
+          setTimeout(() => {
+            copy.classList.remove("failed");
+          }, 1200);
+        }
+      });
+      return copy;
+    }
+    function createSourceTabs(active, textValue) {
       const tabs = document.createElement("div");
       tabs.className = "gdp-source-tabs";
       const codeButton = document.createElement("button");
       codeButton.type = "button";
+      codeButton.dataset.sourceTab = "code";
       codeButton.textContent = "Code";
       codeButton.classList.toggle("active", active === "code");
       tabs.appendChild(codeButton);
@@ -8636,10 +9337,13 @@
       if (active === "preview") {
         previewButton = document.createElement("button");
         previewButton.type = "button";
+        previewButton.dataset.sourceTab = "preview";
         previewButton.className = "active";
         previewButton.textContent = "Preview";
         tabs.prepend(previewButton);
       }
+      if (textValue != null)
+        tabs.appendChild(createSourceCopyButton(textValue));
       return { tabs, codeButton, previewButton };
     }
     async function renderSourceText(card, target, textValue, signal) {
@@ -8647,6 +9351,8 @@
 `).replace(/\r/g, `
 `).split(`
 `) : [""];
+      SOURCE_CURSOR_TOTALS.set(sourceCursorKey(target), lines.length);
+      resetSourceCursorForTarget(target, lines.length);
       const body = card.querySelector(".gdp-file-detail-body, .d2h-files-diff, .d2h-file-diff, .gdp-media, .gdp-source-viewer");
       const isStandalone = card.classList.contains("gdp-standalone-source");
       const view = document.createElement("div");
@@ -8667,7 +9373,7 @@
       if (usesVirtualSource) {
         const virtualCode = renderVirtualSource(target, textValue, lines, hljsRef, lang);
         if (previewable) {
-          const { tabs: tabs2, codeButton: codeButton2, previewButton: previewButton2 } = createSourceTabs("preview");
+          const { tabs: tabs2, codeButton: codeButton2, previewButton: previewButton2 } = createSourceTabs("preview", textValue);
           if (tabsHost) {
             tabsHost.hidden = false;
             tabsHost.replaceChildren(tabs2);
@@ -8727,9 +9433,13 @@
           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)));
+        tr.classList.toggle("gdp-source-cursor", sourceCursorMatches(target, index + 1));
         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 (shikiLines && shikiLines[index] != null) {
@@ -8748,7 +9458,7 @@
         }
       }
       table2.appendChild(tbody);
-      const { tabs, codeButton, previewButton } = createSourceTabs(previewable ? "preview" : "code");
+      const { tabs, codeButton, previewButton } = createSourceTabs(previewable ? "preview" : "code", textValue);
       if (tabsHost) {
         tabsHost.hidden = false;
         tabsHost.replaceChildren(tabs);
@@ -8821,6 +9531,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";
@@ -8836,19 +9609,21 @@
       actions.className = "gdp-source-virtual-actions";
       const copy = document.createElement("button");
       copy.type = "button";
-      copy.className = "gdp-source-virtual-action";
-      copy.textContent = "Copy all";
+      copy.className = "gdp-file-header-icon gdp-copy-source gdp-source-virtual-copy";
+      copy.title = "Copy source";
+      copy.setAttribute("aria-label", "Copy source");
+      copy.innerHTML = iconSvg("octicon-copy", COPY_16_PATHS);
       copy.addEventListener("click", async () => {
         try {
           await navigator.clipboard.writeText(textValue);
-          copy.textContent = "Copied";
+          copy.classList.add("copied");
           setTimeout(() => {
-            copy.textContent = "Copy all";
+            copy.classList.remove("copied");
           }, 1200);
         } catch {
-          copy.textContent = "Copy failed";
+          copy.classList.add("failed");
           setTimeout(() => {
-            copy.textContent = "Copy all";
+            copy.classList.remove("failed");
           }, 1600);
         }
       });
@@ -8859,7 +9634,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);
@@ -8893,9 +9669,13 @@
         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)));
+          row.classList.toggle("gdp-source-cursor", sourceCursorMatches(target, index + 1));
           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] ?? "";
@@ -8918,6 +9698,7 @@
         if (!raf)
           raf = requestAnimationFrame(render);
       };
+      scroller.__gdpRenderVirtualSource = render;
       scroller.addEventListener("scroll", schedule, { passive: true });
       let resizeObserver = null;
       resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
@@ -9143,6 +9924,7 @@
             return;
           if (!rendered)
             return;
+          scrollStandaloneSourceLine(card, lineTargetStart(STATE.route.screen === "file" ? STATE.route.line : undefined));
           finishSourceLoad(req);
         }
       } catch (err) {
@@ -9156,6 +9938,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();
@@ -9344,6 +10139,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") {
@@ -9619,6 +10415,15 @@
     });
     $("#sb-expand-all").addEventListener("click", () => setAllSidebarDirsCollapsed(false));
     $("#sb-collapse-all").addEventListener("click", () => setAllSidebarDirsCollapsed(true));
+    prepareKeyboardPanels();
+    const contentPanel = document.querySelector("#content");
+    contentPanel?.addEventListener("focusin", () => setPanelFocusScope("main"));
+    contentPanel?.addEventListener("mousedown", (event) => {
+      if (isFocusableClickTarget(event.target))
+        setPanelFocusScope("main");
+      else
+        focusMainPanel();
+    });
     function applySidebarWidth(w) {
       const cw = Math.max(180, Math.min(900, w));
       document.documentElement.style.setProperty("--sidebar-w", cw + "px");
@@ -9637,6 +10442,13 @@
       sb.addEventListener("mousedown", mark);
       sb.addEventListener("touchstart", mark, { passive: true });
       sb.addEventListener("scroll", mark, { passive: true });
+      sb.addEventListener("focusin", () => setPanelFocusScope("sidebar"));
+      sb.addEventListener("mousedown", (event) => {
+        if (isFocusableClickTarget(event.target))
+          setPanelFocusScope("sidebar");
+        else
+          focusSidebarPanel();
+      });
     })();
     (function setupResizer() {
       const handle = $("#sidebar-resizer");
@@ -9699,6 +10511,32 @@
     function visibleSidebarItems() {
       return $$("#filelist li[data-path], #filelist .tree-dir[data-dirpath]").filter(isSidebarRowVisible);
     }
+    function scrollSidebarItemIntoView(item, block2 = "nearest") {
+      const sidebar = document.querySelector("#sidebar");
+      if (!sidebar) {
+        item.scrollIntoView({ block: block2 });
+        return;
+      }
+      const sidebarRect = sidebar.getBoundingClientRect();
+      const itemRect = item.getBoundingClientRect();
+      const stickyBottom = Math.max(sidebarRect.top, document.querySelector(".sb-head")?.getBoundingClientRect().bottom || sidebarRect.top, document.querySelector(".sb-filter-wrap")?.getBoundingClientRect().bottom || sidebarRect.top);
+      const topPadding = Math.max(8, stickyBottom - sidebarRect.top + 8);
+      const bottomPadding = 14;
+      const visibleTop = sidebarRect.top + topPadding;
+      const visibleBottom = sidebarRect.bottom - bottomPadding;
+      if (block2 === "start") {
+        sidebar.scrollTop += itemRect.top - visibleTop;
+        return;
+      }
+      if (block2 === "end") {
+        sidebar.scrollTop += itemRect.bottom - visibleBottom;
+        return;
+      }
+      if (itemRect.top < visibleTop)
+        sidebar.scrollTop += itemRect.top - visibleTop;
+      else if (itemRect.bottom > visibleBottom)
+        sidebar.scrollTop += itemRect.bottom - visibleBottom;
+    }
     function isRepositorySidebarMode() {
       return document.body.classList.contains("gdp-repo-page") || document.body.classList.contains("gdp-repo-blob-page");
     }
@@ -9714,7 +10552,44 @@
       const path = target.dataset.path || target.dataset.dirpath;
       if (path)
         markActive(path);
-      target.scrollIntoView({ block: "nearest" });
+      scrollSidebarItemIntoView(target);
+      if (target.dataset.path)
+        prefetchByPath(target.dataset.path);
+    }
+    function moveActiveSidebarPage(direction) {
+      const items = visibleSidebarItems();
+      if (!items.length)
+        return;
+      const repoSidebar = isRepositorySidebarMode();
+      const sidebar = document.querySelector("#sidebar");
+      const sample = items.find((item) => item.getBoundingClientRect().height > 0);
+      const rowHeight = sample ? sample.getBoundingClientRect().height : 28;
+      const halfPageRows = Math.max(1, Math.floor((sidebar?.clientHeight || window.innerHeight) / 2 / rowHeight));
+      const current = items.findIndex((li) => li.classList.contains("active"));
+      const start = current < 0 ? 0 : current;
+      const idx = Math.max(0, Math.min(items.length - 1, start + direction * halfPageRows));
+      const target = items[idx];
+      const path = target.dataset.path || target.dataset.dirpath;
+      if (!repoSidebar && target.dataset.path)
+        target.click();
+      else if (path)
+        markActive(path);
+      scrollSidebarItemIntoView(target);
+      if (target.dataset.path)
+        prefetchByPath(target.dataset.path);
+    }
+    function moveActiveSidebarToEdge(edge) {
+      const items = visibleSidebarItems();
+      const repoSidebar = isRepositorySidebarMode();
+      const target = edge === "top" ? items[0] : items[items.length - 1];
+      if (!target)
+        return;
+      const path = target.dataset.path || target.dataset.dirpath;
+      if (!repoSidebar && target.dataset.path)
+        target.click();
+      else if (path)
+        markActive(path);
+      scrollSidebarItemIntoView(target, edge === "top" ? "start" : "end");
       if (target.dataset.path)
         prefetchByPath(target.dataset.path);
     }
@@ -9775,69 +10650,535 @@
       input.focus();
       input.select();
     }
-    document.addEventListener("keydown", (e2) => {
-      if ((e2.metaKey || e2.ctrlKey) && e2.key.toLowerCase() === "k") {
-        e2.preventDefault();
-        focusFileFilter();
+    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;
-      }
-      const targetEl = e2.target;
-      if (targetEl && (targetEl.tagName === "INPUT" || targetEl.tagName === "TEXTAREA"))
+      const previousFocusScope = PALETTE.previousFocusScope;
+      PALETTE.controller?.abort();
+      if (PALETTE.debounce)
+        window.clearTimeout(PALETTE.debounce);
+      PALETTE.root.remove();
+      PALETTE = null;
+      restorePanelFocusScope(previousFocusScope);
+    }
+    function createPalette(mode) {
+      const previousFocusScope = PALETTE ? PALETTE.previousFocusScope : getPanelFocusScope();
+      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],
+        previousFocusScope
+      };
+      PALETTE = state;
+      setPanelFocusScope(null);
+      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;
-      if (e2.key === "Escape" && !document.querySelector(".mkdp-lightbox")) {
-        if (cancelActiveSourceLoad("esc")) {
+      }
+      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 });
       }
-      if (e2.key === "/") {
+    }
+    function handlePaletteKeydown(e2, state) {
+      if (e2.key === "Escape") {
         e2.preventDefault();
-        focusFileFilter();
-      } else if (e2.key === "Enter") {
-        if (isRepositorySidebarMode()) {
-          e2.preventDefault();
-          openActiveSidebarItem();
-        }
-      } else if (e2.key === "j" || e2.key === "k") {
+        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);
+    }
+    function dispatchKeymapAction(action, scope, repeated = false) {
+      if (action !== "start-g-sequence") {
+        PENDING_G_SCOPE = null;
+        PENDING_G_UNTIL = 0;
+      }
+      if (action === "open-file-palette") {
+        if (PALETTE?.mode !== "file")
+          openSearchPalette("file");
+        return true;
+      }
+      if (action === "open-grep-palette") {
+        if (PALETTE?.mode !== "grep")
+          openSearchPalette("grep");
+        return true;
+      }
+      if (action === "focus-file-filter") {
+        focusFileFilter();
+        return true;
+      }
+      if (action === "focus-sidebar") {
+        focusSidebarPanel();
+        return true;
+      }
+      if (action === "focus-main") {
+        focusMainPanel();
+        return true;
+      }
+      if (action === "cancel-source-load") {
+        cancelActiveSourceLoad("esc");
+        return true;
+      }
+      if (action === "open-sidebar-item") {
+        if (!isRepositorySidebarMode())
+          return false;
+        openActiveSidebarItem();
+        focusMainPanel();
+        return true;
+      }
+      if (action === "sidebar-next" || action === "sidebar-previous") {
         const repoSidebar = isRepositorySidebarMode();
         const items = repoSidebar ? visibleSidebarItems() : $$("#filelist li[data-path]:not(.hidden):not(.hidden-by-tests)");
         if (!items.length)
-          return;
+          return true;
         let idx = items.findIndex((li) => li.classList.contains("active"));
         if (idx < 0)
           idx = 0;
         else
-          idx = e2.key === "j" ? Math.min(items.length - 1, idx + 1) : Math.max(0, idx - 1);
+          idx = action === "sidebar-next" ? Math.min(items.length - 1, idx + 1) : Math.max(0, idx - 1);
         const target = items[idx];
         const path = target?.dataset.path || target?.dataset.dirpath;
         if (!repoSidebar && target) {
           target.click();
-          target.scrollIntoView({ block: "nearest" });
+          scrollSidebarItemIntoView(target);
         } else if (path) {
           markActive(path);
-          target.scrollIntoView({ block: "nearest" });
+          scrollSidebarItemIntoView(target);
         }
-        const nextIdx = e2.key === "j" ? Math.min(items.length - 1, idx + 1) : Math.max(0, idx - 1);
+        const nextIdx = action === "sidebar-next" ? Math.min(items.length - 1, idx + 1) : Math.max(0, idx - 1);
         const nextItem = items[nextIdx];
         if (nextItem && nextItem !== target && nextItem.dataset.path)
           prefetchByPath(nextItem.dataset.path);
-      } else if (e2.key === "l") {
-        if (isRepositorySidebarMode()) {
-          e2.preventDefault();
-          toggleActiveSidebarDirectoryCollapsed();
-        }
-      } else if (e2.key === "h") {
-        if (isRepositorySidebarMode()) {
-          e2.preventDefault();
-          setActiveSidebarDirectoryCollapsed(true);
-        }
-      } else if (e2.key === "u")
+        return true;
+      }
+      if (action === "sidebar-page-down" || action === "sidebar-page-up") {
+        moveActiveSidebarPage(action === "sidebar-page-down" ? 1 : -1);
+        return true;
+      }
+      if (action === "sidebar-expand") {
+        if (!isRepositorySidebarMode())
+          return false;
+        toggleActiveSidebarDirectoryCollapsed();
+        return true;
+      }
+      if (action === "sidebar-collapse") {
+        if (!isRepositorySidebarMode())
+          return false;
+        setActiveSidebarDirectoryCollapsed(true);
+        return true;
+      }
+      if (action === "scroll-main-down" || action === "scroll-main-up") {
+        scrollMainPanel(action === "scroll-main-down" ? 1 : -1, repeated);
+        return true;
+      }
+      if (action === "scroll-main-page-down" || action === "scroll-main-page-up") {
+        scrollMainPanel(action === "scroll-main-page-down" ? 1 : -1, repeated, "page");
+        return true;
+      }
+      if (action === "tab-preview" || action === "tab-code") {
+        return switchSourceTab(action === "tab-preview" ? "preview" : "code");
+      }
+      if (action === "start-g-sequence") {
+        PENDING_G_SCOPE = scope;
+        PENDING_G_UNTIL = performance.now() + 900;
+        return true;
+      }
+      if (action === "goto-top" || action === "goto-bottom") {
+        const edge = action === "goto-top" ? "top" : "bottom";
+        if (scope === "main")
+          scrollMainToEdge(edge);
+        else if (scope === "sidebar")
+          moveActiveSidebarToEdge(edge);
+        else
+          window.scrollTo({ top: edge === "top" ? 0 : Math.max(document.documentElement.scrollHeight, document.body.scrollHeight), behavior: "auto" });
+        return true;
+      }
+      if (action === "layout-unified") {
         setLayout("line-by-line");
-      else if (e2.key === "s")
+        return true;
+      }
+      if (action === "layout-split") {
         setLayout("side-by-side");
-      else if (e2.key === "t")
+        return true;
+      }
+      if (action === "toggle-theme") {
         $("#theme").click();
+        return true;
+      }
+      return false;
+    }
+    document.addEventListener("keydown", (e2) => {
+      const targetEl = e2.target;
+      const scope = keymapScope(targetEl);
+      const action = resolveKeymapAction(e2, {
+        scope,
+        editable: isEditableKeyTarget(targetEl),
+        composing: e2.isComposing,
+        paletteOpen: !!PALETTE,
+        pendingG: PENDING_G_SCOPE === scope && performance.now() <= PENDING_G_UNTIL,
+        lightboxOpen: !!document.querySelector(".mkdp-lightbox")
+      });
+      if (!action)
+        return;
+      if (dispatchKeymapAction(action, scope, e2.repeat))
+        e2.preventDefault();
     });
     applyTheme();
     setLayout(STATE.layout);
@@ -9864,6 +11205,12 @@
       }).catch(() => setStatus("error"));
     }
     function load(options = {}) {
+      if (STATE.route.screen === "help") {
+        setStatus("live");
+        renderHelpPage();
+        syncHeaderMenu();
+        return Promise.resolve();
+      }
       if (STATE.route.screen === "repo")
         return loadRepo();
       setStatus("refreshing");
@@ -9882,7 +11229,10 @@
         setStatus("live");
       }).catch(() => setStatus("error"));
     }
-    if (STATE.route.screen === "repo")
+    if (STATE.route.screen === "help") {
+      setStatus("live");
+      renderHelpPage();
+    } else if (STATE.route.screen === "repo")
       loadRepo();
     else if (STATE.route.screen === "file" && STATE.route.view === "blob") {
       setStatus("live");
@@ -9905,10 +11255,13 @@
       const range = currentRange();
       if (STATE.route.screen === "file") {
         setRoute({ screen: "file", path: STATE.route.path, ref: STATE.route.ref, range }, true);
+      } else if (STATE.route.screen === "help") {
+        setRoute({ screen: "help", lang: helpLanguageFromRoute(), section: helpSectionFromRoute(), range }, true);
+        renderHelpPage();
       } else {
         setRoute({ screen: "diff", range }, true);
+        load();
       }
-      load();
     }
     syncRefInputs();
     syncHeaderMenu();
@@ -10109,6 +11462,13 @@
         STATE.repoRef = STATE.route.ref || "worktree";
       syncRefInputs();
       syncHeaderMenu();
+      if (STATE.route.screen === "help") {
+        cancelActiveSourceLoad("navigation");
+        setPageMode();
+        renderHelpPage();
+        setStatus("live");
+        return;
+      }
       if (STATE.route.screen === "repo") {
         cancelActiveSourceLoad("navigation");
         setPageMode();