@wular/coder 0.4.6 → 0.4.8

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/agents/editor/editor.9e1a0945f6880076.js

@@ -0,0 +1,733 @@
+"use client";
+import "./editor.d2e3bc878dcb47da.css.pnext-asset.js";
+// The preview is the same card the agents list draws.
+import "./@/app/dash/[org]/agents/(list)/page.81c825592da30a32.css.pnext-asset.js";
+import { useEffect, useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { client } from "../../../../../utils/client.d25e6dcc6704eb60.js";
+import { useAction } from "../../../../../utils/action.568346602027ac74.js";
+import { iDown, iPlus, iShuffle, iUpload } from "../../../../../comps/ui/icons.868385119bf2de28.js";
+import { useRouter } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
+import { useOrg } from "../../../../../comps/nav/org.813dc34bd23a336f.js";
+import { Link } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
+import { BrandIcon, DisabledBadge, PlatformLine } from "../agent/agent-pills.19e913c8cb22db21.js";
+import { Hero } from "../agent/hero.9de48723967d8546.js";
+import { Back, PageHead } from "../../../../../comps/frame/page-head.e5d2185c1cdac740.js";
+import { HEADS } from "../../../../../comps/frame/heads.20414ddcb2d08bcd.js";
+import { initial } from "../../../../../utils/format.6a7d1beaf4d09d9c.js";
+import { Field } from "../../../../../comps/ui/field.75588c33b72824a7.js";
+import { showToast, toastError } from "../../../../../comps/frame/task-toasts.4282affa47415a36.js";
+import { Badge } from "../../../../../comps/ui/badge.3d9163a51e6f6d6e.js";
+import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
+import { Select } from "../../../../../comps/ui/select.7f481669998074f8.js";
+import { Segmented } from "../../../../../comps/ui/segmented.5ac52bb38fb64ae5.js";
+import { Search } from "../../../../../comps/ui/toolbar.801bbd3163d3fbb0.js";
+import { ImportPicker } from "./import-picker.e54af9841da11373.js";
+import { markdown } from "../agent/instructions.6558ffd02a59ad53.js";
+import { ENGINE_NAMES, defaultLabel, modelHeadings, modelOptions, modelValue, splitModel } from "../../settings/model-options.2eacf7f8ac0032df.js";
+import { suggestName } from "./names.1ee5bba8d2b6ac41.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+const PERMISSIONS = [
+	["read-only", "Read only"],
+	["workspace-write", "Edit files"],
+	["auto", "Auto"]
+];
+const PERMISSION_HINTS = {
+	"read-only": "reads the repository and changes nothing",
+	"workspace-write": "edits files inside the repository",
+	auto: "edits files, reaches the network, and asks when it needs more"
+};
+const EFFORTS = [
+	["low", "Low"],
+	["medium", "Medium"],
+	["high", "High"]
+];
+const PRESETS = [
+	"observe",
+	"comment",
+	"write"
+];
+const ACCESS = {
+	observe: ["Observe", "reads the platform only"],
+	comment: ["Comment", "also replies and reacts"],
+	write: ["Write", "also changes code there, like opening pull requests"]
+};
+const TEMPLATES = [
+	[
+		"blank",
+		"Blank",
+		"start from nothing"
+	],
+	[
+		"helper",
+		"Slack helper",
+		"answers questions in chat"
+	],
+	[
+		"reviewer",
+		"GitHub reviewer",
+		"reviews pull requests"
+	]
+];
+/** A search over platforms shows once the catalog is longer than this. */
+const SEARCH_FROM = 6;
+const REVIEWER = "Review each pull request for bugs, risky changes and missing tests.\nComment on the lines that matter and keep it short.\nWhen mentioned, answer questions about the code and cite file paths.";
+const HELPER = "Answer the team's questions in the thread.\nRead the code before you answer, cite file paths, and say when you are unsure.\nIf asked to change code, describe the change and stop.";
+const eventNames = (events) => Array.isArray(events) ? events.map(String) : events && typeof events === "object" ? Object.keys(events) : [];
+const slug = (value) => value.toLowerCase().replace(/[^a-z0-9_-]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40);
+function draftOf(agent, suggested, catalog) {
+	const definition = agent?.definition;
+	const draft = {
+		name: agent?.name ?? suggested,
+		id: agent?.id ?? slug(suggested),
+		description: agent?.description ?? definition?.description ?? "",
+		platforms: [],
+		events: {},
+		match: {},
+		tools: {},
+		permissions: definition?.permissions ?? "read-only",
+		systemPrompt: agent?.systemPrompt ?? "",
+		engine: definition?.engine ?? "",
+		model: definition?.model ?? "",
+		effort: definition?.effort ?? ""
+	};
+	// A platform this server does not offer is left out, so publishing drops it.
+	for (const [id, entry] of Object.entries(definition?.integrations ?? {})) {
+		if (!catalog.some((info) => info.id === id)) continue;
+		draft.platforms.push(id);
+		draft.events[id] = eventNames(entry.events);
+		draft.match[id] = {};
+		if (entry.events && !Array.isArray(entry.events)) {
+			for (const [name, options] of Object.entries(entry.events)) if (options && typeof options === "object" && "match" in options) draft.match[id][name] = String(options.match);
+		}
+		draft.tools[id] = entry.tools;
+	}
+	return draft;
+}
+/** Every event a platform offers except the noisy ones (messages, comments), which the user opts into with a filter. */
+const defaultEvents = (info) => Object.entries(info?.events ?? {}).filter(([, spec]) => !spec.noisy).map(([name]) => name);
+/** What a template sets: where it listens, what wakes it, and its instructions. The name stays. */
+function fromTemplate(template, catalog) {
+	const listen = (pick) => {
+		const platforms = catalog.filter(pick).map((info) => info.id);
+		return {
+			platforms,
+			events: Object.fromEntries(platforms.map((id) => [id, defaultEvents(catalog.find((info) => info.id === id))])),
+			tools: Object.fromEntries(platforms.map((id) => [id, "comment"])),
+			match: {}
+		};
+	};
+	if (template === "reviewer") return {
+		...listen((info) => "pull_request" in info.events),
+		description: "Reviews pull requests and answers questions about the code.",
+		systemPrompt: REVIEWER
+	};
+	if (template === "helper") return {
+		...listen((info) => info.id === "slack"),
+		description: "Answers the team's questions in chat.",
+		systemPrompt: HELPER
+	};
+	return {
+		platforms: [],
+		events: {},
+		tools: {},
+		match: {},
+		description: "",
+		systemPrompt: ""
+	};
+}
+/** One platform's events: a plain list unless an event carries options, which are kept. */
+function eventsFor(previous, names, match) {
+	const before = previous?.events && !Array.isArray(previous.events) ? previous.events : {};
+	const built = Object.fromEntries(names.map((name) => {
+		const kept = before[name];
+		const text = match[name]?.trim();
+		const options = kept && typeof kept === "object" ? { ...kept } : {};
+		if (text) options.match = text;
+		else delete options.match;
+		if (Object.keys(options).length) return [name, options];
+		return [name, kept === undefined || typeof kept === "object" ? true : kept];
+	}));
+	return Object.values(built).every((value) => value === true) ? names : built;
+}
+const sameTools = (a = [], b = []) => a.length === b.length && a.every((tool) => b.includes(tool));
+/** A platform's access presets that each grant more than the one before; a single one means it has no levels. */
+function levelsOf(info) {
+	if (!info) return [];
+	const kept = PRESETS.filter((preset, at) => !at || !sameTools(info.presets[preset], info.presets[PRESETS[at - 1]]));
+	return kept.length > 1 ? kept : [];
+}
+/** The level a preset grants among `levels`: the highest one at or below it. */
+const levelOf = (levels, preset) => levels.filter((level) => PRESETS.indexOf(level) <= PRESETS.indexOf(preset)).at(-1) ?? "";
+/** Make a dashboard agent on one page, from a template or a repository, or edit one. Saving publishes a version. */
+export function AgentEditor({ catalog, agent, suggested = "", section, models, defaults = {
+	engine: "",
+	engines: {},
+	builtin: {}
+}, template: first, connected = false, connectLabel = "Connect", tunnel = false, port = "" }) {
+	const nav = useRouter();
+	const org = useOrg();
+	const creating = !agent;
+	const [template, setTemplate] = useState(first ?? "blank");
+	const [draft, setDraft] = useState(() => ({
+		...draftOf(agent, suggested, catalog),
+		...creating ? fromTemplate(first ?? "blank", catalog) : {}
+	}));
+	const [idTouched, setIdTouched] = useState(false);
+	const [writing, setWriting] = useState("write");
+	const [query, setQuery] = useState("");
+	const action = useAction({
+		toast: creating ? "Agent not created" : "Not published",
+		leaves: true
+	});
+	const busy = Boolean(action.pending);
+	const set = (key, value) => setDraft((current) => ({
+		...current,
+		[key]: value
+	}));
+	const access = (id, tools = draft.tools[id]) => Array.isArray(tools) ? "custom" : tools ?? "observe";
+	const shared = draft.platforms.length ? access(draft.platforms[0]) : "comment";
+	const uniform = draft.platforms.every((id) => access(id) === shared);
+	const leveled = draft.platforms.map((id) => [id, levelsOf(catalog.find((entry) => entry.id === id))]).filter(([, kept]) => kept.length);
+	const levels = PRESETS.filter((preset) => leveled.some(([, kept]) => kept.includes(preset)));
+	const picked = new Set(leveled.map(([id]) => access(id)));
+	const level = picked.size === 1 ? levelOf(levels, [...picked][0]) : "";
+	const aliasOf = (engine, model) => Object.entries(defaults.builtin[engine] ?? {}).find(([, target]) => target === model)?.[0] ?? model;
+	const engine = draft.engine || defaults.engine;
+	const base = defaults.engines[engine] ?? {};
+	const fallback = [ENGINE_NAMES[defaults.engine] ?? defaults.engine, aliasOf(defaults.engine, defaults.engines[defaults.engine]?.model)].filter(Boolean).join(" · ");
+	const permission = PERMISSIONS.find(([key]) => key === draft.permissions);
+	const repoAccess = permission?.[1].toLowerCase();
+	const run = creating ? "you can change these later in its settings" : (draft.engine || draft.model || draft.effort ? [
+		ENGINE_NAMES[engine] ?? engine,
+		draft.model || aliasOf(engine, base.model),
+		draft.effort || base.effort,
+		repoAccess
+	] : ["Default models", repoAccess]).filter(Boolean).join(" · ");
+	useEffect(() => {
+		if (!section) return;
+		const target = document.getElementById(`agent-${section}`);
+		target?.scrollIntoView({ block: "start" });
+		target?.querySelector("input, textarea, button")?.focus({ preventScroll: true });
+	}, []);
+	const pickTemplate = (next) => {
+		setTemplate(next);
+		if (next !== "import") setDraft((current) => ({
+			...current,
+			...fromTemplate(next, catalog)
+		}));
+	};
+	const rename = (name) => setDraft((current) => ({
+		...current,
+		name,
+		...creating && !idTouched ? { id: slug(name) } : {}
+	}));
+	const togglePlatform = (id, on) => setDraft((current) => {
+		const names = Object.keys(catalog.find((entry) => entry.id === id)?.events ?? {});
+		return {
+			...current,
+			platforms: on ? catalog.map((entry) => entry.id).filter((key) => key === id || current.platforms.includes(key)) : current.platforms.filter((key) => key !== id),
+			events: on && !current.events[id]?.length ? {
+				...current.events,
+				[id]: defaultEvents(catalog.find((entry) => entry.id === id))
+			} : current.events,
+			tools: on && !current.tools[id] ? {
+				...current.tools,
+				[id]: uniform && shared !== "custom" ? shared : "comment"
+			} : current.tools
+		};
+	});
+	const toggleEvent = (id, event, on) => setDraft((current) => {
+		const list = current.events[id] ?? [];
+		const match = on ? current.match : {
+			...current.match,
+			[id]: {
+				...current.match[id],
+				[event]: ""
+			}
+		};
+		return {
+			...current,
+			events: {
+				...current.events,
+				[id]: on ? [...new Set([...list, event])] : list.filter((name) => name !== event)
+			},
+			match
+		};
+	});
+	const setMatch = (id, event, text) => setDraft((current) => ({
+		...current,
+		match: {
+			...current.match,
+			[id]: {
+				...current.match[id],
+				[event]: text
+			}
+		}
+	}));
+	const submit = async () => {
+		const silent = draft.platforms.find((id) => !draft.events[id]?.length);
+		if (silent) return toastError("Not published", `Pick at least one event on ${silent}, or turn ${silent} off.`);
+		const integrations = {};
+		for (const id of draft.platforms) integrations[id] = {
+			events: eventsFor(agent?.definition?.integrations?.[id], draft.events[id] ?? [], draft.match[id] ?? {}),
+			tools: draft.tools[id]
+		};
+		const definition = {
+			...agent?.definition,
+			integrations,
+			permissions: draft.permissions
+		};
+		for (const key of [
+			"name",
+			"description",
+			"engine",
+			"model",
+			"effort"
+		]) {
+			const value = draft[key].trim();
+			if (value) definition[key] = value;
+			else delete definition[key];
+		}
+		const id = creating ? draft.id : agent.id;
+		const name = draft.name.trim();
+		await action.run("publish", async () => {
+			const files = agent?.files;
+			const { apps = [] } = await client.agents.put(id, {
+				definition,
+				...files ? { files } : {},
+				systemPrompt: draft.systemPrompt.trim() ? draft.systemPrompt : `You are ${name || id}.\n`,
+				...name ? { name } : {},
+				...draft.description.trim() ? { description: draft.description.trim() } : {}
+			});
+			for (const app of apps) {
+				const platform = catalog.find((info) => info.id === app.integration)?.name ?? app.integration;
+				if (app.updated) showToast(`${platform} app updated`, `${app.name} now matches the agent.`, "success");
+				if (app.error) toastError(`${platform} app not updated`, app.error);
+			}
+			// Apps that need changes on their platform open there, one dialog each.
+			const update = apps.filter((app) => app.drift).map((app) => app.id);
+			if (update.length) nav.push("/dash/[org]/agents/[slug]/platforms", {
+				params: {
+					org,
+					slug: id
+				},
+				search: { update: update.join(",") }
+			});
+			else if (creating && draft.platforms.length) nav.push("/dash/[org]/agents/[slug]/platforms", { params: {
+				org,
+				slug: id
+			} });
+			else nav.push("/dash/[org]/agents/[slug]", { params: {
+				org,
+				slug: id
+			} });
+		});
+	};
+	const actions = /* @__PURE__ */ _jsxs(_Fragment, { children: [
+		creating ? /* @__PURE__ */ _jsx("button", {
+			type: "button",
+			class: "btn outline",
+			"aria-pressed": template === "import",
+			onClick: () => pickTemplate("import"),
+			children: "Import from repo"
+		}) : null,
+		creating ? null : /* @__PURE__ */ _jsx(Link, {
+			class: "btn ghost",
+			href: "/dash/[org]/agents/[slug]",
+			params: {
+				org,
+				slug: agent.id
+			},
+			children: "Cancel"
+		}),
+		/* @__PURE__ */ _jsxs("button", {
+			class: "btn",
+			disabled: busy || !draft.name.trim() || template === "import",
+			"aria-busy": busy,
+			children: [/* @__PURE__ */ _jsx(Icon, { d: creating ? iPlus : iUpload }), creating ? "Create agent" : "Publish new version"]
+		})
+	] });
+	const head = creating ? /* @__PURE__ */ _jsx(PageHead, {
+		...HEADS.newAgent,
+		back: /* @__PURE__ */ _jsx(Back, {
+			href: "/dash/[org]/agents",
+			params: { org },
+			label: "Agents"
+		}),
+		actions
+	}) : /* @__PURE__ */ _jsx(Hero, {
+		agent,
+		back: /* @__PURE__ */ _jsx(Back, {
+			href: "/dash/[org]/agents/[slug]",
+			params: {
+				org,
+				slug: agent.id
+			},
+			label: agent.name
+		}),
+		actions
+	});
+	const templates = creating ? /* @__PURE__ */ _jsx("div", {
+		class: "templates",
+		role: "radiogroup",
+		"aria-label": "Start from",
+		children: TEMPLATES.map(([key, label, hint]) => /* @__PURE__ */ _jsxs("button", {
+			type: "button",
+			role: "radio",
+			"aria-checked": template === key,
+			class: "tile",
+			onClick: () => pickTemplate(key),
+			children: [/* @__PURE__ */ _jsx("b", { children: label }), /* @__PURE__ */ _jsx("small", { children: hint })]
+		}, key))
+	}) : null;
+	if (template === "import" && creating) return /* @__PURE__ */ _jsxs("div", {
+		class: "agent-new",
+		children: [
+			head,
+			templates,
+			/* @__PURE__ */ _jsx(ImportPicker, {
+				connected,
+				connectLabel,
+				tunnel,
+				port
+			})
+		]
+	});
+	const needle = query.trim().toLowerCase();
+	const matches = catalog.filter((info) => `${info.id} ${info.description}`.toLowerCase().includes(needle));
+	// Featured and picked platforms first.
+	const upFront = (info) => !!info.featured || draft.platforms.includes(info.id);
+	const shown = [...matches.filter(upFront), ...matches.filter((info) => !upFront(info))];
+	return /* @__PURE__ */ _jsxs("form", {
+		class: "agent-new",
+		onSubmit: (event) => {
+			event.preventDefault();
+			void submit();
+		},
+		children: [
+			head,
+			templates,
+			/* @__PURE__ */ _jsxs("div", {
+				class: "agent-form",
+				children: [/* @__PURE__ */ _jsxs("div", {
+					class: "agent-main",
+					children: [
+						/* @__PURE__ */ _jsxs("section", {
+							id: "agent-name",
+							class: "form-part",
+							children: [
+								/* @__PURE__ */ _jsx("h2", { children: "Name and description" }),
+								/* @__PURE__ */ _jsxs("div", {
+									class: "fields",
+									children: [/* @__PURE__ */ _jsx(Field, {
+										label: "Name",
+										hint: "its handle on every platform",
+										children: /* @__PURE__ */ _jsxs("span", {
+											class: "with-btn",
+											children: [/* @__PURE__ */ _jsx("input", {
+												name: "name",
+												required: true,
+												value: draft.name,
+												onInput: (event) => rename(event.currentTarget.value)
+											}), creating ? /* @__PURE__ */ _jsxs("button", {
+												type: "button",
+												class: "btn outline",
+												title: "Suggest another name",
+												onClick: () => rename(suggestName()),
+												children: [/* @__PURE__ */ _jsx(Icon, { d: iShuffle }), "Suggest"]
+											}) : null]
+										})
+									}), creating ? /* @__PURE__ */ _jsx(Field, {
+										label: "Id",
+										hint: "the folder and command name",
+										children: /* @__PURE__ */ _jsx("input", {
+											class: "mono",
+											name: "id",
+											required: true,
+											pattern: "[a-z0-9][a-z0-9_\\-]*",
+											autocomplete: "off",
+											value: draft.id,
+											onInput: (event) => {
+												setIdTouched(true);
+												set("id", event.currentTarget.value);
+											}
+										})
+									}) : /* @__PURE__ */ _jsxs("div", {
+										class: "field",
+										children: [/* @__PURE__ */ _jsxs("span", { children: ["Id ", /* @__PURE__ */ _jsx("small", { children: "fixed once created" })] }), /* @__PURE__ */ _jsx("p", {
+											class: "fixed mono",
+											children: agent.id
+										})]
+									})]
+								}),
+								/* @__PURE__ */ _jsx(Field, {
+									label: "Description",
+									hint: "optional, shown in lists and added to the prompt",
+									children: /* @__PURE__ */ _jsx("input", {
+										name: "description",
+										maxLength: 240,
+										placeholder: "Answers engineering questions about acme/app.",
+										value: draft.description,
+										onInput: (event) => set("description", event.currentTarget.value)
+									})
+								})
+							]
+						}),
+						/* @__PURE__ */ _jsxs("section", {
+							id: "agent-instructions",
+							class: "form-part",
+							children: [/* @__PURE__ */ _jsxs("div", {
+								class: "part-head",
+								children: [/* @__PURE__ */ _jsx("h2", { children: "Instructions" }), /* @__PURE__ */ _jsx(Segmented, {
+									label: "Instructions view",
+									options: [["write", "Write"], ["preview", "Preview"]],
+									value: writing,
+									onChange: setWriting
+								})]
+							}), writing === "write" ? /* @__PURE__ */ _jsx("textarea", {
+								name: "systemPrompt",
+								rows: 10,
+								"aria-label": "Instructions",
+								placeholder: "Markdown. The system prompt every task starts from.\nYou answer questions about acme/app from its source. Cite file paths.",
+								value: draft.systemPrompt,
+								onInput: (event) => set("systemPrompt", event.currentTarget.value)
+							}) : /* @__PURE__ */ _jsx("div", {
+								class: "body md md-preview",
+								children: draft.systemPrompt.trim() ? markdown(draft.systemPrompt) : /* @__PURE__ */ _jsx("p", {
+									class: "muted",
+									children: "Nothing written yet."
+								})
+							})]
+						}),
+						/* @__PURE__ */ _jsxs("section", {
+							id: "agent-platforms",
+							class: "form-part",
+							children: [
+								/* @__PURE__ */ _jsxs("div", {
+									class: "part-head",
+									onKeyDown: (event) => event.key === "Enter" && event.preventDefault(),
+									children: [/* @__PURE__ */ _jsx("h2", { children: "Handles" }), catalog.length > SEARCH_FROM ? /* @__PURE__ */ _jsx(Search, {
+										value: query,
+										label: "Search platforms",
+										onInput: setQuery
+									}) : null]
+								}),
+								/* @__PURE__ */ _jsxs("p", {
+									class: "muted",
+									children: [
+										"Each platform becomes the agent's handle there: its own app, set up on the next page, where ",
+										/* @__PURE__ */ _jsx("span", {
+											class: "semi",
+											children: "@mentions"
+										}),
+										" and events start tasks. The dashboard, the CLI and the SDK can always start it."
+									]
+								}),
+								/* @__PURE__ */ _jsxs("p", {
+									class: "muted",
+									children: [
+										/* @__PURE__ */ _jsx("b", { children: "Connections" }),
+										" are separate and shared by all agents: add as many as tasks need, like an API key, an MCP server or a member's own account, in",
+										" ",
+										/* @__PURE__ */ _jsx(Link, {
+											class: "link",
+											href: "/dash/[org]/settings/[tab]",
+											params: {
+												org,
+												tab: "connections"
+											},
+											children: "Settings"
+										}),
+										"."
+									]
+								}),
+								/* @__PURE__ */ _jsxs("ul", {
+									class: "listen",
+									children: [shown.map((info) => {
+										const on = draft.platforms.includes(info.id);
+										const ticked = draft.events[info.id] ?? [];
+										const events = Object.entries(info.events);
+										return /* @__PURE__ */ _jsxs("li", {
+											class: on ? "on" : undefined,
+											children: [/* @__PURE__ */ _jsxs("label", {
+												class: "listen-row",
+												children: [
+													/* @__PURE__ */ _jsx("span", {
+														class: "pf-mark",
+														"aria-hidden": "true",
+														children: /* @__PURE__ */ _jsx(BrandIcon, { brand: info.brand })
+													}),
+													/* @__PURE__ */ _jsxs("span", {
+														class: "grow",
+														children: [/* @__PURE__ */ _jsx("b", { children: info.name }), /* @__PURE__ */ _jsx("small", {
+															title: info.description,
+															children: info.description
+														})]
+													}),
+													/* @__PURE__ */ _jsx("input", {
+														type: "checkbox",
+														role: "switch",
+														class: "switch",
+														name: "platform",
+														value: info.id,
+														checked: on,
+														onChange: (event) => togglePlatform(info.id, event.currentTarget.checked)
+													})
+												]
+											}), on ? /* @__PURE__ */ _jsxs("div", {
+												class: "events",
+												children: [/* @__PURE__ */ _jsx("div", {
+													class: "chips",
+													role: "group",
+													"aria-label": `What wakes it on ${info.id}`,
+													children: events.map(([event, spec]) => {
+														const pressed = ticked.includes(event);
+														return /* @__PURE__ */ _jsx("button", {
+															type: "button",
+															class: "chip",
+															"aria-pressed": pressed,
+															title: spec.description,
+															onClick: () => toggleEvent(info.id, event, !pressed),
+															children: event.replace(/_/g, " ")
+														}, event);
+													})
+												}), events.filter(([event, spec]) => spec.noisy && ticked.includes(event)).map(([event]) => /* @__PURE__ */ _jsxs("label", {
+													class: "match",
+													children: [/* @__PURE__ */ _jsx("span", { children: event.replace(/_/g, " ") }), /* @__PURE__ */ _jsx("input", {
+														class: "mono",
+														name: `match:${info.id}:${event}`,
+														placeholder: "only when the text matches, like ^help\\b",
+														"aria-label": `Text filter for ${event} on ${info.id}`,
+														value: draft.match[info.id]?.[event] ?? "",
+														onInput: (e) => setMatch(info.id, event, e.currentTarget.value)
+													})]
+												}, event))]
+											}) : null]
+										}, info.id);
+									}), shown.length ? null : /* @__PURE__ */ _jsx("li", {
+										class: "listen-none muted",
+										children: "No platform matches."
+									})]
+								}),
+								levels.length ? /* @__PURE__ */ _jsx(Field, {
+									label: "Platform access",
+									hint: ACCESS[level]?.[1] ?? "differs between platforms",
+									group: true,
+									children: /* @__PURE__ */ _jsx(Segmented, {
+										label: "Platform access",
+										options: levels.map((preset) => [preset, ACCESS[preset][0]]),
+										value: level,
+										onChange: (preset) => set("tools", Object.fromEntries(draft.platforms.map((id) => [id, preset])))
+									})
+								}) : null
+							]
+						}),
+						/* @__PURE__ */ _jsxs("details", {
+							id: "agent-run",
+							class: "form-part run",
+							open: section === "run",
+							children: [/* @__PURE__ */ _jsxs("summary", { children: [
+								/* @__PURE__ */ _jsx("h2", { children: "Run settings" }),
+								/* @__PURE__ */ _jsx("span", {
+									class: "grow muted",
+									children: run
+								}),
+								/* @__PURE__ */ _jsx(Icon, { d: iDown })
+							] }), /* @__PURE__ */ _jsxs("div", {
+								class: "run-body",
+								children: [/* @__PURE__ */ _jsxs("div", {
+									class: "fields",
+									children: [/* @__PURE__ */ _jsx(Field, {
+										label: "Engine and model",
+										hint: "what runs each task",
+										group: true,
+										children: /* @__PURE__ */ _jsx(Select, {
+											label: "Model",
+											value: modelValue(draft.engine, draft.model),
+											options: modelOptions(models, defaultLabel(fallback)),
+											headings: modelHeadings(models),
+											action: {
+												label: "Add models",
+												icon: iPlus,
+												onPick: () => nav.push("/dash/[org]/settings/[tab]", { params: {
+													org,
+													tab: "models"
+												} })
+											},
+											onChange: (value) => setDraft((current) => ({
+												...current,
+												...splitModel(value)
+											}))
+										})
+									}), /* @__PURE__ */ _jsx(Field, {
+										label: "Effort",
+										hint: "how hard the model thinks",
+										group: true,
+										children: /* @__PURE__ */ _jsx(Segmented, {
+											label: "Effort",
+											options: [["", defaultLabel(base.effort)], ...EFFORTS],
+											value: draft.effort,
+											onChange: (value) => set("effort", value)
+										})
+									})]
+								}), /* @__PURE__ */ _jsx(Field, {
+									label: "Repository access",
+									hint: PERMISSION_HINTS[draft.permissions],
+									group: true,
+									children: /* @__PURE__ */ _jsx(Segmented, {
+										label: "Repository access",
+										options: PERMISSIONS,
+										value: draft.permissions,
+										onChange: (value) => set("permissions", value)
+									})
+								})]
+							})]
+						})
+					]
+				}), /* @__PURE__ */ _jsxs("aside", {
+					class: "agent-side",
+					"aria-label": "Preview",
+					children: [/* @__PURE__ */ _jsx("span", {
+						class: "side-label",
+						children: "Preview"
+					}), /* @__PURE__ */ _jsxs("div", {
+						class: "agent-card preview",
+						children: [
+							/* @__PURE__ */ _jsxs("div", {
+								class: "bc-head",
+								children: [/* @__PURE__ */ _jsx("span", {
+									class: "mark",
+									children: initial(draft.name)
+								}), /* @__PURE__ */ _jsxs("div", {
+									class: "grow",
+									children: [/* @__PURE__ */ _jsx("h3", { children: draft.name.trim() || "Unnamed agent" }), /* @__PURE__ */ _jsxs("span", {
+										class: "pills",
+										children: [
+											/* @__PURE__ */ _jsx(Badge, { children: "dashboard" }),
+											agent?.local ? null : /* @__PURE__ */ _jsxs(Badge, { children: ["v", creating ? 1 : agent.currentVersion + 1] }),
+											agent?.settings?.disabled ? /* @__PURE__ */ _jsx(DisabledBadge, {}) : null
+										]
+									})]
+								})]
+							}),
+							/* @__PURE__ */ _jsx("div", {
+								class: "lead-clamp",
+								children: /* @__PURE__ */ _jsx("span", { children: draft.description.trim() || "No description yet." })
+							}),
+							draft.platforms.length ? /* @__PURE__ */ _jsx(PlatformLine, {
+								platforms: draft.platforms.map((id) => ({
+									id,
+									state: "none"
+								})),
+								catalog
+							}) : /* @__PURE__ */ _jsx("span", {
+								class: "pfs muted",
+								children: "No handles yet"
+							})
+						]
+					})]
+				})]
+			})
+		]
+	});
+}