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 three-state connection filter (All · Connected · Disconnected, All first and selected on arrival) 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 — while All, which names no status, takes the page’s own navy instead. A centred Install more connectors button closes the page below the grid.
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 joined plug on --green / white unplug on --red — following the solid .pill.failed precedent. The connection filter leads the toolbar: a bordered segmented toggle of three segments — All · Connected · Disconnected, in that order, with All selected on arrival — whose selected segment takes the solid colour of its own meaning (green Connected / red Disconnected, white icon + label) and whose idle segment shows a muted tint of that same 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.
All names no connection status, so it takes neither status colour: selected it carries the page’s own --ink navy solid with a white icon and label; idle it carries a soft navy tint of that same colour. It is the system’s own neutral — deliberately not the --blue primary, which stays reserved for the action of record on a page and a filter segment is never that, and deliberately not grey, which this system does not use for an idle control. Its glyph is the four-square grid — the whole grid, every card — so the plug family stays exclusive to status. Together the three segments read as one sentence: everything, the connected part of it, the disconnected part of it.
The two status glyphs are one drawing in two states. Disconnected is the unplug: a plug and its socket pulled apart, with the two prong strokes exposed across the gap. Connected is that same drawing closed — the two halves brought together until their cut faces meet on a single seam, the prong strokes dropped because the prongs are inside the socket now, and the two cords running on to the corners of the box exactly as before. The closed form has two-fold rotational symmetry about the centre of the box. No stock icon draws it, so it is a custom glyph, drawn once and used at every status site in this document — the filter segment, the card badge, the connection-status badge and the Connect action. Connecting and disconnecting is then literally the same picture closing and opening, which is what the two states mean.
Below the grid sits a single centred Install more connectors button — the outline variant at the small size (32px tall, 14px of side padding, a 12.5px label), horizontally centred with 24px of clearance above it. It carries no leading glyph: the plug family belongs to status, and the toolbar’s + Connector is already the compact repeat of the same destination — the marketplace’s connector tab. It is deliberately not the primary button; the work of this page is connecting what is already installed, and installing more is the way out of the page rather than its main act. Both this button and the toolbar’s + Connector appear only for a reader who can actually reach the marketplace — where that access is absent, neither is rendered. A control that leads nowhere is never shown.
An empty grid is a real state under every segment, and each has its own answer. Under All — the default — the grid is replaced by a soft panel reading No connectors to show, and that panel carries the single Install more connectors CTA; because it does, the button below the grid is suppressed, so one screen never shows the same CTA twice. Every word of that copy has to stay true when the emptiness is a scope or visibility effect rather than an empty installation — cards are filtered by scope and by what the reader is allowed to see, so a workspace with connectors installed can still show none. It therefore never asserts that nothing is installed: it names all three causes and offers the remedy for each — a wider scope, access to what cannot be seen, an install.
The same gating that hides both install buttons hides this one. For a reader who cannot reach the marketplace the panel keeps its title and its first sentence, ends on ask an administrator for access — or for an install in place of the install clause, and renders no button at all; an empty panel whose only action leads nowhere would be worse than none. Under Connected, the existing panel stands, held to the same discipline — No connected services in this view, naming scope as a cause too, with its Connect a service action, which switches the filter to Disconnected. Its action is a different one from the install CTA, so the bottom button is not suppressed there. Under Disconnected, there is no panel at all: an empty Disconnected list asks nothing of the reader — there is nothing here to connect — so the grid area is simply bare and the bottom CTA remains.
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. Every setup page carries a tab strip beneath its header, and its first two tabs are the same on every connector: Setup, then Sharing — who else may use each saved connection (see Sharing tab). Most connectors hold a single connection (below) and read Setup · Sharing; a connector that holds many — like the A2A Server — adds Connections after Sharing (see Multiple connections); a connector's own tabs follow.
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 joined 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 third tab, Connections, after the two fixed ones, so the strip reads Setup · Sharing · Connections 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.
The second tab is Sharing, and every connector carries it. It answers one question — who else may use each of your saved connections — and it is the only place that question is answered: sharing is decided on its own tab, never inside Setup. Setup connects; Sharing hands the connection on. The tab lists your own saved connections for this connector and, under each one, mounts the app's access picker and its ownership panel — the same two controls the permissions surface draws, never a connector-specific copy of them (see Application Design — Permissions). It keeps the Wide column: it holds a list of cards, not a long settings form. A person who has saved no connection here sees nothing on it yet.
The tab is a list of panels, one per connection you own here, each one a connection row — the same card the Connections tab stacks, but carrying its name and mono line and nothing else: no status badge and no per-row action, because a saved identity is not a claim that the connection still answers, and connecting and disconnecting stay on Setup and on the Connections tab. Beneath each row sits the shared permissions card on the --surface ground: Access — the multi-select scope picker, ordered narrow to broad, helper line Choose who can use this connection. — then Ownership — a Search by name or email… field that adds a co-owner, helper line Owners can change this connection's sharing and disconnect it., and the owners themselves as hairline-divided rows with an avatar, a name, an address and a remove button — except the row of the person who connected it, which carries a lock in the button's place, because this surface hands out no way to remove that owner; the last owner cannot be removed. An ownership edit applies as it is made: a person picked from the search field is an owner at once. The card ends in one right-aligned Save changes, and that button writes the Access choice — nothing is shared until it is pressed.
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 the fixed tabs — after Setup, after Sharing, and after Connections where the connector has it — in the order the connector declares them. Two tabs are fixed and every connector carries both: Setup first and Sharing second. The strip is therefore never absent; a custom tab extends it rather than introducing it. 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 Sharing, after Connections, and after every other custom tab. A connector that only needs to explain itself may carry Help and no custom tab of its own; its strip then reads Setup · Sharing · Help. 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.