#5439 feat(desktop): morph v2 sidebar inline agent/port sections into a compact activity strip

Summary

• Replaces the experimental-inline sidebar's per-workspace "N ports" / "N agents" toggle sections (up to ~6 lines per workspace) with a single fixed-height activity strip: overlapping agent circles + a port-count pill at rest, morphing into the full labeled agent/port pills on hover.
• The morph is real geometry animation (margins/max-widths), not a fade — snappy 200ms expand, easy 500ms retract, staggered port unfold, prefers-reduced-motion respected.
• Clicking the strip's empty area opens the workspace, same as clicking the row.

Why / Context

With the experimental inline layout enabled, workspaces with a dev stack running showed two summary rows plus multiple wrapped rows of truncated chips each ("Notification…", "Caddy Elec…"), making the sidebar unscannable (~6 lines per workspace). The chips were also mostly redundant across workspaces — the at-rest signal is just "which agents, what status, how many ports". Detail is now one hover away instead of permanently expanded.

How It Works

• DashboardSidebarWorkspaceDetails is now a single scrolling row (fixed 22px) instead of two collapsible sections. Expansion is driven by a new Tailwind @custom-variant details-expanded (in globals.css): active when the workspace item (group/item) is hovered or focus-within, or a dropdown inside the strip (group/details) is open — so the strip can't collapse under an open menu.
• DashboardSidebarWorkspaceAgentBadge is one element in both states: an 18px facepile circle (preset icon + StatusIndicator dot) overlapping neighbors via negative margin at rest; on expand the margin opens and the label's max-width grows, so the circle morphs into the pill. Clickable in both states (jumps to the agent's terminal).
• Port pills (DashboardSidebarPortBadge, unchanged, shared with the bottom ports panel) sit in unfold wrappers whose max-width/opacity/visibility animate from zero with a 25ms-per-item stagger (capped at 8), while the port-count pill collapses in the opposite direction. Collapsed content is visibility: hidden, so it's not clickable/tabbable.
• Removed: the section toggle rows, DashboardSidebarWorkspacePortsRow, DashboardSidebarWorkspaceAgentsRow, and the workspace-details collapse-state store (all dead with no toggles). The agent badge + running-agents hook moved under DashboardSidebarWorkspaceDetails/ per co-location rules.

Design reference: the spread-on-hover avatar stack pattern (shadcn.io Avatar Group / Animate UI Avatar Group). Implemented natively with CSS transitions instead of their framer-motion variants because our chips must morph into labeled, interactive pills and hold open while menus are up, which the CSS :has-based variant handles without JS hover state.

Manual QA Checklist

Validated live in the dev app over CDP (flags enabled in Settings → Experimental):

• Rest state: agent circles overlap with status dots; port-count pill shows; workspaces without agents/ports show no strip
• Hover: circles morph into labeled pills (measured 18px → ~63px, positions spread) and retract fully on mouse-out
• Asymmetric timing (0.2s expand / 0.5s retract) via computed styles
• No layout shift: strip height constant through the animation
• Clicking strip empty area navigates to the workspace (hash changes); chip clicks still do their own thing
• Both flags off → no strip rendered (sections gate on the same stores as before)
• Port pills unfold + stagger with a live dev stack (mechanism verified; no workspace had detected ports during final re-test)
• Menu-open hold: strip stays expanded while a port pill's dropdown is open

Testing

• bun run typecheck
• bun run lint
• Manual verification in dev app via CDP (screenshots/measurements above)

Known Limitations

• At rest, agent labels and individual ports aren't visible — hover reveals them. Status is still visible at rest via each circle's status dot.
• The "+N" facepile overflow cap was dropped; all agents render as circles at rest (overlap keeps width small; typical count is 1–3).

---

---

Summary by cubic

Replaced the inline sidebar’s per-workspace “N ports / N agents” sections with a single compact activity strip that expands on hover into labeled agent/port pills. This keeps each workspace to one line and makes the list easier to scan while keeping status and actions close.

• New Features

  • Fixed 22px activity strip: overlapping agent circles + a port-count pill at rest; expands on hover/focus or while a chip menu is open.
  • Real geometry animation (margins/max-widths), 200ms in / 500ms out, staggered port unfold on expand only (capped at 8), reduced motion respected, no layout shift.
  • Empty strip area opens the workspace; chip clicks keep their actions; ignores clicks on portaled dropdown items and role=menuitem to prevent unwanted navigation.
  • New details-expanded Tailwind variant drives the expand state (group/item hover/focus or group/details:has([data-state="open"])).

• Refactors

  • Removed per-section toggles and the workspace-details store; deleted DashboardSidebarWorkspaceAgentsRow, DashboardSidebarWorkspacePortsRow, and toggle component.
  • Merged behavior into DashboardSidebarWorkspaceDetails; agent badge now morphs from a facepile circle to a labeled pill; running-agents hook and badge co-located.
  • Added group/item to the workspace row and OverflowFadeContainer for horizontal overflow; no dependency changes.

Summary by CodeRabbit

• New Features

  • Dashboard sidebar workspace items now reveal an expanded details strip when hovered, focused, or opened, with richer inline port and agent badges.
  • A compact port counter and staggered port badges animate in, and a “Close all ports” action appears when multiple ports are present.

• Bug Fixes

  • Improved interaction handling so clicks and pointer events on the details strip don’t interfere with drag-and-drop or other sidebar controls.
  • Details rendering is now streamlined (no separate section toggles needed) for more consistent behavior.