Skip to content

feat(gui): 按 Apple 设计标准重构桌面端 UI 材料与动效 - #393

Draft
BingZi-233 wants to merge 15 commits into
Stack-Cairn:mainfrom
BingZi-233:ui/apple-design-polish
Draft

feat(gui): 按 Apple 设计标准重构桌面端 UI 材料与动效#393
BingZi-233 wants to merge 15 commits into
Stack-Cairn:mainfrom
BingZi-233:ui/apple-design-polish

Conversation

@BingZi-233

Copy link
Copy Markdown

摘要

基于 Apple HIG / Fluid Interfaces 与设计工程实践,对桌面端(agent-gui)Chat 主界面、Hub 与 Settings 做了一轮视觉与交互重构,目标是让材料、按压反馈、抽屉动效和阅读节奏更统一、更像系统级应用。

主要改动:

  • 设计系统:中性色板、系统字体栈、运动曲线 token(ease-out / Apple sheet)、按压缩放
  • Chat 壳层:Header 叠层滚动、侧栏 touch-down、模型选择器 origin 动画、Composer 浅色毛玻璃修复、气泡与 Markdown 排版、Floor nav / 回底材料
  • 抽屉:左/右栏去掉「先淡出再收宽度」的两段式关闭,改为轨道宽度 + 面板 transform 同步
  • Skills / MCP Hub:共享状态条、分段 Tab、玻璃卡片与按压反馈
  • Settings:侧栏/导航/卡片材料与 Chat 层级对齐,导航改为中性选中态

动机

当前 UI 在材料(尤其是浅色毛玻璃)、列表反馈、面板开合上仍偏「通用 Web」:浅色 Composer 几乎看不出玻璃感;右栏关闭会先消失内容再收宽度,像播了两次动画。希望把 Chat / Hub / Settings 统一到同一套 Apple 风格材料与动效上,减少割裂感。

改动说明

设计 token 与全局

  • index.css:运动曲线、侧栏/画布色阶、毛玻璃材料、a11y(prefers-reduced-motion / prefers-reduced-transparency
  • button.tsxactive:scale(0.97) + 指定属性过渡(避免 transition: all

Chat

  • Header 绝对叠在 transcript 上,内容可滚过半透明 chrome
  • 模型选择器:从触发器长出、进出不对称、列表短 stagger
  • Composer:浅色降低填充不透明度、加强 blur,底部实色垫改为渐变
  • 用户气泡 / 行内操作 / 空状态建议卡
  • 助手 Markdown:字距、行高、标题层级按字号区分
  • Floor nav / 回底:与 header、composer 同族材料

抽屉开合修复

  • 左侧栏:固定宽度面板 translateX + 轨道 width 同步;关闭时冻结分区 grid 高度过渡
  • 右侧 Right Dock(右上角主题切换旁的项目工具面板):去掉延迟的 opacity → width 两段式,立即收宽度并滑出

Hub / Settings

  • HubChrome 抽出 HubStatusBanner / HubSegmented*;Skills & MCP 接入
  • Settings 侧栏与卡片材料、中性导航选中、分区入场曲线

测试计划

  • 亮/暗主题下打开 Chat:Header 叠层、Composer 浅色毛玻璃是否可读
  • 折叠/展开左侧会话栏:是否整块一起收,无「内容先没、宽度后收」
  • 点击右上角项目工具面板:开合是否单次抽屉动作
  • 模型选择器:从触发器长出、Esc 关闭更快
  • 空会话建议卡、用户气泡、助手 Markdown 长文阅读
  • Skills Hub / MCP Hub:状态条、分段 Tab、卡片按压
  • Settings:侧栏导航选中与系统设置分区卡材料
  • 系统「减少动态效果 / 减少透明度」下是否合理降级

说明

  • 仅改 crates/agent-gui 前端表现与样式,无协议/业务逻辑变更
  • 未同步 Gateway WebUI;若需要 Web 与桌面一致,可另开 PR
  • 未包含本地 skills 安装相关未跟踪文件(.agents/ 等)

Introduce motion curves, neutral system colors, and material styles for
the chat shell—header, sidebar, composer glass, floor nav, markdown
typography, and reduced-motion/transparency fallbacks.
Scale buttons to 0.97 on active with property-specific transitions, and
skip the scale for link variants and reduced-motion.
Use material suggestion cards, stronger CTA, and tighter entrance timing
aligned with the Apple empty-state treatment.
Round user bubbles closer to Messages geometry and add subtle press
feedback on copy/retry/branch/edit controls.
Update sidebar navigation chrome and highlight conversation/project rows
on pointer-down for Apple-like list response.
Grow the model menu from the trigger with asymmetric enter/exit, clearer
open-state chrome, and staggered item entrance.
Overlay the chat header on the transcript so content scrolls underneath,
with top inset padding and jump-to-bottom material alignment.
Lower light fill opacity, strengthen blur, fade the bottom pad, and move
glass styles out of utility layers so they are not overridden.
Use structural sidebar tones, translucent tab chrome, and material
starter cards so the dock matches the rest of the shell.
Apply glass material to the expanded panel, touch-down row highlight,
and snappier pin/marker feedback.
Slide the left sidebar and right dock as single drawers: track width and
panel transform share one curve. Drop the right dock's delayed
opacity-then-width collapse so content and chrome close together.
Share status banners, segmented tabs, and glass panels through HubChrome,
tune light-mode translucency and card press feedback, and drop bouncey
entrance curves so both hubs match the chat shell.
Restyle the settings sidebar and section cards to match chat/hub
hierarchy, use neutral nav selection with press feedback, and soften
section enter motion with critically damped easing.
@StackCairn
StackCairn marked this pull request as draft August 7, 2026 17:01
@github-actions

github-actions Bot commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

PR governance checks failed — this PR has been converted to draft.

  • No linked issue: the PR body must contain Closes #123 / Fixes #123 / Resolves #123. This project requires an issue before a PR — see the contribution guidelines.
  • UI change without screenshots: this PR modifies frontend code. Please add before/after screenshots or a recording under "Screenshots / preview" in the PR body.

Fix the items above, then click Ready for review to re-run the checks.

ouoiouo pushed a commit to ouoiouo/LiveAgent that referenced this pull request Aug 8, 2026
ouoiouo pushed a commit to ouoiouo/LiveAgent that referenced this pull request Aug 8, 2026
…age conflict)

ChatPage 冲突:Stack-Cairn#393 将 Header 移入 chat-header-overlay 叠层并重排
ChatTranscript 顺序;git 自动合并大部分,手工删除重复块并补回
Stack-Cairn#366 的 processDetailsExpanded prop(Stack-Cairn#393 旧 base 快照缺失)
ouoiouo pushed a commit to ouoiouo/LiveAgent that referenced this pull request Aug 8, 2026
…red files

PR Stack-Cairn#393 只改了 GUI 端,未同步 4 个镜像文件导致 check-mirror 漂移
(RightDockLauncher/RightDockPanel/FloorNavRail/McpHubPage);
按镜像规则将 GUI 版同步到 WebUI,128 个镜像文件恢复一致
ouoiouo pushed a commit to ouoiouo/LiveAgent that referenced this pull request Aug 8, 2026
…+ port Stack-Cairn#393 HubChrome exports

- HubChrome:移植 Stack-Cairn#393 新增的 HubStatusBanner/HubSegmentedTrack/
  HubSegmentButton(HubChrome 非镜像文件,不可直接 cp GUI 版)
- RoundContent:补 useRef/useEffect/Lightbulb import,thinking 分支
  改用 ThinkingBlock(与 GUI 对齐),删除多余 ThinkingActivity 引用
- AssistantBubble:删除 NativeDisplayImageBlock 不支持的
  redactToolContent/isAborted/workdir 透传与未定义的 latestTodoItem 引用
BingZi-233 and others added 2 commits August 8, 2026 15:57
Resolve GUI lint format failures and GUI/WebUI mirror drift so PR CI
can pass. Port HubChrome exports and shared material CSS to the web
adapter so mirrored MCP Hub / RightDock / FloorNav keep compiling.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant