@principal-ade/dynamic-file-tree 0.2.1 → 0.2.3

package/dist/index.d.ts

@@ -19,8 +19,10 @@ export type { GitStatusFileTreeContainerProps } from './src/components/GitStatus
 export { MultiFileTree, MultiFileTreeCore } from './src/components/MultiFileTree';
 export type { MultiFileTreeProps, MultiFileTreeCoreProps } from './src/components/MultiFileTree';
 export { StoryboardWorkflowsTreeCore } from './src/components/StoryboardWorkflowsTree/StoryboardWorkflowsTreeCore';
-export type { StoryboardWorkflowsTreeProps, StoryboardWorkflowNodeData, StoryboardWorkflowNodeType, StoryboardFilterMode, DiscoveredStoryboard, DiscoveredWorkflow, DiscoveredWorkflowWithContent, } from './src/components/StoryboardWorkflowsTree/types';
+export type { StoryboardWorkflowsTreeProps, StoryboardWorkflowNodeData, StoryboardWorkflowNodeType, StoryboardFilterMode, DiscoveredStoryboard, DiscoveredWorkflow, DiscoveredWorkflowWithContent, WorkflowScenarioStatus, CanvasNodeStatus, StatusBarDisplay, } from './src/components/StoryboardWorkflowsTree/types';
 export { hasWorkflowContent } from './src/components/StoryboardWorkflowsTree/types';
+export { StatusBar } from './src/components/StoryboardWorkflowsTree/StatusBar';
+export type { StatusBarProps, StatusBarSegment } from './src/components/StoryboardWorkflowsTree/StatusBar';
 export { WorkflowScenarioTreeCore } from './src/components/WorkflowScenarioTree';
 export type { WorkflowScenarioTreeProps, WorkflowScenarioNodeData, WorkflowScenarioNodeType, WorkflowWithScenarios, WorkflowFilterMode, } from './src/components/WorkflowScenarioTree';
 export { CanvasListTreeCore } from './src/components/CanvasListTree/CanvasListTreeCore';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAG7E,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,YAAY,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC;AAGxG,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAGzF,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,YAAY,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAG7E,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,YAAY,EAAE,oBAAoB,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAGhG,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,YAAY,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAGnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,YAAY,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAGjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,YAAY,EACV,sBAAsB,EACvB,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,0BAA0B,EAAE,MAAM,6CAA6C,CAAC;AACzF,YAAY,EAAE,+BAA+B,EAAE,MAAM,6CAA6C,CAAC;AAGnG,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAClF,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAGjG,OAAO,EAAE,2BAA2B,EAAE,MAAM,sEAAsE,CAAC;AACnH,YAAY,EACV,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,EAC1B,oBAAoB,EACpB,oBAAoB,EACpB,kBAAkB,EAClB,6BAA6B,GAC9B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAGpF,OAAO,EAAE,wBAAwB,EAAE,MAAM,uCAAuC,CAAC;AACjF,YAAY,EACV,yBAAyB,EACzB,wBAAwB,EACxB,wBAAwB,EACxB,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,uCAAuC,CAAC;AAG/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,uCAAuC,CAAC;AAG/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,YAAY,EACV,mBAAmB,EACnB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,iCAAiC,CAAC;AAGzC,OAAO,EACL,yBAAyB,EACzB,+BAA+B,GAChC,MAAM,4CAA4C,CAAC;AACpD,YAAY,EACV,8BAA8B,EAC9B,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAAE,kCAAkC,EAAE,MAAM,qDAAqD,CAAC;AACzG,YAAY,EAAE,uCAAuC,EAAE,MAAM,qDAAqD,CAAC;AAGnH,OAAO,EACL,sBAAsB,EACtB,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,EACf,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAG7E,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EACV,SAAS,EACT,aAAa,EACb,gBAAgB,GACjB,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"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"}

package/dist/index.mjs

@@ -1951,8 +1951,8 @@ var MultiFileTree = ({
   }, "Selected: ", selectedFile.source.name, " / ", selectedFile.path));
 };
 // src/components/StoryboardWorkflowsTree/StoryboardWorkflowsTreeCore.tsx
-import { Package, FolderKanban, LayoutDashboard, Workflow, BookOpen, FolderOpen, CheckCircle2, GitCommit, CircleDot, Circle } from "lucide-react";
-import React12, { useMemo as useMemo9, useRef as useRef5 } from "react";
+import { Package, FolderKanban, LayoutDashboard, Workflow, BookOpen, FolderOpen, GitCommit, CircleDot, Circle } from "lucide-react";
+import React13, { useMemo as useMemo9, useRef as useRef5, useState as useState7, useEffect as useEffect3 } from "react";
 import { Tree as Tree3 } from "react-arborist";
 
 // src/utils/gitStatus.tsx
@@ -2062,8 +2062,67 @@ function lookupGitStatus(filePath, gitStatusMap) {
   return null;
 }
 
+// src/components/StoryboardWorkflowsTree/StatusBar.tsx
+import React12 from "react";
+var StatusBar = ({
+  segments,
+  width = 72,
+  height = 6,
+  gap = 1,
+  borderRadius = 0
+}) => {
+  const total = segments.reduce((sum, seg) => sum + seg.count, 0);
+  if (total === 0) {
+    return null;
+  }
+  const totalGapWidth = (segments.filter((s) => s.count > 0).length - 1) * gap;
+  const availableWidth = width - totalGapWidth;
+  const segmentWidths = segments.map((seg) => {
+    if (seg.count === 0)
+      return 0;
+    return Math.max(2, Math.round(seg.count / total * availableWidth));
+  });
+  const totalCalculatedWidth = segmentWidths.reduce((sum, w) => sum + w, 0);
+  const diff = availableWidth - totalCalculatedWidth;
+  if (diff !== 0 && segmentWidths.length > 0) {
+    const largestIndex = segmentWidths.indexOf(Math.max(...segmentWidths));
+    if (largestIndex >= 0) {
+      segmentWidths[largestIndex] += diff;
+    }
+  }
+  const tooltipParts = segments.filter((seg) => seg.count > 0 && seg.label).map((seg) => `${seg.label}: ${seg.count}`);
+  const tooltip = tooltipParts.length > 0 ? tooltipParts.join(", ") : undefined;
+  return /* @__PURE__ */ React12.createElement("div", {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: `${gap}px`,
+      width: `${width}px`,
+      height: `${height}px`
+    },
+    title: tooltip
+  }, segments.map((segment, index) => {
+    const segmentWidth = segmentWidths[index];
+    if (segmentWidth === 0)
+      return null;
+    const visibleSegments = segmentWidths.filter((w) => w > 0);
+    const visibleIndex = segmentWidths.slice(0, index + 1).filter((w) => w > 0).length - 1;
+    const isFirst = visibleIndex === 0;
+    const isLast = visibleIndex === visibleSegments.length - 1;
+    return /* @__PURE__ */ React12.createElement("div", {
+      key: index,
+      style: {
+        width: `${segmentWidth}px`,
+        height: "100%",
+        backgroundColor: segment.color,
+        borderRadius: isFirst && isLast ? `${borderRadius}px` : isFirst ? `${borderRadius}px 0 0 ${borderRadius}px` : isLast ? `0 ${borderRadius}px ${borderRadius}px 0` : "0"
+      }
+    });
+  }));
+};
+
 // src/components/StoryboardWorkflowsTree/StoryboardWorkflowsTreeCore.tsx
-var buildTreeDataFromStoryboards = (storyboards, workflowCoverageMap, traceWorkflowsSet, filterMode, versionPrefix, gitStatusMap) => {
+var buildTreeDataFromStoryboards = (storyboards, workflowCoverageMap, traceWorkflowsSet, filterMode, versionPrefix, gitStatusMap, scenarioStatusMap, canvasNodeStatusMap) => {
   const packagesMap = new Map;
   const rootStoryboards = [];
   for (const storyboard of storyboards) {
@@ -2079,13 +2138,15 @@ var buildTreeDataFromStoryboards = (storyboards, workflowCoverageMap, traceWorkf
     const children = [];
     const canvasId = versionPrefix ? `canvas:${versionPrefix}:${storyboard.id}` : `canvas:${storyboard.id}`;
     const canvasGitStatus = gitStatusMap ? lookupGitStatus(storyboard.canvas.path, gitStatusMap) : null;
+    const canvasStatus = canvasNodeStatusMap?.[storyboard.canvas.path] ?? canvasNodeStatusMap?.[storyboard.id];
     children.push({
       id: canvasId,
       name: "Storyboard",
       type: "canvas",
       canvas: storyboard.canvas,
       storyboard,
-      gitStatus: canvasGitStatus
+      gitStatus: canvasGitStatus,
+      canvasNodeStatus: canvasStatus
     });
     if (storyboard.canvas.markdownPath) {
       const overviewId = versionPrefix ? `overview:${versionPrefix}:${storyboard.id}` : `overview:${storyboard.id}`;
@@ -2104,6 +2165,7 @@ var buildTreeDataFromStoryboards = (storyboards, workflowCoverageMap, traceWorkf
         const workflowHasTraces = traceWorkflowsSet?.has(workflow.id) ?? false;
         const workflowNodeId = versionPrefix ? `workflow:${versionPrefix}:${workflow.id}` : `workflow:${workflow.id}`;
         const workflowGitStatus = gitStatusMap ? lookupGitStatus(workflow.path, gitStatusMap) : null;
+        const scenarioStatus = scenarioStatusMap?.[workflow.id];
         return {
           id: workflowNodeId,
           name: workflow.name,
@@ -2112,7 +2174,8 @@ var buildTreeDataFromStoryboards = (storyboards, workflowCoverageMap, traceWorkf
           storyboard,
           isFullyCovered: workflowCoverageMap?.[workflow.id] ?? false,
           hasTraces: workflowHasTraces,
-          gitStatus: workflowGitStatus
+          gitStatus: workflowGitStatus,
+          scenarioStatus
         };
       }).sort((a, b) => a.name.localeCompare(b.name));
       if (filterMode === "with-traces") {
@@ -2197,7 +2260,7 @@ var buildTreeDataFromStoryboards = (storyboards, workflowCoverageMap, traceWorkf
     return allStoryboards.map(buildStoryboardNode).filter((node) => node !== null).sort((a, b) => a.name.localeCompare(b.name));
   }
 };
-var buildTreeDataFromVersions = (versionSnapshots, workflowCoverageMap, filterMode, traceWorkflowsSet, gitStatusMap) => {
+var buildTreeDataFromVersions = (versionSnapshots, workflowCoverageMap, filterMode, traceWorkflowsSet, gitStatusMap, scenarioStatusMap, canvasNodeStatusMap) => {
   const result = [];
   for (const snapshot of versionSnapshots) {
     const versionKey = `${snapshot.repositoryUrl}@${snapshot.commitSha}`;
@@ -2209,7 +2272,7 @@ var buildTreeDataFromVersions = (versionSnapshots, workflowCoverageMap, filterMo
     if (filterMode === "without-traces" && !versionHasUntracedWorkflows) {
       continue;
     }
-    const storyboardChildren = buildTreeDataFromStoryboards(snapshot.storyboards, workflowCoverageMap, traceWorkflowsSet, filterMode, versionKey, gitStatusMap);
+    const storyboardChildren = buildTreeDataFromStoryboards(snapshot.storyboards, workflowCoverageMap, traceWorkflowsSet, filterMode, versionKey, gitStatusMap, scenarioStatusMap, canvasNodeStatusMap);
     if (storyboardChildren.length === 0) {
       continue;
     }
@@ -2347,6 +2410,8 @@ var StoryboardWorkflowsTreeCore = ({
   selectedNodeId,
   defaultOpen = false,
   initialOpenState,
+  openState,
+  onToggle,
   horizontalNodePadding = "16px",
   verticalNodePadding = "6px",
   verticalPadding = "20px",
@@ -2357,7 +2422,10 @@ var StoryboardWorkflowsTreeCore = ({
   traceWorkflowsSet,
   gitStatusData,
   enablePanelDrag = false,
-  getDragConfig
+  getDragConfig,
+  scenarioStatusMap,
+  canvasNodeStatusMap,
+  statusBarDisplay = "both"
 }) => {
   const dndProps = getDndProps(enableDragAndDrop);
   const parentDndManager = useParentDndManager();
@@ -2372,78 +2440,135 @@ var StoryboardWorkflowsTreeCore = ({
   }, [verticalNodePadding]);
   const treeData = useMemo9(() => {
     if (versionSnapshots && versionSnapshots.length > 0) {
-      return buildTreeDataFromVersions(versionSnapshots, workflowCoverageMap, workflowFilterMode, traceWorkflowsSet, gitStatusMap);
+      return buildTreeDataFromVersions(versionSnapshots, workflowCoverageMap, workflowFilterMode, traceWorkflowsSet, gitStatusMap, scenarioStatusMap, canvasNodeStatusMap);
     } else {
-      return buildTreeDataFromStoryboards(storyboards, workflowCoverageMap, traceWorkflowsSet, workflowFilterMode, undefined, gitStatusMap);
+      return buildTreeDataFromStoryboards(storyboards, workflowCoverageMap, traceWorkflowsSet, workflowFilterMode, undefined, gitStatusMap, scenarioStatusMap, canvasNodeStatusMap);
     }
-  }, [storyboards, versionSnapshots, workflowCoverageMap, traceWorkflowsSet, workflowFilterMode, gitStatusMap]);
+  }, [storyboards, versionSnapshots, workflowCoverageMap, traceWorkflowsSet, workflowFilterMode, gitStatusMap, scenarioStatusMap, canvasNodeStatusMap]);
   const NodeRenderer = (props) => {
     const { node } = props;
     const data = node.data;
-    const icon = data.type === "version" ? /* @__PURE__ */ React12.createElement(GitCommit, {
+    const icon = data.type === "version" ? /* @__PURE__ */ React13.createElement(GitCommit, {
       size: 16
-    }) : data.type === "package" ? /* @__PURE__ */ React12.createElement(Package, {
+    }) : data.type === "package" ? /* @__PURE__ */ React13.createElement(Package, {
       size: 16
-    }) : data.type === "storyboard" ? /* @__PURE__ */ React12.createElement(FolderKanban, {
+    }) : data.type === "storyboard" ? /* @__PURE__ */ React13.createElement(FolderKanban, {
       size: 16
-    }) : data.type === "overview" ? /* @__PURE__ */ React12.createElement(BookOpen, {
+    }) : data.type === "overview" ? /* @__PURE__ */ React13.createElement(BookOpen, {
       size: 16
-    }) : data.type === "canvas" ? /* @__PURE__ */ React12.createElement(LayoutDashboard, {
+    }) : data.type === "canvas" ? /* @__PURE__ */ React13.createElement(LayoutDashboard, {
       size: 16
-    }) : data.type === "workflows" ? /* @__PURE__ */ React12.createElement(FolderOpen, {
+    }) : data.type === "workflows" ? /* @__PURE__ */ React13.createElement(FolderOpen, {
       size: 16
-    }) : /* @__PURE__ */ React12.createElement(Workflow, {
+    }) : /* @__PURE__ */ React13.createElement(Workflow, {
       size: 16
     });
     const nameColor = data.type === "version" ? data.hasTraces ? "#a855f7" : theme.colors.textMuted : data.type === "package" ? theme.colors.primary : data.type === "storyboard" ? data.hasTraces ? theme.colors.success : theme.colors.textSecondary : data.type === "overview" ? theme.colors.info || "#3b82f6" : data.type === "canvas" ? theme.colors.warning || "#f59e0b" : data.type === "workflows" ? theme.colors.text : data.type === "workflow" ? data.hasTraces ? theme.colors.textSecondary : theme.colors.textMuted : theme.colors.textSecondary;
     const nodeHorizontalPadding = data.type === "overview" || data.type === "canvas" || data.type === "workflows" || data.type === "workflow" ? `calc(${horizontalNodePadding} + 12px)` : horizontalNodePadding;
     const rightContent = (() => {
       const indicators = [];
+      if (data.type === "storyboard" && data.storyboard && scenarioStatusMap && (statusBarDisplay === "traces" || statusBarDisplay === "both")) {
+        let totalTraced = 0;
+        let totalScenarios = 0;
+        for (const workflow of data.storyboard.workflows) {
+          const status = scenarioStatusMap[workflow.id];
+          if (status) {
+            totalTraced += status.scenarios.filter((s) => s.hasTrace).length;
+            totalScenarios += status.scenarios.length;
+          }
+        }
+        if (totalScenarios > 0) {
+          indicators.push(/* @__PURE__ */ React13.createElement("div", {
+            key: "storyboard-traces",
+            style: { marginLeft: "6px" }
+          }, /* @__PURE__ */ React13.createElement(StatusBar, {
+            segments: [
+              { count: totalTraced, color: "#3b82f6", label: "Traced" },
+              { count: totalScenarios - totalTraced, color: "#6b7280", label: "Not traced" }
+            ]
+          })));
+        }
+      }
+      if (data.type === "canvas" && data.canvasNodeStatus && statusBarDisplay !== "traces") {
+        const { implemented, approved, draft } = data.canvasNodeStatus;
+        const total = implemented + approved + draft;
+        if (total > 0) {
+          indicators.push(/* @__PURE__ */ React13.createElement("div", {
+            key: "canvas-status",
+            style: { marginLeft: "6px" }
+          }, /* @__PURE__ */ React13.createElement(StatusBar, {
+            segments: [
+              { count: implemented, color: "#10b981", label: "Implemented" },
+              { count: approved, color: "#f59e0b", label: "Approved" },
+              { count: draft, color: "#6b7280", label: "Draft" }
+            ]
+          })));
+        }
+      }
+      if (data.type === "workflow" && data.scenarioStatus) {
+        const { scenarios } = data.scenarioStatus;
+        if (scenarios.length > 0) {
+          const bars = [];
+          if (statusBarDisplay === "implementation" || statusBarDisplay === "both") {
+            const implemented = scenarios.filter((s) => s.implementationStatus === "implemented").length;
+            const partial = scenarios.filter((s) => s.implementationStatus === "partial").length;
+            const draft = scenarios.filter((s) => !s.implementationStatus || s.implementationStatus === "draft").length;
+            if (implemented + partial + draft > 0) {
+              bars.push(/* @__PURE__ */ React13.createElement(StatusBar, {
+                key: "impl",
+                segments: [
+                  { count: implemented, color: "#10b981", label: "Implemented" },
+                  { count: partial, color: "#f59e0b", label: "Partial" },
+                  { count: draft, color: "#6b7280", label: "Draft" }
+                ]
+              }));
+            }
+          }
+          if (statusBarDisplay === "traces" || statusBarDisplay === "both") {
+            const traced = scenarios.filter((s) => s.hasTrace).length;
+            const untraced = scenarios.length - traced;
+            bars.push(/* @__PURE__ */ React13.createElement(StatusBar, {
+              key: "traces",
+              segments: [
+                { count: traced, color: "#3b82f6", label: "Traced" },
+                { count: untraced, color: "#6b7280", label: "Not traced" }
+              ]
+            }));
+          }
+          if (bars.length > 0) {
+            indicators.push(/* @__PURE__ */ React13.createElement("div", {
+              key: "scenario-status",
+              style: { marginLeft: "6px", display: "flex", flexDirection: "column", gap: "2px" }
+            }, bars));
+          }
+        }
+      }
       if (data.gitStatus && (data.type === "canvas" || data.type === "overview" || data.type === "workflow")) {
         const gitDisplay = getGitStatusDisplay3(data.gitStatus, theme);
         if (gitDisplay) {
-          indicators.push(/* @__PURE__ */ React12.createElement("div", {
+          indicators.push(/* @__PURE__ */ React13.createElement("div", {
             key: "git",
             style: { display: "flex", alignItems: "center", color: gitDisplay.color, marginLeft: "6px" }
           }, gitDisplay.icon));
         }
       }
-      if (data.type === "workflow") {
-        if (data.isFullyCovered) {
-          indicators.push(/* @__PURE__ */ React12.createElement(CheckCircle2, {
-            key: "coverage",
-            size: 14,
-            style: { color: "#10b981", marginLeft: "6px" }
-          }));
-        } else if (data.hasTraces !== undefined) {
-          indicators.push(data.hasTraces ? /* @__PURE__ */ React12.createElement(CircleDot, {
-            key: "traces",
-            size: 14,
-            style: { color: "#10b981", marginLeft: "6px" }
-          }) : /* @__PURE__ */ React12.createElement(Circle, {
-            key: "traces",
-            size: 14,
-            style: { color: theme.colors.textMuted, marginLeft: "6px" }
-          }));
-        }
-      }
-      if ((data.type === "version" || data.type === "storyboard") && data.hasTraces !== undefined) {
-        indicators.push(data.hasTraces ? /* @__PURE__ */ React12.createElement(CircleDot, {
+      if (data.type === "version" && data.hasTraces !== undefined) {
+        indicators.push(data.hasTraces ? /* @__PURE__ */ React13.createElement(CircleDot, {
           key: "traces",
           size: 14,
           style: { color: "#10b981", marginLeft: "6px" }
-        }) : /* @__PURE__ */ React12.createElement(Circle, {
+        }) : /* @__PURE__ */ React13.createElement(Circle, {
           key: "traces",
           size: 14,
           style: { color: theme.colors.textMuted, marginLeft: "6px" }
         }));
       }
-      return indicators.length > 0 ? /* @__PURE__ */ React12.createElement("div", {
+      return indicators.length > 0 ? /* @__PURE__ */ React13.createElement("div", {
         style: { display: "flex", alignItems: "center" }
       }, indicators) : undefined;
     })();
     const dragConfig = enablePanelDrag ? getDragConfig ? getDragConfig(data) : getDefaultDragConfig(data) : undefined;
-    return /* @__PURE__ */ React12.createElement(TreeNode, {
+    return /* @__PURE__ */ React13.createElement(TreeNode, {
       ...props,
       theme,
       nameColor,
@@ -2472,7 +2597,25 @@ var StoryboardWorkflowsTreeCore = ({
   };
   const initialHeight = 600;
   const [containerRef, containerHeight] = useContainerHeight(initialHeight);
-  return /* @__PURE__ */ React12.createElement("div", {
+  const treeRef = useRef5(null);
+  const [treeKey, setTreeKey] = useState7(0);
+  const prevOpenStateRef = useRef5(openState);
+  useEffect3(() => {
+    if (openState !== undefined && openState !== prevOpenStateRef.current) {
+      prevOpenStateRef.current = openState;
+      setTreeKey((k) => k + 1);
+    }
+  }, [openState]);
+  const handleToggle = (id) => {
+    if (onToggle && treeRef.current) {
+      const node = treeRef.current.get(id);
+      if (node) {
+        onToggle(id, node.isOpen);
+      }
+    }
+  };
+  const effectiveInitialOpenState = openState ?? initialOpenState;
+  return /* @__PURE__ */ React13.createElement("div", {
     ref: containerRef,
     style: {
       backgroundColor: theme.colors.background,
@@ -2481,12 +2624,15 @@ var StoryboardWorkflowsTreeCore = ({
       height: "100%",
       ...verticalPadding ? { paddingTop: verticalPadding, paddingBottom: verticalPadding } : {}
     }
-  }, /* @__PURE__ */ React12.createElement(Tree3, {
+  }, /* @__PURE__ */ React13.createElement(Tree3, {
+    key: treeKey,
+    ref: treeRef,
     data: treeData,
     onSelect: handleSelect,
     openByDefault: defaultOpen,
-    ...initialOpenState !== undefined && { initialOpenState },
+    ...effectiveInitialOpenState !== undefined && { initialOpenState: effectiveInitialOpenState },
     ...selectedNodeId !== undefined && { selection: selectedNodeId },
+    ...onToggle !== undefined && { onToggle: handleToggle },
     width: "100%",
     height: containerHeight,
     rowHeight,
@@ -2500,7 +2646,7 @@ function hasWorkflowContent(node) {
 }
 // src/components/WorkflowScenarioTree/WorkflowScenarioTreeCore.tsx
 import { Package as Package2, Workflow as Workflow2, GitCommit as GitCommit2, ListChecks, List } from "lucide-react";
-import React13, { useMemo as useMemo10 } from "react";
+import React14, { useMemo as useMemo10 } from "react";
 import { Tree as Tree4 } from "react-arborist";
 var buildTreeDataFromWorkflows = (workflows, workflowTraceCounts, scenarioTraceCounts, filterMode, minTraceCount) => {
   const packagesMap = new Map;
@@ -2666,20 +2812,20 @@ var WorkflowScenarioTreeCore = ({
   const NodeRenderer = (props) => {
     const { node } = props;
     const data = node.data;
-    const icon = data.type === "version" ? /* @__PURE__ */ React13.createElement(GitCommit2, {
+    const icon = data.type === "version" ? /* @__PURE__ */ React14.createElement(GitCommit2, {
       size: 16
-    }) : data.type === "package" ? /* @__PURE__ */ React13.createElement(Package2, {
+    }) : data.type === "package" ? /* @__PURE__ */ React14.createElement(Package2, {
       size: 16
-    }) : data.type === "workflow" ? /* @__PURE__ */ React13.createElement(Workflow2, {
+    }) : data.type === "workflow" ? /* @__PURE__ */ React14.createElement(Workflow2, {
       size: 16
-    }) : data.type === "scenario" ? data.hasTraces ? /* @__PURE__ */ React13.createElement(ListChecks, {
+    }) : data.type === "scenario" ? data.hasTraces ? /* @__PURE__ */ React14.createElement(ListChecks, {
       size: 16
-    }) : /* @__PURE__ */ React13.createElement(List, {
+    }) : /* @__PURE__ */ React14.createElement(List, {
       size: 16
     }) : null;
     const nameColor = data.type === "version" ? data.hasTraces ? "#a855f7" : theme.colors.textMuted : data.type === "package" ? theme.colors.primary : data.type === "workflow" ? data.hasTraces ? theme.colors.success : theme.colors.textSecondary : data.hasTraces ? theme.colors.secondary : theme.colors.textMuted;
     const nodeHorizontalPadding = data.type === "workflow" || data.type === "scenario" ? `calc(${horizontalNodePadding} + 12px)` : horizontalNodePadding;
-    const rightContent = data.traceCount !== undefined ? /* @__PURE__ */ React13.createElement("span", {
+    const rightContent = data.traceCount !== undefined ? /* @__PURE__ */ React14.createElement("span", {
       style: {
         marginLeft: "8px",
         fontSize: "12px",
@@ -2687,7 +2833,7 @@ var WorkflowScenarioTreeCore = ({
         fontWeight: 500
       }
     }, data.traceCount) : undefined;
-    return /* @__PURE__ */ React13.createElement(TreeNode, {
+    return /* @__PURE__ */ React14.createElement(TreeNode, {
       ...props,
       theme,
       nameColor,
@@ -2708,7 +2854,7 @@ var WorkflowScenarioTreeCore = ({
   };
   const initialHeight = 600;
   const [containerRef, containerHeight] = useContainerHeight(initialHeight);
-  return /* @__PURE__ */ React13.createElement("div", {
+  return /* @__PURE__ */ React14.createElement("div", {
     ref: containerRef,
     style: {
       backgroundColor: theme.colors.background,
@@ -2717,7 +2863,7 @@ var WorkflowScenarioTreeCore = ({
       height: "100%",
       ...verticalPadding ? { paddingTop: verticalPadding, paddingBottom: verticalPadding } : {}
     }
-  }, /* @__PURE__ */ React13.createElement(Tree4, {
+  }, /* @__PURE__ */ React14.createElement(Tree4, {
     data: treeData,
     onSelect: handleSelect,
     openByDefault: defaultOpen,
@@ -2731,7 +2877,7 @@ var WorkflowScenarioTreeCore = ({
 };
 // src/components/CanvasListTree/CanvasListTreeCore.tsx
 import { Package as Package3, Folder, LayoutDashboard as LayoutDashboard2, FileText } from "lucide-react";
-import React14, { useMemo as useMemo11, useRef as useRef6 } from "react";
+import React15, { useMemo as useMemo11, useRef as useRef6, useState as useState8, useEffect as useEffect4 } from "react";
 import { Tree as Tree5 } from "react-arborist";
 var buildTreeData = (canvases, gitStatusMap) => {
   const packagesMap = new Map;
@@ -2909,6 +3055,8 @@ var CanvasListTreeCore = ({
   selectedNodeId,
   defaultOpen = false,
   initialOpenState,
+  openState,
+  onToggle,
   horizontalNodePadding = "16px",
   verticalNodePadding = "6px",
   verticalPadding = "20px",
@@ -2932,13 +3080,13 @@ var CanvasListTreeCore = ({
   const NodeRenderer = (props) => {
     const { node } = props;
     const data = node.data;
-    const icon = data.type === "package" ? /* @__PURE__ */ React14.createElement(Package3, {
+    const icon = data.type === "package" ? /* @__PURE__ */ React15.createElement(Package3, {
       size: 16
-    }) : data.type === "canvas-folder" ? /* @__PURE__ */ React14.createElement(Folder, {
+    }) : data.type === "canvas-folder" ? /* @__PURE__ */ React15.createElement(Folder, {
       size: 16
-    }) : data.type === "overview" ? /* @__PURE__ */ React14.createElement(FileText, {
+    }) : data.type === "overview" ? /* @__PURE__ */ React15.createElement(FileText, {
       size: 16
-    }) : /* @__PURE__ */ React14.createElement(LayoutDashboard2, {
+    }) : /* @__PURE__ */ React15.createElement(LayoutDashboard2, {
       size: 16
     });
     const nameColor = data.type === "package" ? theme.colors.primary : data.type === "canvas-folder" ? theme.colors.textSecondary : data.type === "overview" ? theme.colors.info || "#3b82f6" : theme.colors.warning || "#f59e0b";
@@ -2947,7 +3095,7 @@ var CanvasListTreeCore = ({
       if (data.gitStatus && (data.type === "canvas" || data.type === "overview")) {
         const gitDisplay = getGitStatusDisplay3(data.gitStatus, theme);
         if (gitDisplay) {
-          return /* @__PURE__ */ React14.createElement("div", {
+          return /* @__PURE__ */ React15.createElement("div", {
             style: { display: "flex", alignItems: "center", color: gitDisplay.color, marginLeft: "6px" }
           }, gitDisplay.icon);
         }
@@ -2955,7 +3103,7 @@ var CanvasListTreeCore = ({
       return;
     })();
     const dragConfig = enablePanelDrag ? getDragConfig ? getDragConfig(data) : getDefaultCanvasDragConfig(data) : undefined;
-    return /* @__PURE__ */ React14.createElement(TreeNode, {
+    return /* @__PURE__ */ React15.createElement(TreeNode, {
       ...props,
       theme,
       nameColor,
@@ -2984,7 +3132,25 @@ var CanvasListTreeCore = ({
   };
   const initialHeight = 600;
   const [containerRef, containerHeight] = useContainerHeight(initialHeight);
-  return /* @__PURE__ */ React14.createElement("div", {
+  const treeRef = useRef6(null);
+  const [treeKey, setTreeKey] = useState8(0);
+  const prevOpenStateRef = useRef6(openState);
+  useEffect4(() => {
+    if (openState !== undefined && openState !== prevOpenStateRef.current) {
+      prevOpenStateRef.current = openState;
+      setTreeKey((k) => k + 1);
+    }
+  }, [openState]);
+  const handleToggle = (id) => {
+    if (onToggle && treeRef.current) {
+      const node = treeRef.current.get(id);
+      if (node) {
+        onToggle(id, node.isOpen);
+      }
+    }
+  };
+  const effectiveInitialOpenState = openState ?? initialOpenState;
+  return /* @__PURE__ */ React15.createElement("div", {
     ref: containerRef,
     style: {
       backgroundColor: theme.colors.background,
@@ -2993,12 +3159,15 @@ var CanvasListTreeCore = ({
       height: "100%",
       ...verticalPadding ? { paddingTop: verticalPadding, paddingBottom: verticalPadding } : {}
     }
-  }, /* @__PURE__ */ React14.createElement(Tree5, {
+  }, /* @__PURE__ */ React15.createElement(Tree5, {
+    key: treeKey,
+    ref: treeRef,
     initialData: treeData,
     onSelect: handleSelect,
     openByDefault: defaultOpen,
-    ...initialOpenState !== undefined && { initialOpenState },
+    ...effectiveInitialOpenState !== undefined && { initialOpenState: effectiveInitialOpenState },
     ...selectedNodeId !== undefined && { selection: selectedNodeId },
+    ...onToggle !== undefined && { onToggle: handleToggle },
     width: "100%",
     height: containerHeight,
     rowHeight,
@@ -3008,7 +3177,7 @@ var CanvasListTreeCore = ({
 };
 // src/components/RepositoryTree/RepositoryTreeCore.tsx
 import { Folder as Folder2, FolderGit2 } from "lucide-react";
-import React15, { useMemo as useMemo12 } from "react";
+import React16, { useMemo as useMemo12 } from "react";
 import { Tree as Tree6 } from "react-arborist";
 var buildRepositoryTree = (repositories) => {
   if (repositories.length === 0)
@@ -3122,15 +3291,15 @@ var RepositoryTreeCore = ({
   const NodeRenderer = (props) => {
     const { node } = props;
     const data = node.data;
-    const icon = data.type === "directory" ? /* @__PURE__ */ React15.createElement(Folder2, {
+    const icon = data.type === "directory" ? /* @__PURE__ */ React16.createElement(Folder2, {
       size: 16
-    }) : /* @__PURE__ */ React15.createElement(FolderGit2, {
+    }) : /* @__PURE__ */ React16.createElement(FolderGit2, {
       size: 16
     });
     const nameColor = data.type === "directory" ? theme.colors.textSecondary : theme.colors.text;
     let rightContent = undefined;
     if (data.type === "directory" && data.repositoryCount !== undefined) {
-      rightContent = /* @__PURE__ */ React15.createElement("span", {
+      rightContent = /* @__PURE__ */ React16.createElement("span", {
         style: {
           marginLeft: "8px",
           fontSize: "12px",
@@ -3142,7 +3311,7 @@ var RepositoryTreeCore = ({
       const { owner, name } = data.entry.github;
       const avatarUrl = `https://github.com/${owner}.png?size=32`;
       const repoFullName = `${owner}/${name}`;
-      rightContent = /* @__PURE__ */ React15.createElement("img", {
+      rightContent = /* @__PURE__ */ React16.createElement("img", {
         src: avatarUrl,
         alt: owner,
         title: repoFullName,
@@ -3155,7 +3324,7 @@ var RepositoryTreeCore = ({
         }
       });
     }
-    return /* @__PURE__ */ React15.createElement(TreeNode, {
+    return /* @__PURE__ */ React16.createElement(TreeNode, {
       ...props,
       theme,
       nameColor,
@@ -3177,7 +3346,7 @@ var RepositoryTreeCore = ({
   const initialHeight = 600;
   const [containerRef, containerHeight] = useContainerHeight(initialHeight);
   const selection = selectedRepositoryPath ? `repo:${selectedRepositoryPath}` : undefined;
-  return /* @__PURE__ */ React15.createElement("div", {
+  return /* @__PURE__ */ React16.createElement("div", {
     ref: containerRef,
     style: {
       backgroundColor: theme.colors.background,
@@ -3186,7 +3355,7 @@ var RepositoryTreeCore = ({
       height: "100%",
       ...verticalPadding ? { paddingTop: verticalPadding, paddingBottom: verticalPadding } : {}
     }
-  }, /* @__PURE__ */ React15.createElement(Tree6, {
+  }, /* @__PURE__ */ React16.createElement(Tree6, {
     data: treeData,
     onSelect: handleSelect,
     openByDefault: defaultOpen,
@@ -3205,9 +3374,9 @@ import {
   Circle as Circle2,
   TestTube
 } from "lucide-react";
-import React16, { useMemo as useMemo13, useRef as useRef7 } from "react";
+import React17, { useMemo as useMemo13, useRef as useRef7 } from "react";
 import { Tree as Tree7 } from "react-arborist";
-var TelemetryCoverageContext = React16.createContext(null);
+var TelemetryCoverageContext = React17.createContext(null);
 var DEFAULT_TEST_PATTERNS = [
   /\.test\.[jt]sx?$/,
   /\.spec\.[jt]sx?$/,
@@ -3224,7 +3393,7 @@ var getCoverageStatusDisplay = (coverage, _theme) => {
   switch (status) {
     case "covered":
       return {
-        icon: /* @__PURE__ */ React16.createElement(Activity, {
+        icon: /* @__PURE__ */ React17.createElement(Activity, {
           size: 14
         }),
         color: "#22c55e",
@@ -3233,7 +3402,7 @@ var getCoverageStatusDisplay = (coverage, _theme) => {
       };
     case "partial":
       return {
-        icon: /* @__PURE__ */ React16.createElement(CircleDot2, {
+        icon: /* @__PURE__ */ React17.createElement(CircleDot2, {
           size: 14
         }),
         color: "#eab308",
@@ -3242,7 +3411,7 @@ var getCoverageStatusDisplay = (coverage, _theme) => {
       };
     case "none":
       return {
-        icon: /* @__PURE__ */ React16.createElement(Circle2, {
+        icon: /* @__PURE__ */ React17.createElement(Circle2, {
           size: 14
         }),
         color: "#6b7280",
@@ -3354,7 +3523,7 @@ var TelemetryCoverageFileTree = ({
   }, [coverageData]);
   const NodeRenderer = (props) => {
     const { node } = props;
-    const ctx = React16.useContext(TelemetryCoverageContext);
+    const ctx = React17.useContext(TelemetryCoverageContext);
     const coverage = ctx?.coverageMap.get(node.data.id);
     const hasTracedChildren = ctx?.hasTracedChildrenMap.get(node.data.id);
     const coverageDisplay = coverage ? getCoverageStatusDisplay(coverage, theme) : null;
@@ -3366,11 +3535,11 @@ var TelemetryCoverageFileTree = ({
     } else if (node.data.isTestFile) {
       nameColor = "#6b728080";
     }
-    const leftIcon = node.data.isTestFile && !coverage ? /* @__PURE__ */ React16.createElement(TestTube, {
+    const leftIcon = node.data.isTestFile && !coverage ? /* @__PURE__ */ React17.createElement(TestTube, {
       size: 14,
       style: { marginRight: 4, color: "#6b7280" }
     }) : null;
-    const rightContent = coverageDisplay ? /* @__PURE__ */ React16.createElement("div", {
+    const rightContent = coverageDisplay ? /* @__PURE__ */ React17.createElement("div", {
       style: {
         display: "flex",
         alignItems: "center",
@@ -3378,14 +3547,14 @@ var TelemetryCoverageFileTree = ({
         marginRight: "8px"
       },
       title: coverageDisplay.label
-    }, coverageDisplay.icon, /* @__PURE__ */ React16.createElement("span", {
+    }, coverageDisplay.icon, /* @__PURE__ */ React17.createElement("span", {
       style: {
         marginLeft: "4px",
         fontSize: theme.fontSizes[0],
         fontWeight: "bold",
         fontFamily: "monospace"
       }
-    }, coverageDisplay.badge)) : node.data.isTestFile ? /* @__PURE__ */ React16.createElement("div", {
+    }, coverageDisplay.badge)) : node.data.isTestFile ? /* @__PURE__ */ React17.createElement("div", {
       style: {
         display: "flex",
         alignItems: "center",
@@ -3394,10 +3563,10 @@ var TelemetryCoverageFileTree = ({
         opacity: 0.5
       },
       title: "No telemetry instrumentation"
-    }, /* @__PURE__ */ React16.createElement(Circle2, {
+    }, /* @__PURE__ */ React17.createElement(Circle2, {
       size: 14
     })) : null;
-    return /* @__PURE__ */ React16.createElement(TreeNode, {
+    return /* @__PURE__ */ React17.createElement(TreeNode, {
       ...props,
       theme,
       rightContent,
@@ -3470,7 +3639,7 @@ var TelemetryCoverageFileTree = ({
     return initialHeight;
   }, [autoHeight, treeData, openByDefault, initialHeight]);
   const [containerRef, containerHeight] = useContainerHeight(calculatedHeight);
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     ref: containerRef,
     style: {
       backgroundColor: transparentBackground ? "transparent" : theme.colors.background,
@@ -3479,9 +3648,9 @@ var TelemetryCoverageFileTree = ({
       ...autoHeight ? {} : { height: "100%" },
       ...verticalPadding ? { paddingTop: verticalPadding, paddingBottom: verticalPadding } : {}
     }
-  }, /* @__PURE__ */ React16.createElement(TelemetryCoverageContext.Provider, {
+  }, /* @__PURE__ */ React17.createElement(TelemetryCoverageContext.Provider, {
     value: { coverageMap, hasTracedChildrenMap }
-  }, /* @__PURE__ */ React16.createElement(Tree7, {
+  }, /* @__PURE__ */ React17.createElement(Tree7, {
     data: treeData,
     onSelect: handleSelect,
     ...selectedFile !== undefined && { selection: selectedFile },
@@ -3511,7 +3680,7 @@ var calculateTelemetryCoverageStats = (coverageData) => {
 };
 // src/components/TelemetryCoverageFileTreeContainer.tsx
 import { RefreshCw as RefreshCw2, Eye as Eye2, EyeOff as EyeOff2, AlertCircle as AlertCircle5, Activity as Activity2 } from "lucide-react";
-import React17, { useState as useState7, useMemo as useMemo14 } from "react";
+import React18, { useState as useState9, useMemo as useMemo14 } from "react";
 var TelemetryCoverageFileTreeContainer = ({
   fileTree,
   theme,
@@ -3531,8 +3700,8 @@ var TelemetryCoverageFileTreeContainer = ({
   verticalNodePadding,
   verticalPadding
 }) => {
-  const [filters, setFilters] = useState7([]);
-  const [showUncoveredFiles, setShowUncoveredFiles] = useState7(true);
+  const [filters, setFilters] = useState9([]);
+  const [showUncoveredFiles, setShowUncoveredFiles] = useState9(true);
   const selectedDirectories = useMemo14(() => {
     return filters.filter((f) => f.mode === "include").map((f) => f.path);
   }, [filters]);
@@ -3544,34 +3713,34 @@ var TelemetryCoverageFileTreeContainer = ({
     setShowUncoveredFiles(!showUncoveredFiles);
   };
   const percentageColor = stats.percentage >= 80 ? "#22c55e" : stats.percentage >= 50 ? "#eab308" : stats.percentage > 0 ? "#f97316" : "#6b7280";
-  return /* @__PURE__ */ React17.createElement("div", {
+  return /* @__PURE__ */ React18.createElement("div", {
     style: { display: "flex", flexDirection: "column", height: "100%" }
-  }, showControls && /* @__PURE__ */ React17.createElement("div", {
+  }, showControls && /* @__PURE__ */ React18.createElement("div", {
     style: {
       padding: "12px",
       borderBottom: `1px solid ${theme.colors.border || "#e0e0e0"}`,
       backgroundColor: theme.colors.backgroundSecondary || theme.colors.background
     }
-  }, /* @__PURE__ */ React17.createElement("div", {
+  }, /* @__PURE__ */ React18.createElement("div", {
     style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       marginBottom: "8px"
     }
-  }, /* @__PURE__ */ React17.createElement("div", {
+  }, /* @__PURE__ */ React18.createElement("div", {
     style: { display: "flex", alignItems: "center", gap: "8px" }
-  }, /* @__PURE__ */ React17.createElement(Activity2, {
+  }, /* @__PURE__ */ React18.createElement(Activity2, {
     size: 16,
     color: theme.colors.primary
-  }), /* @__PURE__ */ React17.createElement("h3", {
+  }), /* @__PURE__ */ React18.createElement("h3", {
     style: {
       margin: 0,
       fontSize: theme.fontSizes[1],
       fontWeight: "bold",
       color: theme.colors.text
     }
-  }, title), stats.testFiles > 0 && /* @__PURE__ */ React17.createElement("span", {
+  }, title), stats.testFiles > 0 && /* @__PURE__ */ React18.createElement("span", {
     style: {
       backgroundColor: percentageColor,
       color: "#ffffff",
@@ -3581,14 +3750,14 @@ var TelemetryCoverageFileTreeContainer = ({
       fontWeight: "bold",
       fontFamily: "monospace"
     }
-  }, stats.percentage, "%"), isLoading && /* @__PURE__ */ React17.createElement(RefreshCw2, {
+  }, stats.percentage, "%"), isLoading && /* @__PURE__ */ React18.createElement(RefreshCw2, {
     size: 16,
     color: theme.colors.text,
     className: "telemetry-coverage-spinner",
     style: { animation: "spin 1s linear infinite" }
-  })), /* @__PURE__ */ React17.createElement("div", {
+  })), /* @__PURE__ */ React18.createElement("div", {
     style: { display: "flex", gap: "8px" }
-  }, /* @__PURE__ */ React17.createElement("button", {
+  }, /* @__PURE__ */ React18.createElement("button", {
     onClick: toggleShowUncoveredFiles,
     style: {
       background: "none",
@@ -3603,11 +3772,11 @@ var TelemetryCoverageFileTreeContainer = ({
       color: theme.colors.text
     },
     title: showUncoveredFiles ? "Show only covered files" : "Show all test files"
-  }, showUncoveredFiles ? /* @__PURE__ */ React17.createElement(EyeOff2, {
+  }, showUncoveredFiles ? /* @__PURE__ */ React18.createElement(EyeOff2, {
     size: 14
-  }) : /* @__PURE__ */ React17.createElement(Eye2, {
+  }) : /* @__PURE__ */ React18.createElement(Eye2, {
     size: 14
-  }), showUncoveredFiles ? "Hide uncovered" : "Show all"), onRefresh && /* @__PURE__ */ React17.createElement("button", {
+  }), showUncoveredFiles ? "Hide uncovered" : "Show all"), onRefresh && /* @__PURE__ */ React18.createElement("button", {
     onClick: handleRefresh,
     disabled: isLoading,
     style: {
@@ -3624,9 +3793,9 @@ var TelemetryCoverageFileTreeContainer = ({
       opacity: isLoading ? 0.6 : 1
     },
     title: "Refresh coverage data"
-  }, /* @__PURE__ */ React17.createElement(RefreshCw2, {
+  }, /* @__PURE__ */ React18.createElement(RefreshCw2, {
     size: 14
-  }), "Refresh"))), error && /* @__PURE__ */ React17.createElement("div", {
+  }), "Refresh"))), error && /* @__PURE__ */ React18.createElement("div", {
     style: {
       display: "flex",
       alignItems: "center",
@@ -3639,36 +3808,36 @@ var TelemetryCoverageFileTreeContainer = ({
       color: "#856404",
       marginBottom: "8px"
     }
-  }, /* @__PURE__ */ React17.createElement(AlertCircle5, {
+  }, /* @__PURE__ */ React18.createElement(AlertCircle5, {
     size: 14
-  }), error), !error && stats.testFiles > 0 && /* @__PURE__ */ React17.createElement("div", {
+  }), error), !error && stats.testFiles > 0 && /* @__PURE__ */ React18.createElement("div", {
     style: {
       display: "flex",
       gap: "16px",
       fontSize: theme.fontSizes[0],
       color: theme.colors.textSecondary || "#666"
     }
-  }, /* @__PURE__ */ React17.createElement("span", null, /* @__PURE__ */ React17.createElement("strong", {
+  }, /* @__PURE__ */ React18.createElement("span", null, /* @__PURE__ */ React18.createElement("strong", {
     style: { color: "#22c55e" }
-  }, stats.coveredFiles), " covered"), stats.partialFiles > 0 && /* @__PURE__ */ React17.createElement("span", null, /* @__PURE__ */ React17.createElement("strong", {
+  }, stats.coveredFiles), " covered"), stats.partialFiles > 0 && /* @__PURE__ */ React18.createElement("span", null, /* @__PURE__ */ React18.createElement("strong", {
     style: { color: "#eab308" }
-  }, stats.partialFiles), " partial"), /* @__PURE__ */ React17.createElement("span", null, /* @__PURE__ */ React17.createElement("strong", {
+  }, stats.partialFiles), " partial"), /* @__PURE__ */ React18.createElement("span", null, /* @__PURE__ */ React18.createElement("strong", {
     style: { color: "#6b7280" }
-  }, stats.uncoveredFiles), " uncovered"), /* @__PURE__ */ React17.createElement("span", {
+  }, stats.uncoveredFiles), " uncovered"), /* @__PURE__ */ React18.createElement("span", {
     style: { marginLeft: "auto" }
-  }, stats.totalTraced, "/", stats.totalTests, " tests traced")), !error && stats.testFiles === 0 && /* @__PURE__ */ React17.createElement("div", {
+  }, stats.totalTraced, "/", stats.totalTests, " tests traced")), !error && stats.testFiles === 0 && /* @__PURE__ */ React18.createElement("div", {
     style: {
       fontSize: theme.fontSizes[0],
       color: theme.colors.textSecondary || "#666"
     }
-  }, "No test files with coverage data found")), /* @__PURE__ */ React17.createElement(DirectoryFilterInput, {
+  }, "No test files with coverage data found")), /* @__PURE__ */ React18.createElement(DirectoryFilterInput, {
     fileTree,
     theme,
     filters,
     onFiltersChange: setFilters
-  }), /* @__PURE__ */ React17.createElement("div", {
+  }), /* @__PURE__ */ React18.createElement("div", {
     style: { flex: 1, marginTop: "1rem", overflow: "hidden" }
-  }, /* @__PURE__ */ React17.createElement(TelemetryCoverageFileTree, {
+  }, /* @__PURE__ */ React18.createElement(TelemetryCoverageFileTree, {
     fileTree,
     theme,
     coverageData,
@@ -3704,6 +3873,7 @@ export {
   TelemetryCoverageFileTreeContainer,
   TelemetryCoverageFileTree,
   StoryboardWorkflowsTreeCore,
+  StatusBar,
   RepositoryTreeCore,
   OrderedFileList,
   MultiFileTreeCore,

package/dist/src/components/CanvasListTree/CanvasListTreeCore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CanvasListTreeCore.d.ts","sourceRoot":"","sources":["../../../../src/components/CanvasListTree/CanvasListTreeCore.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAQ/C,OAAO,KAAK,EAEV,mBAAmB,EAEpB,MAAM,SAAS,CAAC;AAuNjB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuK5D,CAAC"}
+{"version":3,"file":"CanvasListTreeCore.d.ts","sourceRoot":"","sources":["../../../../src/components/CanvasListTree/CanvasListTreeCore.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAQpE,OAAO,KAAK,EAEV,mBAAmB,EAEpB,MAAM,SAAS,CAAC;AAuNjB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0M5D,CAAC"}

package/dist/src/components/CanvasListTree/types.d.ts

@@ -20,6 +20,19 @@ export interface CanvasListTreeProps {
     selectedNodeId?: string;
     defaultOpen?: boolean;
     initialOpenState?: Record<string, boolean>;
+    /**
+     * Controlled open state for tree nodes. When provided, the tree becomes controlled.
+     * Keys are node IDs, values are boolean (true = open, false = closed).
+     * Use with onToggle to handle state changes.
+     */
+    openState?: Record<string, boolean>;
+    /**
+     * Callback fired when a node is toggled open/closed.
+     * Use with openState for controlled mode.
+     * @param nodeId - The ID of the toggled node
+     * @param isOpen - Whether the node is now open
+     */
+    onToggle?: (nodeId: string, isOpen: boolean) => void;
     horizontalNodePadding?: string;
     verticalNodePadding?: string;
     verticalPadding?: string;

package/dist/src/components/CanvasListTree/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/CanvasListTree/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG5D,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErF,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAGhC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B,aAAa,CAAC,EAAE,aAAa,EAAE,CAAC;IAGhC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,UAAU,GAAG,SAAS,CAAC;CACtE"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/CanvasListTree/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG5D,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErF,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAGhC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B,aAAa,CAAC,EAAE,aAAa,EAAE,CAAC;IAGhC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,UAAU,GAAG,SAAS,CAAC;CACtE"}

package/dist/src/components/StoryboardWorkflowsTree/StatusBar.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface StatusBarSegment {
+    /** Number of items in this segment */
+    count: number;
+    /** Color for this segment (hex or CSS color) */
+    color: string;
+    /** Optional label for tooltip */
+    label?: string;
+}
+export interface StatusBarProps {
+    /** Array of segments to display */
+    segments: StatusBarSegment[];
+    /** Total width of the bar in pixels (default: 72) */
+    width?: number;
+    /** Height of the bar in pixels (default: 6) */
+    height?: number;
+    /** Gap between segments in pixels (default: 1) */
+    gap?: number;
+    /** Border radius in pixels (default: 0) */
+    borderRadius?: number;
+}
+/**
+ * A small inline status bar showing color-coded segments.
+ * Used to visualize scenario coverage or node implementation status.
+ */
+export declare const StatusBar: React.FC<StatusBarProps>;
+//# sourceMappingURL=StatusBar.d.ts.map

package/dist/src/components/StoryboardWorkflowsTree/StatusBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../src/components/StoryboardWorkflowsTree/StatusBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,mCAAmC;IACnC,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kDAAkD;IAClD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2CAA2C;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiF9C,CAAC"}

package/dist/src/components/StoryboardWorkflowsTree/StoryboardWorkflowsTree.stories.d.ts

@@ -31,4 +31,5 @@ export declare const GitStatusAllTypes: Story;
 export declare const GitStatusWithVersionGrouping: Story;
 export declare const GitStatusMixedScenarios: Story;
 export declare const DragAndDropTest: Story;
+export declare const WithStatusBars: Story;
 //# sourceMappingURL=StoryboardWorkflowsTree.stories.d.ts.map

package/dist/src/components/StoryboardWorkflowsTree/StoryboardWorkflowsTree.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryboardWorkflowsTree.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/StoryboardWorkflowsTree/StoryboardWorkflowsTree.stories.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAyP5E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,2BAA2B,CAOlD,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAuE7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAkEpC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgE7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAwB/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAiBlC,CAAC;AA4CF,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqEvC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAyFvC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAiH9B,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KA2GzC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAyEzC,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,KAwF3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA0H/B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAwF1C,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAuIrC,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,KAqK7B,CAAC"}
+{"version":3,"file":"StoryboardWorkflowsTree.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/StoryboardWorkflowsTree/StoryboardWorkflowsTree.stories.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,2BAA2B,EAAE,MAAM,+BAA+B,CAAC;AAyP5E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,2BAA2B,CAOlD,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,2BAA2B,CAAC,CAAC;AAE1D,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAO3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAOhC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAuE7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAkEpC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAgE7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAwB/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAiBlC,CAAC;AA4CF,eAAO,MAAM,eAAe,EAAE,KAe7B,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAqEvC,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAyFvC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAiH9B,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KA2GzC,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAyEzC,CAAC;AAMF,eAAO,MAAM,aAAa,EAAE,KAwF3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA0H/B,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,KAwF1C,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,KAuIrC,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,KAqK7B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAoH5B,CAAC"}

package/dist/src/components/StoryboardWorkflowsTree/StoryboardWorkflowsTreeCore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StoryboardWorkflowsTreeCore.d.ts","sourceRoot":"","sources":["../../../../src/components/StoryboardWorkflowsTree/StoryboardWorkflowsTreeCore.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAQ/C,OAAO,KAAK,EAEV,4BAA4B,EAK7B,MAAM,SAAS,CAAC;AA4XjB,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA2O9E,CAAC"}
+{"version":3,"file":"StoryboardWorkflowsTreeCore.d.ts","sourceRoot":"","sources":["../../../../src/components/StoryboardWorkflowsTree/StoryboardWorkflowsTreeCore.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAC;AASpE,OAAO,KAAK,EAEV,4BAA4B,EAO7B,MAAM,SAAS,CAAC;AAwYjB,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAoW9E,CAAC"}

package/dist/src/components/StoryboardWorkflowsTree/types.d.ts

@@ -11,6 +11,35 @@ export type StoryboardWorkflowNodeType = 'version' | 'package' | 'storyboard' |
  * - 'without-traces': Show only workflows that don't have traces
  */
 export type StoryboardFilterMode = 'all' | 'with-traces' | 'without-traces';
+/**
+ * Status bar data for workflow scenarios
+ * Key is workflow ID
+ */
+export interface WorkflowScenarioStatus {
+    /** Array of scenario statuses in order */
+    scenarios: Array<{
+        id: string;
+        hasTrace: boolean;
+        /** Implementation status of nodes in this scenario */
+        implementationStatus?: 'draft' | 'partial' | 'implemented';
+    }>;
+}
+/**
+ * Which status bars to display
+ */
+export type StatusBarDisplay = 'implementation' | 'traces' | 'both';
+/**
+ * Status bar data for canvas nodes
+ * Key is canvas path or storyboard ID
+ */
+export interface CanvasNodeStatus {
+    /** Number of implemented nodes */
+    implemented: number;
+    /** Number of approved (but not implemented) nodes */
+    approved: number;
+    /** Number of draft nodes */
+    draft: number;
+}
 export interface StoryboardWorkflowNodeData extends TreeNodeData {
     type: StoryboardWorkflowNodeType;
     children?: StoryboardWorkflowNodeData[];
@@ -26,6 +55,8 @@ export interface StoryboardWorkflowNodeData extends TreeNodeData {
     repositoryUrl?: string;
     commitSha?: string;
     gitStatus?: GitStatus;
+    scenarioStatus?: WorkflowScenarioStatus;
+    canvasNodeStatus?: CanvasNodeStatus;
 }
 /**
  * Type guard to check if a workflow node has full content (WorkflowTemplate with scenarios)
@@ -42,6 +73,19 @@ export interface StoryboardWorkflowsTreeProps {
     selectedNodeId?: string;
     defaultOpen?: boolean;
     initialOpenState?: Record<string, boolean>;
+    /**
+     * Controlled open state for tree nodes. When provided, the tree becomes controlled.
+     * Keys are node IDs, values are boolean (true = open, false = closed).
+     * Use with onToggle to handle state changes.
+     */
+    openState?: Record<string, boolean>;
+    /**
+     * Callback fired when a node is toggled open/closed.
+     * Use with openState for controlled mode.
+     * @param nodeId - The ID of the toggled node
+     * @param isOpen - Whether the node is now open
+     */
+    onToggle?: (nodeId: string, isOpen: boolean) => void;
     horizontalNodePadding?: string;
     verticalNodePadding?: string;
     verticalPadding?: string;
@@ -51,6 +95,12 @@ export interface StoryboardWorkflowsTreeProps {
     workflowFilterMode?: StoryboardFilterMode;
     traceWorkflowsSet?: Set<string>;
     gitStatusData?: GitFileStatus[];
+    /** Map of workflow ID to scenario status (for showing scenario coverage bars) */
+    scenarioStatusMap?: Record<string, WorkflowScenarioStatus>;
+    /** Map of canvas path (or storyboard ID) to node status (for showing implementation bars) */
+    canvasNodeStatusMap?: Record<string, CanvasNodeStatus>;
+    /** Which status bars to display: 'implementation', 'traces', or 'both' (default: 'both') */
+    statusBarDisplay?: StatusBarDisplay;
     /**
      * Enable dragging nodes to other panels (e.g., terminal).
      * When enabled, nodes will transfer their path/data using the panel-framework-core format.

package/dist/src/components/StoryboardWorkflowsTree/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/StoryboardWorkflowsTree/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,6BAA6B,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEtL,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG5D,YAAY,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,6BAA6B,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAC;AAE7I,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;AAEjI;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,KAAK,GAAG,aAAa,GAAG,gBAAgB,CAAC;AAE5E,MAAM,WAAW,0BAA2B,SAAQ,YAAY;IAC9D,IAAI,EAAE,0BAA0B,CAAC;IACjC,QAAQ,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAGxC,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAI1B,QAAQ,CAAC,EAAE,kBAAkB,GAAG,6BAA6B,CAAC;IAE9D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,0BAA0B,GAC/B,IAAI,IAAI,0BAA0B,GAAG;IAAE,QAAQ,EAAE,6BAA6B,CAAA;CAAE,CAMlF;AAED,MAAM,WAAW,4BAA4B;IAC3C,WAAW,EAAE,oBAAoB,EAAE,CAAC;IACpC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,IAAI,CAAC;IACpD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAG9C,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,kBAAkB,CAAC,EAAE,oBAAoB,CAAC;IAC1C,iBAAiB,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAGhC,aAAa,CAAC,EAAE,aAAa,EAAE,CAAC;IAGhC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,0BAA0B,KAAK,UAAU,GAAG,SAAS,CAAC;CAC9E"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/StoryboardWorkflowsTree/types.ts"],"names":[],"mappings":"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"}

package/dist/src/hooks/useDndManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDndManager.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDndManager.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,mBAAmB,QAAO,eAAe,GAAG,SAGxD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,2BAAyB,KAAG;IAAE,WAAW,EAAE,OAAO,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAKnG,CAAC"}
+{"version":3,"file":"useDndManager.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDndManager.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAIhD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,mBAAmB,QAAO,eAAe,GAAG,SAGxD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,GAAI,2BAAyB,KAAG;IAAE,WAAW,EAAE,OAAO,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAKnG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ade/dynamic-file-tree",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "React component for selective directory filtering and file tree visualization",
   "type": "module",
   "main": "dist/index.mjs",