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

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;AAoI/E;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAooB9D,CAAC"}

package/dist/panels/execution-viewer/ExecutionLoader.d.ts

@@ -10,6 +10,18 @@ export interface ExecutionFile {
     /** Package name for monorepos (e.g., 'core' from 'packages/core/__executions__/') */
     packageName?: string;
 }
+export interface CanvasFile {
+    /** Unique identifier for this canvas (derived from filename) */
+    id: string;
+    /** Display name for this canvas */
+    name: string;
+    /** Full file path */
+    path: string;
+    /** Whether this is from a config folder or standalone */
+    source: 'folder' | 'standalone';
+    /** Canvas basename (without .otel.canvas or .canvas extension) */
+    basename: string;
+}
 export interface ExecutionMetadata {
     /** Execution name */
     name: string;
@@ -76,6 +88,14 @@ export declare class ExecutionLoader {
         relativePath?: string;
         name?: string;
     }>): ExecutionFile[];
+    /**
+     * Find all .otel.canvas and .canvas files in the file tree
+     */
+    static findCanvasFiles(files: Array<{
+        path?: string;
+        relativePath?: string;
+        name?: string;
+    }>): CanvasFile[];
     /**
      * Find execution artifact for a given canvas file path
      */

package/dist/panels/execution-viewer/ExecutionLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExecutionLoader.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/ExecutionLoader.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ExecutionLoader.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/ExecutionLoader.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC5B,mEAAmE;IACnE,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,2EAA2E;IAC3E,cAAc,EAAE,MAAM,CAAC;IACvB,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,gEAAgE;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,MAAM,EAAE,QAAQ,GAAG,YAAY,CAAC;IAChC,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,qBAAqB;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,IAAI,CAAC;IACpC,sBAAsB;IACtB,SAAS,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACjC,MAAM,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;KAClC,CAAC,CAAC;CACJ;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE;QACT,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;KAC9B,CAAC;IACF,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB;AAiCD;;GAEG;AACH,qBAAa,eAAe;IAC1B;;OAEG;IACH,MAAM,CAAC,sBAAsB,CAAC,OAAO,EAAE,MAAM,GAAG,iBAAiB;IASjE;;OAEG;IACH,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,GAAG,aAAa,EAAE;IAI7D;;OAEG;IACH,MAAM,CAAC,oBAAoB,CAAC,QAAQ,EAAE,iBAAiB,GAAG,iBAAiB;IAoC3E;;OAEG;IACH,MAAM,CAAC,kBAAkB,CACvB,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GACpE,aAAa,EAAE;IAyDlB;;OAEG;IACH,MAAM,CAAC,eAAe,CACpB,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GACpE,UAAU,EAAE;IAkCf;;OAEG;IACH,MAAM,CAAC,sBAAsB,CAC3B,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GACpE,aAAa,GAAG,IAAI;IAYvB;;OAEG;IACH,MAAM,CAAC,sBAAsB,CAC3B,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GACpE,MAAM,GAAG,IAAI;CAgBjB"}

package/dist/panels.bundle.js

@@ -55853,12 +55853,35 @@ class ExecutionLoader {
       return a.name.localeCompare(b.name);
     });
   }
+  /**
+   * Find all .otel.canvas and .canvas files in the file tree
+   */
+  static findCanvasFiles(files) {
+    const canvasFiles = [];
+    const VGC_FOLDER = ".principal-views";
+    for (const file of files) {
+      const filePath = file.relativePath || file.path || "";
+      const fileName = file.name || filePath.split("/").pop() || "";
+      if (filePath.startsWith(`${VGC_FOLDER}/`) && (fileName.endsWith(".otel.canvas") || fileName.endsWith(".canvas"))) {
+        const basename = fileName.replace(/\.otel\.canvas$/, "").replace(/\.canvas$/, "");
+        const displayName = basename.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+        canvasFiles.push({
+          id: basename,
+          name: displayName,
+          path: filePath,
+          source: "folder",
+          basename
+        });
+      }
+    }
+    return canvasFiles.sort((a, b) => a.name.localeCompare(b.name));
+  }
   /**
    * Find execution artifact for a given canvas file path
    */
   static findExecutionForCanvas(canvasPath, files) {
     const canvasFilename = canvasPath.split("/").pop() || "";
-    const canvasBasename = canvasFilename.replace(/\.otel\.canvas$/, "");
+    const canvasBasename = canvasFilename.replace(/\.otel\.canvas$/, "").replace(/\.canvas$/, "");
     const executions = ExecutionLoader.findExecutionFiles(files);
     return executions.find((exec) => exec.canvasBasename === canvasBasename) || null;
   }
@@ -56032,6 +56055,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,
@@ -56045,9 +56155,10 @@ const ExecutionViewerPanel = ({
     metadata: null,
     loading: true,
     error: null,
-    availableExecutions: [],
-    selectedExecutionId: null,
-    showExecutionSelector: false,
+    availableCanvases: [],
+    selectedCanvasId: null,
+    linkedExecution: null,
+    showCanvasSelector: false,
     isPlaying: false,
     currentSpanIndex: 0,
     currentEventIndex: 0,
@@ -56059,11 +56170,11 @@ const ExecutionViewerPanel = ({
   contextRef.current = context;
   actionsRef.current = actions;
   eventsRef.current = events;
-  const selectedExecutionIdRef = useRef(null);
-  selectedExecutionIdRef.current = state.selectedExecutionId;
+  const selectedCanvasIdRef = useRef(null);
+  selectedCanvasIdRef.current = state.selectedCanvasId;
   const playbackTimerRef = useRef(null);
   const eventNodeMapRef = useRef(/* @__PURE__ */ new Map());
-  const loadExecution = useCallback(async (executionId) => {
+  const loadCanvas = useCallback(async (canvasId) => {
     setState((prev) => ({ ...prev, loading: prev.canvas === null, error: null }));
     try {
       const ctx = contextRef.current;
@@ -56084,13 +56195,14 @@ const ExecutionViewerPanel = ({
           metadata: null,
           loading: false,
           error: null,
-          availableExecutions: [],
-          selectedExecutionId: null
+          availableCanvases: [],
+          selectedCanvasId: null,
+          linkedExecution: null
         }));
         return;
       }
-      const availableExecutions = ExecutionLoader.findExecutionFiles(fileTreeData.allFiles);
-      if (availableExecutions.length === 0) {
+      const availableCanvases = ExecutionLoader.findCanvasFiles(fileTreeData.allFiles);
+      if (availableCanvases.length === 0) {
         setState((prev) => ({
           ...prev,
           canvas: null,
@@ -56098,23 +56210,24 @@ const ExecutionViewerPanel = ({
           metadata: null,
           loading: false,
           error: null,
-          availableExecutions: [],
-          selectedExecutionId: null
+          availableCanvases: [],
+          selectedCanvasId: null,
+          linkedExecution: null
         }));
         return;
       }
-      let selectedExecution2;
-      if (executionId) {
-        const found = availableExecutions.find((e) => e.id === executionId);
+      let selectedCanvas2;
+      if (canvasId) {
+        const found = availableCanvases.find((c) => c.id === canvasId);
         if (!found) {
-          throw new Error(`Execution with ID '${executionId}' not found`);
+          throw new Error(`Canvas with ID '${canvasId}' not found`);
         }
-        selectedExecution2 = found;
-      } else if (selectedExecutionIdRef.current) {
-        const found = availableExecutions.find((e) => e.id === selectedExecutionIdRef.current);
-        selectedExecution2 = found || availableExecutions[0];
+        selectedCanvas2 = found;
+      } else if (selectedCanvasIdRef.current) {
+        const found = availableCanvases.find((c) => c.id === selectedCanvasIdRef.current);
+        selectedCanvas2 = found || availableCanvases[0];
       } else {
-        selectedExecution2 = availableExecutions[0];
+        selectedCanvas2 = availableCanvases[0];
       }
       const readFile = acts.readFile;
       if (!readFile) {
@@ -56124,34 +56237,31 @@ const ExecutionViewerPanel = ({
       if (!repositoryPath) {
         throw new Error("Repository path not available");
       }
-      const fullExecutionPath = `${repositoryPath}/${selectedExecution2.path}`;
-      const executionContent = await readFile(fullExecutionPath);
-      if (!executionContent || typeof executionContent !== "string") {
-        throw new Error("Failed to read execution file");
+      const fullCanvasPath = `${repositoryPath}/${selectedCanvas2.path}`;
+      const canvasContent = await readFile(fullCanvasPath);
+      if (!canvasContent || typeof canvasContent !== "string") {
+        throw new Error("Failed to read canvas file");
       }
-      const execution = ExecutionLoader.parseExecutionArtifact(executionContent);
-      const metadata = ExecutionLoader.getExecutionMetadata(execution);
-      const canvasPath = ExecutionLoader.findCanvasForExecution(
-        selectedExecution2.path,
+      const canvas = JSON.parse(canvasContent);
+      const linkedExecution = ExecutionLoader.findExecutionForCanvas(
+        selectedCanvas2.path,
         fileTreeData.allFiles
       );
-      let canvas = null;
-      if (canvasPath) {
+      let execution = null;
+      let metadata = null;
+      if (linkedExecution) {
         try {
-          const fullCanvasPath = `${repositoryPath}/${canvasPath}`;
-          const canvasContent = await readFile(fullCanvasPath);
-          if (canvasContent && typeof canvasContent === "string") {
-            canvas = JSON.parse(canvasContent);
+          const fullExecutionPath = `${repositoryPath}/${linkedExecution.path}`;
+          const executionContent = await readFile(fullExecutionPath);
+          if (executionContent && typeof executionContent === "string") {
+            execution = ExecutionLoader.parseExecutionArtifact(executionContent);
+            metadata = ExecutionLoader.getExecutionMetadata(execution);
           }
         } catch (error) {
-          console.warn("[ExecutionViewer] Failed to load canvas:", error);
+          console.warn("[ExecutionViewer] Failed to load linked execution:", error);
         }
       }
-      if (canvas) {
-        eventNodeMapRef.current = buildEventToNodeMap(canvas);
-      } else {
-        eventNodeMapRef.current = /* @__PURE__ */ new Map();
-      }
+      eventNodeMapRef.current = buildEventToNodeMap(canvas);
       setState((prev) => ({
         ...prev,
         canvas,
@@ -56159,14 +56269,15 @@ const ExecutionViewerPanel = ({
         metadata,
         loading: false,
         error: null,
-        availableExecutions,
-        selectedExecutionId: selectedExecution2.id,
+        availableCanvases,
+        selectedCanvasId: selectedCanvas2.id,
+        linkedExecution,
         currentSpanIndex: 0,
         currentEventIndex: 0,
         highlightedNodeId: null
       }));
     } catch (error) {
-      console.error("[ExecutionViewer] Error loading execution:", error);
+      console.error("[ExecutionViewer] Error loading canvas:", error);
       setState((prev) => ({
         ...prev,
         loading: false,
@@ -56175,16 +56286,16 @@ const ExecutionViewerPanel = ({
     }
   }, []);
   useEffect(() => {
-    loadExecution();
-  }, [loadExecution]);
+    loadCanvas();
+  }, [loadCanvas]);
   useEffect(() => {
     if (!events) return;
     const handleEvent = (event) => {
       var _a2;
-      if (event.type === "custom" && event.action === "selectExecution") {
-        const executionId = (_a2 = event.payload) == null ? void 0 : _a2.executionId;
-        if (executionId) {
-          loadExecution(executionId);
+      if (event.type === "custom" && event.action === "selectCanvas") {
+        const canvasId = (_a2 = event.payload) == null ? void 0 : _a2.canvasId;
+        if (canvasId) {
+          loadCanvas(canvasId);
         }
       }
     };
@@ -56192,7 +56303,7 @@ const ExecutionViewerPanel = ({
     return () => {
       events.off("custom", handleEvent);
     };
-  }, [events, loadExecution]);
+  }, [events, loadCanvas]);
   const handlePlayPause = useCallback(() => {
     setState((prev) => ({ ...prev, isPlaying: !prev.isPlaying }));
   }, []);
@@ -56268,7 +56379,7 @@ const ExecutionViewerPanel = ({
       }
     };
   }, [state.isPlaying, state.execution]);
-  if (!state.loading && state.availableExecutions.length === 0) {
+  if (!state.loading && state.availableCanvases.length === 0) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -56282,7 +56393,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 Canvas Files 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" }),
@@ -56355,8 +56466,8 @@ const ExecutionViewerPanel = ({
       }
     );
   }
-  const selectedExecution = state.availableExecutions.find(
-    (e) => e.id === state.selectedExecutionId
+  const selectedCanvas = state.availableCanvases.find(
+    (c) => c.id === state.selectedCanvasId
   );
   return /* @__PURE__ */ jsxs(
     "div",
@@ -56381,11 +56492,11 @@ const ExecutionViewerPanel = ({
               gap: "12px"
             },
             children: [
-              /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+              state.availableCanvases.length > 0 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
                 /* @__PURE__ */ jsxs(
                   "button",
                   {
-                    onClick: () => setState((prev) => ({ ...prev, showExecutionSelector: !prev.showExecutionSelector })),
+                    onClick: () => setState((prev) => ({ ...prev, showCanvasSelector: !prev.showCanvasSelector })),
                     style: {
                       display: "flex",
                       alignItems: "center",
@@ -56400,25 +56511,25 @@ const ExecutionViewerPanel = ({
                     },
                     children: [
                       /* @__PURE__ */ jsx(Activity, { size: 16 }),
-                      /* @__PURE__ */ jsx("span", { children: (selectedExecution == null ? void 0 : selectedExecution.name) || "Select Execution" }),
-                      (selectedExecution == null ? void 0 : selectedExecution.packageName) && /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx("span", { children: (selectedCanvas == null ? void 0 : selectedCanvas.name) || "Select Canvas" }),
+                      state.linkedExecution && /* @__PURE__ */ jsx(
                         "span",
                         {
                           style: {
                             padding: "2px 6px",
-                            background: "#3b82f6",
+                            background: "#22c55e",
                             borderRadius: "3px",
                             fontSize: "11px",
                             fontWeight: 600
                           },
-                          children: selectedExecution.packageName
+                          children: "has execution"
                         }
                       ),
                       /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
                     ]
                   }
                 ),
-                state.showExecutionSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
+                state.showCanvasSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     "div",
                     {
@@ -56427,7 +56538,7 @@ const ExecutionViewerPanel = ({
                         inset: 0,
                         zIndex: 999
                       },
-                      onClick: () => setState((prev) => ({ ...prev, showExecutionSelector: false }))
+                      onClick: () => setState((prev) => ({ ...prev, showCanvasSelector: false }))
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -56447,17 +56558,17 @@ const ExecutionViewerPanel = ({
                         boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
                         zIndex: 1e3
                       },
-                      children: state.availableExecutions.map((execution) => /* @__PURE__ */ jsxs(
+                      children: state.availableCanvases.map((canvas) => /* @__PURE__ */ jsxs(
                         "button",
                         {
                           onClick: () => {
-                            loadExecution(execution.id);
-                            setState((prev) => ({ ...prev, showExecutionSelector: false }));
+                            loadCanvas(canvas.id);
+                            setState((prev) => ({ ...prev, showCanvasSelector: false }));
                           },
                           style: {
                             width: "100%",
                             padding: "10px 16px",
-                            background: execution.id === state.selectedExecutionId ? "#3b82f6" : "transparent",
+                            background: canvas.id === state.selectedCanvasId ? "#3b82f6" : "transparent",
                             border: "none",
                             borderBottom: "1px solid #3a3a3a",
                             color: "#fff",
@@ -56470,33 +56581,20 @@ const ExecutionViewerPanel = ({
                           },
                           children: [
                             /* @__PURE__ */ jsx(Activity, { size: 14 }),
-                            /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: execution.name }),
-                            execution.packageName && /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                style: {
-                                  padding: "2px 6px",
-                                  background: execution.id === state.selectedExecutionId ? "#2563eb" : "#3b82f6",
-                                  borderRadius: "3px",
-                                  fontSize: "11px",
-                                  fontWeight: 600
-                                },
-                                children: execution.packageName
-                              }
-                            )
+                            /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: canvas.name })
                           ]
                         },
-                        execution.id
+                        canvas.id
                       ))
                     }
                   )
                 ] })
               ] }),
               /* @__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" }),
-                selectedExecution && /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "#999", marginTop: "2px" }, children: selectedExecution.path })
+                /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 600 }, children: ((_a = state.metadata) == null ? void 0 : _a.name) || (state.canvas ? "Canvas Viewer" : "Execution Viewer") }),
+                selectedCanvas && /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "#999", marginTop: "2px" }, children: selectedCanvas.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 +56641,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",
@@ -56566,24 +56711,11 @@ const ExecutionViewerPanel = ({
                 color: "#666"
               },
               children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-                /* @__PURE__ */ jsx("p", { children: "No matching canvas found" }),
-                /* @__PURE__ */ jsxs("p", { style: { fontSize: "12px", marginTop: "8px" }, children: [
-                  "Expected: ",
-                  selectedExecution == null ? void 0 : selectedExecution.canvasBasename,
-                  ".otel.canvas"
-                ] })
+                /* @__PURE__ */ jsx("p", { children: "Canvas not loaded" }),
+                /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", marginTop: "8px" }, children: (selectedCanvas == null ? void 0 : selectedCanvas.path) || "No canvas selected" })
               ] })
             }
-          ),
-          /* @__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 })
       ]