@principal-ai/subsystems-react 0.56.12 → 0.56.14

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.
@@ -2057,7 +2059,23 @@ 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, { headerless: true, files: treeFilePaths, selectedFile: openFile ? treePaths.toDisplay.get(openFile) : null, onSelectFile: (path) => {
             const file = treePaths.toFile.get(path);
@@ -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();