markform 0.1.21 → 0.1.23

package/dist/{cli-ChdIy1a7.mjs → cli-ZcOC47KK.mjs}

@@ -1,9 +1,10 @@
 
 import { R as PatchSchema } from "./coreTypes-CTLr-NGd.mjs";
-import { B as DEFAULT_RESEARCH_MAX_ISSUES_PER_TURN, F as DEFAULT_MAX_PATCHES_PER_TURN, G as REPORT_EXTENSION, J as deriveFillRecordPath, K as USER_ROLE, L as DEFAULT_MAX_TURNS, M as DEFAULT_FORMS_DIR, N as DEFAULT_MAX_ISSUES_PER_TURN, Q as parseRolesFlag, R as DEFAULT_PORT, V as DEFAULT_RESEARCH_MAX_PATCHES_PER_TURN, W as MAX_FORMS_IN_MENU, X as deriveSchemaPath, Y as deriveReportPath, Z as detectFileType, at as parseModelIdForDisplay, c as computeProgressSummary, d as serializeForm, et as SUGGESTED_LLMS, f as serializeRawMarkdown, h as friendlyUrlAbbrev, i as inspect, it as hasWebSearchSupport, j as AGENT_ROLE, l as computeStructureSummary, m as formatBareUrlsAsHtmlLinks, n as getAllFields, nt as formatSuggestedLlms, p as serializeReport, q as deriveExportPath, t as applyPatches, tt as WEB_SEARCH_CONFIG, v as validateSyntaxConsistency } from "./apply-CD-t7ovb.mjs";
-import { C as resolveModel, D as computeExecutionPlan, E as FillRecordCollector, H as formToJsonSchema, S as getProviderNames, T as createLiveAgent, U as parseForm, _ as fillForm, g as resolveHarnessConfig, h as formatFillRecordSummary, i as runResearch, j as createHarness, k as createMockAgent, m as stripUnstableFillRecordFields, n as isResearchForm, t as VERSION, w as buildMockWireFormat, x as getProviderInfo } from "./src-DOPe4tmu.mjs";
-import { n as serializeSession } from "./session-ZgegwtkT.mjs";
-import { _ as writeFile, a as formatPath, c as logError, d as logTiming, f as logVerbose, g as stripHtmlComments, h as shouldUseColors, i as formatOutput, l as logInfo, m as readFile$1, n as createSpinner, o as getCommandContext, p as logWarn, r as ensureFormsDir, s as logDryRun, t as OUTPUT_FORMATS, u as logSuccess } from "./shared-DwdyWmvE.mjs";
+import { $ as WEB_SEARCH_CONFIG, A as DEFAULT_FORMS_DIR, F as DEFAULT_MAX_TURNS, G as deriveExportPath, H as MAX_FORMS_IN_MENU, I as DEFAULT_PORT, J as deriveSchemaPath, K as deriveFillRecordPath, N as DEFAULT_MAX_PATCHES_PER_TURN, Q as SUGGESTED_LLMS, R as DEFAULT_RESEARCH_MAX_ISSUES_PER_TURN, U as REPORT_EXTENSION, W as USER_ROLE, X as parseRolesFlag, Y as detectFileType, c as computeProgressSummary, d as serializeForm, et as formatSuggestedLlms, f as serializeRawMarkdown, g as validateSyntaxConsistency, i as inspect, j as DEFAULT_MAX_ISSUES_PER_TURN, k as AGENT_ROLE, l as computeStructureSummary, n as getAllFields, nt as hasWebSearchSupport, p as serializeReport, q as deriveReportPath, rt as parseModelIdForDisplay, t as applyPatches, z as DEFAULT_RESEARCH_MAX_PATCHES_PER_TURN } from "./apply-KzQztrDV.mjs";
+import { A as createMockAgent, C as getProviderNames, D as FillRecordCollector, E as createLiveAgent, M as createHarness, O as computeExecutionPlan, S as getProviderInfo, T as buildMockWireFormat, U as formToJsonSchema, W as parseForm, _ as fillForm, g as resolveHarnessConfig, h as formatFillRecordSummary, i as runResearch, m as stripUnstableFillRecordFields, n as isResearchForm, t as VERSION, w as resolveModel } from "./src-B2uFvGli.mjs";
+import { n as serializeSession } from "./session-BCcltrLA.mjs";
+import { _ as writeFile, a as formatPath, c as logError, d as logTiming, f as logVerbose, g as stripHtmlComments, h as shouldUseColors, i as formatOutput, l as logInfo, m as readFile$1, n as createSpinner, o as getCommandContext, p as logWarn, r as ensureFormsDir, s as logDryRun, t as OUTPUT_FORMATS, u as logSuccess } from "./shared-CsdT2T7k.mjs";
+import { a as renderJsonContent, c as renderViewContent, i as highlightYamlValue, l as renderYamlContent, o as renderMarkdownContent, r as renderFillRecordContent, s as renderSourceContent, u as escapeHtml } from "./fillRecordRenderer-VBQ2vwPV.mjs";
 import Markdoc from "@markdoc/markdoc";
 import YAML from "yaml";
 import { Command } from "commander";
@@ -1947,7 +1948,7 @@ function truncate(value, maxLength = PATCH_VALUE_MAX_LENGTH) {
 /**
 * Format a patch value for display with truncation.
 */
-function formatPatchValue$1(patch) {
+function formatPatchValue(patch) {
 	switch (patch.op) {
 		case "set_string": return patch.value ? truncate(`"${patch.value}"`) : "(empty)";
 		case "set_number": return patch.value !== null ? String(patch.value) : "(empty)";
@@ -2052,7 +2053,7 @@ function createFillLoggingCallbacks(ctx, options = {}) {
 			logInfo(ctx, `  -> ${pc.yellow(String(patches.length))} patch(es):`);
 			for (const patch of patches) {
 				const typeName = formatPatchType(patch);
-				const value = formatPatchValue$1(patch);
+				const value = formatPatchValue(patch);
 				const fieldId = "fieldId" in patch ? patch.fieldId : patch.op === "add_note" ? patch.ref : "";
 				if (fieldId) logInfo(ctx, `    ${pc.cyan(fieldId)} ${pc.dim(`(${typeName})`)} = ${pc.green(value)}`);
 				else logInfo(ctx, `    ${pc.dim(`(${typeName})`)} = ${pc.green(value)}`);
@@ -3091,7 +3092,7 @@ function registerFillCommand(program) {
 				logInfo(ctx, `  → ${pc.yellow(String(patches.length))} patches${tokenSuffix}:`);
 				for (const patch of patches) {
 					const typeName = formatPatchType(patch);
-					const value = formatPatchValue$1(patch);
+					const value = formatPatchValue(patch);
 					const fieldId = "fieldId" in patch ? patch.fieldId : patch.op === "add_note" ? patch.ref : "";
 					if (fieldId) logInfo(ctx, `    ${pc.cyan(fieldId)} ${pc.dim(`(${typeName})`)} = ${pc.green(value)}`);
 					else logInfo(ctx, `    ${pc.dim(`(${typeName})`)} = ${pc.green(value)}`);
@@ -4676,6 +4677,12 @@ function renderFormHtml(form, tabs) {
       border-radius: 3px;
       margin-left: 0.5rem;
     }
+    .skip-reason {
+      font-size: 0.85rem;
+      color: #6c757d;
+      font-style: italic;
+      margin-top: 0.25rem;
+    }
     .table-container {
       overflow-x: auto;
     }
@@ -5033,7 +5040,9 @@ function renderGroup(group, responses) {
 	const groupTitle = group.title ?? group.id;
 	const fieldsHtml = group.children.map((field) => {
 		const response = responses[field.id];
-		return renderFieldHtml(field, response?.state === "answered" ? response.value : void 0, response?.state === "skipped");
+		const value = response?.state === "answered" ? response.value : void 0;
+		const isSkipped = response?.state === "skipped";
+		return renderFieldHtml(field, value, isSkipped, isSkipped ? response?.reason : void 0);
 	}).join("\n");
 	return `
   <div class="group">
@@ -5045,11 +5054,12 @@ function renderGroup(group, responses) {
 * Render a field as HTML.
 * @public Exported for testing.
 */
-function renderFieldHtml(field, value, isSkipped) {
+function renderFieldHtml(field, value, isSkipped, skipReason) {
 	const skipped = isSkipped === true;
 	const requiredMark = field.required ? "<span class=\"required\">*</span>" : "";
 	const typeLabel = `<span class="type-badge">${field.kind}</span>`;
-	const skippedBadge = skipped ? "<span class=\"skipped-badge\">Skipped</span>" : "";
+	const skippedBadge = skipped ? `<span class="skipped-badge">Skipped</span>` : "";
+	const skipReasonHtml = skipped && skipReason ? `<div class="skip-reason">(skipped: ${escapeHtml(skipReason)})</div>` : "";
 	const fieldClass = skipped ? "field field-skipped" : "field";
 	const disabledAttr = skipped ? " disabled" : "";
 	let inputHtml;
@@ -5101,6 +5111,7 @@ function renderFieldHtml(field, value, isSkipped) {
         ${escapeHtml(field.label)} ${requiredMark} ${typeLabel} ${skippedBadge}
       </label>
       ${inputHtml}
+      ${skipReasonHtml}
       ${skipButton}
     </div>`;
 }
@@ -5282,13 +5293,6 @@ function renderTableInput(field, value, _disabledAttr) {
       <div class="field-help">(table fields are currently read-only in the web UI)</div>
     </div>`;
 }
-/**
-* Escape HTML special characters.
-* @public Exported for testing.
-*/
-function escapeHtml(str) {
-	return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
-}
 /** Common styles for read-only viewers */
 const READ_ONLY_STYLES = `
     * { box-sizing: border-box; }
@@ -5440,17 +5444,6 @@ function renderYamlHtml(content, filename) {
 </html>`;
 }
 /**
-* Highlight a YAML value based on its type.
-*/
-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 JSON content with syntax highlighting and formatting.
 */
 function renderJsonHtml(content, filename) {
@@ -5498,1188 +5491,6 @@ function renderPlainTextHtml(content, filename) {
 </body>
 </html>`;
 }
-/**
-* Render form view content (read-only display of form fields).
-* Used for View tab content.
-* @public Exported for testing.
-*/
-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";
-			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) html += " <span class=\"skipped-badge\">Skipped</span>";
-			html += "</div>";
-			html += renderViewFieldValue(field, value, isSkipped);
-			html += "</div>";
-		}
-		html += "</div>";
-	}
-	html += "</div>";
-	return html;
-}
-/**
-* 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) {
-	if (isSkipped) return "<div class=\"view-field-empty\">(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 source content with Markdown and Jinja syntax highlighting.
-* Used for Source tab content.
-* @public Exported for testing.
-*/
-function renderSourceContent(content) {
-	return `<pre>${content.split("\n").map((line) => highlightSourceLine(line)).join("\n")}</pre>`;
-}
-/**
-* 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 markdown content (content only, no page wrapper).
-* Used for tab content.
-* @public Exported for testing.
-*/
-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;
-}
-/**
-* 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 YAML content (content only, no page wrapper).
-* Used for tab content.
-* @public Exported for testing.
-*/
-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 (content only, no page wrapper).
-* Used for tab content.
-* @public Exported for testing.
-*/
-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>`;
-}
-/**
-* Format milliseconds as human-readable duration.
-* @public Exported for reuse in other visualizations.
-*/
-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.
-* @public Exported for reuse in other visualizations.
-*/
-function formatTokens(count) {
-	if (count >= 1e4) return `${(count / 1e3).toFixed(1)}k`;
-	if (count >= 1e3) return `${(count / 1e3).toFixed(1)}k`;
-	return count.toLocaleString();
-}
-/**
-* 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
 //#region src/cli/commands/render.ts
@@ -6874,9 +5685,9 @@ function registerResearchCommand(program) {
 			console.log(`  ${formPath}  ${pc.dim("(filled markform source)")}`);
 			console.log(`  ${schemaPath}  ${pc.dim("(JSON Schema)")}`);
 			if (options.transcript && result.transcript) {
-				const { serializeSession } = await import("./session-BPuQ-ok0.mjs");
+				const { serializeSession } = await import("./session-VeSkVrck.mjs");
 				const transcriptPath = outputPath.replace(/\.form\.md$/, ".session.yaml");
-				const { writeFile } = await import("./shared-BTR35aMz.mjs");
+				const { writeFile } = await import("./shared-fb0nkzQi.mjs");
 				await writeFile(transcriptPath, serializeSession(result.transcript));
 				logInfo(ctx, `Transcript: ${transcriptPath}`);
 			}
@@ -7281,4 +6092,4 @@ async function runCli() {
 
 //#endregion
 export { runCli as t };
-//# sourceMappingURL=cli-ChdIy1a7.mjs.map
+//# sourceMappingURL=cli-ZcOC47KK.mjs.map