feat: implement task management store with IPC integration

- Added a new task store in `src-react/stores/task.ts` to manage tasks and their statuses.
- Implemented functions for creating, executing, and retrying tasks, along with handling task progress and completion.
- Introduced persistence for tasks using IPC.
- Created utility functions for normalizing room types and building subtasks.
- Added a new CSS file for global styles in `src-react/styles.css`.
- Created runtime types in `src-react/types/runtime.ts` and exported them.
- Updated the main entry points for Vue and React applications to support dynamic framework loading.
- Refactored chat model interfaces and utility functions into `src/shared/chat-model.ts`.
- Updated TypeScript configuration to include paths for React components and types.
- Enhanced Vite configuration to support both Vue and React frameworks.

src-react/lib/theme.ts

@@ -0,0 +1,51 @@
+import type { ResolvedThemeMode, ThemeMode } from '../types/runtime';
+
+export function detectSystemTheme(): ResolvedThemeMode {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return 'light';
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+
+export function resolveAppliedTheme(
+  themeMode: ThemeMode,
+  systemTheme: ResolvedThemeMode = detectSystemTheme(),
+): ResolvedThemeMode {
+  return themeMode === 'system' ? systemTheme : themeMode;
+}
+
+export function applyThemeModeToDocument(
+  themeMode: ThemeMode,
+  systemTheme: ResolvedThemeMode = detectSystemTheme(),
+): ResolvedThemeMode {
+  const appliedTheme = resolveAppliedTheme(themeMode, systemTheme);
+
+  if (typeof document !== 'undefined') {
+    const root = document.documentElement;
+    root.classList.toggle('dark', appliedTheme === 'dark');
+    root.dataset.theme = appliedTheme;
+    root.style.colorScheme = appliedTheme;
+  }
+
+  return appliedTheme;
+}
+
+export function watchSystemTheme(onChange: (theme: ResolvedThemeMode) => void): () => void {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return () => {};
+  }
+
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  const handler = (event: MediaQueryListEvent) => {
+    onChange(event.matches ? 'dark' : 'light');
+  };
+
+  if (typeof mediaQuery.addEventListener === 'function') {
+    mediaQuery.addEventListener('change', handler);
+    return () => mediaQuery.removeEventListener('change', handler);
+  }
+
+  mediaQuery.addListener(handler);
+  return () => mediaQuery.removeListener(handler);
+}