@sentinel-core/sentinel 1.0.40 → 1.0.42

package/dist/sentinel.es.js

@@ -2306,13 +2306,13 @@ function G(...e) {
 //#region src/ui/components/Tabs.tsx
 var pn = Ae, mn = e.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ e.createElement(Ne, {
 	ref: r,
-	className: G("inline-flex h-10 items-center justify-center rounded-md bg-muted !p-1 text-muted-foreground", t),
+	className: G("inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", t),
 	...n
 }));
 mn.displayName = Ne.displayName;
 var K = e.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ e.createElement(ze, {
 	ref: r,
-	className: G("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3! py-1.5! text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs", t),
+	className: G("inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs", t),
 	...n
 }));
 K.displayName = ze.displayName;
@@ -4024,7 +4024,7 @@ var Co = (e) => {
 	let [t] = e.split(":");
 	return t.replace(/\\/g, "/").split("/").slice(-3).join("/");
 }, Oo = () => {
-	let { openDialogId: e, closeDialog: n, dialogMeta: r } = rd();
+	let { openDialogId: e, closeDialog: n, dialogMeta: r } = ad();
 	return /* @__PURE__ */ t.createElement($i, {
 		open: e !== null,
 		onOpenChange: (e) => !e && n()
@@ -4034,7 +4034,13 @@ var Co = (e) => {
 	}, /* @__PURE__ */ t.createElement(na, { className: "h-fit overflow-y-auto" }, /* @__PURE__ */ t.createElement(ra, null, /* @__PURE__ */ t.createElement(aa, { className: "text-center" }, /* @__PURE__ */ t.createElement("span", { className: "flex items-center justify-center gap-2" }, r != null && r.componentName ? /* @__PURE__ */ t.createElement("span", null, /* @__PURE__ */ t.createElement("span", { className: "text-muted-foreground font-normal" }, "<"), r.componentName, /* @__PURE__ */ t.createElement("span", { className: "text-muted-foreground font-normal" }, " />")) : "Sentinel", (r == null ? void 0 : r.renderCount) !== void 0 && /* @__PURE__ */ t.createElement("span", { className: "text-xs font-normal bg-muted text-muted-foreground px-1.5 py-0.5 rounded-full" }, "×", r.renderCount)), (r == null ? void 0 : r.sourceFile) && /* @__PURE__ */ t.createElement("a", {
 		href: `vscode://file/${r.sourceFile}`,
 		className: "block text-xs font-normal text-muted-foreground hover:text-sky-400 transition-colors mt-0.5 font-mono"
-	}, Do(r.sourceFile))), /* @__PURE__ */ t.createElement(oa, null, /* @__PURE__ */ t.createElement(mn, { className: "grid w-full grid-cols-4" }, /* @__PURE__ */ t.createElement(K, { value: "md" }, ".md"), /* @__PURE__ */ t.createElement(K, { value: "props-tracker" }, "Props Tracker"), /* @__PURE__ */ t.createElement(K, { value: "api-layer" }, "API Layer"), /* @__PURE__ */ t.createElement(K, { value: "event-tracker" }, "Event Tracker")))), /* @__PURE__ */ t.createElement(q, { value: "md" }, /* @__PURE__ */ t.createElement(da, { content: (r == null ? void 0 : r.md) || "" })), /* @__PURE__ */ t.createElement(q, { value: "props-tracker" }, r.componentProps && /* @__PURE__ */ t.createElement(Eo, {
+	}, Do(r.sourceFile)), (r == null ? void 0 : r.externalLinks) && r.externalLinks.length > 0 && /* @__PURE__ */ t.createElement("span", { className: "flex items-center justify-center gap-2 mt-1" }, r.externalLinks.map((e) => /* @__PURE__ */ t.createElement("a", {
+		key: e.url,
+		href: e.url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		className: "text-xs font-normal text-sky-400 hover:text-sky-300 transition-colors"
+	}, e.label, " →")))), /* @__PURE__ */ t.createElement(oa, null, /* @__PURE__ */ t.createElement(mn, { className: "grid w-full grid-cols-4" }, /* @__PURE__ */ t.createElement(K, { value: "md" }, ".md"), /* @__PURE__ */ t.createElement(K, { value: "props-tracker" }, "Props Tracker"), /* @__PURE__ */ t.createElement(K, { value: "api-layer" }, "API Layer"), /* @__PURE__ */ t.createElement(K, { value: "event-tracker" }, "Event Tracker")))), /* @__PURE__ */ t.createElement(q, { value: "md" }, /* @__PURE__ */ t.createElement(da, { content: (r == null ? void 0 : r.md) || "" })), /* @__PURE__ */ t.createElement(q, { value: "props-tracker" }, r.componentProps && /* @__PURE__ */ t.createElement(Eo, {
 		data: r.componentProps,
 		history: r.propHistory
 	})), /* @__PURE__ */ t.createElement(q, { value: "api-layer" }), /* @__PURE__ */ t.createElement(q, { value: "event-tracker" }), /* @__PURE__ */ t.createElement(ia, null))));
@@ -6041,28 +6047,53 @@ var Fu = 100, Iu = (e) => {
 	resolved: "text-emerald-400",
 	rejected: "text-red-400",
 	cancelled: "text-muted-foreground"
-}, Wu = ({ effects: e }) => e.length === 0 ? /* @__PURE__ */ t.createElement("div", { className: "py-4 text-center text-xs text-muted-foreground" }, "No calls captured yet.") : /* @__PURE__ */ t.createElement(_o, {
-	type: "multiple",
-	className: "w-full font-mono text-xs"
-}, e.map((e) => {
-	var n, r;
-	return /* @__PURE__ */ t.createElement(vo, {
-		key: e.id,
-		value: String(e.id)
-	}, /* @__PURE__ */ t.createElement(bo, { className: "py-2 px-2 hover:no-underline hover:bg-muted/50 rounded font-mono text-xs font-normal" }, /* @__PURE__ */ t.createElement("span", { className: G("shrink-0 w-4 text-center", Uu[e.status]) }, Hu[e.status]), /* @__PURE__ */ t.createElement("span", { className: "flex-1 truncate text-left text-foreground mx-2" }, e.fnName), e.duration !== void 0 && /* @__PURE__ */ t.createElement("span", { className: "shrink-0 text-muted-foreground mr-1" }, e.duration, "ms")), /* @__PURE__ */ t.createElement(xo, { className: "pb-2! pt-0 px-2" }, /* @__PURE__ */ t.createElement("div", { className: "space-y-1.5" }, ((n = (r = e.args) == null ? void 0 : r.length) == null ? 0 : n) > 0 && /* @__PURE__ */ t.createElement("div", { className: "bg-muted p-2! rounded overflow-x-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "text-muted-foreground mb-1!" }, "args"), /* @__PURE__ */ t.createElement(ma, {
-		value: e.args,
-		collapseFromDepth: 1
-	})), e.result !== void 0 && /* @__PURE__ */ t.createElement("div", { className: "bg-primary text-primary-foreground p-2! rounded overflow-x-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "text-muted-foreground mb-1" }, "result"), /* @__PURE__ */ t.createElement(ma, {
-		value: e.result,
-		collapseFromDepth: 1
-	})), e.error !== void 0 && /* @__PURE__ */ t.createElement("div", { className: "bg-destructive/10 text-destructive p-2 rounded overflow-x-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "mb-1! font-medium" }, "error"), /* @__PURE__ */ t.createElement(ma, {
-		value: e.error instanceof Error ? e.error.message : e.error,
-		collapseFromDepth: 1
-	})))));
-})), Gu = ({ effects: e, onClear: n }) => {
-	let r = e == null ? [] : e, [i, a] = t.useState(""), [o, s] = t.useState(!1), c = i ? r.filter((e) => e.fnName.toLowerCase().includes(i.toLowerCase())) : r;
+}, Wu = (e, t) => {
+	try {
+		return wo(e, t) !== void 0;
+	} catch {
+		try {
+			var n;
+			return ((n = JSON.stringify(e)) == null ? "" : n).toLowerCase().includes(t);
+		} catch {
+			return !1;
+		}
+	}
+}, Gu = (e, t) => !!(e.fnName.toLowerCase().includes(t) || Wu(e.args, t) || e.result !== void 0 && Wu(e.result, t) || e.error !== void 0 && Wu(e.error, t)), Ku = ({ effects: e, search: n = "" }) => {
+	let r = n.toLowerCase(), i = r ? e.filter((e) => Gu(e, r)) : e, [a, o] = t.useState([]);
+	return t.useEffect(() => {
+		o(r ? i.map((e) => String(e.id)) : []);
+	}, [n]), e.length === 0 ? /* @__PURE__ */ t.createElement("div", { className: "py-4 text-center text-xs text-muted-foreground" }, "No calls captured yet.") : i.length === 0 ? /* @__PURE__ */ t.createElement("span", { className: "text-muted-foreground italic text-xs px-1" }, "No results for \"", n, "\"") : /* @__PURE__ */ t.createElement(_o, {
+		type: "multiple",
+		value: a,
+		onValueChange: o,
+		className: "w-full font-mono text-xs"
+	}, i.map((e) => {
+		var n, i, a, o, s;
+		let c = (e) => {
+			try {
+				return wo(e, r);
+			} catch {
+				return;
+			}
+		}, l = r ? (n = c(e.args)) == null ? e.args : n : e.args, u = r && e.result !== void 0 ? (i = c(e.result)) == null ? e.result : i : e.result, d = r && e.error !== void 0 ? (a = c(e.error)) == null ? e.error : a : e.error;
+		return /* @__PURE__ */ t.createElement(vo, {
+			key: e.id,
+			value: String(e.id)
+		}, /* @__PURE__ */ t.createElement(bo, { className: "py-2 px-2 hover:no-underline hover:bg-muted/50 rounded font-mono text-xs font-normal" }, /* @__PURE__ */ t.createElement("span", { className: G("shrink-0 w-4 text-center", Uu[e.status]) }, Hu[e.status]), /* @__PURE__ */ t.createElement("span", { className: "flex-1 truncate text-left text-foreground mx-2" }, e.fnName), e.duration !== void 0 && /* @__PURE__ */ t.createElement("span", { className: "shrink-0 text-muted-foreground mr-1" }, e.duration, "ms")), /* @__PURE__ */ t.createElement(xo, { className: "pb-2! pt-0 px-2" }, /* @__PURE__ */ t.createElement("div", { className: "space-y-1.5" }, ((o = (s = e.args) == null ? void 0 : s.length) == null ? 0 : o) > 0 && /* @__PURE__ */ t.createElement("div", { className: "bg-muted p-2! rounded overflow-x-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "text-muted-foreground mb-1!" }, "args"), /* @__PURE__ */ t.createElement(ma, {
+			value: l,
+			collapseFromDepth: r ? 10 : 1
+		})), e.result !== void 0 && /* @__PURE__ */ t.createElement("div", { className: "bg-primary text-primary-foreground p-2! rounded overflow-x-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "text-muted-foreground mb-1" }, "result"), /* @__PURE__ */ t.createElement(ma, {
+			value: u,
+			collapseFromDepth: r ? 10 : 1
+		})), d !== void 0 && /* @__PURE__ */ t.createElement("div", { className: "bg-destructive/10 text-destructive p-2 rounded overflow-x-hidden" }, /* @__PURE__ */ t.createElement("div", { className: "mb-1! font-medium" }, "error"), /* @__PURE__ */ t.createElement(ma, {
+			value: d instanceof Error ? d.message : d,
+			collapseFromDepth: r ? 10 : 1
+		})))));
+	}));
+}, qu = ({ effects: e, onClear: n }) => {
+	let r = e == null ? [] : e, [i, a] = t.useState(""), [o, s] = t.useState(!1);
 	return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: "py-3! space-y-2!" }, /* @__PURE__ */ t.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ t.createElement(So, {
-		placeholder: "Search calls…",
+		placeholder: "Deep search calls…",
 		value: i,
 		onChange: (e) => a(e.target.value),
 		className: "h-7 text-xs"
@@ -6073,23 +6104,29 @@ var Fu = 100, Iu = (e) => {
 		onClick: () => s(!0),
 		title: "Expand",
 		className: "shrink-0 text-muted-foreground hover:text-foreground transition-colors"
-	}, /* @__PURE__ */ t.createElement(ho, { size: 14 }))), /* @__PURE__ */ t.createElement("div", { className: "max-h-60 overflow-y-auto" }, /* @__PURE__ */ t.createElement(Wu, { effects: c }))), /* @__PURE__ */ t.createElement($i, {
+	}, /* @__PURE__ */ t.createElement(ho, { size: 14 }))), /* @__PURE__ */ t.createElement("div", { className: "max-h-60 overflow-y-auto" }, /* @__PURE__ */ t.createElement(Ku, {
+		effects: r,
+		search: i
+	}))), /* @__PURE__ */ t.createElement($i, {
 		open: o,
 		onOpenChange: s
 	}, /* @__PURE__ */ t.createElement(na, { className: "flex flex-col overflow-hidden" }, /* @__PURE__ */ t.createElement(ra, null, /* @__PURE__ */ t.createElement(aa, null, "Saga Calls")), /* @__PURE__ */ t.createElement(So, {
-		placeholder: "Search calls…",
+		placeholder: "Deep search calls…",
 		value: i,
 		onChange: (e) => a(e.target.value),
 		className: "h-8 text-sm shrink-0"
-	}), /* @__PURE__ */ t.createElement("div", { className: "overflow-y-auto min-h-0 flex-1" }, /* @__PURE__ */ t.createElement(Wu, { effects: c })))));
-}, Ku = ({ monitor: e, serverEffects: n }) => {
+	}), /* @__PURE__ */ t.createElement("div", { className: "overflow-y-auto min-h-0 flex-1" }, /* @__PURE__ */ t.createElement(Ku, {
+		effects: r,
+		search: i
+	})))));
+}, Ju = ({ monitor: e, serverEffects: n }) => {
 	let [r, i] = t.useState(() => {
 		var t;
 		return (t = e == null ? void 0 : e._getEffects()) == null ? [] : t;
 	});
 	return t.useEffect(() => {
 		if (e) return i(e._getEffects()), e._subscribe(() => i(e._getEffects()));
-	}, [e]), n == null ? e ? /* @__PURE__ */ t.createElement(Gu, {
+	}, [e]), n == null ? e ? /* @__PURE__ */ t.createElement(qu, {
 		effects: r,
 		onClear: () => e._clear()
 	}) : /* @__PURE__ */ t.createElement("div", { className: "py-6 text-center text-sm text-muted-foreground" }, "No saga monitor connected.", /* @__PURE__ */ t.createElement("span", { className: "block mt-1 text-xs font-mono" }, "sagaMonitor={sentinelMonitor}")) : /* @__PURE__ */ t.createElement(pn, { defaultValue: "server" }, /* @__PURE__ */ t.createElement(mn, { className: "grid w-full grid-cols-2 mx-0 rounded-none border-b bg-transparent h-8 gap-1 mt-2" }, /* @__PURE__ */ t.createElement(K, {
@@ -6101,15 +6138,15 @@ var Fu = 100, Iu = (e) => {
 	}, "Server")), /* @__PURE__ */ t.createElement(q, {
 		value: "client",
 		className: "mt-0"
-	}, e ? /* @__PURE__ */ t.createElement(Gu, {
+	}, e ? /* @__PURE__ */ t.createElement(qu, {
 		effects: r,
 		onClear: () => e._clear()
 	}) : /* @__PURE__ */ t.createElement("div", { className: "py-4 text-center text-xs text-muted-foreground" }, "No client monitor connected.")), /* @__PURE__ */ t.createElement(q, {
 		value: "server",
 		className: "mt-0"
-	}, /* @__PURE__ */ t.createElement(Gu, { effects: n })));
-}, qu = ({ sagaMonitor: e, serverState: n, serverSagaEffects: r }) => {
-	let { isActive: i, setIsActive: a, showOutlines: o, setShowOutlines: s, highlightName: c, setHighlightName: l, reduxStore: u } = nd();
+	}, /* @__PURE__ */ t.createElement(qu, { effects: n })));
+}, Yu = ({ sagaMonitor: e, serverState: n, serverSagaEffects: r }) => {
+	let { isActive: i, setIsActive: a, showOutlines: o, setShowOutlines: s, highlightName: c, setHighlightName: l, reduxStore: u } = id();
 	return /* @__PURE__ */ t.createElement(gn, null, /* @__PURE__ */ t.createElement("div", { className: "sentinel-root" }, /* @__PURE__ */ t.createElement("div", { className: "fixed bottom-4 right-4 z-[9999]" }, /* @__PURE__ */ t.createElement(lu, null, /* @__PURE__ */ t.createElement(uu, { className: G("flex h-10 w-10 items-center justify-center rounded-full border shadow-lg transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer", i ? "bg-primary text-primary-foreground border-primary/30" : "bg-background text-muted-foreground border-border hover:text-foreground") }, /* @__PURE__ */ t.createElement(go, { size: 18 })), /* @__PURE__ */ t.createElement(du, {
 		side: "top",
 		align: "end",
@@ -6163,13 +6200,13 @@ var Fu = 100, Iu = (e) => {
 	})), /* @__PURE__ */ t.createElement(q, {
 		value: "saga",
 		className: "mt-0"
-	}, /* @__PURE__ */ t.createElement(Ku, {
+	}, /* @__PURE__ */ t.createElement(Ju, {
 		monitor: e,
 		serverEffects: r
 	}))))))));
-}, Ju = "rgba(10, 10, 12, 0.72)", Yu = "blur(8px) saturate(140%) contrast(105%)", Xu = ({ children: e, active: n = !0 }) => {
+}, Xu = "rgba(10, 10, 12, 0.72)", Zu = "blur(8px) saturate(140%) contrast(105%)", Qu = ({ children: e, active: n = !0 }) => {
 	if (!n) return /* @__PURE__ */ t.createElement(t.Fragment, null, e);
-	let { activeRect: r } = nd();
+	let { activeRect: r } = id();
 	return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(gn, null, /* @__PURE__ */ t.createElement("div", { className: "sentinel-root" }, r && /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", {
 		className: "pointer-events-none fixed z-[999]",
 		style: {
@@ -6177,9 +6214,9 @@ var Fu = 100, Iu = (e) => {
 			left: 0,
 			right: 0,
 			height: r.top,
-			background: Ju,
-			backdropFilter: Yu,
-			WebkitBackdropFilter: Yu
+			background: Xu,
+			backdropFilter: Zu,
+			WebkitBackdropFilter: Zu
 		}
 	}), /* @__PURE__ */ t.createElement("div", {
 		className: "pointer-events-none fixed z-[999]",
@@ -6188,9 +6225,9 @@ var Fu = 100, Iu = (e) => {
 			left: 0,
 			right: 0,
 			bottom: 0,
-			background: Ju,
-			backdropFilter: Yu,
-			WebkitBackdropFilter: Yu
+			background: Xu,
+			backdropFilter: Zu,
+			WebkitBackdropFilter: Zu
 		}
 	}), /* @__PURE__ */ t.createElement("div", {
 		className: "pointer-events-none fixed z-[999]",
@@ -6199,9 +6236,9 @@ var Fu = 100, Iu = (e) => {
 			left: 0,
 			width: r.left,
 			height: r.height,
-			background: Ju,
-			backdropFilter: Yu,
-			WebkitBackdropFilter: Yu
+			background: Xu,
+			backdropFilter: Zu,
+			WebkitBackdropFilter: Zu
 		}
 	}), /* @__PURE__ */ t.createElement("div", {
 		className: "pointer-events-none fixed z-[999]",
@@ -6210,9 +6247,9 @@ var Fu = 100, Iu = (e) => {
 			left: r.right,
 			right: 0,
 			height: r.height,
-			background: Ju,
-			backdropFilter: Yu,
-			WebkitBackdropFilter: Yu
+			background: Xu,
+			backdropFilter: Zu,
+			WebkitBackdropFilter: Zu
 		}
 	}), /* @__PURE__ */ t.createElement("div", {
 		className: "pointer-events-none fixed z-[1000]",
@@ -6225,76 +6262,86 @@ var Fu = 100, Iu = (e) => {
 			borderRadius: 4
 		}
 	})), e)));
-}, Zu = n(void 0), Qu = n(void 0), $u = ({ children: e, store: n, sagaMonitor: r, serverState: i, serverSagaEffects: o }) => {
-	let [c, u] = d(null), [f, p] = d(null), [m, h] = d(null), [g, _] = d({}), [v, y] = d(!1), [b, x] = d(!1), [S, C] = d("");
+}, $u = n(void 0), ed = n(void 0), td = ({ children: e, store: n, sagaMonitor: r, serverState: i, serverSagaEffects: o, externalLinks: c }) => {
+	let [u, f] = d(null), [p, m] = d(null), [h, g] = d(null), [_, v] = d({}), [y, b] = d(!1), [x, S] = d(!1), [C, w] = d("");
 	s(() => {
-		v || (u(null), p(null), h(null), _({}));
-	}, [v]), s(() => {
+		y || (f(null), m(null), g(null), v({}));
+	}, [y]), s(() => {
 		let e = (e) => {
-			e.ctrlKey && e.shiftKey && e.key === "S" && y((e) => !e);
+			e.ctrlKey && e.shiftKey && e.key === "S" && b((e) => !e);
 		};
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
 	}, []);
-	let w = a((e, t) => {
-		u(e), p(t);
+	let T = a((e, t) => {
+		f(e), m(t);
 	}, []);
 	s(() => {
 		let e = () => {
-			u(null), p(null);
+			f(null), m(null);
 		};
 		return window.addEventListener("scroll", e, !0), () => window.removeEventListener("scroll", e, !0);
 	}, []);
-	let T = a((e) => {
-		u((t) => t === e ? (p(null), null) : t);
-	}, []), E = a((e, t, n, r, i, a, o) => {
-		h(e), _({
+	let E = a((e) => {
+		f((t) => t === e ? (m(null), null) : t);
+	}, []), D = a((e, t, n, i, a, s, l) => {
+		var u;
+		let d = [...(u = r == null ? void 0 : r._getEffects()) == null ? [] : u, ...o == null ? [] : o], f = c == null ? void 0 : c.filter((e) => t && i && e.match(t, i)).map((e) => ({
+			label: e.label,
+			url: e.url(i == null ? {} : i, d)
+		})).filter((e) => e.url);
+		g(e), v({
 			componentName: t,
-			sourceFile: i,
-			renderCount: a,
-			propHistory: o,
+			sourceFile: a,
+			renderCount: s,
+			propHistory: l,
 			md: n,
-			componentProps: r
+			componentProps: i,
+			externalLinks: f
 		});
-	}, []), D = a(() => {
-		h(null), _({});
-	}, []), O = l(() => ({
-		activeId: c,
-		activeRect: f,
-		isActive: v,
-		setIsActive: y,
-		showOutlines: b,
-		setShowOutlines: x,
-		highlightName: S,
-		setHighlightName: C,
+	}, [
+		c,
+		r,
+		o
+	]), O = a(() => {
+		g(null), v({});
+	}, []), k = l(() => ({
+		activeId: u,
+		activeRect: p,
+		isActive: y,
+		setIsActive: b,
+		showOutlines: x,
+		setShowOutlines: S,
+		highlightName: C,
+		setHighlightName: w,
 		reduxStore: n,
-		registerHover: w,
-		unregisterHover: T,
-		openDialog: E
+		registerHover: T,
+		unregisterHover: E,
+		openDialog: D
 	}), [
-		c,
-		f,
-		v,
-		b,
-		S,
+		u,
+		p,
+		y,
+		x,
+		C,
 		n,
-		w,
 		T,
-		E
-	]), k = l(() => ({
-		openDialogId: m,
-		dialogMeta: g,
-		closeDialog: D
-	}), [
-		m,
-		g,
+		E,
 		D
+	]), A = l(() => ({
+		openDialogId: h,
+		dialogMeta: _,
+		closeDialog: O
+	}), [
+		h,
+		_,
+		O
 	]);
-	return /* @__PURE__ */ t.createElement(Zu.Provider, { value: O }, /* @__PURE__ */ t.createElement(Qu.Provider, { value: k }, e, /* @__PURE__ */ t.createElement(Xu, { active: v }, /* @__PURE__ */ t.createElement(Oo, null)), /* @__PURE__ */ t.createElement(qu, {
+	return /* @__PURE__ */ t.createElement($u.Provider, { value: k }, /* @__PURE__ */ t.createElement(ed.Provider, { value: A }, e, /* @__PURE__ */ t.createElement(Qu, { active: y }, /* @__PURE__ */ t.createElement(Oo, null)), /* @__PURE__ */ t.createElement(Yu, {
 		sagaMonitor: r,
 		serverState: i,
 		serverSagaEffects: o
 	})));
-}, ed = {
+}, nd = {
 	activeId: null,
 	activeRect: null,
 	isActive: !1,
@@ -6307,18 +6354,18 @@ var Fu = 100, Iu = (e) => {
 	registerHover: () => {},
 	unregisterHover: () => {},
 	openDialog: () => {}
-}, td = {
+}, rd = {
 	openDialogId: null,
 	dialogMeta: {},
 	closeDialog: () => {}
-}, nd = () => {
+}, id = () => {
 	var e;
-	return (e = o(Zu)) == null ? ed : e;
-}, rd = () => {
+	return (e = o($u)) == null ? nd : e;
+}, ad = () => {
 	var e;
-	return (e = o(Qu)) == null ? td : e;
-}, id = () => {
-	let e = nd(), t = rd();
+	return (e = o(ed)) == null ? rd : e;
+}, od = () => {
+	let e = id(), t = ad();
 	return {
 		...e,
 		...t
@@ -6326,7 +6373,7 @@ var Fu = 100, Iu = (e) => {
 };
 //#endregion
 //#region src/utils/safeSerialize.ts
-function ad(e, t = 0, n = /* @__PURE__ */ new WeakSet()) {
+function sd(e, t = 0, n = /* @__PURE__ */ new WeakSet()) {
 	if (t > 6) return "[Max Depth]";
 	if (e === null) return null;
 	if (typeof e == "function") return "[Function]";
@@ -6334,15 +6381,15 @@ function ad(e, t = 0, n = /* @__PURE__ */ new WeakSet()) {
 	if (n.has(e)) return "[Circular]";
 	if (n.add(e), "$$typeof" in e) return "[React Element]";
 	if ("_context" in e || "Provider" in e && "Consumer" in e) return "[React Context]";
-	if (Array.isArray(e)) return e.map((e) => ad(e, t + 1, n));
+	if (Array.isArray(e)) return e.map((e) => sd(e, t + 1, n));
 	let r = {};
-	for (let [i, a] of Object.entries(e)) i.startsWith("__react") || i.startsWith("_react") || i === "_owner" || (r[i] = ad(a, t + 1, n));
+	for (let [i, a] of Object.entries(e)) i.startsWith("__react") || i.startsWith("_react") || i === "_owner" || (r[i] = sd(a, t + 1, n));
 	return r;
 }
 //#endregion
 //#region src/react/Sentinel.tsx
-var od = ({ children: e, componentName: n, sourceFile: r, renderCount: i, dialogMd: a, componentProps: o }) => {
-	let s = M(), { isActive: c, showOutlines: l, highlightName: d, registerHover: f, unregisterHover: p, openDialog: m } = nd(), h = u([]), g = u(""), _ = o ? ad(o) : void 0, v = _ ? JSON.stringify(_) : "";
+var cd = ({ children: e, componentName: n, sourceFile: r, renderCount: i, dialogMd: a, componentProps: o }) => {
+	let s = M(), { isActive: c, showOutlines: l, highlightName: d, registerHover: f, unregisterHover: p, openDialog: m } = id(), h = u([]), g = u(""), _ = o ? sd(o) : void 0, v = _ ? JSON.stringify(_) : "";
 	if (_ && v !== g.current && (g.current = v, h.current = [_, ...h.current].slice(0, 6)), !c) return /* @__PURE__ */ t.createElement(t.Fragment, null, e);
 	let y = !!d && !!n && n.toLowerCase().includes(d.toLowerCase());
 	return /* @__PURE__ */ t.createElement("div", {
@@ -6363,6 +6410,31 @@ var od = ({ children: e, componentName: n, sourceFile: r, renderCount: i, dialog
 			borderRadius: "inherit"
 		}
 	}, e));
+}, ld = (e, t) => {
+	for (let i of t) {
+		var n, r;
+		if (i.fnName !== "getFragments" || !Array.isArray((n = i.args) == null ? void 0 : n[0])) continue;
+		let t = i.args[0].findIndex((t) => t.id === e);
+		if (t === -1 || !Array.isArray(i.result)) continue;
+		let a = (r = i.result[t]) == null || (r = r.result) == null ? void 0 : r.config;
+		if (!(a != null && a.url)) continue;
+		let o = a.params && Object.keys(a.params).length ? "?" + new URLSearchParams(a.params).toString() : "";
+		return a.url + o;
+	}
+	return "";
+}, ud = (e = {}) => {
+	var t;
+	return {
+		label: (t = e.label) == null ? "Open in Microfrontend" : t,
+		match: (e, t) => {
+			var n;
+			return (t == null || (n = t.fragmentInfo) == null ? void 0 : n.id) != null;
+		},
+		url: (e, t) => {
+			var n;
+			return ld((n = e.fragmentInfo) == null ? void 0 : n.id, t);
+		}
+	};
 };
 //#endregion
-export { od as Sentinel, $u as SentinelProvider, Ru as createSentinelSagaMonitor, id as useSentinel, rd as useSentinelDialog, nd as useSentinelInteraction };
+export { cd as Sentinel, td as SentinelProvider, Ru as createSentinelSagaMonitor, od as useSentinel, ad as useSentinelDialog, id as useSentinelInteraction, ud as voltranExternalLink };

package/dist/src/react/index.d.ts

@@ -1,5 +1,7 @@
 export { Sentinel } from './Sentinel';
 export { SentinelProvider } from './provider';
 export { useSentinel, useSentinelInteraction, useSentinelDialog } from './provider';
+export type { ExternalLink } from './provider';
+export { voltranExternalLink } from './voltranExternalLink';
 export { createSentinelSagaMonitor } from '../saga/createSentinelSagaMonitor';
 export type { SentinelSagaMonitor, EffectRecord, EffectStatus } from '../saga/createSentinelSagaMonitor';

package/dist/src/react/provider.d.ts

@@ -1,5 +1,14 @@
 import { default as React } from 'react';
 import { SentinelSagaMonitor, EffectRecord } from '../saga/createSentinelSagaMonitor';
+export type ExternalLink = {
+    match: (componentName: string, props: Record<string, any>) => boolean;
+    url: (props: Record<string, any>, sagaEffects: EffectRecord[]) => string;
+    label: string;
+};
+type ResolvedExternalLink = {
+    label: string;
+    url: string;
+};
 type DialogMeta = {
     componentName?: string;
     sourceFile?: string;
@@ -7,6 +16,7 @@ type DialogMeta = {
     propHistory?: Record<string, any>[];
     md?: string;
     componentProps?: Record<string, any>;
+    externalLinks?: ResolvedExternalLink[];
 };
 export type ReduxStore = {
     getState: () => unknown;
@@ -31,12 +41,13 @@ type SentinelDialogContextType = {
     dialogMeta: DialogMeta;
     closeDialog: () => void;
 };
-export declare const SentinelProvider: ({ children, store: reduxStore, sagaMonitor, serverState, serverSagaEffects, }: {
+export declare const SentinelProvider: ({ children, store: reduxStore, sagaMonitor, serverState, serverSagaEffects, externalLinks, }: {
     children: React.ReactNode;
     store?: ReduxStore;
     sagaMonitor?: SentinelSagaMonitor;
     serverState?: unknown;
     serverSagaEffects?: EffectRecord[];
+    externalLinks?: ExternalLink[];
 }) => React.JSX.Element;
 export declare const useSentinelInteraction: () => SentinelInteractionContextType;
 export declare const useSentinelDialog: () => SentinelDialogContextType;

package/dist/src/react/voltranExternalLink.d.ts

@@ -0,0 +1,6 @@
+import { ExternalLink } from './provider';
+type VoltranExternalLinkOptions = {
+    label?: string;
+};
+export declare const voltranExternalLink: (options?: VoltranExternalLinkOptions) => ExternalLink;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentinel-core/sentinel",
-  "version": "1.0.40",
+  "version": "1.0.42",
   "description": "Runtime intelligence for your UI.",
   "author": "firatorhan",
   "private": false,