@vectorx/agent-simulator 0.1.3 → 0.4.0

package/lib/webview-ui/widgets/SystemLogs.js

@@ -1,21 +1,9 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SystemLogs = exports.AgentType = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const antd_1 = require("antd");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const react_1 = require("react");
 const logger_service_1 = require("../services/logger-service");
 var AgentType;
 (function (AgentType) {
@@ -26,19 +14,36 @@ var AgentType;
     AgentType["AI_SDK_CREATE_RECORD_PAIR"] = "AI_SDK_CREATE_RECORD_PAIR";
     AgentType["AI_SDK_GET_HISTORY_MESSAGES"] = "AI_SDK_GET_HISTORY_MESSAGES";
     AgentType["AI_SDK_GET_CONVERSATIONS"] = "AI_SDK_GET_CONVERSATIONS";
+    AgentType["Ai_SDK_POST_KNOWLEDGE_BASE"] = "Ai_SDK_POST_KNOWLEDGE_BASE";
+    AgentType["AI_SDK_QUERY_TASKS"] = "AI_SDK_QUERY_TASKS";
     AgentType["SERVER_REQUEST_START"] = "SERVER_REQUEST_START";
     AgentType["SERVER_REQUEST_END"] = "SERVER_REQUEST_END";
 })(AgentType || (exports.AgentType = AgentType = {}));
-const SystemLogs = ({ baseUrl, agentName, debugStatus, isOpen = false, logType = logger_service_1.LogType.ACCESS, }) => {
+/**
+ * 系统日志组件
+ * 显示系统运行状态和相关信息
+ */
+const SystemLogs = ({ baseUrl, agentName, debugStatus, isOpen = false, logType = logger_service_1.LogType.ACCESS, // 默认 system
+ }) => {
     const { token } = antd_1.theme.useToken();
-    const [logs, setLogs] = (0, react_2.useState)([]);
-    const [expandedLogs, setExpandedLogs] = (0, react_2.useState)(new Set());
-    const loggerService = (0, react_2.useMemo)(() => new logger_service_1.LoggerService({ baseUrl }), [baseUrl]);
+    const [logs, setLogs] = (0, react_1.useState)([]);
+    const [expandedLogs, setExpandedLogs] = (0, react_1.useState)(new Set());
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [hasMore, setHasMore] = (0, react_1.useState)(true);
+    const [isLoadingMore, setIsLoadingMore] = (0, react_1.useState)(false);
+    const [pageNum, setPageNum] = (0, react_1.useState)(1); // 使用页码
+    const [pageSize] = (0, react_1.useState)(50); // 每页50条
+    const lastLoadTimeRef = (0, react_1.useRef)(0); // 上次加载时间，用于节流
+    const loadThrottleMs = 1000; // 节流间隔1秒
+    const loggerService = (0, react_1.useMemo)(() => new logger_service_1.LoggerService({ baseUrl }), [baseUrl]);
+    // 关键词高亮
     const highlightKeywords = (text) => {
         const keywords = [
             "getHistoryMessages",
             "createRecordPair",
             "getConversations",
+            "queryTasks",
+            "knowledgeBaseRetrieve",
             "AI_SDK_REQUEST_START",
             "AI_SDK_REQUEST_SUCCESS",
             "AI_SDK_REQUEST_ERROR",
@@ -46,6 +51,8 @@ const SystemLogs = ({ baseUrl, agentName, debugStatus, isOpen = false, logType =
             "AI_SDK_CREATE_RECORD_PAIR",
             "AI_SDK_GET_HISTORY_MESSAGES",
             "AI_SDK_GET_CONVERSATIONS",
+            "Ai_SDK_POST_KNOWLEDGE_BASE",
+            "AI_SDK_QUERY_TASKS",
             "SERVER_REQUEST_START",
             "SERVER_REQUEST_END",
         ];
@@ -53,143 +60,104 @@ const SystemLogs = ({ baseUrl, agentName, debugStatus, isOpen = false, logType =
         const parts = text.split(regex);
         return parts.map((part, index) => {
             if (keywords.some((keyword) => keyword.toLowerCase() === part.toLowerCase())) {
-                return (react_1.default.createElement("span", { key: index, style: {
+                return ((0, jsx_runtime_1.jsx)("span", { style: {
                         fontWeight: "bold",
                         color: "#ffa940",
                         background: "rgba(255, 169, 64, 0.1)",
                         padding: "0 2px",
                         borderRadius: "2px",
-                    } }, part));
+                    }, children: part }, index));
             }
-            return react_1.default.createElement("span", { key: index }, part);
+            return (0, jsx_runtime_1.jsx)("span", { children: part }, index);
         });
     };
+    // 根据状态码获取样式
     const getStatusStyle = (status) => {
         if (status >= 500) {
-            return { color: "#ff4d4f", fontWeight: "bold" };
+            return { color: "#ff4d4f", fontWeight: "bold" }; // 红色
         }
         else if (status >= 400) {
-            return { color: "#faad14", fontWeight: "bold" };
+            return { color: "#faad14", fontWeight: "bold" }; // 黄色
         }
         else if (status >= 300) {
-            return { color: "#1890ff" };
+            return { color: "#1890ff" }; // 蓝色
         }
         else if (status >= 200) {
-            return { color: "#52c41a", fontWeight: "bold" };
+            return { color: "#52c41a", fontWeight: "bold" }; // 绿色
         }
         return {};
     };
+    // 格式化日志条目基本信息
     const formatLogEntry = (entry) => {
-        var _a;
-        const timestamp = new Date(entry["@timestamp"]).toLocaleTimeString();
+        const date = new Date(entry["@timestamp"]);
+        const dateStr = date.toLocaleDateString("zh-CN"); // 添加日期
+        const timeStr = date.toLocaleTimeString("zh-CN"); // 时间
         const level = entry.level.toUpperCase();
         try {
             const detail = JSON.parse(entry.message);
-            let logMessage = `[${timestamp}] [${level}] ${(detail === null || detail === void 0 ? void 0 : detail.url) || (detail === null || detail === void 0 ? void 0 : detail.eventId) || "unknown"}`;
+            let logMessage = `[${dateStr} ${timeStr}] [${level}] ${detail?.url || detail?.eventId || "unknown"}`;
             if (entry.source === "remote") {
                 if (detail.type === "FRAMEWORK_EVENT") {
                     const scene = detail.scene || "unknown";
-                    const statusSpan = detail.status ? (react_1.default.createElement("span", { style: getStatusStyle(detail.status) },
-                        " (",
-                        detail.status,
-                        ")")) : null;
-                    logMessage = (react_1.default.createElement(react_2.Fragment, null,
-                        `[${timestamp}] [${(_a = detail.eventId) === null || _a === void 0 ? void 0 : _a.slice(-8)}] [${level}] ${scene}`,
-                        statusSpan));
+                    const statusSpan = detail.status ? ((0, jsx_runtime_1.jsxs)("span", { style: getStatusStyle(detail.status), children: [" (", detail.status, ")"] })) : null;
+                    logMessage = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [`[${dateStr} ${timeStr}] [${detail.eventId?.slice(-8)}] [${level}] ${scene}`, statusSpan] }));
                 }
                 else if (detail.type === "HTTP_ACCESS") {
                     const scene = detail.scene || "unknown";
                     const method = detail.method || "unknown";
                     const url = detail.url || "unknown";
-                    const statusSpan = detail.status ? (react_1.default.createElement("span", { style: getStatusStyle(detail.status) },
-                        " (",
-                        detail.status,
-                        ")")) : null;
+                    const statusSpan = detail.status ? ((0, jsx_runtime_1.jsxs)("span", { style: getStatusStyle(detail.status), children: [" (", detail.status, ")"] })) : null;
                     const durationText = detail.duration ? ` - ${detail.duration}` : "";
-                    logMessage = (react_1.default.createElement(react_2.Fragment, null,
-                        `[${timestamp}] ${detail.eventId ? `[${detail.eventId.slice(-8)}]` : ""} [${level}] ${scene} ${method} ${url}`,
-                        statusSpan,
-                        durationText));
+                    logMessage = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [`[${dateStr} ${timeStr}] ${detail.eventId ? `[${detail.eventId.slice(-8)}]` : ""} [${level}] ${scene} ${method} ${url}`, statusSpan, durationText] }));
                 }
             }
             else {
-                logMessage = `[${timestamp}] ${detail.eventId ? `[${detail.eventId.slice(-8)}]` : ""} [${level}] ${(detail === null || detail === void 0 ? void 0 : detail.msg) || "unknown"}`;
+                logMessage = `[${dateStr} ${timeStr}] ${detail.eventId ? `[${detail.eventId.slice(-8)}]` : ""} [${level}] ${detail?.msg || "unknown"}`;
             }
             return typeof logMessage === "string" ? highlightKeywords(logMessage) : logMessage;
         }
-        catch (_b) {
-            return `[${timestamp}] [${level}] ${entry.message}`;
+        catch {
+            return `[${dateStr} ${timeStr}] [${level}] ${entry.message}`;
         }
     };
+    // 格式化详细信息
     const formatDetailedInfo = (entry) => {
         try {
             const detail = JSON.parse(entry.message);
             const details = [];
             if (detail.type === "FRAMEWORK_EVENT" || detail.type === "HTTP_ACCESS") {
                 if (detail.scene)
-                    details.push(react_1.default.createElement("div", { key: "scene" },
-                        react_1.default.createElement("strong", null, "Scene:"),
-                        " ",
-                        detail.scene));
+                    details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Scene:" }), " ", detail.scene] }, "scene"));
                 if (detail.method)
-                    details.push(react_1.default.createElement("div", { key: "method" },
-                        react_1.default.createElement("strong", null, "Method:"),
-                        " ",
-                        detail.method));
+                    details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Method:" }), " ", detail.method] }, "method"));
                 if (detail.url)
-                    details.push(react_1.default.createElement("div", { key: "url" },
-                        react_1.default.createElement("strong", null, "URL:"),
-                        " ",
-                        detail.url));
+                    details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "URL:" }), " ", detail.url] }, "url"));
                 if (detail.modelName)
-                    details.push(react_1.default.createElement("div", { key: "model" },
-                        react_1.default.createElement("strong", null, "Model:"),
-                        " ",
-                        detail.modelName));
+                    details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Model:" }), " ", detail.modelName] }, "model"));
                 if (detail.status)
-                    details.push(react_1.default.createElement("div", { key: "status" },
-                        react_1.default.createElement("strong", null, "Status:"),
-                        " ",
-                        react_1.default.createElement("span", { style: getStatusStyle(detail.status) }, detail.status)));
+                    details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Status:" }), " ", (0, jsx_runtime_1.jsx)("span", { style: getStatusStyle(detail.status), children: detail.status })] }, "status"));
                 if (detail.duration)
-                    details.push(react_1.default.createElement("div", { key: "duration" },
-                        react_1.default.createElement("strong", null, "Duration:"),
-                        " ",
-                        detail.duration));
+                    details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Duration:" }), " ", detail.duration] }, "duration"));
                 if (detail.ip)
-                    details.push(react_1.default.createElement("div", { key: "ip" },
-                        react_1.default.createElement("strong", null, "IP:"),
-                        " ",
-                        detail.ip));
+                    details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "IP:" }), " ", detail.ip] }, "ip"));
             }
             if (detail.error)
-                details.push(react_1.default.createElement("div", { key: "error" },
-                    react_1.default.createElement("strong", null, "Error:"),
-                    " ",
-                    react_1.default.createElement("span", { style: { color: "#ff4d4f" } }, detail.error)));
+                details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Error:" }), " ", (0, jsx_runtime_1.jsx)("span", { style: { color: "#ff4d4f" }, children: detail.error })] }, "error"));
             if (detail.stack)
-                details.push(react_1.default.createElement("div", { key: "stack" },
-                    react_1.default.createElement("strong", null, "Stack Trace:"),
-                    react_1.default.createElement("pre", { style: { margin: 0, whiteSpace: "pre-wrap" } }, detail.stack)));
+                details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Stack Trace:" }), (0, jsx_runtime_1.jsx)("pre", { style: { margin: 0, whiteSpace: "pre-wrap" }, children: detail.stack })] }, "stack"));
             if (detail.headers)
-                details.push(react_1.default.createElement("div", { key: "headers" },
-                    react_1.default.createElement("strong", null, "Headers:"),
-                    react_1.default.createElement("pre", { style: { margin: 0 } }, JSON.stringify(detail.headers, null, 2))));
+                details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Headers:" }), (0, jsx_runtime_1.jsx)("pre", { style: { margin: 0 }, children: JSON.stringify(detail.headers, null, 2) })] }, "headers"));
             if (detail.data)
-                details.push(react_1.default.createElement("div", { key: "data" },
-                    react_1.default.createElement("strong", null, "Data:"),
-                    react_1.default.createElement("pre", { style: { margin: 0 } }, JSON.stringify(detail.data, null, 2))));
+                details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Data:" }), (0, jsx_runtime_1.jsx)("pre", { style: { margin: 0 }, children: JSON.stringify(detail.data, null, 2) })] }, "data"));
             if (detail.eventId)
-                details.push(react_1.default.createElement("div", { key: "eventId" },
-                    react_1.default.createElement("strong", null, "Event ID:"),
-                    " ",
-                    detail.eventId));
+                details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Event ID:" }), " ", detail.eventId] }, "eventId"));
             return details;
         }
-        catch (_a) {
+        catch {
             return [entry.message];
         }
     };
+    // 判断是否有详细信息可展示
     const hasDetailedInfo = (entry) => {
         const detail = JSON.parse(entry.message);
         return !!((detail.headers && Object.keys(detail.headers).length > 0) ||
@@ -198,6 +166,7 @@ const SystemLogs = ({ baseUrl, agentName, debugStatus, isOpen = false, logType =
             detail.stack ||
             (detail.eventId && detail.eventId !== "unknown"));
     };
+    // 切换展开状态
     const toggleExpanded = (index) => {
         const newExpanded = new Set(expandedLogs);
         if (newExpanded.has(index)) {
@@ -208,6 +177,7 @@ const SystemLogs = ({ baseUrl, agentName, debugStatus, isOpen = false, logType =
         }
         setExpandedLogs(newExpanded);
     };
+    // 获取日志样式
     const getLogStyle = (entry) => {
         const baseStyle = {
             margin: "2px 0",
@@ -215,38 +185,89 @@ const SystemLogs = ({ baseUrl, agentName, debugStatus, isOpen = false, logType =
         };
         switch (entry.level) {
             case "error":
-                return Object.assign(Object.assign({}, baseStyle), { color: "#ff4d4f", fontWeight: "bold" });
+                return {
+                    ...baseStyle,
+                    color: "#ff4d4f",
+                    fontWeight: "bold",
+                };
             case "warn":
-                return Object.assign(Object.assign({}, baseStyle), { color: "#faad14", fontWeight: "bold" });
+                return {
+                    ...baseStyle,
+                    color: "#faad14",
+                    fontWeight: "bold",
+                };
             case "info":
-                return Object.assign(Object.assign({}, baseStyle), { color: "#1890ff" });
+                return {
+                    ...baseStyle,
+                    color: "#1890ff",
+                };
             case "debug":
-                return Object.assign(Object.assign({}, baseStyle), { color: "#8c8c8c" });
+                return {
+                    ...baseStyle,
+                    color: "#8c8c8c",
+                };
             default:
-                return Object.assign(Object.assign({}, baseStyle), { color: "#8c8c8c" });
+                return {
+                    ...baseStyle,
+                    color: "#8c8c8c",
+                };
         }
     };
-    const fetchLogs = () => __awaiter(void 0, void 0, void 0, function* () {
+    // 获取日志的函数
+    const fetchLogs = (0, react_1.useCallback)(async (isLoadMore = false) => {
         if (debugStatus !== "normal") {
             return;
         }
+        // 防止并发请求
+        if (isLoadMore) {
+            if (isLoadingMore || isLoading)
+                return;
+            setIsLoadingMore(true);
+        }
+        else {
+            if (isLoading)
+                return;
+            setIsLoading(true);
+        }
         try {
-            const response = yield loggerService.getLogs(logType);
-            if (response.success && response.data.length > 0) {
-                setLogs((prevLogs) => {
-                    const localLogs = prevLogs.filter((log) => log.source === "local");
-                    const prevRemoteLogs = prevLogs.filter((log) => log.source === "remote");
-                    const newRemoteLogs = response.data.map((log) => (Object.assign(Object.assign({}, log), { source: "remote" })));
-                    const allRemoteLogs = [...prevRemoteLogs, ...newRemoteLogs];
-                    const uniqueRemoteLogs = allRemoteLogs.reduce((acc, current) => {
-                        const existingLog = acc.find((log) => log.id === current.id);
-                        if (!existingLog) {
-                            acc.push(current);
-                        }
-                        return acc;
-                    }, []);
-                    return [...localLogs, ...uniqueRemoteLogs];
-                });
+            const currentPage = isLoadMore ? pageNum + 1 : 1;
+            const response = await loggerService.getLogsPaginated({
+                type: logType,
+                pageSize: pageSize,
+                pageNum: currentPage,
+            });
+            if (response.success) {
+                // @ts-ignore
+                const newRemoteLogs = response.data.map((log) => ({ ...log, source: "remote" }));
+                if (isLoadMore) {
+                    // 加载更多：追加日志
+                    setLogs((prevLogs) => [...prevLogs, ...newRemoteLogs]);
+                    setPageNum(currentPage);
+                }
+                else {
+                    // 初始加载或轮询刷新：合并日志
+                    setLogs((prevLogs) => {
+                        const localLogs = prevLogs.filter((l) => l.source === "local");
+                        const existingRemoteLogs = prevLogs.filter((l) => l.source === "remote");
+                        // 合并新旧日志并去重
+                        const allRemoteLogs = [...newRemoteLogs, ...existingRemoteLogs];
+                        const uniqueRemoteLogs = allRemoteLogs.reduce((acc, current) => {
+                            if (!acc.find((item) => item.id === current.id)) {
+                                acc.push(current);
+                            }
+                            return acc;
+                        }, []);
+                        // 重新按时间排序
+                        uniqueRemoteLogs.sort((a, b) => new Date(b["@timestamp"]).getTime() - new Date(a["@timestamp"]).getTime());
+                        return [...localLogs, ...uniqueRemoteLogs];
+                    });
+                }
+                if (response.pagination) {
+                    setHasMore(response.pagination.hasMore);
+                }
+                else {
+                    setHasMore(false);
+                }
             }
         }
         catch (error) {
@@ -260,8 +281,22 @@ const SystemLogs = ({ baseUrl, agentName, debugStatus, isOpen = false, logType =
             };
             setLogs((prevLogs) => [...prevLogs, errorLog]);
         }
-    });
-    (0, react_2.useEffect)(() => {
+        finally {
+            if (isLoadMore) {
+                setIsLoadingMore(false);
+            }
+            else {
+                setIsLoading(false);
+            }
+        }
+    }, [debugStatus, logType, pageSize, pageNum, loggerService, isLoading, isLoadingMore]);
+    (0, react_1.useEffect)(() => {
+        // 重置状态
+        setHasMore(true);
+        setIsLoading(false);
+        setIsLoadingMore(false);
+        setPageNum(1);
+        // 初始系统信息
         const initialLogs = [
             logType === logger_service_1.LogType.USERCODE
                 ? {
@@ -294,18 +329,22 @@ const SystemLogs = ({ baseUrl, agentName, debugStatus, isOpen = false, logType =
             },
         ];
         setLogs(initialLogs);
+        // 立即获取一次日志
         fetchLogs();
-        const intervalId = setInterval(fetchLogs, 5000);
+        // 每 5 秒刷新一次最新日志（不使用游标，获取最新的）
+        const intervalId = setInterval(() => fetchLogs(false), 5000);
         return () => {
             clearInterval(intervalId);
         };
-    }, [baseUrl, agentName, loggerService, debugStatus]);
-    (0, react_2.useEffect)(() => {
+    }, [baseUrl, agentName, loggerService, debugStatus, logType]);
+    // 监听面板打开状态，打开时立即获取日志
+    (0, react_1.useEffect)(() => {
         if (isOpen) {
             fetchLogs();
         }
     }, [isOpen]);
-    (0, react_2.useEffect)(() => {
+    // 当调试状态变化时，添加状态日志
+    (0, react_1.useEffect)(() => {
         const statusLog = {
             "@timestamp": new Date().toISOString(),
             level: debugStatus === "normal" ? "system" : "warn",
@@ -315,38 +354,21 @@ const SystemLogs = ({ baseUrl, agentName, debugStatus, isOpen = false, logType =
         };
         setLogs((prevLogs) => [...prevLogs, statusLog]);
     }, [debugStatus]);
+    // 格式化 user log 详细信息
     const formatUserLogDetailedInfo = (entry) => {
         try {
             const detail = JSON.parse(entry.message);
             const details = [];
             if (detail.eventId)
-                details.push(react_1.default.createElement("div", { key: "eventId" },
-                    react_1.default.createElement("strong", null, "Event ID:"),
-                    " ",
-                    detail.eventId));
+                details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Event ID:" }), " ", detail.eventId] }, "eventId"));
             if (detail.requestId)
-                details.push(react_1.default.createElement("div", { key: "requestId" },
-                    react_1.default.createElement("strong", null, "Request ID:"),
-                    " ",
-                    detail.requestId));
+                details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Request ID:" }), " ", detail.requestId] }, "requestId"));
             if (detail.scene)
-                details.push(react_1.default.createElement("div", { key: "scene" },
-                    react_1.default.createElement("strong", null, "Scene:"),
-                    " ",
-                    detail.scene));
+                details.push((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Scene:" }), " ", detail.scene] }, "scene"));
             if (Array.isArray(detail.logs)) {
-                details.push(react_1.default.createElement("div", { key: "logs-title" },
-                    react_1.default.createElement("strong", null, "Logs:")));
+                details.push((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("strong", { children: "Logs:" }) }, "logs-title"));
                 detail.logs.forEach((log, idx) => {
-                    var _a;
-                    details.push(react_1.default.createElement("div", { key: `log-${idx}`, style: { marginLeft: "10px" } },
-                        react_1.default.createElement("div", null, `[${((_a = log.level) === null || _a === void 0 ? void 0 : _a.toUpperCase()) || "LOG"}] ${log["@timestamp"] || ""}`),
-                        log.caller && react_1.default.createElement("div", null,
-                            "\u00A0\u00A0Caller: ",
-                            log.caller),
-                        log.content && react_1.default.createElement("div", null,
-                            "\u00A0\u00A0Content: ",
-                            log.content)));
+                    details.push((0, jsx_runtime_1.jsxs)("div", { style: { marginLeft: "10px" }, children: [(0, jsx_runtime_1.jsx)("div", { children: `[${log.level?.toUpperCase() || "LOG"}] ${log["@timestamp"] || ""}` }), log.caller && (0, jsx_runtime_1.jsxs)("div", { children: ["\u00A0\u00A0Caller: ", log.caller] }), log.content && (0, jsx_runtime_1.jsxs)("div", { children: ["\u00A0\u00A0Content: ", log.content] })] }, `log-${idx}`));
                 });
             }
             return details;
@@ -355,50 +377,84 @@ const SystemLogs = ({ baseUrl, agentName, debugStatus, isOpen = false, logType =
             return [entry.message];
         }
     };
-    return (react_1.default.createElement("div", { className: "system-logs", style: { height: "100%", backgroundColor: token.colorBgElevated } },
-        react_1.default.createElement("div", { className: "logs-content", style: { height: "100%", margin: 0 } },
-            debugStatus !== "normal" && (react_1.default.createElement("div", { style: {
-                    background: "rgba(250, 173, 20, 0.1)",
-                    color: "#faad14",
-                    padding: "8px 16px",
-                    borderBottom: "1px solid #333",
-                    fontSize: "13px",
-                } }, "\u26A0\uFE0F \u8C03\u8BD5\u72B6\u6001\u5F02\u5E38\uFF0C\u65E5\u5FD7\u83B7\u53D6\u5DF2\u6682\u505C")),
-            react_1.default.createElement("div", { style: {
-                    color: "#d4d4d4",
-                    fontSize: 15,
-                    margin: 0,
-                    padding: 16,
-                    height: debugStatus !== "normal" ? "calc(100% - 40px)" : "100%",
-                    boxSizing: "border-box",
-                    fontFamily: "Menlo, Monaco, Consolas, monospace",
-                    overflow: "auto",
-                } }, logs.map((entry, index) => {
-                const isExpanded = expandedLogs.has(index);
-                const hasDetails = hasDetailedInfo(entry);
-                return (react_1.default.createElement("div", { key: index, style: { marginBottom: "4px" } },
-                    react_1.default.createElement("div", { style: Object.assign(Object.assign({}, getLogStyle(entry)), { display: "flex", alignItems: "center", cursor: hasDetails ? "pointer" : "default" }), onClick: () => hasDetails && toggleExpanded(index) },
-                        hasDetails && (react_1.default.createElement("span", { style: {
-                                marginRight: "6px",
+    // 带节流的加载更多函数
+    const loadMoreWithThrottle = (0, react_1.useCallback)(() => {
+        const now = Date.now();
+        if (now - lastLoadTimeRef.current < loadThrottleMs) {
+            return; // 节流：距离上次请求不足1秒，忽略
+        }
+        if (hasMore && !isLoadingMore && !isLoading) {
+            lastLoadTimeRef.current = now;
+            fetchLogs(true);
+        }
+    }, [hasMore, isLoadingMore, isLoading, loadThrottleMs, fetchLogs]);
+    // 滚动检测处理函数
+    const handleScroll = (0, react_1.useCallback)((e) => {
+        const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+        // 检查是否滚动到底部（留一些余量）
+        if (scrollHeight - scrollTop <= clientHeight + 50) {
+            loadMoreWithThrottle();
+        }
+    }, [loadMoreWithThrottle]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "system-logs", style: { height: "100%", backgroundColor: token.colorBgElevated }, children: (0, jsx_runtime_1.jsxs)("div", { className: "logs-content", style: { height: "100%", margin: 0 }, children: [debugStatus !== "normal" && ((0, jsx_runtime_1.jsx)("div", { style: {
+                        background: "rgba(250, 173, 20, 0.1)",
+                        color: "#faad14",
+                        padding: "8px 16px",
+                        borderBottom: "1px solid #333",
+                        fontSize: "13px",
+                    }, children: "\u26A0\uFE0F \u8C03\u8BD5\u72B6\u6001\u5F02\u5E38\uFF0C\u65E5\u5FD7\u83B7\u53D6\u5DF2\u6682\u505C" })), (0, jsx_runtime_1.jsxs)("div", { style: {
+                        color: "#d4d4d4",
+                        fontSize: 15,
+                        margin: 0,
+                        padding: 16,
+                        height: debugStatus !== "normal" ? "calc(100% - 40px)" : "100%",
+                        boxSizing: "border-box",
+                        fontFamily: "Menlo, Monaco, Consolas, monospace",
+                        overflow: "auto",
+                    }, onScroll: handleScroll, children: [logs.map((entry, index) => {
+                            const isExpanded = expandedLogs.has(index);
+                            const hasDetails = hasDetailedInfo(entry);
+                            return ((0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "4px" }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                            ...getLogStyle(entry),
+                                            display: "flex",
+                                            alignItems: "center",
+                                            cursor: hasDetails ? "pointer" : "default",
+                                        }, onClick: () => hasDetails && toggleExpanded(index), children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                                    color: "#8c8c8c",
+                                                    marginRight: "10px",
+                                                    userSelect: "none",
+                                                }, children: String(index + 1).padStart(String(logs.length).length, "0") }), hasDetails && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                                    marginRight: "6px",
+                                                    color: "#8c8c8c",
+                                                    fontSize: "12px",
+                                                    transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+                                                    transition: "transform 0.2s ease",
+                                                    userSelect: "none",
+                                                }, children: "\u25B6" })), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: formatLogEntry(entry) })] }), hasDetails && isExpanded && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                            marginLeft: hasDetails ? "18px" : "0",
+                                            marginTop: "4px",
+                                            padding: "8px 12px",
+                                            background: "rgba(255, 255, 255, 0.05)",
+                                            borderLeft: "3px solid #1890ff",
+                                            borderRadius: "0 4px 4px 0",
+                                            fontSize: "13px",
+                                            color: "#a3a3a3",
+                                            whiteSpace: "pre-wrap",
+                                            wordBreak: "break-all",
+                                        }, children: logType === logger_service_1.LogType.USERCODE ? formatUserLogDetailedInfo(entry) : formatDetailedInfo(entry) }))] }, index));
+                        }), isLoadingMore && ((0, jsx_runtime_1.jsx)("div", { style: {
+                                textAlign: "center",
+                                padding: "16px",
+                                color: "#8c8c8c",
+                                fontSize: "13px",
+                            }, children: "\u6B63\u5728\u52A0\u8F7D\u66F4\u591A\u65E5\u5FD7..." })), !hasMore && logs.filter((log) => log.source === "remote").length > 0 && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                textAlign: "center",
+                                padding: "16px",
                                 color: "#8c8c8c",
-                                fontSize: "12px",
-                                transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
-                                transition: "transform 0.2s ease",
-                                userSelect: "none",
-                            } }, "\u25B6")),
-                        react_1.default.createElement("div", { style: { flex: 1 } }, formatLogEntry(entry))),
-                    hasDetails && isExpanded && (react_1.default.createElement("div", { style: {
-                            marginLeft: hasDetails ? "18px" : "0",
-                            marginTop: "4px",
-                            padding: "8px 12px",
-                            background: "rgba(255, 255, 255, 0.05)",
-                            borderLeft: "3px solid #1890ff",
-                            borderRadius: "0 4px 4px 0",
-                            fontSize: "13px",
-                            color: "#a3a3a3",
-                            whiteSpace: "pre-wrap",
-                            wordBreak: "break-all",
-                        } }, logType === logger_service_1.LogType.USERCODE ? formatUserLogDetailedInfo(entry) : formatDetailedInfo(entry)))));
-            })))));
+                                fontSize: "13px",
+                                borderTop: "1px dashed #333",
+                                marginTop: "8px",
+                            }, children: ["\u5DF2\u52A0\u8F7D\u5168\u90E8\u65E5\u5FD7 (", logs.filter((log) => log.source === "remote").length, " \u6761)"] }))] })] }) }));
 };
 exports.SystemLogs = SystemLogs;
+//# sourceMappingURL=SystemLogs.js.map