complexdatacollective · jthrilly · Feb 9, 2026 · Sep 19, 2025 · Sep 22, 2025 · Sep 28, 2025
diff --git a/.github/workflows/cleanup-e2e-reports.yml b/.github/workflows/cleanup-e2e-reports.yml
@@ -130,7 +130,7 @@ jobs:
             </style>
           </head>
           <body>
-            <h1>Fresco E2E Test Reports</h1>
+            <h1>🎭 Fresco E2E Test Reports</h1>
             <p>No failed test reports available.</p>
           </body>
           </html>
@@ -163,7 +163,7 @@ jobs:
             </style>
           </head>
           <body>
-            <h1>Fresco E2E Test Reports</h1>
+            <h1>🎭 Fresco E2E Test Reports</h1>
             <p>Failed test reports by PR:</p>
           $(cat index.html.tmp)
           </body>

diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -114,6 +114,37 @@ jobs:
           cp -r new-report/playwright-report/* merged/pr-${{ github.event.pull_request.number }}/
 
           # Generate index page listing all reports
+          cat > merged/index.html << 'EOF'
+          <!DOCTYPE html>
+          <html lang="en">
+          <head>
+            <meta charset="UTF-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Fresco E2E Test Reports</title>
+            <style>
+              body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
+              h1 { color: #333; }
+              ul { list-style: none; padding: 0; }
+              li { padding: 10px 0; border-bottom: 1px solid #eee; }
+              a { color: #0066cc; text-decoration: none; }
+              a:hover { text-decoration: underline; }
+              .timestamp { color: #666; font-size: 0.9em; }
+            </style>
+          </head>
+          <body>
+            <h1>🎭 Fresco E2E Test Reports</h1>
+            <p>Failed test reports by PR:</p>
+            <ul id="reports"></ul>
+            <script>
+              const reportsEl = document.getElementById('reports');
+              const prDirs = Array.from(document.querySelectorAll('a[href^="pr-"]')).map(a => a.getAttribute('href'));
+              // This will be populated by the directory listing
+            </script>
+          </body>
+          </html>
+          EOF
+
+          # Create a simple directory listing
           echo "<ul>" > merged/index.html.tmp
           for dir in merged/pr-*/; do
             if [ -d "$dir" ]; then
@@ -141,7 +172,7 @@ jobs:
             </style>
           </head>
           <body>
-            <h1>Fresco E2E Test Reports</h1>
+            <h1>🎭 Fresco E2E Test Reports</h1>
             <p>Failed test reports by PR:</p>
           $(cat merged/index.html.tmp)
           </body>
@@ -163,11 +194,11 @@ jobs:
         with:
           issue-number: ${{ github.event.pull_request.number }}
           body: |
-            ## Playwright E2E Test Report
+            ## 🎭 Playwright E2E Test Report
 
-            Tests failed. View the full report here:
+            ❌ **Tests failed.** View the full report here:
 
-            **[https://complexdatacollective.github.io/Fresco/pr-${{ github.event.pull_request.number }}/](https://complexdatacollective.github.io/Fresco/pr-${{ github.event.pull_request.number }}/)**
+            👉 **[https://complexdatacollective.github.io/Fresco/pr-${{ github.event.pull_request.number }}/](https://complexdatacollective.github.io/Fresco/pr-${{ github.event.pull_request.number }}/)**
 
             <details>
             <summary>Report details</summary>

diff --git a/.gitignore b/.gitignore
@@ -49,11 +49,21 @@ yarn-error.log*
 storybook-static
 
 # e2e testing
+/tests/e2e/playwright-report/
+/tests/e2e/test-results/
+/tests/e2e/screenshots/
+/tests/e2e/.auth/
+/tests/e2e/.context-data.json
 /tests/e2e/.db-snapshots/
 /playwright-report/
 /test-results/
 /playwright/.cache/
 
 # Serena
 .serena
+
+# playwright MCP
+./playwright-mcp
+
 .pnpm-store
+.pnpm-docker-store
diff --git a/.playwright-mcp/page-2025-12-04T13-07-07-849Z.png b/.playwright-mcp/page-2025-12-04T13-07-07-849Z.png
diff --git a/.prettierrc b/.prettierrc
@@ -4,5 +4,6 @@
   "quoteProps": "consistent",
   "singleQuote": true,
   "tabWidth": 2,
-  "useTabs": false
+  "useTabs": false,
+  "tailwindFunctions": ["cva", "cx"]
 }
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,28 +1,24 @@
-import type { StorybookConfig } from '@storybook/nextjs-vite';
+import { defineMain } from '@storybook/nextjs-vite/node';
 
-const config: StorybookConfig = {
-  stories: [
-    '../{app,components,lib}/**/*.mdx',
-    '../{app,components,lib}/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+export default defineMain({
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-vitest',
+    '@chromatic-com/storybook',
   ],
-  addons: [],
   framework: {
     name: '@storybook/nextjs-vite',
-    options: {},
+    options: {
+      builder: {
+        // Customize the Vite builder options here
+        viteConfigPath: './vitest.config.ts',
+      },
+    },
   },
-  staticDirs: ['../public'],
-  viteFinal(config) {
-    if (config.optimizeDeps) {
-      config.optimizeDeps.esbuildOptions = {
-        ...config.optimizeDeps.esbuildOptions,
-        loader: {
-          ...config.optimizeDeps.esbuildOptions?.loader,
-          '.js': 'jsx',
-        },
-      };
-    }
-
-    return config;
+  staticDirs: ['../public', { from: '../styles/themes', to: '/styles/themes' }],
+  typescript: {
+    check: false,
   },
-};
-export default config;
+  stories: ['../**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)'],
+});
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,43 +1,81 @@
-import type { Preview } from '@storybook/nextjs-vite';
+import addonA11y from '@storybook/addon-a11y';
+import addonDocs from '@storybook/addon-docs';
+import addonVitest from '@storybook/addon-vitest';
+import { definePreview } from '@storybook/nextjs-vite';
+import { StrictMode } from 'react';
 import Providers from '../components/Providers';
 import '../styles/globals.css';
+import { getInitialTheme, globalTypes, withTheme } from './theme-switcher';
 
-const preview: Preview = {
+// @chromatic-com/storybook is not included here because it doesn't export a
+// CSF Next compatible preview addon. It only provides server-side preset
+// functionality and manager UI, so it's configured in main.ts only.
+// See: https://github.com/chromaui/addon-visual-tests/pull/404
+
+export default definePreview({
+  addons: [addonDocs(), addonA11y(), addonVitest()],
   parameters: {
+    options: {
+      storySort: {
+        order: [
+          'Design System',
+          ['Colors', 'Elevation', 'Type Scale', 'Typography'],
+          'UI',
+          'Systems',
+          ['Form', 'Dialogs', 'DragAndDrop'],
+          'Interview',
+          '*',
+        ],
+      },
+    },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
-    backgrounds: {
-      options: {
-        light: {
-          name: 'light',
-          value: '#ffffff',
-        },
-
-        dark: {
-          name: 'dark',
-          value: '#1f1f1f',
-        }
-      }
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
+      /**
+       * base-ui dialog adds focus guards which are picked up by a11y tests
+       * but are necessary for proper focus management within the dialog,
+       * and compatible with WCAG guidelines, so we disable this rule here.
+       */
+      config: {
+        rules: [
+          {
+            id: 'aria-hidden-focus',
+            selector: '[data-base-ui-focus-guard]',
+            enabled: false,
+          },
+        ],
+      },
     },
   },
 
   decorators: [
     (Story) => (
-      <Providers>
-        <Story />
-      </Providers>
+      // nextjs-vite doesn't seem to pick up the strict mode setting from next config
+      <StrictMode>
+        {/**
+         * required by base-ui: https://base-ui.com/react/overview/quick-start#portals
+         */}
+        <div className="root h-screen">
+          <Providers>
+            <Story />
+          </Providers>
+        </div>
+      </StrictMode>
     ),
+    withTheme,
   ],
 
-  initialGlobals: {
-    backgrounds: {
-      value: 'light'
-    }
-  }
-};
+  globalTypes,
 
-export default preview;
+  initialGlobals: {
+    theme: getInitialTheme(),
+  },
+});
diff --git a/.storybook/theme-switcher.tsx b/.storybook/theme-switcher.tsx
@@ -0,0 +1,135 @@
+import type { Decorator } from '@storybook/nextjs-vite';
+import { useLayoutEffect, useState } from 'react';
+
+const THEME_KEY = 'theme';
+const STORAGE_KEY = 'storybook-theme-preference';
+
+const themes = {
+  dashboard: {
+    name: 'Dashboard',
+    path: '/styles/themes/default.css',
+  },
+  interview: {
+    name: 'Interview',
+    path: '/styles/themes/interview.css',
+  },
+} as const;
+
+type ThemeKey = keyof typeof themes;
+
+const THEME_LINK_ID = 'storybook-theme-stylesheet';
+
+function getStoredTheme(): ThemeKey | null {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && stored in themes) {
+      return stored as ThemeKey;
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn('Failed to read theme from localStorage:', error);
+  }
+  return null;
+}
+
+function setStoredTheme(theme: ThemeKey) {
+  try {
+    localStorage.setItem(STORAGE_KEY, theme);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn('Failed to save theme to localStorage:', error);
+  }
+}
+
+function loadTheme(themeKey: ThemeKey): Promise<void> {
+  return new Promise((resolve) => {
+    const existingLink = document.getElementById(
+      THEME_LINK_ID,
+    ) as HTMLLinkElement | null;
+
+    if (existingLink?.href.endsWith(themes[themeKey].path)) {
+      resolve();
+      return;
+    }
+
+    if (existingLink) {
+      existingLink.remove();
+    }
+
+    const link = document.createElement('link');
+    link.id = THEME_LINK_ID;
+    link.rel = 'stylesheet';
+    link.href = themes[themeKey].path;
+
+    link.onload = () => resolve();
+    link.onerror = () => resolve();
+
+    document.head.appendChild(link);
+
+    setTimeout(resolve, 1000);
+  });
+}
+
+function ThemeWrapper({
+  selectedTheme,
+  children,
+}: {
+  selectedTheme: ThemeKey;
+  children: React.ReactNode;
+}) {
+  const [isLoading, setIsLoading] = useState(true);
+
+  useLayoutEffect(() => {
+    setIsLoading(true);
+    void loadTheme(selectedTheme).then(() => {
+      setStoredTheme(selectedTheme);
+      setIsLoading(false);
+    });
+  }, [selectedTheme]);
+
+  // Apply data-theme to the HTML element for dark mode
+  useLayoutEffect(() => {
+    document.documentElement.setAttribute('data-theme', selectedTheme);
+  }, [selectedTheme]);
+
+  return (
+    <div
+      data-theme={selectedTheme}
+      className="bg-background text-text"
+      style={{ opacity: isLoading ? 0 : 1, transition: 'opacity 150ms' }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export const withTheme: Decorator = (Story, context) => {
+  const selectedTheme = (context.globals[THEME_KEY] as ThemeKey) ?? 'default';
+
+  return (
+    <ThemeWrapper selectedTheme={selectedTheme}>
+      <Story />
+    </ThemeWrapper>
+  );
+};
+
+export const globalTypes = {
+  [THEME_KEY]: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: getStoredTheme() ?? 'default',
+    toolbar: {
+      icon: 'paintbrush' as const,
+      items: Object.entries(themes).map(([key, { name }]) => ({
+        value: key,
+        title: name,
+      })),
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+};
+
+export function getInitialTheme(): ThemeKey {
+  return getStoredTheme() ?? 'dashboard';
+}