proposal: show other node type buttons on hover `Sub Agent`

[dimaMachina]

ref https://inkeep.slack.com/archives/C08QXR5CWBH/p1764174525933609

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: d1075d95665826dcd1d44f022ee4459fd241691b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
agents-manage-api	Ready	Preview	Comment	Nov 26, 2025 4:58pm
agents-manage-ui	Ready	Preview	Comment	Nov 26, 2025 4:58pm
agents-run-api	Ready	Preview	Comment	Nov 26, 2025 4:58pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
agents-docs	Skipped			Nov 26, 2025 4:58pm

[claude[bot]]

Claude finished @dimaMachina's task —— View job

---

Code Review: Node Library Hover Functionality

Todo List:

• [x] Read and analyze the changed files
• [x] Understand existing codebase patterns and architecture
• [x] Provide comprehensive code review feedback
• [x] Update comment with final review

---

Overview

This PR implements a hover-to-expand functionality for the Node Library component, showing additional node type options (Team Agent, External Agent, MCP, Function Tool) when users hover over the Sub Agent node. This follows the Slack discussion referenced in the PR.

Code Review Analysis

✅ Positive Aspects

1. Clean Implementation: The hover mechanism is well-implemented using React's event system with proper focus/blur handling for accessibility
2. Consistent Styling: Uses existing design tokens and follows the established CSS transition patterns
3. Accessibility Considerations: Includes proper ARIA roles, focus management, and keyboard navigation support
4. Performance: Uses useCallback appropriately to prevent unnecessary re-renders

🔍 Areas for Consideration

1. UX/Design Concerns

Issue: The current implementation may create a confusing user experience:

• Users might not understand why hovering over "Sub Agent" reveals other node types
• The relationship between "Sub Agent" and the expanded options isn't semantically clear
• No visual indication that Sub Agent is hover-expandable until interaction occurs

Suggestion: Consider adding visual affordances like:

// Add a visual hint that more options are available
<div className="flex items-center gap-1">
  <NodeItem node={nodeTypeMap[NodeType.SubAgent]} />
  <ChevronRight className={cn(
    "h-3 w-3 text-muted-foreground transition-transform",
    isExpanded && "rotate-90"
  )} />
</div>

2. Accessibility & Keyboard Navigation

Issue: While ARIA roles are present, the expandable behavior might not be discoverable to screen reader users.

Suggestion: Enhance accessibility:

<div
  role="group"
  aria-expanded={isExpanded}
 
  onMouseLeave={handleExpanded}
  onBlur={handleBlur}
  className="flex flex-col gap-2 w-40"
>
  <div 
    role="button" 
    tabIndex={0}
    onKeyDown={(e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        setIsExpanded(!isExpanded);
      }
    }}
    onMouseEnter={handleExpanded} 
    onFocus={handleExpanded}
  >

3. Animation Performance

Issue: The current CSS transition uses max-h-100 which creates a fixed height constraint and may cause visual jumps.

Suggestion: Consider using a more robust animation approach:

// Replace max-h-100 with dynamic height calculation
const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);
const [expandedHeight, setExpandedHeight] = useState(0);

useEffect(() => {
  if (containerRef) {
    setExpandedHeight(containerRef.scrollHeight);
  }
}, [containerRef, nodes]);

// In JSX:
<div
  ref={setContainerRef}
  style={{
    maxHeight: isExpanded ? `${expandedHeight}px` : '0px',
    transition: 'max-height 300ms ease-in-out, opacity 300ms ease-in-out'
  }}
  className={cn(
    'overflow-hidden',
    isExpanded ? 'opacity-100 pt-2' : 'opacity-0 pointer-events-none'
  )}
>

4. State Management & Event Handling

Issue: The handleExpanded function handles multiple event types in a single callback, which can be error-prone.

Suggestion: Separate concerns for better maintainability:

const handleMouseEnter = useCallback(() => setIsExpanded(true), []);
const handleMouseLeave = useCallback(() => setIsExpanded(false), []);
const handleFocus = useCallback(() => setIsExpanded(true), []);

5. Import Organization

Minor Issue: The import reordering (moving cn import up) is good practice but should be consistent with the project's ESLint/Prettier configuration.

🏗️ System Design Considerations

1. Extensibility

The current hardcoded nodes array doesn't follow the dynamic patterns used elsewhere in the codebase. Consider making this configurable:

interface NodeLibraryProps {
  expandableNodes?: NodeItem[];
  primaryNode?: NodeItem;
}

export const NodeLibrary: FC<NodeLibraryProps> = ({ 
  expandableNodes = nodes, 
  primaryNode = nodeTypeMap[NodeType.SubAgent] 
}) => {
  // Implementation
};

2. Consistency with React Flow Patterns

The implementation should align with React Flow's drag-and-drop patterns and node lifecycle management used throughout the agent editor.

3. Performance Considerations

For larger node libraries, consider virtualization or lazy loading of expanded content to maintain smooth interactions.

📝 Recommendations

1. High Priority: Add visual affordances to indicate expandable behavior
2. Medium Priority: Enhance keyboard navigation and screen reader support
3. Medium Priority: Consider dynamic height calculation for smoother animations
4. Low Priority: Separate event handlers for better code organization
5. Low Priority: Make the component more configurable for future extensibility

🎯 Missing Changeset

The bot correctly identified that this PR needs a changeset. Since this is a UI enhancement that affects user interaction, it should be tagged as a patch level change.

---

Overall, this is a solid implementation that follows existing patterns well. The main areas for improvement are around UX discoverability and accessibility enhancements. The code quality is good, but there are opportunities to make it more robust and user-friendly.