galaxy/specs/APP-3656/PRODUCT.md

APP-3656: Vertical Tabs Panel — Compact Mode + View Toggle

Summary

Add a compact display mode for the vertical tabs panel and a settings icon button that opens a popup to switch between compact and expanded views. In compact mode, each pane is rendered as a single-line row (icon + title) instead of the current multi-line card layout.

Problem

The current expanded pane rows show rich detail (working directory, branch, agent status, diff stats, PR badge) and occupy significant vertical space. When a user has many tabs and panes, the panel requires heavy scrolling. Users need a denser view that lets them quickly scan and switch between panes without scrolling past multiple lines of metadata per item.

Goals

• Let users switch the vertical tabs panel between a dense compact view and the current detailed expanded view.
• Persist the user's preference across sessions.
• Add a control-bar icon button that opens a settings popup for toggling the view mode.

Non-goals

• Group-by: The settings popup in the Figma mocks also contains "Group panes by" options (Tab, Directory/Environment, Branch, Status). These are out of scope for this ticket.
• Compact group headers: Group headers remain unchanged in both modes. Iterating on header layout is a separate concern.
• Search functionality: The search input in the control bar remains inert (per APP-3648).

Figma / design references

• Compact view: https://www.figma.com/design/CsBdBW4YoLgSAbr5eSkwV6/House-of-Agents?node-id=7079-25549&m=dev
• Compact view (settings button active): https://www.figma.com/design/CsBdBW4YoLgSAbr5eSkwV6/House-of-Agents?node-id=7079-24535&m=dev
• Expanded view + settings popup: https://www.figma.com/design/CsBdBW4YoLgSAbr5eSkwV6/House-of-Agents?node-id=7103-34398&m=dev

Intentional deviation from mocks: In compact mode, non-agent terminal panes display the terminal title (e.g. process name, user-set title) instead of the working directory shown in the mock.

User experience

View modes

The vertical tabs panel supports two view modes:

• Expanded (default, current behavior): Multi-line pane rows with full metadata (working directory, git branch, conversation status, agent badge, diff stats, PR badge). This is the existing layout, unchanged.
• Compact: Single-line pane rows with just an icon and a title string. Described in detail below.

Setting

A new user setting (VerticalTabsViewMode) controls which mode is active. It is a synced setting (cloud-persisted) with two variants: Compact and Expanded. Default is Expanded.

Settings icon button

A new icon button is added to the existing control bar in the vertical tabs panel header, to the left of the existing Configs button and Plus button.

• Icon: settings-04 (a sliders/filter icon, per the Figma mock).
• Size: 16×16 icon in a 20×20 hit target with 2px padding, matching other icon buttons in the control bar.
• Behavior: Clicking the button toggles the settings popup open/closed.
• Active state: When the popup is open, the button has a highlighted background (fg_overlay_3), matching the active state shown in mock 2.
• Tooltip: On hover (when popup is closed), show "View options".

Settings popup

The popup appears anchored below the settings icon button.

• Contents: A segmented control with exactly two segments:
  • Left segment: Hamburger/list icon (menu-01), representing compact mode.
  • Right segment: Grid icon (grid-01), representing expanded mode.
• The segment corresponding to the current view mode is visually selected (highlighted background).
• Clicking a segment immediately switches the view mode setting and the panel re-renders.
• Dismiss: The popup closes when the user clicks outside it, presses Escape, or clicks the settings icon button again.
• Positioning: Anchored to the bottom edge of the settings button, left-aligned with it. If the popup would clip outside the window, reposition within window bounds.
• Style: Rounded container with border (neutral_4), subtle background, and drop shadow, matching the existing option menu pattern.

Compact pane rows

In compact mode, each pane row within a tab group is a single-line element:

[icon 16×16] [4px gap] [title text, 12px, single line, ellipsis truncation]

With horizontal padding (12px left and right) and vertical padding (8px top and bottom) per row. Rows have 4px corner radius, consistent with the expanded layout.

Per-pane-type content

Terminal pane (non-agent):

• Icon: Terminal icon (same as expanded tertiary line).
• Title: The terminal title from the shell (e.g. the running process name or user-set title). This intentionally differs from the mock, which shows the working directory.

Terminal pane (agent session):

• Icon: Conversation status icon (the colored status badge — running, stopped, completed, etc.) at 16×16.
• Title: The conversation display title (e.g. "Refactor the button component to use..."). Truncated with ellipsis if it overflows.

Terminal pane (ambient agent):

• Icon: OzCloud icon.
• Title: The conversation display title if available, otherwise the terminal title.

Code pane:

• Icon: Code file icon (language-specific if available, falling back to generic code icon).
• Title: The file name/path as shown in the pane title.

Other panes (Notebook, Workflow, Settings, Rules, Plan, MCP Server, etc.):

• Icon: The type-specific icon (same icon used in the expanded view's kind badge).
• Title: The pane configuration title.

Split panes (multiple visible panes in one tab group)

Each visible pane in a tab group gets its own single-line compact row, same as in expanded mode. There is no combined-row or "(+N)" treatment — the group collapse/expand chevron and the pane count label in the group header already communicate how many panes exist.

Row interactions

All interactions are identical to the expanded view:

• Click: Focus the pane (WorkspaceAction::FocusPane).
• Right-click: Open the tab right-click context menu.
• Hover: Highlight with fg_overlay_1 background (or fg_overlay_2 if selected). Cursor changes to pointing hand.
• Selected state: The focused pane in the active tab has a fg_overlay_2 background and a 1px fg_overlay_2 border.
• Drag: Pane rows are not individually draggable (only entire tab groups are draggable, unchanged).

Row indicators

• Unsaved changes indicator: For code panes with unsaved changes, show a small filled circle icon (circle-filled, 16×16) to the right of the title text, same as the expanded view's badge. This is right-aligned in the row.

Tab color support

Per-pane and per-group tab colors work the same as in expanded mode. In compact mode, the color applies as a background tint on the pane row (at TAB_COLOR_OPACITY / TAB_COLOR_HOVER_OPACITY).

Group headers

Group headers are unchanged between compact and expanded modes. They continue to show:

• Left: Group title (uppercase, 10px, sub-text color)
• Right: Pane count label + collapse/expand chevron

The collapse/expand behavior for groups works the same in both modes. Collapsing a group hides all its pane rows (whether compact or expanded).

Transitions

Switching between compact and expanded mode re-renders all pane rows immediately. No animation is required. The scroll position should be preserved as closely as possible (the scroll state handle is shared).

Success criteria

1. A VerticalTabsViewMode setting with Compact and Expanded variants is persisted as a synced cloud setting.
2. The settings icon button appears in the control bar between the search input and the Configs button.
3. Clicking the settings icon button opens a popup with a two-segment control (compact/expanded). Clicking a segment switches the mode immediately.
4. The popup closes on outside click, Escape, or re-clicking the settings button.
5. In compact mode, every pane type renders as a single-line row with the correct icon and title per the rules above.
6. Non-agent terminal panes in compact mode show the terminal title (not the working directory).
7. Agent terminal panes in compact mode show the conversation status icon and conversation title.
8. Code panes show the unsaved-changes circle indicator when applicable.
9. Tab-color tinting works correctly on compact rows.
10. Group headers, collapse/expand, drag-to-reorder tabs, and right-click context menus all work unchanged in compact mode.
11. Switching modes preserves the scroll position and does not reset collapsed/expanded group states.
12. The setting defaults to Expanded, matching current behavior — no user-visible change until the user explicitly switches.

Validation

• Visual inspection: Toggle between compact and expanded modes. Verify that compact rows are single-line, icons are correct per pane type, and text truncates with ellipsis.
• Terminal title vs pwd: Open a non-agent terminal, set a custom title or run a process, switch to compact mode, and verify the terminal title (not the pwd) is shown.
• Agent panes: Start an agent conversation, switch to compact mode, verify the status icon and conversation title are shown.
• Unsaved code indicator: Open a code file, make an unsaved edit, switch to compact mode, and verify the filled circle indicator appears.
• Tab colors: Assign a tab color, switch to compact mode, verify the color tint is visible on the compact row.
• Settings popup: Click the settings icon, verify the popup appears anchored below it with the correct segment selected. Click the other segment, verify the mode switches. Click outside, verify the popup closes.
• Persistence: Switch to compact mode, quit and relaunch, verify the panel opens in compact mode.
• Narrow panel: Resize the panel to minimum width (200px) in compact mode. Verify rows truncate gracefully and the control bar remains usable.
• Group collapse: Collapse a group in compact mode, switch to expanded, verify it remains collapsed.

Open questions

None — all resolved:

1. Should the compact view hide the group pane count label? No. Keep it unchanged.
2. Keyboard shortcut to toggle compact/expanded? Out of scope for now; to be added later.
3. Where does the compact/expanded toggle live when group-by is added? It stays inside the same popup, per the Figma mock.