Skip to content

Add debugger component-hierarchy inspection - #165

Draft
bjdodson-openai wants to merge 1 commit into
bjd/debugger-consolefrom
bjd/debugger-component-hierarchy
Draft

Add debugger component-hierarchy inspection#165
bjdodson-openai wants to merge 1 commit into
bjd/debugger-consolefrom
bjd/debugger-component-hierarchy

Conversation

@bjdodson-openai

Copy link
Copy Markdown
Collaborator

Description

Adds bounded component-tree capture and hierarchy presentation to the debugger.

  • Traverses renderer state without invoking user getters or unbounded recursive serialization.
  • Bounds slot traversal, depth, nodes, metadata, and the final hierarchy envelope.
  • Keeps exact target and generation identity across selection and refresh.

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • Documentation improvement
  • Performance optimization
  • Test improvement
  • Other (new debugger capability)

Testing

  • Tests pass locally (bazel test //...)
  • Added/updated tests for changes (if applicable)
  • Tested on multiple platforms (iOS/Android/Web/macOS as applicable)
  • Manual testing performed (describe below)

Testing Details

  • Incremental branch: CLI 307/307 and focused hierarchy 6/6 passed; web-renderer Bazel passed, and the broad suite retained the exact parent baseline.
  • Assembled debugger stack: npm test passed 436/436; the CLI production build passed.
  • Focused //src/valdi_modules/src/valdi/web_renderer:test passed.
  • bazel query //... passed.
  • The broad Valdi suite reproduced the established 12 unrelated failures; all new debugger specs passed.

Checklist

  • Code follows project style guidelines
  • Documentation updated (if needed)
  • No breaking changes (or documented in description)
  • Commit messages follow conventional format
  • No secrets, API keys, or internal URLs included

Related Issues

Relates to #154

Additional Context

Stack 12/22. Stacked on #164 (bjd/debugger-console). Review this PR as the single incremental commit 5ca2e137 against that base; do not merge it before its parent.

@github-actions

Copy link
Copy Markdown

📊 PR Size: size/XL

Total changes: 1517 lines (10 files)

Top files changed:

  • src/valdi_modules/src/valdi/web_renderer/src/debug/ComponentHierarchySnapshot.ts: +422 -0
  • src/valdi_modules/src/valdi/web_renderer/test/LegacyWebDebuggerAdapter.spec.ts: +354 -9
  • npm_modules/cli/src/debugger/devtoolsPanel.spec.ts: +361 -0
  • npm_modules/cli/debugger/devtools-panel.js: +93 -17
  • src/valdi_modules/src/valdi/valdi_core/src/Renderer.ts: +93 -1
  • src/valdi_modules/src/valdi/web_renderer/src/ValdiWebRendererDelegate.ts: +61 -12
  • src/valdi_modules/src/valdi/valdi_test/test/Renderer.spec.ts: +45 -0
  • npm_modules/cli/src/core/packageFiles.spec.ts: +25 -0
  • src/valdi_modules/src/valdi/valdi_core/src/IRenderer.ts: +19 -0
  • npm_modules/cli/debugger/devtools-panel.css: +5 -0

Size calculated as additions + deletions. Labels: XS (<10), S (<50), M (<250), L (<1000), XL (1000+)

@github-actions

Copy link
Copy Markdown

⚠️ Bazel & CI Test Results

Test Suite Result
Valdi Smoke Tests ✅ success
API Surface Check ✅ success
Linux: Build Compiler ✅ success
Snapshot Tests ✅ success
valdi_web Integration Test ✅ success
macOS: C++ & Platform Tests ❌ failure
Linux: Module Tests ✅ success
Linux: C++ Tests ✅ success
Test Coverage Delta ✅ success
Linux: Hotreload Smoke ✅ success
Linux: Build & Export ✅ success
Linux: Registry Validation ✅ success

Some tests failed. Please check the workflow logs for details.

🚀 Bazel remote cache is now enabled - future builds will be faster!

Workflow: Valdi CI

@clholgat clholgat left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review of component-hierarchy inspection. The security posture is good: readComponentName reads only the constructor descriptor value/name and never touches the instance or invokes user getters; props/state/viewModel are never serialized; depth/node/child-link/traversal caps and the final JSON.stringify envelope gate are all enforced fail-closed; and cyclic/torn/mid-mutation trees abort atomically back to the physical element tree. One low observation below.

Note: please carry this feedback into the squashed PR when the stack is collapsed.

  • 🟢 Low — component key values are emitted verbatim into component.key and the node id (component:[elementId,...path]). If an app uses data-derived keys (a common list anti-pattern, e.g. key={user.email}), that value is surfaced in the hierarchy envelope even though the element snapshot redacts attribute values. It's bounded to 256 chars/key and served only over the local loopback debugger, but it is genuinely new exposure not present in the pre-existing element snapshot. Consider redacting or omitting key values that look data-derived, or documenting the exposure.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants