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

2026-03-26 10:21:52 +00:00 · 2023-11-13 14:59:16 -07:00
parent 3f4caed922 e4ce05f94d
commit 35c1ff9014
1115 changed files with 6871 additions and 1851 deletions
--- a/web/.browserslistrc
+++ b/web/.browserslistrc
@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
--- a/web/.editorconfig
+++ b/web/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/web/.gitignore
+++ b/web/.gitignore
@@ -0,0 +1,42 @@
+# Specifies intentionally untracked files to ignore when using Git
+# http://git-scm.com/docs/gitignore
+
+*~
+*.sw[mnpcod]
+.tmp
+*.tmp
+*.tmp.*
+*.sublime-project
+*.sublime-workspace
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate
+$RECYCLE.BIN/
+
+start9-ambassador
+*.tar.gz
+config.json
+
+ambassador.tar.gz
+*.log
+log.txt
+npm-debug.log*
+
+postprocess.js
+
+/.angular
+/.idea
+/.ionic
+/.sass-cache
+/.sourcemaps
+/.versions
+/.vscode
+/.gradle
+/dist
+/out-tsc
+/node_modules
+/platforms
+/plugins
+
+config.json
+proxy.conf.json
--- a/web/.prettierrc
+++ b/web/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "arrowParens": "avoid",
+  "trailingComma": "all",
+  "htmlWhitespaceSensitivity": "ignore"
+}
--- a/web/README.md
+++ b/web/README.md
@@ -0,0 +1,77 @@
+# StartOS Frontend
+
+StartOS has three user interfaces and a shared library, all written in Ionic/Angular/Typescript using an Angular workspace environment:
+
+1. **ui**: the main user interface
+1. **install-wizard**: used to install StartOS
+1. **setup-wizard**: used to facilitate initial setup
+1. **diagnostic-ui**: used to display certain diagnostic information in the event StartOS fails to initialize
+1. **marketplace**: abstracted ui elements to search for, list and display details for packages and their dependencies
+1. **shared**: contains components, types, and functions shared amongst all of the UIs.
+
+## Development Environment Setup
+
+- Requirements:
+  - [Install nodejs](https://nodejs.org/en/)
+  - [Install npm](https://www.npmjs.com/get-npm)
+
+Check your versions
+
+```sh
+node --version
+v18.15.0
+
+npm --version
+v8.0.0
+```
+
+## Running locally with mocks
+
+1. Clone the repository
+
+```sh
+git clone https://github.com/Start9Labs/start-os.git
+cd start-os
+git submodule update --init --recursive
+cd frontend
+npm ci
+npm run build:deps
+```
+
+2. Copy `config-sample.json` and its contents to a new file `config.json`.
+
+```sh
+cp config-sample.json config.json
+```
+
+By default, "useMocks" is set to `true`.
+Valid values for "maskAs" are `tor` and `lan`.
+
+3. Start the development server(s)
+
+```sh
+npm run start:ui
+npm run start:install-wiz
+npm run start:setup
+npm run start:dui
+```
+
+## Running locally with proxied backend
+
+This section enables you to run a local frontend with a remote backend (eg. hosted on a live Start9 server). It assumes you have completed Step 1 and Step 2 in the [section above](#running-locally-with-mocks)
+
+1. Set `useMocks: false` in `config.json`
+
+2. Create a proxy configuration file from the sample:
+
+```sh
+cp proxy.conf-sample.json proxy.conf.json
+```
+
+3. Change the target address to desired IP address in `proxy.conf.json`
+
+4. Start the development server
+
+```sh
+npm run start:ui:proxy
+```
--- a/web/angular.json
+++ b/web/angular.json
@@ -0,0 +1,584 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ui": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/ui",
+      "sourceRoot": "projects/ui/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "preserveSymlinks": true,
+            "outputPath": "dist/raw/ui",
+            "index": "projects/ui/src/index.html",
+            "main": "projects/ui/src/main.ts",
+            "polyfills": "projects/ui/src/polyfills.ts",
+            "tsConfig": "projects/ui/tsconfig.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/shared/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/monaco-editor",
+                "output": "assets/monaco-editor/"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
+              },
+              "projects/ui/src/manifest.webmanifest",
+              {
+                "glob": "ngsw.json",
+                "input": "dist/raw/ui",
+                "output": "projects/ui/src"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
+              }
+            ],
+            "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
+              "projects/shared/styles/variables.scss",
+              "projects/shared/styles/global.scss",
+              "projects/shared/styles/shared.scss",
+              "projects/ui/src/styles.scss"
+            ],
+            "scripts": [],
+            "ngswConfigPath": "projects/ui/ngsw-config.json"
+          },
+          "configurations": {
+            "production": {
+              "serviceWorker": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "projects/ui/src/environments/environment.ts",
+                  "with": "projects/ui/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
+            "ci": {
+              "progress": false
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "ui:build:production"
+            },
+            "development": {
+              "browserTarget": "ui:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ui:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/ui/src/**/*.ts",
+              "projects/ui/src/**/*.html"
+            ]
+          }
+        },
+        "ionic-cordova-build": {
+          "builder": "@ionic/angular-toolkit:cordova-build",
+          "options": {
+            "browserTarget": "ui:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ui:build:production"
+            }
+          }
+        },
+        "ionic-cordova-serve": {
+          "builder": "@ionic/angular-toolkit:cordova-serve",
+          "options": {
+            "cordovaBuildTarget": "ui:ionic-cordova-build",
+            "devServerTarget": "ui:serve"
+          },
+          "configurations": {
+            "production": {
+              "cordovaBuildTarget": "ui:ionic-cordova-build:production",
+              "devServerTarget": "ui:serve:production"
+            }
+          }
+        }
+      }
+    },
+    "install-wizard": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/install-wizard",
+      "sourceRoot": "projects/install-wizard/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/raw/install-wizard",
+            "index": "projects/install-wizard/src/index.html",
+            "main": "projects/install-wizard/src/main.ts",
+            "polyfills": "projects/install-wizard/src/polyfills.ts",
+            "tsConfig": "projects/install-wizard/tsconfig.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/shared/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
+            ],
+            "styles": [
+              "projects/shared/styles/variables.scss",
+              "projects/shared/styles/global.scss",
+              "projects/shared/styles/shared.scss",
+              "projects/install-wizard/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/install-wizard/src/environments/environment.ts",
+                  "with": "projects/install-wizard/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            },
+            "ci": {
+              "progress": false
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "install-wizard:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "install-wizard:build:production"
+            },
+            "development": {
+              "browserTarget": "install-wizard:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "install-wizard:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/install-wizard/src/**/*.ts",
+              "projects/install-wizard/src/**/*.html"
+            ]
+          }
+        },
+        "ionic-cordova-build": {
+          "builder": "@ionic/angular-toolkit:cordova-build",
+          "options": {
+            "browserTarget": "install-wizard:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "install-wizard:build:production"
+            }
+          }
+        },
+        "ionic-cordova-serve": {
+          "builder": "@ionic/angular-toolkit:cordova-serve",
+          "options": {
+            "cordovaBuildTarget": "install-wizard:ionic-cordova-build",
+            "devServerTarget": "install-wizard:serve"
+          },
+          "configurations": {
+            "production": {
+              "cordovaBuildTarget": "install-wizard:ionic-cordova-build:production",
+              "devServerTarget": "install-wizard:serve:production"
+            }
+          }
+        }
+      }
+    },
+    "setup-wizard": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/setup-wizard",
+      "sourceRoot": "projects/setup-wizard/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/raw/setup-wizard",
+            "index": "projects/setup-wizard/src/index.html",
+            "main": "projects/setup-wizard/src/main.ts",
+            "polyfills": "projects/setup-wizard/src/polyfills.ts",
+            "tsConfig": "projects/setup-wizard/tsconfig.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/shared/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
+            ],
+            "styles": [
+              "projects/shared/styles/variables.scss",
+              "projects/shared/styles/global.scss",
+              "projects/shared/styles/shared.scss",
+              "projects/setup-wizard/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "projects/setup-wizard/src/environments/environment.ts",
+                  "with": "projects/setup-wizard/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
+            "ci": {
+              "progress": false
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "setup-wizard:build:production"
+            },
+            "development": {
+              "browserTarget": "setup-wizard:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "setup-wizard:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/setup-wizard/src/**/*.ts",
+              "projects/setup-wizard/src/**/*.html"
+            ]
+          }
+        },
+        "ionic-cordova-build": {
+          "builder": "@ionic/angular-toolkit:cordova-build",
+          "options": {
+            "browserTarget": "setup-wizard:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "setup-wizard:build:production"
+            }
+          }
+        },
+        "ionic-cordova-serve": {
+          "builder": "@ionic/angular-toolkit:cordova-serve",
+          "options": {
+            "cordovaBuildTarget": "setup-wizard:ionic-cordova-build",
+            "devServerTarget": "setup-wizard:serve"
+          },
+          "configurations": {
+            "production": {
+              "cordovaBuildTarget": "setup-wizard:ionic-cordova-build:production",
+              "devServerTarget": "setup-wizard:serve:production"
+            }
+          }
+        }
+      }
+    },
+    "diagnostic-ui": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "projects/diagnostic-ui",
+      "sourceRoot": "projects/diagnostic-ui/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/raw/diagnostic-ui",
+            "index": "projects/diagnostic-ui/src/index.html",
+            "main": "projects/diagnostic-ui/src/main.ts",
+            "polyfills": "projects/diagnostic-ui/src/polyfills.ts",
+            "tsConfig": "projects/diagnostic-ui/tsconfig.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "projects/shared/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
+            ],
+            "styles": [
+              "projects/shared/styles/variables.scss",
+              "projects/shared/styles/global.scss",
+              "projects/shared/styles/shared.scss",
+              "projects/diagnostic-ui/src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "projects/diagnostic-ui/src/environments/environment.ts",
+                  "with": "projects/diagnostic-ui/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
+                }
+              ]
+            },
+            "ci": {
+              "progress": false
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "diagnostic-ui:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "diagnostic-ui:build:production"
+            },
+            "development": {
+              "browserTarget": "diagnostic-ui:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "diagnostic-ui:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "projects/diagnostic-ui/src/**/*.ts",
+              "projects/diagnostic-ui/src/**/*.html"
+            ]
+          }
+        },
+        "ionic-cordova-build": {
+          "builder": "@ionic/angular-toolkit:cordova-build",
+          "options": {
+            "browserTarget": "diagnostic-ui:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "diagnostic-ui:build:production"
+            }
+          }
+        },
+        "ionic-cordova-serve": {
+          "builder": "@ionic/angular-toolkit:cordova-serve",
+          "options": {
+            "cordovaBuildTarget": "diagnostic-ui:ionic-cordova-build",
+            "devServerTarget": "diagnostic-ui:serve"
+          },
+          "configurations": {
+            "production": {
+              "cordovaBuildTarget": "diagnostic-ui:ionic-cordova-build:production",
+              "devServerTarget": "diagnostic-ui:serve:production"
+            }
+          }
+        }
+      }
+    },
+    "marketplace": {
+      "projectType": "library",
+      "root": "projects/marketplace",
+      "sourceRoot": "projects/marketplace/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/marketplace/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        }
+      }
+    },
+    "shared": {
+      "projectType": "library",
+      "root": "projects/shared",
+      "sourceRoot": "projects/shared/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/shared/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        }
+      }
+    }
+  },
+  "cli": {
+    "schematicCollections": ["@ionic/angular-toolkit"],
+    "analytics": false
+  },
+  "schematics": {
+    "@ionic/angular-toolkit:component": {
+      "styleext": "scss"
+    },
+    "@ionic/angular-toolkit:page": {
+      "styleext": "scss"
+    }
+  }
+}
--- a/web/build-config.js
+++ b/web/build-config.js
@@ -0,0 +1,12 @@
+// @ts-check
+const fs = require('fs')
+const childProcess = require('child_process')
+
+const gitHash = String(
+  childProcess.execSync('git describe --always --abbrev=40 --dirty=-modified'),
+).trim()
+
+const origConfig = require('./config.json')
+
+origConfig['gitHash'] = gitHash
+fs.writeFileSync('./config.json', JSON.stringify(origConfig, null, 2))
--- a/web/config-sample.json
+++ b/web/config-sample.json
@@ -0,0 +1,20 @@
+{
+  "useMocks": true,
+  "enableWidgets": false,
+  "ui": {
+    "api": {
+      "url": "rpc",
+      "version": "v1"
+    },
+    "marketplace": {
+      "start9": "https://registry.start9.com/",
+      "community": "https://community-registry.start9.com/"
+    },
+    "mocks": {
+      "maskAs": "tor",
+      "maskAsHttps": true,
+      "skipStartupAlerts": true
+    }
+  },
+  "gitHash": ""
+}
--- a/web/ionic.config.json
+++ b/web/ionic.config.json
@@ -0,0 +1,29 @@
+{
+  "projects": {
+    "ui": {
+      "name": "ui",
+      "integrations": {},
+      "type": "angular",
+      "root": "projects/ui"
+    },
+    "install-wizard": {
+      "name": "install-wizard",
+      "integrations": {},
+      "type": "angular",
+      "root": "projects/install-wizard"
+    },
+    "setup-wizard": {
+      "name": "setup-wizard",
+      "integrations": {},
+      "type": "angular",
+      "root": "projects/setup-wizard"
+    },
+    "diagnostic-ui": {
+      "name": "diagnostic-ui",
+      "integrations": {},
+      "type": "angular",
+      "root": "projects/diagnostic-ui"
+    }
+  },
+  "defaultProject": "ui"
+}
--- a/web/lint-staged.config.js
+++ b/web/lint-staged.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  '**/*.{js,ts,html,md,json}': 'prettier --write',
+  '*.ts': 'tslint --fix',
+  'projects/ui/**/*.ts': () => 'npm run check:ui',
+  'projects/shared/**/*.ts': () => 'npm run check:shared',
+  'projects/marketplace/**/*.ts': () => 'npm run check:marketplace',
+  'projects/diagnostic-ui/**/*.ts': () => 'npm run check:dui',
+  'projects/install-wizard/**/*.ts': () => 'npm run check:install-wiz',
+  'projects/setup-wizard/**/*.ts': () => 'npm run check:setup',
+}
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@@ -0,0 +1,118 @@
+{
+  "name": "startos-ui",
+  "version": "0.3.5",
+  "author": "Start9 Labs, Inc",
+  "homepage": "https://start9.com/",
+  "scripts": {
+    "ng": "ng",
+    "check": "npm run check:shared && npm run check:marketplace && npm run check:ui && npm run check:install-wiz && npm run check:setup && npm run check:dui",
+    "check:shared": "tsc --project projects/shared/tsconfig.json --noEmit --skipLibCheck",
+    "check:marketplace": "tsc --project projects/marketplace/tsconfig.json --noEmit --skipLibCheck",
+    "check:dui": "tsc --project projects/diagnostic-ui/tsconfig.json --noEmit --skipLibCheck",
+    "check:install-wiz": "tsc --project projects/install-wizard/tsconfig.json --noEmit --skipLibCheck",
+    "check:setup": "tsc --project projects/setup-wizard/tsconfig.json --noEmit --skipLibCheck",
+    "check:ui": "tsc --project projects/ui/tsconfig.json --noEmit --skipLibCheck",
+    "build:deps": "rm -rf .angular/cache && cd ../patch-db/client && npm ci && npm run build",
+    "build:dui": "ng run diagnostic-ui:build",
+    "build:install-wiz": "ng run install-wizard:build",
+    "build:setup": "ng run setup-wizard:build",
+    "build:ui": "ng run ui:build",
+    "build:ui:dev": "ng run ui:build:development",
+    "build:ui:stats": "ng run ui:build --stats-json",
+    "build:all": "npm run build:deps && npm run build:dui && npm run build:setup && npm run build:ui && npm run build:install-wiz",
+    "build:shared": "ng build shared",
+    "build:marketplace": "npm run build:shared && ng build marketplace",
+    "analyze:ui": "webpack-bundle-analyzer dist/raw/ui/stats.json",
+    "publish:shared": "npm run build:shared && npm publish ./dist/shared --access public",
+    "publish:marketplace": "npm run build:marketplace && npm publish ./dist/marketplace --access public",
+    "start:dui": "npm run-script build-config && ionic serve --project diagnostic-ui --host 0.0.0.0",
+    "start:install-wiz": "npm run-script build-config && ionic serve --project install-wizard --host 0.0.0.0",
+    "start:setup": "npm run-script build-config && ionic serve --project setup-wizard --host 0.0.0.0",
+    "start:ui": "npm run-script build-config && ionic serve --project ui --ip --host 0.0.0.0",
+    "start:ui:proxy": "npm run-script build-config && ionic serve --project ui --ip --host 0.0.0.0 -- --proxy-config proxy.conf.json",
+    "build-config": "node build-config.js"
+  },
+  "dependencies": {
+    "@angular/animations": "^14.1.0",
+    "@angular/common": "^14.1.0",
+    "@angular/compiler": "^14.1.0",
+    "@angular/core": "^14.1.0",
+    "@angular/forms": "^14.1.0",
+    "@angular/platform-browser": "^14.1.0",
+    "@angular/platform-browser-dynamic": "^14.1.0",
+    "@angular/pwa": "^14.1.0",
+    "@angular/router": "^14.1.0",
+    "@angular/service-worker": "^14.2.2",
+    "@ionic/angular": "^6.1.15",
+    "@maskito/angular": "^0.10.0",
+    "@maskito/core": "^0.10.0",
+    "@materia-ui/ngx-monaco-editor": "^6.0.0",
+    "@start9labs/argon2": "^0.2.2",
+    "@start9labs/emver": "^0.1.5",
+    "@start9labs/start-sdk": "0.4.0-rev0.lib0.rc5",
+    "@taiga-ui/addon-charts": "3.28.0",
+    "@taiga-ui/cdk": "3.28.0",
+    "@taiga-ui/core": "3.28.0",
+    "@taiga-ui/icons": "3.28.0",
+    "@taiga-ui/kit": "3.28.0",
+    "angular-svg-round-progressbar": "^9.0.0",
+    "ansi-to-html": "^0.7.2",
+    "base64-js": "^1.5.1",
+    "cbor": "npm:@jprochazk/cbor@^0.4.9",
+    "cbor-web": "^8.1.0",
+    "core-js": "^3.21.1",
+    "cron": "^2.2.0",
+    "cronstrue": "^2.21.0",
+    "dompurify": "^2.3.6",
+    "fast-deep-equal": "^3.1.3",
+    "fast-json-patch": "^3.1.1",
+    "fuse.js": "^6.4.6",
+    "jose": "^4.9.0",
+    "js-yaml": "^4.1.0",
+    "marked": "^4.0.0",
+    "monaco-editor": "^0.33.0",
+    "mustache": "^4.2.0",
+    "ng-qrcode": "^7.0.0",
+    "node-jose": "^2.2.0",
+    "patch-db-client": "file: ../../../patch-db/client",
+    "pbkdf2": "^3.1.2",
+    "rxjs": "^7.8.1",
+    "swiper": "^8.2.4",
+    "ts-matches": "^5.2.1",
+    "tslib": "^2.3.0",
+    "uuid": "^8.3.2",
+    "zone.js": "^0.11.5"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^14.1.0",
+    "@angular/cli": "^14.1.0",
+    "@angular/compiler-cli": "^14.1.0",
+    "@angular/language-service": "^14.1.0",
+    "@ionic/cli": "^6.19.0",
+    "@types/cron": "^2.0.0",
+    "@types/dompurify": "^2.3.3",
+    "@types/estree": "^0.0.51",
+    "@types/js-yaml": "^4.0.5",
+    "@types/marked": "^4.0.3",
+    "@types/mustache": "^4.1.2",
+    "@types/node": "^18.15.0",
+    "@types/node-jose": "^1.1.10",
+    "@types/pbkdf2": "^3.1.0",
+    "@types/uuid": "^8.3.1",
+    "husky": "^4.3.8",
+    "lint-staged": "^13.2.0",
+    "ng-packagr": "^14.1.0",
+    "node-html-parser": "^5.3.3",
+    "prettier": "^2.6.1",
+    "raw-loader": "^4.0.2",
+    "ts-node": "^10.7.0",
+    "tslint": "^6.1.3",
+    "typescript": "4.8.4",
+    "webpack-bundle-analyzer": "^4.8.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged --concurrent false"
+    }
+  }
+}
--- a/web/patchdb-ui-seed.json
+++ b/web/patchdb-ui-seed.json
@@ -0,0 +1,20 @@
+{
+  "name": null,
+  "ack-welcome": "0.4.0",
+  "marketplace": {
+    "selected-url": "https://registry.start9.com/",
+    "known-hosts": {
+      "https://registry.start9.com/": {},
+      "https://community-registry.start9.com/": {}
+    }
+  },
+  "dev": {},
+  "gaming": {
+    "snake": {
+      "high-score": 0
+    }
+  },
+  "ack-instructions": {},
+  "theme": "Dark",
+  "widgets": []
+}
--- a/web/projects/diagnostic-ui/src/app/app-routing.module.ts
+++ b/web/projects/diagnostic-ui/src/app/app-routing.module.ts
@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core'
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router'
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () =>
+      import('./pages/home/home.module').then(m => m.HomePageModule),
+  },
+  {
+    path: 'logs',
+    loadChildren: () =>
+      import('./pages/logs/logs.module').then(m => m.LogsPageModule),
+  },
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, {
+      scrollPositionRestoration: 'enabled',
+      preloadingStrategy: PreloadAllModules,
+      useHash: true,
+    }),
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
--- a/web/projects/diagnostic-ui/src/app/app.component.html
+++ b/web/projects/diagnostic-ui/src/app/app.component.html
@@ -0,0 +1,5 @@
+<tui-root>
+  <ion-app>
+    <ion-router-outlet></ion-router-outlet>
+  </ion-app>
+</tui-root>
--- a/web/projects/diagnostic-ui/src/app/app.component.scss
+++ b/web/projects/diagnostic-ui/src/app/app.component.scss
@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+tui-root {
+  height: 100%;
+}
--- a/web/projects/diagnostic-ui/src/app/app.component.ts
+++ b/web/projects/diagnostic-ui/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
+})
+export class AppComponent {
+  constructor() {}
+}
--- a/web/projects/diagnostic-ui/src/app/app.module.ts
+++ b/web/projects/diagnostic-ui/src/app/app.module.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { RouteReuseStrategy } from '@angular/router'
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular'
+import { TuiRootModule } from '@taiga-ui/core'
+import { AppComponent } from './app.component'
+import { AppRoutingModule } from './app-routing.module'
+import { HttpClientModule } from '@angular/common/http'
+import { ApiService } from './services/api/api.service'
+import { MockApiService } from './services/api/mock-api.service'
+import { LiveApiService } from './services/api/live-api.service'
+import { RELATIVE_URL, WorkspaceConfig } from '@start9labs/shared'
+
+const {
+  useMocks,
+  ui: { api },
+} = require('../../../../config.json') as WorkspaceConfig
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    HttpClientModule,
+    BrowserAnimationsModule,
+    IonicModule.forRoot({
+      mode: 'md',
+    }),
+    AppRoutingModule,
+    TuiRootModule,
+  ],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    {
+      provide: ApiService,
+      useClass: useMocks ? MockApiService : LiveApiService,
+    },
+    {
+      provide: RELATIVE_URL,
+      useValue: `/${api.url}/${api.version}`,
+    },
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
--- a/web/projects/diagnostic-ui/src/app/pages/home/home-routing.module.ts
+++ b/web/projects/diagnostic-ui/src/app/pages/home/home-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { HomePage } from './home.page'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomePage,
+  },
+]
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class HomePageRoutingModule {}
--- a/web/projects/diagnostic-ui/src/app/pages/home/home.module.ts
+++ b/web/projects/diagnostic-ui/src/app/pages/home/home.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { FormsModule } from '@angular/forms'
+import { HomePage } from './home.page'
+import { HomePageRoutingModule } from './home-routing.module'
+
+@NgModule({
+  imports: [CommonModule, FormsModule, IonicModule, HomePageRoutingModule],
+  declarations: [HomePage],
+})
+export class HomePageModule {}
--- a/web/projects/diagnostic-ui/src/app/pages/home/home.page.html
+++ b/web/projects/diagnostic-ui/src/app/pages/home/home.page.html
@@ -0,0 +1,81 @@
+<ion-content>
+  <div style="padding: 48px">
+    <ng-container *ngIf="!restarted; else refresh">
+      <h1
+        class="ion-text-center"
+        style="padding-bottom: 36px; font-size: calc(2vw + 14px)"
+      >
+        StartOS - Diagnostic Mode
+      </h1>
+
+      <ng-container *ngIf="error">
+        <h2
+          style="
+            padding-bottom: 16px;
+            font-size: calc(1vw + 14px);
+            font-weight: bold;
+          "
+        >
+          StartOS launch error:
+        </h2>
+        <div class="code-block">
+          <code>
+            <ion-text color="warning">{{ error.problem }}</ion-text>
+            <span *ngIf="error.details">
+              <br />
+              <br />
+              <ion-text color="warning">{{ error.details }}</ion-text>
+            </span>
+          </code>
+        </div>
+        <ion-button routerLink="logs">View Logs</ion-button>
+        <h2
+          style="
+            padding: 32px 0 16px 0;
+            font-size: calc(1vw + 12px);
+            font-weight: bold;
+          "
+        >
+          Possible solutions:
+        </h2>
+        <div class="code-block">
+          <code><ion-text color="success">{{ error.solution }}</ion-text></code>
+        </div>
+        <ion-button (click)="restart()">Restart Server</ion-button>
+        <ion-button
+          class="ion-padding-start"
+          *ngIf="error.code === 15 || error.code === 25"
+          (click)="forgetDrive()"
+        >
+          {{ error.code === 15 ? 'Setup Current Drive' : 'Enter Recovery Mode'
+          }}
+        </ion-button>
+
+        <div class="ion-padding-top">
+          <ion-button (click)="presentAlertSystemRebuild()" color="warning">
+            System Rebuild
+          </ion-button>
+        </div>
+
+        <div class="ion-padding-top">
+          <ion-button (click)="presentAlertRepairDisk()" color="danger">
+            Repair Drive
+          </ion-button>
+        </div>
+      </ng-container>
+    </ng-container>
+
+    <ng-template #refresh>
+      <h1
+        class="ion-text-center"
+        style="padding-bottom: 36px; font-size: calc(2vw + 12px)"
+      >
+        Server is restarting
+      </h1>
+      <h2 style="padding-bottom: 16px; font-size: calc(1vw + 12px)">
+        Wait for the server to restart, then refresh this page.
+      </h2>
+      <ion-button (click)="refreshPage()">Refresh</ion-button>
+    </ng-template>
+  </div>
+</ion-content>
--- a/web/projects/diagnostic-ui/src/app/pages/home/home.page.scss
+++ b/web/projects/diagnostic-ui/src/app/pages/home/home.page.scss
@@ -0,0 +1,5 @@
+.code-block {
+  background-color: rgb(69, 69, 69);
+  padding: 12px;
+  margin-bottom: 32px;
+}
--- a/web/projects/diagnostic-ui/src/app/pages/home/home.page.ts
+++ b/web/projects/diagnostic-ui/src/app/pages/home/home.page.ts
@@ -0,0 +1,210 @@
+import { Component } from '@angular/core'
+import { AlertController, LoadingController } from '@ionic/angular'
+import { ApiService } from 'src/app/services/api/api.service'
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+})
+export class HomePage {
+  error?: {
+    code: number
+    problem: string
+    solution: string
+    details?: string
+  }
+  solutions: string[] = []
+  restarted = false
+
+  constructor(
+    private readonly loadingCtrl: LoadingController,
+    private readonly api: ApiService,
+    private readonly alertCtrl: AlertController,
+  ) {}
+
+  async ngOnInit() {
+    try {
+      const error = await this.api.getError()
+      // 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> {
+    const loader = await this.loadingCtrl.create({
+      cssClass: 'loader',
+    })
+    await loader.present()
+
+    try {
+      await this.api.restart()
+      this.restarted = true
+    } catch (e) {
+      console.error(e)
+    } finally {
+      loader.dismiss()
+    }
+  }
+
+  async forgetDrive(): Promise<void> {
+    const loader = await this.loadingCtrl.create({
+      cssClass: 'loader',
+    })
+    await loader.present()
+
+    try {
+      await this.api.forgetDrive()
+      await this.api.restart()
+      this.restarted = true
+    } catch (e) {
+      console.error(e)
+    } finally {
+      loader.dismiss()
+    }
+  }
+
+  async presentAlertSystemRebuild() {
+    const alert = await this.alertCtrl.create({
+      header: 'Warning',
+      message:
+        '<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>',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Rebuild',
+          handler: () => {
+            try {
+              this.systemRebuild()
+            } catch (e) {
+              console.error(e)
+            }
+          },
+        },
+      ],
+      cssClass: 'alert-warning-message',
+    })
+    await alert.present()
+  }
+
+  async presentAlertRepairDisk() {
+    const alert = await this.alertCtrl.create({
+      header: 'Warning',
+      message:
+        '<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>',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Repair',
+          handler: () => {
+            try {
+              this.repairDisk()
+            } catch (e) {
+              console.error(e)
+            }
+          },
+        },
+      ],
+      cssClass: 'alert-error-message',
+    })
+    await alert.present()
+  }
+
+  refreshPage(): void {
+    window.location.reload()
+  }
+
+  private async systemRebuild(): Promise<void> {
+    const loader = await this.loadingCtrl.create({
+      cssClass: 'loader',
+    })
+    await loader.present()
+
+    try {
+      await this.api.systemRebuild()
+      await this.api.restart()
+      this.restarted = true
+    } catch (e) {
+      console.error(e)
+    } finally {
+      loader.dismiss()
+    }
+  }
+
+  private async repairDisk(): Promise<void> {
+    const loader = await this.loadingCtrl.create({
+      cssClass: 'loader',
+    })
+    await loader.present()
+
+    try {
+      await this.api.repairDisk()
+      await this.api.restart()
+      this.restarted = true
+    } catch (e) {
+      console.error(e)
+    } finally {
+      loader.dismiss()
+    }
+  }
+}
--- a/web/projects/diagnostic-ui/src/app/pages/logs/logs.module.ts
+++ b/web/projects/diagnostic-ui/src/app/pages/logs/logs.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { Routes, RouterModule } from '@angular/router'
+import { IonicModule } from '@ionic/angular'
+import { LogsPage } from './logs.page'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LogsPage,
+  },
+]
+
+@NgModule({
+  imports: [CommonModule, IonicModule, RouterModule.forChild(routes)],
+  declarations: [LogsPage],
+})
+export class LogsPageModule {}
--- a/web/projects/diagnostic-ui/src/app/pages/logs/logs.page.html
+++ b/web/projects/diagnostic-ui/src/app/pages/logs/logs.page.html
@@ -0,0 +1,57 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Logs</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content
+  [scrollEvents]="true"
+  (ionScrollEnd)="scrollEnd()"
+  class="ion-padding"
+>
+  <ion-infinite-scroll
+    id="scroller"
+    *ngIf="!loading && needInfinite"
+    position="top"
+    threshold="0"
+    (ionInfinite)="doInfinite($event)"
+  >
+    <ion-infinite-scroll-content
+      loadingSpinner="lines"
+    ></ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+
+  <div id="container">
+    <div id="template" style="white-space: pre-line"></div>
+  </div>
+
+  <div id="bottom-div"></div>
+
+  <div
+    [ngStyle]="{
+      'position': 'fixed',
+      'bottom': '50px',
+      'right': isOnBottom ? '-52px' : '30px',
+      'border-radius': '100%',
+      'transition': 'right 0.25s ease-out'
+    }"
+  >
+    <ion-button
+      style="
+        width: 50px;
+        height: 50px;
+        --padding-start: 0px;
+        --padding-end: 0px;
+        --border-radius: 100%;
+      "
+      color="dark"
+      (click)="scrollToBottom()"
+      strong
+    >
+      <ion-icon name="chevron-down"></ion-icon>
+    </ion-button>
+  </div>
+</ion-content>
--- a/web/projects/diagnostic-ui/src/app/pages/logs/logs.page.scss
+++ b/web/projects/diagnostic-ui/src/app/pages/logs/logs.page.scss
--- a/web/projects/diagnostic-ui/src/app/pages/logs/logs.page.ts
+++ b/web/projects/diagnostic-ui/src/app/pages/logs/logs.page.ts
@@ -0,0 +1,95 @@
+import { Component, ViewChild } from '@angular/core'
+import { IonContent } from '@ionic/angular'
+import { ApiService } from 'src/app/services/api/api.service'
+import { ErrorToastService, toLocalIsoString } from '@start9labs/shared'
+
+var Convert = require('ansi-to-html')
+var convert = new Convert({
+  bg: 'transparent',
+})
+
+@Component({
+  selector: 'logs',
+  templateUrl: './logs.page.html',
+  styleUrls: ['./logs.page.scss'],
+})
+export class LogsPage {
+  @ViewChild(IonContent) private content?: IonContent
+  loading = true
+  needInfinite = true
+  startCursor?: string
+  limit = 200
+  isOnBottom = true
+
+  constructor(
+    private readonly api: ApiService,
+    private readonly errToast: ErrorToastService,
+  ) {}
+
+  async ngOnInit() {
+    await this.getLogs()
+    this.loading = false
+  }
+
+  scrollEnd() {
+    const bottomDiv = document.getElementById('bottom-div')
+    this.isOnBottom =
+      !!bottomDiv &&
+      bottomDiv.getBoundingClientRect().top - 420 < window.innerHeight
+  }
+
+  scrollToBottom() {
+    this.content?.scrollToBottom(500)
+  }
+
+  async doInfinite(e: any): Promise<void> {
+    await this.getLogs()
+    e.target.complete()
+  }
+
+  private async getLogs() {
+    try {
+      const { 'start-cursor': startCursor, entries } = await this.api.getLogs({
+        cursor: this.startCursor,
+        before: !!this.startCursor,
+        limit: this.limit,
+      })
+
+      if (!entries.length) return
+
+      this.startCursor = startCursor
+
+      const container = document.getElementById('container')
+      const newLogs = document.getElementById('template')?.cloneNode(true)
+
+      if (!(newLogs instanceof HTMLElement)) return
+
+      newLogs.innerHTML = entries
+        .map(
+          entry =>
+            `<b>${toLocalIsoString(
+              new Date(entry.timestamp),
+            )}</b> ${convert.toHtml(entry.message)}`,
+        )
+        .join('\n')
+
+      const beforeContainerHeight = container?.scrollHeight || 0
+      container?.prepend(newLogs)
+      const afterContainerHeight = container?.scrollHeight || 0
+
+      // scroll down
+      setTimeout(() => {
+        this.content?.scrollToPoint(
+          0,
+          afterContainerHeight - beforeContainerHeight,
+        )
+      }, 50)
+
+      if (entries.length < this.limit) {
+        this.needInfinite = false
+      }
+    } catch (e: any) {
+      this.errToast.present(e)
+    }
+  }
+}
--- a/web/projects/diagnostic-ui/src/app/services/api/api.service.ts
+++ b/web/projects/diagnostic-ui/src/app/services/api/api.service.ts
@@ -0,0 +1,16 @@
+import { LogsRes, ServerLogsReq } from '@start9labs/shared'
+
+export abstract class ApiService {
+  abstract getError(): Promise<GetErrorRes>
+  abstract restart(): Promise<void>
+  abstract forgetDrive(): Promise<void>
+  abstract repairDisk(): Promise<void>
+  abstract systemRebuild(): Promise<void>
+  abstract getLogs(params: ServerLogsReq): Promise<LogsRes>
+}
+
+export interface GetErrorRes {
+  code: number
+  message: string
+  data: { details: string }
+}
--- a/web/projects/diagnostic-ui/src/app/services/api/live-api.service.ts
+++ b/web/projects/diagnostic-ui/src/app/services/api/live-api.service.ts
@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core'
+import {
+  HttpService,
+  isRpcError,
+  RpcError,
+  RPCOptions,
+} from '@start9labs/shared'
+import { ApiService, GetErrorRes } from './api.service'
+import { LogsRes, ServerLogsReq } from '@start9labs/shared'
+
+@Injectable()
+export class LiveApiService implements ApiService {
+  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: ServerLogsReq): Promise<LogsRes> {
+    return this.rpcRequest<LogsRes>({
+      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
+  }
+}
--- a/web/projects/diagnostic-ui/src/app/services/api/mock-api.service.ts
+++ b/web/projects/diagnostic-ui/src/app/services/api/mock-api.service.ts
@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core'
+import { pauseFor } from '@start9labs/shared'
+import { ApiService, GetErrorRes } from './api.service'
+import { LogsRes, ServerLogsReq, Log } from '@start9labs/shared'
+
+@Injectable()
+export class MockApiService implements ApiService {
+  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: ServerLogsReq): Promise<LogsRes> {
+    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,
+      'start-cursor': 'startCursor',
+      'end-cursor': 'endCursor',
+    }
+  }
+}
+
+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 *****',
+  },
+]
--- a/web/projects/diagnostic-ui/src/environments/environment.prod.ts
+++ b/web/projects/diagnostic-ui/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+}
--- a/web/projects/diagnostic-ui/src/environments/environment.ts
+++ b/web/projects/diagnostic-ui/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+}
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
--- a/web/projects/diagnostic-ui/src/index.html
+++ b/web/projects/diagnostic-ui/src/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>StartOS Diagnostic UI</title>
+
+    <base href="/" />
+
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+
+    <link rel="icon" type="image/png" href="assets/icon/favicon.ico" />
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
--- a/web/projects/diagnostic-ui/src/main.ts
+++ b/web/projects/diagnostic-ui/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { AppModule } from './app/app.module'
+import { environment } from './environments/environment'
+
+if (environment.production) {
+  enableProdMode()
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch(err => console.error(err))
--- a/web/projects/diagnostic-ui/src/polyfills.ts
+++ b/web/projects/diagnostic-ui/src/polyfills.ts
@@ -0,0 +1,64 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+import './zone-flags'
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone' // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
--- a/web/projects/diagnostic-ui/src/styles.scss
+++ b/web/projects/diagnostic-ui/src/styles.scss
@@ -0,0 +1,41 @@
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: normal;
+  src: url('/assets/fonts/Montserrat/Montserrat-Regular.ttf');
+}
+
+/** Ionic CSS Variables overrides **/
+:root {
+  --ion-font-family: 'Montserrat', sans-serif;
+
+  --ion-color-primary: #0075e1;
+
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152,154,162;
+  --ion-color-medium-contrast: #000000;
+  --ion-color-medium-contrast-rgb: 0,0,0;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34,36,40;
+  --ion-color-light-contrast: #ffffff;
+  --ion-color-light-contrast-rgb: 255,255,255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
+
+  --ion-item-background: #2b2b2b;
+  --ion-toolbar-background: #2b2b2b;
+  --ion-card-background: #2b2b2b;
+
+  --ion-background-color: #282828;
+  --ion-background-color-rgb: 30,30,30;
+  --ion-text-color: var(--ion-color-dark);
+  --ion-text-color-rgb: var(--ion-color-dark-rgb);
+}
+
+.loader {
+  --spinner-color: var(--ion-color-warning) !important;
+  z-index: 40000 !important;
+}
--- a/web/projects/diagnostic-ui/src/zone-flags.ts
+++ b/web/projects/diagnostic-ui/src/zone-flags.ts
@@ -0,0 +1,6 @@
+/**
+ * Prevents Angular change detection from
+ * running with certain Web Component callbacks
+ */
+// eslint-disable-next-line no-underscore-dangle
+(window as any).__Zone_disable_customElements = true
--- a/web/projects/diagnostic-ui/tsconfig.json
+++ b/web/projects/diagnostic-ui/tsconfig.json
@@ -0,0 +1,9 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./"
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
+}
--- a/web/projects/install-wizard/src/app/app-routing.module.ts
+++ b/web/projects/install-wizard/src/app/app-routing.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core'
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router'
+
+const routes: Routes = [
+  {
+    path: '',
+    loadChildren: () =>
+      import('./pages/home/home.module').then(m => m.HomePageModule),
+  },
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, {
+      scrollPositionRestoration: 'enabled',
+      preloadingStrategy: PreloadAllModules,
+      useHash: true,
+    }),
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
--- a/web/projects/install-wizard/src/app/app.component.html
+++ b/web/projects/install-wizard/src/app/app.component.html
@@ -0,0 +1,5 @@
+<tui-root>
+  <ion-app>
+    <ion-router-outlet></ion-router-outlet>
+  </ion-app>
+</tui-root>
--- a/web/projects/install-wizard/src/app/app.component.scss
+++ b/web/projects/install-wizard/src/app/app.component.scss
@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+tui-root {
+  height: 100%;
+}
--- a/web/projects/install-wizard/src/app/app.component.ts
+++ b/web/projects/install-wizard/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
+})
+export class AppComponent {
+  constructor() {}
+}
--- a/web/projects/install-wizard/src/app/app.module.ts
+++ b/web/projects/install-wizard/src/app/app.module.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { RouteReuseStrategy } from '@angular/router'
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular'
+import { TuiRootModule } from '@taiga-ui/core'
+import { AppComponent } from './app.component'
+import { AppRoutingModule } from './app-routing.module'
+import { HttpClientModule } from '@angular/common/http'
+import { ApiService } from './services/api/api.service'
+import { MockApiService } from './services/api/mock-api.service'
+import { LiveApiService } from './services/api/live-api.service'
+import { RELATIVE_URL, WorkspaceConfig } from '@start9labs/shared'
+
+const {
+  useMocks,
+  ui: { api },
+} = require('../../../../config.json') as WorkspaceConfig
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    HttpClientModule,
+    BrowserAnimationsModule,
+    IonicModule.forRoot({
+      mode: 'md',
+    }),
+    AppRoutingModule,
+    TuiRootModule,
+  ],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
+    {
+      provide: ApiService,
+      useClass: useMocks ? MockApiService : LiveApiService,
+    },
+    {
+      provide: RELATIVE_URL,
+      useValue: `/${api.url}/${api.version}`,
+    },
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
--- a/web/projects/install-wizard/src/app/pages/home/home.module.ts
+++ b/web/projects/install-wizard/src/app/pages/home/home.module.ts
@@ -0,0 +1,32 @@
+import { NgModule } from '@angular/core'
+import { RouterModule, Routes } from '@angular/router'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { FormsModule } from '@angular/forms'
+import { HomePage } from './home.page'
+import { SwiperModule } from 'swiper/angular'
+import {
+  UnitConversionPipesModule,
+  GuidPipePipesModule,
+} from '@start9labs/shared'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomePage,
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes),
+    SwiperModule,
+    UnitConversionPipesModule,
+    GuidPipePipesModule,
+  ],
+  declarations: [HomePage],
+})
+export class HomePageModule {}
--- a/web/projects/install-wizard/src/app/pages/home/home.page.html
+++ b/web/projects/install-wizard/src/app/pages/home/home.page.html
@@ -0,0 +1,107 @@
+<ion-content>
+  <ion-grid>
+    <ion-row>
+      <ion-col class="ion-text-center">
+        <div style="padding: 64px 0 32px 0">
+          <img src="assets/img/icon.png" style="max-width: 100px" />
+        </div>
+
+        <ion-card color="dark">
+          <ion-card-header>
+            <ion-button
+              *ngIf="swiper?.activeIndex === 1"
+              class="back-button"
+              fill="clear"
+              color="light"
+              (click)="previous()"
+            >
+              <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
+            </ion-button>
+            <ion-card-title>
+              {{ !swiper || swiper.activeIndex === 0 ? 'Select Disk' : 'Install
+              Type' }}
+            </ion-card-title>
+            <ion-card-subtitle *ngIf="error">
+              <ion-text color="danger">{{ error }}</ion-text>
+            </ion-card-subtitle>
+          </ion-card-header>
+          <ion-card-content class="ion-margin-bottom">
+            <swiper (swiper)="setSwiperInstance($event)">
+              <!-- SLIDE 1 -->
+              <ng-template swiperSlide>
+                <ion-item
+                  *ngFor="let disk of disks"
+                  button
+                  (click)="next(disk)"
+                >
+                  <ion-icon
+                    slot="start"
+                    name="save-outline"
+                    size="large"
+                    color="dark"
+                  ></ion-icon>
+                  <ion-label class="ion-text-wrap">
+                    <h1>
+                      {{ disk.vendor || 'Unknown Vendor' }} - {{ disk.model ||
+                      'Unknown Model' }}
+                    </h1>
+                    <h2>
+                      {{ disk.logicalname }} - {{ disk.capacity | convertBytes
+                      }}
+                    </h2>
+                  </ion-label>
+                </ion-item>
+              </ng-template>
+
+              <!-- SLIDE 2 -->
+              <ng-template swiperSlide>
+                <ng-container *ngIf="selectedDisk">
+                  <!-- re-install -->
+                  <ion-item
+                    *ngIf="selectedDisk | guid"
+                    button
+                    (click)="tryInstall(false)"
+                  >
+                    <ion-icon
+                      color="dark"
+                      slot="start"
+                      size="large"
+                      name="medkit-outline"
+                    ></ion-icon>
+                    <ion-label>
+                      <h1>
+                        <ion-text color="success">Re-Install StartOS</ion-text>
+                      </h1>
+                      <h2>Will preserve existing StartOS data</h2>
+                    </ion-label>
+                  </ion-item>
+
+                  <!-- fresh install -->
+                  <ion-item button lines="none" (click)="tryInstall(true)">
+                    <ion-icon
+                      color="dark"
+                      slot="start"
+                      size="large"
+                      name="download-outline"
+                    ></ion-icon>
+                    <ion-label>
+                      <h1>
+                        <ion-text
+                          [color]="(selectedDisk | guid) ? 'danger' : 'success'"
+                        >
+                          {{ (selectedDisk | guid) ? 'Factory Reset' : 'Install
+                          StartOS' }}
+                        </ion-text>
+                      </h1>
+                      <h2>Will delete existing data on disk</h2>
+                    </ion-label>
+                  </ion-item>
+                </ng-container>
+              </ng-template>
+            </swiper>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>
--- a/web/projects/install-wizard/src/app/pages/home/home.page.scss
+++ b/web/projects/install-wizard/src/app/pages/home/home.page.scss
@@ -0,0 +1,28 @@
+/** Ionic CSS Variables overrides **/
+:root {
+  --ion-font-family: 'Benton Sans', sans-serif;
+}
+
+ion-content {
+  --background: var(--ion-color-medium);
+}
+
+ion-grid {
+  padding-top: 32px;
+  height: 100%;
+  max-width: 640px;
+}
+
+.back-button {
+  position: absolute;
+  left: 16px;
+  top: 24px;
+  z-index: 1000000;
+}
+
+ion-card-title {
+  margin: 16px 0;
+  font-family: 'Montserrat';
+  font-size: x-large;
+  --color: var(--ion-color-light);
+}
--- a/web/projects/install-wizard/src/app/pages/home/home.page.ts
+++ b/web/projects/install-wizard/src/app/pages/home/home.page.ts
@@ -0,0 +1,141 @@
+import { Component } from '@angular/core'
+import { AlertController, IonicSlides, LoadingController } from '@ionic/angular'
+import { ApiService } from 'src/app/services/api/api.service'
+import SwiperCore, { Swiper } from 'swiper'
+import { DiskInfo } from '@start9labs/shared'
+
+SwiperCore.use([IonicSlides])
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+})
+export class HomePage {
+  swiper?: Swiper
+  disks: DiskInfo[] = []
+  selectedDisk?: DiskInfo
+  error = ''
+
+  constructor(
+    private readonly loadingCtrl: LoadingController,
+    private readonly api: ApiService,
+    private readonly alertCtrl: AlertController,
+  ) {}
+
+  async ngOnInit() {
+    this.disks = await this.api.getDisks()
+  }
+
+  async ionViewDidEnter() {
+    if (this.swiper) {
+      this.swiper.allowTouchMove = false
+    }
+  }
+
+  setSwiperInstance(swiper: any) {
+    this.swiper = swiper
+  }
+
+  next(disk: DiskInfo) {
+    this.selectedDisk = disk
+    this.swiper?.slideNext(500)
+  }
+
+  previous() {
+    this.swiper?.slidePrev(500)
+  }
+
+  async tryInstall(overwrite: boolean) {
+    if (overwrite) {
+      return this.presentAlertDanger()
+    }
+
+    this.install(false)
+  }
+
+  private async install(overwrite: boolean) {
+    const loader = await this.loadingCtrl.create({
+      message: 'Installing StartOS...',
+    })
+    await loader.present()
+
+    try {
+      await this.api.install({
+        logicalname: this.selectedDisk!.logicalname,
+        overwrite,
+      })
+      this.presentAlertReboot()
+    } catch (e: any) {
+      this.error = e.message
+    } finally {
+      loader.dismiss()
+    }
+  }
+
+  private async presentAlertDanger() {
+    const { vendor, model } = this.selectedDisk!
+
+    const alert = await this.alertCtrl.create({
+      header: 'Warning',
+      message: `This action will COMPLETELY erase the disk ${
+        vendor || 'Unknown Vendor'
+      } - ${model || 'Unknown Model'} and install StartOS in its place`,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Continue',
+          handler: () => {
+            this.install(true)
+          },
+        },
+      ],
+      cssClass: 'alert-danger-message',
+    })
+    await alert.present()
+  }
+
+  private async presentAlertReboot() {
+    const alert = await this.alertCtrl.create({
+      header: 'Install Success',
+      message:
+        'Remove the USB stick and reboot your device to begin using your new Start9 server',
+      buttons: [
+        {
+          text: 'Reboot',
+          handler: () => {
+            this.reboot()
+          },
+        },
+      ],
+      cssClass: 'alert-success-message',
+    })
+    await alert.present()
+  }
+
+  private async reboot() {
+    const loader = await this.loadingCtrl.create()
+    await loader.present()
+
+    try {
+      await this.api.reboot()
+      this.presentAlertComplete()
+    } catch (e: any) {
+      this.error = e.message
+    } finally {
+      loader.dismiss()
+    }
+  }
+
+  private async presentAlertComplete() {
+    const alert = await this.alertCtrl.create({
+      header: 'Rebooting',
+      message: 'Please wait for StartOS to restart, then refresh this page',
+      buttons: ['OK'],
+    })
+    await alert.present()
+  }
+}
--- a/web/projects/install-wizard/src/app/services/api/api.service.ts
+++ b/web/projects/install-wizard/src/app/services/api/api.service.ts
@@ -0,0 +1,14 @@
+import { DiskInfo } from '@start9labs/shared'
+
+export abstract class ApiService {
+  abstract getDisks(): Promise<GetDisksRes> // install.disk.list
+  abstract install(params: InstallReq): Promise<void> // install.execute
+  abstract reboot(): Promise<void> // install.reboot
+}
+
+export type GetDisksRes = DiskInfo[]
+
+export type InstallReq = {
+  logicalname: string
+  overwrite: boolean
+}
--- a/web/projects/install-wizard/src/app/services/api/live-api.service.ts
+++ b/web/projects/install-wizard/src/app/services/api/live-api.service.ts
@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core'
+import {
+  HttpService,
+  isRpcError,
+  RpcError,
+  RPCOptions,
+} from '@start9labs/shared'
+import { ApiService, GetDisksRes, InstallReq } from './api.service'
+
+@Injectable()
+export class LiveApiService implements ApiService {
+  constructor(private readonly http: HttpService) {}
+
+  async getDisks(): Promise<GetDisksRes> {
+    return this.rpcRequest({
+      method: 'install.disk.list',
+      params: {},
+    })
+  }
+
+  async install(params: InstallReq): Promise<void> {
+    return this.rpcRequest<void>({
+      method: 'install.execute',
+      params,
+    })
+  }
+
+  async reboot(): Promise<void> {
+    return this.rpcRequest<void>({
+      method: 'install.reboot',
+      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
+  }
+}
--- a/web/projects/install-wizard/src/app/services/api/mock-api.service.ts
+++ b/web/projects/install-wizard/src/app/services/api/mock-api.service.ts
@@ -0,0 +1,89 @@
+import { Injectable } from '@angular/core'
+import { pauseFor } from '@start9labs/shared'
+import { ApiService, GetDisksRes, InstallReq } from './api.service'
+
+@Injectable()
+export class MockApiService implements ApiService {
+  async getDisks(): Promise<GetDisksRes> {
+    await pauseFor(500)
+    return [
+      {
+        logicalname: 'abcd',
+        vendor: 'Samsung',
+        model: 'T5',
+        partitions: [
+          {
+            logicalname: 'pabcd',
+            label: null,
+            capacity: 73264762332,
+            used: null,
+            'embassy-os': {
+              version: '0.2.17',
+              full: true,
+              'password-hash':
+                '$argon2d$v=19$m=1024,t=1,p=1$YXNkZmFzZGZhc2RmYXNkZg$Ceev1I901G6UwU+hY0sHrFZ56D+o+LNJ',
+              'wrapped-key': null,
+            },
+            guid: null,
+          },
+        ],
+        capacity: 123456789123,
+        guid: 'uuid-uuid-uuid-uuid',
+      },
+      {
+        logicalname: 'dcba',
+        vendor: 'Crucial',
+        model: 'MX500',
+        partitions: [
+          {
+            logicalname: 'pbcba',
+            label: null,
+            capacity: 73264762332,
+            used: null,
+            'embassy-os': {
+              version: '0.3.3',
+              full: true,
+              'password-hash':
+                '$argon2d$v=19$m=1024,t=1,p=1$YXNkZmFzZGZhc2RmYXNkZg$Ceev1I901G6UwU+hY0sHrFZ56D+o+LNJ',
+              'wrapped-key': null,
+            },
+            guid: null,
+          },
+        ],
+        capacity: 124456789123,
+        guid: null,
+      },
+      {
+        logicalname: 'wxyz',
+        vendor: 'SanDisk',
+        model: 'Specialness',
+        partitions: [
+          {
+            logicalname: 'pbcba',
+            label: null,
+            capacity: 73264762332,
+            used: null,
+            'embassy-os': {
+              version: '0.3.2',
+              full: true,
+              'password-hash':
+                '$argon2d$v=19$m=1024,t=1,p=1$YXNkZmFzZGZhc2RmYXNkZg$Ceev1I901G6UwU+hY0sHrFZ56D+o+LNJ',
+              'wrapped-key': null,
+            },
+            guid: 'guid-guid-guid-guid',
+          },
+        ],
+        capacity: 123459789123,
+        guid: null,
+      },
+    ]
+  }
+
+  async install(params: InstallReq): Promise<void> {
+    await pauseFor(1000)
+  }
+
+  async reboot(): Promise<void> {
+    await pauseFor(1000)
+  }
+}
--- a/web/projects/install-wizard/src/environments/environment.prod.ts
+++ b/web/projects/install-wizard/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+}
--- a/web/projects/install-wizard/src/environments/environment.ts
+++ b/web/projects/install-wizard/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false,
+}
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
--- a/web/projects/install-wizard/src/index.html
+++ b/web/projects/install-wizard/src/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>StartOS Install Wizard</title>
+
+    <base href="/" />
+
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
+
+    <link rel="icon" type="image/png" href="assets/icon/favicon.ico" />
+  </head>
+
+  <body>
+    <app-root></app-root>
+  </body>
+</html>
--- a/web/projects/install-wizard/src/main.ts
+++ b/web/projects/install-wizard/src/main.ts
@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { AppModule } from './app/app.module'
+import { environment } from './environments/environment'
+
+if (environment.production) {
+  enableProdMode()
+}
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch(err => console.error(err))
--- a/web/projects/install-wizard/src/polyfills.ts
+++ b/web/projects/install-wizard/src/polyfills.ts
@@ -0,0 +1,64 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+import './zone-flags'
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone' // Included with Angular CLI.
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
--- a/web/projects/install-wizard/src/styles.scss
+++ b/web/projects/install-wizard/src/styles.scss
@@ -0,0 +1,59 @@
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: normal;
+  src: url('/assets/fonts/Montserrat/Montserrat-Regular.ttf');
+}
+
+/** Ionic CSS Variables overrides **/
+:root {
+  --ion-font-family: 'Montserrat', sans-serif;
+
+  --ion-color-primary: #0075e1;
+
+  --ion-color-medium: #989aa2;
+  --ion-color-medium-rgb: 152,154,162;
+  --ion-color-medium-contrast: #000000;
+  --ion-color-medium-contrast-rgb: 0,0,0;
+  --ion-color-medium-shade: #86888f;
+  --ion-color-medium-tint: #a2a4ab;
+
+  --ion-color-light: #222428;
+  --ion-color-light-rgb: 34,36,40;
+  --ion-color-light-contrast: #ffffff;
+  --ion-color-light-contrast-rgb: 255,255,255;
+  --ion-color-light-shade: #1e2023;
+  --ion-color-light-tint: #383a3e;
+
+  --ion-item-background: #2b2b2b;
+  --ion-toolbar-background: #2b2b2b;
+  --ion-card-background: #2b2b2b;
+
+  --ion-background-color: #282828;
+  --ion-background-color-rgb: 30,30,30;
+  --ion-text-color: var(--ion-color-dark);
+  --ion-text-color-rgb: var(--ion-color-dark-rgb);
+}
+
+.loader {
+  --spinner-color: var(--ion-color-warning) !important;
+  z-index: 40000 !important;
+}
+
+.alert-danger-message {
+  .alert-title {
+    color: var(--ion-color-danger);
+  }
+}
+
+.alert-success-message {
+  .alert-title {
+    color: var(--ion-color-success);
+  }
+}
+
+ion-alert {
+  .alert-button {
+    color: var(--ion-color-dark) !important;
+  }
+}
--- a/web/projects/install-wizard/src/zone-flags.ts
+++ b/web/projects/install-wizard/src/zone-flags.ts
@@ -0,0 +1,6 @@
+/**
+ * Prevents Angular change detection from
+ * running with certain Web Component callbacks
+ */
+// eslint-disable-next-line no-underscore-dangle
+(window as any).__Zone_disable_customElements = true
--- a/web/projects/install-wizard/tsconfig.json
+++ b/web/projects/install-wizard/tsconfig.json
@@ -0,0 +1,9 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./"
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
+}
--- a/web/projects/marketplace/ng-package.json
+++ b/web/projects/marketplace/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/marketplace",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
--- a/web/projects/marketplace/package.json
+++ b/web/projects/marketplace/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@start9labs/marketplace",
+  "version": "0.3.11",
+  "peerDependencies": {
+    "@angular/common": ">=13.2.0",
+    "@angular/core": ">=13.2.0",
+    "@ionic/angular": ">=6.0.0",
+    "@start9labs/shared": ">=0.3.0",
+    "@taiga-ui/cdk": ">=3.0.0",
+    "fuse.js": "^6.4.6"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}
--- a/web/projects/marketplace/src/pages/list/categories/categories.component.html
+++ b/web/projects/marketplace/src/pages/list/categories/categories.component.html
@@ -0,0 +1,9 @@
+<ion-button
+  *ngFor="let cat of categories"
+  fill="clear"
+  class="category"
+  [class.category_selected]="cat === category"
+  (click)="switchCategory(cat)"
+>
+  {{ cat }}
+</ion-button>
--- a/web/projects/marketplace/src/pages/list/categories/categories.component.scss
+++ b/web/projects/marketplace/src/pages/list/categories/categories.component.scss
@@ -0,0 +1,14 @@
+:host {
+  display: block;
+}
+
+.category {
+  font-weight: 300;
+  color: var(--ion-color-dark-shade);
+
+  &_selected {
+    font-weight: bold;
+    font-size: 17px;
+    color: var(--color);
+  }
+}
--- a/web/projects/marketplace/src/pages/list/categories/categories.component.ts
+++ b/web/projects/marketplace/src/pages/list/categories/categories.component.ts
@@ -0,0 +1,32 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+
+@Component({
+  selector: 'marketplace-categories',
+  templateUrl: 'categories.component.html',
+  styleUrls: ['categories.component.scss'],
+  host: {
+    class: 'hidden-scrollbar ion-text-center',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CategoriesComponent {
+  @Input()
+  categories: readonly string[] = []
+
+  @Input()
+  category = ''
+
+  @Output()
+  readonly categoryChange = new EventEmitter<string>()
+
+  switchCategory(category: string): void {
+    this.category = category
+    this.categoryChange.emit(category)
+  }
+}
--- a/web/projects/marketplace/src/pages/list/categories/categories.module.ts
+++ b/web/projects/marketplace/src/pages/list/categories/categories.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { IonicModule } from '@ionic/angular'
+
+import { CategoriesComponent } from './categories.component'
+
+@NgModule({
+  imports: [CommonModule, IonicModule],
+  declarations: [CategoriesComponent],
+  exports: [CategoriesComponent],
+})
+export class CategoriesModule {}
--- a/web/projects/marketplace/src/pages/list/item/item.component.html
+++ b/web/projects/marketplace/src/pages/list/item/item.component.html
@@ -0,0 +1,12 @@
+<ion-item class="service-card" [routerLink]="['/marketplace', pkg.manifest.id]">
+  <ion-thumbnail slot="start">
+    <img alt="" [src]="pkg | mimeType | trustUrl" />
+  </ion-thumbnail>
+  <ion-label>
+    <h2 class="montserrat">
+      <strong>{{ pkg.manifest.title }}</strong>
+    </h2>
+    <h3>{{ pkg.manifest.description.short }}</h3>
+    <ng-content></ng-content>
+  </ion-label>
+</ion-item>
--- a/web/projects/marketplace/src/pages/list/item/item.component.ts
+++ b/web/projects/marketplace/src/pages/list/item/item.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { MarketplacePkg } from '../../../types'
+
+@Component({
+  selector: 'marketplace-item',
+  templateUrl: 'item.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemComponent {
+  @Input()
+  pkg!: MarketplacePkg
+}
--- a/web/projects/marketplace/src/pages/list/item/item.module.ts
+++ b/web/projects/marketplace/src/pages/list/item/item.module.ts
@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { IonicModule } from '@ionic/angular'
+import { RouterModule } from '@angular/router'
+import { SharedPipesModule } from '@start9labs/shared'
+import { ItemComponent } from './item.component'
+import { MimeTypePipeModule } from '../../../pipes/mime-type.pipe'
+
+@NgModule({
+  declarations: [ItemComponent],
+  exports: [ItemComponent],
+  imports: [
+    CommonModule,
+    IonicModule,
+    RouterModule,
+    SharedPipesModule,
+    MimeTypePipeModule,
+  ],
+})
+export class ItemModule {}
--- a/web/projects/marketplace/src/pages/list/search/search.component.html
+++ b/web/projects/marketplace/src/pages/list/search/search.component.html
@@ -0,0 +1,14 @@
+<ion-grid>
+  <ion-row>
+    <ion-col responsiveCol class="column" sizeSm="8" sizeLg="6">
+      <ion-toolbar color="transparent" class="ion-text-left">
+        <ion-searchbar
+          [color]="(theme$ | async) === 'Light' ? 'light' : 'dark'"
+          debounce="250"
+          [ngModel]="query"
+          (ngModelChange)="onModelChange($event)"
+        ></ion-searchbar>
+      </ion-toolbar>
+    </ion-col>
+  </ion-row>
+</ion-grid>
--- a/web/projects/marketplace/src/pages/list/search/search.component.scss
+++ b/web/projects/marketplace/src/pages/list/search/search.component.scss
@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  padding-bottom: 32px;
+}
+
+.column {
+  margin: 0 auto;
+}
--- a/web/projects/marketplace/src/pages/list/search/search.component.ts
+++ b/web/projects/marketplace/src/pages/list/search/search.component.ts
@@ -0,0 +1,30 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from '@angular/core'
+import { THEME } from '@start9labs/shared'
+
+@Component({
+  selector: 'marketplace-search',
+  templateUrl: 'search.component.html',
+  styleUrls: ['search.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SearchComponent {
+  @Input()
+  query = ''
+
+  @Output()
+  readonly queryChange = new EventEmitter<string>()
+
+  readonly theme$ = inject(THEME)
+
+  onModelChange(query: string) {
+    this.query = query
+    this.queryChange.emit(query)
+  }
+}
--- a/web/projects/marketplace/src/pages/list/search/search.module.ts
+++ b/web/projects/marketplace/src/pages/list/search/search.module.ts
@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { IonicModule } from '@ionic/angular'
+import { ResponsiveColModule } from '@start9labs/shared'
+
+import { SearchComponent } from './search.component'
+
+@NgModule({
+  imports: [IonicModule, FormsModule, CommonModule, ResponsiveColModule],
+  declarations: [SearchComponent],
+  exports: [SearchComponent],
+})
+export class SearchModule {}
--- a/web/projects/marketplace/src/pages/list/skeleton/skeleton.component.html
+++ b/web/projects/marketplace/src/pages/list/skeleton/skeleton.component.html
@@ -0,0 +1,39 @@
+<div class="hidden-scrollbar ion-text-center">
+  <ion-button *ngFor="let cat of ['', '', '', '', '', '', '']" fill="clear">
+    <ion-skeleton-text
+      animated
+      style="width: 80px; border-radius: 0"
+    ></ion-skeleton-text>
+  </ion-button>
+</div>
+
+<div class="divider" style="margin: 24px 0"></div>
+
+<ion-grid>
+  <ion-row>
+    <ion-col
+      *ngFor="let pkg of ['', '', '', '']"
+      responsiveCol
+      sizeXs="12"
+      sizeSm="12"
+      sizeMd="6"
+    >
+      <ion-item>
+        <ion-thumbnail slot="start">
+          <ion-skeleton-text
+            style="border-radius: 100%"
+            animated
+          ></ion-skeleton-text>
+        </ion-thumbnail>
+        <ion-label>
+          <ion-skeleton-text
+            animated
+            style="width: 150px; height: 18px; margin-bottom: 8px"
+          ></ion-skeleton-text>
+          <ion-skeleton-text animated style="width: 400px"></ion-skeleton-text>
+          <ion-skeleton-text animated style="width: 100px"></ion-skeleton-text>
+        </ion-label>
+      </ion-item>
+    </ion-col>
+  </ion-row>
+</ion-grid>
--- a/web/projects/marketplace/src/pages/list/skeleton/skeleton.component.ts
+++ b/web/projects/marketplace/src/pages/list/skeleton/skeleton.component.ts
@@ -0,0 +1,8 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core'
+
+@Component({
+  selector: 'marketplace-skeleton',
+  templateUrl: 'skeleton.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SkeletonComponent {}
--- a/web/projects/marketplace/src/pages/list/skeleton/skeleton.module.ts
+++ b/web/projects/marketplace/src/pages/list/skeleton/skeleton.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { IonicModule } from '@ionic/angular'
+import { ResponsiveColModule } from '@start9labs/shared'
+
+import { SkeletonComponent } from './skeleton.component'
+
+@NgModule({
+  imports: [CommonModule, IonicModule, ResponsiveColModule],
+  declarations: [SkeletonComponent],
+  exports: [SkeletonComponent],
+})
+export class SkeletonModule {}
--- a/web/projects/marketplace/src/pages/release-notes/release-notes.component.html
+++ b/web/projects/marketplace/src/pages/release-notes/release-notes.component.html
@@ -0,0 +1,32 @@
+<ion-content class="with-widgets">
+  <ng-container *ngIf="notes$ | async as notes; else loading">
+    <div *ngFor="let note of notes | keyvalue: asIsOrder">
+      <ion-button
+        expand="full"
+        color="light"
+        class="version-button"
+        [class.ion-activated]="isSelected(note.key)"
+        (click)="setSelected(note.key)"
+      >
+        <p class="version">{{ note.key | displayEmver }}</p>
+      </ion-button>
+      <ion-card
+        tuiElement
+        #element="elementRef"
+        class="panel"
+        color="light"
+        [id]="note.key"
+        [style.maxHeight.px]="getDocSize(note.key, element)"
+      >
+        <ion-text
+          id="release-notes"
+          [innerHTML]="note.value | markdown"
+        ></ion-text>
+      </ion-card>
+    </div>
+  </ng-container>
+
+  <ng-template #loading>
+    <text-spinner text="Loading Release Notes"></text-spinner>
+  </ng-template>
+</ion-content>
--- a/web/projects/marketplace/src/pages/release-notes/release-notes.component.scss
+++ b/web/projects/marketplace/src/pages/release-notes/release-notes.component.scss
@@ -0,0 +1,23 @@
+:host {
+  flex: 1 1 0;
+}
+
+.panel {
+  margin: 0;
+  padding: 0 24px;
+  transition: max-height 0.2s ease-out;
+}
+
+.active {
+  border: 5px solid #4d4d4d;
+}
+
+.version-button {
+  height: 50px;
+  margin: 1px;
+}
+
+.version {
+  position: absolute;
+  left: 10px;
+}
--- a/web/projects/marketplace/src/pages/release-notes/release-notes.component.ts
+++ b/web/projects/marketplace/src/pages/release-notes/release-notes.component.ts
@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, ElementRef } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { getPkgId } from '@start9labs/shared'
+import { AbstractMarketplaceService } from '../../services/marketplace.service'
+
+@Component({
+  selector: 'release-notes',
+  templateUrl: './release-notes.component.html',
+  styleUrls: ['./release-notes.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReleaseNotesComponent {
+  private readonly pkgId = getPkgId(this.route)
+
+  private selected: string | null = null
+
+  readonly notes$ = this.marketplaceService.fetchReleaseNotes$(this.pkgId)
+
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly marketplaceService: AbstractMarketplaceService,
+  ) {}
+
+  isSelected(key: string): boolean {
+    return this.selected === key
+  }
+
+  setSelected(selected: string) {
+    this.selected = this.isSelected(selected) ? null : selected
+  }
+
+  getDocSize(key: string, { nativeElement }: ElementRef<HTMLElement>) {
+    return this.isSelected(key) ? nativeElement.scrollHeight : 0
+  }
+
+  asIsOrder(a: any, b: any) {
+    return 0
+  }
+}
--- a/web/projects/marketplace/src/pages/release-notes/release-notes.module.ts
+++ b/web/projects/marketplace/src/pages/release-notes/release-notes.module.ts
@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import {
+  EmverPipesModule,
+  MarkdownPipeModule,
+  TextSpinnerComponentModule,
+} from '@start9labs/shared'
+import { TuiElementModule } from '@taiga-ui/cdk'
+
+import { ReleaseNotesComponent } from './release-notes.component'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    TextSpinnerComponentModule,
+    EmverPipesModule,
+    MarkdownPipeModule,
+    TuiElementModule,
+  ],
+  declarations: [ReleaseNotesComponent],
+  exports: [ReleaseNotesComponent],
+})
+export class ReleaseNotesModule {}
--- a/web/projects/marketplace/src/pages/show/about/about.component.html
+++ b/web/projects/marketplace/src/pages/show/about/about.component.html
@@ -0,0 +1,29 @@
+<!-- release notes -->
+<ion-item-divider>
+  New in {{ pkg.manifest.version | displayEmver }}
+</ion-item-divider>
+<ion-item lines="none" color="transparent">
+  <ion-label>
+    <div [innerHTML]="pkg.manifest['release-notes'] | markdown"></div>
+  </ion-label>
+</ion-item>
+<ion-button routerLink="notes" fill="clear" strong>
+  Past Release Notes
+  <ion-icon slot="end" name="arrow-forward"></ion-icon>
+</ion-button>
+<!-- description -->
+<ion-item-divider>Description</ion-item-divider>
+<ion-item lines="none" color="transparent">
+  <ion-label>
+    <h2>{{ pkg.manifest.description.long }}</h2>
+  </ion-label>
+</ion-item>
+<div
+  *ngIf="pkg.manifest['marketing-site'] as url"
+  style="padding: 4px 0 10px 14px"
+>
+  <ion-button [href]="url" target="_blank" rel="noreferrer" color="tertiary">
+    View website
+    <ion-icon slot="end" name="open-outline"></ion-icon>
+  </ion-button>
+</div>
--- a/web/projects/marketplace/src/pages/show/about/about.component.scss
+++ b/web/projects/marketplace/src/pages/show/about/about.component.scss
--- a/web/projects/marketplace/src/pages/show/about/about.component.ts
+++ b/web/projects/marketplace/src/pages/show/about/about.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { MarketplacePkg } from '../../../types'
+
+@Component({
+  selector: 'marketplace-about',
+  templateUrl: 'about.component.html',
+  styleUrls: ['about.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AboutComponent {
+  @Input()
+  pkg!: MarketplacePkg
+}
--- a/web/projects/marketplace/src/pages/show/about/about.module.ts
+++ b/web/projects/marketplace/src/pages/show/about/about.module.ts
@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { IonicModule } from '@ionic/angular'
+import { EmverPipesModule, MarkdownPipeModule } from '@start9labs/shared'
+
+import { AboutComponent } from './about.component'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+    IonicModule,
+    MarkdownPipeModule,
+    EmverPipesModule,
+  ],
+  declarations: [AboutComponent],
+  exports: [AboutComponent],
+})
+export class AboutModule {}
--- a/web/projects/marketplace/src/pages/show/additional/additional.component.html
+++ b/web/projects/marketplace/src/pages/show/additional/additional.component.html
@@ -0,0 +1,106 @@
+<ng-container *ngIf="pkg.manifest.replaces as replaces">
+  <div *ngIf="replaces.length" class="ion-padding-bottom">
+    <ion-item-divider>Intended to replace</ion-item-divider>
+    <ul>
+      <li *ngFor="let app of replaces">
+        {{ app }}
+      </li>
+    </ul>
+  </div>
+</ng-container>
+
+<ion-item-divider>Additional Info</ion-item-divider>
+<ion-grid *ngIf="pkg.manifest as manifest">
+  <ion-row>
+    <ion-col responsiveCol sizeXs="12" sizeMd="6">
+      <ion-item-group>
+        <ion-item
+          *ngIf="manifest['git-hash'] as gitHash; else noHash"
+          button
+          detail="false"
+          (click)="copy(gitHash)"
+        >
+          <ion-label>
+            <h2>Git Hash</h2>
+            <p>{{ gitHash }}</p>
+          </ion-label>
+          <ion-icon slot="end" name="copy-outline"></ion-icon>
+        </ion-item>
+        <ng-template #noHash>
+          <ion-item>
+            <ion-label>
+              <h2>Git Hash</h2>
+              <p>Unknown</p>
+            </ion-label>
+          </ion-item>
+        </ng-template>
+        <ion-item button detail="false" (click)="presentAlertVersions()">
+          <ion-label>
+            <h2>Other Versions</h2>
+            <p>Click to view other versions</p>
+          </ion-label>
+          <ion-icon slot="end" name="chevron-forward"></ion-icon>
+        </ion-item>
+        <ion-item button detail="false" (click)="presentModalMd('license')">
+          <ion-label>
+            <h2>License</h2>
+            <p>{{ manifest.license }}</p>
+          </ion-label>
+          <ion-icon slot="end" name="chevron-forward"></ion-icon>
+        </ion-item>
+        <ion-item
+          button
+          detail="false"
+          (click)="presentModalMd('instructions')"
+        >
+          <ion-label>
+            <h2>Instructions</h2>
+            <p>Click to view instructions</p>
+          </ion-label>
+          <ion-icon slot="end" name="chevron-forward"></ion-icon>
+        </ion-item>
+      </ion-item-group>
+    </ion-col>
+    <ion-col responsiveCol sizeXs="12" sizeMd="6">
+      <ion-item-group>
+        <ion-item
+          [href]="manifest['upstream-repo']"
+          target="_blank"
+          rel="noreferrer"
+          detail="false"
+        >
+          <ion-label>
+            <h2>Source Repository</h2>
+            <p>{{ manifest['upstream-repo'] }}</p>
+          </ion-label>
+          <ion-icon slot="end" name="open-outline"></ion-icon>
+        </ion-item>
+        <ion-item
+          [href]="manifest['wrapper-repo']"
+          target="_blank"
+          rel="noreferrer"
+          detail="false"
+        >
+          <ion-label>
+            <h2>Wrapper Repository</h2>
+            <p>{{ manifest['wrapper-repo'] }}</p>
+          </ion-label>
+          <ion-icon slot="end" name="open-outline"></ion-icon>
+        </ion-item>
+        <ion-item
+          [href]="manifest['support-site']"
+          [disabled]="!manifest['support-site']"
+          target="_blank"
+          rel="noreferrer"
+          detail="false"
+        >
+          <ion-label>
+            <h2>Support Site</h2>
+            <p>{{ manifest['support-site'] || 'Not provided' }}</p>
+          </ion-label>
+          <ion-icon slot="end" name="open-outline"></ion-icon>
+        </ion-item>
+      </ion-item-group>
+    </ion-col>
+  </ion-row>
+</ion-grid>
--- a/web/projects/marketplace/src/pages/show/additional/additional.component.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional.component.ts
@@ -0,0 +1,101 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import {
+  AlertController,
+  ModalController,
+  ToastController,
+} from '@ionic/angular'
+import {
+  copyToClipboard,
+  displayEmver,
+  Emver,
+  MarkdownComponent,
+} from '@start9labs/shared'
+import { MarketplacePkg } from '../../../types'
+import { AbstractMarketplaceService } from '../../../services/marketplace.service'
+import { ActivatedRoute } from '@angular/router'
+
+@Component({
+  selector: 'marketplace-additional',
+  templateUrl: 'additional.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AdditionalComponent {
+  @Input()
+  pkg!: MarketplacePkg
+
+  @Output()
+  version = new EventEmitter<string>()
+
+  readonly url = this.route.snapshot.queryParamMap.get('url') || undefined
+
+  constructor(
+    private readonly alertCtrl: AlertController,
+    private readonly modalCtrl: ModalController,
+    private readonly emver: Emver,
+    private readonly marketplaceService: AbstractMarketplaceService,
+    private readonly toastCtrl: ToastController,
+    private readonly route: ActivatedRoute,
+  ) {}
+
+  async copy(address: string): Promise<void> {
+    const success = await copyToClipboard(address)
+    const message = success
+      ? 'Copied to clipboard!'
+      : 'Failed to copy to clipboard.'
+
+    const toast = await this.toastCtrl.create({
+      header: message,
+      position: 'bottom',
+      duration: 1000,
+    })
+    await toast.present()
+  }
+
+  async presentAlertVersions() {
+    const alert = await this.alertCtrl.create({
+      header: 'Versions',
+      inputs: this.pkg.versions
+        .sort((a, b) => -1 * (this.emver.compare(a, b) || 0))
+        .map(v => ({
+          name: v, // for CSS
+          type: 'radio',
+          label: displayEmver(v), // appearance on screen
+          value: v, // literal SEM version value
+          checked: this.pkg.manifest.version === v,
+        })),
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Ok',
+          handler: (version: string) => this.version.emit(version),
+        },
+      ],
+    })
+
+    await alert.present()
+  }
+
+  async presentModalMd(title: string) {
+    const content = this.marketplaceService.fetchStatic$(
+      this.pkg.manifest.id,
+      title,
+      this.url,
+    )
+
+    const modal = await this.modalCtrl.create({
+      componentProps: { title, content },
+      component: MarkdownComponent,
+    })
+
+    await modal.present()
+  }
+}
--- a/web/projects/marketplace/src/pages/show/additional/additional.module.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { IonicModule } from '@ionic/angular'
+import { MarkdownModule, ResponsiveColModule } from '@start9labs/shared'
+
+import { AdditionalComponent } from './additional.component'
+
+@NgModule({
+  imports: [CommonModule, IonicModule, MarkdownModule, ResponsiveColModule],
+  declarations: [AdditionalComponent],
+  exports: [AdditionalComponent],
+})
+export class AdditionalModule {}
--- a/web/projects/marketplace/src/pages/show/dependencies/dependencies.component.html
+++ b/web/projects/marketplace/src/pages/show/dependencies/dependencies.component.html
@@ -0,0 +1,35 @@
+<ion-item-divider>Dependencies</ion-item-divider>
+<ion-grid>
+  <ion-row>
+    <ion-col
+      *ngFor="let dep of pkg.manifest.dependencies | keyvalue"
+      responsiveCol
+      sizeSm="12"
+      sizeMd="6"
+    >
+      <ion-item [routerLink]="['/marketplace', dep.key]">
+        <ion-thumbnail slot="start">
+          <img
+            alt=""
+            style="border-radius: 100%"
+            [src]="getImg(dep.key) | trustUrl"
+          />
+        </ion-thumbnail>
+        <ion-label>
+          <h2>
+            {{ pkg['dependency-metadata'][dep.key].title }}
+            <ng-container [ngSwitch]="dep.value.requirement.type">
+              <span *ngSwitchCase="'required'">(required)</span>
+              <span *ngSwitchCase="'opt-out'">(required by default)</span>
+              <span *ngSwitchCase="'opt-in'">(optional)</span>
+            </ng-container>
+          </h2>
+          <p>
+            <small>{{ dep.value.version | displayEmver }}</small>
+          </p>
+          <p>{{ dep.value.description }}</p>
+        </ion-label>
+      </ion-item>
+    </ion-col>
+  </ion-row>
+</ion-grid>
--- a/web/projects/marketplace/src/pages/show/dependencies/dependencies.component.ts
+++ b/web/projects/marketplace/src/pages/show/dependencies/dependencies.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { MarketplacePkg } from '../../../types'
+
+@Component({
+  selector: 'marketplace-dependencies',
+  templateUrl: 'dependencies.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DependenciesComponent {
+  @Input()
+  pkg!: MarketplacePkg
+
+  getImg(key: string): string {
+    // @TODO fix when registry api is updated to include mimetype in icon url
+    return 'data:image/png;base64,' + this.pkg['dependency-metadata'][key].icon
+  }
+}
--- a/web/projects/marketplace/src/pages/show/dependencies/dependencies.module.ts
+++ b/web/projects/marketplace/src/pages/show/dependencies/dependencies.module.ts
@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { RouterModule } from '@angular/router'
+import { IonicModule } from '@ionic/angular'
+import {
+  EmverPipesModule,
+  ResponsiveColModule,
+  SharedPipesModule,
+} from '@start9labs/shared'
+
+import { DependenciesComponent } from './dependencies.component'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+    IonicModule,
+    SharedPipesModule,
+    EmverPipesModule,
+    ResponsiveColModule,
+  ],
+  declarations: [DependenciesComponent],
+  exports: [DependenciesComponent],
+})
+export class DependenciesModule {}
--- a/web/projects/marketplace/src/pages/show/package/package.component.html
+++ b/web/projects/marketplace/src/pages/show/package/package.component.html
@@ -0,0 +1,11 @@
+<div class="header montserrat">
+  <img class="logo" alt="" [src]="pkg | mimeType | trustUrl" />
+  <div class="text">
+    <h1 ticker class="title">{{ pkg.manifest.title }}</h1>
+    <p class="version">{{ pkg.manifest.version | displayEmver }}</p>
+    <p *ngIf="pkg['published-at'] as published" class="published">
+      Released: {{ published | date : 'medium' }}
+    </p>
+    <ng-content></ng-content>
+  </div>
+</div>
--- a/web/projects/marketplace/src/pages/show/package/package.component.scss
+++ b/web/projects/marketplace/src/pages/show/package/package.component.scss
@@ -0,0 +1,47 @@
+.header {
+  display: flex;
+  align-items: flex-start;
+  padding: 16px;
+}
+
+.text {
+  display: inline-block;
+  vertical-align: top;
+  overflow: hidden;
+}
+
+.logo {
+  width: 80px;
+  margin-right: 16px;
+  border-radius: 100%;
+}
+
+.title {
+  margin: 0 0 0 -2px;
+  font-size: 36px;
+}
+
+.version {
+  margin: 0;
+  font-size: 18px;
+}
+
+.published {
+  margin: 0;
+  padding: 4px 0 12px 0;
+  font-style: italic;
+}
+
+@media (min-width: 1000px) {
+  .logo {
+    width: 140px;
+  }
+
+  .title {
+    font-size: 64px;
+  }
+
+  .version {
+    font-size: 32px;
+  }
+}
--- a/web/projects/marketplace/src/pages/show/package/package.component.ts
+++ b/web/projects/marketplace/src/pages/show/package/package.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { MarketplacePkg } from '../../../types'
+
+@Component({
+  selector: 'marketplace-package',
+  templateUrl: 'package.component.html',
+  styleUrls: ['package.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PackageComponent {
+  @Input()
+  pkg!: MarketplacePkg
+}
--- a/web/projects/marketplace/src/pages/show/package/package.module.ts
+++ b/web/projects/marketplace/src/pages/show/package/package.module.ts
@@ -0,0 +1,25 @@
+import { CommonModule } from '@angular/common'
+import { NgModule } from '@angular/core'
+import { IonicModule } from '@ionic/angular'
+import {
+  EmverPipesModule,
+  SharedPipesModule,
+  TickerModule,
+} from '@start9labs/shared'
+
+import { PackageComponent } from './package.component'
+import { MimeTypePipeModule } from '../../../pipes/mime-type.pipe'
+
+@NgModule({
+  declarations: [PackageComponent],
+  exports: [PackageComponent],
+  imports: [
+    CommonModule,
+    IonicModule,
+    SharedPipesModule,
+    EmverPipesModule,
+    TickerModule,
+    MimeTypePipeModule,
+  ],
+})
+export class PackageModule {}
--- a/web/projects/marketplace/src/pipes/filter-packages.pipe.ts
+++ b/web/projects/marketplace/src/pipes/filter-packages.pipe.ts
@@ -0,0 +1,85 @@
+import { NgModule, Pipe, PipeTransform } from '@angular/core'
+import { MarketplacePkg } from '../types'
+import Fuse from 'fuse.js'
+
+@Pipe({
+  name: 'filterPackages',
+})
+export class FilterPackagesPipe implements PipeTransform {
+  transform(
+    packages: MarketplacePkg[],
+    query: string,
+    category: string,
+  ): MarketplacePkg[] {
+    // query
+    if (query) {
+      let options: Fuse.IFuseOptions<MarketplacePkg> = {
+        includeScore: true,
+        includeMatches: true,
+      }
+
+      if (query.length < 4) {
+        options = {
+          ...options,
+          threshold: 0.2,
+          location: 0,
+          distance: 16,
+          keys: [
+            {
+              name: 'manifest.title',
+              weight: 1,
+            },
+            {
+              name: 'manifest.id',
+              weight: 0.5,
+            },
+          ],
+        }
+      } else {
+        options = {
+          ...options,
+          ignoreLocation: true,
+          useExtendedSearch: true,
+          keys: [
+            {
+              name: 'manifest.title',
+              weight: 1,
+            },
+            {
+              name: 'manifest.id',
+              weight: 0.5,
+            },
+            {
+              name: 'manifest.description.short',
+              weight: 0.4,
+            },
+            {
+              name: 'manifest.description.long',
+              weight: 0.1,
+            },
+          ],
+        }
+        query = `'${query}`
+      }
+
+      const fuse = new Fuse(packages, options)
+      return fuse.search(query).map(p => p.item)
+    }
+
+    // category
+    return packages
+      .filter(p => category === 'all' || p.categories.includes(category))
+      .sort((a, b) => {
+        return (
+          new Date(b['published-at']).valueOf() -
+          new Date(a['published-at']).valueOf()
+        )
+      })
+  }
+}
+
+@NgModule({
+  declarations: [FilterPackagesPipe],
+  exports: [FilterPackagesPipe],
+})
+export class FilterPackagesPipeModule {}
--- a/web/projects/marketplace/src/pipes/mime-type.pipe.ts
+++ b/web/projects/marketplace/src/pipes/mime-type.pipe.ts
@@ -0,0 +1,32 @@
+import { NgModule, Pipe, PipeTransform } from '@angular/core'
+import { MarketplacePkg } from '../types'
+
+@Pipe({
+  name: 'mimeType',
+})
+export class MimeTypePipe implements PipeTransform {
+  transform(pkg: MarketplacePkg): string {
+    if (pkg.manifest.assets.icon) {
+      switch (pkg.manifest.assets.icon.split('.').pop()) {
+        case 'png':
+          return `data:image/png;base64,${pkg.icon}`
+        case 'jpeg':
+        case 'jpg':
+          return `data:image/jpeg;base64,${pkg.icon}`
+        case 'gif':
+          return `data:image/gif;base64,${pkg.icon}`
+        case 'svg':
+          return `data:image/svg+xml;base64,${pkg.icon}`
+        default:
+          return `data:image/png;base64,${pkg.icon}`
+      }
+    }
+    return `data:image/png;base64,${pkg.icon}`
+  }
+}
+
+@NgModule({
+  declarations: [MimeTypePipe],
+  exports: [MimeTypePipe],
+})
+export class MimeTypePipeModule {}
--- a/web/projects/marketplace/src/public-api.ts
+++ b/web/projects/marketplace/src/public-api.ts
@@ -0,0 +1,29 @@
+/*
+ * Public API Surface of @start9labs/marketplace
+ */
+
+export * from './pages/list/categories/categories.component'
+export * from './pages/list/categories/categories.module'
+export * from './pages/list/item/item.component'
+export * from './pages/list/item/item.module'
+export * from './pages/list/search/search.component'
+export * from './pages/list/search/search.module'
+export * from './pages/list/skeleton/skeleton.component'
+export * from './pages/list/skeleton/skeleton.module'
+export * from './pages/release-notes/release-notes.component'
+export * from './pages/release-notes/release-notes.module'
+export * from './pages/show/about/about.component'
+export * from './pages/show/about/about.module'
+export * from './pages/show/additional/additional.component'
+export * from './pages/show/additional/additional.module'
+export * from './pages/show/dependencies/dependencies.component'
+export * from './pages/show/dependencies/dependencies.module'
+export * from './pages/show/package/package.component'
+export * from './pages/show/package/package.module'
+
+export * from './pipes/filter-packages.pipe'
+export * from './pipes/mime-type.pipe'
+
+export * from './services/marketplace.service'
+
+export * from './types'
--- a/web/projects/marketplace/src/services/marketplace.service.ts
+++ b/web/projects/marketplace/src/services/marketplace.service.ts
@@ -0,0 +1,29 @@
+import { Observable } from 'rxjs'
+import { MarketplacePkg, Marketplace, StoreData, StoreIdentity } from '../types'
+
+export abstract class AbstractMarketplaceService {
+  abstract getKnownHosts$(): Observable<StoreIdentity[]>
+
+  abstract getSelectedHost$(): Observable<StoreIdentity>
+
+  abstract getMarketplace$(): Observable<Marketplace>
+
+  abstract getSelectedStore$(): Observable<StoreData>
+
+  abstract getPackage$(
+    id: string,
+    version: string,
+    url?: string,
+  ): Observable<MarketplacePkg> // could be {} so need to check in show page
+
+  abstract fetchReleaseNotes$(
+    id: string,
+    url?: string,
+  ): Observable<Record<string, string>>
+
+  abstract fetchStatic$(
+    id: string,
+    type: string,
+    url?: string,
+  ): Observable<string>
+}
--- a/web/projects/marketplace/src/types.ts
+++ b/web/projects/marketplace/src/types.ts
@@ -0,0 +1,87 @@
+import { Url } from '@start9labs/shared'
+
+export type StoreURL = string
+export type StoreName = string
+
+export interface StoreIdentity {
+  url: StoreURL
+  name?: StoreName
+}
+export type Marketplace = Record<StoreURL, StoreData | null>
+
+export interface StoreData {
+  info: StoreInfo
+  packages: MarketplacePkg[]
+}
+
+export interface StoreInfo {
+  name: StoreName
+  categories: string[]
+}
+
+export interface MarketplacePkg {
+  icon: Url
+  license: Url
+  instructions: Url
+  manifest: Manifest
+  categories: string[]
+  versions: string[]
+  'dependency-metadata': {
+    [id: string]: DependencyMetadata
+  }
+  'published-at': string
+}
+
+export interface DependencyMetadata {
+  title: string
+  icon: Url
+  hidden: boolean
+}
+
+export interface Manifest {
+  id: string
+  title: string
+  version: string
+  'git-hash'?: string
+  description: {
+    short: string
+    long: string
+  }
+  assets: {
+    icon: string // ie. icon.png
+  }
+  replaces?: string[]
+  'release-notes': string
+  license: string // name of license
+  'wrapper-repo': Url
+  'upstream-repo': Url
+  'support-site': Url
+  'marketing-site': Url
+  'donation-url': Url | null
+  alerts: {
+    install: string | null
+    uninstall: string | null
+    restore: string | null
+    start: string | null
+    stop: string | null
+  }
+  dependencies: Record<string, Dependency>
+  'os-version': string
+}
+
+export interface Dependency {
+  version: string
+  requirement:
+    | {
+        type: 'opt-in'
+        how: string
+      }
+    | {
+        type: 'opt-out'
+        how: string
+      }
+    | {
+        type: 'required'
+      }
+  description: string | null
+}
--- a/web/projects/marketplace/tsconfig.json
+++ b/web/projects/marketplace/tsconfig.json
@@ -0,0 +1,13 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": ["src/test.ts", "**/*.spec.ts"]
+}
--- a/web/projects/setup-wizard/src/app/app-routing.module.ts
+++ b/web/projects/setup-wizard/src/app/app-routing.module.ts
@@ -0,0 +1,56 @@
+import { NgModule } from '@angular/core'
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router'
+
+const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  {
+    path: 'home',
+    loadChildren: () =>
+      import('./pages/home/home.module').then(m => m.HomePageModule),
+  },
+  {
+    path: 'attach',
+    loadChildren: () =>
+      import('./pages/attach/attach.module').then(m => m.AttachPageModule),
+  },
+  {
+    path: 'recover',
+    loadChildren: () =>
+      import('./pages/recover/recover.module').then(m => m.RecoverPageModule),
+  },
+  {
+    path: 'transfer',
+    loadChildren: () =>
+      import('./pages/transfer/transfer.module').then(
+        m => m.TransferPageModule,
+      ),
+  },
+  {
+    path: 'storage',
+    loadChildren: () =>
+      import('./pages/embassy/embassy.module').then(m => m.EmbassyPageModule),
+  },
+  {
+    path: 'loading',
+    loadChildren: () =>
+      import('./pages/loading/loading.module').then(m => m.LoadingPageModule),
+  },
+  {
+    path: 'success',
+    loadChildren: () =>
+      import('./pages/success/success.module').then(m => m.SuccessPageModule),
+  },
+]
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes, {
+      scrollPositionRestoration: 'enabled',
+      preloadingStrategy: PreloadAllModules,
+      useHash: true,
+      initialNavigation: 'disabled',
+    }),
+  ],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
--- a/web/projects/setup-wizard/src/app/app.component.html
+++ b/web/projects/setup-wizard/src/app/app.component.html
@@ -0,0 +1,5 @@
+<tui-root>
+  <ion-app>
+    <ion-router-outlet></ion-router-outlet>
+  </ion-app>
+</tui-root>
--- a/Show More
+++ b/Show More