Initial public release of Warp.

Repo-Sync-Origin: warpdotdev/warp-internal@12af1d983b
This commit is contained in:
David Stern
2026-04-28 08:43:33 -05:00
commit 0dbd3d567a
4982 changed files with 1431549 additions and 0 deletions
+90
View File
@@ -0,0 +1,90 @@
# 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.
+69
View File
@@ -0,0 +1,69 @@
# APP-3578: Tech Spec — Vertical Tabs Dropdown Menu
## Problem
The vertical tabs panel reuses the horizontal tab bar's new-session menu. The Figma mock requires a distinct menu with different items, ordering, icons, and a single `+` trigger button.
## Relevant Code
- `app/src/workspace/view/vertical_tabs.rs` — `render_new_tab_button` (single `+` button, formerly `render_new_tab_split_button`)
- `app/src/workspace/view/vertical_tabs.rs` — `VerticalTabsPanelState` (mouse states), `VERTICAL_TABS_ADD_TAB_POSITION_ID` (menu anchor)
- `app/src/workspace/view.rs` — `new_session_menu_items()` (horizontal tab bar item builder)
- `app/src/workspace/view.rs` — `vertical_tabs_new_session_menu_items()` (vertical tabs item builder)
- `app/src/workspace/view.rs` — `toggle_new_session_dropdown_menu(position, is_vertical_tabs, ctx)` (opens the menu)
- `app/src/workspace/action.rs` — `WorkspaceAction::ToggleNewSessionMenu { position, is_vertical_tabs }`
## Changes Made
### 1. `is_vertical_tabs` field on `ToggleNewSessionMenu`
`WorkspaceAction::ToggleNewSessionMenu` now carries `is_vertical_tabs: bool`. Horizontal tab bar dispatch sites pass `false`; the vertical tabs `+` button passes `true`.
### 2. `vertical_tabs_new_session_menu_items()` method
New method on `Workspace` in `view.rs`. Builds items in Figma order with icons:
1. "Default" — `AddTab`, `LayoutAlt01` icon, ⌘T keybinding
2. "Agent" — `AddAgentTab`, `LayoutAlt01` icon (if AI enabled)
3. "Terminal" — `AddTerminalTab`, `LayoutAlt01` icon
4. "Cloud agent tab" — `AddAmbientAgentTab`, `LayoutAlt01` icon (if flags enabled)
5. Shells — `AddTabWithShell`, `LayoutAlt01` icon (if `ShellSelector` enabled)
6. Launch configs — `LayoutAlt01` icon, skip "Learn about Launch Configs..."
7. Tab configs — `LayoutAlt01` for non-worktree, `Dataflow02` for worktree configs
8. `MenuItem::Separator`
9. "New worktree" — `CreateNewTabConfig`, `Plus` icon
Worktree detection: a tab config is a worktree if any pane has `worktree_name_autogenerated` or commands containing `"git worktree"`.
### 3. `toggle_new_session_dropdown_menu` selects item builder and width
Accepts `is_vertical_tabs: bool`. When true: calls `vertical_tabs_new_session_menu_items()` and sets menu width to 268px. When false: calls `new_session_menu_items()` and resets width to `MENU_DEFAULT_WIDTH` (186px).
### 4. Single `+` button replaces split button
`render_new_tab_split_button` replaced by `render_new_tab_button` — a single `+` icon button. On click dispatches `ToggleNewSessionMenu { position, is_vertical_tabs: true }`. Removed `new_tab_menu_state` from `VerticalTabsPanelState`.
### 5. Menu positioning
For vertical tabs, the dropdown is anchored to the `+` button via `offset_from_save_position_element(VERTICAL_TABS_ADD_TAB_POSITION_ID, ...)` with `BottomLeft` → `TopLeft` anchoring (4px gap). For horizontal tabs, the existing `offset_from_parent` positioning is unchanged.
### 6. New SVG assets and Icon variants
Added `layout-alt-01.svg`, `layout-alt-02.svg`, `layout-alt-03.svg`, `layout-alt-04.svg`, `layout-bottom.svg` to `app/assets/bundled/svg/`. Added corresponding `LayoutAlt01` through `LayoutBottom` variants to `warp_core::ui::Icon`. Currently only `LayoutAlt01` is used; the others are available for future icon differentiation.
## End-to-End Flow
1. User clicks `+` in vertical tabs panel.
2. `ToggleNewSessionMenu { position, is_vertical_tabs: true }` dispatched.
3. Handler calls `toggle_new_session_dropdown_menu(position, true, ctx)`.
4. Menu width set to 268px, items built via `vertical_tabs_new_session_menu_items()`.
5. Menu rendered as overlay anchored below the `+` button via `VERTICAL_TABS_ADD_TAB_POSITION_ID`.
6. User selects an item → action dispatched (`AddTab`, `AddAgentTab`, `SelectTabConfig`, etc.).
## Files Changed
- `app/src/workspace/action.rs` — added `is_vertical_tabs` field
- `app/src/workspace/view.rs` — new `vertical_tabs_new_session_menu_items()`, updated `toggle_new_session_dropdown_menu`, updated menu positioning in `render()`, updated action handler
- `app/src/workspace/view/vertical_tabs.rs` — replaced split button with single `+` button, simplified state, made position ID `pub(super)`
- `warp_core/src/ui/icons.rs` — added `LayoutAlt01`, `LayoutAlt02`, `LayoutAlt03`, `LayoutAlt04`, `LayoutBottom` variants
- `app/assets/bundled/svg/` — added 5 new layout SVG icons
- `specs/APP-3578/` — PRODUCT.md and TECH.md