Issue Station
Sign In
Tools hereToolbox

hermes - 💡(How to fix) Fix xterm.js WebGL renderer context lost causes terminal black screen when switching chat page

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…

Root Cause

Bug Description When switching tabs or toggling the chat page visibility in Hermes Web UI, the embedded xterm.js terminal becomes black screen, cannot input and cannot interact. Root Cause Analysis In ChatPage.tsx lines 442-454: ts const useWebgl = terminalTierWidthPx(host) >= 768; if (useWebgl) { try { const webgl = new WebglAddon(); webgl.onContextLoss(() => webgl.dispose()); term.loadAddon(webgl); } catch (err) { ... } } When browser tab switches / page re-renders / config saves trigger page state update, WebGL context is lost. The onContextLoss callback only calls webgl.dispose(), but does NOT recreate the WebGL addon. Terminal has no valid renderer anymore, resulting in permanent black screen until page refresh. Temporary Workaround Run in browser dev console to force re-render terminal container: js const el = document.querySelector('.hermes-chat-xterm-host'); el.style.display = 'none'; setTimeout(() => el.style.display = '', 100); Or back out and re-enter the chat session. Permanent Fix Suggestion In the isActive switch useEffect, after syncMetricsRef.current?.(), detect and rebuild WebGL renderer if missing: ts useEffect(() => { if (isActive) { syncMetricsRef.current?.();

Fix Action

Fix / Workaround

Bug Description When switching tabs or toggling the chat page visibility in Hermes Web UI, the embedded xterm.js terminal becomes black screen, cannot input and cannot interact. Root Cause Analysis In ChatPage.tsx lines 442-454: ts const useWebgl = terminalTierWidthPx(host) >= 768; if (useWebgl) { try { const webgl = new WebglAddon(); webgl.onContextLoss(() => webgl.dispose()); term.loadAddon(webgl); } catch (err) { ... } } When browser tab switches / page re-renders / config saves trigger page state update, WebGL context is lost. The onContextLoss callback only calls webgl.dispose(), but does NOT recreate the WebGL addon. Terminal has no valid renderer anymore, resulting in permanent black screen until page refresh. Temporary Workaround Run in browser dev console to force re-render terminal container: js const el = document.querySelector('.hermes-chat-xterm-host'); el.style.display = 'none'; setTimeout(() => el.style.display = '', 100); Or back out and re-enter the chat session. Permanent Fix Suggestion In the isActive switch useEffect, after syncMetricsRef.current?.(), detect and rebuild WebGL renderer if missing: ts useEffect(() => { if (isActive) { syncMetricsRef.current?.();

RAW_BUFFERClick to expand / collapse

Bug Description When switching tabs or toggling the chat page visibility in Hermes Web UI, the embedded xterm.js terminal becomes black screen, cannot input and cannot interact. Root Cause Analysis In ChatPage.tsx lines 442-454: ts const useWebgl = terminalTierWidthPx(host) >= 768; if (useWebgl) { try { const webgl = new WebglAddon(); webgl.onContextLoss(() => webgl.dispose()); term.loadAddon(webgl); } catch (err) { ... } } When browser tab switches / page re-renders / config saves trigger page state update, WebGL context is lost. The onContextLoss callback only calls webgl.dispose(), but does NOT recreate the WebGL addon. Terminal has no valid renderer anymore, resulting in permanent black screen until page refresh. Temporary Workaround Run in browser dev console to force re-render terminal container: js const el = document.querySelector('.hermes-chat-xterm-host'); el.style.display = 'none'; setTimeout(() => el.style.display = '', 100); Or back out and re-enter the chat session. Permanent Fix Suggestion In the isActive switch useEffect, after syncMetricsRef.current?.(), detect and rebuild WebGL renderer if missing: ts useEffect(() => { if (isActive) { syncMetricsRef.current?.();

// Rebuild WebGL addon if context lost
const term = termRef.current;
if (term && !term.options.rendererType?.includes('webgl')) {
  try {
    const webgl = new WebglAddon();
    webgl.onContextLoss(() => webgl.dispose());
    term.loadAddon(webgl);
  } catch {}
}

} }, [isActive]); This ensures WebGL renderer is automatically rebuilt when returning to chat page, completely fix the black screen issue.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#serialization error#model compatibility#GPU setup#container setup#orchestration issue

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING