@wular/coder 0.4.7 → 0.4.9

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/{usage/stats.4793e81a32ea5e8f.js → [org]/usage/stats.de820599cf126120.js}

@@ -1,5 +1,5 @@
-import "./stats.cd1d20f46f1347bf.css.pnext-asset.js";
-import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import "./stats.bb7cb568c0174557.css.pnext-asset.js";
+import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 export function Stats({ label, children }) {
 	return /* @__PURE__ */ _jsx("section", {
 		class: "stats",

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/dash/{usage/top-agents.b228062d012dc17b.js → [org]/usage/top-agents.e215d44e00192271.js}

@@ -1,11 +1,11 @@
-import "./top-agents.47aecd65c0c8fa2e.css.pnext-asset.js";
-import { iDown, iUp } from "../../../comps/ui/icons.1777c0350d5d215e.js";
-import { Link } from "../../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
-import { withSearch } from "../../../comps/nav/to.0116bedfbe5f1133.js";
-import { Card, Empty } from "../../../comps/ui/card.b0873d38765c9d20.js";
-import { Icon } from "../../../comps/ui/icon.0874ca2f58f7db14.js";
-import { formatMetric } from "./metric.ca0466e33225f184.js";
-import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import "./top-agents.20a1d4451784792b.css.pnext-asset.js";
+import { iDown, iUp } from "../../../../comps/ui/icons.a34176f37808cd66.js";
+import { Link } from "../../../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
+import { withSearch } from "../../../../comps/nav/to.a2c840c09bd4bf4a.js";
+import { Card, Empty } from "../../../../comps/ui/card.c08471eaa0bc1cec.js";
+import { Icon } from "../../../../comps/ui/icon.0874ca2f58f7db14.js";
+import { formatMetric } from "./metric.ada350d2b7449b39.js";
+import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const COLUMNS = [
 	[
 		"tasks",
@@ -24,7 +24,7 @@ const COLUMNS = [
 	]
 ];
 /** The leading agents by the sorted column, the rest summed as Other agents, as the chart draws them. */
-export function TopAgents({ rows, known, other, sort, range, tops, metric }) {
+export function TopAgents({ org, rows, known, other, sort, range, tops, metric }) {
 	const max = Math.max(1, other?.[metric] ?? 0, ...rows.map((row) => row[metric]));
 	const sortSearch = (key) => {
 		const search = new URLSearchParams(range);
@@ -47,7 +47,8 @@ export function TopAgents({ rows, known, other, sort, range, tops, metric }) {
 			children: /* @__PURE__ */ _jsxs("table", {
 				class: "rows usage stacked",
 				children: [/* @__PURE__ */ _jsx("thead", { children: /* @__PURE__ */ _jsxs("tr", { children: [/* @__PURE__ */ _jsx("th", { children: /* @__PURE__ */ _jsxs(Link, {
-					href: "/dash/usage",
+					href: "/dash/[org]/usage",
+					params: { org },
 					search: sortSearch("name"),
 					scroll: false,
 					"aria-current": sort === "name" ? "page" : undefined,
@@ -55,7 +56,8 @@ export function TopAgents({ rows, known, other, sort, range, tops, metric }) {
 				}) }), COLUMNS.map(([key, label]) => /* @__PURE__ */ _jsx("th", {
 					class: "num",
 					children: /* @__PURE__ */ _jsxs(Link, {
-						href: "/dash/usage",
+						href: "/dash/[org]/usage",
+						params: { org },
 						search: sortSearch(key),
 						scroll: false,
 						"aria-current": sort === key ? "page" : undefined,
@@ -67,9 +69,12 @@ export function TopAgents({ rows, known, other, sort, range, tops, metric }) {
 					children: row.key
 				}) : known.has(row.key) ? /* @__PURE__ */ _jsx(Link, {
 					class: "cover",
-					href: "/dash/agents/[slug]/usage",
-					params: { slug: row.key },
-					search: withSearch(new URLSearchParams(range), { from: `/dash/usage?${range}` }),
+					href: "/dash/[org]/agents/[slug]/usage",
+					params: {
+						org,
+						slug: row.key
+					},
+					search: withSearch(new URLSearchParams(range), { from: `/dash/${org}/usage?${range}` }),
 					children: row.key
 				}) : /* @__PURE__ */ _jsx("span", {
 					class: "unlinked",
@@ -77,7 +82,8 @@ export function TopAgents({ rows, known, other, sort, range, tops, metric }) {
 					children: row.key
 				}), bar(row[metric], tops[row.key])] }), cells(row)] }, row.key)), other ? /* @__PURE__ */ _jsxs("tr", { children: [/* @__PURE__ */ _jsxs("td", { children: [/* @__PURE__ */ _jsx(Link, {
 					class: "cover",
-					href: "/dash/agents",
+					href: "/dash/[org]/agents",
+					params: { org },
 					children: "Other agents"
 				}), bar(other[metric], "var(--s0)")] }), cells(other)] }) : null] })]
 			})

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/{layout.c762b39aafb84a1f.js → layout.b7e3af142b17941b.js}

@@ -1,4 +1,4 @@
-import "./globals.e9ce0eb6697f992d.css.pnext-asset.js";
+import "./globals.dccea8b03fa4b6d2.css.pnext-asset.js";
 import "./responsive.82549d958fae8f00.css.pnext-asset.js";
 import { Zone } from "./zone.dbc84f981415d8f7.js";
 import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/app/login/{page.3ddaa1a675a04c5a.js → page.226544940a39fd3a.js}

@@ -1,9 +1,9 @@
-import "./page.57e5198339e9ca28.css.pnext-asset.js";
+import "./page.586a41a7ab9988e0.css.pnext-asset.js";
 import { redirect } from "../../../../../../../node_modules/@wular/pnext/src/api/navigation.ts";
-import { ErrorText } from "../../comps/ui/field.7b2a2075ee8c6e29.js";
 import { AuthPanel } from "../../comps/frame/auth-panel.5712a8d190b003b4.js";
+import { Button } from "../../comps/ui/button.983daea9e687fc5d.js";
 import { safeReturnPath } from "../../../auth/sign-in.661b3a4139af5bd7.js";
-import { load } from "../../api/load.35be1b07171553e7.js";
+import { load } from "../../api/load.4f942c7f68b2e273.js";
 import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const WULAR_LOGO = /* @__PURE__ */ _jsx("svg", {
 	class: "logo",
@@ -29,12 +29,17 @@ function LoginPage({ signIn, error }) {
 		lead: "Coder signs you in with your Wular Auth account.",
 		children: [/* @__PURE__ */ _jsx("div", {
 			class: "provider-grid",
-			children: /* @__PURE__ */ _jsxs("a", {
-				class: "btn outline provider",
+			children: /* @__PURE__ */ _jsxs(Button, {
+				variant: "outline",
+				class: "provider",
 				href: signIn,
 				children: [WULAR_LOGO, /* @__PURE__ */ _jsx("span", { children: "Sign in with Wular Auth" })]
 			})
-		}), /* @__PURE__ */ _jsx(ErrorText, { value: error ? ERRORS[error] ?? "Sign-in did not finish. Try again." : "" })]
+		}), error ? /* @__PURE__ */ _jsx("p", {
+			class: "flash err",
+			role: "alert",
+			children: ERRORS[error] ?? "Sign-in did not finish. Try again."
+		}) : null]
 	});
 }
 export default async function Page({ request }) {

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/frame/{drawer.b337ce209ff621e9.js → drawer.8287e5a02144e4f1.js}

@@ -1,15 +1,17 @@
 "use client";
-import "./drawer.e8201d78154045bc.css.pnext-asset.js";
+import "./drawer.0b0220d1edabce29.css.pnext-asset.js";
 import { useEffect, useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
 import { usePathname } from "../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
-import { iMenu } from "../ui/icons.1777c0350d5d215e.js";
-import { Icon } from "../ui/icon.0874ca2f58f7db14.js";
+import { iMenu } from "../ui/icons.a34176f37808cd66.js";
+import { IconButton } from "../ui/button.983daea9e687fc5d.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 /** The phone layout's navigation drawer: its button and the scrim behind it; Escape or a new page closes it. */
 export function Drawer() {
-	const [open, setOpen] = useState(false);
 	const path = usePathname();
-	useEffect(() => setOpen(false), [path]);
+	// Open on the page it opened on, so a new page closes it.
+	const [openOn, setOpenOn] = useState();
+	const open = openOn === path;
+	const setOpen = (next) => setOpenOn(next ? path : undefined);
 	useEffect(() => {
 		document.documentElement.classList.toggle("drawer", open);
 		if (!open) return;
@@ -17,12 +19,11 @@ export function Drawer() {
 		addEventListener("keydown", onKey);
 		return () => removeEventListener("keydown", onKey);
 	}, [open]);
-	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx("button", {
-		type: "button",
-		class: "icon-btn only-m",
-		"aria-label": "Open navigation",
-		onClick: () => setOpen(!open),
-		children: /* @__PURE__ */ _jsx(Icon, { d: iMenu })
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(IconButton, {
+		icon: iMenu,
+		label: "Open navigation",
+		class: "only-m",
+		onClick: () => setOpen(!open)
 	}), /* @__PURE__ */ _jsx("div", {
 		class: "scrim",
 		onClick: () => setOpen(false)

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/frame/foreign-link.86f0cc228353da6e.js

@@ -0,0 +1,28 @@
+"use client";
+import { iAlert } from "../ui/icons.a34176f37808cd66.js";
+import { Button } from "../ui/button.983daea9e687fc5d.js";
+import { Modal } from "../ui/modal.b5f74ebf59590fa6.js";
+import { jsx as _jsx } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+/** Opened from a link of a workspace this account is not in: says so, and offers signing in as another account. */
+export function ForeignLink({ link }) {
+	const again = `/api/auth/sign-in?${new URLSearchParams({
+		return: link,
+		prompt: "login"
+	})}`;
+	return /* @__PURE__ */ _jsx(Modal, {
+		class: "outcome-dialog",
+		tone: "warning",
+		title: "Not in this workspace",
+		icon: iAlert,
+		cancel: "Stay here",
+		actions: /* @__PURE__ */ _jsx(Button, {
+			href: again,
+			children: "Sign in with another account"
+		}),
+		onClose: () => history.replaceState(history.state, "", location.pathname),
+		children: /* @__PURE__ */ _jsx("p", {
+			role: "status",
+			children: "The link you followed does not belong to this workspace."
+		})
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/frame/{heads.fa2157b3b36647f3.js → heads.20414ddcb2d08bcd.js}

@@ -16,31 +16,35 @@ export const HEADS = {
 };
 /** Back to the section a link came from, named in the link as `from`, or to the page's own list. */
 export function backFrom(from, list) {
-	const task = from?.match(/^\/dash\/tasks\/([^\/?]+)$/);
+	const task = from?.match(/^\/dash\/([^\/?]+)\/tasks\/([^\/?]+)$/);
 	if (task) return {
-		href: "/dash/tasks/[id]",
-		params: { id: decodeURIComponent(task[1]) },
+		href: "/dash/[org]/tasks/[id]",
+		params: {
+			org: decodeURIComponent(task[1]),
+			id: decodeURIComponent(task[2])
+		},
 		label: "Task"
 	};
-	const section = from?.match(/^\/dash\/(usage|agents|tasks)(?:\?(.*))?$/);
+	const section = from?.match(/^\/dash\/([^\/?]+)\/(usage|agents|tasks)(?:\?(.*))?$/);
 	if (!section) return list;
-	const search = new URLSearchParams(section[2] ?? "");
-	const label = HEADS[section[1]].title;
-	if (section[1] === "usage") return {
-		href: "/dash/usage",
-		params: {},
+	const params = { org: decodeURIComponent(section[1]) };
+	const search = new URLSearchParams(section[3] ?? "");
+	const label = HEADS[section[2]].title;
+	if (section[2] === "usage") return {
+		href: "/dash/[org]/usage",
+		params,
 		search,
 		label
 	};
-	if (section[1] === "agents") return {
-		href: "/dash/agents",
-		params: {},
+	if (section[2] === "agents") return {
+		href: "/dash/[org]/agents",
+		params,
 		search,
 		label
 	};
 	return {
-		href: "/dash/tasks",
-		params: {},
+		href: "/dash/[org]/tasks",
+		params,
 		search,
 		label
 	};

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/frame/loading-card.0c6ac62ff3ccf38a.js

@@ -0,0 +1,40 @@
+import { Button } from "../ui/button.983daea9e687fc5d.js";
+import { Card, Loading } from "../ui/card.c08471eaa0bc1cec.js";
+import { LoadingFilter } from "../ui/filter.1983b85dd0679af6.js";
+import { Select } from "../ui/select.36c6f21ce6aa720f.js";
+import { Search, Toolbar } from "../ui/toolbar.9621ef221a896a8e.js";
+import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+export const BLANK = "\xA0";
+/** `Loading` inside the box its data fills, titled as that box. */
+export function LoadingCard({ title, label, h }) {
+	return /* @__PURE__ */ _jsx(Card, {
+		title,
+		children: /* @__PURE__ */ _jsx(Loading, {
+			label,
+			h
+		})
+	});
+}
+/** A list's toolbar while the list loads: the same title and controls, inert until the list is live. */
+export function LoadingToolbar({ head, search, selects = [], more, action }) {
+	return /* @__PURE__ */ _jsxs(Toolbar, {
+		head,
+		action: action ? /* @__PURE__ */ _jsx(Button, {
+			disabled: true,
+			leftIcon: action.icon,
+			children: action.label
+		}) : undefined,
+		children: [
+			/* @__PURE__ */ _jsx(Search, {
+				label: search,
+				disabled: true
+			}),
+			selects.map((label) => /* @__PURE__ */ _jsx(Select, {
+				label,
+				options: [["", label]],
+				disabled: true
+			}, label)),
+			more ? /* @__PURE__ */ _jsx(LoadingFilter, {}) : null
+		]
+	});
+}

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/frame/{page-head.a2336c95004aed4b.js → page-head.bd54e52ac4a7a89c.js}

@@ -1,9 +1,11 @@
-import "./page-head.a6e3c4204ca45e94.css.pnext-asset.js";
-import { iLeft } from "../ui/icons.1777c0350d5d215e.js";
+import "./page-head.364ec93a8e7857b3.css.pnext-asset.js";
+import { iLeft } from "../ui/icons.a34176f37808cd66.js";
 import { Link } from "../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
-import { HEADS } from "./heads.fa2157b3b36647f3.js";
+import { linkOf } from "../nav/to.a2c840c09bd4bf4a.js";
+import { HEADS } from "./heads.20414ddcb2d08bcd.js";
 import { Icon } from "../ui/icon.0874ca2f58f7db14.js";
-import { Sentinel } from "../ui/sentinel.d3d29747fe976f88.js";
+import { Sentinel } from "../ui/sentinel.17cffebfc3103b9f.js";
+import { BLANK } from "./loading-card.0c6ac62ff3ccf38a.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 export function Page({ narrow, children }) {
 	return /* @__PURE__ */ _jsx("div", {
@@ -16,7 +18,7 @@ function backTo(back) {
 	if (!back?.startsWith("/")) return;
 	const url = new URL(back, "http://dash");
 	if (url.origin !== "http://dash" || !/^\/dash(\/|$)/.test(url.pathname)) return;
-	const [, , section, slug] = url.pathname.split("/");
+	const [, , , section, slug] = url.pathname.split("/");
 	let label = HEADS[section]?.title ?? "Back";
 	if (section === "agents" && slug) try {
 		label = decodeURIComponent(slug);
@@ -30,16 +32,22 @@ function backTo(back) {
 	};
 }
 /** Back to the logical parent, wherever the visitor came from; a `back` search param wins. */
-export function Back({ label, back, ...to }) {
+export function Back({ label, back, named, ...to }) {
 	const param = backTo(back);
-	const name = param?.label ?? label;
+	const name = named ?? param?.label ?? label;
 	return /* @__PURE__ */ _jsxs(Link, {
 		class: "back",
 		"aria-label": name,
-		...param?.to ?? to,
+		...linkOf(param?.to ?? to),
 		children: [/* @__PURE__ */ _jsx(Icon, { d: iLeft }), /* @__PURE__ */ _jsx("span", { children: name })]
 	});
 }
+/** A `Back` before its page arrives: the arrow, inert. */
+export const LoadingBack = () => /* @__PURE__ */ _jsxs("span", {
+	class: "back",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ _jsx(Icon, { d: iLeft }), BLANK]
+});
 /** The page title row with its meta and actions, and one muted lead line; it sticks under the top bar and turns compact there. */
 export function PageHead({ title, lead, actions, meta, back }) {
 	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(Sentinel, {}), /* @__PURE__ */ _jsxs("header", {

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/frame/{stream.77a2ec038d97b2b8.js → stream.1cc355a530dcc5e3.js}

@@ -1,6 +1,6 @@
 import { Suspense } from "../../../../../../../node_modules/preact/compat/dist/compat.mjs";
-import { signedOut } from "../../api/load.35be1b07171553e7.js";
-import { Card } from "../ui/card.b0873d38765c9d20.js";
+import { signedOut } from "../../api/load.4f942c7f68b2e273.js";
+import { Card } from "../ui/card.c08471eaa0bc1cec.js";
 import { reasonText } from "../../utils/format.6a7d1beaf4d09d9c.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 /** A section that waits for `load`, under the route's loading frame; a failure stays inside it. */

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/frame/{task-toasts.10b46a8b8db1791f.js → task-toasts.63f673632770924d.js}

@@ -1,11 +1,12 @@
 "use client";
-import "./@/comps/ui/toast.a4c3e977997216cf.css.pnext-asset.js";
+import "./task-toasts.d13d9f628e530552.css.pnext-asset.js";
 import { useEffect, useRef, useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { serverEvents } from "../../../../client/index.b7c6e5f49704993d.js";
-import { client } from "../../utils/client.a8205c524e63d4a9.js";
+import { serverEvents } from "../../../../client/index.8e150ef2bc6a5f4e.js";
+import { client } from "../../utils/client.d25e6dcc6704eb60.js";
 import { Link } from "../../../../../../../node_modules/@wular/pnext/src/api/link.tsx";
 import { usePathname, useRouter } from "../../../../../../../node_modules/@wular/pnext/src/api/client-navigation.ts";
-import { Status, STATUS_LABEL } from "../../app/dash/tasks/list/status.b90b76ffa62e957a.js";
+import { Status, STATUS_LABEL } from "../../app/dash/[org]/tasks/list/status.16190fdd5fd7daad.js";
+import { useOrg } from "../nav/org.4d84ad0ac340fbe2.js";
 import { jsx as _jsx, jsxs as _jsxs } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const WATCHED = "coder:watched";
 export const NOTIFY = "coder:notify";
@@ -25,6 +26,9 @@ const TASK = "coder:task";
 const REPLAY = "coder:task-replay";
 const RESET = "coder:task-reset";
 const RESYNC = "coder:task-resync";
+const COUNTS = "coder:task-counts";
+const COUNTS_REPLAY = "coder:task-counts-replay";
+const RUNNERS = "coder:runners";
 // A write that commits past the server's look-back still reaches shown pages within this, through a fresh read.
 const RESYNC_MS = 6e4;
 // Latest events a tab keeps, so a page that mounts later starts from them.
@@ -42,13 +46,13 @@ const save = (all) => {
 	dispatchEvent(new Event(WATCHED));
 };
 /** A toast for an action whose page has no room for its outcome. */
-export const showToast = (title, line, err) => dispatchEvent(new CustomEvent(TOAST, { detail: {
+export const showToast = (title, line, tone) => dispatchEvent(new CustomEvent(TOAST, { detail: {
 	title,
 	line,
-	err
+	tone
 } }));
-export const toastError = (title, line) => showToast(title, line, true);
-/** Remembers a task this browser started or opened, so its finish shows a toast on any page. */
+export const toastError = (title, line) => showToast(title, line, "error");
+/** Remembers a task this browser started or opened, so its finish shows a toast on any page of its organization. */
 export function watchTask(id, status, title) {
 	const all = read();
 	const entry = all[id];
@@ -57,11 +61,12 @@ export function watchTask(id, status, title) {
 	all[id] = {
 		title: title || entry?.title || id,
 		status,
-		at: entry?.at ?? Date.now()
+		at: entry?.at ?? Date.now(),
+		org: entry?.org ?? location.pathname.split("/")[2]
 	};
 	save(all);
 }
-const openTask = (path) => /^\/dash\/tasks\/([^/]+)$/.exec(path)?.[1];
+const openTask = (path) => /^\/dash\/[^/]+\/tasks\/([^/]+)$/.exec(path)?.[1];
 function lineOf(live) {
 	const text = (value) => typeof value === "string" ? value.trim().split("\n")[0] : "";
 	const approval = live.approval ?? {};
@@ -97,8 +102,8 @@ export function useTaskEvents(on, reset, resync) {
 		};
 	}, []);
 }
-/** One events stream per browser: the tab holding the lock reads it, shares it on a channel, and a tab that takes over resumes from the last event id. */
-function useEventsStream(ids, leading) {
+/** One events stream per browser and organization: the tab holding the lock reads it, shares it on a channel, and a tab that takes over resumes from the last event id. */
+function useEventsStream(ids, leading, org) {
 	const asked = useRef(ids);
 	asked.current = ids;
 	const current = useRef();
@@ -115,7 +120,10 @@ function useEventsStream(ids, leading) {
 			for (const each of latest.values()) event.detail(each);
 		};
 		addEventListener(REPLAY, replay);
-		const channel = typeof BroadcastChannel !== "undefined" && navigator.locks ? new BroadcastChannel(EVENTS) : undefined;
+		let counts;
+		const replayCounts = (event) => counts && event.detail(counts);
+		addEventListener(COUNTS_REPLAY, replayCounts);
+		const channel = typeof BroadcastChannel !== "undefined" && navigator.locks ? new BroadcastChannel(`${EVENTS}:${org}`) : undefined;
 		const abort = new AbortController();
 		let last;
 		let wake = () => {};
@@ -123,6 +131,11 @@ function useEventsStream(ids, leading) {
 		const receive = (message) => {
 			last = message.id ?? last;
 			if (message.event) deliver(message.event);
+			if (message.counts) {
+				counts = message.counts;
+				dispatchEvent(new CustomEvent(COUNTS, { detail: counts }));
+			}
+			if (message.runners) dispatchEvent(new CustomEvent(RUNNERS, { detail: message.runners }));
 			if (message.resync) dispatchEvent(new Event(RESYNC));
 			if (!message.reset) return;
 			latest.clear();
@@ -130,7 +143,7 @@ function useEventsStream(ids, leading) {
 		};
 		channel?.addEventListener("message", ({ data }) => {
 			if (!data.hello) return receive(data);
-			// A tab that just loaded, maybe into another workspace: the next stream resumes for it too.
+			// A tab that just loaded: the next stream resumes for it too.
 			soon ??= setTimeout(() => {
 				soon = undefined;
 				current.current?.abort.abort();
@@ -173,6 +186,8 @@ function useEventsStream(ids, leading) {
 						const message = {
 							...id ? { id } : {},
 							...event === "task" ? { event: JSON.parse(data) } : {},
+							...event === "counts" ? { counts: JSON.parse(data) } : {},
+							...event === "runners" ? { runners: JSON.parse(data) } : {},
 							...event === "reset" ? { reset: true } : {}
 						};
 						channel?.postMessage(message);
@@ -192,7 +207,7 @@ function useEventsStream(ids, leading) {
 				wake = () => {};
 			}
 		};
-		if (channel) void navigator.locks.request(EVENTS, { signal: abort.signal }, lead).catch(() => {});
+		if (channel) void navigator.locks.request(`${EVENTS}:${org}`, { signal: abort.signal }, lead).catch(() => {});
 		else void lead();
 		return () => {
 			abort.abort();
@@ -200,26 +215,63 @@ function useEventsStream(ids, leading) {
 			clearTimeout(soon);
 			channel?.close();
 			removeEventListener(REPLAY, replay);
+			removeEventListener(COUNTS_REPLAY, replayCounts);
 		};
 	}, []);
 	useEffect(() => {
 		if (current.current && current.current.key !== key) current.current.abort.abort();
 	}, [key]);
 }
-function Item({ toast, dismiss }) {
+/** Hears the runners this person sees whenever one is added, changed, removed, or goes on or offline. */
+export function useRunnerEvents(on) {
+	const handler = useRef(on);
+	handler.current = on;
+	useEffect(() => {
+		const listener = (event) => handler.current(event.detail);
+		addEventListener(RUNNERS, listener);
+		return () => removeEventListener(RUNNERS, listener);
+	}, []);
+}
+/** The workspace's active tasks, as the events stream counts them. */
+export function ActiveCount() {
+	const [active, setActive] = useState();
 	useEffect(() => {
-		const timer = setTimeout(() => dismiss(toast.key), TTL);
-		return () => clearTimeout(timer);
+		const on = (event) => setActive(event.detail.active);
+		addEventListener(COUNTS, on);
+		dispatchEvent(new CustomEvent(COUNTS_REPLAY, { detail: (counts) => setActive(counts.active) }));
+		return () => removeEventListener(COUNTS, on);
 	}, []);
+	return active ? /* @__PURE__ */ _jsx("span", {
+		class: "n",
+		title: `${active} active`,
+		children: active
+	}) : null;
+}
+function Item({ toast, paused, dismiss }) {
+	const org = useOrg();
+	// Paused, it keeps the time it has left.
+	const left = useRef(TTL);
+	useEffect(() => {
+		if (paused) return;
+		const started = Date.now();
+		const timer = setTimeout(() => dismiss(toast.key), left.current);
+		return () => {
+			clearTimeout(timer);
+			left.current -= Date.now() - started;
+		};
+	}, [paused]);
 	return /* @__PURE__ */ _jsxs("div", {
-		class: toast.err ? "toast err" : "toast",
+		class: toast.tone ? `toast ${toast.tone}` : "toast",
 		onClick: () => dismiss(toast.key),
 		children: [/* @__PURE__ */ _jsxs("p", {
 			class: "toast-head",
 			children: [toast.id ? /* @__PURE__ */ _jsx(Link, {
 				class: "cover",
-				href: "/dash/tasks/[id]",
-				params: { id: toast.id },
+				href: "/dash/[org]/tasks/[id]",
+				params: {
+					org,
+					id: toast.id
+				},
 				children: toast.title
 			}) : /* @__PURE__ */ _jsx("span", {
 				class: "cover",
@@ -233,10 +285,15 @@ function Item({ toast, dismiss }) {
 }
 /** Toasts at the bottom right when a watched task finishes or needs approval, except on its own page. */
 export function TaskToasts() {
+	const org = useOrg();
 	const path = usePathname();
 	const nav = useRouter();
 	const [watched, setWatched] = useState({});
 	const [toasts, setToasts] = useState([]);
+	// Every toast waits while the pointer or focus is on the stack, or the window is in the background.
+	const [hovered, setHovered] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const [away, setAway] = useState(false);
 	const open = useRef(openTask(path));
 	open.current = openTask(path);
 	// Each tab's own last status per task, so every tab toasts a change once.
@@ -273,11 +330,18 @@ export function TaskToasts() {
 		addEventListener("keydown", onKey);
 		return () => removeEventListener("keydown", onKey);
 	}, [toasts.length]);
+	// The top layer keeps toasts above an open modal; reopening raises them over a newer one.
+	const stack = useRef(null);
+	useEffect(() => {
+		const el = stack.current;
+		if (el.matches(":popover-open")) el.hidePopover();
+		if (toasts.length) el.showPopover();
+	}, [toasts[0]?.key]);
 	const dismiss = (key) => setToasts((list) => list.filter((toast) => toast.key !== key));
 	useTaskEvents((event) => {
 		const all = read();
 		const seen = all[event.id];
-		if (!seen) return;
+		if (seen?.org !== org) return;
 		if (event.deleted) {
 			delete all[event.id];
 			return save(all);
@@ -308,16 +372,36 @@ export function TaskToasts() {
 		});
 		notice.onclick = () => {
 			focus();
-			nav.push("/dash/tasks/[id]", { params: { id } });
+			nav.push("/dash/[org]/tasks/[id]", { params: {
+				org,
+				id
+			} });
 		};
 	};
-	useEventsStream(Object.entries(watched).filter(([, entry]) => !DONE.has(entry.status)).map(([id]) => id), leading);
+	useEventsStream(Object.entries(watched).filter(([, entry]) => entry.org === org && !DONE.has(entry.status)).map(([id]) => id), leading, org);
+	useEffect(() => {
+		const leave = () => setAway(true);
+		const back = () => setAway(false);
+		addEventListener("blur", leave);
+		addEventListener("focus", back);
+		return () => {
+			removeEventListener("blur", leave);
+			removeEventListener("focus", back);
+		};
+	}, []);
 	return /* @__PURE__ */ _jsx("section", {
+		ref: stack,
 		class: "toasts",
+		popover: "manual",
 		"aria-label": "Task updates",
 		"aria-live": "polite",
+		onPointerOver: () => setHovered(true),
+		onPointerOut: (event) => setHovered(Boolean(stack.current?.contains(event.relatedTarget))),
+		onFocusIn: () => setFocused(true),
+		onFocusOut: (event) => setFocused(Boolean(stack.current?.contains(event.relatedTarget))),
 		children: toasts.map((toast) => /* @__PURE__ */ _jsx(Item, {
 			toast,
+			paused: hovered || focused || away,
 			dismiss
 		}, toast.key))
 	});

package/dist/dash/standalone/server/modules-server-server-react-server/src/server/dash/comps/frame/{theme-choices.ea23f57dd753683f.js → theme-choices.5f59814a635caeec.js}

@@ -1,8 +1,8 @@
 "use client";
 import { useState } from "../../../../../../../node_modules/preact/hooks/dist/hooks.mjs";
-import { iCheck, iMonitor, iMoon, iSun } from "../ui/icons.1777c0350d5d215e.js";
-import { Icon } from "../ui/icon.0874ca2f58f7db14.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
+import { iMonitor, iMoon, iSun } from "../ui/icons.a34176f37808cd66.js";
+import { MenuRadio } from "../ui/menu-items.a8e580a0c90631ff.js";
+import { jsx as _jsx, Fragment as _Fragment } from "../../../../../../../node_modules/preact/jsx-runtime/dist/jsxRuntime.mjs";
 const YEAR = 60 * 60 * 24 * 365;
 const THEMES = [
 	[
@@ -31,19 +31,10 @@ export function ThemeChoices({ theme: initial }) {
 		document.cookie = `theme=${value}; path=/; max-age=${YEAR}; samesite=lax`;
 		setTheme(value);
 	};
-	return /* @__PURE__ */ _jsx(_Fragment, { children: THEMES.map(([value, label, icon]) => /* @__PURE__ */ _jsxs("button", {
-		type: "button",
-		class: "pop-item",
-		role: "menuitemradio",
-		"aria-checked": theme === value,
-		onClick: () => pick(value),
-		children: [
-			/* @__PURE__ */ _jsx(Icon, { d: icon }),
-			/* @__PURE__ */ _jsx("span", {
-				class: "grow",
-				children: label
-			}),
-			/* @__PURE__ */ _jsx(Icon, { d: iCheck })
-		]
+	return /* @__PURE__ */ _jsx(_Fragment, { children: THEMES.map(([value, label, icon]) => /* @__PURE__ */ _jsx(MenuRadio, {
+		on: theme === value,
+		onPick: () => pick(value),
+		icon,
+		children: label
 	}, value)) });
 }