Skip to content

fix(chat): improve agent code block contrast#277

Closed
musnows wants to merge 1 commit into
KunAgent:developfrom
musnows:codex/fix-agent-code-block-contrast
Closed

fix(chat): improve agent code block contrast#277
musnows wants to merge 1 commit into
KunAgent:developfrom
musnows:codex/fix-agent-code-block-contrast

Conversation

@musnows

@musnows musnows commented Jun 13, 2026

Copy link
Copy Markdown
Collaborator

中文

改动

  • 为 Agent Markdown 的纯文本 fenced code block 增加独立的 ds-plain-code-block 样式类,避免目录树、纯文本片段看起来像普通正文。
  • 为普通 pre、高亮代码块和纯文本代码块统一增强背景、边框和内阴影。
  • 增加跨主题的 --ds-code-block-bg,让明暗主题和 ikun 主题下代码块都有明确底色。
  • 补充 StreamdownCode 单测断言,确保纯文本 fenced block 保留代码块视觉类。

原因

Agent 输出无语言代码块或纯文本代码块时,之前会按普通文本块渲染,在深色聊天背景下缺少明确代码块边界。

验证

  • npm run test -- src/renderer/src/components/chat/StreamdownCode.test.ts
  • npm run typecheck
  • git diff --check
  • npm run dist:mac:arm64
  • 解压 dist/Kun-0.1.0-mac-arm64.zip 并从 dist/Kun-0.1.0-mac-arm64-unzipped/Kun.app 启动 packaged app
  • curl http://127.0.0.1:8899/health 返回 {"status":"ok","service":"kun","mode":"serve"}
  • packaged app.asar 中确认包含 ds-plain-code-block--ds-code-block-bg

English

Changes

  • Adds a dedicated ds-plain-code-block class for plain-text fenced blocks rendered by Agent Markdown, so directory trees and plain text snippets no longer blend into prose.
  • Strengthens the background, border, and inset highlight for native pre, highlighted code blocks, and plain-text code blocks.
  • Adds theme-level --ds-code-block-bg values so code blocks have a distinct surface across light, dark, and ikun themes.
  • Extends the StreamdownCode test coverage for plain-text fenced blocks.

Why

Plain-text fenced blocks previously rendered like normal text, which made Agent code blocks hard to identify on dark chat backgrounds.

Validation

  • npm run test -- src/renderer/src/components/chat/StreamdownCode.test.ts
  • npm run typecheck
  • git diff --check
  • npm run dist:mac:arm64
  • Unzipped dist/Kun-0.1.0-mac-arm64.zip and launched packaged app from dist/Kun-0.1.0-mac-arm64-unzipped/Kun.app
  • curl http://127.0.0.1:8899/health returned {"status":"ok","service":"kun","mode":"serve"}
  • Confirmed packaged app.asar contains ds-plain-code-block and --ds-code-block-bg

@musnows musnows marked this pull request as ready for review June 13, 2026 23:18
@XingYu-Zhong

Copy link
Copy Markdown
Collaborator

感谢提交此 PR!

该 PR 与 PR #279(文件树预览面板,+1422 行)存在 CSS 文件冲突,暂时无法直接合入:

冲突文件

本 PR 本身质量没有问题,属于 CSS 视觉优化 bugfix,建议:

方案 A(推荐):先合入本 PR

本 PR 体积小(+26/-7),是纯 CSS bugfix,优先于大型功能 PR 合入更合理。
请联系 maintainer 安排在 PR #279 之前处理本 PR。

方案 B:等 PR #279 合入后 rebase

  1. 等待 PR feat(workspace): add file tree preview panel #279 合入 develop
  2. git fetch origin && git rebase origin/develop
  3. base-shell.css 中重新应用 --ds-code-block-bg 变量定义(各主题区块)
  4. markdown-code.css 中重新应用 .ds-plain-code-block 样式
  5. 重新提交

暂时关闭此 PR,如希望优先处理请告知,我们可以调整合入顺序。感谢你的贡献!🙏

@XingYu-Zhong

Copy link
Copy Markdown
Collaborator

关闭此 PR,待 rebase 解决冲突后欢迎重新提交。

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.

2 participants