@wular/coder 0.4.7 → 0.4.8

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

@@ -0,0 +1,643 @@
+"use client";
+import "./connections-list.f742847e4887f072.css.pnext-asset.js";
+import { useEffect, useRef, useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { client } from "../../../../../utils/client.d25e6dcc6704eb60.js";
+import { toastFailure, useAction } from "../../../../../utils/action.568346602027ac74.js";
+import { held } from "../../../../../utils/paged.18f5872fc5aebe96.js";
+import { Card, Empty, FoldCard, Loading } from "../../../../../comps/ui/card.6227f43fc0ae4bd1.js";
+import { reasonText } from "../../../../../utils/format.6a7d1beaf4d09d9c.js";
+import { Field } from "../../../../../comps/ui/field.75588c33b72824a7.js";
+import { Badge } from "../../../../../comps/ui/badge.3d9163a51e6f6d6e.js";
+import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
+import { iAlert } from "../../../../../comps/ui/icons.868385119bf2de28.js";
+import { Link } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
+import { Segmented } from "../../../../../comps/ui/segmented.5ac52bb38fb64ae5.js";
+import { Select } from "../../../../../comps/ui/select.7f481669998074f8.js";
+import { Search } from "../../../../../comps/ui/toolbar.801bbd3163d3fbb0.js";
+import { BrandIcon } from "../../agents/agent/agent-pills.19e913c8cb22db21.js";
+import { Row } from "./list.6d6180438e2bd0c8.js";
+import { useOrg } from "../../../../../comps/nav/org.813dc34bd23a336f.js";
+import { Notice } from "../../../../../comps/ui/notice.f395f231cbb96445.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 KINDS = [["platform", "Platform"], ["mcp", "MCP server"]];
+const HELP = {
+	platform: "Sign in with OAuth, and tasks use the account through Coder’s own tools.",
+	mcp: "Search known servers, or paste a URL or command."
+};
+const READ_ONLY = ["observe", "Read only"];
+const READ_WRITE = ["write", "Read and write"];
+const SCOPES = [["me", "Just me"], ["", "Workspace"]];
+const STATUS = {
+	ok: {
+		tone: "ok",
+		label: "connected"
+	},
+	authorize: {
+		tone: "warn",
+		label: "not signed in"
+	},
+	reconnect: {
+		tone: "warn",
+		label: "reconnect needed"
+	}
+};
+/** What a connection reaches: the platform it signs in to, the variable its key is in, else its server's host or command. */
+function Reach({ row, catalog }) {
+	const info = catalog.find((entry) => entry.id === row.provider);
+	const where = info ? info.name : row.env ? row.env : row.url ? URL.canParse(row.url) ? new URL(row.url).host : row.url : row.command;
+	return /* @__PURE__ */ _jsxs("span", {
+		class: "reach",
+		children: [info ? /* @__PURE__ */ _jsx(BrandIcon, { brand: info.brand }) : null, [where, row.account].filter(Boolean).join(" · ")]
+	});
+}
+/** 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)) });
+}
+/** Who a connection is for; a local server has no members, and a member's own is always theirs. */
+function Who({ local, admin, value, onChange }) {
+	if (local || !admin) return null;
+	return /* @__PURE__ */ _jsx(Field, {
+		label: "Scope",
+		group: true,
+		children: /* @__PURE__ */ _jsx(Select, {
+			label: "Scope",
+			options: SCOPES,
+			value,
+			onChange
+		})
+	});
+}
+/** Read only or read and write, as a dropdown like the scope beside it. */
+function Access({ value, onChange, write }) {
+	return /* @__PURE__ */ _jsx(Field, {
+		label: "Access",
+		group: true,
+		children: /* @__PURE__ */ _jsx(Select, {
+			label: "Access",
+			options: write ? [READ_WRITE] : [READ_ONLY, READ_WRITE],
+			value,
+			onChange
+		})
+	});
+}
+/** The add forms' shared send: a sign-in answer goes to the platform, anything else joins the list. */
+function useAdd({ local, admin, onAdded }) {
+	const action = useAction({ leaves: true });
+	const [owner, setOwner] = useState(admin || local ? "" : "me");
+	const add = (body, onFail) => void action.run("add", async () => {
+		const { authorize, ...row } = await client.connections.add({
+			...body,
+			...owner ? { owner: "me" } : {}
+		}).catch((reason) => {
+			onFail?.(reason);
+			throw reason;
+		});
+		if (authorize) return location.assign(authorize);
+		onAdded(row);
+	});
+	const who = /* @__PURE__ */ _jsx(Who, {
+		local,
+		admin,
+		value: owner,
+		onChange: setOwner
+	});
+	return {
+		busy: Boolean(action.pending),
+		add,
+		who
+	};
+}
+/** A platform account: sign in there, then tasks use Coder's own tools for it. */
+function AddPlatform({ catalog, rows, ...props }) {
+	const org = useOrg();
+	const platforms = catalog.filter((info) => info.personal);
+	const [id, setId] = useState(platforms[0]?.id ?? "");
+	const [access, setAccess] = useState("observe");
+	const { busy, add, who } = useAdd(props);
+	const info = platforms.find((entry) => entry.id === id);
+	const mine = rows.find((row) => row.provider === id && row.mine);
+	return /* @__PURE__ */ _jsxs("form", {
+		class: "add-form",
+		method: "post",
+		onSubmit: (event) => {
+			event.preventDefault();
+			if (info?.connectable) add({
+				name: info.name,
+				provider: info.id,
+				access
+			});
+		},
+		children: [
+			/* @__PURE__ */ _jsxs("div", {
+				class: "add-grid",
+				children: [
+					/* @__PURE__ */ _jsx(Field, {
+						label: "Platform",
+						group: true,
+						children: /* @__PURE__ */ _jsx(Select, {
+							label: "Platform",
+							options: platforms.map((entry) => [entry.id, entry.name]),
+							icons: Object.fromEntries(platforms.map((entry) => [entry.id, /* @__PURE__ */ _jsx(BrandIcon, { brand: entry.brand })])),
+							value: id,
+							onChange: setId
+						})
+					}),
+					/* @__PURE__ */ _jsx(Access, {
+						value: access,
+						onChange: setAccess
+					}),
+					who
+				]
+			}),
+			info && !info.connectable ? /* @__PURE__ */ _jsxs(Notice, {
+				tone: "warning",
+				slim: true,
+				children: [
+					/* @__PURE__ */ _jsx(Icon, { d: iAlert }),
+					/* @__PURE__ */ _jsxs("span", {
+						class: "grow",
+						children: [
+							"This server has no shared ",
+							info.name,
+							" app yet.",
+							props.operator ? null : " Ask whoever runs this server to add one."
+						]
+					}),
+					props.operator ? /* @__PURE__ */ _jsx(Link, {
+						class: "btn outline sm",
+						href: "/dash/[org]/operator",
+						params: { org },
+						children: "Set it up"
+					}) : null
+				]
+			}) : null,
+			/* @__PURE__ */ _jsxs("div", {
+				class: "add-foot",
+				children: [/* @__PURE__ */ _jsx("p", {
+					class: "muted grow",
+					children: !info ? "No platform here offers sign-in yet." : mine && info.connectable ? `Connected as ${mine.account ?? "you"}.` : null
+				}), /* @__PURE__ */ _jsxs("button", {
+					class: "btn",
+					disabled: busy || !info?.connectable,
+					"aria-busy": busy,
+					children: [
+						info ? /* @__PURE__ */ _jsx(BrandIcon, { brand: info.brand }) : null,
+						"Sign in to ",
+						info?.name ?? "a platform"
+					]
+				})]
+			})
+		]
+	});
+}
+/** An MCP server: one Coder knows, a URL or a command; how it signs in, its access and who it is for. */
+function AddMcp(props) {
+	const [query, setQuery] = useState("");
+	const [found, setFound] = useState();
+	const [picked, setPicked] = useState();
+	const [name, setName] = useState("");
+	const [target, setTarget] = useState("");
+	// 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("observe");
+	const { busy, add, who } = useAdd(props);
+	const timer = useRef();
+	const form = useRef(null);
+	const url = !target.trim() || isUrl(target);
+	const asksKey = !url || keyed || secretsOf(picked).length > 0;
+	// A stdio server refuses Read only without a tool list.
+	const level = url ? access : "write";
+	const secrets = secretsOf(picked);
+	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 = [
+		...picked?.argumentInputs ?? [],
+		...picked?.env ?? [],
+		...picked?.headers ?? []
+	].some((input) => !input.secret);
+	const run = (q) => {
+		// An empty search only offers the curated list; it never shows loading, nothing found or errors.
+		if (!q.trim()) {
+			void client.mcp.search("").then((items) => items.length && setFound((now) => now ?? {
+				q,
+				items
+			}), () => {});
+			return;
+		}
+		setFound({ q });
+		void client.mcp.search(q.trim()).then(held(performance.now())).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);
+		if (!q.trim() || isUrl(q) || /\s/.test(q.trim())) setFound(undefined);
+		if (isUrl(q) || /\s/.test(q.trim())) return;
+		timer.current = setTimeout(() => run(q), 250);
+	};
+	const pick = (server) => {
+		setPicked(server);
+		setFound(undefined);
+		setQuery(server.title);
+		setName(server.title);
+		setTarget(targetOf(server));
+		setKeyed(false);
+		requestAnimationFrame(() => form.current?.querySelector("input[name^='arg:'], input[name^='env:'], input[name^='header:'], input[name=key]")?.focus());
+	};
+	const submit = (box) => {
+		const values = [...new FormData(box)].map(([key, value]) => [key, String(value).trim()]);
+		const get = (key) => values.find(([name]) => name === key)?.[1] ?? "";
+		const group = (prefix) => Object.fromEntries(values.filter(([key, value]) => key.startsWith(prefix) && value).map(([key, value]) => [key.slice(prefix.length), value]));
+		const server = target.trim();
+		if (!name.trim() || !server || blocked) return;
+		const original = picked?.command ? targetOf(picked) : undefined;
+		const parts = picked && server === original ? [picked.command, ...picked.args ?? []] : shellWords(server);
+		const [command, ...args] = parts.map((part) => part.replace(/\{([^}]+)\}/g, (token, name) => {
+			const input = picked?.argumentInputs?.find((input) => input.name === name || input.label === name);
+			return input ? get(`arg:${input.name}`) : token;
+		}));
+		const env = group("env:");
+		const headers = group("header:");
+		const endpoint = url ? {
+			url: server,
+			...picked?.url === server ? { type: picked.type } : {},
+			...Object.keys(headers).length ? { headers } : {}
+		} : {
+			command,
+			...args.length ? { args } : {},
+			...Object.keys(env).length ? { env } : {}
+		};
+		if (picked?.description) endpoint.description = picked.description;
+		const key = get("key");
+		add({
+			name: name.trim(),
+			provider: "mcp",
+			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(() => form.current?.querySelector("input[name=key]")?.focus());
+		});
+	};
+	return /* @__PURE__ */ _jsxs("form", {
+		ref: form,
+		class: "add-form",
+		method: "post",
+		onSubmit: (event) => {
+			event.preventDefault();
+			submit(event.currentTarget);
+		},
+		children: [
+			/* @__PURE__ */ _jsxs("div", {
+				class: "registry",
+				onKeyDown: (event) => {
+					if (event.key === "Enter") event.preventDefault();
+					if (event.key === "Escape") setFound(undefined);
+				},
+				onFocusIn: () => {
+					if (!found && !isUrl(query)) run(query);
+				},
+				onFocusOut: (event) => {
+					if (!event.currentTarget.contains(event.relatedTarget)) setFound(undefined);
+				},
+				children: [/* @__PURE__ */ _jsx(Search, {
+					value: query,
+					label: "Search known MCP servers",
+					onInput: search
+				}), found ? /* @__PURE__ */ _jsx("div", {
+					class: "registry-pop",
+					"aria-live": "polite",
+					"aria-busy": !found.items && !found.error,
+					children: found.error ? /* @__PURE__ */ _jsxs("div", {
+						class: "registry-note err",
+						role: "alert",
+						children: [/* @__PURE__ */ _jsx("span", { children: found.error }), /* @__PURE__ */ _jsx("button", {
+							type: "button",
+							class: "btn ghost sm",
+							// Keeps focus in the search, so swapping this note for the loader does not close the list.
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: () => run(found.q),
+							children: "Retry"
+						})]
+					}) : !found.items ? /* @__PURE__ */ _jsx("div", {
+						class: "registry-note",
+						children: /* @__PURE__ */ _jsx(Loading, {
+							label: "Searching known servers",
+							inline: true,
+							dots: true
+						})
+					}) : found.items.length ? found.items.map((server) => /* @__PURE__ */ _jsx("button", {
+						type: "button",
+						class: "pop-item rich",
+						onClick: () => pick(server),
+						children: /* @__PURE__ */ _jsxs("span", {
+							class: "grow",
+							children: [
+								/* @__PURE__ */ _jsx("b", { children: server.title }),
+								server.verified ? /* @__PURE__ */ _jsx("span", {
+									title: `The MCP registry checked that the publisher owns ${domainOf(server.name)}`,
+									children: /* @__PURE__ */ _jsxs(Badge, {
+										tone: "ok",
+										children: ["by ", domainOf(server.name)]
+									})
+								}) : null,
+								server.curated ? /* @__PURE__ */ _jsx("span", {
+									title: "In GitHub's reviewed list of MCP servers",
+									children: /* @__PURE__ */ _jsx(Badge, { children: "GitHub list" })
+								}) : null,
+								/* @__PURE__ */ _jsx(Badge, { children: server.type }),
+								/* @__PURE__ */ _jsx("small", { children: server.description || server.name })
+							]
+						})
+					}, server.name)) : /* @__PURE__ */ _jsx("p", {
+						class: "registry-note",
+						children: "No known server matches. Paste its URL or command below."
+					})
+				}) : null]
+			}),
+			picked?.description ? /* @__PURE__ */ _jsx("p", {
+				class: "muted registry-picked",
+				children: picked.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: picked?.argumentInputs ?? []
+					}),
+					/* @__PURE__ */ _jsx(Inputs, {
+						kind: "env",
+						list: (picked?.env ?? []).filter((input) => !input.secret)
+					}),
+					/* @__PURE__ */ _jsx(Inputs, {
+						kind: "header",
+						list: (picked?.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 if you use them.`
+			}) : null,
+			/* @__PURE__ */ _jsxs("div", {
+				class: "add-grid",
+				children: [/* @__PURE__ */ _jsx(Access, {
+					value: level,
+					onChange: setAccess,
+					write: !url
+				}), who]
+			}),
+			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
+					}, picked?.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__ */ _jsx("div", {
+				class: "add-foot",
+				children: /* @__PURE__ */ _jsx("button", {
+					class: "btn",
+					disabled: busy || blocked,
+					"aria-busy": busy,
+					children: "Add connection"
+				})
+			})
+		]
+	});
+}
+/** Adds a connection: a platform account, an API key, or an MCP server; each kind its own short form. */
+function AddConnection({ catalog, rows, local, admin, operator, empty, onAdded }) {
+	const [kind, setKind] = useState(catalog.some((info) => info.personal) ? "platform" : "mcp");
+	const [round, setRound] = useState(0);
+	const props = {
+		local,
+		admin,
+		operator,
+		onAdded: (row) => {
+			onAdded(row);
+			setRound(round + 1);
+		}
+	};
+	return /* @__PURE__ */ _jsxs(FoldCard, {
+		opened: empty,
+		title: "Add a connection",
+		note: "A platform account, or any MCP server",
+		children: [/* @__PURE__ */ _jsxs("div", {
+			class: "conn-add",
+			children: [/* @__PURE__ */ _jsx(Segmented, {
+				label: "What to connect",
+				options: KINDS,
+				value: kind,
+				onChange: setKind
+			}), /* @__PURE__ */ _jsx("p", {
+				class: "muted",
+				children: HELP[kind]
+			})]
+		}), kind === "platform" ? /* @__PURE__ */ _jsx(AddPlatform, {
+			...props,
+			catalog,
+			rows
+		}, round) : /* @__PURE__ */ _jsx(AddMcp, { ...props }, round)]
+	});
+}
+/** 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", {
+				class: "btn",
+				disabled: busy,
+				"aria-busy": busy,
+				children: "Save key"
+			}),
+			/* @__PURE__ */ _jsx("button", {
+				type: "button",
+				class: "btn ghost",
+				disabled: busy,
+				onClick: onClose,
+				children: "Cancel"
+			})
+		]
+	});
+}
+/** Every connection tasks can use, what each reaches, who it is for, its access and status. */
+export function ConnectionsList({ first, catalog, local, admin, operator }) {
+	const [rows, setRows] = useState(first.filter((row) => row.provider !== "env"));
+	const [keying, setKeying] = useState();
+	const action = useAction({ leaves: true });
+	const put = (row) => setRows((now) => now.some((each) => each.id === row.id) ? now.map((each) => each.id === row.id ? row : each) : [...now, row]);
+	const reconnect = (row) => {
+		if (row.auth === "key") return setKeying(row);
+		void action.run(row.id, async () => location.assign((await client.connections.authorize(row.id)).url));
+	};
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(AddConnection, {
+		catalog,
+		rows,
+		local,
+		admin,
+		operator,
+		empty: !first.some((row) => row.provider !== "env"),
+		onAdded: put
+	}), /* @__PURE__ */ _jsxs(Card, {
+		title: "Connections",
+		count: rows.length,
+		children: [rows.length ? /* @__PURE__ */ _jsx("div", {
+			class: "table-scroll",
+			children: /* @__PURE__ */ _jsx("table", {
+				class: "rows settings conns",
+				children: /* @__PURE__ */ _jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ _jsx(Row, {
+					title: row.name,
+					badges: /* @__PURE__ */ _jsxs("span", {
+						class: "conn-badges",
+						children: [
+							/* @__PURE__ */ _jsx(Badge, { children: row.owner ? row.mine ? "yours" : "member" : "workspace" }),
+							row.provider === "env" ? null : /* @__PURE__ */ _jsx(Badge, { children: row.access === "write" ? "read and write" : "read only" }),
+							/* @__PURE__ */ _jsx(Badge, {
+								tone: STATUS[row.status].tone,
+								children: STATUS[row.status].label
+							})
+						]
+					}),
+					sub: /* @__PURE__ */ _jsx(Reach, {
+						row,
+						catalog
+					}),
+					actions: row.status === "ok" ? null : /* @__PURE__ */ _jsx("button", {
+						type: "button",
+						class: "btn outline sm",
+						disabled: action.pending === row.id,
+						"aria-busy": action.pending === row.id,
+						onClick: () => reconnect(row),
+						children: "Reconnect"
+					}),
+					remove: {
+						title: `Remove ${row.name}?`,
+						body: "Tasks stop using it, and its key or sign-in is deleted.",
+						onRemove: () => client.connections.remove(row.id).then(() => setRows((now) => now.filter((each) => each.id !== row.id)), toastFailure)
+					}
+				}, row.id)) })
+			})
+		}) : /* @__PURE__ */ _jsx(Empty, {
+			title: "No connections yet",
+			children: "Add one above 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]
+	})] });
+}