@industry-theme/principal-view-panels 0.1.46 → 0.1.47

package/dist/panels.bundle.js

@@ -51917,6 +51917,833 @@ const TraceViewerPanel = ({
     }
   );
 };
+const EXECUTION_FILE_PATTERNS = [
+  // Packages monorepo pattern: packages/core/__executions__/api-tests.spans.json
+  /^packages\/([^/]+)\/__executions__\/(.+)\.(?:spans|execution|events)\.json$/,
+  // Inside .principal-views: .principal-views/__executions__/graph-converter.spans.json
+  /^\.principal-views\/__executions__\/(.+)\.(?:spans|execution|events)\.json$/,
+  // Direct __executions__ folder: __executions__/test-run.spans.json
+  /^__executions__\/(.+)\.(?:spans|execution|events)\.json$/
+];
+function getExecutionNameFromFilename(filename) {
+  return filename.replace(/\.(?:spans|execution|events)\.json$/, "").split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+function getCanvasBasename(filename) {
+  return filename.replace(/\.(?:spans|execution|events)\.json$/, "");
+}
+class ExecutionLoader {
+  /**
+   * Parse JSON execution artifact content
+   */
+  static parseExecutionArtifact(content) {
+    try {
+      const parsed = JSON.parse(content);
+      if (Array.isArray(parsed)) {
+        return { spans: parsed };
+      }
+      return parsed;
+    } catch (error) {
+      throw new Error(`Failed to parse execution artifact JSON: ${error.message}`);
+    }
+  }
+  /**
+   * Get spans array from artifact (handles both formats)
+   */
+  static getSpans(artifact) {
+    if (artifact.spans) {
+      return artifact.spans;
+    }
+    if (Array.isArray(artifact)) {
+      return artifact;
+    }
+    const spans = [];
+    for (const key in artifact) {
+      if (!isNaN(Number(key))) {
+        spans.push(artifact[key]);
+      }
+    }
+    return spans;
+  }
+  /**
+   * Extract metadata from an execution artifact
+   */
+  static getExecutionMetadata(artifact) {
+    const spans = ExecutionLoader.getSpans(artifact);
+    const spanCount = spans.length;
+    const eventCount = spans.reduce((total, span) => {
+      var _a;
+      return total + (((_a = span.events) == null ? void 0 : _a.length) || 0);
+    }, 0);
+    const metadata = artifact.metadata;
+    let status = "success";
+    if (metadata == null ? void 0 : metadata.status) {
+      status = metadata.status;
+    } else if (spans.length > 0) {
+      const hasError = spans.some(
+        (s) => s.status === "ERROR" || s.status === "error" || s.status === "FAILED"
+      );
+      status = hasError ? "error" : "OK";
+    }
+    return {
+      name: (metadata == null ? void 0 : metadata.canvasName) || "Untitled Execution",
+      canvasName: metadata == null ? void 0 : metadata.canvasName,
+      exportedAt: metadata == null ? void 0 : metadata.exportedAt,
+      source: metadata == null ? void 0 : metadata.source,
+      framework: metadata == null ? void 0 : metadata.framework,
+      status,
+      spanCount,
+      eventCount
+    };
+  }
+  /**
+   * Find all execution artifact files in the file tree
+   */
+  static findExecutionFiles(files) {
+    const executionFiles = [];
+    for (const file of files) {
+      const filePath = file.relativePath || file.path || "";
+      const fileName = file.name || filePath.split("/").pop() || "";
+      for (const pattern of EXECUTION_FILE_PATTERNS) {
+        const match = filePath.match(pattern);
+        if (match) {
+          let id;
+          let packageName;
+          let baseName;
+          if (pattern === EXECUTION_FILE_PATTERNS[0]) {
+            packageName = match[1];
+            baseName = match[2];
+            id = `${packageName}-${baseName}`;
+          } else if (pattern === EXECUTION_FILE_PATTERNS[1]) {
+            baseName = match[1];
+            id = `pv-${baseName}`;
+          } else {
+            baseName = match[1];
+            id = baseName;
+          }
+          executionFiles.push({
+            id,
+            name: getExecutionNameFromFilename(fileName),
+            path: filePath,
+            canvasBasename: getCanvasBasename(fileName),
+            packageName
+          });
+          break;
+        }
+      }
+    }
+    return executionFiles.sort((a, b) => {
+      if (a.packageName && b.packageName) {
+        const pkgCompare = a.packageName.localeCompare(b.packageName);
+        if (pkgCompare !== 0) return pkgCompare;
+      } else if (a.packageName) {
+        return -1;
+      } else if (b.packageName) {
+        return 1;
+      }
+      return 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 executions = ExecutionLoader.findExecutionFiles(files);
+    return executions.find((exec) => exec.canvasBasename === canvasBasename) || null;
+  }
+  /**
+   * Find canvas file for a given execution artifact path
+   */
+  static findCanvasForExecution(executionPath, files) {
+    const executionFilename = executionPath.split("/").pop() || "";
+    const canvasBasename = getCanvasBasename(executionFilename);
+    for (const file of files) {
+      const filePath = file.relativePath || file.path || "";
+      const fileName = file.name || filePath.split("/").pop() || "";
+      if (fileName === `${canvasBasename}.otel.canvas` || fileName === `${canvasBasename}.canvas`) {
+        return filePath;
+      }
+    }
+    return null;
+  }
+}
+const ExecutionStats = ({ metadata }) => {
+  const formatDate = (isoString) => {
+    if (!isoString) return "Unknown";
+    try {
+      const date = new Date(isoString);
+      return date.toLocaleString();
+    } catch {
+      return isoString;
+    }
+  };
+  const getStatusColor = (status) => {
+    switch (status) {
+      case "success":
+      case "OK":
+        return "#10b981";
+      // green
+      case "error":
+      case "ERROR":
+      case "FAILED":
+        return "#ef4444";
+      // red
+      default:
+        return "#6b7280";
+    }
+  };
+  const getStatusIcon = (status) => {
+    switch (status) {
+      case "success":
+      case "OK":
+        return "✓";
+      case "error":
+      case "ERROR":
+      case "FAILED":
+        return "✗";
+      default:
+        return "○";
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        padding: "12px 16px",
+        borderTop: "1px solid #333",
+        background: "#1a1a1a",
+        display: "flex",
+        gap: "24px",
+        fontSize: "12px",
+        color: "#999",
+        fontFamily: "monospace"
+      },
+      children: [
+        metadata.status && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                color: getStatusColor(metadata.status),
+                fontSize: "14px",
+                fontWeight: "bold"
+              },
+              children: getStatusIcon(metadata.status)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Status:" }),
+          /* @__PURE__ */ jsx("span", { style: { color: getStatusColor(metadata.status) }, children: metadata.status.toUpperCase() })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Spans:" }),
+          /* @__PURE__ */ jsx("span", { style: { color: "#3b82f6" }, children: metadata.spanCount })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Events:" }),
+          /* @__PURE__ */ jsx("span", { style: { color: "#8b5cf6" }, children: metadata.eventCount })
+        ] }),
+        metadata.framework && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Framework:" }),
+          /* @__PURE__ */ jsx("span", { style: { color: "#f59e0b" }, children: metadata.framework })
+        ] }),
+        metadata.source && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Source:" }),
+          /* @__PURE__ */ jsx("span", { style: { color: "#10b981" }, children: metadata.source })
+        ] }),
+        metadata.exportedAt && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              marginLeft: "auto"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#ccc" }, children: "Exported:" }),
+              /* @__PURE__ */ jsx("span", { style: { color: "#6b7280" }, children: formatDate(metadata.exportedAt) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const ExecutionViewerPanel = ({
+  context,
+  actions,
+  events
+}) => {
+  var _a;
+  const { theme } = useTheme();
+  const [state, setState] = useState({
+    canvas: null,
+    execution: null,
+    metadata: null,
+    loading: true,
+    error: null,
+    availableExecutions: [],
+    selectedExecutionId: null,
+    showExecutionSelector: false,
+    isPlaying: false,
+    currentSpanIndex: 0,
+    currentEventIndex: 0
+  });
+  const contextRef = useRef(context);
+  const actionsRef = useRef(actions);
+  const eventsRef = useRef(events);
+  contextRef.current = context;
+  actionsRef.current = actions;
+  eventsRef.current = events;
+  const selectedExecutionIdRef = useRef(null);
+  selectedExecutionIdRef.current = state.selectedExecutionId;
+  const playbackTimerRef = useRef(null);
+  const loadExecution = useCallback(async (executionId) => {
+    setState((prev) => ({ ...prev, loading: prev.canvas === null, error: null }));
+    try {
+      const ctx = contextRef.current;
+      const acts = actionsRef.current;
+      if (!ctx.hasSlice("fileTree")) {
+        throw new Error("File tree data not available");
+      }
+      if (ctx.isSliceLoading("fileTree")) {
+        return;
+      }
+      const fileTreeSlice = ctx.getSlice("fileTree");
+      const fileTreeData = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
+      if (!(fileTreeData == null ? void 0 : fileTreeData.allFiles)) {
+        setState((prev) => ({
+          ...prev,
+          canvas: null,
+          execution: null,
+          metadata: null,
+          loading: false,
+          error: null,
+          availableExecutions: [],
+          selectedExecutionId: null
+        }));
+        return;
+      }
+      const availableExecutions = ExecutionLoader.findExecutionFiles(fileTreeData.allFiles);
+      if (availableExecutions.length === 0) {
+        setState((prev) => ({
+          ...prev,
+          canvas: null,
+          execution: null,
+          metadata: null,
+          loading: false,
+          error: null,
+          availableExecutions: [],
+          selectedExecutionId: null
+        }));
+        return;
+      }
+      let selectedExecution2;
+      if (executionId) {
+        const found = availableExecutions.find((e) => e.id === executionId);
+        if (!found) {
+          throw new Error(`Execution with ID '${executionId}' not found`);
+        }
+        selectedExecution2 = found;
+      } else if (selectedExecutionIdRef.current) {
+        const found = availableExecutions.find((e) => e.id === selectedExecutionIdRef.current);
+        selectedExecution2 = found || availableExecutions[0];
+      } else {
+        selectedExecution2 = availableExecutions[0];
+      }
+      const readFile = acts.readFile;
+      if (!readFile) {
+        throw new Error("readFile action not available");
+      }
+      const repositoryPath = ctx.repositoryPath;
+      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 execution = ExecutionLoader.parseExecutionArtifact(executionContent);
+      const metadata = ExecutionLoader.getExecutionMetadata(execution);
+      const canvasPath = ExecutionLoader.findCanvasForExecution(
+        selectedExecution2.path,
+        fileTreeData.allFiles
+      );
+      let canvas = null;
+      if (canvasPath) {
+        try {
+          const fullCanvasPath = `${repositoryPath}/${canvasPath}`;
+          const canvasContent = await readFile(fullCanvasPath);
+          if (canvasContent && typeof canvasContent === "string") {
+            canvas = JSON.parse(canvasContent);
+          }
+        } catch (error) {
+          console.warn("[ExecutionViewer] Failed to load canvas:", error);
+        }
+      }
+      setState((prev) => ({
+        ...prev,
+        canvas,
+        execution,
+        metadata,
+        loading: false,
+        error: null,
+        availableExecutions,
+        selectedExecutionId: selectedExecution2.id,
+        currentSpanIndex: 0,
+        currentEventIndex: 0
+      }));
+    } catch (error) {
+      console.error("[ExecutionViewer] Error loading execution:", error);
+      setState((prev) => ({
+        ...prev,
+        loading: false,
+        error: error.message
+      }));
+    }
+  }, []);
+  useEffect(() => {
+    loadExecution();
+  }, [loadExecution]);
+  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);
+        }
+      }
+    };
+    events.on("custom", handleEvent);
+    return () => {
+      events.off("custom", handleEvent);
+    };
+  }, [events, loadExecution]);
+  const handlePlayPause = useCallback(() => {
+    setState((prev) => ({ ...prev, isPlaying: !prev.isPlaying }));
+  }, []);
+  const handleReset = useCallback(() => {
+    setState((prev) => ({
+      ...prev,
+      isPlaying: false,
+      currentSpanIndex: 0,
+      currentEventIndex: 0
+    }));
+  }, []);
+  useEffect(() => {
+    if (!state.isPlaying || !state.execution) {
+      if (playbackTimerRef.current) {
+        clearInterval(playbackTimerRef.current);
+        playbackTimerRef.current = null;
+      }
+      return;
+    }
+    const spans = ExecutionLoader.getSpans(state.execution);
+    spans.reduce((sum, span) => {
+      var _a2;
+      return sum + (((_a2 = span.events) == null ? void 0 : _a2.length) || 0);
+    }, 0);
+    playbackTimerRef.current = setInterval(() => {
+      setState((prev) => {
+        var _a2;
+        const spans2 = prev.execution ? ExecutionLoader.getSpans(prev.execution) : [];
+        if (spans2.length === 0) return { ...prev, isPlaying: false };
+        const currentSpan = spans2[prev.currentSpanIndex];
+        const spanEventCount = ((_a2 = currentSpan == null ? void 0 : currentSpan.events) == null ? void 0 : _a2.length) || 0;
+        if (prev.currentEventIndex < spanEventCount - 1) {
+          return { ...prev, currentEventIndex: prev.currentEventIndex + 1 };
+        }
+        if (prev.currentSpanIndex < spans2.length - 1) {
+          return {
+            ...prev,
+            currentSpanIndex: prev.currentSpanIndex + 1,
+            currentEventIndex: 0
+          };
+        }
+        return { ...prev, isPlaying: false };
+      });
+    }, 800);
+    return () => {
+      if (playbackTimerRef.current) {
+        clearInterval(playbackTimerRef.current);
+        playbackTimerRef.current = null;
+      }
+    };
+  }, [state.isPlaying, state.execution]);
+  if (!state.loading && state.availableExecutions.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          background: theme.colors.background,
+          color: theme.colors.text
+        },
+        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__ */ 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" }),
+            " or",
+            " ",
+            /* @__PURE__ */ jsx("code", { children: "packages/*/__executions__/*.spans.json" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                background: "#1e1e1e",
+                padding: "12px",
+                borderRadius: "4px",
+                fontFamily: "monospace",
+                fontSize: "12px",
+                textAlign: "left",
+                color: "#d4d4d4"
+              },
+              children: [
+                /* @__PURE__ */ jsx("div", { children: "# Export execution data from tests" }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  "exportExecutionArtifact(canvas, spans, ",
+                  "{"
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: "  outputPath: '__executions__/my-test.spans.json'" }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  "}",
+                  ");"
+                ] })
+              ]
+            }
+          )
+        ] })
+      }
+    );
+  }
+  if (state.error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          background: theme.colors.background,
+          color: theme.colors.error
+        },
+        children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "20px" }, children: [
+          /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 10px 0", fontSize: "18px" }, children: "Error Loading Execution" }),
+          /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: "14px" }, children: state.error })
+        ] })
+      }
+    );
+  }
+  if (state.loading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          background: theme.colors.background,
+          color: theme.colors.text
+        },
+        children: /* @__PURE__ */ jsx(Loader, { className: "animate-spin", size: 32 })
+      }
+    );
+  }
+  const selectedExecution = state.availableExecutions.find(
+    (e) => e.id === state.selectedExecutionId
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        background: theme.colors.background,
+        color: theme.colors.text
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              padding: "12px 16px",
+              borderBottom: `1px solid ${theme.colors.border}`,
+              background: "#1a1a1a",
+              gap: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => setState((prev) => ({ ...prev, showExecutionSelector: !prev.showExecutionSelector })),
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      padding: "6px 12px",
+                      background: "#2a2a2a",
+                      border: "1px solid #3a3a3a",
+                      borderRadius: "4px",
+                      color: "#fff",
+                      cursor: "pointer",
+                      fontSize: "13px"
+                    },
+                    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(
+                        "span",
+                        {
+                          style: {
+                            padding: "2px 6px",
+                            background: "#3b82f6",
+                            borderRadius: "3px",
+                            fontSize: "11px",
+                            fontWeight: 600
+                          },
+                          children: selectedExecution.packageName
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+                    ]
+                  }
+                ),
+                state.showExecutionSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "fixed",
+                        inset: 0,
+                        zIndex: 999
+                      },
+                      onClick: () => setState((prev) => ({ ...prev, showExecutionSelector: false }))
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        top: "100%",
+                        left: 0,
+                        marginTop: "4px",
+                        minWidth: "300px",
+                        maxHeight: "400px",
+                        overflowY: "auto",
+                        background: "#2a2a2a",
+                        border: "1px solid #3a3a3a",
+                        borderRadius: "4px",
+                        boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+                        zIndex: 1e3
+                      },
+                      children: state.availableExecutions.map((execution) => /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: () => {
+                            loadExecution(execution.id);
+                            setState((prev) => ({ ...prev, showExecutionSelector: false }));
+                          },
+                          style: {
+                            width: "100%",
+                            padding: "10px 16px",
+                            background: execution.id === state.selectedExecutionId ? "#3b82f6" : "transparent",
+                            border: "none",
+                            borderBottom: "1px solid #3a3a3a",
+                            color: "#fff",
+                            textAlign: "left",
+                            cursor: "pointer",
+                            fontSize: "13px",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px"
+                          },
+                          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
+                              }
+                            )
+                          ]
+                        },
+                        execution.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__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleReset,
+                    style: {
+                      padding: "6px 10px",
+                      background: "#2a2a2a",
+                      border: "1px solid #3a3a3a",
+                      borderRadius: "4px",
+                      color: "#fff",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "4px"
+                    },
+                    title: "Reset",
+                    children: /* @__PURE__ */ jsx(RotateCcw, { size: 14 })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: handlePlayPause,
+                    style: {
+                      padding: "6px 10px",
+                      background: state.isPlaying ? "#ef4444" : "#10b981",
+                      border: "none",
+                      borderRadius: "4px",
+                      color: "#fff",
+                      cursor: "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "4px",
+                      fontWeight: 600
+                    },
+                    children: [
+                      state.isPlaying ? /* @__PURE__ */ jsx(Pause, { size: 14 }) : /* @__PURE__ */ jsx(Play, { size: 14 }),
+                      state.isPlaying ? "Pause" : "Play"
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
+          state.canvas ? /* @__PURE__ */ jsx("div", { style: { flex: "0 0 60%", position: "relative" }, children: /* @__PURE__ */ jsx(
+            distExports.GraphRenderer,
+            {
+              canvas: state.canvas,
+              showMinimap: true,
+              showControls: true,
+              showBackground: true,
+              backgroundVariant: "lines",
+              showTooltips: true
+            }
+          ) }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                flex: "0 0 60%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "#0a0a0a",
+                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__ */ jsxs("div", { style: { flex: "0 0 40%", borderLeft: "1px solid #333", display: "flex", flexDirection: "column" }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { padding: "16px", borderBottom: "1px solid #333" }, children: [
+              /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 8px 0", fontSize: "14px", fontWeight: 600 }, children: "Execution Events" }),
+              /* @__PURE__ */ jsxs("div", { style: { fontSize: "12px", color: "#999" }, children: [
+                "Span ",
+                state.currentSpanIndex + 1,
+                " of ",
+                ExecutionLoader.getSpans(state.execution || {}).length,
+                " • ",
+                "Event ",
+                state.currentEventIndex + 1
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", padding: "16px" }, children: ExecutionLoader.getSpans(state.execution || {}).map((span, spanIdx) => {
+              var _a2;
+              return /* @__PURE__ */ jsxs("div", { style: { marginBottom: "24px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      fontWeight: 600,
+                      marginBottom: "8px",
+                      color: spanIdx === state.currentSpanIndex ? "#3b82f6" : "#ccc"
+                    },
+                    children: span.name
+                  }
+                ),
+                (_a2 = span.events) == null ? void 0 : _a2.map((event, eventIdx) => {
+                  const isActive = spanIdx === state.currentSpanIndex && eventIdx === state.currentEventIndex;
+                  const isPast = spanIdx < state.currentSpanIndex || spanIdx === state.currentSpanIndex && eventIdx < state.currentEventIndex;
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      style: {
+                        padding: "8px",
+                        marginBottom: "4px",
+                        background: isActive ? "#3b82f610" : "transparent",
+                        border: `1px solid ${isActive ? "#3b82f6" : "#333"}`,
+                        borderRadius: "4px",
+                        fontSize: "12px",
+                        opacity: isPast ? 0.5 : 1
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, color: "#fff", marginBottom: "4px" }, children: event.name }),
+                        event.attributes && Object.keys(event.attributes).length > 0 && /* @__PURE__ */ jsx("div", { style: { color: "#999", fontFamily: "monospace", fontSize: "11px" }, children: Object.entries(event.attributes).map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
+                          key,
+                          ": ",
+                          JSON.stringify(value)
+                        ] }, key)) })
+                      ]
+                    },
+                    eventIdx
+                  );
+                })
+              ] }, span.id);
+            }) })
+          ] })
+        ] }),
+        state.metadata && /* @__PURE__ */ jsx(ExecutionStats, { metadata: state.metadata })
+      ]
+    }
+  );
+};
 const focusNodeTool = {
   name: "focus_node",
   description: "Focuses the graph view on a specific node",
@@ -52717,6 +53544,31 @@ const panels = [
     onUnmount: async (_context) => {
       console.log("Trace Viewer Panel unmounting");
     }
+  },
+  {
+    metadata: {
+      id: "principal-ai.execution-viewer",
+      name: "Execution Viewer",
+      icon: "⚡",
+      version: "0.1.0",
+      author: "Principal AI",
+      description: "Visualizes execution artifacts (test runs) overlaid on canvas diagrams with playback controls",
+      slices: ["fileTree"]
+    },
+    component: ExecutionViewerPanel,
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Execution Viewer Panel mounted",
+        (_a = context.currentScope.repository) == null ? void 0 : _a.path
+      );
+      if (context.hasSlice("fileTree") && !context.isSliceLoading("fileTree")) {
+        await context.refresh("repository", "fileTree");
+      }
+    },
+    onUnmount: async (_context) => {
+      console.log("Execution Viewer Panel unmounting");
+    }
   }
 ];
 const onPackageLoad = async () => {
@@ -52727,6 +53579,7 @@ const onPackageUnload = async () => {
 };
 export {
   EventControllerPanel,
+  ExecutionViewerPanel,
   PanelFileSystemAdapter,
   TraceViewerPanel,
   focusNodeTool,