refactor(ui): replace hand-written chat layout with Astryx Stack

[Colafornia]

English

Part of #5793. A0 (#5794) is available through merged PR #5847. Scope reviewed against upstream main 7c90bac2d on 2026-10-04; numeric counts below are from the original audit.

Problem

The chat surface builds most of its layout from raw elements, product classes, and CSS rules instead of Astryx layout components and props. The official ai-chat template has 0 raw layout elements and 2 className props in 763 lines. In the chat surface, chat-turn.tsx has 48 lines with className, composer.tsx has 47, and tool-activity.tsx has 26. Renderer CSS carries 356 display: flex/grid declarations.

Each hand-written layout needs its own CSS rule and its own spacing decision. That is where most of the CSS volume and the maintenance cost come from. It is also why small spacing inconsistencies keep appearing.

Desired outcome

Chat surface layout is expressed with Astryx VStack, HStack, and component props such as gap, align, and width. The CSS rules that only existed to lay out those elements are deleted. The rendered pixels stay the same, except for listed and accepted differences.

A fully lossless change is not always possible. Astryx SpacingStep accepts 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10 and has no 2.5 step (10px). Renderer CSS uses --space-2-5 19 times and has 18 off-grid pixel literals in padding and gap. Where a value has no Astryx step, the PR either keeps a local rule with a /* local: ... */ comment or snaps to the nearest step and lists the difference.

Scope

One PR per surface, in this order:

• User message: bubble, attachments, quote chips, meta row — merged PR refactor(ui): move user-message layout onto Astryx primitives #5848.
• Turn footer and lineage row layout — merged PR refactor(ui): move turn chrome onto Astryx layout #5911.
• Button override shrink from tracking(desktop): align shell chrome and settings with Astryx and DESIGN.md #4679 P3.1 — owned by open PR refactor(ui): restyle chat Buttons through themeProps targets #5928, separate from the completed layout slice.
• Composer: drawer, session references, footer controls.
• Chat header and transcript frame (chat-surface-layout.tsx, chat-view.tsx).

Remaining work uses the current Composer structure from #5927 and #5954. Preserve Stop/Resume/Send behavior, delivery recovery, owner boundaries and plugin slots. Audit frame wrappers individually: virtualizer, positioning and scroll behavior are product responsibilities. Coordinate frame edits with #5942 and #5615.

Out of scope: the process region (ProcessingBlock, tool-activity.tsx) and failure notices. #5796 and #5797 redesign them.

Acceptance criteria

• Each PR attaches before/after captures from the A0 loop showing zero difference, or lists every accepted difference with its cause.
• Each PR deletes the CSS rules its change makes unused, and reports the net CSS line change.
• No new .astryx-* selector and no new !important.
• Plugin slot DOM and class names that plugins rely on stay unchanged, or the PR names the plugin contract it changes.
• docs/astryx-surface-file-inventory.md is regenerated and stays at blocker 0.

中文

属于 #5793。A0（#5794）已由 PR #5847 合并交付。2026-10-04 已按 upstream main 7c90bac2d 核对范围；下方数字来自原始审计。

问题

对话界面的大部分布局由原生元素、产品 class 和 CSS 规则搭成，而不是由 Astryx 布局组件和属性完成。官方 ai-chat 模板 763 行里没有原生布局元素，只有 2 个 className。对话界面中，chat-turn.tsx 有 48 行带 className，composer.tsx 有 47 行，tool-activity.tsx 有 26 行。渲染层 CSS 里有 356 条 display: flex/grid 声明。

每一处手写布局都需要自己的 CSS 规则和自己的间距决定。CSS 的体量和维护成本主要来自这里，细小的间距不一致反复出现也是因为这个。

期望结果

对话界面的布局用 Astryx 的 VStack、HStack 和组件属性（如 gap、align、width）表达。只为这些元素布局而存在的 CSS 规则被删除。渲染出的像素保持不变，列出并接受的差异除外。

完全无损并不总能做到。Astryx 的 SpacingStep 只接受 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10，没有 2.5 档（10px）。渲染层 CSS 使用了 19 次 --space-2-5，内边距和间距里还有 18 个不在网格上的像素字面量。遇到没有对应 Astryx 档位的值时，PR 要么保留一条带 /* local: ... */ 注释的局部规则，要么吸附到最近的档位并列出差异。

范围

每个区域一个 PR，按以下顺序：

• 用户消息：气泡、附件、引用标签、元数据行——PR refactor(ui): move user-message layout onto Astryx primitives #5848 已合并。
• 轮次页脚和分支标记行布局——PR refactor(ui): move turn chrome onto Astryx layout #5911 已合并。
• tracking(desktop): align shell chrome and settings with Astryx and DESIGN.md #4679 P3.1 中的 Button 覆盖收缩——由开放中的 PR refactor(ui): restyle chat Buttons through themeProps targets #5928 负责，与已完成的布局切片分开跟踪。
• 输入框：抽屉、会话引用、底部控件。
• 对话标题栏和对话流外框（chat-surface-layout.tsx、chat-view.tsx）。

剩余工作使用 #5927 和 #5954 后的当前输入框结构。保留停止／恢复／发送行为、发送恢复、负责模块的边界和插件槽。逐个审计外框包裹元素：虚拟列表、定位和滚动行为属于产品职责。外框修改与 #5942、#5615 协调。

不在范围内：过程区（ProcessingBlock、tool-activity.tsx）和失败提示。它们由 #5796 和 #5797 重新设计。

验收标准

• 每个 PR 附上 A0 流程的前后截图且零差异，或逐条列出接受的差异及原因。
• 每个 PR 删除因本次修改而不再使用的 CSS 规则，并报告 CSS 净变化行数。
• 不新增 .astryx-* 选择器，不新增 !important。
• 插件依赖的插件槽 DOM 和 class 名保持不变；如有改变，PR 需写明改变了哪项插件契约。
• 重新生成 docs/astryx-surface-file-inventory.md，blocker 保持为 0。