diff --git a/distribution/all-in-one/docker-compose.yaml b/distribution/all-in-one/docker-compose.yaml
index df6724706c..06a26b8e95 100644
--- a/distribution/all-in-one/docker-compose.yaml
+++ b/distribution/all-in-one/docker-compose.yaml
@@ -51,9 +51,18 @@ services:
       # platform-api signs its tokens with RS256; the devportal verifies them
       # against jwt_public.pem from the shared keypair volume mounted below
       # (auth.local.jwt_public_key in devportal-config.toml). There is no shared
-      # HMAC secret. tls_skip_verify covers platform-api's self-signed cert.
+      # HMAC secret.
       - APIP_AP_AUTH_LOCAL_PLATFORM_API_URL=https://platform-api:9243
-      - APIP_AP_AUTH_LOCAL_TLS_SKIP_VERIFY=true
+      # Trust platform-api's self-signed cert at Node's trust-store level instead of
+      # skipping verification per client. NODE_EXTRA_CA_CERTS *appends* to Node's
+      # built-in CAs (public CAs keep working) and applies process-wide, so it covers
+      # BOTH the auth login client (authController's https.Agent passes no custom
+      # `ca`, so it honours this) AND the webhook delivery worker
+      # (src/services/webhooks/deliveryWorker.js), which POSTs events such as
+      # apikey.generated over Node's default TLS and has no tls_skip_verify hatch of
+      # its own. That is why APIP_AP_AUTH_LOCAL_TLS_SKIP_VERIFY is no longer set here:
+      # verification stays ON for every platform-api call, self-signed cert and all.
+      - NODE_EXTRA_CA_CERTS=/etc/api-portal/certs/cert.pem
       # Required — devportal fails closed at startup if either doesn't resolve
       # to a 64-char hex string. Set both before `docker compose up`, e.g.:
       #   export APIP_AP_SECURITY_ENCRYPTION_KEY=$(openssl rand -hex 32)
@@ -70,11 +79,24 @@ services:
       # Same RS256 keypair volume platform-api signs with — the devportal reads
       # only jwt_public.pem (0644) from it to verify those tokens.
       - platform-api-jwt-keys:/etc/api-portal/keys:ro
+      # platform-api's self-signed TLS cert, trusted via NODE_EXTRA_CA_CERTS above.
+      # Subpath mount exposes only the public cert.pem — never the private key.pem
+      # that also lives in this volume (same pattern as the e2e compose).
+      - type: volume
+        source: platform-api-certs
+        target: /etc/api-portal/certs/cert.pem
+        read_only: true
+        volume:
+          subpath: cert.pem
     depends_on:
       postgres:
         condition: service_healthy
       platform-api:
         condition: service_healthy
+      # cert.pem must exist in the certs volume before Node reads NODE_EXTRA_CA_CERTS
+      # at startup (a missing file is silently ignored with a warning).
+      platform-api-certgen:
+        condition: service_completed_successfully
       platform-api-jwtkeygen:
         condition: service_completed_successfully
 
@@ -85,11 +107,20 @@ services:
     entrypoint: ["/bin/sh", "-c"]
     command:
       - |
-        [ -f /certs/cert.pem ] && [ -f /certs/key.pem ] && exit 0
-        openssl req -x509 -newkey rsa:2048 -sha256 -days 365 -nodes \
-          -keyout /certs/key.pem -out /certs/cert.pem \
-          -subj "/O=WSO2 API Platform/CN=platform-api" \
-          -addext "subjectAltName=DNS:localhost,DNS:platform-api,IP:127.0.0.1"
+        set -e
+        if [ ! -f /certs/cert.pem ] || [ ! -f /certs/key.pem ]; then
+          openssl req -x509 -newkey rsa:2048 -sha256 -days 365 -nodes \
+            -keyout /certs/key.pem -out /certs/cert.pem \
+            -subj "/O=WSO2 API Platform/CN=platform-api" \
+            -addext "subjectAltName=DNS:localhost,DNS:platform-api,IP:127.0.0.1"
+        fi
+        # platform-api runs as uid 10001 and reads both files. Keep the private key
+        # owned by that uid and non-world-readable; keep the public cert world-readable
+        # so api-portal can trust it via NODE_EXTRA_CA_CERTS. Applied every run (like
+        # platform-api-jwtkeygen) so a cached certs volume gets the same permissions.
+        chown 10001 /certs/key.pem
+        chmod 0600 /certs/key.pem
+        chmod 0644 /certs/cert.pem
     volumes:
       - platform-api-certs:/certs
 
diff --git a/portals/api-portal/src/controllers/apiContentController.js b/portals/api-portal/src/controllers/apiContentController.js
index 1e9eb08c38..bd1bc82c3b 100644
--- a/portals/api-portal/src/controllers/apiContentController.js
+++ b/portals/api-portal/src/controllers/apiContentController.js
@@ -587,6 +587,12 @@ function requestOrigin(req) {
     return `${protocol}://${req.get('host')}`;
 }
 
+const TRYOUT_CAPABLE_TYPES = new Set([
+    constants.API_TYPE.WS,
+    constants.API_TYPE.WEBSUB,
+    constants.API_TYPE.GRAPHQL,
+]);
+
 const loadDocument = async (req, res, next) => {
     const { orgName, apiHandle, viewName, docType, docName } = req.params;
 
@@ -599,11 +605,14 @@ const loadDocument = async (req, res, next) => {
             isAPIDefinition: false,
             isWebSocketTryout: false,
             isGraphQLTryout: false,
+            isTryout: false,
         };
         templateContent.apiType = definitionResponse.apiType;
+        templateContent.supportsTryout = TRYOUT_CAPABLE_TYPES.has(definitionResponse.apiType);
         if (isSpecPage && definitionResponse.swagger) {
             const specType = definitionResponse.apiType;
-            const tryoutEnabled = !!req.query.tryout;
+            const tryoutEnabled = req.query.tryout === true || req.query.tryout === 'true';
+            templateContent.isTryout = templateContent.supportsTryout && tryoutEnabled;
             if (specType === constants.API_TYPE.WS || specType === constants.API_TYPE.WEBSUB) {
                 templateContent.asyncapi = JSON.stringify(parseApiDefinitionContent(definitionResponse.swagger));
                 templateContent.isWebSocketTryout = tryoutEnabled;
@@ -653,12 +662,20 @@ const loadDocument = async (req, res, next) => {
         let templateContent = {
             "isAPIDefinition": false,
             "isWebSocketTryout": false,
-            "isGraphQLTryout": false
+            "isGraphQLTryout": false,
+            "isTryout": false
         };
         const definitionResponse = await getAPIDefinition(orgName, viewName, apiHandle);
         templateContent.apiType = definitionResponse.apiType;
-        
-        const tryoutEnabled = req.query.tryout ? true : false;
+
+        // Only an explicit tryout=true opts in, and only on the specification page —
+        // the tryout payload (asyncapi/GraphQL introspection) is loaded only there, so a
+        // non-spec document must never render the tryout console. Any other query value
+        // (e.g. tryout=false) is a truthy string and must not enable it.
+        const isSpecPage = req.originalUrl.includes(constants.FILE_NAME.API_SPECIFICATION_PATH);
+        const tryoutEnabled = isSpecPage && (req.query.tryout === true || req.query.tryout === 'true');
+        templateContent.supportsTryout = TRYOUT_CAPABLE_TYPES.has(definitionResponse.apiType);
+        templateContent.isTryout = templateContent.supportsTryout && tryoutEnabled;
         if (definitionResponse.apiType === constants.API_TYPE.WS || definitionResponse.apiType === constants.API_TYPE.WEBSUB) {
             templateContent.isWebSocketTryout = tryoutEnabled;
         } else if (definitionResponse.apiType === constants.API_TYPE.GRAPHQL) {
@@ -667,7 +684,7 @@ const loadDocument = async (req, res, next) => {
         let apiMetadata = definitionResponse.metaData;
 
         //load API definition
-        if (req.originalUrl.includes(constants.FILE_NAME.API_SPECIFICATION_PATH)) {
+        if (isSpecPage) {
 
             if (definitionResponse.apiType === constants.API_TYPE.MCP) {
                 // The playground reads its server URL from servers[0].url. A
diff --git a/portals/api-portal/src/controllers/apiKeysPageController.js b/portals/api-portal/src/controllers/apiKeysPageController.js
index 6d623620ec..4a3671285e 100644
--- a/portals/api-portal/src/controllers/apiKeysPageController.js
+++ b/portals/api-portal/src/controllers/apiKeysPageController.js
@@ -51,7 +51,7 @@ const loadAPIApiKeys = async (req, res, next) => {
             const images = metaData.apiImageMetadata;
             if (images) {
                 for (const key in images) {
-                    images[key] = `${constants.API_PORTAL_API.orgPath(orgId)}${constants.ROUTE.API_FILE_PATH}${apiId}${constants.API_TEMPLATE_FILE_NAME}${images[key]}`;
+                    images[key] = `${constants.API_PORTAL_API.orgPath(orgId)}${constants.ROUTE.API_FILE_PATH}${metaData.id}${constants.API_TEMPLATE_FILE_NAME}${images[key]}`;
                 }
             }
         } else {
diff --git a/portals/api-portal/src/controllers/apiWorkflowsController.js b/portals/api-portal/src/controllers/apiWorkflowsController.js
index 6c2d4eb8c0..798841529f 100644
--- a/portals/api-portal/src/controllers/apiWorkflowsController.js
+++ b/portals/api-portal/src/controllers/apiWorkflowsController.js
@@ -23,7 +23,7 @@ const apiWorkflowService = require('../services/apiWorkflowService');
 const { config } = require('../config/configLoader');
 const logger = require('../config/logger');
 const util = require('../utils/util');
-const { loadLayoutFromAPI, renderGivenTemplate, renderTemplateFromAPI, rewriteViewStyles, isAiDisabledForPortal } = require('../utils/util');
+const { loadLayoutFromAPI, renderGivenTemplate, renderTemplateFromAPI, rewriteViewStyles, isAiDisabledForPortal, resolveAiEnabled } = require('../utils/util');
 const constants = require('../utils/constants');
 const fs = require('fs');
 const path = require('path');
@@ -114,6 +114,11 @@ const loadAPIWorkflows = async (req, res, next) => {
             viewName,
             baseUrl: `/${orgName}/views/${viewName}`,
             profile,
+            // Gate the AI Ready chips on the real AI toggle, not the artifact type.
+            // Set explicitly so the custom-view renderGivenTemplate path (which hardcodes
+            // aiEnabled: true) also respects it, matching renderTemplateFromAPI. Uses the
+            // fail-open helper so a transient config-read error doesn't reject the page.
+            aiEnabled: await resolveAiEnabled(orgId, viewName),
         };
 
         const dbLayout = await loadLayoutFromAPI(orgId, viewName);
@@ -194,6 +199,11 @@ const loadAPIWorkflowDetail = async (req, res, next) => {
             viewName,
             baseUrl: `/${orgName}/views/${viewName}`,
             profile,
+            // Gate the "Try with AI" button/modal on the real AI toggle. Set explicitly so
+            // the custom-view renderGivenTemplate path (which hardcodes aiEnabled: true) also
+            // respects it, matching renderTemplateFromAPI. Uses the fail-open helper so a
+            // transient config-read error doesn't reject the page.
+            aiEnabled: await resolveAiEnabled(orgId, viewName),
         };
 
         const dbLayout = await loadLayoutFromAPI(orgId, viewName);
diff --git a/portals/api-portal/src/controllers/viewConfigureController.js b/portals/api-portal/src/controllers/viewConfigureController.js
index d4c97a1562..593f70fc98 100644
--- a/portals/api-portal/src/controllers/viewConfigureController.js
+++ b/portals/api-portal/src/controllers/viewConfigureController.js
@@ -142,6 +142,12 @@ const loadSettingsPage = async (req, res) => {
         }
         templateContent.orgLabels = orgLabels;
 
+        const labelNameByHandle = new Map(orgLabels.map(l => [l.id, l.displayName]));
+        templateContent.views = views.map(view => ({
+            ...view,
+            labelNames: (view.labels || []).map(handle => labelNameByHandle.get(handle) || handle),
+        }));
+
         let orgPlans = [];
         try {
             const plansRaw = await subscriptionPlanDao.list(orgId);
diff --git a/portals/api-portal/src/defaultContent/images/graphql-icon.svg b/portals/api-portal/src/defaultContent/images/graphql-icon.svg
new file mode 100644
index 0000000000..ebf6590ba5
--- /dev/null
+++ b/portals/api-portal/src/defaultContent/images/graphql-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#E10098"><title>GraphQL</title><path d="M12.002 0a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277zm8.54 4.931a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277zm0 9.862a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277zm-8.54 4.931a2.138 2.138 0 1 0 0 4.276 2.138 2.138 0 1 0 0-4.276zm-8.542-4.93a2.138 2.138 0 1 0 0 4.276 2.138 2.138 0 1 0 0-4.277zm0-9.863a2.138 2.138 0 1 0 0 4.277 2.138 2.138 0 1 0 0-4.277zm8.542-3.378L2.953 6.777v10.448l9.049 5.224 9.047-5.224V6.777zm0 1.601 7.66 13.27H4.34zm-1.387.371L3.97 15.037V7.363zm2.774 0 6.646 3.838v7.674zM5.355 17.44h13.293l-6.646 3.836z"/></svg>
diff --git a/portals/api-portal/src/defaultContent/images/websocket-icon.svg b/portals/api-portal/src/defaultContent/images/websocket-icon.svg
new file mode 100644
index 0000000000..faae2d35b4
--- /dev/null
+++ b/portals/api-portal/src/defaultContent/images/websocket-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 193"><title>WebSocket</title><path fill="#231f20" d="M192.44 144.645h31.78V68.339l-35.805-35.804l-22.472 22.472l26.497 26.497zm31.864 15.931H113.452L86.954 134.08l11.237-11.236l21.885 21.885h45.028l-44.357-44.441l11.32-11.32l44.357 44.358v-45.03l-21.801-21.801l11.152-11.153L110.685 0H0l31.696 31.696v.084h65.74l23.227 23.227l-33.96 33.96L63.476 65.74V47.712h-31.78v31.193l55.007 55.007L64.314 156.3l35.805 35.805H256z"/></svg>
diff --git a/portals/api-portal/src/defaultContent/pages/api-landing/page.hbs b/portals/api-portal/src/defaultContent/pages/api-landing/page.hbs
index cab115e649..f75d27ea23 100644
--- a/portals/api-portal/src/defaultContent/pages/api-landing/page.hbs
+++ b/portals/api-portal/src/defaultContent/pages/api-landing/page.hbs
@@ -58,7 +58,7 @@
 {{> alert }}
 
 {{!-- ── AGENT PROMPT MODAL ── --}}
-{{#if showApiWorkflowsNav}}
+{{#if aiEnabled}}
 {{#unless (eq apiMetadata.agentVisibility "HIDDEN")}}
 {{> api-agent-prompt-modal}}
 {{/unless}}
diff --git a/portals/api-portal/src/defaultContent/pages/api-landing/partials/api-detail-banner.hbs b/portals/api-portal/src/defaultContent/pages/api-landing/partials/api-detail-banner.hbs
index 763b70da8a..f314c72732 100644
--- a/portals/api-portal/src/defaultContent/pages/api-landing/partials/api-detail-banner.hbs
+++ b/portals/api-portal/src/defaultContent/pages/api-landing/partials/api-detail-banner.hbs
@@ -18,14 +18,16 @@
           {{#if (eq apiMetadata.type "GRAPHQL")}}dp-badge--graphql
           {{else if (eq apiMetadata.type "WS")}}dp-badge--ws
           {{else if (eq apiMetadata.type "SOAP")}}dp-badge--soap
+          {{else if (eq apiMetadata.type "WebSubApi")}}dp-badge--ws
           {{else}}dp-badge--rest{{/if}}">
-          {{#if (eq apiMetadata.type "GRAPHQL")}}<i class="bi bi-share"></i> GraphQL
-          {{else if (eq apiMetadata.type "WS")}}<i class="bi bi-broadcast"></i> WebSocket
+          {{#if (eq apiMetadata.type "GRAPHQL")}}<img src="/images/graphql-icon.svg" class="dp-badge-icon" alt="" /> GraphQL
+          {{else if (eq apiMetadata.type "WS")}}<img src="/images/websocket-icon.svg" class="dp-badge-icon" alt="" /> WebSocket
+          {{else if (eq apiMetadata.type "WebSubApi")}}<i class="bi bi-broadcast-pin"></i> WebSub
           {{else if (eq apiMetadata.type "SOAP")}}<i class="bi bi-file-code"></i> SOAP
-          {{else}}<i class="bi bi-braces"></i> {{apiMetadata.type}}{{/if}}
+          {{else}}<i class="bi bi-braces"></i> REST{{/if}}
         </span>
         {{/if}}
-        {{#if showApiWorkflowsNav}}
+        {{#if aiEnabled}}
         {{#unless (eq apiMetadata.agentVisibility "HIDDEN")}}
         <span class="dp-badge dp-badge--ai" title="AI agents can discover and use this API">
           <i class="bi bi-robot"></i> AI Ready
@@ -68,7 +70,7 @@
       </a>
       {{/if}}
       {{/in}}
-      {{#if showApiWorkflowsNav}}
+      {{#if aiEnabled}}
       {{#unless (eq apiMetadata.agentVisibility "HIDDEN")}}
       <button type="button" class="dp-btn dp-btn--ai" data-bs-toggle="modal" data-bs-target="#apiAgentPromptModal">
         <i class="bi bi-robot"></i> Try with AI
diff --git a/portals/api-portal/src/defaultContent/pages/api-workflows/detail/page.hbs b/portals/api-portal/src/defaultContent/pages/api-workflows/detail/page.hbs
index db29d222e5..979bad8659 100644
--- a/portals/api-portal/src/defaultContent/pages/api-workflows/detail/page.hbs
+++ b/portals/api-portal/src/defaultContent/pages/api-workflows/detail/page.hbs
@@ -20,7 +20,7 @@
 <div data-flow-handle="{{flow.handle}}" data-flow-content-type="{{flow.contentType}}">
     <div class="flow-detail-section">
         {{!-- Breadcrumb --}}
-        <nav class="dp-breadcrumb">
+        <nav class="dp-breadcrumb flow-detail-breadcrumb">
           <a class="dp-breadcrumb-item" href="{{baseUrl}}/api-workflows">API Workflows</a>
           <i class="bi bi-chevron-right dp-breadcrumb-sep"></i>
           <span class="dp-breadcrumb-current">{{flow.displayName}}</span>
@@ -33,11 +33,13 @@
                 <p>{{flow.description}}</p>
             </div>
             <div class="flow-header-actions">
+                {{#if aiEnabled}}
                 {{#unless (eq flow.agentVisibility "HIDDEN")}}
                 <button class="common-btn-primary discover-ai-btn" id="openPromptBtn" data-bs-toggle="modal" data-bs-target="#agentPromptModal">
                     <img src="/images/ai-stars-icon.svg" width="16" height="16" aria-hidden="true" alt="" style="margin-right:6px;vertical-align:middle;">Try with AI
                 </button>
                 {{/unless}}
+                {{/if}}
             </div>
         </div>
 
@@ -58,7 +60,11 @@
     {{> alert}}
 
     {{!-- ── AGENT PROMPT MODAL ── --}}
+    {{#if aiEnabled}}
+    {{#unless (eq flow.agentVisibility "HIDDEN")}}
     {{> agent-prompt-modal}}
+    {{/unless}}
+    {{/if}}
 
     {{!-- Hidden container for spec content --}}
     <textarea id="specContent" style="display: none;">{{flow.content}}</textarea>
diff --git a/portals/api-portal/src/defaultContent/pages/api-workflows/page.hbs b/portals/api-portal/src/defaultContent/pages/api-workflows/page.hbs
index 51435a6a84..18d02645d2 100644
--- a/portals/api-portal/src/defaultContent/pages/api-workflows/page.hbs
+++ b/portals/api-portal/src/defaultContent/pages/api-workflows/page.hbs
@@ -10,13 +10,6 @@
       <h1 class="page-title">API Workflows</h1>
       <p class="page-desc">Pre-configured workflows let your AI agents reference these best practices to use your APIs correctly, every time — no hallucination, no manual setup.</p>
     </div>
-    {{#if apiWorkflows.length}}
-      {{#if profile.isAdmin}}
-      <a href="{{beforeSeparator baseUrl '/views/'}}/settings#cfg-workflows" class="dp-btn dp-btn--primary">
-        <i class="bi bi-pencil"></i> Manage workflows
-      </a>
-      {{/if}}
-    {{/if}}
   </div>
 
   {{#if apiWorkflows.length}}
@@ -31,12 +24,7 @@
       <i class="bi bi-diagram-3"></i>
     </span>
     <h2 class="dp-empty-title">No workflows yet</h2>
-    <p class="dp-empty-desc">Create a workflow to encode a multi-step API sequence your AI agents can follow. Published workflows will appear here for every consumer.</p>
-    {{#if profile.isAdmin}}
-    <a href="{{beforeSeparator baseUrl '/views/'}}/settings#cfg-workflows" class="dp-btn dp-btn--primary dp-btn--lg" style="margin-top:1.5rem;">
-      <i class="bi bi-plus"></i> Create workflow
-    </a>
-    {{/if}}
+    <p class="dp-empty-desc">There are no published workflows available right now. Once they're published, they'll appear here for your AI agents to follow.</p>
   </div>
   {{/if}}
 
diff --git a/portals/api-portal/src/defaultContent/pages/api-workflows/partials/workflow-card.hbs b/portals/api-portal/src/defaultContent/pages/api-workflows/partials/workflow-card.hbs
index 52522c94c7..6c712e6d60 100644
--- a/portals/api-portal/src/defaultContent/pages/api-workflows/partials/workflow-card.hbs
+++ b/portals/api-portal/src/defaultContent/pages/api-workflows/partials/workflow-card.hbs
@@ -17,10 +17,12 @@
         {{/if}}
       </div>
       <div class="wf-card-footer">
+        {{#if @root.aiEnabled}}
         {{#unless (eq this.agentVisibility "HIDDEN")}}
         <span class="dp-badge dp-badge--ai" title="AI agents can discover and use this workflow">
           <i class="bi bi-robot"></i> AI Ready
         </span>
         {{/unless}}
+        {{/if}}
       </div>
     </div>
diff --git a/portals/api-portal/src/defaultContent/pages/apis/partials/api-listing.hbs b/portals/api-portal/src/defaultContent/pages/apis/partials/api-listing.hbs
index 4f021dfedc..01150283bc 100644
--- a/portals/api-portal/src/defaultContent/pages/apis/partials/api-listing.hbs
+++ b/portals/api-portal/src/defaultContent/pages/apis/partials/api-listing.hbs
@@ -101,13 +101,13 @@
                   {{else if (eq type "SOAP")}}dp-badge--soap
                   {{else if (eq type "WebSubApi")}}dp-badge--ws
                   {{else}}dp-badge--rest{{/if}}">
-                  {{#if (eq type "GRAPHQL")}}<i class="bi bi-share"></i> GraphQL
-                  {{else if (eq type "WS")}}<i class="bi bi-broadcast"></i> WebSocket
+                  {{#if (eq type "GRAPHQL")}}<img src="/images/graphql-icon.svg" class="dp-badge-icon" alt="" /> GraphQL
+                  {{else if (eq type "WS")}}<img src="/images/websocket-icon.svg" class="dp-badge-icon" alt="" /> WebSocket
                   {{else if (eq type "WebSubApi")}}<i class="bi bi-broadcast-pin"></i> WebSub
                   {{else if (eq type "SOAP")}}<i class="bi bi-file-code"></i> SOAP
                   {{else}}<i class="bi bi-braces"></i> REST{{/if}}
                 </span>
-                {{#if ../showApiWorkflowsNav}}
+                {{#if ../aiEnabled}}
                 {{#unless (eq agentVisibility "HIDDEN")}}
                 <span class="dp-badge dp-badge--ai" title="AI agents can discover and use this API">
                   <i class="bi bi-robot"></i> AI Ready
@@ -136,7 +136,7 @@
           <div class="api-card-footer">
             <div class="api-card-footer-left">
               <a href="{{../baseUrl}}/api/{{id}}#subscriptionPlans" class="api-plans-link">
-                <i class="bi bi-tag"></i> {{subscriptionPlans.length}} plans
+                <i class="bi bi-tag"></i> {{subscriptionPlans.length}} {{conditionalIf (eq subscriptionPlans.length 1) "plan" "plans"}}
               </a>
             </div>
             {{#if hasSubscription}}
@@ -165,4 +165,5 @@
   </div>
 
   <script src='/technical-scripts/listing-cards.js' defer></script>
+  <script src='/technical-scripts/paginate.js' defer></script>
 </section>
diff --git a/portals/api-portal/src/defaultContent/pages/docs/partials/docs-nav.hbs b/portals/api-portal/src/defaultContent/pages/docs/partials/docs-nav.hbs
index d1294efd6a..35b834096a 100644
--- a/portals/api-portal/src/defaultContent/pages/docs/partials/docs-nav.hbs
+++ b/portals/api-portal/src/defaultContent/pages/docs/partials/docs-nav.hbs
@@ -6,22 +6,13 @@
       <div class="adoc-nav-group-title">SPECIFICATION</div>
       <div class="adoc-nav-items">
         <a href="{{../baseDocUrl}}/docs/specification"
-          class="adoc-nav-item doc-link{{#if ../isAPIDefinition}} adoc-nav-item--active{{/if}}">
+          class="adoc-nav-item doc-link{{#if ../isAPIDefinition}}{{#unless ../isTryout}} adoc-nav-item--active{{/unless}}{{/if}}">
           <i class="bi bi-code-slash"></i>
           <span>{{#if (eq ../apiType "Mcp")}}MCP Playground{{else}}API Definition{{/if}}</span>
         </a>
-        {{#if (eq ../apiType "WS")}}
-        <a href="{{../baseDocUrl}}/docs/specification?tryout=true" class="adoc-nav-item doc-link">
-          <i class="bi bi-play-circle"></i><span>Tryout</span>
-        </a>
-        {{/if}}
-        {{#if (eq ../apiType "WebSubApi")}}
-        <a href="{{../baseDocUrl}}/docs/specification?tryout=true" class="adoc-nav-item doc-link">
-          <i class="bi bi-play-circle"></i><span>Tryout</span>
-        </a>
-        {{/if}}
-        {{#if (eq ../apiType "GRAPHQL")}}
-        <a href="{{../baseDocUrl}}/docs/specification?tryout=true" class="adoc-nav-item doc-link">
+        {{#if ../supportsTryout}}
+        <a href="{{../baseDocUrl}}/docs/specification?tryout=true"
+          class="adoc-nav-item doc-link{{#if ../isTryout}} adoc-nav-item--active{{/if}}">
           <i class="bi bi-play-circle"></i><span>Tryout</span>
         </a>
         {{/if}}
diff --git a/portals/api-portal/src/defaultContent/pages/home/page.hbs b/portals/api-portal/src/defaultContent/pages/home/page.hbs
index 060ee37e60..9f2f9acabc 100644
--- a/portals/api-portal/src/defaultContent/pages/home/page.hbs
+++ b/portals/api-portal/src/defaultContent/pages/home/page.hbs
@@ -24,4 +24,4 @@
 {{#pageScripts}}
     <script src="/technical-scripts/home-discover.js" defer></script>
 {{/pageScripts}}
-{{> home showApiWorkflowsNav=showApiWorkflowsNav}}
+{{> home aiEnabled=aiEnabled}}
diff --git a/portals/api-portal/src/defaultContent/pages/home/partials/home.hbs b/portals/api-portal/src/defaultContent/pages/home/partials/home.hbs
index 56b281d7ce..0c6d259832 100644
--- a/portals/api-portal/src/defaultContent/pages/home/partials/home.hbs
+++ b/portals/api-portal/src/defaultContent/pages/home/partials/home.hbs
@@ -5,11 +5,11 @@
   <div class="hero-hero-body">
     <span class="hero-pill">
       <i class="bi bi-stars" aria-hidden="true"></i>
-      Ready for AI agents
+      {{#if aiEnabled}}Ready for AI agents{{else}}Ready for developers{{/if}}
     </span>
 
     <h1 class="hero-headline">
-      <span class="hero-headline-accent">{{artifactTypesLabel}}</span><br>built for Developers and AI Agents.
+      <span class="hero-headline-accent">{{artifactTypesLabel}}</span><br>built for Developers{{#if aiEnabled}} and AI Agents{{/if}}.
     </h1>
 
     <p class="hero-desc">
@@ -27,7 +27,7 @@
         Browse our MCP servers <i class="bi bi-arrow-right" aria-hidden="true"></i>
       </a>
       {{/if}}
-      {{#if showApiWorkflowsNav}}
+      {{#if aiEnabled}}
       <button type="button" class="hero-btn hero-btn--ai" data-bs-toggle="modal" data-bs-target="#discoverAiModal">
         <i class="bi bi-stars" aria-hidden="true"></i> Discover with AI
       </button>
@@ -37,7 +37,7 @@
 </section>
 
 <!-- ── Discover with AI modal ────────────────────────────── -->
-{{#if showApiWorkflowsNav}}
+{{#if aiEnabled}}
 <div class="modal fade" id="discoverAiModal" tabindex="-1" aria-labelledby="discoverAiModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
     <div class="modal-content hero-modal">
diff --git a/portals/api-portal/src/defaultContent/pages/mcp-landing/page.hbs b/portals/api-portal/src/defaultContent/pages/mcp-landing/page.hbs
index 69d40a5ea0..e6dc619ad0 100644
--- a/portals/api-portal/src/defaultContent/pages/mcp-landing/page.hbs
+++ b/portals/api-portal/src/defaultContent/pages/mcp-landing/page.hbs
@@ -19,6 +19,7 @@
 
 {{#pageHead}}
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+  <link rel="stylesheet" href="/technical-styles/agent-prompt.css">
 {{/pageHead}}
 {{#pageScripts}}
   <script src="/technical-scripts/oauth2-key-generation.js" defer></script>
@@ -26,6 +27,10 @@
   <script src='/technical-scripts/subscription-modal.js' defer></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" integrity="sha384-F/bZzf7p3Joyp5psL90p/p89AZJsndkSoGwRpXcZhleCWhd8SnRuoYo4d0yirjJp" crossorigin="anonymous"></script>
   <script src='/technical-scripts/mcp-landing.js' defer></script>
+  <script src='/technical-scripts/api-agent-prompt.js' defer></script>
+  {{!-- resourcePath drives the .md URL the prompt points at: /mcp/{handle}.md here,
+        served by the same loadAPIContentMd handler as the API pages. --}}
+  <script type="application/json" id="apiAgentData">{"baseUrl":"{{baseUrl}}","id":"{{apiMetadata.id}}","resourcePath":"mcp"}</script>
 {{/pageScripts}}
 <div style="padding: 1rem 1.5rem 0;">
   <nav class="dp-breadcrumb">
@@ -50,3 +55,10 @@
   </div>
 </div>
 {{> alert }}
+
+{{!-- ── AGENT PROMPT MODAL ── --}}
+{{#if aiEnabled}}
+{{#unless (eq apiMetadata.agentVisibility "HIDDEN")}}
+{{> api-agent-prompt-modal}}
+{{/unless}}
+{{/if}}
diff --git a/portals/api-portal/src/defaultContent/pages/mcp-landing/partials/mcp-detail-banner.hbs b/portals/api-portal/src/defaultContent/pages/mcp-landing/partials/mcp-detail-banner.hbs
index 452da6cf2e..72dbcbf518 100644
--- a/portals/api-portal/src/defaultContent/pages/mcp-landing/partials/mcp-detail-banner.hbs
+++ b/portals/api-portal/src/defaultContent/pages/mcp-landing/partials/mcp-detail-banner.hbs
@@ -13,7 +13,14 @@
         {{#if apiMetadata.version}}
         <span class="dp-badge dp-badge--version">{{apiMetadata.version}}</span>
         {{/if}}
-        <span class="dp-badge dp-badge--mcp"><i class="bi bi-cpu"></i> MCP</span>
+        <span class="dp-badge dp-badge--mcp"><span class="mcp-glyph dp-badge-icon" aria-hidden="true"></span> MCP</span>
+        {{#if aiEnabled}}
+        {{#unless (eq apiMetadata.agentVisibility "HIDDEN")}}
+        <span class="dp-badge dp-badge--ai" title="AI agents can discover and use this MCP server">
+          <i class="bi bi-robot"></i> AI Ready
+        </span>
+        {{/unless}}
+        {{/if}}
         {{#if (eq apiMetadata.status "DEPRECATED")}}
         <span class="dp-badge dp-badge--deprecated"><i class="bi bi-exclamation-circle"></i> Deprecated</span>
         {{/if}}
@@ -42,6 +49,13 @@
       <a class="dp-btn dp-btn--outline" href="{{baseUrl}}/mcp/{{apiMetadata.id}}/docs/specification">
         <i class="bi bi-book"></i> Documentation
       </a>
+      {{#if aiEnabled}}
+      {{#unless (eq apiMetadata.agentVisibility "HIDDEN")}}
+      <button type="button" class="dp-btn dp-btn--ai" data-bs-toggle="modal" data-bs-target="#apiAgentPromptModal">
+        <i class="bi bi-robot"></i> Try with AI
+      </button>
+      {{/unless}}
+      {{/if}}
       {{#if showApiKeysNav}}
       <a class="dp-btn dp-btn--outline" href="{{baseUrl}}/mcp/{{apiMetadata.id}}/api-keys">
         <i class="bi bi-key"></i> API Keys
diff --git a/portals/api-portal/src/defaultContent/pages/mcp/partials/mcp-listing.hbs b/portals/api-portal/src/defaultContent/pages/mcp/partials/mcp-listing.hbs
index 6aa88f424a..1e5580c04b 100644
--- a/portals/api-portal/src/defaultContent/pages/mcp/partials/mcp-listing.hbs
+++ b/portals/api-portal/src/defaultContent/pages/mcp/partials/mcp-listing.hbs
@@ -81,8 +81,14 @@
               <h5 class="api-card-title">{{or title name}}</h5>
               <div class="api-card-meta-row">
                 <span class="api-version">{{version}}</span>
-                <span class="dp-badge dp-badge--mcp"><i class="bi bi-cpu"></i> MCP</span>
-                <span class="dp-badge dp-badge--ai"><i class="bi bi-robot"></i> AI Ready</span>
+                <span class="dp-badge dp-badge--mcp"><span class="mcp-glyph dp-badge-icon" aria-hidden="true"></span> MCP</span>
+                {{#if ../aiEnabled}}
+                {{#unless (eq agentVisibility "HIDDEN")}}
+                <span class="dp-badge dp-badge--ai" title="AI agents can discover and use this MCP server">
+                  <i class="bi bi-robot"></i> AI Ready
+                </span>
+                {{/unless}}
+                {{/if}}
                 {{#if (eq status "DEPRECATED")}}
                 <span class="dp-badge dp-badge--deprecated"><i class="bi bi-exclamation-circle"></i> Deprecated</span>
                 {{/if}}
@@ -105,7 +111,7 @@
           <div class="api-card-footer">
             <div class="api-card-footer-left">
               <a href="{{../baseUrl}}/mcp/{{id}}#subscriptionPlans" class="api-plans-link">
-                <i class="bi bi-tag"></i> {{subscriptionPlans.length}} plans
+                <i class="bi bi-tag"></i> {{subscriptionPlans.length}} {{conditionalIf (eq subscriptionPlans.length 1) "plan" "plans"}}
               </a>
             </div>
             {{#if hasSubscription}}
@@ -134,4 +140,5 @@
   </div>
 
   <script src='/technical-scripts/listing-cards.js' defer></script>
+  <script src='/technical-scripts/paginate.js' defer></script>
 </section>
diff --git a/portals/api-portal/src/defaultContent/partials/header.hbs b/portals/api-portal/src/defaultContent/partials/header.hbs
index 1d202cb441..00aa4e6fdc 100644
--- a/portals/api-portal/src/defaultContent/partials/header.hbs
+++ b/portals/api-portal/src/defaultContent/partials/header.hbs
@@ -1,6 +1,13 @@
 <header>
   <nav class="navbar navbar-expand-lg custom-navbar fixed-top">
     <div class="container-fluid">
+      {{!-- Opens the sidebar as an off-canvas drawer. Only rendered visible below the
+            860px breakpoint (see side-bar.css) — above it the sidebar is always on
+            screen and this would be redundant. --}}
+      <button class="sidebar-toggle" id="sidebarToggle" type="button"
+        aria-label="Open navigation menu" aria-controls="sidebar" aria-expanded="false">
+        <i class="bi bi-list"></i>
+      </button>
       <a class="navbar-brand d-flex align-items-center" href="{{baseUrl}}">
         <img src="/images/api-portal-logo.svg" alt="Logo" class="navbar-logo me-2" />
       </a>
@@ -24,9 +31,10 @@
           <li>
             <hr class="dropdown-divider" />
           </li>
-          <li class="dropdown-item">
-            <i class="fas fa-sign-out-alt me-2"></i>
-            <a href="{{baseUrl}}/logout" class="profile-dropdown-link">Log Out</a>
+          <li>
+            <a href="{{baseUrl}}/logout" class="dropdown-item profile-dropdown-link">
+              <i class="fas fa-sign-out-alt me-2"></i>Log Out
+            </a>
           </li>
         </ul>
         {{else}}
diff --git a/portals/api-portal/src/defaultContent/partials/sidebar.hbs b/portals/api-portal/src/defaultContent/partials/sidebar.hbs
index 17b011d859..19fdc5dfee 100644
--- a/portals/api-portal/src/defaultContent/partials/sidebar.hbs
+++ b/portals/api-portal/src/defaultContent/partials/sidebar.hbs
@@ -1,3 +1,6 @@
+{{!-- Dimmed backdrop behind the mobile drawer; clicking it closes the sidebar.
+      Inert above the 860px breakpoint, where the sidebar is part of the layout. --}}
+<div class="sidebar-backdrop" id="sidebarBackdrop" hidden></div>
 <div class="sidebar" id="sidebar">
   <nav class="nav">
     <a href="{{baseUrl}}/" class="nav-link" id="home">
diff --git a/portals/api-portal/src/defaultContent/styles/components.css b/portals/api-portal/src/defaultContent/styles/components.css
index ebd1aa51ee..c69ec48e24 100644
--- a/portals/api-portal/src/defaultContent/styles/components.css
+++ b/portals/api-portal/src/defaultContent/styles/components.css
@@ -12,6 +12,18 @@
   white-space: nowrap;
 }
 
+.dp-badge-icon { width: 0.875em; height: 0.875em; flex: none; }
+
+.mcp-glyph {
+  display: inline-block;
+  flex: none;
+  width: 1em;
+  height: 1em;
+  background-color: currentcolor;
+  -webkit-mask: url("/images/mcp-icon.svg") no-repeat center / contain;
+  mask: url("/images/mcp-icon.svg") no-repeat center / contain;
+}
+
 .dp-badge--rest    { background: #e6f2fb; color: #0277bd; }
 .dp-badge--graphql { background: #fce4ef; color: #d6336c; }
 .dp-badge--soap    { background: #ece9fb; color: #6741d9; }
@@ -757,3 +769,69 @@
   opacity: 0.45;
   cursor: default;
 }
+
+/* ── Pagination ──────────────────────────────────────────────
+   Shared by the public API/MCP card grids and the Settings tables
+   (client-side pagination, see scripts/paginate.js). */
+.dp-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 24px;
+}
+
+.dp-pagination-info {
+  font-size: 0.8125rem;
+  color: var(--text-muted, #6b7280);
+}
+
+.dp-pagination-nav {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.dp-page-btn {
+  min-width: 34px;
+  height: 34px;
+  padding: 0 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-strong, #d0d7de);
+  border-radius: 8px;
+  background: var(--white, #fff);
+  color: var(--primary, #1a2433);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.dp-page-btn:hover:not(:disabled):not(.dp-page-btn--active) {
+  background: var(--surface-sunken, #f3f4f6);
+  border-color: var(--primary, #1a2433);
+}
+
+.dp-page-btn--active {
+  background: var(--cta-gradient, #1f6feb);
+  border-color: transparent;
+  color: var(--white, #fff);
+  cursor: default;
+}
+
+.dp-page-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.dp-page-ellipsis {
+  min-width: 20px;
+  text-align: center;
+  color: var(--text-muted, #6b7280);
+  user-select: none;
+}
diff --git a/portals/api-portal/src/defaultContent/styles/header.css b/portals/api-portal/src/defaultContent/styles/header.css
index 997887e998..45187139cd 100644
--- a/portals/api-portal/src/defaultContent/styles/header.css
+++ b/portals/api-portal/src/defaultContent/styles/header.css
@@ -83,6 +83,34 @@
   color: var(--white);
 }
 
+/* Keep the header a single row on small screens.
+   Bootstrap's .container-fluid inside .navbar is flex-wrap: wrap, and the logo has
+   no upper bound, so on a phone the brand and the profile/login block each took a
+   row of their own — and the sidebar hamburger (see side-bar.css) would have made a
+   third, ~136px of header before any content. Letting the brand shrink keeps all
+   three on one line. */
+@media (max-width: 53.75rem) {
+  .custom-navbar .container-fluid {
+    flex-wrap: nowrap;
+    gap: 0.5rem;
+  }
+
+  .custom-navbar .navbar-brand {
+    /* min-width:0 is what actually permits a flex item to shrink below its
+       content size; without it the logo keeps its intrinsic width and wraps. */
+    min-width: 0;
+    flex: 0 1 auto;
+    margin-right: 0;
+    overflow: hidden;
+  }
+
+  .custom-navbar .navbar-logo {
+    max-width: 100%;
+    height: auto;
+    max-height: 2rem;
+  }
+}
+
 @media (max-width: 48rem) {
   .navbar-brand span {
     font-size: 1rem;
diff --git a/portals/api-portal/src/defaultContent/styles/home.css b/portals/api-portal/src/defaultContent/styles/home.css
index cae8781448..cf66dfaebf 100644
--- a/portals/api-portal/src/defaultContent/styles/home.css
+++ b/portals/api-portal/src/defaultContent/styles/home.css
@@ -59,7 +59,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  min-height: calc(100vh - 7rem);   /* fill available vertical space */
+  min-height: calc(100vh - 6.5rem);   /* fill available vertical space */
   margin: 0 -2rem -1rem -2rem;   /* bleed past content-area padding */
   background: var(--surface-dark);
 }
diff --git a/portals/api-portal/src/defaultContent/styles/side-bar.css b/portals/api-portal/src/defaultContent/styles/side-bar.css
index d5eacadc44..12457e6f20 100644
--- a/portals/api-portal/src/defaultContent/styles/side-bar.css
+++ b/portals/api-portal/src/defaultContent/styles/side-bar.css
@@ -140,7 +140,7 @@
     background: var(--overlay);
     border-radius: 0 0 0.5rem 0.5rem;
     padding: 0.25rem 0.5rem 0.5rem;
-    margin: -0.25rem 0 0;
+    margin: -0.25rem 0.3rem 0 0.3rem;
 }
 
 .submenu.show {
@@ -264,9 +264,116 @@
     width: auto;
 }
 
-/* ── Responsive: hide on narrow screens ── */
+/* ── Hamburger + backdrop (desktop: both inert) ── */
+
+/* Lives in the header. Hidden above the breakpoint, where the sidebar is always
+   on screen and a toggle would be redundant. */
+.sidebar-toggle {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-right: 0.5rem;
+    padding: 0;
+    border: none;
+    border-radius: 0.5rem;
+    background: transparent;
+    color: var(--text-strong, #1b2028);
+    font-size: 1.5rem;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.sidebar-backdrop {
+    display: none;
+}
+
+/* ── Responsive: the sidebar becomes an off-canvas drawer ── */
+
+/* This used to be `display: none`, which removed the portal's ONLY primary
+   navigation below 860px and offered nothing in its place — Home, APIs, MCP
+   Servers, API Workflows, Applications, Subscriptions, API Keys and Settings
+   were all unreachable on a phone. The rail now slides in over the content,
+   opened by the header's hamburger and dismissed by the backdrop, Escape, or
+   picking a destination. */
 @media (max-width: 860px) {
+    .sidebar-toggle { display: inline-flex; }
+
     .sidebar {
-        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        height: 100%;
+        transform: translateX(-100%);
+        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        /* Above Bootstrap's .fixed-top navbar (1030) and the backdrop below. */
+        z-index: 1045;
+        overflow-y: auto;
+        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.28);
+    }
+
+    .sidebar.mobile-open { transform: translateX(0); }
+
+    /* Touch has no hover, so width/label rules keyed on :hover or .expanded can
+       never fire here — the open drawer is always the labelled, full-width form.
+       max-width keeps it off the right edge on very narrow phones. */
+    .sidebar,
+    .sidebar:hover:not(.force-collapse),
+    .sidebar.force-collapse:hover,
+    .sidebar.expanded {
+        width: 16.5rem;
+        max-width: 84vw;
+    }
+
+    .sidebar .nav-link { justify-content: flex-start; }
+
+    .sidebar .nav-text,
+    .sidebar .collapse-text {
+        margin-left: 0.875rem;
+        opacity: 1;
+        visibility: visible;
+        width: auto;
+    }
+
+    /* Pinning a drawer open has no meaning — it is dismissed, not collapsed. */
+    .collapse-btn,
+    .nav-section-divider { display: none; }
+
+    .sidebar-backdrop {
+        display: block;
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.45);
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.25s ease, visibility 0.25s ease;
+        z-index: 1040;
+    }
+
+    .sidebar-backdrop.visible {
+        opacity: 1;
+        visibility: visible;
     }
+
+    /* Scroll lock. Applied to .main-container, not <body> — main.css already sets
+       .main-body { overflow: hidden } and this layout scrolls the container, so a
+       body-level lock reads as if it works while the content keeps scrolling behind
+       the open drawer.
+
+       It lives inside the media query on purpose: as an inline style it would
+       survive a resize past the breakpoint if the cleanup listener didn't run,
+       leaving the desktop page unscrollable with no drawer in sight. Scoped here it
+       lapses on its own above 860px, whatever events the browser does or doesn't
+       emit. */
+    body.drawer-open .main-container {
+        overflow: hidden;
+    }
+}
+
+/* Users who prefer reduced motion get the drawer without the slide. */
+@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
+    .sidebar { transition: none; }
+    .sidebar-backdrop { transition: none; }
 }
diff --git a/portals/api-portal/src/middlewares/registerPartials.js b/portals/api-portal/src/middlewares/registerPartials.js
index bec4917f7a..3010797433 100644
--- a/portals/api-portal/src/middlewares/registerPartials.js
+++ b/portals/api-portal/src/middlewares/registerPartials.js
@@ -213,7 +213,7 @@ async function registerAPILandingContent(req, orgId, partialObject) {
     //replace image urls
     let images = metaData.apiImageMetadata;
     for (const key in images) {
-      let apiImageUrl = `${req.protocol}://${req.get('host')}${constants.API_PORTAL_API.orgPath(orgId)}${constants.ROUTE.API_FILE_PATH}${apiId}${constants.API_TEMPLATE_FILE_NAME}`
+      let apiImageUrl = `${req.protocol}://${req.get('host')}${constants.API_PORTAL_API.orgPath(orgId)}${constants.ROUTE.API_FILE_PATH}${metaData.id}${constants.API_TEMPLATE_FILE_NAME}`
       const modifiedApiImageURL = apiImageUrl + images[key]
       images[key] = modifiedApiImageURL;
     }
diff --git a/portals/api-portal/src/pages/settings/page.hbs b/portals/api-portal/src/pages/settings/page.hbs
index b62f65fa80..9cb5980cb9 100644
--- a/portals/api-portal/src/pages/settings/page.hbs
+++ b/portals/api-portal/src/pages/settings/page.hbs
@@ -14,10 +14,15 @@
   integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q=="
   crossorigin="anonymous"></script>
 {{/pageHead}}
+{{!-- alert.js must load before the settings-*.js scripts below: they call its
+     bindFormValidity() helper at init time. pageScripts concatenates in include
+     order, so this partial (which registers alert.js) has to come first. --}}
+{{> alert}}
 {{#pageScripts}}
 <script src='/technical-scripts/manage-api-workflows.js' defer></script>
 <script src='/technical-scripts/settings-nav.js' defer></script>
 <script src='/technical-scripts/settings-apis.js' defer></script>
+<script src='/technical-scripts/paginate.js' defer></script>
 <script src='/technical-scripts/settings-labels.js' defer></script>
 <script src='/technical-scripts/settings-organization.js' defer></script>
 <script src='/technical-scripts/settings-views.js' defer></script>
@@ -91,4 +96,3 @@
 </div><!-- /.cfg-page -->
 
 {{> cfg-modals}}
-{{> alert}}
diff --git a/portals/api-portal/src/pages/settings/partials/api-workflows.hbs b/portals/api-portal/src/pages/settings/partials/api-workflows.hbs
index 6246fc9caf..4e72e83818 100644
--- a/portals/api-portal/src/pages/settings/partials/api-workflows.hbs
+++ b/portals/api-portal/src/pages/settings/partials/api-workflows.hbs
@@ -18,81 +18,76 @@
         <div class="cfg-panel-header">
             <div>
                 <h2 class="cfg-panel-title">API Workflows</h2>
-                <p class="cfg-panel-desc">Encode your real-world API use cases as guided workflows, so AI agents know exactly how your APIs work together, <br />
-                    in the right order, for the right purpose. No guesswork, no hallucinations.</p>
+                <p class="cfg-panel-desc">Encode your real-world API use cases as guided workflows, so AI agents know exactly how your APIs work together, in the right order, for the right purpose. No guesswork, no hallucinations.</p>
             </div>
-            {{#if apiWorkflows.length}}
             <button class="cfg-btn-primary" id="createApiWorkflowBtn" type="button">
-                <i class="bi bi-plus me-1"></i> Create
+                <i class="bi bi-plus"></i> Add workflow
             </button>
-            {{/if}}
         </div>
 
         {{> view-combo hash="cfg-workflows" label="workflows"}}
 
-        {{#if apiWorkflows.length}}
-        <!-- Flows Grid -->
-        <div class="api-workflows-grid">
-            {{#each apiWorkflows}}
-            <div class="api-workflow-card">
-                <div class="api-workflow-card-header">
-                    <div class="api-workflow-card-meta-row">
-                        <span class="api-workflow-status-dot api-workflow-status-dot--{{lowercase this.status}}"></span>
-                        <span class="api-workflow-status-label">{{this.status}}</span>
-                        <span class="api-workflow-card-sep">·</span>
-                        <span class="api-workflow-content-type-badge api-workflow-content-type--{{lowercase this.contentType}}">{{this.contentType}}</span>
-                    </div>
-                    <div class="api-workflow-card-actions api-workflow-card-actions--hover">
-                        {{#unless (eq this.agentVisibility "HIDDEN")}}
-                        <button type="button"
-                            class="api-workflow-action-btn api-workflow-view-prompt-btn"
-                            title="View agent prompt"
-                            data-api-workflow-id="{{this.id}}">
-                            <i class="bi bi-robot"></i>
-                        </button>
-                        {{/unless}}
-                        <button type="button" class="api-workflow-action-btn api-workflow-edit-btn"
-                            title="Edit"
-                            data-api-workflow-id="{{this.id}}">
-                            <i class="bi bi-pencil"></i>
-                        </button>
-                        <button type="button" class="api-workflow-action-btn api-workflow-action-btn--danger api-workflow-delete-btn"
-                            title="Delete"
-                            data-api-workflow-id="{{this.id}}">
-                            <i class="bi bi-trash"></i>
-                        </button>
-                    </div>
-                </div>
-                <div class="api-workflow-card-body">
-                    <h5 class="api-workflow-card-title">{{this.displayName}}</h5>
-                    <p class="api-workflow-card-description" title="{{this.description}}">
-                        {{this.description}}
-                    </p>
-                </div>
-                <div class="api-workflow-card-footer">
-                    <div class="api-workflow-card-visibility-badges">
-                        {{#unless (eq this.agentVisibility "HIDDEN")}}
-                        <span class="api-workflow-visibility-badge api-workflow-agent-visible"
-                            title="AI agents can discover and use this workflow">
-                            <span class="agent-live-dot"></span>
-                            <i class="bi bi-robot"></i> AI Ready
-                        </span>
-                        {{/unless}}
-                    </div>
-                </div>
-            </div>
-            {{/each}}
-        </div>
-        {{else}}
-        <div class="dp-empty">
-            <span class="dp-empty-icon"><i class="bi bi-diagram-3"></i></span>
-            <h2 class="dp-empty-title">No API Workflows yet</h2>
-            <p class="dp-empty-desc">Create your first flow to define a multi-step API sequence.</p>
-            <button type="button" class="dp-btn dp-btn--primary dp-btn--lg" id="createApiWorkflowBtnEmpty">
-                <i class="bi bi-plus"></i> Create Your First Workflow
-            </button>
+        <div class="cfg-table-wrap">
+            <table class="cfg-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Status</th>
+                        <th>Type</th>
+                        <th style="width:52px;"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{#each apiWorkflows}}
+                    <tr>
+                        <td>
+                            <div class="cfg-api-cell">
+                                <span class="cfg-api-avatar cfg-api-avatar--workflow">{{firstTwoLetters this.displayName}}</span>
+                                <div>
+                                    <div class="cfg-cell-name">{{this.displayName}}</div>
+                                    {{#if this.description}}
+                                    <div class="cfg-cell-context" title="{{this.description}}">{{this.description}}</div>
+                                    {{/if}}
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            {{#if (eq this.status "PUBLISHED")}}
+                            <span class="cfg-status-badge cfg-status-published"><span class="cfg-status-dot"></span>Published</span>
+                            {{else if (eq this.status "DEPRECATED")}}
+                            <span class="cfg-status-badge cfg-status-deprecated"><span class="cfg-status-dot"></span>Deprecated</span>
+                            {{else}}
+                            <span class="cfg-status-badge cfg-status-draft"><span class="cfg-status-dot"></span>Draft</span>
+                            {{/if}}
+                        </td>
+                        <td><span class="cfg-name-chip">{{this.contentType}}</span></td>
+                        <td class="cfg-cell-actions">
+                            <button class="cfg-action-btn cfg-menu-trigger" type="button" aria-label="Workflow actions">
+                                <i class="bi bi-three-dots-vertical"></i>
+                            </button>
+                            <div class="cfg-dropdown">
+                                {{#unless (eq this.agentVisibility "HIDDEN")}}
+                                <button class="cfg-dropdown-item api-workflow-view-prompt-btn" type="button" data-api-workflow-id="{{this.id}}">
+                                    <i class="bi bi-robot"></i> View agent prompt
+                                </button>
+                                {{/unless}}
+                                <button class="cfg-dropdown-item api-workflow-edit-btn" type="button" data-api-workflow-id="{{this.id}}">
+                                    <i class="bi bi-pencil"></i> Edit
+                                </button>
+                                <div class="cfg-dropdown-divider"></div>
+                                <button class="cfg-dropdown-item cfg-dropdown-item--danger api-workflow-delete-btn" type="button" data-api-workflow-id="{{this.id}}">
+                                    <i class="bi bi-trash"></i> Delete
+                                </button>
+                            </div>
+                        </td>
+                    </tr>
+                    {{/each}}
+                    {{#unless apiWorkflows.length}}
+                    <tr><td colspan="4" class="cfg-empty-row">No API Workflows yet. Click <strong>Add workflow</strong> to get started.</td></tr>
+                    {{/unless}}
+                </tbody>
+            </table>
         </div>
-        {{/if}}
     </div>
 
     {{!-- ── CREATE / EDIT PANEL ── --}}
@@ -103,21 +98,16 @@
 </section>
 
 {{!-- ── DELETE CONFIRMATION MODAL ── --}}
-<div class="modal fade" id="deleteApiWorkflowModal" tabindex="-1" aria-hidden="true">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="deleteApiWorkflowModalTitle"></h5>
-            </div>
-            <div class="modal-body">
-                <p id="deleteApiWorkflowModalMessage"></p>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn common-btn-link" data-bs-dismiss="modal">Cancel</button>
-                <button type="button" class="btn common-btn-primary common-btn-danger" id="deleteApiWorkflowConfirmBtn" data-cyid="confirm">
-                    Confirm
-                </button>
-            </div>
+<div class="cfg-modal-overlay" id="deleteApiWorkflowModal" style="display:none;">
+    <div class="cfg-modal">
+        <div class="cfg-modal-header">
+            <span class="cfg-modal-icon"><i class="bi bi-trash"></i></span>
+            <h2 class="cfg-modal-title">Delete API Workflow</h2>
+        </div>
+        <p class="cfg-modal-body">Are you sure you want to delete <strong id="deleteApiWorkflowNameTxt"></strong>? This action cannot be undone.</p>
+        <div class="cfg-modal-actions">
+            <button type="button" class="cfg-btn-secondary" id="deleteApiWorkflowCancelBtn">Cancel</button>
+            <button type="button" class="cfg-btn-danger" id="deleteApiWorkflowConfirmBtn" data-cyid="confirm">Delete workflow</button>
         </div>
     </div>
 </div>
diff --git a/portals/api-portal/src/pages/settings/partials/cfg-apis-panel.hbs b/portals/api-portal/src/pages/settings/partials/cfg-apis-panel.hbs
index 5d0b40e9aa..6b431f5e72 100644
--- a/portals/api-portal/src/pages/settings/partials/cfg-apis-panel.hbs
+++ b/portals/api-portal/src/pages/settings/partials/cfg-apis-panel.hbs
@@ -156,7 +156,7 @@
               <p class="cfg-form-section-title">General</p>
               <div class="cfg-form-grid">
                 <div class="cfg-form-group">
-                  <label for="wz-name">API name <span class="required">*</span></label>
+                  <label for="wz-name">Name <span class="required">*</span></label>
                   <input type="text" id="wz-name" class="cfg-form-input" placeholder="e.g. Reading-List-API" />
                   <p id="wz-name-error" style="display:none;color:#c62828;font-size:.75rem;margin:3px 0 0;"></p>
                 </div>
@@ -171,14 +171,12 @@
                   <p class="cfg-field-hint">Auto-generated from name &amp; version. Edit to override — cannot be changed once created.</p>
                   <p id="wz-handle-error" style="display:none;color:#c62828;font-size:.75rem;margin:3px 0 0;"></p>
                 </div>
-                <div class="cfg-form-group">
+                <div class="cfg-form-group" id="wz-type-group">
                   <label for="wz-type">API type</label>
                   <select id="wz-type" class="cfg-form-input">
                     <option value="RestApi">REST</option>
                     <option value="WS">WebSocket</option>
                     <option value="GRAPHQL">GraphQL</option>
-                    <option value="WebSubApi">WebSub</option>
-                    <option value="Mcp">MCP</option>
                   </select>
                 </div>
                 <div class="cfg-form-group">
@@ -212,6 +210,7 @@
                 <div class="cfg-form-group">
                   <label for="wz-sandbox">Sandbox URL</label>
                   <input type="text" id="wz-sandbox" class="cfg-form-input cfg-form-input--mono" placeholder="https://sandbox.example.com/booking" />
+                  <p id="wz-sandbox-error" style="display:none;color:#c62828;font-size:.75rem;margin:3px 0 0;"></p>
                 </div>
               </div>
             </div>
@@ -236,9 +235,16 @@
                   {{/if}}
                 </div>
                 <div class="cfg-form-group cfg-form-group-full">
-                  <label for="wz-tags">Tags</label>
-                  <input type="text" id="wz-tags" class="cfg-form-input" placeholder="booking, travel  (comma separated)" />
-                  <p class="cfg-field-hint">Free-text keywords for search and discovery.</p>
+                  <label for="wz-tags-input">Tags</label>
+                  {{!-- Chip input, same markup/classes as the subscription-plan picker
+                        above. Tags are free text, so there is no dropdown — a chip is
+                        committed from what was typed. --}}
+                  <div class="cfg-chip-input-wrap" id="wz-tags-wrap">
+                    <div id="wz-tags-chips" style="display:contents;"></div>
+                    <input type="text" class="cfg-chip-text-input" id="wz-tags-input"
+                      placeholder="Add a tag…" autocomplete="off" aria-describedby="wz-tags-hint" />
+                  </div>
+                  <p class="cfg-field-hint" id="wz-tags-hint">Free-text keywords for search and discovery. Press Enter or comma to add; Backspace removes the last tag.</p>
                 </div>
                 <div class="cfg-form-group">
                   <label for="wz-status">Status</label>
diff --git a/portals/api-portal/src/pages/settings/partials/cfg-modals.hbs b/portals/api-portal/src/pages/settings/partials/cfg-modals.hbs
index 1ab8cb133c..ddc6a215d9 100644
--- a/portals/api-portal/src/pages/settings/partials/cfg-modals.hbs
+++ b/portals/api-portal/src/pages/settings/partials/cfg-modals.hbs
@@ -151,7 +151,7 @@
       <button type="button" class="cfg-modal-close" id="cfg-view-modal-close"><i class="bi bi-x-lg"></i></button>
     </div>
     <div class="cfg-form-group" style="margin-bottom:16px;">
-      <label for="view-display">Name</label>
+      <label for="view-display">Name <span class="required">*</span></label>
       <input type="text" id="view-display" class="cfg-form-input" placeholder="e.g. Partner APIs" />
     </div>
     <div class="cfg-form-group" style="margin-bottom:16px;">
@@ -169,7 +169,7 @@
         </button>
         {{/orgLabels}}
       </div>
-      <p class="cfg-field-hint">Click labels to toggle. APIs with these labels appear in this view.</p>
+      <p class="cfg-field-hint">Click labels to toggle. APIs and MCP Servers with these labels appear in this view.</p>
       {{else}}
       <p class="cfg-field-hint">No labels yet — create labels first to attach them to this view.</p>
       {{/if}}
diff --git a/portals/api-portal/src/pages/settings/partials/cfg-nav.hbs b/portals/api-portal/src/pages/settings/partials/cfg-nav.hbs
index 7474778c3f..d724d251c1 100644
--- a/portals/api-portal/src/pages/settings/partials/cfg-nav.hbs
+++ b/portals/api-portal/src/pages/settings/partials/cfg-nav.hbs
@@ -26,7 +26,7 @@
           <i class="bi bi-boxes"></i><span>APIs</span>
         </a>
         <a href="#cfg-mcps" class="cfg-nav-item" data-panel="cfg-mcps">
-          <i class="bi bi-hdd-network"></i><span>MCP Servers</span>
+          <span class="mcp-glyph" aria-hidden="true"></span><span>MCP Servers</span>
         </a>
       </div>
 
diff --git a/portals/api-portal/src/pages/settings/partials/cfg-organization-panel.hbs b/portals/api-portal/src/pages/settings/partials/cfg-organization-panel.hbs
index 5daf55a358..8116be906d 100644
--- a/portals/api-portal/src/pages/settings/partials/cfg-organization-panel.hbs
+++ b/portals/api-portal/src/pages/settings/partials/cfg-organization-panel.hbs
@@ -23,11 +23,6 @@
               <input type="text" id="org-handle" class="cfg-form-input cfg-form-input--mono" value="{{currentOrg.id}}" readonly />
               <p class="cfg-field-hint">Identifier used in URLs. Cannot be changed.</p>
             </div>
-            <div class="cfg-form-group">
-              <label for="org-artifact-types">Artifact types served</label>
-              <input type="text" id="org-artifact-types" class="cfg-form-input" value="{{artifactTypesLabel}}" readonly />
-              <p class="cfg-field-hint">Set by the operator in <code>[api_portal.artifacts]</code>. Pages for a type this portal doesn't serve return 404.</p>
-            </div>
           </div>
 
           <div class="llms-section-label" style="margin-top:28px;">Business owner</div>
diff --git a/portals/api-portal/src/pages/settings/partials/cfg-views-panel.hbs b/portals/api-portal/src/pages/settings/partials/cfg-views-panel.hbs
index 0c5f2c19bc..06f2fb4902 100644
--- a/portals/api-portal/src/pages/settings/partials/cfg-views-panel.hbs
+++ b/portals/api-portal/src/pages/settings/partials/cfg-views-panel.hbs
@@ -14,8 +14,8 @@
           <table class="cfg-table">
             <thead>
               <tr>
-                <th>Handle</th>
                 <th>Name</th>
+                <th>Handle</th>
                 <th>Labels</th>
                 <th style="width:90px;"></th>
               </tr>
@@ -23,14 +23,14 @@
             <tbody id="cfg-views-tbody">
               {{#views}}
               <tr id="cfg-view-row-{{id}}" data-id="{{id}}">
-                <td><span class="cfg-name-chip">{{id}}</span></td>
                 <td>
                   <button type="button" class="cfg-view-edit-btn" data-id="{{id}}"
                     style="border:none;background:none;padding:0;cursor:pointer;font-size:.875rem;font-weight:600;color:#1a2433;text-decoration:none;">{{displayName}}</button>
                 </td>
+                <td><span class="cfg-name-chip">{{id}}</span></td>
                 <td>
                   <div class="d-flex flex-wrap gap-1">
-                    {{#each labels}}<span class="cfg-name-chip">{{this}}</span>{{/each}}
+                    {{#each labelNames}}<span class="cfg-name-chip">{{this}}</span>{{/each}}
                   </div>
                 </td>
                 <td>
diff --git a/portals/api-portal/src/pages/settings/partials/cfg-webhook-form.hbs b/portals/api-portal/src/pages/settings/partials/cfg-webhook-form.hbs
index f0bcf41d31..8ec8489279 100644
--- a/portals/api-portal/src/pages/settings/partials/cfg-webhook-form.hbs
+++ b/portals/api-portal/src/pages/settings/partials/cfg-webhook-form.hbs
@@ -18,11 +18,6 @@
             <label for="wh-display">Name <span class="required">*</span></label>
             <input type="text" id="wh-display" class="cfg-form-input" placeholder="e.g. Production listener" />
           </div>
-          <div class="cfg-form-group" style="margin-bottom:16px;">
-            <label for="wh-handle">Handle <span class="required">*</span></label>
-            <input type="text" id="wh-handle" class="cfg-form-input cfg-form-input--mono" placeholder="production-listener" />
-            <p class="cfg-field-hint">Identifier used in the API path. Cannot be changed.</p>
-          </div>
           <div class="cfg-form-group" style="margin-bottom:16px;">
             <label for="wh-url">Target URL <span class="required">*</span></label>
             <input type="text" id="wh-url" class="cfg-form-input cfg-form-input--mono" placeholder="https://example.com/webhook" />
diff --git a/portals/api-portal/src/pages/settings/partials/cfg-webhooks-panel.hbs b/portals/api-portal/src/pages/settings/partials/cfg-webhooks-panel.hbs
index ae5a88a0da..2c71272a87 100644
--- a/portals/api-portal/src/pages/settings/partials/cfg-webhooks-panel.hbs
+++ b/portals/api-portal/src/pages/settings/partials/cfg-webhooks-panel.hbs
@@ -19,7 +19,6 @@
             <thead>
               <tr>
                 <th>Name</th>
-                <th>Handle</th>
                 <th>Target URL</th>
                 <th>Events</th>
                 <th>Secret</th>
@@ -34,7 +33,6 @@
                   <button type="button" class="cfg-webhook-edit-btn" data-id="{{id}}"
                     style="border:none;background:none;padding:0;cursor:pointer;font-size:.875rem;font-weight:600;color:#1a2433;text-decoration:none;">{{displayName}}</button>
                 </td>
-                <td><span class="cfg-name-chip">{{id}}</span></td>
                 <td>
                   <span class="cfg-name-chip" title="{{targetUrl}}"
                     style="display:inline-block;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{targetUrl}}</span>
@@ -62,7 +60,7 @@
               </tr>
               {{/webhookSubscribers}}
               {{#unless webhookSubscribers.length}}
-              <tr><td colspan="7" class="cfg-tbl-empty">No webhooks yet. Add one to get started.</td></tr>
+              <tr><td colspan="6" class="cfg-tbl-empty">No webhooks yet. Add one to get started.</td></tr>
               {{/unless}}
             </tbody>
           </table>
diff --git a/portals/api-portal/src/scripts/alert.js b/portals/api-portal/src/scripts/alert.js
index 92ab251d34..44e3fcbfb1 100644
--- a/portals/api-portal/src/scripts/alert.js
+++ b/portals/api-portal/src/scripts/alert.js
@@ -1,3 +1,48 @@
+/**
+ * Run an async `action` while showing a "processing" state on `button`: disable it and
+ * swap its label for a Bootstrap spinner + `busyText`, then always restore the original
+ * label and disabled state afterwards — even if `action` throws. Shared by the admin
+ * settings forms (views, webhooks, labels, plans, key managers, …) so every save/delete
+ * shows progress and can't be double-submitted. Follows the inline spinner convention
+ * already used elsewhere in the portal. Returns the action's promise.
+ */
+function withButtonBusy(button, busyText, action) {
+    if (!button) return Promise.resolve().then(action);
+    const originalHtml = button.innerHTML;
+    const wasDisabled = button.disabled;
+    button.disabled = true;
+    button.setAttribute('aria-busy', 'true');
+    button.innerHTML =
+        '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>' +
+        (busyText || 'Processing…');
+    return Promise.resolve().then(action).finally(() => {
+        button.innerHTML = originalHtml;
+        button.disabled = wasDisabled;
+        button.removeAttribute('aria-busy');
+    });
+}
+
+/**
+ * Keep a submit button disabled until a form is valid. `watchIds` lists the input /
+ * textarea / select ids whose changes can affect validity; `validate` returns true when
+ * the button should be enabled (typically: all required fields non-blank). The check runs
+ * on every input/change of a watched field and once immediately. Returns a `sync()` you can
+ * call after programmatically changing field values (opening or resetting a modal/form) so
+ * the button state stays correct. Shared by the admin settings forms.
+ */
+function bindFormValidity(button, watchIds, validate) {
+    if (!button) return function () {};
+    var els = (watchIds || []).map(function (id) { return document.getElementById(id); })
+        .filter(Boolean);
+    function sync() { button.disabled = !validate(); }
+    els.forEach(function (el) {
+        el.addEventListener('input', sync);
+        el.addEventListener('change', sync);
+    });
+    sync();
+    return sync;
+}
+
 function showAlert(message, type) {
     return new Promise((resolve) => {
         const alertElement = document.getElementById('alertToast');
@@ -12,17 +57,19 @@ function showAlert(message, type) {
             alertMessage.textContent = message;
         }
 
-        alertElement.classList.remove('success', 'error', 'info');
+        alertElement.classList.remove('success', 'error', 'warning', 'info');
         if (type) alertElement.classList.add(type);
 
-        // Set appropriate icon based on alert type
+        // Set the icon for the type. Every type gets one (unknown/none falls back to
+        // the info glyph) so a toast is never shown without an icon.
         if (alertIcon) {
-            alertIcon.className = 'alert-icon bi';
-            if (type === 'success') {
-                alertIcon.classList.add('bi-check-circle-fill');
-            } else if (type === 'error') {
-                alertIcon.classList.add('bi-exclamation-circle-fill');
-            }
+            var icons = {
+                success: 'bi-check-circle-fill',
+                error: 'bi-exclamation-circle-fill',
+                warning: 'bi-exclamation-triangle-fill',
+                info: 'bi-info-circle-fill',
+            };
+            alertIcon.className = 'alert-icon bi ' + (icons[type] || icons.info);
         }
 
         // Show the toast
diff --git a/portals/api-portal/src/scripts/api-agent-prompt.js b/portals/api-portal/src/scripts/api-agent-prompt.js
index 2e847e6ddc..3344fa498f 100644
--- a/portals/api-portal/src/scripts/api-agent-prompt.js
+++ b/portals/api-portal/src/scripts/api-agent-prompt.js
@@ -92,7 +92,10 @@ document.addEventListener('DOMContentLoaded', () => {
     if (dataEl) {
         try {
             const data = JSON.parse(dataEl.textContent);
-            const mdUrl = window.location.origin + data.baseUrl + '/api/' + data.id + '.md';
+            // MCP servers are served from /mcp/{handle}.md rather than /api/{handle}.md,
+            // so the segment comes from the page. Defaults to 'api' for the API pages.
+            const resourcePath = data.resourcePath || 'api';
+            const mdUrl = window.location.origin + data.baseUrl + '/' + resourcePath + '/' + data.id + '.md';
             _agentMdUrl = mdUrl;
             apiName = data.id;
 
diff --git a/portals/api-portal/src/scripts/api-workflow-detail.js b/portals/api-portal/src/scripts/api-workflow-detail.js
index 309eeee57f..9a85c16ed3 100644
--- a/portals/api-portal/src/scripts/api-workflow-detail.js
+++ b/portals/api-portal/src/scripts/api-workflow-detail.js
@@ -16,35 +16,6 @@
  * under the License.
  */
 
-/**
- * Show a temporary notification toast
- */
-function showNotification(message, type = 'info') {
-    const notification = document.createElement('div');
-    notification.className = `notification notification-${type}`;
-    const content = document.createElement('div');
-    content.className = 'notification-content';
-    const icon = document.createElement('i');
-    icon.classList.add('bi', type === 'success' ? 'bi-check-circle' : 'bi-exclamation-circle');
-    const span = document.createElement('span');
-    span.textContent = message;
-    content.append(icon, span);
-    notification.appendChild(content);
-
-    document.body.appendChild(notification);
-
-    setTimeout(() => {
-        notification.classList.add('show');
-    }, 10);
-
-    setTimeout(() => {
-        notification.classList.remove('show');
-        setTimeout(() => {
-            notification.remove();
-        }, 300);
-    }, 3000);
-}
-
 /**
  * Render markdown content into the markdownViewer container
  */
diff --git a/portals/api-portal/src/scripts/common.js b/portals/api-portal/src/scripts/common.js
index 9b748f123b..9d0e293868 100644
--- a/portals/api-portal/src/scripts/common.js
+++ b/portals/api-portal/src/scripts/common.js
@@ -69,6 +69,113 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 
+    /* ── Mobile drawer ──
+       Below 860px the sidebar is off-canvas (see side-bar.css) and this is the only
+       way to reach it. Everything below is a no-op above that breakpoint, where the
+       toggle and backdrop are display:none and never receive events. */
+    const sidebarToggle = document.getElementById('sidebarToggle');
+    const sidebarBackdrop = document.getElementById('sidebarBackdrop');
+
+    if (sidebarToggle && sidebarBackdrop) {
+        sidebarBackdrop.hidden = false; // inert via CSS until the breakpoint applies
+
+        /* matchMedia mirrors side-bar.css's own 860px so the two can't disagree.
+           Declared before the helpers below because they read it. */
+        const mobileQuery = window.matchMedia('(max-width: 860px)');
+
+        const isOpen = () => sidebar.classList.contains('mobile-open');
+
+        /* A closed drawer is only moved off-screen by a transform, so it stayed in the
+           tab order and the accessibility tree: 13 focusable links a keyboard user
+           could tab into invisibly, and that a screen reader would still announce.
+           `inert` removes both; `aria-hidden` is set alongside for assistive tech that
+           predates it. Above the breakpoint the sidebar is ordinary visible layout, so
+           neither may ever apply there — which is why this is re-run on breakpoint
+           change and not just on open/close. */
+        const syncDrawerHiddenState = () => {
+            const hidden = mobileQuery.matches && !isOpen();
+            sidebar.toggleAttribute('inert', hidden);
+            sidebar.setAttribute('aria-hidden', hidden ? 'true' : 'false');
+        };
+
+        const openDrawer = () => {
+            sidebar.classList.add('mobile-open');
+            sidebarBackdrop.classList.add('visible');
+            sidebarToggle.setAttribute('aria-expanded', 'true');
+            // Stops the page scrolling behind the drawer on touch. A class, not an
+            // inline style, so the rule can live inside side-bar.css's 860px media
+            // query and lapse on its own above the breakpoint.
+            document.body.classList.add('drawer-open');
+            // Before any caller focuses into the drawer — focus() is a no-op on an
+            // inert subtree.
+            syncDrawerHiddenState();
+        };
+
+        const closeDrawer = () => {
+            /* Move focus out before the subtree goes inert, otherwise it lands on
+               <body> and the user loses their place. The toggle is where they came
+               from, so it is where they go back to. */
+            if (sidebar.contains(document.activeElement)) {
+                sidebarToggle.focus();
+            }
+            sidebar.classList.remove('mobile-open');
+            sidebarBackdrop.classList.remove('visible');
+            sidebarToggle.setAttribute('aria-expanded', 'false');
+            document.body.classList.remove('drawer-open');
+            syncDrawerHiddenState();
+        };
+
+        sidebarToggle.addEventListener('click', () => {
+            if (isOpen()) {
+                closeDrawer();
+            } else {
+                openDrawer();
+                sidebar.querySelector('.nav-link')?.focus();
+            }
+        });
+
+        sidebarBackdrop.addEventListener('click', closeDrawer);
+
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && isOpen()) {
+                closeDrawer();
+                sidebarToggle.focus();
+            }
+        });
+
+        /* Navigating leaves the drawer open over the new page on a same-document
+           route (the submenu links are '#'-href and handled in JS), so close on any
+           destination pick. Submenu parents only expand a section — those stay open. */
+        sidebar.addEventListener('click', (e) => {
+            const link = e.target.closest('a.nav-link');
+            if (!link || !isOpen()) return;
+            const href = link.getAttribute('href');
+            if (!href || href === '#') return; // section expander, not a destination
+            closeDrawer();
+        });
+
+        /* Rotating to landscape / resizing past the breakpoint must not leave the
+           drawer flagged open, nor leave the sidebar inert once it is part of the
+           desktop layout again. matchMedia rather than a resize listener: it fires
+           exactly on the breakpoint crossing, including orientation changes, which
+           don't always emit resize. */
+        const syncToBreakpoint = () => {
+            if (!mobileQuery.matches && isOpen()) {
+                closeDrawer(); // already re-syncs the hidden state
+            } else {
+                syncDrawerHiddenState();
+            }
+        };
+        if (mobileQuery.addEventListener) {
+            mobileQuery.addEventListener('change', syncToBreakpoint);
+        } else if (mobileQuery.addListener) {
+            mobileQuery.addListener(syncToBreakpoint); // Safari < 14
+        }
+
+        // Initial state: inert below the breakpoint (drawer starts closed), never above.
+        syncDrawerHiddenState();
+    }
+
     // Set active status based on current URL path
     const setActiveSidebarLink = () => {
         const currentPath = window.location.pathname;
@@ -191,30 +298,6 @@ document.addEventListener("DOMContentLoaded", function () {
     // Call the function when page loads
     setActiveSidebarLink();
 
-    // Set active documentation link based on current path
-    const setActiveDocLink = () => {
-        const currentPath = window.location.pathname;
-        const docLinks = document.querySelectorAll('.doc-link');
-
-        // Check if we're on a docs page
-        if (currentPath.includes('/docs/')) {
-            docLinks.forEach(link => {
-                const href = link.getAttribute('href');
-                // Remove active class first
-                link.classList.remove('active');
-
-                // Add active class if the href matches the current path
-                if (href === currentPath ||
-                    (href && currentPath.endsWith(href)) ||
-                    (href && currentPath === href)) {
-                    link.classList.add('active');
-                }
-            });
-        }
-    };
-
-    // Call the function when page loads
-    setActiveDocLink();
 
     // Handle API card message overlays
     const messageOverlays = document.querySelectorAll('.message-overlay');
diff --git a/portals/api-portal/src/scripts/manage-api-workflows.js b/portals/api-portal/src/scripts/manage-api-workflows.js
index a0dbe18a42..15dfd8d7e1 100644
--- a/portals/api-portal/src/scripts/manage-api-workflows.js
+++ b/portals/api-portal/src/scripts/manage-api-workflows.js
@@ -73,7 +73,6 @@ document.addEventListener('DOMContentLoaded', function () {
     const listSection = document.getElementById('apiWorkflowList');
     const formSection = document.getElementById('apiWorkflowForm');
     const createBtn = document.getElementById('createApiWorkflowBtn');
-    const createBtnEmpty = document.getElementById('createApiWorkflowBtnEmpty');
 
     function showForm() {
         listSection.style.display = 'none';
@@ -97,7 +96,14 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     createBtn?.addEventListener('click', handleCreateClick);
-    createBtnEmpty?.addEventListener('click', handleCreateClick);
+
+    // Delete-confirmation modal (cfg-modal style — dismiss on Cancel or overlay click).
+    document.getElementById('deleteApiWorkflowCancelBtn')?.addEventListener('click', () => {
+        document.getElementById('deleteApiWorkflowModal').style.display = 'none';
+    });
+    document.getElementById('deleteApiWorkflowModal')?.addEventListener('click', function (e) {
+        if (e.target === this) this.style.display = 'none';
+    });
 
     document.getElementById('cancelApiWorkflowBtn')?.addEventListener('click', showList);
     document.getElementById('cancelApiWorkflowBtn2')?.addEventListener('click', showList);
@@ -166,10 +172,14 @@ document.addEventListener('DOMContentLoaded', function () {
         saveApiWorkflow(currentOrgId, currentViewName, this.dataset.status);
     });
 
-    // List view action buttons
+    // List view action buttons (these live in the shared cfg-table three-dots
+    // dropdown; closeRowMenus() hides it after an action, matching the other panels).
+    const closeRowMenus = () => document.querySelectorAll('.cfg-dropdown').forEach(d => { d.style.display = 'none'; });
+
     document.querySelectorAll('.api-workflow-view-prompt-btn').forEach(btn => {
         btn.addEventListener('click', (e) => {
             e.preventDefault();
+            closeRowMenus();
             openPromptModal(btn.dataset.apiWorkflowId);
         });
     });
@@ -177,6 +187,7 @@ document.addEventListener('DOMContentLoaded', function () {
     document.querySelectorAll('.api-workflow-edit-btn').forEach(btn => {
         btn.addEventListener('click', (e) => {
             e.preventDefault();
+            closeRowMenus();
             openEditApiWorkflow(btn.dataset.apiWorkflowId);
         });
     });
@@ -184,6 +195,7 @@ document.addEventListener('DOMContentLoaded', function () {
     document.querySelectorAll('.api-workflow-delete-btn').forEach(btn => {
         btn.addEventListener('click', (e) => {
             e.preventDefault();
+            closeRowMenus();
             openDeleteApiWorkflowModal(currentOrgId, currentViewName, btn.dataset.apiWorkflowId);
         });
     });
@@ -1367,46 +1379,34 @@ function openDeleteApiWorkflowModal(orgId, viewName, apiWorkflowId) {
     const flow = (apiWorkflowsData || []).find(f => String(f.id) === String(apiWorkflowId));
     const flowName = flow?.displayName || 'API Workflow';
 
-    document.getElementById('deleteApiWorkflowModalTitle').textContent = 'Delete API Workflow';
-    const messageEl = document.getElementById('deleteApiWorkflowModalMessage');
-    messageEl.textContent = `Are you sure you want to delete "${flowName}"? This action cannot be undone.`;
+    // The name goes into a dedicated <strong> via textContent (never interpolated
+    // into HTML) so a crafted display name can't inject markup — see js-output-encoding-xss.
+    document.getElementById('deleteApiWorkflowNameTxt').textContent = flowName;
 
     const confirmBtn = document.getElementById('deleteApiWorkflowConfirmBtn');
-    confirmBtn.disabled = false;
-    confirmBtn.innerHTML = 'Confirm';
     confirmBtn.onclick = () => deleteApiWorkflow(orgId, viewName, apiWorkflowId);
-    const modal = new bootstrap.Modal(document.getElementById('deleteApiWorkflowModal'));
-    modal.show();
+    document.getElementById('deleteApiWorkflowModal').style.display = 'flex';
 }
 
 async function deleteApiWorkflow(orgId, viewName, apiWorkflowId) {
     const confirmBtn = document.getElementById('deleteApiWorkflowConfirmBtn');
-    confirmBtn.disabled = true;
-    confirmBtn.style.backgroundColor = 'var(--danger)';
-    confirmBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span> Deleting…';
-
-    const resetBtn = () => {
-        confirmBtn.disabled = false;
-        confirmBtn.style.backgroundColor = '';
-        confirmBtn.innerHTML = 'Confirm';
-    };
-
-    try {
-        const response = await fetch(apiPortalApi.root(`/views/${viewName}/api-workflows/${apiWorkflowId}`), {
-            method: 'DELETE',
-            headers: { 'X-CSRF-Token': csrfToken },
-            credentials: 'same-origin'
-        });
-        if (response.ok) {
-            window.location.reload();
-        } else {
-            resetBtn();
+    await withButtonBusy(confirmBtn, 'Deleting…', async () => {
+        try {
+            const response = await fetch(apiPortalApi.root(`/views/${viewName}/api-workflows/${apiWorkflowId}`), {
+                method: 'DELETE',
+                headers: { 'X-CSRF-Token': csrfToken },
+                credentials: 'same-origin'
+            });
+            if (response.ok) {
+                window.location.reload();
+                return;
+            }
             showAlert('Failed to delete API Workflow', 'error');
+        } catch (error) {
+            showAlert(`Failed to delete API Workflow: ${error.message}`, 'error');
         }
-    } catch (error) {
-        resetBtn();
-        showAlert(`Failed to delete API Workflow: ${error.message}`, 'error');
-    }
+        document.getElementById('deleteApiWorkflowModal').style.display = 'none';
+    });
 }
 
 // ─────────────────────────────────────────────
diff --git a/portals/api-portal/src/scripts/paginate.js b/portals/api-portal/src/scripts/paginate.js
new file mode 100644
index 0000000000..8af325f545
--- /dev/null
+++ b/portals/api-portal/src/scripts/paginate.js
@@ -0,0 +1,174 @@
+/*
+ * Copyright (c) 2026, WSO2 LLC. (http://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+ * Client-side pagination shared by the public API/MCP card listings and the
+ * Settings APIs/MCPs tables. Every item is already rendered server-side (the
+ * portal loads the full catalog and search is a server round-trip), so this
+ * only toggles per-page visibility and draws a control bar — no data fetching.
+ * Below its page-size threshold a surface shows everything and no controls.
+ */
+(function () {
+  'use strict';
+
+  var GRID_PAGE_SIZE = 12; // multiple of 3 — fits the 3-column card grid
+  var TABLE_PAGE_SIZE = 10;
+
+  function el(tag, cls) {
+    var e = document.createElement(tag);
+    if (cls) e.className = cls;
+    return e;
+  }
+
+  // Compact page list around the current page: 1 … c-1 c c+1 … N
+  function pageNumbers(pages, current) {
+    var out = [];
+    for (var p = 1; p <= pages; p++) {
+      if (p === 1 || p === pages || (p >= current - 1 && p <= current + 1)) {
+        out.push(p);
+      } else if (out[out.length - 1] !== '…') {
+        out.push('…');
+      }
+    }
+    return out;
+  }
+
+  /*
+   * getItems() is called on every apply() so row removals (bulk/single delete in
+   * Settings) are picked up without the caller re-wiring anything. `mount` is the
+   * element the control bar renders into; `anchor` (optional) is scrolled to the
+   * top on a page change so the user isn't left mid-list.
+   */
+  function createPaginator(getItems, pageSize, mount, anchor) {
+    var current = 1;
+
+    function go(p) {
+      current = p;
+      apply();
+      if (anchor && anchor.scrollIntoView) {
+        anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+
+    function apply() {
+      var items = getItems();
+      var pages = Math.max(1, Math.ceil(items.length / pageSize));
+      if (current > pages) current = pages;
+      if (current < 1) current = 1;
+
+      // Not enough items to paginate — show them all, hide the controls.
+      if (items.length <= pageSize) {
+        items.forEach(function (it) { it.style.display = ''; });
+        mount.innerHTML = '';
+        mount.style.display = 'none';
+        return;
+      }
+
+      var start = (current - 1) * pageSize;
+      var end = Math.min(start + pageSize, items.length);
+      items.forEach(function (it, i) {
+        it.style.display = (i >= start && i < end) ? '' : 'none';
+      });
+      mount.style.display = '';
+      renderControls(pages, start, end, items.length);
+    }
+
+    function navBtn(cls, iconClass, label, disabled, onClick) {
+      var b = el('button', 'dp-page-btn ' + cls);
+      b.type = 'button';
+      b.setAttribute('aria-label', label);
+      b.innerHTML = '<i class="bi ' + iconClass + '"></i>';
+      b.disabled = disabled;
+      if (!disabled) b.addEventListener('click', onClick);
+      return b;
+    }
+
+    function renderControls(pages, start, end, total) {
+      mount.innerHTML = '';
+
+      var info = el('span', 'dp-pagination-info');
+      info.textContent = 'Showing ' + (start + 1) + '–' + end + ' of ' + total;
+      mount.appendChild(info);
+
+      var nav = el('div', 'dp-pagination-nav');
+      nav.appendChild(navBtn('dp-page-nav', 'bi-chevron-left', 'Previous page',
+        current === 1, function () { go(current - 1); }));
+
+      pageNumbers(pages, current).forEach(function (p) {
+        if (p === '…') {
+          var gap = el('span', 'dp-page-ellipsis');
+          gap.textContent = '…';
+          nav.appendChild(gap);
+          return;
+        }
+        var b = el('button', 'dp-page-btn' + (p === current ? ' dp-page-btn--active' : ''));
+        b.type = 'button';
+        b.textContent = String(p);
+        if (p === current) b.setAttribute('aria-current', 'page');
+        b.addEventListener('click', function () { go(p); });
+        nav.appendChild(b);
+      });
+
+      nav.appendChild(navBtn('dp-page-nav', 'bi-chevron-right', 'Next page',
+        current === pages, function () { go(current + 1); }));
+
+      mount.appendChild(nav);
+    }
+
+    return { apply: apply };
+  }
+
+  // Public card grids (/apis and /mcps) — items are the .col-* card wrappers.
+  function paginateGrid() {
+    var grid = document.querySelector('.apilist-container .row.row-gap-4');
+    if (!grid) return;
+    var getItems = function () {
+      return Array.prototype.filter.call(grid.children, function (c) {
+        return c.nodeType === 1;
+      });
+    };
+    if (getItems().length === 0) return; // empty-state markup, no grid children
+    var mount = el('div', 'dp-pagination');
+    grid.parentNode.insertBefore(mount, grid.nextSibling);
+    createPaginator(getItems, GRID_PAGE_SIZE, mount, grid).apply();
+  }
+
+  // Settings tables — items are the API/MCP rows (the empty-state row has no id).
+  function paginateTable(tbodyId) {
+    var tbody = document.getElementById(tbodyId);
+    if (!tbody) return;
+    var wrap = tbody.closest('.cfg-table-wrap') || tbody.parentNode;
+    var getItems = function () {
+      return Array.prototype.slice.call(tbody.querySelectorAll('tr[id^="cfg-api-row-"]'));
+    };
+    var mount = el('div', 'dp-pagination');
+    wrap.parentNode.insertBefore(mount, wrap.nextSibling);
+    var paginator = createPaginator(getItems, TABLE_PAGE_SIZE, mount, wrap);
+    paginator.apply();
+    // Rows are removed on delete; reflow so the current page and controls stay
+    // correct. childList-only means our own display toggles don't retrigger it.
+    new MutationObserver(function () { paginator.apply(); })
+      .observe(tbody, { childList: true });
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    paginateGrid();
+    paginateTable('cfg-apis-tbody');
+    paginateTable('cfg-mcps-tbody');
+  });
+})();
diff --git a/portals/api-portal/src/scripts/settings-apis.js b/portals/api-portal/src/scripts/settings-apis.js
index 60e91063e3..42864fe447 100644
--- a/portals/api-portal/src/scripts/settings-apis.js
+++ b/portals/api-portal/src/scripts/settings-apis.js
@@ -34,6 +34,12 @@
   var contentZipFile = null;
   var hasContentStep = false;   /* the Content step exists only for existing, non-MCP APIs */
   var wizardOrigin = 'cfg-apis'; /* tab that launched the wizard: 'cfg-apis' or 'cfg-mcps' */
+  /* MCP is created via its own flow (type field hidden, always 'Mcp'); the API-type
+     dropdown only offers the user-selectable API types. wizardEditType preserves the
+     original type on edit for types the dropdown no longer lists (Mcp, WebSub, SOAP). */
+  var TYPE_DROPDOWN_VALUES = { RestApi: 1, WS: 1, GRAPHQL: 1 };
+  var wizardIsMcp = false;
+  var wizardEditType = null;
 
   /* build id→api lookup and load all policies from server-rendered data blobs */
   var apiMap = {};
@@ -111,6 +117,21 @@
   document.getElementById('wz-name').addEventListener('input', autoHandle);
   document.getElementById('wz-version').addEventListener('input', autoHandle);
 
+  /* ── keep the step-0 Next button disabled until the required fields are filled ──
+     Name, Version and Handle are the step-0 requirements (validateStep0). Once past
+     step 0 they can't be empty, so the button only ever disables while on step 0. */
+  function step0Valid() {
+    return v('wz-name') !== '' && v('wz-version') !== '' && v('wz-handle') !== '';
+  }
+  function syncWizardNext() {
+    var nextBtn = document.getElementById('cfg-wizard-next');
+    if (nextBtn) nextBtn.disabled = (currentStep === 0) && !step0Valid();
+  }
+  ['wz-name', 'wz-version', 'wz-handle'].forEach(function(id) {
+    var el = document.getElementById(id);
+    if (el) el.addEventListener('input', syncWizardNext);
+  });
+
   /* ── agent visibility toggle ── */
   document.getElementById('wz-vis-visible').addEventListener('click', function() {
     agentVis = 'Visible';
@@ -225,12 +246,118 @@
     });
   }());
 
+  /* ── tag chip input ──
+     Same chip markup and classes as the subscription-plan picker above, but tags are
+     free text: there is nothing to search, so a chip is committed from whatever was
+     typed rather than picked from a dropdown. */
+  var tagChips = [];
+
+  function renderTagChips() {
+    var container = document.getElementById('wz-tags-chips');
+    if (!container) return;
+    container.innerHTML = '';
+    tagChips.forEach(function(tag) {
+      var chip = document.createElement('span');
+      chip.className = 'cfg-chip';
+      chip.innerHTML = esc(tag) +
+        '<button type="button" class="cfg-chip-remove" data-tag="'+esc(tag)+'" title="Remove ' + esc(tag) + '"><i class="bi bi-x"></i></button>';
+      chip.querySelector('.cfg-chip-remove').addEventListener('click', function(e) {
+        e.stopPropagation();
+        removeTag(e.currentTarget.dataset.tag);
+        var input = document.getElementById('wz-tags-input');
+        if (input) input.focus();
+      });
+      container.appendChild(chip);
+    });
+  }
+
+  /* Case-insensitive dedupe, keeping the casing first entered: "Travel" and "travel"
+     as separate chips is a typo every time, and unlike the old free-text field the
+     duplicate is now plainly visible. */
+  function addTag(raw) {
+    var tag = String(raw || '').trim();
+    if (!tag) return;
+    var lower = tag.toLowerCase();
+    if (tagChips.some(function(t){ return t.toLowerCase() === lower; })) return;
+    tagChips.push(tag);
+    renderTagChips();
+  }
+
+  function removeTag(tag) {
+    tagChips = tagChips.filter(function(t){ return t !== tag; });
+    renderTagChips();
+  }
+
+  /* Splits on commas so a pasted "a, b, c" — and anything typed in the old
+     comma-separated habit — still lands as separate chips. */
+  function commitTagInput() {
+    var input = document.getElementById('wz-tags-input');
+    if (!input) return;
+    input.value.split(',').forEach(addTag);
+    input.value = '';
+  }
+
+  function getTags() { return tagChips.slice(); }
+
+  function setTags(list) {
+    tagChips = [];
+    var items = Array.isArray(list) ? list : (list ? String(list).split(',') : []);
+    items.forEach(addTag);
+    renderTagChips();
+    var input = document.getElementById('wz-tags-input');
+    if (input) input.value = '';
+  }
+
+  (function() {
+    var wrap = document.getElementById('wz-tags-wrap');
+    var input = document.getElementById('wz-tags-input');
+    if (!input) return;
+    if (wrap) wrap.addEventListener('click', function() { input.focus(); });
+    input.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' || e.key === ',') {
+        // Enter would otherwise submit the wizard with the tag still uncommitted.
+        e.preventDefault();
+        commitTagInput();
+      } else if (e.key === 'Backspace' && !input.value && tagChips.length) {
+        e.preventDefault();
+        removeTag(tagChips[tagChips.length - 1]);
+      }
+    });
+    // Losing focus commits too — otherwise a typed-but-not-entered tag is silently
+    // dropped when the user clicks Save.
+    input.addEventListener('blur', commitTagInput);
+    input.addEventListener('paste', function(e) {
+      var clip = e.clipboardData || window.clipboardData;
+      var text = clip && clip.getData('text');
+      // No comma: nothing to split, so let the browser paste normally.
+      if (!text || text.indexOf(',') < 0) return;
+      e.preventDefault();
+      /* Splice the pasted text in at the caret (replacing any selection) rather than
+         committing it on its own, so a half-typed tag joins the paste instead of
+         being left orphaned in the input: "foo" with "bar, baz" pasted at the end
+         commits as "foobar" and "baz" — what typing those same characters would do. */
+      var start = input.selectionStart != null ? input.selectionStart : input.value.length;
+      var end = input.selectionEnd != null ? input.selectionEnd : input.value.length;
+      input.value = input.value.slice(0, start) + text + input.value.slice(end);
+      commitTagInput();
+    });
+  }());
+
   /* ── wizard show/hide ── */
   function showWizard(api, kindHint) {
     /* MCP servers and APIs share this wizard. Derive the "kind" from the record being
        edited, or from the launching button (kindHint) when adding. */
     var isMcp = api ? (api.apiType === 'Mcp') : (kindHint === 'mcp');
     wizardOrigin = isMcp ? 'cfg-mcps' : 'cfg-apis';
+    wizardIsMcp = isMcp;
+    wizardEditType = api ? api.apiType : null;
+
+    /* The API-type field is only meaningful for the user-selectable API types. Hide it
+       for MCP (always 'Mcp') and when editing a type the dropdown no longer lists
+       (WebSub/SOAP) — the original type is preserved on save via wizardEditType. */
+    var hideTypeField = isMcp || (!!api && !TYPE_DROPDOWN_VALUES[api.apiType]);
+    var typeGroup = document.getElementById('wz-type-group');
+    if (typeGroup) typeGroup.style.display = hideTypeField ? 'none' : '';
 
     /* The wizard markup lives inside #cfg-apis; reveal that panel (with its list hidden)
        regardless of which tab launched it, and keep the launching tab highlighted. */
@@ -271,7 +398,7 @@
       sel('wz-type',      api.apiType);
       sel('wz-status',    api.apiStatus === 'DEPRECATED' ? 'DEPRECATED' : 'PUBLISHED');
       sv('wz-desc',       api.apiDescription);
-      sv('wz-tags',       (api.tags && api.tags.length) ? (Array.isArray(api.tags) ? api.tags.join(', ') : api.tags) : '');
+      setTags(api.tags);
       sv('wz-prod',       api.productionUrl);
       sv('wz-sandbox',    api.sandboxUrl);
       sv('wz-tech-owner', (api.owners && api.owners.technicalOwner)      || api.technicalOwner      || '');
@@ -289,9 +416,11 @@
       /* add mode */
       editingId = null;
       document.getElementById('cfg-wizard-title').textContent = isMcp ? 'Add MCP Server' : 'Add API';
-      ['wz-name','wz-version','wz-handle','wz-desc','wz-tags','wz-prod','wz-sandbox','wz-tech-owner','wz-tech-email','wz-biz-owner','wz-biz-email'].forEach(function(id){ sv(id,''); });
+      ['wz-name','wz-version','wz-handle','wz-desc','wz-prod','wz-sandbox','wz-tech-owner','wz-tech-email','wz-biz-owner','wz-biz-email'].forEach(function(id){ sv(id,''); });
+      setTags([]);
       document.getElementById('wz-handle').readOnly = false;
-      sel('wz-type', isMcp ? 'Mcp' : 'RestApi'); sel('wz-status','PUBLISHED');
+      /* MCP has no dropdown entry — its type is forced to 'Mcp' on save (wizardIsMcp). */
+      sel('wz-type', 'RestApi'); sel('wz-status','PUBLISHED');
       agentVis = 'Visible';
       document.getElementById('wz-vis-visible').classList.add('active');
       document.getElementById('wz-vis-hidden').classList.remove('active');
@@ -304,10 +433,10 @@
     syncProdRequiredMarker();
 
     /* clear any leftover validation errors */
-    ['wz-name-error','wz-version-error','wz-handle-error','wz-desc-error','wz-prod-error','wz-tech-email-error','wz-biz-email-error'].forEach(function(eid) {
+    ['wz-name-error','wz-version-error','wz-handle-error','wz-desc-error','wz-prod-error','wz-sandbox-error','wz-tech-email-error','wz-biz-email-error'].forEach(function(eid) {
       var el = document.getElementById(eid); if (el) el.style.display = 'none';
     });
-    ['wz-name','wz-version','wz-handle','wz-desc','wz-prod','wz-tech-email','wz-biz-email'].forEach(function(fid) {
+    ['wz-name','wz-version','wz-handle','wz-desc','wz-prod','wz-sandbox','wz-tech-email','wz-biz-email'].forEach(function(fid) {
       var el = document.getElementById(fid); if (el) el.classList.remove('cfg-form-input--error');
     });
 
@@ -363,28 +492,39 @@
     var nextBtn = document.getElementById('cfg-wizard-next');
     backBtn.style.display = step > 0 ? 'inline-flex' : 'none';
     nextBtn.textContent = step === lastStep ? (editingId ? 'Save changes' : 'Save API') : 'Next';
-    nextBtn.disabled = false;
+    syncWizardNext(); /* step-0 stays disabled until Name/Version/Handle are filled */
     nextBtn.title = '';
   }
 
   /* ── save API (create / update) ── */
   async function saveApi() {
+    /* Belt and braces: the tag input commits on blur, which normally fires before the
+       Save click lands. Committing here too means a tag typed but never Entered is
+       saved rather than quietly discarded, whatever order those events arrive in. */
+    commitTagInput();
     var name    = v('wz-name');
     var version = v('wz-version');
     var handle  = v('wz-handle');
     if (!name || !version || !handle) {
-      await showAlert('API name, version, and handle are required.', 'error');
+      await showAlert('Name, version, and handle are required.', 'error');
       return;
     }
 
+    /* Type resolution: MCP is always 'Mcp' (field hidden); when editing a type the
+       dropdown doesn't list (WebSub/SOAP), keep the original; otherwise take the
+       user's dropdown choice. */
+    var resolvedType = wizardIsMcp ? 'Mcp'
+      : (editMode && wizardEditType && !TYPE_DROPDOWN_VALUES[wizardEditType]) ? wizardEditType
+      : document.getElementById('wz-type').value;
+
     var meta = {
       name:        name,
       version:     version,
       handle:      handle,
-      type:        document.getElementById('wz-type').value,
+      type:        resolvedType,
       status:      document.getElementById('wz-status').value,
       description: v('wz-desc'),
-      tags:           v('wz-tags') ? v('wz-tags').split(',').map(function(t){return t.trim();}).filter(Boolean) : [],
+      tags:           getTags(),
       labels:         getSelectedLabels(),
       agentVisibility: agentVis,
       owners: {
@@ -673,12 +813,31 @@
     if (inputEl) { inputEl.classList.toggle('cfg-form-input--error', !!msg); }
   }
 
+  /* Frontend-only URL check for the endpoint fields — a valid http/https URL, or a
+     ws/wss URL when the API is a WebSocket type. */
+  function isValidHttpUrl(s, allowWs) {
+    var u;
+    try { u = new URL(s); } catch (e) { return false; }
+    if (allowWs && (u.protocol === 'ws:' || u.protocol === 'wss:')) return true;
+    return u.protocol === 'http:' || u.protocol === 'https:';
+  }
+
+  /* The type actually being saved, mirroring saveApi's resolvedType: MCP when the
+     field is hidden, the original type when editing a type the dropdown doesn't list,
+     otherwise the dropdown selection. */
+  function selectedApiType() {
+    if (wizardIsMcp) return 'Mcp';
+    if (editMode && wizardEditType && !TYPE_DROPDOWN_VALUES[wizardEditType]) return wizardEditType;
+    var el = document.getElementById('wz-type');
+    return el ? el.value : 'RestApi';
+  }
+
   function validateStep0() {
     var ok = true;
     var emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
     var name = v('wz-name');
-    setFieldError('wz-name', 'wz-name-error', name ? '' : 'API name is required.');
+    setFieldError('wz-name', 'wz-name-error', name ? '' : 'Name is required.');
     if (!name) ok = false;
 
     var version = v('wz-version');
@@ -700,15 +859,31 @@
       setFieldError('wz-handle', 'wz-handle-error', '');
     }
 
+    var allowWs = selectedApiType() === 'WS';
+    var urlErrMsg = allowWs
+      ? 'Enter a valid ws://, wss://, http://, or https:// URL.'
+      : 'Enter a valid http:// or https:// URL.';
+
     var status = document.getElementById('wz-status').value;
     var prodUrl = v('wz-prod');
     if (status === 'PUBLISHED' && !prodUrl) {
       setFieldError('wz-prod', 'wz-prod-error', 'Production URL is required to publish an API.');
       ok = false;
+    } else if (prodUrl && !isValidHttpUrl(prodUrl, allowWs)) {
+      setFieldError('wz-prod', 'wz-prod-error', urlErrMsg);
+      ok = false;
     } else {
       setFieldError('wz-prod', 'wz-prod-error', '');
     }
 
+    var sandboxUrl = v('wz-sandbox');
+    if (sandboxUrl && !isValidHttpUrl(sandboxUrl, allowWs)) {
+      setFieldError('wz-sandbox', 'wz-sandbox-error', urlErrMsg);
+      ok = false;
+    } else {
+      setFieldError('wz-sandbox', 'wz-sandbox-error', '');
+    }
+
     var techEmail = v('wz-tech-email');
     if (techEmail && !emailRe.test(techEmail)) {
       setFieldError('wz-tech-email', 'wz-tech-email-error', 'Invalid email address.');
diff --git a/portals/api-portal/src/scripts/settings-keymanagers.js b/portals/api-portal/src/scripts/settings-keymanagers.js
index 3581fba798..4c3845915a 100644
--- a/portals/api-portal/src/scripts/settings-keymanagers.js
+++ b/portals/api-portal/src/scripts/settings-keymanagers.js
@@ -18,6 +18,11 @@
  
 
 (function () {
+  // Local fallback for the shared bindFormValidity (defined in alert.js, loaded first
+  // on the settings page): keeps save/delete working even if it were ever unavailable,
+  // only skipping the disable-until-valid behaviour instead of throwing at init.
+  var bindFormValidity = window.bindFormValidity || function () { return function () {}; };
+
   var editKmId = null;
 
   function v(id) { var e=document.getElementById(id); return e?e.value.trim():''; }
@@ -43,11 +48,17 @@
     sv('km-display',        mode === 'edit' ? data.displayName    : '');
     sv('km-token-endpoint', mode === 'edit' ? data.tokenEndpoint  : '');
     document.getElementById('km-enabled').checked = mode === 'edit' ? !!data.enabled : true;
+    syncKmSave();
     document.getElementById('cfg-km-modal').style.display = 'flex';
     document.getElementById('km-display').focus();
   }
   function closeKmModal() { document.getElementById('cfg-km-modal').style.display = 'none'; editKmId = null; }
 
+  /* Disable save until Name and Token endpoint are both filled. */
+  var syncKmSave = bindFormValidity(document.getElementById('cfg-km-modal-save'), ['km-display', 'km-token-endpoint'], function() {
+    return v('km-display') !== '' && v('km-token-endpoint') !== '';
+  });
+
   /* ── save ── */
   document.getElementById('cfg-km-modal-save').addEventListener('click', async function() {
     var displayName   = v('km-display');
@@ -72,20 +83,22 @@
       : window.apiPortalApi.root('/key-managers');
     var method = editKmId ? 'PUT' : 'POST';
 
-    try {
-      var res = await fetch(url, {
-        method: method,
-        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-        body: JSON.stringify(body),
-      });
-      if (res.ok) {
-        await showAlert(editKmId ? 'Key manager updated.' : 'Key manager created.', 'success');
-        window.location.reload();
-      } else {
-        var err = await res.json().catch(function(){ return {}; });
-        await showAlert('Failed: ' + (err.error || err.description || err.message || res.statusText), 'error');
-      }
-    } catch(e) { await showAlert('Error: ' + e.message, 'error'); }
+    await withButtonBusy(this, editKmId ? 'Saving…' : 'Adding…', async function() {
+      try {
+        var res = await fetch(url, {
+          method: method,
+          headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+          body: JSON.stringify(body),
+        });
+        if (res.ok) {
+          await showAlert(editKmId ? 'Key manager updated.' : 'Key manager created.', 'success');
+          window.location.reload();
+        } else {
+          var err = await res.json().catch(function(){ return {}; });
+          await showAlert('Failed: ' + (err.error || err.description || err.message || res.statusText), 'error');
+        }
+      } catch(e) { await showAlert('Error: ' + e.message, 'error'); }
+    });
   });
 
   document.getElementById('cfg-km-modal-close').addEventListener('click', closeKmModal);
@@ -116,22 +129,24 @@
     document.getElementById('cfg-delete-km-modal').style.display = 'none';
   });
   document.getElementById('cfg-delete-km-modal').addEventListener('click', function(e){ if(e.target===this) this.style.display='none'; });
-  document.getElementById('cfg-del-km-confirm').addEventListener('click', async function() {
+  document.getElementById('cfg-del-km-confirm').addEventListener('click', function() {
     if (!pendingDelKmId) return;
-    document.getElementById('cfg-delete-km-modal').style.display = 'none';
-    try {
-      var res = await fetch(window.apiPortalApi.root('/key-managers/' + encodeURIComponent(pendingDelKmId)), {
-        method: 'DELETE',
-        headers: { 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-      });
-      if (res.ok || res.status === 204) {
-        await showAlert('Key manager deleted.', 'success');
-        window.location.reload();
-      } else {
+    withButtonBusy(this, 'Deleting…', async function() {
+      try {
+        var res = await fetch(window.apiPortalApi.root('/key-managers/' + encodeURIComponent(pendingDelKmId)), {
+          method: 'DELETE',
+          headers: { 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+        });
+        if (res.ok || res.status === 204) {
+          await showAlert('Key manager deleted.', 'success');
+          window.location.reload();
+          return;
+        }
         var err = await res.json().catch(function(){ return {}; });
         await showAlert('Delete failed: ' + (err.error || err.description || err.message || res.statusText), 'error');
-      }
-    } catch(e) { await showAlert('Error: ' + e.message, 'error'); }
-    pendingDelKmId = null;
+      } catch(e) { await showAlert('Error: ' + e.message, 'error'); }
+      document.getElementById('cfg-delete-km-modal').style.display = 'none';
+      pendingDelKmId = null;
+    });
   });
 }());
diff --git a/portals/api-portal/src/scripts/settings-labels.js b/portals/api-portal/src/scripts/settings-labels.js
index 9cbc063e73..ee56ea38a0 100644
--- a/portals/api-portal/src/scripts/settings-labels.js
+++ b/portals/api-portal/src/scripts/settings-labels.js
@@ -18,6 +18,11 @@
  
 
 (function () {
+  // Local fallback for the shared bindFormValidity (defined in alert.js, loaded first
+  // on the settings page): keeps save/delete working even if it were ever unavailable,
+  // only skipping the disable-until-valid behaviour instead of throwing at init.
+  var bindFormValidity = window.bindFormValidity || function () { return function () {}; };
+
   var _cfg = document.getElementById('cfg-page-config') || { dataset: {} };
   var ORG_ID = _cfg.dataset.orgId || '';
   var editLabelName = null;
@@ -37,6 +42,7 @@
     /* The handle is the label's identity — every API and view mapping keys off
        it, so it cannot change after creation. */
     document.getElementById('lbl-name').readOnly = mode === 'edit';
+    syncLabelSave();
     document.getElementById('cfg-label-modal').style.display = 'flex';
     document.getElementById('lbl-display').focus();
   }
@@ -47,42 +53,51 @@
   document.getElementById('lbl-display').addEventListener('input', function() {
     if (editLabelName || labelHandleTouched) return;
     document.getElementById('lbl-name').value = this.value.toLowerCase().trim().replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'');
+    syncLabelSave();
+  });
+
+  /* Disable save until Name and Handle are both filled. */
+  var syncLabelSave = bindFormValidity(document.getElementById('cfg-label-modal-save'), ['lbl-display', 'lbl-name'], function() {
+    return v('lbl-display') !== '' && v('lbl-name') !== '';
   });
 
   /* ── save label ── */
   document.getElementById('cfg-label-modal-save').addEventListener('click', async function() {
+    var saveBtn     = this;
     var displayName = v('lbl-display');
     var name        = v('lbl-name');
     if (!displayName || !name) { await showAlert('Name and handle are required.', 'error'); return; }
 
-    try {
-      var res;
-      if (editLabelName) {
-        /* Handle is immutable and the input is read-only while editing, so this
-           is always a display-name update. It used to fall back to DELETE + POST
-           when the handle differed — but deleting a label cascades through
-           api_label_mappings / view_label_mappings, so every API and view lost
-           the label and the recreated one came back with no members. */
-        res = await fetch(window.apiPortalApi.root('/labels/'+encodeURIComponent(editLabelName)), {
-          method: 'PUT',
-          headers: { 'Content-Type':'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-          body: JSON.stringify({ id: editLabelName, displayName: displayName }),
-        });
-      } else {
-        res = await fetch(window.apiPortalApi.root('/labels'), {
-          method: 'POST',
-          headers: { 'Content-Type':'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-          body: JSON.stringify({ id: name, displayName: displayName }),
-        });
-      }
-      if (res.ok) {
-        await showAlert(editLabelName ? 'Label updated.' : 'Label created.', 'success');
-        window.location.reload();
-      } else {
-        var err = await res.json().catch(function(){ return {}; });
-        await showAlert('Failed: '+(err.description||err.message||res.statusText), 'error');
-      }
-    } catch(e) { await showAlert('Error: '+e.message, 'error'); }
+    await withButtonBusy(saveBtn, editLabelName ? 'Saving…' : 'Adding…', async function() {
+      try {
+        var res;
+        if (editLabelName) {
+          /* Handle is immutable and the input is read-only while editing, so this
+             is always a display-name update. It used to fall back to DELETE + POST
+             when the handle differed — but deleting a label cascades through
+             api_label_mappings / view_label_mappings, so every API and view lost
+             the label and the recreated one came back with no members. */
+          res = await fetch(window.apiPortalApi.root('/labels/'+encodeURIComponent(editLabelName)), {
+            method: 'PUT',
+            headers: { 'Content-Type':'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+            body: JSON.stringify({ id: editLabelName, displayName: displayName }),
+          });
+        } else {
+          res = await fetch(window.apiPortalApi.root('/labels'), {
+            method: 'POST',
+            headers: { 'Content-Type':'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+            body: JSON.stringify({ id: name, displayName: displayName }),
+          });
+        }
+        if (res.ok) {
+          await showAlert(editLabelName ? 'Label updated.' : 'Label created.', 'success');
+          window.location.reload();
+        } else {
+          var err = await res.json().catch(function(){ return {}; });
+          await showAlert('Failed: '+(err.description||err.message||res.statusText), 'error');
+        }
+      } catch(e) { await showAlert('Error: '+e.message, 'error'); }
+    });
   });
 
   document.getElementById('cfg-label-modal-close').addEventListener('click', closeLabelModal);
@@ -113,22 +128,24 @@
     document.getElementById('cfg-delete-label-modal').style.display = 'none';
   });
   document.getElementById('cfg-delete-label-modal').addEventListener('click', function(e){ if(e.target===this) this.style.display='none'; });
-  document.getElementById('cfg-del-label-confirm').addEventListener('click', async function() {
+  document.getElementById('cfg-del-label-confirm').addEventListener('click', function() {
     if (!pendingDelName) return;
-    document.getElementById('cfg-delete-label-modal').style.display = 'none';
-    try {
-      var res = await fetch(window.apiPortalApi.root('/labels/'+encodeURIComponent(pendingDelName)), {
-        method: 'DELETE',
-        headers: { 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-      });
-      if (res.ok || res.status===204) {
-        await showAlert('Label deleted.', 'success');
-        window.location.reload();
-      } else {
+    withButtonBusy(this, 'Deleting…', async function() {
+      try {
+        var res = await fetch(window.apiPortalApi.root('/labels/'+encodeURIComponent(pendingDelName)), {
+          method: 'DELETE',
+          headers: { 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+        });
+        if (res.ok || res.status===204) {
+          await showAlert('Label deleted.', 'success');
+          window.location.reload();
+          return;
+        }
         var err = await res.json().catch(function(){ return {}; });
         await showAlert('Delete failed: '+(err.description||err.message||res.statusText), 'error');
-      }
-    } catch(e) { await showAlert('Error: '+e.message, 'error'); }
-    pendingDelName = null;
+      } catch(e) { await showAlert('Error: '+e.message, 'error'); }
+      document.getElementById('cfg-delete-label-modal').style.display = 'none';
+      pendingDelName = null;
+    });
   });
 }());
diff --git a/portals/api-portal/src/scripts/settings-organization.js b/portals/api-portal/src/scripts/settings-organization.js
index 382f463219..0528d63f98 100644
--- a/portals/api-portal/src/scripts/settings-organization.js
+++ b/portals/api-portal/src/scripts/settings-organization.js
@@ -18,12 +18,22 @@
  
 
 (function () {
+  // Local fallback for the shared bindFormValidity (defined in alert.js, loaded first
+  // on the settings page): keeps save working even if it were ever unavailable, only
+  // skipping the disable-until-valid behaviour instead of throwing at init.
+  var bindFormValidity = window.bindFormValidity || function () { return function () {}; };
+
   function g(id) { return document.getElementById(id); }
   var saveBtn = g('cfg-save-org-btn');
   if (!saveBtn) return;
 
   var emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
+  /* Disable save while the organization Name is empty. */
+  bindFormValidity(saveBtn, ['org-display'], function () {
+    return g('org-display').value.trim() !== '';
+  });
+
   saveBtn.addEventListener('click', async function () {
     var handle = saveBtn.dataset.handle;
     var name = g('org-display').value.trim();
@@ -52,21 +62,21 @@
     // cp_ref_id unconditionally, so omitting a cleared field would leave the old
     // value in place and make the reference impossible to remove from this form.
     body.cpRefId = g('org-cp-ref').value.trim();
-    saveBtn.disabled = true;
-    try {
-      var res = await fetch(window.apiPortalApi.root('/organizations/' + encodeURIComponent(handle)), {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-        credentials: 'same-origin', body: JSON.stringify(body),
-      });
-      if (res.ok) {
-        await showAlert('Organization updated.', 'success');
-        window.location.reload();
-      } else {
-        var err = await res.json().catch(function () { return {}; });
-        await showAlert('Failed: ' + (err.description || err.message || res.statusText), 'error');
-      }
-    } catch (e) { await showAlert('Error: ' + e.message, 'error'); }
-    finally { saveBtn.disabled = false; }
+    await withButtonBusy(saveBtn, 'Saving…', async function () {
+      try {
+        var res = await fetch(window.apiPortalApi.root('/organizations/' + encodeURIComponent(handle)), {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+          credentials: 'same-origin', body: JSON.stringify(body),
+        });
+        if (res.ok) {
+          await showAlert('Organization updated.', 'success');
+          window.location.reload();
+        } else {
+          var err = await res.json().catch(function () { return {}; });
+          await showAlert('Failed: ' + (err.description || err.message || res.statusText), 'error');
+        }
+      } catch (e) { await showAlert('Error: ' + e.message, 'error'); }
+    });
   });
 }());
diff --git a/portals/api-portal/src/scripts/settings-plans.js b/portals/api-portal/src/scripts/settings-plans.js
index 7ea397a6e6..dc5bc17314 100644
--- a/portals/api-portal/src/scripts/settings-plans.js
+++ b/portals/api-portal/src/scripts/settings-plans.js
@@ -18,6 +18,11 @@
  
 
 (function () {
+  // Local fallback for the shared bindFormValidity (defined in alert.js, loaded first
+  // on the settings page): keeps save/delete working even if it were ever unavailable,
+  // only skipping the disable-until-valid behaviour instead of throwing at init.
+  var bindFormValidity = window.bindFormValidity || function () { return function () {}; };
+
   var editPlanId = null;
 
   var LIMIT_TYPES = ['REQUEST_COUNT','EVENT_COUNT','BANDWIDTH','TOTAL_TOKEN_COUNT'];
@@ -98,11 +103,17 @@
     }
     existing.forEach(function(l){ list.appendChild(makeLimitRow(l)); });
 
+    syncPlanSave();
     document.getElementById('cfg-plan-modal').style.display = 'flex';
     document.getElementById('pol-display').focus();
   }
   function closePlanModal() { document.getElementById('cfg-plan-modal').style.display='none'; editPlanId=null; }
 
+  /* Disable save until the plan Name is filled. */
+  var syncPlanSave = bindFormValidity(document.getElementById('cfg-plan-modal-save'), ['pol-display'], function() {
+    return document.getElementById('pol-display').value.trim() !== '';
+  });
+
   /* ── save ── */
   document.getElementById('cfg-plan-modal-save').addEventListener('click', async function() {
     var displayName = v('pol-display');
@@ -126,21 +137,23 @@
     // existing handle so the update targets the right plan (it is not renamed).
     if (editPlanId) body.id = editPlanId;
 
-    try {
-      var method = editPlanId ? 'PUT' : 'POST';
-      var res = await fetch(window.apiPortalApi.root('/subscription-plans'), {
-        method: method,
-        headers: { 'Content-Type':'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-        body: JSON.stringify(body),
-      });
-      if (res.ok) {
-        await showAlert(editPlanId ? 'Plan updated.' : 'Plan created.', 'success');
-        window.location.reload();
-      } else {
-        var err = await res.json().catch(function(){ return {}; });
-        await showAlert('Failed: '+(err.description||err.message||res.statusText), 'error');
-      }
-    } catch(e) { await showAlert('Error: '+e.message, 'error'); }
+    await withButtonBusy(this, editPlanId ? 'Saving…' : 'Adding…', async function() {
+      try {
+        var method = editPlanId ? 'PUT' : 'POST';
+        var res = await fetch(window.apiPortalApi.root('/subscription-plans'), {
+          method: method,
+          headers: { 'Content-Type':'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+          body: JSON.stringify(body),
+        });
+        if (res.ok) {
+          await showAlert(editPlanId ? 'Plan updated.' : 'Plan created.', 'success');
+          window.location.reload();
+        } else {
+          var err = await res.json().catch(function(){ return {}; });
+          await showAlert('Failed: '+(err.description||err.message||res.statusText), 'error');
+        }
+      } catch(e) { await showAlert('Error: '+e.message, 'error'); }
+    });
   });
 
   document.getElementById('cfg-plan-modal-close').addEventListener('click', closePlanModal);
@@ -176,22 +189,24 @@
     document.getElementById('cfg-delete-plan-modal').style.display = 'none';
   });
   document.getElementById('cfg-delete-plan-modal').addEventListener('click', function(e){ if(e.target===this) this.style.display='none'; });
-  document.getElementById('cfg-del-plan-confirm').addEventListener('click', async function() {
+  document.getElementById('cfg-del-plan-confirm').addEventListener('click', function() {
     if (!pendingDelPlanId) return;
-    document.getElementById('cfg-delete-plan-modal').style.display = 'none';
-    try {
-      var res = await fetch(window.apiPortalApi.root('/subscription-plans/'+encodeURIComponent(pendingDelPlanId)), {
-        method: 'DELETE',
-        headers: { 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-      });
-      if (res.ok || res.status===204) {
-        await showAlert('Plan deleted.', 'success');
-        window.location.reload();
-      } else {
+    withButtonBusy(this, 'Deleting…', async function() {
+      try {
+        var res = await fetch(window.apiPortalApi.root('/subscription-plans/'+encodeURIComponent(pendingDelPlanId)), {
+          method: 'DELETE',
+          headers: { 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+        });
+        if (res.ok || res.status===204) {
+          await showAlert('Plan deleted.', 'success');
+          window.location.reload();
+          return;
+        }
         var err = await res.json().catch(function(){ return {}; });
         await showAlert('Delete failed: '+(err.description||err.message||res.statusText), 'error');
-      }
-    } catch(e) { await showAlert('Error: '+e.message, 'error'); }
-    pendingDelPlanId = null;
+      } catch(e) { await showAlert('Error: '+e.message, 'error'); }
+      document.getElementById('cfg-delete-plan-modal').style.display = 'none';
+      pendingDelPlanId = null;
+    });
   });
 }());
diff --git a/portals/api-portal/src/scripts/settings-views.js b/portals/api-portal/src/scripts/settings-views.js
index 5cce80a24e..a3a142b050 100644
--- a/portals/api-portal/src/scripts/settings-views.js
+++ b/portals/api-portal/src/scripts/settings-views.js
@@ -18,6 +18,12 @@
  
 
 (function () {
+  // bindFormValidity is defined in alert.js, which the settings page loads first.
+  // This local fallback keeps the form fully working (save/delete) even if that helper
+  // were ever unavailable — it only skips the disable-until-valid behaviour, and can't
+  // throw at init time (the one place this runs before event handlers are attached).
+  var bindFormValidity = window.bindFormValidity || function () { return function () {}; };
+
   var views = [];
   try { views = JSON.parse(document.getElementById('cfg-views-data').textContent) || []; } catch (e) { /* ignore */ }
   var editHandle = null;
@@ -63,6 +69,7 @@
     g('view-handle').readOnly = mode === 'edit';
     g('view-display').value   = view ? (view.displayName || '') : '';
     setSelectedLabels(view ? view.labels : []);
+    syncViewSave();
     modal.style.display = 'flex';
     g('view-display').focus();
   }
@@ -80,42 +87,49 @@
   g('view-display').addEventListener('input', function () {
     if (editHandle || handleTouched) return;
     g('view-handle').value = this.value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+    syncViewSave();
+  });
+
+  /* Disable the save button until Name and Handle are both filled. */
+  var syncViewSave = bindFormValidity(g('cfg-view-modal-save'), ['view-display', 'view-handle'], function () {
+    return g('view-display').value.trim() !== '' && g('view-handle').value.trim() !== '';
   });
 
-  g('cfg-view-modal-save').addEventListener('click', async function () {
+  g('cfg-view-modal-save').addEventListener('click', function () {
     var handle  = g('view-handle').value.trim();
     var display = g('view-display').value.trim();
     var labels  = getSelectedLabels();
-    if (!handle) { await showAlert('Handle is required.', 'error'); return; }
+    if (!display) { showAlert('Name is required.', 'error'); return; }
+    if (!handle) { showAlert('Handle is required.', 'error'); return; }
     if (!viewHandleRe.test(handle)) {
-      await showAlert('Handle must be lowercase letters, numbers and hyphens only.', 'error');
+      showAlert('Handle must be lowercase letters, numbers and hyphens only.', 'error');
       return;
     }
-    try {
-      var res;
-      if (editHandle) {
-        res = await fetch(window.apiPortalApi.root('/views/' + encodeURIComponent(editHandle)), {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-          credentials: 'same-origin', body: JSON.stringify({ displayName: display, labels: labels }),
-        });
-      } else {
-        var body = { id: handle, labels: labels };
-        if (display) body.displayName = display;
-        res = await fetch(window.apiPortalApi.root('/views'), {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-          credentials: 'same-origin', body: JSON.stringify(body),
-        });
-      }
-      if (res.ok) {
-        await showAlert(editHandle ? 'View updated.' : 'View created.', 'success');
-        window.location.reload();
-      } else {
-        var err = await res.json().catch(function () { return {}; });
-        await showAlert('Failed: ' + (err.description || err.message || res.statusText), 'error');
-      }
-    } catch (e) { await showAlert('Error: ' + e.message, 'error'); }
+    withButtonBusy(this, editHandle ? 'Saving…' : 'Adding…', async function () {
+      try {
+        var res;
+        if (editHandle) {
+          res = await fetch(window.apiPortalApi.root('/views/' + encodeURIComponent(editHandle)), {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+            credentials: 'same-origin', body: JSON.stringify({ displayName: display, labels: labels }),
+          });
+        } else {
+          res = await fetch(window.apiPortalApi.root('/views'), {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+            credentials: 'same-origin', body: JSON.stringify({ id: handle, displayName: display, labels: labels }),
+          });
+        }
+        if (res.ok) {
+          await showAlert(editHandle ? 'View updated.' : 'View created.', 'success');
+          window.location.reload();
+        } else {
+          var err = await res.json().catch(function () { return {}; });
+          await showAlert('Failed: ' + (err.description || err.message || res.statusText), 'error');
+        }
+      } catch (e) { await showAlert('Error: ' + e.message, 'error'); }
+    });
   });
 
   var pendingDel = null;
@@ -136,17 +150,20 @@
   });
   g('cfg-del-view-cancel').addEventListener('click', function () { g('cfg-delete-view-modal').style.display = 'none'; });
   g('cfg-delete-view-modal').addEventListener('click', function (e) { if (e.target === this) this.style.display = 'none'; });
-  g('cfg-del-view-confirm').addEventListener('click', async function () {
+  g('cfg-del-view-confirm').addEventListener('click', function () {
     if (!pendingDel) return;
-    g('cfg-delete-view-modal').style.display = 'none';
-    try {
-      var res = await fetch(window.apiPortalApi.root('/views/' + encodeURIComponent(pendingDel)), {
-        method: 'DELETE',
-        headers: { 'X-CSRF-Token': window.apiPortalApi.csrfToken() }, credentials: 'same-origin',
-      });
-      if (res.ok || res.status === 204) { await showAlert('View deleted.', 'success'); window.location.reload(); }
-      else { var err = await res.json().catch(function () { return {}; }); await showAlert('Delete failed: ' + (err.description || err.message || res.statusText), 'error'); }
-    } catch (e) { await showAlert('Error: ' + e.message, 'error'); }
-    pendingDel = null;
+    withButtonBusy(this, 'Deleting…', async function () {
+      try {
+        var res = await fetch(window.apiPortalApi.root('/views/' + encodeURIComponent(pendingDel)), {
+          method: 'DELETE',
+          headers: { 'X-CSRF-Token': window.apiPortalApi.csrfToken() }, credentials: 'same-origin',
+        });
+        if (res.ok || res.status === 204) { await showAlert('View deleted.', 'success'); window.location.reload(); return; }
+        var err = await res.json().catch(function () { return {}; });
+        await showAlert('Delete failed: ' + (err.description || err.message || res.statusText), 'error');
+      } catch (e) { await showAlert('Error: ' + e.message, 'error'); }
+      g('cfg-delete-view-modal').style.display = 'none';
+      pendingDel = null;
+    });
   });
 }());
diff --git a/portals/api-portal/src/scripts/settings-webhooks.js b/portals/api-portal/src/scripts/settings-webhooks.js
index f2d7039227..fbf152b926 100644
--- a/portals/api-portal/src/scripts/settings-webhooks.js
+++ b/portals/api-portal/src/scripts/settings-webhooks.js
@@ -18,6 +18,11 @@
  
 
 (function () {
+  // Local fallback for the shared bindFormValidity (defined in alert.js, loaded first
+  // on the settings page): keeps save/delete working even if it were ever unavailable,
+  // only skipping the disable-until-valid behaviour instead of throwing at init.
+  var bindFormValidity = window.bindFormValidity || function () { return function () {}; };
+
   var _cfg = document.getElementById('cfg-page-config') || { dataset: {} };
   var ORG_ID = _cfg.dataset.orgId || '';
   var editWebhookId = null;
@@ -25,7 +30,6 @@
   // field means "keep the stored one", so the mandatory check below only applies when
   // there is nothing stored to keep — on create, or on a legacy row saved without one.
   var editHasSecret = false;
-  var handleTouched = false;
 
   function v(id) { var e=document.getElementById(id); return e?e.value.trim():''; }
 
@@ -114,20 +118,16 @@
   function showWebhookForm(mode, data) {
     editWebhookId = mode === 'edit' ? data.id : null;
     editHasSecret = mode === 'edit' && !!data.hasSecret;
-    handleTouched = false;
     document.getElementById('wh-form-title').textContent = mode === 'edit' ? 'Edit webhook' : 'Add webhook';
     document.getElementById('wh-form-save').textContent  = mode === 'edit' ? 'Save changes' : 'Add webhook';
     document.getElementById('wh-display').value   = mode === 'edit' ? (data.displayName || '') : '';
-    document.getElementById('wh-handle').value    = mode === 'edit' ? (data.id || '') : '';
-    /* The handle is the subscriber's identity and the id in its API path, so it
-       is fixed once created. */
-    document.getElementById('wh-handle').readOnly = mode === 'edit';
     document.getElementById('wh-url').value       = mode === 'edit' ? (data.targetUrl || '')       : '';
     document.getElementById('wh-secret').value    = '';
     document.getElementById('wh-timeout').value   = mode === 'edit' ? (data.timeoutMs || 5000) : 5000;
     document.getElementById('wh-enabled').checked = mode === 'edit' ? !!data.enabled : true;
     document.getElementById('wh-secret-hint').style.display = editHasSecret ? 'block' : 'none';
     setSelectedEvents(mode === 'edit' ? data.events : []);
+    syncWhSave();
     listView.style.display = 'none';
     formView.style.display = 'block';
     // The panel scrolls, so returning from a long list would otherwise open the form
@@ -143,25 +143,19 @@
     editHasSecret = false;
   }
 
-  /* ── auto-slug name → handle (skips once the user edits Handle, or on edit) ── */
-  var whHandleRe = /^[a-z0-9][a-z0-9-]*[a-z0-9]$|^[a-z0-9]$/;
-  document.getElementById('wh-handle').addEventListener('input', function() { handleTouched = true; });
-  document.getElementById('wh-display').addEventListener('input', function() {
-    if (editWebhookId || handleTouched) return;
-    document.getElementById('wh-handle').value =
-      this.value.toLowerCase().trim().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
-  });
+  /* Disable save until Name and Target URL are filled, and (on create, or a legacy row
+     with no stored secret) a Secret is entered — mirrors the submit-time validation. */
+  var syncWhSave = bindFormValidity(document.getElementById('wh-form-save'),
+    ['wh-display', 'wh-url', 'wh-secret'], function() {
+      return v('wh-display') !== '' && v('wh-url') !== '' && (editHasSecret || v('wh-secret') !== '');
+    });
 
   /* ── save ── */
   document.getElementById('wh-form-save').addEventListener('click', async function() {
+    var saveBtn = this;
     var displayName = v('wh-display');
-    var handle      = v('wh-handle');
     var url         = v('wh-url');
-    if (!displayName || !handle || !url) { await showAlert('Name, handle and target URL are required.', 'error'); return; }
-    if (!whHandleRe.test(handle)) {
-      await showAlert('Handle must be lowercase letters, numbers and hyphens only.', 'error');
-      return;
-    }
+    if (!displayName || !url) { await showAlert('Name and target URL are required.', 'error'); return; }
 
     // The secret both signs deliveries and encrypts sensitive event fields, so a
     // subscriber without one silently loses the API key / token payloads entirely.
@@ -199,11 +193,8 @@
       enabled: document.getElementById('wh-enabled').checked,
       timeoutMs: timeoutMs,
     };
-    // `id` only on create — that is the caller-chosen handle, and the server
-    // falls back to a random UUID when it is absent. On update it is omitted
-    // deliberately: the handle is immutable, and the DAO patches sparsely, so
-    // sending one would rename the subscriber on every save.
-    if (!editWebhookId) body.id = handle;
+    // The UI never sends an `id`: on create the server generates a UUID handle,
+    // and on update the handle is immutable, so there is nothing to send.
     var secret = v('wh-secret');
     if (secret) body.secret = secret;
 
@@ -212,20 +203,22 @@
       : window.apiPortalApi.root('/webhook-subscribers');
     var method = editWebhookId ? 'PUT' : 'POST';
 
-    try {
-      var res = await fetch(url2, {
-        method: method,
-        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-        body: JSON.stringify(body),
-      });
-      if (res.ok) {
-        await showAlert(editWebhookId ? 'Webhook updated.' : 'Webhook created.', 'success');
-        window.location.reload();
-      } else {
-        var err = await res.json().catch(function(){ return {}; });
-        await showAlert('Failed: ' + (err.error || err.description || err.message || res.statusText), 'error');
-      }
-    } catch(e) { await showAlert('Error: ' + e.message, 'error'); }
+    await withButtonBusy(saveBtn, editWebhookId ? 'Saving…' : 'Adding…', async function() {
+      try {
+        var res = await fetch(url2, {
+          method: method,
+          headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+          body: JSON.stringify(body),
+        });
+        if (res.ok) {
+          await showAlert(editWebhookId ? 'Webhook updated.' : 'Webhook created.', 'success');
+          window.location.reload();
+        } else {
+          var err = await res.json().catch(function(){ return {}; });
+          await showAlert('Failed: ' + (err.error || err.description || err.message || res.statusText), 'error');
+        }
+      } catch(e) { await showAlert('Error: ' + e.message, 'error'); }
+    });
   });
 
   document.getElementById('wh-form-cancel').addEventListener('click', showWebhookList);
@@ -258,22 +251,24 @@
     document.getElementById('cfg-delete-webhook-modal').style.display = 'none';
   });
   document.getElementById('cfg-delete-webhook-modal').addEventListener('click', function(e){ if(e.target===this) this.style.display='none'; });
-  document.getElementById('cfg-del-webhook-confirm').addEventListener('click', async function() {
+  document.getElementById('cfg-del-webhook-confirm').addEventListener('click', function() {
     if (!pendingDelWebhookId) return;
-    document.getElementById('cfg-delete-webhook-modal').style.display = 'none';
-    try {
-      var res = await fetch(window.apiPortalApi.root('/webhook-subscribers/' + encodeURIComponent(pendingDelWebhookId)), {
-        method: 'DELETE',
-        headers: { 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
-      });
-      if (res.ok || res.status === 204) {
-        await showAlert('Webhook deleted.', 'success');
-        window.location.reload();
-      } else {
+    withButtonBusy(this, 'Deleting…', async function() {
+      try {
+        var res = await fetch(window.apiPortalApi.root('/webhook-subscribers/' + encodeURIComponent(pendingDelWebhookId)), {
+          method: 'DELETE',
+          headers: { 'X-CSRF-Token': window.apiPortalApi.csrfToken() },
+        });
+        if (res.ok || res.status === 204) {
+          await showAlert('Webhook deleted.', 'success');
+          window.location.reload();
+          return;
+        }
         var err = await res.json().catch(function(){ return {}; });
         await showAlert('Delete failed: ' + (err.error || err.description || err.message || res.statusText), 'error');
-      }
-    } catch(e) { await showAlert('Error: ' + e.message, 'error'); }
-    pendingDelWebhookId = null;
+      } catch(e) { await showAlert('Error: ' + e.message, 'error'); }
+      document.getElementById('cfg-delete-webhook-modal').style.display = 'none';
+      pendingDelWebhookId = null;
+    });
   });
 }());
diff --git a/portals/api-portal/src/scripts/warning.js b/portals/api-portal/src/scripts/warning.js
index 904eb20386..b80d833b72 100644
--- a/portals/api-portal/src/scripts/warning.js
+++ b/portals/api-portal/src/scripts/warning.js
@@ -163,7 +163,6 @@ function openWarningModal(param1, param2, param3, param4, param5, param6, param7
 async function deleteApplication() {
     const modal = document.getElementById('warningModal');
     const applicationId = modal.dataset.param2;
-    const messageOverlay = document.getElementById(`message-overlay-${applicationId}`);
     const trashButton = document.getElementById(`trash-btn-${applicationId}`);
 
     try {
@@ -188,52 +187,18 @@ async function deleteApplication() {
                 }
             }
         } else {
-            if (messageOverlay && typeof window.showAppDeleteMessage === 'function') {
-                window.showAppDeleteMessage(messageOverlay, 'Failed to delete application. Please try again.', 'error');
+            if (typeof showAlert === 'function') showAlert('Failed to delete application. Please try again.', 'error');
+            if (trashButton) {
+                trashButton.disabled = false;
+                trashButton.innerHTML = '<i class="bi bi-trash"></i>';
             }
-            trashButton.disabled = false;
-            trashButton.innerHTML = '<i class="bi bi-trash"></i>';
         }
     } catch (error) {
-        if (messageOverlay && typeof window.showAppDeleteMessage === 'function') {
-            window.showAppDeleteMessage(
-                messageOverlay,
-                'An error occurred while deleting the application. Please try again.',
-                'error',
-            );
+        if (typeof showAlert === 'function') showAlert('An error occurred while deleting the application. Please try again.', 'error');
+        if (trashButton) {
+            trashButton.disabled = false;
+            trashButton.innerHTML = '<i class="bi bi-trash"></i>';
         }
-        trashButton.disabled = false;
-        trashButton.innerHTML = '<i class="bi bi-trash"></i>';
     }
 }
 
-window.showAppDeleteMessage = function (overlay, message, type = 'success') {
-    if (overlay) {
-        // Clear any existing auto-hide timers
-        if (overlay.hideTimer) {
-            clearTimeout(overlay.hideTimer);
-            overlay.hideTimer = null;
-        }
-
-        // Set message - keeping it simple and concise
-        const messageText = overlay.querySelector('.message-text');
-        if (messageText) messageText.textContent = message;
-
-        // Set type (success/error)
-        overlay.classList.remove('success', 'error');
-        overlay.classList.add(type);
-
-        // Update icon - ensure proper class structure for alignment
-        const icon = overlay.querySelector('.message-icon');
-        if (icon) {
-            icon.className = 'bi message-icon ' + type;
-            icon.classList.add(type === 'success' ? 'bi-check-circle-fill' : 'bi-exclamation-circle-fill');
-        }
-
-        // Show the overlay (remove hidden class if it exists)
-        overlay.classList.remove('hidden');
-
-        return overlay;
-    }
-    return null;
-};
diff --git a/portals/api-portal/src/styles/alert.css b/portals/api-portal/src/styles/alert.css
index 6ad3dc0c69..085e2d74e4 100644
--- a/portals/api-portal/src/styles/alert.css
+++ b/portals/api-portal/src/styles/alert.css
@@ -9,9 +9,10 @@
     padding: 12px 15px;
     gap: 10px;
     border-radius: 6px;
-    background-color: var(--white);
+    background-color: var(--surface);
     color: var(--text);
     border: 1px solid var(--border);
+    border-left: 4px solid var(--border-strong);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
     z-index: 1090;
     pointer-events: auto;
@@ -30,25 +31,27 @@
     animation: alertFadeOut 0.5s forwards;
 }
 
-.alert-toast.success {
-    background-color: color-mix(in srgb, var(--success) 45%, var(--surface));
-    color: var(--success);
-}
-
-.alert-toast.error {
-    background-color: color-mix(in srgb, var(--danger) 50%, var(--surface));
-    color: #4f0000;
-}
+.alert-toast.success { background-color: var(--success-surface); border-left-color: var(--success); }
+.alert-toast.error   { background-color: var(--danger-surface);  border-left-color: var(--danger); }
+.alert-toast.warning { background-color: var(--warning-surface); border-left-color: var(--warning); }
+.alert-toast.info    { background-color: var(--info-surface);    border-left-color: var(--info); }
 
 .alert-toast .alert-icon {
-    font-size: 0.875rem;
+    font-size: 1rem;
     flex-shrink: 0;
+    color: var(--text-muted);
 }
 
+.alert-toast.success .alert-icon { color: var(--success); }
+.alert-toast.error   .alert-icon { color: var(--danger); }
+.alert-toast.warning .alert-icon { color: var(--warning); }
+.alert-toast.info    .alert-icon { color: var(--info); }
+
 .alert-toast .alert-toast-message {
     margin: 0;
     font-weight: 500;
     font-size: 14px;
+    color: var(--text);
 }
 
 @keyframes alertFadeIn {
diff --git a/portals/api-portal/src/styles/api-workflows.css b/portals/api-portal/src/styles/api-workflows.css
index bf03b45f27..c9c595b924 100644
--- a/portals/api-portal/src/styles/api-workflows.css
+++ b/portals/api-portal/src/styles/api-workflows.css
@@ -342,49 +342,6 @@
     margin: 0;
 }
 
-.notification {
-    position: fixed;
-    bottom: 1.25rem;
-    right: 1.25rem;
-    background: var(--surface);
-    border-radius: 0.5rem;
-    padding: 1rem 1.25rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    z-index: 2000;
-    opacity: 0;
-    transform: translateX(400px);
-    transition: all 0.3s ease;
-}
-
-.notification.show {
-    opacity: 1;
-    transform: translateX(0);
-}
-
-.notification-success {
-    border-left: 4px solid var(--success);
-}
-
-.notification-error {
-    border-left: 4px solid var(--danger);
-}
-
-.notification-content {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    font-size: 0.9rem;
-    font-weight: 500;
-}
-
-.notification-success .notification-content {
-    color: var(--success);
-}
-
-.notification-error .notification-content {
-    color: var(--danger);
-}
-
 /* ===== API Workflow — Detail Page ===== */
 
 .flow-detail-section {
@@ -396,6 +353,15 @@
     width: 100%;
 }
 
+/* Constrain the breadcrumb to the same width as the header card so it left-aligns
+   with it (matching the API overview page). Without this the centered
+   .flow-detail-section shrink-wraps the nav and centers it in the page. */
+.flow-detail-breadcrumb {
+    width: 100%;
+    max-width: 1300px;
+    margin-top: 0.5rem;
+}
+
 .flow-detail-header {
     width: 100%;
     max-width: 1300px;
diff --git a/portals/api-portal/src/styles/settings-layout.css b/portals/api-portal/src/styles/settings-layout.css
index 40030b2fc7..a7ab2e5f48 100644
--- a/portals/api-portal/src/styles/settings-layout.css
+++ b/portals/api-portal/src/styles/settings-layout.css
@@ -79,6 +79,7 @@
 }
 
 .cfg-nav-item i { font-size: 1rem; flex: none; }
+.cfg-nav-item .mcp-glyph { width: 1rem; height: 1rem; }
 
 .cfg-nav-item:hover {
   background: var(--surface-sunken);
@@ -396,18 +397,54 @@
 
 @media (max-width: 900px) {
   .cfg-layout { flex-direction: column; gap: 0; }
+
+  /* The vertical rail becomes a single horizontally-scrollable strip.
+     It used to wrap instead (flex-wrap on both .cfg-nav and .cfg-nav-items), which
+     at phone widths produced a ragged grid — each group wrapped independently, so
+     rows held one or two items depending on label length ("Organization | Views",
+     then three full-width rows, then "APIs | MCP Servers") — and cost ~490px of
+     height before any content appeared. One non-wrapping row is ~50px and keeps
+     every item reachable by swiping. */
   .cfg-nav {
     width: 100%;
+    max-width: 100%;
+    min-width: 0;
     display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-bottom: 20px;
-    /* Stacked layout: the divider becomes .cfg-content's border-top below. */
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: 0;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;               /* swiped, not dragged — Firefox */
+    margin-bottom: 16px;
     padding-right: 0;
+    padding-bottom: 4px;
+    /* Stacked layout: the divider becomes .cfg-content's border-top below. */
     border-right: none;
   }
+  .cfg-nav::-webkit-scrollbar { display: none; }
+
+  /* Headings can't sit inline in a single row, so grouping is carried by a rule
+     between adjacent groups instead of being lost entirely. The `.cfg-nav-items ~`
+     prefix skips the first group, which needs no leading divider. */
   .cfg-nav-section { display: none; }
-  .cfg-nav-items { flex-direction: row; flex-wrap: wrap; margin-bottom: 0; }
+  .cfg-nav-items {
+    flex-direction: row;
+    flex-wrap: nowrap;
+    flex: none;
+    gap: 4px;
+    margin-bottom: 0;
+  }
+  .cfg-nav-items ~ .cfg-nav-section + .cfg-nav-items {
+    margin-left: 8px;
+    padding-left: 8px;
+    border-left: 1px solid var(--border);
+  }
+  /* Without this the items shrink to fit rather than overflowing, which is what
+     makes the strip scroll instead of squashing the labels. */
+  .cfg-nav-item { flex: none; }
+
   .cfg-content { border-top: 1px solid var(--border); padding-top: 20px; }
 }
 
@@ -1086,6 +1123,7 @@
 
 .cfg-api-avatar--mcp    { background: #e0f5f2; color: #0d9488; }
 .cfg-api-avatar--websub { background: var(--success-surface); color: var(--success); }
+.cfg-api-avatar--workflow { background: #ede9fe; color: #6d28d9; }
 .cfg-type-badge--mcp    { background: #e0f5f2; color: #0d9488; }
 .cfg-type-badge--websub { background: var(--success-surface); color: var(--success); }
 
@@ -1442,18 +1480,34 @@
   white-space: nowrap;
 }
 
+/* Sized as a real hit target rather than a decorative glyph: at 0.75rem with only
+   1px of padding this was ~14x13px, which is both hard to see against the chip's
+   tinted background and fiddly to click. Shared with the subscription-plan chips,
+   so both pickers get the same affordance. */
 .cfg-chip-remove {
   background: none;
   border: none;
   cursor: pointer;
-  color: var(--text-muted);
-  padding: 0 1px;
+  color: var(--primary);
+  opacity: 0.65;
+  padding: 0;
+  margin-left: 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
   line-height: 1;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   display: flex;
   align-items: center;
+  justify-content: center;
+  transition: background-color .12s, color .12s, opacity .12s;
+}
+.cfg-chip-remove:hover,
+.cfg-chip-remove:focus-visible {
+  color: var(--danger);
+  opacity: 1;
+  background: color-mix(in srgb, var(--danger) 14%, transparent);
 }
-.cfg-chip-remove:hover { color: var(--danger); }
 
 .cfg-chip-text-input {
   flex: 1;
diff --git a/portals/api-portal/src/utils/util.js b/portals/api-portal/src/utils/util.js
index 1bb416e3dd..6c66af4bd1 100644
--- a/portals/api-portal/src/utils/util.js
+++ b/portals/api-portal/src/utils/util.js
@@ -129,6 +129,28 @@ function artifactFlags() {
     };
 }
 
+/**
+ * Whether the portal's AI features (AI Ready chips, "Try with AI"/"Discover with AI"
+ * prompts) should render for this org+view. Backed by the LLM Instructions config's
+ * `aiEnabled` toggle — the actual AI switch. These used to be gated on
+ * showApiWorkflowsNav (`artifactTypeEnabled('api-workflows')`), which meant turning
+ * off the API Workflows artifact type also silently removed every AI affordance.
+ *
+ * Fails open (AI shown) if the lookup errors: the toggle is a presentation choice,
+ * so a transient read failure must not blank the page's primary actions.
+ */
+async function resolveAiEnabled(orgId, viewName) {
+    if (!orgId || !viewName) return true; // design mode / no view context — nothing to opt out of
+    try {
+        return !(await isAiDisabledForPortal(orgId, viewName));
+    } catch (err) {
+        logger.warn('Could not resolve AI enablement; defaulting to enabled', {
+            orgId, viewName, error: err.message
+        });
+        return true;
+    }
+}
+
 function renderTemplate(templatePath, layoutPath, templateContent, isTechnical) {
 
     let completeTemplatePath;
@@ -147,7 +169,9 @@ function renderTemplate(templatePath, layoutPath, templateContent, isTechnical)
 
     const slots = {};
     const flags = artifactFlags();
-    const enrichedContent = { ...flags, ...templateContent, slots };
+    // Design mode renders from disk with no organization, so there is no per-view
+    // llms-config to consult — show the AI affordances so designers can style them.
+    const enrichedContent = { ...flags, aiEnabled: true, ...templateContent, slots };
     return layout({
         ...enrichedContent,
         body: template(enrichedContent),
@@ -190,7 +214,8 @@ async function renderTemplateWithView(templatePath, layoutPath, templateContent,
 
     const slots = {};
     const flags = artifactFlags();
-    const enrichedContent = { ...flags, ...templateContent, slots };
+    const aiEnabled = await resolveAiEnabled(orgId, viewName);
+    const enrichedContent = { ...flags, ...templateContent, aiEnabled, slots };
     return layout({
         ...enrichedContent,
         body: template(enrichedContent),
@@ -245,7 +270,8 @@ async function renderTemplateFromAPI(templateContent, orgId, orgName, filePath,
 
     const slots = {};
     const flags = artifactFlags();
-    const enrichedContent = { ...flags, ...templateContent, slots };
+    const aiEnabled = await resolveAiEnabled(orgId, viewName);
+    const enrichedContent = { ...flags, ...templateContent, aiEnabled, slots };
     return layout({
         ...enrichedContent,
         body: template(enrichedContent),
@@ -311,7 +337,11 @@ async function renderGivenTemplate(templatePage, layoutPage, templateContent) {
     const layout = Handlebars.compile(layoutPage.toString());
     const slots = {};
     const flags = artifactFlags();
-    const enrichedContent = { ...flags, ...templateContent, slots };
+    // No org/view is threaded through here (applications, settings, api-workflows), so
+    // the per-view AI toggle can't be resolved. Default to enabled rather than leaving
+    // it undefined, which would silently hide AI affordances on those pages — none of
+    // them gate on it today, and a falsy default would make that a trap later.
+    const enrichedContent = { ...flags, aiEnabled: true, ...templateContent, slots };
     return layout({
         ...enrichedContent,
         body: template(enrichedContent),
@@ -1397,6 +1427,7 @@ module.exports = {
     requireArtifactType,
     requireArtifactTypeFromPath,
     isAiDisabledForPortal,
+    resolveAiEnabled,
     isImageFile,
     normalizeStringArray,
     resolveApiType,
diff --git a/tests/integration-e2e/docker-compose.yaml b/tests/integration-e2e/docker-compose.yaml
index e6376e2cdd..2f0b47e46c 100644
--- a/tests/integration-e2e/docker-compose.yaml
+++ b/tests/integration-e2e/docker-compose.yaml
@@ -253,6 +253,10 @@ services:
         condition: service_healthy
       platform-api:
         condition: service_started
+      # cert.pem must exist in the certs volume before the subpath mount below and
+      # before Node reads NODE_EXTRA_CA_CERTS at startup.
+      platform-api-certgen:
+        condition: service_completed_successfully
       platform-api-jwtkeygen:
         condition: service_completed_successfully
     volumes:
@@ -272,6 +276,16 @@ services:
         read_only: true
         volume:
           subpath: jwt_public.pem
+      # platform-api's self-signed TLS cert, trusted via NODE_EXTRA_CA_CERTS below so
+      # both the auth client and the webhook delivery worker verify it instead of
+      # skipping verification. Subpath mount exposes only the public cert.pem, never
+      # the private key.pem — same pattern as jwt_public.pem above.
+      - type: volume
+        source: platform-api-certs
+        target: /etc/api-portal/certs/cert.pem
+        read_only: true
+        volume:
+          subpath: cert.pem
     environment:
       # Its own database on the shared postgres server (created by init-db.sql).
       # Postgres, not the devportal's default SQLite: the org-update path needs
@@ -292,14 +306,17 @@ services:
       # platform-api signs its tokens with RS256; the devportal verifies them
       # against jwt_public.pem from the shared keypair volume mounted above
       # (auth.local.public_key_path in devportal-config.toml). There is no shared
-      # HMAC secret. tls_skip_verify covers platform-api's self-signed cert.
+      # HMAC secret.
       - APIP_AP_AUTH_LOCAL_PLATFORM_API_URL=https://platform-api:9243
-      - APIP_AP_AUTH_LOCAL_TLS_SKIP_VERIFY=true
-      # The webhook delivery worker POSTs over raw https with the default agent,
-      # and platform-api serves a self-signed cert here. auth.local.tls_skip_verify
-      # only covers the auth client, so disable TLS verification globally for this
-      # throwaway test container to let signed webhook deliveries through.
-      - NODE_TLS_REJECT_UNAUTHORIZED=0
+      # Trust platform-api's self-signed cert at Node's trust-store level rather than
+      # disabling TLS verification. This *appends* to Node's built-in CAs and applies
+      # process-wide, so it covers BOTH the auth login client AND the webhook delivery
+      # worker (which POSTs over Node's default TLS and has no tls_skip_verify hatch,
+      # the reason this used to set NODE_TLS_REJECT_UNAUTHORIZED=0). Verified TLS —
+      # not a global bypass — even in the throwaway test container. The cert's SAN
+      # includes DNS:platform-api, matching the https://platform-api:9243 host used
+      # for both the auth call and the control-plane webhook subscriber.
+      - NODE_EXTRA_CA_CERTS=/etc/api-portal/certs/cert.pem
       # Stable AES-256-GCM key (64 hex) for encrypting the webhook subscriber
       # secret at rest; must not change across restarts or the stored secret
       # becomes undecryptable and outbound requests go unsigned.