file-review: render frontmatter metadata card and bump v1.5.3

Author: tarasyarema

file-review/package.json

@@ -1,7 +1,7 @@
 {
   "name": "file-review",
   "private": true,
-  "version": "1.5.2",
+  "version": "1.5.3",
   "type": "module",
   "scripts": {
     "dev": "tauri dev --",

file-review/src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "file-review"
-version = "1.5.2"
+version = "1.5.3"
 description = "A Tauri application for reviewing and managing files."
 authors = ["contact@desplega.ai"]
 edition = "2021"

file-review/src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "file-review",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "identifier": "com.desplega.file-review",
   "build": {
     "beforeDevCommand": "bun run dev:vite",

file-review/src-tauri/tauri.conf.json

@@ -35,6 +35,19 @@ export interface RenderPreviewResult {
   ranges: CommentableRange[];
 }
 
+interface FrontmatterEntry {
+  key: string;
+  label: string;
+  value: string | string[];
+  isArray: boolean;
+}
+
+interface FrontmatterParseResult {
+  entries: FrontmatterEntry[];
+  bodyMarkdown: string;
+  consumedChars: number;
+}
+
 export function initPreview(container: HTMLElement) {
   previewContainer = container;
 }
@@ -172,6 +185,168 @@ function injectHighlightSpans(content: string, comments: ReviewComment[]): strin
   return result;
 }
 
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function toFrontmatterLabel(key: string): string {
+  return key
+    .split(/[_-]+/)
+    .filter((part) => part.length > 0)
+    .map((part) => part[0].toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+function parseArrayValue(rawValue: string): string[] {
+  const inner = rawValue.slice(1, -1).trim();
+  if (!inner) {
+    return [];
+  }
+
+  return inner
+    .split(',')
+    .map((part) => part.trim())
+    .filter((part) => part.length > 0)
+    .map((part) => {
+      const quote = part[0];
+      if (
+        (quote === '"' || quote === "'") &&
+        part.length >= 2 &&
+        part[part.length - 1] === quote
+      ) {
+        return part.slice(1, -1);
+      }
+      return part;
+    });
+}
+
+function parseLeadingFrontmatter(content: string): FrontmatterParseResult {
+  const bomOffset = content.startsWith('\uFEFF') ? 1 : 0;
+  const working = content.slice(bomOffset);
+
+  if (!(working.startsWith('---\n') || working.startsWith('---\r\n'))) {
+    return { entries: [], bodyMarkdown: content, consumedChars: 0 };
+  }
+
+  const afterOpening = working.startsWith('---\r\n') ? 5 : 4;
+  let cursor = afterOpening;
+  let closingLineEnd = -1;
+
+  while (cursor < working.length) {
+    const nextNewline = working.indexOf('\n', cursor);
+    const lineEnd = nextNewline === -1 ? working.length : nextNewline + 1;
+    const line = working
+      .slice(cursor, nextNewline === -1 ? working.length : nextNewline)
+      .replace(/\r$/, '');
+
+    if (/^---[ \t]*$/.test(line)) {
+      closingLineEnd = lineEnd;
+      break;
+    }
+
+    cursor = lineEnd;
+  }
+
+  if (closingLineEnd < 0) {
+    return { entries: [], bodyMarkdown: content, consumedChars: 0 };
+  }
+
+  const rawFrontmatter = working.slice(afterOpening, cursor);
+  const entries: FrontmatterEntry[] = [];
+
+  for (const rawLine of rawFrontmatter.split(/\r?\n/)) {
+    if (!rawLine.trim() || rawLine.trim().startsWith('#')) {
+      continue;
+    }
+
+    const separatorIndex = rawLine.indexOf(':');
+    if (separatorIndex <= 0) {
+      continue;
+    }
+
+    const key = rawLine.slice(0, separatorIndex).trim();
+    if (!key) {
+      continue;
+    }
+
+    const rawValue = rawLine.slice(separatorIndex + 1).trim();
+    const isArray = rawValue.startsWith('[') && rawValue.endsWith(']');
+
+    entries.push({
+      key,
+      label: toFrontmatterLabel(key),
+      value: isArray ? parseArrayValue(rawValue) : rawValue,
+      isArray,
+    });
+  }
+
+  const consumedChars = bomOffset + closingLineEnd;
+  const bodyMarkdown = content.slice(consumedChars);
+
+  return { entries, bodyMarkdown, consumedChars };
+}
+
+function renderFrontmatterHtml(entries: FrontmatterEntry[]): string {
+  if (entries.length === 0) {
+    return '';
+  }
+
+  const rows = entries
+    .map((entry) => {
+      const renderedValue = entry.isArray
+        ? (() => {
+            const items = entry.value as string[];
+            if (items.length === 0) {
+              return '<span class="frontmatter-empty">-</span>';
+            }
+
+            const chips = items
+              .map((item) => `<span class="frontmatter-chip">${escapeHtml(item)}</span>`)
+              .join('');
+            return `<span class="frontmatter-chip-list">${chips}</span>`;
+          })()
+        : (() => {
+            const value = entry.value as string;
+            if (!value) {
+              return '<span class="frontmatter-empty">-</span>';
+            }
+            return `<span class="frontmatter-text">${escapeHtml(value)}</span>`;
+          })();
+
+      return [
+        '<div class="frontmatter-row">',
+        `<span class="frontmatter-label">${escapeHtml(entry.label)}</span>`,
+        `<span class="frontmatter-value">${renderedValue}</span>`,
+        '</div>',
+      ].join('');
+    })
+    .join('');
+
+  return [
+    '<div class="frontmatter-card" data-frontmatter="true">',
+    '<div class="frontmatter-title">Metadata</div>',
+    `<div class="frontmatter-grid">${rows}</div>`,
+    '</div>',
+  ].join('');
+}
+
+function offsetRanges(ranges: CommentableRange[], offset: number): CommentableRange[] {
+  if (offset === 0) {
+    return ranges;
+  }
+
+  return ranges.map((range) => ({
+    ...range,
+    start: range.start + offset,
+    end: range.end + offset,
+  }));
+}
+
 function trimTrailingLineBreaks(raw: string): number {
   let end = raw.length;
   while (end > 0) {
@@ -421,19 +596,26 @@ function applyCommentHighlights(root: ParentNode, comments: ReviewComment[]) {
  * Render markdown with highlights
  */
 export function renderMarkdown(content: string, comments: ReviewComment[]): RenderPreviewResult {
-  // Step 1: Replace comment markers with HTML spans BEFORE markdown parsing
-  const contentWithSpans = injectHighlightSpans(content, comments);
+  const frontmatter = parseLeadingFrontmatter(content);
 
-  // Step 2: Compute exact source ranges from the original markdown content.
-  const ranges = collectCommentableRanges(content);
+  // Step 1: Replace comment markers with HTML spans BEFORE markdown parsing.
+  const contentWithSpans = injectHighlightSpans(frontmatter.bodyMarkdown, comments);
+
+  // Step 2: Compute exact source ranges from markdown body, then remap to original source offsets.
+  const ranges = offsetRanges(
+    collectCommentableRanges(frontmatter.bodyMarkdown),
+    frontmatter.consumedChars
+  );
 
   // Step 3: Parse markdown - marked preserves inline HTML by default.
-  const html = marked.parse(contentWithSpans, {
+  const markdownHtml = marked.parse(contentWithSpans, {
     async: false,
     gfm: true,
     breaks: true,
   }) as string;
 
+  const html = renderFrontmatterHtml(frontmatter.entries) + markdownHtml;
+
   return { html, ranges };
 }
 

file-review/src/markdown-preview.ts

@@ -148,6 +148,78 @@ body {
   color: var(--text-primary);
 }
 
+#preview-container .frontmatter-card {
+  margin-bottom: 1.5em;
+  border: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+#preview-container .frontmatter-title {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-color);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+}
+
+#preview-container .frontmatter-grid {
+  display: grid;
+}
+
+#preview-container .frontmatter-row {
+  display: grid;
+  grid-template-columns: minmax(140px, 220px) 1fr;
+  gap: 12px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--border-color);
+}
+
+#preview-container .frontmatter-row:first-child {
+  border-top: none;
+}
+
+#preview-container .frontmatter-label {
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+#preview-container .frontmatter-value {
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+#preview-container .frontmatter-text {
+  font-family: 'SF Mono', Monaco, Consolas, monospace;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+#preview-container .frontmatter-chip-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+#preview-container .frontmatter-chip {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--border-color);
+  background: var(--bg-tertiary);
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+#preview-container .frontmatter-empty {
+  color: var(--text-secondary);
+}
+
 #preview-container h1,
 #preview-container h2,
 #preview-container h3,

file-review/src/styles.css

@@ -0,0 +1,32 @@
+---
+date: 2026-02-19T11:00:00+00:00
+researcher: Claude
+git_commit: e7efbbc12da967192eaba6dc7517850cedd19206
+branch: main
+repository: cope
+topic: "TestAgentV2 Speedrun Challenge Failures - Root Cause Analysis"
+tags: [research, test-agent-v2, drag-and-drop, set-input-files, loading-detection, speedrun]
+status: complete
+autonomy: critical
+last_updated: 2026-02-19
+last_updated_by: Claude
+---
+
+# Frontmatter Visual Regression Fixture
+
+Use this file in preview mode to quickly verify:
+
+- metadata card renders instead of raw YAML
+- array values are shown as chips
+- long scalar values wrap cleanly
+- body markdown still renders and remains commentable
+
+## Body Content
+
+This paragraph should appear after the metadata card.
+
+| Case | Result |
+| --- | --- |
+| Leading frontmatter | Card |
+| Non-leading delimiter | Normal markdown |
+