77296aff35
docs/web-ui.md duplicated the web-ui/ directory name at the top level -- the only such collision in docs/ (every other subsystem has just a directory, no sibling <dir>.md file). That's exactly why it rendered outside the directory structure in the docs site nav (mara's report, hyperhive#4054): the site build walks docs/ generically with no special-casing, so a loose top-level file next to a same-named directory shows up as its own flat top-level entry instead of nesting under that directory's section. web-ui.md's own first paragraph already said as much -- 'This doc has been split for readability... start at web-ui/README.md instead.' It was a leftover pointer from before the split, not a page carrying unique content on its own merit. Folded its two sections web-ui/README.md didn't already have (the swarm-ui design-guide link, and the task-oriented 'reading paths' quick-lookup list) into web-ui/README.md's existing 'More depth' section, then deleted the stray file and repointed every real reference at it: 3 in-tree doc cross-links, 3 doc prose mentions (retargeted to the more specific dashboard.md/shape.md sub-page each one was actually about), and ~28 frontend source comments (dashboard/agent/shared packages) that cited it as 'docs/web-ui.md::<heading>' for implementation context -- retargeted each to whichever of dashboard.md/shape.md/agent.md actually carries that heading now, verified against each file's real heading list rather than guessed. Verified via scripts/check-doc-refs.sh (the same lint CI runs): 0 dead pointers, both before write (confirming the tree was clean beforehand) and after (confirming nothing broke).
111 lines
3.2 KiB
CSS
111 lines
3.2 KiB
CSS
/* ─── /flow.html — full-page chat ─────────────────────────────────
|
|
See docs/web-ui/dashboard.md::FL0W page for the page-vs-pane rationale.
|
|
Shape mirrors the per-agent live page (frosted-glass header +
|
|
composer, full-viewport terminal). */
|
|
|
|
:root {
|
|
/* Approximate height of the flow chrome (the slim back-link header).
|
|
The slug banner lives at the page footer on the dashboard, omitted
|
|
on /flow.html since the full-viewport terminal has no normal-flow
|
|
footer position. */
|
|
--flow-header-h: 3.6em;
|
|
--flow-composer-h: 3.6em;
|
|
--flow-frost-bg: color-mix(in srgb, var(--bg) 74%, transparent);
|
|
--flow-frost-blur: blur(12px) saturate(140%);
|
|
}
|
|
|
|
body.flow-shell {
|
|
/* Override the dashboard's centred-max-width layout — flow owns
|
|
the whole viewport. */
|
|
max-width: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(
|
|
ellipse 80% 60% at 50% 0%,
|
|
color-mix(in srgb, var(--purple) 6%, transparent) 0%,
|
|
transparent 60%
|
|
),
|
|
var(--bg);
|
|
}
|
|
|
|
.flow-main {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
}
|
|
/* flow.html now has a slim header (back link only) instead of the full
|
|
tabbar — reduce the top padding to match the smaller header height. */
|
|
body.flow-shell .flow-main-slim {
|
|
padding-top: calc(var(--flow-header-h) + 0.4em);
|
|
}
|
|
.flow-main .terminal-wrap {
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.flow-main .live {
|
|
position: absolute;
|
|
inset: 0;
|
|
height: auto;
|
|
max-height: none;
|
|
padding-top: calc(var(--flow-header-h) + 0.8em);
|
|
padding-bottom: calc(var(--flow-composer-h) + 0.8em);
|
|
scroll-padding-top: calc(var(--flow-header-h) + 0.8em);
|
|
scroll-padding-bottom: calc(var(--flow-composer-h) + 0.8em);
|
|
overflow: auto;
|
|
}
|
|
/* Tail pill (↓ N new): bottom offset clears the floating composer.
|
|
Pill is anchored on .flow-main (not .terminal-wrap) so the
|
|
backdrop-filter stacking context doesn't trap its z-index — see
|
|
docs/web-ui/agent.md::Per-agent page (Terminal-wrap) for the same
|
|
gotcha on the agent page. */
|
|
.flow-main .tail-pill {
|
|
bottom: calc(var(--flow-composer-h) + 0.6em);
|
|
z-index: 35;
|
|
}
|
|
|
|
.flow-composer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 30;
|
|
min-height: var(--flow-composer-h);
|
|
background: var(--flow-frost-bg);
|
|
-webkit-backdrop-filter: var(--flow-frost-blur);
|
|
backdrop-filter: var(--flow-frost-blur);
|
|
border-top: 1px solid var(--purple-dim);
|
|
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
|
|
padding: 0.4em 1em;
|
|
}
|
|
|
|
/* Agent filter: a select in the FL0W header narrows the
|
|
timeline to messages involving one agent. Non-matching rows get
|
|
`.flow-hidden`; the select reuses the journal-unit control look. */
|
|
.flow-filter {
|
|
font-family: inherit;
|
|
font-size: 0.85em;
|
|
background: var(--bg-elev);
|
|
color: var(--amber);
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
padding: 0.25em 0.5em;
|
|
margin-left: auto;
|
|
}
|
|
.flow-filter:focus {
|
|
outline: 1px solid var(--purple);
|
|
}
|
|
.msgrow.flow-hidden {
|
|
display: none;
|
|
}
|