@kky42/pievo-server 1.0.0

package/.output/server/_ssr/DashboardView-CC7htv28.mjs

@@ -0,0 +1,2795 @@
+import { o as __toESM } from "../_runtime.mjs";
+import { C as require_jsx_runtime, S as require_react, c as TooltipProvider } from "../_libs/@base-ui/react+[...].mjs";
+import { A as selectCls, C as labelCls, E as rel, N as useHydrated, S as isCompleted, _ as fmt, b as inputCls, c as btnDanger, f as btnSm, h as dotLabel, l as btnPrimary, o as btn, p as cronText, r as Pill, t as ErrorBanner, u as btnPrimaryPill, w as lastRunOf, x as isClosed } from "./ui-Dej2qjuS.mjs";
+import { d as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
+import { _ as loadOlderRuns, h as listMyTeams, m as listJobs, n as claimStatus, u as getConfig, v as mintClaim } from "./loopApi-Cxe8WyOB.mjs";
+import { n as ModalHead, r as ModalSection, t as Modal } from "./Modal-DpKZHLZK.mjs";
+import { i as PievoLogo, n as GitHubIcon, r as LoopPlaybook, t as GITHUB_URL } from "./LoopPlaybook-BXH8mhiX.mjs";
+import { t as setActiveTeamCookie } from "./teamCookie-B7hLOIie.mjs";
+import { a as getTeamDetail, d as revokeTeamInvite, f as setTeamMemberRole, i as deleteTeam, l as removeTeamMember, n as createTeam, o as leaveTeam, r as createTeamInvite, s as listManagedTeams, t as addTeamMember, u as renameTeam } from "./teamFns-DA4ovI5g.mjs";
+import { r as deriveLoopLifecycle } from "./lifecycleUi-C9lg1r3r.mjs";
+import { a as listChannels, c as testChannel, i as deleteChannel, n as Timeline, o as listMachines, r as createChannel, s as mergeRuns, t as MachinesModal } from "./notifyFns-Q458pZmE.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/DashboardView-CC7htv28.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+function LoopCard({ job, onOpen, onPickRun }) {
+	const en = job.enabled;
+	const last = lastRunOf(job);
+	const completed = isCompleted(job);
+	const lifecycle = deriveLoopLifecycle(job);
+	const closedActive = isClosed(job) && !completed;
+	const hydrated = useHydrated();
+	const [older, setOlder] = (0, import_react.useState)([]);
+	const runs = (0, import_react.useMemo)(() => older.length ? mergeRuns(job.runs ?? [], older) : job.runs ?? [], [job.runs, older]);
+	const loadMore = async () => {
+		const oldest = runs[0];
+		if (!oldest) return 0;
+		const more = await loadOlderRuns({ data: {
+			loopId: job.id,
+			beforeTs: oldest.ts,
+			limit: 16
+		} });
+		if (more.length) setOlder((prev) => mergeRuns(prev, more));
+		return more.length;
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		onClick: () => onOpen(job.id),
+		className: `mb-[18px] cursor-pointer rounded-card border border-hairline bg-surface px-[26px] pb-5 pt-[22px] shadow-card transition-colors hover:border-wire ${en ? "" : "opacity-60"}`,
+		style: { animation: "fadeIn .25s cubic-bezier(0.25,0.1,0.25,1) both" },
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mb-6 flex flex-wrap items-center gap-3",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: (e) => {
+							e.stopPropagation();
+							onOpen(job.id);
+						},
+						className: "cursor-pointer rounded-sm text-left text-[17px] font-semibold tracking-[-0.01em] text-display outline-none focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-4 focus-visible:ring-offset-surface",
+						children: job.name
+					}),
+					lifecycle === "stopping" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+						tone: "running",
+						dot: "pulse",
+						children: "Stopping"
+					}) : lifecycle === "paused-finishing" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: "Paused · current run finishing" }) : lifecycle === "deleting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: "Deleting" }) : job.running ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+						tone: "running",
+						dot: "pulse",
+						children: "Running"
+					}) : job.queued ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+						tone: "outline",
+						children: "Queued"
+					}) : null,
+					job.graduation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: job.graduation }),
+					completed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+						tone: "success",
+						dot: "green",
+						children: "Completed"
+					}),
+					!completed && closedActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+						tone: "success",
+						title: job.goal ?? void 0,
+						children: "Goal"
+					}),
+					!completed && lifecycle === "paused" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: "Paused" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "ml-auto whitespace-nowrap text-meta text-secondary",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-primary",
+								title: job.cron,
+								children: job.scheduleMode === "continuous" ? `continuous · ${job.continuousDelayMinutes}m` : cronText(job.cron)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "mx-2.5 text-wire",
+								children: "·"
+							}),
+							job.kind
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Timeline, {
+				job,
+				runs,
+				total: job.runCount,
+				onLoadMore: loadMore,
+				onPickRun: (run) => onPickRun(job.id, run)
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-[18px] flex items-center gap-2 text-label text-secondary",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [job.runCount, " runs"] }), last && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+					"· last ",
+					dotLabel(last),
+					hydrated && ` · ${rel(last.ts)}`
+				] })]
+			}),
+			completed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-1.5 text-label text-success",
+				children: [
+					"Completed",
+					job.completedAt ? ` · ${fmt(job.completedAt)}` : "",
+					job.completionReason && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "text-secondary",
+						children: [" - ", job.completionReason]
+					})
+				]
+			})
+		]
+	});
+}
+/**
+* Header team entry. Always visible when team data exists: a single-team user
+* sees a quiet pill naming the active team (so the workspace context is never
+* invisible); anyone who can reach more than one team gets the select.
+*
+* Switching NAVIGATES to `/t/<id>` (the explicit team URL — bookmarkable, and
+* each tab keeps its own team). The cookie is still written, now only as the
+* last-used default that the bare `/` redirect falls back to (no longer an
+* authorization key). The navigation (and the route's `key={teamId}` remount) is
+* what re-scopes the dashboard, so no refresh callback is needed.
+*/
+function TeamSwitcher({ data }) {
+	const navigate = useNavigate();
+	if (!data || data.teams.length === 0) return null;
+	const selectTeam = (id) => {
+		setActiveTeamCookie(id);
+		navigate({
+			to: "/t/$teamId",
+			params: { teamId: id }
+		});
+	};
+	if (data.teams.length === 1) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		title: "Active team",
+		className: "inline-flex items-center rounded-full bg-raised px-3 py-1 text-label font-medium text-secondary",
+		children: data.teams[0].name
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
+		"aria-label": "Active team",
+		value: data.activeTeamId,
+		onChange: (e) => selectTeam(e.target.value),
+		className: "lp-select cursor-pointer rounded-full bg-raised py-1 pl-3 text-label font-medium text-secondary outline-none transition-colors hover:text-display",
+		children: data.teams.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+			value: t.id,
+			children: t.name
+		}, t.id))
+	});
+}
+var FORMS = {
+	telegram: {
+		label: "Telegram",
+		help: "Create a bot with @BotFather, then DM it once so it can message you.",
+		fields: [{
+			key: "botToken",
+			label: "Bot token",
+			ph: "123456:ABC-DEF…"
+		}, {
+			key: "chatId",
+			label: "Chat id",
+			ph: "e.g. 87654321 (message @userinfobot to get yours)"
+		}]
+	},
+	feishu: {
+		label: "Feishu",
+		help: "In a Feishu group: 设置 → 机器人 → 添加自定义机器人. Pick a security setting (signing recommended; paste the secret below if you enabled 签名校验).",
+		fields: [{
+			key: "webhookUrl",
+			label: "Webhook URL",
+			ph: "https://open.feishu.cn/open-apis/bot/v2/hook/…"
+		}, {
+			key: "secret",
+			label: "Signing secret (optional)",
+			ph: "only if you enabled 签名校验",
+			optional: true
+		}]
+	}
+};
+var ADDABLE = ["telegram", "feishu"];
+function typeLabel(type) {
+	return FORMS[type]?.label ?? (type === "slack" ? "Slack" : type);
+}
+function NotificationsModal({ open, onClose }) {
+	const [channels, setChannels] = (0, import_react.useState)([]);
+	const [adding, setAdding] = (0, import_react.useState)(null);
+	const [name, setName] = (0, import_react.useState)("");
+	const [fields, setFields] = (0, import_react.useState)({});
+	const [busy, setBusy] = (0, import_react.useState)(false);
+	const [err, setErr] = (0, import_react.useState)(null);
+	const [test, setTest] = (0, import_react.useState)({});
+	const load = (0, import_react.useCallback)(async () => {
+		try {
+			setChannels(await listChannels());
+		} catch {}
+	}, []);
+	(0, import_react.useEffect)(() => {
+		if (!open) {
+			setErr(null);
+			setAdding(null);
+			return;
+		}
+		load();
+	}, [open, load]);
+	function startAdd(type) {
+		setName("");
+		setFields({});
+		setErr(null);
+		setAdding(type);
+	}
+	const spec = adding ? FORMS[adding] : null;
+	const filled = !!name.trim() && !!spec && spec.fields.every((f) => f.optional || fields[f.key]?.trim());
+	async function add() {
+		if (!adding || !spec) return;
+		setErr(null);
+		setBusy(true);
+		try {
+			const config = Object.fromEntries(spec.fields.filter((f) => fields[f.key]?.trim()).map((f) => [f.key, fields[f.key].trim()]));
+			const r = await createChannel({ data: {
+				type: adding,
+				name: name.trim(),
+				config
+			} });
+			if (!r.ok) {
+				setErr(r.error ?? "Could not save this channel.");
+				return;
+			}
+			setAdding(null);
+			await load();
+		} finally {
+			setBusy(false);
+		}
+	}
+	async function remove(id) {
+		setErr(null);
+		const r = await deleteChannel({ data: id });
+		if (!r.ok) {
+			setErr(r.error ?? "Could not delete this channel.");
+			return;
+		}
+		await load();
+	}
+	async function runTest(id) {
+		setTest((t) => ({
+			...t,
+			[id]: "sending"
+		}));
+		const r = await testChannel({ data: id });
+		setTest((t) => ({
+			...t,
+			[id]: r.ok ? "ok" : r.error || "failed"
+		}));
+		setTimeout(() => setTest((t) => ({
+			...t,
+			[id]: ""
+		})), 4e3);
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Modal, {
+		open,
+		onClose,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalHead, {
+				title: "Notifications",
+				sub: "Push channels for this team. A loop routes its run messages to the channel you pick on it."
+			}),
+			err && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, {
+				message: err,
+				onDismiss: () => setErr(null),
+				className: "mb-2 mt-3"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalSection, { children: "Channels" }),
+			channels.length === 0 && !adding && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "py-3 text-body text-secondary",
+				children: "No channels yet."
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+				className: "flex flex-col gap-2",
+				children: channels.map((c) => {
+					const t = test[c.id];
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+						className: "flex items-center justify-between gap-3 rounded-control border border-hairline bg-surface px-4 py-3",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-0 items-center gap-2.5",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-[15px] font-medium text-display",
+								children: c.name
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: "text-label text-secondary",
+								children: [
+									typeLabel(c.type),
+									" · ",
+									c.hint
+								]
+							})]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex shrink-0 items-center gap-2",
+							children: [
+								t && t !== "sending" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: `inline-flex h-[22px] items-center gap-1.5 rounded-full px-2.5 text-caption font-medium ${t === "ok" ? "bg-success-soft text-success" : "bg-accent-soft text-accent"}`,
+									title: t === "ok" ? void 0 : t,
+									children: t === "ok" ? "Sent ✓" : "Failed"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+									className: btn,
+									disabled: t === "sending",
+									onClick: () => void runTest(c.id),
+									children: t === "sending" ? "Sending…" : "Test"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+									className: btnDanger,
+									onClick: () => void remove(c.id),
+									children: "Delete"
+								})
+							]
+						})]
+					}, c.id);
+				})
+			}),
+			adding && spec ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-4 rounded-control border border-hairline bg-raised px-4 py-3",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ModalSection, { children: [
+						"New ",
+						spec.label,
+						" channel"
+					] }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+						className: labelCls,
+						children: "Name"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+						className: inputCls,
+						value: name,
+						onChange: (e) => setName(e.target.value),
+						placeholder: "e.g. My alerts"
+					}),
+					spec.fields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+						className: labelCls,
+						children: f.label
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+						className: `${inputCls} font-mono`,
+						value: fields[f.key] ?? "",
+						onChange: (e) => setFields((s) => ({
+							...s,
+							[f.key]: e.target.value
+						})),
+						placeholder: f.ph
+					})] }, f.key)),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "mt-1 text-label text-secondary",
+						children: spec.help
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "mt-4 flex justify-end gap-2",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							className: btn,
+							onClick: () => setAdding(null),
+							children: "Cancel"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							className: btnPrimary,
+							disabled: busy || !filled,
+							onClick: () => void add(),
+							children: busy ? "Saving…" : "Save channel"
+						})]
+					})
+				]
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-6 flex gap-2",
+				children: ADDABLE.map((type) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+					className: btnPrimary,
+					onClick: () => startAdd(type),
+					children: ["+ Add ", FORMS[type]?.label ?? type]
+				}, type))
+			})
+		]
+	});
+}
+function inviteUrl(token) {
+	return `${typeof window !== "undefined" ? window.location.origin : ""}/invite/${token}`;
+}
+function CopyLink({ text }) {
+	const [done, setDone] = (0, import_react.useState)(false);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		className: btnSm,
+		onClick: () => {
+			navigator.clipboard?.writeText(text);
+			setDone(true);
+			setTimeout(() => setDone(false), 1400);
+		},
+		children: done ? "Copied ✓" : "Copy link"
+	});
+}
+/**
+* Team settings — the owner-facing surface for the full lifecycle: create,
+* rename, members (add-by-email + role + remove), invite links, leave, and
+* delete (with the blocked-while-loops explanation). A master list of the
+* caller's teams on the left; the selected team's detail below. Every action
+* calls an EXPLICIT-teamId server fn (never the active cookie), so managing team
+* B while the dashboard is on team A works. Owner-only controls are hidden for a
+* plain member (the server re-authorizes regardless).
+*/
+function TeamsModal({ open, onClose, activeTeamId }) {
+	const navigate = useNavigate();
+	const [teams, setTeams] = (0, import_react.useState)([]);
+	const [selected, setSelected] = (0, import_react.useState)(null);
+	const [detail, setDetail] = (0, import_react.useState)(null);
+	const [err, setErr] = (0, import_react.useState)(null);
+	const [busy, setBusy] = (0, import_react.useState)(false);
+	const [newName, setNewName] = (0, import_react.useState)("");
+	const [renameVal, setRenameVal] = (0, import_react.useState)("");
+	const [email, setEmail] = (0, import_react.useState)("");
+	const [addRole, setAddRole] = (0, import_react.useState)("member");
+	const [inviteRole, setInviteRole] = (0, import_react.useState)("member");
+	const [freshInvite, setFreshInvite] = (0, import_react.useState)(null);
+	const loadTeams = (0, import_react.useCallback)(async () => {
+		try {
+			setTeams(await listManagedTeams());
+		} catch {}
+	}, []);
+	const loadDetail = (0, import_react.useCallback)(async (teamId) => {
+		const d = await getTeamDetail({ data: teamId });
+		if ("error" in d) {
+			setErr(d.error);
+			setDetail(null);
+			return;
+		}
+		setDetail(d);
+		setRenameVal(d.name);
+	}, []);
+	(0, import_react.useEffect)(() => {
+		if (!open) {
+			setErr(null);
+			setSelected(null);
+			setDetail(null);
+			setFreshInvite(null);
+			return;
+		}
+		loadTeams();
+	}, [open, loadTeams]);
+	(0, import_react.useEffect)(() => {
+		if (!open || !selected) return;
+		setFreshInvite(null);
+		loadDetail(selected);
+	}, [
+		open,
+		selected,
+		loadDetail
+	]);
+	async function withBusy(fn) {
+		setBusy(true);
+		setErr(null);
+		try {
+			return await fn();
+		} finally {
+			setBusy(false);
+		}
+	}
+	async function doCreate() {
+		const name = newName.trim();
+		if (!name) return;
+		await withBusy(async () => {
+			const r = await createTeam({ data: name });
+			if (!r.ok) return setErr(r.error);
+			setNewName("");
+			await loadTeams();
+			setSelected(r.id);
+		});
+	}
+	async function doRename() {
+		if (!detail) return;
+		const name = renameVal.trim();
+		if (!name || name === detail.name) return;
+		await withBusy(async () => {
+			const r = await renameTeam({ data: {
+				teamId: detail.id,
+				name
+			} });
+			if (!r.ok) return setErr(r.error);
+			await loadTeams();
+			await loadDetail(detail.id);
+		});
+	}
+	async function doDelete() {
+		if (!detail) return;
+		await withBusy(async () => {
+			const r = await deleteTeam({ data: detail.id });
+			if (!r.ok) return setErr(r.error);
+			const removed = detail.id;
+			setSelected(null);
+			setDetail(null);
+			await loadTeams();
+			if (removed === activeTeamId) {
+				onClose();
+				navigate({ to: "/" });
+			}
+		});
+	}
+	async function doLeave() {
+		if (!detail) return;
+		await withBusy(async () => {
+			const r = await leaveTeam({ data: detail.id });
+			if (!r.ok) return setErr(r.error);
+			const left = detail.id;
+			setSelected(null);
+			setDetail(null);
+			await loadTeams();
+			if (left === activeTeamId) {
+				onClose();
+				navigate({ to: "/" });
+			}
+		});
+	}
+	async function doAdd() {
+		if (!detail) return;
+		const addr = email.trim();
+		if (!addr) return;
+		await withBusy(async () => {
+			const r = await addTeamMember({ data: {
+				teamId: detail.id,
+				email: addr,
+				role: addRole
+			} });
+			if (!r.ok) return setErr(r.error);
+			setEmail("");
+			await loadDetail(detail.id);
+			await loadTeams();
+		});
+	}
+	async function doSetRole(userId, role) {
+		if (!detail) return;
+		await withBusy(async () => {
+			const r = await setTeamMemberRole({ data: {
+				teamId: detail.id,
+				userId,
+				role
+			} });
+			if (!r.ok) return setErr(r.error);
+			await loadDetail(detail.id);
+		});
+	}
+	async function doRemove(userId) {
+		if (!detail) return;
+		await withBusy(async () => {
+			const r = await removeTeamMember({ data: {
+				teamId: detail.id,
+				userId
+			} });
+			if (!r.ok) return setErr(r.error);
+			await loadDetail(detail.id);
+			await loadTeams();
+		});
+	}
+	async function doInvite() {
+		if (!detail) return;
+		await withBusy(async () => {
+			const r = await createTeamInvite({ data: {
+				teamId: detail.id,
+				role: inviteRole
+			} });
+			if (!r.ok) return setErr(r.error);
+			setFreshInvite(r.token);
+			await loadDetail(detail.id);
+		});
+	}
+	async function doRevoke(token) {
+		if (!detail) return;
+		await withBusy(async () => {
+			const r = await revokeTeamInvite({ data: {
+				teamId: detail.id,
+				token
+			} });
+			if (!r.ok) return setErr(r.error);
+			if (freshInvite === token) setFreshInvite(null);
+			await loadDetail(detail.id);
+		});
+	}
+	const isOwner = detail?.role === "owner";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Modal, {
+		open,
+		onClose,
+		wide: true,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalHead, {
+				title: "Teams",
+				sub: "Create teams, manage members and roles, and invite people. Team management is owner-only; any member can create loops."
+			}),
+			err && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, {
+				message: err,
+				onDismiss: () => setErr(null),
+				className: "mb-2 mt-3"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-3 grid gap-6 md:grid-cols-[minmax(0,18rem)_minmax(0,1fr)]",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalSection, { children: "My teams" }),
+						teams.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "py-2 text-body text-secondary",
+							children: "No teams yet."
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+							className: "flex flex-col gap-1.5",
+							children: teams.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+								onClick: () => setSelected(t.id),
+								className: `flex w-full items-center justify-between gap-2 rounded-control border px-3 py-2 text-left transition-colors ${selected === t.id ? "border-display bg-raised" : "border-hairline bg-surface hover:bg-raised"}`,
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "min-w-0 truncate text-[15px] font-medium text-display",
+									children: t.name
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+									className: "flex shrink-0 items-center gap-1.5",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+										tone: t.role === "owner" ? "ink" : "neutral",
+										children: t.role
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+										className: "text-label text-secondary",
+										children: [
+											t.memberCount,
+											" member",
+											t.memberCount === 1 ? "" : "s"
+										]
+									})]
+								})]
+							}) }, t.id))
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "mt-4 rounded-control border border-hairline bg-raised px-3 py-3",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+								className: `${labelCls} mt-0`,
+								children: "New team"
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+									className: inputCls,
+									value: newName,
+									onChange: (e) => setNewName(e.target.value),
+									placeholder: "e.g. Growth Squad",
+									onKeyDown: (e) => e.key === "Enter" && void doCreate()
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+									className: btnPrimary,
+									disabled: busy || !newName.trim(),
+									onClick: () => void doCreate(),
+									children: "Create"
+								})]
+							})]
+						})
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "min-w-0",
+					children: !detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "flex h-full items-center justify-center py-10 text-body text-secondary",
+						children: "Select a team to manage it, or create one."
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ModalSection, {
+							action: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+								className: btnSm,
+								onClick: () => {
+									setActiveTeamCookie(detail.id);
+									onClose();
+									navigate({
+										to: "/t/$teamId",
+										params: { teamId: detail.id }
+									});
+								},
+								children: "Open dashboard →"
+							}),
+							children: [detail.name, detail.personal ? " · personal" : ""]
+						}),
+						isOwner && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "mb-4",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+								className: "mb-1.5 mt-3 block text-label font-medium text-secondary",
+								children: "Team name"
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+									"aria-label": "Team name",
+									className: inputCls,
+									value: renameVal,
+									onChange: (e) => setRenameVal(e.target.value)
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+									className: btn,
+									disabled: busy || !renameVal.trim() || renameVal.trim() === detail.name,
+									onClick: () => void doRename(),
+									children: "Rename"
+								})]
+							})]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalSection, { children: "Members" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+							className: "flex flex-col gap-2",
+							children: detail.members.map((m) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+								className: "flex items-center justify-between gap-3 rounded-control border border-hairline bg-surface px-3 py-2.5",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+									className: "flex min-w-0 flex-col",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+										className: "truncate text-[15px] font-medium text-display",
+										children: [m.email ?? m.displayName ?? m.userId, m.isSelf && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+											className: "ml-1.5 text-label text-secondary",
+											children: "(you)"
+										})]
+									})
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+									className: "flex shrink-0 items-center gap-2",
+									children: isOwner && !m.isSelf ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+										"aria-label": "Role",
+										className: `${selectCls} w-auto py-1.5`,
+										value: m.role,
+										onChange: (e) => void doSetRole(m.userId, e.target.value),
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+											value: "owner",
+											children: "owner"
+										}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+											value: "member",
+											children: "member"
+										})]
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+										className: btnDanger,
+										disabled: busy,
+										onClick: () => void doRemove(m.userId),
+										children: "Remove"
+									})] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+										tone: m.role === "owner" ? "ink" : "neutral",
+										children: m.role
+									})
+								})]
+							}, m.userId))
+						}),
+						isOwner && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "mt-4 rounded-control border border-hairline bg-raised px-3 py-3",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+										className: `mb-1.5 mt-3 block text-label font-medium text-secondary mt-0`,
+										children: "Add a member by email"
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										className: "flex flex-wrap gap-2",
+										children: [
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+												className: `${inputCls} min-w-[12rem] flex-1`,
+												value: email,
+												onChange: (e) => setEmail(e.target.value),
+												placeholder: "teammate@example.com",
+												onKeyDown: (e) => e.key === "Enter" && void doAdd()
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+												"aria-label": "Role for new member",
+												className: `${selectCls} w-auto`,
+												value: addRole,
+												onChange: (e) => setAddRole(e.target.value),
+												children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+													value: "member",
+													children: "member"
+												}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+													value: "owner",
+													children: "owner"
+												})]
+											}),
+											/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+												className: btnPrimary,
+												disabled: busy || !email.trim(),
+												onClick: () => void doAdd(),
+												children: "Add"
+											})
+										]
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+										className: "mt-1.5 text-label text-secondary",
+										children: "Adds an existing Pievo account immediately. No account yet? Generate an invite link below."
+									})
+								]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalSection, { children: "Invite links" }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex flex-wrap items-center gap-2",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+										"aria-label": "Invite role",
+										className: `${selectCls} w-auto`,
+										value: inviteRole,
+										onChange: (e) => setInviteRole(e.target.value),
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+											value: "member",
+											children: "as member"
+										}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+											value: "owner",
+											children: "as owner"
+										})]
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+										className: btn,
+										disabled: busy,
+										onClick: () => void doInvite(),
+										children: "Generate invite link"
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										className: "text-label text-secondary",
+										children: "Single-use · expires in 7 days"
+									})
+								]
+							}),
+							detail.invites.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+								className: "mt-3 flex flex-col gap-2",
+								children: detail.invites.map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+									className: "flex items-center justify-between gap-3 rounded-control border border-hairline bg-surface px-3 py-2.5",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										className: "flex min-w-0 items-center gap-2",
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+											tone: "neutral",
+											children: i.role
+										}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+											className: `min-w-0 truncate font-mono text-label ${freshInvite === i.token ? "text-display" : "text-secondary"}`,
+											children: inviteUrl(i.token)
+										})]
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+										className: "flex shrink-0 items-center gap-2",
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyLink, { text: inviteUrl(i.token) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+											className: btnDanger,
+											disabled: busy,
+											onClick: () => void doRevoke(i.token),
+											children: "Revoke"
+										})]
+									})]
+								}, i.token))
+							})
+						] }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "mt-6 flex items-center justify-between gap-3 border-t border-hairline pt-4",
+							children: [!detail.personal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+								className: btn,
+								disabled: busy,
+								onClick: () => void doLeave(),
+								children: "Leave team"
+							}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-label text-secondary",
+								children: "Your personal team can't be left or deleted."
+							}), isOwner && !detail.personal && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+								className: btnDanger,
+								disabled: busy || detail.loopCount > 0,
+								title: detail.loopCount > 0 ? `Move or delete this team's ${detail.loopCount} loop${detail.loopCount === 1 ? "" : "s"} first` : void 0,
+								onClick: () => void doDelete(),
+								children: ["Delete team", detail.loopCount > 0 ? ` (${detail.loopCount} loop${detail.loopCount === 1 ? "" : "s"})` : ""]
+							})]
+						})
+					] })
+				})]
+			})
+		]
+	});
+}
+var FLOWS = {
+	"react-doctor": {
+		worktreeLabel: "Isolated git worktree · off main",
+		nodes: [
+			{
+				id: "tick",
+				kicker: "On schedule",
+				glyph: "◷",
+				title: "Every day · 6am",
+				detail: "the loop wakes on cadence"
+			},
+			{
+				id: "scan",
+				kicker: "Step 1 · Scan",
+				glyph: "⌕",
+				title: "Scan the app",
+				detail: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: "npx react-doctor@latest" })
+			},
+			{
+				id: "prio",
+				kicker: "Step 2 · Prioritise",
+				glyph: "⚖",
+				title: "Pick one issue",
+				detail: "the worst, by severity & perf impact"
+			},
+			{
+				id: "fix",
+				wt: true,
+				kicker: "Step 3 · Fix",
+				glyph: "✎",
+				title: "Fix in isolation",
+				detail: "smallest change, fresh branch"
+			},
+			{
+				id: "verify",
+				wt: true,
+				kicker: "Step 4 · Verify",
+				glyph: "▷",
+				title: "Verify the fix",
+				detail: "prove it holds before proposing"
+			},
+			{
+				id: "ship",
+				wt: true,
+				kicker: "Step 5 · Ship",
+				glyph: "⑂",
+				title: "Open a PR",
+				detail: "skip if a prior PR's still open"
+			}
+		],
+		dashboard: [{
+			type: "kanban",
+			heading: "PR board",
+			sub: "open → merged",
+			columns: [["Open", [[
+				"#231",
+				"Key-less list items in <Feed/>",
+				"opened 6h ago"
+			], [
+				"#219",
+				"Missing memo on heavy list row",
+				"opened 1d ago"
+			]]], ["Merged", [
+				[
+					"#212",
+					"Effect re-runs on every render",
+					"merged 2d ago"
+				],
+				[
+					"#205",
+					"Unmemoised context value",
+					"merged 4d ago"
+				],
+				[
+					"#198",
+					"Inline object prop churn",
+					"merged 6d ago"
+				]
+			]]]
+		}, {
+			type: "metric",
+			label: "Health score",
+			series: [
+				66,
+				68,
+				67,
+				71,
+				72,
+				71,
+				75,
+				77,
+				76,
+				79,
+				81,
+				80,
+				83,
+				84
+			]
+		}]
+	},
+	"docs-sweep": {
+		worktreeLabel: "Isolated git worktree · off main",
+		nodes: [
+			{
+				id: "tick",
+				kicker: "On schedule",
+				glyph: "◷",
+				title: "Every Mon · 6am",
+				detail: "weekly · picks up where it left off"
+			},
+			{
+				id: "diff",
+				kicker: "Step 1 · Compare",
+				glyph: "⌕",
+				title: "Diff since last sweep",
+				detail: "docs vs. what the code ships now"
+			},
+			{
+				id: "verify",
+				kicker: "Step 2 · Verify",
+				glyph: "▷",
+				title: "Verify for real",
+				detail: "run the commands, links & examples"
+			},
+			{
+				id: "fix",
+				wt: true,
+				kicker: "Step 3 · Fix",
+				glyph: "✎",
+				title: "Fix real drift only",
+				detail: "never rewrite accurate docs"
+			},
+			{
+				id: "ship",
+				wt: true,
+				kicker: "Step 4 · Ship",
+				glyph: "⑂",
+				title: "Open a PR",
+				detail: "explains the drift · no stacking"
+			}
+		],
+		dashboard: [{
+			type: "embed",
+			heading: "Latest sweep summary",
+			title: "Docs drift — weekly sweep",
+			date: "2026-07-06",
+			lines: [
+				"3 items fixed, each verified by running it",
+				"README — dev server is :3001, not :3000",
+				"Setup guide — dropped a dead /api/v1 link",
+				"Quickstart — refreshed `pievo new` flags"
+			]
+		}, {
+			type: "metric",
+			label: "Drift count",
+			series: [
+				6,
+				4,
+				5,
+				3,
+				2,
+				3,
+				1,
+				2,
+				1,
+				0
+			],
+			note: "0 = docs are honest — a clean stop, no PR.",
+			betterDown: true
+		}]
+	},
+	"error-sweep": {
+		worktreeLabel: "Isolated git worktree · off main",
+		nodes: [
+			{
+				id: "setup",
+				setup: true,
+				kicker: "Before first run",
+				glyph: "⚙",
+				title: "Verify an error source",
+				detail: "smoke-test logs / tracker / gh · confirm window"
+			},
+			{
+				id: "tick",
+				kicker: "On schedule",
+				glyph: "◷",
+				title: "Every day · 6am",
+				detail: "sweeps the agreed window"
+			},
+			{
+				id: "sweep",
+				kicker: "Step 1 · Sweep",
+				glyph: "⌕",
+				title: "Group into incidents",
+				detail: "cluster repeated symptoms"
+			},
+			{
+				id: "triage",
+				kicker: "Step 2 · Triage",
+				glyph: "⚖",
+				title: "Actionable vs. noise",
+				detail: "drop upstream & noise"
+			},
+			{
+				id: "fix",
+				wt: true,
+				kicker: "Step 3 · Fix",
+				glyph: "✎",
+				title: "Root-cause & fix",
+				detail: "smallest verified fix"
+			},
+			{
+				id: "ship",
+				wt: true,
+				kicker: "Step 4 · Ship",
+				glyph: "⑂",
+				title: "One PR per fix",
+				detail: "no stacking · never leak secrets"
+			}
+		],
+		dashboard: [{
+			type: "embed",
+			heading: "Newest report",
+			title: "Error sweep — daily",
+			date: "2026-07-08",
+			lines: [
+				"2 actionable, 14 noise filtered out",
+				"Checkout 500 — null cart on retry (fixed)",
+				"/api/render timeout — upstream, watching",
+				"No credentials or PII in this report"
+			]
+		}, {
+			type: "metric",
+			label: "Actionable errors",
+			series: [
+				5,
+				3,
+				4,
+				2,
+				3,
+				1,
+				2,
+				1,
+				0,
+				1
+			],
+			note: "0 actionable = a clean stop, no PR.",
+			betterDown: true
+		}]
+	},
+	housekeeper: {
+		worktreeLabel: "Isolated git worktree · off main",
+		nodes: [
+			{
+				id: "tick",
+				kicker: "On schedule",
+				glyph: "◷",
+				title: "Every day · 7am",
+				detail: "one cleanup a day, no more"
+			},
+			{
+				id: "survey",
+				kicker: "Step 1 · Survey",
+				glyph: "⌕",
+				title: "Find housekeeping debt",
+				detail: "dead code, stale files, dupes, unused deps"
+			},
+			{
+				id: "prove",
+				kicker: "Step 2 · Prove",
+				glyph: "⚖",
+				title: "Pick one, prove it safe",
+				detail: "concrete evidence · uncertain → deferred"
+			},
+			{
+				id: "fix",
+				wt: true,
+				kicker: "Step 3 · Fix",
+				glyph: "✎",
+				title: "Smallest change",
+				detail: "keep only if build & tests stay green"
+			},
+			{
+				id: "ship",
+				wt: true,
+				kicker: "Step 4 · Ship",
+				glyph: "⑂",
+				title: "Open a PR",
+				detail: "no stacking on an open PR"
+			}
+		],
+		dashboard: [{
+			type: "kanban",
+			heading: "Cleanup board",
+			sub: "open → merged",
+			columns: [["Open", [[
+				"#142",
+				"Remove dead export in utils/date",
+				"opened 5h ago"
+			], [
+				"#138",
+				"Drop unused dep left-pad",
+				"opened 2d ago"
+			]]], ["Merged", [
+				[
+					"#131",
+					"Delete stale scripts/legacy dir",
+					"merged 1d ago"
+				],
+				[
+					"#124",
+					"Dedupe two clamp() helpers",
+					"merged 3d ago"
+				],
+				[
+					"#119",
+					"Rename inconsistent isLoading flags",
+					"merged 5d ago"
+				]
+			]]]
+		}, {
+			type: "metric",
+			label: "Cleanups landed",
+			series: [
+				0,
+				1,
+				1,
+				2,
+				3,
+				3,
+				4,
+				5,
+				6,
+				6,
+				7,
+				9,
+				10,
+				12
+			]
+		}]
+	},
+	"dependency-triage": {
+		worktreeLabel: "Isolated git worktree · off main",
+		nodes: [
+			{
+				id: "setup",
+				setup: true,
+				kicker: "Before first run",
+				glyph: "⚙",
+				title: "Confirm merge authority",
+				detail: "smoke-test gh sees Dependabot/Renovate · agree merge policy"
+			},
+			{
+				id: "tick",
+				kicker: "On schedule",
+				glyph: "◷",
+				title: "Every Mon",
+				detail: "weekly · snapshots the open PRs"
+			},
+			{
+				id: "snapshot",
+				kicker: "Step 1 · Snapshot",
+				glyph: "⌕",
+				title: "List open dep PRs",
+				detail: "process each exactly once"
+			},
+			{
+				id: "judge",
+				kicker: "Step 2 · Judge",
+				glyph: "⚖",
+				title: "Weigh real evidence",
+				detail: "diff · release notes · advisories · CI at head"
+			},
+			{
+				id: "test",
+				wt: true,
+				kicker: "Step 3 · Test",
+				glyph: "▷",
+				title: "Run tests in isolation",
+				detail: "at the exact head · checkout untouched"
+			},
+			{
+				id: "merge",
+				wt: true,
+				kicker: "Step 4 · Merge",
+				glyph: "⑂",
+				title: "Merge only what’s authorized",
+				detail: "major/breaking/security → recommend, don’t merge"
+			}
+		],
+		dashboard: [{
+			type: "kanban",
+			heading: "Dependency PRs",
+			sub: "merged · deferred · blocked",
+			columns: [
+				["Merged", [[
+					"#412",
+					"bump vite 7.0→7.1 (patch)",
+					"merged 1h ago"
+				], [
+					"#408",
+					"bump @types/node 20→20.14 (minor)",
+					"merged 3h ago"
+				]]],
+				["Deferred", [[
+					"#399",
+					"react 18→19 (major) — review",
+					"deferred 2d ago"
+				], [
+					"#391",
+					"drizzle-orm 0.30→0.31 — CI red",
+					"deferred 2d ago"
+				]]],
+				["Blocked", [[
+					"#405",
+					"lodash advisory GHSA-…-qxrp (high)",
+					"flagged 1h ago"
+				]]]
+			]
+		}, {
+			type: "metric",
+			label: "Open dependency PRs",
+			series: [
+				9,
+				8,
+				8,
+				6,
+				7,
+				5,
+				4,
+				3,
+				4,
+				2
+			],
+			note: "trends down as PRs are merged or resolved.",
+			betterDown: true
+		}]
+	},
+	"market-research": {
+		worktreeLabel: "",
+		nodes: [
+			{
+				id: "setup",
+				setup: true,
+				kicker: "Before first run",
+				glyph: "⚙",
+				title: "Confirm the research focus",
+				detail: "infer the product & space · propose a focus, confirm"
+			},
+			{
+				id: "tick",
+				kicker: "On schedule",
+				glyph: "◷",
+				title: "Every day · 5am",
+				detail: "the loop wakes on cadence"
+			},
+			{
+				id: "research",
+				kicker: "Step 1 · Research",
+				glyph: "⌕",
+				title: "Scan today's market",
+				detail: "competitors, launches, pricing, ecosystem news"
+			},
+			{
+				id: "report",
+				kicker: "Step 2 · Report",
+				glyph: "✎",
+				title: "One dated report",
+				detail: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: "type: report · title · date" })
+			},
+			{
+				id: "sharpen",
+				kicker: "Step 3 · Sharpen",
+				glyph: "✧",
+				title: "Sharpen the focus",
+				detail: "lean into what keeps turning out to matter"
+			}
+		],
+		dashboard: [{
+			type: "calendar",
+			heading: "Reports calendar",
+			monthLabel: "July 2026",
+			days: 31,
+			firstWeekday: 2,
+			reportDays: [
+				1,
+				2,
+				3,
+				6,
+				7,
+				8
+			]
+		}, {
+			type: "embed",
+			heading: "Newest report",
+			title: "Market watch — daily digest",
+			date: "2026-07-08",
+			lines: [
+				"Today's signal: two rivals converged on usage-based pricing",
+				"Northwind shipped an AI triage add-on, free in beta",
+				"Acme cut its Team tier 20% and dropped the seat minimum",
+				"Ecosystem: a new OSS connector spec is gaining traction"
+			]
+		}]
+	},
+	"follow-up-tracker": {
+		worktreeLabel: "",
+		nodes: [
+			{
+				id: "setup",
+				setup: true,
+				kicker: "Before first run",
+				glyph: "⚙",
+				title: "Verify + define the finish",
+				detail: "smoke-test an observation path · set the finish condition"
+			},
+			{
+				id: "tick",
+				kicker: "On cadence",
+				glyph: "◷",
+				title: "A few times a day",
+				detail: "wakes on cadence — no fixed clock time"
+			},
+			{
+				id: "observe",
+				kicker: "Step 1 · Observe",
+				glyph: "⌕",
+				title: "Check the outcome",
+				detail: "through the verified path — logs / URL / gh"
+			},
+			{
+				id: "report",
+				kicker: "Step 2 · Report",
+				glyph: "◈",
+				title: "Report what you find",
+				detail: "one report · a metric when natural"
+			},
+			{
+				id: "check",
+				kicker: "Step 3 · Check",
+				glyph: "⚖",
+				title: "Goal met?",
+				detail: "keep watching until it genuinely holds"
+			},
+			{
+				id: "finish",
+				finish: true,
+				kicker: "When met",
+				glyph: "⚑",
+				title: "Finish the loop",
+				detail: "marks it done — stops watching"
+			}
+		],
+		dashboard: [{
+			type: "embed",
+			heading: "Latest observation",
+			title: "Checkout fix — follow-up",
+			date: "2026-07-08",
+			lines: [
+				"conversion 29% → 44% over 3 days",
+				"no error spikes since the deploy",
+				"goal: hold ≥ 40% for 48h — 31h in, on track"
+			]
+		}, {
+			type: "metric",
+			label: "Checkout conversion %",
+			series: [
+				29,
+				31,
+				30,
+				34,
+				37,
+				39,
+				41,
+				43,
+				44
+			],
+			note: "goal: hold ≥ 40% for 48h, then the loop finishes itself."
+		}]
+	}
+};
+/** Whether a template has a preview — drives the modal's two-column layout. */
+var hasLoopFlow = (name) => name in FLOWS;
+var VIEW_W = 344;
+var NODE_X = 68;
+var NODE_W = 248;
+var NODE_H = 64;
+var CX = 192;
+var TOP = 6;
+var LANE_X = 30;
+var WT_X = 48;
+var WT_W = 280;
+var WT_PAD_TOP = 18;
+var WT_PAD_BOT = 16;
+var hOf = (d) => d.setup ? 78 : NODE_H;
+function buildGeometry(defs) {
+	const tickIndex = defs.findIndex((d) => !d.setup);
+	const finishIndex = defs.findIndex((d) => d.finish);
+	const closed = finishIndex >= 0;
+	const nodes = [];
+	let y = TOP;
+	defs.forEach((d, i) => {
+		if (i > 0) {
+			const prevWt = !!defs[i - 1].wt;
+			const curWt = !!d.wt;
+			const gap = !prevWt && curWt ? 48 : prevWt && curWt ? 30 : 36;
+			y += hOf(defs[i - 1]) + gap;
+		}
+		const kind = d.finish ? "finish" : d.setup ? "setup" : i === tickIndex ? "tick" : "step";
+		nodes.push({
+			...d,
+			kind,
+			x: NODE_X,
+			y,
+			w: NODE_W,
+			h: hOf(d)
+		});
+	});
+	const wt = nodes.filter((n) => n.wt);
+	const worktree = wt.length ? {
+		x: WT_X,
+		y: wt[0].y - WT_PAD_TOP,
+		w: WT_W,
+		h: wt[wt.length - 1].y + wt[wt.length - 1].h + WT_PAD_BOT - (wt[0].y - WT_PAD_TOP)
+	} : null;
+	const wires = [];
+	for (let i = 0; i < nodes.length - 1; i++) wires.push(`M${CX} ${nodes[i].y + nodes[i].h} L${CX} ${nodes[i + 1].y - 4}`);
+	const finishWireIndex = closed ? finishIndex - 1 : -1;
+	const tickNode = nodes[tickIndex];
+	const tickMidY = tickNode.y + tickNode.h / 2;
+	const cycleLast = nodes[closed ? finishIndex - 1 : nodes.length - 1];
+	const returnWireIndex = wires.length;
+	let route;
+	let viewH;
+	if (closed) {
+		const midY = cycleLast.y + cycleLast.h / 2;
+		wires.push(`M${NODE_X} ${midY} L36 ${midY} Q${LANE_X} ${midY} ${LANE_X} ${midY - 6} L${LANE_X} ${tickMidY + 6} Q${LANE_X} ${tickMidY} 36 ${tickMidY} L${NODE_X - 4} ${tickMidY}`);
+		route = `M${nodes.slice(tickIndex, finishIndex).map((n) => `${CX} ${n.y + n.h / 2}`).join(" L ")} L${LANE_X} ${midY} L${LANE_X} ${tickMidY} L${NODE_X - 4} ${tickMidY}`;
+		const finishNode = nodes[finishIndex];
+		viewH = finishNode.y + finishNode.h + 14;
+	} else {
+		const laneY = cycleLast.y + cycleLast.h + 28;
+		wires.push(`M${CX} ${cycleLast.y + cycleLast.h} L${CX} ${laneY - 6} Q${CX} ${laneY} ${CX - 6} ${laneY} L36 ${laneY} Q${LANE_X} ${laneY} ${LANE_X} ${laneY - 6} L${LANE_X} ${tickMidY + 6} Q${LANE_X} ${tickMidY} 36 ${tickMidY} L${NODE_X - 4} ${tickMidY}`);
+		route = `M${nodes.slice(tickIndex).map((n) => `${CX} ${n.y + n.h / 2}`).join(" L ")} L${CX} ${laneY} L${LANE_X} ${laneY} L${LANE_X} ${tickMidY} L${NODE_X - 4} ${tickMidY}`;
+		viewH = laneY + 14;
+	}
+	return {
+		nodes,
+		wires,
+		route,
+		worktree,
+		returnWireIndex,
+		finishWireIndex,
+		viewW: VIEW_W,
+		viewH
+	};
+}
+function LoopFlow({ template }) {
+	const spec = FLOWS[template.name];
+	const [tab, setTab] = (0, import_react.useState)("flow");
+	if (!spec) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "mb-4 inline-flex rounded-full border border-hairline bg-raised p-0.5 text-label",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabBtn, {
+				active: tab === "flow",
+				onClick: () => setTab("flow"),
+				children: "Loop flow"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabBtn, {
+				active: tab === "dashboard",
+				onClick: () => setTab("dashboard"),
+				children: "Dashboard"
+			})]
+		}), tab === "flow" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FlowDiagram, { spec }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dashboard, { spec })]
+	});
+}
+function TabBtn({ active, onClick, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick,
+		className: `cursor-pointer rounded-full px-3.5 py-1.5 font-medium transition-colors ${active ? "bg-surface text-display shadow-card" : "text-secondary hover:text-display"}`,
+		children
+	});
+}
+function FlowDiagram({ spec }) {
+	const geo = (0, import_react.useMemo)(() => buildGeometry(spec.nodes), [spec]);
+	const rootRef = (0, import_react.useRef)(null);
+	(0, import_react.useEffect)(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+		const route = root.querySelector(".lpf-route");
+		const pulse = root.querySelector(".lpf-pulse");
+		const comet = root.querySelector(".lpf-comet");
+		if (!route || !pulse || !comet) return;
+		const total = route.getTotalLength();
+		const SAMPLES = 600;
+		const samp = [];
+		for (let i = 0; i <= SAMPLES; i++) {
+			const L = total * i / SAMPLES;
+			const p = route.getPointAtLength(L);
+			samp.push([
+				L,
+				p.x,
+				p.y
+			]);
+		}
+		const lenAt = (x, y) => {
+			let best = 0;
+			let bd = Infinity;
+			for (const s of samp) {
+				const d = (s[1] - x) ** 2 + (s[2] - y) ** 2;
+				if (d < bd) {
+					bd = d;
+					best = s[0];
+				}
+			}
+			return best;
+		};
+		const nodeEls = /* @__PURE__ */ new Map();
+		root.querySelectorAll("[data-lpf]").forEach((el) => nodeEls.set(el.dataset.lpf, el));
+		const order = geo.nodes.filter((n) => n.kind !== "setup" && n.kind !== "finish").map((n) => ({
+			len: lenAt(n.x + n.w / 2, n.y + n.h / 2),
+			el: nodeEls.get(n.id)
+		})).filter((n) => n.el).sort((a, b) => a.len - b.len);
+		const SPEED = 210 / 1e3;
+		const DWELL = 520;
+		const segs = [];
+		const first = order[0];
+		const lastN = order[order.length - 1];
+		segs.push({
+			type: "dwell",
+			at: first,
+			dur: DWELL
+		});
+		for (let i = 0; i < order.length - 1; i++) {
+			const a = order[i];
+			const b = order[i + 1];
+			segs.push({
+				type: "move",
+				from: a.len,
+				to: b.len,
+				dur: Math.max(360, (b.len - a.len) / SPEED)
+			});
+			segs.push({
+				type: "dwell",
+				at: b,
+				dur: DWELL
+			});
+		}
+		segs.push({
+			type: "return",
+			from: lastN.len,
+			to: total,
+			dur: Math.max(720, (total - lastN.len) / SPEED)
+		});
+		segs.push({
+			type: "dwell",
+			at: first,
+			dur: 160,
+			restart: true
+		});
+		const COMET = 52;
+		comet.setAttribute("stroke-dasharray", `${COMET} ${total}`);
+		const place = (L) => {
+			const c = Math.max(0, Math.min(total, L));
+			const p = route.getPointAtLength(c);
+			pulse.setAttribute("cx", p.x.toFixed(2));
+			pulse.setAttribute("cy", p.y.toFixed(2));
+			comet.setAttribute("stroke-dashoffset", (-(L - COMET * .5)).toFixed(2));
+		};
+		const clearActive = () => order.forEach((n) => n.el.classList.remove("active"));
+		const resetPass = () => order.forEach((n) => n.el.classList.remove("visited"));
+		const activate = (n) => {
+			clearActive();
+			n.el.classList.add("active", "visited");
+		};
+		let si = 0;
+		let t0 = performance.now();
+		let raf = 0;
+		const frame = (now) => {
+			let seg = segs[si];
+			const e = now - t0;
+			if (e >= seg.dur) {
+				if ((seg.type === "move" || seg.type === "return") && seg.to != null) place(seg.to);
+				si = (si + 1) % segs.length;
+				t0 = now;
+				seg = segs[si];
+				if (seg.restart) resetPass();
+				if (seg.type === "dwell" && seg.at) {
+					activate(seg.at);
+					place(seg.at.len);
+				}
+				if (seg.type === "return") clearActive();
+			} else if ((seg.type === "move" || seg.type === "return") && seg.from != null && seg.to != null) {
+				const k = e / seg.dur;
+				const ease = k < .5 ? 2 * k * k : 1 - Math.pow(-2 * k + 2, 2) / 2;
+				place(seg.from + (seg.to - seg.from) * ease);
+			} else if (seg.at) place(seg.at.len);
+			raf = requestAnimationFrame(frame);
+		};
+		activate(first);
+		place(first.len);
+		raf = requestAnimationFrame(frame);
+		return () => cancelAnimationFrame(raf);
+	}, [geo]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		ref: rootRef,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "overflow-x-auto",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "relative mx-auto",
+				style: {
+					width: geo.viewW,
+					height: geo.viewH
+				},
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+						className: "absolute inset-0",
+						width: geo.viewW,
+						height: geo.viewH,
+						viewBox: `0 0 ${geo.viewW} ${geo.viewH}`,
+						"aria-hidden": "true",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("marker", {
+									id: "lpf-arw",
+									markerUnits: "userSpaceOnUse",
+									viewBox: "0 0 8 8",
+									refX: "6",
+									refY: "4",
+									markerWidth: "9",
+									markerHeight: "9",
+									orient: "auto-start-reverse",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+										d: "M1.2 1.2 L7 4 L1.2 6.8 Z",
+										fill: "var(--color-interactive)"
+									})
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("marker", {
+									id: "lpf-arw-good",
+									markerUnits: "userSpaceOnUse",
+									viewBox: "0 0 8 8",
+									refX: "6",
+									refY: "4",
+									markerWidth: "9",
+									markerHeight: "9",
+									orient: "auto-start-reverse",
+									children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+										d: "M1.2 1.2 L7 4 L1.2 6.8 Z",
+										fill: "var(--color-success)"
+									})
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("filter", {
+									id: "lpf-glow",
+									x: "-60%",
+									y: "-60%",
+									width: "220%",
+									height: "220%",
+									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feGaussianBlur", {
+										stdDeviation: "2.4",
+										result: "b"
+									}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("feMerge", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("feMergeNode", { in: "b" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("feMergeNode", { in: "SourceGraphic" })] })]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+									className: "lpf-route",
+									fill: "none",
+									d: geo.route
+								})
+							] }),
+							geo.wires.map((d, i) => {
+								const isFinish = i === geo.finishWireIndex;
+								return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+									className: isFinish ? "lpf-wire finish" : "lpf-wire",
+									d,
+									fill: "none",
+									strokeWidth: 2,
+									strokeLinecap: "round",
+									strokeDasharray: i === geo.returnWireIndex ? "6 6" : void 0,
+									markerEnd: isFinish ? "url(#lpf-arw-good)" : "url(#lpf-arw)"
+								}, i);
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+								className: "lpf-comet",
+								d: geo.route,
+								fill: "none",
+								strokeWidth: 2.5,
+								strokeLinecap: "round",
+								filter: "url(#lpf-glow)",
+								opacity: .9
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+								className: "lpf-pulse",
+								r: 3.8,
+								filter: "url(#lpf-glow)"
+							})
+						]
+					}),
+					geo.worktree && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "absolute rounded-[14px] border border-dashed",
+						style: {
+							left: geo.worktree.x,
+							top: geo.worktree.y,
+							width: geo.worktree.w,
+							height: geo.worktree.h,
+							borderColor: "var(--color-interactive)",
+							background: "var(--color-interactive-soft)"
+						},
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "absolute px-2 font-mono text-[9.5px] font-semibold uppercase tracking-[0.1em]",
+							style: {
+								top: -9,
+								left: 16,
+								background: "var(--color-surface)",
+								color: "var(--color-interactive)"
+							},
+							children: spec.worktreeLabel
+						})
+					}),
+					geo.nodes.map((n) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						"data-lpf": n.id,
+						className: `lpf-node${n.kind === "tick" ? " tick" : ""}`,
+						style: {
+							left: n.x,
+							top: n.y,
+							width: n.w,
+							height: n.h
+						},
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "lpf-k",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "g",
+									children: n.glyph
+								}), n.kicker]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: "lpf-t",
+								children: n.title
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: "lpf-d",
+								children: n.detail
+							})
+						]
+					}, n.id))
+				]
+			})
+		})
+	});
+}
+function Dashboard({ spec }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "mb-4 text-body leading-snug text-secondary",
+			children: "Pievo sets up a dashboard to track results."
+		}), spec.dashboard.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: `min-w-0 ${i > 0 ? "mt-6" : ""}`,
+			children: w.type === "kanban" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KanbanWidget, { w }) : w.type === "metric" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricWidget, { w }) : w.type === "calendar" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarWidget, { w }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmbedWidget, { w })
+		}, i))]
+	});
+}
+var CAL_DOW = [
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat",
+	"Sun"
+];
+/** A month grid of report days, matching LoopCalendar's look: Monday-start weekday
+*  headers, mono day numbers top-right, hairline grid, an interactive-ink dot on days
+*  that produced a report. grid-cols-7 fills the ~360px column and reflows (min-w-0). */
+function CalendarWidget({ w }) {
+	const marked = new Set(w.reportDays);
+	const trail = (7 - (w.firstWeekday + w.days) % 7) % 7;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mb-2 flex items-baseline gap-2",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-meta font-medium text-secondary",
+						children: w.heading
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "font-mono text-caption text-disabled",
+						children: w.monthLabel
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "ml-auto font-mono text-caption text-disabled",
+						children: [
+							w.reportDays.length,
+							" report",
+							w.reportDays.length === 1 ? "" : "s"
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "grid min-w-0 grid-cols-7 border-l border-t border-hairline",
+				children: [
+					CAL_DOW.map((d) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "border-b border-r border-hairline px-1.5 py-1 text-right text-micro font-medium text-disabled",
+						children: d
+					}, d)),
+					Array.from({ length: w.firstWeekday }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-r border-hairline bg-raised" }, `lead${i}`)),
+					Array.from({ length: w.days }, (_, i) => {
+						const day = i + 1;
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "relative min-h-[34px] min-w-0 border-b border-r border-hairline bg-surface px-1 pb-1 pt-4",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "absolute right-1 top-0.5 font-mono text-micro text-disabled",
+								children: day
+							}), marked.has(day) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								title: `report · day ${day}`,
+								className: "absolute bottom-1 left-1 inline-block size-1.5 rounded-full",
+								style: { background: "var(--color-interactive)" }
+							})]
+						}, day);
+					}),
+					Array.from({ length: trail }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-r border-hairline bg-raised" }, `trail${i}`))
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-2 flex items-center gap-1.5 text-caption font-medium text-secondary",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "inline-block size-1.5 rounded-full",
+					style: { background: "var(--color-interactive)" }
+				}), " Day with a report"]
+			})
+		]
+	});
+}
+function KanbanWidget({ w }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "mb-2 text-meta font-medium text-secondary",
+			children: [
+				w.heading,
+				" ",
+				w.sub && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "font-mono text-caption text-disabled",
+					children: w.sub
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "flex min-w-0 gap-3 overflow-x-auto pb-1",
+			children: w.columns.map(([name, cards]) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex w-[190px] shrink-0 flex-col",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mb-2 flex items-center gap-2 border-b border-hairline pb-1.5",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-label font-semibold text-primary",
+						children: name
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-caption text-disabled",
+						children: cards.length
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "flex flex-col gap-2",
+					children: cards.map(([id, title, when]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "min-w-0 overflow-hidden rounded-control border border-hairline bg-surface shadow-card transition-colors hover:border-wire",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex flex-col gap-1 px-2.5 py-2",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "truncate text-meta text-primary",
+								children: title
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: "truncate font-mono text-micro text-disabled",
+								children: [
+									id,
+									" · ",
+									when
+								]
+							})]
+						})
+					}, id))
+				})]
+			}, name))
+		})]
+	});
+}
+function EmbedWidget({ w }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "mb-2 text-meta font-medium text-secondary",
+			children: w.heading
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "rounded-card border border-hairline bg-surface p-3.5 shadow-card",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex items-start gap-2",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "truncate text-meta font-semibold text-display",
+						children: w.title
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "font-mono text-micro text-disabled",
+						children: w.date
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "shrink-0 rounded-full border border-hairline bg-raised px-2 py-0.5 font-mono text-micro text-secondary",
+					children: "report"
+				})]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-3 flex flex-col gap-1.5 border-t border-hairline pt-3",
+				children: w.lines.map((l, i) => i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "text-meta font-medium text-primary",
+					children: l
+				}, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex gap-2 text-caption text-secondary",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-disabled",
+						children: "—"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "min-w-0",
+						children: l
+					})]
+				}, i))
+			})]
+		})]
+	});
+}
+function MetricWidget({ w }) {
+	const s = w.series;
+	const now = s[s.length - 1] ?? 0;
+	const delta = now - (s[0] ?? 0);
+	const good = w.betterDown ? delta < 0 : delta > 0;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0 rounded-card border border-hairline bg-surface p-3.5 shadow-card",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mb-3 flex items-baseline gap-2",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-label font-semibold text-primary",
+						children: w.label
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "ml-auto font-mono text-body font-semibold text-display",
+						children: now
+					}),
+					delta !== 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "font-mono text-caption",
+						style: { color: good ? "var(--color-success)" : "var(--color-accent)" },
+						children: [
+							delta > 0 ? "▲" : "▼",
+							" ",
+							Math.abs(delta)
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AreaTrend, { series: s }),
+			w.note && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "mt-2 font-mono text-caption text-secondary",
+				children: w.note
+			})
+		]
+	});
+}
+/** A single-series area trend, drawn like LoopChart: horizontal grid, mono axis
+*  ticks, gradient fill in the chart-1 (display) ink. */
+function AreaTrend({ series }) {
+	const gid = (0, import_react.useMemo)(() => `lpf-grad-${Math.round(series.reduce((a, b) => a + b, 0))}-${series.length}`, [series]);
+	const W = 320;
+	const H = 150;
+	const padL = 26;
+	const padR = 8;
+	const padT = 10;
+	const padB = 18;
+	const dmin = Math.min(...series);
+	const dmax = Math.max(...series);
+	const span = Math.max(1, dmax - dmin);
+	let lo = Math.floor(dmin - span * .15);
+	const hi = Math.ceil(dmax + span * .15);
+	if (dmin >= 0 && lo < 0) lo = 0;
+	const X = (i) => padL + i * (W - padL - padR) / (series.length - 1);
+	const Y = (v) => padT + (1 - (v - lo) / (hi - lo || 1)) * (H - padT - padB);
+	const f = (n) => Math.round(n * 100) / 100;
+	const line = "M" + series.map((v, i) => `${f(X(i))} ${f(Y(v))}`).join(" L ");
+	const area = `${line} L ${f(X(series.length - 1))} ${H - padB} L ${f(X(0))} ${H - padB} Z`;
+	const ticks = [
+		lo,
+		Math.round((lo + hi) / 2),
+		hi
+	];
+	const last = series.length - 1;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+		viewBox: `0 0 ${W} ${H}`,
+		width: "100%",
+		className: "block",
+		role: "img",
+		"aria-label": "metric trend",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", {
+				id: gid,
+				x1: "0",
+				y1: "0",
+				x2: "0",
+				y2: "1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+					offset: "0",
+					stopColor: "var(--color-chart-1)",
+					stopOpacity: "0.16"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+					offset: "1",
+					stopColor: "var(--color-chart-1)",
+					stopOpacity: "0"
+				})]
+			}) }),
+			ticks.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", {
+				x1: padL,
+				y1: f(Y(v)),
+				x2: W - padR,
+				y2: f(Y(v)),
+				stroke: "var(--color-hairline)",
+				strokeWidth: 1
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+				x: padL - 6,
+				y: f(Y(v)) + 3,
+				textAnchor: "end",
+				fontFamily: "var(--font-mono)",
+				fontSize: 9,
+				fill: "var(--color-disabled)",
+				children: v
+			})] }, i)),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+				d: area,
+				fill: `url(#${gid})`
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+				d: line,
+				fill: "none",
+				stroke: "var(--color-chart-1)",
+				strokeWidth: 2,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+				cx: f(X(last)),
+				cy: f(Y(series[last] ?? 0)),
+				r: 3,
+				fill: "var(--color-chart-1)",
+				stroke: "var(--color-surface)",
+				strokeWidth: 1.5
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+				x: padL,
+				y: H - 5,
+				fontFamily: "var(--font-mono)",
+				fontSize: 9,
+				fill: "var(--color-disabled)",
+				children: "older"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", {
+				x: W - padR,
+				y: H - 5,
+				textAnchor: "end",
+				fontFamily: "var(--font-mono)",
+				fontSize: 9,
+				fill: "var(--color-disabled)",
+				children: "now"
+			})
+		]
+	});
+}
+var SLOW_WAIT_MS = 1e5;
+var AGENT_LABEL = {
+	"claude-code": "Claude Code",
+	codex: "Codex"
+};
+function ClaudeCodeMark({ size = 14 }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+		"aria-hidden": true,
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "#D97757",
+		fillRule: "evenodd",
+		className: "shrink-0",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+			clipRule: "evenodd",
+			d: "M20.998 10.949H24v3.102h-3v3.028h-1.487V20H18v-2.921h-1.487V20H15v-2.921H9V20H7.488v-2.921H6V20H4.487v-2.921H3V14.05H0V10.95h3V5h17.998v5.949zM6 10.949h1.488V8.102H6v2.847zm10.51 0H18V8.102h-1.49v2.847z"
+		})
+	});
+}
+/** Codex color mark (LobeHub icon set) — verbatim: white app tile + gradient glyph. */
+function CodexMark({ size = 14 }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+		"aria-hidden": true,
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		className: "shrink-0",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+				d: "M19.503 0H4.496A4.496 4.496 0 000 4.496v15.007A4.496 4.496 0 004.496 24h15.007A4.496 4.496 0 0024 19.503V4.496A4.496 4.496 0 0019.503 0z",
+				fill: "#fff"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+				d: "M9.064 3.344a4.578 4.578 0 012.285-.312c1 .115 1.891.54 2.673 1.275.01.01.024.017.037.021a.09.09 0 00.043 0 4.55 4.55 0 013.046.275l.047.022.116.057a4.581 4.581 0 012.188 2.399c.209.51.313 1.041.315 1.595a4.24 4.24 0 01-.134 1.223.123.123 0 00.03.115c.594.607.988 1.33 1.183 2.17.289 1.425-.007 2.71-.887 3.854l-.136.166a4.548 4.548 0 01-2.201 1.388.123.123 0 00-.081.076c-.191.551-.383 1.023-.74 1.494-.9 1.187-2.222 1.846-3.711 1.838-1.187-.006-2.239-.44-3.157-1.302a.107.107 0 00-.105-.024c-.388.125-.78.143-1.204.138a4.441 4.441 0 01-1.945-.466 4.544 4.544 0 01-1.61-1.335c-.152-.202-.303-.392-.414-.617a5.81 5.81 0 01-.37-.961 4.582 4.582 0 01-.014-2.298.124.124 0 00.006-.056.085.085 0 00-.027-.048 4.467 4.467 0 01-1.034-1.651 3.896 3.896 0 01-.251-1.192 5.189 5.189 0 01.141-1.6c.337-1.112.982-1.985 1.933-2.618.212-.141.413-.251.601-.33.215-.089.43-.164.646-.227a.098.098 0 00.065-.066 4.51 4.51 0 01.829-1.615 4.535 4.535 0 011.837-1.388zm3.482 10.565a.637.637 0 000 1.272h3.636a.637.637 0 100-1.272h-3.636zM8.462 9.23a.637.637 0 00-1.106.631l1.272 2.224-1.266 2.136a.636.636 0 101.095.649l1.454-2.455a.636.636 0 00.005-.64L8.462 9.23z",
+				fill: "url(#lobe-icons-codex-grad)"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", {
+				gradientUnits: "userSpaceOnUse",
+				id: "lobe-icons-codex-grad",
+				x1: "12",
+				x2: "12",
+				y1: "3",
+				y2: "21",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { stopColor: "#B1A7FF" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+						offset: ".5",
+						stopColor: "#7A9DFF"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+						offset: "1",
+						stopColor: "#3941FF"
+					})
+				]
+			}) })
+		]
+	});
+}
+var instructionFor = (origin) => `Fetch ${origin}/api/bootstrap and help me build a loop.`;
+/**
+* New loop = capture-from-Claude-Code (paste-forward, no machine picker). The web
+* mints a claim token, shows ONE instruction block, and waits. The user pastes it
+* into their own Claude Code session (where they just did the task); Claude
+* follows /api/bootstrap — ensures a daemon is running (the token authorizes a new
+* machine, or the machine's stored token reuses an existing one) and POSTs the
+* loop to /api/machine/loop with this token as `claim`. We poll the claim until
+* the loop lands, then close. No machine selection: the binding is decided on the
+* machine, the claim just correlates the result back to this dialog.
+*
+* A `template` (a canned loop intent picked from the dashboard cards) reuses this exact
+* machinery and appends its `description` under the config lines — bootstrap.md +
+* create.md then handle cadence/config the same way. Pievo is BYOA-only: every loop runs
+* on the connected machine; there is no hosted-agent option.
+*/
+function ComposeModal({ open, onClose, onCreated, template = null, teamId }) {
+	const [token, setToken] = (0, import_react.useState)(null);
+	const [config, setConfig] = (0, import_react.useState)(null);
+	const [created, setCreated] = (0, import_react.useState)(null);
+	const [copied, setCopied] = (0, import_react.useState)(false);
+	const [slow, setSlow] = (0, import_react.useState)(false);
+	const [error, setError] = (0, import_react.useState)(null);
+	const [configError, setConfigError] = (0, import_react.useState)(false);
+	const pollRef = (0, import_react.useRef)(null);
+	const onCreatedRef = (0, import_react.useRef)(onCreated);
+	onCreatedRef.current = onCreated;
+	const origin = typeof window !== "undefined" ? window.location.origin : "";
+	const instruction = instructionFor(origin);
+	const configLines = token && config ? [
+		`server-url: ${origin}`,
+		`connect-key: ${token}`,
+		...config?.customCli ? [`pievo-cli: ${config.pievoCli}`] : []
+	].join("\n") : "";
+	const description = template?.description?.trim() ?? "";
+	const snippet = token && config ? [
+		instruction,
+		"",
+		configLines,
+		...description ? ["", description] : []
+	].join("\n") : "";
+	(0, import_react.useEffect)(() => {
+		if (!open) return;
+		setToken(null);
+		setConfig(null);
+		setCreated(null);
+		setError(null);
+		setConfigError(false);
+		setCopied(false);
+		setSlow(false);
+	}, [open, template]);
+	(0, import_react.useEffect)(() => {
+		if (!open) return;
+		let active = true;
+		getConfig().then((value) => {
+			if (active) setConfig(value);
+		}).catch(() => {
+			if (active) setConfigError(true);
+		});
+		mintClaim({ data: teamId }).then((r) => {
+			if (active) "token" in r ? setToken(r.token) : setError(r.error);
+		}).catch(() => {
+			if (active) setError("could not mint a connect key");
+		});
+		return () => {
+			active = false;
+		};
+	}, [open, teamId]);
+	(0, import_react.useEffect)(() => {
+		if (!open || created || !token) return;
+		if (pollRef.current) clearInterval(pollRef.current);
+		pollRef.current = setInterval(() => {
+			claimStatus({ data: token }).then((s) => {
+				if (s.done && s.id) {
+					if (pollRef.current) clearInterval(pollRef.current);
+					setCreated({
+						id: s.id,
+						name: s.name ?? "loop",
+						agent: s.agent ?? "claude-code"
+					});
+					onCreatedRef.current();
+				}
+			}).catch(() => {});
+		}, 2500);
+		const slowTimer = setTimeout(() => setSlow(true), SLOW_WAIT_MS);
+		return () => {
+			if (pollRef.current) clearInterval(pollRef.current);
+			clearTimeout(slowTimer);
+		};
+	}, [
+		open,
+		created,
+		token
+	]);
+	async function copy() {
+		try {
+			await navigator.clipboard.writeText(snippet);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1500);
+		} catch {
+			setError("could not copy - select the text and copy manually");
+		}
+	}
+	const snippetBox = (showInlineCopy = true) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0 flex-1",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+					className: "text-label font-semibold text-display",
+					children: "Paste to capture it"
+				}), showInlineCopy && snippet && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+					className: btnSm,
+					onClick: () => void copy(),
+					children: copied ? "✓ Copied" : "Copy"
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-2 overflow-hidden rounded-control border border-hairline bg-raised p-3 font-mono text-label text-primary",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "leading-relaxed",
+						children: instruction
+					}),
+					configLines ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
+						className: "mt-3 overflow-x-auto whitespace-pre-wrap border-t border-hairline pt-3 leading-relaxed text-secondary",
+						children: configLines
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "mt-3 border-t border-hairline pt-3 leading-relaxed text-secondary",
+						children: configError ? "Could not load the CLI configuration. Close and try again." : token ? "Loading CLI configuration…" : "Minting a connect key…"
+					}),
+					description && configLines && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "mt-3 whitespace-pre-wrap border-t border-hairline pt-3 leading-relaxed text-primary",
+						children: description
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+				className: "mt-2 text-body leading-snug text-secondary",
+				children: [
+					"Paste it in that same session - reuses this machine automatically. Your agent will",
+					" ",
+					template ? "set the loop up from here." : "ask what the loop should do."
+				]
+			})
+		]
+	});
+	const wait = slow ? {
+		dot: "bg-secondary",
+		text: "Still waiting - check your coding agent is running in the right project, then paste again."
+	} : {
+		dot: "animate-pulse bg-rubik-orange",
+		text: "Waiting for your coding agent…"
+	};
+	const copyPromptButton = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+		className: `${btnPrimaryPill} ml-auto`,
+		onClick: () => void copy(),
+		disabled: !snippet,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+			className: "inline-flex items-center gap-0.5",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClaudeCodeMark, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodexMark, {})]
+		}), copied ? "✓ Copied" : "Copy prompt"]
+	});
+	if (created) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Modal, {
+		open,
+		onClose,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalHead, {
+				title: "Loop created",
+				sub: `${AGENT_LABEL[created.agent]} built and registered it.`
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-5 rounded-card border border-hairline bg-surface p-5 shadow-card",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "text-[17px] font-medium text-display",
+					children: ["✓ ", created.name]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "mt-1 text-body text-secondary",
+					children: "It’s scheduled now and will run on the machine."
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-4",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+					className: btnPrimary,
+					onClick: onClose,
+					children: "Done"
+				})
+			})
+		]
+	});
+	if (template) {
+		const showFlow = hasLoopFlow(template.name);
+		const promptCol = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "min-w-0",
+			children: [
+				snippetBox(false),
+				error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mt-3 text-body text-accent",
+					children: ["Error: ", error]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mt-6 flex items-start gap-3",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `mt-1 inline-block h-2 w-2 shrink-0 rounded-full ${wait.dot}` }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-label leading-relaxed text-secondary",
+							children: wait.text
+						}),
+						copyPromptButton
+					]
+				})
+			]
+		});
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Modal, {
+			open,
+			onClose,
+			wide: showFlow,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalHead, {
+				title: template.label,
+				sub: "Paste this into your coding agent, in the project you want the loop for."
+			}), showFlow ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-5 grid gap-8 md:grid-cols-[minmax(0,1fr)_400px]",
+				children: [promptCol, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "min-w-0 md:border-l md:border-hairline md:pl-8",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopFlow, { template })
+				})]
+			}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-6",
+				children: promptCol
+			})]
+		});
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Modal, {
+		open,
+		onClose,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalHead, { title: "New loop" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-6",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex gap-3.5",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex flex-col items-center",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "flex size-5 shrink-0 items-center justify-center rounded-full border border-display text-micro font-medium leading-none text-display",
+							children: "1"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-1 w-px flex-1 bg-hairline" })]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "pb-6",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+							className: "text-label font-semibold text-display",
+							children: "Do it once in your coding agent"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+							className: "mt-1.5 text-body leading-snug text-secondary",
+							children: "Run the task yourself first, to a real result you’re happy with."
+						})]
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex gap-3.5",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "flex size-5 shrink-0 items-center justify-center rounded-full border border-display text-micro font-medium leading-none text-display",
+						children: "2"
+					}), snippetBox(false)]
+				})]
+			}),
+			error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-3 text-body text-accent",
+				children: ["Error: ", error]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-6 flex items-start gap-3",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `mt-1 inline-block h-2 w-2 shrink-0 rounded-full ${wait.dot}` }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-label leading-relaxed text-secondary",
+						children: wait.text
+					}),
+					copyPromptButton
+				]
+			})
+		]
+	});
+}
+/** The LIVE data fan-out - jobs/machines/teams change between polls. Templates
+*  are static per deploy (a compile-time registry), so only the route loader
+*  fetches them; the poll must not re-ship the thumb SVGs every 3-10s.
+*
+*  `teamId` (the `/t/<id>` route's team, in id form or undefined in open mode)
+*  scopes every list fn EXPLICITLY - so a tab on /t/A and one on /t/B show
+*  different teams simultaneously, independent of the shared last-used cookie. */
+async function fetchLiveData(teamId) {
+	const [jobs, machines, teams] = await Promise.all([
+		listJobs({ data: teamId }),
+		listMachines({ data: teamId }),
+		listMyTeams({ data: teamId })
+	]);
+	return {
+		jobs,
+		machines,
+		teams
+	};
+}
+/**
+* The dashboard body, shared by the `/` (open mode) and `/t/<teamId>` routes. It
+* renders from its own fetch-then-set poll state, seeded once from the route
+* loader's data, and scopes every fetch to `teamId` so the view is pinned to the
+* URL's team (multi-tab safe). The route mounts it with `key={teamId}` so a
+* team switch (a `/t/<id>` navigation) re-seeds state from the new loader data.
+*/
+function DashboardView({ teamId, initial }) {
+	const [data, setData] = (0, import_react.useState)(() => ({
+		jobs: initial?.jobs ?? [],
+		templates: initial?.templates ?? [],
+		machines: initial?.machines ?? [],
+		teams: initial?.teams
+	}));
+	const { jobs, templates, machines, teams } = data;
+	const online = machines.filter((m) => m.online).length;
+	const navigate = useNavigate();
+	const [compose, setCompose] = (0, import_react.useState)({
+		open: false,
+		template: null
+	});
+	const [machinesOpen, setMachinesOpen] = (0, import_react.useState)(false);
+	const [notifyOpen, setNotifyOpen] = (0, import_react.useState)(false);
+	const [teamsOpen, setTeamsOpen] = (0, import_react.useState)(false);
+	const refetch = (0, import_react.useCallback)(async () => {
+		try {
+			const live = await fetchLiveData(teamId);
+			setData((prev) => ({
+				...prev,
+				...live
+			}));
+		} catch {}
+	}, [teamId]);
+	const openRef = (0, import_react.useRef)(false);
+	openRef.current = compose.open || machinesOpen || notifyOpen || teamsOpen;
+	const anyRunning = jobs.some((j) => j.running);
+	(0, import_react.useEffect)(() => {
+		const t = setInterval(() => {
+			if (!openRef.current) refetch();
+		}, anyRunning ? 3e3 : 1e4);
+		return () => clearInterval(t);
+	}, [refetch, anyRunning]);
+	const refresh = () => void refetch();
+	const completed = jobs.filter(isCompleted);
+	const active = jobs.filter((j) => !isCompleted(j));
+	const activeOn = active.filter((j) => j.enabled).length;
+	const cardProps = () => ({
+		onOpen: (id) => void navigate({
+			to: "/loops/$loopId",
+			params: { loopId: id }
+		}),
+		onPickRun: (jobId, run) => void navigate({
+			to: "/loops/$loopId/runs/$runId",
+			params: {
+				loopId: jobId,
+				runId: run.id
+			}
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipProvider, {
+		delay: 120,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", {
+				className: "glass glass-bar sticky top-0 z-50",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mx-auto flex max-w-[1180px] items-center gap-3 px-8 py-2.5",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PievoLogo, { size: 30 }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-[18px] font-semibold tracking-[-0.015em] text-display",
+							children: "Pievo"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamSwitcher, { data: teams }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+							href: GITHUB_URL,
+							target: "_blank",
+							rel: "noreferrer",
+							"aria-label": "GitHub repository",
+							title: "GitHub",
+							className: headerIconBtn,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GitHubIcon, { className: "size-[17px]" })
+						}),
+						teams && teams.teams.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							onClick: () => setTeamsOpen(true),
+							className: headerBtn,
+							children: "Teams"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							onClick: () => setNotifyOpen(true),
+							className: headerBtn,
+							children: "Notifications"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+							onClick: () => setMachinesOpen(true),
+							className: `${headerBtn} gap-1.5`,
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `inline-block size-1.5 rounded-full ${online ? "bg-rubik-green" : "bg-disabled"}` }),
+								online,
+								" ",
+								online === 1 ? "machine" : "machines",
+								" online"
+							]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							onClick: () => setCompose({
+								open: true,
+								template: null
+							}),
+							className: "inline-flex shrink-0 cursor-pointer items-center rounded-full bg-display px-3.5 py-1.5 text-meta font-medium text-paper transition-opacity hover:opacity-85",
+							children: "New Loop"
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", {
+				className: "mx-auto max-w-[1180px] px-8 pb-24",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+						className: "pb-2 pt-14 text-center",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+								className: "font-pixel text-[clamp(28px,4.5vw,38px)] leading-[1.15] text-display",
+								children: "What should happen while you sleep?"
+							}),
+							templates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: "mb-5 mt-2 text-body text-secondary",
+								children: "Start with a template…"
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TemplateFan, {
+								templates,
+								onPick: (t) => setCompose({
+									open: true,
+									template: t
+								})
+							})] }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: "mt-7",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+									onClick: () => setCompose({
+										open: true,
+										template: null
+									}),
+									className: "inline-flex cursor-pointer items-center gap-1.5 rounded-full bg-display px-6 py-2.5 text-body font-medium text-paper transition-opacity hover:opacity-85",
+									children: [templates.length ? "Start a blank loop" : "Start your first loop", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										"aria-hidden": true,
+										children: "→"
+									})]
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "mb-5 mt-12 flex items-baseline gap-2.5",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+							className: "text-body font-semibold text-display",
+							children: "Active loops"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-label text-secondary",
+							children: active.length ? `${activeOn} scheduled · ${active.length} total` : ""
+						})]
+					}),
+					active.length ? active.map((j) => /* @__PURE__ */ (0, import_react.createElement)(LoopCard, {
+						job: j,
+						...cardProps(),
+						key: j.id
+					})) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "py-16 text-center",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "text-[15px] text-secondary",
+							children: jobs.length ? "No active loops" : "No loops yet"
+						}), !jobs.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "mt-1.5 text-body text-disabled",
+							children: "Pick a template above, or start a blank loop."
+						})]
+					}),
+					completed.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "mb-5 mt-11 flex items-baseline gap-2.5",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+							className: "text-body font-semibold text-display",
+							children: "Completed"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+							className: "text-label text-secondary",
+							children: [completed.length, " total"]
+						})]
+					}), completed.map((j) => /* @__PURE__ */ (0, import_react.createElement)(LoopCard, {
+						job: j,
+						...cardProps(),
+						key: j.id
+					}))] }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopPlaybook, { onStart: () => setCompose({
+						open: true,
+						template: null
+					}) })
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComposeModal, {
+				open: compose.open,
+				template: compose.template,
+				teamId,
+				onClose: () => setCompose({
+					open: false,
+					template: null
+				}),
+				onCreated: refresh
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MachinesModal, {
+				open: machinesOpen,
+				onClose: () => setMachinesOpen(false),
+				teamId
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotificationsModal, {
+				open: notifyOpen,
+				onClose: () => setNotifyOpen(false)
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamsModal, {
+				open: teamsOpen,
+				onClose: () => setTeamsOpen(false),
+				activeTeamId: teamId
+			})
+		]
+	});
+}
+var headerBtn = "inline-flex shrink-0 cursor-pointer items-center rounded-full px-3 py-1.5 text-meta font-medium text-secondary transition-colors hover:bg-raised hover:text-display";
+var headerIconBtn = "inline-flex shrink-0 cursor-pointer items-center rounded-full p-1.5 text-secondary transition-colors hover:bg-raised hover:text-display";
+/**
+* The template fan - a hand of tilted cards (tilt/lift computed from each
+* card's offset from its ROW's center). Up to 5 cards stay a single hand;
+* more split into balanced rows of at most 4 (7 -> 4/3, 9 -> 3/3/3), so no
+* count can flex-wrap into one orphan card stranded under a full row.
+* Hover/focus straightens a card via the `.fan-card` rules in app.css.
+* One click carries the template into ComposeModal, same as the old flat cards.
+*/
+function TemplateFan({ templates, onPick }) {
+	const rowCount = templates.length <= 5 ? 1 : Math.ceil(templates.length / 4);
+	const rows = [];
+	for (let r = 0, at = 0; r < rowCount; r++) {
+		const size = Math.ceil((templates.length - at) / (rowCount - r));
+		rows.push(templates.slice(at, at + size));
+		at += size;
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "pb-3 pt-1",
+		children: rows.map((row, r) => {
+			const center = (row.length - 1) / 2;
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "flex flex-wrap items-start justify-center",
+				children: row.map((t, i) => {
+					const off = i - center;
+					return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+						type: "button",
+						onClick: () => onPick(t),
+						title: t.desc,
+						className: "fan-card relative w-[196px] shrink-0 cursor-pointer rounded-card border border-hairline bg-surface p-3 text-left shadow-[0_12px_28px_-16px_rgba(0,0,0,0.25)] outline-none focus-visible:ring-2 focus-visible:ring-interactive",
+						style: {
+							"--tilt": `${off * 3.5}deg`,
+							"--lift": `${Math.abs(off) * 7}px`,
+							marginInline: row.length > 1 ? "-5px" : void 0
+						},
+						children: [
+							t.thumb ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "block overflow-hidden rounded-control bg-raised [&_svg]:block [&_svg]:h-auto [&_svg]:w-full",
+								dangerouslySetInnerHTML: { __html: t.thumb }
+							}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "flex h-[76px] items-center justify-center rounded-control bg-raised text-secondary",
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopGlyph, {})
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "mt-2.5 block truncate text-center text-meta font-semibold text-primary",
+								children: t.label
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "mt-0.5 line-clamp-3 min-h-[45px] text-center text-caption leading-snug text-secondary",
+								children: t.desc
+							})
+						]
+					}, t.name);
+				})
+			}, r);
+		})
+	});
+}
+/** A circular-arrow "loop" mark - one glyph for every template, tinted per card. */
+function LoopGlyph() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+		"aria-hidden": true,
+		width: "30",
+		height: "30",
+		viewBox: "0 0 30 30",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.8",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M25.5 15a10.5 10.5 0 1 1-3.1-7.4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M25.5 3.5v5.2h-5.2" })]
+	});
+}
+//#endregion
+export { fetchLiveData as n, DashboardView as t };