@kky42/pievo-server 2.4.1 → 2.4.4

package/.output/server/_ssr/{DashboardView-D_hKsCsv.mjs → DashboardView-DqZLADCp.mjs}

@@ -1,20 +1,16 @@
 import { o as __toESM } from "../_runtime.mjs";
 import { g as require_react, h as require_jsx_runtime, s as TooltipProvider } from "../_libs/@base-ui/react+[...].mjs";
-import { E as selectCls, S as rel, a as btn, b as labelCls, c as btnPrimaryPill, d as cronText, k as useHydrated, o as btnDanger, p as dotLabel, r as Pill, s as btnPrimary, t as ErrorBanner, u as btnSm, x as lastRunOf, y as inputCls } from "./ui-DmFKW2H_.mjs";
+import { T as selectCls, _ as inputCls, a as btn, l as btnSm, o as btnDanger, r as Pill, s as btnPrimary, t as ErrorBanner, v as labelCls } from "./ui-dMEI4sHj.mjs";
 import { d as useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
-import { _ as listMyTeams, f as getConfig, g as listLoops, n as GitHubIcon, o as claimStatus, r as PievoLogo, t as GITHUB_URL, v as loadOlderRuns, y as mintClaim } from "./SocialLinks-BTjsnVOm.mjs";
+import { _ as loadOlderRuns, d as getConfig, g as listMyTeams, h as listLoops, n as GitHubIcon, r as PievoLogo, t as GITHUB_URL, v as mintClaim } from "./SocialLinks-Bt7huqfS.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-DcoVuWyH.mjs";
-import { r as deriveLoopLifecycle } from "./lifecycleUi-Dad3hvhm.mjs";
-import { a as Timeline, i as ModalSection, n as Modal, o as listMachines, r as ModalHead, s as mergeRuns, t as MachinesModal } from "./MachinesModal-DZ_9ErAU.mjs";
-//#region node_modules/.nitro/vite/services/ssr/assets/DashboardView-D_hKsCsv.js
+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-gilVwh7z.mjs";
+import { a as ModalSection, c as listMachines, i as ModalHead, l as mergeRuns, n as MachinesModal, r as Modal, s as daemonConnectCommand, t as LoopOverview } from "./MachinesModal-BsCfGuwp.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/DashboardView-DqZLADCp.js
 var import_react = /* @__PURE__ */ __toESM(require_react());
 var import_jsx_runtime = require_jsx_runtime();
 function LoopCard({ loop, onOpen, onPickRun }) {
 	const en = loop.enabled;
-	const last = lastRunOf(loop);
-	const lifecycle = deriveLoopLifecycle(loop);
-	const hydrated = useHydrated();
 	const [older, setOlder] = (0, import_react.useState)([]);
 	const runs = (0, import_react.useMemo)(() => older.length ? mergeRuns(loop.runs ?? [], older) : loop.runs ?? [], [loop.runs, older]);
 	const newestRun = runs.at(-1);
@@ -30,92 +26,17 @@ function LoopCard({ loop, onOpen, onPickRun }) {
 		if (more.length) setOlder((prev) => mergeRuns(prev, more));
 		return more.length;
 	};
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
 		onClick: () => onOpen(loop.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 || latestIncidentRun?.reportIncident || loop.pauseCause?.kind === "failure-streak" || loop.pauseCause?.kind === "blocked" ? "" : "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(loop.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: loop.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: loop.pauseCause?.kind === "blocked" ? "Paused — blocked · current run finishing" : loop.pauseCause?.kind === "owner" ? "Paused by owner · current run finishing" : "Paused · current run finishing" }) : lifecycle === "deleting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: "Deleting" }) : loop.running ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
-						tone: "running",
-						dot: "pulse",
-						children: "Running"
-					}) : loop.queued && loop.reconciliationBlocking ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
-						tone: "outline",
-						children: "Queued · waiting for machine recovery"
-					}) : loop.queued ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
-						tone: "outline",
-						children: "Queued"
-					}) : null,
-					lifecycle === "paused" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
-						tone: loop.pauseCause?.kind === "blocked" ? "accent" : void 0,
-						children: loop.pauseCause?.kind === "blocked" ? "Paused — blocked" : loop.pauseCause?.kind === "failure-streak" ? "Paused automatically" : loop.pauseCause?.kind === "owner" ? "Paused by owner" : "Paused"
-					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: "ml-auto min-w-0 text-right text-meta text-secondary",
-						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-							className: "whitespace-nowrap",
-							children: [
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-									className: "text-primary",
-									title: loop.schedule.mode === "cron" ? loop.schedule.cron : void 0,
-									children: loop.schedule.mode === "continuous" ? `continuous · ${loop.schedule.delayMinutes}m` : `${cronText(loop.schedule.cron)} · ${loop.schedule.timezone} · ${loop.schedule.overlap}`
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-									className: "mx-2.5 text-wire",
-									children: "·"
-								}),
-								loop.agent
-							]
-						}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-							className: "mt-1 truncate text-caption text-disabled",
-							title: loop.workdir,
-							children: [
-								loop.workdir,
-								" · Model: ",
-								loop.model || "default",
-								" · Reasoning: ",
-								loop.reasoningEffort || "default"
-							]
-						})]
-					})
-				]
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Timeline, {
-				loop,
-				runs,
-				total: loop.runCount,
-				onLoadMore: loadMore,
-				onPickRun: (run) => onPickRun(loop.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: [loop.runCount, " runs"] }), last && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-					"· last ",
-					dotLabel(last),
-					hydrated && ` · ${rel(last.ts)}`
-				] })]
-			}),
-			latestIncidentRun?.reportIncident && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-				className: "mt-1.5 text-label text-secondary",
-				children: latestIncidentRun.phase === "error" ? "Last run failed · Terminal report rejected" : "Last run telemetry warning · Terminal report rejected"
-			})
-		]
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopOverview, {
+			loop,
+			runs,
+			onLoadMore: loadMore,
+			onPickRun: (run) => onPickRun(loop.id, run),
+			onOpen: () => onOpen(loop.id)
+		})
 	});
 }
 /**
@@ -629,113 +550,21 @@ function TeamsModal({ open, onClose, activeTeamId }) {
 		]
 	});
 }
-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 through /api/machine/cli with this token as `claim`. We poll 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.
-*
-* Pievo is BYOA-only: every loop runs on the connected machine; there is no
-* hosted-agent option.
-*/
-function ComposeModal({ open, onClose, onCreated, teamId }) {
+function ComposeModal({ open, onClose, 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 snippet = token && config ? [
-		instruction,
-		"",
-		configLines
-	].join("\n") : "";
+	const command = token && config ? daemonConnectCommand(origin, token, config.pievoCli, config.customCli) : "";
 	(0, import_react.useEffect)(() => {
 		if (!open) return;
 		setToken(null);
 		setConfig(null);
-		setCreated(null);
+		setCopied(false);
 		setError(null);
 		setConfigError(false);
-		setCopied(false);
-		setSlow(false);
 	}, [open]);
 	(0, import_react.useEffect)(() => {
 		if (!open) return;
@@ -745,8 +574,10 @@ function ComposeModal({ open, onClose, onCreated, teamId }) {
 		}).catch(() => {
 			if (active) setConfigError(true);
 		});
-		mintClaim({ data: teamId }).then((r) => {
-			if (active) "token" in r ? setToken(r.token) : setError(r.error);
+		mintClaim({ data: teamId }).then((result) => {
+			if (!active) return;
+			if ("token" in result) setToken(result.token);
+			else setError(result.error);
 		}).catch(() => {
 			if (active) setError("could not mint a connect key");
 		});
@@ -754,119 +585,15 @@ function ComposeModal({ open, onClose, onCreated, teamId }) {
 			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) {
-					if (!s.id || !s.name || !s.agent) throw new Error("invalid claim response");
-					if (pollRef.current) clearInterval(pollRef.current);
-					setCreated({
-						id: s.id,
-						name: s.name,
-						agent: s.agent
-					});
-					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() {
+	async function copyCommand() {
 		try {
-			await navigator.clipboard.writeText(snippet);
+			await navigator.clipboard.writeText(command);
 			setCopied(true);
 			setTimeout(() => setCopied(false), 1500);
 		} catch {
-			setError("could not copy - select the text and copy manually");
+			setError("could not copy - select the command 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…"
-				})]
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
-				className: "mt-2 text-body leading-snug text-secondary",
-				children: "Paste it in that same session - reuses this machine automatically. Your agent will 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: `Configured to run with ${AGENT_LABEL[created.agent]}.`
-			}),
-			/* @__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"
-				})
-			})
-		]
-	});
 	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Modal, {
 		open,
 		onClose,
@@ -874,50 +601,62 @@ function ComposeModal({ open, onClose, onCreated, teamId }) {
 			/* @__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" })]
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Step, {
+					number: "1",
+					continued: true,
+					title: "Install and connect the daemon",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "mt-1.5 text-body leading-snug text-secondary",
+						children: "Paste this command into the foreground coding-agent session where the loop should run."
 					}), /* @__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."
+						className: "mt-3 flex min-w-0 items-start gap-2",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
+							className: "min-w-0 flex-1 overflow-x-auto whitespace-pre-wrap break-all rounded-control bg-display p-4 font-mono text-label leading-relaxed text-paper",
+							children: command || (configError ? "Could not load the connection command. Close and try again." : token ? "Loading CLI configuration…" : "Minting a connect key…")
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							className: btnSm,
+							onClick: () => void copyCommand(),
+							disabled: !command,
+							children: copied ? "Copied ✓" : "Copy"
 						})]
 					})]
-				}), /* @__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)]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Step, {
+					number: "2",
+					title: "Create the loop",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "mt-1.5 text-body leading-snug text-secondary",
+						children: "Then, in the same session, say:"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "mt-3 rounded-control border border-hairline bg-raised p-4 text-body font-medium text-display",
+						children: "Create a Pievo loop."
+					})]
 				})]
 			}),
 			error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: "mt-3 text-body text-accent",
+				className: "mt-4 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
-				]
 			})
 		]
 	});
 }
+function Step({ number, title, continued = false, children }) {
+	return /* @__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: number
+			}), continued && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-1 w-px flex-1 bg-hairline" })]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: continued ? "min-w-0 flex-1 pb-7" : "min-w-0 flex-1",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+				className: "text-label font-semibold text-display",
+				children: title
+			}), children]
+		})]
+	});
+}
 /** Loops, machines, and teams change between polls.
 *
 *  `teamId` (the `/t/<id>` route's team, in id form or undefined in open mode)
@@ -964,7 +703,6 @@ function DashboardView({ teamId, initial }) {
 		}, anyRunning ? 3e3 : 1e4);
 		return () => clearInterval(t);
 	}, [refetch, anyRunning]);
-	const refresh = () => void refetch();
 	const activeOn = loops.filter((j) => j.enabled).length;
 	const cardProps = () => ({
 		onOpen: (id) => void navigate({
@@ -1051,7 +789,7 @@ function DashboardView({ teamId, initial }) {
 						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"
+							children: "Loops"
 						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
 							className: "text-label text-secondary",
 							children: loops.length ? `${activeOn} scheduled · ${loops.length} total` : ""
@@ -1076,8 +814,7 @@ function DashboardView({ teamId, initial }) {
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComposeModal, {
 				open: composeOpen,
 				teamId,
-				onClose: () => setComposeOpen(false),
-				onCreated: refresh
+				onClose: () => setComposeOpen(false)
 			}),
 			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MachinesModal, {
 				open: machinesOpen,