@tanishqkancharla/diffmap 0.1.4 → 0.2.0

package/src/update.ts

@@ -0,0 +1,285 @@
+import { execFile } from "node:child_process";
+import fs from "node:fs";
+import { DiffmapUpdateError } from "./errors.js";
+
+// The unscoped `diffmap` package on npm is unrelated; always use the scoped name.
+export const packageName = "@tanishqkancharla/diffmap";
+const latestSpec = `${packageName}@latest`;
+const registryUrl =
+  "https://registry.npmjs.org/@tanishqkancharla%2Fdiffmap/latest";
+
+type InstallMethod = "npm" | "pnpm" | "bun" | "npx" | "unknown";
+
+type Command = { command: string; args: string[] };
+
+type UpdateResult =
+  | { status: "up-to-date"; current: string; latest: string; message: string }
+  | {
+      status: "updated";
+      previous: string;
+      current: string;
+      command: string;
+      message: string;
+    }
+  | {
+      status: "manual";
+      current: string;
+      latest: string;
+      command: string;
+      message: string;
+    };
+
+type UpdateDeps = {
+  currentVersion: string;
+  fetchLatestVersion: () => Promise<string | Error>;
+  detectInstallMethod: () => Promise<InstallMethod>;
+  runCommand: (command: Command) => Promise<void | Error>;
+};
+
+/** Routes `diffmap --update [...]` to the `update` command so incur's built-in updater never runs. */
+export function resolveUpdateArgv(argv: string[]) {
+  const separator = argv.indexOf("--");
+  const flags = separator === -1 ? argv : argv.slice(0, separator);
+  if (!flags.includes("--update")) return argv;
+  const rest = argv.filter((token, index) => {
+    return token !== "--update" || (separator !== -1 && index > separator);
+  });
+  return ["update", ...rest];
+}
+
+type ParsedVersion = {
+  core: [number, number, number];
+  prerelease: string[];
+};
+
+function parseVersion(version: string): ParsedVersion | undefined {
+  const match = version
+    .trim()
+    .replace(/^v/, "")
+    .match(/^(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?(?:\+[0-9A-Za-z.-]+)?$/);
+  if (!match) return undefined;
+  return {
+    core: [Number(match[1]), Number(match[2]), Number(match[3])],
+    prerelease: match[4] === undefined ? [] : match[4].split("."),
+  };
+}
+
+/** Semver precedence: negative when `a < b`, positive when `a > b`, 0 when equal. */
+export function compareVersions(a: string, b: string) {
+  const left = parseVersion(a);
+  const right = parseVersion(b);
+  if (!left || !right) {
+    return new DiffmapUpdateError({
+      reason: `cannot compare versions "${a}" and "${b}"`,
+    });
+  }
+  for (let index = 0; index < 3; index++) {
+    const difference = left.core[index]! - right.core[index]!;
+    if (difference !== 0) return Math.sign(difference);
+  }
+  if (left.prerelease.length === 0 || right.prerelease.length === 0) {
+    return Math.sign(right.prerelease.length - left.prerelease.length);
+  }
+  const length = Math.max(left.prerelease.length, right.prerelease.length);
+  for (let index = 0; index < length; index++) {
+    const leftPart = left.prerelease[index];
+    const rightPart = right.prerelease[index];
+    if (leftPart === undefined) return -1;
+    if (rightPart === undefined) return 1;
+    if (leftPart === rightPart) continue;
+    const leftNumeric = /^\d+$/.test(leftPart);
+    const rightNumeric = /^\d+$/.test(rightPart);
+    if (leftNumeric && rightNumeric) {
+      return Math.sign(Number(leftPart) - Number(rightPart));
+    }
+    if (leftNumeric) return -1;
+    if (rightNumeric) return 1;
+    return leftPart < rightPart ? -1 : 1;
+  }
+  return 0;
+}
+
+function normalizePath(value: string) {
+  return value.replaceAll("\\", "/").replace(/\/+$/, "");
+}
+
+/** Infers the install method from the real path of the running entry script. */
+function detectInstallMethodFromPath(input: {
+  entryPath: string;
+  env: Record<string, string | undefined>;
+  npmGlobalRoot?: string | undefined;
+}): InstallMethod {
+  const entry = normalizePath(input.entryPath);
+  if (input.env.npm_command === "exec" || entry.includes("/_npx/")) {
+    return "npx";
+  }
+  if (entry.includes("/.bun/install/global/")) return "bun";
+  const pnpmHome = input.env.PNPM_HOME;
+  if (
+    entry.includes("/pnpm/global/") ||
+    (pnpmHome !== undefined &&
+      pnpmHome !== "" &&
+      entry.startsWith(`${normalizePath(pnpmHome)}/global/`))
+  ) {
+    return "pnpm";
+  }
+  if (input.npmGlobalRoot !== undefined && input.npmGlobalRoot !== "") {
+    const root = normalizePath(input.npmGlobalRoot);
+    if (entry.startsWith(`${root}/${packageName}/`)) return "npm";
+  }
+  return "unknown";
+}
+
+function globalInstallCommand(method: "npm" | "pnpm" | "bun"): Command {
+  if (method === "pnpm") {
+    return { command: "pnpm", args: ["add", "--global", latestSpec] };
+  }
+  if (method === "bun") {
+    return { command: "bun", args: ["add", "--global", latestSpec] };
+  }
+  return { command: "npm", args: ["install", "--global", latestSpec] };
+}
+
+function formatCommand(command: Command) {
+  return [command.command, ...command.args].join(" ");
+}
+
+export async function runUpdate(deps: UpdateDeps) {
+  const current = deps.currentVersion;
+  const latest = await deps.fetchLatestVersion();
+  if (latest instanceof Error) return latest;
+
+  const comparison = compareVersions(current, latest);
+  if (comparison instanceof Error) return comparison;
+  if (comparison >= 0) {
+    return {
+      message: `diffmap is already up to date (${current})`,
+      status: "up-to-date",
+      current,
+      latest,
+    } satisfies UpdateResult;
+  }
+
+  const method = await deps.detectInstallMethod();
+  if (method === "npx") {
+    const command = `npx ${latestSpec}`;
+    return {
+      message: `diffmap ${latest} is available (running ${current} through npx). Run \`${command}\` to use it, or install it globally with \`${formatCommand(globalInstallCommand("npm"))}\`.`,
+      status: "manual",
+      current,
+      latest,
+      command,
+    } satisfies UpdateResult;
+  }
+  if (method === "unknown") {
+    const command = formatCommand(globalInstallCommand("npm"));
+    return {
+      message: `diffmap ${latest} is available (running ${current}), but diffmap could not tell how it was installed. Update it with \`${command}\` or your package manager's equivalent.`,
+      status: "manual",
+      current,
+      latest,
+      command,
+    } satisfies UpdateResult;
+  }
+
+  const install = globalInstallCommand(method);
+  const installed = await deps.runCommand(install);
+  if (installed instanceof Error) return installed;
+  return {
+    message: `Updated diffmap from ${current} to ${latest}`,
+    status: "updated",
+    previous: current,
+    current: latest,
+    command: formatCommand(install),
+  } satisfies UpdateResult;
+}
+
+export async function fetchLatestVersion() {
+  const response = await fetch(registryUrl, {
+    headers: { accept: "application/json" },
+    signal: AbortSignal.timeout(10_000),
+  }).catch(
+    (cause) =>
+      new DiffmapUpdateError({
+        reason: "could not reach the npm registry",
+        cause,
+      }),
+  );
+  if (response instanceof Error) return response;
+  if (!response.ok) {
+    return new DiffmapUpdateError({
+      reason: `npm registry responded ${response.status} for ${packageName}`,
+    });
+  }
+  const body = (await response.json().catch(() => undefined)) as
+    | { version?: unknown }
+    | undefined;
+  if (typeof body?.version !== "string") {
+    return new DiffmapUpdateError({
+      reason: `npm registry returned no version for ${packageName}`,
+    });
+  }
+  return body.version;
+}
+
+function execCommand(command: Command) {
+  return new Promise<{ stdout: string; stderr: string } | Error>((resolve) => {
+    execFile(
+      command.command,
+      command.args,
+      { shell: process.platform === "win32", maxBuffer: 10_000_000 },
+      (cause, stdout, stderr) => {
+        if (cause) {
+          const detail = stderr.trim() || stdout.trim() || cause.message;
+          resolve(
+            new DiffmapUpdateError({
+              reason: `\`${formatCommand(command)}\` failed: ${detail}`,
+              cause,
+            }),
+          );
+          return;
+        }
+        resolve({ stdout, stderr });
+      },
+    );
+  });
+}
+
+async function readNpmGlobalRoot() {
+  const result = await execCommand({
+    command: "npm",
+    args: ["root", "--global"],
+  });
+  if (result instanceof Error) return undefined;
+  const root = result.stdout.trim();
+  if (root === "") return undefined;
+  try {
+    return fs.realpathSync(root);
+  } catch {
+    return root;
+  }
+}
+
+export async function detectInstallMethod() {
+  const entry = process.argv[1];
+  if (entry === undefined) return "unknown" satisfies InstallMethod;
+  let entryPath = entry;
+  try {
+    entryPath = fs.realpathSync(entry);
+  } catch {}
+  const withoutNpm = detectInstallMethodFromPath({
+    entryPath,
+    env: process.env,
+  });
+  if (withoutNpm !== "unknown") return withoutNpm;
+  return detectInstallMethodFromPath({
+    entryPath,
+    env: process.env,
+    npmGlobalRoot: await readNpmGlobalRoot(),
+  });
+}
+
+export async function runCommand(command: Command) {
+  const result = await execCommand(command);
+  if (result instanceof Error) return result;
+}

package/src/viewer/CallStackDiff.tsx

@@ -1,5 +1,12 @@
-import { backgroundColor, colors, focusRing, spacing, text } from "maui";
-import { style, useStyles } from "purse-styles";
+import {
+  backgroundColor,
+  colors,
+  focusRing,
+  LARGE_SCALE,
+  spacing,
+  text,
+} from "maui";
+import { defineVars, style, useStyles } from "purse-styles";
 import { codeFontFamily } from "../codeFont.js";
 import type { SourceAnnotation, SourceNavigation } from "../annotations.js";
 import { pierreShell } from "./pierre.js";
@@ -80,6 +87,10 @@ export function CallStackDiff(
   );
 }
 
+const rowSize = defineVars({
+  height: { default: "28px", [LARGE_SCALE]: "40px" },
+});
+
 const styles = {
   shell: style(
     text({ size: "sm", fontWeight: 500, color: "highContrast" }),
@@ -120,10 +131,11 @@ const styles = {
         alignItems: "stretch",
         flex: "1 1 auto",
         minWidth: 0,
-        minHeight: "28px",
+        minHeight: rowSize.height,
         overflow: "hidden",
       },
       "& .stack-label": {
+        alignSelf: "center",
         flex: "1 1 auto",
         minWidth: 0,
         paddingBlock: "3px",

package/src/viewer/ChangesCard.tsx

@@ -0,0 +1,267 @@
+import {
+  backgroundColor,
+  borderColor,
+  colors,
+  Css,
+  File,
+  FileCode,
+  FileText,
+  focusRing,
+  GitBranch,
+  text,
+} from "maui";
+import { style, useStyles } from "purse-styles";
+import type { SourceAnnotation, SourceNavigation } from "../annotations.js";
+import {
+  isCommitRev,
+  shortRev,
+  WORKING,
+  type ChangedFile,
+  type Changes,
+  type Rev,
+} from "../changes.js";
+import { codeFontFamily } from "../codeFont.js";
+import { useChanges } from "./changesSource.ts";
+import { pierreShell } from "./pierre.js";
+
+/** A phase's file summary. Review opens every file; a row focuses one. */
+export function ChangesCard(props: { rev: Rev } & SourceNavigation) {
+  const changes = useChanges(props.rev);
+  const shell = useStyles(pierreShell, styles.shell);
+  const header = useStyles(styles.header);
+  const row = useStyles(styles.row);
+  const review = useStyles(styles.review);
+  const muted = useStyles(styles.muted);
+  const range = useStyles(styles.range);
+  const open = (annotation: SourceAnnotation) =>
+    props.onSelectAnnotation(annotation);
+  const files =
+    changes === undefined || changes instanceof Error ? [] : changes.files;
+  return (
+    <div className={shell} data-diffmap-kind="changes">
+      <div className={header}>
+        <GitBranch size="sm" />
+        <span className={range}>{revLabel(props.rev, changes)}</span>
+        {changes === undefined || changes instanceof Error ? (
+          <span className={muted}>
+            {changes === undefined ? "Loading changes…" : changes.message}
+          </span>
+        ) : (
+          <ChangesSummary changes={changes} />
+        )}
+        {files.length > 0 && (
+          <button
+            type="button"
+            className={review}
+            aria-controls="source-diff-panel"
+            onClick={() =>
+              open({
+                text: "Review",
+                references: [{ kind: "changes", rev: props.rev }],
+              })
+            }
+          >
+            Review
+          </button>
+        )}
+      </div>
+      {files.map((file) => {
+        const annotation: SourceAnnotation = {
+          text: file.path,
+          references: [
+            props.rev === WORKING
+              ? { kind: "file", path: file.path }
+              : { kind: "file", rev: props.rev, path: file.path },
+          ],
+        };
+        return (
+          <button
+            key={file.path}
+            type="button"
+            className={row}
+            title={file.path}
+            aria-controls="source-diff-panel"
+            aria-pressed={
+              props.selectedAnnotation?.text === file.path &&
+              props.selectedAnnotation.references[0]?.kind === "file" &&
+              props.selectedAnnotation.references[0].rev ===
+                annotation.references[0]!.rev
+            }
+            onClick={() => open(annotation)}
+          >
+            <FileIcon path={file.path} />
+            <span className="name">
+              {file.path.split("/").pop()}
+              {file.status === "deleted" && (
+                <span className={muted}> deleted</span>
+              )}
+            </span>
+            <DiffStat file={file} />
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+/** "9 files changed +214 −119" for a whole rev; the card and the Diff panel header share it. */
+export function ChangesSummary(props: {
+  changes: Changes;
+  className?: string;
+}) {
+  const summary = useStyles(styles.summary);
+  const { files, truncated } = props.changes;
+  const additions = files.reduce((sum, file) => sum + file.additions, 0);
+  const deletions = files.reduce((sum, file) => sum + file.deletions, 0);
+  const count = files.length;
+  return (
+    <span className={`${summary} ${props.className ?? ""}`}>
+      <span
+        title={
+          truncated === true
+            ? "GitHub listed only these files. Open the commit on GitHub for the rest."
+            : undefined
+        }
+      >
+        {count}
+        {truncated === true && "+"} {count === 1 ? "file" : "files"} changed
+      </span>
+      {additions > 0 && <span className="added">+{additions}</span>}
+      {deletions > 0 && <span className="removed">−{deletions}</span>}
+    </span>
+  );
+}
+
+/** Labels the rev as the range picker does: a commit by its title, a range as `<from>…<to>`. */
+function revLabel(rev: Rev, changes: Changes | Error | undefined) {
+  const single = isCommitRev(rev) && !rev.includes("..");
+  if (single && changes !== undefined && !(changes instanceof Error))
+    return changes.title;
+  return shortRev(rev).replace("..", "…");
+}
+
+function DiffStat(props: { file: ChangedFile }) {
+  if (props.file.binary) return <span className="stat">binary</span>;
+  return (
+    <span className="stat">
+      {props.file.additions > 0 && (
+        <span className="added">+{props.file.additions}</span>
+      )}
+      {props.file.deletions > 0 && (
+        <span className="removed">−{props.file.deletions}</span>
+      )}
+    </span>
+  );
+}
+
+function FileIcon(props: { path: string }) {
+  const extension = props.path.split(".").pop()?.toLowerCase() ?? "";
+  if (/^(css|scss|less)$/.test(extension)) return <Css size="sm" />;
+  if (/^(md|mdx|txt|rst)$/.test(extension)) return <FileText size="sm" />;
+  if (
+    /^(c|cc|cpp|cs|go|h|java|jsx?|kt|mjs|cjs|py|rb|rs|sh|swift|tsx?|vue|svelte|json|ya?ml|toml|html)$/.test(
+      extension,
+    )
+  )
+    return <FileCode size="sm" />;
+  return <File size="sm" />;
+}
+
+/** Left inset of the file rows' icons. */
+const ROW_INSET = 6;
+/** Review's box inset from the card's top and right edges: (36px header − 24px button) / 2. */
+const EDGE = 6;
+/** Right inset of the stats, which Review's text also ends at. */
+const STAT_INSET = 12;
+
+const styles = {
+  shell: style(text({ size: "sm", color: "highContrast" }), {
+    backgroundColor: backgroundColor.app,
+    maxWidth: "100%",
+  }),
+  // Same insets and gap as the file rows, so the branch icon lines up with the file icons
+  // and the range with the names. Review's box sits EDGE from the top and right; its
+  // text lines up with the stats.
+  header: style({
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    minHeight: "36px",
+    paddingLeft: `${String(ROW_INSET)}px`,
+    paddingRight: `${String(EDGE)}px`,
+    "& > svg": { flexShrink: 0, color: colors.gray[11] },
+    // Divides the summary from the file rows; a card with no files has no divider.
+    "&:not(:last-child)": { borderBottom: `1px solid ${borderColor.border}` },
+  }),
+  range: style(text({ size: "sm", fontWeight: 500, color: "highContrast" }), {
+    flex: "1 1 auto",
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  }),
+  summary: style(text({ size: "sm", color: "lowContrast" }), {
+    display: "flex",
+    gap: "8px",
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    fontVariantNumeric: "tabular-nums",
+    "& .added, & .removed": { fontFamily: codeFontFamily },
+    "& .added": { color: colors.green[11] },
+    "& .removed": { color: colors.red[11] },
+  }),
+  review: style(
+    text({ size: "sm", fontWeight: 400, color: "highContrast" }),
+    {
+      height: "24px",
+      padding: `0 ${String(STAT_INSET - EDGE)}px`,
+      border: 0,
+      borderRadius: "4px",
+      background: "transparent",
+      cursor: "pointer",
+      "&:hover": { backgroundColor: colors.gray[3] },
+    },
+    focusRing(),
+  ),
+  row: style(
+    {
+      paddingLeft: `${String(ROW_INSET)}px`,
+      paddingRight: `${String(STAT_INSET)}px`,
+      display: "flex",
+      alignItems: "center",
+      gap: "10px",
+      width: "100%",
+      minHeight: "32px",
+      font: "inherit",
+      textAlign: "left",
+      color: "inherit",
+      background: "transparent",
+      border: 0,
+      cursor: "pointer",
+      "& > svg": { flexShrink: 0, color: colors.gray[11] },
+      "& .name": {
+        flex: "1 1 auto",
+        minWidth: 0,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+      "& .stat": {
+        display: "flex",
+        gap: "8px",
+        flexShrink: 0,
+        fontFamily: codeFontFamily,
+        fontVariantNumeric: "tabular-nums",
+        color: colors.gray[11],
+      },
+      "& .added": { color: colors.green[11] },
+      "& .removed": { color: colors.red[11] },
+      "&:hover": { backgroundColor: colors.gray[3] },
+      "&[aria-pressed='true'], &[aria-pressed='true']:hover": {
+        backgroundColor: colors.blue[3],
+      },
+    },
+    focusRing(),
+  ),
+  muted: style({ color: colors.gray[11] }),
+};

package/src/viewer/CloseServerButton.tsx

@@ -0,0 +1,16 @@
+import { Button, Close, colors } from "maui";
+import { style, useStyles } from "purse-styles";
+
+const closeIcon = style({
+  color: colors.red[9],
+});
+
+export function CloseServerButton(props: { onClick?: () => void }) {
+  const iconClass = useStyles(closeIcon);
+  return (
+    <Button variant="default" onClick={props.onClick}>
+      <Close className={iconClass} size="sm" />
+      Close server
+    </Button>
+  );
+}