@kky42/pievo-server 2.2.0 → 2.4.1

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

@@ -0,0 +1,1255 @@
+import { o as __toESM } from "../_runtime.mjs";
+import { s as CODING_AGENTS } from "./boot-BbWxaF-z.mjs";
+import { g as require_react, h as require_jsx_runtime } from "../_libs/@base-ui/react+[...].mjs";
+import { D as tsShort, E as selectCls, O as until, S as rel, T as sectionHeadCls, a as btn, b as labelCls, f as dotColor, g as fmt, h as dur, l as btnQuiet, n as Loading, o as btnDanger, p as dotLabel, r as Pill, s as btnPrimary, t as ErrorBanner, v as humanBytes, w as runPulseStyle, y as inputCls } from "./ui-DmFKW2H_.mjs";
+import { i as useFlash, n as FlashLine, r as LoadErrorCard, t as ConfirmBar } from "./actionUi-D15R8L7R.mjs";
+import { d as useNavigate, u as Link } from "../_libs/@tanstack/react-router+[...].mjs";
+import { D as useSession, S as runLoop, T as stopLoop, b as patchLoop, c as deleteLoop, l as getArtifact, m as getLoopDetail, u as getArtifacts, v as loadOlderRuns, w as startLoop, x as pauseLoop } from "./SocialLinks-BTjsnVOm.mjs";
+import { t as setActiveTeamCookie } from "./teamCookie-B7hLOIie.mjs";
+import { t as SignIn } from "./SignIn-DjSrg0nO.mjs";
+import { i as lifecycleDisplay, n as daemonStopSupport, r as deriveLoopLifecycle, t as DAEMON_UPGRADE_REQUIRED } from "./lifecycleUi-Dad3hvhm.mjs";
+import { a as Timeline, s as mergeRuns, t as MachinesModal } from "./MachinesModal-DZ_9ErAU.mjs";
+import { n as artifactKind, t as Route } from "./artifactKind-ByzVa7fg.mjs";
+import { t as purify } from "../_libs/dompurify.mjs";
+import { t as g } from "../_libs/marked.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/loops._loopId-CKsAnxMl.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+/** Download URL for one artifact - the path is segment-encoded so a nested path
+*  (`data/raw.json`) round-trips and can't be mistaken for extra route segments. */
+function downloadHref(loopId, path) {
+	const enc = path.split("/").map(encodeURIComponent).join("/");
+	return `/api/artifact/${encodeURIComponent(loopId)}/${enc}`;
+}
+/** Inline render URL for an image artifact - the same bytes as `downloadHref`
+*  but served with the real image content-type + `inline` disposition (see the
+*  route). Used as an <img> src; never for a document the browser navigates to. */
+function inlineHref(loopId, path) {
+	return `${downloadHref(loopId, path)}?view=inline`;
+}
+/**
+* Shared markdown → sanitized HTML pipeline: marked (GFM) → DOMPurify (an
+* allowlisted prose subset, NO script/handlers). ONE sanitizer config for every
+* artifact markdown surface so the allowlist cannot drift between viewers.
+* Render the output under
+* the `.artifact-markdown` styles.
+*/
+var MD_SANITIZE = {
+	ALLOWED_TAGS: [
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6",
+		"p",
+		"br",
+		"hr",
+		"strong",
+		"b",
+		"em",
+		"i",
+		"del",
+		"s",
+		"code",
+		"pre",
+		"blockquote",
+		"ul",
+		"ol",
+		"li",
+		"a",
+		"span",
+		"table",
+		"thead",
+		"tbody",
+		"tr",
+		"th",
+		"td",
+		"img"
+	],
+	ALLOWED_ATTR: [
+		"href",
+		"title",
+		"target",
+		"rel",
+		"src",
+		"alt"
+	]
+};
+/** Markdown string → sanitized HTML string (safe for dangerouslySetInnerHTML). */
+function renderMarkdown(content) {
+	return purify.sanitize(g.parse(content, {
+		async: false,
+		gfm: true
+	}), MD_SANITIZE);
+}
+/** Render a Markdown artifact through the shared sanitized GFM pipeline. */
+function MarkdownView({ content }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "artifact-markdown px-5 py-4",
+		dangerouslySetInnerHTML: { __html: (0, import_react.useMemo)(() => renderMarkdown(content), [content]) }
+	});
+}
+/** A small monospace caption strip above a file's content (path · meta [· action]). */
+function ViewerHead({ path, meta, action }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "sticky top-0 z-10 flex flex-wrap items-center gap-x-2 gap-y-1 border-b border-hairline bg-surface px-5 py-2.5",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "break-all font-mono text-label text-primary",
+				children: path
+			}),
+			meta && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "font-mono text-caption text-disabled",
+				children: ["· ", meta]
+			}),
+			action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "ml-auto shrink-0",
+				children: action
+			})
+		]
+	});
+}
+/** The binary / oversize body - download affordance or the metadata-only note. */
+function BinaryNotice({ loopId, path, oversize }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "px-5 py-8 text-body text-secondary",
+		children: oversize ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "text-disabled",
+			children: "Too large to preview - stored as metadata only (no synced bytes)."
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+			"Binary file - not previewable.",
+			" ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+				href: downloadHref(loopId, path),
+				download: true,
+				className: "text-interactive underline underline-offset-2 transition-colors hover:text-display",
+				children: "Download"
+			})
+		] })
+	});
+}
+/** The viewer's action strip: a Preview/Source toggle (renderable types only)
+*  plus an always-present Download. Sits just under the content head. */
+function ViewerActions({ loopId, path, mode, onMode, showToggle }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-2 border-b border-hairline bg-surface px-5 py-1.5",
+		children: [showToggle && mode && onMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "inline-flex overflow-hidden rounded-control border border-hairline",
+			children: ["preview", "source"].map((m) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: () => onMode(m),
+				className: `cursor-pointer border-none px-2.5 py-0.5 text-caption font-medium transition-colors ${mode === m ? "bg-raised text-display" : "bg-transparent text-secondary hover:text-display"}`,
+				children: m === "preview" ? "Preview" : "Source"
+			}, m))
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+			href: downloadHref(loopId, path),
+			download: true,
+			className: "ml-auto shrink-0 text-caption font-medium text-interactive underline underline-offset-2 transition-colors hover:text-display",
+			children: "Download ↓"
+		})]
+	});
+}
+/**
+* Rendered HTML in a STRICT sandbox. `sandbox="allow-scripts"` WITHOUT
+* `allow-same-origin` is the load-bearing isolation: the frame gets an opaque
+* origin, so document.cookie is empty, storage is inaccessible, and `parent`
+* access throws a cross-origin SecurityError - synced markup can render (styles
+* + its own scripts run) yet can't touch the app's session or DOM. `srcDoc`
+* keeps the bytes off any navigable app-origin URL. Bounded height with internal
+* scroll; a white backdrop matches what report HTML expects regardless of theme.
+*/
+function HtmlPreview({ html }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("iframe", {
+		title: "Rendered HTML artifact (sandboxed)",
+		srcDoc: html,
+		sandbox: "allow-scripts",
+		referrerPolicy: "no-referrer",
+		className: "h-[min(70vh,620px)] w-full border-0 bg-white"
+	});
+}
+/** An image artifact, rendered from the hardened inline route (never inlined
+*  into the app DOM). Falls back to a download prompt if the bytes won't load. */
+function ImageView({ loopId, file }) {
+	const [failed, setFailed] = (0, import_react.useState)(false);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewerActions, {
+			loopId,
+			path: file.path,
+			showToggle: false
+		}), failed ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "px-5 py-8 text-body text-secondary",
+			children: [
+				"Couldn't load this image.",
+				" ",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+					href: downloadHref(loopId, file.path),
+					download: true,
+					className: "text-interactive underline underline-offset-2 transition-colors hover:text-display",
+					children: "Download"
+				}),
+				" ",
+				"instead."
+			]
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "flex justify-center overflow-auto px-5 py-6",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+				src: inlineHref(loopId, file.path),
+				alt: file.path,
+				onError: () => setFailed(true),
+				className: "max-w-full rounded-control border border-hairline bg-white object-contain"
+			})
+		})]
+	});
+}
+/** A text-bearing artifact (html / markdown / plain text): fetch the bytes, then
+*  render per its kind with a Preview/Source toggle (html + markdown) + download. */
+function TextArtifactView({ loopId, file, kind }) {
+	const [loaded, setLoaded] = (0, import_react.useState)({ loading: true });
+	const [mode, setMode] = (0, import_react.useState)("preview");
+	(0, import_react.useEffect)(() => {
+		let alive = true;
+		setLoaded({ loading: true });
+		getArtifact({ data: {
+			loopId,
+			path: file.path
+		} }).then((c) => alive && setLoaded(c)).catch((e) => alive && setLoaded({ error: String(e) }));
+		return () => {
+			alive = false;
+		};
+	}, [
+		loopId,
+		file.path,
+		file.updatedAt
+	]);
+	if ("loading" in loaded) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "px-5 py-6 text-body text-disabled",
+		children: "Loading…"
+	});
+	if ("binary" in loaded) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BinaryNotice, {
+		loopId,
+		path: file.path,
+		oversize: loaded.oversize
+	});
+	if ("error" in loaded) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "px-5 py-6 text-body text-accent",
+		children: ["Couldn't load this file - ", loaded.error]
+	});
+	const text = loaded.text || "(empty file)";
+	const renderable = kind === "html" || kind === "markdown";
+	const showSource = !renderable || mode === "source";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewerActions, {
+			loopId,
+			path: file.path,
+			mode,
+			onMode: setMode,
+			showToggle: renderable
+		}), kind === "html" && !showSource ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HtmlPreview, { html: loaded.text || "" }) : kind === "markdown" && !showSource ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarkdownView, { content: text }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
+			className: "m-0 overflow-x-auto whitespace-pre-wrap px-5 py-4 font-mono text-label leading-relaxed text-secondary",
+			children: text
+		})]
+	});
+}
+/**
+* One artifact's content body, dispatched by display kind (see `artifactKind`).
+* Oversize → metadata-only note (no bytes); image → hardened <img>; other binary
+* → download; text-bearing → the fetch-and-render viewer.
+*/
+function ArtifactBody({ loopId, file }) {
+	const kind = artifactKind(file.path);
+	if (file.oversize) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BinaryNotice, {
+		loopId,
+		path: file.path,
+		oversize: true
+	});
+	if (kind === "image") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ImageView, {
+		loopId,
+		file
+	}, `${file.path}:${file.updatedAt ?? ""}`);
+	if (file.binary) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BinaryNotice, {
+		loopId,
+		path: file.path,
+		oversize: false
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextArtifactView, {
+		loopId,
+		file,
+		kind
+	}, file.path);
+}
+var basename = (path) => path.split("/").pop() || path;
+function LoopFilesPanel({ loopId, configuredPaths, 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((current) => current ?? []);
+		}
+	}, [loopId]);
+	(0, import_react.useEffect)(() => {
+		setArtifacts(null);
+		setSelected(null);
+		refresh();
+	}, [loopId, refresh]);
+	(0, import_react.useEffect)(() => {
+		const timer = setInterval(() => void refresh(), running ? 4e3 : 12e3);
+		return () => clearInterval(timer);
+	}, [running, refresh]);
+	const files = artifacts ?? [];
+	const activePath = selected && files.some((file) => file.path === selected) ? selected : files[0]?.path ?? null;
+	const active = files.find((file) => file.path === activePath) ?? null;
+	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: ["Artifacts", artifacts ? ` (${files.length})` : ""]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "text-caption font-medium text-disabled",
+				children: ["Configured exact paths: ", configuredPaths.length]
+			})]
+		}), files.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…" : configuredPaths.length ? "No configured artifact has been collected yet." : "No artifact paths configured."
+		}) : /* @__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: files.map((file) => {
+						const activeRow = file.path === activePath;
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => setSelected(file.path),
+							className: `flex w-full items-center border-l-2 px-3 py-2 text-left transition-colors ${activeRow ? "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 ${activeRow ? "text-display" : "text-primary"}`,
+									title: file.path,
+									children: basename(file.path)
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "block truncate font-mono text-micro text-disabled",
+									title: file.path,
+									children: file.path
+								})]
+							})
+						}) }, file.path);
+					})
+				})
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "min-w-0 overflow-y-auto",
+				children: active && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewerHead, {
+					path: active.path,
+					meta: [active.size != null ? humanBytes(active.size) : "", `collected ${fmt(active.updatedAt)}`].filter(Boolean).join(" · ")
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArtifactBody, {
+					loopId,
+					file: active
+				})] })
+			})]
+		})]
+	});
+}
+var AGENT_LABEL$1 = {
+	"claude-code": "Claude Code",
+	codex: "Codex"
+};
+var hintCls = "mt-1 text-caption leading-snug text-disabled";
+function initState(initial) {
+	const schedule = initial?.schedule;
+	return {
+		name: initial?.name ?? "",
+		mode: schedule?.mode ?? "cron",
+		cron: schedule?.mode === "cron" ? schedule.cron : "0 */3 * * *",
+		timezone: schedule?.mode === "cron" ? schedule.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC",
+		overlap: schedule?.mode === "cron" ? schedule.overlap : "queue-one",
+		delayMinutes: String(schedule?.mode === "continuous" ? schedule.delayMinutes : 1),
+		workdir: initial?.workdir ?? "",
+		agent: initial?.agent ?? "claude-code",
+		model: initial?.model ?? "",
+		reasoningEffort: initial?.reasoningEffort ?? "",
+		prompt: initial?.prompt ?? "",
+		keep: initial?.statusDefinitions?.keep ?? "",
+		noChange: initial?.statusDefinitions?.noChange ?? "",
+		block: initial?.statusDefinitions?.block ?? "",
+		artifacts: (initial?.artifacts ?? []).join("\n")
+	};
+}
+function Section({ title, hint }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "mb-3 mt-7 border-b border-hairline pb-1.5 first:mt-2",
+		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
+		})]
+	});
+}
+function TextField({ label, value, onChange, mono, hint, placeholder }) {
+	const id = (0, import_react.useId)();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+				htmlFor: id,
+				className: labelCls,
+				children: label
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+				id,
+				className: `${inputCls} ${mono ? "font-mono" : ""}`,
+				value,
+				placeholder,
+				onChange: (event) => onChange(event.target.value)
+			}),
+			hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: hintCls,
+				children: hint
+			})
+		]
+	});
+}
+function TextArea({ label, value, onChange, rows = 4, mono, hint }) {
+	const id = (0, import_react.useId)();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+				htmlFor: id,
+				className: labelCls,
+				children: label
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
+				id,
+				rows,
+				className: `${inputCls} h-auto resize-y ${mono ? "font-mono" : ""}`,
+				value,
+				onChange: (event) => onChange(event.target.value)
+			}),
+			hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: hintCls,
+				children: hint
+			})
+		]
+	});
+}
+var LoopForm = (0, import_react.forwardRef)(function LoopForm({ initial }, ref) {
+	const [form, setForm] = (0, import_react.useState)(() => initState(initial));
+	const [error, setError] = (0, import_react.useState)(null);
+	const set = (key, value) => setForm((current) => ({
+		...current,
+		[key]: value
+	}));
+	(0, import_react.useImperativeHandle)(ref, () => ({ read() {
+		const missing = [
+			["Name", form.name],
+			["Working directory", form.workdir],
+			["Prompt", form.prompt],
+			["Keep definition", form.keep],
+			["No-change definition", form.noChange],
+			["Block definition", form.block]
+		].find(([, value]) => !value.trim());
+		if (missing) {
+			setError(`${missing[0]} is required.`);
+			return null;
+		}
+		const delayMinutes = Number(form.delayMinutes);
+		if (form.mode === "continuous" && (!Number.isInteger(delayMinutes) || delayMinutes < 1)) {
+			setError("Continuous delay must be an integer of at least 1 minute.");
+			return null;
+		}
+		const schedule = form.mode === "cron" ? {
+			mode: "cron",
+			cron: form.cron.trim(),
+			timezone: form.timezone.trim(),
+			overlap: form.overlap
+		} : {
+			mode: "continuous",
+			delayMinutes
+		};
+		setError(null);
+		return {
+			name: form.name.trim(),
+			schedule,
+			workdir: form.workdir.trim(),
+			agent: form.agent,
+			model: form.model.trim() || null,
+			reasoningEffort: form.reasoningEffort.trim() || null,
+			prompt: form.prompt,
+			statusDefinitions: {
+				keep: form.keep,
+				noChange: form.noChange,
+				block: form.block
+			},
+			artifacts: form.artifacts.split(/\r?\n/).filter((path) => path.length > 0)
+		};
+	} }));
+	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: form.name,
+					onChange: (value) => set("name", value)
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+						className: labelCls,
+						children: "Schedule"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+						"aria-label": "Schedule",
+						className: selectCls,
+						value: form.mode,
+						onChange: (event) => set("mode", event.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"
+						})]
+					})]
+				}),
+				form.mode === "cron" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+						label: "Cron expression",
+						value: form.cron,
+						onChange: (value) => set("cron", value),
+						mono: true
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+						label: "Timezone",
+						value: form.timezone,
+						onChange: (value) => set("timezone", value),
+						mono: true,
+						hint: "IANA timezone, for example America/Los_Angeles."
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "min-w-0",
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+								className: labelCls,
+								children: "Cron overlap"
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+								"aria-label": "Cron overlap",
+								className: selectCls,
+								value: form.overlap,
+								onChange: (event) => set("overlap", event.target.value),
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+									value: "skip",
+									children: "Skip occurrence"
+								}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+									value: "queue-one",
+									children: "Queue one follow-up"
+								})]
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: hintCls,
+								children: "Applies only when a cron occurrence is due while a run is still open."
+							})
+						]
+					})
+				] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+					label: "Delay after terminal run (minutes)",
+					value: form.delayMinutes,
+					onChange: (value) => set("delayMinutes", value),
+					mono: true
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, { title: "Execution" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+					label: "Working directory",
+					value: form.workdir,
+					onChange: (value) => set("workdir", value),
+					mono: true,
+					placeholder: "/Users/you/project"
+				}),
+				/* @__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: form.agent,
+						onChange: (event) => set("agent", event.target.value),
+						children: CODING_AGENTS.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+							value: agent,
+							children: AGENT_LABEL$1[agent] ?? agent
+						}, agent))
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+					label: "Model",
+					value: form.model,
+					onChange: (value) => set("model", value),
+					placeholder: "default",
+					hint: "Optional. Empty uses the agent default."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
+					label: "Reasoning effort",
+					value: form.reasoningEffort,
+					onChange: (value) => set("reasoningEffort", value),
+					placeholder: "default",
+					hint: "Optional. Empty uses the agent default."
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "min-w-0",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
+					title: "Prompt",
+					hint: "Sent unchanged before Pievo appends the report contract."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextArea, {
+					label: "User prompt",
+					value: form.prompt,
+					onChange: (value) => set("prompt", value),
+					rows: 10
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
+					title: "Status definitions",
+					hint: "All three definitions are required and are appended to every run."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextArea, {
+					label: "keep",
+					value: form.keep,
+					onChange: (value) => set("keep", value),
+					rows: 2
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextArea, {
+					label: "no-change",
+					value: form.noChange,
+					onChange: (value) => set("noChange", value),
+					rows: 2
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextArea, {
+					label: "block",
+					value: form.block,
+					onChange: (value) => set("block", value),
+					rows: 2
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Section, {
+					title: "Artifacts",
+					hint: "Optional exact paths relative to the working directory. One path per line; globs are not supported."
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextArea, {
+					label: "Artifact paths",
+					value: form.artifacts,
+					onChange: (value) => set("artifacts", value),
+					rows: 6,
+					mono: true
+				}),
+				error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "mt-4 text-body text-accent",
+					children: error
+				})
+			]
+		})]
+	});
+});
+var AGENT_LABEL = {
+	"claude-code": "Claude Code",
+	codex: "Codex"
+};
+function LoopDetailView({ id }) {
+	const navigate = useNavigate();
+	const [detail, setDetail] = (0, import_react.useState)(null);
+	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 [machinesOpen, setMachinesOpen] = (0, import_react.useState)(false);
+	const [pending, setPending] = (0, import_react.useState)(null);
+	const [confirmingDelete, setConfirmingDelete] = (0, import_react.useState)(false);
+	const [flash, setFlash] = useFlash();
+	const [older, setOlder] = (0, import_react.useState)([]);
+	const formRef = (0, import_react.useRef)(null);
+	const deletingRef = (0, import_react.useRef)(false);
+	const load = (0, import_react.useCallback)(async (silent = false) => {
+		try {
+			const next = await getLoopDetail({ data: id });
+			setDetail(next);
+			deletingRef.current = next.summary.deleteRequestedAt != null;
+			setErr(null);
+		} catch (error) {
+			if (deletingRef.current) navigate({ to: "/" });
+			else if (!silent) setErr(String(error));
+		}
+	}, [id]);
+	(0, import_react.useEffect)(() => {
+		setDetail(null);
+		setEditing(false);
+		setConfirmingDelete(false);
+		setOlder([]);
+		load();
+	}, [id, load]);
+	const running = !!detail?.summary.running;
+	(0, import_react.useEffect)(() => {
+		if (editing) return;
+		const timer = setInterval(() => void load(true), running || deletingRef.current ? 3e3 : 8e3);
+		return () => clearInterval(timer);
+	}, [
+		editing,
+		running,
+		load
+	]);
+	async function doRun() {
+		setActionErr(null);
+		setPending("run");
+		try {
+			const result = await runLoop({ data: id });
+			if (result.error) return setActionErr(`Run failed: ${result.error}`);
+			setFlash({
+				label: result.coalesced ? "Already queued" : "Queued",
+				hold: 4e3
+			});
+			await load();
+		} finally {
+			setPending(null);
+		}
+	}
+	async function doLifecycle(action) {
+		setActionErr(null);
+		setPending("lifecycle");
+		try {
+			const result = action === "pause" ? await pauseLoop({ data: id }) : action === "start" ? await startLoop({ data: id }) : action === "stop" ? await stopLoop({ data: id }) : await deleteLoop({ data: id });
+			if (result.error) return setActionErr(`${action[0].toUpperCase() + action.slice(1)} failed: ${result.error}`);
+			setConfirmingDelete(false);
+			if (result.deleted) return navigate({ to: "/" });
+			if (action === "delete") deletingRef.current = true;
+			await load();
+			setFlash({ label: action === "start" ? "Started" : action === "pause" ? "Paused" : action === "stop" ? "Stop requested" : "Deleting" });
+		} finally {
+			setPending(null);
+		}
+	}
+	async function onSave() {
+		const patch = formRef.current?.read();
+		if (!patch) return;
+		setActionErr(null);
+		setPending("save");
+		try {
+			const result = await patchLoop({ data: {
+				id,
+				patch
+			} });
+			if (result.error) return setActionErr(`Save failed: ${result.error}`);
+			setEditing(false);
+			await load();
+			setFlash({ label: "Saved" });
+		} finally {
+			setPending(null);
+		}
+	}
+	const back = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+		to: "/",
+		className: "inline-flex items-center gap-1.5 text-meta font-medium text-secondary 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,
+		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,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {})
+	});
+	const { loop, summary, runs } = detail;
+	const lifecycle = deriveLoopLifecycle(summary);
+	const deleting = lifecycle === "deleting";
+	const active = summary.enabled && !deleting;
+	const paused = !summary.enabled && !deleting;
+	const busy = pending != null;
+	const stopSupport = daemonStopSupport(detail.machine.daemonProtocol);
+	const canStop = !deleting && !!summary.running && stopSupport.supported;
+	const online = detail.machine.online;
+	const asleep = detail.machine.presence === "asleep";
+	const crossTeam = detail.team && !detail.team.isActive ? detail.team : null;
+	if (editing) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Shell, {
+		back,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditHead, {
+			name: summary.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: loop
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-7 border-t border-hairline pt-4",
+				children: [actionErr && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, {
+					message: actionErr,
+					onDismiss: () => setActionErr(null),
+					className: "mb-3"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex gap-2.5",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						className: btnPrimary,
+						disabled: pending === "save",
+						onClick: () => void onSave(),
+						children: pending === "save" ? "Saving…" : "Save"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						className: btn,
+						disabled: pending === "save",
+						onClick: () => setEditing(false),
+						children: "Cancel"
+					})]
+				})]
+			})]
+		})]
+	});
+	const scheduleText = loop.schedule.mode === "cron" ? `${loop.schedule.cron} · ${loop.schedule.timezone} · overlap ${loop.schedule.overlap}` : `continuous · ${loop.schedule.delayMinutes}m after terminal`;
+	const model = loop.model || "default";
+	const effort = loop.reasoningEffort || "default";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Shell, {
+		back,
+		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: summary.name
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+									tone: lifecycle === "stopping" ? "running" : void 0,
+									dot: lifecycle === "stopping" ? "pulse" : void 0,
+									children: lifecycleDisplay(detail)
+								}),
+								summary.queued && lifecycle === "active" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+									tone: "outline",
+									children: "Queued"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+									tone: "outline",
+									children: AGENT_LABEL[loop.agent]
+								}),
+								crossTeam && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+									tone: "outline",
+									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: "font-mono text-primary",
+									children: scheduleText
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "text-wire",
+									children: "·"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: ["next ", fmt(summary.nextRun)] }),
+								summary.nextRun && summary.enabled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+									className: "text-disabled",
+									children: [
+										"(",
+										until(summary.nextRun),
+										")"
+									]
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "text-wire",
+									children: "·"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+									className: "inline-flex items-center gap-1.5",
+									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"]
+								})
+							]
+						})]
+					})
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mt-5 border-t border-hairline pt-4",
+					children: [
+						crossTeam && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TeamBanner, {
+							team: crossTeam,
+							onSwitch: () => {
+								setActiveTeamCookie(crossTeam.id);
+								navigate({
+									to: "/t/$teamId",
+									params: { teamId: crossTeam.id }
+								});
+							}
+						}),
+						detail.machine.needsUpdate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MachineBanner, {
+							tone: "warn",
+							text: `Daemon update required · server requires v${detail.machine.requiredDaemonVersion}; machine reports ${detail.machine.daemonVersion ? `v${detail.machine.daemonVersion}` : "an unknown version"}.`,
+							action: "Update daemon",
+							onAction: () => setMachinesOpen(true)
+						}),
+						!online && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MachineBanner, {
+							text: `Machine ${asleep ? "seems asleep or offline" : "is offline"}; queued work starts when it reconnects.${detail.machine.lastSeen ? ` Last seen ${rel(detail.machine.lastSeen)}.` : ""}`,
+							action: "Reconnect",
+							onAction: () => setMachinesOpen(true)
+						}),
+						actionErr && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ErrorBanner, {
+							message: actionErr,
+							onDismiss: () => setActionErr(null),
+							className: "mb-2.5"
+						}),
+						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
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "flex min-w-0 flex-wrap items-center gap-2",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+									className: btnPrimary,
+									disabled: busy || deleting,
+									onClick: () => void doRun(),
+									children: pending === "run" ? "Queuing…" : "Run once"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+									className: btn,
+									disabled: busy || deleting,
+									onClick: () => setEditing(true),
+									children: "Settings"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+									className: btn,
+									disabled: busy || !paused,
+									onClick: () => void doLifecycle("start"),
+									children: "Start"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+									className: btn,
+									disabled: busy || !active,
+									onClick: () => void doLifecycle("pause"),
+									children: "Pause"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+									className: btnDanger,
+									disabled: busy || !canStop,
+									title: summary.running && !stopSupport.supported ? DAEMON_UPGRADE_REQUIRED : !summary.running ? "No run is currently running" : void 0,
+									onClick: () => void doLifecycle("stop"),
+									children: "Stop"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+									className: btnDanger,
+									disabled: busy || deleting,
+									onClick: () => setConfirmingDelete(true),
+									children: deleting ? "Deleting…" : "Delete"
+								})
+							]
+						}),
+						confirmingDelete && !deleting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: "mt-3",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfirmBar, {
+								prompt: "Stop this loop and delete its server data?",
+								note: "This stops the loop and deletes server history and collected artifacts. Files in the working directory are not deleted. If the machine is unreachable, its local process may continue running.",
+								cta: "Delete",
+								danger: true,
+								busy,
+								onConfirm: () => void doLifecycle("delete"),
+								onCancel: () => setConfirmingDelete(false)
+							})
+						})
+					]
+				})]
+			}),
+			/* @__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)("h2", {
+					className: `mb-4 border-b border-hairline pb-1.5 ${sectionHeadCls}`,
+					children: "Configuration"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("dl", {
+					className: "grid min-w-0 gap-x-6 gap-y-4 md:grid-cols-[180px_minmax(0,1fr)]",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Config, {
+							label: "Schedule",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+								className: "break-all font-mono",
+								children: scheduleText
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Config, {
+							label: "Working directory",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+								className: "break-all font-mono",
+								children: loop.workdir
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Config, {
+							label: "Agent",
+							children: AGENT_LABEL[loop.agent]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Config, {
+							label: "Model / effort",
+							children: [
+								model,
+								" / ",
+								effort
+							]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Config, {
+							label: "Prompt",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", {
+								className: "whitespace-pre-wrap break-words font-sans",
+								children: loop.prompt
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Config, {
+							label: "Status definitions",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", {
+								className: "space-y-1",
+								children: [
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: "keep:" }),
+										" ",
+										loop.statusDefinitions.keep
+									] }),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: "no-change:" }),
+										" ",
+										loop.statusDefinitions.noChange
+									] }),
+									/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: "block:" }),
+										" ",
+										loop.statusDefinitions.block
+									] })
+								]
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Config, {
+							label: "Artifact paths",
+							children: loop.artifacts.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+								className: "space-y-1",
+								children: loop.artifacts.map((path) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+									className: "break-all font-mono",
+									children: path
+								}) }, path))
+							}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-disabled",
+								children: "None"
+							})
+						})
+					]
+				})]
+			}),
+			/* @__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,
+					configuredPaths: loop.artifacts,
+					running
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunsSection, {
+					loopId: id,
+					summary,
+					runs,
+					older,
+					onPickRun: (run) => navigate({
+						to: "/loops/$loopId/runs/$runId",
+						params: {
+							loopId: id,
+							runId: run.id
+						}
+					}),
+					onMore: async () => {
+						const oldest = (older.length ? mergeRuns(summary.runs, older) : summary.runs)[0];
+						if (!oldest) return 0;
+						const more = await loadOlderRuns({ data: {
+							loopId: id,
+							beforeTs: oldest.ts,
+							limit: 16
+						} });
+						if (more.length) setOlder((current) => mergeRuns(current, more));
+						return more.length;
+					}
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MachinesModal, {
+				open: machinesOpen,
+				onClose: () => setMachinesOpen(false)
+			})
+		]
+	});
+}
+function Config({ label, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", {
+		className: "text-label font-medium text-secondary",
+		children: label
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", {
+		className: "min-w-0 text-body text-primary",
+		children
+	})] });
+}
+function TeamBanner({ team, onSwitch }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "mb-2.5 flex flex-wrap items-center gap-3 rounded-control border border-hairline bg-raised px-4 py-2.5 text-meta text-secondary",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+			"Viewing a loop in ",
+			team.name,
+			" - not your active team."
+		] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			onClick: onSwitch,
+			className: "ml-auto font-medium text-interactive underline",
+			children: "Switch to this team"
+		})]
+	});
+}
+function MachineBanner({ text, action, onAction, tone }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: `mb-2.5 flex flex-wrap items-center gap-3 rounded-control border px-4 py-2.5 text-meta ${tone === "warn" ? "border-warn/40 bg-warn/10" : "border-hairline bg-raised"}`,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "text-secondary",
+			children: text
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			onClick: onAction,
+			className: "ml-auto font-medium text-interactive underline",
+			children: action
+		})]
+	});
+}
+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 text-display",
+			children: ["Settings · ", name]
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "mt-1.5 text-meta text-secondary",
+			children: "Edit the stored schedule, execution settings, prompt, status definitions, and exact artifact paths."
+		})
+	] });
+}
+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]
+	});
+}
+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 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, {
+				loop: 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((run) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+					to: "/loops/$loopId/runs/$runId",
+					params: {
+						loopId,
+						runId: run.id
+					},
+					className: "flex items-start gap-2.5 py-2.5 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(run) },
+						title: dotLabel(run)
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+							className: "flex justify-between gap-2",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "font-mono text-label text-secondary",
+								children: tsShort(run.ts)
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "font-mono text-caption text-disabled",
+								children: dur(run.durationMs)
+							})]
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "mt-0.5 block line-clamp-2 text-meta text-primary",
+							children: run.phase === "pending" ? "Queued" : run.phase === "running" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: "inline-flex items-center gap-2",
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "size-1.5 rounded-full",
+									style: runPulseStyle
+								}), "Running"]
+							}) : run.error || run.message || dotLabel(run)
+						})]
+					})]
+				}) }, run.id))
+			})]
+		})]
+	});
+}
+/**
+* Loop detail page — `/loops/$loopId`: a loop header and action toolbar, the
+* exact artifact Files panel, 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 };