hypervibes 0.0.0-stage → 0.4.0

package/.build/server/assets/_authenticated.providers-C0pb-ujV.js

@@ -0,0 +1,672 @@
+import { a as providerSettingsQueryOptions, i as providerMutationOptions, o as setupQueryOptions, t as invalidateProviderQueries } from "./provider-queries-BaZWLw8J.js";
+import { t as SetupChecklist } from "./setup-checklist-BICTmBo2.js";
+import { t as ProviderLogo } from "./provider-logo-BRdbOr9I.js";
+import { a as modelKey, i as costCurrency, r as choiceContextTokens } from "./model-picker-CA1uYb--.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { toast } from "sonner";
+//#region src/components/providers-page.tsx
+var button = "cursor-pointer rounded-lg border border-zinc-700 px-3 py-2 text-sm hover:bg-zinc-800 disabled:cursor-not-allowed disabled:opacity-50";
+var primaryButton = "cursor-pointer rounded-lg bg-violet-600 px-3 py-2 text-sm text-white hover:bg-violet-500 disabled:cursor-not-allowed disabled:opacity-50";
+var dangerButton = "cursor-pointer rounded-lg border border-red-800 px-3 py-2 text-sm text-red-300 hover:bg-red-950 hover:text-red-200 disabled:cursor-not-allowed disabled:opacity-50";
+var input = "w-full rounded-lg border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm text-white";
+/** Connect buttons sit inside the provider's own row, so a bare auth-type label
+* reads better than repeating the provider name ("Anthropic API key"). */
+function connectLabel(method) {
+	return method.type === "oauth" ? "OAuth" : "API key";
+}
+function ProvidersPage() {
+	const client = useQueryClient();
+	const signInTab = useRef(void 0);
+	function closeSignInTab() {
+		signInTab.current?.tab.close();
+		signInTab.current = void 0;
+	}
+	const { data: settings, error: refreshError } = useSuspenseQuery(providerSettingsQueryOptions());
+	const { data: setup } = useSuspenseQuery(setupQueryOptions());
+	const { agentCount } = setup;
+	const mutation = useMutation({
+		...providerMutationOptions(client),
+		onError: (_error, operation) => {
+			if (operation.type === "answer") closeSignInTab();
+		},
+		onSuccess: (login, operation) => {
+			if (operation.type === "begin" && login) if (login.state === "complete") toast.success("Provider connected.");
+			else setLogin(login);
+			else if (operation.type === "cancel") setLogin(void 0);
+			else if (operation.type === "answer") setValue("");
+		}
+	});
+	const [login, setLogin] = useState(settings.activeLogin);
+	const [disconnecting, setDisconnecting] = useState();
+	const [value, setValue] = useState("");
+	const [search, setSearch] = useState("");
+	const [expanded, setExpanded] = useState();
+	const [streamError, setStreamError] = useState("");
+	const pending = mutation.isPending;
+	const error = streamError || mutation.error?.message || refreshError?.message;
+	const active = login?.state === "pending";
+	useEffect(() => () => closeSignInTab(), []);
+	useEffect(() => {
+		const waiting = signInTab.current;
+		if (!waiting) return;
+		if (!login || login.id !== waiting.loginId || login.state !== "pending") {
+			closeSignInTab();
+			return;
+		}
+		const event = login.events.slice(waiting.eventCount).find((event) => event.type === "auth_url");
+		if (event?.type !== "auth_url") return;
+		try {
+			const url = new URL(event.url);
+			if (url.protocol !== "https:" && url.protocol !== "http:") {
+				closeSignInTab();
+				return;
+			}
+			if (!waiting.tab.closed) waiting.tab.location.replace(url.href);
+			signInTab.current = void 0;
+		} catch {
+			closeSignInTab();
+		}
+	}, [login]);
+	useEffect(() => {
+		setValue("");
+	}, [login?.prompt?.id]);
+	useEffect(() => {
+		if (!login || login.state !== "pending") return;
+		let disposed = false;
+		const source = new EventSource(`/api/providers/logins/${encodeURIComponent(login.id)}/events`);
+		source.addEventListener("provider-login", (event) => {
+			if (disposed) return;
+			const snapshot = JSON.parse(event.data);
+			setStreamError("");
+			if (snapshot.state === "pending") {
+				setLogin(snapshot);
+				return;
+			}
+			source.close();
+			setLogin(snapshot.state === "failed" ? snapshot : void 0);
+			if (snapshot.state === "complete") toast.success("Provider connected.");
+			invalidateProviderQueries(client);
+		});
+		source.onerror = () => {
+			if (disposed) return;
+			if (source.readyState === EventSource.CLOSED) {
+				setLogin(void 0);
+				setStreamError("Sign-in status unavailable. Reload the page to reconnect.");
+			} else setStreamError("Sign-in status unavailable. Reconnecting…");
+		};
+		source.addEventListener("stream-error", () => {
+			source.close();
+			if (!disposed) {
+				setLogin(void 0);
+				setStreamError("Sign-in status unavailable. Reload the page.");
+			}
+		});
+		source.addEventListener("unauthorized", () => {
+			source.close();
+			if (!disposed) {
+				setLogin(void 0);
+				setStreamError("Session ended. Please sign in again.");
+			}
+		});
+		return () => {
+			disposed = true;
+			source.close();
+		};
+	}, [
+		client,
+		login?.id,
+		login?.state
+	]);
+	function begin(providerId, type) {
+		setStreamError("");
+		mutation.mutate({
+			type: "begin",
+			providerId,
+			authType: type
+		});
+	}
+	function submitAnswer(answer) {
+		const prompt = login?.prompt;
+		if (!login || !prompt) return;
+		if (pending) return;
+		if (answer === "browser" && prompt.input.type === "select" && prompt.input.options.some((option) => option.id === "browser")) {
+			closeSignInTab();
+			try {
+				const tab = window.open("about:blank", "_blank");
+				if (tab) {
+					tab.opener = null;
+					signInTab.current = {
+						tab,
+						loginId: login.id,
+						eventCount: login.events.length
+					};
+				}
+			} catch {
+				closeSignInTab();
+			}
+		}
+		mutation.mutate({
+			type: "answer",
+			id: login.id,
+			promptId: prompt.id,
+			value: answer
+		});
+	}
+	function cancelLogin() {
+		closeSignInTab();
+		if (!login) return;
+		if (login.state !== "pending") {
+			setLogin(void 0);
+			return;
+		}
+		mutation.mutate({
+			type: "cancel",
+			id: login.id
+		});
+	}
+	function disconnect(provider) {
+		mutation.mutate({
+			type: "disconnect",
+			providerId: provider.id
+		});
+	}
+	const connected = settings.providers.filter((provider) => provider.connected);
+	const renderProvider = (provider) => {
+		const models = settings.models.filter((model) => model.provider === provider.id);
+		const open = expanded === provider.id && models.length > 0;
+		return /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center justify-between gap-4 p-4",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-3",
+				children: [/* @__PURE__ */ jsx(ProviderLogo, {
+					provider: provider.id,
+					className: "h-8 w-8 shrink-0 rounded-lg border border-zinc-800 bg-white p-1"
+				}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
+					className: "font-medium text-white",
+					children: provider.name
+				}), /* @__PURE__ */ jsxs("p", {
+					className: "mt-1 text-xs text-zinc-400",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: provider.connected ? provider.configured ? "text-emerald-400" : "text-amber-300" : void 0,
+							children: provider.connected ? provider.configured ? `Configured · ${provider.authType === "oauth" ? "OAuth" : "API key"}` : "Connection needs attention" : "Not connected"
+						}),
+						" · ",
+						models.length > 0 ? /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: "cursor-pointer underline decoration-zinc-600 hover:text-white",
+							"aria-expanded": open,
+							onClick: () => setExpanded(open ? void 0 : provider.id),
+							children: [models.length, " chat models"]
+						}) : `${models.length} chat models`
+					]
+				})] })]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap gap-2",
+				children: [
+					provider.methods.map((method) => /* @__PURE__ */ jsx("button", {
+						className: button,
+						disabled: pending || active || !settings.storageReady,
+						onClick: () => begin(provider.id, method.type),
+						children: provider.connected ? "Re-connect" : connectLabel(method)
+					}, method.type)),
+					!provider.methods.length && /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-zinc-500",
+						children: "Ambient-only authentication is not available in per-user setup."
+					}),
+					provider.connected && /* @__PURE__ */ jsx("button", {
+						className: dangerButton,
+						disabled: pending || active,
+						onClick: () => setDisconnecting(provider),
+						children: "Disconnect"
+					})
+				]
+			})]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "max-h-60 overflow-y-auto border-t border-zinc-800 px-4 py-3",
+			children: /* @__PURE__ */ jsxs("table", {
+				className: "w-full text-xs",
+				children: [
+					/* @__PURE__ */ jsxs("caption", {
+						className: "sr-only",
+						children: [provider.name, " chat models"]
+					}),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
+						className: "text-left text-zinc-500",
+						children: [
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "py-1 pr-4 font-medium",
+								children: "Model"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "py-1 pr-4 font-medium",
+								children: "ID"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "py-1 pr-4 font-medium",
+								children: "Context"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "py-1 pr-4 font-medium",
+								children: "Reasoning"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "py-1 pr-4 text-right font-medium",
+								children: "Input / 1M"
+							}),
+							/* @__PURE__ */ jsx("th", {
+								scope: "col",
+								className: "py-1 text-right font-medium",
+								children: "Output / 1M"
+							})
+						]
+					}) }),
+					/* @__PURE__ */ jsx("tbody", { children: models.map((model) => /* @__PURE__ */ jsxs("tr", {
+						className: "border-t border-zinc-800/60",
+						children: [
+							/* @__PURE__ */ jsx("td", {
+								className: "max-w-48 truncate py-1.5 pr-4 text-zinc-200",
+								children: model.name
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "max-w-48 truncate py-1.5 pr-4 text-zinc-500",
+								children: model.modelId
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "whitespace-nowrap py-1.5 pr-4 text-zinc-400",
+								children: choiceContextTokens(model)
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "whitespace-nowrap py-1.5 pr-4 text-zinc-400",
+								children: model.reasoning ? "Yes" : "—"
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "whitespace-nowrap py-1.5 pr-4 text-right font-mono text-zinc-400",
+								children: costCurrency(model.inputCost)
+							}),
+							/* @__PURE__ */ jsx("td", {
+								className: "whitespace-nowrap py-1.5 text-right font-mono text-zinc-400",
+								children: costCurrency(model.outputCost)
+							})
+						]
+					}, modelKey(model))) })
+				]
+			})
+		})] }, provider.id);
+	};
+	const loginOpen = login !== void 0 && (login.state === "pending" || login.state === "failed");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex h-[calc(100dvh-6.5rem)] max-w-4xl flex-col gap-6 overflow-hidden",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "shrink-0",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-3xl font-semibold text-white",
+					children: "Providers"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-sm text-zinc-400",
+					children: "Connect your AI accounts."
+				})]
+			}),
+			!settings.storageReady && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "shrink-0 text-sm text-amber-200",
+				children: "Provider setup requires AGENTS_ENCRYPTION_KEY on the server."
+			}),
+			/* @__PURE__ */ jsx(SetupChecklist, {
+				state: {
+					...setup,
+					providerConnected: connected.length > 0
+				},
+				agentCount
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "shrink-0 text-sm text-red-300",
+				children: error
+			}),
+			connected.length > 0 && /* @__PURE__ */ jsxs("section", {
+				"aria-labelledby": "connected-providers-heading",
+				className: "shrink-0 space-y-3",
+				children: [/* @__PURE__ */ jsx("h2", {
+					id: "connected-providers-heading",
+					className: "text-lg font-semibold text-white",
+					children: "Connected Providers"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "divide-y divide-zinc-800 rounded-xl border border-zinc-800",
+					children: connected.map(renderProvider)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("section", {
+				"aria-labelledby": "all-providers-heading",
+				className: "flex min-h-0 flex-1 flex-col gap-3",
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						id: "all-providers-heading",
+						className: "shrink-0 text-lg font-semibold text-white",
+						children: "All Providers"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 flex-wrap gap-3",
+						children: [/* @__PURE__ */ jsx("input", {
+							autoFocus: true,
+							"aria-label": "Search providers",
+							placeholder: "Search providers…",
+							className: `${input} flex-1`,
+							value: search,
+							onChange: (event) => setSearch(event.target.value)
+						}), /* @__PURE__ */ jsx("button", {
+							className: button,
+							disabled: pending || active,
+							onClick: () => mutation.mutate({ type: "refresh" }),
+							children: "Refresh models"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "min-h-0 flex-1 divide-y divide-zinc-800 overflow-y-auto rounded-xl border border-zinc-800",
+						children: settings.providers.filter((provider) => !provider.connected && `${provider.name} ${provider.id}`.toLowerCase().includes(search.toLowerCase())).map(renderProvider)
+					})
+				]
+			}),
+			loginOpen && login && /* @__PURE__ */ jsx(ProviderLoginDialog, {
+				login,
+				providerName: settings.providers.find((provider) => provider.id === login.providerId)?.name ?? login.providerId,
+				value,
+				onValueChange: setValue,
+				pending,
+				onSubmit: submitAnswer,
+				onCancel: cancelLogin
+			}),
+			disconnecting && /* @__PURE__ */ jsx(DisconnectProviderDialog, {
+				provider: disconnecting,
+				onCancel: () => setDisconnecting(void 0),
+				onConfirm: () => {
+					const provider = disconnecting;
+					setDisconnecting(void 0);
+					disconnect(provider);
+				}
+			})
+		]
+	});
+}
+function ProviderLoginDialog({ login, providerName, value, onValueChange, pending, onSubmit, onCancel }) {
+	const ref = useRef(null);
+	const titleId = useId();
+	const formId = useId();
+	useEffect(() => {
+		const element = ref.current;
+		element.showModal();
+		return () => element.close();
+	}, []);
+	const prompt = login.prompt;
+	const loginMethods = prompt?.input.type === "select" && prompt.input.options.length === 2 && prompt.input.options.some((option) => option.id === "browser") && prompt.input.options.some((option) => option.id === "device_code") ? [...prompt.input.options].sort((a) => a.id === "browser" ? -1 : 1) : void 0;
+	return /* @__PURE__ */ jsxs("dialog", {
+		ref,
+		"aria-labelledby": titleId,
+		onCancel: (event) => {
+			event.preventDefault();
+			if (!pending) onCancel();
+		},
+		className: "m-auto max-h-[calc(100dvh-2rem)] w-[calc(100%_-_2rem)] max-w-md overflow-y-auto rounded-2xl border border-zinc-800 bg-[#0d0d10] p-6 text-zinc-100 shadow-2xl backdrop:bg-black/70 backdrop:backdrop-blur-sm",
+		children: [
+			/* @__PURE__ */ jsxs("h3", {
+				id: titleId,
+				className: "text-lg font-semibold text-white",
+				children: [providerName, " sign-in"]
+			}),
+			login.events.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "mt-4 space-y-3",
+				children: login.events.map((event, index) => /* @__PURE__ */ jsx(LoginEvent, { event }, index))
+			}),
+			login.state === "failed" && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "mt-4 text-sm text-red-300",
+				children: login.error ?? "Sign-in failed."
+			}),
+			login.state === "pending" && prompt && /* @__PURE__ */ jsx("form", {
+				id: formId,
+				className: "mt-4 space-y-3",
+				onSubmit: (event) => {
+					event.preventDefault();
+					onSubmit(value);
+				},
+				children: loginMethods ? /* @__PURE__ */ jsxs("fieldset", {
+					disabled: pending,
+					children: [/* @__PURE__ */ jsx("legend", {
+						className: "text-sm",
+						children: prompt.input.message
+					}), /* @__PURE__ */ jsx("div", {
+						className: "mt-3 grid grid-cols-2 gap-3",
+						children: loginMethods.map((option) => /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-label": option.label,
+							title: option.description ? `${option.label} — ${option.description}` : option.label,
+							className: `${button} flex flex-col items-center justify-center gap-2 py-5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-violet-400`,
+							onClick: () => onSubmit(option.id),
+							children: [/* @__PURE__ */ jsx("svg", {
+								"aria-hidden": "true",
+								className: "h-7 w-7",
+								viewBox: "0 0 24 24",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.5",
+								strokeLinecap: "round",
+								strokeLinejoin: "round",
+								children: option.id === "browser" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("rect", {
+									x: "3",
+									y: "4",
+									width: "18",
+									height: "16",
+									rx: "2"
+								}), /* @__PURE__ */ jsx("path", { d: "M3 9h18M7 6.5h.01M10 6.5h.01" })] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("rect", {
+									x: "3",
+									y: "4",
+									width: "18",
+									height: "16",
+									rx: "2"
+								}), /* @__PURE__ */ jsx("path", { d: "m7 9 3 3-3 3m6 0h4" })] })
+							}), /* @__PURE__ */ jsx("span", { children: option.id === "browser" ? "Browser (default)" : "Device code" })]
+						}, option.id))
+					})]
+				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: "provider-answer",
+					className: "block text-sm",
+					children: prompt.input.message
+				}), prompt.input.type === "select" ? /* @__PURE__ */ jsxs("select", {
+					id: "provider-answer",
+					className: input,
+					value,
+					onChange: (event) => onValueChange(event.target.value),
+					required: true,
+					children: [/* @__PURE__ */ jsx("option", {
+						value: "",
+						children: "Choose…"
+					}), prompt.input.options.map((option) => /* @__PURE__ */ jsxs("option", {
+						value: option.id,
+						children: [option.label, option.description ? ` — ${option.description}` : ""]
+					}, option.id))]
+				}) : /* @__PURE__ */ jsx("input", {
+					id: "provider-answer",
+					className: input,
+					autoComplete: "off",
+					type: prompt.input.type === "secret" ? "password" : "text",
+					value,
+					maxLength: 16e3,
+					placeholder: "placeholder" in prompt.input ? prompt.input.placeholder : void 0,
+					onChange: (event) => onValueChange(event.target.value),
+					required: prompt.input.type !== "text"
+				})] })
+			}, prompt.id),
+			login.state === "pending" && !prompt && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "mt-4 text-sm text-zinc-400",
+				children: "Waiting for provider…"
+			}),
+			login.state === "failed" ? /* @__PURE__ */ jsx("div", {
+				className: "mt-6 flex items-center justify-end gap-3",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: button,
+					onClick: onCancel,
+					children: "Close"
+				})
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "mt-6 flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: button,
+					disabled: pending,
+					onClick: onCancel,
+					children: "Cancel sign-in"
+				}), prompt && !loginMethods && /* @__PURE__ */ jsx("button", {
+					type: "submit",
+					form: formId,
+					className: primaryButton,
+					disabled: pending || prompt.input.type !== "text" && !value.trim(),
+					children: "Continue"
+				})]
+			})
+		]
+	});
+}
+function DisconnectProviderDialog({ provider, onCancel, onConfirm }) {
+	const ref = useRef(null);
+	const titleId = useId();
+	useEffect(() => {
+		const element = ref.current;
+		element.showModal();
+		return () => element.close();
+	}, []);
+	return /* @__PURE__ */ jsxs("dialog", {
+		ref,
+		"aria-labelledby": titleId,
+		"aria-describedby": `${titleId}-description`,
+		onCancel: (event) => {
+			event.preventDefault();
+			onCancel();
+		},
+		className: "m-auto w-[calc(100%_-_2rem)] max-w-md rounded-2xl border border-zinc-800 bg-[#0d0d10] p-6 text-zinc-100 shadow-2xl backdrop:bg-black/70 backdrop:backdrop-blur-sm",
+		children: [
+			/* @__PURE__ */ jsxs("h3", {
+				id: titleId,
+				className: "text-lg font-semibold text-white",
+				children: [
+					"Disconnect ",
+					provider.name,
+					"?"
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: `${titleId}-description`,
+				className: "mt-2 text-sm leading-6 text-zinc-400",
+				children: "Agents using it will need another model or a reconnection."
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					autoFocus: true,
+					onClick: onCancel,
+					className: "cursor-pointer rounded-full border border-zinc-800 px-4 py-2 text-sm font-medium text-zinc-300 hover:border-zinc-700 hover:text-white",
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onConfirm,
+					className: "cursor-pointer rounded-full bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-500",
+					children: "Disconnect"
+				})]
+			})
+		]
+	});
+}
+function SafeLink({ url, children }) {
+	try {
+		if (!["http:", "https:"].includes(new URL(url).protocol)) return null;
+	} catch {
+		return null;
+	}
+	return /* @__PURE__ */ jsx("a", {
+		className: "cursor-pointer break-all text-violet-300 underline",
+		href: url,
+		target: "_blank",
+		rel: "noopener noreferrer",
+		children
+	});
+}
+function DeviceCode({ code, url }) {
+	const [copyState, setCopyState] = useState("idle");
+	async function copy() {
+		if (copyState === "copying") return;
+		setCopyState("copying");
+		try {
+			await navigator.clipboard.writeText(code);
+			setCopyState("copied");
+		} catch {
+			setCopyState("failed");
+		}
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2 text-sm",
+		children: [
+			/* @__PURE__ */ jsx(SafeLink, {
+				url,
+				children: "Open device authorization"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-3",
+				children: [/* @__PURE__ */ jsxs("p", { children: ["Code: ", /* @__PURE__ */ jsx("strong", {
+					className: "select-all font-mono",
+					children: code
+				})] }), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: button,
+					disabled: copyState === "copying",
+					onClick: () => {
+						copy();
+					},
+					children: "Copy to clipboard"
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: copyState === "failed" ? "text-amber-300" : "text-emerald-400",
+				children: copyState === "copied" ? "Copied!" : copyState === "failed" ? "Unable to copy. Select and copy the code above." : copyState === "copying" ? "Copying…" : ""
+			})
+		]
+	});
+}
+function LoginEvent({ event }) {
+	if (event.type === "auth_url") return /* @__PURE__ */ jsxs("p", {
+		className: "text-sm",
+		children: [/* @__PURE__ */ jsx(SafeLink, {
+			url: event.url,
+			children: "Open provider sign-in"
+		}), event.instructions && /* @__PURE__ */ jsx("span", {
+			className: "mt-1 block text-zinc-400",
+			children: event.instructions
+		})]
+	});
+	if (event.type === "device_code") return /* @__PURE__ */ jsx(DeviceCode, {
+		code: event.userCode,
+		url: event.verificationUri
+	}, event.userCode);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "text-sm text-zinc-400",
+		children: [/* @__PURE__ */ jsx("p", { children: event.message }), event.type === "info" && event.links?.map((link, index) => /* @__PURE__ */ jsx(SafeLink, {
+			url: link.url,
+			children: link.label ?? link.url
+		}, index))]
+	});
+}
+//#endregion
+//#region src/routes/_authenticated.providers.tsx?tsr-split=component
+var SplitComponent = ProvidersPage;
+//#endregion
+export { SplitComponent as component };