@wular/coder 0.4.2 → 0.4.4

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/tasks/composer.78b7d3000d615c7c.js

@@ -0,0 +1,730 @@
+"use client";
+import "./composer.41721fb98004e79e.css.pnext-asset.js";
+import { Fragment } from "../../../../../../../../node_modules/preact/dist/preact.mjs";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { client } from "../../../utils/client.f37a313f4811ddb8.js";
+import { formatDate } from "../../../utils/format.ba382c381ea40e77.js";
+import { iAlert, iCheck, iPlus, iRight, iSliders, iSteer, iX } from "../../../comps/ui/icons.e17bdd0b5504787f.js";
+import { Link } from "../../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
+import { useRouter } from "../../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
+import { Loading } from "../../../comps/ui/card.e6876039e375b849.js";
+import { reasonText } from "../../../utils/format.ba382c381ea40e77.js";
+import { ErrorText } from "../../../comps/ui/field.37f93068217e1470.js";
+import { Icon } from "../../../comps/ui/icon.93605083edf7efe3.js";
+import { Select } from "../../../comps/ui/select.14e820c8a26ab8b5.js";
+import { MenuRadio } from "../../../comps/ui/menu.3b3026ecd4dc31f0.js";
+import { connectRepositories } from "../agents/editor/connect-repositories.6c7088fd2fcd54f4.js";
+import { ENGINES, ENGINE_NAMES, defaultLabel, modelValue, splitModel } from "../settings/model-options.2ca6c87aedf3588c.js";
+import { folderName } from "./list/task.674ebeabafa0a7e1.js";
+import { watchTask } from "../../../comps/frame/task-toasts.b14bb1f66ed75e75.js";
+import { CHOICE, PLACEHOLDER, loadComposer, savedChoice } from "./composer-data.e2d442d6ecbaa6d3.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+const EFFORTS = [
+	["", "Default"],
+	["low", "Low"],
+	["medium", "Medium"],
+	["high", "High"]
+];
+const PERMISSIONS = [
+	["", "Default"],
+	["read-only", "Read-only"],
+	["workspace-write", "Write"],
+	["auto", "Auto"]
+];
+const DRAFT = "coder:draft";
+const CONNECT = "+connect";
+const OTHER = "+other";
+const PICK = "+pick";
+const CLONE = "+clone";
+/** `/review 40` or `/flow release pr=12`: the command, its first word, and the rest. */
+const COMMAND = /^\/(review|flow)(?:\s+(\S+))?\s*([\s\S]*)$/;
+/** A select's options: its unset value, then the picked value, then the rest, so it shows its label before the list loads. */
+const optionsOf = (fallback, value, values) => [["", fallback], ...[...new Set([value, ...values])].filter(Boolean).map((each) => [each, each])];
+// Named choices; a value the list lacks still shows, as itself.
+const named = (fallback, value, values) => [
+	["", fallback],
+	...value && !values.some(([id]) => id === value) ? [[value, value]] : [],
+	...values
+];
+/** Unset runs in the server's own folder; then recent and chosen ones, then the machine's dialog or a path box, then a repository URL box. A saved folder the list lacks still shows. */
+const folderOptions = (folders, added, value) => {
+	const paths = [...folders.recent, ...added].map((each) => each.path);
+	return [
+		["", "No folder"],
+		...[...new Set([...paths, value])].filter((path) => path && path !== folders.current.path).map((path) => [path, folderName(path)]),
+		folders.picker ? [PICK, "Choose…"] : [OTHER, "Type a path…"],
+		[CLONE, "Repository…"]
+	];
+};
+/** Segments whose unset first one names the value it resolves to. */
+/** The chain.s default first, then one section per engine: its own default and its models. */
+function modelSections(groups, defaults) {
+	const sections = [["", [["", `Default · ${[ENGINE_NAMES[defaults.engine] ?? defaults.engine, defaults.engines[defaults.engine]?.model].filter(Boolean).join(" ")}`]]]];
+	for (const engine of ENGINES) {
+		if (!groups[engine]?.length) continue;
+		sections.push([ENGINE_NAMES[engine] ?? engine, [[modelValue(engine, ""), defaultLabel(defaults.engines[engine]?.model)], ...groups[engine].map((model) => [modelValue(engine, model), model])]]);
+	}
+	return sections;
+}
+const resolved = (options, value) => {
+	const label = options.find(([key]) => key && key === value)?.[1];
+	return [["", defaultLabel(label?.toLowerCase())], ...options.slice(1)];
+};
+/** Places an opening popover under its button, right-aligned to it. */
+function place(event) {
+	const pop = event.currentTarget;
+	const box = document.querySelector(`[popovertarget="${pop.id}"]`)?.getBoundingClientRect();
+	if (event.newState !== "open" || !box) return;
+	const top = Math.round(box.bottom + 6);
+	pop.style.top = `${top}px`;
+	pop.style.right = `${Math.round(document.documentElement.clientWidth - box.right)}px`;
+	// The menu scrolls inside the viewport instead of running off it.
+	pop.style.maxHeight = `${Math.max(160, window.innerHeight - top - 16)}px`;
+}
+/** `key=value` pairs; a value that reads as JSON keeps its type, a bare key is true. */
+function argsOf(text) {
+	return Object.fromEntries(text.split(/\s+/).filter(Boolean).map((pair) => {
+		const at = pair.indexOf("=");
+		const raw = at < 0 ? "true" : pair.slice(at + 1);
+		try {
+			return [at < 0 ? pair : pair.slice(0, at), JSON.parse(raw)];
+		} catch {
+			return [pair.slice(0, at), raw];
+		}
+	}));
+}
+/** Rows under a combobox; the field keeps focus, so the mouse never takes it. */
+function Entries({ id, entries, active, selected, onActive }) {
+	return /* @__PURE__ */ _jsx(_Fragment, { children: entries.flatMap((entry, index) => [entry.head ? /* @__PURE__ */ _jsx("div", {
+		class: "pop-label",
+		role: "presentation",
+		children: entry.head
+	}, `h:${entry.key}`) : null, /* @__PURE__ */ _jsxs("div", {
+		id: `${id}-${index}`,
+		role: "option",
+		"aria-selected": selected === undefined ? index === active : entry.key === selected,
+		class: index === active ? "pop-item on" : "pop-item",
+		onMouseDown: (event) => event.preventDefault(),
+		onPointerMove: () => index !== active && onActive(index),
+		onClick: entry.pick,
+		children: [
+			/* @__PURE__ */ _jsx("span", {
+				class: "grow",
+				children: entry.label
+			}),
+			entry.hint ? /* @__PURE__ */ _jsx("small", { children: entry.hint }) : null,
+			selected === undefined ? null : /* @__PURE__ */ _jsx(Icon, { d: iCheck })
+		]
+	}, entry.key)]) });
+}
+/** Arrows move through `count` rows and wrap; returns whether the key was one of them. */
+const stepped = (event, at, count, move) => {
+	const step = {
+		ArrowDown: 1,
+		ArrowUp: -1
+	}[event.key];
+	if (!step || !count) return false;
+	event.preventDefault();
+	move((at + step + count) % count);
+	return true;
+};
+/** A credential link that comes back here with the draft kept. */
+export function NeedsCredential({ reason, back = "/dash/tasks" }) {
+	return /* @__PURE__ */ _jsxs("div", {
+		class: "notice slim",
+		role: "status",
+		children: [
+			/* @__PURE__ */ _jsx(Icon, { d: iAlert }),
+			/* @__PURE__ */ _jsx("span", {
+				class: "grow",
+				children: reason || "Tasks need a model credential to run."
+			}),
+			/* @__PURE__ */ _jsx(Link, {
+				class: "btn outline sm",
+				href: "/dash/settings/[tab]",
+				params: { tab: "credentials" },
+				search: { return: back },
+				children: "Add credential"
+			})
+		]
+	});
+}
+/** The dashboard's one box: type and press Enter to start a task, or `/` for reviews and flows. */
+export function Composer({ initial, data, defaults, missing, connectLabel, tz }) {
+	const nav = useRouter();
+	const [choice, setChoice] = useState({
+		...CHOICE,
+		...initial
+	});
+	const [lists, setLists] = useState(data);
+	const [pulls, setPulls] = useState();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState("");
+	// Why no credential can run it, once a start says so.
+	const [needs, setNeeds] = useState();
+	// The model row whose effort choices are open.
+	const [expanded, setExpanded] = useState();
+	const [text, setText] = useState("");
+	const [dismissed, setDismissed] = useState(false);
+	const [at, setAt] = useState(0);
+	// Folders checked this session; `typing` swaps the Folder select for a path or repository URL box.
+	const [added, setAdded] = useState([]);
+	const [typing, setTyping] = useState("");
+	const [cloning, setCloning] = useState(false);
+	const form = useRef(null);
+	const box = useRef(null);
+	const slash = useRef(null);
+	const path = useRef(null);
+	const id = useId();
+	useEffect(() => void (typing && path.current?.focus()), [typing]);
+	useEffect(() => {
+		const draft = localStorage.getItem(DRAFT);
+		if (draft && box.current && !box.current.value) box.current.value = draft;
+		setText(box.current?.value ?? "");
+		box.current?.focus();
+		// A restored draft waits for typing before its slash menu opens.
+		setDismissed(true);
+	}, []);
+	// The repository's open pull requests and its own flows, once a command is being typed.
+	const commanding = text.startsWith("/");
+	useEffect(() => {
+		const repo = choice.repo;
+		if (!commanding || !repo || pulls?.repo === repo) return;
+		setPulls({ repo });
+		void client.pulls.list(repo).then((items) => setPulls({
+			repo,
+			items
+		})).catch((reason) => {
+			setPulls({
+				repo,
+				items: []
+			});
+			setError(reasonText(reason));
+		});
+		void client.flows.list(repo).then((flows) => setLists((current) => ({
+			...current,
+			flows: flows.map((flow) => flow.name)
+		}))).catch(() => {});
+	}, [commanding, choice.repo]);
+	const pick = (key, value) => {
+		if (value === OTHER) return setTyping("path");
+		if (value === CLONE) return setTyping("url");
+		if (value === PICK) return void pickFolder();
+		if (value === CONNECT) return void connectRepositories("/dash/tasks").catch((reason) => setError(reasonText(reason)));
+		apply({ [key]: value });
+		if (key === "repo" || key === "cwd") box.current?.focus({ preventScroll: true });
+	};
+	const apply = (change) => {
+		const next = {
+			...choice,
+			...change
+		};
+		setChoice(next);
+		document.cookie = `compose=${encodeURIComponent(JSON.stringify(next))}; path=/; max-age=31536000; samesite=lax`;
+	};
+	const chose = (checked) => {
+		if (!checked.ok) return setError(checked.detail);
+		setError("");
+		setTyping("");
+		setAdded((current) => [...current.filter((each) => each.path !== checked.folder.path), checked.folder]);
+		pick("cwd", checked.folder.path === lists.folders?.current.path ? "" : checked.folder.path);
+	};
+	const checkFolder = async (path) => {
+		if (!path.trim()) return;
+		chose(await client.folders.check(path.trim()).catch((reason) => ({
+			ok: false,
+			detail: reasonText(reason)
+		})));
+	};
+	// The dialog opens on the server's machine; the cursor waits for it, and closing it changes nothing here.
+	const pickFolder = async () => {
+		document.body.style.cursor = "progress";
+		const picked = await client.folders.pick().catch((reason) => ({
+			ok: false,
+			detail: reasonText(reason)
+		}));
+		document.body.style.cursor = "";
+		if (picked.ok || picked.detail) chose(picked);
+	};
+	const cloneFolder = async (url) => {
+		if (!url.trim()) return;
+		setCloning(true);
+		document.body.style.cursor = "progress";
+		const cloned = await client.folders.clone(url.trim()).catch((reason) => ({
+			ok: false,
+			detail: reasonText(reason)
+		}));
+		document.body.style.cursor = "";
+		setCloning(false);
+		chose(cloned);
+	};
+	const draft = (value) => {
+		const field = box.current;
+		field.value = value;
+		localStorage.setItem(DRAFT, value);
+		setText(value);
+		setAt(0);
+		setDismissed(false);
+		field.focus();
+		field.setSelectionRange(value.length, value.length);
+	};
+	const start = async (pr) => {
+		const text = box.current?.value.trim() ?? "";
+		if (busy || cloning || !(text || pr)) return;
+		const [, command, name = "", args = ""] = COMMAND.exec(text) ?? [];
+		if (!pr && command && !(command === "flow" ? name : /^#?\d+$/.test(name))) return void setDismissed(false);
+		const review = pr ?? (command === "review" ? Number(name.replace("#", "")) : undefined);
+		if (review && !choice.repo) return setError("Pick a repository first.");
+		const { agent, engine, model, effort, permissions, runner } = choice;
+		const [repo, cwd] = lists.folders ? ["", choice.cwd] : [choice.repo, ""];
+		const fields = Object.fromEntries(Object.entries({
+			repo,
+			cwd,
+			engine,
+			model,
+			effort,
+			permissions,
+			runner
+		}).filter(([, value]) => value));
+		setBusy(true);
+		setError("");
+		try {
+			const created = review ? await client.review({
+				...fields,
+				repo: choice.repo,
+				pr: review
+			}) : command === "flow" ? await client.flows.run(name, {
+				...fields,
+				agent,
+				args: argsOf(args)
+			}) : await client.tasks.create({
+				...fields,
+				agent,
+				prompt: text
+			});
+			if (!pr || command) localStorage.removeItem(DRAFT);
+			watchTask(created.task.id, "queued", text || `Review of #${review}`);
+			nav.push("/dash/tasks/[id]", { params: { id: created.task.id } });
+		} catch (reason) {
+			setBusy(false);
+			if (reason.status === 409) setNeeds(reasonText(reason));
+			else setError(reasonText(reason));
+		}
+	};
+	// The slash menu for what is typed so far: commands, then a flow, a repository or a pull request.
+	const menu = (() => {
+		const word = /^\/(\S*)$/.exec(text)?.[1]?.toLowerCase();
+		if (word !== undefined) return {
+			label: "Commands",
+			entries: [{
+				key: "review",
+				label: "/review",
+				hint: "Review a pull request",
+				pick: () => draft("/review ")
+			}, ...lists.flows.map((flow) => ({
+				key: `flow ${flow}`,
+				label: `/flow ${flow}`,
+				hint: `Run the ${flow} flow`,
+				pick: () => draft(`/flow ${flow} `)
+			}))].filter((entry) => entry.key.includes(word)),
+			note: "No command matches."
+		};
+		const flow = /^\/flow\s+(\S*)$/.exec(text)?.[1];
+		if (flow !== undefined) return {
+			label: "Flows",
+			entries: lists.flows.filter((name) => name.includes(flow)).map((name) => ({
+				key: name,
+				label: name,
+				hint: `Run the ${name} flow`,
+				pick: () => name === flow ? void start() : draft(`/flow ${name} `)
+			})),
+			note: "No flow matches."
+		};
+		const number = /^\/review\s+#?(\S*)$/.exec(text)?.[1];
+		if (number === undefined) return undefined;
+		if (!choice.repo) return {
+			label: "Pick a repository",
+			entries: [...lists.repos.filter((repo) => repo.includes(number)).map((repo) => ({
+				key: repo,
+				label: repo,
+				pick: () => pick("repo", repo)
+			})), {
+				key: CONNECT,
+				label: connectLabel,
+				pick: () => pick("repo", CONNECT)
+			}]
+		};
+		if (!pulls?.items) return {
+			label: `Pull requests in ${choice.repo}`,
+			entries: [],
+			note: "loading"
+		};
+		return {
+			label: `Pull requests in ${choice.repo}`,
+			entries: [...pulls.items.filter((pull) => String(pull.number).startsWith(number) || pull.title.toLowerCase().includes(number.toLowerCase())).sort((a, b) => Number(String(b.number) === number) - Number(String(a.number) === number)).map((pull) => ({
+				key: `#${pull.number}`,
+				label: `#${pull.number} ${pull.title}`,
+				hint: [pull.author, pull.createdAt ? formatDate(Date.parse(pull.createdAt), tz) : ""].filter(Boolean).join(" · "),
+				pick: () => void start(pull.number)
+			})), ...number ? [] : [{
+				key: "",
+				label: choice.repo,
+				hint: "Pick another repository",
+				pick: () => apply({ repo: "" })
+			}]],
+			note: pulls.items.length ? "No open pull request matches." : "No open pull requests."
+		};
+	})();
+	const open = Boolean(menu && !dismissed);
+	const active = menu ? Math.min(at, Math.max(0, menu.entries.length - 1)) : 0;
+	// The slash menu hangs under the box in the top layer, so a dialog never clips it.
+	useLayoutEffect(() => {
+		const pop = slash.current;
+		if (!pop) return;
+		if (!open) return void (pop.matches(":popover-open") && pop.hidePopover());
+		const position = () => {
+			const rect = form.current.getBoundingClientRect();
+			pop.style.top = `${Math.round(rect.bottom + 6)}px`;
+			pop.style.left = `${Math.round(rect.left)}px`;
+			pop.style.width = `${Math.round(Math.min(rect.width, 460))}px`;
+		};
+		position();
+		if (!pop.matches(":popover-open")) pop.showPopover();
+		addEventListener("scroll", position, true);
+		addEventListener("resize", position);
+		return () => {
+			removeEventListener("scroll", position, true);
+			removeEventListener("resize", position);
+		};
+	}, [open, text]);
+	const engine = choice.engine || defaults.engine;
+	const own = defaults.engines[engine] ?? {};
+	const agents = lists.agents.filter(([id]) => id !== "coder");
+	// Only the settings that differ from the workspace's defaults.
+	const changed = [
+		choice.agent !== "coder" && choice.agent,
+		choice.engine !== defaults.engine && choice.engine,
+		...[
+			"model",
+			"effort",
+			"permissions"
+		].map((key) => choice[key] !== own[key] && choice[key]),
+		choice.runner && (lists.runners.find(([id]) => id === choice.runner)?.[1] ?? choice.runner)
+	].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs("form", {
+		ref: form,
+		class: "composer",
+		onSubmit: (event) => {
+			event.preventDefault();
+			void start();
+		},
+		children: [
+			/* @__PURE__ */ _jsx("textarea", {
+				ref: box,
+				name: "prompt",
+				rows: 1,
+				role: "combobox",
+				"aria-label": "What should the agent do?",
+				"aria-autocomplete": "list",
+				"aria-expanded": open,
+				"aria-controls": `${id}-slash`,
+				"aria-activedescendant": open && menu?.entries.length ? `${id}-slash-${active}` : undefined,
+				placeholder: PLACEHOLDER,
+				autofocus: true,
+				onFocus: () => setDismissed(false),
+				onBlur: () => setDismissed(true),
+				onInput: (event) => {
+					const value = event.currentTarget.value;
+					localStorage.setItem(DRAFT, value);
+					setText(value);
+					setAt(0);
+					setDismissed(false);
+				},
+				onKeyDown: (event) => {
+					if (event.isComposing) return;
+					if (open && menu) {
+						if (stepped(event, active, menu.entries.length, setAt)) return;
+						if (event.key === "Escape") {
+							event.preventDefault();
+							return setDismissed(true);
+						}
+						if (menu.entries.length && (event.key === "Enter" && !event.shiftKey || event.key === "Tab")) {
+							event.preventDefault();
+							return menu.entries[active].pick();
+						}
+					}
+					if (event.key !== "Enter" || event.shiftKey) return;
+					event.preventDefault();
+					void start();
+				}
+			}),
+			/* @__PURE__ */ _jsxs("div", {
+				class: "composer-line",
+				children: [
+					!lists.folders ? /* @__PURE__ */ _jsx(Select, {
+						label: "Repository",
+						value: choice.repo,
+						options: [...optionsOf("No repository", choice.repo, lists.repos), [CONNECT, connectLabel]],
+						onChange: (value) => pick("repo", value)
+					}) : typing ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("input", {
+						class: "folder-path",
+						"aria-label": typing === "url" ? "Repository URL" : "Folder path",
+						ref: path,
+						placeholder: typing === "url" ? "https://github.com/owner/repo" : "Absolute path or ~/…",
+						readOnly: cloning,
+						"aria-busy": cloning,
+						onKeyDown: (event) => {
+							if (cloning) return event.preventDefault();
+							if (event.key === "Escape") {
+								event.preventDefault();
+								setError("");
+								return setTyping("");
+							}
+							if (event.key !== "Enter" || event.isComposing) return;
+							event.preventDefault();
+							void (typing === "url" ? cloneFolder : checkFolder)(event.currentTarget.value);
+						},
+						onBlur: (event) => !cloning && !event.currentTarget.value.trim() && setTyping("")
+					}), cloning ? /* @__PURE__ */ _jsx("span", {
+						class: "folder-busy",
+						children: "Cloning…"
+					}) : null] }) : /* @__PURE__ */ _jsx("span", {
+						class: "folder",
+						title: choice.cwd || lists.folders.current.path,
+						children: /* @__PURE__ */ _jsx(Select, {
+							label: "Folder",
+							value: choice.cwd,
+							options: folderOptions(lists.folders, added, choice.cwd),
+							subs: Object.fromEntries(folderOptions(lists.folders, added, choice.cwd).flatMap(([path]) => path && path !== OTHER && path !== PICK && path !== CLONE ? [[path, added.find((each) => each.path === path)?.url ?? path]] : [])),
+							onChange: (value) => pick("cwd", value)
+						})
+					}),
+					/* @__PURE__ */ _jsxs("button", {
+						type: "button",
+						class: "quiet",
+						popovertarget: `${id}-settings`,
+						"aria-label": "Run options",
+						title: "Model, effort, permissions and more",
+						children: [/* @__PURE__ */ _jsx(Icon, { d: iSliders }), changed ? /* @__PURE__ */ _jsx("span", { children: changed }) : null]
+					}),
+					/* @__PURE__ */ _jsx("button", {
+						class: "btn sm send",
+						disabled: busy || !text.trim(),
+						"aria-busy": busy,
+						"aria-label": busy ? "Starting task" : "Start task",
+						title: "Start task (Enter)",
+						children: /* @__PURE__ */ _jsx(Icon, { d: iSteer })
+					})
+				]
+			}),
+			typing === "url" ? /* @__PURE__ */ _jsx("small", {
+				class: "folder-hint",
+				children: "Uses this machine's git logins"
+			}) : null,
+			/* @__PURE__ */ _jsx(ErrorText, { value: error }),
+			/* @__PURE__ */ _jsxs("div", {
+				id: `${id}-settings`,
+				class: "pop composer-settings",
+				popover: "auto",
+				onBeforeToggle: place,
+				children: [
+					/* @__PURE__ */ _jsx("p", {
+						class: "pop-label",
+						children: "Model"
+					}),
+					/* @__PURE__ */ _jsxs("div", {
+						role: "group",
+						"aria-label": "Model",
+						class: "pop-radios",
+						children: [modelSections(lists.models, defaults).map(([engine, items]) => /* @__PURE__ */ _jsxs(Fragment, { children: [engine ? /* @__PURE__ */ _jsx("p", {
+							class: "pop-group",
+							children: engine
+						}) : null, items.map(([value, label]) => {
+							const on = value === modelValue(choice.engine, choice.model);
+							const picked = splitModel(value);
+							const efforts = resolved(EFFORTS, defaults.engines[picked.engine || defaults.engine]?.effort);
+							const effortLabel = on && choice.effort ? efforts.find(([key]) => key === choice.effort)?.[1] : undefined;
+							const showing = expanded === value;
+							return /* @__PURE__ */ _jsxs(Fragment, { children: [/* @__PURE__ */ _jsxs("div", {
+								class: "pop-row",
+								children: [/* @__PURE__ */ _jsxs("button", {
+									type: "button",
+									role: "menuitemradio",
+									"aria-checked": on,
+									class: on ? "pop-item on" : "pop-item",
+									onClick: (event) => {
+										apply({
+											...picked,
+											effort: ""
+										});
+										event.currentTarget.closest("[popover]")?.hidePopover();
+									},
+									children: [
+										/* @__PURE__ */ _jsx("span", {
+											class: "grow",
+											children: label
+										}),
+										effortLabel ? /* @__PURE__ */ _jsx("small", { children: effortLabel.toLowerCase() }) : null,
+										on ? /* @__PURE__ */ _jsx(Icon, { d: iCheck }) : null
+									]
+								}), /* @__PURE__ */ _jsx("button", {
+									type: "button",
+									class: "pop-chev",
+									"data-keep": true,
+									"aria-label": `Effort for ${label}`,
+									"aria-expanded": showing,
+									onClick: () => setExpanded(showing ? undefined : value),
+									children: /* @__PURE__ */ _jsx(Icon, { d: iRight })
+								})]
+							}), showing ? /* @__PURE__ */ _jsx("div", {
+								role: "group",
+								"aria-label": `Effort for ${label}`,
+								class: "pop-sub",
+								children: efforts.map(([effort, text]) => /* @__PURE__ */ _jsx(MenuRadio, {
+									on: on && choice.effort === effort,
+									onPick: () => {
+										apply({
+											...picked,
+											effort
+										});
+										document.getElementById(`${id}-settings`)?.hidePopover();
+									},
+									children: text
+								}, effort))
+							}) : null] }, value);
+						})] }, engine)), /* @__PURE__ */ _jsxs(Link, {
+							class: "pop-item add-models",
+							href: "/dash/settings/[tab]",
+							params: { tab: "models" },
+							children: [/* @__PURE__ */ _jsx(Icon, { d: iPlus }), /* @__PURE__ */ _jsx("span", {
+								class: "grow",
+								children: "Add models"
+							})]
+						})]
+					}),
+					/* @__PURE__ */ _jsx("p", {
+						class: "pop-label",
+						children: "Permissions"
+					}),
+					/* @__PURE__ */ _jsx("div", {
+						role: "group",
+						"aria-label": "Permissions",
+						children: resolved(PERMISSIONS, own.permissions ?? "auto").map(([value, label]) => /* @__PURE__ */ _jsx(MenuRadio, {
+							on: choice.permissions === value,
+							onPick: () => apply({ permissions: value }),
+							children: label
+						}, value))
+					}),
+					agents.length || choice.agent !== "coder" ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("p", {
+						class: "pop-label",
+						children: "Agent"
+					}), /* @__PURE__ */ _jsx(Select, {
+						label: "Agent",
+						value: choice.agent,
+						options: named("coder", choice.agent, agents),
+						onChange: (value) => apply({ agent: value })
+					})] }) : null,
+					lists.runners.length > 1 ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("p", {
+						class: "pop-label",
+						children: "Runs on"
+					}), /* @__PURE__ */ _jsx(Select, {
+						label: "Runs on",
+						options: lists.runners,
+						value: choice.runner,
+						onChange: (value) => apply({ runner: value })
+					})] }) : null
+				]
+			}),
+			/* @__PURE__ */ _jsx("div", {
+				ref: slash,
+				id: `${id}-slash`,
+				class: "pop composer-slash",
+				popover: "manual",
+				role: "listbox",
+				"aria-label": menu?.label ?? "Commands",
+				children: menu ? /* @__PURE__ */ _jsxs(_Fragment, { children: [
+					/* @__PURE__ */ _jsx("div", {
+						class: "pop-label",
+						children: menu.label
+					}),
+					/* @__PURE__ */ _jsx(Entries, {
+						id: `${id}-slash`,
+						entries: menu.entries,
+						active,
+						onActive: setAt
+					}),
+					menu.note === "loading" ? /* @__PURE__ */ _jsx(Loading, {
+						label: "Loading pull requests",
+						inline: true
+					}) : menu.note && !menu.entries.length ? /* @__PURE__ */ _jsx("p", {
+						class: "pop-note",
+						children: menu.note
+					}) : null
+				] }) : null
+			})
+		]
+	}), needs === undefined || missing ? null : /* @__PURE__ */ _jsx(NeedsCredential, { reason: needs })] });
+}
+/** The composer before it arrives: the same box and prompt, inert. */
+export function LoadingComposer() {
+	return /* @__PURE__ */ _jsxs("div", {
+		class: "composer",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ _jsx("textarea", {
+			rows: 1,
+			disabled: true,
+			tabIndex: -1,
+			placeholder: PLACEHOLDER
+		}), /* @__PURE__ */ _jsx("div", { class: "composer-line" })]
+	});
+}
+/** Opens the composer in a dialog, with `agent` picked when given; starting a task opens it. */
+export function NewTaskButton({ agent }) {
+	const dialog = useRef(null);
+	const [setup, setSetup] = useState();
+	const [error, setError] = useState("");
+	const [shown, setShown] = useState(false);
+	const loading = useRef();
+	// Hovering the button already loads what the composer needs.
+	const prepare = () => loading.current ??= loadComposer(client).then(setSetup, (reason) => setError(reasonText(reason)));
+	const open = () => {
+		setShown(true);
+		dialog.current?.showModal();
+		void prepare();
+	};
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsxs("button", {
+		type: "button",
+		class: "btn new-task",
+		onClick: open,
+		onPointerEnter: prepare,
+		onFocus: prepare,
+		children: [/* @__PURE__ */ _jsx(Icon, { d: iPlus }), "New task"]
+	}), /* @__PURE__ */ _jsxs("dialog", {
+		ref: dialog,
+		class: "compose-dialog",
+		"aria-label": agent ? `New task for ${agent}` : "New task",
+		onClose: () => setShown(false),
+		onClick: (event) => event.target === event.currentTarget && dialog.current?.close(),
+		children: [/* @__PURE__ */ _jsxs("header", { children: [
+			/* @__PURE__ */ _jsx("h2", { children: "New task" }),
+			agent ? /* @__PURE__ */ _jsx("span", {
+				class: "sub",
+				children: agent
+			}) : null,
+			/* @__PURE__ */ _jsx("button", {
+				type: "button",
+				class: "icon-btn",
+				"aria-label": "Close",
+				onClick: () => dialog.current?.close(),
+				children: /* @__PURE__ */ _jsx(Icon, { d: iX })
+			})
+		] }), !shown ? null : setup ? /* @__PURE__ */ _jsx(Composer, {
+			...setup,
+			initial: {
+				...savedChoice(document.cookie),
+				...agent ? { agent } : {}
+			},
+			tz: Intl.DateTimeFormat().resolvedOptions().timeZone
+		}) : error ? /* @__PURE__ */ _jsx(ErrorText, { value: error }) : /* @__PURE__ */ _jsx(LoadingComposer, {})]
+	})] });
+}