feat(desktop): add top bar ports dropdown as a third ports layout

AV
3mo ago
+634-529

Summary

  • Extends the ports-layout experiment from inline-vs-panel to a three-way display mode: under each workspace (inline chips, unchanged default), sidebar bottom panel, or the new top bar dropdown. The persisted setting migrates (old on → inline, old off → panel), and Settings → Experimental now uses a select instead of a switch.
  • In topbar mode, a compact pill (radio-tower icon + live port count) renders in the TopBar's right cluster, and — because the TopBar is hidden on the v2 workspace route when the sidebar is open — also in the workspace tab bar's trailing slot, so it's reachable everywhere.
  • The dropdown lists every detected port grouped by workspace: rows have a fixed mono :port column, label · process text, and a hover-revealed action cluster (open in browser via the existing port-open preference, copy URL, close port). Group headers navigate to the workspace, show a remote tag for non-local hosts, and expose a hover ✕ that closes all ports for that workspace; the footer has a global close-all.
  • In topbar mode the sidebar's DashboardSidebarPortsProvider goes inert so port polling and port:changed subscriptions aren't duplicated — the dropdown reads useDashboardSidebarPortsData directly and shares the same react-query keys.
  • The store's experiment-teardown comment documents all three arms and exactly what to delete once a winner is picked.

Screenshots

Test plan

  • Settings → Experimental → "Workspace ports display": switch between all three modes; chips/panel/pill appear and disappear accordingly, and the choice survives a restart (including migration from the old boolean setting).
  • With dev servers running, verify the pill count matches detected ports and updates live; open/copy/close a single port; close all for one workspace from its group header; close all from the footer.
  • Verify the pill shows on dashboard routes (TopBar) and on the v2 workspace route with the sidebar open (tab bar trailing slot).
  • bun run lint and desktop typecheck pass (verified locally).

https://claude.ai/code/session_018hKiDErNgDrZCGMwQcRjdn

Open in Stage

Summary by cubic

Adds a top‑bar ports dropdown and reduces the workspace‑ports experiment to two modes: inline chips under each workspace (default) or a top‑bar dropdown; the previous bottom panel is removed. The pill renders once in the active chrome (sidebar header when expanded, otherwise in the TopBar or the v2 workspace tab bar) and keeps live counts/actions consistent across navigation.

  • Dropdown: shows a live total; groups by workspace with a “remote” tag; per‑row open (respects preference), open in external browser, copy URL, close; per‑workspace close‑all; global Close all in the footer.
  • Data flow: a single ports provider now lives in the dashboard layout and is enabled only when needed (v2 + top‑bar mode, or inline mode with an open, expanded sidebar), preventing duplicate polling and pill flicker across remounts.
  • Settings/migration: experimental setting renamed to “Ports in top bar dropdown”; the store now uses a mode string; persisted “panel” and the old boolean are migrated to “topbar”.
  • UX fixes: seed the pane store from persisted layout to avoid tab‑bar flashes on workspace switches; gate the background‑terminals button on layout hydration to prevent a brief incorrect count; raise the expanded sidebar minimum width to 225px.

Summary by CodeRabbit

  • New Features
    • Added “Workspace ports display” to switch detected ports between inline mode and the top-bar dropdown.
    • Enhanced the top-bar ports dropdown with workspace grouping, live totals, scrollable lists, and “close all” actions.
  • Changes / Improvements
    • Consolidated ports into a single shared dashboard data flow so they stay consistent across navigation/remounts.
    • Prevented duplicate ports controls depending on which layout chrome is active.
  • Settings
    • Updated experimental ports setting text/keywords to match the new dropdown-based experience.
    • Added “Wait for setup before starting agent” experimental setting.
  • Other
    • Increased the minimum dashboard sidebar width for resizing behavior.