Smart tree truncation for large component trees

[piotrski]

Problem

A real React app easily has 500-2000+ components. Running get tree dumps every node at ~40 chars per line, producing 20-80k characters — a significant chunk of an AI agent's context window. This makes the tool impractical for production-sized apps without manual --depth tuning.

Proposed solution

Three complementary strategies that compose together:

1. Filter host components by default

Host components (<div>, <span>, <button>, etc.) are typically 60-80% of the tree and rarely useful for debugging.

• Add --no-host flag (or make it the default, with --all to include them)
• Filter at the tree output level, not the internal tree structure
• Consider: host components with keys or non-trivial names (custom elements) should probably still show

2. Collapse repeated siblings

When a parent has many children with the same display name (lists, tables, grids), show a few then summarize:

├─ @c10 [fn] "TodoItem" key="1"
├─ @c11 [fn] "TodoItem" key="2"
├─ ... +48 more TodoItem

• Detect runs of siblings with the same displayName
• Show first 2-3, collapse the rest with count
• Collapsed nodes still get @cN labels assigned (for later reference)

3. Summary footer

Always append a summary so the agent knows what it's looking at:

127 components shown (1,843 total)

This tells the agent it's seeing a subset and can drill deeper with get tree --depth N, find, or get component @cN.

Additional considerations

• --max-lines N flag as a hard cap, with automatic depth reduction to fit
• The --depth flag already exists but requires the agent to guess the right value; smart defaults are better
• These should stack: host filtering + sibling collapsing + depth limit

Files to change

• src/component-tree.ts — add host filtering option to getTree(), sibling collapsing logic
• src/formatters.ts — implement collapsing in formatTree(), add summary footer
• src/daemon.ts — pass through new flags from IPC commands
• src/cli.ts — add --no-host / --all flags, --max-lines
• src/types.ts — extend get-tree IPC command with new options
• src/__tests__/component-tree.test.ts — test filtering and collapsing
• src/__tests__/formatters.test.ts — test collapsed output