T-GHE3-edit-form-in-center-pane

State: planning/proposed · Impact: high · Complexity: medium

Goal

Every modelled frontmatter key is edited in a 300px aux rail while the whole centre column holds only the body, so the fields that decide what publishes are the hardest thing on the screen to reach. This task moves the form onto the centre stage as one categorized flow above the body, and makes the section list data-driven so the wizard and the entity pages render the same blocks from one table.

Today

Location	Role today
`solutions/determined/experiences/agent-pants/app/pages/apps/agent-pants/notes/[...path].vue`	Skill page: aux “Details” holds `SkillFieldsForm layout="panels"`, a Files panel, a Publish panel and `ApPropertiesPanel`; the stage is `DPageHeader`, a `UTabs` stage switch, then `MdSurface`
`solutions/determined/experiences/agent-pants/app/pages/apps/agent-pants/plugins/[...path].vue`	Plugin page: aux holds `SkillFieldsForm layout="panels" kind="plugin"`; the stage is `DPageHeader`, `UTabs`, then `MdSurface`
`solutions/determined/experiences/agent-pants/app/pages/apps/agent-pants/index.vue`	Marketplace page: the same aux `SkillFieldsForm layout="panels"` and the same stage shape
`solutions/determined/experiences/agent-pants/app/components/SkillFieldsForm.vue`	Four sections hard-coded in the template — About, Behavior, Publishing, Package identity; the `layout` prop picks `ApPanel` or `DCard` as each section’s wrapper
`solutions/determined/experiences/agent-pants/app/utils/fieldSpec.ts#FIELD_SPECS`	Per field: `id`, `key`, `label`, `help`, `kinds`. Section membership exists only as `// About` style comments between the entries
`solutions/determined/experiences/agent-pants/app/components/ApPanel.vue`	The collapsible inspector section: chevron, title, `meta` slot. Open state is component-local
`solutions/determined/experiences/agent-pants/app/components/ApNewComponentWizard.vue`	Its own step layout (`steps`, `current`); places every `DFieldRow` itself and never mounts `SkillFieldsForm`
`packages/ts/ui/app/components/DNotesDisclosure.vue`	Collapsed-section shell with a `persistKey` that remembers open state in `localStorage`
`packages/ts/ui/app/components/DPageHeader.vue`	The header at the top of all three stages
`solutions/determined/products/agent-pants/tests/e2e/capture.e2e.ts`	Screenshots the Details pane’s Package identity section

Proposed

Each of the three entity pages renders one column: DPageHeader, then the field sections, then the body editor. The sections come from fieldSpec.ts, not from a template — a section and an order on every FieldSpec decide which block a field lands in and where inside it. The blocks are About, Behavior, Publishing, Overrides and Package identity, each a DNotesDisclosure with a persistKey, so a reader’s open set survives navigation. Overrides holds one collapsed block per effective target, fields spelled in that harness’s own key names, supplied by T-IIZO-per-target-overrides.

One component renders the blocks — ApFieldSections.vue — and both SkillFieldsForm.vue and ApNewComponentWizard.vue mount it, so a field added to FIELD_SPECS reaches the wizard and the page without a second edit. The aux region keeps only what is read-only: ApPropertiesPanel, and the Files panel until T-7UDE-related-files-tab replaces it.

Approach

fieldSpec.ts: add section and order to FieldSpec, stamp every entry, and export sectionsForKind(kind) returning the ordered blocks with their fields. Open decision in this step: section as a closed union or an open string. A closed union catches a typo at compile time and is the default here.
New ApFieldSections.vue: takes the block list and the model, renders one DNotesDisclosure per block and one DFieldRow per field, and exposes a named slot per field id so the caller supplies the control (ApTargetsControl, ApArgumentsEditor, ApLicenseField, the two switches).
SkillFieldsForm.vue renders through ApFieldSections.vue. The layout prop gains stage for the centre-column framing and keeps panels and cards until the last caller moves.
Move the form out of aux and onto the stage, one page and one commit at a time: notes/[...path].vue, then plugins/[...path].vue, then index.vue. The aux region keeps ApPropertiesPanel and the Files panel.
Add the Overrides block: one DNotesDisclosure per effective target, fed by T-IIZO-per-target-overrides. With no override keys present the block is hidden rather than rendered empty.
Point the wizard’s Details and Identity steps at ApFieldSections.vue so both surfaces read one table. The Where and Review steps keep their own layout.
Adopt the density variant chosen in T-I71M-stories-agent-manager-workbench: field-row spacing, and which blocks start open.
Update fieldSpec.test.ts and ApNewComponentWizard.test.ts; re-point the Playwright selectors in authoring.e2e.ts and capture.e2e.ts that reach into the aux column.

Areas

Area	Note
`solutions/determined/experiences/agent-pants/app/utils/fieldSpec.ts`	`FieldSpec` gains `section` and `order`; add `sectionsForKind`
`solutions/determined/experiences/agent-pants/app/utils/fieldSpec.test.ts`	Cover the section grouping and the per-kind narrowing
`solutions/determined/experiences/agent-pants/app/components/ApFieldSections.vue`	The shared section renderer over `sectionsForKind`
`solutions/determined/experiences/agent-pants/app/components/SkillFieldsForm.vue`	Render through `ApFieldSections.vue`; `layout` gains `stage`
`solutions/determined/experiences/agent-pants/app/pages/apps/agent-pants/notes/[...path].vue`	Form moves from `aux` to the stage, above `MdSurface`
`solutions/determined/experiences/agent-pants/app/pages/apps/agent-pants/plugins/[...path].vue`	Same move
`solutions/determined/experiences/agent-pants/app/pages/apps/agent-pants/index.vue`	Same move
`solutions/determined/experiences/agent-pants/app/components/ApNewComponentWizard.vue`	Details and Identity steps render through `ApFieldSections.vue`
`solutions/determined/experiences/agent-pants/app/components/ApNewComponentWizard.test.ts`	Selectors follow the shared renderer
`solutions/determined/products/agent-pants/tests/e2e/authoring.e2e.ts`	Field selectors move off the aux column
`solutions/determined/products/agent-pants/tests/e2e/capture.e2e.ts`	Package identity shot is taken on the stage

Acceptance criteria

AC-1: No section title is written in the SkillFieldsForm.vue template — About, Behavior, Publishing and Package identity all come from sectionsForKind.
AC-2: Every entry in FIELD_SPECS carries a section and an order, asserted by a test in fieldSpec.test.ts.
AC-3: On the skill, plugin and marketplace pages the editable fields render in the centre column above the body, and the aux column holds only ApPropertiesPanel and the Files panel.
AC-4: Collapsing Behavior on the skill page, navigating away and back leaves it collapsed (the DNotesDisclosure persistKey).
AC-5: The wizard’s Details step and the skill page render the same field set for a skill, asserted by a test that compares both against sectionsForKind('skill').
AC-6: An Overrides block renders one collapsed disclosure per effective target for a note that carries ap-overrides, and no block at all for a note that carries none.
AC-7: moon run experience-agent-pants:check and the authoring Playwright project pass.

Out of scope

The hook editor’s own fields, which mount the same renderer in T-0AF7-hook-editor-and-harness-gap-table.
The ap-kind select, removed by T-W8BH-kind-conversion-action.
Input-level spec validation of name and description (T-M8AL-name-and-field-spec-validation).
The stage’s publish tabs, which T-H3RG-publish-as-secondary-view moves.
Styling and density polish beyond the chosen story variant (T-XEAL-workbench-styling-iteration).

Dependencies

T-I71M-stories-agent-manager-workbench settles the layout variant this builds — field-row density and which sections start open. Hard: the form is not rebuilt twice.
T-IIZO-per-target-overrides supplies the ap-overrides frontmatter the Overrides section edits. The section renders empty without it, so this is a soft dependency on content, not on the layout.
T-8BUZ-marketplace-targets-and-support-warnings supplies the effective-target set the Overrides section enumerates.

Discovery context

The user’s planning request of 2026-09-07 asked for the edit controls to live in the centre pane as one linear, categorized flow rather than in the inspector rail. Member of milestone M-BMFD. solutions/agent-pants/docs/vault/design/workflow-and-ux-assessment.md records that aux is claimed and that editing is no longer a mode — this is the next step from there.

Depends on

T-I71M-stories-agent-manager-workbench

← Back to Tasks