Summary

When the agent dumps API responses, config files, or structured data, the output is a flat code block that can be hundreds of lines long. A collapsible, syntax-colored tree viewer lets you navigate large nested objects without scrolling through walls of text.

Proposed behavior

Fenced code blocks with json or yaml language hints get a toggle: Tree / Raw. Default is Tree for objects/arrays with more than ~20 lines; Raw for short ones.

Tree view:

• Keys are bold, values are colored by type (string=green, number=blue, boolean=amber, null=muted)
• Arrays and objects show a collapse triangle — click to fold/unfold
• Root level always expanded; nested levels collapsed by default beyond depth 2
• A "Copy" button in the header copies the raw JSON/YAML

Raw view: the existing syntax-highlighted <pre><code> block.

Implementation

Lightweight — build a recursive DOM renderer from JSON.parse() output. No external library required. Roughly 80-100 lines of vanilla JS. YAML requires a parser; use a small bundled one (js-yaml ~20KB) loaded lazily via CDN only when a YAML block is actually present.

Files involved

• static/ui.js — fenced code block renderer, JSON tree builder
• static/style.css — tree view styles
• Lazy-load: https://cdn.jsdelivr.net/npm/js-yaml@4/dist/js-yaml.min.js (YAML only)