@burdenoff/microfe-vibecontrols 2026.601.21 → 2026.601.22

package/dist/pages/tunnels/TunnelDetailsPage.js

@@ -4,145 +4,159 @@ import { PageHeader as n } from "../../components/shared/PageHeader.js";
 import { LoadingState as r } from "../../components/shared/LoadingState.js";
 import { ErrorState as i } from "../../components/shared/ErrorState.js";
 import { EntityTagPicker as a } from "../../components/shared/EntityTagPicker.js";
-import { TunnelStatusBadge as o } from "../../components/tunnels/TunnelStatusBadge.js";
-import { ProviderBadge as s } from "../../components/tunnels/ProviderBadge.js";
-import { TunnelOverviewTab as c } from "./tabs/TunnelOverviewTab.js";
-import { TunnelEndpointsTab as l } from "./tabs/TunnelEndpointsTab.js";
-import { TunnelSessionsTab as u } from "./tabs/TunnelSessionsTab.js";
-import { TunnelDomainsTab as d } from "./tabs/TunnelDomainsTab.js";
-import { TunnelUsageTab as f } from "./tabs/TunnelUsageTab.js";
-import { TunnelCliTab as p } from "./tabs/TunnelCliTab.js";
-import { TunnelAuditTab as m } from "./tabs/TunnelAuditTab.js";
-import { TunnelSettingsTab as h } from "./tabs/TunnelSettingsTab.js";
-import { useEffect as g, useMemo as _ } from "react";
-import { ArrowLeft as v, Tag as y } from "lucide-react";
-import { useNavigate as b, useParams as x, useSearchParams as S } from "react-router-dom";
-import { jsx as C, jsxs as w } from "react/jsx-runtime";
-import { Tabs as T } from "@burdenoff/fe-libs/chrome";
+import { EntityShareButton as o } from "../../components/sharing/EntityShareButton.js";
+import "../../components/sharing/index.js";
+import { TunnelStatusBadge as s } from "../../components/tunnels/TunnelStatusBadge.js";
+import { ProviderBadge as c } from "../../components/tunnels/ProviderBadge.js";
+import { TunnelOverviewTab as l } from "./tabs/TunnelOverviewTab.js";
+import { TunnelEndpointsTab as u } from "./tabs/TunnelEndpointsTab.js";
+import { TunnelSessionsTab as d } from "./tabs/TunnelSessionsTab.js";
+import { TunnelDomainsTab as f } from "./tabs/TunnelDomainsTab.js";
+import { TunnelUsageTab as p } from "./tabs/TunnelUsageTab.js";
+import { TunnelCliTab as m } from "./tabs/TunnelCliTab.js";
+import { TunnelAuditTab as h } from "./tabs/TunnelAuditTab.js";
+import { TunnelSettingsTab as g } from "./tabs/TunnelSettingsTab.js";
+import { useEffect as _, useMemo as v } from "react";
+import { ArrowLeft as y, Tag as b } from "lucide-react";
+import { useNavigate as x, useParams as S, useSearchParams as C } from "react-router-dom";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
+import { Tabs as E } from "@burdenoff/fe-libs/chrome";
 //#region src/pages/tunnels/TunnelDetailsPage.tsx
-function E() {
-	let E = t(), { tunnelId: D = "" } = x(), O = b(), [k, A] = S(), { data: j, loading: M, error: N, refetch: P, startPolling: F, stopPolling: I } = e({
-		variables: { id: D },
+function D() {
+	let D = t(), { tunnelId: O = "" } = S(), k = x(), [A, j] = C(), { data: M, loading: N, error: P, refetch: F, startPolling: I, stopPolling: L } = e({
+		variables: { id: O },
 		fetchPolicy: "cache-and-network",
-		skip: !D
-	}), L = j?.tunnel?.status === "PROVISIONING" || j?.tunnel?.status === "DELETING" || j?.tunnel?.status === "ACTIVE" && !j.tunnel.primaryDomain?.hostname;
-	g(() => {
-		L ? F(4e3) : I();
+		skip: !O
+	}), R = M?.tunnel?.status === "PROVISIONING" || M?.tunnel?.status === "DELETING" || M?.tunnel?.status === "ACTIVE" && !M.tunnel.primaryDomain?.hostname;
+	_(() => {
+		R ? I(4e3) : L();
 	}, [
-		L,
-		F,
-		I
+		R,
+		I,
+		L
 	]);
-	let R = _(() => [
+	let z = v(() => [
 		{
 			id: "overview",
-			label: E("vibecontrols.tunnels.detail.overview", "Overview")
+			label: D("vibecontrols.tunnels.detail.overview", "Overview")
 		},
 		{
 			id: "endpoints",
-			label: E("vibecontrols.tunnels.detail.endpoints", "Endpoints")
+			label: D("vibecontrols.tunnels.detail.endpoints", "Endpoints")
 		},
 		{
 			id: "sessions",
-			label: E("vibecontrols.tunnels.detail.sessions", "Sessions")
+			label: D("vibecontrols.tunnels.detail.sessions", "Sessions")
 		},
 		{
 			id: "domains",
-			label: E("vibecontrols.tunnels.detail.domains", "Domains")
+			label: D("vibecontrols.tunnels.detail.domains", "Domains")
 		},
 		{
 			id: "usage",
-			label: E("vibecontrols.tunnels.detail.usage", "Usage")
+			label: D("vibecontrols.tunnels.detail.usage", "Usage")
 		},
 		{
 			id: "cli",
-			label: E("vibecontrols.tunnels.detail.cli", "CLI")
+			label: D("vibecontrols.tunnels.detail.cli", "CLI")
 		},
 		{
 			id: "audit",
-			label: E("vibecontrols.tunnels.detail.audit", "Audit")
+			label: D("vibecontrols.tunnels.detail.audit", "Audit")
 		},
 		{
 			id: "settings",
-			label: E("vibecontrols.tunnels.detail.settings", "Settings")
+			label: D("vibecontrols.tunnels.detail.settings", "Settings")
 		}
-	], [E]), z = k.get("tab") ?? R[0].id, B = (e) => {
-		let t = new URLSearchParams(k);
-		e === R[0].id ? t.delete("tab") : t.set("tab", e), A(t, { replace: !0 });
+	], [D]), B = A.get("tab") ?? z[0].id, V = (e) => {
+		let t = new URLSearchParams(A);
+		e === z[0].id ? t.delete("tab") : t.set("tab", e), j(t, { replace: !0 });
 	};
-	if (M && !j) return /* @__PURE__ */ C(r, { message: "Loading tunnel" });
-	if (N) return /* @__PURE__ */ C(i, {
+	if (N && !M) return /* @__PURE__ */ w(r, { message: "Loading tunnel" });
+	if (P) return /* @__PURE__ */ w(i, {
 		title: "Failed to load tunnel",
-		message: N.message,
-		onRetry: () => P()
+		message: P.message,
+		onRetry: () => F()
 	});
-	if (!j?.tunnel) return /* @__PURE__ */ C(i, {
+	if (!M?.tunnel) return /* @__PURE__ */ w(i, {
 		title: "Tunnel not found",
 		message: "This tunnel may have been deleted.",
-		onRetry: () => O("/vibecontrols/tunnels")
+		onRetry: () => k("/vibecontrols/tunnels")
 	});
-	let V = j.tunnel;
-	return /* @__PURE__ */ w("div", {
+	let H = M.tunnel;
+	return /* @__PURE__ */ T("div", {
 		className: "flex flex-col h-full",
 		children: [
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ T("div", {
 				className: "px-6 pt-6 pb-2 border-b border-border-subtle",
 				children: [
-					/* @__PURE__ */ w("button", {
+					/* @__PURE__ */ T("button", {
 						type: "button",
-						onClick: () => O("/vibecontrols/tunnels"),
+						onClick: () => k("/vibecontrols/tunnels"),
 						className: "flex items-center gap-1.5 mb-4 text-sm text-text-secondary hover:text-text-primary transition-colors",
-						children: [/* @__PURE__ */ C(v, { size: 16 }), "Back to Tunnels"]
+						children: [/* @__PURE__ */ w(y, { size: 16 }), "Back to Tunnels"]
 					}),
-					/* @__PURE__ */ C(n, {
+					/* @__PURE__ */ w(n, {
 						breadcrumb: [{
 							label: "Tunnels",
 							path: "/vibecontrols/tunnels"
-						}, { label: V.name }],
-						title: V.name,
-						description: V.description ?? `${V.protocol}:${V.localPort} on ${V.localHost}`,
-						actions: /* @__PURE__ */ w("div", {
+						}, { label: H.name }],
+						title: H.name,
+						description: H.description ?? `${H.protocol}:${H.localPort} on ${H.localHost}`,
+						actions: /* @__PURE__ */ T("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ C(o, { status: V.status }), /* @__PURE__ */ C(s, { providerKey: V.providerKey })]
+							children: [
+								/* @__PURE__ */ w(s, { status: H.status }),
+								/* @__PURE__ */ w(c, { providerKey: H.providerKey }),
+								/* @__PURE__ */ w(o, {
+									entity: "tunnel",
+									resource: {
+										id: H.id,
+										name: H.name
+									},
+									label: D("vibecontrols.tunnels.detail.share", "Share"),
+									variant: "button"
+								})
+							]
 						})
 					}),
-					/* @__PURE__ */ C("div", {
+					/* @__PURE__ */ w("div", {
 						className: "mt-2",
-						children: /* @__PURE__ */ C(T, {
-							items: R,
-							activeTabId: z,
-							onTabChange: B,
+						children: /* @__PURE__ */ w(E, {
+							items: z,
+							activeTabId: B,
+							onTabChange: V,
 							variant: "underline"
 						})
 					})
 				]
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ T("div", {
 				className: "flex items-start gap-2 border-b border-border-subtle bg-bg-surface px-6 py-2",
-				children: [/* @__PURE__ */ C(y, {
+				children: [/* @__PURE__ */ w(b, {
 					className: "mt-1 size-4 flex-shrink-0 text-text-secondary",
 					"aria-hidden": "true"
-				}), /* @__PURE__ */ C("div", {
+				}), /* @__PURE__ */ w("div", {
 					className: "min-w-0 flex-1",
-					children: /* @__PURE__ */ C(a, {
+					children: /* @__PURE__ */ w(a, {
 						entityType: "VIBECONTROLS_TUNNEL",
-						entityId: V.id
+						entityId: H.id
 					})
 				})]
 			}),
-			/* @__PURE__ */ w("div", {
+			/* @__PURE__ */ T("div", {
 				className: "flex-1 min-h-0 overflow-auto p-6",
 				children: [
-					z === "overview" && /* @__PURE__ */ C(c, { tunnel: V }),
-					z === "endpoints" && /* @__PURE__ */ C(l, { tunnel: V }),
-					z === "sessions" && /* @__PURE__ */ C(u, { tunnelId: V.id }),
-					z === "domains" && /* @__PURE__ */ C(d, { tunnel: V }),
-					z === "usage" && /* @__PURE__ */ C(f, { tunnelId: V.id }),
-					z === "cli" && /* @__PURE__ */ C(p, { tunnel: V }),
-					z === "audit" && /* @__PURE__ */ C(m, { tunnelId: V.id }),
-					z === "settings" && /* @__PURE__ */ C(h, {
-						tunnel: V,
-						onDeleted: () => O("/vibecontrols/tunnels")
+					B === "overview" && /* @__PURE__ */ w(l, { tunnel: H }),
+					B === "endpoints" && /* @__PURE__ */ w(u, { tunnel: H }),
+					B === "sessions" && /* @__PURE__ */ w(d, { tunnelId: H.id }),
+					B === "domains" && /* @__PURE__ */ w(f, { tunnel: H }),
+					B === "usage" && /* @__PURE__ */ w(p, { tunnelId: H.id }),
+					B === "cli" && /* @__PURE__ */ w(m, { tunnel: H }),
+					B === "audit" && /* @__PURE__ */ w(h, { tunnelId: H.id }),
+					B === "settings" && /* @__PURE__ */ w(g, {
+						tunnel: H,
+						onDeleted: () => k("/vibecontrols/tunnels")
 					})
 				]
 			})
@@ -150,6 +164,6 @@ function E() {
 	});
 }
 //#endregion
-export { E as TunnelDetailsPage };
+export { D as TunnelDetailsPage };
 
 //# sourceMappingURL=TunnelDetailsPage.js.map

package/dist/pages/tunnels/TunnelDetailsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"TunnelDetailsPage.js","names":[],"sources":["../../../src/pages/tunnels/TunnelDetailsPage.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { useParams, useNavigate, useSearchParams } from 'react-router-dom';\nimport { Tabs, type TabItem } from '@burdenoff/fe-libs/chrome';\n\nimport { Tag, ArrowLeft } from 'lucide-react';\nimport { PageHeader } from '@/components/shared/PageHeader';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { LoadingState } from '@/components/shared/LoadingState';\nimport { ErrorState } from '@/components/shared/ErrorState';\nimport { TunnelStatusBadge } from '@/components/tunnels/TunnelStatusBadge';\nimport { ProviderBadge } from '@/components/tunnels/ProviderBadge';\nimport { useGetTunnelQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../shared/hooks/useTr';\n\nimport { TunnelOverviewTab } from './tabs/TunnelOverviewTab';\nimport { TunnelEndpointsTab } from './tabs/TunnelEndpointsTab';\nimport { TunnelSessionsTab } from './tabs/TunnelSessionsTab';\nimport { TunnelDomainsTab } from './tabs/TunnelDomainsTab';\nimport { TunnelUsageTab } from './tabs/TunnelUsageTab';\nimport { TunnelCliTab } from './tabs/TunnelCliTab';\nimport { TunnelAuditTab } from './tabs/TunnelAuditTab';\nimport { TunnelSettingsTab } from './tabs/TunnelSettingsTab';\n\nexport function TunnelDetailsPage() {\n  const tr = useTr();\n  const { tunnelId = '' } = useParams();\n  const navigate = useNavigate();\n  const [params, setParams] = useSearchParams();\n\n  const { data, loading, error, refetch, startPolling, stopPolling } = useGetTunnelQuery({\n    variables: { id: tunnelId },\n    fetchPolicy: 'cache-and-network',\n    skip: !tunnelId,\n  });\n\n  // Poll while transitioning OR ACTIVE-but-no-domain (Cloudflare URL arrives async).\n  const needsPoll =\n    data?.tunnel?.status === 'PROVISIONING' ||\n    data?.tunnel?.status === 'DELETING' ||\n    (data?.tunnel?.status === 'ACTIVE' && !data.tunnel.primaryDomain?.hostname);\n  useEffect(() => {\n    if (needsPoll) {\n      startPolling(4000);\n    } else {\n      stopPolling();\n    }\n  }, [needsPoll, startPolling, stopPolling]);\n\n  const tabs: TabItem[] = useMemo(\n    () => [\n      { id: 'overview', label: tr('vibecontrols.tunnels.detail.overview', 'Overview') },\n      { id: 'endpoints', label: tr('vibecontrols.tunnels.detail.endpoints', 'Endpoints') },\n      { id: 'sessions', label: tr('vibecontrols.tunnels.detail.sessions', 'Sessions') },\n      { id: 'domains', label: tr('vibecontrols.tunnels.detail.domains', 'Domains') },\n      { id: 'usage', label: tr('vibecontrols.tunnels.detail.usage', 'Usage') },\n      { id: 'cli', label: tr('vibecontrols.tunnels.detail.cli', 'CLI') },\n      { id: 'audit', label: tr('vibecontrols.tunnels.detail.audit', 'Audit') },\n      { id: 'settings', label: tr('vibecontrols.tunnels.detail.settings', 'Settings') },\n    ],\n    [tr]\n  );\n\n  const activeId = params.get('tab') ?? tabs[0].id;\n\n  const handleTabChange = (id: string) => {\n    const next = new URLSearchParams(params);\n    if (id === tabs[0].id) next.delete('tab');\n    else next.set('tab', id);\n    setParams(next, { replace: true });\n  };\n\n  if (loading && !data) return <LoadingState message=\"Loading tunnel\" />;\n  if (error) {\n    return (\n      <ErrorState title=\"Failed to load tunnel\" message={error.message} onRetry={() => refetch()} />\n    );\n  }\n  if (!data?.tunnel) {\n    return (\n      <ErrorState\n        title=\"Tunnel not found\"\n        message=\"This tunnel may have been deleted.\"\n        onRetry={() => navigate('/vibecontrols/tunnels')}\n      />\n    );\n  }\n\n  const tunnel = data.tunnel;\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"px-6 pt-6 pb-2 border-b border-border-subtle\">\n        <button\n          type=\"button\"\n          onClick={() => navigate('/vibecontrols/tunnels')}\n          className=\"flex items-center gap-1.5 mb-4 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n        >\n          <ArrowLeft size={16} />\n          Back to Tunnels\n        </button>\n        <PageHeader\n          breadcrumb={[{ label: 'Tunnels', path: '/vibecontrols/tunnels' }, { label: tunnel.name }]}\n          title={tunnel.name}\n          description={\n            tunnel.description ?? `${tunnel.protocol}:${tunnel.localPort} on ${tunnel.localHost}`\n          }\n          actions={\n            <div className=\"flex items-center gap-2\">\n              <TunnelStatusBadge status={tunnel.status} />\n              <ProviderBadge providerKey={tunnel.providerKey} />\n            </div>\n          }\n        />\n        <div className=\"mt-2\">\n          <Tabs\n            items={tabs}\n            activeTabId={activeId}\n            onTabChange={handleTabChange}\n            variant=\"underline\"\n          />\n        </div>\n      </div>\n      <div className=\"flex items-start gap-2 border-b border-border-subtle bg-bg-surface px-6 py-2\">\n        <Tag className=\"mt-1 size-4 flex-shrink-0 text-text-secondary\" aria-hidden=\"true\" />\n        <div className=\"min-w-0 flex-1\">\n          <EntityTagPicker entityType=\"VIBECONTROLS_TUNNEL\" entityId={tunnel.id} />\n        </div>\n      </div>\n      <div className=\"flex-1 min-h-0 overflow-auto p-6\">\n        {activeId === 'overview' && <TunnelOverviewTab tunnel={tunnel} />}\n        {activeId === 'endpoints' && <TunnelEndpointsTab tunnel={tunnel} />}\n        {activeId === 'sessions' && <TunnelSessionsTab tunnelId={tunnel.id} />}\n        {activeId === 'domains' && <TunnelDomainsTab tunnel={tunnel} />}\n        {activeId === 'usage' && <TunnelUsageTab tunnelId={tunnel.id} />}\n        {activeId === 'cli' && <TunnelCliTab tunnel={tunnel} />}\n        {activeId === 'audit' && <TunnelAuditTab tunnelId={tunnel.id} />}\n        {activeId === 'settings' && (\n          <TunnelSettingsTab tunnel={tunnel} onDeleted={() => navigate('/vibecontrols/tunnels')} />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TunnelDetailsPage.js","names":[],"sources":["../../../src/pages/tunnels/TunnelDetailsPage.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { useParams, useNavigate, useSearchParams } from 'react-router-dom';\nimport { Tabs, type TabItem } from '@burdenoff/fe-libs/chrome';\n\nimport { Tag, ArrowLeft } from 'lucide-react';\nimport { PageHeader } from '@/components/shared/PageHeader';\nimport { EntityTagPicker } from '@/components/shared/EntityTagPicker';\nimport { LoadingState } from '@/components/shared/LoadingState';\nimport { ErrorState } from '@/components/shared/ErrorState';\nimport { TunnelStatusBadge } from '@/components/tunnels/TunnelStatusBadge';\nimport { ProviderBadge } from '@/components/tunnels/ProviderBadge';\nimport { EntityShareButton } from '@/components/sharing';\nimport { useGetTunnelQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../shared/hooks/useTr';\n\nimport { TunnelOverviewTab } from './tabs/TunnelOverviewTab';\nimport { TunnelEndpointsTab } from './tabs/TunnelEndpointsTab';\nimport { TunnelSessionsTab } from './tabs/TunnelSessionsTab';\nimport { TunnelDomainsTab } from './tabs/TunnelDomainsTab';\nimport { TunnelUsageTab } from './tabs/TunnelUsageTab';\nimport { TunnelCliTab } from './tabs/TunnelCliTab';\nimport { TunnelAuditTab } from './tabs/TunnelAuditTab';\nimport { TunnelSettingsTab } from './tabs/TunnelSettingsTab';\n\nexport function TunnelDetailsPage() {\n  const tr = useTr();\n  const { tunnelId = '' } = useParams();\n  const navigate = useNavigate();\n  const [params, setParams] = useSearchParams();\n\n  const { data, loading, error, refetch, startPolling, stopPolling } = useGetTunnelQuery({\n    variables: { id: tunnelId },\n    fetchPolicy: 'cache-and-network',\n    skip: !tunnelId,\n  });\n\n  // Poll while transitioning OR ACTIVE-but-no-domain (Cloudflare URL arrives async).\n  const needsPoll =\n    data?.tunnel?.status === 'PROVISIONING' ||\n    data?.tunnel?.status === 'DELETING' ||\n    (data?.tunnel?.status === 'ACTIVE' && !data.tunnel.primaryDomain?.hostname);\n  useEffect(() => {\n    if (needsPoll) {\n      startPolling(4000);\n    } else {\n      stopPolling();\n    }\n  }, [needsPoll, startPolling, stopPolling]);\n\n  const tabs: TabItem[] = useMemo(\n    () => [\n      { id: 'overview', label: tr('vibecontrols.tunnels.detail.overview', 'Overview') },\n      { id: 'endpoints', label: tr('vibecontrols.tunnels.detail.endpoints', 'Endpoints') },\n      { id: 'sessions', label: tr('vibecontrols.tunnels.detail.sessions', 'Sessions') },\n      { id: 'domains', label: tr('vibecontrols.tunnels.detail.domains', 'Domains') },\n      { id: 'usage', label: tr('vibecontrols.tunnels.detail.usage', 'Usage') },\n      { id: 'cli', label: tr('vibecontrols.tunnels.detail.cli', 'CLI') },\n      { id: 'audit', label: tr('vibecontrols.tunnels.detail.audit', 'Audit') },\n      { id: 'settings', label: tr('vibecontrols.tunnels.detail.settings', 'Settings') },\n    ],\n    [tr]\n  );\n\n  const activeId = params.get('tab') ?? tabs[0].id;\n\n  const handleTabChange = (id: string) => {\n    const next = new URLSearchParams(params);\n    if (id === tabs[0].id) next.delete('tab');\n    else next.set('tab', id);\n    setParams(next, { replace: true });\n  };\n\n  if (loading && !data) return <LoadingState message=\"Loading tunnel\" />;\n  if (error) {\n    return (\n      <ErrorState title=\"Failed to load tunnel\" message={error.message} onRetry={() => refetch()} />\n    );\n  }\n  if (!data?.tunnel) {\n    return (\n      <ErrorState\n        title=\"Tunnel not found\"\n        message=\"This tunnel may have been deleted.\"\n        onRetry={() => navigate('/vibecontrols/tunnels')}\n      />\n    );\n  }\n\n  const tunnel = data.tunnel;\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"px-6 pt-6 pb-2 border-b border-border-subtle\">\n        <button\n          type=\"button\"\n          onClick={() => navigate('/vibecontrols/tunnels')}\n          className=\"flex items-center gap-1.5 mb-4 text-sm text-text-secondary hover:text-text-primary transition-colors\"\n        >\n          <ArrowLeft size={16} />\n          Back to Tunnels\n        </button>\n        <PageHeader\n          breadcrumb={[{ label: 'Tunnels', path: '/vibecontrols/tunnels' }, { label: tunnel.name }]}\n          title={tunnel.name}\n          description={\n            tunnel.description ?? `${tunnel.protocol}:${tunnel.localPort} on ${tunnel.localHost}`\n          }\n          actions={\n            <div className=\"flex items-center gap-2\">\n              <TunnelStatusBadge status={tunnel.status} />\n              <ProviderBadge providerKey={tunnel.providerKey} />\n              <EntityShareButton\n                entity=\"tunnel\"\n                resource={{ id: tunnel.id, name: tunnel.name }}\n                label={tr('vibecontrols.tunnels.detail.share', 'Share')}\n                variant=\"button\"\n              />\n            </div>\n          }\n        />\n        <div className=\"mt-2\">\n          <Tabs\n            items={tabs}\n            activeTabId={activeId}\n            onTabChange={handleTabChange}\n            variant=\"underline\"\n          />\n        </div>\n      </div>\n      <div className=\"flex items-start gap-2 border-b border-border-subtle bg-bg-surface px-6 py-2\">\n        <Tag className=\"mt-1 size-4 flex-shrink-0 text-text-secondary\" aria-hidden=\"true\" />\n        <div className=\"min-w-0 flex-1\">\n          <EntityTagPicker entityType=\"VIBECONTROLS_TUNNEL\" entityId={tunnel.id} />\n        </div>\n      </div>\n      <div className=\"flex-1 min-h-0 overflow-auto p-6\">\n        {activeId === 'overview' && <TunnelOverviewTab tunnel={tunnel} />}\n        {activeId === 'endpoints' && <TunnelEndpointsTab tunnel={tunnel} />}\n        {activeId === 'sessions' && <TunnelSessionsTab tunnelId={tunnel.id} />}\n        {activeId === 'domains' && <TunnelDomainsTab tunnel={tunnel} />}\n        {activeId === 'usage' && <TunnelUsageTab tunnelId={tunnel.id} />}\n        {activeId === 'cli' && <TunnelCliTab tunnel={tunnel} />}\n        {activeId === 'audit' && <TunnelAuditTab tunnelId={tunnel.id} />}\n        {activeId === 'settings' && (\n          <TunnelSettingsTab tunnel={tunnel} onDeleted={() => navigate('/vibecontrols/tunnels')} />\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-vibecontrols",
-  "version": "2026.601.21",
+  "version": "2026.601.22",
   "description": "VibeControls microfrontend for Burdenoff products",
   "type": "module",
   "files": [