When a model writes a file through a tool call (e.g. the filesystem MCP's write_file), the parameters preview under the tool call is unusable while it streams:
-
The whole file renders as a single line. The preview shows JSON.stringify output, so the content string's newlines appear as literal \n escapes inside one enormous line that scrolls sideways forever. An HTML page reads like a mail slot. This happens with every model/backend, during streaming and after.
-
The preview stays pinned to the top. While the file streams in, the visible viewport shows the first lines only; there's no follow-the-tail scrolling, so you can't actually watch what's being generated.
It's cosmetic in the sense that the written file itself is fine, but on long generations it also gets heavy: very large single-line content re-rendered per streamed delta makes the app noticeably unhappy.
Proposed fix (in ToolInput, web-app/src/components/ai-elements/tools/tool.tsx):
- Pull top-level string parameters containing newlines (or very long ones) out of the JSON block and render each as its own code block with real newlines, labeled with the parameter name; guess the highlight language from a sibling path-like parameter. The remaining parameters stay as compact JSON. Generic, so it covers any tool with a chunky text parameter.
- While the tool is in
input-streaming state, render the growing text as plain preformatted text (skipping per-delta syntax highlighting) and auto-scroll its container to the bottom, releasing when the user scrolls up and re-pinning at the bottom. Highlight once when streaming finishes.
I'll put up a PR.
When a model writes a file through a tool call (e.g. the filesystem MCP's
write_file), the parameters preview under the tool call is unusable while it streams:The whole file renders as a single line. The preview shows
JSON.stringifyoutput, so thecontentstring's newlines appear as literal\nescapes inside one enormous line that scrolls sideways forever. An HTML page reads like a mail slot. This happens with every model/backend, during streaming and after.The preview stays pinned to the top. While the file streams in, the visible viewport shows the first lines only; there's no follow-the-tail scrolling, so you can't actually watch what's being generated.
It's cosmetic in the sense that the written file itself is fine, but on long generations it also gets heavy: very large single-line content re-rendered per streamed delta makes the app noticeably unhappy.
Proposed fix (in
ToolInput,web-app/src/components/ai-elements/tools/tool.tsx):input-streamingstate, render the growing text as plain preformatted text (skipping per-delta syntax highlighting) and auto-scroll its container to the bottom, releasing when the user scrolls up and re-pinning at the bottom. Highlight once when streaming finishes.I'll put up a PR.