@authrim/setup 0.1.141 → 0.1.142

package/dist/web/ui.js

@@ -2034,6 +2034,7 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
         <label for="env"><span data-i18n="web.form.envName">Environment Name</span> <span style="color: var(--error);">*</span></label>
         <input type="text" id="env" placeholder="e.g., prod, staging, dev" data-i18n-placeholder="web.form.envNamePlaceholder" required>
         <small style="color: var(--text-muted)" data-i18n="web.form.envNameHint">Lowercase letters, numbers, and hyphens only</small>
+        <span id="env-error" style="display: none; color: var(--error); font-size: 0.85rem;" data-i18n="web.form.envNameError">Only lowercase letters, numbers, and hyphens are allowed (must start with a letter)</span>
       </div>
 
       <!-- 3. Domain Configuration -->
@@ -2045,6 +2046,16 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
           <label for="base-domain" data-i18n="web.form.baseDomain">Base Domain (API Domain)</label>
           <input type="text" id="base-domain" placeholder="oidc.example.com" data-i18n-placeholder="web.form.baseDomainPlaceholder">
           <small style="color: var(--text-muted)" data-i18n="web.form.baseDomainHint">Custom domain for Authrim. Leave empty to use workers.dev</small>
+          <div id="domain-check-row" style="display: none; margin-top: 0.5rem; align-items: center; gap: 0.5rem;">
+            <button type="button" id="check-domain-btn" class="btn btn-secondary" style="padding: 0.3rem 0.75rem; font-size: 0.85rem;" data-i18n="domain.checkZoneButton">
+              Check Zone
+            </button>
+            <span id="domain-check-status" style="font-size: 0.85rem;"></span>
+          </div>
+          <label class="checkbox-item" id="custom-domain-binding-row" style="display: none; align-items: center; gap: 0.5rem; margin-top: 0.5rem;">
+            <input type="checkbox" id="custom-domain-binding" checked>
+            <span data-i18n="domain.configureBinding">Configure custom domain binding for Workers</span>
+          </label>
           <label class="checkbox-item" id="naked-domain-label" style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;">
             <input type="checkbox" id="naked-domain">
             <span data-i18n="web.form.nakedDomain">Exclude tenant name from URL</span>
@@ -2061,8 +2072,8 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
         <div id="tenant-fields">
           <div class="form-group" style="margin-bottom: 0.5rem;">
             <label for="tenant-name" data-i18n="web.form.tenantId">Default Tenant ID</label>
-            <input type="text" id="tenant-name" placeholder="default" value="default" data-i18n-placeholder="web.form.tenantIdPlaceholder">
-            <small style="color: var(--text-muted)" data-i18n="web.form.tenantIdHint">First tenant identifier (lowercase, no spaces)</small>
+            <input type="text" id="tenant-name" placeholder="default" value="default" disabled readonly data-i18n-placeholder="web.form.tenantIdPlaceholder">
+            <small style="color: var(--text-muted)" data-i18n="web.form.tenantIdHint">First tenant identifier (lowercase, no spaces). Leave empty to use "default".</small>
             <small id="tenant-workers-note" style="color: #6b7280; display: none;" data-i18n="web.form.tenantIdWorkerNote">
               (Tenant ID is used internally. URL subdomain requires custom domain.)
             </small>
@@ -2071,9 +2082,25 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
 
         <div class="form-group" style="margin-bottom: 0;">
           <label for="tenant-display" data-i18n="web.form.tenantDisplay">Tenant Display Name</label>
-          <input type="text" id="tenant-display" placeholder="My Company" value="Default Tenant" data-i18n-placeholder="web.form.tenantDisplayPlaceholder">
+          <input type="text" id="tenant-display" placeholder="My Company" value="" data-i18n-placeholder="web.form.tenantDisplayPlaceholder">
           <small style="color: var(--text-muted)" data-i18n="web.form.tenantDisplayHint">Name shown on login page and consent screen</small>
         </div>
+
+        <!-- Primary Tenant (for naked domain) -->
+        <div class="form-group" id="primary-tenant-row" style="margin-bottom: 0.75rem;">
+          <label for="primary-tenant">Primary Tenant (for naked domain)</label>
+          <input type="text" id="primary-tenant" placeholder="Leave empty to use default tenant">
+          <small style="color: var(--text-muted)">Tenant ID to use when accessing the naked domain (e.g., example.com). Leave empty to use the default tenant above.</small>
+        </div>
+
+        <div class="form-group" style="margin-bottom: 0;">
+          <label for="user-id-format" data-i18n="web.form.userIdFormat">User ID Format</label>
+          <select id="user-id-format">
+            <option value="nanoid" selected data-i18n="web.form.userIdNanoid">NanoID (recommended)</option>
+            <option value="uuid" data-i18n="web.form.userIdUuid">UUID v4</option>
+          </select>
+          <small style="color: var(--text-muted)" data-i18n="web.form.userIdFormatHint">Format for generating user IDs. Cannot be changed after users are created.</small>
+        </div>
       </div>
 
       <!-- 3.2 UI Domains -->
@@ -2539,6 +2566,15 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
         </div>
       </div>
 
+      <div class="resource-section" style="margin-bottom: 1.5rem;">
+        <div class="resource-section-title">
+          🔗 URLs
+        </div>
+        <div id="detail-url-list" class="resource-list">
+          <div style="color: var(--text-muted); padding: 0.75rem 0;" data-i18n="web.status.loading">Loading...</div>
+        </div>
+      </div>
+
       <div id="detail-resources">
         <!-- Workers -->
         <div class="resource-section">
@@ -3073,7 +3109,7 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
       return div;
     }
 
-    function createUrlItem(label, url) {
+    function createUrlItem(label, text, href) {
       const div = document.createElement('div');
       div.className = 'url-item';
 
@@ -3081,14 +3117,23 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
       labelSpan.className = 'url-label';
       labelSpan.textContent = label;
 
-      const link = document.createElement('a');
-      link.href = url;
-      link.target = '_blank';
-      link.className = 'url-value';
-      link.textContent = url;
+      let valueEl;
+      if (href) {
+        const link = document.createElement('a');
+        link.href = href;
+        link.target = '_blank';
+        link.className = 'url-value';
+        link.textContent = text;
+        valueEl = link;
+      } else {
+        const span = document.createElement('span');
+        span.className = 'url-value';
+        span.textContent = text;
+        valueEl = span;
+      }
 
       div.appendChild(labelSpan);
-      div.appendChild(link);
+      div.appendChild(valueEl);
       return div;
     }
 
@@ -3376,14 +3421,26 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
         components,
       };
 
+      // Helper to remove https:// prefix for display in input fields
+      const stripProtocol = (url) => {
+        if (!url) return '';
+        return url.replace(/^https?:[/][/]/, '');
+      };
+
       // Set form values
       document.getElementById('env').value = config.env;
-      document.getElementById('base-domain').value = config.tenant?.baseDomain || config.apiDomain || '';
-      document.getElementById('login-domain').value = config.loginUiDomain || '';
-      document.getElementById('admin-domain').value = config.adminUiDomain || '';
+      document.getElementById('base-domain').value = stripProtocol(config.tenant?.baseDomain || config.apiDomain);
+      document.getElementById('login-domain').value = stripProtocol(config.loginUiDomain);
+      document.getElementById('admin-domain').value = stripProtocol(config.adminUiDomain);
       document.getElementById('tenant-name').value = config.tenant?.name || 'default';
       document.getElementById('tenant-display').value = config.tenant?.displayName || 'Default Tenant';
       document.getElementById('naked-domain').checked = config.tenant?.nakedDomain || false;
+      if (document.getElementById('user-id-format')) {
+        document.getElementById('user-id-format').value = config.tenant?.userIdFormat || 'nanoid';
+      }
+      if (document.getElementById('primary-tenant')) {
+        document.getElementById('primary-tenant').value = config.tenant?.primaryTenant || '';
+      }
 
       // Set component checkboxes
       if (document.getElementById('comp-login-ui')) {
@@ -3402,6 +3459,14 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
         document.getElementById('comp-vc').checked = components.vc === true;
       }
 
+      // Restore domain check UI if custom domain is set
+      const loadedBaseDomain = document.getElementById('base-domain').value.trim();
+      if (loadedBaseDomain && /^[a-z0-9][a-z0-9.-]*\\.[a-z]{2,}$/i.test(loadedBaseDomain)) {
+        document.getElementById('domain-check-row').style.display = 'flex';
+        // Auto-trigger zone check for loaded domain
+        setTimeout(() => document.getElementById('check-domain-btn').click(), 300);
+      }
+
       // Trigger env input to update preview/default labels
       document.getElementById('env').dispatchEvent(new Event('input'));
 
@@ -3420,7 +3485,7 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
       const env = document.getElementById('env').value.trim().toLowerCase().replace(/[^a-z0-9-]/g, '') || '{env}';
       const baseDomain = document.getElementById('base-domain').value.trim();
       const nakedDomain = document.getElementById('naked-domain').checked;
-      const tenantName = document.getElementById('tenant-name').value.trim() || 'default';
+      const tenantName = document.getElementById('tenant-name').value.trim();
       const loginDomain = document.getElementById('login-domain').value.trim();
       const adminDomain = document.getElementById('admin-domain').value.trim();
 
@@ -3457,7 +3522,9 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
         if (nakedDomain) {
           document.getElementById('preview-issuer').textContent = 'https://' + baseDomain;
         } else {
-          document.getElementById('preview-issuer').textContent = 'https://' + tenantName + '.' + baseDomain;
+          // Multi-tenant: show placeholder or actual tenant name
+          const tenantDisplay = tenantName || '{tenant}';
+          document.getElementById('preview-issuer').textContent = 'https://' + tenantDisplay + '.' + baseDomain;
         }
       } else {
         // Workers.dev - no tenant prefix (wildcard subdomains not supported)
@@ -3504,6 +3571,32 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
       }
     });
 
+    // Validate environment name on blur
+    const envInput = document.getElementById('env');
+    const envError = document.getElementById('env-error');
+    function validateEnvName(value) {
+      return /^[a-z][a-z0-9-]*$/.test(value);
+    }
+    envInput.addEventListener('blur', () => {
+      const value = envInput.value.trim();
+      if (value && !validateEnvName(value)) {
+        envInput.style.borderColor = 'var(--error)';
+        if (envError) envError.style.display = 'block';
+      } else {
+        envInput.style.borderColor = '';
+        if (envError) envError.style.display = 'none';
+      }
+    });
+    envInput.addEventListener('input', () => {
+      if (envInput.style.borderColor) {
+        const value = envInput.value.trim();
+        if (!value || validateEnvName(value)) {
+          envInput.style.borderColor = '';
+          if (envError) envError.style.display = 'none';
+        }
+      }
+    });
+
     // Update UI based on base domain presence
     function updateBaseDomainUI() {
       const baseDomain = document.getElementById('base-domain').value.trim();
@@ -3513,6 +3606,9 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
       const workersDevNote = document.getElementById('workers-dev-note');
       const tenantWorkersNote = document.getElementById('tenant-workers-note');
       const tenantFields = document.getElementById('tenant-fields');
+      const tenantNameInput = document.getElementById('tenant-name');
+      const primaryTenantRow = document.getElementById('primary-tenant-row');
+      const primaryTenantInput = document.getElementById('primary-tenant');
 
       if (baseDomain) {
         // Custom domain - enable tenant subdomain options
@@ -3521,10 +3617,13 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
         nakedDomainHint.style.display = 'block';
         workersDevNote.style.display = 'none';
         tenantWorkersNote.style.display = 'none';
+        tenantNameInput.disabled = false;
+        tenantNameInput.readOnly = false;
         // Show tenant fields if naked domain is not checked
         if (!nakedDomainCheckbox.checked) {
           tenantFields.style.display = 'block';
         }
+        primaryTenantRow.style.display = nakedDomainCheckbox.checked ? 'block' : 'none';
       } else {
         // Workers.dev - tenant subdomains not supported
         nakedDomainCheckbox.disabled = true;
@@ -3533,7 +3632,12 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
         nakedDomainHint.style.display = 'none';
         workersDevNote.style.display = 'block';
         tenantWorkersNote.style.display = 'block';
-        tenantFields.style.display = 'block'; // Show tenant fields (for internal use)
+        tenantFields.style.display = 'block';
+        tenantNameInput.value = 'default';
+        tenantNameInput.disabled = true;
+        tenantNameInput.readOnly = true;
+        primaryTenantInput.value = '';
+        primaryTenantRow.style.display = 'none';
       }
     }
 
@@ -3541,6 +3645,68 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
     document.getElementById('base-domain').addEventListener('input', () => {
       updateBaseDomainUI();
       updatePreview();
+      // Show/hide domain check row
+      const domainCheckRow = document.getElementById('domain-check-row');
+      const baseDomain = document.getElementById('base-domain').value.trim();
+      if (baseDomain && /^[a-z0-9][a-z0-9.-]*\\.[a-z]{2,}$/i.test(baseDomain)) {
+        domainCheckRow.style.display = 'flex';
+      } else {
+        domainCheckRow.style.display = 'none';
+        document.getElementById('domain-check-status').textContent = '';
+        document.getElementById('custom-domain-binding-row').style.display = 'none';
+      }
+    });
+
+    // Check Domain button handler
+    let domainZoneId = null;
+    document.getElementById('check-domain-btn').addEventListener('click', async () => {
+      const domain = document.getElementById('base-domain').value.trim();
+      if (!domain) return;
+
+      const statusEl = document.getElementById('domain-check-status');
+      const bindingRow = document.getElementById('custom-domain-binding-row');
+      statusEl.textContent = t('domain.checkingZone', { domain });
+      statusEl.style.color = 'var(--text-muted)';
+      domainZoneId = null;
+
+      try {
+        const result = await api('/cloudflare/check-zone', {
+          method: 'POST',
+          body: { domain },
+        });
+
+        if (result.found) {
+          statusEl.textContent = '✓ ' + t('domain.zoneFound', { zone: result.zone.name, status: result.zone.status });
+          statusEl.style.color = 'var(--success, #22c55e)';
+          bindingRow.style.display = 'flex';
+          domainZoneId = result.zone.id;
+        } else {
+          const errorMsg = result.error
+            ? '⚠ ' + t('domain.zoneCheckFailed') + ': ' + result.error
+            : '⚠ ' + t('domain.zoneNotFound', { zone: domain });
+          statusEl.textContent = errorMsg;
+          statusEl.style.color = 'var(--warning, #d97706)';
+          bindingRow.style.display = 'none';
+          domainZoneId = null;
+        }
+      } catch (e) {
+        statusEl.textContent = '⚠ ' + t('domain.zoneCheckFailed');
+        statusEl.style.color = 'var(--warning, #d97706)';
+        bindingRow.style.display = 'none';
+        domainZoneId = null;
+      }
+    });
+
+    // Auto-check domain on blur (debounced)
+    let domainCheckTimer;
+    document.getElementById('base-domain').addEventListener('blur', () => {
+      clearTimeout(domainCheckTimer);
+      domainCheckTimer = setTimeout(() => {
+        const domain = document.getElementById('base-domain').value.trim();
+        if (domain && /^[a-z0-9][a-z0-9.-]*\\.[a-z]{2,}$/i.test(domain)) {
+          document.getElementById('check-domain-btn').click();
+        }
+      }, 500);
     });
 
     // Initial UI state
@@ -3549,12 +3715,15 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
     // Naked domain toggle - show/hide tenant name field and update placeholder
     document.getElementById('naked-domain').addEventListener('change', (e) => {
       const tenantFields = document.getElementById('tenant-fields');
+      const primaryTenantRow = document.getElementById('primary-tenant-row');
       const baseDomainInput = document.getElementById('base-domain');
       if (e.target.checked) {
         tenantFields.style.display = 'none';
+        primaryTenantRow.style.display = 'block';
         baseDomainInput.placeholder = 'example.com';
       } else {
         tenantFields.style.display = 'block';
+        primaryTenantRow.style.display = 'none';
         baseDomainInput.placeholder = 'oidc.example.com';
       }
       updatePreview();
@@ -3597,11 +3766,15 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
 
     document.getElementById('btn-configure').addEventListener('click', async () => {
       // Get and validate environment name
-      let env = document.getElementById('env').value.toLowerCase().replace(/[^a-z0-9-]/g, '');
-      if (!env) {
-        alert('Please enter a valid environment name');
+      const envRaw = document.getElementById('env').value.trim();
+      if (!envRaw || !validateEnvName(envRaw)) {
+        document.getElementById('env').style.borderColor = 'var(--error)';
+        const errEl = document.getElementById('env-error');
+        if (errEl) errEl.style.display = 'block';
+        document.getElementById('env').focus();
         return;
       }
+      const env = envRaw;
 
       // Check if environment already exists
       const configureBtn = document.getElementById('btn-configure');
@@ -3627,26 +3800,32 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
       }
 
       const baseDomain = document.getElementById('base-domain').value.trim();
-      const nakedDomain = document.getElementById('naked-domain').checked;
-      const tenantName = document.getElementById('tenant-name').value.trim() || 'default';
+      const hasCustomApiDomain = !!baseDomain;
+      const nakedDomain = hasCustomApiDomain && document.getElementById('naked-domain').checked;
+      const tenantName = hasCustomApiDomain
+        ? (document.getElementById('tenant-name').value.trim() || 'default')
+        : 'default';
       const tenantDisplayName = document.getElementById('tenant-display').value.trim() || 'Default Tenant';
+      const userIdFormat = document.getElementById('user-id-format').value || 'nanoid';
+      const primaryTenant = hasCustomApiDomain && nakedDomain
+        ? (document.getElementById('primary-tenant').value.trim() || undefined)
+        : undefined;
       const loginDomain = document.getElementById('login-domain').value.trim();
       const adminDomain = document.getElementById('admin-domain').value.trim();
 
-      // API domain = base domain or null (workers.dev fallback)
-      const apiDomain = baseDomain || null;
-
       config = {
         env,
-        apiDomain,
+        apiDomain: baseDomain || null,
         loginUiDomain: loginDomain || null,
         adminUiDomain: adminDomain || null,
         tenant: {
-          name: nakedDomain ? null : tenantName,  // null for naked domain
+          name: tenantName,
           displayName: tenantDisplayName,
-          multiTenant: baseDomain ? true : false,  // Only multi-tenant with custom domain
-          baseDomain: baseDomain || undefined,
-          nakedDomain: baseDomain ? nakedDomain : false,
+          multiTenant: hasCustomApiDomain,
+          baseDomain: hasCustomApiDomain ? baseDomain : undefined,
+          nakedDomain: nakedDomain,
+          userIdFormat: userIdFormat,
+          primaryTenant: primaryTenant,
         },
         components: {
           api: true,
@@ -3661,15 +3840,18 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
       };
 
       // Create default config with component settings
+      const customDomainBinding = document.getElementById('custom-domain-binding')?.checked ?? false;
       await api('/config/default', {
         method: 'POST',
         body: {
           env,
-          apiDomain,
+          apiDomain: config.apiDomain,
           loginUiDomain: loginDomain,
           adminUiDomain: adminDomain,
           tenant: config.tenant,
           components: config.components,
+          zoneId: domainZoneId || null,
+          customDomainBinding: config.apiDomain ? customDomainBinding : false,
         },
       });
 
@@ -3956,7 +4138,7 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
 
         const result = await api('/provision', {
           method: 'POST',
-          body: { env: config.env, databaseConfig: config.database },
+          body: { env: config.env, databaseConfig: config.database, createR2: true },
         });
 
         // Stop polling
@@ -3969,6 +4151,10 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
           // Final progress update
           updateProgressUI('provision', totalResources, totalResources, '✅ Provisioning complete!');
           output.textContent += '\\n✅ Provisioning complete!\\n';
+          if (result.savedPaths) {
+            output.textContent += '📁 Config: ' + result.savedPaths.config + '\\n';
+            output.textContent += '📁 Lock:   ' + result.savedPaths.lock + '\\n';
+          }
           scrollToBottom(log);
           status.textContent = t('web.status.complete');
           status.className = 'status-badge status-success';
@@ -4128,11 +4314,14 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
             apiUrl = 'https://' + workersDomain;
           }
           // Login UI URL for setup page (setup page is in Login UI, not API)
+          const loginUiEnabled = config.components?.loginUi !== false;
           const loginPagesDomain = config.env + '-ar-login-ui.pages.dev';
-          const loginUiUrl = config.loginUiDomain ? 'https://' + config.loginUiDomain : 'https://' + loginPagesDomain;
+          const loginUiUrl = loginUiEnabled
+            ? (config.loginUiDomain ? 'https://' + config.loginUiDomain : 'https://' + loginPagesDomain)
+            : null;
 
           output.textContent += '  API URL: ' + apiUrl + '\\n';
-          output.textContent += '  Login UI URL: ' + loginUiUrl + '\\n';
+          output.textContent += '  Login UI URL: ' + (loginUiUrl || 'Not deployed') + '\\n';
           output.textContent += '  Keys Dir: .authrim-keys/' + config.env + '/\\n';
           scrollToBottom(log);
 
@@ -4215,19 +4404,32 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
         // Workers.dev - no tenant prefix (wildcard subdomains not supported)
         apiUrl = 'https://' + workersDomain;
       }
-      const loginUrl = config.loginUiDomain ? 'https://' + config.loginUiDomain : 'https://' + loginPagesDomain;
-      const adminUrl = config.adminUiDomain ? 'https://' + config.adminUiDomain : 'https://' + adminPagesDomain;
+      const loginUiEnabled = config.components?.loginUi !== false;
+      const loginUrl = loginUiEnabled
+        ? (config.loginUiDomain ? 'https://' + config.loginUiDomain : 'https://' + loginPagesDomain)
+        : null;
+      const adminUrl = (config.adminUiDomain ? 'https://' + config.adminUiDomain : 'https://' + adminPagesDomain) + '/admin';
 
       // Clear and rebuild URLs section safely
       urlsEl.textContent = '';
 
       // API URL with OIDC Discovery link
-      urlsEl.appendChild(createUrlItem('API (Issuer):', apiUrl));
+      urlsEl.appendChild(createUrlItem('API (Issuer):', apiUrl, apiUrl));
       const discoveryUrl = apiUrl + '/.well-known/openid-configuration';
-      urlsEl.appendChild(createUrlItem('Discovery:', discoveryUrl));
-
-      urlsEl.appendChild(createUrlItem('Login UI:', loginUrl));
-      urlsEl.appendChild(createUrlItem('Admin UI:', adminUrl));
+      urlsEl.appendChild(createUrlItem('Discovery:', discoveryUrl, discoveryUrl));
+
+      urlsEl.appendChild(createUrlItem('Login UI:', loginUrl || t('web.status.notDeployed'), loginUrl || undefined));
+      urlsEl.appendChild(createUrlItem('Admin UI:', adminUrl, adminUrl));
+
+      // Show custom domain propagation note when any custom domain is set
+      if (config.apiDomain || config.loginUiDomain || config.adminUiDomain) {
+        const domainNoteDiv = document.createElement('div');
+        domainNoteDiv.className = 'hint-box';
+        domainNoteDiv.style.marginTop = '0.75rem';
+        domainNoteDiv.setAttribute('data-i18n', 'web.complete.customDomainNote');
+        domainNoteDiv.textContent = t('web.complete.customDomainNote');
+        urlsEl.appendChild(domainNoteDiv);
+      }
 
       // Create Admin Setup section (separate, prominent box)
       const adminSetupSection = document.createElement('div');
@@ -4242,50 +4444,123 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
           const day = expiresDate.getDate();
           const hours = expiresDate.getHours().toString().padStart(2, '0');
           const minutes = expiresDate.getMinutes().toString().padStart(2, '0');
-          expiresText = \`on \${month}/\${day} at \${hours}:\${minutes}\`;
+          expiresText = \`\${month}/\${day} \${hours}:\${minutes}\`;
         }
 
-        adminSetupSection.innerHTML = \`
-          <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;">
-            <span style="font-size: 1.5rem;">🔐</span>
-            <h4 style="margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--primary);">Admin Account Setup</h4>
-            <span style="background: var(--warning); color: white; font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 600;">IMPORTANT</span>
-          </div>
-          <p style="margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--text-muted);">
-            Register your first administrator account with Passkey authentication:
-          </p>
-          <div style="display: flex; gap: 0.5rem; align-items: center;">
-            <input type="text" value="\${result.setupUrl}" readonly style="flex: 1; min-width: 200px; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-mono); font-size: 0.8rem; background: var(--card-bg); color: var(--text);">
-            <button class="btn-secondary" onclick="navigator.clipboard.writeText('\${result.setupUrl}'); this.textContent='✓ Copied'; setTimeout(() => this.textContent='📋 Copy', 2000);" style="white-space: nowrap;">📋 Copy</button>
-          </div>
-          <div style="text-align: center; margin-top: 1rem;">
-            <a href="\${result.setupUrl}" target="_blank" class="btn-primary">🔑 Open Setup</a>
-          </div>
-          <div class="hint-box" style="margin-top: 0.75rem;">
-            ⚠️ This URL can only be used <strong>once</strong> and expires <strong>\${expiresText}</strong>.
-          </div>
-        \`;
+        // Header row
+        const headerDiv = document.createElement('div');
+        headerDiv.style.cssText = 'display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;';
+        const iconSpan = document.createElement('span');
+        iconSpan.style.fontSize = '1.5rem';
+        iconSpan.textContent = '🔐';
+        const titleH4 = document.createElement('h4');
+        titleH4.style.cssText = 'margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--primary);';
+        titleH4.textContent = t('web.complete.adminAccountTitle');
+        titleH4.setAttribute('data-i18n', 'web.complete.adminAccountTitle');
+        const importantBadge = document.createElement('span');
+        importantBadge.style.cssText = 'background: var(--warning); color: white; font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 4px; font-weight: 600;';
+        importantBadge.textContent = t('web.complete.adminAccountImportant');
+        importantBadge.setAttribute('data-i18n', 'web.complete.adminAccountImportant');
+        headerDiv.appendChild(iconSpan);
+        headerDiv.appendChild(titleH4);
+        headerDiv.appendChild(importantBadge);
+
+        // Description
+        const descP = document.createElement('p');
+        descP.style.cssText = 'margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--text-muted);';
+        descP.textContent = t('web.complete.adminAccountDesc');
+        descP.setAttribute('data-i18n', 'web.complete.adminAccountDesc');
+
+        // URL input + copy button row
+        const inputRow = document.createElement('div');
+        inputRow.style.cssText = 'display: flex; gap: 0.5rem; align-items: center;';
+        const urlInput = document.createElement('input');
+        urlInput.type = 'text';
+        urlInput.value = result.setupUrl;
+        urlInput.readOnly = true;
+        urlInput.style.cssText = 'flex: 1; min-width: 200px; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-mono); font-size: 0.8rem; background: var(--card-bg); color: var(--text);';
+        const copyBtn = document.createElement('button');
+        copyBtn.className = 'btn-secondary';
+        copyBtn.style.whiteSpace = 'nowrap';
+        copyBtn.textContent = t('web.complete.copy');
+        copyBtn.setAttribute('data-i18n', 'web.complete.copy');
+        const setupUrlForCopy = result.setupUrl;
+        copyBtn.addEventListener('click', () => {
+          navigator.clipboard.writeText(setupUrlForCopy);
+          copyBtn.removeAttribute('data-i18n'); // prevent updateAllTranslations from overwriting "Copied"
+          copyBtn.textContent = t('web.complete.copied');
+          setTimeout(() => {
+            copyBtn.textContent = t('web.complete.copy');
+            copyBtn.setAttribute('data-i18n', 'web.complete.copy');
+          }, 2000);
+        });
+        inputRow.appendChild(urlInput);
+        inputRow.appendChild(copyBtn);
+
+        // Open Setup button
+        const openDiv = document.createElement('div');
+        openDiv.style.cssText = 'text-align: center; margin-top: 1rem;';
+        const openLink = document.createElement('a');
+        openLink.href = result.setupUrl;
+        openLink.target = '_blank';
+        openLink.className = 'btn-primary';
+        openLink.textContent = t('web.complete.openSetup');
+        openLink.setAttribute('data-i18n', 'web.complete.openSetup');
+        openDiv.appendChild(openLink);
+
+        // Warning hint (uses innerHTML for <strong> tags — not updated on language change)
+        const hintDiv = document.createElement('div');
+        hintDiv.className = 'hint-box';
+        hintDiv.style.marginTop = '0.75rem';
+        const warningTemplate = t('web.complete.urlWarning', { date: expiresText });
+        // warningTemplate may contain <strong> tags — parse safely
+        const warningPrefix = document.createTextNode('⚠️ ');
+        hintDiv.appendChild(warningPrefix);
+        const warningSpan = document.createElement('span');
+        warningSpan.innerHTML = warningTemplate; // safe: value from our own translation strings only
+        hintDiv.appendChild(warningSpan);
+
+        adminSetupSection.appendChild(headerDiv);
+        adminSetupSection.appendChild(descP);
+        adminSetupSection.appendChild(inputRow);
+        adminSetupSection.appendChild(openDiv);
+        adminSetupSection.appendChild(hintDiv);
       } else {
-        // Show message when setup URL is missing
-        let debugInfo = '';
+        // Header row
+        const headerDiv = document.createElement('div');
+        headerDiv.style.cssText = 'display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;';
+        const iconSpan = document.createElement('span');
+        iconSpan.style.fontSize = '1.5rem';
+        iconSpan.textContent = '🔐';
+        const titleH4 = document.createElement('h4');
+        titleH4.style.cssText = 'margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text-muted);';
+        titleH4.textContent = t('web.complete.adminAccountTitle');
+        titleH4.setAttribute('data-i18n', 'web.complete.adminAccountTitle');
+        headerDiv.appendChild(iconSpan);
+        headerDiv.appendChild(titleH4);
+
+        const descP = document.createElement('p');
+        descP.style.cssText = 'margin: 0; font-size: 0.9rem; color: var(--text-muted);';
+        descP.textContent = t('web.complete.adminSetupUnavailable');
+        descP.setAttribute('data-i18n', 'web.complete.adminSetupUnavailable');
+
+        adminSetupSection.appendChild(headerDiv);
+        adminSetupSection.appendChild(descP);
+
         if (result && result.adminSetupDebug) {
           const debug = result.adminSetupDebug;
+          const debugP = document.createElement('p');
+          debugP.style.cssText = 'margin: 0.5rem 0 0; font-size: 0.85rem;';
           if (debug.alreadyCompleted) {
-            debugInfo = '<p style="margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--text-muted);">Admin setup has already been completed for this environment.</p>';
+            debugP.style.color = 'var(--text-muted)';
+            debugP.textContent = t('web.complete.adminSetupUnavailable');
+            debugP.setAttribute('data-i18n', 'web.complete.adminSetupUnavailable');
           } else if (debug.error) {
-            debugInfo = '<p style="margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--error);">Error: ' + debug.error + '</p>';
+            debugP.style.color = 'var(--error)';
+            debugP.textContent = 'Error: ' + debug.error;
           }
+          if (debugP.textContent) adminSetupSection.appendChild(debugP);
         }
-        adminSetupSection.innerHTML = \`
-          <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
-            <span style="font-size: 1.5rem;">🔐</span>
-            <h4 style="margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text-muted);">Admin Account Setup</h4>
-          </div>
-          <p style="margin: 0; font-size: 0.9rem; color: var(--text-muted);">
-            Setup URL not available. You can configure admin access from the Admin UI later.
-          </p>
-          \${debugInfo}
-        \`;
       }
       urlsEl.parentNode.insertBefore(adminSetupSection, urlsEl.nextSibling);
 
@@ -4421,22 +4696,13 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
       const now = new Date().toISOString();
       const env = config.env;
 
-      // Calculate auto-generated URLs
-      const workersDomain = env + '-ar-router.workers.dev';
+      // Calculate auto-generated URLs (use workersSubdomain if available for full-form URL)
+      const workersDomain = workersSubdomain
+        ? env + '-ar-router.' + workersSubdomain + '.workers.dev'
+        : env + '-ar-router.workers.dev';
       const loginPagesDomain = env + '-ar-login-ui.pages.dev';
       const adminPagesDomain = env + '-ar-admin-ui.pages.dev';
 
-      // Build issuer URL based on tenant settings
-      let issuerAutoUrl = 'https://' + workersDomain;
-      if (config.tenant && config.tenant.baseDomain) {
-        if (config.tenant.nakedDomain) {
-          issuerAutoUrl = 'https://' + config.tenant.baseDomain;
-        } else {
-          const tenantName = config.tenant.name || 'default';
-          issuerAutoUrl = 'https://' + tenantName + '.' + config.tenant.baseDomain;
-        }
-      }
-
       // Build config in AuthrimConfigSchema format
       const configToSave = {
         version: '1.0.0',
@@ -4448,7 +4714,9 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
         urls: {
           api: {
             custom: config.apiDomain || null,
-            auto: config.apiDomain ? issuerAutoUrl : 'https://' + workersDomain,
+            // api.auto must always be the workers.dev URL (used for proxy backend and CORS).
+            // The custom domain (issuer URL) belongs in api.custom, not api.auto.
+            auto: 'https://' + workersDomain,
           },
           loginUi: {
             custom: config.loginUiDomain || null,
@@ -4464,6 +4732,9 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
           displayName: config.tenant?.displayName || 'Default Tenant',
           multiTenant: config.tenant?.multiTenant || false,
           baseDomain: config.tenant?.baseDomain || undefined,
+          nakedDomain: config.tenant?.nakedDomain ?? false,
+          userIdFormat: config.tenant?.userIdFormat || 'nanoid',
+          primaryTenant: config.tenant?.primaryTenant || undefined,
         },
         components: config.components || {
           api: true,
@@ -4497,6 +4768,9 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
       if (!configToSave.tenant.baseDomain) {
         delete configToSave.tenant.baseDomain;
       }
+      if (!configToSave.tenant.primaryTenant) {
+        delete configToSave.tenant.primaryTenant;
+      }
       if (!configToSave.features.email.fromAddress) {
         delete configToSave.features.email.fromAddress;
       }
@@ -4691,6 +4965,7 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
       selectedEnvForDetail = env;
 
       document.getElementById('detail-env-name').textContent = env.env;
+      renderEnvDetailUrls(env);
 
       // Render resource lists with loading state
       renderResourceList('detail-workers-list', 'detail-workers-count', env.workers, 'name', 'worker');
@@ -4737,6 +5012,118 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
       loadResourceDetails(env);
     }
 
+    function stripTrailingSlash(url) {
+      const value = String(url || '');
+      return value.endsWith('/') ? value.slice(0, -1) : value;
+    }
+
+    function createEnvDetailUrlRow(label, url, description) {
+      const row = document.createElement('div');
+      row.style.cssText = 'display: flex; flex-direction: column; gap: 0.35rem; padding: 0.875rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;';
+
+      const top = document.createElement('div');
+      top.style.cssText = 'display: flex; justify-content: space-between; gap: 1rem; align-items: center; flex-wrap: wrap;';
+
+      const labelEl = document.createElement('div');
+      labelEl.style.cssText = 'font-weight: 600;';
+      labelEl.textContent = label;
+      top.appendChild(labelEl);
+
+      const open = document.createElement('a');
+      open.href = url;
+      open.target = '_blank';
+      open.rel = 'noopener noreferrer';
+      open.className = 'btn-secondary';
+      open.style.cssText = 'padding: 0.35rem 0.75rem; font-size: 0.8rem; white-space: nowrap;';
+      open.textContent = 'Open';
+      top.appendChild(open);
+
+      const urlEl = document.createElement('a');
+      urlEl.href = url;
+      urlEl.target = '_blank';
+      urlEl.rel = 'noopener noreferrer';
+      urlEl.style.cssText = 'font-family: var(--font-mono); font-size: 0.85rem; color: var(--primary); word-break: break-all;';
+      urlEl.textContent = url;
+
+      row.appendChild(top);
+      row.appendChild(urlEl);
+
+      if (description) {
+        const descEl = document.createElement('div');
+        descEl.style.cssText = 'font-size: 0.8rem; color: var(--text-muted);';
+        descEl.textContent = description;
+        row.appendChild(descEl);
+      }
+
+      return row;
+    }
+
+    function buildEnvDetailUrls(envName, config) {
+      const workersDomain = workersSubdomain
+        ? envName + '-ar-router.' + workersSubdomain + '.workers.dev'
+        : envName + '-ar-router.workers.dev';
+      const fallbackIssuer = 'https://' + workersDomain;
+
+      const tenant = config?.tenant || {};
+      const tenantName = tenant.name || 'default';
+      const baseDomain = tenant.baseDomain;
+      const nakedDomain = tenant.nakedDomain === true;
+
+      let issuerUrl = fallbackIssuer;
+      if (baseDomain) {
+        issuerUrl = nakedDomain
+          ? 'https://' + baseDomain
+          : 'https://' + tenantName + '.' + baseDomain;
+      } else if (config?.urls?.api?.custom) {
+        issuerUrl = stripTrailingSlash(config.urls.api.custom);
+      }
+
+      const loginBaseUrl = stripTrailingSlash(
+        config?.urls?.loginUi?.custom || 'https://' + envName + '-ar-login-ui.pages.dev'
+      );
+      const adminBaseUrl = stripTrailingSlash(
+        config?.urls?.adminUi?.custom || 'https://' + envName + '-ar-admin-ui.pages.dev'
+      );
+
+      return [
+        {
+          label: 'Issuer',
+          url: issuerUrl,
+          description: 'Canonical OIDC issuer URL',
+        },
+        {
+          label: 'Login UI',
+          url: loginBaseUrl + '/login',
+          description: 'Login screen entry point',
+        },
+        {
+          label: 'Admin UI',
+          url: adminBaseUrl + '/admin/info',
+          description: 'Admin console entry point',
+        },
+      ];
+    }
+
+    async function renderEnvDetailUrls(env) {
+      const listEl = document.getElementById('detail-url-list');
+      listEl.textContent = '';
+
+      let config = null;
+      try {
+        const configResponse = await api('/config?env=' + encodeURIComponent(env.env));
+        if (configResponse.exists && configResponse.config) {
+          config = configResponse.config;
+        }
+      } catch (error) {
+        console.warn('Failed to load config for env detail URLs:', error);
+      }
+
+      const urls = buildEnvDetailUrls(env.env, config);
+      for (const item of urls) {
+        listEl.appendChild(createEnvDetailUrlRow(item.label, item.url, item.description));
+      }
+    }
+
     // ===========================================
     // Worker Update Functions
     // ===========================================
@@ -5311,28 +5698,37 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
           return;
         }
 
-        // Find router worker to construct base URL
-        const router = selectedEnvForDetail.workers.find(w =>
-          w.name.toLowerCase().includes('router')
-        );
-
+        // Determine base URL: prefer custom domain from config, fallback to workers.dev
         let baseUrl = '';
-        if (router && router.name) {
-          // Construct URL from worker name with subdomain
-          // Format: https://{worker-name}.{subdomain}.workers.dev
-          if (workersSubdomain) {
-            baseUrl = 'https://' + router.name + '.' + workersSubdomain + '.workers.dev';
-          } else {
-            // Fallback without subdomain (shouldn't happen in practice)
-            baseUrl = 'https://' + router.name + '.workers.dev';
+
+        // Try to load config to get custom API domain
+        try {
+          const configResponse = await api('/config?env=' + encodeURIComponent(selectedEnvForDetail.env));
+          if (configResponse.exists && configResponse.config) {
+            baseUrl = configResponse.config.urls?.api?.custom || configResponse.config.urls?.api?.auto || '';
           }
-        } else {
-          // Fallback - ask for URL
-          baseUrl = prompt('Enter the base URL for the router (e.g., https://myenv-ar-router.subdomain.workers.dev):');
-          if (!baseUrl) {
-            btn.disabled = false;
-            btn.textContent = '🔐 Start Admin Account Setup with Passkey';
-            return;
+        } catch (e) {
+          // Config not available, will fallback to workers.dev
+        }
+
+        // Fallback to workers.dev URL if no config URL found
+        if (!baseUrl) {
+          const router = selectedEnvForDetail.workers.find(w =>
+            w.name.toLowerCase().includes('router')
+          );
+          if (router && router.name) {
+            if (workersSubdomain) {
+              baseUrl = 'https://' + router.name + '.' + workersSubdomain + '.workers.dev';
+            } else {
+              baseUrl = 'https://' + router.name + '.workers.dev';
+            }
+          } else {
+            baseUrl = prompt('Enter the base URL for the router (e.g., https://myenv-ar-router.subdomain.workers.dev):');
+            if (!baseUrl) {
+              btn.disabled = false;
+              btn.textContent = '🔐 Start Admin Account Setup with Passkey';
+              return;
+            }
           }
         }
 
@@ -5342,6 +5738,7 @@ export function getHtmlTemplate(sessionToken, manageOnly, locale = 'en', transla
           body: JSON.stringify({
             kvNamespaceId: configKv.id,
             baseUrl: baseUrl,
+            env: selectedEnvForDetail.env,
           }),
         });