@vitrinka/web 0.1.0

package/build/recorder/api.js

@@ -0,0 +1,84 @@
+import { VitrinkaApiError } from './api-status';
+import { isUnauthorized } from '@vitrinka/link';
+import { bearerToken, recorderConfig } from './config';
+export { permanentStatus, VitrinkaApiError } from './api-status';
+/**
+ * A 401 from any session door means the token is dead (link revoked, key
+ * rotated). The session module registers the handler that forgets the link
+ * and ends the recording locally; api.ts only reports.
+ */
+let unauthorizedHandler = null;
+export function onUnauthorized(fn) {
+    unauthorizedHandler = fn;
+    return () => {
+        if (unauthorizedHandler === fn)
+            unauthorizedHandler = null;
+    };
+}
+function reportStatus(status) {
+    if (isUnauthorized(status))
+        unauthorizedHandler?.();
+}
+/**
+ * Fetch the workspace redaction policy at session start. NEVER rejects: null
+ * (server too old, network down, 4xx) means the engine's safe defaults — fail
+ * closed, never capture-everything.
+ */
+export async function fetchPolicy() {
+    try {
+        const res = await api('GET', '/api/v1/recorder/policy');
+        return res.policy ?? null;
+    }
+    catch (e) {
+        console.warn('vitrinka: redaction policy fetch failed — using safe defaults', e);
+        return null;
+    }
+}
+export async function api(method, path, body, opts = {}) {
+    const { url } = recorderConfig();
+    const key = bearerToken();
+    const res = await fetch(url + path, {
+        method,
+        mode: 'cors',
+        credentials: 'omit',
+        keepalive: opts.keepalive ?? false,
+        headers: {
+            authorization: `Bearer ${key}`,
+            ...(body !== undefined ? { 'content-type': 'application/json' } : {}),
+        },
+        body: body === undefined ? undefined : JSON.stringify(body),
+    });
+    const text = await res.text();
+    if (!res.ok) {
+        reportStatus(res.status);
+        throw new VitrinkaApiError(`${method} ${path} → ${res.status}: ${text}`, res.status);
+    }
+    return (text ? JSON.parse(text) : {});
+}
+/**
+ * Upload one rrweb chunk (an already-serialized JSON array of rrweb events)
+ * under a pre-allocated seq. Returns the server's blobKey — the matching
+ * `rrweb` event row carries it.
+ */
+export async function uploadChunk(sessionId, seq, body) {
+    const { url } = recorderConfig();
+    const key = bearerToken();
+    const res = await fetch(`${url}/api/v1/sessions/${sessionId}/chunk?seq=${seq}`, {
+        method: 'POST',
+        mode: 'cors',
+        credentials: 'omit',
+        headers: { authorization: `Bearer ${key}`, 'content-type': 'application/json' },
+        body,
+    });
+    const text = await res.text();
+    if (!res.ok) {
+        reportStatus(res.status);
+        throw new VitrinkaApiError(`POST chunk seq ${seq} → ${res.status}: ${text}`, res.status);
+    }
+    try {
+        return JSON.parse(text);
+    }
+    catch {
+        return {};
+    }
+}

package/build/recorder/capture/click.d.ts

@@ -0,0 +1,17 @@
+/** The extension's selector heuristic — id, then testid, then a short path. */
+export declare function shortSelector(el: Element | null): string;
+/** Bounding rect in device pixels (the extension's `imageRect`). */
+export declare function imageRect(el: Element): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+};
+/** The element's own visible text or value, trimmed and capped. */
+export declare function elementText(el: Element): string;
+export interface ClickLaneOptions {
+    /** True while the HUD owns the pointer (annotate mode) or the target is HUD chrome. */
+    ignore: (target: EventTarget | null) => boolean;
+}
+/** Install the click lane; returns the uninstaller. */
+export declare function installClickLane(opts: ClickLaneOptions): () => void;

package/build/recorder/capture/click.js

@@ -0,0 +1,77 @@
+/**
+ * Click lane — a capture-phase document listener (sees clicks the app
+ * swallows). Shape matches the extension's content script exactly:
+ * `{selector, text, rect}` — `shortSelector` (id > data-testid > a ≤4-hop
+ * tag.class path), the element's text (redacted, 80 chars) and its bounding
+ * rect in device pixels — plus `route`.
+ */
+import { pushEvent } from '../queue';
+import { currentRoute } from '../state';
+import { redactText } from './redact';
+const TEXT_CAP = 80;
+const CLICKABLE = 'a,button,[role=button],input,select,textarea,label';
+/** The extension's selector heuristic — id, then testid, then a short path. */
+export function shortSelector(el) {
+    if (!el)
+        return '';
+    if (el.id)
+        return `#${el.id}`;
+    const t = el.getAttribute('data-testid') || el.getAttribute('data-test');
+    if (t)
+        return `[data-testid="${t}"]`;
+    const parts = [];
+    let n = el;
+    while (n && parts.length < 4) {
+        let p = n.tagName.toLowerCase();
+        if (n.classList.length)
+            p += '.' + [...n.classList].slice(0, 2).join('.');
+        parts.unshift(p);
+        if (n.id) {
+            parts[0] = `#${n.id}`;
+            break;
+        }
+        n = n.parentElement;
+    }
+    return parts.join(' > ');
+}
+/** Bounding rect in device pixels (the extension's `imageRect`). */
+export function imageRect(el) {
+    const r = el.getBoundingClientRect();
+    const s = globalThis.devicePixelRatio || 1;
+    return {
+        x: Math.round(r.x * s),
+        y: Math.round(r.y * s),
+        w: Math.round(r.width * s),
+        h: Math.round(r.height * s),
+    };
+}
+/** The element's own visible text or value, trimmed and capped. */
+export function elementText(el) {
+    const html = el;
+    const raw = html.innerText || (typeof html.value === 'string' ? html.value : '') || '';
+    return raw.trim().slice(0, TEXT_CAP);
+}
+/** Install the click lane; returns the uninstaller. */
+export function installClickLane(opts) {
+    const onClick = (e) => {
+        try {
+            if (opts.ignore(e.target))
+                return;
+            const target = e.target instanceof Element ? e.target : null;
+            const el = target ? target.closest(CLICKABLE) || target : null;
+            if (!el)
+                return;
+            pushEvent('click', {
+                selector: shortSelector(el),
+                text: redactText(elementText(el)) ?? '',
+                rect: imageRect(el),
+                route: currentRoute.pathname,
+            }, { tabId: currentRoute.tabId, tabHost: currentRoute.tabHost });
+        }
+        catch {
+            // capture must never break the click
+        }
+    };
+    document.addEventListener('click', onClick, true);
+    return () => document.removeEventListener('click', onClick, true);
+}

package/build/recorder/capture/console.d.ts

@@ -0,0 +1,3 @@
+/** Restore console.error (while it is still ours) and drop the window listeners. */
+export declare function unpatchConsole(): void;
+export declare function patchConsole(): void;

package/build/recorder/capture/console.js

@@ -0,0 +1,89 @@
+/**
+ * Console lane — `console.error` + `window.onerror` + `unhandledrejection`.
+ * The recorder's own logs are prefixed "vitrinka:" and skipped, or a failed
+ * flush would feed itself forever. Shape matches the extension's CDP tap:
+ * `{level: 'error', text}`.
+ */
+import { pushEvent } from '../queue';
+import { currentRoute } from '../state';
+import { redactText } from './redact';
+const TEXT_CAP = 8 * 1024;
+const PATCH_MARK = '__vitrinkaRecorderConsolePatched';
+function describe(args) {
+    return args
+        .map((a) => {
+        if (typeof a === 'string')
+            return a;
+        if (a instanceof Error)
+            return a.stack ?? a.message;
+        try {
+            return JSON.stringify(a);
+        }
+        catch {
+            return String(a);
+        }
+    })
+        .join(' ')
+        .slice(0, TEXT_CAP);
+}
+function record(text) {
+    if (!text || text.startsWith('vitrinka:'))
+        return;
+    // Logged objects routinely carry tokens/headers — same redaction pass as
+    // network bodies.
+    pushEvent('console', { level: 'error', text: redactText(text) }, { tabId: currentRoute.tabId, tabHost: currentRoute.tabHost });
+}
+const UNPATCH_MARK = '__vitrinkaRecorderConsoleUnpatch';
+/** Restore console.error (while it is still ours) and drop the window listeners. */
+export function unpatchConsole() {
+    globalThis[UNPATCH_MARK]?.();
+}
+export function patchConsole() {
+    const g = globalThis;
+    if (g[PATCH_MARK])
+        return;
+    g[PATCH_MARK] = true;
+    const origError = console.error;
+    const orig = origError.bind(console);
+    const patched = (...args) => {
+        orig(...args);
+        try {
+            record(describe(args));
+        }
+        catch {
+            // capture must never break logging
+        }
+    };
+    console.error = patched;
+    const onError = (e) => {
+        try {
+            record(describe([e.error ?? e.message]));
+        }
+        catch {
+            // never break the page's own error handling
+        }
+    };
+    const onRejection = (e) => {
+        try {
+            record(`unhandled rejection: ${describe([e.reason])}`);
+        }
+        catch {
+            // see above
+        }
+    };
+    const hasWindow = typeof addEventListener === 'function';
+    if (hasWindow) {
+        addEventListener('error', onError);
+        addEventListener('unhandledrejection', onRejection);
+    }
+    g[UNPATCH_MARK] = () => {
+        if (console.error === patched)
+            console.error = origError;
+        if (hasWindow) {
+            removeEventListener('error', onError);
+            removeEventListener('unhandledrejection', onRejection);
+        }
+        delete g[PATCH_MARK];
+        delete g[UNPATCH_MARK];
+    };
+}

package/build/recorder/capture/nav.d.ts

@@ -0,0 +1,8 @@
+/** Record a navigation to the document's current URL (idempotent per URL). */
+export declare function noteNavigation(): void;
+/** Seed the dedupe with the URL the session started on (its nav is pushed by startSession). */
+export declare function primeNavigation(): void;
+/** Wrap pushState/replaceState + popstate/hashchange. Idempotent across HMR. */
+export declare function installNavLane(): void;
+/** Test-only. */
+export declare function __resetNavForTests(): void;

package/build/recorder/capture/nav.js

@@ -0,0 +1,54 @@
+/**
+ * Navigation lane. Every route change lands as ONE `nav` event
+ * (`{url, route, spa: true}` for in-document navigations, the extension's
+ * shape) whether it was observed by the default History wrap or fed by
+ * `useRecorderRoute(pathname)` — both funnel through `noteNavigation`, which
+ * dedupes on the URL so a router that fires both produces one event.
+ */
+import { pushEvent } from '../queue';
+import { currentRoute, setCurrentPath } from '../state';
+import { redactUrl } from './redact';
+let lastUrl = '';
+/** Record a navigation to the document's current URL (idempotent per URL). */
+export function noteNavigation() {
+    const loc = globalThis.location;
+    if (!loc)
+        return;
+    const url = loc.href;
+    setCurrentPath(loc.pathname);
+    if (url === lastUrl)
+        return;
+    lastUrl = url;
+    pushEvent('nav', { url: redactUrl(url), route: loc.pathname, spa: true }, { tabId: currentRoute.tabId, tabHost: currentRoute.tabHost });
+}
+/** Seed the dedupe with the URL the session started on (its nav is pushed by startSession). */
+export function primeNavigation() {
+    lastUrl = globalThis.location?.href ?? '';
+    setCurrentPath(globalThis.location?.pathname ?? '/');
+}
+const PATCH_MARK = '__vitrinkaRecorderNavPatched';
+/** Wrap pushState/replaceState + popstate/hashchange. Idempotent across HMR. */
+export function installNavLane() {
+    const g = globalThis;
+    if (g[PATCH_MARK] || typeof history === 'undefined')
+        return;
+    g[PATCH_MARK] = true;
+    const wrap = (name) => {
+        const orig = history[name];
+        history[name] = function (...args) {
+            const r = orig.apply(this, args);
+            // After the URL changed, off the caller's stack so a router's own
+            // synchronous state update never sees the recorder in its way.
+            queueMicrotask(noteNavigation);
+            return r;
+        };
+    };
+    wrap('pushState');
+    wrap('replaceState');
+    addEventListener('popstate', () => queueMicrotask(noteNavigation));
+    addEventListener('hashchange', () => queueMicrotask(noteNavigation));
+}
+/** Test-only. */
+export function __resetNavForTests() {
+    lastUrl = '';
+}

package/build/recorder/capture/net.d.ts

@@ -0,0 +1,22 @@
+/** Test-only: shorten the read deadline so suites don't burn real seconds. */
+export declare function __setBodyReadDeadlineForTests(ms: number): () => void;
+/**
+ * Non-string bodies are recorded as a TYPED PLACEHOLDER, never their bytes:
+ * a FormData routinely carries files and credentials and cannot be scrubbed
+ * without parsing it; a Blob/ArrayBuffer is binary. The placeholder keeps
+ * the timeline honest (a body WAS sent, this shape, this size) without the
+ * content.
+ */
+export declare function describeOpaqueBody(body: unknown): string | undefined;
+/** Test-only: the RAW bounded read, before capping — see `readBoundedText`. */
+export declare function __readBoundedTextForTests(clone: Response, headers: Headers): Promise<string | undefined>;
+/**
+ * Remove the fetch/XHR wrappers installed by `patchNetwork` — the provider's
+ * unmount calls it so the recorder never outlives its tree. Each global is
+ * restored only while it is STILL our wrapper: a later patch by someone else
+ * (a devtools, an APM agent) stacked on top must not be torn out from under
+ * them, so such a global is left in place and only our capture goes quiet
+ * (no session ⇒ the wrapper passes straight through).
+ */
+export declare function unpatchNetwork(): void;
+export declare function patchNetwork(): void;