Log tail

Dense monospace text that has to stay scannable while it moves. Severity is the only colour, timestamps are fixed width, and the scroll detaches the moment a reader touches it.

npx shadcn@latest add button

Tokens this needs: --card, --card-foreground, --muted-foreground, --border, --status-critical, --status-warn, --status-nominal, --status-unknown, --state-live
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.

────────────────────────────────────────────────────────────────────────
// LogTail.tsx
────────────────────────────────────────────────────────────────────────

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/** The seven levels Grafana reads off a `level` label. Colour comes from the
 *  field, never from a regex over the text. */
export type Level = "critical" | "error" | "warning" | "info" | "debug" | "trace" | "unknown";

export type LogLine = { ts: Date; level: Level; message: string; trace: string };

/** Grafana's four. Exact matches whole lines with the date excluded. */
export type Dedup = "none" | "exact" | "numbers" | "signature";

type Props = {
  lines: LogLine[];
  dedup: Dedup;
  live: boolean;
  onToggleLive: () => void;
  /** Lines that arrived after this are drawn on a contrasting ground, so the
   *  eye can find what is new against what was already there. */
  readThrough: Date;
  /** The way out. A line is evidence, and evidence attaches to a request. */
  onOpenTrace: (trace: string) => void;
};

const GUTTER: Record<Level, string> = {
  critical: "border-status-critical", error: "border-status-critical", warning: "border-status-warn",
  info: "border-status-nominal", debug: "border-muted-foreground", trace: "border-muted-foreground", unknown: "border-status-unknown",
};

/** Fixed width, stated timezone. 09:00:12.041 lines up under 09:00:12.978. */
const stamp = (d: Date) =>
  `${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}:${String(d.getUTCSeconds()).padStart(2, "0")}.${String(d.getUTCMilliseconds()).padStart(3, "0")}`;

const key = (line: LogLine, dedup: Dedup) => {
  if (dedup === "none") return null;
  const text = `${line.level} ${line.message}`;
  if (dedup === "exact") return text;
  if (dedup === "numbers") return text.replace(/\d+/g, "#");
  return text.replace(/\S*\d\S*/g, "#");
};

/** Consecutive lines with the same key collapse into the first, with a count. */
const collapse = (lines: LogLine[], dedup: Dedup) => {
  const rows: { line: LogLine; count: number }[] = [];
  for (const line of lines) {
    const last = rows[rows.length - 1];
    const k = key(line, dedup);
    if (last && k !== null && k === key(last.line, dedup)) last.count++;
    else rows.push({ line, count: 1 });
  }
  return rows;
};

export function LogTail({ lines, dedup, live, onToggleLive, readThrough, onOpenTrace }: Props) {
  const rows = collapse(lines, dedup);
  return (
    <div className="w-full max-w-[480px] overflow-hidden rounded-lg border bg-card">
      <div className="flex items-center gap-2 border-b p-3 text-[10px]">
        <Button
          variant="ghost" size="sm" onClick={onToggleLive} aria-pressed={live}
          className={cn("h-5 rounded-full px-2 text-[10px]", live ? "bg-state-live/20 text-state-live" : "border text-muted-foreground")}
        >
          {live ? "live tail" : "paused"}
        </Button>
        <span className="rounded-md border px-2 py-0.5 text-muted-foreground">dedup: {dedup}</span>
        <span className="ml-auto text-muted-foreground">UTC</span>
      </div>
      <ul className="m-0 list-none p-0 font-mono text-[10px]" aria-live={live ? "polite" : "off"}>
        {rows.map(({ line, count }, i) => {
          const fresh = line.ts > readThrough;
          const first = fresh && (i === 0 || rows[i - 1].line.ts <= readThrough);
          return (
            <li
              key={`${line.ts.getTime()}-${i}`}
              className={cn("flex items-center gap-3 border-l-4 py-1.5 pl-3 pr-3", GUTTER[line.level], fresh && "bg-state-live/10", first && "shadow-[0_-1px_0_hsl(var(--border))]")}
            >
              <span className="shrink-0 tabular-nums text-muted-foreground">{stamp(line.ts)}</span>
              <span className="min-w-0 flex-1 truncate text-card-foreground">{line.message}</span>
              {count > 1 && <span className="shrink-0 rounded bg-status-warn/20 px-1.5 py-0.5 text-status-warn">×{count}</span>}
              <button type="button" onClick={() => onOpenTrace(line.trace)} className="ml-auto shrink-0 text-muted-foreground underline-offset-2 hover:underline" aria-label={`open trace ${line.trace}`}>
                {line.trace}
              </button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { LogTail, type LogLine } from "./LogTail";

/**
 * Ninety seconds after a deploy. One request fails against the upstream and
 * retries 412 times; exact dedup folds that into one row. The last two lines
 * arrived after the viewer last looked, so they sit on the live ground.
 */
const NOW = new Date("2026-09-15T09:00:14.000Z");
const at = (msAgo: number) => new Date(NOW.getTime() - msAgo);

const LINES: LogLine[] = [
  { ts: at(3_120), level: "info", message: "GET /checkout/summary 200 41ms", trace: "4a91c2" },
  { ts: at(2_980), level: "warning", message: "cart total recomputed: shipping rule 7 changed after quote", trace: "7fe310" },
  { ts: at(2_610), level: "error", message: "upstream connect error: payments-v2 refused connection", trace: "b20d84" },
  ...Array.from({ length: 412 }, (_, i) => ({
    ts: at(2_600 - i * 5), level: "error" as const, message: "retrying payments-v2 in 5ms", trace: "b20d84",
  })),
  { ts: at(520), level: "info", message: "GET /checkout/summary 200 38ms", trace: "c81f05" },
  { ts: at(140), level: "info", message: "POST /checkout/confirm 201 212ms", trace: "d40a71" },
  { ts: at(22), level: "info", message: "GET /orders/8813 200 30ms", trace: "e15b93" },
];

export default function Demo() {
  const [live, setLive] = useState(true);
  return (
    <LogTail
      lines={LINES}
      dedup="exact"
      live={live}
      onToggleLive={() => setLive(!live)}
      readThrough={at(500)}
      onOpenTrace={() => {}}
    />
  );
}