@kky42/pievo-server 1.0.0

package/.output/server/_ssr/LoopView-DCugEbHx.mjs

@@ -0,0 +1,1106 @@
+import { o as __toESM } from "../_runtime.mjs";
+import { C as require_jsx_runtime, S as require_react } from "../_libs/@base-ui/react+[...].mjs";
+import { pt as isTaskPath } from "./boot-BbtG0ImW.mjs";
+import { T as md, _ as fmt, j as tsShort, v as fnum } from "./ui-Dej2qjuS.mjs";
+import { c as getArtifacts } from "./loopApi-Cxe8WyOB.mjs";
+import { t as artifactKind } from "./artifactKind-BW0isV8L.mjs";
+import { t as purify } from "../_libs/dompurify.mjs";
+import { i as isMarkdown, r as ViewerHead, t as ArtifactBody } from "./artifactView-DS4O22wl.mjs";
+import { n as ModalHead, t as Modal } from "./Modal-DpKZHLZK.mjs";
+import { n as import_lib, t as esm_default } from "../_libs/html-react-parser+[...].mjs";
+import { a as Area, c as Tooltip, i as XAxis, l as ResponsiveContainer, n as LineChart, o as Line, r as YAxis, s as CartesianGrid, t as AreaChart } from "../_libs/recharts+victory-vendor.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/LoopView-DCugEbHx.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+/** Parse a `<loop-chart series="key:label:unit, ...">` attribute into StateField[]. */
+function parseSeries(attr) {
+	if (!attr) return [];
+	return attr.split(",").map((s) => {
+		const [key, label, unit] = s.split(":").map((x) => x.trim());
+		return {
+			key: key ?? "",
+			...label ? { label } : {},
+			...unit ? { unit } : {}
+		};
+	}).filter((f) => f.key);
+}
+function buildBindingContext(runs) {
+	const latest = {};
+	for (const r of runs) if (r.state && typeof r.state === "object" && !Array.isArray(r.state)) {
+		for (const k in r.state) if (!(k in latest)) {
+			const v = r.state[k];
+			if (typeof v === "number") latest[k] = fnum(v);
+			else if (typeof v === "string") latest[k] = v;
+		}
+	}
+	return { latest };
+}
+var TOKEN = /\{\{\s*([a-zA-Z0-9_.]+)\s*\}\}/g;
+var escapeHtml = (s) => s.replace(/[&<>"]/g, (c) => ({
+	"&": "&amp;",
+	"<": "&lt;",
+	">": "&gt;",
+	"\"": "&quot;"
+})[c] ?? c);
+/** Interpolate `{{...}}` tokens. Values are HTML-escaped (they are agent-controlled data). */
+function resolveBindings(html, ctx) {
+	return html.replace(TOKEN, (_m, path) => {
+		const v = lookup(ctx, path);
+		return v == null ? "—" : escapeHtml(v);
+	});
+}
+function lookup(ctx, path) {
+	const parts = path.split(".");
+	if (parts[0] === "latest" && parts[1]) return ctx.latest[parts[1]];
+}
+/** Per-run numeric state snapshots → one series per numeric field (chronological). */
+function numericSeries(runsNewestFirst) {
+	const chron = (runsNewestFirst ?? []).slice().reverse();
+	const series = {};
+	for (const r of chron) {
+		const obj = r.state && typeof r.state === "object" && !Array.isArray(r.state) ? r.state : {};
+		for (const k in obj) {
+			const v = obj[k];
+			if (typeof v === "number" && isFinite(v)) (series[k] ??= []).push({
+				t: r.ts,
+				v
+			});
+		}
+	}
+	return series;
+}
+/**
+* Merge per-key series into the row-oriented array Recharts consumes
+* (`[{__t, k1, k2}, …]`, chronological). Rows are the union of the requested
+* keys' timestamps - a run that reported only some keys leaves the others
+* absent on that row (the chart bridges the gap via `connectNulls`).
+*/
+function seriesRows(data, keys) {
+	const ts = /* @__PURE__ */ new Set();
+	for (const k of keys) for (const p of data[k] ?? []) ts.add(p.t);
+	const sorted = [...ts].sort();
+	const idx = new Map(sorted.map((t, i) => [t, i]));
+	const rows = sorted.map((t) => ({ __t: t }));
+	for (const k of keys) for (const p of data[k] ?? []) rows[idx.get(p.t)][k] = p.v;
+	return rows;
+}
+/**
+* `<loop-chart series="mrr:MRR:$, paid:Paid">` - the loop's run-history trend,
+* rendered by Recharts in the shadcn/ui-charts grammar, themed entirely by the
+* theme tokens (`--color-chart-1..5` ramp, hairline grid, mono ticks,
+* flat tooltip - no shadows, no decorative color). One series renders as a
+* gradient area; multiple series render as plain lines (overlapping translucent
+* fills go muddy in a monochrome palette). A single-point series renders a dot
+* instead of nothing, so a young loop's dashboard is never blank.
+*
+* `data` is the shared `numericSeries(runs)` map computed once by LoopView.
+*/
+/** Distinct strokes for multiple series - display ink first, then the signal colors. */
+var STROKES = [
+	"var(--color-chart-1)",
+	"var(--color-chart-2)",
+	"var(--color-chart-3)",
+	"var(--color-chart-4)",
+	"var(--color-chart-5)"
+];
+/**
+* Fixed pixel height: ResponsiveContainer tracks the CONTAINER width while the
+* height stays constant - the fix for the old stretched-viewBox renderer, which
+* scaled like an image (≈4px-fat strokes and a ~340px-tall chart at the loop
+* page's full dashboard width). Also the initial render size before the
+* ResizeObserver measures (and the only size in a non-browser render).
+*/
+var HEIGHT = 190;
+var INITIAL = {
+	width: 640,
+	height: HEIGHT
+};
+var TICK = {
+	fontSize: 10,
+	fontFamily: "var(--font-mono)",
+	fill: "var(--color-secondary)"
+};
+var TOOLTIP_STYLE = {
+	background: "var(--color-surface)",
+	border: "1px solid var(--color-wire)",
+	borderRadius: 8,
+	boxShadow: "none",
+	padding: "6px 10px",
+	fontFamily: "var(--font-mono)",
+	fontSize: 11
+};
+/** "$12.4k" / "40℃" / "7" - the unit placement the legend has always used. */
+var withUnit = (v, unit) => unit === "$" ? `$${fnum(v)}` : `${fnum(v)}${unit}`;
+function LoopChart({ data, series }) {
+	const gradientId = (0, import_react.useId)();
+	if (!series.length) return null;
+	const plotted = series.map((f) => ({
+		field: f,
+		pts: data[f.key] ?? []
+	})).filter((s) => s.pts.length >= 1);
+	if (!plotted.length) return null;
+	const rows = seriesRows(data, plotted.map((s) => s.field.key));
+	const single = plotted.length === 1;
+	const unitOf = new Map(plotted.map((s) => [s.field.key, s.field.unit ?? ""]));
+	const xAxis = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, {
+		dataKey: "__t",
+		tickLine: false,
+		axisLine: false,
+		tickMargin: 8,
+		minTickGap: 28,
+		interval: "preserveStartEnd",
+		tick: TICK,
+		tickFormatter: (t) => md(t)
+	});
+	const yAxis = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, {
+		width: 34,
+		tickCount: 4,
+		tickLine: false,
+		axisLine: false,
+		tick: TICK,
+		tickFormatter: (v) => fnum(v)
+	});
+	const grid = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, {
+		vertical: false,
+		stroke: "var(--color-hairline)"
+	});
+	const tooltip = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip, {
+		isAnimationActive: false,
+		cursor: {
+			stroke: "var(--color-wire)",
+			strokeDasharray: "3 3"
+		},
+		contentStyle: TOOLTIP_STYLE,
+		labelStyle: {
+			color: "var(--color-secondary)",
+			marginBottom: 2
+		},
+		itemStyle: {
+			color: "var(--color-primary)",
+			padding: "1px 0"
+		},
+		labelFormatter: (t) => tsShort(String(t)),
+		formatter: (v, name, item) => [withUnit(Number(v), unitOf.get(String(item?.dataKey)) ?? ""), String(name)]
+	});
+	const seriesProps = (s, idx) => {
+		const color = STROKES[idx % STROKES.length];
+		return {
+			dataKey: s.field.key,
+			name: s.field.label ?? s.field.key,
+			type: "monotone",
+			stroke: color,
+			strokeWidth: 1.5,
+			dot: s.pts.length === 1 ? {
+				r: 3.5,
+				strokeWidth: 0,
+				fill: color
+			} : false,
+			activeDot: {
+				r: 3,
+				strokeWidth: 0,
+				fill: color
+			},
+			connectNulls: true,
+			isAnimationActive: false
+		};
+	};
+	const margin = {
+		top: 6,
+		right: 12,
+		left: 0,
+		bottom: 0
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", {
+		className: "my-2 min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "min-w-0",
+			style: { height: HEIGHT },
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				initialDimension: INITIAL,
+				children: single ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AreaChart, {
+					data: rows,
+					margin,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", {
+							id: gradientId,
+							x1: "0",
+							y1: "0",
+							x2: "0",
+							y2: "1",
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+								offset: "5%",
+								stopColor: STROKES[0],
+								stopOpacity: .28
+							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+								offset: "95%",
+								stopColor: STROKES[0],
+								stopOpacity: .02
+							})]
+						}) }),
+						grid,
+						xAxis,
+						yAxis,
+						tooltip,
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Area, {
+							...seriesProps(plotted[0], 0),
+							fill: `url(#${gradientId})`
+						})
+					]
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LineChart, {
+					data: rows,
+					margin,
+					children: [
+						grid,
+						xAxis,
+						yAxis,
+						tooltip,
+						plotted.map((s, idx) => /* @__PURE__ */ (0, import_react.createElement)(Line, {
+							...seriesProps(s, idx),
+							key: s.field.key
+						}))
+					]
+				})
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", {
+			className: "mt-1 flex flex-wrap gap-x-4 gap-y-1 text-label text-[var(--color-secondary)]",
+			children: plotted.map((s, idx) => {
+				const last = s.pts[s.pts.length - 1];
+				if (!last) return null;
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "inline-flex items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "inline-block h-[2px] w-3 align-middle",
+							style: { background: STROKES[idx % STROKES.length] }
+						}),
+						s.field.label ?? s.field.key,
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-[var(--color-display)]",
+							children: withUnit(last.v, s.field.unit ?? "")
+						})
+					]
+				}, s.field.key);
+			})
+		})]
+	});
+}
+var basename$2 = (path) => path.split("/").pop() || path;
+var pad = (n) => String(n).padStart(2, "0");
+/** A real calendar date within a sane range (no 2026-13-40, no year 10521). */
+function validDate(y, m, d) {
+	if (y < 1970 || y > 2100 || m < 1 || m > 12 || d < 1 || d > 31) return false;
+	const dt = new Date(Date.UTC(y, m - 1, d));
+	return dt.getUTCFullYear() === y && dt.getUTCMonth() === m - 1 && dt.getUTCDate() === d;
+}
+var DATE_RE = /(\d{4})(?:([-_])(\d{2})\2(\d{2})|(\d{2})(\d{2}))/g;
+/** First valid date found in the file's basename, else null. */
+function parseFilenameDate(path) {
+	const name = basename$2(path);
+	DATE_RE.lastIndex = 0;
+	for (let m = DATE_RE.exec(name); m; m = DATE_RE.exec(name)) {
+		const before = name[m.index - 1];
+		const after = name[m.index + m[0].length];
+		if (before && /\d/.test(before) || after && /\d/.test(after)) continue;
+		const y = Number(m[1]);
+		const mo = Number(m[3] ?? m[5]);
+		const d = Number(m[4] ?? m[6]);
+		if (validDate(y, mo, d)) return `${m[1]}-${pad(mo)}-${pad(d)}`;
+	}
+	return null;
+}
+/** Local calendar day of an ISO timestamp (the calendar renders user-local). */
+function localDay(iso) {
+	const d = new Date(iso);
+	return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+/**
+* A calendar day from a front-matter `date:` value (stored RAW — validity is
+* decided here). Forgiving about the shape: takes the leading `YYYY-MM-DD` (or
+* `/`/`_` separators, or a full ISO timestamp's date part) and validates it's a
+* real day. Returns null for anything unparseable/invalid (fall through to
+* filename/sync).
+*/
+function parseMetaDate(raw) {
+	if (typeof raw !== "string") return null;
+	const m = /^\s*(\d{4})[-/_](\d{2})[-/_](\d{2})/.exec(raw);
+	if (!m) return null;
+	const y = Number(m[1]);
+	const mo = Number(m[2]);
+	const d = Number(m[3]);
+	return validDate(y, mo, d) ? `${m[1]}-${pad(mo)}-${pad(d)}` : null;
+}
+/** Date one artifact: front-matter `date:` first (authoritative), filename next,
+*  sync time as the marked fallback. */
+function productDate(file) {
+	const fromMeta = parseMetaDate(file.meta?.date);
+	if (fromMeta) return {
+		date: fromMeta,
+		source: "frontmatter"
+	};
+	const fromName = parseFilenameDate(file.path);
+	return fromName ? {
+		date: fromName,
+		source: "filename"
+	} : {
+		date: localDay(file.updatedAt),
+		source: "sync"
+	};
+}
+/**
+* `match` glob → RegExp. `*` matches within a path segment (never `/`); all
+* other characters are literal. A pattern with no `/` matches against the
+* BASENAME (so `*.md` means "any markdown file, anywhere"), a pattern with
+* one matches the whole loop-relative path.
+*/
+function globToRegExp(pattern) {
+	const rx = pattern.split("*").map((s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("[^/]*");
+	return new RegExp(`^${rx}$`);
+}
+/** The artifacts a `match` pattern selects (no pattern ⇒ all). */
+function matchArtifacts(files, pattern) {
+	if (!pattern) return files;
+	const rx = globToRegExp(pattern);
+	const onBase = !pattern.includes("/");
+	return files.filter((f) => rx.test(onBase ? basename$2(f.path) : f.path));
+}
+/**
+* The newest artifact a pattern selects - by product date (filename first)
+* descending, sync time as the tiebreak. This keeps "the newest digest"
+* correct even when an OLD file happens to re-sync last.
+*/
+function newestMatch(files, pattern) {
+	const matched = matchArtifacts(files, pattern);
+	let best;
+	let bestKey = "";
+	for (const f of matched) {
+		const key = `${productDate(f).date}|${f.updatedAt}`;
+		if (!best || key > bestKey) {
+			best = f;
+			bestKey = key;
+		}
+	}
+	return best;
+}
+/**
+* `<loop-embed file="reports/digest-2026-07-01.md">` /
+* `<loop-embed match="reports/digest-*.md">` - a loop's own produced file
+* embedded in its dashboard. `file` targets one exact path; `match` resolves to
+* the NEWEST matching artifact (filename date first, sync time as tiebreak), so
+* "embed the latest digest" keeps working without the agent editing the
+* template every run. `match` never selects the loop's task file - the spec is
+* not a product (same rule as the calendar's default set), and its frequent
+* edit-syncs would pin it as "newest" under a broad glob like `*.md`; an exact
+* `file=` path may still target it. Content renders through the shared
+* artifact viewer (markdown via .taskmd, mono pre for other text, download
+* notice for binary), collapsed at 300px with a fade + "show all" toggle; the
+* `full` attribute opts out of the collapse.
+*/
+/** Collapsed preview height. A pixel cap, not a line clamp - markdown blocks
+*  (tables, code) have uneven line heights, so pixels are the only stable cut. */
+var COLLAPSE_PX = 300;
+var norm = (p) => p.replace(/\\/g, "/").replace(/^\.\//, "");
+function LoopEmbed({ loopId, artifacts, file, match, full, taskFile }) {
+	const requested = file ?? match;
+	const shell = "min-w-0 overflow-hidden rounded-card border border-hairline bg-surface shadow-card";
+	if (!requested) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: shell,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "px-5 py-5 font-mono text-label text-disabled",
+			children: "<loop-embed> needs file=\"<path>\" or match=\"<glob>\""
+		})
+	});
+	if (artifacts == null) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: shell,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewerHead, { path: requested }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "px-5 py-6 text-label text-secondary",
+			children: "Loading…"
+		})]
+	});
+	const matchable = file ? artifacts : artifacts.filter((a) => !isTaskPath(taskFile, a.path));
+	const target = file ? artifacts.find((a) => norm(a.path) === norm(file)) : newestMatch(matchable, match);
+	if (!target) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: shell,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewerHead, { path: requested }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "px-5 py-6 text-body text-disabled",
+			children: "No synced file matches yet. It appears here after the loop's next run syncs it."
+		})]
+	});
+	const meta = `${match ? `newest of ${matchArtifacts(matchable, match).length} matching ${match} · ` : ""}synced ${fmt(target.updatedAt)}`;
+	const kind = artifactKind(target.path);
+	const collapse = !full && !(kind === "html" || kind === "image") && !target.binary && !target.oversize;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: shell,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ViewerHead, {
+			path: target.path,
+			meta,
+			action: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+				href: "#files",
+				className: "text-caption font-medium text-interactive transition-colors hover:text-display",
+				children: "Open in files →"
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleBody, {
+			collapse,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArtifactBody, {
+				loopId,
+				file: target
+			})
+		})]
+	});
+}
+/**
+* The collapse wrapper: clipping happens on THIS wrapper (overflow-hidden +
+* max-height), never on the text nodes, with a fade overlay above the cut and
+* the toggle in its own footer. The toggle appears only when the content
+* actually overflows the cap (measured post-render, re-checked as the lazy
+* content lands).
+*/
+function CollapsibleBody({ collapse, children }) {
+	const ref = (0, import_react.useRef)(null);
+	const [expanded, setExpanded] = (0, import_react.useState)(false);
+	const [overflowing, setOverflowing] = (0, import_react.useState)(false);
+	(0, import_react.useLayoutEffect)(() => {
+		const el = ref.current;
+		if (!el) return;
+		const over = el.scrollHeight > 301;
+		if (over !== overflowing) setOverflowing(over);
+	});
+	const collapsed = collapse && !expanded && overflowing;
+	if (!collapse) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "min-w-0",
+		children
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "relative min-w-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			ref,
+			className: collapsed ? "overflow-hidden" : "",
+			style: collapsed ? { maxHeight: COLLAPSE_PX } : void 0,
+			children
+		}), collapsed && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			"aria-hidden": true,
+			className: "pointer-events-none absolute inset-x-0 bottom-0 h-16",
+			style: { background: "linear-gradient(to bottom, transparent, var(--color-surface))" }
+		})]
+	}), overflowing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "flex border-t border-hairline px-3.5 py-1.5",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+			type: "button",
+			onClick: () => setExpanded(!expanded),
+			className: "cursor-pointer border-none bg-transparent p-0 text-caption font-medium text-secondary transition-colors hover:text-display",
+			children: expanded ? "Collapse ▴" : "Show all ▾"
+		})
+	})] });
+}
+/**
+* `<loop-calendar match="reports/*.md">` - the loop's products on a month
+* grid. Each product lands on the day parsed from its FILENAME (ISO-ish
+* patterns), falling back to its sync time (marked with a dashed chip - sync
+* time can misattribute a re-synced old file, so the fallback is visible, not
+* silent). Clicking a product reviews its full body in the shared Modal
+* (focus trap, Esc, scroll lock come from Base UI Dialog - the kanban card
+* pattern); close returns to the grid. `match` is optional - the default is
+* every synced artifact except the task file.
+*
+* Monday-start (ISO), mono day numbers top-right, today inverted. Chips carry
+* the product's basename (max 2 per day + a "+N" overflow); under ~620px of
+* CONTAINER width they collapse to plain dots (measured, not a viewport media
+* query - the dashboard box can be narrow on a wide screen).
+*/
+var DOW = [
+	"Mon",
+	"Tue",
+	"Wed",
+	"Thu",
+	"Fri",
+	"Sat",
+	"Sun"
+];
+var DOT_MODE_BELOW = 620;
+var CHIPS_PER_DAY = 2;
+var monthOf = (day) => day.slice(0, 7);
+var basename$1 = (path) => path.split("/").pop() || path;
+/** Human label for how a product got its day (front matter is authoritative). */
+function dateSourceLabel(source) {
+	if (source === "frontmatter") return "dated by front matter";
+	if (source === "filename") return "dated by filename";
+	return "dated by sync time (no date in front matter/filename)";
+}
+var monthIndex = (ym) => {
+	const [y, m] = ym.split("-").map(Number);
+	return y * 12 + m;
+};
+/**
+* The shown month clamped back into the data: an exact hit stays; a month
+* whose products all vanished (poll refresh) snaps to the nearest remaining
+* one; no pick defaults to the newest month. `months` must be non-empty.
+*/
+function clampMonth(months, shown) {
+	if (shown && months.includes(shown)) return shown;
+	let best = months[months.length - 1];
+	if (shown) {
+		const target = monthIndex(shown);
+		for (const m of months) if (Math.abs(monthIndex(m) - target) < Math.abs(monthIndex(best) - target)) best = m;
+	}
+	return best;
+}
+var monthLabel = (ym) => {
+	const [y, m] = ym.split("-").map(Number);
+	return `${new Date(Date.UTC(y, m - 1, 1)).toLocaleString("en-US", {
+		month: "long",
+		timeZone: "UTC"
+	})} ${y}`;
+};
+/** Chip text: basename without extension or a trailing date (digest-2026-07-01.md → "digest"). */
+function chipName(path) {
+	const noExt = (path.split("/").pop() || path).replace(/\.[a-z0-9]+$/i, "");
+	return noExt.replace(/[-_]?\d{4}([-_]?)\d{2}\1\d{2}$/, "") || noExt;
+}
+/** Measured width of a container element (0 until first measure). */
+function useContainerWidth(ref) {
+	const [width, setWidth] = (0, import_react.useState)(0);
+	(0, import_react.useEffect)(() => {
+		const el = ref.current;
+		if (!el || typeof ResizeObserver === "undefined") return;
+		const ro = new ResizeObserver((entries) => {
+			const w = entries[0]?.contentRect.width;
+			if (w != null) setWidth(w);
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [ref]);
+	return width;
+}
+function LoopCalendar({ loopId, artifacts, match, taskFile }) {
+	const rootRef = (0, import_react.useRef)(null);
+	const width = useContainerWidth(rootRef);
+	const dotMode = width > 0 && width < DOT_MODE_BELOW;
+	const products = (0, import_react.useMemo)(() => {
+		const files = matchArtifacts(artifacts ?? [], match);
+		return (match ? files : files.filter((f) => !isTaskPath(taskFile, f.path))).map((f) => ({
+			file: f,
+			...productDate(f)
+		}));
+	}, [
+		artifacts,
+		match,
+		taskFile
+	]);
+	const byDay = (0, import_react.useMemo)(() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const p of products) {
+			const list = m.get(p.date) ?? [];
+			list.push(p);
+			m.set(p.date, list);
+		}
+		for (const list of m.values()) list.sort((a, b) => a.file.path < b.file.path ? -1 : 1);
+		return m;
+	}, [products]);
+	const months = (0, import_react.useMemo)(() => [...new Set(products.map((p) => monthOf(p.date)))].sort(), [products]);
+	const [shown, setShown] = (0, import_react.useState)(null);
+	const [reviewing, setReviewing] = (0, import_react.useState)(null);
+	const activeReview = reviewing && products.some((p) => p.file.path === reviewing.file.path) ? reviewing : null;
+	if (artifacts == null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		ref: rootRef,
+		className: "min-w-0",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "py-4 text-label text-secondary",
+			children: "Loading…"
+		})
+	});
+	if (!products.length) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		ref: rootRef,
+		className: "min-w-0",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "rounded-card border border-hairline px-5 py-8 text-center text-body text-disabled",
+			children: "No products yet. Files the loop writes appear here after its next run syncs them."
+		})
+	});
+	const month = clampMonth(months, shown);
+	const mi = months.indexOf(month);
+	const today = localDay((/* @__PURE__ */ new Date()).toISOString());
+	const [y, m] = month.split("-").map(Number);
+	const lead = (new Date(y, m - 1, 1).getDay() + 6) % 7;
+	const dayCount = new Date(y, m, 0).getDate();
+	const trail = (7 - (lead + dayCount) % 7) % 7;
+	const monthCount = products.filter((p) => monthOf(p.date) === month).length;
+	const navBtn = "inline-flex size-7 cursor-pointer items-center justify-center rounded-control border border-hairline bg-surface text-body leading-none text-secondary transition-colors hover:border-wire hover:bg-raised hover:text-display disabled:cursor-default disabled:opacity-30 disabled:hover:border-hairline disabled:hover:bg-surface";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		ref: rootRef,
+		className: "min-w-0",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mb-3 flex flex-wrap items-center gap-x-3 gap-y-2",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: navBtn,
+							disabled: mi <= 0,
+							onClick: () => setShown(months[mi - 1]),
+							"aria-label": "previous month",
+							children: "‹"
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: navBtn,
+							disabled: mi >= months.length - 1,
+							onClick: () => setShown(months[mi + 1]),
+							"aria-label": "next month",
+							children: "›"
+						})]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-body font-semibold tracking-tight text-display",
+						children: monthLabel(month)
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "ml-auto rounded-full bg-raised px-2.5 py-0.5 text-caption font-medium text-secondary",
+						children: [
+							monthCount,
+							" product",
+							monthCount === 1 ? "" : "s"
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "grid min-w-0 grid-cols-7 overflow-hidden rounded-card border-l border-t border-hairline",
+				children: [
+					DOW.map((d) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "border-b border-r border-hairline bg-raised/50 px-2 py-1.5 text-right text-micro font-semibold uppercase tracking-wide text-disabled",
+						children: d
+					}, d)),
+					Array.from({ length: lead }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-r border-hairline bg-raised/20" }, `lead${i}`)),
+					Array.from({ length: dayCount }, (_, i) => {
+						const day = `${month}-${String(i + 1).padStart(2, "0")}`;
+						const fs = byDay.get(day) ?? [];
+						const isToday = day === today;
+						return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: `relative min-w-0 border-b border-r border-hairline px-1.5 pb-1.5 transition-colors ${dotMode ? "min-h-[48px] pt-5" : "min-h-[76px] pt-6"} ${isToday ? "bg-interactive-soft/40" : "bg-surface"}`,
+							children: [
+								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: `absolute right-1.5 top-1 inline-flex h-[15px] min-w-[15px] items-center justify-center font-mono text-micro ${isToday ? "rounded-full bg-display px-1 font-semibold text-paper" : fs.length ? "text-secondary" : "text-disabled"}`,
+									children: i + 1
+								}),
+								fs.slice(0, CHIPS_PER_DAY).map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProductChip, {
+									product: p,
+									dot: dotMode,
+									onPick: () => setReviewing(p)
+								}, p.file.path)),
+								fs.length > CHIPS_PER_DAY && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+									type: "button",
+									onClick: () => setReviewing(fs[CHIPS_PER_DAY]),
+									className: "mt-1 block cursor-pointer border-none bg-transparent p-0 px-1 font-mono text-[9.5px] font-medium text-disabled transition-colors hover:text-display",
+									children: [
+										"+",
+										fs.length - CHIPS_PER_DAY,
+										" more"
+									]
+								})
+							]
+						}, day);
+					}),
+					Array.from({ length: trail }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "border-b border-r border-hairline bg-raised/20" }, `trail${i}`))
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mt-3 flex flex-wrap gap-x-4 gap-y-1.5",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "inline-flex items-center gap-1.5 text-caption font-medium text-secondary",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-block h-2.5 w-3.5 rounded-[3px] border border-hairline bg-raised" }), " Dated by filename"]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "inline-flex items-center gap-1.5 text-caption font-medium text-secondary",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-block h-2.5 w-3.5 rounded-[3px] border border-dashed border-wire bg-raised" }), " Fallback: dated by sync time"]
+				})]
+			}),
+			activeReview && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Modal, {
+				open: true,
+				onClose: () => setReviewing(null),
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalHead, {
+					title: activeReview.file.meta?.title?.trim() || basename$1(activeReview.file.path),
+					sub: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "font-mono",
+						children: [
+							activeReview.file.path,
+							" · ",
+							dateSourceLabel(activeReview.source),
+							" · synced",
+							" ",
+							fmt(activeReview.file.updatedAt)
+						]
+					})
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "mt-4 min-w-0",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArtifactBody, {
+						loopId,
+						file: activeReview.file
+					})
+				})]
+			})
+		]
+	});
+}
+/** One product on a day cell: a named chip, or a plain dot in narrow containers. */
+function ProductChip({ product, dot, onPick }) {
+	const fallback = product.source === "sync";
+	const title = product.file.path + (fallback ? " · dated by sync time" : "");
+	if (dot) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: onPick,
+		title,
+		"aria-label": product.file.path,
+		className: `mr-1 mt-1 inline-block size-2 cursor-pointer rounded-full border-none p-0 transition-transform hover:scale-125 ${fallback ? "bg-disabled" : "bg-interactive"}`
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: onPick,
+		title,
+		className: `mt-1 block w-full min-w-0 cursor-pointer truncate rounded-full border border-hairline bg-raised px-2 py-0.5 text-left font-mono text-micro text-secondary transition-colors hover:border-wire hover:bg-surface hover:text-display ${fallback ? "border-dashed" : ""}`,
+		children: chipName(product.file.path)
+	});
+}
+/**
+* `<loop-kanban columns="research,in-progress,done" match="notes/*.md">` - a
+* COLLECTION VIEW over the loop's front-matter-typed markdown products, rendered
+* as a board. There is NO board file: each artifact IS a card, grouped into the
+* column whose name equals the artifact's front-matter `type`. A card "moves"
+* when a run edits that artifact's `type` in place (the per-run diff shows the
+* move).
+*
+* - `columns` (REQUIRED): comma-separated, explicit order = flow direction, one
+*   board column each.
+* - Overflow: any typed artifact whose `type` matches no declared column lands
+*   in an automatic trailing "Other" column, so a typo stays visible and a card
+*   is never silently dropped. The overflow column is omitted when empty.
+* - `match` (optional glob, same convention as loop-embed/loop-calendar): scopes
+*   which artifacts participate; default = every markdown product with a `type`.
+*   Untyped artifacts never appear, and the task file is always excluded (its
+*   status is the TASK chip, not a kanban type).
+* - Cards: minimal - title (fallback filename) + a small date when the product
+*   is actually dated. Sorted date desc, then sync-time desc.
+* - Click a card to review its full body in the shared Modal (focus trap, Esc,
+*   scroll lock come from Base UI Dialog); close returns to the board.
+*
+* Layout: the board row scrolls INSIDE its own pane (`min-w-0 overflow-x-auto`),
+* columns are `shrink-0` fixed-width - a wide board never widens the dashboard
+* box or forces a page-level horizontal scrollbar (the Timeline strip rule).
+*/
+var OVERFLOW_LABEL = "Other";
+/** Bucket key for the automatic overflow column. A unique Symbol (not the display
+*  string) so it can never collide with an author-declared column named 'Other'. */
+var OVERFLOW_KEY = Symbol("kanban-overflow");
+/** React key for the overflow row. Column names are comma-split, so a name can
+*  never contain a comma - this sentinel cannot collide with a declared column. */
+var OVERFLOW_REACT_KEY = "overflow,";
+var basename = (path) => path.split("/").pop() || path;
+/** Sort key: product date desc, then sync time desc (newest work first). Both
+*  parts are lexically ordered (YYYY-MM-DD / ISO), so a plain string compare on
+*  the descending key ranks them. */
+var sortKey = (c) => `${c.date.date}|${c.file.updatedAt}`;
+function LoopKanban({ loopId, artifacts, columns, match, taskFile }) {
+	const [reviewing, setReviewing] = (0, import_react.useState)(null);
+	const cols = [...new Set((columns ?? "").split(",").map((s) => s.trim()).filter(Boolean))];
+	const shell = "min-w-0";
+	if (!cols.length) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: `${shell} rounded-card border border-hairline bg-surface shadow-card`,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "px-5 py-5 font-mono text-label text-disabled",
+			children: "<loop-kanban> needs columns=\"<a,b,c>\""
+		})
+	});
+	if (artifacts == null) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: shell,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "py-4 text-label text-secondary",
+			children: "Loading…"
+		})
+	});
+	const cards = matchArtifacts(artifacts, match).filter((a) => isMarkdown(a.path) && !!a.meta?.type && !isTaskPath(taskFile, a.path)).map((file) => ({
+		file,
+		title: file.meta?.title?.trim() || basename(file.path),
+		date: productDate(file)
+	}));
+	const declared = new Set(cols);
+	const grouped = /* @__PURE__ */ new Map();
+	for (const card of cards) {
+		const type = card.file.meta.type.trim();
+		const key = declared.has(type) ? type : OVERFLOW_KEY;
+		const list = grouped.get(key) ?? [];
+		list.push(card);
+		grouped.set(key, list);
+	}
+	for (const list of grouped.values()) list.sort((a, b) => sortKey(a) < sortKey(b) ? 1 : -1);
+	const board = cols.map((name) => ({
+		name,
+		cards: grouped.get(name) ?? [],
+		overflow: false
+	}));
+	const overflow = grouped.get(OVERFLOW_KEY) ?? [];
+	if (overflow.length) board.push({
+		name: OVERFLOW_LABEL,
+		cards: overflow,
+		overflow: true
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: `${shell} flex max-h-[420px] gap-3 overflow-x-auto pb-1`,
+		children: [board.map((col) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex min-h-0 w-[248px] shrink-0 flex-col",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "mb-2 flex shrink-0 items-center gap-2 border-b border-hairline pb-1.5",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: `text-label font-semibold ${col.overflow ? "text-disabled" : "text-primary"}`,
+					children: col.name
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-caption text-disabled",
+					children: col.cards.length
+				})]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColumnCards, {
+				count: col.cards.length,
+				children: col.cards.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "shrink-0 rounded-control border border-dashed border-hairline px-2.5 py-3 text-center text-caption text-disabled",
+					children: "Empty"
+				}) : col.cards.map((card) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KanbanCard, {
+					card,
+					onOpen: () => setReviewing(card)
+				}, card.file.path))
+			})]
+		}, col.overflow ? OVERFLOW_REACT_KEY : col.name)), reviewing && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Modal, {
+			open: true,
+			onClose: () => setReviewing(null),
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModalHead, {
+				title: reviewing.title,
+				sub: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: "font-mono",
+					children: [
+						reviewing.file.path,
+						reviewing.date.source !== "sync" && ` · ${reviewing.date.date}`,
+						" · synced",
+						" ",
+						fmt(reviewing.file.updatedAt)
+					]
+				})
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-4 min-w-0",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArtifactBody, {
+					loopId,
+					file: reviewing.file
+				})
+			})]
+		})]
+	});
+}
+/**
+* A column's scrollable card list. Cards are shrink-0 (they must overflow the
+* height-capped board, never compress to fit it); when there IS overflow below
+* the fold, a bottom fade + "scroll" pill signals it, disappearing at the end.
+*/
+function ColumnCards({ count, children }) {
+	const ref = (0, import_react.useRef)(null);
+	const [below, setBelow] = (0, import_react.useState)(false);
+	const update = () => {
+		const el = ref.current;
+		if (el) setBelow(el.scrollTop + el.clientHeight < el.scrollHeight - 4);
+	};
+	(0, import_react.useEffect)(update, [count]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "relative flex min-h-0 flex-col",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			ref,
+			onScroll: update,
+			className: "flex min-h-0 flex-col gap-2 overflow-y-auto pb-1 pr-0.5",
+			children
+		}), below && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "pointer-events-none absolute inset-x-0 bottom-0 flex h-12 items-end justify-center bg-gradient-to-t from-surface to-transparent",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "mb-1 rounded-full border border-hairline bg-surface px-2 py-0.5 text-micro text-secondary shadow-card",
+				children: "↓ scroll"
+			})
+		})]
+	});
+}
+/** One artifact as a card: title + small date, click to review it in the modal. */
+function KanbanCard({ card, onOpen }) {
+	const dated = card.date.source !== "sync";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "min-w-0 shrink-0 overflow-hidden rounded-control border border-hairline bg-surface shadow-card transition-colors hover:border-wire",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+			type: "button",
+			onClick: onOpen,
+			className: "flex w-full min-w-0 cursor-pointer flex-col items-start gap-1 border-none bg-transparent px-2.5 py-2 text-left",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "w-full min-w-0 truncate text-meta text-primary",
+				title: card.file.path,
+				children: card.title
+			}), dated && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "font-mono text-micro text-disabled",
+				children: card.date.date
+			})]
+		})
+	});
+}
+/**
+* Renders a loop's generative-UI template (agent-authored HTML on `Job.ui`).
+*
+* Pipeline: interpolate `{{ ... }}` scalar bindings with live run data → DOMPurify
+* sanitize (allowlisted HTML subset; NO script/handlers/raw-svg) → parse to React,
+* swapping the irreducible data primitives for their renderers. Everything
+* else (A/B panels, stat tiles, layout, text) is the agent's own HTML — there are
+* NO opinionated panel components.
+*
+*   <loop-chart series="mrr:MRR:$, paid:Paid"></loop-chart>   multi-series trend chart
+*   <loop-embed match="reports/digest-*.md"></loop-embed>      newest matching artifact, embedded
+*   <loop-calendar match="reports/*.md"></loop-calendar>       month calendar of produced files
+*   <loop-kanban columns="a,b,c" match="notes/*.md">           typed products as a board, columns = type
+*
+* Registering a new primitive means moving three things together: LOOP_TAGS +
+* the sanitizer config below, the parser swap in `options`, and the skill's
+* authoring docs (references/evolve.md §3, run/edit.md) - the sanitizer
+* allowlist and the skill prose must never drift apart.
+*/
+var LOOP_TAGS = [
+	"loop-chart",
+	"loop-embed",
+	"loop-calendar",
+	"loop-kanban"
+];
+/** Data-bearing attributes on the loop-* primitives (all parsed by us, never markup). */
+var LOOP_ATTRS = [
+	"series",
+	"file",
+	"match",
+	"full",
+	"columns"
+];
+var ARTIFACT_RETRY_MAX = 3;
+var ARTIFACT_RETRY_MS = 4e3;
+var SANITIZE_CONFIG = {
+	ALLOWED_TAGS: [
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"p",
+		"b",
+		"strong",
+		"i",
+		"em",
+		"u",
+		"s",
+		"span",
+		"div",
+		"ul",
+		"ol",
+		"li",
+		"table",
+		"thead",
+		"tbody",
+		"tr",
+		"td",
+		"th",
+		"code",
+		"pre",
+		"br",
+		"hr",
+		"small",
+		"section",
+		"header",
+		"footer",
+		"a",
+		"figure",
+		"figcaption",
+		"mark",
+		...LOOP_TAGS
+	],
+	ALLOWED_ATTR: [
+		"style",
+		"class",
+		"href",
+		"title",
+		"target",
+		"rel",
+		...LOOP_ATTRS
+	],
+	ADD_TAGS: LOOP_TAGS,
+	CUSTOM_ELEMENT_HANDLING: {
+		tagNameCheck: new RegExp(`^(?:${LOOP_TAGS.join("|")})$`),
+		attributeNameCheck: new RegExp(`^(?:${LOOP_ATTRS.join("|")})$`),
+		allowCustomizedBuiltInElements: false
+	}
+};
+purify.addHook("uponSanitizeAttribute", (node, data) => {
+	const tag = node.nodeName?.toLowerCase();
+	if (tag && LOOP_TAGS.includes(tag) && LOOP_ATTRS.includes(data.attrName)) data.forceKeepAttr = true;
+});
+function LoopView({ html, runs, loopId, taskFile }) {
+	const clean = (0, import_react.useMemo)(() => {
+		const ctx = buildBindingContext(runs);
+		return purify.sanitize(resolveBindings(html, ctx), SANITIZE_CONFIG);
+	}, [html, runs]);
+	const data = (0, import_react.useMemo)(() => numericSeries(runs), [runs]);
+	const wantsArtifacts = /<loop-(embed|calendar|kanban)\b/.test(clean);
+	const [artifacts, setArtifacts] = (0, import_react.useState)(null);
+	const newestRunId = runs[0]?.id;
+	(0, import_react.useEffect)(() => {
+		if (!wantsArtifacts) return;
+		let alive = true;
+		let retries = 0;
+		let timer;
+		const load = () => {
+			getArtifacts({ data: { loopId } }).then((list) => alive && setArtifacts(list)).catch(() => {
+				if (alive && retries < ARTIFACT_RETRY_MAX) timer = setTimeout(load, ARTIFACT_RETRY_MS * ++retries);
+			});
+		};
+		load();
+		return () => {
+			alive = false;
+			clearTimeout(timer);
+		};
+	}, [
+		wantsArtifacts,
+		loopId,
+		newestRunId,
+		runs[0]?.running === true
+	]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "loopview text-[14px] leading-relaxed",
+		children: esm_default(clean, (0, import_react.useMemo)(() => ({ replace: (node) => {
+			if (!(node instanceof import_lib.Element)) return void 0;
+			const a = node.attribs ?? {};
+			if (node.name === "loop-chart") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopChart, {
+				data,
+				series: parseSeries(a.series)
+			});
+			if (node.name === "loop-embed") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopEmbed, {
+				loopId,
+				artifacts,
+				file: a.file,
+				match: a.match,
+				full: "full" in a,
+				taskFile
+			});
+			if (node.name === "loop-calendar") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopCalendar, {
+				loopId,
+				artifacts,
+				match: a.match,
+				taskFile
+			});
+			if (node.name === "loop-kanban") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoopKanban, {
+				loopId,
+				artifacts,
+				columns: a.columns,
+				match: a.match,
+				taskFile
+			});
+		} }), [
+			data,
+			loopId,
+			taskFile,
+			artifacts
+		]))
+	});
+}
+//#endregion
+export { LoopView };