@localstack/appinspector-ui 1.0.174 → 1.0.176

package/dist/index.cjs

@@ -16960,76 +16960,14 @@ var toSpanFilterProjection = (span) => ({
 });
 
 // src/hooks/use-spans-compute.ts
-var import_react43 = require("react");
-
-// inline-worker:/home/runner/work/localstack-appinspector-ui/localstack-appinspector-ui/src/workers/spans-worker.worker.ts
-var source = '(() => {\n  // src/types/error-levels.ts\n  var ErrorLevel = {\n    ERROR: 3,\n    // General error\n    IAM_PERMISSION: 5,\n    // IAM permission issues\n    OK: 2,\n    // OK\n    // Standard OTEL status codes\n    UNSET: 1,\n    // Unset\n    // Extended custom levels\n    WARNING: 4\n    // Warning\n  };\n\n  // src/utils/iam-utils.ts\n  function determinePermissionStatus(payload) {\n    if (payload.explicit_deny_count && payload.explicit_deny_count > 0) {\n      return "explicitly_denied";\n    }\n    if (payload.is_allowed && payload.explicit_allow_count && payload.explicit_allow_count > 0) {\n      return "explicitly_allowed";\n    }\n    if (payload.is_allowed) {\n      return "implicitly_allowed";\n    }\n    return "implicitly_denied";\n  }\n  function parseIAMEvent(payloadString) {\n    try {\n      const payload = JSON.parse(payloadString);\n      const permission = determinePermissionStatus(payload);\n      const actions = [];\n      const resources = [];\n      if (payload.explicit_allows) {\n        for (const allow of payload.explicit_allows) {\n          if (!actions.includes(allow.action)) actions.push(allow.action);\n          if (!resources.includes(allow.resource)) resources.push(allow.resource);\n        }\n      }\n      if (payload.explicit_denies) {\n        for (const deny of payload.explicit_denies) {\n          if (!actions.includes(deny.action)) actions.push(deny.action);\n          if (!resources.includes(deny.resource)) resources.push(deny.resource);\n        }\n      }\n      if (payload.implicit_denies) {\n        for (const deny of payload.implicit_denies) {\n          if (!actions.includes(deny.action)) actions.push(deny.action);\n          if (!resources.includes(deny.resource)) resources.push(deny.resource);\n        }\n      }\n      return {\n        details: {\n          actions,\n          explicitAllows: payload.explicit_allow_count,\n          explicitDenies: payload.explicit_deny_count,\n          implicitDenies: payload.implicit_deny_count,\n          resources\n        },\n        operation: payload.operation,\n        permission,\n        principal: payload.principal_arn,\n        service: payload.service\n      };\n    } catch (error) {\n      console.error("Error parsing IAM event payload:", error);\n      return void 0;\n    }\n  }\n\n  // src/utils/error-level.ts\n  var calculateHighestErrorLevel = (span) => {\n    if (span.operation_status) {\n      switch (span.operation_status) {\n        case "error": {\n          return ErrorLevel.ERROR;\n        }\n        case "iam_explicit_deny":\n        case "iam_explicit_warn":\n        case "iam_implicit_deny":\n        case "iam_implicit_warn": {\n          return ErrorLevel.IAM_PERMISSION;\n        }\n        default: {\n          return ErrorLevel.OK;\n        }\n      }\n    }\n    const hasIamDenial = span.events.some((event) => {\n      if (!event.event_type?.toLowerCase().includes("iam")) return false;\n      if (typeof event.attributes?.payload !== "string") return false;\n      const parsed = parseIAMEvent(event.attributes.payload);\n      return parsed?.permission === "explicitly_denied" || parsed?.permission === "implicitly_denied";\n    });\n    if (hasIamDenial) return ErrorLevel.IAM_PERMISSION;\n    if (span.status_code === 2) return ErrorLevel.ERROR;\n    const hasErrorInErrors = span.errors?.some((error) => error.level === "error");\n    if (hasErrorInErrors) return ErrorLevel.ERROR;\n    const hasWarning = span.errors?.some((error) => error.level === "warning");\n    if (hasWarning) return ErrorLevel.WARNING;\n    return span.status_code || ErrorLevel.UNSET;\n  };\n\n  // src/utils/spans-filters.ts\n  var EMPTY_FILTERS = {\n    consumerService: [],\n    producerService: [],\n    status: []\n  };\n  var EXTERNAL_PRODUCER_VALUE = "__external__";\n  function isFiltersEmpty(filters) {\n    return filters.consumerService.length === 0 && filters.producerService.length === 0 && filters.status.length === 0;\n  }\n  var collapseStatusValue = (status) => {\n    if (status === "iam_explicit_deny" || status === "iam_implicit_deny") return "iam_deny";\n    if (status === "iam_explicit_warn" || status === "iam_implicit_warn") return "iam_warn";\n    return status;\n  };\n  function applyFilters(spans, filters) {\n    if (isFiltersEmpty(filters)) return spans;\n    return spans.filter((span) => {\n      if (filters.consumerService.length > 0 && !filters.consumerService.includes(span.service_name)) {\n        return false;\n      }\n      if (filters.producerService.length > 0) {\n        const includesExternal = filters.producerService.includes(EXTERNAL_PRODUCER_VALUE);\n        const namedServices = filters.producerService.filter((value) => value !== EXTERNAL_PRODUCER_VALUE);\n        const matchesExternal = includesExternal && !span.parent_service_name;\n        const matchesNamed = namedServices.length > 0 && !!span.parent_service_name && namedServices.includes(span.parent_service_name);\n        if (!matchesExternal && !matchesNamed) return false;\n      }\n      if (filters.status.length > 0) {\n        if (!span.operation_status) return false;\n        if (!filters.status.includes(collapseStatusValue(span.operation_status))) return false;\n      }\n      return true;\n    });\n  }\n\n  // src/workers/spans-reducer.ts\n  var compareByStartTime = (a, b) => a.start_time_unix_nano < b.start_time_unix_nano ? -1 : 1;\n  var insertSorted = (array, item, compareFunction, hint) => {\n    let left;\n    let right;\n    if (hint === "back") {\n      left = array.length;\n      right = array.length;\n      let step = 1;\n      while (left > 0 && compareFunction(array[left - 1], item) > 0) {\n        right = left;\n        left = Math.max(0, left - step);\n        step *= 2;\n      }\n    } else {\n      left = 0;\n      right = 0;\n      let step = 1;\n      while (right < array.length && compareFunction(array[right], item) <= 0) {\n        left = right + 1;\n        right = Math.min(array.length, right + step);\n        step *= 2;\n      }\n    }\n    while (left < right) {\n      const mid = left + right >>> 1;\n      if (compareFunction(array[mid], item) <= 0) {\n        left = mid + 1;\n      } else {\n        right = mid;\n      }\n    }\n    array.splice(left, 0, item);\n  };\n  var createSpansReducer = () => {\n    let corpus = [];\n    let filters = EMPTY_FILTERS;\n    const computeResult = () => {\n      const filtered = applyFilters(corpus, filters);\n      let errorCount = 0;\n      let warningCount = 0;\n      const orderedFilteredIds = [];\n      for (const entry of filtered) {\n        orderedFilteredIds.push(entry.span_id);\n        if (entry.errorLevel === ErrorLevel.ERROR || entry.errorLevel === ErrorLevel.IAM_PERMISSION) {\n          errorCount++;\n        } else if (entry.errorLevel === ErrorLevel.WARNING) {\n          warningCount++;\n        }\n      }\n      const producers = /* @__PURE__ */ new Set();\n      const consumers = /* @__PURE__ */ new Set();\n      const statuses = /* @__PURE__ */ new Set();\n      let hasExternalProducer = false;\n      for (const entry of corpus) {\n        if (entry.parent_service_name) producers.add(entry.parent_service_name);\n        else hasExternalProducer = true;\n        consumers.add(entry.service_name);\n        if (entry.operation_status) statuses.add(collapseStatusValue(entry.operation_status));\n      }\n      return {\n        consumerValues: [...consumers].toSorted(),\n        errorCount,\n        hasExternalProducer,\n        orderedFilteredIds,\n        producerValues: [...producers].toSorted(),\n        statusValues: [...statuses].toSorted(),\n        warningCount\n      };\n    };\n    return {\n      addPage: (direction, projections) => {\n        const hint = direction === "forward" ? "back" : "front";\n        const sorted = projections.toSorted(compareByStartTime);\n        for (const projection of sorted) {\n          insertSorted(corpus, { ...projection, errorLevel: calculateHighestErrorLevel(projection) }, compareByStartTime, hint);\n        }\n        return computeResult();\n      },\n      clear: () => {\n        corpus = [];\n        filters = EMPTY_FILTERS;\n        return computeResult();\n      },\n      setFilters: (next) => {\n        filters = next;\n        return computeResult();\n      }\n    };\n  };\n\n  // src/workers/spans-worker.worker.ts\n  var context = globalThis;\n  var reducer = createSpansReducer();\n  context.addEventListener("message", (event) => {\n    const request = event.data;\n    const result = request.op === "addPage" ? reducer.addPage(request.direction, request.projections) : request.op === "setFilters" ? reducer.setFilters(request.filters) : reducer.clear();\n    context.postMessage({ result, seq: request.seq });\n  });\n})();\n';
-function createInlineWorker() {
-  const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
-  try {
-    return new Worker(url);
-  } finally {
-    URL.revokeObjectURL(url);
-  }
-}
+var import_react46 = require("react");
 
-// src/hooks/use-spans-compute.ts
-var EMPTY_RESULT = {
-  consumerValues: [],
-  errorCount: 0,
-  hasExternalProducer: false,
-  orderedFilteredIds: [],
-  producerValues: [],
-  statusValues: [],
-  warningCount: 0
-};
-var useSpansCompute = () => {
-  const [result, setResult] = (0, import_react43.useState)(EMPTY_RESULT);
-  const [workerError, setWorkerError] = (0, import_react43.useState)();
-  const [retryCount, setRetryCount] = (0, import_react43.useState)(0);
-  const workerRef = (0, import_react43.useRef)();
-  const seqRef = (0, import_react43.useRef)(0);
-  const lastAppliedRef = (0, import_react43.useRef)(0);
-  (0, import_react43.useEffect)(() => {
-    try {
-      const worker = createInlineWorker();
-      worker.addEventListener("message", (event) => {
-        const { result: nextResult, seq } = event.data;
-        if (seq < lastAppliedRef.current) return;
-        lastAppliedRef.current = seq;
-        setResult(nextResult);
-      });
-      worker.addEventListener("error", (event) => {
-        setWorkerError(new Error(event.message || "Spans filter worker crashed."));
-      });
-      workerRef.current = worker;
-      return () => {
-        worker.terminate();
-        workerRef.current = void 0;
-      };
-    } catch (error) {
-      setWorkerError(error instanceof Error ? error : new Error("Failed to start the spans filter worker."));
-      return;
-    }
-  }, [retryCount]);
-  const retryWorker = (0, import_react43.useCallback)(() => {
-    setWorkerError(void 0);
-    setRetryCount((count2) => count2 + 1);
-  }, []);
-  const addPage = (0, import_react43.useCallback)((direction, projections) => {
-    workerRef.current?.postMessage({ direction, op: "addPage", projections, seq: ++seqRef.current });
-  }, []);
-  const setFilters = (0, import_react43.useCallback)((filters) => {
-    workerRef.current?.postMessage({ filters, op: "setFilters", seq: ++seqRef.current });
-  }, []);
-  const clear = (0, import_react43.useCallback)(() => {
-    workerRef.current?.postMessage({ op: "clear", seq: ++seqRef.current });
-  }, []);
-  return { addPage, clear, result, retryWorker, setFilters, workerError };
-};
+// src/context.tsx
+var import_react44 = require("react");
+var import_react45 = require("react");
 
-// src/hooks/use-spans-ws.tsx
-var import_react47 = require("react");
+// src/api/client.ts
+var import_semver2 = __toESM(require_semver2(), 1);
 
 // src/config.ts
 var APPINSPECTOR_API_PREFIX = "/_localstack/appinspector";
@@ -17057,13 +16995,6 @@ var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
 };
 var LOCALSTACK_INFO_PATH = "/_localstack/info";
 
-// src/context.tsx
-var import_react45 = require("react");
-var import_react46 = require("react");
-
-// src/api/client.ts
-var import_semver2 = __toESM(require_semver2(), 1);
-
 // src/constants/error-messages.ts
 var ERROR_MESSAGES = {
   APP_INSPECTOR_DISABLED: "App Inspector is currently disabled.",
@@ -17328,7 +17259,7 @@ var createApiClient = ({ localstackEndpoint }) => {
 };
 
 // src/hooks/use-appinspector-open-analytics.ts
-var import_react44 = require("react");
+var import_react43 = require("react");
 
 // node_modules/.pnpm/ua-parser-js@2.0.9/node_modules/ua-parser-js/src/main/ua-parser.mjs
 var LIBVERSION = "2.0.9";
@@ -19210,8 +19141,8 @@ var useAppInspectorOpenAnalytics = () => {
   const api = useAppInspectorApi();
   const { deploymentContainer } = useAppInspector();
   const { status, statusError } = useAppInspectorStatus();
-  const firedRef = (0, import_react44.useRef)(false);
-  (0, import_react44.useEffect)(() => {
+  const firedRef = (0, import_react43.useRef)(false);
+  (0, import_react43.useEffect)(() => {
     if (firedRef.current) {
       return;
     }
@@ -19232,9 +19163,9 @@ var useAppInspectorOpenAnalytics = () => {
 
 // src/context.tsx
 var import_jsx_runtime132 = require("react/jsx-runtime");
-var AppInspectorContext = (0, import_react45.createContext)(void 0);
+var AppInspectorContext = (0, import_react44.createContext)(void 0);
 var useAppInspector = () => {
-  const context = (0, import_react45.useContext)(AppInspectorContext);
+  const context = (0, import_react44.useContext)(AppInspectorContext);
   if (!context) {
     throw new Error("@localstack-studio/ui: components must be used within a <AppInspectorContextProvider>");
   }
@@ -19245,11 +19176,11 @@ var AppInspectorAnalyticsBoundary = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_jsx_runtime132.Fragment, { children });
 };
 var AppInspectorContextProvider = (props) => {
-  const api = (0, import_react46.useMemo)(
+  const api = (0, import_react45.useMemo)(
     () => createApiClient({ localstackEndpoint: props.localstackEndpoint }),
     [props.localstackEndpoint]
   );
-  const resolveLink = (0, import_react46.useCallback)(
+  const resolveLink = (0, import_react45.useCallback)(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -19261,24 +19192,93 @@ var AppInspectorContextProvider = (props) => {
     },
     [props.routePrefix]
   );
-  const deploymentContainer = (0, import_react46.useMemo)(
+  const deploymentContainer = (0, import_react45.useMemo)(
     () => props.deploymentContainer ?? { source: "web" },
     [props.deploymentContainer]
   );
-  const contextValue = (0, import_react46.useMemo)(
+  const contextValue = (0, import_react45.useMemo)(
     () => ({
       deploymentContainer,
       headerHeight: props.headerHeight ?? 0,
       linkComponent: props.linkComponent,
       localstackEndpoint: props.localstackEndpoint,
-      resolveLink
+      resolveLink,
+      spansWorkerUrl: props.spansWorkerUrl
     }),
-    [deploymentContainer, props.headerHeight, props.linkComponent, props.localstackEndpoint, resolveLink]
+    [deploymentContainer, props.headerHeight, props.linkComponent, props.localstackEndpoint, props.spansWorkerUrl, resolveLink]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(StatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
 };
 
+// inline-worker:/home/runner/work/localstack-appinspector-ui/localstack-appinspector-ui/src/workers/spans-worker.worker.ts
+var source = '(() => {\n  // src/types/error-levels.ts\n  var ErrorLevel = {\n    ERROR: 3,\n    // General error\n    IAM_PERMISSION: 5,\n    // IAM permission issues\n    OK: 2,\n    // OK\n    // Standard OTEL status codes\n    UNSET: 1,\n    // Unset\n    // Extended custom levels\n    WARNING: 4\n    // Warning\n  };\n\n  // src/utils/iam-utils.ts\n  function determinePermissionStatus(payload) {\n    if (payload.explicit_deny_count && payload.explicit_deny_count > 0) {\n      return "explicitly_denied";\n    }\n    if (payload.is_allowed && payload.explicit_allow_count && payload.explicit_allow_count > 0) {\n      return "explicitly_allowed";\n    }\n    if (payload.is_allowed) {\n      return "implicitly_allowed";\n    }\n    return "implicitly_denied";\n  }\n  function parseIAMEvent(payloadString) {\n    try {\n      const payload = JSON.parse(payloadString);\n      const permission = determinePermissionStatus(payload);\n      const actions = [];\n      const resources = [];\n      if (payload.explicit_allows) {\n        for (const allow of payload.explicit_allows) {\n          if (!actions.includes(allow.action)) actions.push(allow.action);\n          if (!resources.includes(allow.resource)) resources.push(allow.resource);\n        }\n      }\n      if (payload.explicit_denies) {\n        for (const deny of payload.explicit_denies) {\n          if (!actions.includes(deny.action)) actions.push(deny.action);\n          if (!resources.includes(deny.resource)) resources.push(deny.resource);\n        }\n      }\n      if (payload.implicit_denies) {\n        for (const deny of payload.implicit_denies) {\n          if (!actions.includes(deny.action)) actions.push(deny.action);\n          if (!resources.includes(deny.resource)) resources.push(deny.resource);\n        }\n      }\n      return {\n        details: {\n          actions,\n          explicitAllows: payload.explicit_allow_count,\n          explicitDenies: payload.explicit_deny_count,\n          implicitDenies: payload.implicit_deny_count,\n          resources\n        },\n        operation: payload.operation,\n        permission,\n        principal: payload.principal_arn,\n        service: payload.service\n      };\n    } catch (error) {\n      console.error("Error parsing IAM event payload:", error);\n      return void 0;\n    }\n  }\n\n  // src/utils/error-level.ts\n  var calculateHighestErrorLevel = (span) => {\n    if (span.operation_status) {\n      switch (span.operation_status) {\n        case "error": {\n          return ErrorLevel.ERROR;\n        }\n        case "iam_explicit_deny":\n        case "iam_explicit_warn":\n        case "iam_implicit_deny":\n        case "iam_implicit_warn": {\n          return ErrorLevel.IAM_PERMISSION;\n        }\n        default: {\n          return ErrorLevel.OK;\n        }\n      }\n    }\n    const hasIamDenial = span.events.some((event) => {\n      if (!event.event_type?.toLowerCase().includes("iam")) return false;\n      if (typeof event.attributes?.payload !== "string") return false;\n      const parsed = parseIAMEvent(event.attributes.payload);\n      return parsed?.permission === "explicitly_denied" || parsed?.permission === "implicitly_denied";\n    });\n    if (hasIamDenial) return ErrorLevel.IAM_PERMISSION;\n    if (span.status_code === 2) return ErrorLevel.ERROR;\n    const hasErrorInErrors = span.errors?.some((error) => error.level === "error");\n    if (hasErrorInErrors) return ErrorLevel.ERROR;\n    const hasWarning = span.errors?.some((error) => error.level === "warning");\n    if (hasWarning) return ErrorLevel.WARNING;\n    return span.status_code || ErrorLevel.UNSET;\n  };\n\n  // src/utils/spans-filters.ts\n  var EMPTY_FILTERS = {\n    consumerService: [],\n    producerService: [],\n    status: []\n  };\n  var EXTERNAL_PRODUCER_VALUE = "__external__";\n  function isFiltersEmpty(filters) {\n    return filters.consumerService.length === 0 && filters.producerService.length === 0 && filters.status.length === 0;\n  }\n  var collapseStatusValue = (status) => {\n    if (status === "iam_explicit_deny" || status === "iam_implicit_deny") return "iam_deny";\n    if (status === "iam_explicit_warn" || status === "iam_implicit_warn") return "iam_warn";\n    return status;\n  };\n  function applyFilters(spans, filters) {\n    if (isFiltersEmpty(filters)) return spans;\n    return spans.filter((span) => {\n      if (filters.consumerService.length > 0 && !filters.consumerService.includes(span.service_name)) {\n        return false;\n      }\n      if (filters.producerService.length > 0) {\n        const includesExternal = filters.producerService.includes(EXTERNAL_PRODUCER_VALUE);\n        const namedServices = filters.producerService.filter((value) => value !== EXTERNAL_PRODUCER_VALUE);\n        const matchesExternal = includesExternal && !span.parent_service_name;\n        const matchesNamed = namedServices.length > 0 && !!span.parent_service_name && namedServices.includes(span.parent_service_name);\n        if (!matchesExternal && !matchesNamed) return false;\n      }\n      if (filters.status.length > 0) {\n        if (!span.operation_status) return false;\n        if (!filters.status.includes(collapseStatusValue(span.operation_status))) return false;\n      }\n      return true;\n    });\n  }\n\n  // src/workers/spans-reducer.ts\n  var compareByStartTime = (a, b) => a.start_time_unix_nano < b.start_time_unix_nano ? -1 : 1;\n  var insertSorted = (array, item, compareFunction, hint) => {\n    let left;\n    let right;\n    if (hint === "back") {\n      left = array.length;\n      right = array.length;\n      let step = 1;\n      while (left > 0 && compareFunction(array[left - 1], item) > 0) {\n        right = left;\n        left = Math.max(0, left - step);\n        step *= 2;\n      }\n    } else {\n      left = 0;\n      right = 0;\n      let step = 1;\n      while (right < array.length && compareFunction(array[right], item) <= 0) {\n        left = right + 1;\n        right = Math.min(array.length, right + step);\n        step *= 2;\n      }\n    }\n    while (left < right) {\n      const mid = left + right >>> 1;\n      if (compareFunction(array[mid], item) <= 0) {\n        left = mid + 1;\n      } else {\n        right = mid;\n      }\n    }\n    array.splice(left, 0, item);\n  };\n  var createSpansReducer = () => {\n    let corpus = [];\n    let filters = EMPTY_FILTERS;\n    const computeResult = () => {\n      const filtered = applyFilters(corpus, filters);\n      let errorCount = 0;\n      let warningCount = 0;\n      const orderedFilteredIds = [];\n      for (const entry of filtered) {\n        orderedFilteredIds.push(entry.span_id);\n        if (entry.errorLevel === ErrorLevel.ERROR || entry.errorLevel === ErrorLevel.IAM_PERMISSION) {\n          errorCount++;\n        } else if (entry.errorLevel === ErrorLevel.WARNING) {\n          warningCount++;\n        }\n      }\n      const producers = /* @__PURE__ */ new Set();\n      const consumers = /* @__PURE__ */ new Set();\n      const statuses = /* @__PURE__ */ new Set();\n      let hasExternalProducer = false;\n      for (const entry of corpus) {\n        if (entry.parent_service_name) producers.add(entry.parent_service_name);\n        else hasExternalProducer = true;\n        consumers.add(entry.service_name);\n        if (entry.operation_status) statuses.add(collapseStatusValue(entry.operation_status));\n      }\n      return {\n        consumerValues: [...consumers].toSorted(),\n        errorCount,\n        hasExternalProducer,\n        orderedFilteredIds,\n        producerValues: [...producers].toSorted(),\n        statusValues: [...statuses].toSorted(),\n        warningCount\n      };\n    };\n    return {\n      addPage: (direction, projections) => {\n        const hint = direction === "forward" ? "back" : "front";\n        const sorted = projections.toSorted(compareByStartTime);\n        for (const projection of sorted) {\n          insertSorted(corpus, { ...projection, errorLevel: calculateHighestErrorLevel(projection) }, compareByStartTime, hint);\n        }\n        return computeResult();\n      },\n      clear: () => {\n        corpus = [];\n        filters = EMPTY_FILTERS;\n        return computeResult();\n      },\n      setFilters: (next) => {\n        filters = next;\n        return computeResult();\n      }\n    };\n  };\n\n  // src/workers/spans-worker.worker.ts\n  var context = globalThis;\n  var reducer = createSpansReducer();\n  context.addEventListener("message", (event) => {\n    const request = event.data;\n    const result = request.op === "addPage" ? reducer.addPage(request.direction, request.projections) : request.op === "setFilters" ? reducer.setFilters(request.filters) : reducer.clear();\n    context.postMessage({ result, seq: request.seq });\n  });\n})();\n';
+function createInlineWorker() {
+  const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
+  try {
+    return new Worker(url);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+
+// src/hooks/use-spans-compute.ts
+var EMPTY_RESULT = {
+  consumerValues: [],
+  errorCount: 0,
+  hasExternalProducer: false,
+  orderedFilteredIds: [],
+  producerValues: [],
+  statusValues: [],
+  warningCount: 0
+};
+var useSpansCompute = () => {
+  const { spansWorkerUrl } = useAppInspector();
+  const [result, setResult] = (0, import_react46.useState)(EMPTY_RESULT);
+  const [workerError, setWorkerError] = (0, import_react46.useState)();
+  const [retryCount, setRetryCount] = (0, import_react46.useState)(0);
+  const workerRef = (0, import_react46.useRef)();
+  const seqRef = (0, import_react46.useRef)(0);
+  const lastAppliedRef = (0, import_react46.useRef)(0);
+  (0, import_react46.useEffect)(() => {
+    try {
+      const worker = spansWorkerUrl ? new Worker(spansWorkerUrl) : createInlineWorker();
+      worker.addEventListener("message", (event) => {
+        const { result: nextResult, seq } = event.data;
+        if (seq < lastAppliedRef.current) return;
+        lastAppliedRef.current = seq;
+        setResult(nextResult);
+      });
+      worker.addEventListener("error", (event) => {
+        setWorkerError(new Error(event.message || "Spans filter worker crashed."));
+      });
+      workerRef.current = worker;
+      return () => {
+        worker.terminate();
+        workerRef.current = void 0;
+      };
+    } catch (error) {
+      setWorkerError(error instanceof Error ? error : new Error("Failed to start the spans filter worker."));
+      return;
+    }
+  }, [retryCount, spansWorkerUrl]);
+  const retryWorker = (0, import_react46.useCallback)(() => {
+    setWorkerError(void 0);
+    setRetryCount((count2) => count2 + 1);
+  }, []);
+  const addPage = (0, import_react46.useCallback)((direction, projections) => {
+    workerRef.current?.postMessage({ direction, op: "addPage", projections, seq: ++seqRef.current });
+  }, []);
+  const setFilters = (0, import_react46.useCallback)((filters) => {
+    workerRef.current?.postMessage({ filters, op: "setFilters", seq: ++seqRef.current });
+  }, []);
+  const clear = (0, import_react46.useCallback)(() => {
+    workerRef.current?.postMessage({ op: "clear", seq: ++seqRef.current });
+  }, []);
+  return { addPage, clear, result, retryWorker, setFilters, workerError };
+};
+
 // src/hooks/use-spans-ws.tsx
+var import_react47 = require("react");
 var wsLogger = createScopedLogger("WS");
 var isLegacySpanFields = (value) => {
   return typeof value.span_id === "string" && typeof value.trace_id === "string" && typeof value.timestamp === "string";