diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css index d940eac..84a35fc 100644 --- a/frontend/packages/dashboard/src/dashboard.css +++ b/frontend/packages/dashboard/src/dashboard.css @@ -1290,7 +1290,12 @@ footer a { color: var(--purple); } ergonomics without stealing terminal real estate. */ :root { - --flow-header-h: 4.2em; + /* Approximate height of the flow chrome (banner-thin + tabbar + + dashboard-chrome padding). Bumped slightly above the natural + content height so the terminal padding-top clears the bottom + border. Tweaked once after #383 took over the chrome from the + simpler title bar. */ + --flow-header-h: 4.7em; --flow-composer-h: 3.6em; --flow-frost-bg: rgba(30, 30, 46, 0.74); --flow-frost-blur: blur(12px) saturate(140%); @@ -1311,58 +1316,40 @@ body.flow-shell { var(--bg); } -.flow-header { +/* Flow chrome (#383): reuses the dashboard's `.dashboard-chrome` + + tabbar so the operator can switch tabs from the flow page without + navigating back first. The chrome must be fixed-position (vs + sticky on the dashboard) since flow-shell has `overflow: hidden` + on body and the main area absolute-positions the terminal. */ +body.flow-shell .dashboard-chrome.flow-chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 30; - min-height: var(--flow-header-h); - display: flex; - align-items: center; - gap: 1em; - padding: 0.55em 1em; + margin: 0; + padding: 0.4em 0 0; background: var(--flow-frost-bg); -webkit-backdrop-filter: var(--flow-frost-blur); backdrop-filter: var(--flow-frost-blur); border-bottom: 1px solid var(--purple-dim); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); - flex-wrap: wrap; } -.flow-back { - color: var(--cyan); - text-decoration: none; - font-size: 0.85em; - letter-spacing: 0.1em; - padding: 0.25em 0.6em; - border: 1px solid var(--purple-dim); - border-radius: 4px; - flex: 0 0 auto; - transition: border-color 0.15s ease, color 0.15s ease; -} -.flow-back:hover { - border-color: var(--cyan); - text-shadow: 0 0 8px rgba(137, 220, 235, 0.6); -} -.flow-title { - margin: 0; - font-size: 1.2em; +/* Active tab on the flow page is FL0W. Its `.tab-link` styling (the + tab strip's right-most entry on the dashboard, where it represents + the *link out* to /flow.html) needs to read as the active tab here. + `aria-current="page"` flags it semantically. */ +body.flow-shell .tabbar .tab.active.tab-link { color: var(--purple); - text-transform: uppercase; - letter-spacing: 0.15em; -} -.flow-hint { - margin: 0; - color: var(--muted); - font-size: 0.82em; - flex: 1 1 auto; - min-width: 0; -} -.flow-header .notif-row { - margin-left: auto; - display: flex; - gap: 0.4em; + background: var(--bg); + border-color: var(--purple-dim); + box-shadow: 0 -2px 12px -4px rgba(203, 166, 247, 0.4); } +/* Legacy `.flow-title` / `.flow-hint` / `.flow-back` rules were + removed in #383 — the flow page now uses the shared chrome with + the dashboard tab strip, no need for FL0W-specific title/hint + elements. The `.notif-row` styling lives under the shared + `.tabbar #notif-row` selector earlier in the file. */ /* Inbox pill — operator inbox flyout trigger. Sits right under the header so it stays in the operator's gaze without crowding the diff --git a/frontend/packages/dashboard/src/flow.html b/frontend/packages/dashboard/src/flow.html index 031c1ee..0c9cfa2 100644 --- a/frontend/packages/dashboard/src/flow.html +++ b/frontend/packages/dashboard/src/flow.html @@ -8,22 +8,45 @@ - -
- ← d4shb04rd -

◆ FL0W ◆

-

live broker tail · newest at the top · @name picks a recipient (sticky); tab completes

- -
- - - - -
+ +
+ + +