From 824497e3a7008f80f208af2f607d3a1c83562ed2 Mon Sep 17 00:00:00 2001
From: moreih29 <moreih29@gmail.com>
Date: Thu, 25 Jun 2026 11:04:27 +0900
Subject: [PATCH 1/3] fix(file-tree): allow folders to be multi-selected with
 shift/cmd
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Folder rows bound onClick to onToggle (no event), so handleRowClick
never saw shift/cmd modifiers and folder range/toggle selection
silently no-op'd while files worked. Make the click binding
type-agnostic so folders forward the event too; the parent already
branches plain-click (folder→expand, file→open) vs modified-click
(extend/toggle selection). Matches VSCode's type-agnostic explorer
selection model.

Removes the now-orphaned onToggle prop and adds a regression guard
asserting dir rows forward modifier clicks.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/files/file-tree/row.tsx        |  13 +-
 .../files/file-tree/virtual-body.tsx          |   1 -
 .../files/file-tree-row-4state.test.tsx       |   1 -
 .../files/file-tree-row-dir-click.test.tsx    | 166 ++++++++++++++++++
 4 files changed, 175 insertions(+), 6 deletions(-)
 create mode 100644 tests/unit/renderer/components/files/file-tree-row-dir-click.test.tsx

diff --git a/src/renderer/components/files/file-tree/row.tsx b/src/renderer/components/files/file-tree/row.tsx
index e00f684f..d3c2ecaf 100644
--- a/src/renderer/components/files/file-tree/row.tsx
+++ b/src/renderer/components/files/file-tree/row.tsx
@@ -58,8 +58,14 @@ interface FileTreeRowProps {
   isIgnored?: boolean;
   /** True when this row is in the cut clipboard (VSCode parity: dimmed). */
   isCut?: boolean;
-  onToggle: () => void; // dir click
-  onClick: (e: React.MouseEvent) => void; // file click
+  /**
+   * Row click. Always receives the event so the parent's handler can read
+   * shift/cmd modifiers for range/toggle multi-selection. Applies uniformly
+   * to files AND folders — the parent (handleRowClick) decides the primary
+   * action: a plain (unmodified) folder click toggles expand, a plain file
+   * click opens it, while modified clicks extend/toggle the selection set.
+   */
+  onClick: (e: React.MouseEvent) => void;
   /**
    * File-only double-click. Mirrors VSCode explorer's "double-click =
    * open as a permanent (non-preview) tab" gesture.
@@ -91,7 +97,6 @@ export function FileTreeRow({
   decoration,
   isIgnored = false,
   isCut = false,
-  onToggle,
   onClick,
   onDoubleClick,
   onContextMenu,
@@ -174,7 +179,7 @@ export function FileTreeRow({
       aria-level={depth + 1}
       aria-expanded={isDir ? isExpanded : undefined}
       aria-selected={isSelected}
-      onClick={isDir ? onToggle : (e) => onClick(e)}
+      onClick={(e) => onClick(e)}
       onDoubleClick={isDir ? undefined : onDoubleClick}
       onContextMenu={onContextMenu}
       title={node.name}
diff --git a/src/renderer/components/files/file-tree/virtual-body.tsx b/src/renderer/components/files/file-tree/virtual-body.tsx
index 5206a020..a470e26c 100644
--- a/src/renderer/components/files/file-tree/virtual-body.tsx
+++ b/src/renderer/components/files/file-tree/virtual-body.tsx
@@ -158,7 +158,6 @@ export function FileTreeVirtualBody({
               isLoading={tree?.loading.has(item.absPath) ?? false}
               decoration={decoration}
               isIgnored={isIgnored}
-              onToggle={() => onRowClick(flatIdx, item)}
               onClick={(e) => onRowClick(flatIdx, item, e)}
               onDoubleClick={() => onRowDoubleClick(flatIdx, item)}
               onContextMenu={() => onRowContextMenu(flatIdx, item)}
diff --git a/tests/unit/renderer/components/files/file-tree-row-4state.test.tsx b/tests/unit/renderer/components/files/file-tree-row-4state.test.tsx
index b3a5257c..f0e01549 100644
--- a/tests/unit/renderer/components/files/file-tree-row-4state.test.tsx
+++ b/tests/unit/renderer/components/files/file-tree-row-4state.test.tsx
@@ -36,7 +36,6 @@ function renderRow(props: Partial<React.ComponentProps<typeof FileTreeRow>> = {}
       isExpanded: false,
       isSelected: false,
       isFocused: false,
-      onToggle: () => {},
       onClick: () => {},
       ...props,
     }),
diff --git a/tests/unit/renderer/components/files/file-tree-row-dir-click.test.tsx b/tests/unit/renderer/components/files/file-tree-row-dir-click.test.tsx
new file mode 100644
index 00000000..01a0b07a
--- /dev/null
+++ b/tests/unit/renderer/components/files/file-tree-row-dir-click.test.tsx
@@ -0,0 +1,166 @@
+/**
+ * Regression guard — FileTreeRow forwards the click event for FOLDERS too.
+ *
+ * The bug: row.tsx bound `onClick={isDir ? onToggle : (e) => onClick(e)}`.
+ * Folders got `onToggle` (called with NO event), so the parent's
+ * handleRowClick never saw shift/cmd modifiers and folder multi-selection
+ * (range / toggle) silently no-op'd. Files worked because they forwarded `e`.
+ *
+ * The fix makes the binding type-agnostic: `onClick={(e) => onClick(e)}`.
+ * Both files AND folders forward the event; the parent decides the primary
+ * action (plain folder click → expand, modified click → extend/toggle).
+ *
+ * HOW THIS TEST RENDERS WITHOUT A DOM
+ * -----------------------------------
+ * DOM mounting is intentionally avoided in this project (happy-dom caused
+ * hangs — see portal-fiber-identity.test.ts). Mirroring browser-view.test.tsx,
+ * we mock `react` so its hooks forward to React's live dispatcher slot
+ * (`__CLIENT_INTERNALS…H`). Outside our render that slot is React's real
+ * dispatcher, so the mock is transparent and never leaks into other test
+ * files. During our render we point the slot at a minimal slot-indexed
+ * dispatcher, invoke the FileTreeRow function directly, and inspect the
+ * returned <button> element's props. No react-i18next mock is needed — the
+ * only useTranslation() in row.tsx belongs to a sibling component, not
+ * FileTreeRow.
+ */
+
+import { describe, expect, it, mock } from "bun:test";
+
+const currentReact = await import("react");
+const reactInternals = (
+  currentReact as unknown as {
+    __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE: {
+      H: Record<string, (...a: unknown[]) => unknown> | null;
+    };
+  }
+).__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+
+// Transparent delegating mock — forwards every hook to React's live dispatcher.
+// Outside our render() the slot holds React's real dispatcher, so this mock is
+// inert for all other tests.
+mock.module("react", () => ({
+  ...currentReact,
+  useRef: (init: unknown) => reactInternals.H?.useRef(init),
+  useState: (init: unknown) => reactInternals.H?.useState(init),
+  useCallback: (cb: unknown, deps?: readonly unknown[]) => reactInternals.H?.useCallback(cb, deps),
+  useMemo: (f: () => unknown, deps?: readonly unknown[]) => reactInternals.H?.useMemo(f, deps),
+  useEffect: (fn: () => void, deps?: readonly unknown[]) => reactInternals.H?.useEffect(fn, deps),
+  useContext: (ctx: unknown) => reactInternals.H?.useContext(ctx),
+}));
+
+const { FileTreeRow } = await import(
+  "../../../../../src/renderer/components/files/file-tree/row"
+);
+import type { TreeNode } from "../../../../../src/renderer/state/stores/files";
+
+// Minimal slot-indexed dispatcher: enough for FileTreeRow's useMemo/useState +
+// useDragSource's useRef/useCallback/useEffect. Effects are captured, never run.
+function withDispatcher<T>(run: () => T): T {
+  const refs: Array<{ current: unknown }> = [];
+  const states: unknown[] = [];
+  let refCursor = 0;
+  let stateCursor = 0;
+  const dispatcher = {
+    useRef(initial: unknown) {
+      const i = refCursor++;
+      if (!(i in refs)) refs[i] = { current: initial };
+      return refs[i];
+    },
+    useState(initial: unknown) {
+      const i = stateCursor++;
+      if (!(i in states)) states[i] = typeof initial === "function" ? (initial as () => unknown)() : initial;
+      return [states[i], () => {}];
+    },
+    useCallback: (cb: unknown) => cb,
+    useMemo: (factory: () => unknown) => factory(),
+    useEffect: () => {},
+    useContext: () => undefined,
+  };
+  const previous = reactInternals.H;
+  reactInternals.H = dispatcher as unknown as typeof reactInternals.H;
+  try {
+    return run();
+  } finally {
+    reactInternals.H = previous;
+  }
+}
+
+const DIR_NODE: TreeNode = {
+  absPath: "/repo/src",
+  name: "src",
+  type: "dir",
+  childrenLoaded: true,
+  children: [],
+};
+
+const FILE_NODE: TreeNode = {
+  absPath: "/repo/a.ts",
+  name: "a.ts",
+  type: "file",
+  childrenLoaded: false,
+  children: [],
+};
+
+interface RenderedButton {
+  props: {
+    onClick: (e: unknown) => void;
+    onDoubleClick?: (e: unknown) => void;
+  };
+}
+
+function renderButton(node: TreeNode, onClick: (e: unknown) => void): RenderedButton {
+  return withDispatcher(() =>
+    (FileTreeRow as unknown as (p: Record<string, unknown>) => RenderedButton)({
+      id: "row-0",
+      workspaceId: "ws",
+      absPath: node.absPath,
+      node,
+      depth: 1,
+      isExpanded: false,
+      isSelected: false,
+      isFocused: false,
+      onClick,
+      onDoubleClick: () => {},
+    }),
+  );
+}
+
+describe("FileTreeRow — click event forwarding (folder multi-select regression)", () => {
+  it("DIR row forwards cmd-click event with metaKey intact", () => {
+    const calls: Array<{ metaKey?: boolean }> = [];
+    const el = renderButton(DIR_NODE, (e) => calls.push(e as { metaKey?: boolean }));
+
+    el.props.onClick({ metaKey: true, shiftKey: false });
+
+    expect(calls).toHaveLength(1);
+    expect(calls[0]?.metaKey).toBe(true);
+  });
+
+  it("DIR row forwards shift-click event with shiftKey intact", () => {
+    const calls: Array<{ shiftKey?: boolean }> = [];
+    const el = renderButton(DIR_NODE, (e) => calls.push(e as { shiftKey?: boolean }));
+
+    el.props.onClick({ metaKey: false, shiftKey: true });
+
+    expect(calls).toHaveLength(1);
+    expect(calls[0]?.shiftKey).toBe(true);
+  });
+
+  it("FILE row forwards the click event (unchanged behavior)", () => {
+    const calls: Array<{ metaKey?: boolean }> = [];
+    const el = renderButton(FILE_NODE, (e) => calls.push(e as { metaKey?: boolean }));
+
+    el.props.onClick({ metaKey: true, shiftKey: false });
+
+    expect(calls).toHaveLength(1);
+    expect(calls[0]?.metaKey).toBe(true);
+  });
+
+  it("double-click stays file-only (dir row has no onDoubleClick)", () => {
+    const dir = renderButton(DIR_NODE, () => {});
+    const file = renderButton(FILE_NODE, () => {});
+
+    expect(dir.props.onDoubleClick).toBeUndefined();
+    expect(file.props.onDoubleClick).toBeDefined();
+  });
+});

From 1904ca5b0cecbfc37322ac91bec45e0066c640b1 Mon Sep 17 00:00:00 2001
From: moreih29 <moreih29@gmail.com>
Date: Thu, 25 Jun 2026 11:17:53 +0900
Subject: [PATCH 2/3] feat(settings): add adjustable inactive-panel dimming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The inactive editor-group veil used a per-theme hardcoded alpha
(dark 0.2 / light 0.04), so the island-separation dimming was not
user-adjustable. Add an Appearance slider (0–200%, default 100%) that
scales each theme's tuned veil alpha at runtime.

Mechanism mirrors window-opacity: the veil token's alpha becomes
calc(themeAlpha * var(--inactive-panel-dim, 1)); a new store persists
the multiplier (localStorage boot cache + appState), an effect hook
injects the CSS var, and the value participates in settings dirty
tracking. Fallback of 1 keeps default appearance byte-identical.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/renderer/app.tsx                          | 12 ++-
 src/renderer/bootstrap.ts                     |  4 +
 .../settings/panels/appearance-panel.tsx      | 59 ++++++++++++
 .../hooks/use-inactive-panel-dim-effect.ts    | 23 +++++
 .../state/stores/inactive-panel-dim.ts        | 95 +++++++++++++++++++
 src/renderer/styles/theme.generated.css       | 22 ++---
 src/shared/design-tokens/theme-adapter.ts     | 25 ++++-
 src/shared/i18n/locales/en/settings.json      |  4 +-
 src/shared/i18n/locales/ko/settings.json      |  4 +-
 src/shared/types/app-state.ts                 |  5 +
 10 files changed, 237 insertions(+), 16 deletions(-)
 create mode 100644 src/renderer/hooks/use-inactive-panel-dim-effect.ts
 create mode 100644 src/renderer/state/stores/inactive-panel-dim.ts

diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 49740f03..b09024ae 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -29,6 +29,7 @@ import { AddWorkspaceDialog } from "./components/workspace/add-workspace";
 import { WorkspacePanel } from "./components/workspace/panel";
 import { showRemoveWorkspaceConfirm } from "./components/workspace/remove-workspace-dialog";
 import { useThemeEffect } from "./hooks/use-theme-effect";
+import { useInactivePanelDimEffect } from "./hooks/use-inactive-panel-dim-effect";
 import { useWindowOpacityEffect } from "./hooks/use-window-opacity-effect";
 import { ipcCallResult } from "./ipc/client";
 import { useGlobalKeybindings } from "./keybindings/use-global-keybindings";
@@ -42,6 +43,7 @@ import { useSettingsUIStore } from "./state/stores/settings-ui";
 import { useTerminalStore } from "./state/stores/terminal";
 import { useThemeStore } from "./state/stores/theme";
 import { useUIStore } from "./state/stores/ui";
+import { useInactivePanelDimStore } from "./state/stores/inactive-panel-dim";
 import { useWindowOpacityStore } from "./state/stores/window-opacity";
 import { useWorkspacesStore } from "./state/stores/workspaces";
 
@@ -75,6 +77,7 @@ export function App() {
   const iconThemePreference = useIconThemeStore((s) => s.preference);
   const themePreference = useThemeStore((s) => s.preference);
   const opacity = useWindowOpacityStore((s) => s.opacity);
+  const inactivePanelDim = useInactivePanelDimStore((s) => s.dim);
   const editorFontSize = useEditorFontStore((s) => s.size);
   const editorFontFamily = useEditorFontStore((s) => s.family);
   const editorFontLigatures = useEditorFontStore((s) => s.ligatures);
@@ -88,6 +91,7 @@ export function App() {
     iconThemePreference: typeof iconThemePreference;
     themePreference: typeof themePreference;
     opacity: number;
+    inactivePanelDim: number;
     editorFontSize: typeof editorFontSize;
     editorFontFamily: typeof editorFontFamily;
     editorFontLigatures: typeof editorFontLigatures;
@@ -109,6 +113,7 @@ export function App() {
         iconThemePreference,
         themePreference,
         opacity,
+        inactivePanelDim,
         editorFontSize,
         editorFontFamily,
         editorFontLigatures,
@@ -129,7 +134,8 @@ export function App() {
       snap !== null &&
       (iconThemePreference !== snap.iconThemePreference ||
         themePreference !== snap.themePreference ||
-        opacity !== snap.opacity);
+        opacity !== snap.opacity ||
+        inactivePanelDim !== snap.inactivePanelDim);
     const editorDirty =
       snap !== null &&
       (editorFontSize !== snap.editorFontSize ||
@@ -147,7 +153,7 @@ export function App() {
         id: "appearance",
         label: t("nav.appearance"),
         group: t("nav.group.settings"),
-        keywords: ["theme", "opacity", "language", "언어"],
+        keywords: ["theme", "opacity", "language", "dim", "inactive", "panel", "언어", "흐림"],
         dirty: appearanceDirty,
       },
       {
@@ -195,6 +201,7 @@ export function App() {
     iconThemePreference,
     themePreference,
     opacity,
+    inactivePanelDim,
     editorFontSize,
     editorFontFamily,
     editorFontLigatures,
@@ -359,6 +366,7 @@ export function App() {
 
   // Apply --window-opacity CSS property to documentElement.
   useWindowOpacityEffect();
+  useInactivePanelDimEffect();
 
   // Wire the keyboard dispatcher and the Application Menu IPC bridge to
   // the same command registry. Both surfaces resolve to one
diff --git a/src/renderer/bootstrap.ts b/src/renderer/bootstrap.ts
index a41df69d..5653eab4 100644
--- a/src/renderer/bootstrap.ts
+++ b/src/renderer/bootstrap.ts
@@ -33,6 +33,7 @@ import { useTerminalStore } from "./state/stores/terminal";
 import { useThemeStore } from "./state/stores/theme";
 import { useUIStore } from "./state/stores/ui";
 import { useUpdatesStore } from "./state/stores/updates";
+import { useInactivePanelDimStore } from "./state/stores/inactive-panel-dim";
 import { useWindowOpacityStore } from "./state/stores/window-opacity";
 import { initializeWorkspaceLifecycle } from "./state/workspace-cleanup";
 
@@ -186,6 +187,9 @@ export async function bootstrapAppState(): Promise<void> {
   // Hydrate window opacity from appState (authoritative store).
   useWindowOpacityStore.getState().hydrate(state.windowOpacity);
 
+  // Hydrate inactive-panel dim multiplier from appState (authoritative store).
+  useInactivePanelDimStore.getState().hydrate(state.inactivePanelDim);
+
   // Hydrate update preferences (channel + auto-check toggle) from appState
   // and install the statusChanged listener.
   useUpdatesStore.getState().hydrate({
diff --git a/src/renderer/components/settings/panels/appearance-panel.tsx b/src/renderer/components/settings/panels/appearance-panel.tsx
index 1dc37497..30f350fc 100644
--- a/src/renderer/components/settings/panels/appearance-panel.tsx
+++ b/src/renderer/components/settings/panels/appearance-panel.tsx
@@ -41,6 +41,12 @@ import type { SupportedLanguage } from "../../../../shared/i18n";
 import { cn } from "@/utils/cn";
 import { type IconTheme, useIconThemeStore } from "../../../state/stores/icon-theme";
 import { useLanguageStore } from "../../../state/stores/language";
+import {
+  INACTIVE_PANEL_DIM_DEFAULT,
+  INACTIVE_PANEL_DIM_MAX,
+  INACTIVE_PANEL_DIM_MIN,
+  useInactivePanelDimStore,
+} from "../../../state/stores/inactive-panel-dim";
 import { useThemeStore } from "../../../state/stores/theme";
 import { useWindowOpacityStore } from "../../../state/stores/window-opacity";
 import { SettingsSection } from "../section";
@@ -55,6 +61,10 @@ const OPACITY_MIN = 0;
 const OPACITY_MAX = 1.0;
 const OPACITY_STEP = 0.05;
 
+// Inactive-panel dim — multiplier on each theme's tuned veil alpha. 1 (100%) =
+// theme default, 0 = no dim, 2 (200%) = double. Slider steps in 5% increments.
+const DIM_STEP = 0.05;
+
 // Language options — endonym labels, fixed regardless of the active UI locale.
 // Rule: label is the language's own native name; never translated.
 // Threshold: ≤4 options → SegmentedControl, >4 → token-sealed Select.
@@ -94,20 +104,29 @@ export function AppearancePanel() {
   const opacity = useWindowOpacityStore((s) => s.opacity);
   const setOpacity = useWindowOpacityStore((s) => s.setOpacity);
 
+  const dim = useInactivePanelDimStore((s) => s.dim);
+  const setDim = useInactivePanelDimStore((s) => s.setDim);
+
   // Local preview — updated on every drag tick for real-time value label.
   const [localOpacity, setLocalOpacity] = useState<number>(opacity);
+  const [localDim, setLocalDim] = useState<number>(dim);
 
   // Keep local preview in sync when the store changes outside this component
   // (e.g. hydration, external restore, dialog re-open with fresh store value).
   useEffect(() => {
     setLocalOpacity(opacity);
   }, [opacity]);
+  useEffect(() => {
+    setLocalDim(dim);
+  }, [dim]);
 
   const opacityPercent = Math.round(localOpacity * 100);
+  const dimPercent = Math.round(localDim * 100);
 
   const iconThemeDirty = iconThemePreference !== DEFAULT_ICON_THEME;
   const themeDirty = themePreference !== DEFAULT_THEME;
   const opacityDirty = opacity !== 1;
+  const dimDirty = dim !== INACTIVE_PANEL_DIM_DEFAULT;
 
   const languageLabel = t("appearance.language");
 
@@ -215,6 +234,46 @@ export function AppearancePanel() {
           </span>
         </div>
       </SettingsSection>
+
+      {/* Section: Inactive Panel Dimming — multiplier on the theme's veil alpha.
+          100% = theme default, 0% = no dim, up to 200% = double. Applies
+          immediately via --inactive-panel-dim CSS var (no restart). */}
+      <SettingsSection
+        label={t("appearance.inactivePanelDim")}
+        dirty={dimDirty}
+        onReset={() => setDim(INACTIVE_PANEL_DIM_DEFAULT)}
+      >
+        <div className="flex items-center gap-3">
+          <Slider.Root
+            min={INACTIVE_PANEL_DIM_MIN}
+            max={INACTIVE_PANEL_DIM_MAX}
+            step={DIM_STEP}
+            value={[localDim]}
+            onValueChange={(vals) => {
+              if (vals[0] !== undefined) {
+                setLocalDim(vals[0]);
+                setDim(vals[0]);
+              }
+            }}
+            aria-label={t("appearance.inactivePanelDim")}
+            className="relative flex flex-1 touch-none select-none items-center"
+          >
+            <Slider.Track className="relative h-1 w-full grow rounded-(--radius-control) bg-muted border border-border">
+              <Slider.Range className="absolute h-full rounded-(--radius-control) bg-[var(--state-selected-bg)]" />
+            </Slider.Track>
+            <Slider.Thumb
+              className={cn(
+                "block size-4 rounded-full border border-[var(--state-selected-bg)] bg-[var(--state-selected-bg)]",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "transition-colors",
+              )}
+            />
+          </Slider.Root>
+          <span className="w-10 text-right text-app-ui-sm text-muted-foreground tabular-nums">
+            {dimPercent}%
+          </span>
+        </div>
+      </SettingsSection>
     </div>
   );
 }
diff --git a/src/renderer/hooks/use-inactive-panel-dim-effect.ts b/src/renderer/hooks/use-inactive-panel-dim-effect.ts
new file mode 100644
index 00000000..a4524473
--- /dev/null
+++ b/src/renderer/hooks/use-inactive-panel-dim-effect.ts
@@ -0,0 +1,23 @@
+// src/renderer/hooks/use-inactive-panel-dim-effect.ts — Applies the inactive-panel
+// dim multiplier to the DOM.
+//
+// Subscribes to the inactive-panel-dim store and sets the --inactive-panel-dim
+// CSS custom property on documentElement whenever it changes.
+//
+// The property is consumed by the --surface-island-inactive-veil token in the
+// generated theme CSS via calc(): the veil's alpha is `themeDefaultAlpha *
+// var(--inactive-panel-dim, 1)`. At 1 (the default) the veil renders with each
+// theme's tuned alpha; 0 removes the dim entirely; 2 doubles it.
+//
+// Called once in App.tsx alongside useWindowOpacityEffect().
+
+import { useEffect } from "react";
+import { useInactivePanelDimStore } from "../state/stores/inactive-panel-dim";
+
+export function useInactivePanelDimEffect(): void {
+  const dim = useInactivePanelDimStore((s) => s.dim);
+
+  useEffect(() => {
+    document.documentElement.style.setProperty("--inactive-panel-dim", String(dim));
+  }, [dim]);
+}
diff --git a/src/renderer/state/stores/inactive-panel-dim.ts b/src/renderer/state/stores/inactive-panel-dim.ts
new file mode 100644
index 00000000..4d69c09d
--- /dev/null
+++ b/src/renderer/state/stores/inactive-panel-dim.ts
@@ -0,0 +1,95 @@
+// src/renderer/state/stores/inactive-panel-dim.ts — Inactive-panel dim preference store.
+//
+// Mirrors the pattern established by state/stores/window-opacity.ts.
+//
+// Persistence model:
+//   - appState (main process, via IPC) — authoritative store.
+//   - localStorage key "inactivePanelDim" — boot cache, read synchronously
+//     before first paint so the dim level is correct on the first frame.
+//
+// Semantics: a MULTIPLIER on each theme's tuned inactive-veil alpha (dark
+// themes overlay white @0.2, light themes overlay black @0.04 — see
+// theme-adapter.ts). 1 = theme default (no change), 0 = no dim, 2 = double the
+// default strength. Applied at runtime via useInactivePanelDimEffect →
+// --inactive-panel-dim CSS var → the veil token's calc() in the generated
+// theme CSS. Takes effect immediately — no restart required.
+
+import { create } from "zustand";
+import { createLogger } from "../../../shared/log/renderer";
+import { ipcCallResult } from "../../ipc/client";
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const log = createLogger("inactive-panel-dim");
+
+const INACTIVE_PANEL_DIM_STORAGE_KEY = "inactivePanelDim";
+
+/** Theme-default multiplier — 1 means "use each theme's tuned veil alpha". */
+export const INACTIVE_PANEL_DIM_DEFAULT = 1;
+/** Slider range: 0 = no dim, 2 = double the theme-default strength. */
+export const INACTIVE_PANEL_DIM_MIN = 0;
+export const INACTIVE_PANEL_DIM_MAX = 2;
+
+// ---------------------------------------------------------------------------
+// State shape
+// ---------------------------------------------------------------------------
+
+interface InactivePanelDimState {
+  /** Multiplier applied to the theme's inactive-veil alpha. Range: [0, 2]. */
+  dim: number;
+
+  /** Hydrate from persisted appState — called once during bootstrap. */
+  hydrate(dim: number | undefined): void;
+
+  /**
+   * Set the inactive-panel dim multiplier.
+   * Persists to localStorage (boot cache) + appState (authoritative store).
+   */
+  setDim(dim: number): void;
+}
+
+// ---------------------------------------------------------------------------
+// Store
+// ---------------------------------------------------------------------------
+
+export const useInactivePanelDimStore = create<InactivePanelDimState>((set) => {
+  // Derive initial value from localStorage (written on a prior session). Falls
+  // back to the theme default (1) if absent/invalid/out-of-range.
+  const storedRaw =
+    typeof localStorage !== "undefined"
+      ? localStorage.getItem(INACTIVE_PANEL_DIM_STORAGE_KEY)
+      : null;
+  const parsed = storedRaw !== null ? parseFloat(storedRaw) : Number.NaN;
+  const initialDim =
+    !Number.isNaN(parsed) && parsed >= INACTIVE_PANEL_DIM_MIN && parsed <= INACTIVE_PANEL_DIM_MAX
+      ? parsed
+      : INACTIVE_PANEL_DIM_DEFAULT;
+
+  return {
+    dim: initialDim,
+
+    hydrate(dim) {
+      const value = dim ?? INACTIVE_PANEL_DIM_DEFAULT;
+      set({ dim: value });
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(INACTIVE_PANEL_DIM_STORAGE_KEY, String(value));
+      }
+    },
+
+    setDim(dim) {
+      set({ dim });
+      if (typeof localStorage !== "undefined") {
+        localStorage.setItem(INACTIVE_PANEL_DIM_STORAGE_KEY, String(dim));
+      }
+      // Authoritative write — fire-and-forget; the next boot's hydrate() will
+      // re-read whatever made it to disk. Errors are logged only.
+      void ipcCallResult("appState", "set", {
+        inactivePanelDim: dim === INACTIVE_PANEL_DIM_DEFAULT ? undefined : dim,
+      }).then((result) => {
+        if (!result.ok) log.warn(`appState set failed: ${result.message}`);
+      });
+    },
+  };
+});
diff --git a/src/renderer/styles/theme.generated.css b/src/renderer/styles/theme.generated.css
index 258de153..a6fffbc2 100644
--- a/src/renderer/styles/theme.generated.css
+++ b/src/renderer/styles/theme.generated.css
@@ -198,7 +198,7 @@
   --surface-island-bg: #0d1117;
   --surface-island-fg: #c9d1d9;
   --surface-island-border: #30363d;
-  --surface-island-inactive-veil: rgba(255, 255, 255, 0.2);
+  --surface-island-inactive-veil: rgba(255, 255, 255, calc(0.2 * var(--inactive-panel-dim, 1)));
   --surface-floating-border: #30363d;
   --state-drag-indicator: #1f6feb;
   --state-drop-target-bg: rgba(255, 255, 255, 0.08);
@@ -330,7 +330,7 @@
   --surface-island-bg: #0d1117;
   --surface-island-fg: #c9d1d9;
   --surface-island-border: #30363d;
-  --surface-island-inactive-veil: rgba(255, 255, 255, 0.2);
+  --surface-island-inactive-veil: rgba(255, 255, 255, calc(0.2 * var(--inactive-panel-dim, 1)));
   --surface-floating-border: #30363d;
   --state-drag-indicator: #1f6feb;
   --state-drop-target-bg: rgba(255, 255, 255, 0.08);
@@ -455,7 +455,7 @@
   --surface-island-bg: #ffffff;
   --surface-island-fg: #1f2328;
   --surface-island-border: #d0d7de;
-  --surface-island-inactive-veil: rgba(0, 0, 0, 0.04);
+  --surface-island-inactive-veil: rgba(0, 0, 0, calc(0.04 * var(--inactive-panel-dim, 1)));
   --surface-floating-border: #d0d7de;
   --state-drag-indicator: #0969da;
   --state-drop-target-bg: rgba(0, 0, 0, 0.08);
@@ -580,7 +580,7 @@
   --surface-island-bg: #282a36;
   --surface-island-fg: #f8f8f2;
   --surface-island-border: #191a21;
-  --surface-island-inactive-veil: rgba(255, 255, 255, 0.2);
+  --surface-island-inactive-veil: rgba(255, 255, 255, calc(0.2 * var(--inactive-panel-dim, 1)));
   --surface-floating-border: #191a21;
   --state-drag-indicator: #bd93f9;
   --state-drop-target-bg: rgba(255, 255, 255, 0.08);
@@ -705,7 +705,7 @@
   --surface-island-bg: #282c34;
   --surface-island-fg: #abb2bf;
   --surface-island-border: #181a1f;
-  --surface-island-inactive-veil: rgba(255, 255, 255, 0.2);
+  --surface-island-inactive-veil: rgba(255, 255, 255, calc(0.2 * var(--inactive-panel-dim, 1)));
   --surface-floating-border: #181a1f;
   --state-drag-indicator: #61afef;
   --state-drop-target-bg: rgba(255, 255, 255, 0.08);
@@ -830,7 +830,7 @@
   --surface-island-bg: #272822;
   --surface-island-fg: #f8f8f2;
   --surface-island-border: #1e1f1c;
-  --surface-island-inactive-veil: rgba(255, 255, 255, 0.2);
+  --surface-island-inactive-veil: rgba(255, 255, 255, calc(0.2 * var(--inactive-panel-dim, 1)));
   --surface-floating-border: #1e1f1c;
   --state-drag-indicator: #a6e22e;
   --state-drop-target-bg: rgba(255, 255, 255, 0.08);
@@ -955,7 +955,7 @@
   --surface-island-bg: #1a1b26;
   --surface-island-fg: #c0caf5;
   --surface-island-border: #15161e;
-  --surface-island-inactive-veil: rgba(255, 255, 255, 0.2);
+  --surface-island-inactive-veil: rgba(255, 255, 255, calc(0.2 * var(--inactive-panel-dim, 1)));
   --surface-floating-border: #15161e;
   --state-drag-indicator: #7aa2f7;
   --state-drop-target-bg: rgba(255, 255, 255, 0.08);
@@ -1080,7 +1080,7 @@
   --surface-island-bg: #002b36;
   --surface-island-fg: #839496;
   --surface-island-border: #073642;
-  --surface-island-inactive-veil: rgba(255, 255, 255, 0.2);
+  --surface-island-inactive-veil: rgba(255, 255, 255, calc(0.2 * var(--inactive-panel-dim, 1)));
   --surface-floating-border: #073642;
   --state-drag-indicator: #268bd2;
   --state-drop-target-bg: rgba(255, 255, 255, 0.08);
@@ -1205,7 +1205,7 @@
   --surface-island-bg: #2e3440;
   --surface-island-fg: #d8dee9;
   --surface-island-border: #3b4252;
-  --surface-island-inactive-veil: rgba(255, 255, 255, 0.2);
+  --surface-island-inactive-veil: rgba(255, 255, 255, calc(0.2 * var(--inactive-panel-dim, 1)));
   --surface-floating-border: #3b4252;
   --state-drag-indicator: #88c0d0;
   --state-drop-target-bg: rgba(255, 255, 255, 0.08);
@@ -1330,7 +1330,7 @@
   --surface-island-bg: #1e1e2e;
   --surface-island-fg: #cdd6f4;
   --surface-island-border: #181825;
-  --surface-island-inactive-veil: rgba(255, 255, 255, 0.2);
+  --surface-island-inactive-veil: rgba(255, 255, 255, calc(0.2 * var(--inactive-panel-dim, 1)));
   --surface-floating-border: #181825;
   --state-drag-indicator: #89b4fa;
   --state-drop-target-bg: rgba(255, 255, 255, 0.08);
@@ -1455,7 +1455,7 @@
   --surface-island-bg: #282828;
   --surface-island-fg: #ebdbb2;
   --surface-island-border: #3c3836;
-  --surface-island-inactive-veil: rgba(255, 255, 255, 0.2);
+  --surface-island-inactive-veil: rgba(255, 255, 255, calc(0.2 * var(--inactive-panel-dim, 1)));
   --surface-floating-border: #3c3836;
   --state-drag-indicator: #fabd2f;
   --state-drop-target-bg: rgba(255, 255, 255, 0.08);
diff --git a/src/shared/design-tokens/theme-adapter.ts b/src/shared/design-tokens/theme-adapter.ts
index 557ab42b..32563cdf 100644
--- a/src/shared/design-tokens/theme-adapter.ts
+++ b/src/shared/design-tokens/theme-adapter.ts
@@ -165,6 +165,22 @@ function overlay(base: "dark" | "light", alpha: number): string {
   return `rgba(${rgb}, ${alpha})`;
 }
 
+/**
+ * Overlay whose alpha is scaled at runtime by a CSS custom property.
+ * Emits `rgba(rgb, calc(<alpha> * var(<cssVar>, <fallback>)))` so the baked
+ * per-theme alpha stays the default while a user setting can scale it live.
+ * Used by surface.island.inactive.veil + the --inactive-panel-dim preference.
+ */
+function overlayScaled(
+  base: "dark" | "light",
+  alpha: number,
+  cssVar: string,
+  fallback: number,
+): string {
+  const rgb = base === "dark" ? "255, 255, 255" : "0, 0, 0";
+  return `rgba(${rgb}, calc(${alpha} * var(${cssVar}, ${fallback})))`;
+}
+
 /**
  * Apply an alpha multiplier to any CSS color string.
  * Returns an rgba() string parsed from the original color; falls back to
@@ -228,7 +244,14 @@ export function buildSemanticTokens(source: ThemeSource): SemanticTokenSet {
     "surface.island.bg": source.bg.primary,
     "surface.island.fg": source.fg.primary,
     "surface.island.border": source.border,
-    "surface.island.inactive.veil": o(source.base === "dark" ? 0.2 : 0.04),
+    // Alpha scaled at runtime by the --inactive-panel-dim preference (default
+    // multiplier 1 → each theme's tuned alpha; see use-inactive-panel-dim-effect).
+    "surface.island.inactive.veil": overlayScaled(
+      source.base,
+      source.base === "dark" ? 0.2 : 0.04,
+      "--inactive-panel-dim",
+      1,
+    ),
     "surface.floating.bg": source.bg.floating,
     "surface.floating.fg": source.fg.primary,
     "surface.floating.border": source.border,
diff --git a/src/shared/i18n/locales/en/settings.json b/src/shared/i18n/locales/en/settings.json
index 275a362b..bdd1c999 100644
--- a/src/shared/i18n/locales/en/settings.json
+++ b/src/shared/i18n/locales/en/settings.json
@@ -139,11 +139,13 @@
     "theme": "Theme",
     "iconTheme": "Icon Theme",
     "windowOpacity": "Window opacity",
+    "inactivePanelDim": "Inactive panel dimming",
     "reset": {
       "language": "Reset Language",
       "theme": "Reset Theme",
       "iconTheme": "Reset Icon Theme",
-      "windowOpacity": "Reset Window opacity"
+      "windowOpacity": "Reset Window opacity",
+      "inactivePanelDim": "Reset Inactive panel dimming"
     }
   },
   "editor": {
diff --git a/src/shared/i18n/locales/ko/settings.json b/src/shared/i18n/locales/ko/settings.json
index 6d2f2991..ac3a84b1 100644
--- a/src/shared/i18n/locales/ko/settings.json
+++ b/src/shared/i18n/locales/ko/settings.json
@@ -139,11 +139,13 @@
     "theme": "테마",
     "iconTheme": "아이콘 테마",
     "windowOpacity": "창 불투명도",
+    "inactivePanelDim": "비활성 패널 흐림 정도",
     "reset": {
       "language": "언어 초기화",
       "theme": "테마 초기화",
       "iconTheme": "아이콘 테마 초기화",
-      "windowOpacity": "창 불투명도 초기화"
+      "windowOpacity": "창 불투명도 초기화",
+      "inactivePanelDim": "비활성 패널 흐림 정도 초기화"
     }
   },
   "editor": {
diff --git a/src/shared/types/app-state.ts b/src/shared/types/app-state.ts
index f6c042eb..a1459c7a 100644
--- a/src/shared/types/app-state.ts
+++ b/src/shared/types/app-state.ts
@@ -54,6 +54,11 @@ export const AppStateSchema = z.object({
   // Changing this requires an app restart — `transparent` is constructor-only in Electron.
   windowOpacity: z.number().min(0).max(1).optional(),
 
+  // Inactive-panel dim multiplier — scales each theme's tuned inactive-veil
+  // alpha. 1 = theme default (omitted from storage), 0 = no dim, 2 = double.
+  // Applied at runtime via --inactive-panel-dim CSS var; no restart needed.
+  inactivePanelDim: z.number().min(0).max(2).optional(),
+
   // UI density — 닫힌 집합; 부재=토큰 fallback ('default').
   density: z.enum(["default", "compact"]).optional(),
 

From 1cdbea4c9bfe71b0f782d064c601aa7a7cf15cf8 Mon Sep 17 00:00:00 2001
From: moreih29 <moreih29@gmail.com>
Date: Thu, 25 Jun 2026 12:06:44 +0900
Subject: [PATCH 3/3] chore: bump version to 0.8.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index bc0d4091..96be27b9 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nexus-code",
   "productName": "NexusCode",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Multi-workspace VSCode-style editor for macOS. Monaco editor + terminal in one window.",
   "license": "MIT",
   "private": true,