web: improve system message display + add systemMessages verbosity level#11
Merged
Conversation
System messages in the chat were all rendered as a centered pill, which looks bad for long content (spawn errors with stack traces, forwarded steer text). They were also always visible at every verbosity level. Rendering (Chat.tsx): - Classify system messages as error / notice / debug. - error → alert card with left border; long content collapses into a one-line summary + expandable body (stack traces no longer overflow). - notice → short stays a pill; long becomes a centered collapsible one-liner. - debug → same as notice but muted. Verbosity (shared/display.ts): - New `systemMessages` ToolVisibility on DisplayConfig + presets (minimal/summary: off, detail: summary, debug: detail). - `classifySystemMessage` + `shouldShowSystemMessage` helpers. - Errors ALWAYS show regardless of the setting, so failures are never hidden; notices show at summary+, debug-class only at detail. - Chat filtering honors the setting; DisplaySettings gains a "System messages" selector. Tests: classification + visibility unit tests (shared), system message rendering/gating tests (web). Full server suite 838 passing, web 132 passing, no new lint errors. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR improves how system chat messages are displayed in the web UI (avoiding oversized “pill” rendering for long operational messages) and introduces a new DisplayConfig.systemMessages verbosity level (off/summary/detail) in the shared display configuration to gate non-error system chatter while keeping failures always visible.
Changes:
- Web: Add a dedicated
SystemMessagerenderer that classifies system messages and uses collapsible layouts for long content; integrate config-based gating into chat rendering. - Shared: Extend
DisplayConfigwithsystemMessages, addclassifySystemMessage()/shouldShowSystemMessage(), and wire the field into presets + config validation/merge. - Tests: Add unit tests for classification/visibility (server) and rendering/gating behavior (web).
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/web/src/pages/Chat.tsx | Adds SystemMessage rendering + config gating for system messages in the main chat feed. |
| packages/web/src/components/DisplaySettings.tsx | Adds a “System messages” visibility selector to the display settings dialog. |
| packages/web/src/tests/Chat.test.tsx | Adds coverage for system message gating and long-error collapsible rendering. |
| packages/shared/src/display.ts | Introduces systemMessages in DisplayConfig, presets, validation/merge, plus system message classification + visibility helpers. |
| packages/server/tests/display/display.test.ts | Adds tests for the new shared system message helpers and preset defaults. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Chat.tsx: fix emoji-stripping regex in the error summary header so it consumes the U+FE0F variation selector (and repeated emoji), preventing a stray combining character at the start of "⚠️ "-prefixed summaries. - display.ts: reword the systemMessages JSDoc to describe only the gating contract enforced by shouldShowSystemMessage; layout (pill vs collapsible) is documented as a renderer concern, not part of the shared contract. - display.ts: classifySystemMessage now scans the WHOLE message for failure keywords (failed/failure/error/exception/stack trace/panic/crash) instead of only the first 80 chars, so a failure keyword appearing after a prefix line still classifies as 'error' and is always shown. A failure keyword now also wins over the DM/scout debug heuristics. Tests: added cases for late failure keywords and failure-keyword DMs. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题
聊天里的 System Message 全部用一个居中的圆角 pill 渲染。内容短还行，但长内容（spawn 失败的报错 + stack trace、转发给 agent 的整段 steer 文本）塞进 pill 就变成又宽又丑的一坨。而且系统消息在所有详细程度下都无条件显示，没有 off/summary/detail 分级。
改动
1. 渲染改造（
Chat.tsx）按内容分类后分流渲染（新增
SystemMessage组件）：⚠️/❌/🛑开头或含 "failed"[scout]/orchestrator 内部2. 详细程度（
shared/display.ts）DisplayConfig新增systemMessages(off/summary/detail)，并接入四个预设：off，detail →summary，debug →detailclassifySystemMessage()和shouldShowSystemMessage()helper。DisplaySettings新增 "System messages" 选择器。各类信息 × 模式 显示表
thinkingtoolCallsflightdeckToolsagentMessagessystemMessagessystemMessages测试
display.test.ts，+8 用例）Chat.test.tsx，+3 用例）