fix: make appearance opacity visible

Author: ryota-murakami

src/main/utils/windowBackgroundBlur.test.ts

@@ -5,7 +5,6 @@ import { WINDOW_BACKGROUND_BLUR_MAX_RADIUS } from '@/shared/settings'
 
 import {
   applyWindowBackgroundBlur,
-  MAIN_WINDOW_BLURRED_BACKGROUND,
   getMainWindowBackgroundColor,
   MAIN_WINDOW_OPAQUE_BACKGROUND,
   normalizeWindowBackgroundBlurRadius,
@@ -53,10 +52,8 @@ describe('windowBackgroundBlur helpers', () => {
     expect(getMainWindowBackgroundColor(0)).toBe(MAIN_WINDOW_OPAQUE_BACKGROUND)
   })
 
-  it('uses an alpha background when blur is enabled', () => {
-    expect(getMainWindowBackgroundColor(12)).toBe(
-      MAIN_WINDOW_BLURRED_BACKGROUND,
-    )
+  it('uses slider-derived alpha background when blur is enabled', () => {
+    expect(getMainWindowBackgroundColor(12)).toBe('rgba(10, 15, 28, 0.92)')
   })
 
   it('applies opaque color and zero blur when the radius is disabled', () => {
@@ -79,10 +76,10 @@ describe('windowBackgroundBlur helpers', () => {
     applyWindowBackgroundBlur(window, WINDOW_BACKGROUND_BLUR_MAX_RADIUS + 1)
 
     expect(window.setBackgroundColor).toHaveBeenCalledWith(
-      MAIN_WINDOW_BLURRED_BACKGROUND,
+      'rgba(10, 15, 28, 0.68)',
     )
     expect(contentView.setBackgroundColor).toHaveBeenCalledWith(
-      MAIN_WINDOW_BLURRED_BACKGROUND,
+      'rgba(10, 15, 28, 0.68)',
     )
     expect(contentView.setBackgroundBlur).toHaveBeenCalledWith(
       WINDOW_BACKGROUND_BLUR_MAX_RADIUS,
@@ -94,10 +91,10 @@ describe('windowBackgroundBlur helpers', () => {
 
     expect(() => applyWindowBackgroundBlur(window, 12)).not.toThrow()
     expect(window.setBackgroundColor).toHaveBeenCalledWith(
-      MAIN_WINDOW_BLURRED_BACKGROUND,
+      'rgba(10, 15, 28, 0.92)',
     )
     expect(contentView.setBackgroundColor).toHaveBeenCalledWith(
-      MAIN_WINDOW_BLURRED_BACKGROUND,
+      'rgba(10, 15, 28, 0.92)',
     )
     expect('setBackgroundBlur' in contentView).toBe(false)
   })
@@ -107,7 +104,7 @@ describe('windowBackgroundBlur helpers', () => {
 
     expect(() => applyWindowBackgroundBlur(window, 12)).not.toThrow()
     expect(window.setBackgroundColor).toHaveBeenCalledWith(
-      MAIN_WINDOW_BLURRED_BACKGROUND,
+      'rgba(10, 15, 28, 0.92)',
     )
     expect('setBackgroundColor' in contentView).toBe(false)
     expect(contentView.setBackgroundBlur).toHaveBeenCalledWith(12)

src/main/utils/windowBackgroundBlur.ts

@@ -1,8 +1,8 @@
 import type { BrowserWindow, View } from 'electron'
 
 import {
-  WINDOW_BACKGROUND_BLUR_MAX_RADIUS,
-  WINDOW_BACKGROUND_BLUR_MIN_RADIUS,
+  getWindowBackgroundOpacity,
+  normalizeWindowBackgroundBlurRadius,
 } from '@/shared/settings'
 
 /**
@@ -13,43 +13,30 @@ import {
 export const MAIN_WINDOW_OPAQUE_BACKGROUND = 'rgb(10, 15, 28)'
 
 /**
- * Alpha mirrors the renderer's `bg-background/85` class so Chromium and the
- * native Electron contentView expose the same glass strength.
+ * RGB channels for the dark app canvas used by Electron before renderer CSS
+ * is available. The renderer uses the OKLCH token equivalent.
  */
-export const MAIN_WINDOW_BLURRED_BACKGROUND = 'rgba(10, 15, 28, 0.85)'
+export const MAIN_WINDOW_BACKGROUND_RGB_CHANNELS = '10, 15, 28'
 
 type BackgroundBlurCapableView = View & {
   setBackgroundBlur?: (blurRadius: number) => void
 }
 
-/**
- * Clamp a persisted blur radius before it touches Electron APIs.
- * @param blurRadius - User setting from `settings.json` or IPC.
- * @returns Whole-pixel radius inside the app-supported range.
- * @example
- * normalizeWindowBackgroundBlurRadius(99) // => 48
- */
-export function normalizeWindowBackgroundBlurRadius(
-  blurRadius: number,
-): number {
-  return Math.min(
-    WINDOW_BACKGROUND_BLUR_MAX_RADIUS,
-    Math.max(WINDOW_BACKGROUND_BLUR_MIN_RADIUS, Math.trunc(blurRadius)),
-  )
-}
+export { normalizeWindowBackgroundBlurRadius } from '@/shared/settings'
 
 /**
  * Pick the window backplate color required by Electron's blur renderer.
  * @param blurRadius - Normalized or raw blur radius.
- * @returns Opaque color when blur is off; alpha color when blur is on.
+ * @returns Opaque color when blur is off; slider-derived alpha when blur is on.
  * @example
- * getMainWindowBackgroundColor(12) // => 'rgba(10, 15, 28, 0.82)'
+ * getMainWindowBackgroundColor(48) // => 'rgba(10, 15, 28, 0.68)'
  */
 export function getMainWindowBackgroundColor(blurRadius: number): string {
   const normalizedRadius = normalizeWindowBackgroundBlurRadius(blurRadius)
-  // Electron only shows `setBackgroundBlur` through an alpha background.
   if (normalizedRadius > 0) {
-    return MAIN_WINDOW_BLURRED_BACKGROUND
+    const opacity = getWindowBackgroundOpacity(normalizedRadius)
+    // Electron only shows native blur through an alpha BrowserWindow backplate.
+    return `rgba(${MAIN_WINDOW_BACKGROUND_RGB_CHANNELS}, ${opacity})`
   }
   return MAIN_WINDOW_OPAQUE_BACKGROUND
 }

src/renderer/settings/sections/Appearance.browser.test.tsx

@@ -53,6 +53,7 @@ describe('Settings → Appearance', () => {
     const slider = screen.getByRole('slider', { name: /Opacity/i })
     await slider.fill('24')
 
+    await expect.element(screen.getByText('84% / 24px')).toBeVisible()
     await expect.poll(() => mockSettingsSet.mock.calls.length).toBe(1)
     expect(mockSettingsSet).toHaveBeenCalledWith({
       windowBackgroundBlurRadius: 24,

src/renderer/settings/sections/Appearance.tsx

@@ -7,6 +7,7 @@ import { useUpdateSettings } from '@/renderer/src/hooks/useUpdateSettings'
 import { useAppSelector } from '@/renderer/src/redux/hooks'
 import {
   DEFAULT_SETTINGS,
+  getWindowBackgroundOpacity,
   WINDOW_BACKGROUND_BLUR_MAX_RADIUS,
   WINDOW_BACKGROUND_BLUR_MIN_RADIUS,
 } from '@/shared/settings'
@@ -61,10 +62,9 @@ const BackgroundBlurRangeInput = React.memo(function BackgroundBlurRangeInput({
 /**
  * Appearance pane for visual controls backed by persisted Settings.
  *
- * The first real control is the Electron 42 background blur radius. It
- * updates main-process settings through the same optimistic IPC path as
- * General → default tab, so the main window reacts immediately while the
- * value remains durable across launches.
+ * The first real control is the Electron 42 background blur radius. The same
+ * slider also lowers the app-surface opacity, so users see an immediate
+ * opacity/blur change instead of a fixed 85% backplate.
  */
 export const Appearance = React.memo(function Appearance(): React.ReactElement {
   const windowBackgroundBlurRadius = useAppSelector(
@@ -118,10 +118,13 @@ export const Appearance = React.memo(function Appearance(): React.ReactElement {
     clearPersistTimer()
   })
 
+  const backgroundOpacityPercent = Math.round(
+    getWindowBackgroundOpacity(blurRadiusDraft) * 100,
+  )
   const blurRadiusLabel =
     blurRadiusDraft === WINDOW_BACKGROUND_BLUR_MIN_RADIUS
-      ? 'Off'
-      : `${blurRadiusDraft}px`
+      ? 'Opaque'
+      : `${backgroundOpacityPercent}% / ${blurRadiusDraft}px`
   const isDefaultBlurRadius =
     blurRadiusDraft === DEFAULT_SETTINGS.windowBackgroundBlurRadius
 
@@ -132,7 +135,7 @@ export const Appearance = React.memo(function Appearance(): React.ReactElement {
     >
       <SectionRow
         label={BACKGROUND_BLUR_LABEL}
-        description="Background glass strength for the main window."
+        description="Surface opacity and background blur for the main window."
       >
         <div className="flex max-w-md flex-col gap-2">
           <div className="flex items-center gap-3">

src/renderer/src/App.browser.test.tsx

@@ -0,0 +1,97 @@
+import { configureStore } from '@reduxjs/toolkit'
+import type React from 'react'
+import { Provider } from 'react-redux'
+import { describe, expect, it, vi } from 'vitest'
+import { render } from 'vitest-browser-react'
+
+import '@/renderer/src/styles/globals.css'
+import { DEFAULT_SETTINGS } from '@/shared/settings'
+
+import settingsReducer from './redux/slices/settingsSlice'
+import themeReducer from './redux/slices/themeSlice'
+
+vi.mock('react-resizable-panels', () => ({
+  Group: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  Panel: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+  Separator: ({ className }: { className?: string }) => (
+    <div className={className} />
+  ),
+}))
+
+vi.mock('sonner', () => ({
+  Toaster: () => null,
+}))
+
+vi.mock('./components/layout/DetailPanel', () => ({
+  DetailPanel: () => <div data-testid="detail-panel" />,
+}))
+
+vi.mock('./components/layout/MainContent', () => ({
+  MainContent: () => <main data-testid="main-content" />,
+}))
+
+vi.mock('./components/layout/Sidebar', () => ({
+  Sidebar: () => <aside data-testid="sidebar" />,
+}))
+
+vi.mock('./components/UpdateToast', () => ({
+  UpdateToast: () => null,
+}))
+
+vi.mock('./components/ui/tooltip', () => ({
+  TooltipProvider: ({ children }: { children: React.ReactNode }) => (
+    <>{children}</>
+  ),
+}))
+
+vi.mock('./hooks/useReleaseNotesToast', () => ({
+  useReleaseNotesToast: vi.fn(),
+}))
+
+vi.mock('./hooks/useSettingsSync', () => ({
+  useSettingsSync: vi.fn(),
+}))
+
+vi.mock('./hooks/useUpdateNotification', () => ({
+  useUpdateNotification: vi.fn(),
+}))
+
+/**
+ * Render App with only the slices it reads directly. Heavy child panels are
+ * mocked so this test can focus on the window-surface opacity contract.
+ * @param windowBackgroundBlurRadius - Slider value persisted in settings.
+ * @returns Browser test screen for the rendered shell.
+ * @example
+ * renderAppWithBlur(24)
+ */
+async function renderAppWithBlur(windowBackgroundBlurRadius: number) {
+  const { default: App } = await import('./App')
+  const store = configureStore({
+    reducer: {
+      settings: settingsReducer,
+      theme: themeReducer,
+    },
+    preloadedState: {
+      settings: { ...DEFAULT_SETTINGS, windowBackgroundBlurRadius },
+    },
+  })
+
+  return render(
+    <Provider store={store}>
+      <App />
+    </Provider>,
+  )
+}
+
+describe('App window surface', () => {
+  it('uses slider-derived opacity on the app backplate', async () => {
+    const screen = await renderAppWithBlur(24)
+    const surface = screen
+      .getByTestId('window-background-surface')
+      .element() as HTMLElement
+
+    expect(surface.style.backgroundColor).toBe(
+      'oklch(from var(--background) l c h / 0.84)',
+    )
+  })
+})

src/renderer/src/App.tsx

@@ -2,6 +2,8 @@ import React from 'react'
 import { Panel, Group, Separator } from 'react-resizable-panels'
 import { Toaster } from 'sonner'
 
+import { getWindowBackgroundOpacity } from '@/shared/settings'
+
 import { DetailPanel } from './components/layout/DetailPanel'
 import { MainContent } from './components/layout/MainContent'
 import { Sidebar } from './components/layout/Sidebar'
@@ -10,7 +12,6 @@ import { UpdateToast } from './components/UpdateToast'
 import { useReleaseNotesToast } from './hooks/useReleaseNotesToast'
 import { useSettingsSync } from './hooks/useSettingsSync'
 import { useUpdateNotification } from './hooks/useUpdateNotification'
-import { cn } from './lib/utils'
 import { useAppSelector } from './redux/hooks'
 
 const separatorClass =
@@ -117,19 +118,23 @@ const App = React.memo(function App(): React.ReactElement {
   // Drive sonner's theme prop from the persisted redux mode so toasts honor
   // the user's light/dark choice. Pre-fix this was hardcoded `theme="dark"`.
   const mode = useAppSelector((state) => state.theme.mode)
-  const hasWindowBackgroundBlur = useAppSelector(
-    (state) => state.settings.windowBackgroundBlurRadius > 0,
+  const windowBackgroundBlurRadius = useAppSelector(
+    (state) => state.settings.windowBackgroundBlurRadius,
+  )
+  const windowBackgroundOpacity = getWindowBackgroundOpacity(
+    windowBackgroundBlurRadius,
   )
 
   return (
     <TooltipProvider delayDuration={200}>
       {/* Window glow effect - subtle inner shadow for depth */}
       <div
-        className={cn(
-          'flex h-screen text-foreground window-glow',
-          // Keep the normal opaque surface until the user turns on blur.
-          hasWindowBackgroundBlur ? 'bg-background/85' : 'bg-background',
-        )}
+        data-testid="window-background-surface"
+        className="flex h-screen text-foreground window-glow transition-[background-color]"
+        // Keep text opaque while the slider changes only the app backplate.
+        style={{
+          backgroundColor: `oklch(from var(--background) l c h / ${windowBackgroundOpacity})`,
+        }}
       >
         <Sidebar />
         <Group orientation="horizontal" className="flex-1 h-full">

src/shared/settings.test.ts

@@ -3,9 +3,13 @@ import { describe, it, expect } from 'vitest'
 import { AGENT_DEFINITIONS } from './constants'
 import {
   DEFAULT_SETTINGS,
+  getWindowBackgroundOpacity,
+  normalizeWindowBackgroundBlurRadius,
   SettingsSchema,
   WINDOW_BACKGROUND_BLUR_MAX_RADIUS,
   WINDOW_BACKGROUND_BLUR_MIN_RADIUS,
+  WINDOW_BACKGROUND_OPACITY_MIN,
+  WINDOW_BACKGROUND_OPACITY_MAX,
   WINDOW_SIZE_MIN_DIMENSION,
 } from './settings'
 
@@ -242,3 +246,33 @@ describe('SettingsSchema', () => {
     expect(parsed.hiddenAgentIds).toEqual([firstAgentId])
   })
 })
+
+/**
+ * Pure helpers shared by the main process and renderer. These keep Electron's
+ * native backplate and the React app root on the same visible opacity curve.
+ */
+describe('window background appearance helpers', () => {
+  it('clamps blur radius values before opacity math', () => {
+    expect(normalizeWindowBackgroundBlurRadius(-12)).toBe(
+      WINDOW_BACKGROUND_BLUR_MIN_RADIUS,
+    )
+    expect(normalizeWindowBackgroundBlurRadius(12.9)).toBe(12)
+    expect(normalizeWindowBackgroundBlurRadius(99)).toBe(
+      WINDOW_BACKGROUND_BLUR_MAX_RADIUS,
+    )
+  })
+
+  it('maps disabled blur to an opaque app surface', () => {
+    expect(getWindowBackgroundOpacity(0)).toBe(WINDOW_BACKGROUND_OPACITY_MAX)
+  })
+
+  it('maps maximum blur to the minimum readable surface opacity', () => {
+    expect(getWindowBackgroundOpacity(WINDOW_BACKGROUND_BLUR_MAX_RADIUS)).toBe(
+      WINDOW_BACKGROUND_OPACITY_MIN,
+    )
+  })
+
+  it('maps mid slider values to visibly different opacity', () => {
+    expect(getWindowBackgroundOpacity(24)).toBe(0.84)
+  })
+})