@wular/coder 0.4.12 → 0.5.0

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/settings/[tab]/connections-list.cf4061ae909272c3.js

@@ -0,0 +1,439 @@
+"use client";
+import "./connections-list.87962937438296f1.css.pnext-asset.js";
+import { useEffect, 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 { toastFailure, useAction } from "../../../../../utils/action.f22057e7dfac40fe.js";
+import { Card, Empty } from "../../../../../comps/ui/card.c0030eafd76587e3.js";
+import { Button } from "../../../../../comps/ui/button.b62fa52e18fa338b.js";
+import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
+import { Menu } from "../../../../../comps/ui/menu.7f558c7c6f6345d5.js";
+import { MenuItem } from "../../../../../comps/ui/menu-items.759a1b1f7c5ee365.js";
+import { iAgent, iDots, iLock, iPlus, iUsers } from "../../../../../comps/ui/icons.f769275420d072ce.js";
+import { BrandIcon } from "../../agents/agent/agent-pills.1012e04bfbc7bffd.js";
+import { useAddDialog, useRemove } from "./list.e7d6a422f6a869ea.js";
+import { AddConnection, returning, useAdd } from "./connection-add.353ec01fbb814f78.js";
+import { PlatformStep } from "../../agents/[slug]/(tabs)/platforms/platform-step.6e90cbfe308f28a0.js";
+import { Modal } from "../../../../../comps/ui/modal.08ac85d31f4c76c1.js";
+import { Badge } from "../../../../../comps/ui/badge.9f63fd615cf0ee22.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";
+const hostOf = (row) => row.url ? URL.canParse(row.url) ? new URL(row.url).host : row.url : row.command;
+/** Connections grouped by service: a platform's app installs and member sign-ins, or an MCP server's workspace and personal entries. */
+function services(rows, catalog) {
+	const out = new Map();
+	for (const info of catalog.filter((entry) => entry.personal)) out.set(info.id, {
+		key: info.id,
+		name: info.name,
+		info,
+		rows: []
+	});
+	for (const row of rows) {
+		const info = catalog.find((entry) => entry.id === row.provider);
+		const key = info ? info.id : `mcp:${row.name.replace(/-user$/, "")}`;
+		const service = out.get(key) ?? {
+			key,
+			name: info?.name ?? row.name.replace(/-user$/, ""),
+			info,
+			where: info ? undefined : hostOf(row),
+			rows: []
+		};
+		service.rows.push(row);
+		out.set(key, service);
+	}
+	return [...out.values()];
+}
+/** A connection's state as a dot and its name, with Reconnect when its sign-in stopped working. */
+function State({ row, label, onReconnect, busy }) {
+	const broken = row.status === "needs-auth";
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		/* @__PURE__ */ _jsx("i", { class: broken ? "conn-dot warn" : row.status === "disabled" ? "conn-dot off" : "conn-dot" }),
+		/* @__PURE__ */ _jsx("span", {
+			class: "conn-name",
+			children: broken ? "needs sign-in" : label ?? row.account ?? row.name
+		}),
+		row.access === "read-only" ? /* @__PURE__ */ _jsx("span", {
+			class: "dim",
+			title: "Read-only",
+			children: /* @__PURE__ */ _jsx(Icon, { d: iLock })
+		}) : null,
+		broken && onReconnect ? /* @__PURE__ */ _jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			loading: busy,
+			onClick: onReconnect,
+			children: "Reconnect"
+		}) : null
+	] });
+}
+/** A connection's ⋯ menu: sign in again, and remove after asking. */
+function RowMenu({ row, onReconnect, onRemoved }) {
+	const removing = useRemove({
+		title: `Remove ${row.name}?`,
+		body: "Tasks stop using it, and its key or sign-in is deleted.",
+		link: row.name,
+		onRemove: () => client.connections.remove(row.id).then(onRemoved, toastFailure)
+	});
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs(Menu, {
+		button: "icon",
+		label: `${row.name} actions`,
+		summary: /* @__PURE__ */ _jsx(Icon, { d: iDots }),
+		children: [/* @__PURE__ */ _jsx(MenuItem, {
+			title: row.auth === "key" ? "New key" : "Sign in again",
+			onClick: onReconnect
+		}), removing.item]
+	}), removing.dialog] });
+}
+/** Every service tasks reach, each with its workspace side and the viewer's own, plus how many other members connected theirs. */
+export function ConnectionsList({ first, catalog, local, admin, operator, viewer, agents, builtins }) {
+	const [rows, setRows] = useState(first.filter((row) => row.provider !== "env"));
+	// A chat's reconnect link opens the new key row of a key connection; its connect link marks a platform's row.
+	const search = useSearchParams();
+	const reconnecting = search.get("reconnect");
+	const connecting = search.get("connect");
+	const [keying, setKeying] = useState(rows.find((row) => row.name === reconnecting && row.auth === "key"));
+	const adding = useAddDialog("Add connection", [
+		"url",
+		"access",
+		"tools",
+		"scope"
+	]);
+	const [start, setStart] = useState();
+	const action = useAction({ leaves: true });
+	const org = useOrg();
+	const put = (row) => setRows((now) => now.some((each) => each.id === row.id) ? now.map((each) => each.id === row.id ? row : each) : [...now, row]);
+	const drop = (row) => setRows((now) => now.filter((each) => each.id !== row.id));
+	const { add } = useAdd(put);
+	const reconnect = (row) => {
+		if (row.auth === "key") return setKeying(row);
+		void action.run(row.id, async () => location.assign(returning((await client.connections.authorize(row.id)).url)));
+	};
+	const list = services(rows, catalog);
+	const close = () => {
+		setStart(undefined);
+		adding.close();
+	};
+	// Shared apps serve every built-in agent; the first one's step stands for them.
+	const builtin = builtins[0];
+	const [perAgent, setPerAgent] = useState();
+	// A built-in agent's next step on a platform, the same component its Platforms tab renders.
+	const Step = ({ step, info, agent = builtin.id, quiet }) => /* @__PURE__ */ _jsx(PlatformStep, {
+		step,
+		info,
+		org,
+		agent,
+		builtin: true,
+		operator,
+		unreachable: catalog.some((entry) => entry.unreachable),
+		quiet
+	});
+	// Where an app is installed, as a dot and its accounts.
+	const Installed = ({ accounts, title }) => /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		/* @__PURE__ */ _jsx("i", { class: "conn-dot" }),
+		/* @__PURE__ */ _jsx("span", {
+			class: "conn-name",
+			title,
+			children: [...new Set(accounts.filter(Boolean))].join(", ") || "installed"
+		}),
+		/* @__PURE__ */ _jsx("span", { class: "grow" })
+	] });
+	// A platform whose apps are each agent's own, like Slack: who has one installed, and the dialog that sets them up.
+	const PerAgent = ({ info }) => {
+		const live = builtins.flatMap((agent) => (agent.steps[info.id]?.live ?? []).map((entry) => ({
+			agent: agent.name,
+			account: entry.account
+		})));
+		return live.length ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(Installed, {
+			accounts: live.map((entry) => entry.account),
+			title: live.map((entry) => `${entry.agent} in ${entry.account ?? info.name}`).join(", ")
+		}), /* @__PURE__ */ _jsx(Button, {
+			size: "sm",
+			variant: "ghost",
+			onClick: () => setPerAgent(info),
+			children: "Manage"
+		})] }) : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(Badge, { children: "not set up" }), /* @__PURE__ */ _jsxs(Button, {
+			size: "sm",
+			onClick: () => setPerAgent(info),
+			children: ["Set up ", info.name]
+		})] });
+	};
+	const workspace = (service) => {
+		const apps = service.rows.filter((row) => row.agent);
+		const own = service.rows.find((row) => !row.owner && !row.agent);
+		if (service.info?.builtinApp === "own" && builtins.some((agent) => agent.steps[service.info.id])) return /* @__PURE__ */ _jsx("div", {
+			class: "conn-cell",
+			children: /* @__PURE__ */ _jsx(PerAgent, { info: service.info })
+		});
+		if (service.info) {
+			const info = service.info;
+			const step = builtin?.steps[info.id];
+			// Other agents' own apps installed here; the built-in agent's are in its step.
+			const others = [...new Set(apps.map((row) => row.agent))].filter((id) => id !== builtin?.id);
+			const nameOf = (id) => agents.find((agent) => agent.id === id)?.name ?? id;
+			return /* @__PURE__ */ _jsxs("div", {
+				class: "conn-cell",
+				children: [
+					step?.live.length ? /* @__PURE__ */ _jsx(Installed, { accounts: step.live.map((entry) => entry.account) }) : null,
+					others.length ? /* @__PURE__ */ _jsxs("span", {
+						class: "conn-others",
+						title: `Their own ${info.name} apps: ${others.map(nameOf).join(", ")}`,
+						children: [/* @__PURE__ */ _jsx(Icon, { d: iAgent }), others.length]
+					}) : null,
+					step ? /* @__PURE__ */ _jsx(Step, {
+						step,
+						info,
+						quiet: true
+					}) : null,
+					step || others.length ? null : /* @__PURE__ */ _jsx("span", {
+						class: "dim",
+						children: "—"
+					})
+				]
+			});
+		}
+		if (own) return /* @__PURE__ */ _jsxs("div", {
+			class: "conn-cell",
+			children: [
+				/* @__PURE__ */ _jsx(State, {
+					row: own,
+					label: own.name,
+					busy: action.pending === own.id,
+					onReconnect: admin ? () => reconnect(own) : undefined
+				}),
+				/* @__PURE__ */ _jsx("span", { class: "grow" }),
+				admin ? /* @__PURE__ */ _jsx(RowMenu, {
+					row: own,
+					onReconnect: () => reconnect(own),
+					onRemoved: () => drop(own)
+				}) : null
+			]
+		});
+		const template = service.rows[0];
+		return admin && template ? /* @__PURE__ */ _jsx(Button, {
+			variant: "ghost",
+			size: "sm",
+			leftIcon: iPlus,
+			onClick: () => setStart({
+				pick: {
+					kind: "mcp",
+					target: template.url ?? template.command,
+					name: service.name
+				},
+				scope: "workspace"
+			}),
+			children: "Connect"
+		}) : /* @__PURE__ */ _jsx("span", {
+			class: "dim",
+			children: "—"
+		});
+	};
+	const personal = (service) => {
+		const mine = service.rows.find((row) => row.asker);
+		const others = service.rows.filter((row) => row.owner && !row.asker);
+		const template = service.rows[0];
+		const count = others.length ? /* @__PURE__ */ _jsxs("span", {
+			class: "conn-others",
+			title: others.map((row) => row.owner?.name ?? "A member").join(", "),
+			children: [/* @__PURE__ */ _jsx(Icon, { d: iUsers }), others.length]
+		}) : null;
+		return /* @__PURE__ */ _jsx("div", {
+			class: "conn-cell",
+			children: mine ? /* @__PURE__ */ _jsxs(_Fragment, { children: [
+				/* @__PURE__ */ _jsx(State, {
+					row: mine,
+					busy: action.pending === mine.id,
+					onReconnect: () => reconnect(mine)
+				}),
+				/* @__PURE__ */ _jsx("span", { class: "grow" }),
+				count,
+				/* @__PURE__ */ _jsx(RowMenu, {
+					row: mine,
+					onReconnect: () => reconnect(mine),
+					onRemoved: () => drop(mine)
+				})
+			] }) : service.info && !service.info.connectable ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("span", {
+				class: "dim grow",
+				children: "—"
+			}), count] }) : /* @__PURE__ */ _jsxs(_Fragment, { children: [
+				/* @__PURE__ */ _jsx(Button, {
+					variant: "ghost",
+					size: "sm",
+					leftIcon: iPlus,
+					autoFocus: service.key === connecting,
+					onClick: () => service.info ? add({
+						name: service.info.name,
+						provider: service.info.id
+					}) : setStart({
+						pick: {
+							kind: "mcp",
+							target: template?.url ?? template?.command,
+							name: service.name
+						},
+						scope: "personal"
+					}),
+					children: "Connect"
+				}),
+				/* @__PURE__ */ _jsx("span", { class: "grow" }),
+				count
+			] })
+		});
+	};
+	const groups = [["Platforms", list.filter((service) => service.info)], ["MCP servers", list.filter((service) => !service.info)]].filter(([, services]) => services.length);
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		/* @__PURE__ */ _jsxs(Card, {
+			look: "filled",
+			title: "Connections",
+			actions: adding.button,
+			children: [list.length ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("div", {
+				class: "table-scroll",
+				children: /* @__PURE__ */ _jsxs("table", {
+					class: "conns",
+					children: [
+						/* @__PURE__ */ _jsxs("colgroup", { children: [
+							/* @__PURE__ */ _jsx("col", { class: "conns-svc" }),
+							/* @__PURE__ */ _jsx("col", {}),
+							local ? null : /* @__PURE__ */ _jsx("col", {})
+						] }),
+						/* @__PURE__ */ _jsx("thead", { children: /* @__PURE__ */ _jsxs("tr", { children: [
+							/* @__PURE__ */ _jsx("th", { children: "Service" }),
+							/* @__PURE__ */ _jsx("th", { children: "Workspace" }),
+							local ? null : /* @__PURE__ */ _jsx("th", { children: viewer ? `Personal · ${viewer}` : "Personal" })
+						] }) }),
+						groups.map(([label, services]) => /* @__PURE__ */ _jsxs("tbody", { children: [/* @__PURE__ */ _jsx("tr", {
+							class: "conns-group",
+							children: /* @__PURE__ */ _jsx("th", {
+								colSpan: local ? 2 : 3,
+								children: label
+							})
+						}), services.map((service) => /* @__PURE__ */ _jsxs("tr", {
+							class: service.key === connecting ? "conns-marked" : undefined,
+							children: [/* @__PURE__ */ _jsx("td", { children: /* @__PURE__ */ _jsxs("span", {
+								class: "conn-svc",
+								title: service.where,
+								children: [service.info ? /* @__PURE__ */ _jsx(BrandIcon, { brand: service.info.brand }) : /* @__PURE__ */ _jsx("span", {
+									class: "conn-mark",
+									children: service.name[0]
+								}), /* @__PURE__ */ _jsx("b", { children: service.name })]
+							}) }), service.info && !service.info.connectable && !service.rows.length && !builtins.some((agent) => agent.steps[service.info.id]?.live.length) ? /* @__PURE__ */ _jsx(
+								"td",
+								// No app here yet: one step serves both sides, so one cell holds it.
+								{
+									colSpan: local ? 1 : 2,
+									children: /* @__PURE__ */ _jsx("div", {
+										class: "conn-cell",
+										children: service.info.builtinApp === "own" && builtins.some((agent) => agent.steps[service.info.id]) ? /* @__PURE__ */ _jsx(PerAgent, { info: service.info }) : builtin?.steps[service.info.id] ? /* @__PURE__ */ _jsx(Step, {
+											step: builtin.steps[service.info.id],
+											info: service.info
+										}) : /* @__PURE__ */ _jsx("span", {
+											class: "dim",
+											children: "—"
+										})
+									})
+								}
+							) : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("td", { children: workspace(service) }), local ? null : /* @__PURE__ */ _jsx("td", { children: personal(service) })] })]
+						}, service.key))] }, label))
+					]
+				})
+			}), local ? null : /* @__PURE__ */ _jsx("p", {
+				class: "conns-hint",
+				children: "Personal accounts run only on their owner's turns."
+			})] }) : /* @__PURE__ */ _jsx(Empty, {
+				title: "No connections yet",
+				children: "Add one so tasks can use another service, like an issue tracker or a database."
+			}), keying ? /* @__PURE__ */ _jsx(NewKey, {
+				row: keying,
+				onSaved: (row) => {
+					put(row);
+					setKeying(undefined);
+				},
+				onClose: () => setKeying(undefined)
+			}) : null]
+		}),
+		perAgent ? /* @__PURE__ */ _jsxs(Modal, {
+			title: `${perAgent.name} apps`,
+			dismiss: true,
+			onClose: () => setPerAgent(undefined),
+			children: [
+				/* @__PURE__ */ _jsxs("p", {
+					class: "muted",
+					children: [
+						"Each agent has its own ",
+						perAgent.name,
+						" app, so each answers as its own @name in",
+						" ",
+						perAgent.name,
+						". Set one up for every built-in agent that should work there."
+					]
+				}),
+				/* @__PURE__ */ _jsx("div", {
+					class: "agent-apps",
+					children: builtins.filter((agent) => agent.steps[perAgent.id]).map((agent) => /* @__PURE__ */ _jsxs("div", {
+						class: "agent-app",
+						children: [/* @__PURE__ */ _jsx("b", { children: agent.name }), /* @__PURE__ */ _jsx(Step, {
+							step: agent.steps[perAgent.id],
+							info: perAgent,
+							agent: agent.id
+						})]
+					}, agent.id))
+				}),
+				/* @__PURE__ */ _jsx("p", {
+					class: "muted",
+					children: "Other agents set theirs up on their own Platforms tab."
+				})
+			]
+		}) : null,
+		adding.open || start ? /* @__PURE__ */ _jsx(AddConnection, {
+			catalog,
+			rows,
+			local,
+			admin,
+			operator,
+			builtin,
+			start,
+			onAdded: (row) => {
+				put(row);
+				close();
+			},
+			onClose: close
+		}) : null
+	] });
+}
+/** A new key for a key connection that stopped working, in a row under the list. */
+function NewKey({ row, onSaved, onClose }) {
+	const action = useAction({ leaves: true });
+	const busy = Boolean(action.pending);
+	const input = useRef(null);
+	useEffect(() => input.current?.focus(), []);
+	return /* @__PURE__ */ _jsxs("form", {
+		class: "add-row conn-key",
+		method: "post",
+		onSubmit: (event) => {
+			event.preventDefault();
+			const key = String(new FormData(event.currentTarget).get("key") ?? "").trim();
+			if (!key) return;
+			void action.run("save", async () => onSaved(await client.connections.update(row.id, { key })));
+		},
+		children: [
+			/* @__PURE__ */ _jsx("input", {
+				name: "key",
+				type: "password",
+				"aria-label": `New key for ${row.name}`,
+				placeholder: `New key for ${row.name}, then Enter`,
+				ref: input,
+				autocomplete: "off",
+				required: true
+			}),
+			/* @__PURE__ */ _jsx(Button, {
+				type: "submit",
+				loading: busy,
+				children: "Save key"
+			}),
+			/* @__PURE__ */ _jsx(Button, {
+				variant: "ghost",
+				disabled: busy,
+				onClick: onClose,
+				children: "Cancel"
+			})
+		]
+	});
+}