T-NZ0K-wizard-ux-iteration
State: planning/proposed · Impact: medium · Complexity: medium
ApNewComponentWizard.vue packs What/Where/Details/Body/Review into a dense flow with its own
bespoke field markup per step, rather than the shared section renderer the rest of the workbench
now uses. This task iterates the wizard’s spacing and grouping in Storybook first, then lands the
chosen shape so each step reads as one roomy decision with dense data grouped, not a form dump.
| Location | Role today |
|---|---|
solutions/determined/experiences/agent-pants/app/components/ApNewComponentWizard.vue | 918-line, three-shape step flow (COMPONENT_STEPS/PLUGIN_STEPS/MARKETPLACE_STEPS) with its own per-step field rendering |
solutions/determined/experiences/agent-pants/stories/screens/UxNewComponentWizard.vue | Non-canonical Storybook mock of one wizard screen (Details, pre-seeded from a plugin), built on UxDEntityForm |
solutions/determined/experiences/agent-pants/stories/screens/NewComponentWizard.stories.ts | Storybook story registration for the mock |
solutions/determined/experiences/agent-pants/stories/primitives/UxDEntityForm.vue | Proposed framework primitive the mock builds wizard fields from |
solutions/determined/experiences/agent-pants/stories/README.md | Documents the mock set as non-canonical; each functional task deletes the mock it replaces |
Proposed
Section titled “Proposed”Storybook hosts two or three UxNewComponentWizard variants trialing spacing, field grouping, a
progress affordance, and a Review step rendered as a diff-like summary instead of a flat field
list. The chosen variant lands in ApNewComponentWizard.vue, rendering each step’s fields through
the shared section renderer from T-GHE3-edit-form-in-center-pane instead of its own per-step
markup, so one decision surfaces per screen and dense identity/behavior data groups under the
same collapsible sections the edit form uses.
Approach
Section titled “Approach”- In the Storybook workshop, add two or three
UxNewComponentWizardvariants over spacing, field grouping, a progress affordance, and a Review step rendered as a diff-like summary. - Review the variants, light and dark, and settle on one shape.
- Port the chosen variant into
ApNewComponentWizard.vue, replacing its per-step field markup with the shared section renderer from T-GHE3-edit-form-in-center-pane (fieldSpec.ts’ssection/ordermetadata). - Rebuild the Review step as a diff-like summary of what will be written, rather than a restatement of every field.
- Delete the superseded pieces of the Storybook mock once the real component matches, per
stories/README.md’s policy. - Capture before/after screenshots, light and dark, per S-0012-human-reviewable-ui-changes for T-I7N0-agent-manager-screenshots-docs-ledger.
| Area | Note |
|---|---|
solutions/determined/experiences/agent-pants/stories/screens/UxNewComponentWizard.vue | Add spacing/grouping/progress/review variants |
solutions/determined/experiences/agent-pants/stories/screens/NewComponentWizard.stories.ts | Register the new variants |
solutions/determined/experiences/agent-pants/app/components/ApNewComponentWizard.vue | Adopt the chosen variant and the shared section renderer |
solutions/determined/experiences/agent-pants/stories/README.md | Retire the wizard mock note once the real component matches |
Acceptance criteria
Section titled “Acceptance criteria”- AC-1: Storybook hosts at least two
UxNewComponentWizardvariants differing in spacing/grouping/progress affordance, each with a light and dark story. - AC-2:
ApNewComponentWizard.vuerenders its step fields through the shared section renderer from T-GHE3-edit-form-in-center-pane, not bespoke per-step markup. - AC-3: The Review step shows a diff-like summary of what will be written, not a flat restatement of every field.
- AC-4: Before/after screenshots (light and dark) of the wizard exist per S-0012-human-reviewable-ui-changes.
Out of scope
Section titled “Out of scope”- Changing which steps a kind takes (
COMPONENT_STEPS/PLUGIN_STEPS/MARKETPLACE_STEPS) or the What-step skip from T-BGPJ-wizard-direct-kind-flows. - The wizard’s validation and submission logic; this task is presentation only.
Dependencies
Section titled “Dependencies”- T-GHE3-edit-form-in-center-pane supplies the shared section renderer this task adopts.
- T-I71M-stories-agent-manager-workbench stands up the Storybook workshop and fixture vault the variants render against.
Discovery context
Section titled “Discovery context”From the user’s Agent Manager planning request (2026-09-07): a Stage 7 styling iteration that runs after the functional stages, per M-BMFD. The plan names this task and T-XEAL-workbench-styling-iteration as depending on T-GHE3-edit-form-in-center-pane and T-I71M-stories-agent-manager-workbench for the same reason: both need the shared section renderer and the Storybook fixtures already in place.
Depends on
Section titled “Depends on”T-GHE3-edit-form-in-center-pane, T-I71M-stories-agent-manager-workbench