@lark-apaas/client-toolkit-lite 1.1.7-alpha.0 → 1.1.7-alpha.10

package/dist/index.cjs

@@ -33,6 +33,7 @@ var index_exports = {};
 __export(index_exports, {
   ActiveLink: () => ActiveLink,
   AppContainer: () => AppContainer_default,
+  ErrorRender: () => ErrorRender_default,
   NavLink: () => NavLink2,
   PagePlaceholder: () => PagePlaceholder_default,
   QueryProvider: () => QueryProvider_default,
@@ -42,6 +43,7 @@ __export(index_exports, {
   avatarImages: () => avatar_exports,
   axiosForBackend: () => axiosForBackend,
   bannerImages: () => banner_exports,
+  capabilityClient: () => capabilityClient,
   clsxWithTw: () => clsxWithTw,
   copyToClipboard: () => copyToClipboard,
   coverImages: () => cover_exports,
@@ -58,6 +60,7 @@ __export(index_exports, {
   isIpad: () => isIpad,
   isMobile: () => isMobile,
   isPreview: () => isPreview,
+  logger: () => logger,
   normalizeBasePath: () => normalizeBasePath,
   reportTeaEvent: () => reportTeaEvent,
   resolveAppUrl: () => resolveAppUrl,
@@ -71,7 +74,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/AppContainer/index.tsx
-var import_react7 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
+var import_miaoda_inspector = require("@lark-apaas/miaoda-inspector");
 
 // src/runtime/react-devtools-hook.ts
 if (typeof window !== "undefined" && process.env.NODE_ENV !== "production") {
@@ -127,15 +131,15 @@ function initAxiosConfig(axiosInstance2) {
   if (!axiosInstance2) {
     axiosInstance2 = import_axios.default;
   }
-  axiosInstance2.interceptors.request.use((config) => {
+  axiosInstance2.interceptors.request.use((config2) => {
     const csrfToken = getCsrfToken();
     if (csrfToken) {
-      config.headers["X-Suda-Csrf-Token"] = csrfToken;
+      config2.headers["X-Suda-Csrf-Token"] = csrfToken;
     }
     if (typeof window !== "undefined") {
-      config.headers["X-Page-Route"] = window.location.pathname;
+      config2.headers["X-Page-Route"] = window.location.pathname;
     }
-    return config;
+    return config2;
   }, (error) => Promise.reject(error));
   axiosInstance2.interceptors.response.use((response) => response, (error) => {
     if (process.env.NODE_ENV !== "production") {
@@ -146,10 +150,694 @@ function initAxiosConfig(axiosInstance2) {
 }
 __name(initAxiosConfig, "initAxiosConfig");
 
+// src/logger/logger.ts
+var import_observable_web = require("@lark-apaas/observable-web");
+
+// src/utils/hmr-api.ts
+var import_meta = {};
+function createWebpackHmrApi(hot) {
+  return {
+    onSuccess(callback) {
+      let lastStatus = null;
+      const handler = /* @__PURE__ */ __name((status) => {
+        if (status === "idle" && lastStatus === "apply") {
+          try {
+            callback();
+          } catch (e) {
+            console.error("[HMR] Success callback error:", e);
+          }
+        }
+        lastStatus = status;
+      }, "handler");
+      hot.addStatusHandler(handler);
+      return () => hot.removeStatusHandler(handler);
+    },
+    onError(callback) {
+      const handler = /* @__PURE__ */ __name((status) => {
+        if (status === "fail" || status === "abort") {
+          try {
+            callback(new Error(`HMR ${status}`));
+          } catch (e) {
+            console.error("[HMR] Error callback error:", e);
+          }
+        }
+      }, "handler");
+      hot.addStatusHandler(handler);
+      return () => hot.removeStatusHandler(handler);
+    }
+  };
+}
+__name(createWebpackHmrApi, "createWebpackHmrApi");
+function getHmrApi() {
+  if (process.env.NODE_ENV === "production") return null;
+  if (import_meta.webpackHot) {
+    return createWebpackHmrApi(import_meta.webpackHot);
+  }
+  if (typeof module !== "undefined" && module.hot) {
+    return createWebpackHmrApi(module.hot);
+  }
+  if (window.__VITE_HMR__) {
+    return window.__VITE_HMR__;
+  }
+  return null;
+}
+__name(getHmrApi, "getHmrApi");
+
+// src/utils/postMessage.ts
+var PARENT_ORIGIN_KEY = "__parentOrigin";
+function getParentOriginFromParams() {
+  try {
+    const params = new URLSearchParams(window.location.search);
+    const origin = params.get(PARENT_ORIGIN_KEY);
+    if (origin) {
+      sessionStorage.setItem(PARENT_ORIGIN_KEY, origin);
+      return origin;
+    }
+  } catch {
+  }
+  try {
+    return sessionStorage.getItem(PARENT_ORIGIN_KEY) || void 0;
+  } catch {
+    return void 0;
+  }
+}
+__name(getParentOriginFromParams, "getParentOriginFromParams");
+function getLegacyParentOrigin() {
+  const { origin } = window.location;
+  if (origin.includes("force.feishuapp.net")) {
+    return "https://force.feishu.cn";
+  }
+  if (origin.includes("force-pre.feishuapp.net")) {
+    return "https://force.feishu-pre.cn";
+  }
+  if (origin.includes("force.byted.org")) {
+    return "https://force.feishu-boe.cn";
+  }
+  if (origin.includes("feishuapp.cn") || origin.includes("miaoda.feishuapp.net")) {
+    return "https://miaoda.feishu.cn";
+  }
+  if (origin.includes("fsapp.kundou.cn") || origin.includes("miaoda-pre.feishuapp.net")) {
+    return "https://miaoda.feishu-pre.cn";
+  }
+  return "https://miaoda.feishu-boe.cn";
+}
+__name(getLegacyParentOrigin, "getLegacyParentOrigin");
+function resolveParentOrigin() {
+  try {
+    if (document.referrer) {
+      const referrerOrigin = new URL(document.referrer).origin;
+      if (referrerOrigin.startsWith("http://localhost") || referrerOrigin.startsWith("http://127.0.0.1")) {
+        return referrerOrigin;
+      }
+    }
+  } catch {
+  }
+  const paramOrigin = getParentOriginFromParams();
+  if (paramOrigin) return paramOrigin;
+  return process.env?.FORCE_FRAMEWORK_DOMAIN_MAIN ?? getLegacyParentOrigin();
+}
+__name(resolveParentOrigin, "resolveParentOrigin");
+function submitPostMessage(message, targetOrigin) {
+  try {
+    const parentOrigin = resolveParentOrigin();
+    const origin = targetOrigin ?? parentOrigin;
+    if (!origin) return;
+    window.parent.postMessage(message, origin);
+  } catch (e) {
+    console.error("postMessage error", e);
+  }
+}
+__name(submitPostMessage, "submitPostMessage");
+
+// src/logger/log-types.ts
+var LOG_LEVELS = [
+  "debug",
+  "info",
+  "warn",
+  "error",
+  "success"
+];
+function isLogLevel(value) {
+  return typeof value === "string" && LOG_LEVELS.includes(value);
+}
+__name(isLogLevel, "isLogLevel");
+
+// src/logger/intercept-global-error.ts
+var devServerDisconnectInfo = null;
+var retryCount = 0;
+function processDevServerLog(log) {
+  if (!log) return;
+  const devFlag = log.includes("[webpack-dev-server]") || log.includes("[vite]");
+  if (devFlag && log.includes("Disconnected")) {
+    const time = Date.now();
+    devServerDisconnectInfo = {
+      time
+    };
+    submitPostMessage({
+      type: "DevServerMessage",
+      data: {
+        type: "devServer-status",
+        status: "disconnected"
+      }
+    });
+    return;
+  }
+  if (!devServerDisconnectInfo) {
+    return;
+  }
+  if (devFlag && log.includes("Trying to reconnect")) {
+    retryCount++;
+    return;
+  }
+  const hmrFlag = log.includes("[HMR]");
+  if (hmrFlag || devFlag && (log.includes("Socket connected") || log.includes("App updated") || log.includes("App hot update") || log.includes("connected"))) {
+    submitPostMessage({
+      type: "DevServerMessage",
+      data: {
+        type: "devServer-status",
+        status: "connected"
+      }
+    });
+    devServerDisconnectInfo = null;
+    retryCount = 0;
+  }
+}
+__name(processDevServerLog, "processDevServerLog");
+function listenModuleHmr() {
+  const hmr = getHmrApi();
+  if (hmr) {
+    hmr.onSuccess(() => {
+      submitPostMessage({
+        type: "DevServerMessage",
+        data: {
+          type: "devServer-status",
+          status: "hmr-apply-success"
+        }
+      });
+    });
+    hmr.onError((error) => {
+      console.warn("hmr apply failed", error);
+    });
+  }
+}
+__name(listenModuleHmr, "listenModuleHmr");
+var PROXY_CONSOLE_METHOD = [
+  "log",
+  "info",
+  "warn",
+  "error"
+];
+function interceptErrors() {
+  window.addEventListener("error", (event) => {
+    logger.error(event.error);
+  });
+  window.addEventListener("unhandledrejection", (event) => {
+    logger.error(event.reason);
+  });
+  listenModuleHmr();
+  PROXY_CONSOLE_METHOD.forEach((method) => {
+    const originalMethod = window.console[method];
+    window.console[method] = (...args) => {
+      originalMethod(...args);
+      const level = method === "log" ? "info" : method;
+      const first = args[0];
+      if (typeof first === "string") {
+        processDevServerLog(first);
+      }
+      if (typeof first === "string" && first.startsWith("[Dataloom]") && isLogLevel(level)) {
+        logger.log({
+          level,
+          args
+        });
+        submitPostMessage({
+          type: "Console",
+          method,
+          data: args
+        });
+      }
+    };
+  });
+}
+__name(interceptErrors, "interceptErrors");
+
+// src/utils/safeStringify.ts
+function safeStringify(obj) {
+  const seen = /* @__PURE__ */ new Set();
+  try {
+    return JSON.stringify(obj, (_key, value) => {
+      if (typeof value === "object" && value !== null) {
+        if (seen.has(value)) {
+          return "[Circular]";
+        }
+        seen.add(value);
+      }
+      if (typeof value === "bigint") {
+        return value.toString();
+      }
+      if (value instanceof Date) {
+        return value.toISOString();
+      }
+      if (value instanceof Map) {
+        return Object.fromEntries(value);
+      }
+      if (value instanceof Set) {
+        return Array.from(value);
+      }
+      if (value instanceof Error) {
+        return {
+          name: value.name,
+          message: value.message,
+          stack: value.stack
+        };
+      }
+      if (typeof value === "undefined") {
+        return "undefined";
+      }
+      if (typeof value === "symbol") {
+        return value.toString();
+      }
+      return value;
+    });
+  } catch {
+    return "";
+  } finally {
+    seen.clear();
+  }
+}
+__name(safeStringify, "safeStringify");
+function processLogParams(args) {
+  return args.map((arg) => {
+    if (typeof arg === "string") return arg;
+    if (arg instanceof Error) {
+      return `${arg.name}: ${arg.message}
+${arg.stack ?? ""}`;
+    }
+    if (typeof arg === "object" && arg !== null) {
+      return safeStringify(arg);
+    }
+    return String(arg);
+  });
+}
+__name(processLogParams, "processLogParams");
+function mapLogLevel(level) {
+  if (level === "warn") return "WARN";
+  if (level === "error") return "ERROR";
+  return "INFO";
+}
+__name(mapLogLevel, "mapLogLevel");
+
+// src/logger/logger.ts
+var shouldReportToObservable = process.env.NODE_ENV === "production";
+var ORDERED_LEVELS = [
+  "debug",
+  "info",
+  "warn",
+  "error"
+];
+var defaultConfig = {
+  showLevel: false,
+  showTimestamp: false,
+  level: "info",
+  prefix: ""
+};
+var config = {
+  ...defaultConfig
+};
+function configureLogger(options) {
+  config = {
+    ...defaultConfig,
+    ...options
+  };
+}
+__name(configureLogger, "configureLogger");
+function shouldLog(level) {
+  return ORDERED_LEVELS.indexOf(level) >= ORDERED_LEVELS.indexOf(config.level);
+}
+__name(shouldLog, "shouldLog");
+function getFormattedPrefix(level) {
+  const parts = [];
+  if (config.prefix) {
+    parts.push(`[${config.prefix}]`);
+  }
+  if (config.showLevel) {
+    parts.push(`[${level.toUpperCase()}]`);
+  }
+  return parts;
+}
+__name(getFormattedPrefix, "getFormattedPrefix");
+configureLogger({
+  showLevel: true,
+  showTimestamp: false,
+  level: process.env.NODE_ENV === "development" ? "debug" : "error",
+  prefix: "MiaoDa"
+});
+var logger = {
+  debug(message, ...args) {
+    if (shouldLog("debug")) {
+      console.log(...getFormattedPrefix("debug"), message, ...args);
+    }
+  },
+  info(message, ...args) {
+    if (shouldLog("info")) {
+      console.log(...getFormattedPrefix("info"), message, ...args);
+    }
+    if (shouldReportToObservable) {
+      import_observable_web.observable.log("INFO", processLogParams([
+        message,
+        ...args
+      ]).join(" "));
+    }
+  },
+  warn(message, ...args) {
+    if (shouldLog("warn")) {
+      console.log(...getFormattedPrefix("warn"), message, ...args);
+    }
+    if (shouldReportToObservable) {
+      import_observable_web.observable.log("WARN", processLogParams([
+        message,
+        ...args
+      ]).join(" "));
+    }
+  },
+  error(message, ...args) {
+    if (shouldLog("error")) {
+      console.error(...getFormattedPrefix("error"), message, ...args);
+    }
+    if (shouldReportToObservable) {
+      import_observable_web.observable.log("ERROR", processLogParams([
+        message,
+        ...args
+      ]).join(" "));
+    }
+  },
+  success(message, ...args) {
+    if (shouldLog("info")) {
+      console.log(...getFormattedPrefix("success"), message, ...args);
+    }
+    if (shouldReportToObservable) {
+      import_observable_web.observable.log("INFO", processLogParams([
+        message,
+        ...args
+      ]).join(" "));
+    }
+  },
+  log({ level, args }) {
+    if (shouldLog(level)) {
+      console.log(...getFormattedPrefix(level), ...args);
+    }
+    if (shouldReportToObservable && level !== "debug") {
+      import_observable_web.observable.log(mapLogLevel(level), processLogParams(args).join(" "));
+    }
+  }
+};
+if (process.env.NODE_ENV !== "production") {
+  window.__RUNTIME_LOGGER__ = {
+    get() {
+      return logger;
+    }
+  };
+}
+if (process.env.NODE_ENV !== "production") {
+  interceptErrors();
+}
+
+// src/runtime/iframe-bridge.ts
+var import_penpal = require("penpal");
+
+// src/logger/batch-logger.ts
+var BatchLogger = class {
+  static {
+    __name(this, "BatchLogger");
+  }
+  config;
+  logQueue = [];
+  flushTimer = null;
+  isProcessing = false;
+  originConsole;
+  constructor(console1, config2) {
+    this.originConsole = {
+      ...console1
+    };
+    const { userId = "", tenantId = "", appId = "" } = window || {};
+    this.config = {
+      userId,
+      tenantId,
+      appId,
+      // 需要加请求路径前缀
+      endpoint: (process.env.CLIENT_BASE_PATH || "") + "/dev/logs/collect-batch",
+      sizeThreshold: 20,
+      flushInterval: 1e3,
+      maxRetries: 3,
+      retryDelay: 500,
+      headers: {
+        "Content-Type": "application/json"
+      },
+      ...config2 || {}
+    };
+    this.startFlushTimer();
+    this.setupBeforeUnloadHandler();
+  }
+  /**
+  * 批量记录日志（对外暴露的唯一方法）
+  */
+  batchLog(level, message, source) {
+    const logEntry = {
+      id: this.generateId(),
+      level,
+      message,
+      source,
+      timestamp: Date.now()
+    };
+    this.logQueue.push(logEntry);
+    if (this.logQueue.length >= this.config.sizeThreshold) {
+      this.flush();
+    }
+  }
+  /**
+  * 刷新日志队列，全部发送
+  */
+  async flush() {
+    if (this.isProcessing || this.logQueue.length === 0) {
+      return;
+    }
+    this.isProcessing = true;
+    const logsToSend = this.logQueue.splice(0, this.logQueue.length);
+    try {
+      await this.sendBatch(logsToSend);
+    } catch (error) {
+      this.logQueue.unshift(...logsToSend);
+    } finally {
+      this.isProcessing = false;
+    }
+  }
+  /**
+  * 发送日志批次到后端
+  */
+  async sendBatch(logs) {
+    const collectLogs = logs.map((log) => ({
+      level: log.level,
+      message: log.message,
+      time: new Date(log.timestamp).toISOString(),
+      source: log.source,
+      user_id: this.config.userId,
+      tenant_id: this.config.tenantId,
+      app_id: this.config.appId
+    }));
+    let retries = 0;
+    while (retries <= this.config.maxRetries) {
+      try {
+        await this.execFetch(this.config.endpoint, {
+          method: "POST",
+          headers: this.config.headers,
+          body: JSON.stringify(collectLogs)
+        });
+        return;
+      } catch (error) {
+        retries++;
+        if (retries > this.config.maxRetries) {
+          this.originConsole.error(`Failed to send logs (attempt ${retries}), retrying in ${this.config.retryDelay}ms...`);
+        } else {
+          this.originConsole.warn(`Failed to send logs (attempt ${retries}), retrying in ${this.config.retryDelay}ms...`);
+        }
+        await this.delay(this.config.retryDelay * retries);
+      }
+    }
+  }
+  /**
+  * 执行实际的fetch请求
+  */
+  async execFetch(url, options) {
+    return fetch(url, options);
+  }
+  /**
+  * 启动自动刷新定时器
+  */
+  startFlushTimer() {
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer);
+    }
+    this.flushTimer = setInterval(() => {
+      if (this.logQueue.length > 0) {
+        this.flush();
+      }
+    }, this.config.flushInterval);
+  }
+  /**
+  * 设置页面卸载时的处理
+  */
+  setupBeforeUnloadHandler() {
+    if (typeof window !== "undefined") {
+      window.addEventListener("beforeunload", () => {
+        this.flush().finally(() => {
+          this.destroy();
+        });
+      });
+    }
+  }
+  /**
+  * 延迟函数
+  */
+  delay(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+  /**
+  * 生成唯一ID
+  */
+  generateId() {
+    return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  /**
+  * 销毁资源
+  */
+  async destroy() {
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer);
+      this.flushTimer = null;
+    }
+    if (this.logQueue.length > 0) {
+      await this.flush();
+    }
+  }
+  /**
+  * 获取队列大小
+  */
+  getQueueSize() {
+    return this.logQueue.length;
+  }
+  /**
+  * 更新配置
+  */
+  updateConfig(newConfig) {
+    this.config = {
+      ...this.config,
+      ...newConfig
+    };
+    this.startFlushTimer();
+  }
+};
+var defaultBatchLogger = null;
+function batchLogInfo(level, message, source) {
+  if (!defaultBatchLogger) {
+    return;
+  }
+  defaultBatchLogger.batchLog(level, message, source);
+}
+__name(batchLogInfo, "batchLogInfo");
+if (process.env.NODE_ENV !== "production" && typeof window !== "undefined") {
+  defaultBatchLogger = new BatchLogger(console);
+}
+
+// src/utils/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function clsxWithTw(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+__name(clsxWithTw, "clsxWithTw");
+function isPreview() {
+  return window.IS_MIAODA_PREVIEW;
+}
+__name(isPreview, "isPreview");
+function normalizeBasePath(basePath) {
+  if (!basePath || basePath === "/") {
+    return "";
+  }
+  return basePath.replace(/\/+$/, "");
+}
+__name(normalizeBasePath, "normalizeBasePath");
+function getWsPath() {
+  const rawBasePath = process.env.CLIENT_BASE_PATH || "/";
+  const normalizedBasePath = rawBasePath.startsWith("/") ? rawBasePath : `/${rawBasePath}`;
+  const basePathWithoutTrailingSlash = normalizedBasePath.endsWith("/") ? normalizedBasePath.slice(0, -1) : normalizedBasePath;
+  return `${basePathWithoutTrailingSlash}/ws`;
+}
+__name(getWsPath, "getWsPath");
+function isSparkRuntime() {
+  return window._IS_Spark_RUNTIME ?? process.env.runtimeMode === "fullstack";
+}
+__name(isSparkRuntime, "isSparkRuntime");
+
+// src/components/AppContainer/utils/childApi.ts
+async function getRoutes() {
+  let routes = [
+    {
+      path: "/"
+    }
+  ];
+  try {
+    const basePath = normalizeBasePath(process.env.CLIENT_BASE_PATH);
+    const res = await fetch(`${basePath}/routes.json`);
+    routes = await res.json();
+  } catch (error) {
+    console.warn("get routes.json error", error);
+  }
+  return routes;
+}
+__name(getRoutes, "getRoutes");
+var childApi = {
+  getRoutes,
+  updateAppInfo: /* @__PURE__ */ __name((appInfo) => {
+    dispatchEvent(new CustomEvent("MiaoDaMetaInfoChanged", {
+      detail: appInfo
+    }));
+  }, "updateAppInfo")
+};
+
+// src/runtime/iframe-bridge.ts
+async function connectParent() {
+  submitPostMessage({
+    type: "PreviewReady",
+    data: {}
+  });
+  batchLogInfo("info", JSON.stringify({
+    type: "PreviewReady",
+    timestamp: Date.now(),
+    url: window.location.href
+  }));
+  const parentOrigin = resolveParentOrigin();
+  if (!parentOrigin) return;
+  const connection = (0, import_penpal.connectToParent)({
+    parentOrigin,
+    methods: {
+      ...childApi
+    }
+  });
+  await connection.promise;
+}
+__name(connectParent, "connectParent");
+function initIframeBridge() {
+  if (window.parent === window) return;
+  connectParent();
+}
+__name(initIframeBridge, "initIframeBridge");
+
 // src/runtime/index.ts
 if (!window.__FULLSTACK_RUNTIME_INITIALIZED__) {
   window.__FULLSTACK_RUNTIME_INITIALIZED__ = true;
   initAxiosConfig();
+  if (process.env.NODE_ENV !== "production") {
+    initIframeBridge();
+  }
 }
 
 // src/components/AppContainer/safety.tsx
@@ -224,36 +912,6 @@ function getInitialInfo(refresh = false) {
 }
 __name(getInitialInfo, "getInitialInfo");
 
-// src/utils/utils.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-function clsxWithTw(...inputs) {
-  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
-}
-__name(clsxWithTw, "clsxWithTw");
-function isPreview() {
-  return window.IS_MIAODA_PREVIEW;
-}
-__name(isPreview, "isPreview");
-function normalizeBasePath(basePath) {
-  if (!basePath || basePath === "/") {
-    return "";
-  }
-  return basePath.replace(/\/+$/, "");
-}
-__name(normalizeBasePath, "normalizeBasePath");
-function getWsPath() {
-  const rawBasePath = process.env.CLIENT_BASE_PATH || "/";
-  const normalizedBasePath = rawBasePath.startsWith("/") ? rawBasePath : `/${rawBasePath}`;
-  const basePathWithoutTrailingSlash = normalizedBasePath.endsWith("/") ? normalizedBasePath.slice(0, -1) : normalizedBasePath;
-  return `${basePathWithoutTrailingSlash}/ws`;
-}
-__name(getWsPath, "getWsPath");
-function isSparkRuntime() {
-  return window._IS_Spark_RUNTIME ?? process.env.runtimeMode === "fullstack";
-}
-__name(isSparkRuntime, "isSparkRuntime");
-
 // src/integrations/getAppInfo.ts
 async function getAppInfo(refresh = false) {
   let appInfo = typeof window !== "undefined" ? window._appInfo : void 0;
@@ -1136,6 +1794,92 @@ var QueryProvider = /* @__PURE__ */ __name(({ children, client }) => {
 }, "QueryProvider");
 var QueryProvider_default = QueryProvider;
 
+// src/components/AppContainer/IframeBridge.tsx
+var import_react8 = require("react");
+var import_react_router_dom = require("react-router-dom");
+
+// src/hooks/useUpdatingRef.ts
+var import_react7 = require("react");
+function useUpdatingRef(value) {
+  const ref = (0, import_react7.useRef)(value);
+  ref.current = value;
+  return ref;
+}
+__name(useUpdatingRef, "useUpdatingRef");
+
+// src/components/AppContainer/IframeBridge.tsx
+var RouteMessageType = /* @__PURE__ */ (function(RouteMessageType2) {
+  RouteMessageType2["RouteChange"] = "RouteChange";
+  RouteMessageType2["RouteBack"] = "RouteBack";
+  RouteMessageType2["RouteForward"] = "RouteForward";
+  return RouteMessageType2;
+})(RouteMessageType || {});
+function isRouteMessageType(type) {
+  return Object.values(RouteMessageType).includes(type);
+}
+__name(isRouteMessageType, "isRouteMessageType");
+function IframeBridge() {
+  const location = (0, import_react_router_dom.useLocation)();
+  const navigate = (0, import_react_router_dom.useNavigate)();
+  const navigateRef = useUpdatingRef(navigate);
+  const isActive = (0, import_react8.useRef)(false);
+  const historyBack = (0, import_react8.useCallback)((_payload) => {
+    navigateRef.current(-1);
+    isActive.current = true;
+  }, [
+    navigateRef
+  ]);
+  const historyForward = (0, import_react8.useCallback)((_payload) => {
+    navigateRef.current(1);
+    isActive.current = true;
+  }, [
+    navigateRef
+  ]);
+  const operatorMessage = (0, import_react8.useMemo)(() => ({
+    ["RouteBack"]: historyBack,
+    ["RouteForward"]: historyForward,
+    ["RouteChange"]: navigateRef.current
+  }), [
+    historyBack,
+    historyForward,
+    navigateRef
+  ]);
+  (0, import_react8.useEffect)(() => {
+    if (isActive.current) {
+      isActive.current = false;
+      return;
+    }
+    submitPostMessage({
+      type: "ChildLocationChange",
+      data: location
+    });
+  }, [
+    location
+  ]);
+  const handleMessage = (0, import_react8.useCallback)((event) => {
+    const data = event.data ?? {};
+    if (typeof data.type === "string" && isRouteMessageType(data.type)) {
+      operatorMessage[data.type](data.data);
+    }
+  }, [
+    operatorMessage
+  ]);
+  (0, import_react8.useEffect)(() => {
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [
+    handleMessage
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    style: {
+      display: "none"
+    }
+  });
+}
+__name(IframeBridge, "IframeBridge");
+
 // src/components/AppContainer/utils/tea.ts
 var import_blueimp_md5 = __toESM(require("blueimp-md5"), 1);
 var import_sha1 = __toESM(require("crypto-js/sha1"), 1);
@@ -1247,6 +1991,31 @@ var reportTeaEvent = /* @__PURE__ */ __name(async ({ trackKey, trackParams = {}
   }
 }, "reportTeaEvent");
 
+// src/components/AppContainer/utils/observable.ts
+var import_observable_web2 = require("@lark-apaas/observable-web");
+var initObservable = /* @__PURE__ */ __name(() => {
+  try {
+    const appId = window.appId;
+    import_observable_web2.observable.start({
+      serviceName: "app",
+      env: process.env.NODE_ENV === "development" ? import_observable_web2.AppEnv.Dev : import_observable_web2.AppEnv.Prod,
+      collectorUrl: isNewPathEnabled() ? {
+        log: `/app/${appId}/__runtime__/api/v1/observability/logs/collect`,
+        trace: `/app/${appId}/__runtime__/api/v1/observability/traces/collect`,
+        metric: `/app/${appId}/__runtime__/api/v1/observability/metrics/collect`,
+        time: `/app/${appId}/__runtime__/api/v1/observability/current_server_timestamp`
+      } : {
+        log: `/spark/app/${appId}/runtime/api/v1/observability/logs/collect`,
+        trace: `/spark/app/${appId}/runtime/api/v1/observability/traces/collect`,
+        metric: `/spark/app/${appId}/runtime/api/v1/observability/metrics/collect`,
+        time: `/spark/api/v1/observability/app/${appId}/current_server_timestamp`
+      }
+    });
+  } catch (error) {
+    console.error("Failed to start WebObservableSdk:", error);
+  }
+}, "initObservable");
+
 // src/types/tea.ts
 var TrackKey = /* @__PURE__ */ (function(TrackKey2) {
   TrackKey2["VIEW"] = "aily_agent_artifact_page_view";
@@ -1256,7 +2025,10 @@ var TrackKey = /* @__PURE__ */ (function(TrackKey2) {
 // src/components/AppContainer/index.tsx
 var AppContainer = /* @__PURE__ */ __name(({ children }) => {
   useAppInfo();
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
+    initObservable();
+  }, []);
+  (0, import_react9.useEffect)(() => {
     if (process.env.NODE_ENV === "production") {
       reportTeaEvent({
         trackKey: TrackKey.VIEW,
@@ -1268,14 +2040,14 @@ var AppContainer = /* @__PURE__ */ __name(({ children }) => {
       });
     }
   }, []);
-  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(safety_default, null), /* @__PURE__ */ import_react7.default.createElement(QueryProvider_default, null, children));
+  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(safety_default, null), process.env.NODE_ENV !== "production" && /* @__PURE__ */ import_react9.default.createElement(import_miaoda_inspector.MiaodaInspector, null), process.env.NODE_ENV !== "production" && /* @__PURE__ */ import_react9.default.createElement(IframeBridge, null), /* @__PURE__ */ import_react9.default.createElement(QueryProvider_default, null, children));
 }, "AppContainer");
 var AppContainer_default = AppContainer;
 
 // src/components/Welcome/index.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react10 = __toESM(require("react"), 1);
 var Welcome = /* @__PURE__ */ __name(({ title = "\u9875\u9762\u5F85\u5F00\u53D1", description = "\u9875\u9762\u6682\u672A\u5F00\u53D1\uFF0C\u8BF7\u8010\u5FC3\u7B49\u5F85..." }) => {
-  return /* @__PURE__ */ import_react8.default.createElement("div", {
+  return /* @__PURE__ */ import_react10.default.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "column",
@@ -1286,7 +2058,7 @@ var Welcome = /* @__PURE__ */ __name(({ title = "\u9875\u9762\u5F85\u5F00\u53D1"
       padding: "0 24px",
       textAlign: "center"
     }
-  }, /* @__PURE__ */ import_react8.default.createElement("img", {
+  }, /* @__PURE__ */ import_react10.default.createElement("img", {
     style: {
       borderRadius: 6,
       marginBottom: 24
@@ -1295,7 +2067,7 @@ var Welcome = /* @__PURE__ */ __name(({ title = "\u9875\u9762\u5F85\u5F00\u53D1"
     height: "200",
     src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/LMfspH/ljhwZthlaukjlkulzlp/miao/welcome.svg",
     alt: "Welcome"
-  }), /* @__PURE__ */ import_react8.default.createElement("div", {
+  }), /* @__PURE__ */ import_react10.default.createElement("div", {
     style: {
       fontSize: 16,
       fontWeight: 500,
@@ -1303,7 +2075,7 @@ var Welcome = /* @__PURE__ */ __name(({ title = "\u9875\u9762\u5F85\u5F00\u53D1"
       marginBottom: 4,
       color: "#1f2329"
     }
-  }, title), /* @__PURE__ */ import_react8.default.createElement("div", {
+  }, title), /* @__PURE__ */ import_react10.default.createElement("div", {
     style: {
       fontSize: 16,
       lineHeight: "24px",
@@ -1315,9 +2087,9 @@ var Welcome = /* @__PURE__ */ __name(({ title = "\u9875\u9762\u5F85\u5F00\u53D1"
 var Welcome_default = Welcome;
 
 // src/components/PagePlaceholder/index.tsx
-var import_react9 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var PagePlaceholder = /* @__PURE__ */ __name(({ title = "\u9875\u9762\u5F85\u5F00\u53D1", description = "\u9875\u9762\u6682\u672A\u5F00\u53D1\uFF0C\u8BF7\u8010\u5FC3\u7B49\u5F85..." }) => {
-  return /* @__PURE__ */ import_react9.default.createElement("div", {
+  return /* @__PURE__ */ import_react11.default.createElement("div", {
     style: {
       display: "flex",
       flexDirection: "column",
@@ -1328,7 +2100,7 @@ var PagePlaceholder = /* @__PURE__ */ __name(({ title = "\u9875\u9762\u5F85\u5F0
       height: "calc(100vh - 64px)",
       textAlign: "center"
     }
-  }, /* @__PURE__ */ import_react9.default.createElement("img", {
+  }, /* @__PURE__ */ import_react11.default.createElement("img", {
     style: {
       borderRadius: "6px",
       marginBottom: "24px"
@@ -1337,14 +2109,14 @@ var PagePlaceholder = /* @__PURE__ */ __name(({ title = "\u9875\u9762\u5F85\u5F0
     height: "200",
     src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/LMfspH/ljhwZthlaukjlkulzlp/miao/welcome.svg",
     alt: "Welcome"
-  }), /* @__PURE__ */ import_react9.default.createElement("div", {
+  }), /* @__PURE__ */ import_react11.default.createElement("div", {
     style: {
       fontSize: "16px",
       fontWeight: 500,
       marginBottom: "4px",
       lineHeight: "24px"
     }
-  }, title), /* @__PURE__ */ import_react9.default.createElement("div", {
+  }, title), /* @__PURE__ */ import_react11.default.createElement("div", {
     style: {
       color: "#6b7280",
       fontSize: "16px",
@@ -1359,13 +2131,62 @@ var PagePlaceholder = /* @__PURE__ */ __name(({ title = "\u9875\u9762\u5F85\u5F0
 }, "PagePlaceholder");
 var PagePlaceholder_default = PagePlaceholder;
 
+// src/components/ErrorRender/index.tsx
+var import_react12 = __toESM(require("react"), 1);
+var ErrorRender = /* @__PURE__ */ __name((props) => {
+  const { error, resetErrorBoundary } = props;
+  (0, import_react12.useEffect)(() => {
+    if (error) {
+      submitPostMessage({
+        type: "RenderError",
+        data: error
+      });
+      logger.log({
+        level: "error",
+        args: [
+          "Render Error",
+          error
+        ],
+        meta: {
+          type: "render-error"
+        }
+      });
+    }
+  }, [
+    error
+  ]);
+  (0, import_react12.useEffect)(() => {
+    if (!resetErrorBoundary) return;
+    const hmr = getHmrApi();
+    if (hmr) {
+      return hmr.onSuccess(() => {
+        resetErrorBoundary();
+      });
+    }
+  }, [
+    resetErrorBoundary
+  ]);
+  return /* @__PURE__ */ import_react12.default.createElement("div", {
+    className: "min-h-screen flex items-center justify-center bg-white"
+  }, /* @__PURE__ */ import_react12.default.createElement("div", {
+    className: "flex flex-col justify-center items-center text-center"
+  }, /* @__PURE__ */ import_react12.default.createElement("img", {
+    src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/illustration_empty_negative_error.svg",
+    alt: "render error",
+    className: "mb-3 w-[100px]"
+  }), /* @__PURE__ */ import_react12.default.createElement("p", {
+    className: "text-l/[22px] text-[14px] text-[#1F2329] font-medium"
+  }, "\u9875\u9762\u51FA\u9519\u4E86")));
+}, "ErrorRender");
+var ErrorRender_default = ErrorRender;
+
 // src/route-components/ActiveLink.tsx
-var import_react10 = __toESM(require("react"), 1);
-var import_react_router_dom = require("react-router-dom");
-var ActiveLink = /* @__PURE__ */ (0, import_react10.forwardRef)(({ to, onClick, className, style, children, ...rest }, ref) => {
-  const [currentHash, setCurrentHash] = (0, import_react10.useState)(() => typeof window !== "undefined" ? window.location.hash : "");
+var import_react13 = __toESM(require("react"), 1);
+var import_react_router_dom2 = require("react-router-dom");
+var ActiveLink = /* @__PURE__ */ (0, import_react13.forwardRef)(({ to, onClick, className, style, children, ...rest }, ref) => {
+  const [currentHash, setCurrentHash] = (0, import_react13.useState)(() => typeof window !== "undefined" ? window.location.hash : "");
   const isHashRoute = typeof to === "string" && to.startsWith("#");
-  (0, import_react10.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!isHashRoute) return;
     const handleHashChange = /* @__PURE__ */ __name(() => {
       setCurrentHash(window.location.hash);
@@ -1377,7 +2198,7 @@ var ActiveLink = /* @__PURE__ */ (0, import_react10.forwardRef)(({ to, onClick,
   ]);
   const isActive = isHashRoute && currentHash === to;
   if (!isHashRoute) {
-    return /* @__PURE__ */ import_react10.default.createElement(import_react_router_dom.NavLink, {
+    return /* @__PURE__ */ import_react13.default.createElement(import_react_router_dom2.NavLink, {
       ref,
       to,
       onClick,
@@ -1418,7 +2239,7 @@ var ActiveLink = /* @__PURE__ */ (0, import_react10.forwardRef)(({ to, onClick,
     isPending: false,
     isTransitioning: false
   }) : children;
-  return /* @__PURE__ */ import_react10.default.createElement("a", {
+  return /* @__PURE__ */ import_react13.default.createElement("a", {
     ref,
     href: to,
     onClick: handleHashClick,
@@ -1430,12 +2251,12 @@ var ActiveLink = /* @__PURE__ */ (0, import_react10.forwardRef)(({ to, onClick,
 ActiveLink.displayName = "ActiveLink";
 
 // src/route-components/NavLink.tsx
-var React8 = __toESM(require("react"), 1);
-var import_react_router_dom2 = require("react-router-dom");
-var NavLink2 = /* @__PURE__ */ React8.forwardRef(({ to, children, className, style, ...props }, ref) => {
+var React10 = __toESM(require("react"), 1);
+var import_react_router_dom3 = require("react-router-dom");
+var NavLink2 = /* @__PURE__ */ React10.forwardRef(({ to, children, className, style, ...props }, ref) => {
   const isHashLink = typeof to === "string" && to.startsWith("#");
-  const location = (0, import_react_router_dom2.useLocation)();
-  const navigate = (0, import_react_router_dom2.useNavigate)();
+  const location = (0, import_react_router_dom3.useLocation)();
+  const navigate = (0, import_react_router_dom3.useNavigate)();
   if (isHashLink) {
     const handleClick = /* @__PURE__ */ __name((e) => {
       e.preventDefault();
@@ -1456,7 +2277,7 @@ var NavLink2 = /* @__PURE__ */ React8.forwardRef(({ to, children, className, sty
     const resolvedClassName = typeof className === "function" ? className(renderProps) : className;
     const resolvedStyle = typeof style === "function" ? style(renderProps) : style;
     const { caseSensitive, end, replace, state, preventScrollReset, relative, viewTransition, ...restProps } = props;
-    return /* @__PURE__ */ React8.createElement("a", {
+    return /* @__PURE__ */ React10.createElement("a", {
       href: to,
       onClick: handleClick,
       ref,
@@ -1465,7 +2286,7 @@ var NavLink2 = /* @__PURE__ */ React8.forwardRef(({ to, children, className, sty
       ...restProps
     }, typeof children === "function" ? children(renderProps) : children);
   }
-  return /* @__PURE__ */ React8.createElement(import_react_router_dom2.NavLink, {
+  return /* @__PURE__ */ React10.createElement(import_react_router_dom3.NavLink, {
     to,
     ref,
     className,
@@ -1480,8 +2301,8 @@ var NavLink2 = /* @__PURE__ */ React8.forwardRef(({ to, children, className, sty
 NavLink2.displayName = "NavLink";
 
 // src/route-components/UniversalLink.tsx
-var import_react11 = __toESM(require("react"), 1);
-var import_react_router_dom3 = require("react-router-dom");
+var import_react14 = __toESM(require("react"), 1);
+var import_react_router_dom4 = require("react-router-dom");
 function isInternalRoute(to) {
   return !to.startsWith("#") && !to.startsWith("http://") && !to.startsWith("https://") && !to.startsWith("//");
 }
@@ -1490,15 +2311,15 @@ function isExternalLink(to) {
   return to.startsWith("http://") || to.startsWith("https://") || to.startsWith("//");
 }
 __name(isExternalLink, "isExternalLink");
-var UniversalLink = /* @__PURE__ */ import_react11.default.forwardRef(/* @__PURE__ */ __name(function UniversalLink2({ to, ...props }, ref) {
+var UniversalLink = /* @__PURE__ */ import_react14.default.forwardRef(/* @__PURE__ */ __name(function UniversalLink2({ to, ...props }, ref) {
   if (isInternalRoute(to)) {
-    return /* @__PURE__ */ import_react11.default.createElement(import_react_router_dom3.Link, {
+    return /* @__PURE__ */ import_react14.default.createElement(import_react_router_dom4.Link, {
       to,
       ref,
       ...props
     });
   }
-  return /* @__PURE__ */ import_react11.default.createElement("a", {
+  return /* @__PURE__ */ import_react14.default.createElement("a", {
     href: to,
     ref,
     ...props,
@@ -1644,45 +2465,6 @@ function getEnvPath() {
 }
 __name(getEnvPath, "getEnvPath");
 
-// src/utils/safeStringify.ts
-function safeStringify(obj) {
-  const seen = /* @__PURE__ */ new Set();
-  try {
-    return JSON.stringify(obj, (_key, value) => {
-      if (typeof value === "object" && value !== null) {
-        if (seen.has(value)) {
-          return "[Circular]";
-        }
-        seen.add(value);
-      }
-      if (typeof value === "bigint") {
-        return value.toString();
-      }
-      if (value instanceof Date) {
-        return value.toISOString();
-      }
-      if (value instanceof Map) {
-        return Object.fromEntries(value);
-      }
-      if (value instanceof Set) {
-        return Array.from(value);
-      }
-      if (typeof value === "undefined") {
-        return "undefined";
-      }
-      if (typeof value === "symbol") {
-        return value.toString();
-      }
-      return value;
-    });
-  } catch {
-    return "";
-  } finally {
-    seen.clear();
-  }
-}
-__name(safeStringify, "safeStringify");
-
 // src/utils/getAxiosForBackend.ts
 var import_axios2 = __toESM(require("axios"), 1);
 var axiosInstance;
@@ -1762,6 +2544,22 @@ function getAxiosForBackend() {
 __name(getAxiosForBackend, "getAxiosForBackend");
 var axiosForBackend = getAxiosForBackend();
 
+// src/integrations/capabilityClient.ts
+var import_client_capability = require("@lark-apaas/client-capability");
+var _appId = getAppId();
+var _acquireUploadUrl = isNewPathEnabled() ? `/app/${_appId}/__runtime__/api/v1/studio/plugins/tmp_files/acquire_upload_url` : `/af/api/v1/studio/plugins/tmp_files/acquire_upload_url`;
+var _acquireDownloadUrl = isNewPathEnabled() ? `/app/${_appId}/__runtime__/api/v1/studio/plugins/tmp_files/acquire_download_url` : `/af/api/v1/studio/plugins/tmp_files/acquire_download_url`;
+var capabilityClient = (0, import_client_capability.createClient)({
+  baseURL: normalizeBasePath(process.env.CLIENT_BASE_PATH ?? "/"),
+  acquireUploadUrl: _acquireUploadUrl,
+  acquireDownloadUrl: _acquireDownloadUrl,
+  fetchOptions: {
+    headers: {
+      "X-Suda-Csrf-Token": window.csrfToken ?? ""
+    }
+  }
+});
+
 // src/constants/img-resources/avatar.ts
 var avatar_exports = {};
 __export(avatar_exports, {
@@ -1922,6 +2720,7 @@ var abstractArt3dRenderingCoverImg6 = "https://lf3-static.bytednsdoc.com/obj/ede
 0 && (module.exports = {
   ActiveLink,
   AppContainer,
+  ErrorRender,
   NavLink,
   PagePlaceholder,
   QueryProvider,
@@ -1931,6 +2730,7 @@ var abstractArt3dRenderingCoverImg6 = "https://lf3-static.bytednsdoc.com/obj/ede
   avatarImages,
   axiosForBackend,
   bannerImages,
+  capabilityClient,
   clsxWithTw,
   copyToClipboard,
   coverImages,
@@ -1947,6 +2747,7 @@ var abstractArt3dRenderingCoverImg6 = "https://lf3-static.bytednsdoc.com/obj/ede
   isIpad,
   isMobile,
   isPreview,
+  logger,
   normalizeBasePath,
   reportTeaEvent,
   resolveAppUrl,