ui: highlight WebChat code blocks by spacegeologist · Pull Request #83569 · openclaw/openclaw

spacegeologist · 2026-05-18T10:57:47Z

Summary

Add highlight.js to the Control UI markdown renderer using the core highlighter plus a bounded set of common chat/code languages.
Highlight explicit fenced languages and high-confidence unlabeled code blocks while preserving copy buttons, language labels, JSON collapse, markdown caching, and HTML escaping.
Add theme-aware token styles and regression tests for highlighted JS, collapsed JSON, unlabeled C++, escaped HTML code, and the generated WebChat code-block CSS scope.

Verification

OPENCLAW_VITEST_MAX_WORKERS=1 OPENCLAW_VITEST_NO_OUTPUT_TIMEOUT_MS=60000 node scripts/run-vitest.mjs run --config test/vitest/vitest.ui.config.ts ui/src/ui/markdown.test.ts ui/src/styles/components.test.ts
./node_modules/.bin/tsgo --noEmit --project test/tsconfig/tsconfig.test.ui.json
COREPACK_HOME=/private/tmp/corepack /usr/local/bin/corepack pnpm exec oxfmt --check --threads=1 ui/src/ui/markdown.ts ui/src/ui/markdown.test.ts ui/src/types/highlight-js-subpaths.d.ts ui/src/styles/components.css ui/src/styles/components.test.ts
../node_modules/.bin/vite build from ui/
COREPACK_HOME=/private/tmp/corepack /usr/local/bin/corepack pnpm build
git diff --check -- ui/src/ui/markdown.ts ui/src/ui/markdown.test.ts ui/src/types/highlight-js-subpaths.d.ts ui/src/styles/components.css ui/src/styles/components.test.ts ui/package.json pnpm-lock.yaml
OPENCLAW_ADDITIONAL_BOUNDARY_SHARD=1/4 OPENCLAW_ADDITIONAL_BOUNDARY_CONCURRENCY=4 node scripts/run-additional-boundary-checks.mjs

Real behavior proof

Behavior addressed: WebChat markdown code blocks now render syntax-highlight token markup for explicit languages and confident auto-detected unlabeled blocks, while existing code-block chrome still exposes the original text for copy actions.

Real environment tested: macOS local OpenClaw checkout on Node v24.13.1, branch fix/webchat-code-syntax-highlighting, using the Control UI markdown renderer with a jsdom browser DOM and a Chrome local renderer proof page generated from this PR head.

Exact steps or command run after this patch: Ran a live Control UI markdown renderer probe with node --import tsx --input-type=module, created a jsdom browser DOM, imported ./ui/src/ui/markdown.ts, rendered C++ and HTML fenced blocks with toSanitizedMarkdownHtml, and queried the resulting DOM. Also opened a local proof page generated from this PR head (7bb95c47ed) using toSanitizedMarkdownHtml output plus the current components.css.

Evidence after fix: Terminal output from the renderer probe:

code blocks: 2
cpp has hljs keyword: true
cpp text: #include <vector>
std::vector<int> nums;
html script element count inside code: 0
copy payload: #include <vector>
std::vector<int> nums;

Observed result after fix: The actual renderer output contained hljs token markup for the C++ block, preserved the copy payload as the original plain text, and kept the HTML script sample as inert code text with 0 script elements inside the rendered code block.

Manual WebChat browser proof after selector fix: The screenshot shows fenced TypeScript and C++ code blocks with visible syntax-highlight colors under the generated .code-block-wrapper pre code.hljs DOM path. I clicked a Copy button, and it changed to Copied!, confirming the existing copy-button state still works while highlighted code remains visible.

OpenClaw WebChat syntax highlighting proof showing highlighted TypeScript and C++ code blocks

What was not tested: A full authenticated Gateway/WebChat session against a live model was not tested. The browser proof used a local renderer proof page generated from this PR head with the same toSanitizedMarkdownHtml output and components.css, plus the renderer probe above verified the DOM and copy payload.

AI assistance

AI-assisted with Codex. I reviewed the implementation and understand the code path and validation above.

github-actions · 2026-05-18T10:57:59Z

Dependency Changes Detected

This PR changes dependency-related files. Maintainers should confirm these changes are intentional.

Changed files:

pnpm-lock.yaml
ui/package.json

Maintainer follow-up:

Review whether the dependency changes are intentional.
Inspect resolved package deltas when lockfile or workspace dependency policy changes are present.
Run pnpm deps:changes:report -- --base-ref origin/main --markdown /tmp/dependency-changes.md --json /tmp/dependency-changes.json locally for detailed release-style evidence.

clawsweeper · 2026-05-18T10:58:48Z

Codex review: passed.

Workflow note: Future ClawSweeper reviews update this same comment in place.

How this review workflow works

ClawSweeper keeps one durable marker-backed review comment per issue or PR.
Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
Maintainers can also comment @clawsweeper review to request a fresh review only.
Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

Summary
The PR adds highlight.js-backed WebChat code-block highlighting, scoped token CSS, regression tests, a type shim, and a direct UI dependency.

Reproducibility: not applicable. as a bug reproduction; this is a feature addition. The feature gap is source-evident because current main renders code blocks as escaped plaintext without hljs token markup.

PR rating
Overall: 🐚 platinum hermit
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🐚 platinum hermit
Summary: Good normal merge-ready signal: the implementation is focused, proof is direct, and this review found no blocking findings.

Rank-up moves:

none

What the crustacean ranks mean

🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

PR egg
✨ Hatched: 🥚 common Clockwork Shellbean

       /\  .---.  /\         
      /  \/     \/  \        
     /   ( -   - )   \       
    |       ._.       |      
    |   /|  ===  |\   |      
     \  \|______/|/  /       
      '._  `--'  _.'         
         '-.__.-'            
       _/|_|  |_|\_          
      /__|      |__\         
       .-----------.         
      '-------------'

Rarity: 🥚 common.
Trait: hums during re-review.
Share on X: post this hatch
Copy: My PR egg hatched a 🥚 common Clockwork Shellbean in ClawSweeper.

What is this egg doing here?

Eggs appear after the PR passes real-behavior proof. It is here for vibes, not verdicts: it does not change labels, ratings, merge decisions, or automation.
The shell reacts to review momentum: open follow-up work warms it up, re-review makes it wobble, and a clean final review lets it hatch.
How to hatch it: reach status: 👀 ready for maintainer look or status: 🚀 automerge armed; that usually means sufficient real-behavior proof, no blocking P0/P1/P2 findings, no security attention needed, and clean correctness.
The hatch is seeded from this repository and PR number, so the same PR keeps the same creature; the reviewed head SHA can only change safe visual details.
Rarity is just collectible sparkle: 🥚 common, 🌱 uncommon, 💎 rare, ✨ glimmer, and 🌈 legendary.

Real behavior proof
Sufficient (screenshot): The PR body supplies terminal DOM proof plus an inspected screenshot showing highlighted TypeScript/C++ code blocks and copy-button state after the fix.

Mantis proof suggestion
A maintainer-requested visual lane could independently verify the browser WebChat rendering path, though the supplied screenshot and terminal proof are already sufficient for this review. A maintainer can ask Mantis to capture proof by posting a new PR comment that starts with the OpenClaw Mantis account mention, followed by:

visual task: verify WebChat renders TypeScript and C++ code blocks with syntax highlighting and copy-button copied state.

Next step before merge
No repair lane is needed; review findings are empty and the existing automerge flow can gate the exact head on CI, dependency review, and mergeability.

Security
Cleared: No concrete security or supply-chain blocker found; highlighted HTML remains sanitizer-filtered and the direct dependency pins an already-resolved transitive package version.

Review details

Best possible solution:

Land this PR after the exact-head CI and dependency gate completes, keeping highlighting inside the sanitized WebChat markdown renderer with the bounded language set.

Do we have a high-confidence way to reproduce the issue?

Not applicable as a bug reproduction; this is a feature addition. The feature gap is source-evident because current main renders code blocks as escaped plaintext without hljs token markup.

Is this the best way to solve the issue?

Yes. The renderer-level highlight.js integration is the narrow maintainable solution because it preserves DOMPurify, markdown caching, copy buttons, language labels, and JSON collapse behavior.

Label justifications:

P2: This is a focused user-visible WebChat improvement with limited blast radius and a direct dependency change that still deserves normal maintainer review.

What I checked:

Current main lacks syntax highlighting: The current renderer escapes fenced and indented code as plaintext inside code tags, preserving language classes and copy buttons but emitting no hljs token markup. (ui/src/ui/markdown.ts:430, 46c622aa3b35)
PR renderer implementation: The PR head registers bounded highlight.js languages, highlights explicit languages, auto-highlights confident unlabeled blocks, and falls back to escaped plaintext on unsupported or malformed input. (ui/src/ui/markdown.ts:169, 7bb95c47edd4)
PR preserves existing code-block chrome: The changed fence and code_block renderers keep the existing copy button, language label, JSON collapse behavior, and sanitized output path while replacing only the code HTML body with highlighted markup. (ui/src/ui/markdown.ts:522, 7bb95c47edd4)
PR CSS targets generated DOM: The highlight token styles target both legacy .code-block .hljs and the markdown renderer's .code-block-wrapper pre code.hljs path, including light-theme overrides. (ui/src/styles/components.css:2007, 7bb95c47edd4)
Regression coverage: The PR adds tests for highlighted JavaScript, collapsed JSON, confident unlabeled C++, escaped HTML code, preserved copy text, and CSS selector coverage. (ui/src/ui/markdown.test.ts:360, 7bb95c47edd4)
Dependency contract: highlight.js 10.7.3 types and source expose highlight, highlightAuto, registerLanguage, registerAliases, and getLanguage with the options shape used by the PR.

Likely related people:

steipete: Current main's code-block renderer, copy-button chrome, JSON collapse path, and related CSS blame to Peter Steinberger's c32878d commit. (role: recent area contributor; confidence: high; commits: c32878d1b7fc, d57cb2e1a88e, e083f678fdfb; files: ui/src/ui/markdown.ts, ui/src/styles/components.css, ui/src/ui/markdown.test.ts)
Val Alexander: Git history shows substantial recent Control UI and markdown-rendering work, including the markdown-it migration and broad UI styling changes near this surface. (role: adjacent UI/markdown contributor; confidence: medium; commits: 9315302516fb, a710366e9ece, 40ab39b5ea6a; files: ui/src/ui/markdown.ts, ui/src/styles/components.css)
Takhoffman: Recent UI commits touch nearby Control UI behavior, and this PR has an explicit automerge request from Takhoffman in the discussion. (role: recent UI contributor and review signal; confidence: low; commits: f32f7d0809b0, 77c3b142a966; files: ui/src/styles/components.css, ui/src/ui/markdown.ts)

Codex review notes: model gpt-5.5, reasoning high; reviewed against 46c622aa3b35.

spacegeologist · 2026-05-18T10:59:35Z

Dependency-change follow-up: this dependency update is intentional. highlight.js is used directly by the Control UI markdown renderer, and the lockfile already had highlight.js@10.7.3 resolved transitively. I ran COREPACK_HOME=/private/tmp/corepack /usr/local/bin/corepack pnpm deps:changes:report -- --base-ref upstream/main --markdown /private/tmp/dependency-changes.md --json /private/tmp/dependency-changes.json; it reported 0 added, 0 removed, 0 changed resolved packages and 2 dependency file changes.

spacegeologist · 2026-05-18T11:44:30Z

The selector/DOM mismatch was fixed in 7bb95c4 by targeting the generated .code-block-wrapper pre code.hljs path. The PR body now includes manual browser proof with visible syntax-highlight colors and a copied-state button, plus the required What was not tested field. CI and real behavior proof are green on the latest head.

Takhoffman · 2026-05-18T16:44:21Z

@clawsweeper automerge

clawsweeper · 2026-05-18T16:46:23Z

🦞✅
ClawSweeper merged this PR after the passing review.

Source: clawsweeper[bot]
Feedback: structured ClawSweeper verdict: pass (sha=7bb95c47edd4cd27037da33dda85de5ae72948f4)
Merge status: merged by ClawSweeper automerge
Merged at: 2026-05-18T16:53:25Z
Merge commit: 1fbb4e4e6a9e

What merged:

The PR adds highlight.js-backed WebChat code-block highlighting, scoped token CSS, regression tests, a type shim, and a direct UI dependency.
Reproducibility: not applicable. as a bug reproduction; this is a feature addition. The feature gap is source-evident because current main renders code blocks as escaped plaintext without hljs token markup.

Automerge notes:

No ClawSweeper repair was needed after automerge opt-in.

The automerge loop is complete.

Automerge progress:

2026-05-18 16:46:22 UTC review queued 7bb95c47edd4 (queued)

2026-05-18 16:53:10 UTC review passed 7bb95c47edd4 (structured ClawSweeper verdict: pass (sha=7bb95c47edd4cd27037da33dda85de5ae7294...)

2026-05-18 16:53:29 UTC merged 7bb95c47edd4 (merged by ClawSweeper automerge)

Summary: - The PR adds highlight.js-backed WebChat code-block highlighting, scoped token CSS, regression tests, a type shim, and a direct UI dependency. - Reproducibility: not applicable. as a bug reproduction; this is a feature addition. The feature gap is source-evident because current main renders code blocks as escaped plaintext without hljs token markup. Automerge notes: - No ClawSweeper repair was needed after automerge opt-in. Validation: - ClawSweeper review passed for head 7bb95c47edd4cd27037da33dda85de5ae72948f4. - Required merge gates passed before the squash merge. Prepared head SHA: 7bb95c47edd4cd27037da33dda85de5ae72948f4 Review: openclaw/openclaw#83569 (comment) Co-authored-by: zhengzuo0-ai <zheng.zuo0@gmail.com> Co-authored-by: clawsweeper[bot] <274271284+clawsweeper[bot]@users.noreply.github.com> Approved-by: takhoffman Co-authored-by: takhoffman <781889+takhoffman@users.noreply.github.com>

Summary: - The PR adds highlight.js-backed WebChat code-block highlighting, scoped token CSS, regression tests, a type shim, and a direct UI dependency. - Reproducibility: not applicable. as a bug reproduction; this is a feature addition. The feature gap is source-evident because current main renders code blocks as escaped plaintext without hljs token markup. Automerge notes: - No ClawSweeper repair was needed after automerge opt-in. Validation: - ClawSweeper review passed for head 7bb95c4. - Required merge gates passed before the squash merge. Prepared head SHA: 7bb95c4 Review: openclaw#83569 (comment) Co-authored-by: zhengzuo0-ai <zheng.zuo0@gmail.com> Co-authored-by: clawsweeper[bot] <274271284+clawsweeper[bot]@users.noreply.github.com> Approved-by: takhoffman Co-authored-by: takhoffman <781889+takhoffman@users.noreply.github.com>

github-actions Bot added the dependencies-changed PR changes dependency-related files label May 18, 2026

openclaw-barnacle Bot added app: web-ui App: web-ui size: M triage: mock-only-proof Candidate: PR proof only shows tests, mocks, snapshots, lint, typecheck, or CI. labels May 18, 2026

clawsweeper Bot added rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. labels May 18, 2026

openclaw-barnacle Bot added proof: supplied External PR includes structured after-fix real behavior proof. and removed triage: mock-only-proof Candidate: PR proof only shows tests, mocks, snapshots, lint, typecheck, or CI. labels May 18, 2026

spacegeologist force-pushed the fix/webchat-code-syntax-highlighting branch from 6f85023 to c6dc90b Compare May 18, 2026 11:10

clawsweeper Bot added the P2 Normal backlog priority with limited blast radius. label May 18, 2026

ui: highlight webchat code blocks

7bb95c4

spacegeologist force-pushed the fix/webchat-code-syntax-highlighting branch from c6dc90b to 7bb95c4 Compare May 18, 2026 11:31

clawsweeper Bot added the clawsweeper:automerge Maintainer opted this PR into bounded ClawSweeper-reviewed automerge label May 18, 2026

clawsweeper Bot added status: 🚀 automerge armed This PR is in ClawSweeper's automerge lane. and removed status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. labels May 18, 2026

clawsweeper Bot merged commit 1fbb4e4 into openclaw:main May 18, 2026
152 of 166 checks passed

github-actions Bot mentioned this pull request May 18, 2026

📡 Upstream Digest — 2026-05-18 17:53 UTC curtismercier/openclaw-mods#891

Open

clawsweeper Bot mentioned this pull request May 24, 2026

fix(ui): preserve user code block rendering #85942

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

ui: highlight WebChat code blocks#83569

ui: highlight WebChat code blocks#83569
clawsweeper[bot] merged 1 commit into
openclaw:mainfrom
spacegeologist:fix/webchat-code-syntax-highlighting

spacegeologist commented May 18, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 18, 2026

Uh oh!

clawsweeper Bot commented May 18, 2026 •

edited

Loading

Uh oh!

spacegeologist commented May 18, 2026

Uh oh!

spacegeologist commented May 18, 2026

Uh oh!

Takhoffman commented May 18, 2026

Uh oh!

clawsweeper Bot commented May 18, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

spacegeologist commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Verification

Real behavior proof

AI assistance

Uh oh!

github-actions Bot commented May 18, 2026

Dependency Changes Detected

Uh oh!

clawsweeper Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

spacegeologist commented May 18, 2026

Uh oh!

spacegeologist commented May 18, 2026

Uh oh!

Takhoffman commented May 18, 2026

Uh oh!

clawsweeper Bot commented May 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

spacegeologist commented May 18, 2026 •

edited

Loading

clawsweeper Bot commented May 18, 2026 •

edited

Loading

clawsweeper Bot commented May 18, 2026 •

edited

Loading