markform 0.1.21 → 0.1.22

package/dist/fillRecordRenderer-CruJrLkj.mjs

@@ -0,0 +1,1256 @@
+
+import { r as friendlyUrlAbbrev, t as formatBareUrlsAsHtmlLinks } from "./urlFormat-lls7CsEP.mjs";
+import YAML from "yaml";
+
+//#region src/render/renderUtils.ts
+/**
+* Rendering utility functions for HTML generation.
+*
+* Pure utility functions used across all renderers. No CLI or server dependencies.
+*/
+/**
+* Escape HTML special characters.
+*/
+function escapeHtml(str) {
+	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+/**
+* Format milliseconds as human-readable duration.
+*/
+function formatDuration(ms) {
+	if (ms < 1e3) return `${ms.toFixed(0)}ms`;
+	if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+	return `${Math.floor(ms / 6e4)}m ${(ms % 6e4 / 1e3).toFixed(0)}s`;
+}
+/**
+* Format token count with K suffix for large numbers.
+*/
+function formatTokens(count) {
+	if (count >= 1e4) return `${(count / 1e3).toFixed(1)}k`;
+	if (count >= 1e3) return `${(count / 1e3).toFixed(1)}k`;
+	return count.toLocaleString();
+}
+
+//#endregion
+//#region src/render/contentRenderers.ts
+/**
+* Format a checkbox state for display.
+*/
+function formatCheckboxState(state) {
+	switch (state) {
+		case "done": return "<span class=\"checkbox checked\">☑</span>";
+		case "todo": return "<span class=\"checkbox unchecked\">☐</span>";
+		case "active": return "<span class=\"state-badge state-active\">●</span>";
+		case "incomplete": return "<span class=\"state-badge state-incomplete\">○</span>";
+		case "na": return "<span class=\"state-badge state-na\">—</span>";
+		case "yes": return "<span class=\"checkbox checked\">☑</span>";
+		case "no": return "<span class=\"checkbox unchecked\">☐</span>";
+		case "unfilled": return "<span class=\"state-badge state-unfilled\">?</span>";
+		default: return `<span class="state-badge">${escapeHtml(state)}</span>`;
+	}
+}
+/**
+* Render a field value for the View tab.
+*/
+function renderViewFieldValue(field, value, isSkipped, skipReason) {
+	if (isSkipped) return `<div class="view-field-empty">${skipReason ? `(skipped: ${escapeHtml(skipReason)})` : "(skipped)"}</div>`;
+	if (value === void 0) return "<div class=\"view-field-empty\">(not filled)</div>";
+	switch (field.kind) {
+		case "string": {
+			const v = value.kind === "string" ? value.value : null;
+			if (v === null || v === "") return "<div class=\"view-field-empty\">(not filled)</div>";
+			return `<div class="view-field-value">${formatBareUrlsAsHtmlLinks(v, escapeHtml)}</div>`;
+		}
+		case "number": {
+			const v = value.kind === "number" ? value.value : null;
+			if (v === null) return "<div class=\"view-field-empty\">(not filled)</div>";
+			return `<div class="view-field-value">${v}</div>`;
+		}
+		case "string_list": {
+			const items = value.kind === "string_list" ? value.items : [];
+			if (items.length === 0) return "<div class=\"view-field-empty\">(not filled)</div>";
+			return `<div class="view-field-value"><ul>${items.map((i) => `<li>${formatBareUrlsAsHtmlLinks(i, escapeHtml)}</li>`).join("")}</ul></div>`;
+		}
+		case "single_select": {
+			const selected = value.kind === "single_select" ? value.selected : null;
+			if (selected === null) return "<div class=\"view-field-empty\">(not filled)</div>";
+			return `<div class="view-field-value">${escapeHtml(field.options.find((o) => o.id === selected)?.label ?? selected)}</div>`;
+		}
+		case "multi_select": {
+			const selected = value.kind === "multi_select" ? value.selected : [];
+			return `<div class="view-field-value"><ul class="checkbox-list">${field.options.map((opt) => {
+				return `<li class="checkbox-item">${selected.includes(opt.id) ? "<span class=\"checkbox checked\">☑</span>" : "<span class=\"checkbox unchecked\">☐</span>"} ${escapeHtml(opt.label)}</li>`;
+			}).join("")}</ul></div>`;
+		}
+		case "checkboxes": {
+			const values = value.kind === "checkboxes" ? value.values : {};
+			const mode = field.checkboxMode ?? "multi";
+			return `<div class="view-field-value"><ul class="checkbox-list">${field.options.map((opt) => {
+				const state = values[opt.id] ?? (mode === "explicit" ? "unfilled" : "todo");
+				if (mode === "simple") return `<li class="checkbox-item">${state === "done" ? "<span class=\"checkbox checked\">☑</span>" : "<span class=\"checkbox unchecked\">☐</span>"} ${escapeHtml(opt.label)}</li>`;
+				return `<li class="checkbox-item">${formatCheckboxState(state)} ${escapeHtml(opt.label)}</li>`;
+			}).join("")}</ul></div>`;
+		}
+		case "url": {
+			const v = value.kind === "url" ? value.value : null;
+			if (v === null || v === "") return "<div class=\"view-field-empty\">(not filled)</div>";
+			const domain = friendlyUrlAbbrev(v);
+			return `<div class="view-field-value"><a href="${escapeHtml(v)}" target="_blank" class="url-link" data-url="${escapeHtml(v)}">${escapeHtml(domain)}</a></div>`;
+		}
+		case "url_list": {
+			const items = value.kind === "url_list" ? value.items : [];
+			if (items.length === 0) return "<div class=\"view-field-empty\">(not filled)</div>";
+			return `<div class="view-field-value"><ul>${items.map((u) => {
+				const domain = friendlyUrlAbbrev(u);
+				return `<li><a href="${escapeHtml(u)}" target="_blank" class="url-link" data-url="${escapeHtml(u)}">${escapeHtml(domain)}</a></li>`;
+			}).join("")}</ul></div>`;
+		}
+		case "date": {
+			const v = value.kind === "date" ? value.value : null;
+			if (v === null || v === "") return "<div class=\"view-field-empty\">(not filled)</div>";
+			return `<div class="view-field-value">${escapeHtml(v)}</div>`;
+		}
+		case "year": {
+			const v = value.kind === "year" ? value.value : null;
+			if (v === null) return "<div class=\"view-field-empty\">(not filled)</div>";
+			return `<div class="view-field-value">${v}</div>`;
+		}
+		case "table": {
+			const rows = value.kind === "table" ? value.rows : [];
+			if (rows.length === 0) return "<div class=\"view-field-empty\">(no data)</div>";
+			let tableHtml = "<div class=\"table-container\"><table class=\"data-table\">";
+			tableHtml += "<thead><tr>";
+			for (const col of field.columns) tableHtml += `<th>${escapeHtml(col.label)}</th>`;
+			tableHtml += "</tr></thead><tbody>";
+			for (const row of rows) {
+				tableHtml += "<tr>";
+				for (const col of field.columns) {
+					const cell = row[col.id];
+					let cellValue = "";
+					let cellHtml = "";
+					if (cell?.state === "answered" && cell.value !== void 0 && cell.value !== null) {
+						cellValue = String(cell.value);
+						if (col.type === "url" && cellValue) {
+							const domain = friendlyUrlAbbrev(cellValue);
+							cellHtml = `<a href="${escapeHtml(cellValue)}" target="_blank" class="url-link" data-url="${escapeHtml(cellValue)}">${escapeHtml(domain)}</a>`;
+						} else cellHtml = formatBareUrlsAsHtmlLinks(cellValue, escapeHtml);
+					}
+					tableHtml += `<td>${cellHtml}</td>`;
+				}
+				tableHtml += "</tr>";
+			}
+			tableHtml += "</tbody></table></div>";
+			return tableHtml;
+		}
+		default: {
+			const _exhaustive = field;
+			throw new Error(`Unhandled field kind: ${_exhaustive.kind}`);
+		}
+	}
+}
+/**
+* Render form view content (read-only display of form fields).
+* Used for View tab content.
+*/
+function renderViewContent(form) {
+	const { schema, responsesByFieldId } = form;
+	let html = "<div class=\"view-content\">";
+	for (const group of schema.groups) {
+		const groupTitle = group.title ?? group.id;
+		html += `<div class="view-group"><h2>${escapeHtml(groupTitle)}</h2>`;
+		for (const field of group.children) {
+			const response = responsesByFieldId[field.id];
+			const value = response?.state === "answered" ? response.value : void 0;
+			const isSkipped = response?.state === "skipped";
+			const skipReason = isSkipped ? response?.reason : void 0;
+			html += "<div class=\"view-field\">";
+			html += `<div class="view-field-label">${escapeHtml(field.label)}`;
+			html += ` <span class="type-badge">${field.kind}</span>`;
+			if (field.required) html += " <span class=\"required\">*</span>";
+			if (isSkipped) {
+				const reasonText = skipReason ? `Skipped: ${escapeHtml(skipReason)}` : "Skipped";
+				html += ` <span class="skipped-badge">${reasonText}</span>`;
+			}
+			html += "</div>";
+			html += renderViewFieldValue(field, value, isSkipped, skipReason);
+			html += "</div>";
+		}
+		html += "</div>";
+	}
+	html += "</div>";
+	return html;
+}
+/**
+* Highlight a single line of source code (Markdown + Jinja).
+*/
+function highlightSourceLine(line) {
+	let result = escapeHtml(line);
+	result = result.replace(/(\{%\s*)([a-zA-Z_/]+)(\s+[^%]*)?(%\})/g, (_, open, keyword, attrs, close) => {
+		let attrHtml = "";
+		if (attrs) attrHtml = attrs.replace(/([a-zA-Z_]+)(=)("[^"]*"|&#039;[^&#]*&#039;|[^\s%]+)?/g, (_m, attrName, eq, attrValue) => {
+			return `<span class="syn-jinja-attr">${attrName}</span>${eq}${attrValue ? `<span class="syn-jinja-value">${attrValue}</span>` : ""}`;
+		});
+		return `<span class="syn-jinja-tag">${open}</span><span class="syn-jinja-keyword">${keyword}</span>${attrHtml}<span class="syn-jinja-tag">${close}</span>`;
+	});
+	result = result.replace(/(\{#)(.*?)(#\})/g, `<span class="syn-comment">$1$2$3</span>`);
+	result = result.replace(/^(#{1,6}\s.*)$/gm, "<span class=\"syn-md-header\">$1</span>");
+	if (result === "---") result = "<span class=\"syn-comment\">---</span>";
+	return result;
+}
+/**
+* Render source content with Markdown and Jinja syntax highlighting.
+* Used for Source tab content.
+*/
+function renderSourceContent(content) {
+	return `<pre>${content.split("\n").map((line) => highlightSourceLine(line)).join("\n")}</pre>`;
+}
+/**
+* Format inline markdown (bold, italic, code, links, checkboxes).
+* Also auto-links bare URLs for consistency.
+*/
+function formatInlineMarkdown(text) {
+	let result = escapeHtml(text);
+	result = result.replace(/\[x\]/gi, "<span class=\"checkbox checked\">☑</span>");
+	result = result.replace(/\[ \]/g, "<span class=\"checkbox unchecked\">☐</span>");
+	result = result.replace(/`([^`]+)`/g, "<code>$1</code>");
+	result = result.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+	result = result.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+	result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, linkText, url) => {
+		const cleanUrl = url.replace(/&amp;/g, "&");
+		return `<a href="${cleanUrl}" target="_blank" class="url-link" data-url="${cleanUrl}">${linkText}</a>`;
+	});
+	result = result.replace(/(?<!href="|data-url="|">|\]\()(?:https?:\/\/|www\.)[^\s<>"]+(?<![.,;:!?'")])/g, (url) => {
+		const cleanUrl = url.replace(/&amp;/g, "&");
+		const fullUrl = cleanUrl.startsWith("www.") ? `https://${cleanUrl}` : cleanUrl;
+		const display = friendlyUrlAbbrev(fullUrl);
+		return `<a href="${escapeHtml(fullUrl)}" target="_blank" class="url-link" data-url="${escapeHtml(fullUrl)}">${escapeHtml(display)}</a>`;
+	});
+	return result;
+}
+/**
+* Render markdown content (content only, no page wrapper).
+* Used for tab content.
+*/
+function renderMarkdownContent(content) {
+	const lines = content.split("\n");
+	let html = "<div class=\"markdown-content\">";
+	let inParagraph = false;
+	let inCodeBlock = false;
+	let codeBlockContent = "";
+	let inUnorderedList = false;
+	let inOrderedList = false;
+	let inTable = false;
+	let tableHeaderDone = false;
+	const closeList = () => {
+		if (inUnorderedList) {
+			html += "</ul>";
+			inUnorderedList = false;
+		}
+		if (inOrderedList) {
+			html += "</ol>";
+			inOrderedList = false;
+		}
+	};
+	const closeTable = () => {
+		if (inTable) {
+			html += "</tbody></table></div>";
+			inTable = false;
+			tableHeaderDone = false;
+		}
+	};
+	const isTableRow = (line) => {
+		const trimmed = line.trim();
+		return trimmed.startsWith("|") && trimmed.endsWith("|") && trimmed.includes("|");
+	};
+	const isTableSeparator = (line) => {
+		const trimmed = line.trim();
+		return /^\|[\s-:|]+\|$/.test(trimmed);
+	};
+	const parseTableCells = (line) => {
+		return line.trim().slice(1, -1).split("|").map((cell) => cell.trim());
+	};
+	for (const line of lines) {
+		const trimmed = line.trim();
+		if (trimmed.startsWith("```")) {
+			if (inCodeBlock) {
+				html += `<pre><code>${escapeHtml(codeBlockContent.trim())}</code></pre>`;
+				codeBlockContent = "";
+				inCodeBlock = false;
+			} else {
+				if (inParagraph) {
+					html += "</p>";
+					inParagraph = false;
+				}
+				closeList();
+				closeTable();
+				inCodeBlock = true;
+			}
+			continue;
+		}
+		if (inCodeBlock) {
+			codeBlockContent += line + "\n";
+			continue;
+		}
+		if (isTableRow(trimmed)) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			closeList();
+			if (isTableSeparator(trimmed)) {
+				tableHeaderDone = true;
+				continue;
+			}
+			const cells = parseTableCells(trimmed);
+			if (!inTable) {
+				html += "<div class=\"table-container\"><table class=\"data-table\"><thead><tr>";
+				for (const cell of cells) html += `<th>${formatInlineMarkdown(cell)}</th>`;
+				html += "</tr></thead><tbody>";
+				inTable = true;
+			} else if (tableHeaderDone) {
+				html += "<tr>";
+				for (const cell of cells) html += `<td>${formatInlineMarkdown(cell)}</td>`;
+				html += "</tr>";
+			}
+			continue;
+		}
+		if (inTable && !isTableRow(trimmed)) closeTable();
+		if (trimmed.startsWith("# ")) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			closeList();
+			html += `<h2>${formatInlineMarkdown(trimmed.slice(2))}</h2>`;
+		} else if (trimmed.startsWith("## ")) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			closeList();
+			html += `<h3>${formatInlineMarkdown(trimmed.slice(3))}</h3>`;
+		} else if (trimmed.startsWith("### ")) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			closeList();
+			html += `<h4>${formatInlineMarkdown(trimmed.slice(4))}</h4>`;
+		} else if (trimmed.startsWith("#### ")) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			closeList();
+			html += `<h5>${formatInlineMarkdown(trimmed.slice(5))}</h5>`;
+		} else if (trimmed.startsWith("- ") || trimmed.startsWith("* ")) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			if (inOrderedList) {
+				html += "</ol>";
+				inOrderedList = false;
+			}
+			if (!inUnorderedList) {
+				html += "<ul>";
+				inUnorderedList = true;
+			}
+			const itemContent = trimmed.slice(2);
+			const liClass = /^\[[ xX]\]/.test(itemContent) ? " class=\"checkbox-item\"" : "";
+			html += `<li${liClass}>${formatInlineMarkdown(itemContent)}</li>`;
+		} else if (/^\d+\.\s/.test(trimmed)) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			if (inUnorderedList) {
+				html += "</ul>";
+				inUnorderedList = false;
+			}
+			if (!inOrderedList) {
+				html += "<ol>";
+				inOrderedList = true;
+			}
+			const text = trimmed.replace(/^\d+\.\s/, "");
+			html += `<li>${formatInlineMarkdown(text)}</li>`;
+		} else if (trimmed === "") {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			closeList();
+		} else {
+			closeList();
+			if (!inParagraph) {
+				html += "<p>";
+				inParagraph = true;
+			} else html += "<br>";
+			html += formatInlineMarkdown(trimmed);
+		}
+	}
+	if (inParagraph) html += "</p>";
+	closeList();
+	closeTable();
+	html += "</div>";
+	return html;
+}
+/**
+* Highlight a YAML value with appropriate syntax class.
+*/
+function highlightYamlValue(value) {
+	const trimmed = value.trim();
+	if (trimmed === "true" || trimmed === "false") return `<span class="syn-bool">${escapeHtml(value)}</span>`;
+	if (trimmed === "null" || trimmed === "~") return `<span class="syn-null">${escapeHtml(value)}</span>`;
+	if (/^-?\d+\.?\d*$/.test(trimmed)) return `<span class="syn-number">${escapeHtml(value)}</span>`;
+	if (trimmed.startsWith("\"") && trimmed.endsWith("\"") || trimmed.startsWith("'") && trimmed.endsWith("'")) return `<span class="syn-string">${escapeHtml(value)}</span>`;
+	return `<span class="syn-string">${escapeHtml(value)}</span>`;
+}
+/**
+* Render YAML content with syntax highlighting (content only, no page wrapper).
+* Used for tab content.
+*/
+function renderYamlContent(content) {
+	return `<pre>${content.split("\n").map((line) => {
+		if (line.trim().startsWith("#")) return `<span class="syn-comment">${escapeHtml(line)}</span>`;
+		const colonIndex = line.indexOf(":");
+		if (colonIndex > 0 && !line.trim().startsWith("-")) {
+			const key = escapeHtml(line.slice(0, colonIndex));
+			const afterColon = line.slice(colonIndex + 1).trim();
+			const colonAndSpace = escapeHtml(line.slice(colonIndex, colonIndex + 1));
+			if (afterColon === "") return `<span class="syn-key">${key}</span>${colonAndSpace}`;
+			const valueStart = line.indexOf(afterColon, colonIndex);
+			return `<span class="syn-key">${key}</span>${escapeHtml(line.slice(colonIndex, valueStart))}${highlightYamlValue(afterColon)}`;
+		}
+		if (line.trim().startsWith("-")) {
+			const dashIndex = line.indexOf("-");
+			const beforeDash = escapeHtml(line.slice(0, dashIndex));
+			const afterDash = line.slice(dashIndex + 1).trim();
+			if (afterDash === "") return `${beforeDash}-`;
+			return `${beforeDash}- ${highlightYamlValue(afterDash)}`;
+		}
+		return escapeHtml(line);
+	}).join("\n")}</pre>`;
+}
+/**
+* Render JSON content with syntax highlighting (content only, no page wrapper).
+* Used for tab content.
+*/
+function renderJsonContent(content) {
+	let formatted;
+	try {
+		const parsed = JSON.parse(content);
+		formatted = JSON.stringify(parsed, null, 2);
+	} catch {
+		formatted = content;
+	}
+	return `<pre>${formatted.replace(/"([^"]+)":/g, "<span class=\"syn-key\">\"$1\"</span>:").replace(/: "([^"]*)"/g, ": <span class=\"syn-string\">\"$1\"</span>").replace(/: (-?\d+\.?\d*)/g, ": <span class=\"syn-number\">$1</span>").replace(/: (true|false)/g, ": <span class=\"syn-bool\">$1</span>").replace(/: (null)/g, ": <span class=\"syn-null\">$1</span>")}</pre>`;
+}
+
+//#endregion
+//#region src/render/fillRecordRenderer.ts
+/**
+* Fill record HTML renderer and associated styles/scripts.
+*
+* Renders FillRecord data as an interactive dashboard with Gantt timeline,
+* progress bars, tool summaries, and turn details. No CLI or server dependencies.
+*/
+/**
+* JavaScript for fill record interactive features.
+* Consumers should include this in a <script> tag on their page.
+* Provides: frShowTip(el), frHideTip(), frCopyYaml(btn)
+*/
+const FILL_RECORD_SCRIPTS = `
+// Copy YAML content handler for Fill Record tab (must be global for dynamically loaded content)
+function frCopyYaml(btn) {
+  const pre = btn.parentElement.querySelector('pre');
+  navigator.clipboard.writeText(pre.textContent).then(() => {
+    const orig = btn.textContent;
+    btn.textContent = 'Copied!';
+    setTimeout(() => btn.textContent = orig, 1500);
+  });
+}
+
+// Tooltip handlers for Fill Record visualizations (must be global for dynamically loaded content)
+function frShowTip(el) {
+  var tip = document.getElementById('fr-tooltip');
+  if (tip && el.dataset.tooltip) {
+    tip.textContent = el.dataset.tooltip;
+    // Position tooltip centered above the element
+    var rect = el.getBoundingClientRect();
+    tip.style.left = (rect.left + rect.width / 2) + 'px';
+    tip.style.top = (rect.top - 8) + 'px';
+    tip.style.transform = 'translate(-50%, -100%)';
+    tip.classList.add('visible');
+  }
+}
+function frHideTip() {
+  var tip = document.getElementById('fr-tooltip');
+  if (tip) tip.classList.remove('visible');
+}
+`;
+/**
+* Format a patch value for display.
+* Shows full content - the container has max-height with scroll for long values.
+*/
+function formatPatchValue(value) {
+	if (value === null || value === void 0) return "<em class=\"fr-turn__patch-value--clear\">(cleared)</em>";
+	if (typeof value === "string") return escapeHtml(value);
+	if (typeof value === "number" || typeof value === "boolean") return String(value);
+	return escapeHtml(JSON.stringify(value, null, 2));
+}
+/**
+* Render patches from a fill_form tool call input.
+* Returns HTML for the patch details section.
+*/
+function renderPatchDetails(input) {
+	const patches = input.patches;
+	if (!Array.isArray(patches) || patches.length === 0) return "";
+	return `<div class="fr-turn__patches">${patches.map((patch) => {
+		if (!patch || typeof patch !== "object") return "";
+		const p = patch;
+		const op = typeof p.op === "string" ? p.op : "unknown";
+		const fieldId = typeof p.fieldId === "string" ? p.fieldId : typeof p.noteId === "string" ? p.noteId : "";
+		const opLabel = op.replace(/_/g, " ");
+		let valueHtml = "";
+		if (op === "skip_field") valueHtml = "<em class=\"fr-turn__patch-value--skip\">(skipped)</em>";
+		else if (op === "abort_field") valueHtml = "<em class=\"fr-turn__patch-value--skip\">(aborted)</em>";
+		else if (op === "clear_field") valueHtml = "<em class=\"fr-turn__patch-value--clear\">(cleared)</em>";
+		else if ("value" in p) valueHtml = formatPatchValue(p.value);
+		else if ("values" in p) valueHtml = formatPatchValue(p.values);
+		else if ("rows" in p) valueHtml = formatPatchValue(p.rows);
+		return `
+        <div class="fr-turn__patch">
+          <span class="fr-turn__patch-field">${escapeHtml(fieldId)}</span>
+          <span class="fr-turn__patch-op">${escapeHtml(opLabel)}</span>
+          <span class="fr-turn__patch-value">${valueHtml}</span>
+        </div>
+      `;
+	}).filter(Boolean).join("")}</div>`;
+}
+/**
+* Render a single tool call with enhanced details.
+* Shows query for web_search, patch details for fill_form.
+*/
+function renderToolCall(tc) {
+	const hasError = !!tc.result?.error;
+	const icon = tc.success ? "✓" : "✕";
+	const errorClass = hasError ? " fr-turn__tool--error" : "";
+	let resultSummary = "";
+	if (hasError) resultSummary = `Error: ${escapeHtml(tc.result?.error ?? "")}`;
+	else if (tc.result?.resultCount !== void 0) resultSummary = `${tc.result.resultCount} results`;
+	else resultSummary = "OK";
+	let detailHtml = "";
+	if (tc.tool === "web_search" && typeof tc.input.query === "string") detailHtml = ` <span class="fr-turn__query">"${escapeHtml(tc.input.query)}"</span>`;
+	const toolLine = `<li class="fr-turn__tool${errorClass}">${icon} <strong>${escapeHtml(tc.tool)}</strong>${detailHtml}: ${resultSummary} (${formatDuration(tc.durationMs)})</li>`;
+	if (tc.tool === "fill_form" && tc.input.patches) {
+		const patchDetails = renderPatchDetails(tc.input);
+		if (patchDetails) return toolLine + patchDetails;
+	}
+	return toolLine;
+}
+/**
+* CSS styles for fill record visualization.
+* Uses CSS custom properties for theming (supports dark mode via prefers-color-scheme).
+* Designed to be lightweight, reusable, and embeddable.
+*/
+const FILL_RECORD_STYLES = `
+<style>
+  .fr-dashboard {
+    --fr-bg: #ffffff;
+    --fr-bg-muted: #f9fafb;
+    --fr-bg-subtle: #f3f4f6;
+    --fr-border: #e5e7eb;
+    --fr-text: #111827;
+    --fr-text-muted: #6b7280;
+    --fr-primary: #3b82f6;
+    --fr-success: #22c55e;
+    --fr-warning: #f59e0b;
+    --fr-error: #ef4444;
+    --fr-info: #6b7280;
+
+    /* Typography - consolidated to fewer sizes */
+    --fr-font-sm: 13px;
+    --fr-font-base: 14px;
+    --fr-font-lg: 20px;
+
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    padding: 20px;
+    max-width: 900px;
+    margin: 0 auto;
+    color: var(--fr-text);
+    line-height: 1.5;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .fr-dashboard {
+      --fr-bg: #1f2937;
+      --fr-bg-muted: #374151;
+      --fr-bg-subtle: #4b5563;
+      --fr-border: #4b5563;
+      --fr-text: #f9fafb;
+      --fr-text-muted: #9ca3af;
+    }
+  }
+
+  .fr-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--fr-border);
+  }
+  .fr-header__model {
+    font-weight: 600;
+    font-size: var(--fr-font-base);
+    color: var(--fr-text);
+  }
+  .fr-header__time {
+    font-weight: 600;
+    font-size: var(--fr-font-base);
+    color: var(--fr-text);
+  }
+
+  .fr-banner {
+    border-radius: 8px;
+    padding: 12px 16px;
+    margin-bottom: 20px;
+    font-size: var(--fr-font-base);
+  }
+  .fr-banner--error {
+    background: color-mix(in srgb, var(--fr-error) 10%, var(--fr-bg));
+    border: 1px solid var(--fr-error);
+  }
+  .fr-banner--warning {
+    background: color-mix(in srgb, var(--fr-warning) 10%, var(--fr-bg));
+    border: 1px solid var(--fr-warning);
+  }
+
+  .fr-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+    gap: 16px;
+    margin-bottom: 24px;
+  }
+
+  .fr-card {
+    padding: 16px;
+    background: var(--fr-bg-muted);
+    border-radius: 8px;
+    text-align: center;
+  }
+  .fr-card__label {
+    font-size: var(--fr-font-sm);
+    color: var(--fr-text-muted);
+    margin-bottom: 4px;
+  }
+  .fr-card__value {
+    font-size: var(--fr-font-lg);
+    font-weight: 600;
+  }
+  .fr-card__sub {
+    font-size: var(--fr-font-sm);
+    color: var(--fr-text-muted);
+    margin-top: 2px;
+  }
+
+  .fr-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 10px;
+    border-radius: 4px;
+    font-weight: 600;
+    font-size: var(--fr-font-sm);
+  }
+  .fr-badge--completed { background: color-mix(in srgb, var(--fr-success) 15%, transparent); color: var(--fr-success); }
+  .fr-badge--partial { background: color-mix(in srgb, var(--fr-warning) 15%, transparent); color: var(--fr-warning); }
+  .fr-badge--cancelled { background: color-mix(in srgb, var(--fr-info) 15%, transparent); color: var(--fr-info); }
+  .fr-badge--failed { background: color-mix(in srgb, var(--fr-error) 15%, transparent); color: var(--fr-error); }
+
+  .fr-section {
+    margin-bottom: 24px;
+  }
+  .fr-section__title {
+    font-size: var(--fr-font-base);
+    font-weight: 500;
+    color: var(--fr-text);
+    margin-bottom: 8px;
+  }
+
+  .fr-progress {
+    background: var(--fr-border);
+    border-radius: 4px;
+    height: 20px;
+    overflow: hidden;
+  }
+  .fr-progress__bar {
+    background: var(--fr-primary);
+    height: 100%;
+    transition: width 0.3s ease;
+  }
+  .fr-progress__text {
+    font-size: var(--fr-font-sm);
+    color: var(--fr-text-muted);
+    margin-top: 4px;
+  }
+
+  .fr-progress__segments {
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
+  .fr-progress-segment {
+    height: 100%;
+    min-width: 2px;
+    border-right: 2px solid var(--fr-bg);
+    cursor: pointer;
+  }
+  .fr-progress-segment:last-child {
+    border-right: none;
+  }
+  .fr-progress-segment--filled {
+    background: var(--fr-primary);
+  }
+  .fr-progress-segment--filled:hover {
+    background: color-mix(in srgb, var(--fr-primary) 70%, white);
+  }
+  .fr-progress-segment--prefilled {
+    background: #8b5cf6;
+  }
+  .fr-progress-segment--prefilled:hover {
+    background: color-mix(in srgb, #8b5cf6 70%, white);
+  }
+  .fr-progress-segment--skipped {
+    background: var(--fr-warning);
+  }
+  .fr-progress-segment--skipped:hover {
+    background: color-mix(in srgb, var(--fr-warning) 70%, white);
+  }
+  .fr-progress-segment--empty {
+    background: var(--fr-border);
+  }
+
+  /* Gantt chart - each call on its own row */
+  .fr-gantt {
+    margin-bottom: 8px;
+  }
+  .fr-gantt__row {
+    display: flex;
+    align-items: center;
+    height: 20px;
+    margin-bottom: 3px;
+  }
+  .fr-gantt__label {
+    width: 90px;
+    flex-shrink: 0;
+    font-size: 11px;
+    color: var(--fr-text-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: 8px;
+    text-align: right;
+  }
+  .fr-gantt__track {
+    flex: 1;
+    background: var(--fr-bg-subtle);
+    border-radius: 3px;
+    height: 14px;
+    position: relative;
+  }
+  .fr-gantt__bar {
+    position: absolute;
+    top: 2px;
+    height: calc(100% - 4px);
+    min-width: 6px;
+    border-radius: 2px;
+    cursor: pointer;
+  }
+  .fr-gantt__bar:hover {
+    filter: brightness(1.15);
+  }
+  .fr-gantt__bar--llm {
+    background: var(--fr-primary);
+  }
+  .fr-gantt__bar--tool {
+    background: var(--fr-success);
+  }
+  .fr-gantt__legend {
+    display: flex;
+    gap: 16px;
+    font-size: var(--fr-font-sm);
+    color: var(--fr-text-muted);
+    margin-top: 12px;
+    padding-top: 8px;
+    border-top: 1px solid var(--fr-border);
+  }
+  .fr-gantt__legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .fr-gantt__legend-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+  }
+  .fr-gantt__legend-dot--llm { background: var(--fr-primary); }
+  .fr-gantt__legend-dot--tool { background: var(--fr-success); }
+
+  /* Tooltip container */
+  .fr-tooltip {
+    position: fixed;
+    background: #1f2937;
+    color: #f9fafb;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: var(--fr-font-sm);
+    white-space: pre-line;
+    pointer-events: none;
+    z-index: 1000;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.05s ease-out, visibility 0.05s ease-out;
+  }
+  .fr-tooltip.visible {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 0.2s ease-in, visibility 0.2s ease-in;
+  }
+
+  .fr-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--fr-font-sm);
+  }
+  .fr-table th {
+    padding: 8px 12px;
+    text-align: left;
+    font-weight: 600;
+    background: var(--fr-bg-subtle);
+  }
+  .fr-table th:not(:first-child) { text-align: center; }
+  .fr-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--fr-border);
+  }
+  .fr-table td:not(:first-child) { text-align: center; }
+
+  .fr-details {
+    border: none;
+    background: none;
+  }
+  .fr-details > summary {
+    cursor: pointer;
+    font-size: var(--fr-font-base);
+    font-weight: 500;
+    color: var(--fr-text);
+    padding: 8px 0;
+    list-style: none;
+  }
+  .fr-details > summary::-webkit-details-marker { display: none; }
+  .fr-details > summary::before {
+    content: '▶';
+    display: inline-block;
+    margin-right: 8px;
+    transition: transform 0.2s;
+    font-size: 11px;
+  }
+  .fr-details[open] > summary::before {
+    transform: rotate(90deg);
+  }
+  .fr-details__content {
+    background: var(--fr-bg-muted);
+    border-radius: 8px;
+    padding: 16px;
+    margin-top: 8px;
+  }
+
+  .fr-turn {
+    margin-bottom: 8px;
+    background: var(--fr-bg-muted);
+    border-radius: 4px;
+  }
+  .fr-turn summary {
+    cursor: pointer;
+    padding: 12px;
+    font-size: var(--fr-font-sm);
+    list-style: none;
+  }
+  .fr-turn summary::-webkit-details-marker { display: none; }
+  .fr-turn summary::before {
+    content: '▶';
+    display: inline-block;
+    margin-right: 8px;
+    transition: transform 0.2s;
+    font-size: 11px;
+  }
+  .fr-turn[open] summary::before {
+    transform: rotate(90deg);
+  }
+  .fr-turn__content {
+    padding: 0 12px 12px;
+  }
+  .fr-turn__tools {
+    margin: 0;
+    padding-left: 20px;
+    list-style: none;
+  }
+  .fr-turn__tool {
+    margin: 4px 0;
+    font-size: var(--fr-font-sm);
+    color: var(--fr-text-muted);
+  }
+  .fr-turn__tool--error { color: var(--fr-error); }
+
+  .fr-turn__query {
+    color: var(--fr-primary);
+    font-style: italic;
+  }
+
+  .fr-turn__patches {
+    margin: 4px 0 8px 20px;
+    padding: 8px 12px;
+    background: var(--fr-bg-subtle);
+    border-radius: 4px;
+    font-size: var(--fr-font-sm);
+  }
+  .fr-turn__patch {
+    margin: 4px 0;
+    padding: 4px 0;
+    border-bottom: 1px solid var(--fr-border);
+  }
+  .fr-turn__patch:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+  .fr-turn__patch-field {
+    font-weight: 600;
+    color: var(--fr-text);
+  }
+  .fr-turn__patch-op {
+    font-size: 11px;
+    padding: 1px 4px;
+    border-radius: 2px;
+    background: var(--fr-bg-muted);
+    color: var(--fr-text-muted);
+    margin-left: 6px;
+  }
+  .fr-turn__patch-value {
+    display: block;
+    margin-top: 2px;
+    color: var(--fr-text-muted);
+    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+    word-break: break-word;
+    white-space: pre-wrap;
+    max-height: 200px;
+    overflow: auto;
+  }
+  .fr-turn__patch-value--skip {
+    color: var(--fr-warning);
+    font-style: italic;
+  }
+  .fr-turn__patch-value--clear {
+    color: var(--fr-info);
+    font-style: italic;
+  }
+
+  .fr-raw {
+    position: relative;
+  }
+  .fr-copy-btn {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    padding: 4px 8px;
+    font-size: var(--fr-font-sm);
+    background: var(--fr-bg-subtle);
+    border: 1px solid var(--fr-border);
+    border-radius: 4px;
+    cursor: pointer;
+    color: var(--fr-text-muted);
+    transition: all 0.15s;
+  }
+  .fr-copy-btn:hover {
+    background: var(--fr-border);
+    color: var(--fr-text);
+  }
+  .fr-copy-btn:active {
+    transform: scale(0.95);
+  }
+
+  /* Scoped pre styles to override parent .tab-content pre */
+  .fr-dashboard pre {
+    background: var(--fr-bg-muted);
+    color: var(--fr-text);
+    padding: 1rem;
+    border-radius: 6px;
+    border: 1px solid var(--fr-border);
+    overflow-x: auto;
+    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+    font-size: 0.85rem;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  /* Override syntax highlighting colors for dark mode compatibility */
+  .fr-dashboard .syn-key { color: var(--fr-primary); }
+  .fr-dashboard .syn-string { color: var(--fr-success); }
+  .fr-dashboard .syn-number { color: var(--fr-primary); }
+  .fr-dashboard .syn-bool { color: var(--fr-warning); }
+  .fr-dashboard .syn-null { color: var(--fr-error); }
+
+  @media (max-width: 600px) {
+    .fr-dashboard { padding: 12px; }
+    .fr-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
+    .fr-card { padding: 12px; }
+    .fr-card__value { font-size: 18px; }
+    .fr-table { font-size: var(--fr-font-sm); }
+    .fr-table th, .fr-table td { padding: 6px 8px; }
+  }
+</style>
+`;
+/**
+* Render fill record content (dashboard-style visualization).
+* Uses CSS custom properties for theming with automatic dark mode support.
+* Mobile responsive with grid-based layout.
+*
+* @public Exported for testing and reuse.
+*/
+function renderFillRecordContent(record) {
+	const { status, statusDetail, startedAt, durationMs, llm, formProgress, toolSummary, timeline } = record;
+	const startDate = new Date(startedAt);
+	const formattedDate = startDate.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric"
+	});
+	const formattedTime = startDate.toLocaleTimeString("en-US", {
+		hour: "numeric",
+		minute: "2-digit",
+		hour12: true
+	});
+	const headerInfo = `
+    <div class="fr-header">
+      <div class="fr-header__model">${escapeHtml(llm.model)}</div>
+      <div class="fr-header__time">${formattedDate} at ${formattedTime}</div>
+    </div>
+  `;
+	let statusBanner = "";
+	if (status !== "completed") {
+		const bannerClass = status === "failed" ? "fr-banner--error" : "fr-banner--warning";
+		const icon = status === "failed" ? "✕" : "⚠";
+		const title = status === "failed" ? "FAILED" : status === "cancelled" ? "CANCELLED" : "PARTIAL";
+		const msg = statusDetail ?? (status === "partial" ? "Did not complete all fields" : "");
+		statusBanner = `<div class="fr-banner ${bannerClass}"><strong>${icon} ${title}${msg ? ":" : ""}</strong>${msg ? ` ${escapeHtml(msg)}` : ""}</div>`;
+	}
+	const totalTokens = llm.inputTokens + llm.outputTokens;
+	const summaryCards = `
+    <div class="fr-cards">
+      <div class="fr-card">
+        <div class="fr-card__label">Status</div>
+        <div><span class="${`fr-badge fr-badge--${status}`}">${{
+		completed: "✓",
+		partial: "⚠",
+		cancelled: "⊘",
+		failed: "✕"
+	}[status] ?? "?"} ${status.charAt(0).toUpperCase() + status.slice(1)}</span></div>
+      </div>
+      <div class="fr-card">
+        <div class="fr-card__label">Duration</div>
+        <div class="fr-card__value">${formatDuration(durationMs)}</div>
+      </div>
+      <div class="fr-card">
+        <div class="fr-card__label">Turns</div>
+        <div class="fr-card__value">${timeline.length}</div>
+      </div>
+      <div class="fr-card">
+        <div class="fr-card__label">Tokens</div>
+        <div class="fr-card__value">${formatTokens(totalTokens)}</div>
+        <div class="fr-card__sub">${formatTokens(llm.inputTokens)} in / ${formatTokens(llm.outputTokens)} out</div>
+      </div>
+    </div>
+  `;
+	const fieldsMap = /* @__PURE__ */ new Map();
+	for (const turn of timeline) for (const tc of turn.toolCalls) if (tc.tool === "fill_form" && tc.input.patches) {
+		const patches = tc.input.patches;
+		for (const patch of patches) if (patch.fieldId && patch.op) fieldsMap.set(patch.fieldId, {
+			fieldId: patch.fieldId,
+			op: patch.op,
+			turnNumber: turn.turnNumber
+		});
+	}
+	const fieldsFilled = Array.from(fieldsMap.values());
+	const totalFields = formProgress.totalFields;
+	const filledFields = formProgress.filledFields;
+	const skippedFields = formProgress.skippedFields;
+	const abortedFields = formProgress.abortedFields ?? 0;
+	const progressPercent = totalFields > 0 ? Math.round(filledFields / totalFields * 100) : 0;
+	const segmentWidth = totalFields > 0 ? 100 / totalFields : 0;
+	const aiFilledFields = fieldsFilled.filter((f) => f.op !== "skip_field" && f.op !== "abort_field");
+	const aiFilledSegmentsHtml = aiFilledFields.map((f) => {
+		const opLabel = f.op.replace(/_/g, " ");
+		return `<div class="fr-progress-segment fr-progress-segment--filled" style="width: ${segmentWidth}%" data-tooltip="${escapeHtml(`${f.fieldId}\n${opLabel}\nTurn ${f.turnNumber}`)}" onmouseenter="frShowTip(this)" onmouseleave="frHideTip()"></div>`;
+	}).join("");
+	const prefilledCount = Math.max(0, filledFields - aiFilledFields.length);
+	const prefilledSegmentsHtml = prefilledCount > 0 ? `<div class="fr-progress-segment fr-progress-segment--prefilled" style="width: ${segmentWidth * prefilledCount}%" data-tooltip="Pre-filled (${prefilledCount} field${prefilledCount !== 1 ? "s" : ""})" onmouseenter="frShowTip(this)" onmouseleave="frHideTip()"></div>` : "";
+	const skippedSegmentsHtml = fieldsFilled.filter((f) => f.op === "skip_field" || f.op === "abort_field").map((f) => {
+		const opLabel = f.op === "skip_field" ? "skipped" : "aborted";
+		return `<div class="fr-progress-segment fr-progress-segment--skipped" style="width: ${segmentWidth}%" data-tooltip="${escapeHtml(`${f.fieldId}\n${opLabel}\nTurn ${f.turnNumber}`)}" onmouseenter="frShowTip(this)" onmouseleave="frHideTip()"></div>`;
+	}).join("");
+	const unfilledCount = totalFields - filledFields - skippedFields - abortedFields;
+	const unfilledSegmentsHtml = unfilledCount > 0 ? `<div class="fr-progress-segment fr-progress-segment--empty" style="width: ${segmentWidth * unfilledCount}%"></div>` : "";
+	const progressDetails = [];
+	if (prefilledCount > 0) progressDetails.push(`${prefilledCount} pre-filled`);
+	if (skippedFields > 0) progressDetails.push(`${skippedFields} skipped`);
+	const progressBar = `
+    <div class="fr-section">
+      <div class="fr-section__title">Progress</div>
+      <div class="fr-progress">
+        <div class="fr-progress__segments">
+          ${prefilledSegmentsHtml}${aiFilledSegmentsHtml}${skippedSegmentsHtml}${unfilledSegmentsHtml}
+        </div>
+      </div>
+      <div class="fr-progress__text">
+        ${filledFields}/${totalFields} fields filled (${progressPercent}%)${progressDetails.length > 0 ? ` • ${progressDetails.join(" • ")}` : ""}
+      </div>
+    </div>
+  `;
+	const totalMs = durationMs;
+	const llmCallCount = llm.totalCalls;
+	const toolCallCount = toolSummary.totalCalls;
+	const timelineEvents = [];
+	for (const turn of timeline) {
+		const toolTimeInTurn = turn.toolCalls.reduce((sum, tc) => sum + tc.durationMs, 0);
+		const llmTimeInTurn = Math.max(0, turn.durationMs - toolTimeInTurn);
+		if (llmTimeInTurn > 0) timelineEvents.push({
+			type: "llm",
+			startMs: turn.startMs,
+			durationMs: llmTimeInTurn,
+			turnNumber: turn.turnNumber,
+			label: `Turn ${turn.turnNumber}`,
+			tokens: {
+				input: turn.tokens.input,
+				output: turn.tokens.output,
+				total: turn.tokens.input + turn.tokens.output
+			}
+		});
+		for (const tc of turn.toolCalls) timelineEvents.push({
+			type: "tool",
+			startMs: tc.startMs,
+			durationMs: tc.durationMs,
+			turnNumber: turn.turnNumber,
+			label: tc.tool
+		});
+	}
+	const ganttRowsHtml = timelineEvents.map((e) => {
+		const leftPct = totalMs > 0 ? e.startMs / totalMs * 100 : 0;
+		const widthPct = totalMs > 0 ? e.durationMs / totalMs * 100 : 0;
+		const barClass = e.type === "llm" ? "fr-gantt__bar--llm" : "fr-gantt__bar--tool";
+		const startTime = `Start: ${formatDuration(e.startMs)}`;
+		const tooltip = e.type === "llm" ? `${e.label}&#10;${startTime}&#10;Duration: ${formatDuration(e.durationMs)}&#10;${formatTokens(e.tokens?.total ?? 0)} tokens (${formatTokens(e.tokens?.input ?? 0)} in / ${formatTokens(e.tokens?.output ?? 0)} out)` : `${e.label}&#10;${startTime}&#10;Duration: ${formatDuration(e.durationMs)}&#10;Turn ${e.turnNumber}`;
+		return `
+        <div class="fr-gantt__row">
+          <div class="fr-gantt__label">${escapeHtml(e.label)}</div>
+          <div class="fr-gantt__track">
+            <div class="fr-gantt__bar ${barClass}" style="left: ${leftPct}%; width: ${widthPct}%" data-tooltip="${tooltip}" onmouseenter="frShowTip(this)" onmouseleave="frHideTip()"></div>
+          </div>
+        </div>`;
+	}).join("");
+	const llmTotalMs = timelineEvents.filter((e) => e.type === "llm").reduce((sum, e) => sum + e.durationMs, 0);
+	const toolTotalMs = timelineEvents.filter((e) => e.type === "tool").reduce((sum, e) => sum + e.durationMs, 0);
+	const timingSection = `
+    <details class="fr-details fr-section" open>
+      <summary>Timeline (${formatDuration(totalMs)} total)</summary>
+      <div class="fr-details__content">
+        <div class="fr-gantt">
+          ${ganttRowsHtml}
+          <div class="fr-gantt__legend">
+            <div class="fr-gantt__legend-item">
+              <div class="fr-gantt__legend-dot fr-gantt__legend-dot--llm"></div>
+              <span>LLM (${llmCallCount} call${llmCallCount !== 1 ? "s" : ""}, ${formatDuration(llmTotalMs)})</span>
+            </div>
+            <div class="fr-gantt__legend-item">
+              <div class="fr-gantt__legend-dot fr-gantt__legend-dot--tool"></div>
+              <span>Tools (${toolCallCount} call${toolCallCount !== 1 ? "s" : ""}, ${formatDuration(toolTotalMs)})</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </details>
+  `;
+	let toolSection = "";
+	if (toolSummary.byTool.length > 0) toolSection = `
+      <details class="fr-details fr-section" open>
+        <summary>Tool Summary</summary>
+        <div style="overflow-x: auto; margin-top: 8px;">
+          <table class="fr-table">
+            <thead><tr><th>Tool</th><th>Calls</th><th>Success</th><th>Avg</th><th>p95</th></tr></thead>
+            <tbody>${toolSummary.byTool.map((t) => `
+      <tr>
+        <td>${escapeHtml(t.toolName)}</td>
+        <td>${t.callCount}</td>
+        <td>${t.successCount === t.callCount ? "100%" : `${Math.round(t.successCount / t.callCount * 100)}%`}</td>
+        <td>${formatDuration(t.timing.avgMs)}</td>
+        <td>${formatDuration(t.timing.p95Ms)}</td>
+      </tr>
+    `).join("")}</tbody>
+          </table>
+        </div>
+      </details>
+    `;
+	let timelineSection = "";
+	if (timeline.length > 0) {
+		const timelineItems = timeline.map((turn) => {
+			const turnTokens = turn.tokens.input + turn.tokens.output;
+			const toolCallsList = turn.toolCalls.map((tc) => renderToolCall(tc)).join("");
+			const patchInfo = turn.patchesApplied > 0 ? ` • ${turn.patchesApplied} patches` : "";
+			const rejectedInfo = turn.patchesRejected > 0 ? ` <span style="color: var(--fr-error)">(${turn.patchesRejected} rejected)</span>` : "";
+			return `
+        <details class="fr-turn">
+          <summary><strong>Turn ${turn.turnNumber}</strong> • Order ${turn.order} • ${formatDuration(turn.durationMs)} • ${formatTokens(turnTokens)} tokens${patchInfo}${rejectedInfo}</summary>
+          <div class="fr-turn__content">
+            ${turn.toolCalls.length > 0 ? `<ul class="fr-turn__tools">${toolCallsList}</ul>` : "<span class=\"fr-turn__tool\">No tool calls</span>"}
+          </div>
+        </details>
+      `;
+		}).join("");
+		timelineSection = `
+      <details class="fr-details fr-section">
+        <summary>Turn Details (${timeline.length} turns)</summary>
+        <div style="margin-top: 8px;">${timelineItems}</div>
+      </details>
+    `;
+	}
+	const rawSection = `
+    <details class="fr-details fr-section">
+      <summary>Raw YAML</summary>
+      <div class="fr-raw" style="margin-top: 8px;">
+        <button class="fr-copy-btn" onclick="frCopyYaml(this)">Copy</button>
+        ${renderYamlContent(YAML.stringify(record, { lineWidth: 0 }))}
+      </div>
+    </details>
+  `;
+	return `
+    ${FILL_RECORD_STYLES}
+    <div id="fr-tooltip" class="fr-tooltip"></div>
+    <div class="fr-dashboard">
+      ${headerInfo}
+      ${statusBanner}
+      ${summaryCards}
+      ${progressBar}
+      ${timingSection}
+      ${toolSection}
+      ${timelineSection}
+      ${rawSection}
+    </div>
+  `;
+}
+
+//#endregion
+export { renderJsonContent as a, renderViewContent as c, formatDuration as d, formatTokens as f, highlightYamlValue as i, renderYamlContent as l, FILL_RECORD_STYLES as n, renderMarkdownContent as o, renderFillRecordContent as r, renderSourceContent as s, FILL_RECORD_SCRIPTS as t, escapeHtml as u };
+//# sourceMappingURL=fillRecordRenderer-CruJrLkj.mjs.map