@principal-ai/subsystems-react 0.43.1 → 0.44.0

package/src/subsystem/model.ts

@@ -1062,23 +1062,49 @@ export function buildBoundaryLayoutGroupsByPath(
     keepRegion(r, showSingletons),
   );
 
-  // Directory regions: every ancestor directory of a component's module path,
-  // with the union of all aliases beneath it.
+  // Directory nesting is SCOPED to the enclosing process (else package, else
+  // root), so module grouping stays subordinate to process boundaries. A
+  // folder that spans two processes is split per process rather than becoming
+  // a frame that belongs to neither — which would leave the process frames
+  // childless and drop them. Composite key = `${scopeKey}\0${path}`.
+  const scopeKeyFor = (c: SubsystemComponent): string => {
+    const p = c.process?.trim();
+    if (p && keptProcessKeys.has(p)) return `p:${p}`;
+    const pkg = componentPackageKey(c);
+    if (pkg && keptPackageKeys.has(pkg)) return `k:${pkg}`;
+    return 'root';
+  };
+  const scopeParentId = (scopeKey: string): string | undefined => {
+    if (scopeKey.startsWith('p:')) return processGroupNodeId(scopeKey.slice(2));
+    if (scopeKey.startsWith('k:')) return packageGroupNodeId(scopeKey.slice(2));
+    return undefined;
+  };
+  const dirGroupId = (scopeKey: string, path: string): string =>
+    scopeKey === 'root'
+      ? directoryGroupNodeId(path)
+      : `directory:${scopeKey}::${path}`;
+
   const dirMembers = new Map<string, Set<string>>();
+  const dirPathOf = new Map<string, string>();
+  const dirScopeOf = new Map<string, string>();
   for (const c of doc.components) {
     const m = c.module?.trim();
     if (!m) continue;
+    const scope = scopeKeyFor(c);
     let d = parentDirectory(m);
     while (d) {
-      const set = dirMembers.get(d) ?? new Set<string>();
+      const ck = `${scope}\0${d}`;
+      const set = dirMembers.get(ck) ?? new Set<string>();
       set.add(c.alias);
-      dirMembers.set(d, set);
+      dirMembers.set(ck, set);
+      dirPathOf.set(ck, d);
+      dirScopeOf.set(ck, scope);
       d = parentDirectory(d);
     }
   }
-  const keptDirKeys = new Set<string>();
-  for (const [d, members] of dirMembers) {
-    if (members.size >= 2 || showSingletons) keptDirKeys.add(d);
+  const keptDirs = new Set<string>();
+  for (const [ck, members] of dirMembers) {
+    if (members.size >= 2 || showSingletons) keptDirs.add(ck);
   }
 
   // Files sitting directly in each directory (drives chain compaction below).
@@ -1087,76 +1113,74 @@ export function buildBoundaryLayoutGroupsByPath(
     const m = c.module?.trim();
     if (!m) continue;
     const d = parentDirectory(m);
-    if (d) directFileCount.set(d, (directFileCount.get(d) ?? 0) + 1);
+    if (!d) continue;
+    const ck = `${scopeKeyFor(c)}\0${d}`;
+    directFileCount.set(ck, (directFileCount.get(ck) ?? 0) + 1);
   }
-  // Compact single-child directory chains, mirroring the file tree: a directory
-  // whose only child is a single subdirectory (and which holds no files
-  // directly) is merged into it. `app` → `app/book` renders one `app/book`
-  // frame, not `app` wrapping `book`.
+  const nearestKeptDirCk = (ck: string): string | undefined => {
+    const scope = dirScopeOf.get(ck)!;
+    let a = parentDirectory(dirPathOf.get(ck)!);
+    while (a) {
+      const cand = `${scope}\0${a}`;
+      if (keptDirs.has(cand)) return cand;
+      a = parentDirectory(a);
+    }
+    return undefined;
+  };
+  // Compact single-child directory chains within a scope, mirroring the file
+  // tree: `app` → `app/book` renders one `app/book` frame, not `app` wrapping
+  // `book`.
   let compacting = true;
   while (compacting) {
     compacting = false;
     const childDirsOf = new Map<string, string[]>();
-    for (const d of keptDirKeys) {
-      let a = parentDirectory(d);
-      while (a && !keptDirKeys.has(a)) a = parentDirectory(a);
+    for (const ck of keptDirs) {
+      const a = nearestKeptDirCk(ck);
       if (!a) continue;
       const list = childDirsOf.get(a) ?? [];
-      list.push(d);
+      list.push(ck);
       childDirsOf.set(a, list);
     }
-    for (const d of [...keptDirKeys]) {
-      const childDirs = childDirsOf.get(d) ?? [];
-      if (childDirs.length === 1 && (directFileCount.get(d) ?? 0) === 0) {
-        keptDirKeys.delete(d);
+    for (const ck of [...keptDirs]) {
+      if (
+        (childDirsOf.get(ck) ?? []).length === 1 &&
+        (directFileCount.get(ck) ?? 0) === 0
+      ) {
+        keptDirs.delete(ck);
         compacting = true;
       }
     }
   }
+  const dirLabel = (ck: string): string => {
+    const path = dirPathOf.get(ck)!;
+    const ancestor = nearestKeptDirCk(ck);
+    return ancestor ? path.slice(dirPathOf.get(ancestor)!.length + 1) : path;
+  };
 
-  const nearestKeptDirAncestor = (dirKey: string): string | undefined => {
-    let p = parentDirectory(dirKey);
-    while (p) {
-      if (keptDirKeys.has(p)) return p;
-      p = parentDirectory(p);
+  const moduleRegionByKey = new Map(modules.map((r) => [r.key, r]));
+  // A module's scope is uniform across its members (else undefined → root), so
+  // a module straddling processes is never forced into one.
+  const moduleScope = new Map<string, string | undefined>();
+  for (const r of modules) {
+    const scopes = new Set<string>();
+    for (const a of r.memberAliases) {
+      const c = byAlias.get(a);
+      if (c) scopes.add(scopeKeyFor(c));
     }
-    return undefined;
-  };
-  const dirRegions: SubsystemProcessRegion[] = [...keptDirKeys]
-    .sort()
-    .map((key) => {
-      // Label is the path relative to the enclosing kept directory (which
-      // already carries the prefix): `book` under `app`, or the full collapsed
-      // path `app/book` when the chain was compacted.
-      const ancestor = nearestKeptDirAncestor(key);
-      return {
-        kind: 'directory' as const,
-        key,
-        label: ancestor ? key.slice(ancestor.length + 1) : key,
-        memberAliases: [...(dirMembers.get(key) ?? [])],
-      };
-    });
-  const moduleDirParent = (moduleKey: string): string | undefined => {
+    moduleScope.set(r.key, scopes.size === 1 ? [...scopes][0] : undefined);
+  }
+  const moduleDirCk = (moduleKey: string): string | undefined => {
+    const scope = moduleScope.get(moduleKey);
+    if (scope === undefined) return undefined;
     let d = parentDirectory(moduleKey);
     while (d) {
-      if (keptDirKeys.has(d)) return d;
+      const cand = `${scope}\0${d}`;
+      if (keptDirs.has(cand)) return cand;
       d = parentDirectory(d);
     }
     return undefined;
   };
 
-  const sharedProcessParent = (
-    memberAliases: readonly string[],
-  ): string | undefined => {
-    const seen = new Set<string>();
-    for (const alias of memberAliases) {
-      const p = byAlias.get(alias)?.process?.trim();
-      if (p) seen.add(p);
-    }
-    if (seen.size !== 1) return undefined;
-    const p = [...seen][0]!;
-    return keptProcessKeys.has(p) ? processGroupNodeId(p) : undefined;
-  };
   const sharedPackageParent = (
     memberAliases: readonly string[],
   ): string | undefined => {
@@ -1170,17 +1194,15 @@ export function buildBoundaryLayoutGroupsByPath(
     const pkg = [...seen][0]!;
     return keptPackageKeys.has(pkg) ? packageGroupNodeId(pkg) : undefined;
   };
-  const frameParent = (memberAliases: readonly string[]): string | undefined =>
-    sharedProcessParent(memberAliases) ?? sharedPackageParent(memberAliases);
 
   const moduleGroups: BoundaryLayoutGroup[] = modules.map((r) => {
-    const dirParent = moduleDirParent(r.key);
-    const parentId = dirParent
-      ? directoryGroupNodeId(dirParent)
-      : frameParent(r.memberAliases);
+    const ck = moduleDirCk(r.key);
+    const parentId = ck
+      ? dirGroupId(dirScopeOf.get(ck)!, dirPathOf.get(ck)!)
+      : scopeParentId(moduleScope.get(r.key) ?? 'root');
     // Relative label when nested: `app/book/actions.ts` under `app/book`
     // reads as `actions.ts`. At the root the full module path stays.
-    const label = dirParent ? r.key.slice(dirParent.length + 1) : r.label;
+    const label = ck ? r.key.slice(dirPathOf.get(ck)!.length + 1) : r.label;
     return {
       id: moduleGroupNodeId(r.key),
       memberAliases: [...r.memberAliases],
@@ -1189,41 +1211,46 @@ export function buildBoundaryLayoutGroupsByPath(
     };
   });
 
-  const dirGroupByKey = new Map(dirRegions.map((r) => [r.key, r]));
-  const moduleRegionByKey = new Map(modules.map((r) => [r.key, r]));
-  const dirGroups: BoundaryLayoutGroup[] = dirRegions.map((r) => {
-    const id = directoryGroupNodeId(r.key);
-    const ancestor = nearestKeptDirAncestor(r.key);
+  const dirGroups: BoundaryLayoutGroup[] = [...keptDirs].map((ck) => {
+    const scope = dirScopeOf.get(ck)!;
+    const path = dirPathOf.get(ck)!;
+    const ancestor = nearestKeptDirCk(ck);
     const parentId = ancestor
-      ? directoryGroupNodeId(ancestor)
-      : frameParent(r.memberAliases);
+      ? dirGroupId(dirScopeOf.get(ancestor)!, dirPathOf.get(ancestor)!)
+      : scopeParentId(scope);
     // Immediate children: subdirectories and module frames parented here.
     // Only child *group ids* go in the layout member list — a group's
     // descendant leaves belong to its child groups alone, or ELK sees the
     // same leaf in two compound parents and rejects the layout.
-    const childDirKeys = dirRegions
-      .filter((d) => nearestKeptDirAncestor(d.key) === r.key)
-      .map((d) => d.key);
+    const childDirCks = [...keptDirs].filter((d) => nearestKeptDirCk(d) === ck);
     const childModuleKeys = modules
-      .filter((m) => moduleDirParent(m.key) === r.key)
+      .filter((m) => moduleDirCk(m.key) === ck)
       .map((m) => m.key);
     const claimed = new Set<string>();
-    for (const dk of childDirKeys) {
-      for (const a of dirGroupByKey.get(dk)?.memberAliases ?? []) claimed.add(a);
+    for (const d of childDirCks) {
+      for (const a of dirMembers.get(d) ?? []) claimed.add(a);
     }
     for (const mk of childModuleKeys) {
       for (const a of moduleRegionByKey.get(mk)?.memberAliases ?? []) claimed.add(a);
     }
-    const directLeaves = r.memberAliases.filter((a) => !claimed.has(a));
+    const directLeaves = [...(dirMembers.get(ck) ?? [])].filter(
+      (a) => !claimed.has(a),
+    );
+    const region: SubsystemProcessRegion = {
+      kind: 'directory',
+      key: path,
+      label: dirLabel(ck),
+      memberAliases: [...(dirMembers.get(ck) ?? [])],
+    };
     return {
-      id,
+      id: dirGroupId(scope, path),
       memberAliases: [
-        ...childDirKeys.map(directoryGroupNodeId),
+        ...childDirCks.map((d) => dirGroupId(dirScopeOf.get(d)!, dirPathOf.get(d)!)),
         ...childModuleKeys.map(moduleGroupNodeId),
         ...directLeaves,
       ],
       parentId,
-      region: r,
+      region,
     };
   });
 
@@ -2132,6 +2159,9 @@ export async function buildSubsystemGraph(
         // layered pass place those sibling frames along the horizontal axis
         // while each frame's members stack vertically.
         direction: edges.length > 0 ? 'RIGHT' : 'DOWN',
+        // Edge-less containment: fold the root frames into a column-major grid
+        // so the shape reads closer to square than one long strip.
+        reflowGrid: edges.length === 0,
         nodeSpacing: 60,
         edgeSpacing: 30,
         edgeNodeSpacing: 60,

package/src/utils/elkLayout.ts

@@ -94,6 +94,15 @@ export interface ElkLayoutOptions {
    */
   orderByLine?: boolean;
 
+  /**
+   * Reflow root-level compound frames into a column-major grid after ELK runs:
+   * fill each column top-to-bottom, then start the next column to the right.
+   * Gives an approximately square shape for edge-less containment graphs, which
+   * ELK otherwise packs into one long strip. No effect when edges exist (their
+   * routes would need re-routing).
+   */
+  reflowGrid?: boolean;
+
   /**
    * Compound groups — each becomes an ELK parent whose `memberIds` are laid
    * out inside it. `memberIds` may be leaf node ids or other group ids
@@ -529,6 +538,7 @@ export async function computeElkLayout(
   const edgeLabels = options.edgeLabels;
   const endpointInset = options.endpointInset ?? 0;
   const direction = options.direction ?? 'RIGHT';
+  const reflowGrid = options.reflowGrid === true;
   const orderByLine = options.orderByLine ?? false;
 
   // Build a map of original node positions BEFORE passing to ELK
@@ -1023,6 +1033,102 @@ export async function computeElkLayout(
         return node;
       });
 
+  // Optional column-major grid reflow for edge-less containment graphs. ELK
+  // packs disconnected root frames into one long strip; fold them into a grid
+  // (fill a column top-to-bottom, then start the next column) so the shape
+  // approaches a square. Root frames are moved; their descendants (relative
+  // group bounds / leaf positions) ride along, and absoluteRects is rebased so
+  // hit-testing stays correct.
+  if (reflowGrid && edges.length === 0) {
+    const rootGroupIds: string[] = [];
+    for (const g of groupDefs) {
+      if (!builtGroups.has(g.id)) continue;
+      if (g.parentId && builtGroups.has(g.parentId)) continue;
+      rootGroupIds.push(g.id);
+    }
+    type GridItem = {
+      id: string;
+      kind: 'group' | 'leaf';
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+    };
+    const items: GridItem[] = [];
+    for (const id of rootGroupIds) {
+      const b = groupBounds.get(id);
+      if (b) items.push({ id, kind: 'group', x: b.x, y: b.y, w: b.width, h: b.height });
+    }
+    for (const id of ungroupedElkNodes.map((nd) => nd.id)) {
+      const rel = elkRelativePositions.get(id) ?? { x: 0, y: 0 };
+      const r = absoluteRects.get(id);
+      items.push({ id, kind: 'leaf', x: rel.x, y: rel.y, w: r?.width ?? 160, h: r?.height ?? 60 });
+    }
+    if (items.length > 1) {
+      const count = items.length;
+      const rows = Math.max(1, Math.ceil(Math.sqrt(count)));
+      const cols = Math.ceil(count / rows);
+      const GAP = 80;
+      const PAD = 40;
+      const colW: number[] = new Array(cols).fill(0);
+      const rowH: number[] = new Array(rows).fill(0);
+      items.forEach((it, i) => {
+        const c = Math.floor(i / rows);
+        const r = i % rows;
+        colW[c] = Math.max(colW[c] ?? 0, it.w);
+        rowH[r] = Math.max(rowH[r] ?? 0, it.h);
+      });
+      const colX: number[] = [];
+      let acc = PAD;
+      for (let c = 0; c < cols; c++) {
+        colX[c] = acc;
+        acc += (colW[c] ?? 0) + GAP;
+      }
+      const rowY: number[] = [];
+      acc = PAD;
+      for (let r = 0; r < rows; r++) {
+        rowY[r] = acc;
+        acc += (rowH[r] ?? 0) + GAP;
+      }
+      const shiftAbsSubtree = (id: string, dx: number, dy: number) => {
+        const ar = absoluteRects.get(id);
+        if (ar) absoluteRects.set(id, { ...ar, x: ar.x + dx, y: ar.y + dy });
+        const g = groupById.get(id);
+        if (!g) return;
+        for (const mid of g.memberIds) {
+          if (builtGroups.has(mid)) shiftAbsSubtree(mid, dx, dy);
+          else {
+            const mar = absoluteRects.get(mid);
+            if (mar) absoluteRects.set(mid, { ...mar, x: mar.x + dx, y: mar.y + dy });
+          }
+        }
+      };
+      const movedLeaves = new Map<string, { x: number; y: number }>();
+      items.forEach((it, i) => {
+        const c = Math.floor(i / rows);
+        const r = i % rows;
+        const dx = (colX[c] ?? 0) - it.x;
+        const dy = (rowY[r] ?? 0) - it.y;
+        if (dx === 0 && dy === 0) return;
+        if (it.kind === 'group') {
+          const b = groupBounds.get(it.id);
+          if (b) groupBounds.set(it.id, { ...b, x: b.x + dx, y: b.y + dy });
+          shiftAbsSubtree(it.id, dx, dy);
+        } else {
+          shiftAbsSubtree(it.id, dx, dy);
+          const rel = elkRelativePositions.get(it.id);
+          if (rel) movedLeaves.set(it.id, { x: rel.x + dx, y: rel.y + dy });
+        }
+      });
+      if (movedLeaves.size > 0) {
+        for (const node of resultNodes) {
+          const m = movedLeaves.get(node.id);
+          if (m) (node as { position: { x: number; y: number } }).position = m;
+        }
+      }
+    }
+  }
+
   return {
     nodes: resultNodes,
     edgePaths,