markform 0.1.7 → 0.1.9

package/dist/{cli-Bqlm-WWw.mjs → cli-Dt_PlYi_.mjs}

@@ -1,9 +1,9 @@
 
-import { L as PatchSchema } from "./coreTypes-__Cwxz5q.mjs";
-import { A as deriveSchemaPath, D as USER_ROLE, E as REPORT_EXTENSION, F as formatSuggestedLlms, L as hasWebSearchSupport, M as parseRolesFlag, N as SUGGESTED_LLMS, O as deriveExportPath, P as WEB_SEARCH_CONFIG, R as parseModelIdForDisplay, S as DEFAULT_RESEARCH_MAX_PATCHES_PER_TURN, T as MAX_FORMS_IN_MENU, _ as DEFAULT_MAX_PATCHES_PER_TURN, d as serialize, f as serializeRawMarkdown, g as DEFAULT_MAX_ISSUES_PER_TURN, h as DEFAULT_FORMS_DIR, i as inspect, j as detectFileType, k as deriveReportPath, m as AGENT_ROLE, n as getAllFields, p as serializeReportMarkdown, t as applyPatches, v as DEFAULT_MAX_TURNS, x as DEFAULT_RESEARCH_MAX_ISSUES_PER_TURN, y as DEFAULT_PORT } from "./apply-g23rRn7p.mjs";
-import { E as parseForm, T as formToJsonSchema, a as resolveHarnessConfig, c as getProviderNames, f as createMockAgent, i as runResearch, l as resolveModel, m as createHarness, n as isResearchForm, o as fillForm, s as getProviderInfo, t as VERSION, u as createLiveAgent } from "./src-BiuxbzF3.mjs";
-import { n as serializeSession } from "./session-CgCNni0e.mjs";
-import { a as formatPath, c as logError, d as logTiming, f as logVerbose, g as writeFile, 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-DQ6y3Ggc.mjs";
+import { L as PatchSchema } from "./coreTypes-B1oI7qvV.mjs";
+import { A as deriveReportPath, C as DEFAULT_RESEARCH_MAX_PATCHES_PER_TURN, D as REPORT_EXTENSION, E as MAX_FORMS_IN_MENU, F as WEB_SEARCH_CONFIG, I as formatSuggestedLlms, M as detectFileType, N as parseRolesFlag, O as USER_ROLE, P as SUGGESTED_LLMS, R as hasWebSearchSupport, S as DEFAULT_RESEARCH_MAX_ISSUES_PER_TURN, _ as DEFAULT_MAX_ISSUES_PER_TURN, b as DEFAULT_PORT, d as serialize, f as serializeRawMarkdown, g as DEFAULT_FORMS_DIR, h as ALL_EXTENSIONS, i as inspect, j as deriveSchemaPath, k as deriveExportPath, m as AGENT_ROLE, n as getAllFields, p as serializeReportMarkdown, t as applyPatches, v as DEFAULT_MAX_PATCHES_PER_TURN, y as DEFAULT_MAX_TURNS, z as parseModelIdForDisplay } from "./apply-B2kt6C2z.mjs";
+import { D as parseForm, E as formToJsonSchema, a as resolveHarnessConfig, c as getProviderNames, d as createLiveAgent, h as createHarness, i as runResearch, l as resolveModel, n as isResearchForm, o as fillForm, p as createMockAgent, s as getProviderInfo, t as VERSION, u as buildMockWireFormat } from "./src-DFsC5wwy.mjs";
+import { n as serializeSession } from "./session-Dxqwt0RC.mjs";
+import { a as formatPath, c as logError, d as logTiming, f as logVerbose, g as writeFile, 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-D3dNi-Gn.mjs";
 import YAML from "yaml";
 import { Command } from "commander";
 import pc from "picocolors";
@@ -365,7 +365,8 @@ function formatMarkdown$3(content) {
 			return `${pc.cyan(text)} ${pc.dim(`(${url})`)}`;
 		});
 		formattedLine = formattedLine.replace(/\{%\s*(\w+)\s*([^%]*)\s*%\}/g, (_match, tag, attrs) => {
-			return `${pc.dim("{% ")}${pc.green(tag)}${pc.dim(attrs)} ${pc.dim("%}")}`;
+			const attrsPart = attrs.trim() ? ` ${pc.dim(attrs.trim())}` : "";
+			return `${pc.dim("{% ")}${pc.green(tag)}${attrsPart} ${pc.dim("%}")}`;
 		});
 		formatted.push(formattedLine);
 	}
@@ -824,6 +825,23 @@ function toStructuredValues(form) {
 			case "url_list":
 				exportValue = value.items;
 				break;
+			case "date":
+				exportValue = value.value ?? null;
+				break;
+			case "year":
+				exportValue = value.value ?? null;
+				break;
+			case "table":
+				exportValue = value.rows.map((row) => {
+					const rowObj = {};
+					for (const [colId, cellResp] of Object.entries(row)) rowObj[colId] = cellResp.value ?? null;
+					return rowObj;
+				});
+				break;
+			default: {
+				const _exhaustive = value;
+				throw new Error(`Unhandled field value kind: ${_exhaustive.kind}`);
+			}
 		}
 		result[fieldId] = {
 			state: "answered",
@@ -924,7 +942,13 @@ function formatFieldResponse(response, useColors) {
 		}
 		case "url": return value.value ? green(`"${value.value}"`) : dim("(empty)");
 		case "url_list": return value.items.length > 0 ? green(`[${value.items.join(", ")}]`) : dim("(empty)");
-		default: return dim("(unknown)");
+		case "date": return value.value ? green(value.value) : dim("(empty)");
+		case "year": return value.value !== null ? green(String(value.value)) : dim("(empty)");
+		case "table": return value.rows.length > 0 ? green(`(${value.rows.length} rows)`) : dim("(empty)");
+		default: {
+			const _exhaustive = value;
+			throw new Error(`Unhandled field value kind: ${_exhaustive.kind}`);
+		}
 	}
 }
 /**
@@ -996,15 +1020,9 @@ const EXAMPLE_DEFINITIONS = [
 		type: "fill"
 	},
 	{
-		id: "movie-research-basic",
-		filename: "movie-research-basic.form.md",
-		path: "movie-research/movie-research-basic.form.md",
-		type: "research"
-	},
-	{
-		id: "movie-research-deep",
-		filename: "movie-research-deep.form.md",
-		path: "movie-research/movie-research-deep.form.md",
+		id: "movie-deep-research",
+		filename: "movie-deep-research.form.md",
+		path: "movie-research/movie-deep-research.form.md",
 		type: "research"
 	},
 	{
@@ -1012,12 +1030,6 @@ const EXAMPLE_DEFINITIONS = [
 		filename: "startup-deep-research.form.md",
 		path: "startup-deep-research/startup-deep-research.form.md",
 		type: "research"
-	},
-	{
-		id: "earnings-analysis",
-		filename: "earnings-analysis.form.md",
-		path: "earnings-analysis/earnings-analysis.form.md",
-		type: "research"
 	}
 ];
 /** Default example ID for menus (movie-research-demo, index 0) */
@@ -1041,7 +1053,7 @@ function getExamplesDir() {
 }
 /**
 * Load the content of an example form.
-* @param exampleId - The example ID (e.g., 'simple', 'movie-research-deep')
+* @param exampleId - The example ID (e.g., 'simple', 'movie-deep-research')
 * @returns The form content as a string
 * @throws Error if the example is not found
 */
@@ -1063,7 +1075,7 @@ function getExampleById(id) {
 }
 /**
 * Get the absolute path to an example's source file.
-* @param exampleId - The example ID (e.g., 'simple', 'movie-research-deep')
+* @param exampleId - The example ID (e.g., 'simple', 'movie-deep-research')
 * @returns The absolute path to the example form file
 * @throws Error if the example is not found
 */
@@ -1088,7 +1100,7 @@ function extractFrontmatter(content) {
 }
 /**
 * Load metadata (title, description) from an example's YAML frontmatter.
-* @param exampleId - The example ID (e.g., 'simple', 'movie-research-deep')
+* @param exampleId - The example ID (e.g., 'simple', 'movie-deep-research')
 * @returns Object with title and description from frontmatter
 */
 function loadExampleMetadata(exampleId) {
@@ -1129,7 +1141,7 @@ function issueReasonToStatus(reason) {
 		case "validation_error": return "invalid";
 		case "checkbox_incomplete": return "incomplete";
 		case "min_items_not_met": return "too-few";
-		case "optional_empty": return "empty";
+		case "optional_unanswered": return "unanswered";
 		default: return "issue";
 	}
 }
@@ -1152,7 +1164,7 @@ function formatTurnIssues(issues, maxShow = 5) {
 /**
 * Format form info for menu label display.
 * Format: "filename - Title [runMode]"
-* Example: "movie-research-deep.form.md - Movie Research (Deep) [research]"
+* Example: "movie-deep-research.form.md - Movie Deep Research [research]"
 */
 function formatFormLabel(info) {
 	const titlePart = info.title ? ` - ${info.title}` : "";
@@ -1169,7 +1181,7 @@ function formatFormHint(info) {
 /**
 * Format form info for log line (e.g., after copying).
 * Format: "filename - Title" (dimmed title)
-* Example: "✓ movie-research-deep.form.md - Movie Research (Deep)"
+* Example: "✓ movie-deep-research.form.md - Movie Deep Research"
 */
 function formatFormLogLine(info, prefix) {
 	const titlePart = info.title ? ` - ${info.title}` : "";
@@ -2559,8 +2571,8 @@ function registerExamplesCommand(program) {
 				}
 				await copySingleExample(options.name, formsDir, ctx.overwrite, ctx.quiet);
 			} else {
-				const { copied } = await copyAllExamples(formsDir, ctx.overwrite, ctx.quiet);
-				if (!ctx.quiet && copied > 0) {
+				const { copied, skipped } = await copyAllExamples(formsDir, ctx.overwrite, ctx.quiet);
+				if (!ctx.quiet && (copied > 0 || skipped > 0)) {
 					console.log("");
 					const wantToRun = await p.confirm({
 						message: "Do you want to try running a form?",
@@ -2833,6 +2845,7 @@ function registerFillCommand(program) {
 			let mockPath;
 			let agentProvider;
 			let agentModelName;
+			let targetRole = AGENT_ROLE;
 			let currentSpinner = null;
 			if (options.mock) {
 				mockPath = resolve(options.mockSource);
@@ -2860,12 +2873,12 @@ function registerFillCommand(program) {
 					error: (msg) => currentSpinner?.error(msg),
 					getElapsedMs: () => currentSpinner?.getElapsedMs() ?? 0
 				}, ctx);
-				const primaryRole = targetRoles[0] === "*" ? AGENT_ROLE : targetRoles[0];
+				targetRole = targetRoles[0] === "*" ? AGENT_ROLE : targetRoles[0] ?? AGENT_ROLE;
 				const liveAgent = createLiveAgent({
 					model,
 					provider,
 					systemPromptAddition: systemPrompt,
-					targetRole: primaryRole,
+					targetRole,
 					enableWebSearch: true,
 					callbacks
 				});
@@ -2881,6 +2894,7 @@ function registerFillCommand(program) {
 			logVerbose(ctx, `Target roles: ${targetRoles.includes("*") ? "*" : targetRoles.join(", ")}`);
 			logVerbose(ctx, `Fill mode: ${fillMode}`);
 			let stepResult = harness.step();
+			let previousRejections;
 			logInfo(ctx, `${pc.bold(`Turn ${stepResult.turnNumber}:`)} ${formatTurnIssues(stepResult.issues)}`);
 			while (!stepResult.isComplete && !harness.hasReachedMaxTurns()) {
 				let spinner = null;
@@ -2895,7 +2909,7 @@ function registerFillCommand(program) {
 				}
 				let response;
 				try {
-					response = await agent.generatePatches(stepResult.issues, harness.getForm(), harnessConfig.maxPatchesPerTurn);
+					response = await agent.fillFormTool(stepResult.issues, harness.getForm(), harnessConfig.maxPatchesPerTurn);
 					spinner?.stop();
 					currentSpinner = null;
 				} catch (error) {
@@ -2927,12 +2941,28 @@ function registerFillCommand(program) {
 					}
 				}
 				let llmStats;
-				if (stats) llmStats = {
-					inputTokens: stats.inputTokens,
-					outputTokens: stats.outputTokens,
-					toolCalls: stats.toolCalls.length > 0 ? stats.toolCalls : void 0
-				};
-				stepResult = harness.apply(patches, stepResult.issues, llmStats);
+				let context;
+				let wire;
+				if (stats) {
+					llmStats = {
+						inputTokens: stats.inputTokens,
+						outputTokens: stats.outputTokens,
+						toolCalls: stats.toolCalls.length > 0 ? stats.toolCalls : void 0
+					};
+					if (stats.prompts) context = {
+						systemPrompt: stats.prompts.system,
+						contextPrompt: stats.prompts.context
+					};
+					wire = stats.wire;
+				} else if (options.mock) {
+					wire = buildMockWireFormat(harness.getForm(), stepResult.issues, patches, harnessConfig.maxPatchesPerTurn, targetRole, previousRejections);
+					context = {
+						systemPrompt: wire.request.system,
+						contextPrompt: wire.request.prompt
+					};
+				}
+				stepResult = harness.apply(patches, stepResult.issues, llmStats, context, wire);
+				previousRejections = stepResult.rejectedPatches;
 				if (stepResult.isComplete) logInfo(ctx, pc.green(`  ✓ Complete`));
 				else if (!harness.hasReachedMaxTurns()) {
 					stepResult = harness.step();
@@ -3073,7 +3103,13 @@ function formatFieldValue(value, useColors) {
 		}
 		case "url": return value.value ? green(`"${value.value}"`) : dim("(empty)");
 		case "url_list": return value.items.length > 0 ? green(`[${value.items.map((i) => `"${i}"`).join(", ")}]`) : dim("(empty)");
-		default: return dim("(unknown)");
+		case "date": return value.value ? green(value.value) : dim("(empty)");
+		case "year": return value.value !== null ? green(String(value.value)) : dim("(empty)");
+		case "table": return value.rows.length > 0 ? green(`(${value.rows.length} rows)`) : dim("(empty)");
+		default: {
+			const _exhaustive = value;
+			throw new Error(`Unhandled field value kind: ${_exhaustive.kind}`);
+		}
 	}
 }
 /**
@@ -3486,6 +3522,57 @@ function openBrowser(url) {
 	});
 }
 /**
+* Get the base path by stripping any known markform extension.
+*/
+function getBasePath(filePath) {
+	for (const ext of Object.values(ALL_EXTENSIONS)) if (filePath.endsWith(ext)) return filePath.slice(0, -ext.length);
+	if (filePath.endsWith(".md")) return filePath.slice(0, -3);
+	return filePath;
+}
+/**
+* Find related files for a form file.
+* Checks for .report.md, .yml, and .schema.json files with the same base name.
+*/
+function findRelatedFiles(formPath) {
+	const base = getBasePath(formPath);
+	const reportPath = base + ALL_EXTENSIONS.report;
+	const valuesPath = base + ALL_EXTENSIONS.yaml;
+	const schemaPath = base + ALL_EXTENSIONS.schema;
+	return {
+		form: formPath,
+		report: existsSync(reportPath) ? reportPath : null,
+		values: existsSync(valuesPath) ? valuesPath : null,
+		schema: existsSync(schemaPath) ? schemaPath : null
+	};
+}
+/**
+* Build tabs for tabbed navigation.
+*/
+function buildTabs(relatedFiles) {
+	const tabs = [];
+	tabs.push({
+		id: "form",
+		label: "Markform",
+		path: relatedFiles.form
+	});
+	if (relatedFiles.report) tabs.push({
+		id: "report",
+		label: "Report",
+		path: relatedFiles.report
+	});
+	if (relatedFiles.values) tabs.push({
+		id: "values",
+		label: "Values",
+		path: relatedFiles.values
+	});
+	if (relatedFiles.schema) tabs.push({
+		id: "schema",
+		label: "Schema",
+		path: relatedFiles.schema
+	});
+	return tabs;
+}
+/**
 * Register the serve command.
 */
 function registerServeCommand(program) {
@@ -3499,8 +3586,10 @@ function registerServeCommand(program) {
 			const content = await readFile$1(filePath);
 			let form = null;
 			if (fileType === "form") form = parseForm(content);
+			const relatedFiles = fileType === "form" ? findRelatedFiles(filePath) : null;
+			const tabs = relatedFiles ? buildTabs(relatedFiles) : null;
 			const server = createServer((req, res) => {
-				handleRequest(req, res, filePath, fileType, form, ctx, (updatedForm) => {
+				handleRequest(req, res, filePath, fileType, form, ctx, tabs, (updatedForm) => {
 					form = updatedForm;
 				}).catch((err) => {
 					console.error("Request error:", err);
@@ -3530,10 +3619,29 @@ function registerServeCommand(program) {
 * Handle HTTP requests.
 * Dispatches to appropriate renderer based on file type.
 */
-async function handleRequest(req, res, filePath, fileType, form, ctx, updateForm) {
+async function handleRequest(req, res, filePath, fileType, form, ctx, tabs, updateForm) {
 	const url = req.url ?? "/";
+	if (req.method === "GET" && url.startsWith("/tab/") && tabs && tabs.length > 1) {
+		const tabId = url.slice(5);
+		const tab = tabs.find((t) => t.id === tabId);
+		if (tab?.path) {
+			const content = await readFile(tab.path, "utf-8");
+			const tabFileType = detectFileType(tab.path);
+			let html;
+			if (tabFileType === "report" || tabFileType === "raw") html = renderMarkdownContent(content);
+			else if (tabFileType === "yaml") html = renderYamlContent(content);
+			else if (tabFileType === "json" || tabFileType === "schema") html = renderJsonContent(content);
+			else html = `<pre>${escapeHtml(content)}</pre>`;
+			res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+			res.end(html);
+			return;
+		}
+		res.writeHead(404);
+		res.end("Tab not found");
+		return;
+	}
 	if (req.method === "GET" && url === "/") if (fileType === "form" && form) {
-		const html = renderFormHtml(form);
+		const html = renderFormHtml(form, tabs);
 		res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
 		res.end(html);
 	} else if (fileType === "raw" || fileType === "report") {
@@ -3544,7 +3652,7 @@ async function handleRequest(req, res, filePath, fileType, form, ctx, updateForm
 		const html = renderYamlHtml(await readFile(filePath, "utf-8"), basename(filePath));
 		res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
 		res.end(html);
-	} else if (fileType === "json") {
+	} else if (fileType === "json" || fileType === "schema") {
 		const html = renderJsonHtml(await readFile(filePath, "utf-8"), basename(filePath));
 		res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
 		res.end(html);
@@ -3751,6 +3859,11 @@ function formDataToPatches(formData, form) {
 				});
 				break;
 			}
+			case "table": break;
+			default: {
+				const _exhaustive = field;
+				throw new Error(`Unhandled field kind: ${_exhaustive.kind}`);
+			}
 		}
 	}
 	return patches;
@@ -3796,10 +3909,14 @@ async function handleSave(req, res, form, filePath, ctx, updateForm) {
 * Render the form as HTML.
 * @public Exported for testing.
 */
-function renderFormHtml(form) {
+function renderFormHtml(form, tabs) {
 	const { schema, responsesByFieldId } = form;
 	const formTitle = schema.title ?? schema.id;
 	const groupsHtml = schema.groups.map((group) => renderGroup(group, responsesByFieldId)).join("\n");
+	const showTabs = tabs && tabs.length > 1;
+	const tabBarHtml = showTabs ? `<div class="tab-bar">
+        ${tabs.map((tab, i) => `<button class="tab-btn${i === 0 ? " active" : ""}" data-tab="${tab.id}">${escapeHtml(tab.label)}</button>`).join("\n        ")}
+      </div>` : "";
 	return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -3817,7 +3934,74 @@ function renderFormHtml(form) {
       background: #f8f9fa;
       color: #212529;
     }
-    h1 { color: #495057; border-bottom: 2px solid #dee2e6; padding-bottom: 0.5rem; }
+    h1 { color: #495057; border-bottom: none; padding-bottom: 0.5rem; }
+    /* Tab bar styles */
+    .tab-bar {
+      display: flex;
+      gap: 0.25rem;
+      margin-bottom: 1.5rem;
+      border-bottom: 2px solid #dee2e6;
+      padding-bottom: 0;
+    }
+    .tab-btn {
+      padding: 0.5rem 1rem;
+      border: none;
+      background: transparent;
+      color: #6c757d;
+      font-size: 0.95rem;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -2px;
+      transition: all 0.15s;
+    }
+    .tab-btn:hover {
+      color: #495057;
+    }
+    .tab-btn.active {
+      color: #0d6efd;
+      border-bottom-color: #0d6efd;
+      font-weight: 500;
+    }
+    .tab-content {
+      display: none;
+    }
+    .tab-content.active {
+      display: block;
+    }
+    /* Light theme syntax highlighting for tab content */
+    .tab-content pre {
+      background: #f8f9fa;
+      color: #24292e;
+      padding: 1rem;
+      border-radius: 6px;
+      border: 1px solid #e1e4e8;
+      overflow-x: auto;
+      font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+      font-size: 0.9rem;
+      line-height: 1.5;
+    }
+    .syn-key { color: #005cc5; }
+    .syn-string { color: #22863a; }
+    .syn-number { color: #005cc5; }
+    .syn-bool { color: #d73a49; }
+    .syn-null { color: #d73a49; }
+    .syn-comment { color: #6a737d; font-style: italic; }
+    /* Markdown content styles */
+    .markdown-content { padding: 0.5rem 0; }
+    .markdown-content h2 { font-size: 1.4rem; color: #24292e; margin: 1.5rem 0 0.75rem; }
+    .markdown-content h3 { font-size: 1.2rem; color: #24292e; margin: 1.25rem 0 0.5rem; }
+    .markdown-content h4 { font-size: 1.1rem; color: #24292e; margin: 1rem 0 0.5rem; }
+    .markdown-content h5 { font-size: 1rem; color: #24292e; margin: 0.75rem 0 0.5rem; }
+    .markdown-content p { margin: 0.75rem 0; line-height: 1.6; }
+    .markdown-content li { margin: 0.25rem 0; margin-left: 1.5rem; line-height: 1.6; }
+    .markdown-content code { background: #f1f3f5; padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; }
+    .markdown-content pre { background: #f8f9fa; padding: 1rem; border-radius: 6px; border: 1px solid #e1e4e8; overflow-x: auto; }
+    .markdown-content pre code { background: none; padding: 0; }
+    .markdown-content a { color: #0366d6; text-decoration: none; }
+    .markdown-content a:hover { text-decoration: underline; }
+    .markdown-content strong { font-weight: 600; }
+    .loading { text-align: center; padding: 2rem; color: #6c757d; }
+    .error { text-align: center; padding: 2rem; color: #dc3545; }
     h2 { color: #6c757d; font-size: 1.25rem; }
     .group {
       background: white;
@@ -3964,16 +4148,42 @@ function renderFormHtml(form) {
       border-radius: 3px;
       margin-left: 0.5rem;
     }
+    .table-container {
+      overflow-x: auto;
+    }
+    .data-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.9rem;
+    }
+    .data-table th,
+    .data-table td {
+      padding: 0.5rem 0.75rem;
+      text-align: left;
+      border: 1px solid #dee2e6;
+    }
+    .data-table th {
+      background: #f8f9fa;
+      font-weight: 600;
+      color: #495057;
+    }
+    .data-table tbody tr:hover {
+      background: #f8f9fa;
+    }
   </style>
 </head>
 <body>
   <h1>${escapeHtml(formTitle)}</h1>
-  <form method="POST" action="/save" id="markform">
-    ${groupsHtml}
-    <div class="toolbar">
-      <button type="submit" class="btn btn-primary">Save</button>
-    </div>
-  </form>
+  ${tabBarHtml}
+  <div id="tab-form" class="tab-content active">
+    <form method="POST" action="/save" id="markform">
+      ${groupsHtml}
+      <div class="toolbar">
+        <button type="submit" class="btn btn-primary">Save</button>
+      </div>
+    </form>
+  </div>
+  ${showTabs ? "<div id=\"tab-other\" class=\"tab-content\"><div class=\"loading\">Loading...</div></div>" : ""}
   <script>
     // Track fields marked for skip
     const skippedFields = new Set();
@@ -4039,6 +4249,50 @@ function renderFormHtml(form) {
         alert('Save failed: ' + err.message);
       }
     });
+
+    // Tab switching logic
+    const tabButtons = document.querySelectorAll('.tab-btn');
+    const tabFormContent = document.getElementById('tab-form');
+    const tabOtherContent = document.getElementById('tab-other');
+    const tabCache = {};
+
+    tabButtons.forEach(btn => {
+      btn.addEventListener('click', async () => {
+        const tabId = btn.dataset.tab;
+
+        // Update active button
+        tabButtons.forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        if (tabId === 'form') {
+          // Show form tab
+          if (tabFormContent) tabFormContent.classList.add('active');
+          if (tabOtherContent) tabOtherContent.classList.remove('active');
+        } else {
+          // Show other tab content
+          if (tabFormContent) tabFormContent.classList.remove('active');
+          if (tabOtherContent) {
+            tabOtherContent.classList.add('active');
+
+            // Fetch content if not cached
+            if (!tabCache[tabId]) {
+              tabOtherContent.innerHTML = '<div class="loading">Loading...</div>';
+              try {
+                const response = await fetch('/tab/' + tabId);
+                if (response.ok) {
+                  tabCache[tabId] = await response.text();
+                } else {
+                  tabCache[tabId] = '<div class="error">Failed to load content</div>';
+                }
+              } catch (err) {
+                tabCache[tabId] = '<div class="error">Failed to load content</div>';
+              }
+            }
+            tabOtherContent.innerHTML = tabCache[tabId];
+          }
+        }
+      });
+    });
   <\/script>
 </body>
 </html>`;
@@ -4101,7 +4355,13 @@ function renderFieldHtml(field, value, isSkipped) {
 		case "year":
 			inputHtml = renderYearInput(field, value, disabledAttr);
 			break;
-		default: inputHtml = "<div class=\"field-help\">(unknown field kind)</div>";
+		case "table":
+			inputHtml = renderTableInput(field, value, disabledAttr);
+			break;
+		default: {
+			const _exhaustive = field;
+			throw new Error(`Unhandled field kind: ${_exhaustive.kind}`);
+		}
 	}
 	const skipButton = !field.required && !skipped ? `<div class="field-actions">
         <button type="button" class="btn-skip" data-skip-field="${field.id}">Skip</button>
@@ -4266,6 +4526,34 @@ function renderCheckboxesInput(field, value, disabledAttr) {
     </div>`;
 }
 /**
+* Render a table field as an HTML table.
+* Currently read-only display; editing requires more complex UI.
+*/
+function renderTableInput(field, value, _disabledAttr) {
+	const rows = value?.rows ?? [];
+	if (rows.length === 0) return "<div class=\"field-help\">(no data)</div>";
+	return `<div class="table-container">
+      <table class="data-table">
+        <thead>
+          <tr>${field.columns.map((col) => `<th>${escapeHtml(col.label)}</th>`).join("")}</tr>
+        </thead>
+        <tbody>
+          ${rows.map((row) => {
+		return `<tr>${field.columns.map((col) => {
+			const cell = row[col.id];
+			let cellValue = "";
+			if (cell?.state === "answered" && cell.value !== void 0 && cell.value !== null) cellValue = String(cell.value);
+			else if (cell?.state === "skipped") cellValue = cell.reason ? `[skipped: ${cell.reason}]` : "[skipped]";
+			else if (cell?.state === "aborted") cellValue = cell.reason ? `[aborted: ${cell.reason}]` : "[aborted]";
+			return `<td>${escapeHtml(cellValue)}</td>`;
+		}).join("")}</tr>`;
+	}).join("\n        ")}
+        </tbody>
+      </table>
+      <div class="field-help">(table fields are currently read-only in the web UI)</div>
+    </div>`;
+}
+/**
 * Escape HTML special characters.
 * @public Exported for testing.
 */
@@ -4292,15 +4580,23 @@ const READ_ONLY_STYLES = `
       box-shadow: 0 1px 3px rgba(0,0,0,0.1);
     }
     pre {
-      background: #1e1e1e;
-      color: #d4d4d4;
+      background: #f8f9fa;
+      color: #24292e;
       padding: 1rem;
       border-radius: 6px;
+      border: 1px solid #e1e4e8;
       overflow-x: auto;
       font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
       font-size: 0.9rem;
       line-height: 1.5;
     }
+    /* Light theme syntax highlighting */
+    .syn-key { color: #005cc5; }
+    .syn-string { color: #22863a; }
+    .syn-number { color: #005cc5; }
+    .syn-bool { color: #d73a49; }
+    .syn-null { color: #d73a49; }
+    .syn-comment { color: #6a737d; font-style: italic; }
     .badge {
       font-size: 0.75rem;
       padding: 0.2rem 0.5rem;
@@ -4379,9 +4675,23 @@ function renderMarkdownHtml(content, filename) {
 */
 function renderYamlHtml(content, filename) {
 	const highlighted = 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("#") && !line.trim().startsWith("-")) return `<span style="color:#9cdcfe">${escapeHtml(line.slice(0, colonIndex))}</span>${escapeHtml(line.slice(colonIndex))}`;
-		if (line.trim().startsWith("#")) return `<span style="color:#6a9955">${escapeHtml(line)}</span>`;
+		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");
 	return `<!DOCTYPE html>
@@ -4401,6 +4711,17 @@ 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) {
@@ -4411,7 +4732,7 @@ function renderJsonHtml(content, filename) {
 	} catch {
 		formatted = content;
 	}
-	const highlighted = formatted.replace(/"([^"]+)":/g, "<span style=\"color:#9cdcfe\">\"$1\"</span>:").replace(/: "([^"]+)"/g, ": <span style=\"color:#ce9178\">\"$1\"</span>").replace(/: (\d+\.?\d*)/g, ": <span style=\"color:#b5cea8\">$1</span>").replace(/: (true|false|null)/g, ": <span style=\"color:#569cd6\">$1</span>");
+	const highlighted = 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>");
 	return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -4448,6 +4769,144 @@ function renderPlainTextHtml(content, filename) {
 </body>
 </html>`;
 }
+/**
+* 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 = "";
+	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;
+				}
+				inCodeBlock = true;
+			}
+			continue;
+		}
+		if (inCodeBlock) {
+			codeBlockContent += line + "\n";
+			continue;
+		}
+		if (trimmed.startsWith("# ")) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			html += `<h2>${escapeHtml(trimmed.slice(2))}</h2>`;
+		} else if (trimmed.startsWith("## ")) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			html += `<h3>${escapeHtml(trimmed.slice(3))}</h3>`;
+		} else if (trimmed.startsWith("### ")) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			html += `<h4>${escapeHtml(trimmed.slice(4))}</h4>`;
+		} else if (trimmed.startsWith("#### ")) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			html += `<h5>${escapeHtml(trimmed.slice(5))}</h5>`;
+		} else if (trimmed.startsWith("- ") || trimmed.startsWith("* ")) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			html += `<li>${formatInlineMarkdown(trimmed.slice(2))}</li>`;
+		} else if (/^\d+\.\s/.test(trimmed)) {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+			const text = trimmed.replace(/^\d+\.\s/, "");
+			html += `<li>${formatInlineMarkdown(text)}</li>`;
+		} else if (trimmed === "") {
+			if (inParagraph) {
+				html += "</p>";
+				inParagraph = false;
+			}
+		} else {
+			if (!inParagraph) {
+				html += "<p>";
+				inParagraph = true;
+			} else html += "<br>";
+			html += formatInlineMarkdown(trimmed);
+		}
+	}
+	if (inParagraph) html += "</p>";
+	html += "</div>";
+	return html;
+}
+/**
+* Format inline markdown (bold, italic, code, links).
+*/
+function formatInlineMarkdown(text) {
+	let result = escapeHtml(text);
+	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) => `<a href="${url.replace(/&amp;/g, "&")}" target="_blank">${linkText}</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>`;
+}
 
 //#endregion
 //#region src/cli/commands/render.ts
@@ -4640,9 +5099,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: serializeSession$1 } = await import("./session-DruaYPZ1.mjs");
+				const { serializeSession: serializeSession$1 } = await import("./session-CzCh6JeY.mjs");
 				const transcriptPath = outputPath.replace(/\.form\.md$/, ".session.yaml");
-				const { writeFile: writeFile$1 } = await import("./shared-C9yW5FLZ.mjs");
+				const { writeFile: writeFile$1 } = await import("./shared-CNqwaxUt.mjs");
 				await writeFile$1(transcriptPath, serializeSession$1(result.transcript));
 				logInfo(ctx, `Transcript: ${transcriptPath}`);
 			}