@industry-theme/principal-view-panels 0.1.55 → 0.2.0

package/dist/panels.bundle.js

@@ -15469,7 +15469,7 @@ const __iconNode$kG = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck$1 = createLucideIcon$1("circle-check", __iconNode$kG);
+const CircleCheck = createLucideIcon$1("circle-check", __iconNode$kG);
 /**
  * @license lucide-react v0.554.0 - ISC
  *
@@ -19639,7 +19639,7 @@ const __iconNode$gv = [
   ["path", { d: "M16 13H8", key: "t4e002" }],
   ["path", { d: "M16 17H8", key: "z1uh3a" }]
 ];
-const FileText$1 = createLucideIcon$1("file-text", __iconNode$gv);
+const FileText = createLucideIcon$1("file-text", __iconNode$gv);
 /**
  * @license lucide-react v0.554.0 - ISC
  *
@@ -20842,7 +20842,7 @@ const __iconNode$ft = [
     }
   ]
 ];
-const Folder = createLucideIcon$1("folder", __iconNode$ft);
+const Folder$1 = createLucideIcon$1("folder", __iconNode$ft);
 /**
  * @license lucide-react v0.554.0 - ISC
  *
@@ -30093,7 +30093,7 @@ const __iconNode$6w = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon$1("search", __iconNode$6w);
+const Search$1 = createLucideIcon$1("search", __iconNode$6w);
 /**
  * @license lucide-react v0.554.0 - ISC
  *
@@ -36459,7 +36459,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   CircleArrowOutUpRight,
   CircleArrowRight,
   CircleArrowUp,
-  CircleCheck: CircleCheck$1,
+  CircleCheck,
   CircleCheckBig,
   CircleChevronDown,
   CircleChevronLeft,
@@ -36727,7 +36727,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   FileStack,
   FileSymlink,
   FileTerminal,
-  FileText: FileText$1,
+  FileText,
   FileType,
   FileTypeCorner,
   FileUp,
@@ -36763,7 +36763,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   Focus,
   FoldHorizontal,
   FoldVertical,
-  Folder,
+  Folder: Folder$1,
   FolderArchive,
   FolderCheck,
   FolderClock,
@@ -37362,7 +37362,7 @@ const index = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   ScreenShareOff,
   Scroll,
   ScrollText,
-  Search,
+  Search: Search$1,
   SearchCheck,
   SearchCode,
   SearchSlash,
@@ -38497,8 +38497,8 @@ const LucideIcons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   CheckCheck,
   CheckCheckIcon: CheckCheck,
   CheckCircle: CircleCheckBig,
-  CheckCircle2: CircleCheck$1,
-  CheckCircle2Icon: CircleCheck$1,
+  CheckCircle2: CircleCheck,
+  CheckCircle2Icon: CircleCheck,
   CheckCircleIcon: CircleCheckBig,
   CheckIcon: Check$1,
   CheckLine,
@@ -38598,10 +38598,10 @@ const LucideIcons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   CircleArrowRightIcon: CircleArrowRight,
   CircleArrowUp,
   CircleArrowUpIcon: CircleArrowUp,
-  CircleCheck: CircleCheck$1,
+  CircleCheck,
   CircleCheckBig,
   CircleCheckBigIcon: CircleCheckBig,
-  CircleCheckIcon: CircleCheck$1,
+  CircleCheckIcon: CircleCheck,
   CircleChevronDown,
   CircleChevronDownIcon: CircleChevronDown,
   CircleChevronLeft,
@@ -39213,8 +39213,8 @@ const LucideIcons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   FileSymlinkIcon: FileSymlink,
   FileTerminal,
   FileTerminalIcon: FileTerminal,
-  FileText: FileText$1,
-  FileTextIcon: FileText$1,
+  FileText,
+  FileTextIcon: FileText,
   FileType,
   FileType2: FileTypeCorner,
   FileType2Icon: FileTypeCorner,
@@ -39303,7 +39303,7 @@ const LucideIcons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   FoldHorizontalIcon: FoldHorizontal,
   FoldVertical,
   FoldVerticalIcon: FoldVertical,
-  Folder,
+  Folder: Folder$1,
   FolderArchive,
   FolderArchiveIcon: FolderArchive,
   FolderCheck,
@@ -39330,7 +39330,7 @@ const LucideIcons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   FolderGitIcon: FolderGit,
   FolderHeart,
   FolderHeartIcon: FolderHeart,
-  FolderIcon: Folder,
+  FolderIcon: Folder$1,
   FolderInput,
   FolderInputIcon: FolderInput,
   FolderKanban,
@@ -40249,7 +40249,7 @@ const LucideIcons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   LucideCheck: Check$1,
   LucideCheckCheck: CheckCheck,
   LucideCheckCircle: CircleCheckBig,
-  LucideCheckCircle2: CircleCheck$1,
+  LucideCheckCircle2: CircleCheck,
   LucideCheckLine: CheckLine,
   LucideCheckSquare: SquareCheckBig,
   LucideCheckSquare2: SquareCheck,
@@ -40299,7 +40299,7 @@ const LucideIcons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   LucideCircleArrowOutUpRight: CircleArrowOutUpRight,
   LucideCircleArrowRight: CircleArrowRight,
   LucideCircleArrowUp: CircleArrowUp,
-  LucideCircleCheck: CircleCheck$1,
+  LucideCircleCheck: CircleCheck,
   LucideCircleCheckBig: CircleCheckBig,
   LucideCircleChevronDown: CircleChevronDown,
   LucideCircleChevronLeft: CircleChevronLeft,
@@ -40606,7 +40606,7 @@ const LucideIcons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   LucideFileStack: FileStack,
   LucideFileSymlink: FileSymlink,
   LucideFileTerminal: FileTerminal,
-  LucideFileText: FileText$1,
+  LucideFileText: FileText,
   LucideFileType: FileType,
   LucideFileType2: FileTypeCorner,
   LucideFileTypeCorner: FileTypeCorner,
@@ -40651,7 +40651,7 @@ const LucideIcons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   LucideFocus: Focus,
   LucideFoldHorizontal: FoldHorizontal,
   LucideFoldVertical: FoldVertical,
-  LucideFolder: Folder,
+  LucideFolder: Folder$1,
   LucideFolderArchive: FolderArchive,
   LucideFolderCheck: FolderCheck,
   LucideFolderClock: FolderClock,
@@ -41335,7 +41335,7 @@ const LucideIcons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   LucideScreenShareOff: ScreenShareOff,
   LucideScroll: Scroll,
   LucideScrollText: ScrollText,
-  LucideSearch: Search,
+  LucideSearch: Search$1,
   LucideSearchCheck: SearchCheck,
   LucideSearchCode: SearchCode,
   LucideSearchSlash: SearchSlash,
@@ -42562,12 +42562,12 @@ const LucideIcons = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineP
   ScrollIcon: Scroll,
   ScrollText,
   ScrollTextIcon: ScrollText,
-  Search,
+  Search: Search$1,
   SearchCheck,
   SearchCheckIcon: SearchCheck,
   SearchCode,
   SearchCodeIcon: SearchCode,
-  SearchIcon: Search,
+  SearchIcon: Search$1,
   SearchSlash,
   SearchSlashIcon: SearchSlash,
   SearchX,
@@ -48350,78 +48350,67 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$o);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$n = [
-  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
-];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$n);
-/**
- * @license lucide-react v0.552.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$m = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$m);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$n);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [
+const __iconNode$m = [
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const Copy = createLucideIcon("copy", __iconNode$l);
+const Copy = createLucideIcon("copy", __iconNode$m);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [
+const __iconNode$l = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "22", x2: "18", y1: "12", y2: "12", key: "l9bcsi" }],
   ["line", { x1: "6", x2: "2", y1: "12", y2: "12", key: "13hhkx" }],
   ["line", { x1: "12", x2: "12", y1: "6", y2: "2", key: "10w3f3" }],
   ["line", { x1: "12", x2: "12", y1: "22", y2: "18", key: "15g9kq" }]
 ];
-const Crosshair = createLucideIcon("crosshair", __iconNode$k);
+const Crosshair = createLucideIcon("crosshair", __iconNode$l);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$k = [
   ["ellipse", { cx: "12", cy: "5", rx: "9", ry: "3", key: "msslwz" }],
   ["path", { d: "M3 5V19A9 3 0 0 0 21 19V5", key: "1wlel7" }],
   ["path", { d: "M3 12A9 3 0 0 0 21 12", key: "mv7ke4" }]
 ];
-const Database = createLucideIcon("database", __iconNode$j);
+const Database = createLucideIcon("database", __iconNode$k);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
+const __iconNode$j = [
   ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
   ["path", { d: "M10 14 21 3", key: "gplh6r" }],
   ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
 ];
-const ExternalLink = createLucideIcon("external-link", __iconNode$i);
+const ExternalLink = createLucideIcon("external-link", __iconNode$j);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$i = [
   [
     "path",
     {
@@ -48439,60 +48428,56 @@ const __iconNode$h = [
     { d: "M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1", key: "mpwhp6" }
   ]
 ];
-const FileBraces = createLucideIcon("file-braces", __iconNode$h);
+const FileBraces = createLucideIcon("file-braces", __iconNode$i);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$h = [
   [
     "path",
     {
-      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
-      key: "1oefj6"
+      d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",
+      key: "1kt360"
     }
-  ],
-  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
-  ["path", { d: "M10 9H8", key: "b1mrlr" }],
-  ["path", { d: "M16 13H8", key: "t4e002" }],
-  ["path", { d: "M16 17H8", key: "z1uh3a" }]
+  ]
 ];
-const FileText = createLucideIcon("file-text", __iconNode$g);
+const Folder = createLucideIcon("folder", __iconNode$h);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$g = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M3 9h18", key: "1pudct" }],
   ["path", { d: "M3 15h18", key: "5xshup" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
 ];
-const Grid3x3 = createLucideIcon("grid-3x3", __iconNode$f);
+const Grid3x3 = createLucideIcon("grid-3x3", __iconNode$g);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [
+const __iconNode$f = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
 ];
-const Info = createLucideIcon("info", __iconNode$e);
+const Info = createLucideIcon("info", __iconNode$f);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$e = [
   ["path", { d: "M12 2v4", key: "3427ic" }],
   ["path", { d: "m16.2 7.8 2.9-2.9", key: "r700ao" }],
   ["path", { d: "M18 12h4", key: "wj9ykh" }],
@@ -48502,14 +48487,14 @@ const __iconNode$d = [
   ["path", { d: "M2 12h4", key: "j09sii" }],
   ["path", { d: "m4.9 4.9 2.9 2.9", key: "giyufr" }]
 ];
-const Loader = createLucideIcon("loader", __iconNode$d);
+const Loader = createLucideIcon("loader", __iconNode$e);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$d = [
   [
     "path",
     {
@@ -48520,50 +48505,50 @@ const __iconNode$c = [
   ["path", { d: "m2 2 20 20", key: "1ooewy" }],
   ["path", { d: "M8.656 3H20a2 2 0 0 1 2 2v11.344", key: "mhl4k6" }]
 ];
-const MessageSquareOff = createLucideIcon("message-square-off", __iconNode$c);
+const MessageSquareOff = createLucideIcon("message-square-off", __iconNode$d);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [
+const __iconNode$c = [
   ["rect", { x: "16", y: "16", width: "6", height: "6", rx: "1", key: "4q2zg0" }],
   ["rect", { x: "2", y: "16", width: "6", height: "6", rx: "1", key: "8cvhb9" }],
   ["rect", { x: "9", y: "2", width: "6", height: "6", rx: "1", key: "1egb70" }],
   ["path", { d: "M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3", key: "1jsf9p" }],
   ["path", { d: "M12 12V8", key: "2874zd" }]
 ];
-const Network = createLucideIcon("network", __iconNode$b);
+const Network = createLucideIcon("network", __iconNode$c);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$b = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }]
 ];
-const PanelLeft = createLucideIcon("panel-left", __iconNode$a);
+const PanelLeft = createLucideIcon("panel-left", __iconNode$b);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$a = [
   ["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
   ["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
 ];
-const Pause = createLucideIcon("pause", __iconNode$9);
+const Pause = createLucideIcon("pause", __iconNode$a);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [
+const __iconNode$9 = [
   [
     "path",
     {
@@ -48573,14 +48558,14 @@ const __iconNode$8 = [
   ],
   ["path", { d: "m15 5 4 4", key: "1mk7zo" }]
 ];
-const Pencil = createLucideIcon("pencil", __iconNode$8);
+const Pencil = createLucideIcon("pencil", __iconNode$9);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$8 = [
   [
     "path",
     {
@@ -48589,38 +48574,38 @@ const __iconNode$7 = [
     }
   ]
 ];
-const Play = createLucideIcon("play", __iconNode$7);
+const Play = createLucideIcon("play", __iconNode$8);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$7 = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
 ];
-const RefreshCw = createLucideIcon("refresh-cw", __iconNode$6);
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$7);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [
+const __iconNode$6 = [
   ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
   ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
 ];
-const RotateCcw = createLucideIcon("rotate-ccw", __iconNode$5);
+const RotateCcw = createLucideIcon("rotate-ccw", __iconNode$6);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$4 = [
+const __iconNode$5 = [
   [
     "path",
     {
@@ -48631,7 +48616,18 @@ const __iconNode$4 = [
   ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
   ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
 ];
-const Save = createLucideIcon("save", __iconNode$4);
+const Save = createLucideIcon("save", __iconNode$5);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$4 = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+const Search = createLucideIcon("search", __iconNode$4);
 /**
  * @license lucide-react v0.552.0 - ISC
  *
@@ -48885,7 +48881,7 @@ const EmptyStateContent = ({ theme }) => {
     ] })
   ] });
 };
-const PrincipalViewGraphPanel = ({
+const CanvasEditorPanel = ({
   context,
   actions,
   events
@@ -50583,7 +50579,7 @@ const NarrativeRenderer = ({
   const result = useMemo(() => {
     try {
       const rendered = renderNarrative(template, events);
-      const hasMissingVars = rendered.text.includes("  ") || /[#$]\s/.test(rendered.text);
+      const hasMissingVars = /\{[^}]*\}/.test(rendered.text) || rendered.text.includes("{ERROR:");
       return {
         ...rendered,
         hasMissingVars
@@ -50602,44 +50598,244 @@ const NarrativeRenderer = ({
     }
   }, [template, events]);
   const renderHighlightedText = (text) => {
+    var _a;
     const lines = text.split("\n");
-    return lines.map((line, idx) => {
-      var _a;
-      let lineStyle = {};
-      let content = line;
+    const elements = [];
+    let stepCounter = 0;
+    for (let idx = 0; idx < lines.length; idx++) {
+      const line = lines[idx];
+      if (!line.trim()) {
+        elements.push(/* @__PURE__ */ jsx("div", { style: { height: "12px" } }, idx));
+        continue;
+      }
       if (/^[✅❌⚠️📋]/.test(line)) {
-        lineStyle = {
-          fontWeight: "bold",
-          fontSize: "16px",
-          marginTop: idx > 0 ? "8px" : "0",
-          marginBottom: "4px"
-        };
+        elements.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: "18px",
+                fontWeight: 700,
+                marginTop: idx > 0 ? "24px" : "0",
+                marginBottom: "16px",
+                paddingBottom: "12px",
+                borderBottom: `2px solid ${theme.colors.border}`,
+                lineHeight: "1.4"
+              },
+              children: highlightVariables(line)
+            },
+            idx
+          )
+        );
+        stepCounter = 0;
       } else if (/^━+/.test(line)) {
-        lineStyle = {
-          color: theme.colors.border,
-          opacity: 0.6
-        };
+        elements.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                height: "1px",
+                backgroundColor: theme.colors.border,
+                margin: "20px 0",
+                opacity: 0.3
+              }
+            },
+            idx
+          )
+        );
       } else if (/^(\s*)→/.test(line)) {
         const indent = ((_a = line.match(/^(\s*)/)) == null ? void 0 : _a[1]) || "";
-        lineStyle = {
-          color: theme.colors.text,
-          fontWeight: indent.length === 0 ? "bold" : "normal",
-          marginTop: indent.length === 0 ? "12px" : "4px"
-        };
+        const isMainStep = indent.length === 0;
+        if (isMainStep) {
+          stepCounter++;
+        }
+        const content = line.replace(/^(\s*)→\s*/, "");
+        elements.push(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: "12px",
+                marginTop: isMainStep ? "16px" : "8px",
+                marginLeft: isMainStep ? "0" : "40px",
+                alignItems: "flex-start"
+              },
+              children: [
+                isMainStep && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      minWidth: "28px",
+                      height: "28px",
+                      borderRadius: "50%",
+                      backgroundColor: theme.colors.primary,
+                      color: "#fff",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      fontSize: "13px",
+                      fontWeight: 700,
+                      flexShrink: 0
+                    },
+                    children: stepCounter
+                  }
+                ),
+                !isMainStep && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      minWidth: "6px",
+                      height: "6px",
+                      borderRadius: "50%",
+                      backgroundColor: theme.colors.textSecondary,
+                      marginTop: "8px",
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      flex: 1,
+                      padding: isMainStep ? "12px 16px" : "8px 12px",
+                      backgroundColor: isMainStep ? theme.colors.backgroundSecondary : "transparent",
+                      border: isMainStep ? `1px solid ${theme.colors.border}` : "none",
+                      borderRadius: "6px",
+                      fontSize: isMainStep ? "15px" : "14px",
+                      lineHeight: "1.6",
+                      fontWeight: isMainStep ? 500 : 400
+                    },
+                    children: highlightVariables(content)
+                  }
+                )
+              ]
+            },
+            idx
+          )
+        );
       } else if (/^\s+•/.test(line)) {
-        lineStyle = {
-          color: theme.colors.textMuted,
-          paddingLeft: "8px"
-        };
+        const content = line.replace(/^\s+•\s*/, "");
+        elements.push(
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: "8px",
+                marginLeft: "40px",
+                marginTop: "6px",
+                alignItems: "flex-start"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { style: { color: theme.colors.textSecondary, marginTop: "2px" }, children: "•" }),
+                /* @__PURE__ */ jsx("span", { style: { color: theme.colors.textSecondary, fontSize: "14px", lineHeight: "1.6" }, children: highlightVariables(content) })
+              ]
+            },
+            idx
+          )
+        );
       } else if (/^[A-Z\s]+:/.test(line)) {
-        lineStyle = {
-          fontWeight: "bold",
-          marginTop: "8px",
-          color: theme.colors.text
-        };
+        elements.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                fontWeight: 700,
+                marginTop: "24px",
+                marginBottom: "12px",
+                color: theme.colors.text,
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                opacity: 0.8
+              },
+              children: highlightVariables(line)
+            },
+            idx
+          )
+        );
+      } else {
+        elements.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "1.7",
+                color: theme.colors.textSecondary,
+                marginTop: "8px"
+              },
+              children: highlightVariables(line)
+            },
+            idx
+          )
+        );
+      }
+    }
+    return elements;
+  };
+  const highlightVariables = (text) => {
+    const parts = [];
+    let lastIndex = 0;
+    const patterns = [
+      // Currency ($123.45)
+      { regex: /\$\d+(?:\.\d{2})?/g, color: "#10b981" },
+      // IDs and codes (ORD-12345, ABC123, etc.)
+      { regex: /\b[A-Z]{2,}[-_]?\d+\b/g, color: "#f59e0b" },
+      // Plain numbers (not part of IDs)
+      { regex: /\b\d+(?:\.\d+)?\b/g, color: "#60a5fa" },
+      // Email-like or capitalized names (John Doe, john@example.com)
+      { regex: /\b[A-Z][a-z]+(?:\s+[A-Z][a-z]+)*\b/g, color: "#a78bfa" },
+      { regex: /\b[\w.-]+@[\w.-]+\.\w+\b/g, color: "#ec4899" }
+    ];
+    const allMatches = [];
+    patterns.forEach(({ regex, color: color2 }) => {
+      let match;
+      const re = new RegExp(regex.source, regex.flags);
+      while ((match = re.exec(text)) !== null) {
+        allMatches.push({
+          start: match.index,
+          end: match.index + match[0].length,
+          text: match[0],
+          color: color2
+        });
       }
-      return /* @__PURE__ */ jsx("div", { style: lineStyle, children: content }, idx);
     });
+    allMatches.sort((a, b) => a.start - b.start);
+    const nonOverlapping = [];
+    let lastEnd = 0;
+    for (const match of allMatches) {
+      if (match.start >= lastEnd) {
+        nonOverlapping.push(match);
+        lastEnd = match.end;
+      }
+    }
+    nonOverlapping.forEach((match, i) => {
+      if (match.start > lastIndex) {
+        parts.push(text.substring(lastIndex, match.start));
+      }
+      parts.push(
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              color: match.color,
+              fontWeight: 600,
+              fontFamily: theme.fonts.monospace
+            },
+            children: match.text
+          },
+          i
+        )
+      );
+      lastIndex = match.end;
+    });
+    if (lastIndex < text.length) {
+      parts.push(text.substring(lastIndex));
+    }
+    return parts.length > 0 ? /* @__PURE__ */ jsx(Fragment, { children: parts }) : text;
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -50685,14 +50881,12 @@ const NarrativeRenderer = ({
             style: {
               flex: 1,
               overflow: "auto",
-              padding: "20px",
-              fontFamily: theme.fonts.monospace,
+              padding: "32px 28px",
+              fontFamily: theme.fonts.body,
               fontSize: "14px",
-              lineHeight: "1.6",
+              lineHeight: "1.7",
               color: theme.colors.text,
-              backgroundColor: theme.colors.background,
-              whiteSpace: "pre-wrap",
-              wordWrap: "break-word"
+              backgroundColor: theme.colors.background
             },
             children: renderHighlightedText(result.text)
           }
@@ -50966,35 +51160,35 @@ const TestEventPanel = ({
                 /* @__PURE__ */ jsx(
                   "button",
                   {
-                    onClick: () => onViewModeChange("raw"),
+                    onClick: () => onViewModeChange("narrative"),
                     style: {
                       padding: "6px 12px",
-                      background: viewMode === "raw" ? theme.colors.primary : theme.colors.surface,
+                      background: viewMode === "narrative" ? theme.colors.primary : theme.colors.surface,
                       border: `1px solid ${theme.colors.border}`,
                       borderRadius: "4px",
-                      color: viewMode === "raw" ? "#ffffff" : theme.colors.text,
+                      color: viewMode === "narrative" ? "#ffffff" : theme.colors.text,
                       cursor: "pointer",
                       fontSize: "13px",
-                      fontWeight: viewMode === "raw" ? "bold" : "normal"
+                      fontWeight: viewMode === "narrative" ? "bold" : "normal"
                     },
-                    children: "Raw Events"
+                    children: "Narrative"
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
-                    onClick: () => onViewModeChange("narrative"),
+                    onClick: () => onViewModeChange("raw"),
                     style: {
                       padding: "6px 12px",
-                      background: viewMode === "narrative" ? theme.colors.primary : theme.colors.surface,
+                      background: viewMode === "raw" ? theme.colors.primary : theme.colors.surface,
                       border: `1px solid ${theme.colors.border}`,
                       borderRadius: "4px",
-                      color: viewMode === "narrative" ? "#ffffff" : theme.colors.text,
+                      color: viewMode === "raw" ? "#ffffff" : theme.colors.text,
                       cursor: "pointer",
                       fontSize: "13px",
-                      fontWeight: viewMode === "narrative" ? "bold" : "normal"
+                      fontWeight: viewMode === "raw" ? "bold" : "normal"
                     },
-                    children: "Narrative"
+                    children: "Raw Events"
                   }
                 )
               ] }),
@@ -51427,7 +51621,7 @@ class ExecutionLoader {
     });
   }
   /**
-   * Find all .otel.canvas files in the file tree
+   * Find all .canvas files (both .otel.canvas and regular .canvas) in the file tree
    */
   static findCanvasFiles(files) {
     const canvasFiles = [];
@@ -51435,16 +51629,27 @@ class ExecutionLoader {
     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")) {
-        const basename = fileName.replace(/\.otel\.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
-        });
+      if (filePath.startsWith(`${VGC_FOLDER}/`)) {
+        let basename = null;
+        let type2 = null;
+        if (fileName.endsWith(".otel.canvas")) {
+          basename = fileName.replace(/\.otel\.canvas$/, "");
+          type2 = "otel";
+        } else if (fileName.endsWith(".canvas") && !fileName.endsWith(".otel.canvas")) {
+          basename = fileName.replace(/\.canvas$/, "");
+          type2 = "regular";
+        }
+        if (basename && type2) {
+          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,
+            type: type2
+          });
+        }
       }
     }
     return canvasFiles.sort((a, b) => a.name.localeCompare(b.name));
@@ -51842,7 +52047,7 @@ const Step2Components = () => {
           /* @__PURE__ */ jsx("rect", { x: "310", y: "85", width: "240", height: "55", fill: "#1e1b4b", stroke: "#6366f1", strokeWidth: "1", rx: "3" }),
           /* @__PURE__ */ jsx("text", { x: "315", y: "98", fill: "#c4b5fd", fontSize: "9", fontWeight: "600", children: "Scenario: success (priority: 1)" }),
           /* @__PURE__ */ jsx("text", { x: "320", y: "110", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'condition: event = "order.completed"' }),
-          /* @__PURE__ */ jsx("text", { x: "320", y: "122", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'template: "Order #{{order.id}} completed"' }),
+          /* @__PURE__ */ jsx("text", { x: "320", y: "122", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: 'template: "Order #{order.id} completed"' }),
           /* @__PURE__ */ jsx("text", { x: "320", y: "134", fill: "#94a3b8", fontSize: "8", fontFamily: "monospace", children: "steps: [4 narrative steps...]" })
         ] }),
         /* @__PURE__ */ jsxs("g", { children: [
@@ -51948,9 +52153,9 @@ const Step4Templates = () => {
         /* @__PURE__ */ jsx("rect", { x: "40", y: "45", width: "520", height: "90", fill: "#1e293b", stroke: "#475569", strokeWidth: "2", rx: "4" }),
         /* @__PURE__ */ jsx("text", { x: "60", y: "65", fill: "#94a3b8", fontSize: "11", fontWeight: "600", children: "TEMPLATE WITH VARIABLES:" }),
         /* @__PURE__ */ jsx("rect", { x: "60", y: "75", width: "500", height: "50", fill: "#0f172a", stroke: "#334155", strokeWidth: "1", rx: "3" }),
-        /* @__PURE__ */ jsx("text", { x: "70", y: "93", fill: "#c4b5fd", fontSize: "10", fontFamily: "monospace", children: 'summary: "Order #{{order.id}} for {{customer.name}}"' }),
+        /* @__PURE__ */ jsx("text", { x: "70", y: "93", fill: "#c4b5fd", fontSize: "10", fontFamily: "monospace", children: 'summary: "Order #{order.id} for {customer.name}"' }),
         /* @__PURE__ */ jsx("text", { x: "70", y: "108", fill: "#c4b5fd", fontSize: "10", fontFamily: "monospace", children: "steps:" }),
-        /* @__PURE__ */ jsx("text", { x: "80", y: "120", fill: "#c4b5fd", fontSize: "10", fontFamily: "monospace", children: '- "Payment: ${{order.total}} via {{payment.method}}"' })
+        /* @__PURE__ */ jsx("text", { x: "80", y: "120", fill: "#c4b5fd", fontSize: "10", fontFamily: "monospace", children: '- "Payment: ${order.total} via {payment.method}"' })
       ] }),
       /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("text", { x: "300", y: "160", textAnchor: "middle", fill: "#3b82f6", fontSize: "16", fontWeight: "700", children: "+" }) }),
       /* @__PURE__ */ jsxs("g", { children: [
@@ -51972,7 +52177,7 @@ const Step4Templates = () => {
       /* @__PURE__ */ jsx("rect", { x: "40", y: "260", width: "520", height: "15", fill: "#1e3a8a", stroke: "#3b82f6", strokeWidth: "1", rx: "3" }),
       /* @__PURE__ */ jsxs("text", { x: "50", y: "270", fill: "#bfdbfe", fontSize: "9", children: [
         /* @__PURE__ */ jsx("tspan", { fontWeight: "600", children: "Syntax:" }),
-        " {{variable.name}} gets replaced with actual values from OTEL attributes, events, or span data"
+        " {variable.name} gets replaced with actual values from OTEL attributes, events, or span data"
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { style: {
@@ -51984,7 +52189,7 @@ const Step4Templates = () => {
       border: "1px solid #475569"
     }, children: [
       "Variables in ",
-      /* @__PURE__ */ jsx("code", { style: { color: "#a78bfa" }, children: "{{double.braces}}" }),
+      /* @__PURE__ */ jsx("code", { style: { color: "#a78bfa" }, children: "{single.braces}" }),
       " are replaced with actual values from your execution data."
     ] })
   ] });
@@ -52354,7 +52559,7 @@ const NarrativeExplainerPanel = ({ className }) => {
                 ] }),
                 /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
                   /* @__PURE__ */ jsx("span", { style: { color: "#34d399" }, children: "4." }),
-                  /* @__PURE__ */ jsx("span", { style: { color: theme.colors.textSecondary }, children: "View the results in ExecutionViewerPanel" })
+                  /* @__PURE__ */ jsx("span", { style: { color: theme.colors.textSecondary }, children: "View the results in CanvasDetailPanel" })
                 ] })
               ] })
             ]
@@ -52372,6 +52577,27 @@ const NarrativeTemplatePanel = ({
 }) => {
   var _a, _b;
   const { theme } = useTheme();
+  const [expandedScenarios, setExpandedScenarios] = useState(/* @__PURE__ */ new Set());
+  const toggleScenario = (scenarioId) => {
+    setExpandedScenarios((prev) => {
+      const next = new Set(prev);
+      if (next.has(scenarioId)) {
+        next.delete(scenarioId);
+      } else {
+        next.add(scenarioId);
+      }
+      return next;
+    });
+  };
+  const renderTemplateText = (text) => {
+    const parts = text.split(/(\{[^}]+\})/g);
+    return /* @__PURE__ */ jsx(Fragment, { children: parts.map((part, i) => {
+      if (part.match(/^\{[^}]+\}$/)) {
+        return /* @__PURE__ */ jsx("span", { style: { color: theme.colors.accent, fontWeight: 600 }, children: part }, i);
+      }
+      return part;
+    }) });
+  };
   const renderCondition = (condition, depth = 0) => {
     var _a2;
     const indent = depth * 16;
@@ -52444,10 +52670,7 @@ const NarrativeTemplatePanel = ({
               flexShrink: 0
             },
             children: [
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                /* @__PURE__ */ jsx(FileText, { size: 20, style: { color: theme.colors.accent } }),
-                /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "16px", fontWeight: 600 }, children: narrativeTemplate.name || "Narrative Template" })
-              ] }),
+              /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: "16px", fontWeight: 600 }, children: narrativeTemplate.name || "Narrative Template" }) }),
               narrativeTemplate.description && /* @__PURE__ */ jsx(
                 "p",
                 {
@@ -52480,218 +52703,252 @@ const NarrativeTemplatePanel = ({
               ]
             }
           ),
-          (_b = narrativeTemplate.scenarios) == null ? void 0 : _b.map((scenario, index2) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                marginBottom: "16px",
-                padding: "12px",
-                background: theme.colors.background,
-                border: `1px solid ${theme.colors.border}`,
-                borderRadius: "6px"
-              },
-              children: [
-                /* @__PURE__ */ jsx("div", { style: { marginBottom: "12px" }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
-                  scenario.priority === 1 ? /* @__PURE__ */ jsx(CircleCheck, { size: 16, style: { color: "#22c55e" } }) : /* @__PURE__ */ jsx(CircleAlert, { size: 16, style: { color: "#f59e0b" } }),
-                  /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "14px", fontWeight: 600 }, children: scenario.description }),
+          (_b = narrativeTemplate.scenarios) == null ? void 0 : _b.map((scenario, index2) => {
+            const isExpanded = expandedScenarios.has(scenario.id || String(index2));
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  marginBottom: "16px",
+                  background: theme.colors.background,
+                  border: `1px solid ${theme.colors.border}`,
+                  borderRadius: "6px",
+                  overflow: "hidden"
+                },
+                children: [
                   /* @__PURE__ */ jsxs(
-                    "span",
-                    {
-                      style: {
-                        fontSize: "11px",
-                        padding: "2px 6px",
-                        background: theme.colors.background,
-                        borderRadius: "3px",
-                        color: theme.colors.textSecondary
-                      },
-                      children: [
-                        "Priority: ",
-                        scenario.priority
-                      ]
-                    }
-                  )
-                ] }) }),
-                /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
-                  /* @__PURE__ */ jsx(
                     "div",
                     {
+                      onClick: () => toggleScenario(scenario.id || String(index2)),
                       style: {
-                        fontSize: "11px",
-                        fontWeight: 600,
-                        color: theme.colors.textSecondary,
-                        marginBottom: "6px",
-                        textTransform: "uppercase",
-                        letterSpacing: "0.5px"
+                        padding: "12px",
+                        cursor: "pointer",
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px",
+                        transition: "background 0.2s",
+                        background: isExpanded ? theme.colors.backgroundSecondary : "transparent"
                       },
-                      children: "Condition"
-                    }
-                  ),
-                  renderCondition(scenario.condition)
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        fontSize: "11px",
-                        fontWeight: 600,
-                        color: theme.colors.textSecondary,
-                        marginBottom: "6px",
-                        textTransform: "uppercase",
-                        letterSpacing: "0.5px"
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.background = theme.colors.backgroundSecondary;
                       },
-                      children: "Template"
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.background = isExpanded ? theme.colors.backgroundSecondary : "transparent";
+                      },
+                      children: [
+                        isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { size: 16, style: { color: theme.colors.textSecondary, flexShrink: 0 } }) : /* @__PURE__ */ jsx(ChevronRight, { size: 16, style: { color: theme.colors.textSecondary, flexShrink: 0 } }),
+                        /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+                          /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: "14px", fontWeight: 600 }, children: scenario.name || scenario.description || scenario.id }),
+                          scenario.description && scenario.name && /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0 0", fontSize: "12px", color: theme.colors.textSecondary }, children: scenario.description })
+                        ] })
+                      ]
                     }
                   ),
-                  scenario.template.summary && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: theme.colors.textSecondary, marginBottom: "2px" }, children: "Summary:" }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          fontSize: "12px",
-                          color: theme.colors.text,
-                          fontFamily: theme.fonts.monospace,
-                          padding: "6px 8px",
-                          background: theme.colors.background,
-                          borderRadius: "3px",
-                          border: `1px solid ${theme.colors.border}`
-                        },
-                        children: scenario.template.summary
-                      }
-                    )
-                  ] }),
-                  scenario.template.steps && scenario.template.steps.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
-                    /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: [
-                      "Steps (",
-                      scenario.template.steps.length,
-                      "):"
-                    ] }),
-                    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: scenario.template.steps.map((step, i) => /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        style: {
-                          fontSize: "12px",
-                          color: theme.colors.textSecondary,
-                          fontFamily: theme.fonts.monospace,
-                          padding: "4px 8px",
-                          background: theme.colors.background,
-                          borderRadius: "3px",
-                          border: `1px solid ${theme.colors.border}`,
-                          display: "flex",
-                          gap: "8px"
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxs("span", { style: { color: theme.colors.textSecondary, minWidth: "20px" }, children: [
-                            i + 1,
-                            "."
-                          ] }),
-                          /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: step })
-                        ]
-                      },
-                      i
-                    )) })
-                  ] }),
-                  scenario.template.details && Object.keys(scenario.template.details).length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
-                    /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Details:" }),
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          fontSize: "12px",
-                          fontFamily: theme.fonts.monospace,
-                          padding: "6px 8px",
-                          background: theme.colors.background,
-                          borderRadius: "3px",
-                          border: `1px solid ${theme.colors.border}`
-                        },
-                        children: Object.entries(scenario.template.details).map(([key, value]) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: "2px" }, children: [
-                          /* @__PURE__ */ jsxs("span", { style: { color: theme.colors.textSecondary }, children: [
-                            key,
-                            ":"
-                          ] }),
-                          " ",
-                          /* @__PURE__ */ jsx("span", { style: { color: theme.colors.text }, children: String(value) })
-                        ] }, key))
-                      }
-                    )
-                  ] }),
-                  (() => {
-                    const matchingExecutions = availableExecutions.filter(
-                      (exec) => executionScenarioMap[exec.id] === scenario.id
-                    );
-                    return matchingExecutions.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
-                      /* @__PURE__ */ jsxs(
+                  isExpanded && /* @__PURE__ */ jsxs("div", { style: { padding: "12px", borderTop: `1px solid ${theme.colors.border}` }, children: [
+                    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+                      /* @__PURE__ */ jsx(
                         "div",
                         {
                           style: {
                             fontSize: "11px",
+                            fontWeight: 600,
                             color: theme.colors.textSecondary,
-                            marginBottom: "4px",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "6px"
+                            marginBottom: "6px",
+                            textTransform: "uppercase",
+                            letterSpacing: "0.5px"
                           },
-                          children: [
-                            /* @__PURE__ */ jsx(Database, { size: 12 }),
-                            /* @__PURE__ */ jsxs("span", { children: [
-                              "Execution Files (",
-                              matchingExecutions.length,
-                              ")"
-                            ] })
-                          ]
+                          children: "Condition"
                         }
                       ),
-                      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: matchingExecutions.map((exec) => /* @__PURE__ */ jsxs(
-                        "button",
+                      renderCondition(scenario.condition)
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
                         {
-                          onClick: () => onExecutionSelect == null ? void 0 : onExecutionSelect(exec.id),
                           style: {
-                            fontSize: "12px",
-                            padding: "6px 8px",
-                            background: theme.colors.background,
-                            border: `1px solid ${theme.colors.border}`,
-                            borderRadius: "3px",
+                            fontSize: "11px",
+                            fontWeight: 600,
                             color: theme.colors.textSecondary,
-                            fontFamily: theme.fonts.monospace,
-                            cursor: "pointer",
-                            display: "flex",
-                            alignItems: "center",
-                            justifyContent: "space-between",
-                            transition: "all 0.2s",
-                            textAlign: "left"
-                          },
-                          onMouseEnter: (e) => {
-                            e.currentTarget.style.background = theme.colors.muted;
-                            e.currentTarget.style.borderColor = theme.colors.accent;
+                            marginBottom: "6px",
+                            textTransform: "uppercase",
+                            letterSpacing: "0.5px"
                           },
-                          onMouseLeave: (e) => {
-                            e.currentTarget.style.background = theme.colors.background;
-                            e.currentTarget.style.borderColor = theme.colors.border;
+                          children: "Template"
+                        }
+                      ),
+                      scenario.template.introduction && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
+                        /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: theme.colors.textSecondary, marginBottom: "2px" }, children: "Introduction:" }),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              fontSize: "12px",
+                              color: theme.colors.text,
+                              fontFamily: theme.fonts.monospace,
+                              padding: "6px 8px",
+                              background: theme.colors.background,
+                              borderRadius: "3px",
+                              border: `1px solid ${theme.colors.border}`
+                            },
+                            children: renderTemplateText(scenario.template.introduction)
+                          }
+                        )
+                      ] }),
+                      scenario.template.summary && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
+                        /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: theme.colors.textSecondary, marginBottom: "2px" }, children: "Summary (closing):" }),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              fontSize: "12px",
+                              color: theme.colors.text,
+                              fontFamily: theme.fonts.monospace,
+                              padding: "6px 8px",
+                              background: theme.colors.background,
+                              borderRadius: "3px",
+                              border: `1px solid ${theme.colors.border}`
+                            },
+                            children: renderTemplateText(scenario.template.summary)
+                          }
+                        )
+                      ] }),
+                      scenario.template.flow && scenario.template.flow.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
+                        /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: [
+                          "Flow (",
+                          scenario.template.flow.length,
+                          "):"
+                        ] }),
+                        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: scenario.template.flow.map((step, i) => /* @__PURE__ */ jsxs(
+                          "div",
+                          {
+                            style: {
+                              fontSize: "12px",
+                              color: theme.colors.textSecondary,
+                              fontFamily: theme.fonts.monospace,
+                              padding: "4px 8px",
+                              background: theme.colors.background,
+                              borderRadius: "3px",
+                              border: `1px solid ${theme.colors.border}`,
+                              display: "flex",
+                              gap: "8px"
+                            },
+                            children: [
+                              /* @__PURE__ */ jsxs("span", { style: { color: theme.colors.textSecondary, minWidth: "20px" }, children: [
+                                i + 1,
+                                "."
+                              ] }),
+                              /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: renderTemplateText(step) })
+                            ]
                           },
-                          children: [
-                            /* @__PURE__ */ jsx("span", { children: exec.name }),
-                            /* @__PURE__ */ jsx(ChevronRight, { size: 14, style: { color: theme.colors.accent, flexShrink: 0 } })
-                          ]
-                        },
-                        exec.id
-                      )) })
-                    ] }) : null;
-                  })()
-                ] })
-              ]
-            },
-            scenario.id || index2
-          ))
+                          i
+                        )) })
+                      ] }),
+                      scenario.template.details && Object.keys(scenario.template.details).length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
+                        /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: theme.colors.textSecondary, marginBottom: "4px" }, children: "Details:" }),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            style: {
+                              fontSize: "12px",
+                              fontFamily: theme.fonts.monospace,
+                              padding: "6px 8px",
+                              background: theme.colors.background,
+                              borderRadius: "3px",
+                              border: `1px solid ${theme.colors.border}`
+                            },
+                            children: Object.entries(scenario.template.details).map(([key, value]) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: "2px" }, children: [
+                              /* @__PURE__ */ jsxs("span", { style: { color: theme.colors.textSecondary }, children: [
+                                key,
+                                ":"
+                              ] }),
+                              " ",
+                              /* @__PURE__ */ jsx("span", { style: { color: theme.colors.text }, children: String(value) })
+                            ] }, key))
+                          }
+                        )
+                      ] }),
+                      (() => {
+                        const matchingExecutions = availableExecutions.filter(
+                          (exec) => executionScenarioMap[exec.id] === scenario.id
+                        );
+                        return matchingExecutions.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              style: {
+                                fontSize: "11px",
+                                color: theme.colors.textSecondary,
+                                marginBottom: "4px",
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "6px"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx(Database, { size: 12 }),
+                                /* @__PURE__ */ jsxs("span", { children: [
+                                  "Execution Files (",
+                                  matchingExecutions.length,
+                                  ")"
+                                ] })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: matchingExecutions.map((exec) => /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              onClick: () => onExecutionSelect == null ? void 0 : onExecutionSelect(exec.id),
+                              style: {
+                                fontSize: "12px",
+                                padding: "6px 8px",
+                                background: theme.colors.background,
+                                border: `1px solid ${theme.colors.border}`,
+                                borderRadius: "3px",
+                                color: theme.colors.textSecondary,
+                                fontFamily: theme.fonts.monospace,
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                                transition: "all 0.2s",
+                                textAlign: "left"
+                              },
+                              onMouseEnter: (e) => {
+                                e.currentTarget.style.background = theme.colors.muted;
+                                e.currentTarget.style.borderColor = theme.colors.accent;
+                              },
+                              onMouseLeave: (e) => {
+                                e.currentTarget.style.background = theme.colors.background;
+                                e.currentTarget.style.borderColor = theme.colors.border;
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx("span", { children: exec.name }),
+                                /* @__PURE__ */ jsx(ChevronRight, { size: 14, style: { color: theme.colors.accent, flexShrink: 0 } })
+                              ]
+                            },
+                            exec.id
+                          )) })
+                        ] }) : null;
+                      })()
+                    ] })
+                  ] })
+                ]
+              },
+              scenario.id || index2
+            );
+          })
         ] })
       ]
     }
   );
 };
-const ExecutionViewerPanel = ({
+const CanvasDetailPanel = ({
   context,
   actions,
-  events
+  events,
+  selectedCanvasId: selectedCanvasIdProp,
+  canvasPath: canvasPathProp,
+  canvasName: canvasNameProp
 }) => {
   var _a, _b;
   const { theme } = useTheme();
@@ -52699,13 +52956,12 @@ const ExecutionViewerPanel = ({
     canvas: null,
     execution: null,
     metadata: null,
-    loading: true,
+    loading: false,
     error: null,
-    availableCanvases: [],
     selectedCanvasId: null,
+    canvasName: null,
     availableExecutions: [],
     selectedExecutionId: null,
-    showCanvasSelector: false,
     showNarrativeSelector: false,
     showExecutionSelector: false,
     showHelpModal: false,
@@ -52726,12 +52982,10 @@ const ExecutionViewerPanel = ({
   contextRef.current = context;
   actionsRef.current = actions;
   eventsRef.current = events;
-  const selectedCanvasIdRef = useRef(null);
-  selectedCanvasIdRef.current = state.selectedCanvasId;
   const playbackTimerRef = useRef(null);
   const eventNodeMapRef = useRef(/* @__PURE__ */ new Map());
-  const loadCanvas = useCallback(async (canvasId) => {
-    setState((prev) => ({ ...prev, loading: prev.canvas === null, error: null }));
+  const loadCanvas = useCallback(async (canvasId, canvasPath) => {
+    setState((prev) => ({ ...prev, loading: true, error: null }));
     try {
       const ctx = contextRef.current;
       const acts = actionsRef.current;
@@ -52751,46 +53005,15 @@ const ExecutionViewerPanel = ({
           metadata: null,
           loading: false,
           error: null,
-          availableCanvases: [],
           selectedCanvasId: null,
+          canvasName: null,
           availableExecutions: [],
           selectedExecutionId: null
         }));
         return;
       }
-      const availableCanvases = await ExecutionLoader.findCanvasFiles(fileTreeData.allFiles);
       const executionFiles = await ExecutionLoader.findExecutionFiles(fileTreeData.allFiles);
       const availableNarratives = NarrativeLoader.findNarrativeFiles(fileTreeData.allFiles);
-      if (availableCanvases.length === 0) {
-        setState((prev) => ({
-          ...prev,
-          canvas: null,
-          execution: null,
-          metadata: null,
-          loading: false,
-          error: null,
-          availableCanvases: [],
-          selectedCanvasId: null,
-          availableExecutions: [],
-          selectedExecutionId: null,
-          narrativeTemplate: null,
-          availableNarratives: []
-        }));
-        return;
-      }
-      let selectedCanvas2;
-      if (canvasId) {
-        const found = availableCanvases.find((c) => c.id === canvasId);
-        if (!found) {
-          throw new Error(`Canvas with ID '${canvasId}' not found`);
-        }
-        selectedCanvas2 = found;
-      } else if (selectedCanvasIdRef.current) {
-        const found = availableCanvases.find((c) => c.id === selectedCanvasIdRef.current);
-        selectedCanvas2 = found || availableCanvases[0];
-      } else {
-        selectedCanvas2 = availableCanvases[0];
-      }
       const readFile = acts.readFile;
       if (!readFile) {
         throw new Error("readFile action not available");
@@ -52799,7 +53022,7 @@ const ExecutionViewerPanel = ({
       if (!repositoryPath) {
         throw new Error("Repository path not available");
       }
-      const fullCanvasPath = `${repositoryPath}/${selectedCanvas2.path}`;
+      const fullCanvasPath = `${repositoryPath}/${canvasPath}`;
       const canvasContent = await readFile(fullCanvasPath);
       if (!canvasContent || typeof canvasContent !== "string") {
         throw new Error("Failed to read canvas file");
@@ -52809,7 +53032,7 @@ const ExecutionViewerPanel = ({
       let narrativeTemplate = null;
       let selectedNarrativeId = null;
       const matchingNarrative = availableNarratives.find(
-        (n) => n.canvasPath === selectedCanvas2.path || n.path.replace(/\.narrative\.json$/, ".otel.canvas") === selectedCanvas2.path
+        (n) => n.canvasPath === canvasPath || n.path.replace(/\.narrative\.json$/, ".otel.canvas") === canvasPath
       );
       const narrativeToLoad = matchingNarrative || (availableNarratives.length > 0 ? availableNarratives[0] : null);
       if (narrativeToLoad) {
@@ -52844,6 +53067,7 @@ const ExecutionViewerPanel = ({
           }
         }
       }
+      const canvasName = canvasId.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
       setState((prev) => ({
         ...prev,
         canvas,
@@ -52851,8 +53075,8 @@ const ExecutionViewerPanel = ({
         metadata: null,
         loading: false,
         error: null,
-        availableCanvases,
-        selectedCanvasId: selectedCanvas2.id,
+        selectedCanvasId: canvasId,
+        canvasName,
         availableExecutions: executionFiles,
         selectedExecutionId: null,
         currentSpanIndex: 0,
@@ -52874,16 +53098,24 @@ const ExecutionViewerPanel = ({
     }
   }, []);
   useEffect(() => {
-    loadCanvas();
-  }, [loadCanvas]);
+    if (selectedCanvasIdProp && canvasPathProp) {
+      console.log("[CanvasDetailPanel] Loading canvas from props:", selectedCanvasIdProp, canvasPathProp);
+      loadCanvas(selectedCanvasIdProp, canvasPathProp);
+      if (canvasNameProp) {
+        setState((prev) => ({ ...prev, canvasName: canvasNameProp }));
+      }
+    }
+  }, [selectedCanvasIdProp, canvasPathProp, canvasNameProp, loadCanvas]);
   useEffect(() => {
+    if (selectedCanvasIdProp && canvasPathProp) {
+      return;
+    }
     if (!events) return;
     const handleEvent = (event) => {
-      var _a2;
-      if (event.type === "custom" && event.action === "selectCanvas") {
-        const canvasId = (_a2 = event.payload) == null ? void 0 : _a2.canvasId;
-        if (canvasId) {
-          loadCanvas(canvasId);
+      if (event.type === "custom") {
+        const payload = event.payload;
+        if ((payload == null ? void 0 : payload.action) === "selectCanvas" && (payload == null ? void 0 : payload.canvasId) && (payload == null ? void 0 : payload.canvas)) {
+          loadCanvas(payload.canvasId, payload.canvas.path);
         }
       }
     };
@@ -52891,7 +53123,7 @@ const ExecutionViewerPanel = ({
     return () => {
       events.off("custom", handleEvent);
     };
-  }, [events, loadCanvas]);
+  }, [events, loadCanvas, selectedCanvasIdProp, canvasPathProp]);
   useCallback(() => {
     setState((prev) => ({ ...prev, isPlaying: !prev.isPlaying }));
   }, []);
@@ -53009,7 +53241,7 @@ const ExecutionViewerPanel = ({
       }
     };
   }, [state.isPlaying, state.execution]);
-  if (!state.loading && state.availableCanvases.length === 0) {
+  if (!state.loading && !state.canvas) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -53023,40 +53255,8 @@ 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 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__/*.otel.json" }),
-            " (or *.spans.json, *.execution.json, *.events.json) or",
-            " ",
-            /* @__PURE__ */ jsx("code", { children: "packages/*/__executions__/" })
-          ] }),
-          /* @__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.otel.json'" }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  "}",
-                  ");"
-                ] })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsx("h2", { style: { margin: "0 0 10px 0", fontSize: "18px", fontWeight: 600 }, children: "No Canvas Selected" }),
+          /* @__PURE__ */ jsx("p", { style: { margin: "0 0 20px 0", color: theme.colors.textSecondary, lineHeight: 1.5 }, children: "Select a canvas from the Canvas List panel to view execution artifacts and narratives." })
         ] })
       }
     );
@@ -53096,9 +53296,6 @@ const ExecutionViewerPanel = ({
       }
     );
   }
-  const selectedCanvas = state.availableCanvases.find(
-    (c) => c.id === state.selectedCanvasId
-  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -53122,91 +53319,7 @@ const ExecutionViewerPanel = ({
               gap: "12px"
             },
             children: [
-              state.availableCanvases.length > 0 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    onClick: () => setState((prev) => ({ ...prev, showCanvasSelector: !prev.showCanvasSelector })),
-                    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: (selectedCanvas == null ? void 0 : selectedCanvas.name) || "Select Canvas" }),
-                      /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
-                    ]
-                  }
-                ),
-                state.showCanvasSelector && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        position: "fixed",
-                        inset: 0,
-                        zIndex: 999
-                      },
-                      onClick: () => setState((prev) => ({ ...prev, showCanvasSelector: 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.availableCanvases.map((canvas) => /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          onClick: () => {
-                            loadCanvas(canvas.id);
-                            setState((prev) => ({ ...prev, showCanvasSelector: false }));
-                          },
-                          style: {
-                            width: "100%",
-                            padding: "10px 16px",
-                            background: canvas.id === state.selectedCanvasId ? "#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: canvas.name })
-                          ]
-                        },
-                        canvas.id
-                      ))
-                    }
-                  )
-                ] })
-              ] }),
+              state.canvasName && /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 600, color: "#fff" }, children: state.canvasName }) }),
               state.availableNarratives.length > 0 && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
                 /* @__PURE__ */ jsxs(
                   "button",
@@ -53225,7 +53338,6 @@ const ExecutionViewerPanel = ({
                       fontSize: "13px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx(FileText, { size: 16 }),
                       /* @__PURE__ */ jsx("span", { children: state.selectedNarrativeId ? ((_a = state.availableNarratives.find((n) => n.id === state.selectedNarrativeId)) == null ? void 0 : _a.name) || "Select Narrative" : "Select Narrative" }),
                       /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
                     ]
@@ -53260,7 +53372,7 @@ const ExecutionViewerPanel = ({
                         boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
                         zIndex: 1e3
                       },
-                      children: state.availableNarratives.map((narrative) => /* @__PURE__ */ jsxs(
+                      children: state.availableNarratives.map((narrative) => /* @__PURE__ */ jsx(
                         "button",
                         {
                           onClick: async () => {
@@ -53297,15 +53409,9 @@ const ExecutionViewerPanel = ({
                             color: "#fff",
                             textAlign: "left",
                             cursor: "pointer",
-                            fontSize: "13px",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "8px"
+                            fontSize: "13px"
                           },
-                          children: [
-                            /* @__PURE__ */ jsx(FileText, { size: 14 }),
-                            /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: narrative.name })
-                          ]
+                          children: narrative.name
                         },
                         narrative.id
                       ))
@@ -53331,7 +53437,6 @@ const ExecutionViewerPanel = ({
                       fontSize: "13px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx(Database, { size: 16 }),
                       /* @__PURE__ */ jsx("span", { children: state.selectedExecutionId ? ((_b = state.availableExecutions.find((e) => e.id === state.selectedExecutionId)) == null ? void 0 : _b.name) || "Select Execution" : `Execution (${state.availableExecutions.length})` }),
                       /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
                     ]
@@ -53398,7 +53503,7 @@ const ExecutionViewerPanel = ({
                             children: "None (show scenario mapping)"
                           }
                         ),
-                        state.availableExecutions.map((execution) => /* @__PURE__ */ jsxs(
+                        state.availableExecutions.map((execution) => /* @__PURE__ */ jsx(
                           "button",
                           {
                             onClick: async () => {
@@ -53440,15 +53545,9 @@ const ExecutionViewerPanel = ({
                               color: "#fff",
                               textAlign: "left",
                               cursor: "pointer",
-                              fontSize: "13px",
-                              display: "flex",
-                              alignItems: "center",
-                              gap: "8px"
+                              fontSize: "13px"
                             },
-                            children: [
-                              /* @__PURE__ */ jsx(Database, { size: 14 }),
-                              /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: execution.name })
-                            ]
+                            children: execution.name
                           },
                           execution.id
                         ))
@@ -53634,7 +53733,7 @@ const ExecutionViewerPanel = ({
               },
               children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
                 /* @__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("p", { style: { fontSize: "12px", marginTop: "8px" }, children: state.canvasName || "No canvas selected" })
               ] })
             }
           )
@@ -53703,6 +53802,445 @@ const ExecutionViewerPanel = ({
     }
   );
 };
+const EMPTY_CANVAS_ARRAY = [];
+const useCanvasData = ({
+  context
+}) => {
+  const [canvases, setCanvases] = useState(EMPTY_CANVAS_ARRAY);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fileTreeSlice = context.getSlice("fileTree");
+  const fileTreeData = fileTreeSlice == null ? void 0 : fileTreeSlice.data;
+  const fileTreeSha = fileTreeData == null ? void 0 : fileTreeData.sha;
+  const lastLoadedSha = useRef(void 0);
+  const loadCanvases = useCallback(async () => {
+    if (fileTreeSha === lastLoadedSha.current) {
+      console.log("[useCanvasData] Skipping reload - data unchanged (SHA:", fileTreeSha, ")");
+      return;
+    }
+    console.log("[useCanvasData] Loading canvases - SHA changed:", fileTreeSha !== lastLoadedSha.current);
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (!(fileTreeData == null ? void 0 : fileTreeData.allFiles)) {
+        setCanvases(EMPTY_CANVAS_ARRAY);
+        lastLoadedSha.current = fileTreeSha;
+        return;
+      }
+      const foundCanvases = ExecutionLoader.findCanvasFiles(fileTreeData.allFiles);
+      console.log("[useCanvasData] Found canvases:", foundCanvases.length);
+      setCanvases(foundCanvases);
+      lastLoadedSha.current = fileTreeSha;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to load canvases";
+      setError(errorMessage);
+      console.error("Error loading canvases:", err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fileTreeData, fileTreeSha]);
+  const refreshCanvases = useCallback(async () => {
+    lastLoadedSha.current = void 0;
+    await loadCanvases();
+  }, [loadCanvases]);
+  useEffect(() => {
+    loadCanvases();
+  }, [loadCanvases]);
+  return {
+    canvases,
+    isLoading,
+    error,
+    refreshCanvases
+  };
+};
+const CanvasCard = ({
+  canvas,
+  onClick,
+  isSelected = false
+}) => {
+  const { theme } = useTheme();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: () => onClick(canvas),
+      style: {
+        padding: "16px",
+        background: isSelected ? `${theme.colors.primary}15` : theme.colors.backgroundSecondary,
+        border: `1px solid ${isSelected ? theme.colors.primary : theme.colors.border}`,
+        borderRadius: theme.radii[2],
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+        boxSizing: "border-box"
+      },
+      onMouseEnter: (e) => {
+        if (!isSelected) {
+          e.currentTarget.style.borderColor = theme.colors.primary;
+          e.currentTarget.style.background = `${theme.colors.backgroundSecondary}cc`;
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!isSelected) {
+          e.currentTarget.style.borderColor = theme.colors.border;
+          e.currentTarget.style.background = theme.colors.backgroundSecondary;
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(
+          "h3",
+          {
+            style: {
+              margin: 0,
+              fontSize: theme.fontSizes[2],
+              color: isSelected ? theme.colors.primary : theme.colors.text,
+              fontWeight: 600,
+              flex: 1
+            },
+            children: canvas.name
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+          /* @__PURE__ */ jsx(Folder, { size: 14, color: theme.colors.textSecondary }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                fontSize: theme.fontSizes[0],
+                color: theme.colors.textSecondary,
+                fontFamily: "monospace"
+              },
+              children: canvas.source === "folder" ? ".principal-views" : "standalone"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: theme.fontSizes[0],
+              color: theme.colors.textSecondary,
+              fontFamily: "monospace",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            },
+            title: canvas.path,
+            children: canvas.path
+          }
+        )
+      ]
+    }
+  );
+};
+const CanvasListPanel = ({
+  context,
+  events
+}) => {
+  const { theme } = useTheme();
+  const panelRef = useRef(null);
+  const [selectedCanvasId, setSelectedCanvasId] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const { canvases, isLoading, error, refreshCanvases } = useCanvasData({ context });
+  const filteredCanvases = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return canvases;
+    }
+    const query = searchQuery.toLowerCase().trim();
+    return canvases.filter((canvas) => {
+      if (canvas.name.toLowerCase().includes(query)) return true;
+      if (canvas.path.toLowerCase().includes(query)) return true;
+      if (canvas.basename.toLowerCase().includes(query)) return true;
+      return false;
+    });
+  }, [canvases, searchQuery]);
+  const handleCanvasClick = (canvas) => {
+    setSelectedCanvasId(canvas.id);
+    if (events) {
+      events.emit({
+        type: "custom",
+        source: "canvas-list-panel",
+        timestamp: Date.now(),
+        payload: { action: "selectCanvas", canvasId: canvas.id, canvas }
+      });
+    }
+  };
+  const handleRefresh = async () => {
+    setIsRefreshing(true);
+    if (events) {
+      events.emit({
+        type: "custom",
+        source: "canvas-list-panel",
+        timestamp: Date.now(),
+        payload: { action: "refreshCanvases" }
+      });
+    }
+    try {
+      await refreshCanvases();
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: panelRef,
+      tabIndex: -1,
+      style: {
+        padding: "clamp(12px, 3vw, 20px)",
+        fontFamily: theme.fonts.body,
+        height: "100%",
+        boxSizing: "border-box",
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px",
+        overflow: "hidden",
+        backgroundColor: theme.colors.background,
+        color: theme.colors.text,
+        outline: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "12px",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    style: {
+                      margin: 0,
+                      fontSize: theme.fontSizes[4],
+                      color: theme.colors.text
+                    },
+                    children: "Canvas Files"
+                  }
+                ),
+                !isLoading && /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: theme.fontSizes[1],
+                      color: theme.colors.textSecondary,
+                      background: theme.colors.backgroundSecondary,
+                      padding: "4px 10px",
+                      borderRadius: theme.radii[1]
+                    },
+                    children: [
+                      filteredCanvases.length,
+                      " ",
+                      filteredCanvases.length === 1 ? "canvas" : "canvases"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px", flex: "1 1 200px", maxWidth: "400px" }, children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    style: {
+                      position: "relative",
+                      flex: 1,
+                      minWidth: "150px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        Search,
+                        {
+                          size: 16,
+                          color: theme.colors.textSecondary,
+                          style: {
+                            position: "absolute",
+                            left: "10px",
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            pointerEvents: "none"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "text",
+                          placeholder: "Search canvases...",
+                          value: searchQuery,
+                          onChange: (e) => setSearchQuery(e.target.value),
+                          style: {
+                            width: "100%",
+                            padding: "8px 32px 8px 32px",
+                            fontSize: theme.fontSizes[1],
+                            fontFamily: theme.fonts.body,
+                            border: `1px solid ${theme.colors.border}`,
+                            borderRadius: theme.radii[2],
+                            background: theme.colors.backgroundSecondary,
+                            color: theme.colors.text,
+                            outline: "none",
+                            boxSizing: "border-box"
+                          }
+                        }
+                      ),
+                      searchQuery && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => setSearchQuery(""),
+                          style: {
+                            position: "absolute",
+                            right: "6px",
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            background: "transparent",
+                            border: "none",
+                            padding: "4px",
+                            cursor: "pointer",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            color: theme.colors.textSecondary
+                          },
+                          "aria-label": "Clear search",
+                          children: /* @__PURE__ */ jsx(X, { size: 14 })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: handleRefresh,
+                    disabled: isRefreshing || isLoading,
+                    style: {
+                      background: theme.colors.backgroundSecondary,
+                      border: `1px solid ${theme.colors.border}`,
+                      borderRadius: theme.radii[1],
+                      padding: "8px",
+                      cursor: isRefreshing ? "wait" : "pointer",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      transition: "all 0.2s ease"
+                    },
+                    title: "Refresh canvases",
+                    children: /* @__PURE__ */ jsx(
+                      RefreshCw,
+                      {
+                        size: 16,
+                        color: theme.colors.textSecondary,
+                        style: {
+                          animation: isRefreshing ? "spin 1s linear infinite" : "none"
+                        }
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              padding: "12px",
+              background: `${theme.colors.error}20`,
+              border: `1px solid ${theme.colors.error}`,
+              borderRadius: theme.radii[2],
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              color: theme.colors.error,
+              fontSize: theme.fontSizes[1]
+            },
+            children: [
+              /* @__PURE__ */ jsx(CircleAlert, { size: 16 }),
+              /* @__PURE__ */ jsx("span", { children: error })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              minHeight: 0
+            },
+            children: isLoading ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: theme.colors.textSecondary,
+                  fontSize: theme.fontSizes[2]
+                },
+                children: "Loading canvases..."
+              }
+            ) : filteredCanvases.length === 0 ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  height: "100%",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: "16px",
+                  color: theme.colors.textSecondary,
+                  padding: "24px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Activity, { size: 48, color: theme.colors.border }),
+                  /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
+                    /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: theme.fontSizes[2] }, children: searchQuery ? "No canvases match your search" : "No canvas files found" }),
+                    /* @__PURE__ */ jsx("p", { style: { margin: "8px 0 0 0", fontSize: theme.fontSizes[1] }, children: searchQuery ? "Try a different search term" : "Add .otel.canvas files to .principal-views/ to get started" })
+                  ] })
+                ]
+              }
+            ) : /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "grid",
+                  gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
+                  gap: "16px",
+                  padding: "4px"
+                },
+                children: filteredCanvases.map((canvas) => /* @__PURE__ */ jsx(
+                  CanvasCard,
+                  {
+                    canvas,
+                    onClick: handleCanvasClick,
+                    isSelected: selectedCanvasId === canvas.id
+                  },
+                  canvas.id
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("style", { children: `
+          @keyframes spin {
+            to { transform: rotate(360deg); }
+          }
+        ` })
+      ]
+    }
+  );
+};
 const focusNodeTool = {
   name: "focus_node",
   description: "Focuses the graph view on a specific node",
@@ -54451,23 +54989,23 @@ class PanelFileSystemAdapter {
 const panels = [
   {
     metadata: {
-      id: "principal-ai.principal-view-graph",
-      name: "Principal View Graph",
-      icon: "🕸️",
+      id: "principal-ai.canvas-editor",
+      name: "Canvas Editor",
+      icon: "🎨",
       version: "0.1.0",
       author: "Principal AI",
-      description: "Visualizes .canvas configuration files as interactive graph diagrams",
+      description: "Edits .canvas configuration files as interactive graph diagrams",
       slices: ["fileTree"],
       // Data slices this panel depends on
       // UTCP-compatible tools this panel exposes
       tools: principalViewPanelTools
     },
-    component: PrincipalViewGraphPanel,
+    component: CanvasEditorPanel,
     // Optional: Called when this specific panel is mounted
     onMount: async (context) => {
       var _a;
       console.log(
-        "Principal View Graph Panel mounted",
+        "Canvas Editor Panel mounted",
         (_a = context.currentScope.repository) == null ? void 0 : _a.path
       );
       if (context.hasSlice("fileTree") && !context.isSliceLoading("fileTree")) {
@@ -54476,7 +55014,7 @@ const panels = [
     },
     // Optional: Called when this specific panel is unmounted
     onUnmount: async (_context) => {
-      console.log("Principal View Graph Panel unmounting");
+      console.log("Canvas Editor Panel unmounting");
     }
   },
   {
@@ -54506,19 +55044,44 @@ const panels = [
   },
   {
     metadata: {
-      id: "principal-ai.execution-viewer",
-      name: "Execution Viewer",
+      id: "principal-ai.canvas-detail",
+      name: "Canvas Detail",
       icon: "⚡",
       version: "0.1.0",
       author: "Principal AI",
-      description: "Visualizes execution artifacts (test runs) overlaid on canvas diagrams with playback controls",
+      description: "Visualizes canvas details with execution artifacts, narrative templates, and playback controls",
+      slices: ["fileTree"]
+    },
+    component: CanvasDetailPanel,
+    onMount: async (context) => {
+      var _a;
+      console.log(
+        "Canvas Detail 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("Canvas Detail Panel unmounting");
+    }
+  },
+  {
+    metadata: {
+      id: "principal-ai.canvas-list",
+      name: "Canvas List",
+      icon: "📋",
+      version: "0.1.0",
+      author: "Principal AI",
+      description: "Lists and manages .otel.canvas files in the project with search and selection",
       slices: ["fileTree"]
     },
-    component: ExecutionViewerPanel,
+    component: CanvasListPanel,
     onMount: async (context) => {
       var _a;
       console.log(
-        "Execution Viewer Panel mounted",
+        "Canvas List Panel mounted",
         (_a = context.currentScope.repository) == null ? void 0 : _a.path
       );
       if (context.hasSlice("fileTree") && !context.isSliceLoading("fileTree")) {
@@ -54526,19 +55089,21 @@ const panels = [
       }
     },
     onUnmount: async (_context) => {
-      console.log("Execution Viewer Panel unmounting");
+      console.log("Canvas List Panel unmounting");
     }
   }
 ];
 const onPackageLoad = async () => {
-  console.log("Panel package loaded - Principal View Graph Panel");
+  console.log("Panel package loaded - Principal View Panels");
 };
 const onPackageUnload = async () => {
-  console.log("Panel package unloading - Principal View Graph Panel");
+  console.log("Panel package unloading - Principal View Panels");
 };
 export {
+  CanvasDetailPanel,
+  CanvasEditorPanel,
+  CanvasListPanel,
   EventControllerPanel,
-  ExecutionViewerPanel,
   PanelFileSystemAdapter,
   TraceViewerPanel,
   focusNodeTool,