@burdenoff/microfe-vibecontrols 2026.511.1

package/dist/components/tunnels/TunnelCreateWizard.js

@@ -0,0 +1,512 @@
+import { useTr as e } from "../../shared/hooks/useTr.js";
+import { useCreateTunnelMutation as t, useListAgentsQuery as n, useListTunnelProvidersQuery as r } from "../../generated/wspace-operations.js";
+import { PageHeader as i } from "../shared/PageHeader.js";
+import { LoadingState as a } from "../shared/LoadingState.js";
+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";
+//#region src/components/tunnels/TunnelCreateWizard.tsx
+var S = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/, C = {
+	providerKey: u.Vibetunnels,
+	agentId: "",
+	name: "",
+	description: "",
+	protocol: l.Http,
+	localHost: "127.0.0.1",
+	localPort: 3e3,
+	hostnameKind: "managed",
+	subdomain: "",
+	environment: c.Prod,
+	customDomain: "",
+	basicAuthUser: "",
+	basicAuthPassword: ""
+}, w = [
+	{
+		id: "provider",
+		label: "Provider"
+	},
+	{
+		id: "target",
+		label: "Protocol & target"
+	},
+	{
+		id: "hostname",
+		label: "Hostname"
+	},
+	{
+		id: "policies",
+		label: "Policies"
+	},
+	{
+		id: "review",
+		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) => ({
+			...n,
+			[e]: t
+		}));
+	}, []), W = p((e) => {
+		M((t) => ({
+			...t,
+			providerKey: e,
+			hostnameKind: e === u.Cloudflare ? "auto" : "managed"
+		}));
+	}, []), G = m(() => [...L?.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];
+		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,
+		j,
+		q
+	]), X = () => A((e) => Math.min(e + 1, w.length - 1)), Z = () => A((e) => Math.max(e - 1, 0)), Q = async () => {
+		P(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
+			} } });
+			if (e.error) {
+				if (f(e.error)) {
+					I(!0);
+					return;
+				}
+				P(e.error.message);
+				return;
+			}
+			let t = e.data?.createTunnel.id;
+			t && O(`/vibecontrols/tunnels/${t}`);
+		} catch (e) {
+			if (f(e)) {
+				P(null), I(!0);
+				return;
+			}
+			P(e instanceof Error ? e.message : String(e));
+		}
+	};
+	return R ? /* @__PURE__ */ b(a, { message: "Loading providers" }) : z ? /* @__PURE__ */ b(o, {
+		title: "Failed to load providers",
+		message: z.message,
+		onRetry: () => window.location.reload()
+	}) : /* @__PURE__ */ x("div", {
+		className: "p-6 max-w-3xl mx-auto",
+		children: [
+			/* @__PURE__ */ b(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.")
+			}),
+			/* @__PURE__ */ b("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"}`,
+					"aria-label": `Step ${t + 1}: ${e.label}`
+				}, e.id))
+			}),
+			/* @__PURE__ */ b(_, {
+				mode: "wait",
+				children: /* @__PURE__ */ x(v.div, {
+					initial: {
+						opacity: 0,
+						x: 6
+					},
+					animate: {
+						opacity: 1,
+						x: 0
+					},
+					exit: {
+						opacity: 0,
+						x: -6
+					},
+					transition: { duration: .15 },
+					className: "rounded-lg border border-border-subtle bg-bg-surface p-6",
+					children: [
+						k === 0 && /* @__PURE__ */ x("div", {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ b("h3", {
+									className: "text-sm font-semibold text-text-primary",
+									children: "Provider"
+								}),
+								/* @__PURE__ */ b("div", {
+									className: "grid gap-3 sm:grid-cols-2",
+									children: G.map((e) => /* @__PURE__ */ x("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"}`,
+										children: [
+											/* @__PURE__ */ b("div", {
+												className: "font-semibold text-text-primary",
+												children: e.displayName
+											}),
+											/* @__PURE__ */ b("div", {
+												className: "text-xs text-text-muted mt-1",
+												children: e.key
+											}),
+											e.description && /* @__PURE__ */ b("div", {
+												className: "text-xs text-text-secondary mt-2",
+												children: e.description
+											})
+										]
+									}, e.id))
+								}),
+								/* @__PURE__ */ b(E, {
+									label: "Agent",
+									children: /* @__PURE__ */ x("select", {
+										value: j.agentId,
+										onChange: (e) => U("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", {
+											value: "",
+											children: "Select agent"
+										}), (B?.vibecontrolsAgents ?? []).map((e) => /* @__PURE__ */ b("option", {
+											value: e.id,
+											children: e.name
+										}, e.id))]
+									})
+								}),
+								/* @__PURE__ */ b(E, {
+									label: "Name",
+									children: /* @__PURE__ */ b("input", {
+										type: "text",
+										value: j.name,
+										onChange: (e) => U("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, {
+									label: "Description (optional)",
+									children: /* @__PURE__ */ b("input", {
+										type: "text",
+										value: j.description,
+										onChange: (e) => U("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", {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ b("h3", {
+									className: "text-sm font-semibold text-text-primary",
+									children: "Protocol & target"
+								}),
+								/* @__PURE__ */ b(E, {
+									label: "Protocol",
+									children: /* @__PURE__ */ b("div", {
+										className: "flex gap-2",
+										children: J.map((e) => /* @__PURE__ */ b("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"}`,
+											children: e
+										}, e))
+									})
+								}),
+								/* @__PURE__ */ b(E, {
+									label: "Local host",
+									children: /* @__PURE__ */ b("input", {
+										type: "text",
+										value: j.localHost,
+										onChange: (e) => U("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, {
+									label: "Local port",
+									children: /* @__PURE__ */ b("input", {
+										type: "number",
+										value: j.localPort,
+										onChange: (e) => U("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"
+									})
+								})
+							]
+						}),
+						k === 2 && /* @__PURE__ */ x("div", {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ b("h3", {
+									className: "text-sm font-semibold text-text-primary",
+									children: "Hostname"
+								}),
+								/* @__PURE__ */ x("div", {
+									className: "flex gap-2",
+									children: [
+										/* @__PURE__ */ b(D, {
+											active: j.hostnameKind === "managed",
+											onClick: () => U("hostnameKind", "managed"),
+											disabled: !K?.supportsManagedSubdomains,
+											label: "Managed subdomain",
+											hint: "*.vibetunnels.com"
+										}),
+										/* @__PURE__ */ b(D, {
+											active: j.hostnameKind === "custom",
+											onClick: () => U("hostnameKind", "custom"),
+											disabled: !K?.supportsCustomDomains,
+											label: "Custom domain",
+											hint: "TXT verification"
+										}),
+										/* @__PURE__ */ b(D, {
+											active: j.hostnameKind === "auto",
+											onClick: () => U("hostnameKind", "auto"),
+											disabled: !q,
+											label: "Auto",
+											hint: "provider default"
+										})
+									]
+								}),
+								j.hostnameKind === "managed" && /* @__PURE__ */ x(y, { children: [
+									/* @__PURE__ */ b(E, {
+										label: "Environment",
+										children: /* @__PURE__ */ x("div", {
+											className: "flex gap-2",
+											children: [/* @__PURE__ */ b("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"}`,
+												children: "Prod (vibetunnels.com)"
+											}), /* @__PURE__ */ b("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"}`,
+												children: "Alpha"
+											})]
+										})
+									}),
+									/* @__PURE__ */ b(E, {
+										label: "Subdomain label",
+										children: /* @__PURE__ */ b("input", {
+											type: "text",
+											value: j.subdomain,
+											onChange: (e) => U("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", {
+										className: "text-xs text-text-secondary",
+										children: [
+											"Will be reserved as",
+											" ",
+											/* @__PURE__ */ x("span", {
+												className: "font-mono text-text-primary",
+												children: [j.subdomain, j.environment === c.Alpha ? ".alpha.vibetunnels.com" : ".vibetunnels.com"]
+											})
+										]
+									})
+								] }),
+								j.hostnameKind === "custom" && /* @__PURE__ */ x(E, {
+									label: "Custom domain",
+									children: [/* @__PURE__ */ b("input", {
+										type: "text",
+										value: j.customDomain,
+										onChange: (e) => U("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", {
+										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", {
+							className: "space-y-4",
+							children: [
+								/* @__PURE__ */ b("h3", {
+									className: "text-sm font-semibold text-text-primary",
+									children: "Policies (optional)"
+								}),
+								/* @__PURE__ */ b(E, {
+									label: "Basic auth user",
+									children: /* @__PURE__ */ b("input", {
+										type: "text",
+										value: j.basicAuthUser,
+										onChange: (e) => U("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, {
+									label: "Basic auth password",
+									children: /* @__PURE__ */ b("input", {
+										type: "password",
+										value: j.basicAuthPassword,
+										onChange: (e) => U("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", {
+							className: "space-y-3",
+							children: [
+								/* @__PURE__ */ b("h3", {
+									className: "text-sm font-semibold text-text-primary",
+									children: T("vibecontrols.tunnels.review", "Review")
+								}),
+								/* @__PURE__ */ x("dl", {
+									className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm",
+									children: [
+										/* @__PURE__ */ b("dt", {
+											className: "text-text-muted",
+											children: "Provider"
+										}),
+										/* @__PURE__ */ b("dd", {
+											className: "text-text-primary",
+											children: j.providerKey
+										}),
+										/* @__PURE__ */ b("dt", {
+											className: "text-text-muted",
+											children: "Name"
+										}),
+										/* @__PURE__ */ b("dd", {
+											className: "text-text-primary",
+											children: j.name
+										}),
+										/* @__PURE__ */ b("dt", {
+											className: "text-text-muted",
+											children: "Agent"
+										}),
+										/* @__PURE__ */ b("dd", {
+											className: "text-text-primary font-mono",
+											children: j.agentId
+										}),
+										/* @__PURE__ */ b("dt", {
+											className: "text-text-muted",
+											children: "Protocol"
+										}),
+										/* @__PURE__ */ b("dd", {
+											className: "text-text-primary",
+											children: j.protocol
+										}),
+										/* @__PURE__ */ b("dt", {
+											className: "text-text-muted",
+											children: "Target"
+										}),
+										/* @__PURE__ */ x("dd", {
+											className: "text-text-primary font-mono",
+											children: [
+												j.localHost,
+												":",
+												j.localPort
+											]
+										}),
+										/* @__PURE__ */ b("dt", {
+											className: "text-text-muted",
+											children: "Hostname"
+										}),
+										/* @__PURE__ */ b("dd", {
+											className: "text-text-primary",
+											children: j.hostnameKind === "managed" ? `${j.subdomain}.${j.environment === "ALPHA" ? "alpha." : ""}vibetunnels.com` : j.hostnameKind === "custom" ? j.customDomain : "auto-assigned"
+										}),
+										/* @__PURE__ */ b("dt", {
+											className: "text-text-muted",
+											children: "Basic auth"
+										}),
+										/* @__PURE__ */ b("dd", {
+											className: "text-text-primary",
+											children: j.basicAuthUser ? "yes" : "no"
+										})
+									]
+								}),
+								N && /* @__PURE__ */ b("div", {
+									className: "rounded-md bg-status-error-bg p-3 text-sm text-status-error-fg",
+									children: N
+								})
+							]
+						})
+					]
+				}, k)
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "flex items-center justify-between mt-4",
+				children: [/* @__PURE__ */ b("button", {
+					type: "button",
+					disabled: k === 0,
+					onClick: Z,
+					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", {
+					type: "button",
+					disabled: !Y,
+					onClick: X,
+					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", {
+					type: "button",
+					disabled: H,
+					onClick: () => void Q(),
+					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")
+				})]
+			}),
+			/* @__PURE__ */ b(s, {
+				isOpen: F,
+				onClose: () => I(!1),
+				onConfirm: () => {
+					I(!1), O("/billing");
+				},
+				...d("tunnel-subdomain")
+			})
+		]
+	});
+}
+function E({ label: e, children: t }) {
+	return /* @__PURE__ */ x("label", {
+		className: "block",
+		children: [/* @__PURE__ */ b("span", {
+			className: "text-xs font-medium text-text-secondary",
+			children: e
+		}), /* @__PURE__ */ b("div", {
+			className: "mt-1",
+			children: t
+		})]
+	});
+}
+function D({ active: e, disabled: t, onClick: n, label: r, hint: i }) {
+	return /* @__PURE__ */ x("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", {
+			className: "text-sm font-medium text-text-primary",
+			children: r
+		}), /* @__PURE__ */ b("div", {
+			className: "text-xs text-text-muted mt-0.5",
+			children: i
+		})]
+	});
+}
+//#endregion
+export { T as TunnelCreateWizard };
+
+//# sourceMappingURL=TunnelCreateWizard.js.map

package/dist/components/tunnels/TunnelCreateWizard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TunnelCreateWizard.js","names":[],"sources":["../../../src/components/tunnels/TunnelCreateWizard.tsx"],"sourcesContent":["import { useState, useMemo, useCallback } from 'react';\nimport { useNavigate } from 'react-router-dom';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { useTr } from '../../shared/hooks/useTr';\n\nimport { PageHeader } from '@/components/shared/PageHeader';\nimport { LoadingState } from '@/components/shared/LoadingState';\nimport { ErrorState } from '@/components/shared/ErrorState';\nimport { QuotaExhaustedDialog } from '@/components/shared/QuotaExhaustedDialog';\nimport {\n  TunnelEnvironment,\n  TunnelProtocol,\n  TunnelProviderKey,\n  type CreateTunnelInput,\n} from '@/generated/wspace-types';\nimport {\n  useCreateTunnelMutation,\n  useListTunnelProvidersQuery,\n  useListAgentsQuery,\n} from '@/generated/wspace-operations';\nimport { getQuotaDialogContent, isQuotaExhaustedError } from '@/utils/quotaUtils';\n\nconst SUBDOMAIN_RE = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/;\n\ntype HostnameKind = 'managed' | 'custom' | 'auto';\n\ninterface WizardState {\n  providerKey: TunnelProviderKey | '';\n  agentId: string;\n  name: string;\n  description: string;\n  protocol: TunnelProtocol;\n  localHost: string;\n  localPort: number;\n  hostnameKind: HostnameKind;\n  subdomain: string;\n  environment: TunnelEnvironment;\n  customDomain: string;\n  basicAuthUser: string;\n  basicAuthPassword: string;\n}\n\nconst INITIAL_STATE: WizardState = {\n  // Default to Vibe Tunnels as the preferred provider; users can still pick\n  // Cloudflare Tunnels from the provider list.\n  providerKey: TunnelProviderKey.Vibetunnels,\n  agentId: '',\n  name: '',\n  description: '',\n  protocol: TunnelProtocol.Http,\n  localHost: '127.0.0.1',\n  localPort: 3000,\n  hostnameKind: 'managed',\n  subdomain: '',\n  environment: TunnelEnvironment.Prod,\n  customDomain: '',\n  basicAuthUser: '',\n  basicAuthPassword: '',\n};\n\nconst STEPS = [\n  { id: 'provider', label: 'Provider' },\n  { id: 'target', label: 'Protocol & target' },\n  { id: 'hostname', label: 'Hostname' },\n  { id: 'policies', label: 'Policies' },\n  { id: 'review', label: 'Review' },\n] as const;\n\nexport function TunnelCreateWizard() {\n  const tr = useTr();\n  const navigate = useNavigate();\n  const [step, setStep] = useState(0);\n  const [state, setState] = useState<WizardState>(INITIAL_STATE);\n  const [submitError, setSubmitError] = useState<string | null>(null);\n  const [showQuotaExhausted, setShowQuotaExhausted] = useState(false);\n\n  const {\n    data: providersData,\n    loading: providersLoading,\n    error: providersError,\n  } = useListTunnelProvidersQuery();\n  const { data: agentsData } = useListAgentsQuery({ variables: { pagination: { limit: 100 } } });\n\n  const [createTunnel, { loading: creating }] = useCreateTunnelMutation();\n\n  const update = useCallback(<K extends keyof WizardState>(key: K, value: WizardState[K]) => {\n    setState((prev) => ({ ...prev, [key]: value }));\n  }, []);\n\n  const selectProvider = useCallback((providerKey: TunnelProviderKey) => {\n    setState((prev) => ({\n      ...prev,\n      providerKey,\n      hostnameKind: providerKey === TunnelProviderKey.Cloudflare ? 'auto' : 'managed',\n    }));\n  }, []);\n\n  // VibeTunnels first, Cloudflare second, everything else alphabetically.\n  const orderedProviders = useMemo(\n    () =>\n      [...(providersData?.tunnelProviders ?? [])].sort((a: { key: string }, b: { key: string }) => {\n        const rank = (key: string) => (key === 'VIBETUNNELS' ? 0 : key === 'CLOUDFLARE' ? 1 : 2);\n        const diff = rank(a.key) - rank(b.key);\n        if (diff !== 0) return diff;\n        return a.key.localeCompare(b.key);\n      }),\n    [providersData]\n  );\n\n  const selectedProvider = useMemo(\n    () => orderedProviders.find((p: { key: string }) => p.key === state.providerKey),\n    [orderedProviders, state.providerKey]\n  );\n\n  const caps = selectedProvider?.capabilities;\n  const supportsAutoHostname = state.providerKey === TunnelProviderKey.Cloudflare;\n  const protocolOptions = useMemo(() => {\n    if (!caps) return [TunnelProtocol.Http];\n    const list: TunnelProtocol[] = [];\n    if (caps.supportsHttp) list.push(TunnelProtocol.Http);\n    if (caps.supportsHttps) list.push(TunnelProtocol.Https);\n    if (caps.supportsTcp) list.push(TunnelProtocol.Tcp);\n    return list;\n  }, [caps]);\n\n  const canAdvance = useMemo(() => {\n    if (step === 0) return Boolean(state.providerKey && state.agentId && state.name.trim());\n    if (step === 1) return state.localPort > 0 && state.localPort < 65536;\n    if (step === 2) {\n      if (state.hostnameKind === 'managed')\n        return Boolean(state.subdomain && SUBDOMAIN_RE.test(state.subdomain));\n      if (state.hostnameKind === 'custom') return state.customDomain.trim().includes('.');\n      return supportsAutoHostname;\n    }\n    return true;\n  }, [step, state, supportsAutoHostname]);\n\n  const next = () => setStep((s) => Math.min(s + 1, STEPS.length - 1));\n  const back = () => setStep((s) => Math.max(s - 1, 0));\n\n  const submit = async () => {\n    setSubmitError(null);\n    try {\n      const input: CreateTunnelInput = {\n        agentId: state.agentId,\n        name: state.name,\n        description: state.description || undefined,\n        providerKey: state.providerKey as TunnelProviderKey,\n        protocol: state.protocol,\n        localHost: state.localHost,\n        localPort: state.localPort,\n        environment: state.environment,\n        basicAuthUser: state.basicAuthUser || undefined,\n        basicAuthPassword: state.basicAuthPassword || undefined,\n        managedSubdomain: state.hostnameKind === 'managed' ? state.subdomain : undefined,\n      };\n      const result = await createTunnel({ variables: { input } });\n\n      if (result.error) {\n        if (isQuotaExhaustedError(result.error)) {\n          setShowQuotaExhausted(true);\n          return;\n        }\n\n        setSubmitError(result.error.message);\n        return;\n      }\n\n      const id = result.data?.createTunnel.id;\n      if (id) navigate(`/vibecontrols/tunnels/${id}`);\n    } catch (err) {\n      if (isQuotaExhaustedError(err)) {\n        setSubmitError(null);\n        setShowQuotaExhausted(true);\n        return;\n      }\n\n      setSubmitError(err instanceof Error ? err.message : String(err));\n    }\n  };\n\n  if (providersLoading) return <LoadingState message=\"Loading providers\" />;\n  if (providersError) {\n    return (\n      <ErrorState\n        title=\"Failed to load providers\"\n        message={providersError.message}\n        onRetry={() => window.location.reload()}\n      />\n    );\n  }\n\n  return (\n    <div className=\"p-6 max-w-3xl mx-auto\">\n      <PageHeader\n        breadcrumb={[{ label: 'Tunnels', path: '/vibecontrols/tunnels' }, { label: 'New tunnel' }]}\n        title={tr('vibecontrols.tunnels.createTitle', 'Create tunnel')}\n        description={tr(\n          'vibecontrols.tunnels.createDescription',\n          'Expose a local service through a managed tunnel.'\n        )}\n      />\n\n      <div className=\"mb-6 flex items-center gap-2\">\n        {STEPS.map((s, i) => (\n          <div\n            key={s.id}\n            className={`flex-1 h-1.5 rounded-full ${\n              i <= step ? 'bg-action-primary-bg' : 'bg-bg-sunken'\n            }`}\n            aria-label={`Step ${i + 1}: ${s.label}`}\n          />\n        ))}\n      </div>\n\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={step}\n          initial={{ opacity: 0, x: 6 }}\n          animate={{ opacity: 1, x: 0 }}\n          exit={{ opacity: 0, x: -6 }}\n          transition={{ duration: 0.15 }}\n          className=\"rounded-lg border border-border-subtle bg-bg-surface p-6\"\n        >\n          {step === 0 && (\n            <div className=\"space-y-4\">\n              <h3 className=\"text-sm font-semibold text-text-primary\">Provider</h3>\n              <div className=\"grid gap-3 sm:grid-cols-2\">\n                {orderedProviders.map(\n                  (p: {\n                    id: string;\n                    key: TunnelProviderKey;\n                    displayName: string;\n                    description?: string | null;\n                  }) => (\n                    <button\n                      key={p.id}\n                      type=\"button\"\n                      onClick={() => selectProvider(p.key)}\n                      className={`rounded-lg border p-4 text-left transition-colors ${\n                        state.providerKey === p.key\n                          ? 'border-action-primary-bg bg-bg-sunken'\n                          : 'border-border-subtle hover:border-border-default'\n                      }`}\n                    >\n                      <div className=\"font-semibold text-text-primary\">{p.displayName}</div>\n                      <div className=\"text-xs text-text-muted mt-1\">{p.key}</div>\n                      {p.description && (\n                        <div className=\"text-xs text-text-secondary mt-2\">{p.description}</div>\n                      )}\n                    </button>\n                  )\n                )}\n              </div>\n              <LabeledField label=\"Agent\">\n                <select\n                  value={state.agentId}\n                  onChange={(e) => update('agentId', e.target.value)}\n                  className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n                >\n                  <option value=\"\">Select agent</option>\n                  {(agentsData?.vibecontrolsAgents ?? []).map((a: { id: string; name: string }) => (\n                    <option key={a.id} value={a.id}>\n                      {a.name}\n                    </option>\n                  ))}\n                </select>\n              </LabeledField>\n              <LabeledField label=\"Name\">\n                <input\n                  type=\"text\"\n                  value={state.name}\n                  onChange={(e) => update('name', e.target.value)}\n                  placeholder=\"My dev tunnel\"\n                  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\"\n                />\n              </LabeledField>\n              <LabeledField label=\"Description (optional)\">\n                <input\n                  type=\"text\"\n                  value={state.description}\n                  onChange={(e) => update('description', e.target.value)}\n                  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\"\n                />\n              </LabeledField>\n            </div>\n          )}\n\n          {step === 1 && (\n            <div className=\"space-y-4\">\n              <h3 className=\"text-sm font-semibold text-text-primary\">Protocol & target</h3>\n              <LabeledField label=\"Protocol\">\n                <div className=\"flex gap-2\">\n                  {protocolOptions.map((proto) => (\n                    <button\n                      key={proto}\n                      type=\"button\"\n                      onClick={() => update('protocol', proto)}\n                      className={`rounded-md border px-4 py-2 text-sm ${\n                        state.protocol === proto\n                          ? 'border-action-primary-bg bg-bg-sunken text-text-primary'\n                          : 'border-border-subtle text-text-secondary hover:border-border-default'\n                      }`}\n                    >\n                      {proto}\n                    </button>\n                  ))}\n                </div>\n              </LabeledField>\n              <LabeledField label=\"Local host\">\n                <input\n                  type=\"text\"\n                  value={state.localHost}\n                  onChange={(e) => update('localHost', e.target.value)}\n                  className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n                />\n              </LabeledField>\n              <LabeledField label=\"Local port\">\n                <input\n                  type=\"number\"\n                  value={state.localPort}\n                  onChange={(e) => update('localPort', parseInt(e.target.value, 10) || 0)}\n                  min={1}\n                  max={65535}\n                  className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n                />\n              </LabeledField>\n            </div>\n          )}\n\n          {step === 2 && (\n            <div className=\"space-y-4\">\n              <h3 className=\"text-sm font-semibold text-text-primary\">Hostname</h3>\n              <div className=\"flex gap-2\">\n                <HostnameKindButton\n                  active={state.hostnameKind === 'managed'}\n                  onClick={() => update('hostnameKind', 'managed')}\n                  disabled={!caps?.supportsManagedSubdomains}\n                  label=\"Managed subdomain\"\n                  hint=\"*.vibetunnels.com\"\n                />\n                <HostnameKindButton\n                  active={state.hostnameKind === 'custom'}\n                  onClick={() => update('hostnameKind', 'custom')}\n                  disabled={!caps?.supportsCustomDomains}\n                  label=\"Custom domain\"\n                  hint=\"TXT verification\"\n                />\n                <HostnameKindButton\n                  active={state.hostnameKind === 'auto'}\n                  onClick={() => update('hostnameKind', 'auto')}\n                  disabled={!supportsAutoHostname}\n                  label=\"Auto\"\n                  hint=\"provider default\"\n                />\n              </div>\n\n              {state.hostnameKind === 'managed' && (\n                <>\n                  <LabeledField label=\"Environment\">\n                    <div className=\"flex gap-2\">\n                      <button\n                        type=\"button\"\n                        onClick={() => update('environment', TunnelEnvironment.Prod)}\n                        className={`rounded-md border px-4 py-2 text-sm ${\n                          state.environment === TunnelEnvironment.Prod\n                            ? 'border-action-primary-bg bg-bg-sunken text-text-primary'\n                            : 'border-border-subtle text-text-secondary hover:border-border-default'\n                        }`}\n                      >\n                        Prod (vibetunnels.com)\n                      </button>\n                      <button\n                        type=\"button\"\n                        onClick={() => update('environment', TunnelEnvironment.Alpha)}\n                        className={`rounded-md border px-4 py-2 text-sm ${\n                          state.environment === TunnelEnvironment.Alpha\n                            ? 'border-action-primary-bg bg-bg-sunken text-text-primary'\n                            : 'border-border-subtle text-text-secondary hover:border-border-default'\n                        }`}\n                      >\n                        Alpha\n                      </button>\n                    </div>\n                  </LabeledField>\n                  <LabeledField label=\"Subdomain label\">\n                    <input\n                      type=\"text\"\n                      value={state.subdomain}\n                      onChange={(e) => update('subdomain', e.target.value.toLowerCase())}\n                      placeholder=\"demo\"\n                      className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n                    />\n                  </LabeledField>\n                  {state.subdomain && (\n                    <p className=\"text-xs text-text-secondary\">\n                      Will be reserved as{' '}\n                      <span className=\"font-mono text-text-primary\">\n                        {state.subdomain}\n                        {state.environment === TunnelEnvironment.Alpha\n                          ? '.alpha.vibetunnels.com'\n                          : '.vibetunnels.com'}\n                      </span>\n                    </p>\n                  )}\n                </>\n              )}\n\n              {state.hostnameKind === 'custom' && (\n                <LabeledField label=\"Custom domain\">\n                  <input\n                    type=\"text\"\n                    value={state.customDomain}\n                    onChange={(e) => update('customDomain', e.target.value.toLowerCase())}\n                    placeholder=\"preview.example.com\"\n                    className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n                  />\n                  <p className=\"text-xs text-text-muted mt-2\">\n                    Custom domains are registered on create but must be verified via a TXT record\n                    before they can be attached. You'll see the verification challenge in the\n                    Domains tab after creation.\n                  </p>\n                </LabeledField>\n              )}\n            </div>\n          )}\n\n          {step === 3 && (\n            <div className=\"space-y-4\">\n              <h3 className=\"text-sm font-semibold text-text-primary\">Policies (optional)</h3>\n              <LabeledField label=\"Basic auth user\">\n                <input\n                  type=\"text\"\n                  value={state.basicAuthUser}\n                  onChange={(e) => update('basicAuthUser', e.target.value)}\n                  className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n                />\n              </LabeledField>\n              <LabeledField label=\"Basic auth password\">\n                <input\n                  type=\"password\"\n                  value={state.basicAuthPassword}\n                  onChange={(e) => update('basicAuthPassword', e.target.value)}\n                  className=\"w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary\"\n                />\n              </LabeledField>\n            </div>\n          )}\n\n          {step === 4 && (\n            <div className=\"space-y-3\">\n              <h3 className=\"text-sm font-semibold text-text-primary\">\n                {tr('vibecontrols.tunnels.review', 'Review')}\n              </h3>\n              <dl className=\"grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm\">\n                <dt className=\"text-text-muted\">Provider</dt>\n                <dd className=\"text-text-primary\">{state.providerKey}</dd>\n                <dt className=\"text-text-muted\">Name</dt>\n                <dd className=\"text-text-primary\">{state.name}</dd>\n                <dt className=\"text-text-muted\">Agent</dt>\n                <dd className=\"text-text-primary font-mono\">{state.agentId}</dd>\n                <dt className=\"text-text-muted\">Protocol</dt>\n                <dd className=\"text-text-primary\">{state.protocol}</dd>\n                <dt className=\"text-text-muted\">Target</dt>\n                <dd className=\"text-text-primary font-mono\">\n                  {state.localHost}:{state.localPort}\n                </dd>\n                <dt className=\"text-text-muted\">Hostname</dt>\n                <dd className=\"text-text-primary\">\n                  {state.hostnameKind === 'managed'\n                    ? `${state.subdomain}.${state.environment === 'ALPHA' ? 'alpha.' : ''}vibetunnels.com`\n                    : state.hostnameKind === 'custom'\n                      ? state.customDomain\n                      : 'auto-assigned'}\n                </dd>\n                <dt className=\"text-text-muted\">Basic auth</dt>\n                <dd className=\"text-text-primary\">{state.basicAuthUser ? 'yes' : 'no'}</dd>\n              </dl>\n              {submitError && (\n                <div className=\"rounded-md bg-status-error-bg p-3 text-sm text-status-error-fg\">\n                  {submitError}\n                </div>\n              )}\n            </div>\n          )}\n        </motion.div>\n      </AnimatePresence>\n\n      <div className=\"flex items-center justify-between mt-4\">\n        <button\n          type=\"button\"\n          disabled={step === 0}\n          onClick={back}\n          className=\"rounded-md border border-border-default px-4 py-2 text-sm text-text-primary hover:bg-bg-elevated disabled:opacity-50\"\n        >\n          {tr('vibecontrols.tunnels.back', 'Back')}\n        </button>\n        {step < STEPS.length - 1 ? (\n          <button\n            type=\"button\"\n            disabled={!canAdvance}\n            onClick={next}\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            {tr('vibecontrols.tunnels.next', 'Next')}\n          </button>\n        ) : (\n          <button\n            type=\"button\"\n            disabled={creating}\n            onClick={() => void submit()}\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            {creating\n              ? tr('vibecontrols.tunnels.creating', 'Creating...')\n              : tr('vibecontrols.tunnels.createTunnel', 'Create tunnel')}\n          </button>\n        )}\n      </div>\n\n      <QuotaExhaustedDialog\n        isOpen={showQuotaExhausted}\n        onClose={() => setShowQuotaExhausted(false)}\n        onConfirm={() => {\n          setShowQuotaExhausted(false);\n          navigate('/billing');\n        }}\n        {...getQuotaDialogContent('tunnel-subdomain')}\n      />\n    </div>\n  );\n}\n\nfunction LabeledField({ label, children }: { label: string; children: React.ReactNode }) {\n  return (\n    <label className=\"block\">\n      <span className=\"text-xs font-medium text-text-secondary\">{label}</span>\n      <div className=\"mt-1\">{children}</div>\n    </label>\n  );\n}\n\nfunction HostnameKindButton({\n  active,\n  disabled,\n  onClick,\n  label,\n  hint,\n}: {\n  active: boolean;\n  disabled?: boolean;\n  onClick: () => void;\n  label: string;\n  hint: string;\n}) {\n  return (\n    <button\n      type=\"button\"\n      disabled={disabled}\n      onClick={onClick}\n      className={`flex-1 rounded-md border p-3 text-left transition-colors ${\n        active\n          ? 'border-action-primary-bg bg-bg-sunken'\n          : 'border-border-subtle hover:border-border-default'\n      } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}\n    >\n      <div className=\"text-sm font-medium text-text-primary\">{label}</div>\n      <div className=\"text-xs text-text-muted mt-0.5\">{hint}</div>\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAM,IAAe,wCAoBf,IAA6B;CAGjC,aAAa,EAAkB;CAC/B,SAAS;CACT,MAAM;CACN,aAAa;CACb,UAAU,EAAe;CACzB,WAAW;CACX,WAAW;CACX,cAAc;CACd,WAAW;CACX,aAAa,EAAkB;CAC/B,cAAc;CACd,eAAe;CACf,mBAAmB;CACpB,EAEK,IAAQ;CACZ;EAAE,IAAI;EAAY,OAAO;EAAY;CACrC;EAAE,IAAI;EAAU,OAAO;EAAqB;CAC5C;EAAE,IAAI;EAAY,OAAO;EAAY;CACrC;EAAE,IAAI;EAAY,OAAO;EAAY;CACrC;EAAE,IAAI;EAAU,OAAO;EAAU;CAClC;AAED,SAAgB,IAAqB;CACnC,IAAM,IAAK,GAAO,EACZ,IAAW,GAAa,EACxB,CAAC,GAAM,KAAW,EAAS,EAAE,EAC7B,CAAC,GAAO,KAAY,EAAsB,EAAc,EACxD,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAC7D,CAAC,GAAoB,KAAyB,EAAS,GAAM,EAE7D,EACJ,MAAM,GACN,SAAS,GACT,OAAO,MACL,GAA6B,EAC3B,EAAE,MAAM,MAAe,EAAmB,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,KAAK,EAAE,EAAE,CAAC,EAExF,CAAC,GAAc,EAAE,SAAS,OAAc,GAAyB,EAEjE,IAAS,GAA0C,GAAQ,MAA0B;AACzF,KAAU,OAAU;GAAE,GAAG;IAAO,IAAM;GAAO,EAAE;IAC9C,EAAE,CAAC,EAEA,IAAiB,GAAa,MAAmC;AACrE,KAAU,OAAU;GAClB,GAAG;GACH;GACA,cAAc,MAAgB,EAAkB,aAAa,SAAS;GACvE,EAAE;IACF,EAAE,CAAC,EAGA,IAAmB,QAErB,CAAC,GAAI,GAAe,mBAAmB,EAAE,CAAE,CAAC,MAAM,GAAoB,MAAuB;EAC3F,IAAM,KAAQ,MAAiB,MAAQ,gBAAgB,IAAI,MAAQ,eAAe,IAAI,GAChF,IAAO,EAAK,EAAE,IAAI,GAAG,EAAK,EAAE,IAAI;AAEtC,SADI,MAAS,IACN,EAAE,IAAI,cAAc,EAAE,IAAI,GADV;GAEvB,EACJ,CAAC,EAAc,CAChB,EAOK,IALmB,QACjB,EAAiB,MAAM,MAAuB,EAAE,QAAQ,EAAM,YAAY,EAChF,CAAC,GAAkB,EAAM,YAAY,CACtC,EAE8B,cACzB,IAAuB,EAAM,gBAAgB,EAAkB,YAC/D,IAAkB,QAAc;AACpC,MAAI,CAAC,EAAM,QAAO,CAAC,EAAe,KAAK;EACvC,IAAM,IAAyB,EAAE;AAIjC,SAHI,EAAK,gBAAc,EAAK,KAAK,EAAe,KAAK,EACjD,EAAK,iBAAe,EAAK,KAAK,EAAe,MAAM,EACnD,EAAK,eAAa,EAAK,KAAK,EAAe,IAAI,EAC5C;IACN,CAAC,EAAK,CAAC,EAEJ,IAAa,QACb,MAAS,IAAU,GAAQ,EAAM,eAAe,EAAM,WAAW,EAAM,KAAK,MAAM,IAClF,MAAS,IAAU,EAAM,YAAY,KAAK,EAAM,YAAY,QAC5D,MAAS,IACP,EAAM,iBAAiB,YAClB,GAAQ,EAAM,aAAa,EAAa,KAAK,EAAM,UAAU,IAClE,EAAM,iBAAiB,WAAiB,EAAM,aAAa,MAAM,CAAC,SAAS,IAAI,GAC5E,IAEF,IACN;EAAC;EAAM;EAAO;EAAqB,CAAC,EAEjC,UAAa,GAAS,MAAM,KAAK,IAAI,IAAI,GAAG,EAAM,SAAS,EAAE,CAAC,EAC9D,UAAa,GAAS,MAAM,KAAK,IAAI,IAAI,GAAG,EAAE,CAAC,EAE/C,IAAS,YAAY;AACzB,IAAe,KAAK;AACpB,MAAI;GAcF,IAAM,IAAS,MAAM,EAAa,EAAE,WAAW,EAAE,OAbhB;IAC/B,SAAS,EAAM;IACf,MAAM,EAAM;IACZ,aAAa,EAAM,eAAe,KAAA;IAClC,aAAa,EAAM;IACnB,UAAU,EAAM;IAChB,WAAW,EAAM;IACjB,WAAW,EAAM;IACjB,aAAa,EAAM;IACnB,eAAe,EAAM,iBAAiB,KAAA;IACtC,mBAAmB,EAAM,qBAAqB,KAAA;IAC9C,kBAAkB,EAAM,iBAAiB,YAAY,EAAM,YAAY,KAAA;IACxE,EACuD,EAAE,CAAC;AAE3D,OAAI,EAAO,OAAO;AAChB,QAAI,EAAsB,EAAO,MAAM,EAAE;AACvC,OAAsB,GAAK;AAC3B;;AAGF,MAAe,EAAO,MAAM,QAAQ;AACpC;;GAGF,IAAM,IAAK,EAAO,MAAM,aAAa;AACrC,GAAI,KAAI,EAAS,yBAAyB,IAAK;WACxC,GAAK;AACZ,OAAI,EAAsB,EAAI,EAAE;AAE9B,IADA,EAAe,KAAK,EACpB,EAAsB,GAAK;AAC3B;;AAGF,KAAe,aAAe,QAAQ,EAAI,UAAU,OAAO,EAAI,CAAC;;;AAepE,QAXI,IAAyB,kBAAC,GAAD,EAAc,SAAQ,qBAAsB,CAAA,GACrE,IAEA,kBAAC,GAAD;EACE,OAAM;EACN,SAAS,EAAe;EACxB,eAAe,OAAO,SAAS,QAAQ;EACvC,CAAA,GAKJ,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,GAAD;IACE,YAAY,CAAC;KAAE,OAAO;KAAW,MAAM;KAAyB,EAAE,EAAE,OAAO,cAAc,CAAC;IAC1F,OAAO,EAAG,oCAAoC,gBAAgB;IAC9D,aAAa,EACX,0CACA,mDACD;IACD,CAAA;GAEF,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAM,KAAK,GAAG,MACb,kBAAC,OAAD;KAEE,WAAW,6BACT,KAAK,IAAO,yBAAyB;KAEvC,cAAY,QAAQ,IAAI,EAAE,IAAI,EAAE;KAChC,EALK,EAAE,GAKP,CACF;IACE,CAAA;GAEN,kBAAC,GAAD;IAAiB,MAAK;cACpB,kBAAC,EAAO,KAAR;KAEE,SAAS;MAAE,SAAS;MAAG,GAAG;MAAG;KAC7B,SAAS;MAAE,SAAS;MAAG,GAAG;MAAG;KAC7B,MAAM;MAAE,SAAS;MAAG,GAAG;MAAI;KAC3B,YAAY,EAAE,UAAU,KAAM;KAC9B,WAAU;eANZ;MAQG,MAAS,KACR,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,MAAD;SAAI,WAAU;mBAA0C;SAAa,CAAA;QACrE,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAiB,KACf,MAMC,kBAAC,UAAD;UAEE,MAAK;UACL,eAAe,EAAe,EAAE,IAAI;UACpC,WAAW,qDACT,EAAM,gBAAgB,EAAE,MACpB,0CACA;oBAPR;WAUE,kBAAC,OAAD;YAAK,WAAU;sBAAmC,EAAE;YAAkB,CAAA;WACtE,kBAAC,OAAD;YAAK,WAAU;sBAAgC,EAAE;YAAU,CAAA;WAC1D,EAAE,eACD,kBAAC,OAAD;YAAK,WAAU;sBAAoC,EAAE;YAAkB,CAAA;WAElE;YAdF,EAAE,GAcA,CAEZ;SACG,CAAA;QACN,kBAAC,GAAD;SAAc,OAAM;mBAClB,kBAAC,UAAD;UACE,OAAO,EAAM;UACb,WAAW,MAAM,EAAO,WAAW,EAAE,OAAO,MAAM;UAClD,WAAU;oBAHZ,CAKE,kBAAC,UAAD;WAAQ,OAAM;qBAAG;WAAqB,CAAA,GACpC,GAAY,sBAAsB,EAAE,EAAE,KAAK,MAC3C,kBAAC,UAAD;WAAmB,OAAO,EAAE;qBACzB,EAAE;WACI,EAFI,EAAE,GAEN,CACT,CACK;;SACI,CAAA;QACf,kBAAC,GAAD;SAAc,OAAM;mBAClB,kBAAC,SAAD;UACE,MAAK;UACL,OAAO,EAAM;UACb,WAAW,MAAM,EAAO,QAAQ,EAAE,OAAO,MAAM;UAC/C,aAAY;UACZ,WAAU;UACV,CAAA;SACW,CAAA;QACf,kBAAC,GAAD;SAAc,OAAM;mBAClB,kBAAC,SAAD;UACE,MAAK;UACL,OAAO,EAAM;UACb,WAAW,MAAM,EAAO,eAAe,EAAE,OAAO,MAAM;UACtD,WAAU;UACV,CAAA;SACW,CAAA;QACX;;MAGP,MAAS,KACR,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,MAAD;SAAI,WAAU;mBAA0C;SAAsB,CAAA;QAC9E,kBAAC,GAAD;SAAc,OAAM;mBAClB,kBAAC,OAAD;UAAK,WAAU;oBACZ,EAAgB,KAAK,MACpB,kBAAC,UAAD;WAEE,MAAK;WACL,eAAe,EAAO,YAAY,EAAM;WACxC,WAAW,uCACT,EAAM,aAAa,IACf,4DACA;qBAGL;WACM,EAVF,EAUE,CACT;UACE,CAAA;SACO,CAAA;QACf,kBAAC,GAAD;SAAc,OAAM;mBAClB,kBAAC,SAAD;UACE,MAAK;UACL,OAAO,EAAM;UACb,WAAW,MAAM,EAAO,aAAa,EAAE,OAAO,MAAM;UACpD,WAAU;UACV,CAAA;SACW,CAAA;QACf,kBAAC,GAAD;SAAc,OAAM;mBAClB,kBAAC,SAAD;UACE,MAAK;UACL,OAAO,EAAM;UACb,WAAW,MAAM,EAAO,aAAa,SAAS,EAAE,OAAO,OAAO,GAAG,IAAI,EAAE;UACvE,KAAK;UACL,KAAK;UACL,WAAU;UACV,CAAA;SACW,CAAA;QACX;;MAGP,MAAS,KACR,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,MAAD;SAAI,WAAU;mBAA0C;SAAa,CAAA;QACrE,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,GAAD;WACE,QAAQ,EAAM,iBAAiB;WAC/B,eAAe,EAAO,gBAAgB,UAAU;WAChD,UAAU,CAAC,GAAM;WACjB,OAAM;WACN,MAAK;WACL,CAAA;UACF,kBAAC,GAAD;WACE,QAAQ,EAAM,iBAAiB;WAC/B,eAAe,EAAO,gBAAgB,SAAS;WAC/C,UAAU,CAAC,GAAM;WACjB,OAAM;WACN,MAAK;WACL,CAAA;UACF,kBAAC,GAAD;WACE,QAAQ,EAAM,iBAAiB;WAC/B,eAAe,EAAO,gBAAgB,OAAO;WAC7C,UAAU,CAAC;WACX,OAAM;WACN,MAAK;WACL,CAAA;UACE;;QAEL,EAAM,iBAAiB,aACtB,kBAAA,GAAA,EAAA,UAAA;SACE,kBAAC,GAAD;UAAc,OAAM;oBAClB,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,EAAO,eAAe,EAAkB,KAAK;YAC5D,WAAW,uCACT,EAAM,gBAAgB,EAAkB,OACpC,4DACA;sBAEP;YAEQ,CAAA,EACT,kBAAC,UAAD;YACE,MAAK;YACL,eAAe,EAAO,eAAe,EAAkB,MAAM;YAC7D,WAAW,uCACT,EAAM,gBAAgB,EAAkB,QACpC,4DACA;sBAEP;YAEQ,CAAA,CACL;;UACO,CAAA;SACf,kBAAC,GAAD;UAAc,OAAM;oBAClB,kBAAC,SAAD;WACE,MAAK;WACL,OAAO,EAAM;WACb,WAAW,MAAM,EAAO,aAAa,EAAE,OAAO,MAAM,aAAa,CAAC;WAClE,aAAY;WACZ,WAAU;WACV,CAAA;UACW,CAAA;SACd,EAAM,aACL,kBAAC,KAAD;UAAG,WAAU;oBAAb;WAA2C;WACrB;WACpB,kBAAC,QAAD;YAAM,WAAU;sBAAhB,CACG,EAAM,WACN,EAAM,gBAAgB,EAAkB,QACrC,2BACA,mBACC;;WACL;;SAEL,EAAA,CAAA;QAGJ,EAAM,iBAAiB,YACtB,kBAAC,GAAD;SAAc,OAAM;mBAApB,CACE,kBAAC,SAAD;UACE,MAAK;UACL,OAAO,EAAM;UACb,WAAW,MAAM,EAAO,gBAAgB,EAAE,OAAO,MAAM,aAAa,CAAC;UACrE,aAAY;UACZ,WAAU;UACV,CAAA,EACF,kBAAC,KAAD;UAAG,WAAU;oBAA+B;UAIxC,CAAA,CACS;;QAEb;;MAGP,MAAS,KACR,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,MAAD;SAAI,WAAU;mBAA0C;SAAwB,CAAA;QAChF,kBAAC,GAAD;SAAc,OAAM;mBAClB,kBAAC,SAAD;UACE,MAAK;UACL,OAAO,EAAM;UACb,WAAW,MAAM,EAAO,iBAAiB,EAAE,OAAO,MAAM;UACxD,WAAU;UACV,CAAA;SACW,CAAA;QACf,kBAAC,GAAD;SAAc,OAAM;mBAClB,kBAAC,SAAD;UACE,MAAK;UACL,OAAO,EAAM;UACb,WAAW,MAAM,EAAO,qBAAqB,EAAE,OAAO,MAAM;UAC5D,WAAU;UACV,CAAA;SACW,CAAA;QACX;;MAGP,MAAS,KACR,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAG,+BAA+B,SAAS;SACzC,CAAA;QACL,kBAAC,MAAD;SAAI,WAAU;mBAAd;UACE,kBAAC,MAAD;WAAI,WAAU;qBAAkB;WAAa,CAAA;UAC7C,kBAAC,MAAD;WAAI,WAAU;qBAAqB,EAAM;WAAiB,CAAA;UAC1D,kBAAC,MAAD;WAAI,WAAU;qBAAkB;WAAS,CAAA;UACzC,kBAAC,MAAD;WAAI,WAAU;qBAAqB,EAAM;WAAU,CAAA;UACnD,kBAAC,MAAD;WAAI,WAAU;qBAAkB;WAAU,CAAA;UAC1C,kBAAC,MAAD;WAAI,WAAU;qBAA+B,EAAM;WAAa,CAAA;UAChE,kBAAC,MAAD;WAAI,WAAU;qBAAkB;WAAa,CAAA;UAC7C,kBAAC,MAAD;WAAI,WAAU;qBAAqB,EAAM;WAAc,CAAA;UACvD,kBAAC,MAAD;WAAI,WAAU;qBAAkB;WAAW,CAAA;UAC3C,kBAAC,MAAD;WAAI,WAAU;qBAAd;YACG,EAAM;YAAU;YAAE,EAAM;YACtB;;UACL,kBAAC,MAAD;WAAI,WAAU;qBAAkB;WAAa,CAAA;UAC7C,kBAAC,MAAD;WAAI,WAAU;qBACX,EAAM,iBAAiB,YACpB,GAAG,EAAM,UAAU,GAAG,EAAM,gBAAgB,UAAU,WAAW,GAAG,mBACpE,EAAM,iBAAiB,WACrB,EAAM,eACN;WACH,CAAA;UACL,kBAAC,MAAD;WAAI,WAAU;qBAAkB;WAAe,CAAA;UAC/C,kBAAC,MAAD;WAAI,WAAU;qBAAqB,EAAM,gBAAgB,QAAQ;WAAU,CAAA;UACxE;;QACJ,KACC,kBAAC,OAAD;SAAK,WAAU;mBACZ;SACG,CAAA;QAEJ;;MAEG;OA5QN,EA4QM;IACG,CAAA;GAElB,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,MAAS;KACnB,SAAS;KACT,WAAU;eAET,EAAG,6BAA6B,OAAO;KACjC,CAAA,EACR,IAAO,EAAM,SAAS,IACrB,kBAAC,UAAD;KACE,MAAK;KACL,UAAU,CAAC;KACX,SAAS;KACT,WAAU;eAET,EAAG,6BAA6B,OAAO;KACjC,CAAA,GAET,kBAAC,UAAD;KACE,MAAK;KACL,UAAU;KACV,eAAe,KAAK,GAAQ;KAC5B,WAAU;eAET,IACG,EAAG,iCAAiC,cAAc,GAClD,EAAG,qCAAqC,gBAAgB;KACrD,CAAA,CAEP;;GAEN,kBAAC,GAAD;IACE,QAAQ;IACR,eAAe,EAAsB,GAAM;IAC3C,iBAAiB;AAEf,KADA,EAAsB,GAAM,EAC5B,EAAS,WAAW;;IAEtB,GAAI,EAAsB,mBAAmB;IAC7C,CAAA;GACE;;;AAIV,SAAS,EAAa,EAAE,UAAO,eAA0D;AACvF,QACE,kBAAC,SAAD;EAAO,WAAU;YAAjB,CACE,kBAAC,QAAD;GAAM,WAAU;aAA2C;GAAa,CAAA,EACxE,kBAAC,OAAD;GAAK,WAAU;GAAQ;GAAe,CAAA,CAChC;;;AAIZ,SAAS,EAAmB,EAC1B,WACA,aACA,YACA,UACA,WAOC;AACD,QACE,kBAAC,UAAD;EACE,MAAK;EACK;EACD;EACT,WAAW,4DACT,IACI,0CACA,mDACL,GAAG,IAAW,kCAAkC;YARnD,CAUE,kBAAC,OAAD;GAAK,WAAU;aAAyC;GAAY,CAAA,EACpE,kBAAC,OAAD;GAAK,WAAU;aAAkC;GAAW,CAAA,CACrD"}

package/dist/components/tunnels/TunnelStatusBadge.d.ts

@@ -0,0 +1,6 @@
+import { TunnelStatus } from '../../generated/wspace-types';
+
+export declare function TunnelStatusBadge({ status }: {
+    status: TunnelStatus | string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TunnelStatusBadge.d.ts.map

package/dist/components/tunnels/TunnelStatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TunnelStatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/tunnels/TunnelStatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAY7D,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,YAAY,GAAG,MAAM,CAAA;CAAE,2CAS9E"}

package/dist/components/tunnels/TunnelStatusBadge.js

@@ -0,0 +1,21 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/tunnels/TunnelStatusBadge.tsx
+var t = {
+	ACTIVE: "bg-status-success-bg text-status-success-fg",
+	DRAFT: "bg-bg-sunken text-text-secondary",
+	PROVISIONING: "bg-status-warning-bg text-status-warning-fg",
+	DEGRADED: "bg-status-warning-bg text-status-warning-fg",
+	STOPPED: "bg-bg-sunken text-text-muted",
+	ERROR: "bg-status-error-bg text-status-error-fg",
+	DELETING: "bg-bg-sunken text-text-muted"
+};
+function n({ status: n }) {
+	return /* @__PURE__ */ e("span", {
+		className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${t[n] ?? "bg-bg-sunken text-text-secondary"}`,
+		children: n
+	});
+}
+//#endregion
+export { n as TunnelStatusBadge };
+
+//# sourceMappingURL=TunnelStatusBadge.js.map

package/dist/components/tunnels/TunnelStatusBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TunnelStatusBadge.js","names":[],"sources":["../../../src/components/tunnels/TunnelStatusBadge.tsx"],"sourcesContent":["import type { TunnelStatus } from '@/generated/wspace-types';\n\nconst STATUS_STYLES: Record<string, string> = {\n  ACTIVE: 'bg-status-success-bg text-status-success-fg',\n  DRAFT: 'bg-bg-sunken text-text-secondary',\n  PROVISIONING: 'bg-status-warning-bg text-status-warning-fg',\n  DEGRADED: 'bg-status-warning-bg text-status-warning-fg',\n  STOPPED: 'bg-bg-sunken text-text-muted',\n  ERROR: 'bg-status-error-bg text-status-error-fg',\n  DELETING: 'bg-bg-sunken text-text-muted',\n};\n\nexport function TunnelStatusBadge({ status }: { status: TunnelStatus | string }) {\n  const style = STATUS_STYLES[status] ?? 'bg-bg-sunken text-text-secondary';\n  return (\n    <span\n      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${style}`}\n    >\n      {status}\n    </span>\n  );\n}\n"],"mappings":";;AAEA,IAAM,IAAwC;CAC5C,QAAQ;CACR,OAAO;CACP,cAAc;CACd,UAAU;CACV,SAAS;CACT,OAAO;CACP,UAAU;CACX;AAED,SAAgB,EAAkB,EAAE,aAA6C;AAE/E,QACE,kBAAC,QAAD;EACE,WAAW,yEAHD,EAAc,MAAW;YAKlC;EACI,CAAA"}

package/dist/components/vibe/VibeAgentEmptyState.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+
+export interface VibeAgentEmptyStateProps {
+    vibeId: string;
+    tr: (key: string, fallback: string) => string;
+}
+export declare const VibeAgentEmptyState: FC<VibeAgentEmptyStateProps>;
+//# sourceMappingURL=VibeAgentEmptyState.d.ts.map

package/dist/components/vibe/VibeAgentEmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VibeAgentEmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/vibe/VibeAgentEmptyState.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,MAAM,WAAW,wBAAwB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,EAAE,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CA8B5D,CAAC"}