diff --git a/frontend/packages/agent/src/Root.tsx b/frontend/packages/agent/src/Root.tsx
index 148fd9fc..baae05ed 100644
--- a/frontend/packages/agent/src/Root.tsx
+++ b/frontend/packages/agent/src/Root.tsx
@@ -89,9 +89,10 @@ export function Root() {
     <>
       <HeaderPill kind="inbox" icon="📬" label="inbox" count={state?.inbox.length ?? 0} onClick={() => setOpenPanel('inbox')} />
       <HeaderPill kind="todos" icon="📋" label="todos" count={todos.length} onClick={() => setOpenPanel('todos')} />
-      {/* Needs dashboard_port from a loaded snapshot — omitted (like the
-       * old page's populateOverflowMenu) until the first /api/state
-       * resolves. */}
+      {/* Needs a loaded snapshot for their data (links/forge_public_url,
+       * dashboard_port) — both omitted (like the old page's
+       * populateOverflowMenu) until the first /api/state resolves. */}
+      {state ? <MetaNav links={state.links} forgePublicUrl={state.forge_public_url} /> : null}
       {state ? <OverflowMenu label={state.label} dashboardBase={resolveDashboardBase(state.dashboard_port)} /> : null}
     </>
   );
@@ -160,7 +161,6 @@ export function Root() {
       <Header
         label={state.label}
         hiveLabel={[state.swarm_name, state.hive_name].filter(Boolean).join(' / ') || null}
-        nav={<MetaNav links={state.links} forgePublicUrl={state.forge_public_url} />}
         pills={pills}
       >
         <StatusChips
diff --git a/frontend/packages/agent/src/components/Header.tsx b/frontend/packages/agent/src/components/Header.tsx
index 518aceff..974a0765 100644
--- a/frontend/packages/agent/src/components/Header.tsx
+++ b/frontend/packages/agent/src/components/Header.tsx
@@ -27,24 +27,29 @@ export interface HeaderProps {
   label: string;
   hiveLabel?: string | null;
   children?: ComponentChildren;
-  /** Meta-nav links (stats/screen/forge/config/extras) — `<MetaNav>`
-   * lands here, in the title row alongside the `<h2>`, same as the old
-   * markup's `<nav id="meta-links">` (docs/web-ui/agent.md::Header). */
-  nav?: ComponentChildren;
-  /** Right-cluster flyout triggers (inbox/todos pills today, the
-   * overflow menu button lands here in a later commit) — mirrors the
-   * old markup's `.agent-header-pills` third column. */
+  /** Right-cluster flyout triggers (inbox/todos/links pills, the
+   * overflow menu button) — mirrors the old markup's
+   * `.agent-header-pills` third column. Meta-nav (`<MetaNav>`) lives
+   * here too, as a fixed-size trigger — NOT in the title row the old
+   * markup put it in (`<nav id="meta-links">`, docs/web-ui/agent.md).
+   * A variable-width inline link list there grows the title row's
+   * actual height past the fixed `--agent-header-h` the rest of the
+   * page's `position: fixed` header + `position: absolute` content
+   * below it are offset against, so on a narrow viewport the header
+   * silently overlaps the login-recovery card underneath it (mara,
+   * live: "the login card looks like it is behind the header"). A
+   * fixed-size trigger button can't do that regardless of how many
+   * links the backend sends. */
   pills?: ComponentChildren;
 }
 
-export function Header({ label, hiveLabel, children, nav, pills }: HeaderProps) {
+export function Header({ label, hiveLabel, children, pills }: HeaderProps) {
   return (
     <header class="agent-header">
       <img class="agent-icon" src="icon" alt="" onError={handleIconError} />
       <div class="agent-header-main">
         <div class="agent-header-row agent-header-title-row">
           <h2 class="agent-header-title">◆ {label} ◆</h2>
-          {nav}
         </div>
         {hiveLabel ? <div class="agent-header-row agent-hive-row">{hiveLabel}</div> : null}
         <div class="agent-header-row">{children}</div>
diff --git a/frontend/packages/agent/src/components/MetaNav.css b/frontend/packages/agent/src/components/MetaNav.css
new file mode 100644
index 00000000..3c957fa7
--- /dev/null
+++ b/frontend/packages/agent/src/components/MetaNav.css
@@ -0,0 +1,42 @@
+/* <MetaNav> popover — matches `@hive/shared`'s `Dropdown` (`.ui-dropdown`)
+   values exactly (background/border/radius/shadow, item padding/hover),
+   same "reuse the values, not the component" call `.login-card`
+   (LoginFlow.css) already made, for the same reason: this popover's
+   items are real `<a>` tags, not `Dropdown`'s command-dispatch
+   `<button>`s. Right-anchored, same as OverflowMenu.css's
+   `.header-overflow-anchor` — MetaNav sits in the same right-hand
+   pills cluster, so a left anchor would push it off-screen the same
+   way. */
+.meta-nav-anchor {
+  position: relative;
+  display: inline-block;
+}
+.meta-nav-popover {
+  position: absolute;
+  top: calc(100% + 0.25em);
+  right: 0;
+  left: auto;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  min-width: 10em;
+  padding: 0.25em;
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: 0.5em;
+  box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.35);
+}
+.meta-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  min-height: 2.75em;
+  padding: 0.4em 0.7em;
+  border-radius: 0.35em;
+  color: var(--fg);
+  text-decoration: none;
+  white-space: nowrap;
+}
+.meta-nav-item:hover {
+  background: var(--border);
+}
diff --git a/frontend/packages/agent/src/components/MetaNav.tsx b/frontend/packages/agent/src/components/MetaNav.tsx
index 6b92fd60..3792493a 100644
--- a/frontend/packages/agent/src/components/MetaNav.tsx
+++ b/frontend/packages/agent/src/components/MetaNav.tsx
@@ -1,17 +1,31 @@
-// <MetaNav> — the header's meta-nav strip (`<nav id="meta-links">` in
-// the old markup): 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). See
-// docs/web-ui/agent.md::Header for the kind → URL resolution table
-// this ports verbatim from app.js's `refreshState` (lines ~1216-1244):
-// `container` → same-origin path (this page is itself container-local);
-// `forge` → `forgePublicUrl + url`, and the link is dropped entirely
-// when `forgePublicUrl` is unset (never guessed from `<host>:3000`);
-// `external` → already absolute. Plain JSX text (not `innerHTML`), so
-// this is XSS-safe by construction the same way app.js's `el()`-built
-// anchors were — no new escaping to get right.
+// <MetaNav> — the header's meta-nav trigger: a single fixed-size Badge
+// ("🔗") 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).
+//
+// 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: same shape as
+// swarm-ui's own `LinksMenu` (Shell/LinksMenu.tsx) — one quiet icon
+// trigger, a popover on click, real `<a>` items (not a command-dispatch
+// button list) so ctrl/middle-click and "copy link address" keep
+// working. Trigger itself reuses `@hive/shared`'s `Badge` (icon-only,
+// same shape as the header's `⋯` overflow trigger — same touch target,
+// same hover/expanded treatment, one visual language for every header
+// trigger) rather than a bespoke button. The popover isn't built from
+// `@hive/shared`'s `Dropdown` — its items are always `<button>`s
+// (command dispatch), which would lose real link semantics — but
+// matches 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.
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { Badge } from '@hive/shared/badge.js';
 import type { AgentLink } from '../types.js';
+import './MetaNav.css';
 
 export interface MetaNavProps {
   links: AgentLink[];
@@ -19,26 +33,59 @@ export interface MetaNavProps {
 }
 
 export function MetaNav({ links, forgePublicUrl }: MetaNavProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // Same "outside click or Escape closes" contract as Dropdown/OverflowMenu.
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(e: PointerEvent) {
+      if (rootRef.current && e.target instanceof Node && !rootRef.current.contains(e.target)) setOpen(false);
+    }
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false);
+    }
+    document.addEventListener('pointerdown', onPointerDown, true);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown, true);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open]);
+
+  // Same kind -> URL resolution as app.js's old refreshState meta-links
+  // loop: `forge` needs `forgePublicUrl` set or the link is dropped
+  // 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);
   if (visible.length === 0) return null;
 
   return (
-    <nav class="agent-nav" id="meta-links">
-      {visible.map((lnk) => {
-        const href = lnk.kind === 'forge' ? `${forgePublicUrl}${lnk.url}` : lnk.url;
-        return (
-          <a
-            key={lnk.url}
-            class="agent-nav-link"
-            href={href}
-            target="_blank"
-            rel="noopener"
-            title={lnk.label}
-          >
-            {`${lnk.icon} ${lnk.label}`.trim()} →
-          </a>
-        );
-      })}
-    </nav>
+    <div class="meta-nav-anchor" ref={rootRef}>
+      <Badge value="🔗" title="agent links" onClick={() => setOpen((o) => !o)} expanded={open} />
+      {open ? (
+        <div class="meta-nav-popover" role="menu" aria-label="agent links">
+          {visible.map((lnk) => {
+            const href = lnk.kind === 'forge' ? `${forgePublicUrl}${lnk.url}` : lnk.url;
+            return (
+              <a
+                key={lnk.url}
+                class="meta-nav-item"
+                href={href}
+                target="_blank"
+                rel="noopener"
+                role="menuitem"
+                onClick={() => setOpen(false)}
+              >
+                {lnk.icon ? (
+                  <span aria-hidden="true">{lnk.icon}</span>
+                ) : null}
+                {lnk.label}
+              </a>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
   );
 }
diff --git a/frontend/packages/agent/src/components/StatusChips.css b/frontend/packages/agent/src/components/StatusChips.css
index cb5c2c5a..1b678f99 100644
--- a/frontend/packages/agent/src/components/StatusChips.css
+++ b/frontend/packages/agent/src/components/StatusChips.css
@@ -10,6 +10,21 @@
   position: relative;
   display: inline-block;
 }
+/* mara, live, on a screenshot of this row: "badges and interactive
+   elements on same row have inconsistent size." Real cause: Badge.css's
+   `.ui-badge-interactive` grows to a 2.75em WCAG touch-target floor
+   (model/effort pickers, pause) while a plain display `<span>` badge
+   (alive, state, ctx, cost — no `onClick`) stays compact, so the row
+   reads as two different pill sizes even though every badge here is
+   the same `<Badge>` component. Scoped to this row rather than
+   Badge.css itself — display-only badges elsewhere (e.g. the dashboard)
+   have no reason to grow, this is specifically about badges and
+   buttons sitting side by side in one row needing to read as one
+   family. */
+.status-chips .ui-badge {
+  min-height: 2.75em;
+  padding-inline: 0.8em;
+}
 .status-chips-last-turn {
   font-size: 0.8em;
   color: var(--muted);