@burdenoff/microfe-vibecontrols 2026.519.2 → 2026.519.4

package/dist/components/tunnels/TunnelCreateWizard.js

@@ -6,12 +6,14 @@ import { ErrorState as o } from "../shared/ErrorState.js";
 import { QuotaExhaustedDialog as s } from "../shared/QuotaExhaustedDialog.js";
 import { TunnelEnvironment as c, TunnelProtocol as l, TunnelProviderKey as u } from "../../generated/wspace-types.js";
 import { getQuotaDialogContent as d, isQuotaExhaustedError as f } from "../../utils/quotaUtils.js";
-import { useCallback as p, useMemo as m, useState as h } from "react";
-import { useNavigate as g } from "react-router-dom";
-import { AnimatePresence as _, motion as v } from "framer-motion";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { useTagEntity as p } from "../../hooks/useEntityTags.js";
+import { EntityTagPicker as m } from "../shared/EntityTagPicker.js";
+import { useCallback as h, useMemo as g, useState as _ } from "react";
+import { useNavigate as v } from "react-router-dom";
+import { AnimatePresence as y, motion as b } from "framer-motion";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
 //#region src/components/tunnels/TunnelCreateWizard.tsx
-var S = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/, C = {
+var w = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/, T = {
 	providerKey: u.Vibetunnels,
 	agentId: "",
 	name: "",
@@ -25,7 +27,7 @@ var S = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/, C = {
 	customDomain: "",
 	basicAuthUser: "",
 	basicAuthPassword: ""
-}, w = [
+}, E = [
 	{
 		id: "provider",
 		label: "Provider"
@@ -47,88 +49,97 @@ var S = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/, C = {
 		label: "Review"
 	}
 ];
-function T() {
-	let T = e(), O = g(), [k, A] = h(0), [j, M] = h(C), [N, P] = h(null), [F, I] = h(!1), { data: L, loading: R, error: z } = r(), { data: B } = n({ variables: { pagination: { limit: 100 } } }), [V, { loading: H }] = t(), U = p((e, t) => {
-		M((n) => ({
+function D() {
+	let D = e(), A = v(), [j, M] = _(0), [N, P] = _(T), [F, I] = _(null), [L, R] = _(!1), [z, B] = _([]), [V] = p(), { data: H, loading: U, error: W } = r(), { data: G } = n({ variables: { pagination: { limit: 100 } } }), [K, { loading: q }] = t(), J = h((e, t) => {
+		P((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, []), W = p((e) => {
-		M((t) => ({
+	}, []), Y = h((e) => {
+		P((t) => ({
 			...t,
 			providerKey: e,
 			hostnameKind: e === u.Cloudflare ? "auto" : "managed"
 		}));
-	}, []), G = m(() => [...L?.tunnelProviders ?? []].sort((e, t) => {
+	}, []), X = g(() => [...H?.tunnelProviders ?? []].sort((e, t) => {
 		let n = (e) => e === "VIBETUNNELS" ? 0 : e === "CLOUDFLARE" ? 1 : 2, r = n(e.key) - n(t.key);
 		return r === 0 ? e.key.localeCompare(t.key) : r;
-	}), [L]), K = m(() => G.find((e) => e.key === j.providerKey), [G, j.providerKey])?.capabilities, q = j.providerKey === u.Cloudflare, J = m(() => {
-		if (!K) return [l.Http];
+	}), [H]), Z = g(() => X.find((e) => e.key === N.providerKey), [X, N.providerKey])?.capabilities, Q = N.providerKey === u.Cloudflare, $ = g(() => {
+		if (!Z) return [l.Http];
 		let e = [];
-		return K.supportsHttp && e.push(l.Http), K.supportsHttps && e.push(l.Https), K.supportsTcp && e.push(l.Tcp), e;
-	}, [K]), Y = m(() => k === 0 ? !!(j.providerKey && j.agentId && j.name.trim()) : k === 1 ? j.localPort > 0 && j.localPort < 65536 : k === 2 ? j.hostnameKind === "managed" ? !!(j.subdomain && S.test(j.subdomain)) : j.hostnameKind === "custom" ? j.customDomain.trim().includes(".") : q : !0, [
-		k,
+		return Z.supportsHttp && e.push(l.Http), Z.supportsHttps && e.push(l.Https), Z.supportsTcp && e.push(l.Tcp), e;
+	}, [Z]), ee = g(() => j === 0 ? !!(N.providerKey && N.agentId && N.name.trim()) : j === 1 ? N.localPort > 0 && N.localPort < 65536 : j === 2 ? N.hostnameKind === "managed" ? !!(N.subdomain && w.test(N.subdomain)) : N.hostnameKind === "custom" ? N.customDomain.trim().includes(".") : Q : !0, [
 		j,
-		q
-	]), X = () => A((e) => Math.min(e + 1, w.length - 1)), Z = () => A((e) => Math.max(e - 1, 0)), Q = async () => {
-		P(null);
+		N,
+		Q
+	]), te = () => M((e) => Math.min(e + 1, E.length - 1)), ne = () => M((e) => Math.max(e - 1, 0)), re = async () => {
+		I(null);
 		try {
-			let e = await V({ variables: { input: {
-				agentId: j.agentId,
-				name: j.name,
-				description: j.description || void 0,
-				providerKey: j.providerKey,
-				protocol: j.protocol,
-				localHost: j.localHost,
-				localPort: j.localPort,
-				environment: j.environment,
-				basicAuthUser: j.basicAuthUser || void 0,
-				basicAuthPassword: j.basicAuthPassword || void 0,
-				managedSubdomain: j.hostnameKind === "managed" ? j.subdomain : void 0
+			let e = await K({ variables: { input: {
+				agentId: N.agentId,
+				name: N.name,
+				description: N.description || void 0,
+				providerKey: N.providerKey,
+				protocol: N.protocol,
+				localHost: N.localHost,
+				localPort: N.localPort,
+				environment: N.environment,
+				basicAuthUser: N.basicAuthUser || void 0,
+				basicAuthPassword: N.basicAuthPassword || void 0,
+				managedSubdomain: N.hostnameKind === "managed" ? N.subdomain : void 0
 			} } });
 			if (e.error) {
 				if (f(e.error)) {
-					I(!0);
+					R(!0);
 					return;
 				}
-				P(e.error.message);
+				I(e.error.message);
 				return;
 			}
 			let t = e.data?.createTunnel.id;
-			t && O(`/vibecontrols/tunnels/${t}`);
+			if (t) {
+				if (z.length > 0) try {
+					await Promise.all(z.map((e) => V({ variables: { input: {
+						entityType: "VIBECONTROLS_TUNNEL",
+						entityId: t,
+						tagId: e
+					} } })));
+				} catch {}
+				A(`/vibecontrols/tunnels/${t}`);
+			}
 		} catch (e) {
 			if (f(e)) {
-				P(null), I(!0);
+				I(null), R(!0);
 				return;
 			}
-			P(e instanceof Error ? e.message : String(e));
+			I(e instanceof Error ? e.message : String(e));
 		}
 	};
-	return R ? /* @__PURE__ */ b(a, { message: "Loading providers" }) : z ? /* @__PURE__ */ b(o, {
+	return U ? /* @__PURE__ */ S(a, { message: "Loading providers" }) : W ? /* @__PURE__ */ S(o, {
 		title: "Failed to load providers",
-		message: z.message,
+		message: W.message,
 		onRetry: () => window.location.reload()
-	}) : /* @__PURE__ */ x("div", {
+	}) : /* @__PURE__ */ C("div", {
 		className: "p-6 max-w-3xl mx-auto",
 		children: [
-			/* @__PURE__ */ b(i, {
+			/* @__PURE__ */ S(i, {
 				breadcrumb: [{
 					label: "Tunnels",
 					path: "/vibecontrols/tunnels"
 				}, { label: "New tunnel" }],
-				title: T("vibecontrols.tunnels.createTitle", "Create tunnel"),
-				description: T("vibecontrols.tunnels.createDescription", "Expose a local service through a managed tunnel.")
+				title: D("vibecontrols.tunnels.createTitle", "Create tunnel"),
+				description: D("vibecontrols.tunnels.createDescription", "Expose a local service through a managed tunnel.")
 			}),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ S("div", {
 				className: "mb-6 flex items-center gap-2",
-				children: w.map((e, t) => /* @__PURE__ */ b("div", {
-					className: `flex-1 h-1.5 rounded-full ${t <= k ? "bg-action-primary-bg" : "bg-bg-sunken"}`,
+				children: E.map((e, t) => /* @__PURE__ */ S("div", {
+					className: `flex-1 h-1.5 rounded-full ${t <= j ? "bg-action-primary-bg" : "bg-bg-sunken"}`,
 					"aria-label": `Step ${t + 1}: ${e.label}`
 				}, e.id))
 			}),
-			/* @__PURE__ */ b(_, {
+			/* @__PURE__ */ S(y, {
 				mode: "wait",
-				children: /* @__PURE__ */ x(v.div, {
+				children: /* @__PURE__ */ C(b.div, {
 					initial: {
 						opacity: 0,
 						x: 6
@@ -144,105 +155,105 @@ function T() {
 					transition: { duration: .15 },
 					className: "rounded-lg border border-border-subtle bg-bg-surface p-6",
 					children: [
-						k === 0 && /* @__PURE__ */ x("div", {
+						j === 0 && /* @__PURE__ */ C("div", {
 							className: "space-y-4",
 							children: [
-								/* @__PURE__ */ b("h3", {
+								/* @__PURE__ */ S("h3", {
 									className: "text-sm font-semibold text-text-primary",
 									children: "Provider"
 								}),
-								/* @__PURE__ */ b("div", {
+								/* @__PURE__ */ S("div", {
 									className: "grid gap-3 sm:grid-cols-2",
-									children: G.map((e) => /* @__PURE__ */ x("button", {
+									children: X.map((e) => /* @__PURE__ */ C("button", {
 										type: "button",
-										onClick: () => W(e.key),
-										className: `rounded-lg border p-4 text-left transition-colors ${j.providerKey === e.key ? "border-action-primary-bg bg-bg-sunken" : "border-border-subtle hover:border-border-default"}`,
+										onClick: () => Y(e.key),
+										className: `rounded-lg border p-4 text-left transition-colors ${N.providerKey === e.key ? "border-action-primary-bg bg-bg-sunken" : "border-border-subtle hover:border-border-default"}`,
 										children: [
-											/* @__PURE__ */ b("div", {
+											/* @__PURE__ */ S("div", {
 												className: "font-semibold text-text-primary",
 												children: e.displayName
 											}),
-											/* @__PURE__ */ b("div", {
+											/* @__PURE__ */ S("div", {
 												className: "text-xs text-text-muted mt-1",
 												children: e.key
 											}),
-											e.description && /* @__PURE__ */ b("div", {
+											e.description && /* @__PURE__ */ S("div", {
 												className: "text-xs text-text-secondary mt-2",
 												children: e.description
 											})
 										]
 									}, e.id))
 								}),
-								/* @__PURE__ */ b(E, {
+								/* @__PURE__ */ S(O, {
 									label: "Agent",
-									children: /* @__PURE__ */ x("select", {
-										value: j.agentId,
-										onChange: (e) => U("agentId", e.target.value),
+									children: /* @__PURE__ */ C("select", {
+										value: N.agentId,
+										onChange: (e) => J("agentId", e.target.value),
 										className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary",
-										children: [/* @__PURE__ */ b("option", {
+										children: [/* @__PURE__ */ S("option", {
 											value: "",
 											children: "Select agent"
-										}), (B?.vibecontrolsAgents ?? []).map((e) => /* @__PURE__ */ b("option", {
+										}), (G?.vibecontrolsAgents ?? []).map((e) => /* @__PURE__ */ S("option", {
 											value: e.id,
 											children: e.name
 										}, e.id))]
 									})
 								}),
-								/* @__PURE__ */ b(E, {
+								/* @__PURE__ */ S(O, {
 									label: "Name",
-									children: /* @__PURE__ */ b("input", {
+									children: /* @__PURE__ */ S("input", {
 										type: "text",
-										value: j.name,
-										onChange: (e) => U("name", e.target.value),
+										value: N.name,
+										onChange: (e) => J("name", e.target.value),
 										placeholder: "My dev tunnel",
 										className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted"
 									})
 								}),
-								/* @__PURE__ */ b(E, {
+								/* @__PURE__ */ S(O, {
 									label: "Description (optional)",
-									children: /* @__PURE__ */ b("input", {
+									children: /* @__PURE__ */ S("input", {
 										type: "text",
-										value: j.description,
-										onChange: (e) => U("description", e.target.value),
+										value: N.description,
+										onChange: (e) => J("description", e.target.value),
 										className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-muted"
 									})
 								})
 							]
 						}),
-						k === 1 && /* @__PURE__ */ x("div", {
+						j === 1 && /* @__PURE__ */ C("div", {
 							className: "space-y-4",
 							children: [
-								/* @__PURE__ */ b("h3", {
+								/* @__PURE__ */ S("h3", {
 									className: "text-sm font-semibold text-text-primary",
 									children: "Protocol & target"
 								}),
-								/* @__PURE__ */ b(E, {
+								/* @__PURE__ */ S(O, {
 									label: "Protocol",
-									children: /* @__PURE__ */ b("div", {
+									children: /* @__PURE__ */ S("div", {
 										className: "flex gap-2",
-										children: J.map((e) => /* @__PURE__ */ b("button", {
+										children: $.map((e) => /* @__PURE__ */ S("button", {
 											type: "button",
-											onClick: () => U("protocol", e),
-											className: `rounded-md border px-4 py-2 text-sm ${j.protocol === e ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
+											onClick: () => J("protocol", e),
+											className: `rounded-md border px-4 py-2 text-sm ${N.protocol === e ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
 											children: e
 										}, e))
 									})
 								}),
-								/* @__PURE__ */ b(E, {
+								/* @__PURE__ */ S(O, {
 									label: "Local host",
-									children: /* @__PURE__ */ b("input", {
+									children: /* @__PURE__ */ S("input", {
 										type: "text",
-										value: j.localHost,
-										onChange: (e) => U("localHost", e.target.value),
+										value: N.localHost,
+										onChange: (e) => J("localHost", e.target.value),
 										className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									})
 								}),
-								/* @__PURE__ */ b(E, {
+								/* @__PURE__ */ S(O, {
 									label: "Local port",
-									children: /* @__PURE__ */ b("input", {
+									children: /* @__PURE__ */ S("input", {
 										type: "number",
-										value: j.localPort,
-										onChange: (e) => U("localPort", parseInt(e.target.value, 10) || 0),
+										value: N.localPort,
+										onChange: (e) => J("localPort", parseInt(e.target.value, 10) || 0),
 										min: 1,
 										max: 65535,
 										className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
@@ -250,263 +261,273 @@ function T() {
 								})
 							]
 						}),
-						k === 2 && /* @__PURE__ */ x("div", {
+						j === 2 && /* @__PURE__ */ C("div", {
 							className: "space-y-4",
 							children: [
-								/* @__PURE__ */ b("h3", {
+								/* @__PURE__ */ S("h3", {
 									className: "text-sm font-semibold text-text-primary",
 									children: "Hostname"
 								}),
-								/* @__PURE__ */ x("div", {
+								/* @__PURE__ */ C("div", {
 									className: "flex gap-2",
 									children: [
-										/* @__PURE__ */ b(D, {
-											active: j.hostnameKind === "managed",
-											onClick: () => U("hostnameKind", "managed"),
-											disabled: !K?.supportsManagedSubdomains,
+										/* @__PURE__ */ S(k, {
+											active: N.hostnameKind === "managed",
+											onClick: () => J("hostnameKind", "managed"),
+											disabled: !Z?.supportsManagedSubdomains,
 											label: "Managed subdomain",
 											hint: "*.vibetunnels.com"
 										}),
-										/* @__PURE__ */ b(D, {
-											active: j.hostnameKind === "custom",
-											onClick: () => U("hostnameKind", "custom"),
-											disabled: !K?.supportsCustomDomains,
+										/* @__PURE__ */ S(k, {
+											active: N.hostnameKind === "custom",
+											onClick: () => J("hostnameKind", "custom"),
+											disabled: !Z?.supportsCustomDomains,
 											label: "Custom domain",
 											hint: "TXT verification"
 										}),
-										/* @__PURE__ */ b(D, {
-											active: j.hostnameKind === "auto",
-											onClick: () => U("hostnameKind", "auto"),
-											disabled: !q,
+										/* @__PURE__ */ S(k, {
+											active: N.hostnameKind === "auto",
+											onClick: () => J("hostnameKind", "auto"),
+											disabled: !Q,
 											label: "Auto",
 											hint: "provider default"
 										})
 									]
 								}),
-								j.hostnameKind === "managed" && /* @__PURE__ */ x(y, { children: [
-									/* @__PURE__ */ b(E, {
+								N.hostnameKind === "managed" && /* @__PURE__ */ C(x, { children: [
+									/* @__PURE__ */ S(O, {
 										label: "Environment",
-										children: /* @__PURE__ */ x("div", {
+										children: /* @__PURE__ */ C("div", {
 											className: "flex gap-2",
-											children: [/* @__PURE__ */ b("button", {
+											children: [/* @__PURE__ */ S("button", {
 												type: "button",
-												onClick: () => U("environment", c.Prod),
-												className: `rounded-md border px-4 py-2 text-sm ${j.environment === c.Prod ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
+												onClick: () => J("environment", c.Prod),
+												className: `rounded-md border px-4 py-2 text-sm ${N.environment === c.Prod ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
 												children: "Prod (vibetunnels.com)"
-											}), /* @__PURE__ */ b("button", {
+											}), /* @__PURE__ */ S("button", {
 												type: "button",
-												onClick: () => U("environment", c.Alpha),
-												className: `rounded-md border px-4 py-2 text-sm ${j.environment === c.Alpha ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
+												onClick: () => J("environment", c.Alpha),
+												className: `rounded-md border px-4 py-2 text-sm ${N.environment === c.Alpha ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
 												children: "Alpha"
 											})]
 										})
 									}),
-									/* @__PURE__ */ b(E, {
+									/* @__PURE__ */ S(O, {
 										label: "Subdomain label",
-										children: /* @__PURE__ */ b("input", {
+										children: /* @__PURE__ */ S("input", {
 											type: "text",
-											value: j.subdomain,
-											onChange: (e) => U("subdomain", e.target.value.toLowerCase()),
+											value: N.subdomain,
+											onChange: (e) => J("subdomain", e.target.value.toLowerCase()),
 											placeholder: "demo",
 											className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
 										})
 									}),
-									j.subdomain && /* @__PURE__ */ x("p", {
+									N.subdomain && /* @__PURE__ */ C("p", {
 										className: "text-xs text-text-secondary",
 										children: [
 											"Will be reserved as",
 											" ",
-											/* @__PURE__ */ x("span", {
+											/* @__PURE__ */ C("span", {
 												className: "font-mono text-text-primary",
-												children: [j.subdomain, j.environment === c.Alpha ? ".alpha.vibetunnels.com" : ".vibetunnels.com"]
+												children: [N.subdomain, N.environment === c.Alpha ? ".alpha.vibetunnels.com" : ".vibetunnels.com"]
 											})
 										]
 									})
 								] }),
-								j.hostnameKind === "custom" && /* @__PURE__ */ x(E, {
+								N.hostnameKind === "custom" && /* @__PURE__ */ C(O, {
 									label: "Custom domain",
-									children: [/* @__PURE__ */ b("input", {
+									children: [/* @__PURE__ */ S("input", {
 										type: "text",
-										value: j.customDomain,
-										onChange: (e) => U("customDomain", e.target.value.toLowerCase()),
+										value: N.customDomain,
+										onChange: (e) => J("customDomain", e.target.value.toLowerCase()),
 										placeholder: "preview.example.com",
 										className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
-									}), /* @__PURE__ */ b("p", {
+									}), /* @__PURE__ */ S("p", {
 										className: "text-xs text-text-muted mt-2",
 										children: "Custom domains are registered on create but must be verified via a TXT record before they can be attached. You'll see the verification challenge in the Domains tab after creation."
 									})]
 								})
 							]
 						}),
-						k === 3 && /* @__PURE__ */ x("div", {
+						j === 3 && /* @__PURE__ */ C("div", {
 							className: "space-y-4",
 							children: [
-								/* @__PURE__ */ b("h3", {
+								/* @__PURE__ */ S("h3", {
 									className: "text-sm font-semibold text-text-primary",
 									children: "Policies (optional)"
 								}),
-								/* @__PURE__ */ b(E, {
+								/* @__PURE__ */ S(O, {
 									label: "Basic auth user",
-									children: /* @__PURE__ */ b("input", {
+									children: /* @__PURE__ */ S("input", {
 										type: "text",
-										value: j.basicAuthUser,
-										onChange: (e) => U("basicAuthUser", e.target.value),
+										value: N.basicAuthUser,
+										onChange: (e) => J("basicAuthUser", e.target.value),
 										className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									})
 								}),
-								/* @__PURE__ */ b(E, {
+								/* @__PURE__ */ S(O, {
 									label: "Basic auth password",
-									children: /* @__PURE__ */ b("input", {
+									children: /* @__PURE__ */ S("input", {
 										type: "password",
-										value: j.basicAuthPassword,
-										onChange: (e) => U("basicAuthPassword", e.target.value),
+										value: N.basicAuthPassword,
+										onChange: (e) => J("basicAuthPassword", e.target.value),
 										className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
 									})
 								})
 							]
 						}),
-						k === 4 && /* @__PURE__ */ x("div", {
+						j === 4 && /* @__PURE__ */ C("div", {
 							className: "space-y-3",
 							children: [
-								/* @__PURE__ */ b("h3", {
+								/* @__PURE__ */ S("h3", {
 									className: "text-sm font-semibold text-text-primary",
-									children: T("vibecontrols.tunnels.review", "Review")
+									children: D("vibecontrols.tunnels.review", "Review")
 								}),
-								/* @__PURE__ */ x("dl", {
+								/* @__PURE__ */ C("dl", {
 									className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm",
 									children: [
-										/* @__PURE__ */ b("dt", {
+										/* @__PURE__ */ S("dt", {
 											className: "text-text-muted",
 											children: "Provider"
 										}),
-										/* @__PURE__ */ b("dd", {
+										/* @__PURE__ */ S("dd", {
 											className: "text-text-primary",
-											children: j.providerKey
+											children: N.providerKey
 										}),
-										/* @__PURE__ */ b("dt", {
+										/* @__PURE__ */ S("dt", {
 											className: "text-text-muted",
 											children: "Name"
 										}),
-										/* @__PURE__ */ b("dd", {
+										/* @__PURE__ */ S("dd", {
 											className: "text-text-primary",
-											children: j.name
+											children: N.name
 										}),
-										/* @__PURE__ */ b("dt", {
+										/* @__PURE__ */ S("dt", {
 											className: "text-text-muted",
 											children: "Agent"
 										}),
-										/* @__PURE__ */ b("dd", {
+										/* @__PURE__ */ S("dd", {
 											className: "text-text-primary font-mono",
-											children: j.agentId
+											children: N.agentId
 										}),
-										/* @__PURE__ */ b("dt", {
+										/* @__PURE__ */ S("dt", {
 											className: "text-text-muted",
 											children: "Protocol"
 										}),
-										/* @__PURE__ */ b("dd", {
+										/* @__PURE__ */ S("dd", {
 											className: "text-text-primary",
-											children: j.protocol
+											children: N.protocol
 										}),
-										/* @__PURE__ */ b("dt", {
+										/* @__PURE__ */ S("dt", {
 											className: "text-text-muted",
 											children: "Target"
 										}),
-										/* @__PURE__ */ x("dd", {
+										/* @__PURE__ */ C("dd", {
 											className: "text-text-primary font-mono",
 											children: [
-												j.localHost,
+												N.localHost,
 												":",
-												j.localPort
+												N.localPort
 											]
 										}),
-										/* @__PURE__ */ b("dt", {
+										/* @__PURE__ */ S("dt", {
 											className: "text-text-muted",
 											children: "Hostname"
 										}),
-										/* @__PURE__ */ b("dd", {
+										/* @__PURE__ */ S("dd", {
 											className: "text-text-primary",
-											children: j.hostnameKind === "managed" ? `${j.subdomain}.${j.environment === "ALPHA" ? "alpha." : ""}vibetunnels.com` : j.hostnameKind === "custom" ? j.customDomain : "auto-assigned"
+											children: N.hostnameKind === "managed" ? `${N.subdomain}.${N.environment === "ALPHA" ? "alpha." : ""}vibetunnels.com` : N.hostnameKind === "custom" ? N.customDomain : "auto-assigned"
 										}),
-										/* @__PURE__ */ b("dt", {
+										/* @__PURE__ */ S("dt", {
 											className: "text-text-muted",
 											children: "Basic auth"
 										}),
-										/* @__PURE__ */ b("dd", {
+										/* @__PURE__ */ S("dd", {
 											className: "text-text-primary",
-											children: j.basicAuthUser ? "yes" : "no"
+											children: N.basicAuthUser ? "yes" : "no"
 										})
 									]
 								}),
-								N && /* @__PURE__ */ b("div", {
+								/* @__PURE__ */ C("div", {
+									className: "border-t border-border-subtle pt-3",
+									children: [/* @__PURE__ */ S("h4", {
+										className: "mb-2 text-sm font-medium text-text-secondary",
+										children: D("vibecontrols.tunnels.tags", "Tags")
+									}), /* @__PURE__ */ S(m, {
+										entityType: "VIBECONTROLS_TUNNEL",
+										onDraftChange: B
+									})]
+								}),
+								F && /* @__PURE__ */ S("div", {
 									className: "rounded-md bg-status-error-bg p-3 text-sm text-status-error-fg",
-									children: N
+									children: F
 								})
 							]
 						})
 					]
-				}, k)
+				}, j)
 			}),
-			/* @__PURE__ */ x("div", {
+			/* @__PURE__ */ C("div", {
 				className: "flex items-center justify-between mt-4",
-				children: [/* @__PURE__ */ b("button", {
+				children: [/* @__PURE__ */ S("button", {
 					type: "button",
-					disabled: k === 0,
-					onClick: Z,
+					disabled: j === 0,
+					onClick: ne,
 					className: "rounded-md border border-border-default px-4 py-2 text-sm text-text-primary hover:bg-bg-elevated disabled:opacity-50",
-					children: T("vibecontrols.tunnels.back", "Back")
-				}), k < w.length - 1 ? /* @__PURE__ */ b("button", {
+					children: D("vibecontrols.tunnels.back", "Back")
+				}), j < E.length - 1 ? /* @__PURE__ */ S("button", {
 					type: "button",
-					disabled: !Y,
-					onClick: X,
+					disabled: !ee,
+					onClick: te,
 					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: T("vibecontrols.tunnels.next", "Next")
-				}) : /* @__PURE__ */ b("button", {
+					children: D("vibecontrols.tunnels.next", "Next")
+				}) : /* @__PURE__ */ S("button", {
 					type: "button",
-					disabled: H,
-					onClick: () => void Q(),
+					disabled: q,
+					onClick: () => void re(),
 					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: H ? T("vibecontrols.tunnels.creating", "Creating...") : T("vibecontrols.tunnels.createTunnel", "Create tunnel")
+					children: q ? D("vibecontrols.tunnels.creating", "Creating...") : D("vibecontrols.tunnels.createTunnel", "Create tunnel")
 				})]
 			}),
-			/* @__PURE__ */ b(s, {
-				isOpen: F,
-				onClose: () => I(!1),
+			/* @__PURE__ */ S(s, {
+				isOpen: L,
+				onClose: () => R(!1),
 				onConfirm: () => {
-					I(!1), O("/billing");
+					R(!1), A("/billing");
 				},
 				...d("tunnel-subdomain")
 			})
 		]
 	});
 }
-function E({ label: e, children: t }) {
-	return /* @__PURE__ */ x("label", {
+function O({ label: e, children: t }) {
+	return /* @__PURE__ */ C("label", {
 		className: "block",
-		children: [/* @__PURE__ */ b("span", {
+		children: [/* @__PURE__ */ S("span", {
 			className: "text-xs font-medium text-text-secondary",
 			children: e
-		}), /* @__PURE__ */ b("div", {
+		}), /* @__PURE__ */ S("div", {
 			className: "mt-1",
 			children: t
 		})]
 	});
 }
-function D({ active: e, disabled: t, onClick: n, label: r, hint: i }) {
-	return /* @__PURE__ */ x("button", {
+function k({ active: e, disabled: t, onClick: n, label: r, hint: i }) {
+	return /* @__PURE__ */ C("button", {
 		type: "button",
 		disabled: t,
 		onClick: n,
 		className: `flex-1 rounded-md border p-3 text-left transition-colors ${e ? "border-action-primary-bg bg-bg-sunken" : "border-border-subtle hover:border-border-default"} ${t ? "opacity-50 cursor-not-allowed" : ""}`,
-		children: [/* @__PURE__ */ b("div", {
+		children: [/* @__PURE__ */ S("div", {
 			className: "text-sm font-medium text-text-primary",
 			children: r
-		}), /* @__PURE__ */ b("div", {
+		}), /* @__PURE__ */ S("div", {
 			className: "text-xs text-text-muted mt-0.5",
 			children: i
 		})]
 	});
 }
 //#endregion
-export { T as TunnelCreateWizard };
+export { D as TunnelCreateWizard };
 
 //# sourceMappingURL=TunnelCreateWizard.js.map