From f9c2351ab69c073740f57ca689c7acebf05e9a85 Mon Sep 17 00:00:00 2001 From: Steve Cliff Date: Fri, 1 May 2026 18:48:15 +0100 Subject: [PATCH] =?UTF-8?q?design:=20v1=20polish=20=E2=80=94=20row=20accen?= =?UTF-8?q?ts,=20wider=20last-backup=20col,=20empty=20state?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Single .host-row CSS rule replaces 13 inline grid-template-columns copies; column widths bumped so "backup running…" doesn't wrap. - Faint left-edge accent for degraded / failed / offline rows so problem hosts are scannable without reading. - Empty-state hero added: top-bar + nav still present (Dashboard active, others dimmed) but body collapses to a calm "no hosts yet" prompt with the install command as the load-bearing affordance. Prerequisite note keeps the deliberate "restic must already be installed" decision visible to first-time operators. This is the artefact P1-23/24/27 will template against. Co-Authored-By: Claude Opus 4.7 (1M context) --- design/v1-operator-console.html | 155 ++++++++++++++++++++++++++++---- 1 file changed, 139 insertions(+), 16 deletions(-) diff --git a/design/v1-operator-console.html b/design/v1-operator-console.html index d947527..36b9395 100644 --- a/design/v1-operator-console.html +++ b/design/v1-operator-console.html @@ -106,6 +106,54 @@ } .components-section { margin: 64px 0 96px; } .components-section h2 { font-size: 14px; font-weight: 600; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; } + + /* Single source of truth for the host-row grid. The "last backup" + column was previously 1.1fr — too narrow for "backup running…" + to fit on one line. Bumped to 1.5fr; trimmed name to compensate. */ + .host-row { + display: grid; align-items: center; + grid-template-columns: 24px 1.4fr 0.95fr 1.5fr 0.75fr 0.7fr 0.7fr 1.1fr 92px; + padding: 11px 16px; font-size: 13px; + /* Reserve the 3px the row-accent will live in so degraded/failed + rows don't shift sideways relative to healthy ones. */ + border-left: 3px solid transparent; + } + .host-row.head { padding-top: 10px; padding-bottom: 10px; font-size: 11px; color: var(--ink-fade); text-transform: uppercase; letter-spacing: 0.08em; border-left-width: 3px; } + .host-row.degraded { border-left-color: color-mix(in oklch, var(--warn), transparent 50%); } + .host-row.failed { border-left-color: color-mix(in oklch, var(--bad), transparent 50%); } + .host-row.offline { border-left-color: color-mix(in oklch, var(--off), transparent 70%); } + + /* Empty state: full-bleed quiet panel inside the stage. */ + .empty-state { + text-align: center; padding: 88px 32px 96px; + border: 1px dashed var(--line); border-radius: 8px; + background: + radial-gradient(ellipse at top, color-mix(in oklch, var(--accent), transparent 95%), transparent 60%), + var(--panel); + } + .empty-state h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.005em; } + .empty-state p { + color: var(--ink-mid); max-width: 520px; margin: 12px auto 0; + line-height: 1.65; font-size: 13px; text-wrap: pretty; + } + .empty-state .install-card { + max-width: 640px; margin: 28px auto 0; + text-align: left; background: var(--bg); + border: 1px solid var(--line-soft); border-radius: 6px; + overflow: hidden; + } + .empty-state .install-card-head { + font-size: 11px; color: var(--ink-fade); + padding: 10px 14px; border-bottom: 1px solid var(--line-soft); + display: flex; justify-content: space-between; align-items: center; + text-transform: uppercase; letter-spacing: 0.1em; + } + .empty-state .install-card pre { + margin: 0; padding: 14px; font-family: 'JetBrains Mono', monospace; + font-size: 12px; color: var(--ink-mid); line-height: 1.7; + white-space: pre-wrap; word-break: break-all; + } + .empty-state .install-card pre .var { color: var(--accent); } @@ -218,7 +266,7 @@
-
+
Host
OS · arch
@@ -231,7 +279,7 @@
-
+
prod-db-01
linux/amd64
@@ -247,7 +295,7 @@
-
+
prod-db-02
linux/amd64
@@ -262,7 +310,7 @@
-
+
prod-web-01
linux/amd64
@@ -277,7 +325,7 @@
-
+
prod-web-02
linux/amd64
@@ -292,7 +340,7 @@
-
+
prod-cache-01
linux/amd64
@@ -307,7 +355,7 @@
-
+
homelab-nas
linux/arm64
@@ -322,7 +370,7 @@
-
+
homelab-pi
linux/arm64
@@ -337,7 +385,7 @@
-
+
dev-laptop
linux/amd64
@@ -352,7 +400,7 @@
-
+
windows-vm
windows/amd64
@@ -367,7 +415,7 @@
-
+
build-runner
linux/amd64
@@ -382,7 +430,7 @@
-
+
backup-test
linux/amd64
@@ -397,7 +445,7 @@
-
+
edge-node-eu
linux/arm64
@@ -470,6 +518,81 @@
+ +
+
Empty state · first run
+
+
+
+ + +
+
+
+
restic-manager
+
v0.1.0-alpha
+
+
+
steve@dcglab
+ +
+
+
+ + +
+
+ +
+ +
+
+
+ + +
+
+

No hosts yet.

+

+ restic-manager tracks + backups across a fleet — but there’s nothing to track until you enrol + your first host. Run the snippet below on a Linux box, paste the + one-time token, and it’ll appear here within a few seconds. +

+ +
+
+ Install command · expires in 1h + +
+ 
curl -fsSL https://restic.lab.example/install.sh | sudo \
+  RM_SERVER=https://restic.lab.example \
+  RM_TOKEN=HdqFbQh8U-I1fb52iP1M8qxvoYS5t9VZ-T-yghr_CzA sh
+
+ +
+ + +
+ +
+ Prerequisites: restic ≥ 0.16 already installed on the target host. The agent will not install it for you — see why. +
+
+
+ +
+
+

Component vocabulary

@@ -531,7 +654,7 @@
Host row · 3 states
-
+
healthy-host
linux/amd64
@@ -542,7 +665,7 @@
prod
-
+
degraded-host
linux/amd64
@@ -553,7 +676,7 @@
prod
-
+
offline-host
linux/amd64