Integrations for AI teammates, and who each one is allowed to be

Role

Design and frontend, end to end

Stack

React, TypeScript, nine locales

Connecting an app to your AI teammate used to happen in a drawer that slid in from the side. Every provider had its own shape inside it, and the states a connection could be in (needs an admin, needs auth, unavailable in this org, connected as you) were described in three different vocabularies depending on where you ran into them.

I rebuilt it as a directory. One card system for every provider, every setup step, and every failure state. The identity step, which is the genuinely confusing part, folds into four layers you read top to bottom: what this connects, who it acts as, what can go wrong, what to do about it.

The commit that put it into production added 157 lines and removed 6,871.

One decision I would defend. I kept the old analytics event names. The new directory still emits tool_drawer_open, segmented by the same state vocabulary the drawer used. Renaming would have been tidier and would have severed every comparison to the months before. A lot of redesigns quietly break their own measurement this way and nobody notices until someone asks whether the new thing is better.