feat(frontend/builder): Add sub-graph update UX

[Pwuts]

OPEN-2743: Ability to Update Sub-Agents in Graph (Without Re-Adding)

Updating sub-graphs is a cumbersome experience at the moment, this should help. :)

Changes 🏗️

• Add sub-graph update banner with I/O incompatibility notification and resolution mode
  • Add CustomNode > IncompatibilityDialog + SubAgentUpdateBar sub-components
  • Add useSubAgentUpdate hook
• Fix static edges not rendering as such
• Fix edge styling not applying

Checklist 📋

For code changes:

• I have clearly listed my changes in the PR description
• I have made a test plan
• I have tested my changes according to the test plan:
  • CI for existing frontend UX flows
  • Updating to a new sub-agent version with compatibility issues: UX flow works
  • Updating to a new sub-agent version with no compatibility issues: works
  • Designer approves of the look

[netlify]

✅ Deploy Preview for auto-gpt-docs-dev canceled.

Name	Link
🔨 Latest commit	c55121c
🔍 Latest deploy log	https://app.netlify.com/projects/auto-gpt-docs-dev/deploys/6942f8b9b316610008aa7c82

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch pwuts/open-2743-ability-to-update-sub-agents-in-graph-without-re-adding

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify]

✅ Deploy Preview for auto-gpt-docs canceled.

Name	Link
🔨 Latest commit	c55121c
🔍 Latest deploy log	https://app.netlify.com/projects/auto-gpt-docs/deploys/6942f8b91f22610008e5537a

[deepsource-io]

Here's the code health analysis summary for commits cc91791..c55121c. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
JavaScript	✅ Success	❗ 15 occurences introduced 🎯 2 occurences resolved	View Check ↗
Python	✅ Success		View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[AutoGPT-Agent]

Thanks for implementing this sub-graph update feature! This will definitely improve the user experience when working with sub-agents in the graph editor.

The code looks good with well-structured components for handling updates, incompatibility detection, and resolution mode. I particularly like the clear visual indicators for broken connections and the detailed incompatibility dialog.

Before merging

You need to complete your test plan by verifying all the test scenarios you've outlined:

• Updating to a new sub-agent version with compatibility issues: UX flow works
• Updating to a new sub-agent version with no compatibility issues: works
• Designer approves of the look

Once you've completed all the tests and received design approval, please update the checklist to reflect this.

Minor notes

• The approach with resolution mode and visual indicators for broken connections is excellent for guiding users through the process
• Great work on the IncompatibilityDialog component that clearly explains what's changed between versions
• The edge rendering fixes are a nice bonus improvement

Please let us know when you've completed the remaining tests so we can merge this improvement.

[AutoGPT-Agent]

Thank you for this PR that addresses the sub-graph update UX! The implementation looks thorough and well-designed.

Looking Good

• Clear description linking to the issue
• Well-organized code with good component structure
• Comprehensive handling of compatibility issues between versions
• Nice UI features with appropriate warnings and visual indicators

Before Merging

Your test plan needs completion:

• You've marked that you tested updating with compatibility issues
• The following items remain untested or unchecked:
  • Updating to a new sub-agent version with no compatibility issues
  • Designer approves of the look

Please complete the remaining test plan items to ensure this feature works as expected in all scenarios. Once those are checked off, this should be ready to merge.

Is there anything you need help with to finish testing these scenarios?

[AutoGPT-Agent]

Thanks for working on improving the sub-graph update experience! This is a valuable enhancement that will make the builder UX much better.

Feedback

Your implementation looks well thought out, with good separation of concerns between the UI components and the core logic in the useSubAgentUpdate hook. I particularly like how you've handled the resolution mode to guide users through fixing incompatible connections.

However, before we can merge this PR:

1. Complete the test plan: You've marked that you haven't fully tested the "Updating to a new sub-agent version with no compatibility issues" scenario yet. Please complete this test to ensure all flows work correctly.

2. Designer approval: The checklist indicates designer approval is needed but this item isn't checked off. Please get confirmation from a designer that the new UI elements meet our design standards.

Once these two items are addressed, the PR should be ready for merging. The code implementation itself looks solid and well-structured.