The amber-500 / amber-400 / emerald-500 fills on the Duration bar
were all fully opaque, which read as a wall of saturated orange on
any tab with many slow tasks. Switch to the canonical bg-metric-*-bg
tokens that Storage and Ceph row bars already use — same 60%-alpha
palette, immediately calmer in the same column.
Also cap at `warning` (soft yellow) rather than going to `critical`
(red) for the worst case. A slow backup task is a perf outlier, not
a failure; failure is already conveyed by the Status column. Two
tiers — normal / slow — keeps the column from looking alarmed on
every long-running VM backup.
No-data slots stay neutral via slate-500/30 instead of slate-400, so
empty rows don't draw the eye.
Was a gap, not an intentional decision. Storage has full click-sort
with arrow indicators; Replication and Ceph don't, but those have
8 jobs / 1 cluster respectively — easy to eyeball. Backups has 184
tasks and 189 archives, which is past the scannable threshold for
"which backup is biggest? which task ran slowest? which guest is
hoarding snapshot disk?" — exactly the questions a sysadmin opens
the page to answer.
Reuse Storage's pattern: per-column sortKey + sortDirection signals,
default direction per key (desc for numeric/timestamp, asc for
strings, desc for booleans), `aria-sort` on the TH, idle / asc /
desc arrow trio rendered the same way as StoragePoolsTable.tsx.
Numeric/string comparators put undefined values last regardless of
direction — flipping a running task with no finished duration to
the top of a desc sort would never be what the user wants. Boolean
comparator follows direction so Protected/Verified sort cleanly.
Default sort per tab preserves the current behaviour (newest first):
- Snapshots: latest desc
- Backup files: created desc
- Recent tasks: started desc
Sortable columns:
- Snapshots: guest, node, latest, snapshot count, total size
- Backup files: volume, guest, storage, node, format, created,
size, protection, verified
- Recent tasks: status, guest, node, started, duration, size
The Backups Size and Duration columns were rendering a bespoke
`InlineProgressBar` — a small fixed-width bar floating next to text.
Every other row metric in Pulse (Storage usage, Ceph pool usage,
Workloads CPU/Memory/Disk) is rendered by `ProgressBar` from
`@/components/shared`: full-cell-width fill with the value text
overlaid on top, via a foreignObject-clipped label. Introducing a
second pattern just for these two columns was a needless divergence
called out in the second consistency pass.
Drop the bespoke component. Wrap shared `ProgressBar` in a
RowMetricBar helper that matches the Storage/Ceph convention
(`STORAGE_BAR_LABEL_WRAP_CLASS` shape) and use it for both columns.
The Size and Duration headers move to the `metric-bar` column kind
so alignment lines up with the bar's natural centring. Bars now
share the same shape, animation curve (320ms width transition from
`progress-fill`), and label-clipping behaviour as the rest of the
app — same code path, same look.
The Size and Duration columns were rendering the bar to the LEFT of
the value text with `justify-end` on the whole flex group. Because
the text width varies row-to-row ("8 KB" vs "131 GB", "48m 0s" vs
"1h 23m 5s"), the bar's right edge shifted with the text, so two
bars in the same column did not share a common baseline. That
defeats the point of a comparison bar — you can't read relative
length when the bars are positioned differently per row.
Put the bar AFTER the text instead. Since the bar has a fixed width
and is now the rightmost element in the cell, every bar's left and
right edges land at the same x in every row, and the column reads
as a proper mini-chart. Always render the bar slot (empty track when
the underlying value is 0) so the column rhythm stays constant when
data is missing. Documented the invariant on the InlineProgressBar
helper.
Smaller details that diverged from sibling pages:
- Tone-colour the Recent tasks STATUS word per state (emerald / red /
amber / muted), matching Replication's `text-emerald-600 dark:
text-emerald-300` per-state tone. Was rendering everything in
default base-content white.
- Move the Snapshots row age dot from the GUEST column to the LATEST
column so the timestamp-and-its-freshness-dot live together — same
pattern Backup files already uses in its Created column. The
leftmost GUEST cell is now just chevron + label.
- Tighten counter wording. "189 entries" / "184 entries" → "189
archives" / "184 tasks", matching Replication's "8 jobs" and Ceph's
"1 clusters" domain-noun convention.
- Pill-style the Verified column in Backup files (emerald chip) so it
reads as a sibling of the existing amber Protected chip rather than
dot+text. Both columns now signal an explicit positive state with
the same chip shape.
- Tighten inner snapshot-drilldown table header padding to py-0.5 to
match the outer table's getPlatformTableHeadClass (was py-1).
Consistency pass after the initial backup-pages rework. Row-dot
colours, coverage-strip segments, and filter-chip labels were
encoding the same data through three different threshold schemes;
all three now share the per-tab SLA buckets so a 14d archive shows
amber in the row, sits in the amber stale (7–30d) segment of the
strip, and lands under the "Stale" filter chip.
Other tightening: hide the single-segment chart legend when there's
nothing to disambiguate (Snapshots and Backup files); always render
the Error column on Recent tasks (matching Replication, where it
shows "—" rather than collapsing); reword the Backup-files strip
tail from the ambiguous "guests covered" to "guests with archives";
strip the redundant inner-table border in the snapshot drilldown so
it reads like Ceph's borderless sub-tables; terse "X guests" or
"X of Y guests" counter on the Snapshots tab matching Replication's
"8 jobs" style.
Adds classifyArchiveRowAge / classifySnapshotRowAge in the summary
module with unit coverage for the threshold breakpoints, and drops
a dead archiveMetricMode() reference left over from the earlier
patch.
The three Backups tabs (Snapshots, Backup files, Recent tasks)
enumerated artifacts in flat tables with almost no graphic encoding,
while sibling Proxmox pages (Overview, Storage, Ceph) lead with
coverage-shaped summaries and per-row visual signal. Aligns them.
Snapshots gains a per-day chart, filter chips (All / Recent ≤7d /
Stale >30d / With RAM), a coverage strip splitting guests by newest-
snapshot bucket, and a guest-grouped table whose rows expand to show
the per-guest snapshot history (same drilldown pattern as Ceph).
Backup files gains a coverage strip (current / stale / uncovered
guests against a 7-day SLA), a Count/Volume toggle so the chart can
answer "how much disk did backups take" not just "how many files",
an age dot on the Created column, and an inline size bar in the Size
column (relative to the largest file in view).
Recent tasks gains a coverage strip (OK / failed / running plus
median duration), an inline duration bar tone-coded against the
median, and the Error column is hidden when no task in view has an
error. Shared row-level age presentation lives in the new
proxmoxBackupSummaryPresentation module with unit coverage.
StoragePageControls.showClearAll fed the actual sourceFilter() into
hasActiveStorageFilters even when the parent forced the scope via
suppressSourceFilter (e.g. Proxmox/Storage mounts StorageSurface
with forcedSourceFilter='proxmox-pve'). Because 'proxmox-pve' is not
the global DEFAULT_STORAGE_SOURCE_FILTER ('all'), the active-filter
check returned true on first paint and the Reset button showed
unconditionally — even though no user-controllable filter had been
changed.
Treat the source filter as DEFAULT_STORAGE_SOURCE_FILTER inside the
active check when suppressSourceFilter is set; the user can't change
that filter on a scoped storage tab, so it must not surface Reset.
suppressNodeFilter was already handled symmetrically; this aligns
sourceFilter with that contract.
PlatformTableToolbar was rendering FilterButtonGroup with the default
variant (heavy bg-surface-alt box, border-heavy active state, fixed
blue active color) on every platform sub-page — Replication, Ceph,
Backups, Mail Gateway, Docker Hosts/Services, K8s Clusters/Nodes/
Deployments, TrueNAS Systems, vSphere Hosts. The Proxmox / Docker
overview WorkloadsFilter, by contrast, uses the compact variant with
per-option tone, so "Running" goes green, "Stopped" goes red, etc.
Switch the shared toolbar to compact and enrich the shared status
filter option arrays (PLATFORM_STATUS_FILTER_OPTIONS,
PLATFORM_HEALTH_FILTER_OPTIONS) with tone + leading status dot. Same
treatment for the bespoke filter arrays on Replication (Healthy /
Failed / Pending / Disabled), Ceph (Healthy / Warning / Critical),
and Backups archives + tasks (Protected / Verified / Unverified,
OK / Failed / Running). Backups archives and tasks also flip from
default to compact variant since they bypass PlatformTableToolbar.
Settings panel FilterButtonGroup usages stay default — different
context, intentionally heavier.
Uptime placement was the most visibly drifty ordering on platform top
tables: Proxmox and TrueNAS sat it at position 3 (before any bars),
Docker / vSphere at position 8 (after bars), Kubernetes Nodes at the
very end (after Capacity). Same monitoring concept rendered in three
different positions depending on the table.
Lock in the convention: Uptime is monitoring state, not identity. It
canonically sits between the bar block (CPU / Memory / Disk / Storage,
plus the Temp diagnostic) and the inventory counts.
Apply that rule:
- Proxmox host model: Uptime moves from position 3 to position 7
(Node, Version, CPU, Memory, Disk, Temp, Uptime, VMs, CTs, Cluster).
- TrueNAS systems table: Uptime moves from position 3 to position 7
(System, Version, CPU, Memory, Storage, Temp, Uptime, Pools,
Datasets, Disks, Apps).
- Kubernetes nodes table: Uptime swaps with Capacity so Uptime sits
between the bars and the Capacity inventory string (Node, Cluster,
Roles, Kubelet, Runtime, CPU, Memory, Uptime, Capacity).
The columnAlignment.ts docstring now documents the recommended column
ordering (identity → context → state → bars → diagnostic → time →
inventory → external) alongside the kind-to-align mapping, so the
ordering convention sits in the same source-of-truth file every agent
already reads when editing a platform table.
Other ordering questions (where integer counts sit relative to bars;
where the cluster-reference column sits) are left as each table's
current choice. They are defensible either way and have a real visible
UX cost to change. Revisit if drift surfaces.
Adds canonical-platform-table/no-legacy-align-helper to
canonical-platform-audit.mjs: any platform table file that calls the
legacy `getPlatformTableHeadClass(<align>)` or
`getPlatformTableCellClass(<align>)` helper now fails the audit (which
runs in the pre-push hook). Authors are pointed at the kind-based
wrappers and the canonical column-kind file.
Two intentional allowlist entries:
- sharedPlatformPage.tsx: the kind-based wrappers internally delegate
to the align-based helpers; that's the one legitimate call site.
- KubernetesClustersTable.tsx: another agent has this file
mid-staged in their working tree. Removing this entry is part of
that file's migration commit (drop the entry whenever the file
moves to the *ForKind wrappers).
To support per-rule exemptions cleanly, the audit's inner loop now
honours an optional `allowFiles: Set<string>` on each HELPER_RULE
entry. Existing rules are unchanged; only the new rule uses it.
The platformOverviewLayout.guardrails.test.ts assertions are updated
to match the kind-based forms (regex match on the new
getPlatformTableHeadClassForKind('<kind>') ... <label> shape) for the
migrated files. The two Kubernetes Clusters assertions continue to
match the legacy form until that file migrates.
Workspace-level CLAUDE.md and AGENTS.md (at /Volumes/Development/pulse/,
outside this git repo) also got a one-paragraph entry pointing at the
canonical source-of-truth file and the audit rule, so every agent
session that reads those bootstrap files at startup picks up the
convention.
The shared WorkloadTableHeader (the bottom guest-list table on every
platform overview page) previously center-aligned every non-name,
non-image column with a hardcoded ternary. Under the canonical
established in the previous commit, that's wrong for several columns:
Uptime / Net I/O / Disk I/O are numeric-value columns that should
right-align (so units and digits line up for column scanning), and
Runtime / IP / Node / Image / Namespace / Context are text columns
that should left-align (for reading).
Approach: add an optional `kind?: PlatformTableColumnKind` field to
the shared ColumnDef in useColumnVisibility.ts, tag every column in
GUEST_COLUMNS with the right kind, and have WorkloadTableHeader read
col.kind via `getPlatformColumnAlign()`. The first column is always
left-aligned regardless of kind (since it's the primary identifier
for the row). Unknown / unset kinds fall back to text → left.
The kind tags map straightforwardly: name → 'name', metric bars
(cpu/memory/disk) → 'metric-bar', integer/scalar columns
(uptime/info/vmid/netIo/diskIo) → 'numeric-value', text strings
(runtime/ip/node/image/namespace/context) → 'text', visual pills /
icons (type/backup/tags/os/update) → 'badge'. The canonical helper
maps those to text-left, text-center, text-right consistently across
every platform page.
Visible result: on every platform page, CPU/Memory/Disk headers now
center over their bars in both the top and bottom tables, integer
counts and time/I/O values right-align in both, and text columns
left-align in both. The "complete hobbledy codge" of the same column
showing left in one table and center in another is gone.
Until now, the same column (CPU/Memory/Disk) was aligned differently
depending on which table it appeared in: Proxmox top tables defaulted
to left, Docker/TrueNAS/vSphere/Kubernetes top tables used right, the
shared workloads bottom table used center, and integer-count columns
(VMs/CTs/Containers/Datastores/Desired/etc.) were a mix of right and
center. The user's read: "complete hobbledy codge."
Codify the rule once and for all. The new
frontend-modern/src/features/platformPage/columnAlignment.ts defines
five canonical column kinds with a documented align mapping and the
rationale for each:
- 'name' left primary identifier
- 'text' left readable strings
- 'metric-bar' center bar fills cell, label rides at fill edge
- 'numeric-value' right units/digits line up for column scanning
- 'badge' center pill/icon-only cells
sharedPlatformPage exposes getPlatformTableHeadClassForKind() and
getPlatformTableCellClassForKind() wrappers; every platform top table
plus the Docker services table now consume these instead of passing
literal align strings. The Proxmox host column model carries a kind
field instead of a raw align so the same source of truth drives both
the model file and the JSX.
KubernetesClustersTable.tsx is intentionally not migrated in this
commit: another agent has it staged in their working tree. The same
migration applies once that lands; left for a follow-up.
The WorkloadTableHeader (shared bottom guest-list table) is also
unmigrated here. It center-aligns everything today, and changing it to
canonical means flipping Uptime / Net I/O / Disk I/O from center to
right across every guest list on every platform page — bigger visual
blast radius, so it gets its own scoped commit next.
A canonical-platform-audit rule and a CLAUDE.md/AGENTS.md note will
follow in a third commit, so any future agent that writes a
non-canonical align fails the pre-push hook rather than discovers the
drift visually weeks later.
Kubernetes, vSphere, TrueNAS, and Proxmox all rendered the same
single-axis "+ Filter" combobox the Docker overview just lost, leaving
the page surfaces visually inconsistent. The unified workload search
(workloadSearchCandidates in workloadSelectors.ts:52-70) already covers
node, namespace, contextLabel, clusterName, platformType and
containerRuntime — i.e. every axis the dropdown carried on these pages
— and each surface's search placeholder advertises that coverage
("Search pods by name, namespace, image, cluster, or node",
"Search VMs and LXCs by name, VMID, node, or status", etc.). Suppress
hostFilter and namespaceFilter on all four surfaces so the workload
toolbar is consistently chip-only: Status, Runtime (where applicable),
Group by, Metric display.
Same equal-width problem on /kubernetes/nodes: the Nodes table (9
columns) and the Deployments table (7 columns) both ran under
table-fixed with no per-column desktop widths, so longer values like
runtime "containerd://1.7.20" and capacity "6 cores / 51.0 GB"
truncated, while the four integer-count Deployments columns (Desired /
Updated / Ready / Available) each held 183px for a single-digit value.
Set explicit md:w-[...] on every TableHead so the longer-content
columns (Node, Runtime, Capacity, Deployment, Namespace) get the room
they need, the CPU and Memory bars get a balanced share each, and the
short text and integer-count columns trim to fit their headers and
values. Mobile widths are unchanged.
Leaving KubernetesClustersTable.tsx alone for now: another agent has
it mid-edit. Same fix pattern can be applied to it once their work
lands.
After promoting Runtime to a chip toggle, the "+ Filter" combobox
carried only the Node scope. The Docker workload search box already
matches against host identity candidates (docker.hostname,
agent.hostname, identity.hostname, canonicalIdentity.hostname and
aliases — see filterDockerHosts), so narrowing by host name is
already a search keystroke away. Same-named hosts can be disambiguated
by typing the host's id suffix. Dropping hostFilter from the Docker
page surface only, since other workload surfaces (notably Proxmox
where many nodes are not always visible in a top table) have different
ergonomics and should be evaluated separately.
Same equal-width problem as the platform overview tops: this table sat
on table-fixed with no per-column desktop widths, so all 7 columns
rendered at the same ~183px. Image references like
"registry.example.com/backend-deluge:2025-..." got truncated while the
1-digit Desired and Running columns held the same allocation.
Set explicit md:w-[...] on every TableHead. Service and Image take the
biggest shares (22% and 25%) for their long content, Mode / Desired /
Running trim to short text and integers, and Ports / Host get a middle
slice. Image now renders its full registry path at 1440px instead of
truncating. Mobile widths are unchanged.
The promoted Runtime chip group rendered with a verbose "All runtimes"
label and lowercase, dot-less docker/podman pills, breaking the visual
rhythm of the Status / Group by / Metric display chips it now sits
alongside. Map the runtime options to the same style as Status: concise
"All" for the empty value, capitalized "Docker" / "Podman" labels, and
leading dots in the canonical runtime badge colors (sky for Docker,
violet for Podman) so the chip palette echoes the runtime badges
rendered in the table rows.
The Runtime axis was hidden inside the "+ Filter" combobox under a
"Properties" optgroup with at most two real choices (docker, podman),
sitting next to Status / Group by / Metric display which are already
chip toggles. Render it inline alongside Status so the binary axis is
one click instead of two, and hide the filter entirely when fewer than
two distinct runtimes are present so single-runtime deployments are not
shown a degenerate All/<one-runtime> control. The leftover "+ Filter"
select now carries only the Node scope.
Same equal-width issue as the other platform overview top tables: 9
columns at ~147px each under table-fixed meant FQDN-style host names
(esxi-01.lab.local) and longer cluster names ("Production Cluster") sat
on the same width as the Datastores and VMs integer-count columns, and
the CPU / Memory bars couldn't show their inline "% (used / total)"
labels.
Set explicit md:w-[...] on every TableHead so the Host column gets 18%
(comfortable for FQDNs), CPU and Memory share 13% each as parallel bar
metrics, Cluster / Datacenter / Power / vCenter take what their text
content needs, and Datastores / VMs trim to fit their headers plus
1-2 digit counts. Memory now shows the full size info ("71% (57.2 GB/
80.0 GB)") at 1440px instead of just the percentage. Mobile widths are
unchanged.
Same equal-width issue as the Docker and Proxmox top tables: table-fixed
across 11 columns with no per-column desktop widths gave every column the
same ~120px slice. That squeezed the Version field (where
"TrueNAS-SCALE-24.10.2" is a normal 21-char value) and clipped the size
labels on the CPU / Memory / Storage bars, while the four integer-count
columns (Pools / Datasets / Disks / Apps) sat on 120px each holding
single-digit values.
Set explicit md:w-[...] on every TableHead so the three bar columns get
balanced shares (CPU 11%, Memory 12%, Storage 13%), Version and System
each get 14% for their longer mono-spaced and hostname content, and the
four count columns trim to what their headers need (Pools/Disks/Apps
~5-6%, Datasets 7% for the longer header). Memory and Storage bars now
show their full "% (used / total)" labels at 1440px instead of hiding
the size portion. Mobile widths are unchanged.
rcourtman