@localstack/appinspector-ui 1.0.173 → 1.0.175

package/dist/index.d.cts

@@ -40,6 +40,12 @@ interface AppInspectorContextProviderProps {
      * The prefix for the event studio routes.
      */
     routePrefix: string;
+    /**
+     * URL of the standalone worker shipped as `@localstack/appinspector-ui/spans-worker.js`,
+     * served by the host from its own origin. When omitted, the worker is started from an
+     * inlined `blob:` URL (needs `worker-src blob:` in the CSP).
+     */
+    spansWorkerUrl?: string;
 }
 declare const AppInspectorContextProvider: (props: PropsWithChildren<AppInspectorContextProviderProps>) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -40,6 +40,12 @@ interface AppInspectorContextProviderProps {
      * The prefix for the event studio routes.
      */
     routePrefix: string;
+    /**
+     * URL of the standalone worker shipped as `@localstack/appinspector-ui/spans-worker.js`,
+     * served by the host from its own origin. When omitted, the worker is started from an
+     * inlined `blob:` URL (needs `worker-src blob:` in the CSP).
+     */
+    spansWorkerUrl?: string;
 }
 declare const AppInspectorContextProvider: (props: PropsWithChildren<AppInspectorContextProviderProps>) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -16984,76 +16984,14 @@ var toSpanFilterProjection = (span) => ({
 });
 
 // src/hooks/use-spans-compute.ts
-import { useCallback as useCallback5, useEffect as useEffect14, useRef as useRef8, useState as useState10 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect15, useRef as useRef9, useState as useState10 } from "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);
-  }
-}
-
-// src/hooks/use-spans-compute.ts
-var EMPTY_RESULT = {
-  consumerValues: [],
-  errorCount: 0,
-  hasExternalProducer: false,
-  orderedFilteredIds: [],
-  producerValues: [],
-  statusValues: [],
-  warningCount: 0
-};
-var useSpansCompute = () => {
-  const [result, setResult] = useState10(EMPTY_RESULT);
-  const [workerError, setWorkerError] = useState10();
-  const [retryCount, setRetryCount] = useState10(0);
-  const workerRef = useRef8();
-  const seqRef = useRef8(0);
-  const lastAppliedRef = useRef8(0);
-  useEffect14(() => {
-    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 = useCallback5(() => {
-    setWorkerError(void 0);
-    setRetryCount((count2) => count2 + 1);
-  }, []);
-  const addPage = useCallback5((direction, projections) => {
-    workerRef.current?.postMessage({ direction, op: "addPage", projections, seq: ++seqRef.current });
-  }, []);
-  const setFilters = useCallback5((filters) => {
-    workerRef.current?.postMessage({ filters, op: "setFilters", seq: ++seqRef.current });
-  }, []);
-  const clear = useCallback5(() => {
-    workerRef.current?.postMessage({ op: "clear", seq: ++seqRef.current });
-  }, []);
-  return { addPage, clear, result, retryWorker, setFilters, workerError };
-};
+// src/context.tsx
+import { createContext as createContext9, useContext as useContext15 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo5 } from "react";
 
-// src/hooks/use-spans-ws.tsx
-import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef10, useState as useState11 } from "react";
+// src/api/client.ts
+var import_semver2 = __toESM(require_semver2(), 1);
 
 // src/config.ts
 var APPINSPECTOR_API_PREFIX = "/_localstack/appinspector";
@@ -17081,13 +17019,6 @@ var getAppInspectorApiUrl = (localstackEndpoint, endpoint) => {
 };
 var LOCALSTACK_INFO_PATH = "/_localstack/info";
 
-// src/context.tsx
-import { createContext as createContext9, useContext as useContext15 } from "react";
-import { useCallback as useCallback6, useMemo as useMemo5 } from "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.",
@@ -17352,7 +17283,7 @@ var createApiClient = ({ localstackEndpoint }) => {
 };
 
 // src/hooks/use-appinspector-open-analytics.ts
-import { useEffect as useEffect15, useRef as useRef9 } from "react";
+import { useEffect as useEffect14, useRef as useRef8 } from "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";
@@ -19234,8 +19165,8 @@ var useAppInspectorOpenAnalytics = () => {
   const api = useAppInspectorApi();
   const { deploymentContainer } = useAppInspector();
   const { status, statusError } = useAppInspectorStatus();
-  const firedRef = useRef9(false);
-  useEffect15(() => {
+  const firedRef = useRef8(false);
+  useEffect14(() => {
     if (firedRef.current) {
       return;
     }
@@ -19273,7 +19204,7 @@ var AppInspectorContextProvider = (props) => {
     () => createApiClient({ localstackEndpoint: props.localstackEndpoint }),
     [props.localstackEndpoint]
   );
-  const resolveLink = useCallback6(
+  const resolveLink = useCallback5(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;
@@ -19295,14 +19226,83 @@ var AppInspectorContextProvider = (props) => {
       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__ */ jsx132(ApiProvider, { api, children: /* @__PURE__ */ jsx132(StatusProvider, { children: /* @__PURE__ */ jsx132(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx132(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] = useState10(EMPTY_RESULT);
+  const [workerError, setWorkerError] = useState10();
+  const [retryCount, setRetryCount] = useState10(0);
+  const workerRef = useRef9();
+  const seqRef = useRef9(0);
+  const lastAppliedRef = useRef9(0);
+  useEffect15(() => {
+    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 = useCallback6(() => {
+    setWorkerError(void 0);
+    setRetryCount((count2) => count2 + 1);
+  }, []);
+  const addPage = useCallback6((direction, projections) => {
+    workerRef.current?.postMessage({ direction, op: "addPage", projections, seq: ++seqRef.current });
+  }, []);
+  const setFilters = useCallback6((filters) => {
+    workerRef.current?.postMessage({ filters, op: "setFilters", seq: ++seqRef.current });
+  }, []);
+  const clear = useCallback6(() => {
+    workerRef.current?.postMessage({ op: "clear", seq: ++seqRef.current });
+  }, []);
+  return { addPage, clear, result, retryWorker, setFilters, workerError };
+};
+
 // src/hooks/use-spans-ws.tsx
+import { useCallback as useCallback7, useEffect as useEffect16, useRef as useRef10, useState as useState11 } from "react";
 var wsLogger = createScopedLogger("WS");
 var isLegacySpanFields = (value) => {
   return typeof value.span_id === "string" && typeof value.trace_id === "string" && typeof value.timestamp === "string";