@ouo11y/kit 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog: kit
+
+npm `@ouo11y/kit`, tag `kit-v<version>`. Policy: `docs/releasing.md`. Design: `docs/adr/0025-generic-libs-clients-own-plugin-and-access.md`.
+
+## Unreleased
+
+## 0.1.0 - unreleased
+
+### Added
+
+- First release of `@ouo11y/kit`: `ReplayPlayer` (plays a Muninn manifest with chunks from a fetcher the caller supplies; stream picker, playable runs from a keyframe to a gap, NDJSON joined across chunks), `RrwebPlayer` (React wrapper over `rrweb-player`), the format seam (`formatInfo`: `rrweb/2` plays, pixel and wireframe formats are named, unknown formats are stored, not playable) and the Muninn manifest types.

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "{}"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright {yyyy} {name of copyright owner}
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -1,3 +1,27 @@
-# Temporary Holding Version
+# @ouo11y/kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Frontend building blocks for a client's own ouo11y plugin or app ([ADR-0025](../../docs/adr/0025-generic-libs-clients-own-plugin-and-access.md)): a replay player that plays a Muninn manifest, with chunks fetched by a function you supply. React and `rrweb-player` only: no Grafana dependency, and no backend of ours is assumed. Where the manifest and the chunks come from, and who may see them, is yours to decide.
+
+```tsx
+import { ReplayPlayer, type Manifest } from '@ouo11y/kit';
+
+<ReplayPlayer
+  manifest={manifest}                      // Muninn spec 7.2, e.g. from ouo-go's Muninn.Manifest
+  fetchChunk={(stream, seq) =>             // decompressed bytes of one chunk, from your backend
+    fetch(`/my-backend/replays/${manifest.replay_id}/streams/${stream}/chunks/${seq}`).then((r) => r.arrayBuffer())}
+/>
+```
+
+Your bundler must handle the CSS import of `rrweb-player/dist/style.css` (webpack with `css-loader`, Vite as is).
+
+The player picks a stream (a picker when there are several), keeps the runs that start at a keyframe and stop at a gap (Muninn spec RDR-3), concatenates each run's chunks before parsing them (a chunk may end mid-line), and chooses a renderer by `ouo.replay.format`:
+
+| Format | Here |
+|---|---|
+| `rrweb/2` | Plays (`RrwebPlayer`) |
+| `ouo-frames/3`, `ouo-video/1` | Shown as stored, not playable yet: the seam for the pixel players |
+| `ouo-wireframe/1`, anything else | Stored, not playable (RPL-24) |
+
+Key the player by replay id (`<ReplayPlayer key={replayId} …/>`) when one instance shows several replays, so its state starts fresh. The pieces are exported too: `playableRuns`, `primaryStream`, `parseNdjson`, `formatInfo`, and the manifest types.
+
+Released with release-please as component `kit` (tag `kit-v<semver>`) and published by `release-npm.yml` ([releasing](../../docs/releasing.md)). `npm run build -w libs/ouo-kit` (tsup), `npm test -w libs/ouo-kit` (Vitest), `npm run typecheck -w libs/ouo-kit`. Licence Apache-2.0.

package/dist/index.d.ts

@@ -0,0 +1,114 @@
+import React from 'react';
+
+/** One entry of a session's replay list (Muninn spec 7.1). */
+interface ReplaySummary {
+    replay_id: string;
+    /** `open`, `complete` or `partial`. */
+    state: string;
+    start_time: number;
+    end_time: number;
+    chunk_count: number;
+    byte_size: number;
+    formats: string[];
+    stream_count: number;
+}
+/** One chunk's entry in a manifest. */
+interface ChunkEntry {
+    sequence: number;
+    segment_index: number;
+    keyframe: boolean;
+    start_time: number;
+    end_time: number;
+    /** `ouo.replay.format`, e.g. `rrweb/2`. */
+    format: string;
+    encoding: string;
+    byte_size: number;
+    sha256: string;
+    received_at: number;
+    /** Every stored chunk attribute without a field of its own; may carry identity. */
+    attributes: Record<string, unknown> | null;
+}
+/** One stream (a tab, a recording) of a replay. */
+interface StreamEntry {
+    stream_id: string;
+    state: string;
+    start_time: number;
+    end_time: number;
+    /** How the stream ended (`ouo.replay.ended`), or null while open. */
+    end: unknown;
+    missing: Array<[number, number]> | null;
+    chunks: ChunkEntry[] | null;
+}
+/** One replay's manifest (Muninn spec 7.2). */
+interface Manifest {
+    session_id: string;
+    replay_id: string;
+    project: string;
+    state: string;
+    start_time: number;
+    end_time: number;
+    chunk_count: number;
+    byte_size: number;
+    streams: StreamEntry[] | null;
+}
+/**
+ * Returns one chunk's bytes, decompressed. The caller decides where they come from (its own
+ * backend, Muninn through a proxy) and how the request is authorised.
+ */
+type ChunkFetcher = (streamId: string, sequence: number) => Promise<ArrayBuffer>;
+
+interface ReplayPlayerProps {
+    manifest: Manifest;
+    /** Returns one chunk's decompressed bytes. */
+    fetchChunk: ChunkFetcher;
+    onTime?: (offsetMs: number) => void;
+    className?: string;
+}
+/**
+ * Plays one replay from its manifest: picks a stream, assembles its playable runs, fetches the
+ * chunks and hands them to the renderer chosen by the chunks' format id. Several streams (two
+ * tabs) get a stream picker. Key it by replay id when one instance shows several replays.
+ */
+declare function ReplayPlayer({ manifest, fetchChunk, onTime, className }: ReplayPlayerProps): React.JSX.Element;
+
+interface RrwebPlayerProps {
+    /** rrweb events, in order. */
+    events: unknown[];
+    /** Called with the current offset in ms from the replay start, throttled to 10 Hz. */
+    onTime?: (offsetMs: number) => void;
+    className?: string;
+}
+/**
+ * React wrapper over rrweb-player (Svelte), copied from the MVP plugin's ReplayPlayer without
+ * its Grafana styling. The replayer renders into an iframe with sandbox="allow-same-origin"
+ * (no scripts); do not change that.
+ */
+declare function RrwebPlayer({ events, onTime, className }: RrwebPlayerProps): React.JSX.Element;
+
+type Renderer = 'rrweb';
+interface FormatInfo {
+    /** Structure (DOM or wireframe) or pixel (frames or video). */
+    kind: 'structure' | 'pixel' | 'unknown';
+    /** Set when the kit can play the format. */
+    renderer?: Renderer;
+    /** Why it cannot be played here, when it cannot. */
+    reason?: string;
+}
+declare function formatInfo(format: string): FormatInfo;
+
+/**
+ * The playable runs of a stream (Muninn spec RDR-3): chunks in sequence order, each run
+ * starting at a keyframe and ending before the first missing sequence. After a gap, play
+ * resumes at the next keyframe.
+ */
+declare function playableRuns(stream: StreamEntry): ChunkEntry[][];
+/**
+ * Parses the newline-delimited JSON of a structure format. A chunk may end in the middle of a
+ * line, so the decompressed chunks of one run are concatenated before splitting. A line that is
+ * not valid JSON (a run cut short) is skipped.
+ */
+declare function parseNdjson<T = unknown>(parts: ArrayBuffer[]): T[];
+/** The stream to play first: the earliest with a playable run. */
+declare function primaryStream(streams: StreamEntry[]): StreamEntry | undefined;
+
+export { type ChunkEntry, type ChunkFetcher, type FormatInfo, type Manifest, type Renderer, ReplayPlayer, type ReplayPlayerProps, type ReplaySummary, RrwebPlayer, type RrwebPlayerProps, type StreamEntry, formatInfo, parseNdjson, playableRuns, primaryStream };

package/dist/index.js

@@ -0,0 +1,182 @@
+// src/replay/ReplayPlayer.tsx
+import React2, { useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+
+// src/replay/assemble.ts
+function playableRuns(stream) {
+  const chunks = [...stream.chunks ?? []].sort((a, b) => a.sequence - b.sequence);
+  const runs = [];
+  let run = null;
+  let prev = -2;
+  for (const c of chunks) {
+    const contiguous = c.sequence === prev + 1;
+    prev = c.sequence;
+    if (run && contiguous) {
+      run.push(c);
+      continue;
+    }
+    run = null;
+    if (c.keyframe) {
+      run = [c];
+      runs.push(run);
+    }
+  }
+  return runs;
+}
+function parseNdjson(parts) {
+  const total = parts.reduce((n, p) => n + p.byteLength, 0);
+  const all = new Uint8Array(total);
+  let off = 0;
+  for (const p of parts) {
+    all.set(new Uint8Array(p), off);
+    off += p.byteLength;
+  }
+  const out = [];
+  for (const line of new TextDecoder().decode(all).split("\n")) {
+    if (!line.trim()) {
+      continue;
+    }
+    try {
+      out.push(JSON.parse(line));
+    } catch {
+    }
+  }
+  return out;
+}
+function primaryStream(streams) {
+  return [...streams].sort((a, b) => a.start_time - b.start_time).find((s) => playableRuns(s).length > 0);
+}
+
+// src/replay/formats.ts
+var FORMATS = {
+  "rrweb/2": { kind: "structure", renderer: "rrweb" },
+  // Seam for the pixel players: the MVP plugin's frame and video players read the MVP wire;
+  // porting them to these formats is the next slice.
+  "ouo-frames/3": { kind: "pixel", reason: "the frames player is not wired to ouo-frames/3 yet" },
+  "ouo-video/1": { kind: "pixel", reason: "the video player is not wired to ouo-video/1 yet" },
+  "ouo-wireframe/1": { kind: "structure", reason: "wireframe replays are not built yet" }
+};
+function formatInfo(format) {
+  return FORMATS[format] ?? { kind: "unknown", reason: `format ${format} is stored but this player cannot decode it` };
+}
+
+// src/replay/RrwebPlayer.tsx
+import React, { useEffect, useRef, useState } from "react";
+import rrwebPlayer from "rrweb-player";
+import "rrweb-player/dist/style.css";
+function RrwebPlayer({ events, onTime, className }) {
+  const hostRef = useRef(null);
+  const onTimeRef = useRef(onTime);
+  onTimeRef.current = onTime;
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host || events.length < 2) {
+      return;
+    }
+    host.innerHTML = "";
+    const width = Math.max(320, Math.floor(host.clientWidth));
+    let player;
+    try {
+      player = new rrwebPlayer({
+        target: host,
+        props: {
+          events,
+          width,
+          height: Math.round(width * 9 / 16),
+          autoPlay: false,
+          showController: true,
+          skipInactive: true,
+          speedOption: [1, 2, 4, 8],
+          mouseTail: false
+        }
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      return;
+    }
+    setError(null);
+    let last = 0;
+    player.addEventListener("ui-update-current-time", (payload) => {
+      const now = performance.now();
+      if (now - last < 100) {
+        return;
+      }
+      last = now;
+      const p = payload;
+      onTimeRef.current?.(typeof p === "number" ? p : p?.payload ?? 0);
+    });
+    const ro = new ResizeObserver(() => {
+      const w = Math.max(320, Math.floor(host.clientWidth));
+      if (Math.abs(w - width) < 8) {
+        return;
+      }
+      player.$set({ width: w, height: Math.round(w * 9 / 16) });
+      player.triggerResize();
+    });
+    ro.observe(host);
+    return () => {
+      ro.disconnect();
+      try {
+        player.pause();
+        player.$destroy();
+      } catch {
+      }
+    };
+  }, [events]);
+  if (events.length < 2) {
+    return /* @__PURE__ */ React.createElement("div", { className }, "The recording has no renderable events yet.");
+  }
+  return /* @__PURE__ */ React.createElement("div", { className }, error && /* @__PURE__ */ React.createElement("div", { role: "alert" }, "Replay failed to start: ", error), /* @__PURE__ */ React.createElement("div", { ref: hostRef, "data-testid": "ouo-replay-rrweb", style: { width: "100%", display: "flow-root" } }));
+}
+
+// src/replay/ReplayPlayer.tsx
+function ReplayPlayer({ manifest, fetchChunk, onTime, className }) {
+  const streams = useMemo(() => manifest.streams ?? [], [manifest]);
+  const [streamId, setStreamId] = useState2();
+  const stream = streams.find((s) => s.stream_id === streamId) ?? primaryStream(streams);
+  const [loaded, setLoaded] = useState2({ state: "loading" });
+  const fetchRef = useRef2(fetchChunk);
+  fetchRef.current = fetchChunk;
+  useEffect2(() => {
+    let cancelled = false;
+    const set = (l) => !cancelled && setLoaded(l);
+    if (!stream) {
+      set({ state: "unplayable", message: "This replay has no chunk to start from (no keyframe held)." });
+      return;
+    }
+    const runs = playableRuns(stream);
+    const format = runs[0]?.[0]?.format ?? stream.chunks?.[0]?.format ?? "";
+    const streamId2 = stream.stream_id;
+    const info = formatInfo(format);
+    if (!info.renderer) {
+      set({ state: "unplayable", message: `Stored, not playable here: ${info.reason}.` });
+      return;
+    }
+    set({ state: "loading" });
+    loadStructure(runs, (seq) => fetchRef.current(streamId2, seq)).then((events) => set({ state: "ready", events })).catch((err) => set({ state: "error", message: err instanceof Error ? err.message : String(err) }));
+    return () => {
+      cancelled = true;
+    };
+  }, [stream]);
+  return /* @__PURE__ */ React2.createElement("div", { className, "data-testid": "ouo-replay" }, streams.length > 1 && /* @__PURE__ */ React2.createElement("label", null, "Stream", " ", /* @__PURE__ */ React2.createElement("select", { value: stream?.stream_id, onChange: (e) => setStreamId(e.target.value) }, streams.map((s, i) => /* @__PURE__ */ React2.createElement("option", { key: s.stream_id, value: s.stream_id }, i + 1, ": ", new Date(s.start_time).toLocaleTimeString(), " (", s.state, ", ", s.chunks?.length ?? 0, " chunks)")))), loaded.state === "loading" && /* @__PURE__ */ React2.createElement("div", null, "Loading replay\u2026"), loaded.state === "error" && /* @__PURE__ */ React2.createElement("div", { role: "alert" }, "Replay failed to load: ", loaded.message), loaded.state === "unplayable" && /* @__PURE__ */ React2.createElement("div", null, loaded.message), loaded.state === "ready" && /* @__PURE__ */ React2.createElement(RrwebPlayer, { events: loaded.events, onTime }));
+}
+async function loadStructure(runs, fetch) {
+  const bodies = /* @__PURE__ */ new Map();
+  const queue = runs.flat().map((c) => c.sequence);
+  const worker = async () => {
+    for (let seq = queue.shift(); seq !== void 0; seq = queue.shift()) {
+      bodies.set(seq, await fetch(seq));
+    }
+  };
+  await Promise.all(Array.from({ length: Math.min(4, queue.length) }, worker));
+  return runs.flatMap((run) => parseNdjson(run.map((c) => bodies.get(c.sequence))));
+}
+export {
+  ReplayPlayer,
+  RrwebPlayer,
+  formatInfo,
+  parseNdjson,
+  playableRuns,
+  primaryStream
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/replay/ReplayPlayer.tsx","../src/replay/assemble.ts","../src/replay/formats.ts","../src/replay/RrwebPlayer.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport type { ChunkEntry, ChunkFetcher, Manifest } from '../manifest';\nimport { parseNdjson, playableRuns, primaryStream } from './assemble';\nimport { formatInfo } from './formats';\nimport { RrwebPlayer } from './RrwebPlayer';\n\nexport interface ReplayPlayerProps {\n  manifest: Manifest;\n  /** Returns one chunk's decompressed bytes. */\n  fetchChunk: ChunkFetcher;\n  onTime?: (offsetMs: number) => void;\n  className?: string;\n}\n\ntype Loaded =\n  | { state: 'loading' }\n  | { state: 'error'; message: string }\n  | { state: 'unplayable'; message: string }\n  | { state: 'ready'; events: unknown[] };\n\n/**\n * Plays one replay from its manifest: picks a stream, assembles its playable runs, fetches the\n * chunks and hands them to the renderer chosen by the chunks' format id. Several streams (two\n * tabs) get a stream picker. Key it by replay id when one instance shows several replays.\n */\nexport function ReplayPlayer({ manifest, fetchChunk, onTime, className }: ReplayPlayerProps) {\n  const streams = useMemo(() => manifest.streams ?? [], [manifest]);\n  // The picked stream, or the primary one: a new manifest without the picked stream falls back.\n  const [streamId, setStreamId] = useState<string>();\n  const stream = streams.find((s) => s.stream_id === streamId) ?? primaryStream(streams);\n  const [loaded, setLoaded] = useState<Loaded>({ state: 'loading' });\n  // A ref, so a new fetcher identity (an inline arrow in a parent that re-renders, e.g. on\n  // onTime) does not reload the replay; the stream alone decides what is loaded.\n  const fetchRef = useRef(fetchChunk);\n  fetchRef.current = fetchChunk;\n\n  useEffect(() => {\n    let cancelled = false;\n    const set = (l: Loaded) => !cancelled && setLoaded(l);\n    if (!stream) {\n      set({ state: 'unplayable', message: 'This replay has no chunk to start from (no keyframe held).' });\n      return;\n    }\n    const runs = playableRuns(stream);\n    const format = runs[0]?.[0]?.format ?? stream.chunks?.[0]?.format ?? '';\n    const streamId = stream.stream_id;\n    const info = formatInfo(format);\n    if (!info.renderer) {\n      set({ state: 'unplayable', message: `Stored, not playable here: ${info.reason}.` });\n      return;\n    }\n    set({ state: 'loading' });\n    loadStructure(runs, (seq) => fetchRef.current(streamId, seq))\n      .then((events) => set({ state: 'ready', events }))\n      .catch((err: unknown) => set({ state: 'error', message: err instanceof Error ? err.message : String(err) }));\n    return () => {\n      cancelled = true;\n    };\n  }, [stream]);\n\n  return (\n    <div className={className} data-testid=\"ouo-replay\">\n      {streams.length > 1 && (\n        <label>\n          Stream{' '}\n          <select value={stream?.stream_id} onChange={(e) => setStreamId(e.target.value)}>\n            {streams.map((s, i) => (\n              <option key={s.stream_id} value={s.stream_id}>\n                {i + 1}: {new Date(s.start_time).toLocaleTimeString()} ({s.state}, {s.chunks?.length ?? 0} chunks)\n              </option>\n            ))}\n          </select>\n        </label>\n      )}\n      {loaded.state === 'loading' && <div>Loading replay…</div>}\n      {loaded.state === 'error' && <div role=\"alert\">Replay failed to load: {loaded.message}</div>}\n      {loaded.state === 'unplayable' && <div>{loaded.message}</div>}\n      {loaded.state === 'ready' && <RrwebPlayer events={loaded.events} onTime={onTime} />}\n    </div>\n  );\n}\n\n/** Fetches the chunks of the runs, a few at a time, and parses them run by run. */\nasync function loadStructure(runs: ChunkEntry[][], fetch: (seq: number) => Promise<ArrayBuffer>): Promise<unknown[]> {\n  const bodies = new Map<number, ArrayBuffer>();\n  const queue = runs.flat().map((c) => c.sequence);\n  const worker = async () => {\n    for (let seq = queue.shift(); seq !== undefined; seq = queue.shift()) {\n      bodies.set(seq, await fetch(seq));\n    }\n  };\n  await Promise.all(Array.from({ length: Math.min(4, queue.length) }, worker));\n  return runs.flatMap((run) => parseNdjson(run.map((c) => bodies.get(c.sequence)!)));\n}\n","import type { ChunkEntry, StreamEntry } from '../manifest';\n\n/**\n * The playable runs of a stream (Muninn spec RDR-3): chunks in sequence order, each run\n * starting at a keyframe and ending before the first missing sequence. After a gap, play\n * resumes at the next keyframe.\n */\nexport function playableRuns(stream: StreamEntry): ChunkEntry[][] {\n  const chunks = [...(stream.chunks ?? [])].sort((a, b) => a.sequence - b.sequence);\n  const runs: ChunkEntry[][] = [];\n  let run: ChunkEntry[] | null = null;\n  let prev = -2;\n  for (const c of chunks) {\n    const contiguous = c.sequence === prev + 1;\n    prev = c.sequence;\n    if (run && contiguous) {\n      run.push(c);\n      continue;\n    }\n    run = null;\n    if (c.keyframe) {\n      run = [c];\n      runs.push(run);\n    }\n  }\n  return runs;\n}\n\n/**\n * Parses the newline-delimited JSON of a structure format. A chunk may end in the middle of a\n * line, so the decompressed chunks of one run are concatenated before splitting. A line that is\n * not valid JSON (a run cut short) is skipped.\n */\nexport function parseNdjson<T = unknown>(parts: ArrayBuffer[]): T[] {\n  const total = parts.reduce((n, p) => n + p.byteLength, 0);\n  const all = new Uint8Array(total);\n  let off = 0;\n  for (const p of parts) {\n    all.set(new Uint8Array(p), off);\n    off += p.byteLength;\n  }\n  const out: T[] = [];\n  for (const line of new TextDecoder().decode(all).split('\\n')) {\n    if (!line.trim()) {\n      continue;\n    }\n    try {\n      out.push(JSON.parse(line) as T);\n    } catch {\n      // the tail of a run that ends mid-line\n    }\n  }\n  return out;\n}\n\n/** The stream to play first: the earliest with a playable run. */\nexport function primaryStream(streams: StreamEntry[]): StreamEntry | undefined {\n  return [...streams].sort((a, b) => a.start_time - b.start_time).find((s) => playableRuns(s).length > 0);\n}\n","// Renderer choice by `ouo.replay.format` (SDK spec RPL-24, Muninn spec RDR-2). A format this\n// table does not know is stored but not playable, never an error.\n\nexport type Renderer = 'rrweb';\n\nexport interface FormatInfo {\n  /** Structure (DOM or wireframe) or pixel (frames or video). */\n  kind: 'structure' | 'pixel' | 'unknown';\n  /** Set when the kit can play the format. */\n  renderer?: Renderer;\n  /** Why it cannot be played here, when it cannot. */\n  reason?: string;\n}\n\nconst FORMATS: Record<string, FormatInfo> = {\n  'rrweb/2': { kind: 'structure', renderer: 'rrweb' },\n  // Seam for the pixel players: the MVP plugin's frame and video players read the MVP wire;\n  // porting them to these formats is the next slice.\n  'ouo-frames/3': { kind: 'pixel', reason: 'the frames player is not wired to ouo-frames/3 yet' },\n  'ouo-video/1': { kind: 'pixel', reason: 'the video player is not wired to ouo-video/1 yet' },\n  'ouo-wireframe/1': { kind: 'structure', reason: 'wireframe replays are not built yet' },\n};\n\nexport function formatInfo(format: string): FormatInfo {\n  return FORMATS[format] ?? { kind: 'unknown', reason: `format ${format} is stored but this player cannot decode it` };\n}\n","import React, { useEffect, useRef, useState } from 'react';\nimport rrwebPlayer from 'rrweb-player';\nimport 'rrweb-player/dist/style.css';\n\n/** Svelte component methods rrweb-player inherits; `svelte` types are not installed. */\ninterface SvelteHandle {\n  $set: (props: Record<string, unknown>) => void;\n  $destroy: () => void;\n}\n\nexport interface RrwebPlayerProps {\n  /** rrweb events, in order. */\n  events: unknown[];\n  /** Called with the current offset in ms from the replay start, throttled to 10 Hz. */\n  onTime?: (offsetMs: number) => void;\n  className?: string;\n}\n\n/**\n * React wrapper over rrweb-player (Svelte), copied from the MVP plugin's ReplayPlayer without\n * its Grafana styling. The replayer renders into an iframe with sandbox=\"allow-same-origin\"\n * (no scripts); do not change that.\n */\nexport function RrwebPlayer({ events, onTime, className }: RrwebPlayerProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const onTimeRef = useRef(onTime);\n  onTimeRef.current = onTime;\n  const [error, setError] = useState<string | null>(null);\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host || events.length < 2) {\n      return;\n    }\n    host.innerHTML = '';\n    const width = Math.max(320, Math.floor(host.clientWidth));\n    let player: rrwebPlayer;\n    try {\n      player = new rrwebPlayer({\n        target: host,\n        props: {\n          events: events as ConstructorParameters<typeof rrwebPlayer>[0]['props']['events'],\n          width,\n          height: Math.round((width * 9) / 16),\n          autoPlay: false,\n          showController: true,\n          skipInactive: true,\n          speedOption: [1, 2, 4, 8],\n          mouseTail: false,\n        },\n      });\n    } catch (err) {\n      setError(err instanceof Error ? err.message : String(err));\n      return;\n    }\n    setError(null);\n    let last = 0;\n    player.addEventListener('ui-update-current-time', (payload) => {\n      const now = performance.now();\n      if (now - last < 100) {\n        return;\n      }\n      last = now;\n      const p = payload as { payload?: number } | number;\n      onTimeRef.current?.(typeof p === 'number' ? p : (p?.payload ?? 0));\n    });\n    const ro = new ResizeObserver(() => {\n      const w = Math.max(320, Math.floor(host.clientWidth));\n      if (Math.abs(w - width) < 8) {\n        return;\n      }\n      (player as unknown as SvelteHandle).$set({ width: w, height: Math.round((w * 9) / 16) });\n      player.triggerResize();\n    });\n    ro.observe(host);\n    return () => {\n      ro.disconnect();\n      try {\n        player.pause();\n        (player as unknown as SvelteHandle).$destroy();\n      } catch {\n        // teardown errors from the Svelte component are not ours to report\n      }\n    };\n  }, [events]);\n\n  if (events.length < 2) {\n    return <div className={className}>The recording has no renderable events yet.</div>;\n  }\n  return (\n    <div className={className}>\n      {error && <div role=\"alert\">Replay failed to start: {error}</div>}\n      {/* rrweb-player floats .rr-player left, which collapses the host; flow-root contains it. */}\n      <div ref={hostRef} data-testid=\"ouo-replay-rrweb\" style={{ width: '100%', display: 'flow-root' }} />\n    </div>\n  );\n}\n"],"mappings":"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","names":["React","useEffect","useRef","useState","useState","useRef","useEffect","streamId","React"]}

package/package.json

@@ -1,6 +1,67 @@
 {
   "name": "@ouo11y/kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Frontend building blocks for ouo11y client plugins: a replay player that plays a Muninn manifest with chunks the caller fetches, and the replay format seam. React only; no Grafana and no backend of ours required.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ouo11y/ouo11y.git",
+    "directory": "libs/ouo-kit"
+  },
+  "homepage": "https://github.com/ouo11y/ouo11y/tree/main/libs/ouo-kit#readme",
+  "bugs": {
+    "url": "https://github.com/ouo11y/ouo11y/issues"
+  },
+  "keywords": [
+    "opentelemetry",
+    "rum",
+    "session-replay",
+    "rrweb",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "rrweb-player": "2.1.7"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.0.0",
+    "jsdom": "^30.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.5.1",
+    "typescript": "~5.9.3",
+    "vitest": "^5.0.3"
+  }
+}