@principal-ai/subsystems-react 0.42.0 → 0.43.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/stories/Subsystem/C4Graph/c4Fixture.js +1 -1
- package/dist/stories/Subsystem/C4Graph/c4Fixture.js.map +1 -1
- package/dist/stories/Subsystem/ComponentGraph/fixtures.d.ts +6 -9
- package/dist/stories/Subsystem/ComponentGraph/fixtures.d.ts.map +1 -1
- package/dist/stories/Subsystem/ComponentGraph/fixtures.js +15 -50
- package/dist/stories/Subsystem/ComponentGraph/fixtures.js.map +1 -1
- package/dist/subsystem/C4Graph.d.ts +2 -3
- package/dist/subsystem/C4Graph.d.ts.map +1 -1
- package/dist/subsystem/C4Graph.js +2 -3
- package/dist/subsystem/C4Graph.js.map +1 -1
- package/dist/subsystem/IssueList.d.ts +5 -5
- package/dist/subsystem/IssueList.d.ts.map +1 -1
- package/dist/subsystem/IssueList.js +9 -18
- package/dist/subsystem/IssueList.js.map +1 -1
- package/dist/subsystem/SubsystemComponentGraph.d.ts +16 -12
- package/dist/subsystem/SubsystemComponentGraph.d.ts.map +1 -1
- package/dist/subsystem/SubsystemComponentGraph.js +99 -113
- package/dist/subsystem/SubsystemComponentGraph.js.map +1 -1
- package/dist/subsystem/SubsystemFileTree.d.ts +5 -5
- package/dist/subsystem/SubsystemFileTree.d.ts.map +1 -1
- package/dist/subsystem/SubsystemFileTree.js +13 -49
- package/dist/subsystem/SubsystemFileTree.js.map +1 -1
- package/dist/subsystem/model.d.ts +67 -53
- package/dist/subsystem/model.d.ts.map +1 -1
- package/dist/subsystem/model.js +305 -55
- package/dist/subsystem/model.js.map +1 -1
- package/dist/subsystem/nodes.d.ts.map +1 -1
- package/dist/subsystem/nodes.js +11 -4
- package/dist/subsystem/nodes.js.map +1 -1
- package/dist/subsystem/toC4.d.ts +4 -4
- package/dist/subsystem/toC4.d.ts.map +1 -1
- package/dist/subsystem/toC4.js +3 -7
- package/dist/subsystem/toC4.js.map +1 -1
- package/dist/utils/elkLayout.d.ts.map +1 -1
- package/dist/utils/elkLayout.js +7 -0
- package/dist/utils/elkLayout.js.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +0 -4
- package/src/stories/Subsystem/AgentsPanel.stories.tsx +3 -5
- package/src/stories/Subsystem/C4Graph/C4Container.stories.tsx +1 -4
- package/src/stories/Subsystem/C4Graph/c4Fixture.ts +1 -1
- package/src/stories/Subsystem/ComponentGraph/Appearance.stories.tsx +2 -4
- package/src/stories/Subsystem/ComponentGraph/Basics.stories.tsx +8 -8
- package/src/stories/Subsystem/ComponentGraph/Captures.stories.tsx +19 -19
- package/src/stories/Subsystem/ComponentGraph/Constructs.stories.tsx +0 -1
- package/src/stories/Subsystem/ComponentGraph/CustomEntities.stories.tsx +3 -3
- package/src/stories/Subsystem/ComponentGraph/DetailPanel.stories.tsx +0 -2
- package/src/stories/Subsystem/ComponentGraph/Diagnostics.stories.tsx +2 -6
- package/src/stories/Subsystem/ComponentGraph/EdgeViews.stories.tsx +21 -21
- package/src/stories/Subsystem/ComponentGraph/Flows.stories.tsx +0 -3
- package/src/stories/Subsystem/ComponentGraph/FrameworkStereotype.stories.tsx +30 -32
- package/src/stories/Subsystem/ComponentGraph/GraphTitle.stories.tsx +4 -4
- package/src/stories/Subsystem/ComponentGraph/IssueOverlay.stories.tsx +1 -26
- package/src/stories/Subsystem/ComponentGraph/Issues.stories.tsx +3 -25
- package/src/stories/Subsystem/ComponentGraph/ModuleBadges.stories.tsx +7 -8
- package/src/stories/Subsystem/ComponentGraph/ModulePathNesting.stories.tsx +116 -0
- package/src/stories/Subsystem/ComponentGraph/Modules.stories.tsx +9 -11
- package/src/stories/Subsystem/ComponentGraph/Packages.stories.tsx +3 -6
- package/src/stories/Subsystem/ComponentGraph/Processes.stories.tsx +3 -3
- package/src/stories/Subsystem/ComponentGraph/Proposed.stories.tsx +8 -6
- package/src/stories/Subsystem/ComponentGraph/ProposedWalkthroughs.stories.tsx +0 -1
- package/src/stories/Subsystem/ComponentGraph/Reorder.stories.tsx +0 -1
- package/src/stories/Subsystem/ComponentGraph/Scenarios.stories.tsx +26 -28
- package/src/stories/Subsystem/ComponentGraph/WalkthroughAutoplay.stories.tsx +0 -1
- package/src/stories/Subsystem/ComponentGraph/WorkspacePackageFrames.stories.tsx +2 -3
- package/src/stories/Subsystem/ComponentGraph/fixtures.ts +18 -58
- package/src/stories/Subsystem/EgoGraph/EgoGraph.stories.tsx +0 -2
- package/src/subsystem/C4Graph.tsx +2 -3
- package/src/subsystem/IssueList.tsx +12 -22
- package/src/subsystem/SubsystemComponentGraph.tsx +117 -135
- package/src/subsystem/SubsystemFileTree.tsx +17 -50
- package/src/subsystem/model.test.ts +155 -24
- package/src/subsystem/model.ts +352 -108
- package/src/subsystem/nodes.tsx +13 -3
- package/src/subsystem/toC4.test.ts +5 -12
- package/src/subsystem/toC4.ts +5 -9
- package/src/utils/elkLayout.ts +10 -0
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import type {
|
|
2
2
|
SubsystemComponent,
|
|
3
3
|
SubsystemComponentEdge,
|
|
4
|
-
SubsystemRelation,
|
|
5
|
-
SubsystemRelationType,
|
|
6
4
|
SubsystemWalkthrough,
|
|
7
5
|
SubsystemWalkthroughMechanism,
|
|
8
6
|
} from '../../../subsystem/model';
|
|
9
|
-
import { derivedGraphEdgeId } from '../../../subsystem/model';
|
|
10
7
|
import type { GraphifyComponentDetail } from '../../../graphify';
|
|
11
8
|
|
|
12
9
|
// ---------------------------------------------------------------------------
|
|
@@ -27,26 +24,6 @@ export function components(
|
|
|
27
24
|
}));
|
|
28
25
|
}
|
|
29
26
|
|
|
30
|
-
const RELATION_TYPES = new Set<string>([
|
|
31
|
-
'extends',
|
|
32
|
-
'inherits',
|
|
33
|
-
'implements',
|
|
34
|
-
'mixes_in',
|
|
35
|
-
'method',
|
|
36
|
-
]);
|
|
37
|
-
|
|
38
|
-
export function relations(
|
|
39
|
-
spec: Array<[from: string, to: string, relationType: SubsystemRelationType, refs?: string[]]>,
|
|
40
|
-
): SubsystemRelation[] {
|
|
41
|
-
return spec.map(([from, to, relationType, refs], i) => ({
|
|
42
|
-
id: `r${i}`,
|
|
43
|
-
from,
|
|
44
|
-
to,
|
|
45
|
-
relationType,
|
|
46
|
-
refs,
|
|
47
|
-
}));
|
|
48
|
-
}
|
|
49
|
-
|
|
50
27
|
/** Story helper: one walkthrough whose hops derive Set B display edges. */
|
|
51
28
|
export function walkthroughFromHops(
|
|
52
29
|
id: string,
|
|
@@ -68,48 +45,32 @@ export function walkthroughFromHops(
|
|
|
68
45
|
};
|
|
69
46
|
}
|
|
70
47
|
|
|
71
|
-
/** @deprecated story helper — prefer `
|
|
48
|
+
/** @deprecated story helper — prefer `graphSpecFromHops` + `walkthroughFromHops`. */
|
|
72
49
|
export function edges(
|
|
73
|
-
spec: Array<[from: string, to: string, mechanism: SubsystemComponentEdge['mechanism']
|
|
50
|
+
spec: Array<[from: string, to: string, mechanism: SubsystemComponentEdge['mechanism']]>,
|
|
74
51
|
): SubsystemComponentEdge[] {
|
|
75
|
-
return spec.map(([from, to, mechanism
|
|
52
|
+
return spec.map(([from, to, mechanism], i) => ({
|
|
76
53
|
id: `e${i}`,
|
|
77
54
|
from,
|
|
78
55
|
to,
|
|
79
56
|
mechanism,
|
|
80
|
-
refs,
|
|
81
57
|
}));
|
|
82
58
|
}
|
|
83
59
|
|
|
84
|
-
/**
|
|
85
|
-
export function
|
|
86
|
-
spec: Array<[from: string, to: string, mechanism: SubsystemComponentEdge['mechanism']
|
|
87
|
-
): {
|
|
88
|
-
const
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
refs,
|
|
98
|
-
});
|
|
99
|
-
} else {
|
|
100
|
-
hops.push({
|
|
101
|
-
from,
|
|
102
|
-
to,
|
|
103
|
-
mechanism: mechanism as SubsystemWalkthroughMechanism,
|
|
104
|
-
file: 'story-placeholder.ts',
|
|
105
|
-
line: 1,
|
|
106
|
-
purl: 'pkg:github/storybook/fixture#story-placeholder.ts',
|
|
107
|
-
symbol: from,
|
|
108
|
-
});
|
|
109
|
-
}
|
|
110
|
-
}
|
|
60
|
+
/** Turn every spec entry into a walkthrough hop — the sole authored edge form. */
|
|
61
|
+
export function graphSpecFromHops(
|
|
62
|
+
spec: Array<[from: string, to: string, mechanism: SubsystemComponentEdge['mechanism']]>,
|
|
63
|
+
): { walkthroughs?: SubsystemWalkthrough[] } {
|
|
64
|
+
const hops: SubsystemWalkthrough['steps'] = spec.map(([from, to, mechanism]) => ({
|
|
65
|
+
from,
|
|
66
|
+
to,
|
|
67
|
+
mechanism: mechanism as SubsystemWalkthroughMechanism,
|
|
68
|
+
file: 'story-placeholder.ts',
|
|
69
|
+
line: 1,
|
|
70
|
+
purl: 'pkg:github/storybook/fixture#story-placeholder.ts',
|
|
71
|
+
symbol: from,
|
|
72
|
+
}));
|
|
111
73
|
return {
|
|
112
|
-
relations: rels,
|
|
113
74
|
walkthroughs:
|
|
114
75
|
hops.length > 0
|
|
115
76
|
? [{ id: 'story-hops', title: 'Story hops', steps: hops }]
|
|
@@ -192,17 +153,16 @@ export const investigateOnlyComponents: SubsystemComponent[] = [
|
|
|
192
153
|
},
|
|
193
154
|
];
|
|
194
155
|
|
|
195
|
-
const investigateSpec =
|
|
156
|
+
const investigateSpec = graphSpecFromHops([
|
|
196
157
|
['v1', 'input', 'produces'],
|
|
197
158
|
['v2', 'input', 'produces'],
|
|
198
159
|
['input', 'acc', 'feeds'],
|
|
199
160
|
['acc', 'out', 'produces'],
|
|
200
161
|
]);
|
|
201
162
|
|
|
202
|
-
export const investigateOnlyRelations = investigateSpec.relations;
|
|
203
163
|
export const investigateOnlyWalkthroughs = investigateSpec.walkthroughs;
|
|
204
164
|
|
|
205
|
-
/** @deprecated use
|
|
165
|
+
/** @deprecated use investigateOnlyWalkthroughs */
|
|
206
166
|
export const investigateOnlyEdges: SubsystemComponentEdge[] = edges([
|
|
207
167
|
['v1', 'input', 'produces'],
|
|
208
168
|
['v2', 'input', 'produces'],
|
|
@@ -275,7 +275,6 @@ function EgoDemo({ category, orderByLine }: { category: Category; orderByLine: b
|
|
|
275
275
|
<div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
|
|
276
276
|
<SubsystemComponentGraph
|
|
277
277
|
components={graph.components}
|
|
278
|
-
relations={[]}
|
|
279
278
|
graphifyRelations={graph.graphifyRelations}
|
|
280
279
|
orderByLine={orderByLine}
|
|
281
280
|
showSingletonFrames
|
|
@@ -345,7 +344,6 @@ export const AuthoredConstructs: Story = {
|
|
|
345
344
|
<div style={{ width: '100%', height: '100vh' }}>
|
|
346
345
|
<SubsystemComponentGraph
|
|
347
346
|
components={authoredComponents}
|
|
348
|
-
relations={[]}
|
|
349
347
|
title="Authored-only constructs"
|
|
350
348
|
description="store / external / custom_entity — reused cast from stored subsystem models (no graphify node, no edges)."
|
|
351
349
|
/>
|
|
@@ -3,9 +3,8 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Prototype test case: feed it a `C4Model` from `toC4()` and it draws the
|
|
5
5
|
* system as a compound frame, its containers (or components) as boxes, and
|
|
6
|
-
* externals/actors outside the system.
|
|
7
|
-
* edges
|
|
8
|
-
* the source components it rolled up.
|
|
6
|
+
* externals/actors outside the system. `walkthrough` hops render as flow
|
|
7
|
+
* edges. Click a box to list the source components it rolled up.
|
|
9
8
|
*
|
|
10
9
|
* Same interaction language as the other graphs: React Flow + ELK + the shared
|
|
11
10
|
* `GRAPH_NAV_PROPS` chrome. Deliberately small — no measurement passes, no
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* SubsystemIssueList — the diagnostics sidebar list.
|
|
3
3
|
*
|
|
4
4
|
* A catalogue of verification issues (audit findings), grouped by *target* so
|
|
5
|
-
* every broken component /
|
|
5
|
+
* every broken component / module / flow clusters together. Each
|
|
6
6
|
* card is severity-colored, names its kind, states the message, and offers the
|
|
7
7
|
* deterministic fix inline when one exists.
|
|
8
8
|
*
|
|
@@ -38,7 +38,6 @@ export type SubsystemIssueSeverity = 'error' | 'info';
|
|
|
38
38
|
|
|
39
39
|
export type SubsystemIssueTargetKind =
|
|
40
40
|
| 'component'
|
|
41
|
-
| 'relation'
|
|
42
41
|
| 'module'
|
|
43
42
|
| 'walkthrough'
|
|
44
43
|
| 'step'
|
|
@@ -48,8 +47,8 @@ export type SubsystemIssueTargetKind =
|
|
|
48
47
|
/**
|
|
49
48
|
* The four verification layers, in order. Mirrors the docs' progression:
|
|
50
49
|
* constructs → static topology → dynamic topology → walkthrough.
|
|
51
|
-
* Static topology =
|
|
52
|
-
*
|
|
50
|
+
* Static topology = package/module (containment); dynamic topology = process
|
|
51
|
+
* (runtime).
|
|
53
52
|
*/
|
|
54
53
|
export type SubsystemIssueCategory =
|
|
55
54
|
| 'repo'
|
|
@@ -90,7 +89,7 @@ export const SUBSYSTEM_ISSUE_CATEGORY_LABEL: Record<
|
|
|
90
89
|
walkthrough: 'Walkthrough',
|
|
91
90
|
};
|
|
92
91
|
|
|
93
|
-
/** Default `kind` → layer.
|
|
92
|
+
/** Default `kind` → layer. Module containment is static; process nest is dynamic. */
|
|
94
93
|
const KIND_CATEGORY: Record<string, SubsystemIssueCategory> = {
|
|
95
94
|
missing_file: 'construct',
|
|
96
95
|
symbol_ambiguous: 'construct',
|
|
@@ -102,10 +101,7 @@ const KIND_CATEGORY: Record<string, SubsystemIssueCategory> = {
|
|
|
102
101
|
signature_unconfirmed: 'construct',
|
|
103
102
|
repo_unresolved: 'repo',
|
|
104
103
|
graphify_unavailable: 'repo',
|
|
105
|
-
|
|
106
|
-
topology_import_unconfirmed: 'static-topology',
|
|
107
|
-
topology_relation_unconfirmed: 'static-topology',
|
|
108
|
-
boundary_module_file_mismatch: 'dynamic-topology',
|
|
104
|
+
boundary_module_file_mismatch: 'static-topology',
|
|
109
105
|
boundary_process_nest_disagree: 'dynamic-topology',
|
|
110
106
|
walkthrough: 'walkthrough',
|
|
111
107
|
};
|
|
@@ -189,7 +185,7 @@ export interface SubsystemIssueTarget {
|
|
|
189
185
|
id?: string;
|
|
190
186
|
/** Display label (component name, `from → to`, module path, flow title). */
|
|
191
187
|
label: string;
|
|
192
|
-
/** Optional sub-label (
|
|
188
|
+
/** Optional sub-label (step number, …). */
|
|
193
189
|
detail?: string;
|
|
194
190
|
/**
|
|
195
191
|
* For a `step` target: the walkthrough id, plus a 0-based index into that
|
|
@@ -231,8 +227,8 @@ export function humanizeIssueKind(kind: string): string {
|
|
|
231
227
|
* Curated labels. Construct-layer findings stay fully qualified ("Construct
|
|
232
228
|
* declaration file missing", "Construct type mismatch") rather than relying on
|
|
233
229
|
* the category header — this UI is new and the extra words read clearer.
|
|
234
|
-
*
|
|
235
|
-
*
|
|
230
|
+
* Boundary findings drop the `boundary_` prefix since the layer already
|
|
231
|
+
* scopes them. Explicit `issue.kindLabel` wins.
|
|
236
232
|
*/
|
|
237
233
|
const KIND_LABEL: Record<string, string> = {
|
|
238
234
|
missing_file: 'Construct declaration file missing',
|
|
@@ -245,9 +241,6 @@ const KIND_LABEL: Record<string, string> = {
|
|
|
245
241
|
signature_unconfirmed: 'Construct signature unconfirmed',
|
|
246
242
|
repo_unresolved: 'No repository clone',
|
|
247
243
|
graphify_unavailable: 'Graphify cache unavailable',
|
|
248
|
-
topology_broken_endpoint: 'Construct relationship broken',
|
|
249
|
-
topology_import_unconfirmed: 'Import unconfirmed',
|
|
250
|
-
topology_relation_unconfirmed: 'Relationship unconfirmed',
|
|
251
244
|
boundary_module_file_mismatch: 'Declaration file outside module',
|
|
252
245
|
boundary_process_nest_disagree: 'Module spans multiple process contexts',
|
|
253
246
|
walkthrough: 'Step issue',
|
|
@@ -261,8 +254,8 @@ export function issueKindLabel(issue: SubsystemIssue): string {
|
|
|
261
254
|
/**
|
|
262
255
|
* Display order within the list, by verification pipeline — not severity.
|
|
263
256
|
* Mirrors the per-component check order (file → symbol → declaration → type →
|
|
264
|
-
* signature), then
|
|
265
|
-
* remaining layers. Within a stage, "unconfirmed" precedes "mismatch": you
|
|
257
|
+
* signature), then the boundary layers (module membership → process nest) and
|
|
258
|
+
* the remaining layers. Within a stage, "unconfirmed" precedes "mismatch": you
|
|
266
259
|
* reach a verdict before you can find it wrong.
|
|
267
260
|
*/
|
|
268
261
|
const KIND_ORDER: Record<string, number> = {
|
|
@@ -278,12 +271,9 @@ const KIND_ORDER: Record<string, number> = {
|
|
|
278
271
|
construct_mismatch: 15,
|
|
279
272
|
signature_unconfirmed: 16,
|
|
280
273
|
signature_mismatch: 17,
|
|
281
|
-
// Static topology —
|
|
282
|
-
topology_broken_endpoint: 20,
|
|
283
|
-
topology_relation_unconfirmed: 21,
|
|
284
|
-
topology_import_unconfirmed: 22,
|
|
274
|
+
// Static topology — package/module membership
|
|
285
275
|
boundary_module_file_mismatch: 23,
|
|
286
|
-
// Runtime topology
|
|
276
|
+
// Runtime topology — process containment
|
|
287
277
|
boundary_process_nest_disagree: 30,
|
|
288
278
|
// Walkthrough
|
|
289
279
|
walkthrough: 40,
|