@principal-ai/subsystems-react 0.53.2 → 0.53.4

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -74,6 +74,7 @@ import {
   issueRung,
   ISSUE_KIND_ICON,
   ISSUE_RUNG_ORDER,
+  type SubsystemIssueListProps,
   type SubsystemIssue,
   type SubsystemIssueCategory,
 } from './IssueList';
@@ -354,6 +355,13 @@ export interface SubsystemComponentGraphProps {
    * plain issues view expands everything.
    */
   focusIssueCategory?: SubsystemIssueCategory;
+  /**
+   * Per-layer verification status from the host's lane summary (the same
+   * derivation the maintainer's lane icons use). Forwarded to the issues
+   * list so a layer with nothing to verify renders muted ("not applicable")
+   * instead of a green check for a verification that never ran.
+   */
+  laneStatus?: SubsystemIssueListProps['laneStatus'];
   /**
    * Click an issue. The graph first focuses the target on the canvas itself —
    * a component target is selected and framed (any edge / trail focus
@@ -528,7 +536,7 @@ interface InnerProps extends SubsystemComponentGraphProps {
   measured: { w: number; h: number } | null;
 }
 
-function Inner({ components, trails, graphifyRelations, orderByLine, initialTrailId, onReorderTrails, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, moduleNesting, edgeView, title, hideSidebar, trailStepMode = 'focus', autoPlayTrails = false, trailAutoPlayIntervalMs = TRAIL_PLAY_PAUSE_MS, zoomOnTrailFocus = true, trailFocusDurationMs = 300, graphTitle, showTrailTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileViewer, renderTrailViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey, liveEvents, agentsPanel }: InnerProps) {
+function Inner({ components, trails, graphifyRelations, orderByLine, initialTrailId, onReorderTrails, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, moduleNesting, edgeView, title, hideSidebar, trailStepMode = 'focus', autoPlayTrails = false, trailAutoPlayIntervalMs = TRAIL_PLAY_PAUSE_MS, zoomOnTrailFocus = true, trailFocusDurationMs = 300, graphTitle, showTrailTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, laneStatus, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileViewer, renderTrailViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey, liveEvents, agentsPanel }: InnerProps) {
   const { theme } = useTheme();
   const { fitView, fitBounds, screenToFlowPosition } = useReactFlow();
   const viewport = useViewport();
@@ -1140,15 +1148,18 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     [trails],
   );
 
-  // Per-node diagnostics badge: fold each component-targeted finding that maps
-  // to a verification rung into one badge per node — worst severity wins, the
-  // chip shows the earliest failing rung, and the count tallies the findings.
+  // Per-node diagnostics badge: fold each component-targeted finding into one
+  // badge per node — worst severity wins, the chip shows the earliest failing
+  // rung, and the count tallies the findings. A finding with no construct rung
+  // still badges the node when it carries a dedicated kind icon (e.g. a C4
+  // process gap): the chip wears the kind's icon instead of a rung's, so the
+  // node says "diagnostics here" for every finding the sidebar lists.
   const issueBadgeByAlias = useMemo(() => {
     const map = new Map<string, SubsystemNodeIssue>();
     if (!issues?.length) return map;
     for (const issue of issues) {
       const rung = issueRung(issue.kind);
-      if (!rung) continue;
+      if (!rung && !ISSUE_KIND_ICON[issue.kind]) continue;
       const comp = issueComponent(issue);
       if (!comp) continue;
       const prev = map.get(comp.alias);
@@ -1158,12 +1169,27 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
             ? 'error'
             : 'info',
         rung:
-          prev != null && ISSUE_RUNG_ORDER[prev.rung] <= ISSUE_RUNG_ORDER[rung]
-            ? prev.rung
-            : rung,
+          rung == null
+            ? prev?.rung
+            : prev?.rung != null &&
+                ISSUE_RUNG_ORDER[prev.rung] <= ISSUE_RUNG_ORDER[rung]
+              ? prev.rung
+              : rung,
         count: (prev?.count ?? 0) + 1,
       });
     }
+    // A rung finding wins the chip; only rung-less nodes wear a kind icon —
+    // the first kind-iconed finding the sidebar lists for that node.
+    for (const [alias, badge] of map) {
+      if (badge.rung != null) continue;
+      const kinded = issues.find(
+        (i) =>
+          !issueRung(i.kind) &&
+          ISSUE_KIND_ICON[i.kind] &&
+          issueComponent(i)?.alias === alias,
+      );
+      if (kinded) map.set(alias, { ...badge, kind: kinded.kind });
+    }
     return map;
   }, [issues, issueComponent]);
 
@@ -2760,6 +2786,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                       <SubsystemIssueList
                         issues={issues ?? []}
                         focusCategory={focusIssueCategory}
+                        laneStatus={laneStatus}
                         onSelectIssue={focusIssueTarget}
                         onDeselectIssue={unfocusIssueTarget}
                         onApplyFix={onApplyIssueFix}
@@ -2772,6 +2799,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                   <SubsystemIssueList
                     issues={issues ?? []}
                     focusCategory={focusIssueCategory}
+                    laneStatus={laneStatus}
                     onSelectIssue={focusIssueTarget}
                     onDeselectIssue={unfocusIssueTarget}
                     onApplyFix={onApplyIssueFix}

package/src/subsystem/model.ts

@@ -1135,8 +1135,19 @@ export type SubsystemIssueRung =
 export interface SubsystemNodeIssue {
   /** Worst severity on the node — `error` (contradicts source) beats `info`. */
   severity: 'error' | 'info';
-  /** Earliest failing rung across the node's findings. */
-  rung: SubsystemIssueRung;
+  /**
+   * Earliest failing rung across the node's findings. Absent when none of the
+   * node's findings sit on the construct ladder — a rung-less finding (e.g. a
+   * process gap) carries its audit `kind` instead.
+   */
+  rung?: SubsystemIssueRung;
+  /**
+   * The audit kind of the node's finding when that finding has no construct
+   * rung: the chip wears the kind's icon (`ISSUE_KIND_ICON`) rather than a
+   * rung's. Set only when `rung` is absent — a rung finding is more specific
+   * about where the construct fails, so it wins the chip.
+   */
+  kind?: string;
   /** Total findings on this node. */
   count: number;
 }

package/src/subsystem/nodes.tsx

@@ -46,6 +46,7 @@ import {
 import { componentColor } from '../pierre/constructColors';
 import { resolvePierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
 import { ISSUE_KIND_ICON, ISSUE_RUNG_ICON } from './IssueList';
+import { Search } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 
 export const CONSTRUCT_LABEL: Record<string, string> = {
@@ -122,11 +123,13 @@ function useSubsystemCallbacks(): SubsystemGraphCallbacks {
 
 /**
  * The diagnostics overlay for a component node: the node's own border turns
- * dotted (see the node's `borderStyle`) and an earliest-failing-rung corner
- * chip (file → symbol → declaration → type → signature) carries the severity
- * color, with a count when the node has more than one finding. The chip is
- * purely additive and non-interactive; the border stays construct-colored, so
- * severity never has to compete with the construct palette.
+ * dotted (see the node's `borderStyle`) and a severity-colored corner chip
+ * carries the count. The chip's icon is the earliest-failing construct rung
+ * (file → symbol → declaration → type → signature); a finding with no rung
+ * (e.g. a C4 process gap) wears its kind icon instead — see
+ * `SubsystemNodeIssue.kind`. The chip is purely additive and non-interactive;
+ * the border stays construct-colored, so severity never has to compete with
+ * the construct palette.
  */
 function NodeIssueOverlay({ issue }: { issue: SubsystemNodeIssue }) {
   const { theme } = useTheme();
@@ -134,10 +137,15 @@ function NodeIssueOverlay({ issue }: { issue: SubsystemNodeIssue }) {
   const color = isError
     ? (theme.colors.error ?? '#e5534b')
     : (theme.colors.warning ?? '#d4a017');
+  const Icon = issue.rung
+    ? ISSUE_RUNG_ICON[issue.rung]
+    : issue.kind
+      ? (ISSUE_KIND_ICON[issue.kind] ?? Search)
+      : Search;
   return (
     <IssueChip
       color={color}
-      Icon={ISSUE_RUNG_ICON[issue.rung]}
+      Icon={Icon}
       count={issue.count}
       anchor={{ right: -9, bottom: -8 }}
     />

package/src/utils/elkLayout.ts

@@ -715,6 +715,28 @@ export function planCompoundGroups(
   return { built, skipped: [...skipped] };
 }
 
+/**
+ * The four side ports every node in the graph carries, named
+ * `<id>_top|_right|_bottom|_left` — the ids `getPortSide` resolves an edge
+ * endpoint to.
+ *
+ * Shared by leaves and compound parents on purpose. A parent is still an ELK
+ * *node* that outside edges terminate on, and ELK rejects the whole graph if an
+ * edge names a port that was never declared: `JsonImportException: Referenced
+ * shape does not exist`. Declaring ports only on leaves silently works right up
+ * until the first edge crosses into a node that later becomes a group — which is
+ * why the drill-down only broke once a container was opened *and* something
+ * outside the boundary pointed at it.
+ */
+function cardinalPorts(id: string) {
+  return [
+    { id: `${id}_top`, properties: { 'port.side': 'NORTH' } },
+    { id: `${id}_right`, properties: { 'port.side': 'EAST' } },
+    { id: `${id}_bottom`, properties: { 'port.side': 'SOUTH' } },
+    { id: `${id}_left`, properties: { 'port.side': 'WEST' } },
+  ];
+}
+
 /**
  * Compute ELK layout for nodes and edges
  *
@@ -774,12 +796,7 @@ export async function computeElkLayout(
       x: node.position.x,
       y,
       // Add ports on each side for edge connections
-      ports: [
-        { id: `${node.id}_top`, properties: { 'port.side': 'NORTH' } },
-        { id: `${node.id}_right`, properties: { 'port.side': 'EAST' } },
-        { id: `${node.id}_bottom`, properties: { 'port.side': 'SOUTH' } },
-        { id: `${node.id}_left`, properties: { 'port.side': 'WEST' } },
-      ],
+      ports: cardinalPorts(node.id),
       properties: {
         'portConstraints': 'FIXED_SIDE',
         ...(layer !== undefined ? { 'layering.layer': String(layer) } : {}),
@@ -999,6 +1016,12 @@ export async function computeElkLayout(
     builtGroups.set(g.id, {
       id: g.id,
       children,
+      // Same side ports a leaf gets. An edge from outside the group terminates
+      // on the group, and ELK throws on a port reference it cannot resolve.
+      // Deliberately NOT `portConstraints: FIXED_SIDE` the way leaves are: each
+      // port already names its own `port.side`, which is what routes the edge,
+      // and pinning a parent could fight the layout of the children it holds.
+      ports: cardinalPorts(g.id),
       layoutOptions:
         Object.keys(sizeOptions).length > 0
           ? { ...compoundLayoutOptions, ...sizeOptions }