FE: Differentiate between external and internal catalog items in list

Summary

Add visual UI elements to AI Catalog item cards to clearly differentiate External agents (previously called "third party flows") from internal GitLab agents and custom user-created agents. This helps users quickly identify the source and type of agents when browsing the catalog.

Background

During discussion in #579728, the team decided to differentiate External agents via label plus icon, and possibly an avatar. External agents are third-party integrations (like Anthropic Claude Code or OpenAI Codex) that use a different mechanism than GitLab-native agents.

Key Technical Details:

• External agents are identified by itemTypes being "third_party_flow" vs "flow" or "agent"
• All External agents use the same underlying mechanism (list of commands) regardless of provider
• Cannot reliably determine specific provider (Anthropic vs Codex vs others) without error-prone URL parsing
• Users can search for specific External agent types via regular search (e.g., including type in title/description)

Design Requirements

Based on UX designs and team discussion:

1. Visual Differentiation: Use label + icon combination to indicate External agents
2. Avatar Support: Consider using avatars to represent different agent types
3. Legal Compliance:
   • Codex icon is approved for use
   • Anthropic icon pending legal approval (see #580131)
4. Consistency: Apply same visual treatment across all catalog views (Explore and Project)

Implementation Notes

Data Available

• itemTypes field distinguishes between:
  • "agent" - GitLab native agents
  • "flow" - Custom user-created flows
  • "third_party_flow" - External agents

UI Components Needed

1. Label/Badge: Text indicator (e.g., "External", "Third-party", "Community")
2. Icon: Visual symbol to quickly identify External agents
3. Avatar (optional): Provider-specific imagery where legally approved

Considerations

• Fallback Design: Generic External agent indicator when specific provider cannot be determined
• Accessibility: Ensure visual indicators are accessible (color contrast, screen readers, etc.)
• Responsive Design: Visual elements should work across different screen sizes
• Null Handling: Gracefully handle cases where itemType data might be missing

Acceptance Criteria

• External agents display a clear visual indicator (label/badge) on catalog cards
• Icon is displayed alongside the label for External agents
• Visual treatment is consistent across Explore and Project catalog views
• Non-external agents (GitLab native and custom) do not show External indicators
• Design matches UX mockups and specifications
• Accessibility requirements are met (WCAG compliance)
• Works correctly on mobile and desktop viewports
• Handles edge cases (missing data, null values) gracefully

Design Resources

• FIGMA: https://www.figma.com/design/8dIIoI6h78WTjXbUTp0yOI/Agent-Workflow-Catalog?node-id=7642-61915&t=rd75mUQMbz0aMheF-0
• UX designs showing project attribution: See discussion in #579728
• Brand/Legal approval tracking: #580131
• Design assets issue: #556047

Related Issues

• Parent planning issue: #579728
• Brand/Legal approval: #580131
• AI Catalog design assets: #556047
• Third-party flow feature flag: #578074
• Terminology review: #579999

Technical References

• External agents are created via AiCatalogThirdPartyFlow GraphQL type
• Item type constant: Ai::Catalog::Item::THIRD_PARTY_FLOW_TYPE
• Related documentation: Duo Agent Platform terminology