@agent-native/core 0.19.0 → 0.19.3

package/dist/mcp/connect-route.js

@@ -28,11 +28,11 @@
  */
 import { getMethod, getHeader } from "h3";
 import { readBody } from "../server/h3-helpers.js";
-import { getSession, getConfiguredLoginHtml } from "../server/auth.js";
+import { getSession, getConfiguredLoginHtml, isLoopbackRequest, } from "../server/auth.js";
 import { signA2AToken } from "../a2a/client.js";
 import { getOrgDomain } from "../org/context.js";
 import { randomUUID } from "node:crypto";
-import { recordMintedToken, listTokens, revokeToken, createDeviceCode, getDeviceCode, approveDeviceCode, claimDeviceCodeForMint, finishDeviceCodeMint, releaseDeviceCodeMint, expireDeviceCode, MCP_CONNECT_SCOPE, DEFAULT_TOKEN_TTL_DAYS, MIN_TOKEN_TTL_DAYS, MAX_TOKEN_TTL_DAYS, DEVICE_CODE_TTL_MS, } from "./connect-store.js";
+import { recordMintedToken, listTokens, revokeToken, createDeviceCode, getDeviceCode, approveDeviceCode, consumeDeviceCode, claimDeviceCodeForMint, finishDeviceCodeMint, releaseDeviceCodeMint, expireDeviceCode, MCP_CONNECT_SCOPE, DEFAULT_TOKEN_TTL_DAYS, MIN_TOKEN_TTL_DAYS, MAX_TOKEN_TTL_DAYS, DEVICE_CODE_TTL_MS, } from "./connect-store.js";
 /** Device-flow poll interval hint (seconds). */
 const DEVICE_POLL_INTERVAL_S = 3;
 // Human-typable user code: 8 base32 chars, dashed XXXX-XXXX.
@@ -89,6 +89,17 @@ function appLabel(origin, options) {
 function serverName(origin, options) {
     return `agent-native-${appLabel(origin, options)}`;
 }
+function canUseDevOpenConnect(event) {
+    // Loopback determined from the real socket peer (isLoopbackRequest →
+    // getRequestIP without xForwardedFor), NOT a parsed `Host` header — the
+    // header is client-controlled, and it also handles IPv6 `::1`. A
+    // misconfigured public deploy with no secret thus can't unlock dev-open
+    // by spoofing `Host: localhost`.
+    return (isLoopbackRequest(event) &&
+        !process.env.A2A_SECRET?.trim() &&
+        !process.env.ACCESS_TOKEN?.trim() &&
+        !process.env.ACCESS_TOKENS?.trim());
+}
 function escapeHtml(s) {
     return s
         .replace(/&/g, "&")
@@ -142,17 +153,23 @@ async function mintConnectToken(params) {
     });
     return { token, jti };
 }
-function mcpResultPayload(appUrl, token, options) {
+function mcpResultPayload(appUrl, options, auth) {
     const mcpUrl = `${appUrl}/_agent-native/mcp`;
     const name = serverName(appUrl, options);
+    const headers = {};
+    if (auth.token)
+        headers.Authorization = `Bearer ${auth.token}`;
+    if (!auth.token && auth.ownerEmail) {
+        headers["X-Agent-Native-Owner-Email"] = auth.ownerEmail;
+    }
     return {
-        token,
+        token: auth.token ?? "",
         mcpUrl,
         serverName: name,
         mcpServerEntry: {
             type: "http",
             url: mcpUrl,
-            headers: { Authorization: `Bearer ${token}` },
+            ...(Object.keys(headers).length ? { headers } : {}),
         },
         cli: `agent-native connect ${appUrl}`,
     };
@@ -160,11 +177,25 @@ function mcpResultPayload(appUrl, token, options) {
 // ---------------------------------------------------------------------------
 // Connect page (server-rendered HTML string)
 // ---------------------------------------------------------------------------
+function agentNativeMarkSvg(className, gradientId) {
+    return `<svg class="${className}" width="114" height="66" viewBox="0 0 114 66" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <path d="M24.5537 65.7695H0L15.0859 39.4619L37.708 0L60.4912 39.4619H39.6396L24.5537 65.7695Z" fill="white"/>
+  <path d="M89.446 0H114L76.2921 65.7704H51.7383L89.446 0Z" fill="url(#${gradientId})"/>
+  <defs>
+    <linearGradient id="${gradientId}" x1="101.702" y1="67.4791" x2="113.672" y2="-37.4275" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#00B5FF"/>
+      <stop offset="1" stop-color="#48FFE4"/>
+    </linearGradient>
+  </defs>
+</svg>`;
+}
 function renderConnectPage(params) {
     const { origin, connectBasePath, email, appName, userCode } = params;
     const safeOrigin = escapeHtml(origin);
     const safeEmail = escapeHtml(email);
     const safeApp = escapeHtml(appName);
+    const brandMarkSvg = agentNativeMarkSvg("brand-mark", "agent-native-connect-brand-gradient");
+    const flowMarkSvg = agentNativeMarkSvg("flow-mark", "agent-native-connect-flow-gradient");
     const safeUserCode = userCode && USER_CODE_RE.test(userCode) ? escapeHtml(userCode) : "";
     return `<!DOCTYPE html>
 <html lang="en">
@@ -176,119 +207,315 @@ function renderConnectPage(params) {
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   :root {
     color-scheme: dark;
-    --bg: #09090b; --panel: #141417; --border: rgba(255,255,255,0.1);
-    --text: #f4f4f5; --muted: #a1a1aa; --subtle: #71717a;
+    --bg: #09090b; --panel: #121214; --panel-2: #0c0c0e;
+    --panel-soft: rgba(255,255,255,0.025);
+    --border: rgba(255,255,255,0.075); --border-strong: rgba(255,255,255,0.14);
+    --text: #f7f7f8; --muted: #a1a1aa; --subtle: #74747d;
     --accent: #f4f4f5; --accent-fg: #09090b;
+    --ring: rgba(250,250,250,0.55);
     --error: #fca5a5; --error-bg: rgba(127,29,29,0.18);
-    --ok: #86efac; --ok-bg: rgba(20,83,45,0.2);
+    --ok: #86efac; --ok-bg: rgba(20,83,45,0.12); --ok-border: rgba(134,239,172,0.18);
   }
+  html, body { -webkit-font-smoothing: antialiased; }
   body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-    background: linear-gradient(180deg, #111114 0%, var(--bg) 58%);
+    background: linear-gradient(180deg, #101013 0%, var(--bg) 58%);
     color: var(--text); display: flex; align-items: center;
-    justify-content: center; min-height: 100vh; padding: 1rem;
+    justify-content: center; min-height: 100vh; padding: 1.5rem 1rem;
   }
   .card {
-    width: 100%; max-width: 520px; padding: 2rem;
+    width: 100%; max-width: 440px;
     background: var(--panel); border: 1px solid var(--border);
-    border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,0.35);
-  }
-  h1 { font-size: 1.35rem; font-weight: 650; margin-bottom: 0.35rem; }
-  .sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.25rem; }
-  .row { color: var(--subtle); font-size: 0.8rem; margin-bottom: 1.25rem; }
-  .code-callout {
-    border: 1px solid var(--border); border-radius: 8px; padding: 0.85rem 1rem;
-    margin-bottom: 1.25rem; background: rgba(255,255,255,0.03);
-  }
-  .code-callout .label { font-size: 0.72rem; color: var(--subtle);
-    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; }
-  .code-callout .value { font-size: 1.5rem; font-weight: 700;
+    border-radius: 8px; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
+      0 30px 90px rgba(0,0,0,0.5);
+    padding: 1.25rem;
+  }
+  .topbar {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 0.75rem; margin-bottom: 1.75rem;
+  }
+  .brand-lockup {
+    display: flex; align-items: center; gap: 0.55rem;
+    color: var(--muted); font-size: 0.78rem; font-weight: 600;
+  }
+  .brand-mark { width: 18px; height: auto; display: block; }
+  .app-pill {
+    max-width: 50%; border: 1px solid var(--border);
+    border-radius: 999px; padding: 0.28rem 0.55rem;
+    color: var(--subtle); font-size: 0.72rem; line-height: 1;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .hero { padding: 0 0.75rem; text-align: center; }
+  .flow {
+    display: flex; align-items: center; justify-content: center;
+    gap: 0; margin: 0 auto 1.1rem; width: fit-content;
+  }
+  .flow .tile {
+    width: 42px; height: 42px; border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    background: var(--panel-2); border: 1px solid var(--border-strong);
+    color: var(--text); flex-shrink: 0;
+  }
+  .flow-mark { width: 26px; height: auto; display: block; }
+  .flow .agent-symbol {
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-    letter-spacing: 0.08em; }
+    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.04em;
+  }
+  .flow .conn {
+    width: 30px; height: 1px; flex-shrink: 0;
+    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
+    background-position: center;
+  }
+  .eyebrow {
+    text-align: center; font-size: 0.72rem; font-weight: 600;
+    letter-spacing: 0.08em; text-transform: uppercase;
+    color: var(--subtle); margin-bottom: 0.55rem;
+  }
+  h1 {
+    text-align: center; font-size: 1.45rem; font-weight: 680;
+    line-height: 1.25; margin-bottom: 0.55rem;
+    letter-spacing: -0.01em;
+  }
+  .sub {
+    text-align: center; color: var(--muted); font-size: 0.9rem;
+    line-height: 1.5; margin: 0 auto 0.9rem; max-width: 36ch;
+  }
+  .identity {
+    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
+    gap: 0.25rem 0.45rem; color: var(--subtle); font-size: 0.78rem;
+    line-height: 1.35; margin: 0 auto 1.4rem; max-width: 34ch;
+  }
+  .identity strong { color: var(--muted); font-weight: 600; }
+  .identity .origin { overflow-wrap: anywhere; }
+  .device-strip {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 0.75rem; border: 1px solid var(--border);
+    border-radius: 8px; padding: 0.55rem 0.65rem; margin: 0 0 0.9rem;
+    background: var(--panel-soft); color: var(--muted);
+  }
+  .device-strip .label {
+    font-size: 0.76rem; font-weight: 560; color: var(--subtle);
+  }
+  .device-strip .value {
+    font-size: 0.9rem; font-weight: 700;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    letter-spacing: 0.08em; color: var(--text);
+  }
   button {
     cursor: pointer; font: inherit; font-weight: 600; border: none;
-    border-radius: 8px; padding: 0.7rem 1.1rem;
+    border-radius: 8px; padding: 0.78rem 1rem;
+  }
+  button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+  .primary {
+    background: var(--accent); color: var(--accent-fg); width: 100%;
+    font-size: 0.95rem;
   }
-  .primary { background: var(--accent); color: var(--accent-fg); width: 100%; }
-  .primary:disabled { opacity: 0.6; cursor: default; }
+  .primary:hover:not(:disabled) { background: #e4e4e7; }
+  .primary:disabled { opacity: 0.55; cursor: default; }
   .ghost {
     background: transparent; color: var(--muted);
-    border: 1px solid var(--border); padding: 0.35rem 0.7rem;
-    font-size: 0.78rem; font-weight: 500;
+    border: 1px solid var(--border-strong); padding: 0.35rem 0.7rem;
+    font-size: 0.78rem; font-weight: 500; border-radius: 8px;
   }
+  .ghost:hover:not(:disabled) { color: var(--text); border-color: var(--subtle); }
   pre {
-    background: #0c0c0e; border: 1px solid var(--border); border-radius: 8px;
+    background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
     padding: 0.9rem; font-size: 0.78rem; line-height: 1.5; overflow-x: auto;
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
     color: #d4d4d8; margin: 0.5rem 0 1rem;
   }
-  .field { margin-bottom: 1rem; }
-  .field label { display: block; font-size: 0.8rem; color: var(--muted);
+  /* Advanced disclosure */
+  .advanced { margin: 0 0 1rem; }
+  .advanced > summary {
+    list-style: none; cursor: pointer; user-select: none;
+    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
+    color: var(--subtle); font-size: 0.8rem; font-weight: 500;
+    padding: 0.5rem 0; text-align: center;
+  }
+  .advanced > summary::-webkit-details-marker { display: none; }
+  .advanced > summary:hover { color: var(--muted); }
+  .advanced > summary:focus-visible { outline: 2px solid var(--ring);
+    outline-offset: 2px; border-radius: 6px; }
+  .advanced > summary .chev {
+    width: 7px; height: 7px; border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
+    transition: transform 0.15s ease; margin-top: -3px;
+  }
+  .advanced[open] > summary .chev { transform: rotate(225deg); margin-top: 2px; }
+  .advanced-body {
+    padding: 0.85rem 0.1rem 0.25rem;
+  }
+  .field { margin-bottom: 0.9rem; }
+  .field:last-child { margin-bottom: 0; }
+  .field label { display: block; font-size: 0.78rem; color: var(--muted);
     margin-bottom: 0.35rem; }
   .field input {
-    width: 100%; padding: 0.55rem 0.7rem; font: inherit; color: var(--text);
-    background: #0c0c0e; border: 1px solid var(--border); border-radius: 6px;
-  }
-  .inline { display: flex; gap: 0.5rem; }
-  .inline input { flex: 1; }
-  .tokens { margin-top: 1.75rem; border-top: 1px solid var(--border);
-    padding-top: 1.25rem; }
-  .tokens h2 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.75rem; }
+    width: 100%; padding: 0.6rem 0.7rem; font: inherit; color: var(--text);
+    background: var(--panel-2); border: 1px solid var(--border-strong);
+    border-radius: 8px;
+  }
+  .field input:focus-visible {
+    outline: none; border-color: var(--ring);
+    box-shadow: 0 0 0 3px rgba(250,250,250,0.12);
+  }
+  .connections {
+    margin-top: 1.1rem; border-top: 1px solid var(--border);
+    padding-top: 0.35rem;
+  }
+  .connections > summary {
+    list-style: none; cursor: pointer; user-select: none;
+    display: flex; align-items: center; gap: 0.55rem;
+    min-height: 2.2rem; color: var(--muted); font-size: 0.82rem;
+  }
+  .connections > summary::-webkit-details-marker { display: none; }
+  .connections > summary:focus-visible {
+    outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px;
+  }
+  .connections-title { font-weight: 600; color: var(--muted); }
+  .connections-state {
+    margin-left: auto; color: var(--subtle); font-size: 0.73rem;
+    border: 1px solid var(--border); border-radius: 999px;
+    padding: 0.18rem 0.45rem; line-height: 1;
+  }
+  .connections .chev {
+    width: 7px; height: 7px; border-right: 1.5px solid currentColor;
+    border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
+    transition: transform 0.15s ease; margin: -3px 0 0 0.15rem;
+  }
+  .connections[open] .chev { transform: rotate(225deg); margin-top: 2px; }
+  .token-list { padding-top: 0.4rem; }
   .tok { display: flex; align-items: center; justify-content: space-between;
-    gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border);
+    gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border);
     font-size: 0.83rem; }
   .tok:last-child { border-bottom: none; }
-  .tok .meta { color: var(--subtle); font-size: 0.74rem; }
+  .tok .meta { color: var(--subtle); font-size: 0.74rem; margin-top: 0.1rem; }
   .tok.revoked { opacity: 0.45; }
-  .msg { font-size: 0.83rem; padding: 0.6rem 0.8rem; border-radius: 6px;
-    margin-bottom: 1rem; display: none; }
-  .msg.err { display: block; color: var(--error); background: var(--error-bg); }
-  .msg.ok { display: block; color: var(--ok); background: var(--ok-bg); }
+  .empty-state {
+    color: var(--subtle); font-size: 0.78rem; line-height: 1.45;
+    padding: 0.3rem 0 0.45rem;
+  }
+  .msg { font-size: 0.83rem; padding: 0.7rem 0.8rem; border-radius: 8px;
+    margin-bottom: 0.9rem; display: none; line-height: 1.4; }
+  .msg.err { display: block; color: var(--error); background: var(--error-bg);
+    border: 1px solid rgba(252,165,165,0.16); }
+  .msg.ok { display: block; color: var(--ok); background: var(--ok-bg);
+    border: 1px solid var(--ok-border); }
+  .result-panel { padding-top: 0.15rem; }
+  .result-title {
+    color: var(--text); font-size: 0.95rem; font-weight: 650;
+    text-align: center; margin-bottom: 0.35rem;
+  }
+  .result-copy {
+    color: var(--muted); font-size: 0.83rem; line-height: 1.45;
+    text-align: center; margin: 0 auto 0.85rem; max-width: 34ch;
+  }
+  .section-label {
+    color: var(--subtle); font-size: 0.7rem; font-weight: 650;
+    letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.85rem;
+  }
+  @media (max-width: 480px) {
+    body { align-items: flex-start; padding: 0.75rem; }
+    .card { padding: 1rem; }
+    .hero { padding: 0; }
+    .topbar { margin-bottom: 1.35rem; }
+    h1 { font-size: 1.3rem; }
+    .app-pill { max-width: 46%; }
+    pre { font-size: 0.72rem; }
+  }
   .hidden { display: none !important; }
 </style>
 </head>
 <body>
 <div class="card">
-  <h1>Connect an external agent</h1>
-  <div class="sub">Mint a personal token for <strong>${safeApp}</strong> so a coding agent (Claude Code, Codex, Cowork) can act as you.</div>
-  <div class="row">Signed in as ${safeEmail} &middot; ${safeOrigin}</div>
+  <div class="topbar">
+    <div class="brand-lockup">
+      ${brandMarkSvg}
+      <span>Agent Native</span>
+    </div>
+    <div class="app-pill" title="${safeApp}">${safeApp}</div>
+  </div>
+
+  <div class="hero">
+    <!-- "Connect an external agent" is kept as the accessible consent label. -->
+    <div class="flow" role="img" aria-label="Connect an external agent to ${safeApp}">
+      <span class="tile" aria-hidden="true">
+        ${flowMarkSvg}
+      </span>
+      <span class="conn" aria-hidden="true"></span>
+      <span class="tile" aria-hidden="true">
+        <span class="agent-symbol">&lt;/&gt;</span>
+      </span>
+    </div>
+
+    <div class="eyebrow">Connect an external agent</div>
+    <h1>${safeUserCode ? `Authorize ${safeApp} from your terminal?` : `Connect ${safeApp} to an agent`}</h1>
+    <p class="sub">Allow Claude Code, Codex, or Cowork to use ${safeApp} with your account. You can revoke access anytime.</p>
+    <p class="identity">
+      <span>Signed in as <strong>${safeEmail}</strong></span>
+      <span aria-hidden="true">&middot;</span>
+      <span class="origin">${safeOrigin}</span>
+    </p>
+  </div>
 
-  <div id="codeCallout" class="code-callout ${safeUserCode ? "" : "hidden"}">
-    <div class="label">Authorizing device code</div>
-    <div class="value" id="userCodeValue">${safeUserCode}</div>
+  <div id="codeCallout" class="device-strip ${safeUserCode ? "" : "hidden"}">
+    <span class="label">Device code</span>
+    <span class="value" id="userCodeValue">${safeUserCode}</span>
   </div>
 
   <div id="msg" class="msg"></div>
 
   <div id="mintForm">
-    <div class="field">
-      <label for="label">Label (optional)</label>
-      <input id="label" type="text" placeholder="e.g. Claude Code on my laptop" maxlength="120" />
-    </div>
-    <div class="field">
-      <label for="ttl">Expires in (days, 1–365)</label>
-      <input id="ttl" type="number" min="1" max="365" value="${DEFAULT_TOKEN_TTL_DAYS}" />
-    </div>
     <button id="authorizeBtn" class="primary">${safeUserCode ? "Authorize device" : "Create connection token"}</button>
+    <details class="advanced">
+      <summary>
+        Advanced options
+        <span class="chev" aria-hidden="true"></span>
+      </summary>
+      <div class="advanced-body">
+        <div class="field">
+          <label for="label">Label (optional)</label>
+          <input id="label" type="text" placeholder="e.g. Claude Code on my laptop" maxlength="120" />
+        </div>
+        <div class="field">
+          <label for="ttl">Expires in (days, 1–365)</label>
+          <input id="ttl" type="number" min="1" max="365" value="${DEFAULT_TOKEN_TTL_DAYS}" />
+        </div>
+      </div>
+    </details>
   </div>
 
-  <div id="result" class="hidden">
-    <p class="sub" id="resultMsg">Token created. Paste this into your agent's MCP config:</p>
+  <div id="result" class="result-panel hidden">
+    <div class="result-title">Connection token created</div>
+    <p class="result-copy" id="resultMsg">Paste this into your agent's MCP config. The token is shown only once.</p>
+    <div class="section-label">MCP config</div>
     <pre id="mcpJson"></pre>
-    <p class="sub">Or from a terminal:</p>
-    <pre id="cliLine"></pre>
+    <details class="advanced">
+      <summary>
+        Terminal alternative
+        <span class="chev" aria-hidden="true"></span>
+      </summary>
+      <div class="advanced-body">
+        <pre id="cliLine"></pre>
+      </div>
+    </details>
   </div>
 
-  <div class="tokens">
-    <h2>Your connections</h2>
-    <div id="tokenList"><div class="meta">Loading…</div></div>
-  </div>
+  <details id="connections" class="connections">
+    <summary>
+      <span class="connections-title">Existing connections</span>
+      <span id="connectionsState" class="connections-state">Checking</span>
+      <span class="chev" aria-hidden="true"></span>
+    </summary>
+    <div id="tokenList" class="token-list"><div class="empty-state">Checking connections...</div></div>
+  </details>
 </div>
 <script>
 (function () {
   var BASE = ${JSON.stringify(joinAppPath(connectBasePath, "/_agent-native/mcp/connect"))};
   var USER_CODE = ${JSON.stringify(safeUserCode || null)};
   var msgEl = document.getElementById("msg");
+  var connectionsEl = document.getElementById("connections");
+  var connectionsStateEl = document.getElementById("connectionsState");
   function showMsg(text, kind) {
     msgEl.textContent = text;
     msgEl.className = "msg " + (kind || "err");
@@ -321,10 +548,23 @@ function renderConnectPage(params) {
     var listEl = document.getElementById("tokenList");
     try {
       var res = await fetch(BASE + "/tokens", { credentials: "same-origin" });
-      if (!res.ok) { listEl.innerHTML = '<div class="meta">Could not load.</div>'; return; }
+      if (!res.ok) {
+        connectionsStateEl.textContent = "Unavailable";
+        connectionsEl.open = true;
+        listEl.innerHTML = '<div class="empty-state">Could not load connections.</div>';
+        return;
+      }
       var data = await res.json();
       var tokens = (data && data.tokens) || [];
-      if (!tokens.length) { listEl.innerHTML = '<div class="meta">No connections yet.</div>'; return; }
+      if (!tokens.length) {
+        connectionsStateEl.textContent = "None";
+        connectionsEl.open = false;
+        listEl.innerHTML = '<div class="empty-state">Created connections will appear here for revoking later.</div>';
+        return;
+      }
+      var activeCount = tokens.filter(function (t) { return !t.revokedAt; }).length;
+      connectionsStateEl.textContent = activeCount === 1 ? "1 active" : activeCount + " active";
+      connectionsEl.open = true;
       listEl.innerHTML = "";
       tokens.forEach(function (t) {
         var div = document.createElement("div");
@@ -354,7 +594,9 @@ function renderConnectPage(params) {
         listEl.appendChild(div);
       });
     } catch (e) {
-      listEl.innerHTML = '<div class="meta">Could not load.</div>';
+      connectionsStateEl.textContent = "Unavailable";
+      connectionsEl.open = true;
+      listEl.innerHTML = '<div class="empty-state">Could not load connections.</div>';
     }
   }
 
@@ -372,9 +614,57 @@ function renderConnectPage(params) {
           showMsg((a.data && a.data.error) || "Could not authorize this device code.");
           return;
         }
-        showMsg("Device authorized. You can return to your terminal — it will connect automatically.", "ok");
+        showMsg("Device authorized — finishing connection… you can return to your terminal.", "ok");
         btn.classList.add("hidden");
         document.getElementById("mintForm").classList.add("hidden");
+        var cc = document.getElementById("codeCallout");
+        if (cc) cc.classList.add("hidden");
+        // The token is minted a few seconds later, when the CLI next polls
+        // /device/poll — so a single loadTokens() here runs BEFORE the row
+        // exists and the list would wrongly read "No connections yet" until
+        // a manual reload. Snapshot the EXISTING non-revoked token ids first
+        // so we announce "Connected" only when THIS device's freshly-minted
+        // token appears — a user who already has tokens must not get a false
+        // success the instant they authorize.
+        var priorIds = {};
+        try {
+          var pr = await fetch(BASE + "/tokens", { credentials: "same-origin" });
+          if (pr.ok) {
+            var pd = await pr.json();
+            ((pd && pd.tokens) || []).forEach(function (t) {
+              if (!t.revokedAt) priorIds[t.id] = true;
+            });
+          }
+        } catch (e) {}
+        loadTokens();
+        var tries = 0;
+        var iv = setInterval(async function () {
+          tries++;
+          try {
+            var res = await fetch(BASE + "/tokens", { credentials: "same-origin" });
+            if (res.ok) {
+              var data = await res.json();
+              var fresh = ((data && data.tokens) || []).filter(function (t) {
+                return !t.revokedAt && !priorIds[t.id];
+              });
+              if (fresh.length > 0) {
+                clearInterval(iv);
+                showMsg("Connected. This device can now act as you — manage or revoke it below.", "ok");
+                loadTokens();
+                return;
+              }
+            }
+          } catch (e) {}
+          if (tries >= 30) {
+            // No new token appeared in the window — e.g. the loopback
+            // dev-open path writes a header-only config and never mints.
+            // Don't claim "Connected" (we couldn't confirm a device token);
+            // keep the "authorized" message and just refresh the list.
+            clearInterval(iv);
+            loadTokens();
+          }
+        }, 2000);
+        return;
       } else {
         var m = await postJson("/token", { label: label, ttlDays: ttlDays });
         if (!m.ok) {
@@ -459,6 +749,9 @@ export async function handleMcpConnect(event, subpath, options = {}) {
         if (!session?.email)
             return json({ error: "Unauthorized" }, 401);
         if (!process.env.A2A_SECRET) {
+            if (canUseDevOpenConnect(event)) {
+                return json(mcpResultPayload(appUrl, options, { ownerEmail: session.email }));
+            }
             return json({
                 error: "This deployment has no A2A_SECRET configured, so connect tokens cannot be minted.",
             }, 503);
@@ -475,7 +768,7 @@ export async function handleMcpConnect(event, subpath, options = {}) {
                 label,
                 ttlDays,
             });
-            return json(mcpResultPayload(appUrl, token, options));
+            return json(mcpResultPayload(appUrl, options, { token }));
         }
         catch {
             return json({ error: "Failed to mint token." }, 500);
@@ -557,6 +850,21 @@ export async function handleMcpConnect(event, subpath, options = {}) {
         }
         // status === "approved" && ownerEmail bound → mint exactly once.
         if (!process.env.A2A_SECRET) {
+            if (canUseDevOpenConnect(event)) {
+                const consumed = await consumeDeviceCode(deviceCode, `dev-open-${randomUUID()}`);
+                if (!consumed) {
+                    const fresh = await getDeviceCode(deviceCode);
+                    if (fresh?.status === "consumed")
+                        return json({ status: "consumed" });
+                    return json({ status: "pending" });
+                }
+                return json({
+                    status: "approved",
+                    ...mcpResultPayload(appUrl, options, {
+                        ownerEmail: row.ownerEmail,
+                    }),
+                });
+            }
             return json({ status: "error", error: "A2A_SECRET not configured" }, 503);
         }
         try {
@@ -594,7 +902,7 @@ export async function handleMcpConnect(event, subpath, options = {}) {
             }
             return json({
                 status: "approved",
-                ...mcpResultPayload(appUrl, token, options),
+                ...mcpResultPayload(appUrl, options, { token }),
             });
         }
         catch {