michael/ProdDash
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 1 Wiki Activity

Shell 1.11.0: alerts — a module flashes every dashboard listening on one of six channels

Browse Source 
A module that sees something a tech must act on now (a timer overrun, a meter
past its limit, timecode gone) raises an alert on a channel, 1–6, and every
dashboard listening to that channel flashes: the menu bar — brought out for
the duration if it was hidden — and a frame round the screen alternate between
the level's two colours, with the alert's text bold across the bar. Low fades
slowly, medium faster, critical snaps with no fade and floods the board behind
the tiles too, in a muted cut that shows faintly through the tile panels
without costing their content any contrast.

Server: the hub. One alert per channel (a new one replaces the last), timed
out server-side (1–600 s, 15 by default, 0 = held until cleared), broadcast
over the shell stream as `alert` / `alert-clear`; GET /api/alerts for a
dashboard that opens or reconnects mid-alert; POST /api/alerts and
DELETE /api/alerts/<n>, open like a layout save. Modules raise from their
server entry with shell.alert() / shell.clearAlert() or from a tile with
moduleApi.alert() / moduleApi.clearAlert(); a module's alerts end when it
stops. Colours live as alerts.colors in the data directory's proddash.json.

Dashboard: the Layouts menu gains a folded Alerts row with six numbered
toggles; the channel list saves with the layout, local and named (the server
keeps it in a saved layout). Admin: a folded Alerts section with two colour
pickers per level, a swatch running each level's cadence, and a Test row.

Docs: docs/ALERTS.md (the feature), a "Raising alerts" section in the module
guide, README. Tools: tools/alert.js raises/clears/lists from the command
line; tools/alerts.test.js drives it all end to end.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Waters Church
2026-10-05 16:05:12 -04:00
co-authored by Claude Fable 5.1
parent a3500f98b1
commit 5ca0a672fa
13 changed files with 1572 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin/admin.css
+67
View File
@@ -482,6 +482,73 @@ details.admin-fold > summary.admin-fold-title::after {
details.admin-fold[open] > summary.admin-fold-title::after { transform: rotate(90deg); }
details.admin-fold > summary.admin-fold-title:hover { color: var(--accent); }
/* Alerts: a row per level — a swatch running that level's cadence between
the two chosen colours (the keyframes are the shell's, in style.css), the
level's name, and its two pickers — then the test row. */
.alert-levels {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 14px;
}
.alert-level {
display: flex;
align-items: center;
gap: 12px;
}
.alert-preview {
flex: none;
width: 56px;
height: 28px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--alert-a, var(--border));
animation: alert-flash var(--alert-period, 3s) var(--alert-ease, ease-in-out) infinite;
}
.alert-preview.low { --alert-period: 3.2s; --alert-ease: ease-in-out; }
.alert-preview.medium { --alert-period: 1.1s; --alert-ease: ease-in-out; }
.alert-preview.critical { --alert-period: 0.6s; --alert-ease: steps(1, end); }
.alert-level-name {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.alert-level-name strong { font-size: 13px; }
.alert-level-name span { font-size: 12px; color: var(--muted); }
.alert-level input[type="color"] {
flex: none;
width: 44px;
height: 26px;
padding: 2px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--bg);
cursor: pointer;
}
.alert-level input[type="color"]:focus { outline: none; border-color: var(--accent); }
.alert-test {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding-top: 12px;
border-top: 1px solid var(--border);
}
.alert-test-label { font-size: 13px; color: var(--muted); }
.alert-test-select {
height: 26px;
padding: 0 6px;
font: inherit;
font-size: 13px;
color: var(--text);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 6px;
}
.alert-test-select:focus { outline: none; border-color: var(--accent); }
.theme-swatches {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));