@principal-ai/principal-view-react 0.16.36 → 0.16.38

package/dist/subsystem/paths.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"paths.js","sourceRoot":"","sources":["../../src/subsystem/paths.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.16.36",
+  "version": "0.16.38",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/index.ts

@@ -256,6 +256,18 @@ export {
 export { SubsystemComponentGraph } from './subsystem/SubsystemComponentGraph';
 export type { SubsystemComponentGraphProps } from './subsystem/SubsystemComponentGraph';
 export { MECHANISM_COLOR, KIND_COLOR, MECHANISM_STYLE } from './subsystem/model';
+export {
+  purlRepoKey,
+  purlOwnerName,
+  buildTreePathMapping,
+  buildRepoGroups,
+  repoAvatarUrl,
+} from './subsystem/paths';
+export type {
+  TreeEntry,
+  TreePathMapping,
+  RepoGroup,
+} from './subsystem/paths';
 export { SubsystemFileTree } from './subsystem/SubsystemFileTree';
 export type { SubsystemFileTreeProps } from './subsystem/SubsystemFileTree';
 export { GraphLayoutCover } from './subsystem/GraphLayoutCover';

package/src/stories/SubsystemComponentGraph.stories.tsx

@@ -1087,3 +1087,43 @@ function MermaidDemo() {
 export const MermaidPipeline: Story = {
   render: () => <MermaidDemo />,
 };
+
+// ---------------------------------------------------------------------------
+// Multi-repo: two repos → two sidebar trees, one per repo, each under its own
+// owner-avatar + repo-name header. Exercises buildRepoGroups grouping,
+// cross-repo edges (external stub targets), and per-tree selection.
+// ---------------------------------------------------------------------------
+const coreLibPurl = 'pkg:github/principal-ai/principal-view-core-library';
+const graphifyPurl = 'pkg:github/Graphify-Labs/graphify';
+
+const multiRepoComponents = components([
+  ['resolver', 'resolve.ts', 'module', 'packages/react/src/graphify/resolve.ts', coreLibPurl, 'consumer-side resolution mirroring graphify rewire tiers', 'createGraphifyTypeResolver'],
+  ['reftypes', 'consolidated.ts', 'module', 'packages/react/src/graphify/consolidated.ts', coreLibPurl, 'drill-down payload types carrying ref.nodeId', 'GraphifyParamInfo'],
+  ['detail', 'ComponentDetail.tsx', 'module', 'packages/react/src/subsystem/ComponentDetail.tsx', coreLibPurl, 'declaration-style detail panel with clickable type tokens', 'ComponentDetail'],
+  ['engine', 'engine.py', 'module', 'graphify/extractors/engine.py', graphifyPurl, 'tree-sitter walk emitting references[parameter_type] edges + sourceless stubs', 'ensure_named_node'],
+  ['rewire', 'extract.py', 'module', 'graphify/extract.py', graphifyPurl, 'corpus pass folding unique-label stubs onto definitions', '_rewire_unique_stub_nodes'],
+]);
+
+const multiRepoEdges = edges([
+  ['detail', 'reftypes', 'imports'],
+  ['resolver', 'reftypes', 'imports'],
+  ['resolver', 'engine', 'references'],
+  ['rewire', 'resolver', 'calls'],
+]);
+
+function MultiRepoDemo() {
+  return (
+    <div style={{ width: '100%', height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <SubsystemComponentGraph
+        title="Type-ref resolution across repos"
+        description="Two repos → two file trees. Each tree is scoped to its repo's files and headed by the owner avatar + repo name. Cross-repo edges land on external stubs."
+        components={multiRepoComponents}
+        edges={multiRepoEdges}
+      />
+    </div>
+  );
+}
+
+export const MultiRepoTrees: Story = {
+  render: () => <MultiRepoDemo />,
+};

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -47,6 +47,7 @@ import { GraphLayoutCover } from './GraphLayoutCover';
 import { ComponentDetail } from './ComponentDetail';
 import { FileDrawer } from './FileDrawer';
 import { EdgeLegendModal, MECHANISM_DESCRIPTIONS } from './EdgeLegendModal';
+import { buildRepoGroups, repoAvatarUrl, type RepoGroup } from './paths';
 
 export interface SubsystemComponentGraphProps {
   components: SubsystemComponent[];
@@ -307,29 +308,9 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
     return () => clearTimeout(t);
   }, [baseNodesKey, baseEdgesKey, fitView]);
 
-  // When the file drawer opens/closes the canvas resizes — reframe once the
-  // height transition settles: onto the matching (spotlit) nodes while a file
-  // is open, back to the whole graph when it closes.
-  const prevOpenFileRef = useRef<string | null>(null);
-  useEffect(() => {
-    const prev = prevOpenFileRef.current;
-    prevOpenFileRef.current = openFile;
-    if (!layoutReady || prev === openFile) return;
-    const t = setTimeout(() => {
-      if (openFile) {
-        const ids = xyflowNodesBase
-          .filter((n) => (n.data as { component?: SubsystemComponent } | undefined)?.component?.file === openFile)
-          .map((n) => ({ id: n.id }));
-        if (ids.length > 0) {
-          fitView({ nodes: ids, padding: 0.35, minZoom: 0.05, maxZoom: 2, duration: 250 });
-        }
-      } else {
-        fitView({ padding: 0.1, includeHiddenNodes: false, minZoom: 0.05, maxZoom: 2, duration: 250 });
-      }
-    }, 230);
-    return () => clearTimeout(t);
-  }, [openFile, layoutReady, xyflowNodesBase, fitView]);
-
+  // When the file drawer opens or closes the canvas is resized but the
+  // camera stays put — no refit/zoom. Spotlight + dimming already convey
+  // which nodes belong to the open file.
   const onNodeClick: NodeMouseHandler = useCallback(
     (_e, node: Node) => {
       const comp = (node.data as { component?: SubsystemComponent } | undefined)?.component;
@@ -361,8 +342,22 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
     setSelectedEdgeId(null);
   }, []);
 
-  // Sidebar file-tree click → toggle in the bottom drawer (+ host hook only
-  // when opening, so hosts don't see close events).
+  // Sidebar file trees — one per repo on multi-repo graphs, each under its
+  // own owner-avatar header. Clicking a header collapses that repo's tree.
+  const repoGroups = useMemo(() => buildRepoGroups(components), [components]);
+  const [collapsedRepos, setCollapsedRepos] = useState<Set<string>>(new Set());
+  const toggleRepoCollapsed = useCallback((key: string) => {
+    setCollapsedRepos((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const treeFiles = useMemo(
+    () => repoGroups.groups.flatMap((g) => g.entries.map((e) => e.file)),
+    [repoGroups],
+  );
   const onTreeSelectFile = useCallback(
     (file: string) => {
       if (openFileRef.current === file) {
@@ -415,11 +410,8 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
     return new Set(edgeLabels.map((l) => l.mechanism));
   }, [edgeLabels]);
 
-  // Unique source files across components → sidebar file tree.
-  const files = useMemo(
-    () => Array.from(new Set(components.map((c) => c.file).filter(Boolean))).sort(),
-    [components],
-  );
+  // Unique source files across components → sidebar file trees.
+  const treeFilePaths = treeFiles;
 
   // The hovered node's file (null when not hovering / file-less component).
   const hoveredFile = useMemo(() => {
@@ -455,7 +447,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
   return (
     <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
       {/* Sidebar: scrollable title/description on top, file tree pinned to the bottom half */}
-      {(title || description || sidebarExtra || sidebarAfterDescription || files.length > 0) && (
+      {(title || description || sidebarExtra || sidebarAfterDescription || treeFilePaths.length > 0) && (
         <div
           style={{
             width: 340,
@@ -509,13 +501,52 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
           )}
           {sidebarAfterDescription}
           </div>
-          {files.length > 0 && (
-            <SubsystemFileTree
-              files={files}
-              selectedFile={selected?.file ?? openFile}
-              hoveredFile={hoveredFile}
-              onSelectFile={onTreeSelectFile}
-            />
+          {treeFilePaths.length > 0 && (
+            <div
+              style={{
+                height: '50%',
+                minHeight: 160,
+                flexShrink: 0,
+                borderTop: `1px solid ${theme.colors.border}`,
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+              }}
+            >
+              {repoGroups.groups.map((group, i) => {
+                const groupKey = group.repoKey ?? '__no-repo__';
+                const collapsed = collapsedRepos.has(groupKey);
+                return (
+                  <div
+                    key={groupKey}
+                    style={{
+                      flex: collapsed ? '0 0 auto' : 1,
+                      minHeight: collapsed ? 0 : undefined,
+                      display: 'flex',
+                      flexDirection: 'column',
+                      borderTop: i > 0 ? `1px solid ${theme.colors.border}` : undefined,
+                    }}
+                  >
+                    {repoGroups.multiRepo && (
+                      <RepoGroupHeader
+                        group={group}
+                        collapsed={collapsed}
+                        onToggle={() => toggleRepoCollapsed(groupKey)}
+                      />
+                    )}
+                    {!collapsed && (
+                      <SubsystemFileTree
+                        files={group.entries.map((e) => e.displayPath)}
+                        selectedFile={selected?.file ?? openFile}
+                        hoveredFile={hoveredFile}
+                        onSelectFile={onTreeSelectFile}
+                        headerless={repoGroups.multiRepo}
+                      />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
           )}
         </div>
       )}
@@ -658,6 +689,85 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
   );
 }
 
+/** Sidebar header for one repo's tree: owner avatar + repo name + file count.
+ *  Clicking toggles the tree's visibility. */
+function RepoGroupHeader({
+  group,
+  collapsed,
+  onToggle,
+}: {
+  group: RepoGroup;
+  collapsed: boolean;
+  onToggle: () => void;
+}) {
+  const { theme } = useTheme();
+  const avatar = repoAvatarUrl(group.repoKey);
+  const label = group.repo ?? 'No repo';
+  return (
+    <div
+      role="button"
+      aria-expanded={!collapsed}
+      onClick={(e) => {
+        e.stopPropagation();
+        onToggle();
+      }}
+      title={collapsed ? 'Show files' : 'Hide files'}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: '10px 16px 4px',
+        flexShrink: 0,
+        cursor: 'pointer',
+        userSelect: 'none',
+      }}
+    >
+      {avatar ? (
+        <img
+          src={avatar}
+          alt=""
+          width={16}
+          height={16}
+          loading="lazy"
+          style={{ borderRadius: 4, flexShrink: 0, background: theme.colors.border }}
+        />
+      ) : group.owner ? (
+        <span
+          style={{
+            width: 16,
+            height: 16,
+            borderRadius: 4,
+            flexShrink: 0,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: 9,
+            fontWeight: 700,
+            fontFamily: theme.fonts.monospace,
+            color: theme.colors.text,
+            background: theme.colors.border,
+          }}
+        >
+          {group.owner.charAt(0).toUpperCase()}
+        </span>
+      ) : null}
+      <span
+        style={{
+          fontSize: theme.fontSizes[1],
+          fontFamily: theme.fonts.monospace,
+          color: theme.colors.text,
+          fontWeight: 600,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {label}
+      </span>
+    </div>
+  );
+}
+
 export function SubsystemComponentGraph(props: SubsystemComponentGraphProps) {
   const wrapRef = useRef<HTMLDivElement>(null);
   const [size, setSize] = useState<{ w: number; h: number } | null>(null);

package/src/subsystem/SubsystemFileTree.tsx

@@ -20,10 +20,13 @@ export interface SubsystemFileTreeProps {
   hoveredFile?: string | null;
   /** Called when a file row is clicked; upstream toggles the drawer. */
   onSelectFile?: (file: string) => 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 }: SubsystemFileTreeProps) {
+export function SubsystemFileTree({ files, selectedFile, hoveredFile, onSelectFile, headerless }: SubsystemFileTreeProps) {
   const { theme } = useTheme();
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
   const paths = useMemo(() => Array.from(new Set(files)).sort(), [files]);
@@ -57,26 +60,54 @@ export function SubsystemFileTree({ files, selectedFile, hoveredFile, onSelectFi
     },
   });
 
-  // Reconcile the tree's native selection with the desired highlight: the
-  // hovered node's file while hovering, else the drawer-open file. Deselects
-  // the previous target and scrolls the new one into view.
+  // Reconcile the tree's native selection with the OPEN file only. Hover is
+  // deliberately NOT folded into selection — pierre's model is single-select,
+  // so routing hover through select()/deselect() would steal the highlight
+  // from the open file. The hovered row gets its own transient marker instead.
   const lastSyncedRef = useRef<string | null>(null);
   useEffect(() => {
-    const target = hoveredFile ?? selectedFile ?? null;
-    if (lastSyncedRef.current === target) return;
+    if (lastSyncedRef.current === (selectedFile ?? null)) return;
     const prev = lastSyncedRef.current;
-    lastSyncedRef.current = target;
+    lastSyncedRef.current = selectedFile ?? null;
     suppressSelectRef.current = true;
     try {
       if (prev) model.getItem(prev)?.deselect();
-      if (target) {
-        model.getItem(target)?.select();
-        model.scrollToPath(target);
+      if (selectedFile) {
+        model.getItem(selectedFile)?.select();
+        model.scrollToPath(selectedFile);
       }
     } finally {
       suppressSelectRef.current = false;
     }
-  }, [model, selectedFile, hoveredFile]);
+  }, [model, selectedFile]);
+
+  // Transient hover highlight (e.g. hovering a graph node spotlights its
+  // file), independent of selection. Pierre renders rows inside a shadow
+  // root, so we resolve the row through shadow boundaries and paint an
+  // inline background — document-level <style> tags cannot reach it.
+  const treeRef = useRef<HTMLDivElement | null>(null);
+  const hoveredRowRef = useRef<HTMLElement | null>(null);
+  useEffect(() => {
+    hoveredRowRef.current?.style.removeProperty('background');
+    hoveredRowRef.current = null;
+    const target = hoveredFile ?? null;
+    if (!target || !pathSetRef.current.has(target)) return;
+
+    // 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 el of Array.from(root.querySelectorAll('*'))) {
+        if (el.shadowRoot) roots.push(el.shadowRoot);
+      }
+    }
+  }, [hoveredFile]);
 
   // Re-scope the tree in place when the subsystem's file set changes.
   useEffect(() => {
@@ -101,40 +132,41 @@ export function SubsystemFileTree({ files, selectedFile, hoveredFile, onSelectFi
 
   return (
     <div
+      ref={treeRef}
       onClickCapture={handleContainerClick}
       style={{
-        height: '50%',
-        minHeight: 120,
-        flexShrink: 0,
-        borderTop: `1px solid ${theme.colors.border}`,
+        flex: 1,
+        minHeight: 0,
         display: 'flex',
         flexDirection: 'column',
       }}
     >
-      <div
-        style={{
-          padding: '10px 16px 4px',
-          display: 'flex',
-          alignItems: 'baseline',
-          gap: 6,
-          flexShrink: 0,
-        }}
-      >
-        <span
+      {!headerless && (
+        <div
           style={{
-            fontSize: theme.fontSizes[0] * 0.8,
-            fontFamily: theme.fonts.monospace,
-            textTransform: 'uppercase',
-            color: muted,
-            fontWeight: 600,
+            padding: '10px 16px 4px',
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: 6,
+            flexShrink: 0,
           }}
         >
-          Files
-        </span>
-        <span style={{ fontSize: theme.fontSizes[0] * 0.8, fontFamily: theme.fonts.monospace, color: muted }}>
-          {paths.length}
-        </span>
-      </div>
+          <span
+            style={{
+              fontSize: theme.fontSizes[0] * 0.8,
+              fontFamily: theme.fonts.monospace,
+              textTransform: 'uppercase',
+              color: muted,
+              fontWeight: 600,
+            }}
+          >
+            Files
+          </span>
+          <span style={{ fontSize: theme.fontSizes[0] * 0.8, fontFamily: theme.fonts.monospace, color: muted }}>
+            {paths.length}
+          </span>
+        </div>
+      )}
       <FileTree
         model={model}
         style={

package/src/subsystem/paths.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, test } from 'bun:test';
+import {
+  buildRepoGroups,
+  buildTreePathMapping,
+  purlOwnerName,
+  purlRepoKey,
+  repoAvatarUrl,
+} from './paths';
+
+describe('purlRepoKey', () => {
+  test('strips fragments and whitespace', () => {
+    expect(purlRepoKey('pkg:github/acme/widget#src/x.ts')).toBe('pkg:github/acme/widget');
+    expect(purlRepoKey('  pkg:github/acme/widget ')).toBe('pkg:github/acme/widget');
+    expect(purlRepoKey(undefined)).toBeUndefined();
+    expect(purlRepoKey('#only-a-fragment')).toBeUndefined();
+  });
+});
+
+describe('purlOwnerName', () => {
+  test('extracts the last two path segments', () => {
+    expect(purlOwnerName('pkg:github/acme/widget#src/x.ts')).toBe('acme/widget');
+    expect(purlOwnerName('pkg:npm/@scope/lib')).toBe('@scope/lib');
+  });
+});
+
+describe('buildTreePathMapping', () => {
+  test('single-repo graphs keep bare file paths', () => {
+    const m = buildTreePathMapping([
+      { file: 'src/a.ts', purl: 'pkg:github/acme/widget' },
+      { file: 'src/b.ts', purl: 'pkg:github/acme/widget' },
+    ]);
+    expect(m.multiRepo).toBe(false);
+    expect(m.entries.map((e) => e.displayPath)).toEqual(['src/a.ts', 'src/b.ts']);
+    expect(m.toFile.get('src/a.ts')).toBe('src/a.ts');
+  });
+
+  test('multi-repo graphs prefix entries with owner/name', () => {
+    const m = buildTreePathMapping([
+      { file: 'graphify/ids.py', purl: 'pkg:github/Graphify-Labs/graphify' },
+      { file: 'packages/react/src/x.ts', purl: 'pkg:github/principal-ai/core-lib#packages/react/src/x.ts' },
+    ]);
+    expect(m.multiRepo).toBe(true);
+    expect(m.toFile.get('Graphify-Labs/graphify/graphify/ids.py')).toBe('graphify/ids.py');
+    expect(m.toDisplay.get('packages/react/src/x.ts')).toBe(
+      'principal-ai/core-lib/packages/react/src/x.ts',
+    );
+  });
+
+  test('same-named files in different repos stay distinct', () => {
+    const m = buildTreePathMapping([
+      { file: 'README.md', purl: 'pkg:github/acme/widget' },
+      { file: 'README.md', purl: 'pkg:github/acme/other' },
+    ]);
+    expect(m.entries).toHaveLength(2);
+  });
+
+  test('components without files are skipped; purl-less components stay unprefixed', () => {
+    const m = buildTreePathMapping([
+      { file: 'a.ts', purl: 'pkg:github/acme/widget' },
+      { file: '', purl: 'pkg:github/acme/widget' },
+      { purl: 'pkg:github/acme/widget' },
+      { file: 'loose.ts' },
+    ]);
+    // Two repos' worth of purls? No — the purl-less one has no repo key.
+    expect(m.multiRepo).toBe(false);
+    expect(m.toFile.get('loose.ts')).toBe('loose.ts');
+  });
+});
+
+describe('buildRepoGroups', () => {
+  test('groups by repo preserving first-appearance order', () => {
+    const { multiRepo, groups } = buildRepoGroups([
+      { file: 'a.ts', purl: 'pkg:github/acme/widget' },
+      { file: 'g/x.py', purl: 'pkg:github/Graphify-Labs/graphify' },
+      { file: 'b.ts', purl: 'pkg:github/acme/widget' },
+    ]);
+    expect(multiRepo).toBe(true);
+    expect(groups.map((g) => g.repoKey)).toEqual(['pkg:github/acme/widget', 'pkg:github/Graphify-Labs/graphify']);
+    expect(groups[0]!.owner).toBe('acme');
+    expect(groups[0]!.repo).toBe('widget');
+    expect(groups[0]!.entries.map((e) => e.file)).toEqual(['a.ts', 'b.ts']);
+  });
+
+  test('entries carry bare files (no synthetic prefixes)', () => {
+    const { groups } = buildRepoGroups([
+      { file: 'deep/nested/x.ts', purl: 'pkg:github/acme/widget#deep/nested/x.ts' },
+    ]);
+    expect(groups[0]!.entries[0]).toEqual({ displayPath: 'deep/nested/x.ts', file: 'deep/nested/x.ts' });
+  });
+
+  test('purl-less components land in a trailing unbadged group', () => {
+    const { multiRepo, groups } = buildRepoGroups([
+      { file: 'loose.ts' },
+      { file: 'a.ts', purl: 'pkg:github/acme/widget' },
+    ]);
+    expect(multiRepo).toBe(false);
+    expect(groups).toHaveLength(2);
+    expect(groups[0]!.repoKey).toBeUndefined();
+    expect(groups[1]!.repoKey).toBe('pkg:github/acme/widget');
+  });
+
+  test('single-repo graphs yield one group and multiRepo=false', () => {
+    const { multiRepo, groups } = buildRepoGroups([
+      { file: 'a.ts', purl: 'pkg:github/acme/widget' },
+      { file: 'b.ts', purl: 'pkg:github/acme/widget' },
+    ]);
+    expect(multiRepo).toBe(false);
+    expect(groups).toHaveLength(1);
+  });
+});
+
+describe('repoAvatarUrl', () => {
+  test('github purls map to the owner avatar', () => {
+    expect(repoAvatarUrl('pkg:github/Graphify-Labs/graphify#x/y.py')).toBe(
+      'https://github.com/Graphify-Labs.png?size=64',
+    );
+  });
+
+  test('non-github purls have no avatar', () => {
+    expect(repoAvatarUrl('pkg:npm/@scope/lib')).toBeUndefined();
+    expect(repoAvatarUrl(undefined)).toBeUndefined();
+  });
+});