@kky42/pievo-server 1.0.0

package/.output/server/_ssr/loops._loopId_.runs._runId-Dip5Xk-q.mjs

@@ -0,0 +1,674 @@
+import { o as __toESM } from "../_runtime.mjs";
+import { C as require_jsx_runtime, S as require_react } from "../_libs/@base-ui/react+[...].mjs";
+import { O as runPulseStyle, _ as fmt, a as StatusPill, c as btnDanger, g as dur, k as sectionHeadCls, n as Loading, o as btn, r as Pill, v as fnum, y as humanBytes } from "./ui-Dej2qjuS.mjs";
+import { u as Link } from "../_libs/@tanstack/react-router+[...].mjs";
+import { T as stopRun, _ as loadOlderRuns, f as getJobDetail, p as getRunDiff } from "./loopApi-Cxe8WyOB.mjs";
+import { r as LoadErrorCard } from "./actionUi-CZbEixbf.mjs";
+import { s as useSession } from "./LoopPlaybook-BXH8mhiX.mjs";
+import { t as SignIn } from "./SignIn-dTndU6Hw.mjs";
+import { t as Route } from "./loops._loopId_.runs._runId-Bvuo2nki.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/loops._loopId_.runs._runId-Dip5Xk-q.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* Classify one physical diff line, given whether we are already inside a hunk.
+* Classification is STATEFUL over hunk position: only the preamble (before the
+* first `@@`) may hold `---`/`+++`/`diff `/`index `/`Index:`/`===` headers, so
+* once inside a hunk a content line whose text merely begins with `--`/`++`
+* (a markdown `---` HR/frontmatter, a `-- comment`, a `++x`) is read by its
+* single leading marker char and keeps its del/add tint + stat.
+*/
+function classify(line, inHunk) {
+	if (line.startsWith("@@")) return {
+		kind: "hunk",
+		text: line,
+		gutter: ""
+	};
+	if (!inHunk) {
+		if (line.startsWith("---") || line.startsWith("+++") || line.startsWith("diff ") || line.startsWith("index ") || line.startsWith("Index:") || line.startsWith("===")) return {
+			kind: "meta",
+			text: line,
+			gutter: ""
+		};
+		return {
+			kind: "context",
+			text: line,
+			gutter: ""
+		};
+	}
+	if (line.startsWith("+")) return {
+		kind: "add",
+		text: line.slice(1),
+		gutter: "+"
+	};
+	if (line.startsWith("-")) return {
+		kind: "del",
+		text: line.slice(1),
+		gutter: "-"
+	};
+	if (line.startsWith(" ")) return {
+		kind: "context",
+		text: line.slice(1),
+		gutter: ""
+	};
+	return {
+		kind: "context",
+		text: line,
+		gutter: ""
+	};
+}
+/**
+* Split a unified-diff string into classified lines. A trailing newline does not
+* emit a spurious empty final line (common in generated diffs).
+*/
+function parseUnifiedDiff(diff) {
+	if (!diff) return [];
+	const body = diff.endsWith("\n") ? diff.slice(0, -1) : diff;
+	let inHunk = false;
+	return body.split("\n").map((line) => {
+		const classified = classify(line, inHunk);
+		if (classified.kind === "hunk") inHunk = true;
+		return classified;
+	});
+}
+/** Counts of added/removed content lines — for a compact per-file "+N −M" tally. */
+function diffStat(lines) {
+	let added = 0;
+	let removed = 0;
+	for (const l of lines) if (l.kind === "add") added++;
+	else if (l.kind === "del") removed++;
+	return {
+		added,
+		removed
+	};
+}
+/** Per-file status word + its ink (reused from the old Changes list). */
+var STATUS_LABEL = {
+	added: "Added",
+	modified: "Changed",
+	removed: "Removed"
+};
+var STATUS_CLS = {
+	added: "text-success",
+	modified: "text-secondary",
+	removed: "text-accent"
+};
+/** Signed byte delta — "+1.8 KB", "−240 B", "" when unknown/zero. */
+function fmtDelta(n) {
+	if (n == null || n === 0) return "";
+	return `${n > 0 ? "+" : "−"}${humanBytes(n)}`;
+}
+/** A diff line's row classes — line-level tint + gutter ink per kind. */
+var LINE_CLS = {
+	add: "bg-[color:var(--color-diff-add-bg)] text-primary",
+	del: "bg-[color:var(--color-diff-del-bg)] text-primary",
+	hunk: "bg-[color:var(--color-diff-hunk-bg)] text-disabled",
+	meta: "text-disabled",
+	context: "text-secondary"
+};
+var GUTTER_CLS = {
+	add: "text-success",
+	del: "text-accent",
+	hunk: "text-disabled",
+	meta: "text-disabled",
+	context: "text-disabled"
+};
+/**
+* The colored diff body for one file. Each physical line becomes a row with a
+* `+`/`-`/` ` gutter and a line-level background tint (add=green, del=red, hunk
+* de-emphasized). Long lines DON'T wrap — the pane scrolls them horizontally
+* (`overflow-x-auto min-w-0`) so a wide line never widens the page. Height is
+* capped so a long diff scrolls inside its own box.
+*/
+function DiffBody({ lines }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "min-w-0 max-h-[420px] overflow-auto border-t border-hairline bg-raised font-mono text-label leading-[1.55]",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "min-w-max",
+			children: lines.map((l, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: `flex ${LINE_CLS[l.kind]}`,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					className: `w-6 shrink-0 select-none pl-2.5 text-center ${GUTTER_CLS[l.kind]}`,
+					children: l.gutter
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "whitespace-pre pr-4",
+					children: l.text || "\xA0"
+				})]
+			}, i))
+		})
+	});
+}
+/** One file row header — status word, path, size delta, and binary/too-large markers. */
+function FileHead({ f, lines }) {
+	const delta = fmtDelta(f.sizeDelta);
+	const stat = lines ? diffStat(lines) : null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+		className: "flex min-w-0 flex-wrap items-baseline gap-x-2.5 gap-y-1 text-meta",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: `shrink-0 text-caption font-medium ${STATUS_CLS[f.status]}`,
+				children: STATUS_LABEL[f.status]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "min-w-0 break-all font-mono text-primary",
+				children: f.path
+			}),
+			stat && (stat.added > 0 || stat.removed > 0) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "shrink-0 font-mono text-caption",
+				children: [
+					stat.added > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "text-success",
+						children: ["+", stat.added]
+					}),
+					stat.added > 0 && stat.removed > 0 && " ",
+					stat.removed > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "text-accent",
+						children: ["−", stat.removed]
+					})
+				]
+			}),
+			delta && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "shrink-0 font-mono text-caption text-disabled",
+				children: delta
+			}),
+			f.binary && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "shrink-0 text-caption text-secondary",
+				children: "Binary"
+			}),
+			f.tooLarge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "shrink-0 text-caption text-secondary",
+				children: "Too large to diff"
+			})
+		]
+	});
+}
+/** Small enough to auto-open; larger diffs start collapsed. */
+var AUTO_OPEN_LINES = 40;
+/**
+* The Changes diff view — a list of changed files, each collapsible, its unified
+* diff rendered as colored add/remove/context lines. Files with no inline diff
+* (binary / oversize / too-large) render just the header row. Small diffs default
+* open, large ones collapsed. Built entirely from theme tokens — no external diff
+* library.
+*/
+function DiffView({ files }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "space-y-1.5",
+		children: files.map((f) => {
+			if (!f.diff) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "rounded-control border border-hairline bg-surface px-3.5 py-2",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileHead, {
+					f,
+					lines: null
+				})
+			}, f.path);
+			const lines = parseUnifiedDiff(f.diff);
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", {
+				open: lines.length <= AUTO_OPEN_LINES,
+				className: "group min-w-0 overflow-hidden rounded-control border border-hairline bg-surface",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("summary", {
+					className: "flex cursor-pointer select-none items-center gap-2 px-3.5 py-2 marker:content-['']",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						"aria-hidden": true,
+						className: "shrink-0 text-micro text-disabled transition-transform group-open:rotate-90",
+						children: "▸"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileHead, {
+						f,
+						lines
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DiffBody, { lines })]
+			}, f.path);
+		})
+	});
+}
+/** A section card - mirrors the loop page's surface panels with a sentence-case
+*  section heading. `min-w-0` so wide inner content (a wide diff line)
+*  scrolls inside the card, never widens the page. */
+function Card({ label, count, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", {
+		className: "min-w-0 rounded-card border border-hairline bg-surface px-6 py-5 shadow-card",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: `mb-3.5 border-b border-hairline pb-1.5 ${sectionHeadCls}`,
+			children: [label, count != null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "text-disabled",
+				children: [
+					" (",
+					count,
+					")"
+				]
+			})]
+		}), children]
+	});
+}
+/** A stacked key/value field for the metadata rail - a small label over its value. */
+function Field({ k, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "mb-0.5 text-label font-medium text-secondary",
+			children: k
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "min-w-0 text-body text-primary",
+			children
+		})]
+	});
+}
+/** Per-run artifact diff vs the previous run (Phase 3), rendered as a colored diff
+*  view. Lazy by runId; degrades to a calm fallback for runs with no snapshot. */
+function Changes({ run }) {
+	const [data, setData] = (0, import_react.useState)(null);
+	(0, import_react.useEffect)(() => {
+		if (run.queued || run.running) return;
+		let alive = true;
+		getRunDiff({ data: { runId: run.id } }).then((d) => alive && setData(d)).catch(() => alive && setData({
+			hasSnapshot: false,
+			files: []
+		}));
+		return () => {
+			alive = false;
+		};
+	}, [
+		run.id,
+		run.queued,
+		run.running
+	]);
+	if (run.queued || run.running) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+		label: "Changes",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "text-body text-disabled",
+			children: "File changes appear once the run finishes."
+		})
+	});
+	if (!data) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+		label: "Changes",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {})
+	});
+	if (!data.hasSnapshot) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+		label: "Changes",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "text-body text-disabled",
+			children: "No file snapshot was recorded for this run."
+		})
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+		label: "Changes",
+		count: data.files.length,
+		children: data.files.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "text-body text-disabled",
+			children: "No files changed since the previous run."
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DiffView, { files: data.files })
+	});
+}
+function RunningState({ run }) {
+	const elapsed = dur(Math.max(0, Date.now() - Date.parse(run.ts)));
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+		label: "Activity",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2.5 text-body text-secondary",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				className: "size-2 shrink-0 rounded-full",
+				style: runPulseStyle
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+				"Run in progress",
+				elapsed ? ` for ${elapsed}` : "",
+				"."
+			] })]
+		})
+	});
+}
+function SessionId({ id }) {
+	const [copied, setCopied] = (0, import_react.useState)(false);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+		type: "button",
+		onClick: () => {
+			navigator.clipboard?.writeText(id);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1200);
+		},
+		title: "Copy session id",
+		className: "inline-flex max-w-full cursor-pointer items-center gap-1.5 border-none bg-transparent p-0 text-left font-mono text-label text-secondary transition-colors hover:text-display",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: "truncate",
+			children: id
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			"aria-hidden": true,
+			className: "shrink-0 text-micro text-disabled",
+			children: copied ? "✓ copied" : "copy"
+		})]
+	});
+}
+/** How many older pages to walk back looking for a run not in the latest set
+*  (cursor paging via loadOlderRuns) before giving up — a safety bound so a bad
+*  runId can't page the whole history. 64 × 100/page covers very deep histories. */
+var MAX_OLDER_PAGES = 64;
+/**
+* Run detail PAGE body — its own route (`/loops/$loopId/runs/$runId`). Resolves
+* the run by id from the loop's detail payload (reusing getJobDetail, no new
+* backend); a run older than that latest window is located by paging backward
+* with the existing `loadOlderRuns` cursor fn. Self-polls while it's in flight.
+*
+* Layout mirrors the loop detail page: a header card (name / status pill / chips
+* + action toolbar), then a two-column main — the meaty content (Changes diff +
+* Execution trace + Report) in a wide `minmax(0,1fr)` column, the run metadata in
+* a capped right rail. `min-w-0` everywhere + panes that scroll their own wide
+* content keep the page free of horizontal scroll at any width.
+*/
+function RunDetailView({ loopId, runId }) {
+	const [detail, setDetail] = (0, import_react.useState)(null);
+	const [olderRun, setOlderRun] = (0, import_react.useState)(null);
+	const [searchDone, setSearchDone] = (0, import_react.useState)(false);
+	const [err, setErr] = (0, import_react.useState)(null);
+	const load = (0, import_react.useCallback)(async () => {
+		try {
+			setDetail(await getJobDetail({ data: loopId }));
+			setErr(null);
+		} catch (e) {
+			setErr(String(e));
+		}
+	}, [loopId]);
+	const poll = (0, import_react.useCallback)(async () => {
+		try {
+			setDetail(await getJobDetail({ data: loopId }));
+		} catch {}
+	}, [loopId]);
+	(0, import_react.useEffect)(() => {
+		setDetail(null);
+		setOlderRun(null);
+		setSearchDone(false);
+		setErr(null);
+		load();
+	}, [
+		loopId,
+		runId,
+		load
+	]);
+	const run = detail?.runs.find((r) => r.id === runId) ?? olderRun;
+	(0, import_react.useEffect)(() => {
+		if (!detail || run || searchDone) return;
+		let alive = true;
+		(async () => {
+			try {
+				let cursor = detail.runs.length ? detail.runs[detail.runs.length - 1].ts : (/* @__PURE__ */ new Date()).toISOString();
+				for (let i = 0; i < MAX_OLDER_PAGES && alive; i++) {
+					const page = await loadOlderRuns({ data: {
+						loopId,
+						beforeTs: cursor,
+						limit: 100
+					} });
+					if (!page.length) break;
+					const hit = page.find((r) => r.id === runId);
+					if (hit) {
+						if (alive) setOlderRun(hit);
+						return;
+					}
+					cursor = page[0].ts;
+				}
+			} finally {
+				if (alive) setSearchDone(true);
+			}
+		})();
+		return () => {
+			alive = false;
+		};
+	}, [
+		detail,
+		run,
+		searchDone,
+		loopId,
+		runId
+	]);
+	const running = !!(run?.queued || run?.running);
+	(0, import_react.useEffect)(() => {
+		if (!running) return;
+		const t = setInterval(() => void poll(), 3e3);
+		return () => clearInterval(t);
+	}, [running, poll]);
+	async function onStop() {
+		if (!run) return;
+		if (!confirm("Stop this run? If it is running, Pievo will ask the daemon to terminate it.")) return;
+		const r = await stopRun({ data: run.id });
+		if (r?.error) {
+			alert(`Stop failed: ${r.error}`);
+			return;
+		}
+		await load();
+	}
+	if (err) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadErrorCard, {
+		title: "Couldn't load this run.",
+		detail: err,
+		onRetry: () => void load()
+	});
+	if (!detail || !run && !searchDone) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Loading, {});
+	if (!run) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "rounded-card border border-hairline bg-surface px-6 py-10 text-center shadow-card",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "text-[14px] text-secondary",
+			children: "This run is no longer available."
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
+			to: "/loops/$loopId",
+			params: { loopId },
+			className: "mt-3 inline-block text-label font-medium text-interactive underline underline-offset-2 hover:text-display",
+			children: "← Back to the loop"
+		})]
+	});
+	const jobName = detail.summary.name;
+	const roleChip = run.role || null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { 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.jsxs)("h1", {
+						className: "text-[26px] font-medium leading-tight tracking-tight text-display",
+						children: ["Run · ", jobName]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusPill, {
+						run,
+						colorText: true
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mt-2.5 flex flex-wrap items-center gap-x-2.5 gap-y-1.5 text-meta text-secondary",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-primary",
+							children: fmt(run.ts)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-wire",
+							children: "·"
+						}),
+						roleChip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: roleChip }),
+						run.durationMs != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+							tone: "ink",
+							children: dur(run.durationMs)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+							className: "font-mono text-disabled",
+							children: run.id
+						})
+					]
+				})]
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "mt-5 flex flex-wrap gap-2.5 border-t border-hairline pt-4",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, {
+				to: "/loops/$loopId",
+				params: { loopId },
+				className: btn,
+				children: "View the whole loop →"
+			}), (run.queued || run.running) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: onStop,
+				className: btnDanger,
+				disabled: !!run.running && detail.machine.daemonProtocol !== 2,
+				title: run.running && detail.machine.daemonProtocol !== 2 ? "Daemon upgrade required to stop a running process. Run `npm install -g @kky42/pievo@latest`, then `pievo daemon restart`." : void 0,
+				children: "Stop run"
+			})]
+		})]
+	}), /* @__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.jsxs)("div", {
+			className: "flex min-w-0 flex-col gap-6",
+			children: [
+				run.queued ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+					label: "Activity",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "text-body text-secondary",
+						children: "Queued; it starts when this loop is free and the machine polls."
+					})
+				}) : run.running ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunningState, { run }) : null,
+				run.message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+					label: "Report",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "whitespace-pre-wrap break-words rounded-control border border-hairline bg-raised px-4 py-3.5 text-body leading-relaxed text-primary",
+						children: run.message
+					})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Changes, { run }),
+				run.control && run.control.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+					label: "Control actions",
+					count: run.control.length,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", {
+						className: "space-y-1.5",
+						children: run.control.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", {
+							className: "flex flex-wrap items-baseline gap-x-2 gap-y-0.5 font-mono text-label",
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "text-display",
+									children: c.command
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "min-w-0 break-all text-secondary",
+									children: JSON.stringify(c.args)
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									"aria-hidden": true,
+									className: "text-wire",
+									children: "→"
+								}),
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: "text-primary",
+									children: c.result
+								}),
+								c.detail && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+									className: "text-disabled",
+									children: [
+										"(",
+										c.detail,
+										")"
+									]
+								})
+							]
+						}, i))
+					})
+				}),
+				run.finalText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+					label: "Final output",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "whitespace-pre-wrap break-words text-body text-primary",
+						children: run.finalText
+					})
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "flex min-w-0 flex-col gap-6",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, {
+				label: "Details",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "space-y-3.5",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+							k: "State",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusPill, {
+								run,
+								colorText: true
+							})
+						}),
+						run.status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+							k: "Status",
+							children: run.status
+						}),
+						run.durationMs != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+							k: "Duration",
+							children: dur(run.durationMs)
+						}),
+						run.exitCode != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+							k: "Exit code",
+							children: run.exitCode
+						}),
+						run.usage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+							k: "Token usage",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: "text-disabled",
+								children: [
+									fnum((run.usage.inputTokens ?? 0) + (run.usage.cacheReadTokens ?? 0) + (run.usage.cacheCreationTokens ?? 0)),
+									" in · ",
+									fnum(run.usage.outputTokens ?? 0),
+									" out"
+								]
+							})
+						}),
+						run.state != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+							k: "Run state",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", {
+								className: "block break-all font-mono text-label text-secondary",
+								children: JSON.stringify(run.state)
+							})
+						}),
+						run.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+							k: "Error",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "break-words",
+								style: { color: "var(--color-run-error)" },
+								children: run.error
+							})
+						}),
+						run.sessionId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Field, {
+							k: "Session",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SessionId, { id: run.sessionId })
+						})
+					]
+				})
+			})
+		})]
+	})] });
+}
+/**
+* Run detail PAGE — `/loops/$loopId/runs/$runId`. A standalone page (the trailing
+* `_` on the `$loopId` segment opts it out of the loop page's component so the run
+* gets its own full surface, deep-linkable + browser-back friendly) rather than a
+* modal or an inline panel. It resolves the run from the loop's detail payload
+* (reusing getJobDetail — no new backend) and reuses the Phase 3 artifact diff.
+*
+* Auth-gated like the dashboard (`/`) so a logged-out/expired DEEP LINK shows the
+* sign-in CTA instead of a raw `loop not found` error from the blocked fetch.
+*/
+function RunDetailPage() {
+	const { loopId, runId } = Route.useParams();
+	const { auth } = Route.useLoaderData() ?? { auth: { enabled: false } };
+	const { data: session, isPending } = useSession();
+	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: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+				to: "/loops/$loopId",
+				params: { loopId },
+				className: "inline-flex items-center gap-1.5 text-label font-medium text-secondary transition-colors hover:text-display",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					"aria-hidden": true,
+					children: "←"
+				}), " Back to loop"]
+			})
+		}), auth?.enabled && !isPending && !session ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SignIn, { callbackURL: `/loops/${loopId}/runs/${runId}` }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunDetailView, {
+			loopId,
+			runId
+		})]
+	});
+}
+//#endregion
+export { RunDetailPage as component };