@principal-ai/subsystems-react 0.20.5 → 0.20.6

package/src/subsystem/model.test.ts

@@ -8,6 +8,7 @@ import {
   buildSubsystemGraph,
   deriveNameFromSymbol,
   constructBadgeLabel,
+  rightBadgeLabel,
   nodeMinWidthForBadges,
   formatPurl,
   packageColor,
@@ -156,6 +157,27 @@ describe('subsystem graph model', () => {
       role: 'entry',
     });
     expect(withRole).toBeGreaterThan(stereotype);
+
+    const withProposed = nodeMinWidthForBadges({
+      construct: 'function',
+      proposed: true,
+    });
+    expect(withProposed).toBeGreaterThan(plain);
+
+    const withBoth = nodeMinWidthForBadges({
+      construct: 'function',
+      role: 'entry',
+      proposed: true,
+    });
+    // proposed-only label is shorter than entry · proposed; still wider than plain
+    expect(withBoth).toBe(withProposed);
+  });
+
+  test('rightBadgeLabel prefers proposed over role', () => {
+    expect(rightBadgeLabel({})).toBeNull();
+    expect(rightBadgeLabel({ proposed: true })).toBe('proposed');
+    expect(rightBadgeLabel({ role: 'entry' })).toBe('entry');
+    expect(rightBadgeLabel({ role: 'service', proposed: true })).toBe('proposed');
   });
 
   test('deriveNameFromSymbol falls back to file basename for modules', () => {

package/src/subsystem/model.ts

@@ -126,6 +126,13 @@ export interface SubsystemComponent {
   purl: string;
   /** One-line purpose shown on the node. */
   purpose?: string;
+  /**
+   * Design / migration placeholder — participates in edges and flows but is
+   * not a live source declaration yet. Verification skips source checks until
+   * promoted (`proposed` cleared, `file` + `symbol` filled). Orthogonal to
+   * `construct` (intended shape) and `role` (topology).
+   */
+  proposed?: boolean;
   /**
    * Semantic role — where the node sits in the topology (boundary element,
    * external system), orthogonal to `construct` (what it is). Drives the
@@ -179,13 +186,6 @@ export interface SubsystemComponent {
    * letting ELK guess the order.
    */
   layer?: number;
-  /**
-   * How this session *occupied* the component — `edited` (modified it) vs
-   * `analyzed` (read deeply / built an understanding) vs `referenced`
-   * (touched in passing). Drives clustering: edits strengthen a subsystem,
-   * but a read-only investigation can still form one around an analyzed seam.
-   */
-  capture?: 'edited' | 'analyzed' | 'referenced';
   /**
    * Graphify drill-down detail for this component, when the facet is anchored
    * to a graphify node. Discriminated by kind (class/function/type/module/store/
@@ -525,6 +525,33 @@ export const ROLE_LABEL: Record<SubsystemComponentRole, string> = {
   service: 'service',
 };
 
+/** Right-badge accent for `proposed: true` (no role, or combined with role). */
+export const PROPOSED_COLOR = '#b8860b'; // darkgoldenrod — not-yet-in-source
+
+/**
+ * Top-right badge label: proposed wins over role when both are set
+ * (proposed is the temporary exception to scan for; role stays on the model).
+ * Returns null when neither applies.
+ */
+export function rightBadgeLabel(component: {
+  role?: SubsystemComponentRole;
+  proposed?: boolean;
+}): string | null {
+  if (component.proposed) return 'proposed';
+  if (component.role != null) return ROLE_LABEL[component.role];
+  return null;
+}
+
+/** Color for the top-right badge (role and/or proposed). */
+export function rightBadgeColor(component: {
+  role?: SubsystemComponentRole;
+  proposed?: boolean;
+}): string | null {
+  if (component.proposed) return PROPOSED_COLOR;
+  if (component.role != null) return ROLE_COLOR[component.role];
+  return null;
+}
+
 /**
  * Primary badge text for a node: prefer framework stereotype over the
  * language construct so a React UI unit reads as "component" / "hook"
@@ -576,13 +603,15 @@ export function nodeMinWidthForBadges(component: {
   framework?: string;
   stereotype?: string;
   role?: SubsystemComponentRole;
+  proposed?: boolean;
   entityKind?: string;
 }): number {
   const left = estimateBadgeLabelWidth(constructBadgeLabel(component));
-  if (component.role == null) {
+  const rightLabel = rightBadgeLabel(component);
+  if (rightLabel == null) {
     return Math.max(NODE_CSS_MIN_WIDTH, BADGE_EDGE_INSET + left + BADGE_EDGE_INSET);
   }
-  const right = estimateBadgeLabelWidth(ROLE_LABEL[component.role]);
+  const right = estimateBadgeLabelWidth(rightLabel);
   return Math.max(
     NODE_CSS_MIN_WIDTH,
     BADGE_EDGE_INSET + left + BADGE_PAIR_GAP + right + BADGE_EDGE_INSET,

package/src/subsystem/nodes.tsx

@@ -19,9 +19,10 @@ import { useTheme } from '@principal-ade/industry-theme';
 import {
   MECHANISM_COLOR,
   MECHANISM_STYLE,
-  ROLE_COLOR,
-  ROLE_LABEL,
+  PROPOSED_COLOR,
   constructBadgeLabel,
+  rightBadgeLabel,
+  rightBadgeColor,
   deriveNameFromSymbol,
   BADGE_EDGE_INSET,
   nodeMinWidthForBadges,
@@ -92,11 +93,20 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
   // `symbol` is the source of truth; `name` is derived from it consistently.
   const displayName = deriveNameFromSymbol(c.symbol, c.construct, c.name, c.file, c.stereotype);
   // Top badges are absolutely positioned — widen the node so they nowrap
-  // instead of wrapping, including when construct + role badges share the top.
+  // instead of wrapping, including when construct + role/proposed share the top.
   const badgeMinWidth = nodeMinWidthForBadges(c);
+  const topRightLabel = rightBadgeLabel(c);
+  const topRightColor = rightBadgeColor(c);
   // Set while a file is open in the drawer: true → spotlight, false → dim,
   // absent (no file open) → neutral.
   const fileMatch = data.fileMatch as boolean | undefined;
+  // Border: proposed uses the goldenrod accent (dashed); construct color stays
+  // on the left badge. File-open spotlight still wins with primary.
+  const borderColor = fileMatch
+    ? theme.colors.primary
+    : c.proposed
+      ? PROPOSED_COLOR
+      : color;
   // Selection is stamped into data by the graph component — React Flow's own
   // `selected` never updates because the node stops click propagation.
   const isSelected = selected || (data.isSelected as boolean | undefined) === true;
@@ -129,10 +139,9 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
         padding: '6px 10px',
         borderRadius: 8,
         background: theme.colors.backgroundSecondary ?? theme.colors.background,
-        // Selected / file-matched nodes get a thicker border; kind colors are
-        // kept for selection (thickness only). The file-open spotlight keeps
-        // its primary tint.
-        border: `${isSelected || fileMatch ? 4 : 2}px solid ${fileMatch ? theme.colors.primary : color}`,
+        // Selected / file-matched nodes get a thicker border. Proposed nodes
+        // use a dashed goldenrod border; left construct badge keeps construct color.
+        border: `${isSelected || fileMatch ? 4 : 2}px ${c.proposed ? 'dashed' : 'solid'} ${borderColor}`,
         boxShadow: fileMatch
           ? `0 1px 4px rgba(0,0,0,0.25), 0 0 12px ${theme.colors.primary}55`
           : '0 1px 4px rgba(0,0,0,0.25)',
@@ -167,10 +176,8 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
         {constructBadgeLabel(c)}
       </div>
 
-      {/* Role badge — top-right, only when the node carries a topology role.
-          Role color (entry orange / service blue) on the badge; the node
-          border stays construct-colored. */}
-      {c.role != null && (
+      {/* Right badge — proposed wins over role when both are set. */}
+      {topRightLabel != null && topRightColor != null && (
         <div
           style={{
             position: 'absolute',
@@ -183,14 +190,14 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
             textTransform: 'uppercase',
             lineHeight: '17px',
             whiteSpace: 'nowrap',
-            color: ROLE_COLOR[c.role],
+            color: topRightColor,
             background: theme.colors.backgroundSecondary ?? theme.colors.background,
-            border: `1px solid ${ROLE_COLOR[c.role]}`,
+            border: `1px solid ${topRightColor}`,
             borderRadius: 4,
             padding: '0 5px',
           }}
         >
-          {ROLE_LABEL[c.role]}
+          {topRightLabel}
         </div>
       )}