feat(dees-updater): enhance updater progress and completion views with version metadata cards

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-17 - 3.81.0 - feat(dees-updater)
+enhance updater progress and completion views with version metadata cards
+
+- add reusable version metadata rendering for current, incoming, and installed versions
+- refresh progress and ready states with clearer headings, descriptive copy, and automatic action summary
+- apply monospace styling to displayed version numbers for improved readability
+
 ## 2026-04-16 - 3.80.0 - feat(stepper,updater)
 add progress-aware stepper flows and updater countdown states
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.80.0',
+  version: '3.81.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-utility/dees-updater/dees-updater.ts

@@ -12,6 +12,7 @@ import {
   type IStep,
   type IStepProgressState,
 } from '../../00group-layout/dees-stepper/dees-stepper.js';
+import { monoFontFamily } from '../../00fonts.js';
 
 export type TDeesUpdaterSuccessAction = 'close' | 'reload';
 
@@ -301,20 +302,71 @@ export class DeesUpdater extends DeesElement {
     return menuOptions;
   }
 
+  private renderVersionMeta(labelArg: string, valueArg: string): TemplateResult {
+    return html`
+      <div
+        style="display: grid; gap: 4px; min-width: 132px; padding: 12px 14px; border: 1px solid var(--dees-color-border-subtle); border-radius: 8px; background: var(--dees-color-hover);"
+      >
+        <div
+          style="font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dees-color-text-muted);"
+        >
+          ${labelArg}
+        </div>
+        <div
+          style=${`font-family: ${monoFontFamily}; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: var(--dees-color-text-primary);`}
+        >
+          ${valueArg}
+        </div>
+      </div>
+    `;
+  }
+
   private renderProgressContent(): TemplateResult {
     return html`
-      <div style="display: grid; gap: 12px; color: var(--dees-color-text-secondary); line-height: 1.6;">
-        <p style="margin: 0; text-align: center;">
-          Downloading and applying the latest application release.
-          ${this.currentVersion && this.updatedVersion
-            ? html`Moving from <strong>${this.currentVersion}</strong> to <strong>${this.updatedVersion}</strong>.`
-            : this.updatedVersion
-              ? html`Preparing <strong>${this.updatedVersion}</strong>.`
-              : ''}
-        </p>
-        <p style="margin: 0; text-align: center; font-size: 13px; color: var(--dees-color-text-muted);">
-          The updater advances automatically once the new build is installed and verified.
-        </p>
+      <div style="display: grid; gap: 18px; color: var(--dees-color-text-secondary);">
+        <div style="display: grid; gap: 6px;">
+          <div
+            style="font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dees-color-text-muted);"
+          >
+            Application update
+          </div>
+          <div
+            style="font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; color: var(--dees-color-text-primary);"
+          >
+            Downloading and applying the latest release.
+          </div>
+          <p style="margin: 0; font-size: 14px; line-height: 1.65; color: var(--dees-color-text-secondary);">
+            ${this.currentVersion && this.updatedVersion
+              ? html`Moving from <strong>${this.currentVersion}</strong> to <strong>${this.updatedVersion}</strong>.`
+              : this.updatedVersion
+                ? html`Preparing <strong>${this.updatedVersion}</strong> for installation.`
+                : 'The updater is fetching the newest build and preparing it for installation.'}
+          </p>
+        </div>
+
+        ${this.currentVersion || this.updatedVersion
+          ? html`
+              <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+                ${this.currentVersion
+                  ? this.renderVersionMeta('Current version', this.currentVersion)
+                  : ''}
+                ${this.updatedVersion
+                  ? this.renderVersionMeta('Incoming version', this.updatedVersion)
+                  : ''}
+              </div>
+            `
+          : ''}
+
+        <div
+          style="display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--dees-color-border-subtle); border-radius: 8px; background: var(--dees-color-hover);"
+        >
+          <div style="font-size: 12px; font-weight: 600; color: var(--dees-color-text-primary);">
+            Automatic flow
+          </div>
+          <div style="font-size: 13px; line-height: 1.6; color: var(--dees-color-text-muted);">
+            The updater continues on its own once the new build is installed and verified.
+          </div>
+        </div>
       </div>
     `;
   }
@@ -323,15 +375,46 @@ export class DeesUpdater extends DeesElement {
     const successDelaySeconds = this.getSuccessDelaySeconds();
 
     return html`
-      <div style="display: grid; gap: 12px; color: var(--dees-color-text-secondary); line-height: 1.6;">
-        <p style="margin: 0; text-align: center;">
-          ${this.updatedVersion
-            ? html`Version <strong>${this.updatedVersion}</strong> is ready to use.`
-            : 'The new version is ready to use.'}
-        </p>
-        <p style="margin: 0; text-align: center; font-size: 13px; color: var(--dees-color-text-muted);">
-          Configured next action: ${this.getSuccessActionDisplayLabel()}. It runs automatically in ${successDelaySeconds} seconds.
-        </p>
+      <div style="display: grid; gap: 18px; color: var(--dees-color-text-secondary);">
+        <div style="display: grid; gap: 6px;">
+          <div
+            style="font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dees-color-text-muted);"
+          >
+            Update complete
+          </div>
+          <div
+            style="font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.02em; color: var(--dees-color-text-primary);"
+          >
+            ${this.updatedVersion
+              ? html`Version <span style=${`font-family: ${monoFontFamily}; font-size: 0.95em;`}>${this.updatedVersion}</span> is ready to use.`
+              : 'The new version is ready to use.'}
+          </div>
+          <p style="margin: 0; font-size: 14px; line-height: 1.65; color: var(--dees-color-text-secondary);">
+            The new build has been installed and verified. You can review release details below while the next action runs automatically.
+          </p>
+        </div>
+
+        ${this.updatedVersion
+          ? html`
+              <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+                ${this.renderVersionMeta('Installed version', this.updatedVersion)}
+              </div>
+            `
+          : ''}
+
+        <div
+          style="display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--dees-color-border-subtle); border-radius: 8px; background: var(--dees-color-hover);"
+        >
+          <div style="font-size: 12px; font-weight: 600; color: var(--dees-color-text-primary);">
+            Next action
+          </div>
+          <div style="font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--dees-color-text-primary);">
+            ${this.getSuccessActionDisplayLabel()}
+          </div>
+          <div style="font-size: 13px; line-height: 1.6; color: var(--dees-color-text-muted);">
+            Runs automatically in ${successDelaySeconds} seconds.
+          </div>
+        </div>
       </div>
     `;
   }