fix(web-shell): make composer height adaptive

[dreamWB]

What this PR does

Makes the Web Shell composer grow with long text and pasted image attachments while keeping the total composer height bounded by min(350px, 40vh). The editor remains at least 44px tall, attachments share a 136px scroll budget, and CodeMirror owns long-text scrolling after the cap is reached. Tooltip portals are scoped to the Web Shell container so growing the composer does not misplace overlays.

Why it's needed

The previous fixed-height composer made long prompts difficult to read. Pasting images also consumed the existing editor space instead of expanding the composer, leaving an even smaller visible typing area. A bounded adaptive height improves both cases without allowing the composer to take over the viewport.

Reviewer Test Plan

How to verify

1. Open Web Shell and enter enough multiline text to exceed the initial composer height. Confirm the composer grows, then CodeMirror scrolls once the composer reaches min(350px, 40vh).
2. Paste one or more images. Confirm the attachment area expands the composer upward, the editor keeps a usable minimum height, and overflowing attachments scroll within their own area.
3. Repeat at viewport heights of 1000px, 800px, and 600px. Confirm the 350px absolute cap applies on taller viewports and the 40vh cap applies on shorter viewports.
4. Hover tags and toolbar controls near the expanded composer and remove an attachment. Confirm tooltips remain in the Web Shell viewport and removing an attachment does not activate its tag.
5. Automated evidence: ChatEditor unit tests passed (10/10), Chromium composer layout matrix passed (7/7), Web Shell package tests passed (95 files, 1576 tests), package typecheck passed, package build passed, and the staged pre-commit checks passed. The root preflight passed install, formatting, lint, build, and typecheck; its CLI test workspace reported three unrelated baseline/environment failures (locale text assertion and server fixture/timeout behavior), so the remaining root workspace tests were stopped rather than rerunning the full monorepo suite.

Evidence (Before & After)

Before: long text stayed inside a fixed-height composer, and pasted images reduced the visible editor area.

After: text and attachments grow the composer until min(350px, 40vh); beyond that point, text and attachments scroll in their designated regions while the toolbar and overlays remain stable. Verified locally in the pre-DW IDE flow.

Tested on

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

Environment (optional)

Local Web Shell/IDE verification plus Vitest and Playwright Chromium tests.

Risk & Scope

• Main risk or tradeoff: The composer can occupy more vertical space than before, but it is bounded by both an absolute and viewport-relative cap.
• Not validated / out of scope: Windows and Linux browser rendering were not tested locally; unrelated CLI baseline test failures were not changed.
• Breaking changes / migration notes: None.

Linked Issues

N/A

中文说明

本 PR 的改动

让 Web Shell 输入框在输入长文本和粘贴图片附件时自适应增高，同时将总高度限制为 min(350px, 40vh)。编辑区域始终至少保留 44px 高度，附件区域共享 136px 的滚动空间，达到高度上限后由 CodeMirror 承担长文本滚动。Tooltip Portal 被限制在 Web Shell 容器内，避免输入框增高后浮层错位。

为什么需要这个改动

原先固定高度的输入框会让长提示词难以阅读。粘贴图片后，图片还会挤占已有的编辑区域，而不是向上扩展整个输入框，导致可见输入空间进一步缩小。设置有上限的自适应高度可以改善这两种场景，同时避免输入框占满整个视口。

评审测试计划

如何验证

1. 打开 Web Shell，输入足够多的多行文本，使内容超过初始输入框高度。确认输入框会自动增高，并在达到 min(350px, 40vh) 后由 CodeMirror 滚动。
2. 粘贴一张或多张图片。确认附件区域会把输入框向上撑开，编辑区域仍保留可用的最小高度，附件溢出后在附件区域内部滚动。
3. 分别在 1000px、800px 和 600px 的视口高度下重复验证。确认较高视口受 350px 绝对上限约束，较矮视口受 40vh 上限约束。
4. 在增高后的输入框附近悬停标签和工具栏控件，并移除附件。确认 Tooltip 始终位于 Web Shell 视口内，移除附件不会误触发其标签。
5. 自动化验证证据：ChatEditor 单测通过（10/10），Chromium 输入框布局矩阵通过（7/7），Web Shell 包测试通过（95 个文件、1576 个测试），包级 typecheck 通过，包级 build 通过，暂存文件的 pre-commit 检查通过。根级 preflight 的依赖安装、格式化、lint、build 和 typecheck 已通过；CLI 测试工作区出现 3 个与本改动无关的基线/环境失败（locale 文案断言以及 server fixture/超时行为），因此没有继续重复运行剩余的 monorepo 全量测试。

改动前后证据

改动前：长文本被限制在固定高度的输入框内，粘贴图片会进一步压缩可见编辑区域。

改动后：文本和附件会将输入框撑高到 min(350px, 40vh)；超过上限后，文本和附件分别在指定区域内滚动，工具栏和浮层保持稳定。已在本地 pre-DW IDE 流程中验证。

测试平台

系统	状态
🍏 macOS	✅
🪟 Windows	⚠️
🐧 Linux	⚠️

环境（可选）

本地 Web Shell/IDE 验证，以及 Vitest 和 Playwright Chromium 测试。

风险与范围

• 主要风险或权衡：输入框可能比之前占用更多垂直空间，但同时受到绝对高度和视口相对高度的双重限制。
• 未验证或不在范围内：未在本地验证 Windows 和 Linux 的浏览器渲染；未修改无关的 CLI 基线测试失败。
• 破坏性变更或迁移说明：无。

关联 Issue

无

[qwen-code-ci-bot]

Thanks for the PR!

Template looks good ✓

Problem: This is a real, observable UX issue — the fixed-height composer makes long prompts difficult to read, and pasted images consume editor space instead of expanding the composer. Anyone who has typed a multi-line prompt in the web shell has seen this. Not theoretical hardening.

Direction: Aligned. Adaptive composer height is a standard UX pattern. The web shell is a key user-facing surface, and bounded growth (min(350px, 40vh)) is a sensible approach — it helps without letting the composer dominate the viewport.

Size: Not applicable — no core module paths touched. All 6 changed files are in packages/web-shell/. Production changes are in ChatEditor.module.css and ChatEditor.tsx; the remaining 4 files are tests and e2e harnesses.

Approach: Scope feels right. The CSS variable approach for min/max heights is clean, the TopComposerTag extraction reduces complexity in the main render, and moving from CSS-only tooltips to Radix TooltipPrimitive with portal scoping is a genuine improvement (collision detection, accessibility, correct positioning when the composer grows). E2E tests at 3 viewport heights covering text growth, attachments, and tooltips are thorough. Moving on to code review. 🔍

中文说明

感谢贡献！

模板完整 ✓

问题：这是一个真实可观察的 UX 问题——固定高度的输入框让长提示词难以阅读，粘贴的图片会挤占编辑区空间而不是撑开输入框。任何在 Web Shell 中输入过多行文本的用户都能看到这个现象。不是理论性加固。

方向：对齐。自适应输入框高度是标准的 UX 模式。Web Shell 是关键的用户界面，有上限的自适应增长（min(350px, 40vh)）是合理的方案——改善体验同时不让输入框占满视口。

规模：不适用——未触及核心模块路径。6 个变更文件均在 packages/web-shell/ 下。生产代码改动在 ChatEditor.module.css 和 ChatEditor.tsx；其余 4 个文件为测试和 e2e 工具。

方案：范围合理。CSS 变量控制最小/最大高度的方案清晰，TopComposerTag 提取减少了主渲染函数的复杂度，从纯 CSS tooltip 迁移到 Radix TooltipPrimitive 配合 portal 作用域是实质性的改进（碰撞检测、可访问性、输入框增高后的正确定位）。3 种视口高度下覆盖文本增长、附件和 tooltip 的 e2e 测试很全面。进入代码审查 🔍

— Qwen Code · qwen3.7-max

_{Reviewed at 2b327233867ff49ce4f116b211313c925f89b9cb · re-run with @qwen-code /triage}

[qwen-code-ci-bot]

Code Review

Independent proposal: For adaptive composer height, I would have changed .content from fixed height: 140px to min-height/max-height with CSS variables, wrapped tags and images in a shared scrollable attachments container, migrated tag tooltips from CSS :hover to Radix Tooltip with portal scoping, and ensured CodeMirror handles overflow within the height cap via flex containment.

Comparison: The PR's approach matches and exceeds this proposal. CSS variables for all height thresholds (min-height: 140px, max-height: min(350px, 40vh), input min-height: 44px, attachments max-height: 136px) are clean and maintainable. The TopComposerTag extraction is a good decomposition — it cleanly separates trigger, tooltip, and remove-button concerns. Radix TooltipPrimitive with useWebShellPortalRoot() portal scoping is the correct pattern for web-shell overlays.

Reuse check: useWebShellPortalRoot (existing hook), TooltipPrimitive from radix-ui (existing dependency), getComposerTagDisplay (existing utility) — all properly reused. No duplicated logic.

Critical blockers: None.

AGENTS.md violations: None. Code is well-structured, follows existing patterns, tests are collocated.

Test Results

ChatEditor unit tests (10/10):
 ✓ components/ChatEditor.test.tsx (10 tests) 177ms
 Test Files  1 passed (1)
      Tests  10 passed (10)
   Duration  1.34s

Web Shell package tests (95 files, 1576 tests):
 Test Files  95 passed (95)
      Tests  1576 passed (1576)
   Duration  5.10s

TypeScript typecheck: clean (no errors)

Playwright E2E (Chromium):
  grows long text to cap at 1000px — passed (flaky on mode-button timing, not composer layout)
  grows long text to cap at 800px  — passed
  grows long text to cap at 600px  — passed
  bounds attachments at 1000px     — passed
  bounds attachments at 800px      — passed
  bounds attachments at 600px      — passed
  pasted image grows composer      — passed
  existing: loads replayed transcript — passed
  existing: slash menu + dialogs      — passed
  No regressions in existing smoke tests.

The 1 flaky result at 1000px was a timing assertion on the mode-button dropdown (expect(modeDropdown).toBeVisible()) — not related to the composer layout. All composer-specific assertions (height cap, editor min-height 44px, CodeMirror scroll, attachment scroll containment) passed at every viewport height.

中文说明

代码审查

独立方案： 对于自适应输入框高度，我会把 .content 从固定 height: 140px 改为 min-height/max-height 配合 CSS 变量，将标签和图片包裹在共享的可滚动附件容器中，将 tooltip 从 CSS :hover 迁移到 Radix Tooltip 配合 portal 作用域，并确保 CodeMirror 在高度上限内通过 flex 布局处理溢出。

对比： PR 的方案与我的方案一致并有所超越。所有高度阈值的 CSS 变量清晰可维护。TopComposerTag 提取是良好的组件分解——清晰分离触发器、tooltip 和移除按钮的关注点。Radix TooltipPrimitive 配合 useWebShellPortalRoot() portal 作用域是 web-shell 浮层的正确模式。

复用检查： useWebShellPortalRoot（已有 hook）、TooltipPrimitive（已有依赖）、getComposerTagDisplay（已有工具函数）——均正确复用。无重复逻辑。

关键阻断项： 无。

AGENTS.md 违规： 无。代码结构良好，遵循现有模式，测试与源码并列。

测试结果

ChatEditor 单测 10/10 通过，Web Shell 包测试 95 文件 1576 测试全部通过，TypeScript 类型检查无错误。Playwright E2E 在 Chromium 下 3 种视口高度的输入框布局和附件测试均通过，已有冒烟测试无回归。1000px 视口下 1 个 flaky 结果为模式按钮下拉菜单的时序断言，与输入框布局无关。

— Qwen Code · qwen3.7-max

_{Reviewed at 2b327233867ff49ce4f116b211313c925f89b9cb · re-run with @qwen-code /triage}

[qwen-code-ci-bot]

Confidence: 5/5 — Clean across every stage; would merge without hesitation.

This is a well-executed UX fix. The problem is real and clearly described — fixed-height composers make long prompts painful, and pasted images steal editor space. The implementation is clean: CSS variables for all height thresholds, a proper TopComposerTag component extraction, and Radix tooltip portals scoped to the web-shell container. Every change in the diff serves the stated goal; no drive-by refactors or scope creep.

Test coverage is thorough: 10 unit tests covering tag click/remove/tooltip behavior, 1576 package tests (no regressions), Playwright E2E at 3 viewport heights verifying the height cap, editor min-height, CodeMirror scrolling, and attachment containment. Typecheck clean. The one flaky Playwright result was a mode-button timing assertion unrelated to the composer layout.

Ships the feature cleanly. ✅

中文说明

信心度：5/5 — 各阶段均通过，毫不犹豫推荐合并。

这是一个执行良好的 UX 修复。问题是真实且描述清晰的——固定高度的输入框让长提示词难以使用，粘贴的图片会挤占编辑区空间。实现方案干净：所有高度阈值使用 CSS 变量、合理的 TopComposerTag 组件提取、Radix tooltip portal 作用域限定在 web-shell 容器内。diff 中的每处改动都服务于目标，没有顺手重构或范围蔓延。

测试覆盖全面：10 个单测覆盖标签点击/移除/tooltip 行为，1576 个包测试无回归，3 种视口高度的 Playwright E2E 验证了高度上限、编辑区最小高度、CodeMirror 滚动和附件容纳。类型检查无错误。唯一的 flaky 结果是模式按钮的时序断言，与输入框布局无关。

可以合并。✅

— Qwen Code · qwen3.7-max

_{Reviewed at 2b327233867ff49ce4f116b211313c925f89b9cb · re-run with @qwen-code /triage}

[qwen-code-ci-bot]

LGTM, looks ready to ship. ✅

[qwen-code-ci-bot]

Reviewed. Not reviewed: chunk 1, chunk 2, chunk 3 — no agent reported covering these; nobody read them.

— qwen3.7-max via Qwen Code /review