From 15eb13e156896d9a7c5997717aae9901bece86dd Mon Sep 17 00:00:00 2001
From: Matt Hill <matthewonthemoon@gmail.com>
Date: Mon, 12 Jul 2021 16:43:50 -0600
Subject: [PATCH] better subscriptions

---
 ui/package.json                               |   1 -
 .../install-wizard/alert/alert.component.html |   2 +-
 .../install-wizard/alert/alert.component.ts   |   2 +-
 .../complete/complete.component.html          |  10 +--
 .../dependents/dependents.component.html      |  73 +++++++++---------
 .../install-wizard.component.html             |  34 ++++----
 .../install-wizard/prebaked-wizards.ts        |  47 +++--------
 .../components/status/status.component.html   |   6 +-
 .../app/components/status/status.component.ts |  33 +-------
 ui/src/app/modules/sharing.module.ts          |  13 +---
 .../app-actions/app-actions.page.html         |   8 +-
 .../app-actions/app-actions.page.ts           |   6 +-
 .../app-config/app-config.page.html           |   4 +-
 .../apps-routes/app-config/app-config.page.ts |   8 +-
 .../app-interfaces/app-interfaces.page.html   |   4 +-
 .../app-interfaces/app-interfaces.page.ts     |   4 +-
 .../apps-routes/app-list/app-list.page.html   |  11 +--
 .../apps-routes/app-list/app-list.page.ts     |  55 ++++++++++++-
 .../app-manifest/app-manifest.page.html       |   2 +-
 .../app-restore/app-restore.page.ts           |   2 +-
 .../apps-routes/app-show/app-show.page.html   |  14 ++--
 .../apps-routes/app-show/app-show.page.ts     |  33 ++++----
 .../marketplace-list.page.html                |  14 ++--
 .../marketplace-show.page.html                |   6 +-
 ui/src/app/pipes/display-bulb.pipe.ts         |  36 ---------
 ui/src/app/pipes/ui.pipe.ts                   |  10 ---
 ui/src/app/services/api/mock-api.service.ts   |   1 -
 ui/src/app/services/api/mock-app-fixures.ts   |  15 ++--
 ui/src/app/services/config.service.ts         |  16 ++--
 ui/src/app/services/connection.service.ts     |   2 +-
 ui/src/app/services/patch-db/data-model.ts    |   3 +-
 .../img/{issue-bulb.png => danger-bulb.png}   | Bin
 .../{running-bulb.png => success-bulb.png}    | Bin
 33 files changed, 203 insertions(+), 272 deletions(-)
 delete mode 100644 ui/src/app/pipes/display-bulb.pipe.ts
 rename ui/src/assets/img/{issue-bulb.png => danger-bulb.png} (100%)
 rename ui/src/assets/img/{running-bulb.png => success-bulb.png} (100%)

diff --git a/ui/package.json b/ui/package.json
index e4583c943..ef0e6550a 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -24,7 +24,6 @@
     "@ionic/angular": "^5.6.0",
     "@ionic/storage": "^3.0.0",
     "@ionic/storage-angular": "^3.0.0",
-    "@ngrx/component": "^11.1.1",
     "@start9labs/emver": "^0.1.4",
     "ajv": "^6.12.6",
     "angularx-qrcode": "^11.0.0",
diff --git a/ui/src/app/components/install-wizard/alert/alert.component.html b/ui/src/app/components/install-wizard/alert/alert.component.html
index 364df9700..ab1f00ec8 100644
--- a/ui/src/app/components/install-wizard/alert/alert.component.html
+++ b/ui/src/app/components/install-wizard/alert/alert.component.html
@@ -5,6 +5,6 @@
         {{ params.title }}
       </ion-label>
     </div>
-    <div class="long-message" [innerHTML]="params.notes | markdown"></div>
+    <div class="long-message" [innerHTML]="params.message | markdown"></div>
   </div>
 </div>
diff --git a/ui/src/app/components/install-wizard/alert/alert.component.ts b/ui/src/app/components/install-wizard/alert/alert.component.ts
index 7ed0ec1c1..ba50dce1e 100644
--- a/ui/src/app/components/install-wizard/alert/alert.component.ts
+++ b/ui/src/app/components/install-wizard/alert/alert.component.ts
@@ -9,8 +9,8 @@ import { Loadable } from '../loadable'
 })
 export class AlertComponent implements OnInit, Loadable {
   @Input() params: {
-    alert: string
     title: string
+    message: string
     titleColor: string
   }
 
diff --git a/ui/src/app/components/install-wizard/complete/complete.component.html b/ui/src/app/components/install-wizard/complete/complete.component.html
index a6c563952..7d34c3c15 100644
--- a/ui/src/app/components/install-wizard/complete/complete.component.html
+++ b/ui/src/app/components/install-wizard/complete/complete.component.html
@@ -1,17 +1,17 @@
-<div *ngIf="!(loading$ | ngrxPush) && !params.skipCompletionDialogue" class="slide-content">
+<div *ngIf="!(loading$ | async) && !params.skipCompletionDialogue" class="slide-content">
   <div style="margin-top: 25px;">
     <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
-      <ion-label [color]="$color$ | ngrxPush" style="font-size: xx-large; font-weight: bold;">
-        {{successText}}
+      <ion-label [color]="color$ | async" style="font-size: xx-large; font-weight: bold;">
+        {{ successText }}
       </ion-label>
     </div>
     <div class="long-message">
-    {{summary}}
+    {{ summary }}
     </div>
   </div>
 </div>
 
-<div *ngIf="loading$ | ngrxPush" class="center-spinner">
+<div *ngIf="loading$ | async" class="center-spinner">
   <ion-spinner color="warning" name="lines"></ion-spinner>
   <ion-label class="long-message">{{label}}</ion-label>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/components/install-wizard/dependents/dependents.component.html b/ui/src/app/components/install-wizard/dependents/dependents.component.html
index 0fcb73dc5..94a04c346 100644
--- a/ui/src/app/components/install-wizard/dependents/dependents.component.html
+++ b/ui/src/app/components/install-wizard/dependents/dependents.component.html
@@ -1,42 +1,41 @@
-<div>
-  <div *ngIf="!(loading$ | ngrxPush)" class="slide-content">
-    <div style="margin-top: 25px;">
-      <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
-        <ion-label color="warning" style="font-size: xx-large; font-weight: bold;"
-          *ngIf="hasDependentViolation">
-          WARNING
-        </ion-label>
-        <ion-label color="success" style="font-size: x-large; font-weight: bold; text-transform: capitalize;"
-          *ngIf="!hasDependentViolation">
-          READY
-        </ion-label>
-      </div>
+<div *ngIf="loading$ | async" class="center-spinner">
+  <ion-spinner color="warning" name="lines"></ion-spinner>
+  <ion-label class="long-message">Checking for installed services which depend on {{ params.title }}...</ion-label>
+</div>
 
-      <div *ngIf="longMessage" class="long-message"      >
-        {{longMessage}}
-      </div>
-      <div style="margin: 25px 0px;">
-        <div style="border-width: 0px 0px 1px 0px; font-size: unset; text-align: left; font-weight: bold; margin-left: 13px; border-style: solid; border-color: var(--ion-color-light-tint);" 
-         *ngIf="hasDependentViolation"
-        >
-         <ion-text color="warning">Will Stop</ion-text>
-        </div>
-        <ion-item
-          style="--ion-item-background: rgb(0,0,0,0); margin-top: 5px"
-          *ngFor="let dep of dependentBreakages"
-        >
-          <ion-avatar style="position: relative; height: 4vh; width: 4vh" slot="start">
-            <img [src]="dep.iconURL" />
-          </ion-avatar>
-          <ion-label>
-              <h5>{{dep.title}}</h5>
-          </ion-label>
-        </ion-item>
+<div *ngIf="!(loading$ | async)" class="slide-content">
+  <div style="margin-top: 25px;">
+    <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
+      <ion-label color="warning" style="font-size: xx-large; font-weight: bold;"
+        *ngIf="hasDependentViolation">
+        WARNING
+      </ion-label>
+      <ion-label color="success" style="font-size: x-large; font-weight: bold; text-transform: capitalize;"
+        *ngIf="!hasDependentViolation">
+        READY
+      </ion-label>
+    </div>
+
+    <div *ngIf="longMessage" class="long-message"      >
+      {{ longMessage }}
+    </div>
+    <div style="margin: 25px 0px;">
+      <div style="border-width: 0px 0px 1px 0px; font-size: unset; text-align: left; font-weight: bold; margin-left: 13px; border-style: solid; border-color: var(--ion-color-light-tint);" 
+        *ngIf="hasDependentViolation"
+      >
+        <ion-text color="warning">Will Stop</ion-text>
       </div>
+      <ion-item
+        style="--ion-item-background: rgb(0,0,0,0); margin-top: 5px"
+        *ngFor="let dep of dependentBreakages | keyvalue"
+      >
+        <ion-avatar style="position: relative; height: 4vh; width: 4vh" slot="start">
+          <img [src]="dep.value.iconURL" />
+        </ion-avatar>
+        <ion-label>
+            <h5>{{ dep.value.title }}</h5>
+        </ion-label>
+      </ion-item>
     </div>
   </div>
-  <div *ngIf="loading$ | ngrxPush" class="center-spinner">
-    <ion-spinner color="warning" name="lines"></ion-spinner>
-    <ion-label class="long-message">Checking for installed services which depend on {{params.title}}...</ion-label>
-  </div>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/components/install-wizard/install-wizard.component.html b/ui/src/app/components/install-wizard/install-wizard.component.html
index 5065efa5a..277767d9b 100644
--- a/ui/src/app/components/install-wizard/install-wizard.component.html
+++ b/ui/src/app/components/install-wizard/install-wizard.component.html
@@ -2,7 +2,7 @@
   <ion-toolbar>
     <ion-label class="toolbar-label text-ellipses">
       <h1 class="toolbar-title">{{ params.toolbar.title }}</h1>
-      <h3 style="font-size: large; font-style: italic">{{params.toolbar.action}} <ion-text style="font-size: medium;" color="medium">{{ params.toolbar.version | displayEmver }}</ion-text></h3>
+      <h3 style="font-size: large; font-style: italic">{{ params.toolbar.action }} <ion-text style="font-size: medium;" color="medium">{{ params.toolbar.version | displayEmver }}</ion-text></h3>
     </ion-label>
   </ion-toolbar>
 </ion-header>
@@ -11,14 +11,13 @@
   <ion-slides *ngIf="!error" id="slide-show" style="--bullet-background: white" pager="false">
     <ion-slide *ngFor="let def of params.slideDefinitions">
       <!-- We can pass [transitions]="transitions" into the component if logic within the component needs to trigger a transition (not just bottom bar) -->
-      <dependencies #components *ngIf="def.slide.selector === 'dependencies'" [params]="def.slide.params"></dependencies>
+      <alert        #components *ngIf="def.slide.selector === 'alert'"        [params]="def.slide.params" style="width: 100%;"></alert>
       <notes        #components *ngIf="def.slide.selector === 'notes'"        [params]="def.slide.params" style="width: 100%;"></notes>
       <dependents   #components *ngIf="def.slide.selector === 'dependents'"   [params]="def.slide.params" [transitions]="transitions"></dependents>
       <complete     #components *ngIf="def.slide.selector === 'complete'"     [params]="def.slide.params" [transitions]="transitions"></complete>
     </ion-slide>
   </ion-slides>
 
-
   <div *ngIf="error" class="slide-content">
     <div style="margin-top: 25px;">
       <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
@@ -27,7 +26,7 @@
         </ion-label>
       </div>
       <div class="long-message">
-        {{error}}
+        {{ error }}
       </div>
     </div>
   </div>
@@ -38,24 +37,27 @@
     <ng-container *ngIf="!initializing && !error">
 
       <!-- cancel button if loading/not loading -->
-      <ion-button slot="start" *ngIf="v.loading && v.bar.cancel.whileLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline" color="medium">
-        <ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text > 16">{{cancel.text}}</ion-text>
+      <ion-button slot="start" *ngIf="(currentSlide.loading$ | async) && currentBottomBar.cancel.whileLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline" color="medium">
+        <ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text > 16">{{ cancel.text }}</ion-text>
         <ion-icon *ngIf="!cancel.text" name="close-outline"></ion-icon>
       </ion-button>
-      <ion-button slot="start" *ngIf="!v.loading && v.bar.cancel.afterLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline" color="medium">
-        <ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text > 16">{{cancel.text}}</ion-text>
+      <ion-button slot="start" *ngIf="!(currentSlide.loading$ | async) && currentBottomBar.cancel.afterLoading as cancel" (click)="transitions.cancel()" class="toolbar-button" fill="outline" color="medium">
+        <ion-text *ngIf="cancel.text" [class.smaller-text]="cancel.text > 16">{{ cancel.text }}</ion-text>
         <ion-icon *ngIf="!cancel.text" name="close-outline"></ion-icon>
       </ion-button>
 
-      <!-- next button -->
-      <ion-button slot="end" *ngIf="!v.loading && v.bar.next as next" (click)="transitions.next()" fill="outline" class="toolbar-button" color="primary">
-        <ion-text [class.smaller-text]="next.length > 16">{{next}}</ion-text>
-      </ion-button>
+      <!-- next/finish buttons -->
+      <ng-container *ngIf="!(currentSlide.loading$ | async)">
+        <!-- next -->
+        <ion-button slot="end" *ngIf="currentBottomBar.next as next" (click)="transitions.next()" fill="outline" class="toolbar-button" color="primary">
+          <ion-text [class.smaller-text]="next.length > 16">{{ next }}</ion-text>
+        </ion-button>
 
-      <!-- finish button -->
-      <ion-button slot="end" *ngIf="!v.loading && v.bar.finish as finish" (click)="transitions.final()" fill="outline" class="toolbar-button" color="primary">
-        <ion-text [class.smaller-text]="finish.length > 16">{{finish}}</ion-text>
-      </ion-button>
+        <!-- finish -->
+        <ion-button slot="end" *ngIf="currentBottomBar.finish as finish" (click)="transitions.final()" fill="outline" class="toolbar-button" color="primary">
+          <ion-text [class.smaller-text]="finish.length > 16">{{ finish }}</ion-text>
+        </ion-button>
+      </ng-container>
 
     </ng-container>
     <ng-container *ngIf="error">
diff --git a/ui/src/app/components/install-wizard/prebaked-wizards.ts b/ui/src/app/components/install-wizard/prebaked-wizards.ts
index bc20e5a99..0438b436c 100644
--- a/ui/src/app/components/install-wizard/prebaked-wizards.ts
+++ b/ui/src/app/components/install-wizard/prebaked-wizards.ts
@@ -1,10 +1,9 @@
 import { Injectable } from '@angular/core'
-import { InstalledPackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { Breakages } from 'src/app/services/api/api-types'
 import { exists } from 'src/app/util/misc.util'
 import { ApiService } from '../../services/api/api.service'
 import { InstallWizardComponent, SlideDefinition, TopbarParams } from './install-wizard.component'
-import { WizardAction } from './wizard-types'
 
 @Injectable({ providedIn: 'root' })
 export class WizardBaker {
@@ -17,10 +16,6 @@ export class WizardBaker {
   }): InstallWizardComponent['params'] {
     const { id, title, version, installAlert } = values
 
-    validate(id, exists, 'missing id')
-    validate(title, exists, 'missing title')
-    validate(version, exists, 'missing version')
-
     const action = 'install'
     const toolbar: TopbarParams = { action, title, version }
 
@@ -29,8 +24,8 @@ export class WizardBaker {
         slide: {
           selector: 'alert',
           params: {
-            alert: installAlert,
             title: 'Warning',
+            message: installAlert,
             titleColor: 'warning',
           },
         },
@@ -62,10 +57,6 @@ export class WizardBaker {
   }): InstallWizardComponent['params'] {
     const { id, title, version, installAlert } = values
 
-    validate(id, exists, 'missing id')
-    validate(title, exists, 'missing title')
-    validate(version, exists, 'missing version')
-
     const action = 'update'
     const toolbar: TopbarParams  = { action, title, version }
 
@@ -74,8 +65,8 @@ export class WizardBaker {
         slide: {
           selector: 'alert',
           params: {
-            alert: installAlert,
             title: 'Warning',
+            message: installAlert,
             titleColor: 'warning',
           },
         },
@@ -166,10 +157,6 @@ export class WizardBaker {
   }): InstallWizardComponent['params'] {
     const { id, title, version, installAlert } = values
 
-    validate(id, exists, 'missing id')
-    validate(title, exists, 'missing title')
-    validate(version, exists, 'missing version')
-
     const action = 'downgrade'
     const toolbar: TopbarParams  = { action, title, version }
 
@@ -178,8 +165,8 @@ export class WizardBaker {
         slide: {
           selector: 'alert',
           params: {
-            alert: installAlert,
             title: 'Warning',
+            message: installAlert,
             titleColor: 'warning',
           },
         },
@@ -222,11 +209,7 @@ export class WizardBaker {
   }): InstallWizardComponent['params'] {
     const { id, title, version, uninstallAlert } = values
 
-    validate(id, exists, 'missing id')
-    validate(title, exists, 'missing title')
-    validate(version, exists, 'missing version')
-
-    const action = 'uninstall' as WizardAction
+    const action = 'uninstall'
     const toolbar: TopbarParams  = { action, title, version }
 
     const slideDefinitions: SlideDefinition[] = [
@@ -234,8 +217,8 @@ export class WizardBaker {
         slide: {
           selector: 'alert',
           params: {
-            alert: uninstallAlert || defaultUninstallationWarning(title),
             title: 'Warning',
+            message: uninstallAlert || defaultUninstallWarning(title),
             titleColor: 'warning',
           },
         },
@@ -248,7 +231,7 @@ export class WizardBaker {
             action,
             verb: 'uninstalling',
             title,
-            fetchBreakages: () => this.apiService.dryRemovePackage({ id }).then(breakages => breakages ),
+            fetchBreakages: () => this.apiService.dryRemovePackage({ id }).then(breakages => breakages),
           },
         },
         bottomBar: { cancel: { whileLoading: { }, afterLoading: { text: 'Cancel' } }, next: 'Uninstall' },
@@ -274,10 +257,6 @@ export class WizardBaker {
   }): InstallWizardComponent['params'] {
     const { breakages, title, version } = values
 
-    validate(breakages, t => !!t && Array.isArray(t), 'missing breakages')
-    validate(title, exists, 'missing title')
-    validate(version, exists, 'missing version')
-
     const action = 'stop'
     const toolbar: TopbarParams  = { action, title, version }
 
@@ -298,7 +277,7 @@ export class WizardBaker {
     return { toolbar, slideDefinitions }
   }
 
-  configure (values: { breakages: Breakages, pkg: InstalledPackageDataEntry }): InstallWizardComponent['params'] {
+  configure (values: { breakages: Breakages, pkg: PackageDataEntry }): InstallWizardComponent['params'] {
     const { breakages, pkg } = values
     const { title, version } = pkg.manifest
     const action = 'configure'
@@ -321,12 +300,4 @@ export class WizardBaker {
   }
 }
 
-function validate<T> (t: T, test: (t: T) => Boolean, desc: string) {
-  if (!test(t)) {
-    console.error('failed validation', desc, t)
-    throw new Error(desc)
-  }
-}
-
-
-const defaultUninstallationWarning = serviceName => `Uninstalling ${ serviceName } will result in the deletion of its data.`
+const defaultUninstallWarning = serviceName => `Uninstalling ${ serviceName } will result in the deletion of its data.`
diff --git a/ui/src/app/components/status/status.component.html b/ui/src/app/components/status/status.component.html
index e4f1a2925..031ae01a2 100644
--- a/ui/src/app/components/status/status.component.html
+++ b/ui/src/app/components/status/status.component.html
@@ -1,9 +1,9 @@
 <p
-  [style.color]="'var(--ion-color-' + color + ')'"
+  [style.color]="'var(--ion-color-' + rendering.color + ')'"
   [style.font-size]="size"
   [style.font-style]="style"
   [style.font-weight]="weight"
 >
-  {{ display }}
-  <ion-spinner *ngIf="showDots" class="dots dots-small" name="dots" [color]="color"></ion-spinner>
+  {{ rendering.display }}
+  <ion-spinner *ngIf="rendering.showDots" class="dots dots-small" name="dots" [color]="color"></ion-spinner>
 </p>
diff --git a/ui/src/app/components/status/status.component.ts b/ui/src/app/components/status/status.component.ts
index a1dbac4da..bf326035d 100644
--- a/ui/src/app/components/status/status.component.ts
+++ b/ui/src/app/components/status/status.component.ts
@@ -1,7 +1,5 @@
 import { Component, Input } from '@angular/core'
-import { combineLatest } from 'rxjs'
-import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
-import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
+import { PkgStatusRendering } from 'src/app/services/pkg-status-rendering.service'
 
 @Component({
   selector: 'status',
@@ -9,36 +7,9 @@ import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
   styleUrls: ['./status.component.scss'],
 })
 export class StatusComponent {
-  @Input() pkgId: string
+  @Input() rendering: PkgStatusRendering
   @Input() size?: 'small' | 'medium' | 'large' = 'large'
   @Input() style?: string = 'regular'
   @Input() weight?: string = 'normal'
-  display = ''
-  color = ''
-  showDots = false
-  subs = []
-
-  constructor (
-    private readonly patch: PatchDbModel,
-  ) { }
-
-  ngOnInit () {
-    this.subs = [
-      combineLatest([
-        this.patch.watch$('package-data', this.pkgId, 'state'),
-        this.patch.watch$('package-data', this.pkgId, 'installed', 'status'),
-      ])
-      .subscribe(([state, status]) => {
-        const { display, color, showDots } = renderPkgStatus(state, status)
-        this.display = display
-        this.color = color
-        this.showDots = showDots
-      }),
-    ]
-  }
-
-  ngOnDestroy () {
-    this.subs.forEach(sub => sub.unsubscribe())
-  }
 }
 
diff --git a/ui/src/app/modules/sharing.module.ts b/ui/src/app/modules/sharing.module.ts
index a6ac1cf87..e2b7156d1 100644
--- a/ui/src/app/modules/sharing.module.ts
+++ b/ui/src/app/modules/sharing.module.ts
@@ -6,12 +6,10 @@ import { MarkdownPipe } from '../pipes/markdown.pipe'
 import { AnnotationStatusPipe } from '../pipes/annotation-status.pipe'
 import { TruncateCenterPipe, TruncateEndPipe } from '../pipes/truncate.pipe'
 import { MaskPipe } from '../pipes/mask.pipe'
-import { DisplayBulbPipe } from '../pipes/display-bulb.pipe'
-import { HasUiPipe, LaunchablePipe, ManifestPipe } from '../pipes/ui.pipe'
+import { HasUiPipe, LaunchablePipe } from '../pipes/ui.pipe'
 import { EmptyPipe } from '../pipes/empty.pipe'
 import { StatusPipe } from '../pipes/status.pipe'
 import { NotificationColorPipe } from '../pipes/notification-color.pipe'
-import { ReactiveComponentModule } from '@ngrx/component'
 
 @NgModule({
     declarations: [
@@ -24,18 +22,14 @@ import { ReactiveComponentModule } from '@ngrx/component'
         TruncateCenterPipe,
         TruncateEndPipe,
         MaskPipe,
-        DisplayBulbPipe,
         EmverDisplayPipe,
         HasUiPipe,
         LaunchablePipe,
-        ManifestPipe,
         EmptyPipe,
         StatusPipe,
         NotificationColorPipe,
     ],
-    imports: [
-      ReactiveComponentModule,
-    ],
+    imports: [],
     exports: [
         EmverComparesPipe,
         EmverSatisfiesPipe,
@@ -46,15 +40,12 @@ import { ReactiveComponentModule } from '@ngrx/component'
         TruncateEndPipe,
         TruncateCenterPipe,
         MaskPipe,
-        DisplayBulbPipe,
         EmverDisplayPipe,
         HasUiPipe,
         LaunchablePipe,
-        ManifestPipe,
         EmptyPipe,
         StatusPipe,
         NotificationColorPipe,
-        ReactiveComponentModule,
     ],
 })
 export class SharingModule { }
\ No newline at end of file
diff --git a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.html b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.html
index c118e708b..0567483dd 100644
--- a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.html
+++ b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.html
@@ -8,15 +8,15 @@
 </ion-header>
 
 <ion-content class="ion-padding-top">
-  <ng-container *ngIf="patch.data['server-info'][pkgId]?.installed as installed">
+  <ng-container *ngIf="patch.data['package-data'][pkgId] as pkg">
     <ion-item-group>
-      <ion-item button *ngFor="let action of installed.manifest.actions | keyvalue: asIsOrder" (click)="handleAction(installed, action)" >
+      <ion-item button *ngFor="let action of pkg.manifest.actions | keyvalue: asIsOrder" (click)="handleAction(pkg, action)" >
         <ion-label class="ion-text-wrap">
-          <h2><ion-text color="primary">{{ action.value.name }}</ion-text><ion-icon *ngIf="!(action.value['allowed-statuses'] | includes: installed.status.main.status)" color="danger" name="close-outline"></ion-icon></h2>
+          <h2><ion-text color="primary">{{ action.value.name }}</ion-text><ion-icon *ngIf="!(action.value['allowed-statuses'] | includes: pkg.installed.status.main.status)" color="danger" name="close-outline"></ion-icon></h2>
           <p><ion-text color="dark">{{ action.value.description }}</ion-text></p>
         </ion-label>
       </ion-item>
-      <ion-item button (click)="uninstall(installed.manifest)" >
+      <ion-item button (click)="uninstall(pkg.manifest)" >
         <ion-label class="ion-text-wrap">
           <h2><ion-text color="primary">Uninstall</ion-text></h2>
           <p><ion-text color="dark">This will uninstall the service from your Embassy and delete all data permanently.</ion-text></p>
diff --git a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
index 80e8c51bf..68c242168 100644
--- a/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
+++ b/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
@@ -5,7 +5,7 @@ import { AlertController, IonContent, ModalController, NavController } from '@io
 import { LoaderService } from 'src/app/services/loader.service'
 import { HttpErrorResponse } from '@angular/common/http'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
-import { Action, InstalledPackageDataEntry, Manifest, PackageMainStatus } from 'src/app/services/patch-db/data-model'
+import { Action, Manifest, PackageDataEntry, PackageMainStatus } from 'src/app/services/patch-db/data-model'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { Subscription } from 'rxjs'
@@ -44,8 +44,8 @@ export class AppActionsPage {
     this.subs.forEach(sub => sub.unsubscribe())
   }
 
-  async handleAction (pkg: InstalledPackageDataEntry, action: { key: string, value: Action }) {
-    if ((action.value['allowed-statuses'] as PackageMainStatus[]).includes(pkg.status.main.status)) {
+  async handleAction (pkg: PackageDataEntry, action: { key: string, value: Action }) {
+    if ((action.value['allowed-statuses'] as PackageMainStatus[]).includes(pkg.installed.status.main.status)) {
       const alert = await this.alertCtrl.create({
         header: 'Confirm',
         message: `Are you sure you want to execute action "${action.value.name}"? ${action.value.warning || ''}`,
diff --git a/ui/src/app/pages/apps-routes/app-config/app-config.page.html b/ui/src/app/pages/apps-routes/app-config/app-config.page.html
index 31efe6acf..0674cb66e 100644
--- a/ui/src/app/pages/apps-routes/app-config/app-config.page.html
+++ b/ui/src/app/pages/apps-routes/app-config/app-config.page.html
@@ -35,7 +35,7 @@
 
     <ng-container *ngIf="pkg">
       <!-- @TODO make sure this is how to determine if pkg is in needs_config -->
-      <ng-container *ngIf="pkg.manifest.config && !pkg.status.configured && !edited">
+      <ng-container *ngIf="pkg.manifest.config && !pkg.installed.status.configured && !edited">
         <ion-item class="notifier-item">
           <ion-label class="ion-text-wrap">
             <h2 style="display: flex; align-items: center; margin-bottom: 3px;">
@@ -91,7 +91,7 @@
 
       <!-- save button, always show -->
       <ion-button
-        [disabled]="invalid || (!edited && !added && !pkg.status.configured )"
+        [disabled]="invalid || (!edited && !added && !pkg.installed.status.configured )"
         fill="outline"
         expand="block"
         style="margin: 10px"
diff --git a/ui/src/app/pages/apps-routes/app-config/app-config.page.ts b/ui/src/app/pages/apps-routes/app-config/app-config.page.ts
index 8b94699cc..f831bfa5f 100644
--- a/ui/src/app/pages/apps-routes/app-config/app-config.page.ts
+++ b/ui/src/app/pages/apps-routes/app-config/app-config.page.ts
@@ -11,7 +11,7 @@ import { wizardModal } from 'src/app/components/install-wizard/install-wizard.co
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import { ConfigCursor } from 'src/app/pkg-config/config-cursor'
-import { InstalledPackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
+import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 
 @Component({
@@ -26,7 +26,7 @@ export class AppConfigPage {
 
   loadingText: string | undefined
 
-  pkg: InstalledPackageDataEntry
+  pkg: PackageDataEntry
   hasConfig = false
 
   mocalShowing = false
@@ -82,7 +82,7 @@ export class AppConfigPage {
           this.navCtrl.back()
         }
       }),
-      this.patch.watch$('package-data', pkgId, 'installed')
+      this.patch.watch$('package-data', pkgId)
       .pipe(
         tap(pkg => this.pkg = pkg),
         tap(() => this.loadingText = 'Fetching config spec...'),
@@ -156,7 +156,7 @@ export class AppConfigPage {
     }
   }
 
-  async save (pkg: InstalledPackageDataEntry) {
+  async save (pkg: PackageDataEntry) {
     return this.loader.of({
       message: `Saving config...`,
       spinner: 'lines',
diff --git a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html
index 74502338d..b00bccb3f 100644
--- a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html
+++ b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html
@@ -10,12 +10,12 @@
 <ion-content>
     <ion-grid *ngIf="patch.data['package-data'][pkgId] as pkg">
       <ion-row>
-        <ion-col *ngFor="let interface of pkg.installed.manifest.interfaces | keyvalue: asIsOrder" sizeSm="12" sizeMd="6">
+        <ion-col *ngFor="let interface of pkg.manifest.interfaces | keyvalue: asIsOrder" sizeSm="12" sizeMd="6">
           <ion-card>
             <ion-card-header>
               <ion-card-title>{{ interface.value.name }}</ion-card-title>
               <ion-card-subtitle>{{ interface.value.description }}</ion-card-subtitle>
-              <ion-button style="margin-top: 12px;" *ngIf="interface.value.ui" [disabled]="!(pkg | isLaunchable)" fill="outline" color="dark" expand="block" (click)="launch(pkg.installed)">
+              <ion-button style="margin-top: 12px;" *ngIf="interface.value.ui" [disabled]="!(pkg | isLaunchable)" fill="outline" color="dark" expand="block" (click)="launch(pkg)">
                 Launch
                 <ion-icon slot="end" name="rocket-outline"></ion-icon>
               </ion-button>
diff --git a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
index 0338992cc..c2529dffb 100644
--- a/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
+++ b/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
@@ -46,8 +46,8 @@ export class AppInterfacesPage {
     await toast.present()
   }
 
-  launch (installed: InstalledPackageDataEntry): void {
-    window.open(this.config.launchableURL(installed), '_blank')
+  launch (pkg: PackageDataEntry): void {
+    window.open(this.config.launchableURL(pkg), '_blank')
   }
 
   asIsOrder () {
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.html b/ui/src/app/pages/apps-routes/app-list/app-list.page.html
index 4286f990c..37034be02 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.html
+++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.html
@@ -24,7 +24,7 @@
       <ion-grid>
         <ion-row>
           <ion-col *ngFor="let pkg of pkgs | keyvalue : asIsOrder" sizeXs="4" sizeSm="3" sizeLg="3" sizeXl="2">
-            <ion-card class="installed-card" [routerLink]="['/services', (pkg.value | manifest).id]">
+            <ion-card class="installed-card" [routerLink]="['/services', pkg.value.manifest.id]">
               <div class="launch-container" *ngIf="pkg.value | hasUi">
                 <div class="launch-button-triangle"  (click)="launchUi(pkg.value, $event)" [class.launch-disabled]="!(pkg.value | isLaunchable)">
                   <ion-icon name="rocket-outline"></ion-icon>
@@ -33,14 +33,11 @@
     
               <img style="position: absolute" class="main-img" [src]="pkg.value['static-files'].icon" alt="icon" />
               <img class="main-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
-              <img class="bulb-on" *ngIf="(pkg.key | displayBulb : 'green' : connected) | async" src="assets/img/running-bulb.png"/>
-              <img class="bulb-on" *ngIf="(pkg.key | displayBulb : 'red' : connected) | async" src="assets/img/issue-bulb.png"/>
-              <img class="bulb-on" *ngIf="(pkg.key | displayBulb : 'yellow' : connected) | async" src="assets/img/warning-bulb.png"/>
-              <img class="bulb-off" *ngIf="(pkg.key | displayBulb : 'off' : connected) | async" src="assets/img/off-bulb.png"/>
+              <img [class]="serviceInfo[pkg.key].bulbInfo.class" [src]="serviceInfo[pkg.key].bulbInfo.img"/>
 
               <ion-card-header>
-                <status *ngIf="connected" [pkgId]="pkg.key" size="calc(8px + .4vw)" weight="bold"></status>
-                <ion-card-title>{{ (pkg.value | manifest).title }}</ion-card-title>
+                <status *ngIf="connected" [rendering]="serviceInfo[pkg.key].rendering" size="calc(8px + .4vw)" weight="bold"></status>
+                <ion-card-title>{{ pkg.value.manifest.title }}</ion-card-title>
               </ion-card-header>
             </ion-card>
           </ion-col>
diff --git a/ui/src/app/pages/apps-routes/app-list/app-list.page.ts b/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
index 2b47dc031..62afbea2e 100644
--- a/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
+++ b/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
@@ -3,7 +3,8 @@ import { ConfigService } from 'src/app/services/config.service'
 import { ConnectionService } from 'src/app/services/connection.service'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
-import { Subscription } from 'rxjs'
+import { combineLatest, Subscription } from 'rxjs'
+import { PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
 
 @Component({
   selector: 'app-list',
@@ -13,6 +14,13 @@ import { Subscription } from 'rxjs'
 export class AppListPage {
   connected: boolean
   subs: Subscription[] = []
+  serviceInfo: { [id: string]: {
+    bulbInfo: {
+      class: string
+      img: string
+    }
+    rendering: PkgStatusRendering
+  }} = { }
 
   constructor (
     private readonly config: ConfigService,
@@ -22,7 +30,48 @@ export class AppListPage {
 
   ngOnInit () {
     this.subs = [
-      this.patch.connected$().subscribe(c => this.connected = c),
+      combineLatest([
+        this.patch.connected$(),
+        this.patch.watch$('package-data'),
+      ])
+      .subscribe(([connected, pkgs]) => {
+        this.connected = connected
+
+        Object.keys(pkgs).forEach(pkgId => {
+          let bulbClass = 'bulb-on'
+          let img = ''
+
+          if (!this.connected) {
+            bulbClass = 'bulb-off',
+            img = 'assets/img/off-bulb.png'
+          }
+
+          const rendering = renderPkgStatus(pkgs[pkgId].state, pkgs[pkgId].installed.status)
+          switch (rendering.color) {
+            case 'danger':
+              img = 'assets/img/danger-bulb.png'
+              break
+            case 'success':
+              img = 'assets/img/success-bulb.png'
+              break
+            case 'warning':
+              img = 'assets/img/warning-bulb.png'
+              break
+            default:
+              bulbClass = 'bulb-off',
+              img = 'assets/img/off-bulb.png'
+              break
+          }
+
+          this.serviceInfo[pkgId] = {
+            bulbInfo: {
+              class: bulbClass,
+              img,
+            },
+            rendering,
+          }
+        })
+      }),
     ]
   }
 
@@ -33,7 +82,7 @@ export class AppListPage {
   launchUi (pkg: PackageDataEntry, event: Event): void {
     event.preventDefault()
     event.stopPropagation()
-    window.open(this.config.launchableURL(pkg.installed), '_blank')
+    window.open(this.config.launchableURL(pkg), '_blank')
   }
 
   asIsOrder () {
diff --git a/ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.html b/ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.html
index 00498f28c..7a2313338 100644
--- a/ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.html
+++ b/ui/src/app/pages/apps-routes/app-manifest/app-manifest.page.html
@@ -61,7 +61,7 @@
   </div>
 
   <div *ngIf="segmentValue === 'raw'" class="raw">
-    <pre [innerHTML]="pkg | manifest | json"></pre>
+    <pre [innerHTML]="pkg.manifest | json"></pre>
   </div>
 </ion-content>
 
diff --git a/ui/src/app/pages/apps-routes/app-restore/app-restore.page.ts b/ui/src/app/pages/apps-routes/app-restore/app-restore.page.ts
index 35ec75e88..903763657 100644
--- a/ui/src/app/pages/apps-routes/app-restore/app-restore.page.ts
+++ b/ui/src/app/pages/apps-routes/app-restore/app-restore.page.ts
@@ -33,7 +33,7 @@ export class AppRestorePage {
 
   ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
-    this.title = this.patch.data['package-data'][this.pkgId].installed.manifest.title
+    this.title = this.patch.data['package-data'][this.pkgId].manifest.title
 
     this.getExternalDisks()
   }
diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.html b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
index 20f60aac1..8522ee8b9 100644
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.html
@@ -23,15 +23,15 @@
           <img [src]="pkg['static-files'].icon" />
         </ion-thumbnail>
         <ion-label class="ion-text-wrap">
-          <h1 style="font-family: 'Montserrat';" [class.less-large]="manifest.title.length > 20">
-            {{ manifest.title }}
+          <h1 style="font-family: 'Montserrat';" [class.less-large]="pkg.manifest.title.length > 20">
+            {{ pkg.manifest.title }}
           </h1>
-          <h5>{{ manifest.version | displayEmver }}</h5>
+          <h5>{{ pkg.manifest.version | displayEmver }}</h5>
         </ion-label>
       </ion-item>
 
       <div class="status-readout">
-        <status *ngIf="connected" size="large" weight="500" [pkgId]="pkgId"></status>
+        <status *ngIf="connected" size="large" weight="500" [rendering]="rendering"></status>
         <ion-button *ngIf="(pkgId | status | async) === FeStatus.NeedsConfig" expand="block" [routerLink]="['config']">
           Configure
         </ion-button>
@@ -71,7 +71,7 @@
         <!-- dependencies -->
         <ng-container *ngIf="!(pkg.installed['current-dependencies'] | empty)">
           <ion-item-divider id="dependencies">Dependencies</ion-item-divider>
-          <!-- A current-dependency is a subset of the manifest.dependencies that is currently required as determined by the service config. -->
+          <!-- A current-dependency is a subset of the pkg.manifest.dependencies that is currently required as determined by the service config. -->
           <ion-grid>
             <ion-row>
               <ion-col *ngFor="let dep of pkg.installed['current-dependencies'] | keyvalue" sizeXs="12" sizeMd="6">
@@ -80,8 +80,8 @@
                     <img [src]="patch.data['package-data'][dep.key] ? patch.data['package-data'][dep.key]['static-files'].icon : pkg.installed.status['dependency-errors'][dep.key]?.icon" />
                   </ion-thumbnail>
                   <ion-label class="ion-text-wrap">
-                    <h2 style="font-family: 'Montserrat'">{{ patch.data['package-data'][dep.key] ? (patch.data['package-data'][dep.key] | manifest).title : pkg.installed.status['dependency-errors'][dep.key]?.title }}</h2>
-                    <p>{{ manifest.dependencies[dep.key].version | displayEmver }}</p>
+                    <h2 style="font-family: 'Montserrat'">{{ patch.data['package-data'][dep.key] ? patch.data['package-data'][dep.key].manifest.title : pkg.installed.status['dependency-errors'][dep.key]?.title }}</h2>
+                    <p>{{ pkg.manifest.dependencies[dep.key].version | displayEmver }}</p>
                     <p><ion-text [color]="pkg.installed.status['dependency-errors'][dep.key] ? 'warning' : 'success'">{{ pkg.installed.status['dependency-errors'][dep.key] ? pkg.installed.status['dependency-errors'][dep.key].type : 'satisfied' }}</ion-text></p>
                   </ion-label>
 
diff --git a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
index 083425c47..5577cdb38 100644
--- a/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
+++ b/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
@@ -4,13 +4,13 @@ import { ApiService } from 'src/app/services/api/api.service'
 import { ActivatedRoute, NavigationExtras } from '@angular/router'
 import { chill, isEmptyObject, Recommendation } from 'src/app/util/misc.util'
 import { LoaderService } from 'src/app/services/loader.service'
-import { Observable, of, Subscription } from 'rxjs'
+import { combineLatest, Observable, of, Subscription } from 'rxjs'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { ConfigService, getManifest } from 'src/app/services/config.service'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { DependencyErrorConfigUnsatisfied, DependencyErrorNotInstalled, DependencyErrorType, Manifest, PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
-import { FEStatus } from 'src/app/services/pkg-status-rendering.service'
+import { FEStatus, PkgStatusRendering, renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
 import { ConnectionService } from 'src/app/services/connection.service'
 
 @Component({
@@ -24,11 +24,11 @@ export class AppShowPage {
   pkg: PackageDataEntry
   hideLAN: boolean
   buttons: Button[] = []
-  manifest: Manifest = { } as Manifest
   connected: boolean
   FeStatus = FEStatus
   PackageState = PackageState
   DependencyErrorType = DependencyErrorType
+  rendering: PkgStatusRendering
 
   @ViewChild(IonContent) content: IonContent
   subs: Subscription[] = []
@@ -49,10 +49,15 @@ export class AppShowPage {
   async ngOnInit () {
     this.pkgId = this.route.snapshot.paramMap.get('pkgId')
     this.pkg = this.patch.data['package-data'][this.pkgId]
-    // @TODO maybe re-fetch manifest if package state changes.
-    this.manifest = getManifest(this.pkg)
     this.subs = [
-      this.patch.connected$().subscribe(c => this.connected = c),
+      combineLatest([
+        this.patch.connected$(),
+        this.patch.watch$('package-data', this.pkgId),
+      ])
+      .subscribe(([connected, pkg]) => {
+        this.connected = connected
+        this.rendering = renderPkgStatus(pkg.state, pkg.installed.status)
+      }),
     ]
     this.setButtons()
   }
@@ -66,11 +71,11 @@ export class AppShowPage {
   }
 
   launchUiTab (): void {
-    window.open(this.config.launchableURL(this.pkg.installed), '_blank')
+    window.open(this.config.launchableURL(this.pkg), '_blank')
   }
 
   async stop (): Promise<void> {
-    const { id, title, version } = this.pkg.installed.manifest
+    const { id, title, version } = this.pkg.manifest
     await this.loader.of({
       message: `Stopping...`,
       spinner: 'lines',
@@ -99,7 +104,7 @@ export class AppShowPage {
   }
 
   async tryStart (): Promise<void> {
-    const message = this.pkg.installed.manifest.alerts.start
+    const message = this.pkg.manifest.alerts.start
     if (message) {
       this.presentAlertStart(message)
     } else {
@@ -108,13 +113,13 @@ export class AppShowPage {
   }
 
   async donate (): Promise<void> {
-    const url = this.manifest['donation-url']
+    const url = this.pkg.manifest['donation-url']
     if (url) {
       window.open(url, '_blank')
     } else {
       const alert = await this.alertCtrl.create({
         header: 'Not Accepting Donations',
-        message: `The developers of ${this.manifest.title} have not provided a donation URL. Please contact them directly if you insist on giving them money.`,
+        message: `The developers of ${this.pkg.manifest.title} have not provided a donation URL. Please contact them directly if you insist on giving them money.`,
         buttons: ['OK'],
       })
       await alert.present()
@@ -143,8 +148,8 @@ export class AppShowPage {
   }
 
   private async installDep (depId: string): Promise<void> {
-    const version = this.pkg.installed.manifest.dependencies[depId].version
-    const dependentTitle = this.pkg.installed.manifest.title
+    const version = this.pkg.manifest.dependencies[depId].version
+    const dependentTitle = this.pkg.manifest.title
 
     const installRec: Recommendation = {
       dependentId: this.pkgId,
@@ -164,7 +169,7 @@ export class AppShowPage {
     const configErrors = (this.pkg.installed.status['dependency-errors'][depId] as DependencyErrorConfigUnsatisfied).errors
 
     const description = `<ul>${configErrors.map(d => `<li>${d}</li>`).join('\n')}</ul>`
-    const dependentTitle = this.pkg.installed.manifest.title
+    const dependentTitle = this.pkg.manifest.title
 
     const configRecommendation: Recommendation = {
       dependentId: this.pkgId,
diff --git a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
index 00146a8fe..1ffa71f5a 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
+++ b/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html
@@ -58,20 +58,20 @@
               <ion-label>
                 <h2 style="font-family: 'Montserrat';">{{ pkg.title }}</h2>
                 <p>{{ pkg.descriptionShort }}</p>
-                <ng-container *ngIf="patch.data['package-data'] as pkgI">
-                  <p *ngIf="pkgI.state === PackageState.Installed">
-                    <ion-text *ngIf="(pkg.version | compareEmver : pkgI.installed.manifest.version) === 0" color="success">Installed</ion-text>
-                    <ion-text *ngIf="(pkg.version | compareEmver : pkgI.installed.manifest.version) === 1" color="warning">Update Available</ion-text>
+                <ng-container *ngIf="patch.data['package-data'][pkg.id] as localPkg">
+                  <p *ngIf="localPkg.state === PackageState.Installed">
+                    <ion-text *ngIf="(pkg.version | compareEmver : localPkg.manifest.version) === 0" color="success">Installed</ion-text>
+                    <ion-text *ngIf="(pkg.version | compareEmver : localPkg.manifest.version) === 1" color="warning">Update Available</ion-text>
                   </p>
-                  <p *ngIf="pkgI.state === PackageState.Installing" style="display: flex; flex-direction: row; align-items: center;">
+                  <p *ngIf="localPkg.state === PackageState.Installing" style="display: flex; flex-direction: row; align-items: center;">
                     <ion-text color="primary">Installing</ion-text>
                     <ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="primary"></ion-spinner>
                   </p>
-                  <p *ngIf="pkgI.state === PackageState.Updating" style="display: flex; flex-direction: row; align-items: center;">
+                  <p *ngIf="localPkg.state === PackageState.Updating" style="display: flex; flex-direction: row; align-items: center;">
                     <ion-text color="primary">Updating</ion-text>
                     <ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="primary"></ion-spinner>
                   </p>
-                  <p *ngIf="pkgI.state === PackageState.Removing" style="display: flex; flex-direction: row; align-items: center;">
+                  <p *ngIf="localPkg.state === PackageState.Removing" style="display: flex; flex-direction: row; align-items: center;">
                     <ion-text color="danger">Removing</ion-text>
                     <ion-spinner name="crescent" style="height: 10px; width: 15px; margin-left: 3px; margin-right: -4px;" color="danger"></ion-spinner>
                   </p>
diff --git a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
index 6c96faf0e..b1718f32c 100644
--- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
+++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html
@@ -42,7 +42,7 @@
                   <!-- installed -->
                   <ng-template #installed>
                     <p>
-                      <ion-text color="medium">Installed at {{ installedPkg.installed.manifest.version | displayEmver }}</ion-text>
+                      <ion-text color="medium">Installed at {{ installedPkg.manifest.version | displayEmver }}</ion-text>
                     </p>
                   </ng-template>
                 </ng-template>
@@ -59,10 +59,10 @@
           <ng-template #installedPkg2>
             <!-- not installing, updating, or removing -->
             <ng-container *ngIf="installedPkg.state === PackageState.Installed">
-              <ion-button *ngIf="(installedPkg.installed.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" (click)="update('update')">
+              <ion-button *ngIf="(installedPkg.manifest.version | compareEmver : pkg.manifest.version) === -1" class="main-action-button" expand="block" (click)="update('update')">
                 Update
               </ion-button>
-              <ion-button *ngIf="(installedPkg.installed.manifest.version | compareEmver : pkg.manifest.version) === 1" class="main-action-button" expand="block" color="warning" (click)="update('downgrade')">
+              <ion-button *ngIf="(installedPkg.manifest.version | compareEmver : pkg.manifest.version) === 1" class="main-action-button" expand="block" color="warning" (click)="update('downgrade')">
                 Downgrade
               </ion-button>
             </ng-container>
diff --git a/ui/src/app/pipes/display-bulb.pipe.ts b/ui/src/app/pipes/display-bulb.pipe.ts
deleted file mode 100644
index 6457360ef..000000000
--- a/ui/src/app/pipes/display-bulb.pipe.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-import { combineLatest, Observable } from 'rxjs'
-import { map } from 'rxjs/operators'
-import { PatchDbModel } from '../services/patch-db/patch-db.service'
-import { renderPkgStatus } from '../services/pkg-status-rendering.service'
-
-@Pipe({
-  name: 'displayBulb',
-})
-export class DisplayBulbPipe implements PipeTransform {
-
-  constructor (
-    private readonly patch: PatchDbModel,
-  ) { }
-
-  transform (pkgId: string, bulb: DisplayBulb, connected: boolean): Observable<boolean> {
-    return combineLatest([
-      this.patch.watch$('package-data', pkgId, 'state'),
-      this.patch.watch$('package-data', pkgId, 'installed', 'status'),
-    ])
-    .pipe(
-      map(([state, status]) => {
-        if (!connected) return bulb === 'off'
-        const { color } = renderPkgStatus(state, status)
-        switch (color) {
-          case 'danger': return bulb === 'red'
-          case 'success': return bulb === 'green'
-          case 'warning': return bulb === 'yellow'
-          default: return bulb === 'off'
-        }
-      }),
-    )
-  }
-}
-
-type DisplayBulb = 'off' | 'red' | 'green' | 'yellow'
diff --git a/ui/src/app/pipes/ui.pipe.ts b/ui/src/app/pipes/ui.pipe.ts
index f3a36b903..e2d241700 100644
--- a/ui/src/app/pipes/ui.pipe.ts
+++ b/ui/src/app/pipes/ui.pipe.ts
@@ -24,13 +24,3 @@ export class LaunchablePipe implements PipeTransform {
     return this.configService.isLaunchable(pkg)
   }
 }
-
-@Pipe({
-  name: 'manifest',
-})
-export class ManifestPipe implements PipeTransform {
-
-  transform (pkg: PackageDataEntry): Manifest {
-    return getManifest(pkg)
-  }
-}
diff --git a/ui/src/app/services/api/mock-api.service.ts b/ui/src/app/services/api/mock-api.service.ts
index 5efe3b4a4..534582a98 100644
--- a/ui/src/app/services/api/mock-api.service.ts
+++ b/ui/src/app/services/api/mock-api.service.ts
@@ -307,7 +307,6 @@ export class MockApiService extends ApiService {
     const pkg: PackageDataEntry = {
       ...Mock.bitcoinproxy,
       state: PackageState.Installing,
-      'temp-manifest': Mock.MockManifestBitcoinProxy,
       // installed: undefined,
       'install-progress': {
         size: 100,
diff --git a/ui/src/app/services/api/mock-app-fixures.ts b/ui/src/app/services/api/mock-app-fixures.ts
index 0dbbbf708..b0ef9f060 100644
--- a/ui/src/app/services/api/mock-app-fixures.ts
+++ b/ui/src/app/services/api/mock-app-fixures.ts
@@ -578,12 +578,11 @@ export module Mock {
       icon: 'assets/img/service-icons/bitcoind.png',
       instructions: 'instructionsUrl', // /public/package-data/bitcoind/0.21.1/INSTRUCTIONS.md
     },
-    'temp-manifest': undefined,
+    manifest: {
+      ...MockManifestBitcoind,
+      version: '0.20.0',
+    },
     installed: {
-      manifest: {
-        ...MockManifestBitcoind,
-        version: '0.20.0',
-      },
       status: {
         configured: true,
         main: {
@@ -629,9 +628,8 @@ export module Mock {
       icon: 'assets/img/service-icons/lnd.png',
       instructions: 'instructionsUrl', // /public/package-data/lnd/0.21.1/INSTRUCTIONS.md
     },
-    'temp-manifest': undefined,
+    manifest: MockManifestLnd,
     installed: {
-      manifest: MockManifestLnd,
       status: {
         configured: true,
         main: {
@@ -681,9 +679,8 @@ export module Mock {
       icon: 'assets/img/service-icons/bitcoin-proxy.png',
       instructions: 'instructionsUrl', // /public/package-data/bitcoinproxy/0.2.2/INSTRUCTIONS.md
     },
-    'temp-manifest': undefined,
+    manifest: MockManifestBitcoinProxy,
     installed: {
-      manifest: MockManifestBitcoinProxy,
       status: {
         configured: true,
         main: {
diff --git a/ui/src/app/services/config.service.ts b/ui/src/app/services/config.service.ts
index 909501c45..0cd286032 100644
--- a/ui/src/app/services/config.service.ts
+++ b/ui/src/app/services/config.service.ts
@@ -53,16 +53,14 @@ export class ConfigService {
       return false
     }
 
-    const installed = pkg.installed
-
-    return installed.status.main.status === PackageMainStatus.Running &&
+    return pkg.installed.status.main.status === PackageMainStatus.Running &&
     (
-      (hasTorUi(installed.manifest.interfaces) && this.isTor()) ||
-      (hasLanUi(installed.manifest.interfaces) && !this.isTor())
+      (hasTorUi(pkg.manifest.interfaces) && this.isTor()) ||
+      (hasLanUi(pkg.manifest.interfaces) && !this.isTor())
     )
   }
 
-  launchableURL (pkg: InstalledPackageDataEntry): string {
+  launchableURL (pkg: PackageDataEntry): string {
     return this.isTor() ? `http://${torUiAddress(pkg)}` : `https://${lanUiAddress(pkg)}`
   }
 }
@@ -75,7 +73,7 @@ export function hasLanUi (interfaces: { [id: string]: InterfaceDef }): boolean {
   return !!Object.values(interfaces).find(i => i.ui && i['lan-config'])
 }
 
-export function torUiAddress (pkg: InstalledPackageDataEntry): string {
+export function torUiAddress (pkg: PackageDataEntry): string {
   const interfaces = pkg.manifest.interfaces
   const id = Object.keys(interfaces).find(key => {
     const val = interfaces[key]
@@ -84,7 +82,7 @@ export function torUiAddress (pkg: InstalledPackageDataEntry): string {
   return pkg['interface-info'].addresses[id]['tor-address']
 }
 
-export function lanUiAddress (pkg: InstalledPackageDataEntry): string {
+export function lanUiAddress (pkg: PackageDataEntry): string {
   const interfaces = pkg.manifest.interfaces
   const id = Object.keys(interfaces).find(key => {
     const val = interfaces[key]
@@ -99,7 +97,7 @@ export function hasUi (interfaces: { [id: string]: InterfaceDef }): boolean {
 
 export function getManifest (pkg: PackageDataEntry): Manifest {
   if (pkg.state === PackageState.Installed) {
-    return pkg.installed.manifest
+    return pkg.manifest
   }
   return pkg['temp-manifest']
 }
diff --git a/ui/src/app/services/connection.service.ts b/ui/src/app/services/connection.service.ts
index 2eb225491..cbd9007d8 100644
--- a/ui/src/app/services/connection.service.ts
+++ b/ui/src/app/services/connection.service.ts
@@ -39,7 +39,7 @@ export class ConnectionService {
           this.connectionFailure$.next(ConnectionFailure.Network)
         } else if (!this.configService.isTor()) {
           this.connectionFailure$.next(ConnectionFailure.Lan)
-        } {
+        } else {
           // diagnosing
           this.connectionFailure$.next(ConnectionFailure.Diagnosing)
           const torSuccess = await this.testAddrs(addrs?.tor || [])
diff --git a/ui/src/app/services/patch-db/data-model.ts b/ui/src/app/services/patch-db/data-model.ts
index 1e825b03e..77aaffd02 100644
--- a/ui/src/app/services/patch-db/data-model.ts
+++ b/ui/src/app/services/patch-db/data-model.ts
@@ -46,7 +46,7 @@ export interface PackageDataEntry {
     instructions: URL
     icon: URL
   }
-  'temp-manifest'?: Manifest // exists when: installing, updating, removing
+  manifest: Manifest
   installed?: InstalledPackageDataEntry, // exists when: installed, updating
   'install-progress'?: InstallProgress, // exists when: installing, updating
 }
@@ -62,7 +62,6 @@ export interface InstallProgress {
 }
 
 export interface InstalledPackageDataEntry {
-  manifest: Manifest
   status: Status
   'interface-info': InterfaceInfo
   'system-pointers': any[]
diff --git a/ui/src/assets/img/issue-bulb.png b/ui/src/assets/img/danger-bulb.png
similarity index 100%
rename from ui/src/assets/img/issue-bulb.png
rename to ui/src/assets/img/danger-bulb.png
diff --git a/ui/src/assets/img/running-bulb.png b/ui/src/assets/img/success-bulb.png
similarity index 100%
rename from ui/src/assets/img/running-bulb.png
rename to ui/src/assets/img/success-bulb.png