@principal-ai/subsystems-react 0.53.5 → 0.54.0

package/dist/subsystem/SubsystemComponentGraph.js

@@ -32,6 +32,7 @@ import { GraphLayoutCover } from './GraphLayoutCover';
 import { GRAPH_CANVAS_CLASS, GRAPH_NAV_PROPS, GraphChrome, GraphLayerStyle } from './graphChrome';
 import { ComponentDeclaration } from './ComponentDeclaration';
 import { FileDrawer, FILE_DRAWER_HEIGHT_MS } from './FileDrawer';
+import { GraphWithSidebar } from './GraphWithSidebar';
 import { buildRepoGroups, repoAvatarUrl } from './paths';
 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';
@@ -88,9 +89,13 @@ const edgeTypes = {
 // Inner re-renders on every viewport pan/zoom and hover; recreating host
 // elements then would churn their readFile closures and flash the file
 // viewer's loading state on each render.
-const FileDrawerContent = memo(function FileDrawerContent({ render, file, startLine, fullFile, }) {
+const FileDrawerContent = memo(function FileDrawerContent({ render, file, startLine, endLine, fullFile, }) {
     return (_jsx(_Fragment, { children: render(file, startLine != null
-            ? { startLine, ...(fullFile ? { fullFile: true } : {}) }
+            ? {
+                startLine,
+                ...(endLine != null ? { endLine } : {}),
+                ...(fullFile ? { fullFile: true } : {}),
+            }
             : undefined) }));
 });
 function FileOverlayCloseButton({ onClose }) {
@@ -123,7 +128,7 @@ const TrailDrawerContent = memo(function TrailDrawerContent({ render, trail, ste
             onVisibleStepChange,
         }) }));
 });
-function Inner({ components, trails, graphifyRelations, orderByLine, initialTrailId, onReorderTrails, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, moduleNesting, edgeView, title, hideSidebar, trailStepMode = 'focus', autoPlayTrails = false, trailAutoPlayIntervalMs = TRAIL_PLAY_PAUSE_MS, zoomOnTrailFocus = true, trailFocusDurationMs = 300, graphTitle, showTrailTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, laneStatus, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileViewer, renderTrailViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey, liveEvents, agentsPanel }) {
+function Inner({ components, trails, graphifyRelations, orderByLine, initialTrailId, onTrailSelect, onTrailStepHover, onReorderTrails, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, moduleNesting, edgeView, title, hideSidebar, trailStepMode = 'focus', autoPlayTrails = false, trailAutoPlayIntervalMs = TRAIL_PLAY_PAUSE_MS, zoomOnTrailFocus = true, trailFocusDurationMs = 300, graphTitle, showTrailTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, laneStatus, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileViewer, renderTrailViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, codeProcessKeys, hideDrawer = false, persistKey, liveEvents, agentsPanel }) {
     const { theme } = useTheme();
     const { fitView, fitBounds, screenToFlowPosition } = useReactFlow();
     const viewport = useViewport();
@@ -261,49 +266,11 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     const [descToggleHover, setDescToggleHover] = useState(false);
     // `true` only when a description exists AND the user opened it.
     const showDesc = !!description && descriptionVisible;
-    // Sidebar width (px). Draggable via the resize handle between the sidebar
-    // and the graph canvas; clamps to sensible bounds while dragging. Restored
-    // from the persisted view state when a `persistKey` is set.
-    const [sidebarWidth, setSidebarWidth] = useState(persisted.sidebarWidth ?? 450);
-    const [sidebarDrag, setSidebarDrag] = useState(false);
-    const sidebarDragStartX = useRef(0);
-    const sidebarDragStartWidth = useRef(450);
-    // Mirror of `sidebarWidth` for the drag-end persist (the mouseup listener
-    // closes over the drag-start render).
-    const sidebarWidthRef = useRef(sidebarWidth);
-    sidebarWidthRef.current = sidebarWidth;
-    const sidebarMinWidth = 240;
-    const sidebarMaxWidth = useMemo(() => Math.max(Math.min((_measured?.w ?? 680) * 0.5, 600), sidebarMinWidth), [_measured?.w]);
-    // Resize drag: capture the drag state so document-level move/up listeners
-    // stay attached for the duration of the gesture, then release on mouseup.
-    const onSidebarResizeStart = useCallback((e) => {
-        e.preventDefault();
-        sidebarDragStartX.current = e.clientX;
-        sidebarDragStartWidth.current = sidebarWidth;
-        setSidebarDrag(true);
-    }, [sidebarWidth]);
-    useEffect(() => {
-        if (!sidebarDrag)
-            return;
-        const onMove = (e) => {
-            const delta = e.clientX - sidebarDragStartX.current;
-            const next = Math.min(Math.max(sidebarDragStartWidth.current + delta, sidebarMinWidth), sidebarMaxWidth);
-            setSidebarWidth(next);
-        };
-        const onUp = () => {
-            setSidebarDrag(false);
-            // Persist only on drag end — not on every mousemove.
-            writeViewState(persistKey, { sidebarWidth: sidebarWidthRef.current });
-            // Re-fit the canvas so the graph re-centers in the new available space.
-            requestAnimationFrame(() => fitView());
-        };
-        document.addEventListener('mousemove', onMove);
-        document.addEventListener('mouseup', onUp);
-        return () => {
-            document.removeEventListener('mousemove', onMove);
-            document.removeEventListener('mouseup', onUp);
-        };
-    }, [sidebarDrag, sidebarMaxWidth, fitView, persistKey]);
+    // Sidebar width lives in the shared GraphWithSidebar chrome — draggable and
+    // persisted under `principal.subsystems.sidebarWidth.<persistKey>`. The graph
+    // only bounds how wide the panel may get so the canvas keeps room to breathe;
+    // a width saved under the old view-state key still seeds the panel once.
+    const sidebarMaxWidth = useMemo(() => Math.max(Math.min((_measured?.w ?? 680) * 0.5, 600), 240), [_measured?.w]);
     // Persist the trail working set per model. Each write merges into the
     // stored blob, so the three fields never clobber one another.
     useEffect(() => {
@@ -500,6 +467,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             moduleNesting,
             graphifyRelations: graphifyRelationsRef.current,
             orderByLine,
+            codeProcessKeys,
         })
             .then(({ nodes, edges: e, absoluteRects }) => {
             if (!alive)
@@ -550,7 +518,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         const measuredWidths = new Map(leafNodes.map((n) => [n.id, dims.get(n.id).width]));
         const measuredHeights = new Map(leafNodes.map((n) => [n.id, dims.get(n.id).height]));
         const gen = ++pass2GenRef.current;
-        void buildSubsystemGraph({ components, trails }, { maxNodeWidth, showEdgeLabels, measuredWidths, measuredHeights, showSingletonFrames, moduleNesting, graphifyRelations, orderByLine })
+        void buildSubsystemGraph({ components, trails }, { maxNodeWidth, showEdgeLabels, measuredWidths, measuredHeights, showSingletonFrames, moduleNesting, graphifyRelations, orderByLine, codeProcessKeys })
             .then(({ nodes, edges: e, absoluteRects }) => {
             if (gen !== pass2GenRef.current)
                 return;
@@ -1281,18 +1249,19 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     const onOpenDeclarationFile = useCallback((file, opts) => {
         setFileOverlay(null);
         const startLine = opts?.startLine;
+        const endLine = opts?.endLine;
         if (openFileRef.current?.file === file &&
             openFileRef.current.startLine === startLine) {
             setDrawerTarget(null);
             return;
         }
-        setDrawerTarget({ kind: 'file', file, startLine });
+        setDrawerTarget({ kind: 'file', file, startLine, endLine });
         onFileSelect?.(file);
     }, [onFileSelect]);
     // Double-click a component opens its declaration in the file drawer — the
-    // `file` + anchored `declarationRef.startLine` when verify resolved one,
-    // else the file top. Uses the same open path as the declaration panel's
-    // file link, so the drawer and file tree stay in sync.
+    // `file` + anchored `declarationSpan` range when verify resolved one, else
+    // the file top. Uses the same open path as the declaration panel's file
+    // link, so the drawer and file tree stay in sync.
     // Boundary region currently framed by a double-click, so a second
     // double-click on the same boundary zooms back out to the whole graph.
     const [focusedBoundaryKey, setFocusedBoundaryKey] = useState(null);
@@ -1330,11 +1299,14 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         const comp = node.data?.component;
         if (!comp?.file)
             return;
-        const startLine = comp.declarationRef?.startLine;
-        onOpenDeclarationFile(comp.file, startLine != null ? { startLine } : undefined);
+        const startLine = comp.declarationSpan?.startLine;
+        const endLine = comp.declarationSpan?.endLine;
+        onOpenDeclarationFile(comp.file, startLine != null
+            ? { startLine, ...(endLine != null ? { endLine } : {}) }
+            : undefined);
     }, [onOpenDeclarationFile, fitView, focusedBoundaryKey]);
     const onOpenFileFromTrail = useCallback((file, opts) => {
-        setFileOverlay({ file, startLine: opts?.startLine });
+        setFileOverlay({ file, startLine: opts?.startLine, endLine: opts?.endLine });
         onFileSelect?.(file);
     }, [onFileSelect]);
     const closeFileOverlay = useCallback(() => {
@@ -1506,19 +1478,22 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             setFocusedStepIndex(null);
             setFocusedTrailId(null);
             setDrawerTarget((prev) => (prev?.kind === 'trail' ? null : prev));
+            onTrailSelect?.(null);
             return;
         }
         setFocusedStepIndex(null);
         setFocusedTrailId(tl.id);
+        onTrailSelect?.({ trailId: tl.id });
         fitFocusBounds(new Set(tl.steps.map((s) => trailStepGraphEdgeId(s))));
         setDrawerTarget((prev) => (prev?.kind === 'trail' ? null : prev));
-    }, [fitFocusBounds, trailStepMode]);
+    }, [fitFocusBounds, trailStepMode, onTrailSelect]);
     const clearTrailFocus = useCallback(() => {
         setFocusedTrailId(null);
         setFocusedStepIndex(null);
         setHoveredTrailStep(null);
         setDrawerTarget((prev) => (prev?.kind === 'trail' ? null : prev));
-    }, []);
+        onTrailSelect?.(null);
+    }, [onTrailSelect]);
     // Host deep-link: opening the graph from a trail row selects that
     // flow — expand its steps, focus its edges, and switch the sidebar to
     // Trails. Guarded by a ref so a later in-tab selection isn't yanked
@@ -1567,6 +1542,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             setFocusedTrailId(null);
             setHoveredTrailStep({ trailId: tl.id, stepIndex });
             setDrawerTarget((prev) => (prev?.kind === 'trail' ? null : prev));
+            onTrailSelect?.(null);
             return;
         }
         // Toggle: clicking the selected step unselects it (back to whole flow).
@@ -1586,6 +1562,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         setFocusedStepIndex(stepIndex);
         setFocusedTrailId(tl.id);
         setHoveredTrailStep(null);
+        onTrailSelect?.({ trailId: tl.id, stepIndices: [stepIndex] });
         // Open the drawer before fitting. If it was closed, wait for its height
         // transition so fitView uses the reduced canvas — not full height.
         const drawerWasOpen = drawerOpenRef.current;
@@ -1600,7 +1577,8 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             setDrawerTarget({
                 kind: 'file',
                 file: step.file,
-                startLine: step.line,
+                startLine: step.span?.startLine,
+                endLine: step.span?.endLine,
             });
         }
         const edgeIds = new Set([trailStepGraphEdgeId(step)]);
@@ -1623,6 +1601,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         focusedTrailId,
         renderTrailViewer,
         trailStepMode,
+        onTrailSelect,
     ]);
     useEffect(() => {
         return () => {
@@ -1706,7 +1685,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                             setDrawerTarget({ kind: 'trail', trailId: tl.id, stepIndex: stepIdx });
                         }
                         else {
-                            setDrawerTarget({ kind: 'file', file: step.file, startLine: step.line });
+                            setDrawerTarget({ kind: 'file', file: step.file, startLine: step.span?.startLine, endLine: step.span?.endLine });
                         }
                     }
                 }
@@ -1975,8 +1954,11 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         const comp = components.find((c) => c.alias === alias);
         if (!comp?.file)
             return;
-        const startLine = comp.declarationRef?.startLine;
-        onOpenDeclarationFile(comp.file, startLine != null ? { startLine } : undefined);
+        const startLine = comp.declarationSpan?.startLine;
+        const endLine = comp.declarationSpan?.endLine;
+        onOpenDeclarationFile(comp.file, startLine != null
+            ? { startLine, ...(endLine != null ? { endLine } : {}) }
+            : undefined);
     }, [components, onOpenDeclarationFile]);
     // Edge label data for the overlay (rendered OUTSIDE ReactFlow so the pane
     // doesn't intercept pointer events). Uses ELK-computed label midpoints from
@@ -2025,367 +2007,338 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     const trailViewerRef = useRef(renderTrailViewer);
     trailViewerRef.current = renderTrailViewer;
     const renderTrailDrawerContent = useCallback((ctx) => trailViewerRef.current?.(ctx) ?? null, []);
-    return (_jsxs("div", { style: { width: '100%', height: '100%', display: 'flex', flexDirection: 'row', userSelect: sidebarDrag ? 'none' : undefined }, children: [!hideSidebar && (title || description || diagnostic || issuesActive || sidebarExtra || sidebarAfterDescription || treeFilePaths.length > 0 || hasTrails) && (_jsxs("div", { style: {
-                    width: sidebarWidth,
-                    minWidth: sidebarWidth,
-                    borderRight: `1px solid ${theme.colors.border}`,
-                    background: theme.colors.backgroundSecondary ?? theme.colors.background,
+    // Sidebar chrome — title/description header, Files/Trails (or Issues/Agents)
+    // tab strip, and the lower panels. Everything renders through the shared
+    // GraphWithSidebar; the graph keeps owning every bit of *state* (focused
+    // trail, active tab, description visibility) because the canvas dims from
+    // the same facts the sidebar renders.
+    const sidebarVisible = !hideSidebar &&
+        (title || description || diagnostic || issuesActive || sidebarExtra || sidebarAfterDescription ||
+            treeFilePaths.length > 0 || hasTrails);
+    const sidebarBodyVisible = treeFilePaths.length > 0 || hasTrails || issuesActive;
+    const sidebarTabs = issuesActive
+        ? agentsPanel
+            ? [
+                { id: 'issues', label: 'Issues' },
+                { id: 'agents', label: 'Agents' },
+            ]
+            : undefined
+        : hasTrails
+            ? [
+                { id: 'trails', label: 'Trails' },
+                { id: 'files', label: 'Files' },
+            ]
+            : undefined;
+    const activeSidebarTab = issuesActive ? diagnosticsTab : sidebarView;
+    // Header block: the extras, then the title/actions row (diagnostic chip +
+    // description toggle), then the description that toggles out from under it.
+    const sidebarHeader = (_jsxs(_Fragment, { children: [sidebarExtra, (title || description || diagnostic) && (_jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', gap: 8 }, children: [title && (_jsx("h2", { style: {
+                            margin: 0,
+                            flex: 1,
+                            minWidth: 0,
+                            fontSize: theme.fontSizes[2],
+                            fontWeight: 600,
+                            color: theme.colors.text,
+                            fontFamily: theme.fonts.monospace,
+                        }, children: title })), _jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 4,
+                            flexShrink: 0,
+                            // Title's flex:1 already pushes this cluster right; without a
+                            // title, keep the actions flush right instead of flush-left.
+                            marginLeft: title ? undefined : 'auto',
+                        }, children: [diagnostic && (_jsx(SubsystemDiagnosticToggle, { ...diagnostic, active: issuesActive, onToggle: toggleIssues })), description && (_jsx("button", { type: "button", "aria-expanded": descriptionVisible, "aria-label": descriptionVisible ? 'Hide description' : 'Show description', title: descriptionVisible ? 'Hide description' : 'Show description', onMouseEnter: () => setDescToggleHover(true), onMouseLeave: () => setDescToggleHover(false), onClick: () => setDescriptionVisible((v) => !v), style: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    flexShrink: 0,
+                                    width: 22,
+                                    height: 22,
+                                    padding: 0,
+                                    border: 'none',
+                                    borderRadius: 4,
+                                    background: descriptionVisible || descToggleHover ? theme.colors.border : 'transparent',
+                                    color: descriptionVisible || descToggleHover ? theme.colors.text : (theme.colors.textMuted ?? theme.colors.textSecondary),
+                                    cursor: 'pointer',
+                                    transition: 'background 120ms ease, color 120ms ease',
+                                }, children: _jsx(FileText, { size: 14 }) }))] })] })), description && descriptionVisible && (_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] }));
+    // Lower panel: the Issues/Agents diagnostics stack, or the Files/Trails
+    // stack with the trail flow list / repo file tree.
+    const sidebarBody = issuesActive ? (diagnosticsTab === 'agents' && agentsPanel ? (_jsx(SubsystemAgentsPanel, { ...agentsPanel })) : (_jsx(SubsystemIssueList, { issues: issues ?? [], focusCategory: focusIssueCategory, laneStatus: laneStatus, onSelectIssue: focusIssueTarget, onDeselectIssue: unfocusIssueTarget, onApplyFix: onApplyIssueFix, onHoverIssue: onHoverIssue, onExpandedCategoriesChange: handleExpandedCategoriesChange }))) : sidebarView === 'trails' && trails && trails.length > 0 ? (_jsx(TrailsPanel, { trails: trails, expandedTrails: expandedTrails, focusedTrailId: focusedTrailId, focusedStepIndex: focusedStepIndex, hoveredTrailStep: hoveredTrailStep, onToggleCollapsed: toggleTrailCollapsed, onFocusFlow: focusTrailEdges, onClearFocus: clearTrailFocus, onFocusStep: focusTrailStep, onHoverStep: (tl, i) => {
+            setHoveredTrailStep({ trailId: tl.id, stepIndex: i });
+            onTrailStepHover?.({ trailId: tl.id, stepIndex: i });
+        }, onHoverFlow: (tl) => {
+            setHoveredTrailStep({ trailId: tl.id, stepIndex: null });
+            onTrailStepHover?.(null);
+        }, onLeaveStep: () => {
+            setHoveredTrailStep(null);
+            onTrailStepHover?.(null);
+        }, onReorder: onReorderTrails, proposedAliases: proposedAliases })) : treeFilePaths.length > 0 ? (_jsx(_Fragment, { children: repoGroups.groups.map((group, i) => {
+            const groupKey = group.repoKey ?? '__no-repo__';
+            const collapsed = collapsedRepos.has(groupKey);
+            return (_jsxs("div", { style: {
+                    flex: collapsed ? '0 0 auto' : 1,
+                    minHeight: collapsed ? 0 : undefined,
                     display: 'flex',
                     flexDirection: 'column',
-                    overflow: 'hidden',
-                }, children: [_jsxs("div", { style: {
-                            flex: showDesc ? 1 : '0 0 auto',
-                            minHeight: 0,
-                            overflowY: 'auto',
-                            padding: '16px',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 12,
-                        }, children: [sidebarExtra, (title || description || diagnostic) && (_jsxs("div", { style: { display: 'flex', alignItems: 'flex-start', gap: 8 }, children: [title && (_jsx("h2", { style: {
-                                            margin: 0,
-                                            flex: 1,
-                                            minWidth: 0,
-                                            fontSize: theme.fontSizes[2],
-                                            fontWeight: 600,
-                                            color: theme.colors.text,
-                                            fontFamily: theme.fonts.monospace,
-                                        }, children: title })), _jsxs("div", { style: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: 4,
-                                            flexShrink: 0,
-                                            // Title's flex:1 already pushes this cluster right; without a
-                                            // title, keep the actions flush right instead of flush-left.
-                                            marginLeft: title ? undefined : 'auto',
-                                        }, children: [diagnostic && (_jsx(SubsystemDiagnosticToggle, { ...diagnostic, active: issuesActive, onToggle: toggleIssues })), description && (_jsx("button", { type: "button", "aria-expanded": descriptionVisible, "aria-label": descriptionVisible ? 'Hide description' : 'Show description', title: descriptionVisible ? 'Hide description' : 'Show description', onMouseEnter: () => setDescToggleHover(true), onMouseLeave: () => setDescToggleHover(false), onClick: () => setDescriptionVisible((v) => !v), style: {
+                    borderTop: i > 0 ? `1px solid ${theme.colors.border}` : undefined,
+                }, children: [repoGroups.multiRepo && (_jsx(RepoGroupHeader, { group: group, collapsed: collapsed, onToggle: () => toggleRepoCollapsed(groupKey) })), !collapsed && (_jsx(SubsystemFileTree, { files: group.entries.map((e) => e.displayPath), selectedFile: selected?.file ?? openFile, hoveredFile: hoveredFile, onSelectFile: onTreeSelectFile, hoveredFolder: hoveredBoundaryPath, headerless: repoGroups.multiRepo }))] }, groupKey));
+        }) })) : null;
+    return (_jsx(GraphWithSidebar, { hidden: !sidebarVisible, bodyHidden: !sidebarBodyVisible, stretchHeader: showDesc, header: sidebarHeader, tabs: sidebarTabs, activeTab: activeSidebarTab, onTabChange: (id) => issuesActive
+            ? setDiagnosticsTab(id)
+            : changeSidebarView(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: 'column', minHeight: 0 }, children: [_jsxs("div", { style: {
+                        position: 'relative',
+                        flex: collapseCanvas ? 0 : 1,
+                        minHeight: 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,
+                            }, 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: lbl.proposed
+                                                    ? `1.5px dashed ${color}`
+                                                    : `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", strokeDasharray: lbl.proposed ? '4 3' : undefined }) })), _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_stale'
+                                                    ? 'Call site changed since verification'
+                                                    : 'Call site not yet verified', style: {
+                                                    position: 'absolute',
+                                                    right: -7,
+                                                    bottom: -6,
+                                                    zIndex: 2,
                                                     display: 'inline-flex',
                                                     alignItems: 'center',
                                                     justifyContent: 'center',
-                                                    flexShrink: 0,
-                                                    width: 22,
-                                                    height: 22,
-                                                    padding: 0,
-                                                    border: 'none',
+                                                    gap: 3,
+                                                    minWidth: 18,
+                                                    padding: '2px 4px',
                                                     borderRadius: 4,
-                                                    background: descriptionVisible || descToggleHover ? theme.colors.border : 'transparent',
-                                                    color: descriptionVisible || descToggleHover ? theme.colors.text : (theme.colors.textMuted ?? theme.colors.textSecondary),
-                                                    cursor: 'pointer',
-                                                    transition: 'background 120ms ease, color 120ms ease',
-                                                }, children: _jsx(FileText, { size: 14 }) }))] })] })), description && descriptionVisible && (_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] }), (treeFilePaths.length > 0 || hasTrails || issuesActive) && (_jsx("div", { style: {
-                            ...(showDesc ? { height: '50%' } : { flex: 1, minHeight: 0 }),
-                            minHeight: 160,
-                            flexShrink: 0,
-                            borderTop: `1px solid ${theme.colors.border}`,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            overflow: 'hidden',
-                        }, children: issuesActive ? (agentsPanel ? (_jsxs("div", { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: [_jsx("div", { role: "tablist", "aria-label": "Diagnostics view", style: {
-                                        display: 'flex',
-                                        width: '100%',
-                                        flexShrink: 0,
-                                        borderBottom: `1px solid ${theme.colors.border}`,
+                                                    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, ...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}`), (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,
-                                    }, children: ['issues', 'agents'].map((tab) => (_jsx("button", { type: "button", role: "tab", "aria-selected": diagnosticsTab === tab, onClick: () => setDiagnosticsTab(tab), style: {
-                                            flex: 1,
-                                            minWidth: 0,
-                                            padding: '8px 8px',
-                                            border: 'none',
-                                            borderRadius: 0,
-                                            background: diagnosticsTab === tab ? theme.colors.background : 'transparent',
-                                            color: diagnosticsTab === tab ? theme.colors.text : theme.colors.textSecondary,
-                                            fontSize: theme.fontSizes[1],
-                                            fontFamily: theme.fonts.monospace,
-                                            textTransform: 'capitalize',
-                                            cursor: 'pointer',
-                                        }, children: tab === 'issues' ? 'Issues' : 'Agents' }, tab))) }), diagnosticsTab === 'agents' ? (_jsx(SubsystemAgentsPanel, { ...agentsPanel })) : (_jsx(SubsystemIssueList, { issues: issues ?? [], focusCategory: focusIssueCategory, laneStatus: laneStatus, onSelectIssue: focusIssueTarget, onDeselectIssue: unfocusIssueTarget, onApplyFix: onApplyIssueFix, onHoverIssue: onHoverIssue, onExpandedCategoriesChange: handleExpandedCategoriesChange }))] })) : (_jsx(SubsystemIssueList, { issues: issues ?? [], focusCategory: focusIssueCategory, laneStatus: laneStatus, onSelectIssue: focusIssueTarget, onDeselectIssue: unfocusIssueTarget, onApplyFix: onApplyIssueFix, onHoverIssue: onHoverIssue, onExpandedCategoriesChange: handleExpandedCategoriesChange }))) : (_jsxs(_Fragment, { children: [hasTrails && (_jsx("div", { role: "tablist", "aria-label": "Sidebar view", style: {
+                                        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',
-                                        width: '100%',
-                                        flexShrink: 0,
-                                        borderBottom: `1px solid ${theme.colors.border}`,
+                                        flexDirection: 'column',
                                         background: theme.colors.backgroundSecondary ?? theme.colors.background,
-                                    }, children: ['trails', 'files'].map((view) => (_jsx("button", { type: "button", role: "tab", "aria-selected": sidebarView === view, onClick: () => changeSidebarView(view), style: {
-                                            flex: 1,
-                                            minWidth: 0,
-                                            padding: '8px 8px',
-                                            border: 'none',
-                                            borderRadius: 0,
-                                            background: sidebarView === view ? theme.colors.background : 'transparent',
-                                            color: sidebarView === view
-                                                ? theme.colors.text
-                                                : theme.colors.textSecondary,
-                                            fontSize: theme.fontSizes[1],
-                                            fontFamily: theme.fonts.monospace,
-                                            textTransform: 'capitalize',
-                                            cursor: 'pointer',
-                                        }, children: view === 'trails' ? 'Trails' : 'Files' }, view))) })), sidebarView === 'trails' && trails && trails.length > 0 ? (_jsx(TrailsPanel, { trails: trails, expandedTrails: expandedTrails, focusedTrailId: focusedTrailId, focusedStepIndex: focusedStepIndex, hoveredTrailStep: hoveredTrailStep, onToggleCollapsed: toggleTrailCollapsed, onFocusFlow: focusTrailEdges, onClearFocus: clearTrailFocus, onFocusStep: focusTrailStep, onHoverStep: (tl, i) => setHoveredTrailStep({ trailId: tl.id, stepIndex: i }), onHoverFlow: (tl) => setHoveredTrailStep({ trailId: tl.id, stepIndex: null }), onLeaveStep: () => setHoveredTrailStep(null), onReorder: onReorderTrails, proposedAliases: proposedAliases })) : treeFilePaths.length > 0 ? (_jsx(_Fragment, { children: repoGroups.groups.map((group, i) => {
-                                        const groupKey = group.repoKey ?? '__no-repo__';
-                                        const collapsed = collapsedRepos.has(groupKey);
-                                        return (_jsxs("div", { style: {
-                                                flex: collapsed ? '0 0 auto' : 1,
-                                                minHeight: collapsed ? 0 : undefined,
+                                        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',
-                                                flexDirection: 'column',
-                                                borderTop: i > 0 ? `1px solid ${theme.colors.border}` : undefined,
-                                            }, children: [repoGroups.multiRepo && (_jsx(RepoGroupHeader, { group: group, collapsed: collapsed, onToggle: () => toggleRepoCollapsed(groupKey) })), !collapsed && (_jsx(SubsystemFileTree, { files: group.entries.map((e) => e.displayPath), selectedFile: selected?.file ?? openFile, hoveredFile: hoveredFile, onSelectFile: onTreeSelectFile, hoveredFolder: hoveredBoundaryPath, headerless: repoGroups.multiRepo }))] }, groupKey));
-                                    }) })) : null] })) }))] })), !hideSidebar && (title || description || diagnostic || issuesActive || sidebarExtra || sidebarAfterDescription || treeFilePaths.length > 0 || hasTrails) && (_jsx("div", { onMouseDown: onSidebarResizeStart, "aria-label": "Resize sidebar", title: "Drag to resize", style: {
-                    width: 3,
-                    flexShrink: 0,
-                    cursor: 'col-resize',
-                    background: theme.colors.border,
-                    transition: 'background 120ms ease',
-                    zIndex: 1,
-                } })), _jsxs("div", { style: { flex: 1, position: 'relative', display: 'flex', flexDirection: 'column', minHeight: 0 }, children: [_jsxs("div", { style: {
-                            position: 'relative',
-                            flex: collapseCanvas ? 0 : 1,
-                            minHeight: 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,
-                                }, 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: lbl.proposed
-                                                        ? `1.5px dashed ${color}`
-                                                        : `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", strokeDasharray: lbl.proposed ? '4 3' : undefined }) })), _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_stale'
-                                                        ? 'Call site changed since verification'
-                                                        : '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, ...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}`), (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.declarationRef?.startLine === drawerTarget.startLine }) }))] }), _jsx(FileDrawer, { title: drawerTitle, onClose: closeDrawer, 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, proposedAliases: proposedAliases, resolveSymbol: resolveTrailSymbol, onSymbolClick: openConstructDeclaration, onVisibleStepChange: setVisibleStepIndex })) : drawerTarget?.kind === 'file' ? (_jsx(FileDrawerContent, { render: renderDrawerContent, file: drawerTarget.file, startLine: drawerTarget.startLine })) : null }), fileOverlay && (_jsxs("div", { style: {
-                            position: 'absolute',
-                            inset: 0,
-                            zIndex: 8,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            background: theme.colors.background,
-                            borderLeft: `1px solid ${theme.colors.border}`,
-                        }, children: [_jsxs("div", { style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: 8,
-                                    padding: '6px 10px',
-                                    borderBottom: `1px solid ${theme.colors.border}`,
-                                    flexShrink: 0,
-                                }, children: [_jsx("span", { title: fileOverlay.file, style: {
-                                            flex: 1,
-                                            minWidth: 0,
-                                            overflow: 'hidden',
-                                            textOverflow: 'ellipsis',
-                                            whiteSpace: 'nowrap',
-                                            fontFamily: theme.fonts.monospace,
-                                            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, fullFile: true }) })] })), _jsx(GraphLayoutCover, { revealed: layoutReady }), canvasOverlay, liveEvents ? _jsx(MaintainLivePanel, { ...liveEvents }) : null] })] }));
+                                                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 }) }))] }), _jsx(FileDrawer, { title: drawerTitle, onClose: closeDrawer, 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, proposedAliases: proposedAliases, resolveSymbol: resolveTrailSymbol, onSymbolClick: openConstructDeclaration, onVisibleStepChange: setVisibleStepIndex })) : drawerTarget?.kind === 'file' ? (_jsx(FileDrawerContent, { render: renderDrawerContent, file: drawerTarget.file, startLine: drawerTarget.startLine, endLine: drawerTarget.endLine })) : null }), fileOverlay && (_jsxs("div", { style: {
+                        position: 'absolute',
+                        inset: 0,
+                        zIndex: 8,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        background: theme.colors.background,
+                        borderLeft: `1px solid ${theme.colors.border}`,
+                    }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 8,
+                                padding: '6px 10px',
+                                borderBottom: `1px solid ${theme.colors.border}`,
+                                flexShrink: 0,
+                            }, children: [_jsx("span", { title: fileOverlay.file, style: {
+                                        flex: 1,
+                                        minWidth: 0,
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        fontFamily: theme.fonts.monospace,
+                                        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 }) })] })), _jsx(GraphLayoutCover, { revealed: layoutReady }), canvasOverlay, liveEvents ? _jsx(MaintainLivePanel, { ...liveEvents }) : null] }) }));
 }
 /** Sidebar header for one repo's tree: owner avatar + repo name + file count.
  *  Clicking toggles the tree's visibility. */