@principal-ai/subsystems-react 0.49.0 → 0.51.0

package/src/stories/Subsystem/C4Graph/generateFixture.ts

@@ -0,0 +1,161 @@
+/**
+ * Regenerate BOTH C4 fixtures from one composition of the live store, so the
+ * document and its association set can never drift apart.
+ *
+ * Run from packages/subsystems-react:
+ *   bun run src/stories/Subsystem/C4Graph/generateFixture.ts
+ *
+ * The two files it writes are paired:
+ *   c4Fixture.ts            the composed document the graph renders
+ *   c4Associations.fixture.ts  proposed associations keyed off that document
+ *
+ * They must be generated together. A document from one snapshot and an
+ * association set from another produces merges that silently do nothing.
+ */
+import * as fs from 'node:fs';
+import * as os from 'node:os';
+import * as path from 'node:path';
+import { toC4 } from '../../../subsystem/toC4';
+import { buildAssociations, deriveConcerns, suggestMerges } from '../../../subsystem/c4Associations';
+import type { SubsystemModelDocument, SubsystemComponent } from '../../../subsystem/model';
+
+const REPO = 'pkg:github/principal-ai/subsystem-modeling';
+const SYSTEM_LABEL = 'Subsystem Modeling';
+const dir = path.join(os.homedir(), '.principal/subsystem-models');
+const files = fs.readdirSync(dir).filter((f) => f.endsWith('.json') && f !== '_index.json');
+
+/**
+ * Compose every stored model for one repo key into a single document.
+ *
+ * One canonical component per (purl#symbol); aliases rebased to `c0..cn` so
+ * two models cannot collide in one alias space.
+ */
+const byId = new Map<string, SubsystemComponent>();
+const steps: NonNullable<SubsystemModelDocument['trails']>[number]['steps'] = [];
+let n = 0;
+
+for (const f of files) {
+  const d = JSON.parse(fs.readFileSync(path.join(dir, f), 'utf8')) as SubsystemModelDocument;
+  const aliasMap = new Map<string, string>();
+  for (const c of d.components ?? []) {
+    if ((c.purl ?? '').split('#')[0] !== REPO) continue;
+    const key = `${c.purl!.split('#')[1] ?? ''}::${c.symbol ?? c.alias}`;
+    if (!byId.has(key)) byId.set(key, { ...c, alias: `c${n++}` });
+    aliasMap.set(c.alias, key);
+  }
+  for (const t of d.trails ?? []) {
+    for (const s of t.steps ?? []) {
+      const a = aliasMap.get(s.from);
+      const b = aliasMap.get(s.to);
+      if (!a || !b || a === b) continue;
+      steps.push({
+        from: byId.get(a)!.alias,
+        to: byId.get(b)!.alias,
+        mechanism: s.mechanism,
+        // Keep the site so the fixture is a faithful document, not a shape.
+        file: s.file,
+        line: s.line,
+        purl: s.purl,
+        symbol: s.symbol,
+        ...(s.annotation ? { annotation: s.annotation } : {}),
+      });
+    }
+  }
+}
+
+// The React-local document type carries components + trails only; the store
+// record wraps it with title/description.
+const document: SubsystemModelDocument = {
+  components: [...byId.values()],
+  trails: [{ id: 'all', title: 'all trails', steps }],
+};
+
+// --- Roll up once, then derive concerns off the same rollup -------------
+const raw = toC4(document, { view: 'container', systemLabel: SYSTEM_LABEL });
+
+const memberOf = new Map<string, SubsystemComponent>();
+for (const c of byId.values()) memberOf.set(c.alias, c);
+
+const rollup = raw.nodes
+  .filter((x) => x.kind === 'container')
+  .map((x) => {
+    const members = x.members.map((a) => memberOf.get(a)!).filter(Boolean);
+    const frameworks = [...new Set(members.map((m) => m.framework).filter(Boolean) as string[])];
+    return { key: x.key ?? x.id, members, frameworks };
+  });
+
+const set = buildAssociations({ repoKey: REPO, rollup, author: 'c4-proposer' });
+const merges = suggestMerges(rollup.map((r) => ({ key: r.key, memberCount: r.members.length })));
+const concerns = rollup.flatMap((r) => deriveConcerns(r.key, r.members, { frameworks: r.frameworks }));
+
+/** Every derived key, so a story can assert nothing was invented. */
+const derivedKeys = rollup.map((r) => r.key).sort();
+
+/** Components behind each derived key — the evidence that picks a merge survivor. */
+const memberCounts = Object.fromEntries(
+  rollup.map((r) => [r.key, r.members.length]).sort(([a], [b]) => String(a).localeCompare(String(b))),
+);
+
+// --- Write the document ------------------------------------------------
+const docSrc = `// GENERATED from live store data by generateFixture.ts — do not hand-edit.
+//
+// Composite of ${files.length} stored subsystem models for ${REPO},
+// joined on purl#symbol (one canonical component per real declaration).
+//
+// Regenerate together with c4Associations.fixture.ts — the association set is
+// keyed off the container keys this document derives. Generating them
+// separately produces merges that silently do nothing.
+
+import type { SubsystemModelDocument } from "../../../subsystem/model";
+
+/** Container keys this document is expected to derive. */
+export const c4DerivedKeys = ${JSON.stringify(derivedKeys, null, 2)} as const;
+
+/** Components behind each derived key — decides which side of a merge survives. */
+export const c4MemberCounts: Record<string, number> = ${JSON.stringify(memberCounts, null, 2)};
+
+export const c4FixtureModel: SubsystemModelDocument = ${JSON.stringify(document, null, 1)};
+`;
+fs.writeFileSync(path.join(__dirname, 'c4Fixture.ts'), docSrc);
+
+// --- Write the associations -------------------------------------------
+const assocSrc = `// GENERATED from live store data by generateFixture.ts — do not hand-edit.
+//
+// Derived from the SAME composition as c4Fixture.ts: ${byId.size} components
+// → ${rollup.length} container keys → ${set.associations.length} associations.
+//
+// Every association is state:'proposed'. None of it is accepted — accepting is
+// a human's decision, and this story exists to make that decision visible.
+
+import type { C4Association } from "../../../subsystem/toC4";
+
+/** Container keys whose trailing role matches — candidates for a merge. */
+export const C4_MERGE_CANDIDATES = ${JSON.stringify(merges, null, 2)} as const;
+
+/** Every mechanical concern, for the review panel. */
+export const C4_CONCERNS = ${JSON.stringify(concerns, null, 2)} as const;
+
+export const c4Associations: C4Association[] = ${JSON.stringify(set.associations, null, 2)};
+`;
+fs.writeFileSync(path.join(__dirname, 'c4Associations.fixture.ts'), assocSrc);
+
+// --- Verify the pair actually agrees ----------------------------------
+const reDerived = toC4(
+  JSON.parse(JSON.stringify(document)),
+  { view: 'container', systemLabel: SYSTEM_LABEL, associations: set.associations },
+);
+const claimed = new Set(set.associations.flatMap((a) => a.sourceKeys));
+const orphans = derivedKeys.filter((k) => !claimed.has(k));
+
+console.log('wrote c4Fixture.ts + c4Associations.fixture.ts');
+console.log('  models composed :', files.length);
+console.log('  components      :', byId.size);
+console.log('  container keys  :', rollup.length);
+console.log('  associations    :', set.associations.length);
+console.log('  merge candidates:', merges.length);
+console.log('  concerns        :', concerns.length);
+console.log('  types           :', JSON.stringify(
+  set.associations.reduce<Record<string, number>>((a, x) => ({ ...a, [x.type]: (a[x.type] ?? 0) + 1 }), {}),
+));
+console.log('  containers drawn:', reDerived.nodes.filter((x) => x.kind === 'container').length);
+if (orphans.length > 0) console.warn('  !! derived keys with no association:', orphans);

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

@@ -0,0 +1,358 @@
+import React, { useState } from 'react';
+import '@xyflow/react/dist/style.css';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReactFlowProvider, type NodeProps } from '@xyflow/react';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+import { SubsystemComponentGraph } from '../../../subsystem/SubsystemComponentGraph';
+import { SubsystemComponentNode } from '../../../subsystem/nodes';
+import type {
+  SubsystemComponent,
+  SubsystemGraphNode,
+} from '../../../subsystem/model';
+import { trailFromSteps } from './fixtures';
+
+/**
+ * `deprecated` is the inverse of `proposed`: the claim was real, its source is
+ * gone upstream. Mirrors Proposed.stories.tsx so the two temporary states read
+ * as siblings — proposed = not built yet, deprecated = built once, removed since.
+ */
+const meta = {
+  title: 'Subsystem/ComponentGraph/Deprecated',
+  parameters: { layout: 'fullscreen' },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <ReactFlowProvider>
+          <Story />
+        </ReactFlowProvider>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const PURL = 'pkg:github/principal-ai/subsystem-modeling';
+
+function nodeProps(c: SubsystemComponent): NodeProps<SubsystemGraphNode> {
+  return {
+    data: { component: c },
+    selected: false,
+    width: 230,
+    height: 84,
+  } as unknown as NodeProps<SubsystemGraphNode>;
+}
+
+/** Side-by-side single-node spotlights — deprecated vs its live neighbours. */
+function NodeSpotlight({
+  label,
+  component,
+}: {
+  label: string;
+  component: SubsystemComponent;
+}) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 260 }}>
+      <div
+        style={{
+          fontFamily: 'ui-monospace, monospace',
+          fontSize: 11,
+          color: '#888',
+          minHeight: 32,
+        }}
+      >
+        {label}
+      </div>
+      <div style={{ position: 'relative', height: 110, width: 240 }}>
+        <SubsystemComponentNode {...nodeProps(component)} />
+      </div>
+      <pre
+        style={{
+          margin: 0,
+          fontSize: 10,
+          fontFamily: 'ui-monospace, monospace',
+          background: '#1a1a1a',
+          color: '#ccc',
+          padding: 8,
+          borderRadius: 4,
+          overflow: 'auto',
+        }}
+      >
+        {JSON.stringify(
+          {
+            construct: component.construct,
+            deprecated: component.deprecated || undefined,
+            removedIn: component.removedIn,
+            role: component.role,
+            symbol: component.symbol || undefined,
+            file: component.file || undefined,
+          },
+          null,
+          2,
+        )}
+      </pre>
+    </div>
+  );
+}
+
+const spotlightRows: Array<{ label: string; component: SubsystemComponent }> = [
+  {
+    label: 'live function (baseline)',
+    component: {
+      alias: 'live-fn',
+      name: 'auditSubsystemModel',
+      construct: 'function',
+      file: 'src/bun/verify-subsystem-component.ts',
+      purl: PURL,
+      symbol: 'auditSubsystemModel',
+      purpose: 'Deterministic dry-run audit of a stored model',
+    },
+  },
+  {
+    label: 'deprecated + removedIn — slate border, badge',
+    component: {
+      alias: 'dead-fn',
+      name: 'auditTopologyRelations',
+      construct: 'function',
+      file: 'src/bun/topology-audit.ts',
+      purl: PURL,
+      symbol: 'auditTopologyRelations',
+      purpose: 'Verifies authored relations[] endpoints',
+      deprecated: true,
+      removedIn: {
+        commit: 'e168afc',
+        reason: 'Remove topology relations; nest module boundaries by path',
+      },
+    },
+  },
+  {
+    label: 'deprecated, no removedIn (bare marker)',
+    component: {
+      alias: 'dead-bare',
+      name: 'graphifyHasRelationBetween',
+      construct: 'function',
+      file: 'src/bun/topology-audit.ts',
+      purl: PURL,
+      symbol: 'graphifyHasRelationBetween',
+      purpose: 'Relation predicate over the graphify edge set',
+      deprecated: true,
+    },
+  },
+  {
+    label: 'deprecated + role: entry (badge shows deprecated only)',
+    component: {
+      alias: 'dead-entry',
+      name: 'topologyRelationsAudit',
+      construct: 'function',
+      file: 'src/bun/topology-audit.ts',
+      purl: PURL,
+      symbol: 'topologyRelationsAudit',
+      purpose: 'Audit entry for relation endpoints',
+      deprecated: true,
+      role: 'entry',
+    },
+  },
+  {
+    label: 'proposed (the sibling temporary state)',
+    component: {
+      alias: 'prop-fn',
+      name: 'OpenCodeV2Lifecycle',
+      construct: 'function',
+      file: '',
+      purl: PURL,
+      symbol: 'OpenCodeV2Lifecycle',
+      purpose: 'Proposed Studio host lifecycle',
+      proposed: true,
+    },
+  },
+];
+
+/** Spotlights: slate deprecated badge + border vs live, proposed, and entry. */
+export const Spotlights: Story = {
+  render: () => (
+    <div
+      style={{
+        padding: 24,
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: 28,
+        alignItems: 'flex-start',
+        minHeight: '100vh',
+        boxSizing: 'border-box',
+      }}
+    >
+      {spotlightRows.map((row) => (
+        <NodeSpotlight key={row.component.alias} {...row} />
+      ))}
+    </div>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// Full graph: live audit calling a deleted topology audit, which called two
+// more deleted helpers. Mirrors the real wedged model.
+// ---------------------------------------------------------------------------
+const deprecatedComponents: SubsystemComponent[] = [
+  {
+    alias: 'audit',
+    name: 'auditSubsystemModel',
+    construct: 'function',
+    file: 'src/bun/verify-subsystem-component.ts',
+    purl: PURL,
+    symbol: 'auditSubsystemModel',
+    purpose: 'Deterministic dry-run audit of a stored model',
+    role: 'entry',
+  },
+  {
+    alias: 'topology',
+    name: 'auditTopologyRelations',
+    construct: 'function',
+    file: 'src/bun/topology-audit.ts',
+    purl: PURL,
+    symbol: 'auditTopologyRelations',
+    purpose: 'Orchestrates relations[] endpoint checks',
+    deprecated: true,
+    removedIn: {
+      commit: 'e168afc',
+      reason: 'Remove topology relations; nest module boundaries by path',
+    },
+  },
+  {
+    alias: 'topo-relation',
+    name: 'graphifyHasRelationBetween',
+    construct: 'function',
+    file: 'src/bun/topology-audit.ts',
+    purl: PURL,
+    symbol: 'graphifyHasRelationBetween',
+    purpose: 'True when Graphify records a relation between two nodes',
+    deprecated: true,
+    removedIn: {
+      commit: 'e168afc',
+      reason: 'Remove topology relations; nest module boundaries by path',
+    },
+  },
+  {
+    alias: 'topo-hints',
+    name: 'graphifyHasRelationTowardHints',
+    construct: 'function',
+    file: 'src/bun/topology-audit.ts',
+    purl: PURL,
+    symbol: 'graphifyHasRelationTowardHints',
+    purpose: 'Relation hints directed at a component',
+    deprecated: true,
+    removedIn: { commit: 'e168afc' },
+  },
+  {
+    alias: 'boundary',
+    name: 'auditBoundaryFields',
+    construct: 'function',
+    file: 'src/bun/boundary-audit.ts',
+    purl: PURL,
+    symbol: 'auditBoundaryFields',
+    purpose: 'Package/module containment + process checks',
+  },
+];
+
+const deprecatedTrails = [
+  trailFromSteps('audit-steps', 'Audit (dry-run, graphify-backed)', [
+    ['audit', 'topology', 'calls', 'src/bun/verify-subsystem-component.ts', 1],
+    ['audit', 'boundary', 'calls', 'src/bun/verify-subsystem-component.ts', 1],
+    ['topology', 'topo-relation', 'calls', 'src/bun/topology-audit.ts', 1],
+    ['topology', 'topo-hints', 'calls', 'src/bun/topology-audit.ts', 1],
+  ]),
+];
+
+function DeprecatedDemo() {
+  const [selected, setSelected] = useState<string | null>(null);
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <SubsystemComponentGraph
+        components={deprecatedComponents}
+        trails={deprecatedTrails}
+        onSelect={(id) => setSelected(id)}
+      />
+      <div style={{ marginTop: 8, padding: '0 12px', fontFamily: 'monospace', fontSize: 12, color: '#aaa' }}>
+        Click a slate `deprecated` badge to open the removal provenance
+        {selected ? ` · selected: ${selected}` : ''}
+      </div>
+    </div>
+  );
+}
+
+/** Full graph: the deleted topology subtree still wired into a live audit. */
+export const RemovedSubtree: Story = {
+  render: () => <DeprecatedDemo />,
+};
+
+/**
+ * The popover states, isolated — every badge variant the popover can render.
+ * `Spotlights` shows the closed badge only; this is what the click opens.
+ */
+export function RemovalPopover() {
+  const deprecatedColor = '#6b7280';
+  const variants = [
+    {
+      label: 'with removedIn',
+      removal: {
+        commit: 'e168afc',
+        reason: 'Remove topology relations; nest module boundaries by path',
+      },
+    },
+    { label: 'no removedIn (fallback copy)', removal: undefined },
+  ] as const;
+  return (
+    <div style={{ display: 'flex', gap: 24, padding: 24, alignItems: 'flex-start' }}>
+      {variants.map((v) => (
+        <div key={v.label} style={{ width: 300 }}>
+          <div
+            style={{
+              fontFamily: 'ui-monospace, monospace',
+              fontSize: 11,
+              color: '#888',
+              marginBottom: 6,
+            }}
+          >
+            {v.label}
+          </div>
+          <div
+            role="dialog"
+            aria-label="Removal provenance"
+            style={{
+              padding: '8px 10px',
+              borderRadius: 6,
+              background: '#1f1f1f',
+              border: `1px solid ${deprecatedColor}`,
+              boxShadow: '0 6px 20px rgba(0,0,0,0.35)',
+              fontFamily: 'system-ui, sans-serif',
+              fontSize: 13,
+              color: '#eee',
+            }}
+          >
+            <div style={{ fontWeight: 600, marginBottom: 4, color: deprecatedColor }}>
+              Deprecated
+            </div>
+            {v.removal ? (
+              <>
+                <div style={{ fontFamily: 'ui-monospace, monospace', marginBottom: 4 }}>
+                  removed in {v.removal.commit}
+                </div>
+                {v.removal.reason && <div style={{ color: '#aaa' }}>{v.removal.reason}</div>}
+              </>
+            ) : (
+              <div style={{ color: '#aaa' }}>
+                This claim's source was removed upstream.
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+/** The removal-provenance popover, both copy variants. */
+export const Popover: Story = {
+  render: () => <RemovalPopover />,
+};

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

@@ -46,24 +46,30 @@ const GRAPH_DESCRIPTION =
 /** Every chip state side by side, for quick visual review. */
 export const States: Story = {
   render: () => {
-    const rows: Array<{ label: string; status: SubsystemDiagnosticStatus; issueCount?: number; stale?: boolean; busy?: boolean }> = [
+    const rows: Array<{ label: string; status: SubsystemDiagnosticStatus; issueCount?: number; fixableCount?: number; stale?: boolean; busy?: boolean }> = [
       { label: 'ok', status: 'ok' },
       { label: 'ok (stale)', status: 'ok', stale: true },
       { label: 'issues · 3', status: 'issues', issueCount: 3 },
       { label: 'gaps · 2', status: 'gaps', issueCount: 2 },
       { label: 'unknown (never checked)', status: 'unknown' },
       { label: 'issues (busy)', status: 'issues', issueCount: 3, busy: true },
+      { label: 'issues · 7, 7 fixable', status: 'issues', issueCount: 7, fixableCount: 7 },
+      { label: 'issues · 4, 2 fixable', status: 'issues', issueCount: 4, fixableCount: 2 },
+      { label: 'issues · 2, fixable + stale', status: 'issues', issueCount: 2, fixableCount: 2, stale: true },
+      { label: 'issues · 120, fixable capped', status: 'issues', issueCount: 120, fixableCount: 120 },
+      { label: 'issues (busy) hides badge', status: 'issues', issueCount: 3, fixableCount: 3, busy: true },
     ];
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: 18, padding: 32 }}>
         {rows.map((row) => (
           <div key={row.label} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-            <span style={{ width: 200, fontFamily: 'monospace', fontSize: 12, opacity: 0.7 }}>
+            <span style={{ width: 220, fontFamily: 'monospace', fontSize: 12, opacity: 0.7 }}>
               {row.label}
             </span>
             <SubsystemDiagnosticToggle
               status={row.status}
               issueCount={row.issueCount}
+              fixableCount={row.fixableCount}
               stale={row.stale}
               busy={row.busy}
               onToggle={() => {}}
@@ -75,6 +81,25 @@ export const States: Story = {
   },
 };
 
+/**
+ * The real case that motivated the badge: seven re-pin findings, every one a
+ * one-click fix the construct-fixer defers to the human. The chip announces
+ * them so the deferral isn't silent.
+ */
+export const GraphFixableBadge: Story = {
+  render: () => (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <SubsystemComponentGraph
+        components={graphComponents}
+        trails={graphEdges.trails}
+        title="Vestigial detail layer vs single-source declaration"
+        description={GRAPH_DESCRIPTION}
+        diagnostic={{ status: 'issues', issueCount: 7, fixableCount: 7, onToggle: () => {} }}
+      />
+    </div>
+  ),
+};
+
 /** The chip in its real home: the sidebar title row, beside the description toggle. */
 export const GraphClean: Story = {
   render: () => (

package/src/stories/Subsystem/ComponentGraph/{Flows.stories.tsx → Trails.stories.tsx}

@@ -8,7 +8,7 @@ import { PierreTrailCodeView } from '../../../pierre';
 import type { TrailViewerContext } from '../../../subsystem/SubsystemComponentGraph';
 
 const meta = {
-  title: 'Subsystem/ComponentGraph/Flows',
+  title: 'Subsystem/ComponentGraph/Trails',
   component: SubsystemComponentGraph,
   parameters: {
     layout: 'fullscreen',
@@ -164,7 +164,7 @@ const drawingTrails: SubsystemTrail[] = [
   },
 ];
 
-function FlowsDemo() {
+function TrailsDemo() {
   const renderTrailViewer = useCallback(
     ({
       trail,
@@ -173,6 +173,7 @@ function FlowsDemo() {
       proposedAliases,
       resolveSymbol,
       onSymbolClick,
+      onVisibleStepChange,
     }: TrailViewerContext) => (
       <PierreTrailCodeView
         trail={trail}
@@ -183,6 +184,7 @@ function FlowsDemo() {
         proposedAliases={proposedAliases}
         resolveSymbol={resolveSymbol}
         onSymbolClick={onSymbolClick}
+        onVisibleStepChange={onVisibleStepChange}
       />
     ),
     [],
@@ -217,8 +219,8 @@ function FlowsDemo() {
   );
 }
 
-export const ThreeFlows: Story = {
-  render: () => <FlowsDemo />,
+export const ThreeTrails: Story = {
+  render: () => <TrailsDemo />,
 };
 
 /**
@@ -281,6 +283,7 @@ function ProposedMissingStepDemo() {
       proposedAliases,
       resolveSymbol,
       onSymbolClick,
+      onVisibleStepChange,
     }: TrailViewerContext) => (
       <PierreTrailCodeView
         trail={trail}
@@ -291,6 +294,7 @@ function ProposedMissingStepDemo() {
         proposedAliases={proposedAliases}
         resolveSymbol={resolveSymbol}
         onSymbolClick={onSymbolClick}
+        onVisibleStepChange={onVisibleStepChange}
       />
     ),
     [],
@@ -480,6 +484,7 @@ function ClickableConstructsDemo() {
       proposedAliases,
       resolveSymbol,
       onSymbolClick,
+      onVisibleStepChange,
     }: TrailViewerContext) => (
       <PierreTrailCodeView
         trail={trail}
@@ -490,6 +495,7 @@ function ClickableConstructsDemo() {
         proposedAliases={proposedAliases}
         resolveSymbol={resolveSymbol}
         onSymbolClick={onSymbolClick}
+        onVisibleStepChange={onVisibleStepChange}
       />
     ),
     [],