Improve Frontend Message Rendering and Classification
Improve Frontend Message Rendering and Classification
Agent
OpenCode
Model
Gemini 3 Pro Preview
Shared
Feb 17, 11:40 AM
Messages693
Please start a worktree project for a few issues related to the frontend rendering of messages
https://github.com/market-dot-dev/traces/issues/65
https://github.com/market-dot-dev/traces/issues/70
https://github.com/market-dot-dev/traces/issues/73
Please review these issues, and see if there's a generic XSLT like layer we need to introduce into the frontend to make handling these more consistent. Please review component structure for message types as part of this.
So, I want a generalized plan that:
Based on my analysis of the issues and the codebase, here is a comprehensive plan to introduce a Message Transformation Layer. This "XSLT-like" layer will strictly separate the raw message content from its presentation, allowing us to consistently handle specific tags and format requirements across the application.
The core issue is that UserMessage and AssistantMessage currently render textContent directly into a Markdown component. We need a processing pipeline that intercepts the content before rendering to:
Strategy: Implement a useMessageTransforms hook that runs a pipeline of "Transformers". Each transformer takes a string or existing render parts and returns a modified list of parts (strings or React Nodes).
We will introduce a new module at frontend/lib/message-transforms.
useMessageTransforms)The hook will implement a "split-and-replace" algorithm using useMemo for performance.
message.textContent (String).[message.textContent].<CommandBlock />) or removed (replaced with empty strings).(String | ReactNode)[].Rendering:
Components will map over the output:
<Markdown />.| Issue | Problem | Transformer Solution |
|---|---|---|
| #70 | Codex leaks <environment_context> | StripEnvironmentContext: Regex match /<environment_context>[\s\S]*?<\/environment_context>/ and replace with "". If the resulting message is empty, the UI handles it gracefully. |
| #73 | Agent Teams leaks <teammate-messages> | StripTeammateMessages: Regex match /<teammate-messages>[\s\S]*?<\/teammate-messages>/ and replace with "". |
| #65 | Claude <command-...> tags | RenderCommandTags: Regex match /<(command-[-\w]+)(?:\s+[^>]*)?>([\s\S]*?)<\/\1>/. Transform into a new <CommandBadge> or <CodeSnippet> component to distinguish it from user text. |
Setup Worktree & Structure:
fix/message-rendering.frontend/lib/message-transforms structure.Implement Core Logic:
MessageTransformer type.applyTransformers utility and useMessageTransforms hook.Implement Transformers:
#70 and #73 (Stripping).#65 (Rendering).Integrate:
frontend/components/messages/UserMessage.tsx to use the hook.frontend/components/messages/AssistantMessage.tsx (for consistency).Verification:
This plan is FAST (regex-based, memoized), Generic (easy to add new tags later), and Consistent (applied centrally).
User Approval:
Shall I proceed with creating the worktree and implementing this plan?
- Verify that command tags from #65 are rendered distinctively. < These should be hidden in higlights view without any adapter specific code in that tab (right now we only select user messages/assistant responses as highlight views). Perhaps user messages that show these should be rendered as a special "inserted-user" (terrible name, pelase fix that). They're pseudo assistnat messages but for some reason stored as user messages.
In highlights they shouldn't appear but in full trace they should show kind of like the toolcalls (and should be collapsible)
For the skills we should show some kind of "Attachment" message that shows that the agent is attaching skill files
For the "Sub agent" messages provide a reocmmendation on the way they should be structured visually.
Yes, go ahead create worktree and start implementing
I have analyzed the codebase and created the worktree fix/message-rendering. Based on your requirements and the existing architecture, here is the detailed implementation plan.
I will create a central utility to identify these special message types without polluting the core Message type.
File: frontend/lib/message-classification.ts
SpecialMessageCategory (COMMAND, TEAMMATE_CONTEXT, ENVIRONMENT_CONTEXT, SKILL_ATTACHMENT).<command-*>...</command-*><teammate-messages>...</teammate-messages><environment_context>...</environment_context><skill_attachment>...</skill_attachment> (Implied by "Attachment message")identifyMessageCategory(message) and parseSpecialMessageContent(message).I will create a new directory frontend/components/messages/special/ for these specialized views.
| Component | Purpose | Visual Style |
|---|---|---|
CommandMessage | Renders <command-*>. | Terminal Log: Dark header with command name, collapsible body with monospace content. Distinct from tool calls but similar structure. |
TeammateMessage | Renders <teammate-messages>. | Threaded Context: A distinct block (perhaps with a left border/quote style) titled "Teammate Context". Collapsible. |
EnvironmentMessage | Renders <environment_context> & Skills. | Attachment: A discreet "paperclip" style row. Title: "Environment Context" or "Attached Skill". Content is hidden by default (collapsed). |
MessageItem.tsx (Rendering)I will modify frontend/components/messages/MessageItem.tsx to switch on the detected category.
user_message -> renders UserMessage.identifyMessageCategory.
COMMAND -> render CommandMessage.TEAMMATE_CONTEXT -> render TeammateMessage.ENVIRONMENT_CONTEXT -> render EnvironmentMessage.UserMessage.HighlightsPage (Filtering)I will modify frontend/app/s/[id]/(highlights)/page.tsx to exclude these messages.
user_message or agent_text.SpecialMessageCategory (Command, Teammate, etc.).FullTracePageMessageItem is updated, these messages will appear in the "Full Trace" tab but with the new, collapsible, distinct UI instead of looking like raw user prompts.frontend/lib/message-classification.ts.frontend/components/messages/special/.frontend/components/messages/MessageItem.tsx to route to these new components.frontend/app/s/[id]/(highlights)/page.tsx to filter them out.Mode Check: I am currently in Plan Mode. Please confirm if I should proceed with these changes in Implementation Mode.
Go ahead