@jskit-ai/connectors-web 0.1.1

package/README.md

@@ -0,0 +1,113 @@
+# Integration configuration fields
+
+`IntegrationConfigurationFields` is a controlled Vue/Vuetify component imported
+from `@jskit-ai/connectors-web/client`. It edits the same configuration accepted
+by `@jskit-ai/connectors-core/shared/configuration`.
+
+```vue
+<IntegrationConfigurationFields
+  v-model="configuration"
+  integration-id="calendar"
+  :provider="googleCalendarDefinition"
+  :field-errors="fieldErrors"
+  :disabled="saving"
+  :callback-url="resolvedCallbackUrl"
+/>
+```
+
+The parent owns loading, saving, optimistic concurrency and navigation, using
+its normal JSKIT `useAddEdit()`/command/resource flow. This component makes no
+HTTP requests and creates no second source of connection state. Model updates
+preserve other integration slots, registrations and extension values.
+
+Provider `settingsFields` metadata supplies labelled select controls when `items`
+are provided and text controls otherwise, with optional hints and placeholders.
+Defaults and applicable fields come from
+`getProviderSettingsSchema(provider, settings).getFieldDefinitions()`, which also
+supports schemas containing custom validators. A provider may select a schema
+from its current settings; changing Redshift deployment type removes fields
+that belong to the other type and shows the new required inputs. The CLI rejects
+mixed fields through that same schema. Clearing optional text omits it
+from the serialized configuration. The parent
+validates with the same provider definitions and saves the returned normalized
+configuration, so forms and CLI edits apply the same defaults and errors.
+For providers with a separately named credential, `apiKeyReferenceLabel`
+customizes the primary reference field's label. Twilio uses **API key secret
+reference** alongside the Account SID and API Key SID settings; the default
+label for other providers remains **API key reference**.
+`apiKeyReferenceHint` customizes the reference hint. PostHog uses it to explain
+that its project token is publishable and cannot read private analytics. The
+saved value still follows the same reference format as CLI configuration.
+
+Providers with multiple `authenticationMethods` get an Authentication selector;
+`authenticationLabels` and `authenticationHint` supply provider-specific copy.
+`settingsFields[].authenticationMethods` controls which fields apply. Changing
+mode removes the old authentication references and settings that no longer
+apply. Selecting OAuth creates a new project-owned registration with editable
+client fields and Env references, without replacing existing registrations. The
+App registration selector can then choose an existing registration instead.
+With `apiKeySecretOptional`, clearing the primary reference omits it
+instead of saving an empty string. ClickHouse uses this for an empty database
+password. Its separate `none` mode hides credential fields entirely. These
+choices use the same shared validation as a hand-edited configuration file.
+
+`scopesForSettings(settings)` limits the displayed permission choices. Changing
+a setting retains selected scopes that still apply and removes incompatible
+ones, then selects any newly required scopes. Snowflake uses this for its
+optional role; clearing the role restores its required default-role scope.
+Optional choices stay unselected. Slack uses this for its user and bot identities. The shared parser rejects
+an incompatible permission in imported JSON; it does not silently accept a
+permission that the form cannot display. Changing back does not restore removed
+permissions.
+
+Scope entries with `required: true` render as disabled checkboxes. The parent
+initializes these through the provider's recommended defaults, and shared
+configuration validation rejects missing required permissions. LinkedIn requires
+OpenID and profile while leaving email and publishing optional.
+
+Providers declaring multiple `oauthGrantTypes` get an **OAuth flow** selector.
+`oauthGrantHint` explains the credential choice. Switching to client credentials
+removes the callback field and its saved reference, filters incompatible scopes,
+and changes a personal account mode to the provider's first non-personal mode.
+The client authentication method follows the provider's grant-specific methods.
+Switching back requires entering the callback reference again and explicitly
+selecting the needed permissions. The registration's client ID and secret
+reference remain editable; use the credentials belonging to the chosen flow.
+`getProviderScopes` supplies the same choices used by CLI validation.
+Other integrations sharing that registration are preserved; validation reports
+any newly incompatible configuration instead of silently rewriting those slots.
+
+Panels provide details, registration credentials and permissions. The default
+credential field edits a **reference**, suitable for developer tooling. A host
+can use the `credential` slot to provide its secret-entry control; it must save
+the secret through its secret service and keep only a reference in the model.
+The slot receives `reference` and `disabled`. Registrations belong to the
+application and use `source: "own"`. `access` provides a place for the host's
+existing permissions editor.
+
+The component handles OAuth configurations with pre-existing slots and
+registrations, API-key configurations and declared no-credential modes. The
+host owns catalogue search, slot creation and persistent file editing; public
+Vibe64 supplies those through its source editor. Account connection and consent
+controls are still pending. The browser fixture is a focused round-trip test,
+not a complete application.
+
+Run `npm exec --no -- playwright test --config
+packages/connectors-web/test/playwright.config.js` from the JSKIT checkout.
+Tests cover compact, medium and expanded layouts. The config respects managed
+runner base URLs and temporary authentication state when supplied.
+
+Definitions can set `permissionsHint` when permissions represent local operation
+limits rather than an OAuth consent grant, as for S3 read/write choices. These
+controls and statically declared permission choices remain visible in token
+mode. Dynamically discovered OAuth permission choices appear only for OAuth or
+service-account authentication; retained discovery metadata does not display
+OAuth consent choices in API-key mode.
+
+`accountModesForSettings(settings)` restricts account choices using the same
+helper as configuration validation. Switching a credential-scoped setting to
+OAuth creates a fresh registration with that setting's supported client
+authentication method. This keeps Notion REST and hosted MCP credentials
+separate; previous registrations remain available for their original slots.
+
+Switching away from OAuth discards an unused own-registration draft whose Client ID is still empty. Registrations with a Client ID or another integration referencing them are preserved. This lets a newly added OAuth provider switch to an API key without an invisible empty registration blocking configuration validation.

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@jskit-ai/connectors-web",
+  "version": "0.1.1",
+  "description": "Shared Vue fields for portable application integration configuration.",
+  "type": "module",
+  "exports": {
+    "./client": "./src/client/index.js"
+  },
+  "dependencies": {
+    "@jskit-ai/connectors-core": "0.1.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13",
+    "vuetify": "^4.0.0"
+  },
+  "jskit": {
+    "kind": "runtime",
+    "capabilities": {
+      "provides": [],
+      "requires": []
+    },
+    "runtime": {
+      "server": {
+        "providers": []
+      },
+      "client": {
+        "providers": []
+      }
+    }
+  }
+}

package/src/client/IntegrationConfigurationFields.vue

@@ -0,0 +1,301 @@
+<script setup>
+import { computed, ref } from "vue";
+import { getProviderAccountModes, getProviderAuthenticationMethods, getProviderClientAuthenticationMethods, getProviderScopes, getProviderSettingsSchema } from "@jskit-ai/connectors-core/shared/configuration";
+
+const props = defineProps({
+  modelValue: { type: Object, required: true },
+  integrationId: { type: String, required: true },
+  provider: { type: Object, required: true },
+  fieldErrors: { type: Object, default: () => ({}) },
+  disabled: Boolean,
+  callbackUrl: { type: String, default: "" }
+});
+const emit = defineEmits(["update:modelValue"]);
+const panels = ref(["details", "credentials"]);
+const integration = computed(() => props.modelValue.integrations[props.integrationId]);
+const registrationId = computed(() => integration.value?.authentication.registrationRef);
+const registration = computed(() => props.modelValue.registrations[registrationId.value]);
+const grantType = computed(() => registration.value?.grantType || "authorization_code");
+const grantOptions = computed(() => (props.provider.oauthGrantTypes || ["authorization_code"]).map((value) => ({
+  value, title: { authorization_code: "User consent", client_credentials: "Service account" }[value] || value
+})));
+const modes = computed(() => getProviderAccountModes(props.provider, integration.value.settings || {}).filter((mode) =>
+  integration.value?.authentication.method !== "oauth2" || grantType.value !== "client_credentials" || mode !== "per-user"
+).map((value) => ({
+  value,
+  title: { shared: "One shared account", "per-user": "Each app user's own account", assistant: "Assistant access" }[value] || value
+})));
+const registrationOptions = computed(() => Object.keys(props.modelValue.registrations));
+const integrationPath = computed(() => `integrations.${props.integrationId}`);
+const registrationPath = computed(() => `registrations.${registrationId.value}`);
+const settingProperties = computed(() => getProviderSettingsSchema(props.provider, integration.value?.settings)?.getFieldDefinitions() || {});
+const authenticationOptions = computed(() => getProviderAuthenticationMethods(props.provider, integration.value.settings).map((value) => ({
+  value, title: props.provider.authenticationLabels?.[value] || { "api-key": "API key", "service-account": "Service account", oauth2: "OAuth", none: "No credentials" }[value] || value
+})));
+const visibleSettings = computed(() => (props.provider.settingsFields || []).filter((field) =>
+  Object.hasOwn(settingProperties.value, field.name) &&
+  (!field.authenticationMethods || field.authenticationMethods.includes(integration.value.authentication.method))
+));
+const visibleScopes = computed(() => getProviderScopes(props.provider, integration.value.settings || {}, grantType.value, integration.value.authentication.method));
+const assistantPermissions = [
+  { value: "ask", title: "Ask each time" }, { value: "always", title: "Always allow" }, { value: "never", title: "Never allow" }
+];
+
+function editAssistantPolicy(changes) {
+  editIntegration({ assistantPolicy: { enabled: true, defaultPermission: "ask", actions: {}, ...integration.value.assistantPolicy, ...changes } });
+}
+
+function editIntegration(changes) {
+  const next = { ...integration.value, ...changes };
+  for (const key of Object.keys(changes)) if (changes[key] === undefined) delete next[key];
+  const registrations = { ...props.modelValue.registrations };
+  const previousRegistration = registrationId.value;
+  if (changes.authentication && next.authentication.method !== "oauth2" && previousRegistration &&
+      registrations[previousRegistration]?.source === "own" && registrations[previousRegistration]?.clientId === "" &&
+      !Object.entries(props.modelValue.integrations).some(([id, value]) =>
+        id !== props.integrationId && value.authentication.registrationRef === previousRegistration)) {
+    delete registrations[previousRegistration];
+  }
+  emit("update:modelValue", {
+    ...props.modelValue,
+    registrations,
+    integrations: { ...props.modelValue.integrations, [props.integrationId]: next }
+  });
+}
+
+function editSetting(field, value) {
+  const settings = { ...integration.value.settings };
+  if (value === undefined || value === "") delete settings[field];
+  else settings[field] = value;
+  if (typeof props.provider.settingsSchema === "function") {
+    const fields = getProviderSettingsSchema(props.provider, settings).getFieldDefinitions();
+    for (const key of Object.keys(settings)) if (!Object.hasOwn(fields, key)) delete settings[key];
+  }
+  const available = getProviderScopes(props.provider, settings, grantType.value, integration.value.authentication.method);
+  const scopes = integration.value.scopes.filter((value) => available.some((scope) => scope.value === value));
+  for (const scope of available) if (scope.required && !scopes.includes(scope.value)) scopes.push(scope.value);
+  const methods = getProviderAuthenticationMethods(props.provider, settings);
+  const credentialScope = props.provider.settingsFields?.find((item) => item.name === field)?.credentialScope;
+  const changedProvider = credentialScope && credentialScope(value) !== credentialScope(integration.value.settings?.[field] ?? settingProperties.value[field]?.defaultTo);
+  const authentication = changedProvider || !methods.includes(integration.value.authentication.method)
+    ? { method: methods[0] } : integration.value.authentication;
+  const accountModes = getProviderAccountModes(props.provider, settings);
+  const accountMode = accountModes.includes(integration.value.accountMode) ? integration.value.accountMode : accountModes[0];
+  if (authentication.method === "oauth2" && !authentication.registrationRef) {
+    editAuthentication("oauth2", { ...integration.value, settings, scopes, authentication, accountMode });
+  } else editIntegration({ settings, scopes, authentication, accountMode });
+}
+
+function editAuthentication(method, current = integration.value) {
+  const settings = { ...current.settings };
+  for (const field of props.provider.settingsFields || []) {
+    if (field.authenticationMethods && !field.authenticationMethods.includes(method)) delete settings[field.name];
+  }
+  const availableScopes = getProviderScopes(props.provider, settings, "authorization_code", method);
+  const scopes = availableScopes.filter(scope => current.scopes.includes(scope.value) || scope.required || (scope.authenticationMethods && scope.recommended)).map(scope => scope.value);
+  if (method === "oauth2") {
+    let id = props.integrationId;
+    let suffix = 2;
+    while (Object.hasOwn(props.modelValue.registrations, id)) id = `${props.integrationId}-${suffix++}`;
+    const prefix = id.toUpperCase().replaceAll("-", "_");
+    const grant = props.provider.oauthGrantTypes?.[0] || "authorization_code";
+    const clientAuthentication = getProviderClientAuthenticationMethods(props.provider, grant, settings)[0];
+    emit("update:modelValue", {
+      ...props.modelValue,
+      integrations: { ...props.modelValue.integrations, [props.integrationId]: {
+        ...current, scopes, authentication: { method, registrationRef: id },
+        ...(current.settings ? { settings } : {})
+      } },
+      registrations: { ...props.modelValue.registrations, [id]: {
+        source: "own", clientId: "",
+        ...(grant === "authorization_code" ? { callbackUrlRef: `env:${prefix}_CALLBACK_URL` } : { grantType: grant }),
+        ...(clientAuthentication !== "client_secret_post" ? { tokenEndpointAuthMethod: clientAuthentication } : {}),
+        ...(clientAuthentication !== "none" ? { clientSecretRef: `env:${prefix}_CLIENT_SECRET` } : {})
+      } }
+    });
+    return;
+  }
+  editIntegration({ scopes, authentication: { method }, ...(current.settings ? { settings } : {}) });
+}
+
+function editSecretReference(value) {
+  const authentication = { ...integration.value.authentication, secretRef: value };
+  if (!value && props.provider.apiKeySecretOptional) delete authentication.secretRef;
+  editIntegration({ authentication });
+}
+
+function editRegistration(field, value) {
+  emit("update:modelValue", {
+    ...props.modelValue,
+    registrations: {
+      ...props.modelValue.registrations,
+      [registrationId.value]: { ...registration.value, [field]: value }
+    }
+  });
+}
+
+function editGrantType(value) {
+  const nextRegistration = { ...registration.value, grantType: value };
+  const methods = getProviderClientAuthenticationMethods(props.provider, value, integration.value.settings || {});
+  if (!methods.includes(nextRegistration.tokenEndpointAuthMethod || "client_secret_post")) nextRegistration.tokenEndpointAuthMethod = methods[0];
+  if (nextRegistration.tokenEndpointAuthMethod === "none") delete nextRegistration.clientSecretRef;
+  if (value === "client_credentials") delete nextRegistration.callbackUrlRef;
+  const allowed = getProviderScopes(props.provider, integration.value.settings || {}, value, integration.value.authentication.method).map((scope) => scope.value);
+  emit("update:modelValue", {
+    ...props.modelValue,
+    registrations: { ...props.modelValue.registrations, [registrationId.value]: nextRegistration },
+    integrations: { ...props.modelValue.integrations, [props.integrationId]: {
+      ...integration.value,
+      accountMode: value === "client_credentials" && integration.value.accountMode === "per-user"
+        ? props.provider.accountModes.find((mode) => mode !== "per-user") : integration.value.accountMode,
+      scopes: integration.value.scopes.filter((scope) => allowed.includes(scope))
+    } }
+  });
+}
+</script>
+
+<template>
+  <v-sheet v-if="integration" class="integration-fields" :aria-label="`${provider.name} configuration`">
+    <v-expansion-panels v-model="panels" multiple variant="accordion" :disabled="disabled">
+      <v-expansion-panel value="details" title="Details">
+        <v-expansion-panel-text>
+          <v-text-field
+            label="Display name" :model-value="integration.displayName || ''" :disabled="disabled"
+            :placeholder="provider.name" :error-messages="fieldErrors[`${integrationPath}.displayName`]"
+            @update:model-value="editIntegration({ displayName: $event || undefined })"
+          />
+          <v-select
+            label="Account used by the application" :items="modes" :model-value="integration.accountMode" :disabled="disabled"
+            :error-messages="fieldErrors[`${integrationPath}.accountMode`]"
+            @update:model-value="editIntegration({ accountMode: $event })"
+          />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
+      <v-expansion-panel value="credentials" title="Credentials">
+        <v-expansion-panel-text>
+          <v-select
+            v-if="authenticationOptions.length > 1"
+            label="Authentication" :items="authenticationOptions" :model-value="integration.authentication.method" :disabled="disabled"
+            :hint="provider.authenticationHint" :persistent-hint="Boolean(provider.authenticationHint)"
+            :error-messages="fieldErrors[`${integrationPath}.authentication.method`]"
+            @update:model-value="editAuthentication"
+          />
+          <template v-for="field in visibleSettings" :key="field.name">
+            <v-autocomplete
+              v-if="field.searchable"
+              :label="field.label" :items="field.items" :disabled="disabled" auto-select-first
+              :model-value="integration.settings?.[field.name] ?? settingProperties[field.name]?.defaultTo"
+              :hint="typeof field.hint === 'function' ? field.hint(integration.settings) : field.hint" persistent-hint :error-messages="fieldErrors[`${integrationPath}.settings.${field.name}`]"
+              @update:model-value="editSetting(field.name, $event)"
+            />
+            <v-select
+              v-else-if="field.items"
+              :label="field.label" :items="field.items" :disabled="disabled"
+              :model-value="integration.settings?.[field.name] ?? settingProperties[field.name]?.defaultTo"
+              :hint="field.hint" persistent-hint :error-messages="fieldErrors[`${integrationPath}.settings.${field.name}`]"
+              @update:model-value="editSetting(field.name, $event)"
+            />
+            <v-text-field
+              v-else
+              :label="field.label" :disabled="disabled" :placeholder="field.placeholder"
+              :model-value="integration.settings?.[field.name] ?? settingProperties[field.name]?.defaultTo ?? ''"
+              :hint="field.hint" persistent-hint :error-messages="fieldErrors[`${integrationPath}.settings.${field.name}`]"
+              @update:model-value="editSetting(field.name, $event)"
+            />
+          </template>
+          <template v-if="['api-key', 'service-account'].includes(integration.authentication.method)">
+            <slot name="credential" :reference="integration.authentication.secretRef" :disabled="disabled">
+              <v-text-field
+                :label="integration.authentication.method === 'service-account' ? provider.serviceAccountReferenceLabel || 'Service-account credential reference' : provider.apiKeyReferenceLabel || 'API key reference'" :model-value="integration.authentication.secretRef" :disabled="disabled"
+                :hint="integration.authentication.method === 'service-account' ? provider.serviceAccountReferenceHint || 'Store the service credential in your environment or secret store and enter its reference here.' : provider.apiKeyReferenceHint || 'Store the API key in your environment or secret store. Enter its reference here, such as env:SERVICE_API_KEY.'"
+                persistent-hint :error-messages="fieldErrors[`${integrationPath}.authentication.secretRef`]"
+                @update:model-value="editSecretReference"
+              />
+            </slot>
+          </template>
+          <template v-else-if="integration.authentication.method === 'oauth2'">
+            <v-select
+              label="App registration" :items="registrationOptions" :model-value="registrationId" :disabled="disabled"
+              :error-messages="fieldErrors[`${integrationPath}.authentication.registrationRef`]"
+              @update:model-value="editIntegration({ authentication: { ...integration.authentication, registrationRef: $event } })"
+            />
+            <template v-if="registration?.source === 'own'">
+              <v-select
+                v-if="grantOptions.length > 1"
+                label="OAuth flow" :items="grantOptions" :model-value="grantType" :disabled="disabled"
+                :hint="provider.oauthGrantHint" :persistent-hint="Boolean(provider.oauthGrantHint)"
+                :error-messages="fieldErrors[`${registrationPath}.grantType`]"
+                @update:model-value="editGrantType"
+              />
+              <v-text-field
+                :label="provider.clientIdLabel || 'Client ID'" :hint="provider.clientIdHint" :persistent-hint="Boolean(provider.clientIdHint)" :model-value="registration.clientId" autocomplete="off" :disabled="disabled"
+                :error-messages="fieldErrors[`${registrationPath}.clientId`]"
+                @update:model-value="editRegistration('clientId', $event)"
+              />
+              <slot v-if="registration.tokenEndpointAuthMethod !== 'none'" name="credential" :reference="registration.clientSecretRef" :disabled="disabled">
+                <v-text-field
+                  label="Client secret reference" :model-value="registration.clientSecretRef" :disabled="disabled"
+                  hint="Use an environment reference such as env:GOOGLE_CLIENT_SECRET. Keep the value outside this file."
+                  persistent-hint :error-messages="fieldErrors[`${registrationPath}.clientSecretRef`]"
+                  @update:model-value="editRegistration('clientSecretRef', $event)"
+                />
+              </slot>
+              <v-text-field
+                v-if="grantType === 'authorization_code'"
+                hint="Reference the callback route implemented by your application and registered with the provider." persistent-hint
+                class="mt-4" label="Callback URL reference" :model-value="registration.callbackUrlRef" :disabled="disabled"
+                :error-messages="fieldErrors[`${registrationPath}.callbackUrlRef`]"
+                @update:model-value="editRegistration('callbackUrlRef', $event)"
+              />
+              <v-text-field v-if="callbackUrl && grantType === 'authorization_code'" label="Callback URL" :model-value="callbackUrl" readonly />
+            </template>
+          </template>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+
+      <v-expansion-panel v-if="visibleScopes.length && (provider.scopes.length || provider.permissionsHint || ['oauth2', 'service-account'].includes(integration.authentication.method))" value="permissions" title="Permissions">
+        <v-expansion-panel-text>
+          <p class="text-body-medium mb-3">{{ provider.permissionsHint || 'Choose what the application needs. The account owner approves these permissions when connecting.' }}</p>
+          <v-checkbox
+            v-for="permission in visibleScopes" :key="permission.value"
+            :label="permission.label" :value="permission.value" :model-value="integration.scopes" :disabled="disabled || permission.required"
+            hide-details @update:model-value="editIntegration({ scopes: $event })"
+          />
+          <p v-if="fieldErrors[`${integrationPath}.scopes`]" role="alert" class="text-error text-body-small mt-2">
+            {{ fieldErrors[`${integrationPath}.scopes`] }}
+          </p>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+      <v-expansion-panel v-if="provider.assistantActions?.length" value="assistant" title="Assistant permissions">
+        <v-expansion-panel-text>
+          <p class="text-body-medium mb-3">These choices control assistant actions for this integration. They do not grant access to the provider or replace your application's permissions.</p>
+          <v-switch
+            label="Allow assistant access" :model-value="integration.assistantPolicy?.enabled ?? true" :disabled="disabled"
+            :error-messages="fieldErrors[`${integrationPath}.assistantPolicy.enabled`]"
+            @update:model-value="editAssistantPolicy({ enabled: $event })"
+          />
+          <v-select
+            label="Manage all permissions" :items="assistantPermissions" :model-value="integration.assistantPolicy?.defaultPermission || 'ask'"
+            :disabled="disabled || integration.assistantPolicy?.enabled === false"
+            hint="Changing this sets every assistant action below to the same choice." persistent-hint
+            :error-messages="fieldErrors[`${integrationPath}.assistantPolicy.defaultPermission`]"
+            @update:model-value="editAssistantPolicy({ defaultPermission: $event, actions: {} })"
+          />
+          <v-select
+            v-for="action in provider.assistantActions" :key="action.value" :label="action.label" :items="assistantPermissions"
+            :model-value="integration.assistantPolicy?.actions?.[action.value] || integration.assistantPolicy?.defaultPermission || 'ask'"
+            :disabled="disabled || integration.assistantPolicy?.enabled === false"
+            :error-messages="fieldErrors[`${integrationPath}.assistantPolicy.actions.${action.value}`]"
+            @update:model-value="editAssistantPolicy({ actions: { ...integration.assistantPolicy?.actions, [action.value]: $event } })"
+          />
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+    <slot name="access" :integration="integration" />
+  </v-sheet>
+</template>
+
+<style scoped>
+.integration-fields { min-width: 0; }
+</style>

package/src/client/index.js

@@ -0,0 +1 @@
+export { default as IntegrationConfigurationFields } from "./IntegrationConfigurationFields.vue";

package/test/configuration.spec.js

@@ -0,0 +1,493 @@
+import { test, expect } from "@playwright/test";
+
+for (const width of [390, 820, 1440]) {
+  test(`Snowflake setting changes select required scopes without restoring optional choices at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 1000 }); await page.goto("/");
+    await page.getByRole("button", { name: "Edit Snowflake", exact: true }).click();
+    const role = page.getByRole("textbox", { name: "Role", exact: true });
+    const permissions = page.getByRole("button", { name: "Permissions", exact: true });
+    const save = page.getByRole("button", { name: "Export configuration", exact: true });
+    await save.click(); const original = JSON.parse(await page.getByTestId("export").textContent());
+    await role.fill("VIBE64_READER"); await permissions.click();
+    const named = page.getByRole("checkbox", { name: "Use role VIBE64_READER (required)", exact: true });
+    await expect(named).toBeChecked(); await expect(named).toBeDisabled();
+    const offline = page.getByRole("checkbox", { name: "Keep access between visits", exact: true });
+    await offline.uncheck(); await role.fill("Inventory & stock");
+    await expect(named).toHaveCount(0); await expect(offline).not.toBeChecked();
+    await expect(page.getByRole("checkbox", { name: "Use role Inventory & stock (required)", exact: true })).toBeChecked();
+    await save.click(); const namedFile = JSON.parse(await page.getByTestId("export").textContent());
+    expect(namedFile.integrations.snowflake.scopes).toEqual(["session:role-encoded:Inventory%20%26%20stock"]);
+    expect(namedFile.integrations.snowflake.extensions).toEqual({ keep: "account" });
+    expect(namedFile.integrations.calendar).toEqual(original.integrations.calendar);
+    await page.getByRole("button", { name: "Leave configuration" }).click(); await page.getByRole("button", { name: "Return to configuration" }).click();
+    await expect(role).toHaveValue("Inventory & stock");
+    await page.getByLabel("Lock form").check(); await expect(role).toBeDisabled(); await page.getByLabel("Lock form").uncheck();
+    await role.fill(""); await save.click(); const defaults = JSON.parse(await page.getByTestId("export").textContent());
+    expect(defaults.integrations.snowflake.scopes).toEqual(["refresh_token"]); expect(defaults.integrations.snowflake.settings.role).toBeUndefined();
+    if (await permissions.getAttribute("aria-expanded") !== "true") await permissions.click();
+    const requiredOffline = page.getByRole("checkbox", { name: "Keep access between visits (required)", exact: true });
+    await expect(requiredOffline).toBeChecked(); await expect(requiredOffline).toBeDisabled();
+    await page.getByLabel("Import configuration JSON").fill(JSON.stringify(namedFile)); await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+    await expect(role).toHaveValue("Inventory & stock"); await expect(offline).not.toBeChecked();
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+  });
+
+  test(`Databricks OAuth flow changes keep file fields, permissions and account identity consistent at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 1000 });
+    await page.goto("/");
+    await page.getByRole("button", { name: "Edit Databricks", exact: true }).click();
+    const flow = page.getByRole("combobox", { name: "OAuth flow", exact: true });
+    const account = page.getByRole("combobox", { name: "Account used by the application", exact: true });
+    const callback = page.getByRole("textbox", { name: "Callback URL reference", exact: true });
+    const client = page.getByRole("textbox", { name: "Client ID", exact: true });
+    const save = page.getByRole("button", { name: "Export configuration", exact: true });
+    const permissions = page.getByRole("button", { name: "Permissions", exact: true });
+    await expect(flow).toHaveValue("User consent"); await expect(account).toHaveValue("Each app user's own account");
+    await expect(callback).toHaveValue("env:DATABRICKS_CALLBACK");
+    await save.click(); const initial = JSON.parse(await page.getByTestId("export").textContent());
+    await page.getByText("User consent", { exact: true }).click();
+    await page.getByRole("option", { name: "Service account", exact: true }).click();
+    await expect(callback).toHaveCount(0); await expect(account).toHaveValue("One shared account");
+    await page.getByText("One shared account", { exact: true }).click();
+    await expect(page.getByRole("option", { name: "Each app user's own account", exact: true })).toHaveCount(0);
+    await page.keyboard.press("Escape");
+    await client.fill("service-client");
+    await permissions.click();
+    const jobs = page.getByRole("checkbox", { name: "Jobs API access for the service account", exact: true });
+    await jobs.check();
+    await expect(page.getByRole("checkbox", { name: "Keep user access between visits", exact: true })).toHaveCount(0);
+    await save.click(); const machine = JSON.parse(await page.getByTestId("export").textContent());
+    expect(machine.registrations.databricks).toEqual({ source: "own", clientId: "service-client", clientSecretRef: "env:DATABRICKS_SECRET",
+      grantType: "client_credentials", tokenEndpointAuthMethod: "client_secret_basic" });
+    expect(machine.integrations.databricks.scopes).toEqual(["all-apis", "jobs"]);
+    expect(machine.integrations.databricks.accountMode).toBe("shared");
+    expect(machine.integrations.databricks.extensions).toEqual({ keep: "workspace" });
+    expect(machine.integrations.calendar).toEqual(initial.integrations.calendar);
+    expect(machine.registrations.google).toEqual(initial.registrations.google);
+    await page.getByLabel("Lock form").check(); await expect(flow).toBeDisabled(); await expect(jobs).toBeDisabled();
+    await page.getByLabel("Lock form").uncheck();
+    await page.getByRole("button", { name: "Leave configuration" }).click();
+    await page.getByRole("button", { name: "Return to configuration" }).click();
+    await expect(flow).toHaveValue("Service account"); await expect(callback).toHaveCount(0);
+    await page.getByText("Service account", { exact: true }).click();
+    await page.getByRole("option", { name: "User consent", exact: true }).click();
+    await expect(callback).toHaveValue("");
+    await save.click();
+    await expect(page.locator(".v-input").filter({ has: callback }).getByText("This value is required.", { exact: true })).toBeVisible();
+    await callback.fill("env:USER_CALLBACK"); await client.fill("user-client");
+    if (await permissions.getAttribute("aria-expanded") !== "true") await permissions.click();
+    await expect(jobs).toHaveCount(0);
+    await page.getByRole("checkbox", { name: "Keep user access between visits", exact: true }).check();
+    await save.click(); const user = JSON.parse(await page.getByTestId("export").textContent());
+    expect(user.registrations.databricks.tokenEndpointAuthMethod).toBe("client_secret_post");
+    expect(user.integrations.databricks.scopes).toEqual(["all-apis", "offline_access"]);
+    const invalid = structuredClone(machine); invalid.integrations.databricks.accountMode = "per-user";
+    await page.getByLabel("Import configuration JSON").fill(JSON.stringify(invalid));
+    await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+    await expect(page.getByText("A service account cannot connect as each app user.", { exact: true })).toBeVisible();
+    await expect(flow).toHaveValue("User consent");
+    await page.getByLabel("Import configuration JSON").fill(JSON.stringify(machine));
+    await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+    await expect(flow).toHaveValue("Service account"); await expect(callback).toHaveCount(0);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+  });
+
+  test(`Redshift deployment changes share CLI validation and remove inactive fields at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 1000 });
+    await page.goto("/");
+    await page.getByRole("button", { name: "Edit Redshift", exact: true }).click();
+    const mode = page.getByRole("combobox", { name: "Deployment type", exact: true });
+    const workgroup = page.getByRole("textbox", { name: "Workgroup name", exact: true });
+    const cluster = page.getByRole("textbox", { name: "Cluster identifier", exact: true });
+    const database = page.getByRole("textbox", { name: "Database", exact: true });
+    const user = page.getByRole("textbox", { name: "Database user (optional)", exact: true });
+    const save = page.getByRole("button", { name: "Export configuration", exact: true });
+    await expect(mode).toHaveValue("Serverless");
+    await expect(workgroup).toHaveValue("analytics"); await expect(cluster).toHaveCount(0); await expect(user).toHaveCount(0);
+    await save.click();
+    await expect(page.getByTestId("export")).toContainText('"workgroup": "analytics"');
+    const original = JSON.parse(await page.getByTestId("export").textContent());
+    await page.getByText("Serverless", { exact: true }).click();
+    await page.getByRole("option", { name: "Provisioned cluster", exact: true }).click();
+    await expect(workgroup).toHaveCount(0); await expect(cluster).toHaveValue(""); await expect(database).toHaveValue("dev");
+    await save.click();
+    await expect(page.getByTestId("export")).toHaveText(JSON.stringify(original, null, 2));
+    await cluster.fill("analytics-cluster"); await user.fill("report_reader"); await save.click();
+    await expect(page.getByTestId("export")).toContainText('"databaseUser": "report_reader"');
+    const provisioned = JSON.parse(await page.getByTestId("export").textContent());
+    expect(provisioned.integrations.redshift.settings).toEqual({ deploymentType: "provisioned", region: "us-east-1", database: "dev", accessKeyIdRef: "env:AWS_ACCESS_KEY_ID", clusterIdentifier: "analytics-cluster", databaseUser: "report_reader" });
+    expect(provisioned.integrations.redshift.extensions).toEqual({ keep: "redshift" });
+    expect(provisioned.integrations.calendar).toEqual(original.integrations.calendar);
+    await page.getByRole("button", { name: "Leave configuration", exact: true }).click();
+    await page.getByRole("button", { name: "Return to configuration", exact: true }).click();
+    await expect(mode).toHaveValue("Provisioned cluster"); await expect(cluster).toHaveValue("analytics-cluster");
+    await page.getByLabel("Lock form").check(); await expect(mode).toBeDisabled(); await page.getByLabel("Lock form").uncheck();
+    await page.getByText("Provisioned cluster", { exact: true }).click();
+    await page.getByRole("option", { name: "Serverless", exact: true }).click();
+    await expect(cluster).toHaveCount(0); await expect(user).toHaveCount(0); await expect(workgroup).toHaveValue("");
+    await workgroup.fill("restored-group"); await expect(workgroup).toHaveValue("restored-group"); await save.click();
+    await expect(page.getByTestId("export")).toContainText('"workgroup": "restored-group"');
+    const restored = JSON.parse(await page.getByTestId("export").textContent());
+    expect(restored.integrations.redshift.settings).toEqual({ deploymentType: "serverless", region: "us-east-1", database: "dev", accessKeyIdRef: "env:AWS_ACCESS_KEY_ID", workgroup: "restored-group" });
+    const mixed = structuredClone(restored); mixed.integrations.redshift.settings.clusterIdentifier = "mixed";
+    await page.getByLabel("Import configuration JSON").fill(JSON.stringify(mixed));
+    await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+    await expect(workgroup).toHaveValue("restored-group"); await expect(cluster).toHaveCount(0);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true);
+    await expect(page.locator(".v-progress-circular")).toHaveCount(0);
+  });
+  test(`Slack actor changes retain applicable permissions and reject invalid imports at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 1000 });
+    await page.goto("/");
+    await page.getByRole("button", { name: "Edit Slack", exact: true }).click();
+    const actor = page.getByRole("combobox", { name: "Act in Slack as", exact: true });
+    const permissions = page.getByRole("button", { name: "Permissions", exact: true });
+    const save = page.getByRole("button", { name: "Export configuration", exact: true });
+    const read = page.getByRole("checkbox", { name: "View basic information about public channels in a workspace", exact: true });
+    const profile = page.getByRole("checkbox", { name: "Edit a user's profile information and status", exact: true });
+    const join = page.getByRole("checkbox", { name: "Join public channels in a workspace", exact: true });
+    if (await permissions.getAttribute("aria-expanded") !== "true") await permissions.click();
+    await expect(page.locator(".v-expansion-panel-text").getByRole("checkbox")).toHaveCount(52);
+    await expect(read).toBeChecked();
+    await profile.check();
+    await page.getByText("Connected user", { exact: true }).click();
+    await page.getByRole("option", { name: "Installed bot", exact: true }).click();
+    await expect(page.locator(".v-expansion-panel-text").getByRole("checkbox")).toHaveCount(49);
+    await expect(profile).toHaveCount(0);
+    await expect(read).toBeChecked();
+    await join.check();
+    await save.click();
+    const bot = JSON.parse(await page.getByTestId("export").textContent());
+    expect(bot.integrations.slack.scopes).toEqual(["channels:read", "channels:join"]);
+    expect(bot.integrations.slack.settings).toEqual({ actor: "bot" });
+    expect(bot.integrations.slack.extensions).toEqual({ keep: "workspace" });
+    await page.getByLabel("Lock form").check();
+    await expect(actor).toBeDisabled();
+    await expect(join).toBeDisabled();
+    await page.getByLabel("Lock form").uncheck();
+    await page.getByRole("button", { name: "Leave configuration" }).click();
+    await page.getByRole("button", { name: "Return to configuration" }).click();
+    await expect(actor).toHaveValue("Installed bot");
+    await page.getByText("Installed bot", { exact: true }).click();
+    await page.getByRole("option", { name: "Connected user", exact: true }).click();
+    await save.click();
+    const user = JSON.parse(await page.getByTestId("export").textContent());
+    expect(user.integrations.slack.scopes).toEqual(["channels:read"]);
+    expect(user.integrations.calendar).toEqual(bot.integrations.calendar);
+    const invalid = structuredClone(bot);
+    invalid.integrations.slack.scopes.push("users.profile:write");
+    await page.getByLabel("Import configuration JSON").fill(JSON.stringify(invalid));
+    await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+    if (await permissions.getAttribute("aria-expanded") !== "true") await permissions.click();
+    await expect(page.getByText("A selected permission is not supported by this provider configuration.", { exact: true })).toBeVisible();
+    await expect(actor).toHaveValue("Connected user");
+    await page.getByLabel("Import configuration JSON").fill(JSON.stringify(bot));
+    await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+    await expect(actor).toHaveValue("Installed bot");
+    if (await permissions.getAttribute("aria-expanded") !== "true") await permissions.click();
+    await expect(join).toBeChecked();
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+  });
+
+  test(`ClickHouse authentication modes preserve portable configuration at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 1000 });
+    await page.goto("/");
+    await page.getByRole("button", { name: "Edit ClickHouse", exact: true }).click();
+    const password = page.getByRole("textbox", { name: "Password reference (optional)", exact: true });
+    const username = page.getByRole("textbox", { name: "Username (optional)", exact: true });
+    const endpoint = page.getByRole("textbox", { name: "HTTP Interface URL", exact: true });
+    const authentication = page.getByRole("combobox", { name: "Authentication", exact: true });
+    const save = page.getByRole("button", { name: "Export configuration", exact: true });
+    await expect(username).toHaveValue("reader");
+    await password.fill("raw-password");
+    await save.click();
+    await expect(page.getByText("Use a reference such as env:VARIABLE_NAME.", { exact: true })).toBeVisible();
+    await password.fill("");
+    await save.click();
+    const value = JSON.parse(await page.getByTestId("export").textContent());
+    expect(value.integrations.warehouse.authentication).toEqual({ method: "api-key" });
+    await page.getByText("Username and password", { exact: true }).click();
+    await page.getByRole("option", { name: "No credentials", exact: true }).click();
+    await expect(password).toHaveCount(0);
+    await expect(username).toHaveCount(0);
+    await save.click();
+    const anonymous = JSON.parse(await page.getByTestId("export").textContent());
+    expect(anonymous.integrations.warehouse.authentication).toEqual({ method: "none" });
+    expect(anonymous.integrations.warehouse.settings).toEqual({ httpUrl: "https://warehouse.example:8443/query/" });
+    expect(anonymous.integrations.warehouse.extensions).toEqual({ keep: "database" });
+    expect(anonymous.integrations.calendar).toEqual(value.integrations.calendar);
+    await page.getByLabel("Lock form").check();
+    await expect(authentication).toBeDisabled();
+    await expect(endpoint).toBeDisabled();
+    await page.getByLabel("Lock form").uncheck();
+    await page.getByRole("button", { name: "Leave configuration" }).click();
+    await page.getByRole("button", { name: "Return to configuration" }).click();
+    await expect(page.getByText("No credentials", { exact: true })).toBeVisible();
+    await expect(endpoint).toHaveValue("https://warehouse.example:8443/query/");
+    await page.getByText("No credentials", { exact: true }).click();
+    await page.getByRole("option", { name: "Username and password", exact: true }).click();
+    await expect(username).toHaveValue("");
+    await expect(password).toHaveValue("");
+    value.integrations.warehouse.authentication.secretRef = "env:CLI_PASSWORD";
+    value.integrations.warehouse.settings.username = "cli-reader";
+    await page.getByLabel("Import configuration JSON").fill(JSON.stringify(value));
+    await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+    await expect(username).toHaveValue("cli-reader");
+    await expect(password).toHaveValue("env:CLI_PASSWORD");
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+  });
+
+  test(`configuration remains portable and usable at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: 1000 });
+    await page.goto("/");
+    await page.getByLabel("Display name").fill("My calendar");
+    await page.getByLabel("Client ID", { exact: true }).fill("updated-client");
+    await page.getByRole("button", { name: "Permissions", exact: true }).click();
+    await page.getByLabel("Read events", { exact: true }).uncheck();
+    await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+    await expect(page.getByTestId("export")).toContainText("updated-client");
+    const value = JSON.parse(await page.getByTestId("export").textContent());
+    expect(value.integrations.calendar.displayName).toBe("My calendar");
+    expect(value.integrations.calendar.extensions.businessRule).toBe("keep-me");
+    expect(value.integrations.calendar.scopes).toHaveLength(1);
+
+    await page.getByRole("button", { name: "Leave configuration" }).click();
+    await page.getByRole("button", { name: "Return to configuration" }).click();
+    await expect(page.getByLabel("Display name")).toHaveValue("My calendar");
+
+    const obsolete = structuredClone(value);
+    obsolete.registrations.google.source = "managed";
+    obsolete.registrations.google.clientId = "must-not-be-imported";
+    await page.getByLabel("Import configuration JSON").fill(JSON.stringify(obsolete));
+    await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+    await expect(page.getByLabel("Client ID", { exact: true })).toHaveValue("updated-client");
+    await expect(page.getByLabel("Managed registration", { exact: true })).toHaveCount(0);
+    await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+    expect(JSON.parse(await page.getByTestId("export").textContent()).registrations.google.source).toBe("own");
+
+    value.registrations.google.clientId = "written-from-cli";
+    await page.getByLabel("Import configuration JSON").fill(JSON.stringify(value));
+    await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+    await expect(page.getByLabel("Client ID", { exact: true })).toHaveValue("written-from-cli");
+
+    await page.getByLabel("Display name").fill("");
+    await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+    expect(JSON.parse(await page.getByTestId("export").textContent()).integrations.calendar).not.toHaveProperty("displayName");
+    await page.getByLabel("Lock form").check();
+    await expect(page.getByLabel("Client ID", { exact: true })).toBeDisabled();
+    await page.getByLabel("Lock form").uncheck();
+
+    await page.getByLabel("Client secret reference").fill("an-actual-secret-is-not-a-reference");
+    await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+    await expect(page.getByText("Use a reference such as env:VARIABLE_NAME.", { exact: true })).toBeVisible();
+    await page.getByLabel("Client secret reference").fill("env:GOOGLE_SECRET");
+    await page.getByLabel("Callback URL reference").fill("https://callback.example.test/oauth");
+    await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+    await expect(page.locator(".v-input").filter({ has: page.getByLabel("Callback URL reference") }).getByText("Use a reference such as env:VARIABLE_NAME.", { exact: true })).toBeVisible();
+    await page.getByLabel("Callback URL reference").fill("env:CALLBACK");
+    await page.getByRole("button", { name: "Edit Mailgun", exact: true }).click();
+    await expect(page.getByText("United States (api.mailgun.net)", { exact: true })).toBeVisible();
+    const region = page.getByRole("combobox", { name: "API region", exact: true });
+    await page.getByText("United States (api.mailgun.net)", { exact: true }).click();
+    await page.getByRole("option", { name: "European Union (api.eu.mailgun.net)", exact: true }).click();
+    await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+    const regional = JSON.parse(await page.getByTestId("export").textContent());
+    expect(regional.integrations.mail.settings).toEqual({ region: "eu" });
+    expect(regional.integrations.mail.extensions).toEqual({ label: "preserve" });
+    await page.getByLabel("Lock form").check();
+    await expect(region).toBeDisabled();
+    await page.getByLabel("Lock form").uncheck();
+    await page.getByRole("button", { name: "Leave configuration" }).click();
+    await page.getByRole("button", { name: "Return to configuration" }).click();
+    await expect(page.getByText("European Union (api.eu.mailgun.net)", { exact: true })).toBeVisible();
+    await page.getByRole("button", { name: "Edit Algolia", exact: true }).click();
+    const applicationId = page.getByRole("textbox", { name: "Application ID", exact: true });
+    const publicKey = page.getByRole("textbox", { name: "Public API key reference (optional)", exact: true });
+    await expect(applicationId).toHaveValue("ORIGINALAPP");
+    await applicationId.fill("app.invalid");
+    await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+    await expect(page.getByText("Enter the application ID using letters and digits.", { exact: true })).toBeVisible();
+    await applicationId.fill("");
+    await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+    await expect(page.locator(".v-input--error")).toHaveCount(1);
+    await applicationId.fill("UPDATEDAPP");
+    await publicKey.fill("raw-search-key");
+    await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+    await expect(page.getByText("Use a reference such as env:VARIABLE_NAME.", { exact: true })).toBeVisible();
+    await publicKey.fill("env:ALGOLIA_SEARCH_KEY");
+    await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+    const search = JSON.parse(await page.getByTestId("export").textContent());
+    expect(search.integrations.search.settings).toEqual({ applicationId: "UPDATEDAPP", publicApiKeyRef: "env:ALGOLIA_SEARCH_KEY" });
+    expect(search.integrations.search.authentication.secretRef).toBe("env:ALGOLIA_BACKEND_KEY");
+    expect(search.integrations.search.extensions).toEqual({ keep: true });
+    await page.getByLabel("Lock form").check();
+    await expect(applicationId).toBeDisabled();
+    await expect(publicKey).toBeDisabled();
+    await page.getByLabel("Lock form").uncheck();
+    await page.getByRole("button", { name: "Leave configuration" }).click();
+    await page.getByRole("button", { name: "Return to configuration" }).click();
+    await expect(publicKey).toHaveValue("env:ALGOLIA_SEARCH_KEY");
+    await publicKey.fill("");
+    await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+    expect(JSON.parse(await page.getByTestId("export").textContent()).integrations.search.settings).toEqual({ applicationId: "UPDATEDAPP" });
+    search.integrations.search.settings.applicationId = "CLIAPP";
+    await page.getByLabel("Import configuration JSON").fill(JSON.stringify(search));
+    await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+    await expect(applicationId).toHaveValue("CLIAPP");
+    await expect(publicKey).toHaveValue("env:ALGOLIA_SEARCH_KEY");
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+    const smallButtons = await page.getByRole("button").evaluateAll((buttons) => buttons.filter((button) => {
+      const box = button.getBoundingClientRect();
+      return box.width > 0 && box.height > 0 && (box.width < 48 || box.height < 48);
+    }).map((button) => button.textContent));
+    expect(smallButtons).toEqual([]);
+  });
+}
+
+
+test("Contentful delivery fields preserve UI and CLI configuration", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 1000 });
+  await page.goto("/");
+  await page.getByRole("button", { name: "Edit Contentful", exact: true }).click();
+  const space = page.getByRole("textbox", { name: "Space ID", exact: true });
+  const environment = page.getByRole("textbox", { name: "Environment ID", exact: true });
+  const token = page.getByRole("textbox", { name: "Content Delivery API token reference", exact: true });
+  const save = page.getByRole("button", { name: "Export configuration", exact: true });
+  await expect(space).toHaveValue("original-space");
+  await expect(environment).toHaveValue("master");
+  await space.fill("");
+  await save.click();
+  await expect(page.locator(".v-input--error")).toHaveCount(1);
+  await space.fill("published-space");
+  await environment.fill("release-2");
+  await token.fill("raw-token");
+  await save.click();
+  await expect(page.getByText("Use a reference such as env:VARIABLE_NAME.", { exact: true })).toBeVisible();
+  await token.fill("env:CONTENTFUL_ROTATED_TOKEN");
+  await page.getByText("United States", { exact: true }).click();
+  await page.getByRole("option", { name: "Europe", exact: true }).click();
+  await save.click();
+  const exported = JSON.parse(await page.getByTestId("export").textContent());
+  expect(exported.integrations.content.settings).toEqual({ spaceId: "published-space", environmentId: "release-2", region: "eu" });
+  expect(exported.integrations.content.authentication.secretRef).toBe("env:CONTENTFUL_ROTATED_TOKEN");
+  await page.getByRole("button", { name: "Leave configuration" }).click();
+  await page.getByRole("button", { name: "Return to configuration" }).click();
+  await expect(space).toHaveValue("published-space");
+  await expect(environment).toHaveValue("release-2");
+  await expect(token).toHaveValue("env:CONTENTFUL_ROTATED_TOKEN");
+  exported.integrations.content.settings.spaceId = "cli-space";
+  await page.getByLabel("Import configuration JSON").fill(JSON.stringify(exported));
+  await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+  await expect(space).toHaveValue("cli-space");
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+});
+
+
+test("Analytics public setting round-trips without credentials", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 1000 });
+  await page.goto("/");
+  await page.getByRole("button", { name: "Edit Analytics", exact: true }).click();
+  const measurement = page.getByRole("textbox", { name: "Measurement ID", exact: true });
+  const save = page.getByRole("button", { name: "Export configuration", exact: true });
+  await expect(measurement).toHaveValue("G-ORIGINAL1");
+  await expect(page.getByText("Public: this value will be visible in your published application. Copy it from your GA4 web stream.", { exact: true })).toBeVisible();
+  await expect(page.getByRole("textbox", { name: /secret|callback|client id|API key/i })).toHaveCount(0);
+  await measurement.fill("");
+  await save.click();
+  await expect(page.locator(".v-input--error")).toHaveCount(1);
+  await measurement.fill("UA-123-1");
+  await save.click();
+  await expect(page.locator(".v-input--error")).toHaveCount(1);
+  await measurement.fill("G-WEBSITE123");
+  await save.click();
+  const exported = JSON.parse(await page.getByTestId("export").textContent());
+  expect(exported.integrations.analytics).toMatchObject({
+    provider: "google-analytics", accountMode: "shared", scopes: [],
+    authentication: { method: "none" }, settings: { measurementId: "G-WEBSITE123" }
+  });
+  expect(exported.integrations.analytics.authentication).toEqual({ method: "none" });
+  await page.getByRole("button", { name: "Leave configuration" }).click();
+  await page.getByRole("button", { name: "Return to configuration" }).click();
+  await expect(measurement).toHaveValue("G-WEBSITE123");
+  exported.integrations.analytics.settings.measurementId = "G-CLI123";
+  await page.getByLabel("Import configuration JSON").fill(JSON.stringify(exported));
+  await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+  await expect(measurement).toHaveValue("G-CLI123");
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+});
+
+
+test("Drive captured permissions retain required file access and optional choices", async ({ page }) => {
+  await page.goto("/");
+  await page.getByRole("button", { name: "Edit Drive", exact: true }).click();
+  const required = page.getByRole("checkbox", { name: "Manage files selected for this application", exact: true });
+  if (!await required.isVisible()) await page.getByRole("button", { name: "Permissions", exact: true }).click();
+  await expect(required).toBeChecked();
+  await expect(required).toBeDisabled();
+  for (const name of ["Read and download files", "Manage application data", "Manage this application’s Drive folder data"]) {
+    const checkbox = page.getByRole("checkbox", { name, exact: true });
+    await expect(checkbox).toBeChecked();
+    await checkbox.uncheck();
+  }
+  await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+  expect(JSON.parse(await page.getByTestId("export").textContent()).integrations.drive.scopes)
+    .toEqual(["https://www.googleapis.com/auth/drive.file"]);
+  await page.getByRole("button", { name: "Leave configuration" }).click();
+  await page.getByRole("button", { name: "Return to configuration" }).click();
+  if (!await required.isVisible()) await page.getByRole("button", { name: "Permissions", exact: true }).click();
+  await expect(required).toBeChecked();
+  await expect(page.getByRole("checkbox", { name: "Read and download files", exact: true })).not.toBeChecked();
+});
+
+test("Gmail captured permissions allow optional sending permissions to be removed", async ({ page }) => {
+  await page.goto("/");
+  await page.getByRole("button", { name: "Edit Gmail", exact: true }).click();
+  const required = page.getByRole("checkbox", { name: "Read messages", exact: true });
+  if (!await required.isVisible()) await page.getByRole("button", { name: "Permissions", exact: true }).click();
+  await expect(required).toBeChecked();
+  await expect(required).toBeDisabled();
+  for (const name of ["Send messages", "Manage drafts and send messages", "Read and modify messages"]) {
+    const checkbox = page.getByRole("checkbox", { name, exact: true });
+    await expect(checkbox).toBeChecked();
+    await checkbox.uncheck();
+  }
+  await page.getByRole("button", { name: "Export configuration", exact: true }).click();
+  expect(JSON.parse(await page.getByTestId("export").textContent()).integrations.gmail.scopes)
+    .toEqual(["https://www.googleapis.com/auth/gmail.readonly"]);
+  await page.getByRole("button", { name: "Leave configuration" }).click();
+  await page.getByRole("button", { name: "Return to configuration" }).click();
+  if (!await required.isVisible()) await page.getByRole("button", { name: "Permissions", exact: true }).click();
+  await expect(required).toBeChecked();
+  await expect(page.getByRole("checkbox", { name: "Send messages", exact: true })).not.toBeChecked();
+});
+
+
+test("BigQuery query project validates and round-trips through CLI configuration", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 1000 });
+  await page.goto("/");
+  await page.getByRole("button", { name: "Edit BigQuery", exact: true }).click();
+  const project = page.getByRole("textbox", { name: "Google Cloud project ID", exact: true });
+  const save = page.getByRole("button", { name: "Export configuration", exact: true });
+  await expect(project).toHaveValue("query-project");
+  for (const value of ["", "123456789", "https://example.com"]) {
+    await project.fill(value);
+    await save.click();
+    await expect(page.locator(".v-input--error")).toHaveCount(1);
+  }
+  await project.fill("billing-project");
+  await save.click();
+  const exported = JSON.parse(await page.getByTestId("export").textContent());
+  expect(exported.integrations.bigquery).toMatchObject({
+    settings: { projectId: "billing-project" },
+    authentication: { method: "oauth2", registrationRef: "google" },
+    scopes: ["https://www.googleapis.com/auth/bigquery"]
+  });
+  await page.getByRole("button", { name: "Leave configuration" }).click();
+  await page.getByRole("button", { name: "Return to configuration" }).click();
+  await expect(project).toHaveValue("billing-project");
+  exported.integrations.bigquery.settings.projectId = "cli-project";
+  await page.getByLabel("Import configuration JSON").fill(JSON.stringify(exported));
+  await page.getByRole("button", { name: "Import configuration", exact: true }).click();
+  await expect(project).toHaveValue("cli-project");
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+});

package/test/fixture/App.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { computed, ref } from "vue";
+import { googleAnalyticsDefinition, googleDriveDefinition, gmailDefinition, bigqueryDefinition } from "../../../connectors-catalog/src/shared/google.js";
+import { IntegrationConfigurationFields } from "../../src/client/index.js";
+import { googleCalendarDefinition } from "../../../connector-google-calendar/src/shared/definition.js";
+import { mailgunDefinition, contentfulDefinition } from "../../../connectors-catalog/src/shared/tokens.js";
+import { algoliaDefinition } from "../../../connectors-catalog/src/shared/algolia.js";
+import { clickhouseDefinition } from "../../../connectors-catalog/src/shared/clickhouse.js";
+import { slackDefinition } from "../../../connectors-catalog/src/shared/slack.js";
+import { amazonRedshiftDefinition } from "../../../connectors-catalog/src/shared/amazon-redshift.js";
+import { snowflakeDefinition } from "../../../connectors-catalog/src/shared/snowflake.js";
+import { databricksDefinition } from "../../../connectors-catalog/src/shared/databricks.js";
+import { parseIntegrationConfiguration, validateIntegrationConfiguration } from "../../../connectors-core/src/shared/configuration.js";
+
+const configuration = ref({
+  schemaVersion: 1,
+  integrations: { bigquery: {
+    provider: "bigquery", accountMode: "shared",
+    scopes: bigqueryDefinition.scopes.filter((scope) => scope.recommended).map((scope) => scope.value),
+    authentication: { method: "oauth2", registrationRef: "google" }, settings: { projectId: "query-project" }
+  }, gmail: {
+    provider: "gmail", accountMode: "shared",
+    scopes: gmailDefinition.scopes.filter((scope) => scope.recommended).map((scope) => scope.value),
+    authentication: { method: "oauth2", registrationRef: "google" }
+  }, drive: {
+    provider: "google-drive", accountMode: "shared",
+    scopes: googleDriveDefinition.scopes.filter((scope) => scope.recommended).map((scope) => scope.value),
+    authentication: { method: "oauth2", registrationRef: "google" }
+  }, analytics: {
+    provider: "google-analytics", accountMode: "shared", scopes: [],
+    authentication: { method: "none" }, settings: { measurementId: "G-ORIGINAL1" }
+  }, content: {
+    provider: "contentful", accountMode: "shared", scopes: [], settings: { spaceId: "original-space" },
+    authentication: { method: "api-key", secretRef: "env:CONTENTFUL_DELIVERY_TOKEN" }
+  }, calendar: {
+    provider: "google-calendar", displayName: "Team calendar", accountMode: "per-user",
+    scopes: googleCalendarDefinition.scopes.filter((scope) => scope.recommended).map((scope) => scope.value),
+    authentication: { method: "oauth2", registrationRef: "google" },
+    extensions: { businessRule: "keep-me" }
+  }, mail: {
+    provider: "mailgun", accountMode: "shared", scopes: [],
+    authentication: { method: "api-key", secretRef: "env:MAILGUN_KEY" }, extensions: { label: "preserve" }
+  }, search: {
+    provider: "algolia", accountMode: "shared", scopes: [],
+    authentication: { method: "api-key", secretRef: "env:ALGOLIA_BACKEND_KEY" },
+    settings: { applicationId: "ORIGINALAPP" }, extensions: { keep: true }
+  }, warehouse: {
+    provider: "clickhouse", accountMode: "shared", scopes: [],
+    authentication: { method: "api-key", secretRef: "env:CLICKHOUSE_PASSWORD" },
+    settings: { httpUrl: "https://warehouse.example:8443/query/", username: "reader" }, extensions: { keep: "database" }
+  }, slack: {
+    provider: "slack", accountMode: "per-user", scopes: ["channels:read"], settings: { actor: "user" },
+    authentication: { method: "oauth2", registrationRef: "slack" }, extensions: { keep: "workspace" }
+  }, redshift: {
+    provider: "amazon-redshift", accountMode: "shared", scopes: [],
+    authentication: { method: "api-key", secretRef: "env:AWS_SECRET_ACCESS_KEY" },
+    settings: { workgroup: "analytics", database: "dev", accessKeyIdRef: "env:AWS_ACCESS_KEY_ID" }, extensions: { keep: "redshift" }
+  }, snowflake: {
+    provider: "snowflake", accountMode: "per-user", scopes: ["refresh_token"],
+    authentication: { method: "oauth2", registrationRef: "snowflake" },
+    settings: { accountUrl: "https://myorg-myaccount.snowflakecomputing.com" }, extensions: { keep: "account" }
+  }, databricks: {
+    provider: "databricks", accountMode: "per-user", scopes: ["all-apis", "offline_access"],
+    authentication: { method: "oauth2", registrationRef: "databricks" },
+    settings: { workspaceUrl: "https://dbc-abc123.cloud.databricks.com" }, extensions: { keep: "workspace" }
+  } },
+  registrations: {
+    snowflake: { source: "own", clientId: "snowflake-client", clientSecretRef: "env:SNOWFLAKE_SECRET", callbackUrlRef: "env:SNOWFLAKE_CALLBACK" },
+    google: { source: "own", clientId: "original-client", clientSecretRef: "env:GOOGLE_SECRET", callbackUrlRef: "env:CALLBACK" },
+    slack: { source: "own", clientId: "slack-client", clientSecretRef: "env:SLACK_SECRET", callbackUrlRef: "env:SLACK_CALLBACK" },
+    databricks: { source: "own", clientId: "user-client", clientSecretRef: "env:DATABRICKS_SECRET", callbackUrlRef: "env:DATABRICKS_CALLBACK" }
+  }
+});
+const visible = ref(true);
+const errors = ref({});
+const exported = ref("");
+const source = ref("");
+const locked = ref(false);
+const activeId = ref("calendar");
+const providers = [bigqueryDefinition, gmailDefinition, googleDriveDefinition, googleAnalyticsDefinition, contentfulDefinition, snowflakeDefinition, googleCalendarDefinition, mailgunDefinition, algoliaDefinition, clickhouseDefinition, slackDefinition, amazonRedshiftDefinition, databricksDefinition];
+const provider = computed(() => providers.find((entry) => entry.id === configuration.value.integrations[activeId.value].provider));
+function save() {
+  try {
+    const validated = validateIntegrationConfiguration(configuration.value, { providers });
+    errors.value = {};
+    exported.value = JSON.stringify(validated, null, 2);
+  } catch (error) { errors.value = error.fieldErrors; }
+}
+function importSource() {
+  try {
+    configuration.value = parseIntegrationConfiguration(source.value, { providers });
+    errors.value = {};
+  } catch (error) { errors.value = error.fieldErrors; }
+}
+</script>
+
+<template>
+  <v-app>
+    <v-main>
+      <v-container style="max-width: 900px">
+        <v-btn class="mb-4" min-height="48" @click="visible = !visible">{{ visible ? 'Leave configuration' : 'Return to configuration' }}</v-btn>
+        <v-switch v-model="locked" label="Lock form" />
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'content'">Edit Contentful</v-btn>
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'analytics'">Edit Analytics</v-btn>
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'drive'">Edit Drive</v-btn>
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'gmail'">Edit Gmail</v-btn>
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'bigquery'">Edit BigQuery</v-btn>
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'mail'">Edit Mailgun</v-btn>
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'search'">Edit Algolia</v-btn>
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'warehouse'">Edit ClickHouse</v-btn>
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'slack'">Edit Slack</v-btn>
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'redshift'">Edit Redshift</v-btn>
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'databricks'">Edit Databricks</v-btn>
+        <v-btn class="mb-4" min-height="48" @click="activeId = 'snowflake'">Edit Snowflake</v-btn>
+        <IntegrationConfigurationFields
+          v-if="visible" v-model="configuration" :integration-id="activeId"
+          :provider="provider" :field-errors="errors" :disabled="locked"
+        />
+        <v-btn class="my-4" min-height="48" color="primary" @click="save">Export configuration</v-btn>
+        <v-textarea v-model="source" label="Import configuration JSON" />
+        <v-btn min-height="48" @click="importSource">Import configuration</v-btn>
+        <pre data-testid="export" class="mt-4" style="white-space: pre-wrap; overflow-wrap: anywhere">{{ exported }}</pre>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>

package/test/fixture/index.html

@@ -0,0 +1,2 @@
+<!doctype html>
+<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Integration configuration test</title></head><body><div id="app"></div><script type="module" src="/main.js"></script></body></html>

package/test/fixture/main.js

@@ -0,0 +1,8 @@
+import { createApp } from "vue";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import "vuetify/styles";
+import App from "./App.vue";
+
+createApp(App).use(createVuetify({ components, directives })).mount("#app");

package/test/playwright.config.js

@@ -0,0 +1,18 @@
+import { defineConfig } from "@playwright/test";
+
+const managedUrl = process.env.PLAYWRIGHT_BASE_URL;
+export default defineConfig({
+  testDir: ".",
+  testMatch: "configuration.spec.js",
+  workers: 1,
+  use: {
+    baseURL: managedUrl || "http://127.0.0.1:4187",
+    storageState: process.env.VIBE64_PLAYWRIGHT_STORAGE_STATE || undefined
+  },
+  webServer: managedUrl ? undefined : {
+    command: "npm exec --no -- vite --config packages/connectors-web/test/vite.config.js",
+    cwd: new URL("../../../", import.meta.url).pathname,
+    url: "http://127.0.0.1:4187",
+    reuseExistingServer: false
+  }
+});

package/test/vite.config.js

@@ -0,0 +1,9 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { fileURLToPath } from "node:url";
+
+export default defineConfig({
+  root: fileURLToPath(new URL("./fixture", import.meta.url)),
+  plugins: [vue()],
+  server: { host: "127.0.0.1", port: 4187, strictPort: true }
+});

package/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "passed",
+  "failedTests": []
+}