Function ConnectStep

notfair-cmo/src/components/onboarding-flow.tsx:457–675

({ slug }: { slug: string })

  | { phase: "error"; message: string };

function ConnectStep({ slug }: { slug: string }) {
  const router = useRouter();
  const [view, setView] = useState<ConnectStepStateView>({ phase: "loading" });
  const [tileBusy, setTileBusy] = useState<string | null>(null);
  const [advancing, setAdvancing] = useState(false);
  const connectionsHref = projectHref(slug, "/connections");

  useEffect(() => {
    let cancelled = false;
    (async () => {
      const result = await getConnectStepStateAction(slug);
      if (cancelled) return;
      if (!result.ok) {
        setView({ phase: "error", message: result.error });
        return;
      }
      setView({ phase: "loaded", state: result.state });
    })();
    return () => {
      cancelled = true;
    };
  }, [slug]);

  async function onConnectTile(tile: RecommendedTile) {
    setTileBusy(tile.mcp_key);
    try {
      const result = await startMcpConnect({
        mcp_key: tile.mcp_key,
        // After OAuth lands, route through the matching account-picker
        // step. That step auto-skips if the bearer covers a single
        // account/property; otherwise it shows a picker. Both paths
        // ultimately redirect back to /onboarding?step=connect so the
        // user can continue adding tools.
        return_to: `/onboarding?step=${tile.account_step}&slug=${encodeURIComponent(slug)}`,
      });
      if (!result.ok) {
        toast.error(result.error);
        setTileBusy(null);
        return;
      }
      window.location.href = result.authorize_url;
    } catch (err) {
      toast.error(err instanceof Error ? err.message : String(err));
      setTileBusy(null);
    }
  }

  function onPickAccount(tile: RecommendedTile) {
    router.push(
      `/onboarding?step=${tile.account_step}&slug=${encodeURIComponent(slug)}`,
    );
  }

  async function onDone() {
    setAdvancing(true);
    // The setup step waits for ensureProjectAgents (CMO + any specialists
    // provisioned by the connect-time hooks) and only then routes the user
    // into the CMO task workspace. Going through it instead of the direct