@youtyan/code-viewer 0.1.15 → 0.1.16

package/package.json

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

package/web/app.js

@@ -378,6 +378,18 @@
     { 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: "scroll-main-page-down", key: "pagedown", scope: "main" },
+    { action: "scroll-main-page-up", key: "pageup", scope: "main" },
+    { action: "scroll-main-page-down", key: "pagedown", scope: "global" },
+    { action: "scroll-main-page-up", key: "pageup", scope: "global" },
+    { action: "scroll-main-page-down", key: "pagedown", scope: "sidebar" },
+    { action: "scroll-main-page-up", key: "pageup", scope: "sidebar" },
+    { action: "scroll-main-page-down", key: "arrowdown", scope: "main", ctrl: true },
+    { action: "scroll-main-page-up", key: "arrowup", scope: "main", ctrl: true },
+    { action: "scroll-main-page-down", key: "arrowdown", scope: "global", ctrl: true },
+    { action: "scroll-main-page-up", key: "arrowup", scope: "global", ctrl: true },
+    { action: "scroll-main-page-down", key: "arrowdown", scope: "sidebar", ctrl: true },
+    { action: "scroll-main-page-up", key: "arrowup", scope: "sidebar", 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 },
@@ -6772,6 +6784,7 @@
     const DEFAULT_RANGE = { from: "HEAD", to: "worktree" };
     const VIRTUAL_SOURCE_LINE_THRESHOLD = 3000;
     const VIRTUAL_SOURCE_SIZE_THRESHOLD = 1024 * 1024;
+    const VIRTUAL_SOURCE_PAGE_SIZE = 2000;
     const VIRTUAL_SOURCE_ROW_HEIGHT = 20;
     const VIRTUAL_SOURCE_HIGHLIGHT_MAX_LINE_LENGTH = 2000;
     let highlightLoadPromise = null;
@@ -6912,6 +6925,8 @@
         const before = scroller.scrollTop;
         if (edge === "center")
           scroller.scrollTop = Math.max(0, top - Math.round(scroller.clientHeight / 2));
+        else if (edge === "start")
+          scroller.scrollTop = top;
         else if (top < scroller.scrollTop)
           scroller.scrollTop = top;
         else if (bottom > scroller.scrollTop + scroller.clientHeight)
@@ -6944,7 +6959,7 @@
       const delta = unit === "page" ? pageRows : 1;
       cursor.line = Math.max(1, Math.min(total, cursor.line + direction * delta));
       syncSourceCursorRows(target);
-      scrollSourceCursorIntoView(cursor);
+      scrollSourceCursorIntoView(cursor, unit === "page" ? "start" : "nearest");
       return true;
     }
     function scrollMainPanel(direction, repeated = false, unit = "line") {
@@ -6959,6 +6974,31 @@
       else
         window.scrollBy({ top, behavior });
     }
+    let MAIN_SURFACE_FOCUS_SEQ = 0;
+    function focusMainSurface() {
+      const target = findMainScrollTarget();
+      if (target?.matches("#content .gdp-source-virtual-scroller")) {
+        target.focus({ preventScroll: true });
+        setPanelFocusScope("main");
+        return;
+      }
+      focusMainPanel();
+    }
+    function scheduleMainSurfaceFocus() {
+      const seq = ++MAIN_SURFACE_FOCUS_SEQ;
+      const apply = () => {
+        if (seq !== MAIN_SURFACE_FOCUS_SEQ || PALETTE)
+          return;
+        if (isEditableKeyTarget(document.activeElement))
+          return;
+        focusMainSurface();
+      };
+      focusMainPanel();
+      queueMicrotask(apply);
+      requestAnimationFrame(apply);
+      setTimeout(apply, 100);
+      setTimeout(apply, 300);
+    }
     function scrollMainToEdge(edge) {
       if (moveSourceCursor(edge === "bottom" ? 1 : -1, "edge", edge))
         return;
@@ -7586,7 +7626,7 @@
                 children_omitted: dir.children_omitted,
                 children_omitted_reason: dir.children_omitted_reason
               });
-              focusSidebarPanel();
+              scheduleMainSurfaceFocus();
             });
           } else {
             li.addEventListener("click", toggleDir);
@@ -7622,7 +7662,7 @@
               onFileClick(f2);
             else
               scrollToFile(f2.path);
-            focusSidebarPanel();
+            scheduleMainSurfaceFocus();
           });
           if (!onFileClick)
             li.addEventListener("mouseenter", () => prefetchByPath(f2.path), { passive: true });
@@ -7655,7 +7695,7 @@
             onFileClick(f2);
           else
             scrollToFile(f2.path);
-          focusSidebarPanel();
+          scheduleMainSurfaceFocus();
         });
         if (!onFileClick)
           li.addEventListener("mouseenter", () => prefetchByPath(f2.path), { passive: true });
@@ -9875,6 +9915,9 @@
         url.searchParams.delete("virtual");
       return url.pathname + url.search;
     }
+    function buildFileRangeUrl(target, start, end) {
+      return "/file_range?path=" + encodeURIComponent(target.path) + "&ref=" + encodeURIComponent(target.ref || "worktree") + "&start=" + encodeURIComponent(String(start)) + "&end=" + encodeURIComponent(String(end));
+    }
     function currentSourceLineTarget(target) {
       const routeTarget = sourceTargetFromRoute();
       return sourceTargetsEqual(routeTarget, target) && STATE.route.screen === "file" ? STATE.route.line : undefined;
@@ -9938,6 +9981,161 @@
     document.addEventListener("mouseup", () => {
       SOURCE_LINE_DRAG = null;
     });
+    function virtualSourceSearchRanges(line, query) {
+      const needle = query.toLowerCase();
+      if (!needle)
+        return [];
+      const haystack = line.toLowerCase();
+      const ranges = [];
+      let cursor = 0;
+      while (cursor <= haystack.length) {
+        const index = haystack.indexOf(needle, cursor);
+        if (index < 0)
+          break;
+        ranges.push({ start: index, end: index + query.length });
+        cursor = Math.max(index + query.length, index + 1);
+      }
+      return ranges;
+    }
+    function collectVirtualSourceSearchMatches(lines, query, max = 5000) {
+      const matches = [];
+      for (let index = 0;index < lines.length && matches.length < max; index++) {
+        for (const range of virtualSourceSearchRanges(lines[index] || "", query)) {
+          matches.push({ line: index + 1, start: range.start, end: range.end });
+          if (matches.length >= max)
+            break;
+        }
+      }
+      return matches;
+    }
+    function appendVirtualSourceLineCode(code2, line, query, activeRange, lineNumber) {
+      const ranges = virtualSourceSearchRanges(line, query);
+      if (!ranges.length)
+        return false;
+      let cursor = 0;
+      for (const range of ranges) {
+        if (range.start > cursor)
+          code2.appendChild(document.createTextNode(line.slice(cursor, range.start)));
+        const mark = document.createElement("mark");
+        const active = !!activeRange && activeRange.line === lineNumber && activeRange.start === range.start && activeRange.end === range.end;
+        mark.className = active ? "gdp-source-virtual-search-hit active" : "gdp-source-virtual-search-hit";
+        mark.textContent = line.slice(range.start, range.end);
+        code2.appendChild(mark);
+        cursor = range.end;
+      }
+      if (cursor < line.length)
+        code2.appendChild(document.createTextNode(line.slice(cursor)));
+      return true;
+    }
+    function createVirtualSourceSearch(wrap, scroller, findMatches, renderFn) {
+      const bar = document.createElement("div");
+      bar.className = "gdp-source-virtual-search";
+      const input = document.createElement("input");
+      input.type = "search";
+      input.placeholder = "Find in file";
+      input.autocomplete = "off";
+      input.spellcheck = false;
+      const count = document.createElement("span");
+      count.className = "gdp-source-virtual-search-count";
+      const previous = document.createElement("button");
+      previous.type = "button";
+      previous.textContent = "Prev";
+      const next = document.createElement("button");
+      next.type = "button";
+      next.textContent = "Next";
+      const close = document.createElement("button");
+      close.type = "button";
+      close.textContent = "Close";
+      bar.append(input, count, previous, next, close);
+      wrap.querySelector(".gdp-source-virtual-info")?.appendChild(bar);
+      bar.hidden = true;
+      let matches = [];
+      let active = -1;
+      let debounce = 0;
+      let searchVersion = 0;
+      const hide = () => {
+        bar.hidden = true;
+        renderFn();
+        scroller.focus({ preventScroll: true });
+      };
+      const sync = () => {
+        const query = input.value;
+        const version = ++searchVersion;
+        if (!query) {
+          matches = [];
+          active = -1;
+          count.textContent = "";
+          renderFn();
+          return;
+        }
+        count.textContent = "Searching...";
+        findMatches(query).then((nextMatches) => {
+          if (version !== searchVersion)
+            return;
+          matches = nextMatches;
+          active = matches.length ? Math.max(0, Math.min(active, matches.length - 1)) : -1;
+          count.textContent = matches.length ? active + 1 + " / " + matches.length : "0 / 0";
+          if (active >= 0)
+            scroller.scrollTop = Math.max(0, (matches[active].line - 1) * VIRTUAL_SOURCE_ROW_HEIGHT - VIRTUAL_SOURCE_ROW_HEIGHT * 3);
+          renderFn();
+        }).catch(() => {
+          if (version !== searchVersion)
+            return;
+          matches = [];
+          active = -1;
+          count.textContent = "Search failed";
+          renderFn();
+        });
+      };
+      const scheduleSync = () => {
+        if (debounce)
+          window.clearTimeout(debounce);
+        debounce = window.setTimeout(sync, 120);
+      };
+      const move = (direction) => {
+        if (!matches.length)
+          return;
+        active = (active + direction + matches.length) % matches.length;
+        count.textContent = active + 1 + " / " + matches.length;
+        scroller.scrollTop = Math.max(0, (matches[active].line - 1) * VIRTUAL_SOURCE_ROW_HEIGHT - VIRTUAL_SOURCE_ROW_HEIGHT * 3);
+        renderFn();
+      };
+      input.addEventListener("input", () => {
+        active = 0;
+        scheduleSync();
+      });
+      input.addEventListener("keydown", (e2) => {
+        if (e2.key === "Escape") {
+          e2.preventDefault();
+          hide();
+        } else if (e2.key === "Enter") {
+          e2.preventDefault();
+          move(e2.shiftKey ? -1 : 1);
+        }
+      });
+      previous.addEventListener("click", () => move(-1));
+      next.addEventListener("click", () => move(1));
+      close.addEventListener("click", hide);
+      return {
+        open: () => {
+          bar.hidden = false;
+          input.focus();
+          input.select();
+          sync();
+        },
+        query: () => bar.hidden ? "" : input.value,
+        activeRange: () => active >= 0 ? matches[active] || null : null
+      };
+    }
+    function openVirtualSourceSearchFromKeyboard(targetEl) {
+      const active = targetEl?.closest("#content .gdp-source-virtual");
+      const fallback = document.querySelector("#content .gdp-source-viewer.virtual .gdp-source-virtual:not([hidden])");
+      const search = active?.__gdpVirtualSourceSearch || fallback?.__gdpVirtualSourceSearch;
+      if (!search)
+        return false;
+      search.open();
+      return true;
+    }
     function renderVirtualSource(target, textValue, lines, hljsRef, lang) {
       const wrap = document.createElement("div");
       wrap.className = "gdp-source-virtual";
@@ -9986,6 +10184,9 @@
       info.append(badge, summary, actions);
       const scroller = document.createElement("div");
       scroller.className = "gdp-source-virtual-scroller";
+      scroller.tabIndex = 0;
+      scroller.setAttribute("role", "region");
+      scroller.setAttribute("aria-label", target.path + " source code");
       const spacer = document.createElement("div");
       spacer.className = "gdp-source-virtual-spacer";
       spacer.style.height = Math.max(1, lines.length * VIRTUAL_SOURCE_ROW_HEIGHT) + "px";
@@ -9997,6 +10198,7 @@
       let raf = 0;
       let renderedStart = -1;
       let renderedEnd = -1;
+      let search = null;
       const render = () => {
         raf = 0;
         const viewportHeight = scroller.clientHeight || window.innerHeight;
@@ -10023,7 +10225,9 @@
           const code2 = document.createElement("span");
           code2.className = "gdp-source-virtual-line-code";
           const line = lines[index] ?? "";
-          if (hljsRef && hljsRef.highlight && lang && line.length <= VIRTUAL_SOURCE_HIGHLIGHT_MAX_LINE_LENGTH && (!hljsRef.getLanguage || hljsRef.getLanguage(lang))) {
+          const searchQuery = search?.query() || "";
+          const activeRange = search?.activeRange() || null;
+          if (appendVirtualSourceLineCode(code2, line, searchQuery, activeRange, index + 1)) {} else if (hljsRef && hljsRef.highlight && lang && line.length <= VIRTUAL_SOURCE_HIGHLIGHT_MAX_LINE_LENGTH && (!hljsRef.getLanguage || hljsRef.getLanguage(lang))) {
             try {
               code2.innerHTML = hljsRef.highlight(line, { language: lang, ignoreIllegals: true }).value;
               code2.classList.add("hljs");
@@ -10044,6 +10248,8 @@
       };
       scroller.__gdpRenderVirtualSource = render;
       scroller.addEventListener("scroll", schedule, { passive: true });
+      search = createVirtualSourceSearch(wrap, scroller, (query) => Promise.resolve(collectVirtualSourceSearchMatches(lines, query)), render);
+      wrap.__gdpVirtualSourceSearch = search;
       let resizeObserver = null;
       resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
         if (!scroller.isConnected) {
@@ -10058,6 +10264,253 @@
       schedule();
       return wrap;
     }
+    function renderPagedVirtualSource(target, size, initialStart, initialLines, initialComplete, initialTotal, hljsRef, lang, signal) {
+      const wrap = document.createElement("div");
+      wrap.className = "gdp-source-virtual";
+      const info = document.createElement("div");
+      info.className = "gdp-source-virtual-info";
+      const badge = document.createElement("span");
+      badge.className = "gdp-source-virtual-badge";
+      badge.textContent = "Virtual mode";
+      const summary = document.createElement("span");
+      summary.className = "gdp-source-virtual-summary";
+      const actions = document.createElement("span");
+      actions.className = "gdp-source-virtual-actions";
+      const raw = document.createElement("a");
+      raw.className = "gdp-source-virtual-action";
+      raw.href = buildRawFileUrl(target);
+      raw.target = "_blank";
+      raw.rel = "noreferrer";
+      raw.textContent = "Open raw";
+      const full = document.createElement("a");
+      full.className = "gdp-source-virtual-action";
+      full.href = buildCurrentFileRouteWithVirtualMode(target, "off");
+      full.textContent = "Open full view";
+      full.title = "Render every line without paged loading. This can be slow for large files.";
+      full.addEventListener("click", (e2) => {
+        e2.preventDefault();
+        const url = new URL(full.href, window.location.origin);
+        setRoute(parseRoute(url.pathname, url.search, currentRange()), true);
+        renderStandaloneSource(target);
+      });
+      actions.append(raw, full);
+      info.append(badge, summary, actions);
+      const scroller = document.createElement("div");
+      scroller.className = "gdp-source-virtual-scroller";
+      scroller.tabIndex = 0;
+      scroller.setAttribute("role", "region");
+      scroller.setAttribute("aria-label", target.path + " source code");
+      const spacer = document.createElement("div");
+      spacer.className = "gdp-source-virtual-spacer";
+      const windowEl = document.createElement("div");
+      windowEl.className = "gdp-source-virtual-window";
+      spacer.appendChild(windowEl);
+      scroller.appendChild(spacer);
+      wrap.append(info, scroller);
+      const lines = new Map;
+      const requestedPages = new Set;
+      const failedPages = new Set;
+      const targetLine = lineTargetStart(currentSourceLineTarget(target)) || 1;
+      let complete = initialComplete;
+      let totalRows = initialComplete ? Math.max(1, initialTotal) : Math.max(initialTotal || 1, initialStart + initialLines.length - 1, targetLine + VIRTUAL_SOURCE_PAGE_SIZE);
+      initialLines.forEach((line, index) => lines.set(initialStart + index, line));
+      requestedPages.add(Math.max(0, Math.floor((initialStart - 1) / VIRTUAL_SOURCE_PAGE_SIZE)));
+      for (let line = initialStart;line < initialStart + initialLines.length; line += VIRTUAL_SOURCE_PAGE_SIZE) {
+        requestedPages.add(Math.max(0, Math.floor((line - 1) / VIRTUAL_SOURCE_PAGE_SIZE)));
+      }
+      const updateTotals = () => {
+        SOURCE_CURSOR_TOTALS.set(sourceCursorKey(target), totalRows);
+        summary.textContent = (complete ? totalRows.toLocaleString() : lines.size.toLocaleString() + "+") + " lines loaded from " + formatBytes(size) + ". More rows load as you scroll.";
+        spacer.style.height = Math.max(1, totalRows * VIRTUAL_SOURCE_ROW_HEIGHT) + "px";
+      };
+      const loadPage = (line) => {
+        if (signal?.aborted || complete && line > totalRows)
+          return;
+        const page = Math.max(0, Math.floor((line - 1) / VIRTUAL_SOURCE_PAGE_SIZE));
+        if (requestedPages.has(page))
+          return;
+        if (failedPages.has(page))
+          return;
+        requestedPages.add(page);
+        const start = page * VIRTUAL_SOURCE_PAGE_SIZE + 1;
+        const end = start + VIRTUAL_SOURCE_PAGE_SIZE - 1;
+        trackLoad(fetch(buildFileRangeUrl(target, start, end), { signal }).then((res) => res.ok ? res.json() : null).then((data) => {
+          if (!data || signal?.aborted)
+            return;
+          data.lines.forEach((lineValue, index) => lines.set(data.start + index, lineValue));
+          totalRows = data.complete ? Math.max(1, data.total) : Math.max(totalRows, data.total, end + VIRTUAL_SOURCE_PAGE_SIZE);
+          complete = data.complete === true;
+          updateTotals();
+          renderedStart = -1;
+          renderedEnd = -1;
+          render();
+        }).catch((err) => {
+          if (!isAbortError(err)) {
+            failedPages.add(page);
+            renderedStart = -1;
+            renderedEnd = -1;
+            schedule();
+          }
+        }));
+      };
+      let raf = 0;
+      let renderedStart = -1;
+      let renderedEnd = -1;
+      let search = null;
+      let searchController = null;
+      const render = () => {
+        raf = 0;
+        const viewportHeight = scroller.clientHeight || window.innerHeight;
+        const overscan = 20;
+        const start = Math.max(0, Math.floor(scroller.scrollTop / VIRTUAL_SOURCE_ROW_HEIGHT) - overscan);
+        const end = Math.min(totalRows, Math.ceil((scroller.scrollTop + viewportHeight) / VIRTUAL_SOURCE_ROW_HEIGHT) + overscan);
+        if (start === renderedStart && end === renderedEnd)
+          return;
+        renderedStart = start;
+        renderedEnd = end;
+        windowEl.replaceChildren();
+        windowEl.style.transform = "translateY(" + start * VIRTUAL_SOURCE_ROW_HEIGHT + "px)";
+        const fragment = document.createDocumentFragment();
+        for (let index = start;index < end; index++) {
+          const lineNumber = index + 1;
+          if (!lines.has(lineNumber))
+            loadPage(lineNumber);
+          const row = document.createElement("div");
+          row.className = "gdp-source-virtual-row";
+          row.dataset.line = String(lineNumber);
+          row.classList.toggle("gdp-source-line-target", lineInSourceTarget(lineNumber, currentSourceLineTarget(target)));
+          row.classList.toggle("gdp-source-cursor", sourceCursorMatches(target, lineNumber));
+          const num = document.createElement("span");
+          num.className = "gdp-source-virtual-line-number";
+          num.textContent = String(lineNumber);
+          bindSourceLineNumber(num, wrap, target, lineNumber);
+          const code2 = document.createElement("span");
+          code2.className = "gdp-source-virtual-line-code";
+          const line = lines.get(lineNumber);
+          if (line == null) {
+            code2.textContent = "";
+          } else if (appendVirtualSourceLineCode(code2, line, search?.query() || "", search?.activeRange() || null, lineNumber)) {} else if (hljsRef && hljsRef.highlight && lang && line.length <= VIRTUAL_SOURCE_HIGHLIGHT_MAX_LINE_LENGTH && (!hljsRef.getLanguage || hljsRef.getLanguage(lang))) {
+            try {
+              code2.innerHTML = hljsRef.highlight(line, { language: lang, ignoreIllegals: true }).value;
+              code2.classList.add("hljs");
+            } catch {
+              code2.textContent = line;
+            }
+          } else {
+            code2.textContent = line;
+          }
+          row.append(num, code2);
+          fragment.appendChild(row);
+        }
+        windowEl.appendChild(fragment);
+        if (!complete && totalRows - end < VIRTUAL_SOURCE_PAGE_SIZE) {
+          totalRows += VIRTUAL_SOURCE_PAGE_SIZE;
+          updateTotals();
+        }
+      };
+      const schedule = () => {
+        if (!raf)
+          raf = requestAnimationFrame(render);
+      };
+      scroller.__gdpRenderVirtualSource = render;
+      scroller.addEventListener("scroll", schedule, { passive: true });
+      const findPagedMatches = async (query, matchSignal) => {
+        const matches = [];
+        let startLine = 1;
+        let done = false;
+        while (!done && matches.length < 5000) {
+          const endLine = startLine + VIRTUAL_SOURCE_PAGE_SIZE - 1;
+          const data = await trackLoad(fetch(buildFileRangeUrl(target, startLine, endLine), { signal: matchSignal }).then((res) => {
+            if (!res.ok)
+              throw new Error("file range failed");
+            return res.json();
+          }));
+          if (matchSignal?.aborted)
+            return [];
+          data.lines.forEach((lineValue, index) => {
+            const lineNumber = data.start + index;
+            lines.set(lineNumber, lineValue);
+            for (const range of virtualSourceSearchRanges(lineValue, query)) {
+              matches.push({ line: lineNumber, start: range.start, end: range.end });
+              if (matches.length >= 5000)
+                break;
+            }
+          });
+          totalRows = data.complete ? Math.max(1, data.total) : Math.max(totalRows, data.total, endLine + VIRTUAL_SOURCE_PAGE_SIZE);
+          complete = data.complete === true;
+          updateTotals();
+          if (data.complete || !data.lines.length)
+            done = true;
+          else
+            startLine = data.start + data.lines.length;
+        }
+        renderedStart = -1;
+        renderedEnd = -1;
+        schedule();
+        return matches;
+      };
+      search = createVirtualSourceSearch(wrap, scroller, (query) => {
+        searchController?.abort();
+        searchController = new AbortController;
+        return findPagedMatches(query, searchController.signal);
+      }, render);
+      wrap.__gdpVirtualSourceSearch = search;
+      let resizeObserver = null;
+      resizeObserver = typeof ResizeObserver === "function" ? new ResizeObserver(() => {
+        if (!scroller.isConnected) {
+          resizeObserver?.disconnect();
+          resizeObserver = null;
+          return;
+        }
+        schedule();
+      }) : null;
+      resizeObserver?.observe(scroller);
+      updateTotals();
+      if (targetLine <= 1) {
+        render();
+        schedule();
+      }
+      return wrap;
+    }
+    async function renderPagedSourceText(card, target, size, signal) {
+      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");
+      view.className = "gdp-source-viewer virtual";
+      const header = isStandalone ? null : document.createElement("div");
+      if (header) {
+        header.className = "gdp-source-meta";
+        header.textContent = target.path + " @ " + target.ref;
+        view.appendChild(header);
+      }
+      const lineTarget = lineTargetStart(currentSourceLineTarget(target)) || 1;
+      const initialPage = Math.max(0, Math.floor((lineTarget - 1) / VIRTUAL_SOURCE_PAGE_SIZE));
+      const initialStart = initialPage * VIRTUAL_SOURCE_PAGE_SIZE + 1;
+      const initialEnd = initialStart + VIRTUAL_SOURCE_PAGE_SIZE - 1;
+      const lang = inferLang(target.path);
+      const hljsRef = STATE.syntaxHighlight ? await loadSyntaxHighlighter() : null;
+      if (signal?.aborted)
+        return false;
+      const initial = await trackLoad(fetch(buildFileRangeUrl(target, initialStart, initialEnd), { signal }).then((res) => res.ok ? res.json() : null));
+      if (!initial)
+        return false;
+      if (signal?.aborted)
+        return false;
+      const tabsHost = card.querySelector(".gdp-file-detail-tabs");
+      if (tabsHost) {
+        tabsHost.hidden = false;
+        tabsHost.replaceChildren(createSourceTabs("code").tabs);
+      }
+      SOURCE_CURSOR_TOTALS.set(sourceCursorKey(target), Math.max(1, initial.total, lineTarget));
+      resetSourceCursorForTarget(target, Math.max(1, initial.total, lineTarget));
+      const virtualCode = renderPagedVirtualSource(target, size, initialStart, initial.lines, initial.complete === true, initial.total, hljsRef, lang, signal);
+      view.appendChild(virtualCode);
+      if (body)
+        body.replaceWith(view);
+      else
+        card.appendChild(view);
+      return true;
+    }
     function renderSourceMedia(card, target, mediaKind) {
       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");
@@ -10259,6 +10712,19 @@
           return;
         }
         if (displayKind === "text") {
+          const meta = await loadRawFileInfo(target);
+          if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
+            return;
+          if (!isVirtualSourceDisabled() && meta.size != null && meta.size >= VIRTUAL_SOURCE_SIZE_THRESHOLD) {
+            const rendered2 = await renderPagedSourceText(card, target, meta.size, controller.signal);
+            if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
+              return;
+            if (!rendered2)
+              return;
+            scrollStandaloneSourceLine(card, lineTargetStart(STATE.route.screen === "file" ? STATE.route.line : undefined));
+            finishSourceLoad(req);
+            return;
+          }
           const response = await trackLoad(fetch(buildRawFileUrl(target), { signal: controller.signal }));
           if (req !== SOURCE_REQ_SEQ || !sourceTargetsEqual(sourceTargetFromRoute(), target))
             return;
@@ -10296,6 +10762,7 @@
       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));
+        virtualScroller.__gdpRenderVirtualSource?.();
         return;
       }
       const row = card.querySelector('.gdp-source-table tr[data-line="' + String(line) + '"]');
@@ -11541,8 +12008,50 @@
       }
       return false;
     }
+    function handleVirtualSourcePagingKey(e2, targetEl) {
+      if (e2.__gdpVirtualSourcePagingHandled)
+        return true;
+      if (e2.defaultPrevented || e2.isComposing || PALETTE || document.querySelector(".mkdp-lightbox"))
+        return false;
+      const editable = isEditableKeyTarget(targetEl);
+      const inVirtualSearch = !!targetEl?.closest(".gdp-source-virtual-search");
+      if (editable && !inVirtualSearch)
+        return false;
+      const key = e2.key.toLowerCase();
+      if (e2.altKey || e2.metaKey)
+        return false;
+      const isPlainPageKey = (key === "pagedown" || key === "pageup") && !e2.ctrlKey && !e2.shiftKey;
+      const isCtrlArrowKey = (key === "arrowdown" || key === "arrowup") && e2.ctrlKey && !e2.shiftKey;
+      if (!isPlainPageKey && !isCtrlArrowKey)
+        return false;
+      const scroller = findMainScrollTarget();
+      if (!scroller || !scroller.matches("#content .gdp-source-virtual-scroller"))
+        return false;
+      const pageDown = key === "pagedown" || key === "arrowdown";
+      const pageUp = key === "pageup" || key === "arrowup";
+      if (!pageDown && !pageUp)
+        return false;
+      e2.__gdpVirtualSourcePagingHandled = true;
+      e2.preventDefault();
+      e2.stopPropagation();
+      scrollMainPanel(pageDown ? 1 : -1, e2.repeat, "page");
+      focusMainSurface();
+      return true;
+    }
+    function handleVirtualSourcePagingKeydown(e2) {
+      handleVirtualSourcePagingKey(e2, e2.target);
+    }
+    document.addEventListener("keydown", handleVirtualSourcePagingKeydown, { capture: true });
     document.addEventListener("keydown", (e2) => {
+      if (e2.__gdpVirtualSourcePagingHandled)
+        return;
       const targetEl = e2.target;
+      if ((e2.ctrlKey || e2.metaKey) && e2.key.toLowerCase() === "f" && !isEditableKeyTarget(targetEl)) {
+        if (openVirtualSourceSearchFromKeyboard(targetEl)) {
+          e2.preventDefault();
+          return;
+        }
+      }
       const scope = keymapScope(targetEl);
       const action = resolveKeymapAction(e2, {
         scope,

package/web/style.css

@@ -2350,12 +2350,45 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.gdp-source-virtual-actions {
+.gdp-source-virtual-search {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  min-width: 0;
   margin-left: auto;
 }
+.gdp-source-virtual-search[hidden] {
+  display: none;
+}
+.gdp-source-virtual-search input {
+  width: min(220px, 28vw);
+  min-width: 120px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--fg);
+}
+.gdp-source-virtual-search button {
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-subtle);
+  color: var(--fg);
+  cursor: pointer;
+}
+.gdp-source-virtual-search-count {
+  min-width: 62px;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+.gdp-source-virtual-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
 .gdp-source-virtual-action {
   display: inline-flex;
   align-items: center;
@@ -2385,8 +2418,7 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   font-size: var(--code-font-size);
   line-height: 20px;
-  cursor: pointer;
-  user-select: none;
+  cursor: text;
 }
 .gdp-source-virtual-spacer {
   position: relative;
@@ -2426,6 +2458,15 @@ table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
 .gdp-source-virtual-line-code.hljs {
   background: var(--bg);
 }
+.gdp-source-virtual-search-hit {
+  background: #fff8c5;
+  color: inherit;
+  border-radius: 2px;
+}
+.gdp-source-virtual-search-hit.active {
+  background: var(--accent);
+  color: var(--bg);
+}
 .gdp-standalone-source.gdp-file-shell {
   border: 0;
   border-radius: 0;

package/web-src/server/git.ts

@@ -88,11 +88,34 @@ export function showBytes(ref: string, path: string, cwd: string): { code: numbe
   return runBytes(['git', 'show', `${ref}:${path}`], cwd);
 }
 
+export function catFileBlobStream(oid: string, cwd: string): { stream: ReadableStream<Uint8Array>; exited: Promise<number>; kill(signal?: string): void } {
+  const proc = Bun.spawn(['git', 'cat-file', 'blob', oid], { cwd, stdout: 'pipe', stderr: 'ignore', stdin: 'ignore' });
+  return {
+    stream: proc.stdout as ReadableStream<Uint8Array>,
+    exited: proc.exited,
+    kill: (signal?: string) => proc.kill(signal),
+  };
+}
+
 export function objectSize(ref: string, path: string, cwd: string): { code: number; size: number; stderr: string } {
   const res = run(['git', 'cat-file', '-s', `${ref}:${path}`], cwd);
   return { code: res.code, size: Number(res.stdout.trim()) || 0, stderr: res.stderr };
 }
 
+export function objectByteSize(oid: string, cwd: string): { code: number; size: number; stderr: string } {
+  const res = run(['git', 'cat-file', '-s', oid], cwd);
+  return { code: res.code, size: Number(res.stdout.trim()) || 0, stderr: res.stderr };
+}
+
+export function objectId(ref: string, path: string, cwd: string): { code: number; oid: string; stderr: string } {
+  const res = run(['git', 'rev-parse', '--verify', `${ref}:${path}`], cwd);
+  const oid = res.stdout.trim();
+  if (res.code !== 0 || !oid) return { code: res.code || 1, oid: '', stderr: res.stderr };
+  const type = run(['git', 'cat-file', '-t', oid], cwd);
+  if (type.code !== 0 || type.stdout.trim() !== 'blob') return { code: 1, oid: '', stderr: type.stderr };
+  return { code: 0, oid, stderr: '' };
+}
+
 export function verifyTreeRef(ref: string, cwd: string): boolean {
   if (!ref || ref === 'worktree') return false;
   if (ref.startsWith('-')) return false;

package/web-src/server/preview.ts

@@ -7,7 +7,18 @@ import type { DiffMeta, FileDiffResponse, FileMeta, FileRangeResponse, FileSearc
 import { cacheFresh, fileDiffCacheKey, setTimedCacheEntry, type TimedCacheEntry } from './cache';
 import { startDevAssetReload } from './dev-assets';
 import * as git from './git';
-import { isSameWorktreeRange } from './range';
+import {
+  buildLineOffsetIndexFromStream,
+  collectByteRangeFromStream,
+  collectBytesWithLineOffsetIndexFromStream,
+  collectLineRangeFromIndexedText,
+  collectLineRangeFromStream,
+  isSameWorktreeRange,
+  lineByteRangeForIndex,
+  parseHttpByteRange,
+  type LineOffsetIndex,
+  type LineRangeResult,
+} from './range';
 import {
   GREP_MAX_FILE_BYTES,
   buildFileSearchList,
@@ -29,6 +40,9 @@ const WATCHED_ASSET_FILES = ['index.html', 'style.css', 'app.js'];
 const SIZE_SMALL = 2000;
 const SIZE_MEDIUM = 8000;
 const SIZE_LARGE = 20000;
+const LINE_INDEX_MIN_START = 10000;
+const LINE_INDEX_MAX_FILE_BYTES = 256 * 1024 * 1024;
+const BLOB_LINE_CACHE_MAX_BYTES = 128 * 1024 * 1024;
 const MAX_UPLOAD_FILE_BYTES = 10 * 1024 * 1024;
 const MAX_UPLOAD_TOTAL_BYTES = 50 * 1024 * 1024;
 const MAX_UPLOAD_BODY_BYTES = MAX_UPLOAD_TOTAL_BYTES + 1024 * 1024;
@@ -54,6 +68,10 @@ const sseClients = new Set<ReadableStreamDefaultController<Uint8Array>>();
 const fileCache = new Map<string, TimedCacheEntry<{ diffText: string }>>();
 const metaCache = new Map<string, TimedCacheEntry<{ body: string; sig: string }>>();
 const fileListCache = new Map<string, { generation: number; body: FileSearchListResponse }>();
+const lineIndexCache = new Map<string, { signature: string; index: LineOffsetIndex }>();
+const blobLineIndexCache = new Map<string, LineOffsetIndex>();
+const blobBytesCache = new Map<string, Uint8Array>();
+let blobLineCacheBytes = 0;
 
 function parseCli() {
   const rest: string[] = [];
@@ -647,7 +665,138 @@ function handleFileDiff(url: URL) {
   return json(body);
 }
 
-function handleFileRange(url: URL) {
+function worktreeLineIndexSignature(full: string): string | null {
+  try {
+    const stat = statSync(full) as unknown as { size: number; mtimeMs: number; ctimeMs: number; ino?: number };
+    return `size:${stat.size}|mtime:${stat.mtimeMs}|ctime:${stat.ctimeMs}|ino:${stat.ino || 0}`;
+  } catch {
+    return null;
+  }
+}
+
+async function getWorktreeLineIndex(full: string): Promise<LineOffsetIndex | null> {
+  const signature = worktreeLineIndexSignature(full);
+  if (!signature) return null;
+  const cached = lineIndexCache.get(full);
+  if (cached?.signature === signature) {
+    lineIndexCache.delete(full);
+    lineIndexCache.set(full, cached);
+    return cached.index;
+  }
+  const stat = statSync(full) as unknown as { size: number };
+  if (stat.size > LINE_INDEX_MAX_FILE_BYTES) return null;
+  const index = await buildLineOffsetIndexFromStream(Bun.file(full).stream(), stat.size);
+  lineIndexCache.delete(full);
+  lineIndexCache.set(full, { signature, index });
+  while (lineIndexCache.size > 32) {
+    const oldest = lineIndexCache.keys().next().value;
+    if (oldest === undefined) break;
+    lineIndexCache.delete(oldest);
+  }
+  return index;
+}
+
+function cachedBlobLineRange(cacheKey: string, start: number, end: number): LineRangeResult | null {
+  const bytes = blobBytesCache.get(cacheKey);
+  const index = blobLineIndexCache.get(cacheKey);
+  if (!bytes || !index) return null;
+  blobBytesCache.delete(cacheKey);
+  blobBytesCache.set(cacheKey, bytes);
+  blobLineIndexCache.delete(cacheKey);
+  blobLineIndexCache.set(cacheKey, index);
+  const range = lineByteRangeForIndex(index, start, end);
+  const textValue = range
+    ? new TextDecoder().decode(bytes.subarray(range.start, range.endExclusive))
+    : '';
+  return collectLineRangeFromIndexedText(textValue, index, start, end);
+}
+
+function setBlobLineCache(cacheKey: string, bytes: Uint8Array, index: LineOffsetIndex): void {
+  setBlobLineIndexCache(cacheKey, index);
+  const existing = blobBytesCache.get(cacheKey);
+  if (existing) blobLineCacheBytes -= existing.byteLength;
+  blobBytesCache.delete(cacheKey);
+  if (bytes.byteLength > BLOB_LINE_CACHE_MAX_BYTES) return;
+  blobBytesCache.set(cacheKey, bytes);
+  blobLineCacheBytes += bytes.byteLength;
+  while (blobBytesCache.size > 16 || blobLineCacheBytes > BLOB_LINE_CACHE_MAX_BYTES) {
+    const oldest = blobBytesCache.keys().next().value;
+    if (oldest === undefined) break;
+    const evicted = blobBytesCache.get(oldest);
+    if (evicted) blobLineCacheBytes -= evicted.byteLength;
+    blobBytesCache.delete(oldest);
+  }
+}
+
+function setBlobLineIndexCache(cacheKey: string, index: LineOffsetIndex): void {
+  blobLineIndexCache.delete(cacheKey);
+  blobLineIndexCache.set(cacheKey, index);
+  while (blobLineIndexCache.size > 128) {
+    const oldest = blobLineIndexCache.keys().next().value;
+    if (oldest === undefined) break;
+    blobLineIndexCache.delete(oldest);
+  }
+}
+
+async function collectGitBlobLineRangeWithIndex(cacheKey: string, oid: string, index: LineOffsetIndex, start: number, end: number): Promise<LineRangeResult | null> {
+  blobLineIndexCache.delete(cacheKey);
+  blobLineIndexCache.set(cacheKey, index);
+  const range = lineByteRangeForIndex(index, start, end);
+  if (!range) return collectLineRangeFromIndexedText('', index, start, end);
+  const shown = git.catFileBlobStream(oid, cwd);
+  const bytes = await collectByteRangeFromStream(shown.stream, range.start, range.endExclusive);
+  await shown.exited;
+  if (bytes.byteLength !== range.endExclusive - range.start) return null;
+  const textValue = new TextDecoder().decode(bytes);
+  return collectLineRangeFromIndexedText(textValue, index, start, end);
+}
+
+async function readGitBlobBytesWithIndex(oid: string, sizeHint: number): Promise<{ bytes: Uint8Array; index: LineOffsetIndex } | null> {
+  const shown = git.catFileBlobStream(oid, cwd);
+  const result = await collectBytesWithLineOffsetIndexFromStream(shown.stream, sizeHint);
+  const code = await shown.exited;
+  if (code !== 0) return null;
+  return result;
+}
+
+async function collectGitBlobLineRangeFromStream(oid: string, start: number, end: number): Promise<LineRangeResult | null> {
+  const shown = git.catFileBlobStream(oid, cwd);
+  const result = await collectLineRangeFromStream(shown.stream, start, end);
+  const code = await shown.exited;
+  if (code !== 0 && result.complete) return null;
+  return result;
+}
+
+async function collectIndexedGitBlobLineRange(path: string, oid: string, size: number, start: number, end: number): Promise<LineRangeResult | null> {
+  const cacheKey = `${oid}\0${path}`;
+  const cached = cachedBlobLineRange(cacheKey, start, end);
+  if (cached) return cached;
+  const cachedIndex = blobLineIndexCache.get(cacheKey);
+  if (cachedIndex) return collectGitBlobLineRangeWithIndex(cacheKey, oid, cachedIndex, start, end);
+  if (start < LINE_INDEX_MIN_START) {
+    return collectGitBlobLineRangeFromStream(oid, start, end);
+  }
+  if (size > LINE_INDEX_MAX_FILE_BYTES) return collectGitBlobLineRangeFromStream(oid, start, end);
+  const indexedBlob = await readGitBlobBytesWithIndex(oid, size);
+  if (!indexedBlob) return null;
+  setBlobLineCache(cacheKey, indexedBlob.bytes, indexedBlob.index);
+  return cachedBlobLineRange(cacheKey, start, end) || collectGitBlobLineRangeWithIndex(cacheKey, oid, indexedBlob.index, start, end);
+}
+
+async function collectIndexedWorktreeLineRange(full: string, start: number, end: number): Promise<LineRangeResult> {
+  if (start < LINE_INDEX_MIN_START && !lineIndexCache.has(full)) {
+    return collectLineRangeFromStream(Bun.file(full).stream(), start, end);
+  }
+  const index = await getWorktreeLineIndex(full);
+  if (!index) return collectLineRangeFromStream(Bun.file(full).stream(), start, end);
+  const range = lineByteRangeForIndex(index, start, end);
+  const textValue = range
+    ? await Bun.file(full).slice(range.start, range.endExclusive).text()
+    : '';
+  return collectLineRangeFromIndexedText(textValue, index, start, end);
+}
+
+async function handleFileRange(url: URL) {
   const path = url.searchParams.get('path') || '';
   if (!safePath(path)) return text('invalid path', 400);
   let start = Number(url.searchParams.get('start') || '1') || 1;
@@ -655,22 +804,23 @@ function handleFileRange(url: URL) {
   if (start < 1) start = 1;
   if (end < start) end = start;
   const ref = url.searchParams.get('ref') || 'worktree';
-  let content = '';
   if (ref === 'worktree' || ref === '') {
     const full = safeWorktreePath(path);
     if (!full) return text('no file', 404);
-    content = readFileSync(full, 'utf8');
+    const result = await collectIndexedWorktreeLineRange(full, start, end);
+    const body: FileRangeResponse = { path, ref, start, end, lines: result.lines, total: result.total, complete: result.complete, generation };
+    return json(body);
   } else {
     if (!git.verifyTreeRef(ref, cwd)) return text('invalid ref', 400);
-    const res = git.show(ref, path, cwd);
-    if (res.code !== 0) return text('not in ref', 404);
-    content = res.stdout;
+    const oid = git.objectId(ref, path, cwd);
+    if (oid.code !== 0 || !oid.oid) return text('not in ref', 404);
+    const size = git.objectByteSize(oid.oid, cwd);
+    if (size.code !== 0) return text('cannot read ref', 500);
+    const result = await collectIndexedGitBlobLineRange(path, oid.oid, size.size, start, end);
+    if (!result) return text('cannot read ref', 500);
+    const body: FileRangeResponse = { path, ref, start, end, lines: result.lines, total: result.total, complete: result.complete, generation };
+    return json(body);
   }
-  const lines: string[] = [];
-  const all = `${content}\n`.split('\n');
-  for (let i = start; i <= end && i <= all.length; i++) lines.push(all[i - 1]);
-  const body: FileRangeResponse = { path, ref, start, end, lines, total: Math.min(all.length, end + 1), generation };
-  return json(body);
 }
 
 function handleRawFile(req: Request, url: URL) {
@@ -692,10 +842,29 @@ function handleRawFile(req: Request, url: URL) {
     if (!full) return text('not found', 404);
     const size = rawFileSize(path, ref);
     if (size == null) return text('not found', 404);
+    const rangeResult = req.headers.get('range') ? parseHttpByteRange(req.headers.get('range'), size) : null;
+    if (rangeResult?.kind === 'unsatisfiable') {
+      return new Response(null, {
+        status: 416,
+        headers: { ...rawFileHeaders(path, size), 'Content-Range': `bytes */${size}`, 'Content-Length': '0' },
+      });
+    }
+    if (rangeResult?.kind === 'range') {
+      const range = rangeResult.range;
+      if (req.method === 'HEAD') {
+        return new Response(null, {
+          status: 206,
+          headers: rawFileHeaders(path, size, range),
+        });
+      }
+      const file = Bun.file(full).slice(range.start, range.end + 1);
+      return new Response(file, {
+        status: 206,
+        headers: rawFileHeaders(path, size, range),
+      });
+    }
     if (req.method === 'HEAD') return new Response(null, { headers: rawFileHeaders(path, size) });
-    const bytes = new Uint8Array(readFileSync(full));
-    body = bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength) as ArrayBuffer;
-    return new Response(body, { headers: rawFileHeaders(path, size) });
+    return new Response(Bun.file(full).stream(), { headers: rawFileHeaders(path, size) });
   }
 }
 
@@ -714,7 +883,7 @@ function rawFileSize(path: string, ref: string): number | null {
   }
 }
 
-function rawFileHeaders(path: string, size: number | null = null): HeadersInit {
+function rawFileHeaders(path: string, size: number | null = null, range?: { start: number; end: number }): HeadersInit {
   const mime: Record<string, string> = {
     '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.gif': 'image/gif',
     '.webp': 'image/webp', '.svg': 'image/svg+xml', '.mp4': 'video/mp4', '.webm': 'video/webm',
@@ -727,8 +896,14 @@ function rawFileHeaders(path: string, size: number | null = null): HeadersInit {
     'Cache-Control': 'no-store',
     'X-Content-Type-Options': 'nosniff',
     'Content-Security-Policy': 'sandbox',
+    'Accept-Ranges': 'bytes',
   };
-  if (size != null) headers['Content-Length'] = String(size);
+  if (range && size != null) {
+    headers['Content-Length'] = String(range.end - range.start + 1);
+    headers['Content-Range'] = `bytes ${range.start}-${range.end}/${size}`;
+  } else if (size != null) {
+    headers['Content-Length'] = String(size);
+  }
   return headers;
 }
 

package/web-src/server/range.ts

@@ -3,6 +3,234 @@ export type DiffRange = {
   to?: string;
 };
 
+export type ByteRange = {
+  start: number;
+  end: number;
+};
+
+export type ByteRangeParseResult =
+  | { kind: 'range'; range: ByteRange }
+  | { kind: 'invalid' }
+  | { kind: 'unsatisfiable' };
+
+export type LineRangeResult = {
+  lines: string[];
+  total: number;
+  complete: boolean;
+};
+
+export type LineOffsetIndex = {
+  size: number;
+  total: number;
+  newlines: Uint32Array | Float64Array;
+};
+
+export type IndexedLineByteRange = {
+  start: number;
+  endExclusive: number;
+};
+
+export type BytesWithLineOffsetIndex = {
+  bytes: Uint8Array;
+  index: LineOffsetIndex;
+};
+
 export function isSameWorktreeRange(range: DiffRange): boolean {
   return range.from === 'worktree' && range.to === 'worktree';
 }
+
+export function parseHttpByteRange(header: string | null, size: number): ByteRangeParseResult {
+  if (!header) return { kind: 'invalid' };
+  if (size < 1) return { kind: 'unsatisfiable' };
+  const match = header.match(/^bytes=(\d*)-(\d*)$/);
+  if (!match) return { kind: 'invalid' };
+  const [, rawStart, rawEnd] = match;
+  if (!rawStart && !rawEnd) return { kind: 'invalid' };
+  let start: number;
+  let end: number;
+  if (!rawStart) {
+    const suffixLength = Number(rawEnd);
+    if (!Number.isSafeInteger(suffixLength) || suffixLength < 1) return { kind: 'unsatisfiable' };
+    start = Math.max(0, size - suffixLength);
+    end = size - 1;
+  } else {
+    start = Number(rawStart);
+    end = rawEnd ? Number(rawEnd) : size - 1;
+    if (!Number.isSafeInteger(start) || !Number.isSafeInteger(end)) return { kind: 'invalid' };
+    if (end >= size) end = size - 1;
+  }
+  if (start < 0 || end < start || start >= size) return { kind: 'unsatisfiable' };
+  return { kind: 'range', range: { start, end } };
+}
+
+export async function collectLineRangeFromStream(stream: ReadableStream<Uint8Array>, start: number, end: number): Promise<LineRangeResult> {
+  const reader = stream.getReader();
+  const decoder = new TextDecoder();
+  const lines: string[] = [];
+  let lineNo = 1;
+  let pending = '';
+  let hasMore = false;
+
+  const pushLine = (line: string) => {
+    if (line.endsWith('\r')) line = line.slice(0, -1);
+    if (lineNo >= start && lineNo <= end) lines.push(line);
+    else if (lineNo > end) hasMore = true;
+    lineNo++;
+  };
+
+  while (!hasMore) {
+    const chunk = await reader.read();
+    if (chunk.done) break;
+    pending += decoder.decode(chunk.value, { stream: true });
+    let newline = pending.indexOf('\n');
+    while (newline !== -1) {
+      pushLine(pending.slice(0, newline));
+      pending = pending.slice(newline + 1);
+      if (hasMore) break;
+      newline = pending.indexOf('\n');
+    }
+  }
+  if (hasMore) {
+    try { await reader.cancel(); } catch { /* best effort */ }
+    return { lines, total: lineNo - 1, complete: false };
+  }
+  pending += decoder.decode();
+  if (pending.length > 0) pushLine(pending);
+  if (hasMore) return { lines, total: lineNo - 1, complete: false };
+  return { lines, total: Math.max(0, lineNo - 1), complete: true };
+}
+
+export function buildLineOffsetIndex(bytes: Uint8Array): LineOffsetIndex {
+  const builder = createLineOffsetIndexBuilder(bytes.length);
+  for (let index = 0; index < bytes.length; index++) {
+    if (bytes[index] === 10) builder.push(index);
+  }
+  const lastByte = bytes.length > 0 ? bytes[bytes.length - 1] : -1;
+  return builder.finish(bytes.length, bytes.length > 0 && lastByte !== 10);
+}
+
+export async function buildLineOffsetIndexFromStream(stream: ReadableStream<Uint8Array>, size: number): Promise<LineOffsetIndex> {
+  const reader = stream.getReader();
+  const builder = createLineOffsetIndexBuilder(size);
+  let offset = 0;
+  let lastByte = -1;
+  while (true) {
+    const chunk = await reader.read();
+    if (chunk.done) break;
+    const bytes = chunk.value;
+    for (let index = 0; index < bytes.length; index++) {
+      const byte = bytes[index];
+      if (byte === 10) builder.push(offset + index);
+      lastByte = byte;
+    }
+    offset += bytes.length;
+  }
+  return builder.finish(offset, offset > 0 && lastByte !== 10);
+}
+
+export async function collectByteRangeFromStream(stream: ReadableStream<Uint8Array>, start: number, endExclusive: number): Promise<Uint8Array> {
+  const reader = stream.getReader();
+  const chunks: Uint8Array[] = [];
+  let offset = 0;
+  let total = 0;
+  while (offset < endExclusive) {
+    const chunk = await reader.read();
+    if (chunk.done) break;
+    const chunkStart = offset;
+    const chunkEnd = offset + chunk.value.byteLength;
+    if (chunkEnd > start && chunkStart < endExclusive) {
+      const sliceStart = Math.max(0, start - chunkStart);
+      const sliceEnd = Math.min(chunk.value.byteLength, endExclusive - chunkStart);
+      const slice = chunk.value.subarray(sliceStart, sliceEnd);
+      chunks.push(slice);
+      total += slice.byteLength;
+    }
+    offset = chunkEnd;
+  }
+  try { await reader.cancel(); } catch { /* best effort */ }
+  if (chunks.length === 1) return chunks[0];
+  const bytes = new Uint8Array(total);
+  let writeOffset = 0;
+  for (const chunk of chunks) {
+    bytes.set(chunk, writeOffset);
+    writeOffset += chunk.byteLength;
+  }
+  return bytes;
+}
+
+export async function collectBytesWithLineOffsetIndexFromStream(stream: ReadableStream<Uint8Array>, sizeHint: number): Promise<BytesWithLineOffsetIndex> {
+  const reader = stream.getReader();
+  const builder = createLineOffsetIndexBuilder(sizeHint);
+  const chunks: Uint8Array[] = [];
+  let offset = 0;
+  let lastByte = -1;
+  while (true) {
+    const chunk = await reader.read();
+    if (chunk.done) break;
+    const bytes = chunk.value;
+    chunks.push(bytes);
+    for (let index = 0; index < bytes.length; index++) {
+      const byte = bytes[index];
+      if (byte === 10) builder.push(offset + index);
+      lastByte = byte;
+    }
+    offset += bytes.length;
+  }
+  const collected = new Uint8Array(offset);
+  let writeOffset = 0;
+  for (const chunk of chunks) {
+    collected.set(chunk, writeOffset);
+    writeOffset += chunk.byteLength;
+  }
+  return {
+    bytes: collected,
+    index: builder.finish(offset, offset > 0 && lastByte !== 10),
+  };
+}
+
+function createLineOffsetIndexBuilder(size: number) {
+  const useFloat64 = size > 0xffffffff;
+  let capacity = 1024;
+  let length = 0;
+  let offsets: Uint32Array | Float64Array = useFloat64 ? new Float64Array(capacity) : new Uint32Array(capacity);
+  const grow = () => {
+    capacity *= 2;
+    const next = useFloat64 ? new Float64Array(capacity) : new Uint32Array(capacity);
+    next.set(offsets);
+    offsets = next;
+  };
+  return {
+    push(offset: number) {
+      if (length >= capacity) grow();
+      offsets[length++] = offset;
+    },
+    finish(totalSize: number, hasTrailingLine: boolean): LineOffsetIndex {
+      return {
+        size: totalSize,
+        total: length + (hasTrailingLine ? 1 : 0),
+        newlines: offsets.slice(0, length) as Uint32Array | Float64Array,
+      };
+    },
+  };
+}
+
+export function lineByteRangeForIndex(index: LineOffsetIndex, start: number, end: number): IndexedLineByteRange | null {
+  const normalizedStart = Math.max(1, Math.floor(start));
+  const normalizedEnd = Math.max(normalizedStart, Math.floor(end));
+  if (normalizedStart > index.total) return null;
+  const lastLine = Math.min(normalizedEnd, index.total);
+  const byteStart = normalizedStart <= 1 ? 0 : index.newlines[normalizedStart - 2] + 1;
+  const byteEnd = lastLine <= index.newlines.length ? index.newlines[lastLine - 1] : index.size;
+  return { start: byteStart, endExclusive: byteEnd };
+}
+
+export function collectLineRangeFromIndexedText(text: string, index: LineOffsetIndex, start: number, end: number): LineRangeResult {
+  const normalizedStart = Math.max(1, Math.floor(start));
+  const normalizedEnd = Math.max(normalizedStart, Math.floor(end));
+  if (normalizedStart > index.total) return { lines: [], total: index.total, complete: true };
+  const expectedLines = Math.min(normalizedEnd, index.total) - normalizedStart + 1;
+  const lines = text.length
+    ? text.split('\n').map(line => line.endsWith('\r') ? line.slice(0, -1) : line)
+    : Array.from({ length: expectedLines }, () => '');
+  return { lines, total: index.total, complete: end >= index.total };
+}

package/web-src/server/runtime.d.ts

@@ -1,7 +1,17 @@
+interface BunFile extends globalThis.Blob {
+  arrayBuffer(): Promise<ArrayBuffer>;
+  slice(start?: number, end?: number, contentType?: string): BunFile;
+  stream(): ReadableStream<Uint8Array<ArrayBuffer>>;
+  text(): Promise<string>;
+}
+
 declare const Bun: {
+  file(path: string): BunFile;
   spawn(args: string[], opts?: Record<string, unknown>): {
     kill(signal?: string): void;
     exited: Promise<number>;
+    stdout?: ReadableStream<Uint8Array>;
+    stderr?: ReadableStream<Uint8Array>;
   };
   spawnSync(args: string[], opts?: Record<string, unknown>): {
     exitCode: number;

package/web-src/types.ts

@@ -106,7 +106,13 @@ export type FileRangeResponse = {
   start: number;
   end: number;
   lines: string[];
+  /**
+   * When complete is true, total is the file's total line count.
+   * When complete is false, total is only the highest line number the server
+   * had to scan to prove more lines exist.
+   */
   total: number;
+  complete?: boolean;
   generation?: number;
 };