Skip to content

Agent Detail tabs: overflow into a "More" dropdown instead of horizontal scroll #1114

Description

@vybe

Summary

The Agent Detail page (src/frontend/src/views/AgentDetail.vue) now has many tabs (Overview, Chat, Session, Tasks, Dashboard, Schedules, Loops, Playbooks, Git, Files, Skills, Folders, Sharing, Permissions, Guardrails, Info, …). On narrower viewports the tab bar overflows horizontally and currently relies on overflow-x-auto horizontal scrolling, which is easy to miss and awkward to use. Replace the horizontal scroll with a responsive layout that keeps as many tabs visible as fit and collapses the remainder into an overflow "More ▾" dropdown on the right edge.

Context

The tab nav is rendered at src/frontend/src/views/AgentDetail.vue (currently <div class="… overflow-x-auto …"> wrapping a <nav class="-mb-px flex whitespace-nowrap"> over visibleTabs). Horizontal scroll bars are a poor discovery mechanism — tabs that don't fit are effectively hidden. A "More" overflow menu is the conventional pattern (e.g. browser tab strips, GitHub's own nav) and keeps every tab reachable without scrolling.

Acceptance Criteria

  • When the tab bar has enough horizontal space, all tabs render inline exactly as today (no visual regression).
  • When tabs don't fit, the overflowing tabs collapse into a right-aligned "More ▾" dropdown instead of horizontal scroll; clicking a tab inside the dropdown activates it.
  • The dropdown re-measures and reflows on window/container resize (e.g. via ResizeObserver), not just on initial render.
  • If the currently-active tab would land in the overflow set, it stays visible (or the "More" trigger reflects the active state) so the user always sees which tab is selected.
  • Tab badges (e.g. the success-count badge) render correctly both inline and inside the dropdown.
  • Works in dark mode and on touch; keyboard-accessible (dropdown openable/closable and items focusable).
  • Deep-linking via ?tab= still selects the correct tab whether it's inline or in the overflow menu.

Technical Notes

  • Source: src/frontend/src/views/AgentDetail.vue — the <nav> over visibleTabs and its overflow-x-auto wrapper.
  • Consider extracting an OverflowTabs.vue reusable component (src/frontend/src/components/) so the same pattern can serve the Operations tabbed view (src/frontend/src/views/Operations.vue) which has a similar ?tab=-driven tab strip.
  • Measurement approach: render tabs, measure cumulative width against the container with a ResizeObserver, move the trailing tabs that don't fit (reserving room for the "More" trigger) into the dropdown. Keep the active tab out of the overflow set when possible.
  • Pure frontend change — no backend endpoints involved. Per Architectural Invariant Feature/process engine #6, keep view composition in the view/component layer.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions