@agimon-ai/doompi-git 0.0.1-alpha.61 → 0.0.1-alpha.63

package/dist/extensions/web.mjs

@@ -1,6 +1,6 @@
 import { apiResponse, createApiClient, defineActivityGroup, defineApiRoutes, defineChannelFile, defineFill, defineGlobalStore, defineLeaderBinding, defineRepositorySettingsPanel, defineSessionStore, defineToolRenderer, defineWebLifecycle, defineWebPlugin, sessionApiAddress } from "@agimon-ai/doompi-core/web";
 import { AlertIcon, BranchIcon, Button, ChevronDownIcon, ChevronRightIcon, CloseIcon, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DiffView, Dot, DropdownMenuItem, EmptyState, Input, Label, MessageIcon, MessageItem, MessageItemBody, MessageItemHeader, OptionRow, RadioGroup, RadioGroupCard, ReviewCommentDraft, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, ShieldIcon, Spinner, StatusBadge, buildReviewPrompt, reviewCommentAnchor, toolTone } from "@agimon-ai/doompi-web-components";
-import { createElement, useCallback, useEffect, useRef, useState } from "react";
+import { createElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { sealedTransport } from "@agimon-ai/doompi-web-security/browser";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useStore } from "@tanstack/react-store";
@@ -1937,7 +1937,31 @@ function GitSyncBar({ changes, mergeBase, pending, error, errorTarget, onSync, o
 		]
 	});
 }
+//#endregion
+//#region src/extensions/workspaces/sessions/(frontend)/_components/GitReviewView.tsx
+/**
+* The review tab, drawn from what it is handed: the sync header, the changed
+* files on the left, every diff stacked on the right, and one footer that
+* sends every comment as a single message.
+*
+* DESIGN PATTERNS:
+* - Like a pull request's file view. Picking a file in the list scrolls to it;
+*   each file's header stays pinned while its diff scrolls past.
+* - Only nearby file bodies mount and load; distant files retain their headers
+*   and measured-height placeholders.
+* - A comment is drawn under the line it is about, on the side it is about.
+*   The open draft sits in the same place, so writing happens in context.
+* - Only UI state lives here (the open draft, which files are collapsed, which
+*   is active). Data and comments come in as props; the panel owns fetching.
+*
+* AVOID:
+* - Clearing comments here. The owner clears them once the host took the send.
+*/
+const PICK_ALIGNMENT_MS = 300;
+const ESTIMATED_ROW_HEIGHT = 21;
+const MAX_DIFF_ROWS = 5e3;
 const NO_FILES = [];
+const NO_PATHS = /* @__PURE__ */ new Set();
 /** Stable, URL-safe element id for one file's section. */
 function sectionId(index) {
 	return `git-review-file-${String(index)}`;
@@ -1945,37 +1969,117 @@ function sectionId(index) {
 function sideOf(row) {
 	return row.marker === "-" ? "old" : "new";
 }
-function GitReviewView({ sync, summary, files, comments, onLoadFile, onAddComment, onRemoveComment, onSendReview, onDiscard, sendError, initialDraft }) {
+function GitReviewView({ sync, summary, files, comments, onLoadFile, onAddComment, onRemoveComment, onSendReview, onDiscard, onDraftChange, sendError, initialDraft }) {
 	const entries = summary.state === "ready" ? summary.summary.files : NO_FILES;
 	const [openOverride, setOpenOverride] = useState({});
 	const [picked, setPicked] = useState();
-	const activePath = picked ?? entries[0]?.path;
+	const [navigation, setNavigation] = useState();
+	const [proximity, setProximity] = useState({
+		entries: NO_FILES,
+		paths: NO_PATHS
+	});
+	const near = proximity.entries === entries ? proximity.paths : NO_PATHS;
+	const paneRef = useRef(null);
+	const [heights, setHeights] = useState(/* @__PURE__ */ new Map());
+	const pickedAt = useRef(0);
+	const activePath = entries.some((entry) => entry.path === picked) ? picked : entries[0]?.path;
 	const [draft, setDraft] = useState(initialDraft);
 	useEffect(() => {
-		for (const file of entries.slice(0, 20)) if (files[file.path] === void 0) onLoadFile(file.path);
+		const pane = paneRef.current;
+		if (pane === null || typeof IntersectionObserver === "undefined") return;
+		setHeights(/* @__PURE__ */ new Map());
+		let observer;
+		const observe = () => {
+			observer?.disconnect();
+			observer = new IntersectionObserver((changes) => {
+				for (const change of changes) {
+					if (change.isIntersecting) continue;
+					const section = change.target;
+					const path = section.dataset.reviewPath;
+					const body = section.querySelector("[data-review-body=\"measured\"]");
+					if (path !== void 0 && body !== null) {
+						const height = body.offsetHeight;
+						setHeights((measured) => new Map(measured).set(path, height));
+					}
+				}
+				setProximity((current) => {
+					const next = new Set(current.entries === entries ? current.paths : NO_PATHS);
+					for (const change of changes) {
+						const path = change.target.dataset.reviewPath;
+						if (path === void 0) continue;
+						if (change.isIntersecting) next.add(path);
+						else next.delete(path);
+					}
+					return {
+						entries,
+						paths: next
+					};
+				});
+			}, {
+				root: pane,
+				rootMargin: `${String(pane.clientHeight)}px 0px`
+			});
+			for (const section of pane.querySelectorAll("[data-review-path]")) observer.observe(section);
+		};
+		observe();
+		const resize = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(observe);
+		resize?.observe(pane);
+		let frame = 0;
+		const scroll = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				if (Date.now() - pickedAt.current < PICK_ALIGNMENT_MS) return;
+				const rect = pane.getBoundingClientRect();
+				const section = document.elementFromPoint(rect.left + 8, rect.top + 1)?.closest("[data-review-path]");
+				if (section !== null && section !== void 0 && pane.contains(section)) setPicked(section.dataset.reviewPath);
+			});
+		};
+		pane.addEventListener("scroll", scroll, { passive: true });
+		return () => {
+			observer.disconnect();
+			resize?.disconnect();
+			pane.removeEventListener("scroll", scroll);
+			cancelAnimationFrame(frame);
+		};
+	}, [entries]);
+	useLayoutEffect(() => {
+		if (navigation === void 0) return;
+		[...paneRef.current?.querySelectorAll("[data-review-path]") ?? []].find((element) => element.dataset.reviewPath === navigation)?.scrollIntoView({ block: "start" });
+	}, [navigation, openOverride]);
+	useEffect(() => {
+		if (navigation === void 0) return;
+		const timeout = setTimeout(() => setNavigation(void 0), PICK_ALIGNMENT_MS);
+		return () => clearTimeout(timeout);
+	}, [navigation]);
+	useEffect(() => {
+		for (const file of entries) if ((openOverride[file.path] ?? true) && (near.has(file.path) || navigation === file.path || draft?.path === file.path) && files[file.path] === void 0) onLoadFile(file.path);
 	}, [
 		entries,
 		files,
+		near,
+		navigation,
+		draft,
+		openOverride,
 		onLoadFile
 	]);
 	const commentCounts = {};
 	for (const comment of comments) commentCounts[comment.path] = (commentCounts[comment.path] ?? 0) + 1;
-	const isOpen = (path, index) => openOverride[path] ?? index < 20;
+	const isOpen = (path) => openOverride[path] ?? true;
 	const open = (path) => {
 		setOpenOverride((current) => current[path] === true ? current : {
 			...current,
 			[path]: true
 		});
-		if (files[path] === void 0) onLoadFile(path);
 	};
 	const pick = (path) => {
+		if (!entries.some((entry) => entry.path === path)) return;
+		pickedAt.current = Date.now();
 		setPicked(path);
+		setNavigation(path);
 		open(path);
-		const index = entries.findIndex((file) => file.path === path);
-		globalThis.document?.getElementById(sectionId(index))?.scrollIntoView({ block: "start" });
 	};
-	const toggle = (path, index) => {
-		if (isOpen(path, index)) setOpenOverride((current) => ({
+	const toggle = (path) => {
+		if (isOpen(path)) setOpenOverride((current) => ({
 			...current,
 			[path]: false
 		}));
@@ -1993,6 +2097,7 @@ function GitReviewView({ sync, summary, files, comments, onLoadFile, onAddCommen
 			body: body.trim()
 		});
 		setDraft(void 0);
+		onDraftChange?.(false);
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		"data-testid": "git-review-panel",
@@ -2035,6 +2140,7 @@ function GitReviewView({ sync, summary, files, comments, onLoadFile, onAddCommen
 					onPick: pick,
 					...activePath === void 0 ? {} : { activePath }
 				}), /* @__PURE__ */ jsxs("div", {
+					ref: paneRef,
 					"data-testid": "git-review-diffs",
 					className: "min-h-0 min-w-0 flex-1 overflow-y-auto",
 					children: [summary.summary.truncated ? /* @__PURE__ */ jsx("p", {
@@ -2044,19 +2150,25 @@ function GitReviewView({ sync, summary, files, comments, onLoadFile, onAddCommen
 						id: sectionId(index),
 						entry: file,
 						state: files[file.path],
-						collapsed: !isOpen(file.path, index),
+						collapsed: !isOpen(file.path),
+						mounted: near.has(file.path) || navigation === file.path || draft?.path === file.path,
+						placeholderHeight: heights.get(file.path) ?? (file.binary ? 40 : Math.min(MAX_DIFF_ROWS, file.added + file.removed + 6) * ESTIMATED_ROW_HEIGHT),
 						comments: comments.filter((comment) => comment.path === file.path),
 						draft: draft?.path === file.path ? draft.selection : void 0,
-						onToggle: () => toggle(file.path, index),
+						onToggle: () => toggle(file.path),
 						onSelect: (selection) => {
 							setPicked(file.path);
 							setDraft({
 								path: file.path,
 								selection
 							});
+							onDraftChange?.(true);
 						},
 						onSubmitDraft: submitDraft,
-						onCancelDraft: () => setDraft(void 0),
+						onCancelDraft: () => {
+							setDraft(void 0);
+							onDraftChange?.(false);
+						},
 						onRemoveComment,
 						onRetry: () => onLoadFile(file.path)
 					}, file.path))]
@@ -2111,7 +2223,7 @@ const STATUS_WORD = {
 	conflicted: "conflicted"
 };
 /** One file: a pinned header, then its diff with comments drawn under the lines they are about. */
-function FileSection({ id, entry, state, collapsed, comments, draft, onToggle, onSelect, onSubmitDraft, onCancelDraft, onRemoveComment, onRetry }) {
+function FileSection({ id, entry, state, collapsed, mounted, placeholderHeight, comments, draft, onToggle, onSelect, onSubmitDraft, onCancelDraft, onRemoveComment, onRetry }) {
 	const renderAfterRow = (row) => {
 		const side = sideOf(row);
 		const here = comments.filter((comment) => (comment.side ?? "new") === side && (comment.endLine ?? comment.startLine) === row.line);
@@ -2162,6 +2274,7 @@ function FileSection({ id, entry, state, collapsed, comments, draft, onToggle, o
 	};
 	return /* @__PURE__ */ jsxs("section", {
 		id,
+		"data-review-path": entry.path,
 		"data-testid": `git-review-file-${entry.path}`,
 		className: "border-b border-doom-border-soft",
 		children: [/* @__PURE__ */ jsxs(Button, {
@@ -2208,39 +2321,46 @@ function FileSection({ id, entry, state, collapsed, comments, draft, onToggle, o
 					]
 				})
 			]
-		}), collapsed ? null : state === void 0 || state.state === "loading" ? /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 px-4 py-3",
-			children: [/* @__PURE__ */ jsx(Spinner, {
-				className: "h-3 w-3 text-doom-faint",
-				label: `loading ${entry.path}`
-			}), /* @__PURE__ */ jsx("span", {
-				className: "text-2xs text-doom-faint",
-				children: "loading diff…"
-			})]
-		}) : state.state === "error" ? /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2 px-4 py-3",
-			children: [/* @__PURE__ */ jsx("span", {
-				role: "alert",
-				className: "text-2xs text-doom-red",
-				children: state.error
-			}), /* @__PURE__ */ jsx(Button, {
-				variant: "ghost",
-				size: "xs",
-				onClick: onRetry,
-				children: "retry"
-			})]
-		}) : state.diff.binary ? /* @__PURE__ */ jsx("p", {
-			className: "px-4 py-3 text-2xs text-doom-faint",
-			children: "binary file, not drawn"
-		}) : state.diff.tooLarge ? /* @__PURE__ */ jsx("p", {
-			className: "px-4 py-3 text-2xs text-doom-faint",
-			children: "this diff is too large to draw here"
-		}) : /* @__PURE__ */ jsx(DiffView, {
-			hunks: state.diff.hunks,
-			testId: `git-review-diff-${id}`,
-			onSelect,
-			renderAfterRow,
-			className: "py-1"
+		}), collapsed ? null : !mounted ? /* @__PURE__ */ jsx("div", {
+			"aria-hidden": true,
+			style: { height: placeholderHeight }
+		}) : /* @__PURE__ */ jsx("div", {
+			"data-review-body": state === void 0 || state.state === "loading" ? "loading" : "measured",
+			style: state === void 0 || state.state === "loading" ? { minHeight: placeholderHeight } : void 0,
+			children: state === void 0 || state.state === "loading" ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-4 py-3",
+				children: [/* @__PURE__ */ jsx(Spinner, {
+					className: "h-3 w-3 text-doom-faint",
+					label: `loading ${entry.path}`
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-2xs text-doom-faint",
+					children: "loading diff…"
+				})]
+			}) : state.state === "error" ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 px-4 py-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					role: "alert",
+					className: "text-2xs text-doom-red",
+					children: state.error
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "xs",
+					onClick: onRetry,
+					children: "retry"
+				})]
+			}) : state.diff.binary ? /* @__PURE__ */ jsx("p", {
+				className: "px-4 py-3 text-2xs text-doom-faint",
+				children: "binary file, not drawn"
+			}) : state.diff.tooLarge ? /* @__PURE__ */ jsx("p", {
+				className: "px-4 py-3 text-2xs text-doom-faint",
+				children: "this diff is too large to draw here"
+			}) : /* @__PURE__ */ jsx(DiffView, {
+				hunks: state.diff.hunks,
+				testId: `git-review-diff-${id}`,
+				onSelect,
+				renderAfterRow,
+				className: "py-1"
+			})
 		})]
 	});
 }
@@ -2278,7 +2398,11 @@ function GitReviewPanel({ sessionId, sendSessionFrame }) {
 	const [files, setFiles] = useState({});
 	const [sendError, setSendError] = useState();
 	const [dismissedError, setDismissedError] = useState();
+	const [draftSnapshot, setDraftSnapshot] = useState();
 	const changes = activity.changes;
+	const generation = useRef(0);
+	const pendingFiles = useRef(/* @__PURE__ */ new Map());
+	const readyGeneration = useRef(false);
 	const fingerprint = JSON.stringify([
 		changes?.branch,
 		changes?.base,
@@ -2287,11 +2411,20 @@ function GitReviewPanel({ sessionId, sendSessionFrame }) {
 		changes?.files,
 		changes?.rebase?.conflicts.length
 	]);
+	const refreshFingerprint = draftSnapshot?.sessionId === sessionId ? draftSnapshot.fingerprint : fingerprint;
 	useEffect(() => {
+		generation.current += 1;
+		readyGeneration.current = false;
+		const pending = pendingFiles.current;
+		for (const request of pending.values()) request.abort();
+		pending.clear();
+		setSummary({ state: "loading" });
+		setFiles({});
 		if (sessionId === null) return;
 		const controller = new AbortController();
 		fetchReviewSummary(sessionId, controller.signal).then((result) => {
 			if (controller.signal.aborted) return;
+			readyGeneration.current = result.ok;
 			setSummary(result.ok ? {
 				state: "ready",
 				summary: result.summary
@@ -2307,19 +2440,31 @@ function GitReviewPanel({ sessionId, sendSessionFrame }) {
 				error: error instanceof Error ? error.message : "The changes could not be read."
 			});
 		});
-		return () => controller.abort();
-	}, [sessionId, fingerprint]);
+		return () => {
+			controller.abort();
+			generation.current += 1;
+			readyGeneration.current = false;
+			for (const request of pending.values()) request.abort();
+			pending.clear();
+		};
+	}, [sessionId, refreshFingerprint]);
 	const loadFile = useCallback((path) => {
-		if (sessionId === null) return;
+		if (sessionId === null || !readyGeneration.current || pendingFiles.current.has(path)) return;
+		const requestGeneration = generation.current;
+		const controller = new AbortController();
+		pendingFiles.current.set(path, controller);
 		setFiles((current) => ({
 			...current,
 			[path]: { state: "loading" }
 		}));
-		const settle = (state) => setFiles((current) => ({
-			...current,
-			[path]: state
-		}));
-		fetchReviewFile(sessionId, path).then((result) => settle(result.ok ? {
+		const settle = (state) => {
+			if (controller.signal.aborted || requestGeneration !== generation.current) return;
+			setFiles((current) => ({
+				...current,
+				[path]: state
+			}));
+		};
+		fetchReviewFile(sessionId, path, controller.signal).then((result) => settle(result.ok ? {
 			state: "ready",
 			diff: result.diff
 		} : {
@@ -2328,7 +2473,9 @@ function GitReviewPanel({ sessionId, sendSessionFrame }) {
 		})).catch((error) => settle({
 			state: "error",
 			error: error instanceof Error ? error.message : "The diff could not be read."
-		}));
+		})).finally(() => {
+			if (pendingFiles.current.get(path) === controller) pendingFiles.current.delete(path);
+		});
 	}, [sessionId]);
 	if (sessionId === null) return null;
 	const branch = summary.state === "ready" ? summary.summary.branch : changes?.branch;
@@ -2340,6 +2487,10 @@ function GitReviewPanel({ sessionId, sendSessionFrame }) {
 		if (failure === void 0) onSent?.();
 	};
 	return /* @__PURE__ */ jsx(GitReviewView, {
+		onDraftChange: (open) => setDraftSnapshot((current) => open ? current?.sessionId === sessionId ? current : {
+			sessionId,
+			fingerprint
+		} : void 0),
 		sync: {
 			...changes === void 0 ? {} : { changes },
 			...activity.pending === void 0 ? {} : { pending: activity.pending },
@@ -2359,7 +2510,7 @@ function GitReviewPanel({ sessionId, sendSessionFrame }) {
 		onSendReview: () => send(buildReviewPrompt(comments, reviewHeading(comments.length, branch, base)), () => clearReviewComments(sessionId)),
 		onDiscard: () => clearReviewComments(sessionId),
 		...sendError === void 0 ? {} : { sendError }
-	});
+	}, sessionId);
 }
 //#endregion
 //#region src/extensions/workspaces/sessions/(frontend)/fill/_components/DiffActivitySection.tsx