Wallboard mode

Wallboard.tsxAt most four tiles, enforced by the type. Nominal is the same ink as the label, and a stalled feed is drawn as a state rather than left looking fine.Copy

import { cn } from "@/lib/utils";
import { freshness } from "../freshness-indicator/freshness";
import type { Status } from "../semantic-status-color/status";

export type Tile = { label: string; value: string; status: Status };

/** Four at most, and the type says so. Twelve panels at three metres is
 *  twelve panels nobody can read. */
export type Tiles = [Tile] | [Tile, Tile] | [Tile, Tile, Tile] | [Tile, Tile, Tile, Tile];

type Props = {
  tiles: Tiles;
  /** When the newest sample arrived and how often one should. A frozen page
   *  looks fine from ten feet, so stale has to be a state the board draws. */
  lastArrival: Date | null;
  expectedEveryMs: number;
  now?: Date;
};

/** Grey at rest. A nominal value is the same ink as its label; colour is
 *  spent only on a state someone should walk over for. */
const VALUE: Record<Status, string> = {
  nominal: "text-card-foreground",
  warn: "text-status-warn",
  critical: "text-status-critical",
  unknown: "text-status-unknown",
};

const clock = (d: Date) => `${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}`;

export function Wallboard({ tiles, lastArrival, expectedEveryMs, now = new Date() }: Props) {
  const { state } = freshness(lastArrival, expectedEveryMs, now);
  const frozen = state === "stale" || state === "unknown";

  return (
    <div className="relative grid grid-cols-2 gap-4 rounded-lg border bg-muted p-5" role="region" aria-label="wallboard">
      {tiles.map((t) => (
        <div key={t.label} className={cn("rounded-md border bg-card p-4", frozen && "opacity-40")}>
          {/* No hover, no legend, no chrome: the label is on the tile. */}
          <p className="text-xs uppercase tracking-[0.12em] text-muted-foreground">{t.label}</p>
          <p className={cn("mt-1 text-5xl font-medium tabular-nums", VALUE[t.status])}>{t.value}</p>
        </div>
      ))}
      {frozen && (
        <p className="absolute inset-x-5 top-1/2 -translate-y-1/2 rounded-md bg-status-critical px-4 py-3 text-center text-2xl font-medium uppercase tracking-[0.12em] text-card" role="alert">
          {lastArrival ? `stale since ${clock(lastArrival)}` : "no data"}
        </p>
      )}
    </div>
  );
}

demo.tsxHow it is called: four tiles, one critical, data twenty seconds old against a thirty-second cadence.Copy

import { Wallboard } from "./Wallboard";

/**
 * Four numbers for a screen across the room. Three are at rest and drawn in
 * the same ink as their labels; errors has crossed its threshold and is the
 * only colour on the wall. The clock is fixed so the board renders the same
 * on the server and in the browser.
 */
const NOW = new Date("2026-09-15T09:00:00Z");

export default function Demo() {
  return (
    <div className="w-[360px]">
      <Wallboard
        tiles={[
          { label: "Checkout", value: "99.4%", status: "nominal" },
          { label: "P95", value: "312", status: "nominal" },
          { label: "Queue", value: "7", status: "nominal" },
          { label: "Errors", value: "4.1%", status: "critical" },
        ]}
        lastArrival={new Date(NOW.getTime() - 20_000)}
        expectedEveryMs={30_000}
        now={NOW}
      />
    </div>
  );
}