@principal-ai/principal-view-react 0.16.32 → 0.16.34

package/src/subsystem/SubsystemFileTree.tsx

@@ -0,0 +1,158 @@
+/**
+ * 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 { useEffect, useMemo, useRef } from 'react';
+import type { CSSProperties } from 'react';
+import { FileTree, useFileTree } from '@pierre/trees/react';
+import { useTheme } from '@principal-ade/industry-theme';
+
+export interface SubsystemFileTreeProps {
+  /** Repo-root-relative file paths; duplicates are deduped. */
+  files: string[];
+  /** File to select/highlight (the drawer-open file). */
+  selectedFile?: string | null;
+  /** 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, hoveredFile, onSelectFile }: SubsystemFileTreeProps) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+  const paths = useMemo(() => Array.from(new Set(files)).sort(), [files]);
+
+  // 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);
+    },
+  });
+
+  // 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);
+      }
+    } 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,
+        flexShrink: 0,
+        borderTop: `1px solid ${theme.colors.border}`,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div
+        style={{
+          padding: '10px 16px 4px',
+          display: 'flex',
+          alignItems: 'baseline',
+          gap: 6,
+          flexShrink: 0,
+        }}
+      >
+        <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={
+          {
+            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/model.ts

@@ -132,6 +132,13 @@ export type SubsystemGraphNodeType = 'subsystem-component' | 'subsystem-group';
 
 export interface SubsystemGraphNodeData extends Record<string, unknown> {
   component: SubsystemComponent;
+  /** Set while a file is open in the drawer: true if this node's component
+   *  lives in that file (spotlighted), false otherwise (dimmed). Absent when
+   *  no file is open — render neutrally. */
+  fileMatch?: boolean;
+  /** False hides the click-to-open file chip under the component name.
+   *  Absent/true renders it (default). */
+  showFileBadges?: boolean;
 }
 
 export type SubsystemGraphNode = Node<SubsystemGraphNodeData, SubsystemGraphNodeType>;

package/src/subsystem/nodes.tsx

@@ -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;
 }
@@ -67,11 +69,21 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
   const maxWidth = configuredMax ?? 300;
   // `symbol` is the source of truth; `name` is derived from it consistently.
   const displayName = deriveNameFromSymbol(c.symbol, c.kind, c.name, c.file);
+  // Set while a file is open in the drawer: true → spotlight, false → dim,
+  // absent (no file open) → neutral.
+  const fileMatch = data.fileMatch as boolean | undefined;
+  const showFileBadges = data.showFileBadges !== false;
 
   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);
@@ -90,8 +102,12 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
         padding: '6px 10px',
         borderRadius: 8,
         background: theme.colors.backgroundSecondary ?? theme.colors.background,
-        border: `2px solid ${selected ? theme.colors.primary : color}`,
-        boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
+        border: `2px solid ${selected || fileMatch ? theme.colors.primary : color}`,
+        boxShadow: fileMatch
+          ? `0 1px 4px rgba(0,0,0,0.25), 0 0 12px ${theme.colors.primary}55`
+          : '0 1px 4px rgba(0,0,0,0.25)',
+        opacity: fileMatch === false ? 0.18 : 1,
+        transition: 'opacity 150ms ease',
         cursor: 'pointer',
         fontFamily: theme.fonts.body,
       }}
@@ -110,7 +126,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,
@@ -119,8 +134,10 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
             padding: '1px 6px',
           }}
         >
-          {KIND_LABEL[c.kind] ?? c.kind}
-          {c.purl ? ` · ${c.purl}` : ''}
+          <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>
       )}
@@ -162,9 +179,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)}
@@ -189,7 +204,7 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
         </div>
       )}
 
-      {c.file && (
+      {c.file && showFileBadges && (
         <div
           onClick={(e) => {
             e.stopPropagation();