dashboard(swarm): themed stop confirm modal with graceful checkbox

Replace the browser-native confirm() on the agent ST0P actions (per-agent
menu + bulk) with an in-theme modal (themedConfirm in common.js), carrying a
'stop gracefully' checkbox. Checked sends POST /kill/<name>?graceful=1 (the
quiesce path); unchecked is today's immediate hard stop, unchanged. The modal
also covers the other destructive menu actions (restart / rebuild / destroy /
purge) so they no longer fall back to the OS dialog.
This commit is contained in:
iris 2026-06-19 00:20:05 +02:00
commit 03b10d22cd
3 changed files with 153 additions and 8 deletions

View file

@ -414,6 +414,59 @@ body.dashboard-shell {
}
.container-row .actions form.inline { display: inline-block; margin: 0; }
/* Themed confirm modal `themedConfirm()` in common.js. In-theme replacement
for the native confirm() on destructive actions (stop / restart / destroy),
carrying the optional "stop gracefully" checkbox. */
.tc-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 1em;
background: color-mix(in srgb, var(--crust) 60%, transparent);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.tc-box {
background: var(--bg-elev);
border: 1px solid var(--purple-dim);
box-shadow: 0 8px 40px -8px var(--crust);
padding: 1.2em 1.4em;
max-width: min(32em, 92vw);
display: flex;
flex-direction: column;
gap: 0.9em;
}
.tc-title {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--subtext0);
}
.tc-message { color: var(--fg); line-height: 1.45; }
.tc-checks { display: flex; flex-direction: column; gap: 0.4em; }
.tc-checkrow {
display: flex;
align-items: flex-start;
gap: 0.5em;
cursor: pointer;
color: var(--subtext0);
font-size: 0.92em;
line-height: 1.35;
}
.tc-checkrow .tc-check { margin-top: 0.2em; flex: 0 0 auto; }
.tc-actions {
display: flex;
justify-content: flex-end;
gap: 0.6em;
margin-top: 0.2em;
}
.tc-cancel { color: var(--subtext0); }
.tc-confirm { color: var(--green); }
.tc-confirm.tc-danger { color: var(--red); }
.agent-status {
font-size: 0.82em;
color: var(--subtext0);