@wular/coder 0.4.7 → 0.4.8

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/tasks/[id]/activity.ed49ee2686d1ee41.js

@@ -0,0 +1,318 @@
+"use client";
+import { useEffect, useLayoutEffect, useReducer, useRef, useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { Virtualizer, observeWindowOffset, observeWindowRect, windowScroll } from "../../../../../../../../../../node_modules/@tanstack/virtual-core/dist/esm/index.js";
+import { iActivity, iAlert, iChart, iCheck, iDown, iKey, iMessage, iRight, iSpark, iSteer, iTerminal, iX } from "../../../../../comps/ui/icons.868385119bf2de28.js";
+import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
+import { Loading } from "../../../../../comps/ui/card.6227f43fc0ae4bd1.js";
+import { formatDuration, formatTime } from "../../../../../utils/format.6a7d1beaf4d09d9c.js";
+import { usePoll } from "../../../../../utils/client.d25e6dcc6704eb60.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+const ICONS = {
+	assistant: iMessage,
+	tool: iTerminal,
+	"tool-result": iCheck,
+	approval: iKey,
+	status: iActivity,
+	error: iAlert,
+	line: iActivity,
+	reasoning: iSpark,
+	steer: iSteer,
+	usage: iChart
+};
+/** Rows long enough to fold to one line. */
+const foldable = (row) => Boolean(row.detail || row.result?.detail) || row.title.length > 120 || row.title.includes("\n");
+const atEnd = () => innerHeight + scrollY >= document.documentElement.scrollHeight - 48;
+/** The list scrolls with the page; only rows near the viewport are in the DOM. */
+function useWindowVirtualizer(count, list) {
+	const [, rerender] = useReducer((n) => n + 1, 0);
+	const options = {
+		count,
+		estimateSize: () => 30,
+		overscan: 16,
+		getScrollElement: () => window,
+		observeElementRect: observeWindowRect,
+		observeElementOffset: observeWindowOffset,
+		scrollToFn: windowScroll,
+		scrollMargin: list.current ? list.current.getBoundingClientRect().top + scrollY : 0,
+		onChange: () => rerender(0)
+	};
+	const [virtual] = useState(() => new Virtualizer(options));
+	virtual.setOptions(options);
+	useLayoutEffect(() => virtual._didMount(), []);
+	useLayoutEffect(() => virtual._willUpdate());
+	return virtual;
+}
+/** Renders again every second while `on`. */
+function useTick(on) {
+	const [, tick] = useReducer((n) => n + 1, 0);
+	usePoll(on ? async () => tick(0) : undefined, 1e3);
+}
+/** Whether a call or approval still waits; calls the agent has moved on from without a result do not. */
+function runningIn(rows, live) {
+	const settled = rows.findLastIndex((row) => row.kind === "assistant" || row.kind === "reasoning");
+	return (row, index) => live && !row.result && (row.state !== undefined || row.kind === "tool" && index > settled);
+}
+/** A call's or approval's outcome on the right: a spinner and the time so far, then ✓ or ✗ and how long it took. */
+function CallState({ row, running }) {
+	useTick(running);
+	const result = row.result;
+	const took = running ? Math.max(0, Date.now() - row.at) : result?.durationMs;
+	const text = [
+		row.state,
+		result && !result.ok && result.exitCode !== undefined ? `exit ${result.exitCode}` : "",
+		took ? formatDuration(took) : ""
+	].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ _jsxs("span", {
+		class: `act-state${result && !result.ok ? " bad" : ""}`,
+		children: [running ? /* @__PURE__ */ _jsx("i", { class: "spin" }) : result ? /* @__PURE__ */ _jsx(Icon, { d: result.ok ? iCheck : iX }) : null, text]
+	});
+}
+function Row({ row, tz, open, running, onToggle }) {
+	const title = useRef(null);
+	const [clipped, setClipped] = useState(false);
+	useLayoutEffect(() => {
+		if (title.current) setClipped(title.current.scrollWidth > title.current.clientWidth);
+	}, [row.title]);
+	const fold = open || clipped || foldable(row);
+	const failed = row.tone === "error";
+	const timed = row.kind === "tool" || row.state !== undefined;
+	const extra = row.kind === "tool-result" ? [
+		row.tool,
+		row.exitCode !== undefined ? `exit ${row.exitCode}` : undefined,
+		row.durationMs ? formatDuration(row.durationMs) : undefined
+	].filter(Boolean).join(" · ") : row.kind === "reasoning" && row.durationMs ? formatDuration(row.durationMs) : "";
+	const Tag = fold ? "button" : "div";
+	return /* @__PURE__ */ _jsxs(Tag, {
+		type: fold ? "button" : undefined,
+		class: `act ${row.kind}${row.tone ? ` ${row.tone}` : ""}${timed ? " timed" : ""}${open ? " open" : ""}`,
+		"aria-expanded": fold ? open : undefined,
+		onClick: fold ? onToggle : undefined,
+		children: [
+			/* @__PURE__ */ _jsx("time", { children: formatTime(row.at, tz) }),
+			/* @__PURE__ */ _jsx(Icon, { d: row.kind === "tool-result" && failed ? iX : ICONS[row.kind] }),
+			/* @__PURE__ */ _jsxs("span", {
+				class: "act-text",
+				children: [
+					/* @__PURE__ */ _jsx("span", {
+						class: "act-title",
+						ref: title,
+						children: row.title
+					}),
+					extra ? /* @__PURE__ */ _jsx("span", {
+						class: "act-detail",
+						children: extra
+					}) : null,
+					row.detail && (open || !row.state) ? /* @__PURE__ */ _jsx("span", {
+						class: "act-detail",
+						children: row.detail
+					}) : null,
+					open && row.result?.detail ? /* @__PURE__ */ _jsx("span", {
+						class: "act-detail",
+						children: row.result.detail
+					}) : null
+				]
+			}),
+			timed ? /* @__PURE__ */ _jsx(CallState, {
+				row,
+				running
+			}) : null,
+			fold ? /* @__PURE__ */ _jsx(Icon, {
+				d: iDown,
+				class: "act-chev"
+			}) : null
+		]
+	});
+}
+/** What the task did, as the CLI's watch shows it: one line per event, long ones folded, following the end while you are there; `at` opens it at a row's seq or the end. */
+export function Activity({ rows, live, tz, at }) {
+	const list = useRef(null);
+	const [open, setOpen] = useState(() => new Set(typeof at === "number" ? [at] : []));
+	const [follow, setFollow] = useState(at === undefined ? live : at === "end");
+	const virtual = useWindowVirtualizer(rows.length, list);
+	const running = runningIn(rows, live);
+	useEffect(() => {
+		const index = rows.findIndex((row) => row.seq === at);
+		if (index < 0 || !list.current) return;
+		// The first render had no list to measure its offset from.
+		const scrollMargin = list.current.getBoundingClientRect().top + scrollY;
+		virtual.setOptions({
+			...virtual.options,
+			scrollMargin
+		});
+		scrollTo({ top: virtual.getOffsetForIndex(index, "center")?.[0] ?? 0 });
+		// Rows measure as they render, so hold the row until it settles: centred between the sticky head
+		// and the reply box, or its top when taller than that. Scrolling yourself lets go.
+		let frames = 60;
+		let still = 0;
+		let frame = 0;
+		const stop = () => {
+			cancelAnimationFrame(frame);
+			for (const type of [
+				"wheel",
+				"touchstart",
+				"keydown"
+			]) removeEventListener(type, stop);
+		};
+		const align = () => {
+			const slot = list.current?.querySelector(".act-slot.at");
+			if (slot) {
+				const top = parseFloat(getComputedStyle(slot).scrollMarginTop);
+				const bottom = document.querySelector("form.reply")?.getBoundingClientRect().top ?? innerHeight;
+				const box = slot.getBoundingClientRect();
+				const delta = box.top - (box.height > bottom - top ? top : (top + bottom - box.height) / 2);
+				if (Math.abs(delta) < 1) still++;
+				else scrollBy(0, delta);
+			}
+			if (still < 3 && --frames) frame = requestAnimationFrame(align);
+			else stop();
+		};
+		for (const type of [
+			"wheel",
+			"touchstart",
+			"keydown"
+		]) addEventListener(type, stop, { passive: true });
+		frame = requestAnimationFrame(align);
+		return stop;
+	}, []);
+	useEffect(() => {
+		const onScroll = () => setFollow(atEnd());
+		addEventListener("scroll", onScroll, { passive: true });
+		onScroll();
+		return () => removeEventListener("scroll", onScroll);
+	}, []);
+	useLayoutEffect(() => {
+		if (follow) scrollTo({ top: document.documentElement.scrollHeight });
+	}, [rows.length]);
+	if (!rows.length) return /* @__PURE__ */ _jsx("p", {
+		class: "act-empty muted",
+		children: live ? "Nothing yet. Events appear here as the task runs." : "No activity recorded."
+	});
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("div", {
+		class: "act-list",
+		ref: list,
+		style: `height:${virtual.getTotalSize()}px`,
+		role: "log",
+		"aria-live": "off",
+		children: virtual.getVirtualItems().map((item) => {
+			const row = rows[item.index];
+			return /* @__PURE__ */ _jsx("div", {
+				class: row.seq === at ? "act-slot at" : "act-slot",
+				"data-index": item.index,
+				ref: virtual.measureElement,
+				style: `transform:translateY(${item.start - virtual.options.scrollMargin}px)`,
+				children: /* @__PURE__ */ _jsx(Row, {
+					row,
+					tz,
+					open: open.has(row.seq),
+					running: running(row, item.index),
+					onToggle: () => setOpen((value) => {
+						const next = new Set(value);
+						if (!next.delete(row.seq)) next.add(row.seq);
+						return next;
+					})
+				})
+			}, row.seq);
+		})
+	}), follow ? null : /* @__PURE__ */ _jsx("button", {
+		type: "button",
+		class: "jump",
+		onClick: () => {
+			setFollow(true);
+			scrollTo({ top: document.documentElement.scrollHeight });
+		},
+		children: "Jump to latest"
+	})] });
+}
+/** The kinds a run's preview shows as steps. */
+const STEPS = new Set([
+	"tool",
+	"tool-result",
+	"approval"
+]);
+/** A run's counts on one line: calls, approvals, failures, reasoning time, and how long it has run. */
+export function runSummary(rows, elapsed) {
+	const calls = rows.filter((row) => row.kind === "tool").length;
+	const approved = rows.filter((row) => row.kind === "approval" && row.result?.ok).length;
+	const denied = rows.filter((row) => row.kind === "approval" && row.result?.ok === false).length;
+	const failed = rows.filter((row) => row.kind === "tool" ? row.result?.ok === false : row.kind === "tool-result" && row.tone === "error").length;
+	const reasoning = rows.reduce((sum, row) => sum + (row.kind === "reasoning" ? row.durationMs ?? 0 : 0), 0);
+	return [
+		`${calls} tool ${calls === 1 ? "call" : "calls"}`,
+		approved ? `${approved} approved` : "",
+		denied ? `${denied} denied` : "",
+		failed ? `${failed} failed` : "",
+		reasoning ? `reasoning ${formatDuration(reasoning)}` : "",
+		elapsed === undefined ? "" : formatDuration(elapsed)
+	].filter(Boolean).join(" · ");
+}
+const ago = (at) => `${formatDuration(Math.max(1e3, Date.now() - at)).replace(/\.\d/, "")} ago`;
+/** One step in the preview, as an Activity row: its outcome, its title, and when it ended. */
+function Step({ row, running, onOpen }) {
+	const waiting = running && row.state === "waiting";
+	const failed = row.result ? !row.result.ok : row.tone === "error";
+	const icon = waiting ? iKey : row.result ? row.result.ok ? iCheck : iX : failed ? iX : ICONS[row.kind];
+	return /* @__PURE__ */ _jsxs("button", {
+		type: "button",
+		class: `act step ${row.kind}${waiting ? " warning" : failed ? " error" : ""}`,
+		onClick: onOpen,
+		children: [
+			running && !waiting ? /* @__PURE__ */ _jsx("i", { class: "spin" }) : /* @__PURE__ */ _jsx(Icon, { d: icon }),
+			/* @__PURE__ */ _jsxs("span", {
+				class: "act-text",
+				children: [/* @__PURE__ */ _jsx("span", {
+					class: "act-title",
+					children: waiting ? "Waiting for your approval" : row.title
+				}), waiting ? /* @__PURE__ */ _jsx("span", {
+					class: "act-detail",
+					children: row.title
+				}) : null]
+			}, row.seq),
+			/* @__PURE__ */ _jsx("span", {
+				class: "act-state",
+				children: running && !waiting ? row.state ?? "running" : ago(row.at + (row.result?.durationMs ?? 0))
+			}),
+			/* @__PURE__ */ _jsx(Icon, {
+				d: iRight,
+				class: "act-chev"
+			})
+		]
+	});
+}
+/** A running task's summary and last two steps, a pending approval first; a step opens Activity at its row, the summary at the end. */
+export function RunPreview({ rows, startedAt, onOpen }) {
+	useTick(true);
+	const running = runningIn(rows, true);
+	const steps = rows.flatMap((row, index) => STEPS.has(row.kind) ? [{
+		row,
+		running: running(row, index)
+	}] : []);
+	const waiting = steps.filter((step) => step.running && step.row.state === "waiting");
+	const rest = steps.filter((step) => !waiting.includes(step));
+	const shown = [...waiting, ...rest.slice(Math.max(0, rest.length - 2 + waiting.length))].slice(0, 2);
+	return /* @__PURE__ */ _jsxs("div", {
+		class: "body run",
+		children: [
+			/* @__PURE__ */ _jsxs("button", {
+				type: "button",
+				class: "act run-sum",
+				onClick: () => onOpen("end"),
+				children: [runSummary(rows, startedAt === undefined ? undefined : Date.now() - startedAt), /* @__PURE__ */ _jsx(Icon, {
+					d: iRight,
+					class: "act-chev"
+				})]
+			}),
+			/* @__PURE__ */ _jsx("div", {
+				class: steps.length > shown.length ? "run-steps earlier" : "run-steps",
+				children: shown.map((step, line) => /* @__PURE__ */ _jsx(Step, {
+					...step,
+					onOpen: () => onOpen(step.row.seq)
+				}, line))
+			}),
+			/* @__PURE__ */ _jsx(Loading, {
+				inline: true,
+				dots: true,
+				label: "The result appears here when the task finishes."
+			})
+		]
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/{tasks/[id]/loading.d88d1139ea3ff52a.js → [org]/tasks/[id]/loading.0d973b51fee68801.js}

@@ -1,8 +1,9 @@
-import { Back, Page } from "../../../../comps/frame/page-head.a2336c95004aed4b.js";
-import { Loading } from "../../../../comps/ui/card.b0873d38765c9d20.js";
-import { LoadingTabs } from "../../../../comps/ui/tabs.d00fc01ad9c1b91e.js";
-import { BLANK } from "../../../../comps/frame/loading-card.bf58af8330a78704.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import { Page } from "../../../../../comps/frame/page-head.e5d2185c1cdac740.js";
+import { OrgBack } from "../../../../../comps/nav/org.813dc34bd23a336f.js";
+import { Loading } from "../../../../../comps/ui/card.6227f43fc0ae4bd1.js";
+import { LoadingTabs } from "../../../../../comps/ui/tabs.66b2e54963f6901b.js";
+import { BLANK } from "../../../../../comps/frame/loading-card.df3717186948c93f.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 export default function TaskLoading() {
 	return /* @__PURE__ */ _jsx(Page, { children: /* @__PURE__ */ _jsx(LoadingTask, {}) });
 }
@@ -12,9 +13,8 @@ function LoadingTask() {
 		/* @__PURE__ */ _jsx("header", {
 			class: "head",
 			children: /* @__PURE__ */ _jsxs("div", { children: [
-				/* @__PURE__ */ _jsx(Back, {
-					href: "/dash/tasks",
-					params: {},
+				/* @__PURE__ */ _jsx(OrgBack, {
+					href: "/dash/[org]/tasks",
 					label: "Tasks"
 				}),
 				/* @__PURE__ */ _jsx("div", {

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/[org]/tasks/[id]/page.05dd344bada1d4d8.js

@@ -0,0 +1,24 @@
+import "./task-view.38b1b7ef3976ba71.css.pnext-asset.js";
+import { dynamic } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/dynamic.tsx";
+import { zoneOf } from "../../../../../utils/format.6a7d1beaf4d09d9c.js";
+import { load } from "../../../../../api/load.4f942c7f68b2e273.js";
+import { Page } from "../../../../../comps/frame/page-head.e5d2185c1cdac740.js";
+import { Settle } from "../../../../../comps/frame/stream.2fea238dc4f4f9a4.js";
+import { jsx as _jsx } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+// Hydrates with the page: the reply box is focused and the activity follows the run at once.
+const TaskView = dynamic(() => import("./task-view.8a5908c42647923f.js").then((m) => m.TaskView), undefined, {
+	"file": decodeURIComponent(new URL("../../../../../../../../../../../../../src/server/dash/app/dash/[org]/tasks/[id]/task-view.tsx", import.meta.url).pathname),
+	"exportName": "TaskView",
+	"id": "c-15a972b1e6"
+});
+export default async function TaskPage({ request, params }) {
+	if (!request) return null;
+	const { id: raw } = await params;
+	const id = Array.isArray(raw) ? raw[0] : raw;
+	const task = load(request).tasks.get(id);
+	const tz = zoneOf(request);
+	return /* @__PURE__ */ _jsx(Page, { children: /* @__PURE__ */ _jsx(Settle, { load: () => task.then((row) => /* @__PURE__ */ _jsx(TaskView, {
+		initial: row,
+		tz
+	})) }) });
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/{tasks/[id]/task-actions.ee523c68a38a7975.js → [org]/tasks/[id]/task-actions.ece7ec732352ce70.js}

@@ -1,16 +1,16 @@
 "use client";
-import { useEffect, useState } from "../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { client } from "../../../../utils/client.a8205c524e63d4a9.js";
-import { useRouter } from "../../../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
-import { Card } from "../../../../comps/ui/card.b0873d38765c9d20.js";
-import { reasonText } from "../../../../utils/format.6a7d1beaf4d09d9c.js";
-import { ErrorText } from "../../../../comps/ui/field.7b2a2075ee8c6e29.js";
-import { ConfirmDialog } from "../../../../comps/ui/confirm.1328a7ede6c27bb9.js";
-import { Menu, MenuItem } from "../../../../comps/ui/menu.a4dd9fb9f566689a.js";
-import { Icon } from "../../../../comps/ui/icon.0874ca2f58f7db14.js";
-import { iDots } from "../../../../comps/ui/icons.1777c0350d5d215e.js";
-import { showToast, toastError } from "../../../../comps/frame/task-toasts.10b46a8b8db1791f.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import { useState } from "../../../../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
+import { client } from "../../../../../utils/client.d25e6dcc6704eb60.js";
+import { useAction } from "../../../../../utils/action.568346602027ac74.js";
+import { useRouter } from "../../../../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
+import { useOrg } from "../../../../../comps/nav/org.813dc34bd23a336f.js";
+import { Card } from "../../../../../comps/ui/card.6227f43fc0ae4bd1.js";
+import { ConfirmDialog } from "../../../../../comps/ui/confirm.fe133a074c2743af.js";
+import { Menu, MenuItem } from "../../../../../comps/ui/menu.0f064f75822888be.js";
+import { Icon } from "../../../../../comps/ui/icon.0874ca2f58f7db14.js";
+import { iDots } from "../../../../../comps/ui/icons.868385119bf2de28.js";
+import { showToast } from "../../../../../comps/frame/task-toasts.4282affa47415a36.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 export function approvalParts(approval) {
 	if (!approval || typeof approval !== "object") return {};
 	const record = approval;
@@ -21,71 +21,44 @@ export function approvalParts(approval) {
 		reason: pick("summary", "reason")
 	};
 }
-const DONE = {
-	approve: "Decision sent.",
-	archive: "Archived.",
-	ask: "Question sent.",
-	cancel: "Stop requested.",
-	continue: "Sent.",
-	steer: "Steer sent."
-};
-export function useAction(taskId) {
-	const [error, setError] = useState("");
-	const [outcome, setOutcome] = useState("");
-	const run = async (name, body = {}) => {
-		setError("");
-		setOutcome("");
-		try {
-			if (name === "approve") await client.tasks.approve(taskId, body.approvalId ?? "", body.decision ?? "decline");
-			else if (name === "ask") await client.tasks.ask(taskId, body.question ?? "");
-			else if (name === "continue" || name === "steer") await client.tasks.steer(taskId, body.text ?? "");
-			else await client.tasks[name](taskId);
-			setOutcome(DONE[name]);
-			return true;
-		} catch (reason) {
-			setError(reasonText(reason));
-			return false;
-		}
-	};
-	return {
-		error,
-		outcome,
-		setError,
-		run
-	};
-}
-export function Flash({ error, outcome }) {
-	return error ? /* @__PURE__ */ _jsx(ErrorText, { value: error }) : /* @__PURE__ */ _jsx("span", {
-		class: "flash",
-		role: "status",
-		children: outcome
-	});
-}
 /** Archive, Stop while it runs, and Delete behind the ⋯ menu; phones keep Archive in the menu too, away from Stop. */
 export function TaskActions({ task, live }) {
 	const nav = useRouter();
-	const action = useAction(task.task.id);
+	const org = useOrg();
+	const action = useAction();
+	const removing = useAction({ leaves: true });
+	const [outcome, setOutcome] = useState("");
 	const [archived, setArchived] = useState(Boolean(task.archivedAt));
-	const [deleting, setDeleting] = useState();
-	const remove = () => {
-		setDeleting("busy");
-		action.setError("");
-		void client.tasks.delete(task.task.id).then(() => nav.push("/dash/tasks")).catch((reason) => {
-			setDeleting(undefined);
-			action.setError(reasonText(reason));
-		});
+	const [confirming, setConfirming] = useState(false);
+	const act = async (name) => {
+		setOutcome("");
+		const ok = await action.run(name, () => client.tasks[name](task.task.id));
+		if (ok) setOutcome(name === "cancel" ? "Stop requested." : "Archived.");
+		return ok;
 	};
-	const archive = () => void action.run("archive").then(setArchived);
+	const remove = () => void removing.run("delete", async () => {
+		await client.tasks.delete(task.task.id);
+		nav.push("/dash/[org]/tasks", { params: { org } });
+	}).then((ok) => ok || setConfirming(false));
+	const archive = () => void act("archive").then(setArchived);
 	return /* @__PURE__ */ _jsxs(_Fragment, { children: [
-		/* @__PURE__ */ _jsx(Flash, { ...action }),
+		/* @__PURE__ */ _jsx("span", {
+			class: "flash",
+			role: "status",
+			children: outcome
+		}),
 		live ? /* @__PURE__ */ _jsx("button", {
 			type: "button",
 			class: "btn outline",
-			onClick: () => void action.run("cancel"),
+			disabled: Boolean(action.pending),
+			"aria-busy": action.pending === "cancel",
+			onClick: () => void act("cancel"),
 			children: "Stop"
 		}) : archived ? null : /* @__PURE__ */ _jsx("button", {
 			type: "button",
 			class: "btn outline archive",
+			disabled: Boolean(action.pending),
+			"aria-busy": action.pending === "archive",
 			onClick: archive,
 			children: "Archive"
 		}),
@@ -105,41 +78,33 @@ export function TaskActions({ task, live }) {
 				/* @__PURE__ */ _jsx(MenuItem, {
 					title: "Delete",
 					danger: true,
-					onClick: () => setDeleting("ask")
+					onClick: () => setConfirming(true)
 				})
 			]
 		}),
 		/* @__PURE__ */ _jsx(ConfirmDialog, {
-			open: Boolean(deleting),
+			open: confirming,
 			title: "Delete this task?",
 			body: "Its conversation, activity and diff go with it.",
 			confirmLabel: "Delete",
-			busy: deleting === "busy",
+			busy: Boolean(removing.pending),
 			onConfirm: remove,
-			onClose: () => setDeleting(undefined)
+			onClose: () => setConfirming(false)
 		})
 	] });
 }
 export function Approval({ task }) {
-	const action = useAction(task.task.id);
-	const [busy, setBusy] = useState();
+	const action = useAction({ toast: "Not sent" });
+	const busy = action.pending;
 	// A sent decision hides its card at once; the events stream catches up after.
 	const [decided, setDecided] = useState();
 	const { id, action: tool, reason } = approvalParts(task.approval);
 	const decide = async (decision) => {
-		setBusy(decision);
-		const ok = await action.run("approve", {
-			approvalId: id,
-			decision
-		});
-		setBusy(undefined);
+		const ok = await action.run(decision, () => client.tasks.approve(task.task.id, id ?? "", decision));
 		if (!ok) return;
 		setDecided(id);
 		showToast(decision === "accept" ? "Allowed" : "Denied", "The task continues.");
 	};
-	useEffect(() => {
-		if (action.error) toastError("Not sent", action.error);
-	}, [action.error]);
 	if (id && decided === id) return null;
 	return /* @__PURE__ */ _jsx(Card, {
 		tone: "accent",