feat: make the deployment footprint panel calm and readable

[crypt0rr]

What changes

The Overview's Deployment footprint panel is redesigned. It showed six boxed tiles with tiny uppercase labels that truncated at 1280px and below ("HOST OBSERVATI…"). The two sandbox statuses ("Enforced · NET_RAW · Landlock · seccomp") were set in the large value font, so they wrapped over two to four lines and left a ragged second row.

Counters

• The six counters sit in one quiet strip with hairline dividers, in sentence-case labels that never truncate. The values use tabular numerals.
• The strip shows one row on a desktop panel, three columns on a tablet, and two on a phone. It sizes to its own width through container queries, because the sidebar makes the viewport width a poor guide.
• Counter values scale with their column (clamp(16px, …cqi, 21px)), so an eight-digit count still fits its cell; a longer one wraps inside the cell instead of running into the next.
• The five-counter unit view (no database size) leaves no empty cell.
• "Collected" moves into the heading as a <time> element.

Process isolation

The sandboxes move out of the counter grid into their own Process isolation section, with one row per sandbox (Scanners, Notifications):

• Status pill, with its own icon so colour is not the only signal:
  • Enforced (green): every reported layer holds.
  • Partial (amber): some layers hold.
  • Unavailable (red): none hold.
  • Off (grey): the setting turns the sandbox off.
• Layer marks: the identity (UID 65532), Landlock, and seccomp, each marked ✓ holding, ✗ unavailable, or – off. Screen readers hear "Landlock: unavailable". The kept capabilities follow as a quiet "Keeps NET_RAW".
• Reasons: one labelled line per layer that does not hold, in sentence case, with configuration keys set in code:
  • identical reasons share one line, e.g. "Identity, Landlock, seccomp: scanner.sandbox is off.";
  • seccomp shares Landlock's reason while Landlock does not hold, because it is installed with Landlock.
• Behaviour change: a sandbox now shows Enforced only when every reported layer holds. Before, an identity sandbox whose seccomp filter had failed still read "Enforced". The separate warning banner for unconfined UID 0 scanners is unchanged.
• Older daemons that report no Landlock or seccomp state show only the layers they report. A daemon that reports no sandbox shows the counters alone, with the previous description.

How it was designed and reviewed

• Designs: three directions were implemented and rendered in healthy, degraded and off states at 1440, 1280, 1000 and 390px. Judges scored them for visual polish, administrator clarity, and responsiveness and accessibility. This version starts from the winning "strip" layout and grafts on the runner-up's per-layer states and labelled reasons.
• Review: five reviewers checked the result, covering visual, accessibility (including WCAG contrast), the status logic against internal/sandbox, responsive edge cases, and code and tests. Two skeptics checked each finding.
• Confirmed and fixed:
  • large counters overflowing their cells;
  • status pills staying at 11px on phones while other pills go to 12px;
  • the layout of browsers without subgrid, which lacked a column gap and a fixed status column.

Validation

• npm run lint, npm run build, npm run test:coverage: 51 files, 565 tests; frontend coverage gates pass. src/pages/Dashboard.tsx is at 98.6% lines.

• src/pages/Dashboard.test.tsx and Dashboard.units.test.tsx now check:

  • each sandbox's status, tone, icon, layers with their spoken state, reasons, and kept capabilities;
  • the counter label and value pairs;
  • the heading time;
  • the description with and without sandboxes;
  • the never-green-while-a-layer-fails case.

• e2e/deployment-footprint.spec.ts (new) renders the panel with eight-digit counters and degraded sandboxes, and the five-counter unit view, at 320, 390, 1000, 1280 and 1440px. It requires:

  • every counter and label to stay inside its cell, nothing in the strip to overflow or truncate, and no page scroll;
  • six counters on one row at 1280px and three rows at 390px;
  • no empty cell in the unit view.

  It fails against the previous fixed 21px no-wrap counters.

• npm run test:e2e: 153 passed.

• npm --prefix docs run build: container-hardening.md now describes the Process isolation section.

[cloudflare-workers-and-pages]

Deploying edgewatch with    Cloudflare Pages

Latest commit:	c19262a
Status:	✅  Deploy successful!
Preview URL:	https://a8b801f6.edgewatch-cpd.pages.dev
Branch Preview URL:	https://ui-sleek-footprint.edgewatch-cpd.pages.dev

View logs