@industry-theme/principal-view-panels 0.12.81 → 0.12.82

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

@@ -1 +1 @@
-{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AA2K9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA4hDvE,CAAC"}
+{"version":3,"file":"StoryboardListPanel.d.ts","sourceRoot":"","sources":["../../src/panels/StoryboardListPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAEjF,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,UAAU,CAAC;AA2K9D;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAivDvE,CAAC"}

package/dist/panels/canvas-list/hooks/useCanvasData.d.ts

@@ -1,5 +1,5 @@
 import type { PanelActions, DataSlice } from '@principal-ade/panel-framework-core';
-import { CanvasDiscovery, type DiscoveredCanvas, type DiscoveredStoryboard, type DiscoveredTestTrace } from '@principal-ai/principal-view-core';
+import { CanvasDiscovery, type DiscoveredCanvas, type DiscoveredStoryboard, type DiscoveredTestTrace, type DiscoveredDashboard } from '@principal-ai/principal-view-core';
 import type { FileTree } from '@principal-ai/repository-abstraction';
 interface UseCanvasDataContext {
     fileTree: DataSlice<FileTree | null>;
@@ -12,6 +12,7 @@ interface UseCanvasDataReturn {
     canvases: DiscoveredCanvas[];
     storyboards: DiscoveredStoryboard[];
     testTraces: DiscoveredTestTrace[];
+    dashboards: DiscoveredDashboard[];
     isLoading: boolean;
     error: string | null;
     refreshCanvases: () => Promise<void>;

package/dist/panels/canvas-list/hooks/useCanvasData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCanvasData.d.ts","sourceRoot":"","sources":["../../../../src/panels/canvas-list/hooks/useCanvasData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AACnF,OAAO,EACL,eAAe,EACf,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACzB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAErE,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;CACtC;AAED,UAAU,mBAAmB;IAC3B,OAAO,EAAE,oBAAoB,CAAC;IAC9B,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,WAAW,EAAE,oBAAoB,EAAE,CAAC;IACpC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,oEAAoE;IACpE,SAAS,EAAE,eAAe,CAAC;CAC5B;AAOD;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,uBAG3B,mBAAmB,KAAG,mBAmGxB,CAAC"}
+{"version":3,"file":"useCanvasData.d.ts","sourceRoot":"","sources":["../../../../src/panels/canvas-list/hooks/useCanvasData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AACnF,OAAO,EACL,eAAe,EACf,KAAK,gBAAgB,EACrB,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAErE,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;CACtC;AAED,UAAU,mBAAmB;IAC3B,OAAO,EAAE,oBAAoB,CAAC;IAC9B,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,WAAW,EAAE,oBAAoB,EAAE,CAAC;IACpC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,eAAe,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,oEAAoE;IACpE,SAAS,EAAE,eAAe,CAAC;CAC5B;AAQD;;;GAGG;AACH,eAAO,MAAM,aAAa,GAAI,uBAG3B,mBAAmB,KAAG,mBAsGxB,CAAC"}

package/dist/panels/canvas-list/hooks/useCanvasWorkflowData.d.ts

@@ -1,5 +1,5 @@
 import type { PanelActions, DataSlice } from '@principal-ade/panel-framework-core';
-import type { DiscoveredCanvas, DiscoveredStoryboard, DiscoveredTestTrace, DiscoveredWorkflow, WorkflowTemplate } from '@principal-ai/principal-view-core';
+import type { DiscoveredCanvas, DiscoveredStoryboard, DiscoveredTestTrace, DiscoveredDashboard, DiscoveredWorkflow, WorkflowTemplate } from '@principal-ai/principal-view-core';
 import type { FileTree } from '@principal-ai/repository-abstraction';
 interface UseCanvasWorkflowDataContext {
     fileTree: DataSlice<FileTree | null>;
@@ -12,6 +12,7 @@ interface UseCanvasNarrativeDataReturn {
     canvases: DiscoveredCanvas[];
     storyboards: DiscoveredStoryboard[];
     testTraces: DiscoveredTestTrace[];
+    dashboards: DiscoveredDashboard[];
     workflows: Array<{
         file: DiscoveredWorkflow;
         template: WorkflowTemplate;

package/dist/panels/canvas-list/hooks/useCanvasWorkflowData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCanvasWorkflowData.d.ts","sourceRoot":"","sources":["../../../../src/panels/canvas-list/hooks/useCanvasWorkflowData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AACnF,OAAO,KAAK,EACV,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAGrE,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;CACtC;AAED,UAAU,4BAA4B;IACpC,OAAO,EAAE,4BAA4B,CAAC;IACtC,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,UAAU,4BAA4B;IACpC,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,WAAW,EAAE,oBAAoB,EAAE,CAAC;IACpC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,SAAS,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,kBAAkB,CAAC;QAAC,QAAQ,EAAE,gBAAgB,CAAA;KAAE,CAAC,CAAC;IAC3E,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,oEAAoE;IACpE,SAAS,EAAE,OAAO,mCAAmC,EAAE,eAAe,CAAC;CACxE;AAKD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAAI,uBAGnC,4BAA4B,KAAG,4BAgIjC,CAAC"}
+{"version":3,"file":"useCanvasWorkflowData.d.ts","sourceRoot":"","sources":["../../../../src/panels/canvas-list/hooks/useCanvasWorkflowData.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AACnF,OAAO,KAAK,EACV,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAGrE,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC;CACtC;AAED,UAAU,4BAA4B;IACpC,OAAO,EAAE,4BAA4B,CAAC;IACtC,OAAO,EAAE,YAAY,CAAC;CACvB;AAED,UAAU,4BAA4B;IACpC,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,WAAW,EAAE,oBAAoB,EAAE,CAAC;IACpC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,SAAS,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,kBAAkB,CAAC;QAAC,QAAQ,EAAE,gBAAgB,CAAA;KAAE,CAAC,CAAC;IAC3E,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,oEAAoE;IACpE,SAAS,EAAE,OAAO,mCAAmC,EAAE,eAAe,CAAC;CACxE;AAKD;;;GAGG;AACH,eAAO,MAAM,qBAAqB,GAAI,uBAGnC,4BAA4B,KAAG,4BAkIjC,CAAC"}

package/dist/panels.bundle.js

@@ -195390,6 +195390,7 @@ function gt(o, e, t, r2) {
 const EMPTY_CANVAS_ARRAY = [];
 const EMPTY_STORYBOARDS_ARRAY = [];
 const EMPTY_TEST_TRACES_ARRAY = [];
+const EMPTY_DASHBOARDS_ARRAY = [];
 const useCanvasData = ({
   context: context2,
   actions
@@ -195397,6 +195398,7 @@ const useCanvasData = ({
   const [canvases, setCanvases] = useState(EMPTY_CANVAS_ARRAY);
   const [storyboards, setStoryboards] = useState(EMPTY_STORYBOARDS_ARRAY);
   const [testTraces, setTestTraces] = useState(EMPTY_TEST_TRACES_ARRAY);
+  const [dashboards, setDashboards] = useState(EMPTY_DASHBOARDS_ARRAY);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const fileTreeSlice = context2.fileTree;
@@ -195439,6 +195441,7 @@ const useCanvasData = ({
       setCanvases(sortedCanvases);
       setStoryboards(result.storyboards);
       setTestTraces(result.testTraces);
+      setDashboards(result.dashboards);
       lastLoadedSha.current = fileTreeSha;
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to load canvases";
@@ -195460,6 +195463,7 @@ const useCanvasData = ({
     canvases,
     storyboards,
     testTraces,
+    dashboards,
     isLoading,
     error,
     refreshCanvases,
@@ -195475,6 +195479,7 @@ const useCanvasWorkflowData = ({
     canvases,
     storyboards,
     testTraces,
+    dashboards,
     isLoading: canvasesLoading,
     error: canvasesError,
     refreshCanvases,
@@ -195559,6 +195564,7 @@ const useCanvasWorkflowData = ({
     canvases,
     storyboards,
     testTraces,
+    dashboards,
     workflows,
     isLoading,
     error,
@@ -195968,7 +195974,7 @@ const StoryboardListPanel = ({
   actions,
   events
 }) => {
-  var _a2;
+  var _a2, _b2;
   const { theme: theme2 } = useTheme();
   const panelRef = useRef(null);
   gt("storyboard-list", events, () => {
@@ -196017,10 +196023,13 @@ const StoryboardListPanel = ({
   const [spanConventionFilter, setSpanConventionFilter] = useState(null);
   const [showSpanFilterDropdown, setShowSpanFilterDropdown] = useState(false);
   const spanFilterRef = useRef(null);
+  const [scopeFilter, setScopeFilter] = useState(null);
+  const [showScopeFilterDropdown, setShowScopeFilterDropdown] = useState(false);
+  const scopeFilterRef = useRef(null);
   const [contextMenu, setContextMenu] = useState(null);
   const [contextMenuCopied, setContextMenuCopied] = useState(false);
   const contextMenuRef = useRef(null);
-  const { storyboards, workflows, testTraces, isLoading, error, discovery } = useCanvasWorkflowData({ context: context2, actions });
+  const { storyboards, workflows, testTraces, dashboards, isLoading, error, discovery } = useCanvasWorkflowData({ context: context2, actions });
   useEffect(() => {
     if (!events) return;
     const handleSelectNode = (event) => {
@@ -196088,6 +196097,22 @@ const StoryboardListPanel = ({
     const regular = storyboards.filter((sb) => architectureTypes.includes(sb.canvas.type)).length;
     return { otelCount: otel, staticCount: regular };
   }, [storyboards]);
+  const uniqueScopes = useMemo(() => {
+    const scopeMap = /* @__PURE__ */ new Map();
+    for (const storyboard of storyboards) {
+      if (storyboard.canvas.type !== "otel") continue;
+      for (const workflow of storyboard.workflows) {
+        const workflowWithScope = workflow;
+        const scope = workflowWithScope.instrumentationScope;
+        if (scope) {
+          if (!scopeMap.has(scope) || workflowWithScope.instrumentationScopeLabel) {
+            scopeMap.set(scope, workflowWithScope.instrumentationScopeLabel);
+          }
+        }
+      }
+    }
+    return Array.from(scopeMap.entries()).map(([scope, label]) => ({ scope, label })).sort((a, b) => (a.label || a.scope).localeCompare(b.label || b.scope));
+  }, [storyboards]);
   const uniqueSpanConventions = useMemo(() => {
     const spanMap = /* @__PURE__ */ new Map();
     for (const storyboard of storyboards) {
@@ -196096,15 +196121,19 @@ const StoryboardListPanel = ({
         const referencedSpans = workflow.referencedSpans;
         if (referencedSpans) {
           for (const span of referencedSpans) {
-            if (!spanMap.has(span.pattern) || span.label) {
-              spanMap.set(span.pattern, span.label);
+            const existing = spanMap.get(span.pattern);
+            if (!existing || span.label || span.scope) {
+              spanMap.set(span.pattern, {
+                label: span.label || (existing == null ? void 0 : existing.label),
+                scope: span.scope || (existing == null ? void 0 : existing.scope)
+              });
             }
           }
         }
       }
     }
-    return Array.from(spanMap.entries()).map(([pattern, label]) => ({ pattern, label })).sort((a, b) => (a.label || a.pattern).localeCompare(b.label || b.pattern));
-  }, [storyboards]);
+    return Array.from(spanMap.entries()).map(([pattern, info]) => ({ pattern, label: info.label, scope: info.scope })).filter((span) => !scopeFilter || span.scope === scopeFilter).sort((a, b) => (a.label || a.pattern).localeCompare(b.label || b.pattern));
+  }, [storyboards, scopeFilter]);
   const telemetry = useStoryboardListPanelTelemetry({
     isLoading,
     error,
@@ -196237,6 +196266,14 @@ const StoryboardListPanel = ({
       }
       return storyboard.canvas.type === effectiveCanvasTypeFilter;
     });
+    if (scopeFilter && effectiveCanvasTypeFilter === "otel") {
+      filtered = filtered.filter((storyboard) => {
+        return storyboard.workflows.some((workflow) => {
+          const workflowWithScope = workflow;
+          return workflowWithScope.instrumentationScope === scopeFilter;
+        });
+      });
+    }
     if (spanConventionFilter && effectiveCanvasTypeFilter === "otel") {
       filtered = filtered.filter((storyboard) => {
         return storyboard.workflows.some((workflow) => {
@@ -196258,17 +196295,17 @@ const StoryboardListPanel = ({
       });
     }
     return filtered;
-  }, [storyboards, searchQuery, effectiveCanvasTypeFilter, spanConventionFilter]);
+  }, [storyboards, searchQuery, effectiveCanvasTypeFilter, scopeFilter, spanConventionFilter]);
   const filteredCanvases = useMemo(() => {
     return filteredStoryboards.map((storyboard) => storyboard.canvas);
   }, [filteredStoryboards]);
   const handleTreeNodeClick = useCallback((node2, event) => {
-    var _a3, _b2, _c, _d, _e4, _f, _g;
+    var _a3, _b3, _c, _d, _e4, _f, _g;
     if ((event == null ? void 0 : event.metaKey) || (event == null ? void 0 : event.ctrlKey)) {
       let filePath;
       if (node2.type === "canvas" && ((_a3 = node2.canvas) == null ? void 0 : _a3.path)) {
         filePath = node2.canvas.path;
-      } else if (node2.type === "workflow" && "workflow" in node2 && ((_b2 = node2.workflow) == null ? void 0 : _b2.path)) {
+      } else if (node2.type === "workflow" && "workflow" in node2 && ((_b3 = node2.workflow) == null ? void 0 : _b3.path)) {
         filePath = node2.workflow.path;
       } else if (node2.markdownPath) {
         filePath = node2.markdownPath;
@@ -196358,10 +196395,10 @@ const StoryboardListPanel = ({
     }
   }, [events, getCanvasFileInfo, workflows, telemetry]);
   const getNodeFilePath = useCallback((node2) => {
-    var _a3, _b2, _c, _d, _e4;
+    var _a3, _b3, _c, _d, _e4;
     if (node2.type === "canvas" && ((_a3 = node2.canvas) == null ? void 0 : _a3.path)) {
       return node2.canvas.path;
-    } else if (node2.type === "workflow" && "workflow" in node2 && ((_b2 = node2.workflow) == null ? void 0 : _b2.path)) {
+    } else if (node2.type === "workflow" && "workflow" in node2 && ((_b3 = node2.workflow) == null ? void 0 : _b3.path)) {
       return node2.workflow.path;
     } else if (node2.type === "overview" && node2.markdownPath) {
       return node2.markdownPath;
@@ -196434,6 +196471,23 @@ const StoryboardListPanel = ({
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [showSpanFilterDropdown]);
+  useEffect(() => {
+    if (!showScopeFilterDropdown) return;
+    const handleClickOutside = (e) => {
+      if (scopeFilterRef.current && !scopeFilterRef.current.contains(e.target)) {
+        setShowScopeFilterDropdown(false);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setShowScopeFilterDropdown(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [showScopeFilterDropdown]);
   useEffect(() => {
     handleTreeNodeClickRef.current = handleTreeNodeClick;
   }, [handleTreeNodeClick]);
@@ -196703,6 +196757,145 @@ const StoryboardListPanel = ({
                   }
                 )
               ] }),
+              effectiveCanvasTypeFilter === "otel" && uniqueScopes.length > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  ref: scopeFilterRef,
+                  style: { position: "relative" },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        onClick: () => setShowScopeFilterDropdown(!showScopeFilterDropdown),
+                        style: {
+                          width: "100%",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          gap: "8px",
+                          padding: "8px 12px",
+                          background: scopeFilter ? theme2.colors.primary : theme2.colors.backgroundSecondary,
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: theme2.radii[2],
+                          cursor: "pointer",
+                          fontSize: theme2.fontSizes[1],
+                          fontFamily: theme2.fonts.body,
+                          color: scopeFilter ? theme2.colors.textOnPrimary : theme2.colors.text,
+                          transition: "all 0.2s ease"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                            /* @__PURE__ */ jsx(Layers, { size: 14 }),
+                            /* @__PURE__ */ jsx("span", { children: scopeFilter ? `Scope: ${((_a2 = uniqueScopes.find((s2) => s2.scope === scopeFilter)) == null ? void 0 : _a2.label) || scopeFilter}` : "Filter by Scope" })
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                            scopeFilter && /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  setScopeFilter(null);
+                                  setSpanConventionFilter(null);
+                                },
+                                style: {
+                                  display: "flex",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  padding: "2px",
+                                  background: "transparent",
+                                  border: "none",
+                                  cursor: "pointer",
+                                  borderRadius: "4px"
+                                },
+                                title: "Clear filter",
+                                children: /* @__PURE__ */ jsx(X$2, { size: 14, color: scopeFilter ? theme2.colors.textOnPrimary : theme2.colors.textSecondary })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              ChevronDown,
+                              {
+                                size: 14,
+                                style: {
+                                  transform: showScopeFilterDropdown ? "rotate(180deg)" : "none",
+                                  transition: "transform 0.2s ease"
+                                }
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ),
+                    showScopeFilterDropdown && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          top: "100%",
+                          left: 0,
+                          right: 0,
+                          marginTop: "4px",
+                          background: theme2.colors.background,
+                          border: `1px solid ${theme2.colors.border}`,
+                          borderRadius: theme2.radii[2],
+                          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+                          zIndex: 100,
+                          maxHeight: "200px",
+                          overflowY: "auto"
+                        },
+                        children: uniqueScopes.map((scopeInfo) => /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            onClick: () => {
+                              const newScope = scopeInfo.scope === scopeFilter ? null : scopeInfo.scope;
+                              setScopeFilter(newScope);
+                              if (newScope !== scopeFilter) {
+                                setSpanConventionFilter(null);
+                              }
+                              setShowScopeFilterDropdown(false);
+                            },
+                            style: {
+                              width: "100%",
+                              display: "flex",
+                              flexDirection: "column",
+                              alignItems: "flex-start",
+                              gap: "2px",
+                              padding: "8px 12px",
+                              background: scopeInfo.scope === scopeFilter ? theme2.colors.backgroundTertiary : "transparent",
+                              border: "none",
+                              cursor: "pointer",
+                              textAlign: "left",
+                              transition: "background 0.15s ease"
+                            },
+                            onMouseEnter: (e) => {
+                              if (scopeInfo.scope !== scopeFilter) {
+                                e.currentTarget.style.background = theme2.colors.backgroundSecondary;
+                              }
+                            },
+                            onMouseLeave: (e) => {
+                              if (scopeInfo.scope !== scopeFilter) {
+                                e.currentTarget.style.background = "transparent";
+                              }
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx("span", { style: {
+                                fontSize: theme2.fontSizes[1],
+                                fontFamily: theme2.fonts.body,
+                                color: theme2.colors.text
+                              }, children: scopeInfo.label || scopeInfo.scope }),
+                              scopeInfo.label && /* @__PURE__ */ jsx("span", { style: {
+                                fontSize: theme2.fontSizes[0],
+                                fontFamily: theme2.fonts.monospace,
+                                color: theme2.colors.textMuted
+                              }, children: scopeInfo.scope })
+                            ]
+                          },
+                          scopeInfo.scope
+                        ))
+                      }
+                    )
+                  ]
+                }
+              ),
               effectiveCanvasTypeFilter === "otel" && uniqueSpanConventions.length > 0 && /* @__PURE__ */ jsxs(
                 "div",
                 {
@@ -196732,7 +196925,7 @@ const StoryboardListPanel = ({
                         children: [
                           /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
                             /* @__PURE__ */ jsx(Funnel, { size: 14 }),
-                            /* @__PURE__ */ jsx("span", { children: spanConventionFilter ? `Surface: ${((_a2 = uniqueSpanConventions.find((s2) => s2.pattern === spanConventionFilter)) == null ? void 0 : _a2.label) || spanConventionFilter}` : "Filter by Surface" })
+                            /* @__PURE__ */ jsx("span", { children: spanConventionFilter ? `Surface: ${((_b2 = uniqueSpanConventions.find((s2) => s2.pattern === spanConventionFilter)) == null ? void 0 : _b2.label) || spanConventionFilter}` : "Filter by Surface" })
                           ] }),
                           /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
                             spanConventionFilter && /* @__PURE__ */ jsx(
@@ -197089,6 +197282,7 @@ const StoryboardListPanel = ({
               CanvasListTreeCore,
               {
                 canvases: filteredCanvases,
+                dashboards,
                 theme: theme2,
                 onClick: handleTreeNodeClick,
                 onContextMenu: handleContextMenu,