Merge branch 'next/minor' of github.com:Start9Labs/start-os into next/major

web/projects/ui/src/app/app.providers.ts

@@ -1,4 +1,4 @@
-import { APP_INITIALIZER, Provider } from '@angular/core'
+import { APP_INITIALIZER, inject, Provider } from '@angular/core'
 import { UntypedFormBuilder } from '@angular/forms'
 import { Router } from '@angular/router'
 import {
@@ -30,6 +30,7 @@ import { DateTransformerService } from './services/date-transformer.service'
 import { DatetimeTransformerService } from './services/datetime-transformer.service'
 import { MarketplaceService } from './services/marketplace.service'
 import { ThemeSwitcherService } from './services/theme-switcher.service'
+import { StorageService } from './services/storage.service'
 
 const {
   useMocks,
@@ -64,9 +65,14 @@ export const APP_PROVIDERS: Provider[] = [
     provide: ApiService,
     useClass: useMocks ? MockApiService : LiveApiService,
   },
+  {
+    provide: PatchDB,
+    deps: [PatchDbSource, PATCH_CACHE],
+    useClass: PatchDB,
+  },
   {
     provide: APP_INITIALIZER,
-    deps: [AuthService, ClientStorageService, Router],
+    deps: [StorageService, AuthService, ClientStorageService, Router],
     useFactory: appInitializer,
     multi: true,
   },
@@ -86,14 +92,27 @@ export const APP_PROVIDERS: Provider[] = [
     provide: AbstractCategoryService,
     useClass: CategoryService,
   },
+  {
+    provide: TUI_DIALOGS_CLOSE,
+    useFactory: () =>
+      inject(StateService).pipe(
+        pairwise(),
+        filter(
+          ([prev, curr]) =>
+            prev === 'running' && (curr === 'error' || curr === 'initializing'),
+        ),
+      ),
+  },
 ]
 
 export function appInitializer(
+  storage: StorageService,
   auth: AuthService,
   localStorage: ClientStorageService,
   router: Router,
 ): () => void {
   return () => {
+    storage.migrate036()
     auth.init()
     localStorage.init()
     router.initialNavigation()

web/projects/ui/src/app/components/form.component.ts

@@ -0,0 +1,167 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+  OnInit,
+} from '@angular/core'
+import { FormGroup, ReactiveFormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { CT } from '@start9labs/start-sdk'
+
+import {
+  tuiMarkControlAsTouchedAndValidate,
+  TuiValueChangesModule,
+} from '@taiga-ui/cdk'
+import { TuiDialogContext, TuiModeModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiDialogFormService } from '@taiga-ui/kit'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { compare, Operation } from 'fast-json-patch'
+import { FormModule } from 'src/app/components/form/form.module'
+import { InvalidService } from 'src/app/components/form/invalid.service'
+import { FormService } from 'src/app/services/form.service'
+
+export interface ActionButton<T> {
+  text: string
+  handler?: (value: T) => Promise<boolean | void> | void
+  link?: string
+}
+
+export interface FormContext<T> {
+  spec: CT.InputSpec
+  buttons: ActionButton<T>[]
+  value?: T
+  patch?: Operation[]
+}
+
+@Component({
+  standalone: true,
+  selector: 'app-form',
+  template: `
+    <form
+      [formGroup]="form"
+      (submit.capture.prevent)="(0)"
+      (reset.capture.prevent.stop)="onReset()"
+      (tuiValueChanges)="markAsDirty()"
+    >
+      <form-group [spec]="spec"></form-group>
+      <footer tuiMode="onDark">
+        <ng-content></ng-content>
+        <ng-container *ngFor="let button of buttons; let last = last">
+          <button
+            *ngIf="button.handler; else link"
+            tuiButton
+            [appearance]="last ? 'primary' : 'flat'"
+            [type]="last ? 'submit' : 'button'"
+            (click)="onClick(button.handler)"
+          >
+            {{ button.text }}
+          </button>
+          <ng-template #link>
+            <a
+              tuiButton
+              appearance="flat"
+              [routerLink]="button.link"
+              (click)="close()"
+            >
+              {{ button.text }}
+            </a>
+          </ng-template>
+        </ng-container>
+      </footer>
+    </form>
+  `,
+  styles: [
+    `
+      footer {
+        position: sticky;
+        bottom: 0;
+        z-index: 10;
+        display: flex;
+        justify-content: flex-end;
+        padding: 1rem 0;
+        margin: 1rem 0 -1rem;
+        gap: 1rem;
+        background: var(--tui-elevation-01);
+        border-top: 1px solid var(--tui-base-02);
+      }
+    `,
+  ],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    RouterModule,
+    TuiValueChangesModule,
+    TuiButtonModule,
+    TuiModeModule,
+    FormModule,
+  ],
+  providers: [InvalidService],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormComponent<T extends Record<string, any>> implements OnInit {
+  private readonly dialogFormService = inject(TuiDialogFormService)
+  private readonly formService = inject(FormService)
+  private readonly invalidService = inject(InvalidService)
+  private readonly context = inject<TuiDialogContext<void, FormContext<T>>>(
+    POLYMORPHEUS_CONTEXT,
+    { optional: true },
+  )
+
+  @Input() spec = this.context?.data.spec || {}
+  @Input() buttons = this.context?.data.buttons || []
+  @Input() patch = this.context?.data.patch || []
+  @Input() value?: T = this.context?.data.value
+
+  form = new FormGroup({})
+
+  ngOnInit() {
+    this.dialogFormService.markAsPristine()
+    this.form = this.formService.createForm(this.spec, this.value)
+    this.process(this.patch)
+  }
+
+  onReset() {
+    const { value } = this.form
+
+    this.form = this.formService.createForm(this.spec)
+    this.process(compare(this.form.value, value))
+    tuiMarkControlAsTouchedAndValidate(this.form)
+    this.markAsDirty()
+  }
+
+  async onClick(handler: Required<ActionButton<T>>['handler']) {
+    tuiMarkControlAsTouchedAndValidate(this.form)
+    this.invalidService.scrollIntoView()
+
+    if (this.form.valid && (await handler(this.form.value as T))) {
+      this.close()
+    }
+  }
+
+  markAsDirty() {
+    this.dialogFormService.markAsDirty()
+  }
+
+  close() {
+    this.context?.$implicit.complete()
+  }
+
+  private process(patch: Operation[]) {
+    patch.forEach(({ op, path }) => {
+      const control = this.form.get(path.substring(1).split('/'))
+
+      if (!control || !control.parent) return
+
+      if (op !== 'remove') {
+        control.markAsDirty()
+        control.markAsTouched()
+      }
+
+      control.parent.markAsDirty()
+      control.parent.markAsTouched()
+    })
+  }
+}

web/projects/ui/src/app/components/form/control.directive.ts

@@ -0,0 +1,30 @@
+import { Directive, ElementRef, inject, OnDestroy, OnInit } from '@angular/core'
+import { ControlContainer, NgControl } from '@angular/forms'
+import { InvalidService } from './invalid.service'
+
+@Directive({
+  selector: 'form-control, form-array, form-object',
+})
+export class ControlDirective implements OnInit, OnDestroy {
+  private readonly invalidService = inject(InvalidService, { optional: true })
+  private readonly element: ElementRef<HTMLElement> = inject(ElementRef)
+  private readonly control =
+    inject(NgControl, { optional: true }) ||
+    inject(ControlContainer, { optional: true })
+
+  get invalid(): boolean {
+    return !!this.control?.invalid
+  }
+
+  scrollIntoView() {
+    this.element.nativeElement.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  ngOnInit() {
+    this.invalidService?.add(this)
+  }
+
+  ngOnDestroy() {
+    this.invalidService?.remove(this)
+  }
+}

web/projects/ui/src/app/components/form/control.ts

@@ -0,0 +1,35 @@
+import { inject } from '@angular/core'
+import { FormControlComponent } from './form-control/form-control.component'
+import { CT } from '@start9labs/start-sdk'
+
+export abstract class Control<Spec extends CT.ValueSpec, Value> {
+  private readonly control: FormControlComponent<Spec, Value> =
+    inject(FormControlComponent)
+
+  get invalid(): boolean {
+    return this.control.touched && this.control.invalid
+  }
+
+  get spec(): Spec {
+    return this.control.spec
+  }
+
+  // TODO: Properly handle already set immutable value
+  get readOnly(): boolean {
+    return (
+      !!this.value && !!this.control.control?.pristine && this.control.immutable
+    )
+  }
+
+  get value(): Value | null {
+    return this.control.value
+  }
+
+  set value(value: Value | null) {
+    this.control.onInput(value)
+  }
+
+  onFocus(focused: boolean) {
+    this.control.onFocus(focused)
+  }
+}

web/projects/ui/src/app/components/form/form-array/form-array.component.html

@@ -0,0 +1,58 @@
+<div class="label">
+  {{ spec.name }}
+  <tui-tooltip
+    *ngIf="spec.description || spec.disabled"
+    [content]="spec | hint"
+  ></tui-tooltip>
+  <button
+    tuiLink
+    type="button"
+    class="add"
+    [disabled]="!canAdd"
+    (click)="add()"
+  >
+    + Add
+  </button>
+</div>
+<tui-error [error]="order | tuiFieldError | async"></tui-error>
+
+<ng-container *ngFor="let item of array.control.controls; let index = index">
+  <form-object
+    *ngIf="spec.spec.type === 'object'; else control"
+    class="object"
+    [class.object_open]="!!open.get(item)"
+    [formGroup]="$any(item)"
+    [spec]="$any(spec.spec)"
+    [@tuiHeightCollapse]="animation"
+    [@tuiFadeIn]="animation"
+    [open]="!!open.get(item)"
+    (openChange)="open.set(item, $event)"
+  >
+    {{ item.value | mustache : $any(spec.spec).displayAs }}
+    <ng-container *ngTemplateOutlet="remove"></ng-container>
+  </form-object>
+  <ng-template #control>
+    <form-control
+      class="control"
+      tuiTextfieldSize="m"
+      [tuiTextfieldLabelOutside]="true"
+      [tuiTextfieldIcon]="remove"
+      [formControl]="$any(item)"
+      [spec]="$any(spec.spec)"
+      [@tuiHeightCollapse]="animation"
+      [@tuiFadeIn]="animation"
+    ></form-control>
+  </ng-template>
+  <ng-template #remove>
+    <button
+      tuiIconButton
+      type="button"
+      class="remove"
+      iconLeft="tuiIconTrash"
+      appearance="icon"
+      size="m"
+      title="Remove"
+      (click.stop)="removeAt(index)"
+    ></button>
+  </ng-template>
+</ng-container>

web/projects/ui/src/app/components/form/form-array/form-array.component.scss

@@ -0,0 +1,50 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+  display: block;
+  margin: 2rem 0;
+}
+
+.label {
+  display: flex;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.add {
+  font-size: 1rem;
+  padding: 0 1rem;
+  margin-left: auto;
+}
+
+.object {
+  display: block;
+  position: relative;
+
+  &_open::after,
+  &:last-child::after {
+    opacity: 0;
+  }
+
+  &:after {
+    @include transition(opacity);
+
+    content: '';
+    position: absolute;
+    bottom: -0.5rem;
+    height: 1px;
+    left: 3rem;
+    right: 1rem;
+    background: var(--tui-clear);
+  }
+}
+
+.remove {
+  margin-left: auto;
+  pointer-events: auto;
+}
+
+.control {
+  display: block;
+  margin: 0.5rem 0;
+}

web/projects/ui/src/app/components/form/form-array/form-array.component.ts

@@ -0,0 +1,91 @@
+import { Component, HostBinding, inject, Input } from '@angular/core'
+import { AbstractControl, FormArrayName } from '@angular/forms'
+import { TUI_PARENT_ANIMATION, TuiDestroyService } from '@taiga-ui/cdk'
+import {
+  TUI_ANIMATION_OPTIONS,
+  TuiDialogService,
+  tuiFadeIn,
+  tuiHeightCollapse,
+} from '@taiga-ui/core'
+import { TUI_PROMPT } from '@taiga-ui/kit'
+import { CT } from '@start9labs/start-sdk'
+import { filter, takeUntil } from 'rxjs'
+import { FormService } from 'src/app/services/form.service'
+import { ERRORS } from '../form-group/form-group.component'
+
+@Component({
+  selector: 'form-array',
+  templateUrl: './form-array.component.html',
+  styleUrls: ['./form-array.component.scss'],
+  animations: [tuiFadeIn, tuiHeightCollapse, TUI_PARENT_ANIMATION],
+  providers: [TuiDestroyService],
+})
+export class FormArrayComponent {
+  @Input()
+  spec!: CT.ValueSpecList
+
+  @HostBinding('@tuiParentAnimation')
+  readonly animation = { value: '', ...inject(TUI_ANIMATION_OPTIONS) }
+  readonly order = ERRORS
+  readonly array = inject(FormArrayName)
+  readonly open = new Map<AbstractControl, boolean>()
+
+  private warned = false
+  private readonly formService = inject(FormService)
+  private readonly dialogs = inject(TuiDialogService)
+  private readonly destroy$ = inject(TuiDestroyService)
+
+  get canAdd(): boolean {
+    return (
+      !this.spec.disabled &&
+      (!this.spec.maxLength ||
+        this.spec.maxLength >= this.array.control.controls.length)
+    )
+  }
+
+  add() {
+    if (!this.warned && this.spec.warning) {
+      this.dialogs
+        .open<boolean>(TUI_PROMPT, {
+          label: 'Warning',
+          size: 's',
+          data: { content: this.spec.warning, yes: 'Ok', no: 'Cancel' },
+        })
+        .pipe(filter(Boolean), takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.addItem()
+        })
+    } else {
+      this.addItem()
+    }
+
+    this.warned = true
+  }
+
+  removeAt(index: number) {
+    this.dialogs
+      .open<boolean>(TUI_PROMPT, {
+        label: 'Confirm',
+        size: 's',
+        data: {
+          content: 'Are you sure you want to delete this entry?',
+          yes: 'Delete',
+          no: 'Cancel',
+        },
+      })
+      .pipe(filter(Boolean), takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.removeItem(index)
+      })
+  }
+
+  private removeItem(index: number) {
+    this.open.delete(this.array.control.at(index))
+    this.array.control.removeAt(index)
+  }
+
+  private addItem() {
+    this.array.control.insert(0, this.formService.getListItem(this.spec))
+    this.open.set(this.array.control.at(0), true)
+  }
+}

web/projects/ui/src/app/components/form/form-color/form-color.component.html

@@ -0,0 +1,31 @@
+<tui-input
+  [maskito]="mask"
+  [tuiTextfieldCustomContent]="color"
+  [tuiTextfieldCleaner]="false"
+  [tuiHintContent]="spec | hint"
+  [readOnly]="readOnly"
+  [disabled]="!!spec.disabled"
+  [pseudoInvalid]="invalid"
+  [(ngModel)]="value"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <span *ngIf="spec.required">*</span>
+</tui-input>
+<ng-template #color>
+  <div class="wrapper" [style.color]="value">
+    <input
+      *ngIf="!readOnly && !spec.disabled"
+      type="color"
+      class="color"
+      tabindex="-1"
+      [(ngModel)]="value"
+      (click.stop)="(0)"
+    />
+    <tui-icon
+      icon="tuiIconPaintLarge"
+      tuiAppearance="icon"
+      class="icon"
+    ></tui-icon>
+  </div>
+</ng-template>

web/projects/ui/src/app/components/form/form-color/form-color.component.scss

@@ -0,0 +1,33 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+.wrapper {
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  pointer-events: auto;
+
+  &::after {
+    content: '';
+    position: absolute;
+    height: 0.3rem;
+    width: 1.4rem;
+    bottom: 0.125rem;
+    background: currentColor;
+    border-radius: 0.125rem;
+    pointer-events: none;
+  }
+}
+
+.color {
+  @include fullsize();
+  opacity: 0;
+}
+
+.icon {
+  @include fullsize();
+  pointer-events: none;
+
+  input:hover + & {
+    opacity: 1;
+  }
+}

web/projects/ui/src/app/components/form/form-color/form-color.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+import { MaskitoOptions } from '@maskito/core'
+
+@Component({
+  selector: 'form-color',
+  templateUrl: './form-color.component.html',
+  styleUrls: ['./form-color.component.scss'],
+})
+export class FormColorComponent extends Control<CT.ValueSpecColor, string> {
+  readonly mask: MaskitoOptions = {
+    mask: ['#', ...Array(6).fill(/[0-9a-f]/i)],
+  }
+}

web/projects/ui/src/app/components/form/form-control/form-control.component.html

@@ -0,0 +1,39 @@
+<ng-container [ngSwitch]="spec.type">
+  <form-color *ngSwitchCase="'color'"></form-color>
+  <form-datetime *ngSwitchCase="'datetime'"></form-datetime>
+  <form-multiselect *ngSwitchCase="'multiselect'"></form-multiselect>
+  <form-number *ngSwitchCase="'number'"></form-number>
+  <form-select *ngSwitchCase="'select'"></form-select>
+  <form-text *ngSwitchCase="'text'"></form-text>
+  <form-textarea *ngSwitchCase="'textarea'"></form-textarea>
+  <form-toggle *ngSwitchCase="'toggle'"></form-toggle>
+</ng-container>
+<tui-error [error]="order | tuiFieldError | async"></tui-error>
+<ng-template
+  *ngIf="spec.warning || immutable"
+  #warning
+  let-completeWith="completeWith"
+>
+  {{ spec.warning }}
+  <p *ngIf="immutable">This value cannot be changed once set!</p>
+  <div class="buttons">
+    <button
+      tuiButton
+      type="button"
+      appearance="secondary"
+      size="s"
+      (click)="completeWith(true)"
+    >
+      Rollback
+    </button>
+    <button
+      tuiButton
+      type="button"
+      appearance="flat"
+      size="s"
+      (click)="completeWith(false)"
+    >
+      Accept
+    </button>
+  </div>
+</ng-template>

web/projects/ui/src/app/components/form/form-control/form-control.component.scss

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+
+.buttons {
+  margin-top: 0.5rem;
+
+  :first-child {
+    margin-right: 0.5rem;
+  }
+}

web/projects/ui/src/app/components/form/form-control/form-control.component.ts

@@ -0,0 +1,71 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core'
+import { AbstractTuiNullableControl } from '@taiga-ui/cdk'
+import {
+  TuiAlertService,
+  TuiDialogContext,
+  TuiNotification,
+} from '@taiga-ui/core'
+import { filter, takeUntil } from 'rxjs'
+import { CT } from '@start9labs/start-sdk'
+import { ERRORS } from '../form-group/form-group.component'
+import { FORM_CONTROL_PROVIDERS } from './form-control.providers'
+
+@Component({
+  selector: 'form-control',
+  templateUrl: './form-control.component.html',
+  styleUrls: ['./form-control.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: FORM_CONTROL_PROVIDERS,
+})
+export class FormControlComponent<
+  T extends CT.ValueSpec,
+  V,
+> extends AbstractTuiNullableControl<V> {
+  @Input()
+  spec!: T
+
+  @ViewChild('warning')
+  warning?: TemplateRef<TuiDialogContext<boolean>>
+
+  warned = false
+  focused = false
+  readonly order = ERRORS
+  private readonly alerts = inject(TuiAlertService)
+
+  get immutable(): boolean {
+    return 'immutable' in this.spec && this.spec.immutable
+  }
+
+  onFocus(focused: boolean) {
+    this.focused = focused
+    this.updateFocused(focused)
+  }
+
+  onInput(value: V | null) {
+    const previous = this.value
+
+    if (!this.warned && this.warning) {
+      this.alerts
+        .open<boolean>(this.warning, {
+          label: 'Warning',
+          status: TuiNotification.Warning,
+          hasCloseButton: false,
+          autoClose: false,
+        })
+        .pipe(filter(Boolean), takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.value = previous
+        })
+    }
+
+    this.warned = true
+    this.value = value === '' ? null : value
+  }
+}

web/projects/ui/src/app/components/form/form-control/form-control.providers.ts

@@ -0,0 +1,25 @@
+import { forwardRef, Provider } from '@angular/core'
+import { TUI_VALIDATION_ERRORS } from '@taiga-ui/kit'
+import { CT } from '@start9labs/start-sdk'
+import { FormControlComponent } from './form-control.component'
+
+interface ValidatorsPatternError {
+  actualValue: string
+  requiredPattern: string | RegExp
+}
+
+export const FORM_CONTROL_PROVIDERS: Provider[] = [
+  {
+    provide: TUI_VALIDATION_ERRORS,
+    deps: [forwardRef(() => FormControlComponent)],
+    useFactory: (control: FormControlComponent<CT.ValueSpec, string>) => ({
+      required: 'Required',
+      pattern: ({ requiredPattern }: ValidatorsPatternError) =>
+        ('patterns' in control.spec &&
+          control.spec.patterns.find(
+            ({ regex }) => String(regex) === String(requiredPattern),
+          )?.description) ||
+        'Invalid format',
+    }),
+  },
+]

web/projects/ui/src/app/components/form/form-datetime/form-datetime.component.html

@@ -0,0 +1,43 @@
+<ng-container [ngSwitch]="spec.inputmode" [tuiHintContent]="spec.description">
+  <tui-input-time
+    *ngSwitchCase="'time'"
+    [tuiHintContent]="spec | hint"
+    [disabled]="!!spec.disabled"
+    [readOnly]="readOnly"
+    [pseudoInvalid]="invalid"
+    [ngModel]="getTime(value)"
+    (ngModelChange)="value = $event?.toString() || null"
+    (focusedChange)="onFocus($event)"
+  >
+    {{ spec.name }}
+    <span *ngIf="spec.required">*</span>
+  </tui-input-time>
+  <tui-input-date
+    *ngSwitchCase="'date'"
+    [tuiHintContent]="spec | hint"
+    [disabled]="!!spec.disabled"
+    [readOnly]="readOnly"
+    [pseudoInvalid]="invalid"
+    [min]="spec.min ? (spec.min | tuiMapper : getLimit)[0] : min"
+    [max]="spec.max ? (spec.max | tuiMapper : getLimit)[0] : max"
+    [(ngModel)]="value"
+    (focusedChange)="onFocus($event)"
+  >
+    {{ spec.name }}
+    <span *ngIf="spec.required">*</span>
+  </tui-input-date>
+  <tui-input-date-time
+    *ngSwitchCase="'datetime-local'"
+    [tuiHintContent]="spec | hint"
+    [disabled]="!!spec.disabled"
+    [readOnly]="readOnly"
+    [pseudoInvalid]="invalid"
+    [min]="spec.min ? (spec.min | tuiMapper : getLimit) : min"
+    [max]="spec.max ? (spec.max | tuiMapper : getLimit) : max"
+    [(ngModel)]="value"
+    (focusedChange)="onFocus($event)"
+  >
+    {{ spec.name }}
+    <span *ngIf="spec.required">*</span>
+  </tui-input-date-time>
+</ng-container>

web/projects/ui/src/app/components/form/form-datetime/form-datetime.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core'
+import {
+  TUI_FIRST_DAY,
+  TUI_LAST_DAY,
+  TuiDay,
+  tuiPure,
+  TuiTime,
+} from '@taiga-ui/cdk'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-datetime',
+  templateUrl: './form-datetime.component.html',
+})
+export class FormDatetimeComponent extends Control<
+  CT.ValueSpecDatetime,
+  string
+> {
+  readonly min = TUI_FIRST_DAY
+  readonly max = TUI_LAST_DAY
+
+  @tuiPure
+  getTime(value: string | null) {
+    return value ? TuiTime.fromString(value) : null
+  }
+
+  getLimit(limit: string): [TuiDay, TuiTime] {
+    return [
+      TuiDay.jsonParse(limit.slice(0, 10)),
+      limit.length === 10
+        ? new TuiTime(0, 0)
+        : TuiTime.fromString(limit.slice(-5)),
+    ]
+  }
+}

web/projects/ui/src/app/components/form/form-group/form-group.component.html

@@ -0,0 +1,30 @@
+<ng-container
+  *ngFor="let entry of spec | keyvalue : asIsOrder"
+  tuiMode="onDark"
+  [ngSwitch]="entry.value.type"
+  [tuiTextfieldCleaner]="true"
+>
+  <form-object
+    *ngSwitchCase="'object'"
+    class="g-form-control"
+    [formGroupName]="entry.key"
+    [spec]="$any(entry.value)"
+  ></form-object>
+  <form-union
+    *ngSwitchCase="'union'"
+    class="g-form-control"
+    [formGroupName]="entry.key"
+    [spec]="$any(entry.value)"
+  ></form-union>
+  <form-array
+    *ngSwitchCase="'list'"
+    [formArrayName]="entry.key"
+    [spec]="$any(entry.value)"
+  ></form-array>
+  <form-control
+    *ngSwitchDefault
+    class="g-form-control"
+    [formControlName]="entry.key"
+    [spec]="entry.value"
+  ></form-control>
+</ng-container>

web/projects/ui/src/app/components/form/form-group/form-group.component.scss

@@ -0,0 +1,35 @@
+form-group .g-form-control:not(:first-child) {
+  margin-top: 1rem;
+}
+
+form-group .g-form-group {
+  position: relative;
+  padding-left: var(--tui-height-m);
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    background: var(--tui-clear);
+  }
+
+  &::before {
+    top: 0;
+    left: calc(1rem - 1px);
+    bottom: 0.5rem;
+    width: 2px;
+  }
+
+  &::after {
+    left: 0.75rem;
+    bottom: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+  }
+}
+
+form-group tui-tooltip {
+  z-index: 1;
+  margin-left: 0.25rem;
+}

web/projects/ui/src/app/components/form/form-group/form-group.component.ts

@@ -0,0 +1,35 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { FORM_GROUP_PROVIDERS } from './form-group.providers'
+
+export const ERRORS = [
+  'required',
+  'pattern',
+  'notNumber',
+  'numberNotInteger',
+  'numberNotInRange',
+  'listNotUnique',
+  'listNotInRange',
+  'listItemIssue',
+]
+
+@Component({
+  selector: 'form-group',
+  templateUrl: './form-group.component.html',
+  styleUrls: ['./form-group.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [FORM_GROUP_PROVIDERS],
+})
+export class FormGroupComponent {
+  @Input() spec: CT.InputSpec = {}
+
+  asIsOrder() {
+    return 0
+  }
+}

web/projects/ui/src/app/components/form/form-group/form-group.providers.ts

@@ -0,0 +1,34 @@
+import { Provider, SkipSelf } from '@angular/core'
+import {
+  TUI_ARROW_MODE,
+  tuiInputDateOptionsProvider,
+  tuiInputTimeOptionsProvider,
+} from '@taiga-ui/kit'
+import { TUI_DEFAULT_ERROR_MESSAGE } from '@taiga-ui/core'
+import { ControlContainer } from '@angular/forms'
+import { identity, of } from 'rxjs'
+
+export const FORM_GROUP_PROVIDERS: Provider[] = [
+  {
+    provide: TUI_DEFAULT_ERROR_MESSAGE,
+    useValue: of('Unknown error'),
+  },
+  {
+    provide: ControlContainer,
+    deps: [[new SkipSelf(), ControlContainer]],
+    useFactory: identity,
+  },
+  {
+    provide: TUI_ARROW_MODE,
+    useValue: {
+      interactive: null,
+      disabled: null,
+    },
+  },
+  tuiInputDateOptionsProvider({
+    nativePicker: true,
+  }),
+  tuiInputTimeOptionsProvider({
+    nativePicker: true,
+  }),
+]

web/projects/ui/src/app/components/form/form-multiselect/form-multiselect.component.html

@@ -0,0 +1,18 @@
+<tui-multi-select
+  [tuiHintContent]="spec | hint"
+  [disabled]="disabled"
+  [readOnly]="readOnly"
+  [pseudoInvalid]="invalid"
+  [editable]="false"
+  [disabledItemHandler]="disabledItemHandler"
+  [(ngModel)]="selected"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <select
+    tuiSelect
+    multiple
+    [items]="items"
+    [disabledItemHandler]="disabledItemHandler"
+  ></select>
+</tui-multi-select>

web/projects/ui/src/app/components/form/form-multiselect/form-multiselect.component.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+import { tuiPure } from '@taiga-ui/cdk'
+import { invert } from '@start9labs/shared'
+
+@Component({
+  selector: 'form-multiselect',
+  templateUrl: './form-multiselect.component.html',
+})
+export class FormMultiselectComponent extends Control<
+  CT.ValueSpecMultiselect,
+  readonly string[]
+> {
+  private readonly inverted = invert(this.spec.values)
+
+  private readonly isDisabled = (item: string) =>
+    Array.isArray(this.spec.disabled) &&
+    this.spec.disabled.includes(this.inverted[item])
+
+  private readonly isExceedingLimit = (item: string) =>
+    !!this.spec.maxLength &&
+    this.selected.length >= this.spec.maxLength &&
+    !this.selected.includes(item)
+
+  readonly disabledItemHandler = (item: string): boolean =>
+    this.isDisabled(item) || this.isExceedingLimit(item)
+
+  readonly items = Object.values(this.spec.values)
+
+  get disabled(): boolean {
+    return typeof this.spec.disabled === 'string'
+  }
+
+  get selected(): string[] {
+    return this.memoize(this.value)
+  }
+
+  set selected(value: string[]) {
+    this.value = Object.entries(this.spec.values)
+      .filter(([_, v]) => value.includes(v))
+      .map(([k]) => k)
+  }
+
+  @tuiPure
+  private memoize(value: null | readonly string[]): string[] {
+    return value?.map(key => this.spec.values[key]) || []
+  }
+}

web/projects/ui/src/app/components/form/form-number/form-number.component.html

@@ -0,0 +1,18 @@
+<tui-input-number
+  [tuiHintContent]="spec | hint"
+  [disabled]="!!spec.disabled"
+  [readOnly]="readOnly"
+  [tuiTextfieldPostfix]="spec.units || ''"
+  [pseudoInvalid]="invalid"
+  [precision]="Infinity"
+  [decimal]="spec.integer ? 'never' : 'not-zero'"
+  [min]="spec.min ?? -Infinity"
+  [max]="spec.max ?? Infinity"
+  [step]="spec.step || 0"
+  [(ngModel)]="value"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <span *ngIf="spec.required">*</span>
+  <input tuiTextfield [placeholder]="spec.placeholder || ''" />
+</tui-input-number>

web/projects/ui/src/app/components/form/form-number/form-number.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-number',
+  templateUrl: './form-number.component.html',
+})
+export class FormNumberComponent extends Control<CT.ValueSpecNumber, number> {
+  protected readonly Infinity = Infinity
+}

web/projects/ui/src/app/components/form/form-object/form-object.component.html

@@ -0,0 +1,25 @@
+<h3 class="title" (click)="toggle()">
+  <button
+    tuiIconButton
+    size="s"
+    iconLeft="tuiIconChevronDown"
+    type="button"
+    class="button"
+    [class.button_open]="open"
+    [style.border-radius.%]="100"
+    [appearance]="invalid ? 'destructive' : 'secondary'"
+  ></button>
+  <ng-content></ng-content>
+  {{ spec.name }}
+  <tui-tooltip
+    *ngIf="spec.description"
+    [content]="spec.description"
+    (click.stop)="(0)"
+  ></tui-tooltip>
+</h3>
+
+<tui-expand class="expand" [expanded]="open">
+  <div class="g-form-group" [class.g-form-group_invalid]="invalid">
+    <form-group [spec]="spec.spec"></form-group>
+  </div>
+</tui-expand>

web/projects/ui/src/app/components/form/form-object/form-object.component.scss

@@ -0,0 +1,41 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.title {
+  position: relative;
+  height: var(--tui-height-l);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font: var(--tui-font-text-l);
+  font-weight: bold;
+  margin: 0 0 -0.75rem;
+}
+
+.button {
+  @include transition(transform);
+
+  margin-right: 1rem;
+
+  &_open {
+    transform: rotate(180deg);
+  }
+}
+
+.expand {
+  align-self: stretch;
+}
+
+.g-form-group {
+  padding-top: 0.75rem;
+
+  &_invalid::before,
+  &_invalid::after {
+    background: var(--tui-error-bg);
+  }
+}

web/projects/ui/src/app/components/form/form-object/form-object.component.ts

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from '@angular/core'
+import { ControlContainer } from '@angular/forms'
+import { CT } from '@start9labs/start-sdk'
+
+@Component({
+  selector: 'form-object',
+  templateUrl: './form-object.component.html',
+  styleUrls: ['./form-object.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormObjectComponent {
+  @Input()
+  spec!: CT.ValueSpecObject
+
+  @Input()
+  open = false
+
+  @Output()
+  readonly openChange = new EventEmitter<boolean>()
+
+  private readonly container = inject(ControlContainer)
+
+  get invalid() {
+    return !this.container.valid && this.container.touched
+  }
+
+  toggle() {
+    this.open = !this.open
+    this.openChange.emit(this.open)
+  }
+}

web/projects/ui/src/app/components/form/form-select/form-select.component.html

@@ -0,0 +1,18 @@
+<tui-select
+  [tuiHintContent]="spec | hint"
+  [disabled]="disabled"
+  [readOnly]="readOnly"
+  [tuiTextfieldCleaner]="!spec.required"
+  [pseudoInvalid]="invalid"
+  [(ngModel)]="selected"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <span *ngIf="spec.required">*</span>
+  <select
+    tuiSelect
+    [placeholder]="spec.name"
+    [items]="items"
+    [disabledItemHandler]="disabledItemHandler"
+  ></select>
+</tui-select>

web/projects/ui/src/app/components/form/form-select/form-select.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { invert } from '@start9labs/shared'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-select',
+  templateUrl: './form-select.component.html',
+})
+export class FormSelectComponent extends Control<CT.ValueSpecSelect, string> {
+  private readonly inverted = invert(this.spec.values)
+
+  readonly items = Object.values(this.spec.values)
+
+  readonly disabledItemHandler = (item: string) =>
+    Array.isArray(this.spec.disabled) &&
+    this.spec.disabled.includes(this.inverted[item])
+
+  get disabled(): boolean {
+    return typeof this.spec.disabled === 'string'
+  }
+
+  get selected(): string | null {
+    return (this.value && this.spec.values[this.value]) || null
+  }
+
+  set selected(value: string | null) {
+    this.value = (value && this.inverted[value]) || null
+  }
+}

web/projects/ui/src/app/components/form/form-text/form-text.component.html

@@ -0,0 +1,44 @@
+<tui-input
+  [tuiTextfieldCustomContent]="spec.masked || spec.generate ? toggle : ''"
+  [tuiHintContent]="spec | hint"
+  [disabled]="!!spec.disabled"
+  [readOnly]="readOnly"
+  [pseudoInvalid]="invalid"
+  [(ngModel)]="value"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <span *ngIf="spec.required">*</span>
+  <input
+    tuiTextfield
+    [class.masked]="spec.masked && masked"
+    [placeholder]="spec.placeholder || ''"
+    [attr.minLength]="spec.minLength"
+    [attr.maxLength]="spec.maxLength"
+    [attr.inputmode]="spec.inputmode"
+  />
+</tui-input>
+<ng-template #toggle>
+  <button
+    *ngIf="spec.generate"
+    tuiIconButton
+    type="button"
+    appearance="icon"
+    title="Generate"
+    size="xs"
+    class="button"
+    iconLeft="tuiIconRefreshCcw"
+    (click)="generate()"
+  ></button>
+  <button
+    *ngIf="spec.masked"
+    tuiIconButton
+    type="button"
+    appearance="icon"
+    title="Toggle masking"
+    size="xs"
+    class="button"
+    [iconLeft]="masked ? 'tuiIconEye' : 'tuiIconEyeOff'"
+    (click)="masked = !masked"
+  ></button>
+</ng-template>

web/projects/ui/src/app/components/form/form-text/form-text.component.scss

@@ -0,0 +1,8 @@
+.button {
+  pointer-events: auto;
+  margin-left: 0.25rem;
+}
+
+.masked {
+  -webkit-text-security: disc;
+}

web/projects/ui/src/app/components/form/form-text/form-text.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core'
+import { CT, utils } from '@start9labs/start-sdk'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-text',
+  templateUrl: './form-text.component.html',
+  styleUrls: ['./form-text.component.scss'],
+})
+export class FormTextComponent extends Control<CT.ValueSpecText, string> {
+  masked = true
+
+  generate() {
+    this.value = utils.getDefaultString(this.spec.generate || '')
+  }
+}

web/projects/ui/src/app/components/form/form-textarea/form-textarea.component.html

@@ -0,0 +1,15 @@
+<tui-textarea
+  [tuiHintContent]="spec | hint"
+  [disabled]="!!spec.disabled"
+  [readOnly]="readOnly"
+  [pseudoInvalid]="invalid"
+  [expandable]="true"
+  [rows]="6"
+  [maxLength]="spec.maxLength"
+  [(ngModel)]="value"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <span *ngIf="spec.required">*</span>
+  <textarea tuiTextfield [placeholder]="spec.placeholder || ''"></textarea>
+</tui-textarea>

web/projects/ui/src/app/components/form/form-textarea/form-textarea.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-textarea',
+  templateUrl: './form-textarea.component.html',
+})
+export class FormTextareaComponent extends Control<
+  CT.ValueSpecTextarea,
+  string
+> {}

web/projects/ui/src/app/components/form/form-toggle/form-toggle.component.html

@@ -0,0 +1,11 @@
+{{ spec.name }}
+<tui-tooltip
+  *ngIf="spec.description || spec.disabled"
+  [tuiHintContent]="spec | hint"
+></tui-tooltip>
+<tui-toggle
+  size="l"
+  [disabled]="!!spec.disabled || readOnly"
+  [(ngModel)]="value"
+  (focusedChange)="onFocus($event)"
+></tui-toggle>

web/projects/ui/src/app/components/form/form-toggle/form-toggle.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-toggle',
+  templateUrl: './form-toggle.component.html',
+  host: { class: 'g-toggle' },
+})
+export class FormToggleComponent extends Control<CT.ValueSpecToggle, boolean> {}

web/projects/ui/src/app/components/form/form-union/form-union.component.html

@@ -0,0 +1,11 @@
+<form-control
+  [spec]="selectSpec"
+  formControlName="selection"
+  (tuiValueChanges)="onUnion($event)"
+></form-control>
+<tui-elastic-container class="g-form-group" formGroupName="value">
+  <form-group
+    class="group"
+    [spec]="(union && spec.variants[union].spec) || {}"
+  ></form-group>
+</tui-elastic-container>

web/projects/ui/src/app/components/form/form-union/form-union.component.scss

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+
+.group {
+  display: block;
+  margin-top: 1rem;
+}

web/projects/ui/src/app/components/form/form-union/form-union.component.ts

@@ -0,0 +1,55 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+  OnChanges,
+} from '@angular/core'
+import { ControlContainer, FormGroupName } from '@angular/forms'
+import { CT } from '@start9labs/start-sdk'
+import { FormService } from 'src/app/services/form.service'
+import { tuiPure } from '@taiga-ui/cdk'
+
+@Component({
+  selector: 'form-union',
+  templateUrl: './form-union.component.html',
+  styleUrls: ['./form-union.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    {
+      provide: ControlContainer,
+      useExisting: FormGroupName,
+    },
+  ],
+})
+export class FormUnionComponent implements OnChanges {
+  @Input()
+  spec!: CT.ValueSpecUnion
+
+  selectSpec!: CT.ValueSpecSelect
+
+  private readonly form = inject(FormGroupName)
+  private readonly formService = inject(FormService)
+
+  get union(): string {
+    return this.form.value.selection
+  }
+
+  @tuiPure
+  onUnion(union: string) {
+    this.form.control.setControl(
+      'value',
+      this.formService.getFormGroup(
+        union ? this.spec.variants[union].spec : {},
+      ),
+      {
+        emitEvent: false,
+      },
+    )
+  }
+
+  ngOnChanges() {
+    this.selectSpec = this.formService.getUnionSelectSpec(this.spec, this.union)
+    if (this.union) this.onUnion(this.union)
+  }
+}

web/projects/ui/src/app/components/form/form.module.ts

@@ -0,0 +1,107 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { MaskitoModule } from '@maskito/angular'
+import { TuiMapperPipeModule, TuiValueChangesModule } from '@taiga-ui/cdk'
+import {
+  TuiErrorModule,
+  TuiExpandModule,
+  TuiHintModule,
+  TuiLinkModule,
+  TuiModeModule,
+  TuiTextfieldControllerModule,
+  TuiTooltipModule,
+} from '@taiga-ui/core'
+import {
+  TuiAppearanceModule,
+  TuiButtonModule,
+  TuiIconModule,
+} from '@taiga-ui/experimental'
+import {
+  TuiElasticContainerModule,
+  TuiFieldErrorPipeModule,
+  TuiInputDateModule,
+  TuiInputDateTimeModule,
+  TuiInputFilesModule,
+  TuiInputModule,
+  TuiInputNumberModule,
+  TuiInputTimeModule,
+  TuiMultiSelectModule,
+  TuiPromptModule,
+  TuiSelectModule,
+  TuiTagModule,
+  TuiTextareaModule,
+  TuiToggleModule,
+} from '@taiga-ui/kit'
+
+import { FormGroupComponent } from './form-group/form-group.component'
+import { FormTextComponent } from './form-text/form-text.component'
+import { FormToggleComponent } from './form-toggle/form-toggle.component'
+import { FormTextareaComponent } from './form-textarea/form-textarea.component'
+import { FormNumberComponent } from './form-number/form-number.component'
+import { FormSelectComponent } from './form-select/form-select.component'
+import { FormMultiselectComponent } from './form-multiselect/form-multiselect.component'
+import { FormUnionComponent } from './form-union/form-union.component'
+import { FormObjectComponent } from './form-object/form-object.component'
+import { FormArrayComponent } from './form-array/form-array.component'
+import { FormControlComponent } from './form-control/form-control.component'
+import { MustachePipe } from './mustache.pipe'
+import { ControlDirective } from './control.directive'
+import { FormColorComponent } from './form-color/form-color.component'
+import { FormDatetimeComponent } from './form-datetime/form-datetime.component'
+import { HintPipe } from './hint.pipe'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TuiInputModule,
+    TuiInputNumberModule,
+    TuiInputFilesModule,
+    TuiTextareaModule,
+    TuiSelectModule,
+    TuiMultiSelectModule,
+    TuiToggleModule,
+    TuiTooltipModule,
+    TuiHintModule,
+    TuiModeModule,
+    TuiTagModule,
+    TuiButtonModule,
+    TuiExpandModule,
+    TuiTextfieldControllerModule,
+    TuiLinkModule,
+    TuiPromptModule,
+    TuiErrorModule,
+    TuiFieldErrorPipeModule,
+    TuiValueChangesModule,
+    TuiElasticContainerModule,
+    MaskitoModule,
+    TuiIconModule,
+    TuiAppearanceModule,
+    TuiInputDateModule,
+    TuiInputTimeModule,
+    TuiInputDateTimeModule,
+    TuiMapperPipeModule,
+  ],
+  declarations: [
+    FormGroupComponent,
+    FormControlComponent,
+    FormColorComponent,
+    FormDatetimeComponent,
+    FormTextComponent,
+    FormToggleComponent,
+    FormTextareaComponent,
+    FormNumberComponent,
+    FormSelectComponent,
+    FormMultiselectComponent,
+    FormUnionComponent,
+    FormObjectComponent,
+    FormArrayComponent,
+    MustachePipe,
+    HintPipe,
+    ControlDirective,
+  ],
+  exports: [FormGroupComponent],
+})
+export class FormModule {}

web/projects/ui/src/app/components/form/hint.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+
+@Pipe({
+  name: 'hint',
+})
+export class HintPipe implements PipeTransform {
+  transform(spec: CT.ValueSpec): string {
+    const hint = []
+
+    if (spec.description) {
+      hint.push(spec.description)
+    }
+
+    if ('disabled' in spec && typeof spec.disabled === 'string') {
+      hint.push(`Disabled: ${spec.disabled}`)
+    }
+
+    return hint.join('\n\n')
+  }
+}

web/projects/ui/src/app/components/form/invalid.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core'
+import { ControlDirective } from './control.directive'
+
+@Injectable()
+export class InvalidService {
+  private readonly controls: ControlDirective[] = []
+
+  scrollIntoView() {
+    this.controls.find(({ invalid }) => invalid)?.scrollIntoView()
+  }
+
+  add(control: ControlDirective) {
+    this.controls.push(control)
+  }
+
+  remove(control: ControlDirective) {
+    this.controls.splice(this.controls.indexOf(control), 1)
+  }
+}

web/projects/ui/src/app/components/form/mustache.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+const Mustache = require('mustache')
+
+@Pipe({
+  name: 'mustache',
+})
+export class MustachePipe implements PipeTransform {
+  transform(value: any, displayAs: string): string {
+    return displayAs && Mustache.render(displayAs, value)
+  }
+}

web/projects/ui/src/app/modals/backup-server-select/backup-server-select.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { FormsModule } from '@angular/forms'
+import { BackupServerSelectModal } from './backup-server-select.page'
+import { AppRecoverSelectPageModule } from 'src/app/modals/app-recover-select/app-recover-select.module'
+
+@NgModule({
+  declarations: [BackupServerSelectModal],
+  imports: [CommonModule, FormsModule, IonicModule, AppRecoverSelectPageModule],
+  exports: [BackupServerSelectModal],
+})
+export class BackupServerSelectModule {}

web/projects/ui/src/app/modals/backup-server-select/backup-server-select.page.html

@@ -0,0 +1,35 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Select Server Backup</ion-title>
+    <ion-buttons slot="end">
+      <ion-button (click)="dismiss()">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-item-group>
+    <ion-item
+      *ngFor="let server of target.entry.startOs | keyvalue"
+      button
+      (click)="presentModalPassword(server.key, server.value)"
+    >
+      <ion-label>
+        <h2>
+          <b>Local Hostname</b>
+          : {{ server.value.hostname }}.local
+        </h2>
+        <h2>
+          <b>StartOS Version</b>
+          : {{ server.value.version }}
+        </h2>
+        <h2>
+          <b>Created</b>
+          : {{ server.value.timestamp | date : 'medium' }}
+        </h2>
+      </ion-label>
+    </ion-item>
+  </ion-item-group>
+</ion-content>

web/projects/ui/src/app/modals/backup-server-select/backup-server-select.page.ts

@@ -0,0 +1,118 @@
+import { Component, Input } from '@angular/core'
+import { ModalController, NavController } from '@ionic/angular'
+import * as argon2 from '@start9labs/argon2'
+import {
+  ErrorService,
+  LoadingService,
+  StartOSDiskInfo,
+} from '@start9labs/shared'
+import {
+  PasswordPromptComponent,
+  PromptOptions,
+} from 'src/app/modals/password-prompt.component'
+import {
+  BackupInfo,
+  CifsBackupTarget,
+  DiskBackupTarget,
+} from 'src/app/services/api/api.types'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { MappedBackupTarget } from 'src/app/types/mapped-backup-target'
+import { AppRecoverSelectPage } from '../app-recover-select/app-recover-select.page'
+
+@Component({
+  selector: 'backup-server-select',
+  templateUrl: 'backup-server-select.page.html',
+  styleUrls: ['backup-server-select.page.scss'],
+})
+export class BackupServerSelectModal {
+  @Input() target!: MappedBackupTarget<CifsBackupTarget | DiskBackupTarget>
+
+  constructor(
+    private readonly modalCtrl: ModalController,
+    private readonly loader: LoadingService,
+    private readonly api: ApiService,
+    private readonly navCtrl: NavController,
+    private readonly errorService: ErrorService,
+  ) {}
+
+  dismiss() {
+    this.modalCtrl.dismiss()
+  }
+
+  async presentModalPassword(
+    serverId: string,
+    { passwordHash }: StartOSDiskInfo,
+  ): Promise<void> {
+    const options: PromptOptions = {
+      title: 'Password Required',
+      message:
+        'Enter the password that was used to encrypt this backup. On the next screen, you will select the individual services you want to restore.',
+      label: 'Decrypt Backup',
+      placeholder: 'Enter password',
+      buttonText: 'Next',
+    }
+    const modal = await this.modalCtrl.create({
+      component: PasswordPromptComponent,
+      componentProps: { options },
+      canDismiss: async password => {
+        if (password === null) {
+          return true
+        }
+
+        try {
+          argon2.verify(passwordHash!, password)
+          await this.restoreFromBackup(serverId, password)
+          return true
+        } catch (e: any) {
+          this.errorService.handleError(e)
+          return false
+        }
+      },
+    })
+    modal.present()
+  }
+
+  private async restoreFromBackup(
+    serverId: string,
+    password: string,
+  ): Promise<void> {
+    const loader = this.loader.open('Decrypting drive...').subscribe()
+
+    try {
+      const backupInfo = await this.api.getBackupInfo({
+        targetId: this.target.id,
+        serverId,
+        password,
+      })
+      this.presentModalSelect(serverId, backupInfo, password)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
+
+  private async presentModalSelect(
+    serverId: string,
+    backupInfo: BackupInfo,
+    password: string,
+  ): Promise<void> {
+    const modal = await this.modalCtrl.create({
+      componentProps: {
+        targetId: this.target.id,
+        serverId,
+        backupInfo,
+        password,
+      },
+      presentingElement: await this.modalCtrl.getTop(),
+      component: AppRecoverSelectPage,
+    })
+
+    modal.onDidDismiss().then(res => {
+      if (res.role === 'success') {
+        this.modalCtrl.dismiss(undefined, 'success')
+        this.navCtrl.navigateRoot('/services')
+      }
+    })
+
+    await modal.present()
+  }
+}

web/projects/ui/src/app/modals/config-dep.component.ts

@@ -0,0 +1,104 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+} from '@angular/core'
+import { compare, getValueByPointer, Operation } from 'fast-json-patch'
+import { isObject } from '@start9labs/shared'
+import { tuiIsNumber } from '@taiga-ui/cdk'
+import { CommonModule } from '@angular/common'
+import { TuiNotificationModule } from '@taiga-ui/core'
+
+@Component({
+  selector: 'config-dep',
+  template: `
+    <tui-notification>
+      <h3 style="margin: 0 0 0.5rem; font-size: 1.25rem;">
+        {{ package }}
+      </h3>
+      The following modifications have been made to {{ package }} to satisfy
+      {{ dep }}:
+      <ul>
+        <li *ngFor="let d of diff" [innerHTML]="d"></li>
+      </ul>
+      To accept these modifications, click "Save".
+    </tui-notification>
+  `,
+  standalone: true,
+  imports: [CommonModule, TuiNotificationModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfigDepComponent implements OnChanges {
+  @Input()
+  package = ''
+
+  @Input()
+  dep = ''
+
+  @Input()
+  original: object = {}
+
+  @Input()
+  value: object = {}
+
+  diff: string[] = []
+
+  ngOnChanges() {
+    this.diff = compare(this.original, this.value).map(
+      op => `${this.getPath(op)}: ${this.getMessage(op)}`,
+    )
+  }
+
+  private getPath(operation: Operation): string {
+    const path = operation.path
+      .substring(1)
+      .split('/')
+      .map(node => {
+        const num = Number(node)
+        return isNaN(num) ? node : num
+      })
+
+    if (tuiIsNumber(path[path.length - 1])) {
+      path.pop()
+    }
+
+    return path.join(' &rarr; ')
+  }
+
+  private getMessage(operation: Operation): string {
+    switch (operation.op) {
+      case 'add':
+        return `Added ${this.getNewValue(operation.value)}`
+      case 'remove':
+        return `Removed ${this.getOldValue(operation.path)}`
+      case 'replace':
+        return `Changed from ${this.getOldValue(
+          operation.path,
+        )} to ${this.getNewValue(operation.value)}`
+      default:
+        return `Unknown operation`
+    }
+  }
+
+  private getOldValue(path: any): string {
+    const val = getValueByPointer(this.original, path)
+    if (['string', 'number', 'boolean'].includes(typeof val)) {
+      return val
+    } else if (isObject(val)) {
+      return 'entry'
+    } else {
+      return 'list'
+    }
+  }
+
+  private getNewValue(val: any): string {
+    if (['string', 'number', 'boolean'].includes(typeof val)) {
+      return val
+    } else if (isObject(val)) {
+      return 'new entry'
+    } else {
+      return 'new list'
+    }
+  }
+}

web/projects/ui/src/app/modals/config.component.ts

@@ -0,0 +1,261 @@
+import { CommonModule } from '@angular/common'
+import { Component, Inject, ViewChild } from '@angular/core'
+import {
+  ErrorService,
+  getErrorMessage,
+  isEmptyObject,
+  LoadingService,
+} from '@start9labs/shared'
+import { CT, T } from '@start9labs/start-sdk'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import {
+  TuiDialogContext,
+  TuiDialogService,
+  TuiLoaderModule,
+  TuiModeModule,
+  TuiNotificationModule,
+} from '@taiga-ui/core'
+import { TUI_PROMPT, TuiPromptData } from '@taiga-ui/kit'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { compare, Operation } from 'fast-json-patch'
+import { PatchDB } from 'patch-db-client'
+import { endWith, firstValueFrom, Subscription } from 'rxjs'
+import { ActionButton, FormComponent } from 'src/app/components/form.component'
+import { InvalidService } from 'src/app/components/form/invalid.service'
+import { ConfigDepComponent } from 'src/app/modals/config-dep.component'
+import { UiPipeModule } from 'src/app/pipes/ui/ui.module'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import {
+  DataModel,
+  PackageDataEntry,
+} from 'src/app/services/patch-db/data-model'
+import {
+  getAllPackages,
+  getManifest,
+  getPackage,
+} from 'src/app/util/get-package-data'
+import { hasCurrentDeps } from 'src/app/util/has-deps'
+import { Breakages } from 'src/app/services/api/api.types'
+import { DependentInfo } from 'src/app/types/dependent-info'
+
+export interface PackageConfigData {
+  readonly pkgId: string
+  readonly dependentInfo?: DependentInfo
+}
+
+@Component({
+  template: `
+    <tui-loader
+      *ngIf="loadingText"
+      size="l"
+      [textContent]="loadingText"
+    ></tui-loader>
+
+    <tui-notification
+      *ngIf="!loadingText && (loadingError || !pkg)"
+      status="error"
+    >
+      <div [innerHTML]="loadingError"></div>
+    </tui-notification>
+
+    <ng-container
+      *ngIf="
+        !loadingText && !loadingError && pkg && (pkg | toManifest) as manifest
+      "
+    >
+      <tui-notification *ngIf="success" status="success">
+        {{ manifest.title }} has been automatically configured with recommended
+        defaults. Make whatever changes you want, then click "Save".
+      </tui-notification>
+
+      <config-dep
+        *ngIf="dependentInfo && value && original"
+        [package]="manifest.title"
+        [dep]="dependentInfo.title"
+        [original]="original"
+        [value]="value"
+      ></config-dep>
+
+      <tui-notification *ngIf="!manifest.hasConfig" status="warning">
+        No config options for {{ manifest.title }} {{ manifest.version }}.
+      </tui-notification>
+
+      <app-form
+        tuiMode="onDark"
+        [spec]="spec"
+        [value]="value || {}"
+        [buttons]="buttons"
+        [patch]="patch"
+      >
+        <button
+          tuiButton
+          appearance="flat"
+          type="reset"
+          [style.margin-right]="'auto'"
+        >
+          Reset Defaults
+        </button>
+      </app-form>
+    </ng-container>
+  `,
+  styles: [
+    `
+      tui-notification {
+        font-size: 1rem;
+        margin-bottom: 1rem;
+      }
+    `,
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormComponent,
+    TuiLoaderModule,
+    TuiNotificationModule,
+    TuiButtonModule,
+    TuiModeModule,
+    ConfigDepComponent,
+    UiPipeModule,
+  ],
+  providers: [InvalidService],
+})
+export class ConfigModal {
+  @ViewChild(FormComponent)
+  private readonly form?: FormComponent<Record<string, any>>
+
+  readonly pkgId = this.context.data.pkgId
+  readonly dependentInfo = this.context.data.dependentInfo
+
+  loadingError = ''
+  loadingText = this.dependentInfo
+    ? `Setting properties to accommodate ${this.dependentInfo.title}`
+    : 'Loading Config'
+
+  pkg?: PackageDataEntry
+  spec: CT.InputSpec = {}
+  patch: Operation[] = []
+  buttons: ActionButton<any>[] = [
+    {
+      text: 'Save',
+      handler: value => this.save(value),
+    },
+  ]
+
+  original: object | null = null
+  value: object | null = null
+
+  constructor(
+    @Inject(POLYMORPHEUS_CONTEXT)
+    private readonly context: TuiDialogContext<void, PackageConfigData>,
+    private readonly dialogs: TuiDialogService,
+    private readonly errorService: ErrorService,
+    private readonly loader: LoadingService,
+    private readonly embassyApi: ApiService,
+    private readonly patchDb: PatchDB<DataModel>,
+  ) {}
+
+  get success(): boolean {
+    return (
+      !!this.form &&
+      !this.form.form.dirty &&
+      !this.original &&
+      !this.pkg?.status?.configured
+    )
+  }
+
+  async ngOnInit() {
+    try {
+      this.pkg = await getPackage(this.patchDb, this.pkgId)
+
+      if (!this.pkg) {
+        this.loadingError = 'This service does not exist'
+
+        return
+      }
+
+      if (this.dependentInfo) {
+        const depConfig = await this.embassyApi.dryConfigureDependency({
+          dependencyId: this.pkgId,
+          dependentId: this.dependentInfo.id,
+        })
+
+        this.original = depConfig.oldConfig
+        this.value = depConfig.newConfig || this.original
+        this.spec = depConfig.spec
+        this.patch = compare(this.original, this.value)
+      } else {
+        const { config, spec } = await this.embassyApi.getPackageConfig({
+          id: this.pkgId,
+        })
+
+        this.original = config
+        this.value = config
+        this.spec = spec
+      }
+    } catch (e: any) {
+      this.loadingError = String(getErrorMessage(e))
+    } finally {
+      this.loadingText = ''
+    }
+  }
+
+  private async save(config: any) {
+    const loader = new Subscription()
+
+    try {
+      if (hasCurrentDeps(this.pkgId, await getAllPackages(this.patchDb))) {
+        await this.configureDeps(config, loader)
+      } else {
+        await this.configure(config, loader)
+      }
+    } catch (e: any) {
+      this.errorService.handleError(e)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
+
+  private async configureDeps(
+    config: Record<string, any>,
+    loader: Subscription,
+  ) {
+    loader.unsubscribe()
+    loader.closed = false
+    loader.add(this.loader.open('Checking dependent services...').subscribe())
+
+    const breakages = await this.embassyApi.drySetPackageConfig({
+      id: this.pkgId,
+      config,
+    })
+
+    loader.unsubscribe()
+    loader.closed = false
+
+    if (isEmptyObject(breakages) || (await this.approveBreakages(breakages))) {
+      await this.configure(config, loader)
+    }
+  }
+
+  private async configure(config: Record<string, any>, loader: Subscription) {
+    loader.unsubscribe()
+    loader.closed = false
+    loader.add(this.loader.open('Saving...').subscribe())
+
+    await this.embassyApi.setPackageConfig({ id: this.pkgId, config })
+    this.context.$implicit.complete()
+  }
+
+  private async approveBreakages(breakages: T.PackageId[]): Promise<boolean> {
+    const packages = await getAllPackages(this.patchDb)
+    const message =
+      'As a result of this change, the following services will no longer work properly and may crash:<ul>'
+    const content = `${message}${breakages.map(
+      id => `<li><b>${getManifest(packages[id]).title}</b></li>`,
+    )}</ul>`
+    const data: TuiPromptData = { content, yes: 'Continue', no: 'Cancel' }
+
+    return firstValueFrom(
+      this.dialogs.open<boolean>(TUI_PROMPT, { data }).pipe(endWith(false)),
+    )
+  }
+}

web/projects/ui/src/app/modals/marketplace-settings/registry.component.ts

@@ -0,0 +1,42 @@
+import { NgIf } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+} from '@angular/core'
+import { TuiIconModule, TuiTitleModule } from '@taiga-ui/experimental'
+import { ConfigService } from 'src/app/services/config.service'
+
+import { StoreIconComponent } from './store-icon.component'
+
+@Component({
+  standalone: true,
+  selector: '[registry]',
+  template: `
+    <store-icon
+      [url]="registry.url"
+      [marketplace]="marketplace"
+      size="40px"
+    ></store-icon>
+    <div tuiTitle>
+      {{ registry.name }}
+      <div tuiSubtitle>{{ registry.url }}</div>
+    </div>
+    <tui-icon
+      *ngIf="registry.selected; else content"
+      icon="tuiIconCheck"
+      [style.color]="'var(--tui-positive)'"
+    ></tui-icon>
+    <ng-template #content><ng-content></ng-content></ng-template>
+  `,
+  styles: [':host { border-radius: 0.25rem; width: stretch; }'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgIf, StoreIconComponent, TuiIconModule, TuiTitleModule],
+})
+export class MarketplaceRegistryComponent {
+  readonly marketplace = inject(ConfigService).marketplace
+
+  @Input()
+  registry!: { url: string; selected: boolean; name?: string }
+}

web/projects/ui/src/app/modals/marketplace-settings/store-icon.component.ts

@@ -0,0 +1,46 @@
+import { NgIf } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { sameUrl } from '@start9labs/shared'
+
+@Component({
+  standalone: true,
+  selector: 'store-icon',
+  template: `
+    <img
+      *ngIf="icon; else noIcon"
+      [style.border-radius.%]="100"
+      [style.max-width]="size || '100%'"
+      [src]="icon"
+      alt="Marketplace Icon"
+    />
+    <ng-template #noIcon>
+      <img
+        [style.max-width]="size || '100%'"
+        [style.border-radius]="0"
+        src="assets/img/storefront-outline.png"
+        alt="Marketplace Icon"
+      />
+    </ng-template>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgIf],
+})
+export class StoreIconComponent {
+  @Input()
+  url = ''
+  @Input()
+  size?: string
+  @Input()
+  marketplace!: any
+
+  get icon() {
+    const { start9, community } = this.marketplace
+
+    if (sameUrl(this.url, start9)) {
+      return 'assets/img/icon_transparent.png'
+    } else if (sameUrl(this.url, community)) {
+      return 'assets/img/community-store.png'
+    }
+    return null
+  }
+}

web/projects/ui/src/app/modals/password-prompt.component.ts

@@ -0,0 +1,94 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  Input,
+  ViewChild,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { IonicModule, ModalController } from '@ionic/angular'
+import { TuiTextfieldComponent } from '@taiga-ui/core'
+import { TuiInputPasswordModule } from '@taiga-ui/kit'
+
+export interface PromptOptions {
+  title: string
+  message: string
+  label: string
+  placeholder: string
+  buttonText: string
+}
+
+@Component({
+  standalone: true,
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>{{ options.title }}</ion-title>
+        <ion-buttons slot="end">
+          <ion-button (click)="cancel()">
+            <ion-icon slot="icon-only" name="close"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <p>{{ options.message }}</p>
+      <p>
+        <tui-input-password [(ngModel)]="password" (keydown.enter)="confirm()">
+          {{ options.label }}
+          <input tuiTextfield [placeholder]="options.placeholder" />
+        </tui-input-password>
+      </p>
+    </ion-content>
+
+    <ion-footer>
+      <ion-toolbar>
+        <ion-button
+          class="ion-padding-end"
+          slot="end"
+          color="dark"
+          (click)="cancel()"
+        >
+          Cancel
+        </ion-button>
+        <ion-button
+          class="ion-padding-end"
+          slot="end"
+          color="primary"
+          strong="true"
+          [disabled]="!password"
+          (click)="confirm()"
+        >
+          {{ options.buttonText }}
+        </ion-button>
+      </ion-toolbar>
+    </ion-footer>
+  `,
+  imports: [IonicModule, FormsModule, TuiInputPasswordModule],
+})
+export class PasswordPromptComponent implements AfterViewInit {
+  @ViewChild(TuiTextfieldComponent, { read: ElementRef })
+  input?: ElementRef<HTMLInputElement>
+
+  @Input()
+  options!: PromptOptions
+
+  password = ''
+
+  constructor(private modalCtrl: ModalController) {}
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.input?.nativeElement.focus({ preventScroll: true })
+    }, 300)
+  }
+
+  cancel() {
+    return this.modalCtrl.dismiss(null, 'cancel')
+  }
+
+  confirm() {
+    return this.modalCtrl.dismiss(this.password, 'confirm')
+  }
+}

web/projects/ui/src/app/modals/prompt.component.ts

@@ -0,0 +1,123 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { TuiAutoFocusModule } from '@taiga-ui/cdk'
+import { TuiDialogContext, TuiTextfieldControllerModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiInputModule } from '@taiga-ui/kit'
+import {
+  POLYMORPHEUS_CONTEXT,
+  PolymorpheusComponent,
+} from '@tinkoff/ng-polymorpheus'
+
+@Component({
+  standalone: true,
+  template: `
+    <p>{{ options.message }}</p>
+    <p *ngIf="options.warning" class="warning">{{ options.warning }}</p>
+    <form (ngSubmit)="submit(value.trim())">
+      <tui-input
+        tuiAutoFocus
+        [tuiTextfieldLabelOutside]="!options.label"
+        [tuiTextfieldCustomContent]="options.useMask ? toggle : ''"
+        [ngModelOptions]="{ standalone: true }"
+        [(ngModel)]="value"
+      >
+        {{ options.label }}
+        <span *ngIf="options.required !== false && options.label">*</span>
+        <input
+          tuiTextfield
+          [class.masked]="options.useMask && masked && value"
+          [placeholder]="options.placeholder || ''"
+        />
+      </tui-input>
+      <footer class="g-buttons">
+        <button
+          tuiButton
+          type="button"
+          appearance="secondary"
+          (click)="cancel()"
+        >
+          Cancel
+        </button>
+        <button tuiButton [disabled]="!value && options.required !== false">
+          {{ options.buttonText || 'Submit' }}
+        </button>
+      </footer>
+    </form>
+
+    <ng-template #toggle>
+      <button
+        tuiIconButton
+        type="button"
+        appearance="icon"
+        title="Toggle masking"
+        size="xs"
+        class="button"
+        [iconLeft]="masked ? 'tuiIconEye' : 'tuiIconEyeOff'"
+        (click)="masked = !masked"
+      ></button>
+    </ng-template>
+  `,
+  styles: [
+    `
+      .warning {
+        color: var(--tui-warning-fill);
+      }
+
+      .button {
+        pointer-events: auto;
+        margin-left: 0.25rem;
+      }
+
+      .masked {
+        -webkit-text-security: disc;
+      }
+    `,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    TuiInputModule,
+    TuiButtonModule,
+    TuiTextfieldControllerModule,
+    TuiAutoFocusModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PromptModal {
+  masked = this.options.useMask
+  value = this.options.initialValue || ''
+
+  constructor(
+    @Inject(POLYMORPHEUS_CONTEXT)
+    private readonly context: TuiDialogContext<string, PromptOptions>,
+  ) {}
+
+  get options(): PromptOptions {
+    return this.context.data
+  }
+
+  cancel() {
+    this.context.$implicit.complete()
+  }
+
+  submit(value: string) {
+    if (value || !this.options.required) {
+      this.context.$implicit.next(value)
+    }
+  }
+}
+
+export const PROMPT = new PolymorpheusComponent(PromptModal)
+
+export interface PromptOptions {
+  message: string
+  label?: string
+  warning?: string
+  buttonText?: string
+  placeholder?: string
+  required?: boolean
+  useMask?: boolean
+  initialValue?: string | null
+}

web/projects/ui/src/app/pages/diagnostic-routes/diagnostic-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+
+const ROUTES: Routes = [
+  {
+    path: '',
+    loadChildren: () =>
+      import('./home/home.module').then(m => m.HomePageModule),
+  },
+  {
+    path: 'logs',
+    loadChildren: () =>
+      import('./logs/logs.module').then(m => m.LogsPageModule),
+  },
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule],
+})
+export class DiagnosticModule {}

web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts

@@ -0,0 +1,222 @@
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
+import { TUI_CONFIRM } from '@taiga-ui/kit'
+import { Component, Inject } from '@angular/core'
+import { WINDOW } from '@ng-web-apis/common'
+import { LoadingService } from '@start9labs/shared'
+import { TuiDialogService } from '@taiga-ui/core'
+import { filter } from 'rxjs'
+import { DiagnosticService } from '../services/diagnostic.service'
+========
+import { Component } from '@angular/core'
+import { AlertController } from '@ionic/angular'
+import { LoadingService } from '@start9labs/shared'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
+
+@Component({
+  selector: 'diagnostic-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+})
+export class HomePage {
+  restarted = false
+  error?: {
+    code: number
+    problem: string
+    solution: string
+    details?: string
+  }
+
+  constructor(
+    private readonly loader: LoadingService,
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
+    private readonly api: DiagnosticService,
+    private readonly dialogs: TuiDialogService,
+    @Inject(WINDOW) private readonly window: Window,
+========
+    private readonly api: ApiService,
+    private readonly alertCtrl: AlertController,
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
+  ) {}
+
+  async ngOnInit() {
+    try {
+      const error = await this.api.diagnosticGetError()
+      // incorrect drive
+      if (error.code === 15) {
+        this.error = {
+          code: 15,
+          problem: 'Unknown storage drive detected',
+          solution:
+            'To use a different storage drive, replace the current one and click RESTART SERVER below. To use the current storage drive, click USE CURRENT DRIVE below, then follow instructions. No data will be erased during this process.',
+          details: error.data?.details,
+        }
+        // no drive
+      } else if (error.code === 20) {
+        this.error = {
+          code: 20,
+          problem: 'Storage drive not found',
+          solution:
+            'Insert your StartOS storage drive and click RESTART SERVER below.',
+          details: error.data?.details,
+        }
+        // drive corrupted
+      } else if (error.code === 25) {
+        this.error = {
+          code: 25,
+          problem:
+            'Storage drive corrupted. This could be the result of data corruption or physical damage.',
+          solution:
+            'It may or may not be possible to re-use this drive by reformatting and recovering from backup. To enter recovery mode, click ENTER RECOVERY MODE below, then follow instructions. No data will be erased during this step.',
+          details: error.data?.details,
+        }
+        // filesystem I/O error - disk needs repair
+      } else if (error.code === 2) {
+        this.error = {
+          code: 2,
+          problem: 'Filesystem I/O error.',
+          solution:
+            'Repairing the disk could help resolve this issue. Please DO NOT unplug the drive or server during this time or the situation will become worse.',
+          details: error.data?.details,
+        }
+        // disk management error - disk needs repair
+      } else if (error.code === 48) {
+        this.error = {
+          code: 48,
+          problem: 'Disk management error.',
+          solution:
+            'Repairing the disk could help resolve this issue. Please DO NOT unplug the drive or server during this time or the situation will become worse.',
+          details: error.data?.details,
+        }
+      } else {
+        this.error = {
+          code: error.code,
+          problem: error.message,
+          solution: 'Please contact support.',
+          details: error.data?.details,
+        }
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+
+  async restart(): Promise<void> {
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
+    const loader = this.loader.open('').subscribe()
+========
+    const loader = this.loader.open('Loading...').subscribe()
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
+
+    try {
+      await this.api.diagnosticRestart()
+      this.restarted = true
+    } catch (e) {
+      console.error(e)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
+
+  async forgetDrive(): Promise<void> {
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
+    const loader = this.loader.open('').subscribe()
+========
+    const loader = this.loader.open('Loading...').subscribe()
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
+
+    try {
+      await this.api.diagnosticForgetDrive()
+      await this.api.diagnosticRestart()
+      this.restarted = true
+    } catch (e) {
+      console.error(e)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
+
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
+  async presentAlertSystemRebuild() {
+    this.dialogs
+      .open(TUI_CONFIRM, {
+        label: 'Warning',
+        size: 's',
+        data: {
+          no: 'Cancel',
+          yes: 'Rebuild',
+          content:
+            '<p>This action will tear down all service containers and rebuild them from scratch. No data will be deleted.</p><p>A system rebuild can be useful if your system gets into a bad state, and it should only be performed if you are experiencing general performance or reliability issues.</p><p>It may take up to an hour to complete. During this time, you will lose all connectivity to your Start9 server.</p>',
+        },
+      })
+      .pipe(filter(Boolean))
+      .subscribe(() => {
+        try {
+          this.systemRebuild()
+        } catch (e) {
+          console.error(e)
+        }
+      })
+  }
+
+========
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
+  async presentAlertRepairDisk() {
+    this.dialogs
+      .open(TUI_CONFIRM, {
+        label: 'Warning',
+        size: 's',
+        data: {
+          no: 'Cancel',
+          yes: 'Repair',
+          content:
+            '<p>This action should only be executed if directed by a Start9 support specialist.</p><p>If anything happens to the device during the reboot, such as losing power or unplugging the drive, the filesystem <i>will</i> be in an unrecoverable state. Please proceed with caution.</p>',
+        },
+      })
+      .pipe(filter(Boolean))
+      .subscribe(() => {
+        try {
+          this.repairDisk()
+        } catch (e) {
+          console.error(e)
+        }
+      })
+  }
+
+  refreshPage(): void {
+    this.window.location.reload()
+  }
+
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
+  private async systemRebuild(): Promise<void> {
+    const loader = this.loader.open('').subscribe()
+
+    try {
+      await this.api.systemRebuild()
+      await this.api.restart()
+      this.restarted = true
+    } catch (e) {
+      console.error(e)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
+
+  private async repairDisk(): Promise<void> {
+    const loader = this.loader.open('').subscribe()
+========
+  private async repairDisk(): Promise<void> {
+    const loader = this.loader.open('Loading...').subscribe()
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
+
+    try {
+      await this.api.diagnosticRepairDisk()
+      await this.api.diagnosticRestart()
+      this.restarted = true
+    } catch (e) {
+      console.error(e)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
+}

web/projects/ui/src/app/pages/init/init.module.ts

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { TuiProgressModule } from '@taiga-ui/kit'
+import { LogsModule } from 'src/app/pages/init/logs/logs.module'
+import { InitPage } from './init.page'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: InitPage,
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonModule,
+    LogsModule,
+    TuiProgressModule,
+    RouterModule.forChild(routes),
+  ],
+  declarations: [InitPage],
+})
+export class InitPageModule {}

web/projects/ui/src/app/pages/init/init.page.html

@@ -0,0 +1,18 @@
+<section *ngIf="progress$ | async as progress">
+  <h1 [style.font-size.rem]="2.5" [style.margin.rem]="1">
+    Initializing StartOS
+  </h1>
+  <div *ngIf="progress.total">
+    Progress: {{ (progress.total * 100).toFixed(0) }}%
+  </div>
+
+  <progress
+    tuiProgressBar
+    class="progress"
+    [style.max-width.rem]="40"
+    [style.margin]="'1rem auto'"
+    [attr.value]="progress.total"
+  ></progress>
+  <p [innerHTML]="progress.message"></p>
+</section>
+<logs-window></logs-window>

web/projects/ui/src/app/pages/init/init.page.scss

@@ -0,0 +1,23 @@
+section {
+  border-radius: 0.25rem;
+  padding: 1rem;
+  margin: 1.5rem;
+  text-align: center;
+  /* TODO: Theme */
+  background: #e0e0e0;
+  color: #333;
+  --tui-clear-inverse: rgba(0, 0, 0, 0.1);
+}
+
+logs-window {
+  display: flex;
+  flex-direction: column;
+  height: 18rem;
+  padding: 1rem;
+  margin: 0 1.5rem auto;
+  text-align: left;
+  overflow: hidden;
+  border-radius: 2rem;
+  /* TODO: Theme */
+  background: #181818;
+}

web/projects/ui/src/app/pages/init/init.page.ts

@@ -0,0 +1,11 @@
+import { Component, inject } from '@angular/core'
+import { InitService } from 'src/app/pages/init/init.service'
+
+@Component({
+  selector: 'init-page',
+  templateUrl: 'init.page.html',
+  styleUrls: ['init.page.scss'],
+})
+export class InitPage {
+  readonly progress$ = inject(InitService)
+}

web/projects/ui/src/app/pages/init/init.service.ts

@@ -0,0 +1,90 @@
+import { inject, Injectable } from '@angular/core'
+import { ErrorService } from '@start9labs/shared'
+import { T } from '@start9labs/start-sdk'
+import {
+  catchError,
+  defer,
+  EMPTY,
+  from,
+  map,
+  Observable,
+  startWith,
+  switchMap,
+  tap,
+} from 'rxjs'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { StateService } from 'src/app/services/state.service'
+
+interface MappedProgress {
+  readonly total: number | null
+  readonly message: string
+}
+
+@Injectable({ providedIn: 'root' })
+export class InitService extends Observable<MappedProgress> {
+  private readonly state = inject(StateService)
+  private readonly api = inject(ApiService)
+  private readonly errorService = inject(ErrorService)
+  private readonly progress$ = defer(() =>
+    from(this.api.initGetProgress()),
+  ).pipe(
+    switchMap(({ guid, progress }) =>
+      this.api
+        .openWebsocket$<T.FullProgress>(guid, {})
+        .pipe(startWith(progress)),
+    ),
+    map(({ phases, overall }) => {
+      return {
+        total: getOverallDecimal(overall),
+        message: phases
+          .filter(
+            (
+              p,
+            ): p is {
+              name: string
+              progress: {
+                done: number
+                total: number | null
+              }
+            } => p.progress !== true && p.progress !== null,
+          )
+          .map(p => `<b>${p.name}</b>${getPhaseBytes(p.progress)}`)
+          .join(', '),
+      }
+    }),
+    tap(({ total }) => {
+      if (total === 1) {
+        this.state.syncState()
+      }
+    }),
+    catchError(e => {
+      console.error(e)
+      return EMPTY
+    }),
+  )
+
+  constructor() {
+    super(subscriber => this.progress$.subscribe(subscriber))
+  }
+}
+
+function getOverallDecimal(progress: T.Progress): number {
+  if (progress === true) {
+    return 1
+  } else if (!progress || !progress.total) {
+    return 0
+  } else {
+    return progress.total && progress.done / progress.total
+  }
+}
+
+function getPhaseBytes(
+  progress:
+    | false
+    | {
+        done: number
+        total: number | null
+      },
+): string {
+  return progress === false ? '' : `: (${progress.done}/${progress.total})`
+}

web/projects/ui/src/app/pages/init/logs/logs.component.ts

@@ -0,0 +1,33 @@
+import { Component, ElementRef, inject } from '@angular/core'
+import { INTERSECTION_ROOT } from '@ng-web-apis/intersection-observer'
+import { LogsService } from 'src/app/pages/init/logs/logs.service'
+
+@Component({
+  selector: 'logs-window',
+  templateUrl: 'logs.template.html',
+  styles: [
+    `
+      pre {
+        margin: 0;
+      }
+    `,
+  ],
+  providers: [
+    {
+      provide: INTERSECTION_ROOT,
+      useExisting: ElementRef,
+    },
+  ],
+})
+export class LogsComponent {
+  readonly logs$ = inject(LogsService)
+  scroll = true
+
+  scrollTo(bottom: HTMLElement) {
+    if (this.scroll) bottom.scrollIntoView()
+  }
+
+  onBottom(entries: readonly IntersectionObserverEntry[]) {
+    this.scroll = entries[entries.length - 1].isIntersecting
+  }
+}

web/projects/ui/src/app/pages/init/logs/logs.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { IntersectionObserverModule } from '@ng-web-apis/intersection-observer'
+import { MutationObserverModule } from '@ng-web-apis/mutation-observer'
+import { TuiScrollbarModule } from '@taiga-ui/core'
+import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
+import { LogsComponent } from './logs.component'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MutationObserverModule,
+    IntersectionObserverModule,
+    NgDompurifyModule,
+    TuiScrollbarModule,
+  ],
+  declarations: [LogsComponent],
+  exports: [LogsComponent],
+})
+export class LogsModule {}

web/projects/ui/src/app/pages/init/logs/logs.service.ts

@@ -0,0 +1,51 @@
+import { inject, Injectable } from '@angular/core'
+import { Log, toLocalIsoString } from '@start9labs/shared'
+import {
+  bufferTime,
+  defer,
+  filter,
+  map,
+  Observable,
+  scan,
+  switchMap,
+} from 'rxjs'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+
+var Convert = require('ansi-to-html')
+var convert = new Convert({
+  newline: true,
+  bg: 'transparent',
+  colors: {
+    4: 'Cyan',
+  },
+  escapeXML: true,
+})
+
+function convertAnsi(entries: readonly any[]): string {
+  return entries
+    .map(
+      ({ timestamp, message }) =>
+        `<b style="color: #FFF">${toLocalIsoString(
+          new Date(timestamp),
+        )}</b>&nbsp;&nbsp;${convert.toHtml(message)}`,
+    )
+    .join('<br />')
+}
+
+@Injectable({ providedIn: 'root' })
+export class LogsService extends Observable<readonly string[]> {
+  private readonly api = inject(ApiService)
+  private readonly log$ = defer(() =>
+    this.api.initFollowLogs({ boot: 0 }),
+  ).pipe(
+    switchMap(({ guid }) => this.api.openWebsocket$<Log>(guid, {})),
+    bufferTime(500),
+    filter(logs => !!logs.length),
+    map(convertAnsi),
+    scan((logs: readonly string[], log) => [...logs, log], []),
+  )
+
+  constructor() {
+    super(subscriber => this.log$.subscribe(subscriber))
+  }
+}

web/projects/ui/src/app/pages/init/logs/logs.template.html

@@ -0,0 +1,9 @@
+<tui-scrollbar childList subtree (waMutationObserver)="scrollTo(bottom)">
+  <pre *ngFor="let log of logs$ | async" [innerHTML]="log | dompurify"></pre>
+  <section
+    #bottom
+    waIntersectionObserver
+    [style.padding.rem]="1"
+    (waIntersectionObservee)="onBottom($event)"
+  ></section>
+</tui-scrollbar>

web/projects/ui/src/app/routes/diagnostic/home/home.page.ts

@@ -1,3 +1,4 @@
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
 import { TUI_CONFIRM } from '@taiga-ui/kit'
 import { Component, Inject } from '@angular/core'
 import { WINDOW } from '@ng-web-apis/common'
@@ -5,9 +6,15 @@ import { LoadingService } from '@start9labs/shared'
 import { TuiDialogService } from '@taiga-ui/core'
 import { filter } from 'rxjs'
 import { DiagnosticService } from '../services/diagnostic.service'
+========
+import { Component } from '@angular/core'
+import { AlertController } from '@ionic/angular'
+import { LoadingService } from '@start9labs/shared'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
 
 @Component({
-  selector: 'app-home',
+  selector: 'diagnostic-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
 })
@@ -22,14 +29,19 @@ export class HomePage {
 
   constructor(
     private readonly loader: LoadingService,
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
     private readonly api: DiagnosticService,
     private readonly dialogs: TuiDialogService,
     @Inject(WINDOW) private readonly window: Window,
+========
+    private readonly api: ApiService,
+    private readonly alertCtrl: AlertController,
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
   ) {}
 
   async ngOnInit() {
     try {
-      const error = await this.api.getError()
+      const error = await this.api.diagnosticGetError()
       // incorrect drive
       if (error.code === 15) {
         this.error = {
@@ -90,10 +102,14 @@ export class HomePage {
   }
 
   async restart(): Promise<void> {
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
     const loader = this.loader.open('').subscribe()
+========
+    const loader = this.loader.open('Loading...').subscribe()
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
 
     try {
-      await this.api.restart()
+      await this.api.diagnosticRestart()
       this.restarted = true
     } catch (e) {
       console.error(e)
@@ -103,11 +119,15 @@ export class HomePage {
   }
 
   async forgetDrive(): Promise<void> {
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
     const loader = this.loader.open('').subscribe()
+========
+    const loader = this.loader.open('Loading...').subscribe()
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
 
     try {
-      await this.api.forgetDrive()
-      await this.api.restart()
+      await this.api.diagnosticForgetDrive()
+      await this.api.diagnosticRestart()
       this.restarted = true
     } catch (e) {
       console.error(e)
@@ -116,6 +136,7 @@ export class HomePage {
     }
   }
 
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
   async presentAlertSystemRebuild() {
     this.dialogs
       .open(TUI_CONFIRM, {
@@ -138,6 +159,8 @@ export class HomePage {
       })
   }
 
+========
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
   async presentAlertRepairDisk() {
     this.dialogs
       .open(TUI_CONFIRM, {
@@ -164,6 +187,7 @@ export class HomePage {
     this.window.location.reload()
   }
 
+<<<<<<<< HEAD:web/projects/ui/src/app/routes/diagnostic/home/home.page.ts
   private async systemRebuild(): Promise<void> {
     const loader = this.loader.open('').subscribe()
 
@@ -180,10 +204,14 @@ export class HomePage {
 
   private async repairDisk(): Promise<void> {
     const loader = this.loader.open('').subscribe()
+========
+  private async repairDisk(): Promise<void> {
+    const loader = this.loader.open('Loading...').subscribe()
+>>>>>>>> 94a5075b6daa1375433420abf5d121171dae72cb:web/projects/ui/src/app/pages/diagnostic-routes/home/home.page.ts
 
     try {
-      await this.api.repairDisk()
-      await this.api.restart()
+      await this.api.diagnosticRepairDisk()
+      await this.api.diagnosticRestart()
       this.restarted = true
     } catch (e) {
       console.error(e)

web/projects/ui/src/app/routes/diagnostic/services/diagnostic.service.ts

@@ -1,16 +0,0 @@
-import { FetchLogsReq, FetchLogsRes } from '@start9labs/shared'
-
-export abstract class DiagnosticService {
-  abstract getError(): Promise<GetErrorRes>
-  abstract restart(): Promise<void>
-  abstract forgetDrive(): Promise<void>
-  abstract repairDisk(): Promise<void>
-  abstract systemRebuild(): Promise<void>
-  abstract getLogs(params: FetchLogsReq): Promise<FetchLogsRes>
-}
-
-export interface GetErrorRes {
-  code: number
-  message: string
-  data: { details: string }
-}

web/projects/ui/src/app/routes/diagnostic/services/live-diagnostic.service.ts

@@ -1,68 +0,0 @@
-import { Injectable } from '@angular/core'
-import {
-  HttpService,
-  isRpcError,
-  RpcError,
-  RPCOptions,
-} from '@start9labs/shared'
-import { FetchLogsReq, FetchLogsRes } from '@start9labs/shared'
-import { DiagnosticService, GetErrorRes } from './diagnostic.service'
-
-@Injectable()
-export class LiveDiagnosticService implements DiagnosticService {
-  constructor(private readonly http: HttpService) {}
-
-  async getError(): Promise<GetErrorRes> {
-    return this.rpcRequest<GetErrorRes>({
-      method: 'diagnostic.error',
-      params: {},
-    })
-  }
-
-  async restart(): Promise<void> {
-    return this.rpcRequest<void>({
-      method: 'diagnostic.restart',
-      params: {},
-    })
-  }
-
-  async forgetDrive(): Promise<void> {
-    return this.rpcRequest<void>({
-      method: 'diagnostic.disk.forget',
-      params: {},
-    })
-  }
-
-  async repairDisk(): Promise<void> {
-    return this.rpcRequest<void>({
-      method: 'diagnostic.disk.repair',
-      params: {},
-    })
-  }
-
-  async systemRebuild(): Promise<void> {
-    return this.rpcRequest<void>({
-      method: 'diagnostic.rebuild',
-      params: {},
-    })
-  }
-
-  async getLogs(params: FetchLogsReq): Promise<FetchLogsRes> {
-    return this.rpcRequest<FetchLogsRes>({
-      method: 'diagnostic.logs',
-      params,
-    })
-  }
-
-  private async rpcRequest<T>(opts: RPCOptions): Promise<T> {
-    const res = await this.http.rpcRequest<T>(opts)
-
-    const rpcRes = res.body
-
-    if (isRpcError(rpcRes)) {
-      throw new RpcError(rpcRes.error)
-    }
-
-    return rpcRes.result
-  }
-}

web/projects/ui/src/app/routes/diagnostic/services/mock-diagnostic.service.ts

@@ -1,67 +0,0 @@
-import { Injectable } from '@angular/core'
-import { pauseFor } from '@start9labs/shared'
-import { FetchLogsReq, FetchLogsRes, Log } from '@start9labs/shared'
-import { DiagnosticService, GetErrorRes } from './diagnostic.service'
-
-@Injectable()
-export class MockDiagnosticService implements DiagnosticService {
-  async getError(): Promise<GetErrorRes> {
-    await pauseFor(1000)
-    return {
-      code: 15,
-      message: 'Unknown server',
-      data: { details: 'Some details about the error here' },
-    }
-  }
-
-  async restart(): Promise<void> {
-    await pauseFor(1000)
-  }
-
-  async forgetDrive(): Promise<void> {
-    await pauseFor(1000)
-  }
-
-  async repairDisk(): Promise<void> {
-    await pauseFor(1000)
-  }
-
-  async systemRebuild(): Promise<void> {
-    await pauseFor(1000)
-  }
-
-  async getLogs(params: FetchLogsReq): Promise<FetchLogsRes> {
-    await pauseFor(1000)
-    let entries: Log[]
-    if (Math.random() < 0.2) {
-      entries = packageLogs
-    } else {
-      const arrLength = params.limit
-        ? Math.ceil(params.limit / packageLogs.length)
-        : 10
-      entries = new Array(arrLength)
-        .fill(packageLogs)
-        .reduce((acc, val) => acc.concat(val), [])
-    }
-    return {
-      entries,
-      startCursor: 'start-cursor',
-      endCursor: 'end-cursor',
-    }
-  }
-}
-
-const packageLogs = [
-  {
-    timestamp: '2019-12-26T14:20:30.872Z',
-    message: '****** START *****',
-  },
-  {
-    timestamp: '2019-12-26T14:21:30.872Z',
-    message: 'ServerLogs ServerLogs ServerLogs ServerLogs ServerLogs',
-  },
-  {
-    timestamp: '2019-12-26T14:22:30.872Z',
-    message: '****** FINISH *****',
-  },
-]

web/projects/ui/src/app/routes/login/login.page.ts

@@ -1,11 +1,10 @@
+import { Router } from '@angular/router'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { Component, Inject, DestroyRef, inject } from '@angular/core'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { AuthService } from 'src/app/services/auth.service'
-import { Router } from '@angular/router'
 import { ConfigService } from 'src/app/services/config.service'
 import { LoadingService } from '@start9labs/shared'
-import { takeUntil } from 'rxjs'
 import { DOCUMENT } from '@angular/common'
 
 @Component({
@@ -43,8 +42,8 @@ export class LoginPage {
       }
       await this.api.login({
         password: this.password,
-        // TODO: get platforms metadata
-        metadata: { platforms: [] },
+        metadata: { platforms: [] }, // @TODO do we really need platforms now?
+        ephemeral: window.location.host === 'localhost',
       })
 
       this.password = ''

web/projects/ui/src/app/routes/portal/routes/service/pipes/install-progress.pipe.ts

@@ -8,7 +8,8 @@ import { T } from '@start9labs/start-sdk'
 export class InstallingProgressDisplayPipe implements PipeTransform {
   transform(progress: T.Progress): string {
     if (progress === true) return 'finalizing'
-    if (progress === false || !progress.total) return 'unknown %'
+    if (progress === false || progress === null || !progress.total)
+      return 'unknown %'
     const percentage = Math.round((100 * progress.done) / progress.total)
 
     return percentage < 99 ? String(percentage) + '%' : 'finalizing'
@@ -20,9 +21,9 @@ export class InstallingProgressDisplayPipe implements PipeTransform {
   name: 'installingProgress',
 })
 export class InstallingProgressPipe implements PipeTransform {
-  transform(progress: T.Progress): number | null {
-    if (progress === true) return 1
-    if (progress === false || !progress.total) return null
-    return Number((progress.done / progress.total).toFixed(2))
+  transform(progress: T.Progress): number {
+    if (progress === true) return 100
+    if (progress === false || progress === null || !progress.total) return 0
+    return Math.floor((100 * progress.done) / progress.total)
   }
 }

web/projects/ui/src/app/routes/portal/routes/system/backups/pipes/to-options.pipe.ts

@@ -1,5 +1,5 @@
 import { inject, Pipe, PipeTransform } from '@angular/core'
-import { Emver } from '@start9labs/shared'
+import { Exver } from '@start9labs/shared'
 import { map, Observable } from 'rxjs'
 import { PackageBackupInfo } from 'src/app/services/api/api.types'
 import { ConfigService } from 'src/app/services/config.service'
@@ -12,7 +12,7 @@ import { RecoverOption } from '../types/recover-option'
 })
 export class ToOptionsPipe implements PipeTransform {
   private readonly config = inject(ConfigService)
-  private readonly emver = inject(Emver)
+  private readonly exver = inject(Exver)
 
   transform(
     packageData$: Observable<Record<string, PackageDataEntry>>,
@@ -26,7 +26,7 @@ export class ToOptionsPipe implements PipeTransform {
             id,
             installed: !!packageData[id],
             checked: false,
-            newerStartOs: this.compare(packageBackups[id].osVersion),
+            newerOS: this.compare(packageBackups[id].osVersion),
           }))
           .sort((a, b) =>
             b.title.toLowerCase() > a.title.toLowerCase() ? -1 : 1,
@@ -36,7 +36,9 @@ export class ToOptionsPipe implements PipeTransform {
   }
 
   private compare(version: string): boolean {
-    // checks to see if backup was made on a newer version of eOS
-    return this.emver.compare(version, this.config.version) === 1
+    // checks to see if backup was made on a newer version of startOS
+    return (
+      this.exver.compareOsVersion(version, this.config.version) === 'greater'
+    )
   }
 }

web/projects/ui/src/app/services/api/api.types.ts

@@ -1,26 +1,34 @@
-import { Dump, Revision } from 'patch-db-client'
-import { MarketplacePkg, StoreInfo } from '@start9labs/marketplace'
 import {
-  DataModel,
   DomainInfo,
   NetworkStrategy,
 } from 'src/app/services/patch-db/data-model'
-import {
-  StartOSDiskInfo,
-  FetchLogsReq,
-  FetchLogsRes,
-  FollowLogsRes,
-  FollowLogsReq,
-} from '@start9labs/shared'
-import { CT, T } from '@start9labs/start-sdk'
+import { FetchLogsReq, FetchLogsRes } from '@start9labs/shared'
 import { config } from '@start9labs/start-sdk'
+import { Dump } from 'patch-db-client'
+import { DataModel } from 'src/app/services/patch-db/data-model'
+import { StartOSDiskInfo } from '@start9labs/shared'
+import { CT, T } from '@start9labs/start-sdk'
+import { WebSocketSubjectConfig } from 'rxjs/webSocket'
 
 export module RR {
+  // websocket
+
+  export type WebsocketConfig<T> = Omit<WebSocketSubjectConfig<T>, 'url'>
+
+  // state
+
+  export type EchoReq = { message: string } // server.echo
+  export type EchoRes = string
+
+  export type ServerState = 'initializing' | 'error' | 'running'
+
   // DB
 
-  export type GetRevisionsRes = Revision[] | Dump<DataModel>
-
-  export type GetDumpRes = Dump<DataModel>
+  export type SubscribePatchReq = {}
+  export type SubscribePatchRes = {
+    dump: Dump<DataModel>
+    guid: string
+  }
 
   export type SetDBValueReq<T> = { pointer: string; value: T } // db.put.ui
   export type SetDBValueRes = null
@@ -30,6 +38,7 @@ export module RR {
   export type LoginReq = {
     password: string
     metadata: SessionMetadata
+    ephemeral?: boolean
   } // auth.login - unauthed
   export type loginRes = null
 
@@ -42,10 +51,22 @@ export module RR {
   } // auth.reset-password
   export type ResetPasswordRes = null
 
-  // server
+  // diagnostic
 
-  export type EchoReq = { message: string; timeout?: number } // server.echo
-  export type EchoRes = string
+  export type DiagnosticErrorRes = {
+    code: number
+    message: string
+    data: { details: string }
+  }
+
+  // init
+
+  export type InitGetProgressRes = {
+    progress: T.FullProgress
+    guid: string
+  }
+
+  // server
 
   export type GetSystemTimeReq = {} // server.time
   export type GetSystemTimeRes = {
@@ -56,8 +77,16 @@ export module RR {
   export type GetServerLogsReq = FetchLogsReq // server.logs & server.kernel-logs & server.tor-logs
   export type GetServerLogsRes = FetchLogsRes
 
-  export type FollowServerLogsReq = FollowLogsReq & { limit?: number } // server.logs.follow & server.kernel-logs.follow & server.tor-logs.follow
-  export type FollowServerLogsRes = FollowLogsRes
+  // @param limit: BE default is 50
+  // @param boot: number is offset (0: current, -1 prev, +1 first), string is a specific boot id, and null is all
+  export type FollowServerLogsReq = {
+    limit?: number
+    boot?: number | string | null
+  } // server.logs.follow & server.kernel-logs.follow
+  export type FollowServerLogsRes = {
+    startCursor: string
+    guid: string
+  }
 
   export type GetServerMetricsReq = {} // server.metrics
   export type GetServerMetricsRes = {
@@ -65,7 +94,7 @@ export module RR {
     metrics: Metrics
   }
 
-  export type UpdateServerReq = { marketplaceUrl: string } // server.update
+  export type UpdateServerReq = { registry: string } // server.update
   export type UpdateServerRes = 'updating' | 'no-updates'
 
   export type SetServerClearnetAddressReq = { domainInfo: DomainInfo | null } // server.set-clearnet
@@ -77,8 +106,8 @@ export module RR {
   export type ShutdownServerReq = {} // server.shutdown
   export type ShutdownServerRes = null
 
-  export type SystemRebuildReq = {} // server.rebuild
-  export type SystemRebuildRes = null
+  export type DiskRepairReq = {} // server.disk.repair
+  export type DiskRepairRes = null
 
   export type ResetTorReq = {
     wipeState: boolean
@@ -310,19 +339,18 @@ export module RR {
   export type FollowPackageLogsReq = FollowServerLogsReq & { id: string } // package.logs.follow
   export type FollowPackageLogsRes = FollowServerLogsRes
 
-  export type InstallPackageReq = {
-    id: string
-    versionSpec?: string
-    versionPriority?: 'min' | 'max'
-    marketplaceUrl: string
-  } // package.install
+  export type GetPackageMetricsReq = { id: string } // package.metrics
+  // @TODO Matt create package metrics type
+  export type GetPackageMetricsRes = any
+
+  export type InstallPackageReq = T.InstallParams
   export type InstallPackageRes = null
 
   export type GetPackageConfigReq = { id: string } // package.config.get
   export type GetPackageConfigRes = { spec: CT.InputSpec; config: object }
 
   export type DrySetPackageConfigReq = { id: string; config: object } // package.config.set.dry
-  export type DrySetPackageConfigRes = Breakages
+  export type DrySetPackageConfigRes = T.PackageId[]
 
   export type SetPackageConfigReq = DrySetPackageConfigReq // package.config.set
   export type SetPackageConfigRes = null
@@ -331,6 +359,7 @@ export module RR {
     // package.backup.restore
     ids: string[]
     targetId: string
+    serverId: string
     password: string
   }
   export type RestorePackagesRes = null
@@ -369,7 +398,10 @@ export module RR {
     icon: string // base64
     size: number // bytes
   }
-  export type SideloadPacakgeRes = string //guid
+  export type SideloadPackageRes = {
+    upload: string
+    progress: string
+  }
 
   export type SetInterfaceClearnetAddressReq = SetServerClearnetAddressReq & {
     packageId: string
@@ -389,7 +421,8 @@ export module RR {
   export type GetMarketplaceInfoRes = StoreInfo
 
   export type GetMarketplaceEosReq = { serverId: string }
-  export type GetMarketplaceEosRes = MarketplaceEOS
+  // @TODO Matt fix type
+  export type GetMarketplaceEosRes = any
 
   export type GetMarketplacePackagesReq = {
     ids?: { id: string; version: string }[]
@@ -399,13 +432,17 @@ export module RR {
     page?: number
     perPage?: number
   }
-  export type GetMarketplacePackagesRes = MarketplacePkg[]
 
-  export type GetReleaseNotesReq = { id: string }
-  export type GetReleaseNotesRes = { [version: string]: string }
+  // registry
+
+  /** these are returned in ASCENDING order. the newest available version will be the LAST in the object */
+  export type GetRegistryOsUpdateRes = { [version: string]: T.OsVersionInfo }
+
+  export type CheckOSUpdateReq = { serverId: string }
+  export type CheckOSUpdateRes = OSUpdate
 }
 
-export interface MarketplaceEOS {
+export interface OSUpdate {
   version: string
   headline: string
   releaseNotes: { [version: string]: string }
@@ -461,6 +498,7 @@ export interface Metrics {
 }
 
 export interface Session {
+  loggedIn: string
   lastActive: string
   userAgent: string
   metadata: SessionMetadata
@@ -499,7 +537,7 @@ export interface UnknownDisk {
   label: string | null
   capacity: number
   used: number | null
-  startOs: StartOSDiskInfo | null
+  startOs: Record<string, StartOSDiskInfo>
 }
 
 export interface BaseBackupTarget {
@@ -508,7 +546,7 @@ export interface BaseBackupTarget {
   name: string
   mountable: boolean
   path: string
-  startOs: StartOSDiskInfo | null
+  startOs: Record<string, StartOSDiskInfo>
 }
 
 export interface DiskBackupTarget extends UnknownDisk, BaseBackupTarget {

web/projects/ui/src/app/services/api/embassy-api.service.ts

@@ -1,23 +1,52 @@
 import { Observable } from 'rxjs'
-import { Update } from 'patch-db-client'
 import { RR, BackupTargetType, Metrics } from './api.types'
-import { DataModel } from 'src/app/services/patch-db/data-model'
-import { Log, SetupStatus } from '@start9labs/shared'
-import { WebSocketSubjectConfig } from 'rxjs/webSocket'
+import { SetupStatus } from '@start9labs/shared'
+import { RPCOptions } from '@start9labs/shared'
+import { T } from '@start9labs/start-sdk'
+import {
+  GetPackageRes,
+  GetPackagesRes,
+  MarketplacePkg,
+} from '@start9labs/marketplace'
 
 export abstract class ApiService {
   // http
 
-  // for getting static files: ex icons, instructions, licenses
-  abstract getStatic(url: string): Promise<string>
-
   // for sideloading packages
-  abstract uploadPackage(guid: string, body: Blob): Promise<void>
+  abstract uploadPackage(guid: string, body: Blob): Promise<string>
 
   abstract uploadFile(body: Blob): Promise<string>
 
+  // for getting static files: ex icons, instructions, licenses
+  abstract getStaticProxy(
+    pkg: MarketplacePkg,
+    path: 'LICENSE.md' | 'instructions.md',
+  ): Promise<string>
+
+  abstract getStaticInstalled(
+    id: T.PackageId,
+    path: 'LICENSE.md' | 'instructions.md',
+  ): Promise<string>
+
+  // websocket
+
+  abstract openWebsocket$<T>(
+    guid: string,
+    config: RR.WebsocketConfig<T>,
+  ): Observable<T>
+
+  // state
+
+  abstract echo(params: RR.EchoReq, url: string): Promise<RR.EchoRes>
+
+  abstract getState(): Promise<RR.ServerState>
+
   // db
 
+  abstract subscribeToPatchDB(
+    params: RR.SubscribePatchReq,
+  ): Promise<RR.SubscribePatchRes>
+
   abstract setDbValue<T>(
     pathArr: Array<string | number>,
     value: T,
@@ -37,20 +66,26 @@ export abstract class ApiService {
     params: RR.ResetPasswordReq,
   ): Promise<RR.ResetPasswordRes>
 
+  // diagnostic
+
+  abstract diagnosticGetError(): Promise<RR.DiagnosticErrorRes>
+  abstract diagnosticRestart(): Promise<void>
+  abstract diagnosticForgetDrive(): Promise<void>
+  abstract diagnosticRepairDisk(): Promise<void>
+  abstract diagnosticGetLogs(
+    params: RR.GetServerLogsReq,
+  ): Promise<RR.GetServerLogsRes>
+
+  // init
+
+  abstract initGetProgress(): Promise<RR.InitGetProgressRes>
+
+  abstract initFollowLogs(
+    params: RR.FollowServerLogsReq,
+  ): Promise<RR.FollowServerLogsRes>
+
   // server
 
-  abstract echo(params: RR.EchoReq, urlOverride?: string): Promise<RR.EchoRes>
-
-  abstract openPatchWebsocket$(): Observable<Update<DataModel>>
-
-  abstract openLogsWebsocket$(
-    config: WebSocketSubjectConfig<Log>,
-  ): Observable<Log>
-
-  abstract openMetricsWebsocket$(
-    config: WebSocketSubjectConfig<Metrics>,
-  ): Observable<Metrics>
-
   abstract getSystemTime(
     params: RR.GetSystemTimeReq,
   ): Promise<RR.GetSystemTimeRes>
@@ -95,11 +130,7 @@ export abstract class ApiService {
     params: RR.ShutdownServerReq,
   ): Promise<RR.ShutdownServerRes>
 
-  abstract systemRebuild(
-    params: RR.SystemRebuildReq,
-  ): Promise<RR.SystemRebuildRes>
-
-  abstract repairDisk(params: RR.SystemRebuildReq): Promise<RR.SystemRebuildRes>
+  abstract repairDisk(params: RR.DiskRepairReq): Promise<RR.DiskRepairRes>
 
   abstract resetTor(params: RR.ResetTorReq): Promise<RR.ResetTorRes>
 
@@ -109,13 +140,22 @@ export abstract class ApiService {
 
   // marketplace URLs
 
-  abstract marketplaceProxy<T>(
-    path: string,
-    params: Record<string, unknown>,
-    url: string,
+  abstract registryRequest<T>(
+    registryUrl: string,
+    options: RPCOptions,
   ): Promise<T>
 
-  abstract getEos(): Promise<RR.GetMarketplaceEosRes>
+  abstract checkOSUpdate(qp: RR.CheckOSUpdateReq): Promise<RR.CheckOSUpdateRes>
+
+  abstract getRegistryInfo(registryUrl: string): Promise<T.RegistryInfo>
+
+  abstract getRegistryPackage(
+    url: string,
+    id: string,
+    versionRange: string | null,
+  ): Promise<GetPackageRes>
+
+  abstract getRegistryPackages(registryUrl: string): Promise<GetPackagesRes>
 
   // notification
 
@@ -308,11 +348,7 @@ export abstract class ApiService {
     params: RR.DryConfigureDependencyReq,
   ): Promise<RR.DryConfigureDependencyRes>
 
-  abstract sideloadPackage(
-    params: RR.SideloadPackageReq,
-  ): Promise<RR.SideloadPacakgeRes>
-
-  abstract getSetupStatus(): Promise<SetupStatus | null>
+  abstract sideloadPackage(): Promise<RR.SideloadPackageRes>
 
   abstract setInterfaceClearnetAddress(
     params: RR.SetInterfaceClearnetAddressReq,

web/projects/ui/src/app/services/api/embassy-live-api.service.ts

@@ -3,22 +3,29 @@ import {
   HttpOptions,
   HttpService,
   isRpcError,
-  Log,
   Method,
   RpcError,
   RPCOptions,
-  SetupStatus,
 } from '@start9labs/shared'
+import { PATCH_CACHE } from 'src/app/services/patch-db/patch-db-source'
 import { ApiService } from './embassy-api.service'
-import { BackupTargetType, Metrics, RR } from './api.types'
+import { BackupTargetType, RR } from './api.types'
 import { ConfigService } from '../config.service'
-import { webSocket, WebSocketSubjectConfig } from 'rxjs/webSocket'
+import { webSocket } from 'rxjs/webSocket'
 import { Observable, filter, firstValueFrom } from 'rxjs'
 import { AuthService } from '../auth.service'
 import { DOCUMENT } from '@angular/common'
 import { DataModel } from '../patch-db/data-model'
-import { PatchDB, pathFromArray, Update } from 'patch-db-client'
-import { getServerInfo } from 'src/app/utils/get-server-info'
+import { Dump, pathFromArray } from 'patch-db-client'
+import { T } from '@start9labs/start-sdk'
+import {
+  GetPackageReq,
+  GetPackageRes,
+  GetPackagesReq,
+  GetPackagesRes,
+  MarketplacePkg,
+} from '@start9labs/marketplace'
+import { blake3 } from '@noble/hashes/blake3'
 
 @Injectable()
 export class LiveApiService extends ApiService {
@@ -27,7 +34,7 @@ export class LiveApiService extends ApiService {
     private readonly http: HttpService,
     private readonly config: ConfigService,
     private readonly auth: AuthService,
-    private readonly patch: PatchDB<DataModel>,
+    @Inject(PATCH_CACHE) private readonly cache$: Observable<Dump<DataModel>>,
   ) {
     super()
 
@@ -35,17 +42,9 @@ export class LiveApiService extends ApiService {
     this.document.defaultView.rpcClient = this
   }
 
-  // for getting static files: ex icons, instructions, licenses
-  async getStatic(url: string): Promise<string> {
-    return this.httpRequest({
-      method: Method.GET,
-      url,
-      responseType: 'text',
-    })
-  }
-
   // for sideloading packages
-  async uploadPackage(guid: string, body: Blob): Promise<void> {
+
+  async uploadPackage(guid: string, body: Blob): Promise<string> {
     return this.httpRequest({
       method: Method.POST,
       body,
@@ -59,12 +58,73 @@ export class LiveApiService extends ApiService {
       method: Method.POST,
       body,
       url: `/rest/upload`,
+    })
+  }
+
+  // for getting static files: ex. instructions, licenses
+
+  async getStaticProxy(
+    pkg: MarketplacePkg,
+    path: 'LICENSE.md' | 'instructions.md',
+  ): Promise<string> {
+    const encodedUrl = encodeURIComponent(pkg.s9pk.url)
+
+    return this.httpRequest({
+      method: Method.GET,
+      url: `/s9pk/proxy/${encodedUrl}/${path}`,
+      params: {
+        rootSighash: pkg.s9pk.commitment.rootSighash,
+        rootMaxsize: pkg.s9pk.commitment.rootMaxsize,
+      },
       responseType: 'text',
     })
   }
 
+  async getStaticInstalled(
+    id: T.PackageId,
+    path: 'LICENSE.md' | 'instructions.md',
+  ): Promise<string> {
+    return this.httpRequest({
+      method: Method.GET,
+      url: `/s9pk/installed/${id}.s9pk/${path}`,
+      responseType: 'text',
+    })
+  }
+
+  // websocket
+
+  openWebsocket$<T>(
+    guid: string,
+    config: RR.WebsocketConfig<T>,
+  ): Observable<T> {
+    const { location } = this.document.defaultView!
+    const protocol = location.protocol === 'http:' ? 'ws' : 'wss'
+    const host = location.host
+
+    return webSocket({
+      url: `${protocol}://${host}/ws/rpc/${guid}`,
+      ...config,
+    })
+  }
+
+  // state
+
+  async echo(params: RR.EchoReq, url: string): Promise<RR.EchoRes> {
+    return this.rpcRequest({ method: 'echo', params }, url)
+  }
+
+  async getState(): Promise<RR.ServerState> {
+    return this.rpcRequest({ method: 'state', params: {} })
+  }
+
   // db
 
+  async subscribeToPatchDB(
+    params: RR.SubscribePatchReq,
+  ): Promise<RR.SubscribePatchRes> {
+    return this.rpcRequest({ method: 'db.subscribe', params })
+  }
+
   async setDbValue<T>(
     pathArr: Array<string | number>,
     value: T,
@@ -98,35 +158,59 @@ export class LiveApiService extends ApiService {
     return this.rpcRequest({ method: 'auth.reset-password', params })
   }
 
+  // diagnostic
+
+  async diagnosticGetError(): Promise<RR.DiagnosticErrorRes> {
+    return this.rpcRequest<RR.DiagnosticErrorRes>({
+      method: 'diagnostic.error',
+      params: {},
+    })
+  }
+
+  async diagnosticRestart(): Promise<void> {
+    return this.rpcRequest<void>({
+      method: 'diagnostic.restart',
+      params: {},
+    })
+  }
+
+  async diagnosticForgetDrive(): Promise<void> {
+    return this.rpcRequest<void>({
+      method: 'diagnostic.disk.forget',
+      params: {},
+    })
+  }
+
+  async diagnosticRepairDisk(): Promise<void> {
+    return this.rpcRequest<void>({
+      method: 'diagnostic.disk.repair',
+      params: {},
+    })
+  }
+
+  async diagnosticGetLogs(
+    params: RR.GetServerLogsReq,
+  ): Promise<RR.GetServerLogsRes> {
+    return this.rpcRequest<RR.GetServerLogsRes>({
+      method: 'diagnostic.logs',
+      params,
+    })
+  }
+
+  // init
+
+  async initGetProgress(): Promise<RR.InitGetProgressRes> {
+    return this.rpcRequest({ method: 'init.subscribe', params: {} })
+  }
+
+  async initFollowLogs(
+    params: RR.FollowServerLogsReq,
+  ): Promise<RR.FollowServerLogsRes> {
+    return this.rpcRequest({ method: 'init.logs.follow', params })
+  }
+
   // server
 
-  async echo(params: RR.EchoReq, urlOverride?: string): Promise<RR.EchoRes> {
-    return this.rpcRequest({ method: 'echo', params }, urlOverride)
-  }
-
-  openPatchWebsocket$(): Observable<Update<DataModel>> {
-    const config: WebSocketSubjectConfig<Update<DataModel>> = {
-      url: `/db`,
-      closeObserver: {
-        next: val => {
-          if (val.reason === 'UNAUTHORIZED') this.auth.setUnverified()
-        },
-      },
-    }
-
-    return this.openWebsocket(config)
-  }
-
-  openLogsWebsocket$(config: WebSocketSubjectConfig<Log>): Observable<Log> {
-    return this.openWebsocket(config)
-  }
-
-  openMetricsWebsocket$(
-    config: WebSocketSubjectConfig<Metrics>,
-  ): Observable<Metrics> {
-    return this.openWebsocket(config)
-  }
-
   async getSystemTime(
     params: RR.GetSystemTimeReq,
   ): Promise<RR.GetSystemTimeRes> {
@@ -175,7 +259,7 @@ export class LiveApiService extends ApiService {
 
   async updateServer(url?: string): Promise<RR.UpdateServerRes> {
     const params = {
-      marketplaceUrl: url || this.config.marketplace.start9,
+      registry: url || this.config.marketplace.start9,
     }
     return this.rpcRequest({ method: 'server.update', params })
   }
@@ -198,12 +282,6 @@ export class LiveApiService extends ApiService {
     return this.rpcRequest({ method: 'server.shutdown', params })
   }
 
-  async systemRebuild(
-    params: RR.RestartServerReq,
-  ): Promise<RR.RestartServerRes> {
-    return this.rpcRequest({ method: 'server.rebuild', params })
-  }
-
   async repairDisk(params: RR.RestartServerReq): Promise<RR.RestartServerRes> {
     return this.rpcRequest({ method: 'disk.repair', params })
   }
@@ -220,27 +298,61 @@ export class LiveApiService extends ApiService {
 
   // marketplace URLs
 
-  async marketplaceProxy<T>(
-    path: string,
-    qp: Record<string, string>,
-    baseUrl: string,
+  async registryRequest<T>(
+    registryUrl: string,
+    options: RPCOptions,
   ): Promise<T> {
-    const fullUrl = `${baseUrl}${path}?${new URLSearchParams(qp).toString()}`
     return this.rpcRequest({
-      method: 'marketplace.get',
-      params: { url: fullUrl },
+      ...options,
+      method: `registry.${options.method}`,
+      params: { registry: registryUrl, ...options.params },
     })
   }
 
-  async getEos(): Promise<RR.GetMarketplaceEosRes> {
-    const { id } = await getServerInfo(this.patch)
-    const qp: RR.GetMarketplaceEosReq = { serverId: id }
+  async checkOSUpdate(qp: RR.CheckOSUpdateReq): Promise<RR.CheckOSUpdateRes> {
+    const { serverId } = qp
 
-    return this.marketplaceProxy(
-      '/eos/v0/latest',
-      qp,
-      this.config.marketplace.start9,
-    )
+    return this.registryRequest(this.config.marketplace.start9, {
+      method: 'os.version.get',
+      params: { serverId },
+    })
+  }
+
+  async getRegistryInfo(registryUrl: string): Promise<T.RegistryInfo> {
+    return this.registryRequest(registryUrl, {
+      method: 'info',
+      params: {},
+    })
+  }
+
+  async getRegistryPackage(
+    registryUrl: string,
+    id: string,
+    versionRange: string | null,
+  ): Promise<GetPackageRes> {
+    const params: GetPackageReq = {
+      id,
+      version: versionRange,
+      otherVersions: 'short',
+    }
+
+    return this.registryRequest<GetPackageRes>(registryUrl, {
+      method: 'package.get',
+      params,
+    })
+  }
+
+  async getRegistryPackages(registryUrl: string): Promise<GetPackagesRes> {
+    const params: GetPackagesReq = {
+      id: null,
+      version: null,
+      otherVersions: 'short',
+    }
+
+    return this.registryRequest<GetPackagesRes>(registryUrl, {
+      method: 'package.get',
+      params,
+    })
   }
 
   // notification
@@ -463,8 +575,8 @@ export class LiveApiService extends ApiService {
   }
 
   async followPackageLogs(
-    params: RR.FollowServerLogsReq,
-  ): Promise<RR.FollowServerLogsRes> {
+    params: RR.FollowPackageLogsReq,
+  ): Promise<RR.FollowPackageLogsRes> {
     return this.rpcRequest({ method: 'package.logs.follow', params })
   }
 
@@ -533,12 +645,10 @@ export class LiveApiService extends ApiService {
     })
   }
 
-  async sideloadPackage(
-    params: RR.SideloadPackageReq,
-  ): Promise<RR.SideloadPacakgeRes> {
+  async sideloadPackage(): Promise<RR.SideloadPackageRes> {
     return this.rpcRequest({
       method: 'package.sideload',
-      params,
+      params: {},
     })
   }
 
@@ -554,23 +664,6 @@ export class LiveApiService extends ApiService {
     return this.rpcRequest({ method: 'package.proxy.set-outbound', params })
   }
 
-  async getSetupStatus() {
-    return this.rpcRequest<SetupStatus | null>({
-      method: 'setup.status',
-      params: {},
-    })
-  }
-
-  private openWebsocket<T>(config: WebSocketSubjectConfig<T>): Observable<T> {
-    const { location } = this.document.defaultView!
-    const protocol = location.protocol === 'http:' ? 'ws' : 'wss'
-    const host = location.host
-
-    config.url = `${protocol}://${host}/ws${config.url}`
-
-    return webSocket(config)
-  }
-
   private async rpcRequest<T>(
     options: RPCOptions,
     urlOverride?: string,
@@ -589,9 +682,7 @@ export class LiveApiService extends ApiService {
     const patchSequence = res.headers.get('x-patch-sequence')
     if (patchSequence)
       await firstValueFrom(
-        this.patch.cache$.pipe(
-          filter(({ sequence }) => sequence >= Number(patchSequence)),
-        ),
+        this.cache$.pipe(filter(({ id }) => id >= Number(patchSequence))),
       )
 
     return body.result
@@ -599,6 +690,29 @@ export class LiveApiService extends ApiService {
 
   private async httpRequest<T>(opts: HttpOptions): Promise<T> {
     const res = await this.http.httpRequest<T>(opts)
+    if (res.headers.get('Repr-Digest')) {
+      // verify
+      const digest = res.headers.get('Repr-Digest')!
+      let data: Uint8Array
+      if (opts.responseType === 'arrayBuffer') {
+        data = Buffer.from(res.body as ArrayBuffer)
+      } else if (opts.responseType === 'text') {
+        data = Buffer.from(res.body as string)
+      } else if ((opts.responseType as string) === 'blob') {
+        data = Buffer.from(await (res.body as Blob).arrayBuffer())
+      } else {
+        console.warn(
+          `could not verify Repr-Digest for responseType ${
+            opts.responseType || 'json'
+          }`,
+        )
+        return res.body
+      }
+      const computedDigest = Buffer.from(blake3(data)).toString('base64')
+      if (`blake3=:${computedDigest}:` === digest) return res.body
+      console.debug(computedDigest, digest)
+      throw new Error('File digest mismatch.')
+    }
     return res.body
   }
 }

web/projects/ui/src/app/services/api/embassy-mock-api.service.ts

@@ -1,15 +1,20 @@
 import { Injectable } from '@angular/core'
-import { pauseFor, Log, getSetupStatusMock } from '@start9labs/shared'
+import {
+  pauseFor,
+  Log,
+  getSetupStatusMock,
+  RPCErrorDetails,
+  RPCOptions,
+} from '@start9labs/shared'
 import { ApiService } from './embassy-api.service'
 import {
   Operation,
   PatchOp,
   pathFromArray,
   RemoveOperation,
-  Update,
+  Revision,
 } from 'patch-db-client'
 import {
-  DataModel,
   InstallingState,
   PackageDataEntry,
   Proxy,
@@ -19,24 +24,25 @@ import {
 import { BackupTargetType, Metrics, RR } from './api.types'
 import { Mock } from './api.fixures'
 import {
-  EMPTY,
-  iif,
+  from,
   interval,
   map,
   Observable,
   shareReplay,
+  startWith,
   Subject,
-  switchMap,
   tap,
-  timer,
 } from 'rxjs'
-import { LocalStorageBootstrap } from '../patch-db/local-storage-bootstrap'
 import { mockPatchData } from './mock-patch'
-import { WebSocketSubjectConfig } from 'rxjs/webSocket'
 import { AuthService } from '../auth.service'
-import { ConnectionService } from '../connection.service'
-import { StoreInfo } from '@start9labs/marketplace'
 import { T } from '@start9labs/start-sdk'
+import {
+  GetPackageRes,
+  GetPackagesRes,
+  MarketplacePkg,
+} from '@start9labs/marketplace'
+import { WebSocketSubjectConfig } from 'rxjs/webSocket'
+import markdown from 'raw-loader!../../../../../shared/assets/markdown/md-sample.md'
 
 const PROGRESS: T.FullProgress = {
   overall: {
@@ -53,10 +59,7 @@ const PROGRESS: T.FullProgress = {
     },
     {
       name: 'Validating',
-      progress: {
-        done: 0,
-        total: 40,
-      },
+      progress: null,
     },
     {
       name: 'Installing',
@@ -70,44 +73,25 @@ const PROGRESS: T.FullProgress = {
 
 @Injectable()
 export class MockApiService extends ApiService {
-  readonly mockWsSource$ = new Subject<Update<DataModel>>()
+  readonly mockWsSource$ = new Subject<Revision>()
   private readonly revertTime = 1800
   sequence = 0
 
-  constructor(
-    private readonly bootstrapper: LocalStorageBootstrap,
-    private readonly connectionService: ConnectionService,
-    private readonly auth: AuthService,
-  ) {
+  constructor(private readonly auth: AuthService) {
     super()
     this.auth.isVerified$
       .pipe(
         tap(() => {
           this.sequence = 0
         }),
-        switchMap(verified =>
-          iif(
-            () => verified,
-            timer(2000).pipe(
-              tap(() => {
-                this.connectionService.websocketConnected$.next(true)
-              }),
-            ),
-            EMPTY,
-          ),
-        ),
       )
       .subscribe()
   }
 
-  async getStatic(url: string): Promise<string> {
-    await pauseFor(2000)
-    return `* Test markdown instructions
-* Test markdown instructions with [link](https://start9.com)`
-  }
-
-  async uploadPackage(guid: string, body: Blob): Promise<void> {
+  async uploadPackage(guid: string, body: Blob): Promise<string> {
     await pauseFor(2000)
+    // @TODO Matt what should this return?
+    return ''
   }
 
   async uploadFile(body: Blob): Promise<string> {
@@ -115,8 +99,83 @@ export class MockApiService extends ApiService {
     return 'returnedhash'
   }
 
+  async getStaticProxy(
+    pkg: MarketplacePkg,
+    path: 'LICENSE.md' | 'instructions.md',
+  ): Promise<string> {
+    await pauseFor(2000)
+    return markdown
+  }
+
+  async getStaticInstalled(
+    id: T.PackageId,
+    path: 'LICENSE.md' | 'instructions.md',
+  ): Promise<string> {
+    await pauseFor(2000)
+    return markdown
+  }
+
+  // websocket
+
+  openWebsocket$<T>(
+    guid: string,
+    config: RR.WebsocketConfig<T>,
+  ): Observable<T> {
+    if (guid === 'db-guid') {
+      return this.mockWsSource$.pipe<any>(
+        shareReplay({ bufferSize: 1, refCount: true }),
+      )
+    } else if (guid === 'logs-guid') {
+      return interval(50).pipe<any>(
+        map((_, index) => {
+          // mock fire open observer
+          if (index === 0) config.openObserver?.next(new Event(''))
+          if (index === 100) throw new Error('HAAHHA')
+          return Mock.ServerLogs[0]
+        }),
+      )
+    } else if (guid === 'init-progress-guid') {
+      return from(this.initProgress()).pipe(
+        startWith(PROGRESS),
+      ) as Observable<T>
+    } else {
+      throw new Error('invalid guid type')
+    }
+  }
+
+  // state
+
+  async echo(params: RR.EchoReq, url: string): Promise<RR.EchoRes> {
+    if (url) {
+      const num = Math.floor(Math.random() * 10) + 1
+      if (num > 8) return params.message
+      throw new Error()
+    }
+    await pauseFor(2000)
+    return params.message
+  }
+
+  private stateIndex = 0
+  async getState(): Promise<RR.ServerState> {
+    await pauseFor(1000)
+
+    this.stateIndex++
+
+    return this.stateIndex === 1 ? 'running' : 'running'
+  }
+
   // db
 
+  async subscribeToPatchDB(
+    params: RR.SubscribePatchReq,
+  ): Promise<RR.SubscribePatchRes> {
+    await pauseFor(2000)
+    return {
+      dump: { id: 1, value: mockPatchData },
+      guid: 'db-guid',
+    }
+  }
+
   async setDbValue<T>(
     pathArr: Array<string | number>,
     value: T,
@@ -140,11 +199,6 @@ export class MockApiService extends ApiService {
 
   async login(params: RR.LoginReq): Promise<RR.loginRes> {
     await pauseFor(2000)
-
-    setTimeout(() => {
-      this.mockWsSource$.next({ id: 1, value: mockPatchData })
-    }, 2000)
-
     return null
   }
 
@@ -170,34 +224,63 @@ export class MockApiService extends ApiService {
     return null
   }
 
-  // server
+  // diagnostic
 
-  async echo(params: RR.EchoReq, url?: string): Promise<RR.EchoRes> {
-    if (url) {
-      const num = Math.floor(Math.random() * 10) + 1
-      if (num > 8) return params.message
-      throw new Error()
+  async getError(): Promise<RPCErrorDetails> {
+    await pauseFor(1000)
+    return {
+      code: 15,
+      message: 'Unknown server',
+      data: { details: 'Some details about the error here' },
     }
+  }
+
+  async diagnosticGetError(): Promise<RR.DiagnosticErrorRes> {
+    await pauseFor(1000)
+    return {
+      code: 15,
+      message: 'Unknown server',
+      data: { details: 'Some details about the error here' },
+    }
+  }
+
+  async diagnosticRestart(): Promise<void> {
+    await pauseFor(1000)
+  }
+
+  async diagnosticForgetDrive(): Promise<void> {
+    await pauseFor(1000)
+  }
+
+  async diagnosticRepairDisk(): Promise<void> {
+    await pauseFor(1000)
+  }
+
+  async diagnosticGetLogs(
+    params: RR.GetServerLogsReq,
+  ): Promise<RR.GetServerLogsRes> {
+    return this.getServerLogs(params)
+  }
+
+  // init
+
+  async initGetProgress(): Promise<RR.InitGetProgressRes> {
+    await pauseFor(250)
+    return {
+      progress: PROGRESS,
+      guid: 'init-progress-guid',
+    }
+  }
+
+  async initFollowLogs(): Promise<RR.FollowServerLogsRes> {
     await pauseFor(2000)
-    return params.message
+    return {
+      startCursor: 'start-cursor',
+      guid: 'logs-guid',
+    }
   }
 
-  openPatchWebsocket$(): Observable<Update<DataModel>> {
-    return this.mockWsSource$.pipe(
-      shareReplay({ bufferSize: 1, refCount: true }),
-    )
-  }
-
-  openLogsWebsocket$(config: WebSocketSubjectConfig<Log>): Observable<Log> {
-    return interval(50).pipe(
-      map((_, index) => {
-        // mock fire open observer
-        if (index === 0) config.openObserver?.next(new Event(''))
-        if (index === 100) throw new Error('HAAHHA')
-        return Mock.ServerLogs[0]
-      }),
-    )
-  }
+  // server
 
   openMetricsWebsocket$(
     config: WebSocketSubjectConfig<Metrics>,
@@ -265,7 +348,7 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
     return {
       startCursor: 'start-cursor',
-      guid: '7251d5be-645f-4362-a51b-3a85be92b31e',
+      guid: 'logs-guid',
     }
   }
 
@@ -275,7 +358,7 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
     return {
       startCursor: 'start-cursor',
-      guid: '7251d5be-645f-4362-a51b-3a85be92b31e',
+      guid: 'logs-guid',
     }
   }
 
@@ -285,11 +368,11 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
     return {
       startCursor: 'start-cursor',
-      guid: '7251d5be-645f-4362-a51b-3a85be92b31e',
+      guid: 'logs-guid',
     }
   }
 
-  randomLogs(limit = 1): Log[] {
+  private randomLogs(limit = 1): Log[] {
     const arrLength = Math.ceil(limit / Mock.ServerLogs.length)
     const logs = new Array(arrLength)
       .fill(Mock.ServerLogs)
@@ -404,12 +487,6 @@ export class MockApiService extends ApiService {
     return null
   }
 
-  async systemRebuild(
-    params: RR.SystemRebuildReq,
-  ): Promise<RR.SystemRebuildRes> {
-    return this.restartServer(params)
-  }
-
   async repairDisk(params: RR.RestartServerReq): Promise<RR.RestartServerRes> {
     await pauseFor(2000)
     return null
@@ -439,45 +516,41 @@ export class MockApiService extends ApiService {
 
   // marketplace URLs
 
-  async marketplaceProxy(
-    path: string,
-    params: Record<string, string>,
-    url: string,
+  async registryRequest(
+    registryUrl: string,
+    options: RPCOptions,
   ): Promise<any> {
     await pauseFor(2000)
 
-    if (path === '/package/v0/info') {
-      const info: StoreInfo = {
-        name: 'Start9 Registry',
-        categories: [
-          'bitcoin',
-          'lightning',
-          'data',
-          'featured',
-          'messaging',
-          'social',
-          'alt coin',
-          'ai',
-        ],
-      }
-      return info
-    } else if (path === '/package/v0/index') {
-      const version = params['ids']
-        ? (JSON.parse(params['ids']) as { version: string; id: string }[])[0]
-            .version
-        : undefined
-      return Mock.marketplacePkgsList(version)
-    } else if (path.startsWith('/package/v0/release-notes')) {
-      return Mock.ReleaseNotes
-    } else if (path.includes('instructions') || path.includes('license')) {
-      return `* Test markdown instructions
-* Test markdown instructions with [link](https://start9.com)`
+    return Error('do not call directly')
+  }
+
+  async checkOSUpdate(qp: RR.CheckOSUpdateReq): Promise<RR.CheckOSUpdateRes> {
+    await pauseFor(2000)
+    return Mock.MarketplaceEos
+  }
+
+  async getRegistryInfo(registryUrl: string): Promise<T.RegistryInfo> {
+    await pauseFor(2000)
+    return Mock.RegistryInfo
+  }
+
+  async getRegistryPackage(
+    url: string,
+    id: string,
+    versionRange: string,
+  ): Promise<GetPackageRes> {
+    await pauseFor(2000)
+    if (!versionRange) {
+      return Mock.RegistryPackages[id]
+    } else {
+      return Mock.OtherPackageVersions[id][versionRange]
     }
   }
 
-  async getEos(): Promise<RR.GetMarketplaceEosRes> {
+  async getRegistryPackages(registryUrl: string): Promise<GetPackagesRes> {
     await pauseFor(2000)
-    return Mock.MarketplaceEos
+    return Mock.RegistryPackages
   }
 
   // notification
@@ -776,7 +849,7 @@ export class MockApiService extends ApiService {
       path: path.replace(/\\/g, '/'),
       username: 'mockusername',
       mountable: true,
-      startOs: null,
+      startOs: {},
     }
   }
 
@@ -936,13 +1009,13 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
     let entries
     if (Math.random() < 0.2) {
-      entries = Mock.PackageLogs
+      entries = Mock.ServerLogs
     } else {
       const arrLength = params.limit
-        ? Math.ceil(params.limit / Mock.PackageLogs.length)
+        ? Math.ceil(params.limit / Mock.ServerLogs.length)
         : 10
       entries = new Array(arrLength)
-        .fill(Mock.PackageLogs)
+        .fill(Mock.ServerLogs)
         .reduce((acc, val) => acc.concat(val), [])
     }
     return {
@@ -958,7 +1031,7 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
     return {
       startCursor: 'start-cursor',
-      guid: '7251d5be-645f-4362-a51b-3a85be92b31e',
+      guid: 'logs-guid',
     }
   }
 
@@ -968,7 +1041,7 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
 
     setTimeout(async () => {
-      this.updateProgress(params.id)
+      this.installProgress(params.id)
     }, 1000)
 
     const patch: Operation<
@@ -981,11 +1054,11 @@ export class MockApiService extends ApiService {
           ...Mock.LocalPkgs[params.id],
           stateInfo: {
             // if installing
-            // state: 'installing',
+            state: 'installing',
 
             // if updating
-            state: 'updating',
-            manifest: mockPatchData.packageData[params.id].stateInfo.manifest!,
+            // state: 'updating',
+            // manifest: mockPatchData.packageData[params.id].stateInfo.manifest!,
 
             // both
             installingInfo: {
@@ -1015,7 +1088,7 @@ export class MockApiService extends ApiService {
     params: RR.DrySetPackageConfigReq,
   ): Promise<RR.DrySetPackageConfigRes> {
     await pauseFor(2000)
-    return {}
+    return []
   }
 
   async setPackageConfig(
@@ -1040,7 +1113,7 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
     const patch: Operation<PackageDataEntry>[] = params.ids.map(id => {
       setTimeout(async () => {
-        this.updateProgress(id)
+        this.installProgress(id)
       }, 2000)
 
       return {
@@ -1267,15 +1340,12 @@ export class MockApiService extends ApiService {
     }
   }
 
-  async sideloadPackage(
-    params: RR.SideloadPackageReq,
-  ): Promise<RR.SideloadPacakgeRes> {
+  async sideloadPackage(): Promise<RR.SideloadPackageRes> {
     await pauseFor(2000)
-    return '4120e092-05ab-4de2-9fbd-c3f1f4b1df9e' // no significance, randomly generated
-  }
-
-  async getSetupStatus() {
-    return getSetupStatusMock()
+    return {
+      upload: '4120e092-05ab-4de2-9fbd-c3f1f4b1df9e', // no significance, randomly generated
+      progress: '5120e092-05ab-4de2-9fbd-c3f1f4b1df9e', // no significance, randomly generated
+    }
   }
 
   async setInterfaceClearnetAddress(
@@ -1310,11 +1380,61 @@ export class MockApiService extends ApiService {
     return null
   }
 
-  private async updateProgress(id: string): Promise<void> {
+  private async initProgress(): Promise<T.FullProgress> {
     const progress = JSON.parse(JSON.stringify(PROGRESS))
 
     for (let [i, phase] of progress.phases.entries()) {
-      if (typeof phase.progress !== 'object' || !phase.progress.total) {
+      if (
+        !phase.progress ||
+        typeof phase.progress !== 'object' ||
+        !phase.progress.total
+      ) {
+        await pauseFor(2000)
+
+        progress.phases[i].progress = true
+
+        if (
+          progress.overall &&
+          typeof progress.overall === 'object' &&
+          progress.overall.total
+        ) {
+          const step = progress.overall.total / progress.phases.length
+          progress.overall.done += step
+        }
+      } else {
+        const step = phase.progress.total / 4
+
+        while (phase.progress.done < phase.progress.total) {
+          await pauseFor(200)
+
+          phase.progress.done += step
+
+          if (
+            progress.overall &&
+            typeof progress.overall === 'object' &&
+            progress.overall.total
+          ) {
+            const step = progress.overall.total / progress.phases.length / 4
+
+            progress.overall.done += step
+          }
+
+          if (phase.progress.done === phase.progress.total) {
+            await pauseFor(250)
+
+            progress.phases[i].progress = true
+          }
+        }
+      }
+    }
+    return progress
+  }
+
+  private async installProgress(id: string): Promise<void> {
+    const progress = JSON.parse(JSON.stringify(PROGRESS))
+
+    for (let [i, phase] of progress.phases.entries()) {
+      if (!phase.progress || phase.progress === true || !phase.progress.total) {
         await pauseFor(2000)
 
         const patches: Operation<any>[] = [
@@ -1326,7 +1446,11 @@ export class MockApiService extends ApiService {
         ]
 
         // overall
-        if (typeof progress.overall === 'object' && progress.overall.total) {
+        if (
+          progress.overall &&
+          typeof progress.overall === 'object' &&
+          progress.overall.total
+        ) {
           const step = progress.overall.total / progress.phases.length
 
           progress.overall.done += step
@@ -1356,7 +1480,11 @@ export class MockApiService extends ApiService {
           ]
 
           // overall
-          if (typeof progress.overall === 'object' && progress.overall.total) {
+          if (
+            progress.overall &&
+            typeof progress.overall === 'object' &&
+            progress.overall.total
+          ) {
             const step = progress.overall.total / progress.phases.length / 4
 
             progress.overall.done += step
@@ -1469,10 +1597,6 @@ export class MockApiService extends ApiService {
   }
 
   private async mockRevision<T>(patch: Operation<T>[]): Promise<void> {
-    if (!this.sequence) {
-      const { sequence } = this.bootstrapper.init()
-      this.sequence = sequence
-    }
     const revision = {
       id: ++this.sequence,
       patch,

web/projects/ui/src/app/services/api/mock-patch.ts

@@ -129,11 +129,13 @@ export const mockPatchData: DataModel = {
       login: '',
       password: '',
     },
+    platform: 'x86_64-nonfree',
+    // @TODO Matt zram needs to be added?
+    // zram: true,
+    governor: 'performance',
     passwordHash:
       '$argon2d$v=19$m=1024,t=1,p=1$YXNkZmFzZGZhc2RmYXNkZg$Ceev1I901G6UwU+hY0sHrFZ56D+o+LNJ',
-    platform: 'x86_64-nonfree',
     arch: 'x86_64',
-    governor: 'performance',
   },
   packageData: {
     bitcoind: {
@@ -141,7 +143,7 @@ export const mockPatchData: DataModel = {
         state: 'installed',
         manifest: {
           ...Mock.MockManifestBitcoind,
-          version: '0.20.0',
+          version: '0.20.0:0',
         },
       },
       icon: '/assets/img/service-icons/bitcoind.svg',
@@ -181,9 +183,8 @@ export const mockPatchData: DataModel = {
             },
           },
         },
-        dependencyConfigErrors: {},
       },
-      actions: {}, // @TODO
+      actions: {},
       serviceInterfaces: {
         ui: {
           id: 'ui',
@@ -197,66 +198,11 @@ export const mockPatchData: DataModel = {
           addressInfo: {
             username: null,
             hostId: 'abcdefg',
-            bindOptions: {
-              scheme: 'http',
-              preferredExternalPort: 80,
-              addSsl: {
-                // addXForwardedHeaders: false,
-                preferredExternalPort: 443,
-                scheme: 'https',
-                alpn: { specified: ['http/1.1', 'h2'] },
-              },
-              secure: null,
-            },
+            internalPort: 80,
+            scheme: 'http',
+            sslScheme: 'https',
             suffix: '',
           },
-          hostInfo: {
-            id: 'abcdefg',
-            kind: 'multi',
-            hostnames: [
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'local',
-                  value: 'adjective-noun.local',
-                  port: null,
-                  sslPort: 1234,
-                },
-              },
-              {
-                kind: 'onion',
-                hostname: {
-                  value: 'bitcoin-ui-address.onion',
-                  port: 80,
-                  sslPort: 443,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv4',
-                  value: '192.168.1.5',
-                  port: null,
-                  sslPort: 1234,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv6',
-                  value: '[2001:db8:85a3:8d3:1319:8a2e:370:7348]',
-                  port: null,
-                  sslPort: 1234,
-                },
-              },
-            ],
-          },
         },
         rpc: {
           id: 'rpc',
@@ -270,66 +216,11 @@ export const mockPatchData: DataModel = {
           addressInfo: {
             username: null,
             hostId: 'bcdefgh',
-            bindOptions: {
-              scheme: 'http',
-              preferredExternalPort: 80,
-              addSsl: {
-                // addXForwardedHeaders: false,
-                preferredExternalPort: 443,
-                scheme: 'https',
-                alpn: { specified: ['http/1.1'] },
-              },
-              secure: null,
-            },
+            internalPort: 8332,
+            scheme: 'http',
+            sslScheme: 'https',
             suffix: '',
           },
-          hostInfo: {
-            id: 'bcdefgh',
-            kind: 'multi',
-            hostnames: [
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'local',
-                  value: 'adjective-noun.local',
-                  port: null,
-                  sslPort: 2345,
-                },
-              },
-              {
-                kind: 'onion',
-                hostname: {
-                  value: 'bitcoin-rpc-address.onion',
-                  port: 80,
-                  sslPort: 443,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv4',
-                  value: '192.168.1.5',
-                  port: null,
-                  sslPort: 2345,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv6',
-                  value: '[2001:db8:85a3:8d3:1319:8a2e:370:7348]',
-                  port: null,
-                  sslPort: 2345,
-                },
-              },
-            ],
-          },
         },
         p2p: {
           id: 'p2p',
@@ -343,69 +234,117 @@ export const mockPatchData: DataModel = {
           addressInfo: {
             username: null,
             hostId: 'cdefghi',
-            bindOptions: {
-              scheme: 'bitcoin',
-              preferredExternalPort: 8333,
-              addSsl: null,
-              secure: {
-                ssl: false,
-              },
-            },
+            internalPort: 8333,
+            scheme: 'bitcoin',
+            sslScheme: null,
             suffix: '',
           },
-          hostInfo: {
-            id: 'cdefghi',
-            kind: 'multi',
-            hostnames: [
+        },
+      },
+      currentDependencies: {},
+      hosts: {
+        abcdefg: {
+          kind: 'multi',
+          bindings: [],
+          addresses: [],
+          hostnameInfo: {
+            80: [
               {
                 kind: 'ip',
-                networkInterfaceId: 'elan0',
+                networkInterfaceId: 'eth0',
                 public: false,
                 hostname: {
                   kind: 'local',
                   value: 'adjective-noun.local',
-                  port: 3456,
-                  sslPort: null,
+                  port: null,
+                  sslPort: 1234,
+                },
+              },
+              {
+                kind: 'ip',
+                networkInterfaceId: 'wlan0',
+                public: false,
+                hostname: {
+                  kind: 'local',
+                  value: 'adjective-noun.local',
+                  port: null,
+                  sslPort: 1234,
+                },
+              },
+              {
+                kind: 'ip',
+                networkInterfaceId: 'eth0',
+                public: false,
+                hostname: {
+                  kind: 'ipv4',
+                  value: '10.0.0.1',
+                  port: null,
+                  sslPort: 1234,
+                },
+              },
+              {
+                kind: 'ip',
+                networkInterfaceId: 'wlan0',
+                public: false,
+                hostname: {
+                  kind: 'ipv4',
+                  value: '10.0.0.2',
+                  port: null,
+                  sslPort: 1234,
+                },
+              },
+              {
+                kind: 'ip',
+                networkInterfaceId: 'eth0',
+                public: false,
+                hostname: {
+                  kind: 'ipv6',
+                  value: '[FE80:CD00:0000:0CDE:1257:0000:211E:729CD]',
+                  port: null,
+                  sslPort: 1234,
+                },
+              },
+              {
+                kind: 'ip',
+                networkInterfaceId: 'wlan0',
+                public: false,
+                hostname: {
+                  kind: 'ipv6',
+                  value: '[FE80:CD00:0000:0CDE:1257:0000:211E:1234]',
+                  port: null,
+                  sslPort: 1234,
                 },
               },
               {
                 kind: 'onion',
                 hostname: {
-                  value: 'bitcoin-p2p-address.onion',
-                  port: 8333,
-                  sslPort: null,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv4',
-                  value: '192.168.1.5',
-                  port: 3456,
-                  sslPort: null,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv6',
-                  value: '[2001:db8:85a3:8d3:1319:8a2e:370:7348]',
-                  port: 3456,
-                  sslPort: null,
+                  value: 'bitcoin-p2p.onion',
+                  port: 80,
+                  sslPort: 443,
                 },
               },
             ],
           },
         },
+        bcdefgh: {
+          kind: 'multi',
+          bindings: [],
+          addresses: [],
+          hostnameInfo: {
+            8332: [],
+          },
+        },
+        cdefghi: {
+          kind: 'multi',
+          bindings: [],
+          addresses: [],
+          hostnameInfo: {
+            8333: [],
+          },
+        },
       },
-      currentDependencies: {},
-      hosts: {},
       storeExposedDependents: [],
-      marketplaceUrl: 'https://registry.start9.com/',
+      registry: 'https://registry.start9.com/',
       developerKey: 'developer-key',
       outboundProxy: null,
     },
@@ -414,7 +353,7 @@ export const mockPatchData: DataModel = {
         state: 'installed',
         manifest: {
           ...Mock.MockManifestLnd,
-          version: '0.11.0',
+          version: '0.11.0:0.0.1',
         },
       },
       icon: '/assets/img/service-icons/lnd.png',
@@ -426,9 +365,6 @@ export const mockPatchData: DataModel = {
         main: {
           status: 'stopped',
         },
-        dependencyConfigErrors: {
-          'btc-rpc-proxy': 'This is a config unsatisfied error',
-        },
       },
       actions: {},
       serviceInterfaces: {
@@ -444,63 +380,11 @@ export const mockPatchData: DataModel = {
           addressInfo: {
             username: null,
             hostId: 'qrstuv',
-            bindOptions: {
-              scheme: 'grpc',
-              preferredExternalPort: 10009,
-              addSsl: null,
-              secure: {
-                ssl: true,
-              },
-            },
+            internalPort: 10009,
+            scheme: null,
+            sslScheme: 'grpc',
             suffix: '',
           },
-          hostInfo: {
-            id: 'qrstuv',
-            kind: 'multi',
-            hostnames: [
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'local',
-                  value: 'adjective-noun.local',
-                  port: 5678,
-                  sslPort: null,
-                },
-              },
-              {
-                kind: 'onion',
-                hostname: {
-                  value: 'lnd-grpc-address.onion',
-                  port: 10009,
-                  sslPort: null,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv4',
-                  value: '192.168.1.5',
-                  port: 5678,
-                  sslPort: null,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv6',
-                  value: '[2001:db8:85a3:8d3:1319:8a2e:370:7348]',
-                  port: 5678,
-                  sslPort: null,
-                },
-              },
-            ],
-          },
         },
         lndconnect: {
           id: 'lndconnect',
@@ -514,63 +398,11 @@ export const mockPatchData: DataModel = {
           addressInfo: {
             username: null,
             hostId: 'qrstuv',
-            bindOptions: {
-              scheme: 'lndconnect',
-              preferredExternalPort: 10009,
-              addSsl: null,
-              secure: {
-                ssl: true,
-              },
-            },
+            internalPort: 10009,
+            scheme: null,
+            sslScheme: 'lndconnect',
             suffix: 'cert=askjdfbjadnaskjnd&macaroon=ksjbdfnhjasbndjksand',
           },
-          hostInfo: {
-            id: 'qrstuv',
-            kind: 'multi',
-            hostnames: [
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'local',
-                  value: 'adjective-noun.local',
-                  port: 5678,
-                  sslPort: null,
-                },
-              },
-              {
-                kind: 'onion',
-                hostname: {
-                  value: 'lnd-grpc-address.onion',
-                  port: 10009,
-                  sslPort: null,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv4',
-                  value: '192.168.1.5',
-                  port: 5678,
-                  sslPort: null,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv6',
-                  value: '[2001:db8:85a3:8d3:1319:8a2e:370:7348]',
-                  port: 5678,
-                  sslPort: null,
-                },
-              },
-            ],
-          },
         },
         p2p: {
           id: 'p2p',
@@ -584,61 +416,11 @@ export const mockPatchData: DataModel = {
           addressInfo: {
             username: null,
             hostId: 'rstuvw',
-            bindOptions: {
-              scheme: null,
-              preferredExternalPort: 9735,
-              addSsl: null,
-              secure: { ssl: true },
-            },
+            internalPort: 8333,
+            scheme: 'bitcoin',
+            sslScheme: null,
             suffix: '',
           },
-          hostInfo: {
-            id: 'rstuvw',
-            kind: 'multi',
-            hostnames: [
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'local',
-                  value: 'adjective-noun.local',
-                  port: 6789,
-                  sslPort: null,
-                },
-              },
-              {
-                kind: 'onion',
-                hostname: {
-                  value: 'lnd-p2p-address.onion',
-                  port: 9735,
-                  sslPort: null,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv4',
-                  value: '192.168.1.5',
-                  port: 6789,
-                  sslPort: null,
-                },
-              },
-              {
-                kind: 'ip',
-                networkInterfaceId: 'elan0',
-                public: false,
-                hostname: {
-                  kind: 'ipv6',
-                  value: '[2001:db8:85a3:8d3:1319:8a2e:370:7348]',
-                  port: 6789,
-                  sslPort: null,
-                },
-              },
-            ],
-          },
         },
       },
       currentDependencies: {
@@ -646,22 +428,22 @@ export const mockPatchData: DataModel = {
           title: 'Bitcoin Core',
           icon: 'assets/img/service-icons/bitcoind.svg',
           kind: 'running',
-          registryUrl: 'https://registry.start9.com',
-          versionSpec: '>=26.0.0',
+          versionRange: '>=26.0.0',
           healthChecks: [],
+          configSatisfied: true,
         },
         'btc-rpc-proxy': {
           title: 'Bitcoin Proxy',
           icon: 'assets/img/service-icons/btc-rpc-proxy.png',
           kind: 'running',
-          registryUrl: 'https://community-registry.start9.com',
-          versionSpec: '>2.0.0',
+          versionRange: '>2.0.0',
           healthChecks: [],
+          configSatisfied: false,
         },
       },
       hosts: {},
       storeExposedDependents: [],
-      marketplaceUrl: 'https://registry.start9.com/',
+      registry: 'https://registry.start9.com/',
       developerKey: 'developer-key',
       outboundProxy: null,
     },

web/projects/ui/src/app/services/auth.service.ts

@@ -11,7 +11,7 @@ export enum AuthState {
   providedIn: 'root',
 })
 export class AuthService {
-  private readonly LOGGED_IN_KEY = 'loggedInKey'
+  private readonly LOGGED_IN_KEY = 'loggedIn'
   private readonly authState$ = new ReplaySubject<AuthState>(1)
 
   readonly isVerified$ = this.authState$.pipe(

web/projects/ui/src/app/services/config.service.ts

@@ -81,42 +81,50 @@ export class ConfigService {
   }
 
   /** ${scheme}://${username}@${host}:${externalPort}${suffix} */
-  launchableAddress(ui: T.ServiceInterfaceWithHostInfo): string {
-    if (ui.type !== 'ui') return ''
+  launchableAddress(
+    interfaces: PackageDataEntry['serviceInterfaces'],
+    hosts: PackageDataEntry['hosts'],
+  ): string {
+    const ui = Object.values(interfaces).find(
+      i =>
+        i.type === 'ui' &&
+        (i.addressInfo.scheme === 'http' ||
+          i.addressInfo.sslScheme === 'https'),
+    ) // TODO select if multiple
+
+    if (!ui) return ''
+
+    const hostnameInfo =
+      hosts[ui.addressInfo.hostId]?.hostnameInfo[ui.addressInfo.internalPort]
+
+    if (!hostnameInfo) return ''
 
-    const host = ui.hostInfo
     const addressInfo = ui.addressInfo
-    const scheme = this.isHttps() ? 'https' : 'http'
+    const scheme = this.isHttps()
+      ? ui.addressInfo.sslScheme === 'https'
+        ? 'https'
+        : 'http'
+      : ui.addressInfo.scheme === 'http'
+        ? 'http'
+        : 'https'
     const username = addressInfo.username ? addressInfo.username + '@' : ''
     const suffix = addressInfo.suffix || ''
     const url = new URL(`${scheme}://${username}placeholder${suffix}`)
 
-    if (host.kind === 'multi') {
-      const onionHostname = host.hostnames.find(h => h.kind === 'onion')
-        ?.hostname as T.ExportedOnionHostname
+    const onionHostname = hostnameInfo.find(h => h.kind === 'onion')
+      ?.hostname as T.OnionHostname | undefined
 
-      if (this.isTor() && onionHostname) {
-        url.hostname = onionHostname.value
-      } else {
-        const ipHostname = host.hostnames.find(h => h.kind === 'ip')
-          ?.hostname as T.ExportedIpHostname
-
-        if (!ipHostname) return ''
-
-        url.hostname = this.hostname
-        url.port = String(ipHostname.sslPort || ipHostname.port)
-      }
+    if (this.isTor() && onionHostname) {
+      url.hostname = onionHostname.value
     } else {
-      const hostname = {} as T.ExportedHostnameInfo // host.hostname
+      const ipHostname = hostnameInfo.find(h => h.kind === 'ip')?.hostname as
+        | T.IpHostname
+        | undefined
 
-      if (!hostname) return ''
+      if (!ipHostname) return ''
 
-      if (this.isTor() && hostname.kind === 'onion') {
-        url.hostname = (hostname.hostname as T.ExportedOnionHostname).value
-      } else {
-        url.hostname = this.hostname
-        url.port = String(hostname.hostname.sslPort || hostname.hostname.port)
-      }
+      url.hostname = this.hostname
+      url.port = String(ipHostname.sslPort || ipHostname.port)
     }
 
     return url.href

web/projects/ui/src/app/services/connection.service.ts

@@ -1,32 +1,23 @@
-import { Injectable } from '@angular/core'
-import {
-  combineLatest,
-  distinctUntilChanged,
-  map,
-  startWith,
-  fromEvent,
-  merge,
-  ReplaySubject,
-} from 'rxjs'
+import { inject, Injectable } from '@angular/core'
+import { combineLatest, Observable, shareReplay } from 'rxjs'
+import { distinctUntilChanged, map } from 'rxjs/operators'
+import { NetworkService } from 'src/app/services/network.service'
+import { StateService } from 'src/app/services/state.service'
 
 @Injectable({
   providedIn: 'root',
 })
-export class ConnectionService {
-  readonly networkConnected$ = merge(
-    fromEvent(window, 'online'),
-    fromEvent(window, 'offline'),
-  ).pipe(
-    startWith(null),
-    map(() => navigator.onLine),
-    distinctUntilChanged(),
-  )
-  readonly websocketConnected$ = new ReplaySubject<boolean>(1)
-  readonly connected$ = combineLatest([
-    this.networkConnected$,
-    this.websocketConnected$.pipe(distinctUntilChanged()),
+export class ConnectionService extends Observable<boolean> {
+  private readonly stream$ = combineLatest([
+    inject(NetworkService),
+    inject(StateService).pipe(map(Boolean)),
   ]).pipe(
     map(([network, websocket]) => network && websocket),
     distinctUntilChanged(),
+    shareReplay(1),
   )
+
+  constructor() {
+    super(subscriber => this.stream$.subscribe(subscriber))
+  }
 }

web/projects/ui/src/app/services/dep-error.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { Emver } from '@start9labs/shared'
+import { Exver } from '@start9labs/shared'
 import { distinctUntilChanged, map, shareReplay } from 'rxjs/operators'
 import { PatchDB } from 'patch-db-client'
 import {
@@ -42,7 +42,7 @@ export class DepErrorService {
     )
 
   constructor(
-    private readonly emver: Emver,
+    private readonly exver: Exver,
     private readonly patch: PatchDB<DataModel>,
   ) {}
 
@@ -86,20 +86,26 @@ export class DepErrorService {
       }
     }
 
-    const versionSpec = pkg.currentDependencies[depId].versionSpec
+    const currentDep = pkg.currentDependencies[depId]
     const depManifest = dep.stateInfo.manifest
 
     // incorrect version
-    if (!this.emver.satisfies(depManifest.version, versionSpec)) {
-      return {
-        type: 'incorrectVersion',
-        expected: versionSpec,
-        received: depManifest.version,
+    if (!this.exver.satisfies(depManifest.version, currentDep.versionRange)) {
+      if (
+        depManifest.satisfies.some(
+          v => !this.exver.satisfies(v, currentDep.versionRange),
+        )
+      ) {
+        return {
+          type: 'incorrectVersion',
+          expected: currentDep.versionRange,
+          received: depManifest.version,
+        }
       }
     }
 
     // invalid config
-    if (Object.values(pkg.status.dependencyConfigErrors).some(err => !!err)) {
+    if (!currentDep.configSatisfied) {
       return {
         type: 'configUnsatisfied',
       }
@@ -114,8 +120,6 @@ export class DepErrorService {
       }
     }
 
-    const currentDep = pkg.currentDependencies[depId]
-
     // health check failure
     if (depStatus === 'running' && currentDep.kind === 'running') {
       for (let id of currentDep.healthChecks) {

web/projects/ui/src/app/services/eos.service.ts

@@ -1,17 +1,17 @@
 import { Injectable } from '@angular/core'
-import { Emver } from '@start9labs/shared'
 import { PatchDB } from 'patch-db-client'
 import { BehaviorSubject, distinctUntilChanged, map, combineLatest } from 'rxjs'
-import { MarketplaceEOS } from 'src/app/services/api/api.types'
+import { OSUpdate } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { getServerInfo } from 'src/app/utils/get-server-info'
 import { DataModel } from './patch-db/data-model'
+import { Exver } from '@start9labs/shared'
 
 @Injectable({
   providedIn: 'root',
 })
 export class EOSService {
-  eos?: MarketplaceEOS
+  osUpdate?: OSUpdate
   updateAvailable$ = new BehaviorSubject<boolean>(false)
 
   readonly updating$ = this.patch.watch$('serverInfo', 'statusInfo').pipe(
@@ -46,14 +46,15 @@ export class EOSService {
 
   constructor(
     private readonly api: ApiService,
-    private readonly emver: Emver,
     private readonly patch: PatchDB<DataModel>,
+    private readonly exver: Exver,
   ) {}
 
   async loadEos(): Promise<void> {
-    const { version } = await getServerInfo(this.patch)
-    this.eos = await this.api.getEos()
-    const updateAvailable = this.emver.compare(this.eos.version, version) === 1
+    const { version, id } = await getServerInfo(this.patch)
+    this.osUpdate = await this.api.checkOSUpdate({ serverId: id })
+    const updateAvailable =
+      this.exver.compareOsVersion(this.osUpdate.version, version) === 'greater'
     this.updateAvailable$.next(updateAvailable)
   }
 }

web/projects/ui/src/app/services/form.service.ts

@@ -7,8 +7,7 @@ import {
   ValidatorFn,
   Validators,
 } from '@angular/forms'
-import { getDefaultString } from 'src/app/utils/config-utilities'
-import { CT } from '@start9labs/start-sdk'
+import { CT, utils } from '@start9labs/start-sdk'
 const Mustache = require('mustache')
 
 @Injectable({
@@ -40,28 +39,25 @@ export class FormService {
 
   getUnionObject(
     spec: CT.ValueSpecUnion,
-    selection: string | null,
+    selected: string | null,
   ): UntypedFormGroup {
     const group = this.getFormGroup({
-      [CT.unionSelectKey]: this.getUnionSelectSpec(spec, selection),
+      selection: this.getUnionSelectSpec(spec, selected),
     })
 
     group.setControl(
-      CT.unionValueKey,
-      this.getFormGroup(selection ? spec.variants[selection].spec : {}),
+      'value',
+      this.getFormGroup(selected ? spec.variants[selected].spec : {}),
     )
 
     return group
   }
 
   getListItem(spec: CT.ValueSpecList, entry?: any) {
-    const listItemValidators = getListItemValidators(spec)
     if (CT.isValueSpecListOf(spec, 'text')) {
-      return this.formBuilder.control(entry, listItemValidators)
-    } else if (CT.isValueSpecListOf(spec, 'number')) {
-      return this.formBuilder.control(entry, listItemValidators)
+      return this.formBuilder.control(entry, stringValidators(spec.spec))
     } else if (CT.isValueSpecListOf(spec, 'object')) {
-      return this.getFormGroup(spec.spec.spec, listItemValidators, entry)
+      return this.getFormGroup(spec.spec.spec, [], entry)
     }
   }
 
@@ -90,7 +86,7 @@ export class FormService {
         if (currentValue !== undefined) {
           value = currentValue
         } else {
-          value = spec.default ? getDefaultString(spec.default) : null
+          value = spec.default ? utils.getDefaultString(spec.default) : null
         }
         return this.formBuilder.control(value, stringValidators(spec))
       case 'textarea':
@@ -132,7 +128,7 @@ export class FormService {
           fileValidators(spec),
         )
       case 'union':
-        const currentSelection = currentValue?.[CT.unionSelectKey]
+        const currentSelection = currentValue?.selection
         const isValid = !!spec.variants[currentSelection]
 
         return this.getUnionObject(
@@ -154,13 +150,11 @@ export class FormService {
   }
 }
 
-function getListItemValidators(spec: CT.ValueSpecList) {
-  if (CT.isValueSpecListOf(spec, 'text')) {
-    return stringValidators(spec.spec)
-  } else if (CT.isValueSpecListOf(spec, 'number')) {
-    return numberValidators(spec.spec)
-  }
-}
+// function getListItemValidators(spec: CT.ValueSpecList) {
+//   if (CT.isValueSpecListOf(spec, 'text')) {
+//     return stringValidators(spec.spec)
+//   }
+// }
 
 function stringValidators(
   spec: CT.ValueSpecText | CT.ListValueSpecText,
@@ -224,9 +218,7 @@ function datetimeValidators({
   return validators
 }
 
-function numberValidators(
-  spec: CT.ValueSpecNumber | CT.ListValueSpecNumber,
-): ValidatorFn[] {
+function numberValidators(spec: CT.ValueSpecNumber): ValidatorFn[] {
   const validators: ValidatorFn[] = []
 
   validators.push(isNumber())
@@ -416,7 +408,6 @@ function listItemEquals(spec: CT.ValueSpecList, val1: any, val2: any): boolean {
   // TODO: fix types
   switch (spec.spec.type) {
     case 'text':
-    case 'number':
       return val1 == val2
     case 'object':
       const obj = spec.spec
@@ -528,12 +519,12 @@ function unionEquals(
   val1: any,
   val2: any,
 ): boolean {
-  const variantSpec = spec.variants[val1[CT.unionSelectKey]].spec
+  const variantSpec = spec.variants[val1.selection].spec
   if (!uniqueBy) {
     return false
   } else if (typeof uniqueBy === 'string') {
-    if (uniqueBy === CT.unionSelectKey) {
-      return val1[CT.unionSelectKey] === val2[CT.unionSelectKey]
+    if (uniqueBy === 'selection') {
+      return val1.selection === val2.selection
     } else {
       return itemEquals(variantSpec[uniqueBy], val1[uniqueBy], val2[uniqueBy])
     }
@@ -623,18 +614,13 @@ export function convertValuesRecursive(
       convertValuesRecursive(valueSpec.spec, group.get(key) as UntypedFormGroup)
     } else if (valueSpec.type === 'union') {
       const formGr = group.get(key) as UntypedFormGroup
-      const spec =
-        valueSpec.variants[formGr.controls[CT.unionSelectKey].value].spec
+      const spec = valueSpec.variants[formGr.controls['selection'].value].spec
       convertValuesRecursive(spec, formGr)
     } else if (valueSpec.type === 'list') {
       const formArr = group.get(key) as UntypedFormArray
       const { controls } = formArr
 
-      if (valueSpec.spec.type === 'number') {
-        controls.forEach(control => {
-          control.setValue(control.value ? Number(control.value) : null)
-        })
-      } else if (valueSpec.spec.type === 'text') {
+      if (valueSpec.spec.type === 'text') {
         controls.forEach(control => {
           if (!control.value) control.setValue(null)
         })

web/projects/ui/src/app/services/marketplace.service.ts

@@ -1,12 +1,11 @@
 import { Injectable } from '@angular/core'
-import { sameUrl } from '@start9labs/shared'
 import {
   AbstractMarketplaceService,
   Marketplace,
-  MarketplacePkg,
-  StoreData,
   StoreIdentity,
-  StoreInfo,
+  MarketplacePkg,
+  GetPackageRes,
+  StoreData,
 } from '@start9labs/marketplace'
 import { PatchDB } from 'patch-db-client'
 import {
@@ -20,8 +19,8 @@ import {
   mergeMap,
   Observable,
   of,
-  pairwise,
   scan,
+  pairwise,
   shareReplay,
   startWith,
   switchMap,
@@ -32,7 +31,9 @@ import { RR } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { DataModel, UIStore } from 'src/app/services/patch-db/data-model'
 import { ConfigService } from './config.service'
+import { Exver, sameUrl } from '@start9labs/shared'
 import { ClientStorageService } from './client-storage.service'
+import { T } from '@start9labs/start-sdk'
 
 @Injectable()
 export class MarketplaceService implements AbstractMarketplaceService {
@@ -87,11 +88,9 @@ export class MarketplaceService implements AbstractMarketplaceService {
     mergeMap(({ url, name }) =>
       this.fetchStore$(url).pipe(
         tap(data => {
-          if (data?.info) this.updateStoreName(url, name, data.info.name)
-        }),
-        map<StoreData | null, [string, StoreData | null]>(data => {
-          return [url, data]
+          if (data?.info.name) this.updateStoreName(url, name, data.info.name)
         }),
+        map<StoreData | null, [string, StoreData | null]>(data => [url, data]),
         startWith<[string, StoreData | null]>([url, null]),
       ),
     ),
@@ -142,6 +141,7 @@ export class MarketplaceService implements AbstractMarketplaceService {
     private readonly patch: PatchDB<DataModel>,
     private readonly config: ConfigService,
     private readonly clientStorageService: ClientStorageService,
+    private readonly exver: Exver,
   ) {}
 
   getKnownHosts$(filtered = false): Observable<StoreIdentity[]> {
@@ -190,28 +190,29 @@ export class MarketplaceService implements AbstractMarketplaceService {
 
   getPackage$(
     id: string,
-    version: string,
-    optionalUrl?: string,
+    version: string | null,
+    flavor: string | null,
+    registryUrl?: string,
   ): Observable<MarketplacePkg> {
-    return this.patch.watch$('ui', 'marketplace').pipe(
-      switchMap(uiMarketplace => {
-        const url = optionalUrl || uiMarketplace.selectedUrl
+    return this.selectedHost$.pipe(
+      switchMap(selected =>
+        this.marketplace$.pipe(
+          switchMap(m => {
+            const url = registryUrl || selected.url
 
-        if (version !== '*' || !uiMarketplace.knownHosts[url]) {
-          return this.fetchPackage$(id, version, url)
-        }
+            const pkg = m[url]?.packages.find(
+              p =>
+                p.id === id &&
+                p.flavor === flavor &&
+                (!version || this.exver.compareExver(p.version, version) === 0),
+            )
 
-        return this.marketplace$.pipe(
-          map(m => m[url]),
-          filter(Boolean),
-          take(1),
-          map(
-            store =>
-              store.packages.find(p => p.manifest.id === id) ||
-              ({} as MarketplacePkg),
-          ),
-        )
-      }),
+            return !!pkg
+              ? of(pkg)
+              : this.fetchPackage$(url, id, version, flavor)
+          }),
+        ),
+      ),
     )
   }
 
@@ -230,56 +231,22 @@ export class MarketplaceService implements AbstractMarketplaceService {
   ): Promise<void> {
     const params: RR.InstallPackageReq = {
       id,
-      versionSpec: `=${version}`,
-      marketplaceUrl: url,
+      version,
+      registry: url,
     }
 
     await this.api.installPackage(params)
   }
 
-  fetchInfo$(url: string): Observable<StoreInfo> {
-    return this.patch.watch$('serverInfo').pipe(
-      take(1),
-      switchMap(serverInfo => {
-        const qp: RR.GetMarketplaceInfoReq = { serverId: serverInfo.id }
-        return this.api.marketplaceProxy<RR.GetMarketplaceInfoRes>(
-          '/package/v0/info',
-          qp,
-          url,
-        )
-      }),
-    )
+  fetchInfo$(url: string): Observable<T.RegistryInfo> {
+    return from(this.api.getRegistryInfo(url))
   }
 
-  fetchReleaseNotes$(
-    id: string,
-    url?: string,
-  ): Observable<Record<string, string>> {
-    return this.selectedHost$.pipe(
-      switchMap(m => {
-        return from(
-          this.api.marketplaceProxy<Record<string, string>>(
-            `/package/v0/release-notes/${id}`,
-            {},
-            url || m.url,
-          ),
-        )
-      }),
-    )
-  }
-
-  fetchStatic$(id: string, type: string, url?: string): Observable<string> {
-    return this.selectedHost$.pipe(
-      switchMap(m => {
-        return from(
-          this.api.marketplaceProxy<string>(
-            `/package/v0/${type}/${id}`,
-            {},
-            url || m.url,
-          ),
-        )
-      }),
-    )
+  fetchStatic$(
+    pkg: MarketplacePkg,
+    type: 'LICENSE.md' | 'instructions.md',
+  ): Observable<string> {
+    return from(this.api.getStaticProxy(pkg, type))
   }
 
   private fetchStore$(url: string): Observable<StoreData | null> {
@@ -293,33 +260,57 @@ export class MarketplaceService implements AbstractMarketplaceService {
     )
   }
 
-  private fetchPackages$(
-    url: string,
-    params: Omit<RR.GetMarketplacePackagesReq, 'page' | 'per-page'> = {},
-  ): Observable<MarketplacePkg[]> {
-    const qp: RR.GetMarketplacePackagesReq = {
-      ...params,
-      page: 1,
-      perPage: 100,
-    }
-    if (qp.ids) qp.ids = JSON.stringify(qp.ids)
-
-    return from(
-      this.api.marketplaceProxy<RR.GetMarketplacePackagesRes>(
-        '/package/v0/index',
-        qp,
-        url,
-      ),
+  private fetchPackages$(url: string): Observable<MarketplacePkg[]> {
+    return from(this.api.getRegistryPackages(url)).pipe(
+      map(packages => {
+        return Object.entries(packages).flatMap(([id, pkgInfo]) =>
+          Object.keys(pkgInfo.best).map(version =>
+            this.convertToMarketplacePkg(
+              id,
+              version,
+              this.exver.getFlavor(version),
+              pkgInfo,
+            ),
+          ),
+        )
+      }),
     )
   }
 
-  private fetchPackage$(
+  convertToMarketplacePkg(
     id: string,
-    version: string,
+    version: string | null,
+    flavor: string | null,
+    pkgInfo: GetPackageRes,
+  ): MarketplacePkg {
+    version =
+      version ||
+      Object.keys(pkgInfo.best).find(v => this.exver.getFlavor(v) === flavor) ||
+      null
+
+    return !version || !pkgInfo.best[version]
+      ? ({} as MarketplacePkg)
+      : {
+          id,
+          version,
+          flavor,
+          ...pkgInfo,
+          ...pkgInfo.best[version],
+        }
+  }
+
+  private fetchPackage$(
     url: string,
+    id: string,
+    version: string | null,
+    flavor: string | null,
   ): Observable<MarketplacePkg> {
-    return this.fetchPackages$(url, { ids: [{ id, version }] }).pipe(
-      map(pkgs => pkgs[0] || {}),
+    return from(
+      this.api.getRegistryPackage(url, id, version ? `=${version}` : null),
+    ).pipe(
+      map(pkgInfo =>
+        this.convertToMarketplacePkg(id, version, flavor, pkgInfo),
+      ),
     )
   }
 

web/projects/ui/src/app/services/network.service.ts

@@ -0,0 +1,22 @@
+import { inject, Injectable } from '@angular/core'
+import { WINDOW } from '@ng-web-apis/common'
+import { fromEvent, merge, Observable, shareReplay } from 'rxjs'
+import { distinctUntilChanged, map, startWith } from 'rxjs/operators'
+
+@Injectable({ providedIn: 'root' })
+export class NetworkService extends Observable<boolean> {
+  private readonly win = inject(WINDOW)
+  private readonly stream$ = merge(
+    fromEvent(this.win, 'online'),
+    fromEvent(this.win, 'offline'),
+  ).pipe(
+    startWith(null),
+    map(() => this.win.navigator.onLine),
+    distinctUntilChanged(),
+    shareReplay(1),
+  )
+
+  constructor() {
+    super(subscriber => this.stream$.subscribe(subscriber))
+  }
+}

web/projects/ui/src/app/services/patch-data.service.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable } from '@angular/core'
 import { AbstractMarketplaceService } from '@start9labs/marketplace'
 import { TuiDialogService } from '@taiga-ui/core'
-import { filter, share, switchMap, take, tap, Observable } from 'rxjs'
+import { filter, share, switchMap, take, Observable, map } from 'rxjs'
 import { PatchDB } from 'patch-db-client'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { EOSService } from 'src/app/services/eos.service'
@@ -11,21 +11,25 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { ConnectionService } from 'src/app/services/connection.service'
 import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
+import { LocalStorageBootstrap } from './patch-db/local-storage-bootstrap'
 
 // Get data from PatchDb after is starts and act upon it
 @Injectable({
   providedIn: 'root',
 })
-export class PatchDataService extends Observable<DataModel> {
-  private readonly stream$ = this.connectionService.connected$.pipe(
+export class PatchDataService extends Observable<void> {
+  private readonly stream$ = this.connection$.pipe(
     filter(Boolean),
     switchMap(() => this.patch.watch$()),
-    take(1),
-    tap(({ ui }) => {
-      // check for updates to eOS and services
-      this.checkForUpdates()
-      // show eos welcome message
-      this.showEosWelcome(ui.ackWelcome)
+    map((cache, index) => {
+      this.bootstrapper.update(cache)
+
+      if (index === 0) {
+        // check for updates to StartOS and services
+        this.checkForUpdates()
+        // show eos welcome message
+        this.showEosWelcome(cache.ui.ackWelcome)
+      }
     }),
     share(),
   )
@@ -38,7 +42,8 @@ export class PatchDataService extends Observable<DataModel> {
     private readonly embassyApi: ApiService,
     @Inject(AbstractMarketplaceService)
     private readonly marketplaceService: MarketplaceService,
-    private readonly connectionService: ConnectionService,
+    private readonly connection$: ConnectionService,
+    private readonly bootstrapper: LocalStorageBootstrap,
   ) {
     super(subscriber => this.stream$.subscribe(subscriber))
   }

web/projects/ui/src/app/services/patch-db/data-model.ts

@@ -134,6 +134,10 @@ export type PackageDataEntry<T extends StateInfo = StateInfo> =
     nextBackup: string | null
   }
 
+export type AllPackageData = NonNullable<
+  T.AllPackageData & Record<string, PackageDataEntry<StateInfo>>
+>
+
 export type StateInfo = InstalledState | InstallingState | UpdatingState
 
 export type InstalledState = {

web/projects/ui/src/app/services/patch-db/local-storage-bootstrap.ts

@@ -1,4 +1,4 @@
-import { Bootstrapper, DBCache } from 'patch-db-client'
+import { Dump } from 'patch-db-client'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { Injectable } from '@angular/core'
 import { StorageService } from '../storage.service'
@@ -6,20 +6,18 @@ import { StorageService } from '../storage.service'
 @Injectable({
   providedIn: 'root',
 })
-export class LocalStorageBootstrap implements Bootstrapper<DataModel> {
-  static CONTENT_KEY = 'patch-db-cache'
+export class LocalStorageBootstrap {
+  static CONTENT_KEY = 'patchDB'
 
   constructor(private readonly storage: StorageService) {}
 
-  init(): DBCache<DataModel> {
-    const cache = this.storage.get<DBCache<DataModel>>(
-      LocalStorageBootstrap.CONTENT_KEY,
-    )
+  init(): Dump<DataModel> {
+    const cache = this.storage.get<DataModel>(LocalStorageBootstrap.CONTENT_KEY)
 
-    return cache || { sequence: 0, data: {} as DataModel }
+    return cache ? { id: 1, value: cache } : { id: 0, value: {} as DataModel }
   }
 
-  update(cache: DBCache<DataModel>): void {
+  update(cache: DataModel): void {
     this.storage.set(LocalStorageBootstrap.CONTENT_KEY, cache)
   }
 }

web/projects/ui/src/app/services/patch-db/patch-db-source.ts

@@ -0,0 +1,58 @@
+import { inject, Injectable, InjectionToken } from '@angular/core'
+import { Dump, Revision, Update } from 'patch-db-client'
+import { BehaviorSubject, EMPTY, Observable } from 'rxjs'
+import {
+  bufferTime,
+  catchError,
+  filter,
+  skip,
+  startWith,
+  switchMap,
+  take,
+} from 'rxjs/operators'
+import { StateService } from 'src/app/services/state.service'
+import { ApiService } from '../api/embassy-api.service'
+import { AuthService } from '../auth.service'
+import { DataModel } from './data-model'
+import { LocalStorageBootstrap } from './local-storage-bootstrap'
+
+export const PATCH_CACHE = new InjectionToken('', {
+  factory: () =>
+    new BehaviorSubject<Dump<DataModel>>({
+      id: 0,
+      value: {} as DataModel,
+    }),
+})
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PatchDbSource extends Observable<Update<DataModel>[]> {
+  private readonly api = inject(ApiService)
+  private readonly state = inject(StateService)
+  private readonly stream$ = inject(AuthService).isVerified$.pipe(
+    switchMap(verified => (verified ? this.api.subscribeToPatchDB({}) : EMPTY)),
+    switchMap(({ dump, guid }) =>
+      this.api.openWebsocket$<Revision>(guid, {}).pipe(
+        bufferTime(250),
+        filter(revisions => !!revisions.length),
+        startWith([dump]),
+      ),
+    ),
+    catchError((_, original$) => {
+      this.state.retrigger()
+
+      return this.state.pipe(
+        skip(1), // skipping previous value stored due to shareReplay
+        filter(current => current === 'running'),
+        take(1),
+        switchMap(() => original$),
+      )
+    }),
+    startWith([inject(LocalStorageBootstrap).init()]),
+  )
+
+  constructor() {
+    super(subscriber => this.stream$.subscribe(subscriber))
+  }
+}

web/projects/ui/src/app/services/patch-db/patch-db.factory.ts

@@ -1,61 +0,0 @@
-import { InjectionToken, Injector } from '@angular/core'
-import { Update } from 'patch-db-client'
-import {
-  bufferTime,
-  catchError,
-  filter,
-  switchMap,
-  take,
-  tap,
-  defer,
-  EMPTY,
-  from,
-  interval,
-  Observable,
-} from 'rxjs'
-import { DataModel } from './data-model'
-import { AuthService } from '../auth.service'
-import { ConnectionService } from '../connection.service'
-import { ApiService } from '../api/embassy-api.service'
-import { ConfigService } from '../config.service'
-
-export const PATCH_SOURCE = new InjectionToken<Observable<Update<DataModel>[]>>(
-  '',
-)
-
-export function sourceFactory(
-  injector: Injector,
-): Observable<Update<DataModel>[]> {
-  // defer() needed to avoid circular dependency with ApiService, since PatchDB is needed there
-  return defer(() => {
-    const api = injector.get(ApiService)
-    const authService = injector.get(AuthService)
-    const connectionService = injector.get(ConnectionService)
-    const configService = injector.get(ConfigService)
-    const isTor = configService.isTor()
-    const timeout = isTor ? 16000 : 4000
-
-    const websocket$ = api.openPatchWebsocket$().pipe(
-      bufferTime(250),
-      filter(updates => !!updates.length),
-      catchError((_, watch$) => {
-        connectionService.websocketConnected$.next(false)
-
-        return interval(timeout).pipe(
-          switchMap(() =>
-            from(api.echo({ message: 'ping', timeout })).pipe(
-              catchError(() => EMPTY),
-            ),
-          ),
-          take(1),
-          switchMap(() => watch$),
-        )
-      }),
-      tap(() => connectionService.websocketConnected$.next(true)),
-    )
-
-    return authService.isVerified$.pipe(
-      switchMap(verified => (verified ? websocket$ : EMPTY)),
-    )
-  })
-}

web/projects/ui/src/app/services/patch-monitor.service.ts

@@ -3,7 +3,6 @@ import { tap, Observable } from 'rxjs'
 import { PatchDB } from 'patch-db-client'
 import { AuthService } from 'src/app/services/auth.service'
 import { DataModel } from './patch-db/data-model'
-import { LocalStorageBootstrap } from './patch-db/local-storage-bootstrap'
 
 // Start and stop PatchDb upon verification
 @Injectable({
@@ -11,15 +10,12 @@ import { LocalStorageBootstrap } from './patch-db/local-storage-bootstrap'
 })
 export class PatchMonitorService extends Observable<unknown> {
   private readonly stream$ = this.authService.isVerified$.pipe(
-    tap(verified =>
-      verified ? this.patch.start(this.bootstrapper) : this.patch.stop(),
-    ),
+    tap(verified => (verified ? this.patch.start() : this.patch.stop())),
   )
 
   constructor(
     private readonly authService: AuthService,
     private readonly patch: PatchDB<DataModel>,
-    private readonly bootstrapper: LocalStorageBootstrap,
   ) {
     super(subscriber => this.stream$.subscribe(subscriber))
   }

web/projects/ui/src/app/services/state.service.ts

@@ -0,0 +1,136 @@
+import { inject, Injectable } from '@angular/core'
+import { CanActivateFn, IsActiveMatchOptions, Router } from '@angular/router'
+import { ALWAYS_TRUE_HANDLER } from '@taiga-ui/cdk'
+import { TuiAlertService, TuiNotification } from '@taiga-ui/core'
+import {
+  BehaviorSubject,
+  combineLatest,
+  concat,
+  EMPTY,
+  exhaustMap,
+  from,
+  merge,
+  Observable,
+  startWith,
+  Subject,
+  timer,
+} from 'rxjs'
+import {
+  catchError,
+  filter,
+  map,
+  shareReplay,
+  skip,
+  switchMap,
+  take,
+  takeUntil,
+  tap,
+} from 'rxjs/operators'
+import { RR } from 'src/app/services/api/api.types'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { NetworkService } from 'src/app/services/network.service'
+
+const OPTIONS: IsActiveMatchOptions = {
+  paths: 'subset',
+  queryParams: 'exact',
+  fragment: 'ignored',
+  matrixParams: 'ignored',
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class StateService extends Observable<RR.ServerState | null> {
+  private readonly alerts = inject(TuiAlertService)
+  private readonly api = inject(ApiService)
+  private readonly router = inject(Router)
+  private readonly network$ = inject(NetworkService)
+
+  private readonly single$ = new Subject<RR.ServerState>()
+
+  private readonly trigger$ = new BehaviorSubject<void>(undefined)
+  private readonly poll$ = this.trigger$.pipe(
+    switchMap(() =>
+      timer(0, 2000).pipe(
+        switchMap(() =>
+          from(this.api.getState()).pipe(catchError(() => EMPTY)),
+        ),
+        take(1),
+      ),
+    ),
+  )
+
+  private readonly stream$ = merge(this.single$, this.poll$).pipe(
+    tap(state => {
+      switch (state) {
+        case 'initializing':
+          this.router.navigate(['initializing'], { replaceUrl: true })
+          break
+        case 'error':
+          this.router.navigate(['diagnostic'], { replaceUrl: true })
+          break
+        case 'running':
+          if (
+            this.router.isActive('initializing', OPTIONS) ||
+            this.router.isActive('diagnostic', OPTIONS)
+          ) {
+            this.router.navigate([''], { replaceUrl: true })
+          }
+
+          break
+      }
+    }),
+    startWith(null),
+    shareReplay(1),
+  )
+
+  private readonly alert = merge(
+    this.trigger$.pipe(skip(1)),
+    this.network$.pipe(filter(v => !v)),
+  )
+    .pipe(
+      exhaustMap(() =>
+        concat(
+          this.alerts
+            .open('Trying to reach server', {
+              label: 'State unknown',
+              autoClose: false,
+              status: TuiNotification.Error,
+            })
+            .pipe(
+              takeUntil(
+                combineLatest([this.stream$, this.network$]).pipe(
+                  filter(state => state.every(Boolean)),
+                ),
+              ),
+            ),
+          this.alerts.open('Connection restored', {
+            label: 'Server reached',
+            status: TuiNotification.Success,
+          }),
+        ),
+      ),
+    )
+    .subscribe()
+
+  constructor() {
+    super(subscriber => this.stream$.subscribe(subscriber))
+  }
+
+  retrigger() {
+    this.trigger$.next()
+  }
+
+  async syncState() {
+    const state = await this.api.getState()
+    this.single$.next(state)
+  }
+}
+
+export function stateNot(state: RR.ServerState[]): CanActivateFn {
+  return () =>
+    inject(StateService).pipe(
+      filter(current => !current || !state.includes(current)),
+      map(ALWAYS_TRUE_HANDLER),
+    )
+}

web/projects/ui/src/app/services/storage.service.ts

@@ -1,7 +1,7 @@
 import { Inject, Injectable } from '@angular/core'
 import { DOCUMENT } from '@angular/common'
 
-const PREFIX = '_embassystorage/_embassykv/'
+const PREFIX = '_startos/'
 
 @Injectable({
   providedIn: 'root',
@@ -15,16 +15,21 @@ export class StorageService {
     return JSON.parse(String(this.storage.getItem(`${PREFIX}${key}`)))
   }
 
-  set<T>(key: string, value: T) {
+  set(key: string, value: any) {
     this.storage.setItem(`${PREFIX}${key}`, JSON.stringify(value))
   }
 
   clear() {
-    Array.from(
-      { length: this.storage.length },
-      (_, i) => this.storage.key(i) || '',
-    )
-      .filter(key => key.startsWith(PREFIX))
-      .forEach(key => this.storage.removeItem(key))
+    this.storage.clear()
+  }
+
+  migrate036() {
+    const oldPrefix = '_embassystorage/_embassykv/'
+    if (!!this.storage.getItem(`${oldPrefix}loggedInKey`)) {
+      const cache = this.storage.getItem(`${oldPrefix}patch-db-cache`)
+      this.clear()
+      this.set('loggedIn', true)
+      this.set('patchDB', cache)
+    }
   }
 }

web/projects/ui/src/app/utils/config-utilities.ts

@@ -1,161 +0,0 @@
-import { CT } from '@start9labs/start-sdk'
-
-export class Range {
-  min?: number
-  max?: number
-  minInclusive!: boolean
-  maxInclusive!: boolean
-
-  static from(s: string = '(*,*)'): Range {
-    const r = new Range()
-    r.minInclusive = s.startsWith('[')
-    r.maxInclusive = s.endsWith(']')
-    const [minStr, maxStr] = s.split(',').map(a => a.trim())
-    r.min = minStr === '(*' ? undefined : Number(minStr.slice(1))
-    r.max = maxStr === '*)' ? undefined : Number(maxStr.slice(0, -1))
-    return r
-  }
-
-  checkIncludes(n: number) {
-    if (
-      this.hasMin() &&
-      (this.min > n || (!this.minInclusive && this.min == n))
-    ) {
-      throw new Error(this.minMessage())
-    }
-    if (
-      this.hasMax() &&
-      (this.max < n || (!this.maxInclusive && this.max == n))
-    ) {
-      throw new Error(this.maxMessage())
-    }
-  }
-
-  private hasMin(): this is Range & { min: number } {
-    return this.min !== undefined
-  }
-
-  private hasMax(): this is Range & { max: number } {
-    return this.max !== undefined
-  }
-
-  private minMessage(): string {
-    return `greater than${this.minInclusive ? ' or equal to' : ''} ${this.min}`
-  }
-
-  private maxMessage(): string {
-    return `less than${this.maxInclusive ? ' or equal to' : ''} ${this.max}`
-  }
-}
-
-export function getDefaultString(defaultSpec: CT.DefaultString): string {
-  if (typeof defaultSpec === 'string') {
-    return defaultSpec
-  } else {
-    let s = ''
-    for (let i = 0; i < defaultSpec.len; i++) {
-      s = s + getRandomCharInSet(defaultSpec.charset)
-    }
-
-    return s
-  }
-}
-
-// a,g,h,A-Z,,,,-
-function getRandomCharInSet(charset: string): string {
-  const set = stringToCharSet(charset)
-  let charIdx = Math.floor(Math.random() * set.len)
-  for (let range of set.ranges) {
-    if (range.len > charIdx) {
-      return String.fromCharCode(range.start.charCodeAt(0) + charIdx)
-    }
-    charIdx -= range.len
-  }
-  throw new Error('unreachable')
-}
-
-function stringToCharSet(charset: string): CharSet {
-  let set: CharSet = { ranges: [], len: 0 }
-  let start: string | null = null
-  let end: string | null = null
-  let in_range = false
-  for (let char of charset) {
-    switch (char) {
-      case ',':
-        if (start !== null && end !== null) {
-          if (start!.charCodeAt(0) > end!.charCodeAt(0)) {
-            throw new Error('start > end of charset')
-          }
-          const len = end.charCodeAt(0) - start.charCodeAt(0) + 1
-          set.ranges.push({
-            start,
-            end,
-            len,
-          })
-          set.len += len
-          start = null
-          end = null
-          in_range = false
-        } else if (start !== null && !in_range) {
-          set.len += 1
-          set.ranges.push({ start, end: start, len: 1 })
-          start = null
-        } else if (start !== null && in_range) {
-          end = ','
-        } else if (start === null && end === null && !in_range) {
-          start = ','
-        } else {
-          throw new Error('unexpected ","')
-        }
-        break
-      case '-':
-        if (start === null) {
-          start = '-'
-        } else if (!in_range) {
-          in_range = true
-        } else if (in_range && end === null) {
-          end = '-'
-        } else {
-          throw new Error('unexpected "-"')
-        }
-        break
-      default:
-        if (start === null) {
-          start = char
-        } else if (in_range && end === null) {
-          end = char
-        } else {
-          throw new Error(`unexpected "${char}"`)
-        }
-    }
-  }
-  if (start !== null && end !== null) {
-    if (start!.charCodeAt(0) > end!.charCodeAt(0)) {
-      throw new Error('start > end of charset')
-    }
-    const len = end.charCodeAt(0) - start.charCodeAt(0) + 1
-    set.ranges.push({
-      start,
-      end,
-      len,
-    })
-    set.len += len
-  } else if (start !== null) {
-    set.len += 1
-    set.ranges.push({
-      start,
-      end: start,
-      len: 1,
-    })
-  }
-  return set
-}
-
-interface CharSet {
-  ranges: {
-    start: string
-    end: string
-    len: number
-  }[]
-  len: number
-}

web/projects/ui/src/app/utils/dry-update.ts

@@ -1,18 +1,19 @@
-import { Emver } from '@start9labs/shared'
-import { DataModel } from 'src/app/services/patch-db/data-model'
+import { Exver } from '@start9labs/shared'
+import { DataModel } from '../services/patch-db/data-model'
 import { getManifest } from './get-package-data'
 
 export function dryUpdate(
   { id, version }: { id: string; version: string },
   pkgs: DataModel['packageData'],
-  emver: Emver,
+  exver: Exver,
 ): string[] {
   return Object.values(pkgs)
     .filter(
       pkg =>
         Object.keys(pkg.currentDependencies || {}).some(
           pkgId => pkgId === id,
-        ) && !emver.satisfies(version, pkg.currentDependencies[id].versionSpec),
+        ) &&
+        !exver.satisfies(version, pkg.currentDependencies[id].versionRange),
     )
     .map(pkg => getManifest(pkg).title)
 }