✨ Add static HTML report generation for TDD run (#168)

## Summary

- Add static HTML report generation for `vizzly tdd run` that creates a
self-contained report at `.vizzly/report/index.html`
- Use SSR with React's `renderToString` for true static HTML output (no
JavaScript required to view)
- Add `--no-open` flag to skip auto-opening the report in browser
- Add `--keep-server` flag to use interactive live dashboard instead of
static report
- Clean up dead SPA static mode code that was never fully implemented
- Use native `<details>/<summary>` HTML elements for expand/collapse
functionality

<img width="1175" height="869" alt="image"
src="https://github.com/user-attachments/assets/a4648259-43c4-448a-bf7b-af284ed354b9"
/>

This should address #159 

## Technical Details

**SSR Architecture:**
- New Vite SSR build config (`vite.ssr.config.js`) outputs
Node-compatible ES module
- Hook-free React component (`static-report-view.jsx`) for SSR
compatibility
- SSR entry point uses `renderToString` from `react-dom/server`
- CSS inlined in `<style>` tag, images copied to `report/images/` folder

**Report UI:**
- Dark theme with amber brand accent
- Grouped by status: Visual Changes → New → Passed (collapsed by
default)
- Side-by-side baseline vs current comparison when expanded
- Diff image shown separately below
- Summary bar with test counts and status

**Cleanup:**
- Removed `isStaticMode()` function from API client
- Removed unused `useStaticMode()` hook
- Removed static mode handling from TDD queries and SSE hooks
- Removed mock data from dev `index.html`

## Test plan

- [x] Run `vizzly tdd run "npm run test:reporter"` and verify static
report opens
- [x] Verify report works offline when opened as `file://` URL
- [x] Verify images load correctly in the static report
- [x] Test `--no-open` flag skips browser opening
- [x] Test `--keep-server` flag shows live dashboard instead
- [x] Verify build passes with `npm run build`
- [x] Verify existing tests pass with `npm test`

Author: Robdel12

clients/ember/package-lock.json

@@ -247,6 +247,14 @@ export async function vizzlySnapshot(name, options = {}) {
 
     if (!response.ok) {
       let errorText = await response.text();
+
+      // Check if this is a "no server" error - gracefully skip instead of failing
+      // This allows tests to pass when Vizzly isn't running (like Percy behavior)
+      if (errorText.includes('No Vizzly server found')) {
+        console.warn('[vizzly] Vizzly server not running. Skipping visual snapshot.');
+        return { skipped: true, reason: 'no-server' };
+      }
+
       throw new Error(`Vizzly snapshot failed: ${errorText}`);
     }
 

clients/ember/src/test-support/index.js

@@ -58,11 +58,12 @@
   ],
   "scripts": {
     "start": "node src/index.js",
-    "build": "npm run clean && npm run compile && npm run build:reporter && npm run copy-types",
+    "build": "npm run clean && npm run compile && npm run build:reporter && npm run build:reporter-ssr && npm run copy-types",
     "clean": "rimraf dist",
     "compile": "babel src --out-dir dist --ignore '**/*.test.js'",
     "copy-types": "mkdir -p dist/types && cp src/types/*.d.ts dist/types/",
     "build:reporter": "cd src/reporter && vite build",
+    "build:reporter-ssr": "cd src/reporter && vite build --config vite.ssr.config.js",
     "dev:reporter": "cd src/reporter && vite --config vite.dev.config.js",
     "test:types": "tsd",
     "prepublishOnly": "npm run build",

package.json

@@ -30,6 +30,11 @@ import { validateWhoamiOptions, whoamiCommand } from './commands/whoami.js';
 import { createPluginServices } from './plugin-api.js';
 import { loadPlugins } from './plugin-loader.js';
 import { createServices } from './services/index.js';
+import {
+  generateStaticReport,
+  getReportFileUrl,
+} from './services/static-report-generator.js';
+import { openBrowser } from './utils/browser.js';
 import { colors } from './utils/colors.js';
 import { loadConfig } from './utils/config-loader.js';
 import { getContext } from './utils/context.js';
@@ -411,6 +416,7 @@ tddCmd
     '--set-baseline',
     'Accept current screenshots as new baseline (overwrites existing)'
   )
+  .option('--no-open', 'Skip opening report in browser')
   .action(async (command, options) => {
     const globalOptions = program.opts();
 
@@ -449,23 +455,27 @@ tddCmd
     process.once('SIGINT', sigintHandler);
     process.once('SIGTERM', sigtermHandler);
 
-    // If there are comparisons, keep server running for review
+    // If there are comparisons, generate static report
     const hasComparisons = result?.comparisons?.length > 0;
     if (hasComparisons) {
-      output.print(
-        `  ${colors.brand.textTertiary('→')} Press ${colors.white('Enter')} to stop server`
-      );
-      output.blank();
-
-      // Wait for user to press Enter
-      await new Promise(resolve => {
-        process.stdin.setRawMode?.(false);
-        process.stdin.resume();
-        process.stdin.once('data', () => {
-          process.stdin.pause();
-          resolve();
-        });
-      });
+      // Note: Tests have completed at this point, so report-data.json is stable.
+      // The report reflects the final state of all comparisons.
+      const reportResult = await generateStaticReport(process.cwd());
+
+      if (reportResult.success) {
+        const reportUrl = getReportFileUrl(reportResult.reportPath);
+        output.print(
+          `  ${colors.brand.textTertiary('→')} Report: ${colors.blue(reportUrl)}`
+        );
+        output.blank();
+
+        // Open report in browser unless --no-open
+        if (options.open !== false) {
+          await openBrowser(reportUrl);
+        }
+      } else {
+        output.warn(`Failed to generate static report: ${reportResult.error}`);
+      }
     }
 
     // Remove signal handlers before normal cleanup to prevent double cleanup

src/cli.js

@@ -9,14 +9,6 @@
  * - api.auth.*   - Authentication
  */
 
-/**
- * Check if we're in static mode (data embedded in HTML)
- * Static mode is used for self-contained HTML reports
- */
-export function isStaticMode() {
-  return typeof window !== 'undefined' && window.VIZZLY_STATIC_MODE === true;
-}
-
 /**
  * Make a JSON API request
  * @param {string} url - Request URL
@@ -53,10 +45,6 @@ export const tdd = {
    * @returns {Promise<Object|null>}
    */
   async getReportData() {
-    // In static mode, return embedded data directly without fetching
-    if (isStaticMode() && window.VIZZLY_REPORTER_DATA) {
-      return window.VIZZLY_REPORTER_DATA;
-    }
     return fetchJson('/api/report-data');
   },