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

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

@@ -1,69 +1,150 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
- * AppPage_ConnectedAccountsSettings — the Settings Hub "Connected accounts" connect panel.
+ * 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
+ * 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, so until this existed the
- * whole outbound-authorization lane — controller, exchange, refresher, encrypted store, migrations —
- * had no surface that could begin it.
- *
- * ## Two reads, deliberately not one
- *
- * `listConnectableProviders()` answers what MAY be connected; the sibling resource list answers what
- * IS. Merging them would make "you have connected nothing" and "there is nothing to connect"
- * indistinguishable — and the first of those is the state every person starts in, which is precisely
- * when they need the second question answered.
- *
- * ## USER scope only, and that is not a simplification
- *
- * This panel lives under the person's own settings, so it offers only connections the provider admits
- * as USER-owned. A tenant's shared integration is the administrator's screen next door
- * (`provider-credentials`), and the two must never be merged: one is an individual's own account that
- * nobody else may see or spend, the other is a shared credential an administrator configures for
- * everyone. There is no cross-scope defaulting anywhere in this lane — a person with no credential of
- * their own is refused rather than quietly spending the organization's.
- *
- * ## Why it navigates instead of following a redirect
- *
- * The start leg answers with a URL. A 302 would be followed by this fetch, produce an opaque
- * cross-origin response, and render the vendor's consent screen into a response body nobody sees. So
- * the panel assigns `window.location.href` and the browser leaves — which is also why the OUTCOME
- * arrives back as a query parameter rather than as a promise resolving: the return trip is a fresh
- * page load from the vendor, not a continuation of this component.
- *
- * i18n follows the framework convention: `useI18n({ component })` requests this component's label
- * namespace, the panel gates rendering on `isReady` so it never flashes raw key paths, and a thin
- * `t(key)` reads each label. Copy is owned by the labelling pipeline (sibling `.labels.ts`) — no
- * hardcoded strings, and no humanized provider ref either: a provider identifier is an open
- * vocabulary with no authored label, so it is rendered verbatim rather than invented from its own
- * characters.
- *
- * assurance-control: WILDO.IDENTITY.DELEGATED_AUTHORIZATION — the surface on which a person
+ * 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, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { z } from 'zod';
 import { ButtonSize, FrontendComponentType } from '@wildo-ai/presets-components-models';
-import { isWildoBackendError } from '@wildo-ai/saas-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 outcome the callback wrote into the URL on its way back.
+ * The providers connectable AT THIS SCOPE.
  *
- * Read once, from `window.location`, because this component did not survive the round trip — the
- * browser left for the vendor and came back on a fresh page load. Read as a plain string rather than
- * branched into a closed vocabulary: the callback's `connected` value is a provider ref, which is an
- * open set.
+ * 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')
@@ -72,45 +153,99 @@ const readReturnOutcome = () => {
     return {
         connected: params.get('connected') ?? undefined,
         connectionError: params.get('connectionError') ?? undefined,
+        state: params.get('state') ?? undefined,
+        code: params.get('code') ?? undefined,
     };
 };
 /**
- * The providers THIS person may connect for themselves.
- *
- * Named and exported rather than inlined because it is the panel's one substantive claim, and both
- * halves of it are a way for a button to be DEAD on press:
+ * Take the approval out of the address bar once it has been redeemed.
  *
- *   - a provider admitting only ORGANIZATION-owned connections belongs on the administrator's screen
- *     next door; offering it here renders a Connect button that answers 403;
- *   - a provider whose credential is pasted has no authorization flow to start, so its button would
- *     have nowhere to navigate.
- *
- * The two filters look interchangeable and are not: dropping the first shows an action the person is
- * not entitled to, dropping the second shows an action that does not exist.
+ * `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.
  */
-export const selectPersonallyConnectableProviders = (providers) => providers.filter((provider) => provider.connectable
-    && provider.admissibleConnections.some((shape) => shape.ownerScope === ExternalProvider_Connection_OwnerScope.USER));
-export const AppPage_ConnectedAccountsSettings = () => {
+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 } = useUserOrgs();
+    const { user, currentOrganizationId } = useUserOrgs();
     const t = useCallback((key) => tComponent(COMPONENT, key), [tComponent]);
     /**
-     * Whose account is being connected — always the caller's own.
+     * WHOSE account, resolved for the scope in play.
      *
-     * Sent explicitly because the target schema is the SAME one the call leg uses, and there an owner
-     * genuinely varies. The backend does not trust this value: it re-checks `ownerId === callerId` and
-     * refuses anything else, so supplying it is a statement of intent rather than a decision.
+     * 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 selfUserId = user?._id ?? null;
+    const ownerId = ownerScope === ExternalProvider_Connection_OwnerScope.USER
+        ? user?._id ?? null
+        : currentOrganizationId ?? null;
     const [providers, setProviders] = useState([]);
     const [loading, setLoading] = useState(true);
-    const [busyRef, setBusyRef] = useState(null);
     const [error, setError] = useState(null);
-    /** Answers to a provider's `{placeholders}`, per provider ref. Nothing is remembered across a reload. */
+    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({});
-    // Read once on mount. The outcome describes a journey that has already finished; re-reading it on
-    // every render would make the banner reappear after the person dismissed the tab and came back.
-    const [outcome] = useState(readReturnOutcome);
+    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 () => {
@@ -132,53 +267,120 @@ export const AppPage_ConnectedAccountsSettings = () => {
         })();
         return () => { cancelled = true; };
     }, [t]);
-    const personalProviders = useMemo(() => selectPersonallyConnectableProviders(providers), [providers]);
-    const handleConnect = useCallback(async (provider) => {
-        setBusyRef(provider.providerRef);
+    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 {
-            const { authorizeUrl } = await getManualCallsHttpClient().startProviderConnection(provider.providerRef, {
-                // The person connects their OWN account and nobody else's — the backend re-checks
-                // exactly this, so a tampered owner id is refused rather than honoured.
-                target: {
-                    ownerScope: ExternalProvider_Connection_OwnerScope.USER,
-                    ownerId: selfUserId,
-                    delegation: ExternalProvider_Connection_DelegationMode.SERVICE,
-                },
-                connectionParameters: answers[provider.providerRef],
-            });
-            // The browser leaves. No state is set afterwards on purpose: 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;
+            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'));
-            setBusyRef(null);
+            setBusy(false);
         }
-    }, [answers, selfUserId, t]);
-    // Gate on label readiness so the panel never flashes raw key paths.
+    }, [answers, delegation, ownerId, ownerScope, selected, t, user?._id]);
     if (!isReady)
         return null;
-    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') }) })), error && (_jsx(Alert, { variant: "destructive", children: _jsx(AlertDescription, { children: error }) })), _jsx(Text, { className: "text-xs text-muted-foreground", children: t('disconnectNotice') }), loading ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('loading') })) : personalProviders.length === 0 ? (_jsx(Text, { className: "text-sm text-muted-foreground", children: t('empty') })) : (_jsx("div", { className: "flex flex-col gap-group", children: personalProviders.map((provider) => (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: provider.providerRef }) }), _jsxs(CardContent, { className: "flex flex-col gap-group", children: [provider.scopes !== undefined && provider.scopes.length > 0 && (_jsxs(Text, { className: "text-xs text-muted-foreground", children: [t('scopesPrefix'), " ", provider.scopes.join(', ')] })), provider.connectionParameters !== undefined && provider.connectionParameters.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') }), provider.connectionParameters.map((parameter) => (
-                                        // `InputRoot`, not `Input`: the compound `Input` is the SCHEMA-DRIVEN form
-                                        // control and requires a `name` and a Zod `schema`. These fields belong to no
-                                        // resource — they are answers to a vendor's URL, held for the length of one
-                                        // click — so inventing a schema for them would be inventing a model.
-                                        _jsx(InputRoot, { "aria-label": parameter, placeholder: parameter, value: answers[provider.providerRef]?.[parameter] ?? '', onChange: (event) => setAnswers((previous) => ({
-                                                ...previous,
-                                                [provider.providerRef]: {
-                                                    ...previous[provider.providerRef],
-                                                    [parameter]: event.target.value,
-                                                },
-                                            })) }, parameter)))] })), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { size: ButtonSize.SM, variant: ButtonVariants_Variant.DEFAULT, 
-                                        // Every placeholder must be answered: a half-answered set builds a URL that is
-                                        // still not a URL.
-                                        disabled: busyRef === provider.providerRef
-                                            // No identity yet — the auth context has not settled. Pressing now would send
-                                            // an empty owner and be refused for a reason nobody could act on.
-                                            || selfUserId === null
-                                            || (provider.connectionParameters ?? []).some((parameter) => (answers[provider.providerRef]?.[parameter] ?? '').trim() === ''), onClick: () => handleConnect(provider), children: busyRef === provider.providerRef ? t('connectingButton') : t('connectButton') }) })] })] }, provider.providerRef))) }))] }));
+    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