26:Tdefd,
/** 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)

/** How many lines the stream writes before it stops, and the gap between two. */
const STREAM_LIMIT = 400
const STREAM_GAP_MS = [250, 1200] as const

/** The service writing live: a line every quarter to whole second while the log
 *  is on screen, until it has written `STREAM_LIMIT`. */
function useServiceStream(start: number) {
  const [lines, setLines] = React.useState(() => serviceLines(start))
  const [seen, setSeen] = React.useState(false)
  const box = React.useRef<HTMLDivElement>(null)
  React.useEffect(() => {
    const el = box.current
    if (!el) return
    const watch = new IntersectionObserver(([entry]) =>
      setSeen(entry?.isIntersecting ?? false),
    )
    watch.observe(el)
    return () => watch.disconnect()
  }, [])
  React.useEffect(() => {
    if (!seen || lines.length >= STREAM_LIMIT) return
    const [least, most] = STREAM_GAP_MS
    const gap = least + seeded(lines.length)() * (most - least)
    const timer = window.setTimeout(
      () =>
        setLines((ls) => [
          ...ls,
          serviceLine(ls.length, ls.at(-1)?.at ?? START),
        ]),
      gap,
    )
    return () => window.clearTimeout(timer)
  }, [seen, lines])
  return { lines, box }
}

function Live() {
  const { lines, box } = useServiceStream(40)
  return (
    <div ref={box}>
      <Log lines={lines} title="api · production" className="h-96" />
    </div>
  )
}

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