@midscene/visualizer 0.1.4 → 0.2.0

package/dist/es/index.css

@@ -32,16 +32,20 @@ footer.mt-8 {
   display: flex;
   flex-direction: column;
   height: 100%;
-  color: #000;
+  color: #3b3b3b;
   font-family:
-    PingFang SC,
-    Hiragino Sans GB,
-    Microsoft YaHei,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Noto Sans",
+    Helvetica,
     Arial,
-    sans-serif;
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji";
   font-size: 14px;
-  border-top: 1px solid #CCCCCC;
-  border-bottom: 1px solid #CCCCCC;
+  border-top: 1px solid #E5E5E5;
+  border-bottom: 1px solid #E5E5E5;
 }
 .ant-layout {
   flex-grow: 1;
@@ -59,7 +63,7 @@ footer.mt-8 {
   flex-direction: row;
   flex-grow: 1;
   overflow: hidden;
-  background: #f7f7f7;
+  background: #FFF;
 }
 .main-right.uploader-wrapper {
   box-sizing: border-box;
@@ -82,7 +86,7 @@ footer.mt-8 {
   background: #ffffff;
   overflow-x: hidden;
   overflow-y: scroll;
-  border-left: 1px solid #CCCCCC;
+  border-left: 1px solid #E5E5E5;
 }
 .main-right .main-side {
   box-sizing: border-box;

package/dist/es/index.js

@@ -19,17 +19,18 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import "./index.css";
-import { ConfigProvider, message, Upload, Button } from "antd";
-import { useEffect, useRef, useState } from "react";
+import DetailSide from "./component/detail-side";
+import Sidebar from "./component/sidebar";
+import { useExecutionDump } from "./component/store";
 import { Helmet } from "@modern-js/runtime/head";
+import { Button, ConfigProvider, Upload, message } from "antd";
+import { useEffect, useRef, useState } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import Timeline from "./component/timeline";
-import DetailPanel from "./component/detail-panel";
 import Logo from "./component/assets/logo-plain.js";
+import DetailPanel from "./component/detail-panel";
 import GlobalHoverPreview from "./component/global-hover-preview";
-import { useExecutionDump } from "./component/store";
-import DetailSide from "./component/detail-side";
-import Sidebar from "./component/sidebar";
+import Timeline from "./component/timeline";
+import demoDump from "./demo-dump.json";
 const { Dragger } = Upload;
 let globalRenderCount = 1;
 function Visualizer(props) {
@@ -88,9 +89,8 @@ function Visualizer(props) {
       return false;
     }
   };
-  const loadTasksDemo = () => {
-  };
-  const loadInsightDemo = () => {
+  const loadDemoDump = () => {
+    setGroupedDump(demoDump);
   };
   let mainContent;
   if (!executionDump) {
@@ -107,14 +107,11 @@ function Visualizer(props) {
         /* @__PURE__ */ jsxs("p", { className: "ant-upload-text", children: [
           "The latest dump file is usually placed in",
           " ",
-          /* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx("i", { children: "./midscene_run/" }) })
+          /* @__PURE__ */ jsx("b", { children: /* @__PURE__ */ jsx("i", { children: "./midscene_run/report" }) })
         ] }),
         /* @__PURE__ */ jsx("p", { className: "ant-upload-text", children: "All data will be processed locally by the browser. No data will be sent to the server." })
       ] })),
-      /* @__PURE__ */ jsxs("div", { className: "demo-loader", children: [
-        /* @__PURE__ */ jsx(Button, { type: "link", onClick: loadTasksDemo, children: "Load Tasks Demo" }),
-        /* @__PURE__ */ jsx(Button, { type: "link", onClick: loadInsightDemo, children: "Load Insight Demo" })
-      ] })
+      /* @__PURE__ */ jsx("div", { className: "demo-loader", children: /* @__PURE__ */ jsx(Button, { type: "link", onClick: loadDemoDump, children: "Load Demo" }) })
     ] });
   } else {
     mainContent = /* @__PURE__ */ jsxs(
@@ -142,11 +139,18 @@ function Visualizer(props) {
           ),
           /* @__PURE__ */ jsx(Panel, { defaultSize: 80, maxSize: 95, children: /* @__PURE__ */ jsxs("div", { className: "main-right", children: [
             /* @__PURE__ */ jsx(Timeline, {}, mainLayoutChangeFlag),
-            /* @__PURE__ */ jsx("div", { className: "main-content", children: /* @__PURE__ */ jsxs(PanelGroup, { autoSaveId: "page-detail-layout", direction: "horizontal", children: [
-              /* @__PURE__ */ jsx(Panel, { maxSize: 95, children: /* @__PURE__ */ jsx("div", { className: "main-side", children: /* @__PURE__ */ jsx(DetailSide, {}) }) }),
-              /* @__PURE__ */ jsx(PanelResizeHandle, {}),
-              /* @__PURE__ */ jsx(Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ jsx("div", { className: "main-canvas-container", children: /* @__PURE__ */ jsx(DetailPanel, {}) }) })
-            ] }) })
+            /* @__PURE__ */ jsx("div", { className: "main-content", children: /* @__PURE__ */ jsxs(
+              PanelGroup,
+              {
+                autoSaveId: "page-detail-layout",
+                direction: "horizontal",
+                children: [
+                  /* @__PURE__ */ jsx(Panel, { maxSize: 95, children: /* @__PURE__ */ jsx("div", { className: "main-side", children: /* @__PURE__ */ jsx(DetailSide, {}) }) }),
+                  /* @__PURE__ */ jsx(PanelResizeHandle, {}),
+                  /* @__PURE__ */ jsx(Panel, { defaultSize: 75, maxSize: 95, children: /* @__PURE__ */ jsx("div", { className: "main-canvas-container", children: /* @__PURE__ */ jsx(DetailPanel, {}) }) })
+                ]
+              }
+            ) })
           ] }) })
         ]
       }
@@ -156,14 +160,20 @@ function Visualizer(props) {
   useEffect(() => {
     const ifInRspressPage = document.querySelector(".rspress-nav");
     const navHeightKey = "--rp-nav-height";
-    const originalNavHeight = getComputedStyle(document.documentElement).getPropertyValue(navHeightKey);
+    const originalNavHeight = getComputedStyle(
+      document.documentElement
+    ).getPropertyValue(navHeightKey);
     if (ifInRspressPage) {
-      setContainerHeight("calc(100vh - 72px)");
-      document.documentElement.style.setProperty(navHeightKey, "42px");
+      const newNavHeight = "42px";
+      setContainerHeight(`calc(100vh - ${newNavHeight})`);
+      document.documentElement.style.setProperty(navHeightKey, newNavHeight);
     }
     return () => {
       if (ifInRspressPage) {
-        document.documentElement.style.setProperty(navHeightKey, originalNavHeight);
+        document.documentElement.style.setProperty(
+          navHeightKey,
+          originalNavHeight
+        );
       }
     };
   }, []);
@@ -186,8 +196,16 @@ function Visualizer(props) {
         }
       },
       children: [
-        /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("title", { children: "MidScene.js - Visualization Tool" }) }),
-        /* @__PURE__ */ jsx("div", { className: "page-container", style: { height: containerHeight }, children: mainContent }, `render-${globalRenderCount}`),
+        /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("title", { children: "Midscene.js - Visualization Tool" }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "page-container",
+            style: { height: containerHeight },
+            children: mainContent
+          },
+          `render-${globalRenderCount}`
+        ),
         /* @__PURE__ */ jsx(GlobalHoverPreview, {})
       ]
     }

package/dist/es/utils.js

@@ -42,22 +42,21 @@ function insightDumpToExecutionDump(insightDump) {
     return task;
   };
   if (!Array.isArray(insightDump)) {
-    const result = {
+    const result2 = {
       sdkVersion: insightDump.sdkVersion,
       logTime: insightDump.logTime,
       name: "Insight",
       tasks: [insightToTask(insightDump)]
     };
-    return result;
-  } else {
-    const result = {
-      sdkVersion: insightDump[0].sdkVersion,
-      logTime: insightDump[0].logTime,
-      name: "Insight",
-      tasks: insightDump.map(insightToTask)
-    };
-    return result;
+    return result2;
   }
+  const result = {
+    sdkVersion: insightDump[0].sdkVersion,
+    logTime: insightDump[0].logTime,
+    name: "Insight",
+    tasks: insightDump.map(insightToTask)
+  };
+  return result;
 }
 function timeStr(timestamp) {
   return timestamp ? dayjs(timestamp).format("YYYY-MM-DD HH:mm:ss") : "-";

package/dist/lib/component/blackboard.js

@@ -53,9 +53,9 @@ __export(blackboard_exports, {
 });
 module.exports = __toCommonJS(blackboard_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_antd = require("antd");
 var PIXI = __toESM(require("pixi.js"));
 var import_react = require("react");
-var import_antd = require("antd");
 var import_color = require("./color");
 var import_blackboard = require("./blackboard.css");
 var import_store = require("./store");
@@ -66,9 +66,15 @@ const noop = () => {
 };
 const BlackBoard = () => {
   const dump = (0, import_store.useInsightDump)((store) => store.data);
-  const setHighlightSectionNames = (0, import_store.useInsightDump)((store) => store.setHighlightSectionNames);
-  const setHighlightElements = (0, import_store.useInsightDump)((store) => store.setHighlightElements);
-  const highlightSectionNames = (0, import_store.useInsightDump)((store) => store.highlightSectionNames);
+  const setHighlightSectionNames = (0, import_store.useInsightDump)(
+    (store) => store.setHighlightSectionNames
+  );
+  const setHighlightElements = (0, import_store.useInsightDump)(
+    (store) => store.setHighlightElements
+  );
+  const highlightSectionNames = (0, import_store.useInsightDump)(
+    (store) => store.highlightSectionNames
+  );
   const highlightElements = (0, import_store.useInsightDump)((store) => store.highlightElements);
   const { context, matchedSection: sections, matchedElement: elements } = dump;
   const { size, screenshotBase64 } = context;
@@ -87,7 +93,11 @@ const BlackBoard = () => {
         if (!domRef.current || !screenWidth) {
           return;
         }
-        yield app.init({ width: screenWidth, height: screenHeight, background: 16777215 });
+        yield app.init({
+          width: screenWidth,
+          height: screenHeight,
+          background: 16777215
+        });
         const canvasEl = domRef.current;
         domRef.current.appendChild(app.canvas);
         const { clientWidth } = domRef.current.parentElement;
@@ -180,7 +190,14 @@ const BlackBoard = () => {
       if (elements.includes(element)) {
         return;
       }
-      const [graphics, texts] = rectMarkForItem(rect, "", (0, import_color.highlightColorForType)("element"), 1, noop, noop);
+      const [graphics, texts] = rectMarkForItem(
+        rect,
+        "",
+        (0, import_color.highlightColorForType)("element"),
+        1,
+        noop,
+        noop
+      );
       itemMarkContainer.addChild(graphics);
       textContainer.addChild(texts);
     });
@@ -276,7 +293,14 @@ const BlackBoard = () => {
     ] }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "blackboard", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blackboard-main-content", style: { width: "100%" }, ref: domRef }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "blackboard-main-content",
+        style: { width: "100%" },
+        ref: domRef
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "blackboard-filter", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "overlay-control", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Checkbox, { checked: bgVisible, onChange: onSetBg, children: "Screenshot" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Checkbox, { checked: textsVisible, onChange: onSetTextsVisible, children: "Text Mark" })

package/dist/lib/component/color.js

@@ -41,16 +41,14 @@ function colorForName(type, name) {
   const hashNumber = djb2Hash(name);
   if (type === "section") {
     return sectionColor[hashNumber % sectionColor.length];
-  } else {
-    return elementColor[hashNumber % elementColor.length];
   }
+  return elementColor[hashNumber % elementColor.length];
 }
 function highlightColorForType(type) {
   if (type === "section") {
     return highlightColorForSection;
-  } else {
-    return highlightColorForElement;
   }
+  return highlightColorForElement;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/lib/component/detail-panel.js

@@ -34,16 +34,16 @@ __export(detail_panel_exports, {
 module.exports = __toCommonJS(detail_panel_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_detail_panel = require("./detail-panel.css");
-var import_antd = require("antd");
+var import_store = require("./store");
+var import_utils = require("../utils");
 var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
 var import_react = require("react");
 var import_blackboard = __toESM(require("./blackboard"));
-var import_store = require("./store");
-var import_utils = require("../utils");
 const ScreenshotItem = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "screenshot-item", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "screenshot-item-title", children: props.time }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: props.img }) })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: props.img, alt: "screenshot" }) })
   ] });
 };
 const VIEW_TYPE_BLACKBOARD = "blackboard";
@@ -51,18 +51,19 @@ const VIEW_TYPE_SCREENSHOT = "screenshot";
 const VIEW_TYPE_JSON = "json";
 const DetailPanel = () => {
   var _a;
+  const dumpContext = (0, import_store.useInsightDump)((store) => store.data);
   const dumpId = (0, import_store.useInsightDump)((store) => store._loadId);
-  const blackboardViewAvailable = Boolean(dumpId);
+  const blackboardViewAvailable = Boolean(dumpContext);
   const activeTask = (0, import_store.useExecutionDump)((store) => store.activeTask);
   const [preferredViewType, setViewType] = (0, import_react.useState)(VIEW_TYPE_BLACKBOARD);
-  const viewType = preferredViewType === VIEW_TYPE_BLACKBOARD && !dumpId ? VIEW_TYPE_SCREENSHOT : preferredViewType;
+  const viewType = preferredViewType === VIEW_TYPE_BLACKBOARD && !blackboardViewAvailable ? VIEW_TYPE_SCREENSHOT : preferredViewType;
   let content;
   if (!activeTask) {
     content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "please select a task" });
   } else if (viewType === VIEW_TYPE_JSON) {
     content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "json-content", children: (0, import_utils.filterBase64Value)(JSON.stringify(activeTask, void 0, 2)) });
   } else if (viewType === VIEW_TYPE_BLACKBOARD) {
-    if (dumpId) {
+    if (blackboardViewAvailable) {
       content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_blackboard.default, {}, `${dumpId}`);
     } else {
       content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "invalid view" });
@@ -86,7 +87,9 @@ const DetailPanel = () => {
         } else if (viewType === VIEW_TYPE_SCREENSHOT) {
           setViewType(VIEW_TYPE_JSON);
         } else {
-          setViewType(blackboardViewAvailable ? VIEW_TYPE_BLACKBOARD : VIEW_TYPE_SCREENSHOT);
+          setViewType(
+            blackboardViewAvailable ? VIEW_TYPE_BLACKBOARD : VIEW_TYPE_SCREENSHOT
+          );
         }
         e.preventDefault();
       }
@@ -97,11 +100,19 @@ const DetailPanel = () => {
     };
   });
   const options = [
-    { label: "Screenshots", value: VIEW_TYPE_SCREENSHOT, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CameraOutlined, {}) },
+    {
+      label: "Screenshots",
+      value: VIEW_TYPE_SCREENSHOT,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CameraOutlined, {})
+    },
     { label: "JSON View", value: VIEW_TYPE_JSON, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileTextOutlined, {}) }
   ];
   if (blackboardViewAvailable) {
-    options.unshift({ label: "Visualization", value: VIEW_TYPE_BLACKBOARD, icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ScheduleOutlined, {}) });
+    options.unshift({
+      label: "Visualization",
+      value: VIEW_TYPE_BLACKBOARD,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ScheduleOutlined, {})
+    });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "detail-panel", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "view-switcher", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -110,11 +121,10 @@ const DetailPanel = () => {
         theme: {
           components: {
             Segmented: {
-              itemSelectedBg: "#D7D7D7",
+              itemSelectedBg: "#bfc4da50",
               itemSelectedColor: "#000000"
               // itemHoverColor: '#ffffff',
-              // itemHoverBg: '#A3D6D2', // @sub-blue
-              /* 这里是你的组件 token */
+              // itemHoverBg: '#A3D6D2',
             }
           }
         },

package/dist/lib/component/detail-side.css

@@ -18,7 +18,6 @@
   line-height: 1.5;
 }
 .detail-side .meta-kv .meta .meta-key {
-  font-weight: bold;
   width: 100px;
   text-align: right;
   padding-right: 16px;
@@ -82,6 +81,7 @@
   font-size: 14px;
   margin-top: 10px;
   white-space: break-spaces;
+  word-wrap: break-word;
   margin: 0;
 }
 .detail-side .item-list .element-button:hover {

package/dist/lib/component/detail-side.js

@@ -48,18 +48,34 @@ __export(detail_side_exports, {
 module.exports = __toCommonJS(detail_side_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_detail_side = require("./detail-side.css");
+var import_utils = require("../utils");
 var import_icons = require("@ant-design/icons");
 var import_antd = require("antd");
 var import_color = require("./color");
-var import_store = require("./store");
-var import_panel_title = __toESM(require("./panel-title"));
 var import_misc = require("./misc");
-var import_utils = require("../utils");
+var import_panel_title = __toESM(require("./panel-title"));
+var import_store = require("./store");
 const noop = () => {
 };
 const Card = (props) => {
-  const { highlightWithColor, title, subtitle, onMouseEnter, onMouseLeave, content, characteristic } = props;
-  const titleTag = props.characteristic ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "item-extra", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title-tag", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { placement: "bottomRight", title: characteristic, mouseEnterDelay: 0, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.RadiusSettingOutlined, {}) }) }) }) }) : null;
+  const {
+    highlightWithColor,
+    title,
+    subtitle,
+    onMouseEnter,
+    onMouseLeave,
+    content,
+    characteristic
+  } = props;
+  const titleTag = props.characteristic ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "item-extra", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title-tag", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_antd.Tooltip,
+    {
+      placement: "bottomRight",
+      title: characteristic,
+      mouseEnterDelay: 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.RadiusSettingOutlined, {}) })
+    }
+  ) }) }) : null;
   const titleRightPaddingClass = props.characteristic ? "title-right-padding" : "";
   const modeClass = props.liteMode ? "item-lite" : "";
   const highlightStyle = highlightWithColor ? { backgroundColor: highlightWithColor } : {};
@@ -71,12 +87,33 @@ const Card = (props) => {
       onMouseEnter,
       onMouseLeave,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `title ${titleRightPaddingClass}`, style: { display: title ? "block" : "none" }, children: [
-          title,
-          titleTag
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `subtitle ${titleRightPaddingClass}`, style: { display: subtitle ? "block" : "none" }, children: subtitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "description", style: { display: content ? "block" : "none" }, children: content })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: `title ${titleRightPaddingClass}`,
+            style: { display: title ? "block" : "none" },
+            children: [
+              title,
+              titleTag
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: `subtitle ${titleRightPaddingClass}`,
+            style: { display: subtitle ? "block" : "none" },
+            children: subtitle
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "description",
+            style: { display: content ? "block" : "none" },
+            children: content
+          }
+        )
       ]
     }
   );
@@ -96,27 +133,33 @@ const objectWithoutKeys = (obj, keys) => Object.keys(obj).reduce((acc, key) => {
   return acc;
 }, {});
 const DetailSide = () => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const task = (0, import_store.useExecutionDump)((store) => store.activeTask);
   const dump = (0, import_store.useInsightDump)((store) => store.data);
   const { matchedSection: sections, matchedElement: elements } = dump || {};
-  const highlightSectionNames = (0, import_store.useInsightDump)((store) => store.highlightSectionNames);
+  const highlightSectionNames = (0, import_store.useInsightDump)(
+    (store) => store.highlightSectionNames
+  );
   const highlightElements = (0, import_store.useInsightDump)((store) => store.highlightElements);
-  const setHighlightSectionNames = (0, import_store.useInsightDump)((store) => store.setHighlightSectionNames);
-  const setHighlightElements = (0, import_store.useInsightDump)((store) => store.setHighlightElements);
-  const setHighlightSectionName = function(name) {
+  const setHighlightSectionNames = (0, import_store.useInsightDump)(
+    (store) => store.setHighlightSectionNames
+  );
+  const setHighlightElements = (0, import_store.useInsightDump)(
+    (store) => store.setHighlightElements
+  );
+  const setHighlightSectionName = (name) => {
     setHighlightSectionNames([name]);
   };
-  const setHighlightElement = function(element) {
+  const setHighlightElement = (element) => {
     setHighlightElements([element]);
   };
-  const unhighlightSection = function() {
+  const unhighlightSection = () => {
     setHighlightSectionNames([]);
   };
-  const unhighlightElement = function() {
+  const unhighlightElement = () => {
     setHighlightElements([]);
   };
-  const kv = function(data) {
+  const kv = (data) => {
     const isElementItem = (value) => Boolean(value) && typeof value === "object" && typeof value.content !== "undefined" && Boolean(value.center) && Boolean(value.rect);
     const isSectionItem = (value) => Boolean(value) && typeof (value == null ? void 0 : value.sectionCharacteristics) !== "undefined" && typeof (value == null ? void 0 : value.rect) !== "undefined";
     const elementEl = (value) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -180,6 +223,10 @@ const DetailSide = () => {
       {
         key: "time cost",
         content: (0, import_misc.timeCostStrElement)((_c = task == null ? void 0 : task.timing) == null ? void 0 : _c.cost)
+      },
+      {
+        key: "cache",
+        content: (task == null ? void 0 : task.cache) ? JSON.stringify(task == null ? void 0 : task.cache) : "false"
       }
     ]
   });
@@ -188,7 +235,10 @@ const DetailSide = () => {
     taskParam = MetaKV({
       data: [
         { key: "type", content: task && (0, import_utils.typeStr)(task) || "" },
-        { key: "param", content: (_d = task == null ? void 0 : task.param) == null ? void 0 : _d.userPrompt }
+        {
+          key: "param",
+          content: (_d = task == null ? void 0 : task.param) == null ? void 0 : _d.userPrompt
+        }
       ]
     });
   } else if ((task == null ? void 0 : task.type) === "Insight") {
@@ -198,7 +248,7 @@ const DetailSide = () => {
         {
           key: "param",
           content: JSON.stringify(
-            ((_e = task == null ? void 0 : task.param) == null ? void 0 : _e.prompt) || ((_f = task == null ? void 0 : task.param) == null ? void 0 : _f.dataDemand)
+            ((_e = task == null ? void 0 : task.param) == null ? void 0 : _e.prompt) || ((_f = task == null ? void 0 : task.param) == null ? void 0 : _f.dataDemand) || ((_g = task == null ? void 0 : task.param) == null ? void 0 : _g.assertion)
           )
         }
       ]
@@ -209,7 +259,11 @@ const DetailSide = () => {
         { key: "type", content: task && (0, import_utils.typeStr)(task) || "" },
         {
           key: "value",
-          content: JSON.stringify((_g = task == null ? void 0 : task.param) == null ? void 0 : _g.value, void 0, 2)
+          content: JSON.stringify(
+            (_h = task == null ? void 0 : task.param) == null ? void 0 : _h.value,
+            void 0,
+            2
+          )
         }
       ]
     });
@@ -268,14 +322,14 @@ const DetailSide = () => {
       idx
     );
   }) : null;
-  const errorSection = (dump == null ? void 0 : dump.error) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const errorSection = (task == null ? void 0 : task.error) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Card,
     {
       liteMode: true,
       title: "Error",
       onMouseEnter: noop,
       onMouseLeave: noop,
-      content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "description-content", style: { color: "#F00" }, children: dump.error })
+      content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "description-content", style: { color: "#F00" }, children: task.error })
     }
   ) : null;
   const dataCard = (dump == null ? void 0 : dump.data) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -287,8 +341,24 @@ const DetailSide = () => {
       content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: JSON.stringify(dump.data, void 0, 2) })
     }
   ) : null;
-  console.log("dump is", dump);
-  const plans = (_h = task == null ? void 0 : task.output) == null ? void 0 : _h.plans;
+  let assertionCard = null;
+  if ((task == null ? void 0 : task.type) === "Insight" && task.subType === "Assert") {
+    assertionCard = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Card,
+      {
+        liteMode: true,
+        title: "Assert",
+        onMouseEnter: noop,
+        onMouseLeave: noop,
+        content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "description-content", children: JSON.stringify(
+          task.output,
+          void 0,
+          2
+        ) })
+      }
+    );
+  }
+  const plans = (_i = task == null ? void 0 : task.output) == null ? void 0 : _i.plans;
   let timelineData = [];
   if (plans) {
     timelineData = timelineData.concat(
@@ -313,6 +383,7 @@ const DetailSide = () => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "item-list item-list-space-up", children: [
       errorSection,
       dataCard,
+      assertionCard,
       matchedSectionsEl,
       matchedElementsEl,
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Timeline, { items: timelineData })

package/dist/lib/component/global-hover-preview.css

@@ -6,9 +6,9 @@
   overflow: hidden;
   z-index: 10;
   text-align: center;
-  border: 1px solid #CCCCCC;
+  border: 1px solid #E5E5E5;
   box-sizing: border-box;
-  background: #f7f7f7;
+  background: #F8F8F8;
   box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
 }
 .global-hover-preview img {