fix(theme): preserve native side-panel controls (#79)

Preserve Codex’s native fixed header position and stacking so the task side-panel toggle remains visible and clickable.

Exclude the native header from macOS task-child positioning while leaving main-surface overflow unchanged. Add cross-platform regressions and QA coverage.

Co-authored-by: eistinlandfrank <276356971+eistinlandfrank@users.noreply.github.com>

Author: eistinlandfrank

macos/CHANGELOG.md

@@ -18,6 +18,7 @@
 
 ### 修复
 
+- 保留 Codex 原生固定顶栏的定位与层级，避免打开任务侧边面板后开关被推出主区、导致面板无法关闭。
 - 修复亮色背景图在 ChatGPT/Codex 暗色模式下错误生成浅色皮肤壳的问题。`appearance=auto` 现在跟随原生/系统外观，避免白字叠在浅色面板上导致界面不可读。
 - 修复从“设置 > 外观”返回“已安排的任务”等无输入框路由后，验证器因找不到 composer 而拒绝合法 Codex 主界面的问题。
 - 首页不再在原生标题栏注入主题名称和圆形伪按钮；watcher 为后续完整导航注册更早的注入并缩短目标探测间隔，以减少原生界面先闪现再换肤的时间。

macos/assets/dream-skin.css

@@ -401,7 +401,7 @@ html.codex-dream-skin:is([data-dream-task-mode="off"], [data-dream-art-task-mode
   content: none;
 }
 
-html.codex-dream-skin main.main-surface:not(.dream-skin-home-shell) > * {
+html.codex-dream-skin main.main-surface:not(.dream-skin-home-shell) > :not(header.app-header-tint) {
   position: relative;
   z-index: 1;
 }
@@ -430,8 +430,7 @@ html.codex-dream-skin[data-dream-shell="light"] main.main-surface:not(.dream-ski
 }
 
 html.codex-dream-skin main.main-surface > header.app-header-tint {
-  position: relative;
-  z-index: 2;
+  /* Preserve Codex's native fixed header geometry and side-panel controls. */
   background: rgb(var(--ds-panel-rgb) / .90) !important;
   border-bottom: 1px solid var(--ds-line) !important;
   backdrop-filter: blur(14px) saturate(108%) !important;

macos/references/qa-inventory.md

@@ -28,6 +28,7 @@
 - Home at normal desktop size: the subject stays clear of the text-safe area, text remains live, native cards are not clipped when present, and the merged project/composer surface does not overlap content.
 - Narrower window: wallpaper cropping preserves the declared focus and safe area before essential controls are compressed.
 - Task route: background remains atmospheric, messages and output panels keep high contrast, and the composer remains reachable.
+- Task side panel: open and close the native thread panel twice, resize the window, and repeat; the toggle remains visible and clickable.
 - Selected image contains no fake interface controls or raster text intended to impersonate Codex.
 - Inspect sidebar selection, header, wallpaper edges, cards, project utility row, composer buttons, scrollbars, focus outlines, dialogs, and menus.
 

macos/tests/renderer-inject.test.mjs

@@ -9,6 +9,17 @@ const macosRoot = path.resolve(here, "..");
 const template = await fs.readFile(path.join(macosRoot, "assets", "renderer-inject.js"), "utf8");
 const css = await fs.readFile(path.join(macosRoot, "assets", "dream-skin.css"), "utf8");
 
+assert.doesNotMatch(
+  css,
+  /main\.main-surface\s*>\s*header\.app-header-tint\s*\{[^}]*\b(?:position|z-index)\s*:/,
+  "The skin must preserve Codex's native fixed header so the side-panel toggle remains reachable.",
+);
+assert.doesNotMatch(
+  css,
+  /main\.main-surface:not\(\.dream-skin-home-shell\)\s*>\s*\*\s*\{[^}]*\bposition\s*:/,
+  "Task-route child layering must not overwrite the native header position.",
+);
+
 assert.doesNotMatch(
   css,
   /background-image:\s*var\(--dream-skin-art\),\s*var\(--dream-skin-art\)/,

windows/CHANGELOG.md

@@ -14,6 +14,7 @@
 
 ### 修复
 
+- 保留 Codex 原生固定顶栏的定位与层级，避免打开任务侧边面板后开关被推出主区、导致面板无法关闭。
 - 渲染层现在只在检测到完整 Codex 主界面壳层时启用皮肤；宠物等透明辅助窗口会主动清理主题背景与装饰节点，避免出现遮挡宠物的矩形背景框。
 - 16:9 及更宽图像现在作为侧栏与主区共享的单张整窗背景；首页、任务、插件、计划任务和 Pull Requests 路由使用同一透明顶栏与连续表面，不再在卡片或任务层重复裁切图片。
 - 移除主区原生顶部渐隐和 composer 后方底部渐隐；浅色与深色 composer 均只保留一个可读表面，避免出现双层输入框或不连续底板。

windows/assets/dream-skin.css

@@ -105,8 +105,7 @@ html.codex-dream-skin main.main-surface {
 }
 
 html.codex-dream-skin main.main-surface > header.app-header-tint {
-  position: relative;
-  z-index: 20;
+  /* Preserve Codex's native fixed header geometry and side-panel controls. */
   color: var(--dream-text) !important;
   background: color-mix(in oklab, var(--dream-surface) 94%, transparent) !important;
   border-color: var(--dream-line-soft) !important;

windows/references/qa-inventory.md

@@ -15,6 +15,7 @@
 - Home feature card: click one card and confirm the real composer is populated or the normal action occurs.
 - Project selector: click the real project chip under the "选择项目" label and confirm the native project menu opens.
 - Sidebar: open a real task, then return to New Task.
+- Task side panel: open and close the native thread panel twice, resize the window, and repeat; the toggle must remain visible and clickable.
 - Composer: type text, verify caret/readability, then clear it without sending.
 - Reload: use CDP `Page.reload`, wait, and confirm the injection marker returns.
 - Pet overlay: open a desktop pet and confirm its auxiliary window stays transparent with no skin background or decoration layer behind it.

windows/tests/renderer-inject.test.mjs

@@ -7,12 +7,19 @@ import { fileURLToPath } from "node:url";
 const here = path.dirname(fileURLToPath(import.meta.url));
 const windowsRoot = path.resolve(here, "..");
 const template = await fs.readFile(path.join(windowsRoot, "assets", "renderer-inject.js"), "utf8");
+const css = await fs.readFile(path.join(windowsRoot, "assets", "dream-skin.css"), "utf8");
 const buildPayload = (config = {}) => template
   .replace("__DREAM_CSS_JSON__", JSON.stringify(".fixture { color: blue; }"))
   .replace("__DREAM_ART_JSON__", JSON.stringify("data:image/png;base64,AA=="))
   .replace("__DREAM_THEME_JSON__", JSON.stringify(config));
 const payload = buildPayload();
 
+assert.doesNotMatch(
+  css,
+  /main\.main-surface\s*>\s*header\.app-header-tint\s*\{[^}]*\b(?:position|z-index)\s*:/,
+  "The skin must preserve Codex's native fixed header so the side-panel toggle remains reachable.",
+);
+
 function createFixture({
   shellPresent,
   staleSkin = false,