Integrations

Read the row, not the panel. Every row resolves on its own, so a real screen is usually a mix and never the four tidy sets above. Two rules decide the buttons: Manage appears wherever a tokenProvider is set (Asana, AssemblyAI, OpenAI) and stays put in all four states, so you can replace a key on a row that is already green; Connect appears only where a row has an action and is not ready, which today means Google Calendar and nothing else. The error and unconfigured states share the same XCircle glyph and differ only by colour, so colour is the only cue separating "you never set this up" from "this is broken right now".

Only one row can report an HTTP failure, and the other three cannot. Asana is the sole probe with an else that reads the status back (HTTP 403 above). AssemblyAI and OpenAI branch on 501 and treat every other response as ready, so a 500 from either provider lights the row green and says "Transcription ready". Google Calendar folds every non-ok response into unconfigured, so an outage reads as "Not connected" and offers you a Connect button that will not help. In all four cases the row is honest about reaching the provider and much less honest about what it said.

A green AssemblyAI row means less than it looks like. The key is stored, the credential plumbing is real and the probe answers, but the transcription path itself is not verified end to end: no recording has been proved to travel from capture through AssemblyAI and back as a saved transcript. It is a backbone with a live socket on one end. docs/features.md marks this shipped and docs/launch-checklist.md leaves it unticked; the checklist is the one that matches the code.

The placeholder is the whole disclosure. A stored key is never shown, never fetched back and never echoed: the panel only ever learns a boolean, so the field's placeholder forking from Paste your key here to •••••••• (a key is stored — enter a new one to replace) is the only way the UI admits a key exists. Closed is not a state so much as an absence: the dialog is bound to editing !== null, so nothing renders until a Manage button sets a row. On success it closes, re-reads the stored flags and re-runs every probe, so the row behind it goes green without a reload. On failure it stays open with the message under the field and both buttons live again, and the field is never cleared, so a retry does not cost you the paste.

Exactly two states, and no third is coming without new code. The card takes three props (name, icon, description), has no click handler, no href and no connect action, and its doc comment opens with "Non-interactive". The overlay is pointer-events-none and aria-hidden, so it is decoration for sighted mouse users and does not exist for a screen reader: a keyboard or screen-reader user is never told these are unavailable, because the card offers nothing to focus in the first place. Marked In development rather than Placeholder: the card itself is finished and shipped, it is the eight providers behind it that do not exist. Both stages above are 226px wide because that is what the product gives this card: the catalog grid goes to four columns at 1280px, and CardTitle is text-2xl unmodified, so a provider name renders at 24px in a card whose description column is about 130px. The name is the largest text on the Integrations page and the sentence under it wraps two or three words at a time. That is the shipped rendering, not the stage squeezing it.