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

feat(987): add per-agent three-dot context menu on SW4RM tab

Browse source 
Each agent card in the SW4RM tab now has a ⋮ button that reveals a
dropdown with single-agent lifecycle actions: R3ST4RT, ST0P, ST4RT,
R3BU1LD, DESTR0Y, PURG3. Items are state-aware (disabled when action
doesn't apply). The button is CSS-invisible until the row is hovered
or the menu is open — quiet rows stay clean. DESTR0Y and PURG3 are
hidden for the manager container.

Click-outside and Escape close the menu. A tree-rebuild (on any SSE
state update) also closes it to avoid stale DOM references.
This commit is contained in:
iris 2026-06-01 18:55:08 +02:00 • committed by mara
commit 28e0d1b7fa
2 changed files with 234 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

80
frontend/packages/dashboard/src/dashboard.css
View file

@ -316,6 +316,86 @@ a:hover {
flex: 1;
min-width: 0;
}
/* ── per-agent three-dot context menu ─────────────────────────────────────
Positioned after .card-body in the flex row. The ⋮ button is invisible
until the row is hovered (or the menu is open) so quiet rows stay clean.
The dropdown is absolute-positioned relative to .agent-menu and opens
below + right-aligned to the button. */
.agent-menu {
flex: none;
position: relative;
align-self: flex-start;
margin-top: 0.3em;
}
.agent-menu-btn {
display: block;
background: none;
border: none;
color: var(--subtext0);
font-size: 1.1em;
line-height: 1;
cursor: pointer;
padding: 0.1em 0.4em;
border-radius: 4px;
opacity: 0;
transition: opacity 120ms, background 120ms, color 120ms;
}
/* Show on row hover or when the menu is open. */
.container-row:hover .agent-menu-btn,
.agent-menu.open .agent-menu-btn {
opacity: 1;
}
.agent-menu-btn:hover,
.agent-menu-btn:focus-visible {
background: var(--surface1);
color: var(--text);
opacity: 1;
}
.agent-menu-btn:focus-visible {
outline: 2px solid var(--purple);
outline-offset: 1px;
}
.agent-menu-dropdown {
position: absolute;
right: 0;
top: calc(100% + 2px);
z-index: 200;
background: var(--surface0);
border: 1px solid var(--surface2);
border-radius: 6px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
list-style: none;
margin: 0;
padding: 0.3em 0;
min-width: 10em;
white-space: nowrap;
}
.agent-menu-item {
display: block;
width: 100%;
background: none;
border: none;
color: var(--text);
font-family: inherit;
font-size: 0.82em;
letter-spacing: 0.01em;
text-align: left;
padding: 0.4em 0.9em;
cursor: pointer;
}
.agent-menu-item:not(:disabled):hover {
background: var(--surface1);
}
.agent-menu-item:disabled {
opacity: 0.35;
cursor: default;
}
.agent-menu-sep {
height: 1px;
background: var(--surface2);
margin: 0.3em 0;
}
/* Pending state splits queued vs running — queued ops show only
the pending-state badge (no row tint), running ops keep the
amber row tint AND get a rotating amber ring on the icon. See