diff --git a/docs/2-handbook/agents/web-page.md b/docs/2-handbook/agents/web-page.md index af5fd83d2..e0c9dfd5f 100644 --- a/docs/2-handbook/agents/web-page.md +++ b/docs/2-handbook/agents/web-page.md @@ -1,421 +1,24 @@ # Per-agent page -> Part of [Agents](README.md). See also: -> [Shape (shared)](../../4-implementation/web-ui/shape.md) · [Dashboard layout](../hives/dashboard.md) +> Part of [Agents](README.md). See also: [Dashboard layout](../hives/dashboard.md) +Every agent's harness serves a page of its own, reached from the agent's row on +the hive dashboard. It shows a live terminal view of what the agent is doing: its +turns, tool calls and results as they happen, with the recent history replayed +when you open it. The page has no message box; to write to an agent, use the +terminal in the [swarm UI](../swarm/ui.md). Like the hive dashboard, it +keeps shrinking, bit by bit. -Two fixed-position layers frame a full-viewport terminal: a header and -scrollable main content — plus a slide-in side panel for flyouts and long -content. The page has no message box: to write to an agent, use the swarm -UI's terminal. +- **Header**: the agent's icon and name, a state badge (idle, thinking, needs + login), and pills for its inbox and todos. Selecting a pill opens the list in + a side panel. The inbox panel has **mark all read**, and the todos panel lets + you dismiss todos. +- **State badge menu**: **cancel turn** stops the turn in flight, **new session** + starts the next turn without the resume session, and **log out** wipes the + agent's claude login (it then waits in `needs_login`). +- **Stats page**: the agent's turn statistics. The same figures are in Grafana's + `agents` board. -## Header - -Preact component tree (`Header.tsx` + `StatusChips.tsx` + -`MetaNav.tsx` + `HeaderPill.tsx`, wired together in `Root.tsx`) — see -`frontend/packages/agent/src/components/`. This section describes the -rendered component tree: every element is Preact component output. - -**Fixed-overlay header** (`
`): frosted -glass — `backdrop-filter: blur` lets scrolled terminal rows show -through. Measures its own rendered height via `ResizeObserver` -(`Header.tsx`) and writes it to a CSS custom property the content -below reads for its offset, so content never overlaps the header -regardless of how many rows of badges/pills wrap onto an extra line -at a given viewport width. Two columns: - - -- **Agent icon** (``): fixed-size square - identity anchor — `width: 5em; height: 5em` with explicit pixel - sizing so the ``'s intrinsic (large) dimensions don't push - the parent flex container open via `align-items: stretch`-driven - height feedback. Falls back to the dimmed hyperhive mark - (`/favicon.svg`) on load error (`/icon` 404s when the agent has no - `services.hyperhive.agent.icon` override — there is no server-side default image). -- **Main column** (`.agent-header-main`, `Header.tsx`): two rows — - title (`◆