ConnectorCard

Agent harness · src/components/ConnectorCard/ConnectorCard.tsx

One app the agent can be connected to.

The logo/icon split is a trademark rule, not a styling choice: another company's mark appears only where that company has approved it, and otherwise the card uses our own icon for the kind of app. The fallback is the default, so forgetting to check permission cannot ship someone else's logo.

Disconnect sits beside Manage at the same weight. Connecting is easy everywhere; this is the component that makes leaving easy too.

Import

import { ConnectorCard } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
name	React.ReactNode
maker	React.ReactNode
category	React.ReactNode
description	React.ReactNode	What it lets the agent do, in one line.
logo	string	The maker's own logo. Only where the maker has approved its use.
icon	React.ReactNode	Our own icon for the KIND of app, used when there is no approved logo.
connected	boolean
connectLabel	React.ReactNode
manageLabel	React.ReactNode
disconnectLabel	React.ReactNode
connectedLabel	React.ReactNode
className	string
onConnect	() => void
onManage	() => void
onDisconnect	() => void