@vectorx/agent-simulator 0.1.0

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

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatOpenAIResponse = exports.CustomMarkdown = exports.ReasoningCard = void 0;
+const icons_1 = require("@ant-design/icons");
+const antd_1 = require("antd");
+const markdown_it_1 = __importDefault(require("markdown-it"));
+const react_1 = __importDefault(require("react"));
+const md = new markdown_it_1.default({
+    html: true,
+    breaks: true,
+    linkify: true,
+    typographer: true,
+});
+const ReasoningCard = ({ content }) => {
+    const { token } = antd_1.theme.useToken();
+    return (react_1.default.createElement(antd_1.Flex, { vertical: true, gap: 8 },
+        react_1.default.createElement(antd_1.Typography.Text, { type: "secondary", style: { fontSize: 12 } },
+            react_1.default.createElement(icons_1.RobotOutlined, { style: { marginRight: 4 } }),
+            " \u6DF1\u5EA6\u601D\u8003\u8FC7\u7A0B"),
+        react_1.default.createElement(antd_1.Card, { size: "small", style: {
+                backgroundColor: token.colorBgElevated,
+                border: `1px solid ${token.colorBorder}`,
+                borderRadius: 8,
+            } },
+            react_1.default.createElement(antd_1.Typography.Text, null, content))));
+};
+exports.ReasoningCard = ReasoningCard;
+const CustomMarkdown = ({ content }) => {
+    const safeContent = (() => {
+        if (content === null || content === undefined) {
+            return "";
+        }
+        if (typeof content === "string") {
+            return content;
+        }
+        if (typeof content === "object" && content.content) {
+            return String(content.content);
+        }
+        try {
+            return JSON.stringify(content);
+        }
+        catch (e) {
+            return String(content);
+        }
+    })();
+    if (!safeContent || safeContent === "..." || safeContent.trim() === "") {
+        return react_1.default.createElement(antd_1.Typography.Text, { type: "secondary" }, "\u52A0\u8F7D\u4E2D...");
+    }
+    try {
+        return (react_1.default.createElement(antd_1.Typography, null,
+            react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: md.render(safeContent) } })));
+    }
+    catch (e) {
+        console.error("渲染Markdown失败:", e);
+        return react_1.default.createElement(antd_1.Typography.Text, null, safeContent);
+    }
+};
+exports.CustomMarkdown = CustomMarkdown;
+const formatOpenAIResponse = (chunk) => {
+    try {
+        console.log("正在处理数据块:", chunk);
+        if (typeof chunk.data === "string") {
+            let dataContent = chunk.data;
+            if (dataContent.startsWith("data:")) {
+                dataContent = dataContent.substring(5).trim();
+            }
+            if (dataContent === " [DONE]") {
+                return null;
+            }
+            try {
+                let parsedData;
+                try {
+                    parsedData = JSON.parse(dataContent);
+                }
+                catch (e) {
+                    console.error("JSON解析失败", dataContent);
+                    return { content: dataContent, reasoningContent: "", role: "assistant" };
+                }
+                if (parsedData.choices && parsedData.choices.length > 0) {
+                    const choice = parsedData.choices[0];
+                    if (choice.delta && (choice.delta.content !== undefined || choice.delta.reasoning_content !== undefined)) {
+                        return {
+                            content: choice.delta.content || "",
+                            reasoningContent: choice.delta.reasoning_content || "",
+                            role: parsedData.role || "assistant",
+                        };
+                    }
+                }
+                if (parsedData.content !== undefined || parsedData.reasoning_content !== undefined) {
+                    return {
+                        content: parsedData.content || "",
+                        reasoningContent: parsedData.reasoning_content || "",
+                        role: parsedData.role || "assistant",
+                    };
+                }
+                console.log("未匹配任何已知数据格式，返回原始内容");
+                return { content: dataContent, reasoningContent: "", role: "assistant" };
+            }
+            catch (e) {
+                console.error("解析OpenAI格式数据失败:", e);
+                return { content: dataContent, reasoningContent: "", role: "assistant" };
+            }
+        }
+        return null;
+    }
+    catch (e) {
+        console.error("处理OpenAI响应时出错:", e);
+        return null;
+    }
+};
+exports.formatOpenAIResponse = formatOpenAIResponse;

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

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogPanel = void 0;
+const antd_1 = require("antd");
+const react_1 = __importDefault(require("react"));
+const logger_service_1 = require("../services/logger-service");
+const SystemLogs_1 = require("./SystemLogs");
+const LogPanel = ({ open, activeTab, onTabChange, onClose, agentSimulatorInfo, height, debugStatus, }) => {
+    var _a, _b;
+    const { token } = antd_1.theme.useToken();
+    const getBaseUrl = (uri) => {
+        if (!uri)
+            return "";
+        try {
+            const url = new URL(uri);
+            return `${url.protocol}//${url.hostname}${url.port ? ":" + url.port : ""}`;
+        }
+        catch (_a) {
+            return "";
+        }
+    };
+    return (react_1.default.createElement(antd_1.Drawer, { placement: "bottom", open: open, onClose: onClose, height: height, mask: true, maskClosable: true, styles: {
+            body: { padding: 0, display: "flex", flexDirection: "column" },
+            header: { display: "none" },
+        }, destroyOnClose: false },
+        react_1.default.createElement("div", { style: {
+                borderBottom: `1px solid ${token.colorBorder}`,
+                backgroundColor: token.colorBgContainer,
+            } },
+            react_1.default.createElement(antd_1.Tabs, { activeKey: activeTab, onChange: onTabChange, type: "card", tabBarStyle: {
+                    margin: 0,
+                    padding: "0 16px",
+                    marginBottom: 0,
+                }, animated: {
+                    inkBar: true,
+                    tabPane: false,
+                }, items: [
+                    { key: "system", label: "系统日志" },
+                    { key: "user", label: "用户日志" },
+                ] })),
+        react_1.default.createElement("div", { style: {
+                flex: 1,
+                overflow: "auto",
+                padding: "16px",
+            } },
+            activeTab === "system" &&
+                (agentSimulatorInfo ? (react_1.default.createElement(SystemLogs_1.SystemLogs, { baseUrl: getBaseUrl(agentSimulatorInfo.agentServerUrl), agentName: ((_a = agentSimulatorInfo.agentInfo) === null || _a === void 0 ? void 0 : _a.agent_name) || "未获取到Agent名称", debugStatus: debugStatus, isOpen: open, logType: logger_service_1.LogType.ACCESS })) : (react_1.default.createElement("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "200px",
+                        color: token.colorTextSecondary,
+                    } }, "Agent \u670D\u52A1\u672A\u8FDE\u63A5\uFF0C\u65E0\u6CD5\u83B7\u53D6\u7CFB\u7EDF\u65E5\u5FD7"))),
+            activeTab === "user" &&
+                (agentSimulatorInfo ? (react_1.default.createElement(SystemLogs_1.SystemLogs, { baseUrl: getBaseUrl(agentSimulatorInfo.agentServerUrl), agentName: ((_b = agentSimulatorInfo.agentInfo) === null || _b === void 0 ? void 0 : _b.agent_name) || "未获取到Agent名称", debugStatus: debugStatus, isOpen: open, logType: logger_service_1.LogType.USERCODE })) : (react_1.default.createElement("div", { style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        height: "200px",
+                        color: token.colorTextSecondary,
+                    } }, "Agent \u670D\u52A1\u672A\u8FDE\u63A5\uFF0C\u65E0\u6CD5\u83B7\u53D6\u7528\u6237\u65E5\u5FD7"))))));
+};
+exports.LogPanel = LogPanel;

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

@@ -0,0 +1,404 @@
+"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 antd_1 = require("antd");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const logger_service_1 = require("../services/logger-service");
+var AgentType;
+(function (AgentType) {
+    AgentType["AI_SDK_REQUEST_START"] = "AI_SDK_REQUEST_START";
+    AgentType["AI_SDK_REQUEST_SUCCESS"] = "AI_SDK_REQUEST_SUCCESS";
+    AgentType["AI_SDK_REQUEST_ERROR"] = "AI_SDK_REQUEST_ERROR";
+    AgentType["AI_SDK_CREATE_MODEL"] = "AI_SDK_CREATE_MODEL";
+    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["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 { 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 highlightKeywords = (text) => {
+        const keywords = [
+            "getHistoryMessages",
+            "createRecordPair",
+            "getConversations",
+            "AI_SDK_REQUEST_START",
+            "AI_SDK_REQUEST_SUCCESS",
+            "AI_SDK_REQUEST_ERROR",
+            "AI_SDK_CREATE_MODEL",
+            "AI_SDK_CREATE_RECORD_PAIR",
+            "AI_SDK_GET_HISTORY_MESSAGES",
+            "AI_SDK_GET_CONVERSATIONS",
+            "SERVER_REQUEST_START",
+            "SERVER_REQUEST_END",
+        ];
+        const regex = new RegExp(`(${keywords.join("|")})`, "gi");
+        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: {
+                        fontWeight: "bold",
+                        color: "#ffa940",
+                        background: "rgba(255, 169, 64, 0.1)",
+                        padding: "0 2px",
+                        borderRadius: "2px",
+                    } }, part));
+            }
+            return react_1.default.createElement("span", { key: index }, part);
+        });
+    };
+    const getStatusStyle = (status) => {
+        if (status >= 500) {
+            return { color: "#ff4d4f", fontWeight: "bold" };
+        }
+        else if (status >= 400) {
+            return { color: "#faad14", fontWeight: "bold" };
+        }
+        else if (status >= 300) {
+            return { color: "#1890ff" };
+        }
+        else if (status >= 200) {
+            return { color: "#52c41a", fontWeight: "bold" };
+        }
+        return {};
+    };
+    const formatLogEntry = (entry) => {
+        var _a;
+        const timestamp = new Date(entry["@timestamp"]).toLocaleTimeString();
+        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"}`;
+            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));
+                }
+                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 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));
+                }
+            }
+            else {
+                logMessage = `[${timestamp}] ${detail.eventId ? `[${detail.eventId.slice(-8)}]` : ""} [${level}] ${(detail === null || detail === void 0 ? void 0 : detail.msg) || "unknown"}`;
+            }
+            return typeof logMessage === "string" ? highlightKeywords(logMessage) : logMessage;
+        }
+        catch (_b) {
+            return `[${timestamp}] [${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));
+                if (detail.method)
+                    details.push(react_1.default.createElement("div", { key: "method" },
+                        react_1.default.createElement("strong", null, "Method:"),
+                        " ",
+                        detail.method));
+                if (detail.url)
+                    details.push(react_1.default.createElement("div", { key: "url" },
+                        react_1.default.createElement("strong", null, "URL:"),
+                        " ",
+                        detail.url));
+                if (detail.modelName)
+                    details.push(react_1.default.createElement("div", { key: "model" },
+                        react_1.default.createElement("strong", null, "Model:"),
+                        " ",
+                        detail.modelName));
+                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)));
+                if (detail.duration)
+                    details.push(react_1.default.createElement("div", { key: "duration" },
+                        react_1.default.createElement("strong", null, "Duration:"),
+                        " ",
+                        detail.duration));
+                if (detail.ip)
+                    details.push(react_1.default.createElement("div", { key: "ip" },
+                        react_1.default.createElement("strong", null, "IP:"),
+                        " ",
+                        detail.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)));
+            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)));
+            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))));
+            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))));
+            if (detail.eventId)
+                details.push(react_1.default.createElement("div", { key: "eventId" },
+                    react_1.default.createElement("strong", null, "Event ID:"),
+                    " ",
+                    detail.eventId));
+            return details;
+        }
+        catch (_a) {
+            return [entry.message];
+        }
+    };
+    const hasDetailedInfo = (entry) => {
+        const detail = JSON.parse(entry.message);
+        return !!((detail.headers && Object.keys(detail.headers).length > 0) ||
+            detail.data ||
+            detail.error ||
+            detail.stack ||
+            (detail.eventId && detail.eventId !== "unknown"));
+    };
+    const toggleExpanded = (index) => {
+        const newExpanded = new Set(expandedLogs);
+        if (newExpanded.has(index)) {
+            newExpanded.delete(index);
+        }
+        else {
+            newExpanded.add(index);
+        }
+        setExpandedLogs(newExpanded);
+    };
+    const getLogStyle = (entry) => {
+        const baseStyle = {
+            margin: "2px 0",
+            padding: "2px 0",
+        };
+        switch (entry.level) {
+            case "error":
+                return Object.assign(Object.assign({}, baseStyle), { color: "#ff4d4f", fontWeight: "bold" });
+            case "warn":
+                return Object.assign(Object.assign({}, baseStyle), { color: "#faad14", fontWeight: "bold" });
+            case "info":
+                return Object.assign(Object.assign({}, baseStyle), { color: "#1890ff" });
+            case "debug":
+                return Object.assign(Object.assign({}, baseStyle), { color: "#8c8c8c" });
+            default:
+                return Object.assign(Object.assign({}, baseStyle), { color: "#8c8c8c" });
+        }
+    };
+    const fetchLogs = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (debugStatus !== "normal") {
+            return;
+        }
+        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];
+                });
+            }
+        }
+        catch (error) {
+            console.error("Failed to fetch logs:", error);
+            const errorLog = {
+                "@timestamp": new Date().toISOString(),
+                level: "error",
+                eventId: "",
+                message: JSON.stringify({ msg: `日志获取失败: ${error.message}` }),
+                source: "local",
+            };
+            setLogs((prevLogs) => [...prevLogs, errorLog]);
+        }
+    });
+    (0, react_2.useEffect)(() => {
+        const initialLogs = [
+            logType === logger_service_1.LogType.USERCODE
+                ? {
+                    "@timestamp": new Date().toISOString(),
+                    level: "system",
+                    eventId: "",
+                    message: JSON.stringify({ msg: `👤 用户日志拉取成功 ${new Date().toLocaleString()}` }),
+                    source: "local",
+                }
+                : {
+                    "@timestamp": new Date().toISOString(),
+                    level: "system",
+                    eventId: "",
+                    message: JSON.stringify({ msg: `🖥️ 系统日志拉取成功 ${new Date().toLocaleString()}` }),
+                    source: "local",
+                },
+            {
+                "@timestamp": new Date().toISOString(),
+                level: "system",
+                eventId: "",
+                message: JSON.stringify({ msg: `Agent服务地址: ${baseUrl}` }),
+                source: "local",
+            },
+            {
+                "@timestamp": new Date().toISOString(),
+                level: "system",
+                eventId: "",
+                message: JSON.stringify({ msg: `Agent '${agentName}' 已加载` }),
+                source: "local",
+            },
+        ];
+        setLogs(initialLogs);
+        fetchLogs();
+        const intervalId = setInterval(fetchLogs, 5000);
+        return () => {
+            clearInterval(intervalId);
+        };
+    }, [baseUrl, agentName, loggerService, debugStatus]);
+    (0, react_2.useEffect)(() => {
+        if (isOpen) {
+            fetchLogs();
+        }
+    }, [isOpen]);
+    (0, react_2.useEffect)(() => {
+        const statusLog = {
+            "@timestamp": new Date().toISOString(),
+            level: debugStatus === "normal" ? "system" : "warn",
+            eventId: "",
+            message: JSON.stringify({ msg: `调试状态变更: ${debugStatus}` }),
+            source: "local",
+        };
+        setLogs((prevLogs) => [...prevLogs, statusLog]);
+    }, [debugStatus]);
+    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));
+            if (detail.requestId)
+                details.push(react_1.default.createElement("div", { key: "requestId" },
+                    react_1.default.createElement("strong", null, "Request ID:"),
+                    " ",
+                    detail.requestId));
+            if (detail.scene)
+                details.push(react_1.default.createElement("div", { key: "scene" },
+                    react_1.default.createElement("strong", null, "Scene:"),
+                    " ",
+                    detail.scene));
+            if (Array.isArray(detail.logs)) {
+                details.push(react_1.default.createElement("div", { key: "logs-title" },
+                    react_1.default.createElement("strong", null, "Logs:")));
+                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)));
+                });
+            }
+            return details;
+        }
+        catch (e) {
+            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",
+                                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)))));
+            })))));
+};
+exports.SystemLogs = SystemLogs;