@principal-ai/subsystems-react 0.43.0 → 0.43.2

package/src/subsystem/SubsystemFileTree.tsx

@@ -18,19 +18,19 @@ export interface SubsystemFileTreeProps {
   /** File to transiently highlight while its node is hovered on the graph;
    *  falls back to `selectedFile` when null. */
   hoveredFile?: string | null;
+  /** Boundary path (folder or file) to transiently highlight — e.g. hovering a
+   *  module/directory frame on the canvas. Matched with or without a trailing
+   *  slash. Takes a back seat to `hoveredFile`. */
+  hoveredFolder?: string | null;
   /** Called when a file row is clicked; upstream toggles the drawer. */
   onSelectFile?: (file: string) => void;
-  /** Called on hover in/out of a file row — directories and non-file rows
-   *  emit null. Pierre exposes no hover API, so this rides a shadow-DOM
-   *  `mouseover` listener (see below). */
-  onHoverFile?: (file: string | null) => void;
   /** Hide the built-in "Files N" header row — used when an upstream repo
    *  header already labels the tree. */
   headerless?: boolean;
 }
 
 /** Fills its parent height by design — pin it with a sized flex container. */
-export function SubsystemFileTree({ files, selectedFile, hoveredFile, onSelectFile, onHoverFile, headerless }: SubsystemFileTreeProps) {
+export function SubsystemFileTree({ files, selectedFile, hoveredFile, hoveredFolder, onSelectFile, headerless }: SubsystemFileTreeProps) {
   const { theme } = useTheme();
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
   const paths = useMemo(() => Array.from(new Set(files)).sort(), [files]);
@@ -42,8 +42,6 @@ export function SubsystemFileTree({ files, selectedFile, hoveredFile, onSelectFi
   pathSetRef.current = pathSet;
   const onSelectFileRef = useRef(onSelectFile);
   onSelectFileRef.current = onSelectFile;
-  const onHoverFileRef = useRef(onHoverFile);
-  onHoverFileRef.current = onHoverFile;
   const selectedFileRef = useRef<string | null>(selectedFile ?? null);
   selectedFileRef.current = selectedFile ?? null;
   // Suppresses onSelectFile while selection is driven programmatically from
@@ -96,59 +94,28 @@ export function SubsystemFileTree({ files, selectedFile, hoveredFile, onSelectFi
   useEffect(() => {
     hoveredRowRef.current?.style.removeProperty('background');
     hoveredRowRef.current = null;
-    const target = hoveredFile ?? null;
-    if (!target || !pathSetRef.current.has(target)) return;
+    const target = hoveredFile ?? hoveredFolder ?? null;
+    if (!target) return;
+    // Files are keyed exact; folder rows may carry a trailing slash. Try both.
+    const candidates = hoveredFile ? [target] : [target, `${target}/`];
 
     // Depth-first walk across shadow roots — handles nested custom elements.
     const roots: Array<Document | ShadowRoot> = [document];
     while (roots.length > 0) {
       const root = roots.shift()!;
-      const row = root.querySelector(`[data-item-path="${CSS.escape(target)}"]`);
-      if (row instanceof HTMLElement) {
-        row.style.background = 'var(--trees-theme-list-hover-bg, rgba(128, 128, 128, 0.25))';
-        hoveredRowRef.current = row;
-        return;
+      for (const candidate of candidates) {
+        const row = root.querySelector(`[data-item-path="${CSS.escape(candidate)}"]`);
+        if (row instanceof HTMLElement) {
+          row.style.background = 'var(--trees-theme-list-hover-bg, rgba(128, 128, 128, 0.25))';
+          hoveredRowRef.current = row;
+          return;
+        }
       }
       for (const el of Array.from(root.querySelectorAll('*'))) {
         if (el.shadowRoot) roots.push(el.shadowRoot);
       }
     }
-  }, [hoveredFile]);
-
-  // Hover notifications. Pierre exposes no hover callback hook, but its rows
-  // carry `data-item-path` / `data-item-type` inside an OPEN shadow root and
-  // it binds no `mouseover`/`mouseleave` handlers, so native mouse events
-  // bubble out to this wrapper. Resolve the row via `composedPath()` (which
-  // crosses the shadow boundary even though `event.target` is retargeted to
-  // the host), then emit the repo-root-relative path. Directories emit null.
-  const lastHoveredRef = useRef<string | null>(null);
-  useEffect(() => {
-    const host = treeRef.current;
-    if (!host) return;
-    const resolveFile = (e: MouseEvent): string | null => {
-      for (const el of e.composedPath()) {
-        if (!(el instanceof HTMLElement) || el.dataset.type !== 'item') continue;
-        if (el.dataset.itemType === 'folder') return null;
-        const raw = el.dataset.itemPath ?? '';
-        const path = raw.endsWith('/') ? raw.slice(0, -1) : raw;
-        return pathSetRef.current.has(path) ? path : null;
-      }
-      return null;
-    };
-    const emit = (file: string | null) => {
-      if (lastHoveredRef.current === file) return;
-      lastHoveredRef.current = file;
-      onHoverFileRef.current?.(file);
-    };
-    const handleOver = (e: MouseEvent) => emit(resolveFile(e));
-    const handleLeave = () => emit(null);
-    host.addEventListener('mouseover', handleOver);
-    host.addEventListener('mouseleave', handleLeave);
-    return () => {
-      host.removeEventListener('mouseover', handleOver);
-      host.removeEventListener('mouseleave', handleLeave);
-    };
-  }, []);
+  }, [hoveredFile, hoveredFolder]);
 
   // Re-scope the tree in place when the subsystem's file set changes.
   useEffect(() => {

package/src/subsystem/model.test.ts

@@ -22,7 +22,9 @@ import {
   boundaryMinWidthForBadge,
   MODULE_BADGE_INSET,
   packageGroupNodeId,
+  directoryGroupNodeId,
   buildBoundaryLayoutGroups,
+  buildBoundaryLayoutGroupsByPath,
   buildSubsystemGraph,
   componentPackageKey,
   deriveNameFromSymbol,
@@ -851,6 +853,152 @@ describe('isConstructsOnlyModel', () => {
       }),
     ).toBe(false);
   });
+
+  test('false when module/process containment frames exist, even with no edges', () => {
+    expect(
+      isConstructsOnlyModel({
+        components: [
+          { alias: 'a', module: 'src/a.ts' },
+          { alias: 'b', module: 'src/b.ts' },
+        ],
+      }),
+    ).toBe(false);
+    expect(
+      isConstructsOnlyModel({
+        components: [{ alias: 'a', process: 'app/server' }],
+      }),
+    ).toBe(false);
+    // Blank/whitespace membership is not a frame.
+    expect(
+      isConstructsOnlyModel({ components: [{ alias: 'a', module: '  ' }] }),
+    ).toBe(true);
+  });
+});
+
+describe('buildBoundaryLayoutGroupsByPath', () => {
+  const pathComps: SubsystemComponent[] = [
+    { alias: 'record', name: 'record', construct: 'type_alias', file: 'src/session/transcript.ts', module: 'src/session/transcript.ts', purl: 'pkg:github/p/app' },
+    { alias: 'parse', name: 'parse', construct: 'function', file: 'src/session/transcript.ts', module: 'src/session/transcript.ts', purl: 'pkg:github/p/app' },
+    { alias: 'tool-name', name: 'toolName', construct: 'function', file: 'src/session/paths.ts', module: 'src/session/paths.ts', purl: 'pkg:github/p/app' },
+    { alias: 'boot', name: 'boot', construct: 'function', file: 'src/host/main.ts', module: 'src/host/main.ts', purl: 'pkg:github/p/app' },
+    { alias: 'store', name: 'store', construct: 'store', file: 'src/host/store.ts', module: 'src/host/store.ts', purl: 'pkg:github/p/app' },
+  ];
+
+  test('derives directory frames and nests modules under them', () => {
+    const groups = buildBoundaryLayoutGroupsByPath(
+      { components: pathComps },
+      { showSingletonFrames: true },
+    );
+    const byId = new Map(groups.map((g) => [g.id, g]));
+
+    expect(byId.has(directoryGroupNodeId('src'))).toBe(true);
+    expect(byId.has(directoryGroupNodeId('src/session'))).toBe(true);
+    expect(byId.has(directoryGroupNodeId('src/host'))).toBe(true);
+
+    // directory → directory nesting
+    expect(byId.get(directoryGroupNodeId('src/session'))?.parentId).toBe(
+      directoryGroupNodeId('src'),
+    );
+    // module → directory nesting
+    expect(byId.get(moduleGroupNodeId('src/session/transcript.ts'))?.parentId).toBe(
+      directoryGroupNodeId('src/session'),
+    );
+    // top directory has no frame above it
+    expect(byId.get(directoryGroupNodeId('src'))?.parentId).toBeUndefined();
+
+    // Labels are relative to the parent frame, not the full path.
+    expect(byId.get(directoryGroupNodeId('src'))?.region.label).toBe('src');
+    expect(byId.get(directoryGroupNodeId('src/session'))?.region.label).toBe('session');
+    expect(byId.get(moduleGroupNodeId('src/session/transcript.ts'))?.region.label).toBe(
+      'transcript.ts',
+    );
+  });
+
+  test('each leaf is claimed by exactly one group (no compound duplicates)', () => {
+    const groups = buildBoundaryLayoutGroupsByPath(
+      { components: pathComps },
+      { showSingletonFrames: true },
+    );
+    const groupIds = new Set(groups.map((g) => g.id));
+    const leafCount = new Map<string, number>();
+    for (const g of groups) {
+      for (const m of g.memberAliases) {
+        // group ids are allowed to repeat (as child references); leaves must not
+        if (groupIds.has(m)) continue;
+        leafCount.set(m, (leafCount.get(m) ?? 0) + 1);
+      }
+    }
+    for (const [alias, n] of leafCount) {
+      expect(n, `${alias} claimed ${n} times`).toBe(1);
+    }
+  });
+
+  test('compacts single-child directory chains (app → app/book)', () => {
+    const comps: SubsystemComponent[] = [
+      { alias: 'page', name: 'page', construct: 'function', file: 'app/book/page.tsx', module: 'app/book/page.tsx', purl: 'pkg:github/p/app' },
+      { alias: 'actions', name: 'actions', construct: 'function', file: 'app/book/actions.ts', module: 'app/book/actions.ts', purl: 'pkg:github/p/app' },
+      { alias: 'lib-a', name: 'a', construct: 'function', file: 'lib/a.ts', module: 'lib/a.ts', purl: 'pkg:github/p/app' },
+      { alias: 'lib-b', name: 'b', construct: 'function', file: 'lib/b.ts', module: 'lib/b.ts', purl: 'pkg:github/p/app' },
+    ];
+    const groups = buildBoundaryLayoutGroupsByPath(
+      { components: comps },
+      { showSingletonFrames: true },
+    );
+    const ids = new Set(groups.map((g) => g.id));
+    // `app` has a single child dir and no direct files → merged into `app/book`.
+    expect(ids.has(directoryGroupNodeId('app'))).toBe(false);
+    expect(ids.has(directoryGroupNodeId('app/book'))).toBe(true);
+    const appBook = groups.find((g) => g.id === directoryGroupNodeId('app/book'))!;
+    expect(appBook.parentId).toBeUndefined();
+    expect(appBook.region.label).toBe('app/book');
+    expect(ids.has(directoryGroupNodeId('lib'))).toBe(true);
+  });
+
+  test('module directories are scoped to their process (process stays primary)', () => {
+    const comps: SubsystemComponent[] = [
+      { alias: 'page', name: 'page', construct: 'function', file: 'app/book/page.tsx', module: 'app/book/page.tsx', process: 'web/client', purl: 'pkg:github/p/app' },
+      { alias: 'a1', name: 'a1', construct: 'function', file: 'app/book/actions.ts', module: 'app/book/actions.ts', process: 'web/server', purl: 'pkg:github/p/app' },
+      { alias: 'a2', name: 'a2', construct: 'function', file: 'app/book/actions.ts', module: 'app/book/actions.ts', process: 'web/server', purl: 'pkg:github/p/app' },
+    ];
+    const groups = buildBoundaryLayoutGroupsByPath(
+      { components: comps },
+      { showSingletonFrames: true },
+    );
+    const client = groups.find((g) => g.id === processGroupNodeId('web/client'))!;
+    const server = groups.find((g) => g.id === processGroupNodeId('web/server'))!;
+    expect(client).toBeDefined();
+    expect(server).toBeDefined();
+
+    const clientDirs = groups.filter(
+      (g) => g.region.kind === 'directory' && g.parentId === processGroupNodeId('web/client'),
+    );
+    const serverDirs = groups.filter(
+      (g) => g.region.kind === 'directory' && g.parentId === processGroupNodeId('web/server'),
+    );
+    // Same folder path is split per process — separate, scoped frames.
+    expect(clientDirs.map((g) => g.region.key)).toEqual(['app/book']);
+    expect(serverDirs.map((g) => g.region.key)).toEqual(['app/book']);
+    expect(clientDirs[0]!.id).not.toBe(serverDirs[0]!.id);
+    // Process frames own those directories as children (not dropped/empty).
+    expect(client.memberAliases).toContain(clientDirs[0]!.id);
+    expect(server.memberAliases).toContain(serverDirs[0]!.id);
+  });
+
+  test('exact mode adds no directory frames', () => {
+    const groups = buildBoundaryLayoutGroups(
+      { components: pathComps },
+      { showSingletonFrames: true, moduleNesting: 'exact' },
+    );
+    expect(groups.some((g) => g.region.kind === 'directory')).toBe(false);
+  });
+
+  test('path mode is selected by the moduleNesting option', () => {
+    const groups = buildBoundaryLayoutGroups(
+      { components: pathComps },
+      { showSingletonFrames: true, moduleNesting: 'path' },
+    );
+    expect(groups.some((g) => g.region.kind === 'directory')).toBe(true);
+  });
 });
 
 describe('describeConstructBreakdown', () => {