feat(gui): open a step to inspect its settings read-only on the Form View

[yangzhang75]

What changes were proposed in this PR?

Closes #8025. Part of the Form View stack (parent issue #8011), stacked on #8441 (PR13).

Lets a reader open a step on the embedded workflow preview to inspect its settings, read-only.

• Clicking a step on the read-only canvas highlights it and opens the operator's own property panel; clicking empty canvas dismisses it. Selection reuses the canvas highlight stream rather than teaching the editor a second click mode.
• The panel is truly read-only: it carries the inert attribute (which blocks pointer AND keyboard AND focus, unlike pointer-events:none), and the graph is modification-disabled. The panel itself stays the scroll container so a long panel is still readable.
• The property panel is mounted with [hidden], not *ngIf: it shows its operator by REACTING to the highlight stream (no initial pull), so it must already be subscribed when the click fires. Mounting it on selection subscribes too late and opens empty.
• The Form View stays silent on the shared co-editor channel (updateSharedModelAwareness("currentlyEditing", undefined)), so inspecting a step from the form never shows this session as editing a graph on the other view.
• Adds a persistPlacement input to the property editor (default true, canvas unchanged). The Form View mounts it with persistPlacement=false, so its ngOnInit skips the #right-container docked-panel restore that only exists in the canvas layout and would otherwise throw.

Turning the panel live to choose what to expose is the authoring PR (#8026).

Any related issues, documentation, discussions?

Closes #8025. Part of the Form View feature (parent issue #8011).

How was this PR tested?

Unit tests (vitest). Direct-construction tests cover the selection/dismiss logic (open on single highlight, clear on empty-canvas unhighlight, silence on the co-editor channel, close button). A TestBed rendered test covers the panel markup with the property editor stubbed (it is a heavy child with its own spec; the stub carries only the two bound inputs). The property-editor spec covers the new persistPlacement guard: ngOnInit does not read #right-container and ngOnDestroy does not persist geometry when persistPlacement=false. 100% statement and function coverage on the changed source. ng test, ng build gui (AOT), eslint and prettier all pass.

Screenshot

A step opened read-only on the Form View: the property panel showing the operator's settings, inert.

Was this PR authored or co-authored using generative AI tooling?

Yes. Co-authored with Claude (Anthropic), reviewed line by line by the author before submission.

🤖 Generated with Claude Code

https://claude.ai/code/session_01FVvP3ttj22f9LB4p9u2anY

[github-actions]

Automated Reviewer Suggestions

Based on the git blame history of the changed files, we recommend the following reviewers:

• Contributors with relevant context: @aglinxinyuan
  You can notify them by mentioning @aglinxinyuan in a comment.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 71.71053% with 86 lines in your changes missing coverage. Please review.
✅ Project coverage is 93.78%. Comparing base (d0ab10d) to head (387bf0e).
⚠️ Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
...mponent/workflow-form/workflow-form.component.html	0.00%	80 Missing ⚠️
...ponent/workflow-form/workflow-form.spec-harness.ts	90.69%	3 Missing and 1 partial ⚠️
...onent/property-editor/property-editor.component.ts	90.90%	0 Missing and 1 partial ⚠️
...component/workflow-form/workflow-form.component.ts	99.37%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #8442      +/-   ##
============================================
- Coverage     94.04%   93.78%   -0.27%     
  Complexity     4822     4822              
============================================
  Files          1208     1208              
  Lines         49383    49675     +292     
  Branches       6019     6068      +49     
============================================
+ Hits          46441    46586     +145     
- Misses         1463     1607     +144     
- Partials       1479     1482       +3     

Flag	Coverage Δ		*Carryforward flag
access-control-service	81.00% <ø> (ø)		Carriedforward from d0ab10d
agent-service	99.32% <ø> (ø)		Carriedforward from d0ab10d
amber	89.92% <ø> (ø)		Carriedforward from d0ab10d
computing-unit-managing-service	73.67% <ø> (ø)		Carriedforward from d0ab10d
config-service	87.12% <ø> (ø)		Carriedforward from d0ab10d
file-service	87.91% <ø> (ø)		Carriedforward from d0ab10d
frontend	96.14% <71.71%> (-0.62%)	⬇️
notebook-migration-service	83.57% <ø> (ø)		Carriedforward from d0ab10d
pyamber	98.47% <ø> (ø)		Carriedforward from d0ab10d
workflow-compiling-service	77.19% <ø> (ø)		Carriedforward from d0ab10d

*This pull request uses carry forward flags. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

🟡 Changes recommended

Inspection can still mutate shared state and publish editing presence, while selection and result visibility can become stale.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Adds read-only operator inspection to Form View, alongside stacked Form View functionality.

Changes:

• Adds an inert property panel driven by canvas selection.
• Adds nested fields, instructions, execution controls, and results.
• Expands Vitest coverage and test harnesses.

File summaries

File	Description
workflow-result.service.ts	Detects non-empty results.
workflow-result.service.spec.ts	Tests result detection.
workflow-form.spec-harness.ts	Expands Form View mocks.
workflow-form.rendered.spec.ts	Tests rendered UI.
workflow-form.component.ts	Implements inspection and stacked Form View behavior.
workflow-form.component.spec.ts	Tests component behavior.
workflow-form.component.scss	Styles new Form View sections.
workflow-form.component.html	Renders controls, results, and inspection panel.
sub-fields.spec.ts	Tests nested-field utilities.
property-editor.component.ts	Makes placement persistence configurable.
property-editor.component.spec.ts	Tests placement opt-out.

Review details

• Files reviewed: 11/11 changed files
• Comments generated: 4
• Review effort level: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.