feat(ui): unify process/tool/reasoning card style with shimmer sweep animation#3913
feat(ui): unify process/tool/reasoning card style with shimmer sweep animation#3913CVEngineer66 wants to merge 13 commits into
Conversation
…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
… 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.
|
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). |
|
Specifics so the rebase round covers everything (the direction is good and this is close to merge):
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. |
60a9cbf to
938596d
Compare
|
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 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. |
Transcript 展示样式统一化 + 执行动效
改动内容
1. 视觉统一(去卡片化)
之前工具调用、思考过程、步骤折叠各有不同的卡片样式(背景、边框、圆角),视觉上显得杂乱。统一为最小化的行内文本样式:
.tool、.process-card— 去掉background、border、border-radius、box-shadow,和对话栏背景完全融合.reasoning__head样式,行为一致2. 折叠箭头统一
ChevronDown改为ChevronRight+ CSSrotate(90deg),和其他折叠线行为一致>字符,改用和思考过程相同的图标3. 长命令文本截断
.tool__head从inline-flex改为flex+overflow: hiddentool__label-group内,最大宽度 70%,超出用省略号截断4. 执行中动效(shimmer sweep)
正在执行的工具或思考过程,文字上有斜向高亮带匀速扫过(5s / 次),表示仍在运行:
background-clip: text),不产生块状背景5. 其他清理
summarize调用(不再显示"11 个文件"等摘要),恢复可折叠的折叠箭头.reasoning__head/.reasoning__chevron,删掉独立 CSS.reasoning__head,删掉.turn-collapse__headCSStool.readCount/tool.searchCount键值对涉及文件(9 个)
styles.cssToolCard.tsxMessage.tsxTranscript.tsxen.ts,zh.tsSettingsPanel.tsx.gitignore