@principal-ai/subsystems-react 0.37.11 → 0.38.0

package/src/stories/Subsystem/ComponentGraph/ModuleBadges.stories.tsx

@@ -103,11 +103,11 @@ const deepComponents: SubsystemComponent[] = [
 ];
 
 const deepEdges = graphSpecFromEdges([
-  ['node-comp', 'group-comp', 'references'],
-  ['edge-comp', 'group-comp', 'references'],
-  ['model-view', 'layers', 'references'],
-  ['use-drawings', 'model-view', 'references'],
-  ['model-view', 'node-comp', 'references'],
+  ['node-comp', 'group-comp', 'method'],
+  ['edge-comp', 'group-comp', 'method'],
+  ['model-view', 'layers', 'method'],
+  ['use-drawings', 'model-view', 'method'],
+  ['model-view', 'node-comp', 'method'],
 ]);
 
 /** Collapsed module badges show `first/…/last`. Click one to expand the full

package/src/stories/Subsystem/ComponentGraph/Modules.stories.tsx

@@ -121,8 +121,8 @@ const moduleComponents: SubsystemComponent[] = [
 ];
 
 const moduleEdges = graphSpecFromEdges([
-  ['parse', 'record', 'references'],
-  ['is-rollout', 'record', 'references'],
+  ['parse', 'record', 'method'],
+  ['is-rollout', 'record', 'method'],
   ['reader', 'normalize', 'method'],
   ['normalize', 'parse', 'calls'],
   ['normalize', 'tool-name', 'calls'],
@@ -261,9 +261,9 @@ const nestedComponents: SubsystemComponent[] = [
 ];
 
 const nestedEdges = graphSpecFromEdges([
-  ['boot', 'write-session', 'references'],
-  ['trail-view', 'bridge', 'references'],
-  ['trail-view', 'use-trail', 'references'],
+  ['boot', 'write-session', 'method'],
+  ['trail-view', 'bridge', 'method'],
+  ['trail-view', 'use-trail', 'method'],
   ['boot', 'create-host', 'calls'],
   ['create-host', 'write-session', 'calls'],
   ['write-session', 'session-store', 'writes'],

package/src/stories/Subsystem/ComponentGraph/Scenarios.stories.tsx

@@ -138,9 +138,9 @@ const multiRepoComponents = components([
 ]);
 
 const multiRepoEdges = graphSpecFromEdges([
-  ['detail', 'reftypes', 'references'],
-  ['resolver', 'reftypes', 'references'],
-  ['resolver', 'engine', 'references'],
+  ['detail', 'reftypes', 'method'],
+  ['resolver', 'reftypes', 'method'],
+  ['resolver', 'engine', 'method'],
   ['rewire', 'resolver', 'calls'],
 ]);
 
@@ -1116,10 +1116,10 @@ const typeSpectrumComponents: SubsystemComponent[] = [
 
 const typeSpectrumEdges = graphSpecFromEdges([
   ['listener', 'subscriber', 'uses'],
-  ['subscriber', 'messages', 'references'],
+  ['subscriber', 'messages', 'method'],
   ['state', 'listener', 'feeds'],
-  ['deep', 'record', 'references'],
-  ['rows', 'record', 'references'],
+  ['deep', 'record', 'method'],
+  ['rows', 'record', 'method'],
 ]);
 
 function TypeFamilySpectrumDemo() {

package/src/stories/Subsystem/ComponentGraph/fixtures.ts

@@ -33,7 +33,6 @@ const RELATION_TYPES = new Set<string>([
   'implements',
   'mixes_in',
   'method',
-  'references',
 ]);
 
 export function relations(

package/src/stories/Subsystem/EgoGraph/EgoGraph.stories.tsx

@@ -0,0 +1,354 @@
+/**
+ * Ego-graph prototype: reuse the subsystem component nodes to render one
+ * graphify symbol at the center plus its real connections.
+ *
+ * The center + neighbors come from `graphify/__fixtures__/ego-samples.json`
+ * (extracted from this repo's cached graph). Each graphify node is mapped onto
+ * a `SubsystemComponent`; the graphify edges are passed through the dedicated
+ * `graphifyRelations` input, so they render with the separate
+ * `GRAPHIFY_RELATION_COLOR` palette — visually distinct from authored subsystem
+ * mechanisms — and keep their raw verb as the label (no folding to
+ * `references`).
+ */
+import React from 'react';
+import '@xyflow/react/dist/style.css';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { SubsystemComponentGraph } from '../../../subsystem/SubsystemComponentGraph';
+import type {
+  SubsystemComponent,
+  SubsystemComponentConstruct,
+  SubsystemGraphifyRelation,
+} from '../../../subsystem/model';
+import { inferConstructFromGraphify } from '../../../graphify';
+import type { GraphifyEdge, GraphifyNode } from '../../../graphify';
+import egoSamples from '../../../graphify/__fixtures__/ego-samples.json';
+
+const meta = {
+  title: 'Subsystem/EgoGraph',
+  component: SubsystemComponentGraph,
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof SubsystemComponentGraph>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+// Fixture shape
+// ---------------------------------------------------------------------------
+
+type FixtureNode = {
+  id: string;
+  label: string;
+  file_type?: string;
+  source_file?: string;
+  source_location?: string;
+  type?: string;
+};
+
+type FixtureEdge = {
+  source: string;
+  target: string;
+  relation: string;
+  confidence?: string;
+  context?: string;
+  source_file?: string;
+  source_location?: string;
+};
+
+type FixtureCategory = {
+  center?: FixtureNode;
+  degree?: number;
+  neighborCount?: number;
+  neighbors?: FixtureNode[];
+  edges?: FixtureEdge[];
+};
+
+type Category = 'class' | 'function' | 'method' | 'type' | 'module';
+
+const categories = egoSamples.categories as unknown as Record<Category, FixtureCategory>;
+const authoredCategories = egoSamples.authoredCategories as unknown as Record<
+  string,
+  { component: SubsystemComponent }
+>;
+
+const REPO_PURL = 'pkg:github/principal-ai/subsystem-modeling';
+
+// ---------------------------------------------------------------------------
+// graphify -> subsystem mapping
+// ---------------------------------------------------------------------------
+
+/** The fixture center's category, expressed as a subsystem construct. */
+const CENTER_CONSTRUCT: Record<Category, SubsystemComponentConstruct> = {
+  class: 'class',
+  function: 'function',
+  method: 'method',
+  type: 'interface',
+  // Subsystem models draw files as module *frames*, not nodes — there is no
+  // `module` construct. Stand in with `external` so the file node still draws.
+  module: 'external',
+};
+
+/** Coarse graphify-inferred construct -> subsystem construct. */
+const INFERRED_TO_CONSTRUCT: Record<string, SubsystemComponentConstruct> = {
+  class: 'class',
+  function: 'function',
+  method: 'method',
+  type: 'interface',
+  module: 'external',
+  unknown: 'external',
+};
+
+function parseLine(location?: string): number | undefined {
+  const m = /^L(\d+)$/.exec(location ?? '');
+  return m ? Number(m[1]) : undefined;
+}
+
+function purlFor(sourceFile?: string): string {
+  return sourceFile ? `${REPO_PURL}#${sourceFile}` : REPO_PURL;
+}
+
+/**
+ * Graphify labels carry their own decoration: functions end `name()`, methods
+ * start `.name()`. A subsystem `symbol` is the bare code identity and the node
+ * renderer re-derives the `()` / `.` decoration itself, so passing a decorated
+ * label through would double it (`readFoo()()` → the name printed twice).
+ * Strip the graphify decoration and hand back a clean symbol.
+ */
+function stripGraphifyDecoration(label: string): string {
+  let s = label.trim();
+  if (s.endsWith('()')) s = s.slice(0, -2);
+  if (s.startsWith('.')) s = s.slice(1);
+  return s;
+}
+
+function toComponent(
+  alias: string,
+  node: FixtureNode,
+  construct: SubsystemComponentConstruct,
+  purpose: string,
+  lineOverride?: number,
+): SubsystemComponent {
+  const line = lineOverride ?? parseLine(node.source_location);
+  const symbol = stripGraphifyDecoration(node.label);
+  return {
+    alias,
+    name: symbol,
+    construct,
+    symbol,
+    file: node.source_file ?? '',
+    purl: purlFor(node.source_file),
+    purpose,
+    // `line` also seeds ELK's same-layer ordering (orderByLine).
+    ...(line != null ? { line } : {}),
+    ...(line != null
+      ? {
+          declarationRef: {
+            file: node.source_file ?? '',
+            startLine: line,
+            lineHash: 'ego-fixture',
+            capturedAt: new Date(0).toISOString(),
+          },
+        }
+      : {}),
+  };
+}
+
+interface EgoGraph {
+  components: SubsystemComponent[];
+  graphifyRelations: SubsystemGraphifyRelation[];
+}
+
+/** Turn one fixture category into a subsystem graph centered on its symbol. */
+function toEgoGraph(cat: FixtureCategory, category: Category): EgoGraph {
+  const center = cat.center;
+  if (!center) return { components: [], graphifyRelations: [] };
+
+  const edges = cat.edges ?? [];
+  const neighbors = cat.neighbors ?? [];
+
+  // graphify file nodes (`inferConstructFromGraphify` → 'module') are not
+  // symbols — they are the CONTAINER of symbols. The center's own file becomes
+  // a `module` boundary (a frame around its members) and its `contains` edges
+  // are dropped: membership is expressed by the frame, exactly as an authored
+  // model does it. Files reached as neighbors stay as nodes (they are external
+  // to the center's file), so only the center's file is framed.
+  const isFileNode = (n: FixtureNode): boolean =>
+    inferConstructFromGraphify(
+      n as unknown as GraphifyNode,
+      edges as unknown as GraphifyEdge[],
+    ).construct === 'module';
+
+  const centerFile = center.source_file;
+  const fileNodeIds = new Set(
+    neighbors.filter((n) => isFileNode(n)).map((n) => n.id),
+  );
+  // Neighbors that live in the center's file stay; the file node for that file
+  // is dropped (its containment is now the frame).
+  const knotless = neighbors.filter(
+    (n) => !(fileNodeIds.has(n.id) && n.source_file === centerFile),
+  );
+
+  const aliasById = new Map<string, string>([[center.id, 'center']]);
+  knotless.forEach((n, i) => aliasById.set(n.id, `n${i}`));
+  const aliasFor = (id: string): string | undefined => aliasById.get(id);
+
+  const centerConstruct = CENTER_CONSTRUCT[category];
+  const framedCenter: SubsystemComponent = {
+    ...toComponent(
+      'center',
+      center,
+      centerConstruct,
+      `graphify center — ${center.label}`,
+    ),
+    ...(centerConstruct !== 'external' && centerFile ? { module: centerFile } : {}),
+  };
+  const components: SubsystemComponent[] = [framedCenter];
+
+  // `component.line` is the CALL-SITE line, not the declaration line: the
+  // edge's `source_location` on an edge FROM the center (L115, L119, …), which
+  // `orderByLine` uses to stack callees in the order the center calls them.
+  // (The neighbor's own node `source_location` — where it is declared — is
+  // deliberately ignored here; declaration order would read arbitrarily.)
+  const callLineByAlias = new Map<string, number>();
+  for (const e of edges) {
+    const from = aliasFor(e.source);
+    const to = aliasFor(e.target);
+    const line = parseLine(e.source_location);
+    if (from === 'center' && to && line != null) callLineByAlias.set(to, line);
+  }
+
+  knotless.forEach((n, i) => {
+    const inferred = inferConstructFromGraphify(
+      n as unknown as GraphifyNode,
+      edges as unknown as GraphifyEdge[],
+    ).construct;
+    const construct = INFERRED_TO_CONSTRUCT[inferred] ?? 'external';
+    const purpose =
+      inferred === 'module'
+        ? 'graphify file node in ANOTHER file — kept as a node (outside the center frame)'
+        : `graphify ${inferred} neighbor (${n.file_type ?? 'code'})`;
+    // Members of the center's file join the frame; others stand alone.
+    const module = n.source_file === centerFile ? centerFile : undefined;
+    const c = toComponent(`n${i}`, n, construct, purpose, callLineByAlias.get(`n${i}`));
+    components.push(module ? { ...c, module } : c);
+  });
+
+  // Raw graphify edges — passed straight through (no verb folding). The
+  // canvas colors them from GRAPHIFY_RELATION_COLOR and draws them dashed.
+  // `contains` is dropped: the frame carries containment, not an edge.
+  const graphifyRelations: SubsystemGraphifyRelation[] = edges
+    .map((e, i): SubsystemGraphifyRelation | null => {
+      if (e.relation === 'contains') return null;
+      const from = aliasFor(e.source);
+      const to = aliasFor(e.target);
+      if (!from || !to) return null;
+      return {
+        id: `g${i}`,
+        from,
+        to,
+        relation: e.relation,
+        refs: e.source_file ? [e.source_file] : undefined,
+        line: parseLine(e.source_location),
+        confidence: e.confidence,
+        context: e.context,
+      };
+    })
+    .filter((x): x is SubsystemGraphifyRelation => x != null);
+
+  return { components, graphifyRelations };
+}
+
+function EgoDemo({ category, orderByLine }: { category: Category; orderByLine: boolean }) {
+  const graph = React.useMemo(() => toEgoGraph(categories[category], category), [category]);
+  const cat = categories[category];
+  const verbs = [...new Set(graph.graphifyRelations.map((r) => r.relation))];
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <SubsystemComponentGraph
+        components={graph.components}
+        relations={[]}
+        graphifyRelations={graph.graphifyRelations}
+        orderByLine={orderByLine}
+        showSingletonFrames
+        title={`Ego graph — ${category}`}
+        description={`graphify center ${cat.center?.label ?? '?'} · ${cat.degree ?? 0} edges · verbs: ${verbs.join(', ')}${orderByLine ? ' · ordered by call-site line' : ''}`}
+        showEdgeLabels
+        hideSidebar={false}
+      />
+    </div>
+  );
+}
+
+/** Everything on disk for the center: node + neighbor nodes + raw edges. */
+function RawDump({ category }: { category: Category }) {
+  const cat = categories[category];
+  return (
+    <pre
+      style={{
+        margin: 0,
+        padding: 12,
+        fontSize: 12,
+        lineHeight: 1.5,
+        fontFamily: 'monospace',
+        color: '#ddd',
+        background: '#111',
+        height: '100vh',
+        overflow: 'auto',
+        boxSizing: 'border-box',
+      }}
+    >
+      {JSON.stringify({ category, ...cat }, null, 2)}
+    </pre>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Stories — one per graphify node category
+// ---------------------------------------------------------------------------
+
+export const Class: Story = { render: () => <EgoDemo category="class" orderByLine /> };
+export const Function: Story = { render: () => <EgoDemo category="function" orderByLine /> };
+export const Method: Story = { render: () => <EgoDemo category="method" orderByLine /> };
+export const Type: Story = { render: () => <EgoDemo category="type" orderByLine /> };
+export const Module: Story = { render: () => <EgoDemo category="module" orderByLine /> };
+
+/** Same centers, ELK's default ordering — compare against the line-ordered set. */
+export const MethodReorderOff: Story = {
+  render: () => <EgoDemo category="method" orderByLine={false} />,
+};
+
+/** The raw extracted data behind each center — no rendering involved. */
+export const Raw: Story = { render: () => <RawDump category="class" /> };
+
+// ---------------------------------------------------------------------------
+// Authored-only constructs (no graphify node) pulled from the model store
+// ---------------------------------------------------------------------------
+
+const authoredComponents: SubsystemComponent[] = [
+  authoredCategories.store?.component,
+  authoredCategories.external?.component,
+  authoredCategories.custom_entity?.component,
+].filter(Boolean) as SubsystemComponent[];
+
+/** store / external / custom_entity — authored nodes, no graphify anchor. */
+export const AuthoredConstructs: Story = {
+  render: () => (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <SubsystemComponentGraph
+        components={authoredComponents}
+        relations={[]}
+        title="Authored-only constructs"
+        description="store / external / custom_entity — reused cast from stored subsystem models (no graphify node, no edges)."
+      />
+    </div>
+  ),
+};

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -40,14 +40,15 @@ import {
   isConstructsOnlyModel,
   isRelationMechanism,
   isWalkthroughMechanism,
-  MECHANISM_COLOR,
+  edgeColor,
   MECHANISM_DESCRIPTIONS,
   subsystemGraphLayoutKey,
   walkthroughStepGraphEdgeId,
   type SubsystemComponentEdge,
   type SubsystemComponent,
+  type SubsystemEdgeProvenance,
   type SubsystemEdgeView,
-  type SubsystemEdgeMechanism,
+  type SubsystemGraphifyRelation,
   type SubsystemRelation,
   type SubsystemWalkthrough,
 } from './model';
@@ -174,6 +175,19 @@ export interface SubsystemComponentGraphProps {
    * (unselected ones dimmed); everything else is hidden.
    */
   walkthroughs?: SubsystemWalkthrough[];
+  /**
+   * graphify-native relations (raw static-graph edges: `imports`, `contains`,
+   * `re_exports`, …). Display-only, drawn with the separate
+   * `GRAPHIFY_RELATION_COLOR` palette so they read as derived facts, distinct
+   * from authored subsystem mechanisms. Visible in the `relations` edge view.
+   */
+  graphifyRelations?: readonly SubsystemGraphifyRelation[];
+  /**
+   * Order same-layer nodes by `component.line` (ascending) instead of ELK's
+   * crossing-minimizer — reads a source region top-to-bottom. Components need a
+   * `line` for this to have any effect. @default false
+   */
+  orderByLine?: boolean;
   /**
    * Deep-link target: when set, the matching walkthrough is selected on mount
    * — its steps expanded and its flow focused on the canvas. Hosts use this
@@ -470,7 +484,7 @@ interface InnerProps extends SubsystemComponentGraphProps {
   measured: { w: number; h: number } | null;
 }
 
-function Inner({ components, relations, walkthroughs, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, walkthroughFocusDurationMs = 300, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey }: InnerProps) {
+function Inner({ components, relations, walkthroughs, graphifyRelations, orderByLine, initialWalkthroughId, onReorderWalkthroughs, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, showSingletonFrames = true, edgeView, title, hideSidebar, walkthroughStepMode = 'focus', autoPlayWalkthroughs = false, walkthroughAutoPlayIntervalMs = WALKTHROUGH_PLAY_PAUSE_MS, zoomOnWalkthroughFocus = true, walkthroughFocusDurationMs = 300, graphTitle, showWalkthroughTitle = false, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, diagnostic, issues, showIssues, focusIssueCategory, onSelectIssue, onApplyIssueFix, onHoverIssue, renderFileView, renderFileViewer, renderWalkthroughViewer, onFileSelect, componentVerification, onInspectSymbol, boundaryColors, hideDrawer = false, persistKey }: InnerProps) {
   const { theme } = useTheme();
   const { fitView, fitBounds } = useReactFlow();
   const viewport = useViewport();
@@ -641,31 +655,50 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
     if (drawerTarget?.kind !== 'walkthrough' || !walkthroughs) return null;
     return walkthroughs.find((t) => t.id === drawerTarget.walkthroughId) ?? null;
   }, [drawerTarget, walkthroughs]);
+  // Autoplay focus: a sidebar-less embed has no expanded flow to "open", so
+  // branding every step as a selection would hide all other nodes. Instead the
+  // autoplay sets this (flow id + step) to frame the hop and dim the rest —
+  // same treatment as hover — without hiding anything. Declared before the
+  // overlay memos, which read it to title the canvas chip + step bar.
+  const [autoPlayFocus, setAutoPlayFocus] = useState<
+    { walkthroughId: string; stepIndex: number } | null
+  >(null);
   // Ref mirror of the drawer's walkthrough id so the symbol resolver stays
   // stable across graph re-renders (the drawer is memoized on callback identity).
   const drawerWalkthroughIdRef = useRef<string | null>(null);
   drawerWalkthroughIdRef.current = focusedWalkthrough?.id ?? null;
 
-  // Walkthrough shown on the canvas title chip (focus or hover/autoplay highlight).
+  // Walkthrough shown on the canvas title chip (focus, hover highlight, or
+  // autoplay focus).
   const overlayWalkthroughTitle = useMemo(() => {
     if (!showWalkthroughTitle || !walkthroughs?.length) return null;
-    const id = focusedWalkthroughId ?? hoveredWalkthroughStep?.walkthroughId;
+    const id =
+      focusedWalkthroughId ??
+      autoPlayFocus?.walkthroughId ??
+      hoveredWalkthroughStep?.walkthroughId;
     if (!id) return null;
     return walkthroughs.find((t) => t.id === id)?.title ?? null;
   }, [
     showWalkthroughTitle,
     walkthroughs,
     focusedWalkthroughId,
+    autoPlayFocus,
     hoveredWalkthroughStep,
   ]);
 
   // Active step for the bottom-of-title progress + annotation chip.
   const overlayWalkthroughStep = useMemo(() => {
     if (!showWalkthroughTitle || !walkthroughs?.length) return null;
-    const tlId = focusedWalkthroughId ?? hoveredWalkthroughStep?.walkthroughId ?? null;
+    const tlId =
+      focusedWalkthroughId ??
+      autoPlayFocus?.walkthroughId ??
+      hoveredWalkthroughStep?.walkthroughId ??
+      null;
     let stepIndex: number | null = null;
     if (focusedWalkthroughId != null) {
       stepIndex = focusedStepIndex;
+    } else if (autoPlayFocus != null) {
+      stepIndex = autoPlayFocus.stepIndex;
     } else if (hoveredWalkthroughStep != null) {
       stepIndex = hoveredWalkthroughStep.stepIndex;
     }
@@ -683,6 +716,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
     walkthroughs,
     focusedWalkthroughId,
     focusedStepIndex,
+    autoPlayFocus,
     hoveredWalkthroughStep,
   ]);
 
@@ -710,15 +744,17 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
   // The pane stays hidden until Pass 2 completes. Key off layout-affecting
   // fields only — declarationRef updates after verify must not re-run ELK.
   const layoutKey = useMemo(
-    () => subsystemGraphLayoutKey({ components, relations, walkthroughs }),
-    [components, relations, walkthroughs],
+    () => subsystemGraphLayoutKey({ components, relations, walkthroughs, graphifyRelations }),
+    [components, relations, walkthroughs, graphifyRelations],
   );
   const componentsRef = useRef(components);
   const relationsRef = useRef(relations);
   const walkthroughsRef = useRef(walkthroughs);
+  const graphifyRelationsRef = useRef(graphifyRelations);
   componentsRef.current = components;
   relationsRef.current = relations;
   walkthroughsRef.current = walkthroughs;
+  graphifyRelationsRef.current = graphifyRelations;
 
   // Track measured dimensions from React Flow's dimension changes.
   // These arrive as { type: 'dimensions', id, dimensions } in onNodesChange.
@@ -744,6 +780,8 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
       maxNodeWidth,
       showEdgeLabels,
       showSingletonFrames,
+      graphifyRelations: graphifyRelationsRef.current,
+      orderByLine,
     })
       .then(({ nodes, edges: e, absoluteRects }) => {
         if (!alive) return;
@@ -793,7 +831,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
     const gen = ++pass2GenRef.current;
     void buildSubsystemGraph(
       { components, relations, walkthroughs },
-      { maxNodeWidth, showEdgeLabels, measuredWidths, measuredHeights, showSingletonFrames },
+      { maxNodeWidth, showEdgeLabels, measuredWidths, measuredHeights, showSingletonFrames, graphifyRelations, orderByLine },
     )
       .then(({ nodes, edges: e, absoluteRects }) => {
         if (gen !== pass2GenRef.current) return;
@@ -806,7 +844,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
         // Reveal Pass 1 layout rather than leaving the cover up forever.
         setLayoutReady(true);
       });
-  }, [built.nodes, components, relations, walkthroughs, maxNodeWidth, showEdgeLabels]);
+  }, [built.nodes, components, relations, walkthroughs, graphifyRelations, orderByLine, maxNodeWidth, showEdgeLabels]);
 
   // After Pass 1 commits, try Pass 2 immediately with retained measurements.
   // Same-id live updates often get no new React Flow `dimensions` events, so
@@ -894,13 +932,6 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
   // without a stale closure value.
   const selectedEdgeIdRef = useRef<string | null>(null);
   selectedEdgeIdRef.current = selectedEdgeId;
-  // Autoplay focus: a sidebar-less embed has no expanded flow to "open", so
-  // branding every step as a selection would hide all other nodes. Instead the
-  // autoplay sets this (flow id + step) to frame the hop and dim the rest —
-  // same treatment as hover — without hiding anything.
-  const [autoPlayFocus, setAutoPlayFocus] = useState<
-    { walkthroughId: string; stepIndex: number } | null
-  >(null);
   // Edge ids in walkthrough focus (an active flow's edge set, or a single
   // step's edge). Used to frame the camera. `null` = no walkthrough focus.
   const focusEdgeIds = useMemo(() => {
@@ -1108,11 +1139,17 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
       };
     };
     // Edges outside the selected view are hidden entirely (labels included).
+    // graphify-native edges belong to the relations view (they are static
+    // topology, not runtime hops) regardless of their verb.
     const edgeInView = (e: Edge): boolean => {
-      const mechanism = (e.data as { mechanism?: string } | undefined)?.mechanism ?? 'uses';
-      return resolvedEdgeView === 'relations'
-        ? isRelationMechanism(mechanism)
-        : isWalkthroughMechanism(mechanism);
+      const d = e.data as
+        | { mechanism?: string; provenance?: SubsystemEdgeProvenance }
+        | undefined;
+      const mechanism = d?.mechanism ?? 'uses';
+      if (resolvedEdgeView === 'relations') {
+        return d?.provenance === 'graphify' || isRelationMechanism(mechanism);
+      }
+      return isWalkthroughMechanism(mechanism);
     };
     if (openedEdgeIds || focusEdgeIds || previewEdgeIds) {
       return baseEdges.map((e) => {
@@ -1871,6 +1908,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
       .map((e) => {
         const d = e.data as {
           mechanism?: string;
+          provenance?: SubsystemEdgeProvenance;
           dimmed?: boolean;
           labelX?: number;
           labelY?: number;
@@ -1879,6 +1917,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
         return {
           id: e.id,
           mechanism: d?.mechanism ?? 'uses',
+          provenance: d?.provenance,
           dimmed: d?.dimmed === true,
           midX: d?.labelX ?? 0,
           midY: d?.labelY ?? 0,
@@ -2214,9 +2253,19 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
           }}
         >
           {edgeLabels.map((lbl) => {
-            const mechanism = lbl.mechanism as SubsystemEdgeMechanism;
-            const color = MECHANISM_COLOR[mechanism] ?? '#888';
-            const verifiable = MECHANISM_DESCRIPTIONS.find(([m]) => m === mechanism)?.[2] ?? true;
+            const mechanism = lbl.mechanism;
+            const isGraphify = lbl.provenance === 'graphify';
+            const color = edgeColor({ mechanism, provenance: lbl.provenance });
+            // Label chrome stays the crisp rounded box for every edge — graphify
+            // provenance is carried by hue (GRAPHIFY_RELATION_COLOR), the dashed
+            // stroke, and the tooltip, NOT by the "ambiguous" cloud silhouette
+            // (that idiom is reserved for soft authored mechanisms).
+            const verifiable = true;
+            const labelTitle = isGraphify
+              ? 'Derived from graphify (static symbol graph)'
+              : MECHANISM_DESCRIPTIONS.find(([m]) => m === mechanism)?.[2] === false
+                ? 'Not directly verifiable with graphify'
+                : undefined;
             const screenX = lbl.midX * viewport.zoom + viewport.x;
             const screenY = lbl.midY * viewport.zoom + viewport.y;
             const text = lbl.stepNos?.length
@@ -2226,7 +2275,7 @@ function Inner({ components, relations, walkthroughs, initialWalkthroughId, onRe
               <div
                 key={lbl.id}
               data-edge-label={lbl.id}
-              title={verifiable ? undefined : 'Not directly verifiable with graphify'}
+              title={labelTitle}
               onClick={(e) => {
                 e.stopPropagation();
                 selectEdge(lbl.id);
@@ -2707,6 +2756,7 @@ export function SubsystemComponentGraph(props: SubsystemComponentGraphProps) {
     components: props.components,
     relations: props.relations,
     walkthroughs: props.walkthroughs,
+    graphifyRelations: props.graphifyRelations,
   });
 
   return (