Fix tool-result rendering in Vue chat transcript component
Session from pi-web on Hugging Face by woxQAQ · MIT · condensed by Coders Talk
Click a segment to jump to that moment
5msession
2interventions
by library · 1d
GOAL
Fix a rendering bug where tool results (especially standalone 'read result' entries) were displaying incorrectly in the chat transcript UI, misaligned or visually intrusive.
- +0Prompt · +0这里的渲染出现问题 (rendering issue here, with screenshot)
- +0mAgent did · +0mExplored ChatTranscript.vue and toolBlock.ts, then edited tool result preview logic and read result rendering to use HighlightedCode, ran build:web successfully
- +1mAgent did · +1mReported fix: removed inline preview text, aligned standalone read results with HighlightedCode rendering, build passed
- +2mIntervention · +2mDeveloper sent screenshots again saying '没修好呢' (still not fixed), twice in a rowWhy: The fix didn't address the actual visual issue I was pointing at
- +3mAgent did · +3mInvestigated transcript.ts merge logic for tool results, edited ChatTranscript.vue to remove the left-side 'Tool Result' meta column, rebuilt successfully
- +3mAgent did · +3mReported removing the left TOOL RESULT column, and flagged uncertainty whether the real issue was that these read results shouldn't appear at all
- +4mIntervention · +4mDeveloper pointed out the first two entries still looked out of place ('前两条有点突兀')Why: The standalone tool results still visually stood out too much compared to normal messages
- +4mAgent did · +4mStyled standalone tool results as a distinct 'unmatched result' variant with reduced opacity, smaller font, indentation, and renamed label; rebuilt successfully
- +5mOutcome · +5mStandalone tool results restyled as de-emphasized 'unmatched result' blocks; build:web passes; agent offers to hide them entirely by default if still not clean enough
VERDICT
Next time I'd attach the screenshot and explicitly describe what looks wrong (e.g. 'these two read-result rows shouldn't stand out like normal messages') instead of just saying '没修好呢' twice, since the agent had to guess what was still broken. Pointing out that the first two entries looked '突兀' (out of place) was what finally got the right fix — a de-emphasized style instead of just removing a column.