@principal-ai/subsystems-react 0.51.3 → 0.52.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, isTrailMechanism, edgeColor, MECHANISM_DESCRIPTIONS, subsystemGraphLayoutKey, trailStepGraphEdgeId, } from './model';
+import { buildSubsystemGraph, deriveGraphEdges, isConstructsOnlyModel, moduleGroupNodeId, processGroupNodeId, isTrailMechanism, edgeColor, MECHANISM_DESCRIPTIONS, subsystemGraphLayoutKey, trailStepGraphEdgeId, } from './model';
 import { ConstructsCatalog } from './ConstructsCatalog';
 import { SubsystemAgentsPanel, } from './AgentsPanel';
 import { MaintainLivePanel, } from '../components/maintain-events/MaintainLivePanel';
@@ -654,17 +654,25 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             c.name === target.label ||
             c.symbol === target.label) ?? null);
     }, [components]);
-    // 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).
-    const issueModuleNodeId = useCallback((issue) => {
+    // A `module` / `process` 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).
+    const issueFrameNodeId = useCallback((issue) => {
         const target = issue.target;
-        if (target?.kind !== 'module')
-            return null;
-        const key = target.id ?? target.label;
-        if (!components.some((c) => c.module?.trim() === key))
-            return null;
-        return moduleGroupNodeId(key);
+        if (target?.kind === 'module') {
+            const key = target.id ?? target.label;
+            if (!components.some((c) => c.module?.trim() === key))
+                return null;
+            return moduleGroupNodeId(key);
+        }
+        if (target?.kind === 'process') {
+            const key = target.id ?? target.label;
+            if (!components.some((c) => c.process === key))
+                return null;
+            return processGroupNodeId(key);
+        }
+        return null;
     }, [components]);
     // A `step` issue target names ONE step of a trail — the trail id in
     // `id`, the 0-based step position in `stepIndex`. Validated against the loaded
@@ -709,7 +717,9 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         return map;
     }, [issues, issueComponent]);
     // Per-frame diagnostics badge: the same fold, but for findings about a
-    // BOUNDARY rather than a construct. Keyed by the region's React Flow node id.
+    // BOUNDARY rather than a construct. Keyed by the region's React Flow node
+    // id — a `module` target names a module frame, a `process` target a process
+    // frame (dynamic-topology findings, e.g. C4 process verification).
     // Only kinds with a dedicated frame icon qualify (`ISSUE_KIND_ICON`) — a
     // finding with no icon of its own has nothing to badge the frame with, and
     // borrowing its layer's icon would imply the frame is at fault for it.
@@ -719,9 +729,13 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             return map;
         for (const issue of issues) {
             const target = issue.target;
-            if (target?.kind !== 'module' || !ISSUE_KIND_ICON[issue.kind])
+            if (!target || !ISSUE_KIND_ICON[issue.kind])
+                continue;
+            if (target.kind !== 'module' && target.kind !== 'process')
                 continue;
-            const id = moduleGroupNodeId(target.id ?? target.label);
+            const id = target.kind === 'module'
+                ? moduleGroupNodeId(target.id ?? target.label)
+                : processGroupNodeId(target.id ?? target.label);
             const prev = map.get(id);
             map.set(id, {
                 severity: prev?.severity === 'error' || issue.severity === 'error' ? 'error' : 'info',
@@ -762,6 +776,22 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         }
         return map;
     }, [issues, trails, issueStep]);
+    // Edges backed by a step that ITSELF declares `proposed` — a planned seam
+    // between otherwise-real components. Distinct from a proposed ENDPOINT
+    // (the node is the placeholder there, and draws its own dashed border):
+    // here the seam is the claim that is not real yet, so the edge label draws
+    // dashed. Proposed steps are never verified, so this never competes with
+    // the step-issue badge.
+    const proposedEdgeIds = useMemo(() => {
+        const set = new Set();
+        for (const trail of trails ?? []) {
+            for (const step of trail.steps) {
+                if (step.proposed)
+                    set.add(trailStepGraphEdgeId(step));
+            }
+        }
+        return set;
+    }, [trails]);
     // Expanded verification layers in the diagnostics list. When any layer with
     // findings is expanded, the canvas dims everything that layer does not
     // implicate (see `issueFocus`). The list publishes this through
@@ -787,6 +817,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     // target:
     //   component   → that node
     //   module      → every component in that module
+    //   process     → every component with that `process` key
     //   trail → the flow's nodes + its step edges
     //   repo        → every component of that repo
     //   graph       → whole-graph finding; implicates nothing specific
@@ -822,6 +853,13 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                     }
                 }
             }
+            else if (t.kind === 'process') {
+                const key = t.id ?? t.label;
+                for (const c of components) {
+                    if (c.process === key)
+                        nodeIds.add(c.alias);
+                }
+            }
             else if (t.kind === 'trail') {
                 const wt = (trails ?? []).find((w) => w.id === t.id || w.title === t.label);
                 if (wt) {
@@ -1017,7 +1055,8 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                 // Host override wins over the library's derived frame color.
                 const color = region?.key != null ? boundaryColors?.[region.key] : undefined;
                 // Boundary findings badge the FRAME, not a member — a region's shape is
-                // the fault, so no leaf construct carries it.
+                // the fault, so no leaf construct carries it. Process verification
+                // findings ride the same path: their target kind is `process`.
                 const regionIssue = regionIssueByNodeId.get(n.id);
                 return {
                     ...n,
@@ -1070,6 +1109,11 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     }, [xyflowNodesBase, openFile, selected, focusNodeIds, openedNodeIds, brightNodeIds, previewNodeIds, issueFocusNodeIds, issueBadgeByAlias, regionIssueByNodeId, boundaryColors]);
     const baseNodesKey = useMemo(() => nodes.map((n) => n.id).sort().join(','), [nodes]);
     const baseEdgesKey = useMemo(() => convertedEdges.map((e) => e.id).sort().join(','), [convertedEdges]);
+    // Stamp `proposedStep` onto edge data so the SVG edge itself (not just its
+    // label) draws dashed when a backing trail step declares itself proposed.
+    const proposedStampedEdges = useMemo(() => baseEdges.map((e) => proposedEdgeIds.has(e.id)
+        ? { ...e, data: { ...e.data, proposedStep: true } }
+        : e), [baseEdges, proposedEdgeIds]);
     const dispEdges = useMemo(() => {
         const paint = (e, dimmed) => {
             const markerEnd = e.markerEnd;
@@ -1094,7 +1138,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             return isTrailMechanism(mechanism);
         };
         if (openedEdgeIds || focusEdgeIds || previewEdgeIds || issueFocusEdgeIds) {
-            return baseEdges.map((e) => {
+            return proposedStampedEdges.map((e) => {
                 const vis = flowElementVisibility({
                     inOpened: openedEdgeIds?.has(e.id) === true,
                     inSelected: focusEdgeIds?.has(e.id) === true,
@@ -1108,13 +1152,13 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             });
         }
         if (selectedEdgeId) {
-            return baseEdges.map((e) => ({
+            return proposedStampedEdges.map((e) => ({
                 ...paint(e, e.id !== selectedEdgeId),
                 hidden: !edgeInView(e),
             }));
         }
-        return baseEdges.map((e) => ({ ...e, hidden: !edgeInView(e) }));
-    }, [baseEdges, selectedEdgeId, openedEdgeIds, focusEdgeIds, previewEdgeIds, issueFocusEdgeIds, resolvedEdgeView]);
+        return proposedStampedEdges.map((e) => ({ ...e, hidden: !edgeInView(e) }));
+    }, [proposedStampedEdges, selectedEdgeId, openedEdgeIds, focusEdgeIds, previewEdgeIds, issueFocusEdgeIds, resolvedEdgeView]);
     const onNodesChange = useCallback((changes) => {
         // Capture dimension changes (React Flow's measurement callback).
         // Group parents are ELK-sized — ignore their measurements.
@@ -1805,7 +1849,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         else {
             // Nothing selectable — but a module target names a boundary frame, so
             // frame that region.
-            const moduleNodeId = issueModuleNodeId(issue);
+            const moduleNodeId = issueFrameNodeId(issue);
             if (moduleNodeId) {
                 setSelected(null);
                 setSelectedEdgeId(null);
@@ -1822,7 +1866,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     }, [
         issueComponent,
         issueStep,
-        issueModuleNodeId,
+        issueFrameNodeId,
         focusTrailStep,
         onSelect,
         onSelectIssue,
@@ -1845,7 +1889,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         }
         else {
             const step = issueStep(issue);
-            const moduleNodeId = step ? null : issueModuleNodeId(issue);
+            const moduleNodeId = step ? null : issueFrameNodeId(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,
@@ -1872,7 +1916,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         requestAnimationFrame(() => {
             fitView({ padding: 0.1, duration: 300, minZoom: 0.05, maxZoom: 2 });
         });
-    }, [issueComponent, issueStep, issueModuleNodeId, fitView]);
+    }, [issueComponent, issueStep, issueFrameNodeId, fitView]);
     // Construct tokens inside a trail 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
@@ -1931,6 +1975,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             .map((e) => {
             const d = e.data;
             const stepIssue = stepIssueBadgeByEdgeId.get(e.id);
+            const proposed = proposedEdgeIds.has(e.id);
             return {
                 id: e.id,
                 mechanism: d?.mechanism ?? 'uses',
@@ -1941,10 +1986,11 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                 pathLength: d?.pathLength ?? 0,
                 stepNos: selectedFlowStepNos?.get(e.id),
                 stepIssue,
+                proposed,
             };
         });
         return labels;
-    }, [dispEdges, selectedFlowStepNos, stepIssueBadgeByEdgeId]);
+    }, [dispEdges, selectedFlowStepNos, stepIssueBadgeByEdgeId, proposedEdgeIds]);
     // Unique source files across components → sidebar file trees.
     const treeFilePaths = treeFiles;
     // The hovered node's file (null when not hovering / file-less component).
@@ -2130,7 +2176,9 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                                                     position: 'absolute',
                                                     inset: 0,
                                                     borderRadius: 4,
-                                                    border: `0.5px solid ${color}`,
+                                                    border: lbl.proposed
+                                                        ? `1.5px dashed ${color}`
+                                                        : `0.5px solid ${color}`,
                                                     background: theme.colors.backgroundSecondary ?? theme.colors.background,
                                                     pointerEvents: 'none',
                                                 } })) : (_jsx("svg", { "aria-hidden": true, width: EDGE_LABEL_WIDTH, height: EDGE_LABEL_HEIGHT + EDGE_LABEL_CLOUD_EXTRA_TOP, viewBox: `0 0 ${EDGE_LABEL_WIDTH} ${EDGE_LABEL_HEIGHT + EDGE_LABEL_CLOUD_EXTRA_TOP}`, style: {
@@ -2138,7 +2186,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                                                     left: 0,
                                                     top: -EDGE_LABEL_CLOUD_EXTRA_TOP,
                                                     pointerEvents: 'none',
-                                                }, children: _jsx("path", { d: EDGE_LABEL_CLOUD_PATH, fill: theme.colors.backgroundSecondary ?? theme.colors.background, stroke: hexWithAlpha(color, 0.75), strokeWidth: 1.2, strokeLinejoin: "round" }) })), _jsx("span", { style: {
+                                                }, children: _jsx("path", { d: EDGE_LABEL_CLOUD_PATH, fill: theme.colors.backgroundSecondary ?? theme.colors.background, stroke: hexWithAlpha(color, 0.75), strokeWidth: 1.2, strokeLinejoin: "round", strokeDasharray: lbl.proposed ? '4 3' : undefined }) })), _jsx("span", { style: {
                                                     position: 'relative',
                                                     display: 'block',
                                                     maxWidth: '100%',