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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/panels/ExecutionViewerPanel.d.ts.map +1 -1
  2. package/dist/panels/execution-viewer/ExecutionLoader.d.ts +21 -0
  3. package/dist/panels/execution-viewer/ExecutionLoader.d.ts.map +1 -1
  4. package/dist/panels.bundle.js +107 -115
  5. package/dist/panels.bundle.js.map +1 -1
  6. package/package.json +1 -1
package/dist/panels/ExecutionViewerPanel.d.ts.map CHANGED
@@ -1 +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;AAkI/E;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6qB9D,CAAC"}
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;AAoI/E;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAooB9D,CAAC"}
package/dist/panels/execution-viewer/ExecutionLoader.d.ts CHANGED
@@ -10,6 +10,18 @@ export interface ExecutionFile {
10
10
  /** Package name for monorepos (e.g., 'core' from 'packages/core/__executions__/') */
11
11
  packageName?: string;
12
12
  }
13
+ export interface CanvasFile {
14
+ /** Unique identifier for this canvas (derived from filename) */
15
+ id: string;
16
+ /** Display name for this canvas */
17
+ name: string;
18
+ /** Full file path */
19
+ path: string;
20
+ /** Whether this is from a config folder or standalone */
21
+ source: 'folder' | 'standalone';
22
+ /** Canvas basename (without .otel.canvas or .canvas extension) */
23
+ basename: string;
24
+ }
13
25
  export interface ExecutionMetadata {
14
26
  /** Execution name */
15
27
  name: string;
@@ -76,6 +88,14 @@ export declare class ExecutionLoader {
76
88
  relativePath?: string;
77
89
  name?: string;
78
90
  }>): ExecutionFile[];
91
+ /**
92
+ * Find all .otel.canvas files in the file tree
93
+ */
94
+ static findCanvasFiles(files: Array<{
95
+ path?: string;
96
+ relativePath?: string;
97
+ name?: string;
98
+ }>): CanvasFile[];
79
99
  /**
80
100
  * Find execution artifact for a given canvas file path
81
101
  */
@@ -86,6 +106,7 @@ export declare class ExecutionLoader {
86
106
  }>): ExecutionFile | null;
87
107
  /**
88
108
  * Find canvas file for a given execution artifact path
109
+ * Prioritizes .otel.canvas files over regular .canvas files
89
110
  */
90
111
  static findCanvasForExecution(executionPath: string, files: Array<{
91
112
  path?: string;
package/dist/panels/execution-viewer/ExecutionLoader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ExecutionLoader.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/ExecutionLoader.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ExecutionLoader.d.ts","sourceRoot":"","sources":["../../../src/panels/execution-viewer/ExecutionLoader.ts"],"names":[],"mappings":"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"}
package/dist/panels.bundle.js CHANGED
@@ -55853,6 +55853,29 @@ class ExecutionLoader {
55853
55853
  return a.name.localeCompare(b.name);
55854
55854
  });
55855
55855
  }
55856
+ /**
55857
+ * Find all .otel.canvas files in the file tree
55858
+ */
55859
+ static findCanvasFiles(files) {
55860
+ const canvasFiles = [];
55861
+ const VGC_FOLDER = ".principal-views";
55862
+ for (const file of files) {
55863
+ const filePath = file.relativePath || file.path || "";
55864
+ const fileName = file.name || filePath.split("/").pop() || "";
55865
+ if (filePath.startsWith(`${VGC_FOLDER}/`) && fileName.endsWith(".otel.canvas")) {
55866
+ const basename = fileName.replace(/\.otel\.canvas$/, "");
55867
+ const displayName = basename.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
55868
+ canvasFiles.push({
55869
+ id: basename,
55870
+ name: displayName,
55871
+ path: filePath,
55872
+ source: "folder",
55873
+ basename
55874
+ });
55875
+ }
55876
+ }
55877
+ return canvasFiles.sort((a, b) => a.name.localeCompare(b.name));
55878
+ }
55856
55879
  /**
55857
55880
  * Find execution artifact for a given canvas file path
55858
55881
  */
@@ -55864,6 +55887,7 @@ class ExecutionLoader {
55864
55887
  }
55865
55888
  /**
55866
55889
  * Find canvas file for a given execution artifact path
55890
+ * Prioritizes .otel.canvas files over regular .canvas files
55867
55891
  */
55868
55892
  static findCanvasForExecution(executionPath, files) {
55869
55893
  const executionFilename = executionPath.split("/").pop() || "";
@@ -55871,7 +55895,14 @@ class ExecutionLoader {
55871
55895
  for (const file of files) {
55872
55896
  const filePath = file.relativePath || file.path || "";
55873
55897
  const fileName = file.name || filePath.split("/").pop() || "";
55874
- if (fileName === `${canvasBasename}.otel.canvas` || fileName === `${canvasBasename}.canvas`) {
55898
+ if (fileName === `${canvasBasename}.otel.canvas`) {
55899
+ return filePath;
55900
+ }
55901
+ }
55902
+ for (const file of files) {
55903
+ const filePath = file.relativePath || file.path || "";
55904
+ const fileName = file.name || filePath.split("/").pop() || "";
55905
+ if (fileName === `${canvasBasename}.canvas`) {
55875
55906
  return filePath;
55876
55907
  }
55877
55908
  }
@@ -56132,9 +56163,10 @@ const ExecutionViewerPanel = ({
56132
56163
  metadata: null,
56133
56164
  loading: true,
56134
56165
  error: null,
56135
- availableExecutions: [],
56136
- selectedExecutionId: null,
56137
- showExecutionSelector: false,
56166
+ availableCanvases: [],
56167
+ selectedCanvasId: null,
56168
+ linkedExecution: null,
56169
+ showCanvasSelector: false,
56138
56170
  isPlaying: false,
56139
56171
  currentSpanIndex: 0,
56140
56172
  currentEventIndex: 0,
@@ -56146,17 +56178,11 @@ const ExecutionViewerPanel = ({
56146
56178
  contextRef.current = context;
56147
56179
  actionsRef.current = actions;
56148
56180
  eventsRef.current = events;
56149
- const selectedExecutionIdRef = useRef(null);
56150
- selectedExecutionIdRef.current = state.selectedExecutionId;
56181
+ const selectedCanvasIdRef = useRef(null);
56182
+ selectedCanvasIdRef.current = state.selectedCanvasId;
56151
56183
  const playbackTimerRef = useRef(null);
56152
56184
  const eventNodeMapRef = useRef(/* @__PURE__ */ new Map());
56153
- const findCanvasFiles = useCallback((files) => {
56154
- return files.filter((file) => {
56155
- const path = file.relativePath || file.path || "";
56156
- return path.endsWith(".otel.canvas") || path.endsWith(".canvas");
56157
- }).map((file) => file.relativePath || file.path || "");
56158
- }, []);
56159
- const loadExecution = useCallback(async (executionId) => {
56185
+ const loadCanvas = useCallback(async (canvasId) => {
56160
56186
  setState((prev) => ({ ...prev, loading: prev.canvas === null, error: null }));
56161
56187
  try {
56162
56188
  const ctx = contextRef.current;
@@ -56177,54 +56203,39 @@ const ExecutionViewerPanel = ({
56177
56203
  metadata: null,
56178
56204
  loading: false,
56179
56205
  error: null,
56180
- availableExecutions: [],
56181
- selectedExecutionId: null
56206
+ availableCanvases: [],
56207
+ selectedCanvasId: null,
56208
+ linkedExecution: null
56182
56209
  }));
56183
56210
  return;
56184
56211
  }
56185
- const availableExecutions = ExecutionLoader.findExecutionFiles(fileTreeData.allFiles);
56186
- if (availableExecutions.length === 0) {
56187
- const readFile2 = acts.readFile;
56188
- const repositoryPath2 = ctx.repositoryPath;
56189
- let canvas2 = null;
56190
- if (readFile2 && repositoryPath2) {
56191
- const canvasFiles = findCanvasFiles(fileTreeData.allFiles);
56192
- if (canvasFiles.length > 0) {
56193
- try {
56194
- const fullCanvasPath = `${repositoryPath2}/${canvasFiles[0]}`;
56195
- const canvasContent = await readFile2(fullCanvasPath);
56196
- if (canvasContent && typeof canvasContent === "string") {
56197
- canvas2 = JSON.parse(canvasContent);
56198
- }
56199
- } catch (error) {
56200
- console.warn("[ExecutionViewer] Failed to load canvas:", error);
56201
- }
56202
- }
56203
- }
56212
+ const availableCanvases = ExecutionLoader.findCanvasFiles(fileTreeData.allFiles);
56213
+ if (availableCanvases.length === 0) {
56204
56214
  setState((prev) => ({
56205
56215
  ...prev,
56206
- canvas: canvas2,
56216
+ canvas: null,
56207
56217
  execution: null,
56208
56218
  metadata: null,
56209
56219
  loading: false,
56210
56220
  error: null,
56211
- availableExecutions: [],
56212
- selectedExecutionId: null
56221
+ availableCanvases: [],
56222
+ selectedCanvasId: null,
56223
+ linkedExecution: null
56213
56224
  }));
56214
56225
  return;
56215
56226
  }
56216
- let selectedExecution2;
56217
- if (executionId) {
56218
- const found = availableExecutions.find((e) => e.id === executionId);
56227
+ let selectedCanvas2;
56228
+ if (canvasId) {
56229
+ const found = availableCanvases.find((c) => c.id === canvasId);
56219
56230
  if (!found) {
56220
- throw new Error(`Execution with ID '${executionId}' not found`);
56231
+ throw new Error(`Canvas with ID '${canvasId}' not found`);
56221
56232
  }
56222
- selectedExecution2 = found;
56223
- } else if (selectedExecutionIdRef.current) {
56224
- const found = availableExecutions.find((e) => e.id === selectedExecutionIdRef.current);
56225
- selectedExecution2 = found || availableExecutions[0];
56233
+ selectedCanvas2 = found;
56234
+ } else if (selectedCanvasIdRef.current) {
56235
+ const found = availableCanvases.find((c) => c.id === selectedCanvasIdRef.current);
56236
+ selectedCanvas2 = found || availableCanvases[0];
56226
56237
  } else {
56227
- selectedExecution2 = availableExecutions[0];
56238
+ selectedCanvas2 = availableCanvases[0];
56228
56239
  }
56229
56240
  const readFile = acts.readFile;
56230
56241
  if (!readFile) {
@@ -56234,34 +56245,31 @@ const ExecutionViewerPanel = ({
56234
56245
  if (!repositoryPath) {
56235
56246
  throw new Error("Repository path not available");
56236
56247
  }
56237
- const fullExecutionPath = `${repositoryPath}/${selectedExecution2.path}`;
56238
- const executionContent = await readFile(fullExecutionPath);
56239
- if (!executionContent || typeof executionContent !== "string") {
56240
- throw new Error("Failed to read execution file");
56248
+ const fullCanvasPath = `${repositoryPath}/${selectedCanvas2.path}`;
56249
+ const canvasContent = await readFile(fullCanvasPath);
56250
+ if (!canvasContent || typeof canvasContent !== "string") {
56251
+ throw new Error("Failed to read canvas file");
56241
56252
  }
56242
- const execution = ExecutionLoader.parseExecutionArtifact(executionContent);
56243
- const metadata = ExecutionLoader.getExecutionMetadata(execution);
56244
- const canvasPath = ExecutionLoader.findCanvasForExecution(
56245
- selectedExecution2.path,
56253
+ const canvas = JSON.parse(canvasContent);
56254
+ const linkedExecution = ExecutionLoader.findExecutionForCanvas(
56255
+ selectedCanvas2.path,
56246
56256
  fileTreeData.allFiles
56247
56257
  );
56248
- let canvas = null;
56249
- if (canvasPath) {
56258
+ let execution = null;
56259
+ let metadata = null;
56260
+ if (linkedExecution) {
56250
56261
  try {
56251
- const fullCanvasPath = `${repositoryPath}/${canvasPath}`;
56252
- const canvasContent = await readFile(fullCanvasPath);
56253
- if (canvasContent && typeof canvasContent === "string") {
56254
- canvas = JSON.parse(canvasContent);
56262
+ const fullExecutionPath = `${repositoryPath}/${linkedExecution.path}`;
56263
+ const executionContent = await readFile(fullExecutionPath);
56264
+ if (executionContent && typeof executionContent === "string") {
56265
+ execution = ExecutionLoader.parseExecutionArtifact(executionContent);
56266
+ metadata = ExecutionLoader.getExecutionMetadata(execution);
56255
56267
  }
56256
56268
  } catch (error) {
56257
- console.warn("[ExecutionViewer] Failed to load canvas:", error);
56269
+ console.warn("[ExecutionViewer] Failed to load linked execution:", error);
56258
56270
  }
56259
56271
  }
56260
- if (canvas) {
56261
- eventNodeMapRef.current = buildEventToNodeMap(canvas);
56262
- } else {
56263
- eventNodeMapRef.current = /* @__PURE__ */ new Map();
56264
- }
56272
+ eventNodeMapRef.current = buildEventToNodeMap(canvas);
56265
56273
  setState((prev) => ({
56266
56274
  ...prev,
56267
56275
  canvas,
@@ -56269,32 +56277,33 @@ const ExecutionViewerPanel = ({
56269
56277
  metadata,
56270
56278
  loading: false,
56271
56279
  error: null,
56272
- availableExecutions,
56273
- selectedExecutionId: selectedExecution2.id,
56280
+ availableCanvases,
56281
+ selectedCanvasId: selectedCanvas2.id,
56282
+ linkedExecution,
56274
56283
  currentSpanIndex: 0,
56275
56284
  currentEventIndex: 0,
56276
56285
  highlightedNodeId: null
56277
56286
  }));
56278
56287
  } catch (error) {
56279
- console.error("[ExecutionViewer] Error loading execution:", error);
56288
+ console.error("[ExecutionViewer] Error loading canvas:", error);
56280
56289
  setState((prev) => ({
56281
56290
  ...prev,
56282
56291
  loading: false,
56283
56292
  error: error.message
56284
56293
  }));
56285
56294
  }
56286
- }, [findCanvasFiles]);
56295
+ }, []);
56287
56296
  useEffect(() => {
56288
- loadExecution();
56289
- }, [loadExecution]);
56297
+ loadCanvas();
56298
+ }, [loadCanvas]);
56290
56299
  useEffect(() => {
56291
56300
  if (!events) return;
56292
56301
  const handleEvent = (event) => {
56293
56302
  var _a2;
56294
- if (event.type === "custom" && event.action === "selectExecution") {
56295
- const executionId = (_a2 = event.payload) == null ? void 0 : _a2.executionId;
56296
- if (executionId) {
56297
- loadExecution(executionId);
56303
+ if (event.type === "custom" && event.action === "selectCanvas") {
56304
+ const canvasId = (_a2 = event.payload) == null ? void 0 : _a2.canvasId;
56305
+ if (canvasId) {
56306
+ loadCanvas(canvasId);
56298
56307
  }
56299
56308
  }
56300
56309
  };
@@ -56302,7 +56311,7 @@ const ExecutionViewerPanel = ({
56302
56311
  return () => {
56303
56312
  events.off("custom", handleEvent);
56304
56313
  };
56305
- }, [events, loadExecution]);
56314
+ }, [events, loadCanvas]);
56306
56315
  const handlePlayPause = useCallback(() => {
56307
56316
  setState((prev) => ({ ...prev, isPlaying: !prev.isPlaying }));
56308
56317
  }, []);
@@ -56378,7 +56387,7 @@ const ExecutionViewerPanel = ({
56378
56387
  }
56379
56388
  };
56380
56389
  }, [state.isPlaying, state.execution]);
56381
- if (!state.loading && state.availableExecutions.length === 0 && !state.canvas) {
56390
+ if (!state.loading && state.availableCanvases.length === 0) {
56382
56391
  return /* @__PURE__ */ jsx(
56383
56392
  "div",
56384
56393
  {
@@ -56392,7 +56401,7 @@ const ExecutionViewerPanel = ({
56392
56401
  },
56393
56402
  children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", maxWidth: "600px", padding: "20px" }, children: [
56394
56403
  /* @__PURE__ */ jsx(Activity, { size: 48, style: { margin: "0 auto 20px", opacity: 0.3 } }),
56395
- /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 10px 0", fontSize: "18px", fontWeight: 600 }, children: "No Execution Artifacts or Canvas Found" }),
56404
+ /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 10px 0", fontSize: "18px", fontWeight: 600 }, children: "No Canvas Files Found" }),
56396
56405
  /* @__PURE__ */ jsxs("p", { style: { margin: "0 0 20px 0", color: theme.colors.textSecondary, lineHeight: 1.5 }, children: [
56397
56406
  "Execution artifacts should be saved to ",
56398
56407
  /* @__PURE__ */ jsx("code", { children: "__executions__/*.spans.json" }),
@@ -56465,8 +56474,8 @@ const ExecutionViewerPanel = ({
56465
56474
  }
56466
56475
  );
56467
56476
  }
56468
- const selectedExecution = state.availableExecutions.find(
56469
- (e) => e.id === state.selectedExecutionId
56477
+ const selectedCanvas = state.availableCanvases.find(
56478
+ (c) => c.id === state.selectedCanvasId
56470
56479
  );
56471
56480
  return /* @__PURE__ */ jsxs(
56472
56481
  "div",
@@ -56491,11 +56500,11 @@ const ExecutionViewerPanel = ({
56491
56500
  gap: "12px"
56492
56501
  },
56493
56502
  children: [
56494
- state.availableExecutions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
56503
+ state.availableCanvases.length > 0 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
56495
56504
  /* @__PURE__ */ jsxs(
56496
56505
  "button",
56497
56506
  {
56498
- onClick: () => setState((prev) => ({ ...prev, showExecutionSelector: !prev.showExecutionSelector })),
56507
+ onClick: () => setState((prev) => ({ ...prev, showCanvasSelector: !prev.showCanvasSelector })),
56499
56508
  style: {
56500
56509
  display: "flex",
56501
56510
  alignItems: "center",
@@ -56510,25 +56519,25 @@ const ExecutionViewerPanel = ({
56510
56519
  },
56511
56520
  children: [
56512
56521
  /* @__PURE__ */ jsx(Activity, { size: 16 }),
56513
- /* @__PURE__ */ jsx("span", { children: (selectedExecution == null ? void 0 : selectedExecution.name) || "Select Execution" }),
56514
- (selectedExecution == null ? void 0 : selectedExecution.packageName) && /* @__PURE__ */ jsx(
56522
+ /* @__PURE__ */ jsx("span", { children: (selectedCanvas == null ? void 0 : selectedCanvas.name) || "Select Canvas" }),
56523
+ state.linkedExecution && /* @__PURE__ */ jsx(
56515
56524
  "span",
56516
56525
  {
56517
56526
  style: {
56518
56527
  padding: "2px 6px",
56519
- background: "#3b82f6",
56528
+ background: "#22c55e",
56520
56529
  borderRadius: "3px",
56521
56530
  fontSize: "11px",
56522
56531
  fontWeight: 600
56523
56532
  },
56524
- children: selectedExecution.packageName
56533
+ children: "has execution"
56525
56534
  }
56526
56535
  ),
56527
56536
  /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
56528
56537
  ]
56529
56538
  }
56530
56539
  ),
56531
- state.showExecutionSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
56540
+ state.showCanvasSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
56532
56541
  /* @__PURE__ */ jsx(
56533
56542
  "div",
56534
56543
  {
@@ -56537,7 +56546,7 @@ const ExecutionViewerPanel = ({
56537
56546
  inset: 0,
56538
56547
  zIndex: 999
56539
56548
  },
56540
- onClick: () => setState((prev) => ({ ...prev, showExecutionSelector: false }))
56549
+ onClick: () => setState((prev) => ({ ...prev, showCanvasSelector: false }))
56541
56550
  }
56542
56551
  ),
56543
56552
  /* @__PURE__ */ jsx(
@@ -56557,17 +56566,17 @@ const ExecutionViewerPanel = ({
56557
56566
  boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
56558
56567
  zIndex: 1e3
56559
56568
  },
56560
- children: state.availableExecutions.map((execution) => /* @__PURE__ */ jsxs(
56569
+ children: state.availableCanvases.map((canvas) => /* @__PURE__ */ jsxs(
56561
56570
  "button",
56562
56571
  {
56563
56572
  onClick: () => {
56564
- loadExecution(execution.id);
56565
- setState((prev) => ({ ...prev, showExecutionSelector: false }));
56573
+ loadCanvas(canvas.id);
56574
+ setState((prev) => ({ ...prev, showCanvasSelector: false }));
56566
56575
  },
56567
56576
  style: {
56568
56577
  width: "100%",
56569
56578
  padding: "10px 16px",
56570
- background: execution.id === state.selectedExecutionId ? "#3b82f6" : "transparent",
56579
+ background: canvas.id === state.selectedCanvasId ? "#3b82f6" : "transparent",
56571
56580
  border: "none",
56572
56581
  borderBottom: "1px solid #3a3a3a",
56573
56582
  color: "#fff",
@@ -56580,23 +56589,10 @@ const ExecutionViewerPanel = ({
56580
56589
  },
56581
56590
  children: [
56582
56591
  /* @__PURE__ */ jsx(Activity, { size: 14 }),
56583
- /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: execution.name }),
56584
- execution.packageName && /* @__PURE__ */ jsx(
56585
- "span",
56586
- {
56587
- style: {
56588
- padding: "2px 6px",
56589
- background: execution.id === state.selectedExecutionId ? "#2563eb" : "#3b82f6",
56590
- borderRadius: "3px",
56591
- fontSize: "11px",
56592
- fontWeight: 600
56593
- },
56594
- children: execution.packageName
56595
- }
56596
- )
56592
+ /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: canvas.name })
56597
56593
  ]
56598
56594
  },
56599
- execution.id
56595
+ canvas.id
56600
56596
  ))
56601
56597
  }
56602
56598
  )
@@ -56604,7 +56600,7 @@ const ExecutionViewerPanel = ({
56604
56600
  ] }),
56605
56601
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
56606
56602
  /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 600 }, children: ((_a = state.metadata) == null ? void 0 : _a.name) || (state.canvas ? "Canvas Viewer" : "Execution Viewer") }),
56607
- selectedExecution && /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "#999", marginTop: "2px" }, children: selectedExecution.path })
56603
+ selectedCanvas && /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "#999", marginTop: "2px" }, children: selectedCanvas.path })
56608
56604
  ] }),
56609
56605
  state.execution && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
56610
56606
  /* @__PURE__ */ jsx(
@@ -56723,12 +56719,8 @@ const ExecutionViewerPanel = ({
56723
56719
  color: "#666"
56724
56720
  },
56725
56721
  children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
56726
- /* @__PURE__ */ jsx("p", { children: "No matching canvas found" }),
56727
- /* @__PURE__ */ jsxs("p", { style: { fontSize: "12px", marginTop: "8px" }, children: [
56728
- "Expected: ",
56729
- selectedExecution == null ? void 0 : selectedExecution.canvasBasename,
56730
- ".otel.canvas"
56731
- ] })
56722
+ /* @__PURE__ */ jsx("p", { children: "Canvas not loaded" }),
56723
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", marginTop: "8px" }, children: (selectedCanvas == null ? void 0 : selectedCanvas.path) || "No canvas selected" })
56732
56724
  ] })
56733
56725
  }
56734
56726
  )