feat(appstore,workspace): add App Store upgrade progress tracking and interactive workspace processes

ts_web/elements/ob-view-appstore.ts

@@ -19,6 +19,7 @@ export class ObViewAppStore extends DeesElement {
   accessor appStoreState: appstate.IAppStoreState = {
     apps: [],
     upgradeableServices: [],
+    upgradeOperations: [],
   };
 
   @state()
@@ -331,7 +332,10 @@ export class ObViewAppStore extends DeesElement {
 
   async connectedCallback() {
     super.connectedCallback();
-    await appstate.appStoreStatePart.dispatchAction(appstate.fetchAppStoreTemplatesAction, null);
+    await Promise.all([
+      appstate.appStoreStatePart.dispatchAction(appstate.fetchAppStoreTemplatesAction, null),
+      appstate.appStoreStatePart.dispatchAction(appstate.fetchAppStoreUpgradeOperationsAction, null),
+    ]);
   }
 
   public render(): TemplateResult {
@@ -357,6 +361,7 @@ export class ObViewAppStore extends DeesElement {
 
     return html`
       <ob-sectionheading>App Store</ob-sectionheading>
+      ${this.renderUpgradeOperations()}
       ${appTemplates.length === 0
         ? html`<div class="loading-spinner">Loading app templates...</div>`
         : html`
@@ -369,6 +374,27 @@ export class ObViewAppStore extends DeesElement {
     `;
   }
 
+  private renderUpgradeOperations(): TemplateResult | '' {
+    const visibleOperations = this.appStoreState.upgradeOperations
+      .filter((operation) => operation.status === 'running' || operation.status === 'failed')
+      .slice(0, 3);
+    if (visibleOperations.length === 0) return '';
+
+    return html`
+      <div class="detail-card">
+        <div class="section-label">Recent Upgrade Operations</div>
+        <div class="footprint-list">
+          ${visibleOperations.map((operation) => html`
+            <div class="footprint-item">
+              <span>${operation.serviceName}: ${operation.fromVersion} &rarr; ${operation.targetVersion}</span>
+              <span class="footprint-meta">${operation.status} / ${operation.step}</span>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+
   private renderDetailView(): TemplateResult {
     if (this.loading) {
       return html`