@youtyan/code-viewer 0.1.42 → 0.1.44

package/README.md

@@ -9,6 +9,7 @@ Requires Node.js 20 or newer when installed from npm. Development uses
 
 - Browse repository files and folders in a persistent sidebar.
 - View git diffs with unified or split layout, lazy loading, and viewed-file state.
+- Browse commit history per branch and open any commit's changed files and diff, with shareable `/history?commit=<sha>` links.
 - Open files directly from the repository or diff view, including large generated files.
 - Preview Markdown with a table of contents, task lists, Mermaid diagrams, and Shiki code highlighting.
 - Preview browser-safe media and show metadata for binary files that cannot be rendered.

package/dist/code-viewer.js

@@ -633,6 +633,127 @@ function refCommits(cwd, query = "", max = DEFAULT_REF_COMMIT_LIMIT) {
   ]);
   return mergeCommitResults(limit, hashMatches, subjectMatches, authorMatches);
 }
+function parseRemoteWebUrl(remote) {
+  const raw = (remote || "").trim();
+  if (!raw)
+    return null;
+  const sshShorthand = /^[\w.-]+@([\w.-]+):(.+?)(?:\.git)?\/?$/.exec(raw);
+  if (sshShorthand)
+    return `https://${sshShorthand[1]}/${sshShorthand[2]}`;
+  const sshUrl = /^ssh:\/\/(?:[\w.-]+@)?([\w.-]+)(?::\d+)?\/(.+?)(?:\.git)?\/?$/.exec(raw);
+  if (sshUrl)
+    return `https://${sshUrl[1]}/${sshUrl[2]}`;
+  const httpUrl = /^https?:\/\/([\w.-]+)\/(.+?)(?:\.git)?\/?$/.exec(raw);
+  if (httpUrl)
+    return `https://${httpUrl[1]}/${httpUrl[2]}`;
+  return null;
+}
+function remoteWebUrl(cwd) {
+  const res = run(["git", "remote", "get-url", "origin"], cwd);
+  if (res.code !== 0)
+    return null;
+  return parseRemoteWebUrl(res.stdout.trim());
+}
+function parseHistoryLog(stdout) {
+  const parts = stdout.split("\x00");
+  const commits = [];
+  for (let index = 0;index < parts.length; ) {
+    if (!parts[index]) {
+      index++;
+      continue;
+    }
+    const sha = parts[index++] || "";
+    const subject = parts[index++] || "";
+    const author = parts[index++] || "";
+    const when = parts[index++] || "";
+    const parentsRaw = (parts[index++] || "").trim();
+    const body = (parts[index++] || "").trim();
+    if (sha)
+      commits.push({
+        sha,
+        subject,
+        author,
+        when,
+        parents: parentsRaw ? parentsRaw.split(/\s+/) : [],
+        body
+      });
+  }
+  return commits;
+}
+function historyQueryArgs(query) {
+  const trimmed = query.trim().slice(0, 200).replace(/\0/g, "");
+  if (!trimmed)
+    return { filterArgs: [], pathspec: [], shaTerm: "" };
+  const prefixed = /^(author|path):(.*)$/.exec(trimmed);
+  if (prefixed) {
+    const term = prefixed[2].trim();
+    if (!term)
+      return { filterArgs: [], pathspec: [], shaTerm: "" };
+    if (prefixed[1] === "author") {
+      return {
+        filterArgs: [
+          "--regexp-ignore-case",
+          "--fixed-strings",
+          `--author=${term}`
+        ],
+        pathspec: [],
+        shaTerm: ""
+      };
+    }
+    return {
+      filterArgs: [],
+      pathspec: ["--", `:(icase)*${term}*`],
+      shaTerm: ""
+    };
+  }
+  return {
+    filterArgs: [
+      "--regexp-ignore-case",
+      "--fixed-strings",
+      `--grep=${trimmed}`
+    ],
+    pathspec: [],
+    shaTerm: /^[0-9a-f]{4,40}$/i.test(trimmed) ? trimmed : ""
+  };
+}
+function commitHistory(cwd, options) {
+  const ref = (options.ref || "HEAD").trim();
+  if (!ref || ref.startsWith("-") || ref.includes("\x00"))
+    return { commits: [], hasMore: false, error: "invalid ref" };
+  const verified = run(["git", "rev-parse", "--verify", `${ref}^{commit}`], cwd);
+  if (verified.code !== 0)
+    return { commits: [], hasMore: false, error: "unknown ref" };
+  const skip = Math.max(0, Math.floor(options.skip) || 0);
+  const limit = Math.max(1, Math.min(Math.floor(options.limit) || 1, MAX_HISTORY_LIMIT));
+  const { filterArgs, pathspec, shaTerm } = historyQueryArgs(options.query || "");
+  const res = run([
+    "git",
+    "log",
+    "-z",
+    `--skip=${skip}`,
+    `--max-count=${limit + 1}`,
+    `--format=${HISTORY_FORMAT}`,
+    ...filterArgs,
+    verified.stdout.trim(),
+    ...pathspec
+  ], cwd);
+  if (res.code !== 0)
+    return { commits: [], hasMore: false, error: "git log failed" };
+  let parsed = parseHistoryLog(res.stdout);
+  if (shaTerm && skip === 0) {
+    const bySha = run(["git", "rev-parse", "--verify", `${shaTerm}^{commit}`], cwd);
+    const sha = bySha.code === 0 ? bySha.stdout.trim() : "";
+    if (sha) {
+      const single = run(["git", "log", "-z", "-1", `--format=${HISTORY_FORMAT}`, sha], cwd);
+      if (single.code === 0) {
+        const hit = parseHistoryLog(single.stdout);
+        parsed = [...hit, ...parsed.filter((c) => c.sha !== sha)];
+      }
+    }
+  }
+  const hasMore = parsed.length > limit;
+  return { commits: hasMore ? parsed.slice(0, limit) : parsed, hasMore };
+}
 function nameStatus(args, cwd) {
   const res = run([
     "git",
@@ -1051,7 +1172,7 @@ function truncateToNHunks(diffText, n, maxLines = Number.POSITIVE_INFINITY) {
     lineTruncated
   };
 }
-var WORKTREE_RECURSIVE_DEPTH_LIMIT = 32, WORKTREE_RECURSIVE_ENTRY_LIMIT = 50000, DEFAULT_REF_COMMIT_LIMIT = 100, MAX_REF_COMMIT_LIMIT = 500, COMMIT_FORMAT = "%H%x00%s%x00%an%x00%aI", DEFAULT_WORKTREE_OMIT_DIR_NAMES;
+var WORKTREE_RECURSIVE_DEPTH_LIMIT = 32, WORKTREE_RECURSIVE_ENTRY_LIMIT = 50000, DEFAULT_REF_COMMIT_LIMIT = 100, MAX_REF_COMMIT_LIMIT = 500, COMMIT_FORMAT = "%H%x00%s%x00%an%x00%aI", DEFAULT_WORKTREE_OMIT_DIR_NAMES, HISTORY_FORMAT = "%H%x00%s%x00%an%x00%aI%x00%P%x00%b", MAX_HISTORY_LIMIT = 200;
 var init_git = __esm(() => {
   init_runtime();
   DEFAULT_WORKTREE_OMIT_DIR_NAMES = [
@@ -1814,7 +1935,13 @@ function normalizeNewDirectoryName(name) {
 // web-src/core/routes.ts
 var SPA_PATHS, APP_ENTRY_PATHS;
 var init_routes = __esm(() => {
-  SPA_PATHS = ["/todif", "/todiff", "/file", "/help"];
+  SPA_PATHS = [
+    "/todif",
+    "/todiff",
+    "/file",
+    "/help",
+    "/history"
+  ];
   APP_ENTRY_PATHS = ["/", "/index.html"];
 });
 
@@ -2998,6 +3125,7 @@ function handleTree(url) {
 function handleSettings() {
   return json({
     project: basename2(cwd),
+    repo_web_url: remoteWebUrl(cwd),
     scope: {
       omit_dirs_effective: scopeOmitDirNames,
       omit_dirs_built_in: DEFAULT_WORKTREE_OMIT_DIR_NAMES,
@@ -3159,6 +3287,20 @@ function handleRefCommits(url) {
   const max = Number.isFinite(parsedMax) && parsedMax > 0 ? parsedMax : undefined;
   return json({ commits: refCommits(cwd, query, max) });
 }
+function handleLog(url) {
+  const ref = url.searchParams.get("ref") || "HEAD";
+  const skip = Number(url.searchParams.get("skip") || "0");
+  const limit = Number(url.searchParams.get("limit") || "50");
+  const result = commitHistory(cwd, {
+    ref,
+    skip: Number.isFinite(skip) ? skip : 0,
+    limit: Number.isFinite(limit) ? limit : 50,
+    query: url.searchParams.get("q") || ""
+  });
+  if (result.error)
+    return text(result.error, 400);
+  return json({ commits: result.commits, hasMore: result.hasMore });
+}
 function handleFileDiff(url) {
   const path = url.searchParams.get("path") || "";
   if (!safePath(path))
@@ -4201,6 +4343,8 @@ var init_preview = __esm(async () => {
         return handleGrep(url);
       if (url.pathname === "/_commits")
         return handleRefCommits(url);
+      if (url.pathname === "/_log")
+        return handleLog(url);
       if (url.pathname === "/file_diff")
         return handleFileDiff(url);
       if (url.pathname === "/file_range")

package/package.json

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

package/web/app.js

@@ -438,6 +438,15 @@
           lang: params.get("lang") || "en",
           section: params.get("section") || "keybindings"
         };
+      case "/history": {
+        const commit = params.get("commit") || "";
+        return {
+          screen: "history",
+          ref: params.get("ref") || "HEAD",
+          ...commit ? { commit } : {},
+          range
+        };
+      }
       default:
         return {
           screen: "unknown",
@@ -475,6 +484,15 @@
         const qs = params.toString();
         return `/help${qs ? `?${qs}` : ""}`;
       }
+      case "history": {
+        const params = new URLSearchParams;
+        if (route.ref && route.ref !== "HEAD")
+          params.set("ref", route.ref);
+        if (route.commit)
+          params.set("commit", route.commit);
+        const qs = params.toString();
+        return `/history${qs ? `?${qs}` : ""}`;
+      }
       case "unknown":
         return "/todif?from=" + encodeURIComponent(route.range.from || "") + "&to=" + encodeURIComponent(route.range.to || "worktree");
       default:
@@ -7680,6 +7698,114 @@ ${frontmatter.yaml}
     };
   }
 
+  // web-src/views/diff-line-select.ts
+  var SELECTED_CLASS = "gdp-diff-line-selected";
+  function cardPath(el) {
+    return el.closest(".gdp-file-shell[data-path]")?.dataset.path || "";
+  }
+  function afterLineFromCell(cell) {
+    const sideCell = cell.closest("td.d2h-code-side-linenumber");
+    if (sideCell) {
+      const side = sideCell.closest(".d2h-file-side-diff");
+      const wrapper = sideCell.closest(".d2h-file-wrapper");
+      if (!side || !wrapper)
+        return null;
+      const sides = wrapper.querySelectorAll(".d2h-file-side-diff");
+      if (sides.length < 2 || side !== sides[1])
+        return null;
+      const line2 = Number((sideCell.textContent || "").trim());
+      return Number.isInteger(line2) && line2 > 0 ? line2 : null;
+    }
+    const numCell = cell.closest("td.d2h-code-linenumber");
+    if (!numCell)
+      return null;
+    const raw = (numCell.querySelector(".line-num2")?.textContent || "").trim();
+    const line = Number(raw);
+    return Number.isInteger(line) && line > 0 ? line : null;
+  }
+  function rowsWithAfterLines(card) {
+    const out = [];
+    card.querySelectorAll("table.d2h-diff-table tr").forEach((row) => {
+      const cell = row.querySelector("td.d2h-code-linenumber, td.d2h-code-side-linenumber");
+      if (!cell)
+        return;
+      const line = afterLineFromCell(cell);
+      if (line !== null)
+        out.push({ row, line });
+    });
+    return out;
+  }
+  function createDiffLineSelect(deps) {
+    let drag = null;
+    let selection = null;
+    function clearHighlights() {
+      document.querySelectorAll(`.${SELECTED_CLASS}`).forEach((row) => {
+        row.classList.remove(SELECTED_CLASS);
+      });
+    }
+    function applySelection(next) {
+      selection = next;
+      clearHighlights();
+      if (!next) {
+        deps.pill.hide();
+        return;
+      }
+      const start = Math.min(next.start, next.end);
+      const end = Math.max(next.start, next.end);
+      const card = document.querySelector(`.gdp-file-shell[data-path="${CSS.escape(next.path)}"]`);
+      if (card) {
+        for (const item of rowsWithAfterLines(card)) {
+          if (item.line >= start && item.line <= end)
+            item.row.classList.add(SELECTED_CLASS);
+        }
+      }
+      deps.pill.show(next.path, start, end);
+    }
+    function clear() {
+      drag = null;
+      applySelection(null);
+    }
+    const diff = document.querySelector("#diff");
+    if (!diff)
+      return { clear };
+    diff.addEventListener("mousedown", (e2) => {
+      const target = e2.target;
+      const cell = target.closest("td.d2h-code-linenumber, td.d2h-code-side-linenumber");
+      if (!cell)
+        return;
+      const line = afterLineFromCell(cell);
+      const path = cardPath(cell);
+      if (line === null || !path) {
+        if (selection)
+          clear();
+        return;
+      }
+      e2.preventDefault();
+      drag = { path, start: line };
+      applySelection({ path, start: line, end: line });
+    });
+    diff.addEventListener("mouseover", (e2) => {
+      if (!drag)
+        return;
+      const target = e2.target;
+      const cell = target.closest("td.d2h-code-linenumber, td.d2h-code-side-linenumber");
+      if (!cell || cardPath(cell) !== drag.path)
+        return;
+      const line = afterLineFromCell(cell);
+      if (line === null)
+        return;
+      applySelection({ path: drag.path, start: drag.start, end: line });
+    });
+    document.addEventListener("mouseup", () => {
+      drag = null;
+    });
+    document.addEventListener("keydown", (e2) => {
+      if (e2.key === "Escape" && selection && !drag)
+        clear();
+    });
+    return { clear };
+  }
+
   // web-src/core/file-path-copy.ts
   function filePathClipboardText(path) {
     return path || "";
@@ -7690,6 +7816,13 @@ ${frontmatter.yaml}
     const parts = path.split("/").filter(Boolean);
     return parts[parts.length - 1] || "";
   }
+  function fileReferenceClipboardText(path, start, end) {
+    if (!path)
+      return "";
+    const a2 = Math.max(1, Math.floor(Math.min(start, end)));
+    const b2 = Math.max(1, Math.floor(Math.max(start, end)));
+    return a2 === b2 ? `@${path}#${a2}` : `@${path}#${a2}-${b2}`;
+  }
 
   // web-src/core/ws-highlight.ts
   function isWhitespaceOnlyInlineHighlight(text2) {
@@ -9013,6 +9146,356 @@ ${frontmatter.yaml}
     return { renderHelpPage };
   }
 
+  // web-src/core/history.ts
+  var EMPTY_TREE_SHA = "4b825dc642cb6eb9a060e54bf8d69288fbee4904";
+  var HISTORY_PAGE_SIZE = 50;
+  var HISTORY_AUTO_LOAD_MAX_PAGES = 20;
+  function commitDiffRange(commit) {
+    return { from: commit.parents[0] || EMPTY_TREE_SHA, to: commit.sha };
+  }
+  function shouldContinueAutoLoad(state) {
+    if (state.found)
+      return false;
+    if (!state.hasMore)
+      return false;
+    return state.pagesLoaded < HISTORY_AUTO_LOAD_MAX_PAGES;
+  }
+  var MONTH_NAMES = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ];
+  var DAY_MS = 24 * 60 * 60 * 1000;
+  function historyGroupLabel(whenIso, now) {
+    const t2 = Date.parse(whenIso);
+    if (!Number.isFinite(t2))
+      return "Unknown date";
+    const dayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+    if (t2 >= dayStart)
+      return "Today";
+    if (t2 >= dayStart - DAY_MS)
+      return "Yesterday";
+    if (t2 >= dayStart - 6 * DAY_MS)
+      return "This week";
+    const d2 = new Date(t2);
+    if (d2.getFullYear() === now.getFullYear() && d2.getMonth() === now.getMonth())
+      return "This month";
+    return `${MONTH_NAMES[d2.getMonth()]} ${d2.getFullYear()}`;
+  }
+
+  // web-src/views/history-view.ts
+  function createHistoryView(deps) {
+    const panel = deps.$("#history-panel");
+    const list2 = deps.$("#history-list");
+    const banner = deps.$("#history-banner");
+    const statusEl = deps.$("#history-status");
+    const sentinel = deps.$("#history-sentinel");
+    let ref = "HEAD";
+    let commits = [];
+    let hasMore = false;
+    let loading = false;
+    let generation = 0;
+    let selectedSha = "";
+    let query = "";
+    function setBanner(message) {
+      banner.textContent = message;
+      banner.hidden = !message;
+    }
+    function setStatusText(message) {
+      statusEl.textContent = message;
+      statusEl.hidden = !message;
+    }
+    function relativeWhen(iso) {
+      const t2 = Date.parse(iso);
+      if (!Number.isFinite(t2))
+        return iso;
+      const sec = Math.round((Date.now() - t2) / 1000);
+      if (sec < 60)
+        return "just now";
+      const min = Math.round(sec / 60);
+      if (min < 60)
+        return `${min}m ago`;
+      const hour = Math.round(min / 60);
+      if (hour < 24)
+        return `${hour}h ago`;
+      const day = Math.round(hour / 24);
+      if (day < 30)
+        return `${day}d ago`;
+      return iso.slice(0, 10);
+    }
+    function fetchPage(skip) {
+      const url = `/_log?ref=${encodeURIComponent(ref)}&skip=${skip}&limit=${HISTORY_PAGE_SIZE}` + (query ? `&q=${encodeURIComponent(query)}` : "");
+      return deps.trackLoad(fetch(url).then(async (r2) => {
+        if (!r2.ok)
+          throw new Error(await r2.text());
+        return await r2.json();
+      })).catch((err) => {
+        setBanner(err instanceof Error ? err.message : "failed to load log");
+        return null;
+      });
+    }
+    function commitRow(commit) {
+      const active = commit.sha === selectedSha ? " active" : "";
+      return `<li class="history-item${active}" data-sha="${deps.escapeHtml(commit.sha)}">` + `<span class="subject" title="${deps.escapeHtml(commit.subject)}">${deps.escapeHtml(commit.subject)}</span>` + `<span class="meta2">` + `<span class="sha">${deps.escapeHtml(commit.sha.slice(0, 7))}</span>` + `<span class="author">${deps.escapeHtml(commit.author)}</span>` + `<span class="when">${deps.escapeHtml(relativeWhen(commit.when))}</span>` + `</span>` + `</li>`;
+    }
+    function renderList() {
+      const now = new Date;
+      const html = [];
+      let lastGroup = "";
+      for (const commit of commits) {
+        const group = historyGroupLabel(commit.when, now);
+        if (group !== lastGroup) {
+          html.push(`<li class="history-group" aria-hidden="true">${deps.escapeHtml(group)}</li>`);
+          lastGroup = group;
+        }
+        html.push(commitRow(commit));
+      }
+      list2.innerHTML = html.join("");
+      setStatusText(loading ? "loading..." : commits.length ? "" : "no commits");
+    }
+    function updateCommitInfo(commit) {
+      const info = document.querySelector("#history-commit-info");
+      if (!info)
+        return;
+      if (!commit) {
+        info.hidden = true;
+        return;
+      }
+      const set2 = (sel, text2) => {
+        const el = info.querySelector(sel);
+        if (el)
+          el.textContent = text2;
+      };
+      set2(".hci-sha", commit.sha);
+      set2(".hci-author", commit.author);
+      const t2 = Date.parse(commit.when);
+      set2(".hci-date", Number.isFinite(t2) ? new Date(t2).toLocaleString() : commit.when);
+      set2(".hci-subject", commit.subject);
+      const body = info.querySelector(".hci-body");
+      if (body) {
+        body.textContent = commit.body;
+        body.hidden = !commit.body;
+      }
+      info.hidden = false;
+    }
+    function updateActiveRow() {
+      list2.querySelectorAll(".history-item").forEach((row) => {
+        row.classList.toggle("active", row.dataset.sha === selectedSha);
+      });
+    }
+    let inFlight = null;
+    function loadNextPage() {
+      if (inFlight)
+        return inFlight;
+      const started = doLoadNextPage().finally(() => {
+        if (inFlight === started)
+          inFlight = null;
+      });
+      inFlight = started;
+      return started;
+    }
+    async function doLoadNextPage() {
+      loading = true;
+      const gen = generation;
+      setStatusText("loading...");
+      const page = await fetchPage(commits.length);
+      if (gen !== generation)
+        return false;
+      loading = false;
+      if (!page) {
+        setStatusText("");
+        return false;
+      }
+      commits = commits.concat(page.commits);
+      hasMore = page.hasMore;
+      renderList();
+      return page.commits.length > 0;
+    }
+    async function selectCommit(commit, options = {}) {
+      const gen = generation;
+      selectedSha = commit.sha;
+      updateActiveRow();
+      updateCommitInfo(commit);
+      if (gen !== generation)
+        return;
+      if (options.updateUrl !== false) {
+        const range = commitDiffRange(commit);
+        deps.setRoute({ screen: "history", ref, commit: commit.sha, range }, true);
+      }
+      if (gen !== generation)
+        return;
+      await deps.applyCommitRange(commitDiffRange(commit));
+      if (gen !== generation)
+        return;
+    }
+    let lookupFailed = false;
+    async function fetchSingleCommit(sha) {
+      const url = `/_log?ref=${encodeURIComponent(sha)}&skip=0&limit=1`;
+      lookupFailed = false;
+      try {
+        const res = await deps.trackLoad(fetch(url).then(async (r2) => {
+          if (r2.status === 400)
+            return null;
+          if (!r2.ok)
+            throw new Error(await r2.text());
+          return await r2.json();
+        }));
+        return res?.commits[0] || null;
+      } catch {
+        lookupFailed = true;
+        return null;
+      }
+    }
+    async function resolveDeepLink(sha) {
+      const gen = generation;
+      let pagesLoaded = 0;
+      if (commits.length === 0) {
+        await loadNextPage();
+        if (gen !== generation)
+          return;
+        pagesLoaded = 1;
+      } else {
+        pagesLoaded = 1;
+      }
+      for (;; ) {
+        const found = commits.find((c2) => c2.sha.startsWith(sha));
+        if (found) {
+          await selectCommit(found, { updateUrl: false });
+          scrollToSelected();
+          return;
+        }
+        if (!shouldContinueAutoLoad({ pagesLoaded, found: false, hasMore }))
+          break;
+        const got = await loadNextPage();
+        if (gen !== generation)
+          return;
+        pagesLoaded++;
+        if (!got && !hasMore)
+          break;
+      }
+      const single = await fetchSingleCommit(sha);
+      if (gen !== generation)
+        return;
+      if (!single) {
+        setBanner(lookupFailed ? `failed to load commit: ${sha}` : `commit not found: ${sha}`);
+        updateCommitInfo(null);
+        deps.showEmptyDiffPane();
+        return;
+      }
+      setBanner(`showing commit outside the loaded ${ref} log`);
+      commits = [single, ...commits];
+      renderList();
+      await selectCommit(single, { updateUrl: false });
+      scrollToSelected();
+    }
+    function scrollToSelected() {
+      list2.querySelector(`.history-item[data-sha="${CSS.escape(selectedSha)}"]`)?.scrollIntoView({ block: "center" });
+    }
+    let entering = Promise.resolve();
+    function enterHistory(force) {
+      entering = entering.then(() => doEnterHistory(force === true)).catch(() => {});
+      return entering;
+    }
+    async function doEnterHistory(force = false) {
+      const route = deps.getRoute();
+      if (route.screen !== "history")
+        return;
+      const nextRef = route.ref || "HEAD";
+      const refChanged = nextRef !== ref;
+      if (refChanged || force || commits.length === 0) {
+        generation++;
+        ref = nextRef;
+        commits = [];
+        hasMore = false;
+        loading = false;
+        inFlight = null;
+        selectedSha = "";
+        setBanner("");
+        updateCommitInfo(null);
+        renderList();
+        await loadNextPage();
+      }
+      const route2 = deps.getRoute();
+      if (route2.screen !== "history")
+        return;
+      if (route2.commit) {
+        await resolveDeepLink(route2.commit);
+      } else {
+        selectedSha = "";
+        updateActiveRow();
+        updateCommitInfo(null);
+        deps.showEmptyDiffPane();
+      }
+    }
+    function onRefPicked(nextRef) {
+      const value = nextRef && nextRef !== "worktree" ? nextRef : "HEAD";
+      deps.setRoute({
+        screen: "history",
+        ref: value,
+        range: { from: "HEAD", to: "worktree" }
+      }, false);
+      enterHistory(true);
+    }
+    list2.addEventListener("click", (e2) => {
+      const row = e2.target.closest(".history-item");
+      if (!row?.dataset.sha)
+        return;
+      const commit = commits.find((c2) => c2.sha === row.dataset.sha);
+      if (commit)
+        selectCommit(commit);
+    });
+    function applyFilter(next) {
+      const value = next.trim();
+      if (value === query)
+        return;
+      query = value;
+      generation++;
+      commits = [];
+      hasMore = false;
+      loading = false;
+      inFlight = null;
+      setBanner("");
+      renderList();
+      loadNextPage();
+    }
+    const filterInput = document.querySelector("#history-filter");
+    let filterTimer = null;
+    filterInput?.addEventListener("input", () => {
+      if (filterTimer)
+        clearTimeout(filterTimer);
+      filterTimer = setTimeout(() => {
+        filterTimer = null;
+        applyFilter(filterInput.value);
+      }, 250);
+    });
+    filterInput?.addEventListener("keydown", (e2) => {
+      if (e2.key === "Escape" && filterInput.value) {
+        filterInput.value = "";
+        applyFilter("");
+        e2.stopPropagation();
+      }
+    });
+    const observer = new IntersectionObserver((entries) => {
+      if (!entries.some((entry) => entry.isIntersecting))
+        return;
+      if (deps.getRoute().screen !== "history")
+        return;
+      if (hasMore && !loading)
+        loadNextPage();
+    }, { root: panel, rootMargin: "200px" });
+    observer.observe(sentinel);
+    return { enterHistory, onRefPicked };
+  }
+
   // web-src/views/hunk-expand.ts
   function createHunkExpand(deps) {
     function parseHunkHeader(text2) {
@@ -9401,6 +9884,76 @@ ${frontmatter.yaml}
     return { setupHunkExpand };
   }
 
+  // web-src/views/line-ref-pill.ts
+  var COPY_ICON = '<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="currentColor">' + '<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"/>' + '<path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"/>' + "</svg>";
+  var CHECK_ICON = '<svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" fill="currentColor">' + '<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>' + "</svg>";
+  function escapeHtml2(value) {
+    return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
+  function createLineRefPill() {
+    const pill = document.createElement("button");
+    pill.id = "line-ref-pill";
+    pill.type = "button";
+    pill.title = "選択行の参照をコピー（Claude Code / Codex に貼り付け用）";
+    pill.hidden = true;
+    document.body.appendChild(pill);
+    let refText = "";
+    let feedbackTimer = null;
+    function render(state) {
+      pill.classList.toggle("copied", state === "copied");
+      if (state === "copied") {
+        pill.innerHTML = `${CHECK_ICON}<span class="lrp-label">Copied!</span>`;
+        return;
+      }
+      if (state === "failed") {
+        pill.innerHTML = `${COPY_ICON}<span class="lrp-label">copy failed</span>`;
+        return;
+      }
+      pill.innerHTML = `${COPY_ICON}<span class="lrp-label">Copy</span>` + `<span class="lrp-ref">${escapeHtml2(refText)}</span>`;
+    }
+    pill.addEventListener("click", async () => {
+      if (!refText)
+        return;
+      try {
+        await navigator.clipboard.writeText(refText);
+        render("copied");
+      } catch {
+        render("failed");
+      }
+      if (feedbackTimer)
+        clearTimeout(feedbackTimer);
+      feedbackTimer = setTimeout(() => {
+        feedbackTimer = null;
+        if (!pill.hidden)
+          render("ready");
+      }, 1200);
+    });
+    return {
+      show(path, start, end) {
+        const next = fileReferenceClipboardText(path, start, end);
+        if (!next)
+          return;
+        const changed = next !== refText;
+        refText = next;
+        if (feedbackTimer) {
+          clearTimeout(feedbackTimer);
+          feedbackTimer = null;
+        }
+        render("ready");
+        if (pill.hidden || changed) {
+          pill.classList.remove("pop");
+          pill.offsetWidth;
+          pill.classList.add("pop");
+        }
+        pill.hidden = false;
+      },
+      hide() {
+        refText = "";
+        pill.hidden = true;
+      }
+    };
+  }
+
   // web-src/views/ref-picker.ts
   function createRefPicker(deps) {
     function wireRefSelectorInput(input, onPick) {
@@ -9631,7 +10184,7 @@ ${frontmatter.yaml}
       const target = e2.target;
       if (popover.contains(target))
         return;
-      if (target.id === "ref-from" || target.id === "ref-to" || target.id === "repo-ref" || target.id === "repo-target")
+      if (target.id === "ref-from" || target.id === "ref-to" || target.id === "repo-ref" || target.id === "repo-target" || target.id === "history-ref")
         return;
       closePopover();
     });
@@ -14758,6 +15311,11 @@ ${frontmatter.yaml}
           return null;
         const settings = await res.json();
         setProjectName(settings.project || "");
+        const repoLink = document.querySelector("#repo-web-link");
+        if (repoLink && settings.repo_web_url) {
+          repoLink.href = settings.repo_web_url;
+          repoLink.hidden = false;
+        }
         SERVER_SCOPE_OMIT_DIRS_DEFAULT = normalizeScopeOmitDirs(settings.scope.omit_dirs_effective);
         SERVER_SCOPE_EXCLUDE_NAMES_DEFAULT = normalizeScopeExcludeNames(settings.scope.exclude_names_effective);
         return settings;
@@ -14796,6 +15354,19 @@ ${frontmatter.yaml}
     let highlightConfigured = false;
     let PROJECT_NAME = "";
     let REPO_SIDEBAR_REF = null;
+    const LINE_REF_PILL = createLineRefPill();
+    const DIFF_LINE_SELECT = createDiffLineSelect({ pill: LINE_REF_PILL });
+    function syncLineRefPill() {
+      const route = STATE.route;
+      if (route.screen === "diff")
+        return;
+      DIFF_LINE_SELECT.clear();
+      if (route.screen === "file" && route.line) {
+        const start = typeof route.line === "number" ? route.line : route.line.start;
+        const end = typeof route.line === "number" ? route.line : route.line.end;
+        LINE_REF_PILL.show(route.path, start, end);
+      }
+    }
     const SIDEBAR = createSidebar({
       $,
       $$,
@@ -15185,7 +15756,7 @@ ${frontmatter.yaml}
         throw e2;
       });
     }
-    function escapeHtml2(s2) {
+    function escapeHtml3(s2) {
       return String(s2 == null ? "" : s2).replace(/[&<>"']/g, (c2) => ({
         "&": "&amp;",
         "<": "&lt;",
@@ -15203,6 +15774,19 @@ ${frontmatter.yaml}
         to: STATE.to || DEFAULT_RANGE.to
       };
     }
+    let preHistoryRange = null;
+    function parkRangeForHistory() {
+      if (preHistoryRange === null)
+        preHistoryRange = { from: STATE.from, to: STATE.to };
+    }
+    function restoreRangeAfterHistory() {
+      if (!preHistoryRange)
+        return;
+      STATE.from = preHistoryRange.from;
+      STATE.to = preHistoryRange.to;
+      preHistoryRange = null;
+      syncRefInputs();
+    }
     function repoFileTargetFromRoute() {
       return STATE.route.screen === "file" && STATE.route.view === "blob" ? STATE.route.ref : null;
     }
@@ -15233,12 +15817,22 @@ ${frontmatter.yaml}
       else
         history.pushState(state, "", url);
       syncHeaderMenu();
+      syncLineRefPill();
     }
     function setPageMode() {
       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");
+      document.body.classList.toggle("gdp-history-page", STATE.route.screen === "history");
+      const historyPanel = $("#history-panel");
+      if (historyPanel)
+        historyPanel.hidden = STATE.route.screen !== "history";
+      if (STATE.route.screen === "history") {
+        const historyRefInput = $("#history-ref");
+        if (historyRefInput)
+          historyRefInput.value = STATE.route.ref || "HEAD";
+      }
       syncRepoTargetInput(repoFileTargetFromRoute() || "worktree");
     }
     function syncHeaderMenu() {
@@ -15256,7 +15850,17 @@ ${frontmatter.yaml}
           });
         }
         if (link2.dataset.route === "diff") {
-          link2.href = buildRoute({ screen: "diff", range: currentRange() });
+          link2.href = buildRoute({
+            screen: "diff",
+            range: preHistoryRange ?? currentRange()
+          });
+        }
+        if (link2.dataset.route === "history") {
+          link2.href = buildRoute({
+            screen: "history",
+            ref: "HEAD",
+            range: currentRange()
+          });
         }
         if (link2.dataset.route === "help") {
           link2.href = buildRoute({
@@ -15379,7 +15983,7 @@ ${frontmatter.yaml}
       STATE,
       setRoute,
       currentRange,
-      escapeHtml: escapeHtml2,
+      escapeHtml: escapeHtml3,
       trackLoad,
       diffCardSelector,
       getHljs,
@@ -15747,6 +16351,18 @@ ${frontmatter.yaml}
       }
       if (STATE.route.screen === "repo")
         return loadRepo();
+      {
+        const empty = $("#empty");
+        if (empty) {
+          const onHistory = STATE.route.screen === "history";
+          const h2 = empty.querySelector("h2");
+          if (h2)
+            h2.textContent = onHistory ? "Empty diff" : "No changes";
+          const p2 = empty.querySelector("p");
+          if (p2)
+            p2.textContent = onHistory ? "This commit has no changes against its first parent." : "The working tree is clean against this ref.";
+        }
+      }
       setStatus("refreshing");
       const params = new URLSearchParams;
       if (STATE.ignoreWs)
@@ -15772,8 +16388,13 @@ ${frontmatter.yaml}
       else if (STATE.route.screen === "file" && STATE.route.view === "blob") {
         setStatus("live");
         applySourceRouteToShell();
+      } else if (STATE.route.screen === "history") {
+        parkRangeForHistory();
+        setStatus("live");
+        HISTORY_VIEW.enterHistory();
       } else
         load();
+      syncLineRefPill();
     });
     function syncRefInputs() {
       const fi = $("#ref-from"), ti = $("#ref-to");
@@ -15783,6 +16404,7 @@ ${frontmatter.yaml}
         ti.value = STATE.to;
     }
     function setRange(from, to) {
+      preHistoryRange = null;
       STATE.from = from || "";
       STATE.to = to || "";
       localStorage.setItem("gdp:from", STATE.from);
@@ -15801,14 +16423,44 @@ ${frontmatter.yaml}
         renderHelpPage();
       } else {
         setRoute({ screen: "diff", range }, true);
+        setPageMode();
         load();
       }
     }
     syncRefInputs();
     syncHeaderMenu();
-    createRefPicker({
+    const HISTORY_VIEW = createHistoryView({
       $,
-      escapeHtml: escapeHtml2,
+      escapeHtml: escapeHtml3,
+      getRoute: () => STATE.route,
+      setRoute,
+      applyCommitRange: (range) => {
+        STATE.from = range.from;
+        STATE.to = range.to;
+        syncRefInputs();
+        return load();
+      },
+      showEmptyDiffPane: () => {
+        const diff = $("#diff");
+        if (diff)
+          diff.innerHTML = "";
+        const empty = $("#empty");
+        if (empty) {
+          empty.classList.remove("hidden");
+          const h2 = empty.querySelector("h2");
+          if (h2)
+            h2.textContent = "No commit selected";
+          const p2 = empty.querySelector("p");
+          if (p2)
+            p2.textContent = "Select a commit from the list to see its changes.";
+        }
+        setStatus("live");
+      },
+      trackLoad
+    });
+    const REF_PICKER = createRefPicker({
+      $,
+      escapeHtml: escapeHtml3,
       currentRange,
       setRange,
       setRoute,
@@ -15818,8 +16470,18 @@ ${frontmatter.yaml}
       getRepoRef: () => STATE.repoRef,
       getRoute: () => STATE.route
     });
+    if (REF_PICKER) {
+      const historyRefInput = document.querySelector("#history-ref");
+      if (historyRefInput) {
+        historyRefInput.value = "HEAD";
+        REF_PICKER.wireRefSelectorInput(historyRefInput, (ref) => HISTORY_VIEW.onRefPicked(ref));
+      }
+    }
     $("#ref-reset").addEventListener("click", () => setRange("HEAD", "worktree"));
     function applyRouteFromLocation() {
+      if (STATE.route.screen === "history" && window.location.pathname !== "/history") {
+        restoreRangeAfterHistory();
+      }
       const parsedRoute = parseRoute(window.location.pathname, window.location.search, currentRange());
       STATE.route = parsedRoute.screen === "unknown" ? { screen: "diff", range: parsedRoute.range } : parsedRoute;
       STATE.from = STATE.route.range.from;
@@ -15829,6 +16491,7 @@ ${frontmatter.yaml}
       ANNOTATIONS_UI?.restoreSessionFromUrl();
       syncRefInputs();
       syncHeaderMenu();
+      syncLineRefPill();
       if (STATE.route.screen === "help") {
         cancelActiveSourceLoad("navigation");
         setPageMode();
@@ -15843,6 +16506,14 @@ ${frontmatter.yaml}
         loadRepo();
         return;
       }
+      if (STATE.route.screen === "history") {
+        parkRangeForHistory();
+        cancelActiveSourceLoad("navigation");
+        setPageMode();
+        removeStandaloneSource();
+        HISTORY_VIEW.enterHistory();
+        return;
+      }
       if (STATE.route.screen !== "file") {
         cancelActiveSourceLoad("navigation");
         setPageMode();

package/web/index.html

@@ -26,12 +26,14 @@
     <nav class="app-menu" aria-label="Views">
       <a class="app-menu-item active" data-route="repo" href="/">Repository</a>
       <a class="app-menu-item" data-route="diff" href="/todif?from=HEAD&to=worktree">Diff Viewer</a>
+      <a class="app-menu-item" data-route="history" href="/history">History</a>
     </nav>
     <div class="global-actions">
       <button id="annotations-toggle" class="global-icon-action" title="code annotations" aria-label="code annotations">💬<span id="annotations-count" hidden></span></button>
       <button id="viewer-settings" class="global-icon-action" title="viewer settings" aria-label="viewer settings"></button>
       <button id="theme" title="toggle theme">🌗</button>
       <span id="status" class="status"></span>
+      <a id="repo-web-link" class="global-help-link" href="#" target="_blank" rel="noopener" hidden>GitHub</a>
       <a class="global-help-link" data-route="help" href="/help">Help</a>
       <span class="product-label" aria-hidden="true">code viewer</span>
     </div>
@@ -76,6 +78,19 @@
 
   <div id="load-bar" aria-hidden="true"></div>
 
+  <aside id="history-panel" aria-label="Commit history" hidden>
+    <div class="history-head">
+      <span class="history-title">Commits</span>
+      <span data-ref-selector-mount data-ref-id="history-ref" data-placeholder="ref..." data-title="history ref"></span>
+    </div>
+    <div class="history-filter-wrap">
+      <input id="history-filter" type="search" placeholder="filter commits… (message, sha, author:name, path:file)" autocomplete="off" />
+    </div>
+    <div id="history-banner" class="history-banner" role="status" hidden></div>
+    <ol id="history-list"></ol>
+    <div id="history-sentinel" aria-hidden="true"></div>
+    <div id="history-status" class="history-status" role="status" hidden></div>
+  </aside>
   <aside id="sidebar">
     <div class="sb-head">
       <span class="sb-title">Files</span>
@@ -180,6 +195,15 @@
   </aside>
 
   <main id="content">
+    <section id="history-commit-info" hidden aria-label="Selected commit">
+      <div class="hci-head">
+        <span id="hci-sha" class="hci-sha"></span>
+        <span id="hci-author" class="hci-author"></span>
+        <span id="hci-date" class="hci-date"></span>
+      </div>
+      <h2 id="hci-subject" class="hci-subject"></h2>
+      <pre id="hci-body" class="hci-body" hidden></pre>
+    </section>
     <div id="empty" class="empty hidden">
       <div class="emoji">✨</div>
       <h2>No changes</h2>

package/web/style.css

@@ -50,6 +50,7 @@
   --topbar-h: 56px;
   --chrome-h: calc(var(--global-header-h) + var(--topbar-h));
   --sidebar-w: 308px;
+  --history-w: 320px;
   --sidebar-restore-rail-w: 44px;
   /* shadows */
   --shadow-sm: 0 1px 0 rgba(31,35,40,0.04);
@@ -900,6 +901,170 @@ body[data-code-font-size="xlarge"] { --code-font-size: 15px; }
   100% { transform: translateX(450%); }
 }
 
+/* ===== Commit history panel ===== */
+#history-panel {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: var(--chrome-h);
+  bottom: 0;
+  width: var(--history-w);
+  background: var(--bg-soft);
+  border-right: 1px solid var(--border);
+  overflow-y: auto;
+  z-index: 31;
+  flex-direction: column;
+}
+body.gdp-history-page #history-panel { display: flex; }
+body.gdp-history-page #sidebar { left: var(--history-w); }
+body.gdp-history-page main#content {
+  margin-left: calc(var(--history-w) + var(--sidebar-w));
+}
+body.gdp-history-page.gdp-sidebar-hidden main#content {
+  margin-left: var(--history-w);
+}
+body.gdp-history-page #sidebar-resizer {
+  left: calc(var(--history-w) + var(--sidebar-w) - 4px);
+}
+/* The history screen drives its diff range from the commit list; the topbar
+   from/to pickers belong to the Diff Viewer and are hidden here. */
+body.gdp-history-page #topbar .ref-pickers {
+  display: none;
+}
+#history-panel[hidden] {
+  display: none !important;
+}
+.history-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 13px 14px 10px;
+  position: sticky;
+  top: 0;
+  background: var(--bg-soft);
+  border-bottom: 1px solid var(--border);
+  z-index: 1;
+}
+.history-title { font-weight: 600; font-size: 13px; }
+.history-filter-wrap {
+  padding: 0 12px 8px;
+  background: var(--bg-soft);
+  border-bottom: 1px solid var(--border);
+}
+#history-filter {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--fg);
+  border-radius: 6px;
+  font: inherit;
+  font-size: 12px;
+  padding: 5px 8px;
+}
+.history-banner {
+  margin: 8px 10px 0;
+  padding: 6px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-mute);
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+#history-list { list-style: none; margin: 0; padding: 0 0 24px; }
+.history-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 14px 6px;
+  background: var(--bg-mute);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  color: var(--accent);
+  font-size: 11.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.history-group::before {
+  content: "";
+  width: 4px;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--accent);
+}
+#history-list > .history-group:first-child { border-top: 0; }
+.history-item {
+  padding: 8px 14px;
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  border-bottom: 1px solid var(--border);
+}
+.history-item:hover { background: var(--bg-mute); }
+.history-item.active {
+  background: var(--bg-mute);
+  border-left-color: var(--accent);
+}
+.history-item .subject {
+  display: block;
+  font-size: 12.5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.history-item .meta2 {
+  display: flex;
+  gap: 8px;
+  color: var(--fg-muted);
+  font-size: 11px;
+  margin-top: 2px;
+}
+.history-item .sha { font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
+.history-status {
+  padding: 10px 14px;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+#history-sentinel { height: 1px; }
+#history-commit-info {
+  display: none;
+  margin: 12px 16px 4px;
+  padding: 12px 16px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-soft);
+}
+body.gdp-history-page #history-commit-info:not([hidden]) { display: block; }
+#history-commit-info .hci-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 10px;
+  color: var(--fg-muted);
+  font-size: 12px;
+}
+#history-commit-info .hci-sha {
+  font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  user-select: all;
+}
+#history-commit-info .hci-subject {
+  margin: 6px 0 0;
+  font-size: 15px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+#history-commit-info .hci-body {
+  margin: 8px 0 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  font-family: inherit;
+  font-size: 12.5px;
+  line-height: 1.6;
+  color: var(--fg-muted);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
 /* ===== Sidebar ===== */
 #sidebar {
   position: fixed;
@@ -1641,7 +1806,10 @@ body.gdp-help-page #content {
 
 #diff > *:first-child { margin-top: 0; }
 
-body:not(.gdp-file-detail-page) #diff::after {
+/* Scroll-past-end spacer so the sidebar can align the last diff file to the
+   top of the viewport. Not wanted on the history screen, where small
+   single-commit diffs would gain a screenful of dead scroll space. */
+body:not(.gdp-file-detail-page):not(.gdp-history-page) #diff::after {
   content: "";
   display: block;
   height: calc(100vh - var(--chrome-h) - 40px);
@@ -1911,6 +2079,86 @@ table.d2h-diff-table tr.gdp-diff-line-target .d2h-code-line-ctn {
 table.d2h-diff-table tr.gdp-diff-line-target > td:first-child {
   box-shadow: inset 3px 0 0 var(--line-hit-border), inset -1px 0 0 var(--border-muted);
 }
+
+/* After-side drag selection (diff screen) — same yellow as the file view. */
+table.d2h-diff-table tr.gdp-diff-line-selected > td,
+table.d2h-diff-table tr.gdp-diff-line-selected .d2h-code-line,
+table.d2h-diff-table tr.gdp-diff-line-selected .d2h-code-side-line,
+table.d2h-diff-table tr.gdp-diff-line-selected .d2h-code-line-ctn {
+  background: var(--line-hit-bg) !important;
+  background-color: var(--line-hit-bg) !important;
+}
+table.d2h-diff-table tr.gdp-diff-line-selected > td:first-child {
+  box-shadow: inset 3px 0 0 var(--line-hit-border), inset -1px 0 0 var(--border-muted);
+}
+table.d2h-diff-table td.d2h-code-linenumber,
+table.d2h-diff-table td.d2h-code-side-linenumber {
+  cursor: pointer;
+  user-select: none;
+}
+
+/* Floating "copy @path#start-end" pill shown while lines are selected. */
+#line-ref-pill {
+  position: fixed;
+  left: 50%;
+  bottom: 24px;
+  transform: translateX(-50%);
+  z-index: 400;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: min(680px, calc(100vw - 48px));
+  white-space: nowrap;
+  padding: 9px 16px;
+  border: 1px solid var(--accent);
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 8px 28px rgba(31, 35, 40, 0.35);
+}
+#line-ref-pill:hover {
+  filter: brightness(1.1);
+}
+#line-ref-pill svg {
+  flex: 0 0 auto;
+}
+#line-ref-pill .lrp-label {
+  flex: 0 0 auto;
+}
+#line-ref-pill .lrp-ref {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.18);
+  font-family: "Monaspace Neon", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  font-weight: 400;
+}
+#line-ref-pill.copied {
+  background: var(--success, #2ea043);
+  border-color: var(--success, #2ea043);
+}
+#line-ref-pill.pop {
+  animation: lrp-pop 0.22s ease-out;
+}
+@keyframes lrp-pop {
+  0% {
+    transform: translateX(-50%) translateY(14px) scale(0.92);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(-50%) translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+#line-ref-pill[hidden] {
+  display: none;
+}
 /* Stack height = number of buttons * 20px. With 1 button = 20px row,
  * with 2 (↑+↓) = 40px row, matching GitHub. */
 .gdp-expand-stack {
@@ -3713,6 +3961,17 @@ body.gdp-file-detail-page #empty {
   }
   #content { margin-left: 0; max-width: none; padding-top: calc(var(--chrome-h) + 240px); }
   .controls input[type="search"] { width: 130px; }
+  body.gdp-history-page #history-panel {
+    position: static;
+    width: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+  body.gdp-history-page #sidebar { left: 0; }
+  body.gdp-history-page main#content,
+  body.gdp-history-page.gdp-sidebar-hidden main#content {
+    margin-left: 0;
+  }
 }
 
 /* ===== File shell (placeholder + loaded card) ===== */