@principal-ai/subsystems-react 0.51.2 → 0.51.4

package/src/subsystem/C4NodeCard.test.ts

@@ -4,7 +4,7 @@ import {
   nodeSubtitle,
   nodeTag,
   nodeKindIcon,
-  nodeTypeLabel,
+  nodeTopLabel,
   nodeShape,
   nodeMissing,
   NODE_W,
@@ -113,14 +113,19 @@ describe('nodeTag — what the box IS', () => {
   });
 });
 
-describe('nodeKindIcon — the kind as a glyph, not a word', () => {
-  test('every kind has its own icon', () => {
-    const icons = (['container', 'component', 'external-system', 'person'] as const).map((kind) =>
-      nodeKindIcon(node({ kind })),
-    );
-    for (const icon of icons) expect(icon).toBeDefined();
-    // Different kinds must not share a glyph, or the icon says nothing.
-    expect(new Set(icons).size).toBe(4);
+describe('nodeKindIcon — a container’s sort, not its C4 kind', () => {
+  test('application and data-store get different icons', () => {
+    const app = nodeKindIcon(node({ containerKind: 'application' }));
+    const store = nodeKindIcon(node({ containerKind: 'data-store' }));
+    expect(app).toBeDefined();
+    expect(store).toBeDefined();
+    expect(app).not.toBe(store);
+  });
+
+  test('only containers get an icon — the shape carries the rest', () => {
+    for (const kind of ['component', 'external-system', 'person'] as const) {
+      expect(nodeKindIcon(node({ kind }))).toBeUndefined();
+    }
   });
 
   test('the icon does not depend on confirmation state', () => {
@@ -130,16 +135,22 @@ describe('nodeKindIcon — the kind as a glyph, not a word', () => {
   });
 });
 
-describe('nodeTypeLabel — the one word in the icon row', () => {
-  test('a container names its kind', () => {
-    expect(nodeTypeLabel(node({ containerKind: 'application' }))).toBe('application');
-    expect(nodeTypeLabel(node({ containerKind: 'data-store' }))).toBe('data-store');
+describe('nodeTopLabel — the technology, or the kind when none is stated', () => {
+  test('a stated technology is the label', () => {
+    expect(
+      nodeTopLabel(node({ containerKind: 'application', technology: 'Bun + Electrobun' })),
+    ).toBe('Bun + Electrobun');
+    expect(nodeTopLabel(node({ kind: 'component', technology: 'React + ELK' }))).toBe('React + ELK');
   });
 
-  test('the other three kinds have no subtype, so no word', () => {
-    for (const kind of ['component', 'external-system', 'person'] as const) {
-      expect(nodeTypeLabel(node({ kind }))).toBeUndefined();
-    }
+  test('a container with no technology falls back to its kind', () => {
+    expect(nodeTopLabel(node({ containerKind: 'data-store', technology: '' }))).toBe('data-store');
+  });
+
+  test('the other kinds fall back to their C4 kind', () => {
+    expect(nodeTopLabel(node({ kind: 'component' }))).toBe('component');
+    expect(nodeTopLabel(node({ kind: 'external-system' }))).toBe('external-system');
+    expect(nodeTopLabel(node({ kind: 'person' }))).toBe('person');
   });
 });
 
@@ -174,52 +185,28 @@ describe('nodeShape — kind without relying on colour or dash', () => {
 });
 
 describe('nodeSubtitle', () => {
-  test('shows the technology, and does not repeat the container kind', () => {
-    const s = nodeSubtitle(
-      node({ containerKind: 'application', technology: 'Bun + Electrobun' }),
-    );
-    expect(s).toBe('Bun + Electrobun');
-    expect(s).not.toContain('application');
-  });
-
-  test('a container with no technology falls back to its construct breakdown', () => {
-    const s = nodeSubtitle(
-      node({ containerKind: 'data-store', technology: '', constructs: ['store'], members: ['a'] }),
-    );
-    expect(s).toBe('1 store · 1 component');
-  });
-
-  test('falls back to the construct breakdown when neither is stated', () => {
-    const s = nodeSubtitle(node({ constructs: ['function', 'store'], members: ['a', 'b'] }));
-    expect(s).toContain('function');
-    expect(s).toContain('store');
-    expect(s).toContain('2 components');
-  });
-
-  test('singularises a single member', () => {
-    const s = nodeSubtitle(node({ constructs: ['function'], members: ['a'] }));
-    expect(s).toContain('1 component');
-    expect(s).not.toContain('1 components');
-  });
-
-  test('a component shows its construct and file basename', () => {
-    const s = nodeSubtitle(
-      node({
-        kind: 'component',
-        component: {
-          alias: 'a',
-          name: 'buildGroups',
-          construct: 'function',
-          file: 'src/subsystem/model.ts',
-          purl: 'pkg:x#src/subsystem/model.ts',
-        },
-      }),
-    );
-    expect(s).toBe('function · model.ts');
-  });
-
-  test('a component shows its technology when it has one', () => {
-    expect(nodeSubtitle(node({ kind: 'component', technology: 'React + ELK' }))).toBe('React + ELK');
+  test('is the element description when it has one', () => {
+    expect(
+      nodeSubtitle(node({ technology: 'Bun', description: 'Runs the audit pipeline.' })),
+    ).toBe('Runs the audit pipeline.');
+  });
+
+  test('is empty when nothing is stated — there is no fallback', () => {
+    const withTech = node({ technology: 'Bun + Electrobun' });
+    const withMembers = node({ constructs: ['function', 'store'], members: ['a', 'b'] });
+    const component = node({
+      kind: 'component',
+      component: {
+        alias: 'a',
+        name: 'buildGroups',
+        construct: 'function',
+        file: 'src/subsystem/model.ts',
+        purl: 'pkg:x#src/subsystem/model.ts',
+      },
+    });
+    for (const n of [withTech, withMembers, component]) {
+      expect(nodeSubtitle(n)).toBe('');
+    }
   });
 });
 
@@ -285,8 +272,8 @@ describe('nodeSize — a component is a proper square', () => {
 
 describe('card metrics', () => {
   test('exposes the size the graph lays out against', () => {
-    expect(NODE_W).toBe(210);
-    expect(NODE_H).toBe(138);
+    expect(NODE_W).toBe(250);
+    expect(NODE_H).toBe(150);
   });
 
   test('COMPONENT_SIZE is a square, not just a smaller rectangle', () => {
@@ -295,23 +282,23 @@ describe('card metrics', () => {
   });
 
   test('is near-square, not a wide strip', () => {
-    // The card carries four fields (tag, label, kind+technology, notation
-    // gap). A 3:1 strip truncates the last two; this is the aspect ratio that
-    // lets each sit on its own line.
+    // The card carries three fields (technology row, label, description). A
+    // 3:1 strip wraps the last two hard; this is the aspect ratio that lets
+    // each sit on its own line.
     const ratio = NODE_W / NODE_H;
     expect(ratio).toBeGreaterThan(1);
     expect(ratio).toBeLessThan(1.8);
   });
 
-  test('is tall enough for four lines of content', () => {
-    // tag + 2-line label + subtitle + gap marker, plus 8px padding top/bottom.
+  test('is tall enough for three lines of content', () => {
+    // technology row + 2-line label + description, plus padding.
     expect(NODE_H).toBeGreaterThanOrEqual(130);
   });
 
-  test('leaves breathing room around four lines of text', () => {
+  test('leaves breathing room around three lines of text', () => {
     // Top-aligned now, not centred, so this is about slack rather than
-    // balance: tag + 2-line label slot + subtitle + gap slot + padding.
-    const contentBudget = 16 + 40 + 16 + 18 + 20; // lines + 10px padding ×2
+    // balance: technology row + 2-line label slot + description + padding.
+    const contentBudget = 16 + 40 + 16 + 20; // lines + 10px padding ×2
     expect(NODE_H - contentBudget).toBeGreaterThanOrEqual(12);
   });
 
@@ -323,13 +310,20 @@ describe('card metrics', () => {
 });
 
 describe('container kinds', () => {
-  test('every container kind renders as the icon-row label without special-casing', () => {
-    const kinds = ['application', 'data-store'] as const;
-    for (const containerKind of kinds) {
-      expect(nodeTypeLabel(node({ containerKind }))).toBe(containerKind);
+  test('each container kind has an icon and a fallback label', () => {
+    for (const containerKind of ['application', 'data-store'] as const) {
+      expect(nodeKindIcon(node({ containerKind }))).toBeDefined();
+      // No technology stated, so the label falls back to the kind.
+      expect(nodeTopLabel(node({ containerKind, technology: '' }))).toBe(containerKind);
     }
   });
 
+  test('application and data-store do not share an icon', () => {
+    expect(nodeKindIcon(node({ containerKind: 'application' }))).not.toBe(
+      nodeKindIcon(node({ containerKind: 'data-store' })),
+    );
+  });
+
   test('a library is not one of them', () => {
     // C4 says a module "typically" is not an element at all, so there is no
     // kind to render. A library-shaped group is a review comment.

package/src/subsystem/C4NodeCard.tsx

@@ -7,24 +7,24 @@
  *
  * The encoding has one job: make confirmation state legible at a glance. A box
  * nobody has looked at must not read the same as a box a person signed off.
- * Kind says what the box is — shape, size, and a written tag — and everything
- * else in C4 notation (technology, description) is surfaced in the order a
- * reader wants it.
+ * Kind is carried by shape and size — plus an icon for a container's sort,
+ * application vs data-store — and C4 notation is surfaced in the order a reader
+ * wants it: technology on the top row, description under the label.
  */
 
 import { useTheme } from '@principal-ade/industry-theme';
-import { Cloud, Component, Container, UserRound } from 'lucide-react';
+import { AppWindow, Database } from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
-import { describeConstructBreakdown } from './model';
+import { TechMark, technologyBrand } from './techIcons';
 import type { C4Node } from './c4';
 
 /**
  * Card box for a container: a wide rectangle. A container carries four things
- * at once (tag, label, type + technology, and the notation gap it still has),
- * and a strip would force the last two to truncate.
+ * at once (technology row, label, description, and the notation gap it still
+ * has), and a strip would force the last two to wrap hard.
  */
-export const NODE_W = 210;
-export const NODE_H = 138;
+export const NODE_W = 250;
+export const NODE_H = 150;
 
 /**
  * A component is a proper square — equal sides, and visibly smaller than the
@@ -32,7 +32,7 @@ export const NODE_H = 138;
  * these are different C4 levels, and it survives grayscale and colour-blind
  * reading where a border-weight difference alone does not.
  */
-export const COMPONENT_SIZE = 132;
+export const COMPONENT_SIZE = 140;
 
 /**
  * Per-level box size. The graph lays out against these, so a square component
@@ -45,12 +45,10 @@ export function nodeSize(node: C4Node): { width: number; height: number } {
 }
 
 /**
- * Fixed slot heights, so rows line up across every card regardless of which
- * optional fields are present. Without these a card missing its notation-gap
- * marker is two lines shorter and a row of cards reads as ragged.
+ * Fixed label slot, so the description below sits at the same y on every card
+ * even when a label is one line rather than two.
  */
 const LABEL_SLOT_H = 40;
-const GAP_SLOT_H = 18;
 
 type Theme = ReturnType<typeof useTheme>['theme'];
 
@@ -91,32 +89,18 @@ export function nodeStyle(node: C4Node, theme: Theme, selected = false): NodeSty
       // Dashed — an agent asked; a human has not answered.
       return { color: theme.colors.warning ?? '#e8a33a', dash: 'dashed', width: weight };
     case 'rejected':
-      // Should never be drawn (buildC4Model drops it); belt-and-braces.
+      // Should never be drawn (a rejected element is not projected); belt-and-braces.
       return { color: muted, dash: 'dotted', width: 1 };
   }
 }
 
-function baseName(path: string): string {
-  const parts = path.split('/').filter(Boolean);
-  return parts[parts.length - 1] ?? path;
-}
-
 /**
- * The kind + technology line under the label.
- *
- * The container kind moved up to the icon row (see `nodeTypeLabel`), so it is
- * not repeated here. Technology is the remaining confirmed attribute; without
- * one we fall back to what the document told us.
+ * The line under the label: the element's one-line responsibility, which C4
+ * asks every element to carry. No fallback — when nothing is stated, the
+ * notation-gap row says so rather than the card inventing a summary.
  */
 export function nodeSubtitle(node: C4Node): string {
-  if (node.technology) return node.technology;
-
-  // No stated technology: fall back to what the document told us.
-  if (node.kind === 'component') {
-    return `${node.component?.construct ?? 'code'}${node.component?.file ? ` · ${baseName(node.component.file)}` : ''}`;
-  }
-  const count = node.members.length;
-  return `${describeConstructBreakdown(node.constructs)}${count > 0 ? ` · ${count} component${count === 1 ? '' : 's'}` : ''}`;
+  return node.description ?? '';
 }
 
 /**
@@ -130,31 +114,26 @@ export function nodeTag(node: C4Node): string {
 }
 
 /**
- * The glyph for the C4 kind, shown in place of a word. The kind is already
- * carried by the box shape (see `nodeShape`); the icon lets the top row spend
- * its one piece of text on the container's kind instead of repeating
- * "container".
+ * The icon on the top row: a container's sort, **application vs data-store**.
+ *
+ * The C4 kind itself does not need a glyph — the box shape already carries it
+ * (square vs rectangle vs pill), and the row's one text slot is worth more
+ * spent on the technology. Only containers have a C4-recognised split, so the
+ * other three kinds return nothing.
  */
-export function nodeKindIcon(node: C4Node): LucideIcon {
-  switch (node.kind) {
-    case 'container':
-      return Container;
-    case 'component':
-      return Component;
-    case 'external-system':
-      return Cloud;
-    case 'person':
-      return UserRound;
-  }
+export function nodeKindIcon(node: C4Node): LucideIcon | undefined {
+  if (node.kind !== 'container') return undefined;
+  return node.containerKind === 'data-store' ? Database : AppWindow;
 }
 
 /**
- * The word beside the kind icon: what sort of container this is — C4's two,
- * `application` or `data-store`. The other three kinds have no such subtype,
- * so they show nothing; the icon and shape are the whole label.
+ * The text on the top row: the technology the box is built with (Bun, React,
+ * Postgres…). Falls back to the container kind / C4 kind when no technology is
+ * stated, so the row is never blank.
  */
-export function nodeTypeLabel(node: C4Node): string | undefined {
-  return node.kind === 'container' ? node.containerKind : undefined;
+export function nodeTopLabel(node: C4Node): string {
+  if (node.technology) return node.technology;
+  return node.kind === 'container' ? (node.containerKind ?? 'container') : node.kind;
 }
 
 /** How a box is drawn. Shape carries the C4 kind, independent of colour. */
@@ -226,11 +205,15 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
   const style = nodeStyle(node, theme, selected);
   const shape = nodeShape(node);
-  const missing = nodeMissing(node);
   const Icon = nodeKindIcon(node);
-  const typeLabel = nodeTypeLabel(node);
+  const brand = technologyBrand(node.technology);
+  const topLabel = nodeTopLabel(node);
+  const subtitle = nodeSubtitle(node);
 
   const size = nodeSize(node);
+  // A pill (a person) has no straight left edge, so left-aligned text reads as
+  // spilling out of the oval. Centre the text and inset it from the curve.
+  const centered = shape.kind === 'pill';
 
   return (
     <div
@@ -246,7 +229,7 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
         // height on every card. In a graph grid that makes the row unscannable.
         justifyContent: 'flex-start',
         gap: 3,
-        padding: '10px 12px',
+        padding: centered ? '10px 30px' : '10px 12px',
         borderRadius: shape.radius,
         background: theme.colors.backgroundSecondary ?? theme.colors.background,
         border: `${style.width} ${style.dash} ${style.color}`,
@@ -255,30 +238,26 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
         fontFamily: theme.fonts.body,
       }}
     >
-      {/* The kind is carried by the icon and the box shape; the one word here
-          is the container's kind. Confirmation state is carried by the border
-          (see `nodeStyle`), not by a word. */}
+      {/* Left: the brand mark when we hold the official one, then the
+          technology. Right: a container's C4 sort, application vs data-store.
+          The kind itself stays on the shape, confirmation on the border (see
+          `nodeShape`, `nodeStyle`). */}
       <span
         style={{
           display: 'flex',
           alignItems: 'center',
+          justifyContent: centered ? 'center' : 'space-between',
           gap: 6,
           fontFamily: theme.fonts.monospace,
           fontSize: theme.fontSizes[0],
-          color: style.color,
+          color: muted,
           letterSpacing: 0.5,
           textTransform: 'uppercase',
           minWidth: 0,
         }}
       >
-        <span
-          title={nodeTag(node)}
-          aria-label={nodeTag(node)}
-          style={{ display: 'inline-flex', flexShrink: 0 }}
-        >
-          <Icon size={13} strokeWidth={2.25} />
-        </span>
-        {typeLabel && (
+        <span style={{ display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }}>
+          {brand && <TechMark brand={brand} />}
           <span
             style={{
               fontWeight: 600,
@@ -288,7 +267,16 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
               minWidth: 0,
             }}
           >
-            {typeLabel}
+            {topLabel}
+          </span>
+        </span>
+        {Icon && (
+          <span
+            title={node.containerKind ?? node.kind}
+            aria-label={node.containerKind ?? node.kind}
+            style={{ display: 'inline-flex', flexShrink: 0, color: style.color }}
+          >
+            <Icon size={13} strokeWidth={2.25} />
           </span>
         )}
       </span>
@@ -307,43 +295,25 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
           WebkitLineClamp: 2,
           WebkitBoxOrient: 'vertical',
           overflow: 'hidden',
+          textAlign: centered ? 'center' : 'left',
         }}
         title={node.label}
       >
         {node.label}
       </span>
-      <span
-        style={{
-          fontFamily: theme.fonts.monospace,
-          fontSize: theme.fontSizes[0],
-          color: muted,
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-        }}
-        title={node.description ?? node.members.join(', ')}
-      >
-        {nodeSubtitle(node)}
-      </span>
-      {/* Reserved row: without it, a card with no notation gap is two lines
-          shorter and the row of cards reads as ragged. */}
-      <span style={{ height: GAP_SLOT_H }} aria-hidden="true" />
-      {missing.length > 0 && (
+      {subtitle && (
         <span
-          title={`C4 requires a ${missing.join(' and a ')} on every container`}
           style={{
             fontFamily: theme.fonts.monospace,
             fontSize: theme.fontSizes[0],
-            color: theme.colors.warning ?? '#e8a33a',
-            lineHeight: 1.3,
-            height: GAP_SLOT_H,
-            display: '-webkit-box',
-            WebkitLineClamp: 2,
-            WebkitBoxOrient: 'vertical',
-            overflow: 'hidden',
+            color: muted,
+            lineHeight: 1.35,
+            whiteSpace: 'normal',
+            overflowWrap: 'anywhere',
+            textAlign: centered ? 'center' : 'left',
           }}
         >
-          needs {missing.join(' + ')}
+          {subtitle}
         </span>
       )}
       {handles}

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -1190,18 +1190,15 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
   const stepIssueBadgeByEdgeId = useMemo(() => {
     const map = new Map<string, { kind: 'step_unconfirmed' | 'step_stale'; severity: 'info' | 'error'; count: number }>();
     if (!issues?.length || !trails?.length) {
-      console.log('[stepIssueBadge] early return: issues=', issues?.length, 'trails=', trails?.length);
       return map;
     }
     for (const issue of issues) {
       if (issue.kind !== 'step_unconfirmed' && issue.kind !== 'step_stale') continue;
       const stepInfo = issueStep(issue);
-      console.log('[stepIssueBadge] issue', issue.id, 'kind=', issue.kind, 'stepInfo=', stepInfo);
       if (!stepInfo) continue;
       const step = stepInfo.trail.steps[stepInfo.stepIndex];
       if (!step) continue;
       const edgeId = trailStepGraphEdgeId(step);
-      console.log('[stepIssueBadge] -> edgeId=', edgeId);
       const prev = map.get(edgeId);
       // step_stale is worse than step_unconfirmed
       const isWorse = issue.kind === 'step_stale' && prev?.kind !== 'step_stale';
@@ -1211,10 +1208,25 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
         count: (prev?.count ?? 0) + 1,
       });
     }
-    console.log('[stepIssueBadge] final map size=', map.size);
     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<string>();
+    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
@@ -1534,6 +1546,17 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     () => 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 as object), proposedStep: true } }
+          : e,
+      ),
+    [baseEdges, proposedEdgeIds],
+  );
 
   const dispEdges = useMemo(() => {
     const paint = (e: Edge, dimmed: boolean): Edge => {
@@ -1562,7 +1585,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,
@@ -1576,13 +1599,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: NodeChange[]) => {
@@ -2499,7 +2522,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
           pathLength?: number;
         } | undefined;
         const stepIssue = stepIssueBadgeByEdgeId.get(e.id);
-        console.log('[edgeLabels] edge', e.id, 'stepIssue=', stepIssue);
+        const proposed = proposedEdgeIds.has(e.id);
         return {
           id: e.id,
           mechanism: d?.mechanism ?? 'uses',
@@ -2510,11 +2533,11 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
           pathLength: d?.pathLength ?? 0,
           stepNos: selectedFlowStepNos?.get(e.id),
           stepIssue,
+          proposed,
         };
       });
-    console.log('[edgeLabels] total labels=', labels.length, 'with stepIssue=', labels.filter(l => l.stepIssue).length);
     return labels;
-  }, [dispEdges, selectedFlowStepNos, stepIssueBadgeByEdgeId]);
+  }, [dispEdges, selectedFlowStepNos, stepIssueBadgeByEdgeId, proposedEdgeIds]);
 
   // Unique source files across components → sidebar file trees.
   const treeFilePaths = treeFiles;
@@ -2941,7 +2964,9 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                   crisp rounded box; soft / ambiguous ones (uses, feeds,
                   watches …) get a real lobed cloud silhouette — ambiguous, not
                   a dashed proposal (or a pill, which border-radius can only
-                  ever make). */}
+                  ever make). A step that ITSELF declares `proposed` dashes the
+                  silhouette — the seam is planned, distinct from a proposed
+                  ENDPOINT, which dashes the node instead. */}
               {verifiable ? (
                 <span
                   aria-hidden
@@ -2949,7 +2974,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',
@@ -2974,6 +3001,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
                     stroke={hexWithAlpha(color, 0.75)}
                     strokeWidth={1.2}
                     strokeLinejoin="round"
+                    strokeDasharray={lbl.proposed ? '4 3' : undefined}
                   />
                 </svg>
               )}