@midscene/visualizer 0.0.1 → 0.1.1

package/dist/es/index.js

@@ -25,19 +25,24 @@ import { Helmet } from "@modern-js/runtime/head";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import Timeline from "./component/timeline";
 import DetailPanel from "./component/detail-panel";
-import logo from "./assets/logo-plain.16842bbc.svg";
+import Logo from "./component/assets/logo-plain.js";
 import GlobalHoverPreview from "./component/global-hover-preview";
 import { useExecutionDump } from "./component/store";
 import DetailSide from "./component/detail-side";
 import Sidebar from "./component/sidebar";
 const { Dragger } = Upload;
-const Index = () => {
+let globalRenderCount = 1;
+function Visualizer(props) {
+  const { dump } = props;
   const executionDump = useExecutionDump((store) => store.dump);
   const setGroupedDump = useExecutionDump((store) => store.setGroupedDump);
   const reset = useExecutionDump((store) => store.reset);
   const [mainLayoutChangeFlag, setMainLayoutChangeFlag] = useState(0);
   const mainLayoutChangedRef = useRef(false);
   useEffect(() => {
+    if (dump) {
+      setGroupedDump(dump);
+    }
     return () => {
       reset();
     };
@@ -91,7 +96,7 @@ const Index = () => {
   if (!executionDump) {
     mainContent = /* @__PURE__ */ jsxs("div", { className: "main-right uploader-wrapper", children: [
       /* @__PURE__ */ jsxs(Dragger, __spreadProps(__spreadValues({ className: "uploader" }, uploadProps), { children: [
-        /* @__PURE__ */ jsx("p", { className: "ant-upload-drag-icon", children: /* @__PURE__ */ jsx("img", { src: logo, alt: "Logo", style: { width: 100, height: 100, margin: "auto" } }) }),
+        /* @__PURE__ */ jsx("p", { className: "ant-upload-drag-icon", children: /* @__PURE__ */ jsx(Logo, { style: { width: 100, height: 100, margin: "auto" } }) }),
         /* @__PURE__ */ jsxs("p", { className: "ant-upload-text", children: [
           "Click or drag the",
           " ",
@@ -123,7 +128,7 @@ const Index = () => {
           }
         },
         children: [
-          /* @__PURE__ */ jsx(Panel, { maxSize: 95, children: /* @__PURE__ */ jsx(Sidebar, {}) }),
+          /* @__PURE__ */ jsx(Panel, { maxSize: 95, defaultSize: 20, children: /* @__PURE__ */ jsx(Sidebar, { hideLogo: props == null ? void 0 : props.hideLogo, logoAction: props == null ? void 0 : props.logoAction }) }),
           /* @__PURE__ */ jsx(
             PanelResizeHandle,
             {
@@ -147,6 +152,26 @@ const Index = () => {
       }
     );
   }
+  const [containerHeight, setContainerHeight] = useState("100%");
+  useEffect(() => {
+    const ifInRspressPage = document.querySelector(".rspress-nav");
+    const navHeightKey = "--rp-nav-height";
+    const originalNavHeight = getComputedStyle(document.documentElement).getPropertyValue(navHeightKey);
+    if (ifInRspressPage) {
+      setContainerHeight("calc(100vh - 72px)");
+      document.documentElement.style.setProperty(navHeightKey, "42px");
+    }
+    return () => {
+      if (ifInRspressPage) {
+        document.documentElement.style.setProperty(navHeightKey, originalNavHeight);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    return () => {
+      globalRenderCount += 1;
+    };
+  }, []);
   return /* @__PURE__ */ jsxs(
     ConfigProvider,
     {
@@ -162,13 +187,14 @@ const Index = () => {
       },
       children: [
         /* @__PURE__ */ jsx(Helmet, { children: /* @__PURE__ */ jsx("title", { children: "MidScene.js - Visualization Tool" }) }),
-        /* @__PURE__ */ jsx("div", { className: "page-container", children: mainContent }),
+        /* @__PURE__ */ jsx("div", { className: "page-container", style: { height: containerHeight }, children: mainContent }, `render-${globalRenderCount}`),
         /* @__PURE__ */ jsx(GlobalHoverPreview, {})
       ]
     }
   );
-};
-var src_default = Index;
+}
+var src_default = Visualizer;
 export {
+  Visualizer,
   src_default as default
 };

package/dist/lib/component/assets/logo-plain.js

@@ -0,0 +1,156 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var logo_plain_exports = {};
+__export(logo_plain_exports, {
+  default: () => logo_plain_default
+});
+module.exports = __toCommonJS(logo_plain_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
+const SvgLogoPlain = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", __spreadProps(__spreadValues({ xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", xmlSpace: "preserve", width: 535.041, height: 203.6, style: {
+  shapeRendering: "geometricPrecision",
+  textRendering: "geometricPrecision",
+  imageRendering: "optimizeQuality",
+  fillRule: "evenodd",
+  clipRule: "evenodd"
+}, viewBox: "0 0 16897.65 6430.11" }, props), { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "logo-plain_svg__id0", x1: 11103.21, x2: 10930.41, y1: 5027.34, y2: 1211.98, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 0, style: {
+        stopOpacity: 1,
+        stopColor: "#0a77d4"
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 1, style: {
+        stopOpacity: 1,
+        stopColor: "#00b1e0"
+      } })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("linearGradient", { xlinkHref: "#logo-plain_svg__id0", id: "logo-plain_svg__id1", x1: 11407.32, x2: 11286.4, y1: 5023.83, y2: 1215.5, gradientUnits: "userSpaceOnUse" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "logo-plain_svg__id2", x1: 6311.87, x2: 3547.5, y1: 4699.25, y2: 1677.39, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 0, style: {
+        stopOpacity: 1,
+        stopColor: "#f65926"
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 1, style: {
+        stopOpacity: 1,
+        stopColor: "#f0ab1f"
+      } })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "logo-plain_svg__id3", x1: 3105.35, x2: 2612.67, y1: 5075.61, y2: 1311.04, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 0, style: {
+        stopOpacity: 1,
+        stopColor: "#e52652"
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 1, style: {
+        stopOpacity: 1,
+        stopColor: "#ff4956"
+      } })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "logo-plain_svg__id4", x1: 14599.77, x2: 12e3, y1: 4808.34, y2: 1573.25, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 0, style: {
+        stopOpacity: 1,
+        stopColor: "#02c0a7"
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 1, style: {
+        stopOpacity: 1,
+        stopColor: "#02e097"
+      } })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: ".logo-plain_svg__fil8{fill:#fefefe}" })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "logo-plain_svg__\\u56FE\\u5C42_x0020_1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { id: "logo-plain_svg___1978240863120", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2921.92 814.37h2943.46c660.05 0 1200.11 540.04 1200.11 1200.11v669.56c-180.23 1562.84-842.69 2686.31-2539.2 2867.65h-656.9c-1403.42-112.59-2125.37-923.3-2147.58-2450.77V2014.48c0-660.07 540.04-1200.11 1200.11-1200.11z", style: {
+      fill: "none",
+      stroke: "#e62129",
+      strokeWidth: 23.87,
+      strokeMiterlimit: 22.9256
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M908.05 649.1c172.38 0 312.1 139.73 312.1 312.1 0 172.38-139.73 312.1-312.1 312.1-172.38 0-312.1-139.73-312.1-312.1 0-172.38 139.73-312.1 312.1-312.1zm15081.56 0c-172.38 0-312.1 139.73-312.1 312.1 0 172.38 139.73 312.1 312.1 312.1 172.38 0 312.1-139.73 312.1-312.1 0-172.38-139.73-312.1-312.1-312.1zM16304.76.03H11565.2c-332.34-.73-635.61 30.83-892.17 114.33-1164.61 314.95-1684.86 539.69-2204.5 542.55-529.24 2.92-1057.71-221.77-2243.89-542.55C5968.08 30.86 5664.81-.7 5332.47.03H592.91C266.8.03.01 266.82.01 592.93v727.65c0 326.11 262.25 574.15 588.16 562.9 244.44-8.44 379.43 161.6 368.56 407.41v1401.3c844.04 3884.05 6459.63 3705.54 6872.25-983.68 37.55-479.97 225.37-745.7 619.85-795.03 394.48 49.33 582.3 315.06 619.85 795.03 221.1 2512.67 1570.99 3564.6 3624.76 3705.62 1575.25-121.99 2822.57-766.6 3247.49-2721.94v-1401.3c-10.86-245.81 124.13-415.84 368.56-407.41 325.91 11.24 588.16-236.8 588.16-562.9V592.93c0-326.11-266.79-592.9-592.9-592.9z", style: {
+      fill: "#332c2b"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4404.53 5551.69h138.96c1696.5-181.34 2358.97-1304.82 2539.2-2867.65v-669.56c0-660.07-540.06-1200.11-1200.11-1200.11H2939.12c-660.07 0-1200.11 540.04-1200.11 1200.11v1086.44c22.21 1527.47 744.16 2338.19 2147.58 2450.77h517.94z", style: {
+      fill: "#f63d55"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2884.03 3833.6c-562.03-552.91 337.59-1229.84 756.52-784.77l-668.1-718.53C2724 1698.38 2875.6 1176.8 3604.09 814.36h-682.18c-660.07 0-1200.11 540.04-1200.11 1200.11v1086.44c22.21 1527.47 744.16 2338.19 2147.58 2450.77h517.94c447.09-261.52 828.85-610.16 1124.32-1073.8-192.91 108.48-371.35 123.1-530.58 12.63-269.77 225.61-533.22 868.1-809.3 676.82L2884.01 3833.59z", style: {
+      fill: "url(#logo-plain_svg__id3)"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12967.79 5585.01c1654.02-184.97 2231.4-1330.91 2306.7-2925.01l-43.57-682.94c-42.95-673.27-608.37-1224.11-1256.49-1224.11H11084.21c-648.13 0-1143.27 550.85-1100.32 1224.11l70.69 1108.16c121.19 1558.01 882.83 2384.94 2268.19 2499.78h645.03z", style: {
+      fill: "url(#logo-plain_svg__id1)"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 3266.42, cy: 4767.17, r: 119.53, style: {
+      fill: "#f3a04e"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11243.45 3832.57c-587.85-563.96 251.45-1254.43 691.78-800.45l-702.77-732.9c-285.07-644.56-170.14-1176.57 521.59-1546.26h-669.84c-648.13 0-1143.27 550.85-1100.32 1224.11l70.69 1108.16c121.19 1558.01 882.83 2384.94 2268.19 2499.78h508.57c422-266.75 774.17-622.36 1034.13-1095.27-182.37 110.65-356.62 125.56-520.16 12.88-250.21 230.12-467.1 885.46-750.63 690.36l-1351.23-1360.42z", style: {
+      fill: "url(#logo-plain_svg__id0)",
+      stroke: "#06b1ab",
+      strokeWidth: 9.1,
+      strokeMiterlimit: 22.9256
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11754.05 752.96c-691.73 369.69-806.66 901.7-521.59 1546.26l702.77 732.9c-440.33-453.98-1279.63 236.49-691.78 800.45 1571.66 1582.35 780.78 887.85 1587.88 1752.45h136.46c1654.02-184.97 2231.4-1330.91 2306.7-2925.01l-43.57-682.94c-42.95-673.27-608.37-1224.11-1256.49-1224.11h-2220.38z", style: {
+      fill: "url(#logo-plain_svg__id4)"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 13725.89, cy: 2247.09, r: 867.65, className: "logo-plain_svg__fil8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 11745.99, cy: 4944.33, r: 119.53, style: {
+      fill: "#52c2f1"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3604.1 814.37c-728.5 362.44-880.09 884.02-631.64 1515.94l668.1 718.53c-418.94-445.08-1318.56 231.85-756.52 784.77l1503.3 1718.08h138.96c1696.5-181.34 2358.97-1304.82 2539.2-2867.65v-669.56c0-660.07-540.06-1200.11-1200.11-1200.11H3604.11z", style: {
+      fill: "url(#logo-plain_svg__id2)"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m3602.42 3012.57-2.01-1.79-1.22-1c-433.3-363.07-1259.33 288.49-715.16 823.82l1503.3 1718.08h138.96c366.16-39.14 684.05-122.25 959.42-244.11l-1883.3-2295z", style: {
+      fill: "#f9483e"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 5652.09, cy: 2247.09, r: 867.65, className: "logo-plain_svg__fil8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 5669.32, cy: 4261.82, r: 86.65, style: {
+      fill: "#f7b873"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 3775.08, cy: 4120.55, r: 174.77, className: "logo-plain_svg__fil8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m11770.33 2919.17 123.64 74.69c7.2 5.99 14.32 12.27 21.35 18.8l1988.29 2318.88c-264.55 126.79-574.49 213.07-935.82 253.47h-136.46c-807.1-864.6-16.22-170.1-1587.88-1752.45-520.29-499.15 77.34-1097.23 526.88-913.39z", style: {
+      fill: "#06b1ab"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 12254.65, cy: 4297.71, r: 174.77, className: "logo-plain_svg__fil8" })
+  ] }) })
+] }));
+var logo_plain_default = SvgLogoPlain;

package/dist/lib/component/assets/logo-plain2.js

@@ -0,0 +1,156 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var logo_plain2_exports = {};
+__export(logo_plain2_exports, {
+  default: () => logo_plain2_default
+});
+module.exports = __toCommonJS(logo_plain2_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
+const SvgLogoPlain2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", __spreadProps(__spreadValues({ xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", xmlSpace: "preserve", width: 535.041, height: 203.6, style: {
+  shapeRendering: "geometricPrecision",
+  textRendering: "geometricPrecision",
+  imageRendering: "optimizeQuality",
+  fillRule: "evenodd",
+  clipRule: "evenodd"
+}, viewBox: "0 0 16897.65 6430.11" }, props), { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "logo-plain2_svg__id0", x1: 11103.21, x2: 10930.41, y1: 5027.34, y2: 1211.98, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 0, style: {
+        stopOpacity: 1,
+        stopColor: "#0a77d4"
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 1, style: {
+        stopOpacity: 1,
+        stopColor: "#00b1e0"
+      } })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("linearGradient", { xlinkHref: "#logo-plain2_svg__id0", id: "logo-plain2_svg__id1", x1: 11407.32, x2: 11286.4, y1: 5023.83, y2: 1215.5, gradientUnits: "userSpaceOnUse" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "logo-plain2_svg__id2", x1: 6311.87, x2: 3547.5, y1: 4699.25, y2: 1677.39, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 0, style: {
+        stopOpacity: 1,
+        stopColor: "#f65926"
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 1, style: {
+        stopOpacity: 1,
+        stopColor: "#f0ab1f"
+      } })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "logo-plain2_svg__id3", x1: 3105.35, x2: 2612.67, y1: 5075.61, y2: 1311.04, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 0, style: {
+        stopOpacity: 1,
+        stopColor: "#e52652"
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 1, style: {
+        stopOpacity: 1,
+        stopColor: "#ff4956"
+      } })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "logo-plain2_svg__id4", x1: 14599.77, x2: 12e3, y1: 4808.34, y2: 1573.25, gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 0, style: {
+        stopOpacity: 1,
+        stopColor: "#02c0a7"
+      } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: 1, style: {
+        stopOpacity: 1,
+        stopColor: "#02e097"
+      } })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: ".logo-plain2_svg__fil8{fill:#fefefe}" })
+  ] }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { id: "logo-plain2_svg__\\u56FE\\u5C42_x0020_1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { id: "logo-plain2_svg___1978240863120", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2921.92 814.37h2943.46c660.05 0 1200.11 540.04 1200.11 1200.11v669.56c-180.23 1562.84-842.69 2686.31-2539.2 2867.65h-656.9c-1403.42-112.59-2125.37-923.3-2147.58-2450.77V2014.48c0-660.07 540.04-1200.11 1200.11-1200.11z", style: {
+      fill: "none",
+      stroke: "#e62129",
+      strokeWidth: 23.87,
+      strokeMiterlimit: 22.9256
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M908.05 649.1c172.38 0 312.1 139.73 312.1 312.1 0 172.38-139.73 312.1-312.1 312.1-172.38 0-312.1-139.73-312.1-312.1 0-172.38 139.73-312.1 312.1-312.1zm15081.56 0c-172.38 0-312.1 139.73-312.1 312.1 0 172.38 139.73 312.1 312.1 312.1 172.38 0 312.1-139.73 312.1-312.1 0-172.38-139.73-312.1-312.1-312.1zM16304.76.03H11565.2c-332.34-.73-635.61 30.83-892.17 114.33-1164.61 314.95-1684.86 539.69-2204.5 542.55-529.24 2.92-1057.71-221.77-2243.89-542.55C5968.08 30.86 5664.81-.7 5332.47.03H592.91C266.8.03.01 266.82.01 592.93v727.65c0 326.11 262.25 574.15 588.16 562.9 244.44-8.44 379.43 161.6 368.56 407.41v1401.3c844.04 3884.05 6459.63 3705.54 6872.25-983.68 37.55-479.97 225.37-745.7 619.85-795.03 394.48 49.33 582.3 315.06 619.85 795.03 221.1 2512.67 1570.99 3564.6 3624.76 3705.62 1575.25-121.99 2822.57-766.6 3247.49-2721.94v-1401.3c-10.86-245.81 124.13-415.84 368.56-407.41 325.91 11.24 588.16-236.8 588.16-562.9V592.93c0-326.11-266.79-592.9-592.9-592.9z", style: {
+      fill: "#332c2b"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4404.53 5551.69h138.96c1696.5-181.34 2358.97-1304.82 2539.2-2867.65v-669.56c0-660.07-540.06-1200.11-1200.11-1200.11H2939.12c-660.07 0-1200.11 540.04-1200.11 1200.11v1086.44c22.21 1527.47 744.16 2338.19 2147.58 2450.77h517.94z", style: {
+      fill: "#f63d55"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2884.03 3833.6c-562.03-552.91 337.59-1229.84 756.52-784.77l-668.1-718.53C2724 1698.38 2875.6 1176.8 3604.09 814.36h-682.18c-660.07 0-1200.11 540.04-1200.11 1200.11v1086.44c22.21 1527.47 744.16 2338.19 2147.58 2450.77h517.94c447.09-261.52 828.85-610.16 1124.32-1073.8-192.91 108.48-371.35 123.1-530.58 12.63-269.77 225.61-533.22 868.1-809.3 676.82L2884.01 3833.59z", style: {
+      fill: "url(#logo-plain2_svg__id3)"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12967.79 5585.01c1654.02-184.97 2231.4-1330.91 2306.7-2925.01l-43.57-682.94c-42.95-673.27-608.37-1224.11-1256.49-1224.11H11084.21c-648.13 0-1143.27 550.85-1100.32 1224.11l70.69 1108.16c121.19 1558.01 882.83 2384.94 2268.19 2499.78h645.03z", style: {
+      fill: "url(#logo-plain2_svg__id1)"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 3266.42, cy: 4767.17, r: 119.53, style: {
+      fill: "#f3a04e"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11243.45 3832.57c-587.85-563.96 251.45-1254.43 691.78-800.45l-702.77-732.9c-285.07-644.56-170.14-1176.57 521.59-1546.26h-669.84c-648.13 0-1143.27 550.85-1100.32 1224.11l70.69 1108.16c121.19 1558.01 882.83 2384.94 2268.19 2499.78h508.57c422-266.75 774.17-622.36 1034.13-1095.27-182.37 110.65-356.62 125.56-520.16 12.88-250.21 230.12-467.1 885.46-750.63 690.36l-1351.23-1360.42z", style: {
+      fill: "url(#logo-plain2_svg__id0)",
+      stroke: "#06b1ab",
+      strokeWidth: 9.1,
+      strokeMiterlimit: 22.9256
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11754.05 752.96c-691.73 369.69-806.66 901.7-521.59 1546.26l702.77 732.9c-440.33-453.98-1279.63 236.49-691.78 800.45 1571.66 1582.35 780.78 887.85 1587.88 1752.45h136.46c1654.02-184.97 2231.4-1330.91 2306.7-2925.01l-43.57-682.94c-42.95-673.27-608.37-1224.11-1256.49-1224.11h-2220.38z", style: {
+      fill: "url(#logo-plain2_svg__id4)"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 13725.89, cy: 2247.09, r: 867.65, className: "logo-plain2_svg__fil8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 11745.99, cy: 4944.33, r: 119.53, style: {
+      fill: "#52c2f1"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3604.1 814.37c-728.5 362.44-880.09 884.02-631.64 1515.94l668.1 718.53c-418.94-445.08-1318.56 231.85-756.52 784.77l1503.3 1718.08h138.96c1696.5-181.34 2358.97-1304.82 2539.2-2867.65v-669.56c0-660.07-540.06-1200.11-1200.11-1200.11H3604.11z", style: {
+      fill: "url(#logo-plain2_svg__id2)"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m3602.42 3012.57-2.01-1.79-1.22-1c-433.3-363.07-1259.33 288.49-715.16 823.82l1503.3 1718.08h138.96c366.16-39.14 684.05-122.25 959.42-244.11l-1883.3-2295z", style: {
+      fill: "#f9483e"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 5652.09, cy: 2247.09, r: 867.65, className: "logo-plain2_svg__fil8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 5669.32, cy: 4261.82, r: 86.65, style: {
+      fill: "#f7b873"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 3775.08, cy: 4120.55, r: 174.77, className: "logo-plain2_svg__fil8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m11770.33 2919.17 123.64 74.69c7.2 5.99 14.32 12.27 21.35 18.8l1988.29 2318.88c-264.55 126.79-574.49 213.07-935.82 253.47h-136.46c-807.1-864.6-16.22-170.1-1587.88-1752.45-520.29-499.15 77.34-1097.23 526.88-913.39z", style: {
+      fill: "#06b1ab"
+    } }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: 12254.65, cy: 4297.71, r: 174.77, className: "logo-plain2_svg__fil8" })
+  ] }) })
+] }));
+var logo_plain2_default = SvgLogoPlain2;

package/dist/lib/component/blackboard.js

@@ -105,7 +105,11 @@ const BlackBoard = () => {
     );
     return () => {
       console.log("will destroy");
-      app == null ? void 0 : app.destroy(true, { children: true, texture: true });
+      try {
+        app.destroy(true, { children: true, texture: true });
+      } catch (e) {
+        console.warn("destroy failed", e);
+      }
     };
   }, [app, screenWidth, screenHeight]);
   (0, import_react.useEffect)(() => {

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

@@ -46,15 +46,15 @@ const ScreenshotItem = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: props.img }) })
   ] });
 };
+const VIEW_TYPE_BLACKBOARD = "blackboard";
 const VIEW_TYPE_SCREENSHOT = "screenshot";
 const VIEW_TYPE_JSON = "json";
-const VIEW_TYPE_BLACKBOARD = "blackboard";
 const DetailPanel = () => {
   var _a;
   const dumpId = (0, import_store.useInsightDump)((store) => store._loadId);
   const blackboardViewAvailable = Boolean(dumpId);
   const activeTask = (0, import_store.useExecutionDump)((store) => store.activeTask);
-  const [preferredViewType, setViewType] = (0, import_react.useState)(dumpId ? VIEW_TYPE_BLACKBOARD : VIEW_TYPE_SCREENSHOT);
+  const [preferredViewType, setViewType] = (0, import_react.useState)(VIEW_TYPE_BLACKBOARD);
   const viewType = preferredViewType === VIEW_TYPE_BLACKBOARD && !dumpId ? VIEW_TYPE_SCREENSHOT : preferredViewType;
   let content;
   if (!activeTask) {

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

@@ -18,9 +18,10 @@
   line-height: 1.5;
 }
 .detail-side .meta-kv .meta .meta-key {
+  font-weight: bold;
   width: 100px;
   text-align: right;
-  padding-right: 10px;
+  padding-right: 16px;
 }
 .detail-side .meta-kv .meta .meta-value {
   flex: 1 1;
@@ -91,7 +92,7 @@
   color: #fff;
   background: #01204E;
 }
-.detail-side .context pre {
+.detail-side pre {
   text-wrap: balance;
 }
 .detail-side .item-list-space-up {

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

@@ -166,19 +166,19 @@ const DetailSide = () => {
   const metaKVElement = MetaKV({
     data: [
       {
-        key: "Status",
+        key: "status",
         content: (task == null ? void 0 : task.status) || ""
       },
       {
-        key: "Start",
+        key: "start",
         content: (0, import_utils.timeStr)((_a = task == null ? void 0 : task.timing) == null ? void 0 : _a.start)
       },
       {
-        key: "End",
+        key: "end",
         content: (0, import_utils.timeStr)((_b = task == null ? void 0 : task.timing) == null ? void 0 : _b.end)
       },
       {
-        key: "Time Cost",
+        key: "time cost",
         content: (0, import_misc.timeCostStrElement)((_c = task == null ? void 0 : task.timing) == null ? void 0 : _c.cost)
       }
     ]
@@ -278,7 +278,16 @@ const DetailSide = () => {
       content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { className: "description-content", style: { color: "#F00" }, children: dump.error })
     }
   ) : null;
-  const dataCard = (dump == null ? void 0 : dump.data) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { liteMode: true, onMouseEnter: noop, onMouseLeave: noop, content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: kv(dump.data) }) }) : null;
+  const dataCard = (dump == null ? void 0 : dump.data) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Card,
+    {
+      liteMode: true,
+      onMouseEnter: noop,
+      onMouseLeave: noop,
+      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 timelineData = [];
   if (plans) {

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

@@ -8,7 +8,7 @@
   text-align: center;
   border: 1px solid #CCCCCC;
   box-sizing: border-box;
-  background: #ECECEC;
+  background: #f7f7f7;
   box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
 }
 .global-hover-preview img {

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

@@ -30,11 +30,16 @@ const GlobalHoverPreview = () => {
   var _a;
   const wrapperRef = (0, import_react.useRef)(null);
   const hoverTask = (0, import_store.useExecutionDump)((store) => store.hoverTask);
+  const hoverTimestamp = (0, import_store.useExecutionDump)((store) => store.hoverTimestamp);
   const hoverPreviewConfig = (0, import_store.useExecutionDump)((store) => store.hoverPreviewConfig);
   const [imageW, setImageW] = (0, import_react.useState)(size);
   const [imageH, setImageH] = (0, import_react.useState)(size);
   const images = (_a = hoverTask == null ? void 0 : hoverTask.recorder) == null ? void 0 : _a.filter((item) => {
-    return item.screenshot;
+    let valid = Boolean(item.screenshot);
+    if (hoverTimestamp) {
+      valid = valid && item.ts >= hoverTimestamp;
+    }
+    return valid;
   }).map((item) => item.screenshot);
   const { x, y } = hoverPreviewConfig || {};
   let left = 0;

package/dist/lib/component/sidebar.css

@@ -6,11 +6,12 @@
   height: 100%;
   border-right: 1px solid #CCCCCC;
   overflow: auto;
-  background: #ECECEC;
+  background: #f7f7f7;
 }
 .side-bar .brand {
   padding: 10px 5px;
   cursor: pointer;
+  display: flex;
 }
 .side-bar .task-meta-section {
   margin-top: 6px;

package/dist/lib/component/sidebar.js

@@ -38,11 +38,11 @@ var import_icons = require("@ant-design/icons");
 var import_antd = require("antd");
 var import_panel_title = __toESM(require("./panel-title"));
 var import_misc = require("./misc");
-var import_logo_plain2_16842bbc = __toESM(require("../assets/logo-plain2.16842bbc.svg"));
+var import_logo_plain2 = __toESM(require("./assets/logo-plain2.js"));
 var import_store = require("./store");
 var import_utils = require("../utils");
 const SideItem = (props) => {
-  var _a, _b;
+  var _a, _b, _c;
   const { task, onClick, selected } = props;
   const selectedClass = selected ? "selected" : "";
   let statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MinusOutlined, {});
@@ -61,10 +61,15 @@ const SideItem = (props) => {
   if ((_a = task.timing) == null ? void 0 : _a.cost) {
     statusText = (0, import_misc.timeCostStrElement)(task.timing.cost);
   }
-  const contentRow = task.type === "Planning" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "side-item-content", children: [
-    (_b = task.param) == null ? void 0 : _b.userPrompt,
-    " "
-  ] }) : null;
+  let contentRow;
+  if (task.type === "Planning") {
+    contentRow = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-item-content", children: (_b = task.param) == null ? void 0 : _b.userPrompt });
+  } else if (task.type === "Insight" && task.subType === "Query") {
+    const demand = (_c = task.param) == null ? void 0 : _c.dataDemand;
+    const contentToShow = typeof demand === "string" ? demand : JSON.stringify(demand);
+    contentRow = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-item-content", children: contentToShow });
+  } else {
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -93,7 +98,7 @@ const SideItem = (props) => {
     }
   );
 };
-const Sidebar = () => {
+const Sidebar = (props) => {
   const groupedDumps = (0, import_store.useExecutionDump)((store) => store.dump);
   const setActiveTask = (0, import_store.useExecutionDump)((store) => store.setActiveTask);
   const activeTask = (0, import_store.useExecutionDump)((store) => store.activeTask);
@@ -177,14 +182,16 @@ const Sidebar = () => {
   }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "no tasks" });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "side-bar", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "top-controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "brand", onClick: reset, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "img",
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "brand", onClick: reset, style: { display: (props == null ? void 0 : props.hideLogo) ? "none" : "flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_logo_plain2.default,
         {
-          src: import_logo_plain2_16842bbc.default,
-          alt: "Logo",
           style: { width: 70, height: 70, margin: "auto" },
           onClick: () => {
-            location.reload();
+            if (props.logoAction) {
+              props.logoAction();
+            } else {
+              location.reload();
+            }
           }
         }
       ) }),