@tanishqkancharla/diffmap 0.1.3 → 0.1.4

package/src/viewer/CallStackDiff.tsx

@@ -50,7 +50,12 @@ export function CallStackDiff(
         );
         if (line.references.length === 0) {
           return (
-            <div key={index} className={row} data-change={sign}>
+            <div
+              key={index}
+              className={row}
+              data-change={sign}
+              title={description}
+            >
               {content}
             </div>
           );
@@ -63,7 +68,7 @@ export function CallStackDiff(
             data-change={sign}
             aria-pressed={props.selectedAnnotation === line}
             aria-controls="source-diff-panel"
-            title="Show source changes"
+            title={description}
             aria-label={description}
             onClick={() => props.onSelectAnnotation(line)}
           >
@@ -81,20 +86,24 @@ const styles = {
     spacing.padding({ y: 2 }),
     {
       backgroundColor: backgroundColor.app,
-      overflowX: "auto",
+      overflowX: "hidden",
+      maxWidth: "100%",
     },
   ),
   row: style(
     spacing.padding({ x: 3 }),
     {
       display: "flex",
+      alignItems: "center",
       gap: "12px",
+      boxSizing: "border-box",
       width: "100%",
-      minWidth: "max-content",
+      maxWidth: "100%",
+      minWidth: 0,
+      overflow: "hidden",
       textAlign: "left",
       font: "inherit",
       lineHeight: "1.6",
-      whiteSpace: "pre",
       color: "inherit",
       background: "transparent",
       border: 0,
@@ -109,9 +118,19 @@ const styles = {
       "& .stack-content": {
         display: "flex",
         alignItems: "stretch",
+        flex: "1 1 auto",
+        minWidth: 0,
         minHeight: "28px",
+        overflow: "hidden",
+      },
+      "& .stack-label": {
+        flex: "1 1 auto",
+        minWidth: 0,
+        paddingBlock: "3px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
       },
-      "& .stack-label": { paddingBlock: "3px" },
       "& .stack-comment": { color: colors.gray[11], fontWeight: 400 },
       "& .tree-prefix": { display: "inline-flex", alignSelf: "stretch" },
       "& [data-branch]": {
@@ -147,6 +166,7 @@ const styles = {
       "& > .diff-sign": { alignSelf: "center" },
       "& > .source-indicator": {
         alignSelf: "center",
+        flexShrink: 0,
         marginLeft: "auto",
         color: colors.blue[11],
       },

package/src/viewer/FileExcerpt.tsx

@@ -4,6 +4,8 @@ import { useTheme } from "maui";
 import { useStyles } from "purse-styles";
 import { pierreFileOptions, pierreShell } from "./pierre.ts";
 import { useViewerMode } from "./viewerMode.ts";
+import { useGitHubPin } from "../github/pin.ts";
+import { fetchPinnedBlob } from "../github/fetchRepo.ts";
 
 type FileExcerptPayload = {
   path: string;
@@ -40,8 +42,33 @@ export function FileExcerpt(props: {
 function useFileExcerpt(input: { path: string; start: number; end: number }) {
   const [excerpt, setExcerpt] = useState<FileExcerptPayload>();
   const mode = useViewerMode();
+  const pin = useGitHubPin();
   useEffect(() => {
     if (mode === "gist") return;
+    if (mode === "github") {
+      if (pin === undefined) return;
+      // oxlint-disable-next-line typescript/no-floating-promises -- React effects cannot await; this request owns the excerpt update.
+      void fetchPinnedBlob(pin, input.path)
+        .then((contents) => {
+          if (contents instanceof Error) return undefined;
+          const lines = contents.split(/\r?\n/);
+          const start = input.start;
+          const end = Math.min(input.end, lines.length);
+          return {
+            path: input.path,
+            start,
+            end,
+            contents: lines.slice(start - 1, end).join("\n"),
+          } satisfies FileExcerptPayload;
+        })
+        .then((value) => {
+          if (value !== undefined) setExcerpt(value);
+        })
+        .catch((cause) => {
+          console.warn("diffmap file excerpt failed", cause);
+        });
+      return;
+    }
     const params = new URLSearchParams({
       path: input.path,
       start: String(input.start),
@@ -60,6 +87,6 @@ function useFileExcerpt(input: { path: string; start: number; end: number }) {
       .catch((cause) => {
         console.warn("diffmap file excerpt failed", cause);
       });
-  }, [input.path, input.start, input.end, mode]);
+  }, [input.path, input.start, input.end, mode, pin]);
   return excerpt;
 }

package/src/viewer/SourceDiffPanel.tsx

@@ -22,12 +22,19 @@ import {
   type SourceReference,
 } from "../annotations.js";
 import type { SourceDefinition } from "../definitions.js";
+import { useGistPin } from "../gist/pin.ts";
+import { useGitHubPin } from "../github/pin.ts";
 import {
   matchingSourceDiff,
   requestSource,
   useSourceReference,
 } from "./sourceNavigation.js";
 import { pierreDiffOptions, sourceSelectionCss } from "./pierre.js";
+import {
+  sourcePanelOrigin,
+  sourcePanelPath,
+  sourcePanelPin,
+} from "./sourceHeader.ts";
 import { useViewerMode } from "./viewerMode.ts";
 
 export type SourceSelection = {
@@ -66,12 +73,13 @@ export function SourceDiffPanel(props: {
   const definition = history.at(-1);
   const panel = useStyles(styles.panel);
   const header = useStyles(styles.header);
+  const titleRow = useStyles(styles.titleRow);
+  const titleClass = useStyles(styles.title);
+  const pinClass = useStyles(styles.pin);
   const links = useStyles(styles.links);
   const code = useStyles(styles.code);
-  const options = pierreDiffOptions({
-    themeType: resolvedTheme,
-    disableFileHeader: false,
-  });
+  const github = useGitHubPin();
+  const gist = useGistPin();
   const selection = props.selection;
   const source = useSourceReference(selection?.reference);
   const resolvedFile = source instanceof Error ? undefined : source;
@@ -93,7 +101,9 @@ export function SourceDiffPanel(props: {
       ? navigation.status
       : source instanceof Error
         ? source.message
-        : selection?.reference.kind === "file" && source === undefined
+        : selection?.reference.kind === "file" &&
+            source === undefined &&
+            mode !== "gist"
           ? "Opening source…"
           : undefined;
   const selectedLines = useMemo<CodeViewLineSelection | null>(() => {
@@ -113,6 +123,32 @@ export function SourceDiffPanel(props: {
     };
   }, [selection, file, linkedDiff]);
 
+  const openPath = sourcePanelPath({
+    filePath: file?.path,
+    reference: selection?.reference,
+    items: props.items,
+    linkedDiffId: linkedDiff?.id,
+  });
+  const origin = sourcePanelOrigin({
+    showingFile: file !== undefined,
+    reference: selection?.reference,
+    items: props.items,
+    linkedDiffId: linkedDiff?.id,
+  });
+  const pin =
+    openPath === undefined
+      ? { kind: "none" as const }
+      : sourcePanelPin({
+          origin,
+          path: openPath,
+          github,
+          gist,
+        });
+  const options = pierreDiffOptions({
+    themeType: resolvedTheme,
+    disableFileHeader: openPath !== undefined,
+  });
+
   useEffect(() => {
     if (selectedLines === null) return;
     viewer.current?.scrollTo({
@@ -128,7 +164,7 @@ export function SourceDiffPanel(props: {
     event,
     context,
   ) => {
-    if (mode === "gist") return;
+    if (mode !== "local") return;
     if (!event.metaKey && !event.ctrlKey) return;
     event.preventDefault();
     const item = context.item;
@@ -178,28 +214,53 @@ export function SourceDiffPanel(props: {
 
   return (
     <aside id="source-diff-panel" aria-label="Source changes" className={panel}>
-      <div className={header}>
-        <strong>
-          {definition !== undefined
-            ? "Symbol definition"
-            : file !== undefined
-              ? "Source file"
-              : "Source changes"}
-        </strong>
-        {definition !== undefined && (
-          <Button
-            variant="quiet"
-            onClick={() => {
-              request.current++;
-              setNavigation({
-                selection,
-                history: history.slice(0, -1),
-                status: undefined,
-              });
-            }}
+      <div className={header} data-diffmap-kind="source-header">
+        {openPath !== undefined && (
+          <div className={titleRow}>
+            <div className={titleClass} title={openPath}>
+              {openPath}
+            </div>
+            {definition !== undefined && (
+              <Button
+                variant="quiet"
+                onClick={() => {
+                  request.current++;
+                  setNavigation({
+                    selection,
+                    history: history.slice(0, -1),
+                    status: undefined,
+                  });
+                }}
+              >
+                {history.length === 1 ? "Back to reference" : "Back"}
+              </Button>
+            )}
+          </div>
+        )}
+        {pin.kind === "github" && (
+          <a
+            className={pinClass}
+            href={pin.href}
+            data-diffmap-pin="github"
+            title={pin.label}
+          >
+            {pin.label}
+          </a>
+        )}
+        {pin.kind === "gist" && (
+          <a
+            className={pinClass}
+            href={pin.href}
+            data-diffmap-pin="gist"
+            title={pin.label}
           >
-            {history.length === 1 ? "Back to reference" : "Back"}
-          </Button>
+            {pin.label}
+          </a>
+        )}
+        {pin.kind === "spec" && (
+          <span className={pinClass} data-diffmap-pin="spec">
+            {pin.label}
+          </span>
         )}
         {mode === "local" && (
           <span>⌘-click or Ctrl-click a symbol to go to its definition.</span>
@@ -210,32 +271,27 @@ export function SourceDiffPanel(props: {
             Select a linked stack row or diagram element to open its source.
           </span>
         ) : (
-          <>
-            <span>
-              {selection.annotation.text.replace(/^[+ -]/, "").trim()}
-            </span>
-            {selection.annotation.references.length > 1 && (
-              <div className={links} aria-label="Linked changes">
-                {selection.annotation.references.map((reference, index) => (
-                  <Button
-                    key={index}
-                    variantColor="blue"
-                    variant={
-                      reference === selection.reference ? "primary" : "quiet"
-                    }
-                    onClick={() =>
-                      props.onSelect({
-                        annotation: selection.annotation,
-                        reference,
-                      })
-                    }
-                  >
-                    {referenceLabel(reference)}
-                  </Button>
-                ))}
-              </div>
-            )}
-          </>
+          selection.annotation.references.length > 1 && (
+            <div className={links} aria-label="Linked changes">
+              {selection.annotation.references.map((reference, index) => (
+                <Button
+                  key={index}
+                  variantColor="blue"
+                  variant={
+                    reference === selection.reference ? "primary" : "quiet"
+                  }
+                  onClick={() =>
+                    props.onSelect({
+                      annotation: selection.annotation,
+                      reference,
+                    })
+                  }
+                >
+                  {referenceLabel(reference)}
+                </Button>
+              ))}
+            </div>
+          )
         )}
       </div>
       <CodeView
@@ -289,12 +345,33 @@ const styles = {
     text({ size: "sm", color: "lowContrast" }),
     {
       gap: "6px",
-      overflowWrap: "anywhere",
+      minWidth: 0,
       maxHeight: "35%",
       overflowY: "auto",
       flexShrink: 0,
     },
   ),
+  titleRow: style(flex({ direction: "row", align: "center" }), {
+    gap: "6px",
+    minWidth: 0,
+  }),
+  title: style(text({ size: "sm", fontWeight: 600, color: "highContrast" }), {
+    minWidth: 0,
+    flex: "1 1 auto",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  }),
+  pin: style(text({ size: "sm", color: "lowContrast" }), {
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    textDecoration: "none",
+    "&:is(a):hover": {
+      textDecoration: "underline",
+    },
+  }),
   links: style(flex({ direction: "row" }), { gap: "6px", flexWrap: "wrap" }),
   code: style({
     flex: "1 1 auto",

package/src/viewer/TableOfContents.tsx

@@ -164,6 +164,7 @@ const styles = {
     marginTop: "auto",
     marginBottom: "auto",
     overflowY: "auto",
+    backgroundColor: "transparent",
     "@media (max-width: 1100px)": {
       display: "none",
     },

package/src/viewer/ViewerApp.tsx

@@ -32,7 +32,9 @@ export function ViewerApp(props: {
   const viewerDocument = props.document;
   const meta = useViewerMeta(props.mode === "local");
   const [selection, setSelection] = useState<SourceSelection>();
-  const [showDiffPanel, setShowDiffPanel] = useState(false);
+  const [showDiffPanel, setShowDiffPanel] = useState(
+    viewerDocument.sourceDiffs.length > 0,
+  );
   const hasSourceDiffs =
     viewerDocument.sourceDiffs.length > 0 || viewerDocument.hasReferences;
   const diffPanelOpen = hasSourceDiffs && showDiffPanel;
@@ -189,6 +191,7 @@ const styles = {
     minHeight: 0,
     minWidth: 0,
     overflow: "hidden",
+    backgroundColor: backgroundColor.app,
     "&[data-has-source-diffs='true']": {
       "--diffmap-columns":
         "minmax(0, max-content) minmax(0, 1fr) minmax(0, 1fr)",

package/src/viewer/main.tsx

@@ -1,8 +1,9 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import { MauiProvider } from "maui";
-import { viewerDocument } from "virtual:diffmap";
+import { MauiProvider, P } from "maui";
+import { parseError, viewerDocument } from "virtual:diffmap";
 import { ViewerApp } from "./ViewerApp.tsx";
+import { GistStatus } from "../gist/GistStatus.tsx";
 import "./styles.css";
 
 const root = document.getElementById("root");
@@ -11,7 +12,13 @@ if (root === null) throw new Error("diffmap root element is missing");
 createRoot(root).render(
   <StrictMode>
     <MauiProvider>
-      <ViewerApp document={viewerDocument} mode="local" />
+      {parseError !== null || viewerDocument === null ? (
+        <GistStatus title="Could not parse this spec">
+          <P>{parseError ?? "Unknown parse error."}</P>
+        </GistStatus>
+      ) : (
+        <ViewerApp document={viewerDocument} mode="local" />
+      )}
     </MauiProvider>
   </StrictMode>,
 );

package/src/viewer/sourceHeader.test.ts

@@ -0,0 +1,131 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import type { CodeViewDiffItem } from "@pierre/diffs";
+import {
+  sourcePanelOrigin,
+  sourcePanelPath,
+  sourcePanelPin,
+} from "./sourceHeader.ts";
+
+const sha = "ef78bf4678d2e76a7c8bcc4087fcadf347a1fcdf";
+const github = {
+  owner: "tanishqkancharla",
+  repo: "diffmap",
+  sha,
+};
+const gist = {
+  gistId: "a3d2fe2b2e0b1422a4fd5378baced900",
+  file: "walkthrough.md",
+  htmlUrl: "https://gist.github.com/a3d2fe2b2e0b1422a4fd5378baced900",
+};
+
+function diffItem(id: string, name: string): CodeViewDiffItem {
+  return {
+    id,
+    type: "diff",
+    fileDiff: { name } as CodeViewDiffItem["fileDiff"],
+  };
+}
+
+test("github file pin is owner/repo @ shortsha linking to the blob at the pin SHA", () => {
+  const path = "src/cli.ts";
+  const pin = sourcePanelPin({
+    origin: "file",
+    path,
+    github,
+  });
+  assert.deepEqual(pin, {
+    kind: "github",
+    label: "tanishqkancharla/diffmap @ ef78bf4",
+    href: `https://github.com/tanishqkancharla/diffmap/blob/${sha}/src/cli.ts`,
+  });
+});
+
+test("embedded source-diff says from this spec, not a GitHub blob", () => {
+  const items = [diffItem("cli", "src/cli.ts")];
+  const origin = sourcePanelOrigin({
+    showingFile: false,
+    reference: { kind: "file", path: "src/cli.ts" },
+    items,
+    linkedDiffId: "cli",
+  });
+  assert.equal(origin, "spec-diff");
+  assert.deepEqual(sourcePanelPin({ origin, path: "src/cli.ts", github }), {
+    kind: "spec",
+    label: "from this spec",
+  });
+});
+
+test("PR file diffs pin to the repo blob, not from this spec", () => {
+  const items = [diffItem("pr:src/cli.ts", "src/cli.ts")];
+  const origin = sourcePanelOrigin({
+    showingFile: false,
+    reference: { kind: "file", path: "src/cli.ts" },
+    items,
+  });
+  assert.equal(origin, "repo-diff");
+  const pin = sourcePanelPin({ origin, path: "src/cli.ts", github });
+  assert.equal(pin.kind, "github");
+  if (pin.kind !== "github") return;
+  assert.equal(pin.label, "tanishqkancharla/diffmap @ ef78bf4");
+  assert.match(
+    pin.href,
+    /\/blob\/ef78bf4678d2e76a7c8bcc4087fcadf347a1fcdf\/src\/cli.ts$/,
+  );
+});
+
+test("gist pin is gist id / filename, not a fake repo", () => {
+  const pin = sourcePanelPin({
+    origin: "file",
+    path: "src/cli.ts",
+    gist,
+  });
+  assert.deepEqual(pin, {
+    kind: "gist",
+    label: "a3d2fe2b2e0b1422a4fd5378baced900 / walkthrough.md",
+    href: "https://gist.github.com/a3d2fe2b2e0b1422a4fd5378baced900",
+  });
+});
+
+test("gist embedded source-diff says from this spec", () => {
+  const origin = sourcePanelOrigin({
+    showingFile: false,
+    items: [diffItem("serve", "src/serve.ts")],
+    reference: { kind: "diff", id: "serve", side: "new", start: 1, end: 3 },
+  });
+  assert.equal(origin, "spec-diff");
+  assert.deepEqual(sourcePanelPin({ origin, path: "src/serve.ts", gist }), {
+    kind: "spec",
+    label: "from this spec",
+  });
+});
+
+test("local file has no pin line", () => {
+  assert.deepEqual(sourcePanelPin({ origin: "file", path: "src/cli.ts" }), {
+    kind: "none",
+  });
+});
+
+test("sourcePanelPath prefers the open file, then the linked diff, then the reference", () => {
+  const items = [diffItem("cli", "src/cli.ts")];
+  assert.equal(
+    sourcePanelPath({ filePath: "src/registry.ts", items }),
+    "src/registry.ts",
+  );
+  assert.equal(
+    sourcePanelPath({
+      items,
+      linkedDiffId: "cli",
+      reference: { kind: "file", path: "src/other.ts" },
+    }),
+    "src/cli.ts",
+  );
+  assert.equal(
+    sourcePanelPath({
+      items,
+      reference: { kind: "file", path: "src/cli.ts" },
+    }),
+    "src/cli.ts",
+  );
+  assert.equal(sourcePanelPath({ items: [] }), undefined);
+});

package/src/viewer/sourceHeader.ts

@@ -0,0 +1,103 @@
+import type { CodeViewDiffItem } from "@pierre/diffs";
+import type { SourceReference } from "../annotations.js";
+import type { GistPin } from "../gist/pin.ts";
+import { githubGistUrl } from "../gist/route.ts";
+import type { GitHubPin } from "../github/pin.ts";
+import { githubBlobUrl } from "../github/route.ts";
+
+const PR_DIFF_PREFIX = "pr:";
+
+export type SourcePanelOrigin = "file" | "spec-diff" | "repo-diff";
+
+export type SourcePanelPin =
+  | { kind: "github"; label: string; href: string }
+  | { kind: "gist"; label: string; href: string }
+  | { kind: "spec"; label: "from this spec" }
+  | { kind: "none" };
+
+/** Pull-files diffs are repo patches at the pin SHA; everything else is embedded in the spec. */
+export function isSpecEmbeddedDiff(item: CodeViewDiffItem) {
+  return !item.id.startsWith(PR_DIFF_PREFIX);
+}
+
+export function sourcePanelPath(input: {
+  filePath?: string;
+  reference?: SourceReference;
+  items: CodeViewDiffItem[];
+  linkedDiffId?: string;
+}): string | undefined {
+  if (input.filePath !== undefined && input.filePath.length > 0) {
+    return input.filePath;
+  }
+  if (input.linkedDiffId !== undefined) {
+    const linked = input.items.find((item) => item.id === input.linkedDiffId);
+    if (linked !== undefined) return linked.fileDiff.name;
+  }
+  const ref = input.reference;
+  if (ref === undefined) return undefined;
+  if (ref.kind === "file") return ref.path;
+  return input.items.find((item) => item.id === ref.id)?.fileDiff.name;
+}
+
+export function sourcePanelOrigin(input: {
+  showingFile: boolean;
+  reference?: SourceReference;
+  items: CodeViewDiffItem[];
+  linkedDiffId?: string;
+}): SourcePanelOrigin {
+  if (input.showingFile) return "file";
+  const ref = input.reference;
+  const focused =
+    input.linkedDiffId !== undefined
+      ? input.items.find((item) => item.id === input.linkedDiffId)
+      : ref?.kind === "diff"
+        ? input.items.find((item) => item.id === ref.id)
+        : ref?.kind === "file"
+          ? input.items.find((item) => item.fileDiff.name === ref.path)
+          : undefined;
+  if (focused !== undefined) {
+    return isSpecEmbeddedDiff(focused) ? "spec-diff" : "repo-diff";
+  }
+  if (input.items.some(isSpecEmbeddedDiff)) return "spec-diff";
+  if (input.items.length > 0) return "repo-diff";
+  return "file";
+}
+
+/**
+ * Pin line for the source panel. A hosted spec is one SHA; blob links use that
+ * SHA for the open path. Embedded `source-diff` is from the spec, not a blob.
+ */
+export function sourcePanelPin(input: {
+  origin: SourcePanelOrigin;
+  path: string | undefined;
+  github?: GitHubPin;
+  gist?: GistPin;
+}): SourcePanelPin {
+  if (input.origin === "spec-diff") {
+    return { kind: "spec", label: "from this spec" };
+  }
+  if (input.github !== undefined && input.path !== undefined) {
+    const shortSha = input.github.sha.slice(0, 7);
+    return {
+      kind: "github",
+      label: `${input.github.owner}/${input.github.repo} @ ${shortSha}`,
+      href: githubBlobUrl(
+        input.github.owner,
+        input.github.repo,
+        input.github.sha,
+        input.path,
+      ),
+    };
+  }
+  if (input.gist !== undefined) {
+    return {
+      kind: "gist",
+      label: `${input.gist.gistId} / ${input.gist.file}`,
+      href:
+        input.gist.htmlUrl.length > 0
+          ? input.gist.htmlUrl
+          : githubGistUrl(input.gist.gistId),
+    };
+  }
+  return { kind: "none" };
+}