fix: harden startup and runtime flows

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: LessUp

src/App.tsx

@@ -2,11 +2,10 @@ import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
 import { Suspense, lazy } from 'react';
 import ErrorBoundary from '@/components/ui/ErrorBoundary';
 import LoadingSpinner from '@/components/ui/LoadingSpinner';
-import { ServicesProvider } from '@/core/services';
 
 // 懒加载页面组件
 const LandingPage = lazy(() => import('@/pages/LandingPage'));
-const AdvancedDigitalHumanPage = lazy(() => import('@/pages/AdvancedDigitalHumanPage'));
+const AdvancedDigitalHumanAppPage = lazy(() => import('@/pages/AdvancedDigitalHumanAppPage'));
 
 // 页面加载 fallback
 function PageLoader() {
@@ -20,22 +19,20 @@ function PageLoader() {
 export default function App() {
   return (
     <ErrorBoundary>
-      <ServicesProvider>
-        <Router>
-          <Suspense fallback={<PageLoader />}>
-            <Routes>
-              {/* Landing Page - 产品落地页 */}
-              <Route path="/" element={<LandingPage />} />
+      <Router>
+        <Suspense fallback={<PageLoader />}>
+          <Routes>
+            {/* Landing Page - 产品落地页 */}
+            <Route path="/" element={<LandingPage />} />
 
-              {/* App Route - 数字人应用 */}
-              <Route path="/app" element={<AdvancedDigitalHumanPage />} />
+            {/* App Route - 数字人应用 */}
+            <Route path="/app" element={<AdvancedDigitalHumanAppPage />} />
 
-              {/* Fallback - 防止未知 hash 路径导致空白页 */}
-              <Route path="*" element={<Navigate to="/" replace />} />
-            </Routes>
-          </Suspense>
-        </Router>
-      </ServicesProvider>
+            {/* Fallback - 防止未知 hash 路径导致空白页 */}
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </Suspense>
+      </Router>
     </ErrorBoundary>
   );
 }

src/__tests__/App.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import App from '@/App';
+
+const createServicesMock = vi.fn();
+
+vi.mock('@/core/createServices', () => ({
+  createServices: () => createServicesMock(),
+}));
+
+vi.mock('@/pages/LandingPage', () => ({
+  default: () => <div data-testid="landing-page" />,
+}));
+
+vi.mock('@/pages/AdvancedDigitalHumanPage', () => ({
+  default: () => <div data-testid="advanced-page" />,
+}));
+
+function buildServices() {
+  return {
+    engine: { dispose: vi.fn() },
+    tts: { dispose: vi.fn() },
+    asr: { dispose: vi.fn() },
+    dialogue: { reset: vi.fn() },
+  };
+}
+
+describe('App routing', () => {
+  beforeEach(() => {
+    createServicesMock.mockReset();
+    createServicesMock.mockReturnValue(buildServices());
+    window.location.hash = '#/';
+  });
+
+  it('does not create app services for the landing route', async () => {
+    render(<App />);
+
+    expect(await screen.findByTestId('landing-page')).toBeInTheDocument();
+    await waitFor(() => expect(createServicesMock).not.toHaveBeenCalled());
+  });
+
+  it('creates app services for the app route', async () => {
+    window.location.hash = '#/app';
+
+    render(<App />);
+
+    expect(await screen.findByTestId('advanced-page')).toBeInTheDocument();
+    await waitFor(() => expect(createServicesMock).toHaveBeenCalledTimes(1));
+  });
+});

src/__tests__/deviceCapability.test.ts

@@ -6,6 +6,7 @@ import {
   meetsMinimumTier,
   getAdaptiveQuality,
 } from '../core/performance/deviceCapability';
+import { loggers } from '../lib/logger';
 
 describe('Device Capability Detection', () => {
   beforeEach(() => {
@@ -87,6 +88,33 @@ describe('Device Capability Detection', () => {
     expect(caps1.tier).toBe(caps2.tier);
   });
 
+  it('falls back to low-tier capabilities when canvas probing throws', () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(() => {
+      throw new Error('canvas unavailable');
+    });
+    const errorSpy = vi.spyOn(loggers.core, 'error');
+
+    const caps = detectDeviceCapabilities();
+
+    expect(caps.tier).toBe('low');
+    expect(caps.supportsWebGL2).toBe(false);
+    expect(errorSpy).not.toHaveBeenCalled();
+  });
+
+  it('creates a fresh fallback snapshot after a failed capability probe', () => {
+    vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(() => {
+      throw new Error('canvas unavailable');
+    });
+
+    const caps1 = detectDeviceCapabilities();
+    refreshDeviceCapabilities();
+    const caps2 = detectDeviceCapabilities();
+
+    expect(caps1).not.toBe(caps2);
+    expect(caps2.tier).toBe('low');
+    expect(caps2.supportsWebGL2).toBe(false);
+  });
+
   describe('meetsMinimumTier', () => {
     it('should return true for low requirement', () => {
       // Any device should meet low requirement

src/__tests__/main.test.tsx

@@ -0,0 +1,34 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const renderMock = vi.fn();
+
+vi.mock('react-dom/client', () => ({
+  createRoot: () => ({
+    render: renderMock,
+  }),
+}));
+
+vi.mock('sonner', () => ({
+  Toaster: () => null,
+}));
+
+describe('main entry redirect restore', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    renderMock.mockReset();
+    sessionStorage.clear();
+    window.location.hash = '';
+    document.body.innerHTML = '<div id="root"></div>';
+  });
+
+  it('clears malformed redirect payloads and warns instead of retrying forever', async () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    sessionStorage.setItem('spa_redirect', '{bad json');
+
+    await import('../main.tsx');
+
+    expect(sessionStorage.getItem('spa_redirect')).toBeNull();
+    expect(warnSpy).toHaveBeenCalled();
+    expect(renderMock).toHaveBeenCalledTimes(1);
+  });
+});

src/__tests__/presetActions.test.ts

@@ -0,0 +1,39 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { PresetActionRunner } from '@/core/voiceCommand/presetActions';
+import type { AvatarControls } from '@/core/voiceCommand/types';
+
+function createAvatarControls(): AvatarControls {
+  return {
+    setEmotion: vi.fn(),
+    setExpression: vi.fn(),
+    setAnimation: vi.fn(),
+    setBehavior: vi.fn(),
+    speak: vi.fn(),
+  };
+}
+
+describe('PresetActionRunner', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it('drops completed timers before clearTimers runs', () => {
+    const avatar = createAvatarControls();
+    const runner = new PresetActionRunner(avatar);
+    const clearTimeoutSpy = vi.spyOn(globalThis, 'clearTimeout');
+
+    runner.scheduleExpressionReset('smile', 1000);
+    vi.advanceTimersByTime(1000);
+    clearTimeoutSpy.mockClear();
+
+    runner.clearTimers();
+
+    expect(avatar.setExpression).toHaveBeenCalledWith('neutral');
+    expect(clearTimeoutSpy).not.toHaveBeenCalled();
+  });
+});

src/__tests__/useTheme.test.tsx

@@ -0,0 +1,21 @@
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { useTheme } from '@/hooks/useTheme';
+
+describe('useTheme', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    document.documentElement.className = '';
+  });
+
+  it('falls back to system theme when persisted theme is invalid', () => {
+    window.localStorage.setItem('theme', 'sepia');
+
+    const { result } = renderHook(() => useTheme());
+
+    expect(result.current.theme).toBe('system');
+    expect(result.current.resolvedTheme).toBe('light');
+    expect(document.documentElement.classList.contains('sepia')).toBe(false);
+    expect(window.localStorage.getItem('theme')).toBe('system');
+  });
+});

src/core/performance/deviceCapability.ts

@@ -53,6 +53,31 @@ const DEFAULT_CAPABILITIES: DeviceCapabilities = {
 
 let cachedCapabilities: DeviceCapabilities | null = null;
 
+function createCapabilitiesSnapshot(
+  overrides: Partial<DeviceCapabilities> = {},
+): DeviceCapabilities {
+  return {
+    ...DEFAULT_CAPABILITIES,
+    detectedAt: Date.now(),
+    ...overrides,
+  };
+}
+
+function safeGetCanvasContext(
+  canvas: HTMLCanvasElement,
+  contextId: 'webgl2' | 'webgl' | 'experimental-webgl',
+): RenderingContext | null {
+  try {
+    return canvas.getContext(contextId);
+  } catch {
+    return null;
+  }
+}
+
+function isCanvasProbeUnavailable(): boolean {
+  return typeof navigator !== 'undefined' && /\bjsdom\b/i.test(navigator.userAgent);
+}
+
 /**
  * Detect WebGL support and versions
  */
@@ -61,18 +86,22 @@ function detectWebGLSupport(): { supported: boolean; version: 1 | 2 | null } {
     return { supported: false, version: null };
   }
 
+  if (isCanvasProbeUnavailable()) {
+    return { supported: false, version: null };
+  }
+
   const canvas = document.createElement('canvas');
 
   // Try WebGL 2 first
-  const gl2 = canvas.getContext('webgl2');
+  const gl2 = safeGetCanvasContext(canvas, 'webgl2');
   if (gl2) {
     return { supported: true, version: 2 };
   }
 
   // Fall back to WebGL 1
   const gl1 =
-    canvas.getContext('webgl') ||
-    (canvas.getContext('experimental-webgl') as WebGLRenderingContext | null);
+    safeGetCanvasContext(canvas, 'webgl') ||
+    (safeGetCanvasContext(canvas, 'experimental-webgl') as WebGLRenderingContext | null);
   if (gl1) {
     return { supported: true, version: 1 };
   }
@@ -207,25 +236,30 @@ export function detectDeviceCapabilities(): DeviceCapabilities {
     const { supported, version } = detectWebGLSupport();
 
     if (!supported) {
-      logger.warn('WebGL not supported, using fallback capabilities');
-      cachedCapabilities = {
-        ...DEFAULT_CAPABILITIES,
+      if (!isCanvasProbeUnavailable()) {
+        logger.warn('WebGL not supported, using fallback capabilities');
+      }
+      cachedCapabilities = createCapabilitiesSnapshot({
         supportsWebGL2: false,
         tier: 'low',
-        detectedAt: Date.now(),
-      };
+      });
       return cachedCapabilities;
     }
 
     // Create temporary canvas for detailed detection
     const canvas = document.createElement('canvas');
     const gl =
-      (canvas.getContext('webgl2') as WebGL2RenderingContext | null) ||
-      (canvas.getContext('webgl') as WebGLRenderingContext | null);
+      (safeGetCanvasContext(canvas, 'webgl2') as WebGL2RenderingContext | null) ||
+      (safeGetCanvasContext(canvas, 'webgl') as WebGLRenderingContext | null);
 
     if (!gl) {
-      logger.warn('Could not get WebGL context');
-      cachedCapabilities = DEFAULT_CAPABILITIES;
+      if (!isCanvasProbeUnavailable()) {
+        logger.warn('Could not get WebGL context');
+      }
+      cachedCapabilities = createCapabilitiesSnapshot({
+        supportsWebGL2: false,
+        tier: 'low',
+      });
       return cachedCapabilities;
     }
 
@@ -234,7 +268,7 @@ export function detectDeviceCapabilities(): DeviceCapabilities {
     const tier = detectDeviceTier(version, gpuMemory, dpr);
     const tierSettings = getTierSettings(tier);
 
-    cachedCapabilities = {
+    cachedCapabilities = createCapabilitiesSnapshot({
       tier,
       supportsWebGL2: version === 2,
       estimatedGPUMemoryMB: gpuMemory,
@@ -245,8 +279,7 @@ export function detectDeviceCapabilities(): DeviceCapabilities {
       enablePostProcessing: tierSettings.enablePostProcessing!,
       maxShadowMapSize: tierSettings.maxShadowMapSize!,
       prefersReducedMotion: getPrefersReducedMotion(),
-      detectedAt: Date.now(),
-    };
+    });
 
     logger.info('Device capabilities detected:', {
       tier,
@@ -258,7 +291,7 @@ export function detectDeviceCapabilities(): DeviceCapabilities {
     return cachedCapabilities;
   } catch (error) {
     logger.error('Error detecting device capabilities:', error);
-    cachedCapabilities = DEFAULT_CAPABILITIES;
+    cachedCapabilities = createCapabilitiesSnapshot();
     return cachedCapabilities;
   }
 }

src/core/voiceCommand/presetActions.ts

@@ -138,6 +138,10 @@ export class PresetActionRunner {
   }
 
   private scheduleReset(delay: number, fn: () => void): void {
-    this.timers.push(setTimeout(fn, delay));
+    const timer = setTimeout(() => {
+      this.timers.splice(this.timers.indexOf(timer), 1);
+      fn();
+    }, delay);
+    this.timers.push(timer);
   }
 }

src/hooks/useTheme.ts

@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 
 export type Theme = 'light' | 'dark' | 'system';
 type ResolvedTheme = 'light' | 'dark';
+const VALID_THEMES: ReadonlySet<Theme> = new Set(['light', 'dark', 'system']);
 
 function getSystemTheme(): ResolvedTheme {
   if (typeof window === 'undefined') return 'dark';
@@ -12,9 +13,14 @@ function resolveTheme(theme: Theme): ResolvedTheme {
   return theme === 'system' ? getSystemTheme() : theme;
 }
 
+function isValidTheme(value: string | null): value is Theme {
+  return value !== null && VALID_THEMES.has(value as Theme);
+}
+
 function getStoredTheme(): Theme {
   try {
-    return (localStorage.getItem('theme') as Theme) || 'system';
+    const storedTheme = localStorage.getItem('theme');
+    return isValidTheme(storedTheme) ? storedTheme : 'system';
   } catch {
     return 'system';
   }