@industry-theme/principal-view-panels 0.1.49 → 0.1.50

package/dist/panels/ExecutionViewerPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExecutionViewerPanel.d.ts","sourceRoot":"","sources":["../../src/panels/ExecutionViewerPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AA8B/E;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgmB9D,CAAC"}
+{"version":3,"file":"ExecutionViewerPanel.d.ts","sourceRoot":"","sources":["../../src/panels/ExecutionViewerPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAkI/E;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6qB9D,CAAC"}

package/dist/panels.bundle.js

@@ -56032,6 +56032,93 @@ function buildEventToNodeMap(canvas) {
   }
   return map2;
 }
+const TestEventPanelWrapper = ({ spans, currentSpanIndex, currentEventIndex, onSpanIndexChange }) => {
+  const isSingleSpan = spans.length === 1;
+  const wrapperId = "event-panel-" + (isSingleSpan ? "single" : "multi");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+          /* Reorder elements in TestEventPanel */
+          #${wrapperId} > div > div:first-child {
+            display: flex;
+            flex-direction: column;
+          }
+
+          /* Test name/description - move to top (order 1) */
+          #${wrapperId} > div > div:first-child > div:first-child {
+            order: 1;
+          }
+
+          /* Filter buttons (All, Events, Logs) - move below test name (order 2) */
+          #${wrapperId} > div > div:first-child > div:nth-child(2) {
+            order: 2;
+          }
+
+          /* Timeline/content - keep at bottom (order 3) */
+          #${wrapperId} > div > div:first-child > div:nth-child(3) {
+            order: 3;
+          }
+
+          ${isSingleSpan ? `
+            /* Hide navigation for single span */
+            #${wrapperId} button:disabled {
+              display: none;
+            }
+            #${wrapperId} div:has(> button:disabled) {
+              display: none;
+            }
+
+            /* Hide "Execution Timeline" title */
+            #${wrapperId} h3,
+            #${wrapperId} h2,
+            #${wrapperId} div[style*="fontSize: 16px"] {
+              display: none !important;
+            }
+
+            /* Hide filter buttons (All, Events, Logs) */
+            #${wrapperId} div:has(> button):not(:has(svg[class*="HelpCircle"])) button {
+              display: none !important;
+            }
+
+            /* Hide event/log counts (e.g., "1 events, 0 logs") */
+            #${wrapperId} div[style*="fontSize: 12px"][style*="marginLeft: auto"] {
+              display: none !important;
+            }
+
+            /* Keep only the status badge and help button visible in header */
+            #${wrapperId} > div > div:first-child > div:first-child {
+              display: flex !important;
+              align-items: center;
+              justify-content: space-between;
+              padding: 12px 16px;
+            }
+
+            /* Hide all children except status badge and help button */
+            #${wrapperId} > div > div:first-child > div:first-child > * {
+              display: none !important;
+            }
+
+            /* Show status badge */
+            #${wrapperId} > div > div:first-child > div:first-child > div:has([style*="background"]) {
+              display: flex !important;
+            }
+
+            /* Show help button */
+            #${wrapperId} > div > div:first-child > div:first-child > button {
+              display: flex !important;
+            }
+          ` : ""}
+        ` }),
+    /* @__PURE__ */ jsx("div", { id: wrapperId, style: { height: "100%" }, children: /* @__PURE__ */ jsx(
+      distExports.TestEventPanel,
+      {
+        spans,
+        currentSpanIndex,
+        currentEventIndex,
+        onSpanIndexChange
+      }
+    ) })
+  ] });
+};
 const ExecutionViewerPanel = ({
   context,
   actions,
@@ -56063,6 +56150,12 @@ const ExecutionViewerPanel = ({
   selectedExecutionIdRef.current = state.selectedExecutionId;
   const playbackTimerRef = useRef(null);
   const eventNodeMapRef = useRef(/* @__PURE__ */ new Map());
+  const findCanvasFiles = useCallback((files) => {
+    return files.filter((file) => {
+      const path = file.relativePath || file.path || "";
+      return path.endsWith(".otel.canvas") || path.endsWith(".canvas");
+    }).map((file) => file.relativePath || file.path || "");
+  }, []);
   const loadExecution = useCallback(async (executionId) => {
     setState((prev) => ({ ...prev, loading: prev.canvas === null, error: null }));
     try {
@@ -56091,9 +56184,26 @@ const ExecutionViewerPanel = ({
       }
       const availableExecutions = ExecutionLoader.findExecutionFiles(fileTreeData.allFiles);
       if (availableExecutions.length === 0) {
+        const readFile2 = acts.readFile;
+        const repositoryPath2 = ctx.repositoryPath;
+        let canvas2 = null;
+        if (readFile2 && repositoryPath2) {
+          const canvasFiles = findCanvasFiles(fileTreeData.allFiles);
+          if (canvasFiles.length > 0) {
+            try {
+              const fullCanvasPath = `${repositoryPath2}/${canvasFiles[0]}`;
+              const canvasContent = await readFile2(fullCanvasPath);
+              if (canvasContent && typeof canvasContent === "string") {
+                canvas2 = JSON.parse(canvasContent);
+              }
+            } catch (error) {
+              console.warn("[ExecutionViewer] Failed to load canvas:", error);
+            }
+          }
+        }
         setState((prev) => ({
           ...prev,
-          canvas: null,
+          canvas: canvas2,
           execution: null,
           metadata: null,
           loading: false,
@@ -56173,7 +56283,7 @@ const ExecutionViewerPanel = ({
         error: error.message
       }));
     }
-  }, []);
+  }, [findCanvasFiles]);
   useEffect(() => {
     loadExecution();
   }, [loadExecution]);
@@ -56268,7 +56378,7 @@ const ExecutionViewerPanel = ({
       }
     };
   }, [state.isPlaying, state.execution]);
-  if (!state.loading && state.availableExecutions.length === 0) {
+  if (!state.loading && state.availableExecutions.length === 0 && !state.canvas) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -56282,7 +56392,7 @@ const ExecutionViewerPanel = ({
         },
         children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", maxWidth: "600px", padding: "20px" }, children: [
           /* @__PURE__ */ jsx(Activity, { size: 48, style: { margin: "0 auto 20px", opacity: 0.3 } }),
-          /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 10px 0", fontSize: "18px", fontWeight: 600 }, children: "No Execution Artifacts Found" }),
+          /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 10px 0", fontSize: "18px", fontWeight: 600 }, children: "No Execution Artifacts or Canvas Found" }),
           /* @__PURE__ */ jsxs("p", { style: { margin: "0 0 20px 0", color: theme.colors.textSecondary, lineHeight: 1.5 }, children: [
             "Execution artifacts should be saved to ",
             /* @__PURE__ */ jsx("code", { children: "__executions__/*.spans.json" }),
@@ -56381,7 +56491,7 @@ const ExecutionViewerPanel = ({
               gap: "12px"
             },
             children: [
-              /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+              state.availableExecutions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
                 /* @__PURE__ */ jsxs(
                   "button",
                   {
@@ -56493,10 +56603,10 @@ const ExecutionViewerPanel = ({
                 ] })
               ] }),
               /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 600 }, children: ((_a = state.metadata) == null ? void 0 : _a.name) || "Execution Viewer" }),
+                /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 600 }, children: ((_a = state.metadata) == null ? void 0 : _a.name) || (state.canvas ? "Canvas Viewer" : "Execution Viewer") }),
                 selectedExecution && /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "#999", marginTop: "2px" }, children: selectedExecution.path })
               ] }),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+              state.execution && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
                 /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -56543,11 +56653,58 @@ const ExecutionViewerPanel = ({
           }
         ),
         /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsx("div", { style: { flex: "0 0 40%", borderRight: "1px solid #333", overflow: "hidden" }, children: state.execution ? /* @__PURE__ */ jsx(
+            TestEventPanelWrapper,
+            {
+              spans: ExecutionLoader.getSpans(state.execution),
+              currentSpanIndex: state.currentSpanIndex,
+              currentEventIndex: state.currentEventIndex,
+              onSpanIndexChange: handleSpanIndexChange
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "100%",
+                background: "#0a0a0a",
+                padding: "20px"
+              },
+              children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", maxWidth: "400px" }, children: [
+                /* @__PURE__ */ jsx(Activity, { size: 48, style: { margin: "0 auto 20px", opacity: 0.3, color: "#666" } }),
+                /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 10px 0", fontSize: "16px", fontWeight: 600, color: "#fff" }, children: "No Execution Artifacts Found" }),
+                /* @__PURE__ */ jsx("p", { style: { margin: "0 0 16px 0", color: "#999", lineHeight: 1.5, fontSize: "13px" }, children: "The canvas is displayed, but execution data is missing. Run tests to generate execution artifacts." }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      background: "#1e1e1e",
+                      padding: "10px",
+                      borderRadius: "4px",
+                      fontFamily: "monospace",
+                      fontSize: "11px",
+                      textAlign: "left",
+                      color: "#d4d4d4",
+                      marginBottom: "12px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("div", { children: "# Save execution artifacts to:" }),
+                      /* @__PURE__ */ jsx("div", { style: { marginTop: "4px" }, children: "__executions__/*.spans.json" }),
+                      /* @__PURE__ */ jsx("div", { children: "packages/*/__executions__/*.spans.json" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("p", { style: { margin: 0, color: "#666", fontSize: "11px", fontStyle: "italic" }, children: "Tip: Use exportExecutionArtifact() in your tests" })
+              ] })
+            }
+          ) }),
           state.canvas ? /* @__PURE__ */ jsx("div", { style: { flex: "0 0 60%", position: "relative" }, children: /* @__PURE__ */ jsx(
             distExports.GraphRenderer,
             {
               canvas: state.canvas,
-              showMinimap: true,
+              showMinimap: false,
               showControls: true,
               showBackground: true,
               backgroundVariant: "lines",
@@ -56574,16 +56731,7 @@ const ExecutionViewerPanel = ({
                 ] })
               ] })
             }
-          ),
-          /* @__PURE__ */ jsx("div", { style: { flex: "0 0 40%", borderLeft: "1px solid #333", overflow: "hidden" }, children: /* @__PURE__ */ jsx(
-            distExports.TestEventPanel,
-            {
-              spans: state.execution ? ExecutionLoader.getSpans(state.execution) : [],
-              currentSpanIndex: state.currentSpanIndex,
-              currentEventIndex: state.currentEventIndex,
-              onSpanIndexChange: handleSpanIndexChange
-            }
-          ) })
+          )
         ] }),
         state.metadata && /* @__PURE__ */ jsx(ExecutionStats, { metadata: state.metadata })
       ]