@wular/coder 0.4.13 → 0.5.0

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/settings/[tab]/connection-add.353ec01fbb814f78.js

@@ -0,0 +1,526 @@
+"use client";
+import { useRef, useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { useSearchParams } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
+import { client } from "../../../../../utils/client.c8d7efefb6194d7d.js";
+import { useAction } from "../../../../../utils/action.f22057e7dfac40fe.js";
+import { Loading } from "../../../../../comps/ui/card.c0030eafd76587e3.js";
+import { reasonText } from "../../../../../utils/format.ceeaafa10a0563f3.js";
+import { Field } from "../../../../../comps/ui/field.75588c33b72824a7.js";
+import { Badge } from "../../../../../comps/ui/badge.9f63fd615cf0ee22.js";
+import { MenuItem } from "../../../../../comps/ui/menu-items.759a1b1f7c5ee365.js";
+import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
+import { iLeft, iPlus } from "../../../../../comps/ui/icons.f769275420d072ce.js";
+import { Button, IconButton } from "../../../../../comps/ui/button.b62fa52e18fa338b.js";
+import { Segmented } from "../../../../../comps/ui/segmented.633abe26ff760e37.js";
+import { Select } from "../../../../../comps/ui/select.0ee9e8f04ddd8b47.js";
+import { Search } from "../../../../../comps/ui/toolbar.ff8367c641d28c1e.js";
+import { Modal } from "../../../../../comps/ui/modal.08ac85d31f4c76c1.js";
+import { BrandIcon } from "../../agents/agent/agent-pills.1012e04bfbc7bffd.js";
+import { PlatformStep } from "../../agents/[slug]/(tabs)/platforms/platform-step.6e90cbfe308f28a0.js";
+import { ACCESS } from "../model-options.dc630cb6e2cbf83a.js";
+import { useOrg } from "../../../../../comps/nav/org.853d173b55368728.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+/** Splits a typed command into words, keeping quoted paths whole. */
+const shellWords = (text) => (text.match(/"[^"]*"|'[^']*'|(?:\{[^}]+\}|[^\s])+/g) ?? []).map((part) => part.replace(/^(["'])(.*)\1$/, "$2"));
+const isUrl = (text) => /^https?:\/\//.test(text.trim());
+const targetOf = (server) => server.url ?? [server.command, ...(server.args ?? []).map((arg) => arg.replace(/\{((?:runtime|package):[^}]+)\}/g, (_, name) => `{${server.argumentInputs?.find((input) => input.name === name)?.label ?? name}}`))].join(" ").trim();
+/** The domain a registry name's namespace stands for: `io.draw/mcp` is draw.io. */
+const domainOf = (name) => name.split("/")[0].split(".").reverse().join(".");
+/** The registry values that carry the server's keys. */
+const secretsOf = (server) => [...server?.headers ?? [], ...server?.env ?? []].filter((input) => input.secret);
+const names = (list) => list.map((input) => input.name).join(", ");
+const SCOPE_OPTIONS = [["workspace", "Workspace"], ["personal", "Personal"]];
+/** A platform sign-in started here comes back here, with its outcome as a toast. */
+export function returning(url) {
+	const target = new URL(url, location.origin);
+	if (target.origin === location.origin && target.pathname.startsWith("/connect/")) target.searchParams.set("return", location.pathname);
+	return target.href;
+}
+/** A sign-in answer goes to the platform; anything else joins the list. */
+export function useAdd(onAdded) {
+	const action = useAction({ leaves: true });
+	const add = (body, onFail) => void action.run("add", async () => {
+		const { authorize, ...row } = await client.connections.add(body).catch((reason) => {
+			onFail?.(reason);
+			throw reason;
+		});
+		if (authorize) return location.assign(returning(authorize));
+		onAdded(row);
+	});
+	// An account already connected in this scope signs in again on its own row.
+	const signIn = (id) => void action.run("add", async () => location.assign(returning((await client.connections.authorize(id)).url)));
+	return {
+		busy: Boolean(action.pending),
+		add,
+		signIn
+	};
+}
+/** Registry values the picked server needs, each its own field. */
+function Inputs({ kind, list }) {
+	return /* @__PURE__ */ _jsx(_Fragment, { children: list.map((input) => /* @__PURE__ */ _jsx(Field, {
+		label: /* @__PURE__ */ _jsx("span", {
+			class: "mono",
+			children: input.label ?? input.name
+		}),
+		hint: input.description ?? (input.required ? "required" : "optional"),
+		children: /* @__PURE__ */ _jsx("input", {
+			name: `${kind}:${input.name}`,
+			placeholder: input.placeholder,
+			defaultValue: kind === "arg" ? input.placeholder : undefined,
+			autocomplete: "off",
+			required: input.required
+		})
+	}, input.name)) });
+}
+/** One search over the catalog's platforms and the MCP registry; a pasted URL or command is a server of its own. */
+function Find({ platforms, onPick }) {
+	const [query, setQuery] = useState("");
+	const [found, setFound] = useState();
+	const timer = useRef();
+	const typed = query.trim();
+	const target = isUrl(typed) || /\s/.test(typed);
+	const run = (q) => {
+		setFound((now) => now?.q === q ? now : { q });
+		void client.mcp.search(q).then((items) => setFound((now) => now?.q === q ? {
+			q,
+			items
+		} : now)).catch((reason) => setFound((now) => now?.q === q ? {
+			q,
+			error: reasonText(reason)
+		} : now));
+	};
+	const search = (q) => {
+		setQuery(q);
+		clearTimeout(timer.current);
+		// Servers come only from a typed search, so the dialog opens at its size and stays there.
+		if (!q.trim() || isUrl(q) || /\s/.test(q.trim())) return setFound(undefined);
+		// The list shows it is searching from the first key, not after the pause.
+		setFound({ q: q.trim() });
+		timer.current = setTimeout(() => run(q.trim()), 250);
+	};
+	const shown = platforms.filter((info) => info.name.toLowerCase().includes(typed.toLowerCase()));
+	return /* @__PURE__ */ _jsxs("div", {
+		class: "conn-find",
+		children: [/* @__PURE__ */ _jsx(Search, {
+			value: query,
+			label: "Search platforms and MCP servers, or paste an MCP server URL",
+			onInput: search,
+			autofocus: true
+		}), /* @__PURE__ */ _jsxs("div", {
+			class: "conn-hits",
+			role: "listbox",
+			"aria-label": "Services",
+			"aria-busy": Boolean(found && !found.items),
+			children: [
+				target ? /* @__PURE__ */ _jsx(MenuItem, {
+					icon: iPlus,
+					title: "Use as an MCP server",
+					sub: /* @__PURE__ */ _jsx("span", {
+						class: "mono",
+						children: typed
+					}),
+					onClick: () => onPick({
+						kind: "mcp",
+						target: typed
+					})
+				}) : null,
+				target ? null : shown.map((info) => /* @__PURE__ */ _jsx(MenuItem, {
+					icon: /* @__PURE__ */ _jsx(BrandIcon, { brand: info.brand }),
+					title: info.name,
+					end: /* @__PURE__ */ _jsx("small", {
+						class: "dim",
+						children: "platform"
+					}),
+					onClick: () => onPick({
+						kind: "platform",
+						info
+					})
+				}, info.id)),
+				target ? null : found?.error ? /* @__PURE__ */ _jsx("p", {
+					class: "registry-note err",
+					role: "alert",
+					children: found.error
+				}) : !found ? null : !found.items ? /* @__PURE__ */ _jsx("p", {
+					class: "registry-note",
+					children: /* @__PURE__ */ _jsx(Loading, {
+						label: "Searching MCP servers",
+						inline: true,
+						dots: true
+					})
+				}) : found.items.length ? /* @__PURE__ */ _jsx(_Fragment, { children: found.items.map((server) => /* @__PURE__ */ _jsx(MenuItem, {
+					title: /* @__PURE__ */ _jsxs(_Fragment, { children: [server.title, server.verified ? /* @__PURE__ */ _jsxs(Badge, {
+						tone: "ok",
+						children: ["by ", domainOf(server.name)]
+					}) : null] }),
+					sub: server.description || server.name,
+					end: /* @__PURE__ */ _jsx("small", {
+						class: "dim",
+						children: "MCP"
+					}),
+					onClick: () => onPick({
+						kind: "mcp",
+						server
+					})
+				}, server.name)) }) : typed && !shown.length ? /* @__PURE__ */ _jsx("p", {
+					class: "registry-note",
+					children: "Nothing matches. Paste the server's URL or command."
+				}) : null
+			]
+		})]
+	});
+}
+/** A platform: its workspace side is the built-in agent's app, as its Platforms tab shows it; its personal side a member's sign-in through that app. */
+function usePlatform({ info, rows, scope, operator, builtin, onAdded }) {
+	const org = useOrg();
+	const { busy, add, signIn } = useAdd(onAdded);
+	const mine = rows.find((row) => row.provider === info.id && row.asker);
+	const step = builtin?.steps[info.id];
+	// The same next step the Platforms tab shows: set up, create, install or manage the app.
+	const next = step ? /* @__PURE__ */ _jsx("div", {
+		class: "conn-step",
+		children: /* @__PURE__ */ _jsx(PlatformStep, {
+			step,
+			info,
+			org,
+			agent: builtin.id,
+			builtin: true,
+			operator
+		})
+	}) : null;
+	if (scope === "workspace") return {
+		busy,
+		status: null,
+		hint: "The agent's app. Every turn.",
+		notice: next ? null : /* @__PURE__ */ _jsxs("p", {
+			class: "muted",
+			children: [
+				"No agent here uses ",
+				info.name,
+				"."
+			]
+		}),
+		submit: () => undefined,
+		// The step is the dialog's action, so it sits where the action buttons do.
+		actions: next
+	};
+	return {
+		busy,
+		status: !info.connectable ? null : mine ? /* @__PURE__ */ _jsx(Badge, {
+			tone: mine.status === "needs-auth" ? "warn" : "ok",
+			children: mine.status === "needs-auth" ? "needs sign-in" : mine.account ?? "connected"
+		}) : /* @__PURE__ */ _jsx(Badge, { children: "not connected" }),
+		hint: "The member’s own account. Their turns only.",
+		notice: null,
+		submit: () => {
+			if (!info.connectable) return;
+			if (mine) return signIn(mine.id);
+			add({
+				name: info.name,
+				provider: info.id
+			});
+		},
+		// A sign-in goes through the app, so without one the app's own step comes first.
+		actions: info.connectable ? /* @__PURE__ */ _jsxs(Button, {
+			type: "submit",
+			loading: busy,
+			children: [/* @__PURE__ */ _jsx(BrandIcon, { brand: info.brand }), mine ? "Sign in again" : `Sign in to ${info.name}`]
+		}) : next
+	};
+}
+/** An MCP server's form: its name and target, what the registry asks for, and a key when it takes one. */
+function useMcp({ server, target: typed, name: asked, scope, onAdded }) {
+	const query = useSearchParams();
+	const [name, setName] = useState(asked ?? server?.title ?? query.get("add") ?? "");
+	const [target, setTarget] = useState(server ? targetOf(server) : typed ?? "");
+	// A remote server's sign-in is found on Add; a key is asked for only when it needs one.
+	const [keyed, setKeyed] = useState(false);
+	const [access, setAccess] = useState(query.get("access") ?? "auto");
+	const { busy, add } = useAdd(onAdded);
+	const fields = useRef(null);
+	const url = !target.trim() || isUrl(target);
+	const secrets = secretsOf(server);
+	const asksKey = !url || keyed || secrets.length > 0;
+	// A stdio server refuses Read-only without a tool list.
+	const level = url ? access : "auto";
+	const secret = secrets.find((input) => input.required) ?? secrets[0];
+	const rest = secrets.filter((input) => input !== secret);
+	const blocked = rest.some((input) => input.required);
+	const plain = [
+		...server?.argumentInputs ?? [],
+		...server?.env ?? [],
+		...server?.headers ?? []
+	].some((input) => !input.secret);
+	const submit = (box) => {
+		const values = [...new FormData(box)].map(([key, value]) => [key, String(value).trim()]);
+		const get = (key) => values.find(([field]) => field === key)?.[1] ?? "";
+		const group = (prefix) => Object.fromEntries(values.filter(([key, value]) => key.startsWith(prefix) && value).map(([key, value]) => [key.slice(prefix.length), value]));
+		const destination = target.trim();
+		if (!name.trim() || !destination || blocked) return;
+		const original = server?.command ? targetOf(server) : undefined;
+		const parts = server && destination === original ? [server.command, ...server.args ?? []] : shellWords(destination);
+		const [command, ...args] = parts.map((part) => part.replace(/\{([^}]+)\}/g, (token, label) => {
+			const input = server?.argumentInputs?.find((each) => each.name === label || each.label === label);
+			return input ? get(`arg:${input.name}`) : token;
+		}));
+		const env = group("env:");
+		const headers = group("header:");
+		const endpoint = url ? {
+			url: destination,
+			...server?.url === destination ? { type: server.type } : {},
+			...Object.keys(headers).length ? { headers } : {}
+		} : {
+			command,
+			...args.length ? { args } : {},
+			...Object.keys(env).length ? { env } : {}
+		};
+		if (server?.description) endpoint.description = server.description;
+		const key = get("key");
+		add({
+			name: name.trim(),
+			provider: "mcp",
+			...scope === "personal" ? { scope: "personal" } : {},
+			...level === "auto" ? {} : { access: level },
+			endpoint,
+			...key ? {
+				auth: "key",
+				key,
+				keyIn: url ? { header: get("header") } : { env: get("env") }
+			} : url ? {} : { auth: "none" }
+		}, (reason) => {
+			if (reason.needs !== "key") return;
+			setKeyed(true);
+			requestAnimationFrame(() => fields.current?.querySelector("input[name=key]")?.focus());
+		});
+	};
+	const body = /* @__PURE__ */ _jsxs("div", {
+		ref: fields,
+		class: "add-form",
+		children: [
+			server?.description ? /* @__PURE__ */ _jsx("p", {
+				class: "muted",
+				children: server.description
+			}) : null,
+			/* @__PURE__ */ _jsxs("div", {
+				class: "add-grid",
+				children: [/* @__PURE__ */ _jsx(Field, {
+					label: "Name",
+					children: /* @__PURE__ */ _jsx("input", {
+						name: "name",
+						value: name,
+						onInput: (event) => setName(event.currentTarget.value),
+						placeholder: "Acme docs",
+						autocomplete: "off",
+						required: true
+					})
+				}), /* @__PURE__ */ _jsx(Field, {
+					label: "URL or command",
+					children: /* @__PURE__ */ _jsx("input", {
+						name: "target",
+						class: "mono",
+						value: target,
+						onInput: (event) => setTarget(event.currentTarget.value),
+						placeholder: "https://mcp.acme.dev/mcp",
+						autocomplete: "off",
+						spellcheck: false,
+						required: true
+					})
+				})]
+			}),
+			plain ? /* @__PURE__ */ _jsxs("div", {
+				class: "add-grid",
+				children: [
+					/* @__PURE__ */ _jsx(Inputs, {
+						kind: "arg",
+						list: server?.argumentInputs ?? []
+					}),
+					/* @__PURE__ */ _jsx(Inputs, {
+						kind: "env",
+						list: (server?.env ?? []).filter((input) => !input.secret)
+					}),
+					/* @__PURE__ */ _jsx(Inputs, {
+						kind: "header",
+						list: (server?.headers ?? []).filter((input) => !input.secret)
+					})
+				]
+			}) : null,
+			rest.length ? /* @__PURE__ */ _jsx("p", {
+				class: "muted",
+				role: "note",
+				children: blocked ? `This server needs ${names(secrets.filter((input) => input.required))}, and a connection holds one key. Add it in the server's own config instead.` : `A connection holds one key, sent as ${secret.name}. Add ${names(rest)} in the server's own config when needed.`
+			}) : null,
+			asksKey ? /* @__PURE__ */ _jsxs("div", {
+				class: "add-grid",
+				children: [/* @__PURE__ */ _jsx(Field, {
+					label: "API key",
+					hint: url ? undefined : "optional",
+					children: /* @__PURE__ */ _jsx("input", {
+						name: "key",
+						type: "password",
+						placeholder: "acme_live_4f9a…",
+						autocomplete: "off",
+						required: !!url
+					}, server?.name)
+				}), url ? /* @__PURE__ */ _jsx(Field, {
+					label: "Header",
+					children: /* @__PURE__ */ _jsx("input", {
+						name: "header",
+						class: "mono",
+						defaultValue: secret?.name ?? "Authorization",
+						placeholder: "Authorization",
+						autocomplete: "off",
+						required: true
+					}, `header:${secret?.name}`)
+				}) : /* @__PURE__ */ _jsx(Field, {
+					label: "Environment variable",
+					children: /* @__PURE__ */ _jsx("input", {
+						name: "env",
+						class: "mono",
+						defaultValue: secret?.name,
+						placeholder: "ACME_API_KEY",
+						autocomplete: "off"
+					}, `env:${secret?.name}`)
+				})]
+			}) : null,
+			/* @__PURE__ */ _jsxs("details", {
+				class: "add-more",
+				children: [/* @__PURE__ */ _jsx("summary", { children: "More options" }), /* @__PURE__ */ _jsx("div", {
+					class: "add-grid",
+					children: /* @__PURE__ */ _jsx(Field, {
+						label: "Access",
+						hint: "read-only keeps only its read-only tools",
+						group: true,
+						children: /* @__PURE__ */ _jsx(Select, {
+							label: "Access",
+							options: url ? ACCESS : ACCESS.filter(([each]) => each === "auto"),
+							value: level,
+							onChange: setAccess
+						})
+					})
+				})]
+			})
+		]
+	});
+	return {
+		busy,
+		body,
+		submit,
+		actions: /* @__PURE__ */ _jsx(Button, {
+			type: "submit",
+			disabled: blocked,
+			loading: busy,
+			children: "Add connection"
+		})
+	};
+}
+/** The picked service: who it acts as, its state there, and the one action that connects it. */
+function Connect({ pick, rows, local, admin, operator, builtin, scope: first, onBack, onAdded, onClose }) {
+	const platform = pick.kind === "platform";
+	// Members add only their own; an admin adding an MCP server starts with the workspace's.
+	const [scope, setScope] = useState(local ? "workspace" : first ?? (platform || !admin ? "personal" : "workspace"));
+	const platformForm = platform ? usePlatform({
+		info: pick.info,
+		rows,
+		scope,
+		operator,
+		builtin,
+		onAdded
+	}) : undefined;
+	const mcpForm = platform ? undefined : useMcp({
+		...pick,
+		scope,
+		onAdded
+	});
+	const form = platformForm ?? mcpForm;
+	const title = platform ? pick.info.name : pick.server?.title ?? "MCP server";
+	return /* @__PURE__ */ _jsxs(Modal, {
+		class: "add-modal",
+		title: /* @__PURE__ */ _jsxs("span", {
+			class: "conn-title",
+			children: [
+				onBack ? /* @__PURE__ */ _jsx(IconButton, {
+					label: "Back",
+					onClick: onBack,
+					children: /* @__PURE__ */ _jsx(Icon, { d: iLeft })
+				}) : null,
+				platform ? /* @__PURE__ */ _jsx(BrandIcon, { brand: pick.info.brand }) : null,
+				title
+			]
+		}),
+		dismiss: true,
+		busy: form.busy,
+		onSubmit: (event) => {
+			event.preventDefault();
+			form.submit(event.currentTarget);
+		},
+		onClose,
+		actions: form.actions,
+		children: [
+			local ? null : /* @__PURE__ */ _jsxs("div", {
+				class: "conn-scope",
+				children: [/* @__PURE__ */ _jsx(Field, {
+					label: "Acts as",
+					group: true,
+					children: platform || admin ? /* @__PURE__ */ _jsx(Segmented, {
+						label: "Acts as",
+						options: SCOPE_OPTIONS,
+						value: scope,
+						onChange: (next) => setScope(next)
+					}) : /* @__PURE__ */ _jsx("p", {
+						class: "muted",
+						children: "Personal. Admins add workspace servers."
+					})
+				}), platformForm ? /* @__PURE__ */ _jsxs("p", {
+					class: "conn-state",
+					children: [platformForm.status, /* @__PURE__ */ _jsx("span", {
+						class: "muted",
+						children: platformForm.hint
+					})]
+				}) : /* @__PURE__ */ _jsx("p", {
+					class: "muted",
+					children: scope === "workspace" ? "An admin’s account. Every turn." : "The member’s own account. Their turns only."
+				})]
+			}),
+			platformForm?.notice ?? null,
+			mcpForm?.body ?? null
+		]
+	});
+}
+/** Adds a connection: find a platform or an MCP server, then pick who it acts as; `start` skips the search. */
+export function AddConnection({ catalog, rows, local, admin, operator, builtin, start, onAdded, onClose }) {
+	const asked = useSearchParams();
+	const linked = asked.get("add");
+	const info = catalog.find((entry) => entry.id === linked);
+	// A chat's link opens the picked service at once.
+	const [pick, setPick] = useState(start?.pick ?? (info ? {
+		kind: "platform",
+		info
+	} : asked.has("url") ? {
+		kind: "mcp",
+		target: asked.get("url") ?? "",
+		name: linked ?? undefined
+	} : undefined));
+	const scope = start?.scope ?? asked.get("scope") ?? undefined;
+	const platforms = catalog.filter((entry) => entry.personal || rows.some((row) => row.agent && row.provider === entry.id));
+	if (pick) return /* @__PURE__ */ _jsx(Connect, {
+		pick,
+		rows,
+		local,
+		admin,
+		operator,
+		builtin,
+		scope,
+		onBack: start ? undefined : () => setPick(undefined),
+		onAdded,
+		onClose
+	}, pick.kind === "platform" ? pick.info.id : pick.server?.name ?? pick.target);
+	return /* @__PURE__ */ _jsx(Modal, {
+		class: "add-modal",
+		title: "Add a connection",
+		dismiss: true,
+		onClose,
+		children: /* @__PURE__ */ _jsx(Find, {
+			platforms,
+			onPick: setPick
+		})
+	});
+}