galaxy/specs/APP-3578/PRODUCT.md

APP-3578: Vertical Tabs — New Session Dropdown Menu

Summary

Redesign the vertical tabs "new tab" button and its dropdown menu to match the Figma mock. The horizontal tab bar menu is unchanged.

Problem

The vertical tabs panel currently uses the same new-session dropdown as the horizontal tab bar, including separators, item ordering, and a split [+][v] button. The Figma design calls for a simpler, flatter menu specific to vertical tabs.

Goals

• Replace the split [+][v] button with a single + button that opens the dropdown on click.
• Show a vertical-tabs-specific menu with no separators between groups, a different item ordering, icons per item, and a "New worktree" footer item replacing "Create new tab config...".
• Keep the horizontal tab bar menu unchanged.

Non-goals

• Search bar in the dropdown (follow-up).
• Pixel-perfect match of the Figma menu item padding/spacing (the Menu component has hardcoded constants that can't be overridden per-instance).
• Changing the "New worktree" action (it uses the same behavior as "Create new tab config...").

Figma

• Dropdown menu: https://www.figma.com/design/CsBdBW4YoLgSAbr5eSkwV6/House-of-Agents?node-id=7157-41707&m=dev
• Plus button: https://www.figma.com/design/CsBdBW4YoLgSAbr5eSkwV6/House-of-Agents?node-id=7150-39859&m=dev

User Experience

Plus button

• Single + icon button in the vertical tabs control bar, to the right of the search input.
• Clicking the button opens the new-session dropdown menu anchored below the button.
• Tooltip on hover: "New Tab" with keybinding sublabel.

Dropdown menu items (in order)

1. "Default" — creates a new tab (same as current AddTab / welcome tab behavior). Shows ⌘T keybinding. Icon: LayoutAlt01.
2. "Agent" — creates an agent tab (behind AI feature flag). Icon: LayoutAlt01.
3. "Terminal" — creates a terminal tab. Icon: LayoutAlt01.
4. "Cloud agent tab" — creates a cloud agent tab (behind AgentView + CloudMode flags). Icon: LayoutAlt01.
5. Available shells (behind ShellSelector flag) — one item per shell, no separator above. Icon: LayoutAlt01.
6. Launch configs — rendered as "Launch {name}" items. Icon: LayoutAlt01.
7. Tab configs — one item per loaded tab config, no separator above. Icon: LayoutAlt01 for non-worktree configs, Dataflow02 for worktree configs.
8. Separator line.
9. "New worktree" — opens the tab config template file (same as current "Create new tab config..."). Icon: Plus.

Icons

• All non-worktree items use the LayoutAlt01 icon (sidebar-left layout shape).
• Worktree tab configs use the Dataflow02 icon (merging-branches shape from Figma dataflow-02). A tab config is detected as a worktree if any pane has worktree_name_autogenerated = true or commands containing "git worktree".
• "New worktree" uses the Plus icon.

Items removed from the vertical tabs menu

• "Restore Closed Tab" (will exist elsewhere).
• "Learn about Launch Configs..." link.
• All MenuItem::Separator dividers between groups (only one separator remains, before "New worktree").

Items unchanged

• Launch configs still appear (rendered as "Launch {name}" items between shells and tab configs).

Edge Cases

1. No AI enabled: Agent and Cloud agent tab items are hidden (same gating as today).
2. No tab configs: Only the built-in items + shells + "New worktree" appear.
3. Menu lifecycle: Same as existing — closes on item selection, click outside, or Escape.
4. Menu width: Set to 268px for the vertical tabs dropdown (matching the Figma OptionMenuItem width). Resets to default 186px for horizontal tabs.

Success Criteria

• Vertical tabs panel shows a single + button (no chevron).
• Clicking + opens a flat dropdown anchored below the button with items in the Figma order.
• No separator lines between item groups; one separator before "New worktree".
• Each item has an icon (LayoutAlt01, Dataflow02, or Plus).
• "New worktree" item opens the tab config template file.
• Horizontal tab bar menu is completely unchanged.

Validation

• Visual inspection of vertical tabs dropdown matches Figma mock.
• Click each menu item and confirm the correct action fires.
• Confirm horizontal tab bar dropdown is unaffected.
• Test with TabConfigs and ShellSelector feature flags on and off.

Known Limitations

The Menu component has hardcoded layout constants that cannot be overridden per-instance:

• Item padding: 5px vertical / 14px horizontal (Figma specifies 8px / 16px).
• No gap between items (Figma uses 2px).
• Corner radius: 5px (Figma uses 4px).
• Menu body padding: 9px top/bottom (Figma has none).

Matching these exactly requires either adding per-instance padding/radius overrides to Menu, or building a separate component.