PerfMonitor

import { cn } from "cn"
import { useEffect, useState, useSyncExternalStore } from "react"
import { createFrameSampler, formatMs, type FrameReport, type FrameSampler } from "@/lib/frame-stats"

// The frame rate, on the screen it measures. A strip of numbers a per-frame core is judged by (frames
// in the window, p50, p99, max, dropped, long tasks), a histogram of frame gaps against the budget,
// and one line per lane from its store's meta: rows, batches a second, drops, sequence, gap, age.
//
// It costs almost nothing to watch. The sampler pushes one number into a ring per animation frame
// and reports on a timer, so this component re-renders four times a second and never per frame, and
// the lanes read their store's meta on the same beat. It decides nothing: the numbers are the numbers,
// read on the machine that matters, and pass or fail is written down somewhere else, beforehand.

/** What a lane shows, the shape a row store's meta already has. */
export interface LaneMeta {
  lane: "coalesced" | "ordered"
  size: number
  /** Counts batches applied. */
  version: number
  dropped: number
  seq: number | null
  gap: boolean
  /** Wall clock of the last batch, ms since the epoch. */
  lastBatchAt: number | null
}

/** What a lane reads: a row store, or anything with a meta subscription shaped like one. */
export interface MetaSource {
  getMeta(): LaneMeta
  subscribeMeta(cb: () => void): () => void
}

export interface PerfMonitorLane {
  label: string
  store: MetaSource
}

export interface PerfReadout {
  label: string
  /** Printed as given: an IPC batch size, a queue depth, a socket's state. */
  value: string
}

export interface PerfMonitorProps {
  /** Stores whose lanes to show. */
  lanes?: readonly PerfMonitorLane[]
  /** The frame budget the histogram marks. Default 1000/60. */
  budgetMs?: number
  /** Frames kept. Default 600, ten seconds at 60 Hz. */
  window?: number
  /** How often the strip redraws. Default 250. */
  refreshMs?: number
  /** Your own sampler, for a report you read elsewhere or write to a log. Made here otherwise. Started while mounted, stopped after. */
  sampler?: FrameSampler
  /** Numbers of your own beside the frame numbers. */
  readouts?: readonly PerfReadout[]
  /** Each report as it lands, for a log. */
  onReport?: (report: FrameReport) => void
  /** The numbers alone, no histogram. */
  compact?: boolean
  label?: string
  className?: string
}

const noop = () => () => {}

function useMeta(source: MetaSource): LaneMeta {
  return useSyncExternalStore(source.subscribeMeta, source.getMeta, source.getMeta)
}

interface LaneProps {
  lane: PerfMonitorLane
  /** The report's clock: when the strip last redrew. */
  at: number
}

function Lane({ lane, at }: LaneProps) {
  const meta = useMeta(lane.store)
  // Batches a second between two redraws: derived state, settled during render.
  const [seen, setSeen] = useState({ at, version: meta.version, rate: 0 })
  if (seen.at !== at) {
    const seconds = (at - seen.at) / 1000
    setSeen({ at, version: meta.version, rate: seconds > 0 ? Math.max(0, meta.version - seen.version) / seconds : 0 })
  }
  const age = meta.lastBatchAt === null ? null : Math.max(0, at - meta.lastBatchAt)
  return (
    <div className="flex flex-wrap items-baseline gap-x-2 lining-nums tabular-nums" data-perf-lane={lane.label} data-lane={meta.lane} data-numeric="">
      <span className="font-medium">{lane.label}</span>
      <span className="text-muted-foreground">{meta.lane}</span>
      <span>
        <span className="text-muted-foreground">rows </span>
        {meta.size.toLocaleString()}
      </span>
      <span>
        <span className="text-muted-foreground">batches/s </span>
        {seen.rate.toFixed(0)}
      </span>
      {meta.lane === "coalesced" && (
        <span data-perf-dropped>
          <span className="text-muted-foreground">drop </span>
          {meta.dropped.toLocaleString()}
        </span>
      )}
      {meta.lane === "ordered" && (
        <span data-perf-seq>
          <span className="text-muted-foreground">seq </span>
          {meta.seq === null ? "–" : meta.seq.toLocaleString()}
          {meta.gap && <span className="text-stale"> gap</span>}
        </span>
      )}
      <span>
        <span className="text-muted-foreground">age </span>
        {age === null ? "–" : formatMs(age)}
      </span>
    </div>
  )
}

interface HistogramProps {
  report: FrameReport
  budgetMs: number
}

// One series, one hue: how the frame gaps fell against the budget. The budget is a labeled line, the
// numbers beside the chart are its table.
function Histogram({ report, budgetMs }: HistogramProps) {
  const bins = report.histogram
  const width = 160
  const height = 28
  const gap = 1
  const barWidth = width / bins.length
  const peak = Math.max(1, ...bins)
  const budgetX = Math.min(width, (budgetMs / report.binMs) * barWidth)
  const end = report.binMs * (bins.length - 1)
  return (
    <svg role="img" aria-label={`Frame time histogram, ${report.binMs} ms bins to ${end} ms and over: p50 ${formatMs(report.p50)}, p99 ${formatMs(report.p99)}, ${report.dropped} dropped`} viewBox={`0 0 ${width} ${height + 10}`} width={width} height={height + 10} className="shrink-0 overflow-visible" data-perf-histogram>
      {bins.map((count, i) => {
        const h = count === 0 ? 0 : Math.max(1, Math.round((count / peak) * height))
        const from = i * report.binMs
        const label = i === bins.length - 1 ? `${from} ms and over: ${count} frames` : `${from} to ${from + report.binMs} ms: ${count} frames`
        return (
          <rect key={i} x={i * barWidth + gap / 2} y={height - h} width={Math.max(0.5, barWidth - gap)} height={h} rx={1} className="fill-primary" data-bin={i} data-count={count}>
            <title>{label}</title>
          </rect>
        )
      })}
      <line x1={budgetX} x2={budgetX} y1={0} y2={height} strokeDasharray="2 2" className="stroke-muted-foreground" strokeWidth={1} />
      <text x={Math.min(budgetX + 2, width - 34)} y={height + 9} className="fill-muted-foreground" fontSize={7} data-perf-budget>
        {formatMs(budgetMs)}
      </text>
    </svg>
  )
}

export function PerfMonitor({ lanes, budgetMs = 1000 / 60, window: frames = 600, refreshMs = 250, sampler: given, readouts, onReport, compact = false, label = "Frame health", className }: PerfMonitorProps) {
  const [own] = useState(() => given ?? createFrameSampler({ budgetMs, window: frames, refreshMs }))
  const sampler = given ?? own
  useEffect(() => {
    sampler.start()
    return () => sampler.stop()
  }, [sampler])
  const report = useSyncExternalStore(sampler.subscribe ?? noop, sampler.report, sampler.report)
  useEffect(() => {
    onReport?.(report)
    // The report is what changed; the callback is read as it is then.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [report])

  const readout = (key: string, name: string, value: string) => (
    <span data-perf={key}>
      <span className="text-muted-foreground">{name} </span>
      {value}
    </span>
  )

  return (
    <div role="group" aria-label={label} data-slot="tradecn-perf-monitor" data-dropped={report.dropped} data-frames={report.frames} className={cn("flex flex-col gap-1 font-(family-name:--tradecn-font-mono) text-xs lining-nums tabular-nums", className)}>
      <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
        {!compact && <Histogram report={report} budgetMs={budgetMs} />}
        <div className="flex flex-wrap items-baseline gap-x-2 lining-nums tabular-nums" data-numeric="">
          {readout("frames", "frames", report.frames.toLocaleString())}
          {readout("p50", "p50", formatMs(report.p50))}
          {readout("p99", "p99", formatMs(report.p99))}
          {readout("max", "max", formatMs(report.max))}
          {readout("dropped", "dropped", String(report.dropped))}
          {readout("long", "long", report.longTasksObserved ? String(report.longTasks) : "n/a")}
          {readouts?.map((r) => (
            <span key={r.label} data-perf-readout={r.label}>
              <span className="text-muted-foreground">{r.label} </span>
              {r.value}
            </span>
          ))}
        </div>
      </div>
      {lanes?.map((lane) => <Lane key={lane.label} lane={lane} at={report.until} />)}
    </div>
  )
}

// Frame timing, measured the way a per-frame core is judged: the gap between one animation frame and
// the next, how many frames missed their slot, how long the longest tasks ran. Pure functions over
// the numbers, and a sampler that collects them from requestAnimationFrame and a PerformanceObserver
// into a bounded ring, reporting on a timer rather than on every frame, so watching the frame rate
// costs almost none of it.

export interface FrameReport {
  /** Frames in the window. */
  frames: number
  p50: number
  p99: number
  max: number
  mean: number
  /** Frames longer than `droppedAboveMs`. */
  dropped: number
  droppedAboveMs: number
  /** Long tasks (over 50 ms) seen while sampling, where the browser reports them. */
  longTasks: number
  /** Whether long tasks could be observed at all. */
  longTasksObserved: boolean
  /** Counts per bin, `binMs` wide from zero; the last bin holds everything past the end. */
  histogram: number[]
  binMs: number
  /** When the window started and ended, ms since the epoch. */
  since: number
  until: number
}

export interface FrameSamplerOptions {
  /** Frames kept. Default 600, ten seconds at 60 Hz. */
  window?: number
  /** The frame budget. Default 1000/60. A frame past 1.5 times it counts as dropped. */
  budgetMs?: number
  /** Histogram bin width. Default 2. */
  binMs?: number
  /** Histogram end; the last bin takes everything past it. Default 40. */
  maxMs?: number
  /** How often subscribers hear a new report. Default 250. */
  refreshMs?: number
  /** Injectable for tests. */
  raf?: (cb: (t: number) => void) => number
  caf?: (id: number) => void
  now?: () => number
  setTimer?: (cb: () => void, ms: number) => unknown
  clearTimer?: (id: unknown) => void
  observe?: boolean
}

export interface FrameSampler {
  start(): void
  stop(): void
  /** Forget every frame so far. */
  reset(): void
  /** The latest report; the same object until the next refresh. */
  report(): FrameReport
  /** Wakes on each refresh while running. */
  subscribe(cb: () => void): () => void
  readonly running: boolean
}

export function percentile(sorted: readonly number[], p: number): number {
  if (!sorted.length) return 0
  const i = Math.min(sorted.length - 1, Math.max(0, Math.ceil((p / 100) * sorted.length) - 1))
  return sorted[i]!
}

/** Counts per `binMs`-wide bin from zero to `maxMs`, the last bin taking everything past the end. */
export function histogram(values: readonly number[], binMs: number, maxMs: number): number[] {
  const bins = Math.max(1, Math.ceil(maxMs / binMs))
  const counts = new Array<number>(bins).fill(0)
  for (const v of values) {
    if (!Number.isFinite(v) || v < 0) continue
    counts[Math.min(bins - 1, Math.floor(v / binMs))]!++
  }
  return counts
}

export interface SummarizeOptions {
  budgetMs: number
  binMs: number
  maxMs: number
  longTasks: number
  longTasksObserved: boolean
  since: number
  until: number
}

/** A report from frame gaps. Dropped is a gap past 1.5 times the budget: the frame missed its slot. */
export function summarize(gaps: readonly number[], o: SummarizeOptions): FrameReport {
  const sorted = [...gaps].sort((a, b) => a - b)
  const droppedAboveMs = o.budgetMs * 1.5
  return {
    frames: sorted.length,
    p50: percentile(sorted, 50),
    p99: percentile(sorted, 99),
    max: sorted[sorted.length - 1] ?? 0,
    mean: sorted.length ? sorted.reduce((a, b) => a + b, 0) / sorted.length : 0,
    dropped: sorted.filter((d) => d > droppedAboveMs).length,
    droppedAboveMs,
    longTasks: o.longTasks,
    longTasksObserved: o.longTasksObserved,
    histogram: histogram(sorted, o.binMs, o.maxMs),
    binMs: o.binMs,
    since: o.since,
    until: o.until,
  }
}

/** "16.7 ms", "3.2 ms". */
export function formatMs(ms: number): string {
  return `${ms.toFixed(1)} ms`
}

export function createFrameSampler(options: FrameSamplerOptions = {}): FrameSampler {
  const size = options.window ?? 600
  const budgetMs = options.budgetMs ?? 1000 / 60
  const binMs = options.binMs ?? 2
  const maxMs = options.maxMs ?? 40
  const refreshMs = options.refreshMs ?? 250
  const raf = options.raf ?? ((cb) => requestAnimationFrame(cb))
  const caf = options.caf ?? ((id) => cancelAnimationFrame(id))
  const now = options.now ?? (() => Date.now())
  const setTimer = options.setTimer ?? ((cb, ms) => setInterval(cb, ms))
  const clearTimer = options.clearTimer ?? ((id) => clearInterval(id as ReturnType<typeof setInterval>))
  const observe = options.observe ?? true

  // A ring of the last `size` gaps; `head` is the next slot, `count` how many are filled.
  const ring = new Float64Array(size)
  let head = 0
  let count = 0
  let last = -1
  let frame = 0
  let timer: unknown = null
  let observer: PerformanceObserver | null = null
  let longTasks = 0
  let observed = false
  let since = now()
  let running = false
  const listeners = new Set<() => void>()
  let current: FrameReport = summarize([], { budgetMs, binMs, maxMs, longTasks: 0, longTasksObserved: false, since, until: since })

  function gaps(): number[] {
    const out: number[] = new Array(count)
    const start = (head - count + size) % size
    for (let i = 0; i < count; i++) out[i] = ring[(start + i) % size]!
    return out
  }

  function refresh() {
    current = summarize(gaps(), { budgetMs, binMs, maxMs, longTasks, longTasksObserved: observed, since, until: now() })
    for (const cb of listeners) cb()
  }

  const tick = (t: number) => {
    if (last >= 0) {
      ring[head] = t - last
      head = (head + 1) % size
      if (count < size) count++
    }
    last = t
    frame = raf(tick)
  }

  return {
    get running() {
      return running
    },
    start() {
      if (running) return
      running = true
      last = -1
      since = now()
      frame = raf(tick)
      timer = setTimer(refresh, refreshMs)
      if (observe && typeof PerformanceObserver !== "undefined") {
        try {
          observer = new PerformanceObserver((list) => {
            longTasks += list.getEntries().length
          })
          observer.observe({ type: "longtask", buffered: false })
          observed = true
        } catch {
          observer = null
          observed = false
        }
      }
    },
    stop() {
      if (!running) return
      running = false
      caf(frame)
      if (timer !== null) clearTimer(timer)
      timer = null
      observer?.disconnect()
      observer = null
      refresh()
    },
    reset() {
      head = 0
      count = 0
      last = -1
      longTasks = 0
      since = now()
      refresh()
    },
    report: () => current,
    subscribe(cb) {
      listeners.add(cb)
      return () => listeners.delete(cb)
    },
  }
}

:root {
  --stale: oklch(0.52 0.13 75);
  --tradecn-font-accessible: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --tradecn-font-accessible-mono: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tradecn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dark {
  --stale: oklch(0.8 0.15 80);
  --tradecn-font-accessible: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', ui-sans-serif, system-ui, sans-serif;
  --tradecn-font-accessible-mono: 'Atkinson Hyperlegible Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tradecn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-accessibility="hyperlegible"], [data-accessibility="hyperlegible"] {
  --tradecn-font-sans: var(--tradecn-font-accessible);
  --tradecn-font-mono: var(--tradecn-font-accessible-mono);
}