Skip to content

feat(ui): unify process/tool/reasoning card style with shimmer sweep animation#3913

Closed
CVEngineer66 wants to merge 13 commits into
esengine:main-v2from
CVEngineer66:feat/unify-process-card-style
Closed

feat(ui): unify process/tool/reasoning card style with shimmer sweep animation#3913
CVEngineer66 wants to merge 13 commits into
esengine:main-v2from
CVEngineer66:feat/unify-process-card-style

Conversation

@CVEngineer66

Copy link
Copy Markdown
Contributor

Transcript 展示样式统一化 + 执行动效

改动内容

1. 视觉统一(去卡片化)

之前工具调用、思考过程、步骤折叠各有不同的卡片样式(背景、边框、圆角),视觉上显得杂乱。统一为最小化的行内文本样式:

  • .tool.process-card — 去掉 backgroundborderborder-radiusbox-shadow,和对话栏背景完全融合
  • 三种折叠线(已处理/只读工具集/思考过程)统一使用 .reasoning__head 样式,行为一致

2. 折叠箭头统一

  • 思考过程的箭头从 ChevronDown 改为 ChevronRight + CSS rotate(90deg),和其他折叠线行为一致
  • 已处理折叠线删除 locale 文本末尾的 > 字符,改用和思考过程相同的图标

3. 长命令文本截断

  • .tool__headinline-flex 改为 flex + overflow: hidden
  • 工具名 + 路径包裹在 tool__label-group 内,最大宽度 70%,超出用省略号截断
  • duration 和折叠箭头始终可见

4. 执行中动效(shimmer sweep)

正在执行的工具或思考过程,文字上有斜向高亮带匀速扫过(5s / 次),表示仍在运行:

  • 非高亮区域保持正常文字颜色(浅灰色),高亮带经过时变亮
  • 鼠标悬停时动效暂停,整行变高亮色
  • 只作用于文字本身(background-clip: text),不产生块状背景

5. 其他清理

  • ToolCard — 去掉状态图标(◌✓!)、去掉 summarize 调用(不再显示"11 个文件"等摘要),恢复可折叠的折叠箭头
  • ReadOnlyBatch — 复用 .reasoning__head / .reasoning__chevron,删掉独立 CSS
  • TurnCollapse — 同样复用 .reasoning__head,删掉 .turn-collapse__head CSS
  • i18n — 添加 tool.readCount / tool.searchCount 键值对
  • SettingsPanel — 修复 displayMode 状态未实时同步的问题

涉及文件(9 个)

文件 类型
styles.css 核心:样式统一 + shimmer 动效
ToolCard.tsx 恢复折叠箭头 + data-running + 截断
Message.tsx 箭头改 ChevronRight + data-running
Transcript.tsx 复用 reasoning__head
en.ts, zh.ts i18n 清理/补充
SettingsPanel.tsx displayMode 实时同步修复
.gitignore 增加忽略个人规划文档

wufengfan added 11 commits June 10, 2026 20:40
…al) with turn collapsing

Add a new 'Transcript display mode' setting in Settings > General with
three modes that control how the main chat area renders model-generated
intermediate items (tool calls, reasoning, phase switches):

- Standard: all items rendered as-is, but notices now shown as compact
  text lines instead of ProcessCards. All tool cards default folded
  (including shell).

- Compact: each turn's intermediate items (tools, reasoning, phase) are
  collapsed behind a single 'Processed Ns >' line. Click to expand and
  see the Standard view for that turn.

- Minimal: same collapsed line as Compact, but expanding only shows
  writer tools (write_file, edit_file, etc.) and intermediate assistant
  messages — read-only tools, shell, reasoning, and phase cards are
  filtered out.

Implementation layers:
- Go: DesktopConfig.DisplayMode field + getter/setter + IPC handler
  SetDisplayMode (UI-only, no rebuild)
- TS types: displayMode field on SettingsView + DisplayMode type + lib
- Bridge: SetDisplayMode IPC + mock
- UI: segmented button in Settings > General with localStorage sync
- Transcript: TurnCollapse component + segment-based hot zone rendering
  + onChange listener; NoticeCard replaced with plain .notice-line div
- ToolCard: shell body default folded (unified with other tools)
- CSS: .notice-line and .turn-collapse styles
…prefix

pnpm v11 uses 'pnpm_<key>' (not 'PNPM_CONFIG_<KEY>') for config env vars.
The transcript display mode now defaults to 'minimal' instead of
'standard'. Updated all default values across Go config layer,
TypeScript lib, bridge mock, and SettingsPanel normalizer.
…in minimal mode

- Replace turn-level segment logic with step-level grouping: each
  assistant + its tool results is one step. Completed non-final steps
  fold into 'Processed' lines. The currently running step shows items
  normally. The final answer renders as-is.
- In minimal mode, expanded TurnCollapse strips reasoning from
  intermediate assistant messages.
- Standard mode unaffected.
- User messages are included as their own groups in step groups for
  correct rendering in both modes.
Instead of rendering one 'Processed' line per step, consecutive
completed non-final steps are batched into a single TurnCollapse
component. The batch is flushed before rendering the final answer
or an active (streaming) step.
A new assistant message appearing in items marks the end of the
previous step (regardless of streaming state). This ensures
completed steps are folded immediately when the next step begins,
and the last non-streaming assistant is correctly identified as
the final answer.
…next message

When a new user message appears, the previous turn's last assistant
group must be marked as isFinal=true if it's a non-streaming text
response. Previously it was always isFinal=false, causing the final
answer of completed turns to be folded into 'Processed'.
Read-only tools (read_file, grep, ls, etc.) now render during execution
so the user sees progress, then are removed from the DOM after completion
(including errors and failures). This keeps the transcript focused on
writer tools and model responses.
… and compaction cards

Replace ProcessCard-based card rendering with lightweight inline elements:

- ToolCard: replaces ProcessCard with button-based head row + collapsible body,
  removes processState/processTone helpers. Uses simple text status icons.
- Reasoning: collapses thinking block using native useState + ChevronDown toggle
  instead of ProcessCard. Removes ProcessStatusIcon dependency.
- PhaseCard: single inline div with icon + text.
- CompactionCard: button-based toggle with chevron, pure text content.

All cards now have no card background/border/shadow — they blend into the
transcript background, matching Kun's lightweight inline style.
…read vs search counts

- New ReadOnlyBatch component: folds consecutive read-only tools (read_file,
  grep, ls, glob, web_fetch) under a parent line showing 'Read N files ·
  Search N files' counts, using same chevron-fold style as TurnCollapse
- ReadOnlyBatch default open during execution so user sees progress;
  collapses to summary line after review
- ToolCard quiet mode no longer hides completed tools (visibility managed
  by parent batch or step folding)
- Read (read_file, ls) and search (grep, glob, web_fetch) tools are
  counted separately in the batch header
- i18n: tool.readCount, tool.searchCount in en/zh
…animation

- Remove card backgrounds, borders, shadows from .tool and .process-card
- Unify .tool__head, .readonly-batch__head, .turn-collapse__head into .reasoning__head
- ToolCard: restore collapsible chevron, add data-running, disable summarize display
- ToolCard: wrap name+subject in tool__label-group with 70% max-width truncation
- Reasoning arrow: use ChevronRight + rotate 90deg for consistency
- ReadOnlyBatch: reuse reasoning__head/chevron classes
- TurnCollapse: remove chevron icon, reuse reasoning__head
- Add shimmer-sweep animation: diagonal highlight sweeps across running items
- i18n: add tool.readCount/tool.searchCount, remove trailing > from processedDuration
- SettingsPanel: use live displayMode state from getDisplayMode/onDisplayModeChange
@github-actions github-actions Bot added v2 Go rewrite (1.x) — main-v2 branch, active development desktop Wails desktop app (desktop/**) config Configuration & setup (internal/config) labels Jun 11, 2026
wufengfan added 2 commits June 11, 2026 10:39
… displayMode + checkUpdates

Both branches independently added fields near each other:
- feat/unify-process-card-style: DisplayMode (transcript display mode)
- upstream/main-v2: CheckUpdates (startup update check)

Resolved by keeping both in all conflict sites.
@esengine

Copy link
Copy Markdown
Owner

main-v2 absorbed a large batch of merges today and this branch now conflicts. Could you rebase onto the latest main-v2? The change itself is still wanted — once it's green I'll review promptly (fork CI gets approved as soon as you push).

@esengine

Copy link
Copy Markdown
Owner

Specifics so the rebase round covers everything (the direction is good and this is close to merge):

  1. flushCollapseBatch fabricates the duration — collapseBatch.length * 1500 — so "Processed Ns" shows an invented number. Items carry real durationMs; sum those, or drop the number from the label.
  2. quiet = item.readOnly && !hasNested lost the old status guard — failed read-only calls now render quiet. Restore the error/stopped exception.
  3. Revert the dev-script env rename (PNPM_CONFIG_* → lowercase names pnpm doesn't read — it likely re-breaks whatever the vars fixed) and the .gitignore/dist/.gitkeep hunks; all unrelated.
  4. Display mode has two sources of truth: the frontend reads localStorage while SetDisplayMode persists to reasonix.toml — a fresh machine with toml set gets ignored. Hydrate from settings on boot (we've been bitten by cross-process config drift before).

Also coordinate with #3733 — its show-tool-calls toggle overlaps your display modes in SettingsPanel/Transcript; it's first in line, so please rebase over it once it lands.

@esengine

Copy link
Copy Markdown
Owner

Rather than make you churn through the conflict resolution, I've rebased this onto current main-v2 and landed the review items in #3991 — your commits' design and implementation are carried over intact and the PR is authored under your name.

On top of the rebase it picks up the four review points (real summed durations in the collapse label, the error/stopped guard on quiet read-only calls, dropping the unrelated dev/.gitignore hunks, and hydrating display mode from reasonix.toml at boot), plus keeps main-v2's new expandThinking setting alongside your displayMode.

Once #3991 is green it'll merge and this PR will close with it. Thanks for the work here — the unified fold lines and shimmer treatment are a real upgrade to the transcript.

@CVEngineer66 CVEngineer66 deleted the feat/unify-process-card-style branch June 11, 2026 10:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

config Configuration & setup (internal/config) desktop Wails desktop app (desktop/**) v2 Go rewrite (1.x) — main-v2 branch, active development

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants