@principal-ai/subsystems-react 0.41.0 → 0.43.0

package/dist/subsystem/SubsystemComponentGraph.js

@@ -20,7 +20,7 @@ import { ReactFlow, ReactFlowProvider, useReactFlow, useViewport, applyNodeChang
 import { useTheme } from '@principal-ade/industry-theme';
 import { FileText, X } from 'lucide-react';
 import { IndustryMarkdownSlide } from 'themed-markdown';
-import { buildSubsystemGraph, deriveGraphEdges, isConstructsOnlyModel, moduleGroupNodeId, isRelationMechanism, isWalkthroughMechanism, edgeColor, MECHANISM_DESCRIPTIONS, subsystemGraphLayoutKey, walkthroughStepGraphEdgeId, } from './model';
+import { buildSubsystemGraph, deriveGraphEdges, isConstructsOnlyModel, moduleGroupNodeId, isWalkthroughMechanism, edgeColor, MECHANISM_DESCRIPTIONS, subsystemGraphLayoutKey, walkthroughStepGraphEdgeId, } from './model';
 import { ConstructsCatalog } from './ConstructsCatalog';
 import { SubsystemAgentsPanel, } from './AgentsPanel';
 import { MaintainLivePanel, } from '../components/maintain-events/MaintainLivePanel';
@@ -122,14 +122,14 @@ const WalkthroughDrawerContent = memo(function WalkthroughDrawerContent({ render
             onSymbolClick,
         }) }));
 });
-function Inner({ components, relations, walkthroughs, graphifyRelations, orderByLine, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, walkthroughFocusDurationMs = 300, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey, liveEvents, agentsPanel }) {
+function Inner({ components, walkthroughs, graphifyRelations, orderByLine, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, walkthroughFocusDurationMs = 300, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey, liveEvents, agentsPanel }) {
     const { theme } = useTheme();
     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.
     const persisted = useMemo(() => readViewState(persistKey), [persistKey]);
-    const graphEdges = useMemo(() => deriveGraphEdges({ relations, walkthroughs }), [relations, walkthroughs]);
+    const graphEdges = useMemo(() => deriveGraphEdges({ walkthroughs }), [walkthroughs]);
     const [built, setBuilt] = useState({
         nodes: [],
         edges: [],
@@ -162,27 +162,22 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
     // a step is already selected.
     const [hoveredWalkthroughStep, setHoveredWalkthroughStep] = useState(null);
     // Sidebar bottom half: which panel is shown when walkthroughs exist.
-    const [sidebarView, setSidebarView] = useState(() => walkthroughs?.length ? 'walkthroughs' : 'files');
+    const [sidebarView, setSidebarView] = useState(() => persisted.sidebarView ?? (walkthroughs?.length ? 'walkthroughs' : 'files'));
     // Diagnostics area tab: issues list vs the Maintain agent pipeline.
-    const [diagnosticsTab, setDiagnosticsTab] = useState('issues');
-    // Temporary edge-vocabulary override. Focusing a relation finding whose edge
-    // belongs to the *other* vocabulary flips the canvas so the edge is actually
-    // visible; it reverts when the focus is undone (see `unfocusIssueTarget`) or
-    // when the diagnostics list closes. Null = use the host-pinned / tab view.
-    const [edgeViewOverride, setEdgeViewOverride] = useState(null);
-    // One edge vocabulary at a time. When the caller doesn't pick, the sidebar's
-    // Files / Walkthroughs tab picks: Files draws topology relation edges,
+    const [diagnosticsTab, setDiagnosticsTab] = useState(() => persisted.diagnosticsTab ?? 'issues');
+    // One edge source at a time. When the caller doesn't pick, the sidebar's
+    // Files / Walkthroughs tab picks: Files draws graphify static edges,
     // Walkthroughs draws runtime hop edges. Without visible tabs (no walkthroughs,
-    // or a sidebar-less embed) fall back to the model: a flow-only graph defaults
-    // to walkthrough edges rather than empty, everything else to relations.
+    // or a sidebar-less embed) fall back to walkthrough edges.
     const sidebarTabsVisible = !hideSidebar && (walkthroughs?.length ?? 0) > 0;
-    const resolvedEdgeView = edgeViewOverride ??
-        edgeView ??
+    const resolvedEdgeView = edgeView ??
         (sidebarTabsVisible
-            ? (sidebarView === 'walkthroughs' ? 'walkthroughs' : 'relations')
-            : relations.length === 0 && (walkthroughs?.length ?? 0) > 0
+            ? (sidebarView === 'walkthroughs' ? 'walkthroughs' : 'graphify')
+            : (walkthroughs?.length ?? 0) > 0
                 ? 'walkthroughs'
-                : 'relations');
+                : (graphifyRelations?.length ?? 0) > 0
+                    ? 'graphify'
+                    : 'walkthroughs');
     // Walkthrough 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.
@@ -255,6 +250,16 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
             return;
         writeViewState(persistKey, { focusedStepIndex });
     }, [persistKey, focusedStepIndex]);
+    useEffect(() => {
+        if (!persistKey)
+            return;
+        writeViewState(persistKey, { sidebarView });
+    }, [persistKey, sidebarView]);
+    useEffect(() => {
+        if (!persistKey)
+            return;
+        writeViewState(persistKey, { diagnosticsTab });
+    }, [persistKey, diagnosticsTab]);
     // Ref mirror of `selected` so the SUBSYSTEM_CALLBACKS click handler (a
     // closure over the effect deps) can toggle without a stale value.
     const selectedRef = useRef(null);
@@ -371,13 +376,11 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
     // 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 — declarationRef updates after verify must not re-run ELK.
-    const layoutKey = useMemo(() => subsystemGraphLayoutKey({ components, relations, walkthroughs, graphifyRelations }), [components, relations, walkthroughs, graphifyRelations]);
+    const layoutKey = useMemo(() => subsystemGraphLayoutKey({ components, walkthroughs, graphifyRelations }), [components, walkthroughs, graphifyRelations]);
     const componentsRef = useRef(components);
-    const relationsRef = useRef(relations);
     const walkthroughsRef = useRef(walkthroughs);
     const graphifyRelationsRef = useRef(graphifyRelations);
     componentsRef.current = components;
-    relationsRef.current = relations;
     walkthroughsRef.current = walkthroughs;
     graphifyRelationsRef.current = graphifyRelations;
     // Track measured dimensions from React Flow's dimension changes.
@@ -396,7 +399,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         pass2GenRef.current += 1;
         const doc = {
             components: componentsRef.current,
-            relations: relationsRef.current,
             walkthroughs: walkthroughsRef.current,
         };
         void buildSubsystemGraph(doc, {
@@ -455,7 +457,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         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, relations, walkthroughs }, { maxNodeWidth, showEdgeLabels, measuredWidths, measuredHeights, showSingletonFrames, graphifyRelations, orderByLine })
+        void buildSubsystemGraph({ components, walkthroughs }, { maxNodeWidth, showEdgeLabels, measuredWidths, measuredHeights, showSingletonFrames, graphifyRelations, orderByLine })
             .then(({ nodes, edges: e, absoluteRects }) => {
             if (gen !== pass2GenRef.current)
                 return;
@@ -469,7 +471,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
             // Reveal Pass 1 layout rather than leaving the cover up forever.
             setLayoutReady(true);
         });
-    }, [built.nodes, components, relations, walkthroughs, graphifyRelations, orderByLine, maxNodeWidth, showEdgeLabels]);
+    }, [built.nodes, components, walkthroughs, graphifyRelations, orderByLine, maxNodeWidth, showEdgeLabels]);
     // 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.
@@ -549,7 +551,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
     const baseEdges = convertedEdges;
     // Resolve an issue's component target to the matching node. `id` is the
     // stable alias; `label` may be an alias, name, or symbol. Non-component
-    // targets (relation / module / flow / repo) have no single node → null.
+    // targets (module / flow / repo) have no single node → null.
     const issueComponent = useCallback((issue) => {
         const target = issue.target;
         if (target?.kind !== 'component')
@@ -559,26 +561,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
             c.name === target.label ||
             c.symbol === target.label) ?? null);
     }, [components]);
-    // Resolve a `relation` issue target to the display edge it flags. The target
-    // names the two endpoints (`from → to`); match an edge joining both, in
-    // either direction, preferring the target's `detail` mechanism when it names
-    // one. Null when no display edge matches.
-    const issueEdge = useCallback((issue) => {
-        const target = issue.target;
-        if (target?.kind !== 'relation')
-            return null;
-        const parts = `${target.id ?? ''} → ${target.label}`
-            .split('→')
-            .map((p) => p.replace(/\(\)$/, '').trim())
-            .filter(Boolean);
-        const joins = (e) => parts.includes(e.source) && parts.includes(e.target);
-        const matches = baseEdges.filter(joins);
-        const byMechanism = target.detail
-            ? matches.filter((e) => e.data?.mechanism ===
-                target.detail)
-            : matches;
-        return byMechanism[0] ?? matches[0] ?? null;
-    }, [baseEdges]);
     // A `module` issue target names a boundary frame, so focusing the card frames
     // that region on the canvas. Null when the target names no frame (a singleton
     // dropped from the layout, or a region key nothing declares).
@@ -682,7 +664,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
     // the canvas keeps while everything else dims. Derived from each finding's
     // target:
     //   component   → that node
-    //   relation    → the edge it flags (+ its two endpoint nodes)
     //   module      → every component in that module
     //   walkthrough → the flow's nodes + its hop edges
     //   repo        → every component of that repo
@@ -707,23 +688,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
                 if (a)
                     nodeIds.add(a);
             }
-            else if (t.kind === 'relation') {
-                // The target names the two endpoints (`from → to`); light the edge and
-                // its endpoints. Falls back to endpoints alone if no edge matches.
-                const edge = issueEdge(issue);
-                if (edge) {
-                    edgeIds.add(edge.id);
-                    nodeIds.add(edge.source);
-                    nodeIds.add(edge.target);
-                }
-                else {
-                    for (const part of `${t.id ?? ''} → ${t.label}`.split('→')) {
-                        const a = resolveAlias(part);
-                        if (a)
-                            nodeIds.add(a);
-                    }
-                }
-            }
             else if (t.kind === 'module') {
                 const key = t.id ?? t.label;
                 const prefix = `${key.replace(/\/$/, '')}/`;
@@ -763,7 +727,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
                 edgeIds.add(e.id);
         }
         return { nodeIds, edgeIds };
-    }, [issues, expandedIssueCategories, components, walkthroughs, baseEdges, resolveAlias, issueEdge]);
+    }, [issues, expandedIssueCategories, components, walkthroughs, resolveAlias]);
     const issueFocusNodeIds = issueFocus?.nodeIds ?? null;
     const issueFocusEdgeIds = issueFocus?.edgeIds ?? null;
     // When an edge is selected, dim every other edge + its label to focus it.
@@ -1006,13 +970,13 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
             };
         };
         // Edges outside the selected view are hidden entirely (labels included).
-        // graphify-native edges belong to the relations view (they are static
+        // graphify-native edges belong to the graphify view (they are static
         // topology, not runtime hops) regardless of their verb.
         const edgeInView = (e) => {
             const d = e.data;
             const mechanism = d?.mechanism ?? 'uses';
-            if (resolvedEdgeView === 'relations') {
-                return d?.provenance === 'graphify' || isRelationMechanism(mechanism);
+            if (resolvedEdgeView === 'graphify') {
+                return d?.provenance === 'graphify';
             }
             return isWalkthroughMechanism(mechanism);
         };
@@ -1093,7 +1057,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         setSelectedEdgeId(null);
         setFocusedWalkthroughId(null);
         setFocusedStepIndex(null);
-        setEdgeViewOverride(null);
         issueModuleFocusRef.current = null;
     }, []);
     // Sidebar file trees — one per repo on multi-repo graphs, each under its
@@ -1113,7 +1076,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
     useEffect(() => {
         if (!issuesActive) {
             setExpandedIssueCategories([]);
-            setEdgeViewOverride(null);
         }
     }, [issuesActive]);
     const toggleIssues = () => {
@@ -1541,9 +1503,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         if (playable.length === 0)
             return;
         // Only run the cycles that can actually be shown in the current edge view.
-        const inView = playable.filter((tl) => tl.steps.some((s) => resolvedEdgeView === 'relations'
-            ? isRelationMechanism(s.mechanism)
-            : isWalkthroughMechanism(s.mechanism)));
+        const inView = playable.filter((tl) => tl.steps.some((s) => isWalkthroughMechanism(s.mechanism)));
         if (inView.length === 0)
             return;
         const cyc = inView;
@@ -1696,15 +1656,13 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         onSelect?.(comp.alias);
     }, [components, onSelect]);
     // Issue click → select + frame the target on the canvas. Component targets
-    // frame their node; relation targets frame their edge (endpoints + the routed
-    // line); other kinds (module / flow / repo) have no single element and just
-    // forward. Selections / focus that would hide the target are cleared first,
-    // then the camera flies to it on the next frame. The host's `onSelectIssue`
-    // still fires afterwards for its own detail.
+    // frame their node; other kinds (module / flow / repo) have no single element
+    // and just forward. Selections / focus that would hide the target are cleared
+    // first, then the camera flies to it on the next frame. The host's
+    // `onSelectIssue` still fires afterwards for its own detail.
     const focusIssueTarget = useCallback((issue) => {
         const comp = issueComponent(issue);
-        const edge = comp ? null : issueEdge(issue);
-        const step = comp || edge ? null : issueStep(issue);
+        const step = comp ? null : issueStep(issue);
         if (comp) {
             setSelected(comp);
             setSelectedEdgeId(null);
@@ -1723,24 +1681,6 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
                 });
             });
         }
-        else if (edge) {
-            setSelected(null);
-            setFocusedWalkthroughId(null);
-            setFocusedStepIndex(null);
-            setHoveredWalkthroughStep(null);
-            setSelectedEdgeId(edge.id);
-            issueModuleFocusRef.current = null;
-            // Flip to the vocabulary this edge belongs to, so a hop flagged in the
-            // relations view (or vice versa) is actually drawn while focused.
-            const d = edge.data;
-            const mechanism = d?.mechanism ?? 'uses';
-            setEdgeViewOverride(d?.provenance === 'graphify' || isRelationMechanism(mechanism)
-                ? 'relations'
-                : 'walkthroughs');
-            requestAnimationFrame(() => {
-                fitFocusBounds(new Set([edge.id]));
-            });
-        }
         else if (step) {
             // A step finding focuses the step itself, through the same entry point
             // the walkthrough panel uses — so the drawer, the step numbering, the
@@ -1768,14 +1708,12 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         onSelectIssue?.(issue);
     }, [
         issueComponent,
-        issueEdge,
         issueStep,
         issueModuleNodeId,
         focusWalkthroughStep,
         onSelect,
         onSelectIssue,
         fitView,
-        fitFocusBounds,
         fitNodeRects,
     ]);
     // Collapsing the issue card again undoes the focus: drop the node / edge
@@ -1793,16 +1731,9 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
             setSelectedEdgeId(null);
         }
         else {
-            const edge = issueEdge(issue);
-            const step = edge ? null : issueStep(issue);
-            const moduleNodeId = edge || step ? null : issueModuleNodeId(issue);
-            if (edge) {
-                if (selectedEdgeIdRef.current !== edge.id)
-                    return;
-                setSelectedEdgeId(null);
-                setEdgeViewOverride(null);
-            }
-            else if (step) {
+            const step = issueStep(issue);
+            const moduleNodeId = step ? null : issueModuleNodeId(issue);
+            if (step) {
                 // Only unwind a step focus this card still owns. A dim-mode graph
                 // keeps its step focus in hover state instead (owned by the pointer,
                 // not the card), and correctly leaves that alone here.
@@ -1828,7 +1759,7 @@ function Inner({ components, relations, walkthroughs, graphifyRelations, orderBy
         requestAnimationFrame(() => {
             fitView({ padding: 0.1, duration: 300, minZoom: 0.05, maxZoom: 2 });
         });
-    }, [issueComponent, issueEdge, issueStep, issueModuleNodeId, fitView]);
+    }, [issueComponent, issueStep, issueModuleNodeId, fitView]);
     // Construct tokens inside a walkthrough snippet. A step's line is an edge
     // between its `from`/`to` components, so a token naming either of those
     // constructs should navigate to that construct's declaration. Index the
@@ -2316,7 +2247,6 @@ export function SubsystemComponentGraph(props) {
     }, []);
     const constructsOnly = isConstructsOnlyModel({
         components: props.components,
-        relations: props.relations,
         walkthroughs: props.walkthroughs,
         graphifyRelations: props.graphifyRelations,
     });