refactor(ui): restyle chat Buttons through themeProps targets

[Colafornia]

English

Summary

P3.1 of #5793. The quote chip, turn footer and lineage badges restyled Astryx Buttons through dedicated product classes (maka-quote-chip-text, maka-turn-lineage-badge, maka-turn-footer-action) — hooks that either repainted chrome ghost + elevation="none" already owns, or rebuilt the focus ring as an inset shadow because the chat scrollport clips the outward one.

This drops the per-Button hooks and reaches the same surface through the extension points the components publish:

• .maka-quote-chip .astryx-button keeps only the product delta (supporting type, muted ink, shrink-to-clip sizing); the expanded state now reads the Button's own aria-expanded="true".
• .maka-turn-lineage-row sets --_button-radius — the derived var Astryx's own Thumbnail/Carousel retune — and the color rules scope through .astryx-button[data-direction].
• .maka-turn-footer and .maka-message-meta set --focus-outline-offset so the component's own outline draws inside the border box instead of a replacement inset shadow. The retune now also covers conversation.turn.footer slot content, which previously had no fix.
• markerVariants drops its lineage-badge and footer-action variants; the remaining ones only mark product composition.

A new Product/Turn Lineage story gives the badges and the retuned footer ring pixel coverage — the badge surface previously had none — and pins both extension points (borderRadius, outlineOffset) as computed-style assertions.

Rebased onto e57b029, which includes #5911's Astryx-layout move: .maka-turn-lineage-row keeps no flex declarations of its own (the HStack owns them) and the badges' resting tint stays dropped as #5911 set it — this slice only changes the mechanism (theme targets + derived tokens), not upstream's current paint.

Refs #5793

Verification

• npm run lint, npm run format:check, npm run build, npm run typecheck — all clean, re-run on the rebased branch
• npx knip --workspace packages/ui / --workspace apps/desktop — clean
• node --test packages/ui/dist/__tests__/*.test.js — 696 passed
• npm --workspace @maka/desktop run typecheck:stories — clean
• npm run astryx:surface-inventory:write — inventory unchanged, blocker count stays 0
• Storybook pixel diff on the new base (42 shots, light+dark — the 20-story chat surface set plus regenerated-conversation's lineage badges): all identical. turn-lineage ×2 is new coverage with no before frame; its play holds focus on the footer branch action so the retuned ring is in the shot. The one intentional delta — focused footer ring: inset box-shadow in --focus-ring → native outline in --focus-outline-color (= --accent-solid, the contrast-clearing tier) — is pinned by the story's computed-style assertions (borderRadius 999px, outlineOffset -2px).
• Not run: Electron e2e (no behavior change; desktop-level assertions don't reference the removed classes)

AI use

• Generative tooling made a substantive contribution

Tool(s) and scope: Devin authored the implementation, the new story, and this description; verified via local builds, tests and pixel diff runs. Human reviewed the diff and the accepted deltas.

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

中文

Summary

#5793 的 P3.1 切片。quote chip、turn footer 和 lineage badge 之前都通过专门的产品 class(maka-quote-chip-text、maka-turn-lineage-badge、maka-turn-footer-action)覆盖 Astryx Button 的样式——这些 class 要么重复声明 ghost + elevation="none" 已有的效果，要么因为 chat scrollport 会裁掉外扩焦点环，而用 inset shadow 另画了一个。

这次删掉这些 Button 级 class，改用组件开放的扩展点实现同样的样式：

• .maka-quote-chip .astryx-button 只保留产品侧的差异(supporting 字号、muted 色、允许收缩裁剪的尺寸);expanded 状态改读 Button 自带的 aria-expanded="true"。
• .maka-turn-lineage-row 上设置 --_button-radius——Astryx 自己的 Thumbnail/Carousel 调内部按钮形状也是用这个派生 var——颜色规则收敛到 .astryx-button[data-direction] 下。
• .maka-turn-footer 和 .maka-message-meta 设置 --focus-outline-offset，让组件自己的 outline 画在边框内，替代手写的 inset shadow。这个调整还顺带覆盖了 conversation.turn.footer slot 里的内容，之前它们没有任何修正。
• markerVariants 删掉 lineage-badge 和 footer-action 两个档位，剩下的档位只标记产品组合结构。

新增 Product/Turn Lineage story,badge 和 footer 焦点环从此有截图覆盖——badge 之前完全没有 story 覆盖——并用计算值断言固定这两个扩展点(borderRadius、outlineOffset)。

已 rebase 到 e57b029（包含 #5911 的 Astryx 布局改造）:.maka-turn-lineage-row 不再自带 flex 声明（由 HStack 接管）,badge 的 resting tint 也保持 #5911 移除后的状态——本切片只改机制（theme target + 派生 token)，不改 upstream 现有的绘制结果。

Refs #5793

Verification

• npm run lint、npm run format:check、npm run build、npm run typecheck — 在 rebase 后的分支上重跑，全部通过
• npx knip --workspace packages/ui / --workspace apps/desktop — 干净
• node --test packages/ui/dist/__tests__/*.test.js — 696 通过
• npm --workspace @maka/desktop run typecheck:stories — 通过
• npm run astryx:surface-inventory:write — inventory 无 diff,blocker 保持 0
• Storybook 像素对比（新基线，42 张，light+dark——20 个 chat 面 story 加 regenerated-conversation 的 lineage badge)：全部一致。turn-lineage ×2 是新增覆盖、无 before 帧可对比；其 play 会把焦点停在 footer 的 branch action 上，新焦点环已在画面内。唯一有意为之的差异——footer 聚焦环：--focus-ring 的 inset box-shadow → --focus-outline-color（即 --accent-solid，满足对比度的 tier）的原生 outline——由 story 的计算值断言固定(borderRadius 999px、outlineOffset -2px)。
• 未跑：Electron e2e（无行为变化；desktop 层断言不引用被删的 class)

AI use

• Generative tooling made a substantive contribution

Tool(s) and scope: Devin 撰写了实现、新 story 和本描述，并通过本地构建、测试和像素对比验证。人工 review 过 diff 和接受的差异项。

Checklist

• Tests cover the change and fail without it
• Lint, format, typecheck and the affected suites pass locally

Does this PR entail a change in behavior?

• Yes — described under Summary above
• No

[jackwener]

No findings. I reviewed exact head 66b5f9a3e11ca92bcdcd79032b988d04f3f13939 and found the refactor safe to merge from a technical perspective.

The removed product-specific Button hooks are fully replaced by Astryx's published extension points: the quote chip retains its typography, muted color, clipping behavior, and expanded-state styling; lineage buttons inherit the intended pill radius and directional colors; and footer/message-meta focus rings use the shared outline with the required inward offset. I also checked both lineage directions and the collapsed/expanded quote-chip states in the rendered components.

Verification completed on the exact head:

• UI build and all 683 tests passed.
• Storybook typecheck/build and smoke rendering passed: 450 stories and 490 renders.
• The Astryx surface inventory, Biome, and ASF header checks passed.
• Removing the footer focus offset made the new story fail with 3px != -2px; removing the lineage radius made it fail with 10px != 999px, so the assertions distinguish both regressions.
• GitHub's exact-head test and label checks are successful.

The PR also merges cleanly with current main (1a66e4d5e22067afd986d43fc634159e307a8e31). I materialized that merge as tree 7f5d839289e66a675eb8d34254025b94bdab6a7e; workspace builds, Storybook typecheck, all 683 UI tests, and the static gates passed on the merge result as well.

I did not run a full Electron end-to-end session; the review covered the production React/CSS paths, component behavior, rendered Storybook surfaces, and the current-main merge result.

---

Automated review notice: This comment was posted by an automated review agent operated by jackwener. It is not an independent human review and does not replace one.

[jackwener]

Approved at exact head 66b5f9a3e11ca92bcdcd79032b988d04f3f13939. I found no unresolved P0–P2 issues.

The refactor preserves the quote chip, lineage badges, and footer/message-meta focus behavior through Astryx's published extension points. The exact-head UI build and all 683 tests passed, as did Storybook typecheck/build and 490 smoke renders. Mutation checks confirmed that the new story detects removal of either the inward focus offset or the lineage pill radius.

The PR is open, non-draft, mergeable, and all exact-head hosted checks are successful. It also merges cleanly with current main (1a66e4d5e22067afd986d43fc634159e307a8e31); the tested merge result passed the workspace builds, Storybook typecheck, all 683 UI tests, and the static gates.

---

Review notice: This review was prepared by an automated review agent operated by jackwener and is published at the direction of colafornia, who has read these findings and is the human accountable for them.

[Astro-Han]

Reviewed 66b5f9a3e11ca92bcdcd79032b988d04f3f13939 (7 files, +171/−48, a single commit).

No P0–P3 findings. One merge-blocking fact to note: this revision is mergeable=false / mergeable_state=dirty, so it conflicts with its base and needs a rebase or conflict resolution before it can land. Nothing in the change itself causes that.

What the change does. Chat controls are restyled through theme targets rather than per-component classes: the production diff is confined to styling — styles.css (+34/−29), primitives/chat.tsx (±8, the button styling swap), chat-message.css (+6/−1), with small removals in chat-turn.tsx (−5) and quote-ref-chip.tsx (−4) — and contains no logic change. A test expectation moves by one line to match.

Gate on this head: test and label are green; the commit carries a Generated-by: Devin (devin.ai) trailer with a co-author line, and there is no Grok involvement.

What I could not judge

• The rendered result: this is a styling change and I did not run the desktop app or capture any visual output, so I am verifying the mechanism (theme-target plumbing and the absence of logic edits), not the appearance.
• The conflict's shape, which needs a rebase to see.

I did not approve, request changes, or merge.

---

Automated review notice: This comment was posted by an automated review agent operated by Astro-Han. It is not an independent human review and does not replace one.