T-VJH9-settings-gear-and-layout-control-placement

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

Goal

In the bar (top) placement, the settings gear sits inline inside the experience-tab row rather than in a clearly separate spot, while the rail placement already isolates it in the rail’s own footer. The shell titlebar also runs as a command deck above a separately OS-decorated window, so the traffic lights and the layout control never share a row. This task gives bar placement the same isolation rail placement already has, and merges the titlebar into the OS title row.

Today

Location	Role today
`packages/ts/app-frame/app/components/ShellExperienceStrip.vue`	Gear renders inline at the end of the horizontal tab row, after a separator, for `top` (bar) placement
`packages/ts/app-frame/app/components/ShellExperienceRail.vue`	Gear already renders after a spacer and separator in the rail’s own footer, for `rail` placement — no change needed here
`packages/ts/app-frame/app/components/ShellTitlebar.vue`	Command deck with a `#layout` slot for `ShellLayoutControl`; its own doc states the product runs a stock decorated window and paints no traffic lights or drag region
`packages/ts/app-frame/app/components/ShellLayoutControl.vue`	The layout control (panel toggles, strip placement, appearance, Settings), mounted in `ShellTitlebar`’s `#layout` slot
`packages/ts/ui/app/components/DStatusBar.vue`	Three-region footer bar (`start`/default/`end` slots)
`packages/ts/app-frame/app/layouts/default.vue`	Mounts `DStatusBar` with `#end` already holding the command-palette and theme-toggle buttons; mounts `ShellExperienceStrip` or `ShellExperienceRail` per the strip placement
`solutions/determined/packages/shell/app/app.config.ts`	`experienceStrip: true` opts the determined shell into the strip/rail axis
`solutions/determined/products/agent-pants/src-tauri/tauri.conf.json`	A stock decorated OS window; no `titleBarStyle`, no traffic-light inset
`packages/ts/app-frame/app/pages/lab.vue`	The frame’s own preview page for chrome components, unaffected by a native window config

Proposed

In top (bar) placement, Settings leaves the tab row and moves to DStatusBar’s trailing #end region, matching the isolation rail placement already has. The agent-pants Tauri window switches to an overlay title bar with a measured traffic-light inset, and ShellTitlebar.vue reserves that inset as leading padding so the layout control sits on the same row as the OS traffic lights rather than in a bar beneath them. The merged titlebar is tried first on lab.vue, which can only simulate the inset in a browser, before the real Tauri build.

Approach

ShellExperienceStrip.vue: remove the inline Settings link and its preceding separator from the tab row.
layouts/default.vue: add Settings to DStatusBar’s #end region; decide whether it sits before or after the existing command-palette and theme buttons — the rail’s own placement puts Settings last, after a separator, which argues for last here too.
Update any selector that targeted the strip’s inline Settings link to the new location.
tauri.conf.json: add an overlay title-bar style under the window config; measure the resulting traffic-light region.
ShellTitlebar.vue: add a leading inset, sized from the measurement as a CSS custom property, applied only when the host declares an overlay window — name the read (a prop, or a composable that inspects the window config) as an open decision.
Preview the merged layout on lab.vue with a simulated inset before wiring the real Tauri window.
Capture light and dark screenshots of both placements’ new Settings location and the merged titlebar.

Areas

Area	Note
`packages/ts/app-frame/app/components/ShellExperienceStrip.vue`	Remove the inline Settings link
`packages/ts/app-frame/app/layouts/default.vue`	Add Settings to `DStatusBar`’s `#end` region
`packages/ts/app-frame/app/components/ShellTitlebar.vue`	Leading inset for an overlay window’s traffic lights
`packages/ts/app-frame/app/pages/lab.vue`	Preview the merged titlebar with a simulated inset
`solutions/determined/products/agent-pants/src-tauri/tauri.conf.json`	Overlay title-bar style on the window

Acceptance criteria

AC-1: In top placement, ShellExperienceStrip.vue’s tab row carries no Settings entry; Settings is reachable from DStatusBar’s trailing region.
AC-2: In rail placement, Settings still renders in ShellExperienceRail’s footer, unchanged.
AC-3: The agent-pants Tauri window renders an overlay title bar with the layout control on the same row as the OS traffic lights.
AC-4: lab.vue previews the merged titlebar with a simulated inset for a reviewer without a Tauri build.
AC-5: Light and dark screenshots of both placements are added to the S-0012 contact sheet.

Out of scope

Redesigning the layout control’s own menu contents.
Any non-Tauri host (SDF, suspenders) that opts into experienceStrip but ships no native window config.

Dependencies

T-PL39-stories-shell-chrome-directions supplies the mocked direction for both placements.

Discovery context

From the user’s planning request of 2026-09-07. ShellTitlebar.vue’s own module doc records the “stock decorated window, no traffic lights” starting state this task changes.

← Back to Tasks