@principal-ai/principal-view-react 0.16.37 → 0.16.39

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -44,10 +44,10 @@ import {
 import { SubsystemComponentNode, SubsystemEdge, SUBSYSTEM_CALLBACKS } from './nodes';
 import { SubsystemFileTree } from './SubsystemFileTree';
 import { GraphLayoutCover } from './GraphLayoutCover';
-import { ComponentDetail } from './ComponentDetail';
+import { ComponentDeclaration } from './ComponentDeclaration';
 import { FileDrawer } from './FileDrawer';
 import { EdgeLegendModal, MECHANISM_DESCRIPTIONS } from './EdgeLegendModal';
-import { buildTreePathMapping } from './paths';
+import { buildRepoGroups, repoAvatarUrl, type RepoGroup } from './paths';
 
 export interface SubsystemComponentGraphProps {
   components: SubsystemComponent[];
@@ -308,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;
@@ -362,14 +342,24 @@ 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). The tree shows
-  // repo-prefixed display paths on multi-repo graphs; map back to the
-  // component's own `file` before touching drawer/host state.
-  const treeMapping = useMemo(() => buildTreePathMapping(components), [components]);
+  // 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(
-    (displayPath: string) => {
-      const file = treeMapping.toFile.get(displayPath) ?? displayPath;
+    (file: string) => {
       if (openFileRef.current === file) {
         setOpenFile(null);
         return;
@@ -377,7 +367,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
       setOpenFile(file);
       onFileSelect?.(file);
     },
-    [treeMapping, onFileSelect],
+    [onFileSelect],
   );
 
   // Detail-panel links: related-name clicks select the matching component —
@@ -420,12 +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. Multi-repo
-  // graphs render `<owner>/<name>/…` display paths, grouped by repo.
-  const treeFilePaths = useMemo(
-    () => treeMapping.entries.map((e) => e.displayPath).sort(),
-    [treeMapping],
-  );
+  // 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(() => {
@@ -516,23 +502,60 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
           {sidebarAfterDescription}
           </div>
           {treeFilePaths.length > 0 && (
-            <SubsystemFileTree
-              files={treeFilePaths}
-              selectedFile={
-                treeMapping.toDisplay.get(selected?.file ?? openFile ?? '') ??
-                selected?.file ??
-                openFile ??
-                null
-              }
-              hoveredFile={hoveredFile ? (treeMapping.toDisplay.get(hoveredFile) ?? hoveredFile) : null}
-              onSelectFile={onTreeSelectFile}
-            />
+            <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>
       )}
       
       {/* Graph area */}
       <div style={{ flex: 1, position: 'relative', display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+        {/* Canvas box — the edge-label overlay and legend anchor here, so
+            overlays shift with the canvas, not the labels. */}
+        <div style={{ position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
         {/* Edge-label overlay — sits above the ReactFlow pane so clicks land. */}
         {showEdgeLabels !== false && (
         <div
@@ -646,18 +669,38 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
           Legend
         </button>
       )}
-      <EdgeLegendModal
-        open={legendOpen}
-        mechanisms={usedMechanisms}
-        onClose={() => setLegendOpen(false)}
-      />
-      {selected && (
-        <ComponentDetail
-          component={selected}
-          onOpenFile={onTreeSelectFile}
-          onRelatedSelect={resolveRelatedComponent}
+        {/* Selected-component declaration — floating card over the canvas
+            (top-right, clear of the top-left legend button). The graph never
+            moves for it. */}
+        {selected && (
+          <div
+            style={{
+              position: 'absolute',
+              top: 10,
+              right: 10,
+              zIndex: 8,
+              maxWidth: 'min(560px, 70%)',
+              maxHeight: '46%',
+              overflowY: 'auto',
+              background: theme.colors.background,
+              border: `1px solid ${theme.colors.border}`,
+              borderRadius: 8,
+              boxShadow: '0 8px 24px rgba(0,0,0,0.35)',
+            }}
+          >
+            <ComponentDeclaration
+              component={selected}
+              onOpenFile={onTreeSelectFile}
+              onRelatedSelect={resolveRelatedComponent}
+            />
+          </div>
+        )}
+        </div>
+        <EdgeLegendModal
+          open={legendOpen}
+          mechanisms={usedMechanisms}
+          onClose={() => setLegendOpen(false)}
         />
-      )}
       <FileDrawer file={openFile} onClose={() => setOpenFile(null)}>
         <DrawerContent render={renderDrawerContent} file={openFile} />
       </FileDrawer>
@@ -669,6 +712,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

@@ -1,5 +1,11 @@
 import { describe, expect, test } from 'bun:test';
-import { buildTreePathMapping, purlOwnerName, purlRepoKey } from './paths';
+import {
+  buildRepoGroups,
+  buildTreePathMapping,
+  purlOwnerName,
+  purlRepoKey,
+  repoAvatarUrl,
+} from './paths';
 
 describe('purlRepoKey', () => {
   test('strips fragments and whitespace', () => {
@@ -60,3 +66,58 @@ describe('buildTreePathMapping', () => {
     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();
+  });
+});

package/src/subsystem/paths.ts

@@ -67,3 +67,61 @@ export function buildTreePathMapping(components: ReadonlyArray<{ file?: string;
   }
   return { entries, multiRepo, toFile, toDisplay };
 }
+
+// ---------------------------------------------------------------------------
+// Per-repo tree grouping — one sidebar tree per repo, each under its own
+// styled header (owner avatar + repo name).
+// ---------------------------------------------------------------------------
+
+export interface RepoGroup {
+  /** Purl repo key (`pkg:github/owner/name`) — undefined for purl-less components. */
+  repoKey?: string;
+  /** `owner` segment of the purl, when present. */
+  owner?: string;
+  /** Repository name segment of the purl, when present. */
+  repo?: string;
+  /** The group's files, bare `file` values (each tree scopes its own paths). */
+  entries: TreeEntry[];
+}
+
+/**
+ * Group components by repo for the multi-tree sidebar. Groups preserve
+ * first-appearance order; purl-less components land in a trailing unbadged
+ * group. Entries carry bare `file` values — separate trees scope their own
+ * path sets, so no synthetic prefixes are needed.
+ */
+export function buildRepoGroups(components: ReadonlyArray<{ file?: string; purl?: string }>): {
+  multiRepo: boolean;
+  groups: RepoGroup[];
+} {
+  const withFiles = components.filter((c) => c.file);
+  const repos = new Set(
+    withFiles.map((c) => purlRepoKey(c.purl)).filter((k): k is string => !!k),
+  );
+  const multiRepo = repos.size > 1;
+
+  const byKey = new Map<string, RepoGroup>();
+  const order: Array<string | undefined> = [];
+  for (const c of withFiles) {
+    const key = purlRepoKey(c.purl);
+    let group = byKey.get(key ?? '');
+    if (!group) {
+      const ownerName = key ? purlOwnerName(c.purl) : undefined;
+      const [owner, repo] = ownerName?.split('/') ?? [];
+      group = { repoKey: key, owner, repo, entries: [] };
+      byKey.set(key ?? '', group);
+      order.push(key);
+    }
+    if (!group.entries.some((e) => e.file === c.file)) {
+      group.entries.push({ displayPath: c.file!, file: c.file! });
+    }
+  }
+  return { multiRepo, groups: order.map((k) => byKey.get(k ?? '')!) };
+}
+
+/** GitHub owner-avatar URL for a purl, or undefined for non-github hosts. */
+export function repoAvatarUrl(purl: string | undefined): string | undefined {
+  const key = purlRepoKey(purl);
+  const match = key?.match(/^pkg:github\/([^/]+)\//);
+  return match ? `https://github.com/${match[1]}.png?size=64` : undefined;
+}