How connectors surface in the Cinatra app — the connector toolbar, the responsive card grid, and the connected / disconnected state language. Part of Cinatra Application Design; match it exactly.
Connect the services your agents reach. A toolbar sits below the page header — a two-state connection filter leading, then a white search field, a scope dropdown with + Connector beside it, and a sort / display button anchoring the right — over a responsive grid of connector tiles. Each tile carries only the brand logo (top-left), a status badge (top-right) and the connector name — no vendor line, no description. Badge and filter speak one status language — green when connected, red when disconnected.
Cards keep the --surface ground of the current page and show each connector’s real brand logo on a white tile. The status badge is a solid chip — a white plug on --green / white unplug on --red — following the solid .pill.failed precedent. The connection filter leads the toolbar: a bordered segmented toggle whose selected segment takes the solid status colour (green Connected / red Disconnected, white icon + label) and whose idle segment shows a muted tint of its own colour — soft green / soft red — never grey. The scope dropdown is the app’s access combobox rendered exactly: a navy-bordered Search… field (an ✕ clears it once it holds text), Type: name rows grouped by kind with a hairline between groups — never between rows — and the selected scope carrying the same soft --surface-muted highlight it shows on hover, every other row white. When it is open, the toolbar trigger takes that same --surface-muted ground. The flyout is sized to its longest item, so it scrolls top-to-bottom, never sideways, and shows no scrollbar. + Connector sits right after the scope dropdown — a hairline between them — while the sort / display config button anchors the far right in the same borderless toolbar style; once the search field holds a query a small ✕ clears it. The grid scales md:2 · lg:3 · xl:4 · 2xl:5.
One generated form per connector. A connector's setup page is rendered from its config schema — a single generic form, never per-connector layout. It sits in the Wide content width (the max-w-3xl · 768px column defined in the Application Design system, §VII Content widths) and splits into two columns: a wider left column holding the configuration fields, and a narrower right column holding the Connection status card. The page header carries the connector name and the Connector setup subtitle; the status badge that once sat top-right now lives in that card. Fields are stacked and single-column; each is optional unless the schema marks it required. Most connectors hold a single connection (below); a connector that holds many — like the A2A Server — adds a Setup · Connections tablist over the same column (see Multiple connections).
The page holds to the Wide column and never spans full width. Inputs are pure-white with the navy hairline border (design-system Rules of the road #8); selects mirror that chrome with a trailing chevron. The two actions sit side by side, never stacked — an icon-led Connect (indigo primary, the plug from the Connected badge) and Disconnect (destructive, red-on-tint, the unplug from the Disconnected badge); the actions speak the same connect / disconnect language as the status badge. Disconnect is disabled until the connector is connected — there is nothing to disconnect otherwise. Disconnecting is destructive, so it opens an AlertDialog on the --paper ground with a strong hairline header rule — a Cancel outline beside the red Disconnect confirm (same unplug icon) — never a bare browser prompt; its copy stays connector-neutral. The right Connection status card reuses the extension detail info-card chrome (--surface, hairline, its heading over a divider) and carries the status badge with both icon and label plus the Check action beneath it. Each field keeps its own helper text from the connector's schema; the form drops the connector blurb, the per-action section labels, and the connection-check helper line.
A few connectors hold many connections in one extension — the A2A Server connector, for instance, holds one server per connection. These add a Setup · Connections tablist beneath the page header — underline tabs per the design system (VII of the Application Design system, Components · Tabs) — over the same Wide column. Setup adds a connection and rolls up their status; Connections lists them.
On a multi-connection connector the Setup tab keeps the same two-column form, with four differences: the right card is Connections status (plural) carrying one count badge per status — a green 2 Connected, a red 1 Disconnected, only the statuses in play; there is no Check and, in its place, a link-style All connections that opens the Connections tab; the left form has no Disconnect (Connect adds one, and the form is never wrapped in its own card); and the form adds a connection rather than editing the one. The Connections tab stacks every connection as its own card — name, URL, the same solid status badge, and a per-row action that follows the status: Disconnect (destructive) on a connected row, Connect (primary) on a disconnected one — never a bare Remove. Disconnecting a single connection opens the same AlertDialog with connection-level copy (Disconnect connection?), generic to any connector.
Either shape may also carry extra configuration tabs — a connector's own settings beyond connecting. The OpenAI connector, for instance, adds a Local shell tab for its sandboxed-shell policy. Each custom tab takes the connector's own label and sits after Setup (and Connections), in the order the connector declares them. A connector with no extra tabs and one connection shows no tablist at all; the first custom tab is what introduces one. The page header and tablist stay at the Wide column, but a custom tab's content narrows to the Narrow width (max-w-xl · 576px, §VII) — a long single-column settings form reads better tighter — left-aligned beneath the tabs.
One tab label is reserved. A connector may add a Help tab carrying its own setup how-to — the prose, prerequisites and links a user needs to connect it, read-only (no form, no Save). It obeys every custom-tab frame rule — its own tab in the Wide strip, content at the Narrow width — but its position is fixed: Help always sits last, after Setup, after Connections, and after every other custom tab. A connector that only needs to explain itself may carry Help and no other tab; then Help is what introduces the tablist. Reserving the final slot keeps “how do I set this up?” in the same place on every connector.
A non-Help custom tab is the one place the setup page leaves the Wide column: the header and tab strip stay Wide so the tabs sit in the same place across tabs, while the settings themselves drop to Narrow (576px), flush-left under the tablist. The tab carries the connector's own fields in a single column — switches for immediate-effect toggles (indigo when on), inputs, and add / remove list editors for path, host and prefix lists — ending in its own Save.