@principal-ai/subsystems-react 0.50.0 → 0.51.1

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/IssueOverlay.stories.tsx

@@ -469,7 +469,7 @@ const MAINTAIN_ISSUES: SubsystemIssue[] = [
   },
   {
     id: 'mr-symbol-unmatched',
-    severity: 'info',
+    severity: 'error',
     kind: 'symbol_unmatched',
     message:
       'No graphify node matches symbol readSse in packages/subsystems-studio/src/bun/opencode-v2-live.ts',

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

@@ -84,7 +84,7 @@ const ISSUES: SubsystemIssue[] = [
   },
   {
     id: 'i18',
-    severity: 'info',
+    severity: 'error',
     kind: 'symbol_unmatched',
     message: 'No Graphify node matches symbol persistSession in src/session/SessionStore.ts',
     target: { kind: 'component', id: 'session-store', label: 'SessionStore' },

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,
@@ -219,8 +219,8 @@ function FlowsDemo() {
   );
 }
 
-export const ThreeFlows: Story = {
-  render: () => <FlowsDemo />,
+export const ThreeTrails: Story = {
+  render: () => <TrailsDemo />,
 };
 
 /**