Issue Station
Sign In
Tools hereToolbox

hermes - 💡(How to fix) Fix WebUI message rendering breaks after large tool outputs + inline diff, showing stray </pre> and corrupting later message layout [3 comments, 1 participants]

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…
GitHub stats
NousResearch/hermes-agent#16581•Fetched 2026-04-28 06:52:24
View on GitHub
Comments
3
Participants
1
Timeline
7
Reactions
0
Author
hacker1e7hacker1e7
Participants
hacker1e7hacker1e7
Timeline (top)
commented ×3labeled ×3unsubscribed ×1

I ran into a WebUI rendering issue in Hermes where the later part of a conversation becomes visually corrupted after a turn that includes very large tool outputs mixed with diff / patch / log content.

The visible symptoms include:

  • a DIFF block appearing unexpectedly
  • multiple copy buttons showing up in the middle of the transcript
  • a stray literal </pre> rendered in the page
  • subsequent assistant content appearing inside a malformed block / broken layout

This looks like a rendering-layer issue rather than corrupted session storage.

Root Cause

These are only suggestions, not a confirmed root cause:

Fix Action

Fix / Workaround

I ran into a WebUI rendering issue in Hermes where the later part of a conversation becomes visually corrupted after a turn that includes very large tool outputs mixed with diff / patch / log content.

  • very large tool messages

  • patch / diff content

  • JSON-encoded tool results

  • long shell/log output

  • an assistant summary message rendered after those tool outputs

  • a long conversation

  • large tool outputs (logs / JSON / patch / diff)

  • inline diff rendering

  • a later assistant summary rendered after those tool outputs

Code Example

const block = `\`\`\`diff\n${cleaned}\n\`\`\``
RAW_BUFFERClick to expand / collapse

Issue draft for NousResearch/hermes-agent

Title

WebUI message rendering breaks after large tool outputs + inline diff, showing stray </pre> and corrupting later message layout

Body

Summary

I ran into a WebUI rendering issue in Hermes where the later part of a conversation becomes visually corrupted after a turn that includes very large tool outputs mixed with diff / patch / log content.

The visible symptoms include:

  • a DIFF block appearing unexpectedly
  • multiple copy buttons showing up in the middle of the transcript
  • a stray literal </pre> rendered in the page
  • subsequent assistant content appearing inside a malformed block / broken layout

This looks like a rendering-layer issue rather than corrupted session storage.

Environment

  • Hermes Agent repo: NousResearch/hermes-agent
  • Workspace during reproduction: /mnt/d/workspace/experiment/BOAD-SWE-Agent
  • Session file: ~/.hermes/webui/sessions/9d004003c570.json
  • Session title: 研究主线与上下文组装

What I observed

The problematic session contains:

  • very large tool messages
  • patch / diff content
  • JSON-encoded tool results
  • long shell/log output
  • an assistant summary message rendered after those tool outputs

In that session, several tool messages are very large (roughly 9k, 14k, 17k, and 33k chars).

The final assistant message itself looks structurally normal in the raw session JSON, but the WebUI display becomes corrupted in the later part of the transcript.

This suggests the issue is likely in UI rendering rather than message persistence.

Relevant technical clues

From the Hermes source:

  1. The UI event pipeline appears to convert tool.complete.inline_diff into a standalone fenced diff block:

    const block = `\`\`\`diff\n${cleaned}\n\`\`\``

    This appears in:

    • ui-tui/src/__tests__/createGatewayEventHandler.test.ts

  2. The markdown renderer has special handling for fenced diff blocks:

    • ui-tui/src/components/markdown.tsx

  3. The message renderer routes assistant content through the markdown renderer:

    • ui-tui/src/components/messageLine.tsx

So the issue seems plausibly related to:

  • inline diff segment insertion
  • fenced diff markdown rendering
  • very large tool outputs in the same turn / transcript
  • possibly an outer HTML/web rendering layer leaking or mis-closing a <pre> wrapper

The literal </pre> shown in the UI is what made me suspect an outer HTML/container boundary issue in addition to markdown/diff rendering.

Why I think this is a UI/rendering bug

I inspected the raw session file:

  • ~/.hermes/webui/sessions/9d004003c570.json

The final assistant message text appears normal there, while the rendered WebUI transcript is malformed.

So this does not look like corrupted session JSON or broken persistence.

Possible directions

These are only suggestions, not a confirmed root cause:

  1. Consider rendering msg.kind === "diff" via a dedicated diff component instead of re-wrapping it as fenced markdown.
  2. Consider collapsing / truncating very large tool outputs in the transcript by default.
  3. Audit the outer WebUI HTML/code-block rendering path for <pre> / </pre> boundary leakage.

Reproduction hints

I don't yet have a minimal standalone reproduction, but the triggering pattern seems to involve:

  • a long conversation
  • large tool outputs (logs / JSON / patch / diff)
  • inline diff rendering
  • a later assistant summary rendered after those tool outputs

Attachment

I have a screenshot showing the corrupted UI state (with the stray </pre> and the unexpected DIFF block / copy buttons).

extent analysis

TL;DR

The issue can be fixed by modifying the markdown rendering to properly handle large tool outputs and inline diff segments, possibly by using a dedicated diff component or truncating large outputs.

Guidance

  • Investigate the ui-tui/src/components/markdown.tsx file to see how fenced diff blocks are handled and if there's a way to improve rendering for large tool outputs.
  • Consider adding a check for large tool outputs and truncating them by default to prevent rendering issues.
  • Review the ui-tui/src/components/messageLine.tsx file to ensure that assistant content is properly routed through the markdown renderer and that there are no issues with HTML/container boundary rendering.
  • Look into using a dedicated diff component for rendering msg.kind === "diff" messages instead of re-wrapping them as fenced markdown.

Example

// Example of using a dedicated diff component
if (msg.kind === "diff") {
  return <DiffComponent diff={msg.diff} />;
} else {
  return <MarkdownRenderer text={msg.text} />;
}

Notes

The issue seems to be related to the rendering of large tool outputs and inline diff segments, and modifying the markdown rendering or using a dedicated diff component may help resolve the issue. However, without a minimal reproduction, it's difficult to provide a definitive solution.

Recommendation

Apply a workaround by truncating very large tool outputs in the transcript by default, as this may help prevent rendering issues until a more permanent solution can be implemented.

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…
#api#ssr#memory leak#API versioning#request timeout

Still need to ship something?

×6

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

Back to top recommendations

TRENDING

hermes - 💡(How to fix) Fix WebUI message rendering breaks after large tool outputs + inline diff, showing stray </pre> and corrupting later message layout [3 comments, 1 participants]