Summary

When using hermes dashboard --tui and opening the Chat tab in Safari (macOS), the xterm.js terminal renders Unicode box-drawing characters as garbled/broken glyphs. The ASCII art banner (HERMES AGENT logo) and box-drawing UI elements (╔╗║╚╝ etc.) appear as fragmented blocks instead of forming proper shapes.

In Chrome/Firefox, the same page renders correctly.

Environment

• Hermes Agent version: v0.12.0 (2026.4.30), installed via Nix profile
• Platform: macOS (Darwin arm64)
• Browser: Safari (latest)
• Command: hermes dashboard --tui

Steps to Reproduce

1. Run hermes dashboard --tui
2. Open the dashboard in Safari
3. Navigate to the Chat tab
4. Observe that the terminal banner and box-drawing characters are garbled

Expected Behavior

Unicode box-drawing characters should render correctly as they do in Chrome/Firefox.

Actual Behavior

Characters like ██╗ ║ ╔╗ ╚╝ etc. fail to form proper shapes — the ASCII art logo and UI borders look broken.

Root Cause

xterm.js uses WebGL renderer by default, and Safari's WebGL implementation has known compatibility issues with Unicode box-drawing glyphs and custom terminal fonts. This is a well-known problem affecting other projects using xterm.js (VS Code Server, JupyterLab, etc.).

Proposed Fix

Add rendererType: 'dom' option when creating the xterm.js Terminal instance, or auto-detect Safari and fall back to the DOM renderer:

// web/src/pages/ChatPage.tsx or wherever Terminal is initialized
const terminal = new Terminal({
  rendererType: 'dom',  // or detect Safari
  // ... other options
});

Alternatively, expose a renderer type toggle in the dashboard settings.

Related

• xterm.js docs on renderer types: https://github.com/xtermjs/xterm.js/blob/master/typings/xterm.d.ts
• This is a known xterm.js + Safari issue, not unique to Hermes