Progressive Disclosure: The Design Pattern Taming Agent Output in Trae, Claude Code, and Cursor
As AI agents grow more complex, users need to read a result without wading through dump of intermediate steps; progressive disclosure is the UI principle that keeps agent tools usable, and getting it wrong means users either miss failures or can't find answers.
Agent tools like Trae, Claude Code, and Cursor face a common problem: a single task can generate thousands of lines of reasoning, tool calls, command logs, and intermediate results. Laid flat, that output buries the final answer and forces users to scroll endlessly. The design cure is progressive disclosure—show a clean, actionable surface by default, then let users expand details when needed.
The pattern splits output into three layers: conclusion surface (always visible), evidence surface (collapsed, one-line summaries), and raw trace (deeply folded for debugging). Four fold types address specific noise: time folding collapses thinking to a duration like "thought for 8s", tool folding turns each tool call into a one-line status, thought folding groups reasoning steps into an accordion, and result folding truncates long logs to the first N lines with an "expand all" affordance.
The article includes a runnable HTML component demonstrating the pattern using native `<details>` elements, with a failure-first twist: error items expand by default and highlight red. It also warns against two anti-patterns—over-collapsing failures into folds (users never see errors) and over-exposing everything (cognitively overwhelming). The universal rule: fold process details, never fold results or anomalies.
The dividing line between folding process and exposing result/exception is the key design decision: over-collapse hides failures, over-expose buries answers, and the right balance is a single boundary.
Time folding in Claude Code shows only duration, not content, which keeps the interface clean but can frustrate debuggers who need the full reasoning trace; that's why layer 3 exists.
The code example proves that a basic `<details>` element is enough to implement the full pattern, suggesting progressive disclosure is more a layout discipline than a complex UI framework.
The article's claim that "users never expand and miss key info" points to a real trade-off: collapsing too deeply can silently hide critical anomalies, which is why failure-first floating is not optional.
Adding a new angle: no matter how slick the folding is, once failure messages get hidden it's all for nothing — users think it succeeded, but it actually already crashed. Which do you find more unbearable? A: output slapped straight in your face, B: hidden too deep and you can't locate the error