@principal-ai/subsystems-react 0.56.3 → 0.56.5

package/dist/subsystem/SubsystemComponentGraph.js

@@ -18,7 +18,7 @@ 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, ArrowDown, ArrowRight, Unlink, X } from 'lucide-react';
+import { ArrowDown, ArrowRight, Files, Route, Unlink, X } from 'lucide-react';
 import { IndustryMarkdownSlide } from 'themed-markdown';
 import { buildSubsystemGraph, deriveGraphEdges, isConstructsOnlyModel, moduleGroupNodeId, processGroupNodeId, isTrailMechanism, edgeColor, MECHANISM_DESCRIPTIONS, subsystemGraphLayoutKey, trailStepGraphEdgeId, unroutedEdgeIds, } from './model';
 import { ConstructsCatalog } from './ConstructsCatalog';
@@ -27,15 +27,14 @@ import { MaintainLivePanel, } from '../components/maintain-events/MaintainLivePa
 import { SubsystemComponentNode, SubsystemGroupNode, SubsystemEdge, SUBSYSTEM_CALLBACKS, hexWithAlpha, EDGE_DIM_ALPHA, fileMatchForNode, flowElementVisibility, flowNodeVisibility } from './nodes';
 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 { SubsystemFileTree } from './SubsystemFileTree';
+import { buildTreePathMapping } from './paths';
 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';
-import { buildRepoGroups, repoAvatarUrl } from './paths';
 import { TrailsPanel, TRAIL_PLAY_PAUSE_MS } from './TrailsPanel';
-import { TrailStackBreadcrumb } from './TrailStackBreadcrumb';
 import { EDGE_LABEL_WIDTH, EDGE_LABEL_HEIGHT, EDGE_LABEL_FONT_SIZE, EDGE_LABEL_CLOUD_PATH, EDGE_LABEL_CLOUD_EXTRA_TOP, } from '../utils/edgeLabel';
 /** Identifiers a token could match to name this component as a construct. */
 function constructIdentifiers(comp) {
@@ -128,9 +127,9 @@ const TrailDrawerContent = memo(function TrailDrawerContent({ render, trail, ste
             onVisibleStepChange,
         }) }));
 });
-function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirection: layoutDirectionProp, defaultLayoutDirection = 'horizontal', onLayoutDirectionChange, hideLayoutToggle = false, refocusOnLayoutFlip = true, initialTrailId, onTrailSelect, onTrailStepHover, onReorderTrails, stepEmphasis, onRemoveStepEmphasis, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, moduleNesting, edgeView, 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, stepEmphasis, onRemoveStepEmphasis, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, moduleNesting, edgeView, hideSidebar, trailStepMode = 'focus', autoPlayTrails = false, trailAutoPlayIntervalMs = TRAIL_PLAY_PAUSE_MS, zoomOnTrailFocus = true, trailFocusDurationMs = 300, graphTitle, showTrailTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, issues, showIssues, filesActive, 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 { fitView, fitBounds } = useReactFlow();
     const viewport = useViewport();
     // Restored once per mount from `localStorage` (see `readViewState`). Each
     // graph is its own tab/mount, so `persistKey` is stable for a mount.
@@ -286,73 +285,6 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
     drawerOpenRef.current = drawerTarget != null;
     // Pending deferred fit after opening the drawer; cancelled on re-entry / unmount.
     const pendingFocusFitRef = useRef(null);
-    // Component the pointer is over (null on leave) → transient tree highlight.
-    const [hoveredComponentAlias, setHoveredComponentId] = useState(null);
-    // Boundary frame hovered on the canvas → highlight the matching folder row in
-    // the sidebar file tree, so a frame's place in the repo tree is visible.
-    const [hoveredRegion, setHoveredRegion] = useState(null);
-    const hoveredBoundaryPath = hoveredRegion && (hoveredRegion.kind === 'module' || hoveredRegion.kind === 'directory')
-        ? hoveredRegion.key
-        : null;
-    // Path frames (module / directory) as absolute flow-coord rects, hit-tested
-    // on pointer move. A pointer hit-test keeps the frames' interior hoverable
-    // WITHOUT an overlay that would block edges / child nodes.
-    const pathFrameRects = useMemo(() => {
-        const out = [];
-        for (const n of built.nodes) {
-            if (n.type !== 'subsystem-group')
-                continue;
-            const region = n.data?.region;
-            if (!region?.key || (region.kind !== 'module' && region.kind !== 'directory'))
-                continue;
-            const r = built.absoluteRects.get(n.id);
-            if (!r)
-                continue;
-            out.push({ kind: region.kind, key: region.key, x: r.x, y: r.y, w: r.width, h: r.height });
-        }
-        return out;
-    }, [built.nodes, built.absoluteRects]);
-    useEffect(() => {
-        if (pathFrameRects.length === 0)
-            return;
-        let raf = 0;
-        let last = null;
-        const overCanvas = (e) => e.composedPath().some((el) => el instanceof HTMLElement && el.classList.contains(GRAPH_CANVAS_CLASS));
-        const onMove = (e) => {
-            if (!overCanvas(e)) {
-                last = null;
-                setHoveredRegion((prev) => (prev == null ? prev : null));
-                return;
-            }
-            last = { x: e.clientX, y: e.clientY };
-            if (raf)
-                return;
-            raf = window.requestAnimationFrame(() => {
-                raf = 0;
-                if (!last)
-                    return;
-                const p = screenToFlowPosition(last);
-                let best = null;
-                let bestArea = Number.POSITIVE_INFINITY;
-                for (const f of pathFrameRects) {
-                    if (p.x >= f.x && p.x <= f.x + f.w && p.y >= f.y && p.y <= f.y + f.h) {
-                        const area = f.w * f.h;
-                        if (area < bestArea) {
-                            bestArea = area;
-                            best = { kind: f.kind, key: f.key };
-                        }
-                    }
-                }
-                setHoveredRegion((prev) => prev?.kind === best?.kind && prev?.key === best?.key ? prev : best);
-            });
-        };
-        window.addEventListener('mousemove', onMove);
-        return () => {
-            window.removeEventListener('mousemove', onMove);
-            if (raf)
-                cancelAnimationFrame(raf);
-        };
-    }, [pathFrameRects, screenToFlowPosition]);
     // Trail focus — selected flow (or step) is full strength; other
     // opened-flow members stay visible but dimmed; everything else is hidden.
     // Restored from the persisted view state when a `persistKey` is set.
@@ -365,44 +297,24 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
     // a number = that step. Transient — no drawer. Camera only reframes when
     // a step is already selected.
     const [hoveredTrailStep, setHoveredTrailStep] = useState(null);
-    // Sidebar bottom half: which panel is shown when trails exist.
-    // The persisted value is membership-checked rather than trusted: a stale
-    // localStorage entry from before the walkthrough->trail rename would match
-    // neither panel and render a blank sidebar with no selected tab.
-    const [sidebarView, setSidebarView] = useState(() => {
-        const stored = persisted.sidebarView;
-        const restored = stored === 'files' || stored === 'trails' ? stored : 'trails';
-        return trails?.length ? restored : 'files';
-    });
     // Diagnostics area tab: issues list vs the Maintain agent pipeline.
     const [diagnosticsTab, setDiagnosticsTab] = useState(() => persisted.diagnosticsTab ?? 'issues');
-    // One edge source at a time. When the caller doesn't pick, the sidebar's
-    // Files / Trails tab picks: Files draws graphify static edges,
-    // 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;
+    // One edge source at a time. Prefer runtime steps when trails exist;
+    // otherwise draw static relations, unless the caller picks explicitly.
     // 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');
+            ((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.
     const [expandedTrails, setExpandedTrails] = useState(() => new Set(persisted.expandedTrails ?? []));
-    // Sidebar description visibility. Hidden by default so the files/flows
-    // panel gets the vertical room; the title-row toggle reveals it.
-    const [descriptionVisible, setDescriptionVisible] = useState(false);
-    const [descToggleHover, setDescToggleHover] = useState(false);
-    // `true` only when a description exists AND the user opened it.
-    const showDesc = !!description && descriptionVisible;
     // Sidebar width lives in the shared GraphWithSidebar chrome — draggable and
     // persisted under `principal.subsystems.sidebarWidth.<persistKey>`. The graph
     // caps it at half the view width so the canvas keeps room to breathe;
@@ -427,11 +339,6 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
             return;
         writeViewState(persistKey, { focusedStepIndex });
     }, [persistKey, focusedStepIndex]);
-    useEffect(() => {
-        if (!persistKey)
-            return;
-        writeViewState(persistKey, { sidebarView });
-    }, [persistKey, sidebarView]);
     useEffect(() => {
         if (!persistKey)
             return;
@@ -757,12 +664,10 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
         };
         SUBSYSTEM_CALLBACKS.onEdgeSelect = selectEdge;
         SUBSYSTEM_CALLBACKS.maxNodeWidth = maxNodeWidth;
-        SUBSYSTEM_CALLBACKS.onHover = setHoveredComponentId;
         return () => {
             SUBSYSTEM_CALLBACKS.onSelect = undefined;
             SUBSYSTEM_CALLBACKS.onEdgeSelect = undefined;
             SUBSYSTEM_CALLBACKS.maxNodeWidth = undefined;
-            SUBSYSTEM_CALLBACKS.onHover = undefined;
         };
     }, [components, onSelect, maxNodeWidth, selectEdge]);
     const { nodes, edges: convertedEdges } = built;
@@ -1355,18 +1260,13 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
         setFocusedStepIndex(null);
         issueModuleFocusRef.current = null;
     }, []);
-    // Sidebar file trees — one per repo on multi-repo graphs, each under its
-    // own owner-avatar header. Clicking a header collapses that repo's tree.
-    const repoGroups = useMemo(() => buildRepoGroups(components), [components]);
     const hasTrails = useMemo(() => (trails?.length ?? 0) > 0, [trails]);
+    const treePaths = useMemo(() => buildTreePathMapping(components), [components]);
     // Alias → component, so the Trails panel can show human hop names instead
     // of model-local aliases (and the site/`via` distinction can read).
     const componentByAlias = useMemo(() => new Map(components.map((c) => [c.alias, c])), [components]);
-    // Diagnostics view in the sidebar. Uncontrolled unless the host pins
-    // `showIssues`: the title-row chip toggles it, seeded from issues presence.
-    const [diagnosticsOpen, setDiagnosticsOpen] = useState(showIssues ?? (issues?.length ?? 0) > 0);
-    const controlledIssues = showIssues !== undefined;
-    const issuesActive = controlledIssues ? showIssues : diagnosticsOpen;
+    // The outer header owns the diagnostics toggle and passes its resolved state.
+    const issuesActive = showIssues === true;
     // Layer focus only applies while the diagnostics list is on screen — closing
     // it clears any dimming the expanded layers were driving.
     useEffect(() => {
@@ -1374,32 +1274,6 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
             setExpandedIssueCategories([]);
         }
     }, [issuesActive]);
-    const toggleIssues = () => {
-        if (!controlledIssues)
-            setDiagnosticsOpen((v) => !v);
-        diagnostic?.onToggle?.();
-    };
-    const [collapsedRepos, setCollapsedRepos] = useState(new Set());
-    const toggleRepoCollapsed = useCallback((key) => {
-        setCollapsedRepos((prev) => {
-            const next = new Set(prev);
-            if (next.has(key))
-                next.delete(key);
-            else
-                next.add(key);
-            return next;
-        });
-    }, []);
-    const treeFiles = useMemo(() => repoGroups.groups.flatMap((g) => g.entries.map((e) => e.file)), [repoGroups]);
-    const onTreeSelectFile = useCallback((file) => {
-        setFileOverlay(null);
-        if (openFileRef.current?.file === file && openFileRef.current.startLine == null) {
-            setDrawerTarget(null);
-            return;
-        }
-        setDrawerTarget({ kind: 'file', file });
-        onFileSelect?.(file);
-    }, [onFileSelect]);
     const onOpenDeclarationFile = useCallback((file, opts) => {
         setFileOverlay(null);
         const startLine = opts?.startLine;
@@ -1648,9 +1522,22 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
         setDrawerTarget((prev) => (prev?.kind === 'trail' ? null : prev));
         onTrailSelect?.(null);
     }, [onTrailSelect]);
+    // A hidden trail must not leave the file view filtered to its cast.
+    const filesWereActive = useRef(false);
+    useEffect(() => {
+        const enteringFiles = filesActive && !filesWereActive.current;
+        filesWereActive.current = filesActive;
+        if (!enteringFiles)
+            return;
+        clearTrailFocus();
+        setExpandedTrails(new Set());
+        setSelectedEdgeId(null);
+        setLayoutTrailId(null);
+        onTrailStepHover?.(null);
+    }, [filesActive, clearTrailFocus, onTrailStepHover]);
     // 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
+    // flow — expand its steps and focus its edges.
+    // Guarded by a ref so a later in-tab selection isn't yanked
     // back; a remount (or a new id) re-applies it.
     const appliedInitialTrailRef = useRef(null);
     useEffect(() => {
@@ -1664,22 +1551,9 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
         if (!tl)
             return;
         appliedInitialTrailRef.current = initialTrailId;
-        setSidebarView('trails');
         setExpandedTrails((prev) => new Set(prev).add(tl.id));
         focusTrailEdges(tl);
     }, [initialTrailId, layoutReady, trails, focusTrailEdges]);
-    // Switching sidebar panels also switches the edge vocabulary. Leaving the
-    // Trails panel drops its canvas state (focus, expanded flows, selected
-    // edge) so the Files view's topology edges aren't gated by a flow the user
-    // can no longer see or un-dim.
-    const changeSidebarView = useCallback((view) => {
-        setSidebarView(view);
-        if (view === 'trails')
-            return;
-        clearTrailFocus();
-        setExpandedTrails(new Set());
-        setSelectedEdgeId(null);
-    }, [clearTrailFocus]);
     // Focus a single step's edge on the canvas and open/scroll the trail
     // drawer to that step's snippet. Clicking the already-focused step clears
     // step focus and returns to whole-flow (high-level) framing.
@@ -2142,14 +2016,6 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
         });
         return labels;
     }, [dispEdges, selectedFlowStepNos, stepIssueBadgeByEdgeId]);
-    // Unique source files across components → sidebar file trees.
-    const treeFilePaths = treeFiles;
-    // The hovered node's file (null when not hovering / file-less component).
-    const hoveredFile = useMemo(() => {
-        if (!hoveredComponentAlias)
-            return null;
-        return components.find((c) => c.alias === hoveredComponentAlias)?.file ?? null;
-    }, [components, hoveredComponentAlias]);
     // Drawer content renderer. Path-keyed only — the component-keyed
     // `renderFileView` variant was removed; nothing in-repo passed it.
     const fileViewer = renderFileViewer;
@@ -2159,15 +2025,15 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
     const trailViewerRef = useRef(renderTrailViewer);
     trailViewerRef.current = renderTrailViewer;
     const renderTrailDrawerContent = useCallback((ctx) => trailViewerRef.current?.(ctx) ?? null, []);
-    // Sidebar chrome — title/description header, Files/Trails (or Issues/Agents)
-    // tab strip, and the lower panels. Everything renders through the shared
+    // Sidebar chrome — description header, files/trails, and optional Issues/Agents
+    // diagnostics. 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
+    // trail, diagnostics tab) 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;
+        (description || filesActive || issuesActive || sidebarExtra || sidebarAfterDescription ||
+            hasTrails);
+    const sidebarBodyVisible = hasTrails || filesActive || issuesActive;
     const sidebarTabs = issuesActive
         ? agentsPanel
             ? [
@@ -2175,49 +2041,15 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
                 { 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: (tl) => {
+        : undefined;
+    // Header block: extras, then the description.
+    const sidebarHeader = (_jsxs(_Fragment, { children: [sidebarExtra, description && (_jsx("div", { style: { fontSize: theme.fontSizes[0], lineHeight: 1.5 }, children: _jsx(IndustryMarkdownSlide, { content: description, slideIdPrefix: "subsystem-desc", slideIndex: 0, isVisible: true, theme: theme, disableScroll: true, disableBasePadding: true, enableKeyboardScrolling: false, autoFocusOnVisible: false }) })), sidebarAfterDescription] }));
+    // Lower panel: diagnostics, the file tree, or the trail flow list.
+    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 }))) : filesActive ? (_jsx(SubsystemFileTree, { files: treePaths.entries.map((entry) => entry.displayPath), selectedFile: openFile ? treePaths.toDisplay.get(openFile) : null, onSelectFile: (path) => {
+            const file = treePaths.toFile.get(path);
+            if (file)
+                onOpenDeclarationFile(file);
+        } })) : 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.
@@ -2233,17 +2065,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
         }, onLeaveStep: () => {
             setHoveredTrailStep(null);
             onTrailStepHover?.(null);
-        }, onReorder: onReorderTrails, componentByAlias: componentByAlias, stepEmphasis: stepEmphasis, onRemoveStepEmphasis: onRemoveStepEmphasis, 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: {
-                    flex: collapsed ? '0 0 auto' : 1,
-                    minHeight: collapsed ? 0 : undefined,
-                    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;
+        }, onReorder: onReorderTrails, componentByAlias: componentByAlias, stepEmphasis: stepEmphasis, onRemoveStepEmphasis: onRemoveStepEmphasis, layoutFocusedTrailId: layoutTrailId, onFocusLayout: toggleLayoutFocus })) : null;
     const fileOverlayView = fileOverlay && (_jsxs("div", { style: {
             position: 'absolute',
             inset: 0,
@@ -2269,9 +2091,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
                             fontSize: theme.fontSizes[0],
                             color: theme.colors.textMuted ?? theme.colors.textSecondary,
                         }, children: fileOverlay.file }), _jsx(FileOverlayCloseButton, { onClose: closeFileOverlay })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: _jsx(FileDrawerContent, { render: renderDrawerContent, file: fileOverlay.file, startLine: fileOverlay.startLine, endLine: fileOverlay.endLine, fullFile: true }) })] }));
-    return (_jsx(GraphWithSidebar, { hidden: !sidebarVisible, bodyHidden: !sidebarBodyVisible, 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: committedDirection === 'vertical' ? 'row' : 'column', minHeight: 0, minWidth: 0 }, children: [_jsxs("div", { className: layoutFlipping ? LAYOUT_FLIP_CLASS : undefined, style: {
+    return (_jsx(GraphWithSidebar, { hidden: !sidebarVisible, bodyHidden: !sidebarBodyVisible, headerMaxHeight: sidebarBodyVisible ? '30%' : '100%', header: sidebarHeader, tabs: sidebarTabs, activeTab: diagnosticsTab, onTabChange: (id) => setDiagnosticsTab(id), sidebarBody: sidebarBody, tabListLabel: issuesActive ? 'Diagnostics view' : 'Sidebar view', defaultWidth: persisted.sidebarWidth ?? 450, minWidth: 240, maxWidth: sidebarMaxWidth, persistKey: persistKey, onResizeEnd: () => requestAnimationFrame(() => fitView()), children: _jsxs("div", { style: { flex: 1, position: 'relative', display: 'flex', flexDirection: committedDirection === 'vertical' ? 'row' : 'column', minHeight: 0, minWidth: 0 }, children: [_jsxs("div", { className: layoutFlipping ? LAYOUT_FLIP_CLASS : undefined, style: {
                         position: 'relative',
                         flex: collapseCanvas ? 0 : 1,
                         minHeight: 0,
@@ -2541,55 +2361,48 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
                                     drawerTarget.startLine != null &&
                                     !!selected.file &&
                                     selected.file === drawerTarget.file &&
-                                    selected.declarationSpan?.startLine === drawerTarget.startLine }) })), committedDirection === 'vertical' && fileOverlayView] }), _jsx(FileDrawer, { title: drawerTitle, onClose: closeDrawer, placement: committedDirection === 'vertical' ? 'left' : 'bottom', onResizeEnd: () => requestAnimationFrame(() => fitView()), fillHeight: drawerFillHeight, suppressEscape: fileOverlayOpen, hidden: hideDrawer, progress: drawerProgress, subheader: drawerTarget?.kind === 'trail' &&
-                        focusedTrail &&
-                        drawerTarget.stepIndex != null ? (_jsx(TrailStackBreadcrumb, { trail: focusedTrail, stepIndex: drawerTarget.stepIndex, componentByAlias: componentByAlias, onFocusStep: (index) => focusTrailStep(focusedTrail, index) })) : null, children: drawerTarget?.kind === 'trail' &&
+                                    selected.declarationSpan?.startLine === drawerTarget.startLine }) })), committedDirection === 'vertical' && fileOverlayView] }), _jsx(FileDrawer, { title: drawerTitle, onClose: closeDrawer, placement: committedDirection === 'vertical' ? 'left' : 'bottom', onResizeEnd: () => requestAnimationFrame(() => fitView()), fillHeight: drawerFillHeight, suppressEscape: fileOverlayOpen, hidden: hideDrawer, progress: drawerProgress, children: drawerTarget?.kind === 'trail' &&
                         focusedTrail &&
                         renderTrailViewer ? (_jsx(TrailDrawerContent, { render: renderTrailDrawerContent, trail: focusedTrail, stepIndex: drawerTarget.stepIndex, onOpenFile: onOpenFileFromTrail, resolveSymbol: resolveTrailSymbol, onSymbolClick: openConstructDeclaration, onVisibleStepChange: setVisibleStepIndex })) : drawerTarget?.kind === 'file' ? (_jsx(FileDrawerContent, { render: renderDrawerContent, file: drawerTarget.file, startLine: drawerTarget.startLine, endLine: drawerTarget.endLine })) : null }), committedDirection !== 'vertical' && fileOverlayView, _jsx(GraphLayoutCover, { revealed: layoutReady || layoutFlipping }), canvasOverlay, liveEvents ? _jsx(MaintainLivePanel, { ...liveEvents }) : null] }) }));
 }
-/** Sidebar header for one repo's tree: owner avatar + repo name + file count.
- *  Clicking toggles the tree's visibility. */
-function RepoGroupHeader({ group, collapsed, onToggle, }) {
-    const { theme } = useTheme();
-    const avatar = repoAvatarUrl(group.repoKey);
-    const label = group.repo ?? 'No repo';
-    return (_jsxs("div", { role: "button", "aria-expanded": !collapsed, onClick: (e) => {
-            e.stopPropagation();
-            onToggle();
-        }, title: collapsed ? 'Show files' : 'Hide files', style: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            padding: '10px 16px 4px',
-            flexShrink: 0,
-            cursor: 'pointer',
-            userSelect: 'none',
-        }, children: [avatar ? (_jsx("img", { src: avatar, alt: "", width: 16, height: 16, loading: "lazy", style: { borderRadius: 4, flexShrink: 0, background: theme.colors.border } })) : group.owner ? (_jsx("span", { style: {
-                    width: 16,
-                    height: 16,
-                    borderRadius: 4,
-                    flexShrink: 0,
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    fontSize: 9,
-                    fontWeight: 700,
-                    fontFamily: theme.fonts.monospace,
-                    color: theme.colors.text,
-                    background: theme.colors.border,
-                }, children: group.owner.charAt(0).toUpperCase() })) : null, _jsx("span", { style: {
-                    fontSize: theme.fontSizes[1],
-                    fontFamily: theme.fonts.monospace,
-                    color: theme.colors.text,
-                    fontWeight: 600,
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    whiteSpace: 'nowrap',
-                }, children: label })] }));
-}
 export function SubsystemComponentGraph(props) {
+    const { theme } = useTheme();
     const wrapRef = useRef(null);
     const [size, setSize] = useState(null);
+    const [filesOpen, setFilesOpen] = useState(false);
+    const fileCount = useMemo(() => buildTreePathMapping(props.components).entries.length, [props.components]);
+    const hasFiles = fileCount > 0;
+    const [diagnosticsOpen, setDiagnosticsOpen] = useState(props.showIssues ?? (props.issues?.length ?? 0) > 0);
+    const issuesActive = props.showIssues ?? diagnosticsOpen;
+    const filesActive = filesOpen && hasFiles && !issuesActive;
+    const selectSidebarView = (view) => {
+        const nextIssuesActive = view === 'issues';
+        setFilesOpen(view === 'files');
+        if (nextIssuesActive !== issuesActive) {
+            if (props.showIssues === undefined)
+                setDiagnosticsOpen(nextIssuesActive);
+            props.diagnostic?.onToggle?.();
+        }
+    };
+    const viewButtonStyle = (active) => ({
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        height: 28,
+        padding: '4px 7px',
+        fontFamily: theme.fonts.monospace,
+        fontSize: theme.fontSizes[0],
+        border: 'none',
+        borderRadius: 4,
+        background: active ? theme.colors.border : 'transparent',
+        color: active ? theme.colors.text : (theme.colors.textMuted ?? theme.colors.textSecondary),
+        cursor: 'pointer',
+    });
+    useEffect(() => {
+        if (props.initialTrailId)
+            setFilesOpen(false);
+    }, [props.initialTrailId]);
     // Measure the container so React Flow always has a real, non-zero pixel size
     // (responsive to the parent; avoids the %→0 blank canvas).
     useEffect(() => {
@@ -2611,13 +2424,40 @@ export function SubsystemComponentGraph(props) {
         trails: props.trails,
         graphifyRelations: props.graphifyRelations,
     });
-    return (_jsx("div", { ref: wrapRef, style: {
+    return (_jsxs("div", { style: {
             position: 'relative',
             width: '100%',
             height: '100%',
             minHeight: 0,
             display: 'flex',
             flexDirection: 'column',
-        }, children: _jsx("div", { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: constructsOnly ? (_jsx(ConstructsCatalog, { components: props.components, onSelect: props.onSelect, title: props.title, hideSidebar: props.hideSidebar, description: props.description, descriptionOpen: props.descriptionOpen, onDescriptionOpenChange: props.onDescriptionOpenChange, diagnostic: props.diagnostic, sidebarExtra: props.sidebarExtra, sidebarAfterDescription: props.sidebarAfterDescription, renderFileViewer: props.renderFileViewer, onFileSelect: props.onFileSelect, componentVerification: props.componentVerification, onInspectSymbol: props.onInspectSymbol })) : (_jsx(ReactFlowProvider, { children: _jsx(Inner, { ...props, measured: size }) })) }) }));
+        }, children: [!constructsOnly && !props.hideSidebar && (_jsxs("header", { style: {
+                    flexShrink: 0,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 12,
+                    padding: '12px 16px',
+                    background: theme.colors.background,
+                    borderBottom: `1px solid ${theme.colors.border}`,
+                }, children: [props.title && (_jsx("h2", { style: {
+                            margin: 0,
+                            minWidth: 0,
+                            fontSize: theme.fontSizes[2],
+                            fontWeight: 600,
+                            color: theme.colors.text,
+                            fontFamily: theme.fonts.monospace,
+                            overflowWrap: 'anywhere',
+                        }, children: props.title })), _jsxs("div", { role: "group", "aria-label": "Sidebar view", style: {
+                            marginLeft: 'auto',
+                            flexShrink: 0,
+                            display: 'grid',
+                            gridAutoFlow: 'column',
+                            gridAutoColumns: '1fr',
+                            alignItems: 'center',
+                            gap: 2,
+                            padding: 2,
+                            border: `1px solid ${theme.colors.border}`,
+                            borderRadius: 6,
+                        }, children: [_jsxs("button", { type: "button", "aria-label": "Trails", "aria-pressed": !filesActive && !issuesActive, onClick: () => selectSidebarView('trails'), style: viewButtonStyle(!filesActive && !issuesActive), children: [_jsx(Route, { size: 14, "aria-hidden": true }), _jsx("span", { children: "Trails" })] }), hasFiles && (_jsxs("button", { type: "button", "aria-label": `Files (${fileCount} files)`, title: "Show files", "aria-pressed": filesActive, onClick: () => selectSidebarView('files'), style: viewButtonStyle(filesActive), children: [_jsx(Files, { size: 14, "aria-hidden": true }), _jsx("span", { children: "Files" }), _jsx("span", { style: { fontWeight: 600 }, children: fileCount })] })), _jsx(SubsystemDiagnosticToggle, { ...(props.diagnostic ?? { status: 'unknown', issueCount: props.issues?.length }), labelText: "Issues", segmented: true, active: issuesActive, onToggle: () => selectSidebarView('issues') })] })] })), _jsx("div", { ref: wrapRef, style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: constructsOnly ? (_jsx(ConstructsCatalog, { components: props.components, onSelect: props.onSelect, title: props.title, hideSidebar: props.hideSidebar, description: props.description, descriptionOpen: props.descriptionOpen, onDescriptionOpenChange: props.onDescriptionOpenChange, diagnostic: props.diagnostic, sidebarExtra: props.sidebarExtra, sidebarAfterDescription: props.sidebarAfterDescription, renderFileViewer: props.renderFileViewer, onFileSelect: props.onFileSelect, componentVerification: props.componentVerification, onInspectSymbol: props.onInspectSymbol })) : (_jsx(ReactFlowProvider, { children: _jsx(Inner, { ...props, showIssues: issuesActive, filesActive: filesActive, measured: size }) })) })] }));
 }
 //# sourceMappingURL=SubsystemComponentGraph.js.map