fix(ui): restore line wrapping in the deep-thinking disclosure body by Astro-Han · Pull Request #1938 · apache/maka

Astro-Han · 2026-08-03T06:10:23Z

Problem

Desktop 展开"深度思考"后，思考内容的换行全被吞掉（\n 折叠成空格，长推理变成一坨）。

Root cause

#1748 把自有 disclosure 迁移到官方 Astryx ChatReasoning 时，思考正文从 <pre class="whitespace-pre-wrap"> 换成了官方内容 div。官方组件的 StyleX 原子不声明 white-space（组件假设 children 是已渲染内容），于是继承默认 white-space: normal，换行全部折叠。

Live 复现（Storybook + Chrome，修复前）：内容 div ws: "normal"，'第一行\n第二行' 渲染为 lineBoxes: 1（一行）。

Fix（eject seam + 产品 CSS）

astryx-chat-reasoning.tsx：内容 div 加产品 class maka-chat-reasoning-content（不动官方原子）。
styles.css：.maka-chat-reasoning-content { white-space: pre-wrap; word-break: break-word; }，与 tool 输出面板既有模式一致，位于 components 层（在 astryx-components 之后）。

Live 验证（修复后）：ws: "pre-wrap"，lineBoxes: 3（多行）。

Regression coverage

packages/ui render test：锁内容 div 带产品 class。
新增 desktop CSS contract 测试：断言 pre-wrap 规则是该 class 的唯一声明（删规则即红，已验证）。

Verification

packages/ui 测试 242/242
desktop main 全量 1395/1395
根 typecheck、biome lint、format:check 全过

未覆盖（如实说明）

未跑 Electron e2e：Playwright 套件当前无任何窗口渲染 ChatReasoning（type-scale.spec 已知 gap）。Live 验证用 Storybook 渲染同一套真实组件栈。

The ejected Astryx ChatReasoning content shell owns no white-space: its StyleX atoms declare only padding/typography/color, so the inherited white-space: normal collapsed every newline in thinking text, swallowing the reasoning line structure (regression from the #1748 migration, which replaced the old whitespace-pre-wrap body with the official component). Give the reasoning body a product class (maka-chat-reasoning-content) on the eject seam and restore the pre-wrap reading contract in @maka/ui styles.css, matching the tool-output body's existing pattern. Regression coverage: - ui render test locks the class on the content div - desktop CSS contract asserts the pre-wrap rule is the only declaration on that class (fails red without the rule)

Codex review (P3): the contract test's 'exactly once' count was a proxy for the real invariant and over-constrained — a future harmless second rule (e.g. a focus outline, a media variant) would false-fail even though white-space stayed pre-wrap. Walk every matching rule body in cascade order and assert the LAST declaration of white-space/word-break is pre-wrap/break-word. Verified: a later white-space: normal re-declaration fails red; a harmless margin addition stays green; the single rule passes.

Astro-Han · 2026-08-03T06:10:23Z

Problem

Desktop 展开"深度思考"后，思考内容的换行全被吞掉（\n 折叠成空格，长推理变成一坨）。

Root cause

#1748 把自有 disclosure 迁移到官方 Astryx ChatReasoning 时，思考正文从 <pre class="whitespace-pre-wrap"> 换成了官方内容 div。官方组件的 StyleX 原子不声明 white-space（组件假设 children 是已渲染内容），于是继承默认 white-space: normal，换行全部折叠。

Live 复现（Storybook + Chrome，修复前）：内容 div ws: "normal"，'第一行\n第二行' 渲染为 lineBoxes: 1（一行）。

Fix（eject seam + 产品 CSS）

astryx-chat-reasoning.tsx：内容 div 加产品 class maka-chat-reasoning-content（不动官方原子）。
styles.css：.maka-chat-reasoning-content { white-space: pre-wrap; word-break: break-word; }，与 tool 输出面板既有模式一致，位于 components 层（在 astryx-components 之后）。

Live 验证（修复后）：ws: "pre-wrap"，lineBoxes: 3（多行）。

Regression coverage

packages/ui render test：锁内容 div 带产品 class。
新增 desktop CSS contract 测试：断言 pre-wrap 规则是该 class 的唯一声明（删规则即红，已验证）。

Verification

packages/ui 测试 242/242
desktop main 全量 1395/1395
根 typecheck、biome lint、format:check 全过

未覆盖（如实说明）

未跑 Electron e2e：Playwright 套件当前无任何窗口渲染 ChatReasoning（type-scale.spec 已知 gap）。Live 验证用 Storybook 渲染同一套真实组件栈。

The ejected Astryx ChatReasoning content shell owns no white-space: its StyleX atoms declare only padding/typography/color, so the inherited white-space: normal collapsed every newline in thinking text, swallowing the reasoning line structure (regression from the #1748 migration, which replaced the old whitespace-pre-wrap body with the official component). Give the reasoning body a product class (maka-chat-reasoning-content) on the eject seam and restore the pre-wrap reading contract in @maka/ui styles.css, matching the tool-output body's existing pattern. Regression coverage: - ui render test locks the class on the content div - desktop CSS contract asserts the pre-wrap rule is the only declaration on that class (fails red without the rule)

Codex review (P3): the contract test's 'exactly once' count was a proxy for the real invariant and over-constrained — a future harmless second rule (e.g. a focus outline, a media variant) would false-fail even though white-space stayed pre-wrap. Walk every matching rule body in cascade order and assert the LAST declaration of white-space/word-break is pre-wrap/break-word. Verified: a later white-space: normal re-declaration fails red; a harmless margin addition stays green; the single rule passes.

Astro-Han · 2026-08-03T06:10:23Z

Problem

Desktop 展开"深度思考"后，思考内容的换行全被吞掉（\n 折叠成空格，长推理变成一坨）。

Root cause

#1748 把自有 disclosure 迁移到官方 Astryx ChatReasoning 时，思考正文从 <pre class="whitespace-pre-wrap"> 换成了官方内容 div。官方组件的 StyleX 原子不声明 white-space（组件假设 children 是已渲染内容），于是继承默认 white-space: normal，换行全部折叠。

Live 复现（Storybook + Chrome，修复前）：内容 div ws: "normal"，'第一行\n第二行' 渲染为 lineBoxes: 1（一行）。

Fix（eject seam + 产品 CSS）

astryx-chat-reasoning.tsx：内容 div 加产品 class maka-chat-reasoning-content（不动官方原子）。
styles.css：.maka-chat-reasoning-content { white-space: pre-wrap; word-break: break-word; }，与 tool 输出面板既有模式一致，位于 components 层（在 astryx-components 之后）。

Live 验证（修复后）：ws: "pre-wrap"，lineBoxes: 3（多行）。

Regression coverage

packages/ui render test：锁内容 div 带产品 class。
新增 desktop CSS contract 测试：断言 pre-wrap 规则是该 class 的唯一声明（删规则即红，已验证）。

Verification

packages/ui 测试 242/242
desktop main 全量 1395/1395
根 typecheck、biome lint、format:check 全过

未覆盖（如实说明）

未跑 Electron e2e：Playwright 套件当前无任何窗口渲染 ChatReasoning（type-scale.spec 已知 gap）。Live 验证用 Storybook 渲染同一套真实组件栈。

The ejected Astryx ChatReasoning content shell owns no white-space: its StyleX atoms declare only padding/typography/color, so the inherited white-space: normal collapsed every newline in thinking text, swallowing the reasoning line structure (regression from the #1748 migration, which replaced the old whitespace-pre-wrap body with the official component). Give the reasoning body a product class (maka-chat-reasoning-content) on the eject seam and restore the pre-wrap reading contract in @maka/ui styles.css, matching the tool-output body's existing pattern. Regression coverage: - ui render test locks the class on the content div - desktop CSS contract asserts the pre-wrap rule is the only declaration on that class (fails red without the rule)

Codex review (P3): the contract test's 'exactly once' count was a proxy for the real invariant and over-constrained — a future harmless second rule (e.g. a focus outline, a media variant) would false-fail even though white-space stayed pre-wrap. Walk every matching rule body in cascade order and assert the LAST declaration of white-space/word-break is pre-wrap/break-word. Verified: a later white-space: normal re-declaration fails red; a harmless margin addition stays green; the single rule passes.

Astro-Han · 2026-08-03T06:10:23Z

Problem

Desktop 展开"深度思考"后，思考内容的换行全被吞掉（\n 折叠成空格，长推理变成一坨）。

Root cause

#1748 把自有 disclosure 迁移到官方 Astryx ChatReasoning 时，思考正文从 <pre class="whitespace-pre-wrap"> 换成了官方内容 div。官方组件的 StyleX 原子不声明 white-space（组件假设 children 是已渲染内容），于是继承默认 white-space: normal，换行全部折叠。

Live 复现（Storybook + Chrome，修复前）：内容 div ws: "normal"，'第一行\n第二行' 渲染为 lineBoxes: 1（一行）。

Fix（eject seam + 产品 CSS）

astryx-chat-reasoning.tsx：内容 div 加产品 class maka-chat-reasoning-content（不动官方原子）。
styles.css：.maka-chat-reasoning-content { white-space: pre-wrap; word-break: break-word; }，与 tool 输出面板既有模式一致，位于 components 层（在 astryx-components 之后）。

Live 验证（修复后）：ws: "pre-wrap"，lineBoxes: 3（多行）。

Regression coverage

packages/ui render test：锁内容 div 带产品 class。
新增 desktop CSS contract 测试：断言 pre-wrap 规则是该 class 的唯一声明（删规则即红，已验证）。

Verification

packages/ui 测试 242/242
desktop main 全量 1395/1395
根 typecheck、biome lint、format:check 全过

未覆盖（如实说明）

未跑 Electron e2e：Playwright 套件当前无任何窗口渲染 ChatReasoning（type-scale.spec 已知 gap）。Live 验证用 Storybook 渲染同一套真实组件栈。

The ejected Astryx ChatReasoning content shell owns no white-space: its StyleX atoms declare only padding/typography/color, so the inherited white-space: normal collapsed every newline in thinking text, swallowing the reasoning line structure (regression from the #1748 migration, which replaced the old whitespace-pre-wrap body with the official component). Give the reasoning body a product class (maka-chat-reasoning-content) on the eject seam and restore the pre-wrap reading contract in @maka/ui styles.css, matching the tool-output body's existing pattern. Regression coverage: - ui render test locks the class on the content div - desktop CSS contract asserts the pre-wrap rule is the only declaration on that class (fails red without the rule)

Codex review (P3): the contract test's 'exactly once' count was a proxy for the real invariant and over-constrained — a future harmless second rule (e.g. a focus outline, a media variant) would false-fail even though white-space stayed pre-wrap. Walk every matching rule body in cascade order and assert the LAST declaration of white-space/word-break is pre-wrap/break-word. Verified: a later white-space: normal re-declaration fails red; a harmless margin addition stays green; the single rule passes.

Astro-Han · 2026-08-03T06:10:23Z

Problem

Desktop 展开"深度思考"后，思考内容的换行全被吞掉（\n 折叠成空格，长推理变成一坨）。

Root cause

#1748 把自有 disclosure 迁移到官方 Astryx ChatReasoning 时，思考正文从 <pre class="whitespace-pre-wrap"> 换成了官方内容 div。官方组件的 StyleX 原子不声明 white-space（组件假设 children 是已渲染内容），于是继承默认 white-space: normal，换行全部折叠。

Live 复现（Storybook + Chrome，修复前）：内容 div ws: "normal"，'第一行\n第二行' 渲染为 lineBoxes: 1（一行）。

Fix（eject seam + 产品 CSS）

astryx-chat-reasoning.tsx：内容 div 加产品 class maka-chat-reasoning-content（不动官方原子）。
styles.css：.maka-chat-reasoning-content { white-space: pre-wrap; word-break: break-word; }，与 tool 输出面板既有模式一致，位于 components 层（在 astryx-components 之后）。

Live 验证（修复后）：ws: "pre-wrap"，lineBoxes: 3（多行）。

Regression coverage

packages/ui render test：锁内容 div 带产品 class。
新增 desktop CSS contract 测试：断言 pre-wrap 规则是该 class 的唯一声明（删规则即红，已验证）。

Verification

packages/ui 测试 242/242
desktop main 全量 1395/1395
根 typecheck、biome lint、format:check 全过

未覆盖（如实说明）

未跑 Electron e2e：Playwright 套件当前无任何窗口渲染 ChatReasoning（type-scale.spec 已知 gap）。Live 验证用 Storybook 渲染同一套真实组件栈。

The ejected Astryx ChatReasoning content shell owns no white-space: its StyleX atoms declare only padding/typography/color, so the inherited white-space: normal collapsed every newline in thinking text, swallowing the reasoning line structure (regression from the #1748 migration, which replaced the old whitespace-pre-wrap body with the official component). Give the reasoning body a product class (maka-chat-reasoning-content) on the eject seam and restore the pre-wrap reading contract in @maka/ui styles.css, matching the tool-output body's existing pattern. Regression coverage: - ui render test locks the class on the content div - desktop CSS contract asserts the pre-wrap rule is the only declaration on that class (fails red without the rule)

Codex review (P3): the contract test's 'exactly once' count was a proxy for the real invariant and over-constrained — a future harmless second rule (e.g. a focus outline, a media variant) would false-fail even though white-space stayed pre-wrap. Walk every matching rule body in cascade order and assert the LAST declaration of white-space/word-break is pre-wrap/break-word. Verified: a later white-space: normal re-declaration fails red; a harmless margin addition stays green; the single rule passes.

Astro-Han · 2026-08-03T06:10:23Z

Problem

Desktop 展开"深度思考"后，思考内容的换行全被吞掉（\n 折叠成空格，长推理变成一坨）。

Root cause

#1748 把自有 disclosure 迁移到官方 Astryx ChatReasoning 时，思考正文从 <pre class="whitespace-pre-wrap"> 换成了官方内容 div。官方组件的 StyleX 原子不声明 white-space（组件假设 children 是已渲染内容），于是继承默认 white-space: normal，换行全部折叠。

Live 复现（Storybook + Chrome，修复前）：内容 div ws: "normal"，'第一行\n第二行' 渲染为 lineBoxes: 1（一行）。

Fix（eject seam + 产品 CSS）

astryx-chat-reasoning.tsx：内容 div 加产品 class maka-chat-reasoning-content（不动官方原子）。
styles.css：.maka-chat-reasoning-content { white-space: pre-wrap; word-break: break-word; }，与 tool 输出面板既有模式一致，位于 components 层（在 astryx-components 之后）。

Live 验证（修复后）：ws: "pre-wrap"，lineBoxes: 3（多行）。

Regression coverage

packages/ui render test：锁内容 div 带产品 class。
新增 desktop CSS contract 测试：断言 pre-wrap 规则是该 class 的唯一声明（删规则即红，已验证）。

Verification

packages/ui 测试 242/242
desktop main 全量 1395/1395
根 typecheck、biome lint、format:check 全过

未覆盖（如实说明）

未跑 Electron e2e：Playwright 套件当前无任何窗口渲染 ChatReasoning（type-scale.spec 已知 gap）。Live 验证用 Storybook 渲染同一套真实组件栈。

The ejected Astryx ChatReasoning content shell owns no white-space: its StyleX atoms declare only padding/typography/color, so the inherited white-space: normal collapsed every newline in thinking text, swallowing the reasoning line structure (regression from the #1748 migration, which replaced the old whitespace-pre-wrap body with the official component). Give the reasoning body a product class (maka-chat-reasoning-content) on the eject seam and restore the pre-wrap reading contract in @maka/ui styles.css, matching the tool-output body's existing pattern. Regression coverage: - ui render test locks the class on the content div - desktop CSS contract asserts the pre-wrap rule is the only declaration on that class (fails red without the rule)

Codex review (P3): the contract test's 'exactly once' count was a proxy for the real invariant and over-constrained — a future harmless second rule (e.g. a focus outline, a media variant) would false-fail even though white-space stayed pre-wrap. Walk every matching rule body in cascade order and assert the LAST declaration of white-space/word-break is pre-wrap/break-word. Verified: a later white-space: normal re-declaration fails red; a harmless margin addition stays green; the single rule passes.

Astro-Han · 2026-08-03T06:10:23Z

Problem

Desktop 展开"深度思考"后，思考内容的换行全被吞掉（\n 折叠成空格，长推理变成一坨）。

Root cause

#1748 把自有 disclosure 迁移到官方 Astryx ChatReasoning 时，思考正文从 <pre class="whitespace-pre-wrap"> 换成了官方内容 div。官方组件的 StyleX 原子不声明 white-space（组件假设 children 是已渲染内容），于是继承默认 white-space: normal，换行全部折叠。

Live 复现（Storybook + Chrome，修复前）：内容 div ws: "normal"，'第一行\n第二行' 渲染为 lineBoxes: 1（一行）。

Fix（eject seam + 产品 CSS）

astryx-chat-reasoning.tsx：内容 div 加产品 class maka-chat-reasoning-content（不动官方原子）。
styles.css：.maka-chat-reasoning-content { white-space: pre-wrap; word-break: break-word; }，与 tool 输出面板既有模式一致，位于 components 层（在 astryx-components 之后）。

Live 验证（修复后）：ws: "pre-wrap"，lineBoxes: 3（多行）。

Regression coverage

packages/ui render test：锁内容 div 带产品 class。
新增 desktop CSS contract 测试：断言 pre-wrap 规则是该 class 的唯一声明（删规则即红，已验证）。

Verification

packages/ui 测试 242/242
desktop main 全量 1395/1395
根 typecheck、biome lint、format:check 全过

未覆盖（如实说明）

未跑 Electron e2e：Playwright 套件当前无任何窗口渲染 ChatReasoning（type-scale.spec 已知 gap）。Live 验证用 Storybook 渲染同一套真实组件栈。

The ejected Astryx ChatReasoning content shell owns no white-space: its StyleX atoms declare only padding/typography/color, so the inherited white-space: normal collapsed every newline in thinking text, swallowing the reasoning line structure (regression from the #1748 migration, which replaced the old whitespace-pre-wrap body with the official component). Give the reasoning body a product class (maka-chat-reasoning-content) on the eject seam and restore the pre-wrap reading contract in @maka/ui styles.css, matching the tool-output body's existing pattern. Regression coverage: - ui render test locks the class on the content div - desktop CSS contract asserts the pre-wrap rule is the only declaration on that class (fails red without the rule)

Codex review (P3): the contract test's 'exactly once' count was a proxy for the real invariant and over-constrained — a future harmless second rule (e.g. a focus outline, a media variant) would false-fail even though white-space stayed pre-wrap. Walk every matching rule body in cascade order and assert the LAST declaration of white-space/word-break is pre-wrap/break-word. Verified: a later white-space: normal re-declaration fails red; a harmless margin addition stays green; the single rule passes.

Astro-Han · 2026-08-03T06:10:23Z

Problem

Desktop 展开"深度思考"后，思考内容的换行全被吞掉（\n 折叠成空格，长推理变成一坨）。

Root cause

#1748 把自有 disclosure 迁移到官方 Astryx ChatReasoning 时，思考正文从 <pre class="whitespace-pre-wrap"> 换成了官方内容 div。官方组件的 StyleX 原子不声明 white-space（组件假设 children 是已渲染内容），于是继承默认 white-space: normal，换行全部折叠。

Live 复现（Storybook + Chrome，修复前）：内容 div ws: "normal"，'第一行\n第二行' 渲染为 lineBoxes: 1（一行）。

Fix（eject seam + 产品 CSS）

astryx-chat-reasoning.tsx：内容 div 加产品 class maka-chat-reasoning-content（不动官方原子）。
styles.css：.maka-chat-reasoning-content { white-space: pre-wrap; word-break: break-word; }，与 tool 输出面板既有模式一致，位于 components 层（在 astryx-components 之后）。

Live 验证（修复后）：ws: "pre-wrap"，lineBoxes: 3（多行）。

Regression coverage

packages/ui render test：锁内容 div 带产品 class。
新增 desktop CSS contract 测试：断言 pre-wrap 规则是该 class 的唯一声明（删规则即红，已验证）。

Verification

packages/ui 测试 242/242
desktop main 全量 1395/1395
根 typecheck、biome lint、format:check 全过

未覆盖（如实说明）

未跑 Electron e2e：Playwright 套件当前无任何窗口渲染 ChatReasoning（type-scale.spec 已知 gap）。Live 验证用 Storybook 渲染同一套真实组件栈。

The ejected Astryx ChatReasoning content shell owns no white-space: its StyleX atoms declare only padding/typography/color, so the inherited white-space: normal collapsed every newline in thinking text, swallowing the reasoning line structure (regression from the #1748 migration, which replaced the old whitespace-pre-wrap body with the official component). Give the reasoning body a product class (maka-chat-reasoning-content) on the eject seam and restore the pre-wrap reading contract in @maka/ui styles.css, matching the tool-output body's existing pattern. Regression coverage: - ui render test locks the class on the content div - desktop CSS contract asserts the pre-wrap rule is the only declaration on that class (fails red without the rule)

Codex review (P3): the contract test's 'exactly once' count was a proxy for the real invariant and over-constrained — a future harmless second rule (e.g. a focus outline, a media variant) would false-fail even though white-space stayed pre-wrap. Walk every matching rule body in cascade order and assert the LAST declaration of white-space/word-break is pre-wrap/break-word. Verified: a later white-space: normal re-declaration fails red; a harmless margin addition stays green; the single rule passes.

Astro-Han added 2 commits August 3, 2026 14:07

Astro-Han marked this pull request as ready for review August 3, 2026 06:24

Astro-Han merged commit 70c042a into mainAug 3, 2026
5 checks passed