@checkly/playwright-core 1.47.20-alpha → 1.48.20

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

@@ -0,0 +1,1473 @@
+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-DpvLVMq5.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-BcgGQnKb.js.map