frontend: trim narrated-history comments in packages/agent, packages/swarm-ui
Continues #3901. Same pattern as tabs.js/swarm.js: cut 'used to be X, now Y'/'moved to'/'no longer' change-history narration down to the current design fact, keep every load-bearing rationale intact (the ResizeObserver feedback-loop note in Header.tsx, the Dropdown- vs-real-<a> semantics in MetaNav.tsx, etc.).
This commit is contained in:
parent
56c0602c2f
commit
c2733d2edf
6 changed files with 72 additions and 95 deletions
|
|
@ -1,12 +1,12 @@
|
|||
// <Header> — the agent page's identity strip: icon, glyphic title, the
|
||||
// "swarm / hive" label row, and a slot for the status row
|
||||
// (`<StatusChips>` — ../status-chips/, kept separate so this component
|
||||
// has no opinion on what badges exist). Same three-column shape as the
|
||||
// old `#agent-header` markup (icon · main · pills) — see the `pills`
|
||||
// prop doc below for what moved into that third column and why.
|
||||
// Reuses `agent.css`'s existing `.agent-header*`/`.agent-icon` rules
|
||||
// (loaded globally by index.html) rather than a component-scoped
|
||||
// stylesheet — no new visual language needed for the chrome itself.
|
||||
// has no opinion on what badges exist). Three columns: icon, main
|
||||
// (title + hive-label), pills — see the `pills` prop doc below for why
|
||||
// the third column is the one that grows. Reuses `agent.css`'s
|
||||
// existing `.agent-header*`/`.agent-icon` rules (loaded globally by
|
||||
// index.html) rather than a component-scoped stylesheet — no new
|
||||
// visual language needed for the chrome itself.
|
||||
|
||||
// Measures its own rendered height via ResizeObserver, writes it to
|
||||
// `--agent-header-real-h` (agent.css's downstream consumers —
|
||||
|
|
@ -42,23 +42,18 @@ export interface HeaderProps {
|
|||
label: string;
|
||||
hiveLabel?: string | null;
|
||||
/** The status/badge row (`<StatusChips>`) — lives in the
|
||||
* `.agent-header-pills` cluster now, alongside `pills` (see below),
|
||||
* not stacked as its own row under the title. */
|
||||
* `.agent-header-pills` cluster alongside `pills` (see below), not
|
||||
* stacked as its own row under the title. */
|
||||
children?: ComponentChildren;
|
||||
/** Flyout triggers (inbox/todos/links pills, the overflow menu
|
||||
* button) — and, since this round, `children` (the status badges)
|
||||
* too, both in `.agent-header-pills`, the SAME header-level column
|
||||
* the old markup used for pills alone. First pass of this ask
|
||||
* nested pills into a row inside `.agent-header-main` instead —
|
||||
* backwards, mara corrected live: "i meant move badges to where the
|
||||
* dropdowns are, not the other way around. this way the height does
|
||||
* not change even on widescreen" — `.agent-header-main` now only
|
||||
* ever holds the title + hive-label rows, which don't wrap in
|
||||
* practice, so it stays a stable height; only this pills-cluster
|
||||
* column (already used to absorbing a variable pill count) grows to
|
||||
* fit badges+pills together. Meta-nav (`<MetaNav>`) lives in here
|
||||
* too, as a fixed-size trigger — not the old markup's inline list in
|
||||
* the title row (`<nav id="meta-links">`, docs/web-ui/agent.md). */
|
||||
* button) plus `children` (the status badges), all in
|
||||
* `.agent-header-pills`. `.agent-header-main` only ever holds the
|
||||
* title + hive-label rows, which don't wrap in practice and so stay
|
||||
* a stable height; only this pills-cluster column (already sized for
|
||||
* a variable pill count) grows to fit badges+pills together, keeping
|
||||
* the header a stable height even on widescreen. Meta-nav
|
||||
* (`<MetaNav>`) lives here too, as a fixed-size trigger, not an
|
||||
* inline link list in the title row (docs/web-ui/agent.md). */
|
||||
pills?: ComponentChildren;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,38 +1,26 @@
|
|||
// <MetaNav> — the header's meta-nav trigger: a single fixed-size Badge
|
||||
// (`@hive/shared/icons.js`'s `LinkIcon` — an emoji glyph here can't
|
||||
// match a neighbouring icon's size/weight on any platform, see that
|
||||
// file's comment; mara: "agent page link icons is different from
|
||||
// swarm ui" was this trigger still on the old `🔗` emoji after
|
||||
// swarm-ui's own link trigger had already moved to the SVG) in the
|
||||
// pills cluster that opens a popover listing
|
||||
// (`@hive/shared/icons.js`'s `LinkIcon` — an emoji glyph can't match a
|
||||
// neighbouring icon's size/weight on any platform, see that file's
|
||||
// comment) in the pills cluster that opens a popover listing
|
||||
// stats/screen/forge/config + any `hyperhive.dashboardLinks` extras,
|
||||
// sourced from the backend's `agent_links()` (the single source of
|
||||
// truth — same list also feeds the dashboard card's icon strip) — plus
|
||||
// a `🧭 dashboard` back-link, formerly the overflow menu's job (mara:
|
||||
// "remove rebuild button, move link to dashboards into links menu" —
|
||||
// the overflow `⋯` trigger existed for exactly two items, dashboard-
|
||||
// link and rebuild; rebuild's gone outright, the dashboard's own
|
||||
// R3BU1LD button already covers it, dashboard-link moves here, so
|
||||
// `OverflowMenu` had nothing left to justify existing and is deleted).
|
||||
// a `🧭 dashboard` back-link.
|
||||
//
|
||||
// `variant="quiet"` — mara: "link and settings button should not have
|
||||
// the badge bg". `Badge`'s default filled-pill look is right for a
|
||||
// status/picker chip, wrong for this icon-only trigger, which should
|
||||
// read as header chrome. See `@hive/shared/badge.js`'s `BadgeVariant`.
|
||||
|
||||
// v1 of this rendered every link inline in the header's title row —
|
||||
// mara, live: "the login card looks like it is behind the header"
|
||||
// (a variable-width link list can grow the title row past the fixed
|
||||
// `--agent-header-h` the rest of the page is offset against — see
|
||||
// Header.tsx's comment) and "the links should have the same popout as
|
||||
// the links in the nav bar of swarm-ui." This is that: one quiet icon
|
||||
// trigger (reuses `@hive/shared`'s `Badge`, icon-only), a popover on
|
||||
// click, real `<a>` items — not `@hive/shared`'s `Dropdown` (its items
|
||||
// are always `<button>`s for command dispatch, which would lose real
|
||||
// link semantics like ctrl/middle-click and "copy link address") —
|
||||
// but matching its `.ui-dropdown` visual values exactly (see
|
||||
// MetaNav.css), the same "reuse the values, not the component" call
|
||||
// `LoginFlow`'s `.login-card` already made for the same reason.
|
||||
//
|
||||
// A popover keeps the header height fixed — a variable-width inline
|
||||
// link list would grow the title row past the fixed `--agent-header-h`
|
||||
// the rest of the page is offset against (see Header.tsx's comment).
|
||||
// Real `<a>` items, not `@hive/shared`'s `Dropdown` (its items are
|
||||
// always `<button>`s for command dispatch, which would lose real link
|
||||
// semantics like ctrl/middle-click and "copy link address"), but
|
||||
// matching its `.ui-dropdown` visual values exactly (see MetaNav.css) —
|
||||
// the same "reuse the values, not the component" call `LoginFlow`'s
|
||||
// `.login-card` makes for the same reason.
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
import { Badge } from '@hive/shared/badge.js';
|
||||
import { LinkIcon } from '@hive/shared/icons.js';
|
||||
|
|
@ -73,8 +61,8 @@ export function MetaNav({ links, forgePublicUrl, dashboardBase }: MetaNavProps)
|
|||
// entirely (never guessed from `<host>:3000`); `external` is already
|
||||
// absolute; `container` is a same-origin path.
|
||||
const visible = links.filter((lnk) => lnk.kind !== 'forge' || forgePublicUrl);
|
||||
// No early-return-on-empty any more — the dashboard link below is
|
||||
// always present, so the trigger always has at least one item.
|
||||
// No early-return-on-empty: the dashboard link below is always
|
||||
// present, so the trigger always has at least one item.
|
||||
|
||||
return (
|
||||
<div class="meta-nav-anchor" ref={rootRef}>
|
||||
|
|
|
|||
Loading…
Reference in a new issue