@adminforth/mcp 1.1.0 → 1.1.1

package/dist/apiTools.d.ts

@@ -1,3 +1,4 @@
+import type { McpPageSize } from './types.js';
 import type { AdminUser, IAdminForth } from 'adminforth';
 export interface McpToolDefinition {
     name: string;
@@ -11,8 +12,12 @@ export interface McpToolDefinition {
 export declare class AdminForthApiTools {
     private readonly adminforth;
     private readonly hiddenResourceIds;
-    constructor(adminforth: IAdminForth, hiddenResourceIds: ReadonlySet<string>);
+    private readonly toolTimeoutMs;
+    constructor(adminforth: IAdminForth, hiddenResourceIds: ReadonlySet<string>, pageSize: McpPageSize, toolTimeoutMs: number);
+    private readonly toolOverrides;
     private schemas;
+    private description;
+    private withTimeout;
     list(readOnly: boolean): McpToolDefinition[];
     call(params: {
         name: string;

package/dist/apiTools.js

@@ -1,4 +1,45 @@
+import { compactInputSchema } from './inputSchema.js';
+import { adminApiPrefix } from './urls.js';
+import { AdminForthDataTypes } from 'adminforth';
 const METHODS_WITHOUT_REQUEST_BODY = new Set(['GET', 'HEAD']);
+// Milliseconds cost tokens on every datetime value and are never needed to answer the user.
+const ISO_MILLISECONDS_RE = /\.\d+(?=Z$)/;
+const TOOL_TIMEOUT = Symbol('TOOL_TIMEOUT');
+// _label repeats field values of the row, _clickUrl is a frontend navigation helper.
+const ROW_HELPER_FIELDS = new Set(['_label', '_clickUrl']);
+// destructiveHint is only a hint: whether a client asks for approval depends on its permission mode,
+// so dangerous tools also require a confirmation in chat.
+const DANGEROUS_TOOL_NOTE = 'This tool changes data. If you have not loaded the mutate_data skill yet, load it with fetch_skill first. Before calling, show the user exactly what will change and wait for their explicit confirmation in chat, even when the client does not ask for approval.';
+// Column properties needed to read, filter and aggregate records; writes need the detailed response.
+// Non-sortable columns also get sortable: false.
+const GET_RESOURCE_ESSENTIAL_COLUMN_FIELDS = ['name', 'label', 'type', 'enum', 'foreignResource'];
+// The rest of foreignResource configures the foreign record picker in the UI.
+const GET_RESOURCE_ESSENTIAL_FOREIGN_RESOURCE_FIELDS = ['resourceId', 'polymorphicOn', 'polymorphicResources'];
+function createToolOverrides(pageSize, adminforth) {
+    return {
+        get_resource: {
+            descriptionNote: 'By default only the columns needed to read, filter and aggregate records are returned. Pass detailed: true right away when you are going to create or update records or run actions; the detailed response already includes the default one.',
+            arguments: {
+                detailed: {
+                    type: 'boolean',
+                    description: 'Set to true before create_record, update_record, start_custom_action or start_custom_bulk_action: it returns every column property (required fields, which fields can be set on create and edit, validation rules, length and value limits, showIf conditions, editing notes) and the custom and bulk actions of the resource. By default only the column properties needed to read, filter and aggregate records are returned.',
+                },
+            },
+            project: (output, { detailed }) => (detailed
+                ? withoutFrontendOnlyFields(output)
+                : essentialResource(output)),
+        },
+        get_resource_data: {
+            descriptionNote: `Returns ${pageSize.default} rows unless limit is passed, and at most ${pageSize.max} rows per call; the response note tells when more rows exist. Row properties with null values, empty arrays or empty objects are omitted, so a column missing from a row is empty. Datetimes are UTC in ISO 8601 without milliseconds. When you pass columns, include the primary key column to get record ids (composite keys come as _primaryKeyValue in list rows).`,
+            defaultArguments: { source: 'list', limit: pageSize.default, offset: 0 },
+            prepareArguments: (handlerArguments) => ({
+                ...handlerArguments,
+                limit: Math.min(handlerArguments.limit, pageSize.max),
+            }),
+            project: (output, args, clientArgs) => compactResourceData(output, args, clientArgs, pageSize, datetimeColumnNames(adminforth, args.resourceId)),
+        },
+    };
+}
 function isRegisteredToolSchema(schema) {
     return typeof schema.handler === 'function' && !schema.agent?.hiddenFromAgents;
 }
@@ -9,11 +50,106 @@ function endpointPathToToolName(path) {
         .replace(/^_+|_+$/g, '');
 }
 function stripAdminApiPrefix(path, adminforth) {
-    const baseUrl = (adminforth.config.baseUrl ?? '').replace(/\/$/, '');
-    const apiPrefix = `${baseUrl}/adminapi/v1`;
+    const apiPrefix = adminApiPrefix(adminforth.config.baseUrl);
     const strippedPath = path.startsWith(apiPrefix) ? path.slice(apiPrefix.length) : path;
     return strippedPath.startsWith('/') ? strippedPath : `/${strippedPath}`;
 }
+// Drops frontend-only parts of the get_resource response that are useless for MCP clients and only waste their context.
+// Copies instead of deleting: the response shares nested objects with the AdminForth config.
+function withoutFrontendOnlyFields({ resource }) {
+    const { pageInjections, ...options } = resource.options;
+    return {
+        resource: {
+            ...resource,
+            columns: resource.columns.map(({ filterOptions, components, ...column }) => column),
+            options: {
+                ...options,
+                actions: options.actions?.map(({ customComponent, ...action }) => action),
+            },
+        },
+    };
+}
+function pickFields(source, fields) {
+    return Object.fromEntries(fields.filter((field) => field in source).map((field) => [field, source[field]]));
+}
+// Virtual columns are skipped: they cannot be filtered, sorted, aggregated or selected in get_resource_data.
+function essentialResource({ resource }) {
+    const primaryKeyNames = resource.columns.filter((column) => column.primaryKey).map((column) => column.name);
+    return {
+        resource: {
+            resourceId: resource.resourceId,
+            label: resource.label,
+            primaryKey: primaryKeyNames.length === 1 ? primaryKeyNames[0] : primaryKeyNames,
+            columns: resource.columns
+                .filter((column) => !column.backendOnly && !column.virtual)
+                .map((column) => ({
+                ...pickFields(column, GET_RESOURCE_ESSENTIAL_COLUMN_FIELDS),
+                // most columns are sortable, so only the exceptions are listed
+                ...(column.sortable === false && { sortable: false }),
+                ...(column.foreignResource && {
+                    foreignResource: pickFields(column.foreignResource, GET_RESOURCE_ESSENTIAL_FOREIGN_RESOURCE_FIELDS),
+                }),
+            })),
+        },
+    };
+}
+function datetimeColumnNames(adminforth, resourceId) {
+    const resource = adminforth.config.resources.find((candidate) => candidate.resourceId === resourceId);
+    return new Set(resource.dataSourceColumns
+        .filter((column) => column.type === AdminForthDataTypes.DATETIME)
+        .map((column) => column.name));
+}
+// null, [] and {} carry no data, so the column is left out of the row; clients read a missing column as empty.
+function isEmptyValue(value) {
+    if (value === null)
+        return true;
+    if (Array.isArray(value))
+        return value.length === 0;
+    return typeof value === 'object' && Object.keys(value).length === 0;
+}
+function compactRow(row, datetimeColumns) {
+    return Object.fromEntries(Object.entries(row)
+        .filter(([name, value]) => !isEmptyValue(value) && !ROW_HELPER_FIELDS.has(name))
+        .map(([name, value]) => [
+        name,
+        datetimeColumns.has(name) ? value.replace(ISO_MILLISECONDS_RE, '') : value,
+    ]));
+}
+// recordIds repeat the primary keys that list rows already carry, the frontend only needs them for paging in the show view.
+// The note stops clients from silently paging through every record: they should ask the user first. It is added only
+// for page requests (no limit, so the default page, or a full page); a client that asked for exactly N records,
+// such as the single oldest one, gets what it asked for without the note.
+function compactResourceData({ recordIds, data, ...rest }, args, clientArgs, pageSize, datetimeColumns) {
+    const offset = args.offset;
+    const nextOffset = offset + data.length;
+    const isPageRequest = clientArgs.limit === undefined || clientArgs.limit >= pageSize.max;
+    const notes = [
+        args.limit > pageSize.max && `limit is capped at ${pageSize.max} rows per call.`,
+        isPageRequest && rest.total !== undefined && rest.total > nextOffset
+            && `Loaded ${data.length} of ${rest.total} records (offset ${offset}). Ask the user before loading more; the next page starts at offset ${nextOffset}.`,
+    ].filter(Boolean);
+    return {
+        ...rest,
+        data: data.map((row) => compactRow(row, datetimeColumns)),
+        ...(notes.length > 0 && { note: notes.join(' ') }),
+    };
+}
+function overrideInputSchema(inputSchema, override) {
+    if (!override)
+        return inputSchema;
+    const defaultedNames = new Set(Object.keys(override.defaultArguments ?? {}));
+    return {
+        ...inputSchema,
+        ...(Array.isArray(inputSchema.required) && {
+            required: inputSchema.required.filter((name) => !defaultedNames.has(name)),
+        }),
+        properties: { ...inputSchema.properties, ...override.arguments },
+    };
+}
+function withoutPluginArguments(args, override) {
+    const pluginArgumentNames = new Set(Object.keys(override?.arguments ?? {}));
+    return Object.fromEntries(Object.entries(args).filter(([name]) => !pluginArgumentNames.has(name)));
+}
 function createDirectResponse() {
     return {
         status: 200,
@@ -30,10 +166,14 @@ function createDirectResponse() {
 export class AdminForthApiTools {
     adminforth;
     hiddenResourceIds;
-    constructor(adminforth, hiddenResourceIds) {
+    toolTimeoutMs;
+    constructor(adminforth, hiddenResourceIds, pageSize, toolTimeoutMs) {
         this.adminforth = adminforth;
         this.hiddenResourceIds = hiddenResourceIds;
+        this.toolTimeoutMs = toolTimeoutMs;
+        this.toolOverrides = createToolOverrides(pageSize, adminforth);
     }
+    toolOverrides;
     schemas(readOnly) {
         const schemas = new Map();
         for (const schema of this.adminforth.openApi.registeredSchemas) {
@@ -45,17 +185,46 @@ export class AdminForthApiTools {
         }
         return schemas;
     }
+    description(name, schema) {
+        const description = [
+            schema.description,
+            this.toolOverrides[name]?.descriptionNote,
+            schema.agent?.requiresHumanApproval && DANGEROUS_TOOL_NOTE,
+        ].filter(Boolean).join(' ');
+        return description ? { description } : {};
+    }
+    // The handler gets an abort signal that fires on timeout or when the MCP request is aborted;
+    // a handler that ignores it keeps running in the background, but the client is not kept waiting.
+    async withTimeout(requestSignal, run) {
+        const controller = new AbortController();
+        const abortHandler = () => controller.abort();
+        requestSignal.addEventListener('abort', abortHandler, { once: true });
+        let timer;
+        const timeout = new Promise((resolve) => {
+            timer = setTimeout(() => {
+                controller.abort();
+                resolve(TOOL_TIMEOUT);
+            }, this.toolTimeoutMs);
+        });
+        try {
+            return await Promise.race([run(controller.signal), timeout]);
+        }
+        finally {
+            clearTimeout(timer);
+            requestSignal.removeEventListener('abort', abortHandler);
+        }
+    }
     list(readOnly) {
         return Array.from(this.schemas(readOnly).entries())
             .sort(([left], [right]) => left.localeCompare(right))
             .map(([name, schema]) => ({
             name,
-            ...(schema.description && { description: schema.description }),
-            inputSchema: schema.request_schema ?? {
+            ...this.description(name, schema),
+            inputSchema: compactInputSchema(overrideInputSchema(schema.request_schema ?? {
                 type: 'object',
                 properties: {},
                 additionalProperties: true,
-            },
+            }, this.toolOverrides[name])),
             ...(schema.agent?.onlyReadsData && {
                 annotations: { readOnlyHint: true },
             }),
@@ -76,10 +245,14 @@ export class AdminForthApiTools {
                 isError: true,
             };
         }
+        const override = this.toolOverrides[params.name];
+        const args = { ...override?.defaultArguments, ...params.arguments };
+        const pluginFreeArguments = withoutPluginArguments(args, override);
+        const handlerArguments = override?.prepareArguments?.(pluginFreeArguments) ?? pluginFreeArguments;
         const method = schema.method.toUpperCase();
         const hasBody = !METHODS_WITHOUT_REQUEST_BODY.has(method);
-        const body = hasBody ? (params.arguments ?? {}) : {};
-        const query = hasBody ? {} : (params.arguments ?? {});
+        const body = hasBody ? handlerArguments : {};
+        const query = hasBody ? {} : handlerArguments;
         const requestValidation = this.adminforth.openApi.validateRequestSchema(schema, body);
         if (!requestValidation.valid) {
             return {
@@ -89,7 +262,7 @@ export class AdminForthApiTools {
         }
         const response = createDirectResponse();
         const language = String(params.headers['accept-language'] ?? 'en');
-        const output = await schema.handler({
+        const output = await this.withTimeout(params.abortSignal, (abortSignal) => schema.handler({
             body,
             query,
             headers: params.headers,
@@ -97,11 +270,19 @@ export class AdminForthApiTools {
             adminUser: params.adminUser,
             response,
             requestUrl: params.requestUrl,
-            abortSignal: params.abortSignal,
+            abortSignal,
             _raw_express_req: undefined,
             _raw_express_res: undefined,
             tr: (message, category, translationParams, pluralizationNumber) => this.adminforth.tr(message, category, language, translationParams, pluralizationNumber),
-        });
+        }));
+        if (output === TOOL_TIMEOUT) {
+            return {
+                output: {
+                    error: `Tool timed out after ${this.toolTimeoutMs / 1000} seconds. A change it started may still complete: check the result before calling it again.`,
+                },
+                isError: true,
+            };
+        }
         if (response.message) {
             return {
                 output: response.message,
@@ -121,9 +302,10 @@ export class AdminForthApiTools {
                 isError: true,
             };
         }
+        const isError = response.status >= 400 || Boolean(output && typeof output === 'object' && 'error' in output);
         return {
-            output,
-            isError: response.status >= 400 || Boolean(output && typeof output === 'object' && 'error' in output),
+            output: isError || !override?.project ? output : override.project(output, args, params.arguments ?? {}),
+            isError,
         };
     }
 }

package/dist/authSecretStore.d.ts

@@ -1,8 +1,16 @@
 import { type AdminUser, type HttpExtra, type IAdminForth } from 'adminforth';
 import type { McpAuthSecretResourceOptions, McpClientInfo } from './types.js';
+export declare const SECRET_PREFIX = "afmcp_";
 type AdminUserWithExecutor = AdminUser & {
     executedBy?: string;
 };
+export interface OAuthGrant {
+    id: string;
+    userId: string;
+    clientId: string;
+    clientName: string;
+    readOnly: boolean;
+}
 export interface AuthenticatedMcpSecret {
     adminUser: AdminUserWithExecutor;
     client: McpClientInfo | null;
@@ -14,6 +22,7 @@ export declare class McpAuthSecretStore {
     private readonly adminforth;
     private readonly options;
     private readonly resource;
+    private readonly refreshLock;
     constructor(adminforth: IAdminForth, options: McpAuthSecretResourceOptions);
     list(adminUser: AdminUser): Promise<{
         id: any;
@@ -22,6 +31,7 @@ export declare class McpAuthSecretStore {
         lastUsedAt: any;
         lastUsedByAgent: McpClientInfo | null;
         readOnly: any;
+        oauthClientId: any;
     }[]>;
     create(name: string, readOnly: boolean, adminUser: AdminUser, extra: HttpExtra): Promise<{
         error: string;
@@ -32,6 +42,27 @@ export declare class McpAuthSecretStore {
     }>;
     revoke(id: string, adminUser: AdminUser, extra: HttpExtra): Promise<import("adminforth").DeleteResourceRecordResult>;
     authenticate(secret: string): Promise<AuthenticatedMcpSecret | null>;
+    /**
+     * Stores the connection an MCP client got through OAuth as an auth secret record, so it is listed and revoked
+     * like personal secrets. The record id is the authorization code id, which makes every code redeemable once.
+     */
+    createOAuthGrant(grant: OAuthGrant, refreshToken: string): Promise<{
+        error?: string;
+    }>;
+    /**
+     * Swaps the refresh token of a grant for a new one and returns the grant user id. The caller has verified the
+     * token signature, so a token that is not the current one was issued for this grant before and is used again:
+     * two parties hold it, a client and whoever stole it, and which one is the attacker is unknown, so the whole
+     * grant is revoked (OAuth 2.1 refresh token rotation). The lock keeps two concurrent refreshes with one token
+     * from both passing, within this process.
+     */
+    rotateRefreshToken(grantId: string, refreshToken: string, clientId: string, newRefreshToken: string): Promise<string | null>;
+    /** Access tokens are checked against their grant on every request, so revoking the grant applies at once. */
+    authenticateOAuthGrant(grantId: string, userId: string): Promise<AuthenticatedMcpSecret | null>;
+    /** The OAuth grant methods are called only when OAuth is enabled, which requires this field. */
+    private get oauthClientIdField();
+    private loadAdminUser;
+    private toAuthenticated;
     touch(recordId: string, client: McpClientInfo): void;
 }
 export {};

package/dist/authSecretStore.js

@@ -1,7 +1,8 @@
 import { createHash, randomBytes, randomUUID } from 'node:crypto';
 import { Filters, Sorts, logger, } from 'adminforth';
 import { UNKNOWN_CLIENT } from './clientInfo.js';
-const SECRET_PREFIX = 'afmcp_';
+import { KeyedLock } from './keyedLock.js';
+export const SECRET_PREFIX = 'afmcp_';
 function hashSecret(secret) {
     return createHash('sha256').update(secret).digest('hex');
 }
@@ -28,6 +29,7 @@ export class McpAuthSecretStore {
     adminforth;
     options;
     resource;
+    refreshLock = new KeyedLock();
     constructor(adminforth, options) {
         this.adminforth = adminforth;
         this.options = options;
@@ -43,6 +45,7 @@ export class McpAuthSecretStore {
             lastUsedAt: record[fields.lastUsedAtField] ?? null,
             lastUsedByAgent: parseStoredClient(record[fields.lastUsedByAgentField]),
             readOnly: record[fields.readOnlyField],
+            oauthClientId: fields.oauthClientIdField ? record[fields.oauthClientIdField] ?? null : null,
         }));
     }
     async create(name, readOnly, adminUser, extra) {
@@ -61,6 +64,7 @@ export class McpAuthSecretStore {
                 [fields.lastUsedAtField]: null,
                 [fields.lastUsedByAgentField]: null,
                 [fields.readOnlyField]: readOnly,
+                ...(fields.oauthClientIdField && { [fields.oauthClientIdField]: null }),
             },
         });
         return result.error ? { error: result.error } : { secret };
@@ -79,22 +83,87 @@ export class McpAuthSecretStore {
         });
     }
     async authenticate(secret) {
+        const record = await this.adminforth.resource(this.options.resourceId).get(Filters.EQ(this.options.secretHashField, hashSecret(secret)));
+        return record ? this.toAuthenticated(record) : null;
+    }
+    /**
+     * Stores the connection an MCP client got through OAuth as an auth secret record, so it is listed and revoked
+     * like personal secrets. The record id is the authorization code id, which makes every code redeemable once.
+     */
+    async createOAuthGrant(grant, refreshToken) {
         const fields = this.options;
-        const record = await this.adminforth.resource(fields.resourceId).get(Filters.EQ(fields.secretHashField, hashSecret(secret)));
-        if (!record)
-            return null;
+        const resource = this.adminforth.resource(fields.resourceId);
+        if (await resource.get(Filters.EQ(fields.idField, grant.id))) {
+            return { error: 'Authorization code was already used' };
+        }
+        const adminUser = await this.loadAdminUser(grant.userId);
+        if (!adminUser)
+            return { error: 'User of the authorization code no longer exists' };
+        const result = await this.adminforth.createResourceRecord({
+            resource: this.resource,
+            adminUser,
+            extra: {},
+            record: {
+                [fields.idField]: grant.id,
+                [fields.nameField]: grant.clientName,
+                [fields.secretHashField]: hashSecret(refreshToken),
+                [fields.userIdField]: grant.userId,
+                [fields.createdAtField]: new Date().toISOString(),
+                [fields.lastUsedAtField]: null,
+                [fields.lastUsedByAgentField]: null,
+                [fields.readOnlyField]: grant.readOnly,
+                [this.oauthClientIdField]: grant.clientId,
+            },
+        });
+        return result.error ? { error: result.error } : {};
+    }
+    /**
+     * Swaps the refresh token of a grant for a new one and returns the grant user id. The caller has verified the
+     * token signature, so a token that is not the current one was issued for this grant before and is used again:
+     * two parties hold it, a client and whoever stole it, and which one is the attacker is unknown, so the whole
+     * grant is revoked (OAuth 2.1 refresh token rotation). The lock keeps two concurrent refreshes with one token
+     * from both passing, within this process.
+     */
+    async rotateRefreshToken(grantId, refreshToken, clientId, newRefreshToken) {
+        const fields = this.options;
+        const resource = this.adminforth.resource(fields.resourceId);
+        return this.refreshLock.run(grantId, async () => {
+            const record = await resource.get(Filters.AND(Filters.EQ(fields.idField, grantId), Filters.EQ(this.oauthClientIdField, clientId)));
+            if (!record)
+                return null;
+            if (record[fields.secretHashField] !== hashSecret(refreshToken)) {
+                logger.warn(`AdminForthMcpPlugin: a rotated refresh token of OAuth grant ${grantId} was used again, revoking the grant`);
+                await resource.delete(grantId);
+                return null;
+            }
+            await resource.update(grantId, { [fields.secretHashField]: hashSecret(newRefreshToken) });
+            return record[fields.userIdField];
+        });
+    }
+    /** Access tokens are checked against their grant on every request, so revoking the grant applies at once. */
+    async authenticateOAuthGrant(grantId, userId) {
+        const fields = this.options;
+        const record = await this.adminforth.resource(fields.resourceId).get(Filters.AND(Filters.EQ(fields.idField, grantId), Filters.EQ(fields.userIdField, userId)));
+        return record?.[this.oauthClientIdField] ? this.toAuthenticated(record) : null;
+    }
+    /** The OAuth grant methods are called only when OAuth is enabled, which requires this field. */
+    get oauthClientIdField() {
+        return this.options.oauthClientIdField;
+    }
+    async loadAdminUser(pk) {
         const auth = this.adminforth.config.auth;
         const usersResource = this.adminforth.config.resources.find((resource) => resource.resourceId === auth.usersResourceId);
         const userPrimaryKeyField = usersResource.columns.find((column) => column.primaryKey).name;
-        const dbUser = await this.adminforth.resource(usersResource.resourceId).get(Filters.EQ(userPrimaryKeyField, record[fields.userIdField]));
-        if (!dbUser)
+        const dbUser = await this.adminforth.resource(usersResource.resourceId).get(Filters.EQ(userPrimaryKeyField, pk));
+        return dbUser ? { pk, username: dbUser[auth.usernameField], dbUser } : null;
+    }
+    async toAuthenticated(record) {
+        const fields = this.options;
+        const adminUser = await this.loadAdminUser(record[fields.userIdField]);
+        if (!adminUser)
             return null;
         return {
-            adminUser: {
-                pk: record[fields.userIdField],
-                username: dbUser[auth.usernameField],
-                dbUser,
-            },
+            adminUser,
             client: parseStoredClient(record[fields.lastUsedByAgentField]),
             name: record[fields.nameField],
             readOnly: record[fields.readOnlyField],

package/dist/custom/McpAuthorize.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="af-mcp-authorize flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-800">
+    <div class="w-full max-w-lg rounded-lg bg-white p-6 shadow dark:bg-gray-700">
+      <template v-if="framed">
+        <h1 class="text-xl font-medium text-gray-900 dark:text-white">{{ $t('Cannot connect MCP client') }}</h1>
+        <p class="mt-3 text-sm text-gray-600 dark:text-gray-300">
+          {{ $t('This page is embedded in another site. Open it in a separate browser tab to connect your MCP client.') }}
+        </p>
+      </template>
+      <template v-else-if="authorization">
+        <h1 class="text-xl font-medium text-gray-900 dark:text-white">
+          {{ $t('Connect {client}?', { client: authorization.clientName }) }}
+        </h1>
+        <p class="mt-3 text-sm text-gray-600 dark:text-gray-300">
+          <b>{{ authorization.clientName }}</b>
+          <span v-if="authorization.clientHost"> ({{ authorization.clientHost }})</span>
+          <template v-if="readOnly">
+            {{ $t('asks to act on your behalf in {brand}: it will see all data you can see, but not change it.', { brand: brandName }) }}
+          </template>
+          <template v-else>
+            {{ $t('asks to act on your behalf in {brand}: it will see and change everything you can.', { brand: brandName }) }}
+          </template>
+        </p>
+        <Checkbox v-if="!authorization.serverReadOnly" v-model="readOnlyChosen" class="mt-4">
+          {{ $t('Read only: the agent can only read data') }}
+        </Checkbox>
+        <p v-if="authorization.loopbackRedirect" class="mt-3 text-sm font-medium text-amber-700 dark:text-amber-300">
+          {{ $t('After you answer, your browser returns to an app running on this computer. Allow only if you have just started connecting {client} yourself.', { client: authorization.clientName }) }}
+        </p>
+        <p v-else class="mt-3 text-sm text-gray-600 dark:text-gray-300">
+          {{ $t('After you answer, your browser returns to {host}.', { host: authorization.redirectHost }) }}
+        </p>
+        <div class="mt-6 flex justify-end gap-2">
+          <Button variant="secondary" :disabled="resolving" @click="resolve(false)">{{ $t('Deny') }}</Button>
+          <Button :loader="resolving" :disabled="resolving || !armed" @click="resolve(true)">{{ $t('Allow') }}</Button>
+        </div>
+      </template>
+      <template v-else-if="error">
+        <h1 class="text-xl font-medium text-gray-900 dark:text-white">{{ $t('Cannot connect MCP client') }}</h1>
+        <p class="mt-3 text-sm text-gray-600 dark:text-gray-300">{{ error }}</p>
+      </template>
+      <Spinner v-else class="mx-auto h-8 w-8" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { Button, Checkbox, Spinner } from '@/afcl';
+import { useCoreStore } from '@/stores/core';
+import { callAdminForthApi } from '@/utils';
+
+// Long enough to swallow the second click of a double click, too short for a reader to notice.
+const ALLOW_DELAY_MS = 500;
+
+type Authorization = {
+  clientName: string;
+  clientHost: string | null;
+  redirectHost: string;
+  loopbackRedirect: boolean;
+  serverReadOnly: boolean;
+};
+
+const route = useRoute();
+const coreStore = useCoreStore();
+const brandName = computed(() => coreStore.config?.brandName);
+
+// The signed authorization request /mcp/oauth/authorize redirected the browser here with
+const request = String(route.query.request);
+const authorization = ref<Authorization | null>(null);
+const error = ref('');
+const resolving = ref(false);
+const readOnlyChosen = ref(false);
+// With the plugin readOnly option every connection is read-only, so there is no choice to make.
+const readOnly = computed(() => authorization.value?.serverReadOnly || readOnlyChosen.value);
+// AdminForth sends no frame protection headers, so a site sharing the admin panel domain could load this page in
+// an invisible frame and trick a click on Allow (clickjacking). The consent is never offered inside a frame.
+const framed = window.top !== window.self;
+
+// Double-clickjacking: a page asks for a double click, swaps itself for this one on the first click, and the second
+// click lands on Allow before anyone can read it. Allow is enabled only once the page has been visible and focused
+// for a moment, and disabled again whenever it loses either.
+const armed = ref(false);
+let armTimer: ReturnType<typeof setTimeout> | undefined;
+
+function disarm() {
+  clearTimeout(armTimer);
+  armed.value = false;
+}
+
+function arm() {
+  disarm();
+  if (document.visibilityState === 'visible' && document.hasFocus()) {
+    armTimer = setTimeout(() => { armed.value = true; }, ALLOW_DELAY_MS);
+  }
+}
+
+function onVisibilityChange() {
+  if (document.visibilityState === 'visible') arm();
+  else disarm();
+}
+
+onBeforeUnmount(() => {
+  disarm();
+  window.removeEventListener('focus', arm);
+  window.removeEventListener('blur', disarm);
+  document.removeEventListener('visibilitychange', onVisibilityChange);
+});
+
+onMounted(async () => {
+  if (framed) return;
+  window.addEventListener('focus', arm);
+  window.addEventListener('blur', disarm);
+  document.addEventListener('visibilitychange', onVisibilityChange);
+  const response = await callAdminForthApi({
+    method: 'GET',
+    path: `/mcp/oauth/authorization?request=${encodeURIComponent(request)}`,
+  });
+  if (response?.error) {
+    error.value = response.error_description;
+  } else if (response) {
+    authorization.value = response;
+    // the delay counts from when the buttons are on the screen
+    await nextTick();
+    arm();
+  }
+});
+
+async function resolve(approved: boolean) {
+  resolving.value = true;
+  const response = await callAdminForthApi({
+    method: 'POST',
+    path: '/mcp/oauth/authorization',
+    body: { request, approved, readOnly: readOnlyChosen.value },
+  });
+  if (response?.redirectUrl) {
+    window.location.href = response.redirectUrl;
+    return;
+  }
+  resolving.value = false;
+  if (response?.error) {
+    authorization.value = null;
+    error.value = response.error_description;
+  }
+}
+</script>