matrix-accounts: 3-state live status dot + user_id + snapshot freshness

Frontend for the BE-4 snapshot (#1702): GET /api/matrix-accounts now returns
per-account `live` + `user_id` and a top-level `as_of_unix`. Render a 3-state
dot instead of the v1 token-present-only one:

- green  (live + container running)  — online
- amber  (live + container DOWN)      — stale: the page already loads
  /api/state containers, so cross-reference running state; a container that's
  down means the daemon is down, so a "live" snapshot there is stale
- amber  (token_present + !live)      — provisioned but offline
- grey   (no token)                   — not provisioned

The daemon rewrites its snapshot only on (re)start, so `as_of_unix` is "live as
of", not a heartbeat — surfaced as a tooltip. We deliberately do NOT dim a
green purely on snapshot age (an old as_of is ambiguous: stable uptime vs dead
daemon); the container cross-ref catches the definitive down case, and true
daemon-up-but-client-dead detection is the daemon-heartbeat follow-up. user_id
is shown next to the account name. When `live` is absent (v1 backend not yet
deployed) the dot falls back to the token-present rendering, so this is safe to
ship independent of the backend deploy.

FE half of #1702 BE-4; pairs with the backend PR.
This commit is contained in:
iris 2026-06-22 12:53:52 +02:00
commit 06b2bd8b72
2 changed files with 87 additions and 23 deletions

View file

@ -57,12 +57,22 @@
border-radius: 50%;
flex: none;
}
.ma-dot.ok { background: var(--green); }
/* `ok` is the v1 (pre BE-4) token-present green; `live` is the v2 online green.
`offline`/`stale` are the amber states (provisioned-not-live / container-down
daemon-down). `absent` = no token. */
.ma-dot.ok,
.ma-dot.live { background: var(--green); }
.ma-dot.offline,
.ma-dot.stale { background: var(--amber); }
.ma-dot.absent { background: var(--muted); }
.ma-name { font-weight: 600; color: var(--fg); }
.ma-uid { color: var(--muted); font-size: 0.8rem; margin-left: 0.4em; }
.ma-hs { color: var(--muted); font-size: 0.85rem; }
.ma-status { margin-left: auto; font-size: 0.8rem; }
.ma-status.ok { color: var(--green); }
.ma-status.ok,
.ma-status.live { color: var(--green); }
.ma-status.offline,
.ma-status.stale { color: var(--amber); }
.ma-status.absent { color: var(--muted); }
.ma-result {