@principal-ai/principal-view-react 0.16.60 → 0.16.62

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -59,6 +59,17 @@ const EDGE_LABEL_MAX_EDGE_FRACTION = 0.55;
 const EDGE_LABEL_CHAR_PX = 6.2;
 const EDGE_LABEL_PAD_PX = 18;
 
+/** Context passed to `renderThroughlineViewer` when a flow/step is focused. */
+export interface ThroughlineViewerContext {
+  throughline: SubsystemThroughline;
+  /** Focused step index; `null` means the whole flow (no specific step). */
+  stepIndex: number | null;
+}
+
+type DrawerTarget =
+  | { kind: 'file'; file: string; startLine?: number }
+  | { kind: 'throughline'; throughlineId: string; stepIndex: number | null };
+
 export interface SubsystemComponentGraphProps {
   components: SubsystemComponent[];
   edges: SubsystemComponentEdge[];
@@ -67,8 +78,9 @@ export interface SubsystemComponentGraphProps {
    * flow. When present the sidebar's bottom half offers a Files/Flows toggle:
    * the flows panel lists each throughline's steps (`symbol` or `file:line`);
    * clicking a flow row toggles its steps; clicking a step focuses that
-   * step's edge. Opened flows stay on the canvas (unselected ones dimmed);
-   * everything else is hidden.
+   * step's edge and (when `renderThroughlineViewer` is set) opens the bottom
+   * drawer on that flow's snippets. Opened flows stay on the canvas
+   * (unselected ones dimmed); everything else is hidden.
    */
   throughlines?: SubsystemThroughline[];
   onSelect?: (componentId: string) => void;
@@ -105,11 +117,16 @@ export interface SubsystemComponentGraphProps {
   sidebarAfterDescription?: ReactNode;
   /**
    * Host-injected reader/renderer for the bottom file drawer, keyed by
-   * repo-root-relative path. Opening happens on node click (component with a
-   * `file`) and sidebar file-tree click. Keeps this package free of fs and
-   * code-view dependencies.
+   * repo-root-relative path. Opening happens on declaration/file-tree clicks.
+   * Keeps this package free of fs and code-view dependencies.
    */
   renderFileViewer?: (file: string, opts?: SubsystemOpenFileOptions) => ReactNode;
+  /**
+   * Host-injected multi-snippet viewer for a focused throughline. When set,
+   * clicking a flow step (or the whole flow) opens the bottom drawer with
+   * this content and updates it as the focused step changes.
+   */
+  renderThroughlineViewer?: (ctx: ThroughlineViewerContext) => ReactNode;
   /**
    * Legacy component-keyed variant, kept for backward compatibility. When
    * `renderFileViewer` is absent, drawer content resolves via the first
@@ -136,28 +153,39 @@ const edgeTypes: EdgeTypes = {
   'subsystem-edge': SubsystemEdge,
 };
 
-// Memoized drawer body: only rebuilds children when the open file changes.
+// Memoized drawer body: only rebuilds children when the open target changes.
 // Inner re-renders on every viewport pan/zoom and hover; recreating host
 // elements then would churn their readFile closures and flash the file
 // viewer's loading state on each render.
-const DrawerContent = memo(function DrawerContent({
+const FileDrawerContent = memo(function FileDrawerContent({
   render,
   file,
   startLine,
 }: {
   render: (file: string, opts?: SubsystemOpenFileOptions) => ReactNode;
-  file: string | null;
+  file: string;
   startLine?: number;
 }) {
-  if (!file) return null;
   return <>{render(file, startLine != null ? { startLine } : undefined)}</>;
 });
 
+const ThroughlineDrawerContent = memo(function ThroughlineDrawerContent({
+  render,
+  throughline,
+  stepIndex,
+}: {
+  render: (ctx: ThroughlineViewerContext) => ReactNode;
+  throughline: SubsystemThroughline;
+  stepIndex: number | null;
+}) {
+  return <>{render({ throughline, stepIndex })}</>;
+});
+
 interface InnerProps extends SubsystemComponentGraphProps {
   measured: { w: number; h: number } | null;
 }
 
-function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showLegend, title, hideSidebar, graphTitle, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, renderFileView, renderFileViewer, onFileSelect, onVerifyComponent, componentVerification }: InnerProps) {
+function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showLegend, title, hideSidebar, graphTitle, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, renderFileView, renderFileViewer, renderThroughlineViewer, onFileSelect, onVerifyComponent, componentVerification }: InnerProps) {
   const { theme } = useTheme();
   const { fitView } = useReactFlow();
   const viewport = useViewport();
@@ -167,13 +195,8 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
   });
   const [layoutReady, setLayoutReady] = useState(false);
   const [selected, setSelected] = useState<SubsystemComponent | null>(null);
-  /** File shown in the bottom drawer + optional declaration scroll target. */
-  const [openFileTarget, setOpenFileTarget] = useState<{
-    file: string;
-    startLine?: number;
-  } | null>(null);
-  const openFile = openFileTarget?.file ?? null;
-  const openFileStartLine = openFileTarget?.startLine;
+  /** Bottom drawer: single file or throughline multi-snippet mode. */
+  const [drawerTarget, setDrawerTarget] = useState<DrawerTarget | null>(null);
   // Edge-legend modal visibility (opened from the canvas's top-left button).
   const [legendOpen, setLegendOpen] = useState(false);
   // Component the pointer is over (null on leave) → transient tree highlight.
@@ -194,9 +217,31 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
   // closure over the effect deps) can toggle without a stale value.
   const selectedRef = useRef<SubsystemComponent | null>(null);
   selectedRef.current = selected;
-  // Ref mirror of `openFile` for the tree-click toggle.
+  // Ref mirror of the open file drawer target for tree-click toggle.
   const openFileRef = useRef<{ file: string; startLine?: number } | null>(null);
-  openFileRef.current = openFileTarget;
+  const openFile =
+    drawerTarget?.kind === 'file' ? drawerTarget.file : null;
+  openFileRef.current =
+    drawerTarget?.kind === 'file'
+      ? { file: drawerTarget.file, startLine: drawerTarget.startLine }
+      : null;
+
+  const focusedThroughline = useMemo(() => {
+    if (drawerTarget?.kind !== 'throughline' || !throughlines) return null;
+    return throughlines.find((t) => t.id === drawerTarget.throughlineId) ?? null;
+  }, [drawerTarget, throughlines]);
+
+  const drawerTitle = useMemo(() => {
+    if (!drawerTarget) return null;
+    if (drawerTarget.kind === 'file') return drawerTarget.file;
+    const tl = focusedThroughline;
+    if (!tl) return null;
+    if (drawerTarget.stepIndex == null) return tl.title;
+    const step = tl.steps[drawerTarget.stepIndex];
+    if (!step) return tl.title;
+    const site = `${step.file.split('/').pop() ?? step.file}:${step.line}`;
+    return `${tl.title} · ${site}`;
+  }, [drawerTarget, focusedThroughline]);
 
   // Refresh selected component when the components list updates (e.g. verify
   // writes back declarationRef).
@@ -594,10 +639,10 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
   const onTreeSelectFile = useCallback(
     (file: string) => {
       if (openFileRef.current?.file === file && openFileRef.current.startLine == null) {
-        setOpenFileTarget(null);
+        setDrawerTarget(null);
         return;
       }
-      setOpenFileTarget({ file });
+      setDrawerTarget({ kind: 'file', file });
       onFileSelect?.(file);
     },
     [onFileSelect],
@@ -610,10 +655,10 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
         openFileRef.current?.file === file &&
         openFileRef.current.startLine === startLine
       ) {
-        setOpenFileTarget(null);
+        setDrawerTarget(null);
         return;
       }
-      setOpenFileTarget({ file, startLine });
+      setDrawerTarget({ kind: 'file', file, startLine });
       onFileSelect?.(file);
     },
     [onFileSelect],
@@ -643,7 +688,7 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
 
   // Focus an entire flow: hide everything but the flow's nodes and edges, and
   // frame the flow on the canvas. Selection state is cleared — the graph now
-  // reads as the narrative.
+  // reads as the narrative. Opens the throughline drawer when a viewer is set.
   const focusThroughlineEdges = useCallback(
     (tl: SubsystemThroughline) => {
       setSelected(null);
@@ -651,17 +696,28 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
       setFocusedStepIndex(null);
       setFocusedThroughlineId(tl.id);
       fitFocusBounds(new Set(tl.steps.map((s) => s.edgeId)));
+      if (renderThroughlineViewer) {
+        setDrawerTarget({ kind: 'throughline', throughlineId: tl.id, stepIndex: null });
+      } else if (tl.steps[0]) {
+        // Fallback: single-file snippet of the first step.
+        setDrawerTarget({
+          kind: 'file',
+          file: tl.steps[0].file,
+          startLine: tl.steps[0].line,
+        });
+      }
     },
-    [fitFocusBounds],
+    [fitFocusBounds, renderThroughlineViewer],
   );
 
   const clearThroughlineFocus = useCallback(() => {
     setFocusedThroughlineId(null);
     setFocusedStepIndex(null);
+    setDrawerTarget((prev) => (prev?.kind === 'throughline' ? null : prev));
   }, []);
 
-  // Focus a single step's edge on the canvas. The step's file:line is listed
-  // in the row; we don't open the drawer from here.
+  // Focus a single step's edge on the canvas and open/scroll the throughline
+  // drawer to that step's snippet.
   const focusThroughlineStep = useCallback(
     (tl: SubsystemThroughline, stepIndex: number) => {
       const step = tl.steps[stepIndex];
@@ -671,8 +727,21 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
       setFocusedStepIndex(stepIndex);
       setFocusedThroughlineId(tl.id);
       fitFocusBounds(new Set([step.edgeId]));
+      if (renderThroughlineViewer) {
+        setDrawerTarget({
+          kind: 'throughline',
+          throughlineId: tl.id,
+          stepIndex,
+        });
+      } else {
+        setDrawerTarget({
+          kind: 'file',
+          file: step.file,
+          startLine: step.line,
+        });
+      }
     },
-    [fitFocusBounds],
+    [fitFocusBounds, renderThroughlineViewer],
   );
 
   const toggleThroughlineCollapsed = useCallback((tlId: string) => {
@@ -781,6 +850,14 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
     [],
   );
 
+  const throughlineViewerRef = useRef(renderThroughlineViewer);
+  throughlineViewerRef.current = renderThroughlineViewer;
+  const renderThroughlineDrawerContent = useCallback(
+    (ctx: ThroughlineViewerContext) =>
+      throughlineViewerRef.current?.(ctx) ?? null,
+    [],
+  );
+
   return (
     <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
       {/* Sidebar: scrollable title/description on top, files or flows pinned to the bottom half */}
@@ -1157,12 +1234,22 @@ function Inner({ components, edges, throughlines, onSelect, onEdgeSelect, measur
           mechanisms={usedMechanisms}
           onClose={() => setLegendOpen(false)}
         />
-      <FileDrawer file={openFile} onClose={() => setOpenFileTarget(null)}>
-        <DrawerContent
-          render={renderDrawerContent}
-          file={openFile}
-          startLine={openFileStartLine}
-        />
+      <FileDrawer title={drawerTitle} onClose={() => setDrawerTarget(null)}>
+        {drawerTarget?.kind === 'throughline' &&
+        focusedThroughline &&
+        renderThroughlineViewer ? (
+          <ThroughlineDrawerContent
+            render={renderThroughlineDrawerContent}
+            throughline={focusedThroughline}
+            stepIndex={drawerTarget.stepIndex}
+          />
+        ) : drawerTarget?.kind === 'file' ? (
+          <FileDrawerContent
+            render={renderDrawerContent}
+            file={drawerTarget.file}
+            startLine={drawerTarget.startLine}
+          />
+        ) : null}
       </FileDrawer>
       {/* Startup cover — hides measurement, layout swap, and camera settle. */}
       <GraphLayoutCover revealed={layoutReady} />

package/src/subsystem/model.test.ts

@@ -7,6 +7,8 @@ import {
   processGroupNodeId,
   buildSubsystemGraph,
   deriveNameFromSymbol,
+  constructBadgeLabel,
+  nodeMinWidthForBadges,
   formatPurl,
   packageColor,
   subsystemGraphLayoutKey,
@@ -105,6 +107,48 @@ describe('subsystem graph model', () => {
     expect(deriveNameFromSymbol('Foo {}', 'class')).toBe('Foo {}');
   });
 
+  test('deriveNameFromSymbol uses JSX decoration for component stereotype', () => {
+    expect(deriveNameFromSymbol('AnalysisView', 'function', undefined, undefined, 'component')).toBe(
+      '<AnalysisView>',
+    );
+    expect(deriveNameFromSymbol('useDrawingsHost', 'function', undefined, undefined, 'hook')).toBe(
+      'useDrawingsHost()',
+    );
+  });
+
+  test('constructBadgeLabel prefers framework · stereotype over construct', () => {
+    expect(
+      constructBadgeLabel({
+        construct: 'function',
+        framework: 'react',
+        stereotype: 'component',
+      }),
+    ).toBe('react · component');
+    expect(constructBadgeLabel({ construct: 'function', stereotype: 'hook' })).toBe('hook');
+    expect(constructBadgeLabel({ construct: 'function' })).toBe('function');
+    expect(constructBadgeLabel({ construct: 'type_alias' })).toBe('type alias');
+  });
+
+  test('nodeMinWidthForBadges widens for long construct badges and role pairs', () => {
+    const plain = nodeMinWidthForBadges({ construct: 'function' });
+    expect(plain).toBe(150);
+
+    const stereotype = nodeMinWidthForBadges({
+      construct: 'function',
+      framework: 'react',
+      stereotype: 'component',
+    });
+    expect(stereotype).toBeGreaterThan(150);
+
+    const withRole = nodeMinWidthForBadges({
+      construct: 'function',
+      framework: 'react',
+      stereotype: 'component',
+      role: 'entry',
+    });
+    expect(withRole).toBeGreaterThan(stereotype);
+  });
+
   test('deriveNameFromSymbol falls back to file basename for modules', () => {
     expect(deriveNameFromSymbol(undefined, 'module', undefined, 'transcript.ts')).toBe('transcript');
     expect(deriveNameFromSymbol(undefined, 'module', undefined, 'src/event-processors/index.ts')).toBe('index');

package/src/subsystem/model.ts

@@ -28,7 +28,6 @@ export type SubsystemComponentConstruct =
   | 'interface'
   | 'type_alias'
   | 'enum'
-  | 'react_component'
   | 'module'
   | 'store'
   | 'external';
@@ -46,6 +45,22 @@ export type SubsystemComponentConstruct =
  */
 export type SubsystemComponentRole = 'entry' | 'service';
 
+/**
+ * Framework that owns a stereotype vocabulary (open string).
+ * Examples: `react`, `vue`, `nestjs`, `django`, `spring`.
+ * Empty when the node is language-only / framework-agnostic.
+ */
+export type SubsystemFramework = string;
+
+/**
+ * Framework-level pattern stamped on a language construct (open string).
+ * Examples: `component`, `hook`, `middleware`, `controller`, `guard`.
+ * Empty when no framework pattern applies. Pair with `framework` when set —
+ * a React component stays `construct: 'function'` with
+ * `framework: 'react'` + `stereotype: 'component'`.
+ */
+export type SubsystemStereotype = string;
+
 // ---------------------------------------------------------------------------
 // Declaration tokens — structured source representation
 // ---------------------------------------------------------------------------
@@ -93,14 +108,15 @@ export interface SubsystemComponent {
   name: string;
   /**
    * The node's construct — what it IS as a declaration (class, function,
-   * method, interface, type alias, enum, react_component, store, external),
-   * driving node anatomy, color, badge, and the verification strategy. Every
-   * construct anchors to a definition; runtime occurrences (variables,
-   * activations, instances) are NOT constructs — they belong to a future
-   * execution-mode graph whose occurrence nodes reference these definitions.
-   * Ontology: construct = what it is, role = where it sits, process = where
-   * it runs. Use `react_component` (not `function`) for JSX/TSX UI units so
-   * the badge reads "component" instead of "function".
+   * method, interface, type alias, enum, store, external), driving node
+   * anatomy, color, badge, and the verification strategy. Every construct
+   * anchors to a definition; runtime occurrences (variables, activations,
+   * instances) are NOT constructs — they belong to a future execution-mode
+   * graph whose occurrence nodes reference these definitions. Ontology:
+   * construct = what it is, framework + stereotype = which framework pattern
+   * it plays, role = where it sits, process = where it runs. Prefer
+   * `framework` + `stereotype` over inventing framework-specific constructs
+   * (a React component is still `construct: 'function'`).
    */
   construct: SubsystemComponentConstruct;
   /** Source location the component lives in (repo-root-relative path). */
@@ -118,6 +134,17 @@ export interface SubsystemComponent {
    * inbound, `produces` outbound).
    */
   role?: SubsystemComponentRole;
+  /**
+   * Framework that owns the stereotype vocabulary (e.g. `react`, `nestjs`).
+   * Orthogonal to `construct` — leave empty for language-only units.
+   */
+  framework?: SubsystemFramework;
+  /**
+   * Framework pattern this declaration plays (e.g. `component`, `hook`).
+   * When set, the node badge prefers this label over the construct name so
+   * a React UI unit reads as "component" rather than "function".
+   */
+  stereotype?: SubsystemStereotype;
   /**
    * Runtime process membership — which deployment unit this node is a
    * member of (e.g. `trail-viewer/host`, `trail-viewer/renderer`). Nodes
@@ -228,6 +255,7 @@ export function deriveNameFromSymbol(
   construct: SubsystemComponentConstruct,
   existingName?: string,
   file?: string,
+  stereotype?: string,
 ): string {
   let name: string | undefined;
   if (symbol && symbol.trim()) {
@@ -239,10 +267,13 @@ export function deriveNameFromSymbol(
   }
   if (!name) name = existingName ?? 'untitled';
 
-  // Decoration = what the drill-down shows. Executable constructs wear `()`
-  // (a signature you can call); brace-bodied constructs wear ` {}` (a member
-  // body — fields for types/interfaces/enums, fields+methods for classes).
-  // Everything else (store, variable, module, external) renders bare.
+  // Decorations = what the drill-down shows. Framework stereotypes can override
+  // the language decoration (a React component wears `<>` instead of `()`).
+  // Executable constructs wear `()`; brace-bodied constructs wear ` {}`.
+  // Everything else (store, module, external) renders bare.
+  if (stereotype === 'component' && !name.startsWith('<')) {
+    return `<${name}>`;
+  }
   if ((construct === 'function' || construct === 'method') && !name.endsWith('()')) {
     name = `${name}()`;
   }
@@ -446,6 +477,64 @@ export const ROLE_LABEL: Record<SubsystemComponentRole, string> = {
   service: 'service',
 };
 
+/**
+ * Primary badge text for a node: prefer framework stereotype over the
+ * language construct so a React UI unit reads as "component" / "hook"
+ * rather than "function". When both framework and stereotype are set,
+ * show `framework · stereotype` (e.g. `react · component`).
+ */
+export function constructBadgeLabel(component: {
+  construct: SubsystemComponentConstruct;
+  framework?: string;
+  stereotype?: string;
+}): string {
+  const constructLabel =
+    component.construct === 'type_alias' ? 'type alias' : component.construct;
+  if (component.stereotype && component.framework) {
+    return `${component.framework} · ${component.stereotype}`;
+  }
+  if (component.stereotype) return component.stereotype;
+  return constructLabel ?? '';
+}
+
+/** Default CSS floor for component nodes (padding aside). */
+export const NODE_CSS_MIN_WIDTH = 150;
+/** Inset of each top badge from the node edge (`left` / `right` style). */
+export const BADGE_EDGE_INSET = 5;
+/** Minimum gap between left construct badge and right role badge. */
+const BADGE_PAIR_GAP = 8;
+/** Badge box chrome: padding 5+5 + border 1+1. */
+const BADGE_BOX_CHROME = 12;
+/** Approx monospace uppercase width incl. letter-spacing (~0.5px). */
+const BADGE_CHAR_WIDTH = 8;
+
+/** Estimated rendered width of a top tab badge label. */
+export function estimateBadgeLabelWidth(label: string): number {
+  return (label?.length ?? 0) * BADGE_CHAR_WIDTH + BADGE_BOX_CHROME;
+}
+
+/**
+ * Minimum node width so top badges stay on one line and (when both are
+ * present) don't overlap — badges are absolutely positioned, so they don't
+ * contribute to layout unless we widen the node explicitly.
+ */
+export function nodeMinWidthForBadges(component: {
+  construct: SubsystemComponentConstruct;
+  framework?: string;
+  stereotype?: string;
+  role?: SubsystemComponentRole;
+}): number {
+  const left = estimateBadgeLabelWidth(constructBadgeLabel(component));
+  if (component.role == null) {
+    return Math.max(NODE_CSS_MIN_WIDTH, BADGE_EDGE_INSET + left + BADGE_EDGE_INSET);
+  }
+  const right = estimateBadgeLabelWidth(ROLE_LABEL[component.role]);
+  return Math.max(
+    NODE_CSS_MIN_WIDTH,
+    BADGE_EDGE_INSET + left + BADGE_PAIR_GAP + right + BADGE_EDGE_INSET,
+  );
+}
+
 /**
  * Convert a subsystem graph document into React Flow nodes. Components that
  * carry a `process` get a `parentId` pointing at their boundary group node
@@ -492,9 +581,9 @@ export function convertSubsystemToNodes(
         .sort((a, b) => b.length - a.length)[0];
       const cap = maxNodeWidth ?? 300;
       const textWidth = Math.min(cap, Math.max(60, (text?.length ?? 10) * 8));
-      // Account for CSS minWidth and padding/border so ELK's port positions match
-      // the actual rendered node boundaries.
-      const cssMinWidth = 150;
+      // Account for CSS minWidth (incl. top badges) and padding/border so ELK's
+      // port positions match the actual rendered node boundaries.
+      const cssMinWidth = nodeMinWidthForBadges(c);
       const cssPadding = 20; // horizontal padding (left + right)
       const cssBorder = 4; // 2px border each side
       const rawWidth = Math.max(cssMinWidth, textWidth + cssPadding + cssBorder);

package/src/subsystem/nodes.tsx

@@ -21,7 +21,10 @@ import {
   MECHANISM_STYLE,
   ROLE_COLOR,
   ROLE_LABEL,
+  constructBadgeLabel,
   deriveNameFromSymbol,
+  BADGE_EDGE_INSET,
+  nodeMinWidthForBadges,
   packageColor,
   type SubsystemGraphNodeData,
   type SubsystemGroupNodeData,
@@ -37,7 +40,6 @@ export const CONSTRUCT_LABEL: Record<string, string> = {
   interface: 'interface',
   type_alias: 'type alias',
   enum: 'enum',
-  react_component: 'component',
   module: 'module',
   store: 'store',
   external: 'external',
@@ -87,7 +89,10 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
   const configuredMax = SUBSYSTEM_CALLBACKS.maxNodeWidth;
   const maxWidth = configuredMax ?? 300;
   // `symbol` is the source of truth; `name` is derived from it consistently.
-  const displayName = deriveNameFromSymbol(c.symbol, c.construct, c.name, c.file);
+  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.
+  const badgeMinWidth = nodeMinWidthForBadges(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;
@@ -118,7 +123,7 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
         boxSizing: 'border-box',
         width: nodeWidth,
         height: nodeHeight,
-        minWidth: 150,
+        minWidth: badgeMinWidth,
         maxWidth,
         padding: '6px 10px',
         borderRadius: 8,
@@ -136,20 +141,21 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
         fontFamily: theme.fonts.body,
       }}
     >
-      {/* Construct badge — a small tab riding the top-right border, in the
-          construct color. Persistent (no hover needed); pointer-events none so
-          clicks pass through to the node. */}
+      {/* Construct / stereotype badge — prefers framework stereotype so a
+          React UI unit reads as "react · component" instead of "function".
+          Persistent; pointer-events none so clicks pass through to the node. */}
       <div
         style={{
           position: 'absolute',
           top: -9,
-          left: 10,
+          left: BADGE_EDGE_INSET,
           zIndex: 1,
           fontFamily: theme.fonts.monospace,
           fontSize: theme.fontSizes[0] * 1.1,
           letterSpacing: 0.5,
           textTransform: 'uppercase',
           lineHeight: '17px',
+          whiteSpace: 'nowrap',
           color,
           background: theme.colors.backgroundSecondary ?? theme.colors.background,
           border: `1px solid ${color}`,
@@ -157,7 +163,7 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
           padding: '0 5px',
         }}
       >
-        {CONSTRUCT_LABEL[c.construct] ?? c.construct}
+        {constructBadgeLabel(c)}
       </div>
 
       {/* Role badge — top-right, only when the node carries a topology role.
@@ -168,13 +174,14 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
           style={{
             position: 'absolute',
             top: -9,
-            right: 10,
+            right: BADGE_EDGE_INSET,
             zIndex: 1,
             fontFamily: theme.fonts.monospace,
             fontSize: theme.fontSizes[0] * 1.1,
             letterSpacing: 0.5,
             textTransform: 'uppercase',
             lineHeight: '17px',
+            whiteSpace: 'nowrap',
             color: ROLE_COLOR[c.role],
             background: theme.colors.backgroundSecondary ?? theme.colors.background,
             border: `1px solid ${ROLE_COLOR[c.role]}`,
@@ -243,10 +250,15 @@ export function SubsystemComponentNode(props: NodeProps<Node<SubsystemGraphNodeD
       </div>
 
       {/* Hide the identity line when the symbol is just the title without its
-          decoration (`()` or ` {}`) — only show it when it adds information
-          (e.g. the dotted host on methods, or a different code identity). */}
+          decoration (`()`, ` {}`, or `<>`) — only show it when it adds
+          information (e.g. the dotted host on methods, or a different code
+          identity). */}
       {c.symbol &&
-        c.symbol !== displayName.replace(/ ?\{\}$/, '').replace(/\(\)$/, '') && (
+        c.symbol !==
+          displayName
+            .replace(/^<(.+)>$/, '$1')
+            .replace(/ ?\{\}$/, '')
+            .replace(/\(\)$/, '') && (
         <div
           style={{
             fontSize: theme.fontSizes[0] * 0.82,