Alerts tab, Docker tab, nine new skins including HUD, a colour for every machine

Alerts: rules over sensors, watched fleet-wide from the hub; ntfy and webhook channels;
firing count on the rail. Docker: containers by stack with live use, start/stop/restart,
following logs, inspect, images/volumes/networks. Skins: HUD, Nord, Gruvbox, Catppuccin
(+Latte), Dracula, Tokyo Night, Solarized (+Light). Accents: per-machine colour.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-09-19 15:07:15 -07:00
co-authored by Claude Fable 5.1
parent 63fcba6077
commit cb1617c2b8
17 changed files with 1185 additions and 15 deletions
+3 -2
View File
@@ -1,6 +1,7 @@
import { useEffect, useRef, useState } from 'react'
import { MachineStatus } from './api'
import { useEscape } from './ui'
import { accentFor } from './accents'
const hostOf = (url: string) => { try { return new URL(url).hostname } catch { return url } }
@@ -30,11 +31,11 @@ export default function MachineSwitcher({ hub, hubAddr, current, machines, onCha
{open && (
<div className="mmenu">
<button className={'mitem' + (!current ? ' on' : '')} onClick={() => { setOpen(false); onChange(null) }}>
<span className="dot ok" /><span className="mname">{hub}</span><span className="muted small mono">{hubAddr || 'this host'}</span>
<span className="dot ok" /><span className="mname" style={{ color: accentFor(hub) }}>{hub}</span><span className="muted small mono">{hubAddr || 'this host'}</span>
</button>
{machines.map((m) => (
<button key={m.name} className={'mitem' + (current === m.name ? ' on' : '')} onClick={() => { setOpen(false); onChange(m.name) }} title={m.error || m.url}>
<span className={'dot ' + dotFor(m)} /><span className="mname">{m.name}</span><span className="muted small mono">{hostOf(m.url)}{m.online ? '' : ' · offline'}</span>
<span className={'dot ' + dotFor(m)} /><span className="mname" style={{ color: accentFor(m.name) }}>{m.name}</span><span className="muted small mono">{hostOf(m.url)}{m.online ? '' : ' · offline'}</span>
</button>
))}
<button className="mitem manage" onClick={() => { setOpen(false); onManage() }}>+ manage machines…</button>