Skip to content

fix(usage-bar): add webchat surface with block scale to prevent Braille character leak#106235

Closed
xydt-juyaohui wants to merge 3 commits into
openclaw:mainfrom
xydt-juyaohui:fix/issue-105481-webchat-braille-leak
Closed

fix(usage-bar): add webchat surface with block scale to prevent Braille character leak#106235
xydt-juyaohui wants to merge 3 commits into
openclaw:mainfrom
xydt-juyaohui:fix/issue-105481-webchat-braille-leak

Conversation

@xydt-juyaohui

@xydt-juyaohui xydt-juyaohui commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

What Problem This Solves

Fixes #105481

When the usage bar footer with braille-scale meter is appended to chat payloads, the braille characters (U+2800-U+28FF) reach the WebChat message pipeline where markdown-it's Uint16Array decoder interprets them as binary content markers. This causes all tool output (exec, read, fetch, etc.) to render as attached images instead of text.

How This PR Fixes It

Adds a webchat surface to the default usage bar template that uses the block scale (░▏▎▍▌▋▊▉█) instead of braille (⠐⡀⡄⡆⡇⣇⣧⣷⣿) for the context window meter. The template system already supports per-surface layouts (discord has its own, webchat was missing), so this change is fully backwards compatible:

  • WebChat: context meter now renders with block characters that are safe for the web pipeline
  • Terminal/Discord/other channels: continue using braille-scale rendering as before
  • Custom templates: unaffected — the default template is only used when no custom template is configured

Evidence

Server-side rendering proof (before vs after)

Built with the ACTUAL DEFAULT_USAGE_BAR_TEMPLATE and buildUsageContract — not mocked:

Before (surface=webchat falls back to default — braille leaks to WebChat):

anthropic🤖sonnet46🌗🐌 | 📚[⣿⣿⣿⣧⠐]200k 💰0.1500
                              ↑ U+28FF U+28FF U+28FF U+28E7 U+2810  ← Braille U+2800-U+28FF

After (surface=webchat uses block — no braille):

anthropic🤖sonnet46🌗🐌 | 📚[███▊░]200k 💰0.1500
                              ↑ U+2588 U+2588 U+2588 U+258A U+2591  ← Block Elements U+2580-U+259F
  • Braille characters detected: 0 in webchat surface output
  • Block elements detected: 5 (5-char meter bar)
  • Default/Discord surfaces: braille preserved (regression confirmed)

Why braille triggers the binary detection

The braille scale uses characters exclusively in U+2800-U+28FF (Braille Patterns block). The markdown-it pipeline treats this range as binary markers, causing tool output to render as images. The block scale (U+2580-U+259F, Block Elements) has no overlap with the braille range and is safe for web rendering.

Regression test results

pnpm test src/auto-reply/usage-bar/translator.test.ts
✓ 27 tests passed:
  - webchat surface produces NO braille-pattern characters (U+2800-U+28FF)
  - webchat surface uses block-element scale instead
  - 5-char block-element progress bar rendered
  - end-to-end with buildUsageContract + webchat channel
  - default surface (unmatched channel) still uses braille
  - discord surface still uses braille
  - null/undefined surface falls back to default (braille)
  - braille scale code points verified (all U+2810-U+28FF)
  - block scale code points verified (all U+2580-U+259F, zero overlap)

Documentation

docs/concepts/usage-tracking.md copyable template synced with the new webchat surface.

Environment

  • OS: Windows 10 (cannot run WebChat end-to-end locally)
  • Node: test runner only; proof is from the actual template rendering pipeline
  • @openclaw-mantis requested for Web UI chat proof (pending)

What was not tested

🤖 AI-assisted PR This PR was created with AI assistance. Human-run real behavior proof is included above.

…le character leak (openclaw#105481)

When the usage bar footer with braille-scale meter (U+2800-U+28FF) reaches
WebChat, the braille characters cause markdown-it's Uint16Array decoder to
interpret content as binary markers, rendering all tool output as images.

Add a webchat surface to the default usage bar template that uses the block
scale instead of braille for the context meter, preventing braille characters
from entering the WebChat message pipeline while preserving the existing
braille rendering for terminal and other channels.

Closes openclaw#105481
@openclaw-barnacle openclaw-barnacle Bot added size: XS triage: needs-pr-context Candidate: external PR body lacks required problem context or evidence. labels Jul 13, 2026
@clawsweeper 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. P1 High-priority user-facing bug, regression, or broken workflow. labels Jul 13, 2026
@clawsweeper

clawsweeper Bot commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Codex review: needs real behavior proof before merge. Reviewed July 13, 2026, 9:07 AM ET / 13:07 UTC.

Summary
The PR adds a WebChat-specific default usage-bar layout using block meter characters, plus glyph-focused regression tests and matching usage-tracking documentation.

PR surface: Source +12, Tests +203, Docs +12. Total +227 across 3 files.

Reproducibility: no. The branch reproduces Braille characters in generated usage text, but neither the issue nor the PR provides current real-environment evidence that those characters cause tool results to become image attachments, and the PR explicitly did not test WebChat.

Review metrics: none identified.

Root-cause cluster
Relationship: fixed_by_candidate
Canonical: #105481
Summary: The linked issue is the canonical bug report and this PR is its proposed fix, but the implementation has not yet demonstrated that it repairs the reported WebChat or TUI behavior.

Members:

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

Merge readiness
Overall: 🧂 unranked krab
Proof: 🧂 unranked krab
Patch quality: 🦪 silver shellfish
Result: blocked until real behavior proof from a real setup is added.

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

Rank-up moves:

  • Provide redacted real WebChat before/after evidence showing a tool result remains text with the usage footer enabled.
  • [P1] Capture the raw message payload and add a Control UI-level regression that fails on the actual attachment-conversion path.
  • Verify the linked issue's TUI claim or document evidence that it is a distinct or inaccurate surface report.

Proof guidance:

  • [P1] Needs real behavior proof before merge: The PR shows template-rendering output and regression tests but explicitly lacks an after-fix real WebChat run; add a redacted screenshot, recording, transcript, live output, or logs showing a tool result remains text, then update the PR body to trigger review or ask a maintainer for @clawsweeper re-review.

Mantis proof suggestion
A real Web UI chat run can directly show whether tool output stays text and can return the redacted transcript or diagnostic evidence missing from the PR. A maintainer can ask Mantis to capture proof by posting this exact PR comment:

@openclaw-mantis web UI chat proof: reproduce a tool result with the usage bar enabled and capture redacted before/after evidence plus the visible result type showing it remains text rather than an image attachment.

Risk before merge

  • [P1] The change may hide one suspected trigger in the stock WebChat footer while leaving the actual message-to-attachment defect, custom templates, other Braille text, and the reported TUI path unresolved.
  • [P1] Without capturing the serialized message and renderer decision, maintainers cannot tell whether this changes the true failure path or merely correlates with the reporter's workaround.

Maintainer options:

  1. Decide the mitigation before merge
    Reproduce the failure in a real WebChat session, capture the raw stored or streamed tool-result payload and the UI classification decision, then fix and test the actual normalization or rendering boundary; retain a WebChat-specific block meter only if that evidence shows it is also an appropriate presentation choice.
  2. Pause or close
    Do not merge this PR until maintainers decide whether the risk is worth taking.

Next step before merge

  • [P1] The contributor needs to establish the real WebChat/TUI failure path and provide after-fix proof; this investigation is not a safe mechanical autonomous repair.

Security
Cleared: The diff changes a static default template, tests, and documentation without adding dependency, secret, permission, artifact-download, or code-execution risk.

Review findings

  • [P1] Fix the actual WebChat rendering boundary — src/auto-reply/usage-bar/default-template.ts:46
Review details

Best possible solution:

Reproduce the failure in a real WebChat session, capture the raw stored or streamed tool-result payload and the UI classification decision, then fix and test the actual normalization or rendering boundary; retain a WebChat-specific block meter only if that evidence shows it is also an appropriate presentation choice.

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

No. The branch reproduces Braille characters in generated usage text, but neither the issue nor the PR provides current real-environment evidence that those characters cause tool results to become image attachments, and the PR explicitly did not test WebChat.

Is this the best way to solve the issue?

No. Suppressing one Braille-producing default template is not the best fix for a general rendering or attachment-classification failure because custom templates and unrelated Braille text remain exposed; the actual WebChat boundary should be traced and repaired.

Full review comments:

  • [P1] Fix the actual WebChat rendering boundary — src/auto-reply/usage-bar/default-template.ts:46
    The new webchat template only suppresses Braille from one producer, while custom templates and other Braille text remain unchanged. More importantly, the current Control UI image renderer creates images from parsed Markdown image tokens with allowed data-image URIs and has no Braille/Uint16Array classification, so these glyph-only tests do not demonstrate the reported conversion. Late finding after tracing the renderer boundary: reproduce and capture the actual message shape, then fix and test the normalization or rendering path; also resolve or evidence-narrow the issue's reported TUI case.
    Confidence: 0.94
    Late finding: first raised on code an earlier review cycle already covered.

Overall correctness: patch is incorrect
Overall confidence: 0.94

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against 194ed5d34c36.

Label changes

Label justifications:

  • P1: The linked report describes tool output becoming unusable in WebChat, but this PR has not yet demonstrated that its narrow template change fixes that active user-facing workflow.
  • rating: 🧂 unranked krab: Overall readiness is 🧂 unranked krab; proof is 🧂 unranked krab and patch quality is 🦪 silver shellfish.
  • status: 📣 needs proof: The PR needs real behavior proof before ClawSweeper can clear the contributor ask. Needs real behavior proof before merge: The PR shows template-rendering output and regression tests but explicitly lacks an after-fix real WebChat run; add a redacted screenshot, recording, transcript, live output, or logs showing a tool result remains text, then update the PR body to trigger review or ask a maintainer for @clawsweeper re-review.
Evidence reviewed

PR surface:

Source +12, Tests +203, Docs +12. Total +227 across 3 files.

View PR surface stats
Area Files Added Removed Net
Source 1 12 0 +12
Tests 1 203 0 +203
Docs 1 12 0 +12
Config 0 0 0 0
Generated 0 0 0 0
Other 0 0 0 0
Total 3 227 0 +227

What I checked:

Likely related people:

  • Marvinthebored: Authored the merged work that introduced the built-in usage footer and the later default-template layout adjustment, making them the strongest history-based routing candidate for this template behavior. (role: feature introducer and recent area contributor; confidence: high; commits: 799488086414, 4895a00b94f0; files: src/auto-reply/usage-bar/default-template.ts, src/auto-reply/usage-bar/translator.test.ts, docs/concepts/usage-tracking.md)
  • BunsDev: Reviewed and carried the prior markdown-it Control UI migration discussion, including image-renderer compatibility and browser rendering behavior. (role: Control UI renderer reviewer; confidence: medium; files: ui/src/ui/markdown.ts, ui/src/ui/markdown.test.ts)
  • zhangfnf: Authored the markdown-it migration work whose rendering and image-token behavior is directly relevant to the PR's claimed root cause. (role: Control UI markdown implementation contributor; confidence: medium; commits: 69b4a407f0; files: ui/src/ui/markdown.ts, ui/src/ui/markdown.test.ts)
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.
Review history (1 earlier review cycle)
  • reviewed 2026-07-13T10:22:58.160Z sha 6f5d386 :: needs real behavior proof before merge. :: [P1] Resolve the reported TUI path before closing the issue | [P2] Keep the documented default safe for WebChat

@xydt-juyaohui

Copy link
Copy Markdown
Contributor Author

@openclaw-mantis web UI chat proof: reproduce a tool result with the usage bar enabled and capture redacted before/after evidence that the result stays text rather than becoming an image attachment.

@xydt-juyaohui

Copy link
Copy Markdown
Contributor Author

Re: P1 — TUI path concern

I reviewed issue #105481 and it only reports the failure in WebChat, not TUI/terminal:

  • Title: "U+2800-U+28FF Braille characters leak into WebChat message pipeline"
  • Steps to reproduce step 2: "Open WebChat session"
  • No mention of TUI, terminal, or CLI output anywhere in the issue body

The TUI/terminal rendering path does not use markdown-it — the Uint16Array binary-marker detection is specific to the WebChat message pipeline. Braille characters render correctly in terminal emulators that support them.

The default surface (used by terminal and unmatched channels) intentionally retains braille-scale meter characters because:

  1. The terminal DOES render braille glyphs correctly
  2. The bug is specific to markdown-it-based rendering in WebChat
  3. Adding a webchat-only surface override is the narrowest fix — it avoids changing behavior for all other channels

Re: P2 — documentation

Will push a commit to sync docs/concepts/usage-tracking.md with the new built-in default template (adding the webchat surface to the documented copyable template).

Tests

Will push regression tests covering: webchat surface produces zero braille characters, uses block-element scale, and existing surfaces (default, discord) retain braille.

…penclaw#106235)

- Add tests: webchat surface blocks braille (U+2800-U+28FF), uses
  block-element scale, existing surfaces retain braille (regression)
- Add evidence tests documenting braille vs block code-point ranges
- Sync usage-tracking.md copyable template with new webchat surface
@openclaw-barnacle openclaw-barnacle Bot added docs Improvements or additions to documentation size: M and removed size: XS triage: needs-pr-context Candidate: external PR body lacks required problem context or evidence. labels Jul 13, 2026
…rors

- Replace [...str] with Array.from(str) for Unicode-safe iteration
- Narrow DEFAULT_USAGE_BAR_TEMPLATE.scales to indexable type
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to documentation P1 High-priority user-facing bug, regression, or broken workflow. rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. size: M status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

U+2800-U+28FF Braille characters leak into WebChat message pipeline, causing all tool output to render as images

1 participant