🎨 Align CLI reporter with BearDen (#280)

## Why

The CLI reporter branch was still carrying the old embedded
Observatory-era style contract. This brings it forward onto current main
and wires the reporter to the released BearDen package while keeping
CLI-specific reporter components local.

## What changed

- Rebased the existing local TDD reporter branch onto latest main after
the pnpm migration.
- Added `@vizzly-testing/bear-den@^0.1.1` as a real CLI dependency.
- Imported BearDen styles/tokens before CLI reporter-specific styles.
- Kept reporter-owned components local for now, but renamed obsolete
Observatory comments so BearDen is the current mental model.
- Added the fresh BearDen package to the pnpm minimum-release-age
allowlist.

## Verification

- `pnpm run lint` passes with 3 existing optional-chain warnings.
- `pnpm run build` passes.
- `pnpm run test:reporter` passes: 35 passed, 5 skipped.

Author: Robdel12

clients/static-site/src/config-schema.js

@@ -46,6 +46,7 @@ let screenshotSchema = z.object({
   fullPage: z.boolean().default(true),
   omitBackground: z.boolean().default(false),
   timeout: z.number().int().positive().default(45_000), // 45 seconds
+  requestTimeout: z.number().int().positive().optional(),
 });
 
 /**

clients/static-site/src/screenshot.js

@@ -68,13 +68,15 @@ let DEFAULT_SCREENSHOT_TIMEOUT = 45_000;
  * @param {boolean} [options.fullPage=true] - Capture full page
  * @param {boolean} [options.omitBackground=false] - Omit background (transparent)
  * @param {number} [options.timeout=45000] - Screenshot timeout in ms
+ * @param {number} [options.requestTimeout] - Vizzly request timeout in ms
  * @returns {Promise<Buffer>} Screenshot buffer
  */
 export async function captureScreenshot(page, options = {}) {
   let {
     fullPage = true,
     omitBackground = false,
     timeout = DEFAULT_SCREENSHOT_TIMEOUT,
+    requestTimeout: _requestTimeout,
   } = options;
 
   // Playwright has built-in timeout support
@@ -105,6 +107,10 @@ export async function captureAndSendScreenshot(
   let properties = generateScreenshotProperties(viewport);
   properties.url = page.url();
   let screenshot = await captureScreenshot(page, screenshotOptions);
+  let requestTimeout =
+    screenshotOptions.requestTimeout ||
+    screenshotOptions.timeout ||
+    DEFAULT_SCREENSHOT_TIMEOUT;
 
-  await vizzlyScreenshot(name, screenshot, { properties });
+  await vizzlyScreenshot(name, screenshot, { properties, requestTimeout });
 }

package.json

@@ -73,7 +73,7 @@
     "test": "node --experimental-test-coverage --test --test-concurrency=1 --test-reporter=spec $(find tests -name '*.test.js')",
     "test:watch": "node --test --test-reporter=spec --watch $(find tests -name '*.test.js')",
     "test:reporter": "playwright test --config=tests/reporter/playwright.config.js",
-    "test:reporter:visual": "node bin/vizzly.js run \"pnpm run test:reporter\"",
+    "test:reporter:visual": "node bin/vizzly.js tdd run \"pnpm run test:reporter\" --no-open",
     "test:swift:e2e": "pnpm run build && node clients/swift/scripts/run-e2e.js",
     "test:tui": "node --test --test-reporter=spec tests/tui/*.test.js",
     "test:tui:docker": "./tests/tui/run-tui-tests.sh",
@@ -92,6 +92,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@vizzly-testing/bear-den": "0.1.2",
     "@vizzly-testing/honeydiff": "^0.10.3",
     "ansis": "^4.2.0",
     "commander": "^14.0.0",

pnpm-lock.yaml

@@ -14,6 +14,7 @@ minimumReleaseAge: 10080
 minimumReleaseAgeStrict: true
 minimumReleaseAgeIgnoreMissingTime: false
 minimumReleaseAgeExclude:
+  - '@vizzly-testing/bear-den@0.1.2'
   - '@vizzly-testing/honeydiff@0.10.3'
 onlyBuiltDependencies:
   - canvas

pnpm-workspace.yaml

@@ -79,7 +79,7 @@ import { saveUserPath } from './utils/global-config.js';
 import * as output from './utils/output.js';
 import { getPackageVersion } from './utils/package-info.js';
 
-// Custom help formatting with Observatory design system
+// Custom help formatting with BearDen design system
 const formatHelp = (cmd, helper) => {
   let c = colors;
   let lines = [];
@@ -591,7 +591,7 @@ tddCmd
       if (reportResult.success) {
         const reportUrl = getReportFileUrl(reportResult.reportPath);
         output.print(
-          `  ${colors.brand.textTertiary('→')} Report: ${colors.blue(reportUrl)}`
+          `  ${colors.brand.textTertiary('→')} Report: ${colors.info(reportUrl)}`
         );
         output.blank();
 

src/cli.js

@@ -199,6 +199,7 @@ function createSimpleClient(serverUrl) {
         let isFilePath = typeof imageBuffer === 'string';
         let image = isFilePath ? imageBuffer : imageBuffer.toString('base64');
         let type = isFilePath ? 'file-path' : 'base64';
+        let requestTimeout = options.requestTimeout || DEFAULT_TIMEOUT_MS;
 
         let properties = createScreenshotProperties(options);
 
@@ -212,7 +213,7 @@ function createSimpleClient(serverUrl) {
             type,
             properties,
           },
-          DEFAULT_TIMEOUT_MS
+          requestTimeout
         );
         let httpMs = Date.now() - httpStart;
 

src/client/index.js

@@ -242,15 +242,15 @@ export async function doctorCommand(
         for (let item of contextItems) {
           if (item.type === 'success') {
             output.printErr(
-              `  ${colors.green('✓')} ${colors.gray(item.label)}  ${colors.white(item.value)}`
+              `  ${colors.success('✓')} ${colors.brand.textMuted(item.label)}  ${colors.white(item.value)}`
             );
           } else if (item.type === 'warning') {
             output.printErr(
-              `  ${colors.yellow('!')} ${colors.gray(item.label)}  ${colors.yellow(item.value)}`
+              `  ${colors.yellow('!')} ${colors.brand.textMuted(item.label)}  ${colors.yellow(item.value)}`
             );
           } else {
             output.printErr(
-              `  ${colors.dim('○')} ${colors.gray(item.label)}  ${colors.dim(item.value)}`
+              `  ${colors.dim('○')} ${colors.brand.textMuted(item.label)}  ${colors.dim(item.value)}`
             );
           }
         }
@@ -260,7 +260,7 @@ export async function doctorCommand(
       output.printErr('');
       output.printErr(`  ${colors.dim('─'.repeat(52))}`);
       output.printErr(
-        `  ${colors.dim('Docs')} ${colors.cyan(colors.underline('docs.vizzly.dev'))}  ${colors.dim('GitHub')} ${colors.cyan(colors.underline('github.com/vizzly-testing/cli'))}`
+        `  ${colors.dim('Docs')} ${colors.info(colors.underline('docs.vizzly.dev'))}  ${colors.dim('GitHub')} ${colors.info(colors.underline('github.com/vizzly-testing/cli'))}`
       );
 
       // Emit structured data in verbose mode (in addition to visual output)

src/commands/doctor.js

@@ -668,7 +668,7 @@ export async function previewCommand(
       if (result.reusedBlobs > 0) {
         let savedBytes = result.totalBytes - result.newBytes;
         output.print(
-          `  ${colors.brand.textTertiary('Deduped')}     ${colors.green(result.reusedBlobs)} files (saved ${formatBytes(savedBytes)})`
+          `  ${colors.brand.textTertiary('Deduped')}     ${colors.success(result.reusedBlobs)} files (saved ${formatBytes(savedBytes)})`
         );
       }
 
@@ -680,7 +680,7 @@ export async function previewCommand(
 
       output.blank();
       output.print(
-        `  ${colors.brand.textTertiary('Preview')}     ${colors.cyan(colors.underline(result.previewUrl))}`
+        `  ${colors.brand.textTertiary('Preview')}     ${colors.info(colors.underline(result.previewUrl))}`
       );
 
       // Open in browser if requested

src/commands/preview.js

@@ -397,7 +397,7 @@ export async function runCommand(
 
         if (displayUrl) {
           output.print(
-            `  ${colors.brand.textTertiary('Results')}      ${colors.cyan(colors.underline(displayUrl))}`
+            `  ${colors.brand.textTertiary('Results')}      ${colors.info(colors.underline(displayUrl))}`
           );
         } else {
           output.print(