# 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.