fix(web/dashboard): skip xterm.js WebGL renderer on Safari to fix Unicode box-drawing glyphs#18788
Open
Sanjays2402 wants to merge 1 commit into
Open
Conversation
…-drawing glyphs Safari's WebGL implementation mangles Unicode box-drawing characters (╔╗║╚╝, ██╗ etc.) used by the HERMES AGENT banner and TUI borders in the dashboard Chat tab — the texture-atlas path renders fragmented blocks instead of forming proper shapes, while Chrome and Firefox WebGL render the same glyphs correctly. This is a known xterm.js + Safari WebKit interaction. Add isSafariBrowser() that matches macOS/iOS Safari without false positives on Chromium derivatives (which all advertise 'Safari/' in their UA for legacy compat) by: - Requiring the 'Safari/' token. - Excluding Chromium fingerprints (Chrome/, Chromium/, CriOS/). - Excluding other WebKit-wrapping shells we know don't hit the bug (FxiOS/, EdgiOS/, Android UAs). Wire it into the WebGL gate so the chat tab falls back to the default DOM renderer on Safari, which renders the box-drawing glyphs faithfully. Chrome/Firefox/Edge on wide layouts still get the WebGL renderer. Verified locally: - tsc -b: clean. - vite build: clean (1.65s). - ChatPage.tsx diff: +38/-1, single file. Fixes NousResearch#18773.
Contributor
Author
|
CI status note for maintainers — the failing Verified by diffing the failing-test sets:
The clusters on main:
Happy to open targeted fix PRs for any of these clusters if it helps unblock the queue. Otherwise this PR is ready whenever main is green. |
10 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #18773. In the dashboard Chat tab, Safari's WebGL renderer mangles Unicode box-drawing characters (
╔╗║╚╝,██╗, etc.) used by the HERMES AGENT banner and TUI borders — they fragment into blocks instead of forming proper shapes. Chrome and Firefox WebGL render the same glyphs correctly.This is a known xterm.js + Safari WebKit interaction (also affects VS Code Server, JupyterLab, etc.).
Fix
web/src/pages/ChatPage.tsx: skip theWebglAddonon Safari and let xterm.js fall back to the default DOM renderer, which renders the box-drawing glyphs faithfully on Safari.A short
isSafariBrowser()helper detects macOS/iOS Safari without false positives on Chromium derivatives:Safari/UA token.Chrome/,Chromium/,CriOS/) — Chromium-based browsers all advertiseSafari/in their UA for legacy compat.FxiOS/,EdgiOS/,AndroidUAs).Existing WebGL gate (
terminalTierWidthPx(host) >= 768) is preserved, so wide layouts on Chrome/Firefox/Edge still get the crisp WebGL rendering. Only Safari at any width goes to the DOM renderer.Why not the issue's proposed
rendererType: 'dom'?The proposed
new Terminal({ rendererType: 'dom' })option is from xterm.js v4 and was removed in v5+. The repo is on@xterm/xterm@^6.0.0, where renderer choice is controlled via addons (WebglAddon,CanvasAddon). Skipping theWebglAddonis the modern equivalent.Verification
tsc -b: clean.vite build: clean (1.65s).web/src/pages/ChatPage.tsxonly, +38/-1.What I did NOT change
< 768px→ DOM renderer; unchanged).@xterm/addon-canvaswould be a bigger dependency change and the DOM renderer already renders box-drawing correctly on Safari per the issue and xterm.js docs.cc @bb @W0921
Closes #18773