e11y 0.2.0 → 1.1.0

data/gems/e11y-devtools/frontend/src/components/RecentHistogram.svelte

@@ -0,0 +1,354 @@
+<script lang="ts">
+  import { scaleBand } from "d3-scale"
+  import { Axis, Bars, Chart, Svg } from "layerchart"
+  import { buildRecentVolumeBuckets, type HistogramTimeRange } from "../lib/recentVolume"
+
+  type HistoRow = {
+    idx: number
+    t0: number
+    t1: number
+    e0: number
+    e1: number
+    w0: number
+    w1: number
+    r0: number
+    r1: number
+    total: number
+  }
+
+  let {
+    recent = [] as Record<string, unknown>[],
+    timeRange = $bindable(null as HistogramTimeRange | null),
+  } = $props()
+
+  const COL_ERR = "var(--e11y-histo-err)"
+  const COL_WARN = "var(--e11y-histo-warn)"
+  const COL_REST = "var(--e11y-histo-ok)"
+  /** HTML shade above chart, under brush overlay (SVG rect was hidden below overlay). */
+  const COL_SEL_SHADE = "var(--e11y-sel-bg)"
+
+  const BAR_RADIUS = 3
+  const TWEEN = { duration: 420, easing: (t: number) => 1 - (1 - t) * (1 - t) }
+
+  /** Host height scales with peak bucket total (√ for large spikes). */
+  const HISTO_H_MIN = 120
+  const HISTO_H_MAX = 260
+  const HISTO_H_BASE = 96
+  const HISTO_H_PER_SQRT = 16
+
+  /** Must match Chart `padding` (Svg inner `<g>` is translated by this). */
+  const CHART_PAD = { top: 6, right: 6, bottom: 26, left: 4 } as const
+
+  let buckets = $derived(buildRecentVolumeBuckets(recent, 32))
+
+  let chartRows = $derived.by((): HistoRow[] => {
+    return buckets.map((b, idx) => {
+      const err = b.counts.err
+      const warn = b.counts.warn
+      const rest = b.counts.rest
+      const total = err + warn + rest
+      return {
+        idx,
+        t0: b.t0,
+        t1: b.t1,
+        e0: 0,
+        e1: err,
+        w0: err,
+        w1: err + warn,
+        r0: err + warn,
+        r1: total,
+        total,
+      }
+    })
+  })
+
+  let maxY = $derived(Math.max(1, ...chartRows.map((r) => r.total)))
+
+  let chartHostHeightPx = $derived(
+    Math.round(
+      Math.min(HISTO_H_MAX, Math.max(HISTO_H_MIN, HISTO_H_BASE + HISTO_H_PER_SQRT * Math.sqrt(maxY)))
+    )
+  )
+
+  let chartWidth = $state(0)
+
+  let xBand = $derived(
+    scaleBand<number>()
+      .domain(chartRows.map((r) => r.idx))
+      .range([0, Math.max(0, chartWidth - CHART_PAD.left - CHART_PAD.right)])
+      .paddingInner(0.18)
+      .paddingOuter(0.06)
+  )
+
+  let tickIdxs = $derived.by(() => {
+    const n = chartRows.length
+    if (n === 0) return []
+    const want = [0, Math.floor(n / 4), Math.floor(n / 2), Math.floor((3 * n) / 4), n - 1]
+    return [...new Set(want.filter((i) => i >= 0 && i < n))]
+  })
+
+  let chartHost: HTMLDivElement | null = $state(null)
+  let brushOverlay: HTMLDivElement | null = $state(null)
+  let dragA = $state<number | null>(null)
+  let dragB = $state<number | null>(null)
+  let dragging = $state(false)
+
+  function formatTick(ms: number): string {
+    return new Date(ms).toISOString().slice(11, 23) + "Z"
+  }
+
+  /** X in LayerChart inner `<g>` space (same as band scale output), robust to SVG/CSS transforms. */
+  function clientToInnerPlotX(clientX: number, clientY: number): number | null {
+    const root = chartHost
+    if (!root) return null
+    const svg = root.querySelector<SVGSVGElement>("svg.layercake-layout-svg")
+    const g = svg?.querySelector<SVGGElement>(".layercake-layout-svg_g")
+    if (!svg || !g) return null
+    const m = g.getScreenCTM()
+    if (!m) return null
+    return new DOMPoint(clientX, clientY).matrixTransform(m.inverse()).x
+  }
+
+  function indexFromClientX(clientX: number, clientY: number): number {
+    const n = chartRows.length
+    if (n === 0) return 0
+    const root = chartHost
+    if (!root) return 0
+    const xInner = clientToInnerPlotX(clientX, clientY)
+    const bw = xBand.bandwidth()
+    if (xInner == null || !Number.isFinite(xInner) || bw <= 0) {
+      const svg = root.querySelector<SVGSVGElement>("svg.layercake-layout-svg")
+      const rect = svg?.getBoundingClientRect() ?? root.getBoundingClientRect()
+      const fallback = clientX - rect.left - CHART_PAD.left
+      return indexFromInnerX(fallback, n)
+    }
+    return indexFromInnerX(xInner, n)
+  }
+
+  function indexFromInnerX(xInner: number, n: number): number {
+    const bw = xBand.bandwidth()
+    for (let i = 0; i < n; i++) {
+      const x0 = xBand(i)
+      if (x0 === undefined) continue
+      if (xInner >= x0 && xInner < x0 + bw) return i
+    }
+    const first = xBand(0)
+    const last = xBand(n - 1)
+    if (first !== undefined && xInner < first) return 0
+    if (last !== undefined && xInner >= last + bw) return n - 1
+    let nearest = 0
+    let best = Infinity
+    for (let i = 0; i < n; i++) {
+      const x0 = xBand(i)
+      if (x0 === undefined) continue
+      const mid = x0 + bw / 2
+      const d = Math.abs(xInner - mid)
+      if (d < best) {
+        best = d
+        nearest = i
+      }
+    }
+    return nearest
+  }
+
+  function commitRange(i0: number, i1: number): void {
+    const b = buckets
+    const lo = Math.min(i0, i1)
+    const hi = Math.max(i0, i1)
+    timeRange = { startMs: b[lo].t0, endMs: b[hi].t1, lo, hi }
+  }
+
+  function onPointerDown(e: PointerEvent): void {
+    if (e.button !== 0) return
+    if (chartRows.length === 0) return
+    const cap = brushOverlay ?? chartHost
+    if (!cap) return
+    try {
+      cap.setPointerCapture(e.pointerId)
+    } catch {
+      /* ignore */
+    }
+    dragging = true
+    const i = indexFromClientX(e.clientX, e.clientY)
+    dragA = i
+    dragB = i
+  }
+
+  function onPointerMove(e: PointerEvent): void {
+    if (!dragging || dragA === null) return
+    dragB = indexFromClientX(e.clientX, e.clientY)
+  }
+
+  function onPointerUp(e: PointerEvent): void {
+    const cap = brushOverlay ?? chartHost
+    if (!cap) return
+    try {
+      cap.releasePointerCapture(e.pointerId)
+    } catch {
+      /* ignore */
+    }
+    if (dragging && dragA !== null && dragB !== null) {
+      commitRange(dragA, dragB)
+    }
+    dragging = false
+    dragA = null
+    dragB = null
+  }
+
+  function onDoubleClick(): void {
+    timeRange = null
+  }
+
+  function clearRange(): void {
+    timeRange = null
+  }
+
+  function selIndexRange(): { lo: number; hi: number } | null {
+    if (dragging && dragA !== null && dragB !== null) {
+      return { lo: Math.min(dragA, dragB), hi: Math.max(dragA, dragB) }
+    }
+    if (!timeRange || buckets.length === 0) return null
+    const n = buckets.length
+    if (timeRange.lo == null || timeRange.hi == null) return null
+    const rawLo = Math.max(0, Math.min(timeRange.lo, n - 1))
+    const rawHi = Math.max(0, Math.min(timeRange.hi, n - 1))
+    return { lo: Math.min(rawLo, rawHi), hi: Math.max(rawLo, rawHi) }
+  }
+
+  let spanLabel = $derived.by((): string | null => {
+    if (buckets.length === 0) return null
+    const first = buckets[0]
+    const last = buckets[buckets.length - 1]
+    return `${formatTick(first.t0)} → ${formatTick(last.t1)}`
+  })
+
+  let selectionLayout = $derived.by((): { left: number; top: number; width: number; height: number } | null => {
+    const sel = selIndexRange()
+    if (!sel) return null
+    const bw = xBand.bandwidth()
+    const x0 = xBand(sel.lo)
+    const x1 = (xBand(sel.hi) ?? 0) + bw
+    if (x0 === undefined) return null
+    const plotH = chartHostHeightPx - CHART_PAD.top - CHART_PAD.bottom
+    return {
+      left: CHART_PAD.left + x0,
+      top: CHART_PAD.top,
+      width: Math.max(0, x1 - x0),
+      height: Math.max(0, plotH),
+    }
+  })
+</script>
+
+{#if chartRows.length > 0}
+  <div class="e11y-histo-wrap">
+    <div
+      bind:this={chartHost}
+      bind:clientWidth={chartWidth}
+      class="e11y-histo-chart-host"
+      style:height="{chartHostHeightPx}px"
+      style:min-height="{chartHostHeightPx}px"
+      role="application"
+      aria-label="Log volume by time (LayerChart). Drag to filter. Double-click resets."
+    >
+      <Chart
+        data={chartRows}
+        x="idx"
+        xDomain={chartRows.map((r) => r.idx)}
+        xScale={xBand}
+        y="total"
+        yDomain={[0, maxY]}
+        yNice={false}
+        padding={{ top: CHART_PAD.top, right: CHART_PAD.right, bottom: CHART_PAD.bottom, left: CHART_PAD.left }}
+        brush={{ disabled: true }}
+      >
+        <Svg class="e11y-histo-svg" label="Recent log volume">
+          <!-- LayerChart rect helper only reads range from `y` when it is [low, high]; plain y/y1 leaves y1 ignored. -->
+          <Bars
+            data={chartRows}
+            y={(d: HistoRow) => [d.e0, d.e1]}
+            fill={COL_ERR}
+            stroke="none"
+            strokeWidth={0}
+            radius={0}
+            rounded="none"
+            tweened={TWEEN}
+          />
+          <Bars
+            data={chartRows}
+            y={(d: HistoRow) => [d.w0, d.w1]}
+            fill={COL_WARN}
+            stroke="none"
+            strokeWidth={0}
+            radius={0}
+            rounded="none"
+            tweened={TWEEN}
+          />
+          <Bars
+            data={chartRows}
+            y={(d: HistoRow) => [d.r0, d.r1]}
+            fill={COL_REST}
+            stroke="none"
+            strokeWidth={0}
+            radius={BAR_RADIUS}
+            rounded="top"
+            tweened={TWEEN}
+          />
+
+          <Axis
+            placement="bottom"
+            rule={false}
+            grid={false}
+            ticks={tickIdxs.map((i) => chartRows[i]!.idx)}
+            format={(v) => {
+              const row = chartRows.find((r) => r.idx === v)
+              return row ? formatTick(row.t0) : ""
+            }}
+            tickLength={3}
+            tickLabelProps={{ class: "e11y-histo-axis-tick" }}
+          />
+        </Svg>
+      </Chart>
+      {#if selectionLayout}
+        <div
+          class="e11y-histo-sel-shade"
+          style:left="{selectionLayout.left}px"
+          style:top="{selectionLayout.top}px"
+          style:width="{selectionLayout.width}px"
+          style:height="{selectionLayout.height}px"
+          aria-hidden="true"
+        ></div>
+      {/if}
+      <div
+        bind:this={brushOverlay}
+        class="e11y-histo-brush-overlay"
+        aria-hidden="true"
+        onpointerdown={onPointerDown}
+        onpointermove={onPointerMove}
+        onpointerup={onPointerUp}
+        onpointercancel={onPointerUp}
+        ondblclick={onDoubleClick}
+      ></div>
+    </div>
+
+    <div class="e11y-histo-footer">
+      <div class="e11y-histo-legend">
+        <span><i class="e11y-histo-dot e11y-histo-dot--err"></i> error</span>
+        <span><i class="e11y-histo-dot e11y-histo-dot--warn"></i> warn</span>
+        <span><i class="e11y-histo-dot e11y-histo-dot--rest"></i> other</span>
+      </div>
+      <div class="e11y-histo-meta">
+        {#if spanLabel}
+          <span class="e11y-histo-span" title="Full sample span (UTC)">{spanLabel}</span>
+        {/if}
+        {#if timeRange}
+          <span class="e11y-histo-filter" title="Active time filter (UTC)">
+            Filter: {formatTick(timeRange.startMs)}–{formatTick(timeRange.endMs)}
+          </span>
+          <button type="button" class="e11y-histo-clear" onclick={clearRange}>Clear range</button>
+        {:else}
+          <span class="e11y-histo-hint">Drag to narrow · double-click to reset</span>
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}

data/gems/e11y-devtools/frontend/src/lib/api.ts

@@ -0,0 +1,37 @@
+import type { SourceFilter } from "./router"
+
+function useMocks(): boolean {
+  return import.meta.env.DEV
+}
+
+export async function fetchRecent(limit = 200): Promise<Record<string, unknown>[]> {
+  const url = useMocks()
+    ? "/mocks/v1/events/recent.json"
+    : `/_e11y/v1/events/recent?limit=${limit}`
+  const r = await fetch(url)
+  if (!r.ok) throw new Error(`recent: ${r.status}`)
+  return r.json() as Promise<Record<string, unknown>[]>
+}
+
+export async function fetchInteractions(source: SourceFilter): Promise<Record<string, unknown>[]> {
+  const url = useMocks()
+    ? "/mocks/v1/interactions.json"
+    : `/_e11y/v1/interactions${source === "all" ? "" : `?source=${source}`}`
+  const r = await fetch(url)
+  if (!r.ok) throw new Error(`interactions: ${r.status}`)
+  const rows = (await r.json()) as Record<string, unknown>[]
+  if (useMocks()) {
+    if (source === "all") return rows
+    return rows.filter((i) => i.source === source)
+  }
+  return rows
+}
+
+export async function fetchTraceEvents(traceId: string): Promise<Record<string, unknown>[]> {
+  const url = useMocks()
+    ? `/mocks/v1/traces/${encodeURIComponent(traceId)}/events.json`
+    : `/_e11y/v1/traces/${encodeURIComponent(traceId)}/events`
+  const r = await fetch(url)
+  if (!r.ok) throw new Error(`trace events: ${r.status}`)
+  return r.json() as Promise<Record<string, unknown>[]>
+}

data/gems/e11y-devtools/frontend/src/lib/eventIdentity.ts

@@ -0,0 +1,12 @@
+/** Stable key for deduping events across polls (pulse / badges). */
+export function eventKey(e: Record<string, unknown>, index: number): string {
+  const id = e.id
+  if (typeof id === "string" && id.length > 0) return id
+
+  return [
+    String(e.trace_id ?? ""),
+    String(e.timestamp ?? ""),
+    String(e.event_name ?? ""),
+    index,
+  ].join("|")
+}

data/gems/e11y-devtools/frontend/src/lib/format.ts

@@ -0,0 +1,37 @@
+/** Format ISO timestamp for list rows + short relative hint. */
+export function formatInteractionStarted(iso: string): { absolute: string; relative: string } {
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) {
+    return { absolute: iso || "—", relative: "" }
+  }
+  const absolute = d.toLocaleString(undefined, {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  })
+  const sec = Math.round((Date.now() - d.getTime()) / 1000)
+  let relative = ""
+  if (sec < 60) relative = `${sec}s ago`
+  else if (sec < 3600) relative = `${Math.floor(sec / 60)}m ago`
+  else if (sec < 86400) relative = `${Math.floor(sec / 3600)}h ago`
+  else relative = `${Math.floor(sec / 86400)}d ago`
+  return { absolute, relative }
+}
+
+export function summarizeTraceIds(ids: string[] | undefined): {
+  primary: string
+  extra: number
+  preview: string
+} {
+  const list = ids ?? []
+  if (list.length === 0) {
+    return { primary: "—", extra: 0, preview: "" }
+  }
+  const primary = list[0] ?? "—"
+  const extra = Math.max(0, list.length - 1)
+  const preview =
+    list.length <= 2 ? list.join(", ") : `${list[0]}, ${list[1]} +${list.length - 2}`
+  return { primary, extra, preview }
+}

data/gems/e11y-devtools/frontend/src/lib/listFilter.ts

@@ -0,0 +1,43 @@
+export type ListSeverityFilter = "all" | "error" | "warn" | "rest"
+
+/** error filter matches error + fatal */
+export function eventMatchesSeverity(ev: Record<string, unknown>, filter: ListSeverityFilter): boolean {
+  if (filter === "all") return true
+  const s = String(ev.severity ?? "")
+  if (filter === "error") return s === "error" || s === "fatal"
+  if (filter === "warn") return s === "warn"
+  /* rest: debug, info, success, … */
+  return s !== "error" && s !== "fatal" && s !== "warn"
+}
+
+export function eventMatchesSearch(ev: Record<string, unknown>, query: string): boolean {
+  const q = query.trim().toLowerCase()
+  if (!q) return true
+  if (String(ev.event_name ?? "").toLowerCase().includes(q)) return true
+  if (String(ev.trace_id ?? "").toLowerCase().includes(q)) return true
+  const meta = ev.metadata
+  if (meta && typeof meta === "object") {
+    try {
+      if (JSON.stringify(meta).toLowerCase().includes(q)) return true
+    } catch {
+      /* ignore */
+    }
+  }
+  const payload = ev.payload
+  if (payload !== undefined && payload !== null) {
+    try {
+      if (JSON.stringify(payload).toLowerCase().includes(q)) return true
+    } catch {
+      /* ignore */
+    }
+  }
+  return false
+}
+
+export function filterEventList(
+  rows: Record<string, unknown>[],
+  severity: ListSeverityFilter,
+  search: string
+): Record<string, unknown>[] {
+  return rows.filter((ev) => eventMatchesSeverity(ev, severity) && eventMatchesSearch(ev, search))
+}

data/gems/e11y-devtools/frontend/src/lib/recentVolume.ts

@@ -0,0 +1,80 @@
+/** Stacked severity counts per time slice (for recent-events volume bar). */
+
+/** Histogram brush: bucket indices + bounds (indices stay aligned with columns when `recent` changes). */
+export type HistogramTimeRange = {
+  startMs: number
+  endMs: number
+  lo: number
+  hi: number
+}
+
+export type VolumeSeverity = "err" | "warn" | "rest"
+
+export interface VolumeBucket {
+  /** Bucket start (ms since epoch). */
+  t0: number
+  t1: number
+  counts: Record<VolumeSeverity, number>
+}
+
+function severityVolumeGroup(sev: unknown): VolumeSeverity {
+  const s = String(sev ?? "")
+  if (s === "error" || s === "fatal") return "err"
+  if (s === "warn") return "warn"
+  return "rest"
+}
+
+/** Parse event `timestamp` (ISO string) to epoch ms. */
+export function eventTimestampMs(ev: Record<string, unknown>): number | null {
+  const raw = ev.timestamp
+  if (typeof raw !== "string") return null
+  const ms = Date.parse(raw)
+  return Number.isFinite(ms) ? ms : null
+}
+
+/** Newest-first input (as from API); builds ~`bucketCount` buckets from oldest→newest span. */
+export function buildRecentVolumeBuckets(
+  rows: Record<string, unknown>[],
+  bucketCount = 28
+): VolumeBucket[] {
+  if (rows.length === 0) return []
+
+  const times: number[] = []
+  for (const ev of rows) {
+    const t = eventTimestampMs(ev)
+    if (t != null) times.push(t)
+  }
+  if (times.length === 0) return []
+
+  let tMin = Math.min(...times)
+  let tMax = Math.max(...times)
+  if (tMax <= tMin) {
+    tMin -= 1
+    tMax += 1
+  }
+
+  const n = Math.max(1, Math.min(bucketCount, Math.ceil(rows.length / 2) || bucketCount))
+  const width = (tMax - tMin) / n
+  const buckets: VolumeBucket[] = []
+  for (let i = 0; i < n; i++) {
+    buckets.push({
+      t0: tMin + i * width,
+      t1: tMin + (i + 1) * width,
+      counts: { err: 0, warn: 0, rest: 0 },
+    })
+  }
+
+  for (const ev of rows) {
+    const t = eventTimestampMs(ev)
+    if (t == null) continue
+    const idx = Math.min(n - 1, Math.max(0, Math.floor((t - tMin) / width)))
+    const g = severityVolumeGroup(ev.severity)
+    buckets[idx].counts[g] += 1
+  }
+
+  return buckets
+}
+
+export function bucketTotal(b: VolumeBucket): number {
+  return b.counts.err + b.counts.warn + b.counts.rest
+}

data/gems/e11y-devtools/frontend/src/lib/router.ts

@@ -0,0 +1,12 @@
+export type SourceFilter = "web" | "job" | "all"
+
+export type OverlayRoute =
+  | { screen: "problems" }
+  | { screen: "interactions" }
+  | { screen: "events"; traceId: string }
+  | {
+      screen: "detail"
+      traceId: string
+      event: Record<string, unknown>
+      detailFrom: "problems" | "events"
+    }

data/gems/e11y-devtools/frontend/src/lib/transitions.ts

@@ -0,0 +1,34 @@
+import { cubicInOut } from "svelte/easing"
+import type { TransitionConfig } from "svelte/transition"
+
+export type CircleOrigin = { x: number; y: number; r: number }
+
+/** Circular reveal from (x,y) — same idea as Magic UI theme toggler (clip-path expand). */
+export function circleExpand(
+  _node: Element,
+  { x, y, r, duration }: CircleOrigin & { duration: number }
+): TransitionConfig {
+  return {
+    duration,
+    easing: cubicInOut,
+    css: (t) => {
+      const radius = Math.max(0, t * r)
+      return `clip-path: circle(${radius}px at ${x}px ${y}px);`
+    },
+  }
+}
+
+/** Circular collapse back toward (x,y). */
+export function circleCollapse(
+  _node: Element,
+  { x, y, r, duration }: CircleOrigin & { duration: number }
+): TransitionConfig {
+  return {
+    duration,
+    easing: cubicInOut,
+    css: (t) => {
+      const radius = Math.max(0, t * r)
+      return `clip-path: circle(${radius}px at ${x}px ${y}px);`
+    },
+  }
+}

data/gems/e11y-devtools/frontend/src/lib/viewportOrigin.ts

@@ -0,0 +1,25 @@
+import type { CircleOrigin } from "./transitions"
+
+/** Circle origin from FAB button (center + radius to farthest viewport corner). */
+export function originFromFabButton(el: HTMLButtonElement): CircleOrigin {
+  const { top, left, width, height } = el.getBoundingClientRect()
+  const x = left + width / 2
+  const y = top + height / 2
+  const vw = typeof window !== "undefined" ? (window.visualViewport?.width ?? window.innerWidth) : 800
+  const vh = typeof window !== "undefined" ? (window.visualViewport?.height ?? window.innerHeight) : 600
+  const r = Math.hypot(Math.max(x, vw - x), Math.max(y, vh - y))
+  return { x, y, r }
+}
+
+/** Fallback when opening without a click target (e.g. programmatic). ~bottom-right FAB. */
+export function originFallbackFabCorner(): CircleOrigin {
+  const vw = typeof window !== "undefined" ? (window.visualViewport?.width ?? window.innerWidth) : 800
+  const vh = typeof window !== "undefined" ? (window.visualViewport?.height ?? window.innerHeight) : 600
+  const margin = 16
+  const halfW = 70
+  const halfH = 22
+  const x = vw - margin - halfW
+  const y = vh - margin - halfH
+  const r = Math.hypot(Math.max(x, vw - x), Math.max(y, vh - y))
+  return { x, y, r }
+}

data/gems/e11y-devtools/frontend/src/main.ts

@@ -0,0 +1,8 @@
+import { mount } from "svelte"
+import "./overlay.css"
+import App from "./App.svelte"
+
+const el = document.getElementById("app")
+if (el) {
+  mount(App, { target: el })
+}

data/gems/e11y-devtools/frontend/src/overlay-entry.ts

@@ -0,0 +1,24 @@
+import { mount } from "svelte"
+import App from "./App.svelte"
+import "./overlay.css"
+
+const ROOT_ID = "e11y-devtools-root"
+
+function boot(): void {
+  if (typeof document === "undefined") return
+  if (document.getElementById(ROOT_ID)) return
+
+  const target = document.createElement("div")
+  target.id = ROOT_ID
+  document.body.appendChild(target)
+
+  mount(App, { target })
+}
+
+if (typeof document !== "undefined") {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => boot())
+  } else {
+    boot()
+  }
+}