@lvce-editor/renderer-process 30.55.2 → 30.57.0

package/dist/rendererProcessMain.js

@@ -1,3 +1,499 @@
+const omitted = new Set(['SCRIPT', 'STYLE', 'LINK', 'META', 'BASE', 'NOSCRIPT']);
+const unsupported = new Set(['IFRAME', 'WEBVIEW', 'CANVAS', 'OBJECT', 'EMBED', 'VIDEO', 'AUDIO']);
+const attributes$1 = /^(class|style|id|title|role|type|checked|disabled|selected|placeholder|width|height|viewBox|d|fill|stroke|cx|cy|r|x|y|x1|x2|y1|y2|points|transform|xmlns|aria-[\w-]+)$/i;
+const capture = document => {
+  const visit = node => {
+    if (node.nodeType === 3) return {
+      text: node.textContent
+    };
+    if (node.nodeType !== 1 || omitted.has(node.tagName)) return undefined;
+    if (node.hasAttribute('data-session-replay-ignore')) return undefined;
+    if (unsupported.has(node.tagName) || node.matches('.Terminal, .TerminalView, .xterm, [data-session-replay-placeholder]')) {
+      const {
+        width,
+        height
+      } = node.getBoundingClientRect();
+      return {
+        tag: 'div',
+        attrs: {
+          class: 'SessionReplayPlaceholder',
+          style: `background:#808080;color:white;width:${width}px;height:${height}px;overflow:hidden`
+        },
+        children: [{
+          text: 'Content unavailable in replay'
+        }]
+      };
+    }
+    if (node.matches('[data-session-replay-mask], input[type=password]')) return {
+      tag: 'span',
+      children: [{
+        text: '••••••••'
+      }]
+    };
+    const attrs = Object.fromEntries([...node.attributes].filter(({
+      name
+    }) => attributes$1.test(name)).map(({
+      name,
+      value
+    }) => [name, value]));
+    if (node.tagName === 'IMG' && node.src.startsWith('data:image/')) attrs.src = node.src;
+    return {
+      tag: node.localName,
+      attrs,
+      ...(node.namespaceURI === 'http://www.w3.org/2000/svg' ? {
+        svg: true
+      } : {}),
+      ...(typeof node.value === 'string' ? {
+        value: node.value
+      } : {}),
+      ...(typeof node.checked === 'boolean' ? {
+        checked: node.checked
+      } : {}),
+      ...(node.scrollTop || node.scrollLeft ? {
+        scroll: [node.scrollLeft, node.scrollTop]
+      } : {}),
+      children: [...node.childNodes].map(visit).filter(Boolean)
+    };
+  };
+  const styles = [];
+  const visitSheet = (sheet, seen = new Set()) => {
+    if (!sheet || seen.has(sheet)) return '';
+    seen.add(sheet);
+    try {
+      return [...sheet.cssRules].map(rule => {
+        if (rule.type !== 3) return rule.cssText;
+        const imported = visitSheet(rule.styleSheet, seen);
+        return rule.media.mediaText ? `@media ${rule.media.mediaText} { ${imported} }` : imported;
+      }).join('\n');
+    } catch {
+      return '';
+    }
+  };
+  for (const sheet of [...document.styleSheets, ...document.adoptedStyleSheets]) styles.push(visitSheet(sheet));
+  return {
+    dom: visit(document.body),
+    styles,
+    documentElement: {
+      className: document.documentElement.className,
+      style: document.documentElement.style.cssText
+    },
+    viewport: [document.defaultView.innerWidth, document.defaultView.innerHeight]
+  };
+};
+const observe = (document, record, onError) => {
+  let dirty = true;
+  let busy = false;
+  let stopped = false;
+  const mark = () => {
+    dirty = true;
+  };
+  const observer = new MutationObserver(mark);
+  observer.observe(document.documentElement, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+    characterData: true
+  });
+  for (const type of ['input', 'change', 'scroll']) document.addEventListener(type, mark, true);
+  document.defaultView.addEventListener('resize', mark);
+  let lastStyles = '';
+  const snapshot = async (force = false) => {
+    if (busy || stopped) return;
+    busy = true;
+    try {
+      // CSSStyleSheet.replaceSync/insertRule don't produce DOM mutation records.
+      const frame = capture(document);
+      const styles = frame.styles.join('\n');
+      if (force || dirty || styles !== lastStyles) {
+        dirty = false;
+        lastStyles = styles;
+        await record('frame', frame);
+      }
+    } catch (error) {
+      onError(error);
+    } finally {
+      busy = false;
+    }
+  };
+  void snapshot(true);
+  const timer = setInterval(snapshot, 100);
+  return () => {
+    stopped = true;
+    clearInterval(timer);
+    observer.disconnect();
+    for (const type of ['input', 'change', 'scroll']) document.removeEventListener(type, mark, true);
+    document.defaultView.removeEventListener('resize', mark);
+  };
+};
+const serializeMessage = message => {
+  const seen = new WeakSet();
+  return JSON.parse(JSON.stringify(message, (key, value) => {
+    if (/password|token|secret|authorization|cookie/i.test(key)) return '[redacted]';
+    if (typeof value === 'bigint') return String(value);
+    if (typeof value !== 'object' || value === null) return value;
+    if (seen.has(value)) return '[circular]';
+    seen.add(value);
+    if (value instanceof Error) return {
+      name: value.name,
+      message: value.message,
+      stack: value.stack
+    };
+    if (value instanceof ArrayBuffer || ArrayBuffer.isView(value)) return {
+      type: value.constructor.name,
+      byteLength: value.byteLength
+    };
+    if (value.constructor?.name === 'MessagePort') return {
+      type: 'MessagePort'
+    };
+    return value;
+  }));
+};
+
+const createClient = url => {
+  const worker = new Worker(url, {
+    type: 'module',
+    name: 'Session Replay Worker'
+  });
+  const callbacks = new Map();
+  let nextId = 0;
+  let disposed = false;
+  const fail = error => {
+    for (const {
+      reject
+    } of callbacks.values()) reject(error);
+    callbacks.clear();
+  };
+  worker.onmessage = ({
+    data
+  }) => {
+    const callback = callbacks.get(data.id);
+    if (!callback) return;
+    callbacks.delete(data.id);
+    if (data.error) callback.reject(new Error(data.error));else callback.resolve(data.result);
+  };
+  worker.onerror = () => {
+    disposed = true;
+    worker.terminate();
+    fail(new Error('Session replay worker failed to load'));
+  };
+  return {
+    invoke(method, ...params) {
+      if (disposed) return Promise.reject(new Error('Session replay worker is closed'));
+      return new Promise((resolve, reject) => {
+        const id = nextId++;
+        callbacks.set(id, {
+          resolve,
+          reject
+        });
+        try {
+          worker.postMessage({
+            id,
+            method,
+            params
+          });
+        } catch (error) {
+          callbacks.delete(id);
+          reject(error);
+        }
+      });
+    },
+    dispose() {
+      disposed = true;
+      worker.terminate();
+      fail(new Error('Session replay worker is closed'));
+    }
+  };
+};
+
+const tags = new Set('body div span p pre code main section article header footer nav aside h1 h2 h3 h4 h5 h6 ul ol li table thead tbody tr td th button input textarea select option label form fieldset legend a img br hr strong em b i u s small details summary svg path rect circle ellipse line polyline polygon g defs clipPath text tspan'.split(' '));
+const attributes = /^(class|style|id|title|role|type|checked|disabled|selected|placeholder|width|height|viewBox|d|fill|stroke|cx|cy|r|x|y|x1|x2|y1|y2|points|transform|xmlns|aria-[\w-]+)$/i;
+const renderFrame = (document, frame) => {
+  let count = 0;
+  const scrolls = [];
+  const visit = (value, depth = 0) => {
+    if (++count > 100_000 || depth > 150 || !value || typeof value !== 'object') throw new Error('Invalid replay DOM');
+    if (typeof value.text === 'string') return document.createTextNode(value.text);
+    const tag = tags.has(value.tag) ? value.tag : 'div';
+    const node = value.svg ? document.createElementNS('http://www.w3.org/2000/svg', tag) : document.createElement(tag);
+    for (const [key, val] of Object.entries(value.attrs || {})) {
+      if (attributes.test(key) && typeof val === 'string') node.setAttribute(key, val);
+      if (key === 'src' && tag === 'img' && typeof val === 'string' && /^data:image\/(png|jpeg|gif|webp);base64,/.test(val)) node.setAttribute(key, val);
+    }
+    if (typeof value.value === 'string' && 'value' in node && node.type !== 'file') node.value = value.value;
+    if (typeof value.checked === 'boolean') node.checked = value.checked;
+    for (const child of value.children || []) node.append(visit(child, depth + 1));
+    if (Array.isArray(value.scroll)) scrolls.push([node, value.scroll]);
+    return node;
+  };
+  const root = visit(frame.dom);
+  const style = document.createElement('style');
+  style.textContent = (frame.styles || []).filter(value => typeof value === 'string').join('\n');
+  document.head.querySelectorAll('style').forEach(node => node.remove());
+  document.head.append(style);
+  document.documentElement.className = typeof frame.documentElement?.className === 'string' ? frame.documentElement.className : '';
+  document.documentElement.style.cssText = typeof frame.documentElement?.style === 'string' ? frame.documentElement.style : '';
+  if (root.nodeName === 'BODY') document.body.replaceWith(root);else document.body.replaceChildren(root);
+  for (const [node, [x, y]] of scrolls) node.scrollTo(x, y);
+};
+const mountPlayer = async (container, {
+  workerUrl,
+  source
+}) => {
+  const client = createClient(workerUrl);
+  container.replaceChildren();
+  container.className = 'SessionReplay';
+  container.style.cssText = 'position:fixed;inset:0;display:flex;flex-direction:column;background:#202020;color:white;z-index:2147483647';
+  const document = container.ownerDocument;
+  const viewport = document.createElement('div');
+  viewport.style.cssText = 'flex:1;min-height:0;overflow:auto;position:relative';
+  const iframe = document.createElement('iframe');
+  iframe.title = 'Recorded session';
+  iframe.setAttribute('sandbox', 'allow-same-origin');
+  iframe.style.cssText = 'border:0;pointer-events:none;display:block';
+  const loaded = new Promise(resolve => {
+    iframe.onload = resolve;
+  });
+  // An opaque, inert visual document: recorded markup cannot run scripts, submit forms or fetch URLs.
+  iframe.srcdoc = '<!doctype html><html><head><meta http-equiv="Content-Security-Policy" content="default-src &#39;none&#39;; style-src &#39;unsafe-inline&#39;; img-src data:; font-src data:"></head><body></body></html>';
+  viewport.append(iframe);
+  const controls = document.createElement('div');
+  controls.style.cssText = 'display:flex;gap:12px;align-items:center;padding:12px;font:14px sans-serif;background:#202020;color:white';
+  const play = document.createElement('button');
+  play.textContent = 'Play';
+  const slider = document.createElement('input');
+  slider.type = 'range';
+  slider.min = '0';
+  slider.step = '1';
+  slider.value = '0';
+  slider.setAttribute('aria-label', 'Session replay position');
+  slider.style.flex = '1';
+  const status = document.createElement('output');
+  status.setAttribute('aria-live', 'polite');
+  controls.append(play, slider, status);
+  container.append(viewport, controls);
+  let disposed = false;
+  let playing = false;
+  let timer;
+  let requestId = 0;
+  let position = 0;
+  let duration = 0;
+  const show = result => {
+    position = result.position;
+    duration = result.duration;
+    slider.max = String(Math.ceil(duration));
+    slider.value = String(Math.round(position));
+    status.textContent = `${(position / 1000).toFixed(1)} / ${(duration / 1000).toFixed(1)} s`;
+    const [width, height] = result.frame.viewport || [1280, 720];
+    iframe.style.width = `${Math.max(1, Math.min(16384, width))}px`;
+    iframe.style.height = `${Math.max(1, Math.min(16384, height))}px`;
+    renderFrame(iframe.contentDocument, result.frame);
+  };
+  const pause = () => {
+    playing = false;
+    clearTimeout(timer);
+    play.textContent = 'Play';
+  };
+  const seek = async time => {
+    const id = ++requestId;
+    const result = await client.invoke('seek', time);
+    if (!disposed && id === requestId) show(result);
+  };
+  const report = error => {
+    pause();
+    status.textContent = error.message;
+  };
+  slider.oninput = () => {
+    pause();
+    void seek(Number(slider.value)).catch(report);
+  };
+  play.onclick = () => {
+    if (playing) {
+      pause();
+      return;
+    }
+    playing = true;
+    play.textContent = 'Pause';
+    const origin = performance.now() - (position >= duration ? 0 : position);
+    const tick = async () => {
+      if (!playing || disposed) return;
+      try {
+        await seek(performance.now() - origin);
+        if (position >= duration) pause();else if (playing) timer = setTimeout(tick, 50);
+      } catch (error) {
+        report(error);
+      }
+    };
+    void tick();
+  };
+  try {
+    const [initial] = await Promise.all([client.invoke('load', source), loaded]);
+    show(initial);
+  } catch (error) {
+    play.disabled = slider.disabled = true;
+    report(error);
+  }
+  return () => {
+    disposed = true;
+    pause();
+    client.dispose();
+    container.replaceChildren();
+  };
+};
+
+const state$h = {
+  client: undefined,
+  inFlight: 0,
+  lastError: '',
+  stopObserving: undefined
+};
+const attached = new WeakSet();
+const workerUrl = new URL('sessionReplayWorkerMain.js', import.meta.url);
+const report = error => {
+  state$h.lastError = error.message;
+  state$h.stopObserving?.();
+  state$h.stopObserving = undefined;
+  console.warn(`Session replay: ${error.message}`);
+};
+const record$1 = (direction, message) => {
+  if (!state$h.client || state$h.lastError) return;
+  if (state$h.inFlight >= 500) {
+    report(new Error('Recording cannot keep up with renderer messages'));
+    return;
+  }
+  try {
+    const value = serializeMessage({
+      direction,
+      message
+    });
+    state$h.inFlight++;
+    void state$h.client.invoke('record', 'message', value).catch(report).finally(() => {
+      state$h.inFlight--;
+    });
+  } catch (error) {
+    report(error);
+  }
+};
+
+// Observe the actual transports, including messages on direct view-worker ports.
+// The recording path never changes or delays the original message or transfer list.
+const attach = rpc => {
+  const ipc = rpc.ipc;
+  if (!ipc || attached.has(ipc)) return;
+  attached.add(ipc);
+  const ignoredReplies = {
+    received: new Set(),
+    sent: new Set()
+  };
+  const trace = (direction, message) => {
+    if (message?.method?.startsWith('SessionReplay.')) {
+      if (message.id !== undefined) ignoredReplies[direction === 'received' ? 'sent' : 'received'].add(message.id);
+      return;
+    }
+    if (message && ('result' in message || 'error' in message) && ignoredReplies[direction].delete(message.id)) return;
+    record$1(direction, message);
+  };
+  if (typeof ipc.addEventListener === 'function') {
+    ipc.addEventListener('message', event => trace('received', ipc.getData ? ipc.getData(event) : event.data));
+  }
+  for (const name of ['send', 'sendAndTransfer']) {
+    if (typeof ipc[name] !== 'function') continue;
+    const original = ipc[name].bind(ipc);
+    ipc[name] = (...args) => {
+      trace('sent', args[0]);
+      return original(...args);
+    };
+  }
+};
+const configure = async options => {
+  state$h.stopObserving?.();
+  state$h.stopObserving = undefined;
+  if (state$h.client) {
+    try {
+      await state$h.client.invoke('stop');
+    } catch {
+      /* Preserve already saved local data when an upload is unavailable. */
+    }
+    state$h.client.dispose();
+    state$h.client = undefined;
+  }
+  state$h.lastError = '';
+  if (!options.local && !options.upload) return '';
+  const next = createClient(workerUrl);
+  try {
+    const id = await next.invoke('start', options);
+    state$h.client = next;
+    state$h.stopObserving = observe(document, (type, data) => next.invoke('record', type, data), report);
+    return id;
+  } catch (error) {
+    next.dispose();
+    throw error;
+  }
+};
+const getSession = async () => {
+  if (!state$h.client) throw new Error('Session replay is disabled in settings');
+  return state$h.client.invoke('export');
+};
+const getStatus = async () => {
+  if (!state$h.client) return {
+    enabled: false,
+    error: state$h.lastError
+  };
+  return {
+    enabled: true,
+    ...(await state$h.client.invoke('status')),
+    captureError: state$h.lastError
+  };
+};
+const flush = async () => state$h.client?.invoke('flush');
+const openLocalFile = async () => {
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = '.json,application/json';
+  input.onchange = async () => {
+    const file = input.files?.[0];
+    if (!file) return;
+    try {
+      if (file.size > 64 * 1024 * 1024) throw new Error('Session replay file is too large');
+      const session = JSON.parse(await file.text());
+      await configure({
+        endpoint: '',
+        local: false,
+        upload: false
+      });
+      await mountPlayer(document.body, {
+        source: {
+          session
+        },
+        workerUrl
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  input.click();
+};
+
+// Replay gets its own layout before any editor, extension or shared worker starts.
+const initializeLayout = async href => {
+  const url = new URL(href);
+  const localId = url.searchParams.get('replayId');
+  if (!localId && !url.searchParams.has('sessionReplay')) return false;
+  if (localId) await mountPlayer(document.body, {
+    source: {
+      localId
+    },
+    workerUrl
+  });else {
+    const button = document.createElement('button');
+    button.textContent = 'Open session replay file';
+    button.onclick = () => {
+      void openLocalFile();
+    };
+    document.body.replaceChildren(button);
+  }
+  return true;
+};
+
 const play = async src => {
   const audio = new Audio(src);
   await audio.play();
@@ -2094,6 +2590,7 @@ const registerRpc = (rpcId, rpc) => {
   if (previous && previous !== rpc) {
     previous.dispose();
   }
+  attach(rpc);
   rpcs.set(rpcId, rpc);
 };
 const registerView = (uid, rpcId) => {
@@ -2797,6 +3294,9 @@ const restoreExistingError = (error, currentStack) => {
 };
 const restoreMethodNotFoundError = (error, currentStack) => {
   const restoredError = new JsonRpcError(error.message);
+  Object.assign(restoredError, {
+    code: error.code
+  });
   const parentStack = getParentStack(error);
   setStack(restoredError, `${parentStack}${NewLine$1}${currentStack}`);
   return restoredError;
@@ -2816,9 +3316,13 @@ const applyDataProperties = (restoredError, error) => {
     // @ts-ignore
     restoredError.codeFrame = error.data.codeFrame;
   }
-  if (error.data.code) {
+  if (typeof error.data.code === 'string' || typeof error.data.code === 'number') {
     // @ts-ignore
-    restoredError.code = error.data.code;
+    Object.defineProperty(restoredError, 'code', {
+      configurable: true,
+      value: error.data.code,
+      writable: true
+    });
   }
   if (error.data.type) {
     // @ts-ignore
@@ -2840,6 +3344,13 @@ const applyDirectProperties = (restoredError, error) => {
 };
 const restoreMessageError = (error, _currentStack) => {
   const restoredError = constructError(error.message, error.type, error.name);
+  if (typeof error.code === 'string' || typeof error.code === 'number') {
+    Object.defineProperty(restoredError, 'code', {
+      configurable: true,
+      value: error.code,
+      writable: true
+    });
+  }
   if (error.data) {
     applyDataProperties(restoredError, error);
   } else {
@@ -2918,7 +3429,7 @@ const getErrorProperty = (error, prettyError) => {
   return {
     code: Custom,
     data: {
-      code: prettyError.code,
+      code: prettyError.code ?? error?.code,
       codeFrame: prettyError.codeFrame,
       name: prettyError.name,
       stack: getStack(prettyError),
@@ -2955,7 +3466,12 @@ const getErrorResponseSimple = (id, error) => {
   return {
     error: {
       code: Custom,
-      data: error,
+      data: error instanceof Error ? {
+        ...error,
+        code: 'code' in error ? error.code : undefined,
+        stack: error.stack,
+        type: error.name
+      } : error,
       // @ts-ignore
       message: error.message
     },
@@ -3343,6 +3859,7 @@ const launchDragAndDropWorker = async () => {
       commandMap: commandMapRef,
       messagePort: port2
     });
+    attach(rpc);
     return success(rpc);
   } catch (error$1) {
     return error(error$1);
@@ -3521,6 +4038,7 @@ const launchWorker = async ({
       name,
       url
     });
+    attach(rpc);
     return success(rpc);
   } catch (error$1) {
     return error(error$1);
@@ -4084,6 +4602,7 @@ const create$v = async ({
     commandMap: {},
     window
   });
+  attach(rpc);
   const webContentsIds = await rpc.invokeAndTransfer('CreateMessagePort.createMessagePort', ipcId, port);
   return webContentsIds;
 };
@@ -4534,7 +5053,6 @@ const setHeight = ($Element, height) => {
 
 const FocusLocationList = 17;
 const FocusMenu = 18;
-const FocusSimpleBrowserInput = 23;
 const FocusOutput = 28;
 
 // TODO when pressing tab -> focus next element in tab order and close menu
@@ -5912,10 +6430,10 @@ const handleMouseDown$3 = event => {
   const index = getNodeIndex($Item);
   return ['handleClickIndex', button, index, clientX, clientY];
 };
-const handleBlur$7 = () => {
+const handleBlur$6 = () => {
   return ['handleBlur'];
 };
-const handleFocus$9 = () => {
+const handleFocus$8 = () => {
   return ['handleFocus'];
 };
 
@@ -5934,9 +6452,9 @@ const returnValue$8 = true;
 
 const ViewletActivityBarEvents = {
   __proto__: null,
-  handleBlur: handleBlur$7,
+  handleBlur: handleBlur$6,
   handleContextMenu: handleContextMenu$6,
-  handleFocus: handleFocus$9,
+  handleFocus: handleFocus$8,
   handleMouseDown: handleMouseDown$3,
   returnValue: returnValue$8
 };
@@ -5999,7 +6517,7 @@ forwardViewletCommand('focusPrevious');
 const handleAudioError$1 = forwardViewletCommand('handleAudioError');
 forwardViewletCommand('handleBeforeInput');
 forwardViewletCommand('handleBeforeInputFromContentEditable');
-const handleBlur$6 = forwardViewletCommand('handleBlur');
+const handleBlur$5 = forwardViewletCommand('handleBlur');
 const handleButtonClick = forwardViewletCommand('handleButtonClick');
 const handleClick$6 = forwardViewletCommand('handleClick');
 const handleClickAction$2 = forwardViewletCommand('handleClickAction');
@@ -6027,11 +6545,11 @@ forwardViewletCommand('handleClickSize');
 forwardViewletCommand('handleClickDisable');
 forwardViewletCommand('handleClickUninstall');
 forwardViewletCommand('handleFilterInput');
-const handleFocus$8 = forwardViewletCommand('handleFocus');
+const handleFocus$7 = forwardViewletCommand('handleFocus');
 const handleFocusIn$4 = forwardViewletCommand('handleFocusIn');
 forwardViewletCommand('handleIconError');
 const handleImageError = forwardViewletCommand('handleImageError');
-const handleInput$6 = forwardViewletCommand('handleInput');
+const handleInput$4 = forwardViewletCommand('handleInput');
 const handleKeyDown$3 = forwardViewletCommand('handleKeyDown');
 const handleLink = forwardViewletCommand('handleLink');
 forwardViewletCommand('handleListBlur');
@@ -6257,7 +6775,7 @@ const ViewletColorPicker = {
   setOffsetX
 };
 
-const handleInput$5 = event => {
+const handleInput$3 = event => {
   const uid = fromEvent(event);
   const {
     target
@@ -6265,17 +6783,17 @@ const handleInput$5 = event => {
   const {
     value
   } = target;
-  handleInput$6(uid, value);
+  handleInput$4(uid, value);
 };
-const handleFocus$7 = event => {
+const handleFocus$6 = event => {
   const uid = fromEvent(event);
-  handleFocus$8(uid);
+  handleFocus$7(uid);
 };
 
 const ViewletDebugConsoleEvents = {
   __proto__: null,
-  handleFocus: handleFocus$7,
-  handleInput: handleInput$5
+  handleFocus: handleFocus$6,
+  handleInput: handleInput$3
 };
 
 const create$n = () => {
@@ -6311,14 +6829,14 @@ const handleKeyDown$2 = event => {
   } = event;
   handleKeyDown$3(uid, key, altKey, ctrlKey, shiftKey, metaKey);
 };
-const handleBlur$5 = event => {
+const handleBlur$4 = event => {
   const uid = fromEvent(event);
-  handleBlur$6(uid);
+  handleBlur$5(uid);
 };
 
 const ViewletDefineKeyBindingEvents = {
   __proto__: null,
-  handleBlur: handleBlur$5,
+  handleBlur: handleBlur$4,
   handleKeyDown: handleKeyDown$2
 };
 
@@ -6676,15 +7194,15 @@ const handleFocusIn$3 = event => {
   const uid = fromEvent(event);
   handleFocusIn$4(uid);
 };
-const handleBlur$4 = event => {
+const handleBlur$3 = event => {
   preventDefault(event);
   const uid = fromEvent(event);
-  handleBlur$6(uid);
+  handleBlur$5(uid);
 };
 
 const ViewletEditorCodeGeneratorEvents = {
   __proto__: null,
-  handleBlur: handleBlur$4,
+  handleBlur: handleBlur$3,
   handleFocusIn: handleFocusIn$3
 };
 
@@ -7187,9 +7705,9 @@ const handleError$4 = event => {
   const uid = fromEvent(event);
   handleImageError(uid);
 };
-const handleFocus$6 = event => {
+const handleFocus$5 = event => {
   const uid = fromEvent(event);
-  handleFocus$8(uid);
+  handleFocus$7(uid);
 };
 
 const create$i = () => {
@@ -7205,7 +7723,7 @@ const attachEvents$4 = state => {
   } = state;
   attachEvents$7($Viewlet, {
     [ContextMenu]: handleContextMenu$2,
-    [FocusIn]: handleFocus$6,
+    [FocusIn]: handleFocus$5,
     [PointerDown]: handlePointerDown$1,
     [PointerUp]: handlePointerUp
   });
@@ -7464,7 +7982,7 @@ const ViewletExtensionView = {
   setIframe: setIframe$1
 };
 
-const handleInput$4 = event => {
+const handleInput$2 = event => {
   const {
     target
   } = event;
@@ -7512,7 +8030,7 @@ const handleReplaceInput = event => {
 const handleReplaceFocus = event => {
   return ['FindWidget.handleReplaceFocus'];
 };
-const handleFocus$5 = event => {
+const handleFocus$4 = event => {
   return ['FindWidget.handleFocus'];
 };
 const handleToggleReplaceFocus = event => {
@@ -7540,12 +8058,12 @@ const ViewletFindWidgetEvents = {
   handleClickReplace,
   handleClickReplaceAll,
   handleClickToggleReplace,
-  handleFocus: handleFocus$5,
+  handleFocus: handleFocus$4,
   handleFocusClose,
   handleFocusNext,
   handleFocusPrevious,
   handleFocusReplaceAll,
-  handleInput: handleInput$4,
+  handleInput: handleInput$2,
   handleInputBlur,
   handleReplaceFocus,
   handleReplaceInput,
@@ -7885,10 +8403,10 @@ const handleSashDoubleClick$1 = id => {
 const handleResize$1 = (width, height) => {
   send$1('Layout.handleResize', width, height);
 };
-const handleFocus$4 = () => {
+const handleFocus$3 = () => {
   send$1('Layout.handleFocus');
 };
-const handleBlur$3 = () => {
+const handleBlur$2 = () => {
   send$1('Layout.handleBlur');
 };
 
@@ -7934,11 +8452,11 @@ const handleResize = () => {
   } = window;
   handleResize$1(innerWidth, innerHeight);
 };
-const handleFocus$3 = () => {
-  handleFocus$4();
+const handleFocus$2 = () => {
+  handleFocus$3();
 };
-const handleBlur$2 = () => {
-  handleBlur$3();
+const handleBlur$1 = () => {
+  handleBlur$2();
 };
 const handleKeyDown = handleKeyDown$1;
 const handleKeyUp = handleKeyUp$1;
@@ -7978,8 +8496,8 @@ const attachEvents$3 = state => {
     [PointerDown]: handleSashPointerDown
   });
   attachEvents$7(window, {
-    [Blur]: handleBlur$2,
-    [Focus]: handleFocus$3,
+    [Blur]: handleBlur$1,
+    [Focus]: handleFocus$2,
     [KeyDown]: handleKeyDown,
     [KeyUp]: handleKeyUp,
     [Resize]: handleResize
@@ -8420,186 +8938,8 @@ const ViewletSidebar = {
   setTitle
 };
 
-const pendingSelections = new WeakMap();
-const state$2 = {};
-const handleFocus$2 = event => {
-  const target = event.target;
-  if (target instanceof HTMLElement && !target.closest('.SimpleBrowser') && target.closest('.Main, .Panel, .Editor, .Terminal')) {
-    state$2.codingFocus = new WeakRef(target);
-  }
-};
-const listen = () => {
-  document.addEventListener('focusin', handleFocus$2);
-};
-const restoreCodingFocus$1 = () => {
-  const target = state$2.codingFocus?.deref();
-  if (!target?.isConnected) {
-    return false;
-  }
-  target.focus({
-    preventScroll: true
-  });
-  return document.activeElement === target;
-};
-const getAddress = uid => {
-  return get$a(uid)?.state.$Viewlet.querySelector('[name="simple-browser-address"]');
-};
-const captureBrowserAddress$1 = uid => {
-  const address = getAddress(uid);
-  return address && document.activeElement === address ? {
-    end: address.selectionEnd,
-    start: address.selectionStart
-  } : undefined;
-};
-const queueBrowserAddressSelection = address => {
-  clearTimeout(pendingSelections.get(address));
-  const timer = setTimeout(() => {
-    pendingSelections.delete(address);
-    if (!address.isConnected) return;
-    const suggestions = address.closest('.SimpleBrowser')?.querySelector('.SimpleBrowserSuggestions');
-    if (suggestions) address.setSelectionRange(address.value.length, address.value.length);else address.select();
-  });
-  pendingSelections.set(address, timer);
-};
-const focusBrowserAddress$1 = (uid, selection) => {
-  const address = getAddress(uid);
-  if (!address) return;
-  address.focus({
-    preventScroll: true
-  });
-  clearTimeout(pendingSelections.get(address));
-  pendingSelections.delete(address);
-  if (selection) address.setSelectionRange(selection.start, selection.end);else address.select();
-};
-const revealBrowserTab$1 = uid => {
-  const root = get$a(uid)?.state.$Viewlet;
-  root?.querySelector('.SimpleBrowserTabSelected')?.scrollIntoView({
-    block: 'nearest',
-    inline: 'nearest'
-  });
-};
-const browserParents = new Map();
-const rememberBrowserParent$1 = uid => {
-  if (browserParents.has(uid)) return;
-  const browser = get$a(uid)?.state.$Viewlet;
-  if (!browser?.parentNode) return;
-  const marker = document.createComment('browser workspace position');
-  browser.before(marker);
-  browserParents.set(uid, marker);
-};
-const restoreBrowserParent$1 = uid => {
-  const marker = browserParents.get(uid);
-  browserParents.delete(uid);
-  if (!marker) return;
-  const browser = get$a(uid)?.state.$Viewlet;
-  if (browser && marker.isConnected) marker.replaceWith(browser);else marker.remove();
-};
-
-const handleInput$3 = value => {
-  send$1('SimpleBrowser.handleInput', value);
-};
-const acceptSuggestion = value => {
-  send$1('SimpleBrowser.acceptSuggestion', value);
-};
-const closeSuggestions = () => {
-  send$1('SimpleBrowser.closeSuggestions');
-};
-const forward = () => {
-  send$1('SimpleBrowser.forward');
-};
-const backward = () => {
-  send$1('SimpleBrowser.backward');
-};
-const reload$1 = () => {
-  send$1('SimpleBrowser.reload');
-};
-const cancelNavigation = () => {
-  send$1('SimpleBrowser.cancelNavigation');
-};
-const openExternal = () => {
-  send$1('SimpleBrowser.openExternal');
-};
-
-const simpleBrowserAddressName = 'simple-browser-address';
-const handleInput$2 = event => {
-  const {
-    target
-  } = event;
-  const {
-    value
-  } = target;
-  handleInput$3(value);
-};
-const handleClickSuggestion = event => {
-  const suggestion = event.target.closest?.('.SimpleBrowserSuggestion');
-  const value = suggestion?.dataset.value;
-  if (typeof value !== 'string') {
-    return;
-  }
-  acceptSuggestion(value);
-};
-const handleFocus$1 = event => {
-  const {
-    target
-  } = event;
-  send$1('Focus.setFocus', FocusSimpleBrowserInput);
-  queueBrowserAddressSelection(target);
-};
-const handleBlur$1 = event => {
-  const {
-    relatedTarget,
-    target
-  } = event;
-  setTimeout(() => {
-    if (!target.isConnected) {
-      return;
-    }
-    if (target.ownerDocument.activeElement?.getAttribute('name') === simpleBrowserAddressName) {
-      return;
-    }
-    target.setSelectionRange(0, 0);
-    if (!relatedTarget?.closest?.('.SimpleBrowserSuggestions')) {
-      closeSuggestions();
-    }
-  });
-};
-const handleClickForward = () => {
-  forward();
-};
-const handleClickBackward = () => {
-  backward();
-};
-const handleClickReload = event => {
-  const {
-    target
-  } = event;
-  // TODO maybe set data attribute to check if it is a cancel button
-  // TODO do checks in renderer worker
-  if (target.title === 'Cancel') {
-    cancelNavigation();
-  } else {
-    reload$1();
-  }
-};
-const handleClickOpenExternal = () => {
-  openExternal();
-};
-
-const ViewletSimpleBrowserEvents = {
-  __proto__: null,
-  handleBlur: handleBlur$1,
-  handleClickBackward,
-  handleClickForward,
-  handleClickOpenExternal,
-  handleClickReload,
-  handleClickSuggestion,
-  handleFocus: handleFocus$1,
-  handleInput: handleInput$2
-};
-
 const ViewletSimpleBrowser = {
-  __proto__: null,
-  Events: ViewletSimpleBrowserEvents
+  __proto__: null
 };
 
 const ViewletSimpleBrowserHistory = {
@@ -8617,9 +8957,9 @@ const handleContextMenu$1 = event => {
   handleContextMenu$5(uid, button, clientX, clientY);
 };
 
-const handleFocus = event => {
+const handleFocus$1 = event => {
   const uid = fromEvent(event);
-  handleFocus$8(uid);
+  handleFocus$7(uid);
 };
 const getButtonIndex = $Node => {
   let index = -1;
@@ -8687,14 +9027,14 @@ const handleInput$1 = event => {
     value
   } = target;
   const uid = fromEvent(event);
-  handleInput$6(uid, value);
+  handleInput$4(uid, value);
 };
 
 const ViewletSourceControlEvents = {
   __proto__: null,
   handleClick: handleClick$3,
   handleContextMenu: handleContextMenu$1,
-  handleFocus,
+  handleFocus: handleFocus$1,
   handleInput: handleInput$1,
   handleMouseOut,
   handleMouseOver,
@@ -8937,7 +9277,7 @@ const handleMenuClick = event => {
 };
 const handleFocusIn$1 = event => {
   const uid = fromEvent(event);
-  handleFocus$8(uid);
+  handleFocus$7(uid);
 };
 
 const ViewletTitleBarMenuBarEvents = {
@@ -9482,14 +9822,14 @@ const load$1 = moduleId => {
   return loadModule();
 };
 
-const state$1 = {
+const state$2 = {
   currentPanelView: undefined,
   currentSidebarView: undefined,
   modules: Object.create(null)
 };
 
 const create$2 = (id, uid = id) => {
-  const module = state$1.modules[id];
+  const module = state$2.modules[id];
   if (!module) {
     throw new Error(`module not found: ${id}`);
   }
@@ -9508,7 +9848,7 @@ const create$2 = (id, uid = id) => {
   });
 };
 const createFunctionalRoot = (id, uid = id, hasFunctionalEvents, directEventRpcId) => {
-  let module = state$1.modules[id];
+  let module = state$2.modules[id];
   if (hasFunctionalEvents) {
     module ||= {};
   }
@@ -9540,7 +9880,7 @@ const removeKeyBindings = id => {
 const loadModule = async id => {
   try {
     const module = await load$1(id);
-    state$1.modules[id] = module;
+    state$2.modules[id] = module;
   } catch (error) {
     throw new VError(error, `Failed to load ${id}`);
   }
@@ -9695,7 +10035,7 @@ const refresh = (viewletId, viewletContext) => {
     instance.factory.refresh(instance.state, viewletContext);
   } else {
     // @ts-expect-error
-    state$1.refreshContext[viewletId] = viewletContext;
+    state$2.refreshContext[viewletId] = viewletContext;
   }
 };
 const specialIds = new Set(['TitleBar', 'SideBar', 'Main', 'ActivityBar', 'StatusBar', 'Panel']);
@@ -9891,7 +10231,7 @@ const setDom2 = (viewletId, dom) => {
     }
   });
 };
-const setPatches = (uid, patches) => {
+const setTreePatches = (uid, patches) => {
   if (patches.length === 0) {
     return;
   }
@@ -9906,12 +10246,17 @@ const setPatches = (uid, patches) => {
   if (!$Viewlet) {
     throw new Error('element not found');
   }
+  applyPatch($Viewlet, patches, {}, uid);
+  applyLateFocusMaybe();
+};
+const setPatches = (uid, patches) => {
+  // Legacy flat diffs encode a complete initial render as one Add patch.
+  // Tree diffs use Add to append children to an existing root instead.
   if (patches.length === 1 && patches[0].type === 6) {
     setDom2(uid, patches[0].nodes);
     return;
   }
-  applyPatch($Viewlet, patches, {}, uid);
-  applyLateFocusMaybe();
+  setTreePatches(uid, patches);
 };
 const waitForElement = selector => {
   const element = document.querySelector(selector);
@@ -9946,8 +10291,8 @@ const move = async (uid, selector, target) => {
 };
 const attachWindowEvents = () => {
   attachEvents$7(window, {
-    [Blur]: handleBlur$2,
-    [Focus]: handleFocus$3,
+    [Blur]: handleBlur$1,
+    [Focus]: handleFocus$2,
     [KeyDown]: handleKeyDown,
     [KeyUp]: handleKeyUp,
     [Resize]: handleResize
@@ -10272,6 +10617,7 @@ const commandHandlers = {
   'Viewlet.setPatches': setPatches,
   'Viewlet.setProperty': setProperty,
   'Viewlet.setSelectionByName': setSelectionByName,
+  'Viewlet.setTreePatches': setTreePatches,
   'Viewlet.setUid': setUid,
   'Viewlet.setValueByName': setValueByName,
   'Viewlet.show': show
@@ -10318,6 +10664,68 @@ const clear = storageType => {
   storage.clear();
 };
 
+const state$1 = {};
+const handleFocus = event => {
+  const target = event.target;
+  if (target instanceof HTMLElement && !target.closest('.SimpleBrowser') && target.closest('.Main, .Panel, .Editor, .Terminal')) {
+    state$1.codingFocus = new WeakRef(target);
+  }
+};
+const listen = () => {
+  document.addEventListener('focusin', handleFocus);
+};
+const restoreCodingFocus$1 = () => {
+  const target = state$1.codingFocus?.deref();
+  if (!target?.isConnected) {
+    return false;
+  }
+  target.focus({
+    preventScroll: true
+  });
+  return document.activeElement === target;
+};
+const getAddress = uid => {
+  return get$a(uid)?.state.$Viewlet.querySelector('[name="simple-browser-address"]');
+};
+const captureBrowserAddress$1 = uid => {
+  const address = getAddress(uid);
+  return address && document.activeElement === address ? {
+    end: address.selectionEnd,
+    start: address.selectionStart
+  } : undefined;
+};
+const focusBrowserAddress$1 = (uid, selection) => {
+  const address = getAddress(uid);
+  if (!address) return;
+  address.focus({
+    preventScroll: true
+  });
+  if (selection) address.setSelectionRange(selection.start, selection.end);else address.select();
+};
+const revealBrowserTab$1 = uid => {
+  const root = get$a(uid)?.state.$Viewlet;
+  root?.querySelector('.SimpleBrowserTabSelected')?.scrollIntoView({
+    block: 'nearest',
+    inline: 'nearest'
+  });
+};
+const browserParents = new Map();
+const rememberBrowserParent$1 = uid => {
+  if (browserParents.has(uid)) return;
+  const browser = get$a(uid)?.state.$Viewlet;
+  if (!browser?.parentNode) return;
+  const marker = document.createComment('browser workspace position');
+  browser.before(marker);
+  browserParents.set(uid, marker);
+};
+const restoreBrowserParent$1 = uid => {
+  const marker = browserParents.get(uid);
+  browserParents.delete(uid);
+  if (!marker) return;
+  const browser = get$a(uid)?.state.$Viewlet;
+  if (browser && marker.isConnected) marker.replaceWith(browser);else marker.remove();
+};
+
 const reload = () => {
   location.reload();
 };
@@ -10404,6 +10812,7 @@ const handleMessagePort = async (port, rpcId) => {
     },
     messagePort: port
   });
+  attach(rpc);
   if (rpcId !== undefined) {
     registerRpc(rpcId, rpc);
   }
@@ -10783,6 +11192,11 @@ const commandMap = {
   'PointerCapture.unmock': unmock,
   'Prompt.prompt': prompt,
   'ScreenCapture.start': start,
+  'SessionReplay.configure': configure,
+  'SessionReplay.flush': flush,
+  'SessionReplay.getSession': getSession,
+  'SessionReplay.getStatus': getStatus,
+  'SessionReplay.openLocalFile': openLocalFile,
   'TestFrameWork.checkConditionError': checkConditionError,
   'TestFrameWork.checkMultiElementCondition': checkMultiElementCondition,
   'TestFrameWork.checkSingleElementCondition': checkSingleElementCondition,
@@ -11299,18 +11713,19 @@ const enable = async window => {
 };
 
 const main = async () => {
+  if (await initializeLayout(location.href)) return;
   initialize(location.search);
   Object.assign(commandMapRef, commandMap);
   enable(window);
-  state$1.modules[ColorPicker] = ViewletColorPicker;
-  state$1.modules[EditorCodeGenerator] = ViewletEditorCodeGenerator;
-  state$1.modules[EditorCompletion] = ViewletEditorCompletion;
-  state$1.modules[EditorCompletionDetails] = ViewletEditorCompletionDetails;
-  state$1.modules[EditorHover] = ViewletEditorHover;
-  state$1.modules[EditorRename] = ViewletEditorRename;
-  state$1.modules[EditorSourceActions] = ViewletEditorSourceActions;
-  state$1.modules[FindWidget] = ViewletFindWidget;
-  state$1.modules[TitleBar] = ViewletTitleBar;
+  state$2.modules[ColorPicker] = ViewletColorPicker;
+  state$2.modules[EditorCodeGenerator] = ViewletEditorCodeGenerator;
+  state$2.modules[EditorCompletion] = ViewletEditorCompletion;
+  state$2.modules[EditorCompletionDetails] = ViewletEditorCompletionDetails;
+  state$2.modules[EditorHover] = ViewletEditorHover;
+  state$2.modules[EditorRename] = ViewletEditorRename;
+  state$2.modules[EditorSourceActions] = ViewletEditorSourceActions;
+  state$2.modules[FindWidget] = ViewletFindWidget;
+  state$2.modules[TitleBar] = ViewletTitleBar;
   // TODO this is discovered very late
   const launchWorkersResult = await launchWorkers();
   if (isError(launchWorkersResult)) {
@@ -11385,7 +11800,7 @@ const mountTerminal = async (state, uid) => {
     return;
   }
   const inputDisposable = terminal.onData(data => {
-    handleInput$6(uid, data);
+    handleInput$4(uid, data);
   });
   const resizeDisposable = terminal.onResize(({
     cols,