@kky42/pievo-server 1.0.0

package/.output/server/_ssr/loops._loopId-DhnArGdL.mjs

@@ -0,0 +1,1635 @@
+import { o as __toESM } from "../_runtime.mjs";
+import { C as require_jsx_runtime, S as require_react, a as MenuPortal, i as MenuPositioner, n as MenuTrigger, o as MenuPopup, r as MenuRoot, s as MenuItem, t as Separator } from "../_libs/@base-ui/react+[...].mjs";
+import { c as CODING_AGENTS, ft as isTaskEntry, h as buildFileEntries } from "./boot-BbtG0ImW.mjs";
+import { A as selectCls, C as labelCls, E as rel, M as until, O as runPulseStyle, S as isCompleted, _ as fmt, b as inputCls, c as btnDanger, d as btnQuiet, g as dur, h as dotLabel, i as Pre, j as tsShort, k as sectionHeadCls, l as btnPrimary, m as dotColor, n as Loading, o as btn, p as cronText, r as Pill, s as btnCost, t as ErrorBanner, x as isClosed, y as humanBytes } from "./ui-Dej2qjuS.mjs";
+import { d as useNavigate, u as Link } from "../_libs/@tanstack/react-router+[...].mjs";
+import { C as startJob, S as runJob, _ as loadOlderRuns, a as evolveJob, b as pauseJob, c as getArtifacts, f as getJobDetail, i as deleteJob, o as forceDeleteJob, w as stopJob, x as requestEdit, y as patchJob } from "./loopApi-Cxe8WyOB.mjs";
+import { n as TaskFileView, r as ViewerHead, t as ArtifactBody } from "./artifactView-DS4O22wl.mjs";
+import { i as useFlash, n as FlashLine, r as LoadErrorCard, t as ConfirmBar } from "./actionUi-CZbEixbf.mjs";
+import { s as useSession } from "./LoopPlaybook-BXH8mhiX.mjs";
+import { t as setActiveTeamCookie } from "./teamCookie-B7hLOIie.mjs";
+import { t as SignIn } from "./SignIn-dTndU6Hw.mjs";
+import { i as lifecycleDisplay, n as daemonStopSupport, r as deriveLoopLifecycle, t as DAEMON_UPGRADE_REQUIRED } from "./lifecycleUi-C9lg1r3r.mjs";
+import { a as listChannels, n as Timeline, s as mergeRuns, t as MachinesModal } from "./notifyFns-Q458pZmE.mjs";
+import { t as Route } from "./loops._loopId-7NQJPB9W.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/loops._loopId-DhnArGdL.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* Copy-prompt path for the loop-detail Edit composer.
+*
+* The dispatch path (`requestEdit`) runs ONE agent pass on the owner's machine -
+* spends credits, no conversation. This is the non-dispatch alternative: a
+* self-contained prompt the owner pastes into their OWN local coding-agent
+* session (in the loop's directory) so they can iterate/converse and adjust the
+* loop themselves. Pure + agent-neutral so it's unit-testable and never inlines
+* user text unsafely into JSX.
+*/
+/** The loop's on-disk folder — the containing directory of its task file
+*  (e.g. `.../pievo/<loop>/`). Returns null when the task file path is absent
+*  or has no parent, so callers degrade to a generic instruction rather than
+*  fabricating a path. Handles both POSIX and Windows separators. */
+function loopDir(taskFile) {
+	if (!taskFile) return null;
+	const norm = taskFile.replace(/\\/g, "/").replace(/\/+$/, "");
+	const i = norm.lastIndexOf("/");
+	return i > 0 ? norm.slice(0, i) : null;
+}
+/** Build the ready-to-paste prompt for a fresh coding-agent session: it states
+*  that they're adjusting a named Pievo loop, what the owner wants (their typed
+*  instruction, or a clear placeholder asking them to describe it), and that the
+*  agent should drive the installed pievo CLI/skill (`pievo loops`,
+*  `pievo edit <id> ...`) to apply and confirm the change. Concise, agent-neutral. */
+function buildEditPrompt({ loopId, loopName, instruction }) {
+	const want = instruction?.trim() || "Describe the change you want to make to this loop.";
+	return [
+		`I want to adjust my Pievo loop "${loopName}" (loop id: ${loopId}).`,
+		"",
+		"The change I want:",
+		want,
+		"",
+		`Use the installed pievo CLI/skill to apply it: run \`pievo loops\` to find the loop, then \`pievo edit ${loopId} ...\` to make the change, and confirm the loop now reflects it. Ask me first if anything is unclear.`
+	].join("\n");
+}
+/**
+* The unified "Files" surface of the loop detail page — the loop's spec (its task
+* file) shown ALONGSIDE every live-synced artifact in ONE master-detail panel,
+* not two separate boxes. A file list (task file pinned first, then artifacts
+* path-sorted) drives a content viewer on the right; the task file is selected by
+* default. Text files render inline (markdown → formatted, else mono); binary /
+* oversize files offer the download route. The artifact list is fetched lazily by
+* loopId and self-polls so files appear as the loop writes them (Phase 1-2 reuse).
+*/
+var basename = (path) => path.split("/").pop() || path;
+/** Faint type tag shown after a file's size. */
+function typeTag(path) {
+	const m = path.match(/\.([a-z0-9]+)$/i);
+	return m ? m[1].toLowerCase() : "file";
+}
+function LoopFilesPanel({ loopId, taskFile, taskFileContent, taskFileSyncedAt, running }) {
+	const [artifacts, setArtifacts] = (0, import_react.useState)(null);
+	const [selected, setSelected] = (0, import_react.useState)(null);
+	const seq = (0, import_react.useRef)(0);
+	const refresh = (0, import_react.useCallback)(async () => {
+		const mine = ++seq.current;
+		try {
+			const list = await getArtifacts({ data: { loopId } });
+			if (mine === seq.current) setArtifacts(list);
+		} catch {
+			if (mine === seq.current) setArtifacts((prev) => prev ?? []);
+		}
+	}, [loopId]);
+	(0, import_react.useEffect)(() => {
+		setArtifacts(null);
+		setSelected(null);
+		refresh();
+	}, [loopId, refresh]);
+	(0, import_react.useEffect)(() => {
+		const t = setInterval(() => void refresh(), running ? 4e3 : 12e3);
+		return () => clearInterval(t);
+	}, [running, refresh]);
+	const entries = (0, import_react.useMemo)(() => buildFileEntries(taskFile, artifacts ?? []), [taskFile, artifacts]);
+	const activePath = selected && entries.some((e) => e.path === selected) ? selected : entries[0]?.path ?? null;
+	const active = entries.find((e) => e.path === activePath) ?? null;
+	const activeIsTask = isTaskEntry(active);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+		id: "files",
+		className: "min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "mb-2.5 flex items-end justify-between gap-3 border-b border-hairline pb-1.5",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", {
+				className: "text-label font-semibold text-secondary",
+				children: ["Files", artifacts ? ` (${entries.length})` : ""]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-caption font-medium text-disabled",
+				children: "Spec + synced artifacts"
+			})]
+		}), entries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "rounded-card border border-hairline bg-surface px-5 py-10 text-center text-body text-disabled shadow-card",
+			children: artifacts == null ? "Loading…" : "No files yet - the task file and synced artifacts appear here."
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "grid h-[min(600px,68vh)] grid-cols-1 overflow-hidden rounded-card border border-hairline bg-surface shadow-card sm:grid-cols-[210px_1fr]",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("nav", {
+				className: "max-h-44 overflow-y-auto border-b border-hairline sm:max-h-none sm:border-b-0 sm:border-r",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+					className: "py-1.5",
+					children: entries.map((e) => {
+						const on = e.path === activePath;
+						const isTask = isTaskEntry(e);
+						const meta = !isTask && e.kind === "artifact" ? e.file.meta : null;
+						const title = meta?.title?.trim() || "";
+						const display = title && title !== basename(e.path) ? title : basename(e.path);
+						const showPath = e.path.includes("/") || display !== basename(e.path);
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+							type: "button",
+							onClick: () => setSelected(e.path),
+							className: `flex w-full items-center gap-2 border-l-2 px-3 py-2 text-left transition-colors ${on ? "border-display bg-raised" : "border-transparent hover:bg-raised/60"}`,
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: `block truncate font-mono text-label ${on ? "text-display" : "text-primary"}`,
+									title: e.path,
+									children: display
+								}), showPath && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "block truncate font-mono text-micro text-disabled",
+									title: e.path,
+									children: e.path
+								})]
+							}), isTask ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "shrink-0 rounded-full bg-interactive-soft px-2 text-caption font-medium text-interactive",
+								children: "Task"
+							}) : meta?.type ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "shrink-0 truncate rounded-full bg-raised px-2 text-caption font-medium text-secondary",
+								title: `type: ${meta.type}`,
+								children: meta.type
+							}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "shrink-0 font-mono text-micro text-disabled",
+								children: typeTag(e.path)
+							})]
+						}) }, e.path);
+					})
+				})
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "min-w-0 overflow-y-auto",
+				children: activeIsTask && active ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TaskEntryView, {
+					path: active.path,
+					content: taskFileContent,
+					syncedAt: taskFileSyncedAt
+				}) : active?.kind === "artifact" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArtifactEntryView, {
+					loopId,
+					file: active.file
+				}) : null
+			})]
+		})]
+	});
+}
+/** The task file pane — the loop's spec, rendered as formatted markdown. */
+function TaskEntryView({ path, content, syncedAt }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewerHead, {
+		path,
+		meta: syncedAt ? `Task file · synced ${fmt(syncedAt)}` : "Task file"
+	}), content == null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "px-5 py-6 text-body text-disabled",
+		children: "(syncs from the machine on the next run)"
+	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TaskFileView, { content })] });
+}
+/** The artifact pane — the shared caption strip over the shared content body. */
+function ArtifactEntryView({ loopId, file }) {
+	const meta = [file.size != null ? humanBytes(file.size) : "", `synced ${fmt(file.updatedAt)}`].filter(Boolean).join(" · ");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewerHead, {
+		path: file.path,
+		meta
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArtifactBody, {
+		loopId,
+		file
+	})] });
+}
+/**
+* Build the exec slice of a manual form save.
+*
+* Always emits so model / allowControl ride with Save even when workdir is
+* empty (common for taskFile/workflow-only loops). Empty strings stay defined
+* so patchJob can clear stored model/workdir via `trim() || null` - do not
+* coerce cleared fields to `undefined` or gate the whole object on workdir.
+*/
+function buildFormExec(f) {
+	return {
+		executor: "claude",
+		workdir: f.workdir.trim(),
+		model: f.model.trim(),
+		allowControl: f.allowControl
+	};
+}
+var CodeField = (0, import_react.lazy)(() => import("./CodeField-tm4rr6G3.mjs"));
+function initState(initial) {
+	const e = initial?.exec;
+	return {
+		name: initial?.name ?? "",
+		cron: initial?.cron ?? "0 */3 * * *",
+		scheduleMode: initial?.scheduleMode ?? "cron",
+		continuousDelayMinutes: String(initial?.continuousDelayMinutes ?? 1),
+		taskFile: initial?.taskFile ?? "",
+		notify: initial?.notify ?? "auto",
+		channelId: initial?.channelId ?? "",
+		workflow: initial?.workflow ?? "",
+		stateSchema: initial?.stateSchema ? JSON.stringify(initial.stateSchema) : "",
+		ui: initial?.ui ?? "",
+		agent: initial?.agent ?? "claude-code",
+		workdir: e?.workdir ?? "",
+		model: e?.model ?? "",
+		allowControl: !!e?.allowControl
+	};
+}
+/** Quiet helper line under a field - guidance, not chrome. */
+var hintCls = "mt-1 text-caption leading-snug text-disabled";
+/** Display labels for the known agents; an unknown/widened value falls back to its
+*  raw enum token so a newly-added agent still renders. */
+var AGENT_LABEL$1 = {
+	"claude-code": "Claude Code",
+	codex: "Codex"
+};
+function TextField({ label, value, onChange, mono, ph, hint }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+				className: labelCls,
+				children: label
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+				type: "text",
+				className: mono ? `${inputCls} font-mono` : inputCls,
+				value,
+				placeholder: ph,
+				onChange: (e) => onChange(e.target.value)
+			}),
+			hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: hintCls,
+				children: hint
+			})
+		]
+	});
+}
+/** Section divider - same recipe as ModalSection, local so the form owns its rhythm. */
+function Section({ title, hint }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "mb-1 mt-7 border-b border-hairline pb-1.5",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+			className: sectionHeadCls,
+			children: title
+		}), hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "mt-0.5 text-caption text-disabled",
+			children: hint
+		})]
+	});
+}
+/** Chunk-load placeholder that holds the editor's footprint (no layout jump). */
+function EditorFallback({ minHeight }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "rounded-control border border-wire bg-raised",
+		style: { minHeight }
+	});
+}
+var LoopForm = (0, import_react.forwardRef)(function LoopForm({ initial, channels: channelsProp }, ref) {
+	const [f, setF] = (0, import_react.useState)(() => initState(initial));
+	const set = (k, v) => setF((s) => ({
+		...s,
+		[k]: v
+	}));
+	const [schemaErr, setSchemaErr] = (0, import_react.useState)(null);
+	const [fetched, setFetched] = (0, import_react.useState)([]);
+	const channels = channelsProp ?? fetched;
+	(0, import_react.useEffect)(() => {
+		if (channelsProp) return;
+		listChannels().then(setFetched).catch(() => {});
+	}, [channelsProp]);
+	(0, import_react.useImperativeHandle)(ref, () => ({ read() {
+		let stateSchema;
+		const ss = f.stateSchema.trim();
+		if (ss) try {
+			stateSchema = JSON.parse(ss);
+		} catch {
+			setSchemaErr("Not valid JSON - expected an array like [{\"key\":\"mrr\",\"label\":\"MRR\",\"unit\":\"$\"}]");
+			return null;
+		}
+		return {
+			name: f.name.trim(),
+			cron: f.cron.trim(),
+			scheduleMode: f.scheduleMode,
+			continuousDelayMinutes: Math.max(1, Number.parseInt(f.continuousDelayMinutes, 10) || 1),
+			taskFile: f.taskFile.trim(),
+			notify: f.notify,
+			channelId: f.channelId || null,
+			workflow: f.workflow.trim(),
+			ui: f.ui.trim() || void 0,
+			agent: f.agent,
+			exec: buildFormExec(f),
+			stateSchema
+		};
+	} }));
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "grid gap-x-10 lg:grid-cols-[minmax(300px,380px)_minmax(0,1fr)]",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "min-w-0",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: "Basics" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+					label: "Name",
+					value: f.name,
+					onChange: (v) => set("name", v)
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+							className: labelCls,
+							children: "Schedule mode"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+							"aria-label": "Schedule mode",
+							className: selectCls,
+							value: f.scheduleMode,
+							onChange: (e) => set("scheduleMode", e.target.value),
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+								value: "cron",
+								children: "Cron"
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+								value: "continuous",
+								children: "Continuous"
+							})]
+						}),
+						f.scheduleMode === "cron" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: `${inputCls} flex cursor-default select-none items-center justify-between gap-2 bg-raised`,
+							title: f.cron,
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "truncate text-primary",
+								children: cronText(f.cron)
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "shrink-0 font-mono text-caption text-secondary",
+								children: f.cron
+							})]
+						}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+							label: "Delay after each exec (minutes)",
+							value: f.continuousDelayMinutes,
+							onChange: (v) => set("continuousDelayMinutes", v),
+							mono: true,
+							hint: "At least 1 minute. Done and error continue; canceled runs do not."
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: hintCls,
+							children: "Cron is retained while continuous mode is active, so switching back restores it."
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+					label: "Task file",
+					value: f.taskFile,
+					onChange: (v) => set("taskFile", v),
+					mono: true,
+					hint: "Path of the markdown file this loop tracks/maintains on the machine (optional)."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: "Notifications" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+							className: labelCls,
+							children: "Notify"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
+							"aria-label": "Notify",
+							className: selectCls,
+							value: f.notify,
+							onChange: (e) => set("notify", e.target.value),
+							children: [
+								"auto",
+								"always",
+								"never"
+							].map((n) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: n }, n))
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: hintCls,
+							children: "auto pushes only when a run found something; never silences everything."
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+						className: labelCls,
+						children: "Push channel"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+						"aria-label": "Push channel",
+						className: selectCls,
+						value: f.channelId,
+						onChange: (e) => set("channelId", e.target.value),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+							value: "",
+							children: "none (dashboard only)"
+						}), channels.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+							value: c.id,
+							children: c.name
+						}, c.id))]
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
+					title: "Execution",
+					hint: "Which coding agent on the machine runs this loop."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+							className: labelCls,
+							children: "Coding agent"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
+							"aria-label": "Coding agent",
+							className: selectCls,
+							value: f.agent,
+							onChange: (e) => set("agent", e.target.value),
+							children: CODING_AGENTS.map((a) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+								value: a,
+								children: AGENT_LABEL$1[a] ?? a
+							}, a))
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: hintCls,
+							children: "Which coding agent executes this loop on the bound machine."
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+					label: "Working directory",
+					value: f.workdir,
+					onChange: (v) => set("workdir", v),
+					mono: true,
+					ph: "/Users/you/Workspace/project",
+					hint: "Project root on the machine - empty means workflow-only / agent() escalation."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+					label: "Model",
+					value: f.model,
+					onChange: (v) => set("model", v),
+					hint: "Optional - the daemon default when empty."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
+					className: "mt-4 flex cursor-pointer items-center gap-2 text-body text-primary",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+						type: "checkbox",
+						className: "accent-[color:var(--color-display)]",
+						checked: f.allowControl,
+						onChange: (e) => set("allowControl", e.target.checked)
+					}), "Allow self-rescheduling"]
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "min-w-0",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
+					title: "Agent-authored content",
+					hint: "Workflow, metrics and dashboard - usually written by evolve passes; edit by hand here when you know exactly what you want."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+					className: labelCls,
+					children: "Workflow · JavaScript function body"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, {
+					fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorFallback, { minHeight: "180px" }),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeField, {
+						lang: "js",
+						value: f.workflow,
+						onChange: (v) => set("workflow", v),
+						minHeight: "180px",
+						placeholder: "const res = await tools.call(\"server.tool\", { ... })\nreturn { message: \"...\", state: { ... } }"
+					})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: hintCls,
+					children: [
+						"Deterministic zero-LLM pre-stage; top-level await and return ",
+						"{message, state}",
+						" are allowed (optional)."
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+					className: labelCls,
+					children: "Metrics schema · JSON array"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, {
+					fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorFallback, { minHeight: "90px" }),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeField, {
+						lang: "json",
+						value: f.stateSchema,
+						onChange: (v) => {
+							set("stateSchema", v);
+							setSchemaErr(null);
+						},
+						minHeight: "90px",
+						invalid: !!schemaErr,
+						placeholder: "[{\"key\":\"mrr\",\"label\":\"MRR\",\"unit\":\"$\"},{\"key\":\"paid\"}]"
+					})
+				}),
+				schemaErr ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "mt-1 text-caption leading-snug text-accent",
+					children: schemaErr
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: hintCls,
+					children: "Per-run metrics the agent reports; they feed the dashboard charts."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+					className: labelCls,
+					children: "Dashboard template · HTML"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, {
+					fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorFallback, { minHeight: "240px" }),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CodeField, {
+						lang: "html",
+						value: f.ui,
+						onChange: (v) => set("ui", v),
+						minHeight: "240px",
+						placeholder: "<h3>{{latest.mrr}}$</h3>\n<loop-chart series=\"mrr:MRR:$\"></loop-chart>"
+					})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: hintCls,
+					children: [
+						"Agent-authored HTML with ",
+						"{{bindings}}",
+						" and loop-chart / loop-embed / loop-calendar / loop-kanban elements."
+					]
+				})
+			]
+		})]
+	});
+});
+var AGENT_LABEL = {
+	"claude-code": "Claude Code",
+	codex: "Codex"
+};
+/** Composer starters - one per editable dimension, so a blank box never stalls
+*  the owner. Clicking seeds the instruction; the agent handles the rest. */
+var EDIT_SEEDS = [
+	{
+		label: "Change the schedule",
+		seed: "Change the schedule: "
+	},
+	{
+		label: "Adjust what it does",
+		seed: "Change what this loop does: "
+	},
+	{
+		label: "Improve the dashboard",
+		seed: "Improve the dashboard: "
+	},
+	{
+		label: "Set a finish line",
+		seed: "Give this loop a goal, and finish it once the goal is met: "
+	}
+];
+var LoopView = (0, import_react.lazy)(() => import("./LoopView-DCugEbHx.mjs").then((m) => ({ default: m.LoopView })));
+/**
+* Loop detail PAGE body (`/loops/$loopId`) — the redesign of the former modal.
+* One scrolling page: a loop header (name / status / schedule / agent / machine +
+* the action toolbar), an optional agent-authored dashboard, then a two-column
+* main with the UNIFIED Files panel (the task file alongside synced artifacts) and
+* the Runs timeline (a strip + a clickable list, each run linking to its own
+* detail route). Self-polls while open (fast while a run is live).
+*
+* Editing (2026-07 redesign): the primary path is an INLINE composer in the
+* header footer (same slot as the Push settings) - the page stays visible, so
+* the owner describes the change while looking at the spec/dashboard it applies
+* to. Dispatch swaps the composer for a live status card under the header
+* (queued → applying → settled with report + files + a link to
+* the edit run); the page keeps polling, so the applied change surfaces around
+* the card. Only the manual field form (the raw-settings fallback) remains a
+* full-page takeover.
+*/
+function LoopDetailView({ id }) {
+	const navigate = useNavigate();
+	const [detail, setDetail] = (0, import_react.useState)(null);
+	const [channels, setChannels] = (0, import_react.useState)([]);
+	const [err, setErr] = (0, import_react.useState)(null);
+	const [actionErr, setActionErr] = (0, import_react.useState)(null);
+	const [editing, setEditing] = (0, import_react.useState)(false);
+	const [editVia, setEditVia] = (0, import_react.useState)(false);
+	const [editInstruction, setEditInstruction] = (0, import_react.useState)("");
+	const [promptCopied, setPromptCopied] = (0, import_react.useState)(false);
+	const [editDispatched, setEditDispatched] = (0, import_react.useState)(false);
+	const [editRunId, setEditRunId] = (0, import_react.useState)(null);
+	const editBoxRef = (0, import_react.useRef)(null);
+	const [pushOpen, setPushOpen] = (0, import_react.useState)(false);
+	const [pushSaved, setPushSaved] = (0, import_react.useState)(false);
+	const [machinesOpen, setMachinesOpen] = (0, import_react.useState)(false);
+	const [pending, setPending] = (0, import_react.useState)(null);
+	const [confirming, setConfirming] = (0, import_react.useState)(null);
+	const [flash, setFlash] = useFlash();
+	const formRef = (0, import_react.useRef)(null);
+	const deletingRef = (0, import_react.useRef)(false);
+	const [older, setOlder] = (0, import_react.useState)([]);
+	const load = (0, import_react.useCallback)(async (silent = false) => {
+		try {
+			const next = await getJobDetail({ data: id });
+			setDetail(next);
+			deletingRef.current = next.summary.deleteRequestedAt != null;
+			setErr(null);
+		} catch (e) {
+			if (deletingRef.current) navigate({ to: "/" });
+			else if (!silent) setErr(String(e));
+		}
+	}, [id]);
+	(0, import_react.useEffect)(() => {
+		setDetail(null);
+		setEditing(false);
+		setEditVia(false);
+		setEditInstruction("");
+		setPromptCopied(false);
+		setEditDispatched(false);
+		setEditRunId(null);
+		setPushOpen(false);
+		setOlder([]);
+		load();
+		listChannels().then(setChannels).catch(() => {});
+	}, [id, load]);
+	const running = !!detail?.summary.running;
+	(0, import_react.useEffect)(() => {
+		if (editing) return;
+		const t = setInterval(() => void load(true), running || deletingRef.current ? 3e3 : 8e3);
+		return () => clearInterval(t);
+	}, [
+		editing,
+		running,
+		load
+	]);
+	(0, import_react.useEffect)(() => {
+		if (!pushSaved) return;
+		const t = setTimeout(() => setPushSaved(false), 1800);
+		return () => clearTimeout(t);
+	}, [pushSaved]);
+	async function refreshAll() {
+		await load();
+	}
+	function onRun() {
+		if (detail?.job.exec) setConfirming("run");
+		else doRun();
+	}
+	async function doRun() {
+		setActionErr(null);
+		setPending("run");
+		try {
+			const r = await runJob({ data: id });
+			if (r?.error) return setActionErr(`Run failed: ${r.error}`);
+			setConfirming(null);
+			setFlash({
+				label: r.coalesced ? "Already queued" : "Queued",
+				hold: 4e3
+			});
+			await refreshAll();
+		} finally {
+			setPending(null);
+		}
+	}
+	async function doEvolve() {
+		setActionErr(null);
+		setPending("evolve");
+		try {
+			const r = await evolveJob({ data: id });
+			if (r?.error) return setActionErr(`Evolve failed: ${r.error}`);
+			setConfirming(null);
+			setFlash({
+				label: r.coalesced ? "Evolve already queued" : "Evolve queued",
+				hold: 4e3
+			});
+			await refreshAll();
+		} finally {
+			setPending(null);
+		}
+	}
+	async function doLifecycle(action) {
+		setActionErr(null);
+		setPending("lifecycle");
+		try {
+			const r = action === "pause" ? await pauseJob({ data: id }) : action === "start" ? await startJob({ data: id }) : action === "stop" ? await stopJob({ data: id }) : action === "delete" ? await deleteJob({ data: id }) : await forceDeleteJob({ data: {
+				id,
+				confirmation: "delete-server-data-anyway"
+			} });
+			if (r.error) return setActionErr(`${action === "force-delete" ? "Force delete" : action[0].toUpperCase() + action.slice(1)} failed: ${r.error}`);
+			setConfirming(null);
+			if (r.deleted) {
+				deletingRef.current = false;
+				navigate({ to: "/" });
+				return;
+			}
+			if (action === "delete") deletingRef.current = true;
+			await refreshAll();
+			setFlash({ label: action === "start" ? "Started" : action === "pause" ? "Paused" : action === "stop" ? "Stop requested" : "Deleting" });
+		} finally {
+			setPending(null);
+		}
+	}
+	async function setPush(patch) {
+		setActionErr(null);
+		const r = await patchJob({ data: {
+			id,
+			patch
+		} });
+		if (r.error) return setActionErr(`Save failed: ${r.error}`);
+		await refreshAll();
+		setPushSaved(true);
+	}
+	async function onSave() {
+		const payload = formRef.current?.read();
+		if (!payload) return;
+		setActionErr(null);
+		setPending("save");
+		try {
+			const r = await patchJob({ data: {
+				id,
+				patch: payload
+			} });
+			if (r.error) return setActionErr(`Save failed: ${r.error}`);
+			setEditing(false);
+			await refreshAll();
+			setFlash({ label: "Saved" });
+		} finally {
+			setPending(null);
+		}
+	}
+	async function onRequestEdit() {
+		const instruction = editInstruction.trim();
+		if (!instruction) return;
+		setActionErr(null);
+		setPending("edit");
+		try {
+			const r = await requestEdit({ data: {
+				id,
+				instruction
+			} });
+			if (r.error) return setActionErr(`Couldn't queue the edit: ${r.error}`);
+			setEditRunId(r.runId ?? null);
+			setEditDispatched(true);
+			setEditVia(false);
+			setEditInstruction("");
+			await refreshAll();
+		} finally {
+			setPending(null);
+		}
+	}
+	function onConfirm() {
+		if (confirming === "run") doRun();
+		else if (confirming === "evolve") doEvolve();
+		else if (confirming === "pause") doLifecycle("pause");
+		else if (confirming === "stop") doLifecycle("stop");
+		else if (confirming === "delete") doLifecycle("delete");
+		else if (confirming === "force-delete") doLifecycle("force-delete");
+	}
+	const backLink = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+		to: "/",
+		className: "inline-flex items-center gap-1.5 text-meta font-medium text-secondary transition-colors hover:text-display",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			"aria-hidden": true,
+			children: "←"
+		}), " Loops"]
+	});
+	if (err) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shell, {
+		back: backLink,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadErrorCard, {
+			title: "Couldn't load this loop.",
+			detail: err,
+			onRetry: () => void load()
+		})
+	});
+	if (!detail) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shell, {
+		back: backLink,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {})
+	});
+	const { job, summary: s, runs } = detail;
+	const hasUi = !!job.ui;
+	const busy = !!pending;
+	const online = detail.machine.online;
+	const asleep = detail.machine.presence === "asleep";
+	const offlineHint = !online ? asleep ? "Machine asleep - requests will stay queued until it wakes" : "Machine offline - requests will stay queued until it reconnects" : void 0;
+	const completed = isCompleted(s);
+	const lifecycle = deriveLoopLifecycle(s);
+	const lifecycleText = lifecycleDisplay(detail);
+	const protocolSupport = daemonStopSupport(detail.machine.daemonProtocol);
+	const closedActive = isClosed(s) && !completed;
+	const onMachine = detail.machine.name ? `“${detail.machine.name}”` : "the bound machine";
+	const editRun = editDispatched && editRunId ? runs.find((r) => r.id === editRunId) : void 0;
+	const editSettled = !!editRun && !editRun.queued && !editRun.running;
+	const dismissEdit = () => {
+		setEditDispatched(false);
+		setEditRunId(null);
+	};
+	const editDir = loopDir(job.taskFile);
+	const copyEditPrompt = async () => {
+		try {
+			await navigator.clipboard.writeText(buildEditPrompt({
+				loopId: id,
+				loopName: s.name,
+				instruction: editInstruction
+			}));
+			setPromptCopied(true);
+			setTimeout(() => setPromptCopied(false), 4e3);
+		} catch {
+			setActionErr("Could not copy the prompt - try again or copy it manually.");
+		}
+	};
+	const CONFIRM = {
+		run: {
+			q: "Run one real cycle now?",
+			note: `Spawns the coding agent (${AGENT_LABEL[job.agent ?? "claude-code"] ?? job.agent ?? "Claude Code"}).`,
+			cta: "Run once",
+			danger: false
+		},
+		evolve: {
+			q: "Trigger an evolution pass now?",
+			note: "Re-authors the dashboard / tightens the gate from real run data.",
+			cta: "Evolve",
+			danger: false
+		},
+		pause: {
+			q: "Pause future runs? The current run will continue.",
+			cta: "Pause",
+			danger: false
+		},
+		stop: {
+			q: "Pause this loop, cancel queued work, and stop the current run if it is still running?",
+			cta: "Stop",
+			danger: true
+		},
+		delete: {
+			q: "Stop this loop and delete its Pievo history and synced artifacts? Local project files are not deleted.",
+			cta: "Delete",
+			danger: true
+		},
+		"force-delete": {
+			q: "Delete server data anyway",
+			note: "The machine is unreachable. Its local process may still be running. This removes Pievo authority and server data only.",
+			cta: "Delete server data anyway",
+			danger: true
+		}
+	};
+	const flashLine = flash && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "mb-2.5",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FlashLine, {
+			label: flash.label,
+			tone: flash.tone,
+			onUndo: flash.undo
+		})
+	});
+	const c = confirming && CONFIRM[confirming];
+	const confirmLocked = busy;
+	const pushSelectCls = "lp-select cursor-pointer rounded-control border border-wire bg-surface py-1.5 pl-2.5 text-meta text-primary outline-none transition-colors hover:border-display focus:border-display disabled:cursor-default disabled:opacity-40";
+	const menuItem = "flex w-full cursor-pointer select-none items-center px-3.5 py-2 text-body text-primary outline-none transition-colors data-[highlighted]:bg-raised data-[disabled]:cursor-default data-[disabled]:opacity-40";
+	const menuItemDanger = "flex w-full cursor-pointer select-none items-center px-3.5 py-2 text-body text-accent outline-none transition-colors data-[highlighted]:bg-accent-soft data-[disabled]:cursor-default data-[disabled]:opacity-40";
+	const actionBar = c ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfirmBar, {
+		prompt: c.q,
+		note: "note" in c ? c.note : void 0,
+		cta: c.cta,
+		danger: c.danger,
+		busy: confirmLocked,
+		onConfirm,
+		onCancel: () => setConfirming(null)
+	}, confirming) : lifecycle === "deleting" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-wrap items-center gap-3 rounded-md border border-wire bg-raised px-4 py-3",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-body font-medium text-display",
+				children: lifecycleText
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-meta text-secondary",
+				children: "Server deletion is waiting for execution authority to end."
+			}),
+			!online && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: btnDanger,
+				onClick: () => setConfirming("force-delete"),
+				disabled: busy,
+				children: "Delete server data anyway"
+			})
+		]
+	}) : editVia ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		onKeyDown: (e) => {
+			if (e.key === "Escape" && pending !== "edit") {
+				e.stopPropagation();
+				setEditVia(false);
+			}
+		},
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-body font-medium text-display",
+					children: "Edit with your coding agent"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "text-meta text-secondary",
+					children: [
+						"One agent pass on ",
+						onMachine,
+						" · spends credits"
+					]
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
+				ref: editBoxRef,
+				autoFocus: true,
+				value: editInstruction,
+				onChange: (e) => setEditInstruction(e.target.value),
+				onKeyDown: (e) => {
+					if ((e.metaKey || e.ctrlKey) && e.key === "Enter" && editInstruction.trim() && pending !== "edit") onRequestEdit();
+				},
+				rows: 3,
+				placeholder: "e.g. run at 9am on weekdays instead, and also check coffee stock",
+				className: "mt-3 w-full resize-y rounded-control border border-wire bg-raised p-3 font-mono text-label leading-relaxed text-primary outline-none transition-shadow placeholder:text-disabled focus:border-transparent focus:shadow-focus"
+			}),
+			!editInstruction.trim() && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-2 flex flex-wrap gap-1.5",
+				children: EDIT_SEEDS.map((sd) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => {
+						setEditInstruction(sd.seed);
+						editBoxRef.current?.focus();
+					},
+					className: "cursor-pointer rounded-full border border-wire bg-surface px-3 py-1 text-label font-medium text-secondary transition-colors hover:bg-raised hover:text-display",
+					children: sd.label
+				}, sd.label))
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-3.5 flex flex-wrap items-center gap-x-2.5 gap-y-2",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						className: btnCost,
+						disabled: pending === "edit" || !editInstruction.trim(),
+						title: offlineHint,
+						onClick: () => void onRequestEdit(),
+						children: pending === "edit" ? "Dispatching…" : "Dispatch to your coding agent"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: btn,
+						disabled: pending === "edit",
+						onClick: () => void copyEditPrompt(),
+						children: promptCopied ? "✓ Prompt copied" : "Copy prompt"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						className: btn,
+						disabled: pending === "edit",
+						onClick: () => setEditVia(false),
+						children: "Cancel"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "hidden text-caption text-disabled sm:inline",
+						children: "⌘↩ dispatch · esc cancel"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => {
+							setEditVia(false);
+							setEditing(true);
+						},
+						className: "ml-auto cursor-pointer border-none bg-transparent p-0 text-label text-secondary underline underline-offset-2 transition-colors hover:text-display",
+						children: "Manual settings →"
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-2 text-caption leading-snug text-disabled",
+				children: promptCopied ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "text-secondary",
+					children: [
+						"✓ Copied · run your coding agent",
+						" ",
+						editDir ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: ["in ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+							className: "break-all font-mono text-primary",
+							children: editDir
+						})] }) : "in the loop’s local directory on this machine",
+						" ",
+						"and paste the prompt to adjust the loop yourself."
+					]
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "Prefer to adjust it yourself? Copy prompt drops a ready-to-paste prompt for your own coding agent - no dispatch, no credits." })
+			})
+		]
+	}) : pushOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-wrap items-center gap-2.5",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-label font-medium text-secondary",
+				children: "Push"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
+				"aria-label": "Notify",
+				className: pushSelectCls,
+				value: job.notify,
+				disabled: busy,
+				onChange: (e) => void setPush({ notify: e.target.value }),
+				children: [
+					"auto",
+					"always",
+					"never"
+				].map((n) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+					value: n,
+					children: n
+				}, n))
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				className: "text-secondary",
+				children: "→"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+				"aria-label": "Push channel",
+				className: pushSelectCls,
+				value: job.channelId ?? "",
+				disabled: busy,
+				onChange: (e) => void setPush({ channelId: e.target.value }),
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+					value: "",
+					children: "none (dashboard only)"
+				}), channels.map((ch) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+					value: ch.id,
+					children: ch.name
+				}, ch.id))]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "ml-auto flex items-center gap-2.5",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					className: `text-[14px] leading-none text-success transition-opacity duration-200 ${pushSaved ? "opacity-100" : "opacity-0"}`,
+					children: "✓"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => setPushOpen(false),
+					className: btnQuiet,
+					children: "Done"
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex flex-wrap items-center gap-2",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				className: btnPrimary,
+				disabled: busy || completed,
+				onClick: onRun,
+				title: completed ? "Loop completed - only Edit is available until it is reopened" : s.running || s.queued ? "Queues or coalesces one exec follow-up" : offlineHint ?? (job.exec ? "Spends credits" : void 0),
+				"aria-label": job.exec ? "Run once - spends credits" : "Run once",
+				children: pending === "run" ? "Queuing…" : s.running || s.queued ? "Queue run" : "Run once"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				className: btn,
+				disabled: busy,
+				title: "Queues an edit; a queued edit is updated with the latest instruction",
+				onClick: () => setEditVia(true),
+				children: "Edit"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenuRoot, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuTrigger, {
+				className: `${btn} px-2.5`,
+				disabled: busy,
+				"aria-label": "More actions",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+					"aria-hidden": true,
+					width: "16",
+					height: "16",
+					viewBox: "0 0 16 16",
+					fill: "currentColor",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+							cx: "3",
+							cy: "8",
+							r: "1.4"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+							cx: "8",
+							cy: "8",
+							r: "1.4"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+							cx: "13",
+							cy: "8",
+							r: "1.4"
+						})
+					]
+				})
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuPositioner, {
+				side: "bottom",
+				align: "end",
+				sideOffset: 6,
+				className: "z-[950]",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(MenuPopup, {
+					className: "glass-strong min-w-[176px] origin-[var(--transform-origin)] rounded-control py-1.5 outline-none transition-[opacity,transform] duration-150 data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+							className: menuItem,
+							disabled: busy || completed,
+							onClick: () => setConfirming("evolve"),
+							title: completed ? "Completed loops only accept manual edits" : offlineHint ?? "Spends credits",
+							children: pending === "evolve" ? "Evolving…" : "Evolve now"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+							className: menuItem,
+							onClick: () => setPushOpen(true),
+							children: "Push…"
+						}),
+						completed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+							className: menuItem,
+							onClick: () => void patchJob({ data: {
+								id,
+								patch: { enabled: true }
+							} }).then(refreshAll),
+							children: "Reopen"
+						}) : lifecycle === "paused" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+							className: menuItem,
+							onClick: () => void doLifecycle("start"),
+							children: "Start"
+						}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+							className: menuItem,
+							onClick: () => setConfirming("pause"),
+							children: "Pause"
+						}),
+						!completed && lifecycle !== "stopping" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+							className: menuItemDanger,
+							disabled: !!s.running && !protocolSupport.supported,
+							title: s.running && !protocolSupport.supported ? "Daemon upgrade required to stop a running process. Run `npm install -g @kky42/pievo@latest`, then `pievo daemon restart`." : void 0,
+							onClick: () => setConfirming("stop"),
+							children: "Stop"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator, { className: "my-1.5 h-px bg-hairline" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItem, {
+							className: menuItemDanger,
+							disabled: !!s.running && !protocolSupport.supported,
+							title: s.running && !protocolSupport.supported ? DAEMON_UPGRADE_REQUIRED : void 0,
+							onClick: () => setConfirming("delete"),
+							children: "Delete"
+						})
+					]
+				})
+			}) })] })
+		]
+	}) });
+	const actionErrEl = actionErr && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, {
+		message: actionErr,
+		onDismiss: () => setActionErr(null),
+		className: "mb-2.5"
+	});
+	const crossTeam = detail.team && !detail.team.isActive ? detail.team : null;
+	const switchTeam = (teamId) => {
+		setActiveTeamCookie(teamId);
+		navigate({
+			to: "/t/$teamId",
+			params: { teamId }
+		});
+	};
+	const crossTeamEl = crossTeam && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "mb-2.5 flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-control border border-hairline bg-raised px-4 py-2.5",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "inline-flex items-center gap-2 text-meta font-medium text-secondary",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: "size-2 rounded-full bg-interactive"
+					}),
+					"Viewing a loop in ",
+					crossTeam.name
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-meta text-secondary",
+				children: "- not your active team."
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: () => switchTeam(crossTeam.id),
+				className: "ml-auto cursor-pointer text-meta font-medium text-interactive underline underline-offset-2 transition-colors hover:text-display",
+				children: "Switch to this team"
+			})
+		]
+	});
+	const offlineEl = !online && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "mb-2.5 flex flex-wrap items-center gap-x-3 gap-y-1.5 rounded-control border border-hairline bg-raised px-4 py-2.5",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "inline-flex items-center gap-2 text-meta font-medium text-secondary",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: `size-2 rounded-full ${asleep ? "bg-rubik-yellow" : "bg-disabled"}`
+					}),
+					"Machine ",
+					detail.machine.name ? `“${detail.machine.name}” ` : "",
+					asleep ? "seems to be asleep or offline" : "offline"
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "text-meta text-secondary",
+				children: [asleep ? "- queued work starts automatically when it reconnects." : "- manual run, evolve, and edit requests remain safely queued.", detail.machine.lastSeen ? ` Last seen ${rel(detail.machine.lastSeen)}.` : ""]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: () => setMachinesOpen(true),
+				className: "ml-auto cursor-pointer text-meta font-medium text-interactive underline underline-offset-2 transition-colors hover:text-display",
+				children: "Reconnect"
+			})
+		]
+	});
+	if (editing) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Shell, {
+		back: backLink,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditHead, {
+			name: s.name,
+			onBack: () => setEditing(false)
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "mt-5 rounded-card border border-hairline bg-surface px-6 pb-6 pt-2 shadow-card",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopForm, {
+				ref: formRef,
+				initial: job,
+				channels
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-7 border-t border-hairline pt-4",
+				children: [actionErrEl, /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap gap-2.5",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						className: btnPrimary,
+						disabled: pending === "save",
+						onClick: onSave,
+						children: pending === "save" ? "Saving…" : "Save"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						className: btn,
+						disabled: pending === "save",
+						onClick: () => setEditing(false),
+						children: "Cancel"
+					})]
+				})]
+			})]
+		})]
+	});
+	const agentLabel = AGENT_LABEL[job.agent ?? "claude-code"] ?? job.agent ?? "Claude Code";
+	const metaDot = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: "text-wire",
+		children: "·"
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Shell, {
+		back: backLink,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
+				className: "rounded-card border border-hairline bg-surface px-6 pb-5 pt-[22px] shadow-card",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-4",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "min-w-0",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "flex flex-wrap items-center gap-3",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+										className: "text-[28px] font-semibold leading-tight tracking-[-0.015em] text-display",
+										children: s.name
+									}),
+									completed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+										tone: "success",
+										dot: "green",
+										children: "Completed"
+									}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+										tone: lifecycle === "stopping" ? "running" : void 0,
+										dot: lifecycle === "stopping" ? "pulse" : void 0,
+										children: lifecycleText
+									}),
+									s.queued && lifecycle === "active" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+										tone: "outline",
+										children: "Queued"
+									}) : null,
+									closedActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+										tone: "success",
+										title: s.goal ?? void 0,
+										children: "Goal"
+									}),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+										tone: "outline",
+										title: "Recorded coding agent",
+										children: agentLabel
+									}),
+									crossTeam && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+										tone: "outline",
+										title: "This loop belongs to another of your teams",
+										children: crossTeam.name
+									})
+								]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "mt-2.5 flex flex-wrap items-center gap-x-2.5 gap-y-1 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 delay` : cronText(job.cron)
+									}),
+									metaDot,
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: ["next ", fmt(s.nextRun)] }),
+									s.nextRun && s.enabled && !completed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+										className: "text-disabled",
+										children: [
+											"(",
+											until(s.nextRun),
+											")"
+										]
+									}),
+									metaDot,
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+										className: "inline-flex items-center gap-1.5",
+										title: online ? "Machine online" : asleep ? "Machine asleep" : "Machine offline",
+										children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `size-1.5 rounded-full ${online ? "bg-rubik-green" : asleep ? "bg-rubik-yellow" : "bg-disabled"}` }), detail.machine.name || "machine"]
+									}),
+									metaDot,
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+										title: "Breaking daemon/server lifecycle protocol",
+										children: protocolSupport.label
+									}),
+									metaDot,
+									/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+										className: "font-mono text-label text-disabled",
+										children: s.id
+									})
+								]
+							}),
+							closedActive && s.goal && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "mt-2 text-body leading-snug text-secondary",
+								children: ["Working toward: ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "text-primary",
+									children: s.goal
+								})]
+							}),
+							completed && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: "mt-2 text-body leading-snug text-success",
+								children: [
+									"Completed",
+									s.completedAt ? ` · ${fmt(s.completedAt)}` : "",
+									s.completionReason && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+										className: "text-secondary",
+										children: [" - ", s.completionReason]
+									})
+								]
+							})
+						]
+					})
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mt-5 border-t border-hairline pt-4",
+					children: [
+						crossTeamEl,
+						offlineEl,
+						actionErrEl,
+						flashLine,
+						actionBar
+					]
+				})]
+			}),
+			editDispatched && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+				className: "mt-6 rounded-card border border-hairline bg-surface px-6 py-5 shadow-card",
+				style: { animation: "fadeIn 0.2s ease-out" },
+				"aria-live": "polite",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap items-center gap-x-4 gap-y-2",
+					children: [!editRun || editRun.queued ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "inline-flex items-center gap-2.5 text-body text-secondary",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								"aria-hidden": true,
+								className: "size-1.5 shrink-0 rounded-full bg-disabled"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "font-medium text-primary",
+								children: "Edit queued"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+								"waiting for ",
+								onMachine,
+								" and higher-priority work…"
+							] })
+						]
+					}) : editRun.running ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "inline-flex min-w-0 items-center gap-2.5 text-body text-secondary",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							"aria-hidden": true,
+							className: "size-1.5 shrink-0 rounded-full",
+							style: runPulseStyle
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "shrink-0 font-medium text-primary",
+							children: "Applying your edit"
+						})]
+					}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "inline-flex min-w-0 items-center gap-2 text-body",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								"aria-hidden": true,
+								className: "size-2.5 shrink-0 rounded-[2px]",
+								style: { background: dotColor(editRun) }
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "font-medium",
+								style: { color: dotColor(editRun) },
+								children: editRun.canceled ? "Edit canceled" : editRun.outcome === "error" ? "Edit failed" : "Edit applied"
+							}),
+							editRun.error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: "truncate text-secondary",
+								children: ["· ", editRun.error]
+							})
+						]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "ml-auto flex items-center gap-3.5",
+						children: [editRun && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
+							to: "/loops/$loopId/runs/$runId",
+							params: {
+								loopId: id,
+								runId: editRun.id
+							},
+							className: "text-label font-medium text-interactive underline underline-offset-2 transition-colors hover:text-display",
+							children: "View run →"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: dismissEdit,
+							className: "inline-flex cursor-pointer items-center gap-1.5 border-none bg-transparent p-0 text-meta font-medium text-secondary transition-colors hover:text-display",
+							children: editSettled ? "Done" : "Hide"
+						})]
+					})]
+				}), editSettled && editRun.message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "mt-3.5",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pre, { children: editRun.message })
+				})]
+			}),
+			hasUi && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+				className: "mt-6 min-w-0 rounded-card border border-hairline bg-surface px-6 py-5 shadow-card",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: `mb-3.5 border-b border-hairline pb-1.5 text-label font-semibold text-secondary`,
+					children: "Dashboard"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "min-w-0 overflow-x-auto",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Suspense, {
+						fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, { className: "py-4" }),
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopView, {
+							html: job.ui,
+							runs,
+							loopId: id,
+							taskFile: job.taskFile
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-6 grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(300px,360px)]",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopFilesPanel, {
+					loopId: id,
+					taskFile: job.taskFile,
+					taskFileContent: detail.taskFileContent,
+					taskFileSyncedAt: detail.taskFileSyncedAt,
+					running
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunsSection, {
+					loopId: id,
+					summary: s,
+					runs,
+					older,
+					onMore: async () => {
+						const oldest = (older.length ? mergeRuns(s.runs ?? [], older) : s.runs ?? [])[0];
+						if (!oldest) return 0;
+						const more = await loadOlderRuns({ data: {
+							loopId: id,
+							beforeTs: oldest.ts,
+							limit: 16
+						} });
+						if (more.length) setOlder((prev) => mergeRuns(prev, more));
+						return more.length;
+					},
+					onPickRun: (run) => navigate({
+						to: "/loops/$loopId/runs/$runId",
+						params: {
+							loopId: id,
+							runId: run.id
+						}
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MachinesModal, {
+				open: machinesOpen,
+				onClose: () => setMachinesOpen(false)
+			})
+		]
+	});
+}
+/**
+* Manual-settings page heading. The field form is an in-page mode takeover (NOT
+* a modal), so this is a plain heading - NOT `ModalHead`, whose Base UI
+* `Dialog.Title`/`Dialog.Close` require a `Dialog.Root` ancestor and throw
+* ("Cannot destructure property 'store' of 'useDialogRootContext(...)'") when
+* rendered on a bare page.
+*/
+function EditHead({ name, onBack }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+			type: "button",
+			onClick: onBack,
+			className: btnQuiet,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				children: "←"
+			}), " Back to loop"]
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h1", {
+			className: "mt-2.5 text-[24px] font-semibold leading-tight tracking-[-0.015em] text-display",
+			children: ["Manual settings · ", name]
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "mt-1.5 max-w-[640px] text-meta leading-snug text-secondary",
+			children: "The raw fields, saved directly - no agent pass, no credits. For schedule or task changes in plain words, use Edit with your coding agent instead."
+		})
+	] });
+}
+/** The page shell — centered column, a back affordance, consistent padding. */
+function Shell({ back, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", {
+		className: "mx-auto max-w-[1360px] px-8 pb-24 pt-10",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "mb-5",
+			children: back
+		}), children]
+	});
+}
+/** The runs panel — the signature timeline strip (paged) over a scannable list
+*  of recent runs, each row linking to its own run-detail route. */
+function RunsSection({ loopId, summary, runs, older, onMore, onPickRun }) {
+	const stripRuns = (0, import_react.useMemo)(() => older.length ? mergeRuns(summary.runs ?? [], older) : summary.runs ?? [], [summary.runs, older]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "mb-2.5 flex items-end justify-between gap-3 border-b border-hairline pb-1.5",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", {
+				className: sectionHeadCls,
+				children: [
+					"Runs (",
+					summary.runCount,
+					")"
+				]
+			})
+		}), summary.runCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "rounded-card border border-hairline bg-surface px-5 py-10 text-center text-body text-disabled",
+			children: "Never run"
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "rounded-card border border-hairline bg-surface px-5 pb-4 pt-5 shadow-card",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Timeline, {
+				job: summary,
+				runs: stripRuns,
+				total: summary.runCount,
+				onLoadMore: onMore,
+				onPickRun
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+				className: "mt-5 max-h-[clamp(280px,46vh,520px)] divide-y divide-hairline overflow-y-auto border-t border-hairline",
+				children: runs.map((x) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+					to: "/loops/$loopId/runs/$runId",
+					params: {
+						loopId,
+						runId: x.id
+					},
+					className: "flex items-start gap-2.5 py-2.5 transition-colors hover:bg-raised",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "mt-1 inline-block size-2.5 shrink-0 rounded-[2px]",
+						style: { background: dotColor(x) },
+						title: dotLabel(x),
+						"aria-label": dotLabel(x)
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+							className: "flex items-baseline justify-between gap-2",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "font-mono text-label text-secondary",
+								children: tsShort(x.ts)
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "shrink-0 font-mono text-caption text-disabled",
+								children: dur(x.durationMs)
+							})]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "mt-0.5 block",
+							children: x.queued ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: "inline-flex items-center gap-2 text-meta text-secondary",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									"aria-hidden": true,
+									className: "size-1.5 rounded-full bg-disabled"
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Queued" })]
+							}) : x.running ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: "inline-flex items-center gap-2 text-meta text-secondary",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									"aria-hidden": true,
+									className: "size-1.5 rounded-full",
+									style: runPulseStyle
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Running" })]
+							}) : x.error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "line-clamp-2 text-meta text-secondary",
+								children: x.error
+							}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "line-clamp-2 text-meta text-primary",
+								children: x.message || dotLabel(x)
+							})
+						})]
+					})]
+				}) }, x.id))
+			})]
+		})]
+	});
+}
+/**
+* Loop detail PAGE — `/loops/$loopId`. The dedicated page that replaced the old
+* dashboard modal: a loop header + action toolbar, the unified Files panel (task
+* file alongside synced artifacts), and the runs timeline. The view owns its own
+* data + self-poll (ssr:false so the session cookie rides along with its fetches,
+* like the dashboard loader). Run rows link on to `/loops/$loopId/runs/$runId`.
+*
+* Auth-gated exactly like the dashboard (`/`): the loader checks getAuthState +
+* the session so a logged-out/expired DEEP LINK shows the sign-in CTA instead of
+* a raw `loop not found` error from the ownership-blocked data fetch.
+*/
+function LoopDetailPage() {
+	const { loopId } = Route.useParams();
+	const { auth } = Route.useLoaderData() ?? { auth: { enabled: false } };
+	const { data: session, isPending } = useSession();
+	if (auth?.enabled && !isPending && !session) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignIn, { callbackURL: `/loops/${loopId}` });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopDetailView, { id: loopId });
+}
+//#endregion
+export { LoopDetailPage as component };