@principal-ai/subsystems-react 0.56.11 → 0.56.13

package/dist/subsystem/SubsystemComponentGraph.js

@@ -34,6 +34,7 @@ import { GRAPH_CANVAS_CLASS, GRAPH_NAV_PROPS, GraphChrome, GraphLayerStyle, LAYO
 import { ComponentDeclaration } from './ComponentDeclaration';
 import { FileDrawer, FILE_DRAWER_HEIGHT_MS } from './FileDrawer';
 import { GraphWithSidebar } from './GraphWithSidebar';
+import { DescriptionOverlay } from './DescriptionOverlay';
 import { TrailsPanel, TRAIL_PLAY_PAUSE_MS } from './TrailsPanel';
 import { EDGE_LABEL_WIDTH, EDGE_LABEL_HEIGHT, EDGE_LABEL_FONT_SIZE, EDGE_LABEL_CLOUD_PATH, EDGE_LABEL_CLOUD_EXTRA_TOP, } from '../utils/edgeLabel';
 /** Identifiers a token could match to name this component as a construct. */
@@ -130,6 +131,7 @@ const TrailDrawerContent = memo(function TrailDrawerContent({ render, trail, ste
 function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirection: layoutDirectionProp, defaultLayoutDirection = 'horizontal', onLayoutDirectionChange, hideLayoutToggle = false, refocusOnLayoutFlip = true, initialTrailId, onTrailSelect, onTrailStepHover, onReorderTrails, stepEmphasis, onRemoveStepEmphasis, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, moduleNesting, edgeView, hideSidebar, trailStepMode = 'focus', autoPlayTrails = false, trailAutoPlayIntervalMs = TRAIL_PLAY_PAUSE_MS, zoomOnTrailFocus = true, trailFocusDurationMs = 300, graphTitle, showTrailTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, issues, showIssues, filesActive, sidebarScope, onSidebarTrailChange, focusIssueCategory, laneStatus, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileViewer, renderTrailViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, codeProcessKeys, hideDrawer = false, persistKey, liveEvents, agentsPanel }) {
     const { theme } = useTheme();
     const { fitView, fitBounds } = useReactFlow();
+    const [descriptionOpen, setDescriptionOpen] = useState(false);
     const viewport = useViewport();
     // Restored once per mount from `localStorage` (see `readViewState`). Each
     // graph is its own tab/mount, so `persistKey` is stable for a mount.
@@ -725,7 +727,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
     // node says "diagnostics here" for every finding the sidebar lists.
     const issueBadgeByAlias = useMemo(() => {
         const map = new Map();
-        if (!issues?.length)
+        if (showIssues !== true || !issues?.length)
             return map;
         for (const issue of issues) {
             const rung = issueRung(issue.kind);
@@ -760,7 +762,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
                 map.set(alias, { ...badge, kind: kinded.kind });
         }
         return map;
-    }, [issues, issueComponent]);
+    }, [showIssues, issues, issueComponent]);
     // Per-frame diagnostics badge: the same fold, but for findings about a
     // BOUNDARY rather than a construct. Keyed by the region's React Flow node
     // id — a `module` target names a module frame, a `process` target a process
@@ -770,7 +772,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
     // borrowing its layer's icon would imply the frame is at fault for it.
     const regionIssueByNodeId = useMemo(() => {
         const map = new Map();
-        if (!issues?.length)
+        if (showIssues !== true || !issues?.length)
             return map;
         for (const issue of issues) {
             const target = issue.target;
@@ -791,7 +793,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
             });
         }
         return map;
-    }, [issues]);
+    }, [showIssues, issues]);
     // Per-edge step verification badge: maps edge IDs to step verification status.
     // Keyed by the React Flow edge id (from → mechanism → to). An edge can have
     // multiple steps with issues; we show the worst status.
@@ -804,7 +806,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
             step_span_stale: 1,
         };
         const map = new Map();
-        if (!issues?.length || !trails?.length) {
+        if (showIssues !== true || !issues?.length || !trails?.length) {
             return map;
         }
         for (const issue of issues) {
@@ -831,7 +833,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
             });
         }
         return map;
-    }, [issues, trails, issueStep]);
+    }, [showIssues, issues, trails, issueStep]);
     // Expanded verification layers in the diagnostics list. When any layer with
     // findings is expanded, the canvas dims everything that layer does not
     // implicate (see `issueFocus`). The list publishes this through
@@ -864,7 +866,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
     // Returns null when nothing is expanded, no expanded layer has findings, or
     // the findings implicate nothing — so no dimming is applied.
     const issueFocus = useMemo(() => {
-        if (!issues?.length || expandedIssueCategories.length === 0)
+        if (showIssues !== true || !issues?.length || expandedIssueCategories.length === 0)
             return null;
         const active = new Set(expandedIssueCategories);
         const activeIssues = issues.filter((i) => active.has(issueCategory(i)));
@@ -927,7 +929,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
                 edgeIds.add(e.id);
         }
         return { nodeIds, edgeIds };
-    }, [issues, expandedIssueCategories, components, trails, resolveAlias]);
+    }, [showIssues, issues, expandedIssueCategories, components, trails, resolveAlias]);
     const issueFocusNodeIds = issueFocus?.nodeIds ?? null;
     const issueFocusEdgeIds = issueFocus?.edgeIds ?? null;
     // When an edge is selected, dim every other edge + its label to focus it.
@@ -2057,9 +2059,25 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
             : undefined
         : undefined;
     // Header block: extras, then the description.
-    const sidebarHeader = (_jsxs(_Fragment, { children: [sidebarExtra, description && (_jsx("div", { style: { fontSize: theme.fontSizes[0], lineHeight: 1.5 }, children: _jsx(IndustryMarkdownSlide, { content: description, slideIdPrefix: "subsystem-desc", slideIndex: 0, isVisible: true, theme: theme, disableScroll: true, disableBasePadding: true, enableKeyboardScrolling: false, autoFocusOnVisible: false }) })), sidebarAfterDescription] }));
+    const sidebarHeader = (_jsxs(_Fragment, { children: [sidebarExtra, description && (_jsxs("div", { style: { fontSize: theme.fontSizes[0], lineHeight: 1.5 }, children: [_jsx("div", { style: {
+                            display: '-webkit-box',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 6,
+                            maxHeight: '9em',
+                            overflow: 'hidden',
+                        }, children: _jsx(IndustryMarkdownSlide, { content: description, slideIdPrefix: "subsystem-desc", slideIndex: 0, isVisible: true, theme: theme, disableScroll: true, disableBasePadding: true, enableKeyboardScrolling: false, autoFocusOnVisible: false }) }), _jsx("button", { type: "button", "aria-label": "Read full description", "aria-haspopup": "dialog", "aria-expanded": descriptionOpen, onClick: () => setDescriptionOpen(true), style: {
+                            marginTop: 6,
+                            padding: 0,
+                            border: 'none',
+                            background: 'transparent',
+                            color: theme.colors.textSecondary,
+                            fontFamily: theme.fonts.body,
+                            fontSize: theme.fontSizes[0],
+                            textDecoration: 'underline',
+                            cursor: 'pointer',
+                        }, children: "More" })] })), sidebarAfterDescription] }));
     // Lower panel: diagnostics, the file tree, or the trail flow list.
-    const sidebarPanel = issuesActive ? (diagnosticsTab === 'agents' && agentsPanel && !sidebarTrail ? (_jsx(SubsystemAgentsPanel, { ...agentsPanel })) : (_jsx(SubsystemIssueList, { issues: sidebarScope.issues, focusCategory: focusIssueCategory, laneStatus: sidebarTrail ? undefined : laneStatus, onSelectIssue: focusIssueTarget, onDeselectIssue: unfocusIssueTarget, onApplyFix: onApplyIssueFix, onHoverIssue: onHoverIssue, onExpandedCategoriesChange: handleExpandedCategoriesChange }))) : filesActive ? treePaths.entries.length === 0 ? (_jsx("div", { style: { padding: 16, color: theme.colors.textSecondary }, children: "No files for this trail." })) : (_jsx(SubsystemFileTree, { files: treeFilePaths, selectedFile: openFile ? treePaths.toDisplay.get(openFile) : null, onSelectFile: (path) => {
+    const sidebarPanel = issuesActive ? (diagnosticsTab === 'agents' && agentsPanel && !sidebarTrail ? (_jsx(SubsystemAgentsPanel, { ...agentsPanel })) : (_jsx(SubsystemIssueList, { issues: sidebarScope.issues, focusCategory: focusIssueCategory, laneStatus: sidebarTrail ? undefined : laneStatus, onSelectIssue: focusIssueTarget, onDeselectIssue: unfocusIssueTarget, onApplyFix: onApplyIssueFix, onHoverIssue: onHoverIssue, onExpandedCategoriesChange: handleExpandedCategoriesChange }))) : filesActive ? treePaths.entries.length === 0 ? (_jsx("div", { style: { padding: 16, color: theme.colors.textSecondary }, children: "No files for this trail." })) : (_jsx(SubsystemFileTree, { headerless: true, files: treeFilePaths, selectedFile: openFile ? treePaths.toDisplay.get(openFile) : null, onSelectFile: (path) => {
             const file = treePaths.toFile.get(path);
             if (file)
                 onOpenDeclarationFile(file);
@@ -2102,279 +2120,279 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
                             fontSize: theme.fontSizes[0],
                             color: theme.colors.textMuted ?? theme.colors.textSecondary,
                         }, children: fileOverlay.file }), _jsx(FileOverlayCloseButton, { onClose: closeFileOverlay })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: _jsx(FileDrawerContent, { render: renderDrawerContent, file: fileOverlay.file, startLine: fileOverlay.startLine, endLine: fileOverlay.endLine, fullFile: true }) })] }));
-    return (_jsx(GraphWithSidebar, { hidden: !sidebarVisible, bodyHidden: !sidebarBodyVisible, headerMaxHeight: sidebarBodyVisible ? '30%' : '100%', header: sidebarHeader, tabs: sidebarTabs, activeTab: diagnosticsTab, onTabChange: (id) => setDiagnosticsTab(id), sidebarBody: sidebarBody, tabListLabel: issuesActive ? 'Diagnostics view' : 'Sidebar view', defaultWidth: persisted.sidebarWidth ?? 450, minWidth: 240, maxWidth: sidebarMaxWidth, persistKey: persistKey, onResizeEnd: () => requestAnimationFrame(() => fitView()), children: _jsxs("div", { style: { flex: 1, position: 'relative', display: 'flex', flexDirection: committedDirection === 'vertical' ? 'row' : 'column', minHeight: 0, minWidth: 0 }, children: [_jsxs("div", { className: layoutFlipping ? LAYOUT_FLIP_CLASS : undefined, style: {
-                        position: 'relative',
-                        flex: collapseCanvas ? 0 : 1,
-                        minHeight: 0,
-                        minWidth: 0,
-                        height: collapseCanvas ? 0 : undefined,
-                        overflow: 'hidden',
-                        display: 'flex',
-                        flexDirection: 'column',
-                    }, children: [showEdgeLabels !== false && (_jsx("div", { style: {
-                                position: 'absolute',
-                                inset: 0,
-                                overflow: 'hidden',
-                                pointerEvents: 'none',
-                                zIndex: 5,
-                                opacity: layoutFlipping ? 0 : 1,
-                                transition: `opacity ${LAYOUT_FLIP_EDGE_MS}ms ease`,
-                            }, children: edgeLabels.map((lbl) => {
-                                const mechanism = lbl.mechanism;
-                                const isGraphify = lbl.provenance === 'graphify';
-                                const color = edgeColor({ mechanism, provenance: lbl.provenance });
-                                // Label chrome stays the crisp rounded box for every edge — graphify
-                                // provenance is carried by hue (GRAPHIFY_RELATION_COLOR), the dashed
-                                // stroke, and the tooltip, NOT by the "ambiguous" cloud silhouette
-                                // (that idiom is reserved for soft authored mechanisms).
-                                const verifiable = true;
-                                const labelTitle = isGraphify
-                                    ? 'Derived from graphify (static symbol graph)'
-                                    : MECHANISM_DESCRIPTIONS.find(([m]) => m === mechanism)?.[2] === false
-                                        ? 'Not directly verifiable with graphify'
-                                        : undefined;
-                                const screenX = lbl.midX * viewport.zoom + viewport.x;
-                                const screenY = lbl.midY * viewport.zoom + viewport.y;
-                                const text = lbl.stepNos?.length
-                                    ? `${lbl.stepNos.map((n) => `${n}:`).join(' ')} ${lbl.mechanism}`
-                                    : lbl.mechanism;
-                                return (_jsxs("div", { "data-edge-label": lbl.id, title: labelTitle, onClick: (e) => {
-                                        e.stopPropagation();
-                                        selectEdge(lbl.id);
-                                    }, style: {
-                                        position: 'absolute',
-                                        left: screenX,
-                                        top: screenY,
-                                        // Center on the flow-space midpoint, and scale with the graph
-                                        // (flow-space size): labels shrink as you zoom out instead of
-                                        // staying fixed-screen-size and dominating the smaller graph.
-                                        transform: `translate(-50%, -50%) scale(${viewport.zoom})`,
-                                        transformOrigin: 'center center',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        width: EDGE_LABEL_WIDTH,
-                                        height: EDGE_LABEL_HEIGHT,
-                                        boxSizing: 'border-box',
-                                        padding: '7px 8px',
-                                        cursor: 'pointer',
-                                        pointerEvents: 'auto',
-                                        opacity: lbl.dimmed ? 0.15 : 1,
-                                    }, children: [verifiable ? (_jsx("span", { "aria-hidden": true, style: {
-                                                position: 'absolute',
-                                                inset: 0,
-                                                borderRadius: 4,
-                                                border: `0.5px solid ${color}`,
-                                                background: theme.colors.backgroundSecondary ?? theme.colors.background,
-                                                pointerEvents: 'none',
-                                            } })) : (_jsx("svg", { "aria-hidden": true, width: EDGE_LABEL_WIDTH, height: EDGE_LABEL_HEIGHT + EDGE_LABEL_CLOUD_EXTRA_TOP, viewBox: `0 0 ${EDGE_LABEL_WIDTH} ${EDGE_LABEL_HEIGHT + EDGE_LABEL_CLOUD_EXTRA_TOP}`, style: {
-                                                position: 'absolute',
-                                                left: 0,
-                                                top: -EDGE_LABEL_CLOUD_EXTRA_TOP,
-                                                pointerEvents: 'none',
-                                            }, children: _jsx("path", { d: EDGE_LABEL_CLOUD_PATH, fill: theme.colors.backgroundSecondary ?? theme.colors.background, stroke: hexWithAlpha(color, 0.75), strokeWidth: 1.2, strokeLinejoin: "round" }) })), _jsx("span", { style: {
-                                                position: 'relative',
-                                                display: 'block',
-                                                maxWidth: '100%',
-                                                overflow: 'hidden',
-                                                textOverflow: 'ellipsis',
-                                                whiteSpace: 'nowrap',
-                                                fontSize: EDGE_LABEL_FONT_SIZE,
-                                                lineHeight: 1,
-                                                fontFamily: theme.fonts.monospace,
-                                                fontWeight: 500,
-                                                color,
-                                            }, children: text }), lbl.stepIssue && (() => {
-                                            const StepIssueIcon = ISSUE_KIND_ICON[lbl.stepIssue.kind];
-                                            // Match IssueList: error severity = red, info severity = amber
-                                            const issueColor = lbl.stepIssue.severity === 'error'
-                                                ? (theme.colors.error ?? '#e5534b')
-                                                : (theme.colors.warning ?? '#d4a017');
-                                            const badgeBg = theme.colors.backgroundSecondary ?? theme.colors.background;
-                                            return (_jsxs("span", { "aria-hidden": true, title: lbl.stepIssue.kind === 'step_span_stale'
-                                                    ? 'Call site changed since verification'
-                                                    : lbl.stepIssue.kind === 'step_site_outside_from'
-                                                        ? 'Calls site is outside its source component'
-                                                        : 'Call site not yet verified', style: {
+    return (_jsxs(GraphWithSidebar, { hidden: !sidebarVisible, bodyHidden: !sidebarBodyVisible, header: sidebarHeader, tabs: sidebarTabs, activeTab: diagnosticsTab, onTabChange: (id) => setDiagnosticsTab(id), sidebarBody: sidebarBody, tabListLabel: issuesActive ? 'Diagnostics view' : 'Sidebar view', defaultWidth: persisted.sidebarWidth ?? 450, minWidth: 240, maxWidth: sidebarMaxWidth, persistKey: persistKey, onResizeEnd: () => requestAnimationFrame(() => fitView()), children: [!hideSidebar && description && descriptionOpen && (_jsx(DescriptionOverlay, { description: description, onClose: () => setDescriptionOpen(false) })), _jsxs("div", { style: { flex: 1, position: 'relative', display: 'flex', flexDirection: committedDirection === 'vertical' ? 'row' : 'column', minHeight: 0, minWidth: 0 }, children: [_jsxs("div", { className: layoutFlipping ? LAYOUT_FLIP_CLASS : undefined, style: {
+                            position: 'relative',
+                            flex: collapseCanvas ? 0 : 1,
+                            minHeight: 0,
+                            minWidth: 0,
+                            height: collapseCanvas ? 0 : undefined,
+                            overflow: 'hidden',
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: [showEdgeLabels !== false && (_jsx("div", { style: {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    overflow: 'hidden',
+                                    pointerEvents: 'none',
+                                    zIndex: 5,
+                                    opacity: layoutFlipping ? 0 : 1,
+                                    transition: `opacity ${LAYOUT_FLIP_EDGE_MS}ms ease`,
+                                }, children: edgeLabels.map((lbl) => {
+                                    const mechanism = lbl.mechanism;
+                                    const isGraphify = lbl.provenance === 'graphify';
+                                    const color = edgeColor({ mechanism, provenance: lbl.provenance });
+                                    // Label chrome stays the crisp rounded box for every edge — graphify
+                                    // provenance is carried by hue (GRAPHIFY_RELATION_COLOR), the dashed
+                                    // stroke, and the tooltip, NOT by the "ambiguous" cloud silhouette
+                                    // (that idiom is reserved for soft authored mechanisms).
+                                    const verifiable = true;
+                                    const labelTitle = isGraphify
+                                        ? 'Derived from graphify (static symbol graph)'
+                                        : MECHANISM_DESCRIPTIONS.find(([m]) => m === mechanism)?.[2] === false
+                                            ? 'Not directly verifiable with graphify'
+                                            : undefined;
+                                    const screenX = lbl.midX * viewport.zoom + viewport.x;
+                                    const screenY = lbl.midY * viewport.zoom + viewport.y;
+                                    const text = lbl.stepNos?.length
+                                        ? `${lbl.stepNos.map((n) => `${n}:`).join(' ')} ${lbl.mechanism}`
+                                        : lbl.mechanism;
+                                    return (_jsxs("div", { "data-edge-label": lbl.id, title: labelTitle, onClick: (e) => {
+                                            e.stopPropagation();
+                                            selectEdge(lbl.id);
+                                        }, style: {
+                                            position: 'absolute',
+                                            left: screenX,
+                                            top: screenY,
+                                            // Center on the flow-space midpoint, and scale with the graph
+                                            // (flow-space size): labels shrink as you zoom out instead of
+                                            // staying fixed-screen-size and dominating the smaller graph.
+                                            transform: `translate(-50%, -50%) scale(${viewport.zoom})`,
+                                            transformOrigin: 'center center',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            width: EDGE_LABEL_WIDTH,
+                                            height: EDGE_LABEL_HEIGHT,
+                                            boxSizing: 'border-box',
+                                            padding: '7px 8px',
+                                            cursor: 'pointer',
+                                            pointerEvents: 'auto',
+                                            opacity: lbl.dimmed ? 0.15 : 1,
+                                        }, children: [verifiable ? (_jsx("span", { "aria-hidden": true, style: {
                                                     position: 'absolute',
-                                                    right: -7,
-                                                    bottom: -6,
-                                                    zIndex: 2,
-                                                    display: 'inline-flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'center',
-                                                    gap: 3,
-                                                    minWidth: 18,
-                                                    padding: '2px 4px',
+                                                    inset: 0,
                                                     borderRadius: 4,
-                                                    border: `1.5px solid ${issueColor}`,
-                                                    background: badgeBg,
+                                                    border: `0.5px solid ${color}`,
+                                                    background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                                                    pointerEvents: 'none',
+                                                } })) : (_jsx("svg", { "aria-hidden": true, width: EDGE_LABEL_WIDTH, height: EDGE_LABEL_HEIGHT + EDGE_LABEL_CLOUD_EXTRA_TOP, viewBox: `0 0 ${EDGE_LABEL_WIDTH} ${EDGE_LABEL_HEIGHT + EDGE_LABEL_CLOUD_EXTRA_TOP}`, style: {
+                                                    position: 'absolute',
+                                                    left: 0,
+                                                    top: -EDGE_LABEL_CLOUD_EXTRA_TOP,
                                                     pointerEvents: 'none',
-                                                }, children: [StepIssueIcon && (_jsx(StepIssueIcon, { size: 12, color: issueColor })), lbl.stepIssue.count > 1 && (_jsx("span", { style: {
-                                                            color: issueColor,
-                                                            fontFamily: theme.fonts.monospace,
-                                                            fontSize: 10,
-                                                            fontWeight: 700,
-                                                            lineHeight: 1,
-                                                        }, children: lbl.stepIssue.count }))] }));
-                                        })()] }, lbl.id));
-                            }) })), _jsx(GraphLayerStyle, {}), _jsx(ReactFlow, { nodes: dispNodes, edges: dispEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, className: GRAPH_CANVAS_CLASS, 
-                            // The key above remounts ReactFlow when the node/edge SET changes (a
-                            // trail-focus layout, a filtered model). A remount otherwise resets the
-                            // viewport to identity — a visible jump to scale 1 before the post-flip
-                            // refit. Seed the new instance with the viewport the old one had.
-                            defaultViewport: viewport, ...GRAPH_NAV_PROPS, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onEdgeClick: onEdgeClick, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, proOptions: { hideAttribution: true }, onPaneClick: onPaneClick, style: {
-                                width: '100%',
-                                height: '100%',
-                                flex: 1,
-                                minHeight: 0,
-                                background: theme.colors.background,
-                            }, children: _jsx(GraphChrome, {}) }, `${baseNodesKey}-${baseEdgesKey}`), !hideLayoutToggle && (_jsxs("button", { type: "button", onClick: () => changeLayoutDirection(requestedDirection === 'horizontal' ? 'vertical' : 'horizontal'), disabled: layoutFlipping, title: requestedDirection === 'horizontal'
-                                ? 'Switch to a vertical layout (top-to-bottom)'
-                                : 'Switch to a horizontal layout (left-to-right)', "aria-label": requestedDirection === 'horizontal'
-                                ? 'Switch to vertical layout'
-                                : 'Switch to horizontal layout', style: {
-                                position: 'absolute',
-                                top: 10,
-                                right: 10,
-                                zIndex: 6,
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                gap: 5,
-                                padding: '4px 9px',
-                                border: `1px solid ${theme.colors.border}`,
-                                borderRadius: 6,
-                                background: theme.colors.backgroundSecondary ?? theme.colors.background,
-                                color: theme.colors.textSecondary,
-                                fontFamily: theme.fonts.monospace,
-                                fontSize: theme.fontSizes[0],
-                                cursor: layoutFlipping ? 'default' : 'pointer',
-                                opacity: layoutFlipping ? 0.55 : 1,
-                            }, children: [requestedDirection === 'horizontal' ? (_jsx(ArrowDown, { size: 13, "aria-hidden": "true" })) : (_jsx(ArrowRight, { size: 13, "aria-hidden": "true" })), requestedDirection === 'horizontal' ? 'Vertical' : 'Horizontal'] })), unroutedIds.length > 0 && (_jsxs("div", { role: "status", title: `Edges with no routed path (not drawn):\n${unroutedIds.join('\n')}`, style: {
-                                position: 'absolute',
-                                top: 10,
-                                left: 10,
-                                zIndex: 6,
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                gap: 6,
-                                padding: '4px 10px',
-                                fontSize: theme.fontSizes[0],
-                                fontFamily: theme.fonts.body,
-                                color: theme.colors.text,
-                                background: theme.colors.backgroundSecondary ?? theme.colors.background,
-                                border: `1px solid ${theme.colors.warning ?? '#d4a017'}`,
-                                borderRadius: 6,
-                                boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
-                            }, children: [_jsx(Unlink, { size: 13, color: theme.colors.warning ?? '#d4a017', "aria-hidden": true }), unroutedIds.length, " ", unroutedIds.length === 1 ? 'edge' : 'edges', " not drawn"] })), (graphTitle || overlayTrailTitle || overlayTrailStep) && (_jsxs("div", { style: {
-                                position: 'absolute',
-                                top: 10,
-                                left: '50%',
-                                transform: 'translateX(-50%)',
-                                zIndex: 6,
-                                display: 'flex',
-                                flexDirection: 'column',
-                                alignItems: 'center',
-                                gap: 6,
-                                maxWidth: '70%',
-                                pointerEvents: 'none',
-                            }, children: [graphTitle && (_jsx("div", { style: {
-                                        maxWidth: '100%',
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        whiteSpace: 'nowrap',
-                                        padding: '6px 18px',
-                                        fontSize: theme.fontSizes[3],
-                                        fontWeight: 600,
-                                        fontFamily: theme.fonts.monospace,
-                                        color: theme.colors.text,
-                                        background: theme.colors.backgroundSecondary ?? theme.colors.background,
-                                        border: `1px solid ${theme.colors.border}`,
-                                        borderRadius: 6,
-                                        boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
-                                    }, children: graphTitle })), overlayTrailTitle && (_jsxs("div", { style: {
-                                        maxWidth: '100%',
-                                        minWidth: overlayTrailStep ? 160 : undefined,
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        background: theme.colors.backgroundSecondary ?? theme.colors.background,
-                                        border: `1px solid ${theme.colors.border}`,
-                                        borderRadius: 6,
-                                        boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
-                                        overflow: 'hidden',
-                                        opacity: 0.95,
-                                    }, "aria-label": overlayTrailStep
-                                        ? `${overlayTrailTitle}, step ${overlayTrailStep.index} of ${overlayTrailStep.total}`
-                                        : overlayTrailTitle, children: [_jsx("div", { style: {
-                                                padding: '5px 14px',
-                                                fontSize: theme.fontSizes[2] ?? theme.fontSizes[1],
-                                                fontWeight: 600,
-                                                fontFamily: theme.fonts.monospace,
-                                                color: theme.colors.text,
-                                                overflow: 'hidden',
-                                                textOverflow: 'ellipsis',
-                                                whiteSpace: 'nowrap',
-                                                textAlign: 'center',
-                                            }, children: overlayTrailTitle }), overlayTrailStep && overlayTrailStep.total > 0 && (_jsx("div", { style: {
-                                                display: 'flex',
-                                                gap: 3,
-                                                padding: '0 6px 5px',
-                                            }, "aria-hidden": "true", children: Array.from({ length: overlayTrailStep.total }, (_, i) => {
-                                                const n = i + 1;
-                                                const active = n === overlayTrailStep.index;
-                                                const done = n < overlayTrailStep.index;
-                                                return (_jsx("span", { style: {
-                                                        flex: 1,
-                                                        height: 2,
-                                                        borderRadius: 1,
-                                                        background: active
-                                                            ? (theme.colors.accent ?? theme.colors.primary ?? theme.colors.text)
-                                                            : done
-                                                                ? (theme.colors.textSecondary ?? theme.colors.text)
-                                                                : (theme.colors.border ?? 'rgba(127,127,127,0.45)'),
-                                                        opacity: active ? 1 : done ? 0.75 : 0.4,
-                                                        transition: 'opacity 120ms ease, background 120ms ease',
-                                                    } }, n));
-                                            }) }))] })), overlayTrailStep?.annotation && (_jsx("div", { style: {
-                                        maxWidth: '100%',
-                                        padding: '6px 14px',
-                                        background: theme.colors.backgroundSecondary ?? theme.colors.background,
-                                        border: `1px solid ${theme.colors.border}`,
-                                        borderRadius: 6,
-                                        boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
-                                        textAlign: 'center',
-                                        fontSize: theme.fontSizes[0],
-                                        fontFamily: theme.fonts.body,
-                                        color: theme.colors.textMuted ?? theme.colors.textSecondary,
-                                        lineHeight: 1.35,
-                                    }, children: overlayTrailStep.annotation }))] })), selected && (_jsx("div", { style: {
-                                position: 'absolute',
-                                top: 10,
-                                right: 10,
-                                zIndex: 8,
-                                width: 'min(560px, 70%)',
-                                maxHeight: '46%',
-                                overflowY: 'auto',
-                                background: theme.colors.background,
-                                border: `1px solid ${theme.colors.border}`,
-                                borderRadius: 8,
-                                boxShadow: '0 8px 24px rgba(0,0,0,0.35)',
-                            }, children: _jsx(ComponentDeclaration, { component: selected, onOpenFile: onOpenDeclarationFile, onRelatedSelect: resolveRelatedComponent, onInspectSymbol: onInspectSymbol
-                                    ? (symbol, ref) => onInspectSymbol({
-                                        purl: selected.purl,
-                                        file: selected.file,
-                                        symbol,
-                                        ref,
-                                    })
-                                    : undefined, verification: componentVerification, fileOpen: drawerTarget?.kind === 'file' &&
-                                    !!selected.file &&
-                                    selected.file === drawerTarget.file, declarationOpen: drawerTarget?.kind === 'file' &&
-                                    drawerTarget.startLine != null &&
-                                    !!selected.file &&
-                                    selected.file === drawerTarget.file &&
-                                    selected.declarationSpan?.startLine === drawerTarget.startLine }) })), committedDirection === 'vertical' && fileOverlayView] }), _jsx(FileDrawer, { title: drawerTitle, onClose: closeDrawer, placement: committedDirection === 'vertical' ? 'left' : 'bottom', onResizeEnd: () => requestAnimationFrame(() => fitView()), fillHeight: drawerFillHeight, suppressEscape: fileOverlayOpen, hidden: hideDrawer, progress: drawerProgress, children: drawerTarget?.kind === 'trail' &&
-                        focusedTrail &&
-                        renderTrailViewer ? (_jsx(TrailDrawerContent, { render: renderTrailDrawerContent, trail: focusedTrail, stepIndex: drawerTarget.stepIndex, onOpenFile: onOpenFileFromTrail, resolveSymbol: resolveTrailSymbol, onSymbolClick: openConstructDeclaration, onVisibleStepChange: setVisibleStepIndex })) : drawerTarget?.kind === 'file' ? (_jsx(FileDrawerContent, { render: renderDrawerContent, file: drawerTarget.file, startLine: drawerTarget.startLine, endLine: drawerTarget.endLine })) : null }), committedDirection !== 'vertical' && fileOverlayView, _jsx(GraphLayoutCover, { revealed: layoutReady || layoutFlipping }), canvasOverlay, liveEvents ? _jsx(MaintainLivePanel, { ...liveEvents }) : null] }) }));
+                                                }, children: _jsx("path", { d: EDGE_LABEL_CLOUD_PATH, fill: theme.colors.backgroundSecondary ?? theme.colors.background, stroke: hexWithAlpha(color, 0.75), strokeWidth: 1.2, strokeLinejoin: "round" }) })), _jsx("span", { style: {
+                                                    position: 'relative',
+                                                    display: 'block',
+                                                    maxWidth: '100%',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                    fontSize: EDGE_LABEL_FONT_SIZE,
+                                                    lineHeight: 1,
+                                                    fontFamily: theme.fonts.monospace,
+                                                    fontWeight: 500,
+                                                    color,
+                                                }, children: text }), lbl.stepIssue && (() => {
+                                                const StepIssueIcon = ISSUE_KIND_ICON[lbl.stepIssue.kind];
+                                                // Match IssueList: error severity = red, info severity = amber
+                                                const issueColor = lbl.stepIssue.severity === 'error'
+                                                    ? (theme.colors.error ?? '#e5534b')
+                                                    : (theme.colors.warning ?? '#d4a017');
+                                                const badgeBg = theme.colors.backgroundSecondary ?? theme.colors.background;
+                                                return (_jsxs("span", { "aria-hidden": true, title: lbl.stepIssue.kind === 'step_span_stale'
+                                                        ? 'Call site changed since verification'
+                                                        : lbl.stepIssue.kind === 'step_site_outside_from'
+                                                            ? 'Calls site is outside its source component'
+                                                            : 'Call site not yet verified', style: {
+                                                        position: 'absolute',
+                                                        right: -7,
+                                                        bottom: -6,
+                                                        zIndex: 2,
+                                                        display: 'inline-flex',
+                                                        alignItems: 'center',
+                                                        justifyContent: 'center',
+                                                        gap: 3,
+                                                        minWidth: 18,
+                                                        padding: '2px 4px',
+                                                        borderRadius: 4,
+                                                        border: `1.5px solid ${issueColor}`,
+                                                        background: badgeBg,
+                                                        pointerEvents: 'none',
+                                                    }, children: [StepIssueIcon && (_jsx(StepIssueIcon, { size: 12, color: issueColor })), lbl.stepIssue.count > 1 && (_jsx("span", { style: {
+                                                                color: issueColor,
+                                                                fontFamily: theme.fonts.monospace,
+                                                                fontSize: 10,
+                                                                fontWeight: 700,
+                                                                lineHeight: 1,
+                                                            }, children: lbl.stepIssue.count }))] }));
+                                            })()] }, lbl.id));
+                                }) })), _jsx(GraphLayerStyle, {}), _jsx(ReactFlow, { nodes: dispNodes, edges: dispEdges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, className: GRAPH_CANVAS_CLASS, 
+                                // The key above remounts ReactFlow when the node/edge SET changes (a
+                                // trail-focus layout, a filtered model). A remount otherwise resets the
+                                // viewport to identity — a visible jump to scale 1 before the post-flip
+                                // refit. Seed the new instance with the viewport the old one had.
+                                defaultViewport: viewport, ...GRAPH_NAV_PROPS, onNodeClick: onNodeClick, onNodeDoubleClick: onNodeDoubleClick, onEdgeClick: onEdgeClick, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, proOptions: { hideAttribution: true }, onPaneClick: onPaneClick, style: {
+                                    width: '100%',
+                                    height: '100%',
+                                    flex: 1,
+                                    minHeight: 0,
+                                    background: theme.colors.background,
+                                }, children: _jsx(GraphChrome, {}) }, `${baseNodesKey}-${baseEdgesKey}`), !hideLayoutToggle && (_jsxs("button", { type: "button", onClick: () => changeLayoutDirection(requestedDirection === 'horizontal' ? 'vertical' : 'horizontal'), disabled: layoutFlipping, title: requestedDirection === 'horizontal'
+                                    ? 'Switch to a vertical layout (top-to-bottom)'
+                                    : 'Switch to a horizontal layout (left-to-right)', "aria-label": requestedDirection === 'horizontal'
+                                    ? 'Switch to vertical layout'
+                                    : 'Switch to horizontal layout', style: {
+                                    position: 'absolute',
+                                    top: 10,
+                                    right: 10,
+                                    zIndex: 6,
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: 5,
+                                    padding: '4px 9px',
+                                    border: `1px solid ${theme.colors.border}`,
+                                    borderRadius: 6,
+                                    background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                                    color: theme.colors.textSecondary,
+                                    fontFamily: theme.fonts.monospace,
+                                    fontSize: theme.fontSizes[0],
+                                    cursor: layoutFlipping ? 'default' : 'pointer',
+                                    opacity: layoutFlipping ? 0.55 : 1,
+                                }, children: [requestedDirection === 'horizontal' ? (_jsx(ArrowDown, { size: 13, "aria-hidden": "true" })) : (_jsx(ArrowRight, { size: 13, "aria-hidden": "true" })), requestedDirection === 'horizontal' ? 'Vertical' : 'Horizontal'] })), unroutedIds.length > 0 && (_jsxs("div", { role: "status", title: `Edges with no routed path (not drawn):\n${unroutedIds.join('\n')}`, style: {
+                                    position: 'absolute',
+                                    top: 10,
+                                    left: 10,
+                                    zIndex: 6,
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: 6,
+                                    padding: '4px 10px',
+                                    fontSize: theme.fontSizes[0],
+                                    fontFamily: theme.fonts.body,
+                                    color: theme.colors.text,
+                                    background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                                    border: `1px solid ${theme.colors.warning ?? '#d4a017'}`,
+                                    borderRadius: 6,
+                                    boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
+                                }, children: [_jsx(Unlink, { size: 13, color: theme.colors.warning ?? '#d4a017', "aria-hidden": true }), unroutedIds.length, " ", unroutedIds.length === 1 ? 'edge' : 'edges', " not drawn"] })), (graphTitle || overlayTrailTitle || overlayTrailStep) && (_jsxs("div", { style: {
+                                    position: 'absolute',
+                                    top: 10,
+                                    left: '50%',
+                                    transform: 'translateX(-50%)',
+                                    zIndex: 6,
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                    gap: 6,
+                                    maxWidth: '70%',
+                                    pointerEvents: 'none',
+                                }, children: [graphTitle && (_jsx("div", { style: {
+                                            maxWidth: '100%',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap',
+                                            padding: '6px 18px',
+                                            fontSize: theme.fontSizes[3],
+                                            fontWeight: 600,
+                                            fontFamily: theme.fonts.monospace,
+                                            color: theme.colors.text,
+                                            background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                                            border: `1px solid ${theme.colors.border}`,
+                                            borderRadius: 6,
+                                            boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
+                                        }, children: graphTitle })), overlayTrailTitle && (_jsxs("div", { style: {
+                                            maxWidth: '100%',
+                                            minWidth: overlayTrailStep ? 160 : undefined,
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                                            border: `1px solid ${theme.colors.border}`,
+                                            borderRadius: 6,
+                                            boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
+                                            overflow: 'hidden',
+                                            opacity: 0.95,
+                                        }, "aria-label": overlayTrailStep
+                                            ? `${overlayTrailTitle}, step ${overlayTrailStep.index} of ${overlayTrailStep.total}`
+                                            : overlayTrailTitle, children: [_jsx("div", { style: {
+                                                    padding: '5px 14px',
+                                                    fontSize: theme.fontSizes[2] ?? theme.fontSizes[1],
+                                                    fontWeight: 600,
+                                                    fontFamily: theme.fonts.monospace,
+                                                    color: theme.colors.text,
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                    textAlign: 'center',
+                                                }, children: overlayTrailTitle }), overlayTrailStep && overlayTrailStep.total > 0 && (_jsx("div", { style: {
+                                                    display: 'flex',
+                                                    gap: 3,
+                                                    padding: '0 6px 5px',
+                                                }, "aria-hidden": "true", children: Array.from({ length: overlayTrailStep.total }, (_, i) => {
+                                                    const n = i + 1;
+                                                    const active = n === overlayTrailStep.index;
+                                                    const done = n < overlayTrailStep.index;
+                                                    return (_jsx("span", { style: {
+                                                            flex: 1,
+                                                            height: 2,
+                                                            borderRadius: 1,
+                                                            background: active
+                                                                ? (theme.colors.accent ?? theme.colors.primary ?? theme.colors.text)
+                                                                : done
+                                                                    ? (theme.colors.textSecondary ?? theme.colors.text)
+                                                                    : (theme.colors.border ?? 'rgba(127,127,127,0.45)'),
+                                                            opacity: active ? 1 : done ? 0.75 : 0.4,
+                                                            transition: 'opacity 120ms ease, background 120ms ease',
+                                                        } }, n));
+                                                }) }))] })), overlayTrailStep?.annotation && (_jsx("div", { style: {
+                                            maxWidth: '100%',
+                                            padding: '6px 14px',
+                                            background: theme.colors.backgroundSecondary ?? theme.colors.background,
+                                            border: `1px solid ${theme.colors.border}`,
+                                            borderRadius: 6,
+                                            boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
+                                            textAlign: 'center',
+                                            fontSize: theme.fontSizes[0],
+                                            fontFamily: theme.fonts.body,
+                                            color: theme.colors.textMuted ?? theme.colors.textSecondary,
+                                            lineHeight: 1.35,
+                                        }, children: overlayTrailStep.annotation }))] })), selected && (_jsx("div", { style: {
+                                    position: 'absolute',
+                                    top: 10,
+                                    right: 10,
+                                    zIndex: 8,
+                                    width: 'min(560px, 70%)',
+                                    maxHeight: '46%',
+                                    overflowY: 'auto',
+                                    background: theme.colors.background,
+                                    border: `1px solid ${theme.colors.border}`,
+                                    borderRadius: 8,
+                                    boxShadow: '0 8px 24px rgba(0,0,0,0.35)',
+                                }, children: _jsx(ComponentDeclaration, { component: selected, onOpenFile: onOpenDeclarationFile, onRelatedSelect: resolveRelatedComponent, onInspectSymbol: onInspectSymbol
+                                        ? (symbol, ref) => onInspectSymbol({
+                                            purl: selected.purl,
+                                            file: selected.file,
+                                            symbol,
+                                            ref,
+                                        })
+                                        : undefined, verification: componentVerification, fileOpen: drawerTarget?.kind === 'file' &&
+                                        !!selected.file &&
+                                        selected.file === drawerTarget.file, declarationOpen: drawerTarget?.kind === 'file' &&
+                                        drawerTarget.startLine != null &&
+                                        !!selected.file &&
+                                        selected.file === drawerTarget.file &&
+                                        selected.declarationSpan?.startLine === drawerTarget.startLine }) })), committedDirection === 'vertical' && fileOverlayView] }), _jsx(FileDrawer, { title: drawerTitle, onClose: closeDrawer, placement: committedDirection === 'vertical' ? 'left' : 'bottom', onResizeEnd: () => requestAnimationFrame(() => fitView()), fillHeight: drawerFillHeight, suppressEscape: fileOverlayOpen, hidden: hideDrawer, progress: drawerProgress, children: drawerTarget?.kind === 'trail' &&
+                            focusedTrail &&
+                            renderTrailViewer ? (_jsx(TrailDrawerContent, { render: renderTrailDrawerContent, trail: focusedTrail, stepIndex: drawerTarget.stepIndex, onOpenFile: onOpenFileFromTrail, resolveSymbol: resolveTrailSymbol, onSymbolClick: openConstructDeclaration, onVisibleStepChange: setVisibleStepIndex })) : drawerTarget?.kind === 'file' ? (_jsx(FileDrawerContent, { render: renderDrawerContent, file: drawerTarget.file, startLine: drawerTarget.startLine, endLine: drawerTarget.endLine })) : null }), committedDirection !== 'vertical' && fileOverlayView, _jsx(GraphLayoutCover, { revealed: layoutReady || layoutFlipping }), canvasOverlay, liveEvents ? _jsx(MaintainLivePanel, { ...liveEvents }) : null] })] }));
 }
 export function SubsystemComponentGraph(props) {
     const { theme } = useTheme();
@@ -2389,6 +2407,7 @@ export function SubsystemComponentGraph(props) {
     const sidebarScope = useMemo(() => buildTrailSidebarScope(props.components, props.trails, props.issues, sidebarTrailId), [props.components, props.trails, props.issues, sidebarTrailId]);
     const fileCount = sidebarScope.treePaths.entries.length;
     const trailViewLabel = sidebarScope.trail ? 'Trail' : 'Trails';
+    const trailCount = props.trails?.length ?? 0;
     const hasFiles = fileCount > 0 || sidebarScope.trail != null;
     const sidebarDiagnostic = sidebarScope.trail ? {
         ...props.diagnostic,
@@ -2398,17 +2417,21 @@ export function SubsystemComponentGraph(props) {
         fixableCount: sidebarScope.issues.filter((issue) => issue.fix != null).length,
         title: undefined,
     } : props.diagnostic ?? { status: 'unknown', issueCount: props.issues?.length };
+    const hasIssues = (props.issues != null
+        ? sidebarScope.issues.length
+        : sidebarDiagnostic.issueCount ?? 0) > 0;
     useEffect(() => {
         if (sidebarTrailId != null && !sidebarScope.trail)
             setSidebarTrailId(null);
     }, [sidebarTrailId, sidebarScope.trail]);
     const [diagnosticsOpen, setDiagnosticsOpen] = useState(props.showIssues ?? (props.issues?.length ?? 0) > 0);
-    const issuesActive = props.showIssues ?? diagnosticsOpen;
+    const issuesRequested = props.showIssues ?? diagnosticsOpen;
+    const issuesActive = hasIssues && issuesRequested;
     const filesActive = filesOpen && hasFiles && !issuesActive;
     const selectSidebarView = (view) => {
         const nextIssuesActive = view === 'issues';
         setFilesOpen(view === 'files');
-        if (nextIssuesActive !== issuesActive) {
+        if (nextIssuesActive !== issuesRequested) {
             if (props.showIssues === undefined)
                 setDiagnosticsOpen(nextIssuesActive);
             props.diagnostic?.onToggle?.();
@@ -2420,7 +2443,7 @@ export function SubsystemComponentGraph(props) {
         justifyContent: 'center',
         gap: 4,
         height: 28,
-        padding: '4px 7px',
+        padding: '4px 16px',
         fontFamily: theme.fonts.monospace,
         fontSize: theme.fontSizes[0],
         border: 'none',
@@ -2488,6 +2511,6 @@ export function SubsystemComponentGraph(props) {
                             padding: 2,
                             border: `1px solid ${theme.colors.border}`,
                             borderRadius: 6,
-                        }, children: [_jsxs("button", { type: "button", "aria-label": trailViewLabel, "aria-pressed": !filesActive && !issuesActive, onClick: () => selectSidebarView('trails'), style: viewButtonStyle(!filesActive && !issuesActive), children: [_jsx(Route, { size: 14, "aria-hidden": true }), _jsx("span", { children: trailViewLabel })] }), hasFiles && (_jsxs("button", { type: "button", "aria-label": `Files (${fileCount} files)`, title: "Show files", "aria-pressed": filesActive, onClick: () => selectSidebarView('files'), style: viewButtonStyle(filesActive), children: [_jsx(Files, { size: 14, "aria-hidden": true }), _jsx("span", { children: "Files" }), _jsx("span", { style: { fontWeight: 600 }, children: fileCount })] })), _jsx(SubsystemDiagnosticToggle, { ...sidebarDiagnostic, labelText: "Issues", segmented: true, active: issuesActive, onToggle: () => selectSidebarView('issues') })] })] })), _jsx("div", { ref: wrapRef, style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: constructsOnly ? (_jsx(ConstructsCatalog, { components: props.components, onSelect: props.onSelect, title: props.title, hideSidebar: props.hideSidebar, description: props.description, descriptionOpen: props.descriptionOpen, onDescriptionOpenChange: props.onDescriptionOpenChange, diagnostic: props.diagnostic, sidebarExtra: props.sidebarExtra, sidebarAfterDescription: props.sidebarAfterDescription, renderFileViewer: props.renderFileViewer, onFileSelect: props.onFileSelect, componentVerification: props.componentVerification, onInspectSymbol: props.onInspectSymbol })) : (_jsx(ReactFlowProvider, { children: _jsx(Inner, { ...props, showIssues: issuesActive, filesActive: filesActive, measured: size, sidebarScope: sidebarScope, onSidebarTrailChange: setSidebarTrailId }) })) })] }));
+                        }, children: [_jsxs("button", { type: "button", "aria-label": sidebarScope.trail ? 'Trail' : `Trails (${trailCount} ${trailCount === 1 ? 'trail' : 'trails'})`, "aria-pressed": !filesActive && !issuesActive, onClick: () => selectSidebarView('trails'), style: viewButtonStyle(!filesActive && !issuesActive), children: [_jsx(Route, { size: 14, "aria-hidden": true }), _jsx("span", { children: trailViewLabel }), !sidebarScope.trail && _jsx("span", { style: { fontWeight: 600, marginLeft: 4 }, children: trailCount })] }), hasFiles && (_jsxs("button", { type: "button", "aria-label": `Files (${fileCount} files)`, title: "Show files", "aria-pressed": filesActive, onClick: () => selectSidebarView('files'), style: viewButtonStyle(filesActive), children: [_jsx(Files, { size: 14, "aria-hidden": true }), _jsx("span", { children: "Files" }), _jsx("span", { style: { fontWeight: 600, marginLeft: 4 }, children: fileCount })] })), hasIssues && (_jsx(SubsystemDiagnosticToggle, { ...sidebarDiagnostic, labelText: "Issues", segmented: true, active: issuesActive, onToggle: () => selectSidebarView('issues') }))] })] })), _jsx("div", { ref: wrapRef, style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: constructsOnly ? (_jsx(ConstructsCatalog, { components: props.components, onSelect: props.onSelect, title: props.title, hideSidebar: props.hideSidebar, description: props.description, descriptionOpen: props.descriptionOpen, onDescriptionOpenChange: props.onDescriptionOpenChange, diagnostic: props.diagnostic, sidebarExtra: props.sidebarExtra, sidebarAfterDescription: props.sidebarAfterDescription, renderFileViewer: props.renderFileViewer, onFileSelect: props.onFileSelect, componentVerification: props.componentVerification, onInspectSymbol: props.onInspectSymbol })) : (_jsx(ReactFlowProvider, { children: _jsx(Inner, { ...props, showIssues: issuesActive, filesActive: filesActive, measured: size, sidebarScope: sidebarScope, onSidebarTrailChange: setSidebarTrailId }) })) })] }));
 }
 //# sourceMappingURL=SubsystemComponentGraph.js.map