26:Td548,
/** A web service's lines, made up the same way on every visit: line `n` is drawn
 *  from its own seed, so a stream can append line after line and stay the same. */
function seeded(seed: number) {
  let s = seed >>> 0
  return () => {
    s = (s + 0x6d2b79f5) >>> 0
    let t = Math.imul(s ^ (s >>> 15), s | 1)
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

const pick = <T,>(r: () => number, xs: readonly T[]): T =>
  xs[Math.floor(r() * xs.length)] as T

const PATHS = ["/api/orders", "/api/users", "/api/search", "/api/cart"]
const HOSTS = ["node-07", "node-12", "node-19"]
const REGIONS = ["fra1", "iad1", "sfo1"]

/** Line `n` of the service's log, written `after` the instant before it. */
function serviceLine(n: number, after: number): LogLine {
  const r = seeded(n * 7919 + 17)
  const at = after + Math.round(40 + r() * r() * 1400)
  const id = `l${n}`
  const request = Math.floor(r() * 0xffffff)
    .toString(16)
    .padStart(6, "0")
  const roll = r()
  if (roll < 0.035)
    return {
      id,
      at,
      level: "error",
      source: "api",
      message:
        "TypeError: Cannot read properties of undefined (reading 'id')\n    at total (/app/api/orders.ts:42:17)\n    at handler (/app/api/orders.ts:18:9)",
      fields: { request_id: request, path: "/api/orders", status: 500 },
    }
  if (roll < 0.06)
    return {
      id,
      at,
      level: "error",
      source: "db",
      message: "connection reset by peer (db-primary:5432)",
      fields: { pool: "primary", attempt: 3, gave_up: true },
    }
  if (roll < 0.1)
    return {
      id,
      at,
      level: "warn",
      source: "db",
      message: `slow query ${Math.round(900 + r() * 1600)} ms on orders (select by customer_id)`,
      fields: { table: "orders", rows: Math.round(r() * 40000), index: false },
    }
  if (roll < 0.14)
    return {
      id,
      at,
      level: "warn",
      source: "worker",
      message: `retrying job ${8000 + Math.floor(r() * 999)}, attempt 2 of 5`,
    }
  if (roll < 0.32)
    return {
      id,
      at,
      level: "debug",
      source: pick(r, HOSTS),
      message:
        r() < 0.5
          ? `cache ${r() < 0.7 ? "hit" : "miss"} session:${request}`
          : `pool: ${Math.round(4 + r() * 28)} of 32 connections in use`,
    }
  const path = pick(r, PATHS)
  const status = r() < 0.92 ? 200 : 404
  const ms = Math.round(8 + r() * r() * 600)
  return {
    id,
    at,
    level: "info",
    source: "api",
    message: `GET ${path} ${status} ${ms} ms`,
    fields: {
      method: "GET",
      path,
      status,
      duration_ms: ms,
      region: pick(r, REGIONS),
      request_id: request,
    },
  }
}

/** When the made-up service starts writing: 2026-10-12, 14:03:07 UTC. */
const START = Date.UTC(2026, 9, 12, 14, 3, 7, 112)

/** The service's first `count` lines. */
function serviceLines(count: number): LogLine[] {
  const out: LogLine[] = []
  for (let n = 0; n < count; n++)
    out.push(serviceLine(n, out.at(-1)?.at ?? START))
  return out
}

const SERVICE = serviceLines(60)
const THOUSANDS = serviceLines(5000)

const FLOOR_LABEL: Record<LogLevel, string> = {
  trace: "all",
  debug: "debug+",
  info: "info+",
  warn: "warn+",
  error: "errors",
}

/** The level kept by the page: its own choice beside the log, each with how many
 *  lines it shows, and the log's own choice turned off. */
function OwnLevel({ lines }: { lines: readonly LogLine[] }) {
  const [floor, setFloor] = React.useState<LogLevel>("warn")
  const shows = (level: LogLevel) =>
    lines.filter(
      (l) => LOG_LEVELS.indexOf(l.level) >= LOG_LEVELS.indexOf(level),
    ).length
  return (
    <div className="space-y-3">
      <ToggleGroup
        aria-label="lowest level shown"
        value={floor}
        onValueChange={(v) => setFloor(v as LogLevel)}
      >
        {LOG_LEVELS.map((level) => (
          <ToggleGroupItem key={level} value={level}>
            {FLOOR_LABEL[level]}
            <span className="font-mono text-current/50 tabular-nums">
              {shows(level)}
            </span>
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
      <Log
        lines={lines}
        minLevel={floor}
        onMinLevelChange={setFloor}
        filter={false}
        className="h-80"
      />
    </div>
  )
}

<OwnLevel lines={SERVICE} />
25:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$26"}}]