Skip to content

feat: refactor toolkit icons to align with tool categories#1218

Merged
4pmtong merged 2 commits intoeigent-ai:mainfrom
eureka928:feat/toolkit-icons
Feb 26, 2026
Merged

feat: refactor toolkit icons to align with tool categories#1218
4pmtong merged 2 commits intoeigent-ai:mainfrom
eureka928:feat/toolkit-icons

Conversation

@eureka928
Copy link
Contributor

@eureka928 eureka928 commented Feb 11, 2026

Related Issue

Fixes #1216

Description

Toolkit icons in workflow nodes currently display based on agent type (e.g. every toolkit in Developer Agent shows CodeXml), making it hard to distinguish between different tool actions at a glance. This PR updates icons to display based on tool type (Terminal, Browser, Note, File, etc.) so each toolkit is visually distinct.

Changes Made

  • src/lib/toolkitIcons.tsx (new): Toolkit name → lucide-react icon mapping with getToolkitIcon() helper. Covers 30+ toolkits across 7 categories (Dev/Code, Browser/Web, Documents, Media, Communication, Integrations, Meta) with a Wrench fallback for unknown/MCP toolkits.
  • src/components/WorkFlow/node.tsx: Replaced agentMap[data.type]?.icon with getToolkitIcon() at both the left-panel running toolkit indicator and the right-panel toolkit detail view. Extracted lastActiveToolkit variable to avoid duplicate filter computation. Removed unused Bot import.

Testing Evidence (REQUIRED)

  • I have included human-verified testing evidence in this PR.
  • This PR includes frontend/UI changes, and I attached screenshot(s) or screen recording(s).
  • No frontend/UI changes in this PR.
image image

What is the purpose of this pull request?

  • Bug fix
  • New Feature
  • Documentation update
  • Other

Contribution Guidelines Acknowledgement

@eureka928
Copy link
Contributor Author

@Pakchoioioi @Wendong-Fan @4pmtong would you review my PR?
Thank you

@eureka928
Copy link
Contributor Author

@bytecii as this PR has the screenshots, would you review please?
Thank you

@eureka928
Copy link
Contributor Author

Hi @Douglasymlai thank you for your reviewing my two PRs
Would you review this PR as well? it's kind of small

@Wendong-Fan
Copy link
Contributor

thanks @eureka928 for the PR, could @4pmtong and @nitpicker55555 help reviewing this?

@eureka928
Copy link
Contributor Author

thanks @eureka928 for the PR, could @4pmtong and @nitpicker55555 help reviewing this?

I will keep the pace as is... but would you merge my 4 PRs as well?
I saw many others are merging... but not mine, even though I put screenshots
Hope you and your team take care
Thank you

Create getToolkitIcon() that maps toolkit names to lucide-react icons
by tool category (dev, browser, documents, media, communication,
integrations) with a Wrench fallback for unknown toolkits.
Replace agent-type icons with per-toolkit icons using getToolkitIcon()
so each tool action (Terminal, Browser, Note, etc.) is visually distinct.
@4pmtong
Copy link
Collaborator

4pmtong commented Feb 25, 2026

Thanks @eureka928 for your contribution, it looks good to me. @Douglasymlai could you help check the design?

@eureka928
Copy link
Contributor Author

Hi @4pmtong is this not ready to merge?

@4pmtong 4pmtong merged commit 61c466a into eigent-ai:main Feb 26, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Refactor toolkit icons to align with tool categories

4 participants