ux(mcp): confirm revoke + warn about active AI clients

Tonight's debugging session opened with you revoking my Claude Code
key and then us spending 30 minutes diagnosing why my MCP tools were
returning 401.  The server-side revoke worked instantly (correct
behavior — bearer is validated per request), but my Claude Code
session kept sending the now-stale bearer because nothing told it
the key was gone.  By the time we figured it out, my session had to
restart anyway.

Two-line UX win to prevent the same surprise next time anyone clicks
Revoke:

1. Confirmation dialog spells out exactly what's about to happen:
   AI clients keep their connection process alive but every tool call
   returns 401 until you restart them with a new key.  Operator
   acknowledges before the API call goes through.

2. Toast message after revoke is now action-oriented:
   "Key 'foo' revoked. Restart any AI client that was using it."
   instead of just "API key revoked".

Also passes the full key object (not just the id) to handleRevoke so
the dialog and the toast can reference the key name.

The deeper fix — actively closing live HTTP connections using a
revoked key — would require dropping FastMCP's `stateless_http=True`
mode and tracking sessions in memory keyed by hash.  Bigger change;
not justified for this UX issue alone.  This commit covers the
operator-facing gap.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Sbussiso

frontend/src/pages/McpPage.jsx

@@ -352,13 +352,40 @@ function McpPage() {
     }
   }
 
-  const handleRevoke = async (keyId) => {
-    setRevoking(keyId)
+  const handleRevoke = async (key) => {
+    // Confirmation + active-client warning.  The MCP server validates
+    // the bearer on every tool call, so revocation takes effect
+    // immediately server-side — but a connected AI client (Claude
+    // Desktop, Cursor, mcp-remote stdio bridges, etc.) keeps sending
+    // the now-stale bearer on every subsequent tool call.  Their
+    // process stays "running" in their MCP panel; only the tool calls
+    // fail with 401, and the user often doesn't notice until they
+    // try to use the AI again.
+    //
+    // We can't push a "you've been deauth'd" notification to live
+    // connections without moving off the FastMCP stateless-HTTP mode,
+    // so the practical answer is to make sure the operator clicking
+    // Revoke knows they need to restart the AI clients themselves.
+    const confirmed = window.confirm(
+      `Revoke API key "${key.name}"?\n\n` +
+      `Any AI client currently using this key (Claude Desktop, Cursor, etc.) ` +
+      `will start receiving 401 errors on every tool call. The clients will ` +
+      `appear "running" in their MCP panel but won't actually work — you'll ` +
+      `need to quit and restart each one with a new key.\n\n` +
+      `Once revoked, this key cannot be reactivated. Generate a new key if ` +
+      `you still need MCP access.`
+    )
+    if (!confirmed) return
+
+    setRevoking(key.id)
     try {
       const token = await getToken()
-      await revokeMcpKey(() => Promise.resolve(token), keyId)
+      await revokeMcpKey(() => Promise.resolve(token), key.id)
       await loadKeys()
-      showToast("API key revoked", "success")
+      showToast(
+        `Key "${key.name}" revoked. Restart any AI client that was using it.`,
+        "success",
+      )
     } catch (err) {
       showToast(err.message || "Failed to revoke key", "error")
     } finally {
@@ -890,7 +917,12 @@ function McpPage() {
                             {k.last_used_at && <> — Last used {new Date(k.last_used_at).toLocaleDateString()}</>}
                           </span>
                         </div>
-                        <button className="btn btn-small btn-danger" onClick={() => handleRevoke(k.id)} disabled={revoking === k.id}>
+                        <button
+                          className="btn btn-small btn-danger"
+                          onClick={() => handleRevoke(k)}
+                          disabled={revoking === k.id}
+                          title="Revoke this key (you'll need to restart any AI client using it)"
+                        >
                           {revoking === k.id ? "Revoking..." : "Revoke"}
                         </button>
                       </div>