T-XEAL-workbench-styling-iteration
State: planning/proposed · Impact: medium · Complexity: medium
The Agent Manager screens and the shell frame around them were built function-first, across several tasks with no single styling pass over the result. This task is the deliberate final pass over density, spacing, panel headers, badges and dividers, using only the shared design tokens and appearance axes so nothing here becomes a per-experience palette.
| Location | Role today |
|---|---|
solutions/determined/experiences/agent-pants/stories/UxShellFrame.vue | 555-line Storybook mock of the determined shell at mode: 'focused' | 'workbench', strip: 'rail' | 'top'; wraps the real @sksizer/panes PaneGroup under a drawn titlebar and rail |
solutions/determined/experiences/agent-pants/stories/Shell.stories.ts | Story registrations for the shell frame directions |
packages/ts/ui/app/assets/css/tokens.css | --d-* design tokens: radius scale (~424-435), focus ring (~551), density and shadow token families |
packages/ts/ui/app/composables/useAppearance.ts | The appearance axes (theme, density, radius, shadow, rail, contrast, path, icons, panels, …) and their data-* attribute mapping |
solutions/determined/experiences/agent-pants/stories/screens/ | The Agent Manager screen mocks (Home, Skill/Plugin pages, Import) this pass styles |
Proposed
Section titled “Proposed”Storybook hosts variants of density, spacing, panel headers, badges and section dividers across
the Agent Manager screen mocks and UxShellFrame.vue. The chosen variant is adopted in the real
components through --d-* tokens and useAppearance axes only — no new per-experience CSS
values — per S-0010-design-language-consumption.
Approach
Section titled “Approach”- In Storybook, add variants across the existing screen mocks and
UxShellFrame.vuetrialing density, spacing, panel header treatment, badge styling and section dividers, built only from--d-*tokens and existinguseAppearanceaxes (density,radius,shadow,contrast). - Review the variants, light and dark; settle on one shape per surface.
- Port the chosen styling into the real Agent Manager components the mocks in
stories/screens/stand in for, and into the shell frame componentsUxShellFrame.vuemirrors (ShellTitlebar.vue,ShellExperienceStrip.vue, panel headers). - Verify no new hardcoded color or spacing value was introduced outside
--d-*tokens in the touched files. - Capture before/after screenshots, light and dark, per S-0012-human-reviewable-ui-changes.
| Area | Note |
|---|---|
solutions/determined/experiences/agent-pants/stories/UxShellFrame.vue | Density/spacing/panel-header/badge/divider variants |
solutions/determined/experiences/agent-pants/stories/Shell.stories.ts | Register the new variants |
solutions/determined/experiences/agent-pants/stories/screens/ | Apply the chosen styling across the screen mocks |
solutions/determined/experiences/agent-pants/app/components/ | Adopt the chosen styling in the real components the mocks stand in for |
Acceptance criteria
Section titled “Acceptance criteria”- AC-1: Storybook hosts density/spacing/panel-header/badge/divider variants for both the
Agent Manager screens and
UxShellFrame.vue, light and dark. - AC-2: The shipped styling uses only
--d-*tokens anduseAppearanceaxes; a grep for hex colors and raw pixel literals in the touched files finds none outside token definitions. - AC-3: Before/after screenshots (light and dark) exist per S-0012-human-reviewable-ui-changes.
Out of scope
Section titled “Out of scope”- New appearance axes or new
--d-*tokens; this task consumes what exists (S-0010-design-language-consumption). - The wizard’s own styling (T-NZ0K-wizard-ux-iteration).
- Focus ring subtlety and a settable panel-radius axis; that ships in T-7O6M-focus-ring-and-panel-radius.
Dependencies
Section titled “Dependencies”- T-GHE3-edit-form-in-center-pane and T-I71M-stories-agent-manager-workbench: this pass runs after the functional editor-workbench layout and the Storybook fixtures they establish are in place.
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-NZ0K-wizard-ux-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