@principal-ai/subsystems-react 0.51.0 → 0.51.2

package/src/subsystem/C4NodeCard.tsx

@@ -7,23 +7,43 @@
  *
  * 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.
- * Everything else here is C4 notation — a type, a technology, a description —
- * surfaced in the order a reader wants it.
+ * 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.
  */
 
 import { useTheme } from '@principal-ade/industry-theme';
+import { Cloud, Component, Container, UserRound } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
 import { describeConstructBreakdown } from './model';
-import type { C4Node } from './toC4';
+import type { C4Node } from './c4';
 
 /**
- * Card box. Near-square rather than a wide strip: a C4 element carries four
- * things at once (tag, label, type + technology, and the notation gap it still
- * has), and a wide strip forces the last two to truncate. The extra height is
- * what lets the `needs …` marker sit on its own line instead of clipping.
+ * 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.
  */
 export const NODE_W = 210;
 export const NODE_H = 138;
 
+/**
+ * A component is a proper square — equal sides, and visibly smaller than the
+ * container it sits inside. Square-vs-rectangle is the clearest signal that
+ * 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;
+
+/**
+ * Per-level box size. The graph lays out against these, so a square component
+ * and a rectangular container do not collide at a shared nominal width.
+ */
+export function nodeSize(node: C4Node): { width: number; height: number } {
+  return node.kind === 'component'
+    ? { width: COMPONENT_SIZE, height: COMPONENT_SIZE }
+    : { width: NODE_W, height: NODE_H };
+}
+
 /**
  * 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
@@ -36,26 +56,34 @@ type Theme = ReturnType<typeof useTheme>['theme'];
 
 export interface NodeStyle {
   color: string;
-  dash: string;
+  dash: 'solid' | 'dashed' | 'dotted';
   width: number;
 }
 
 /**
- * Border style and colour for one node, by what we know about it.
+ * Border style for one node: colour, dash and weight, from confirmation state
+ * and level.
+ *
+ * One axis per channel, so nothing is said twice and nothing is contradicted:
+ *
+ *   colour + dash  → confirmation state (the primary axis)
+ *   weight         → C4 level, as a grayscale redundancy for the square
+ *   shape + size   → C4 kind (`nodeShape`, `nodeSize`)
  *
- * Confirmation state wins over C4 kind: an accepted container and a raw
- * derived container are both "containers", and the reader's first question
- * about either is whether anyone vouched for it.
+ * State owning the dash is deliberate. An earlier build gave the dash to kind
+ * and drew proposed boxes solid, quietly contradicting the one thing the
+ * confirm UI needs a reader to see. Kind now says itself through shape, and
+ * the border says who vouched for it.
  */
 export function nodeStyle(node: C4Node, theme: Theme, selected = false): NodeStyle {
   const muted = theme.colors.border ?? '#555';
   if (selected) return { color: theme.colors.primary ?? '#5aa', dash: 'solid', width: 3 };
 
-  // Border width carries the C4 level, so a component stays a component even
+  // Border weight carries the level, so a component stays a component even
   // in grayscale or for a reader who cannot separate the hues.
   const weight = node.kind === 'component' ? 1 : 2;
 
-  switch (node.decoration?.state) {
+  switch (node.state) {
     case 'accepted':
       // Solid and saturated — part of the architecture now.
       return { color: theme.colors.primary ?? '#4ec9b0', dash: 'solid', width: weight };
@@ -63,21 +91,8 @@ 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 (toC4 drops it); belt-and-braces.
+      // Should never be drawn (buildC4Model drops it); belt-and-braces.
       return { color: muted, dash: 'dotted', width: 1 };
-    default:
-      break;
-  }
-
-  // No association at all — the raw derivation. Muted, so confirmed boxes
-  // read as the stronger signal.
-  switch (node.kind) {
-    case 'external':
-      return { color: theme.colors.warning ?? '#a78bfa', dash: 'solid', width: weight };
-    case 'actor':
-      return { color: theme.colors.accent ?? theme.colors.info ?? '#e3b341', dash: 'solid', width: weight };
-    default:
-      return { color: muted, dash: 'solid', width: weight };
   }
 }
 
@@ -86,12 +101,17 @@ function baseName(path: string): string {
   return parts[parts.length - 1] ?? path;
 }
 
-/** The type + technology line under the label. */
+/**
+ * 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.
+ */
 export function nodeSubtitle(node: C4Node): string {
-  const d = node.decoration;
-  if (d?.type || d?.technology) return [d.type, d.technology].filter(Boolean).join(' · ');
+  if (node.technology) return node.technology;
 
-  // No confirmed attributes: fall back to what the document told us.
+  // 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)}` : ''}`;
   }
@@ -100,68 +120,96 @@ export function nodeSubtitle(node: C4Node): string {
 }
 
 /**
- * The C4 level — what the box IS.
- *
- * Deliberately independent of confirmation state. An accepted container is
- * still a container, and a component is a component whether or not anyone has
- * reviewed it; collapsing the two into one label is what made the two
- * indistinguishable. Confirmation is a separate axis (`nodeStateTag`).
+ * What the box IS — its C4 kind. An accepted container is still a container;
+ * collapsing the two is what once made containers and components unreadable.
+ * Confirmation state is a separate axis carried by the border (see
+ * `nodeStyle`), not by a word on the card.
  */
 export function nodeTag(node: C4Node): string {
   return node.kind;
 }
 
 /**
- * Confirmation state, as its own short tag. Empty when nothing was proposed —
- * which is itself the distinction from a reviewed element.
+ * 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".
  */
-export function nodeStateTag(node: C4Node): string {
-  switch (node.decoration?.state) {
-    case 'accepted':
-      return 'confirmed';
-    case 'proposed':
-      return 'proposed';
-    case 'rejected':
-      return 'rejected';
-    default:
-      return 'unconfirmed';
+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;
   }
 }
 
 /**
- * Shape cue for the C4 level, independent of colour and dash pattern.
+ * 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.
+ */
+export function nodeTypeLabel(node: C4Node): string | undefined {
+  return node.kind === 'container' ? node.containerKind : undefined;
+}
+
+/** How a box is drawn. Shape carries the C4 kind, independent of colour. */
+export type C4ShapeKind = 'rect' | 'square' | 'pill';
+
+export interface NodeShape {
+  kind: C4ShapeKind;
+  /** Corner radius, for the shapes that use one. */
+  radius: number;
+}
+
+/**
+ * Shape cue for the C4 kind, independent of colour and dash — both of which
+ * belong to confirmation state.
  *
- * Colour alone is not enough: a container and a component with no association
- * both fall back to the muted border, so they were identical in grayscale.
  * The convention:
  *
- *   container   solid rectangle   — a runtime boundary, drawn to scale
- *   component   rounded rectangle — a part inside one, drawn smaller
- *   external    rounded rectangle + dashed (nothing to confirm inside)
- *   actor       fully rounded      — a person, not a box
+ *   container        wide rectangle, sharp corners — a runtime boundary
+ *   component        square — a part inside one (see `nodeSize`)
+ *   external system  wide rectangle, rounded     — someone else's system
+ *   person           pill                          — not a box at all
+ *
+ * An external system is separated from a container by radius alone, which is
+ * a weak cue. That is deliberate rather than an oversight: the border dash is
+ * the only channel that could say "outside our control" loudly, and it is
+ * already spent on proposed-vs-accepted. The kind icon says it, and the frame
+ * position says it structurally.
  */
-export function nodeShape(node: C4Node): { radius: number; dash: 'solid' | 'dashed' } {
+export function nodeShape(node: C4Node): NodeShape {
   switch (node.kind) {
-    case 'actor':
-      return { radius: NODE_H / 2, dash: 'solid' };
-    case 'external':
-      return { radius: 14, dash: 'dashed' };
+    case 'person':
+      return { kind: 'pill', radius: NODE_H / 2 };
+    case 'external-system':
+      return { kind: 'rect', radius: 14 };
     case 'component':
-      return { radius: 14, dash: 'solid' };
+      return { kind: 'square', radius: 6 };
     default:
-      return { radius: 4, dash: 'solid' };
+      return { kind: 'rect', radius: 4 };
   }
 }
 
 /**
- * C4 notation requires a technology and a description on every container.
- * Name the gaps rather than leaving them to be noticed.
+ * The gaps the C4 notation still wants on this element, named rather than left
+ * to be noticed.
+ *
+ * Containers are where the notation is strictest: it requires a technology and
+ * a description on every one. A component needs a technology too, but a
+ * component drawn without a parent already reports `unknown_container`, and
+ * that is the question worth asking first.
  */
 export function nodeMissing(node: C4Node): string[] {
   if (node.kind !== 'container') return [];
   const missing: string[] = [];
-  if (!node.decoration?.technology) missing.push('technology');
-  if (!node.decoration?.description) missing.push('description');
+  if (!node.technology) missing.push('technology');
+  if (!node.description) missing.push('description');
   return missing;
 }
 
@@ -179,14 +227,17 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
   const style = nodeStyle(node, theme, selected);
   const shape = nodeShape(node);
   const missing = nodeMissing(node);
-  const unconfirmed = !node.decoration?.state;
+  const Icon = nodeKindIcon(node);
+  const typeLabel = nodeTypeLabel(node);
+
+  const size = nodeSize(node);
 
   return (
     <div
       onClick={onClick}
       style={{
-        width: NODE_W,
-        minHeight: NODE_H,
+        width: size.width,
+        minHeight: size.height,
         boxSizing: 'border-box',
         display: 'flex',
         flexDirection: 'column',
@@ -204,48 +255,42 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
         fontFamily: theme.fonts.body,
       }}
     >
-      {/* Level and state on one row, separately styled. The level is what the
-          box IS; the state is whether anyone has vouched for it. Merging them
-          into one label is what made containers and components unreadable. */}
+      {/* 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. */}
       <span
         style={{
           display: 'flex',
-          alignItems: 'baseline',
+          alignItems: 'center',
           gap: 6,
           fontFamily: theme.fonts.monospace,
           fontSize: theme.fontSizes[0],
+          color: style.color,
           letterSpacing: 0.5,
           textTransform: 'uppercase',
+          minWidth: 0,
         }}
       >
         <span
-          style={{
-            color: style.color,
-            fontWeight: 600,
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            minWidth: 0,
-          }}
-        >
-          {nodeTag(node)}
-        </span>
-        <span
-          title={unconfirmed ? 'Nobody has reviewed this element yet' : undefined}
-          style={{
-            color: unconfirmed ? muted : style.color,
-            // Unconfirmed is a quiet absence, not a loud claim.
-            opacity: unconfirmed ? 0.75 : 1,
-            letterSpacing: 0,
-            textTransform: 'none',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            minWidth: 0,
-          }}
+          title={nodeTag(node)}
+          aria-label={nodeTag(node)}
+          style={{ display: 'inline-flex', flexShrink: 0 }}
         >
-          {nodeStateTag(node)}
+          <Icon size={13} strokeWidth={2.25} />
         </span>
+        {typeLabel && (
+          <span
+            style={{
+              fontWeight: 600,
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              minWidth: 0,
+            }}
+          >
+            {typeLabel}
+          </span>
+        )}
       </span>
       {/* Two lines rather than an ellipsis: a truncated label hides the very
           thing that distinguishes two containers from each other. The fixed
@@ -276,7 +321,7 @@ export function C4NodeCard({ node, selected = false, handles, onClick }: C4NodeC
           overflow: 'hidden',
           textOverflow: 'ellipsis',
         }}
-        title={node.decoration?.description ?? node.members.join(', ')}
+        title={node.description ?? node.members.join(', ')}
       >
         {nodeSubtitle(node)}
       </span>

package/src/subsystem/FileDrawer.tsx

@@ -117,21 +117,46 @@ export function FileDrawer({
             userSelect: "none",
           }}
         >
+          {showProgress && progress != null && (
+            <div
+              role="img"
+              aria-label={`Step ${progress.index + 1} of ${progress.total}`}
+              style={{
+                display: "flex",
+                gap: 2,
+                flexShrink: 0,
+              }}
+            >
+              {Array.from({ length: progress.total }, (_, i) => (
+                <span
+                  key={i}
+                  style={{
+                    flex: 1,
+                    height: 2,
+                    borderRadius: 1,
+                    background:
+                      i <= progress.index
+                        ? theme.colors.primary
+                        : theme.colors.border,
+                  }}
+                />
+              ))}
+            </div>
+          )}
           <div
             style={{
               display: "flex",
               alignItems: "center",
               gap: 8,
-              padding: "6px 10px",
-              // With segments present they form the header's bottom edge, so
-              // only draw the hairline when there is nothing to stand in for it.
-              borderBottom: showProgress
-                ? "none"
-                : `1px solid ${theme.colors.border}`,
+              // Top runs deeper than the bottom so the title/label sits
+              // optically centered inside the sticky top edge.
+              padding: "10px 10px 8px",
+              // The header row is the last chrome row now, so its hairline is
+              // the boundary with the code below.
+              borderBottom: `1px solid ${theme.colors.border}`,
             }}
           >
             <span
-              title={title ?? undefined}
               style={{
                 flex: 1,
                 minWidth: 0,
@@ -197,33 +222,6 @@ export function FileDrawer({
               <X size={14} />
             </button>
           </div>
-          {showProgress && progress != null && (
-            <div
-              role="img"
-              aria-label={`Step ${progress.index + 1} of ${progress.total}`}
-              style={{
-                display: "flex",
-                gap: 2,
-                flexShrink: 0,
-                padding: "0 10px 6px",
-              }}
-            >
-              {Array.from({ length: progress.total }, (_, i) => (
-                <span
-                  key={i}
-                  style={{
-                    flex: 1,
-                    height: 2,
-                    borderRadius: 1,
-                    background:
-                      i <= progress.index
-                        ? theme.colors.primary
-                        : theme.colors.border,
-                  }}
-                />
-              ))}
-            </div>
-          )}
         </div>
         <div style={{ flex: 1, minHeight: 0, overflow: "auto" }}>
           {children}

package/src/subsystem/IssueList.tsx

@@ -17,10 +17,12 @@ import {
   ChevronDown,
   ChevronRight,
   CircleCheck,
+  CircleHelp,
   Component,
   FileX,
   FolderGit2,
   Footprints,
+  History,
   MapPin,
   Network,
   Route,
@@ -104,6 +106,8 @@ const KIND_CATEGORY: Record<string, SubsystemIssueCategory> = {
   boundary_module_file_mismatch: 'static-topology',
   boundary_process_nest_disagree: 'dynamic-topology',
   trail: 'trail',
+  step_unconfirmed: 'trail',
+  step_stale: 'trail',
 };
 
 /**
@@ -164,6 +168,9 @@ export const ISSUE_KIND_ICON: Record<string, LucideIcon> = {
   // One module, more than one claimed process parent — a containment that can't
   // be drawn, which is why the region sits at the root instead of nested.
   boundary_process_nest_disagree: Split,
+  // Trail step verification: unconfirmed = no augmentation yet, stale = code changed
+  step_unconfirmed: CircleHelp,
+  step_stale: History,
 };
 
 /**
@@ -233,7 +240,7 @@ export function humanizeIssueKind(kind: string): string {
 const KIND_LABEL: Record<string, string> = {
   missing_file: 'Construct declaration file missing',
   symbol_ambiguous: 'Multiple construct symbol matches',
-  symbol_unmatched: 'Construct symbol unconfirmed',
+  symbol_unmatched: 'Construct symbol missing',
   stale_declaration: 'Construct declaration drift',
   construct_mismatch: 'Construct type mismatch',
   construct_unconfirmed: 'Construct type unconfirmed',
@@ -244,6 +251,8 @@ const KIND_LABEL: Record<string, string> = {
   boundary_module_file_mismatch: 'Declaration file outside module',
   boundary_process_nest_disagree: 'Module spans multiple process contexts',
   trail: 'Step issue',
+  step_unconfirmed: 'Call site not verified',
+  step_stale: 'Call site changed',
 };
 
 /** Label for an issue's kind. Explicit `kindLabel` wins; unknown kinds humanize. */
@@ -275,8 +284,10 @@ const KIND_ORDER: Record<string, number> = {
   boundary_module_file_mismatch: 23,
   // Runtime topology — process containment
   boundary_process_nest_disagree: 30,
-  // Trail
+  // Trail — mechanical issues first, then step verification
   trail: 40,
+  step_unconfirmed: 41,
+  step_stale: 42,
 };
 
 const KIND_ORDER_FALLBACK = 100;

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -869,16 +869,24 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
   // the selected step until it does.
   const [visibleStepIndex, setVisibleStepIndex] = useState<number | null>(null);
   const drawerStepIndex = drawerTarget?.kind === 'trail' ? drawerTarget.stepIndex : null;
+  // Reset when the drawer switches trail (or closes) — synchronously, so the bar
+  // never paints the previous trail's position. A step change *within* the same
+  // trail is deliberately not reset: the code view scrolls to the new step and
+  // the viewport tracker carries the fill across that scroll. Resetting on step
+  // change flashed — the post-paint effect snapped the fill to the target, then
+  // Pierre's smooth scroll re-reported the old viewport, bouncing target → old →
+  // target.
+  const activeTrailId = focusedTrail?.id ?? null;
+  const [visibleTrailId, setVisibleTrailId] = useState(activeTrailId);
+  if (activeTrailId !== visibleTrailId) {
+    setVisibleTrailId(activeTrailId);
+    setVisibleStepIndex(null);
+  }
   const drawerProgress = useMemo(() => {
     if (drawerStepIndex == null || !focusedTrail) return null;
     return { index: visibleStepIndex ?? drawerStepIndex, total: focusedTrail.steps.length };
   }, [drawerStepIndex, focusedTrail, visibleStepIndex]);
 
-  // A new trail or step invalidates whatever the last scroll reported.
-  useEffect(() => {
-    setVisibleStepIndex(null);
-  }, [focusedTrail?.id, drawerStepIndex]);
-
   // Refresh selected component when the components list updates (e.g. verify
   // writes back declarationRef).
   useEffect(() => {
@@ -1176,6 +1184,37 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
     return map;
   }, [issues]);
 
+  // Per-edge step verification badge: maps edge IDs to step verification status.
+  // Keyed by the React Flow edge id (from → mechanism → to). An edge can have
+  // multiple steps with issues; we show the worst status (stale > unconfirmed).
+  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';
+      map.set(edgeId, {
+        kind: isWorse || !prev ? issue.kind as 'step_unconfirmed' | 'step_stale' : prev.kind,
+        severity: prev?.severity === 'error' || issue.severity === 'error' ? 'error' : 'info',
+        count: (prev?.count ?? 0) + 1,
+      });
+    }
+    console.log('[stepIssueBadge] final map size=', map.size);
+    return map;
+  }, [issues, trails, issueStep]);
+
   // 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
@@ -2444,7 +2483,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
   // doesn't intercept pointer events). Uses ELK-computed label midpoints from
   // the actual edge path (not node-center approximations).
   const edgeLabels = useMemo(() => {
-    return dispEdges
+    const labels = dispEdges
       .filter((e) => {
         if (e.hidden) return false;
         const d = e?.data as { dimmed?: boolean } | undefined;
@@ -2459,6 +2498,8 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
           labelY?: number;
           pathLength?: number;
         } | undefined;
+        const stepIssue = stepIssueBadgeByEdgeId.get(e.id);
+        console.log('[edgeLabels] edge', e.id, 'stepIssue=', stepIssue);
         return {
           id: e.id,
           mechanism: d?.mechanism ?? 'uses',
@@ -2468,9 +2509,12 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
           midY: d?.labelY ?? 0,
           pathLength: d?.pathLength ?? 0,
           stepNos: selectedFlowStepNos?.get(e.id),
+          stepIssue,
         };
       });
-  }, [dispEdges, selectedFlowStepNos]);
+    console.log('[edgeLabels] total labels=', labels.length, 'with stepIssue=', labels.filter(l => l.stepIssue).length);
+    return labels;
+  }, [dispEdges, selectedFlowStepNos, stepIssueBadgeByEdgeId]);
 
   // Unique source files across components → sidebar file trees.
   const treeFilePaths = treeFiles;
@@ -2950,6 +2994,53 @@ function Inner({ components, trails, graphifyRelations, orderByLine, initialTrai
               >
                 {text}
               </span>
+              {lbl.stepIssue && (() => {
+                const StepIssueIcon = ISSUE_KIND_ICON[lbl.stepIssue.kind];
+                // Match IssueList: error severity = red, info severity = amber
+                const issueColor = lbl.stepIssue.severity === 'error'
+                  ? (theme.colors.error ?? '#e5534b')
+                  : (theme.colors.warning ?? '#d4a017');
+                const badgeBg = theme.colors.backgroundSecondary ?? theme.colors.background;
+                return (
+                  <span
+                    aria-hidden
+                    title={lbl.stepIssue.kind === 'step_stale'
+                      ? 'Call site changed since verification'
+                      : 'Call site not yet verified'}
+                    style={{
+                      position: 'absolute',
+                      right: -7,
+                      bottom: -6,
+                      zIndex: 2,
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      gap: 3,
+                      minWidth: 18,
+                      padding: '2px 4px',
+                      borderRadius: 4,
+                      border: `1.5px solid ${issueColor}`,
+                      background: badgeBg,
+                      pointerEvents: 'none',
+                    }}
+                  >
+                    {StepIssueIcon && (
+                      <StepIssueIcon size={12} color={issueColor} />
+                    )}
+                    {lbl.stepIssue.count > 1 && (
+                      <span style={{
+                        color: issueColor,
+                        fontFamily: theme.fonts.monospace,
+                        fontSize: 10,
+                        fontWeight: 700,
+                        lineHeight: 1,
+                      }}>
+                        {lbl.stepIssue.count}
+                      </span>
+                    )}
+                  </span>
+                );
+              })()}
             </div>
           );
         })}