T-I71M-stories-agent-manager-workbench

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

Goal

The Agent Manager workbench redesign — tree, edit form, preview, publish, hooks, import — is eight areas of change with no shared vocabulary yet. This task builds every proposed screen as a Storybook mock over one fixture vault, so the shape of the tree, the edit form, the per-target preview, and the framework primitives they share get judged and picked before any functional task touches a real component. It unblocks Stage 2’s edit-form-in-center-pane, preview-pane-per-entity-and-target and the wizard tasks, each of which points back to “the chosen variant from stories-agent-manager-workbench”.

Today

Location	Role today
`solutions/determined/experiences/agent-pants/stories/README.md`	Documents the existing mock set (Screens A–G, Dialogs F, Shell H, Primitives I) over `fixtures.ts`; states the workshop is non-canonical and deleted once each design lands
`solutions/determined/experiences/agent-pants/stories/fixtures.ts`	One fixture vault mirroring `tests/fixtures/agent-pants-freeform`; `DESTINATIONS`, `HINTS`, component/plugin rosters every screen mock reads from
`solutions/determined/experiences/agent-pants/stories/screens/SkillPage.stories.ts`	Screen D: skill/command/agent inspector, About/Behavior/Publishing sections plus a compact per-destination publish verdict row — no tree, no center-pane form, no per-target rendered-source preview
`solutions/determined/experiences/agent-pants/stories/screens/PluginPage.stories.ts`	Screen C: plugin page with and without its own note
`solutions/determined/experiences/agent-pants/stories/screens/NewComponentWizard.stories.ts`	Screen E: wizard opened pre-seeded from a plugin; one story, no kind-conversion or overrides step
`solutions/determined/experiences/agent-pants/stories/screens/Import.stories.ts`	Screen G: empty state and a preview with refused rows; no source picker (local/GitHub/harness dirs) and no provenance panel
`solutions/determined/experiences/agent-pants/stories/screens/Home.stories.ts`	Screen A: components overview, populated/empty/refused states
`solutions/determined/experiences/agent-pants/stories/primitives/`	`DModal`, `DTabs`, `DListDetail`, `DEntityForm`, `DFieldInfo`, `DConflictDialog` mocks — the framework primitives the screens compose; no primitive yet for a collapsible section stack or a harness gap table
`solutions/determined/experiences/agent-pants/stories/dialogs/Dialogs.stories.ts`	Rename, move, delete, conflict — one dialog per story; no kind-conversion dialog
`solutions/determined/experiences/agent-pants/package.json`	`storybook` script runs `storybook dev -p 4892`
`docs/planning/standards/S-0012-human-reviewable-ui-changes.md`	Requires light and dark screenshots, committed, indexed, for every UI-touching PR

Proposed

A new set of Ux* mocks in the same stories/ workshop, reading fixtures.ts (extended where a new field needs a fixture row), each rendered inside UxShellFrame.vue per the README’s convention:

Tree: kind-typed folder glyphs, an always-visible add affordance, a kind filter, and a dirty/open indicator per row.
Center pane: header plus a categorized linear edit form (Identity, Behavior, Publishing, Overrides, Package identity), the Overrides section rendered as one collapsed block per effective target, each block’s fields spelled in that harness’s own key names, plus the body editor.
Secondary pane: Preview (a target switcher over subtabs, each rendering the file a harness receives, with keys an override supplies marked; a plugin/marketplace renders its output tree instead), Related, and Publish as three views on the same pane.
Publish launch modal, a per-kind wizard entry (skips the “What” step), a kind-conversion dialog listing what is kept, dropped, and moved, an import flow with a source picker (local, GitHub, harness dirs) and a provenance panel, a hooks editor, and a harness gap table with an “override for this harness” action on a dropped or translated cell.
Two or three variants for the areas the user asked to iterate on: edit-form density and preview placement.
Every story renders once light and once dark, per S-0012.

Approach

Extend fixtures.ts with the rows the new mocks need: a hook fixture, a per-target override example (at least one field overridden for one target), and a harness gap example (a field a targeted harness drops or translates).
Build the tree mock (UxComponentTree.vue or similar, named to not collide with the real ApComponentTree.vue): kind glyphs, always-visible add, kind filter, dirty indicator.
Build the center-pane edit-form mock: categorized sections including the Overrides block, composed from the existing UxDEntityForm.vue/UxDFieldInfo.vue primitives; extend those primitives only if the section layout needs something they do not have.
Build the secondary-pane mock with Preview/Related/Publish as subtabs or a view switcher; Preview’s target switcher renders one file body per effective target with overridden keys marked.
Build the publish-launch modal, the kind-conversion dialog (destination path, fields kept/dropped, collisions), and extend Import.stories.ts’s mock with the source picker and provenance panel.
Build the hooks editor mock and the harness gap table mock, including the “override for this harness” action on a dropped cell.
Author two or three density/placement variants per story, capture light and dark, and update stories/README.md’s table with the new groups.
Run bun run --cwd solutions/determined/experiences/agent-pants storybook and capture screenshots for the S-0012 contact sheet.

Areas

Area	Note
`solutions/determined/experiences/agent-pants/stories/fixtures.ts`	Add hook, override and harness-gap fixture rows
`solutions/determined/experiences/agent-pants/stories/screens/UxTree.vue`	Tree mock with kind glyphs, add, filter, dirty indicator
`solutions/determined/experiences/agent-pants/stories/screens/Tree.stories.ts`	Stories for the tree mock, light and dark
`solutions/determined/experiences/agent-pants/stories/screens/UxEditForm.vue`	Categorized center-pane edit form mock, including Overrides
`solutions/determined/experiences/agent-pants/stories/screens/EditForm.stories.ts`	Density variants of the edit-form mock
`solutions/determined/experiences/agent-pants/stories/screens/UxPreviewPane.vue`	Target-switcher preview mock (skill/command/agent source, plugin/marketplace tree)
`solutions/determined/experiences/agent-pants/stories/screens/PreviewPane.stories.ts`	Placement variants of the preview mock
`solutions/determined/experiences/agent-pants/stories/dialogs/KindConversion.stories.ts`	Kind-conversion dialog mock: destination, kept/dropped fields, collisions
`solutions/determined/experiences/agent-pants/stories/screens/Import.stories.ts`	Add the source picker and provenance panel
`solutions/determined/experiences/agent-pants/stories/screens/UxHooksEditor.vue`	Hook editor mock
`solutions/determined/experiences/agent-pants/stories/screens/UxHarnessGapTable.vue`	Gap table mock with the per-cell override action
`solutions/determined/experiences/agent-pants/stories/screens/HooksAndGaps.stories.ts`	Stories for the hook editor and gap table
`solutions/determined/experiences/agent-pants/stories/README.md`	Document the new story groups
`docs/screenshots/agent-manager-workbench/`	Light/dark capture set and index per S-0012

Acceptance criteria

AC-1: bun run --cwd solutions/determined/experiences/agent-pants storybook serves every new story (tree, edit form with Overrides, preview with target subtabs, publish modal, kind-conversion dialog, import with source picker and provenance, hooks editor, harness gap table) at :4892 with no console error.
AC-2: Every new story has a light and a dark variant, captured under docs/screenshots/agent-manager-workbench/ with an index.html per S-0012.
AC-3: stories/README.md’s table lists every new group with its covered states.
AC-4: The edit-form density and preview-placement variants each render at least two named options, so the review has something concrete to choose between.
AC-5: grep -rn "Ux" solutions/determined/experiences/agent-pants/app/ finds no import of any file added by this task — the mocks stay outside app/ and unreachable from the product bundle.

Out of scope

Any change to a real component under app/components/ — this is a non-canonical mock set, deleted by the functional tasks that replace it (T-GHE3-edit-form-in-center-pane, T-K1A2-preview-pane-per-entity-and-target, T-BGPJ-wizard-direct-kind-flows, T-7V6K-import-from-github-and-source-picker, T-H56N-hooks-as-vault-entities, T-0AF7-hook-editor-and-harness-gap-table).
The shell chrome directions (stacked panel, split stage, tabs, focus ring) — those are T-PL39-stories-shell-chrome-directions.
Wiring the harness-capability-matrix data into the gap table for real — the mock hand-writes a fixture example; the real data source is T-HLEW-harness-capability-matrix.
Deciding the per-target override key syntax — that is T-IIZO-per-target-overrides; this task only needs a plausible example to mock against.

Dependencies

T-HLEW-harness-capability-matrix: the harness gap table mock needs example matrix cells (native/translated/ignored/rejected) to mock against, though it does not consume the real matrix.
Reads docs/planning/standards/S-0012-human-reviewable-ui-changes.md for the screenshot contract.

Discovery context

From the user’s Agent Manager planning request of 2026-09-07: prototype in Storybook first, land functionally second, style third. Scope drawn from solutions/agent-pants/docs/vault/design/workflow-and-ux-assessment.md (the tree, edit-form and preview-pane gaps) and solutions/agent-pants/docs/vault/research/agent-skills-conformance.md (the per-target override and harness-gap examples the mocks need to carry).

← Back to Tasks