@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]/connections-list.97381888bfdd711b.js

@@ -1,642 +0,0 @@
-"use client";
-import "./connections-list.46786fe36b121a43.css.pnext-asset.js";
-import { useEffect, useRef, useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { client } from "../../../../../utils/client.78267fa3d7905d17.js";
-import { toastFailure, useAction } from "../../../../../utils/action.67dd6f8ab1ae067d.js";
-import { Card, Empty, FoldCard, Loading } from "../../../../../comps/ui/card.9f0d45b73bc78b4f.js";
-import { reasonText } from "../../../../../utils/format.ceeaafa10a0563f3.js";
-import { Field } from "../../../../../comps/ui/field.75588c33b72824a7.js";
-import { Badge } from "../../../../../comps/ui/badge.c0bc352791a95fd6.js";
-import { MenuItem } from "../../../../../comps/ui/menu-items.1d082ac4dae8f3d4.js";
-import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
-import { iAlert } from "../../../../../comps/ui/icons.e36c72f54750663a.js";
-import { Button, LinkButton } from "../../../../../comps/ui/button.ce9e6cdb08ca86db.js";
-import { Segmented } from "../../../../../comps/ui/segmented.633abe26ff760e37.js";
-import { Select } from "../../../../../comps/ui/select.2eb33e5bea28d804.js";
-import { Search } from "../../../../../comps/ui/toolbar.8b3a460a65edf85a.js";
-import { BrandIcon } from "../../agents/agent/agent-pills.44e689e546fb042b.js";
-import { Row } from "./list.a5b273558fb7f0f0.js";
-import { useOrg } from "../../../../../comps/nav/org.d3abfd4053b711ce.js";
-import { Notice } from "../../../../../comps/ui/notice.f395f231cbb96445.js";
-import { CONNECTION_SCOPES } from "../model-options.73f8d0d54f79d8e3.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 DEFAULT = ["default", "Default"];
-const READ_ONLY = ["read", "Read-only"];
-const READ_WRITE = ["write", "Read-write"];
-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: CONNECTION_SCOPES,
-			value,
-			onChange
-		})
-	});
-}
-/** Default (the agent's mode), Read-only or Read-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 ? [DEFAULT, READ_WRITE] : [
-				DEFAULT,
-				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("default");
-	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 === "default" ? {} : { 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(LinkButton, {
-						variant: "outline",
-						size: "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, {
-					type: "submit",
-					disabled: !info?.connectable,
-					loading: 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("default");
-	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 !== "read" ? access : "default";
-	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
-			}), (reason) => console.error("coder dashboard: known servers", reason));
-			return;
-		}
-		setFound({ q });
-		void client.mcp.search(q.trim()).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",
-			...level === "default" ? {} : { 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, {
-							variant: "ghost",
-							size: "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,
-							late: true
-						})
-					}) : found.items.length ? found.items.map((server) => /* @__PURE__ */ _jsx(MenuItem, {
-						onClick: () => pick(server),
-						title: /* @__PURE__ */ _jsxs(_Fragment, { 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 })
-						] }),
-						sub: 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, {
-					type: "submit",
-					disabled: blocked,
-					loading: 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, {
-				type: "submit",
-				loading: busy,
-				children: "Save key"
-			}),
-			/* @__PURE__ */ _jsx(Button, {
-				variant: "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" }),
-							/* @__PURE__ */ _jsx(Badge, { children: row.access === "read" ? "Read-only" : row.access ? "Read-write" : "Default" }),
-							/* @__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, {
-						variant: "outline",
-						size: "sm",
-						loading: 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]
-	})] });
-}