@powerhousedao/design-system 6.2.3-dev.8 → 6.2.3-staging.0

package/dist/connect/index.js

@@ -1,5 +1,5 @@
-import { _ as DropdownMenuTrigger, c as SidebarHeader, d as PackageAnimation, f as Modal, h as DropdownMenuItem, l as SidebarPanel, m as DropdownMenuContent, n as usePagination, o as Sidebar, p as DropdownMenu, s as SidebarFooter, u as Pagination, v as PowerhouseButton } from "../src-CVV6HzQZ.js";
-import { n as getDimensions, t as Icon } from "../icon-C4QOpsdI.js";
+import { _ as DropdownMenuTrigger, c as SidebarHeader, d as PackageAnimation, f as Modal, h as DropdownMenuItem, l as SidebarPanel, m as DropdownMenuContent, n as usePagination, o as Sidebar, p as DropdownMenu, s as SidebarFooter, u as Pagination, v as PowerhouseButton } from "../src-CrUksCLW.js";
+import { n as getDimensions, t as Icon } from "../icon-01W_S_9A.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/components/popover/popover.js";
 import { SelectFieldRaw } from "../ui/components/select-field/select-field.js";
 import { Input } from "../ui/components/input/input.js";
@@ -328,6 +328,317 @@ function Breadcrumb(props) {
 	});
 }
 //#endregion
+//#region src/connect/components/catch-up-inspector/catch-up-inspector.tsx
+const COLUMNS$3 = [
+	{
+		key: "consumerId",
+		label: "Consumer",
+		width: "180px"
+	},
+	{
+		key: "thread",
+		label: "Thread",
+		width: "90px"
+	},
+	{
+		key: "appliedThrough",
+		label: "Applied Through",
+		width: "110px"
+	},
+	{
+		key: "lag",
+		label: "Lag",
+		width: "70px"
+	},
+	{
+		key: "trackedAbove",
+		label: "Tracked Above",
+		width: "100px"
+	},
+	{
+		key: "lastAdvance",
+		label: "Last Advance",
+		width: "160px"
+	},
+	{
+		key: "blockedOrdinal",
+		label: "Blocked At",
+		width: "90px"
+	},
+	{
+		key: "blockedDocument",
+		label: "Document",
+		width: "150px"
+	},
+	{
+		key: "blockedScope",
+		label: "Scope",
+		width: "80px"
+	},
+	{
+		key: "blockedBranch",
+		label: "Branch",
+		width: "80px"
+	},
+	{
+		key: "blockedType",
+		label: "Type",
+		width: "140px"
+	},
+	{
+		key: "blockedError",
+		label: "Error",
+		width: "180px"
+	}
+];
+const POLL_INTERVAL_MS = 2e3;
+function truncateId$3(id, maxLength = 12) {
+	if (id.length <= maxLength) return id;
+	return id.slice(0, maxLength) + "...";
+}
+function formatDuration(ms) {
+	const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor(totalSeconds % 3600 / 60);
+	const seconds = totalSeconds % 60;
+	if (hours > 0) return `${hours}h ${minutes}m ${seconds}s`;
+	if (minutes > 0) return `${minutes}m ${seconds}s`;
+	return `${seconds}s`;
+}
+function Empty() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: "-"
+	});
+}
+function Cell({ children }) {
+	return /* @__PURE__ */ jsx("td", {
+		className: "border-l border-border px-3 py-2 text-xs text-foreground",
+		children
+	});
+}
+function TruncatedText({ text, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: twMerge("block truncate", className),
+		title: text,
+		children: text
+	});
+}
+function CatchUpInspector({ status, onRefresh, onSweepNow }) {
+	const [loading, setLoading] = useState(true);
+	const [sweeping, setSweeping] = useState(false);
+	const [error, setError] = useState(null);
+	const [now, setNow] = useState();
+	const loadStatus = useCallback(async () => {
+		try {
+			await onRefresh();
+			setError(null);
+			setNow(Date.now());
+		} catch (e) {
+			setError(e instanceof Error ? e.message : String(e));
+		} finally {
+			setLoading(false);
+		}
+	}, [onRefresh]);
+	useEffect(() => {
+		loadStatus();
+		const interval = setInterval(() => {
+			loadStatus();
+		}, POLL_INTERVAL_MS);
+		return () => clearInterval(interval);
+	}, [loadStatus]);
+	const handleRefresh = useCallback(async () => {
+		setLoading(true);
+		await loadStatus();
+	}, [loadStatus]);
+	const handleSweepNow = useCallback(async () => {
+		setSweeping(true);
+		try {
+			await onSweepNow();
+			setError(null);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : String(e));
+		} finally {
+			setSweeping(false);
+		}
+		await loadStatus();
+	}, [onSweepNow, loadStatus]);
+	const watermark = status?.watermark;
+	const consumers = status?.consumers ?? [];
+	const settledThrough = watermark?.settledThrough ?? 0;
+	const blockedCount = consumers.filter((c) => c.blockedAt).length;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col gap-2",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-lg font-semibold text-foreground",
+					children: "Catch-up Inspector"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ jsx("button", {
+						className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect disabled:disabled-effect",
+						disabled: sweeping,
+						onClick: () => void handleSweepNow(),
+						type: "button",
+						children: "Sweep now"
+					}), /* @__PURE__ */ jsxs("button", {
+						className: "flex items-center gap-1 rounded-sm border border-border bg-background px-3 py-1.5 text-sm text-foreground hover:hover-effect disabled:disabled-effect",
+						disabled: loading,
+						onClick: () => void handleRefresh(),
+						type: "button",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: "Reload",
+							size: 14
+						}), "Refresh"]
+					})]
+				})]
+			}),
+			watermark && /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 flex-wrap items-center gap-4 rounded-lg bg-muted px-4 py-2 text-sm",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-foreground",
+						children: ["Head: ", /* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: watermark.head
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-foreground",
+						children: [
+							"Settled through:",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: watermark.settledThrough
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-foreground",
+						children: [
+							"Lag:",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: watermark.head - watermark.settledThrough
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-foreground",
+						children: [
+							"Waiting on:",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: watermark.waitingOn.length > 0 ? watermark.waitingOn.join(", ") : "none"
+							})
+						]
+					}),
+					watermark.stalledSinceUtcMs !== void 0 && now !== void 0 && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 text-destructive",
+						children: [
+							/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-destructive" }),
+							"Stalled for:",
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								title: new Date(watermark.stalledSinceUtcMs).toISOString(),
+								children: formatDuration(now - watermark.stalledSinceUtcMs)
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2 text-foreground",
+						children: [
+							/* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-destructive" }),
+							"Blocked: ",
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: blockedCount
+							})
+						]
+					})
+				]
+			}),
+			error && /* @__PURE__ */ jsxs("div", {
+				className: "shrink-0 rounded-lg border border-destructive bg-destructive/10 px-4 py-2 text-sm text-destructive",
+				children: ["Catch-up request failed: ", error]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "max-h-full overflow-auto rounded-lg border border-border",
+				children: /* @__PURE__ */ jsxs("table", {
+					className: "w-full border-collapse",
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: "sticky top-0 bg-muted",
+						children: /* @__PURE__ */ jsx("tr", { children: COLUMNS$3.map((column, index) => /* @__PURE__ */ jsx("th", {
+							className: twMerge("px-3 py-2 text-left text-xs font-medium text-foreground", index > 0 && "border-l border-border"),
+							style: { width: column.width },
+							children: /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: column.label
+							})
+						}, column.key)) })
+					}), /* @__PURE__ */ jsx("tbody", { children: loading && !status ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+						className: "px-3 py-8 text-center text-sm text-muted-foreground",
+						colSpan: COLUMNS$3.length,
+						children: "Loading..."
+					}) }) : consumers.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+						className: "px-3 py-8 text-center text-sm text-muted-foreground",
+						colSpan: COLUMNS$3.length,
+						children: "No catch-up consumers"
+					}) }) : consumers.map((consumer) => {
+						const blocked = consumer.blockedAt;
+						const lastAdvance = new Date(consumer.lastAdvanceUtcMs);
+						return /* @__PURE__ */ jsxs("tr", {
+							className: twMerge("hover:hover-effect", blocked ? "bg-destructive/10" : "odd:bg-card even:bg-background"),
+							children: [
+								/* @__PURE__ */ jsx("td", {
+									className: "px-3 py-2 text-xs text-foreground",
+									children: /* @__PURE__ */ jsx(TruncatedText, { text: consumer.consumerId })
+								}),
+								/* @__PURE__ */ jsx(Cell, { children: consumer.thread }),
+								/* @__PURE__ */ jsx(Cell, { children: consumer.appliedThrough }),
+								/* @__PURE__ */ jsx(Cell, { children: settledThrough - consumer.appliedThrough }),
+								/* @__PURE__ */ jsx(Cell, { children: consumer.trackedAbove }),
+								/* @__PURE__ */ jsx(Cell, { children: /* @__PURE__ */ jsx("span", {
+									className: "block truncate",
+									title: lastAdvance.toISOString(),
+									children: lastAdvance.toLocaleString()
+								}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? blocked.ordinal : /* @__PURE__ */ jsx(Empty, {}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? /* @__PURE__ */ jsx("span", {
+									className: "block truncate",
+									title: blocked.documentId,
+									children: truncateId$3(blocked.documentId)
+								}) : /* @__PURE__ */ jsx(Empty, {}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? blocked.scope : /* @__PURE__ */ jsx(Empty, {}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? blocked.branch : /* @__PURE__ */ jsx(Empty, {}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? /* @__PURE__ */ jsx(TruncatedText, { text: blocked.type }) : /* @__PURE__ */ jsx(Empty, {}) }),
+								/* @__PURE__ */ jsx(Cell, { children: blocked ? /* @__PURE__ */ jsx(TruncatedText, {
+									className: "text-destructive",
+									text: blocked.error
+								}) : /* @__PURE__ */ jsx(Empty, {}) })
+							]
+						}, consumer.consumerId);
+					}) })]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "shrink-0 text-sm text-foreground",
+				children: [
+					"Showing ",
+					consumers.length,
+					" consumer(s)"
+				]
+			})
+		]
+	});
+}
+//#endregion
 //#region src/connect/components/combobox/combobox.tsx
 function DropdownIndicator(props) {
 	return /* @__PURE__ */ jsx(components.DropdownIndicator, {
@@ -527,8 +838,9 @@ function ModalButton(props) {
 	const { variant, className, ...rest } = props;
 	const confirmStyle = twMerge(defaultStyle, "bg-primary text-primary-foreground");
 	const cancelStyle = twMerge(defaultStyle, "bg-muted text-muted-foreground");
+	const variantStyle = twMerge(variant === "confirm" ? confirmStyle : cancelStyle, className);
 	return /* @__PURE__ */ jsx("button", {
-		className: twMerge(variant === "confirm" ? confirmStyle : cancelStyle, className),
+		className: variantStyle,
 		...rest
 	});
 }
@@ -702,7 +1014,7 @@ function SchemaTreeSidebar({ schema, tables, selectedTable, onSelectTable, onRef
 //#endregion
 //#region src/connect/components/select/select.tsx
 function fixedForwardRef(render) {
-	return /* @__PURE__ */ forwardRef(render);
+	return /*#__PURE__*/ forwardRef(render);
 }
 const ConnectSelect = /* @__PURE__ */ fixedForwardRef(function Select(props, ref) {
 	const { items, value, id, onChange, containerClassName, menuClassName, itemClassName, absolutePositionMenu = false, borderRadius = "6px", listClassName } = props;
@@ -1279,9 +1591,10 @@ function DBExplorer({ schema, getTables, getTableRows, getDefaultSort, pageSize
 	]);
 	const handleCopyAll = useCallback(async () => {
 		if (!selectedTable) return "";
+		const limit = pagination.total ?? 1e6;
 		return rowsToCsv((await getTableRows(selectedTable, {
 			schema,
-			limit: pagination.total ?? 1e6,
+			limit,
 			offset: 0,
 			sort,
 			filters
@@ -1638,9 +1951,7 @@ const SEQUENCE = [
 	}
 ];
 const ANIM_DUR = 460;
-const HOLD = 800;
-const LAST_DROP = 1220;
-const LOOP_TOTAL = LAST_DROP + ANIM_DUR + HOLD + 1040 + ANIM_DUR + 400;
+const LOOP_TOTAL = 4380;
 const DROP_STYLE = `brickDrop ${ANIM_DUR}ms cubic-bezier(0.28, 1.08, 0.58, 1) forwards`;
 const FALL_STYLE = `brickFall ${ANIM_DUR}ms cubic-bezier(0.28, 1.08, 0.58, 1) forwards`;
 const PATHS = {
@@ -1699,7 +2010,7 @@ function LogoAnimation({ size = 48, className = "" }) {
 			clearTimers();
 			resetAll();
 			SEQUENCE.forEach(({ id, dropDelay }) => runDrop(id, dropDelay));
-			const fallStart = LAST_DROP + ANIM_DUR + HOLD;
+			const fallStart = 2480;
 			SEQUENCE.forEach(({ id, fallDelay }) => runFall(id, fallStart + fallDelay));
 			schedule(startLoop, LOOP_TOTAL);
 		}
@@ -1798,7 +2109,7 @@ function Tabs({ children, defaultValue, onValueChange, listClassName }) {
 			children: /* @__PURE__ */ jsx(List, {
 				className: "flex w-full gap-x-2 rounded-xl p-1 text-sm font-semibold text-foreground outline-none",
 				children: React.Children.map(children, (child, _i) => {
-					if (!/* @__PURE__ */ React.isValidElement(child)) return;
+					if (!/*#__PURE__*/ React.isValidElement(child)) return;
 					const props = child.props;
 					const value = resolveTabValue(props);
 					return /* @__PURE__ */ jsx(Trigger$2, {
@@ -1812,10 +2123,11 @@ function Tabs({ children, defaultValue, onValueChange, listClassName }) {
 		}), /* @__PURE__ */ jsx("div", {
 			className: "mt-3 min-h-0 flex-1 rounded-md bg-background",
 			children: React.Children.map(children, (child, i) => {
-				if (!/* @__PURE__ */ React.isValidElement(child)) return;
+				if (!/*#__PURE__*/ React.isValidElement(child)) return;
+				const value = resolveTabValue(child.props);
 				return /* @__PURE__ */ jsx(Content$2, {
 					className: "h-full",
-					value: resolveTabValue(child.props),
+					value,
 					children: child
 				}, i);
 			})
@@ -1954,7 +2266,8 @@ const getBarHeight = (size = 0) => {
 const formatTimestamp$1 = (isoString) => {
 	if (!isoString) return "";
 	try {
-		return format(parseISO(isoString), "HH:mm, dd, MMMM");
+		const date = parseISO(isoString);
+		return format(date, "HH:mm, dd, MMMM");
 	} catch {
 		return isoString;
 	}
@@ -2239,12 +2552,11 @@ function ToolbarRedoButton(props) {
 	}) } = props;
 	const { redo, canRedo } = useRedo(document?.header.id);
 	const onClick = makeOnClick(document, onClickOverride, redo);
-	const disabled = !canRedo;
 	return /* @__PURE__ */ jsx(ToolbarButton, {
 		"data-testid": "toolbar-redo-button",
 		"aria-label": "Redo",
 		className,
-		disabled,
+		disabled: !canRedo,
 		onClick,
 		children
 	});
@@ -2860,7 +3172,7 @@ function UploadFileItemStatusRow(props) {
 }
 //#endregion
 //#region src/connect/components/upload-file-item/upload-file-item.tsx
-const UploadFileItem = /* @__PURE__ */ forwardRef(function UploadFileItem(props, ref) {
+const UploadFileItem = /*#__PURE__*/ forwardRef(function UploadFileItem(props, ref) {
 	const { fileName, fileSize, status, documentType, progress = 0, errorDetails, onClose, onOpenDocument, onFindResolution, className, ...delegatedProps } = props;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
@@ -3100,7 +3412,7 @@ function uploadsReducer(state, action) {
 	}
 }
 function useUploadTracker(useLocalStorage = false, driveId) {
-	const [uploads, dispatch] = useReducer(uploadsReducer, useCallback(() => {
+	const getInitialState = useCallback(() => {
 		if (useLocalStorage && driveId) try {
 			const stored = localStorage.getItem(`uploadTracker_${driveId}`);
 			if (stored) return JSON.parse(stored);
@@ -3110,7 +3422,8 @@ function useUploadTracker(useLocalStorage = false, driveId) {
 			return {};
 		}
 		return {};
-	}, [useLocalStorage, driveId])());
+	}, [useLocalStorage, driveId]);
+	const [uploads, dispatch] = useReducer(uploadsReducer, getInitialState());
 	useEffect(() => {
 		if (useLocalStorage && driveId) try {
 			localStorage.setItem(`uploadTracker_${driveId}`, JSON.stringify(uploads));
@@ -3152,11 +3465,12 @@ function useUploadTracker(useLocalStorage = false, driveId) {
 				});
 			};
 			try {
+				const fileNode = await onAddFile(file, parent, progressCallback);
 				dispatch({
 					type: "SET_FILE_NODE",
 					payload: {
 						id: fileId,
-						fileNode: await onAddFile(file, parent, progressCallback) || void 0
+						fileNode: fileNode || void 0
 					}
 				});
 			} catch (error) {
@@ -4008,7 +4322,7 @@ const Footer = ({ children, className, ...props }) => {
 };
 //#endregion
 //#region src/connect/components/form-input/form-input.tsx
-const FormInput = /* @__PURE__ */ forwardRef(function FormInput(props, ref) {
+const FormInput = /*#__PURE__*/ forwardRef(function FormInput(props, ref) {
 	const { icon, errorMessage, isDirty, containerClassName, inputClassName, errorMessageClassName, hideErrors = false, ...delegatedProps } = props;
 	const type = props.type ?? "text";
 	const isError = !!errorMessage;
@@ -4106,7 +4420,7 @@ function AddLocalDriveForm(props) {
 }
 //#endregion
 //#region src/connect/components/toggle/toggle.tsx
-const Toggle = /* @__PURE__ */ forwardRef(function Toggle(props, ref) {
+const Toggle = /*#__PURE__*/ forwardRef(function Toggle(props, ref) {
 	return /* @__PURE__ */ jsxs("label", {
 		className: "relative cursor-pointer items-center",
 		htmlFor: props.id,
@@ -4121,7 +4435,7 @@ const Toggle = /* @__PURE__ */ forwardRef(function Toggle(props, ref) {
 });
 //#endregion
 //#region src/connect/components/form/inputs/available-offline-toggle.tsx
-const AvailableOfflineToggle = /* @__PURE__ */ forwardRef(function AvailableOfflineToggle(props, ref) {
+const AvailableOfflineToggle = /*#__PURE__*/ forwardRef(function AvailableOfflineToggle(props, ref) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center rounded-md border border-border bg-background p-3 text-foreground",
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -4490,7 +4804,8 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 		clearResults();
 		setStatus("running");
 		try {
-			setValidationResult(await onValidate(documentId.trim(), branch.trim() || void 0));
+			const result = await onValidate(documentId.trim(), branch.trim() || void 0);
+			setValidationResult(result);
 			setStatus("done");
 		} catch (err) {
 			setError(err instanceof Error ? err.message : String(err));
@@ -4507,7 +4822,8 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 		clearResults();
 		setStatus("running");
 		try {
-			setRebuildResult(await onRebuildKeyframes(documentId.trim(), branch.trim() || void 0));
+			const result = await onRebuildKeyframes(documentId.trim(), branch.trim() || void 0);
+			setRebuildResult(result);
 			setStatus("done");
 		} catch (err) {
 			setError(err instanceof Error ? err.message : String(err));
@@ -4524,7 +4840,8 @@ function IntegrityInspector({ onValidate, onRebuildKeyframes, onRebuildSnapshots
 		clearResults();
 		setStatus("running");
 		try {
-			setRebuildResult(await onRebuildSnapshots(documentId.trim(), branch.trim() || void 0));
+			const result = await onRebuildSnapshots(documentId.trim(), branch.trim() || void 0);
+			setRebuildResult(result);
 			setStatus("done");
 		} catch (err) {
 			setError(err instanceof Error ? err.message : String(err));
@@ -5103,7 +5420,7 @@ function ConnectDeleteItemModal(props) {
 }
 //#endregion
 //#region src/connect/components/form/inputs/drive-name-input.tsx
-const DriveNameInput = /* @__PURE__ */ forwardRef(function DriveNameInput(props, ref) {
+const DriveNameInput = /*#__PURE__*/ forwardRef(function DriveNameInput(props, ref) {
 	return /* @__PURE__ */ jsx(FormInput, {
 		...props,
 		icon: props.icon ?? /* @__PURE__ */ jsx(Icon, { name: "Drive" }),
@@ -5487,7 +5804,8 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 	const [error, setError] = useState(null);
 	const loadProcessors = useCallback(async () => {
 		try {
-			setProcessors(await getProcessors());
+			const result = await getProcessors();
+			setProcessors(result);
 			setError(null);
 		} catch (e) {
 			setError(e instanceof Error ? e.message : String(e));
@@ -5517,9 +5835,10 @@ function ProcessorsInspector({ getProcessors, onRetry }) {
 		}
 	}, [onRetry, loadProcessors]);
 	const handleSort = (columnKey) => {
+		const newDirection = sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc";
 		setSort({
 			column: columnKey,
-			direction: sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc"
+			direction: newDirection
 		});
 	};
 	const sortedProcessors = sortProcessors(processors, sort);
@@ -5841,7 +6160,8 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 	const [actionInProgress, setActionInProgress] = useState(false);
 	const [selectedJob, setSelectedJob] = useState(null);
 	const loadState = useCallback(async () => {
-		setState(await getQueueState());
+		const newState = await getQueueState();
+		setState(newState);
 		setLoading(false);
 	}, [getQueueState]);
 	useEffect(() => {
@@ -5868,9 +6188,10 @@ function QueueInspector({ getQueueState, onPause, onResume }) {
 		loadState
 	]);
 	const handleSort = (columnKey) => {
+		const newDirection = sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc";
 		setSort({
 			column: columnKey,
-			direction: sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc"
+			direction: newDirection
 		});
 	};
 	const sortedJobs = sortJobs([...state.executingJobs.map((job) => ({
@@ -6071,8 +6392,9 @@ const stateStyles = {
 	disconnected: "bg-muted text-foreground"
 };
 function ConnectionStateBadge({ state, failureCount }) {
+	const style = stateStyles[state] ?? "bg-muted text-foreground";
 	return /* @__PURE__ */ jsxs("span", {
-		className: twMerge("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", stateStyles[state] ?? "bg-muted text-foreground"),
+		className: twMerge("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", style),
 		children: [state, failureCount > 0 && /* @__PURE__ */ jsxs("span", {
 			className: "text-xs opacity-75",
 			children: [
@@ -6722,6 +7044,175 @@ function ChannelInspector({ remoteName, channel, onBack, onRefresh, connectionSt
 	});
 }
 //#endregion
+//#region src/connect/components/remotes-inspector/components/peer-agreement-panel.tsx
+const cell = "px-3 py-1.5 text-xs text-foreground";
+const head = "px-3 py-1.5 text-left text-xs font-medium text-foreground";
+function versions(list) {
+	return list && list.length > 0 ? list.join(", ") : "none";
+}
+/** How a remote's peer announced itself. */
+function peerManifestLabel(peer) {
+	if (peer === void 0) return "Not yet heard (baseline)";
+	if (peer.manifest === null) return "Silent (baseline)";
+	return `Announced, revision ${peer.manifest.revision.slice(0, 8)}`;
+}
+function PeerAgreementPanel({ remoteName, collectionId, peer, agreement, holds }) {
+	const local = agreement.local();
+	const theirs = agreement.peer(remoteName);
+	const protocols = Object.keys(local.protocols).sort();
+	const features = Object.keys(local.features).sort();
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "Peer agreement",
+		className: "flex flex-col gap-2 rounded-lg border border-border p-3",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "text-sm font-semibold text-foreground",
+					children: "Peer agreement"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "text-xs text-muted-foreground",
+					children: peerManifestLabel(peer)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("table", {
+				className: "w-full border-collapse",
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "bg-muted",
+					children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Protocol"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Local"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Peer"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Limits new documents"
+						})
+					] })
+				}), /* @__PURE__ */ jsxs("tbody", { children: [protocols.map((protocol) => {
+					const limits = agreement.limitedBy(collectionId, protocol).includes(remoteName);
+					return /* @__PURE__ */ jsxs("tr", {
+						className: "odd:bg-card even:bg-background",
+						children: [
+							/* @__PURE__ */ jsx("td", {
+								className: cell,
+								children: protocol
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: cell,
+								children: versions(local.protocols[protocol])
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: cell,
+								children: versions(theirs.protocols[protocol])
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: twMerge(cell, limits && "text-warning"),
+								children: limits ? "Yes" : "No"
+							})
+						]
+					}, protocol);
+				}), features.map((feature) => /* @__PURE__ */ jsxs("tr", {
+					className: "odd:bg-card even:bg-background",
+					children: [
+						/* @__PURE__ */ jsxs("td", {
+							className: cell,
+							children: [feature, " (feature)"]
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: versions(local.features[feature])
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: versions(theirs.features[feature])
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: "-"
+						})
+					]
+				}, feature))] })]
+			}),
+			/* @__PURE__ */ jsxs("h4", {
+				className: "text-xs font-semibold text-foreground",
+				children: [
+					"Held documents (",
+					holds.length,
+					")"
+				]
+			}),
+			holds.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "text-xs text-muted-foreground",
+				children: "No documents held"
+			}) : /* @__PURE__ */ jsxs("table", {
+				className: "w-full border-collapse",
+				children: [/* @__PURE__ */ jsx("thead", {
+					className: "bg-muted",
+					children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Document"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Branch"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Requires"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Peer runs"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							className: head,
+							children: "Held since"
+						})
+					] })
+				}), /* @__PURE__ */ jsx("tbody", { children: holds.map((hold) => /* @__PURE__ */ jsxs("tr", {
+					className: "odd:bg-card even:bg-background",
+					children: [
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: hold.documentId
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: hold.branch
+						}),
+						/* @__PURE__ */ jsxs("td", {
+							className: cell,
+							children: [
+								hold.reason.protocol,
+								" ",
+								hold.reason.version
+							]
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: versions(hold.reason.peerSupports)
+						}),
+						/* @__PURE__ */ jsx("td", {
+							className: cell,
+							children: new Date(hold.heldAtUtcMs).toLocaleString()
+						})
+					]
+				}, `${hold.documentId}:${hold.branch}`)) })]
+			})
+		]
+	});
+}
+//#endregion
 //#region src/connect/components/remotes-inspector/remotes-inspector.tsx
 const BASE_COLUMNS = [
 	{
@@ -6749,6 +7240,11 @@ const BASE_COLUMNS = [
 		label: "Filter",
 		width: "200px"
 	},
+	{
+		key: "peer",
+		label: "Peer",
+		width: "160px"
+	},
 	{
 		key: "channel",
 		label: "Channel",
@@ -6795,7 +7291,7 @@ function sortRemotes(remotes, sort) {
 		return sort.direction === "asc" ? comparison : -comparison;
 	});
 }
-function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPull, connectionStates }) {
+function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPull, connectionStates, getAgreement, getHolds }) {
 	const [remotes, setRemotes] = useState([]);
 	const [loading, setLoading] = useState(true);
 	const [sort, setSort] = useState();
@@ -6803,29 +7299,47 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 	const [manualUrl, setManualUrl] = useState("");
 	const [adding, setAdding] = useState(false);
 	const [addError, setAddError] = useState();
+	const [holds, setHolds] = useState([]);
 	const hasRowActions = !!removeRemote || !!triggerPull;
 	const columns = useMemo(() => hasRowActions ? [...BASE_COLUMNS, ACTIONS_COLUMN] : BASE_COLUMNS, [hasRowActions]);
 	const loadRemotes = useCallback(async () => {
 		setLoading(true);
-		setRemotes(await getRemotes());
+		const data = await getRemotes();
+		setRemotes(data);
 		setLoading(false);
 	}, [getRemotes]);
 	useEffect(() => {
 		loadRemotes();
 	}, [loadRemotes]);
+	useEffect(() => {
+		if (!selectedRemote || !getHolds) return;
+		let current = true;
+		getHolds(selectedRemote.meta.name).then((loaded) => {
+			if (current) setHolds(loaded);
+		}).catch(() => {
+			if (current) setHolds([]);
+		});
+		return () => {
+			current = false;
+		};
+	}, [selectedRemote, getHolds]);
 	const handleRefresh = useCallback(async () => {
 		await loadRemotes();
-		if (selectedRemote) setSelectedRemote(remotes.find((r) => r.meta.id === selectedRemote.meta.id));
+		if (selectedRemote) {
+			const updated = remotes.find((r) => r.meta.id === selectedRemote.meta.id);
+			setSelectedRemote(updated);
+		}
 	}, [
 		loadRemotes,
 		selectedRemote,
 		remotes
 	]);
 	const handleSort = (columnKey) => {
-		if (columnKey === "channel" || columnKey === "actions" || columnKey === "status") return;
+		if (columnKey === "channel" || columnKey === "actions" || columnKey === "status" || columnKey === "peer") return;
+		const newDirection = sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc";
 		setSort({
 			column: columnKey,
-			direction: sort?.column === columnKey && sort.direction === "asc" ? "desc" : "asc"
+			direction: newDirection
 		});
 	};
 	const handleViewChannel = (remote) => {
@@ -6867,13 +7381,30 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 	const handlePull = useCallback((remote) => {
 		triggerPull?.(remote.meta.name);
 	}, [triggerPull]);
-	if (selectedRemote) return /* @__PURE__ */ jsx(ChannelInspector, {
-		channel: selectedRemote.channel,
-		connectionState: connectionStates?.get(selectedRemote.meta.name),
-		onBack: handleBack,
-		onRefresh: () => void handleRefresh(),
-		remoteName: selectedRemote.meta.name
-	});
+	if (selectedRemote) {
+		let agreement;
+		try {
+			agreement = getAgreement?.();
+		} catch {
+			agreement = void 0;
+		}
+		return /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full flex-col gap-2 overflow-auto",
+			children: [agreement && /* @__PURE__ */ jsx(PeerAgreementPanel, {
+				agreement,
+				collectionId: selectedRemote.meta.collectionId.key,
+				holds,
+				peer: selectedRemote.meta.peer,
+				remoteName: selectedRemote.meta.name
+			}), /* @__PURE__ */ jsx(ChannelInspector, {
+				channel: selectedRemote.channel,
+				connectionState: connectionStates?.get(selectedRemote.meta.name),
+				onBack: handleBack,
+				onRefresh: () => void handleRefresh(),
+				remoteName: selectedRemote.meta.name
+			})]
+		});
+	}
 	const sortedRemotes = sortRemotes(remotes, sort);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-col gap-2",
@@ -6930,7 +7461,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 						children: /* @__PURE__ */ jsx("tr", { children: columns.map((column, index) => {
 							const isActive = sort?.column === column.key;
 							const sortDirection = isActive ? sort.direction : "asc";
-							const isSortable = column.key !== "channel" && column.key !== "actions" && column.key !== "status";
+							const isSortable = column.key !== "channel" && column.key !== "actions" && column.key !== "status" && column.key !== "peer";
 							return /* @__PURE__ */ jsx("th", {
 								className: twMerge("group px-3 py-2 text-left text-xs font-medium text-foreground", index > 0 && "border-l border-border", isSortable && "cursor-pointer hover:hover-effect"),
 								onClick: () => isSortable && handleSort(column.key),
@@ -7000,6 +7531,13 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 									children: formatFilter(remote.meta.filter)
 								})
 							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "border-l border-border px-3 py-2 text-xs text-foreground",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "block truncate",
+									children: peerManifestLabel(remote.meta.peer)
+								})
+							}),
 							/* @__PURE__ */ jsx("td", {
 								className: "border-l border-border px-3 py-2",
 								children: /* @__PURE__ */ jsxs("button", {
@@ -7077,7 +7615,8 @@ function WorkerInspector({ getInfo, onRestart }) {
 	const [restarting, setRestarting] = useState(false);
 	const loadInfo = useCallback(async () => {
 		try {
-			setInfo(await getInfo());
+			const next = await getInfo();
+			setInfo(next);
 			setError(null);
 		} catch (e) {
 			setError(e instanceof Error ? e.message : String(e));
@@ -7172,7 +7711,7 @@ function InspectorUnavailable({ message }) {
 		})]
 	});
 }
-function InspectorModal({ open, onOpenChange, modalProps, containerProps, dbExplorerProps, remotesInspectorProps, queueInspectorProps, processorsInspectorProps, integrityInspectorProps, workerInspectorProps, unavailableTabs, defaultTab = "Database" }) {
+function InspectorModal({ open, onOpenChange, modalProps, containerProps, dbExplorerProps, remotesInspectorProps, queueInspectorProps, processorsInspectorProps, integrityInspectorProps, catchUpInspectorProps, workerInspectorProps, unavailableTabs, defaultTab = "Database" }) {
 	return /* @__PURE__ */ jsx(Modal, {
 		...modalProps,
 		contentProps: {
@@ -7257,6 +7796,20 @@ function InspectorModal({ open, onOpenChange, modalProps, containerProps, dbExpl
 							label: "Integrity",
 							children: /* @__PURE__ */ jsx(InspectorUnavailable, { message: unavailableTabs.Integrity })
 						}) : null,
+						catchUpInspectorProps ? /* @__PURE__ */ jsx(TabContent, {
+							description: "Catch-up inspector",
+							label: "Catch-up",
+							value: "CatchUp",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "h-full",
+								children: /* @__PURE__ */ jsx(CatchUpInspector, { ...catchUpInspectorProps })
+							})
+						}) : unavailableTabs?.CatchUp ? /* @__PURE__ */ jsx(TabContent, {
+							description: "Catch-up inspector",
+							label: "Catch-up",
+							value: "CatchUp",
+							children: /* @__PURE__ */ jsx(InspectorUnavailable, { message: unavailableTabs.CatchUp })
+						}) : null,
 						workerInspectorProps && /* @__PURE__ */ jsx(TabContent, {
 							description: "Worker inspector",
 							label: "Worker",
@@ -7380,10 +7933,12 @@ function ReadRequiredModal(props) {
 	useEffect(() => {
 		const checkScroll = () => {
 			const element = contentRef.current;
-			if (element) if (element.scrollHeight > element.clientHeight) {
-				setDisableClose(true);
-				element.addEventListener("scroll", handleScroll);
-			} else setDisableClose(false);
+			if (element) {
+				if (element.scrollHeight > element.clientHeight) {
+					setDisableClose(true);
+					element.addEventListener("scroll", handleScroll);
+				} else setDisableClose(false);
+			}
 		};
 		const handleScroll = () => {
 			const element = contentRef.current;
@@ -7896,6 +8451,7 @@ const VersionPicker = (props) => {
 							className: "px-3 py-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase",
 							children: "Tags"
 						}), filteredTags.map(([tag, ver]) => {
+							const isSelected = selected.kind === "tag" && selected.value === tag;
 							return /* @__PURE__ */ jsxs("button", {
 								type: "button",
 								onClick: () => {
@@ -7906,7 +8462,7 @@ const VersionPicker = (props) => {
 									setOpen(false);
 									setQuery("");
 								},
-								className: twMerge("flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-xs transition-colors", "hover:hover-effect", selected.kind === "tag" && selected.value === tag && "bg-muted font-semibold"),
+								className: twMerge("flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-xs transition-colors", "hover:hover-effect", isSelected && "bg-muted font-semibold"),
 								children: [/* @__PURE__ */ jsx("span", {
 									className: "truncate text-foreground",
 									children: tag
@@ -7927,6 +8483,7 @@ const VersionPicker = (props) => {
 						className: "px-3 py-1 text-xs font-semibold tracking-wide text-muted-foreground uppercase",
 						children: "Versions"
 					}), filteredVersions.map((ver) => {
+						const isSelected = selected.kind === "version" && selected.value === ver;
 						return /* @__PURE__ */ jsx("button", {
 							type: "button",
 							onClick: () => {
@@ -7937,7 +8494,7 @@ const VersionPicker = (props) => {
 								setOpen(false);
 								setQuery("");
 							},
-							className: twMerge("flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors", "hover:hover-effect", selected.kind === "version" && selected.value === ver && "bg-muted font-semibold"),
+							className: twMerge("flex w-full items-center px-3 py-1.5 text-left text-xs transition-colors", "hover:hover-effect", isSelected && "bg-muted font-semibold"),
 							children: /* @__PURE__ */ jsxs("span", {
 								className: "flex min-w-0 items-center gap-1.5 text-foreground",
 								children: [/* @__PURE__ */ jsx("span", {
@@ -8086,6 +8643,14 @@ const PackageManagerListItem = (props) => {
 							updateTarget
 						]
 					}),
+					registryPackage.sharedDepWarnings && registryPackage.sharedDepWarnings.length > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center gap-1 rounded-full border border-warning/40 bg-warning/10 px-2 py-0.5 text-[11px] font-medium text-warning",
+						title: registryPackage.sharedDepWarnings.join("\n"),
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: "Exclamation",
+							size: 10
+						}), "Shared deps out of date"]
+					}),
 					!(canPickVersion && hasVersionMetadata) && registryPackage.version && /* @__PURE__ */ jsxs("span", {
 						className: "text-xs font-normal text-muted-foreground",
 						children: ["v", registryPackage.version]
@@ -8129,7 +8694,8 @@ const PackageManagerListItem = (props) => {
 				items: dropdownItems,
 				onItemClick: (id) => {
 					if (id === "install") {
-						onInstall(canPickVersion && hasVersionMetadata ? buildPackageSpec(registryPackage.name, selected.value) : registryPackage.name).catch(console.error);
+						const spec = canPickVersion && hasVersionMetadata ? buildPackageSpec(registryPackage.name, selected.value) : registryPackage.name;
+						onInstall(spec).catch(console.error);
 						return;
 					}
 					if (id === "update") {
@@ -8645,7 +9211,8 @@ const DocumentState = (props) => {
 	const { documentState, onCopyState } = props;
 	const [, copy] = useCopyToClipboard();
 	function handleCopy() {
-		copy(JSON.stringify(documentState, null, 2)).then(() => {
+		const jsonState = JSON.stringify(documentState, null, 2);
+		copy(jsonState).then(() => {
 			onCopyState?.();
 		}).catch((error) => {
 			console.error("Failed to copy document state!", error);
@@ -8659,20 +9226,21 @@ const DocumentState = (props) => {
 };
 //#endregion
 //#region src/connect/components/revision-history/header/scope.tsx
+function labelFor(scope) {
+	return `${scope.charAt(0).toUpperCase()}${scope.slice(1)} scope`;
+}
 function Scope(props) {
-	const { value, onChange } = props;
+	const { scopes, value, onChange } = props;
+	const items = scopes.map((scope) => ({
+		displayValue: labelFor(scope),
+		value: scope
+	}));
 	return /* @__PURE__ */ jsx(ConnectSelect, {
 		absolutePositionMenu: true,
 		containerClassName: "z-10 w-fit rounded-lg bg-background text-xs text-muted-foreground",
 		id: "scope select",
 		itemClassName: "grid grid-cols-[auto,auto] gap-1 py-2 text-muted-foreground",
-		items: [{
-			displayValue: "Global scope",
-			value: "global"
-		}, {
-			displayValue: "Local scope",
-			value: "local"
-		}],
+		items,
 		menuClassName: "min-w-0 text-muted-foreground",
 		onChange,
 		value
@@ -8681,7 +9249,7 @@ function Scope(props) {
 //#endregion
 //#region src/connect/components/revision-history/header/header.tsx
 function Header(props) {
-	const { title, docId, scope, onChangeScope, onClose, className, documentState, onCopyState, onCopyDocId, ...divProps } = props;
+	const { title, docId, scope, scopes, onChangeScope, onClose, className, documentState, onCopyState, onCopyDocId, ...divProps } = props;
 	return /* @__PURE__ */ jsxs("header", {
 		className: twMerge("flex items-center justify-between bg-transparent", className),
 		...divProps,
@@ -8710,6 +9278,7 @@ function Header(props) {
 				/* @__PURE__ */ jsx(Branch, {}),
 				/* @__PURE__ */ jsx(Scope, {
 					onChange: onChangeScope,
+					scopes,
 					value: scope
 				})
 			]
@@ -8950,9 +9519,10 @@ function Timestamp(props) {
 	const timestampNumber = typeof timestamp === "string" && !timestamp.includes("-") ? parseInt(timestamp) : timestamp;
 	const date = new Date(timestampNumber);
 	const shortDate = format(date, "HH:mm 'UTC'");
+	const longDate = format(date, "eee, dd MMM yyyy HH:mm:ss 'UTC'");
 	return /* @__PURE__ */ jsx(CodePopover, {
 		content: /* @__PURE__ */ jsx(FormattedJsonViewer, { value: {
-			timestampFormatted: format(date, "eee, dd MMM yyyy HH:mm:ss 'UTC'"),
+			timestampFormatted: longDate,
 			timestampUtcMs: timestamp
 		} }),
 		trigger: /* @__PURE__ */ jsxs("span", {
@@ -8980,7 +9550,7 @@ function _Revision(props) {
 		})]
 	});
 }
-const Revision = /* @__PURE__ */ memo(_Revision);
+const Revision = /*#__PURE__*/ memo(_Revision);
 //#endregion
 //#region src/connect/components/revision-history/skip/skip.tsx
 function Skip(props) {
@@ -9075,90 +9645,110 @@ function Day(props) {
 }
 //#endregion
 //#region src/connect/components/revision-history/timeline/timeline.tsx
+/** How far each row is indented from the timeline's vertical line. */
+const ROW_INSET = 16;
+/**
+* How far the line is inset from the scroll container's clip edge -- exactly
+* the amount the day marker hangs past it (24 pulled back from a 16 inset
+* leaves 8 on the wrong side of zero). Without this the ring is sliced in
+* half, since a scrolling box clips on both axes.
+*/
+const DAY_MARKER_OVERHANG = 8;
+/**
+* The revision timeline, windowed by row.
+*
+* The scroll element and the content are deliberately two different
+* elements. A virtualizer decides what is visible by comparing its scroll
+* element's viewport against the total content size, so a scroll element
+* sized to the content is a viewport that shows everything at once: it never
+* scrolls, every row is "visible", and the whole page renders while still
+* paying the virtualizer's bookkeeping. The outer element here is therefore
+* bounded and scrollable, and the inner sizer carries the full height that
+* the absolutely positioned rows are placed within.
+*/
 function Timeline(props) {
-	const { localOperations, globalOperations, scope } = props;
-	const operations = scope === "local" ? localOperations : globalOperations;
-	const initialNumRowsToShow = 100;
-	const allRows = useMemo(() => makeRows(operations), [operations]);
-	const [scrollAmount, setScrollAmount] = useState(0);
-	const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow);
-	const [rows, setRows] = useState(() => allRows.slice(0, numRowsToShow));
+	const { operations, maxHeight = "70vh" } = props;
+	const rows = useMemo(() => makeRows([...operations]), [operations]);
 	const parentRef = useRef(null);
-	const hasNextPage = rows.length < allRows.length;
 	const rowVirtualizer = useVirtualizer({
 		count: rows.length,
 		getScrollElement: () => parentRef.current,
-		estimateSize: (i) => allRows[i].height,
-		gap: 8
+		estimateSize: (i) => rows[i]?.height ?? 0,
+		gap: 8,
+		overscan: 8
 	});
-	useEffect(() => {
-		if (!hasNextPage) return;
-		const newNumRevisions = initialNumRowsToShow + Math.floor(scrollAmount / 46);
-		setNumRowsToShow((prev) => newNumRevisions > prev ? newNumRevisions : prev);
-	}, [scrollAmount, hasNextPage]);
-	useEffect(() => {
-		setRows(allRows.slice(0, numRowsToShow));
-	}, [allRows, numRowsToShow]);
-	const handleScroll = (e) => {
-		setScrollAmount((prev) => {
-			const n = prev + e.deltaY;
-			if (n < 0) return 0;
-			return n;
-		});
-	};
-	useEffect(() => {
-		window.addEventListener("wheel", handleScroll);
-		return () => {
-			window.removeEventListener("wheel", handleScroll);
-		};
-	}, []);
 	return /* @__PURE__ */ jsx("div", {
-		className: "border-l border-border dark:border-none",
+		"data-testid": "revision-timeline",
 		ref: parentRef,
 		style: {
-			height: `${rowVirtualizer.getTotalSize()}px`,
+			maxHeight,
+			overflowY: "auto",
 			width: "100%",
 			position: "relative"
 		},
-		children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
-			const row = rows[virtualRow.index];
-			return /* @__PURE__ */ jsxs("div", {
-				style: {
-					position: "absolute",
-					top: 0,
-					left: 16,
-					width: "100%",
-					height: `${virtualRow.size}px`,
-					transform: `translateY(${virtualRow.start}px)`
-				},
-				children: [
-					row.type === "revision" && /* @__PURE__ */ createElement(Revision, {
-						...row,
-						key: virtualRow.key
-					}),
-					row.type === "skip" && /* @__PURE__ */ jsx(Skip, { ...row }, virtualRow.key),
-					row.type === "day" && /* @__PURE__ */ jsx(Day, { ...row }, virtualRow.key)
-				]
-			}, virtualRow.index);
+		children: /* @__PURE__ */ jsx("div", {
+			className: "border-l border-border dark:border-none",
+			style: {
+				height: `${rowVirtualizer.getTotalSize()}px`,
+				marginLeft: DAY_MARKER_OVERHANG,
+				position: "relative"
+			},
+			children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
+				const row = rows[virtualRow.index];
+				if (!row) return null;
+				return /* @__PURE__ */ jsxs("div", {
+					style: {
+						position: "absolute",
+						top: 0,
+						left: ROW_INSET,
+						right: 0,
+						height: `${virtualRow.size}px`,
+						transform: `translateY(${virtualRow.start}px)`
+					},
+					children: [
+						row.type === "revision" && /* @__PURE__ */ jsx(Revision, { ...row }),
+						row.type === "skip" && /* @__PURE__ */ jsx(Skip, { ...row }),
+						row.type === "day" && /* @__PURE__ */ jsx(Day, { ...row })
+					]
+				}, virtualRow.key);
+			})
 		})
 	});
 }
 //#endregion
 //#region src/connect/components/revision-history/revision-history.tsx
-function RevisionHistory(props) {
-	const { documentTitle, documentId, globalOperations, localOperations, onClose, itemsPerPage = 100, documentState, onCopyState, onCopyDocId } = props;
-	const [scope, setScope] = useState("global");
-	const visibleOperations = useMemo(() => {
-		return garbageCollect(sortOperations(scope === "global" ? globalOperations : localOperations)).sort((a, b) => b.index - a.index);
+/** The current, scoped props. */
+/**
+* Legacy props: the whole global and local history, toggled inside the
+* component.
+* @deprecated Pass one scope's `operations` with `scopes`/`scope`/`onScopeChange` and the loading props. Removed in the next major.
+*/
+/**
+* The revision history panel. Pages arrive oldest first while the timeline
+* renders newest first, so rendering progressively would show operations in
+* the wrong order until the last page landed and would repaint the whole
+* timeline on every page in between. Instead the component keeps asking for
+* the next page, showing "Loading operations…" and a running count, until
+* the walk completes, then renders the pagination and timeline once.
+*/
+function ScopedRevisionHistory(props) {
+	const { documentTitle, documentId, operations, isLoading, hasNextPage, onLoadNextPage, scopes, scope, onScopeChange, onClose, itemsPerPage = 100, documentState, onCopyState, onCopyDocId, error } = props;
+	useEffect(() => {
+		if (!hasNextPage || isLoading || error) return;
+		const handle = window.setTimeout(onLoadNextPage, 0);
+		return () => window.clearTimeout(handle);
 	}, [
-		globalOperations,
-		localOperations,
-		scope
+		hasNextPage,
+		isLoading,
+		onLoadNextPage,
+		error
 	]);
+	const isWalking = !error && (hasNextPage || isLoading && operations.length === 0);
+	const visibleOperations = useMemo(() => isWalking ? [] : garbageCollect(sortOperations([...operations])).sort((a, b) => b.index - a.index), [operations, isWalking]);
 	const { pageItems, pages, goToPage, goToNextPage, goToPreviousPage, goToFirstPage, goToLastPage, hiddenNextPages, isNextPageAvailable, isPreviousPageAvailable } = usePagination(visibleOperations, { itemsPerPage });
-	function onChangeScope(scope) {
+	function onChangeScope(nextScope) {
 		goToFirstPage();
-		setScope(scope);
+		onScopeChange(nextScope);
 	}
 	const PaginationComponent = visibleOperations.length > itemsPerPage ? /* @__PURE__ */ jsx("div", {
 		className: "mt-4 flex w-full justify-end",
@@ -9178,38 +9768,76 @@ function RevisionHistory(props) {
 			previousPageLabel: "Previous"
 		})
 	}) : /* @__PURE__ */ jsx("hr", { className: "h-12 border-none" });
+	const hasOperations = visibleOperations.length > 0;
 	return /* @__PURE__ */ jsx(ConnectTooltipProvider, { children: /* @__PURE__ */ jsxs("div", {
 		className: "p-6",
-		children: [
-			/* @__PURE__ */ jsx(Header, {
-				docId: documentId,
-				onChangeScope,
-				onClose,
-				scope,
-				title: documentTitle,
-				documentState,
-				onCopyState,
-				onCopyDocId
-			}),
+		children: [/* @__PURE__ */ jsx(Header, {
+			docId: documentId,
+			onChangeScope,
+			onClose,
+			scope,
+			scopes,
+			title: documentTitle,
+			documentState,
+			onCopyState,
+			onCopyDocId
+		}), isWalking ? /* @__PURE__ */ jsxs("div", {
+			className: "mt-4 flex flex-col items-center rounded-md bg-background p-4",
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "my-40 text-foreground",
+				children: "Loading operations…"
+			}), operations.length > 0 && /* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-muted-foreground",
+				children: [operations.length, " loaded so far"]
+			})]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			PaginationComponent,
-			/* @__PURE__ */ jsx("div", {
-				className: "mt-4 flex justify-center rounded-md bg-background p-4",
-				children: visibleOperations.length > 0 ? /* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-4 flex flex-col items-center rounded-md bg-background p-4",
+				children: [error && /* @__PURE__ */ jsxs("p", {
+					className: "mb-2 text-xs text-destructive",
+					children: ["Could not load the rest of the history: ", error.message]
+				}), hasOperations ? /* @__PURE__ */ jsx("div", {
 					className: "grid grid-cols-[minmax(min-content,1018px)]",
-					children: /* @__PURE__ */ jsx(Timeline, {
-						globalOperations: scope === "global" ? pageItems : [],
-						localOperations: scope === "local" ? pageItems : [],
-						scope
-					})
-				}) : /* @__PURE__ */ jsx("h3", {
+					children: /* @__PURE__ */ jsx(Timeline, { operations: pageItems })
+				}) : error ? null : /* @__PURE__ */ jsx("h3", {
 					className: "my-40 text-foreground",
 					children: "This document has no recorded operations yet."
-				})
+				})]
 			}),
 			PaginationComponent
-		]
+		] })]
 	}) });
 }
+const LEGACY_SCOPES = ["global", "local"];
+const noop = () => {};
+/** Toggles between the whole global and local history loaded up front. */
+function LegacyRevisionHistory(props) {
+	const { globalOperations, localOperations, ...common } = props;
+	const [scope, setScope] = useState("global");
+	return /* @__PURE__ */ jsx(ScopedRevisionHistory, {
+		...common,
+		operations: scope === "local" ? localOperations : globalOperations,
+		isLoading: false,
+		hasNextPage: false,
+		onLoadNextPage: noop,
+		scopes: LEGACY_SCOPES,
+		scope,
+		onScopeChange: setScope
+	});
+}
+/**
+* The revision history panel. Pages arrive oldest first while the timeline
+* renders newest first, so it waits for the whole history to load before
+* rendering the timeline, showing "Loading operations…" and a running count
+* in the meantime.
+*
+* Also accepts the deprecated `globalOperations`/`localOperations` pair
+* (see `RevisionHistoryLegacyProps`), toggling between them internally.
+*/
+function RevisionHistory(props) {
+	return "globalOperations" in props ? /* @__PURE__ */ jsx(LegacyRevisionHistory, { ...props }) : /* @__PURE__ */ jsx(ScopedRevisionHistory, { ...props });
+}
 //#endregion
 //#region src/connect/components/search-bar/filter-item.tsx
 const FilterItem = (props) => {
@@ -9663,6 +10291,6 @@ const removeSuccessFiles = (files) => {
 	return files.filter((file) => file.status !== "SUCCESS");
 };
 //#endregion
-export { About, AccountPopover, AccountPopoverLogin, AddDriveModal, AddLocalDriveForm, AddRemoteDriveForm, AnimatedLoader, AvailablePackagesPanel, Breadcrumb, Breadcrumbs, CONFLICT, ChannelInspector, Combobox, ConnectConfirmationModal, ConnectDeleteDriveModal, ConnectDeleteItemModal, ConnectDropdownMenu, ConnectReplaceDuplicateModal, ConnectSearchBar, ConnectSelect, ConnectSidebar, ConnectSidebarFooter, ConnectSidebarHeader, ConnectTooltip, ConnectTooltipProvider, ConnectUpgradeDriveModal, ConnectionStateBadge, CookieBanner, CreateDocumentModal, CreateDocumentWithTypeModal, DBExplorer, DangerZone, DebugInspector, DefaultEditor, DefaultEditorLoader, DefaultEditorSelect, DependencyVersions, Disclosure, Divider, DocumentStateViewer, DocumentTimeline, DocumentToolbar, DriveAuthGate, DriveSettingsModal, DropZone, DropZoneWrapper, ENSAvatar, ERROR, EditorActionButtons, EditorUndoRedoButtons, FileItem, FolderItem, Footer, FooterLink, FormInput, FormattedJsonViewer, HomeBackgroundImage, HomeScreen, HomeScreenAddDriveItem, HomeScreenItem, INITIAL_SYNC, InspectorModal, InstalledPackagesPanel, IntegrityInspector, LoadingScreen, LogoAnimation, MISSING, ModalButton, NodeInput, ObjectInspectorModal, PackageInstallModal, PackageList, PackageManager, PackageManagerListItem, PackagePanelScrollArea, PackageRegistryError, PackageSubSection, ProcessorsInspector, QueueInspector, ReadRequiredModal, RemotesInspector, RenownLoginMethods, RevisionHistory, SUCCESS, SYNCING, SettingsModal, SidebarAddDriveItem, SidebarItem, SidebarLogin, SidebarUser, SyncStatusIcon, TabContent, Tabs, ThemeSwitch, Toggle, ToolbarButton, ToolbarCloseButton, ToolbarContainer, ToolbarControlsContainer, ToolbarDownloadButton, ToolbarHistoryButton, ToolbarInput, ToolbarName, ToolbarRedoButton, ToolbarSwitchboardButton, ToolbarUndoButton, UploadFileItem, UploadFileList, UploadFileListContainer, WorkerInspector, debugNodeOptions, debugNodeOptionsMap, defaultDriveOptions, defaultNodeOptions, fileNodeDropdownOptions, folderNodeDropdownOptions, formatEthAddress, formatFileSize, generateId, getFolderStatus, locationInfoByLocation, mapProgressStageToStatus, mapUploadsToFileItems, nodeOptions, normalNodeOptions, removeSuccessFiles, sharingTypeOptions, sortFilesByStatus, syncStatuses, useEns, verifyPackageJsonFields };
+export { About, AccountPopover, AccountPopoverLogin, AddDriveModal, AddLocalDriveForm, AddRemoteDriveForm, AnimatedLoader, AvailablePackagesPanel, Breadcrumb, Breadcrumbs, CONFLICT, CatchUpInspector, ChannelInspector, Combobox, ConnectConfirmationModal, ConnectDeleteDriveModal, ConnectDeleteItemModal, ConnectDropdownMenu, ConnectReplaceDuplicateModal, ConnectSearchBar, ConnectSelect, ConnectSidebar, ConnectSidebarFooter, ConnectSidebarHeader, ConnectTooltip, ConnectTooltipProvider, ConnectUpgradeDriveModal, ConnectionStateBadge, CookieBanner, CreateDocumentModal, CreateDocumentWithTypeModal, DBExplorer, DangerZone, DebugInspector, DefaultEditor, DefaultEditorLoader, DefaultEditorSelect, DependencyVersions, Disclosure, Divider, DocumentStateViewer, DocumentTimeline, DocumentToolbar, DriveAuthGate, DriveSettingsModal, DropZone, DropZoneWrapper, ENSAvatar, ERROR, EditorActionButtons, EditorUndoRedoButtons, FileItem, FolderItem, Footer, FooterLink, FormInput, FormattedJsonViewer, HomeBackgroundImage, HomeScreen, HomeScreenAddDriveItem, HomeScreenItem, INITIAL_SYNC, InspectorModal, InstalledPackagesPanel, IntegrityInspector, LoadingScreen, LogoAnimation, MISSING, ModalButton, NodeInput, ObjectInspectorModal, PackageInstallModal, PackageList, PackageManager, PackageManagerListItem, PackagePanelScrollArea, PackageRegistryError, PackageSubSection, PeerAgreementPanel, ProcessorsInspector, QueueInspector, ReadRequiredModal, RemotesInspector, RenownLoginMethods, RevisionHistory, SUCCESS, SYNCING, SettingsModal, SidebarAddDriveItem, SidebarItem, SidebarLogin, SidebarUser, SyncStatusIcon, TabContent, Tabs, ThemeSwitch, Toggle, ToolbarButton, ToolbarCloseButton, ToolbarContainer, ToolbarControlsContainer, ToolbarDownloadButton, ToolbarHistoryButton, ToolbarInput, ToolbarName, ToolbarRedoButton, ToolbarSwitchboardButton, ToolbarUndoButton, UploadFileItem, UploadFileList, UploadFileListContainer, WorkerInspector, debugNodeOptions, debugNodeOptionsMap, defaultDriveOptions, defaultNodeOptions, fileNodeDropdownOptions, folderNodeDropdownOptions, formatEthAddress, formatFileSize, generateId, getFolderStatus, locationInfoByLocation, mapProgressStageToStatus, mapUploadsToFileItems, nodeOptions, normalNodeOptions, peerManifestLabel, removeSuccessFiles, sharingTypeOptions, sortFilesByStatus, syncStatuses, useEns, verifyPackageJsonFields };
 
 //# sourceMappingURL=index.js.map