@midscene/visualizer 0.0.1

package/dist/lib/component/panel-title.css

@@ -0,0 +1,8 @@
+.task-list-name {
+  padding: 2px 10px;
+  font-weight: bold;
+  background: #DDDDDD;
+  border-top: 1px solid #CCCCCC;
+  border-bottom: 1px solid #CCCCCC;
+  margin-top: -1px;
+}

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

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var panel_title_exports = {};
+__export(panel_title_exports, {
+  default: () => panel_title_default
+});
+module.exports = __toCommonJS(panel_title_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_panel_title = require("./panel-title.css");
+const PanelTitle = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-list-name", children: props.title }) });
+};
+var panel_title_default = PanelTitle;

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

@@ -0,0 +1 @@
+"use strict";

package/dist/lib/component/sidebar.css

@@ -0,0 +1,87 @@
+.side-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid #CCCCCC;
+  overflow: auto;
+  background: #ECECEC;
+}
+.side-bar .brand {
+  padding: 10px 5px;
+  cursor: pointer;
+}
+.side-bar .task-meta-section {
+  margin-top: 6px;
+}
+.side-bar .task-meta {
+  color: #777;
+  font-weight: normal;
+  padding-left: 10px;
+}
+.side-bar .side-seperator {
+  border-top: 1px solid none;
+}
+.side-bar .side-seperator.side-seperator-line {
+  border-top: 1px solid #CCCCCC;
+}
+.side-bar .side-seperator.side-seperator-space-up {
+  margin-top: 10px;
+}
+.side-bar .side-seperator.side-seperator-space-down {
+  margin-bottom: 10px;
+}
+.side-bar .side-sub-title {
+  padding: 0 10px;
+  font-weight: bold;
+}
+.side-bar .side-item {
+  cursor: pointer;
+  transition: 0.1s;
+  padding: 2px 0;
+}
+.side-bar .side-item:hover {
+  background: #A3D6D2;
+  color: #333;
+}
+.side-bar .side-item.selected {
+  background: #06B1AB;
+  color: #ffffff;
+}
+.side-bar .side-item.selected .status-text {
+  color: #ffffff;
+}
+.side-bar .side-item .side-item-content {
+  padding: 0 10px 0 calc(10px + 16px);
+}
+.side-bar .side-item-name {
+  padding: 0 10px 0 calc(10px + 16px);
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+}
+.side-bar .side-item-name .status-icon {
+  position: absolute;
+  left: 10px;
+  display: inline-block;
+  color: #AAA;
+  font-size: 10px;
+  line-height: 10px;
+  top: 50%;
+  margin-top: -5px;
+}
+.side-bar .side-item-name .status-icon-success {
+  color: #3a773a;
+}
+.side-bar .side-item-name .status-icon-fail {
+  color: #ff0a0a;
+}
+.side-bar .side-item-name .status-text {
+  color: #777;
+}
+.side-bar .bottom-controls {
+  padding: 10px 10px;
+  text-align: left;
+  text-align: center;
+}

package/dist/lib/component/sidebar.js

@@ -0,0 +1,198 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 sidebar_exports = {};
+__export(sidebar_exports, {
+  default: () => sidebar_default
+});
+module.exports = __toCommonJS(sidebar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_sidebar = require("./sidebar.css");
+var import_react = require("react");
+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_store = require("./store");
+var import_utils = require("../utils");
+const SideItem = (props) => {
+  var _a, _b;
+  const { task, onClick, selected } = props;
+  const selectedClass = selected ? "selected" : "";
+  let statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.MinusOutlined, {});
+  if (task.status === "success") {
+    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CheckOutlined, {});
+  } else if (task.status === "fail") {
+    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {});
+  } else if (task.status === "pending") {
+    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ClockCircleOutlined, {});
+  } else if (task.status === "cancelled") {
+    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.LogoutOutlined, {});
+  } else if (task.status === "running") {
+    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.ArrowRightOutlined, {});
+  }
+  let statusText = task.status;
+  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;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `side-item ${selectedClass}`,
+      onClick,
+      onMouseEnter: (event) => {
+        var _a2;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const x = rect.left + rect.width;
+        const y = rect.top;
+        (_a2 = props.onItemHover) == null ? void 0 : _a2.call(props, task, x, y);
+      },
+      onMouseLeave: () => {
+        var _a2;
+        (_a2 = props.onItemHover) == null ? void 0 : _a2.call(props, null);
+      },
+      children: [
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `side-item-name`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `status-icon status-icon-${task.status}`, children: statusIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "title", children: (0, import_utils.typeStr)(task) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "status-text", children: statusText })
+        ] }),
+        contentRow
+      ]
+    }
+  );
+};
+const Sidebar = () => {
+  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);
+  const setHoverTask = (0, import_store.useExecutionDump)((store) => store.setHoverTask);
+  const setHoverPreviewConfig = (0, import_store.useExecutionDump)((store) => store.setHoverPreviewConfig);
+  const reset = (0, import_store.useExecutionDump)((store) => store.reset);
+  const allTasks = (0, import_store.useAllCurrentTasks)();
+  const currentSelectedIndex = allTasks == null ? void 0 : allTasks.findIndex((task) => task === activeTask);
+  (0, import_react.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (!(allTasks == null ? void 0 : allTasks.length) || (allTasks == null ? void 0 : allTasks.length) <= 1) {
+        return;
+      }
+      if (e.key === "ArrowUp" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        const nextIndex = currentSelectedIndex - 1;
+        if (nextIndex < 0) {
+          return;
+        }
+        const nextTask = allTasks[nextIndex];
+        setActiveTask(nextTask);
+      } else if (e.key === "ArrowDown" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        const nextIndex = currentSelectedIndex + 1;
+        if (nextIndex >= allTasks.length) {
+          return;
+        }
+        const nextTask = allTasks[nextIndex];
+        setActiveTask(nextTask);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [currentSelectedIndex, allTasks, setActiveTask]);
+  const sideList = (groupedDumps == null ? void 0 : groupedDumps.length) ? groupedDumps.map((group, groupIndex) => {
+    const executions = group.executions.map((execution, indexOfExecution) => {
+      const { tasks } = execution;
+      const taskList = tasks.map((task, index) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          SideItem,
+          {
+            task,
+            selected: task === activeTask,
+            onClick: () => {
+              setActiveTask(task);
+            },
+            onItemHover: (hoverTask, x, y) => {
+              if (hoverTask && x && y) {
+                setHoverPreviewConfig({ x, y });
+                setHoverTask(hoverTask);
+              } else {
+                setHoverPreviewConfig(null);
+                setHoverTask(null);
+              }
+            }
+          },
+          index
+        );
+      });
+      let seperator;
+      switch (indexOfExecution) {
+        case 0:
+          seperator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-seperator side-seperator-space-up" });
+          break;
+        default:
+          seperator = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-seperator side-seperator-line side-seperator-space-up side-seperator-space-down" });
+          break;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        seperator,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-sub-title", children: execution.name }),
+        taskList
+      ] }, indexOfExecution);
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_panel_title.default, { title: group.groupName }),
+      executions
+    ] }, groupIndex);
+  }) : /* @__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",
+        {
+          src: import_logo_plain2_16842bbc.default,
+          alt: "Logo",
+          style: { width: 70, height: 70, margin: "auto" },
+          onClick: () => {
+            location.reload();
+          }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-list", children: sideList }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "side-seperator side-seperator-line side-seperator-space-up" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-meta-section", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "task-meta", children: "use Command + ⬆︎ / ⬇︎ to switch" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "bottom-controls", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Button, { onClick: reset, type: "text", className: "unload_btn", children: "Unload" }) })
+  ] });
+};
+var sidebar_default = Sidebar;

package/dist/lib/component/store.js

@@ -0,0 +1,153 @@
+"use strict";
+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 __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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var store_exports = {};
+__export(store_exports, {
+  useAllCurrentTasks: () => useAllCurrentTasks,
+  useBlackboardPreference: () => useBlackboardPreference,
+  useExecutionDump: () => useExecutionDump,
+  useInsightDump: () => useInsightDump
+});
+module.exports = __toCommonJS(store_exports);
+var import_zustand = require("zustand");
+const useBlackboardPreference = (0, import_zustand.create)((set) => ({
+  bgVisible: false,
+  textsVisible: true,
+  setBgVisible: (visible) => {
+    set({ bgVisible: visible });
+  },
+  setTextsVisible: (visible) => {
+    set({ textsVisible: visible });
+  }
+}));
+const useExecutionDump = (0, import_zustand.create)((set) => {
+  const initData = {
+    dump: null,
+    activeTask: null,
+    hoverTask: null,
+    hoverPreviewConfig: null
+  };
+  const syncToInsightDump = (dump) => {
+    const { loadData } = useInsightDump.getState();
+    loadData(dump);
+  };
+  const resetInsightDump = () => {
+    const { reset } = useInsightDump.getState();
+    reset();
+  };
+  return __spreadProps(__spreadValues({}, initData), {
+    setGroupedDump: (dump) => {
+      console.log("will set ExecutionDump", dump);
+      set({
+        dump
+      });
+      for (const item of dump) {
+        if (item.executions.length > 0 && item.executions[0].tasks.length > 0) {
+          set({ activeTask: item.executions[0].tasks[0] });
+          break;
+        }
+      }
+    },
+    setActiveTask(task) {
+      var _a, _b;
+      set({ activeTask: task });
+      if ((_b = (_a = task.log) == null ? void 0 : _a.dump) == null ? void 0 : _b.matchedElement) {
+        syncToInsightDump(task.log.dump);
+      } else {
+        resetInsightDump();
+      }
+    },
+    setHoverTask(task) {
+      set({ hoverTask: task });
+    },
+    setHoverPreviewConfig(config) {
+      if (config) {
+        set({
+          hoverPreviewConfig: {
+            x: Math.floor(config.x),
+            y: Math.floor(config.y)
+          }
+        });
+      } else {
+        set({ hoverPreviewConfig: null });
+      }
+    },
+    reset: () => {
+      set(initData);
+      resetInsightDump();
+    }
+  });
+});
+const useAllCurrentTasks = () => {
+  const groupedDumps = useExecutionDump((store) => store.dump);
+  const allTasks = (groupedDumps == null ? void 0 : groupedDumps.reduce((acc, group) => {
+    const tasksInside = group.executions.reduce(
+      (acc2, execution) => acc2.concat(execution.tasks),
+      []
+    );
+    return acc.concat(tasksInside);
+  }, [])) || [];
+  return allTasks;
+};
+const useInsightDump = (0, import_zustand.create)((set) => {
+  let loadId = 0;
+  const initData = { _loadId: 0, highlightSectionNames: [], highlightElements: [], data: null };
+  return __spreadProps(__spreadValues({}, initData), {
+    loadData: (data) => {
+      set({
+        _loadId: ++loadId,
+        data,
+        highlightSectionNames: [],
+        highlightElements: []
+      });
+    },
+    setHighlightSectionNames: (sections) => {
+      set({ highlightSectionNames: sections });
+    },
+    setHighlightElements: (elements) => {
+      set({ highlightElements: elements });
+    },
+    reset: () => {
+      set(initData);
+    }
+  });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useAllCurrentTasks,
+  useBlackboardPreference,
+  useExecutionDump,
+  useInsightDump
+});

package/dist/lib/component/timeline.css

@@ -0,0 +1,18 @@
+.timeline-wrapper {
+  flex-basis: 110px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  border-bottom: 1px solid #CCCCCC;
+  position: relative;
+  box-sizing: border-box;
+}
+.timeline-wrapper .timeline-canvas-wrapper {
+  width: 100%;
+  height: 100%;
+}
+.timeline-wrapper canvas {
+  width: 100%;
+  height: 100%;
+}