From eddc00d48351d860d4fcec6ae97702708dc0231d Mon Sep 17 00:00:00 2001
From: DeviceInfra <no-reply@google.com>
Date: Tue, 13 Jan 2026 03:20:41 -0800
Subject: [PATCH] Internal change

PiperOrigin-RevId: 855629557
---
 .../services/mock_data/hosts/overview_13.ts   | 108 +++++
 .../app/core/services/mock_data/index.ts      |   2 +
 .../device_empty/device_empty.ng.html         |   6 +-
 .../device_empty/device_empty.scss            |   9 +
 .../device_settings/device_settings.ng.html   |   4 +-
 .../device_settings/device_settings.scss      |  13 +
 .../device_wizard/device_wizard.ng.html       |   4 +-
 .../device_wizard/device_wizard.scss          |   9 +
 .../host_managed/host_managed.ng.html         |   4 +-
 .../host_managed/host_managed.scss            |  14 +-
 .../device_overview_tab.scss                  |   4 -
 .../host_config/host_empty/host_empty.ng.html |   4 +-
 .../host_config/host_empty/host_empty.scss    |  11 +-
 .../host_wizard/host_wizard.ng.html           |   4 +-
 .../host_config/host_wizard/host_wizard.scss  |   9 +
 .../host_overview/host_overview.ng.html       |  31 +-
 .../components/host_overview/host_overview.ts |  98 ++++-
 .../entry_chip/entry_chip.ng.html             |   2 +-
 .../config_common/entry_chip/entry_chip.scss  |   4 +
 .../wizard_stepper/wizard_stepper.ng.html     |  10 +-
 .../wizard_stepper/wizard_stepper.scss        |  13 +
 .../confirm_dialog/confirm_dialog.ng.html     |  36 +-
 .../confirm_dialog/confirm_dialog.scss        | 409 +++++++++++++++++-
 .../confirm_dialog/confirm_dialog.ts          |  60 ++-
 .../v6/angular/app/shared/styles/common.scss  |  91 ++++
 .../app/shared/styles/configuration.scss      |  52 ---
 .../angular/app/shared/styles/overview.scss   |  35 +-
 27 files changed, 884 insertions(+), 162 deletions(-)
 create mode 100644 src/devtools/mobileharness/fe/v6/angular/app/core/services/mock_data/hosts/overview_13.ts
 create mode 100644 src/devtools/mobileharness/fe/v6/angular/app/shared/styles/common.scss

diff --git a/src/devtools/mobileharness/fe/v6/angular/app/core/services/mock_data/hosts/overview_13.ts b/src/devtools/mobileharness/fe/v6/angular/app/core/services/mock_data/hosts/overview_13.ts
new file mode 100644
index 0000000000..146d6075f9
--- /dev/null
+++ b/src/devtools/mobileharness/fe/v6/angular/app/core/services/mock_data/hosts/overview_13.ts
@@ -0,0 +1,108 @@
+import {DeviceSummary, HostOverview} from '../../../models/host_overview';
+import {MockHostScenario} from '../models';
+
+import {createDefaultUiStatus} from './ui_status_utils';
+
+const overview: HostOverview = {
+  hostName: 'decommission-test-host.prod.example.com',
+  ip: '192.168.13.113',
+  os: 'gLinux',
+  labTypeDisplayNames: ['Satellite Lab'],
+  labServer: {
+    connectivity: {
+      state: 'RUNNING',
+      title: 'Running',
+      tooltip:
+        'Host is running and connected. OmniLab is receiving heartbeats.',
+    },
+    activity: {
+      state: 'STARTED',
+      title: 'Started',
+      tooltip:
+        'The Lab Server process was started by the release system, and OmniLab is receiving heartbeats.',
+    },
+    version: 'R126.0.0',
+    passThroughFlags: '',
+  },
+  daemonServer: {
+    status: {
+      state: 'RUNNING',
+      title: 'Running',
+      tooltip: 'The Daemon Server is running.',
+    },
+    version: '24.09.01',
+  },
+  properties: {},
+};
+
+const deviceSummaries: DeviceSummary[] = [
+  {
+    id: 'MISSING-DEV-1',
+    healthState: {
+      health: 'OUT_OF_SERVICE_NEEDS_FIXING',
+      title: 'Out of Service (Needs Fixing)',
+      tooltip: 'Device is missing.',
+    },
+    types: [{type: 'AndroidRealDevice', isAbnormal: false}],
+    deviceStatus: {isCritical: true, status: 'MISSING'},
+    label: 'old-device-1',
+    requiredDims: 'pool:missing',
+    model: 'Pixel 6',
+    version: '13',
+  },
+  {
+    id: 'MISSING-DEV-2',
+    healthState: {
+      health: 'OUT_OF_SERVICE_NEEDS_FIXING',
+      title: 'Out of Service (Needs Fixing)',
+      tooltip: 'Device is missing.',
+    },
+    types: [{type: 'AndroidRealDevice', isAbnormal: false}],
+    deviceStatus: {isCritical: true, status: 'MISSING'},
+    label: 'old-device-2',
+    requiredDims: 'pool:missing',
+    model: 'Pixel 6 Pro',
+    version: '13',
+  },
+  {
+    id: 'MISSING-DEV-3',
+    healthState: {
+      health: 'OUT_OF_SERVICE_NEEDS_FIXING',
+      title: 'Out of Service (Needs Fixing)',
+      tooltip: 'Device is missing.',
+    },
+    types: [{type: 'AndroidRealDevice', isAbnormal: false}],
+    deviceStatus: {isCritical: true, status: 'MISSING'},
+    label: 'old-device-3',
+    requiredDims: 'pool:missing',
+    model: 'Pixel 7',
+    version: '14',
+  },
+  {
+    id: 'ACTIVE-DEV-4',
+    healthState: {
+      health: 'IN_SERVICE_IDLE',
+      title: 'In Service (Idle)',
+      tooltip: 'Device is healthy and ready for tasks.',
+    },
+    types: [{type: 'AndroidRealDevice', isAbnormal: false}],
+    deviceStatus: {isCritical: false, status: 'IDLE'},
+    label: 'active-device',
+    requiredDims: 'pool:active',
+    model: 'Pixel 8',
+    version: '14',
+  },
+];
+
+/** Mock host overview data. */
+export const OVERVIEW_13: MockHostScenario = {
+  hostName: 'decommission-test-host.prod.example.com',
+  scenarioName: 'Overview 13: Decommission Devices',
+  overview,
+  deviceSummaries,
+  hostConfigResult: {
+    hostConfig: undefined,
+    uiStatus: createDefaultUiStatus(),
+  },
+  defaultDeviceConfig: null,
+};
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/core/services/mock_data/index.ts b/src/devtools/mobileharness/fe/v6/angular/app/core/services/mock_data/index.ts
index 360fb997e5..94c6131577 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/core/services/mock_data/index.ts
+++ b/src/devtools/mobileharness/fe/v6/angular/app/core/services/mock_data/index.ts
@@ -49,6 +49,7 @@ import {OVERVIEW_09} from './hosts/overview_09';
 import {OVERVIEW_10} from './hosts/overview_10';
 import {OVERVIEW_11} from './hosts/overview_11';
 import {OVERVIEW_12} from './hosts/overview_12';
+import {OVERVIEW_13} from './hosts/overview_13';
 import {MockDeviceScenario, MockHostScenario} from './models';
 
 /**
@@ -107,4 +108,5 @@ export const MOCK_HOST_SCENARIOS: MockHostScenario[] = [
   OVERVIEW_10,
   OVERVIEW_11,
   OVERVIEW_12,
+  OVERVIEW_13,
 ];
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_empty/device_empty.ng.html b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_empty/device_empty.ng.html
index 90c7ea63da..16deaba29c 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_empty/device_empty.ng.html
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_empty/device_empty.ng.html
@@ -14,7 +14,7 @@ <h3 class="host-missing-title">Host Configuration Not Found</h3>
         </p>
         <a
           href="/hosts/{{ hostName }}"
-          class="wizard-button wizard-button-primary"
+          class="primary-button"
           target="_blank"
           rel="noopener noreferrer"
         >
@@ -58,7 +58,7 @@ <h3 class="empty-config-title">{{ title }}</h3>
           </mat-form-field>
           <button
             mat-button
-            class="load-button wizard-button wizard-button-primary"
+            class="load-button primary-button"
             (click)="loadAndReviewConfig()"
           >
             Load & Review Configuration
@@ -72,7 +72,7 @@ <h3 class="empty-config-title">{{ title }}</h3>
   }
 
   <ng-template #actionsTemplate>
-    <button mat-button mat-dialog-close class="wizard-button wizard-button-secondary">
+    <button mat-button mat-dialog-close class="cancel-button">
       Cancel
     </button>
   </ng-template>
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_empty/device_empty.scss b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_empty/device_empty.scss
index 0866405625..bce1c34ece 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_empty/device_empty.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_empty/device_empty.scss
@@ -1,4 +1,13 @@
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
+
+.primary-button {
+  @include common.shared-button('primary');
+}
+
+.cancel-button {
+  @include common.shared-button('secondary');
+}
 
 .empty-config-grid {
   @media (min-width: 640px) {
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_settings/device_settings.ng.html b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_settings/device_settings.ng.html
index 6d33134ee5..dcadd029b8 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_settings/device_settings.ng.html
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_settings/device_settings.ng.html
@@ -59,14 +59,14 @@
       <app-footer [param]="{deviceId: deviceId, hostName: ''}" class="main-footer">
         <ng-container footer-buttons>
           <button
-            class="wizard-button wizard-button-secondary"
+            class="discard-button"
             [disabled]="!isCategoryDirty(activeSection())"
             (click)="discard()"
           >
             Discard Changes
           </button>
           <button
-            class="wizard-button wizard-button-primary"
+            class="save-button"
             [disabled]="!isCategoryDirty(activeSection()) || hasError || saving()"
             (click)="save()"
           >
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_settings/device_settings.scss b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_settings/device_settings.scss
index 9eaef9f121..d780f92410 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_settings/device_settings.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_settings/device_settings.scss
@@ -1,5 +1,18 @@
 @use '@angular/material' as mat;
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
+
+.discard-button {
+  @include common.shared-button('secondary');
+}
+
+.save-button {
+  @include common.shared-button('primary');
+}
+
+.wizard-button-spinner {
+  margin-right: 0.5rem;
+}
 
 :host {
   @include mat.button-toggle-overrides((
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_wizard/device_wizard.ng.html b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_wizard/device_wizard.ng.html
index 321de69828..4f6c10524a 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_wizard/device_wizard.ng.html
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_wizard/device_wizard.ng.html
@@ -53,9 +53,9 @@
       ></app-review-table>
     </main>
     <ng-template #actionsTemplate>
-      <button mat-dialog-close class="wizard-button wizard-button-tertiary"> Cancel </button>
+      <button mat-dialog-close class="cancel-button"> Cancel </button>
       <button
-        class="wizard-button wizard-button-primary"
+        class="apply-button"
         [disabled]="applyChangesDisabled() || verifying()"
         (click)="submit()"
       >
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_wizard/device_wizard.scss b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_wizard/device_wizard.scss
index 4194d0fdce..185d1765c6 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_wizard/device_wizard.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/device_wizard/device_wizard.scss
@@ -1,5 +1,14 @@
 @use '@angular/material' as mat;
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
+
+.cancel-button {
+  @include common.shared-button('tertiary');
+}
+
+.apply-button {
+  @include common.shared-button('primary');
+}
 
 :host {
   @include mat.stepper-overrides((
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/host_managed/host_managed.ng.html b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/host_managed/host_managed.ng.html
index 3d16e916dc..7771fc9345 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/host_managed/host_managed.ng.html
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/host_managed/host_managed.ng.html
@@ -35,10 +35,10 @@ <h3 class="host-managed-title">Host Default Configuration</h3>
   </mat-dialog-content>
   <ng-template #actionsTemplate>
     <mat-dialog-actions align="end" class="actions-container">
-      <button mat-button mat-dialog-close class="wizard-button wizard-button-secondary"
+      <button mat-button mat-dialog-close class="close-button"
         >Close</button
       >
-      <a href="/hosts/{{ hostName }}" class="wizard-button wizard-button-primary">Go to Host Configuration</a>
+      <a href="/hosts/{{ hostName }}" class="go-to-host-button">Go to Host Configuration</a>
     </mat-dialog-actions>
   </ng-template>
 </app-dialog>
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/host_managed/host_managed.scss b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/host_managed/host_managed.scss
index f161080d26..43db5d6090 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/host_managed/host_managed.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_config/host_managed/host_managed.scss
@@ -1,4 +1,5 @@
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
 
 .host-managed-content {
   font-size: 0.875rem;
@@ -63,9 +64,14 @@
   display: flex;
   gap: 0.75rem;
   align-items: center;
+}
 
-  a {
-    text-decoration: none;
-    font-family: config.$labconsole-font;
-  }
+.close-button {
+  @include common.shared-button('secondary');
+}
+
+.go-to-host-button {
+  @include common.shared-button('primary');
+  text-decoration: none;
+  font-family: config.$labconsole-font;
 }
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_overview_tab/device_overview_tab.scss b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_overview_tab/device_overview_tab.scss
index ddcfb37ed8..59e8acfdd4 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_overview_tab/device_overview_tab.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/device_detail/components/device_overview_tab/device_overview_tab.scss
@@ -561,10 +561,6 @@
   font-size: 0.9rem;
 }
 
-
-
-
-
 .mt-6 {
   margin-top: 1.5rem;
 }
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_empty/host_empty.ng.html b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_empty/host_empty.ng.html
index fbc476faa6..fdd49102db 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_empty/host_empty.ng.html
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_empty/host_empty.ng.html
@@ -33,7 +33,7 @@ <h3 class="empty-config-title">{{ title }}</h3>
           />
         </mat-form-field>
         <button
-          class="load-button wizard-button wizard-button-primary"
+          class="load-button"
           (click)="loadAndReviewConfig()"
         >
           Load & Review Configuration
@@ -46,7 +46,7 @@ <h3 class="empty-config-title">{{ title }}</h3>
   </mat-dialog-content>
 
   <ng-template #actionsTemplate>
-    <button mat-button mat-dialog-close class="wizard-button wizard-button-tertiary">
+    <button mat-button mat-dialog-close class="cancel-button">
       Cancel
     </button>
   </ng-template>
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_empty/host_empty.scss b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_empty/host_empty.scss
index cee782924c..1931a0bdc8 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_empty/host_empty.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_empty/host_empty.scss
@@ -1,7 +1,16 @@
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
+
+.load-button {
+  @include common.shared-button('primary');
+}
+
+.cancel-button {
+  @include common.shared-button('tertiary');
+}
 
 .empty-config-grid {
-   @media (min-width: 640px) {
+  @media (min-width: 640px) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_wizard/host_wizard.ng.html b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_wizard/host_wizard.ng.html
index 9dbc658164..3772dd8136 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_wizard/host_wizard.ng.html
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_wizard/host_wizard.ng.html
@@ -82,9 +82,9 @@ <h4 class="default-wifi-title text-gray-700">Device Wi-Fi</h4>
       ></app-review-table>
     </main>
     <ng-template #actionsTemplate>
-      <button mat-dialog-close class="wizard-button wizard-button-tertiary"> Cancel </button>
+      <button mat-dialog-close class="cancel-button"> Cancel </button>
       <button
-        class="wizard-button wizard-button-primary"
+        class="apply-button"
         [disabled]="applyChangesDisabled() || verifying()"
         (click)="submit()"
       >
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_wizard/host_wizard.scss b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_wizard/host_wizard.scss
index 52169e7e43..133bb70f6b 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_wizard/host_wizard.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_config/host_wizard/host_wizard.scss
@@ -1,4 +1,13 @@
 @use '../../../../../shared/styles/configuration' as config;
+@use '../../../../../shared/styles/common';
+
+.cancel-button {
+  @include common.shared-button('tertiary');
+}
+
+.apply-button {
+  @include common.shared-button('primary');
+}
 
 .default-title,
 .review-title {
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/host_overview.ng.html b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/host_overview.ng.html
index d2b77b6c38..c9ddf8b275 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/host_overview.ng.html
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/host_overview.ng.html
@@ -80,8 +80,8 @@
             >help_outline</mat-icon
           >
         </dt>
-        <dd [class.grid-tight-dd]="!isEditingFlags">
-          @if(isEditingFlags) {
+        <dd [class.grid-tight-dd]="!isEditingFlags()">
+          @if(isEditingFlags()) {
             <div class="flags-edit-container">
               <textarea
                 [(ngModel)]="editedFlags"
@@ -165,7 +165,7 @@ <h4 class="device-toolbar-header">
                   <span class="action-button-text">Remote Control</span>
                 </button>
                 @if(decommissionMissingCount() > 0) {
-                  <button mat-flat-button class="action-button" [matTooltip]="'Decommission Missing (' + decommissionMissingCount() + ')'">
+                  <button mat-flat-button class="action-button" [matTooltip]="'Decommission Missing (' + decommissionMissingCount() + ')'" (click)="decommissionMissing()">
                     <mat-icon>delete_sweep</mat-icon>
                     <span class="action-button-text">Decommission Missing ({{decommissionMissingCount()}})</span>
                   </button>
@@ -204,7 +204,7 @@ <h4 class="device-toolbar-header">
                   @if(isTestbed(element)) {
                     <button mat-icon-button aria-label="expand row"
                       (click)="toggleRow(element); $event.stopPropagation()">
-                      <mat-icon class="expand-icon" [class.expanded]="expandedElement === element">chevron_right</mat-icon>
+                      <mat-icon class="expand-icon" [class.expanded]="expandedElement() === element">chevron_right</mat-icon>
                     </button>
                   }
                 </td>
@@ -369,7 +369,7 @@ <h4 class="device-toolbar-header">
               <ng-container matColumnDef="expandedDetail">
                 <td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
                   <div class="element-detail"
-                       [class.expanded]="element === expandedElement">
+                       [class.expanded]="element === expandedElement()">
                        @if(element.subDevices) {
                          <div class="sub-device-wrapper">
                            <table mat-table [dataSource]="element.subDevices" class="sub-device-table">
@@ -437,7 +437,7 @@ <h4 class="device-toolbar-header">
               <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="sticky-header"></tr>
               <tr mat-row *matRowDef="let element; columns: displayedColumns;"
                   class="element-row"
-                  [class.expanded-row]="expandedElement === element"
+                  [class.expanded-row]="expandedElement() === element"
                   (click)="isTestbed(element) ? toggleRow(element) : null">
               </tr>
               <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
@@ -519,3 +519,22 @@ <h4 class="device-toolbar-header">
     </div>
   </ng-template>
 }
+<!-- New line for decommission dialog trigger -->
+<ng-template #decommissionDialogContent let-devices="devices">
+  <div class="decommission-box">
+    <p class="text-gray-600">This will <b>permanently remove</b> the selected devices from the Lab Console inventory. This action cannot be undone.</p>
+    <div class="items-list-container">
+      <p class="items-list-label">
+          <span class="material-icons info-icon-small">info</span> Devices to be decommissioned:
+      </p>
+      <div class="items-scroll-container custom-scrollbar">
+        <ul class="items-list">
+          @for(d of devices; track d.id) {
+            <li class="item-row"><span class="item-dot"></span>{{d.id}}</li>
+          }
+        </ul>
+      </div>
+    </div>
+    <p class="note-text text-gray-500">If these devices connect again later, they will be discovered as new devices.</p>
+  </div>
+</ng-template>
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/host_overview.ts b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/host_overview.ts
index a7287bd465..89208a95d6 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/host_overview.ts
+++ b/src/devtools/mobileharness/fe/v6/angular/app/features/host_detail/components/host_overview/host_overview.ts
@@ -15,8 +15,10 @@ import {
   OnInit,
   signal,
   SimpleChanges,
+  TemplateRef,
+  ViewChild,
 } from '@angular/core';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
 import {FormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -30,7 +32,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatTableDataSource, MatTableModule} from '@angular/material/table';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {RouterLink} from '@angular/router';
-import {delay} from 'rxjs/operators';
+import {delay, map, tap} from 'rxjs/operators';
 import {
   HealthState,
   type DeviceDimension,
@@ -54,6 +56,7 @@ import {
   SearchableListOverlayComponent,
   SearchableListOverlayData,
 } from '../../../../shared/components/searchable_list_overlay/searchable_list_overlay';
+import {SnackBarService} from '../../../../shared/services/snackbar_service';
 import {dateUtils} from '../../../../shared/utils/date_utils';
 import {objectUtils} from '../../../../shared/utils/object_utils';
 
@@ -151,20 +154,37 @@ export class HostOverviewPage implements OnInit, OnChanges {
   private readonly dialog = inject(MatDialog);
   private readonly hostService = inject(HOST_SERVICE);
   private readonly destroyRef = inject(DestroyRef);
+  private readonly snackBar = inject(SnackBarService);
 
   readonly objectUtils = objectUtils;
   readonly dateUtils = dateUtils;
   @Input({required: true}) host!: HostOverview;
 
+  isEditingFlags = signal(false);
+  editedFlags = '';
+  isSavingFlags = signal(false);
+
   deviceDataSource = new MatTableDataSource<DeviceSummary>();
   selection = new SelectionModel<DeviceSummary>(true, []);
+
+  @ViewChild('decommissionDialogContent')
+  decommissionDialogContent!: TemplateRef<{}>;
+  decommissionMissingCount = toSignal(
+    this.selection.changed.pipe(
+      map(
+        () =>
+          this.selection.selected.filter(
+            (device) => device.deviceStatus.status === 'MISSING',
+          ).length,
+      ),
+    ),
+    {initialValue: 0},
+  );
+
   deviceFilterInput = '';
   deviceFilterValue = '';
-  isEditingFlags = false;
-  editedFlags = '';
   isDeviceLoading = signal(false);
-  isSavingFlags = signal(false);
-  expandedElement: DeviceSummary | null = null;
+  expandedElement = signal<DeviceSummary | null>(null);
 
   // --- Dimensions Overlay State ---
   activeOverlay = signal<{
@@ -303,7 +323,7 @@ export class HostOverviewPage implements OnInit, OnChanges {
           this.isDeviceLoading.set(false);
         },
         error: (err) => {
-          console.error('Failed to load devices:', err);
+          this.snackBar.showError(`Failed to load devices: ${err.message}`);
           this.isDeviceLoading.set(false);
         },
       });
@@ -352,14 +372,59 @@ export class HostOverviewPage implements OnInit, OnChanges {
     }`;
   }
 
-  decommissionMissingCount(): number {
-    return this.selection.selected.filter(
+  decommissionMissing() {
+    const missingDevices = this.selection.selected.filter(
       (device) => device.deviceStatus.status === 'MISSING',
-    ).length;
+    );
+
+    if (missingDevices.length === 0) {
+      return;
+    }
+
+    const dialogData = {
+      title: `Decommission ${missingDevices.length} Device${
+        missingDevices.length > 1 ? 's' : ''
+      }?`,
+      contentTemplate: this.decommissionDialogContent,
+      contentTemplateContext: {devices: missingDevices},
+      type: 'error',
+      primaryButtonLabel: 'Decommission',
+      secondaryButtonLabel: 'Cancel',
+      onConfirm: () => this.decommissionDevices(missingDevices),
+    };
+
+    this.dialog.open(ConfirmDialog, {
+      panelClass: 'confirm-dialog-panel',
+      data: dialogData,
+      disableClose: true,
+    });
+  }
+
+  private decommissionDevices(devices: DeviceSummary[]) {
+    return this.hostService
+      .decommissionMissingDevices(
+        this.host.hostName,
+        devices.map((d) => d.id),
+      )
+      .pipe(
+        delay(1000),
+        tap(() => {
+          const decommissionedIds = new Set(devices.map((d) => d.id));
+          this.deviceDataSource.data = this.deviceDataSource.data.filter(
+            (d) => !decommissionedIds.has(d.id),
+          );
+          this.selection.clear();
+          this.snackBar.showSuccess(
+            `${devices.length} devices decommissioned successfully.`,
+          );
+        }),
+      );
   }
 
   toggleRow(element: DeviceSummary) {
-    this.expandedElement = this.expandedElement === element ? null : element;
+    this.expandedElement.set(
+      this.expandedElement() === element ? null : element,
+    );
   }
 
   isTestbed(element: DeviceSummary): boolean {
@@ -512,16 +577,16 @@ export class HostOverviewPage implements OnInit, OnChanges {
 
   startEditFlags() {
     this.editedFlags = this.host.labServer.passThroughFlags;
-    this.isEditingFlags = true;
+    this.isEditingFlags.set(true);
   }
 
   cancelEditFlags() {
-    this.isEditingFlags = false;
+    this.isEditingFlags.set(false);
   }
 
   saveFlags() {
     if (this.editedFlags === this.host.labServer.passThroughFlags) {
-      this.isEditingFlags = false;
+      this.isEditingFlags.set(false);
       return;
     }
 
@@ -532,13 +597,12 @@ export class HostOverviewPage implements OnInit, OnChanges {
       .subscribe({
         next: () => {
           this.host.labServer.passThroughFlags = this.editedFlags;
-          this.isEditingFlags = false;
+          this.isEditingFlags.set(false);
           this.isSavingFlags.set(false);
           this.showRestartDialog();
         },
         error: (err) => {
-          console.error('Failed to save flags:', err);
-          alert(`Failed to save flags: ${err.message}`);
+          this.snackBar.showError(`Failed to save flags: ${err.message}`);
           this.isSavingFlags.set(false);
         },
       });
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/entry_chip/entry_chip.ng.html b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/entry_chip/entry_chip.ng.html
index 52953e97ab..4b267ba959 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/entry_chip/entry_chip.ng.html
+++ b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/entry_chip/entry_chip.ng.html
@@ -28,7 +28,7 @@
           [matChipInputFor]="chipGrid"
         />
       </mat-form-field>
-      <button class="wizard-button wizard-button-secondary" (click)="add()"> Add </button>
+      <button class="add-button" (click)="add()"> Add </button>
     </div>
   } @else {
     <div class="chip-container">
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/entry_chip/entry_chip.scss b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/entry_chip/entry_chip.scss
index 0293eaa08d..d4b1f04f4e 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/entry_chip/entry_chip.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/entry_chip/entry_chip.scss
@@ -1,5 +1,9 @@
 @use '../../../styles/configuration' as config;
+@use '../../../styles/common';
 
+.add-button {
+  @include common.shared-button('secondary');
+}
 
 .entry-chip-container {
   font-family: config.$labconsole-font;
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/wizard_stepper/wizard_stepper.ng.html b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/wizard_stepper/wizard_stepper.ng.html
index b42b462980..39e6c36eda 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/wizard_stepper/wizard_stepper.ng.html
+++ b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/wizard_stepper/wizard_stepper.ng.html
@@ -28,13 +28,13 @@
   </div>
 
   <ng-template #actionsTemplate>
-    <button mat-dialog-close class="wizard-button wizard-button-tertiary"> Cancel </button>
+    <button mat-dialog-close class="cancel-button"> Cancel </button>
     @if (currentStepIndex() > 0) {
-      <button class="wizard-button wizard-button-secondary" (click)="previousStep()"> Back </button>
+      <button class="back-button" (click)="previousStep()"> Back </button>
     }
     @if (currentStepIndex() < WIZARD_STEPS.length - 1) {
       <button
-        class="wizard-button wizard-button-primary"
+        class="next-button"
         (click)="nextStep()"
         [disabled]="nextStepDisabled"
       >
@@ -43,12 +43,12 @@
     }
     @if (currentStepIndex() === WIZARD_STEPS.length - 1) {
       <button
-        class="wizard-button wizard-button-primary"
+        class="apply-button"
         (click)="apply.emit()"
         [disabled]="applyChangesDisabled || verifying()"
       >
         @if (verifying()) {
-          <mat-spinner [diameter]="20" class="wizard-button-spinner"></mat-spinner>
+          <mat-spinner [diameter]="20" class="shared-button-spinner"></mat-spinner>
           Verifying...
         } @else {
           Apply Changes
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/wizard_stepper/wizard_stepper.scss b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/wizard_stepper/wizard_stepper.scss
index 83b77367b9..72c0acbaed 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/wizard_stepper/wizard_stepper.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/config_common/wizard_stepper/wizard_stepper.scss
@@ -1,5 +1,18 @@
 @use '@angular/material' as mat;
 @use '../../../styles/configuration' as config;
+@use '../../../styles/common';
+
+.cancel-button {
+  @include common.shared-button('tertiary');
+}
+
+.back-button {
+  @include common.shared-button('secondary');
+}
+
+.next-button, .apply-button {
+  @include common.shared-button('primary');
+}
 
 :host {
   @include mat.stepper-overrides((
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.ng.html b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.ng.html
index 3c564f1958..6b81362411 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.ng.html
+++ b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.ng.html
@@ -1,18 +1,36 @@
-<mat-dialog-content class="sub-modal-content">
-  <mat-icon class="sub-modal-icon" [class]="iconUI.iconColorClass">
-    {{ iconUI.icon }}
-  </mat-icon>
+<div class="confirm-dialog-container">
+  <div class="confirm-dialog-header">
+    <mat-icon class="sub-modal-icon" [class]="iconUI.iconColorClass">
+      {{ iconUI.icon }}
+    </mat-icon>
+    <h3 class="text-gray-800">{{ data.title }}</h3>
+  </div>
+
+  <mat-dialog-content class="sub-modal-content">
+    @if(data.contentTemplate) {
+      <div class="html-content">
+        <ng-container *ngTemplateOutlet="data.contentTemplate; context: data.contentTemplateContext">
+        </ng-container>
+      </div>
+    } @else {
+      <p class="text-gray-600">{{ data.content }}</p>
+    }
+  </mat-dialog-content>
 
-  <h3 class="text-gray-800">{{ data.title }}</h3>
-  <p class="text-gray-600">{{ data.content }}</p>
   <mat-dialog-actions align="center" class="sub-modal-actions">
     @if (data.secondaryButtonLabel) {
-      <button class="wizard-button wizard-button-secondary" [mat-dialog-close]="'secondary'">
+      <button class="secondary-button" [mat-dialog-close]="'secondary'" [disabled]="isLoading()">
         {{ data.secondaryButtonLabel }}
       </button>
     }
-    <button class="wizard-button wizard-button-primary" [mat-dialog-close]="'primary'">
+    <button class="primary-button"
+            [class.destructive]="data.type === 'error'"
+            (click)="onConfirm()"
+            [disabled]="isLoading()">
+      @if (isLoading()) {
+        <mat-spinner diameter="20" class="shared-button-spinner"></mat-spinner>
+      }
       {{ data.primaryButtonLabel }}
     </button>
   </mat-dialog-actions>
-</mat-dialog-content>
+</div>
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.scss b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.scss
index 6c50ad0791..2232bf04ba 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.scss
@@ -1,38 +1,382 @@
-@use '../../styles/configuration' as config;
+@use '@angular/material' as mat;
+@use '../../styles/common';
+@use '../../styles/typography';
 
-.sub-modal-content {
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  background: white;
+::ng-deep body .confirm-dialog-panel {
+  @include mat.dialog-overrides((
+    container-shape: .5rem,
+  ));
+}
+
+.confirm-dialog-container {
   padding: 1.5rem;
-  border-radius: 0.5rem;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
-  z-index: 70;
-  text-align: center;
-  border: 1px solid #e2e8f0;
-  font-family: config.$labconsole-font;
-  letter-spacing: normal;
+  min-width: 24rem;
+  max-width: min-content;
+}
+
+.confirm-dialog-header {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 1rem;
 
   h3 {
     font-weight: 600;
     margin: 0;
     font-size: 1.125rem;
     line-height: 1.75rem;
+    margin-bottom: 1rem;
   }
+}
+
+.sub-modal-content {
+  text-align: center;
+  font-family: typography.$labconsole-font;
+  letter-spacing: normal;
+  padding: 0;
+  max-height: 60vh;
+  overflow-y: auto;
+  @include common.shared-scrollbar-style();
 
   p {
     font-size: 0.875rem;
     line-height: 1.25rem;
     max-width: 24rem;
+    margin-left: auto;
+    margin-right: auto;
     margin-bottom: 1.5rem;
   }
+
+  .html-content {
+    text-align: left;
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+    color: #374151;
+
+    ::ng-deep {
+      mat-icon,
+      .material-icons {
+        font-family: 'Material Icons';
+        font-weight: normal;
+        font-style: normal;
+        display: inline-block;
+        line-height: 1;
+        text-transform: none;
+        letter-spacing: normal;
+        word-wrap: normal;
+        white-space: nowrap;
+        direction: ltr;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -moz-osx-font-smoothing: grayscale;
+        font-feature-settings: 'liga';
+      }
+
+      // Requirements Box (Blue)
+      .requirements-box {
+        background-color: rgba(#eff6ff, 0.5); // bg-blue-50/50
+        border: 1px solid #dbeafe; // border-blue-100
+        border-radius: 0.5rem;
+        padding: 1rem;
+        margin-bottom: 1.5rem;
+
+        h4 {
+          color: #1e3a8a; // text-blue-900
+          font-weight: 600;
+          font-size: 0.875rem;
+          margin: 0 0 0.75rem 0;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+
+          mat-icon,
+          .material-icons {
+            color: #2563eb; // text-blue-600
+            font-size: 1rem;
+            height: 1rem;
+            width: 1rem;
+          }
+        }
+
+        ul {
+          list-style: none;
+          padding: 0;
+          margin: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+
+          li {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: #374151; // text-gray-700
+            font-size: 0.875rem;
+
+            .dot {
+              width: 0.375rem;
+              height: 0.375rem;
+              border-radius: 9999px;
+              background-color: #60a5fa; // bg-blue-400
+              flex-shrink: 0;
+            }
+
+            code {
+              background-color: white;
+              border: 1px solid #dbeafe; // border-blue-100
+              padding: 0.125rem 0.375rem;
+              border-radius: 0.25rem;
+              color: #1d4ed8; // text-blue-700
+              font-family: 'Roboto Mono', monospace;
+              font-size: 0.75rem;
+              line-height: 1rem;
+            }
+
+            .status-badge {
+              color: #15803d; // text-green-700
+              background-color: #f0fdf4; // bg-green-50
+              border: 1px solid #dcfce7; // border-green-100
+              padding: 0.125rem 0.375rem;
+              border-radius: 0.25rem;
+              font-size: 0.75rem;
+              font-weight: 700;
+              line-height: 1rem;
+            }
+          }
+        }
+      }
+
+      // Incompatible Devices Section
+      .incompatible-devices-section {
+        h4 {
+          color: #111827; // text-gray-900
+          font-weight: 600;
+          font-size: 0.875rem;
+          margin-bottom: 0.75rem;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+
+          mat-icon,
+          .material-icons {
+            color: #ef4444; // text-red-500
+            font-size: 1rem;
+            height: 1rem;
+            width: 1rem;
+          }
+
+          .count {
+            color: #9ca3af; // text-gray-400
+            font-weight: 400;
+          }
+        }
+      }
+
+      // Generic Device List Box
+      .device-list-box {
+        border: 1px solid #e5e7eb; // border-gray-200
+        border-radius: 0.5rem;
+        background-color: white;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
+        max-height: 12rem;
+        overflow-y: auto;
+
+        @include common.shared-scrollbar-style();
+
+        .device-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 0.625rem;
+          border-bottom: 1px solid #f3f4f6; // border-gray-100
+          transition: background-color 0.2s;
+
+          &:last-child {
+            border-bottom: 0;
+          }
+          &:hover {
+            background-color: #f9fafb; // hover:bg-gray-50
+          }
+
+          .device-id {
+            font-family: 'Roboto Mono', monospace;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #374151; // text-gray-700
+          }
+
+          .reason-badge {
+            font-size: 0.75rem;
+            font-weight: 500;
+            color: #b91c1c; // text-red-700
+            background-color: #fef2f2; // bg-red-50
+            border: 1px solid #fee2e2; // border-red-100
+            padding: 0.125rem 0.5rem;
+            border-radius: 9999px;
+            line-height: 1rem;
+          }
+        }
+      }
+
+      // Connection Error (Amber Box)
+      .amber-box {
+        background-color: rgba(#fffbeb, 0.5); // bg-amber-50/50
+        border: 1px solid #fef3c7; // border-amber-100
+        border-radius: 0.5rem;
+        padding: 1rem;
+        margin-bottom: 1.25rem;
+
+        h4 {
+          color: #78350f; // text-amber-900
+          font-weight: 600;
+          font-size: 0.875rem;
+          margin: 0 0 0.5rem 0;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          mat-icon {
+            color: #d97706; // text-amber-600
+            font-size: 1rem;
+            height: 1rem;
+            width: 1rem;
+          }
+        }
+
+        p {
+          font-size: 0.875rem;
+          color: #92400e; // text-amber-800
+          line-height: 1.5;
+          margin-bottom: 0;
+          max-width: none; // Reset max-width for this p
+        }
+      }
+
+      // Capabilities List (Proxy Error)
+      .capabilities-list {
+        h4 {
+          color: #111827; // text-gray-900
+          font-weight: 600;
+          font-size: 0.875rem;
+          margin-bottom: 0.75rem;
+        }
+
+        .device-row-col {
+          display: flex;
+          flex-direction: column;
+          padding: 0.75rem;
+          border-bottom: 1px solid #f3f4f6;
+          transition: background-color 0.2s;
+
+          &:last-child {
+            border-bottom: 0;
+          }
+          &:hover {
+            background-color: #f9fafb;
+          }
+
+          .device-id {
+            font-family: 'Roboto Mono', monospace;
+            font-size: 0.875rem;
+            font-weight: 500;
+            color: #374151;
+          }
+
+          .capabilities {
+            font-size: 0.75rem;
+            color: #6b7280;
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+
+            mat-icon,
+            .material-icons {
+              font-size: 0.875rem;
+              height: 0.875rem;
+              width: 0.875rem;
+              color: #9ca3af;
+            }
+          }
+        }
+      }
+
+      .decommission-box {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+
+        p {
+          text-align: center;
+        }
+
+        .items-list-container {
+          background-color: #fef2f2; // red-50
+          border-radius: 0.5rem;
+          border: 1px solid #fee2e2; // red-100
+          padding: 0.75rem;
+          text-align: left; // match p margin
+
+          p.items-list-label {
+            font-size: 0.75rem;
+            color: #991b1b; // red-800
+            margin: 0;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+
+            .info-icon-small {
+              font-size: 0.875rem; // 14px
+              width: 0.875rem;
+              height: 0.875rem;
+            }
+          }
+        }
+
+        .items-scroll-container {
+          max-height: 8rem; // 32 * 0.25rem
+          overflow-y: auto;
+          padding-right: 0.25rem;
+          @include common.shared-scrollbar-style();
+        }
+
+        .items-list {
+          font-size: 0.75rem;
+          color: #374151; // gray-700
+          font-family: 'Roboto Mono', monospace;
+          margin: 0;
+          padding: 0;
+          list-style: none;
+
+          .item-row {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+          }
+
+          .item-dot {
+            width: 0.25rem;
+            height: 0.25rem;
+            border-radius: 9999px;
+            background-color: #f87171; // red-400
+            flex-shrink: 0;
+          }
+        }
+
+        .note-text {
+          font-size: 0.75rem;
+          line-height: 1rem;
+          text-align: center;
+          margin-top: 0;
+        }
+      }
+    }
+  }
 }
 
 .sub-modal-actions {
   padding: 0rem;
   gap: 0.75rem;
+  min-height: fit-content;
 }
 
 .sub-modal-icon {
@@ -56,3 +400,40 @@
 .error-icon {
   color: #c5221f;
 }
+
+.primary-button {
+  @include common.shared-button('primary');
+
+  &.destructive {
+    @include common.shared-button('destructive');
+  }
+}
+
+.secondary-button {
+  @include common.shared-button('secondary');
+}
+
+
+
+@media (max-width: 640px) {
+  .sub-modal-content {
+    padding: 1.5rem 1rem;
+    max-width: 100%;
+
+    h3 {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      margin-bottom: 0.75rem;
+    }
+
+    p {
+      margin-bottom: 1rem;
+      max-width: 100%;
+    }
+
+    .html-content {
+      margin-bottom: 1rem;
+      width: 100%;
+    }
+  }
+}
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.ts b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.ts
index 5e9b559157..0952669cb1 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.ts
+++ b/src/devtools/mobileharness/fe/v6/angular/app/shared/components/confirm_dialog/confirm_dialog.ts
@@ -1,8 +1,22 @@
 import {CommonModule} from '@angular/common';
-import {ChangeDetectionStrategy, Component, inject, OnInit} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  OnInit,
+  signal,
+  TemplateRef,
+} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
-import {MAT_DIALOG_DATA, MatDialogModule} from '@angular/material/dialog';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
 import {MatIconModule} from '@angular/material/icon';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {Observable} from 'rxjs';
+import {finalize} from 'rxjs/operators';
 
 /**
  * A dialog to confirm the user's action.
@@ -13,18 +27,56 @@ import {MatIconModule} from '@angular/material/icon';
   templateUrl: './confirm_dialog.ng.html',
   styleUrl: './confirm_dialog.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, MatButtonModule, MatIconModule, MatDialogModule],
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatDialogModule,
+    MatProgressSpinnerModule,
+  ],
 })
 export class ConfirmDialog implements OnInit {
   readonly data = inject<{
-    title: string; content: string;
+    title: string;
+    content?: string;
+    contentTemplate?: TemplateRef<{}>;
+    contentTemplateContext?: {};
     type: 'info' | 'success' | 'warning' | 'error';
     primaryButtonLabel: string;
     secondaryButtonLabel: string;
+    onConfirm?: () => Observable<void>;
   }>(MAT_DIALOG_DATA);
 
+  private readonly dialogRef = inject(MatDialogRef<ConfirmDialog>);
+
+  isLoading = signal(false);
+
   ngOnInit() {}
 
+  onConfirm() {
+    if (this.data.onConfirm) {
+      this.isLoading.set(true);
+      this.data
+        .onConfirm()
+        .pipe(
+          finalize(() => {
+            this.isLoading.set(false);
+          }),
+        )
+        .subscribe({
+          next: () => {
+            this.dialogRef.close('primary');
+          },
+          error: () => {
+            // Optional: Handle error or keep dialog open
+            // For now, we assume the caller handles error reporting (e.g. snackbar)
+          },
+        });
+    } else {
+      this.dialogRef.close('primary');
+    }
+  }
+
   get iconUI() {
     switch (this.data.type) {
       case 'info':
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/shared/styles/common.scss b/src/devtools/mobileharness/fe/v6/angular/app/shared/styles/common.scss
new file mode 100644
index 0000000000..c722126218
--- /dev/null
+++ b/src/devtools/mobileharness/fe/v6/angular/app/shared/styles/common.scss
@@ -0,0 +1,91 @@
+@mixin shared-scrollbar-style() {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  transition: scrollbar-color 0.3s;
+
+  &:hover {
+    scrollbar-color: #bdc1c6 transparent;
+  }
+
+  &::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: transparent;
+    border-radius: 4px;
+    transition: background-color 0.3s;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background-color: #bdc1c6;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #9aa0a6;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+
+@mixin shared-button($type: 'primary') {
+  // Base styles for all buttons
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1.25rem;
+  border-radius: 0.25rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+  font-size: 0.875rem;
+  cursor: pointer;
+  letter-spacing: normal;
+
+  // Disabled state
+  &:disabled {
+    background-color: #e2e8f0;
+    color: #94a3b8;
+    cursor: not-allowed;
+    border: none;
+  }
+
+  // Type-specific styles
+  @if $type == 'primary' {
+    background-color: #0b57d0;
+    color: white;
+    &:not(:disabled):hover {
+      background-color: #0a4cb8;
+    }
+  } @else if $type == 'secondary' {
+    background-color: white;
+    color: #0b57d0;
+    border-color: #c2c2c2;
+    &:not(:disabled):hover {
+      background-color: #f0f5fe;
+    }
+  } @else if $type == 'tertiary' {
+    background-color: transparent;
+    color: #475569;
+    border-color: #c2c2c2;
+    &:not(:disabled):hover {
+      background-color: #f1f5f9;
+    }
+  } @else if $type == 'destructive' {
+    background-color: #d93025;
+    color: white;
+    &:not(:disabled):hover {
+      background-color: #c5221f;
+    }
+  }
+}
+
+// This class can be applied to a spinner element inside any button
+.shared-button-spinner {
+  margin-right: 0.375rem;
+  display: inline-block;
+}
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/shared/styles/configuration.scss b/src/devtools/mobileharness/fe/v6/angular/app/shared/styles/configuration.scss
index bfdecff091..26d4a5962a 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/shared/styles/configuration.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/shared/styles/configuration.scss
@@ -233,56 +233,4 @@ h1, h2, h3, h4, h5, h6, p {
   gap: 0.75rem;
 }
 
-.wizard-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1.25rem;
-  border-radius: 0.25rem;
-  font-weight: 500;
-  transition: all 0.2s;
-  border: 1px solid transparent;
-  font-size: 0.875rem;
-  cursor: pointer;
-  letter-spacing: normal;
-}
 
-.wizard-button:disabled {
-  background-color: #e2e8f0;
-  color: #94a3b8;
-  cursor: not-allowed;
-  border: none;
-}
-
-.wizard-button-primary {
-  background-color: #0b57d0;
-  color: white;
-}
-
-.wizard-button-primary:not(:disabled):hover {
-  background-color: #0a4cb8;
-}
-
-.wizard-button-secondary {
-  background-color: white;
-  color: #0b57d0;
-  border-color: #c2c2c2;
-}
-
-.wizard-button-secondary:not(:disabled):hover {
-  background-color: #f0f5fe;
-}
-
-.wizard-button-tertiary {
-  background-color: transparent;
-  color: #475569;
-  border-color: #c2c2c2;
-}
-
-.wizard-button-tertiary:not(:disabled):hover {
-  background-color: #f1f5f9;
-}
-
-.wizard-button-spinner {
-  margin-right: 0.375rem;
-}
diff --git a/src/devtools/mobileharness/fe/v6/angular/app/shared/styles/overview.scss b/src/devtools/mobileharness/fe/v6/angular/app/shared/styles/overview.scss
index 6521842b15..27fab01c40 100644
--- a/src/devtools/mobileharness/fe/v6/angular/app/shared/styles/overview.scss
+++ b/src/devtools/mobileharness/fe/v6/angular/app/shared/styles/overview.scss
@@ -1,4 +1,5 @@
-$labconsole-font:  Roboto, sans-serif;
+@use 'common';
+@forward 'typography';
 
 .overflow-ellipsis {
   overflow: hidden;
@@ -71,37 +72,7 @@ $labconsole-font:  Roboto, sans-serif;
 }
 
 .scroll-container {
-  scrollbar-width: thin;
-  scrollbar-color: transparent transparent;
-  transition: scrollbar-color 0.3s;
-
-  &:hover {
-    scrollbar-color: #bdc1c6 transparent;
-  }
-
-  &::-webkit-scrollbar {
-    height: 8px;
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-clip: padding-box;
-    background-color: transparent;
-    border-radius: 4px;
-    transition: background-color 0.3s;
-  }
-
-  &:hover::-webkit-scrollbar-thumb {
-    background-color: #bdc1c6;
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: #9aa0a6;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
+  @include common.shared-scrollbar-style();
 }
 
 .data-block {