@principal-ai/subsystems-react 0.55.1 → 0.55.2

package/dist/subsystem/SubsystemComponentGraph.js

@@ -18,9 +18,9 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ReactFlow, ReactFlowProvider, useReactFlow, useViewport, applyNodeChanges, } from '@xyflow/react';
 import { useTheme } from '@principal-ade/industry-theme';
-import { FileText, X } from 'lucide-react';
+import { FileText, ArrowDown, ArrowRight, Unlink, X } from 'lucide-react';
 import { IndustryMarkdownSlide } from 'themed-markdown';
-import { buildSubsystemGraph, deriveGraphEdges, isConstructsOnlyModel, moduleGroupNodeId, processGroupNodeId, isTrailMechanism, edgeColor, MECHANISM_DESCRIPTIONS, subsystemGraphLayoutKey, trailStepGraphEdgeId, } from './model';
+import { buildSubsystemGraph, deriveGraphEdges, isConstructsOnlyModel, moduleGroupNodeId, processGroupNodeId, isTrailMechanism, edgeColor, MECHANISM_DESCRIPTIONS, subsystemGraphLayoutKey, trailStepGraphEdgeId, unroutedEdgeIds, } from './model';
 import { ConstructsCatalog } from './ConstructsCatalog';
 import { SubsystemAgentsPanel, } from './AgentsPanel';
 import { MaintainLivePanel, } from '../components/maintain-events/MaintainLivePanel';
@@ -29,7 +29,7 @@ import { SubsystemDiagnosticToggle } from './DiagnosticToggle';
 import { SubsystemIssueList, issueCategory, issueKindOrder, issueRung, ISSUE_KIND_ICON, ISSUE_RUNG_ORDER, } from './IssueList';
 import { SubsystemFileTree } from './SubsystemFileTree';
 import { GraphLayoutCover } from './GraphLayoutCover';
-import { GRAPH_CANVAS_CLASS, GRAPH_NAV_PROPS, GraphChrome, GraphLayerStyle } from './graphChrome';
+import { GRAPH_CANVAS_CLASS, GRAPH_NAV_PROPS, GraphChrome, GraphLayerStyle, LAYOUT_FLIP_CLASS, LAYOUT_FLIP_EDGE_MS, LAYOUT_FLIP_NODE_MS } from './graphChrome';
 import { ComponentDeclaration } from './ComponentDeclaration';
 import { FileDrawer, FILE_DRAWER_HEIGHT_MS } from './FileDrawer';
 import { GraphWithSidebar } from './GraphWithSidebar';
@@ -128,7 +128,7 @@ const TrailDrawerContent = memo(function TrailDrawerContent({ render, trail, ste
             onVisibleStepChange,
         }) }));
 });
-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 }) {
+function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirection: layoutDirectionProp, defaultLayoutDirection = 'horizontal', onLayoutDirectionChange, hideLayoutToggle = false, refocusOnLayoutFlip = true, 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();
@@ -142,6 +142,139 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         absoluteRects: new Map(),
     });
     const [layoutReady, setLayoutReady] = useState(false);
+    // --- Layout direction -----------------------------------------------------
+    // The graph owns direction unless the host passes `layoutDirection`. A change
+    // is sequenced so old edge routes never cut across the new layout: edges fade
+    // out, ELK re-lays out while the nodes slide to their new slots, then the
+    // edges fade back in. Two values keep that honest: `requestedDirection` is
+    // what the toggle shows, `committedDirection` is what ELK last ran with.
+    const [ownDirection, setOwnDirection] = useState(() => persisted.layoutDirection ?? defaultLayoutDirection);
+    const requestedDirection = layoutDirectionProp ?? ownDirection;
+    const [committedDirection, setCommittedDirection] = useState(requestedDirection);
+    const [layoutFlipping, setLayoutFlipping] = useState(false);
+    const flipSawPendingLayoutRef = useRef(false);
+    /** Pending fade-out timer; non-null only between request and commit. */
+    const flipFadeTimerRef = useRef(null);
+    /** Set when a layout flip starts; the camera refits once layout lands. */
+    const refitAfterLayoutRef = useRef(false);
+    /** Solo layout: only this trail's components and edges are laid out. */
+    const [layoutTrailId, setLayoutTrailId] = useState(null);
+    const [committedTrailId, setCommittedTrailId] = useState(null);
+    const changeLayoutDirection = useCallback((next) => {
+        if (next === requestedDirection)
+            return;
+        if (layoutDirectionProp == null)
+            setOwnDirection(next);
+        onLayoutDirectionChange?.(next);
+    }, [layoutDirectionProp, onLayoutDirectionChange, requestedDirection]);
+    const toggleLayoutFocus = useCallback((trailId) => {
+        setLayoutTrailId((cur) => (cur === trailId ? null : trailId));
+    }, []);
+    // A focused trail that disappears (model reload) releases the solo layout
+    // instead of pinning the canvas to a slice that no longer exists.
+    useEffect(() => {
+        if (layoutTrailId && !(trails ?? []).some((t) => t.id === layoutTrailId)) {
+            setLayoutTrailId(null);
+        }
+    }, [trails, layoutTrailId]);
+    const requestedLayoutKey = `${requestedDirection}|${layoutTrailId ?? ''}`;
+    const committedLayoutKey = `${committedDirection}|${committedTrailId ?? ''}`;
+    // Beat 1: request → fade the edges out, then commit the direction / focus
+    // (which re-runs ELK). Reduced-motion users get the new layout immediately.
+    useEffect(() => {
+        if (requestedLayoutKey === committedLayoutKey) {
+            // A host can revert a request before the fade-out commits. Drop the
+            // pending flip instead of leaving the canvas edge-less until the safety
+            // timeout. A normal commit also lands here (request now equals
+            // committed), but by then the timer ref is already null — and the
+            // pending refit must survive that pass.
+            if (flipFadeTimerRef.current != null) {
+                clearTimeout(flipFadeTimerRef.current);
+                flipFadeTimerRef.current = null;
+                setLayoutFlipping(false);
+                refitAfterLayoutRef.current = false;
+            }
+            return;
+        }
+        refitAfterLayoutRef.current = refocusOnLayoutFlip;
+        const reduceMotion = typeof window !== 'undefined' &&
+            typeof window.matchMedia === 'function' &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (reduceMotion) {
+            setCommittedDirection(requestedDirection);
+            setCommittedTrailId(layoutTrailId);
+            return;
+        }
+        flipSawPendingLayoutRef.current = false;
+        setLayoutFlipping(true);
+        flipFadeTimerRef.current = window.setTimeout(() => {
+            flipFadeTimerRef.current = null;
+            setCommittedDirection(requestedDirection);
+            setCommittedTrailId(layoutTrailId);
+        }, LAYOUT_FLIP_EDGE_MS);
+        return () => {
+            if (flipFadeTimerRef.current != null) {
+                clearTimeout(flipFadeTimerRef.current);
+                flipFadeTimerRef.current = null;
+            }
+        };
+    }, [
+        requestedLayoutKey,
+        committedLayoutKey,
+        refocusOnLayoutFlip,
+        requestedDirection,
+        layoutTrailId,
+    ]);
+    // Beat 3: the committed layout has settled → the node slide is over, fade
+    // the edges back in. The ref keeps the OLD `layoutReady` (still true until
+    // the new pass 1 commits) from ending the flip before the layout swaps.
+    useEffect(() => {
+        if (!layoutFlipping)
+            return;
+        if (!layoutReady) {
+            flipSawPendingLayoutRef.current = true;
+            return;
+        }
+        if (!flipSawPendingLayoutRef.current)
+            return;
+        const t = setTimeout(() => setLayoutFlipping(false), LAYOUT_FLIP_NODE_MS);
+        return () => clearTimeout(t);
+    }, [layoutFlipping, layoutReady]);
+    // Camera: a direction flip moves the whole graph, and a vertical layout grows
+    // downward, so keeping the old viewport would leave most of it off-screen.
+    // Refit once the new layout is final — for both the animated flip and the
+    // reduced-motion instant swap. The edge reveal is separate (beat 3 above).
+    // Keyed on `built` as well as `layoutReady`: whichever of the two passes
+    // lands last is the one that has the final positions.
+    useEffect(() => {
+        if (!layoutReady || !refitAfterLayoutRef.current)
+            return;
+        refitAfterLayoutRef.current = false;
+        requestAnimationFrame(() => {
+            fitView({
+                padding: 0.1,
+                includeHiddenNodes: false,
+                minZoom: 0.05,
+                maxZoom: 2,
+                duration: LAYOUT_FLIP_NODE_MS,
+            });
+        });
+    }, [built, layoutReady, fitView]);
+    // Persist the choice so a model reopens the way it was left.
+    useEffect(() => {
+        if (!persistKey)
+            return;
+        writeViewState(persistKey, { layoutDirection: requestedDirection });
+    }, [persistKey, requestedDirection]);
+    // Safety net: never leave the canvas edge-less if a layout pass stalls
+    // (measurement never lands, ELK hangs). The edges come back; the layout
+    // stays wherever it got to.
+    useEffect(() => {
+        if (!layoutFlipping)
+            return;
+        const t = setTimeout(() => setLayoutFlipping(false), 5000);
+        return () => clearTimeout(t);
+    }, [layoutFlipping]);
     const [selected, setSelected] = useState(null);
     /** Bottom drawer: single file or trail multi-snippet mode. */
     const [drawerTarget, setDrawerTarget] = useState(null);
@@ -248,14 +381,18 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     // Trails draws runtime step edges. Without visible tabs (no trails,
     // or a sidebar-less embed) fall back to trail edges.
     const sidebarTabsVisible = !hideSidebar && (trails?.length ?? 0) > 0;
-    const resolvedEdgeView = edgeView ??
-        (sidebarTabsVisible
-            ? (sidebarView === 'trails' ? 'trails' : 'graphify')
-            : (trails?.length ?? 0) > 0
-                ? 'trails'
-                : (graphifyRelations?.length ?? 0) > 0
-                    ? 'graphify'
-                    : 'trails');
+    // A solo trail layout only draws that flow's steps, so the trail edge source
+    // is the only one that can render anything.
+    const resolvedEdgeView = committedTrailId
+        ? 'trails'
+        : edgeView ??
+            (sidebarTabsVisible
+                ? (sidebarView === 'trails' ? 'trails' : 'graphify')
+                : (trails?.length ?? 0) > 0
+                    ? 'trails'
+                    : (graphifyRelations?.length ?? 0) > 0
+                        ? 'graphify'
+                        : 'trails');
     // Trail flows the user has expanded (via the title row). Closed by
     // default so a graph with several flows doesn't dump every step list at once.
     // Restored from the persisted view state when a `persistKey` is set.
@@ -435,13 +572,36 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     // Pass 1: build with estimated widths so React Flow can measure the DOM.
     // The pane stays hidden until Pass 2 completes. Key off layout-affecting
     // fields only — declarationSpan updates after verify must not re-run ELK.
-    const layoutKey = useMemo(() => subsystemGraphLayoutKey({ components, trails, graphifyRelations }), [components, trails, graphifyRelations]);
-    const componentsRef = useRef(components);
-    const trailsRef = useRef(trails);
-    const graphifyRelationsRef = useRef(graphifyRelations);
-    componentsRef.current = components;
-    trailsRef.current = trails;
-    graphifyRelationsRef.current = graphifyRelations;
+    // Solo layout: a trail focus filters the model down to that flow's endpoints
+    // (and drops graphify relations) before it reaches ELK. Built from the
+    // COMMITTED trail, not the requested one, so the swap happens behind the
+    // edge fade like every other layout flip.
+    const layoutDoc = useMemo(() => {
+        if (!committedTrailId)
+            return { components, trails };
+        const trail = (trails ?? []).find((t) => t.id === committedTrailId);
+        if (!trail)
+            return { components, trails };
+        const aliases = new Set();
+        for (const step of trail.steps) {
+            aliases.add(step.from);
+            aliases.add(step.to);
+        }
+        return {
+            components: components.filter((c) => aliases.has(c.alias)),
+            trails: [trail],
+        };
+    }, [components, trails, committedTrailId]);
+    const layoutRelations = committedTrailId ? undefined : graphifyRelations;
+    const layoutKey = useMemo(() => subsystemGraphLayoutKey({
+        components: layoutDoc.components,
+        trails: layoutDoc.trails,
+        graphifyRelations: layoutRelations,
+    }), [layoutDoc, layoutRelations]);
+    const layoutDocRef = useRef(layoutDoc);
+    const layoutRelationsRef = useRef(layoutRelations);
+    layoutDocRef.current = layoutDoc;
+    layoutRelationsRef.current = layoutRelations;
     // Track measured dimensions from React Flow's dimension changes.
     // These arrive as { type: 'dimensions', id, dimensions } in onNodesChange.
     // Retained across same-id layoutKey updates so Pass 2 can run without a remount.
@@ -456,17 +616,15 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         prevMeasuredSigRef.current = '';
         // Bump generation so any in-flight Pass 2 from the prior layoutKey is ignored.
         pass2GenRef.current += 1;
-        const doc = {
-            components: componentsRef.current,
-            trails: trailsRef.current,
-        };
+        const doc = layoutDocRef.current;
         void buildSubsystemGraph(doc, {
             maxNodeWidth,
             showEdgeLabels,
             showSingletonFrames,
             moduleNesting,
-            graphifyRelations: graphifyRelationsRef.current,
+            graphifyRelations: layoutRelationsRef.current,
             orderByLine,
+            layoutDirection: committedDirection,
             codeProcessKeys,
         })
             .then(({ nodes, edges: e, absoluteRects }) => {
@@ -491,7 +649,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             setLayoutReady(true);
         });
         return () => { alive = false; };
-    }, [layoutKey, maxNodeWidth, showEdgeLabels, moduleNesting]);
+    }, [layoutKey, maxNodeWidth, showEdgeLabels, moduleNesting, committedDirection]);
     // Pass 2: once every leaf node has a measured dimension, re-run ELK.
     // Group parents are sized by ELK, not measured — exclude them or pass 2
     // would wait forever for dimensions that never arrive.
@@ -518,7 +676,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, codeProcessKeys })
+        void buildSubsystemGraph(layoutDoc, { maxNodeWidth, showEdgeLabels, measuredWidths, measuredHeights, showSingletonFrames, moduleNesting, graphifyRelations: layoutRelations, orderByLine, layoutDirection: committedDirection, codeProcessKeys })
             .then(({ nodes, edges: e, absoluteRects }) => {
             if (gen !== pass2GenRef.current)
                 return;
@@ -532,7 +690,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             // Reveal Pass 1 layout rather than leaving the cover up forever.
             setLayoutReady(true);
         });
-    }, [built.nodes, components, trails, graphifyRelations, orderByLine, maxNodeWidth, showEdgeLabels, moduleNesting]);
+    }, [built.nodes, layoutDoc, layoutRelations, orderByLine, maxNodeWidth, showEdgeLabels, moduleNesting, committedDirection]);
     // After Pass 1 commits, try Pass 2 immediately with retained measurements.
     // Same-id live updates often get no new React Flow `dimensions` events, so
     // waiting only on onNodesChange leaves the cover stuck.
@@ -1144,6 +1302,8 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         }
         return proposedStampedEdges.map((e) => ({ ...e, hidden: !edgeInView(e) }));
     }, [proposedStampedEdges, selectedEdgeId, openedEdgeIds, focusEdgeIds, previewEdgeIds, issueFocusEdgeIds, resolvedEdgeView]);
+    // Gated on layoutReady so the pre-reveal Pass 1 swap never flashes a count.
+    const unroutedIds = useMemo(() => (layoutReady ? unroutedEdgeIds(dispEdges) : []), [dispEdges, layoutReady]);
     const onNodesChange = useCallback((changes) => {
         // Capture dimension changes (React Flow's measurement callback).
         // Group parents are ELK-sized — ignore their measurements.
@@ -1164,6 +1324,10 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     }, [dispNodes, triggerPass2]);
     const onEdgesChange = useCallback((_changes) => dispEdges, [dispEdges]);
     useEffect(() => {
+        // A layout flip runs its own camera refit when the new layout lands. This
+        // mount/edit fit would otherwise fire mid-flip and fight it.
+        if (layoutFlipping)
+            return;
         const t = setTimeout(() => {
             fitView({ padding: 0.1, includeHiddenNodes: false, minZoom: 0.05, maxZoom: 2, duration: 200 });
         }, 200);
@@ -2065,7 +2229,14 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                                 }, 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) => {
+    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: (tl) => {
+            // While a solo layout is on, following the selection keeps the canvas
+            // and the highlighted flow in agreement instead of leaving the graph
+            // pinned to a flow the user just navigated away from.
+            if (layoutTrailId != null)
+                setLayoutTrailId(tl.id);
+            focusTrailEdges(tl);
+        }, onClearFocus: clearTrailFocus, onFocusStep: focusTrailStep, onHoverStep: (tl, i) => {
             setHoveredTrailStep({ trailId: tl.id, stepIndex: i });
             onTrailStepHover?.({ trailId: tl.id, stepIndex: i });
         }, onHoverFlow: (tl) => {
@@ -2074,7 +2245,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         }, onLeaveStep: () => {
             setHoveredTrailStep(null);
             onTrailStepHover?.(null);
-        }, onReorder: onReorderTrails, proposedAliases: proposedAliases })) : treeFilePaths.length > 0 ? (_jsx(_Fragment, { children: repoGroups.groups.map((group, i) => {
+        }, onReorder: onReorderTrails, proposedAliases: proposedAliases, layoutFocusedTrailId: layoutTrailId, onFocusLayout: toggleLayoutFocus })) : 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: {
@@ -2087,7 +2258,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         }) })) : 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: {
+            : 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", { className: layoutFlipping ? LAYOUT_FLIP_CLASS : undefined, style: {
                         position: 'relative',
                         flex: collapseCanvas ? 0 : 1,
                         minHeight: 0,
@@ -2101,6 +2272,8 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                                 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';
@@ -2200,13 +2373,55 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                                                             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: {
+                            }) })), _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}`), (graphTitle || overlayTrailTitle || overlayTrailStep) && (_jsxs("div", { style: {
+                            }, 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%',
@@ -2338,7 +2553,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                                         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] }) }));
+                                    }, 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 || layoutFlipping }), 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. */