@burdenoff/microfe-vibecontrols 2026.601.10 → 2026.601.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/tunnels/TunnelCreateWizard.js +219 -214
- package/dist/components/tunnels/TunnelCreateWizard.js.map +1 -1
- package/dist/pages/AgentsPage.js +259 -246
- package/dist/pages/AgentsPage.js.map +1 -1
- package/dist/pages/SessionsPage.js +742 -728
- package/dist/pages/SessionsPage.js.map +1 -1
- package/dist/pages/VibeDeckPage.js +303 -285
- package/dist/pages/VibeDeckPage.js.map +1 -1
- package/dist/pages/tunnels/TunnelsTab.js +79 -74
- package/dist/pages/tunnels/TunnelsTab.js.map +1 -1
- package/dist/providers/QuotaExhaustedProvider.js +27 -18
- package/dist/providers/QuotaExhaustedProvider.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,36 +1,38 @@
|
|
|
1
1
|
import { useCreateTunnelMutation as e, useListAgentsQuery as t, useListTunnelProvidersQuery as n } from "../../generated/wspace-operations.js";
|
|
2
2
|
import { useTr as r } from "../../shared/hooks/useTr.js";
|
|
3
|
-
import { QuotaExhaustedDialog as
|
|
4
|
-
import { getQuotaDialogContent as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
3
|
+
import { QuotaExhaustedDialog as ee } from "../shared/QuotaExhaustedDialog.js";
|
|
4
|
+
import { getQuotaDialogContent as i, isQuotaExhaustedError as a, markQuotaHandledLocally as o } from "../../utils/quotaUtils.js";
|
|
5
|
+
import { useVibeControls as s } from "../../providers/VibeControlsProvider.js";
|
|
6
|
+
import { PageHeader as c } from "../shared/PageHeader.js";
|
|
7
|
+
import { LoadingState as te } from "../shared/LoadingState.js";
|
|
8
|
+
import { ErrorState as ne } from "../shared/ErrorState.js";
|
|
9
|
+
import { TunnelEnvironment as l, TunnelProtocol as u, TunnelProviderKey as d } from "../../generated/wspace-types.js";
|
|
10
|
+
import { EntityTagPicker as f } from "../shared/EntityTagPicker.js";
|
|
11
|
+
import { useDraftEntityTags as p } from "../../hooks/useDraftEntityTags.js";
|
|
12
|
+
import { LINK_TO_VIBE_DEFAULT as re, LinkToVibePanel as ie, linkToVibeInput as ae } from "../shared/LinkToVibePanel.js";
|
|
12
13
|
import "../shared/index.js";
|
|
13
|
-
import { useCallback as
|
|
14
|
-
import { useNavigate as
|
|
15
|
-
import { AnimatePresence as
|
|
16
|
-
import { Fragment as
|
|
17
|
-
import { Stepper as
|
|
14
|
+
import { useCallback as m, useMemo as h, useState as g } from "react";
|
|
15
|
+
import { useNavigate as oe } from "react-router-dom";
|
|
16
|
+
import { AnimatePresence as se, motion as _ } from "framer-motion";
|
|
17
|
+
import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
|
|
18
|
+
import { Stepper as x } from "@burdenoff/fe-libs/ui";
|
|
19
|
+
import { useEventBus as S } from "@burdenoff/fe-libs/shared/events";
|
|
18
20
|
//#region src/components/tunnels/TunnelCreateWizard.tsx
|
|
19
|
-
var
|
|
20
|
-
providerKey:
|
|
21
|
+
var C = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/, w = {
|
|
22
|
+
providerKey: d.Vibetunnels,
|
|
21
23
|
agentId: "",
|
|
22
24
|
name: "",
|
|
23
25
|
description: "",
|
|
24
|
-
protocol:
|
|
26
|
+
protocol: u.Http,
|
|
25
27
|
localHost: "127.0.0.1",
|
|
26
28
|
localPort: 3e3,
|
|
27
29
|
hostnameKind: "managed",
|
|
28
30
|
subdomain: "",
|
|
29
|
-
environment:
|
|
31
|
+
environment: l.Prod,
|
|
30
32
|
customDomain: "",
|
|
31
33
|
basicAuthUser: "",
|
|
32
34
|
basicAuthPassword: ""
|
|
33
|
-
},
|
|
35
|
+
}, T = [
|
|
34
36
|
{
|
|
35
37
|
id: "provider",
|
|
36
38
|
label: "Provider"
|
|
@@ -52,99 +54,102 @@ var w = /^[a-z0-9]([a-z0-9-]{0,61}[a-z0-9])?$/, T = {
|
|
|
52
54
|
label: "Review"
|
|
53
55
|
}
|
|
54
56
|
];
|
|
55
|
-
function
|
|
56
|
-
let
|
|
57
|
-
|
|
57
|
+
function E() {
|
|
58
|
+
let E = r(), k = oe(), A = S(), { workspaceId: j } = s(), [M, N] = g(0), [P, F] = g(w), [I, L] = g(null), [R, z] = g(!1), [B, V] = g(!1), [H, U] = g(re), { setDraftTagIds: W, flushTags: G } = p("VIBECONTROLS_TUNNEL"), { data: K, loading: ce, error: q } = n(), { data: le } = t({ variables: { pagination: { limit: 100 } } }), [ue, { loading: J }] = e(), Y = m((e, t) => {
|
|
59
|
+
F((n) => ({
|
|
58
60
|
...n,
|
|
59
61
|
[e]: t
|
|
60
62
|
}));
|
|
61
|
-
}, []),
|
|
62
|
-
|
|
63
|
+
}, []), X = m((e) => {
|
|
64
|
+
F((t) => ({
|
|
63
65
|
...t,
|
|
64
66
|
providerKey: e,
|
|
65
|
-
hostnameKind: e ===
|
|
67
|
+
hostnameKind: e === d.Cloudflare ? "auto" : "managed"
|
|
66
68
|
}));
|
|
67
|
-
}, []), Z =
|
|
69
|
+
}, []), Z = h(() => [...K?.tunnelProviders ?? []].sort((e, t) => {
|
|
68
70
|
let n = (e) => e === "VIBETUNNELS" ? 0 : e === "CLOUDFLARE" ? 1 : 2, r = n(e.key) - n(t.key);
|
|
69
71
|
return r === 0 ? e.key.localeCompare(t.key) : r;
|
|
70
|
-
}), [
|
|
71
|
-
if (!Q) return [
|
|
72
|
+
}), [K]), Q = h(() => Z.find((e) => e.key === P.providerKey), [Z, P.providerKey])?.capabilities, $ = P.providerKey === d.Cloudflare, de = h(() => {
|
|
73
|
+
if (!Q) return [u.Http];
|
|
72
74
|
let e = [];
|
|
73
|
-
return Q.supportsHttp && e.push(
|
|
74
|
-
}, [Q]),
|
|
75
|
-
|
|
76
|
-
|
|
75
|
+
return Q.supportsHttp && e.push(u.Http), Q.supportsHttps && e.push(u.Https), Q.supportsTcp && e.push(u.Tcp), e;
|
|
76
|
+
}, [Q]), fe = h(() => M === 0 ? !!(P.providerKey && P.agentId && P.name.trim()) : M === 1 ? P.localPort > 0 && P.localPort < 65536 : M === 2 ? P.hostnameKind === "managed" ? !!(P.subdomain && C.test(P.subdomain)) : P.hostnameKind === "custom" ? P.customDomain.trim().includes(".") : $ : !0, [
|
|
77
|
+
M,
|
|
78
|
+
P,
|
|
77
79
|
$
|
|
78
|
-
]),
|
|
79
|
-
|
|
80
|
+
]), pe = () => N((e) => Math.min(e + 1, T.length - 1)), me = () => N((e) => Math.max(e - 1, 0)), he = async () => {
|
|
81
|
+
L(null);
|
|
80
82
|
try {
|
|
81
|
-
let e = await
|
|
82
|
-
agentId:
|
|
83
|
-
name:
|
|
84
|
-
description:
|
|
85
|
-
providerKey:
|
|
86
|
-
protocol:
|
|
87
|
-
localHost:
|
|
88
|
-
localPort:
|
|
89
|
-
environment:
|
|
90
|
-
basicAuthUser:
|
|
91
|
-
basicAuthPassword:
|
|
92
|
-
managedSubdomain:
|
|
93
|
-
...
|
|
83
|
+
let e = await ue({ variables: { input: {
|
|
84
|
+
agentId: P.agentId,
|
|
85
|
+
name: P.name,
|
|
86
|
+
description: P.description || void 0,
|
|
87
|
+
providerKey: P.providerKey,
|
|
88
|
+
protocol: P.protocol,
|
|
89
|
+
localHost: P.localHost,
|
|
90
|
+
localPort: P.localPort,
|
|
91
|
+
environment: P.environment,
|
|
92
|
+
basicAuthUser: P.basicAuthUser || void 0,
|
|
93
|
+
basicAuthPassword: P.basicAuthPassword || void 0,
|
|
94
|
+
managedSubdomain: P.hostnameKind === "managed" ? P.subdomain : void 0,
|
|
95
|
+
...ae(H)
|
|
94
96
|
} } });
|
|
95
97
|
if (e.error) {
|
|
96
|
-
if (
|
|
97
|
-
|
|
98
|
+
if (a(e.error)) {
|
|
99
|
+
o(), V(!0), A.emitCustom("vibecontrols.quota.tunnel_limit_hit", { workspaceId: j ?? void 0 });
|
|
98
100
|
return;
|
|
99
101
|
}
|
|
100
|
-
|
|
102
|
+
L(e.error.message);
|
|
101
103
|
return;
|
|
102
104
|
}
|
|
103
105
|
let t = e.data?.createTunnel.id;
|
|
104
106
|
if (t) {
|
|
105
|
-
|
|
107
|
+
A.emitCustom("vibecontrols.tunnel.created", {
|
|
108
|
+
workspaceId: j ?? void 0,
|
|
109
|
+
tunnelId: t
|
|
110
|
+
}), z(!0);
|
|
106
111
|
try {
|
|
107
|
-
await
|
|
112
|
+
await G(t);
|
|
108
113
|
} finally {
|
|
109
|
-
|
|
114
|
+
z(!1);
|
|
110
115
|
}
|
|
111
|
-
|
|
116
|
+
k(`/vibecontrols/tunnels/${t}`);
|
|
112
117
|
}
|
|
113
118
|
} catch (e) {
|
|
114
|
-
if (
|
|
115
|
-
|
|
119
|
+
if (a(e)) {
|
|
120
|
+
L(null), o(), V(!0), A.emitCustom("vibecontrols.quota.tunnel_limit_hit", { workspaceId: j ?? void 0 });
|
|
116
121
|
return;
|
|
117
122
|
}
|
|
118
|
-
|
|
123
|
+
L(e instanceof Error ? e.message : String(e));
|
|
119
124
|
}
|
|
120
125
|
};
|
|
121
|
-
return
|
|
126
|
+
return ce ? /* @__PURE__ */ y(te, { message: "Loading providers" }) : q ? /* @__PURE__ */ y(ne, {
|
|
122
127
|
title: "Failed to load providers",
|
|
123
128
|
message: q.message,
|
|
124
129
|
onRetry: () => window.location.reload()
|
|
125
|
-
}) : /* @__PURE__ */
|
|
130
|
+
}) : /* @__PURE__ */ b("div", {
|
|
126
131
|
className: "p-6 max-w-3xl mx-auto",
|
|
127
132
|
children: [
|
|
128
|
-
/* @__PURE__ */
|
|
133
|
+
/* @__PURE__ */ y(c, {
|
|
129
134
|
breadcrumb: [{
|
|
130
135
|
label: "Tunnels",
|
|
131
136
|
path: "/vibecontrols/tunnels"
|
|
132
137
|
}, { label: "New tunnel" }],
|
|
133
|
-
title:
|
|
134
|
-
description:
|
|
138
|
+
title: E("vibecontrols.tunnels.createTitle", "Create tunnel"),
|
|
139
|
+
description: E("vibecontrols.tunnels.createDescription", "Expose a local service through a managed tunnel.")
|
|
135
140
|
}),
|
|
136
|
-
/* @__PURE__ */ x
|
|
141
|
+
/* @__PURE__ */ y(x, {
|
|
137
142
|
className: "mb-6",
|
|
138
|
-
active:
|
|
139
|
-
onStepClick: (e) => e <=
|
|
140
|
-
steps:
|
|
143
|
+
active: M,
|
|
144
|
+
onStepClick: (e) => e <= M && N(e),
|
|
145
|
+
steps: T.map((e) => ({
|
|
141
146
|
key: e.id,
|
|
142
147
|
label: e.label
|
|
143
148
|
}))
|
|
144
149
|
}),
|
|
145
|
-
/* @__PURE__ */
|
|
150
|
+
/* @__PURE__ */ y(se, {
|
|
146
151
|
mode: "wait",
|
|
147
|
-
children: /* @__PURE__ */
|
|
152
|
+
children: /* @__PURE__ */ b(_.div, {
|
|
148
153
|
initial: {
|
|
149
154
|
opacity: 0,
|
|
150
155
|
x: 6
|
|
@@ -160,109 +165,109 @@ function D() {
|
|
|
160
165
|
transition: { duration: .15 },
|
|
161
166
|
className: "rounded-lg border border-border-subtle bg-bg-surface p-6",
|
|
162
167
|
children: [
|
|
163
|
-
|
|
168
|
+
M === 0 && /* @__PURE__ */ b("div", {
|
|
164
169
|
className: "space-y-4",
|
|
165
170
|
children: [
|
|
166
|
-
/* @__PURE__ */
|
|
171
|
+
/* @__PURE__ */ y("h3", {
|
|
167
172
|
className: "text-sm font-semibold text-text-primary",
|
|
168
173
|
children: "Provider"
|
|
169
174
|
}),
|
|
170
|
-
/* @__PURE__ */
|
|
175
|
+
/* @__PURE__ */ y("div", {
|
|
171
176
|
className: "grid gap-3 sm:grid-cols-2",
|
|
172
|
-
children: Z.map((e) => /* @__PURE__ */
|
|
177
|
+
children: Z.map((e) => /* @__PURE__ */ b("button", {
|
|
173
178
|
type: "button",
|
|
174
|
-
onClick: () =>
|
|
175
|
-
className: `rounded-lg border p-4 text-left transition-colors ${
|
|
179
|
+
onClick: () => X(e.key),
|
|
180
|
+
className: `rounded-lg border p-4 text-left transition-colors ${P.providerKey === e.key ? "border-action-primary-bg bg-bg-sunken" : "border-border-subtle hover:border-border-default"}`,
|
|
176
181
|
children: [
|
|
177
|
-
/* @__PURE__ */
|
|
182
|
+
/* @__PURE__ */ y("div", {
|
|
178
183
|
className: "font-semibold text-text-primary",
|
|
179
184
|
children: e.displayName
|
|
180
185
|
}),
|
|
181
|
-
/* @__PURE__ */
|
|
186
|
+
/* @__PURE__ */ y("div", {
|
|
182
187
|
className: "text-xs text-text-muted mt-1",
|
|
183
188
|
children: e.key
|
|
184
189
|
}),
|
|
185
|
-
e.description && /* @__PURE__ */
|
|
190
|
+
e.description && /* @__PURE__ */ y("div", {
|
|
186
191
|
className: "text-xs text-text-secondary mt-2",
|
|
187
192
|
children: e.description
|
|
188
193
|
})
|
|
189
194
|
]
|
|
190
195
|
}, e.id))
|
|
191
196
|
}),
|
|
192
|
-
/* @__PURE__ */
|
|
197
|
+
/* @__PURE__ */ y(D, {
|
|
193
198
|
label: "Agent",
|
|
194
|
-
children: /* @__PURE__ */
|
|
195
|
-
value:
|
|
196
|
-
onChange: (e) =>
|
|
199
|
+
children: /* @__PURE__ */ b("select", {
|
|
200
|
+
value: P.agentId,
|
|
201
|
+
onChange: (e) => Y("agentId", e.target.value),
|
|
197
202
|
className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary",
|
|
198
|
-
children: [/* @__PURE__ */
|
|
203
|
+
children: [/* @__PURE__ */ y("option", {
|
|
199
204
|
value: "",
|
|
200
205
|
children: "Select agent"
|
|
201
|
-
}), (
|
|
206
|
+
}), (le?.vibecontrolsAgents ?? []).map((e) => /* @__PURE__ */ y("option", {
|
|
202
207
|
value: e.id,
|
|
203
208
|
children: e.name
|
|
204
209
|
}, e.id))]
|
|
205
210
|
})
|
|
206
211
|
}),
|
|
207
|
-
/* @__PURE__ */
|
|
212
|
+
/* @__PURE__ */ y(D, {
|
|
208
213
|
label: "Name",
|
|
209
|
-
children: /* @__PURE__ */
|
|
214
|
+
children: /* @__PURE__ */ y("input", {
|
|
210
215
|
"aria-label": "My dev tunnel",
|
|
211
216
|
type: "text",
|
|
212
|
-
value:
|
|
213
|
-
onChange: (e) =>
|
|
217
|
+
value: P.name,
|
|
218
|
+
onChange: (e) => Y("name", e.target.value),
|
|
214
219
|
placeholder: "My dev tunnel",
|
|
215
220
|
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"
|
|
216
221
|
})
|
|
217
222
|
}),
|
|
218
|
-
/* @__PURE__ */
|
|
223
|
+
/* @__PURE__ */ y(D, {
|
|
219
224
|
label: "Description (optional)",
|
|
220
|
-
children: /* @__PURE__ */
|
|
225
|
+
children: /* @__PURE__ */ y("input", {
|
|
221
226
|
"aria-label": "control",
|
|
222
227
|
type: "text",
|
|
223
|
-
value:
|
|
224
|
-
onChange: (e) =>
|
|
228
|
+
value: P.description,
|
|
229
|
+
onChange: (e) => Y("description", e.target.value),
|
|
225
230
|
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"
|
|
226
231
|
})
|
|
227
232
|
})
|
|
228
233
|
]
|
|
229
234
|
}),
|
|
230
|
-
|
|
235
|
+
M === 1 && /* @__PURE__ */ b("div", {
|
|
231
236
|
className: "space-y-4",
|
|
232
237
|
children: [
|
|
233
|
-
/* @__PURE__ */
|
|
238
|
+
/* @__PURE__ */ y("h3", {
|
|
234
239
|
className: "text-sm font-semibold text-text-primary",
|
|
235
240
|
children: "Protocol & target"
|
|
236
241
|
}),
|
|
237
|
-
/* @__PURE__ */
|
|
242
|
+
/* @__PURE__ */ y(D, {
|
|
238
243
|
label: "Protocol",
|
|
239
|
-
children: /* @__PURE__ */
|
|
244
|
+
children: /* @__PURE__ */ y("div", {
|
|
240
245
|
className: "flex gap-2",
|
|
241
|
-
children:
|
|
246
|
+
children: de.map((e) => /* @__PURE__ */ y("button", {
|
|
242
247
|
type: "button",
|
|
243
|
-
onClick: () =>
|
|
244
|
-
className: `rounded-md border px-4 py-2 text-sm ${
|
|
248
|
+
onClick: () => Y("protocol", e),
|
|
249
|
+
className: `rounded-md border px-4 py-2 text-sm ${P.protocol === e ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
|
|
245
250
|
children: e
|
|
246
251
|
}, e))
|
|
247
252
|
})
|
|
248
253
|
}),
|
|
249
|
-
/* @__PURE__ */
|
|
254
|
+
/* @__PURE__ */ y(D, {
|
|
250
255
|
label: "Local host",
|
|
251
|
-
children: /* @__PURE__ */
|
|
256
|
+
children: /* @__PURE__ */ y("input", {
|
|
252
257
|
"aria-label": "control",
|
|
253
258
|
type: "text",
|
|
254
|
-
value:
|
|
255
|
-
onChange: (e) =>
|
|
259
|
+
value: P.localHost,
|
|
260
|
+
onChange: (e) => Y("localHost", e.target.value),
|
|
256
261
|
className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
|
|
257
262
|
})
|
|
258
263
|
}),
|
|
259
|
-
/* @__PURE__ */
|
|
264
|
+
/* @__PURE__ */ y(D, {
|
|
260
265
|
label: "Local port",
|
|
261
|
-
children: /* @__PURE__ */
|
|
266
|
+
children: /* @__PURE__ */ y("input", {
|
|
262
267
|
"aria-label": "control",
|
|
263
268
|
type: "number",
|
|
264
|
-
value:
|
|
265
|
-
onChange: (e) =>
|
|
269
|
+
value: P.localPort,
|
|
270
|
+
onChange: (e) => Y("localPort", parseInt(e.target.value, 10) || 0),
|
|
266
271
|
min: 1,
|
|
267
272
|
max: 65535,
|
|
268
273
|
className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
|
|
@@ -270,278 +275,278 @@ function D() {
|
|
|
270
275
|
})
|
|
271
276
|
]
|
|
272
277
|
}),
|
|
273
|
-
|
|
278
|
+
M === 2 && /* @__PURE__ */ b("div", {
|
|
274
279
|
className: "space-y-4",
|
|
275
280
|
children: [
|
|
276
|
-
/* @__PURE__ */
|
|
281
|
+
/* @__PURE__ */ y("h3", {
|
|
277
282
|
className: "text-sm font-semibold text-text-primary",
|
|
278
283
|
children: "Hostname"
|
|
279
284
|
}),
|
|
280
|
-
/* @__PURE__ */
|
|
285
|
+
/* @__PURE__ */ b("div", {
|
|
281
286
|
className: "flex gap-2",
|
|
282
287
|
children: [
|
|
283
|
-
Q?.supportsManagedSubdomains && /* @__PURE__ */
|
|
284
|
-
active:
|
|
285
|
-
onClick: () =>
|
|
288
|
+
Q?.supportsManagedSubdomains && /* @__PURE__ */ y(O, {
|
|
289
|
+
active: P.hostnameKind === "managed",
|
|
290
|
+
onClick: () => Y("hostnameKind", "managed"),
|
|
286
291
|
label: "Managed subdomain",
|
|
287
292
|
hint: "*.vibetunnels.com"
|
|
288
293
|
}),
|
|
289
|
-
Q?.supportsCustomDomains && /* @__PURE__ */
|
|
290
|
-
active:
|
|
291
|
-
onClick: () =>
|
|
294
|
+
Q?.supportsCustomDomains && /* @__PURE__ */ y(O, {
|
|
295
|
+
active: P.hostnameKind === "custom",
|
|
296
|
+
onClick: () => Y("hostnameKind", "custom"),
|
|
292
297
|
label: "Custom domain",
|
|
293
298
|
hint: "TXT verification"
|
|
294
299
|
}),
|
|
295
|
-
$ && /* @__PURE__ */
|
|
296
|
-
active:
|
|
297
|
-
onClick: () =>
|
|
300
|
+
$ && /* @__PURE__ */ y(O, {
|
|
301
|
+
active: P.hostnameKind === "auto",
|
|
302
|
+
onClick: () => Y("hostnameKind", "auto"),
|
|
298
303
|
label: "Auto",
|
|
299
304
|
hint: "assigned by Cloudflare"
|
|
300
305
|
})
|
|
301
306
|
]
|
|
302
307
|
}),
|
|
303
|
-
|
|
304
|
-
/* @__PURE__ */
|
|
308
|
+
P.hostnameKind === "managed" && /* @__PURE__ */ b(v, { children: [
|
|
309
|
+
/* @__PURE__ */ y(D, {
|
|
305
310
|
label: "Environment",
|
|
306
|
-
children: /* @__PURE__ */
|
|
311
|
+
children: /* @__PURE__ */ b("div", {
|
|
307
312
|
className: "flex gap-2",
|
|
308
|
-
children: [/* @__PURE__ */
|
|
313
|
+
children: [/* @__PURE__ */ y("button", {
|
|
309
314
|
type: "button",
|
|
310
|
-
onClick: () =>
|
|
311
|
-
className: `rounded-md border px-4 py-2 text-sm ${
|
|
315
|
+
onClick: () => Y("environment", l.Prod),
|
|
316
|
+
className: `rounded-md border px-4 py-2 text-sm ${P.environment === l.Prod ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
|
|
312
317
|
children: "Prod (vibetunnels.com)"
|
|
313
|
-
}), /* @__PURE__ */
|
|
318
|
+
}), /* @__PURE__ */ y("button", {
|
|
314
319
|
type: "button",
|
|
315
|
-
onClick: () =>
|
|
316
|
-
className: `rounded-md border px-4 py-2 text-sm ${
|
|
320
|
+
onClick: () => Y("environment", l.Alpha),
|
|
321
|
+
className: `rounded-md border px-4 py-2 text-sm ${P.environment === l.Alpha ? "border-action-primary-bg bg-bg-sunken text-text-primary" : "border-border-subtle text-text-secondary hover:border-border-default"}`,
|
|
317
322
|
children: "Alpha"
|
|
318
323
|
})]
|
|
319
324
|
})
|
|
320
325
|
}),
|
|
321
|
-
/* @__PURE__ */
|
|
326
|
+
/* @__PURE__ */ y(D, {
|
|
322
327
|
label: "Subdomain label",
|
|
323
|
-
children: /* @__PURE__ */
|
|
328
|
+
children: /* @__PURE__ */ y("input", {
|
|
324
329
|
"aria-label": "demo",
|
|
325
330
|
type: "text",
|
|
326
|
-
value:
|
|
327
|
-
onChange: (e) =>
|
|
331
|
+
value: P.subdomain,
|
|
332
|
+
onChange: (e) => Y("subdomain", e.target.value.toLowerCase()),
|
|
328
333
|
placeholder: "demo",
|
|
329
334
|
className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
|
|
330
335
|
})
|
|
331
336
|
}),
|
|
332
|
-
|
|
337
|
+
P.subdomain && /* @__PURE__ */ b("p", {
|
|
333
338
|
className: "text-xs text-text-secondary",
|
|
334
339
|
children: [
|
|
335
340
|
"Will be reserved as",
|
|
336
341
|
" ",
|
|
337
|
-
/* @__PURE__ */
|
|
342
|
+
/* @__PURE__ */ b("span", {
|
|
338
343
|
className: "font-mono text-text-primary",
|
|
339
|
-
children: [
|
|
344
|
+
children: [P.subdomain, P.environment === l.Alpha ? ".alpha.vibetunnels.com" : ".vibetunnels.com"]
|
|
340
345
|
})
|
|
341
346
|
]
|
|
342
347
|
})
|
|
343
348
|
] }),
|
|
344
|
-
|
|
349
|
+
P.hostnameKind === "custom" && /* @__PURE__ */ b(D, {
|
|
345
350
|
label: "Custom domain",
|
|
346
|
-
children: [/* @__PURE__ */
|
|
351
|
+
children: [/* @__PURE__ */ y("input", {
|
|
347
352
|
"aria-label": "preview.example.com",
|
|
348
353
|
type: "text",
|
|
349
|
-
value:
|
|
350
|
-
onChange: (e) =>
|
|
354
|
+
value: P.customDomain,
|
|
355
|
+
onChange: (e) => Y("customDomain", e.target.value.toLowerCase()),
|
|
351
356
|
placeholder: "preview.example.com",
|
|
352
357
|
className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
|
|
353
|
-
}), /* @__PURE__ */
|
|
358
|
+
}), /* @__PURE__ */ y("p", {
|
|
354
359
|
className: "text-xs text-text-muted mt-2",
|
|
355
360
|
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."
|
|
356
361
|
})]
|
|
357
362
|
})
|
|
358
363
|
]
|
|
359
364
|
}),
|
|
360
|
-
|
|
365
|
+
M === 3 && /* @__PURE__ */ b("div", {
|
|
361
366
|
className: "space-y-4",
|
|
362
367
|
children: [
|
|
363
|
-
/* @__PURE__ */
|
|
368
|
+
/* @__PURE__ */ y("h3", {
|
|
364
369
|
className: "text-sm font-semibold text-text-primary",
|
|
365
370
|
children: "Policies (optional)"
|
|
366
371
|
}),
|
|
367
|
-
/* @__PURE__ */
|
|
372
|
+
/* @__PURE__ */ y(D, {
|
|
368
373
|
label: "Basic auth user",
|
|
369
|
-
children: /* @__PURE__ */
|
|
374
|
+
children: /* @__PURE__ */ y("input", {
|
|
370
375
|
"aria-label": "control",
|
|
371
376
|
type: "text",
|
|
372
|
-
value:
|
|
373
|
-
onChange: (e) =>
|
|
377
|
+
value: P.basicAuthUser,
|
|
378
|
+
onChange: (e) => Y("basicAuthUser", e.target.value),
|
|
374
379
|
className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
|
|
375
380
|
})
|
|
376
381
|
}),
|
|
377
|
-
/* @__PURE__ */
|
|
382
|
+
/* @__PURE__ */ y(D, {
|
|
378
383
|
label: "Basic auth password",
|
|
379
|
-
children: /* @__PURE__ */
|
|
384
|
+
children: /* @__PURE__ */ y("input", {
|
|
380
385
|
"aria-label": "control",
|
|
381
386
|
type: "password",
|
|
382
|
-
value:
|
|
383
|
-
onChange: (e) =>
|
|
387
|
+
value: P.basicAuthPassword,
|
|
388
|
+
onChange: (e) => Y("basicAuthPassword", e.target.value),
|
|
384
389
|
className: "w-full rounded-md border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary"
|
|
385
390
|
})
|
|
386
391
|
}),
|
|
387
|
-
/* @__PURE__ */
|
|
388
|
-
value:
|
|
389
|
-
onChange:
|
|
390
|
-
disabled:
|
|
392
|
+
/* @__PURE__ */ y(ie, {
|
|
393
|
+
value: H,
|
|
394
|
+
onChange: U,
|
|
395
|
+
disabled: J
|
|
391
396
|
})
|
|
392
397
|
]
|
|
393
398
|
}),
|
|
394
|
-
|
|
399
|
+
M === 4 && /* @__PURE__ */ b("div", {
|
|
395
400
|
className: "space-y-3",
|
|
396
401
|
children: [
|
|
397
|
-
/* @__PURE__ */
|
|
402
|
+
/* @__PURE__ */ y("h3", {
|
|
398
403
|
className: "text-sm font-semibold text-text-primary",
|
|
399
|
-
children:
|
|
404
|
+
children: E("vibecontrols.tunnels.review", "Review")
|
|
400
405
|
}),
|
|
401
|
-
/* @__PURE__ */
|
|
406
|
+
/* @__PURE__ */ b("dl", {
|
|
402
407
|
className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-2 text-sm",
|
|
403
408
|
children: [
|
|
404
|
-
/* @__PURE__ */
|
|
409
|
+
/* @__PURE__ */ y("dt", {
|
|
405
410
|
className: "text-text-muted",
|
|
406
411
|
children: "Provider"
|
|
407
412
|
}),
|
|
408
|
-
/* @__PURE__ */
|
|
413
|
+
/* @__PURE__ */ y("dd", {
|
|
409
414
|
className: "text-text-primary",
|
|
410
|
-
children:
|
|
415
|
+
children: P.providerKey
|
|
411
416
|
}),
|
|
412
|
-
/* @__PURE__ */
|
|
417
|
+
/* @__PURE__ */ y("dt", {
|
|
413
418
|
className: "text-text-muted",
|
|
414
419
|
children: "Name"
|
|
415
420
|
}),
|
|
416
|
-
/* @__PURE__ */
|
|
421
|
+
/* @__PURE__ */ y("dd", {
|
|
417
422
|
className: "text-text-primary",
|
|
418
|
-
children:
|
|
423
|
+
children: P.name
|
|
419
424
|
}),
|
|
420
|
-
/* @__PURE__ */
|
|
425
|
+
/* @__PURE__ */ y("dt", {
|
|
421
426
|
className: "text-text-muted",
|
|
422
427
|
children: "Agent"
|
|
423
428
|
}),
|
|
424
|
-
/* @__PURE__ */
|
|
429
|
+
/* @__PURE__ */ y("dd", {
|
|
425
430
|
className: "text-text-primary font-mono",
|
|
426
|
-
children:
|
|
431
|
+
children: P.agentId
|
|
427
432
|
}),
|
|
428
|
-
/* @__PURE__ */
|
|
433
|
+
/* @__PURE__ */ y("dt", {
|
|
429
434
|
className: "text-text-muted",
|
|
430
435
|
children: "Protocol"
|
|
431
436
|
}),
|
|
432
|
-
/* @__PURE__ */
|
|
437
|
+
/* @__PURE__ */ y("dd", {
|
|
433
438
|
className: "text-text-primary",
|
|
434
|
-
children:
|
|
439
|
+
children: P.protocol
|
|
435
440
|
}),
|
|
436
|
-
/* @__PURE__ */
|
|
441
|
+
/* @__PURE__ */ y("dt", {
|
|
437
442
|
className: "text-text-muted",
|
|
438
443
|
children: "Target"
|
|
439
444
|
}),
|
|
440
|
-
/* @__PURE__ */
|
|
445
|
+
/* @__PURE__ */ b("dd", {
|
|
441
446
|
className: "text-text-primary font-mono",
|
|
442
447
|
children: [
|
|
443
|
-
|
|
448
|
+
P.localHost,
|
|
444
449
|
":",
|
|
445
|
-
|
|
450
|
+
P.localPort
|
|
446
451
|
]
|
|
447
452
|
}),
|
|
448
|
-
/* @__PURE__ */
|
|
453
|
+
/* @__PURE__ */ y("dt", {
|
|
449
454
|
className: "text-text-muted",
|
|
450
455
|
children: "Hostname"
|
|
451
456
|
}),
|
|
452
|
-
/* @__PURE__ */
|
|
457
|
+
/* @__PURE__ */ y("dd", {
|
|
453
458
|
className: "text-text-primary",
|
|
454
|
-
children:
|
|
459
|
+
children: P.hostnameKind === "managed" ? `${P.subdomain}.${P.environment === "ALPHA" ? "alpha." : ""}vibetunnels.com` : P.hostnameKind === "custom" ? P.customDomain : "auto-assigned"
|
|
455
460
|
}),
|
|
456
|
-
/* @__PURE__ */
|
|
461
|
+
/* @__PURE__ */ y("dt", {
|
|
457
462
|
className: "text-text-muted",
|
|
458
463
|
children: "Basic auth"
|
|
459
464
|
}),
|
|
460
|
-
/* @__PURE__ */
|
|
465
|
+
/* @__PURE__ */ y("dd", {
|
|
461
466
|
className: "text-text-primary",
|
|
462
|
-
children:
|
|
467
|
+
children: P.basicAuthUser ? "yes" : "no"
|
|
463
468
|
})
|
|
464
469
|
]
|
|
465
470
|
}),
|
|
466
|
-
/* @__PURE__ */
|
|
471
|
+
/* @__PURE__ */ b("div", {
|
|
467
472
|
className: "border-t border-border-subtle pt-3",
|
|
468
|
-
children: [/* @__PURE__ */
|
|
473
|
+
children: [/* @__PURE__ */ y("h4", {
|
|
469
474
|
className: "mb-2 text-sm font-medium text-text-secondary",
|
|
470
|
-
children:
|
|
471
|
-
}), /* @__PURE__ */
|
|
475
|
+
children: E("vibecontrols.tunnels.tags", "Tags")
|
|
476
|
+
}), /* @__PURE__ */ y(f, {
|
|
472
477
|
entityType: "VIBECONTROLS_TUNNEL",
|
|
473
|
-
onDraftChange:
|
|
478
|
+
onDraftChange: W
|
|
474
479
|
})]
|
|
475
480
|
}),
|
|
476
|
-
|
|
481
|
+
I && /* @__PURE__ */ y("div", {
|
|
477
482
|
className: "rounded-md bg-status-error-bg p-3 text-sm text-status-error-fg",
|
|
478
|
-
children:
|
|
483
|
+
children: I
|
|
479
484
|
})
|
|
480
485
|
]
|
|
481
486
|
})
|
|
482
487
|
]
|
|
483
|
-
},
|
|
488
|
+
}, M)
|
|
484
489
|
}),
|
|
485
|
-
/* @__PURE__ */
|
|
490
|
+
/* @__PURE__ */ b("div", {
|
|
486
491
|
className: "flex items-center justify-between mt-4",
|
|
487
|
-
children: [/* @__PURE__ */
|
|
492
|
+
children: [/* @__PURE__ */ y("button", {
|
|
488
493
|
type: "button",
|
|
489
|
-
disabled:
|
|
490
|
-
onClick:
|
|
494
|
+
disabled: M === 0,
|
|
495
|
+
onClick: me,
|
|
491
496
|
className: "rounded-md border border-border-default px-4 py-2 text-sm text-text-primary hover:bg-bg-elevated disabled:opacity-50",
|
|
492
|
-
children:
|
|
493
|
-
}),
|
|
497
|
+
children: E("vibecontrols.tunnels.back", "Back")
|
|
498
|
+
}), M < T.length - 1 ? /* @__PURE__ */ y("button", {
|
|
494
499
|
type: "button",
|
|
495
|
-
disabled: !
|
|
496
|
-
onClick:
|
|
500
|
+
disabled: !fe,
|
|
501
|
+
onClick: pe,
|
|
497
502
|
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",
|
|
498
|
-
children:
|
|
499
|
-
}) : /* @__PURE__ */
|
|
503
|
+
children: E("vibecontrols.tunnels.next", "Next")
|
|
504
|
+
}) : /* @__PURE__ */ y("button", {
|
|
500
505
|
type: "button",
|
|
501
|
-
disabled:
|
|
502
|
-
onClick: () => void
|
|
506
|
+
disabled: J || R,
|
|
507
|
+
onClick: () => void he(),
|
|
503
508
|
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",
|
|
504
|
-
children:
|
|
509
|
+
children: J ? E("vibecontrols.tunnels.creating", "Creating...") : E("vibecontrols.tunnels.createTunnel", "Create tunnel")
|
|
505
510
|
})]
|
|
506
511
|
}),
|
|
507
|
-
/* @__PURE__ */
|
|
508
|
-
isOpen:
|
|
509
|
-
onClose: () =>
|
|
512
|
+
/* @__PURE__ */ y(ee, {
|
|
513
|
+
isOpen: B,
|
|
514
|
+
onClose: () => V(!1),
|
|
510
515
|
onConfirm: () => {
|
|
511
|
-
|
|
516
|
+
V(!1), k("/billing/plans");
|
|
512
517
|
},
|
|
513
|
-
...
|
|
518
|
+
...i("tunnel-subdomain")
|
|
514
519
|
})
|
|
515
520
|
]
|
|
516
521
|
});
|
|
517
522
|
}
|
|
518
|
-
function
|
|
519
|
-
return /* @__PURE__ */
|
|
523
|
+
function D({ label: e, children: t }) {
|
|
524
|
+
return /* @__PURE__ */ b("label", {
|
|
520
525
|
className: "block",
|
|
521
|
-
children: [/* @__PURE__ */
|
|
526
|
+
children: [/* @__PURE__ */ y("span", {
|
|
522
527
|
className: "text-xs font-medium text-text-secondary",
|
|
523
528
|
children: e
|
|
524
|
-
}), /* @__PURE__ */
|
|
529
|
+
}), /* @__PURE__ */ y("div", {
|
|
525
530
|
className: "mt-1",
|
|
526
531
|
children: t
|
|
527
532
|
})]
|
|
528
533
|
});
|
|
529
534
|
}
|
|
530
|
-
function
|
|
531
|
-
return /* @__PURE__ */
|
|
535
|
+
function O({ active: e, onClick: t, label: n, hint: r }) {
|
|
536
|
+
return /* @__PURE__ */ b("button", {
|
|
532
537
|
type: "button",
|
|
533
538
|
onClick: t,
|
|
534
539
|
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"}`,
|
|
535
|
-
children: [/* @__PURE__ */
|
|
540
|
+
children: [/* @__PURE__ */ y("div", {
|
|
536
541
|
className: "text-sm font-medium text-text-primary",
|
|
537
542
|
children: n
|
|
538
|
-
}), /* @__PURE__ */
|
|
543
|
+
}), /* @__PURE__ */ y("div", {
|
|
539
544
|
className: "text-xs text-text-muted mt-0.5",
|
|
540
545
|
children: r
|
|
541
546
|
})]
|
|
542
547
|
});
|
|
543
548
|
}
|
|
544
549
|
//#endregion
|
|
545
|
-
export {
|
|
550
|
+
export { E as TunnelCreateWizard };
|
|
546
551
|
|
|
547
552
|
//# sourceMappingURL=TunnelCreateWizard.js.map
|