@checkly/playwright-core 1.51.15 → 1.51.17-beta.0

package/lib/vite/traceViewer/assets/workbench-CWZselvp.js

@@ -0,0 +1,2470 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { r as reactExports, j as jsxRuntimeExports, f as clsx, k as scrollIntoViewIfNeeded, l as buildActionTree, n as stats, m as msToString, T as ToolbarButton, o as asLocator, P as PlaceholderPanel, C as CopyToClipboard, L as ListView, p as ansi2html, q as useCookies, u as useMeasure, v as ResizeView, w as kWebLinkRe, x as useFlash, y as lineHeight, z as CodeMirrorWrapper, A as useAsyncMemo, B as CopyToClipboardTextButton, D as upperBound, G as GlassPane, h as useSetting, E as useConsoleTabModel, F as useNetworkTabModel, S as SplitView, H as TabbedPane, I as SnapshotTabsView, J as InspectorTab, K as ConsoleTab, N as NetworkTab, O as SourceTab } from "./inspectorTab-CwgfffWb.js";
+const scrollPositions = /* @__PURE__ */ new Map();
+function TreeView({
+  name,
+  rootItem,
+  render,
+  title,
+  icon,
+  isError,
+  isVisible,
+  selectedItem,
+  onAccepted,
+  onSelected,
+  onHighlighted,
+  treeState,
+  setTreeState,
+  noItemsMessage,
+  dataTestId,
+  autoExpandDepth
+}) {
+  const treeItems = reactExports.useMemo(() => {
+    return indexTree(rootItem, selectedItem, treeState.expandedItems, autoExpandDepth || 0, isVisible);
+  }, [rootItem, selectedItem, treeState, autoExpandDepth, isVisible]);
+  const itemListRef = reactExports.useRef(null);
+  const [highlightedItem, setHighlightedItem] = reactExports.useState();
+  const [isKeyboardNavigation, setIsKeyboardNavigation] = reactExports.useState(false);
+  reactExports.useEffect(() => {
+    onHighlighted == null ? void 0 : onHighlighted(highlightedItem);
+  }, [onHighlighted, highlightedItem]);
+  reactExports.useEffect(() => {
+    const treeElem = itemListRef.current;
+    if (!treeElem)
+      return;
+    const saveScrollPosition = () => {
+      scrollPositions.set(name, treeElem.scrollTop);
+    };
+    treeElem.addEventListener("scroll", saveScrollPosition, { passive: true });
+    return () => treeElem.removeEventListener("scroll", saveScrollPosition);
+  }, [name]);
+  reactExports.useEffect(() => {
+    if (itemListRef.current)
+      itemListRef.current.scrollTop = scrollPositions.get(name) || 0;
+  }, [name]);
+  const toggleExpanded = reactExports.useCallback((item) => {
+    const { expanded } = treeItems.get(item);
+    if (expanded) {
+      for (let i2 = selectedItem; i2; i2 = i2.parent) {
+        if (i2 === item) {
+          onSelected == null ? void 0 : onSelected(item);
+          break;
+        }
+      }
+      treeState.expandedItems.set(item.id, false);
+    } else {
+      treeState.expandedItems.set(item.id, true);
+    }
+    setTreeState({ ...treeState });
+  }, [treeItems, selectedItem, onSelected, treeState, setTreeState]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(`tree-view vbox`, name + "-tree-view"), role: "tree", "data-testid": dataTestId || name + "-tree", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: clsx("tree-view-content"),
+      tabIndex: 0,
+      onKeyDown: (event) => {
+        if (selectedItem && event.key === "Enter") {
+          onAccepted == null ? void 0 : onAccepted(selectedItem);
+          return;
+        }
+        if (event.key !== "ArrowDown" && event.key !== "ArrowUp" && event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+          return;
+        event.stopPropagation();
+        event.preventDefault();
+        if (selectedItem && event.key === "ArrowLeft") {
+          const { expanded, parent } = treeItems.get(selectedItem);
+          if (expanded) {
+            treeState.expandedItems.set(selectedItem.id, false);
+            setTreeState({ ...treeState });
+          } else if (parent) {
+            onSelected == null ? void 0 : onSelected(parent);
+          }
+          return;
+        }
+        if (selectedItem && event.key === "ArrowRight") {
+          if (selectedItem.children.length) {
+            treeState.expandedItems.set(selectedItem.id, true);
+            setTreeState({ ...treeState });
+          }
+          return;
+        }
+        let newSelectedItem = selectedItem;
+        if (event.key === "ArrowDown") {
+          if (selectedItem) {
+            const itemData = treeItems.get(selectedItem);
+            newSelectedItem = itemData.next;
+          } else if (treeItems.size) {
+            const itemList = [...treeItems.keys()];
+            newSelectedItem = itemList[0];
+          }
+        }
+        if (event.key === "ArrowUp") {
+          if (selectedItem) {
+            const itemData = treeItems.get(selectedItem);
+            newSelectedItem = itemData.prev;
+          } else if (treeItems.size) {
+            const itemList = [...treeItems.keys()];
+            newSelectedItem = itemList[itemList.length - 1];
+          }
+        }
+        onHighlighted == null ? void 0 : onHighlighted(void 0);
+        if (newSelectedItem) {
+          setIsKeyboardNavigation(true);
+          onSelected == null ? void 0 : onSelected(newSelectedItem);
+        }
+        setHighlightedItem(void 0);
+      },
+      ref: itemListRef,
+      children: [
+        noItemsMessage && treeItems.size === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tree-view-empty", children: noItemsMessage }),
+        rootItem.children.map((child) => {
+          const itemData = treeItems.get(child);
+          return itemData && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TreeItemHeader,
+            {
+              item: child,
+              treeItems,
+              selectedItem,
+              onSelected,
+              onAccepted,
+              isError,
+              toggleExpanded,
+              highlightedItem,
+              setHighlightedItem,
+              render,
+              icon,
+              title,
+              isKeyboardNavigation,
+              setIsKeyboardNavigation
+            },
+            child.id
+          );
+        })
+      ]
+    }
+  ) });
+}
+function TreeItemHeader({
+  item,
+  treeItems,
+  selectedItem,
+  onSelected,
+  highlightedItem,
+  setHighlightedItem,
+  isError,
+  onAccepted,
+  toggleExpanded,
+  render,
+  title,
+  icon,
+  isKeyboardNavigation,
+  setIsKeyboardNavigation
+}) {
+  const groupId = reactExports.useId();
+  const itemRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (selectedItem === item && isKeyboardNavigation && itemRef.current) {
+      scrollIntoViewIfNeeded(itemRef.current);
+      setIsKeyboardNavigation(false);
+    }
+  }, [item, selectedItem, isKeyboardNavigation, setIsKeyboardNavigation]);
+  const itemData = treeItems.get(item);
+  const indentation = itemData.depth;
+  const expanded = itemData.expanded;
+  let expandIcon = "codicon-blank";
+  if (typeof expanded === "boolean")
+    expandIcon = expanded ? "codicon-chevron-down" : "codicon-chevron-right";
+  const rendered = render(item);
+  const children = expanded && item.children.length ? item.children : [];
+  const titled = title == null ? void 0 : title(item);
+  const iconed = (icon == null ? void 0 : icon(item)) || "codicon-blank";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: itemRef, role: "treeitem", "aria-selected": item === selectedItem, "aria-expanded": expanded, "aria-controls": groupId, title: titled, className: "vbox", style: { flex: "none" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        onDoubleClick: () => onAccepted == null ? void 0 : onAccepted(item),
+        className: clsx(
+          "tree-view-entry",
+          selectedItem === item && "selected",
+          highlightedItem === item && "highlighted",
+          (isError == null ? void 0 : isError(item)) && "error"
+        ),
+        onClick: () => onSelected == null ? void 0 : onSelected(item),
+        onMouseEnter: () => setHighlightedItem(item),
+        onMouseLeave: () => setHighlightedItem(void 0),
+        children: [
+          indentation ? new Array(indentation).fill(0).map((_2, i2) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tree-view-indent" }, "indent-" + i2)) : void 0,
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "codicon " + expandIcon,
+              style: { minWidth: 16, marginRight: 4 },
+              onDoubleClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                toggleExpanded(item);
+              }
+            }
+          ),
+          icon && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "codicon " + iconed, style: { minWidth: 16, marginRight: 4 }, "aria-label": "[" + iconed.replace("codicon", "icon") + "]" }),
+          typeof rendered === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { textOverflow: "ellipsis", overflow: "hidden" }, children: rendered }) : rendered
+        ]
+      }
+    ),
+    !!children.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id: groupId, role: "group", children: children.map((child) => {
+      const itemData2 = treeItems.get(child);
+      return itemData2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TreeItemHeader,
+        {
+          item: child,
+          treeItems,
+          selectedItem,
+          onSelected,
+          onAccepted,
+          isError,
+          toggleExpanded,
+          highlightedItem,
+          setHighlightedItem,
+          render,
+          title,
+          icon,
+          isKeyboardNavigation,
+          setIsKeyboardNavigation
+        },
+        child.id
+      );
+    }) })
+  ] });
+}
+function indexTree(rootItem, selectedItem, expandedItems, autoExpandDepth, isVisible = () => true) {
+  if (!isVisible(rootItem))
+    return /* @__PURE__ */ new Map();
+  const result = /* @__PURE__ */ new Map();
+  const temporaryExpanded = /* @__PURE__ */ new Set();
+  for (let item = selectedItem == null ? void 0 : selectedItem.parent; item; item = item.parent)
+    temporaryExpanded.add(item.id);
+  let lastItem = null;
+  const appendChildren = (parent, depth) => {
+    for (const item of parent.children) {
+      if (!isVisible(item))
+        continue;
+      const expandState = temporaryExpanded.has(item.id) || expandedItems.get(item.id);
+      const autoExpandMatches = autoExpandDepth > depth && result.size < 25 && expandState !== false;
+      const expanded = item.children.length ? expandState ?? autoExpandMatches : void 0;
+      const itemData = {
+        depth,
+        expanded,
+        parent: rootItem === parent ? null : parent,
+        next: null,
+        prev: lastItem
+      };
+      if (lastItem)
+        result.get(lastItem).next = item;
+      lastItem = item;
+      result.set(item, itemData);
+      if (expanded)
+        appendChildren(item, depth + 1);
+    }
+  };
+  appendChildren(rootItem, 0);
+  return result;
+}
+function testStatusIcon(status) {
+  if (status === "scheduled")
+    return "codicon-clock";
+  if (status === "running")
+    return "codicon-loading";
+  if (status === "failed")
+    return "codicon-error";
+  if (status === "passed")
+    return "codicon-check";
+  if (status === "skipped")
+    return "codicon-circle-slash";
+  return "codicon-circle-outline";
+}
+function testStatusText(status) {
+  if (status === "scheduled")
+    return "Pending";
+  if (status === "running")
+    return "Running";
+  if (status === "failed")
+    return "Failed";
+  if (status === "passed")
+    return "Passed";
+  if (status === "skipped")
+    return "Skipped";
+  return "Did not run";
+}
+const ActionTreeView = TreeView;
+const ActionList = ({
+  actions,
+  selectedAction,
+  selectedTime,
+  setSelectedTime,
+  sdkLanguage,
+  onSelected,
+  onHighlighted,
+  revealConsole,
+  revealAttachment,
+  isLive
+}) => {
+  const [treeState, setTreeState] = reactExports.useState({ expandedItems: /* @__PURE__ */ new Map() });
+  const { rootItem, itemMap } = reactExports.useMemo(() => buildActionTree(actions), [actions]);
+  const { selectedItem } = reactExports.useMemo(() => {
+    const selectedItem2 = selectedAction ? itemMap.get(selectedAction.callId) : void 0;
+    return { selectedItem: selectedItem2 };
+  }, [itemMap, selectedAction]);
+  const isError = reactExports.useCallback((item) => {
+    var _a, _b;
+    return !!((_b = (_a = item.action) == null ? void 0 : _a.error) == null ? void 0 : _b.message);
+  }, []);
+  const onAccepted = reactExports.useCallback((item) => {
+    return setSelectedTime({ minimum: item.action.startTime, maximum: item.action.endTime });
+  }, [setSelectedTime]);
+  const render = reactExports.useCallback((item) => {
+    return renderAction(item.action, { sdkLanguage, revealConsole, revealAttachment, isLive, showDuration: true, showBadges: true });
+  }, [isLive, revealConsole, revealAttachment, sdkLanguage]);
+  const isVisible = reactExports.useCallback((item) => {
+    return !selectedTime || !item.action || item.action.startTime <= selectedTime.maximum && item.action.endTime >= selectedTime.minimum;
+  }, [selectedTime]);
+  const onSelectedAction = reactExports.useCallback((item) => {
+    onSelected == null ? void 0 : onSelected(item.action);
+  }, [onSelected]);
+  const onHighlightedAction = reactExports.useCallback((item) => {
+    onHighlighted == null ? void 0 : onHighlighted(item == null ? void 0 : item.action);
+  }, [onHighlighted]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox", children: [
+    selectedTime && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "action-list-show-all", onClick: () => setSelectedTime(void 0), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "codicon codicon-triangle-left" }),
+      "Show all"
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ActionTreeView,
+      {
+        name: "actions",
+        rootItem,
+        treeState,
+        setTreeState,
+        selectedItem,
+        onSelected: onSelectedAction,
+        onHighlighted: onHighlightedAction,
+        onAccepted,
+        isError,
+        isVisible,
+        render
+      }
+    )
+  ] });
+};
+const renderAction = (action, options) => {
+  var _a, _b;
+  const { sdkLanguage, revealConsole, revealAttachment, isLive, showDuration, showBadges } = options;
+  const { errors, warnings } = stats(action);
+  const showAttachments = !!((_a = action.attachments) == null ? void 0 : _a.length) && !!revealAttachment;
+  const parameterString = actionParameterDisplayString(action, sdkLanguage || "javascript");
+  const isSkipped = action.class === "Test" && action.method === "step" && ((_b = action.annotations) == null ? void 0 : _b.some((a2) => a2.type === "skip"));
+  let time = "";
+  if (action.endTime)
+    time = msToString(action.endTime - action.startTime);
+  else if (action.error)
+    time = "Timed out";
+  else if (!isLive)
+    time = "-";
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "action-title", title: action.apiName, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: action.apiName }),
+      parameterString && (parameterString.type === "locator" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "action-parameter action-locator-parameter", children: parameterString.value }),
+        parameterString.childDisplayString && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "action-parameter action-generic-parameter", children: parameterString.childDisplayString.value })
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "action-parameter action-generic-parameter", children: parameterString.value })),
+      action.method === "goto" && action.params.url && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-url", title: action.params.url, children: action.params.url }),
+      action.class === "APIRequestContext" && action.params.url && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-url", title: action.params.url, children: excludeOrigin(action.params.url) })
+    ] }),
+    (showDuration || showBadges || showAttachments || isSkipped) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "spacer" }),
+    showAttachments && /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { icon: "attach", title: "Open Attachment", onClick: () => revealAttachment(action.attachments[0]) }),
+    showDuration && !isSkipped && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-duration", children: time || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "codicon codicon-loading" }) }),
+    isSkipped && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("action-skipped", "codicon", testStatusIcon("skipped")), title: "skipped" }),
+    showBadges && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "action-icons", onClick: () => revealConsole == null ? void 0 : revealConsole(), children: [
+      !!errors && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "action-icon", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "codicon codicon-error" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "action-icon-value", children: errors })
+      ] }),
+      !!warnings && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "action-icon", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "codicon codicon-warning" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "action-icon-value", children: warnings })
+      ] })
+    ] })
+  ] });
+};
+function excludeOrigin(url) {
+  try {
+    const urlObject = new URL(url);
+    return urlObject.pathname + urlObject.search;
+  } catch (error) {
+    return url;
+  }
+}
+const clockDisplayString = (action) => {
+  switch (action.method) {
+    case "clockPauseAt":
+    case "clockSetFixedTime":
+    case "clockSetSystemTime": {
+      if (action.params.timeString === void 0 && action.params.timeNumber === void 0)
+        return void 0;
+      return {
+        type: "generic",
+        value: new Date(
+          action.params.timeString ?? action.params.timeNumber
+        ).toLocaleString(void 0, { timeZone: "UTC" })
+      };
+    }
+    case "clockFastForward":
+    case "clockRunFor": {
+      if (action.params.ticksNumber === void 0 && action.params.ticksString === void 0)
+        return void 0;
+      return {
+        type: "generic",
+        value: action.params.ticksString ?? `${action.params.ticksNumber}ms`
+      };
+    }
+  }
+  return void 0;
+};
+const keyboardDisplayString = (action) => {
+  switch (action.method) {
+    case "press":
+    case "keyboardPress":
+    case "keyboardDown":
+    case "keyboardUp": {
+      if (action.params.key === void 0)
+        return void 0;
+      return { type: "generic", value: action.params.key };
+    }
+    case "type":
+    case "fill":
+    case "keyboardType":
+    case "keyboardInsertText": {
+      const string = action.params.text ?? action.params.value;
+      if (string === void 0)
+        return void 0;
+      return { type: "generic", value: `"${string}"` };
+    }
+  }
+};
+const mouseDisplayString = (action) => {
+  switch (action.method) {
+    case "click":
+    case "dblclick":
+    case "mouseClick":
+    case "mouseMove": {
+      if (action.params.x === void 0 || action.params.y === void 0)
+        return void 0;
+      return {
+        type: "generic",
+        value: `(${action.params.x}, ${action.params.y})`
+      };
+    }
+    case "mouseWheel": {
+      if (action.params.deltaX === void 0 || action.params.deltaY === void 0)
+        return void 0;
+      return {
+        type: "generic",
+        value: `(${action.params.deltaX}, ${action.params.deltaY})`
+      };
+    }
+  }
+};
+const touchscreenDisplayString = (action) => {
+  switch (action.method) {
+    case "tap": {
+      if (action.params.x === void 0 || action.params.y === void 0)
+        return void 0;
+      return {
+        type: "generic",
+        value: `(${action.params.x}, ${action.params.y})`
+      };
+    }
+  }
+};
+const actionParameterDisplayString = (action, sdkLanguage, ignoreLocator = false) => {
+  const params = action.params;
+  if (!ignoreLocator && params.selector !== void 0) {
+    return {
+      type: "locator",
+      value: asLocator(sdkLanguage, params.selector),
+      childDisplayString: actionParameterDisplayString(
+        action,
+        sdkLanguage,
+        true
+      )
+    };
+  }
+  switch (action.class.toLowerCase()) {
+    case "browsercontext":
+      return clockDisplayString(action);
+    case "page":
+    case "frame":
+    case "elementhandle":
+      return keyboardDisplayString(action) ?? mouseDisplayString(action) ?? touchscreenDisplayString(action);
+  }
+  return void 0;
+};
+const CallTab = ({ action, startTimeOffset, sdkLanguage }) => {
+  const paramKeys = reactExports.useMemo(() => Object.keys((action == null ? void 0 : action.params) ?? {}).filter((name) => name !== "info"), [action]);
+  if (!action)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderPanel, { text: "No action selected" });
+  const startTimeMillis = action.startTime - startTimeOffset;
+  const startTime = msToString(startTimeMillis);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-tab", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-line", children: action.apiName }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", children: "Time" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DateTimeCallLine, { name: "start:", value: startTime }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DateTimeCallLine, { name: "duration:", value: renderDuration(action) }),
+    !!paramKeys.length && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", children: "Parameters" }),
+      paramKeys.map((name) => renderProperty(propertyToString(action, name, action.params[name], sdkLanguage)))
+    ] }),
+    !!action.result && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", children: "Return value" }),
+      Object.keys(action.result).map(
+        (name) => renderProperty(propertyToString(action, name, action.result[name], sdkLanguage))
+      )
+    ] })
+  ] });
+};
+const DateTimeCallLine = ({ name, value }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+  name,
+  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value datetime", title: value, children: value })
+] });
+function renderDuration(action) {
+  if (action.endTime)
+    return msToString(action.endTime - action.startTime);
+  else if (!!action.error)
+    return "Timed Out";
+  else
+    return "Running";
+}
+function renderProperty(property) {
+  let text = property.text.replace(/\n/g, "↵");
+  if (property.type === "string")
+    text = `"${text}"`;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+    property.name,
+    ":",
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("call-value", property.type), title: property.text, children: text }),
+    ["string", "number", "object", "locator"].includes(property.type) && /* @__PURE__ */ jsxRuntimeExports.jsx(CopyToClipboard, { value: property.text })
+  ] }, property.name);
+}
+function propertyToString(event, name, value, sdkLanguage) {
+  const isEval = event.method.includes("eval") || event.method === "waitForFunction";
+  if (name === "files")
+    return { text: "<files>", type: "string", name };
+  if (name === "eventInit" || name === "expectedValue" || name === "arg" && isEval)
+    value = parseSerializedValue(value.value, new Array(10).fill({ handle: "<handle>" }));
+  if (name === "value" && isEval || name === "received" && event.method === "expect")
+    value = parseSerializedValue(value, new Array(10).fill({ handle: "<handle>" }));
+  if (name === "selector")
+    return { text: asLocator(sdkLanguage || "javascript", event.params.selector), type: "locator", name: "locator" };
+  const type = typeof value;
+  if (type !== "object" || value === null)
+    return { text: String(value), type, name };
+  if (value.guid)
+    return { text: "<handle>", type: "handle", name };
+  return { text: JSON.stringify(value).slice(0, 1e3), type: "object", name };
+}
+function parseSerializedValue(value, handles) {
+  if (value.n !== void 0)
+    return value.n;
+  if (value.s !== void 0)
+    return value.s;
+  if (value.b !== void 0)
+    return value.b;
+  if (value.v !== void 0) {
+    if (value.v === "undefined")
+      return void 0;
+    if (value.v === "null")
+      return null;
+    if (value.v === "NaN")
+      return NaN;
+    if (value.v === "Infinity")
+      return Infinity;
+    if (value.v === "-Infinity")
+      return -Infinity;
+    if (value.v === "-0")
+      return -0;
+  }
+  if (value.d !== void 0)
+    return new Date(value.d);
+  if (value.r !== void 0)
+    return new RegExp(value.r.p, value.r.f);
+  if (value.a !== void 0)
+    return value.a.map((a2) => parseSerializedValue(a2, handles));
+  if (value.o !== void 0) {
+    const result = {};
+    for (const { k: k2, v: v2 } of value.o)
+      result[k2] = parseSerializedValue(v2, handles);
+    return result;
+  }
+  if (value.h !== void 0) {
+    if (handles === void 0)
+      return "<object>";
+    return handles[value.h];
+  }
+  return "<object>";
+}
+const LogList = ListView;
+const LogTab = ({ action, isLive }) => {
+  const entries = reactExports.useMemo(() => {
+    var _a;
+    if (!action || !action.log.length)
+      return [];
+    const log = action.log;
+    const wallTimeOffset = action.context.wallTime - action.context.startTime;
+    const entries2 = [];
+    for (let i2 = 0; i2 < log.length; ++i2) {
+      let time = "";
+      if (log[i2].time !== -1) {
+        const timeStart = (_a = log[i2]) == null ? void 0 : _a.time;
+        if (i2 + 1 < log.length)
+          time = msToString(log[i2 + 1].time - timeStart);
+        else if (action.endTime > 0)
+          time = msToString(action.endTime - timeStart);
+        else if (isLive)
+          time = msToString(Date.now() - wallTimeOffset - timeStart);
+        else
+          time = "-";
+      }
+      entries2.push({
+        message: log[i2].message,
+        time
+      });
+    }
+    return entries2;
+  }, [action, isLive]);
+  if (!entries.length)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderPanel, { text: "No log entries" });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    LogList,
+    {
+      name: "log",
+      items: entries,
+      render: (entry) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "log-list-item", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "log-list-duration", children: entry.time }),
+        entry.message
+      ] }),
+      notSelectable: true
+    }
+  );
+};
+const ErrorMessage = ({ error }) => {
+  const html = reactExports.useMemo(() => ansi2html(error), [error]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "error-message", dangerouslySetInnerHTML: { __html: html || "" } });
+};
+function t() {
+  return t = Object.assign ? Object.assign.bind() : function(e) {
+    for (var t2 = 1; t2 < arguments.length; t2++) {
+      var n2 = arguments[t2];
+      for (var r2 in n2) Object.prototype.hasOwnProperty.call(n2, r2) && (e[r2] = n2[r2]);
+    }
+    return e;
+  }, t.apply(this, arguments);
+}
+const n = ["children", "options"], r = { blockQuote: "0", breakLine: "1", breakThematic: "2", codeBlock: "3", codeFenced: "4", codeInline: "5", footnote: "6", footnoteReference: "7", gfmTask: "8", heading: "9", headingSetext: "10", htmlBlock: "11", htmlComment: "12", htmlSelfClosing: "13", image: "14", link: "15", linkAngleBraceStyleDetector: "16", linkBareUrlDetector: "17", linkMailtoDetector: "18", newlineCoalescer: "19", orderedList: "20", paragraph: "21", ref: "22", refImage: "23", refLink: "24", table: "25", text: "27", textBolded: "28", textEmphasized: "29", textEscaped: "30", textMarked: "31", textStrikethroughed: "32", unorderedList: "33" };
+var i;
+!function(e) {
+  e[e.MAX = 0] = "MAX", e[e.HIGH = 1] = "HIGH", e[e.MED = 2] = "MED", e[e.LOW = 3] = "LOW", e[e.MIN = 4] = "MIN";
+}(i || (i = {}));
+const l = ["allowFullScreen", "allowTransparency", "autoComplete", "autoFocus", "autoPlay", "cellPadding", "cellSpacing", "charSet", "classId", "colSpan", "contentEditable", "contextMenu", "crossOrigin", "encType", "formAction", "formEncType", "formMethod", "formNoValidate", "formTarget", "frameBorder", "hrefLang", "inputMode", "keyParams", "keyType", "marginHeight", "marginWidth", "maxLength", "mediaGroup", "minLength", "noValidate", "radioGroup", "readOnly", "rowSpan", "spellCheck", "srcDoc", "srcLang", "srcSet", "tabIndex", "useMap"].reduce((e, t2) => (e[t2.toLowerCase()] = t2, e), { class: "className", for: "htmlFor" }), a = { amp: "&", apos: "'", gt: ">", lt: "<", nbsp: " ", quot: "“" }, o = ["style", "script"], c = /([-A-Z0-9_:]+)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|(?:\{((?:\\.|{[^}]*?}|[^}])*)\})))?/gi, s = /mailto:/i, d = /\n{2,}$/, u = /^(\s*>[\s\S]*?)(?=\n\n|$)/, p = /^ *> ?/gm, f = /^(?:\[!([^\]]*)\]\n)?([\s\S]*)/, h = /^ {2,}\n/, m = /^(?:( *[-*_])){3,} *(?:\n *)+\n/, g = /^(?: {1,3})?(`{3,}|~{3,}) *(\S+)? *([^\n]*?)?\n([\s\S]*?)(?:\1\n?|$)/, y = /^(?: {4}[^\n]+\n*)+(?:\n *)+\n?/, k = /^(`+)((?:\\`|[^`])+)\1/, x = /^(?:\n *)*\n/, b = /\r\n?/g, v = /^\[\^([^\]]+)](:(.*)((\n+ {4,}.*)|(\n(?!\[\^).+))*)/, C = /^\[\^([^\]]+)]/, $ = /\f/g, S = /^---[ \t]*\n(.|\n)*\n---[ \t]*\n/, w = /^\s*?\[(x|\s)\]/, E = /^ *(#{1,6}) *([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/, z = /^ *(#{1,6}) +([^\n]+?)(?: +#*)?(?:\n *)*(?:\n|$)/, L = /^([^\n]+)\n *(=|-){3,} *(?:\n *)+\n/, A = /^ *(?!<[a-z][^ >/]* ?\/>)<([a-z][^ >/]*) ?((?:[^>]*[^/])?)>\n?(\s*(?:<\1[^>]*?>[\s\S]*?<\/\1>|(?!<\1\b)[\s\S])*?)<\/\1>(?!<\/\1>)\n*/i, T = /&([a-z0-9]+|#[0-9]{1,6}|#x[0-9a-fA-F]{1,6});/gi, B = /^<!--[\s\S]*?(?:-->)/, O = /^(data|aria|x)-[a-z_][a-z\d_.-]*$/, M = /^ *<([a-z][a-z0-9:]*)(?:\s+((?:<.*?>|[^>])*))?\/?>(?!<\/\1>)(\s*\n)?/i, R = /^\{.*\}$/, I = /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/, U = /^<([^ >]+@[^ >]+)>/, D = /^<([^ >]+:\/[^ >]+)>/, N = /-([a-z])?/gi, j = /^(\|.*)\n(?: *(\|? *[-:]+ *\|[-| :]*)\n((?:.*\|.*\n)*))?\n?/, H = /^\[([^\]]*)\]:\s+<?([^\s>]+)>?\s*("([^"]*)")?/, P = /^!\[([^\]]*)\] ?\[([^\]]*)\]/, _ = /^\[([^\]]*)\] ?\[([^\]]*)\]/, F = /(\n|^[-*]\s|^#|^ {2,}|^-{2,}|^>\s)/, G = /\t/g, W = /(^ *\||\| *$)/g, Z = /^ *:-+: *$/, q = /^ *:-+ *$/, Q = /^ *-+: *$/, V = "((?:\\[.*?\\][([].*?[)\\]]|<.*?>(?:.*?<.*?>)?|`.*?`|\\\\\\1|[\\s\\S])+?)", X = new RegExp(`^([*_])\\1${V}\\1\\1(?!\\1)`), J = new RegExp(`^([*_])${V}\\1(?!\\1)`), K = new RegExp(`^(==)${V}\\1`), Y = new RegExp(`^(~~)${V}\\1`), ee = /^\\([^0-9A-Za-z\s])/, te = /\\([^0-9A-Za-z\s])/g, ne = /^([\s\S](?:(?!  |[0-9]\.)[^*_~\-\n<`\\\[!])*)/, re = /^\n+/, ie = /^([ \t]*)/, le = /\\([^\\])/g, ae = /(?:^|\n)( *)$/, oe = "(?:\\d+\\.)", ce = "(?:[*+-])";
+function se(e) {
+  return "( *)(" + (1 === e ? oe : ce) + ") +";
+}
+const de = se(1), ue = se(2);
+function pe(e) {
+  return new RegExp("^" + (1 === e ? de : ue));
+}
+const fe = pe(1), he = pe(2);
+function me(e) {
+  return new RegExp("^" + (1 === e ? de : ue) + "[^\\n]*(?:\\n(?!\\1" + (1 === e ? oe : ce) + " )[^\\n]*)*(\\n|$)", "gm");
+}
+const ge = me(1), ye = me(2);
+function ke(e) {
+  const t2 = 1 === e ? oe : ce;
+  return new RegExp("^( *)(" + t2 + ") [\\s\\S]+?(?:\\n{2,}(?! )(?!\\1" + t2 + " (?!" + t2 + " ))\\n*|\\s*\\n*$)");
+}
+const xe = ke(1), be = ke(2);
+function ve(e, t2) {
+  const n2 = 1 === t2, i2 = n2 ? xe : be, l2 = n2 ? ge : ye, a2 = n2 ? fe : he;
+  return { match: Oe(function(e2, t3) {
+    const n3 = ae.exec(t3.prevCapture);
+    return n3 && (t3.list || !t3.inline && !t3.simple) ? i2.exec(e2 = n3[1] + e2) : null;
+  }), order: 1, parse(e2, t3, r2) {
+    const i3 = n2 ? +e2[2] : void 0, o2 = e2[0].replace(d, "\n").match(l2);
+    let c2 = false;
+    return { items: o2.map(function(e3, n3) {
+      const i4 = a2.exec(e3)[0].length, l3 = new RegExp("^ {1," + i4 + "}", "gm"), s2 = e3.replace(l3, "").replace(a2, ""), d2 = n3 === o2.length - 1, u2 = -1 !== s2.indexOf("\n\n") || d2 && c2;
+      c2 = u2;
+      const p2 = r2.inline, f2 = r2.list;
+      let h2;
+      r2.list = true, u2 ? (r2.inline = false, h2 = Ee(s2) + "\n\n") : (r2.inline = true, h2 = Ee(s2));
+      const m2 = t3(h2, r2);
+      return r2.inline = p2, r2.list = f2, m2;
+    }), ordered: n2, start: i3 };
+  }, render: (t3, n3, i3) => e(t3.ordered ? "ol" : "ul", { key: i3.key, start: t3.type === r.orderedList ? t3.start : void 0 }, t3.items.map(function(t4, r2) {
+    return e("li", { key: r2 }, n3(t4, i3));
+  })) };
+}
+const Ce = new RegExp(`^\\[((?:\\[[^\\]]*\\]|[^\\[\\]]|\\](?=[^\\[]*\\]))*)\\]\\(\\s*<?((?:\\([^)]*\\)|[^\\s\\\\]|\\\\.)*?)>?(?:\\s+['"]([\\s\\S]*?)['"])?\\s*\\)`), $e = /^!\[(.*?)\]\( *((?:\([^)]*\)|[^() ])*) *"?([^)"]*)?"?\)/, Se = [u, g, y, E, L, z, j, xe, be], we = [...Se, /^[^\n]+(?:  \n|\n{2,})/, A, B, M];
+function Ee(e) {
+  let t2 = e.length;
+  for (; t2 > 0 && e[t2 - 1] <= " "; ) t2--;
+  return e.slice(0, t2);
+}
+function ze(e) {
+  return e.replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g, "a").replace(/[çÇ]/g, "c").replace(/[ðÐ]/g, "d").replace(/[ÈÉÊËéèêë]/g, "e").replace(/[ÏïÎîÍíÌì]/g, "i").replace(/[Ññ]/g, "n").replace(/[øØœŒÕõÔôÓóÒò]/g, "o").replace(/[ÜüÛûÚúÙù]/g, "u").replace(/[ŸÿÝý]/g, "y").replace(/[^a-z0-9- ]/gi, "").replace(/ /gi, "-").toLowerCase();
+}
+function Le(e) {
+  return Q.test(e) ? "right" : Z.test(e) ? "center" : q.test(e) ? "left" : null;
+}
+function Ae(e, t2, n2, r2) {
+  const i2 = n2.inTable;
+  n2.inTable = true;
+  let l2 = [[]], a2 = "";
+  function o2() {
+    if (!a2) return;
+    const e2 = l2[l2.length - 1];
+    e2.push.apply(e2, t2(a2, n2)), a2 = "";
+  }
+  return e.trim().split(/(`[^`]*`|\\\||\|)/).filter(Boolean).forEach((e2, t3, n3) => {
+    "|" === e2.trim() && (o2(), r2) ? 0 !== t3 && t3 !== n3.length - 1 && l2.push([]) : a2 += e2;
+  }), o2(), n2.inTable = i2, l2;
+}
+function Te(e, t2, n2) {
+  n2.inline = true;
+  const i2 = e[2] ? e[2].replace(W, "").split("|").map(Le) : [], l2 = e[3] ? function(e2, t3, n3) {
+    return e2.trim().split("\n").map(function(e3) {
+      return Ae(e3, t3, n3, true);
+    });
+  }(e[3], t2, n2) : [], a2 = Ae(e[1], t2, n2, !!l2.length);
+  return n2.inline = false, l2.length ? { align: i2, cells: l2, header: a2, type: r.table } : { children: a2, type: r.paragraph };
+}
+function Be(e, t2) {
+  return null == e.align[t2] ? {} : { textAlign: e.align[t2] };
+}
+function Oe(e) {
+  return e.inline = 1, e;
+}
+function Me(e) {
+  return Oe(function(t2, n2) {
+    return n2.inline ? e.exec(t2) : null;
+  });
+}
+function Re(e) {
+  return Oe(function(t2, n2) {
+    return n2.inline || n2.simple ? e.exec(t2) : null;
+  });
+}
+function Ie(e) {
+  return function(t2, n2) {
+    return n2.inline || n2.simple ? null : e.exec(t2);
+  };
+}
+function Ue(e) {
+  return Oe(function(t2) {
+    return e.exec(t2);
+  });
+}
+function De(e, t2) {
+  if (t2.inline || t2.simple) return null;
+  let n2 = "";
+  e.split("\n").every((e2) => (e2 += "\n", !Se.some((t3) => t3.test(e2)) && (n2 += e2, !!e2.trim())));
+  const r2 = Ee(n2);
+  return "" == r2 ? null : [n2, , r2];
+}
+function Ne(e) {
+  try {
+    if (decodeURIComponent(e).replace(/[^A-Za-z0-9/:]/g, "").match(/^\s*(javascript|vbscript|data(?!:image)):/i)) return null;
+  } catch (e2) {
+    return null;
+  }
+  return e;
+}
+function je(e) {
+  return e.replace(le, "$1");
+}
+function He(e, t2, n2) {
+  const r2 = n2.inline || false, i2 = n2.simple || false;
+  n2.inline = true, n2.simple = true;
+  const l2 = e(t2, n2);
+  return n2.inline = r2, n2.simple = i2, l2;
+}
+function Pe(e, t2, n2) {
+  const r2 = n2.inline || false, i2 = n2.simple || false;
+  n2.inline = false, n2.simple = true;
+  const l2 = e(t2, n2);
+  return n2.inline = r2, n2.simple = i2, l2;
+}
+function _e(e, t2, n2) {
+  const r2 = n2.inline || false;
+  n2.inline = false;
+  const i2 = e(t2, n2);
+  return n2.inline = r2, i2;
+}
+const Fe = (e, t2, n2) => ({ children: He(t2, e[2], n2) });
+function Ge() {
+  return {};
+}
+function We() {
+  return null;
+}
+function Ze(...e) {
+  return e.filter(Boolean).join(" ");
+}
+function qe(e, t2, n2) {
+  let r2 = e;
+  const i2 = t2.split(".");
+  for (; i2.length && (r2 = r2[i2[0]], void 0 !== r2); ) i2.shift();
+  return r2 || n2;
+}
+function Qe(n2 = "", i2 = {}) {
+  function d2(e, n3, ...r2) {
+    const l2 = qe(i2.overrides, `${e}.props`, {});
+    return i2.createElement(function(e2, t2) {
+      const n4 = qe(t2, e2);
+      return n4 ? "function" == typeof n4 || "object" == typeof n4 && "render" in n4 ? n4 : qe(t2, `${e2}.component`, e2) : e2;
+    }(e, i2.overrides), t({}, n3, l2, { className: Ze(null == n3 ? void 0 : n3.className, l2.className) || void 0 }), ...r2);
+  }
+  function W2(e) {
+    e = e.replace(S, "");
+    let t2 = false;
+    i2.forceInline ? t2 = true : i2.forceBlock || (t2 = false === F.test(e));
+    const n3 = ae2(le2(t2 ? e : `${Ee(e).replace(re, "")}
+
+`, { inline: t2 }));
+    for (; "string" == typeof n3[n3.length - 1] && !n3[n3.length - 1].trim(); ) n3.pop();
+    if (null === i2.wrapper) return n3;
+    const r2 = i2.wrapper || (t2 ? "span" : "div");
+    let l2;
+    if (n3.length > 1 || i2.forceWrapper) l2 = n3;
+    else {
+      if (1 === n3.length) return l2 = n3[0], "string" == typeof l2 ? d2("span", { key: "outer" }, l2) : l2;
+      l2 = null;
+    }
+    return i2.createElement(r2, { key: "outer" }, l2);
+  }
+  function Z2(e, t2) {
+    const n3 = t2.match(c);
+    return n3 ? n3.reduce(function(t3, n4) {
+      const r2 = n4.indexOf("=");
+      if (-1 !== r2) {
+        const a2 = function(e2) {
+          return -1 !== e2.indexOf("-") && null === e2.match(O) && (e2 = e2.replace(N, function(e3, t4) {
+            return t4.toUpperCase();
+          })), e2;
+        }(n4.slice(0, r2)).trim(), o2 = function(e2) {
+          const t4 = e2[0];
+          return ('"' === t4 || "'" === t4) && e2.length >= 2 && e2[e2.length - 1] === t4 ? e2.slice(1, -1) : e2;
+        }(n4.slice(r2 + 1).trim()), c2 = l[a2] || a2;
+        if ("ref" === c2) return t3;
+        const s2 = t3[c2] = function(e2, t4, n5, r3) {
+          return "style" === t4 ? n5.split(/;\s?/).reduce(function(e3, t5) {
+            const n6 = t5.slice(0, t5.indexOf(":"));
+            return e3[n6.trim().replace(/(-[a-z])/g, (e4) => e4[1].toUpperCase())] = t5.slice(n6.length + 1).trim(), e3;
+          }, {}) : "href" === t4 || "src" === t4 ? r3(n5, e2, t4) : (n5.match(R) && (n5 = n5.slice(1, n5.length - 1)), "true" === n5 || "false" !== n5 && n5);
+        }(e, a2, o2, i2.sanitizer);
+        "string" == typeof s2 && (A.test(s2) || M.test(s2)) && (t3[c2] = W2(s2.trim()));
+      } else "style" !== n4 && (t3[l[n4] || n4] = true);
+      return t3;
+    }, {}) : null;
+  }
+  i2.overrides = i2.overrides || {}, i2.sanitizer = i2.sanitizer || Ne, i2.slugify = i2.slugify || ze, i2.namedCodesToUnicode = i2.namedCodesToUnicode ? t({}, a, i2.namedCodesToUnicode) : a, i2.createElement = i2.createElement || reactExports.createElement;
+  const q2 = [], Q2 = {}, V2 = { [r.blockQuote]: { match: Ie(u), order: 1, parse(e, t2, n3) {
+    const [, r2, i3] = e[0].replace(p, "").match(f);
+    return { alert: r2, children: t2(i3, n3) };
+  }, render(e, t2, n3) {
+    const l2 = { key: n3.key };
+    return e.alert && (l2.className = "markdown-alert-" + i2.slugify(e.alert.toLowerCase(), ze), e.children.unshift({ attrs: {}, children: [{ type: r.text, text: e.alert }], noInnerParse: true, type: r.htmlBlock, tag: "header" })), d2("blockquote", l2, t2(e.children, n3));
+  } }, [r.breakLine]: { match: Ue(h), order: 1, parse: Ge, render: (e, t2, n3) => d2("br", { key: n3.key }) }, [r.breakThematic]: { match: Ie(m), order: 1, parse: Ge, render: (e, t2, n3) => d2("hr", { key: n3.key }) }, [r.codeBlock]: { match: Ie(y), order: 0, parse: (e) => ({ lang: void 0, text: Ee(e[0].replace(/^ {4}/gm, "")).replace(te, "$1") }), render: (e, n3, r2) => d2("pre", { key: r2.key }, d2("code", t({}, e.attrs, { className: e.lang ? `lang-${e.lang}` : "" }), e.text)) }, [r.codeFenced]: { match: Ie(g), order: 0, parse: (e) => ({ attrs: Z2("code", e[3] || ""), lang: e[2] || void 0, text: e[4].replace(te, "$1"), type: r.codeBlock }) }, [r.codeInline]: { match: Re(k), order: 3, parse: (e) => ({ text: e[2].replace(te, "$1") }), render: (e, t2, n3) => d2("code", { key: n3.key }, e.text) }, [r.footnote]: { match: Ie(v), order: 0, parse: (e) => (q2.push({ footnote: e[2], identifier: e[1] }), {}), render: We }, [r.footnoteReference]: { match: Me(C), order: 1, parse: (e) => ({ target: `#${i2.slugify(e[1], ze)}`, text: e[1] }), render: (e, t2, n3) => d2("a", { key: n3.key, href: i2.sanitizer(e.target, "a", "href") }, d2("sup", { key: n3.key }, e.text)) }, [r.gfmTask]: { match: Me(w), order: 1, parse: (e) => ({ completed: "x" === e[1].toLowerCase() }), render: (e, t2, n3) => d2("input", { checked: e.completed, key: n3.key, readOnly: true, type: "checkbox" }) }, [r.heading]: { match: Ie(i2.enforceAtxHeadings ? z : E), order: 1, parse: (e, t2, n3) => ({ children: He(t2, e[2], n3), id: i2.slugify(e[2], ze), level: e[1].length }), render: (e, t2, n3) => d2(`h${e.level}`, { id: e.id, key: n3.key }, t2(e.children, n3)) }, [r.headingSetext]: { match: Ie(L), order: 0, parse: (e, t2, n3) => ({ children: He(t2, e[1], n3), level: "=" === e[2] ? 1 : 2, type: r.heading }) }, [r.htmlBlock]: { match: Ue(A), order: 1, parse(e, t2, n3) {
+    const [, r2] = e[3].match(ie), i3 = new RegExp(`^${r2}`, "gm"), l2 = e[3].replace(i3, ""), a2 = (c2 = l2, we.some((e2) => e2.test(c2)) ? _e : He);
+    var c2;
+    const s2 = e[1].toLowerCase(), d3 = -1 !== o.indexOf(s2), u2 = (d3 ? s2 : e[1]).trim(), p2 = { attrs: Z2(u2, e[2]), noInnerParse: d3, tag: u2 };
+    return n3.inAnchor = n3.inAnchor || "a" === s2, d3 ? p2.text = e[3] : p2.children = a2(t2, l2, n3), n3.inAnchor = false, p2;
+  }, render: (e, n3, r2) => d2(e.tag, t({ key: r2.key }, e.attrs), e.text || (e.children ? n3(e.children, r2) : "")) }, [r.htmlSelfClosing]: { match: Ue(M), order: 1, parse(e) {
+    const t2 = e[1].trim();
+    return { attrs: Z2(t2, e[2] || ""), tag: t2 };
+  }, render: (e, n3, r2) => d2(e.tag, t({}, e.attrs, { key: r2.key })) }, [r.htmlComment]: { match: Ue(B), order: 1, parse: () => ({}), render: We }, [r.image]: { match: Re($e), order: 1, parse: (e) => ({ alt: e[1], target: je(e[2]), title: e[3] }), render: (e, t2, n3) => d2("img", { key: n3.key, alt: e.alt || void 0, title: e.title || void 0, src: i2.sanitizer(e.target, "img", "src") }) }, [r.link]: { match: Me(Ce), order: 3, parse: (e, t2, n3) => ({ children: Pe(t2, e[1], n3), target: je(e[2]), title: e[3] }), render: (e, t2, n3) => d2("a", { key: n3.key, href: i2.sanitizer(e.target, "a", "href"), title: e.title }, t2(e.children, n3)) }, [r.linkAngleBraceStyleDetector]: { match: Me(D), order: 0, parse: (e) => ({ children: [{ text: e[1], type: r.text }], target: e[1], type: r.link }) }, [r.linkBareUrlDetector]: { match: Oe((e, t2) => t2.inAnchor || i2.disableAutoLink ? null : Me(I)(e, t2)), order: 0, parse: (e) => ({ children: [{ text: e[1], type: r.text }], target: e[1], title: void 0, type: r.link }) }, [r.linkMailtoDetector]: { match: Me(U), order: 0, parse(e) {
+    let t2 = e[1], n3 = e[1];
+    return s.test(n3) || (n3 = "mailto:" + n3), { children: [{ text: t2.replace("mailto:", ""), type: r.text }], target: n3, type: r.link };
+  } }, [r.orderedList]: ve(d2, 1), [r.unorderedList]: ve(d2, 2), [r.newlineCoalescer]: { match: Ie(x), order: 3, parse: Ge, render: () => "\n" }, [r.paragraph]: { match: Oe(De), order: 3, parse: Fe, render: (e, t2, n3) => d2("p", { key: n3.key }, t2(e.children, n3)) }, [r.ref]: { match: Me(H), order: 0, parse: (e) => (Q2[e[1]] = { target: e[2], title: e[4] }, {}), render: We }, [r.refImage]: { match: Re(P), order: 0, parse: (e) => ({ alt: e[1] || void 0, ref: e[2] }), render: (e, t2, n3) => Q2[e.ref] ? d2("img", { key: n3.key, alt: e.alt, src: i2.sanitizer(Q2[e.ref].target, "img", "src"), title: Q2[e.ref].title }) : null }, [r.refLink]: { match: Me(_), order: 0, parse: (e, t2, n3) => ({ children: t2(e[1], n3), fallbackChildren: e[0], ref: e[2] }), render: (e, t2, n3) => Q2[e.ref] ? d2("a", { key: n3.key, href: i2.sanitizer(Q2[e.ref].target, "a", "href"), title: Q2[e.ref].title }, t2(e.children, n3)) : d2("span", { key: n3.key }, e.fallbackChildren) }, [r.table]: { match: Ie(j), order: 1, parse: Te, render(e, t2, n3) {
+    const r2 = e;
+    return d2("table", { key: n3.key }, d2("thead", null, d2("tr", null, r2.header.map(function(e2, i3) {
+      return d2("th", { key: i3, style: Be(r2, i3) }, t2(e2, n3));
+    }))), d2("tbody", null, r2.cells.map(function(e2, i3) {
+      return d2("tr", { key: i3 }, e2.map(function(e3, i4) {
+        return d2("td", { key: i4, style: Be(r2, i4) }, t2(e3, n3));
+      }));
+    })));
+  } }, [r.text]: { match: Ue(ne), order: 4, parse: (e) => ({ text: e[0].replace(T, (e2, t2) => i2.namedCodesToUnicode[t2] ? i2.namedCodesToUnicode[t2] : e2) }), render: (e) => e.text }, [r.textBolded]: { match: Re(X), order: 2, parse: (e, t2, n3) => ({ children: t2(e[2], n3) }), render: (e, t2, n3) => d2("strong", { key: n3.key }, t2(e.children, n3)) }, [r.textEmphasized]: { match: Re(J), order: 3, parse: (e, t2, n3) => ({ children: t2(e[2], n3) }), render: (e, t2, n3) => d2("em", { key: n3.key }, t2(e.children, n3)) }, [r.textEscaped]: { match: Re(ee), order: 1, parse: (e) => ({ text: e[1], type: r.text }) }, [r.textMarked]: { match: Re(K), order: 3, parse: Fe, render: (e, t2, n3) => d2("mark", { key: n3.key }, t2(e.children, n3)) }, [r.textStrikethroughed]: { match: Re(Y), order: 3, parse: Fe, render: (e, t2, n3) => d2("del", { key: n3.key }, t2(e.children, n3)) } };
+  true === i2.disableParsingRawHTML && (delete V2[r.htmlBlock], delete V2[r.htmlSelfClosing]);
+  const le2 = function(e) {
+    let t2 = Object.keys(e);
+    function n3(r2, i3) {
+      let l2, a2, o2 = [], c2 = "", s2 = "";
+      for (i3.prevCapture = i3.prevCapture || ""; r2; ) {
+        let d3 = 0;
+        for (; d3 < t2.length; ) {
+          if (c2 = t2[d3], l2 = e[c2], i3.inline && !l2.match.inline) {
+            d3++;
+            continue;
+          }
+          const u2 = l2.match(r2, i3);
+          if (u2) {
+            s2 = u2[0], i3.prevCapture += s2, r2 = r2.substring(s2.length), a2 = l2.parse(u2, n3, i3), null == a2.type && (a2.type = c2), o2.push(a2);
+            break;
+          }
+          d3++;
+        }
+      }
+      return i3.prevCapture = "", o2;
+    }
+    return t2.sort(function(t3, n4) {
+      let r2 = e[t3].order, i3 = e[n4].order;
+      return r2 !== i3 ? r2 - i3 : t3 < n4 ? -1 : 1;
+    }), function(e2, t3) {
+      return n3(function(e3) {
+        return e3.replace(b, "\n").replace($, "").replace(G, "    ");
+      }(e2), t3);
+    };
+  }(V2), ae2 = (oe2 = /* @__PURE__ */ function(e, t2) {
+    return function(n3, r2, i3) {
+      const l2 = e[n3.type].render;
+      return t2 ? t2(() => l2(n3, r2, i3), n3, r2, i3) : l2(n3, r2, i3);
+    };
+  }(V2, i2.renderRule), function e(t2, n3 = {}) {
+    if (Array.isArray(t2)) {
+      const r2 = n3.key, i3 = [];
+      let l2 = false;
+      for (let r3 = 0; r3 < t2.length; r3++) {
+        n3.key = r3;
+        const a2 = e(t2[r3], n3), o2 = "string" == typeof a2;
+        o2 && l2 ? i3[i3.length - 1] += a2 : null !== a2 && i3.push(a2), l2 = o2;
+      }
+      return n3.key = r2, i3;
+    }
+    return oe2(t2, e, n3);
+  });
+  var oe2;
+  const ce2 = W2(n2);
+  return q2.length ? d2("div", null, ce2, d2("footer", { key: "footer" }, q2.map(function(e) {
+    return d2("div", { id: i2.slugify(e.identifier, ze), key: e.identifier }, e.identifier, ae2(le2(e.footnote, { inline: true })));
+  }))) : ce2;
+}
+const Markdown = (t2) => {
+  let { children: r2 = "", options: i2 } = t2, l2 = function(e, t3) {
+    if (null == e) return {};
+    var n2, r3, i3 = {}, l3 = Object.keys(e);
+    for (r3 = 0; r3 < l3.length; r3++) t3.indexOf(n2 = l3[r3]) >= 0 || (i3[n2] = e[n2]);
+    return i3;
+  }(t2, n);
+  return reactExports.cloneElement(Qe(r2, i2), l2);
+};
+var Disposable;
+((Disposable2) => {
+  function disposeAll(disposables) {
+    for (const disposable of disposables.splice(0))
+      disposable.dispose();
+  }
+  Disposable2.disposeAll = disposeAll;
+})(Disposable || (Disposable = {}));
+class EventEmitter {
+  constructor() {
+    this._listeners = /* @__PURE__ */ new Set();
+    this.event = (listener, disposables) => {
+      this._listeners.add(listener);
+      let disposed = false;
+      const self = this;
+      const result = {
+        dispose() {
+          if (!disposed) {
+            disposed = true;
+            self._listeners.delete(listener);
+          }
+        }
+      };
+      if (disposables)
+        disposables.push(result);
+      return result;
+    };
+  }
+  fire(event) {
+    const dispatch = !this._deliveryQueue;
+    if (!this._deliveryQueue)
+      this._deliveryQueue = [];
+    for (const listener of this._listeners)
+      this._deliveryQueue.push({ listener, event });
+    if (!dispatch)
+      return;
+    for (let index = 0; index < this._deliveryQueue.length; index++) {
+      const { listener, event: event2 } = this._deliveryQueue[index];
+      listener.call(null, event2);
+    }
+    this._deliveryQueue = void 0;
+  }
+  dispose() {
+    this._listeners.clear();
+    if (this._deliveryQueue)
+      this._deliveryQueue = [];
+  }
+}
+async function* parseSSE(body) {
+  const reader = body.pipeThrough(new TextDecoderStream()).getReader();
+  let buffer = "";
+  let lastEventId = "";
+  let type = "";
+  let data = "";
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done)
+      break;
+    buffer += value;
+    const lines = buffer.split("\n");
+    buffer = lines.pop();
+    for (const line of lines) {
+      if (line.length === 0) {
+        if (data === "") {
+          data = "";
+          type = "";
+          continue;
+        }
+        if (data[data.length - 1] === "\n")
+          data = data.substring(0, data.length - 1);
+        const event = { type: type || "message", data, id: lastEventId };
+        type = "";
+        data = "";
+        yield event;
+      }
+      if (line[0] === ":")
+        continue;
+      let name = "";
+      let value2 = "";
+      const colon = line.indexOf(":");
+      if (colon === -1) {
+        name = line;
+      } else {
+        name = line.substring(0, colon);
+        value2 = line[colon + 1] === " " ? line.substring(colon + 2) : line.substring(colon + 1);
+      }
+      switch (name) {
+        case "event":
+          type = value2;
+          break;
+        case "data":
+          data += value2 + "\n";
+          break;
+        case "id":
+          lastEventId = value2;
+          break;
+      }
+    }
+  }
+}
+class OpenAI {
+  constructor(apiKey, baseURL = "https://api.openai.com") {
+    __publicField(this, "name", "OpenAI");
+    this.apiKey = apiKey;
+    this.baseURL = baseURL;
+  }
+  async *chatCompletion(messages, signal) {
+    const url = new URL("./v1/chat/completions", this.baseURL);
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": `Bearer ${this.apiKey}`,
+        "x-pw-serviceworker": "forward"
+      },
+      body: JSON.stringify({
+        model: "gpt-4o",
+        // TODO: make configurable
+        messages: messages.map(({ role, content }) => ({ role, content })),
+        stream: true
+      }),
+      signal
+    });
+    if (response.status !== 200 || !response.body)
+      throw new Error("Failed to chat with OpenAI, unexpected status: " + response.status + await response.text());
+    for await (const sseEvent of parseSSE(response.body)) {
+      const event = JSON.parse(sseEvent.data);
+      if (event.object === "chat.completion.chunk") {
+        if (event.choices[0].finish_reason)
+          break;
+        yield event.choices[0].delta.content;
+      }
+    }
+  }
+}
+class Anthropic {
+  constructor(apiKey, baseURL = "https://api.anthropic.com") {
+    __publicField(this, "name", "Anthropic");
+    this.apiKey = apiKey;
+    this.baseURL = baseURL;
+  }
+  async *chatCompletion(messages, signal) {
+    var _a;
+    const response = await fetch(new URL("./v1/messages", this.baseURL), {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": this.apiKey,
+        "anthropic-version": "2023-06-01",
+        "x-pw-serviceworker": "forward"
+      },
+      body: JSON.stringify({
+        model: "claude-3-5-sonnet-20241022",
+        // TODO: make configurable
+        messages: messages.filter(({ role }) => role !== "developer").map(({ role, content }) => ({ role, content })),
+        system: (_a = messages.find(({ role }) => role === "developer")) == null ? void 0 : _a.content,
+        max_tokens: 1024,
+        stream: true
+      }),
+      signal
+    });
+    if (response.status !== 200 || !response.body)
+      throw new Error("Failed to chat with Anthropic, unexpected status: " + response.status + await response.text());
+    for await (const sseEvent of parseSSE(response.body)) {
+      const event = JSON.parse(sseEvent.data);
+      if (event.type === "content_block_delta")
+        yield event.delta.text;
+    }
+  }
+}
+class LLMChat {
+  constructor(api) {
+    __publicField(this, "conversations", /* @__PURE__ */ new Map());
+    this.api = api;
+  }
+  getConversation(id) {
+    return this.conversations.get(id);
+  }
+  startConversation(id, systemPrompt) {
+    const conversation = new Conversation(this, systemPrompt);
+    this.conversations.set(id, conversation);
+    return conversation;
+  }
+}
+class Conversation {
+  constructor(chat, systemPrompt) {
+    __publicField(this, "history");
+    __publicField(this, "onChange", new EventEmitter());
+    __publicField(this, "_abortControllers", /* @__PURE__ */ new Set());
+    this.chat = chat;
+    this.history = [{ role: "developer", content: systemPrompt }];
+  }
+  async send(content, displayContent) {
+    const response = { role: "assistant", content: "" };
+    this.history.push({ role: "user", content, displayContent }, response);
+    const abortController = new AbortController();
+    this._abortControllers.add(abortController);
+    this.onChange.fire();
+    try {
+      for await (const chunk of this.chat.api.chatCompletion(this.history, abortController.signal)) {
+        response.content += chunk;
+        this.onChange.fire();
+      }
+    } finally {
+      this._abortControllers.delete(abortController);
+      this.onChange.fire();
+    }
+  }
+  isSending() {
+    return this._abortControllers.size > 0;
+  }
+  abortSending() {
+    for (const controller of this._abortControllers)
+      controller.abort();
+    this._abortControllers.clear();
+    this.onChange.fire();
+  }
+  isEmpty() {
+    return this.history.length < 2;
+  }
+}
+const llmContext = reactExports.createContext(void 0);
+function LLMProvider({ children }) {
+  const cookiePairs = useCookies();
+  const chat = reactExports.useMemo(() => {
+    const cookies = Object.fromEntries(cookiePairs);
+    if (cookies.openai_api_key)
+      return new LLMChat(new OpenAI(cookies.openai_api_key, cookies.openai_base_url));
+    if (cookies.anthropic_api_key)
+      return new LLMChat(new Anthropic(cookies.anthropic_api_key, cookies.anthropic_base_url));
+  }, [cookiePairs]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(llmContext.Provider, { value: chat, children });
+}
+function useLLMChat() {
+  const chat = reactExports.useContext(llmContext);
+  if (!chat)
+    throw new Error("No LLM chat available, make sure theres a LLMProvider above");
+  return chat;
+}
+function useIsLLMAvailable() {
+  return !!reactExports.useContext(llmContext);
+}
+function useLLMConversation(id) {
+  const conversation = useLLMChat().getConversation(id);
+  if (!conversation)
+    throw new Error("No conversation found for id: " + id);
+  const [history, setHistory] = reactExports.useState(conversation.history);
+  reactExports.useEffect(() => {
+    function update() {
+      setHistory([...conversation.history]);
+    }
+    update();
+    const subscription = conversation.onChange.event(update);
+    return subscription.dispose;
+  }, [conversation]);
+  return [history, conversation];
+}
+function AIConversation({ conversationId }) {
+  const [history, conversation] = useLLMConversation(conversationId);
+  const [input, setInput] = reactExports.useState("");
+  const onSubmit = reactExports.useCallback(() => {
+    setInput((content) => {
+      conversation.send(content);
+      return "";
+    });
+  }, [conversation]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "chat-container", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "chat-disclaimer", children: [
+      "Chat based on ",
+      conversation.chat.api.name,
+      ". Check for mistakes."
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("hr", {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "messages-container", children: history.filter(({ role }) => role !== "developer").map((message, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: clsx("message", message.role === "user" && "user-message"),
+        children: [
+          message.role === "assistant" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "message-icon", children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: "playwright-logo.svg" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "message-content", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Markdown, { options: { disableParsingRawHTML: true }, children: message.displayContent ?? message.content }) })
+        ]
+      },
+      "" + index
+    )) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "input-form", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "textarea",
+        {
+          name: "content",
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              onSubmit();
+            }
+          },
+          placeholder: "Ask a question...",
+          className: "message-input"
+        }
+      ),
+      conversation.isSending() ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "send-button", onClick: (evt) => {
+        evt.preventDefault();
+        conversation.abortSending();
+      }, children: "Cancel" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "send-button", disabled: !input.trim(), onClick: onSubmit, children: "Send" })
+    ] })
+  ] });
+}
+async function loadImage(src) {
+  const image = new Image();
+  if (src) {
+    image.src = src;
+    await new Promise((f2, r2) => {
+      image.onload = f2;
+      image.onerror = f2;
+    });
+  }
+  return image;
+}
+const checkerboardStyle = {
+  backgroundImage: `linear-gradient(45deg, #80808020 25%, transparent 25%),
+                    linear-gradient(-45deg, #80808020 25%, transparent 25%),
+                    linear-gradient(45deg, transparent 75%, #80808020 75%),
+                    linear-gradient(-45deg, transparent 75%, #80808020 75%)`,
+  backgroundSize: "20px 20px",
+  backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+  boxShadow: `rgb(0 0 0 / 10%) 0px 1.8px 1.9px,
+              rgb(0 0 0 / 15%) 0px 6.1px 6.3px,
+              rgb(0 0 0 / 10%) 0px -2px 4px,
+              rgb(0 0 0 / 15%) 0px -6.1px 12px,
+              rgb(0 0 0 / 25%) 0px 6px 12px`
+};
+const ImageDiffView = ({ diff, noTargetBlank, hideDetails }) => {
+  const [mode, setMode] = reactExports.useState(diff.diff ? "diff" : "actual");
+  const [showSxsDiff, setShowSxsDiff] = reactExports.useState(false);
+  const [expectedImage, setExpectedImage] = reactExports.useState(null);
+  const [expectedImageTitle, setExpectedImageTitle] = reactExports.useState("Expected");
+  const [actualImage, setActualImage] = reactExports.useState(null);
+  const [diffImage, setDiffImage] = reactExports.useState(null);
+  const [measure, ref] = useMeasure();
+  reactExports.useEffect(() => {
+    (async () => {
+      var _a, _b, _c, _d;
+      setExpectedImage(await loadImage((_a = diff.expected) == null ? void 0 : _a.attachment.path));
+      setExpectedImageTitle(((_b = diff.expected) == null ? void 0 : _b.title) || "Expected");
+      setActualImage(await loadImage((_c = diff.actual) == null ? void 0 : _c.attachment.path));
+      setDiffImage(await loadImage((_d = diff.diff) == null ? void 0 : _d.attachment.path));
+    })();
+  }, [diff]);
+  const isLoaded = expectedImage && actualImage && diffImage;
+  const imageWidth = isLoaded ? Math.max(expectedImage.naturalWidth, actualImage.naturalWidth, 200) : 500;
+  const imageHeight = isLoaded ? Math.max(expectedImage.naturalHeight, actualImage.naturalHeight, 200) : 500;
+  const scale = Math.min(1, (measure.width - 30) / imageWidth);
+  const sxsScale = Math.min(1, (measure.width - 50) / imageWidth / 2);
+  const fitWidth = imageWidth * scale;
+  const fitHeight = imageHeight * scale;
+  const modeStyle = {
+    flex: "none",
+    margin: "0 10px",
+    cursor: "pointer",
+    userSelect: "none"
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-testid": "test-result-image-mismatch", style: { display: "flex", flexDirection: "column", alignItems: "center", flex: "auto" }, ref, children: isLoaded && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-testid": "test-result-image-mismatch-tabs", style: { display: "flex", margin: "10px 0 20px" }, children: [
+      diff.diff && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...modeStyle, fontWeight: mode === "diff" ? 600 : "initial" }, onClick: () => setMode("diff"), children: "Diff" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...modeStyle, fontWeight: mode === "actual" ? 600 : "initial" }, onClick: () => setMode("actual"), children: "Actual" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...modeStyle, fontWeight: mode === "expected" ? 600 : "initial" }, onClick: () => setMode("expected"), children: expectedImageTitle }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...modeStyle, fontWeight: mode === "sxs" ? 600 : "initial" }, onClick: () => setMode("sxs"), children: "Side by side" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...modeStyle, fontWeight: mode === "slider" ? 600 : "initial" }, onClick: () => setMode("slider"), children: "Slider" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", justifyContent: "center", flex: "auto", minHeight: fitHeight + 60 }, children: [
+      diff.diff && mode === "diff" && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: diffImage, alt: "Diff", hideSize: hideDetails, canvasWidth: fitWidth, canvasHeight: fitHeight, scale }),
+      diff.diff && mode === "actual" && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: actualImage, alt: "Actual", hideSize: hideDetails, canvasWidth: fitWidth, canvasHeight: fitHeight, scale }),
+      diff.diff && mode === "expected" && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: expectedImage, alt: expectedImageTitle, hideSize: hideDetails, canvasWidth: fitWidth, canvasHeight: fitHeight, scale }),
+      diff.diff && mode === "slider" && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageDiffSlider, { expectedImage, actualImage, hideSize: hideDetails, canvasWidth: fitWidth, canvasHeight: fitHeight, scale, expectedTitle: expectedImageTitle }),
+      diff.diff && mode === "sxs" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: expectedImage, title: expectedImageTitle, hideSize: hideDetails, canvasWidth: sxsScale * imageWidth, canvasHeight: sxsScale * imageHeight, scale: sxsScale }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: showSxsDiff ? diffImage : actualImage, title: showSxsDiff ? "Diff" : "Actual", onClick: () => setShowSxsDiff(!showSxsDiff), hideSize: hideDetails, canvasWidth: sxsScale * imageWidth, canvasHeight: sxsScale * imageHeight, scale: sxsScale })
+      ] }),
+      !diff.diff && mode === "actual" && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: actualImage, title: "Actual", hideSize: hideDetails, canvasWidth: fitWidth, canvasHeight: fitHeight, scale }),
+      !diff.diff && mode === "expected" && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: expectedImage, title: expectedImageTitle, hideSize: hideDetails, canvasWidth: fitWidth, canvasHeight: fitHeight, scale }),
+      !diff.diff && mode === "sxs" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: expectedImage, title: expectedImageTitle, canvasWidth: sxsScale * imageWidth, canvasHeight: sxsScale * imageHeight, scale: sxsScale }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: actualImage, title: "Actual", canvasWidth: sxsScale * imageWidth, canvasHeight: sxsScale * imageHeight, scale: sxsScale })
+      ] })
+    ] }),
+    !hideDetails && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { alignSelf: "start", lineHeight: "18px", marginLeft: "15px" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: diff.diff && /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: "_blank", href: diff.diff.attachment.path, rel: "noreferrer", children: diff.diff.attachment.name }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: noTargetBlank ? "" : "_blank", href: diff.actual.attachment.path, rel: "noreferrer", children: diff.actual.attachment.name }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: noTargetBlank ? "" : "_blank", href: diff.expected.attachment.path, rel: "noreferrer", children: diff.expected.attachment.name }) })
+    ] })
+  ] }) });
+};
+const ImageDiffSlider = ({ expectedImage, actualImage, canvasWidth, canvasHeight, scale, expectedTitle, hideSize }) => {
+  const absoluteStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0
+  };
+  const [slider, setSlider] = reactExports.useState(canvasWidth / 2);
+  const sameSize = expectedImage.naturalWidth === actualImage.naturalWidth && expectedImage.naturalHeight === actualImage.naturalHeight;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: "none", display: "flex", alignItems: "center", flexDirection: "column", userSelect: "none" }, children: [
+    !hideSize && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { margin: 5 }, children: [
+      !sameSize && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { flex: "none", margin: "0 5px" }, children: "Expected " }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: expectedImage.naturalWidth }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { flex: "none", margin: "0 5px" }, children: "x" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: expectedImage.naturalHeight }),
+      !sameSize && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { flex: "none", margin: "0 5px 0 15px" }, children: "Actual " }),
+      !sameSize && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: actualImage.naturalWidth }),
+      !sameSize && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { flex: "none", margin: "0 5px" }, children: "x" }),
+      !sameSize && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: actualImage.naturalHeight })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "relative", width: canvasWidth, height: canvasHeight, margin: 15, ...checkerboardStyle }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ResizeView,
+        {
+          orientation: "horizontal",
+          offsets: [slider],
+          setOffsets: (offsets) => setSlider(offsets[0]),
+          resizerColor: "#57606a80",
+          resizerWidth: 6
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("img", { alt: expectedTitle, style: {
+        width: expectedImage.naturalWidth * scale,
+        height: expectedImage.naturalHeight * scale
+      }, draggable: "false", src: expectedImage.src }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...absoluteStyle, bottom: 0, overflow: "hidden", width: slider, ...checkerboardStyle }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { alt: "Actual", style: {
+        width: actualImage.naturalWidth * scale,
+        height: actualImage.naturalHeight * scale
+      }, draggable: "false", src: actualImage.src }) })
+    ] })
+  ] });
+};
+const ImageWithSize = ({ image, title, alt, hideSize, canvasWidth, canvasHeight, scale, onClick }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: "none", display: "flex", alignItems: "center", flexDirection: "column" }, children: [
+    !hideSize && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { margin: 5 }, children: [
+      title && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { flex: "none", margin: "0 5px" }, children: title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: image.naturalWidth }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { flex: "none", margin: "0 5px" }, children: "x" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: image.naturalHeight })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { display: "flex", flex: "none", width: canvasWidth, height: canvasHeight, margin: 15, ...checkerboardStyle }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        width: image.naturalWidth * scale,
+        height: image.naturalHeight * scale,
+        alt: title || alt,
+        style: { cursor: onClick ? "pointer" : "initial" },
+        draggable: "false",
+        src: image.src,
+        onClick
+      }
+    ) })
+  ] });
+};
+function isTextualMimeType(mimeType) {
+  return !!mimeType.match(/^(text\/.*?|application\/(json|(x-)?javascript|xml.*?|ecmascript|graphql|x-www-form-urlencoded)|image\/svg(\+xml)?|application\/.*?(\+json|\+xml))(;\s*charset=.*)?$/);
+}
+const Expandable = ({ title, children, setExpanded, expanded, expandOnTitleClick }) => {
+  const id = reactExports.useId();
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("expandable", expanded && "expanded"), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        role: "button",
+        "aria-expanded": expanded,
+        "aria-controls": id,
+        className: "expandable-title",
+        onClick: () => expandOnTitleClick && setExpanded(!expanded),
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              className: clsx("codicon", expanded ? "codicon-chevron-down" : "codicon-chevron-right"),
+              style: { cursor: "pointer", color: "var(--vscode-foreground)", marginLeft: "5px" },
+              onClick: () => !expandOnTitleClick && setExpanded(!expanded)
+            }
+          ),
+          title
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { id, role: "region", style: { marginLeft: 25 }, children })
+  ] });
+};
+function linkifyText(description) {
+  const result = [];
+  let currentIndex = 0;
+  let match;
+  while ((match = kWebLinkRe.exec(description)) !== null) {
+    const stringBeforeMatch = description.substring(currentIndex, match.index);
+    if (stringBeforeMatch)
+      result.push(stringBeforeMatch);
+    const value = match[0];
+    result.push(renderLink(value));
+    currentIndex = match.index + value.length;
+  }
+  const stringAfterMatches = description.substring(currentIndex);
+  if (stringAfterMatches)
+    result.push(stringAfterMatches);
+  return result;
+}
+function renderLink(text) {
+  let link = text;
+  if (link.startsWith("www."))
+    link = "https://" + link;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: link, target: "_blank", rel: "noopener noreferrer", children: text });
+}
+const ExpandableAttachment = ({ attachment, reveal }) => {
+  const [expanded, setExpanded] = reactExports.useState(false);
+  const [attachmentText, setAttachmentText] = reactExports.useState(null);
+  const [placeholder, setPlaceholder] = reactExports.useState(null);
+  const [flash, triggerFlash] = useFlash();
+  const ref = reactExports.useRef(null);
+  const isTextAttachment = isTextualMimeType(attachment.contentType);
+  const hasContent = !!attachment.sha1 || !!attachment.path;
+  reactExports.useEffect(() => {
+    var _a;
+    if (reveal) {
+      (_a = ref.current) == null ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
+      return triggerFlash();
+    }
+  }, [reveal, triggerFlash]);
+  reactExports.useEffect(() => {
+    if (expanded && attachmentText === null && placeholder === null) {
+      setPlaceholder("Loading ...");
+      fetch(attachmentURL(attachment)).then((response) => response.text()).then((text) => {
+        setAttachmentText(text);
+        setPlaceholder(null);
+      }).catch((e) => {
+        setPlaceholder("Failed to load: " + e.message);
+      });
+    }
+  }, [expanded, attachmentText, placeholder, attachment]);
+  const snippetHeight = reactExports.useMemo(() => {
+    const lineCount = attachmentText ? attachmentText.split("\n").length : 0;
+    return Math.min(Math.max(5, lineCount), 20) * lineHeight;
+  }, [attachmentText]);
+  const title = /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { style: { marginLeft: 5 }, ref, "aria-label": attachment.name, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: linkifyText(attachment.name) }),
+    hasContent && /* @__PURE__ */ jsxRuntimeExports.jsx("a", { style: { marginLeft: 5 }, href: downloadURL(attachment), children: "download" })
+  ] });
+  if (!isTextAttachment || !hasContent)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginLeft: 20 }, children: title });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx(flash && "yellow-flash"), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Expandable, { title, expanded, setExpanded, expandOnTitleClick: true, children: placeholder && /* @__PURE__ */ jsxRuntimeExports.jsx("i", { children: placeholder }) }),
+    expanded && attachmentText !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vbox", style: { height: snippetHeight }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CodeMirrorWrapper,
+      {
+        text: attachmentText,
+        readOnly: true,
+        mimeType: attachment.contentType,
+        linkify: true,
+        lineNumbers: true,
+        wrapLines: false
+      }
+    ) })
+  ] });
+};
+const AttachmentsTab = ({ model, revealedAttachment }) => {
+  const { diffMap, screenshots, attachments } = reactExports.useMemo(() => {
+    const attachments2 = new Set((model == null ? void 0 : model.visibleAttachments) ?? []);
+    const screenshots2 = /* @__PURE__ */ new Set();
+    const diffMap2 = /* @__PURE__ */ new Map();
+    for (const attachment of attachments2) {
+      if (!attachment.path && !attachment.sha1)
+        continue;
+      const match = attachment.name.match(/^(.*)-(expected|actual|diff)\.png$/);
+      if (match) {
+        const name = match[1];
+        const type = match[2];
+        const entry = diffMap2.get(name) || { expected: void 0, actual: void 0, diff: void 0 };
+        entry[type] = attachment;
+        diffMap2.set(name, entry);
+        attachments2.delete(attachment);
+      } else if (attachment.contentType.startsWith("image/")) {
+        screenshots2.add(attachment);
+        attachments2.delete(attachment);
+      }
+    }
+    return { diffMap: diffMap2, attachments: attachments2, screenshots: screenshots2 };
+  }, [model]);
+  if (!diffMap.size && !screenshots.size && !attachments.size)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderPanel, { text: "No attachments" });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "attachments-tab", children: [
+    [...diffMap.values()].map(({ expected, actual, diff }) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        expected && actual && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "attachments-section", children: "Image diff" }),
+        expected && actual && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageDiffView, { noTargetBlank: true, diff: {
+          name: "Image diff",
+          expected: { attachment: { ...expected, path: downloadURL(expected) }, title: "Expected" },
+          actual: { attachment: { ...actual, path: downloadURL(actual) } },
+          diff: diff ? { attachment: { ...diff, path: downloadURL(diff) } } : void 0
+        } })
+      ] });
+    }),
+    screenshots.size ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "attachments-section", children: "Screenshots" }) : void 0,
+    [...screenshots.values()].map((a2, i2) => {
+      const url = attachmentURL(a2);
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "attachment-item", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { draggable: "false", src: url }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: "_blank", href: url, rel: "noreferrer", children: a2.name }) })
+      ] }, `screenshot-${i2}`);
+    }),
+    attachments.size ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "attachments-section", children: "Attachments" }) : void 0,
+    [...attachments.values()].map((a2, i2) => {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "attachment-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ExpandableAttachment,
+        {
+          attachment: a2,
+          reveal: !!revealedAttachment && isEqualAttachment(a2, revealedAttachment[0]) ? revealedAttachment : void 0
+        }
+      ) }, attachmentKey(a2, i2));
+    })
+  ] });
+};
+function isEqualAttachment(a2, b2) {
+  return a2.name === b2.name && a2.path === b2.path && a2.sha1 === b2.sha1;
+}
+function attachmentURL(attachment, queryParams = {}) {
+  const params = new URLSearchParams(queryParams);
+  if (attachment.sha1) {
+    params.set("trace", attachment.traceUrl);
+    return "sha1/" + attachment.sha1 + "?" + params.toString();
+  }
+  params.set("path", attachment.path);
+  return "file?" + params.toString();
+}
+function downloadURL(attachment) {
+  const params = { dn: attachment.name };
+  if (attachment.contentType)
+    params.dct = attachment.contentType;
+  return attachmentURL(attachment, params);
+}
+function attachmentKey(attachment, index) {
+  return index + "-" + (attachment.sha1 ? `sha1-` + attachment.sha1 : `path-` + attachment.path);
+}
+const CopyPromptButton = ({ prompt }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    CopyToClipboardTextButton,
+    {
+      value: prompt,
+      description: "Copy prompt",
+      copiedDescription: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        "Copied ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "codicon codicon-copy", style: { marginLeft: "5px" } })
+      ] }),
+      style: { width: "120px", justifyContent: "center" }
+    }
+  );
+};
+function useErrorsTabModel(model) {
+  return reactExports.useMemo(() => {
+    if (!model)
+      return { errors: /* @__PURE__ */ new Map() };
+    const errors = /* @__PURE__ */ new Map();
+    for (const error of model.errorDescriptors)
+      errors.set(error.message, error);
+    return { errors };
+  }, [model]);
+}
+function Error$1({ message, error, errorId, sdkLanguage, revealInSource }) {
+  var _a;
+  const [showLLM, setShowLLM] = reactExports.useState(false);
+  const llmAvailable = useIsLLMAvailable();
+  let location;
+  let longLocation;
+  const stackFrame = (_a = error.stack) == null ? void 0 : _a[0];
+  if (stackFrame) {
+    const file = stackFrame.file.replace(/.*[/\\](.*)/, "$1");
+    location = file + ":" + stackFrame.line;
+    longLocation = stackFrame.file + ":" + stackFrame.line;
+  }
+  const prompt = useAsyncMemo(async () => {
+    if (!error.prompt)
+      return;
+    const response = await fetch(attachmentURL(error.prompt));
+    return await response.text();
+  }, [error], void 0);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", flexDirection: "column", overflowX: "clip" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "hbox", style: {
+      alignItems: "center",
+      padding: "5px 10px",
+      minHeight: 36,
+      fontWeight: "bold",
+      color: "var(--vscode-errorForeground)",
+      flex: 0
+    }, children: [
+      error.action && renderAction(error.action, { sdkLanguage }),
+      location && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "action-location", children: [
+        "@ ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: longLocation, onClick: () => revealInSource(error), children: location })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { position: "absolute", right: "5px" }, children: prompt && (llmAvailable ? /* @__PURE__ */ jsxRuntimeExports.jsx(FixWithAIButton, { conversationId: errorId, onChange: setShowLLM, value: showLLM, prompt }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CopyPromptButton, { prompt })) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorMessage, { error: message }),
+    showLLM && /* @__PURE__ */ jsxRuntimeExports.jsx(AIConversation, { conversationId: errorId })
+  ] });
+}
+function FixWithAIButton({ conversationId, value, onChange, prompt }) {
+  const chat = useLLMChat();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ToolbarButton,
+    {
+      onClick: () => {
+        if (!chat.getConversation(conversationId)) {
+          const conversation = chat.startConversation(conversationId, [
+            `My Playwright test failed. What's going wrong?`,
+            `Please give me a suggestion how to fix it, and then explain what went wrong. Be very concise and apply Playwright best practices.`,
+            `Don't include many headings in your output. Make sure what you're saying is correct, and take into account whether there might be a bug in the app.`
+          ].join("\n"));
+          let displayPrompt = `Help me with the error above.`;
+          const hasDiff = prompt.includes("Local changes:");
+          const hasSnapshot = prompt.includes("Page snapshot:");
+          if (hasDiff)
+            displayPrompt += ` Take the code diff${hasSnapshot ? " and page snapshot" : ""} into account.`;
+          else if (hasSnapshot)
+            displayPrompt += ` Take the page snapshot into account.`;
+          conversation.send(prompt, displayPrompt);
+        }
+        onChange((v2) => !v2);
+      },
+      style: { width: "96px", justifyContent: "center" },
+      title: "Fix with AI",
+      className: "copy-to-clipboard-text-button",
+      children: value ? "Hide AI" : "Fix with AI"
+    }
+  );
+}
+const ErrorsTab = ({ errorsModel, sdkLanguage, revealInSource, wallTime }) => {
+  if (!errorsModel.errors.size)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderPanel, { text: "No errors" });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fill", style: { overflow: "auto" }, children: [...errorsModel.errors.entries()].map(([message, error]) => {
+    const errorId = `error-${wallTime}-${message}`;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Error$1, { errorId, message, error, revealInSource, sdkLanguage }, errorId);
+  }) });
+};
+const tileSize = { width: 200, height: 45 };
+const frameMargin = 2.5;
+const rowHeight = tileSize.height + frameMargin * 2;
+const FilmStrip = ({ model, boundaries, previewPoint }) => {
+  var _a, _b;
+  const [measure, ref] = useMeasure();
+  const lanesRef = reactExports.useRef(null);
+  let pageIndex = 0;
+  if (lanesRef.current && previewPoint) {
+    const bounds = lanesRef.current.getBoundingClientRect();
+    pageIndex = (previewPoint.clientY - bounds.top + lanesRef.current.scrollTop) / rowHeight | 0;
+  }
+  const screencastFrames = (_b = (_a = model == null ? void 0 : model.pages) == null ? void 0 : _a[pageIndex]) == null ? void 0 : _b.screencastFrames;
+  let previewImage = void 0;
+  let previewSize = void 0;
+  if (previewPoint !== void 0 && screencastFrames && screencastFrames.length) {
+    const previewTime = boundaries.minimum + (boundaries.maximum - boundaries.minimum) * previewPoint.x / measure.width;
+    previewImage = screencastFrames[upperBound(screencastFrames, previewTime, timeComparator) - 1];
+    const fitInto = {
+      width: Math.min(800, window.innerWidth / 2 | 0),
+      height: Math.min(800, window.innerHeight / 2 | 0)
+    };
+    previewSize = previewImage ? inscribe({ width: previewImage.width, height: previewImage.height }, fitInto) : void 0;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "film-strip", ref, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "film-strip-lanes", ref: lanesRef, children: model == null ? void 0 : model.pages.map((page, index) => page.screencastFrames.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      FilmStripLane,
+      {
+        boundaries,
+        page,
+        width: measure.width
+      },
+      index
+    ) : null) }),
+    (previewPoint == null ? void 0 : previewPoint.x) !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "film-strip-hover", style: {
+      top: measure.bottom + 5,
+      left: Math.min(previewPoint.x, measure.width - (previewSize ? previewSize.width : 0) - 10)
+    }, children: [
+      previewPoint.action && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "film-strip-hover-title", children: renderAction(previewPoint.action, previewPoint) }),
+      previewImage && previewSize && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { width: previewSize.width, height: previewSize.height }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: `sha1/${previewImage.sha1}`, width: previewSize.width, height: previewSize.height }) })
+    ] })
+  ] });
+};
+const FilmStripLane = ({ boundaries, page, width }) => {
+  const viewportSize = { width: 0, height: 0 };
+  const screencastFrames = page.screencastFrames;
+  for (const frame of screencastFrames) {
+    viewportSize.width = Math.max(viewportSize.width, frame.width);
+    viewportSize.height = Math.max(viewportSize.height, frame.height);
+  }
+  const frameSize = inscribe(viewportSize, tileSize);
+  const startTime = screencastFrames[0].timestamp;
+  const endTime = screencastFrames[screencastFrames.length - 1].timestamp;
+  const boundariesDuration = boundaries.maximum - boundaries.minimum;
+  const gapLeft = (startTime - boundaries.minimum) / boundariesDuration * width;
+  const gapRight = (boundaries.maximum - endTime) / boundariesDuration * width;
+  const effectiveWidth = (endTime - startTime) / boundariesDuration * width;
+  const frameCount = effectiveWidth / (frameSize.width + 2 * frameMargin) | 0;
+  const frameDuration = (endTime - startTime) / frameCount;
+  const frames = [];
+  for (let i2 = 0; startTime && frameDuration && i2 < frameCount; ++i2) {
+    const time = startTime + frameDuration * i2;
+    const index = upperBound(screencastFrames, time, timeComparator) - 1;
+    frames.push(/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "film-strip-frame", style: {
+      width: frameSize.width,
+      height: frameSize.height,
+      backgroundImage: `url(sha1/${screencastFrames[index].sha1})`,
+      backgroundSize: `${frameSize.width}px ${frameSize.height}px`,
+      margin: frameMargin,
+      marginRight: frameMargin
+    } }, i2));
+  }
+  frames.push(/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "film-strip-frame", style: {
+    width: frameSize.width,
+    height: frameSize.height,
+    backgroundImage: `url(sha1/${screencastFrames[screencastFrames.length - 1].sha1})`,
+    backgroundSize: `${frameSize.width}px ${frameSize.height}px`,
+    margin: frameMargin,
+    marginRight: frameMargin
+  } }, frames.length));
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "film-strip-lane", style: {
+    marginLeft: gapLeft + "px",
+    marginRight: gapRight + "px"
+  }, children: frames });
+};
+function timeComparator(time, frame) {
+  return time - frame.timestamp;
+}
+function inscribe(object, area) {
+  const scale = Math.max(object.width / area.width, object.height / area.height);
+  return {
+    width: object.width / scale | 0,
+    height: object.height / scale | 0
+  };
+}
+const Timeline = ({ model, boundaries, consoleEntries, onSelected, highlightedAction, highlightedEntry, highlightedConsoleEntry, selectedTime, setSelectedTime, sdkLanguage }) => {
+  const [measure, ref] = useMeasure();
+  const [dragWindow, setDragWindow] = reactExports.useState();
+  const [previewPoint, setPreviewPoint] = reactExports.useState();
+  const { offsets, curtainLeft, curtainRight } = reactExports.useMemo(() => {
+    let activeWindow = selectedTime || boundaries;
+    if (dragWindow && dragWindow.startX !== dragWindow.endX) {
+      const time1 = positionToTime(measure.width, boundaries, dragWindow.startX);
+      const time2 = positionToTime(measure.width, boundaries, dragWindow.endX);
+      activeWindow = { minimum: Math.min(time1, time2), maximum: Math.max(time1, time2) };
+    }
+    const curtainLeft2 = timeToPosition(measure.width, boundaries, activeWindow.minimum);
+    const maxRight = timeToPosition(measure.width, boundaries, boundaries.maximum);
+    const curtainRight2 = maxRight - timeToPosition(measure.width, boundaries, activeWindow.maximum);
+    return { offsets: calculateDividerOffsets(measure.width, boundaries), curtainLeft: curtainLeft2, curtainRight: curtainRight2 };
+  }, [selectedTime, boundaries, dragWindow, measure]);
+  const bars = reactExports.useMemo(() => {
+    const bars2 = [];
+    for (const entry of (model == null ? void 0 : model.actions) || []) {
+      if (entry.class === "Test")
+        continue;
+      bars2.push({
+        action: entry,
+        leftTime: entry.startTime,
+        rightTime: entry.endTime || boundaries.maximum,
+        leftPosition: timeToPosition(measure.width, boundaries, entry.startTime),
+        rightPosition: timeToPosition(measure.width, boundaries, entry.endTime || boundaries.maximum),
+        active: false,
+        error: !!entry.error
+      });
+    }
+    for (const resource of (model == null ? void 0 : model.resources) || []) {
+      const startTime = resource._monotonicTime;
+      const endTime = resource._monotonicTime + resource.time;
+      bars2.push({
+        resource,
+        leftTime: startTime,
+        rightTime: endTime,
+        leftPosition: timeToPosition(measure.width, boundaries, startTime),
+        rightPosition: timeToPosition(measure.width, boundaries, endTime),
+        active: false,
+        error: false
+      });
+    }
+    for (const consoleMessage of consoleEntries || []) {
+      bars2.push({
+        consoleMessage,
+        leftTime: consoleMessage.timestamp,
+        rightTime: consoleMessage.timestamp,
+        leftPosition: timeToPosition(measure.width, boundaries, consoleMessage.timestamp),
+        rightPosition: timeToPosition(measure.width, boundaries, consoleMessage.timestamp),
+        active: false,
+        error: consoleMessage.isError
+      });
+    }
+    return bars2;
+  }, [model, consoleEntries, boundaries, measure]);
+  reactExports.useMemo(() => {
+    for (const bar of bars) {
+      if (highlightedAction)
+        bar.active = bar.action === highlightedAction;
+      else if (highlightedEntry)
+        bar.active = bar.resource === highlightedEntry;
+      else if (highlightedConsoleEntry)
+        bar.active = bar.consoleMessage === highlightedConsoleEntry;
+      else
+        bar.active = false;
+    }
+  }, [bars, highlightedAction, highlightedEntry, highlightedConsoleEntry]);
+  const onMouseDown = reactExports.useCallback((event) => {
+    setPreviewPoint(void 0);
+    if (!ref.current)
+      return;
+    const x2 = event.clientX - ref.current.getBoundingClientRect().left;
+    const time = positionToTime(measure.width, boundaries, x2);
+    const leftX = selectedTime ? timeToPosition(measure.width, boundaries, selectedTime.minimum) : 0;
+    const rightX = selectedTime ? timeToPosition(measure.width, boundaries, selectedTime.maximum) : 0;
+    if (selectedTime && Math.abs(x2 - leftX) < 10) {
+      setDragWindow({ startX: rightX, endX: x2, type: "resize" });
+    } else if (selectedTime && Math.abs(x2 - rightX) < 10) {
+      setDragWindow({ startX: leftX, endX: x2, type: "resize" });
+    } else if (selectedTime && time > selectedTime.minimum && time < selectedTime.maximum && event.clientY - ref.current.getBoundingClientRect().top < 20) {
+      setDragWindow({ startX: leftX, endX: rightX, pivot: x2, type: "move" });
+    } else {
+      setDragWindow({ startX: x2, endX: x2, type: "resize" });
+    }
+  }, [boundaries, measure, ref, selectedTime]);
+  const onGlassPaneMouseMove = reactExports.useCallback((event) => {
+    if (!ref.current)
+      return;
+    const x2 = event.clientX - ref.current.getBoundingClientRect().left;
+    const time = positionToTime(measure.width, boundaries, x2);
+    const action = model == null ? void 0 : model.actions.findLast((action2) => action2.startTime <= time);
+    if (!event.buttons) {
+      setDragWindow(void 0);
+      return;
+    }
+    if (action)
+      onSelected(action);
+    if (!dragWindow)
+      return;
+    let newDragWindow = dragWindow;
+    if (dragWindow.type === "resize") {
+      newDragWindow = { ...dragWindow, endX: x2 };
+    } else {
+      const delta = x2 - dragWindow.pivot;
+      let startX = dragWindow.startX + delta;
+      let endX = dragWindow.endX + delta;
+      if (startX < 0) {
+        startX = 0;
+        endX = startX + (dragWindow.endX - dragWindow.startX);
+      }
+      if (endX > measure.width) {
+        endX = measure.width;
+        startX = endX - (dragWindow.endX - dragWindow.startX);
+      }
+      newDragWindow = { ...dragWindow, startX, endX, pivot: x2 };
+    }
+    setDragWindow(newDragWindow);
+    const time1 = positionToTime(measure.width, boundaries, newDragWindow.startX);
+    const time2 = positionToTime(measure.width, boundaries, newDragWindow.endX);
+    if (time1 !== time2)
+      setSelectedTime({ minimum: Math.min(time1, time2), maximum: Math.max(time1, time2) });
+  }, [boundaries, dragWindow, measure, model, onSelected, ref, setSelectedTime]);
+  const onGlassPaneMouseUp = reactExports.useCallback(() => {
+    setPreviewPoint(void 0);
+    if (!dragWindow)
+      return;
+    if (dragWindow.startX !== dragWindow.endX) {
+      const time1 = positionToTime(measure.width, boundaries, dragWindow.startX);
+      const time2 = positionToTime(measure.width, boundaries, dragWindow.endX);
+      setSelectedTime({ minimum: Math.min(time1, time2), maximum: Math.max(time1, time2) });
+    } else {
+      const time = positionToTime(measure.width, boundaries, dragWindow.startX);
+      const action = model == null ? void 0 : model.actions.findLast((action2) => action2.startTime <= time);
+      if (action)
+        onSelected(action);
+      setSelectedTime(void 0);
+    }
+    setDragWindow(void 0);
+  }, [boundaries, dragWindow, measure, model, setSelectedTime, onSelected]);
+  const onMouseMove = reactExports.useCallback((event) => {
+    if (!ref.current)
+      return;
+    const x2 = event.clientX - ref.current.getBoundingClientRect().left;
+    const time = positionToTime(measure.width, boundaries, x2);
+    const action = model == null ? void 0 : model.actions.findLast((action2) => action2.startTime <= time);
+    setPreviewPoint({ x: x2, clientY: event.clientY, action, sdkLanguage });
+  }, [boundaries, measure, model, ref, sdkLanguage]);
+  const onMouseLeave = reactExports.useCallback(() => {
+    setPreviewPoint(void 0);
+  }, []);
+  const onPaneDoubleClick = reactExports.useCallback(() => {
+    setSelectedTime(void 0);
+  }, [setSelectedTime]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: "none", borderBottom: "1px solid var(--vscode-panel-border)" }, children: [
+    !!dragWindow && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      GlassPane,
+      {
+        cursor: (dragWindow == null ? void 0 : dragWindow.type) === "resize" ? "ew-resize" : "grab",
+        onPaneMouseUp: onGlassPaneMouseUp,
+        onPaneMouseMove: onGlassPaneMouseMove,
+        onPaneDoubleClick
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref,
+        className: "timeline-view",
+        onMouseDown,
+        onMouseMove,
+        onMouseLeave,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "timeline-grid", children: offsets.map((offset, index) => {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "timeline-divider", style: { left: offset.position + "px" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "timeline-time", children: msToString(offset.time - boundaries.minimum) }) }, index);
+          }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { height: 8 } }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(FilmStrip, { model, boundaries, previewPoint }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "timeline-bars", children: bars.map((bar, index) => {
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: clsx(
+                  "timeline-bar",
+                  bar.action && "action",
+                  bar.resource && "network",
+                  bar.consoleMessage && "console-message",
+                  bar.active && "active",
+                  bar.error && "error"
+                ),
+                style: {
+                  left: bar.leftPosition,
+                  width: Math.max(5, bar.rightPosition - bar.leftPosition),
+                  top: barTop(bar),
+                  bottom: 0
+                }
+              },
+              index
+            );
+          }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "timeline-marker", style: {
+            display: previewPoint !== void 0 ? "block" : "none",
+            left: ((previewPoint == null ? void 0 : previewPoint.x) || 0) + "px"
+          } }),
+          selectedTime && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "timeline-window", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "timeline-window-curtain left", style: { width: curtainLeft } }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "timeline-window-resizer", style: { left: -5 } }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "timeline-window-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "timeline-window-drag" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "timeline-window-resizer", style: { left: 5 } }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "timeline-window-curtain right", style: { width: curtainRight } })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+function calculateDividerOffsets(clientWidth, boundaries) {
+  const minimumGap = 64;
+  let dividerCount = clientWidth / minimumGap;
+  const boundarySpan = boundaries.maximum - boundaries.minimum;
+  const pixelsPerMillisecond = clientWidth / boundarySpan;
+  let sectionTime = boundarySpan / dividerCount;
+  const logSectionTime = Math.ceil(Math.log(sectionTime) / Math.LN10);
+  sectionTime = Math.pow(10, logSectionTime);
+  if (sectionTime * pixelsPerMillisecond >= 5 * minimumGap)
+    sectionTime = sectionTime / 5;
+  if (sectionTime * pixelsPerMillisecond >= 2 * minimumGap)
+    sectionTime = sectionTime / 2;
+  const firstDividerTime = boundaries.minimum;
+  let lastDividerTime = boundaries.maximum;
+  lastDividerTime += minimumGap / pixelsPerMillisecond;
+  dividerCount = Math.ceil((lastDividerTime - firstDividerTime) / sectionTime);
+  if (!sectionTime)
+    dividerCount = 0;
+  const offsets = [];
+  for (let i2 = 0; i2 < dividerCount; ++i2) {
+    const time = firstDividerTime + sectionTime * i2;
+    offsets.push({ position: timeToPosition(clientWidth, boundaries, time), time });
+  }
+  return offsets;
+}
+function timeToPosition(clientWidth, boundaries, time) {
+  return (time - boundaries.minimum) / (boundaries.maximum - boundaries.minimum) * clientWidth;
+}
+function positionToTime(clientWidth, boundaries, x2) {
+  return x2 / clientWidth * (boundaries.maximum - boundaries.minimum) + boundaries.minimum;
+}
+function barTop(bar) {
+  return bar.resource ? 25 : 20;
+}
+const MetadataView = ({ model }) => {
+  var _a, _b;
+  if (!model)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+  const wallTime = model.wallTime !== void 0 ? new Date(model.wallTime).toLocaleString(void 0, { timeZoneName: "short" }) : void 0;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-testid": "metadata-view", className: "vbox", style: { flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", style: { paddingTop: 2 }, children: "Time" }),
+    !!wallTime && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "start time:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value datetime", title: wallTime, children: wallTime })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "duration:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value number", title: msToString(model.endTime - model.startTime), children: msToString(model.endTime - model.startTime) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", children: "Browser" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "engine:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value string", title: model.browserName, children: model.browserName })
+    ] }),
+    model.channel && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "channel:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value string", title: model.channel, children: model.channel })
+    ] }),
+    model.platform && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "platform:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value string", title: model.platform, children: model.platform })
+    ] }),
+    model.options.userAgent && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "user agent:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value datetime", title: model.options.userAgent, children: model.options.userAgent })
+    ] }),
+    model.options.baseURL && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", style: { paddingTop: 2 }, children: "Config" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+        "baseURL:",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("a", { className: "call-value string", href: model.options.baseURL, title: model.options.baseURL, target: "_blank", rel: "noopener noreferrer", children: model.options.baseURL })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", children: "Viewport" }),
+    model.options.viewport && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "width:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value number", title: String(!!((_a = model.options.viewport) == null ? void 0 : _a.width)), children: model.options.viewport.width })
+    ] }),
+    model.options.viewport && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "height:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value number", title: String(!!((_b = model.options.viewport) == null ? void 0 : _b.height)), children: model.options.viewport.height })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "is mobile:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value boolean", title: String(!!model.options.isMobile), children: String(!!model.options.isMobile) })
+    ] }),
+    model.options.deviceScaleFactor && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "device scale:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value number", title: String(model.options.deviceScaleFactor), children: String(model.options.deviceScaleFactor) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", children: "Counts" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "pages:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value number", children: model.pages.length })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "actions:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value number", children: model.actions.length })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+      "events:",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value number", children: model.events.length })
+    ] })
+  ] });
+};
+const AnnotationsTab = ({ annotations }) => {
+  if (!annotations.length)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderPanel, { text: "No annotations" });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "annotations-tab", children: annotations.map((annotation, i2) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "annotation-item", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontWeight: "bold" }, children: annotation.type }),
+      annotation.description && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+        ": ",
+        linkifyText(annotation.description)
+      ] })
+    ] }, `annotation-${i2}`);
+  }) });
+};
+const Workbench = ({ model, showSourcesFirst, rootDir, fallbackLocation, isLive, hideTimeline, status, annotations, inert, onOpenExternally, revealSource }) => {
+  var _a;
+  const [selectedCallId, setSelectedCallId] = reactExports.useState(void 0);
+  const [revealedError, setRevealedError] = reactExports.useState(void 0);
+  const [revealedAttachment, setRevealedAttachment] = reactExports.useState(void 0);
+  const [highlightedCallId, setHighlightedCallId] = reactExports.useState();
+  const [highlightedEntry, setHighlightedEntry] = reactExports.useState();
+  const [highlightedConsoleMessage, setHighlightedConsoleMessage] = reactExports.useState();
+  const [selectedNavigatorTab, setSelectedNavigatorTab] = reactExports.useState("actions");
+  const [selectedPropertiesTab, setSelectedPropertiesTab] = useSetting("propertiesTab", showSourcesFirst ? "source" : "call");
+  const [isInspecting, setIsInspectingState] = reactExports.useState(false);
+  const [highlightedElement, setHighlightedElement] = reactExports.useState({ lastEdited: "none" });
+  const [selectedTime, setSelectedTime] = reactExports.useState();
+  const [sidebarLocation, setSidebarLocation] = useSetting("propertiesSidebarLocation", "bottom");
+  const showScreenshot = false;
+  const setSelectedAction = reactExports.useCallback((action) => {
+    setSelectedCallId(action == null ? void 0 : action.callId);
+    setRevealedError(void 0);
+  }, []);
+  const highlightedAction = reactExports.useMemo(() => {
+    return model == null ? void 0 : model.actions.find((a2) => a2.callId === highlightedCallId);
+  }, [model, highlightedCallId]);
+  const setHighlightedAction = reactExports.useCallback((highlightedAction2) => {
+    setHighlightedCallId(highlightedAction2 == null ? void 0 : highlightedAction2.callId);
+  }, []);
+  const sources = reactExports.useMemo(() => (model == null ? void 0 : model.sources) || /* @__PURE__ */ new Map(), [model]);
+  reactExports.useEffect(() => {
+    setSelectedTime(void 0);
+    setRevealedError(void 0);
+  }, [model]);
+  const selectedAction = reactExports.useMemo(() => {
+    if (selectedCallId) {
+      const action = model == null ? void 0 : model.actions.find((a2) => a2.callId === selectedCallId);
+      if (action)
+        return action;
+    }
+    const failedAction = model == null ? void 0 : model.failedAction();
+    if (failedAction)
+      return failedAction;
+    if (model == null ? void 0 : model.actions.length) {
+      let index = model.actions.length - 1;
+      for (let i2 = 0; i2 < model.actions.length; ++i2) {
+        if (model.actions[i2].apiName === "After Hooks" && i2) {
+          index = i2 - 1;
+          break;
+        }
+      }
+      return model.actions[index];
+    }
+  }, [model, selectedCallId]);
+  const activeAction = reactExports.useMemo(() => {
+    return highlightedAction || selectedAction;
+  }, [selectedAction, highlightedAction]);
+  const revealedStack = reactExports.useMemo(() => {
+    if (revealedError)
+      return revealedError.stack;
+    return activeAction == null ? void 0 : activeAction.stack;
+  }, [activeAction, revealedError]);
+  const onActionSelected = reactExports.useCallback((action) => {
+    setSelectedAction(action);
+    setHighlightedAction(void 0);
+  }, [setSelectedAction, setHighlightedAction]);
+  const selectPropertiesTab = reactExports.useCallback((tab) => {
+    setSelectedPropertiesTab(tab);
+    if (tab !== "inspector")
+      setIsInspectingState(false);
+  }, [setSelectedPropertiesTab]);
+  const setIsInspecting = reactExports.useCallback((value) => {
+    if (!isInspecting && value)
+      selectPropertiesTab("inspector");
+    setIsInspectingState(value);
+  }, [setIsInspectingState, selectPropertiesTab, isInspecting]);
+  const elementPicked = reactExports.useCallback((element) => {
+    setHighlightedElement(element);
+    selectPropertiesTab("inspector");
+  }, [selectPropertiesTab]);
+  const revealAttachment = reactExports.useCallback((attachment) => {
+    selectPropertiesTab("attachments");
+    setRevealedAttachment((currentValue) => {
+      if (!currentValue)
+        return [attachment, 0];
+      const revealCounter = currentValue[1];
+      return [attachment, revealCounter + 1];
+    });
+  }, [selectPropertiesTab]);
+  reactExports.useEffect(() => {
+    if (revealSource)
+      selectPropertiesTab("source");
+  }, [revealSource, selectPropertiesTab]);
+  const consoleModel = useConsoleTabModel(model, selectedTime);
+  const networkModel = useNetworkTabModel(model, selectedTime);
+  const errorsModel = useErrorsTabModel(model);
+  const sdkLanguage = (model == null ? void 0 : model.sdkLanguage) || "javascript";
+  const inspectorTab = {
+    id: "inspector",
+    title: "Locator",
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      InspectorTab,
+      {
+        showScreenshot,
+        sdkLanguage,
+        setIsInspecting,
+        highlightedElement,
+        setHighlightedElement
+      }
+    )
+  };
+  const callTab = {
+    id: "call",
+    title: "Call",
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(CallTab, { action: activeAction, startTimeOffset: (model == null ? void 0 : model.startTime) ?? 0, sdkLanguage })
+  };
+  const logTab = {
+    id: "log",
+    title: "Log",
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(LogTab, { action: activeAction, isLive })
+  };
+  const errorsTab = {
+    id: "errors",
+    title: "Errors",
+    errorCount: errorsModel.errors.size,
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorsTab, { errorsModel, sdkLanguage, revealInSource: (error) => {
+      if (error.action)
+        setSelectedAction(error.action);
+      else
+        setRevealedError(error);
+      selectPropertiesTab("source");
+    }, wallTime: (model == null ? void 0 : model.wallTime) ?? 0 })
+  };
+  let fallbackSourceErrorCount = void 0;
+  if (!selectedAction && fallbackLocation)
+    fallbackSourceErrorCount = (_a = fallbackLocation.source) == null ? void 0 : _a.errors.length;
+  const sourceTab = {
+    id: "source",
+    title: "Source",
+    errorCount: fallbackSourceErrorCount,
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SourceTab,
+      {
+        stack: revealedStack,
+        sources,
+        rootDir,
+        stackFrameLocation: sidebarLocation === "bottom" ? "right" : "bottom",
+        fallbackLocation,
+        onOpenExternally
+      }
+    )
+  };
+  const consoleTab = {
+    id: "console",
+    title: "Console",
+    count: consoleModel.entries.length,
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConsoleTab,
+      {
+        consoleModel,
+        boundaries,
+        selectedTime,
+        onAccepted: (m2) => setSelectedTime({ minimum: m2.timestamp, maximum: m2.timestamp }),
+        onEntryHovered: setHighlightedConsoleMessage
+      }
+    )
+  };
+  const networkTab = {
+    id: "network",
+    title: "Network",
+    count: networkModel.resources.length,
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(NetworkTab, { boundaries, networkModel, onEntryHovered: setHighlightedEntry, sdkLanguage: (model == null ? void 0 : model.sdkLanguage) ?? "javascript" })
+  };
+  const attachmentsTab = {
+    id: "attachments",
+    title: "Attachments",
+    count: model == null ? void 0 : model.visibleAttachments.length,
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(AttachmentsTab, { model, revealedAttachment })
+  };
+  const tabs = [
+    inspectorTab,
+    callTab,
+    logTab,
+    errorsTab,
+    consoleTab,
+    networkTab,
+    sourceTab,
+    attachmentsTab
+  ];
+  if (annotations !== void 0) {
+    const annotationsTab = {
+      id: "annotations",
+      title: "Annotations",
+      count: annotations.length,
+      render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(AnnotationsTab, { annotations })
+    };
+    tabs.push(annotationsTab);
+  }
+  if (showSourcesFirst) {
+    const sourceTabIndex = tabs.indexOf(sourceTab);
+    tabs.splice(sourceTabIndex, 1);
+    tabs.splice(1, 0, sourceTab);
+  }
+  const { boundaries } = reactExports.useMemo(() => {
+    const boundaries2 = { minimum: (model == null ? void 0 : model.startTime) || 0, maximum: (model == null ? void 0 : model.endTime) || 3e4 };
+    if (boundaries2.minimum > boundaries2.maximum) {
+      boundaries2.minimum = 0;
+      boundaries2.maximum = 3e4;
+    }
+    boundaries2.maximum += (boundaries2.maximum - boundaries2.minimum) / 20;
+    return { boundaries: boundaries2 };
+  }, [model]);
+  let time = 0;
+  if (!isLive && model && model.endTime >= 0)
+    time = model.endTime - model.startTime;
+  else if (model && model.wallTime)
+    time = Date.now() - model.wallTime;
+  const actionsTab = {
+    id: "actions",
+    title: "Actions",
+    component: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox", children: [
+      status && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "workbench-run-status", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("codicon", testStatusIcon(status)) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: testStatusText(status) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "spacer" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "workbench-run-duration", children: time ? msToString(time) : "" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ActionList,
+        {
+          sdkLanguage,
+          actions: (model == null ? void 0 : model.actions) || [],
+          selectedAction: model ? selectedAction : void 0,
+          selectedTime,
+          setSelectedTime,
+          onSelected: onActionSelected,
+          onHighlighted: setHighlightedAction,
+          revealAttachment,
+          revealConsole: () => selectPropertiesTab("console"),
+          isLive
+        }
+      )
+    ] })
+  };
+  const metadataTab = {
+    id: "metadata",
+    title: "Metadata",
+    component: /* @__PURE__ */ jsxRuntimeExports.jsx(MetadataView, { model })
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox workbench", ...inert ? { inert: "true" } : {}, children: [
+    !hideTimeline && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Timeline,
+      {
+        model,
+        consoleEntries: consoleModel.entries,
+        boundaries,
+        highlightedAction,
+        highlightedEntry,
+        highlightedConsoleEntry: highlightedConsoleMessage,
+        onSelected: onActionSelected,
+        sdkLanguage,
+        selectedTime,
+        setSelectedTime
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SplitView,
+      {
+        sidebarSize: 250,
+        orientation: sidebarLocation === "bottom" ? "vertical" : "horizontal",
+        settingName: "propertiesSidebar",
+        main: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SplitView,
+          {
+            sidebarSize: 250,
+            orientation: "horizontal",
+            sidebarIsFirst: true,
+            settingName: "actionListSidebar",
+            main: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SnapshotTabsView,
+              {
+                action: activeAction,
+                model,
+                sdkLanguage,
+                testIdAttributeName: (model == null ? void 0 : model.testIdAttributeName) || "data-testid",
+                isInspecting,
+                setIsInspecting,
+                highlightedElement,
+                setHighlightedElement: elementPicked
+              }
+            ),
+            sidebar: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              TabbedPane,
+              {
+                tabs: [actionsTab, metadataTab],
+                selectedTab: selectedNavigatorTab,
+                setSelectedTab: setSelectedNavigatorTab
+              }
+            )
+          }
+        ),
+        sidebar: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TabbedPane,
+          {
+            tabs,
+            selectedTab: selectedPropertiesTab,
+            setSelectedTab: selectPropertiesTab,
+            rightToolbar: [
+              sidebarLocation === "bottom" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { title: "Dock to right", icon: "layout-sidebar-right-off", onClick: () => {
+                setSidebarLocation("right");
+              } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { title: "Dock to bottom", icon: "layout-panel-off", onClick: () => {
+                setSidebarLocation("bottom");
+              } })
+            ],
+            mode: sidebarLocation === "bottom" ? "default" : "select"
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  Expandable as E,
+  LLMProvider as L,
+  TreeView as T,
+  Workbench as W,
+  EventEmitter as a,
+  testStatusIcon as t
+};
+//# sourceMappingURL=workbench-CWZselvp.js.map