mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

swarm-ui: move dynamic agent-term tabs into the top nav bar

Browse source 
mara, PR review: "the dynamic tab should be in the top bar, not a new
one below". Moves the .shell-tabs group from its own sticky row under
the header into .shell-nav itself, right after the nav indicator.

Also adds a third re-measure effect for the sliding nav indicator,
keyed on tabs.length: with tabs inline in the same flex row the
indicator measures, closing a background tab (no navigation) can
shrink the row without the hop effect's own re-measure ever firing.
Same reflow-not-navigation reasoning as the existing resize-listener
effect.
This commit is contained in:
iris 2026-09-28 22:17:10 +02:00 • committed by mara
commit 88c386c96c
1 changed files with 55 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

35
frontend/packages/swarm-ui/src/shell/Shell.css
View file

@ -165,33 +165,22 @@
.shell-nav-indicator.shell-nav-indicator-instant {
transition: none;
}
/* Dynamic tab row — sits below `.shell-header`, its own sticky
strip rather than folded into the header itself: the header's own
sticky offset (`top: 0`) is already claimed, and a header that grows
taller every time a tab opens would shift `.shell-nav`'s measured
positions (`measureIndex`, Shell.tsx) out from under the sliding
indicator mid-animation. `top` below is `.shell-header`'s own
footprint — `0.75em` padding top+bottom either side of the
`2.75em`-min-height nav row (`.shell-nav-link`, this file), so ~4.25em
rounded up to 4.5em for the 1px border + a little slack — not
measured, same fixed-estimate tradeoff `AgentTerminalPage.css`'s own
comment makes for the same reason (not worth a ResizeObserver for one
sticky offset), and the same 4.5em value that file's own height calc
already uses for this header, so the two stay consistent with each
other rather than drifting to two different guesses at one thing.
Undershooting this would mean the sticky header (z-index 10, above
this row's 9) visibly covers the top of the tab row once scrolled —
worth erring high, not low, if the real value ever drifts. */
/* Dynamic tabs group — inline in `.shell-nav` itself, next to the
static route links (mara, PR review: "the dynamic tab should be in
the top bar, not a new one below" — an earlier cut had this as its
own sticky row under the header; that version and the reasoning for
it are still in this file's git history if the split ever needs to
come back). `margin-left: 0.5em` + `border-left` reads as "a group
attached to the nav, not another nav item" without a second landmark
or a fixed pixel gap that'd fight `.shell-nav`'s own `gap`. */
.shell-tabs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5em;
padding: 0.4em 1.25em;
border-bottom: 1px solid var(--border);
background: var(--bg-elev);
position: sticky;
top: 4.5em;
z-index: 9; /* one below .shell-header's 10, so the header still wins if both ever overlap during a fast scroll */
margin-left: 0.5em;
padding-left: 0.75em;
border-left: 1px solid var(--border);
}
.shell-tab {
display: flex;