@tanishqkancharla/diffmap 0.1.5 → 0.3.0

package/src/parseViewer.test.ts

@@ -74,6 +74,92 @@ test("parseViewerDocument accepts a spec with valid mermaid", async () => {
   );
 });
 
+test("parseViewerDocument turns prose [[path#symbol]] into a short reference", () => {
+  const source =
+    "See [[packages/server/src/agent/Thread.ts#Thread.attach]] here, not `[[path]]` or [x [[a.ts]]](https://x.dev).\n";
+  const document = parseViewerDocument(source);
+  assert.equal(document instanceof Error, false);
+  if (document instanceof Error) return;
+  assert.equal(document.references.length, 1);
+  const paragraph = document.nodes[0];
+  assert.equal(paragraph?.type, "element");
+  if (paragraph?.type !== "element") return;
+  assert.deepEqual(
+    paragraph.children.map((node) =>
+      node.type === "element"
+        ? { tag: node.tag, children: node.children }
+        : node,
+    ),
+    [
+      { type: "text", value: "See " },
+      {
+        type: "reference",
+        annotation: {
+          text: "Thread.ts#Thread.attach",
+          references: [
+            {
+              kind: "file",
+              path: "packages/server/src/agent/Thread.ts",
+              symbol: "Thread.attach",
+            },
+          ],
+        },
+      },
+      { type: "text", value: " here, not " },
+      { tag: "code", children: [{ type: "text", value: "[[path]]" }] },
+      { type: "text", value: " or " },
+      { tag: "a", children: [{ type: "text", value: "x [[a.ts]]" }] },
+      { type: "text", value: "." },
+    ],
+  );
+  assert.equal(
+    parseViewerDocument("See [[missing:new:1]].\n") instanceof Error,
+    true,
+  );
+});
+
+test("parseViewerDocument reads commit references and changes fences", () => {
+  const document = parseViewerDocument(
+    [
+      "```changes",
+      "a1b2c3d..e4f5a6b",
+      "```",
+      "",
+      "```changes",
+      "```",
+      "",
+      "See [[a1b2c3d:src/store.ts#L12-L30]] and [[src/store.ts#L3]].",
+      "",
+    ].join("\n"),
+  );
+  assert.equal(document instanceof Error, false);
+  if (document instanceof Error) return;
+  assert.deepEqual(document.changeRevs, ["a1b2c3d..e4f5a6b", "working"]);
+  assert.deepEqual(document.references, [
+    { kind: "file", rev: "a1b2c3d", path: "src/store.ts", start: 12, end: 30 },
+    { kind: "file", path: "src/store.ts", start: 3, end: 3 },
+  ]);
+  // A commit with a symbol, or a changes fence that is not a SHA, is an error.
+  assert.equal(
+    parseViewerDocument("See [[a1b2c3d:src/store.ts#save]].\n") instanceof
+      Error,
+    true,
+  );
+  assert.equal(
+    parseViewerDocument("```changes\nmain\n```\n") instanceof Error,
+    true,
+  );
+  // The removed patch fence fails instead of rendering as code.
+  assert.match(
+    String(
+      parseViewerDocument(
+        "```source-diff:store:src/store.ts\ndiff --git a/x b/x\n```\n",
+      ),
+    ),
+    /source-diff:store:src\/store\.ts" fences were removed/,
+  );
+});
+
 test("parseViewerDocument fails on broken mermaid with file and diagram", () => {
   const source = brokenMermaidSpec();
   const parsed = parseViewerDocument(source, "broken.md");
@@ -138,6 +224,7 @@ test("startServer does not listen when mermaid is invalid", async () => {
 test("shareMarkdownFile does not call gh when mermaid is invalid", async () => {
   await withTempSpec(brokenMermaidSpec(), async (filePath) => {
     const shared = await shareMarkdownFile({
+      workspaceRoot: packageRoot,
       filePath,
       isPublic: false,
     });
@@ -147,6 +234,59 @@ test("shareMarkdownFile does not call gh when mermaid is invalid", async () => {
   });
 });
 
+test("shareMarkdownFile uploads the files excerpts and rev-less references read", async () => {
+  const spec = [
+    "# Shared",
+    "",
+    "See [[src/share.ts#shareMarkdownFile]].",
+    "",
+    "```1:3:src/changes.ts",
+    "```",
+    "",
+  ].join("\n");
+  await withTempSpec(spec, async (filePath) => {
+    const dir = path.dirname(filePath);
+    const uploaded = path.join(dir, "uploaded");
+    await fs.mkdir(uploaded);
+    const gh = path.join(dir, "gh");
+    await fs.writeFile(
+      gh,
+      [
+        "#!/bin/sh",
+        'if [ "$1" = auth ]; then exit 0; fi',
+        `for arg; do case "$arg" in *.json) cp "$arg" ${JSON.stringify(uploaded)};; esac; done`,
+        "echo https://gist.github.com/0123456789abcdef0123456789abcdef",
+      ].join("\n"),
+      { mode: 0o755 },
+    );
+    const originalPath = process.env.PATH;
+    process.env.PATH = `${dir}${path.delimiter}${originalPath ?? ""}`;
+    try {
+      const shared = await shareMarkdownFile({
+        workspaceRoot: packageRoot,
+        filePath,
+        isPublic: false,
+      });
+      assert.equal(shared instanceof Error, false, String(shared));
+    } finally {
+      process.env.PATH = originalPath;
+    }
+    const files: unknown = JSON.parse(
+      await fs.readFile(path.join(uploaded, "diffmap-files.json"), "utf8"),
+    );
+    assert.deepEqual(files, {
+      "src/share.ts": await fs.readFile(
+        path.join(packageRoot, "src/share.ts"),
+        "utf8",
+      ),
+      "src/changes.ts": await fs.readFile(
+        path.join(packageRoot, "src/changes.ts"),
+        "utf8",
+      ),
+    });
+  });
+});
+
 function mermaidCliMessage(filePath: string) {
   return `diffmap could not parse mermaid in ${filePath} (diagram 1, line 3): Invalid mermaid header: "flwochart TD". Expected "graph TD", "flowchart LR", "stateDiagram-v2", etc.`;
 }

package/src/parseViewer.ts

@@ -1,7 +1,13 @@
 import * as errore from "errore";
-import { parsePatchFiles, type CodeViewDiffItem } from "@pierre/diffs";
 import { parseAST } from "md4x/napi";
 import type { ComarkElement, ComarkNode } from "md4x/napi";
+import {
+  parseReference,
+  referenceLabel,
+  type SourceAnnotation,
+  type SourceReference,
+} from "./annotations.js";
+import { isRev, type Rev } from "./changes.js";
 import { DiffmapAnnotationError, DiffmapParseError } from "./errors.js";
 import { parseMermaidDiagram } from "./mermaid.js";
 import { parseFence, type Fence } from "./parseFence.js";
@@ -9,8 +15,10 @@ import { parseFence, type Fence } from "./parseFence.js";
 export type ViewerDocument = {
   nodes: ViewerNode[];
   headings: ViewerHeading[];
-  sourceDiffs: CodeViewDiffItem[];
-  hasReferences: boolean;
+  /** Every reference in stacks, diagrams, and prose. */
+  references: SourceReference[];
+  /** Revs of `changes` fences, in document order. */
+  changeRevs: Rev[];
 };
 
 export type ViewerHeading = {
@@ -19,7 +27,12 @@ export type ViewerHeading = {
   id: string;
 };
 
-export type ViewerNode = ViewerText | ViewerElement | ViewerHtml | ViewerView;
+export type ViewerNode =
+  | ViewerText
+  | ViewerElement
+  | ViewerHtml
+  | ViewerView
+  | ViewerReference;
 
 export type ViewerText = {
   type: "text";
@@ -44,6 +57,12 @@ export type ViewerView = {
   fence: Fence;
 };
 
+/** A `[[path#symbol]]` in prose. The annotation text is the short label. */
+export type ViewerReference = {
+  type: "reference";
+  annotation: SourceAnnotation;
+};
+
 export type ViewerElementAttrs = {
   id: string | undefined;
   href: string | undefined;
@@ -64,49 +83,32 @@ export function parseViewerDocument(source: string, path = "spec") {
     catch: (cause) => new DiffmapParseError({ cause }),
   });
   if (tree instanceof Error) return tree;
-  const nodes = tree.nodes.flatMap(fromNode);
+  const nodes = tree.nodes.flatMap((node) => fromNode(node));
   const fences = collectFences(nodes);
-  const sourceDiffs: CodeViewDiffItem[] = [];
+  const changeRevs: Rev[] = [];
   for (const fence of fences) {
-    if (fence.kind !== "source-diff") continue;
-    if (sourceDiffs.some((diff) => diff.id === fence.id)) {
-      return new DiffmapAnnotationError({
-        reason: `Duplicate source diff ID "${fence.id}"`,
-      });
-    }
-    const patches = errore.try({
-      try: () => parsePatchFiles(fence.source, undefined, true),
-      catch: (cause) =>
-        new DiffmapAnnotationError({
-          reason: `Invalid patch "${fence.id}"`,
-          cause,
-        }),
-    });
-    if (patches instanceof Error) return patches;
-    const files = patches.flatMap((patch) => patch.files);
-    const fileDiff = files[0];
-    if (
-      files.length !== 1 ||
-      fileDiff === undefined ||
-      fileDiff.hunks.length === 0
-    ) {
+    if (fence.kind === "code" && fence.lang.startsWith("source-diff")) {
       return new DiffmapAnnotationError({
-        reason: `Source diff "${fence.id}" must contain one file with unified diff hunks`,
+        reason: `"${fence.lang}" fences were removed. Commit the change, then use a changes fence with the commit SHA and link lines with [[<sha>:path#L12-L30]]`,
       });
     }
-    if (fileDiff.name !== fence.path) {
+    if (fence.kind !== "changes") continue;
+    if (!isRev(fence.rev)) {
       return new DiffmapAnnotationError({
-        reason: `Source diff "${fence.id}" path does not match its patch (${fileDiff.name})`,
+        reason: `Invalid changes "${fence.rev}". Use a commit SHA, a SHA range (a1b2c3d..e4f5a6b), or leave it empty for uncommitted changes`,
       });
     }
-    sourceDiffs.push({ id: fence.id, type: "diff", fileDiff });
+    changeRevs.push(fence.rev);
   }
-  const annotations = fences.flatMap((fence) => {
-    if (fence.kind === "callstack") return fence.lines;
-    if (fence.kind === "mermaid")
-      return fence.annotations.map((link) => link.annotation);
-    return [];
-  });
+  const annotations = [
+    ...fences.flatMap((fence) => {
+      if (fence.kind === "callstack") return fence.lines;
+      if (fence.kind === "mermaid")
+        return fence.annotations.map((link) => link.annotation);
+      return [];
+    }),
+    ...collectReferences(nodes),
+  ];
   const mermaidFences = fences.flatMap((fence) =>
     fence.kind === "mermaid" ? [fence] : [],
   );
@@ -136,44 +138,24 @@ export function parseViewerDocument(source: string, path = "spec") {
   for (const line of annotations) {
     if (line.text.includes("[[")) {
       return new DiffmapAnnotationError({
-        reason: `Invalid reference in "${line.text}". Use [[id:old|new:start-end]] or [[path#symbol]]`,
+        reason: `Invalid reference in "${line.text}". Use [[path]], [[path#symbol]], [[path#L12-L30]], or [[<commit>:path#L12-L30]]; source-diff patch references were removed`,
       });
     }
     for (const ref of line.references) {
-      if (ref.kind === "file") {
-        if (
-          ref.start !== undefined &&
-          (!Number.isSafeInteger(ref.start) ||
-            !Number.isSafeInteger(ref.end) ||
-            ref.end! < ref.start)
-        ) {
-          return new DiffmapAnnotationError({
-            reason: `Invalid file range in "${ref.path}"`,
-          });
-        }
-        continue;
-      }
-      const diff = sourceDiffs.find((item) => item.id === ref.id);
-      if (diff === undefined) {
+      if (ref.kind !== "file") continue;
+      if (ref.rev !== undefined && ref.symbol !== undefined) {
         return new DiffmapAnnotationError({
-          reason: `Unknown source diff "${ref.id}"`,
+          reason: `Symbol references read current files. Use a line range with a commit: [[${ref.rev}:${ref.path}#L12-L30]]`,
         });
       }
-      const inHunk = diff.fileDiff.hunks.some((hunk) => {
-        const start =
-          ref.side === "old" ? hunk.deletionStart : hunk.additionStart;
-        const count =
-          ref.side === "old" ? hunk.deletionCount : hunk.additionCount;
-        return ref.start >= start && ref.end < start + count;
-      });
       if (
-        !Number.isSafeInteger(ref.start) ||
-        !Number.isSafeInteger(ref.end) ||
-        ref.end < ref.start ||
-        !inHunk
+        ref.start !== undefined &&
+        (!Number.isSafeInteger(ref.start) ||
+          !Number.isSafeInteger(ref.end) ||
+          ref.end! < ref.start)
       ) {
         return new DiffmapAnnotationError({
-          reason: `Range ${ref.side}:${ref.start}-${ref.end} is not in a hunk of "${ref.id}"`,
+          reason: `Invalid file range in "${ref.path}"`,
         });
       }
     }
@@ -181,14 +163,12 @@ export function parseViewerDocument(source: string, path = "spec") {
   return {
     nodes,
     headings: collectHeadings(nodes),
-    sourceDiffs,
-    hasReferences: annotations.some(
-      (annotation) => annotation.references.length > 0,
-    ),
+    references: annotations.flatMap((annotation) => annotation.references),
+    changeRevs,
   };
 }
 
-function collectFences(nodes: ViewerNode[]): Fence[] {
+export function collectFences(nodes: ViewerNode[]): Fence[] {
   return nodes.flatMap((node) => {
     if (node.type === "view") return [node.fence];
     if (node.type === "element") return collectFences(node.children);
@@ -196,6 +176,14 @@ function collectFences(nodes: ViewerNode[]): Fence[] {
   });
 }
 
+function collectReferences(nodes: ViewerNode[]): SourceAnnotation[] {
+  return nodes.flatMap((node) => {
+    if (node.type === "reference") return [node.annotation];
+    if (node.type === "element") return collectReferences(node.children);
+    return [];
+  });
+}
+
 function mermaidWhere(source: string, index: number) {
   const line = mermaidFenceLine(source, index);
   if (line === undefined) return `diagram ${index}`;
@@ -283,31 +271,67 @@ function uniqueHeadingId(text: string, usedIds: Set<string>) {
 
 function viewerNodeText(node: ViewerNode): string {
   if (node.type === "text") return node.value;
+  if (node.type === "reference") return node.annotation.text;
   if (node.type !== "element") return "";
   return node.children.map(viewerNodeText).join("");
 }
 
-function fromNode(node: ComarkNode): ViewerNode[] {
+function fromNode(node: ComarkNode, literal = false): ViewerNode[] {
   if (!Array.isArray(node)) {
-    return [{ type: "text", value: node }];
+    return literal ? [{ type: "text", value: node }] : proseText(node);
   }
-  const converted = fromElement(node);
+  const converted = fromElement(node, literal);
   if (converted === undefined) return [];
   if (Array.isArray(converted)) return converted;
   return [converted];
 }
 
+/** Splits `[[path#symbol]]` references out of prose text. */
+function proseText(value: string): ViewerNode[] {
+  const nodes: ViewerNode[] = [];
+  let last = 0;
+  for (const match of value.matchAll(/\[\[([^[\]\n]+)\]\]/g)) {
+    const reference = parseReference(match[1]!);
+    // The removed `[[id:old|new:N]]` patch syntax must fail, not render as text.
+    const removed =
+      reference === undefined && /^[\w-]+:(old|new):\d/.test(match[1]!);
+    if (reference === undefined && !removed) continue;
+    if (match.index > last)
+      nodes.push({ type: "text", value: value.slice(last, match.index) });
+    nodes.push({
+      type: "reference",
+      annotation:
+        reference === undefined
+          ? { text: match[0], references: [] }
+          : { text: referenceLabel(reference, true), references: [reference] },
+    });
+    last = match.index + match[0].length;
+  }
+  if (last < value.length)
+    nodes.push({ type: "text", value: value.slice(last) });
+  return nodes;
+}
+
 function fromElement(
   element: ComarkElement,
+  literal: boolean,
 ): ViewerNode | ViewerNode[] | undefined {
   const [tag, , ...children] = element;
   if (tag === null) return undefined;
-  if (tag === "template") return children.flatMap(fromNode);
+  // Code spans show the syntax literally; links cannot nest a button.
+  const literalChildren = literal || tag === "code" || tag === "a";
+  if (tag === "template")
+    return children.flatMap((child) => fromNode(child, literalChildren));
   if (tag === "pre") {
     return fenceView(stringAttr(element, "language"), comarkText(children));
   }
   if (tag === "mermaid") return fenceView("mermaid", comarkText(children));
   if (tag === "callstack") return fenceView("callstack", comarkText(children));
+  if (tag === "changes")
+    return fenceView(
+      "changes",
+      stringAttr(element, "rev") ?? comarkText(children),
+    );
   if (tag === "diff") {
     const path = stringAttr(element, "path");
     const lang = path === undefined ? "diff" : `diff:${path}`;
@@ -315,7 +339,9 @@ function fromElement(
   }
   if (tag === "file") return fileView(element, children);
   if (tag === "html") return htmlView(element, children);
-  const convertedChildren = children.flatMap(fromNode);
+  const convertedChildren = children.flatMap((child) =>
+    fromNode(child, literalChildren),
+  );
   return {
     type: "element",
     tag,
@@ -352,7 +378,7 @@ function fileView(
   children: ComarkNode[],
 ): ViewerView | ViewerNode[] {
   const path = stringAttr(element, "path");
-  if (path === undefined) return children.flatMap(fromNode);
+  if (path === undefined) return children.flatMap((child) => fromNode(child));
   const start = lineAttr(element, "start");
   const end = lineAttr(element, "end");
   // MDC ::file with no range loads the whole file.

package/src/serve.ts

@@ -7,6 +7,7 @@ import { DiffmapFileError, DiffmapServeError } from "./errors.js";
 import { extractTitle } from "./extractDocument.js";
 import { parseViewerDocument } from "./parseViewer.js";
 import { findDefinition, readSourceReference } from "./definitions.js";
+import { listDeltas, readChanges, readDocumentChanges } from "./git.js";
 import {
   registerRunningDiffmap,
   unregisterRunningDiffmap,
@@ -58,6 +59,8 @@ export async function startServer(input: StartServerInput) {
 
   const parsed = parseViewerDocument(source, filePath);
   if (parsed instanceof Error) return parsed;
+  const changes = await readDocumentChanges(workspaceRoot, parsed);
+  if (changes instanceof Error) return changes;
 
   const title = extractTitle(source);
 
@@ -106,7 +109,9 @@ export async function startServer(input: StartServerInput) {
               (pathname === "/" ||
                 pathname === "/__diffmap/file" ||
                 pathname === "/__diffmap/definition" ||
-                pathname === "/__diffmap/source")
+                pathname === "/__diffmap/source" ||
+                pathname === "/__diffmap/changes" ||
+                pathname === "/__diffmap/deltas")
             ) {
               inactivityTimer?.refresh();
             }
@@ -261,6 +266,34 @@ async function handleDiffmapRequest(input: {
     );
     return;
   }
+  if (parsed.pathname === "/__diffmap/changes" && input.method === "GET") {
+    const changes = await readChanges(
+      input.workspaceRoot,
+      parsed.searchParams.get("rev") ?? "",
+    );
+    input.res.statusCode = changes instanceof Error ? 400 : 200;
+    input.res.setHeader("content-type", "application/json; charset=utf-8");
+    input.res.end(
+      JSON.stringify(
+        changes instanceof Error ? { error: changes.message } : { changes },
+      ),
+    );
+    return;
+  }
+  if (parsed.pathname === "/__diffmap/deltas" && input.method === "GET") {
+    const deltas = await listDeltas(
+      input.workspaceRoot,
+      parsed.searchParams.get("rev") ?? undefined,
+    );
+    input.res.statusCode = deltas instanceof Error ? 400 : 200;
+    input.res.setHeader("content-type", "application/json; charset=utf-8");
+    input.res.end(
+      JSON.stringify(
+        deltas instanceof Error ? { error: deltas.message } : { deltas },
+      ),
+    );
+    return;
+  }
   if (parsed.pathname === "/__diffmap/shutdown" && input.method === "POST") {
     input.res.statusCode = 200;
     input.res.setHeader("content-type", "text/plain; charset=utf-8");

package/src/share.ts

@@ -1,11 +1,19 @@
 import { execFile } from "node:child_process";
 import fs from "node:fs/promises";
+import os from "node:os";
 import path from "node:path";
 import { promisify } from "node:util";
 import { DiffmapFileError, DiffmapShareError } from "./errors.js";
 import { extractTitle } from "./extractDocument.js";
 import { extractGistId, gistViewerUrl } from "./gist/route.ts";
-import { parseViewerDocument } from "./parseViewer.js";
+import { GIST_CHANGES_FILE, GIST_FILES_FILE } from "./changes.js";
+import { readSourceReference } from "./definitions.js";
+import { readChanges, readDocumentChanges } from "./git.js";
+import {
+  collectFences,
+  parseViewerDocument,
+  type ViewerDocument,
+} from "./parseViewer.js";
 
 const execFileAsync = promisify(execFile);
 
@@ -17,6 +25,7 @@ export type ShareResult = {
 
 export async function shareMarkdownFile(input: {
   filePath: string;
+  workspaceRoot: string;
   isPublic: boolean;
 }) {
   const filePath = path.resolve(input.filePath);
@@ -32,6 +41,19 @@ export async function shareMarkdownFile(input: {
 
   const parsed = parseViewerDocument(source, filePath);
   if (parsed instanceof Error) return parsed;
+  // The hosted viewer has no git, so the gist carries a snapshot of each commit.
+  const changes = await readDocumentChanges(input.workspaceRoot, parsed);
+  if (changes instanceof Error) return changes;
+  // An uncommitted changes card shows the tree as it is when you share.
+  for (const rev of parsed.changeRevs) {
+    if (changes.has(rev)) continue;
+    const loaded = await readChanges(input.workspaceRoot, rev);
+    if (loaded instanceof Error) return loaded;
+    changes.set(rev, loaded);
+  }
+  // It has no files either, so excerpts and references without a commit read these.
+  const files = readDocumentFiles(input.workspaceRoot, parsed);
+  if (files instanceof Error) return files;
 
   const auth = await runGh(["auth", "status"]);
   if (auth instanceof DiffmapShareError) return auth;
@@ -39,8 +61,25 @@ export async function shareMarkdownFile(input: {
   const args = ["gist", "create"];
   if (input.isPublic) args.push("--public");
   args.push("--desc", extractTitle(source), filePath);
+  const snapshots = [
+    { name: GIST_CHANGES_FILE, value: Object.fromEntries(changes) },
+    { name: GIST_FILES_FILE, value: files },
+  ].filter((snapshot) => Object.keys(snapshot.value).length > 0);
+  const snapshotDir =
+    snapshots.length === 0
+      ? undefined
+      : await fs.mkdtemp(path.join(os.tmpdir(), "diffmap-share-"));
+  if (snapshotDir !== undefined) {
+    for (const snapshot of snapshots) {
+      const snapshotPath = path.join(snapshotDir, snapshot.name);
+      await fs.writeFile(snapshotPath, JSON.stringify(snapshot.value));
+      args.push(snapshotPath);
+    }
+  }
 
   const created = await runGh(args);
+  if (snapshotDir !== undefined)
+    await fs.rm(snapshotDir, { recursive: true, force: true });
   if (created instanceof DiffmapShareError) return created;
 
   const combined = `${created.stderr}\n${created.stdout}`;
@@ -63,6 +102,28 @@ export async function shareMarkdownFile(input: {
   };
 }
 
+/** Current contents of every file an excerpt or a reference without a commit reads, by path. */
+function readDocumentFiles(root: string, document: ViewerDocument) {
+  const paths = new Set<string>();
+  for (const reference of document.references) {
+    if (reference.kind === "file" && reference.rev === undefined)
+      paths.add(reference.path);
+  }
+  for (const fence of collectFences(document.nodes)) {
+    if (fence.kind === "file") paths.add(fence.path);
+  }
+  const files: Record<string, string> = {};
+  for (const filePath of paths) {
+    const read = readSourceReference(
+      root,
+      new URLSearchParams({ path: filePath }),
+    );
+    if (read instanceof Error) return read;
+    files[filePath] = read.contents;
+  }
+  return files;
+}
+
 async function runGh(args: string[]) {
   try {
     return await execFileAsync("gh", args, {

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",