@vitrinka/web 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vitrinka/web
 
+## 0.1.1
+
+- **The recorder never changes the page under test**: rrweb records images by
+  URL (`inlineImages: false`). Inlining made rrweb set
+  `crossOrigin="anonymous"` on the page's own no-CORS cross-origin `<img>`,
+  which refetched it in CORS mode and broke it on hosts without ACAO.
+- **Link into the right workspace**: a `url` addressing `/w/<slug>`
+  preselects that workspace on the approve page, and a token approved into
+  any other one is discarded; the link sheet says `linked into <x> — this app
+  records into <slug>; link again and pick <slug>`. Needs `@vitrinka/link`
+  ≥ 0.1.1.
+
 ## 0.1.0
 
 - Initial release: the React DOM journey recorder (`@vitrinka/web/recorder`)

package/README.md

@@ -56,8 +56,10 @@ testers **link their device from the pill**: the pill shows **Link
 recorder**, the sheet shows a short code, **Open vitrinka** (approve on this
 device) and a QR (scan from your phone); once approved the server mints an
 ingest-only `vkr_` token, stored in `localStorage` under
-`vitrinka.recorder.link`, and recording starts. **Unlink** in the ⋯ menu
-forgets it — so does a 401 from the server. `recorderKey` (an admin-minted
+`vitrinka.recorder.link`, and recording starts. A `url` addressing
+`/w/<slug>` preselects that workspace on the approve page; a token approved
+into another workspace is discarded and the sheet says which one to pick.
+**Unlink** in the ⋯ menu forgets it — so does a 401 from the server. `recorderKey` (an admin-minted
 `vkr_` key) is for CI, e2e and unattended builds only; when passed it wins
 over the link. The prop is `recorderKey`, not `key`: React reserves `key`
 and never delivers it to a component.
@@ -146,7 +148,7 @@ __vitrinkaRecorder.status(); // { recording, sessionId, elapsedMs, queued, synce
 
 | Lane | Event `kind` | Payload |
 |---|---|---|
-| rrweb | `rrweb` | `{count}` + `blobKey` — the batch itself is uploaded as a chunk; inputs always masked, all text under a `maskAllText` policy |
+| rrweb | `rrweb` | `{count}` + `blobKey` — the batch itself is uploaded as a chunk; inputs always masked, all text under a `maskAllText` policy; images recorded by URL, never inlined (inlining would alter the page's own `<img>`) |
 | clicks | `click` | `{selector, text, rect, route}` |
 | navigation | `nav` | `{url, route, spa}` |
 | network | `net` | `{method, url, status, ms, reqHeaders, resHeaders, reqBody, resBody, via}` — redacted, capped at 64 KiB per body; the recorder's own uploads are never recorded |

package/build/recorder/capture/rrweb.js

@@ -30,7 +30,11 @@ export function startRRWeb() {
                 buf.push(ev);
             },
             checkoutEveryNms: CHECKOUT_MS,
-            inlineImages: true,
+            // Never inline: to read a no-CORS cross-origin image rrweb sets
+            // crossOrigin='anonymous' on the page's own <img>, the browser refetches
+            // it in CORS mode and a host without ACAO shows a broken image — the
+            // recorder must never change the page under test. Replay loads by URL.
+            inlineImages: false,
             collectFonts: true,
             maskAllInputs: mask.maskAllInputs,
             ...(mask.maskTextSelector ? { maskTextSelector: mask.maskTextSelector } : {}),

package/build/recorder/link.d.ts

@@ -6,11 +6,15 @@ import { type Linked, type LinkStart } from '@vitrinka/link';
 export { LinkExpired } from '@vitrinka/link';
 export interface DeviceLink {
     start: LinkStart;
-    /** Resolves once the tester approved; rejects with LinkExpired / AbortError. */
+    /** Resolves once the tester approved; rejects with LinkExpired / LinkWorkspaceMismatch / AbortError. */
     linked: Promise<Linked>;
     cancel: () => void;
 }
-/** Ask for a code and poll until approved. The token is stored on success. */
+/**
+ * Ask for a code and poll until approved. The token is stored on success.
+ * A `url` addressing `/w/<slug>` preselects that workspace on the approve
+ * page, and a token approved into any other one is discarded unstored.
+ */
 export declare function linkDevice(): Promise<DeviceLink>;
 /** Forget the stored link; a live session ends locally (its tail is dropped). */
 export declare function forgetLink(): void;

package/build/recorder/link.js

@@ -2,18 +2,23 @@
  * The device link, wired to the recorder: start a code, poll for approval,
  * store the token; forget it on Unlink or when a session door answers 401.
  */
-import { pollLink, startLink } from '@vitrinka/link';
+import { linkWorkspace, pollLink, startLink } from '@vitrinka/link';
 import { onUnauthorized } from './api';
 import { clearLink, defaultLinkLabel, recorderConfig, storeLink } from './config';
 import { getState, resetQueues, setState } from './queue';
 import { notify } from './state';
 export { LinkExpired } from '@vitrinka/link';
-/** Ask for a code and poll until approved. The token is stored on success. */
+/**
+ * Ask for a code and poll until approved. The token is stored on success.
+ * A `url` addressing `/w/<slug>` preselects that workspace on the approve
+ * page, and a token approved into any other one is discarded unstored.
+ */
 export async function linkDevice() {
     const { url } = recorderConfig();
-    const start = await startLink(url, { label: defaultLinkLabel() });
+    const workspace = linkWorkspace(url);
+    const start = await startLink(url, { label: defaultLinkLabel(), workspace });
     const ac = new AbortController();
-    const linked = pollLink(url, start.device_code, { interval: start.interval, signal: ac.signal }).then((l) => {
+    const linked = pollLink(url, start.device_code, { interval: start.interval, workspace, signal: ac.signal }).then((l) => {
         storeLink(l);
         return l;
     });

package/build/recorder/session.d.ts

@@ -17,8 +17,8 @@ import { type SessionState } from './queue';
 export { currentRoute, notify, subscribe } from './state';
 export type { SessionDone } from '../protocol';
 /** Sent as `meta.recorder`; bumped with the package version. */
-export declare const RECORDER_VERSION = "0.1.0";
-export declare const RECORDER_ID = "web/0.1.0";
+export declare const RECORDER_VERSION = "0.1.1";
+export declare const RECORDER_ID = "web/0.1.1";
 /** What `POST /api/v1/sessions` answers (the fields this recorder keeps). */
 export interface SessionOut {
     id: string;

package/build/recorder/session.js

@@ -5,7 +5,7 @@ import { armReconcile, capturesSettled, disarmReconcile, drainBuffer, getState,
 import { currentRoute, notify } from './state';
 export { currentRoute, notify, subscribe } from './state';
 /** Sent as `meta.recorder`; bumped with the package version. */
-export const RECORDER_VERSION = '0.1.0';
+export const RECORDER_VERSION = '0.1.1';
 export const RECORDER_ID = `web/${RECORDER_VERSION}`;
 /**
  * Re-apply a RECOVERED session's redaction policy after a reload — and

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitrinka/web",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "vitrinka toolkit for React DOM apps — the journey recorder: capture manual-testing sessions (rrweb DOM stream, clicks, navigation, network, console, notes) straight into vitrinka boards.",
   "license": "Elastic-2.0",
   "repository": {
@@ -45,7 +45,7 @@
     "prepublishOnly": "tsc -p tsconfig.build.json"
   },
   "dependencies": {
-    "@vitrinka/link": "^0.1.0",
+    "@vitrinka/link": "^0.1.1",
     "@vitrinka/redact": "^0.1.0"
   },
   "peerDependencies": {