@wildo-ai/saas-frontend-lib 1.1.2 → 1.1.4

package/dist/esm/components/settings/AppPage_ConnectedAccountsSettings.d.ts

@@ -0,0 +1,121 @@
+/**
+ * AppPage_ConnectedAccountsSettings — connecting a third-party account, at either owner scope.
+ *
+ * A bespoke `ENGINE_PANEL`, and the reason is the shape of the act rather than the shape of the data.
+ * The stored credentials ARE a resource and the generic surface beside this one lists, inspects and
+ * deletes them perfectly. What it cannot do is CONNECT: that is not a row somebody creates, it is a
+ * flow that leaves the application, obtains consent at a vendor, and returns with a grant nobody
+ * typed. A resource screen has no mechanism for an action of that shape.
+ *
+ * ## Nothing is typed by hand
+ *
+ * The provider comes from a SELECT over what the application declares; the credential fields come
+ * from that provider's own secrets contract. Both were free text until this panel existed, which is
+ * how somebody ends up typing `secretSlug` into a box and storing a grant in a slot nothing reads.
+ *
+ * ## The flow follows the AUTH METHOD
+ *
+ * A connect surface cannot be one form. A vendor with an authorization flow gets the consent round
+ * trip; a vendor whose credential is typed gets a form over the fields IT declares. One button for
+ * both would be wrong for whichever it was not built around.
+ *
+ * ## A provider this deployment cannot connect is SHOWN, never hidden
+ *
+ * When the application has not registered with a vendor, the panel names the environment variables an
+ * operator must set. Removing the provider would answer "we do not support Asana", which is false and
+ * unfixable; naming `ASANA_CLIENT_ID` is true and is the thing that gets it set.
+ *
+ * ## One component, both scopes
+ *
+ * `ownerScope` decides whose account is being connected — a person's own, or the tenant's. The panel
+ * is otherwise identical because the ACT is identical, and duplicating it would guarantee the two
+ * drift. What must never be shared is the DATA: a person's connection and a tenant's shared
+ * integration have different owners, different authorization and different readers, and the scope is
+ * what keeps them apart at every call this panel makes.
+ *
+ * assurance-control: WILDO.IDENTITY.DELEGATED_AUTHORIZATION — the surface on which a principal
+ * authorizes this application to act toward a named third party on their behalf.
+ */
+import React from 'react';
+import { ExternalProvider_Connection_DelegationMode, ExternalProvider_Connection_OwnerScope } from '@wildo-ai/external-connectors-models';
+import { type ConnectableProviderView } from '../../core/requests/wildo-http-client-manual-calls.frontend.service';
+/**
+ * The providers connectable AT THIS SCOPE.
+ *
+ * Exported and named because it is the panel's one substantive claim: a provider admitting only
+ * ORGANIZATION connections must never be offered on a person's screen, and vice versa — offering it
+ * renders an action that answers 403 at the start leg.
+ *
+ * It deliberately does NOT filter on `connectable`. A provider this deployment cannot connect is
+ * still offered, because the panel's answer for it is the missing configuration rather than silence.
+ */
+export declare const selectProvidersForScope: (providers: readonly ConnectableProviderView[], ownerScope: ExternalProvider_Connection_OwnerScope) => ConnectableProviderView[];
+/**
+ * ON WHOSE BEHALF this provider admits a connection at this scope — DERIVED, never assumed.
+ *
+ * The panel used to send `delegation: SERVICE` for every connect, at both scopes. That is one of the
+ * five declared shapes, so it worked by coincidence for the providers that happen to declare it and
+ * answered `409 CONNECTION_NOT_ADMISSIBLE` for the rest — the start leg checks the exact
+ * (ownerScope, delegation) PAIR against what the provider admits, and a scope does not imply a
+ * delegation.
+ *
+ * Measured across the generated catalogue on 2026-09-10, which is why this is a derivation rather
+ * than a better constant: at ORGANIZATION scope, 75 vendors declare `USER` and 39 declare `SERVICE`.
+ * A hard-coded `SERVICE` was therefore wrong for the larger half — `asana` among them, which is how
+ * this surfaced: the provider was listed, the button rendered, and the vendor was never reached.
+ *
+ * The pair is the provider's own statement, so the panel reads it rather than the person supplying
+ * it. Where a provider declares BOTH delegations for one scope — 27 vendors do, `box`, `dropbox`,
+ * `gmail` and `google-calendar` among them — the declaration genuinely does not decide, and only
+ * then is there a question to put to anybody. See `.claude/rules/derive-before-you-ask.md`.
+ */
+export declare const admissibleDelegationsForScope: (provider: ConnectableProviderView, ownerScope: ExternalProvider_Connection_OwnerScope) => ExternalProvider_Connection_DelegationMode[];
+/**
+ * The target the start leg is given — assembled here so the shape is TESTABLE, not inlined.
+ *
+ * `ExternalProvider_ConnectionTargetSchema` refines two fields the panel cannot leave to be
+ * inferred, and it refuses in BOTH directions:
+ *
+ * - a `USER`-delegated call MUST name `actingForUserId` — "a delegated call acts FOR someone, and
+ *   the user it acts for is what makes it permissible";
+ * - a `SERVICE` call MUST NOT, because naming a person there "reads as delegation the runtime will
+ *   not perform, which is worse than an error: the call succeeds as the wrong identity".
+ *
+ * The panel sent neither until 2026-09-10, so every `USER`-delegated connect answered
+ * `400 VALIDATION_FAILED` — and that refusal names no field, so the screen could only report a
+ * generic failure. It was invisible because the shape that WORKS is `SERVICE`-delegated: `USER` at
+ * ORGANIZATION scope is what 75 of the harvested vendors declare, `asana` among them, and it is
+ * exactly the half nobody had driven.
+ *
+ * `actingForUserId` is the SIGNED-IN person and is independent of `ownerId`: a tenant-owned
+ * connection acting for one of its members carries the organization in `ownerId` and the person
+ * here. At USER scope the two coincide, which is why one field cannot serve both.
+ *
+ * `ownerId` is omitted for APPLICATION, which the schema likewise refuses — "an application-owned
+ * connection has exactly one instance, so an ownerId here names something that does not exist".
+ * The Settings Hub renders only USER and ORGANIZATION today, so that arm is unreachable from this
+ * panel; it is handled because the function is the shape's one statement, and a caller that grows
+ * the third scope should not have to rediscover the rule.
+ */
+export declare const buildConnectionTarget: (input: {
+    ownerScope: ExternalProvider_Connection_OwnerScope;
+    ownerId: string | null;
+    delegation: ExternalProvider_Connection_DelegationMode;
+    signedInUserId: string | null;
+}) => {
+    ownerScope: ExternalProvider_Connection_OwnerScope;
+    delegation: ExternalProvider_Connection_DelegationMode;
+    ownerId?: string;
+    actingForUserId?: string;
+};
+export interface ConnectedAccountsSettingsProps {
+    /**
+     * WHOSE account is being connected.
+     *
+     * A prop rather than two components: the act is identical and duplicating it would guarantee the
+     * two screens drift. The DATA never mixes — every call this panel makes carries the scope.
+     */
+    ownerScope: ExternalProvider_Connection_OwnerScope;
+}
+export declare const AppPage_ConnectedAccountsSettings: React.FC<Partial<ConnectedAccountsSettingsProps>>;
+//# sourceMappingURL=AppPage_ConnectedAccountsSettings.d.ts.map

package/dist/esm/components/settings/AppPage_ConnectedAccountsSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppPage_ConnectedAccountsSettings.d.ts","sourceRoot":"","sources":["../../../../src/components/settings/AppPage_ConnectedAccountsSettings.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,EACL,0CAA0C,EAC1C,sCAAsC,EACvC,MAAM,sCAAsC,CAAC;AAS9C,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,mFAAmF,CAAC;AAS3F;;;;;;;;;GASG;AACH,eAAO,MAAM,uBAAuB,GAClC,WAAW,SAAS,uBAAuB,EAAE,EAC7C,YAAY,sCAAsC,KACjD,uBAAuB,EAExB,CAAC;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,6BAA6B,GACxC,UAAU,uBAAuB,EACjC,YAAY,sCAAsC,KACjD,0CAA0C,EAY5C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO;IAC3C,UAAU,EAAE,sCAAsC,CAAC;IACnD,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,EAAE,0CAA0C,CAAC;IACvD,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;CAC/B,KAAG;IACF,UAAU,EAAE,sCAAsC,CAAC;IACnD,UAAU,EAAE,0CAA0C,CAAC;IACvD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;CAUzB,CAAC;AA0CH,MAAM,WAAW,8BAA8B;IAC7C;;;;;OAKG;IACH,UAAU,EAAE,sCAAsC,CAAC;CACpD;AAED,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,8BAA8B,CAAC,CAia/F,CAAC"}

package/dist/esm/components/settings/AppPage_ConnectedAccountsSettings.js

@@ -0,0 +1,386 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * AppPage_ConnectedAccountsSettings — connecting a third-party account, at either owner scope.
+ *
+ * A bespoke `ENGINE_PANEL`, and the reason is the shape of the act rather than the shape of the data.
+ * The stored credentials ARE a resource and the generic surface beside this one lists, inspects and
+ * deletes them perfectly. What it cannot do is CONNECT: that is not a row somebody creates, it is a
+ * flow that leaves the application, obtains consent at a vendor, and returns with a grant nobody
+ * typed. A resource screen has no mechanism for an action of that shape.
+ *
+ * ## Nothing is typed by hand
+ *
+ * The provider comes from a SELECT over what the application declares; the credential fields come
+ * from that provider's own secrets contract. Both were free text until this panel existed, which is
+ * how somebody ends up typing `secretSlug` into a box and storing a grant in a slot nothing reads.
+ *
+ * ## The flow follows the AUTH METHOD
+ *
+ * A connect surface cannot be one form. A vendor with an authorization flow gets the consent round
+ * trip; a vendor whose credential is typed gets a form over the fields IT declares. One button for
+ * both would be wrong for whichever it was not built around.
+ *
+ * ## A provider this deployment cannot connect is SHOWN, never hidden
+ *
+ * When the application has not registered with a vendor, the panel names the environment variables an
+ * operator must set. Removing the provider would answer "we do not support Asana", which is false and
+ * unfixable; naming `ASANA_CLIENT_ID` is true and is the thing that gets it set.
+ *
+ * ## One component, both scopes
+ *
+ * `ownerScope` decides whose account is being connected — a person's own, or the tenant's. The panel
+ * is otherwise identical because the ACT is identical, and duplicating it would guarantee the two
+ * drift. What must never be shared is the DATA: a person's connection and a tenant's shared
+ * integration have different owners, different authorization and different readers, and the scope is
+ * what keeps them apart at every call this panel makes.
+ *
+ * assurance-control: WILDO.IDENTITY.DELEGATED_AUTHORIZATION — the surface on which a principal
+ * authorizes this application to act toward a named third party on their behalf.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { z } from 'zod';
+import { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';
+import { isWildoBackendError, ProviderAuthMethod, ProviderConnectabilityBlocker } from '@wildo-ai/saas-models';
+import { ExternalProvider_Connection_DelegationMode, ExternalProvider_Connection_OwnerScope, } from '@wildo-ai/external-connectors-models';
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/sections/card.js';
+import { Button, ButtonVariants_Variant } from '../../components/actions/button.js';
+import { InputRoot } from '../../components/form/controls/input.js';
+import { Select } from '../../components/form/controls/enum/select.js';
+import { Text } from '../../components/typography/text.js';
+import { Alert, AlertDescription } from '../../components/overlays/containers/alert.js';
+import { useI18n } from '../../core/i18n/useI18n.js';
+import { useUserOrgs } from '../../core/security/useUserOrgs.js';
+import { getManualCallsHttpClient, } from '../../core/requests/wildo-http-client-manual-calls.frontend.service.js';
+const COMPONENT = FrontendComponentType.APP_LAYOUTS_CONNECTED_ACCOUNTS_SETTINGS;
+/** The select's schema. A provider ref is an open identifier, so the control validates shape only. */
+const PROVIDER_REF_SCHEMA = z.string().min(1);
+/** The chooser's own shape. Its OPTIONS are the provider's declared delegations, never this. */
+const DELEGATION_SCHEMA = z.string().min(1);
+/**
+ * The providers connectable AT THIS SCOPE.
+ *
+ * Exported and named because it is the panel's one substantive claim: a provider admitting only
+ * ORGANIZATION connections must never be offered on a person's screen, and vice versa — offering it
+ * renders an action that answers 403 at the start leg.
+ *
+ * It deliberately does NOT filter on `connectable`. A provider this deployment cannot connect is
+ * still offered, because the panel's answer for it is the missing configuration rather than silence.
+ */
+export const selectProvidersForScope = (providers, ownerScope) => providers.filter((provider) => provider.admissibleConnections.some((shape) => shape.ownerScope === ownerScope));
+/**
+ * ON WHOSE BEHALF this provider admits a connection at this scope — DERIVED, never assumed.
+ *
+ * The panel used to send `delegation: SERVICE` for every connect, at both scopes. That is one of the
+ * five declared shapes, so it worked by coincidence for the providers that happen to declare it and
+ * answered `409 CONNECTION_NOT_ADMISSIBLE` for the rest — the start leg checks the exact
+ * (ownerScope, delegation) PAIR against what the provider admits, and a scope does not imply a
+ * delegation.
+ *
+ * Measured across the generated catalogue on 2026-09-10, which is why this is a derivation rather
+ * than a better constant: at ORGANIZATION scope, 75 vendors declare `USER` and 39 declare `SERVICE`.
+ * A hard-coded `SERVICE` was therefore wrong for the larger half — `asana` among them, which is how
+ * this surfaced: the provider was listed, the button rendered, and the vendor was never reached.
+ *
+ * The pair is the provider's own statement, so the panel reads it rather than the person supplying
+ * it. Where a provider declares BOTH delegations for one scope — 27 vendors do, `box`, `dropbox`,
+ * `gmail` and `google-calendar` among them — the declaration genuinely does not decide, and only
+ * then is there a question to put to anybody. See `.claude/rules/derive-before-you-ask.md`.
+ */
+export const admissibleDelegationsForScope = (provider, ownerScope) => {
+    // The view types both members as `string` — it is a wire record — so this is where they become
+    // the vocabulary. NARROWED rather than cast: a delegation this build does not know is dropped
+    // instead of being sent to the start leg, which would answer 409 for a value the panel invented.
+    const known = new Set(Object.values(ExternalProvider_Connection_DelegationMode));
+    const delegations = [];
+    for (const shape of provider.admissibleConnections) {
+        if (shape.ownerScope !== ownerScope || !known.has(shape.delegation))
+            continue;
+        const delegation = shape.delegation;
+        if (!delegations.includes(delegation))
+            delegations.push(delegation);
+    }
+    return delegations;
+};
+/**
+ * The target the start leg is given — assembled here so the shape is TESTABLE, not inlined.
+ *
+ * `ExternalProvider_ConnectionTargetSchema` refines two fields the panel cannot leave to be
+ * inferred, and it refuses in BOTH directions:
+ *
+ * - a `USER`-delegated call MUST name `actingForUserId` — "a delegated call acts FOR someone, and
+ *   the user it acts for is what makes it permissible";
+ * - a `SERVICE` call MUST NOT, because naming a person there "reads as delegation the runtime will
+ *   not perform, which is worse than an error: the call succeeds as the wrong identity".
+ *
+ * The panel sent neither until 2026-09-10, so every `USER`-delegated connect answered
+ * `400 VALIDATION_FAILED` — and that refusal names no field, so the screen could only report a
+ * generic failure. It was invisible because the shape that WORKS is `SERVICE`-delegated: `USER` at
+ * ORGANIZATION scope is what 75 of the harvested vendors declare, `asana` among them, and it is
+ * exactly the half nobody had driven.
+ *
+ * `actingForUserId` is the SIGNED-IN person and is independent of `ownerId`: a tenant-owned
+ * connection acting for one of its members carries the organization in `ownerId` and the person
+ * here. At USER scope the two coincide, which is why one field cannot serve both.
+ *
+ * `ownerId` is omitted for APPLICATION, which the schema likewise refuses — "an application-owned
+ * connection has exactly one instance, so an ownerId here names something that does not exist".
+ * The Settings Hub renders only USER and ORGANIZATION today, so that arm is unreachable from this
+ * panel; it is handled because the function is the shape's one statement, and a caller that grows
+ * the third scope should not have to rediscover the rule.
+ */
+export const buildConnectionTarget = (input) => ({
+    ownerScope: input.ownerScope,
+    delegation: input.delegation,
+    ...(input.ownerScope === ExternalProvider_Connection_OwnerScope.APPLICATION || input.ownerId === null
+        ? {}
+        : { ownerId: input.ownerId }),
+    ...(input.delegation === ExternalProvider_Connection_DelegationMode.USER && input.signedInUserId !== null
+        ? { actingForUserId: input.signedInUserId }
+        : {}),
+});
+/**
+ * What the callback left in the URL on its way back. Read once — see the panel's mount.
+ *
+ * Two shapes arrive here, and they are different acts. `connectionError` is a FINISHED outcome the
+ * callback already decided — a refusal at the vendor, or an attempt it could not recognise. `state`
+ * and `code` are an approval that is NOT yet redeemed: the callback cannot redeem it, because a
+ * vendor redirect carries no bearer token, so it hands the approval to this screen to finish.
+ */
+const readReturnOutcome = () => {
+    if (typeof window === 'undefined')
+        return {};
+    const params = new URLSearchParams(window.location.search);
+    return {
+        connected: params.get('connected') ?? undefined,
+        connectionError: params.get('connectionError') ?? undefined,
+        state: params.get('state') ?? undefined,
+        code: params.get('code') ?? undefined,
+    };
+};
+/**
+ * Take the approval out of the address bar once it has been redeemed.
+ *
+ * `replaceState` rather than a navigation: the entry is REPLACED, so the code does not sit in
+ * history for a back button to return to, and no re-render is triggered. It is single-use at the
+ * backend regardless — this is about not leaving it lying in the URL, in a referrer, or in whatever
+ * the browser syncs.
+ */
+const clearApprovalFromAddressBar = () => {
+    if (typeof window === 'undefined')
+        return;
+    const url = new URL(window.location.href);
+    url.searchParams.delete('state');
+    url.searchParams.delete('code');
+    window.history.replaceState(window.history.state, '', url.toString());
+};
+export const AppPage_ConnectedAccountsSettings = ({ 
+// Defaults to the person's own, which is the destination this panel was built for; the
+// organization surface passes the scope explicitly.
+ownerScope = ExternalProvider_Connection_OwnerScope.USER, }) => {
+    const { tComponent, isReady } = useI18n({ component: COMPONENT });
+    const { user, currentOrganizationId } = useUserOrgs();
+    const t = useCallback((key) => tComponent(COMPONENT, key), [tComponent]);
+    /**
+     * WHOSE account, resolved for the scope in play.
+     *
+     * The backend re-checks it — a USER target must be the caller, an ORGANIZATION target goes through
+     * the membership port — so supplying it is a statement of intent rather than a decision.
+     */
+    const ownerId = ownerScope === ExternalProvider_Connection_OwnerScope.USER
+        ? user?._id ?? null
+        : currentOrganizationId ?? null;
+    const [providers, setProviders] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [selectedRef, setSelectedRef] = useState('');
+    const [busy, setBusy] = useState(false);
+    /** Set ONLY when the provider declares both delegations for this scope — otherwise derived. */
+    const [delegationChoice, setDelegationChoice] = useState('');
+    /** Answers keyed by the slug the PROVIDER declared — never by a name somebody typed. */
+    const [answers, setAnswers] = useState({});
+    const [outcome, setOutcome] = useState(readReturnOutcome);
+    /**
+     * Redeem an approval the vendor just granted — the half the callback could not do.
+     *
+     * ## The in-flight request is CACHED, and both mounts subscribe to it
+     *
+     * React 18 mounts an effect, tears it down and mounts it again in StrictMode, and the attempt is
+     * consumed atomically by the backend — so a second redemption answers
+     * `CONNECTION_ATTEMPT_INVALID` and the `catch` would replace a connection that genuinely succeeded
+     * with a failure notice. That is not hypothetical: on the first real consent, 2026-09-10, the
+     * backend logged `[oauth2-connect] account connected` with `grantedScopes: ["default","identity"]`
+     * and stored the credential, and the browser then posted a second time and showed a 400.
+     *
+     * A once-guard alone does not fix it, and the way it fails is worse than the defect — the same
+     * trap `TotpEnrollmentMethod.strict-mode-setup.test.tsx` records. A guard PLUS a cancel-on-cleanup
+     * flag means mount 1 starts the request, its cleanup cancels the only subscriber, and the guard
+     * then stops mount 2 from applying anything: the account connects and the panel says nothing at
+     * all. Caching the PROMISE instead lets the remount re-subscribe, so there is one request and the
+     * live mount is the one that renders its result.
+     *
+     * The address bar is cleared beside the request rather than after it, for its own reason: not
+     * leaving an authorization code sitting in history behind a back button.
+     */
+    const redemption = useRef(null);
+    useEffect(() => {
+        const { state, code } = outcome;
+        if (state === undefined || code === undefined)
+            return;
+        if (redemption.current === null) {
+            clearApprovalFromAddressBar();
+            redemption.current = getManualCallsHttpClient().completeProviderConnection({ state, code });
+        }
+        let cancelled = false;
+        redemption.current
+            .then(({ connected }) => { if (!cancelled)
+            setOutcome({ connected }); })
+            .catch((e) => {
+            if (isWildoBackendError(e))
+                throw e;
+            // The callback's own vocabulary, so the notices below stay one set rather than two.
+            if (!cancelled)
+                setOutcome({ connectionError: 'failed' });
+        });
+        return () => { cancelled = true; };
+        // `outcome` is seeded once from the URL and the cached promise is what makes this issue one
+        // request, so this deliberately does not re-run on the outcome it sets itself.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const res = await getManualCallsHttpClient().listConnectableProviders();
+                if (!cancelled)
+                    setProviders(res.providers ?? []);
+            }
+            catch (e) {
+                if (isWildoBackendError(e))
+                    throw e;
+                if (!cancelled)
+                    setError(t('errorGeneric'));
+            }
+            finally {
+                if (!cancelled)
+                    setLoading(false);
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [t]);
+    const available = useMemo(() => selectProvidersForScope(providers, ownerScope), [providers, ownerScope]);
+    /**
+     * EVERY declared provider still missing part of its configuration — not just the selected one.
+     *
+     * A gap found by selecting a provider is a gap found one click at a time, and an operator asking
+     * "what is not configured" would have to walk all eighteen. This answers it once.
+     *
+     * Deliberately NOT filtered by `ownerScope`. A missing environment variable is a fact about the
+     * APPLICATION: `ASANA_CLIENT_ID` is absent for everybody, and hiding it on the person's screen
+     * because Asana also admits a tenant connection would make the same gap visible or invisible
+     * depending on which settings page somebody happened to open.
+     */
+    const configurationGaps = useMemo(() => providers
+        .filter((provider) => (provider.missingRegistration ?? []).length > 0)
+        .map((provider) => ({
+        providerRef: provider.providerRef,
+        envVarNames: (provider.missingRegistration ?? []).map((slot) => slot.envVarName),
+    })), [providers]);
+    const selected = useMemo(() => available.find((provider) => provider.providerRef === selectedRef), [available, selectedRef]);
+    // Answers belong to the provider they were typed for. Clearing on change is what stops a value
+    // meant for one vendor being submitted to another when somebody changes their mind mid-form.
+    const chooseProvider = useCallback((ref) => {
+        setSelectedRef(ref);
+        setAnswers({});
+        setDelegationChoice('');
+        setError(null);
+    }, []);
+    /**
+     * What this provider admits at the scope in play, and the one the connect will carry.
+     *
+     * `delegationChoice` is only ever set by the chooser below, which renders solely when the provider
+     * declares more than one. For the ordinary provider `delegations` has a single member and that
+     * member IS the answer — nothing is asked and nothing is assumed.
+     */
+    const delegations = useMemo(() => (selected === undefined ? [] : admissibleDelegationsForScope(selected, ownerScope)), [ownerScope, selected]);
+    const delegation = delegations.length === 1
+        ? delegations[0]
+        : delegations.find((candidate) => candidate === delegationChoice);
+    const [savedNotice, setSavedNotice] = useState(null);
+    /**
+     * The two acts behind one button, branching on the provider's own auth method.
+     *
+     * An authorization flow ENDS THE PAGE — the browser leaves for the vendor and returns to a fresh
+     * load. A typed credential ends in a stored row and the person stays here. Sharing a handler is
+     * right because the person's intent is the same ("connect this"); sharing the OUTCOME would not be,
+     * which is why only one of the branches navigates.
+     */
+    const handleConnect = useCallback(async () => {
+        // `delegation` undefined means the provider declares several and none is chosen yet. The button
+        // is disabled in that state; the guard is here because a disabled control is a courtesy and this
+        // is the statement that a target is never assembled with a delegation nobody chose.
+        if (selected === undefined || ownerId === null || delegation === undefined)
+            return;
+        setBusy(true);
+        setError(null);
+        setSavedNotice(null);
+        const target = buildConnectionTarget({ ownerScope, ownerId, delegation, signedInUserId: user?._id ?? null });
+        try {
+            if (selected.authMethods?.includes(ProviderAuthMethod.OAUTH2_AUTHORIZATION_CODE) ?? false) {
+                const { authorizeUrl } = await getManualCallsHttpClient().startProviderConnection(selected.providerRef, { target, connectionParameters: answers });
+                // The browser leaves. No state is set afterwards: this component is about to be unmounted by
+                // a navigation, and a `setState` here would be a React warning on the way out.
+                window.location.href = authorizeUrl;
+                return;
+            }
+            // Only the values the provider DECLARED, so a stale answer left over from a field that is no
+            // longer offered cannot be posted. The route re-checks this; sending less is still the honest
+            // thing for the screen to do.
+            const declared = new Set((selected.credentialFields ?? []).map((field) => field.slug));
+            const values = Object.fromEntries(Object.entries(answers).filter(([slug, value]) => declared.has(slug) && value.trim() !== ''));
+            await getManualCallsHttpClient().storeProviderCredential(selected.providerRef, { target, values });
+            // The typed values are cleared once stored. They are secrets, and a form that keeps them
+            // on screen after they have been sealed is holding them for no reason.
+            setAnswers({});
+            setSavedNotice(t('credentialStoredNotice'));
+            setBusy(false);
+        }
+        catch (e) {
+            if (isWildoBackendError(e))
+                throw e;
+            setError(t('errorGeneric'));
+            setBusy(false);
+        }
+    }, [answers, delegation, ownerId, ownerScope, selected, t, user?._id]);
+    if (!isReady)
+        return null;
+    const providerOptions = available.map((provider) => ({
+        value: provider.providerRef,
+        // The ref VERBATIM. There is no authored label for an open vocabulary of vendors, and deriving
+        // words from an identifier would invent display text no translator can reach.
+        label: provider.providerRef,
+    }));
+    const oauth2 = selected?.authMethods?.includes(ProviderAuthMethod.OAUTH2_AUTHORIZATION_CODE) ?? false;
+    const missing = selected?.missingRegistration ?? [];
+    const parameters = selected?.connectionParameters ?? [];
+    const credentialFields = selected?.credentialFields ?? [];
+    /** What the authorization will REQUEST — rendered before the button, never only after consent. */
+    const scopes = selected?.scopes ?? [];
+    const unanswered = (oauth2 ? parameters : credentialFields.filter((f) => f.required).map((f) => f.slug))
+        .some((key) => (answers[key] ?? '').trim() === '');
+    return (_jsxs("div", { className: "flex flex-col gap-section", children: [_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx("h3", { className: "text-base font-semibold tracking-tight", children: t('pageTitle') }), _jsx(Text, { className: "text-sm text-muted-foreground", children: t('pageDescription') })] }), outcome.connected !== undefined && (_jsx(Alert, { children: _jsx(AlertDescription, { children: t('connectedNotice') }) })), outcome.connectionError === 'declined' && (_jsx(Alert, { children: _jsx(AlertDescription, { children: t('declinedNotice') }) })), outcome.connectionError !== undefined && outcome.connectionError !== 'declined' && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: t('failedNotice') }) })), savedNotice && _jsx(Alert, { children: _jsx(AlertDescription, { children: savedNotice }) }), error && _jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) }), configurationGaps.length > 0 && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: _jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('configurationGapsHeading') }), _jsx(Text, { className: "text-xs", children: t('configurationGapsDescription') }), _jsx("ul", { className: "list-disc pl-4", children: configurationGaps.map((gap) => (_jsxs("li", { className: "text-xs", children: [gap.providerRef, ': ', gap.envVarNames.join(', ')] }, gap.providerRef))) })] }) }) })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: t('chooseProviderHeading') }) }), _jsxs(CardContent, { className: "flex flex-col gap-group", children: [loading ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('loading') })) : providerOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('empty') })) : (_jsxs(_Fragment, { children: [_jsx(Select, { name: "providerRef", schema: PROVIDER_REF_SCHEMA, options: providerOptions, value: selectedRef, placeholder: t('choosePlaceholder'), onChange: chooseProvider }), selected !== undefined && (_jsxs("div", { className: "flex flex-col gap-group", children: [missing.length > 0 && (_jsx(Alert, { variant: "destructive", children: _jsxs(AlertDescription, { children: [t('notRegisteredNotice'), ' ', missing.map((slot) => slot.envVarName).join(', ')] }) })), !oauth2 && missing.length === 0 && (_jsx(Text, { className: "text-xs text-muted-foreground", children: t('pastedCredentialNotice') })), delegations.length > 1 && (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('delegationHeading') }), _jsx(Text, { className: "text-xs text-muted-foreground", children: t('delegationDescription') }), _jsx(Select, { name: "delegation", schema: DELEGATION_SCHEMA, options: delegations.map((mode) => ({
+                                                            value: mode,
+                                                            label: t(mode === ExternalProvider_Connection_DelegationMode.SERVICE
+                                                                ? 'delegationServiceOption'
+                                                                : 'delegationUserOption'),
+                                                        })), value: delegationChoice, placeholder: t('delegationPlaceholder'), onChange: setDelegationChoice })] })), oauth2 && scopes.length > 0 && (_jsxs(Text, { className: "text-xs text-muted-foreground", children: [t('scopesPrefix'), ' ', scopes.join(', ')] })), (oauth2 ? parameters.length > 0 : credentialFields.length > 0) && (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: t('parametersHeading') }), _jsx(Text, { className: "text-xs text-muted-foreground", children: t('parametersDescription') })] })), (oauth2
+                                                ? parameters.map((name) => ({ key: name, label: name, description: undefined }))
+                                                : credentialFields.map((field) => ({ key: field.slug, label: field.slug, description: field.description }))).map((field) => (_jsxs("div", { className: "flex flex-col gap-item-xs", children: [_jsx(Text, { className: "text-sm font-medium", children: field.label }), field.description !== undefined && (_jsx(Text, { className: "text-xs text-muted-foreground", children: field.description })), _jsx(InputRoot, { "aria-label": field.label, 
+                                                        // A credential is typed into a password field; a connection parameter — which
+                                                        // cloud, which directory — is not a secret and is shown.
+                                                        type: oauth2 ? 'text' : 'password', value: answers[field.key] ?? '', onChange: (event) => setAnswers((previous) => ({ ...previous, [field.key]: event.target.value })) })] }, field.key))), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.DEFAULT, disabled: busy
+                                                        || ownerId === null
+                                                        || selected.notConnectableBecause === ProviderConnectabilityBlocker.APPLICATION_NOT_REGISTERED
+                                                        || unanswered
+                                                        || delegation === undefined, onClick: handleConnect, children: busy ? t('connectingButton') : t('connectButton') }) })] }))] })), _jsx(Text, { className: "text-xs text-muted-foreground", children: t('disconnectNotice') })] })] })] }));
+};
+//# sourceMappingURL=AppPage_ConnectedAccountsSettings.js.map

package/dist/esm/components/settings/AppPage_ConnectedAccountsSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppPage_ConnectedAccountsSettings.js","sourceRoot":"","sources":["../../../../src/components/settings/AppPage_ConnectedAccountsSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * AppPage_ConnectedAccountsSettings — connecting a third-party account, at either owner scope.\n *\n * A bespoke `ENGINE_PANEL`, and the reason is the shape of the act rather than the shape of the data.\n * The stored credentials ARE a resource and the generic surface beside this one lists, inspects and\n * deletes them perfectly. What it cannot do is CONNECT: that is not a row somebody creates, it is a\n * flow that leaves the application, obtains consent at a vendor, and returns with a grant nobody\n * typed. A resource screen has no mechanism for an action of that shape.\n *\n * ## Nothing is typed by hand\n *\n * The provider comes from a SELECT over what the application declares; the credential fields come\n * from that provider's own secrets contract. Both were free text until this panel existed, which is\n * how somebody ends up typing `secretSlug` into a box and storing a grant in a slot nothing reads.\n *\n * ## The flow follows the AUTH METHOD\n *\n * A connect surface cannot be one form. A vendor with an authorization flow gets the consent round\n * trip; a vendor whose credential is typed gets a form over the fields IT declares. One button for\n * both would be wrong for whichever it was not built around.\n *\n * ## A provider this deployment cannot connect is SHOWN, never hidden\n *\n * When the application has not registered with a vendor, the panel names the environment variables an\n * operator must set. Removing the provider would answer \"we do not support Asana\", which is false and\n * unfixable; naming `ASANA_CLIENT_ID` is true and is the thing that gets it set.\n *\n * ## One component, both scopes\n *\n * `ownerScope` decides whose account is being connected — a person's own, or the tenant's. The panel\n * is otherwise identical because the ACT is identical, and duplicating it would guarantee the two\n * drift. What must never be shared is the DATA: a person's connection and a tenant's shared\n * integration have different owners, different authorization and different readers, and the scope is\n * what keeps them apart at every call this panel makes.\n *\n * assurance-control: WILDO.IDENTITY.DELEGATED_AUTHORIZATION — the surface on which a principal\n * authorizes this application to act toward a named third party on their behalf.\n */\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { z } from 'zod';\nimport { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';\nimport { isWildoBackendError, ProviderAuthMethod, ProviderConnectabilityBlocker } from '@wildo-ai/saas-models';\nimport {\n  ExternalProvider_Connection_DelegationMode,\n  ExternalProvider_Connection_OwnerScope,\n} from '@wildo-ai/external-connectors-models';\nimport { Card, CardContent, CardHeader, CardTitle } from '~wildo-frontend-lib/components/sections/card';\nimport { Button, ButtonVariants_Variant } from '~wildo-frontend-lib/components/actions/button';\nimport { InputRoot } from '~wildo-frontend-lib/components/form/controls/input';\nimport { Select } from '~wildo-frontend-lib/components/form/controls/enum/select';\nimport { Text } from '~wildo-frontend-lib/components/typography/text';\nimport { Alert, AlertDescription } from '~wildo-frontend-lib/components/overlays/containers/alert';\nimport { useI18n } from '~wildo-frontend-lib/core/i18n/useI18n';\nimport { useUserOrgs } from '~wildo-frontend-lib/core/security/useUserOrgs';\nimport {\n  getManualCallsHttpClient,\n  type ConnectableProviderView,\n} from '~wildo-frontend-lib/core/requests/wildo-http-client-manual-calls.frontend.service';\n\nconst COMPONENT = FrontendComponentType.APP_LAYOUTS_CONNECTED_ACCOUNTS_SETTINGS;\n\n/** The select's schema. A provider ref is an open identifier, so the control validates shape only. */\nconst PROVIDER_REF_SCHEMA = z.string().min(1);\n/** The chooser's own shape. Its OPTIONS are the provider's declared delegations, never this. */\nconst DELEGATION_SCHEMA = z.string().min(1);\n\n/**\n * The providers connectable AT THIS SCOPE.\n *\n * Exported and named because it is the panel's one substantive claim: a provider admitting only\n * ORGANIZATION connections must never be offered on a person's screen, and vice versa — offering it\n * renders an action that answers 403 at the start leg.\n *\n * It deliberately does NOT filter on `connectable`. A provider this deployment cannot connect is\n * still offered, because the panel's answer for it is the missing configuration rather than silence.\n */\nexport const selectProvidersForScope = (\n  providers: readonly ConnectableProviderView[],\n  ownerScope: ExternalProvider_Connection_OwnerScope,\n): ConnectableProviderView[] => providers.filter((provider) => provider.admissibleConnections.some(\n  (shape) => shape.ownerScope === ownerScope,\n));\n\n/**\n * ON WHOSE BEHALF this provider admits a connection at this scope — DERIVED, never assumed.\n *\n * The panel used to send `delegation: SERVICE` for every connect, at both scopes. That is one of the\n * five declared shapes, so it worked by coincidence for the providers that happen to declare it and\n * answered `409 CONNECTION_NOT_ADMISSIBLE` for the rest — the start leg checks the exact\n * (ownerScope, delegation) PAIR against what the provider admits, and a scope does not imply a\n * delegation.\n *\n * Measured across the generated catalogue on 2026-09-10, which is why this is a derivation rather\n * than a better constant: at ORGANIZATION scope, 75 vendors declare `USER` and 39 declare `SERVICE`.\n * A hard-coded `SERVICE` was therefore wrong for the larger half — `asana` among them, which is how\n * this surfaced: the provider was listed, the button rendered, and the vendor was never reached.\n *\n * The pair is the provider's own statement, so the panel reads it rather than the person supplying\n * it. Where a provider declares BOTH delegations for one scope — 27 vendors do, `box`, `dropbox`,\n * `gmail` and `google-calendar` among them — the declaration genuinely does not decide, and only\n * then is there a question to put to anybody. See `.claude/rules/derive-before-you-ask.md`.\n */\nexport const admissibleDelegationsForScope = (\n  provider: ConnectableProviderView,\n  ownerScope: ExternalProvider_Connection_OwnerScope,\n): ExternalProvider_Connection_DelegationMode[] => {\n  // The view types both members as `string` — it is a wire record — so this is where they become\n  // the vocabulary. NARROWED rather than cast: a delegation this build does not know is dropped\n  // instead of being sent to the start leg, which would answer 409 for a value the panel invented.\n  const known = new Set<string>(Object.values(ExternalProvider_Connection_DelegationMode));\n  const delegations: ExternalProvider_Connection_DelegationMode[] = [];\n  for (const shape of provider.admissibleConnections) {\n    if (shape.ownerScope !== ownerScope || !known.has(shape.delegation)) continue;\n    const delegation = shape.delegation as ExternalProvider_Connection_DelegationMode;\n    if (!delegations.includes(delegation)) delegations.push(delegation);\n  }\n  return delegations;\n};\n\n/**\n * The target the start leg is given — assembled here so the shape is TESTABLE, not inlined.\n *\n * `ExternalProvider_ConnectionTargetSchema` refines two fields the panel cannot leave to be\n * inferred, and it refuses in BOTH directions:\n *\n * - a `USER`-delegated call MUST name `actingForUserId` — \"a delegated call acts FOR someone, and\n *   the user it acts for is what makes it permissible\";\n * - a `SERVICE` call MUST NOT, because naming a person there \"reads as delegation the runtime will\n *   not perform, which is worse than an error: the call succeeds as the wrong identity\".\n *\n * The panel sent neither until 2026-09-10, so every `USER`-delegated connect answered\n * `400 VALIDATION_FAILED` — and that refusal names no field, so the screen could only report a\n * generic failure. It was invisible because the shape that WORKS is `SERVICE`-delegated: `USER` at\n * ORGANIZATION scope is what 75 of the harvested vendors declare, `asana` among them, and it is\n * exactly the half nobody had driven.\n *\n * `actingForUserId` is the SIGNED-IN person and is independent of `ownerId`: a tenant-owned\n * connection acting for one of its members carries the organization in `ownerId` and the person\n * here. At USER scope the two coincide, which is why one field cannot serve both.\n *\n * `ownerId` is omitted for APPLICATION, which the schema likewise refuses — \"an application-owned\n * connection has exactly one instance, so an ownerId here names something that does not exist\".\n * The Settings Hub renders only USER and ORGANIZATION today, so that arm is unreachable from this\n * panel; it is handled because the function is the shape's one statement, and a caller that grows\n * the third scope should not have to rediscover the rule.\n */\nexport const buildConnectionTarget = (input: {\n  ownerScope: ExternalProvider_Connection_OwnerScope;\n  ownerId: string | null;\n  delegation: ExternalProvider_Connection_DelegationMode;\n  signedInUserId: string | null;\n}): {\n  ownerScope: ExternalProvider_Connection_OwnerScope;\n  delegation: ExternalProvider_Connection_DelegationMode;\n  ownerId?: string;\n  actingForUserId?: string;\n} => ({\n  ownerScope: input.ownerScope,\n  delegation: input.delegation,\n  ...(input.ownerScope === ExternalProvider_Connection_OwnerScope.APPLICATION || input.ownerId === null\n    ? {}\n    : { ownerId: input.ownerId }),\n  ...(input.delegation === ExternalProvider_Connection_DelegationMode.USER && input.signedInUserId !== null\n    ? { actingForUserId: input.signedInUserId }\n    : {}),\n});\n\n/**\n * What the callback left in the URL on its way back. Read once — see the panel's mount.\n *\n * Two shapes arrive here, and they are different acts. `connectionError` is a FINISHED outcome the\n * callback already decided — a refusal at the vendor, or an attempt it could not recognise. `state`\n * and `code` are an approval that is NOT yet redeemed: the callback cannot redeem it, because a\n * vendor redirect carries no bearer token, so it hands the approval to this screen to finish.\n */\nconst readReturnOutcome = (): {\n  connected?: string;\n  connectionError?: string;\n  state?: string;\n  code?: string;\n} => {\n  if (typeof window === 'undefined') return {};\n  const params = new URLSearchParams(window.location.search);\n  return {\n    connected: params.get('connected') ?? undefined,\n    connectionError: params.get('connectionError') ?? undefined,\n    state: params.get('state') ?? undefined,\n    code: params.get('code') ?? undefined,\n  };\n};\n\n/**\n * Take the approval out of the address bar once it has been redeemed.\n *\n * `replaceState` rather than a navigation: the entry is REPLACED, so the code does not sit in\n * history for a back button to return to, and no re-render is triggered. It is single-use at the\n * backend regardless — this is about not leaving it lying in the URL, in a referrer, or in whatever\n * the browser syncs.\n */\nconst clearApprovalFromAddressBar = (): void => {\n  if (typeof window === 'undefined') return;\n  const url = new URL(window.location.href);\n  url.searchParams.delete('state');\n  url.searchParams.delete('code');\n  window.history.replaceState(window.history.state, '', url.toString());\n};\n\nexport interface ConnectedAccountsSettingsProps {\n  /**\n   * WHOSE account is being connected.\n   *\n   * A prop rather than two components: the act is identical and duplicating it would guarantee the\n   * two screens drift. The DATA never mixes — every call this panel makes carries the scope.\n   */\n  ownerScope: ExternalProvider_Connection_OwnerScope;\n}\n\nexport const AppPage_ConnectedAccountsSettings: React.FC<Partial<ConnectedAccountsSettingsProps>> = ({\n  // Defaults to the person's own, which is the destination this panel was built for; the\n  // organization surface passes the scope explicitly.\n  ownerScope = ExternalProvider_Connection_OwnerScope.USER,\n}) => {\n  const { tComponent, isReady } = useI18n({ component: COMPONENT });\n  const { user, currentOrganizationId } = useUserOrgs() as {\n    user?: { _id?: string };\n    currentOrganizationId?: string | null;\n  };\n\n  const t = useCallback((key: string) => tComponent(COMPONENT, key), [tComponent]);\n\n  /**\n   * WHOSE account, resolved for the scope in play.\n   *\n   * The backend re-checks it — a USER target must be the caller, an ORGANIZATION target goes through\n   * the membership port — so supplying it is a statement of intent rather than a decision.\n   */\n  const ownerId = ownerScope === ExternalProvider_Connection_OwnerScope.USER\n    ? user?._id ?? null\n    : currentOrganizationId ?? null;\n\n  const [providers, setProviders] = useState<ConnectableProviderView[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [selectedRef, setSelectedRef] = useState<string>('');\n  const [busy, setBusy] = useState(false);\n  /** Set ONLY when the provider declares both delegations for this scope — otherwise derived. */\n  const [delegationChoice, setDelegationChoice] = useState<string>('');\n  /** Answers keyed by the slug the PROVIDER declared — never by a name somebody typed. */\n  const [answers, setAnswers] = useState<Record<string, string>>({});\n\n  const [outcome, setOutcome] = useState(readReturnOutcome);\n\n  /**\n   * Redeem an approval the vendor just granted — the half the callback could not do.\n   *\n   * ## The in-flight request is CACHED, and both mounts subscribe to it\n   *\n   * React 18 mounts an effect, tears it down and mounts it again in StrictMode, and the attempt is\n   * consumed atomically by the backend — so a second redemption answers\n   * `CONNECTION_ATTEMPT_INVALID` and the `catch` would replace a connection that genuinely succeeded\n   * with a failure notice. That is not hypothetical: on the first real consent, 2026-09-10, the\n   * backend logged `[oauth2-connect] account connected` with `grantedScopes: [\"default\",\"identity\"]`\n   * and stored the credential, and the browser then posted a second time and showed a 400.\n   *\n   * A once-guard alone does not fix it, and the way it fails is worse than the defect — the same\n   * trap `TotpEnrollmentMethod.strict-mode-setup.test.tsx` records. A guard PLUS a cancel-on-cleanup\n   * flag means mount 1 starts the request, its cleanup cancels the only subscriber, and the guard\n   * then stops mount 2 from applying anything: the account connects and the panel says nothing at\n   * all. Caching the PROMISE instead lets the remount re-subscribe, so there is one request and the\n   * live mount is the one that renders its result.\n   *\n   * The address bar is cleared beside the request rather than after it, for its own reason: not\n   * leaving an authorization code sitting in history behind a back button.\n   */\n  const redemption = useRef<Promise<{ connected: string }> | null>(null);\n  useEffect(() => {\n    const { state, code } = outcome;\n    if (state === undefined || code === undefined) return;\n    if (redemption.current === null) {\n      clearApprovalFromAddressBar();\n      redemption.current = getManualCallsHttpClient().completeProviderConnection({ state, code });\n    }\n    let cancelled = false;\n    redemption.current\n      .then(({ connected }) => { if (!cancelled) setOutcome({ connected }); })\n      .catch((e: unknown) => {\n        if (isWildoBackendError(e)) throw e;\n        // The callback's own vocabulary, so the notices below stay one set rather than two.\n        if (!cancelled) setOutcome({ connectionError: 'failed' });\n      });\n    return () => { cancelled = true; };\n    // `outcome` is seeded once from the URL and the cached promise is what makes this issue one\n    // request, so this deliberately does not re-run on the outcome it sets itself.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    let cancelled = false;\n    (async () => {\n      try {\n        const res = await getManualCallsHttpClient().listConnectableProviders();\n        if (!cancelled) setProviders(res.providers ?? []);\n      } catch (e: unknown) {\n        if (isWildoBackendError(e)) throw e;\n        if (!cancelled) setError(t('errorGeneric'));\n      } finally {\n        if (!cancelled) setLoading(false);\n      }\n    })();\n    return () => { cancelled = true; };\n  }, [t]);\n\n  const available = useMemo(() => selectProvidersForScope(providers, ownerScope), [providers, ownerScope]);\n\n  /**\n   * EVERY declared provider still missing part of its configuration — not just the selected one.\n   *\n   * A gap found by selecting a provider is a gap found one click at a time, and an operator asking\n   * \"what is not configured\" would have to walk all eighteen. This answers it once.\n   *\n   * Deliberately NOT filtered by `ownerScope`. A missing environment variable is a fact about the\n   * APPLICATION: `ASANA_CLIENT_ID` is absent for everybody, and hiding it on the person's screen\n   * because Asana also admits a tenant connection would make the same gap visible or invisible\n   * depending on which settings page somebody happened to open.\n   */\n  const configurationGaps = useMemo(\n    () => providers\n      .filter((provider) => (provider.missingRegistration ?? []).length > 0)\n      .map((provider) => ({\n        providerRef: provider.providerRef,\n        envVarNames: (provider.missingRegistration ?? []).map((slot) => slot.envVarName),\n      })),\n    [providers],\n  );\n  const selected = useMemo(\n    () => available.find((provider) => provider.providerRef === selectedRef),\n    [available, selectedRef],\n  );\n\n  // Answers belong to the provider they were typed for. Clearing on change is what stops a value\n  // meant for one vendor being submitted to another when somebody changes their mind mid-form.\n  const chooseProvider = useCallback((ref: string) => {\n    setSelectedRef(ref);\n    setAnswers({});\n    setDelegationChoice('');\n    setError(null);\n  }, []);\n\n  /**\n   * What this provider admits at the scope in play, and the one the connect will carry.\n   *\n   * `delegationChoice` is only ever set by the chooser below, which renders solely when the provider\n   * declares more than one. For the ordinary provider `delegations` has a single member and that\n   * member IS the answer — nothing is asked and nothing is assumed.\n   */\n  const delegations = useMemo(\n    () => (selected === undefined ? [] : admissibleDelegationsForScope(selected, ownerScope)),\n    [ownerScope, selected],\n  );\n  const delegation = delegations.length === 1\n    ? delegations[0]\n    : delegations.find((candidate) => candidate === delegationChoice);\n\n  const [savedNotice, setSavedNotice] = useState<string | null>(null);\n\n  /**\n   * The two acts behind one button, branching on the provider's own auth method.\n   *\n   * An authorization flow ENDS THE PAGE — the browser leaves for the vendor and returns to a fresh\n   * load. A typed credential ends in a stored row and the person stays here. Sharing a handler is\n   * right because the person's intent is the same (\"connect this\"); sharing the OUTCOME would not be,\n   * which is why only one of the branches navigates.\n   */\n  const handleConnect = useCallback(async () => {\n    // `delegation` undefined means the provider declares several and none is chosen yet. The button\n    // is disabled in that state; the guard is here because a disabled control is a courtesy and this\n    // is the statement that a target is never assembled with a delegation nobody chose.\n    if (selected === undefined || ownerId === null || delegation === undefined) return;\n    setBusy(true);\n    setError(null);\n    setSavedNotice(null);\n    const target = buildConnectionTarget({ ownerScope, ownerId, delegation, signedInUserId: user?._id ?? null });\n    try {\n      if (selected.authMethods?.includes(ProviderAuthMethod.OAUTH2_AUTHORIZATION_CODE) ?? false) {\n        const { authorizeUrl } = await getManualCallsHttpClient().startProviderConnection(\n          selected.providerRef,\n          { target, connectionParameters: answers },\n        );\n        // The browser leaves. No state is set afterwards: this component is about to be unmounted by\n        // a navigation, and a `setState` here would be a React warning on the way out.\n        window.location.href = authorizeUrl;\n        return;\n      }\n\n      // Only the values the provider DECLARED, so a stale answer left over from a field that is no\n      // longer offered cannot be posted. The route re-checks this; sending less is still the honest\n      // thing for the screen to do.\n      const declared = new Set((selected.credentialFields ?? []).map((field) => field.slug));\n      const values = Object.fromEntries(\n        Object.entries(answers).filter(([slug, value]) => declared.has(slug) && value.trim() !== ''),\n      );\n      await getManualCallsHttpClient().storeProviderCredential(selected.providerRef, { target, values });\n\n      // The typed values are cleared once stored. They are secrets, and a form that keeps them\n      // on screen after they have been sealed is holding them for no reason.\n      setAnswers({});\n      setSavedNotice(t('credentialStoredNotice'));\n      setBusy(false);\n    } catch (e: unknown) {\n      if (isWildoBackendError(e)) throw e;\n      setError(t('errorGeneric'));\n      setBusy(false);\n    }\n  }, [answers, delegation, ownerId, ownerScope, selected, t, user?._id]);\n\n  if (!isReady) return null;\n\n  const providerOptions = available.map((provider) => ({\n    value: provider.providerRef,\n    // The ref VERBATIM. There is no authored label for an open vocabulary of vendors, and deriving\n    // words from an identifier would invent display text no translator can reach.\n    label: provider.providerRef,\n  }));\n\n  const oauth2 = selected?.authMethods?.includes(ProviderAuthMethod.OAUTH2_AUTHORIZATION_CODE) ?? false;\n  const missing = selected?.missingRegistration ?? [];\n  const parameters = selected?.connectionParameters ?? [];\n  const credentialFields = selected?.credentialFields ?? [];\n  /** What the authorization will REQUEST — rendered before the button, never only after consent. */\n  const scopes = selected?.scopes ?? [];\n  const unanswered = (oauth2 ? parameters : credentialFields.filter((f) => f.required).map((f) => f.slug))\n    .some((key) => (answers[key] ?? '').trim() === '');\n\n  return (\n    <div className=\"flex flex-col gap-section\">\n      <div className=\"flex flex-col gap-item-xs\">\n        {/* `h3`, not `h2`: the Settings Hub header owns the `h2` for this dialog. */}\n        <h3 className=\"text-base font-semibold tracking-tight\">{t('pageTitle')}</h3>\n        <Text className=\"text-sm text-muted-foreground\">{t('pageDescription')}</Text>\n      </div>\n\n      {/* The return leg's own report. `declined` is NOT destructive — somebody who pressed \"Deny\"\n          made a decision, and dressing it in red tells them they did something wrong. */}\n      {outcome.connected !== undefined && (\n        <Alert><AlertDescription>{t('connectedNotice')}</AlertDescription></Alert>\n      )}\n      {outcome.connectionError === 'declined' && (\n        <Alert><AlertDescription>{t('declinedNotice')}</AlertDescription></Alert>\n      )}\n      {outcome.connectionError !== undefined && outcome.connectionError !== 'declined' && (\n        <Alert variant=\"destructive\"><AlertDescription>{t('failedNotice')}</AlertDescription></Alert>\n      )}\n      {savedNotice && <Alert><AlertDescription>{savedNotice}</AlertDescription></Alert>}\n      {error && <Alert variant=\"destructive\"><AlertDescription>{error}</AlertDescription></Alert>}\n\n      {/*\n        * The whole configuration's gaps, stated once and before anything else.\n        *\n        * Written rather than hidden, which is the decision this panel exists to make visible: a\n        * provider whose registration is absent still appears in the chooser, and this says what an\n        * operator must set for ANY of them to work. An environment variable's NAME is not a secret —\n        * it is the only thing that makes the gap actionable.\n        */}\n      {configurationGaps.length > 0 && (\n        <Alert variant=\"destructive\">\n          <AlertDescription>\n            <div className=\"flex flex-col gap-item-xs\">\n              <Text className=\"text-sm font-medium\">{t('configurationGapsHeading')}</Text>\n              <Text className=\"text-xs\">{t('configurationGapsDescription')}</Text>\n              <ul className=\"list-disc pl-4\">\n                {configurationGaps.map((gap) => (\n                  <li key={gap.providerRef} className=\"text-xs\">\n                    {gap.providerRef}\n                    {': '}\n                    {gap.envVarNames.join(', ')}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </AlertDescription>\n        </Alert>\n      )}\n\n      <Card>\n        <CardHeader><CardTitle>{t('chooseProviderHeading')}</CardTitle></CardHeader>\n        <CardContent className=\"flex flex-col gap-group\">\n          {loading ? (\n            <Text className=\"text-sm text-muted-foreground\">{t('loading')}</Text>\n          ) : providerOptions.length === 0 ? (\n            <Text className=\"text-sm text-muted-foreground\">{t('empty')}</Text>\n          ) : (\n            <>\n              {/* A SELECT over what the application declares. The whole point: a provider ref is\n                  never typed, so it can never be a ref that does not exist. */}\n              <Select\n                name=\"providerRef\"\n                schema={PROVIDER_REF_SCHEMA}\n                options={providerOptions}\n                value={selectedRef}\n                placeholder={t('choosePlaceholder')}\n                onChange={chooseProvider}\n              />\n\n              {selected !== undefined && (\n                <div className=\"flex flex-col gap-group\">\n                  {/* An operator's gap, named rather than hidden. `missingRegistration` carries the\n                      environment variables — which are not secrets, and are the only thing that makes\n                      this actionable. */}\n                  {missing.length > 0 && (\n                    <Alert variant=\"destructive\">\n                      <AlertDescription>\n                        {t('notRegisteredNotice')}\n                        {' '}\n                        {missing.map((slot) => slot.envVarName).join(', ')}\n                      </AlertDescription>\n                    </Alert>\n                  )}\n\n                  {!oauth2 && missing.length === 0 && (\n                    <Text className=\"text-xs text-muted-foreground\">{t('pastedCredentialNotice')}</Text>\n                  )}\n\n                  {/* ON WHOSE BEHALF — asked ONLY where the provider's own declaration leaves it open.\n                      One admitted delegation is an answer, not a question, so the ordinary provider\n                      renders nothing here and the connect carries what the vendor declared. The 27\n                      that admit both at one scope are a real choice between two different accounts —\n                      the tenant's own token, or a token minted for the person acting — and neither\n                      the panel nor a default may make it on their behalf. */}\n                  {delegations.length > 1 && (\n                    <div className=\"flex flex-col gap-item-xs\">\n                      <Text className=\"text-sm font-medium\">{t('delegationHeading')}</Text>\n                      <Text className=\"text-xs text-muted-foreground\">{t('delegationDescription')}</Text>\n                      <Select\n                        name=\"delegation\"\n                        schema={DELEGATION_SCHEMA}\n                        options={delegations.map((mode) => ({\n                          value: mode,\n                          label: t(mode === ExternalProvider_Connection_DelegationMode.SERVICE\n                            ? 'delegationServiceOption'\n                            : 'delegationUserOption'),\n                        }))}\n                        value={delegationChoice}\n                        placeholder={t('delegationPlaceholder')}\n                        onChange={setDelegationChoice}\n                      />\n                    </div>\n                  )}\n\n                  {/* WHAT THIS WILL ASK THE VENDOR FOR, before the button that asks for it.\n                      *\n                      * The scopes are the substance of the consent: `slack` requests THIRTY of them,\n                      * `gitlab` asks for `api`, and a panel that sends somebody to a vendor without\n                      * naming them is asking for a signature on an unread page. The catalogue has\n                      * carried `scopes` since the route was written and nothing rendered it — the\n                      * label existed too, authored and never wired.\n                      *\n                      * VERBATIM, and deliberately: a scope is the vendor's own token, it is the\n                      * string the vendor's own consent screen is about to show, and there is no\n                      * authored label for an open vocabulary spanning every provider. Prettifying\n                      * `channels:write.invites` into words would invent display text no translator\n                      * can reach and would no longer match what the vendor says next. */}\n                  {oauth2 && scopes.length > 0 && (\n                    <Text className=\"text-xs text-muted-foreground\">\n                      {t('scopesPrefix')}\n                      {' '}\n                      {scopes.join(', ')}\n                    </Text>\n                  )}\n\n                  {/* THE DECLARED FIELDS — for an authorization flow, the placeholders its own URLs\n                      carry; for a typed credential, the slots the provider's secrets contract names.\n                      Either way the form knows what to ask for, and nobody types a slug. */}\n                  {(oauth2 ? parameters.length > 0 : credentialFields.length > 0) && (\n                    <div className=\"flex flex-col gap-item-xs\">\n                      <Text className=\"text-sm font-medium\">{t('parametersHeading')}</Text>\n                      <Text className=\"text-xs text-muted-foreground\">{t('parametersDescription')}</Text>\n                    </div>\n                  )}\n\n                  {(oauth2\n                    ? parameters.map((name) => ({ key: name, label: name, description: undefined as string | undefined }))\n                    : credentialFields.map((field) => ({ key: field.slug, label: field.slug, description: field.description }))\n                  ).map((field) => (\n                    <div key={field.key} className=\"flex flex-col gap-item-xs\">\n                      <Text className=\"text-sm font-medium\">{field.label}</Text>\n                      {field.description !== undefined && (\n                        <Text className=\"text-xs text-muted-foreground\">{field.description}</Text>\n                      )}\n                      <InputRoot\n                        aria-label={field.label}\n                        // A credential is typed into a password field; a connection parameter — which\n                        // cloud, which directory — is not a secret and is shown.\n                        type={oauth2 ? 'text' : 'password'}\n                        value={answers[field.key] ?? ''}\n                        onChange={(event) => setAnswers((previous) => ({ ...previous, [field.key]: event.target.value }))}\n                      />\n                    </div>\n                  ))}\n\n                  <div className=\"flex justify-end\">\n                    <Button\n                      size={ButtonSize.SM}\n                      variant={ButtonVariants_Variant.DEFAULT}\n                      disabled={\n                        busy\n                        || ownerId === null\n                        || selected.notConnectableBecause === ProviderConnectabilityBlocker.APPLICATION_NOT_REGISTERED\n                        || unanswered\n                        || delegation === undefined\n                      }\n                      onClick={handleConnect}\n                    >\n                      {busy ? t('connectingButton') : t('connectButton')}\n                    </Button>\n                  </div>\n                </div>\n              )}\n            </>\n          )}\n\n          {/*\n            * A standing note, not a banner: it is true all the time rather than the report of\n            * something that just happened.\n            *\n            * Removing a connection deletes THIS application's copy of the authorization and tells the\n            * provider nothing — the token stays valid there until it expires on its own, and a refresh\n            * token frequently never does. Somebody who presses Disconnect reasonably concludes they\n            * have withdrawn access, and that conclusion is not quite true.\n            */}\n          <Text className=\"text-xs text-muted-foreground\">{t('disconnectNotice')}</Text>\n        </CardContent>\n      </Card>\n    </div>\n  );\n};\n"]}