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

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -32,6 +32,7 @@ import {
   applyNodeChanges,
 } from '@xyflow/react';
 import { useTheme } from '@principal-ade/industry-theme';
+import { X } from 'lucide-react';
 import { IndustryMarkdownSlide } from 'themed-markdown';
 import {
   buildSubsystemGraph,
@@ -44,6 +45,8 @@ import {
 } from './model';
 import type { GraphifyComponentDetail } from '../graphify';
 import { SubsystemComponentNode, SubsystemEdge, SUBSYSTEM_CALLBACKS } from './nodes';
+import { SubsystemFileTree } from './SubsystemFileTree';
+import { GraphLayoutCover } from './GraphLayoutCover';
 
 const MECHANISM_DESCRIPTIONS: [SubsystemEdgeMechanism, string, boolean][] = [
   ['imports', 'import statement (code-level dependency)', true],
@@ -79,6 +82,30 @@ export interface SubsystemComponentGraphProps {
   title?: string;
   /** Markdown description rendered in the sidebar. */
   description?: string;
+  /** Rendered over the graph canvas only (not the title/legend sidebar). */
+  canvasOverlay?: ReactNode;
+  /** Extra controls at the top of the title/legend sidebar. */
+  sidebarExtra?: ReactNode;
+  /** Rendered in the sidebar under the description (e.g. selection inspector). */
+  sidebarAfterDescription?: ReactNode;
+  /**
+   * Host-injected reader/renderer for the bottom file drawer, keyed by
+   * repo-root-relative path. Opening happens on node click (component with a
+   * `file`) and sidebar file-tree click. Keeps this package free of fs and
+   * code-view dependencies.
+   */
+  renderFileViewer?: (file: string) => ReactNode;
+  /**
+   * Legacy component-keyed variant, kept for backward compatibility. When
+   * `renderFileViewer` is absent, drawer content resolves via the first
+   * component whose `file` matches the opened path.
+   */
+  renderFileView?: (component: SubsystemComponent) => ReactNode;
+  /**
+   * Called when a file in the sidebar file tree is clicked (repo-root-relative
+   * path). The tree is derived from the components' `file` values.
+   */
+  onFileSelect?: (file: string) => void;
 }
 
 const nodeTypes: NodeTypes = {
@@ -93,7 +120,7 @@ interface InnerProps extends SubsystemComponentGraphProps {
   measured: { w: number; h: number } | null;
 }
 
-function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, title, description }: InnerProps) {
+function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured, maxNodeWidth, showEdgeLabels, title, description, canvasOverlay, sidebarExtra, sidebarAfterDescription, renderFileView, renderFileViewer, onFileSelect }: InnerProps) {
   const { theme } = useTheme();
   const { fitView } = useReactFlow();
   const viewport = useViewport();
@@ -103,10 +130,15 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
   });
   const [layoutReady, setLayoutReady] = useState(false);
   const [selected, setSelected] = useState<SubsystemComponent | null>(null);
+  // File currently shown in the bottom drawer (repo-root-relative path).
+  const [openFile, setOpenFile] = useState<string | null>(null);
   // Ref mirror of `selected` so the SUBSYSTEM_CALLBACKS click handler (a
   // closure over the effect deps) can toggle without a stale value.
   const selectedRef = useRef<SubsystemComponent | null>(null);
   selectedRef.current = selected;
+  // Ref mirror of `openFile` for the tree-click toggle.
+  const openFileRef = useRef<string | null>(null);
+  openFileRef.current = openFile;
 
   // Pass 1: build with estimated widths so React Flow can measure the DOM.
   // The pane stays hidden until Pass 2 completes.
@@ -181,6 +213,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
       const comp = components.find((c) => c.id === id);
       if (comp) {
         // Clicking the already-selected node unselects it (toggle off).
+        // Selection is independent of the file drawer — nodes never open it.
         if (selectedRef.current?.id === comp.id) {
           setSelected(null);
           setSelectedEdgeId(null);
@@ -204,6 +237,20 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
   const xyflowNodesBase = nodes as Node[];
   const baseEdges = convertedEdges as Edge[];
 
+  // While a file is open in the drawer, tag each node with whether its
+  // component lives in that file — the node renderer spotlights matches and
+  // dims non-matches (mirrors the edge-dimming behavior on selection).
+  const dispNodes = useMemo(() => {
+    if (!openFile) return xyflowNodesBase;
+    return xyflowNodesBase.map((n) => {
+      const comp = (n.data as { component?: SubsystemComponent } | undefined)?.component;
+      return {
+        ...n,
+        data: { ...(n.data as object), fileMatch: comp?.file === openFile },
+      };
+    });
+  }, [xyflowNodesBase, openFile]);
+
   const baseNodesKey = useMemo(() => nodes.map((n) => n.id).sort().join(','), [nodes]);
   const baseEdgesKey = useMemo(
     () => convertedEdges.map((e) => e.id).sort().join(','),
@@ -236,7 +283,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
           pendingMeasuredRef.current = true;
         }
       }
-      const result = applyNodeChanges(changes, xyflowNodesBase);
+      const result = applyNodeChanges(changes, dispNodes);
       // After applying changes, check if we should trigger pass 2.
       if (pendingMeasuredRef.current) {
         // Use microtask so the state update from applyNodeChanges commits first.
@@ -244,7 +291,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
       }
       return result;
     },
-    [xyflowNodesBase, triggerPass2],
+    [dispNodes, triggerPass2],
   );
   const onEdgesChange = useCallback(
     (_changes: EdgeChange[]) => dispEdges,
@@ -258,12 +305,36 @@ 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]);
+
   const onNodeClick: NodeMouseHandler = useCallback(
     (_e, node: Node) => {
       const comp = (node.data as { component?: SubsystemComponent } | undefined)?.component;
       setSelectedEdgeId(null);
       if (node.type === 'subsystem-component' && comp) {
         // Clicking the already-selected node unselects it (toggle off).
+        // Selection is independent of the file drawer — nodes never open it.
         if (selected?.id === comp.id) {
           setSelected(null);
           return;
@@ -288,6 +359,20 @@ 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).
+  const onTreeSelectFile = useCallback(
+    (file: string) => {
+      if (openFileRef.current === file) {
+        setOpenFile(null);
+        return;
+      }
+      setOpenFile(file);
+      onFileSelect?.(file);
+    },
+    [onFileSelect],
+  );
+
   // Edge label data for the overlay (rendered OUTSIDE ReactFlow so the pane
   // doesn't intercept pointer events). Uses ELK-computed label midpoints from
   // the actual edge path (not node-center approximations).
@@ -310,23 +395,55 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
 
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
 
+  // Unique source files across components → sidebar file tree.
+  const files = useMemo(
+    () => Array.from(new Set(components.map((c) => c.file).filter(Boolean))).sort(),
+    [components],
+  );
+
+  // Drawer content renderer: prefer the path-keyed viewer; fall back to the
+  // legacy component-keyed one via a file → first-component lookup.
+  const fileViewer = useMemo(() => {
+    if (renderFileViewer) return renderFileViewer;
+    if (renderFileView) {
+      const byFile = new Map(
+        components.filter((c) => c.file).map((c) => [c.file, c] as const),
+      );
+      return (file: string) => {
+        const comp = byFile.get(file);
+        return comp ? renderFileView(comp) : null;
+      };
+    }
+    return undefined;
+  }, [renderFileViewer, renderFileView, components]);
+
   return (
-    <div style={{ visibility: layoutReady ? 'visible' : 'hidden', width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
-      {/* Sidebar with title and description */}
-      {(title || description || usedMechanisms.size > 0) && (
+    <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'row' }}>
+      {/* Sidebar: scrollable title/description/legend on top, file tree pinned to the bottom half */}
+      {(title || description || usedMechanisms.size > 0 || sidebarExtra || sidebarAfterDescription || files.length > 0) && (
         <div
           style={{
-            width: 280,
-            minWidth: 280,
+            width: 340,
+            minWidth: 340,
             borderRight: `1px solid ${theme.colors.border}`,
             background: theme.colors.backgroundSecondary ?? theme.colors.background,
-            padding: '16px',
-            overflowY: 'auto',
             display: 'flex',
             flexDirection: 'column',
-            gap: 12,
+            overflow: 'hidden',
           }}
         >
+          <div
+            style={{
+              flex: 1,
+              minHeight: 0,
+              overflowY: 'auto',
+              padding: '16px',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 12,
+            }}
+          >
+          {sidebarExtra}
           {title && (
             <h2
               style={{
@@ -355,6 +472,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
               />
             </div>
           )}
+          {sidebarAfterDescription}
           {usedMechanisms.size > 0 && (
             <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
               <span style={{ fontSize: theme.fontSizes[0] * 0.8, fontFamily: theme.fonts.monospace, textTransform: 'uppercase', color: muted, fontWeight: 600 }}>
@@ -378,6 +496,14 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
               ))}
             </div>
           )}
+          </div>
+          {files.length > 0 && (
+            <SubsystemFileTree
+              files={files}
+              selectedFile={selected?.file ?? openFile}
+              onSelectFile={onTreeSelectFile}
+            />
+          )}
         </div>
       )}
       
@@ -435,7 +561,7 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
       )}
       <ReactFlow
         key={`${baseNodesKey}-${baseEdgesKey}`}
-        nodes={xyflowNodesBase}
+        nodes={dispNodes}
         edges={dispEdges}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
@@ -469,13 +595,20 @@ function Inner({ components, edges, onSelect, onEdgeSelect, measured: _measured,
         <Controls showZoom showFitView showInteractive />
       </ReactFlow>
       {selected && <ComponentDetail component={selected} />}
+      <FileDrawer file={openFile} onClose={() => setOpenFile(null)}>
+        {fileViewer && openFile ? fileViewer(openFile) : null}
+      </FileDrawer>
+      {/* Startup cover — hides measurement, layout swap, and camera settle. */}
+      <GraphLayoutCover revealed={layoutReady} />
+      {canvasOverlay}
       </div>
     </div>
   );
 }
 
 /** Detail panel for the selected component — the verifiable identity + sources
- *  moved off the canvas so nodes stay minimal. */
+ *  moved off the canvas so nodes stay minimal. File content lives in the
+ *  bottom FileDrawer, not here. */
 function ComponentDetail({ component }: { component: SubsystemComponent }) {
   const { theme } = useTheme();
   const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
@@ -545,6 +678,101 @@ function ComponentDetail({ component }: { component: SubsystemComponent }) {
   );
 }
 
+/** Bottom panel that slides up from the bottom of the graph area to show a
+ *  file's contents — opened by node clicks and sidebar file-tree clicks
+ *  alike. Sits in normal flow (canvas shrinks while open, nothing covered)
+ *  and animates via height; stays mounted so open/close animates. */
+function FileDrawer({
+  file,
+  onClose,
+  children,
+}: {
+  file: string | null;
+  onClose: () => void;
+  children?: ReactNode;
+}) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+  const open = file !== null;
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        // Above the absolute edge-label overlay (zIndex 5), which spans the
+        // whole graph-area container including this panel's slice.
+        zIndex: 6,
+        flexShrink: 0,
+        height: open ? '45%' : 0,
+        minHeight: 0,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        background: theme.colors.background,
+        borderTop: open ? `1px solid ${theme.colors.border}` : 'none',
+        transition: 'height 200ms ease',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          padding: '6px 10px',
+          borderBottom: `1px solid ${theme.colors.border}`,
+          flexShrink: 0,
+        }}
+      >
+        <span
+          title={file ?? undefined}
+          style={{
+            flex: 1,
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontFamily: theme.fonts.monospace,
+            fontSize: theme.fontSizes[0],
+            color: muted,
+          }}
+        >
+          {file}
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close file"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 22,
+            height: 22,
+            padding: 0,
+            border: 'none',
+            borderRadius: 4,
+            background: 'transparent',
+            color: theme.colors.text,
+            cursor: 'pointer',
+          }}
+        >
+          <X size={14} />
+        </button>
+      </div>
+      <div style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>{children}</div>
+    </div>
+  );
+}
+
 /** Renders the graphify drill-down payload for a component. */
 function GraphifyDetailSections({ detail }: { detail: GraphifyComponentDetail }) {
   const { theme } = useTheme();

package/src/subsystem/SubsystemFileTree.tsx

@@ -0,0 +1,197 @@
+/**
+ * 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.
+ */
+
+import { useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { ChevronDown, ChevronRight, FileText, Folder, FolderOpen } from 'lucide-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). */
+  selectedFile?: string | null;
+  /** Called when a file row is clicked. */
+  onSelectFile?: (file: string) => void;
+}
+
+/** Fills its parent height by design — pin it with a sized flex container. */
+export function SubsystemFileTree({ files, selectedFile, 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 toggleFolder = (path: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  };
+
+  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>
+        );
+      }
+      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>
+      );
+    });
+
+  return (
+    <div
+      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 }}>
+          {uniqueCount}
+        </span>
+      </div>
+      <div style={{ flex: 1, minHeight: 0, overflowY: 'auto', padding: '0 8px 8px' }}>
+        {renderEntries(root, 0)}
+      </div>
+    </div>
+  );
+}

package/src/subsystem/model.ts

@@ -132,6 +132,10 @@ 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;
 }
 
 export type SubsystemGraphNode = Node<SubsystemGraphNodeData, SubsystemGraphNodeType>;

package/src/subsystem/nodes.tsx

@@ -67,6 +67,9 @@ 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;
 
   return (
     <div
@@ -90,8 +93,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,
       }}
@@ -120,7 +127,6 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
           }}
         >
           {KIND_LABEL[c.kind] ?? c.kind}
-          {c.purl ? ` · ${c.purl}` : ''}
           {c.capture && c.capture !== 'edited' ? ` · ${c.capture}` : ''}
         </div>
       )}