fix: remove desktop translucency to reduce macOS compositing cost

packages/desktop/src-tauri/Cargo.lock

@@ -2644,7 +2644,6 @@ dependencies = [
  "tauri-plugin-updater",
  "tokio",
  "url",
- "window-vibrancy 0.7.1",
 ]
 
 [[package]]
@@ -4462,7 +4461,7 @@ dependencies = [
  "url",
  "webkit2gtk",
  "webview2-com",
- "window-vibrancy 0.6.0",
+ "window-vibrancy",
  "windows",
 ]
 
@@ -5679,21 +5678,6 @@ dependencies = [
  "windows-version",
 ]
 
-[[package]]
-name = "window-vibrancy"
-version = "0.7.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "010797bd7c40396fbc59d3105089fed0885fe267a0ef4a0a4646df54e28647f6"
-dependencies = [
- "objc2",
- "objc2-app-kit",
- "objc2-core-foundation",
- "objc2-foundation",
- "raw-window-handle",
- "windows-sys 0.60.2",
- "windows-version",
-]
-
 [[package]]
 name = "windows"
 version = "0.61.3"

packages/desktop/src-tauri/Cargo.toml

@@ -39,4 +39,3 @@ strip = true
 [target.'cfg(target_os = "macos")'.dependencies]
 objc2 = "0.6"
 objc2-web-kit = "0.3"
-window-vibrancy = "0.7.1"

packages/desktop/src-tauri/src/main.rs

@@ -23,10 +23,6 @@ use std::{
     time::Duration,
 };
 use tauri::{Emitter, Manager, WebviewUrl, WebviewWindowBuilder};
-#[cfg(target_os = "macos")]
-use window_vibrancy::{
-    apply_vibrancy, clear_vibrancy, NSVisualEffectMaterial,
-};
 
 /// Disable pinch-to-zoom / magnification gestures on macOS to avoid accidental
 /// zoom and the continuous gesture event processing overhead.
@@ -2496,91 +2492,12 @@ fn read_desktop_theme_override() -> Option<tauri::Theme> {
     parse_theme_override(theme_mode, theme_variant)
 }
 
-fn read_desktop_vibrancy_enabled() -> bool {
-    let raw = fs::read_to_string(settings_file_path()).ok();
-    let parsed = raw
-        .as_deref()
-        .and_then(|s| serde_json::from_str::<serde_json::Value>(s).ok());
-    parsed
-        .as_ref()
-        .and_then(|v| v.get("desktopVibrancy"))
-        .and_then(|v| v.as_bool())
-        .unwrap_or(true) // enabled by default
-}
-
-fn write_desktop_vibrancy_to_disk(enabled: bool) -> Result<()> {
-    let path = settings_file_path();
-    if let Some(parent) = path.parent() {
-        fs::create_dir_all(parent)?;
-    }
-    let mut root: serde_json::Value = if let Ok(raw) = fs::read_to_string(&path) {
-        serde_json::from_str(&raw).unwrap_or(serde_json::json!({}))
-    } else {
-        serde_json::json!({})
-    };
-    if !root.is_object() {
-        root = serde_json::json!({});
-    }
-    root["desktopVibrancy"] = serde_json::Value::Bool(enabled);
-    fs::write(&path, serde_json::to_string_pretty(&root)?)?;
-    Ok(())
-}
-
-#[cfg(target_os = "macos")]
-fn apply_macos_window_vibrancy(window: &tauri::WebviewWindow) {
-    if !read_desktop_vibrancy_enabled() {
-        let _ = clear_vibrancy(window);
-        return;
-    }
-
-    if let Err(error) = apply_vibrancy(
-        window,
-        NSVisualEffectMaterial::Sidebar,
-        None,
-        None,
-    ) {
-        log::warn!("[desktop:vibrancy] Failed to apply macOS vibrancy: {error}");
-    }
-}
-
-#[cfg(not(target_os = "macos"))]
-fn apply_macos_window_vibrancy(_window: &tauri::WebviewWindow) {}
-
-#[tauri::command]
-fn desktop_set_vibrancy(app: tauri::AppHandle, enabled: bool) -> Result<(), String> {
-    write_desktop_vibrancy_to_disk(enabled).map_err(|e| e.to_string())?;
-
-    #[cfg(target_os = "macos")]
-    {
-        for window in app.webview_windows().values() {
-            if enabled {
-                if let Err(error) = apply_vibrancy(
-                    window,
-                    NSVisualEffectMaterial::Sidebar,
-                    None,
-                    None,
-                ) {
-                    log::warn!("[desktop:vibrancy] Failed to apply vibrancy: {error}");
-                }
-            } else {
-                let _ = clear_vibrancy(window);
-            }
-        }
-    }
-
-    #[cfg(not(target_os = "macos"))]
-    let _ = app;
-
-    Ok(())
-}
-
 /// Apply platform-specific window builder configuration.
 fn apply_platform_window_config<M: Manager<tauri::Wry>>(
     builder: WebviewWindowBuilder<'_, tauri::Wry, M>,
 ) -> WebviewWindowBuilder<'_, tauri::Wry, M> {
     #[cfg(target_os = "macos")]
     let builder = builder
-        .transparent(read_desktop_vibrancy_enabled())
         .hidden_title(true)
         .title_bar_style(tauri::TitleBarStyle::Overlay)
         .traffic_light_position(tauri::Position::Logical(tauri::LogicalPosition {
@@ -2776,7 +2693,6 @@ fn create_window(
 
     let window = builder.build()?;
     let _ = window.set_theme(read_desktop_theme_override());
-    apply_macos_window_vibrancy(&window);
     disable_pinch_zoom(&window);
 
     if let Some(state) = restored_state.as_ref().filter(|_| apply_restored_state) {
@@ -2829,7 +2745,6 @@ fn create_startup_window(app: &tauri::AppHandle, restore_geometry: bool) -> Resu
 
     let window = builder.build()?;
     let _ = window.set_theme(read_desktop_theme_override());
-    apply_macos_window_vibrancy(&window);
     disable_pinch_zoom(&window);
 
     if let Some(state) = restored_state.as_ref().filter(|_| apply_restored_state) {
@@ -3290,7 +3205,6 @@ fn main() {
             desktop_hosts_set,
             desktop_host_probe,
             desktop_set_window_theme,
-            desktop_set_vibrancy,
             remote_ssh::desktop_ssh_instances_get,
             remote_ssh::desktop_ssh_instances_set,
             remote_ssh::desktop_ssh_import_hosts,

packages/desktop/src-tauri/tauri.conf.json

@@ -15,7 +15,6 @@
         "label": "main",
         "create": false,
         "title": "OpenChamber",
-        "transparent": true,
         "width": 1280,
         "height": 800,
         "resizable": true,

packages/ui/src/App.tsx

@@ -575,7 +575,7 @@ function App({ apis }: AppProps) {
   if (showCliOnboarding) {
     return (
       <ErrorBoundary>
-        <div className="h-full text-foreground bg-transparent">
+        <div className="h-full text-foreground bg-background">
           <OnboardingScreen onCliAvailable={handleCliAvailable} />
         </div>
       </ErrorBoundary>
@@ -652,7 +652,7 @@ function App({ apis }: AppProps) {
           <FireworksProvider>
             <VoiceProvider>
               <TooltipProvider delayDuration={700} skipDelayDuration={150}>
-                <div className={isDesktopRuntime ? 'h-full text-foreground bg-transparent' : 'h-full text-foreground bg-background'}>
+                <div className="h-full text-foreground bg-background">
                   <SyncAppEffects embeddedBackgroundWorkEnabled={embeddedBackgroundWorkEnabled} />
                   <MainLayout />
                   <Toaster />

packages/ui/src/components/chat/ChatContainer.tsx

@@ -664,7 +664,7 @@ export const ChatContainer: React.FC = () => {
                         'relative z-10',
                         isDesktopExpandedInput
                             ? 'flex-1 min-h-0 bg-background'
-                            : 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
+                            : 'bg-background'
                     )}
                 >
                         <ChatInput scrollToBottom={resumeToLatestInstant} />
@@ -727,7 +727,7 @@ export const ChatContainer: React.FC = () => {
                         'relative z-10',
                         isDesktopExpandedInput
                             ? 'flex-1 min-h-0 bg-background'
-                            : 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
+                            : 'bg-background'
                     )}
                 >
                     <ChatInput scrollToBottom={resumeToLatestInstant} />
@@ -763,7 +763,7 @@ export const ChatContainer: React.FC = () => {
                         'relative z-10',
                         isDesktopExpandedInput
                             ? 'flex-1 min-h-0 bg-background'
-                            : 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
+                            : 'bg-background'
                     )}
                 >
                     <ChatInput scrollToBottom={resumeToLatestInstant} />
@@ -808,7 +808,7 @@ export const ChatContainer: React.FC = () => {
                     'relative z-10',
                     isDesktopExpandedInput
                         ? 'flex-1 min-h-0 bg-background'
-                        : 'bg-background/95 supports-[backdrop-filter]:bg-background/80'
+                        : 'bg-background'
                 )}
             >
                 {!isDesktopExpandedInput && sessionMessages.length > 0 && (

packages/ui/src/components/chat/ChatInput.tsx

@@ -3387,7 +3387,7 @@ const ChatInputComponent: React.FC<ChatInputProps> = ({ onOpenSettings, scrollTo
                     onDrop={handleDrop}
                 >
                     {isDragging && (
-                        <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm rounded-xl">
+                        <div className="absolute inset-0 z-50 flex items-center justify-center bg-background/90 rounded-xl">
                             <div className="text-center">
                                 <div className="inline-flex justify-center">
                                     <button

packages/ui/src/components/chat/message/TextSelectionMenu.tsx

@@ -474,8 +474,6 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
         )}
         style={{
           paddingBottom: 'calc(0.5rem + env(safe-area-inset-bottom, 0px))',
-          backdropFilter: 'blur(28px)',
-          WebkitBackdropFilter: 'blur(28px)',
         }}
       >
         <button
@@ -547,10 +545,6 @@ export const TextSelectionMenu: React.FC<TextSelectionMenuProps> = ({ containerR
           'transition-[opacity,transform] duration-200 ease-out will-change-[opacity,transform]',
           isOpening ? 'opacity-0 translate-y-[4px]' : 'opacity-100 translate-y-0'
         )}
-        style={{
-          backdropFilter: 'blur(28px)',
-          WebkitBackdropFilter: 'blur(28px)',
-        }}
       >
         <button
           onClick={handleAddToChat}

packages/ui/src/components/chat/message/ToolOutputDialog.tsx

@@ -420,7 +420,7 @@ const ImagePreviewDialog: React.FC<{
             <div
                 aria-hidden="true"
                 className={cn(
-                    'absolute inset-0 bg-black/25 backdrop-blur-md',
+                    'absolute inset-0 bg-black/40',
                     isTransitioning && 'transition-opacity duration-150 ease-out',
                     isVisible ? 'opacity-100' : 'opacity-0'
                 )}
@@ -433,7 +433,7 @@ const ImagePreviewDialog: React.FC<{
                         type="button"
                         onMouseDown={(event) => event.stopPropagation()}
                         onClick={showPrevious}
-                        className="absolute left-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/25 text-foreground/90 backdrop-blur-sm hover:bg-black/35 focus:outline-none focus:ring-2 focus:ring-primary/60"
+                        className="absolute left-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/40 text-foreground/90 hover:bg-black/55 focus:outline-none focus:ring-2 focus:ring-primary/60"
                         aria-label="Previous image"
                     >
                         <RiArrowLeftSLine className="h-6 w-6" />
@@ -442,7 +442,7 @@ const ImagePreviewDialog: React.FC<{
                         type="button"
                         onMouseDown={(event) => event.stopPropagation()}
                         onClick={showNext}
-                        className="absolute right-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/25 text-foreground/90 backdrop-blur-sm hover:bg-black/35 focus:outline-none focus:ring-2 focus:ring-primary/60"
+                        className="absolute right-3 top-1/2 -translate-y-1/2 z-10 h-10 w-10 flex items-center justify-center rounded-full bg-black/40 text-foreground/90 hover:bg-black/55 focus:outline-none focus:ring-2 focus:ring-primary/60"
                         aria-label="Next image"
                     >
                         <RiArrowRightSLine className="h-6 w-6" />
@@ -891,7 +891,7 @@ const MermaidPreviewDialog: React.FC<{
             <div
                 aria-hidden="true"
                 className={cn(
-                    'absolute inset-0 bg-black/25 backdrop-blur-md',
+                    'absolute inset-0 bg-black/40',
                     isTransitioning && 'transition-opacity duration-150 ease-out',
                     isVisible ? 'opacity-100' : 'opacity-0'
                 )}

packages/ui/src/components/layout/Header.tsx

@@ -2194,9 +2194,7 @@ export const Header: React.FC<HeaderProps> = ({
   const headerClassName = cn(
     'header-safe-area relative z-10',
     isMobile && 'border-b border-border/50',
-    isMobile
+    'bg-background'
-      ? 'bg-background'
-      : (isDesktopApp ? 'bg-background' : 'bg-background/95 supports-[backdrop-filter]:bg-background/80')
   );
 
   return (

packages/ui/src/components/layout/MainLayout.tsx

@@ -626,7 +626,7 @@ export const MainLayout: React.FC = () => {
                 className={cn(
                     'main-content-safe-area h-[100dvh]',
                     isMobile ? 'flex flex-col' : 'flex',
-                    isDesktopShellRuntime ? 'bg-transparent' : 'bg-background'
+                    'bg-background'
                 )}
             >
                 <CommandPalette />
@@ -725,7 +725,7 @@ export const MainLayout: React.FC = () => {
                             }
                         }}
                         className={cn(
-                            'fixed left-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-transparent',
+                            'fixed left-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-background',
                             'cursor-grab active:cursor-grabbing'
                         )}
                         aria-hidden={!mobileLeftDrawerOpen}
@@ -776,7 +776,7 @@ export const MainLayout: React.FC = () => {
                             }
                         }}
                         className={cn(
-                            'fixed right-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-transparent',
+                            'fixed right-0 top-[var(--oc-header-height,56px)] z-50 h-[calc(100%-var(--oc-header-height,56px))] bg-background',
                             'cursor-grab active:cursor-grabbing'
                         )}
                         aria-hidden={!isRightSidebarOpen}
@@ -834,9 +834,7 @@ export const MainLayout: React.FC = () => {
                     <div className="flex flex-1 overflow-hidden relative">
                         <div className={cn(
                             'absolute inset-0 flex overflow-hidden',
-                            isDesktopShellRuntime
+                            isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
-                                ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
-                                : 'bg-sidebar'
                         )}>
                             {isSidebarOpen ? (
                                 <>
@@ -844,9 +842,7 @@ export const MainLayout: React.FC = () => {
                                         aria-hidden
                                         className={cn(
                                             'pointer-events-none absolute top-0 z-0',
-                                            isDesktopShellRuntime
+                                            isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
-                                                ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
-                                                : 'bg-sidebar'
                                         )}
                                         style={{
                                             left: `${visibleSidebarWidth}px`,
@@ -860,9 +856,7 @@ export const MainLayout: React.FC = () => {
                                         aria-hidden
                                         className={cn(
                                             'pointer-events-none absolute bottom-0 z-0',
-                                            isDesktopShellRuntime
+                                            isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
-                                                ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
-                                                : 'bg-sidebar'
                                         )}
                                         style={{
                                             left: `${visibleSidebarWidth}px`,
@@ -880,9 +874,7 @@ export const MainLayout: React.FC = () => {
                                         aria-hidden
                                         className={cn(
                                             'pointer-events-none absolute top-0 z-0',
-                                            isDesktopShellRuntime
+                                            isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
-                                                ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
-                                                : 'bg-sidebar'
                                         )}
                                         style={{
                                             right: `${visibleRightSidebarWidth}px`,
@@ -896,9 +888,7 @@ export const MainLayout: React.FC = () => {
                                         aria-hidden
                                         className={cn(
                                             'pointer-events-none absolute bottom-0 z-0',
-                                            isDesktopShellRuntime
+                                            isDesktopShellRuntime ? 'bg-sidebar' : 'bg-sidebar'
-                                                ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
-                                                : 'bg-sidebar'
                                         )}
                                         style={{
                                             right: `${visibleRightSidebarWidth}px`,
@@ -919,9 +909,7 @@ export const MainLayout: React.FC = () => {
                             </Sidebar>
                             <div className={cn(
                                 'relative flex flex-1 min-w-0 flex-col overflow-hidden',
-                                isDesktopShellRuntime
+                                'bg-sidebar',
-                                    ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
-                                    : 'bg-sidebar',
                                 isSidebarOpen && 'border-l border-border/50 rounded-tl-md rounded-bl-md',
                                 isRightSidebarOpen && 'border-r border-border/50 rounded-tr-md rounded-br-md'
                             )}>

packages/ui/src/components/layout/RightSidebar.tsx

@@ -137,9 +137,7 @@ export const RightSidebar: React.FC<RightSidebarProps> = ({ isOpen, children, cl
       ref={sidebarRef}
       className={cn(
         'relative flex h-full overflow-hidden border-l border-border/40',
-        isOpen
+        'bg-sidebar',
-          ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
-          : 'bg-sidebar',
         isResizing ? 'transition-none' : 'transition-[width] duration-300 ease-in-out',
         !isOpen && 'border-l-0',
         className,

packages/ui/src/components/layout/RightSidebarTabs.tsx

@@ -26,8 +26,8 @@ export const RightSidebarTabs: React.FC = () => {
   ], []);
 
   return (
-    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-transparent">
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar">
-      <div className="h-9 bg-transparent pt-1 px-2">
+      <div className="h-9 bg-sidebar pt-1 px-2">
         <SortableTabsStrip
           items={tabItems}
           activeId={rightSidebarTab}

packages/ui/src/components/layout/Sidebar.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { cn } from '@/lib/utils';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { useUIStore } from '@/stores/useUIStore';
-import { isDesktopShell } from '@/lib/desktop';
 
 export const SIDEBAR_CONTENT_WIDTH = 250;
 const SIDEBAR_MIN_WIDTH = 250;
@@ -18,7 +17,6 @@ interface SidebarProps {
 export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children, className }) => {
     const sidebarWidth = useUIStore((state) => state.sidebarWidth);
     const setSidebarWidth = useUIStore((state) => state.setSidebarWidth);
-    const isDesktopApp = React.useMemo(() => isDesktopShell(), []);
     const [isResizing, setIsResizing] = React.useState(false);
     const startXRef = React.useRef(0);
     const startWidthRef = React.useRef(sidebarWidth || SIDEBAR_CONTENT_WIDTH);
@@ -119,9 +117,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ isOpen, isMobile, children, cl
             ref={sidebarRef}
             className={cn(
                 'relative flex h-full overflow-hidden border-r border-border/40',
-                isDesktopApp
+                'bg-sidebar',
-                    ? 'bg-[color:var(--sidebar-overlay-strong)] backdrop-blur supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
-                    : 'bg-sidebar',
                 isResizing ? 'transition-none' : 'transition-[width] duration-300 ease-in-out',
                 !isOpen && 'border-r-0',
                 className,

packages/ui/src/components/layout/SidebarContextSummary.tsx

@@ -49,7 +49,7 @@ export const SidebarContextSummary: React.FC<SidebarContextSummaryProps> = ({ cl
     }, [directoryFull]);
 
     return (
-        <div className={cn('hidden min-h-[48px] flex-col justify-center gap-0.5 border-b bg-sidebar/60 px-3 py-2 backdrop-blur md:flex md:pb-2', className)}>
+        <div className={cn('hidden min-h-[48px] flex-col justify-center gap-0.5 border-b bg-sidebar px-3 py-2 md:flex md:pb-2', className)}>
             <span className="typography-meta text-muted-foreground">Session</span>
             <span className="typography-ui-label font-semibold text-foreground truncate" title={activeSessionTitle}>
                 {activeSessionTitle}

packages/ui/src/components/layout/SidebarFilesTree.tsx

@@ -769,7 +769,7 @@ export const SidebarFilesTree: React.FC = () => {
   const hasTree = Boolean(root && childrenByDir[root]);
 
   return (
-    <section className="flex h-full min-h-0 flex-col overflow-hidden bg-transparent">
+    <section className="flex h-full min-h-0 flex-col overflow-hidden bg-sidebar">
       <div className="flex items-center gap-2 border-b border-border/40 px-3 py-2">
         <div className="relative min-w-0 flex-1">
           <RiSearchLine className="pointer-events-none absolute left-2 top-2 h-4 w-4 text-muted-foreground" />

packages/ui/src/components/multirun/AgentSelector.tsx

@@ -87,13 +87,9 @@ export const AgentSelector: React.FC<AgentSelectorProps> = ({
         id={id}
         size="lg"
         className={cn(
-          'max-w-full typography-meta text-foreground !border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70 data-[state=open]:!bg-[var(--interactive-active)]/70',
+          'max-w-full typography-meta text-foreground !border-border/80 !bg-[var(--surface-subtle)] hover:!bg-[var(--interactive-hover)]/70 data-[state=open]:!bg-[var(--interactive-active)]/70',
           className,
         )}
-        style={{
-          backdropFilter: 'blur(10px)',
-          WebkitBackdropFilter: 'blur(10px)',
-        }}
       >
         <SelectValue placeholder="Select an agent" />
       </SelectTrigger>

packages/ui/src/components/multirun/ModelMultiSelect.tsx

@@ -328,13 +328,9 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
             size="sm"
             className={cn(
               CHIP_HEIGHT_CLASS,
-              '!border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70',
+              '!border-border/80 !bg-[var(--surface-subtle)] hover:!bg-[var(--interactive-hover)]/70',
               addButtonClassName,
             )}
-            style={{
-              backdropFilter: 'blur(10px)',
-              WebkitBackdropFilter: 'blur(10px)',
-            }}
             onClick={() => setIsOpen(!isOpen)}
           >
             <RiAddLine className="h-3.5 w-3.5 mr-1" />
@@ -540,11 +536,7 @@ export const ModelMultiSelect: React.FC<ModelMultiSelectProps> = ({
                     >
                       <SelectTrigger
                         size="chip"
-                        className="px-2 gap-1.5 rounded-md !border-border/80 !bg-[var(--surface-subtle)]/95 !backdrop-blur-sm hover:!bg-[var(--interactive-hover)]/70 typography-meta font-medium text-foreground"
+                        className="px-2 gap-1.5 rounded-md !border-border/80 !bg-[var(--surface-subtle)] hover:!bg-[var(--interactive-hover)]/70 typography-meta font-medium text-foreground"
-                        style={{
-                          backdropFilter: 'blur(10px)',
-                          WebkitBackdropFilter: 'blur(10px)',
-                        }}
                       >
                         <RiBrainAi3Line
                           className={cn(

packages/ui/src/components/onboarding/OnboardingScreen.tsx

@@ -207,7 +207,7 @@ export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
 
   return (
     <div
-      className="h-full flex items-center justify-center bg-transparent p-8 relative cursor-default select-none"
+      className="h-full flex items-center justify-center bg-background p-8 relative cursor-default select-none"
       onMouseDown={handleDragStart}
     >
       <div className="w-full space-y-4 text-center">
@@ -241,7 +241,7 @@ export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
         )}
 
         <div className="flex justify-center">
-          <div className="bg-background/60 backdrop-blur-sm border border-border rounded-lg px-5 py-3 font-mono text-sm w-fit">
+          <div className="bg-background border border-border rounded-lg px-5 py-3 font-mono text-sm w-fit">
             {copied ? (
               <div className="flex items-center justify-center gap-2" style={{ color: 'var(--status-success)' }}>
                 <RiCheckLine className="h-4 w-4" />

packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx

@@ -19,7 +19,7 @@ import {
     SelectTrigger,
     SelectValue,
 } from '@/components/ui/select';
-import { isDesktopShell, isVSCodeRuntime, isWebRuntime, desktopSetVibrancy } from '@/lib/desktop';
+import { isDesktopShell, isVSCodeRuntime, isWebRuntime } from '@/lib/desktop';
 import { useDeviceInfo } from '@/lib/device';
 import { usePwaDetection } from '@/hooks/usePwaDetection';
 import { updateDesktopSettings } from '@/lib/persistence';
@@ -209,7 +209,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     } = useThemeSystem();
 
     const [themesReloading, setThemesReloading] = React.useState(false);
-    const [vibrancyEnabled, setVibrancyEnabled] = React.useState(true);
     const [chatRenderPreviewTick, setChatRenderPreviewTick] = React.useState(0);
     const reportUsage = useUIStore(state => state.reportUsage);
     const setReportUsage = useUIStore(state => state.setReportUsage);
@@ -220,28 +219,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
         void updateDesktopSettings({ reportUsage: enabled });
     }, [setReportUsage]);
 
-    const isMacDesktop = React.useMemo(() => {
-        if (!isDesktopShell()) return false;
-        if (typeof navigator === 'undefined') return false;
-        return /Macintosh|Mac OS X/.test(navigator.userAgent || '');
-    }, []);
-
-    React.useEffect(() => {
-        if (!isMacDesktop) return;
-        const stored = localStorage.getItem('desktopVibrancy');
-        if (stored !== null) {
-            setVibrancyEnabled(stored !== 'false');
-        }
-    }, [isMacDesktop]);
-
-    const handleVibrancyChange = React.useCallback((enabled: boolean) => {
-        setVibrancyEnabled(enabled);
-        localStorage.setItem('desktopVibrancy', String(enabled));
-        document.documentElement.classList.toggle('no-vibrancy', !enabled);
-        void desktopSetVibrancy(enabled);
-        void updateDesktopSettings({ desktopVibrancy: enabled });
-    }, []);
-
     const shouldAnimateChatPreview = isSettingsDialogOpen
         && (visibleSettings ? visibleSettings.includes('chatRenderMode') : true);
 
@@ -555,24 +532,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                                 </Tooltip>
                             </div>
 
-                            {isMacDesktop && (
-                                <div className="flex items-center gap-2 py-1.5">
-                                    <Checkbox
-                                        checked={vibrancyEnabled}
-                                        onChange={handleVibrancyChange}
-                                        ariaLabel="Toggle window vibrancy"
-                                    />
-                                    <div className="flex min-w-0 flex-col">
-                                        <span className="typography-ui-label text-foreground">
-                                            Window vibrancy
-                                        </span>
-                                        <span className="typography-meta text-muted-foreground">
-                                            Translucent window background. Disabling may reduce energy usage. Existing windows update immediately, but full transparency changes apply to new windows or after restart.
-                                        </span>
-                                    </div>
-                                </div>
-                            )}
-
                             {showPwaInstallNameSetting && (
                                 <div className="py-1.5 space-y-1.5">
                                     <div className="flex min-w-0 flex-col">

packages/ui/src/components/ui/ConfigUpdateOverlay.tsx

@@ -17,7 +17,7 @@ export const ConfigUpdateOverlay: React.FC = () => {
   }
 
   return (
-    <div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-6 backdrop-blur-md">
+    <div className="fixed inset-0 z-[9999] flex flex-col items-center justify-center gap-6 bg-background/90">
       <OpenChamberLogo width={80} height={80} />
       <p className="typography-body text-muted-foreground">
         {message}

packages/ui/src/components/ui/MobileOverlayPanel.tsx

@@ -70,7 +70,7 @@ export const MobileOverlayPanel: React.FC<MobileOverlayPanelProps> = ({
 
   const content = (
     <div
-      className="fixed inset-0 z-50 flex flex-col bg-background/40 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex flex-col bg-background/70"
       role="dialog"
       aria-modal="true"
       onClick={onClose}

packages/ui/src/components/ui/dialog.tsx

@@ -50,7 +50,7 @@ const DialogOverlay = React.forwardRef<
       ref={ref}
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/50 backdrop-blur-md",
+        "fixed inset-0 z-50 bg-black/50 dark:bg-black/75",
         className
       )}
       {...props}

packages/ui/src/components/ui/dropdown-menu.tsx

@@ -43,8 +43,6 @@ function DropdownMenuContent({
         style={{
           backgroundColor: 'var(--surface-elevated)',
           color: 'var(--surface-elevated-foreground)',
-          backdropFilter: 'blur(28px)',
-          WebkitBackdropFilter: 'blur(28px)',
           ...style,
         }}
         className={cn(
@@ -238,8 +236,6 @@ function DropdownMenuSubContent({
         style={{
           backgroundColor: 'var(--surface-elevated)',
           color: 'var(--surface-elevated-foreground)',
-          backdropFilter: 'blur(28px)',
-          WebkitBackdropFilter: 'blur(28px)',
         }}
         className={cn(
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-visible rounded-xl border-2 border-border/60 p-1 shadow-none",

packages/ui/src/components/ui/select.tsx

@@ -67,8 +67,6 @@ function SelectContent({
       style={{
         backgroundColor: 'var(--surface-elevated)',
         color: 'var(--surface-elevated-foreground)',
-        backdropFilter: 'blur(28px)',
-        WebkitBackdropFilter: 'blur(28px)',
       }}
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden rounded-xl border-2 border-border/60 shadow-none transform-gpu will-change-transform",

packages/ui/src/components/ui/sonner.tsx

@@ -15,8 +15,6 @@ const Toaster = ({ ...props }: ToasterProps) => {
       toastOptions={{
         style: {
           borderRadius: "var(--radius-lg)",
-          backdropFilter: 'blur(28px)',
-          WebkitBackdropFilter: 'blur(28px)',
         },
         classNames: {
           toast: "rounded-[var(--radius-lg)]",

packages/ui/src/components/ui/tooltip.tsx

@@ -52,8 +52,6 @@ function TooltipContent({
           className
         )}
         style={{
-          backdropFilter: 'blur(28px)',
-          WebkitBackdropFilter: 'blur(28px)',
           ...style,
         }}
         {...props}

packages/ui/src/components/views/FilesView.tsx

@@ -2214,7 +2214,7 @@ export const FilesView: React.FC<FilesViewProps> = ({ mode = 'full' }) => {
     }
 
     return (
-      <div className="pointer-events-auto flex items-center gap-1 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)]/95 p-1 shadow-sm backdrop-blur-sm">
+      <div className="pointer-events-auto flex items-center gap-1 rounded-lg border border-[var(--interactive-border)] bg-[var(--surface-elevated)] p-1 shadow-sm">
         {canEdit && textViewMode === 'edit' && (
           isSaving ? (
             <span className="flex items-center gap-1 px-1 text-muted-foreground typography-meta">

packages/ui/src/components/views/GitView.tsx

@@ -1941,7 +1941,7 @@ export const GitView: React.FC = () => {
   }
 
   return (
-    <div className={cn('flex h-full flex-col overflow-hidden', 'bg-transparent')} data-keyboard-avoid="true">
+    <div className={cn('flex h-full flex-col overflow-hidden', 'bg-sidebar')} data-keyboard-avoid="true">
       <GitHeader
         status={status}
         localBranches={localBranches}
@@ -1983,7 +1983,7 @@ export const GitView: React.FC = () => {
 
       <div className="flex-1 min-h-0 overflow-hidden">
         <div className="h-full min-h-0 flex flex-col">
-          <div className={cn('min-w-0 min-h-0 h-full flex flex-col', 'bg-transparent')}>
+          <div className={cn('min-w-0 min-h-0 h-full flex flex-col', 'bg-sidebar')}>
             <div className={cn(isMobile ? 'h-10 px-1.5' : 'h-8 px-2')}>
               <SortableTabsStrip
                 items={actionTabItems}

packages/ui/src/components/views/MultiRunWindow.tsx

@@ -31,7 +31,7 @@ export const MultiRunWindow: React.FC<MultiRunWindowProps> = ({
     <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
       <DialogPrimitive.Portal>
         <DialogPrimitive.Overlay
-          className="fixed inset-0 z-50 bg-black/50 backdrop-blur-md"
+          className="fixed inset-0 z-50 bg-black/50 dark:bg-black/75"
         />
         <DialogPrimitive.Content
           aria-describedby={descriptionId}

packages/ui/src/components/views/SettingsView.tsx

@@ -648,7 +648,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
         <div
           className={cn(
             'flex items-center gap-2 px-3 py-2 border-b',
-            'bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80'
+            'bg-background'
           )}
           style={{ borderColor: 'var(--interactive-border)' }}
         >
@@ -730,7 +730,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
               className={cn(
                 'relative flex h-full min-h-0 flex-col overflow-hidden border-r',
                 isDesktopApp
-                  ? 'bg-[color:var(--sidebar-overlay-strong)] supports-[backdrop-filter]:bg-[color:var(--sidebar-overlay-soft)]'
+                  ? 'bg-sidebar'
                   : runtimeCtx.isVSCode
                     ? 'bg-background'
                     : 'bg-sidebar',

packages/ui/src/components/views/SettingsWindow.tsx

@@ -29,7 +29,7 @@ export const SettingsWindow: React.FC<SettingsWindowProps> = ({ open, onOpenChan
     <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
       <DialogPrimitive.Portal>
         <DialogPrimitive.Overlay
-          className="fixed inset-0 z-50 bg-black/50 backdrop-blur-md"
+          className="fixed inset-0 z-50 bg-black/50 dark:bg-black/75"
         />
         <DialogPrimitive.Content
           aria-describedby={descriptionId}

packages/ui/src/lib/codemirror/flexokiTheme.ts

@@ -149,8 +149,6 @@ export function createFlexokiCodeMirrorTheme(theme: Theme): Extension {
       pointerEvents: 'auto',
       padding: '4px',
       backgroundColor: `color-mix(in srgb, ${theme.colors.surface.elevated} 85%, transparent)`,
-      backdropFilter: 'blur(12px)',
-      WebkitBackdropFilter: 'blur(12px)',
       border: `1px solid ${theme.colors.interactive.border}`,
       borderRadius: '10px',
       boxShadow: `0 2px 8px color-mix(in srgb, ${theme.colors.surface.background} 60%, transparent)`,

packages/ui/src/lib/desktop.ts

@@ -147,8 +147,6 @@ export type DesktopSettings = {
   skillCatalogs?: SkillCatalogConfig[];
   // Opt-in to send anonymous usage reports for update checks (default: true)
   reportUsage?: boolean;
-  // macOS window vibrancy effect (default: true)
-  desktopVibrancy?: boolean;
 };
 
 type TauriGlobal = {
@@ -639,18 +637,3 @@ export const clearDesktopCache = async (): Promise<boolean> => {
     return false;
   }
 };
-
-export const desktopSetVibrancy = async (enabled: boolean): Promise<boolean> => {
-  if (!isTauriShell()) {
-    return false;
-  }
-
-  try {
-    const tauri = (window as unknown as { __TAURI__?: TauriGlobal }).__TAURI__;
-    await tauri?.core?.invoke?.('desktop_set_vibrancy', { enabled });
-    return true;
-  } catch (error) {
-    console.warn('Failed to set vibrancy', error);
-    return false;
-  }
-};

packages/ui/src/lib/device.ts

@@ -52,10 +52,6 @@ const setRootDeviceAttributes = (
 
   if (isTauriShellRuntime) {
     root.classList.add('desktop-runtime');
-    // Apply no-vibrancy class early so the first paint uses a solid background
-    // when vibrancy was previously disabled by the user.
-    const vibrancyOff = localStorage.getItem('desktopVibrancy') === 'false';
-    root.classList.toggle('no-vibrancy', vibrancyOff);
     root.style.setProperty('--is-mobile', '0');
     root.style.setProperty('--device-type', 'desktop');
     root.style.setProperty('--font-scale', '1');

packages/ui/src/lib/persistence.ts

@@ -82,9 +82,6 @@ const persistToLocalStorage = (settings: DesktopSettings) => {
       localStorage.removeItem('openchamber.pwaName');
     }
   }
-  if (typeof settings.desktopVibrancy === 'boolean') {
-    localStorage.setItem('desktopVibrancy', String(settings.desktopVibrancy));
-  }
 };
 
 type PersistApi = {

packages/ui/src/lib/theme/themes/amoled-dark.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#000000",
       "foreground": "#ffffff",
-      "muted": "#11111190",
+      "muted": "#111111",
       "mutedForeground": "#dbdbdb",
-      "elevated": "#0a0a0a90",
+      "elevated": "#0a0a0a",
       "elevatedForeground": "#ffffff",
       "overlay": "#000000cc",
       "subtle": "#111111"

packages/ui/src/lib/theme/themes/amoled-light.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#f1f1f1",
       "foreground": "#0a0a0a",
-      "muted": "#e3e3e390",
+      "muted": "#e3e3e3",
       "mutedForeground": "#232323",
-      "elevated": "#eaeaea90",
+      "elevated": "#eaeaea",
       "elevatedForeground": "#0a0a0a",
       "overlay": "#f1f1f133",
       "subtle": "#e3e3e3"

packages/ui/src/lib/theme/themes/aura-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#15141B",
       "foreground": "#EDECEE",
-      "muted": "#1A192190",
+      "muted": "#1A1921",
       "mutedForeground": "#8a8282",
-      "elevated": "#201e2b90",
+      "elevated": "#201e2b",
       "elevatedForeground": "#EDECEE",
       "overlay": "#FFFFFF20",
       "subtle": "#25232f"

packages/ui/src/lib/theme/themes/aura-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#F5F0FF",
       "foreground": "#2D2640",
-      "muted": "#EFE8FC90",
+      "muted": "#EFE8FC",
       "mutedForeground": "#807b8b",
-      "elevated": "#f1ebfb90",
+      "elevated": "#f1ebfb",
       "elevatedForeground": "#2D2640",
       "overlay": "#15101F20",
       "subtle": "#EFE8FC"

packages/ui/src/lib/theme/themes/ayu-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#0F1419",
       "foreground": "#D6DAE0",
-      "muted": "#18222C90",
+      "muted": "#18222C",
       "mutedForeground": "#777e86",
-      "elevated": "#17202a90",
+      "elevated": "#17202a",
       "elevatedForeground": "#D6DAE0",
       "overlay": "#FBFBFD20",
       "subtle": "#1e252d"

packages/ui/src/lib/theme/themes/ayu-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#FDFAF4",
       "foreground": "#394049",
-      "muted": "#f7f3eb90",
+      "muted": "#f7f3eb",
       "mutedForeground": "#777e87",
-      "elevated": "#faf6ed90",
+      "elevated": "#faf6ed",
       "elevatedForeground": "#4F5964",
       "overlay": "#1B232B20",
       "subtle": "#FFF7E5"

packages/ui/src/lib/theme/themes/carbonfox-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#161616",
       "foreground": "#F2F4F8",
-      "muted": "#22222290",
+      "muted": "#222222",
       "mutedForeground": "#8b8a8a",
-      "elevated": "#22222290",
+      "elevated": "#222222",
       "elevatedForeground": "#F2F4F8",
       "overlay": "#FFFFFF20",
       "subtle": "#292828"

packages/ui/src/lib/theme/themes/carbonfox-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#FFFFFF",
       "foreground": "#161616",
-      "muted": "#F4F4F490",
+      "muted": "#F4F4F4",
       "mutedForeground": "#868585",
-      "elevated": "#f4f4f790",
+      "elevated": "#f4f4f7",
       "elevatedForeground": "#161616",
       "overlay": "#00000020",
       "subtle": "#f2f2f8"

packages/ui/src/lib/theme/themes/catppuccin-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#1E1E2E",
       "foreground": "#CDD6F4",
-      "muted": "#2a273b90",
+      "muted": "#2a273b",
       "mutedForeground": "#969cb1",
-      "elevated": "#28284190",
+      "elevated": "#282841",
       "elevatedForeground": "#CDD6F4",
       "overlay": "#F4F2FF20",
       "subtle": "#2f2f50"

packages/ui/src/lib/theme/themes/catppuccin-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#fff6f4",
       "foreground": "#2e314a",
-      "muted": "#f8ebe990",
+      "muted": "#f8ebe9",
       "mutedForeground": "#888992",
-      "elevated": "#fbefea90",
+      "elevated": "#fbefea",
       "elevatedForeground": "#4C4F69",
       "overlay": "#1F1F2A20",
       "subtle": "#FDEEEE"

packages/ui/src/lib/theme/themes/cursor-dark.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#0e0e0e",
       "foreground": "#e4e4e4",
-      "muted": "#1c1c1c90",
+      "muted": "#1c1c1c",
       "mutedForeground": "#e4e4e45e",
-      "elevated": "#16161690",
+      "elevated": "#161616",
       "elevatedForeground": "#e4e4e4",
       "overlay": "#0e0e0ecc",
       "subtle": "#232323"

packages/ui/src/lib/theme/themes/cursor-light.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#fcfcfc",
       "foreground": "#131313",
-      "muted": "#eeeeee90",
+      "muted": "#eeeeee",
       "mutedForeground": "#141414ad",
-      "elevated": "#f5f5f590",
+      "elevated": "#f5f5f5",
       "elevatedForeground": "#131313",
       "overlay": "#fcfcfc33",
       "subtle": "#e5e5e5"

packages/ui/src/lib/theme/themes/dracula-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#14151F",
       "foreground": "#F8F8F2",
-      "muted": "#18192690",
+      "muted": "#181926",
       "mutedForeground": "#7c7e9c",
-      "elevated": "#16172290",
+      "elevated": "#161722",
       "elevatedForeground": "#F8F8F2",
       "overlay": "#FFFFFF20",
       "subtle": "#222436"

packages/ui/src/lib/theme/themes/dracula-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#F8F8F2",
       "foreground": "#1F1F2F",
-      "muted": "#eff1eb90",
+      "muted": "#eff1eb",
       "mutedForeground": "#6c6c7a",
-      "elevated": "#eeeee590",
+      "elevated": "#eeeee5",
       "elevatedForeground": "#1F1F2F",
       "overlay": "#05040C20",
       "subtle": "#edeee7"

packages/ui/src/lib/theme/themes/fields-of-the-shire-dark.json

@@ -20,9 +20,9 @@
     "surface": {
       "background": "#1b1815",
       "foreground": "#ebe0d1",
-      "muted": "#23201c90",
+      "muted": "#23201c",
       "mutedForeground": "#83796f",
-      "elevated": "#2b262290",
+      "elevated": "#2b2622",
       "elevatedForeground": "#ebe0d1",
       "overlay": "#1b1815cc",
       "subtle": "#332d28"

packages/ui/src/lib/theme/themes/fields-of-the-shire-light.json

@@ -20,9 +20,9 @@
     "surface": {
       "background": "#f9f5eb",
       "foreground": "#1a1612",
-      "muted": "#f4efe390",
+      "muted": "#f4efe3",
       "mutedForeground": "#5a5048",
-      "elevated": "#fcf9f090",
+      "elevated": "#fcf9f0",
       "elevatedForeground": "#1a1612",
       "overlay": "#1a161220",
       "subtle": "#efe8da"

packages/ui/src/lib/theme/themes/flexoki-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#151313",
       "foreground": "#CECDC3",
-      "muted": "#1C1B1A90",
+      "muted": "#1C1B1A",
       "mutedForeground": "#807e79",
-      "elevated": "#1c1a1990",
+      "elevated": "#1c1a19",
       "elevatedForeground": "#CECDC3",
       "overlay": "#00000080",
       "subtle": "#1e1d1c"

packages/ui/src/lib/theme/themes/flexoki-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#FFFCF0",
       "foreground": "#100F0F",
-      "muted": "#F2F0E590",
+      "muted": "#F2F0E5",
       "mutedForeground": "#686663",
-      "elevated": "#fdf6ec90",
+      "elevated": "#fdf6ec",
       "elevatedForeground": "#100F0F",
       "overlay": "#100F0F20",
       "subtle": "#F6F0E6"

packages/ui/src/lib/theme/themes/github-dark.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#05080e",
       "foreground": "#ccd4dc",
-      "muted": "#12151b90",
+      "muted": "#12151b",
       "mutedForeground": "#8b949e",
-      "elevated": "#0c0f1690",
+      "elevated": "#0c0f16",
       "elevatedForeground": "#ccd4dc",
       "overlay": "#05080ecc",
       "subtle": "#181c22"

packages/ui/src/lib/theme/themes/github-light.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#ffffff",
       "foreground": "#1e2329",
-      "muted": "#f2f3f390",
+      "muted": "#f2f3f3",
       "mutedForeground": "#57606a",
-      "elevated": "#f9f9f990",
+      "elevated": "#f9f9f9",
       "elevatedForeground": "#1e2329",
       "overlay": "#ffffff33",
       "subtle": "#eaeaeb"

packages/ui/src/lib/theme/themes/gruvbox-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#282828",
       "foreground": "#EBDBB2",
-      "muted": "#32302F90",
+      "muted": "#32302F",
       "mutedForeground": "#918574",
-      "elevated": "#25292b90",
+      "elevated": "#25292b",
       "elevatedForeground": "#EBDBB2",
       "overlay": "#FBF1C720",
       "subtle": "#3e3c3a"

packages/ui/src/lib/theme/themes/gruvbox-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#FBF1C7",
       "foreground": "#3C3836",
-      "muted": "#F2E5BC90",
+      "muted": "#F2E5BC",
       "mutedForeground": "#7C6F64",
-      "elevated": "#efebcd90",
+      "elevated": "#efebcd",
       "elevatedForeground": "#3C3836",
       "overlay": "#28282820",
       "subtle": "#FDF9E8"

packages/ui/src/lib/theme/themes/kanagawa-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#1F1F28",
       "foreground": "#DCD7BA",
-      "muted": "#23232d90",
+      "muted": "#23232d",
       "mutedForeground": "#7e7e77",
-      "elevated": "#2A2A3790",
+      "elevated": "#2A2A37",
       "elevatedForeground": "#DCD7BA",
       "overlay": "#16161DCC",
       "subtle": "#2f2f3d"

packages/ui/src/lib/theme/themes/kanagawa-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#F2ECBC",
       "foreground": "#545464",
-      "muted": "#E7DBA090",
+      "muted": "#E7DBA0",
       "mutedForeground": "#6c6c67",
-      "elevated": "#eae4bf90",
+      "elevated": "#eae4bf",
       "elevatedForeground": "#545464",
       "overlay": "#54546433",
       "subtle": "#f4fff0"

packages/ui/src/lib/theme/themes/lucent-orng-dark.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#1a0c08",
       "foreground": "#eeeeee",
-      "muted": "#281b1790",
+      "muted": "#281b17",
       "mutedForeground": "#808080",
-      "elevated": "#22141190",
+      "elevated": "#221411",
       "elevatedForeground": "#eeeeee",
       "overlay": "#1a0c08cc",
       "subtle": "#2f221f"

packages/ui/src/lib/theme/themes/lucent-orng-light.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#fef7f3",
       "foreground": "#181818",
-      "muted": "#f1eae690",
+      "muted": "#f1eae6",
       "mutedForeground": "#8a8a8a",
-      "elevated": "#f7f1ed90",
+      "elevated": "#f7f1ed",
       "elevatedForeground": "#181818",
       "overlay": "#fef7f333",
       "subtle": "#e8e2de"

packages/ui/src/lib/theme/themes/mono-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#000000",
       "foreground": "#E5E5E5",
-      "muted": "#0A0A0A90",
+      "muted": "#0A0A0A",
       "mutedForeground": "#808080",
-      "elevated": "#14141490",
+      "elevated": "#141414",
       "elevatedForeground": "#E5E5E5",
       "overlay": "#00000080",
       "subtle": "#1A1A1A"

packages/ui/src/lib/theme/themes/mono-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#FFFFFF",
       "foreground": "#1A1A1A",
-      "muted": "#F5F5F590",
+      "muted": "#F5F5F5",
       "mutedForeground": "#757575",
-      "elevated": "#FAFAFA90",
+      "elevated": "#FAFAFA",
       "elevatedForeground": "#1A1A1A",
       "overlay": "#00000020",
       "subtle": "#F0F0F0"

packages/ui/src/lib/theme/themes/mono-plus-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#000000",
       "foreground": "#E5E5E5",
-      "muted": "#0A0A0A90",
+      "muted": "#0A0A0A",
       "mutedForeground": "#808080",
-      "elevated": "#14141490",
+      "elevated": "#141414",
       "elevatedForeground": "#E5E5E5",
       "overlay": "#00000080",
       "subtle": "#1A1A1A"

packages/ui/src/lib/theme/themes/mono-plus-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#FFFFFF",
       "foreground": "#1A1A1A",
-      "muted": "#F5F5F590",
+      "muted": "#F5F5F5",
       "mutedForeground": "#6f6f6f",
-      "elevated": "#FAFAFA90",
+      "elevated": "#FAFAFA",
       "elevatedForeground": "#1A1A1A",
       "overlay": "#00000020",
       "subtle": "#F0F0F0"

packages/ui/src/lib/theme/themes/monokai-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#23241E",
       "foreground": "#F8F8F2",
-      "muted": "#282a2090",
+      "muted": "#282a20",
       "mutedForeground": "#939390",
-      "elevated": "#21221a90",
+      "elevated": "#21221a",
       "elevatedForeground": "#F8F8F2",
       "overlay": "#FFFFFF20",
       "subtle": "#36372a"

packages/ui/src/lib/theme/themes/monokai-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#FDF8EC",
       "foreground": "#292318",
-      "muted": "#F8F2E690",
+      "muted": "#F8F2E6",
       "mutedForeground": "#887c6a",
-      "elevated": "#FBF5E890",
+      "elevated": "#FBF5E8",
       "elevatedForeground": "#292318",
       "overlay": "#1C150C20",
       "subtle": "#F7EFDD"

packages/ui/src/lib/theme/themes/nightowl-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#011627",
       "foreground": "#D6DEEB",
-      "muted": "#0B253A90",
+      "muted": "#0B253A",
       "mutedForeground": "#7d8892",
-      "elevated": "#00112290",
+      "elevated": "#001122",
       "elevatedForeground": "#D6DEEB",
       "overlay": "#FFFFFF20",
       "subtle": "#0f283f"

packages/ui/src/lib/theme/themes/nightowl-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#FBFBFB",
       "foreground": "#403F53",
-      "muted": "#F0F0F090",
+      "muted": "#F0F0F0",
       "mutedForeground": "#747a7a",
-      "elevated": "#FFFFFF90",
+      "elevated": "#FFFFFF",
       "elevatedForeground": "#403F53",
       "overlay": "#1A1A1A20",
       "subtle": "#F0F0F0"

packages/ui/src/lib/theme/themes/nord-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#1F2430",
       "foreground": "#E5E9F0",
-      "muted": "#22293890",
+      "muted": "#222938",
       "mutedForeground": "#7c828e",
-      "elevated": "#1C202A90",
+      "elevated": "#1C202A",
       "elevatedForeground": "#E5E9F0",
       "overlay": "#F8FAFC20",
       "subtle": "#272f40"

packages/ui/src/lib/theme/themes/nord-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#ECEFF4",
       "foreground": "#2E3440",
-      "muted": "#E4E8F090",
+      "muted": "#E4E8F0",
       "mutedForeground": "#6e7481",
-      "elevated": "#e7ebf590",
+      "elevated": "#e7ebf5",
       "elevatedForeground": "#2E3440",
       "overlay": "#1F253020",
       "subtle": "#dee4f0"

packages/ui/src/lib/theme/themes/oc-2-dark.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#121212",
       "foreground": "#f1ece8",
-      "muted": "#1b1b1a90",
+      "muted": "#1b1b1a",
       "mutedForeground": "#cdc8c5",
-      "elevated": "#15141490",
+      "elevated": "#151414",
       "elevatedForeground": "#f1ece8",
       "overlay": "#121212cc",
       "subtle": "#282727"

packages/ui/src/lib/theme/themes/oc-2-light.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#f8f8f8",
       "foreground": "#161210",
-      "muted": "#ebebeb90",
+      "muted": "#ebebeb",
       "mutedForeground": "#302c2a",
-      "elevated": "#f1f1f190",
+      "elevated": "#f1f1f1",
       "elevatedForeground": "#161210",
       "overlay": "#f8f8f833",
       "subtle": "#e2e2e2"

packages/ui/src/lib/theme/themes/onedarkpro-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#1E222A",
       "foreground": "#ABB2BF",
-      "muted": "#21263190",
+      "muted": "#212631",
       "mutedForeground": "#737a89",
-      "elevated": "#23283290",
+      "elevated": "#232832",
       "elevatedForeground": "#ABB2BF",
       "overlay": "#F6F7FB20",
       "subtle": "#2E3442"

packages/ui/src/lib/theme/themes/onedarkpro-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#F5F6F8",
       "foreground": "#2B303B",
-      "muted": "#EEF0F490",
+      "muted": "#EEF0F4",
       "mutedForeground": "#6e727b",
-      "elevated": "#f0f5fa90",
+      "elevated": "#f0f5fa",
       "elevatedForeground": "#2B303B",
       "overlay": "#0E111820",
       "subtle": "#eaedf4"

packages/ui/src/lib/theme/themes/orng-dark.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#050505",
       "foreground": "#eeeeee",
-      "muted": "#14141490",
+      "muted": "#141414",
       "mutedForeground": "#808080",
-      "elevated": "#0e0e0e90",
+      "elevated": "#0e0e0e",
       "elevatedForeground": "#eeeeee",
       "overlay": "#050505cc",
       "subtle": "#1c1c1c"

packages/ui/src/lib/theme/themes/orng-light.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#ffffff",
       "foreground": "#181818",
-      "muted": "#f2f2f290",
+      "muted": "#f2f2f2",
       "mutedForeground": "#8a8a8a",
-      "elevated": "#f8f8f890",
+      "elevated": "#f8f8f8",
       "elevatedForeground": "#181818",
       "overlay": "#ffffff33",
       "subtle": "#e9e9e9"

packages/ui/src/lib/theme/themes/rosepine-dark.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#0c0a16",
       "foreground": "#e0def5",
-      "muted": "#1a182490",
+      "muted": "#1a1824",
       "mutedForeground": "#6e6a86",
-      "elevated": "#14121e90",
+      "elevated": "#14121e",
       "elevatedForeground": "#e0def5",
       "overlay": "#0c0a16cc",
       "subtle": "#211f2c"

packages/ui/src/lib/theme/themes/rosepine-light.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#fbf5ef",
       "foreground": "#454066",
-      "muted": "#f2ebe890",
+      "muted": "#f2ebe8",
       "mutedForeground": "#9893a5",
-      "elevated": "#f6f0ec90",
+      "elevated": "#f6f0ec",
       "elevatedForeground": "#454066",
       "overlay": "#fbf5ef33",
       "subtle": "#ebe5e3"

packages/ui/src/lib/theme/themes/shadesofpurple-dark.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#0e051d",
       "foreground": "#f5f0fe",
-      "muted": "#1d142c90",
+      "muted": "#1d142c",
       "mutedForeground": "#d1ccd8",
-      "elevated": "#170e2590",
+      "elevated": "#170e25",
       "elevatedForeground": "#f5f0fe",
       "overlay": "#0e051dcc",
       "subtle": "#251c33"

packages/ui/src/lib/theme/themes/shadesofpurple-light.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#f8effe",
       "foreground": "#32224f",
-      "muted": "#ede4f490",
+      "muted": "#ede4f4",
       "mutedForeground": "#4e406b",
-      "elevated": "#f3e9f990",
+      "elevated": "#f3e9f9",
       "elevatedForeground": "#32224f",
       "overlay": "#f8effe33",
       "subtle": "#e6dcee"

packages/ui/src/lib/theme/themes/solarized-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#001e25",
       "foreground": "#93A1A1",
-      "muted": "#02232e90",
+      "muted": "#02232e",
       "mutedForeground": "#6f7475",
-      "elevated": "#05283290",
+      "elevated": "#052832",
       "elevatedForeground": "#93A1A1",
       "overlay": "#FDF6E320",
       "subtle": "#042b34"

packages/ui/src/lib/theme/themes/solarized-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#FDF6E3",
       "foreground": "#586E75",
-      "muted": "#F6EFDA90",
+      "muted": "#F6EFDA",
       "mutedForeground": "#7a8587",
-      "elevated": "#FAF3DC90",
+      "elevated": "#FAF3DC",
       "elevatedForeground": "#586E75",
       "overlay": "#07364220",
       "subtle": "#F6EFDA"

packages/ui/src/lib/theme/themes/tokyonight-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#0F111A",
       "foreground": "#C0CAF5",
-      "muted": "#11142890",
+      "muted": "#111428",
       "mutedForeground": "#6a739d",
-      "elevated": "#13162990",
+      "elevated": "#131629",
       "elevatedForeground": "#C0CAF5",
       "overlay": "#EAEAFF20",
       "subtle": "#171b30"

packages/ui/src/lib/theme/themes/tokyonight-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#E1E2E7",
       "foreground": "#273153",
-      "muted": "#DEE0EA90",
+      "muted": "#DEE0EA",
       "mutedForeground": "#686e9b",
-      "elevated": "#dee0ee90",
+      "elevated": "#dee0ee",
       "elevatedForeground": "#273153",
       "overlay": "#1C254420",
       "subtle": "#dadce6"

packages/ui/src/lib/theme/themes/vercel-dark.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#000000",
       "foreground": "#ededed",
-      "muted": "#0f0f0f90",
+      "muted": "#0f0f0f",
       "mutedForeground": "#878787",
-      "elevated": "#09090990",
+      "elevated": "#090909",
       "elevatedForeground": "#ededed",
       "overlay": "#000000cc",
       "subtle": "#171717"

packages/ui/src/lib/theme/themes/vercel-light.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#ffffff",
       "foreground": "#161616",
-      "muted": "#f1f1f190",
+      "muted": "#f1f1f1",
       "mutedForeground": "#666666",
-      "elevated": "#f8f8f890",
+      "elevated": "#f8f8f8",
       "elevatedForeground": "#161616",
       "overlay": "#ffffff33",
       "subtle": "#e8e8e8"

packages/ui/src/lib/theme/themes/vesper-dark.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#101010",
       "foreground": "#FFFFFF",
-      "muted": "#14141490",
+      "muted": "#141414",
       "mutedForeground": "#7f7f7f",
-      "elevated": "#110f0f90",
+      "elevated": "#110f0f",
       "elevatedForeground": "#FFFFFF",
       "overlay": "#FFFFFF20",
       "subtle": "#232323"

packages/ui/src/lib/theme/themes/vesper-light.json

@@ -19,9 +19,9 @@
     "surface": {
       "background": "#FFFFFF",
       "foreground": "#101010",
-      "muted": "#F8F8F890",
+      "muted": "#F8F8F8",
       "mutedForeground": "#908d8d",
-      "elevated": "#F0F0F090",
+      "elevated": "#F0F0F0",
       "elevatedForeground": "#101010",
       "overlay": "#00000020",
       "subtle": "#f5f3f3"

packages/ui/src/lib/theme/themes/vitesse-dark-dark.json

@@ -23,9 +23,9 @@
     "surface": {
       "background": "#121212",
       "foreground": "#dbd7caee",
-      "muted": "#17171790",
+      "muted": "#171717",
       "mutedForeground": "#c0beb99c",
-      "elevated": "#1a1a1a90",
+      "elevated": "#1a1a1a",
       "elevatedForeground": "#dbd7caee",
       "overlay": "#12121280",
       "subtle": "#212020"

packages/ui/src/lib/theme/themes/vitesse-light-light.json

@@ -23,9 +23,9 @@
     "surface": {
       "background": "#ffffff",
       "foreground": "#2c2c28",
-      "muted": "#ecebeb90",
+      "muted": "#ecebeb",
       "mutedForeground": "#5b5c54cb",
-      "elevated": "#f7f7f790",
+      "elevated": "#f7f7f7",
       "elevatedForeground": "#393a34",
       "overlay": "#ffffff80",
       "subtle": "#ecebeb"

packages/ui/src/lib/theme/themes/zenburn-dark.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#262626",
       "foreground": "#dcdccb",
-      "muted": "#32323190",
+      "muted": "#323231",
       "mutedForeground": "#9f9f9f",
-      "elevated": "#2d2d2c90",
+      "elevated": "#2d2d2c",
       "elevatedForeground": "#dcdccb",
       "overlay": "#262626cc",
       "subtle": "#383836"

packages/ui/src/lib/theme/themes/zenburn-light.json

@@ -25,9 +25,9 @@
     "surface": {
       "background": "#fffff4",
       "foreground": "#333333",
-      "muted": "#f4f4e990",
+      "muted": "#f4f4e9",
       "mutedForeground": "#6f6f6f",
-      "elevated": "#f9f9ef90",
+      "elevated": "#f9f9ef",
       "elevatedForeground": "#333333",
       "overlay": "#fffff433",
       "subtle": "#ecece2"

packages/ui/src/styles/design-system.css

@@ -135,29 +135,12 @@
     overscroll-behavior-y: none;
   }
 
-  :root.desktop-runtime:not(.no-vibrancy) body,
+  :root.desktop-runtime body,
-  :root.desktop-runtime:not(.no-vibrancy) #root {
+  :root.desktop-runtime #root {
-    background: transparent !important;
-    background-color: transparent !important;
-  }
-
-  :root.desktop-runtime.no-vibrancy body,
-  :root.desktop-runtime.no-vibrancy #root {
     background: var(--background) !important;
     background-color: var(--background) !important;
   }
 
-  /* When vibrancy is off, force sidebar overlays to solid and disable blur. */
-  :root.desktop-runtime.no-vibrancy {
-    --sidebar-overlay-strong: var(--sidebar) !important;
-    --sidebar-overlay-soft: var(--sidebar) !important;
-  }
-
-  :root.desktop-runtime.no-vibrancy .backdrop-blur {
-    -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
-  }
-
   .font-sans {
     font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
   }

packages/ui/src/styles/mobile.css

@@ -438,7 +438,7 @@
 }
 
 @media (display-mode: standalone) {
-  /* Home indicator blur overlay */
+  /* Home indicator overlay */
   :root.device-mobile:not(.desktop-runtime) body::after {
     content: '';
     position: fixed;
@@ -454,8 +454,6 @@
       rgba(from var(--background) r g b / 0.3) 85%,
       transparent 100%
     );
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
     z-index: 1000;
     pointer-events: none;
   }