@serve.zone/dcrouter 16.5.0 → 17.1.0

package/ts_web/elements/email/ops-view-email-domains.ts

@@ -10,7 +10,13 @@ import {
 import * as appstate from '../../appstate.js';
 import * as interfaces from '../../../dist_ts_interfaces/index.js';
 import { viewHostCss } from '../shared/css.js';
-import { type IStatsTile } from '@design.estate/dees-catalog';
+import { type IStep, type IStatsTile } from '@design.estate/dees-catalog';
+import {
+  findNewEmailDomain,
+  getEmailDomainCreationProgress,
+  observeNewEmailDomain,
+  withAbortableDeadline,
+} from './email-domain-creation-progress.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -416,86 +422,279 @@ export class OpsViewEmailDomains extends DeesElement {
   }
 
   private async showCreateDialog() {
-    const { DeesModal } = await import('@design.estate/dees-catalog');
-    const domainOptions = this.domainsState.domains.map((d) => ({
-      option: `${d.name} (${d.source})`,
-      key: d.id,
+    const { DeesStepper } = await import('@design.estate/dees-catalog');
+    const domainOptions = this.domainsState.domains.map((domain) => ({
+      option: `${domain.name} (${domain.source})`,
+      key: domain.id,
     }));
+    const initialProgress = getEmailDomainCreationProgress({
+      requestCompleted: false,
+    });
 
-    DeesModal.createAndShow({
-      heading: 'Add Email Domain',
+    let createArgs: {
+      linkedDomainId: string;
+      subdomain?: string;
+      dkimSelector?: string;
+      dkimKeySize?: number;
+      rotateKeys?: boolean;
+    } | undefined;
+    let expectedDomain: string | undefined;
+    let progressStepDefinition: IStep;
+
+    progressStepDefinition = {
+      title: 'Create Email Domain',
+      allowBack: false,
       content: html`
-        <dees-form>
-          <dees-input-dropdown
-            .key=${'linkedDomainId'}
-            .label=${'Domain'}
-            .description=${'Select an existing DNS domain'}
-            .options=${domainOptions}
-            .required=${true}
-          ></dees-input-dropdown>
-          <dees-input-text
-            .key=${'subdomain'}
-            .label=${'Subdomain'}
-            .description=${'Leave empty for bare domain, e.g. "mail" for mail.example.com'}
-          ></dees-input-text>
-          <dees-input-text
-            .key=${'dkimSelector'}
-            .label=${'DKIM Selector'}
-            .description=${'Identifier used in DNS record name'}
-            .value=${'default'}
-          ></dees-input-text>
-          <dees-input-dropdown
-            .key=${'dkimKeySize'}
-            .label=${'DKIM Key Size'}
-            .options=${[
-              { option: '2048 (recommended)', key: '2048' },
-              { option: '1024', key: '1024' },
-              { option: '4096', key: '4096' },
-            ]}
-            .selectedOption=${{ option: '2048 (recommended)', key: '2048' }}
-          ></dees-input-dropdown>
-          <dees-input-checkbox
-            .key=${'rotateKeys'}
-            .label=${'Auto-rotate DKIM keys'}
-            .value=${false}
-          ></dees-input-checkbox>
-        </dees-form>
+        <p style="margin: 0; color: var(--dees-color-text-secondary); line-height: 1.5;">
+          dcrouter is creating the domain, preparing its managed DNS plan, and reconciling the
+          records with the linked DNS provider. The final state and any scheduled retry remain
+          visible here.
+        </p>
       `,
-      menuOptions: [
-        { name: 'Cancel', action: async (m: any) => m.destroy() },
-        {
-          name: 'Create',
-          action: async (m: any) => {
-            const form = m.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
-            if (!form) return;
-            const data = await form.collectFormData();
-            const linkedDomainId =
-              typeof data.linkedDomainId === 'object'
-                ? data.linkedDomainId.key
-                : data.linkedDomainId;
-            const keySize =
-              typeof data.dkimKeySize === 'object'
-                ? parseInt(data.dkimKeySize.key, 10)
-                : parseInt(data.dkimKeySize || '2048', 10);
-
-            const subdomain = data.subdomain?.trim() || undefined;
-            const nextState = await appstate.emailDomainsStatePart.dispatchAction(
-              appstate.createEmailDomainAction,
+      progressStep: {
+        ...initialProgress,
+        label: 'Email domain setup',
+        statusRows: 8,
+        autoAdvance: false,
+      },
+      menuOptions: [],
+      validationFunc: async (stepper, _selectedStep, signal) => {
+        let observedDomain: interfaces.data.IEmailDomain | undefined;
+        let observationError: Error | undefined;
+        let observationPromise: Promise<interfaces.data.IEmailDomain | undefined> | undefined;
+        const observationController = new AbortController();
+        const abortObservation = () => observationController.abort();
+        signal?.addEventListener('abort', abortObservation, { once: true });
+
+        const renderProgress = (
+          domainArg: interfaces.data.IEmailDomain | undefined,
+          operationArg: interfaces.requests.IEmailDomainActionResult | null,
+          requestCompletedArg: boolean,
+        ) => {
+          if (signal?.aborted || !stepper.isConnected) return;
+          stepper.updateProgressStep({
+            ...getEmailDomainCreationProgress({
+              domain: domainArg,
+              operation: operationArg,
+              requestCompleted: requestCompletedArg,
+            }),
+            statusRows: 8,
+          });
+        };
+
+        try {
+          if (!createArgs || !expectedDomain) {
+            throw new Error('Email domain configuration is incomplete');
+          }
+
+          stepper.updateProgressStep({
+            percentage: 0,
+            indeterminate: true,
+            showPercentage: false,
+            statusText: 'Checking the current email-domain state...',
+            terminalLines: ['Checking for an existing email domain'],
+            statusRows: 8,
+          });
+          const initialDomains = await appstate.fetchEmailDomainsSnapshot();
+          if (signal?.aborted) return;
+          const existingIds = new Set(
+            initialDomains
+              .filter((domain) => domain.domain.toLowerCase() === expectedDomain)
+              .map((domain) => domain.id),
+          );
+
+          renderProgress(undefined, null, false);
+          observationPromise = observeNewEmailDomain({
+            expectedDomain,
+            existingIds,
+            signal: observationController.signal,
+            listDomains: appstate.fetchEmailDomainsSnapshot,
+            getDomain: appstate.fetchEmailDomainSnapshot,
+            onDomain: (domain) => {
+              observedDomain = domain;
+              renderProgress(domain, null, false);
+            },
+            subscribeToDomains: (listenerArg) => {
+              const subscription = appstate.emailDomainsStatePart
+                .select((state) => state.domains)
+                .subscribe(listenerArg);
+              return () => subscription.unsubscribe();
+            },
+            timeoutMs: 15 * 60_000,
+          });
+          void observationPromise.then((domain) => {
+            if (domain) observedDomain = domain;
+          }).catch((error: unknown) => {
+            observationError = error instanceof Error
+              ? error
+              : new Error('Failed to observe the new email domain');
+          });
+
+          const createPromise = appstate.emailDomainsStatePart.dispatchAction(
+            appstate.createEmailDomainAction,
+            createArgs,
+          );
+          const nextState = await withAbortableDeadline(createPromise, {
+            signal,
+            timeoutMs: 120_000,
+            timeoutMessage:
+              'Email domain creation timed out. The server operation may still complete; refresh the domain list before retrying.',
+          });
+          const operation = nextState.lastOperation;
+          const finalDomain =
+            operation?.domain ||
+            observedDomain ||
+            findNewEmailDomain(nextState.domains, expectedDomain, existingIds);
+          if (!finalDomain && observationError) {
+            throw observationError;
+          }
+          renderProgress(finalDomain, operation, true);
+          if (!signal?.aborted && stepper.isConnected) {
+            progressStepDefinition.menuOptions = [
               {
-                linkedDomainId,
-                subdomain,
-                dkimSelector: data.dkimSelector || 'default',
-                dkimKeySize: keySize,
-                rotateKeys: Boolean(data.rotateKeys),
+                name: 'Close',
+                action: async (stepperArg) => stepperArg?.destroy(),
               },
-            );
-            const wasAccepted = await this.showOperationToast(
-              nextState,
-              `Email domain created`,
-            );
-            if (wasAccepted) m.destroy();
-          },
+            ];
+            stepper.steps = [...stepper.steps];
+          }
+
+          const lifecycleStatus = finalDomain?.reconciliation?.lifecycleStatus;
+          if (
+            observationPromise &&
+            lifecycleStatus !== 'active' &&
+            lifecycleStatus !== 'failed'
+          ) {
+            const terminalDomain = await observationPromise;
+            if (terminalDomain) {
+              observedDomain = terminalDomain;
+              renderProgress(terminalDomain, operation, true);
+            }
+          }
+        } catch (error: unknown) {
+          const message = error instanceof Error ? error.message : 'Email domain creation failed';
+          renderProgress(
+            observedDomain,
+            {
+              success: false,
+              message,
+              code: 'EMAIL_DOMAIN_CREATE_PROGRESS_FAILED',
+              errors: [{
+                code: 'EMAIL_DOMAIN_CREATE_PROGRESS_FAILED',
+                message,
+                retryable: true,
+              }],
+            },
+            true,
+          );
+        } finally {
+          observationController.abort();
+          signal?.removeEventListener('abort', abortObservation);
+          if (!signal?.aborted && stepper.isConnected) {
+            progressStepDefinition.menuOptions = [
+              {
+                name: 'Close',
+                action: async (stepperArg) => stepperArg?.destroy(),
+              },
+            ];
+            stepper.steps = [...stepper.steps];
+          }
+        }
+      },
+    };
+
+    await DeesStepper.createAndShow({
+      cancelable: false,
+      steps: [
+        {
+          title: 'Add Email Domain',
+          content: html`
+            <dees-form>
+              <dees-input-dropdown
+                .key=${'linkedDomainId'}
+                .label=${'Domain'}
+                .description=${'Select an existing DNS domain'}
+                .options=${domainOptions}
+                .required=${true}
+              ></dees-input-dropdown>
+              <dees-input-text
+                .key=${'subdomain'}
+                .label=${'Subdomain'}
+                .description=${'Leave empty for bare domain, e.g. "mail" for mail.example.com'}
+              ></dees-input-text>
+              <dees-input-text
+                .key=${'dkimSelector'}
+                .label=${'DKIM Selector'}
+                .description=${'Identifier used in DNS record name'}
+                .value=${'default'}
+              ></dees-input-text>
+              <dees-input-dropdown
+                .key=${'dkimKeySize'}
+                .label=${'DKIM Key Size'}
+                .options=${[
+                  { option: '2048 (recommended)', key: '2048' },
+                  { option: '1024', key: '1024' },
+                  { option: '4096', key: '4096' },
+                ]}
+                .selectedOption=${{ option: '2048 (recommended)', key: '2048' }}
+              ></dees-input-dropdown>
+              <dees-input-checkbox
+                .key=${'rotateKeys'}
+                .label=${'Auto-rotate DKIM keys'}
+                .value=${false}
+              ></dees-input-checkbox>
+            </dees-form>
+          `,
+          menuOptions: [
+            {
+              name: 'Cancel',
+              action: async (stepperArg) => stepperArg?.destroy(),
+            },
+            {
+              name: 'Create',
+              action: async (stepperArg) => {
+                if (!stepperArg) return;
+                const form = stepperArg.shadowRoot?.querySelector('.selected dees-form') as any;
+                if (!form) return;
+                const data = await form.collectFormData();
+                const linkedDomainId = String(
+                  typeof data.linkedDomainId === 'object'
+                    ? data.linkedDomainId.key
+                    : data.linkedDomainId || '',
+                );
+                const linkedDomain = this.domainsState.domains.find(
+                  (domain) => domain.id === linkedDomainId,
+                );
+                if (!linkedDomain) {
+                  form.setStatus?.('error', 'Select an existing DNS domain.');
+                  return;
+                }
+
+                const keySize = Number.parseInt(
+                  String(
+                    typeof data.dkimKeySize === 'object'
+                      ? data.dkimKeySize.key
+                      : data.dkimKeySize || '2048',
+                  ),
+                  10,
+                );
+                const subdomain = String(data.subdomain || '').trim().toLowerCase() || undefined;
+                expectedDomain = (
+                  subdomain ? `${subdomain}.${linkedDomain.name}` : linkedDomain.name
+                ).toLowerCase();
+                createArgs = {
+                  linkedDomainId,
+                  subdomain,
+                  dkimSelector: String(data.dkimSelector || 'default').trim() || 'default',
+                  dkimKeySize: keySize,
+                  rotateKeys: Boolean(data.rotateKeys),
+                };
+                stepperArg.goNext();
+              },
+            },
+          ],
         },
+        progressStepDefinition,
       ],
     });
   }

package/ts_web/elements/email/ops-view-emails.ts

@@ -1,5 +1,4 @@
 import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
-import * as plugins from '../../plugins.js';
 import * as appstate from '../../appstate.js';
 import * as shared from '../shared/index.js';
 import * as interfaces from '../../../dist_ts_interfaces/index.js';
@@ -25,11 +24,18 @@ export class OpsViewEmails extends DeesElement {
   accessor isLoading = false;
 
   private stateSubscription: any;
+  private lastEmailOpsUpdate = 0;
+  private detailRequestGeneration = 0;
 
   async connectedCallback() {
     await super.connectedCallback();
     this.stateSubscription = appstate.emailOpsStatePart.select().subscribe((state) => {
       this.emails = state.emails;
+      const hasNewSnapshot = state.lastUpdated > this.lastEmailOpsUpdate;
+      this.lastEmailOpsUpdate = Math.max(this.lastEmailOpsUpdate, state.lastUpdated);
+      if (hasNewSnapshot && this.selectedEmail) {
+        void this.refreshEmailDetail(this.selectedEmail.id);
+      }
       this.isLoading = state.isLoading;
     });
     // Initial fetch
@@ -80,29 +86,30 @@ export class OpsViewEmails extends DeesElement {
     `;
   }
 
-  private async handleEmailClick(e: CustomEvent<interfaces.requests.IEmail>) {
-    const emailSummary = e.detail;
+  private async refreshEmailDetail(emailIdArg: string, openDetailArg = false): Promise<void> {
+    const requestGeneration = ++this.detailRequestGeneration;
     try {
-      const context = appstate.loginStatePart.getState()!;
-      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
-        interfaces.requests.IReq_GetEmailDetail
-      >('/typedrequest', 'getEmailDetail');
-
-      const response = await request.fire({
-        identity: context.identity!,
-        emailId: emailSummary.id,
-      });
-
-      if (response.email) {
-        this.selectedEmail = response.email;
-        this.currentView = 'detail';
+      const email = await appstate.fetchEmailDetailSnapshot(emailIdArg);
+      if (requestGeneration !== this.detailRequestGeneration) return;
+      if (email) {
+        this.selectedEmail = email;
+        if (openDetailArg) {
+          this.currentView = 'detail';
+        }
+      } else if (this.selectedEmail?.id === emailIdArg) {
+        this.handleBack();
       }
     } catch (error) {
       console.error('Failed to fetch email detail:', error);
     }
   }
 
+  private async handleEmailClick(e: CustomEvent<interfaces.requests.IEmail>) {
+    await this.refreshEmailDetail(e.detail.id, true);
+  }
+
   private handleBack() {
+    this.detailRequestGeneration++;
     this.selectedEmail = null;
     this.currentView = 'list';
   }

package/ts_web/elements/overview/ops-view-config.ts

@@ -114,18 +114,18 @@ export class OpsViewConfig extends DeesElement {
 
     const fields: IConfigField[] = [
       { key: 'Base Directory', value: sys.baseDir },
-      { key: 'Data Directory', value: sys.dataDir },
+      { key: 'Legacy Migration Source', value: sys.dataDir },
       { key: 'Public IP', value: sys.publicIp },
       { key: 'Proxy IPs', value: proxyIpValues, type: 'pills' },
       { key: 'Uptime', value: this.formatUptime(sys.uptime) },
-      { key: 'Storage Backend', value: sys.storageBackend, type: 'badge' },
-      { key: 'Storage Path', value: sys.storagePath },
+      { key: 'Structured Data Backend', value: sys.storageBackend, type: 'badge' },
+      { key: 'Local SmartData Path', value: sys.storagePath },
     ];
 
     return html`
       <sz-config-section
         title="System"
-        subtitle="Base paths and infrastructure"
+        subtitle="Runtime paths and managed persistence"
         icon="lucide:server"
         status="enabled"
         .fields=${fields}