@hienlh/ppm 0.21.0 → 0.22.0

package/packages/ext-git-graph/src/compare-diff-base.test.ts

@@ -0,0 +1,173 @@
+import { describe, it, expect, beforeEach, afterEach } from "bun:test";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { openCompareView } from "./compare-view.ts";
+import { _resetPanelRegistry } from "./panel-registry.ts";
+import type { ExtensionContext } from "@ppm/vscode-compat";
+
+/**
+ * The compare panel lists files for a whole range but opens one file at a time,
+ * and those two have to agree on the base.
+ *
+ * In three-dot mode the list comes from `git diff ref1...ref2`, i.e. against the
+ * merge base. Handing the tab `ref1` itself is a two-dot diff, so every commit
+ * ref1 gained since the branch point renders as a deletion inside a review of
+ * ref2 — with numbers that contradict the row that was clicked.
+ */
+
+const GIT_ENV = {
+  GIT_AUTHOR_NAME: "Test Author",
+  GIT_AUTHOR_EMAIL: "test@example.com",
+  GIT_COMMITTER_NAME: "Test Committer",
+  GIT_COMMITTER_EMAIL: "committer@example.com",
+  GIT_CONFIG_GLOBAL: "/dev/null",
+  GIT_CONFIG_SYSTEM: "/dev/null",
+};
+
+let repo: string;
+
+async function git(args: string[], cwd = repo) {
+  const proc = Bun.spawn(["git", ...args], { cwd, env: GIT_ENV, stdout: "pipe", stderr: "pipe" });
+  const stdout = await new Response(proc.stdout).text();
+  const stderr = await new Response(proc.stderr).text();
+  const exitCode = await proc.exited;
+  return { stdout, stderr, exitCode };
+}
+
+interface OpenedTab {
+  tabType: string;
+  title: string;
+  metadata: Record<string, unknown>;
+}
+
+function createFakeVscode() {
+  const opened: OpenedTab[] = [];
+  let listener: ((msg: unknown) => void) | null = null;
+
+  const vscode = {
+    commands: { registerCommand: () => ({ dispose() {} }) },
+    window: {
+      async showErrorMessage() { return undefined; },
+      async showInformationMessage() { return undefined; },
+      async openTab(tabType: string, title: string, _projectId: string | null, metadata?: Record<string, unknown>) {
+        opened.push({ tabType, title, metadata: metadata ?? {} });
+      },
+      async switchProject() {},
+      createWebviewPanel() {
+        return {
+          webview: {
+            html: "",
+            onDidReceiveMessage(l: (msg: unknown) => void) {
+              listener = l;
+              return { dispose() {} };
+            },
+            postMessage: async () => true,
+          },
+          onDidDispose: () => ({ dispose() {} }),
+          dispose() {},
+        };
+      },
+    },
+    process: {
+      async spawn(cmd: string, args: string[], cwd: string) {
+        const proc = Bun.spawn([cmd, ...args], { cwd, env: GIT_ENV, stdout: "pipe", stderr: "pipe" });
+        const stdout = await new Response(proc.stdout).text();
+        const stderr = await new Response(proc.stderr).text();
+        const exitCode = await proc.exited;
+        return { stdout, stderr, exitCode };
+      },
+    },
+    ViewColumn: { Active: 1 },
+  };
+
+  return { vscode, opened, send: (msg: unknown) => listener?.(msg) };
+}
+
+/** `onMessage` is dispatched with `void`, so the result has to be polled for. */
+async function waitFor<T>(read: () => T | undefined, label: string): Promise<T> {
+  for (let i = 0; i < 200; i++) {
+    const value = read();
+    if (value !== undefined) return value;
+    await Bun.sleep(10);
+  }
+  throw new Error(`Timed out waiting for ${label}`);
+}
+
+describe("compare panel diff base", () => {
+  beforeEach(async () => {
+    _resetPanelRegistry();
+    repo = mkdtempSync(join(tmpdir(), "ppm-compare-base-"));
+    await git(["init", "-b", "main"]);
+    writeFileSync(join(repo, "README.md"), "base\n");
+    await git(["add", "."]);
+    await git(["commit", "-m", "initial"]);
+
+    // The feature branch: one file, added after the branch point.
+    await git(["checkout", "-b", "feature"]);
+    writeFileSync(join(repo, "feature.txt"), "feature work\n");
+    await git(["add", "."]);
+    await git(["commit", "-m", "add feature"]);
+
+    // main moves on afterwards — this is what makes the two modes differ.
+    await git(["checkout", "main"]);
+    writeFileSync(join(repo, "README.md"), "base\nchanged on main\n");
+    writeFileSync(join(repo, "other.txt"), "unrelated\n");
+    await git(["add", "."]);
+    await git(["commit", "-m", "move main ahead"]);
+    await git(["checkout", "feature"]);
+  });
+
+  afterEach(() => {
+    rmSync(repo, { recursive: true, force: true });
+  });
+
+  it("opens a three-dot row against the merge base, not ref1's tip", async () => {
+    const { vscode, opened, send } = createFakeVscode();
+    openCompareView(vscode as any, {} as ExtensionContext, repo);
+
+    send({ command: "openDiff", filePath: "feature.txt", ref1: "main", ref2: "feature", mode: "three-dot" });
+    const tab = await waitFor(() => opened[0], "the diff tab");
+
+    const base = (await git(["merge-base", "main", "feature"])).stdout.trim();
+    const mainTip = (await git(["rev-parse", "main"])).stdout.trim();
+
+    expect(base).not.toBe(mainTip); // the setup is only meaningful while these differ
+    expect(tab.tabType).toBe("git-diff");
+    expect(tab.metadata.ref1).toBe(base);
+    expect(tab.metadata.ref2).toBe("feature");
+    expect(tab.title).toContain("main...feature");
+  });
+
+  it("leaves ref1 alone in two-dot mode", async () => {
+    const { vscode, opened, send } = createFakeVscode();
+    openCompareView(vscode as any, {} as ExtensionContext, repo);
+
+    send({ command: "openDiff", filePath: "feature.txt", ref1: "main", ref2: "feature", mode: "two-dot" });
+    const tab = await waitFor(() => opened[0], "the diff tab");
+
+    expect(tab.metadata.ref1).toBe("main");
+    expect(tab.title).toContain("main..feature");
+  });
+
+  it("the base it opens reproduces the counts the file list showed", async () => {
+    const { vscode, opened, send } = createFakeVscode();
+    openCompareView(vscode as any, {} as ExtensionContext, repo);
+
+    send({ command: "openDiff", filePath: "README.md", ref1: "main", ref2: "feature", mode: "three-dot" });
+    const tab = await waitFor(() => opened[0], "the diff tab");
+
+    // What the panel listed: README.md is untouched by the feature branch, so
+    // three-dot reports nothing for it at all.
+    const listed = (await git(["diff", "--numstat", "main...feature"])).stdout;
+    expect(listed).not.toContain("README.md");
+
+    // What the tab now shows for the same file: equally nothing.
+    const shown = (await git(["diff", "--numstat", `${tab.metadata.ref1}`, "feature", "--", "README.md"])).stdout;
+    expect(shown.trim()).toBe("");
+
+    // And what it showed before the fix: main's own commit, backwards.
+    const twoDot = (await git(["diff", "--numstat", "main", "feature", "--", "README.md"])).stdout;
+    expect(twoDot).toContain("README.md");
+  });
+});

package/packages/ext-git-graph/src/compare-view.ts

@@ -78,11 +78,19 @@ export function openCompareView(
             assertSafeFilePaths([filePath], projectPath);
             const ref1 = assertValidRef(msg.ref1, "ref1");
             const ref2 = assertValidRef(msg.ref2, "ref2");
+            const mode: CompareMode = msg.mode === "two-dot" ? "two-dot" : "three-dot";
+            // The row was listed by a diff against `base`, so the tab it opens
+            // has to use the same base — in three-dot mode that is the merge
+            // base, not ref1's tip. With ref1 advanced past the branch point,
+            // ref1's own commits otherwise render as deletions in a review of
+            // ref2, and the +/- counts disagree with the row that was clicked.
+            const base = mode === "three-dot" ? await mergeBase(ref1, ref2) : ref1;
             const fileName = filePath.split(/[\\/]/).pop() || filePath;
             const target = await resolveFileTab(projectPath, filePath);
-            await vscode.window.openTab("git-diff", `${fileName} (${ref1}→${ref2})`, target.projectName, {
+            const range = `${ref1}${mode === "three-dot" ? "..." : ".."}${ref2}`;
+            await vscode.window.openTab("git-diff", `${fileName} (${range})`, target.projectName, {
               ...target,
-              ref1,
+              ref1: base,
               ref2,
             });
             break;
@@ -108,6 +116,17 @@ export function openCompareView(
     return res.exitCode === 0 ? parseRefList(res.stdout) : [];
   }
 
+  /**
+   * Where the two refs diverged. Falls back to ref1 when git reports none:
+   * `git diff a...b` fails outright on unrelated histories, so the compare that
+   * listed the file would already have shown that error.
+   */
+  async function mergeBase(ref1: string, ref2: string): Promise<string> {
+    const res = await spawnGit(vscode, ["merge-base", ref1, ref2], projectPath, 60_000);
+    const base = res.stdout.trim();
+    return res.exitCode === 0 && base ? base : ref1;
+  }
+
   async function loadCompare(rawRef1: unknown, rawRef2: unknown, mode: CompareMode): Promise<void> {
     const ref1 = assertValidRef(rawRef1, "ref1");
     const ref2 = assertValidRef(rawRef2, "ref2");
@@ -257,7 +276,7 @@ document.getElementById('btn-swap').addEventListener('click', () => {
 el.files.addEventListener('click', (e) => {
   const row = e.target.closest('.f-row');
   if (!row) return;
-  vscode.postMessage({ command: 'openDiff', filePath: row.dataset.path, ref1: state.ref1, ref2: state.ref2 });
+  vscode.postMessage({ command: 'openDiff', filePath: row.dataset.path, ref1: state.ref1, ref2: state.ref2, mode: state.mode });
 });
 
 function renderCommits(commits, truncated) {

package/packages/ext-git-graph/src/extension.ts

@@ -31,6 +31,7 @@ const VALID_SETTING_KEYS = new Set<string>([
   "maxCommits", "showTags", "showStashes", "showRemoteBranches", "graphStyle",
   "firstParentOnly", "dateFormat", "commitOrdering", "issueLinkingRules", "prCreation",
   "autoFetchInterval",
+  "colRefs", "colChanges", "colAuthor", "colDate", "colHash",
 ]);
 
 async function saveSetting(context: ExtensionContext, key: string, value: unknown): Promise<GitGraphSettings> {
@@ -95,6 +96,11 @@ function openGitGraph(
     try {
       switch (msg.command) {
         case "ready":
+          // Before anything is drawn: the settings say which columns the table
+          // has, and until this arrived they were only fetched when the
+          // settings panel was opened — so a saved choice took effect on the
+          // second look at the panel rather than the first.
+          await panel.webview.postMessage({ command: "loadSettings", data: getSettings(context) });
           await handleRepoInfo(vscode, panel, pp);
           await handleRequestCommits(vscode, panel, pp, context);
           handleUncommittedStatus(vscode, panel, pp); // fire-and-forget

package/packages/ext-git-graph/src/types.ts

@@ -134,6 +134,20 @@ export interface GitGraphSettings {
   issueLinkingRules: IssueLinkingRule[];
   prCreation: PrCreationConfig | null;
   autoFetchInterval: number;
+  /*
+   * Which columns the commit table shows. Flat keys rather than one nested
+   * object, because the stored settings are merged over the defaults one level
+   * deep: a nested object saved by an older version would keep its own shape
+   * and any key added later would arrive undefined.
+   *
+   * A narrow panel drops columns of its own accord regardless of these — they
+   * say what to show when there is room for it.
+   */
+  colRefs: boolean;
+  colChanges: boolean;
+  colAuthor: boolean;
+  colDate: boolean;
+  colHash: boolean;
 }
 
 export const DEFAULT_SETTINGS: GitGraphSettings = {
@@ -148,6 +162,11 @@ export const DEFAULT_SETTINGS: GitGraphSettings = {
   issueLinkingRules: [{ pattern: "#(\\d+)", url: "" }],
   prCreation: null,
   autoFetchInterval: 0,
+  colRefs: true,
+  colChanges: true,
+  colAuthor: true,
+  colDate: true,
+  colHash: true,
 };
 
 // --- Extension → Webview messages ---

package/packages/ext-git-graph/src/webview-html.test.ts

@@ -177,7 +177,12 @@ describe("webview-html: the injected script", () => {
   it("offsets the graph overlay by the branch column's width", () => {
     // The SVG is one absolutely-positioned overlay: if its left edge does not
     // track the column in front of it, every node is drawn off its row's dot.
-    expect(getWebviewHtml()).toContain("left: calc(var(--refs-col-w, 170px) + 8px)");
+    // The 6px is the row's own padding, which is where the graph cell starts;
+    // the 2px the drawing sits in from there is on the SVG inside the clip box,
+    // because a box offset by both ends 2px past the column it clips to.
+    const html = getWebviewHtml();
+    expect(html).toContain("left: calc(var(--refs-col-w, 170px) + 6px)");
+    expect(html).toMatch(/#graph-svg-container \{[^}]*left: 2px/);
   });
 });
 
@@ -547,3 +552,131 @@ describe("getWebviewHtml commit details", () => {
     expect(actions.slice(0, actions.indexOf("}"))).not.toContain("margin-left: auto");
   });
 });
+
+describe("webview-html: a panel narrower than the table", () => {
+  const html = getWebviewHtml();
+
+  it("caps the graph column instead of letting it take the row", () => {
+    // The column used to be set to whatever the lanes needed. The message is
+    // the only column that can shrink, so from about twenty parallel branches
+    // on it was the message that paid for the graph — all of it, down to zero.
+    expect(html).not.toContain("setProperty('--graph-col-w', gw + 'px')");
+    expect(html).toContain("function graphColCap()");
+    expect(html).toContain("area.clientWidth - fixed - rowPadding - MESSAGE_MIN_W");
+    expect(html).toContain("Math.min(want || GRAPH_MIN_W, cap)");
+  });
+
+  it("measures what the columns take rather than listing them", () => {
+    // Hiding a column has to give its pixels to the graph. A table of constants
+    // here would need editing every time a column is added or hidden, and the
+    // way that shows is a cap that is quietly too small.
+    expect(html).toContain(".col-refs, .col-changes, .col-author, .col-date, .col-hash')");
+    expect(html).toContain("fixed += cell.offsetWidth");
+  });
+
+  it("recomputes the cap when the panel changes size", () => {
+    // Nothing re-renders the graph when a window is dragged, so without this
+    // the cap stays at whatever the width was when the commits last arrived.
+    expect(html).toContain("new ResizeObserver(() => applyGraphColWidth())");
+  });
+
+  it("clips the overlay to the column it belongs to", () => {
+    // The overlay is positioned and the rows are not, so it paints above them:
+    // capping the column without clipping only replaces a missing message with
+    // one that has branch lines drawn through it.
+    expect(html).toMatch(/#graph-clip \{[^}]*width: var\(--graph-col-w/);
+    expect(html).toMatch(/#graph-clip \{[^}]*overflow: hidden/);
+    expect(html).toContain('<div id="graph-clip"><div id="graph-svg-container"></div></div>');
+  });
+
+  it("puts the graph's scrollbar in the header, not on the graph", () => {
+    // The overlay is as tall as the whole history, so a scrollbar along its
+    // bottom edge would sit thousands of pixels below the viewport.
+    const header = html.slice(html.indexOf('id="graph-header"'), html.indexOf('id="commit-list-wrapper"'));
+    expect(header).toContain('id="graph-hscroll"');
+    expect(html).toContain("transform: translateX(calc(-1 * var(--graph-pan-x, 0px)))");
+  });
+
+  it("agrees between the message column's floor and the cap that respects it", () => {
+    // Two numbers for one thing: a CSS floor wider than the JS cap allows for
+    // is a row that overflows its own box instead of one that fits.
+    const cssFloor = html.match(/\.col-message \{[^}]*min-width: (\d+)px/);
+    const jsFloor = html.match(/const MESSAGE_MIN_W = (\d+);/);
+    expect(cssFloor?.[1]).toBeDefined();
+    expect(cssFloor?.[1]).toBe(jsFloor?.[1]);
+  });
+
+  it("drops the message's floor on a phone, where the row is the message", () => {
+    // A floor wider than the panel is what makes a row overflow its own box.
+    const phone = html.slice(html.indexOf("@media (max-width: 640px)"));
+    expect(phone.slice(0, phone.indexOf("\n}"))).toContain(".col-message { min-width: 0; }");
+  });
+
+  it("sheds the columns that carry least, in order, before anything is crushed", () => {
+    expect(html).toMatch(/@media \(max-width: 900px\) \{\s*\.col-date, \.col-hash \{ display: none; \}/);
+    expect(html).toMatch(/@media \(max-width: 760px\) \{\s*\.col-changes \{ display: none; \}/);
+  });
+
+  it("lets those tiers apply to a tablet too", () => {
+    // The coarse block used to hold the table open at 880px and scroll it
+    // sideways, which cancels every tier below that width.
+    const coarse = html.slice(html.indexOf("@media (pointer: coarse)"));
+    expect(coarse.slice(0, coarse.indexOf("\n}"))).not.toContain("min-width: 880px");
+    expect(html).not.toContain("#commit-list-wrapper { min-width: 880px; }");
+  });
+
+  it("declares the tiers after the coarse block and before the phone one", () => {
+    const coarse = html.indexOf("@media (pointer: coarse)");
+    const tier = html.indexOf("@media (max-width: 900px)");
+    const phone = html.indexOf("@media (max-width: 640px)");
+    expect(coarse).toBeLessThan(tier);
+    expect(tier).toBeLessThan(phone);
+  });
+});
+
+describe("webview-html: column visibility", () => {
+  const html = getWebviewHtml();
+  const columns = [
+    { key: "colRefs", cls: "cols-no-refs", col: "col-refs" },
+    { key: "colChanges", cls: "cols-no-changes", col: "col-changes" },
+    { key: "colAuthor", cls: "cols-no-author", col: "col-author" },
+    { key: "colDate", cls: "cols-no-date", col: "col-date" },
+    { key: "colHash", cls: "cols-no-hash", col: "col-hash" },
+  ];
+
+  it("offers every optional column in Settings, in the script, and in CSS", () => {
+    for (const c of columns) {
+      expect(html).toContain(`id="s-${c.key}"`);
+      expect(html).toContain(`{ key: '${c.key}', cls: '${c.cls}'`);
+      expect(html).toContain(`.${c.cls} .${c.col} { display: none; }`);
+    }
+  });
+
+  it("zeroes the refs variable when that column goes, not just the cell", () => {
+    // The variable is where the graph overlay starts, so hiding the cell alone
+    // would leave every node drawn 170px to the right of its row's dot.
+    expect(html).toContain(".cols-no-refs { --refs-col-w: 0px; }");
+  });
+
+  it("opens the same list from the header as from Settings", () => {
+    expect(html).toContain("header.addEventListener('contextmenu'");
+    expect(html).toContain("setupLongPress(header, (x, y) => showColumnMenu(x, y))");
+    expect(html).toContain("setColumnVisible(col.key, e.target.checked)");
+  });
+
+  it("marks what the panel's width has already taken away", () => {
+    // A tick that does nothing, with nothing to say why, is worse than an item
+    // that says it needs more room.
+    expect(html).toContain("columnBlockedByWidth");
+    expect(html).toContain("needs a wider panel");
+    expect(html).toContain("window.matchMedia('(max-width: 900px)').matches");
+    expect(html).toContain("window.matchMedia('(max-width: 760px)').matches");
+  });
+
+  it("hands the freed width to the graph", () => {
+    // No resize fires for a column that was hidden, so the cap would otherwise
+    // keep reserving room for a column that is no longer there.
+    const apply = html.slice(html.indexOf("function applyColumnVisibility()"));
+    expect(apply.slice(0, apply.indexOf("\n}"))).toContain("applyGraphColWidth()");
+  });
+});