@powerhousedao/design-system 6.2.3-dev.32 → 6.2.3-dev.33

package/dist/connect/index.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, {
@@ -6733,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 = [
 	{
@@ -6760,6 +7240,11 @@ const BASE_COLUMNS = [
 		label: "Filter",
 		width: "200px"
 	},
+	{
+		key: "peer",
+		label: "Peer",
+		width: "160px"
+	},
 	{
 		key: "channel",
 		label: "Channel",
@@ -6806,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();
@@ -6814,6 +7299,7 @@ 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 () => {
@@ -6825,6 +7311,18 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 	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) {
@@ -6837,7 +7335,7 @@ function RemotesInspector({ getRemotes, removeRemote, addRemoteManual, triggerPu
 		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,
@@ -6883,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",
@@ -6946,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),
@@ -7016,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", {
@@ -7189,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: {
@@ -7274,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",
@@ -9755,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