vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

agent: "mark all read" button on the inbox flyout (#559 frontend half)

Browse source 
Pairs with damocles PR #566 (broker primitive + dashboard
`POST /api/agent/{name}/mark-all-read` route). The agent's
per-container inbox side-panel now gets a header row with a
`✓ mark all read` button that:

- confirms via a one-line dialog (the action is destructive: any
  pending broker message for this agent is acked, the harness
  won't receive a wake-prompt for them)
- POSTs to the host dashboard (cross-origin, same pattern as the
  existing operator-answer flow on this page)
- surfaces `{ marked: N }` in an inline status pill, then triggers
  a `refreshState` so any state-derived surfaces re-read fresh
- stays out of the way when the inbox is empty (only renders above
  a non-empty rows list)

Note: `recent_for` returns the most-recent-N messages regardless of
ack state, so clicking does NOT visually empty the rows list. The
status pill ("✓ marked N as read") is the operator-facing
confirmation; the next `turn_start` will show `0 unread` in its
badge. Tooltip on the button calls this out so the operator isn't
surprised the row list stays put.

CSS mirrors the existing answer-form button family (mauve hover on
bg-elev background) so it reads as a peer affordance, with a
border-bottom separating it from the message list.
This commit is contained in:
iris 2026-05-29 13:11:19 +02:00 • committed by Mara
commit fe2f9c2396
2 changed files with 100 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/packages/agent/src/agent.css
View file

@ -522,6 +522,42 @@ pre.diff {
.agent-inbox .answer-form button:disabled { opacity: 0.5; cursor: default; }
.agent-inbox .answer-status { color: var(--muted); align-self: center; }
/* #559: "mark all read" header row sits above the recent-messages
list in the inbox side-panel flyout. Same look as the answer-form
button (mauve hover, bg-elev background) so they read as part of
the same affordance family. */
.agent-inbox .inbox-mark-all-row {
display: flex;
gap: 0.6em;
align-items: center;
padding: 0.4em 0.2em 0.6em;
margin-bottom: 0.5em;
border-bottom: 1px solid var(--border);
}
.agent-inbox .inbox-mark-all-btn {
font-family: inherit;
font-size: inherit;
background: var(--bg-elev);
color: var(--fg);
border: 1px solid var(--border);
border-radius: 3px;
padding: 0.3em 0.7em;
cursor: pointer;
white-space: nowrap;
}
.agent-inbox .inbox-mark-all-btn:hover:not(:disabled) {
border-color: var(--purple);
color: var(--purple);
}
.agent-inbox .inbox-mark-all-btn:disabled {
opacity: 0.5;
cursor: default;
}
.agent-inbox .inbox-mark-status {
color: var(--muted);
font-size: 0.9em;
}
.last-turn {
color: var(--muted);
font-size: 0.8em;