feat(ui): system prompt collapsable bubble with Markdown rendering#31
Merged
Killea merged 3 commits intoKillea:mainfrom Mar 3, 2026
Merged
feat(ui): system prompt collapsable bubble with Markdown rendering#31Killea merged 3 commits intoKillea:mainfrom
Killea merged 3 commits intoKillea:mainfrom
Conversation
…I-06) Fix: system prompt (seq=0) was rendered via textContent, bypassing the Markdown renderer entirely. All ## headings, **bold**, lists etc. were displayed as raw text. Changes: - index.html: appendBubble() separates seq=0 (system prompt) from other system events. seq=0 renders a collapsable accordion using renderMessageContent() for proper Markdown support. Header label shows "click to expand" hint when collapsed. Other system events (seq>0) keep the existing centered pill unchanged. - main.css: new .msg-sys-prompt family inheriting the exact amber palette of .msg-sys-event (bg rgba(245,158,11,.07), border .18, color #fbbf24, italic, border-radius 20px). Body has max-height 320px + overflow-y auto. Custom thin amber scrollbar (4px, webkit + scrollbar-width:thin). Expanded by default; click header to collapse/expand with aria-expanded. Light theme variant included. - frontend/__tests__/system-prompt-bubble.test.js: 7 Vitest tests covering render type, Markdown output, default state, toggle collapse with label update, toggle expand with label restore, regression for non-zero seq events, and deduplication. All 58 tests pass.
… from wrapper The overflow:hidden + border-radius combo on the wrapper div was clipping the collapsable bubble, making it appear as a thin amber line instead of a proper header. Fix by: - Moving border-radius to header/body elements directly - Removing overflow:hidden from the wrapper - Adding is-expanded class for rounded-top corners on expanded state - Increasing header background opacity and min-height for visibility - Adding border-radius 0 0 20px 20px to body for rounded-bottom corners Tests: all 58 passing
bertheto
force-pushed
the
feat/system-prompt-ux
branch
from
c6c0228 to
bf6972f
Compare
- Integrated system prompt collapsable bubble (seq=0) with admin_switch_confirmation_required feature - Added CSS styles for .msg-sys-prompt family - Resolved merge conflict between PR Killea#31 and main branch's new admin switch card feature
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
2 participants
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.
Summary
The system prompt (injected at
seq=0) was rendered as a plain-text centered pill, making it unreadable for long or structured prompts.This PR adds a collapsable bubble with Markdown rendering, keeping visual consistency with the existing system event style (amber palette).
Changes
src/static/index.htmlappendBubble(): new rendering path forseq=0system messagesdiv.msg-sys-promptwith:msg-sys-prompt-header) witharia-expanded+.is-expandedclassmsg-sys-prompt-body bubble-v2) rendered viarenderMessageContent()for Markdownaria-expanded,.is-expanded,.collapsed, chevron direction, and label textseqsystem events continue rendering as centered pills (unchanged)src/static/css/main.css.msg-sys-prompt,.msg-sys-prompt-header,.msg-sys-prompt-chevron,.msg-sys-prompt-body,.msg-sys-prompt-body.collapsed.msg-sys-event(rgba(245,158,11,...),#fbbf24)max-height: 320px+overflow-y: autoon body with thin amber custom scrollbarborder-radiuson header/body (not wrapper) to avoidoverflow:hiddenclipping bug.is-expandedtogglesborder-radius: 20px 20px 0 0on headerbubble-v2headings/strong in amber colorfrontend/src/__tests__/system-prompt-bubble.test.js(new file)h2,strong)aria-expanded=true,.is-expanded)aria-expanded=false,.is-expandedremoved,.collapsedadded, label updatedseq=0ignoredTest plan
npx vitest run)?theme=light): amber palette maintained