+ );
+}
+
+function SkeletonFile({ groups }: { groups: readonly (readonly string[])[] }) {
+ return (
+
+
+
+
-
-
- );
-};
-
-// -------------------------------------------------------------------
-// Lazy file diff wrapper
-// -------------------------------------------------------------------
-
-/**
- * Wraps a single `
` with an IntersectionObserver so the
- * heavy component (Shadow DOM + shiki highlighting) is only mounted
- * once the placeholder scrolls into or near the viewport.
- *
- * Once mounted the component stays mounted. We never unmount a
- * FileDiff that the user has already scrolled past, which avoids
- * layout shifts and repeated highlighting work.
- */
-interface LazyFileDiffProps {
- fileDiff: FileDiffMetadata;
- options: ComponentProps["options"];
- lineAnnotations?: DiffLineAnnotation[];
- renderAnnotation?: (annotation: DiffLineAnnotation) => ReactNode;
- selectedLines?: SelectedLineRange | null;
-}
-
-function LazyFileDiffInner({
- fileDiff,
- options,
- lineAnnotations,
- renderAnnotation: renderAnnotationProp,
- selectedLines,
-}: LazyFileDiffProps) {
- const placeholderRef = useRef(null);
- const [visible, setVisible] = useState(false);
-
- useEffect(() => {
- const el = placeholderRef.current;
- if (!el || visible) {
- return;
- }
- const observer = new IntersectionObserver(
- ([entry]) => {
- if (entry.isIntersecting) {
- setVisible(true);
- observer.disconnect();
- }
- },
- // Pre-load files that are within one viewport-height of
- // the visible area so they are ready before the user
- // scrolls to them.
- { rootMargin: "100% 0px" },
- );
- observer.observe(el);
- return () => observer.disconnect();
- }, [visible]);
-
- if (!visible) {
- return (
-
-
- );
- }
-
- return (
-
+ {groups.map((lines, groupIndex) => (
+
+ {groupIndex > 0 &&
+ ))}
+
+
);
}
-// memo requires stable props; the React Compiler provides them here.
-const LazyFileDiff = memo(LazyFileDiffInner);
+const DIFF_SKELETON_FILES = [
+ [
+ ["w-3/4", "w-1/2", "w-5/6"],
+ ["w-2/3", "w-2/5", "w-3/4", "w-1/3"],
+ ],
+ [
+ ["w-1/2", "w-5/6"],
+ ["w-2/3", "w-1/3"],
+ ],
+] as const;
-// -------------------------------------------------------------------
-// Main component
-// -------------------------------------------------------------------
+function DiffViewerSkeleton() {
+ return (
+
+ {DIFF_SKELETON_FILES.map((groups, fileIndex) => (
+
+ );
+}
export const DiffViewer: FC
= ({
parsedFiles,
@@ -522,6 +412,7 @@ export const DiffViewer: FC = ({
diffStyle,
onLineNumberClick,
onLineSelected,
+ onLineSelectionChange,
getLineAnnotations,
getSelectedLines,
renderAnnotation,
@@ -529,260 +420,164 @@ export const DiffViewer: FC = ({
onScrollToFileComplete,
}) => {
const theme = useTheme();
+ const codeViewRef = useRef>(null);
const isDark = theme.palette.mode === "dark";
+ const [activeFile, setActiveFile] = useState(null);
- const base = getDiffViewerOptions(isDark);
- const diffOptions = {
- ...base,
- diffStyle,
- // Extend the base CSS to make file headers sticky so they
- // remain visible while scrolling through long diffs.
- unsafeCSS: `${base.unsafeCSS ?? ""} ${STICKY_HEADER_CSS}`,
- };
-
- const fileOptions = {
- ...diffOptions,
- overflow: "wrap" as const,
- enableLineSelection: true,
- enableHoverUtility: true,
- onLineSelected() {
- // TODO: Make this add context to the input so the
- // user can type.
- },
- };
-
- // When the parent provides per-file callbacks (e.g. line click
- // handlers for comment inputs), build options per file. Otherwise
- // share a single stable object to avoid unnecessary re-highlights.
- const hasPerFileCallbacks = Boolean(onLineNumberClick || onLineSelected);
-
- const getOptionsForFile = (fileName: string) => ({
- ...diffOptions,
- overflow: "wrap" as const,
- enableLineSelection: true,
- enableHoverUtility: true,
- ...(onLineNumberClick && {
- onLineNumberClick: (props: {
- lineNumber: number;
- annotationSide: "additions" | "deletions";
- }) => onLineNumberClick(fileName, props),
- }),
- onLineSelected: onLineSelected
- ? (
- range: {
- start: number;
- end: number;
- side?: "additions" | "deletions";
- endSide?: "additions" | "deletions";
- } | null,
- ) => onLineSelected(fileName, range)
- : () => {
- // TODO: Make this add context to the input.
- },
- });
-
- const fileTree = buildFileTree(parsedFiles);
-
- // Sort diff blocks in the same order the file tree displays them
- // (directories first, then alphabetical) so the rendering is
- // consistent regardless of whether the sidebar is visible.
- const sortedFiles = (() => {
- const order = new Map();
- const walk = (nodes: FileTreeNode[]) => {
- for (const node of nodes) {
- if (node.type === "file") {
- order.set(node.fullPath, order.size);
- } else {
- walk(node.children);
- }
- }
- };
- walk(fileTree);
- return [...parsedFiles].sort(
- (a, b) => (order.get(a.name) ?? 0) - (order.get(b.name) ?? 0),
- );
- })();
-
- // Pre-compute per-file options so each LazyFileDiff receives a
- // stable reference and avoids re-highlighting on parent re-render.
- const perFileOptions = (() => {
- if (!hasPerFileCallbacks) return null;
- const map = new Map["options"]>();
- for (const file of sortedFiles) {
- map.set(file.name, getOptionsForFile(file.name));
- }
- return map;
- })();
-
- // Pre-compute per-file line annotations for the same reason.
- const perFileAnnotations = (() => {
- if (!getLineAnnotations) return null;
- return new Map(
- sortedFiles
- .map((f) => [f.name, getLineAnnotations(f.name)] as const)
- .filter(
- (entry): entry is [string, DiffLineAnnotation[]] =>
- entry[1].length > 0,
- ),
- );
- })();
-
- // Pre-compute per-file selected lines so each LazyFileDiff
- // receives a stable reference. Without this, calling
- // getSelectedLines during render returns a new object every
- // time, which busts the memo comparator and forces an
- // expensive Shadow DOM + shiki re-highlight.
- const perFileSelectedLines = (() => {
- if (!getSelectedLines) return null;
- return new Map(
- sortedFiles
- .map((f) => [f.name, getSelectedLines(f.name)] as const)
- .filter(
- (entry): entry is [string, SelectedLineRange] => entry[1] != null,
- ),
- );
- })();
-
- // ---------------------------------------------------------------
- // Container width measurement via ResizeObserver so we can decide
- // whether to show the file tree sidebar without a prop from the
- // parent.
- // ---------------------------------------------------------------
- const [containerWidth, setContainerWidth] = useState(0);
+ // Measure the diff container so the file tree only appears when there is
+ // enough horizontal room, rather than keying off the viewport width.
const [containerEl, setContainerEl] = useState(null);
-
+ const [containerWidth, setContainerWidth] = useState(0);
useEffect(() => {
if (!containerEl) return;
setContainerWidth(containerEl.getBoundingClientRect().width);
- const ro = new ResizeObserver(([entry]) => {
+ const observer = new ResizeObserver(([entry]) => {
setContainerWidth(entry.contentRect.width);
});
- ro.observe(containerEl);
- return () => ro.disconnect();
+ observer.observe(containerEl);
+ return () => observer.disconnect();
}, [containerEl]);
- const showTree =
- (isExpanded || containerWidth >= FILE_TREE_THRESHOLD) &&
- sortedFiles.length > 0;
+ const showTree = isExpanded || containerWidth >= FILE_TREE_THRESHOLD;
+ const handleScroll = useActiveFileTracking({
+ enabled: showTree,
+ onActiveFileChange: (path) =>
+ setActiveFile((current) => (current === path ? current : path)),
+ });
- const diffViewportRef = useRef(null);
- const { treeActiveFile, setFileRef, handleFileClick } = useActiveFileTracking(
- {
- viewportRef: diffViewportRef,
- sortedFiles,
- enabled: showTree,
- scrollToFile,
- onScrollToFileComplete,
+ const options: ComponentProps>["options"] = {
+ diffStyle,
+ diffIndicators: "bars",
+ overflow: "scroll",
+ stickyHeaders: true,
+ layout: { paddingTop: 0, paddingBottom: 0, gap: 0 },
+ hunkSeparators: "line-info",
+ itemMetrics: diffViewerMetrics,
+ unsafeCSS: SEPARATOR_CSS,
+ themeType: isDark ? "dark" : "light",
+ theme: isDark ? "github-dark-high-contrast" : "github-light",
+ enableLineSelection: true,
+ enableGutterUtility: true,
+ onLineNumberClick: (props, item) => {
+ if (item.type === "diff" && props.type === "diff-line") {
+ onLineNumberClick?.(item.item.id, props);
+ }
},
+ onLineSelected: (range, item) => {
+ if (item.type === "diff") {
+ onLineSelected?.(item.item.id, range);
+ }
+ },
+ onLineSelectionChange: (range, item) => {
+ if (item.type === "diff") {
+ onLineSelectionChange?.(item.item.id, range);
+ }
+ },
+ onGutterUtilityClick: (range, item) => {
+ if (item.type === "diff") {
+ onLineSelected?.(item.item.id, range);
+ }
+ },
+ };
+
+ // Render the diff in the same order the sidebar tree lays out its leaves so
+ // scrolling moves monotonically down the tree.
+ const sortedFiles = [...parsedFiles].sort((a, b) =>
+ compareTreePaths(a.name, b.name),
);
- // ---------------------------------------------------------------
- // Loading state
- // ---------------------------------------------------------------
+ const items: CodeViewItem[] = sortedFiles.map((fileDiff) => {
+ const annotations = getLineAnnotations?.(fileDiff.name);
+ return {
+ id: fileDiff.name,
+ type: "diff",
+ fileDiff,
+ annotations,
+ version: annotationsVersion(annotations),
+ };
+ });
+
+ const selectedLines = (() => {
+ if (!getSelectedLines) return undefined;
+ for (const fileDiff of sortedFiles) {
+ const range = getSelectedLines(fileDiff.name);
+ if (range) return { id: fileDiff.name, range };
+ }
+ return null;
+ })();
+
+ const canScroll = !isLoading && !error && items.length > 0;
+
+ useEffect(() => {
+ if (!scrollToFile) return;
+ // CodeView is not mounted while loading/erroring/empty, so the ref is
+ // null. Skip the scroll without signalling completion so the parent
+ // keeps the pending target and retries once the view is ready.
+ if (!canScroll || !codeViewRef.current) return;
+ codeViewRef.current.scrollTo({
+ type: "item",
+ id: scrollToFile,
+ align: "start",
+ behavior: "instant",
+ });
+ onScrollToFileComplete?.();
+ }, [scrollToFile, onScrollToFileComplete, canScroll]);
+
if (isLoading) {
- return (
-
-
- {Array.from({ length: 3 }, (_, i) => (
-
-
- ))}
-
-
-
+
+ {emptyMessage}
);
}
- // ---------------------------------------------------------------
- // Main render
- // ---------------------------------------------------------------
return (
- {/* Diff contents */}
- {sortedFiles.length === 0 ? (
-
- {emptyMessage}
-
- ) : (
-
- {/* File tree sidebar */}
- {showTree && (
-
-
- {fileTree.map((node) => (
-
-
- )}
-
- {sortedFiles.map((fileDiff, i) => {
- const isLast = i === sortedFiles.length - 1;
- return (
- setFileRef(fileDiff.name, el)}
- className={cn(
- "[contain:layout_style]",
- i > 0 &&
- "border-0 border-t border-solid border-border-default",
- )}
- >
-
- {isLast && (
-
- {`${sortedFiles.length} ${sortedFiles.length === 1 ? "file" : "files"} changed`}
-
- )}
-
-
+ {showTree && (
+
+ {
+ setActiveFile(fileName);
+ codeViewRef.current?.scrollTo({
+ type: "item",
+ id: fileName,
+ align: "start",
+ behavior: "instant",
+ });
+ }}
+ />
+
)}
+
+ item.type === "diff" ? (
+
);
};
diff --git a/site/src/pages/AgentsPage/components/DiffViewer/annotationsVersion.test.ts b/site/src/pages/AgentsPage/components/DiffViewer/annotationsVersion.test.ts
new file mode 100644
index 0000000000..ba8724715f
--- /dev/null
+++ b/site/src/pages/AgentsPage/components/DiffViewer/annotationsVersion.test.ts
@@ -0,0 +1,44 @@
+import type { DiffLineAnnotation } from "@pierre/diffs/react";
+import { describe, expect, it } from "vitest";
+import { annotationsVersion } from "./DiffViewer";
+
+const annotation = (
+ lineNumber: number,
+ side: "additions" | "deletions" = "additions",
+): DiffLineAnnotation
=> ({
+ side,
+ lineNumber,
+ metadata: "active-input",
+});
+
+describe("annotationsVersion", () => {
+ it("is 0 when there are no annotations", () => {
+ expect(annotationsVersion(undefined)).toBe(0);
+ expect(annotationsVersion([])).toBe(0);
+ });
+
+ it("changes when the line moves but the count stays the same", () => {
+ // The regression: a single active comment box moving between lines keeps
+ // the count at 1, so a count-based version would not change and CodeView
+ // would skip the update.
+ expect(annotationsVersion([annotation(5)])).not.toBe(
+ annotationsVersion([annotation(10)]),
+ );
+ });
+
+ it("changes when only the side flips", () => {
+ expect(annotationsVersion([annotation(5, "additions")])).not.toBe(
+ annotationsVersion([annotation(5, "deletions")]),
+ );
+ });
+
+ it("is stable for identical annotation content", () => {
+ expect(annotationsVersion([annotation(7, "deletions")])).toBe(
+ annotationsVersion([annotation(7, "deletions")]),
+ );
+ });
+
+ it("differs from the empty state for any annotation", () => {
+ expect(annotationsVersion([annotation(0)])).not.toBe(0);
+ });
+});
diff --git a/site/src/pages/AgentsPage/components/DiffViewer/compareTreePaths.test.ts b/site/src/pages/AgentsPage/components/DiffViewer/compareTreePaths.test.ts
new file mode 100644
index 0000000000..50c512278d
--- /dev/null
+++ b/site/src/pages/AgentsPage/components/DiffViewer/compareTreePaths.test.ts
@@ -0,0 +1,98 @@
+import { describe, expect, it } from "vitest";
+import { compareTreePaths, treeSortComparator } from "./DiffViewer";
+
+// Mirrors how @pierre/trees feeds its sort comparator: it sorts one flat list
+// of every path entry (files and the intermediate directories), then builds
+// the tree. Expands file paths into that entry set so a test can sort it with
+// treeSortComparator and read back the resulting file (leaf) order.
+function treeFileOrder(files: readonly string[]): string[] {
+ const entries = new Map<
+ string,
+ {
+ basename: string;
+ depth: number;
+ isDirectory: boolean;
+ path: string;
+ segments: string[];
+ }
+ >();
+ for (const file of files) {
+ const segments = file.split("/");
+ for (let i = 0; i < segments.length; i++) {
+ const slice = segments.slice(0, i + 1);
+ const path = slice.join("/");
+ entries.set(path, {
+ basename: slice[slice.length - 1],
+ depth: slice.length,
+ isDirectory: i < segments.length - 1,
+ path,
+ segments: slice,
+ });
+ }
+ }
+ return [...entries.values()]
+ .sort(treeSortComparator)
+ .filter((entry) => !entry.isDirectory)
+ .map((entry) => entry.path);
+}
+
+describe("compareTreePaths", () => {
+ it("orders directories before sibling files and keeps dot-prefixed first", () => {
+ const sorted = [".config/a.ts", "b.ts", "a/z.ts", "b/c/d.ts"].sort(
+ compareTreePaths,
+ );
+
+ expect(sorted).toEqual([".config/a.ts", "a/z.ts", "b/c/d.ts", "b.ts"]);
+ });
+
+ it("sorts dot-prefixed names before other names at the same level", () => {
+ expect([".env", "app.ts", ".gitignore"].sort(compareTreePaths)).toEqual([
+ ".env",
+ ".gitignore",
+ "app.ts",
+ ]);
+ });
+
+ it("breaks ties case-insensitively", () => {
+ expect(["Beta.ts", "alpha.ts", "Alpha.ts"].sort(compareTreePaths)).toEqual([
+ "alpha.ts",
+ "Alpha.ts",
+ "Beta.ts",
+ ]);
+ });
+
+ it("is a stable total order regardless of input order", () => {
+ const files = [
+ "src/zeta.ts",
+ "src/alpha/index.ts",
+ "README.md",
+ ".github/workflows/ci.yml",
+ "src/alpha.ts",
+ ];
+ const forward = [...files].sort(compareTreePaths);
+ const reversed = [...files].reverse().sort(compareTreePaths);
+ expect(reversed).toEqual(forward);
+ expect(forward).toEqual([
+ ".github/workflows/ci.yml",
+ "src/alpha/index.ts",
+ "src/alpha.ts",
+ "src/zeta.ts",
+ "README.md",
+ ]);
+ });
+
+ it("matches the tree's leaf order so the diff and sidebar stay in sync", () => {
+ const files = [
+ "src/zeta.ts",
+ "lib/a.ts",
+ "src/alpha/index.ts",
+ "README.md",
+ ".github/workflows/ci.yml",
+ "src/alpha.ts",
+ "lib/b/c.ts",
+ ];
+ // The sidebar tree (treeSortComparator over the full entry set) and the
+ // flat diff list (compareTreePaths) must produce the same file order.
+ expect([...files].sort(compareTreePaths)).toEqual(treeFileOrder(files));
+ });
+});
diff --git a/site/src/pages/AgentsPage/components/DiffViewer/useActiveFileTracking.test.ts b/site/src/pages/AgentsPage/components/DiffViewer/useActiveFileTracking.test.ts
new file mode 100644
index 0000000000..955a5709ad
--- /dev/null
+++ b/site/src/pages/AgentsPage/components/DiffViewer/useActiveFileTracking.test.ts
@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+import { getActiveFile, type ScrollViewer } from "./useActiveFileTracking";
+
+// Builds a ScrollViewer stub from a path -> top map. A top of `undefined`
+// models an item the library has not measured yet.
+function viewerFrom(
+ tops: ReadonlyArray,
+): ScrollViewer {
+ const map = new Map(tops);
+ return {
+ getRenderedItems: () => tops.map(([id]) => ({ id })),
+ getTopForItem: (id) => map.get(id),
+ };
+}
+
+describe("getActiveFile", () => {
+ it("picks the item closest to the top that has crossed it", () => {
+ const viewer = viewerFrom([
+ ["a.ts", 0],
+ ["b.ts", 300],
+ ["c.ts", 900],
+ ]);
+ // At scrollTop 500, b.ts (top 300) is the last file whose start has
+ // scrolled past the fold; c.ts (top 900) is still below it.
+ expect(getActiveFile(500, viewer)).toBe("b.ts");
+ });
+
+ it("treats an item within the threshold slack as already active", () => {
+ const viewer = viewerFrom([
+ ["a.ts", 0],
+ // 4px below the fold, inside ACTIVE_FILE_SCROLL_THRESHOLD.
+ ["b.ts", 104],
+ ]);
+ expect(getActiveFile(100, viewer)).toBe("b.ts");
+ });
+
+ it("excludes items past the threshold slack", () => {
+ const viewer = viewerFrom([
+ ["a.ts", 0],
+ // 5px below the fold, just outside the threshold.
+ ["b.ts", 105],
+ ]);
+ expect(getActiveFile(100, viewer)).toBe("a.ts");
+ });
+
+ it("falls back to the first rendered item when none have crossed", () => {
+ const viewer = viewerFrom([
+ ["a.ts", 300],
+ ["b.ts", 400],
+ ]);
+ expect(getActiveFile(0, viewer)).toBe("a.ts");
+ });
+
+ it("ignores unmeasured items", () => {
+ const viewer = viewerFrom([
+ ["a.ts", -10],
+ ["b.ts", undefined],
+ ]);
+ expect(getActiveFile(0, viewer)).toBe("a.ts");
+ });
+
+ it("returns undefined when nothing is rendered", () => {
+ expect(getActiveFile(0, viewerFrom([]))).toBeUndefined();
+ });
+});
diff --git a/site/src/pages/AgentsPage/components/DiffViewer/useActiveFileTracking.ts b/site/src/pages/AgentsPage/components/DiffViewer/useActiveFileTracking.ts
index 2e659f7c66..6ccc0adf8c 100644
--- a/site/src/pages/AgentsPage/components/DiffViewer/useActiveFileTracking.ts
+++ b/site/src/pages/AgentsPage/components/DiffViewer/useActiveFileTracking.ts
@@ -1,146 +1,72 @@
-import type { FileDiffMetadata } from "@pierre/diffs";
-import { type RefObject, useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
-// Leaves a 5% strip at the top of the viewport as the "active file" band.
-const VIEWPORT_BOTTOM_MARGIN_RATIO = 0.95;
+// Pixels of slack added when matching a file against the scroll offset, so a
+// file counts as active while its sticky header is still pinned at the top.
+const ACTIVE_FILE_SCROLL_THRESHOLD = 4;
-interface UseActiveFileTrackingOptions {
- viewportRef: RefObject;
- sortedFiles: readonly FileDiffMetadata[];
- enabled: boolean;
- scrollToFile?: string | null;
- onScrollToFileComplete?: () => void;
+// Minimal view of the @pierre/diffs CodeView instance handed to `onScroll`.
+// `getRenderedItems` only returns the small set of currently virtualized
+// items, so deriving the active file from it avoids scanning every file.
+export interface ScrollViewer {
+ getRenderedItems(): readonly { id: string }[];
+ getTopForItem(id: string): number | undefined;
}
-interface UseActiveFileTrackingReturn {
- treeActiveFile: string | null;
- setFileRef: (name: string, el: HTMLDivElement | null) => void;
- handleFileClick: (name: string) => void;
+// The active file is the rendered item closest to the top edge that has
+// already crossed it (largest top still at or above the fold). Exported for
+// unit tests that pin the closest-to-top selection logic.
+export function getActiveFile(
+ scrollTop: number,
+ viewer: ScrollViewer,
+): string | undefined {
+ const rendered = viewer.getRenderedItems();
+ const limit = scrollTop + ACTIVE_FILE_SCROLL_THRESHOLD;
+ let activePath: string | undefined;
+ let activeTop = Number.NEGATIVE_INFINITY;
+ for (const item of rendered) {
+ const top = viewer.getTopForItem(item.id);
+ if (top !== undefined && top <= limit && top > activeTop) {
+ activeTop = top;
+ activePath = item.id;
+ }
+ }
+ return activePath ?? rendered[0]?.id;
}
+/**
+ * Reports the diff file scrolled to the top as the user scrolls. Returns a
+ * CodeView `onScroll` handler. Tree-agnostic: callers decide what to do with
+ * the active path (the diff viewer feeds it to the sidebar selection).
+ */
export function useActiveFileTracking({
- viewportRef,
- sortedFiles,
enabled,
- scrollToFile,
- onScrollToFileComplete,
-}: UseActiveFileTrackingOptions): UseActiveFileTrackingReturn {
- const fileRefs = useRef>(new Map());
- const [treeActiveFile, setTreeActiveFile] = useState(null);
-
- const [viewportHeight, setViewportHeight] = useState(0);
-
- // viewportRef is a stable RefObject whose identity never changes, so
- // an effect that depends on it won't re-run when .current transitions
- // from null to the actual DOM node (e.g. after a loading state).
- // Keep a state mirror that flips exactly once when the element mounts.
- const [viewportEl, setViewportEl] = useState(null);
- useEffect(() => {
- setViewportEl(viewportRef.current);
- });
+ onActiveFileChange,
+}: {
+ enabled: boolean;
+ onActiveFileChange: (path: string) => void;
+}) {
+ const rafRef = useRef(null);
useEffect(() => {
- if (!viewportEl) return;
- setViewportHeight(viewportEl.clientHeight);
- const ro = new ResizeObserver(([entry]) => {
- setViewportHeight(Math.round(entry.contentRect.height));
+ return () => {
+ if (rafRef.current !== null) {
+ cancelAnimationFrame(rafRef.current);
+ }
+ };
+ }, []);
+
+ return (scrollTop: number, viewer: ScrollViewer) => {
+ if (!enabled) return;
+ if (rafRef.current !== null) {
+ cancelAnimationFrame(rafRef.current);
+ }
+ // Coalesce bursts of scroll events into one update per frame.
+ rafRef.current = requestAnimationFrame(() => {
+ rafRef.current = null;
+ const next = getActiveFile(scrollTop, viewer);
+ if (next) {
+ onActiveFileChange(next);
+ }
});
- ro.observe(viewportEl);
- return () => ro.disconnect();
- }, [viewportEl]);
-
- const sortedFilesRef = useRef(sortedFiles);
- useEffect(() => {
- sortedFilesRef.current = sortedFiles;
- });
-
- const fileListKey = sortedFiles.map((f) => f.name).join("\0");
-
- const setFileRef = (name: string, el: HTMLDivElement | null) => {
- if (el) {
- fileRefs.current.set(name, el);
- } else {
- fileRefs.current.delete(name);
- }
- };
-
- useEffect(() => {
- if (!enabled || fileListKey === "" || viewportHeight === 0) return;
- if (!viewportEl) return;
-
- const bottomMargin = Math.round(
- viewportHeight * VIEWPORT_BOTTOM_MARGIN_RATIO,
- );
-
- const intersecting = new Set();
-
- const observer = new IntersectionObserver(
- (entries) => {
- for (const entry of entries) {
- const name = (entry.target as HTMLElement).dataset.fileName;
- if (!name) continue;
- if (entry.isIntersecting) {
- intersecting.add(name);
- } else {
- intersecting.delete(name);
- }
- }
- for (const file of sortedFilesRef.current) {
- if (intersecting.has(file.name)) {
- setTreeActiveFile(file.name);
- break;
- }
- }
- },
- {
- root: viewportEl,
- // Observe only the top ~5% strip of the viewport height.
- rootMargin: `0px 0px -${bottomMargin}px 0px`,
- threshold: 0,
- },
- );
-
- for (const [, el] of fileRefs.current.entries()) {
- observer.observe(el);
- }
-
- return () => observer.disconnect();
- }, [enabled, fileListKey, viewportEl, viewportHeight]);
-
- const handleFileClick = (name: string) => {
- const el = fileRefs.current.get(name);
- if (el) {
- el.scrollIntoView({ block: "start", behavior: "instant" });
- setTreeActiveFile(name);
- }
- };
-
- // biome-ignore lint/correctness/useExhaustiveDependencies: fileListKey is an intentional trigger dep. The effect reads fileRefs (a mutable ref) and must retry when the file list changes so a previously-unmounted element can be found.
- useEffect(() => {
- if (!scrollToFile) return;
- const el = fileRefs.current.get(scrollToFile);
- if (el) {
- el.scrollIntoView({ block: "start", behavior: "instant" });
- setTreeActiveFile(scrollToFile);
- onScrollToFileComplete?.();
- return;
- }
- // Element not found. If the target isn't even in the current file
- // list (e.g. stale chip after the diff changed), complete the
- // request so the parent can clear its scroll target. Otherwise
- // the target is present but not yet mounted; wait for fileListKey
- // to change again.
- const existsInFileList = sortedFilesRef.current.some(
- (f) => f.name === scrollToFile,
- );
- if (!existsInFileList) {
- onScrollToFileComplete?.();
- }
- }, [scrollToFile, onScrollToFileComplete, fileListKey]);
-
- return {
- treeActiveFile,
- setFileRef,
- handleFileClick,
};
}
diff --git a/site/src/pages/AgentsPage/components/GitPanel/GitPanel.stories.tsx b/site/src/pages/AgentsPage/components/GitPanel/GitPanel.stories.tsx
index c7b7789381..1bf84e69c4 100644
--- a/site/src/pages/AgentsPage/components/GitPanel/GitPanel.stories.tsx
+++ b/site/src/pages/AgentsPage/components/GitPanel/GitPanel.stories.tsx
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, fn, spyOn, userEvent, within } from "storybook/test";
+import { expect, fn, spyOn, userEvent, waitFor, within } from "storybook/test";
import { API } from "#/api/api";
import type {
ChatDiffContents,
@@ -334,35 +334,19 @@ export const InlineCommentInput: Story = {
});
},
play: async ({ canvasElement }) => {
- // Wait for the diff to load and render inside Shadow DOM.
- // The line numbers live inside @pierre/diffs FileDiff web
- // components, so we need to wait a bit for them to mount.
- await new Promise((resolve) => setTimeout(resolve, 2000));
-
- // Find a line number element inside a Shadow DOM diff viewer.
- // The diff renders in shadow roots, so we look for the
- // host elements and query inside their shadow DOMs.
- const diffHosts = canvasElement.querySelectorAll("[data-diffs]");
-
- for (const host of diffHosts) {
- const shadow = host.shadowRoot;
- if (!shadow) continue;
-
- // Look for a line number cell — they have data-line-number.
- const lineNumber = shadow.querySelector(
- "[data-line-number]",
- ) as HTMLElement | null;
- if (lineNumber) {
- await userEvent.click(lineNumber);
- break;
+ const canvas = within(canvasElement);
+ const lineNumber = await waitFor(() => {
+ for (const host of canvasElement.querySelectorAll("diffs-container")) {
+ const target = host.shadowRoot?.querySelector(
+ "[data-column-number]",
+ ) as HTMLElement | null;
+ if (target) return target;
}
- }
+ throw new Error("No rendered diff line number found");
+ });
- // Verify the inline prompt appeared.
- const textarea = canvasElement.querySelector("textarea");
- if (textarea) {
- expect(textarea).toBeInTheDocument();
- }
+ await userEvent.click(lineNumber);
+ expect(canvas.getByRole("textbox")).toBeInTheDocument();
},
};
diff --git a/site/src/pages/AgentsPage/utils/countChangedLines.ts b/site/src/pages/AgentsPage/utils/countChangedLines.ts
new file mode 100644
index 0000000000..e27b2b32d4
--- /dev/null
+++ b/site/src/pages/AgentsPage/utils/countChangedLines.ts
@@ -0,0 +1,12 @@
+import type { FileDiffMetadata } from "@pierre/diffs";
+
+/** Sums added and deleted line counts across every hunk in a file diff. */
+export function countChangedLines(fileDiff: FileDiffMetadata) {
+ let additions = 0;
+ let deletions = 0;
+ for (const hunk of fileDiff.hunks) {
+ additions += hunk.additionLines;
+ deletions += hunk.deletionLines;
+ }
+ return { additions, deletions };
+}