@arcblock/did-connect-service 4.0.6 → 4.1.0

package/dist/assets/admin-core.c0b5af61.js

@@ -0,0 +1,1393 @@
+
+var toastContainer = null;
+
+function ensureToastContainer() {
+  if (toastContainer) return;
+  toastContainer = document.createElement("div");
+  toastContainer.style.cssText = "position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;";
+  document.body.appendChild(toastContainer);
+}
+
+function showToast(message, type) {
+  ensureToastContainer();
+  var toast = document.createElement("div");
+  var bg = type === "error" ? "var(--red-bg)" : type === "success" ? "var(--green-bg)" : "var(--bg-card)";
+  var color = type === "error" ? "var(--red)" : type === "success" ? "var(--green)" : "var(--text)";
+  var border = type === "error" ? "var(--red)" : type === "success" ? "var(--green)" : "var(--border)";
+  toast.style.cssText = "padding:12px 20px;border-radius:8px;font-size:14px;background:" + bg + ";color:" + color + ";border:1px solid " + border + ";box-shadow:0 4px 12px rgba(0,0,0,0.3);opacity:0;transition:opacity 0.2s;";
+  toast.textContent = message;
+  toastContainer.appendChild(toast);
+  requestAnimationFrame(function() { toast.style.opacity = "1"; });
+  setTimeout(function() {
+    toast.style.opacity = "0";
+    setTimeout(function() { toast.remove(); }, 200);
+  }, 3000);
+}
+
+;
+
+function relativeTime(iso) {
+  var diff = Date.now() - new Date(iso).getTime();
+  var abs = Math.abs(diff);
+  var future = diff < 0;
+  var s = Math.floor(abs / 1000);
+  var m = Math.floor(s / 60);
+  var h = Math.floor(m / 60);
+  var d = Math.floor(h / 24);
+  var label;
+  if (d > 0) label = d + "d " + (h % 24) + "h";
+  else if (h > 0) label = h + "h " + (m % 60) + "m";
+  else if (m > 0) label = m + " min";
+  else label = "just now";
+  if (label === "just now") return label;
+  return future ? "in " + label : label + " ago";
+}
+
+function absoluteTime(iso) {
+  var d = new Date(iso);
+  var pad = function(n) { return n < 10 ? "0" + n : "" + n; };
+  return d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate())
+    + " " + pad(d.getHours()) + ":" + pad(d.getMinutes()) + ":" + pad(d.getSeconds());
+}
+
+function copyToClipboard(text) {
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(function() {
+      showToast("Copied!", "success");
+    }).catch(function() {
+      fallbackCopy(text);
+    });
+  } else {
+    fallbackCopy(text);
+  }
+}
+
+function fallbackCopy(text) {
+  var input = document.createElement("input");
+  input.value = text;
+  document.body.appendChild(input);
+  input.select();
+  document.execCommand("copy");
+  input.remove();
+  showToast("Copied!", "success");
+}
+
+// Delegate to the canonical implementation from @arcblock/did-connect-core
+// (exposed globally by the <did-address> IIFE bundle as __DidAddressBundle.truncateDid)
+function truncateDid(did) {
+  return __DidAddressBundle.truncateDid(did);
+}
+
+function initials(name) {
+  if (!name) return "?";
+  var parts = name.trim().split(/\s+/);
+  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();
+  return name.slice(0, 2).toUpperCase();
+}
+
+function escapeHtml(str) {
+  var div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+// Generate a shimmer skeleton table: cols = column count, rows = row count
+function skeletonTable(cols, rows) {
+  var widths = [70, 45, 60, 55, 65, 50, 60, 30];
+  var cells = '';
+  for (var i = 0; i < cols; i++) {
+    cells += '<td><span class="skel" style="width:' + widths[i % widths.length] + '%;height:13px;"></span></td>';
+  }
+  var row = '<tr class="skel-row">' + cells + '</tr>';
+  var tbody = '';
+  for (var j = 0; j < rows; j++) tbody += row;
+  return '<table class="table"><tbody>' + tbody + '</tbody></table>';
+}
+
+/** Generate shimmer skeleton rows for list-style containers. */
+function skeletonRows(rows) {
+  var widths = [45, 65, 55];
+  var html = '';
+  for (var i = 0; i < rows; i++) {
+    html += '<div class="settings-row"><span class="skel" style="width:' + widths[i % widths.length] + '%;height:13px;"></span></div>';
+  }
+  return html;
+}
+
+function renderAvatar(avatarUrl, fullName, size) {
+  size = size || "";
+  var cls = "avatar" + (size ? " avatar-" + size : "");
+  if (avatarUrl) {
+    var sep = avatarUrl.indexOf("?") >= 0 ? "&" : "?";
+    var src = avatarUrl + sep + "t=" + Date.now() + (size === "sm" ? "&s=64" : "");
+    return '<div class="' + cls + '">'
+      + '<img src="' + escapeHtml(src) + '" '
+      + 'onerror="this.style.display=\'none\';this.nextSibling.style.display=\'flex\'">'
+      + '<span class="avatar-fallback" style="display:none">' + escapeHtml(initials(fullName)) + '</span>'
+      + '</div>';
+  }
+  return '<div class="' + cls + '"><span class="avatar-fallback">' + escapeHtml(initials(fullName)) + '</span></div>';
+}
+
+;
+
+async function api(method, path, body) {
+  try {
+    var opts = {
+      method: method,
+      headers: {},
+    };
+    if (body !== undefined) {
+      opts.headers["Content-Type"] = "application/json";
+      opts.body = JSON.stringify(body);
+    }
+    var res = await fetch(window.__BASE_PATH + path, opts);
+    var data = await res.json();
+
+    if (res.status === 401) {
+      location.href = "/.well-known/service/api/did/logout";
+      return { ok: false, error: "Session expired", code: "UNAUTHENTICATED" };
+    }
+    if (res.status === 403 && data.code === "BLOCKED") {
+      location.href = "/.well-known/service/api/did/logout";
+      return { ok: false, error: "Account blocked", code: "BLOCKED" };
+    }
+    if (!res.ok) {
+      showToast(data.error || "Request failed", "error");
+      return { ok: false, error: data.error, code: data.code };
+    }
+    return data;
+  } catch (err) {
+    showToast("Network error", "error");
+    return { ok: false, error: err.message, code: "NETWORK_ERROR" };
+  }
+}
+
+;
+
+function showDialog(id) {
+  var d = document.getElementById(id);
+  if (d && d.showModal) d.showModal();
+}
+
+function closeDialog(id) {
+  var d = document.getElementById(id || "generic-dialog");
+  if (d && d.close) d.close();
+}
+
+function openDialog(title, bodyHtml, confirmLabel, onConfirm) {
+  var d = document.getElementById("generic-dialog");
+  if (!d) {
+    d = document.createElement("dialog");
+    d.id = "generic-dialog";
+    d.innerHTML = '<div class="dialog-content"><h3 id="gd-title"></h3><div id="gd-body"></div></div><div class="dialog-actions"><button class="btn btn-secondary" id="gd-cancel">Cancel</button><button class="btn btn-primary" id="gd-ok">Confirm</button></div>';
+    document.body.appendChild(d);
+  }
+  document.getElementById("gd-title").textContent = title;
+  document.getElementById("gd-body").innerHTML = bodyHtml;
+  var okBtn = document.getElementById("gd-ok");
+  okBtn.textContent = confirmLabel || "Confirm";
+  okBtn.className = (confirmLabel === "Delete") ? "btn btn-danger" : "btn btn-primary";
+  okBtn.onclick = function() { onConfirm(); };
+  document.getElementById("gd-cancel").onclick = function() { d.close(); };
+  d.showModal();
+}
+
+function confirmDialog(opts) {
+  return new Promise(function(resolve) {
+    var d = document.getElementById("confirm-dialog");
+    if (!d) {
+      d = document.createElement("dialog");
+      d.id = "confirm-dialog";
+      d.innerHTML = '<div class="dialog-content"><h3 id="confirm-title"></h3><p id="confirm-message" class="dialog-desc"></p></div><div class="dialog-actions"><button class="btn btn-secondary" id="confirm-cancel">Cancel</button><button class="btn" id="confirm-ok">Confirm</button></div>';
+      document.body.appendChild(d);
+    }
+    document.getElementById("confirm-title").textContent = opts.title || "Confirm";
+    document.getElementById("confirm-message").textContent = opts.message || "";
+    var okBtn = document.getElementById("confirm-ok");
+    okBtn.textContent = opts.confirmLabel || "Confirm";
+    okBtn.className = opts.danger ? "btn btn-danger" : "btn";
+    document.getElementById("confirm-cancel").textContent = opts.cancelLabel || "Cancel";
+
+    function cleanup() {
+      okBtn.onclick = null;
+      document.getElementById("confirm-cancel").onclick = null;
+      d.close();
+    }
+    okBtn.onclick = function() { cleanup(); resolve(true); };
+    document.getElementById("confirm-cancel").onclick = function() { cleanup(); resolve(false); };
+    d.onclose = function() { resolve(false); };
+    d.showModal();
+  });
+}
+
+function promptDialog(opts) {
+  return new Promise(function(resolve) {
+    var d = document.getElementById("prompt-dialog");
+    if (!d) {
+      d = document.createElement("dialog");
+      d.id = "prompt-dialog";
+      d.innerHTML = '<div class="dialog-content"><h3 id="prompt-title"></h3><p id="prompt-message" class="dialog-desc"></p><input class="input" id="prompt-input" style="margin-top:12px;" /></div><div class="dialog-actions"><button class="btn btn-secondary" id="prompt-cancel">Cancel</button><button class="btn" id="prompt-ok">Confirm</button></div>';
+      document.body.appendChild(d);
+    }
+    document.getElementById("prompt-title").textContent = opts.title || "";
+    document.getElementById("prompt-message").textContent = opts.message || "";
+    var input = document.getElementById("prompt-input");
+    input.type = opts.inputType || "text";
+    input.placeholder = opts.placeholder || "";
+    input.value = opts.defaultValue || "";
+    var okBtn = document.getElementById("prompt-ok");
+    okBtn.textContent = opts.confirmLabel || __t("common.confirm");
+
+    function cleanup() { d.close(); }
+    okBtn.onclick = function() { var v = input.value.trim(); cleanup(); resolve(v || null); };
+    document.getElementById("prompt-cancel").onclick = function() { cleanup(); resolve(null); };
+    d.onclose = function() { resolve(null); };
+    d.showModal();
+    input.focus();
+  });
+}
+
+;
+
+var currentTab = null;
+var tabHandlers = {};
+
+function registerTab(name, handler) {
+  tabHandlers[name] = handler;
+}
+
+function switchTab(name) {
+  if (currentTab === name) return;
+  currentTab = name;
+
+  // Update tab buttons (desktop)
+  document.querySelectorAll("[data-tab]").forEach(function(el) {
+    el.classList.toggle("tab-active", el.getAttribute("data-tab") === name);
+  });
+
+  // Update sidebar items (mobile)
+  document.querySelectorAll("[data-sidebar-tab]").forEach(function(el) {
+    el.classList.toggle("sidebar-item-active", el.getAttribute("data-sidebar-tab") === name);
+  });
+
+  // Update tab panels
+  document.querySelectorAll("[data-panel]").forEach(function(el) {
+    el.classList.toggle("hidden", el.getAttribute("data-panel") !== name);
+  });
+
+  // Update hash without triggering hashchange
+  if (location.hash !== "#" + name) {
+    history.replaceState(null, "", "#" + name);
+  }
+
+  // Call tab handler for lazy loading
+  if (tabHandlers[name]) {
+    tabHandlers[name]();
+  }
+}
+
+function initRouter(defaultTab) {
+  var hash = location.hash.slice(1);
+  var validTabs = Object.keys(tabHandlers);
+  var initial = validTabs.indexOf(hash) >= 0 ? hash : defaultTab;
+  switchTab(initial);
+
+  window.addEventListener("hashchange", function() {
+    var h = location.hash.slice(1);
+    if (tabHandlers[h]) switchTab(h);
+  });
+}
+
+;
+
+var profileData = null;
+
+async function loadProfile() {
+  document.getElementById("profile-card-skeleton").style.display = "";
+  document.getElementById("profile-card-content").style.display = "none";
+  var data = await api("GET", "/profile");
+  document.getElementById("profile-card-skeleton").style.display = "none";
+  document.getElementById("profile-card-content").style.display = "";
+  if (!data.ok) return;
+  profileData = data.user;
+  renderProfile(data.user);
+}
+
+function renderProfile(user) {
+  var avatarEl = document.getElementById("profile-avatar");
+  if (user.avatar) {
+    avatarEl.innerHTML = '<img src="' + escapeHtml(user.avatar) + '" onerror="this.style.display=\'none\';this.nextSibling.style.display=\'flex\'">'
+      + '<span class="avatar-fallback" style="display:none">' + escapeHtml(initials(user.fullName)) + '</span>'
+      + '<div class="avatar-overlay"><span>Edit</span></div>';
+  } else {
+    avatarEl.innerHTML = '<span class="avatar-fallback">' + escapeHtml(initials(user.fullName)) + '</span>'
+      + '<div class="avatar-overlay"><span>Edit</span></div>';
+  }
+
+  document.getElementById("profile-display-name").textContent = user.fullName || __t("profile.unnamed");
+
+  var role = user.role || "guest";
+  var badge = document.getElementById("profile-role-badge");
+  badge.textContent = __t("common." + role);
+  badge.className = "badge badge-" + role;
+
+  document.getElementById("profile-did").setAttribute("did", user.did);
+
+  document.getElementById("profile-name").value = user.fullName || "";
+  cancelEditName();
+
+  document.getElementById("profile-email-display").textContent = user.email || "—";
+
+  var emailBadge = document.getElementById("profile-email-badge");
+  var emailVerifyBtn = document.getElementById("profile-email-verify-btn");
+  if (user.email) {
+    emailBadge.style.display = "";
+    if (user.emailVerified) {
+      emailBadge.textContent = __t("profile.emailVerified");
+      emailBadge.className = "badge badge-verified";
+      emailVerifyBtn.style.display = "none";
+    } else {
+      emailBadge.textContent = __t("profile.emailUnverified");
+      emailBadge.className = "badge badge-unverified";
+      emailVerifyBtn.style.display = "";
+    }
+  } else {
+    emailBadge.style.display = "none";
+    emailVerifyBtn.style.display = "none";
+  }
+
+  if (user.createdAt) {
+    document.getElementById("profile-joined-cell").style.display = "";
+    document.getElementById("profile-joined-value").textContent = absoluteTime(user.createdAt);
+  }
+}
+
+function startEditName() {
+  document.getElementById("profile-header-info-view").style.display = "none";
+  document.getElementById("profile-name-editor").style.display = "";
+  document.getElementById("profile-name").focus();
+}
+
+function cancelEditName() {
+  document.getElementById("profile-name-editor").style.display = "none";
+  document.getElementById("profile-header-info-view").style.display = "";
+  if (profileData) document.getElementById("profile-name").value = profileData.fullName || "";
+}
+
+async function saveProfile() {
+  var body = {
+    fullName: document.getElementById("profile-name").value.trim(),
+  };
+  var data = await api("PUT", "/profile", body);
+  if (data.ok) {
+    profileData = data.user;
+    renderProfile(data.user);
+    showToast(__t("profile.updated"), "success");
+    var headerName = document.getElementById("header-user-name");
+    if (headerName) headerName.textContent = data.user.fullName || truncateDid(data.user.did);
+  }
+}
+
+async function changeEmail() {
+  var currentEmail = profileData ? profileData.email || "" : "";
+  var newEmail = await promptDialog({
+    title: __t("profile.changeEmailTitle"),
+    message: __t("profile.changeEmailMsg"),
+    placeholder: __t("profile.emailPlaceholder"),
+    defaultValue: currentEmail,
+    inputType: "email",
+  });
+  if (!newEmail || newEmail === currentEmail) return;
+  var result = await api("PUT", "/profile/email", { email: newEmail });
+  if (result.ok) {
+    profileData = result.user;
+    renderProfile(result.user);
+    showToast(__t("profile.emailUpdated"), "success");
+  }
+}
+
+var _lastVerifySentAt = 0;
+
+function verifyEmail() {
+  var email = profileData ? profileData.email : "";
+  if (!email) return;
+
+  var verifyBtn = document.getElementById("profile-email-verify-btn");
+  verifyBtn.disabled = true;
+
+  // Build or reuse dialog
+  var d = document.getElementById("verify-email-dialog");
+  if (!d) {
+    d = document.createElement("dialog");
+    d.id = "verify-email-dialog";
+    d.innerHTML = '<div class="dialog-content">'
+      + '<h3 id="verify-title"></h3>'
+      + '<p id="verify-message" class="dialog-desc"></p>'
+      + '<input class="input" id="verify-input" placeholder="000000" style="margin-top:12px;" />'
+      + '</div>'
+      + '<div class="dialog-actions">'
+      + '<button class="btn-text" id="verify-resend" style="margin-right:auto"></button>'
+      + '<button class="btn btn-secondary" id="verify-cancel">' + __t("common.cancel") + '</button>'
+      + '<button class="btn" id="verify-ok">' + __t("common.confirm") + '</button>'
+      + '</div>';
+    document.body.appendChild(d);
+  }
+
+  var titleEl = document.getElementById("verify-title");
+  var msgEl = document.getElementById("verify-message");
+  var inputEl = document.getElementById("verify-input");
+  var okBtn = document.getElementById("verify-ok");
+  var cancelBtn = document.getElementById("verify-cancel");
+  var resendBtn = document.getElementById("verify-resend");
+  var countdownTimer = null;
+
+  titleEl.textContent = __t("profile.verifyCode");
+  inputEl.value = "";
+
+  function cleanup() {
+    if (countdownTimer) clearInterval(countdownTimer);
+    verifyBtn.disabled = false;
+    d.close();
+  }
+
+  function remainingCooldown() {
+    if (!_lastVerifySentAt) return 0;
+    return Math.max(0, Math.ceil((60000 - (Date.now() - _lastVerifySentAt)) / 1000));
+  }
+
+  function syncResendBtn() {
+    var remain = remainingCooldown();
+    resendBtn.style.display = "";
+    if (remain > 0) {
+      resendBtn.disabled = true;
+      resendBtn.textContent = __t("profile.emailResendCountdown", { seconds: remain });
+    } else {
+      resendBtn.disabled = false;
+      resendBtn.textContent = __t("profile.emailResendBtn");
+    }
+  }
+
+  function startCountdown() {
+    if (countdownTimer) clearInterval(countdownTimer);
+    syncResendBtn();
+    countdownTimer = setInterval(function() {
+      if (remainingCooldown() <= 0) {
+        clearInterval(countdownTimer);
+        countdownTimer = null;
+      }
+      syncResendBtn();
+    }, 1000);
+  }
+
+  function sendCode() {
+    msgEl.textContent = __t("profile.emailSending");
+    inputEl.disabled = true;
+    okBtn.disabled = true;
+    resendBtn.style.display = "none";
+    if (countdownTimer) { clearInterval(countdownTimer); countdownTimer = null; }
+
+    api("POST", "/profile/email/verify").then(function(sendResult) {
+      if (!sendResult.ok) {
+        msgEl.textContent = sendResult.error || __t("profile.emailSendFailed");
+        // If there's remaining cooldown, show countdown; otherwise show resend
+        if (remainingCooldown() > 0) {
+          startCountdown();
+        } else {
+          resendBtn.style.display = "";
+          resendBtn.disabled = false;
+          resendBtn.textContent = __t("profile.emailResendBtn");
+        }
+        return;
+      }
+      _lastVerifySentAt = Date.now();
+      msgEl.textContent = __t("profile.verifyCodeMsg", { email: email });
+      inputEl.disabled = false;
+      okBtn.disabled = false;
+      inputEl.focus();
+      startCountdown();
+    });
+  }
+
+  cancelBtn.onclick = function() { cleanup(); };
+  d.onclose = function() {
+    if (countdownTimer) clearInterval(countdownTimer);
+    verifyBtn.disabled = false;
+  };
+
+  okBtn.onclick = function() {
+    var code = inputEl.value.trim();
+    if (!code) return;
+    okBtn.disabled = true;
+    api("PUT", "/profile/email/verify", { code: code }).then(function(result) {
+      if (result.ok) {
+        cleanup();
+        profileData = result.user;
+        renderProfile(result.user);
+        showToast(__t("profile.emailVerifiedSuccess"), "success");
+      } else {
+        okBtn.disabled = false;
+        msgEl.textContent = result.error || __t("profile.emailVerifyFailed");
+      }
+    });
+  };
+
+  resendBtn.onclick = function() { sendCode(); };
+
+  d.showModal();
+
+  // If still in cooldown from a previous send, skip sending and show code input directly
+  var remain = remainingCooldown();
+  if (remain > 0) {
+    msgEl.textContent = __t("profile.verifyCodeMsg", { email: email });
+    inputEl.disabled = false;
+    okBtn.disabled = false;
+    inputEl.focus();
+    startCountdown();
+  } else {
+    sendCode();
+  }
+}
+
+function triggerAvatarUpload() {
+  document.getElementById("avatar-file-input").click();
+}
+
+function resizeImage(file, maxSize) {
+  return new Promise(function(resolve, reject) {
+    var img = new Image();
+    img.onload = function() {
+      var canvas = document.createElement("canvas");
+      canvas.width = canvas.height = maxSize;
+      var ctx = canvas.getContext("2d");
+      var s = Math.min(img.width, img.height);
+      var sx = (img.width - s) / 2;
+      var sy = (img.height - s) / 2;
+      ctx.drawImage(img, sx, sy, s, s, 0, 0, maxSize, maxSize);
+      resolve(canvas.toDataURL("image/jpeg", 0.85));
+      URL.revokeObjectURL(img.src);
+    };
+    img.onerror = function() {
+      URL.revokeObjectURL(img.src);
+      reject(new Error("Failed to load image"));
+    };
+    img.src = URL.createObjectURL(file);
+  });
+}
+
+async function handleAvatarFile(input) {
+  var file = input.files[0];
+  if (!file) return;
+  if (file.size > 10 * 1024 * 1024) {
+    showToast("Image must be under 10MB", "error");
+    input.value = "";
+    return;
+  }
+  try {
+    var base64 = await resizeImage(file, 200);
+    var data = await api("PUT", "/profile/avatar", { avatar: base64 });
+    if (data.ok) {
+      showToast("Avatar updated", "success");
+      loadProfile();
+    }
+  } catch (e) {
+    showToast("Failed to process image", "error");
+  }
+  input.value = "";
+}
+
+async function removeAvatar() {
+  var ok = await confirmDialog({ title: "Remove Avatar", message: "Remove your avatar? Your profile will show a default avatar.", confirmLabel: "Remove" });
+  if (!ok) return;
+  var data = await api("DELETE", "/profile/avatar");
+  if (data.ok) {
+    showToast("Avatar removed", "success");
+    loadProfile();
+  }
+}
+
+registerTab("profile", function() {
+  loadProfile();
+  if (typeof loadConnectedAccounts === "function") loadConnectedAccounts();
+});
+
+;
+
+var __connectedAccounts = [];
+var __oauthProviders = [];
+var __providerIcons = {"passkey":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path fill=\"currentColor\" d=\"M3 20v-2.8q0-.85.438-1.562T4.6 14.55q1.55-.775 3.15-1.162T11 13q.5 0 1 .038t1 .112q-.1 1.45.525 2.738T15.35 18v2zm16 3l-1.5-1.5v-4.65q-1.1-.325-1.8-1.237T15 13.5q0-1.45 1.025-2.475T18.5 10t2.475 1.025T22 13.5q0 1.125-.638 2t-1.612 1.25L21 18l-1.5 1.5L21 21zm-8-11q-1.65 0-2.825-1.175T7 8t1.175-2.825T11 4t2.825 1.175T15 8t-1.175 2.825T11 12m7.5 2q.425 0 .713-.288T19.5 13t-.288-.712T18.5 12t-.712.288T17.5 13t.288.713t.712.287\"/></svg>","wallet":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"3\" fill=\"#4598FA\"/><rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\" fill=\"white\" opacity=\"0.9\"/><rect x=\"0\" y=\"14\" width=\"24\" height=\"10\" rx=\"0\" fill=\"url(#dw_g)\"/><path d=\"M5.5 9.5h4.5c.3 0 .5.2.5.5v2.5c0 .3-.2.5-.5.5H5.5c-.3 0-.5-.2-.5-.5V10c0-.3.2-.5.5-.5z\" fill=\"#4598FA\"/><defs><linearGradient id=\"dw_g\" x1=\"12\" y1=\"14\" x2=\"12\" y2=\"24\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#77B2F6\"/><stop offset=\"1\" stop-color=\"#4598FA\"/></linearGradient></defs></svg>","did-connect":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"3\" fill=\"#4598FA\"/><rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\" fill=\"white\" opacity=\"0.9\"/><rect x=\"0\" y=\"14\" width=\"24\" height=\"10\" rx=\"0\" fill=\"url(#dw_g)\"/><path d=\"M5.5 9.5h4.5c.3 0 .5.2.5.5v2.5c0 .3-.2.5-.5.5H5.5c-.3 0-.5-.2-.5-.5V10c0-.3.2-.5.5-.5z\" fill=\"#4598FA\"/><defs><linearGradient id=\"dw_g\" x1=\"12\" y1=\"14\" x2=\"12\" y2=\"24\" gradientUnits=\"userSpaceOnUse\"><stop stop-color=\"#77B2F6\"/><stop offset=\"1\" stop-color=\"#4598FA\"/></linearGradient></defs></svg>","email":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"><path fill=\"currentColor\" d=\"M22 7.535V17a3 3 0 0 1-2.824 2.995L19 20H5a3 3 0 0 1-2.995-2.824L2 17V7.535l9.445 6.297l.116.066a1 1 0 0 0 .878 0l.116-.066z\"/><path fill=\"currentColor\" d=\"M19 4c1.08 0 2.027.57 2.555 1.427L12 11.797l-9.555-6.37a2.999 2.999 0 0 1 2.354-1.42L5 4z\"/></svg>","google":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 256 262\"><path fill=\"#4285F4\" d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"/><path fill=\"#34A853\" d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"/><path fill=\"#FBBC05\" d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"/><path fill=\"#EB4335\" d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"/></svg>","github":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 256 250\" fill=\"currentColor\"><path d=\"M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0\"/></svg>","apple":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 256 315\" fill=\"currentColor\"><path d=\"M213.803 167.03c.442 47.58 41.74 63.413 42.197 63.615c-.35 1.116-6.599 22.563-21.757 44.716c-13.104 19.153-26.705 38.235-48.13 38.63c-21.05.388-27.82-12.483-51.888-12.483c-24.061 0-31.582 12.088-51.51 12.871c-20.68.783-36.428-20.71-49.64-39.793c-27-39.033-47.633-110.3-19.928-158.406c13.763-23.89 38.36-39.017 65.056-39.405c20.307-.388 39.475 13.675 51.889 13.675c12.406 0 35.699-16.895 60.186-14.414c10.25.427 39.026 4.14 57.503 31.186c-1.49.923-34.335 20.044-33.978 59.808M174.24 50.199c10.98-13.29 18.369-31.79 16.353-50.199c-15.826.636-34.962 10.546-46.314 23.828c-10.173 11.763-19.082 30.589-16.678 48.633c17.64 1.365 35.66-8.964 46.639-22.262\"/></svg>","twitter":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 256 256\" fill=\"currentColor\"><path d=\"M149.079 108.399L242.33 0h-22.098l-80.97 94.12L74.59 0H0l97.796 142.328L0 256h22.1l85.507-99.395L175.905 256h74.59L149.073 108.399zM118.81 143.58l-9.909-14.172l-78.84-112.773h33.943l63.625 91.011l9.909 14.173l82.705 118.3H186.3l-67.49-96.533z\"/></svg>","auth0":"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 256 256\"><path fill=\"#EB5424\" d=\"M203.97 200.38L167.47 88l-39.5 112.38h75.98zm0-144.76L167.47 168l75.97-26.16l19.76-60.82c6.64-20.4-1.94-42.72-21.18-52.76l-38.06 27.36zM52.03 55.62L88.54 168l39.5-112.38H52.02zM52.03 200.38L88.54 88L12.56 114.16l-5.92 18.2c-6.64 20.4 1.94 42.72 21.18 52.76l24.2-17.38l.01.01v-.01l-.01.01.01-.37z\"/></svg>"};
+var __hiddenProviders = ["facebook","auth0-legacy"];
+
+async function loadConnectedAccounts() {
+  var card = document.getElementById("connected-accounts-card");
+  var list = document.getElementById("connected-accounts-list");
+
+  // Show card with skeleton chips while loading
+  card.style.display = "";
+  list.innerHTML = '<div style="padding:12px 20px 16px;display:flex;gap:8px;flex-wrap:wrap;">'
+    + '<span class="skel" style="width:80px;height:32px;border-radius:16px;"></span>'.repeat(4)
+    + '</div>';
+
+  // Load session data and OAuth configs in parallel
+  var results = await Promise.all([
+    api("GET", "/../did/session"),
+    api("GET", "/../oauth/configs").catch(function() { return { providers: [] }; }),
+  ]);
+
+  var session = results[0];
+  var oauthData = results[1];
+
+  var userObj = session.user || session;
+  if (!session.authenticated || !userObj.connectedAccounts) {
+    card.style.display = "none";
+    return;
+  }
+
+  __connectedAccounts = userObj.connectedAccounts;
+  __oauthProviders = (oauthData.providers || []).map(function(p) { return p.name || p; })
+    .filter(function(p) { return __hiddenProviders.indexOf(p) === -1; });
+
+  card.style.display = "";
+  renderConnectedAccounts();
+}
+
+function renderConnectedAccounts() {
+  var list = document.getElementById("connected-accounts-list");
+  var html = "";
+
+  // Partition accounts by type
+  var walletAccounts = [];
+  var passkeyAccounts = [];
+  var otherAccounts = [];
+  for (var i = 0; i < __connectedAccounts.length; i++) {
+    var a = __connectedAccounts[i];
+    if (__hiddenProviders.indexOf(a.provider) !== -1) continue;
+    if (a.provider === "wallet" || a.provider === "did-connect") {
+      walletAccounts.push(a);
+    } else if (a.provider === "passkey") {
+      passkeyAccounts.push(a);
+    } else {
+      otherAccounts.push(a);
+    }
+  }
+  // Sort non-wallet accounts: main first
+  otherAccounts.sort(function(x, y) {
+    if (x.isMain && !y.isMain) return -1;
+    if (!x.isMain && y.isMain) return 1;
+    return 0;
+  });
+
+  // --- Section 1: DID Wallet (always first) ---
+  html += '<div class="ca-section">';
+  html += '<div class="ca-section-label">DID Wallet</div>';
+  if (walletAccounts.length > 0) {
+    html += '<div class="ca-bound-grid">';
+    for (var w = 0; w < walletAccounts.length; w++) {
+      html += renderBoundCard(walletAccounts[w]);
+    }
+    html += '</div>';
+    // Already has a wallet — no connect button (one wallet per user)
+  } else {
+    html += '<button class="ca-passkey-add" onclick="connectWallet()">';
+    html += '<span class="ca-chip-add-icon">+</span>';
+    html += '<span class="ca-chip-icon">' + getProviderIconSvg("did-connect") + '</span>';
+    html += __t("profile.connectWallet");
+    html += '</button>';
+  }
+  html += '</div>';
+
+  // --- Section 2: Other login methods ---
+  if (otherAccounts.length > 0) {
+    html += '<div class="ca-section">';
+    html += '<div class="ca-section-label">' + __t("profile.loginMethods") + '</div>';
+    html += '<div class="ca-bound-grid">';
+    for (var b = 0; b < otherAccounts.length; b++) {
+      html += renderBoundCard(otherAccounts[b]);
+    }
+    html += '</div></div>';
+  }
+
+  // --- Section 3: Passkeys (large cards + add chip) ---
+  html += '<div class="ca-section">';
+  html += '<div class="ca-section-label">' + __t("profile.passkeys") + '</div>';
+  if (passkeyAccounts.length > 0) {
+    html += '<div class="ca-bound-grid">';
+    for (var pk = 0; pk < passkeyAccounts.length; pk++) {
+      html += renderBoundCard(passkeyAccounts[pk]);
+    }
+    html += '</div>';
+  }
+  html += '<div style="padding:' + (passkeyAccounts.length > 0 ? '8' : '0') + 'px 0 0">';
+  html += '<button class="ca-passkey-add" onclick="addPasskey()">';
+  html += '<span class="ca-chip-add-icon">+</span>';
+  html += '<span class="ca-chip-icon">' + getProviderIconSvg("passkey") + '</span>';
+  html += __t("profile.addPasskey");
+  html += '</button>';
+  html += '</div></div>';
+
+  // --- Section 4: Available to connect (unbound OAuth, at the bottom) ---
+  var boundProviders = {};
+  for (var j = 0; j < __connectedAccounts.length; j++) {
+    boundProviders[__connectedAccounts[j].provider] = true;
+  }
+  var unboundOAuth = __oauthProviders.filter(function(p) { return !boundProviders[p]; });
+  if (unboundOAuth.length > 0) {
+    html += '<div class="ca-section">';
+    html += '<div class="ca-section-label">' + __t("profile.availableToConnect") + '</div>';
+    html += '<div class="ca-chips">';
+    for (var u = 0; u < unboundOAuth.length; u++) {
+      var p = unboundOAuth[u];
+      html += '<div class="ca-chip ca-chip-unbound" onclick="connectOAuth(\'' + escapeHtml(p) + '\')" title="' + __t("profile.connect") + " " + escapeHtml(getProviderLabel(p)) + '">';
+      html += '<span class="ca-chip-add-icon">+</span>';
+      html += '<span class="ca-chip-icon">' + getProviderIconSvg(p) + '</span>';
+      html += '<span class="ca-chip-name">' + escapeHtml(getProviderLabel(p)) + '</span>';
+      html += '</div>';
+    }
+    html += '</div></div>';
+  }
+
+  list.innerHTML = html;
+}
+
+var __copyIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>';
+
+function renderBoundCard(a) {
+  var icon = getProviderIconSvg(a.provider);
+  var label = getProviderLabel(a.provider);
+  var isPasskey = a.provider === "passkey";
+
+  var html = '<div class="ca-bound-card">';
+
+  // Top row: icon + name/detail + action buttons (top-right)
+  html += '<div class="ca-bound-top">';
+  if (isPasskey) {
+    html += '<div class="ca-bound-icon ca-bound-icon-lg">' + icon + '</div>';
+  } else {
+    html += '<div class="ca-bound-icon">' + icon + '</div>';
+  }
+  html += '<div class="ca-bound-top-body">';
+  html += '<div class="ca-bound-header">';
+  html += '<span class="ca-bound-name">' + escapeHtml(label) + '</span>';
+  if (a.isMain) {
+    html += '<span class="ca-chip-badge">' + __t("profile.mainAccount") + '</span>';
+  } else if (a.provider === "wallet" || a.provider === "did-connect") {
+    html += '<span class="ca-chip-badge">' + __t("profile.walletAccount") + '</span>';
+  }
+  html += '</div>';
+  var info = getAccountUserInfo(a);
+  if (info) {
+    html += '<div class="ca-bound-detail">' + info + '</div>';
+  }
+  html += '</div>';
+
+  // Action buttons at top-right
+  if (!a.isMain && a.provider !== "wallet" && a.provider !== "did-connect") {
+    html += '<div class="ca-bound-actions">';
+    if (isPasskey) {
+      html += '<button class="btn-text" onclick="openRenamePasskeyDialog(\'' + escapeHtml(a.did) + '\', \'' + escapeHtml(getPasskeyName(a)) + '\')">' + __t("profile.renamePasskey") + '</button>';
+      html += '<button class="btn-text" style="color:var(--red-text)" onclick="removePasskey(\'' + escapeHtml(a.did) + '\')">' + __t("profile.remove") + '</button>';
+    } else {
+      html += '<button class="btn-text" style="color:var(--red-text)" onclick="unbindOAuth(\'' + escapeHtml(a.provider) + '\')">' + __t("profile.remove") + '</button>';
+    }
+    html += '</div>';
+  }
+  html += '</div>';
+
+  // DID field with copy
+  if (a.did) {
+    html += '<div class="ca-bound-field">';
+    html += '<span class="ca-bound-field-label">DID</span>';
+    html += '<did-address did="' + escapeHtml(a.did) + '"></did-address>';
+    html += '</div>';
+  }
+
+  html += '</div>';
+  return html;
+}
+
+function getPasskeyName(a) {
+  return (a.userInfo && a.userInfo.name) ? a.userInfo.name : "Passkey";
+}
+
+function getAccountUserInfo(a) {
+  var parts = [];
+  if (a.userInfo && a.userInfo.name) parts.push(escapeHtml(a.userInfo.name));
+  if (a.userInfo && a.userInfo.email) parts.push(escapeHtml(a.userInfo.email));
+  if (parts.length > 0) return parts.join(' · ');
+  if (a.provider === "passkey") {
+    var name = a.userInfo && a.userInfo.name ? a.userInfo.name : null;
+    return name ? escapeHtml(name) : "\u2022\u2022\u2022\u2022" + (a.id ? a.id.slice(-4) : "");
+  }
+  return "";
+}
+
+function getProviderIconSvg(provider) {
+  var svg = __providerIcons[provider];
+  if (svg) return svg;
+  return '<span style="display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:var(--bg-secondary);font-size:11px;font-weight:600">' + provider.charAt(0).toUpperCase() + '</span>';
+}
+
+function getProviderLabel(provider) {
+  var labels = { passkey: "Passkey", google: "Google", github: "GitHub", apple: "Apple", twitter: "Twitter", wallet: "DID Wallet", "did-connect": "DID Wallet", email: "Email" };
+  return labels[provider] || (provider.charAt(0).toUpperCase() + provider.slice(1));
+}
+
+function connectOAuth(provider) {
+  var returnUrl = encodeURIComponent(window.location.href);
+  var url = window.__BASE_PATH + "/../oauth/" + provider + "/login?returnUrl=" + returnUrl;
+  var redirectUri = location.origin + "/.well-known/service/oauth/callback/" + provider;
+  var w = 500, h = 600;
+  var left = (screen.width - w) / 2, top = (screen.height - h) / 2;
+  var popup = window.open(url, "oauth_bind", "width=" + w + ",height=" + h + ",left=" + left + ",top=" + top);
+  if (!popup) {
+    showToast("Popup blocked — please allow popups and try again", "error");
+    return;
+  }
+
+  // Listen for postMessage from OAuth callback page
+  function onMessage(event) {
+    if (!event.data || event.data.type !== "authorization_response") return;
+    window.removeEventListener("message", onMessage);
+    clearInterval(closeTimer);
+
+    var resp = event.data.response;
+    if (!resp || !resp.code) {
+      showToast("OAuth failed — no authorization code received", "error");
+      try { popup.close(); } catch(e) {}
+      return;
+    }
+
+    // Call bind API with the authorization code
+    api("POST", "/../oauth/bind", {
+      provider: provider,
+      code: resp.code,
+      redirectUri: redirectUri,
+    }).then(function(data) {
+      if (data.ok) {
+        showToast(__t("profile.accountConnected"), "success");
+        loadConnectedAccounts();
+      }
+    }).catch(function() {}).finally(function() {
+      try { popup.close(); } catch(e) {}
+    });
+  }
+  window.addEventListener("message", onMessage);
+
+  // Fallback: if popup closes without postMessage (COOP / manual close)
+  var closeTimer = setInterval(function() {
+    if (popup.closed) {
+      clearInterval(closeTimer);
+      window.removeEventListener("message", onMessage);
+      // Reload in case server-side exchange fallback was used
+      loadConnectedAccounts();
+    }
+  }, 500);
+}
+
+async function unbindOAuth(provider) {
+  var ok = await confirmDialog({
+    title: __t("profile.removeConfirmTitle"),
+    message: __t("profile.removeConfirmMsg"),
+    confirmLabel: __t("profile.remove"),
+  });
+  if (!ok) return;
+  var data = await api("POST", "/../oauth/unbind", { provider: provider });
+  if (data.ok) {
+    showToast(__t("profile.accountRemoved"), "success");
+    loadConnectedAccounts();
+  }
+}
+
+async function addPasskey() {
+  try {
+    // 1. Get registration options. The server flattens the WebAuthn options to
+    // the top level (challenge/user/rp alongside challengeId), matching the
+    // login flow; tolerate a nested { registration } shape too.
+    var opts = await api("POST", "/../passkey/connect/register", {});
+    var publicKey = opts.registration || opts;
+    if (!opts.challengeId || !publicKey || !publicKey.challenge) {
+      showToast("Failed to get registration options", "error");
+      return;
+    }
+
+    // 2. Create credential via WebAuthn
+    // Decode challenge from base64url
+    publicKey.challenge = base64urlToBuffer(publicKey.challenge);
+    publicKey.user.id = base64urlToBuffer(publicKey.user.id);
+    if (publicKey.excludeCredentials) {
+      for (var i = 0; i < publicKey.excludeCredentials.length; i++) {
+        publicKey.excludeCredentials[i].id = base64urlToBuffer(publicKey.excludeCredentials[i].id);
+      }
+    }
+
+    var credential = await navigator.credentials.create({ publicKey: publicKey });
+    if (!credential) return;
+
+    // 3. Serialize credential for server
+    var response = credential.response;
+    var credentialData = {
+      id: credential.id,
+      rawId: bufferToBase64url(credential.rawId),
+      type: credential.type,
+      response: {
+        attestationObject: bufferToBase64url(response.attestationObject),
+        clientDataJSON: bufferToBase64url(response.clientDataJSON),
+        transports: response.getTransports ? response.getTransports() : [],
+      },
+    };
+
+    // 4. Verify with server
+    var result = await api("POST", "/../passkey/connect/verify", {
+      challengeId: opts.challengeId,
+      credential: credentialData,
+    });
+
+    if (result.ok) {
+      showToast(__t("profile.passkeyAdded"), "success");
+      loadConnectedAccounts();
+      loadProfile(); // refresh passkey count
+    }
+  } catch (e) {
+    if (e.name !== "NotAllowedError") {
+      showToast(e.message || "Failed to add passkey", "error");
+    }
+  }
+}
+
+async function removePasskey(passkeyDid) {
+  var ok = await confirmDialog({
+    title: __t("profile.removeConfirmTitle"),
+    message: __t("profile.removePasskeyConfirmMsg"),
+    confirmLabel: __t("profile.remove"),
+  });
+  if (!ok) return;
+  var data = await api("POST", "/../passkey/disconnect", { did: passkeyDid });
+  if (data.ok) {
+    showToast(__t("profile.passkeyRemoved"), "success");
+    loadConnectedAccounts();
+    loadProfile(); // refresh passkey count
+  }
+}
+
+async function openRenamePasskeyDialog(passkeyDid, currentName) {
+  var result = await promptDialog({
+    title: __t("profile.renamePasskeyTitle"),
+    message: __t("profile.passkeyNameLabel"),
+    placeholder: __t("profile.passkeyNamePlaceholder"),
+    defaultValue: currentName || "",
+    confirmLabel: __t("common.save"),
+  });
+  if (result === null || result === undefined) return;
+  var name = result.trim();
+  if (!name) return;
+  var data = await api("POST", "/../passkey/rename", { did: passkeyDid, name: name });
+  if (data.ok) {
+    showToast(__t("profile.passkeyRenamed"), "success");
+    loadConnectedAccounts();
+  }
+}
+
+// ─── DID Wallet open helpers (mirrors LoginPage.openInWallet) ─────────
+var __WEB_WALLET_URL = "https://web.abtwallet.io/";
+
+function __isMobile() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+
+function __getWalletExtension() {
+  return window.ABT_DEV || window.ABT || null;
+}
+
+/**
+ * Open the DID auth URL in the wallet — platform-aware:
+ *   Mobile   → navigate to abt:// deep link
+ *   Extension → call extension.open({ action:'login', url, appInfo, memberAppInfo })
+ *   Desktop  → open web wallet popup
+ *
+ * action must be "login" — the extension only recognises "login", not "bind".
+ * The bind vs login distinction lives in the URL path (/bind/auth vs /login/auth).
+ */
+function __openInWallet(url, appInfo, memberAppInfo) {
+  var extension = __getWalletExtension();
+  if (__isMobile()) {
+    window.location.href = url.replace(/^https?:\/\//, "abt://");
+  } else if (extension && typeof extension.open === "function") {
+    extension.open({
+      action: "login",
+      locale: document.documentElement.lang || "en",
+      url: encodeURIComponent(url),
+      appInfo: appInfo || {},
+      memberAppInfo: memberAppInfo || {},
+    });
+  } else {
+    var walletUrl = __WEB_WALLET_URL + "?action=requestAuth&url=" + encodeURIComponent(url);
+    var w = 414, h = 736;
+    var left = window.screenX + window.innerWidth - w, top = window.screenY;
+    window.open(walletUrl, "did-wallet:bind", "left=" + left + ",top=" + top + ",width=" + w + ",height=" + h + ",resizable,scrollbars=yes,status=1,popup");
+  }
+}
+
+// ─── DID Wallet Connect (bind) ──────────────────────────────────────
+async function connectWallet() {
+  // 1. Create bind session
+  var tokenData;
+  try {
+    tokenData = await api("GET", "/../did/bind/token?provider=wallet");
+  } catch(e) {
+    showToast("Failed to create bind session", "error");
+    return;
+  }
+  if (!tokenData || !tokenData.token) {
+    showToast("Failed to create bind session", "error");
+    return;
+  }
+
+  var token = tokenData.token;
+  var connectUrl = tokenData.url || "";
+  var appInfo = tokenData.appInfo || {};
+  var memberAppInfo = tokenData.memberAppInfo || {};
+
+  // 2. Build/reset dialog — mirrors login-page QR view structure
+  var d = document.getElementById("wallet-bind-dialog");
+  if (!d) {
+    d = document.createElement("dialog");
+    d.id = "wallet-bind-dialog";
+    document.body.appendChild(d);
+  }
+  // Re-render dialog content each time (fresh token / fresh state)
+  d.innerHTML = '<div class="dialog-content" style="text-align:center;">'
+    + '<h3 style="margin-bottom:4px;">' + __t("profile.connectWallet") + '</h3>'
+    + '<div id="wallet-bind-qr" class="wallet-qr-view">'
+    + '<div class="wallet-qr-placeholder"><span class="wallet-qr-spinner"></span></div>'
+    + '</div>'
+    + '<button id="wallet-bind-open" class="btn btn-secondary wallet-deep-link-btn" disabled>'
+    + getProviderIconSvg("did-connect") + ' ' + __t("profile.openInWallet")
+    + '</button>'
+    + '<p id="wallet-bind-status" class="wallet-bind-status">' + __t("profile.scanWithWallet") + '</p>'
+    + '</div>'
+    + '<div class="dialog-actions">'
+    + '<button class="btn btn-secondary" id="wallet-bind-cancel">' + __t("common.cancel") + '</button>'
+    + '</div>';
+
+  var statusEl = document.getElementById("wallet-bind-status");
+  var qrEl = document.getElementById("wallet-bind-qr");
+  var openBtn = document.getElementById("wallet-bind-open");
+  var cancelBtn = document.getElementById("wallet-bind-cancel");
+
+  // Render QR code (replaces placeholder spinner)
+  if (connectUrl && typeof __QRBundle !== "undefined" && __QRBundle.renderQR) {
+    __QRBundle.renderQR(qrEl, connectUrl, 212);
+  }
+
+  // Enable open button once URL is ready
+  openBtn.disabled = false;
+  openBtn.onclick = function() { __openInWallet(connectUrl, appInfo, memberAppInfo); };
+
+  var pollTimer = null;
+  var pollCount = 0;
+  var maxPolls = 120; // 2 minutes at 1.5s interval
+
+  function cleanup() {
+    if (pollTimer) clearInterval(pollTimer);
+    pollTimer = null;
+    d.close();
+  }
+
+  cancelBtn.onclick = function() { cleanup(); };
+  d.onclose = function() { if (pollTimer) clearInterval(pollTimer); };
+
+  d.showModal();
+
+  // Helper: collapse QR area and show terminal status
+  function showTerminalStatus(msg, isError) {
+    qrEl.style.display = "none";
+    openBtn.style.display = "none";
+    statusEl.className = "wallet-bind-status" + (isError ? " wallet-bind-error" : "");
+    statusEl.textContent = msg;
+  }
+
+  // 3. Poll for status
+  pollTimer = setInterval(async function() {
+    pollCount++;
+    if (pollCount > maxPolls) {
+      clearInterval(pollTimer);
+      pollTimer = null;
+      showTerminalStatus(__t("profile.connectTimeout"), true);
+      return;
+    }
+    try {
+      var status = await api("GET", "/../did/bind/status?_t_=" + encodeURIComponent(token));
+      if (status.status === "scanned") {
+        statusEl.textContent = __t("profile.confirmInWallet");
+      } else if (status.status === "succeed") {
+        clearInterval(pollTimer);
+        pollTimer = null;
+        // Collapse QR; show "Binding..." while we call bind-complete
+        qrEl.style.display = "none";
+        openBtn.style.display = "none";
+        statusEl.textContent = __t("profile.binding");
+        // 4. Call bind-complete
+        var result = await api("POST", "/../did/connect/bind-complete", { token: token });
+        if (result.ok) {
+          cleanup();
+          showToast(__t("profile.walletConnected"), "success");
+          loadConnectedAccounts();
+        } else {
+          showTerminalStatus(result.error || "Bind failed", true);
+        }
+      } else if (status.status === "error") {
+        clearInterval(pollTimer);
+        pollTimer = null;
+        showTerminalStatus(status.error || "Error", true);
+      }
+    } catch(e) { /* ignore poll errors */ }
+  }, 1500);
+}
+
+// base64url helpers for WebAuthn
+function base64urlToBuffer(str) {
+  str = str.replace(/-/g, "+").replace(/_/g, "/");
+  while (str.length % 4) str += "=";
+  var bin = atob(str);
+  var buf = new Uint8Array(bin.length);
+  for (var i = 0; i < bin.length; i++) buf[i] = bin.charCodeAt(i);
+  return buf.buffer;
+}
+
+function bufferToBase64url(buf) {
+  var bytes = new Uint8Array(buf);
+  var str = "";
+  for (var i = 0; i < bytes.length; i++) str += String.fromCharCode(bytes[i]);
+  return btoa(str).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+
+;
+
+var akPage = 1;
+var akPageSize = 20;
+var akSearchTimer = null;
+
+function debounceAkSearch() {
+  clearTimeout(akSearchTimer);
+  akSearchTimer = setTimeout(function() { loadAccessKeys(1); }, 300);
+}
+
+async function loadAccessKeys(page) {
+  akPage = page || 1;
+  var search = document.getElementById("ak-search").value.trim();
+  var qs = "?page=" + akPage + "&pageSize=" + akPageSize;
+  if (search) qs += "&search=" + encodeURIComponent(search);
+  document.getElementById("ak-table-wrap").innerHTML = skeletonTable(7, 5);
+  document.getElementById("ak-pagination").innerHTML = "";
+  var data = await apiRaw("GET", "/.well-known/service/api/access-keys" + qs);
+  if (!data || data.error) {
+    document.getElementById("ak-table-wrap").innerHTML = '<div class="empty-state"><div class="empty-state-title">' + __t("accessKeys.loadFailed") + '</div></div>';
+    return;
+  }
+  renderAccessKeys(data.keys, { total: data.total, page: data.page, pageSize: data.pageSize });
+}
+
+function renderAccessKeys(keys, paging) {
+  var wrap = document.getElementById("ak-table-wrap");
+  if (!keys || keys.length === 0) {
+    wrap.innerHTML = '<div class="empty-state"><div class="empty-state-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg></div><div class="empty-state-title">' + __t("accessKeys.noKeys") + '</div><div class="empty-state-desc">' + __t("accessKeys.noKeysHint") + '</div></div>';
+    document.getElementById("ak-pagination").innerHTML = "";
+    return;
+  }
+
+  var html = '<table class="table"><thead><tr><th>' + __t("accessKeys.col.keyId") + '</th><th>' + __t("accessKeys.col.role") + '</th><th class="col-hide-sm">' + __t("accessKeys.col.remark") + '</th><th class="col-hide-md">' + __t("accessKeys.col.createdBy") + '</th><th>' + __t("accessKeys.col.expires") + '</th><th class="col-hide-md">' + __t("accessKeys.col.lastUsed") + '</th><th>' + __t("common.actions") + '</th></tr></thead><tbody>';
+  keys.forEach(function(k) {
+    var keyIdHtml = '<did-address did="' + escapeHtml(k.accessKeyId) + '" compact></did-address>';
+    var roleBadge = '<span class="badge badge-' + k.role + '">' + __t("common." + k.role) + '</span>';
+    var remark = k.remark ? escapeHtml(k.remark.length > 40 ? k.remark.slice(0, 40) + "..." : k.remark) : '<span style="color:var(--text-secondary)">—</span>';
+    var creator = k.createdByName
+      ? escapeHtml(k.createdByName)
+      : '<did-address did="' + escapeHtml(k.createdBy) + '" compact></did-address>';
+    var expiry = k.expireAt ? (new Date(k.expireAt) < new Date() ? '<span style="color:var(--error)">' + __t("common.expired") + '</span>' : relativeTime(k.expireAt)) : __t("common.never");
+    var lastUsed = k.lastUsedAt ? relativeTime(k.lastUsedAt) : __t("common.never");
+    var deleteLabel = k.remark ? escapeHtml(k.remark) : truncateDid(k.accessKeyId);
+
+    html += '<tr>';
+    html += '<td><code style="font-size:12px">' + keyIdHtml + '</code></td>';
+    html += '<td>' + roleBadge + '</td>';
+    html += '<td class="col-hide-sm">' + remark + '</td>';
+    html += '<td class="col-hide-md">' + creator + '</td>';
+    html += '<td>' + expiry + '</td>';
+    html += '<td class="col-hide-md">' + lastUsed + '</td>';
+    html += '<td class="action-cell"><button class="action-trigger" onclick="event.stopPropagation();toggleActionMenu(this)">⋯</button><div class="action-menu"><button class="action-menu-item" onclick="event.stopPropagation();openEditAkDialog(\''+k.accessKeyId+'\')">' + __t("common.edit") + '</button><div class="action-menu-sep"></div><button class="action-menu-item danger" onclick="event.stopPropagation();confirmDeleteAk(\''+k.accessKeyId+'\',\''+escapeHtml(deleteLabel)+'\')">' + __t("common.delete") + '</button></div></td>';
+    html += '</tr>';
+  });
+  html += '</tbody></table>';
+  wrap.innerHTML = html;
+
+  renderPagination("ak-pagination", paging, loadAccessKeys);
+}
+
+function openCreateAkDialog() {
+  var callerRole = __caller.role;
+  var roleOptions = '<option value="guest">Guest</option>';
+  if (callerRole === "member" || callerRole === "admin" || callerRole === "owner") roleOptions += '<option value="member"' + (callerRole === "member" ? ' selected' : '') + '>Member</option>';
+  if (callerRole === "admin" || callerRole === "owner") roleOptions += '<option value="admin"' + (callerRole === "admin" ? ' selected' : '') + '>Admin</option>';
+  if (callerRole === "owner") roleOptions += '<option value="owner">Owner</option>';
+
+  var expiryOptions = '<option value="">' + __t("accessKeys.expirations.never") + '</option><option value="7d">' + __t("accessKeys.expirations.days7") + '</option><option value="30d">' + __t("accessKeys.expirations.days30") + '</option><option value="90d">' + __t("accessKeys.expirations.days90") + '</option><option value="custom">' + __t("accessKeys.expirations.custom") + '</option>';
+
+  var html = '<div class="form-group"><label class="form-label">' + __t("accessKeys.role") + '</label><select class="select" id="ak-create-role">' + roleOptions + '</select></div>';
+  html += '<div class="form-group"><label class="form-label">' + __t("accessKeys.remark") + '</label><input type="text" class="input" id="ak-create-remark" placeholder="' + __t("accessKeys.remarkPlaceholder") + '" maxlength="200" /></div>';
+  html += '<div class="form-group"><label class="form-label">' + __t("accessKeys.expiration") + '</label><select class="select" id="ak-create-expiry" onchange="toggleAkCustomExpiry()">' + expiryOptions + '</select></div>';
+  html += '<div class="form-group hidden" id="ak-custom-expiry-wrap"><label class="form-label">' + __t("accessKeys.customDate") + '</label><input type="datetime-local" class="input" id="ak-create-custom-expiry" /></div>';
+
+  openDialog(__t("accessKeys.createTitle"), html, __t("common.save"), async function() {
+    var role = document.getElementById("ak-create-role").value;
+    var remark = document.getElementById("ak-create-remark").value;
+    var expirySelect = document.getElementById("ak-create-expiry").value;
+    var expireAt = null;
+
+    if (expirySelect === "custom") {
+      var customDate = document.getElementById("ak-create-custom-expiry").value;
+      if (!customDate) { showToast(__t("accessKeys.selectExpDate"), "error"); return; }
+      expireAt = new Date(customDate).toISOString();
+    } else if (expirySelect) {
+      var days = parseInt(expirySelect);
+      expireAt = new Date(Date.now() + days * 86400000).toISOString();
+    }
+
+    var result = await apiRaw("POST", "/.well-known/service/api/access-keys", { role: role, remark: remark, expireAt: expireAt });
+    if (!result || result.error) {
+      showToast(result ? result.error : __t("accessKeys.createFailed"), "error");
+      return;
+    }
+
+    closeDialog();
+    showSecretDialog(result.accessKeySecret);
+    loadAccessKeys(1);
+  });
+}
+
+function toggleAkCustomExpiry() {
+  var sel = document.getElementById("ak-create-expiry").value;
+  var wrap = document.getElementById("ak-custom-expiry-wrap");
+  if (sel === "custom") wrap.classList.remove("hidden");
+  else wrap.classList.add("hidden");
+}
+
+function showSecretDialog(secret) {
+  var html = '<div style="margin-bottom:12px;color:var(--error);font-weight:500">' + __t("accessKeys.secretWarning") + '</div>';
+  var copyIconSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+  var copyBtnStyle = 'position:absolute;top:4px;right:4px;width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-base);border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--text-secondary);transition:color 0.15s,border-color 0.15s';
+  html += '<div style="position:relative"><code id="ak-secret-display" style="display:block;padding:12px 40px 12px 12px;background:var(--bg-base);border:1px solid var(--border);border-radius:6px;font-size:13px;word-break:break-all;user-select:all;overflow-wrap:anywhere">' + escapeHtml(secret) + '</code>';
+  html += '<button id="ak-copy-btn" style="' + copyBtnStyle + '" onclick="copyAkSecret()" title="' + __t("common.copy") + '">' + copyIconSvg + '</button></div>';
+  var curlCmd = 'curl -H "Authorization: Bearer ' + secret + '" ' + location.origin + '/.well-known/service/api/did/session';
+  html += '<div style="margin-top:12px;font-size:13px;color:var(--text-secondary)"><strong>' + __t("accessKeys.usage") + '</strong></div>';
+  html += '<div style="position:relative;margin-top:6px"><code id="ak-curl-display" style="display:block;padding:12px 40px 12px 12px;background:var(--bg-base);border:1px solid var(--border);border-radius:6px;font-size:12px;word-break:break-all;overflow-wrap:anywhere;user-select:all">' + escapeHtml(curlCmd) + '</code>';
+  html += '<button id="ak-curl-copy-btn" style="' + copyBtnStyle + '" onclick="copyAkCurl()" title="' + __t("common.copy") + '">' + copyIconSvg + '</button></div>';
+
+  openDialog(__t("accessKeys.secretTitle"), html, __t("accessKeys.done"), function() {
+    document.getElementById("ak-secret-display").textContent = "";
+    closeDialog();
+  });
+}
+
+function copyAkCurl() {
+  var text = document.getElementById("ak-curl-display").textContent;
+  var btn = document.getElementById("ak-curl-copy-btn");
+  var origHtml = btn.innerHTML;
+  function onCopied() {
+    btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>';
+    btn.style.color = "var(--green)";
+    setTimeout(function() { btn.innerHTML = origHtml; btn.style.color = ""; }, 2000);
+  }
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(onCopied).catch(function() {
+      fallbackCopy(text);
+      onCopied();
+    });
+  } else {
+    fallbackCopy(text);
+    onCopied();
+  }
+}
+
+function copyAkSecret() {
+  var text = document.getElementById("ak-secret-display").textContent;
+  var btn = document.getElementById("ak-copy-btn");
+  var origHtml = btn.innerHTML;
+  function onCopied() {
+    btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>';
+    btn.style.color = "var(--green)";
+    setTimeout(function() { btn.innerHTML = origHtml; btn.style.color = ""; }, 2000);
+  }
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    navigator.clipboard.writeText(text).then(onCopied).catch(function() {
+      fallbackCopy(text);
+      onCopied();
+    });
+  } else {
+    fallbackCopy(text);
+    onCopied();
+  }
+}
+
+async function openEditAkDialog(accessKeyId) {
+  var data = await apiRaw("GET", "/.well-known/service/api/access-keys/" + encodeURIComponent(accessKeyId));
+  if (!data || data.error) { showToast(__t("accessKeys.loadKeyFailed"), "error"); return; }
+
+  var html = '<div class="form-group"><label class="form-label">' + __t("accessKeys.col.keyId") + '</label><code style="font-size:12px">' + escapeHtml(data.accessKeyId) + '</code></div>';
+  html += '<div class="form-group"><label class="form-label">' + __t("accessKeys.role") + '</label><span class="badge badge-' + data.role + '">' + __t("common." + data.role) + '</span></div>';
+  html += '<div class="form-group"><label class="form-label">' + __t("accessKeys.remark") + '</label><input type="text" class="input" id="ak-edit-remark" value="' + escapeHtml(data.remark || "") + '" maxlength="200" /></div>';
+  html += '<div class="form-group"><label class="form-label">' + __t("accessKeys.expiration") + '</label><input type="datetime-local" class="input" id="ak-edit-expiry" value="' + (data.expireAt ? data.expireAt.slice(0,16) : "") + '" /> <label style="margin-top:4px;display:block;font-size:13px"><input type="checkbox" id="ak-edit-no-expiry"' + (data.expireAt ? "" : " checked") + ' onchange="toggleAkEditExpiry()" /> ' + __t("accessKeys.neverExpires") + '</label></div>';
+
+  openDialog(__t("accessKeys.editTitle"), html, __t("common.save"), async function() {
+    var remark = document.getElementById("ak-edit-remark").value;
+    var noExpiry = document.getElementById("ak-edit-no-expiry").checked;
+    var expireAt = noExpiry ? null : (document.getElementById("ak-edit-expiry").value ? new Date(document.getElementById("ak-edit-expiry").value).toISOString() : undefined);
+
+    var body = { remark: remark };
+    if (expireAt !== undefined) body.expireAt = expireAt;
+
+    var result = await apiRaw("PUT", "/.well-known/service/api/access-keys/" + encodeURIComponent(accessKeyId), body);
+    if (!result || result.error) {
+      showToast(result ? result.error : __t("accessKeys.updateFailed"), "error");
+      return;
+    }
+    closeDialog();
+    showToast(__t("accessKeys.keyUpdated"), "success");
+    loadAccessKeys(akPage);
+  });
+}
+
+function toggleAkEditExpiry() {
+  var noExpiry = document.getElementById("ak-edit-no-expiry").checked;
+  document.getElementById("ak-edit-expiry").disabled = noExpiry;
+}
+
+function confirmDeleteAk(accessKeyId, label) {
+  openDialog(__t("accessKeys.deleteTitle"), '<p>' + __t("accessKeys.deleteMsg", { label: escapeHtml(label) }) + '</p><p style="color:var(--error)">' + __t("accessKeys.deleteWarning") + '</p>', __t("common.delete"), async function() {
+    var result = await apiRaw("DELETE", "/.well-known/service/api/access-keys/" + encodeURIComponent(accessKeyId));
+    if (result && result.error) {
+      showToast(result.error, "error");
+      return;
+    }
+    closeDialog();
+    showToast(__t("accessKeys.keyDeleted"), "success");
+    loadAccessKeys(akPage);
+  });
+}
+
+// Direct API call (bypasses team handler's /team prefix)
+async function apiRaw(method, path, body) {
+  try {
+    var opts = { method: method, headers: { "Accept": "application/json" } };
+    if (body !== undefined) {
+      opts.headers["Content-Type"] = "application/json";
+      opts.body = JSON.stringify(body);
+    }
+    var res = await fetch(path, opts);
+    if (res.status === 204) return {};
+    return await res.json();
+  } catch(e) {
+    return null;
+  }
+}
+
+registerTab("access-keys", function() { loadAccessKeys(1); });