Skip to content

feat(frontend): pretty-print JSON in tool call and param displays #85

Description

@steamEngineer

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.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
  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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions