@module-federation/devtools 2.4.0 → 2.5.0

package/dist/es/component/LoadingTrace/index.js

@@ -0,0 +1,944 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Button, Empty, Input, Modal, Switch } from "@arco-design/web-react";
+import {
+  IconDownload,
+  IconPlayArrow,
+  IconQuestionCircle,
+  IconRefresh,
+  IconSearch,
+  IconSettings
+} from "@arco-design/web-react/icon";
+import { useTranslation } from "react-i18next";
+import {
+  applyObservabilityConfig,
+  disableObservabilityConfig,
+  getObservabilityReportScopeLabel,
+  mergeObservabilityReports,
+  readObservabilityConfig,
+  readObservabilitySnapshot,
+  reloadInspectedPage
+} from "../../utils/chrome/observability";
+import {
+  DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG,
+  normalizeObservabilityDevtoolsConfig
+} from "../../utils/chrome/observability-shared";
+import { MESSAGE_OBSERVABILITY_DEVTOOLS_EVENT } from "../../utils/chrome/messages";
+import styles from "./index.module";
+const FieldLabel = ({ label, tip }) => /* @__PURE__ */ jsxs("span", { className: styles.labelWithHelp, children: [
+  /* @__PURE__ */ jsx("span", { className: styles.labelText, children: label }),
+  /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: styles.helpIcon,
+      "data-tip": tip,
+      tabIndex: 0,
+      "aria-label": tip,
+      children: /* @__PURE__ */ jsx(IconQuestionCircle, {})
+    }
+  ),
+  /* @__PURE__ */ jsx("span", { className: styles.labelColon, children: ":" })
+] });
+const SegmentedControl = ({
+  value,
+  options,
+  onChange
+}) => /* @__PURE__ */ jsx("div", { className: styles.segmentedControl, role: "group", children: options.map((option) => {
+  const isActive = option.value === value;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `${styles.segmentButton} ${isActive ? styles.segmentButtonActive : ""}`,
+      "aria-pressed": isActive,
+      onClick: () => onChange(option.value),
+      children: option.label
+    },
+    option.value
+  );
+}) });
+const formatTime = (timestamp) => {
+  if (!timestamp) {
+    return "-";
+  }
+  try {
+    return new Date(timestamp).toLocaleTimeString();
+  } catch (e) {
+    return "-";
+  }
+};
+const getReportTitle = (report) => {
+  var _a, _b;
+  return report.requestId || ((_a = report.remote) == null ? void 0 : _a.name) || ((_b = report.shared) == null ? void 0 : _b.name) || report.traceId || "unknown";
+};
+const getReportOutcome = (report) => {
+  var _a;
+  return ((_a = report.summary) == null ? void 0 : _a.outcome) || report.status || "pending";
+};
+const parseStableVersion = (version) => {
+  const matched = version == null ? void 0 : version.match(/^(\d+)\.(\d+)\.(\d+)(?:\+[\w.-]+)?$/);
+  if (!matched) {
+    return null;
+  }
+  return {
+    major: Number(matched[1]),
+    minor: Number(matched[2]),
+    patch: Number(matched[3])
+  };
+};
+const isVersionLessThan = (version, target) => {
+  if (!version) {
+    return false;
+  }
+  if (version.major !== target.major) {
+    return version.major < target.major;
+  }
+  if (version.minor !== target.minor) {
+    return version.minor < target.minor;
+  }
+  return version.patch < target.patch;
+};
+const getLimitedObservabilityLabel = (report) => {
+  const runtimeVersion = parseStableVersion(report.runtimeVersion);
+  if (runtimeVersion && isVersionLessThan(runtimeVersion, { major: 2, minor: 5, patch: 0 })) {
+    return "lowVersion";
+  }
+  if (!report.runtimeVersion) {
+    return "unknownVersion";
+  }
+  return void 0;
+};
+const getReportState = (report) => {
+  var _a;
+  const outcome = getReportOutcome(report);
+  const limitedObservability = getLimitedObservabilityLabel(report);
+  if (outcome === "recovered" || ((_a = report.summary) == null ? void 0 : _a.recovered)) {
+    return "recovered";
+  }
+  if (report.status === "error" || outcome === "failed" || report.failedPhase || report.errorMessage) {
+    return "failed";
+  }
+  if (outcome === "pending" && report.status === "success" && limitedObservability) {
+    return "success";
+  }
+  if (outcome === "pending") {
+    return "pending";
+  }
+  if (report.status === "success") {
+    return "success";
+  }
+  return "pending";
+};
+const getEventStatusState = (status) => {
+  switch (status) {
+    case "success":
+    case "complete":
+      return "success";
+    case "error":
+    case "failed":
+      return "failed";
+    case "start":
+    case "pending":
+      return "pending";
+    default:
+      return "neutral";
+  }
+};
+const getReportSearchText = (report) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  return [
+    getReportTitle(report),
+    report.traceId,
+    report.status,
+    getReportOutcome(report),
+    report.hostName,
+    report.runtimeVersion,
+    (_a = report.remote) == null ? void 0 : _a.name,
+    (_b = report.remote) == null ? void 0 : _b.alias,
+    (_c = report.remote) == null ? void 0 : _c.entry,
+    (_d = report.shared) == null ? void 0 : _d.name,
+    (_e = report.shared) == null ? void 0 : _e.provider,
+    (_f = report.shared) == null ? void 0 : _f.requiredVersion,
+    (_g = report.shared) == null ? void 0 : _g.selectedVersion,
+    (_i = (_h = report.shared) == null ? void 0 : _h.availableVersions) == null ? void 0 : _i.join(" "),
+    report.expose,
+    report.failedPhase,
+    report.errorCode,
+    report.errorName,
+    report.errorMessage,
+    report.ownerHint,
+    ((_j = report.summary) == null ? void 0 : _j.recovered) ? "recovered" : void 0,
+    (_k = report.summary) == null ? void 0 : _k.lastPhase,
+    (_l = report.diagnosis) == null ? void 0 : _l.title,
+    (_n = (_m = report.loadedBefore) == null ? void 0 : _m.consumers) == null ? void 0 : _n.map(
+      (consumer) => [consumer.name, ...consumer.exposes || []].join(" ")
+    ).join(" "),
+    report.__scope
+  ].filter(Boolean).join(" ").toLowerCase();
+};
+const fuzzyMatchReport = (report, keyword) => {
+  const tokens = keyword.trim().toLowerCase().split(/\s+/).filter(Boolean);
+  if (!tokens.length) {
+    return true;
+  }
+  const haystack = getReportSearchText(report);
+  return tokens.every((token) => haystack.includes(token));
+};
+const downloadJson = (name, data) => {
+  const blob = new Blob([`${JSON.stringify(data, null, 2)}
+`], {
+    type: "application/json;charset=utf-8"
+  });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = name;
+  anchor.click();
+  URL.revokeObjectURL(url);
+};
+const formatCurrentLoadValue = (value) => {
+  if (value === false) {
+    return "false";
+  }
+  if (value === true) {
+    return "true";
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  return value || void 0;
+};
+const getConfigSignature = (config) => JSON.stringify(normalizeObservabilityDevtoolsConfig(config));
+const getLoadingTraceTabKey = (tabId) => typeof tabId === "number" ? String(tabId) : "unknown";
+const LoadingTrace = ({ tabId, resetKey = 0 }) => {
+  var _a, _b;
+  const { t } = useTranslation();
+  const [config, setConfig] = useState(
+    DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG
+  );
+  const [savedConfig, setSavedConfig] = useState(
+    DEFAULT_OBSERVABILITY_DEVTOOLS_CONFIG
+  );
+  const [stored, setStored] = useState(false);
+  const [reports, setReports] = useState([]);
+  const [scopes, setScopes] = useState([]);
+  const [hasUserObservabilityPlugin, setHasUserObservabilityPlugin] = useState(false);
+  const [selectedTraceId, setSelectedTraceId] = useState();
+  const [busy, setBusy] = useState(false);
+  const [statusText, setStatusText] = useState("");
+  const [showConfigPanel, setShowConfigPanel] = useState(false);
+  const [reportKeyword, setReportKeyword] = useState("");
+  const refreshTimersRef = useRef([]);
+  const userPluginPollTimerRef = useRef(
+    null
+  );
+  const tabCacheRef = useRef(/* @__PURE__ */ new Map());
+  const activeTabKey = useMemo(() => getLoadingTraceTabKey(tabId), [tabId]);
+  const activeTabKeyRef = useRef(activeTabKey);
+  const resetKeyRef = useRef(resetKey);
+  const filteredReports = useMemo(
+    () => reports.filter((report) => fuzzyMatchReport(report, reportKeyword)),
+    [reports, reportKeyword]
+  );
+  const selectedReport = useMemo(
+    () => filteredReports.find((report) => report.traceId === selectedTraceId) || filteredReports[0],
+    [filteredReports, selectedTraceId]
+  );
+  const latestReport = reports[0];
+  const isObservabilityEnabled = stored && config.enabled !== false;
+  const isConfigDirty = useMemo(
+    () => getConfigSignature(config) !== getConfigSignature(savedConfig),
+    [config, savedConfig]
+  );
+  const levelOptions = useMemo(
+    () => [
+      {
+        label: t("loadingTrace.config.verbose"),
+        value: "verbose"
+      },
+      {
+        label: t("loadingTrace.config.summary"),
+        value: "summary"
+      },
+      {
+        label: t("loadingTrace.config.error"),
+        value: "error"
+      }
+    ],
+    [t]
+  );
+  const shouldShowApplyButton = !isObservabilityEnabled || isConfigDirty;
+  const emptyDescription = useMemo(() => {
+    if (!hasUserObservabilityPlugin && !isObservabilityEnabled) {
+      return t("loadingTrace.emptyEnableChrome");
+    }
+    return t("loadingTrace.empty");
+  }, [hasUserObservabilityPlugin, isObservabilityEnabled, t]);
+  const sourceStateLabel = isObservabilityEnabled ? "ON" : hasUserObservabilityPlugin ? "CUSTOM" : "OFF";
+  const eventCount = useMemo(
+    () => reports.reduce(
+      (count, report) => {
+        var _a2;
+        return count + (((_a2 = report.events) == null ? void 0 : _a2.length) || 0);
+      },
+      0
+    ),
+    [reports]
+  );
+  const applyTabCache = useCallback(
+    (tabKey, update) => {
+      const current = tabCacheRef.current.get(tabKey) || {
+        reports: [],
+        selectedTraceId: void 0
+      };
+      const next = typeof update === "function" ? update(current) : update;
+      tabCacheRef.current.set(tabKey, next);
+      if (activeTabKeyRef.current === tabKey) {
+        setReports(next.reports);
+        setSelectedTraceId(next.selectedTraceId);
+      }
+      return next;
+    },
+    []
+  );
+  const clearTabCache = useCallback(
+    (tabKey) => applyTabCache(tabKey, {
+      reports: [],
+      selectedTraceId: void 0
+    }),
+    [applyTabCache]
+  );
+  const refreshSnapshot = useCallback(
+    (..._0) => __async(void 0, [..._0], function* (targetTabKey = activeTabKeyRef.current) {
+      var _a2;
+      const snapshot = yield readObservabilitySnapshot();
+      setConfig(snapshot.config);
+      setSavedConfig(snapshot.config);
+      setStored(snapshot.stored);
+      setScopes(snapshot.scopes);
+      setHasUserObservabilityPlugin(snapshot.hasUserObservabilityPlugin);
+      const cached = tabCacheRef.current.get(targetTabKey) || {
+        reports: [],
+        selectedTraceId: void 0
+      };
+      const mergedReports = mergeObservabilityReports(
+        cached.reports,
+        snapshot.reports
+      );
+      const nextCache = applyTabCache(targetTabKey, {
+        reports: mergedReports,
+        selectedTraceId: cached.selectedTraceId || ((_a2 = snapshot.reports[0]) == null ? void 0 : _a2.traceId)
+      });
+      return __spreadProps(__spreadValues({}, snapshot), {
+        reports: nextCache.reports
+      });
+    }),
+    [applyTabCache]
+  );
+  const clearScheduledRefresh = useCallback(() => {
+    refreshTimersRef.current.forEach((timer) => clearTimeout(timer));
+    refreshTimersRef.current = [];
+  }, []);
+  const scheduleRefreshBurst = useCallback(() => {
+    clearScheduledRefresh();
+    const delays = [200, 600, 1200, 2400];
+    const targetTabKey = activeTabKeyRef.current;
+    refreshTimersRef.current = delays.map(
+      (delay, index) => setTimeout(() => __async(void 0, null, function* () {
+        const snapshot = yield refreshSnapshot(targetTabKey);
+        const isLast = index === delays.length - 1;
+        if (snapshot.reports.length) {
+          setStatusText(t("loadingTrace.status.synced"));
+          clearScheduledRefresh();
+          return;
+        }
+        if (isLast) {
+          setStatusText(t("loadingTrace.status.noReports"));
+        }
+      }), delay)
+    );
+  }, [clearScheduledRefresh, refreshSnapshot, t]);
+  useEffect(() => {
+    activeTabKeyRef.current = activeTabKey;
+    const cached = tabCacheRef.current.get(activeTabKey);
+    setReports((cached == null ? void 0 : cached.reports) || []);
+    setSelectedTraceId(cached == null ? void 0 : cached.selectedTraceId);
+    setReportKeyword("");
+  }, [activeTabKey]);
+  useEffect(() => {
+    if (resetKey === resetKeyRef.current) {
+      return;
+    }
+    resetKeyRef.current = resetKey;
+    clearScheduledRefresh();
+    clearTabCache(activeTabKeyRef.current);
+    setStatusText(t("loadingTrace.status.noReports"));
+  }, [clearScheduledRefresh, clearTabCache, resetKey, t]);
+  useEffect(() => {
+    let cancelled = false;
+    const load = () => __async(void 0, null, function* () {
+      try {
+        const pageConfig = yield readObservabilityConfig();
+        if (!cancelled) {
+          setConfig(pageConfig);
+          setSavedConfig(pageConfig);
+        }
+        const snapshot = yield refreshSnapshot();
+        if (!cancelled) {
+          setStatusText(
+            snapshot.stored ? t("loadingTrace.status.enabled") : snapshot.hasUserObservabilityPlugin ? t("loadingTrace.status.userPlugin") : t("loadingTrace.status.disabled")
+          );
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setStatusText(t("loadingTrace.status.unavailable"));
+        }
+      }
+    });
+    void load();
+    return () => {
+      cancelled = true;
+      clearScheduledRefresh();
+    };
+  }, [clearScheduledRefresh, refreshSnapshot, t, tabId]);
+  useEffect(() => {
+    if (userPluginPollTimerRef.current) {
+      clearInterval(userPluginPollTimerRef.current);
+      userPluginPollTimerRef.current = null;
+    }
+    if (!hasUserObservabilityPlugin) {
+      return;
+    }
+    let polling = false;
+    userPluginPollTimerRef.current = setInterval(() => __async(void 0, null, function* () {
+      if (polling) {
+        return;
+      }
+      polling = true;
+      try {
+        const snapshot = yield refreshSnapshot(activeTabKeyRef.current);
+        if (snapshot.reports.length) {
+          setStatusText(t("loadingTrace.status.synced"));
+        }
+      } finally {
+        polling = false;
+      }
+    }), 1500);
+    return () => {
+      if (userPluginPollTimerRef.current) {
+        clearInterval(userPluginPollTimerRef.current);
+        userPluginPollTimerRef.current = null;
+      }
+    };
+  }, [hasUserObservabilityPlugin, refreshSnapshot, t]);
+  useEffect(() => {
+    const onMessage = (message, sender) => {
+      var _a2, _b2;
+      if ((message == null ? void 0 : message.type) !== MESSAGE_OBSERVABILITY_DEVTOOLS_EVENT) {
+        return;
+      }
+      const senderTabId = (_a2 = sender == null ? void 0 : sender.tab) == null ? void 0 : _a2.id;
+      const messageTabKey = getLoadingTraceTabKey(senderTabId || tabId);
+      const isCurrentTabMessage = !tabId || !senderTabId || senderTabId === tabId;
+      const payload = message.data;
+      if ((payload == null ? void 0 : payload.config) && isCurrentTabMessage) {
+        const nextConfig = normalizeObservabilityDevtoolsConfig(payload.config);
+        setConfig(nextConfig);
+        setSavedConfig(nextConfig);
+        setStored(payload.config.enabled !== false);
+      }
+      if ((payload == null ? void 0 : payload.kind) === "installed" && isCurrentTabMessage) {
+        setStatusText(t("loadingTrace.status.enabled"));
+        scheduleRefreshBurst();
+      }
+      if ((_b2 = payload == null ? void 0 : payload.report) == null ? void 0 : _b2.traceId) {
+        const report = __spreadProps(__spreadValues({}, payload.report), {
+          __scope: payload.scope || payload.report.__scope
+        });
+        applyTabCache(messageTabKey, (current) => ({
+          reports: mergeObservabilityReports(current.reports, [report]),
+          selectedTraceId: current.selectedTraceId || report.traceId
+        }));
+        if (isCurrentTabMessage) {
+          clearScheduledRefresh();
+          setStatusText(t("loadingTrace.status.synced"));
+        }
+      }
+    };
+    chrome.runtime.onMessage.addListener(onMessage);
+    return () => chrome.runtime.onMessage.removeListener(onMessage);
+  }, [applyTabCache, clearScheduledRefresh, scheduleRefreshBurst, tabId, t]);
+  const updateConfig = (patch) => {
+    setConfig(
+      (current) => normalizeObservabilityDevtoolsConfig(__spreadValues(__spreadValues({}, current), patch))
+    );
+  };
+  const applyAndReload = () => __async(void 0, null, function* () {
+    setBusy(true);
+    try {
+      const nextConfig = normalizeObservabilityDevtoolsConfig(__spreadProps(__spreadValues({}, config), {
+        enabled: true
+      }));
+      yield applyObservabilityConfig(nextConfig);
+      setConfig(nextConfig);
+      setSavedConfig(nextConfig);
+      setStored(true);
+      clearTabCache(activeTabKeyRef.current);
+      setStatusText(t("loadingTrace.status.reloading"));
+      yield reloadInspectedPage();
+      scheduleRefreshBurst();
+    } finally {
+      setBusy(false);
+    }
+  });
+  const confirmApply = () => {
+    Modal.confirm({
+      title: isObservabilityEnabled ? t("loadingTrace.confirm.updateTitle") : t("loadingTrace.confirm.observeTitle"),
+      content: t("loadingTrace.confirm.content"),
+      okText: t("loadingTrace.actions.confirm"),
+      cancelText: t("loadingTrace.actions.cancel"),
+      onOk: () => applyAndReload()
+    });
+  };
+  const disableAndReload = () => __async(void 0, null, function* () {
+    setBusy(true);
+    try {
+      yield disableObservabilityConfig();
+      clearScheduledRefresh();
+      setStored(false);
+      clearTabCache(activeTabKeyRef.current);
+      setStatusText(t("loadingTrace.status.disabled"));
+      yield reloadInspectedPage();
+    } finally {
+      setBusy(false);
+    }
+  });
+  const handleRefresh = () => __async(void 0, null, function* () {
+    setBusy(true);
+    try {
+      const snapshot = yield refreshSnapshot();
+      setStatusText(
+        snapshot.reports.length ? t("loadingTrace.status.synced") : t("loadingTrace.status.noReports")
+      );
+    } finally {
+      setBusy(false);
+    }
+  });
+  const handleExport = () => {
+    downloadJson(`mf-observability-${Date.now()}.json`, {
+      exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      config,
+      scopes,
+      reports
+    });
+  };
+  const currentLoadRows = useMemo(() => {
+    var _a2, _b2, _c, _d;
+    if (!selectedReport) {
+      return [];
+    }
+    const rows = [
+      {
+        labelKey: "consumer",
+        value: selectedReport.hostName
+      }
+    ];
+    if (selectedReport.shared) {
+      rows.push(
+        {
+          labelKey: "shared",
+          value: selectedReport.shared.name
+        },
+        {
+          labelKey: "provider",
+          value: selectedReport.shared.provider
+        },
+        {
+          labelKey: "requiredVersion",
+          value: selectedReport.shared.requiredVersion
+        },
+        {
+          labelKey: "selectedVersion",
+          value: selectedReport.shared.selectedVersion
+        },
+        {
+          labelKey: "availableVersions",
+          value: (_a2 = selectedReport.shared.availableVersions) == null ? void 0 : _a2.join(", ")
+        }
+      );
+    } else {
+      rows.push(
+        {
+          labelKey: "request",
+          value: selectedReport.requestId
+        },
+        {
+          labelKey: "producer",
+          value: ((_b2 = selectedReport.remote) == null ? void 0 : _b2.alias) || ((_c = selectedReport.remote) == null ? void 0 : _c.name)
+        },
+        {
+          labelKey: "remoteName",
+          value: (_d = selectedReport.remote) == null ? void 0 : _d.name
+        },
+        {
+          labelKey: "expose",
+          value: selectedReport.expose
+        }
+      );
+    }
+    return rows.filter((row) => formatCurrentLoadValue(row.value));
+  }, [selectedReport]);
+  return /* @__PURE__ */ jsxs("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ jsxs("section", { className: styles.toolbar, children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.titleGroup, children: [
+        /* @__PURE__ */ jsx("span", { className: styles.title, children: t("loadingTrace.title") }),
+        statusText ? /* @__PURE__ */ jsx("span", { className: styles.subtitle, children: statusText }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.actions, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: `${styles.configButton} ${showConfigPanel ? styles.configButtonActive : ""}`,
+            shape: "circle",
+            icon: /* @__PURE__ */ jsx(IconSettings, {}),
+            "aria-pressed": showConfigPanel,
+            title: t("loadingTrace.actions.config"),
+            onClick: () => setShowConfigPanel((visible) => !visible)
+          }
+        ),
+        shouldShowApplyButton ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: styles.primaryAction,
+            icon: /* @__PURE__ */ jsx(IconPlayArrow, {}),
+            loading: busy,
+            onClick: confirmApply,
+            children: isObservabilityEnabled ? t("loadingTrace.actions.updateConfig") : t("loadingTrace.actions.observeNow")
+          }
+        ) : null,
+        isObservabilityEnabled ? /* @__PURE__ */ jsx(Button, { loading: busy, onClick: disableAndReload, children: t("loadingTrace.actions.disable") }) : null,
+        /* @__PURE__ */ jsx(Button, { icon: /* @__PURE__ */ jsx(IconRefresh, {}), loading: busy, onClick: handleRefresh, children: t("loadingTrace.actions.refresh") }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: /* @__PURE__ */ jsx(IconDownload, {}),
+            disabled: !reports.length,
+            onClick: handleExport,
+            children: t("loadingTrace.actions.export")
+          }
+        )
+      ] })
+    ] }),
+    showConfigPanel ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("section", { className: styles.configGrid, children: [
+      /* @__PURE__ */ jsxs("label", { className: styles.field, children: [
+        /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            label: t("loadingTrace.config.level"),
+            tip: t("loadingTrace.config.levelTip")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SegmentedControl,
+          {
+            value: config.level,
+            options: levelOptions,
+            onChange: (level) => updateConfig({ level })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: styles.field, children: [
+        /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            label: t("loadingTrace.config.console"),
+            tip: t("loadingTrace.config.consoleTip")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: config.console,
+            onChange: (checked) => updateConfig({ console: checked })
+          }
+        )
+      ] })
+    ] }) }) : null,
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("section", { className: styles.stats, children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("span", { className: styles.statValueWithHelp, children: [
+            /* @__PURE__ */ jsx("span", { className: styles.statValue, children: sourceStateLabel }),
+            sourceStateLabel === "CUSTOM" ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${styles.inlineHelpIcon} ${styles.statHelpIcon}`,
+                "data-tip": t("loadingTrace.stats.customTip"),
+                tabIndex: 0,
+                "aria-label": t("loadingTrace.stats.customTip"),
+                children: /* @__PURE__ */ jsx(IconQuestionCircle, {})
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: styles.statLabel, children: t("loadingTrace.stats.state") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: styles.statValue, children: reports.length }),
+          /* @__PURE__ */ jsx("span", { className: styles.statLabel, children: t("loadingTrace.stats.reports") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: styles.statValue, children: eventCount }),
+          /* @__PURE__ */ jsx("span", { className: styles.statLabel, children: t("loadingTrace.stats.events") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { className: styles.statValue, children: ((_a = latestReport == null ? void 0 : latestReport.summary) == null ? void 0 : _a.outcome) || "-" }),
+          /* @__PURE__ */ jsx("span", { className: styles.statLabel, children: t("loadingTrace.stats.latest") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "section",
+        {
+          className: `${styles.viewer} ${reports.length ? "" : styles.viewerEmpty}`,
+          children: reports.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.reportList, children: [
+              /* @__PURE__ */ jsx("div", { className: styles.reportFilter, children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  className: styles.reportSearch,
+                  prefix: /* @__PURE__ */ jsx(IconSearch, {}),
+                  allowClear: true,
+                  placeholder: t("loadingTrace.reports.search"),
+                  value: reportKeyword,
+                  onChange: (value) => setReportKeyword(value)
+                }
+              ) }),
+              filteredReports.length ? filteredReports.map((report) => {
+                const state = getReportState(report);
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${styles.reportItem} ${(selectedReport == null ? void 0 : selectedReport.traceId) === report.traceId ? styles.activeReport : ""}`,
+                    onClick: () => applyTabCache(activeTabKeyRef.current, (current) => __spreadProps(__spreadValues({}, current), {
+                      selectedTraceId: report.traceId
+                    })),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: styles.reportTitle, children: getReportTitle(report) }),
+                      /* @__PURE__ */ jsx("span", { className: styles.reportTagRow, children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${styles.statusTag} ${styles[`statusTag${state}`]}`,
+                          children: t(`loadingTrace.reports.${state}`)
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx("span", { className: styles.reportMeta, children: formatTime(report.updatedAt) })
+                    ]
+                  },
+                  report.traceId
+                );
+              }) : /* @__PURE__ */ jsx("div", { className: styles.emptyPanel, children: /* @__PURE__ */ jsx(Empty, { description: t("loadingTrace.reports.noMatch") }) })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: styles.timeline, children: selectedReport ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              (() => {
+                const limitedObservability = getLimitedObservabilityLabel(selectedReport);
+                const observabilityScopeLabel = getObservabilityReportScopeLabel(selectedReport);
+                return /* @__PURE__ */ jsxs("div", { className: styles.reportHeader, children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: styles.reportHeading, children: getReportTitle(selectedReport) }),
+                    /* @__PURE__ */ jsx("span", { className: styles.traceId, children: selectedReport.traceId })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: styles.tags, children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `${styles.statusTag} ${styles[`statusTag${getReportState(selectedReport)}`]}`,
+                        children: t(
+                          `loadingTrace.reports.${getReportState(selectedReport)}`
+                        )
+                      }
+                    ),
+                    observabilityScopeLabel ? /* @__PURE__ */ jsx("span", { className: styles.limitedTag, children: /* @__PURE__ */ jsx("span", { children: observabilityScopeLabel }) }) : null,
+                    limitedObservability ? /* @__PURE__ */ jsxs("span", { className: styles.limitedTag, children: [
+                      /* @__PURE__ */ jsx("span", { children: t("loadingTrace.reports.limited") }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: styles.inlineHelpIcon,
+                          "data-tip": t(
+                            `loadingTrace.reports.${limitedObservability}Tip`
+                          ),
+                          tabIndex: 0,
+                          "aria-label": t(
+                            `loadingTrace.reports.${limitedObservability}Tip`
+                          ),
+                          children: /* @__PURE__ */ jsx(IconQuestionCircle, {})
+                        }
+                      )
+                    ] }) : null
+                  ] })
+                ] });
+              })(),
+              currentLoadRows.length ? /* @__PURE__ */ jsxs("div", { className: styles.currentLoad, children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.currentLoadHeader, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.currentLoadTitle, children: t("loadingTrace.currentLoad.title") }),
+                  /* @__PURE__ */ jsx("span", { className: styles.currentLoadSummary, children: selectedReport.shared ? t("loadingTrace.currentLoad.sharedReport") : t("loadingTrace.currentLoad.remoteReport") })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: styles.currentLoadRows, children: currentLoadRows.map((row) => /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: styles.currentLoadRow,
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: styles.currentLoadLabel, children: t(`loadingTrace.currentLoad.${row.labelKey}`) }),
+                      /* @__PURE__ */ jsx("span", { className: styles.currentLoadValue, children: formatCurrentLoadValue(row.value) })
+                    ]
+                  },
+                  row.labelKey
+                )) })
+              ] }) : null,
+              ((_b = selectedReport.diagnosis) == null ? void 0 : _b.title) ? /* @__PURE__ */ jsx("div", { className: styles.diagnosis, children: selectedReport.diagnosis.title }) : null,
+              selectedReport.loadedBefore ? /* @__PURE__ */ jsxs("div", { className: styles.loadedBefore, children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.loadedBeforeHeader, children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.loadedBeforeTitle, children: t("loadingTrace.loadedBefore.title") }),
+                  /* @__PURE__ */ jsx("span", { className: styles.loadedBeforeSummary, children: t("loadingTrace.loadedBefore.consumerCount", {
+                    count: selectedReport.loadedBefore.consumers.length
+                  }) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: styles.loadedBeforeTags, children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${styles.loadedBeforeTag} ${styles.loadedBeforeTagSuccess}`,
+                      children: t("loadingTrace.loadedBefore.producerLoaded")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: `${styles.loadedBeforeTag} ${selectedReport.loadedBefore.expose ? styles.loadedBeforeTagSuccess : styles.loadedBeforeTagNeutral}`,
+                      children: selectedReport.loadedBefore.expose ? t("loadingTrace.loadedBefore.exposeLoaded") : t("loadingTrace.loadedBefore.exposeNotLoaded")
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: styles.loadedBeforeConsumers, children: selectedReport.loadedBefore.consumers.map(
+                  (consumer, index) => {
+                    var _a2;
+                    return /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: styles.loadedBeforeConsumer,
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { className: styles.loadedBeforeRow, children: [
+                            /* @__PURE__ */ jsx("span", { className: styles.loadedBeforeLabel, children: t("loadingTrace.loadedBefore.consumer") }),
+                            /* @__PURE__ */ jsx("span", { className: styles.loadedBeforeName, children: consumer.name || t(
+                              "loadingTrace.loadedBefore.unknownConsumer"
+                            ) })
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { className: styles.loadedBeforeRow, children: [
+                            /* @__PURE__ */ jsx("span", { className: styles.loadedBeforeLabel, children: t("loadingTrace.loadedBefore.status") }),
+                            /* @__PURE__ */ jsx("span", { className: styles.loadedBeforeMeta, children: [
+                              consumer.remoteEntryExports ? t(
+                                "loadingTrace.loadedBefore.entryReady"
+                              ) : t(
+                                "loadingTrace.loadedBefore.entryMissing"
+                              ),
+                              consumer.containerInitialized ? t(
+                                "loadingTrace.loadedBefore.initReady"
+                              ) : t(
+                                "loadingTrace.loadedBefore.initMissing"
+                              )
+                            ].join(" · ") })
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { className: styles.loadedBeforeRow, children: [
+                            /* @__PURE__ */ jsx("span", { className: styles.loadedBeforeLabel, children: t("loadingTrace.loadedBefore.exposes") }),
+                            /* @__PURE__ */ jsx("span", { className: styles.loadedBeforeExposes, children: ((_a2 = consumer.exposes) == null ? void 0 : _a2.length) ? consumer.exposes.join(", ") : t(
+                              "loadingTrace.loadedBefore.noExposes"
+                            ) })
+                          ] })
+                        ]
+                      },
+                      `${consumer.name || "consumer"}-${index}`
+                    );
+                  }
+                ) })
+              ] }) : null,
+              /* @__PURE__ */ jsx("div", { className: styles.eventList, children: (selectedReport.events || []).map((event, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: styles.eventItem,
+                  children: [
+                    /* @__PURE__ */ jsx("div", { className: styles.eventTime, children: formatTime(event.timestamp) }),
+                    /* @__PURE__ */ jsxs("div", { className: styles.eventBody, children: [
+                      /* @__PURE__ */ jsxs("div", { className: styles.eventMain, children: [
+                        /* @__PURE__ */ jsx("span", { className: styles.phase, children: event.phase }),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: `${styles.eventStatusTag} ${styles[`eventStatusTag${getEventStatusState(
+                              event.status
+                            )}`]}`,
+                            children: event.status
+                          }
+                        ),
+                        event.recovered ? /* @__PURE__ */ jsx("span", { className: styles.eventRecoveredTag, children: t("loadingTrace.reports.eventRecovered") }) : null,
+                        event.duration !== void 0 ? /* @__PURE__ */ jsxs("span", { className: styles.duration, children: [
+                          event.duration,
+                          "ms"
+                        ] }) : null
+                      ] }),
+                      /* @__PURE__ */ jsx("div", { className: styles.eventMeta, children: event.message || event.lifecycle || event.requestId || "-" }),
+                      event.errorMessage ? /* @__PURE__ */ jsx("div", { className: styles.error, children: event.errorCode ? `${event.errorCode}: ${event.errorMessage}` : event.errorMessage }) : null
+                    ] })
+                  ]
+                },
+                `${event.traceId}-${event.phase}-${event.timestamp}-${index}`
+              )) })
+            ] }) : null })
+          ] }) : /* @__PURE__ */ jsx("div", { className: styles.emptyPanel, children: /* @__PURE__ */ jsx(Empty, { description: emptyDescription }) })
+        }
+      )
+    ] })
+  ] });
+};
+var LoadingTrace_default = LoadingTrace;
+export {
+  LoadingTrace_default as default
+};