Add API error monitoring tests and error context snapshots for various browsers

- Created error context snapshots for Firefox, WebKit, and Chromium to capture UI state during API error monitoring.
- Implemented e2e tests for API error detection, including console errors, failed API requests, and proxy errors.
- Added functionality to ignore specific API patterns in monitoring assertions.
- Ensured tests validate the monitoring system's ability to detect and report errors effectively.

ccw/frontend/src/lib/theme.ts

@@ -0,0 +1,114 @@
+/**
+ * Theme System Configuration
+ * Defines available color schemes and theme modes for the CCW application
+ */
+
+export type ColorScheme = 'blue' | 'green' | 'orange' | 'purple';
+export type ThemeMode = 'light' | 'dark';
+export type ThemeId = `${ThemeMode}-${ColorScheme}`;
+
+export interface ThemeOption {
+  id: ColorScheme;
+  name: string;
+  accentColor: string; // Display color for theme selector UI
+  description: string;
+}
+
+export interface Theme {
+  id: ThemeId;
+  scheme: ColorScheme;
+  mode: ThemeMode;
+  name: string;
+}
+
+/**
+ * Available color schemes with display metadata
+ */
+export const COLOR_SCHEMES: ThemeOption[] = [
+  {
+    id: 'blue',
+    name: '经典蓝',
+    accentColor: '#3b82f6', // blue-500
+    description: 'Classic professional blue tone'
+  },
+  {
+    id: 'green',
+    name: '深邃绿',
+    accentColor: '#10b981', // emerald-500
+    description: 'Deep natural green tone'
+  },
+  {
+    id: 'orange',
+    name: '活力橙',
+    accentColor: '#f97316', // orange-500
+    description: 'Vibrant energetic orange tone'
+  },
+  {
+    id: 'purple',
+    name: '优雅紫',
+    accentColor: '#a855f7', // purple-500
+    description: 'Elegant creative purple tone'
+  }
+];
+
+/**
+ * Theme mode options
+ */
+export const THEME_MODES: Array<{id: ThemeMode; name: string}> = [
+  { id: 'light', name: '浅色' },
+  { id: 'dark', name: '深色' }
+];
+
+/**
+ * Generate full theme ID from scheme and mode
+ */
+export function getThemeId(scheme: ColorScheme, mode: ThemeMode): ThemeId {
+  return `${mode}-${scheme}`;
+}
+
+/**
+ * Parse theme ID into scheme and mode components
+ */
+export function parseThemeId(themeId: string): { scheme: ColorScheme; mode: ThemeMode } | null {
+  const match = themeId.match(/^(light|dark)-(blue|green|orange|purple)$/);
+  if (!match) return null;
+
+  return {
+    mode: match[1] as ThemeMode,
+    scheme: match[2] as ColorScheme
+  };
+}
+
+/**
+ * Get display name for a theme
+ */
+export function getThemeName(scheme: ColorScheme, mode: ThemeMode): string {
+  const schemeOption = COLOR_SCHEMES.find(s => s.id === scheme);
+  const modeOption = THEME_MODES.find(m => m.id === mode);
+
+  if (!schemeOption || !modeOption) return 'Unknown Theme';
+
+  return `${schemeOption.name} · ${modeOption.name}`;
+}
+
+/**
+ * All available theme combinations (8 total)
+ */
+export const ALL_THEMES: Theme[] = COLOR_SCHEMES.flatMap(scheme =>
+  THEME_MODES.map(mode => ({
+    id: getThemeId(scheme.id, mode.id),
+    scheme: scheme.id,
+    mode: mode.id,
+    name: getThemeName(scheme.id, mode.id)
+  }))
+);
+
+/**
+ * Default theme configuration
+ */
+export const DEFAULT_THEME: Theme = {
+  id: 'light-blue',
+  scheme: 'blue',
+  mode: 'light',
+  name: '经典蓝 · 浅色'
+};