MCP UI: create/add role and API key from the MCP page (port onto Kevin's editor)

[nicdavidson]

Port "create / add a role and API key from the MCP page" onto Kevin's MCP editor.

What

• In Kevin's Tools tab side panel, replace the disabled "Preview as role" placeholder and the "Manage roles" link with an Access section: roles that can use this MCP server (granted flag, requests, denied, last seen from /_internal/ai/mcp-access), one-click grant, and an inline access editor.
• Port Nic's inline access editor (df-mcp-access-editor) — modes create (new role) / add (existing role) / edit; per-backend none / read / read-write; "read on all"; filter when >6 backends; optional "limit to tables" (loads GET /api/v2/{db}/_table?as_list=true, writes _table/<name> component rows); a live summary of the role changes shown before save (summarizeAccessChanges etc. from Nic's mcp-model.ts).
• Also grants the role access to the MCP service itself (needed when require_role_access is on). Never grant anything automatically without the admin saving.
• Optional "also create an API key" → creates an app <role>_app with that role, shows the key once with copy; Kevin's Connect snippets should then fill that key instead of YOUR_API_KEY when one was just created (placeholder otherwise).
• Uses standard system API: GET /system/role?related=role_service_access_by_role_id, POST/PATCH /system/role, GET/POST /system/app.
• Should respect allow_writes: if the server blocks writes, read-write choices are shown as blocked.

Context (read first)

• Base branch: feat/mcp-ui = Kevin's MCP redesign (origin/feat/mcp-config-redesign). Kevin's editor lives in src/app/adf-mcp/ (details shell with Connect / Tools / Settings tabs, mcp-store.ts, mcp-effective.ts, mcp-catalog.ts). Keep his layout, tab structure, style and conventions (plain English strings like his components, not Transloco; his component/spec patterns).
• Source to port from: Nic's earlier implementation on local branch feat/mcp-exposure of this repo, under src/app/adf-ai/mcp/ (df-mcp-api.service.ts, mcp-model.ts + spec, df-mcp-access*, df-mcp-exposure*). Read it with git show feat/mcp-exposure:<path>. Port behaviour, adapt to Kevin's structure; do not bring over Nic's page shell, tabs or routing.
• Backend is merged to df-mcp-server develop (PR Adds files tests #77) and is what df-dev runs: GET /_internal/ai/mcp-access?service=&period=, GET /_internal/ai/mcp-catalog?service=&role_id=|app_id=[&client=&lazy_mode=], GET /_internal/ai/mcp-health, config fields allow_writes (bool, default true) and require_role_access (bool; new services default true, existing false). Admin-only endpoints; call them with the admin session like Nic's df-mcp-api.service.ts does.
• Live instance: df-dev http://localhost:8081, admin@dreamfactory.com / passwordpassword. MCP service logistics_mcp (id 15), role logistics_analyst — do not modify those; create your own throwaway services/roles prefixed e2e_mcp_ and delete them after.
• Tests: npx jest src/app/adf-mcp (node_modules: symlink or copy from /data/projects/dreamfactory/df-development/packages/df-admin-interface/node_modules). src/app/shared/utilities/route.spec.ts has one pre-existing failure on develop — ignore it. Add specs for new logic.
• Do NOT rebuild or commit dist/ (another agent works in parallel; dist gets rebuilt once at integration). No docker compose / container / config edits.
• Deliver: commit on your branch, push, open a PR into feat/mcp-ui (not develop) with a "## Behaviour changes" section (what changed, before/after, upgrade impact, how verified). Then stop and report.