[GH-ISSUE #85] feat(frontend): pretty-print JSON in tool call and param displays #39

New issue

Closed

opened 2026-10-18 14:02:16 +00:00 by bsakaguchi · 2 comments

bsakaguchi commented

2026-10-18 14:02:16 +00:00

Owner

Originally created by @steamEngineer on GitHub (Jun 28, 2026).
Original GitHub issue: https://github.com/open-webui/computer/issues/85

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

Expand a tool call whose output is JSON → output is indented and readable
Expand a tool call whose output is plain text → unchanged
Tool call with nested object arguments → args are indented
Plus menu request params with object values → indented
Admin → Models request params → indented
Large JSON output still truncates at 10k chars with "... (truncated)" message

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.

Originally created by @steamEngineer on GitHub (Jun 28, 2026). Original GitHub issue: https://github.com/open-webui/computer/issues/85 ## 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: 1. **`cptr/frontend/src/lib/components/chat/ToolCallCollapsible.svelte`** - Add a `$derived` formatter that `JSON.parse`s 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 2. **`cptr/frontend/src/lib/components/chat/PlusMenu.svelte`** - `JSON.stringify(value, null, 2)` for object param values 3. **`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 - [ ] Expand a tool call whose output is JSON → output is indented and readable - [ ] Expand a tool call whose output is plain text → unchanged - [ ] Tool call with nested object arguments → args are indented - [ ] Plus menu request params with object values → indented - [ ] Admin → Models request params → indented - [ ] Large JSON output still truncates at 10k chars with "... (truncated)" message ## 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. ```

bsakaguchi closed this issue

2026-10-18 14:02:17 +00:00

bsakaguchi commented

2026-10-18 14:02:17 +00:00

Author

Owner

@steamEngineer commented on GitHub (Jun 28, 2026):

Branch is now pushed to my fork — the push had been blocked by GitHub email privacy (GH007) because the commit used a private Gmail as committer; fixed with the noreply address.

Fork branch (single commit on upstream/main): https://github.com/steamEngineer/computer/tree/feat/pretty-json

Compare / patch: https://github.com/open-webui/computer/compare/main...steamEngineer💻feat/pretty-json

Commit: c93c52b — 3 files, +16/−7 lines.

I still can't open a PR directly against this repo from my account; happy for a maintainer to cherry-pick or open the PR from the compare link above.

@steamEngineer commented on GitHub (Jun 28, 2026): Branch is now pushed to my fork — the push had been blocked by GitHub email privacy (GH007) because the commit used a private Gmail as committer; fixed with the noreply address. **Fork branch (single commit on `upstream/main`):** https://github.com/steamEngineer/computer/tree/feat/pretty-json **Compare / patch:** https://github.com/open-webui/computer/compare/main...steamEngineer:computer:feat/pretty-json Commit: `c93c52b` — 3 files, +16/−7 lines. I still can't open a PR directly against this repo from my account; happy for a maintainer to cherry-pick or open the PR from the compare link above.

bsakaguchi commented

2026-10-18 14:02:17 +00:00

Author

Owner

@tjbck commented on GitHub (Jun 30, 2026):

Should be addressed!

@tjbck commented on GitHub (Jun 30, 2026): Should be addressed!

bsakaguchi referenced this issue

2026-10-18 14:04:11 +00:00

[PR #39] [MERGED] 0.3.3 #253