@youtyan/code-viewer 0.1.42 → 0.1.43

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,106 @@ function refCommits(cwd, query = "", max = DEFAULT_REF_COMMIT_LIMIT) {
   ]);
   return mergeCommitResults(limit, hashMatches, subjectMatches, authorMatches);
 }
+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 +1151,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 +1914,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"];
 });
 
@@ -3159,6 +3265,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 +4321,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.43",
   "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:
@@ -9013,6 +9031,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) {
@@ -9631,7 +9999,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();
     });
@@ -15239,6 +15607,15 @@ ${frontmatter.yaml}
       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() {
@@ -15258,6 +15635,13 @@ ${frontmatter.yaml}
         if (link2.dataset.route === "diff") {
           link2.href = buildRoute({ screen: "diff", range: currentRange() });
         }
+        if (link2.dataset.route === "history") {
+          link2.href = buildRoute({
+            screen: "history",
+            ref: "HEAD",
+            range: currentRange()
+          });
+        }
         if (link2.dataset.route === "help") {
           link2.href = buildRoute({
             screen: "help",
@@ -15747,6 +16131,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,6 +16168,9 @@ ${frontmatter.yaml}
       else if (STATE.route.screen === "file" && STATE.route.view === "blob") {
         setStatus("live");
         applySourceRouteToShell();
+      } else if (STATE.route.screen === "history") {
+        setStatus("live");
+        HISTORY_VIEW.enterHistory();
       } else
         load();
     });
@@ -15801,12 +16200,42 @@ ${frontmatter.yaml}
         renderHelpPage();
       } else {
         setRoute({ screen: "diff", range }, true);
+        setPageMode();
         load();
       }
     }
     syncRefInputs();
     syncHeaderMenu();
-    createRefPicker({
+    const HISTORY_VIEW = createHistoryView({
+      $,
+      escapeHtml: escapeHtml2,
+      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: escapeHtml2,
       currentRange,
@@ -15818,6 +16247,13 @@ ${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() {
       const parsedRoute = parseRoute(window.location.pathname, window.location.search, currentRange());
@@ -15843,6 +16279,13 @@ ${frontmatter.yaml}
         loadRepo();
         return;
       }
+      if (STATE.route.screen === "history") {
+        cancelActiveSourceLoad("navigation");
+        setPageMode();
+        removeStandaloneSource();
+        HISTORY_VIEW.enterHistory();
+        return;
+      }
       if (STATE.route.screen !== "file") {
         cancelActiveSourceLoad("navigation");
         setPageMode();

package/web/index.html

@@ -26,6 +26,7 @@
     <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>
@@ -76,6 +77,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 +194,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,165 @@ 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);
+}
+#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;
@@ -3713,6 +3873,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) ===== */