@principal-ai/principal-view-react 0.16.33 → 0.16.35

package/src/subsystem/SubsystemFileTree.tsx

@@ -1,161 +1,107 @@
 /**
- * SubsystemFileTree — read-only folder/file tree derived from the unique
- * source files of a subsystem's components. Rendered in the bottom half of
- * the SubsystemComponentGraph sidebar as a navigation aid.
+ * SubsystemFileTree — sidebar file tree for a subsystem's components, built
+ * on @pierre/trees following the panel repo's SessionFileTreePanel pattern:
+ * init-once options + latest-value refs, and a suppress flag around
+ * programmatic selection so `onSelectionChange` echoes don't re-open files.
  */
 
-import { useMemo, useState } from 'react';
-import type { ReactNode } from 'react';
-import { ChevronDown, ChevronRight, FileText, Folder, FolderOpen } from 'lucide-react';
+import { useEffect, useMemo, useRef } from 'react';
+import type { CSSProperties } from 'react';
+import { FileTree, useFileTree } from '@pierre/trees/react';
 import { useTheme } from '@principal-ade/industry-theme';
 
-interface TreeEntry {
-  name: string;
-  path: string;
-  isFile: boolean;
-  children: Map<string, TreeEntry>;
-}
-
-/** Build a nested tree from repo-root-relative file paths (deduped). */
-export function buildFileTree(files: string[]): TreeEntry {
-  const root: TreeEntry = { name: '', path: '', isFile: false, children: new Map() };
-  for (const file of [...new Set(files)].sort()) {
-    const segments = file.split('/').filter(Boolean);
-    let node = root;
-    segments.forEach((segment, index) => {
-      const isFile = index === segments.length - 1;
-      const path = node.path ? `${node.path}/${segment}` : segment;
-      let child = node.children.get(segment);
-      if (!child || child.isFile !== isFile) {
-        child = { name: segment, path, isFile, children: new Map() };
-        node.children.set(segment, child);
-      }
-      node = child;
-    });
-  }
-  return root;
-}
-
-function sortEntries(node: TreeEntry): TreeEntry[] {
-  return Array.from(node.children.values()).sort((a, b) => {
-    if (a.isFile !== b.isFile) return a.isFile ? 1 : -1;
-    return a.name.localeCompare(b.name);
-  });
-}
-
 export interface SubsystemFileTreeProps {
   /** Repo-root-relative file paths; duplicates are deduped. */
   files: string[];
-  /** File to highlight (e.g. the selected component's file). */
+  /** File to select/highlight (the drawer-open file). */
   selectedFile?: string | null;
-  /** Called when a file row is clicked. */
+  /** File to transiently highlight while its node is hovered on the graph;
+   *  falls back to `selectedFile` when null. */
+  hoveredFile?: string | null;
+  /** Called when a file row is clicked; upstream toggles the drawer. */
   onSelectFile?: (file: string) => void;
 }
 
 /** Fills its parent height by design — pin it with a sized flex container. */
-export function SubsystemFileTree({ files, selectedFile, onSelectFile }: SubsystemFileTreeProps) {
+export function SubsystemFileTree({ files, selectedFile, hoveredFile, onSelectFile }: SubsystemFileTreeProps) {
   const { theme } = useTheme();
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
-  const root = useMemo(() => buildFileTree(files), [files]);
-  const uniqueCount = useMemo(() => new Set(files).size, [files]);
-  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
-  const [hovered, setHovered] = useState<string | null>(null);
+  const paths = useMemo(() => Array.from(new Set(files)).sort(), [files]);
 
-  const toggleFolder = (path: string) => {
-    setCollapsed((prev) => {
-      const next = new Set(prev);
-      if (next.has(path)) next.delete(path);
-      else next.add(path);
-      return next;
-    });
-  };
+  // Latest-value refs so the stable `onSelectionChange` closure never goes
+  // stale — `useFileTree` reads its options once on init.
+  const pathSet = useMemo(() => new Set(paths), [paths]);
+  const pathSetRef = useRef(pathSet);
+  pathSetRef.current = pathSet;
+  const onSelectFileRef = useRef(onSelectFile);
+  onSelectFileRef.current = onSelectFile;
+  const selectedFileRef = useRef<string | null>(selectedFile ?? null);
+  selectedFileRef.current = selectedFile ?? null;
+  // Suppresses onSelectFile while selection is driven programmatically from
+  // the drawer state (`selectedFile`) — no synthetic open/close events.
+  const suppressSelectRef = useRef(false);
+  const initialPaths = useRef(paths);
+
+  const { model } = useFileTree({
+    paths: initialPaths.current,
+    initialExpansion: 'open',
+    onSelectionChange: (selected) => {
+      if (suppressSelectRef.current) return;
+      const raw = selected[selected.length - 1] ?? selected[0];
+      if (!raw) return;
+      // Directory rows carry a trailing slash; only emit for real files.
+      const path = raw.endsWith('/') ? raw.slice(0, -1) : raw;
+      if (!pathSetRef.current.has(path)) return;
+      // Includes re-clicks on the open row — upstream toggles it closed.
+      onSelectFileRef.current?.(path);
+    },
+  });
 
-  const renderEntries = (node: TreeEntry, depth: number): ReactNode[] =>
-    sortEntries(node).map((child) => {
-      if (child.isFile) {
-        const isSelected = child.path === selectedFile;
-        return (
-          <button
-            key={child.path}
-            type="button"
-            onClick={() => onSelectFile?.(child.path)}
-            onMouseEnter={() => setHovered(child.path)}
-            onMouseLeave={() => setHovered((prev) => (prev === child.path ? null : prev))}
-            title={child.path}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 5,
-              width: '100%',
-              padding: '1px 6px',
-              border: 'none',
-              borderRadius: 4,
-              background: isSelected || hovered === child.path
-                ? theme.colors.border
-                : 'transparent',
-              color: theme.colors.text,
-              fontWeight: isSelected ? 600 : 400,
-              fontFamily: theme.fonts.monospace,
-              fontSize: theme.fontSizes[0],
-              lineHeight: '20px',
-              textAlign: 'left',
-              cursor: 'pointer',
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-            }}
-          >
-            <span style={{ width: 12, flexShrink: 0 }} />
-            <FileText size={11} style={{ flexShrink: 0, opacity: 0.8 }} />
-            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{child.name}</span>
-          </button>
-        );
+  // 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.
+  const lastSyncedRef = useRef<string | null>(null);
+  useEffect(() => {
+    const target = hoveredFile ?? selectedFile ?? null;
+    if (lastSyncedRef.current === target) return;
+    const prev = lastSyncedRef.current;
+    lastSyncedRef.current = target;
+    suppressSelectRef.current = true;
+    try {
+      if (prev) model.getItem(prev)?.deselect();
+      if (target) {
+        model.getItem(target)?.select();
+        model.scrollToPath(target);
       }
-      const isCollapsed = collapsed.has(child.path);
-      return (
-        <div key={child.path}>
-          <button
-            type="button"
-            onClick={() => toggleFolder(child.path)}
-            onMouseEnter={() => setHovered(child.path)}
-            onMouseLeave={() => setHovered((prev) => (prev === child.path ? null : prev))}
-            title={child.path}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 5,
-              width: '100%',
-              padding: '1px 6px',
-              border: 'none',
-              borderRadius: 4,
-              background: hovered === child.path ? theme.colors.border : 'transparent',
-              color: muted,
-              fontFamily: theme.fonts.monospace,
-              fontSize: theme.fontSizes[0],
-              lineHeight: '20px',
-              textAlign: 'left',
-              cursor: 'pointer',
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-            }}
-          >
-            <span style={{ width: 12, flexShrink: 0, display: 'inline-flex', justifyContent: 'center' }}>
-              {isCollapsed ? <ChevronRight size={10} /> : <ChevronDown size={10} />}
-            </span>
-            {isCollapsed ? <Folder size={11} style={{ flexShrink: 0 }} /> : <FolderOpen size={11} style={{ flexShrink: 0 }} />}
-            <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{child.name}</span>
-          </button>
-          {!isCollapsed && (
-            <div style={{ paddingLeft: 12 }}>
-              {renderEntries(child, depth + 1)}
-            </div>
-          )}
-        </div>
-      );
-    });
+    } finally {
+      suppressSelectRef.current = false;
+    }
+  }, [model, selectedFile, hoveredFile]);
+
+  // Re-scope the tree in place when the subsystem's file set changes.
+  useEffect(() => {
+    model.resetPaths(paths);
+  }, [model, paths]);
+
+  // Pierre emits no selection change when the clicked row is already
+  // selected — detect re-clicks on the open file's row via focus and let
+  // upstream toggle the drawer closed.
+  const handleContainerClick = () => {
+    const focused = model.getFocusedPath();
+    if (!focused) return;
+    const path = focused.endsWith('/') ? focused.slice(0, -1) : focused;
+    if (path !== selectedFileRef.current) return;
+    suppressSelectRef.current = true;
+    try {
+      onSelectFileRef.current?.(path);
+    } finally {
+      suppressSelectRef.current = false;
+    }
+  };
 
   return (
     <div
+      onClickCapture={handleContainerClick}
       style={{
         height: '50%',
         minHeight: 120,
@@ -186,12 +132,27 @@ export function SubsystemFileTree({ files, selectedFile, onSelectFile }: Subsyst
           Files
         </span>
         <span style={{ fontSize: theme.fontSizes[0] * 0.8, fontFamily: theme.fonts.monospace, color: muted }}>
-          {uniqueCount}
+          {paths.length}
         </span>
       </div>
-      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 8px 8px' }}>
-        {renderEntries(root, 0)}
-      </div>
+      <FileTree
+        model={model}
+        style={
+          {
+            flex: 1,
+            minHeight: 0,
+            '--trees-padding-inline-override': '8px',
+            '--trees-bg-override': 'transparent',
+            '--trees-fg-override': theme.colors.text,
+            '--trees-fg-muted-override': muted,
+            '--trees-accent-override': theme.colors.primary,
+            '--trees-font-family-override': theme.fonts.monospace,
+            '--trees-font-size-override': `${theme.fontSizes[0]}px`,
+            '--trees-theme-list-hover-bg': theme.colors.border,
+            '--trees-theme-list-active-selection-bg': theme.colors.border,
+          } as CSSProperties
+        }
+      />
     </div>
   );
 }

package/src/subsystem/nodes.tsx

@@ -2,8 +2,8 @@
  * Subsystem component/group node + edge renderers.
  *
  * Lightweight, purpose-built for the subsystem component graph: a component
- * renders its name (kind-tagged, colored by package) plus its symbol/purpose
- * and a click-to-open file chip. Groups render as package containers. Clicking
+ * renders its name (kind-tagged, colored by package) plus its symbol/purpose.
+ * Groups render as package containers. Clicking
  * a component calls `onSelect` (to open the entry point / file).
  */
 
@@ -50,6 +50,8 @@ export interface SubsystemGraphCallbacks {
   onSelect?: (componentId: string) => void;
   /** Click an edge (or its label) — select the relationship. */
   onEdgeSelect?: (edgeId: string) => void;
+  /** Hover a component (null on leave) — associates it with the file tree. */
+  onHover?: (componentId: string | null) => void;
   /** Upper bound for node width; nodes grow with content up to this, then wrap. */
   maxNodeWidth?: number;
 }
@@ -73,8 +75,14 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
 
   return (
     <div
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
+      onMouseEnter={() => {
+        setHover(true);
+        SUBSYSTEM_CALLBACKS.onHover?.(c.id);
+      }}
+      onMouseLeave={() => {
+        setHover(false);
+        SUBSYSTEM_CALLBACKS.onHover?.(null);
+      }}
       onClick={(e) => {
         e.stopPropagation();
         SUBSYSTEM_CALLBACKS.onSelect?.(c.id);
@@ -117,7 +125,6 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
             whiteSpace: 'nowrap',
             fontSize: theme.fontSizes[0] * 0.8,
             fontFamily: theme.fonts.monospace,
-            textTransform: 'uppercase',
             letterSpacing: 0.5,
             color,
             background: theme.colors.background,
@@ -126,7 +133,10 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
             padding: '1px 6px',
           }}
         >
-          {KIND_LABEL[c.kind] ?? c.kind}
+          <span style={{ textTransform: 'uppercase' }}>
+            {KIND_LABEL[c.kind] ?? c.kind}
+          </span>
+          {c.file ? ` · ${c.file.split('/').pop()}` : ''}
           {c.capture && c.capture !== 'edited' ? ` · ${c.capture}` : ''}
         </div>
       )}
@@ -168,9 +178,7 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
           whiteSpace: 'normal',
           overflowWrap: 'anywhere',
           maxWidth: '100%',
-          // Types get a serif name to distinguish them from runtime units.
-          fontFamily:
-            c.kind === 'type' ? 'Georgia, "Times New Roman", serif' : theme.fonts.body,
+          fontFamily: theme.fonts.body,
         }}
       >
         {breakWords(displayName)}
@@ -195,32 +203,6 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
         </div>
       )}
 
-      {c.file && (
-        <div
-          onClick={(e) => {
-            e.stopPropagation();
-            SUBSYSTEM_CALLBACKS.onSelect?.(c.id);
-          }}
-          style={{
-            alignSelf: 'center',
-            marginTop: 3,
-            fontSize: theme.fontSizes[0] * 0.78,
-            fontFamily: theme.fonts.monospace,
-            color: theme.colors.primary,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: 4,
-            padding: '1px 5px',
-            cursor: 'pointer',
-            maxWidth: '100%',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {c.file.split('/').pop()}
-        </div>
-      )}
-
       <Handle type="target" position={Position.Left} style={{ opacity: 0 }} />
       <Handle type="source" position={Position.Right} style={{ opacity: 0 }} />
     </div>