feat: add PNG export to visual snapshot tests

packages/markform/tests/visual/fill-record-visual.ts

@@ -7,6 +7,7 @@
  */
 
 import { writeFileSync, mkdirSync, existsSync } from 'node:fs';
+import { execSync } from 'node:child_process';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import {
@@ -422,7 +423,76 @@ console.log(`formatTokens(500) = "${formatTokens(500)}"`);
 console.log(`formatTokens(1500) = "${formatTokens(1500)}"`);
 console.log(`formatTokens(15000) = "${formatTokens(15000)}"`);
 
-console.log('\n✅ All visual snapshots generated successfully!');
+console.log('\n✅ All HTML snapshots generated successfully!');
+
+// Check if a command is available
+function hasCommand(cmd: string): boolean {
+  try {
+    execSync(`which ${cmd}`, { stdio: 'ignore' });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// Generate PNG snapshots if wkhtmltoimage is available
+if (hasCommand('wkhtmltoimage')) {
+  console.log('\n--- Generating PNG snapshots ---');
+  const hasImagemagick = hasCommand('convert');
+  let failedCount = 0;
+  const generatedPngs: string[] = [];
+
+  for (const { name } of testCases) {
+    const htmlPath = join(snapshotDir, `fill-record-${name}.html`);
+    const pngPath = join(snapshotDir, `fill-record-${name}.png`);
+    try {
+      // Use wkhtmltoimage to convert HTML to PNG
+      // --width 900 matches the max-width of .fr-dashboard
+      execSync(
+        `wkhtmltoimage --width 900 --quality 90 --enable-local-file-access "${htmlPath}" "${pngPath}"`,
+        { stdio: 'pipe' },
+      );
+
+      // Optimize with ImageMagick if available (reduce size for PR attachment)
+      if (hasImagemagick) {
+        execSync(`convert "${pngPath}" -resize 50% -quality 85 "${pngPath}"`, { stdio: 'pipe' });
+      }
+
+      console.log(`✓ Generated: ${pngPath}`);
+      generatedPngs.push(pngPath);
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : String(error);
+      console.error(`✗ Failed to generate PNG for ${name}: ${errorMsg}`);
+      failedCount++;
+    }
+  }
+
+  // Report results based on success/failure
+  if (failedCount === 0) {
+    console.log('\n✅ PNG snapshots generated!');
+    if (hasImagemagick) {
+      console.log('   (optimized with ImageMagick for smaller file sizes)');
+    }
+    console.log(`\nPNG files for PR attachment:`);
+    for (const pngPath of generatedPngs) {
+      console.log(`  ${pngPath}`);
+    }
+  } else if (generatedPngs.length > 0) {
+    console.log(`\n⚠ PNG generation partially failed: ${failedCount}/${testCases.length} failed`);
+    console.log(`\nSuccessfully generated:`);
+    for (const pngPath of generatedPngs) {
+      console.log(`  ${pngPath}`);
+    }
+    process.exitCode = 1;
+  } else {
+    console.error('\n✗ All PNG generation failed!');
+    process.exitCode = 1;
+  }
+} else {
+  console.log('\n⚠ wkhtmltoimage not found - skipping PNG generation');
+  console.log('  Install with: apt-get install wkhtmltopdf');
+}
+
 console.log(`\nOpen the HTML files in a browser to review:`);
 console.log(`  file://${snapshotDir}/fill-record-completed.html`);
 console.log(`  file://${snapshotDir}/fill-record-failed.html`);

packages/markform/tests/visual/snapshots/fill-record-cancelled.html

@@ -570,7 +570,7 @@
     <div class="fr-dashboard">
       <div class="fr-header">
         <div class="fr-header__model">claude-sonnet-4-20250514</div>
-        <div class="fr-header__time">Jan 30, 2026 at 6:30 AM</div>
+        <div class="fr-header__time">Jan 30, 2026 at 2:30 PM</div>
       </div>
 
       <div class="fr-banner fr-banner--warning">

packages/markform/tests/visual/snapshots/fill-record-completed.html

@@ -570,7 +570,7 @@
     <div class="fr-dashboard">
       <div class="fr-header">
         <div class="fr-header__model">claude-sonnet-4-20250514</div>
-        <div class="fr-header__time">Jan 30, 2026 at 6:30 AM</div>
+        <div class="fr-header__time">Jan 30, 2026 at 2:30 PM</div>
       </div>
 
       <div class="fr-cards">

packages/markform/tests/visual/snapshots/fill-record-failed.html

@@ -570,7 +570,7 @@
     <div class="fr-dashboard">
       <div class="fr-header">
         <div class="fr-header__model">claude-sonnet-4-20250514</div>
-        <div class="fr-header__time">Jan 30, 2026 at 6:30 AM</div>
+        <div class="fr-header__time">Jan 30, 2026 at 2:30 PM</div>
       </div>
 
       <div class="fr-banner fr-banner--error">

packages/markform/tests/visual/snapshots/fill-record-partial.html

@@ -570,7 +570,7 @@
     <div class="fr-dashboard">
       <div class="fr-header">
         <div class="fr-header__model">claude-sonnet-4-20250514</div>
-        <div class="fr-header__time">Jan 30, 2026 at 6:30 AM</div>
+        <div class="fr-header__time">Jan 30, 2026 at 2:30 PM</div>
       </div>
 
       <div class="fr-banner fr-banner--warning"><strong>⚠ PARTIAL:</strong> max_turns</div>