T-PL39-stories-shell-chrome-directions

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

Goal

The shell chrome the Agent Manager sits in is changing on six axes at once — a stacked left panel, tabs that carry entity icons, a split primary stage, a subdued focus ring with rounded panels, settings-gear placement, and the titlebar merging into the OS title row. This task mocks every direction in the same Shell.stories.ts workshop that already hosts the focused-vs-workbench frame comparison, so each direction is judged against the real @sksizer/panes pane host before any shell package or app-frame component changes.

Today

Location	Role today
`solutions/determined/experiences/agent-pants/stories/Shell.stories.ts`	`TargetFocusedRail`, `WorkbenchRail`, `CurrentVsFocused` stories over `UxShellFrame.vue`; no stacked-panel, split-stage, tab-icon or focus-ring variant
`solutions/determined/experiences/agent-pants/stories/UxShellFrame.vue`	Drawn shell mock: real `PaneGroup`/`PaneConfig`, drawn titlebar/rail/strip; `secondary` slot renders one flat component tree, no section stack
`solutions/determined/docs/planning/desktop-framework/multi-vault-ux/f2-stacked-sidebar.html`	Prior-art static mock of a stacked left panel (Agent Manager / Browse / Git sections)
`packages/ts/app-frame/app/components/ShellExperienceStrip.vue`	Renders the settings gear as a route link at the bottom of the strip (`i-lucide-settings`, `to="/settings"`)
`packages/ts/app-frame/app/components/ShellTitlebar.vue`	Owns the `#layout` slot `ShellLayoutControl` sits in; no OS-title-row merge or traffic-light inset today
`packages/ts/app-frame/app/components/ScopeFocusBand.vue`	Focus-mode band; today’s `exitOnEscape` and collapse behavior for a focused window
`solutions/determined/packages/shell/app/components/ShellVaultSwitcher.vue`	Vault switcher; no “All vaults” exit-focus entry yet
`packages/ts/panes/src/usePaneGroup.ts`	Pane-group state; collapse today, no documented hidden state for a withheld pane
`packages/ts/ui/app/assets/css/tokens.css`	`--d-focus-ring-color` at full accent; no `--pane-radius` token or rounded-panel appearance axis
`docs/planning/standards/S-0012-human-reviewable-ui-changes.md`	Requires light and dark screenshots, committed, indexed, for every UI-touching PR

Proposed

New stories in the same Shell.stories.ts workshop (or sibling files beside it), each rendered inside UxShellFrame.vue or a variant of it:

Stacked left panel: three collapsible sections (Agent Manager, Browse, Git) in the secondary slot, replacing today’s flat tree, modeled after f2-stacked-sidebar.html.
Tabs with entity icons: a document-tab strip mock where each tab shows the icon of the kind it holds.
Split primary stage: two documents side by side in main, one divider, independent tab strips.
Focus ring and panel radius: a theme-variant story pairing the current full-accent ring and square corners against a subdued ring (color-mix toward transparent) and rounded panel corners.
Settings gear placement: rail-bottom (today) vs status-bar trailing end, as two named stories.
Titlebar merge: the shell titlebar drawn merged into the OS title row, with the layout control beside where traffic lights would sit.
Focused window without rail: no scope column, no Escape exit, an “All vaults” entry in the switcher.
Git section: changed files list plus a commit form showing validation warnings, inside the stacked panel’s Git section.

Every story light and dark, per S-0012.

Approach

Add a stacked-panel mock (UxPaneSectionStack.vue or inline in the story) with three collapsible sections over fixtures.ts data, referencing f2-stacked-sidebar.html for the section header and collapse affordance.
Add a tab-strip mock showing per-kind icons, reusing KIND_ICON-shaped fixture data.
Add a split-stage mock: two UxNoteStage.vue instances side by side with one divider.
Add a focus-ring/radius variant: duplicate the frame CSS custom properties block with the subdued ring and a rounded-corner set, side by side with today’s values.
Add the two settings-gear placement stories (rail footer vs status-bar trailing end).
Add a titlebar-merge story: draw the traffic-light inset and move ShellLayoutControl’s drawn equivalent into the same row.
Add the focused-without-rail story: no scope slot content, and an “All vaults” row in the switcher mock.
Add the git-section mock: a changed-files list, stage/message/commit controls, and a validation-warning callout with Ignore once / Always ignore.
Capture light and dark for every new story; update stories/README.md’s table.

Areas

Area	Note
`solutions/determined/experiences/agent-pants/stories/Shell.stories.ts`	Add the new direction stories alongside the existing frame comparison
`solutions/determined/experiences/agent-pants/stories/UxShellFrame.vue`	Accept a `secondary` variant prop or slot override for the stacked-panel and split-stage mocks
`solutions/determined/experiences/agent-pants/stories/UxPaneSectionStack.vue`	Stacked collapsible left-panel mock
`solutions/determined/experiences/agent-pants/stories/UxSplitStage.vue`	Two-document split-stage mock
`solutions/determined/experiences/agent-pants/stories/UxGitPanel.vue`	Changed-files list and commit form mock with validation warnings
`solutions/determined/experiences/agent-pants/stories/README.md`	Document the new shell-direction stories
`docs/screenshots/shell-chrome-directions/`	Light/dark capture set and index per S-0012

Acceptance criteria

AC-1: bun run --cwd solutions/determined/experiences/agent-pants storybook serves stacked panel, tab icons, split stage, focus-ring/radius, both gear placements, titlebar merge, focused-without-rail, and git-panel stories at :4892.
AC-2: Every new story has a light and a dark variant, captured under docs/screenshots/shell-chrome-directions/ with an index.html per S-0012.
AC-3: The gear-placement and focus-ring/radius stories each render both options named side by side or as separate named stories, so the review has a direct comparison.
AC-4: stories/README.md’s table lists the new Shell/ groups with their covered states.
AC-5: No file under packages/ts/app-frame/, packages/ts/panes/, or solutions/determined/packages/shell/ changes — the mocks stay inside experiences/agent-pants/stories/.

Out of scope

Any change to the real shell packages (app-frame, panes, the determined shell package) — the mocks are non-canonical, deleted by the functional tasks that replace them (T-SK5T-stacked-left-panel, T-RR9V-tabs-carry-entity-icons-and-views, T-HU19-split-primary-stage, T-7O6M-focus-ring-and-panel-radius, T-VJH9-settings-gear-and-layout-control-placement, T-LR5B-focused-vault-view-without-rail, T-L7YP-git-panel-commit-with-validation).
The Agent Manager workbench mocks (tree, edit form, preview, wizard) — those are T-I71M-stories-agent-manager-workbench.
Deciding the vault-git-status data shape — T-NS6Z-vault-git-status-service; this task mocks the panel with fixture data only.

Dependencies

Shares UxShellFrame.vue with T-I71M-stories-agent-manager-workbench; both tasks touch the same file, so land them in either order but rebase the second on the first.
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 the shell directions in Storybook before touching app-frame or panes. The stacked-panel direction reuses prior art at solutions/determined/docs/planning/desktop-framework/multi-vault-ux/f2-stacked-sidebar.html; the titlebar and gear-placement directions come from the same request’s “shell” area (command palette, settings gear, focused view, tabs, split view, stacked left panel, focus ring, radius).

← Back to Tasks