Summary
Tool call outputs and JSON object parameters in the chat UI are currently rendered as minified one-line JSON strings, which makes debugging and reading tool results unnecessarily difficult.
This is a small frontend-only change that pretty-prints JSON with 2-space indentation wherever the UI already uses JSON.stringify for display.
What does this fix/solve?
- Tool call output blocks show minified JSON blobs (e.g.
{"status":"ok","items":[...]}) that are hard to scan
- Tool call argument rows display nested object values as compact JSON
- Request params (Plus menu) and model config params (Admin → Models) have the same readability problem
After the change, valid JSON is formatted with indentation; non-JSON text is left unchanged.
Proposed changes
Three files, ~20 lines total:
-
cptr/frontend/src/lib/components/chat/ToolCallCollapsible.svelte
- Add a
$derived formatter that JSON.parses tool output when possible, then JSON.stringify(value, null, 2)
- Use formatted output in the
<pre> block (keeps existing 10k char truncation)
- Pretty-print object values in argument rows
-
cptr/frontend/src/lib/components/chat/PlusMenu.svelte
JSON.stringify(value, null, 2) for object param values
-
cptr/frontend/src/lib/components/Admin/Models.svelte
- Same for model request-param display
No new dependencies. Falls back to raw string when output is not valid JSON.
Test plan
Contributor note
I have a working patch on branch feat/pretty-json-debug but I am unable to open a pull request directly against this repository (no push/PR permissions from my fork). Happy to share the full diff or adjust based on maintainer feedback — please let me know the preferred contribution path.
Commit message used locally:
feat(frontend): pretty-print JSON in tool call and param displays
Tool outputs and JSON object params were shown as minified one-liners,
making debugging hard to read. Parse and format with 2-space indent where
valid JSON; fall back to raw text otherwise.
Summary
Tool call outputs and JSON object parameters in the chat UI are currently rendered as minified one-line JSON strings, which makes debugging and reading tool results unnecessarily difficult.
This is a small frontend-only change that pretty-prints JSON with 2-space indentation wherever the UI already uses
JSON.stringifyfor display.What does this fix/solve?
{"status":"ok","items":[...]}) that are hard to scanAfter the change, valid JSON is formatted with indentation; non-JSON text is left unchanged.
Proposed changes
Three files, ~20 lines total:
cptr/frontend/src/lib/components/chat/ToolCallCollapsible.svelte$derivedformatter thatJSON.parses tool output when possible, thenJSON.stringify(value, null, 2)<pre>block (keeps existing 10k char truncation)cptr/frontend/src/lib/components/chat/PlusMenu.svelteJSON.stringify(value, null, 2)for object param valuescptr/frontend/src/lib/components/Admin/Models.svelteNo new dependencies. Falls back to raw string when output is not valid JSON.
Test plan
Contributor note
I have a working patch on branch
feat/pretty-json-debugbut I am unable to open a pull request directly against this repository (no push/PR permissions from my fork). Happy to share the full diff or adjust based on maintainer feedback — please let me know the preferred contribution path.Commit message used locally: