@principal-ai/subsystems-react 0.42.0 → 0.43.1

package/src/subsystem/nodes.tsx

@@ -33,6 +33,8 @@ import {
   moduleBadgeHoverLabel,
   moduleBadgeWidth,
   packageColor,
+  FOLDER_FRAME_COLOR,
+  isFolderFrame,
   type SubsystemGraphNodeData,
   type SubsystemGroupNodeData,
   type SubsystemGraphEdge,
@@ -445,8 +447,14 @@ export function SubsystemGroupNode(props: NodeProps<Node<SubsystemGroupNodeData,
     selected?: boolean;
   };
   const region = data.region;
-  // Explicit host override wins over the derived (hash-based) frame color.
-  const color = data.color ?? packageColor(region?.key ?? 'process');
+  // Explicit host override wins over the derived frame color. Folder frames
+  // (directory, or a module whose key names a folder) share one neutral hue;
+  // everything else hashes per key.
+  const color =
+    data.color ??
+    (isFolderFrame(region ?? undefined)
+      ? FOLDER_FRAME_COLOR
+      : packageColor(region?.key ?? 'process'));
   const dimmed = data.dimmed === true;
   const hidden = (data as { hidden?: boolean }).hidden === true;
   // Label is the region identity alone (path / process key / owner/name).
@@ -454,7 +462,9 @@ export function SubsystemGroupNode(props: NodeProps<Node<SubsystemGroupNodeData,
   // — don't prefix `module ·` / `package ·` or the path reads twice.
   const label = region?.label ?? '';
   const [expandedLabel, setExpandedLabel] = useState<string | null>(null);
-  const isModule = region?.kind === 'module';
+  // Directory frames (path-derived nesting) render like modules — dashed,
+  // collapsible path badge.
+  const isModule = region?.kind === 'module' || region?.kind === 'directory';
   const isProcess = region?.kind === 'process';
   const expanded = isModule && expandedLabel === label;
   const availableBadgeWidth = Math.max(0, (width ?? 400) - MODULE_BADGE_INSET * 2 - 4);

package/src/subsystem/toC4.test.ts

@@ -18,17 +18,12 @@ const doc: SubsystemModelDocument = {
     { alias: 'x', name: 'Gist API', construct: 'external', file: '', purl: 'external:api.github.com/gists' },
     { alias: 'agent', name: 'Maintenance agent', construct: 'custom_entity', file: '', purl: 'external' },
   ],
-  relations: [
-    { id: 'r1', from: 'a', to: 'b', relationType: 'method' }, // intra p1
-    { id: 'r2', from: 'a', to: 'c', relationType: 'method' },
-    { id: 'r3', from: 'b', to: 'c', relationType: 'method' },
-    { id: 'r4', from: 'a', to: 'x', relationType: 'method' },
-  ],
   walkthroughs: [
     {
       id: 'w1',
       title: 'flow',
       steps: [
+        { from: 'a', to: 'b', mechanism: 'calls', file: 'src/a.ts', line: 1, purl: `${REPO}#src/a.ts`, symbol: 'Alpha' },
         { from: 'b', to: 'c', mechanism: 'calls', file: 'src/b.ts', line: 1, purl: `${REPO}#src/b.ts`, symbol: 'Beta' },
         { from: 'a', to: 'c', mechanism: 'calls', file: 'src/a.ts', line: 2, purl: `${REPO}#src/a.ts`, symbol: 'Alpha' },
         { from: 'a', to: 'agent', mechanism: 'calls', file: 'src/a.ts', line: 3, purl: `${REPO}#src/a.ts`, symbol: 'Alpha' },
@@ -77,18 +72,16 @@ describe('container view', () => {
     expect(model.groups[0]!.memberIds.sort()).toEqual(['container:p1', 'container:p2']);
   });
 
-  test('edges roll up and intra-container edges drop', () => {
+  test('flow edges roll up to containers; only flow edges exist', () => {
     const byId = Object.fromEntries(model.edges.map((e) => [e.id, e]));
     // a->b is intra-p1 — dropped.
     expect(model.edges.some((e) => e.source === e.target)).toBe(false);
-    const rel = byId['relationship:container:p1\u0000container:p2']!;
-    expect(rel.kind).toBe('relationship');
-    expect(rel.count).toBe(2); // r2 + r3
     const flow = byId['flow:container:p1\u0000container:p2']!;
+    expect(flow.kind).toBe('flow');
     expect(flow.count).toBe(2); // a->c + b->c
-    expect(byId['relationship:container:p1\u0000external:external:api.github.com/gists']).toBeDefined();
     expect(byId['flow:container:p1\u0000actor:agent']).toBeDefined();
-    expect(model.edges).toHaveLength(4);
+    expect(model.edges.every((e) => e.kind === 'flow')).toBe(true);
+    expect(model.edges).toHaveLength(2);
   });
 });
 

package/src/subsystem/toC4.ts

@@ -2,8 +2,8 @@
  * toC4 — project a subsystem-model (or a composition of them) onto C4 levels.
  *
  * The stored document is flat: `components[]` carry `process` (runtime unit),
- * `purl` (repo/package), `construct`, `role`, `module`, plus `relations[]`
- * (static) and `walkthroughs[]` (dynamic). C4 wants a hierarchy above the
+ * `purl` (repo/package), `construct`, `role`, `module`, plus `walkthroughs[]`
+ * (dynamic). C4 wants a hierarchy above the
  * component — system → container → component — with externals and actors
  * outside it. This module derives that hierarchy without inventing data:
  *
@@ -59,12 +59,12 @@ export interface C4Group {
   memberIds: string[];
 }
 
-/** A rolled-up collaboration. `relationship` = static, `flow` = walkthrough. */
+/** A rolled-up collaboration — a walkthrough flow between owners. */
 export interface C4Edge {
   id: string;
   source: string;
   target: string;
-  kind: 'relationship' | 'flow';
+  kind: 'flow';
   label: string;
   mechanisms: string[];
   count: number;
@@ -234,7 +234,6 @@ export function toC4(doc: SubsystemModelDocument, options: ToC4Options = {}): C4
   }
 
   // --- Edges: roll each endpoint up to its owner at this view -------------
-  const relEdges = new Map<string, C4Edge>();
   const flowEdges = new Map<string, C4Edge>();
 
   const addEdge = (
@@ -255,16 +254,13 @@ export function toC4(doc: SubsystemModelDocument, options: ToC4Options = {}): C4
     if (!edge.mechanisms.includes(mechanism)) edge.mechanisms.push(mechanism);
   };
 
-  for (const r of doc.relations ?? []) {
-    addEdge(relEdges, ownerOf.get(r.from), ownerOf.get(r.to), 'relationship', r.relationType);
-  }
   for (const w of doc.walkthroughs ?? []) {
     for (const s of w.steps ?? []) {
       addEdge(flowEdges, ownerOf.get(s.from), ownerOf.get(s.to), 'flow', s.mechanism);
     }
   }
 
-  const edges = [...relEdges.values(), ...flowEdges.values()];
+  const edges = [...flowEdges.values()];
   for (const e of edges) e.label = [...e.mechanisms].sort().join(' + ');
 
   return {

package/src/utils/elkLayout.ts

@@ -759,6 +759,16 @@ export async function computeElkLayout(
     if (parentId && builtGroups.has(parentId)) continue; // nested inside parent
     elkParents.push(node);
   }
+  // Order root-level compounds by model order (the caller's `groups` array), so
+  // disconnected sibling frames lay out deterministically — e.g. `app/book`
+  // before `lib`. Without this, planCompoundGroups' bottom-up build order
+  // decides placement.
+  const groupOrder = new Map(groupDefs.map((g, i) => [g.id, i]));
+  elkParents.sort(
+    (a, b) =>
+      (groupOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER) -
+      (groupOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER),
+  );
 
   // Create ELK graph
   const rootOptions = getElkOptions(options);