fix(web-shell): align split view chat interactions

[ytahdn]

What this PR does

This PR brings split-view chat panes in line with the normal single-chat interaction model. Each pane now displays and accepts follow-up suggestions, sends prompts directly while idle so the loading state appears immediately, and queues additional prompts while that pane is already running. Queued prompts are visible and retain the same edit, insert, remove, and clear controls as the main chat.

It also removes the extra divider above each pane composer and updates the split-view session actions to use the existing primary-button visual treatment.

Why it's needed

Split-view panes previously omitted follow-up suggestions and attempted to send every prompt directly. As a result, a second prompt submitted during an active turn was rejected instead of entering the queue, and the split experience behaved differently from the single-chat view. The final idle-versus-busy routing preserves immediate loading feedback without losing queue support.

Reviewer Test Plan

How to verify

1. Open two or more sessions in Split View and send a prompt in an idle pane. Confirm the submitted text clears and the pane enters its loading state immediately.
2. While that pane is still running, submit another prompt. Confirm it appears in that pane's queue and can be edited, inserted, removed, or cleared without affecting another pane.
3. Complete a turn that returns a follow-up suggestion. Confirm the suggestion appears in the pane composer and can be accepted or dismissed.
4. Compare a normal single-chat session before and after the change. Confirm its loading, queue, and follow-up behavior is unchanged.
5. Confirm Add session, Open in new tab, and Open in split use the primary-button treatment, and that the extra divider above split-pane composers is gone.

Evidence (Before & After)

Before: split panes did not show follow-up suggestions, and prompts submitted during an active turn did not enter the queue.

After: split panes use the same follow-up and queued-prompt interactions as the single-chat view, while idle submissions still enter loading immediately.

Screenshots (Automated Testing)

The following screenshots were captured using Playwright headless browser to verify the fixes:

Split View Entry

• 01-session-overview.png - Session overview page with action buttons

• 02-split-view-entry.png - Entering split view via the "分屏" button

• 03-add-pane-picker.png - Session picker for adding panes

• 04-split-one-pane.png - Single pane in split view (no extra divider above composer)

• 05-split-two-panes.png - Two panes side by side

Queue Message Functionality

• 06-pane-prompt-typed.png - Typing a prompt in a pane

• 07-pane-loading-state.png - Loading state appears immediately after sending

• 08-pane-queued-typed.png - Typing a second message while the pane is running

• 09-pane-queued-visible.png - Queued message visible with edit/insert/remove/clear controls

Response Complete

• 10-pane-response-complete.png - Response completed, composer returns to normal

• 11-overview-action-buttons.png - Back to overview showing primary-button treatment

Screenshots location: .qwen/pr-screenshots/

Tested on

OS	Status
🍏 macOS	✅
🪟 Windows	N/A
🐧 Linux	N/A

Environment (optional)

Local macOS workspace with the web-shell unit tests, monorepo build, and workspace typecheck. Automated screenshots captured using Playwright 1.61.1.

Risk & Scope

• Main risk or tradeoff: split panes now instantiate the existing queued-prompt and follow-up controllers for each pane; the surrounding daemon session provider keeps their state scoped to the correct session.
• Not validated / out of scope: Windows and Linux browser rendering were not manually tested.
• Breaking changes / migration notes: None.

Linked Issues

N/A

中文说明

本 PR 做了什么

本 PR 让分屏聊天窗格与普通单会话聊天保持一致。每个窗格现在都可以展示和接受后续建议；空闲时直接发送消息，使 loading 状态立即出现；该窗格正在执行时，后续消息会进入队列。队列中的消息可见，并支持与主聊天相同的编辑、插入、删除和清空操作。

同时移除了每个分屏输入区上方多余的分隔线，并将分屏相关的会话操作按钮调整为项目现有的主按钮样式。

为什么需要

此前分屏窗格没有接入后续建议，并且所有消息都会尝试直接发送。因此，在当前轮次执行期间提交第二条消息时，消息会被拒绝而不是进入队列，分屏体验与单会话聊天不一致。最终采用空闲与执行中分流的方式，在支持队列的同时保留立即出现 loading 的反馈。

Reviewer 测试计划

如何验证

1. 在分屏中打开两个或更多会话，在空闲窗格中发送消息。确认输入内容被清空，并且该窗格立即进入 loading 状态。
2. 在该窗格仍在执行时再次发送消息。确认消息进入该窗格自己的队列，并且可以编辑、插入、删除或清空，不影响其他窗格。
3. 完成一个会返回后续建议的轮次。确认建议显示在该窗格输入框中，并且可以接受或关闭。
4. 修改前后对比普通单会话聊天，确认其 loading、队列和后续建议行为没有变化。
5. 确认"添加会话""在新标签页打开"和"打开到分屏"使用主按钮样式，并且分屏输入区上方多余的分隔线已移除。

证据（修改前后）

修改前：分屏窗格不显示后续建议，执行期间提交的消息不会进入队列。

修改后：分屏窗格使用与单会话聊天相同的后续建议和消息队列交互，同时空闲发送仍会立即进入 loading。

截图（自动化测试）

使用 Playwright 无头浏览器捕获以下截图来验证修复：

进入分屏视图

• 01-session-overview.png - 会话总览页面，显示操作按钮
• 02-split-view-entry.png - 通过"分屏"按钮进入分屏视图
• 03-add-pane-picker.png - 添加窗格的会话选择器
• 04-split-one-pane.png - 分屏中的单个窗格（composer 上方没有多余分隔线）
• 05-split-two-panes.png - 两个窗格并排显示

队列消息功能

• 06-pane-prompt-typed.png - 在窗格中输入消息
• 07-pane-loading-state.png - 发送后立即显示加载状态
• 08-pane-queued-typed.png - 在窗格执行期间输入第二条消息
• 09-pane-queued-visible.png - 队列消息可见，带有编辑/插入/删除/清空控件

响应完成

• 10-pane-response-complete.png - 响应完成，composer 恢复正常
• 11-overview-action-buttons.png - 返回总览页面，显示主按钮样式

截图位置：.qwen/pr-screenshots/

测试平台

OS	状态
🍏 macOS	✅
🪟 Windows	N/A
🐧 Linux	N/A

环境（可选）

本地 macOS 工作区，执行了 web-shell 单元测试、monorepo build 和 workspace typecheck。使用 Playwright 1.61.1 捕获自动化截图。

风险与范围

• 主要风险或取舍：每个分屏窗格现在都会实例化现有的消息队列和后续建议控制器；外层 daemon session provider 会确保这些状态限定在正确的会话中。
• 未验证或范围外：未在 Windows 和 Linux 浏览器中进行手动渲染测试。
• 破坏性变更或迁移说明：无。

关联 Issue

N/A

[qwen-code-ci-bot]

Thanks for the PR!

Template looks good ✓

Problem: observed UX gap — split-view panes are missing follow-up suggestions and prompt queuing that the single-chat view already supports. A second prompt submitted during an active turn gets rejected instead of queued. Playwright screenshots document the before/after behavior thoroughly.

Direction: aligned — bringing split-view to feature parity with single-chat is clearly within scope. This is a straightforward consistency fix.

Size: 127 production lines (95 in ChatPane.tsx, 32 in CSS), 222 test lines. Not applicable for core module checks — all changes in packages/web-shell/.

Approach: scope is minimal and focused. The PR reuses existing useDaemonFollowupSuggestion, useQueuedPrompts, and QueuedPromptDisplay — no new abstractions. The idle-vs-busy routing via streamingStateRef is the right pattern for synchronous callback access. CSS changes (primary-button treatment, divider removal) are small and consistent with the stated goal.

Moving on to code review. 🔍

中文说明

感谢贡献！

模板完整 ✓

问题：已观测到的 UX 差距——分屏窗格缺少单会话聊天已有的后续建议和消息队列功能。在活跃轮次期间提交的第二条消息被拒绝而非进入队列。Playwright 截图详细记录了修改前后的行为。

方向：对齐——将分屏视图与单会话聊天的功能保持一致，明确在项目范围内。这是一个直接的一致性修复。

规模：127 行生产代码（ChatPane.tsx 95 行，CSS 32 行），222 行测试代码。不涉及核心模块检查——所有更改在 packages/web-shell/ 中。

方案：范围最小且聚焦。PR 复用了现有的 useDaemonFollowupSuggestion、useQueuedPrompts 和 QueuedPromptDisplay——没有新增抽象。通过 streamingStateRef 进行空闲/忙碌路由是回调中同步访问的正确模式。CSS 更改（主按钮样式、移除分隔线）幅度小且与目标一致。

进入代码审查 🔍

— Qwen Code · qwen3.7-max

[qwen-code-ci-bot]

Code Review

The implementation is clean and correct. The PR does exactly what it says — wires the existing useDaemonFollowupSuggestion and useQueuedPrompts hooks into ChatPane, adds idle-vs-busy routing, and forwards all the queue editing controls and follow-up props through to ChatEditor.

Nothing flagged:

• No correctness bugs — streamingStateRef correctly avoids stale closures in the submit callback. The connection.status !== 'connected' guard prevents submissions on disconnected panes.
• No security concerns.
• Excellent reuse — no duplicated logic, no new abstractions. The useQueuedPrompts parameter object is passed exactly as the hook's interface expects.
• CSS changes are minimal: one border removed, button styles aligned to primary treatment with proper disabled state.

Tests

 ✓ components/ChatPane.test.tsx (33 tests) 111ms

 Test Files  1 passed (1)
      Tests  33 passed (33)

All 33 tests pass, including the new ones covering:

• Idle prompt sends directly with loading state
• Busy prompt queues instead of sending
• Image forwarding for both idle and queued prompts
• Disconnected pane blocks both send and queue
• Follow-up suggestion wiring (accept inserts text, dismiss works)
• Queue display and editing controls passed to ChatEditor

Typecheck

npx tsc --noEmit → exit 0 (no errors)

Real-Scenario Testing

N/A — this is a browser-based React UI change (split-view pane interactions). tmux testing applies to the CLI, not the web-shell. The PR includes Playwright screenshots demonstrating the fix end-to-end.

中文说明

代码审查

实现干净且正确。PR 完全如其所述——将现有的 useDaemonFollowupSuggestion 和 useQueuedPrompts hooks 接入 ChatPane，添加空闲/忙碌路由，并将所有队列编辑控件和后续建议属性传递给 ChatEditor。

未发现问题：

• 没有正确性 bug——streamingStateRef 正确避免了提交回调中的过期闭包。connection.status !== 'connected' 守卫阻止了断开连接窗格的提交。
• 没有安全问题。
• 优秀的代码复用——没有重复逻辑，没有新增抽象。useQueuedPrompts 参数对象完全按照 hook 接口传递。
• CSS 更改最小化：移除一条边框，按钮样式对齐主按钮样式并包含正确的禁用状态。

测试

33 个测试全部通过，包括新增的空闲直接发送、忙碌入队、图片转发、断连阻止提交、后续建议接入、队列显示和编辑控件等测试。

类型检查

无错误。

真实场景测试

不适用——这是浏览器端 React UI 更改（分屏窗格交互）。tmux 测试适用于 CLI，不适用于 web-shell。PR 包含 Playwright 截图，端到端演示了修复效果。

— Qwen Code · qwen3.7-max

[qwen-code-ci-bot]

This is a focused, well-executed UX consistency fix. The author correctly identified that split-view panes were missing two features the single-chat view already had (follow-up suggestions and prompt queuing) and wired the existing hooks in without inventing anything new. The code reuses useDaemonFollowupSuggestion, useQueuedPrompts, and QueuedPromptDisplay exactly as designed — no new abstractions, no duplicated logic.

The idle-vs-busy routing is the right approach: streamingStateRef gives the synchronous submit callback access to the current streaming state, and the connection.status guard prevents submissions on disconnected panes. The 33 tests comprehensively cover the new paths, and typecheck is clean.

The CSS changes are minimal and consistent — removing the extra divider, aligning session action buttons to the primary-button treatment with proper disabled states.

The PR's Playwright screenshots provide solid before/after evidence for a browser UI change where tmux testing doesn't apply.

My independent proposal would have been identical: wire the existing hooks into ChatPane, add streaming-state-based routing, and pass queue/followup props through to ChatEditor. The PR matches this exactly.

Approving. ✅

中文说明

这是一个聚焦且执行良好的 UX 一致性修复。作者正确识别出分屏窗格缺少单会话聊天已有的两个功能（后续建议和消息队列），并在不发明任何新东西的情况下接入了现有 hooks。代码完全按照设计复用了 useDaemonFollowupSuggestion、useQueuedPrompts 和 QueuedPromptDisplay——没有新抽象，没有重复逻辑。

空闲/忙碌路由是正确的方法：streamingStateRef 让同步提交回调能访问当前流式状态，connection.status 守卫阻止了断开连接窗格的提交。33 个测试全面覆盖了新路径，类型检查无错误。

CSS 更改最小且一致——移除多余分隔线，将会话操作按钮对齐到主按钮样式并包含正确的禁用状态。

PR 的 Playwright 截图为浏览器 UI 更改提供了可靠的修改前后证据（tmux 测试不适用于此场景）。

我的独立方案完全相同：将现有 hooks 接入 ChatPane，添加基于流式状态的路由，并将队列/后续建议属性传递给 ChatEditor。PR 完全匹配。

批准 ✅

— Qwen Code · qwen3.7-max

[qwen-code-ci-bot]

LGTM, looks ready to ship. ✅

[github-actions]

Please do not rebase or force-push to an active PR as it invalidates existing review comments. Note for future reference, the bots always squash all changes into a single commit automatically as part of the integration.

中文

请勿对活跃的 PR 执行 rebase 或 force-push，因为这会使已有的评审评论失效。另外，供日后参考：作为集成流程的一部分，机器人始终会自动将所有改动压缩（squash）为单个提交。

[ytahdn]

@qwen-code /triage

[wenshao]

No review findings. Downgraded from Approve to Comment: CI failing: Post Coverage Comment, web-shell E2E Smoke (ubuntu-latest, Node 22.x).

— qwen3.7-max via Qwen Code /review

[qwen-code-ci-bot]

LGTM, looks ready to ship. ✅

[qwen-code-ci-bot]

LGTM ✅ — no blockers found. The idle/busy routing, follow-up suggestion wiring, and prompt queue integration are all clean. Tests cover the key paths well.

— qwen3.7-max via Qwen Code /review