UI: fix half-block art rendering for UTF-8 QR codes in web chat#51868
UI: fix half-block art rendering for UTF-8 QR codes in web chat#51868emg110 wants to merge 6 commits into
Conversation
Greptile SummaryThis PR fixes UTF-8 half-block QR code rendering in the web chat UI by adding a
Confidence Score: 4/5
Prompt To Fix All With AIThis is a comment left during a code review.
Path: ui/src/ui/markdown.ts
Line: 178-181
Comment:
**Comment doesn't match the regex**
The comment on line 180 says *"plus shades ░▒▓ and partial blocks ▌▐"*, but `HALF_BLOCK_RE` only includes `\u2580` (▀), `\u2584` (▄), and `\u2588` (█) — shades (`\u2591`–`\u2593`) and partial blocks (`\u258C`, `\u2590`) are absent from the pattern. The comment should be corrected to avoid misleading future readers.
```suggestion
// Half-block characters used in UTF-8 QR codes and block-art:
// U+2580 ▀ upper half, U+2584 ▄ lower half, U+2588 █ full block.
const HALF_BLOCK_RE = /[\u2580\u2584\u2588]/;
```
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: ui/src/styles/chat/sidebar.css
Line: 107-127
Comment:
**Missing `pre code` override may cause font-size inconsistency in the sidebar**
`text.css` adds a `.chat-text .half-block-art pre code` rule that resets `background`, `padding`, `line-height`, and `color` on the inner `<code>` element. The sidebar doesn't have the equivalent rule, so `.sidebar-markdown code { font-size: 13px; }` (line 136–139) still applies to the `<code>` inside half-block-art `<pre>` elements.
Because `13px` is an absolute value, it overrides the `font-size: 1.3em` set on `pre` for the characters that actually render. In practice this can make sidebar QR codes render noticeably smaller than those in chat, and depending on the base font size may affect tiling quality. Adding the same override as `text.css` would keep both surfaces consistent:
```css
.sidebar-markdown .half-block-art pre code {
color: inherit;
line-height: inherit;
font-family: var(--mono);
font-size: inherit;
background: none;
padding: 0;
}
```
How can I resolve this? If you propose a fix, please make it concise.
---
This is a comment left during a code review.
Path: ui/src/styles/chat/text.css
Line: 151-171
Comment:
**Identical light/dark rules can be collapsed into one**
Both `:root[data-theme-mode="light"]` and `:root[data-theme-mode="dark"]` produce exactly the same CSS. Unless dark-mode differentiation is planned, these can be merged into a single, simpler rule — reducing duplication and making future edits easier. The same pattern appears in `sidebar.css`.
```suggestion
.chat-text .half-block-art pre {
background: #000;
color: #fff;
line-height: 0.6;
font-size: 1.3em;
padding: 4px;
border-radius: 4px;
overflow-x: auto;
width: fit-content;
}
```
How can I resolve this? If you propose a fix, please make it concise.Last reviewed commit: "Merge branch 'opencl..." |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 54a8389574
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 46429bd97e
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
|
Codex review: found issues before merge. Reviewed June 28, 2026, 3:38 PM ET / 19:38 UTC. Summary PR surface: Source +126, Tests +3. Total +129 across 8 files. Reproducibility: yes. source-reproducible: current main lacks half-block-specific rendering and the PR body plus inspected screenshots show broken then improved web dashboard QR output. Review metrics: 1 noteworthy metric.
Root-cause cluster Members:
Proposal only: this assessment does not dispatch repair, suppress jobs, mutate sibling items, close, or merge anything. Merge readiness Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch. Rank-up moves:
Mantis proof suggestion Risk before merge
Maintainer options:
Next step before merge
Security Review findings
Review detailsBest possible solution: Keep this source PR open as attribution and proof context while maintainers finish, merge, or explicitly reject #93869; close this source PR after that path is settled. Do we have a high-confidence way to reproduce the issue? Yes, source-reproducible: current main lacks half-block-specific rendering and the PR body plus inspected screenshots show broken then improved web dashboard QR output. Is this the best way to solve the issue? No as submitted: the detection and styling direction is useful, but this source branch is narrower than the required UI surface and the writable replacement is the better landing path once resolved. Full review comments:
Overall correctness: patch is incorrect AGENTS.md: found and applied where relevant. Codex review notes: model internal, reasoning high; reviewed against f4201578e50c. Label changesLabel justifications:
Evidence reviewedPR surface: Source +126, Tests +3. Total +129 across 8 files. View PR surface stats
Acceptance criteria:
What I checked:
Likely related people:
What the crustacean ranks mean
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 PR egg 🔥 Warming up: real-behavior proof passed; findings, security review, or rank-up moves are still in progress. Hatch commandComment Hatchability rules:
What is this egg doing here?
|
|
It will be great if I could have a human maintainer's verdict on whats needed here. Many thanks in advance |
# Conflicts: # ui/src/styles/chat/sidebar.css # ui/src/ui/markdown.ts
|
Conflicts and real behavior proof have been addressed and fixed, and all checks are now passing. |
|
This pull request has been automatically marked as stale due to inactivity. |
|
I am waiting to be merged as I have addressed all reviews and there are no conflicts and all looks ok for merge. |
|
Clownfish 🐠 reef update Thanks for the contribution here. Clownfish could not safely push to this branch, so it opened a replacement PR from a writable branch and carried the contributor trail along with it. Replacement PR: #93869 fish notes: model gpt-5.5, reasoning medium; reviewed against 6e155e3. |
Summary
Describe the problem and fix in 2–5 bullets:
<pre>line-height creates gaps between rows, background/foreground colors don't match the block-character encoding, and the characters don't tile into a scannable image.looksLikeHalfBlockArt()detection inmarkdown.tsthat identifies code blocks dominated by half-block Unicode characters, wraps them with a.half-block-artCSS class, and applies tight line-height (0.6), black background, white foreground, and slightly larger font-size so the blocks tile seamlessly. CSS added for both.chat-text(chat messages) and.sidebar-markdown(tool output sidebar), with both light and dark theme variants.Change Type (select all)
Scope (select all touched areas)
Linked Issue/PR
User-visible / Behavior Changes
Security Impact (required)
NoNoNoNoNoRepro + Verification
Environment
Steps
generate_algorand_qrcodeor any tool that outputs Unicode block-character QR codes)Expected
Actual
Evidence
Attach at least one:
Real behavior proof
Behavior addressed: UTF-8 QR codes built from half-block characters (▀▄█) rendered broken in the web chat dashboard — the default
<pre>line-height left gaps between rows and the gray background/foreground did not match the block-character encoding, so the codes were unscannable. This patch detects half-block art, wraps it in a.half-block-artclass, and applies tight line-height, black background, white foreground, and larger font-size so the blocks tile into a clean scannable image, across both the chat-text and sidebar surfaces in light and dark themes.Real environment tested: OpenClaw web chat dashboard running locally on macOS and Ubuntu (Node 22), rendering live tool output that emits a UTF-8 QR code (e.g. the Algorand ARC-26
generate_algorand_qrcodetool).Exact steps or command run after this patch: Opened the web chat dashboard, had a tool emit a UTF-8 half-block QR code, then viewed it in both the chat message view and the tool-output sidebar, in light and dark themes, and scanned the rendered code with a phone camera.
Evidence after fix:
Before


After




Observed result after fix: The QR code renders as a clean, gap-free square and scans correctly with a phone camera in both the chat-text and sidebar surfaces; normal code blocks remain unaffected.
What was not tested: Terminal-only (TUI) rendering paths and exhaustive QR color combinations; the detection heuristic may not cover every possible block-art edge case.
Human Verification (required)
What you personally verified (not just CI), and how:
Review Conversations
If a bot review conversation is addressed by this PR, resolve that conversation yourself. Do not leave bot review conversation cleanup for maintainers.
Compatibility / Migration
YesNoNoFailure Recovery (if this breaks)
.half-block-artCSS rules intext.cssandsidebar.css, and remove thelooksLikeHalfBlockArt()branch inmarkdown.tsui/src/styles/chat/text.css,ui/src/styles/chat/sidebar.css,ui/src/ui/markdown.tsRisks and Mitigations