phase 2 of 4: deeper inspection #341

Goal

Deeper inspection of components, change detection, DI and signals, for you and your agent: edit values in place from the panel or an agent, see change detection on the page, and read and export a recording. Rough size: 4 to 6 weeks. Follows #340.

Components

• Edit inputs, properties and writable signals from the panel and from agents. Use .set() for a WritableSignal, refuse signal inputs, otherwise assign and call ng.applyChanges. Refuse redacted paths. Add set-component-property and set-signal to ACTION_TOOLS, AGENT_INSPECTOR and RPC_INSPECTOR.
• Console handles: set $ng0..n on selection, and add a "Store as global" button to the component, DI and store views. Today only forms have $form.
• @for blocks: keep the loop entries from ɵgetControlFlowBlocks (count, track expression, @empty), which defer-blocks.ts drops today. Add a panel section and an agent tool.
• Lazy expansion of nested values, plus a property filter, instead of the fixed depth of 3 levels and 30 keys (component-tree.ts).
• Hydration status per tree node, and an overlay on the page showing hydrated, skipped, mismatched and dehydrated @defer regions.
• Show directive-only hosts as tree nodes, and support <tag> [dir] search syntax.

Change detection profiling

• Live flash overlay as components are checked: a pointer-events: none canvas in the overlay shadow root, batched with requestAnimationFrame, with fading "Name ×N" labels. Toggled from the panel and agents.
• Cycle bar chart with a 16.6 ms budget line and a brush to pick a range of cycles, plus a flame graph or tree map for the selected cycles.
• Export and import a recording as JSON, plus Trace Event format for Perfetto. Add an export argument on the change-detection tool.
• Lifecycle hook, output and afterRender timing (profiler events 4/5 and 16/17 in cd-recorder.ts).
• A "Pangular" track in the Chrome Performance panel through console.timeStamp, plus a toggle for ng.enableProfiling().

DI and signals

• Links both ways between Components and Injectors.
• Log a provider to the console, and a "hide framework injectors" toggle.
• A drawn signal graph with upstream and downstream highlight. Keep the value history we already have, and hide framework-internal nodes by default, showing how many are hidden.
• Watch a signal, and an opt-in stack capture of who wrote a signal (first 3 app frames).

Done when

• Inputs, properties and writable signals can be edited from the panel and from agents.
• A change detection recording can be read as a chart and a flame graph, and exported.

Progress

• Editing values, console handles and @for blocks landed in feat(components): edit values, list @for blocks and add console handles #382. set-signal covers signals a component holds as a property; signals addressed only through the Signals graph are not editable yet. The native overlays don't handle edits or console handles yet.
• The cycle chart with its range brush, the tree map and flame graph, JSON and Trace Event export and import (with export on the change-detection tool), and hook, output and afterRender timing landed in feat(components): chart, flame graph, export and hook timing for change detection recordings #383.
• The flash overlay, the Pangular Performance track and the ng.enableProfiling() toggle landed in feat(components): flash checked components, add a Pangular Performance track and profiling toggle #385, as Live views in the panel and flash, track and angularProfiling on the change-detection tool. Change detection profiling is done.
• Links between Components and Injectors, Log to console, the Hide framework filter, the drawn signal graph, watching signals and write stacks landed in feat(signals): draw the signal graph, watch signals and link components to injectors #387 (with the new watch-signal tool). DI and signals is done.
• Nested values that load on demand with a property filter, hydration status with a page overlay and the hydration tool, directive-only hosts and <tag> [dir] search landed in feat(components): open nested values on demand, show hydration and list directive hosts #388. Every item of phase 2 is done.