feat: smart tree truncation and subtree extraction by piotrski · Pull Request #45 · callstackincubator/agent-react-devtools

piotrski · 2026-03-18T00:15:21Z

Summary

Closes #20

Smart tree truncation and subtree extraction for the get tree command, making output practical for large React apps (500-2000+ components).

Tree truncation

Host filtering by default: <div>, <span>, etc. are hidden (use --all to show). Keyed hosts and custom elements are always shown.
Sibling collapsing: Repeated siblings with the same display name collapse after 3 items with ... +N more ComponentName.
Summary footer: N components shown (M total) at the end of output.
--max-lines N flag: Hard cap on output lines for context budgets.

Subtree extraction

get tree @c5 shows only the subtree rooted at a specific component.
Labels re-assigned starting from @c1 within the subtree.
Combines with --depth, --all, and --max-lines flags.

Fixes on top of original implementation

Validate numeric IDs exist in resolveId (stale/typo'd IDs now return not-found)
Enforce --max-lines budget including truncation and summary footer lines
Update E2E tests for new { nodes, totalCount } response shape

Test plan

All 103 unit tests pass
Type checking passes
Build succeeds
E2E tests pass on CI
Manual: get tree on a large app shows truncated output with summary
Manual: get tree @c5 shows correct subtree
Manual: get tree --all includes host components
Manual: get tree --max-lines 20 caps output

Supersedes #36

🤖 Generated with Claude Code

changeset-bot · 2026-03-18T00:15:29Z

🦋 Changeset detected

Latest commit: 753a0bf

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
agent-react-devtools	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: fa2b1c1ab8

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

packages/agent-react-devtools/src/formatters.ts

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d36e4bc5db

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

packages/agent-react-devtools/src/daemon.ts

packages/agent-react-devtools/src/component-tree.ts

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1468ea65fc

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

packages/agent-react-devtools/src/component-tree.ts

chatgpt-codex-connector · 2026-03-18T00:50:55Z

packages/agent-react-devtools/src/formatters.ts

+  if (truncated) {
+    // Replace last tree line with truncation notice to stay within budget
+    lines[lines.length - 1] = `... output truncated at ${maxLines} lines`;


Guard truncation replacement when no lines were emitted

The truncation path assumes at least one rendered tree line and overwrites lines[lines.length - 1], but lineLimit can be 0 (or negative) when maxLines is very small and a footer is reserved. In that case no tree line is ever pushed, so this write targets index -1 and the truncation notice disappears; e.g. --max-lines 1 currently prints only the summary footer and misrepresents that output was truncated.

Useful? React with 👍 / 👎.

Fixed (same fix as the other formatters.ts comment — combined truncation+footer line resolves both issues at once).

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: aea5467abe

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

packages/agent-react-devtools/src/daemon.ts

Add three complementary strategies to reduce tree output size: 1. Filter host components by default (--all flag to include them) - Host components with keys or custom element names are kept - Filtering happens at output level, not internal tree structure 2. Collapse repeated siblings with same display name - Shows first 3 items, then "... +N more ComponentName" - Detects runs of siblings with identical displayName 3. Summary footer showing component count - "N components shown (M total)" when filtered - "N components" when showing all Also adds --max-lines N flag as a hard cap on output lines. Closes #20 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Test host component filtering with noHost option - Test custom element and keyed host preservation - Test child promotion when host nodes are skipped - Test noHost + maxDepth combination - Test sibling collapsing (repeated display names) - Test summary footer with totalCount - Test maxLines truncation - Test options object variant for formatTree Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Document --all, --max-lines flags and smart tree behavior: - Host filtering enabled by default - Sibling collapsing for repeated component names - Summary footer showing component counts Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

@c1

Add `get tree @c5` syntax to view only the subtree rooted at a specific component. Labels are re-assigned starting from @c1 within the subtree. Combines with --depth, --all, and --max-lines flags. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

maxLines is a formatting concern, not data. The daemon now returns only { nodes, totalCount } in the get-tree response. The CLI passes maxLines directly to formatTree from the local command flags. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The get-tree response changed from an array to { nodes, totalCount }. Update E2E tests to destructure the new format. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Previously resolveId always returned numeric IDs without checking if the node exists, making `get tree 999` return an empty tree instead of a not-found error. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Reserve space for both the truncation message and summary footer when computing the max-lines cutoff, so --max-lines N never emits more than N lines. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace O(n²) nodes.find() with O(1) nodeMap.get() by building a Map<number, TreeNode> alongside the existing childrenMap. Also remove dead isLastChild variable in collapsed-sibling path. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Hoist label assignment before the skip/emit branch in getTree walk - Precompute lineLimit once instead of recalculating reserve on every addLine call Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Only reserve truncation line when tree actually exceeds max-lines, replacing the last tree line instead of always reserving space - Return not-found error for stale subtree roots (labels that resolve but point to removed nodes) - Emit filtered children IDs when noHost skips host components, so children arrays stay consistent with parentId references Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

- Never skip the explicitly requested rootId even when noHost filtering is active, so `get tree @c5` works for host components - Guard against index -1 when truncation fires with zero lines emitted (e.g. --max-lines 1 with summary footer) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

When --max-lines is set and the tree is truncated, the truncation notice now uses the pre-reserved footer slot (combined line) instead of replacing the last content line. This shows one additional component line within the same budget. Also fixes the --max-lines 1 edge case where the footer was emitted after the truncation notice, producing 2 lines instead of 1. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 753a0bf836

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-04-03T05:12:21Z

packages/agent-react-devtools/src/cli.ts

+      const noHost = flags['all'] !== true;
+      // Parse optional root: `get tree @c5` or `get tree 5`
+      const rawRoot = command[2];


Parse --all as a boolean before consuming tree root

With the new optional subtree argument, get tree --all @c5 is parsed incorrectly: the generic arg parser stores flags.all = "@c5", so this branch treats --all as unset (noHost stays true) and rawRoot becomes undefined. That silently drops the requested subtree root and still filters host nodes, which makes a common flag ordering produce the wrong tree without any error.

Useful? React with 👍 / 👎.

PR #45 changed the get-tree IPC response from a flat array to { nodes, totalCount }, but browser.test.ts was not updated to match, causing the release workflow to fail on every push to main. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

#49) PR #45 changed the get-tree IPC response from a flat array to { nodes, totalCount }, but browser.test.ts was not updated to match, causing the release workflow to fail on every push to main. Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

chatgpt-codex-connector bot reviewed Mar 18, 2026

View reviewed changes

packages/agent-react-devtools/src/formatters.ts Outdated Show resolved Hide resolved

piotrski force-pushed the feat/smart-tree-truncation branch from fa2b1c1 to d36e4bc Compare March 18, 2026 00:28

chatgpt-codex-connector bot reviewed Mar 18, 2026

View reviewed changes

packages/agent-react-devtools/src/daemon.ts Show resolved Hide resolved

packages/agent-react-devtools/src/component-tree.ts Show resolved Hide resolved

chatgpt-codex-connector bot reviewed Mar 18, 2026

View reviewed changes

chatgpt-codex-connector bot reviewed Mar 31, 2026

View reviewed changes

packages/agent-react-devtools/src/daemon.ts Show resolved Hide resolved

piotrski and others added 14 commits April 3, 2026 07:07

chore: add changeset for smart tree truncation

942cfd8

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

fix: update E2E tests for new get-tree response shape

072c905

The get-tree response changed from an array to { nodes, totalCount }. Update E2E tests to destructure the new format. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

fix: validate numeric IDs exist in resolveId

dc51ba9

Previously resolveId always returned numeric IDs without checking if the node exists, making `get tree 999` return an empty tree instead of a not-found error. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

piotrski force-pushed the feat/smart-tree-truncation branch from aea5467 to 753a0bf Compare April 3, 2026 05:07

chatgpt-codex-connector bot reviewed Apr 3, 2026

View reviewed changes

piotrski merged commit a1bed65 into main Apr 3, 2026
4 checks passed

piotrski mentioned this pull request Apr 3, 2026

fix: update browser e2e get-tree assertion to match new response shape #49

Merged

1 task

piotrski mentioned this pull request Apr 3, 2026

feat: add contributor attribution to changelog #52

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: smart tree truncation and subtree extraction#45

feat: smart tree truncation and subtree extraction#45
piotrski merged 14 commits intomainfrom
feat/smart-tree-truncation

piotrski commented Mar 18, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 18, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

Uh oh!

chatgpt-codex-connector bot Mar 18, 2026

Uh oh!

piotrski Mar 31, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

Uh oh!

chatgpt-codex-connector bot left a comment

Uh oh!

chatgpt-codex-connector bot Apr 3, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

piotrski commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Tree truncation

Subtree extraction

Fixes on top of original implementation

Test plan

Uh oh!

changeset-bot bot commented Mar 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

chatgpt-codex-connector bot Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

piotrski Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

piotrski commented Mar 18, 2026 •

edited

Loading

changeset-bot bot commented Mar 18, 2026 •

edited

Loading