Wallboard mode

Read from ten feet away, with no mouse and nobody watching most of the time. Type goes up several steps and interaction goes to zero. The only thing that should change unprompted is state someone needs to walk over for.


Tokens this needs: --card, --card-foreground, --muted, --muted-foreground, --border, --status-critical, --status-warn, --status-unknown
The status, chart, scale, state and direction names are an extension,
not a rename. shadcn has --destructive and five --chart-* and nothing
else in this territory.

────────────────────────────────────────────────────────────────────────
// Wallboard.tsx
────────────────────────────────────────────────────────────────────────

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.tsx
────────────────────────────────────────────────────────────────────────

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>
  );
}