fix(web-shell): make dialog backdrop z-index configurable

[cxruan]

What this PR does

Makes the Web Shell dialog backdrop z-index configurable through a CSS custom property, --web-shell-dialog-backdrop-z-index, while preserving the existing default stacking behavior.

Why it's needed

Web Shell already exposes z-index customization for tooltip and popover layers through --web-shell-tooltip-z-index and --web-shell-popover-z-index. Dialog backdrops still used a hard-coded z-index, which made embedded hosts coordinate modal layering less consistently. This change brings the dialog backdrop in line with the existing customization pattern without changing the default value.

Reviewer Test Plan

How to verify

Set --web-shell-dialog-backdrop-z-index on :root or body, open any Web Shell dialog, and confirm the backdrop uses the configured stacking level. With no custom property set, dialogs should continue to use the previous effective z-index of 1000.

Evidence (Before & After)

N/A

Tested on

OS	Status
🍏 macOS	✅ tested
🪟 Windows	⚠️ not tested
🐧 Linux	⚠️ not tested

Environment (optional)

Ran npm run build --workspace @qwen-code/web-shell.

Risk & Scope

• Main risk or tradeoff: Very low; the fallback keeps the previous z-index.
• Not validated / out of scope: Visual verification across Windows and Linux browsers.
• Breaking changes / migration notes: None.

Linked Issues

N/A

中文说明

这个 PR 做了什么

这个 PR 通过 CSS 自定义属性 --web-shell-dialog-backdrop-z-index 让 Web Shell 的 dialog backdrop z-index 可配置，同时保留现有默认层级行为。

为什么需要

Web Shell 目前已经通过 --web-shell-tooltip-z-index 和 --web-shell-popover-z-index 支持 tooltip 和 popover 层级的自定义。Dialog backdrop 仍然使用硬编码 z-index，嵌入式宿主在协调自己的 modal、overlay 或 shell 容器层级时不够一致。这个改动让 dialog backdrop 与已有的 z-index 自定义模式保持一致，同时不改变默认值。

Reviewer Test Plan

如何验证

在 :root 或 body 上设置 --web-shell-dialog-backdrop-z-index，打开任意 Web Shell dialog，确认 backdrop 使用配置后的层级。未设置该自定义属性时，dialog 应继续使用之前等效的 z-index 1000。

证据（Before & After）

N/A

测试平台

OS	Status
🍏 macOS	✅ tested
🪟 Windows	⚠️ not tested
🐧 Linux	⚠️ not tested

环境（可选）

执行了 npm run build --workspace @qwen-code/web-shell。

风险与范围

• 主要风险或取舍：风险很低；fallback 保留了之前的 z-index。
• 未验证 / 不在范围内：未在 Windows 和 Linux 浏览器上做视觉验证。
• 破坏性变更 / 迁移说明：无。

关联 Issue

N/A

[qwen-code-ci-bot]

Thanks for the PR!

Template looks good ✓

Problem: The web-shell package already exposes --web-shell-tooltip-z-index and --web-shell-popover-z-index as CSS custom properties, but the dialog backdrop z-index was hard-coded at 1000. This is an observable inconsistency in the customization surface — any embedded host coordinating modal layering can configure tooltip/popover stacking but not dialog backdrop stacking. The gap is self-evident from the code.

Direction: Aligned. Making the dialog backdrop z-index configurable completes the z-index customization pattern that tooltip and popover already follow. Low-risk CSS change that brings consistency to the embedded host API. CHANGELOG has no direct reference, but the area (web-shell customization) is clearly relevant.

Size: Not applicable — change is in packages/web-shell/, not core paths. 1 addition, 1 deletion, 1 file.

Approach: The scope is exactly right — a single-line change following the established var(--web-shell-X-z-index, 1000) pattern. Nothing to cut, nothing to add.

Moving on to code review. 🔍

中文说明

感谢贡献！

模板完整 ✓

问题：web-shell 包已经通过 --web-shell-tooltip-z-index 和 --web-shell-popover-z-index 暴露了 CSS 自定义属性，但 dialog backdrop 的 z-index 硬编码为 1000。这是可定制层级接口中一个可观察到的不一致——嵌入式宿主可以配置 tooltip/popover 的层级，却无法配置 dialog backdrop 的层级。从代码中可以直接看出这个缺口。

方向：对齐。让 dialog backdrop z-index 可配置，补齐了 tooltip 和 popover 已有的 z-index 定制模式。低风险的 CSS 改动，为嵌入式宿主 API 带来一致性。CHANGELOG 无直接参考，但该领域（web-shell 定制化）明显相关。

规模：不适用——改动在 packages/web-shell/ 中，不在核心路径。1 行新增，1 行删除，1 个文件。

方案：范围恰到好处——单行改动，完全遵循已有的 var(--web-shell-X-z-index, 1000) 模式。无需删减，也无需添加。

进入代码审查 🔍

— Qwen Code · qwen3.7-max

[qwen-code-ci-bot]

Code Review: Clean — no issues found.

The diff is a single-line CSS change: z-index: 1000 → z-index: var(--web-shell-dialog-backdrop-z-index, 1000) in DialogShell.module.css. My independent proposal was identical — replace the hard-coded value with a var() fallback following the same naming convention as --web-shell-tooltip-z-index and --web-shell-popover-z-index.

The implementation:

• Uses the exact same var(--web-shell-X-z-index, 1000) pattern already established in 12 other locations across useComposerCore.ts, ChatEditor.module.css, and Editor.module.css.
• Custom property name --web-shell-dialog-backdrop-z-index follows the existing naming convention perfectly.
• Fallback value 1000 preserves the previous behavior for hosts that don't set the property.
• No correctness bugs, no security concerns, no regressions.
• No reuse concerns — this is CSS, not duplicated logic.
• No AGENTS.md violations.

Testing: Tmux real-scenario testing is not applicable for this change. The modification is a CSS custom property in the web-shell package — it only manifests when a browser renders the web-shell UI. Running qwen vs npm run dev in a terminal produces identical output regardless of this change. The build environment lacks installed dependencies (vite not found), but the var() syntax is standard CSS already validated by 12 existing usages in the same package.

中文说明

代码审查： 干净——未发现问题。

Diff 是一个单行 CSS 改动：DialogShell.module.css 中 z-index: 1000 → z-index: var(--web-shell-dialog-backdrop-z-index, 1000)。我的独立方案完全一致——用带有 fallback 的 var() 替换硬编码值，遵循与 --web-shell-tooltip-z-index 和 --web-shell-popover-z-index 相同的命名规范。

实现方面：

• 完全遵循 useComposerCore.ts、ChatEditor.module.css 和 Editor.module.css 中已有 12 处的 var(--web-shell-X-z-index, 1000) 模式。
• 自定义属性名 --web-shell-dialog-backdrop-z-index 完美遵循现有命名规范。
• Fallback 值 1000 为未设置该属性的宿主保留了之前的行为。
• 无正确性问题、无安全隐患、无回归。
• 无复用问题——这是 CSS，不是重复逻辑。
• 无 AGENTS.md 违规。

测试： Tmux 真实场景测试不适用于本次改动。该修改是 web-shell 包中的 CSS 自定义属性——仅在浏览器渲染 web-shell UI 时才会体现。在终端中运行 qwen 与 npm run dev 的输出完全相同，不受此改动影响。构建环境缺少已安装的依赖（未找到 vite），但 var() 语法是标准 CSS，已被同包中 12 处现有用法验证。

— Qwen Code · qwen3.7-max

[qwen-code-ci-bot]

This is a textbook minimal change. One line of CSS that completes a customization pattern the codebase already started with tooltip and popover z-index properties. The author clearly studied the existing conventions and replicated them exactly — same naming scheme, same fallback value, same CSS custom property approach. There's nothing to simplify, nothing to cut, nothing to question.

The problem is real and self-evident: the z-index customization surface had a gap. Tooltip and popover layers were configurable; dialog backdrop wasn't. For embedded hosts that need to coordinate stacking contexts across all their UI layers, this gap meant the dialog backdrop was the one piece they couldn't control. The fix closes that gap without changing any default behavior.

Approving. ✅

中文说明

这是一个教科书级的最小改动。一行 CSS，补齐了代码库中 tooltip 和 popover z-index 属性已经开始的定制模式。作者显然研究了现有规范并完全复制了它——相同的命名方案、相同的 fallback 值、相同的 CSS 自定义属性方式。无需简化、无需删减、无需质疑。

问题是真实且显而易见的：z-index 定制接口存在一个缺口。Tooltip 和 popover 层可配置；dialog backdrop 不可配置。对于需要协调所有 UI 层层叠上下文的嵌入式宿主来说，这个缺口意味着 dialog backdrop 是唯一无法控制的部分。该修复在不改变任何默认行为的前提下填补了这个缺口。

批准。✅

— Qwen Code · qwen3.7-max

[qwen-code-ci-bot]

LGTM, looks ready to ship. ✅