@pheem49/mint 1.14.0 → 1.15.0

package/src/renderer/shared/css/veo-studio.css

@@ -58,7 +58,7 @@
 }
 
 .veo-studio-header-title svg {
-  color: var(--accent);
+  color: var(--interactive-fg);
   flex-shrink: 0;
 }
 
@@ -69,11 +69,11 @@
   border-radius: var(--radius-full);
   background: color-mix(in srgb, var(--accent) 15%, transparent);
   border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
-  color: var(--accent-hover);
+  color: var(--interactive-fg-hover);
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.03em;
-  text-transform: uppercase;
+  text-transform: none;
   margin-left: 4px;
 }
 
@@ -141,7 +141,7 @@
   font-size: 0.76rem;
   font-weight: 500;
   letter-spacing: 0.02em;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .veo-studio-label-hint {
@@ -309,7 +309,7 @@
   border-radius: var(--radius-lg);
   background: color-mix(in srgb, var(--accent) 15%, transparent);
   border: 1px solid var(--accent);
-  color: var(--accent);
+  color: var(--interactive-fg);
   font-size: 0.78rem;
   font-weight: 600;
   cursor: pointer;
@@ -352,7 +352,7 @@
 
 .veo-mode-btn.is-active {
   background: var(--panel-raised, #343436);
-  color: var(--accent, #10b981);
+  color: var(--interactive-fg);
   font-weight: 600;
   box-shadow: 0 1px 4px rgba(0,0,0,0.4);
 }
@@ -421,7 +421,7 @@
   border-radius: var(--radius-lg);
   background: var(--accent);
   border: 1px solid var(--accent);
-  color: #fff;
+  color: var(--text-on-accent);
   font-size: 0.90rem;
   font-weight: 600;
   cursor: pointer;
@@ -647,12 +647,13 @@
 .veo-studio-action-btn--primary {
   background: var(--accent);
   border-color: var(--accent);
-  color: #fff;
+  color: var(--text-on-accent);
 }
 
 .veo-studio-action-btn--primary:hover {
   background: var(--accent-hover);
   border-color: var(--accent-hover);
+  color: var(--text-on-accent);
 }
 
 /* ── Meta info ───────────────────────────────────────────── */
@@ -701,7 +702,7 @@
   color: var(--text-soft);
   font-size: 0.78rem;
   font-weight: 600;
-  text-transform: uppercase;
+  text-transform: none;
   letter-spacing: 0.04em;
 }
 
@@ -714,7 +715,7 @@
   padding: 0 5px;
   border-radius: var(--radius-full);
   background: color-mix(in srgb, var(--accent) 15%, transparent);
-  color: var(--accent-hover);
+  color: var(--interactive-fg-hover);
   font-size: 0.72rem;
   font-weight: 700;
 }
@@ -784,7 +785,7 @@
 
 .veo-studio-tab.is-active {
   background: var(--accent-subtle, rgba(100,200,150,0.12));
-  color: var(--accent, #4ade80);
+  color: var(--interactive-fg);
   border-color: var(--accent-muted, rgba(100,200,150,0.25));
 }
 
@@ -871,7 +872,7 @@
   gap: 7px;
   font-size: 0.82rem;
   font-weight: 600;
-  color: var(--accent, #4ade80);
+  color: var(--interactive-fg);
   margin-bottom: 4px;
 }
 
@@ -943,7 +944,7 @@
 }
 
 .veo-editor-log-entry.is-success {
-  color: var(--accent, #4ade80);
+  color: var(--interactive-fg);
 }
 
 .veo-editor-log-entry.is-error {
@@ -994,7 +995,7 @@
 }
 
 .veo-studio-fablemint-notice p a {
-  color: var(--accent);
+  color: var(--interactive-fg);
 }
 
 .veo-studio-fablemint-notice p code,
@@ -1040,7 +1041,7 @@
   height: 22px;
   border-radius: 50%;
   background: var(--accent);
-  color: #fff;
+  color: var(--text-on-accent);
   font-size: 0.75rem;
   font-weight: 700;
 }

package/src/renderer/shared/fonts.ts

@@ -1,37 +1,19 @@
-// Self-hosted replacement for the Google Fonts CDN <link> that used to sit in
-// index.html / index-web.html. Same families/weights, bundled locally so the
-// app renders correctly offline instead of falling back to system fonts.
-import '@fontsource/outfit/300.css';
-import '@fontsource/outfit/400.css';
-import '@fontsource/outfit/500.css';
-import '@fontsource/outfit/600.css';
-
-import '@fontsource/mali/400.css';
-import '@fontsource/mali/500.css';
-import '@fontsource/mali/600.css';
-
-import '@fontsource/prompt/400.css';
-import '@fontsource/prompt/500.css';
-import '@fontsource/prompt/600.css';
-
-import '@fontsource/sarabun/400.css';
-import '@fontsource/sarabun/500.css';
-import '@fontsource/sarabun/600.css';
-
-import '@fontsource/kanit/400.css';
-import '@fontsource/kanit/500.css';
-import '@fontsource/kanit/600.css';
-
-import '@fontsource/mitr/400.css';
-import '@fontsource/mitr/500.css';
-
-import '@fontsource/noto-sans-thai/400.css';
-import '@fontsource/noto-sans-thai/500.css';
-import '@fontsource/noto-sans-thai/600.css';
-
-import '@fontsource/inter/400.css';
-import '@fontsource/inter/500.css';
-import '@fontsource/inter/600.css';
-
-import '@fontsource/fira-code/400.css';
-import '@fontsource/fira-code/500.css';
+// Keep the default UI and code faces self-hosted for offline desktop use.
+// Import only the families and weights the initial UI uses; alternative font
+// selections fall back to the operating system instead of inflating every
+// launch with complete Unicode coverage we do not render by default.
+import '@fontsource/prompt/latin-400.css';
+import '@fontsource/prompt/thai-400.css';
+import '@fontsource/prompt/latin-500.css';
+import '@fontsource/prompt/thai-500.css';
+import '@fontsource/prompt/latin-600.css';
+import '@fontsource/prompt/thai-600.css';
+import '@fontsource/prompt/latin-700.css';
+import '@fontsource/prompt/thai-700.css';
+
+import '@fontsource/fira-code/latin-400.css';
+import '@fontsource/fira-code/symbols2-400.css';
+import '@fontsource/fira-code/latin-500.css';
+import '@fontsource/fira-code/symbols2-500.css';
+import '@fontsource/fira-code/latin-600.css';
+import '@fontsource/fira-code/symbols2-600.css';

package/src/renderer/shared/platform.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it, vi } from 'vitest'
+import { authPlatform, installRendererPlatform, installWorkspacePlatform, workspacePlatform, type WorkspacePlatform } from './platform'
+import * as desktopAdapter from '../src/tauri'
+import * as webAdapter from '../src-web/tauri'
+
+describe('renderer platform interfaces', () => {
+  it('accepts both complete runtime adapters', () => {
+    expect(() => installRendererPlatform(desktopAdapter)).not.toThrow()
+    expect(() => installRendererPlatform(webAdapter)).not.toThrow()
+  })
+  it('routes grouped capabilities through the installed runtime adapter', async () => {
+    const authGetCurrentUser = vi.fn(async () => ({ id: '1', name: 'Mint', email: null, image: null }))
+    installRendererPlatform(new Proxy({ APP_ICON_PATH: './icon.png', authGetCurrentUser }, {
+      get: (target, property) => property in target ? target[property as keyof typeof target] : vi.fn(),
+    }) as any)
+    await expect(authPlatform.authGetCurrentUser()).resolves.toMatchObject({ id: '1', name: 'Mint' })
+    expect(authGetCurrentUser).toHaveBeenCalledOnce()
+  })
+
+  it('routes workspace operations as one request and returns a snapshot', async () => {
+    const operation = { root: '/workspace', relativePath: 'src/main.ts', revision: 7 }
+    const snapshot = { path: '/workspace', revision: 8, tree: { name: 'workspace', path: '.', kind: 'directory', children: [] },
+      git: { isRepository: false, currentBranch: null, detachedHead: null, branches: [], remoteBranches: [], isDirty: false } }
+    const createWorkspaceFile = vi.fn(async () => snapshot)
+    const adapter = {
+      getWorkspaceSnapshot: vi.fn(), getWorkspaceGitDiff: vi.fn(), getGitBranchInfo: vi.fn(), switchGitBranch: vi.fn(),
+      createGitBranch: vi.fn(), checkoutRemoteGitBranch: vi.fn(), getGitGraph: vi.fn(),
+      createWorkspaceFile, createWorkspaceFolder: vi.fn(), deleteWorkspaceItem: vi.fn(),
+    } satisfies WorkspacePlatform
+    installWorkspacePlatform(adapter)
+    await expect(workspacePlatform.createWorkspaceFile(operation)).resolves.toEqual(snapshot)
+    expect(createWorkspaceFile).toHaveBeenCalledWith(operation)
+  })
+})

package/src/renderer/shared/platform.ts

@@ -8,12 +8,13 @@ import type {
   ChatResponse,
   TtsUrl,
   InteractionMemory,
+  ConversationSnapshot,
+  ConversationChanges,
   ChatSession,
   PictureEntry,
   ImageGenRequest,
   ImageGenProviders,
   ImageGenResponse,
-  WorkspaceTreeEntry,
   CodeEdit,
   CodeEditProposal,
   DetectedTools,
@@ -23,6 +24,9 @@ import type {
   AgentProgress,
   AuthUser,
   GitCheckpoint,
+  GitBranchInfo,
+  GitBranchChangeOutcome,
+  WorkspaceOperation,
 } from './types'
 
 export function getLocalApiBase(): string {
@@ -93,10 +97,16 @@ export interface MintPlatformApi {
     workspacePath?: string | null,
     chatId?: string | null,
     agentId?: string | null,
+    planMode?: boolean,
+    pinnedMcpServer?: string | null,
+    onApprovalRequested?: (payload: { token: string; approval: any }) => void,
+    onTurnStarted?: (interactionId: number) => void,
   ): Promise<ChatResponse>
   getTtsUrls(text: string): Promise<TtsUrl[]>
   cancelChatMessage(chatId: string): Promise<void>
-  getRecentInteractions(limit?: number, chatId?: string | null): Promise<InteractionMemory[]>
+  getRecentInteractions(limit?: number, chatId?: string | null, workspacePath?: string | null): Promise<InteractionMemory[]>
+  getConversationSnapshot(chatId: string, beforeId?: number | null, limit?: number): Promise<ConversationSnapshot>
+  getConversationChanges(chatId: string, after: number, limit?: number): Promise<ConversationChanges>
   saveSystemInteraction(
     chatId: string,
     userText: string,
@@ -107,6 +117,7 @@ export interface MintPlatformApi {
 
   saveInteractionAgentActivity(interactionId: number, progress: any[]): Promise<void>
   listChatSessions(): Promise<ChatSession[]>
+  updateChatSessionWorkspace(chatId: string, workspacePath: string | null): Promise<void>
   deleteChatSession(chatId: string): Promise<number>
   renameChatSession(chatId: string, newTitle: string): Promise<number>
   getProfileValue(key: string): Promise<string>
@@ -123,10 +134,16 @@ export interface MintPlatformApi {
   generateImages(req: ImageGenRequest): Promise<ImageGenResponse>
   getImageGenProviders(): Promise<ImageGenProviders>
   setDefaultImageProvider(provider: string): Promise<boolean>
-  getWorkspaceTree(path?: string | null): Promise<WorkspaceTreeEntry>
-  createWorkspaceFile(path: string): Promise<void>
-  createWorkspaceFolder(path: string): Promise<void>
-  deleteWorkspaceItem(path: string): Promise<void>
+  getWorkspaceSnapshot(operation: WorkspaceOperation): Promise<import('./types').WorkspaceSnapshot>
+  getWorkspaceGitDiff(workspacePath: string): Promise<import('./types').FileChange[]>
+  getGitBranchInfo(workspacePath: string): Promise<GitBranchInfo>
+  switchGitBranch(workspacePath: string, branch: string, confirmedDirtyWorkspace?: boolean): Promise<GitBranchChangeOutcome>
+  createGitBranch(workspacePath: string, branch: string, confirmedDirtyWorkspace?: boolean): Promise<GitBranchChangeOutcome>
+  checkoutRemoteGitBranch(workspacePath: string, remoteBranch: string, confirmedDirtyWorkspace?: boolean): Promise<GitBranchChangeOutcome>
+  getGitGraph(workspacePath: string): Promise<string[]>
+  createWorkspaceFile(operation: WorkspaceOperation): Promise<import('./types').WorkspaceSnapshot>
+  createWorkspaceFolder(operation: WorkspaceOperation): Promise<import('./types').WorkspaceSnapshot>
+  deleteWorkspaceItem(operation: WorkspaceOperation): Promise<import('./types').WorkspaceSnapshot>
   selectWorkspaceDirectory(): Promise<string | null>
   selectLinkedFolderPath(): Promise<string | null>
   submitToolApproval(token: string, approved: boolean, answer?: string): Promise<void>
@@ -143,3 +160,153 @@ export interface MintPlatformApi {
     headers?: Record<string, string>,
   ): Promise<{ ok: boolean; error?: string; server_info?: any; tools_count?: number; tools?: any[] }>
 }
+
+/** The small workspace interface shared renderer modules cross. */
+export type WorkspacePlatform = Pick<
+  MintPlatformApi,
+  | 'getWorkspaceSnapshot'
+  | 'getWorkspaceGitDiff'
+  | 'getGitBranchInfo'
+  | 'switchGitBranch'
+  | 'createGitBranch'
+  | 'checkoutRemoteGitBranch'
+  | 'getGitGraph'
+  | 'createWorkspaceFile'
+  | 'createWorkspaceFolder'
+  | 'deleteWorkspaceItem'
+>
+
+let workspaceAdapter: WorkspacePlatform | undefined
+type RuntimeOperation = (...args: any[]) => any
+export type RendererAdapter = MintPlatformApi & {
+  APP_ICON_PATH: string
+  resolveAvatarUrl: RuntimeOperation
+  fetchProviderModels: RuntimeOperation
+  fetchImageProviderModels: RuntimeOperation
+  fetchVideoProviderModels: RuntimeOperation
+  reauthMcpServer: RuntimeOperation
+  listMcpServerTools: RuntimeOperation
+  listCronJobs: RuntimeOperation
+  addCronJob: RuntimeOperation
+  removeCronJob: RuntimeOperation
+  setCronJobEnabled: RuntimeOperation
+  listLinkedFolders: RuntimeOperation
+  addLinkedFolder: RuntimeOperation
+  removeLinkedFolder: RuntimeOperation
+  linkedFolderStatus: RuntimeOperation
+  refreshLinkedFolder: RuntimeOperation
+  listLinkedFolderNotes: RuntimeOperation
+  readLinkedFolderNote: RuntimeOperation
+  openLinkedFolderNote: RuntimeOperation
+  startGeminiLiveSession: RuntimeOperation
+  sendGeminiLiveAudioChunk: RuntimeOperation
+  stopGeminiLiveSession: RuntimeOperation
+  generateVideo: RuntimeOperation
+  getVideoGenProviders: RuntimeOperation
+  convertFileSrc: RuntimeOperation
+  setActiveModel: RuntimeOperation
+  selectWorkspaceDirectory: RuntimeOperation
+  selectLinkedFolderPath: RuntimeOperation
+  isTauriRuntime: RuntimeOperation
+}
+let rendererAdapter: RendererAdapter | undefined
+
+/** Install the runtime implementation used by shared renderer modules. */
+export function installRendererPlatform(adapter: RendererAdapter): void {
+  rendererAdapter = adapter
+}
+
+function requireRendererPlatform(): RendererAdapter {
+  if (!rendererAdapter) throw new Error('Renderer platform adapter has not been installed.')
+  return rendererAdapter
+}
+
+function operation<Key extends keyof RendererAdapter>(name: Key): RendererAdapter[Key] {
+  return ((...args: any[]) => {
+    const implementation = requireRendererPlatform()[name]
+    if (typeof implementation !== 'function') throw new Error(`Platform operation is unavailable: ${name}`)
+    return (implementation as RuntimeOperation)(...args)
+  }) as RendererAdapter[Key]
+}
+
+/** Authentication and profile seam. */
+export const authPlatform = {
+  authRegister: operation('authRegister'), authLogin: operation('authLogin'),
+  authLogout: operation('authLogout'), authGetCurrentUser: operation('authGetCurrentUser'),
+  authUploadAvatar: operation('authUploadAvatar'), resolveAvatarUrl: operation('resolveAvatarUrl'),
+}
+
+/** Conversation transport, persistence, live voice, and checkpoint seam. */
+export const conversationPlatform = {
+  clearChatHistory: operation('clearChatHistory'), deleteChatSession: operation('deleteChatSession'),
+  renameChatSession: operation('renameChatSession'), getRecentInteractions: operation('getRecentInteractions'),
+  getConversationSnapshot: operation('getConversationSnapshot'), getConversationChanges: operation('getConversationChanges'),
+  saveSystemInteraction: operation('saveSystemInteraction'), listChatSessions: operation('listChatSessions'),
+  updateChatSessionWorkspace: operation('updateChatSessionWorkspace'),
+  saveInteractionAgentActivity: operation('saveInteractionAgentActivity'), streamChatMessage: operation('streamChatMessage'),
+  cancelChatMessage: operation('cancelChatMessage'), submitToolApproval: operation('submitToolApproval'),
+  listen: operation('listen'), readClipboardImage: operation('readClipboardImage'), getTtsUrls: operation('getTtsUrls'),
+  startGeminiLiveSession: operation('startGeminiLiveSession'), sendGeminiLiveAudioChunk: operation('sendGeminiLiveAudioChunk'),
+  stopGeminiLiveSession: operation('stopGeminiLiveSession'), listGitCheckpoints: operation('listGitCheckpoints'),
+  rollbackGitCheckpoint: operation('rollbackGitCheckpoint'), undoGitCheckpoint: operation('undoGitCheckpoint'),
+}
+
+/** Models, skills, agents, MCP, schedules, linked folders, and slash commands. */
+export const catalogPlatform = {
+  fetchProviderModels: operation('fetchProviderModels'), listLearnedSkills: operation('listLearnedSkills'),
+  addLearnedSkill: operation('addLearnedSkill'), deleteLearnedSkill: operation('deleteLearnedSkill'),
+  detectSystemTools: operation('detectSystemTools'), listMcpServerTools: operation('listMcpServerTools'),
+  testMcpConnection: operation('testMcpConnection'), reauthMcpServer: operation('reauthMcpServer'),
+  listSubagents: operation('listSubagents'), saveSubagent: operation('saveSubagent'),
+  deleteSubagent: operation('deleteSubagent'), getProfileValue: operation('getProfileValue'),
+  setProfileValue: operation('setProfileValue'), listCronJobs: operation('listCronJobs'),
+  addCronJob: operation('addCronJob'), removeCronJob: operation('removeCronJob'),
+  setCronJobEnabled: operation('setCronJobEnabled'), listLinkedFolders: operation('listLinkedFolders'),
+  addLinkedFolder: operation('addLinkedFolder'), removeLinkedFolder: operation('removeLinkedFolder'),
+  linkedFolderStatus: operation('linkedFolderStatus'), refreshLinkedFolder: operation('refreshLinkedFolder'),
+  listLinkedFolderNotes: operation('listLinkedFolderNotes'), readLinkedFolderNote: operation('readLinkedFolderNote'),
+  openLinkedFolderNote: operation('openLinkedFolderNote'),
+  runSlashCommand: operation('runSlashCommand'),
+}
+
+/** Image and video generation and saved media seam. */
+export const mediaPlatform = {
+  generateImages: operation('generateImages'), getImageGenProviders: operation('getImageGenProviders'),
+  fetchImageProviderModels: operation('fetchImageProviderModels'), listSavedPictures: operation('listSavedPictures'),
+  generateVideo: operation('generateVideo'), getVideoGenProviders: operation('getVideoGenProviders'),
+  fetchVideoProviderModels: operation('fetchVideoProviderModels'), convertFileSrc: operation('convertFileSrc'),
+}
+
+/** Runtime capabilities and native picker seam. */
+export const runtimePlatform = {
+  appIconPath: () => String(requireRendererPlatform().APP_ICON_PATH ?? './assets/icon.png'),
+  getRuntimeStatus: operation('getRuntimeStatus'), setActiveModel: operation('setActiveModel'),
+  selectWorkspaceDirectory: operation('selectWorkspaceDirectory'), selectLinkedFolderPath: operation('selectLinkedFolderPath'),
+  isTauriRuntime: operation('isTauriRuntime'), readWorkspaceFile: operation('readWorkspaceFile'),
+}
+
+/** Install the Desktop or Web adapter before rendering the application. */
+export function installWorkspacePlatform(adapter: WorkspacePlatform): void {
+  workspaceAdapter = adapter
+}
+
+function requireWorkspacePlatform(): WorkspacePlatform {
+  if (!workspaceAdapter) {
+    throw new Error('Workspace platform adapter has not been installed.')
+  }
+  return workspaceAdapter
+}
+
+/** One seam for workspace and Git behavior used by shared renderer modules. */
+export const workspacePlatform: WorkspacePlatform = {
+  getWorkspaceSnapshot: (...args) => requireWorkspacePlatform().getWorkspaceSnapshot(...args),
+  getWorkspaceGitDiff: (...args) => requireWorkspacePlatform().getWorkspaceGitDiff(...args),
+  getGitBranchInfo: (...args) => requireWorkspacePlatform().getGitBranchInfo(...args),
+  switchGitBranch: (...args) => requireWorkspacePlatform().switchGitBranch(...args),
+  createGitBranch: (...args) => requireWorkspacePlatform().createGitBranch(...args),
+  checkoutRemoteGitBranch: (...args) => requireWorkspacePlatform().checkoutRemoteGitBranch(...args),
+  getGitGraph: (...args) => requireWorkspacePlatform().getGitGraph(...args),
+  createWorkspaceFile: (...args) => requireWorkspacePlatform().createWorkspaceFile(...args),
+  createWorkspaceFolder: (...args) => requireWorkspacePlatform().createWorkspaceFolder(...args),
+  deleteWorkspaceItem: (...args) => requireWorkspacePlatform().deleteWorkspaceItem(...args),
+}

package/src/renderer/shared/theme/themeManager.ts

@@ -0,0 +1,144 @@
+/**
+ * shared/theme/themeManager.ts
+ * Centralized theme controller and runtime state manager.
+ */
+
+import { ACCENT_FLAVORS } from './themes'
+
+export const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
+  const clean = hex.replace('#', '')
+  if (clean.length === 3) {
+    const r = parseInt(clean[0] + clean[0], 16)
+    const g = parseInt(clean[1] + clean[1], 16)
+    const b = parseInt(clean[2] + clean[2], 16)
+    return { r, g, b }
+  }
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : { r: 16, g: 185, b: 129 }
+}
+
+export const lightenColor = (hex: string, amount: number): string => {
+  const clean = hex.replace('#', '')
+  if (clean.length !== 6) return hex
+  const num = parseInt(clean, 16)
+  const r = Math.min(255, (num >> 16) + amount)
+  const g = Math.min(255, ((num >> 8) & 0x00ff) + amount)
+  const b = Math.min(255, (num & 0x0000ff) + amount)
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`
+}
+
+export const getContrastText = (hex: string): string => {
+  const rgb = hexToRgb(hex)
+  // Perceived relative luminance formula (W3C standard)
+  const luminance = 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b
+  return luminance > 160 ? '#09090b' : '#ffffff'
+}
+
+let systemThemeMediaQuery: MediaQueryList | null = null
+let systemThemeListener: ((e: MediaQueryListEvent) => void) | null = null
+
+export const applyTheme = (cfg: any): void => {
+  if (typeof document === 'undefined') return
+
+  const rawTheme = cfg.theme || 'dark'
+  const surfaceStyle = cfg.surfaceStyle || (cfg.glassBlur === 'none' ? 'opaque' : 'glass')
+  const accentColor = cfg.accentColor || '#10b981'
+  const rgb = hexToRgb(accentColor)
+  const contrastText = getContrastText(accentColor)
+
+  // Resolve effective theme for 'system'
+  let effectiveTheme = rawTheme
+  if (rawTheme === 'system') {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    effectiveTheme = prefersDark ? 'dark' : 'light'
+
+    // Attach reactive OS preference listener once
+    if (!systemThemeListener) {
+      systemThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      systemThemeListener = (e) => {
+        document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light')
+      }
+      systemThemeMediaQuery.addEventListener('change', systemThemeListener)
+    }
+  } else if (systemThemeListener && systemThemeMediaQuery) {
+    systemThemeMediaQuery.removeEventListener('change', systemThemeListener)
+    systemThemeListener = null
+    systemThemeMediaQuery = null
+  }
+
+  // Set DOM data attributes
+  document.documentElement.setAttribute('data-theme', effectiveTheme)
+  document.documentElement.setAttribute('data-surface', surfaceStyle)
+  const normalizedAccent = accentColor.trim().toLowerCase()
+  document.documentElement.setAttribute(
+    'data-accent-mode',
+    normalizedAccent === '#ffffff' || normalizedAccent === '#fff' ? 'monochrome' : 'color'
+  )
+
+  // Set Accent variables
+  document.documentElement.style.setProperty('--accent-default', accentColor)
+  document.documentElement.style.setProperty('--accent', accentColor)
+  document.documentElement.style.setProperty('--accent-hover', lightenColor(accentColor, 20))
+  document.documentElement.style.setProperty('--accent-glow', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.35)`)
+  document.documentElement.style.setProperty('--accent-subtle', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.14)`)
+  document.documentElement.style.setProperty('--accent-border', `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`)
+  document.documentElement.style.setProperty('--text-on-accent', contrastText)
+  document.documentElement.style.setProperty('--accent-contrast', contrastText)
+
+  // Surface and Blur
+  if (surfaceStyle === 'opaque') {
+    document.documentElement.style.setProperty('--glass-blur', 'none')
+  } else {
+    document.documentElement.style.setProperty('--glass-blur', cfg.glassBlur || 'blur(16px)')
+  }
+
+  // Typography
+  if (cfg.fontFamily) {
+    document.body.style.fontFamily = cfg.fontFamily
+  }
+  if (cfg.fontSize) {
+    document.documentElement.style.fontSize = cfg.fontSize
+  }
+
+  // Handle custom theme overrides if active
+  if (rawTheme === 'custom') {
+    if (cfg.customBgStart && cfg.customBgEnd) {
+      document.documentElement.style.setProperty('--bg-canvas', cfg.customBgStart)
+      document.documentElement.style.setProperty('--bg-color', cfg.customBgStart)
+      document.documentElement.style.setProperty(
+        '--bg-gradient',
+        `linear-gradient(135deg, ${cfg.customBgStart} 0%, ${cfg.customBgEnd} 100%)`
+      )
+    }
+    if (cfg.customPanelBg) {
+      const pRgb = hexToRgb(cfg.customPanelBg)
+      document.documentElement.style.setProperty('--bg-surface', `rgba(${pRgb.r}, ${pRgb.g}, ${pRgb.b}, 0.75)`)
+      document.documentElement.style.setProperty('--panel-bg', `rgba(${pRgb.r}, ${pRgb.g}, ${pRgb.b}, 0.75)`)
+      document.documentElement.style.setProperty('--surface-bg', `rgba(${pRgb.r}, ${pRgb.g}, ${pRgb.b}, 0.62)`)
+    }
+    return
+  }
+
+  // Clean up inline background and text overrides for standard themes
+  ;[
+    '--bg-canvas',
+    '--bg-color',
+    '--bg-gradient',
+    '--panel-bg',
+    '--panel-raised',
+    '--panel-soft',
+    '--chrome-bg',
+    '--surface-bg',
+    '--surface-strong',
+    '--input-bg',
+    '--text-main',
+    '--text-chat',
+    '--text-soft',
+  ].forEach((prop) => document.documentElement.style.removeProperty(prop))
+}