@checkly/playwright-core 1.48.22-beta → 1.48.22

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

@@ -1,1473 +0,0 @@
-import { r as reactExports, j as jsxRuntimeExports, L as ListView, k as buildActionTree, l as stats, n as asLocator, m as msToString, P as PlaceholderPanel, f as clsx, C as CopyToClipboard, o as ansi2html, u as useMeasure, p as upperBound, G as GlassPane, q as ResizeView, v as kWebLinkRe, w as lineHeight, x as CodeMirrorWrapper, h as useSetting, y as useConsoleTabModel, z as useNetworkTabModel, A as ConsoleTab, N as NetworkTab, S as SplitView, B as SnapshotTabsView, D as TabbedPane, T as ToolbarButton, I as InspectorTab, E as SourceTab } from "./inspectorTab-C_OTuI8x.js";
-const TreeListView = ListView;
-function TreeView({
-  name,
-  rootItem,
-  render,
-  icon,
-  isError,
-  isVisible,
-  selectedItem,
-  onAccepted,
-  onSelected,
-  onHighlighted,
-  treeState,
-  setTreeState,
-  noItemsMessage,
-  dataTestId,
-  autoExpandDepth
-}) {
-  const treeItems = reactExports.useMemo(() => {
-    return flattenTree(rootItem, selectedItem, treeState.expandedItems, autoExpandDepth || 0);
-  }, [rootItem, selectedItem, treeState, autoExpandDepth]);
-  const visibleItems = reactExports.useMemo(() => {
-    if (!isVisible)
-      return [...treeItems.keys()];
-    const cachedVisible = /* @__PURE__ */ new Map();
-    const visit = (item) => {
-      const cachedResult = cachedVisible.get(item);
-      if (cachedResult !== void 0)
-        return cachedResult;
-      let hasVisibleChildren = item.children.some((child) => visit(child));
-      for (const child of item.children) {
-        const result3 = visit(child);
-        hasVisibleChildren = hasVisibleChildren || result3;
-      }
-      const result2 = isVisible(item) || hasVisibleChildren;
-      cachedVisible.set(item, result2);
-      return result2;
-    };
-    for (const item of treeItems.keys())
-      visit(item);
-    const result = [];
-    for (const item of treeItems.keys()) {
-      if (isVisible(item))
-        result.push(item);
-    }
-    return result;
-  }, [treeItems, isVisible]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    TreeListView,
-    {
-      name,
-      items: visibleItems,
-      id: (item) => item.id,
-      dataTestId: dataTestId || name + "-tree",
-      render: (item) => {
-        const rendered = render(item);
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          icon && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "codicon " + (icon(item) || "blank"), style: { minWidth: 16, marginRight: 4 } }),
-          typeof rendered === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { textOverflow: "ellipsis", overflow: "hidden" }, children: rendered }) : rendered
-        ] });
-      },
-      icon: (item) => {
-        const expanded = treeItems.get(item).expanded;
-        if (typeof expanded === "boolean")
-          return expanded ? "codicon-chevron-down" : "codicon-chevron-right";
-      },
-      isError: (item) => (isError == null ? void 0 : isError(item)) || false,
-      indent: (item) => treeItems.get(item).depth,
-      selectedItem,
-      onAccepted: (item) => onAccepted == null ? void 0 : onAccepted(item),
-      onSelected: (item) => onSelected == null ? void 0 : onSelected(item),
-      onHighlighted: (item) => onHighlighted == null ? void 0 : onHighlighted(item),
-      onLeftArrow: (item) => {
-        const { expanded, parent } = treeItems.get(item);
-        if (expanded) {
-          treeState.expandedItems.set(item.id, false);
-          setTreeState({ ...treeState });
-        } else if (parent) {
-          onSelected == null ? void 0 : onSelected(parent);
-        }
-      },
-      onRightArrow: (item) => {
-        if (item.children.length) {
-          treeState.expandedItems.set(item.id, true);
-          setTreeState({ ...treeState });
-        }
-      },
-      onIconClicked: (item) => {
-        const { expanded } = treeItems.get(item);
-        if (expanded) {
-          for (let i = selectedItem; i; i = i.parent) {
-            if (i === item) {
-              onSelected == null ? void 0 : onSelected(item);
-              break;
-            }
-          }
-          treeState.expandedItems.set(item.id, false);
-        } else {
-          treeState.expandedItems.set(item.id, true);
-        }
-        setTreeState({ ...treeState });
-      },
-      noItemsMessage
-    }
-  );
-}
-function flattenTree(rootItem, selectedItem, expandedItems, autoExpandDepth) {
-  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);
-  const appendChildren = (parent, depth) => {
-    for (const item of parent.children) {
-      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;
-      result.set(item, { depth, expanded, parent: rootItem === parent ? null : parent });
-      if (expanded)
-        appendChildren(item, depth + 1);
-    }
-  };
-  appendChildren(rootItem, 0);
-  return result;
-}
-const ActionTreeView = TreeView;
-const ActionList = ({
-  actions,
-  selectedAction,
-  selectedTime,
-  setSelectedTime,
-  sdkLanguage,
-  onSelected,
-  onHighlighted,
-  revealConsole,
-  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]);
-  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: (item) => onSelected == null ? void 0 : onSelected(item.action),
-        onHighlighted: (item) => onHighlighted == null ? void 0 : onHighlighted(item == null ? void 0 : item.action),
-        onAccepted: (item) => setSelectedTime({ minimum: item.action.startTime, maximum: item.action.endTime }),
-        isError: (item) => {
-          var _a, _b;
-          return !!((_b = (_a = item.action) == null ? void 0 : _a.error) == null ? void 0 : _b.message);
-        },
-        isVisible: (item) => !selectedTime || item.action.startTime <= selectedTime.maximum && item.action.endTime >= selectedTime.minimum,
-        render: (item) => renderAction(item.action, { sdkLanguage, revealConsole, isLive, showDuration: true, showBadges: true })
-      }
-    )
-  ] });
-};
-const renderAction = (action, options) => {
-  const { sdkLanguage, revealConsole, isLive, showDuration, showBadges } = options;
-  const { errors, warnings } = stats(action);
-  const locator = action.params.selector ? asLocator(sdkLanguage || "javascript", action.params.selector) : void 0;
-  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 }),
-      locator && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-selector", title: locator, children: locator }),
-      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) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "spacer" }),
-    showDuration && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-duration", children: time || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "codicon codicon-loading" }) }),
-    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 CallTab = ({ action, sdkLanguage }) => {
-  if (!action)
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderPanel, { text: "No action selected" });
-  const params = { ...action.params };
-  delete params.info;
-  const paramKeys = Object.keys(params);
-  const timeMillis = action.startTime + (action.context.wallTime - action.context.startTime);
-  const wallTime = new Date(timeMillis).toLocaleString();
-  const duration = action.endTime ? msToString(action.endTime - action.startTime) : "Timed Out";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-tab", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-line", children: action.apiName }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", children: "Time" }),
-      wallTime && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
-        "wall 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 datetime", title: duration, children: duration })
-      ] })
-    ] }),
-    !!paramKeys.length && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", children: "Parameters" }),
-    !!paramKeys.length && paramKeys.map((name, index) => renderProperty(propertyToString(action, name, params[name], sdkLanguage), "param-" + index)),
-    !!action.result && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", children: "Return value" }),
-    !!action.result && Object.keys(action.result).map(
-      (name, index) => renderProperty(propertyToString(action, name, action.result[name], sdkLanguage), "result-" + index)
-    )
-  ] });
-};
-function renderProperty(property, key) {
-  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 })
-  ] }, key);
-}
-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((a) => parseSerializedValue(a, handles));
-  if (value.o !== void 0) {
-    const result = {};
-    for (const { k, v } of value.o)
-      result[k] = parseSerializedValue(v, 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 i = 0; i < log.length; ++i) {
-      let time = "";
-      if (log[i].time !== -1) {
-        const timeStart = (_a = log[i]) == null ? void 0 : _a.time;
-        if (i + 1 < log.length)
-          time = msToString(log[i + 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[i].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 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]);
-}
-const ErrorsTab = ({ errorsModel, sdkLanguage, revealInSource }) => {
-  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]) => {
-    var _a;
-    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;
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "hbox", style: {
-        alignItems: "center",
-        padding: "5px 10px",
-        minHeight: 36,
-        fontWeight: "bold",
-        color: "var(--vscode-errorForeground)"
-      }, 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(ErrorMessage, { error: message })
-    ] }, message);
-  }) });
-};
-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 i = 0; startTime && frameDuration && i < frameCount; ++i) {
-    const time = startTime + frameDuration * i;
-    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
-    } }, i));
-  }
-  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 x = event.clientX - ref.current.getBoundingClientRect().left;
-    const time = positionToTime(measure.width, boundaries, x);
-    const leftX = selectedTime ? timeToPosition(measure.width, boundaries, selectedTime.minimum) : 0;
-    const rightX = selectedTime ? timeToPosition(measure.width, boundaries, selectedTime.maximum) : 0;
-    if (selectedTime && Math.abs(x - leftX) < 10) {
-      setDragWindow({ startX: rightX, endX: x, type: "resize" });
-    } else if (selectedTime && Math.abs(x - rightX) < 10) {
-      setDragWindow({ startX: leftX, endX: x, type: "resize" });
-    } else if (selectedTime && time > selectedTime.minimum && time < selectedTime.maximum && event.clientY - ref.current.getBoundingClientRect().top < 20) {
-      setDragWindow({ startX: leftX, endX: rightX, pivot: x, type: "move" });
-    } else {
-      setDragWindow({ startX: x, endX: x, type: "resize" });
-    }
-  }, [boundaries, measure, ref, selectedTime]);
-  const onGlassPaneMouseMove = reactExports.useCallback((event) => {
-    if (!ref.current)
-      return;
-    const x = event.clientX - ref.current.getBoundingClientRect().left;
-    const time = positionToTime(measure.width, boundaries, x);
-    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: x };
-    } else {
-      const delta = x - 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: x };
-    }
-    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 x = event.clientX - ref.current.getBoundingClientRect().left;
-    const time = positionToTime(measure.width, boundaries, x);
-    const action = model == null ? void 0 : model.actions.findLast((action2) => action2.startTime <= time);
-    setPreviewPoint({ x, 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 i = 0; i < dividerCount; ++i) {
-    const time = firstDividerTime + sectionTime * i;
-    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, x) {
-  return x / 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, {});
-  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" }),
-    !!model.wallTime && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
-      "start time:",
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value datetime", title: new Date(model.wallTime).toLocaleString(), children: new Date(model.wallTime).toLocaleString() })
-    ] }),
-    /* @__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 })
-    ] })
-  ] });
-};
-async function loadImage(src) {
-  const image = new Image();
-  if (src) {
-    image.src = src;
-    await new Promise((f, r) => {
-      image.onload = f;
-      image.onerror = f;
-    });
-  }
-  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 }) => {
-  const [mode, setMode] = reactExports.useState(diff.diff ? "diff" : "actual");
-  const [showSxsDiff, setShowSxsDiff] = reactExports.useState(false);
-  const [expectedImage, setExpectedImage] = reactExports.useState(null);
-  const [actualImage, setActualImage] = reactExports.useState(null);
-  const [diffImage, setDiffImage] = reactExports.useState(null);
-  const [measure, ref] = useMeasure();
-  reactExports.useEffect(() => {
-    (async () => {
-      var _a, _b, _c;
-      setExpectedImage(await loadImage((_a = diff.expected) == null ? void 0 : _a.attachment.path));
-      setActualImage(await loadImage((_b = diff.actual) == null ? void 0 : _b.attachment.path));
-      setDiffImage(await loadImage((_c = diff.diff) == null ? void 0 : _c.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: "Expected" }),
-      /* @__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", canvasWidth: fitWidth, canvasHeight: fitHeight, scale }),
-      diff.diff && mode === "actual" && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: actualImage, alt: "Actual", canvasWidth: fitWidth, canvasHeight: fitHeight, scale }),
-      diff.diff && mode === "expected" && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: expectedImage, alt: "Expected", canvasWidth: fitWidth, canvasHeight: fitHeight, scale }),
-      diff.diff && mode === "slider" && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageDiffSlider, { expectedImage, actualImage, canvasWidth: fitWidth, canvasHeight: fitHeight, scale }),
-      diff.diff && mode === "sxs" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: expectedImage, title: "Expected", canvasWidth: sxsScale * imageWidth, canvasHeight: sxsScale * imageHeight, scale: sxsScale }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: showSxsDiff ? diffImage : actualImage, title: showSxsDiff ? "Diff" : "Actual", onClick: () => setShowSxsDiff(!showSxsDiff), canvasWidth: sxsScale * imageWidth, canvasHeight: sxsScale * imageHeight, scale: sxsScale })
-      ] }),
-      !diff.diff && mode === "actual" && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: actualImage, title: "Actual", canvasWidth: fitWidth, canvasHeight: fitHeight, scale }),
-      !diff.diff && mode === "expected" && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: expectedImage, title: "Expected", canvasWidth: fitWidth, canvasHeight: fitHeight, scale }),
-      !diff.diff && mode === "sxs" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex" }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: expectedImage, title: "Expected", canvasWidth: sxsScale * imageWidth, canvasHeight: sxsScale * imageHeight, scale: sxsScale }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: actualImage, title: "Actual", canvasWidth: sxsScale * imageWidth, canvasHeight: sxsScale * imageHeight, scale: sxsScale })
-      ] })
-    ] }),
-    /* @__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 }) => {
-  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: [
-    /* @__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: "Expected", 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, canvasWidth, canvasHeight, scale, onClick }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: "none", display: "flex", alignItems: "center", flexDirection: "column" }, children: [
-    /* @__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 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("expandable", expanded && "expanded"), children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { 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", { 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 }) => {
-  const [expanded, setExpanded] = reactExports.useState(false);
-  const [attachmentText, setAttachmentText] = reactExports.useState(null);
-  const [placeholder, setPlaceholder] = reactExports.useState(null);
-  const isTextAttachment = isTextualMimeType(attachment.contentType);
-  const hasContent = !!attachment.sha1 || !!attachment.path;
-  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 }, 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(jsxRuntimeExports.Fragment, { 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 }) => {
-  const { diffMap, screenshots, attachments } = reactExports.useMemo(() => {
-    const attachments2 = /* @__PURE__ */ new Set();
-    const screenshots2 = /* @__PURE__ */ new Set();
-    for (const action of (model == null ? void 0 : model.actions) || []) {
-      const traceUrl = action.context.traceUrl;
-      for (const attachment of action.attachments || [])
-        attachments2.add({ ...attachment, traceUrl });
-    }
-    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((a, i) => {
-      const url = attachmentURL(a);
-      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: a.name }) })
-      ] }, `screenshot-${i}`);
-    }),
-    attachments.size ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "attachments-section", children: "Attachments" }) : void 0,
-    [...attachments.values()].map((a, i) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "attachment-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandableAttachment, { attachment: a }) }, attachmentKey(a, i));
-    })
-  ] });
-};
-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 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, i) => {
-    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-${i}`);
-  }) });
-};
-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 Workbench = ({ model, showSourcesFirst, rootDir, fallbackLocation, isLive, hideTimeline, status, annotations, inert, openPage, onOpenExternally, revealSource, showSettings }) => {
-  var _a;
-  const [selectedCallId, setSelectedCallId] = reactExports.useState(void 0);
-  const [revealedError, setRevealedError] = 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 [highlightedLocator, setHighlightedLocator] = reactExports.useState("");
-  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((a) => a.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((a) => a.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 i = 0; i < model.actions.length; ++i) {
-        if (model.actions[i].apiName === "After Hooks" && i) {
-          index = i - 1;
-          break;
-        }
-      }
-      return model.actions[index];
-    }
-  }, [model, selectedCallId]);
-  const revealedStack = reactExports.useMemo(() => {
-    if (revealedError)
-      return revealedError.stack;
-    return selectedAction == null ? void 0 : selectedAction.stack;
-  }, [selectedAction, revealedError]);
-  const activeAction = reactExports.useMemo(() => {
-    return highlightedAction || selectedAction;
-  }, [selectedAction, highlightedAction]);
-  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 locatorPicked = reactExports.useCallback((locator) => {
-    setHighlightedLocator(locator);
-    selectPropertiesTab("inspector");
-  }, [selectPropertiesTab]);
-  reactExports.useEffect(() => {
-    if (revealSource)
-      selectPropertiesTab("source");
-  }, [revealSource, selectPropertiesTab]);
-  const consoleModel = useConsoleTabModel(model, selectedTime);
-  const networkModel = useNetworkTabModel(model, selectedTime);
-  const errorsModel = useErrorsTabModel(model);
-  const attachments = reactExports.useMemo(() => {
-    return (model == null ? void 0 : model.actions.map((a) => a.attachments || []).flat()) || [];
-  }, [model]);
-  const sdkLanguage = (model == null ? void 0 : model.sdkLanguage) || "javascript";
-  const inspectorTab = {
-    id: "inspector",
-    title: "Locator",
-    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      InspectorTab,
-      {
-        showScreenshot,
-        sdkLanguage,
-        setIsInspecting,
-        highlightedLocator,
-        setHighlightedLocator
-      }
-    )
-  };
-  const callTab = {
-    id: "call",
-    title: "Call",
-    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(CallTab, { action: activeAction, 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");
-    } })
-  };
-  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: (m) => setSelectedTime({ minimum: m.timestamp, maximum: m.timestamp }),
-        onEntryHovered: setHighlightedConsoleMessage
-      }
-    )
-  };
-  const networkTab = {
-    id: "network",
-    title: "Network",
-    count: networkModel.resources.length,
-    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(NetworkTab, { boundaries, networkModel, onEntryHovered: setHighlightedEntry })
-  };
-  const attachmentsTab = {
-    id: "attachments",
-    title: "Attachments",
-    count: attachments.length,
-    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(AttachmentsTab, { model })
-  };
-  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,
-          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,
-                highlightedLocator,
-                setHighlightedLocator: locatorPicked,
-                openPage
-              }
-            ),
-            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,
-  TreeView as T,
-  Workbench as W,
-  testStatusIcon as t
-};
-//# sourceMappingURL=workbench-CWtpwfKK.js.map