@burdenoff/microfe-vibecontrols 2026.613.1 → 2026.618.1

package/dist/pages/tunnels/TunnelsTab.js

@@ -1,67 +1,72 @@
-import { useDeleteTunnelMutation as e, useListAgentsQuery as t, useListTunnelsQuery as n, useStartTunnelMutation as r, useStopTunnelMutation as i } from "../../generated/wspace-operations.js";
-import { useTr as a } from "../../shared/hooks/useTr.js";
-import { ConfirmDialog as o } from "../../components/shared/ConfirmDialog.js";
-import { QuotaExhaustedDialog as s } from "../../components/shared/QuotaExhaustedDialog.js";
-import { getQuotaDialogContent as c, isQuotaExhaustedError as l, markQuotaHandledLocally as u } from "../../utils/quotaUtils.js";
-import { useVibeControls as ee } from "../../providers/VibeControlsProvider.js";
-import { PageHeader as te } from "../../components/shared/PageHeader.js";
-import { LoadingState as ne } from "../../components/shared/LoadingState.js";
-import { ErrorState as re } from "../../components/shared/ErrorState.js";
-import { EmptyState as d } from "../../components/shared/EmptyState.js";
-import { SearchInput as f } from "../../components/shared/SearchInput.js";
-import { FilterDropdown as p } from "../../components/shared/FilterDropdown.js";
+import { useDeleteTunnelMutation as e, useListAgentsQuery as t, useListTunnelsQuery as n, useStartTunnelMutation as r, useStopTunnelMutation as ee } from "../../generated/wspace-operations.js";
+import { useTr as te } from "../../shared/hooks/useTr.js";
+import { ConfirmDialog as ne } from "../../components/shared/ConfirmDialog.js";
+import { QuotaExhaustedDialog as i } from "../../components/shared/QuotaExhaustedDialog.js";
+import { getQuotaDialogContent as re, isQuotaExhaustedError as a, markQuotaHandledLocally as o } from "../../utils/quotaUtils.js";
+import { useVibeControls as ie } from "../../providers/VibeControlsProvider.js";
+import { PageHeader as s } from "../../components/shared/PageHeader.js";
+import { LoadingState as c } from "../../components/shared/LoadingState.js";
+import { ErrorState as l } from "../../components/shared/ErrorState.js";
+import { EmptyState as u } from "../../components/shared/EmptyState.js";
+import { SearchInput as d } from "../../components/shared/SearchInput.js";
+import { FilterDropdown as f } from "../../components/shared/FilterDropdown.js";
+import { VIBE_PERMISSIONS as p } from "../../constants/permissions.js";
 import { TunnelCard as m } from "../../components/tunnels/TunnelCard.js";
-import { useEffect as h, useMemo as g, useState as _ } from "react";
-import { Link as v, useNavigate as y } from "react-router-dom";
-import { motion as b } from "framer-motion";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
-import { Button as C } from "@burdenoff/fe-libs/ui";
-import { useEventBus as w } from "@burdenoff/fe-libs/shared/events";
+import { useEffect as ae, useMemo as oe, useState as h } from "react";
+import { Link as g, useNavigate as se } from "react-router-dom";
+import { usePermissions as ce } from "@burdenoff/fe-libs/shared/providers/shell";
+import { motion as le } from "framer-motion";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { Button as y } from "@burdenoff/fe-libs/ui";
+import { useEventBus as b } from "@burdenoff/fe-libs/shared/events";
+import { AccessDenied as x } from "@burdenoff/fe-libs/shared/components";
 //#region src/pages/tunnels/TunnelsTab.tsx
-var ie = 4e3;
-function T() {
-	let T = a(), E = y(), D = w(), { workspaceId: O } = ee(), [k, A] = _(""), [j, M] = _("all"), [N, P] = _("all"), [F, I] = _(null), [L, R] = _(!1), [z, B] = _(/* @__PURE__ */ new Set()), { data: V, loading: H, error: U, refetch: W, startPolling: G, stopPolling: K } = n({
+var S = 4e3;
+function C() {
+	let C = te(), { hasPermission: w, isLoading: T } = ce(), E = w(p.TUNNEL_READ), D = w(p.TUNNEL_CREATE), O = w(p.TUNNEL_EXECUTE), ue = w(p.TUNNEL_DELETE), de = w(p.AGENT_READ), k = se(), A = b(), { workspaceId: j } = ie(), [M, N] = h(""), [P, F] = h("all"), [I, L] = h("all"), [R, z] = h(null), [B, V] = h(!1), [H, U] = h(/* @__PURE__ */ new Set()), { data: W, loading: fe, error: G, refetch: K, startPolling: q, stopPolling: J } = n({
 		variables: {
-			filter: g(() => {
+			filter: oe(() => {
 				let e = {};
-				return j !== "all" && (e.providerKey = j), N !== "all" && (e.status = [N]), k.trim() && (e.search = k.trim()), e;
+				return P !== "all" && (e.providerKey = P), I !== "all" && (e.status = [I]), M.trim() && (e.search = M.trim()), e;
 			}, [
-				j,
-				N,
-				k
+				P,
+				I,
+				M
 			]),
 			pagination: { limit: 50 }
 		},
-		fetchPolicy: "cache-and-network"
-	}), { data: q } = t({
+		fetchPolicy: "cache-and-network",
+		skip: T || !E
+	}), { data: pe } = t({
 		variables: { pagination: { limit: 1 } },
+		skip: T || !de,
 		fetchPolicy: "cache-first"
-	}), J = (q?.vibecontrolsAgents?.length ?? 0) > 0, Y = V?.tunnels?.items ?? [], ae = (e) => {
-		if (D.emitCustom("vibecontrols.tunnel.create_clicked", { workspaceId: O ?? void 0 }), !J) {
+	}), Y = (pe?.vibecontrolsAgents?.length ?? 0) > 0, X = W?.tunnels?.items ?? [], me = (e) => {
+		if (A.emitCustom("vibecontrols.tunnel.create_clicked", { workspaceId: j ?? void 0 }), !Y) {
 			e.preventDefault();
 			let t = {
-				message: T("vibecontrols.tunnels.list.createAgentFirst", "Create an agent first to use tunnels"),
+				message: C("vibecontrols.tunnels.list.createAgentFirst", "Create an agent first to use tunnels"),
 				variant: "info"
 			};
-			window.dispatchEvent(new CustomEvent("vibecontrols:toast", { detail: t })), E("/vibecontrols/agents");
+			window.dispatchEvent(new CustomEvent("vibecontrols:toast", { detail: t })), k("/vibecontrols/agents");
 		}
-	}, X = z.size > 0 || Y.some((e) => e.status === "PROVISIONING" || e.status === "DELETING" || e.status === "ACTIVE" && !e.primaryDomain?.hostname);
-	h(() => {
-		X ? G(ie) : K();
+	}, Z = H.size > 0 || X.some((e) => e.status === "PROVISIONING" || e.status === "DELETING" || e.status === "ACTIVE" && !e.primaryDomain?.hostname);
+	ae(() => {
+		Z ? q(S) : J();
 	}, [
-		X,
-		G,
-		K
+		Z,
+		q,
+		J
 	]);
-	let Z = (e) => B((t) => new Set([...t, e])), Q = (e) => B((t) => {
+	let Q = (e) => U((t) => new Set([...t, e])), $ = (e) => U((t) => {
 		let n = new Set(t);
 		return n.delete(e), n;
-	}), [oe] = r(), se = async (e) => {
-		let t = Y.find((t) => t.id === e);
+	}), [he] = r(), ge = async (e) => {
+		let t = X.find((t) => t.id === e);
 		if (t) {
-			Z(e);
+			Q(e);
 			try {
-				let n = await oe({
+				let n = await he({
 					variables: { id: e },
 					optimisticResponse: { startTunnel: {
 						...t,
@@ -69,22 +74,22 @@ function T() {
 						__typename: "Tunnel"
 					} }
 				});
-				n.error && l(n.error) ? (u(), R(!0), D.emitCustom("vibecontrols.quota.tunnel_limit_hit", { workspaceId: O ?? void 0 })) : n.error || D.emitCustom("vibecontrols.tunnel.started", {
-					workspaceId: O ?? void 0,
+				n.error && a(n.error) ? (o(), V(!0), A.emitCustom("vibecontrols.quota.tunnel_limit_hit", { workspaceId: j ?? void 0 })) : n.error || A.emitCustom("vibecontrols.tunnel.started", {
+					workspaceId: j ?? void 0,
 					tunnelId: e
 				});
 			} catch (e) {
-				l(e) ? (u(), R(!0), D.emitCustom("vibecontrols.quota.tunnel_limit_hit", { workspaceId: O ?? void 0 })) : console.error("[TunnelsTab] startTunnel failed", e);
+				a(e) ? (o(), V(!0), A.emitCustom("vibecontrols.quota.tunnel_limit_hit", { workspaceId: j ?? void 0 })) : console.error("[TunnelsTab] startTunnel failed", e);
 			} finally {
-				Q(e);
+				$(e);
 			}
 		}
-	}, [ce] = i(), le = async (e) => {
-		let t = Y.find((t) => t.id === e);
+	}, [_e] = ee(), ve = async (e) => {
+		let t = X.find((t) => t.id === e);
 		if (t) {
-			Z(e);
+			Q(e);
 			try {
-				await ce({
+				await _e({
 					variables: { id: e },
 					optimisticResponse: { stopTunnel: {
 						...t,
@@ -93,43 +98,43 @@ function T() {
 					} }
 				});
 			} finally {
-				Q(e);
+				$(e);
 			}
 		}
-	}, [$, { loading: ue }] = e({ onCompleted: () => {
-		I(null), W();
+	}, [ye, { loading: be }] = e({ onCompleted: () => {
+		z(null), K();
 	} });
-	return /* @__PURE__ */ S("div", {
+	return T ? /* @__PURE__ */ _(c, { message: C("common.loadingPermissions", "Loading permissions…") }) : E ? /* @__PURE__ */ v("div", {
 		className: "p-6 max-w-7xl mx-auto",
 		children: [
-			/* @__PURE__ */ x(te, {
-				title: T("vibecontrols.tunnels.list.title", "Tunnels"),
-				description: T("vibecontrols.tunnels.list.description", "Expose local services on *.vibetunnels.com and custom domains."),
-				actions: /* @__PURE__ */ x(C, {
+			/* @__PURE__ */ _(s, {
+				title: C("vibecontrols.tunnels.list.title", "Tunnels"),
+				description: C("vibecontrols.tunnels.list.description", "Expose local services on *.vibetunnels.com and custom domains."),
+				actions: D ? /* @__PURE__ */ _(y, {
 					variant: "default",
 					asChild: !0,
-					children: /* @__PURE__ */ x(v, {
+					children: /* @__PURE__ */ _(g, {
 						to: "/vibecontrols/tunnels/new",
-						onClick: ae,
-						children: T("vibecontrols.tunnels.list.newTunnel", "New tunnel")
+						onClick: me,
+						children: C("vibecontrols.tunnels.list.newTunnel", "New tunnel")
 					})
-				})
+				}) : void 0
 			}),
-			/* @__PURE__ */ S("div", {
+			/* @__PURE__ */ v("div", {
 				className: "flex flex-col sm:flex-row gap-3 mb-4",
 				children: [
-					/* @__PURE__ */ x("div", {
+					/* @__PURE__ */ _("div", {
 						className: "flex-1",
-						children: /* @__PURE__ */ x(f, {
-							value: k,
-							onChange: A,
+						children: /* @__PURE__ */ _(d, {
+							value: M,
+							onChange: N,
 							placeholder: "Search tunnels by name or slug"
 						})
 					}),
-					/* @__PURE__ */ x(p, {
+					/* @__PURE__ */ _(f, {
 						label: "Provider",
-						value: j,
-						onChange: M,
+						value: P,
+						onChange: F,
 						options: [
 							{
 								value: "all",
@@ -145,10 +150,10 @@ function T() {
 							}
 						]
 					}),
-					/* @__PURE__ */ x(p, {
+					/* @__PURE__ */ _(f, {
 						label: "Status",
-						value: N,
-						onChange: P,
+						value: I,
+						onChange: L,
 						options: [
 							{
 								value: "all",
@@ -178,70 +183,73 @@ function T() {
 					})
 				]
 			}),
-			H && !V && /* @__PURE__ */ x(ne, { message: "Loading tunnels" }),
-			U && /* @__PURE__ */ x(re, {
+			fe && !W && /* @__PURE__ */ _(c, { message: "Loading tunnels" }),
+			G && /* @__PURE__ */ _(l, {
 				title: "Failed to load tunnels",
-				message: U.message,
-				onRetry: () => W()
+				message: G.message,
+				onRetry: () => K()
 			}),
-			V && Y.length === 0 && !J && /* @__PURE__ */ x(d, {
-				title: T("vibecontrols.tunnels.list.noAgentTitle", "Create an agent first"),
-				description: T("vibecontrols.tunnels.list.noAgentDescription", "Tunnels need a VibeControls agent to forward traffic. Install + register an agent, then come back to create your first tunnel."),
-				action: /* @__PURE__ */ x(C, {
+			W && X.length === 0 && !Y && /* @__PURE__ */ _(u, {
+				title: C("vibecontrols.tunnels.list.noAgentTitle", "Create an agent first"),
+				description: C("vibecontrols.tunnels.list.noAgentDescription", "Tunnels need a VibeControls agent to forward traffic. Install + register an agent, then come back to create your first tunnel."),
+				action: /* @__PURE__ */ _(y, {
 					variant: "default",
-					onClick: () => E("/vibecontrols/agents"),
-					children: T("vibecontrols.tunnels.list.setupAgent", "Set up an agent")
+					onClick: () => k("/vibecontrols/agents"),
+					children: C("vibecontrols.tunnels.list.setupAgent", "Set up an agent")
 				})
 			}),
-			V && Y.length === 0 && J && /* @__PURE__ */ x(d, {
-				title: T("vibecontrols.tunnels.list.emptyTitle", "No tunnels yet"),
-				description: T("vibecontrols.tunnels.list.emptyDescription", "Create your first tunnel to expose a local service."),
-				action: /* @__PURE__ */ x(C, {
+			W && X.length === 0 && Y && /* @__PURE__ */ _(u, {
+				title: C("vibecontrols.tunnels.list.emptyTitle", "No tunnels yet"),
+				description: C("vibecontrols.tunnels.list.emptyDescription", "Create your first tunnel to expose a local service."),
+				action: D ? /* @__PURE__ */ _(y, {
 					variant: "default",
-					onClick: () => E("/vibecontrols/tunnels/new"),
-					children: T("vibecontrols.tunnels.list.createTunnel", "Create tunnel")
-				})
+					onClick: () => k("/vibecontrols/tunnels/new"),
+					children: C("vibecontrols.tunnels.list.createTunnel", "Create tunnel")
+				}) : void 0
 			}),
-			Y.length > 0 && /* @__PURE__ */ x(b.div, {
+			X.length > 0 && /* @__PURE__ */ _(le.div, {
 				initial: { opacity: 0 },
 				animate: { opacity: 1 },
 				className: "space-y-3",
-				children: Y.map((e) => /* @__PURE__ */ x(m, {
+				children: X.map((e) => /* @__PURE__ */ _(m, {
 					tunnel: e,
-					isPending: z.has(e.id),
-					onOpen: (e) => E(`/vibecontrols/tunnels/${e}`),
-					onStart: (e) => void se(e),
-					onStop: (e) => void le(e),
-					onDelete: (e, t) => I({
+					isPending: H.has(e.id),
+					onOpen: (e) => k(`/vibecontrols/tunnels/${e}`),
+					onStart: O ? (e) => void ge(e) : void 0,
+					onStop: O ? (e) => void ve(e) : void 0,
+					onDelete: ue ? (e, t) => z({
 						id: e,
 						name: t
-					})
+					}) : void 0
 				}, e.id))
 			}),
-			/* @__PURE__ */ x(o, {
-				isOpen: F !== null,
-				onClose: () => I(null),
+			/* @__PURE__ */ _(ne, {
+				isOpen: R !== null,
+				onClose: () => z(null),
 				onConfirm: () => {
-					F && $({ variables: { id: F.id } });
+					R && ye({ variables: { id: R.id } });
 				},
 				title: "Delete tunnel",
-				message: F ? `Delete "${F.name}"? This will stop the tunnel and remove all its sessions and domains.` : "",
+				message: R ? `Delete "${R.name}"? This will stop the tunnel and remove all its sessions and domains.` : "",
 				confirmLabel: "Delete",
 				variant: "danger",
-				isLoading: ue
+				isLoading: be
 			}),
-			/* @__PURE__ */ x(s, {
-				isOpen: L,
-				onClose: () => R(!1),
+			/* @__PURE__ */ _(i, {
+				isOpen: B,
+				onClose: () => V(!1),
 				onConfirm: () => {
-					R(!1), E("/billing/plans");
+					V(!1), k("/billing/plans");
 				},
-				...c("tunnel-start")
+				...re("tunnel-start")
 			})
 		]
+	}) : /* @__PURE__ */ _(x, {
+		title: C("vibecontrols.tunnels.list.denied.title", "Access Denied"),
+		description: C("vibecontrols.tunnels.list.denied.description", "You do not have permission to view tunnels.")
 	});
 }
 //#endregion
-export { T as TunnelsTab };
+export { C as TunnelsTab };
 
 //# sourceMappingURL=TunnelsTab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TunnelsTab.js","names":[],"sources":["../../../src/pages/tunnels/TunnelsTab.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Link, useNavigate } from 'react-router-dom';\nimport { motion } from 'framer-motion';\nimport { useEventBus } from '@burdenoff/fe-libs/shared/events';\nimport { useVibeControls } from '@/providers/VibeControlsProvider';\n\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { PageHeader } from '@/components/shared/PageHeader';\nimport { SearchInput } from '@/components/shared/SearchInput';\nimport { FilterDropdown } from '@/components/shared/FilterDropdown';\nimport { ConfirmDialog } from '@/components/shared/ConfirmDialog';\nimport { QuotaExhaustedDialog } from '@/components/shared/QuotaExhaustedDialog';\nimport { EmptyState } from '@/components/shared/EmptyState';\nimport { LoadingState } from '@/components/shared/LoadingState';\nimport { ErrorState } from '@/components/shared/ErrorState';\nimport { TunnelCard } from '@/components/tunnels/TunnelCard';\nimport type { TunnelStatus, TunnelProviderKey } from '@/generated/wspace-types';\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n  useListTunnelsQuery,\n  useListAgentsQuery,\n  useStartTunnelMutation,\n  useStopTunnelMutation,\n  useDeleteTunnelMutation,\n  type ListTunnelsQuery,\n} from '@/generated/wspace-operations';\nimport {\n  isQuotaExhaustedError,\n  markQuotaHandledLocally,\n  getQuotaDialogContent,\n} from '@/utils/quotaUtils';\n\ntype TunnelRow = NonNullable<ListTunnelsQuery['tunnels']>['items'][number];\n\nconst TRANSITION_POLL_MS = 4000;\n\nexport function TunnelsTab() {\n  const tr = useTr();\n  const navigate = useNavigate();\n  const bus = useEventBus();\n  const { workspaceId } = useVibeControls();\n  const [search, setSearch] = useState('');\n  const [providerFilter, setProviderFilter] = useState<string>('all');\n  const [statusFilter, setStatusFilter] = useState<string>('all');\n  const [pendingDelete, setPendingDelete] = useState<{ id: string; name: string } | null>(null);\n  const [showQuotaExhausted, setShowQuotaExhausted] = useState(false);\n  const [pendingIds, setPendingIds] = useState<Set<string>>(new Set());\n\n  const filter = useMemo(() => {\n    const f: Record<string, unknown> = {};\n    if (providerFilter !== 'all') {\n      f.providerKey = providerFilter as TunnelProviderKey;\n    }\n    if (statusFilter !== 'all') {\n      f.status = [statusFilter as TunnelStatus];\n    }\n    if (search.trim()) {\n      f.search = search.trim();\n    }\n    return f;\n  }, [providerFilter, statusFilter, search]);\n\n  const { data, loading, error, refetch, startPolling, stopPolling } = useListTunnelsQuery({\n    variables: { filter, pagination: { limit: 50 } },\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const { data: agentsData } = useListAgentsQuery({\n    variables: { pagination: { limit: 1 } },\n    fetchPolicy: 'cache-first',\n  });\n  const hasAnyAgent = (agentsData?.vibecontrolsAgents?.length ?? 0) > 0;\n\n  const tunnels: TunnelRow[] = data?.tunnels?.items ?? [];\n\n  const handleNewTunnelClick = (event: React.MouseEvent) => {\n    bus.emitCustom('vibecontrols.tunnel.create_clicked', { workspaceId: workspaceId ?? undefined });\n    if (!hasAnyAgent) {\n      event.preventDefault();\n      // Lightweight toast via window event — falls back to console if no host listener.\n      const detail = {\n        message: tr(\n          'vibecontrols.tunnels.list.createAgentFirst',\n          'Create an agent first to use tunnels'\n        ),\n        variant: 'info' as const,\n      };\n      window.dispatchEvent(new CustomEvent('vibecontrols:toast', { detail }));\n      navigate('/vibecontrols/agents');\n    }\n  };\n\n  // Poll while any tunnel is in a transient state OR is ACTIVE but has no\n  // domain yet (Cloudflare assigns the URL ~5-15 s after start returns).\n  const needsPoll =\n    pendingIds.size > 0 ||\n    tunnels.some(\n      (t) =>\n        t.status === 'PROVISIONING' ||\n        t.status === 'DELETING' ||\n        (t.status === 'ACTIVE' && !t.primaryDomain?.hostname)\n    );\n  useEffect(() => {\n    if (needsPoll) {\n      startPolling(TRANSITION_POLL_MS);\n    } else {\n      stopPolling();\n    }\n  }, [needsPoll, startPolling, stopPolling]);\n\n  const addPending = (id: string) => setPendingIds((prev) => new Set([...prev, id]));\n  const removePending = (id: string) =>\n    setPendingIds((prev) => {\n      const next = new Set(prev);\n      next.delete(id);\n      return next;\n    });\n\n  const [startTunnel] = useStartTunnelMutation();\n\n  const handleStartTunnel = async (id: string) => {\n    const existing = tunnels.find((t) => t.id === id);\n    if (!existing) return;\n    addPending(id);\n    try {\n      const result = await startTunnel({\n        variables: { id },\n        optimisticResponse: {\n          startTunnel: {\n            ...existing,\n            status: 'PROVISIONING' as TunnelStatus,\n            __typename: 'Tunnel',\n          },\n        },\n      });\n      if (result.error && isQuotaExhaustedError(result.error)) {\n        markQuotaHandledLocally();\n        setShowQuotaExhausted(true);\n        bus.emitCustom('vibecontrols.quota.tunnel_limit_hit', {\n          workspaceId: workspaceId ?? undefined,\n        });\n      } else if (!result.error) {\n        bus.emitCustom('vibecontrols.tunnel.started', {\n          workspaceId: workspaceId ?? undefined,\n          tunnelId: id,\n        });\n      }\n    } catch (err) {\n      // Only open the quota modal for actual quota errors — pre-existing\n      // bug spotted on the BOFF-2625 review: any tunnel-start failure\n      // (network / validation / auth) was opening the quota dialog.\n      if (isQuotaExhaustedError(err)) {\n        markQuotaHandledLocally();\n        setShowQuotaExhausted(true);\n        bus.emitCustom('vibecontrols.quota.tunnel_limit_hit', {\n          workspaceId: workspaceId ?? undefined,\n        });\n      } else {\n        console.error('[TunnelsTab] startTunnel failed', err);\n      }\n    } finally {\n      removePending(id);\n    }\n  };\n\n  const [stopTunnel] = useStopTunnelMutation();\n\n  const handleStopTunnel = async (id: string) => {\n    const existing = tunnels.find((t) => t.id === id);\n    if (!existing) return;\n    addPending(id);\n    try {\n      await stopTunnel({\n        variables: { id },\n        optimisticResponse: {\n          stopTunnel: { ...existing, status: 'STOPPED' as TunnelStatus, __typename: 'Tunnel' },\n        },\n      });\n    } finally {\n      removePending(id);\n    }\n  };\n\n  const [deleteTunnel, { loading: deleting }] = useDeleteTunnelMutation({\n    onCompleted: () => {\n      setPendingDelete(null);\n      void refetch();\n    },\n  });\n\n  return (\n    <div className=\"p-6 max-w-7xl mx-auto\">\n      <PageHeader\n        title={tr('vibecontrols.tunnels.list.title', 'Tunnels')}\n        description={tr(\n          'vibecontrols.tunnels.list.description',\n          'Expose local services on *.vibetunnels.com and custom domains.'\n        )}\n        actions={\n          <Button variant=\"default\" asChild>\n            <Link to=\"/vibecontrols/tunnels/new\" onClick={handleNewTunnelClick}>\n              {tr('vibecontrols.tunnels.list.newTunnel', 'New tunnel')}\n            </Link>\n          </Button>\n        }\n      />\n\n      <div className=\"flex flex-col sm:flex-row gap-3 mb-4\">\n        <div className=\"flex-1\">\n          <SearchInput\n            value={search}\n            onChange={setSearch}\n            placeholder=\"Search tunnels by name or slug\"\n          />\n        </div>\n        <FilterDropdown\n          label=\"Provider\"\n          value={providerFilter}\n          onChange={setProviderFilter}\n          options={[\n            { value: 'all', label: 'All providers' },\n            { value: 'VIBETUNNELS', label: 'Vibe Tunnels (default)' },\n            { value: 'CLOUDFLARE', label: 'Cloudflare Tunnels' },\n          ]}\n        />\n        <FilterDropdown\n          label=\"Status\"\n          value={statusFilter}\n          onChange={setStatusFilter}\n          options={[\n            { value: 'all', label: 'All statuses' },\n            { value: 'ACTIVE', label: 'Active' },\n            { value: 'DRAFT', label: 'Draft' },\n            { value: 'PROVISIONING', label: 'Provisioning' },\n            { value: 'STOPPED', label: 'Stopped' },\n            { value: 'ERROR', label: 'Error' },\n          ]}\n        />\n      </div>\n\n      {loading && !data && <LoadingState message=\"Loading tunnels\" />}\n      {error && (\n        <ErrorState\n          title=\"Failed to load tunnels\"\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      )}\n\n      {data && tunnels.length === 0 && !hasAnyAgent && (\n        <EmptyState\n          title={tr('vibecontrols.tunnels.list.noAgentTitle', 'Create an agent first')}\n          description={tr(\n            'vibecontrols.tunnels.list.noAgentDescription',\n            'Tunnels need a VibeControls agent to forward traffic. Install + register an agent, then come back to create your first tunnel.'\n          )}\n          action={\n            <Button variant=\"default\" onClick={() => navigate('/vibecontrols/agents')}>\n              {tr('vibecontrols.tunnels.list.setupAgent', 'Set up an agent')}\n            </Button>\n          }\n        />\n      )}\n\n      {data && tunnels.length === 0 && hasAnyAgent && (\n        <EmptyState\n          title={tr('vibecontrols.tunnels.list.emptyTitle', 'No tunnels yet')}\n          description={tr(\n            'vibecontrols.tunnels.list.emptyDescription',\n            'Create your first tunnel to expose a local service.'\n          )}\n          action={\n            <Button variant=\"default\" onClick={() => navigate('/vibecontrols/tunnels/new')}>\n              {tr('vibecontrols.tunnels.list.createTunnel', 'Create tunnel')}\n            </Button>\n          }\n        />\n      )}\n\n      {tunnels.length > 0 && (\n        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className=\"space-y-3\">\n          {tunnels.map((tunnel: TunnelRow) => (\n            <TunnelCard\n              key={tunnel.id}\n              tunnel={tunnel}\n              isPending={pendingIds.has(tunnel.id)}\n              onOpen={(id) => navigate(`/vibecontrols/tunnels/${id}`)}\n              onStart={(id) => void handleStartTunnel(id)}\n              onStop={(id) => void handleStopTunnel(id)}\n              onDelete={(id, name) => setPendingDelete({ id, name })}\n            />\n          ))}\n        </motion.div>\n      )}\n\n      <ConfirmDialog\n        isOpen={pendingDelete !== null}\n        onClose={() => setPendingDelete(null)}\n        onConfirm={() => {\n          if (pendingDelete) {\n            void deleteTunnel({ variables: { id: pendingDelete.id } });\n          }\n        }}\n        title=\"Delete tunnel\"\n        message={\n          pendingDelete\n            ? `Delete \"${pendingDelete.name}\"? This will stop the tunnel and remove all its sessions and domains.`\n            : ''\n        }\n        confirmLabel=\"Delete\"\n        variant=\"danger\"\n        isLoading={deleting}\n      />\n\n      <QuotaExhaustedDialog\n        isOpen={showQuotaExhausted}\n        onClose={() => setShowQuotaExhausted(false)}\n        onConfirm={() => {\n          setShowQuotaExhausted(false);\n          navigate('/billing/plans');\n        }}\n        {...getQuotaDialogContent('tunnel-start')}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TunnelsTab.js","names":[],"sources":["../../../src/pages/tunnels/TunnelsTab.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\nimport { Link, useNavigate } from 'react-router-dom';\nimport { motion } from 'framer-motion';\nimport { useEventBus } from '@burdenoff/fe-libs/shared/events';\nimport { useVibeControls } from '@/providers/VibeControlsProvider';\n\nimport { Button } from '@burdenoff/fe-libs/ui';\nimport { PageHeader } from '@/components/shared/PageHeader';\nimport { SearchInput } from '@/components/shared/SearchInput';\nimport { FilterDropdown } from '@/components/shared/FilterDropdown';\nimport { ConfirmDialog } from '@/components/shared/ConfirmDialog';\nimport { QuotaExhaustedDialog } from '@/components/shared/QuotaExhaustedDialog';\nimport { EmptyState } from '@/components/shared/EmptyState';\nimport { LoadingState } from '@/components/shared/LoadingState';\nimport { ErrorState } from '@/components/shared/ErrorState';\nimport { TunnelCard } from '@/components/tunnels/TunnelCard';\nimport type { TunnelStatus, TunnelProviderKey } from '@/generated/wspace-types';\nimport { AccessDenied } from '@burdenoff/fe-libs/shared/components';\nimport { usePermissions } from '@burdenoff/fe-libs/shared/providers/shell';\nimport { VIBE_PERMISSIONS } from '@/constants/permissions';\nimport { useTr } from '../../shared/hooks/useTr';\nimport {\n  useListTunnelsQuery,\n  useListAgentsQuery,\n  useStartTunnelMutation,\n  useStopTunnelMutation,\n  useDeleteTunnelMutation,\n  type ListTunnelsQuery,\n} from '@/generated/wspace-operations';\nimport {\n  isQuotaExhaustedError,\n  markQuotaHandledLocally,\n  getQuotaDialogContent,\n} from '@/utils/quotaUtils';\n\ntype TunnelRow = NonNullable<ListTunnelsQuery['tunnels']>['items'][number];\n\nconst TRANSITION_POLL_MS = 4000;\n\nexport function TunnelsTab() {\n  const tr = useTr();\n  // Tunnel reads are gated on `tunnel:read`; creation on `tunnel:create`;\n  // start/stop on `tunnel:execute`; deletion on `tunnel:delete`.\n  const { hasPermission, isLoading: permissionsLoading } = usePermissions();\n  const canRead = hasPermission(VIBE_PERMISSIONS.TUNNEL_READ);\n  const canCreate = hasPermission(VIBE_PERMISSIONS.TUNNEL_CREATE);\n  const canExecute = hasPermission(VIBE_PERMISSIONS.TUNNEL_EXECUTE);\n  const canDelete = hasPermission(VIBE_PERMISSIONS.TUNNEL_DELETE);\n  const canReadAgents = hasPermission(VIBE_PERMISSIONS.AGENT_READ);\n  const navigate = useNavigate();\n  const bus = useEventBus();\n  const { workspaceId } = useVibeControls();\n  const [search, setSearch] = useState('');\n  const [providerFilter, setProviderFilter] = useState<string>('all');\n  const [statusFilter, setStatusFilter] = useState<string>('all');\n  const [pendingDelete, setPendingDelete] = useState<{ id: string; name: string } | null>(null);\n  const [showQuotaExhausted, setShowQuotaExhausted] = useState(false);\n  const [pendingIds, setPendingIds] = useState<Set<string>>(new Set());\n\n  const filter = useMemo(() => {\n    const f: Record<string, unknown> = {};\n    if (providerFilter !== 'all') {\n      f.providerKey = providerFilter as TunnelProviderKey;\n    }\n    if (statusFilter !== 'all') {\n      f.status = [statusFilter as TunnelStatus];\n    }\n    if (search.trim()) {\n      f.search = search.trim();\n    }\n    return f;\n  }, [providerFilter, statusFilter, search]);\n\n  const { data, loading, error, refetch, startPolling, stopPolling } = useListTunnelsQuery({\n    variables: { filter, pagination: { limit: 50 } },\n    fetchPolicy: 'cache-and-network',\n    skip: permissionsLoading || !canRead,\n  });\n\n  const { data: agentsData } = useListAgentsQuery({\n    variables: { pagination: { limit: 1 } },\n    skip: permissionsLoading || !canReadAgents,\n    fetchPolicy: 'cache-first',\n  });\n  const hasAnyAgent = (agentsData?.vibecontrolsAgents?.length ?? 0) > 0;\n\n  const tunnels: TunnelRow[] = data?.tunnels?.items ?? [];\n\n  const handleNewTunnelClick = (event: React.MouseEvent) => {\n    bus.emitCustom('vibecontrols.tunnel.create_clicked', { workspaceId: workspaceId ?? undefined });\n    if (!hasAnyAgent) {\n      event.preventDefault();\n      // Lightweight toast via window event — falls back to console if no host listener.\n      const detail = {\n        message: tr(\n          'vibecontrols.tunnels.list.createAgentFirst',\n          'Create an agent first to use tunnels'\n        ),\n        variant: 'info' as const,\n      };\n      window.dispatchEvent(new CustomEvent('vibecontrols:toast', { detail }));\n      navigate('/vibecontrols/agents');\n    }\n  };\n\n  // Poll while any tunnel is in a transient state OR is ACTIVE but has no\n  // domain yet (Cloudflare assigns the URL ~5-15 s after start returns).\n  const needsPoll =\n    pendingIds.size > 0 ||\n    tunnels.some(\n      (t) =>\n        t.status === 'PROVISIONING' ||\n        t.status === 'DELETING' ||\n        (t.status === 'ACTIVE' && !t.primaryDomain?.hostname)\n    );\n  useEffect(() => {\n    if (needsPoll) {\n      startPolling(TRANSITION_POLL_MS);\n    } else {\n      stopPolling();\n    }\n  }, [needsPoll, startPolling, stopPolling]);\n\n  const addPending = (id: string) => setPendingIds((prev) => new Set([...prev, id]));\n  const removePending = (id: string) =>\n    setPendingIds((prev) => {\n      const next = new Set(prev);\n      next.delete(id);\n      return next;\n    });\n\n  const [startTunnel] = useStartTunnelMutation();\n\n  const handleStartTunnel = async (id: string) => {\n    const existing = tunnels.find((t) => t.id === id);\n    if (!existing) return;\n    addPending(id);\n    try {\n      const result = await startTunnel({\n        variables: { id },\n        optimisticResponse: {\n          startTunnel: {\n            ...existing,\n            status: 'PROVISIONING' as TunnelStatus,\n            __typename: 'Tunnel',\n          },\n        },\n      });\n      if (result.error && isQuotaExhaustedError(result.error)) {\n        markQuotaHandledLocally();\n        setShowQuotaExhausted(true);\n        bus.emitCustom('vibecontrols.quota.tunnel_limit_hit', {\n          workspaceId: workspaceId ?? undefined,\n        });\n      } else if (!result.error) {\n        bus.emitCustom('vibecontrols.tunnel.started', {\n          workspaceId: workspaceId ?? undefined,\n          tunnelId: id,\n        });\n      }\n    } catch (err) {\n      // Only open the quota modal for actual quota errors — pre-existing\n      // bug spotted on the BOFF-2625 review: any tunnel-start failure\n      // (network / validation / auth) was opening the quota dialog.\n      if (isQuotaExhaustedError(err)) {\n        markQuotaHandledLocally();\n        setShowQuotaExhausted(true);\n        bus.emitCustom('vibecontrols.quota.tunnel_limit_hit', {\n          workspaceId: workspaceId ?? undefined,\n        });\n      } else {\n        console.error('[TunnelsTab] startTunnel failed', err);\n      }\n    } finally {\n      removePending(id);\n    }\n  };\n\n  const [stopTunnel] = useStopTunnelMutation();\n\n  const handleStopTunnel = async (id: string) => {\n    const existing = tunnels.find((t) => t.id === id);\n    if (!existing) return;\n    addPending(id);\n    try {\n      await stopTunnel({\n        variables: { id },\n        optimisticResponse: {\n          stopTunnel: { ...existing, status: 'STOPPED' as TunnelStatus, __typename: 'Tunnel' },\n        },\n      });\n    } finally {\n      removePending(id);\n    }\n  };\n\n  const [deleteTunnel, { loading: deleting }] = useDeleteTunnelMutation({\n    onCompleted: () => {\n      setPendingDelete(null);\n      void refetch();\n    },\n  });\n\n  if (permissionsLoading) {\n    return <LoadingState message={tr('common.loadingPermissions', 'Loading permissions…')} />;\n  }\n\n  if (!canRead) {\n    return (\n      <AccessDenied\n        title={tr('vibecontrols.tunnels.list.denied.title', 'Access Denied')}\n        description={tr(\n          'vibecontrols.tunnels.list.denied.description',\n          'You do not have permission to view tunnels.'\n        )}\n      />\n    );\n  }\n\n  return (\n    <div className=\"p-6 max-w-7xl mx-auto\">\n      <PageHeader\n        title={tr('vibecontrols.tunnels.list.title', 'Tunnels')}\n        description={tr(\n          'vibecontrols.tunnels.list.description',\n          'Expose local services on *.vibetunnels.com and custom domains.'\n        )}\n        actions={\n          canCreate ? (\n            <Button variant=\"default\" asChild>\n              <Link to=\"/vibecontrols/tunnels/new\" onClick={handleNewTunnelClick}>\n                {tr('vibecontrols.tunnels.list.newTunnel', 'New tunnel')}\n              </Link>\n            </Button>\n          ) : undefined\n        }\n      />\n\n      <div className=\"flex flex-col sm:flex-row gap-3 mb-4\">\n        <div className=\"flex-1\">\n          <SearchInput\n            value={search}\n            onChange={setSearch}\n            placeholder=\"Search tunnels by name or slug\"\n          />\n        </div>\n        <FilterDropdown\n          label=\"Provider\"\n          value={providerFilter}\n          onChange={setProviderFilter}\n          options={[\n            { value: 'all', label: 'All providers' },\n            { value: 'VIBETUNNELS', label: 'Vibe Tunnels (default)' },\n            { value: 'CLOUDFLARE', label: 'Cloudflare Tunnels' },\n          ]}\n        />\n        <FilterDropdown\n          label=\"Status\"\n          value={statusFilter}\n          onChange={setStatusFilter}\n          options={[\n            { value: 'all', label: 'All statuses' },\n            { value: 'ACTIVE', label: 'Active' },\n            { value: 'DRAFT', label: 'Draft' },\n            { value: 'PROVISIONING', label: 'Provisioning' },\n            { value: 'STOPPED', label: 'Stopped' },\n            { value: 'ERROR', label: 'Error' },\n          ]}\n        />\n      </div>\n\n      {loading && !data && <LoadingState message=\"Loading tunnels\" />}\n      {error && (\n        <ErrorState\n          title=\"Failed to load tunnels\"\n          message={error.message}\n          onRetry={() => refetch()}\n        />\n      )}\n\n      {data && tunnels.length === 0 && !hasAnyAgent && (\n        <EmptyState\n          title={tr('vibecontrols.tunnels.list.noAgentTitle', 'Create an agent first')}\n          description={tr(\n            'vibecontrols.tunnels.list.noAgentDescription',\n            'Tunnels need a VibeControls agent to forward traffic. Install + register an agent, then come back to create your first tunnel.'\n          )}\n          action={\n            <Button variant=\"default\" onClick={() => navigate('/vibecontrols/agents')}>\n              {tr('vibecontrols.tunnels.list.setupAgent', 'Set up an agent')}\n            </Button>\n          }\n        />\n      )}\n\n      {data && tunnels.length === 0 && hasAnyAgent && (\n        <EmptyState\n          title={tr('vibecontrols.tunnels.list.emptyTitle', 'No tunnels yet')}\n          description={tr(\n            'vibecontrols.tunnels.list.emptyDescription',\n            'Create your first tunnel to expose a local service.'\n          )}\n          action={\n            canCreate ? (\n              <Button variant=\"default\" onClick={() => navigate('/vibecontrols/tunnels/new')}>\n                {tr('vibecontrols.tunnels.list.createTunnel', 'Create tunnel')}\n              </Button>\n            ) : undefined\n          }\n        />\n      )}\n\n      {tunnels.length > 0 && (\n        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className=\"space-y-3\">\n          {tunnels.map((tunnel: TunnelRow) => (\n            <TunnelCard\n              key={tunnel.id}\n              tunnel={tunnel}\n              isPending={pendingIds.has(tunnel.id)}\n              onOpen={(id) => navigate(`/vibecontrols/tunnels/${id}`)}\n              onStart={canExecute ? (id) => void handleStartTunnel(id) : undefined}\n              onStop={canExecute ? (id) => void handleStopTunnel(id) : undefined}\n              onDelete={canDelete ? (id, name) => setPendingDelete({ id, name }) : undefined}\n            />\n          ))}\n        </motion.div>\n      )}\n\n      <ConfirmDialog\n        isOpen={pendingDelete !== null}\n        onClose={() => setPendingDelete(null)}\n        onConfirm={() => {\n          if (pendingDelete) {\n            void deleteTunnel({ variables: { id: pendingDelete.id } });\n          }\n        }}\n        title=\"Delete tunnel\"\n        message={\n          pendingDelete\n            ? `Delete \"${pendingDelete.name}\"? This will stop the tunnel and remove all its sessions and domains.`\n            : ''\n        }\n        confirmLabel=\"Delete\"\n        variant=\"danger\"\n        isLoading={deleting}\n      />\n\n      <QuotaExhaustedDialog\n        isOpen={showQuotaExhausted}\n        onClose={() => setShowQuotaExhausted(false)}\n        onConfirm={() => {\n          setShowQuotaExhausted(false);\n          navigate('/billing/plans');\n        }}\n        {...getQuotaDialogContent('tunnel-start')}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/pages/tunnels/tabs/TunnelDomainsTab.js

@@ -5,27 +5,27 @@ import { DomainVerificationBadge as s } from "../../../components/tunnels/Domain
 import { Fragment as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/pages/tunnels/tabs/TunnelDomainsTab.tsx
-function f({ tunnel: f }) {
-	let p = a(), { refetch: m } = n({ variables: { id: f.id } }), [h, g] = l(""), [_, v] = l(null), [y, { loading: b }] = r({
+function f({ tunnel: f, canCreate: p, canUpdate: m }) {
+	let h = a(), { refetch: g } = n({ variables: { id: f.id } }), [_, v] = l(""), [y, b] = l(null), [x, { loading: S }] = r({
 		onCompleted: async (e) => {
-			await m(), e.registerCustomTunnelDomain.id && await x({ variables: {
+			await g(), e.registerCustomTunnelDomain.id && await C({ variables: {
 				tunnelId: f.id,
 				domainId: e.registerCustomTunnelDomain.id
-			} }), g(""), v(null);
+			} }), v(""), b(null);
 		},
-		onError: (e) => v(e.message)
-	}), [x] = e({ onCompleted: () => void m() }), [S] = t({ onCompleted: () => void m() }), [C] = i({ onCompleted: () => void m() }), w = async () => {
-		let e = h.trim().toLowerCase();
-		e && await y({ variables: { input: { hostname: e } } });
-	}, T = f.domains ?? [];
+		onError: (e) => b(e.message)
+	}), [C] = e({ onCompleted: () => void g() }), [w] = t({ onCompleted: () => void g() }), [T] = i({ onCompleted: () => void g() }), E = async () => {
+		let e = _.trim().toLowerCase();
+		e && await x({ variables: { input: { hostname: e } } });
+	}, D = f.domains ?? [];
 	return /* @__PURE__ */ d("div", {
 		className: "max-w-4xl",
-		children: [/* @__PURE__ */ d("section", {
+		children: [p && /* @__PURE__ */ d("section", {
 			className: "rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6",
 			children: [
 				/* @__PURE__ */ u("h3", {
 					className: "text-sm font-semibold text-text-primary mb-3",
-					children: p("vibecontrols.tunnels.domains.attachCustomDomain", "Attach a custom domain")
+					children: h("vibecontrols.tunnels.domains.attachCustomDomain", "Attach a custom domain")
 				}),
 				/* @__PURE__ */ u("p", {
 					className: "text-xs text-text-secondary mb-3",
@@ -36,26 +36,26 @@ function f({ tunnel: f }) {
 					children: [/* @__PURE__ */ u("input", {
 						"aria-label": "preview.example.com",
 						type: "text",
-						value: h,
-						onChange: (e) => g(e.target.value),
+						value: _,
+						onChange: (e) => v(e.target.value),
 						placeholder: "preview.example.com",
 						className: "flex-1 rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-border-focus focus:outline-none"
 					}), /* @__PURE__ */ u("button", {
 						type: "button",
-						disabled: b || !h.trim(),
-						onClick: () => void w(),
+						disabled: S || !_.trim(),
+						onClick: () => void E(),
 						className: "rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-fg hover:bg-action-primary-bg-hover disabled:opacity-50",
-						children: b ? p("vibecontrols.tunnels.domains.adding", "Adding...") : p("vibecontrols.tunnels.domains.addDomain", "Add domain")
+						children: S ? h("vibecontrols.tunnels.domains.adding", "Adding...") : h("vibecontrols.tunnels.domains.addDomain", "Add domain")
 					})]
 				}),
-				_ && /* @__PURE__ */ u("p", {
+				y && /* @__PURE__ */ u("p", {
 					className: "mt-2 text-xs text-status-error-fg",
-					children: _
+					children: y
 				})
 			]
 		}), /* @__PURE__ */ u("div", {
 			className: "rounded-lg border border-border-subtle bg-bg-surface overflow-x-auto",
-			children: T.length === 0 ? /* @__PURE__ */ u("div", {
+			children: D.length === 0 ? /* @__PURE__ */ u("div", {
 				className: "p-4 text-sm text-text-muted",
 				children: "No domains attached. Add one above or reserve a *.vibetunnels.com subdomain from the Tunnels tab."
 			}) : /* @__PURE__ */ d("table", {
@@ -82,7 +82,7 @@ function f({ tunnel: f }) {
 					]
 				}) }), /* @__PURE__ */ u("tbody", {
 					className: "divide-y divide-border-subtle",
-					children: T.map((e) => /* @__PURE__ */ d(c, { children: [/* @__PURE__ */ d("tr", {
+					children: D.map((e) => /* @__PURE__ */ d(c, { children: [/* @__PURE__ */ d("tr", {
 						className: "align-middle",
 						children: [
 							/* @__PURE__ */ u("td", {
@@ -107,14 +107,14 @@ function f({ tunnel: f }) {
 								className: "px-4 py-3 whitespace-nowrap text-right",
 								children: /* @__PURE__ */ d("div", {
 									className: "flex gap-2 justify-end",
-									children: [e.verificationStatus === o.Pending && /* @__PURE__ */ u("button", {
+									children: [m && e.verificationStatus === o.Pending && /* @__PURE__ */ u("button", {
 										type: "button",
-										onClick: () => void C({ variables: { domainId: e.id } }),
+										onClick: () => void T({ variables: { domainId: e.id } }),
 										className: "rounded-md border border-border-default px-3 py-1 text-xs text-text-primary hover:bg-bg-elevated",
 										children: "Verify"
-									}), /* @__PURE__ */ u("button", {
+									}), m && /* @__PURE__ */ u("button", {
 										type: "button",
-										onClick: () => void S({ variables: {
+										onClick: () => void w({ variables: {
 											tunnelId: f.id,
 											domainId: e.id
 										} }),

package/dist/pages/tunnels/tabs/TunnelDomainsTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"TunnelDomainsTab.js","names":[],"sources":["../../../../src/pages/tunnels/tabs/TunnelDomainsTab.tsx"],"sourcesContent":["import { Fragment, useState } from 'react';\nimport type { GetTunnelQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport {\n  useRegisterCustomTunnelDomainMutation,\n  useAttachTunnelDomainMutation,\n  useDetachTunnelDomainMutation,\n  useVerifyTunnelDomainMutation,\n  useGetTunnelQuery,\n} from '@/generated/wspace-operations';\nimport { TunnelDomainVerificationStatus } from '@/generated/wspace-types';\nimport { DomainVerificationBadge } from '@/components/tunnels/DomainVerificationBadge';\n\ntype TunnelDetails = NonNullable<GetTunnelQuery['tunnel']>;\n\nexport function TunnelDomainsTab({ tunnel }: { tunnel: TunnelDetails }) {\n  const tr = useTr();\n  const { refetch } = useGetTunnelQuery({ variables: { id: tunnel.id } });\n  const [newHostname, setNewHostname] = useState('');\n  const [addError, setAddError] = useState<string | null>(null);\n\n  const [registerDomain, { loading: adding }] = useRegisterCustomTunnelDomainMutation({\n    onCompleted: async (result) => {\n      await refetch();\n      if (result.registerCustomTunnelDomain.id) {\n        await attachDomain({\n          variables: {\n            tunnelId: tunnel.id,\n            domainId: result.registerCustomTunnelDomain.id,\n          },\n        });\n      }\n      setNewHostname('');\n      setAddError(null);\n    },\n    onError: (err) => setAddError(err.message),\n  });\n  const [attachDomain] = useAttachTunnelDomainMutation({\n    onCompleted: () => void refetch(),\n  });\n  const [detachDomain] = useDetachTunnelDomainMutation({\n    onCompleted: () => void refetch(),\n  });\n  const [verifyDomain] = useVerifyTunnelDomainMutation({\n    onCompleted: () => void refetch(),\n  });\n\n  const handleAdd = async () => {\n    const trimmed = newHostname.trim().toLowerCase();\n    if (!trimmed) return;\n    await registerDomain({ variables: { input: { hostname: trimmed } } });\n  };\n\n  const domains = tunnel.domains ?? [];\n\n  return (\n    <div className=\"max-w-4xl\">\n      <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6\">\n        <h3 className=\"text-sm font-semibold text-text-primary mb-3\">\n          {tr('vibecontrols.tunnels.domains.attachCustomDomain', 'Attach a custom domain')}\n        </h3>\n        <p className=\"text-xs text-text-secondary mb-3\">\n          Register a user-owned FQDN. You'll be asked to create a TXT record to prove ownership\n          before the domain can be attached.\n        </p>\n        <div className=\"flex gap-2\">\n          <input\n            aria-label=\"preview.example.com\"\n            type=\"text\"\n            value={newHostname}\n            onChange={(e) => setNewHostname(e.target.value)}\n            placeholder=\"preview.example.com\"\n            className=\"flex-1 rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-border-focus focus:outline-none\"\n          />\n          <button\n            type=\"button\"\n            disabled={adding || !newHostname.trim()}\n            onClick={() => void handleAdd()}\n            className=\"rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-fg hover:bg-action-primary-bg-hover disabled:opacity-50\"\n          >\n            {adding\n              ? tr('vibecontrols.tunnels.domains.adding', 'Adding...')\n              : tr('vibecontrols.tunnels.domains.addDomain', 'Add domain')}\n          </button>\n        </div>\n        {addError && <p className=\"mt-2 text-xs text-status-error-fg\">{addError}</p>}\n      </section>\n\n      <div className=\"rounded-lg border border-border-subtle bg-bg-surface overflow-x-auto\">\n        {domains.length === 0 ? (\n          <div className=\"p-4 text-sm text-text-muted\">\n            No domains attached. Add one above or reserve a *.vibetunnels.com subdomain from the\n            Tunnels tab.\n          </div>\n        ) : (\n          <table className=\"min-w-[480px] w-full text-sm\">\n            <thead>\n              <tr className=\"border-b border-border-subtle bg-bg-sunken\">\n                <th className=\"px-4 py-2 text-left text-xs font-medium text-text-muted\">Domain</th>\n                <th className=\"px-4 py-2 text-left text-xs font-medium text-text-muted whitespace-nowrap\">\n                  Status\n                </th>\n                <th className=\"px-4 py-2 text-left text-xs font-medium text-text-muted whitespace-nowrap\">\n                  Type\n                </th>\n                <th className=\"px-4 py-2 text-right text-xs font-medium text-text-muted whitespace-nowrap\">\n                  Actions\n                </th>\n              </tr>\n            </thead>\n            <tbody className=\"divide-y divide-border-subtle\">\n              {domains.map((domain) => (\n                <Fragment key={domain.id}>\n                  <tr className=\"align-middle\">\n                    <td className=\"px-4 py-3\">\n                      <div className=\"font-mono text-sm text-text-primary break-all min-w-[140px]\">\n                        {domain.hostname}\n                      </div>\n                    </td>\n                    <td className=\"px-4 py-3 whitespace-nowrap\">\n                      <DomainVerificationBadge status={domain.verificationStatus} />\n                    </td>\n                    <td className=\"px-4 py-3 text-xs text-text-muted whitespace-nowrap\">\n                      {domain.type}\n                      {domain.isPrimary && <span className=\"ml-1\">• primary</span>}\n                    </td>\n                    <td className=\"px-4 py-3 whitespace-nowrap text-right\">\n                      <div className=\"flex gap-2 justify-end\">\n                        {domain.verificationStatus === TunnelDomainVerificationStatus.Pending && (\n                          <button\n                            type=\"button\"\n                            onClick={() =>\n                              void verifyDomain({ variables: { domainId: domain.id } })\n                            }\n                            className=\"rounded-md border border-border-default px-3 py-1 text-xs text-text-primary hover:bg-bg-elevated\"\n                          >\n                            Verify\n                          </button>\n                        )}\n                        <button\n                          type=\"button\"\n                          onClick={() =>\n                            void detachDomain({\n                              variables: { tunnelId: tunnel.id, domainId: domain.id },\n                            })\n                          }\n                          className=\"rounded-md border border-border-default px-3 py-1 text-xs text-text-primary hover:bg-bg-elevated\"\n                        >\n                          Detach\n                        </button>\n                      </div>\n                    </td>\n                  </tr>\n                  {domain.verificationStatus === TunnelDomainVerificationStatus.Pending &&\n                    domain.challengeRecordName &&\n                    domain.challengeToken && (\n                      <tr>\n                        <td colSpan={4} className=\"px-4 pb-3 pt-0\">\n                          <div className=\"rounded-md bg-bg-sunken p-2 text-xs text-text-secondary\">\n                            <div>Create this TXT record to verify:</div>\n                            <div className=\"font-mono text-text-primary mt-1 break-all\">\n                              {domain.challengeRecordName} IN TXT &quot;{domain.challengeToken}\n                              &quot;\n                            </div>\n                          </div>\n                        </td>\n                      </tr>\n                    )}\n                </Fragment>\n              ))}\n            </tbody>\n          </table>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TunnelDomainsTab.js","names":[],"sources":["../../../../src/pages/tunnels/tabs/TunnelDomainsTab.tsx"],"sourcesContent":["import { Fragment, useState } from 'react';\nimport type { GetTunnelQuery } from '@/generated/wspace-operations';\nimport { useTr } from '../../../shared/hooks/useTr';\nimport {\n  useRegisterCustomTunnelDomainMutation,\n  useAttachTunnelDomainMutation,\n  useDetachTunnelDomainMutation,\n  useVerifyTunnelDomainMutation,\n  useGetTunnelQuery,\n} from '@/generated/wspace-operations';\nimport { TunnelDomainVerificationStatus } from '@/generated/wspace-types';\nimport { DomainVerificationBadge } from '@/components/tunnels/DomainVerificationBadge';\n\ntype TunnelDetails = NonNullable<GetTunnelQuery['tunnel']>;\n\nexport function TunnelDomainsTab({\n  tunnel,\n  canCreate,\n  canUpdate,\n}: {\n  tunnel: TunnelDetails;\n  canCreate: boolean;\n  canUpdate: boolean;\n}) {\n  const tr = useTr();\n  const { refetch } = useGetTunnelQuery({ variables: { id: tunnel.id } });\n  const [newHostname, setNewHostname] = useState('');\n  const [addError, setAddError] = useState<string | null>(null);\n\n  const [registerDomain, { loading: adding }] = useRegisterCustomTunnelDomainMutation({\n    onCompleted: async (result) => {\n      await refetch();\n      if (result.registerCustomTunnelDomain.id) {\n        await attachDomain({\n          variables: {\n            tunnelId: tunnel.id,\n            domainId: result.registerCustomTunnelDomain.id,\n          },\n        });\n      }\n      setNewHostname('');\n      setAddError(null);\n    },\n    onError: (err) => setAddError(err.message),\n  });\n  const [attachDomain] = useAttachTunnelDomainMutation({\n    onCompleted: () => void refetch(),\n  });\n  const [detachDomain] = useDetachTunnelDomainMutation({\n    onCompleted: () => void refetch(),\n  });\n  const [verifyDomain] = useVerifyTunnelDomainMutation({\n    onCompleted: () => void refetch(),\n  });\n\n  const handleAdd = async () => {\n    const trimmed = newHostname.trim().toLowerCase();\n    if (!trimmed) return;\n    await registerDomain({ variables: { input: { hostname: trimmed } } });\n  };\n\n  const domains = tunnel.domains ?? [];\n\n  return (\n    <div className=\"max-w-4xl\">\n      {canCreate && (\n        <section className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 mb-6\">\n          <h3 className=\"text-sm font-semibold text-text-primary mb-3\">\n            {tr('vibecontrols.tunnels.domains.attachCustomDomain', 'Attach a custom domain')}\n          </h3>\n          <p className=\"text-xs text-text-secondary mb-3\">\n            Register a user-owned FQDN. You'll be asked to create a TXT record to prove ownership\n            before the domain can be attached.\n          </p>\n          <div className=\"flex gap-2\">\n            <input\n              aria-label=\"preview.example.com\"\n              type=\"text\"\n              value={newHostname}\n              onChange={(e) => setNewHostname(e.target.value)}\n              placeholder=\"preview.example.com\"\n              className=\"flex-1 rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted focus:border-border-focus focus:outline-none\"\n            />\n            <button\n              type=\"button\"\n              disabled={adding || !newHostname.trim()}\n              onClick={() => void handleAdd()}\n              className=\"rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-fg hover:bg-action-primary-bg-hover disabled:opacity-50\"\n            >\n              {adding\n                ? tr('vibecontrols.tunnels.domains.adding', 'Adding...')\n                : tr('vibecontrols.tunnels.domains.addDomain', 'Add domain')}\n            </button>\n          </div>\n          {addError && <p className=\"mt-2 text-xs text-status-error-fg\">{addError}</p>}\n        </section>\n      )}\n\n      <div className=\"rounded-lg border border-border-subtle bg-bg-surface overflow-x-auto\">\n        {domains.length === 0 ? (\n          <div className=\"p-4 text-sm text-text-muted\">\n            No domains attached. Add one above or reserve a *.vibetunnels.com subdomain from the\n            Tunnels tab.\n          </div>\n        ) : (\n          <table className=\"min-w-[480px] w-full text-sm\">\n            <thead>\n              <tr className=\"border-b border-border-subtle bg-bg-sunken\">\n                <th className=\"px-4 py-2 text-left text-xs font-medium text-text-muted\">Domain</th>\n                <th className=\"px-4 py-2 text-left text-xs font-medium text-text-muted whitespace-nowrap\">\n                  Status\n                </th>\n                <th className=\"px-4 py-2 text-left text-xs font-medium text-text-muted whitespace-nowrap\">\n                  Type\n                </th>\n                <th className=\"px-4 py-2 text-right text-xs font-medium text-text-muted whitespace-nowrap\">\n                  Actions\n                </th>\n              </tr>\n            </thead>\n            <tbody className=\"divide-y divide-border-subtle\">\n              {domains.map((domain) => (\n                <Fragment key={domain.id}>\n                  <tr className=\"align-middle\">\n                    <td className=\"px-4 py-3\">\n                      <div className=\"font-mono text-sm text-text-primary break-all min-w-[140px]\">\n                        {domain.hostname}\n                      </div>\n                    </td>\n                    <td className=\"px-4 py-3 whitespace-nowrap\">\n                      <DomainVerificationBadge status={domain.verificationStatus} />\n                    </td>\n                    <td className=\"px-4 py-3 text-xs text-text-muted whitespace-nowrap\">\n                      {domain.type}\n                      {domain.isPrimary && <span className=\"ml-1\">• primary</span>}\n                    </td>\n                    <td className=\"px-4 py-3 whitespace-nowrap text-right\">\n                      <div className=\"flex gap-2 justify-end\">\n                        {canUpdate &&\n                          domain.verificationStatus === TunnelDomainVerificationStatus.Pending && (\n                            <button\n                              type=\"button\"\n                              onClick={() =>\n                                void verifyDomain({ variables: { domainId: domain.id } })\n                              }\n                              className=\"rounded-md border border-border-default px-3 py-1 text-xs text-text-primary hover:bg-bg-elevated\"\n                            >\n                              Verify\n                            </button>\n                          )}\n                        {canUpdate && (\n                          <button\n                            type=\"button\"\n                            onClick={() =>\n                              void detachDomain({\n                                variables: { tunnelId: tunnel.id, domainId: domain.id },\n                              })\n                            }\n                            className=\"rounded-md border border-border-default px-3 py-1 text-xs text-text-primary hover:bg-bg-elevated\"\n                          >\n                            Detach\n                          </button>\n                        )}\n                      </div>\n                    </td>\n                  </tr>\n                  {domain.verificationStatus === TunnelDomainVerificationStatus.Pending &&\n                    domain.challengeRecordName &&\n                    domain.challengeToken && (\n                      <tr>\n                        <td colSpan={4} className=\"px-4 pb-3 pt-0\">\n                          <div className=\"rounded-md bg-bg-sunken p-2 text-xs text-text-secondary\">\n                            <div>Create this TXT record to verify:</div>\n                            <div className=\"font-mono text-text-primary mt-1 break-all\">\n                              {domain.challengeRecordName} IN TXT &quot;{domain.challengeToken}\n                              &quot;\n                            </div>\n                          </div>\n                        </td>\n                      </tr>\n                    )}\n                </Fragment>\n              ))}\n            </tbody>\n          </table>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}