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

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;
 }
@@ -70,11 +72,18 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
   // 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);
@@ -117,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,
@@ -126,7 +134,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 +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)}
@@ -195,7 +204,7 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
         </div>
       )}
 
-      {c.file && (
+      {c.file && showFileBadges && (
         <div
           onClick={(e) => {
             e.stopPropagation();