Summary
Adds a Twitter-style blue verification checkmark (BadgeCheck from lucide-react) next to the toolkit name to indicate Composio provides managed authentication. The indicator appears inline with the name in three locations:
- Toolkit grid cards (
ToolkitCard.tsx) — 16px BadgeCheck icon inline after the toolkit name in the <h3> heading
- Toolkit list rows (
ToolkitListItem.tsx) — 14px BadgeCheck icon inline after the toolkit name span
- Toolkit detail page (
SingleToolkitPage.tsx) — 20px BadgeCheck icon inline after the toolkit name in the <p> heading
All three use a blue color (text-blue-500) and show a Radix tooltip on hover: "Composio Managed App — Get started quickly". The indicator renders when composio_managed_auth_schemes is a non-empty array.
Updates since last revision
- Icon changed: Replaced ⚡ (
ZapIcon) with ✓ (BadgeCheck) — a verification checkmark that better communicates "trusted / managed" (per Musthaq's feedback that the flash icon was confusing).
- Placement changed: Moved from top-right corner (cards) / auth badge row (list) / stats pill (detail) to inline next to the toolkit name in all three views, matching the Twitter verification pattern.
- Color changed: From green (
bg-green-100) to blue (text-blue-500) to match standard verification badge conventions.
- Removed: Green pill badge with "Composio Managed" text from detail page stats row — the icon next to the name replaces it.
Review & Testing Checklist for Human
Recommended test plan:
- Navigate to the marketplace/toolkits page (grid view)
- Look for the blue ✓ checkmark next to toolkit names (e.g., Gmail, Slack, GitHub)
- Hover over the checkmark — confirm a styled tooltip appears saying "Composio Managed App — Get started quickly"
- Click the card — confirm navigation still works normally
- Switch to list view and verify the blue ✓ appears next to toolkit names, with the same tooltip
- Click into a toolkit with managed auth and verify the blue ✓ appears next to the name in the page heading
- Click into a toolkit without managed auth and verify no checkmark appears
- Check that the old green pill badge / green circle indicators are gone
Notes
- Not yet visually tested in browser — visual verification is strongly recommended before merging.
- The badge markup is inlined in each component (not extracted to a shared component) to keep the change minimal.
Link to Devin Session: https://app.devin.ai/sessions/9257813d565b4fffb6c17a48c6b45f49
Requested by: @palash-c
@devin-ai-integration[bot]