Skip to content

UI: render half-block QR output in web chat#93869

Merged
vincentkoc merged 1 commit into
mainfrom
clownfish/repair-51868-qr-rendering
Jun 29, 2026
Merged

UI: render half-block QR output in web chat#93869
vincentkoc merged 1 commit into
mainfrom
clownfish/repair-51868-qr-rendering

Conversation

@vincentkoc

@vincentkoc vincentkoc commented Jun 17, 2026

Copy link
Copy Markdown
Member

Summary

  • Replaces the uneditable source branch from UI: fix half-block art rendering for UTF-8 QR codes in web chat #51868 with a narrow implementation of the same user-facing fix.
  • Detects UTF-8 half-block QR/block art and renders it with tight line-height, stable foreground/background colors, and horizontal overflow behavior that does not clip wide QR blocks.
  • Covers raw tool/sidebar output and regular chat markdown so QR text does not need pre-existing triple backticks.
  • Preserves leading/trailing QR quiet-zone whitespace when wrapping output.

Credit

This carries forward the fix idea and reproduction from @emg110 in #51868. Thanks @emg110 for the original report, implementation direction, and proof.

Review findings addressed

  • Greptile: keep half-block detection comments accurate and add sidebar pre/code font inheritance.
  • Codex: detect raw half-block text before markdown turns it into paragraphs, preserve quiet-zone padding, and avoid clipping wide QR blocks behind code-block wrapper overflow.

Validation

  • pnpm -s vitest run ui/src/ui/markdown.test.ts ui/src/ui/chat/tool-helpers.test.ts
  • pnpm check:changed
  • Codex /review must pass before opening the PR.

Notes

No CHANGELOG.md edit is included because OpenClaw release generation owns changelog entries for normal PRs.

Clownfish 🐠 replacement reef notes:

fish notes: model gpt-5.5, reasoning medium; reviewed against 6e155e3.

@vincentkoc vincentkoc added the clownfish Tracked by Clownfish automation label Jun 17, 2026
@vincentkoc vincentkoc mentioned this pull request Jun 17, 2026
Closed
20 tasks
@openclaw-barnacle openclaw-barnacle Bot added app: web-ui App: web-ui size: M maintainer Maintainer-authored PR labels Jun 17, 2026
@clawsweeper

clawsweeper Bot commented Jun 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Codex review: needs maintainer review before merge. Reviewed June 29, 2026, 1:54 AM ET / 05:54 UTC.

Summary
The PR adds web chat Markdown, sidebar, raw tool-card, CSS, clipboard, and regression-test support for rendering UTF-8 half-block QR/block art without collapsing whitespace.

PR surface: Source +181, Tests +201. Total +382 across 14 files.

Reproducibility: yes. source-reproducible: current main lacks half-block QR detection/styles while the linked source PR documents before/after dashboard screenshots and scanning behavior. I did not run browser proof in this read-only review.

Review metrics: 2 noteworthy metrics.

  • Code-block wrapper overflow: 1 global rule changed from hidden to visible. This CSS change can affect ordinary Markdown code-block chrome outside QR output, so visual proof is maintainer-relevant.
  • QR rendering surfaces: 3 user-visible surfaces covered. The reported scanability bug involves chat Markdown, sidebar Markdown, and expanded raw tool-card output rather than one isolated renderer.

Stored data model
Persistent data-model change detected: serialized state: ui/src/ui/chat/code-block-copy-payload.ts. Confirm migration or upgrade compatibility proof before merge.

Root-cause cluster
Relationship: canonical
Canonical: #93869
Summary: This PR is the active writable replacement for the same half-block QR rendering problem originally proposed in the linked source PR.

Members:

Proposal only: this assessment does not dispatch repair, suppress jobs, mutate sibling items, close, or merge anything.

Merge readiness
Overall: 🐚 platinum hermit
Proof: 🌊 off-meta tidepool
Patch quality: 🐚 platinum hermit
Result: ready for maintainer review.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Rank-up moves:

  • [P2] Capture exact-head web UI proof for chat Markdown, sidebar Markdown, expanded raw tool-card QR output, and ordinary code-block chrome.

Mantis proof suggestion
A short browser proof would materially verify QR scanability, background color, and horizontal overflow in the user-visible web UI surfaces. A maintainer can ask Mantis to capture proof by posting this exact PR comment:

@openclaw-mantis visual task: verify half-block QR output renders with the intended background and horizontal scrolling in web chat messages, sidebar content, expanded raw tool-card details, and ordinary code blocks on this PR.

Risk before merge

  • [P1] Exact-head browser proof is still the main unresolved confidence gap because QR scanability, background color, and horizontal scrolling are visual browser behavior across chat Markdown, sidebar Markdown, and expanded raw tool-card output.
  • [P1] The PR changes the global code-block wrapper overflow from hidden to visible, so ordinary code-block chrome should be visually checked or explicitly accepted by maintainers before merge.

Maintainer options:

  1. Capture exact-head web proof (recommended)
    Show the QR output and ordinary code-block chrome on this head in the affected web UI surfaces before merge.
  2. Accept the visual CSS risk
    Maintainers may merge with source screenshots and unit coverage if they explicitly accept that browser rendering on this exact head remains unproven.
  3. Pause until source path settles
    If maintainers are not ready to own the visual behavior, keep this PR and the linked source PR open until a maintainer chooses the landing path.

Next step before merge

  • [P2] The protected maintainer-labeled PR should remain in human maintainer review; the remaining action is exact-head visual proof or maintainer risk acceptance, not a narrow automated repair.

Security
Cleared: The diff is limited to UI Markdown rendering, CSS, clipboard data attributes, and tests; it adds no dependency, workflow, network, permission, secret, or code-execution surface.

Review details

Best possible solution:

Land this canonical writable PR after maintainer review with exact-head web UI proof, or with explicit maintainer acceptance of the remaining visual CSS risk.

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

Yes, source-reproducible: current main lacks half-block QR detection/styles while the linked source PR documents before/after dashboard screenshots and scanning behavior. I did not run browser proof in this read-only review.

Is this the best way to solve the issue?

Yes, this appears to be the right maintainable boundary: shared Markdown rendering plus sidebar and raw tool-card handling covers the affected web chat surfaces. The remaining uncertainty is exact-head visual proof, not a clearer code-layer alternative.

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against 5715744ea0c8.

Label changes

Label justifications:

  • P2: This is a normal-priority web UI rendering bugfix with visible but bounded user impact.
  • merge-risk: 🚨 other: Green checks do not fully prove QR scanability, horizontal scrolling, and global code-block chrome rendering in the browser.
  • rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🌊 off-meta tidepool and patch quality is 🐚 platinum hermit.
  • status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Not applicable: The external-contributor proof gate does not apply to this member-authored, maintainer-labeled PR, though exact-head web proof would still reduce visual merge risk.
Evidence reviewed

PR surface:

Source +181, Tests +201. Total +382 across 14 files.

View PR surface stats
Area Files Added Removed Net
Source 9 246 65 +181
Tests 5 204 3 +201
Docs 0 0 0 0
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 14 450 68 +382

What I checked:

  • Repository policy read: Root AGENTS.md was read fully; its protected-label, deep PR review, UI proof, and release-owned changelog guidance affected this review. (AGENTS.md:1, 5715744ea0c8)
  • Scoped UI policy read: ui/AGENTS.md was read fully and only adds Control UI i18n/generated-locale guidance, which does not block this rendering change. (ui/AGENTS.md:1, 5715744ea0c8)
  • Live PR state: GitHub reports this PR open at head 46c66ec with maintainer, P2, and merge-risk labels. (46c66ec4afe2)
  • Current main baseline: Current main trims Markdown input and renders normal code-block wrappers/copy buttons, but has no block-art classifier, block-art copy encoding, or QR-specific rendering path. (ui/src/ui/markdown.ts:1023, 5715744ea0c8)
  • Current main style baseline: Current main keeps code-block wrapper overflow hidden and has no markdown-block-art CSS rules in the affected chat/sidebar/tool-card style files. (ui/src/styles/components.css:2210, 5715744ea0c8)
  • PR block-art classifier: The PR adds isMarkdownBlockArtText, requiring multiple glyph-only lines and at least eight block glyphs before treating content as block art. (ui/src/ui/markdown.ts:557, 46c66ec4afe2)

Likely related people:

  • vincentkoc: This member-authored replacement PR carries the active fix path, and prior merged history shows vincentkoc touching Markdown rendering and tool-card startup paths relevant to the changed files. (role: current replacement-path owner and recent area contributor; confidence: high; commits: 46c66ec4afe2, 105d77d486bf, 0c3644cb2477; files: ui/src/ui/markdown.ts, ui/src/ui/chat/tool-cards.ts)
  • BunsDev: GitHub commit metadata shows BunsDev authored the markdown-it renderer replacement and later chat/sidebar/tool-card styling changes that define the affected rendering surface. (role: Markdown renderer and UI styling contributor; confidence: high; commits: 9315302516fb, 52370c59980b, 0849cac106d1; files: ui/src/ui/markdown.ts, ui/src/styles/chat/text.css, ui/src/styles/chat/sidebar.css)
  • steipete: History shows steipete split and maintained the chat renderer/style files and adjacent tool-card/Markdown surfaces involved in this fix. (role: chat renderer/style split contributor; confidence: medium; commits: 1acbd6aea048, 12a56d4d46dd, 9f5c981f9fff; files: ui/src/ui/markdown.ts, ui/src/ui/chat/tool-cards.ts, ui/src/ui/chat/tool-helpers.ts)
  • emg110: The linked source PR supplies the original half-block QR reproduction, screenshots, and implementation direction carried forward by this replacement PR. (role: original reporter and source contributor; confidence: medium; commits: 89dcb39154c4, 14ecfbb0e0c7; files: ui/src/ui/markdown.ts, ui/src/styles/chat/sidebar.css, ui/src/styles/chat/text.css)
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.

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.

@clawsweeper clawsweeper Bot added rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action. P2 Normal backlog priority with limited blast radius. merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. labels Jun 17, 2026
@vincentkoc

vincentkoc commented Jun 17, 2026

Copy link
Copy Markdown
Member Author

Clownfish 🐠 reef update

Thanks for the work here. Clownfish got this branch swimming again without needing a replacement PR.

Source PR: #93869
Validation: pnpm -s vitest run ui/src/ui/markdown.test.ts ui/src/ui/chat/grouped-render.test.ts ui/src/ui/views/chat.test.ts; pnpm check:changed
Attribution stays exactly where it should: with the original branch and PR history.

fish notes: model gpt-5.5, reasoning medium; reviewed against 29641e8.

@vincentkoc
vincentkoc force-pushed the clownfish/repair-51868-qr-rendering branch from 6e155e3 to 29641e8 Compare June 17, 2026 03:27
@vincentkoc

vincentkoc commented Jun 17, 2026

Copy link
Copy Markdown
Member Author

Clownfish 🐠 reef update

Thanks for the work here. Clownfish got this branch swimming again without needing a replacement PR.

Source PR: #93869
Validation: pnpm -s vitest run ui/src/ui/markdown.test.ts ui/src/ui/chat/grouped-render.test.ts ui/src/ui/views/chat.test.ts; pnpm check:changed
Contributor credit stays on this reef marker, with the PR history doing the receipts.

fish notes: model gpt-5.5, reasoning medium; reviewed against d20a3bd.

@vincentkoc
vincentkoc force-pushed the clownfish/repair-51868-qr-rendering branch 2 times, most recently from d20a3bd to 3ba505d Compare June 17, 2026 04:52
@vincentkoc

vincentkoc commented Jun 17, 2026

Copy link
Copy Markdown
Member Author

Clownfish 🐠 reef update

Thanks for the contribution here. Clownfish pushed the narrow repair here so review, credit, and history stay together.

Source PR: #93869
Validation: pnpm test:serial ui/src/ui/markdown.test.ts ui/src/ui/views/chat.test.ts; pnpm check:changed; git diff --check
This keeps attribution in the original current: commits, review context, and changelog notes all stay visible.

fish notes: model gpt-5.5, reasoning medium; reviewed against 3ba505d.

@clawsweeper clawsweeper Bot added status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. and removed status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action. labels Jun 17, 2026
@vincentkoc
vincentkoc force-pushed the clownfish/repair-51868-qr-rendering branch from 3ba505d to a0398e4 Compare June 18, 2026 15:14
@clawsweeper clawsweeper Bot added proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. proof: sufficient ClawSweeper judged the real behavior proof convincing. labels Jun 18, 2026
@vincentkoc
vincentkoc force-pushed the clownfish/repair-51868-qr-rendering branch from bf28688 to 85332b4 Compare June 18, 2026 16:08
@vincentkoc

vincentkoc commented Jun 18, 2026

Copy link
Copy Markdown
Member Author

Clownfish 🐠 reef update

Thanks for the work on this. Clownfish could write to this branch, so it kept the fix in the original PR instead of making a new one.

Source PR: #93869
Validation: node scripts/run-vitest.mjs ui/src/ui/markdown.test.ts ui/src/ui/chat/grouped-render.test.ts ui/src/ui/views/chat.test.ts -- --reporter=verbose; git diff --check; pnpm check:changed; .agents/skills/autoreview/scripts/autoreview --mode local
Attribution stays exactly where it should: with the original branch and PR history.

fish notes: model gpt-5.5, reasoning medium; reviewed against d265b68.

@vincentkoc
vincentkoc force-pushed the clownfish/repair-51868-qr-rendering branch from 85332b4 to d265b68 Compare June 18, 2026 16:23
@clawsweeper clawsweeper Bot added rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. and removed rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. labels Jun 18, 2026
@emg110

emg110 commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Thank you all, I am following every email and can't wait! It's awesome!

@clawsweeper clawsweeper Bot removed the rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. label Jun 18, 2026
@clawsweeper clawsweeper Bot added rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action. rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. and removed status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. proof: sufficient ClawSweeper judged the real behavior proof convincing. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action. rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. labels Jun 18, 2026
@vincentkoc
vincentkoc force-pushed the clownfish/repair-51868-qr-rendering branch from d265b68 to 46c66ec Compare June 29, 2026 05:42
@clawsweeper clawsweeper Bot added rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. and removed rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. status: ⏳ waiting on author ClawSweeper has contributor-facing work open and is waiting for author action. labels Jun 29, 2026
@vincentkoc
vincentkoc merged commit f5482ef into main Jun 29, 2026
89 of 94 checks passed
@vincentkoc
vincentkoc deleted the clownfish/repair-51868-qr-rendering branch June 29, 2026 06:12
@github-actions github-actions Bot mentioned this pull request Jun 29, 2026
Open
This was referenced Jun 29, 2026
Closed
Closed
github-actions Bot pushed a commit to Desicool/openclaw that referenced this pull request Jun 30, 2026
@vincentkoc @emg110
UI: render half-block QR output in web chat (openclaw#93869)
1c7dbed 
Co-authored-by: MG <[email protected]>
QiuYuang pushed a commit to QiuYuang/openclaw that referenced this pull request Jul 1, 2026
@vincentkoc @emg110 @QiuYuang
UI: render half-block QR output in web chat (openclaw#93869)
10d0d5e 
Co-authored-by: MG <[email protected]>
chenyangjun-xy pushed a commit to chenyangjun-xy/openclaw that referenced this pull request Jul 1, 2026
@vincentkoc @emg110 chenyangjun-xy
UI: render half-block QR output in web chat (openclaw#93869)
4ebb0b4 
Co-authored-by: MG <[email protected]>
chenyangjun-xy pushed a commit to chenyangjun-xy/openclaw that referenced this pull request Jul 3, 2026
@vincentkoc @emg110 @chenyangjun-xy
UI: render half-block QR output in web chat (openclaw#93869)
4f27c87 
Co-authored-by: MG <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

app: web-ui App: web-ui clownfish Tracked by Clownfish automation maintainer Maintainer-authored PR merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. P2 Normal backlog priority with limited blast radius. rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. size: L status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@vincentkoc @emg110