diff --git a/frontend/packages/agent/src/app.js b/frontend/packages/agent/src/app.js index 605078c..d72d1b8 100644 --- a/frontend/packages/agent/src/app.js +++ b/frontend/packages/agent/src/app.js @@ -1143,6 +1143,18 @@ window.marked = marked; const term = HiveTerminal.create({ logEl: log, + // Anchor the `↓ N new` pill in `.agent-main` (NOT the default + // `log.parentElement` = `.terminal-wrap`). `.terminal-wrap` + // applies `backdrop-filter` for the frost effect, which + // creates a CSS stacking context — the pill's z-index 35 + // (agent.css #375) then gets TRAPPED inside that context and + // can't compete with the fixed composer's z-index 30 in the + // root stacking context. Anchoring in `.agent-main` (no + // backdrop-filter, no other stacking-context creators) lets + // the pill's z-index reach the root and properly float above + // the composer. Geometry unchanged — `.agent-main` and + // `.terminal-wrap` both `inset: 0` fill the same area. + pillAnchor: $('agent-main'), historyUrl: '/events/history', streamUrl: '/events/stream', renderers: { diff --git a/frontend/packages/dashboard/src/app.js b/frontend/packages/dashboard/src/app.js index 7560e4d..49394ce 100644 --- a/frontend/packages/dashboard/src/app.js +++ b/frontend/packages/dashboard/src/app.js @@ -2277,8 +2277,18 @@ window.marked = marked; // Register this row so future replies can reference it. if (ev.id != null && ev.id > 0) msgRowMap.set(ev.id, row); } + // Anchor the `↓ N new` pill in `.flow-main` (NOT the default + // `log.parentElement` = `.terminal-wrap`). `.terminal-wrap` + // applies `backdrop-filter`, which creates a CSS stacking + // context — the pill's z-index would otherwise be trapped + // inside and clipped under the fixed composer (issue #375). + // `.flow-main` has no backdrop-filter / stacking-context + // creators, so the pill's z-index reaches the root and floats + // above the composer. + const flowMain = document.querySelector('.flow-main'); HiveTerminal.create({ logEl: flow, + pillAnchor: flowMain, historyUrl: '/dashboard/history', streamUrl: '/dashboard/stream', renderers: { diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css index 84a35fc..2747613 100644 --- a/frontend/packages/dashboard/src/dashboard.css +++ b/frontend/packages/dashboard/src/dashboard.css @@ -1421,8 +1421,15 @@ body.flow-shell .tabbar .tab.active.tab-link { scroll-padding-bottom: calc(var(--flow-composer-h) + 0.8em); overflow: auto; } +/* Tail pill (↓ N new): bottom offset clears the floating composer. + z-index escapes the stacking context the .terminal-wrap's + backdrop-filter creates (issue #375) — app.js anchors the pill + on .flow-main now (not .terminal-wrap), so this z-index reaches + the root stacking context and properly floats above the + composer at z-index 30. */ .flow-main .tail-pill { bottom: calc(var(--flow-composer-h) + 0.6em); + z-index: 35; } .flow-composer {