init

2026-08-17 06:46:05 +01:00 · 2021-10-31 18:15:23 +01:00
commit f677febac3
134 changed files with 11509 additions and 0 deletions
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -0,0 +1,49 @@
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { Resolve } from '@angular/router'
+
+export interface User {
+  id: number
+  active_config: number
+  active_version: string
+  custom_connection_gateway: string|null
+  custom_connection_gateway_token: string|null
+  config_sync_token: string
+  github_username: string
+  is_pro: boolean
+  is_sponsor: boolean
+}
+
+export interface Config {
+  id: number
+  content: string
+  last_used_with_version: string
+  created_at: Date
+  modified_at: Date
+}
+
+export interface Version {
+  version: string
+  plugins: string[]
+}
+
+export interface InstanceInfo {
+  login_enabled: boolean
+  homepage_enabled: boolean
+}
+
+export interface Gateway {
+  host: string
+  port: number
+  url: string
+  auth_token: string
+}
+
+@Injectable({ providedIn: 'root' })
+export class InstanceInfoResolver implements Resolve<Promise<InstanceInfo>> {
+  constructor (private http: HttpClient) { }
+
+  resolve (): Promise<InstanceInfo> {
+    return this.http.get('/api/1/instance-info').toPromise() as Promise<InstanceInfo>
+  }
+}
--- a/frontend/src/app.component.ts
+++ b/frontend/src/app.component.ts
@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'app',
+  template: '<router-outlet></router-outlet>',
+})
+export class AppComponent { }
--- a/frontend/src/app.module.ts
+++ b/frontend/src/app.module.ts
@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { CommonModule } from '@angular/common'
+import { FormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { ClipboardModule } from '@angular/cdk/clipboard'
+import { TransferHttpCacheModule } from '@nguniversal/common'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { HttpClientModule } from '@angular/common/http'
+
+import { AppComponent } from './app.component'
+import { CommonAppModule } from 'src/common'
+
+import '@fortawesome/fontawesome-svg-core/styles.css'
+
+const ROUTES = [
+  {
+    path: '',
+    loadChildren: () => import(/* webpackChunkName: "homepage" */'./homepage').then(m => m.HomepageModule),
+  },
+  {
+    path: 'app',
+    loadChildren: () => import(/* webpackChunkName: "app" */'./app').then(m => m.ApplicationModule),
+  },
+  {
+    path: 'login',
+    loadChildren: () => import(/* webpackChunkName: "login" */'./login').then(m => m.LoginModule),
+  },
+]
+
+@NgModule({
+  imports: [
+    BrowserModule.withServerTransition({
+      appId: 'tabby',
+    }),
+    CommonAppModule.forRoot(),
+    TransferHttpCacheModule,
+    BrowserAnimationsModule,
+    CommonModule,
+    FormsModule,
+    FontAwesomeModule,
+    ClipboardModule,
+    HttpClientModule,
+    RouterModule.forRoot(ROUTES),
+  ],
+  declarations: [
+    AppComponent,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppModule { }
--- a/frontend/src/app.server.module.ts
+++ b/frontend/src/app.server.module.ts
@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+import { NgModule } from '@angular/core'
+import { ServerModule, ServerTransferStateModule } from '@angular/platform-server'
+import { AppModule } from './app.module'
+import { AppComponent } from './app.component'
+
+@NgModule({
+  imports: [
+    AppModule,
+    ServerModule,
+    ServerTransferStateModule,
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}
--- a/frontend/src/app/components/configModal.component.pug
+++ b/frontend/src/app/components/configModal.component.pug
@@ -0,0 +1,46 @@
+.modal-header
+    h5.modal-title Config file
+
+.modal-body
+    .header(*ngIf='configService.activeConfig')
+        .d-flex.align-items-center.py-2
+            .me-auto
+                label Active config
+                .title
+                    fa-icon([icon]='_configIcon')
+                    span.ms-2 {{configService.activeConfig.name}}
+
+            button.btn.btn-semi.me-2((click)='configService.duplicateActiveConfig()')
+                fa-icon([icon]='_copyIcon', [fixedWidth]='true')
+
+            button.btn.btn-semi((click)='deleteConfig()')
+                fa-icon([icon]='_deleteIcon', [fixedWidth]='true')
+
+        .d-flex.align-items-center.py-2(*ngIf='configService.activeVersion')
+            .me-auto App version:
+            div(ngbDropdown)
+                button.btn.btn-semi(ngbDropdownToggle) {{configService.activeVersion.version}}
+                div(ngbDropdownMenu)
+                    button(
+                        *ngFor='let version of configService.versions',
+                        ngbDropdownItem,
+                        [class.active]='version == configService.activeVersion',
+                        (click)='selectVersion(version)'
+                    ) {{version.version}}
+
+    .pt-3(*ngIf='configService.configs.length > 1')
+        h5 Other configs
+
+        .list-group.list-group-light
+            ng-container(*ngFor='let config of configService.configs')
+                button.list-group-item.list-group-item-action(
+                    *ngIf='config.id !== configService.activeConfig?.id',
+                    (click)='selectConfig(config)'
+                )
+                    fa-icon([icon]='_configIcon')
+                    span {{config.name}}
+
+    .py-3
+        button.btn.btn-semi.w-100((click)='createNewConfig()')
+            fa-icon([icon]='_addIcon', [fixedWidth]='true')
+            span New config
--- a/frontend/src/app/components/configModal.component.ts
+++ b/frontend/src/app/components/configModal.component.ts
@@ -0,0 +1,56 @@
+import { Component } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { AppConnectorService } from '../services/appConnector.service'
+import { ConfigService } from 'src/common'
+import { faCopy, faFile, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { Config, Version } from 'src/api'
+
+@Component({
+  selector: 'config-modal',
+  templateUrl: './configModal.component.pug',
+  // styleUrls: ['./settingsModal.component.scss'],
+})
+export class ConfigModalComponent {
+  _addIcon = faPlus
+  _copyIcon = faCopy
+  _deleteIcon = faTrash
+  _configIcon = faFile
+
+  constructor (
+    private modalInstance: NgbActiveModal,
+    public appConnector: AppConnectorService,
+    public configService: ConfigService,
+  ) {
+  }
+
+  cancel () {
+    this.modalInstance.dismiss()
+  }
+
+  async createNewConfig () {
+    const config = await this.configService.createNewConfig()
+    await this.configService.selectConfig(config)
+    this.modalInstance.dismiss()
+  }
+
+  async selectConfig (config: Config) {
+    await this.configService.selectConfig(config)
+    this.modalInstance.dismiss()
+  }
+
+  async selectVersion (version: Version) {
+    await this.configService.selectVersion(version)
+    this.modalInstance.dismiss()
+  }
+
+  async deleteConfig () {
+    if (!this.configService.activeConfig) {
+      return
+    }
+    if (confirm('Delete this config? This cannot be undone.')) {
+      await this.configService.deleteConfig(this.configService.activeConfig)
+    }
+    this.configService.selectDefaultConfig()
+    this.modalInstance.dismiss()
+  }
+}
--- a/frontend/src/app/components/connectionList.component.pug
+++ b/frontend/src/app/components/connectionList.component.pug
@@ -0,0 +1,8 @@
+.list-group.list-group-light
+    .list-group-item.d-flex(*ngFor='let socket of appConnector.sockets')
+        fa-icon.text-success.me-2([icon]='_circleIcon', [fixedWidth]='true')
+        .me-auto
+            div {{socket.options.host}}:{{socket.options.port}}
+            .text-muted via {{socket.url}}
+        button.btn.btn-link((click)='closeSocket(socket)')
+            fa-icon([icon]='_closeIcon', [fixedWidth]='true')
--- a/frontend/src/app/components/connectionList.component.ts
+++ b/frontend/src/app/components/connectionList.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core'
+import { AppConnectorService, SocketProxy } from '../services/appConnector.service'
+import { faCircle, faTimes } from '@fortawesome/free-solid-svg-icons'
+
+@Component({
+  selector: 'connection-list',
+  templateUrl: './connectionList.component.pug',
+})
+export class ConnectionListComponent {
+  _circleIcon = faCircle
+  _closeIcon = faTimes
+
+  constructor (
+    public appConnector: AppConnectorService,
+  ) { }
+
+  closeSocket (socket: SocketProxy) {
+    socket.close(new Error('Connection closed by user'))
+  }
+}
--- a/frontend/src/app/components/main.component.pug
+++ b/frontend/src/app/components/main.component.pug
@@ -0,0 +1,36 @@
+.sidebar
+    img.logo(src='{{_logo}}')
+
+    button.btn.mt-auto(
+        (click)='openConfig()',
+        title='Manage configs'
+    )
+        fa-icon([icon]='_configIcon', [fixedWidth]='true', size='lg')
+
+    button.btn(
+        (click)='openSettings()',
+        *ngIf='loginService.user',
+        title='Settings'
+    )
+        fa-icon([icon]='_settingsIcon', [fixedWidth]='true', size='lg')
+
+    a.btn.mt-3(
+        href='/login',
+        *ngIf='!loginService.user',
+        title='Log in'
+    )
+        fa-icon([icon]='_loginIcon', [fixedWidth]='true', size='lg')
+
+    button.btn.mt-3(
+        (click)='logout()',
+        *ngIf='loginService.user',
+        title='Log out'
+    )
+        fa-icon([icon]='_logoutIcon', [fixedWidth]='true', size='lg')
+
+.terminal
+    iframe(#iframe, [hidden]='!showApp')
+    .alert.alert-warning.d-flex.border-0.m-0(*ngIf='showApp && !loginService.user')
+        fa-icon.me-2([icon]='_saveIcon', [fixedWidth]='true')
+        div
+            div To save profiles and settings, #[a(href='/login') log in].
--- a/frontend/src/app/components/main.component.scss
+++ b/frontend/src/app/components/main.component.scss
@@ -0,0 +1,66 @@
+@import "~theme/vars";
+
+:host {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+}
+
+.sidebar {
+    width: 64px;
+    flex: none;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    .logo {
+        width: 32px;
+        height: 32px;
+        align-self: center;
+        margin-top: 15px;
+        margin-bottom: 20px;
+    }
+
+    >.btn {
+        width: 64px;
+        height: 64px;
+        background: transparent;
+        box-shadow: none;
+
+        &::after {
+            display: none;
+        }
+
+        &:hover {
+            color: white;
+        }
+    }
+}
+
+.terminal {
+    flex: 1 1 0;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+
+    > * {
+        flex: none;
+    }
+
+    > iframe {
+        background: $body-bg;
+        border: none;
+        flex: 1 1 0;
+    }
+}
+
+.config-menu {
+    .header {
+        border-bottom: 1px solid black;
+    }
+}
--- a/frontend/src/app/components/main.component.ts
+++ b/frontend/src/app/components/main.component.ts
@@ -0,0 +1,104 @@
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { HttpClient } from '@angular/common/http'
+import { Title } from '@angular/platform-browser'
+import { AppConnectorService } from '../services/appConnector.service'
+
+import { faCog, faFile, faPlus, faSave, faSignInAlt, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { SettingsModalComponent } from './settingsModal.component'
+import { ConfigModalComponent } from './configModal.component'
+import { ConfigService, LoginService } from 'src/common'
+import { combineLatest } from 'rxjs'
+import { Config, Version } from 'src/api'
+
+@Component({
+  selector: 'main',
+  templateUrl: './main.component.pug',
+  styleUrls: ['./main.component.scss'],
+})
+export class MainComponent {
+  _logo = require('../../../assets/logo.svg')
+  _settingsIcon = faCog
+  _loginIcon = faSignInAlt
+  _logoutIcon = faSignOutAlt
+  _addIcon = faPlus
+  _configIcon = faFile
+  _saveIcon = faSave
+
+  showApp = false
+
+  @ViewChild('iframe') iframe: ElementRef
+
+  constructor (
+    titleService: Title,
+    public appConnector: AppConnectorService,
+    private http: HttpClient,
+    public loginService: LoginService,
+    private ngbModal: NgbModal,
+    private config: ConfigService,
+  ) {
+    titleService.setTitle('Tabby')
+    window.addEventListener('message', this.connectorRequestHandler)
+  }
+
+  connectorRequestHandler = event => {
+    if (event.data === 'request-connector') {
+      this.iframe.nativeElement.contentWindow['__connector__'] = this.appConnector
+      this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
+    }
+  }
+
+  async ngAfterViewInit () {
+    await this.loginService.ready$.toPromise()
+
+    combineLatest(
+      this.config.activeConfig$,
+      this.config.activeVersion$
+    ).subscribe(([config, version]) => {
+      this.reloadApp(config, version)
+    })
+
+    await this.config.ready$.toPromise()
+    await this.config.selectDefaultConfig()
+  }
+
+  ngOnDestroy () {
+    window.removeEventListener('message', this.connectorRequestHandler)
+  }
+
+  unloadApp () {
+    this.showApp = false
+    this.iframe.nativeElement.src = 'about:blank'
+  }
+
+  async loadApp (config, version) {
+    this.showApp = true
+    this.iframe.nativeElement.src = '/terminal'
+    if (this.loginService.user) {
+      await this.http.patch(`/api/1/configs/${config.id}`, {
+        last_used_with_version: version.version,
+      }).toPromise()
+    }
+  }
+
+  reloadApp (config: Config, version: Version) {
+    // TODO check config incompatibility
+    setTimeout(() => {
+      this.appConnector.setState(config, version)
+      this.loadApp(config, version)
+    })
+  }
+
+  async openConfig () {
+    await this.ngbModal.open(ConfigModalComponent).result
+  }
+
+  async openSettings () {
+    await this.ngbModal.open(SettingsModalComponent).result
+  }
+
+  async logout () {
+    await this.http.post('/api/1/auth/logout', null).toPromise()
+    location.href = '/'
+  }
+}
--- a/frontend/src/app/components/settingsModal.component.pug
+++ b/frontend/src/app/components/settingsModal.component.pug
@@ -0,0 +1,72 @@
+.modal-header
+    h3.modal-title Settings
+
+.modal-body
+    .mb-3
+        h5 GitHub account
+        a.btn.btn-info(href='{{commonService.backendURL}}/api/1/auth/social/login/github', *ngIf='!user.github_username')
+            fa-icon([icon]='_githubIcon', [fixedWidth]='true')
+            span Connect a GitHub account
+        .alert.alert-success.d-flex(*ngIf='user.github_username')
+            fa-icon.me-2([icon]='_okIcon', [fixedWidth]='true')
+            div
+                div Connected as #[strong {{user.github_username}}]
+                div(*ngIf='user.is_sponsor') Thank you for supporting Tabby on GitHub!
+
+    .mb-3.mt-4
+        h5 Config sync
+        .d-flex.aling-items-stretch.mb-3
+            .form-floating.w-100
+                input.form-control(
+                    type='text',
+                    readonly,
+                    [ngModel]='user.config_sync_token'
+                )
+                label Sync token for the Tabby app
+            button.btn.btn-dark([cdkCopyToClipboard]='user.config_sync_token')
+                fa-icon([icon]='_copyIcon', [fixedWidth]='true')
+
+    .mb-3.mt-4
+        h5 Connection gateway
+        .form-check.form-switch
+            input.form-check-input(
+                type='checkbox',
+                [(ngModel)]='customGatewayEnabled'
+            )
+            label(class='form-check-label') Use custom connection gateway
+
+        small.text-muted This allows you to securely route connections through your own hosted gateway. See #[a(href='https://github.com/Eugeny/tabby-connection-gateway#readme', target='_blank') tabby-connection-gateway] for setup instructions.
+
+    form
+        input.d-none(type='text', name='fakeusername')
+        input.d-none(type='password', name='fakepassword')
+
+        .mb-3(*ngIf='customGatewayEnabled')
+            .form-floating
+                input.form-control(
+                    type='text',
+                    [(ngModel)]='user.custom_connection_gateway',
+                    placeholder='wss://1.2.3.4',
+                    autocomplete='off'
+                )
+                label Gateway address
+
+        .mb-3(*ngIf='customGatewayEnabled')
+            .form-floating
+                input.form-control(
+                    type='password',
+                    [(ngModel)]='user.custom_connection_gateway_token',
+                    placeholder='123',
+                    autocomplete='new-password'
+                )
+                label Gateway authentication token
+
+    .mb-3.mt-4(*ngIf='appConnector.sockets.length')
+        h5 Active connections
+        connection-list
+
+.modal-footer
+    .text-muted Account ID: {{user.id}}
+    .ms-auto
+    button.btn.btn-primary((click)='apply()') Apply
+    button.btn.btn-secondary((click)='cancel()') Cancel
--- a/frontend/src/app/components/settingsModal.component.ts
+++ b/frontend/src/app/components/settingsModal.component.ts
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { User } from 'src/api'
+import { CommonService, LoginService } from 'src/common'
+import { AppConnectorService } from '../services/appConnector.service'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons'
+
+@Component({
+  selector: 'settings-modal',
+  templateUrl: './settingsModal.component.pug',
+})
+export class SettingsModalComponent {
+  user: User
+  customGatewayEnabled = false
+  _githubIcon = faGithub
+  _copyIcon = faCopy
+  _okIcon = faCheck
+
+  constructor (
+    public appConnector: AppConnectorService,
+    public commonService: CommonService,
+    private modalInstance: NgbActiveModal,
+    private loginService: LoginService,
+  ) {
+    if (!loginService.user) {
+      return
+    }
+    this.user = { ...loginService.user }
+    this.customGatewayEnabled = !!this.user.custom_connection_gateway
+  }
+
+  async apply () {
+    Object.assign(this.loginService.user, this.user)
+    this.modalInstance.close()
+    await this.loginService.updateUser()
+  }
+
+  cancel () {
+    this.modalInstance.dismiss()
+  }
+}
--- a/frontend/src/app/components/upgradeModal.component.pug
+++ b/frontend/src/app/components/upgradeModal.component.pug
@@ -0,0 +1,28 @@
+.modal-header
+    h1.modal-title Hey!
+
+.modal-body
+    h4 It looks like you're enjoying Tabby a lot!
+
+    p Tabby Web has a limit of {{appConnector.connectionLimit}} simultaneous connections due to the fact that I have to pay for hosting and traffic out of my own pocket.
+
+    p #[strong You can have unlimited parallel connections] if you support Tabby on GitHub with #[code $3]/month or more. It's cancellable anytime, there are no hidden costs and it helps me pay my bills.
+
+    a.btn.btn-primary.btn-lg.d-block.mb-3(href='https://github.com/sponsors/Eugeny', target='_blank')
+        fa-icon.me-2([icon]='_loveIcon')
+        span Support Tabby on GitHub
+
+    button.btn.btn-warning.d-block.w-100((click)='skipOnce()', *ngIf='canSkip')
+        fa-icon.me-2([icon]='_giftIcon')
+        span Skip - just this one time
+
+    p.mt-3 If you work in education, have already supported me on Ko-fi before, or your country isn't supported on GitHub Sponsors, just #[a(href='mailto:e@ajenti.org?subject=Help with Tabby Pro') let me know] and I'll hook you up.
+
+    .mb-3(*ngIf='!loginService.user?.github_username')
+        a.btn.btn-info(href='{{commonService.backendURL}}/api/1/auth/social/login/github')
+            fa-icon([icon]='_githubIcon', [fixedWidth]='true')
+            span Connect your GitHub account to link your sponsorship
+
+    .mt-4
+    p You can also kill any active connection from the list below to free up a slot.
+    connection-list
--- a/frontend/src/app/components/upgradeModal.component.ts
+++ b/frontend/src/app/components/upgradeModal.component.ts
@@ -0,0 +1,35 @@
+import { Component } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+import { faGift, faHeart } from '@fortawesome/free-solid-svg-icons'
+
+import { AppConnectorService } from '../services/appConnector.service'
+import { CommonService, LoginService } from 'src/common'
+import { User } from 'src/api'
+
+@Component({
+  selector: 'upgrade-modal',
+  templateUrl: './upgradeModal.component.pug',
+})
+export class UpgradeModalComponent {
+  user: User
+  _githubIcon = faGithub
+  _loveIcon = faHeart
+  _giftIcon = faGift
+  canSkip = false
+
+  constructor (
+    public appConnector: AppConnectorService,
+    public commonService: CommonService,
+    public loginService: LoginService,
+    private modalInstance: NgbActiveModal,
+  ) {
+    this.canSkip = !window.localStorage['upgrade-modal-skipped']
+  }
+
+  skipOnce () {
+    window.localStorage['upgrade-modal-skipped'] = true
+    window.sessionStorage['upgrade-skip-active'] = true
+    this.modalInstance.close(true)
+  }
+}
--- a/frontend/src/app/index.ts
+++ b/frontend/src/app/index.ts
@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+import { NgModule } from '@angular/core'
+import { NgbDropdownModule, NgbModalModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'
+import { CommonModule } from '@angular/common'
+import { FormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { ClipboardModule } from '@angular/cdk/clipboard'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+
+import { MainComponent } from './components/main.component'
+import { ConfigModalComponent } from './components/configModal.component'
+import { SettingsModalComponent } from './components/settingsModal.component'
+import { ConnectionListComponent } from './components/connectionList.component'
+import { UpgradeModalComponent } from './components/upgradeModal.component'
+import { InstanceInfoResolver } from 'src/api'
+import { CommonAppModule } from 'src/common'
+
+const ROUTES = [
+  {
+    path: '',
+    component: MainComponent,
+    resolve: {
+      instanceInfo: InstanceInfoResolver,
+    },
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonAppModule,
+    CommonModule,
+    FormsModule,
+    NgbDropdownModule,
+    NgbModalModule,
+    NgbTooltipModule,
+    ClipboardModule,
+    FontAwesomeModule,
+    RouterModule.forChild(ROUTES),
+  ],
+  declarations: [
+    MainComponent,
+    ConfigModalComponent,
+    SettingsModalComponent,
+    ConnectionListComponent,
+    UpgradeModalComponent,
+  ],
+})
+export class ApplicationModule { }
--- a/frontend/src/app/services/appConnector.service.ts
+++ b/frontend/src/app/services/appConnector.service.ts
@@ -0,0 +1,233 @@
+import { Buffer } from 'buffer'
+import { Subject } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable, Injector, NgZone } from '@angular/core'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { UpgradeModalComponent } from '../components/upgradeModal.component'
+import { Config, Gateway, Version } from 'src/api'
+import { LoginService, CommonService } from 'src/common'
+
+export interface ServiceMessage {
+  _: string
+  [k: string]: any
+}
+
+export class SocketProxy {
+  connect$ = new Subject<void>()
+  data$ = new Subject<Uint8Array>()
+  error$ = new Subject<Error>()
+  close$ = new Subject<void>()
+
+  url: string
+  authToken: string
+  webSocket: WebSocket|null
+  initialBuffers: any[] = []
+  options: {
+    host: string
+    port: number
+  }
+
+  private appConnector: AppConnectorService
+  private loginService: LoginService
+  private ngbModal: NgbModal
+  private zone: NgZone
+
+  constructor (
+    injector: Injector,
+  ) {
+    this.appConnector = injector.get(AppConnectorService)
+    this.loginService = injector.get(LoginService)
+    this.ngbModal = injector.get(NgbModal)
+    this.zone = injector.get(NgZone)
+  }
+
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  async connect (options: any): Promise<void> {
+    if (!this.loginService.user?.is_pro && this.appConnector.sockets.length > this.appConnector.connectionLimit && !window.sessionStorage['upgrade-skip-active']) {
+      let skipped = false
+      try {
+        skipped = await this.zone.run(() => this.ngbModal.open(UpgradeModalComponent)).result
+      } catch { }
+      if (!skipped) {
+        this.close(new Error('Connection limit reached'))
+        return
+      }
+    }
+
+    this.options = options
+    if (this.loginService.user?.custom_connection_gateway) {
+      this.url = this.loginService.user.custom_connection_gateway
+    }
+    if (this.loginService.user?.custom_connection_gateway_token) {
+      this.authToken = this.loginService.user.custom_connection_gateway_token
+    }
+    if (!this.url) {
+      try {
+        const gateway = await this.appConnector.chooseConnectionGateway()
+        this.url = gateway.url
+        this.authToken = gateway.auth_token
+      } catch (err) {
+        this.close(err)
+        return
+      }
+    }
+    try {
+      this.webSocket = new WebSocket(this.url)
+    } catch (err) {
+      this.close(err)
+      return
+    }
+    this.webSocket.onerror = () => {
+      this.close(new Error(`Failed to connect to the connection gateway at ${this.url}`))
+      return
+    }
+    this.webSocket.onmessage = async event => {
+      if (typeof event.data === 'string') {
+        this.handleServiceMessage(JSON.parse(event.data))
+      } else {
+        this.data$.next(Buffer.from(await event.data.arrayBuffer()))
+      }
+    }
+    this.webSocket.onclose = () => {
+      this.close()
+    }
+  }
+
+  handleServiceMessage (msg: ServiceMessage): void {
+    if (msg._ === 'hello') {
+      this.sendServiceMessage({
+        _: 'hello',
+        version: 1,
+        auth_token: this.authToken,
+      })
+    } else if (msg._ === 'ready') {
+      this.sendServiceMessage({
+        _: 'connect',
+        host: this.options.host,
+        port: this.options.port,
+      })
+    } else if (msg._ === 'connected') {
+      this.connect$.next()
+      this.connect$.complete()
+      for (const b of this.initialBuffers) {
+        this.webSocket?.send(b)
+      }
+      this.initialBuffers = []
+    } else if (msg._ === 'error') {
+      console.error('Connection gateway error', msg)
+      this.close(new Error(msg.details))
+    } else {
+      console.warn('Unknown service message', msg)
+    }
+  }
+
+  sendServiceMessage (msg: ServiceMessage): void {
+    this.webSocket?.send(JSON.stringify(msg))
+  }
+
+  write (chunk: Buffer): void {
+    if (!this.webSocket?.readyState) {
+      this.initialBuffers.push(chunk)
+    } else {
+      this.webSocket.send(chunk)
+    }
+  }
+
+  close (error?: Error): void {
+    this.webSocket?.close()
+    if (error) {
+      this.error$.next(error)
+    }
+    this.connect$.complete()
+    this.data$.complete()
+    this.error$.complete()
+    this.close$.next()
+    this.close$.complete()
+  }
+}
+
+@Injectable({ providedIn: 'root' })
+export class AppConnectorService {
+  private configUpdate = new Subject<string>()
+  private config: Config
+  private version: Version
+  connectionLimit = 3
+  sockets: SocketProxy[] = []
+
+  constructor (
+    private injector: Injector,
+    private http: HttpClient,
+    private commonService: CommonService,
+    private zone: NgZone,
+    private loginService: LoginService,
+  ) {
+
+    this.configUpdate.pipe(debounceTime(1000)).subscribe(async content => {
+      if (this.loginService.user) {
+        const result = await this.http.patch(`/api/1/configs/${this.config.id}`, { content }).toPromise()
+        Object.assign(this.config, result)
+      }
+    })
+  }
+
+  setState (config: Config, version: Version): void {
+    this.config = config
+    this.version = version
+  }
+
+  async loadConfig (): Promise<string> {
+    return this.config.content
+  }
+
+  async saveConfig (content: string): Promise<void> {
+    this.configUpdate.next(content)
+    this.config.content = content
+  }
+
+  getAppVersion (): string {
+    return this.version.version
+  }
+
+  getDistURL (): string {
+    return this.commonService.backendURL + '/app-dist'
+  }
+
+  getPluginsToLoad (): string[] {
+    const loadOrder = [
+      'tabby-core',
+      'tabby-settings',
+      'tabby-terminal',
+      'tabby-ssh',
+      'tabby-community-color-schemes',
+      'tabby-web',
+    ]
+
+    return [
+      ...loadOrder.filter(x => this.version.plugins.includes(x)),
+      ...this.version.plugins.filter(x => !loadOrder.includes(x)),
+    ]
+  }
+
+  createSocket (): SocketProxy {
+    return this.zone.run(() => {
+      const socket = new SocketProxy(this.injector)
+      this.sockets.push(socket)
+      socket.close$.subscribe(() => {
+        this.sockets = this.sockets.filter(x => x !== socket)
+      })
+      return socket
+    })
+  }
+
+  async chooseConnectionGateway (): Promise<Gateway> {
+    try {
+      return await this.http.post('/api/1/gateways/choose', {}).toPromise() as Gateway
+    } catch (err){
+      if (err.status === 503) {
+        throw new Error('All connection gateways are unavailable right now')
+      }
+      throw err
+    }
+  }
+}
--- a/frontend/src/common/index.ts
+++ b/frontend/src/common/index.ts
@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+import { ModuleWithProviders, NgModule } from '@angular/core'
+import { HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http'
+import { BackendXsrfInterceptor, UniversalInterceptor } from './interceptor'
+
+@NgModule({
+  imports: [
+    HttpClientXsrfModule,
+  ],
+})
+export class CommonAppModule {
+  static forRoot (): ModuleWithProviders<CommonAppModule> {
+    return {
+      ngModule: CommonAppModule,
+      providers: [
+        { provide: HTTP_INTERCEPTORS, useClass: UniversalInterceptor, multi: true },
+        { provide: HTTP_INTERCEPTORS, useClass: BackendXsrfInterceptor, multi: true },
+      ],
+    }
+  }
+}
+
+export { LoginService } from './services/login.service'
+export { ConfigService } from './services/config.service'
+export { CommonService } from './services/common.service'
--- a/frontend/src/common/interceptor.ts
+++ b/frontend/src/common/interceptor.ts
@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core'
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpXsrfTokenExtractor } from '@angular/common/http'
+import { Observable } from 'rxjs'
+import { CommonService } from './services/common.service'
+
+@Injectable({ providedIn: 'root' })
+export class UniversalInterceptor implements HttpInterceptor {
+  constructor (private commonService: CommonService) { }
+
+  intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (!request.url.startsWith('//') && request.url.startsWith('/')) {
+      const endpoint = request.url
+      request = request.clone({
+        url: `${this.commonService.backendURL}${endpoint}`,
+        withCredentials: true,
+      })
+    }
+    return next.handle(request)
+  }
+}
+
+@Injectable({ providedIn: 'root' })
+export class BackendXsrfInterceptor implements HttpInterceptor {
+  constructor (
+    private commonService: CommonService,
+    private tokenExtractor: HttpXsrfTokenExtractor,
+  ) { }
+
+  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (this.commonService.backendURL && req.url.startsWith(this.commonService.backendURL)) {
+      const token = this.tokenExtractor.getToken()
+      if (token !== null) {
+        req = req.clone({ setHeaders: { 'X-XSRF-TOKEN': token } })
+      }
+    }
+    return next.handle(req)
+  }
+}
--- a/frontend/src/common/services/common.service.ts
+++ b/frontend/src/common/services/common.service.ts
@@ -0,0 +1,26 @@
+import { Inject, Injectable, Optional } from '@angular/core'
+
+@Injectable({ providedIn: 'root' })
+export class CommonService {
+  backendURL: string
+
+  constructor (@Inject('BACKEND_URL') @Optional() ssrBackendURL: string) {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+    const tag = document.querySelector('meta[property=x-tabby-web-backend-url]')! as HTMLMetaElement
+    if (ssrBackendURL) {
+      this.backendURL = ssrBackendURL
+      tag.content = ssrBackendURL
+    } else {
+      if (tag.content && !tag.content.startsWith('{{')) {
+        this.backendURL = tag.content
+      } else {
+        this.backendURL = ''
+      }
+    }
+
+    console.log(this.backendURL)
+    if (this.backendURL.endsWith('/')) {
+      this.backendURL = this.backendURL.slice(0, -1)
+    }
+  }
+}
--- a/frontend/src/common/services/config.service.ts
+++ b/frontend/src/common/services/config.service.ts
@@ -0,0 +1,122 @@
+import * as semverCompare from 'semver/functions/compare-loose'
+import { AsyncSubject, Subject } from 'rxjs'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { Config, User, Version } from '../../api'
+import { LoginService } from './login.service'
+
+
+@Injectable({ providedIn: 'root' })
+export class ConfigService {
+  activeConfig$ = new Subject<Config>()
+  activeVersion$ = new Subject<Version>()
+  user: User
+
+  configs: Config[] = []
+  versions: Version[] = []
+  ready$ = new AsyncSubject<void>()
+
+  get activeConfig (): Config | null { return this._activeConfig }
+  get activeVersion (): Version | null { return this._activeVersion }
+
+  private _activeConfig: Config|null = null
+  private _activeVersion: Version|null = null
+
+  constructor (
+    private http: HttpClient,
+    private loginService: LoginService,
+  ) {
+    this.init()
+  }
+
+  async updateUser (): Promise<void> {
+    if (!this.loginService.user) {
+      return
+    }
+    await this.http.put('/api/1/user', this.user).toPromise()
+  }
+
+  async createNewConfig (): Promise<Config> {
+    const configData = {
+      content: '{}',
+      last_used_with_version: this._activeVersion?.version ?? this.getLatestStableVersion().version,
+    }
+    if (!this.loginService.user) {
+      const config = {
+        id: Date.now(),
+        name: `Temporary config at ${new Date()}`,
+        created_at: new Date(),
+        modified_at: new Date(),
+        ...configData,
+      }
+      this.configs.push(config)
+      return config
+    }
+    const config = (await this.http.post('/api/1/configs', configData).toPromise()) as Config
+    this.configs.push(config)
+    return config
+  }
+
+  getLatestStableVersion (): Version {
+    return this.versions[0]
+  }
+
+  async duplicateActiveConfig (): Promise<void> {
+    let copy: any = { ...this._activeConfig, id: undefined }
+    if (this.loginService.user) {
+      copy = (await this.http.post('/api/1/configs', copy).toPromise()) as Config
+    }
+    this.configs.push(copy)
+  }
+
+  async selectVersion (version: Version): Promise<void> {
+    this._activeVersion = version
+    this.activeVersion$.next(version)
+  }
+
+  async selectConfig (config: Config): Promise<void> {
+    let matchingVersion = this.versions.find(x => x.version === config.last_used_with_version)
+    if (!matchingVersion) {
+      // TODO ask to upgrade
+      matchingVersion = this.versions[0]
+    }
+
+    this._activeConfig = config
+    this.activeConfig$.next(config)
+    this.selectVersion(matchingVersion)
+    if (this.loginService.user) {
+      this.loginService.user.active_config = config.id
+      await this.loginService.updateUser()
+    }
+  }
+
+  async selectDefaultConfig (): Promise<void> {
+    await this.ready$.toPromise()
+    await this.loginService.ready$.toPromise()
+    this.selectConfig(this.configs.find(c => c.id === this.loginService.user?.active_config) ?? this.configs[0])
+  }
+
+  async deleteConfig (config: Config): Promise<void> {
+    if (this.loginService.user) {
+      await this.http.delete(`/api/1/configs/${config.id}`).toPromise()
+    }
+    this.configs = this.configs.filter(x => x.id !== config.id)
+  }
+
+  private async init () {
+    await this.loginService.ready$.toPromise()
+
+    if (this.loginService.user) {
+      this.configs = (await this.http.get('/api/1/configs').toPromise()) as Config[]
+    }
+    this.versions = (await this.http.get('/api/1/versions').toPromise()) as Version[]
+    this.versions.sort((a, b) => -semverCompare(a.version, b.version))
+
+    if (!this.configs.length) {
+      await this.createNewConfig()
+    }
+
+    this.ready$.next()
+    this.ready$.complete()
+  }
+}
--- a/frontend/src/common/services/login.service.ts
+++ b/frontend/src/common/services/login.service.ts
@@ -0,0 +1,33 @@
+import { AsyncSubject } from 'rxjs'
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { User } from '../../api'
+
+
+@Injectable({ providedIn: 'root' })
+export class LoginService {
+  user: User | null
+  ready$ = new AsyncSubject<void>()
+
+  constructor (private http: HttpClient) {
+    this.init()
+  }
+
+  async updateUser (): Promise<void> {
+    if (!this.user) {
+      return
+    }
+    await this.http.put('/api/1/user', this.user).toPromise()
+  }
+
+  private async init () {
+    try {
+      this.user = (await this.http.get('/api/1/user').toPromise()) as User
+    } catch {
+      this.user = null
+    }
+
+    this.ready$.next()
+    this.ready$.complete()
+  }
+}
--- a/frontend/src/homepage/components/demoTerminal.component.scss
+++ b/frontend/src/homepage/components/demoTerminal.component.scss
@@ -0,0 +1,16 @@
+@import "~theme/vars";
+
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border-radius: 5px;
+    background: $body-bg;
+    box-shadow: 0 0 2px black, 0 0 50px #6ef2ff05, 0 0 150px #6854ff14;
+}
+
+iframe {
+    flex: auto;
+    display: block;
+    overflow: hidden;
+}
--- a/frontend/src/homepage/components/demoTerminal.component.ts
+++ b/frontend/src/homepage/components/demoTerminal.component.ts
@@ -0,0 +1,102 @@
+import { Subject } from 'rxjs'
+import * as semverCompare from 'semver/functions/compare-loose'
+import { HttpClient } from '@angular/common/http'
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Version } from 'src/api'
+import { CommonService } from 'src/common'
+
+class DemoConnector {
+  constructor (
+    targetWindow: Window,
+    private commonService: CommonService,
+    private version: Version,
+  ) {
+    targetWindow['tabbyWebDemoDataPath'] = `${this.getDistURL()}/${version.version}/tabby-web-demo/data`
+  }
+
+  async loadConfig (): Promise<string> {
+    return `{
+            recoverTabs: false,
+            web: {
+                preventAccidentalTabClosure: false,
+            },
+        }`
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  async saveConfig (_content: string): Promise<void> { }
+
+  getAppVersion (): string {
+    return this.version.version
+  }
+
+  getDistURL (): string {
+    return this.commonService.backendURL + '/app-dist'
+  }
+
+  getPluginsToLoad (): string[] {
+    return [
+      'tabby-core',
+      'tabby-settings',
+      'tabby-terminal',
+      'tabby-community-color-schemes',
+      'tabby-ssh',
+      'tabby-telnet',
+      'tabby-web',
+      'tabby-web-demo',
+    ]
+  }
+
+  createSocket () {
+    return new DemoSocketProxy()
+  }
+}
+
+
+export class DemoSocketProxy {
+  connect$ = new Subject<void>()
+  data$ = new Subject<Buffer>()
+  error$ = new Subject<Error>()
+  close$ = new Subject<Buffer>()
+
+  async connect () {
+    this.error$.next(new Error('This web demo can\'t actually access Internet, but feel free to download the release and try it out!'))
+  }
+}
+
+@Component({
+  selector: 'demo-terminal',
+  template: '<iframe #iframe></iframe>',
+  styleUrls: ['./demoTerminal.component.scss'],
+})
+export class DemoTerminalComponent {
+  @ViewChild('iframe') iframe: ElementRef
+  connector: DemoConnector
+
+
+  constructor (
+    private http: HttpClient,
+    private commonService: CommonService,
+  ) {
+    window.addEventListener('message', this.connectorRequestHandler)
+  }
+
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  connectorRequestHandler = event => {
+    if (event.data === 'request-connector') {
+      this.iframe.nativeElement.contentWindow['__connector__'] = this.connector
+      this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
+    }
+  }
+
+  async ngAfterViewInit (): Promise<void> {
+    const versions = (await this.http.get('/api/1/versions').toPromise()) as Version[]
+    versions.sort((a, b) => -semverCompare(a.version, b.version))
+    this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, this.commonService, versions[0]!)
+    this.iframe.nativeElement.src = '/terminal'
+  }
+
+  ngOnDestroy (): void {
+    window.removeEventListener('message', this.connectorRequestHandler)
+  }
+}
--- a/frontend/src/homepage/components/home.component.pug
+++ b/frontend/src/homepage/components/home.component.pug
@@ -0,0 +1,34 @@
+.top-half
+    .container.overflow-hidden
+        .navbar
+            img.brand(src='{{_logo}}')
+            .me-auto
+            a.btn.btn-primary([href]='releaseURL', target='_blank')
+                fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
+                span Download
+            a.btn.btn-secondary([href]='donationURL', target='_blank')
+                fa-icon([icon]='_donateIcon', [fixedWidth]='true')
+                span Donate
+            a.btn.btn-secondary(routerLink='/app', *ngIf='instanceInfo.login_enabled')
+                fa-icon([icon]='_loginIcon', [fixedWidth]='true')
+                span Web app
+
+        ul.nav-pills.mb-4(ngbNav, [activeId]='router.url')
+            li([ngbNavItem]='link.link', *ngFor='let link of navLinks')
+                a(ngbNavLink, routerLink='.', [routerLink]='link.link') {{ link.title }}
+            li.nav-item
+                a.nav-link(href='https://github.com/eugeny/tabby', target='_blank') GitHub
+
+    .container
+        div(*ngIf='router.url == "/"')
+            .intro
+                h1 A terminal for the modern age
+                    .cursor █
+                div Tabby is an infinitely customizable cross-platform terminal app for local shells, serial, SSH and Telnet connections.
+                div Here's a demo 👇
+
+            demo-terminal
+
+.bottom-half
+    .demo-offset(*ngIf='router.url == "/"')
+    router-outlet
--- a/frontend/src/homepage/components/home.component.scss
+++ b/frontend/src/homepage/components/home.component.scss
@@ -0,0 +1,74 @@
+@import "~theme/vars";
+@import "~@fontsource/fira-code/latin.css";
+
+:host {
+    font-size: 16px;
+    font-family: 'Fira Code', monospace;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
+}
+
+.top-half {
+    background: linear-gradient(#0c141c00, #15202b);
+
+    h1 {
+        font-size: 70px;
+        margin: 40px 0;
+    }
+
+    .nav {
+        font-size: 14px;
+        padding: 0 35px;
+    }
+
+    .intro {
+        font-size: 20px;
+        width: 60vw;
+        margin: auto;
+    }
+}
+
+.demo-offset {
+    padding-top: 24vw;
+}
+
+.bottom-half {
+    background: $body-bg;
+    overflow: hidden;
+    min-height: 100vh;
+}
+
+.navbar {
+    display: flex;
+    padding: 15px 30px;
+
+    a, button {
+        margin-left: 10px;
+    }
+}
+
+.brand {
+    width: 32px;
+}
+
+demo-terminal {
+    margin: auto;
+    width: calc(min(max(480px, 60vw), 100vw));
+    height: calc(max(460px, 42vw));
+    position: relative;
+    top: 20vw;
+    margin-top: -16vw;
+}
+
+@keyframes blink {
+    50% {
+        opacity: 0.0;
+    }
+}
+
+.cursor {
+    display: inline;
+    animation: blink 1s step-start 0s infinite;
+}
--- a/frontend/src/homepage/components/home.component.ts
+++ b/frontend/src/homepage/components/home.component.ts
@@ -0,0 +1,65 @@
+import { Component } from '@angular/core'
+import { ActivatedRoute, Router } from '@angular/router'
+import { faCoffee, faDownload, faSignInAlt } from '@fortawesome/free-solid-svg-icons'
+import { Waves } from '../vanta/vanta.waves.js'
+import { InstanceInfo } from 'src/api'
+
+
+@Component({
+  selector: 'home',
+  templateUrl: './home.component.pug',
+  styleUrls: ['./home.component.scss'],
+})
+export class HomeComponent {
+  githubURL = 'https://github.com/Eugeny/tabby'
+  releaseURL = `${this.githubURL}/releases/latest`
+  donationURL = 'https://ko-fi.com/eugeny'
+
+  _logo = require('../../../assets/logo.svg')
+  _downloadIcon = faDownload
+  _loginIcon = faSignInAlt
+  _donateIcon = faCoffee
+
+  navLinks = [
+    {
+      title: 'About Tabby',
+      link: '/',
+    },
+    {
+      title: 'Features',
+      link: '/about/features',
+    },
+  ]
+
+  instanceInfo: InstanceInfo
+
+  background: Waves|undefined
+
+  constructor (
+    public route: ActivatedRoute,
+    public router: Router,
+  ) {
+    this.instanceInfo = route.snapshot.data.instanceInfo
+    if (!this.instanceInfo.homepage_enabled) {
+      router.navigate(['/app'])
+    }
+  }
+
+  async ngAfterViewInit (): Promise<void> {
+    this.background = new Waves({
+      el: 'body',
+      mouseControls: true,
+      touchControls: true,
+      gyroControls: false,
+      minHeight: 200.00,
+      minWidth: 200.00,
+      scale: 1.00,
+      scaleMobile: 1.00,
+      color: 0x70f,
+    })
+  }
+
+  ngOnDestroy () {
+    this.background?.destroy()
+  }
+}
--- a/frontend/src/homepage/components/homeFeatures.component.pug
+++ b/frontend/src/homepage/components/homeFeatures.component.pug
@@ -0,0 +1,90 @@
+.container.mt-5.mb-5
+    h1 Features
+
+    .row
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.progress')
+                .card-body
+                    h5.card-title Smart tabs
+                    .card-text Tabs that detect progress and can notify you when a process is done.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.colors')
+                .card-body
+                    h5.card-title 24-bit color
+                    .card-text Support for True Color and base16 infrastructure, as well as over 150 community ANSI color schemes.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.hotkeys')
+                .card-body
+                    h5.card-title Customizable hotkeys
+                    .card-text Freely customizable single and multi-chord shortcuts.
+
+    .row
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.ssh2')
+                .card-body
+                    h5.card-title SSH and the kitchen sink
+                    .card-text A built-in SSH client with profiles, SFTP, key management, jump hosts, X11 and the rest.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.ports')
+                .card-body
+                    h5.card-title Persistent port forwards
+                    .card-text Preconfigure often-used port forwarding setups.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.zmodem')
+                .card-body
+                    h5.card-title Zmodem transfers
+                    .card-text Send and receive files directly form the prompt in SSH, telnet and serial session.
+
+    .row
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.quake')
+                .card-body
+                    h5.card-title Quake mode
+                    .card-text Dock on the side of the screen? Check. Spawn with a key? Sure. Tabs on bottom? No problem.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.split')
+                .card-body
+                    h5.card-title Split tabs
+                    .card-text Freely rearrangeable split panes which you can also save as a profile.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.profiles')
+                .card-body
+                    h5.card-title Profile manager
+                    .card-text Every option configurable combined in a profile startable a hotkey.
+
+    .row
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.fonts')
+                .card-body
+                    h5.card-title Delicate fontwork
+                    .card-text Ligature support, Powerline and Nerd Fonts, emoji, pixel-perfect boxes.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.history')
+                .card-body
+                    h5.card-title Persistent history and tabs
+                    .card-text Tabby remembers your open tabs, and when you accidentally close them, restores the complete terminal state.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.paste')
+                .card-body
+                    h5.card-title Careful pasting
+                    .card-text Multi-line paste warnings and bracketed paste support prevent accidentaly executing stuff when pasting multiple lines.
--- a/frontend/src/homepage/components/homeFeatures.component.scss
+++ b/frontend/src/homepage/components/homeFeatures.component.scss
@@ -0,0 +1,12 @@
+:host {
+    font-size: 14px;
+}
+
+.card-img-top {
+    aspect-ratio: 2;
+    object-fit: cover;
+}
+
+.card {
+    margin: 10px 20px 20px;
+}
--- a/frontend/src/homepage/components/homeFeatures.component.ts
+++ b/frontend/src/homepage/components/homeFeatures.component.ts
@@ -0,0 +1,23 @@
+import { Component } from '@angular/core'
+
+@Component({
+  selector: 'home-features',
+  templateUrl: './homeFeatures.component.pug',
+  styleUrls: ['./homeFeatures.component.scss'],
+})
+export class HomeFeaturesComponent {
+  screenshots = {
+    progress: require('assets/screenshots/progress.png'),
+    zmodem: require('assets/screenshots/zmodem.png'),
+    colors: require('assets/screenshots/colors.png'),
+    hotkeys: require('assets/screenshots/hotkeys.png'),
+    ports: require('assets/screenshots/ports.png'),
+    ssh2: require('assets/screenshots/ssh2.png'),
+    fonts: require('assets/screenshots/fonts.png'),
+    history: require('assets/screenshots/history.png'),
+    paste: require('assets/screenshots/paste.png'),
+    quake: require('assets/screenshots/quake.png'),
+    split: require('assets/screenshots/split.png'),
+    profiles: require('assets/screenshots/profiles.png'),
+  }
+}
--- a/frontend/src/homepage/components/homeIndex.component.pug
+++ b/frontend/src/homepage/components/homeIndex.component.pug
@@ -0,0 +1,132 @@
+.container
+    .d-flex.m-auto.mb-5
+        a.btn.btn-lg.btn-success.ms-auto.me-3([href]='releaseURL', target='_blank')
+            fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
+            .me-2
+                span.d-block Download
+                small Latest app release
+
+        a.btn.btn-lg.btn-rare.me-3(href='/app', target='_blank')
+            fa-icon([icon]='_webIcon', [fixedWidth]='true')
+            div
+                span.d-block Web version
+                small Experimental
+
+        a.btn.btn-lg.btn-secondary.me-auto([href]='githubURL', target='_blank')
+            fa-icon([icon]='_githubIcon', [fixedWidth]='true')
+            .me-2
+                span.d-block Code
+                small Forever FOSS
+
+.section.section-a
+    .container
+        .row
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.window',
+                    [thumbImage]='screenshots.window'
+                )
+            .col-12.col-xl-6
+                h1 The important stuff
+                ul
+                    li Runs on #[strong Windows, Mac and Linux]
+                    li Integrated #[strong SSH client] with a connection manager
+                    li Integrated #[strong serial terminal]
+                    li PowerShell, PS Core, WSL, Git-Bash, Cygwin, Cmder and CMD support
+                    li Full #[strong Unicode support] including double-width characters
+                    li File transfer from/to SSH sessions via #[strong SFTP and Zmodem]
+                    li Theming and color schemes
+                    li Fully #[strong configurable shortcuts] and multi-chord shortcuts
+                    li #[strong Remembers your tabs] and split panes
+                    li Proper shell experience on Windows including #[strong tab completion]
+                    li Integrated #[strong encrypted container] for SSH secrets and configuration
+
+.section.section-b
+    .container
+        .row
+            .col-12.col-xl-6
+                h1 Terminal features
+                ul
+                    li Multiple #[strong nested panes]
+                    li #[strong Progress bars] and activity notifications for tabs
+                    li Tabby remembers open tabs and panes where you left off
+                    li Tabs on #[strong any side of the window]
+                    li Optional #[strong quake mode] (terminal docked to a side of the screen)
+                    li Optional #[strong global hotkey] to focus/hide the terminal
+                    li Bracketed paste
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.tabs',
+                    [thumbImage]='screenshots.tabs'
+                )
+
+.section.section-a
+    .container
+        .row
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.ssh',
+                    [thumbImage]='screenshots.ssh'
+                )
+            .col-12.col-xl-6
+                h1 SSH Client
+                ul
+                    li SSH2 client with a connection manager
+                    li #[strong SFTP and Zmodem] file transfers
+                    li #[strong X11] and #[strong port forwarding]
+                    li Jump hosts
+                    li #[strong Agent forwarding] - including Pageant and Windows native OpenSSH Agent
+                    li Login scripts
+                    li Optional built-in #[strong password manager] with a master passphrase
+                    li #[strong Proxy command] support
+
+.section.section-b
+    .container
+        .row
+            .col-12.col-xl-6
+                h1 Windows, but nice
+                ul
+                    li Support for #[strong different shells] in the same window
+                    li Better tab completion #[strong cmd.exe] thanks to Clink.
+                    li Explorer menu integration
+                    li Optional #[strong portable mode]
+                    li Current directory detection that works
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.win',
+                    [thumbImage]='screenshots.win'
+                )
+
+.section.section-a
+    .container
+        .row
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.serial',
+                    [thumbImage]='screenshots.serial'
+                )
+            .col-12.col-xl-6
+                h1 Serial Terminal
+                ul
+                    li Multiple #[strong connection profiles]
+                    li Newline conversion
+                    li Text, #[strong readline] and #[strong byte-by-byte] input modes
+                    li Text and #[strong hexdump] output modes
+                    li Zmodem
+                    li Non-standard baud rates
+
+.section.section-a
+    .container
+        h1 And just too much stuff to mention here:
+        ul
+            li Themes #[strong customizable with CSS]
+            li Extensible via #[strong plugins] (in JS)
+            li A bunch of color schemes already included
+            li Telnet client
+            li #[strong Font ligatures] and font fallback
+            li #[strong Clickable URLs], IPs and paths
+            li #[strong WinSCP] integration
+            li Shell #[strong profiles]
+            li Simultaneous #[strong multi-pane input]
+            li Optional PuTTY style #[strong right-click paste] and #[strong copy on select]
+            li macOS vibrancy and Win 10 fluent background support
--- a/frontend/src/homepage/components/homeIndex.component.scss
+++ b/frontend/src/homepage/components/homeIndex.component.scss
@@ -0,0 +1,84 @@
+@import "~theme/vars";
+
+h1 {
+    font-family: $font-family-monospace;
+    font-weight: bold;
+    font-size: 32px;
+    color: #9cb8f9;
+    text-shadow: 0 0 1px black;
+    margin: 0 0 25px;
+}
+
+button, a, .quote {
+    font-family: $font-family-sans-serif;
+}
+
+.quotes {
+    margin: 50px 0;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+
+    .quote {
+        margin: 0 30px;
+
+        .text {
+            font-size: 40px;
+            font-style: italic;
+        }
+
+        .author {
+            font-size: 14px;
+        }
+    }
+
+    @media (max-width: 600px) {
+        & { display: none;}
+    }
+}
+
+strong {
+    background: #849dff;
+    font-weight: normal;
+    padding: 2px 7px;
+    color: black;
+}
+
+.section {
+    padding: 50px 0;
+}
+
+.section-a {
+    background: rgba(0, 0, 0, .5);
+}
+
+.section-b {
+}
+
+::ng-deep lib-ngx-image-zoom {
+    width: 100%;
+    display: block;
+
+    img {
+        min-width: 100px;
+        max-width: 100%;
+        width: 100%;
+    }
+}
+
+.btn-lg {
+    display: flex;
+    align-items: center;
+    text-align: left;
+    line-height: 0.9;
+    padding: 0.7rem 1.2rem;
+
+    fa-icon {
+        margin-right: 5px;
+    }
+
+    small {
+        font-size: 14px;
+        opacity: .5;
+    }
+}
--- a/frontend/src/homepage/components/homeIndex.component.ts
+++ b/frontend/src/homepage/components/homeIndex.component.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core'
+import { faArrowDown, faFlask } from '@fortawesome/free-solid-svg-icons'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+
+@Component({
+  selector: 'home-index',
+  templateUrl: './homeIndex.component.pug',
+  styleUrls: ['./homeIndex.component.scss'],
+})
+export class HomeIndexComponent {
+  githubURL = 'https://github.com/Eugeny/tabby'
+  releaseURL = `${this.githubURL}/releases/latest`
+
+  _downloadIcon = faArrowDown
+  _githubIcon = faGithub
+  _webIcon = faFlask
+
+  screenshots = {
+    window: require('assets/screenshots/window.png'),
+    tabs: require('assets/screenshots/tabs.png'),
+    ssh: require('assets/screenshots/ssh.png'),
+    serial: require('assets/screenshots/serial.png'),
+    win: require('assets/screenshots/win.png'),
+  }
+}
--- a/frontend/src/homepage/index.ts
+++ b/frontend/src/homepage/index.ts
@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+import { NgModule } from '@angular/core'
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
+import { CommonModule } from '@angular/common'
+import { FormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { NgxImageZoomModule } from 'ngx-image-zoom'
+
+import { HomeComponent } from './components/home.component'
+import { HomeIndexComponent } from './components/homeIndex.component'
+import { DemoTerminalComponent } from './components/demoTerminal.component'
+import { HomeFeaturesComponent } from './components/homeFeatures.component'
+import { InstanceInfoResolver } from 'src/api'
+import { CommonAppModule } from 'src/common'
+
+const ROUTES = [
+  {
+    path: '',
+    component: HomeComponent,
+    resolve: {
+      instanceInfo: InstanceInfoResolver,
+    },
+    children: [
+      {
+        path: '',
+        component: HomeIndexComponent,
+      },
+      {
+        path: 'about/features',
+        component: HomeFeaturesComponent,
+      },
+    ],
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonAppModule,
+    CommonModule,
+    FormsModule,
+    NgbNavModule,
+    FontAwesomeModule,
+    NgxImageZoomModule,
+    RouterModule.forChild(ROUTES),
+  ],
+  declarations: [
+    HomeComponent,
+    HomeIndexComponent,
+    HomeFeaturesComponent,
+    DemoTerminalComponent,
+  ],
+})
+export class HomepageModule { }
--- a/frontend/src/homepage/vanta/_base.js
+++ b/frontend/src/homepage/vanta/_base.js
@@ -0,0 +1,401 @@
+/* eslint-disable */
+import { extend, mobileCheck, q, color2Hex } from 'vanta/src/helpers.js'
+// const DEBUGMODE = window.location.toString().indexOf('VANTADEBUG') !== -1
+
+const win = typeof window == 'object'
+if (win && !window.VANTA) {window.VANTA = {}}
+const VANTA = win && window.VANTA || {}
+VANTA.register = (name, Effect) => {
+  return VANTA[name] = (opts) => new Effect(opts)
+}
+VANTA.version = '0.5.21'
+
+export { VANTA }
+
+import { Scene, WebGLRenderer } from 'three/src/Three'
+// const ORBITCONTROLS = {
+//   enableZoom: false,
+//   userPanSpeed: 3,
+//   userRotateSpeed: 2.0,
+//   maxPolarAngle: Math.PI * 0.8, // (pi/2 is pure horizontal)
+//   mouseButtons: {
+//     ORBIT: MOUSE.LEFT,
+//     ZOOM: null,
+//     PAN: null
+//   }
+// }
+// if (DEBUGMODE) {
+//   extend(ORBITCONTROLS, {
+//     enableZoom: true,
+//     zoomSpeed: 4,
+//     minDistance: 100,
+//     maxDistance: 4500
+//   })
+// }
+
+// Namespace for errors
+const error = function () {
+  Array.prototype.unshift.call(arguments, '[VANTA]')
+  return console.error.apply(this, arguments)
+}
+
+VANTA.VantaBase = class VantaBase {
+  constructor (userOptions = {}) {
+    if (!win) {return false}
+    VANTA.current = this
+    this.windowMouseMoveWrapper = this.windowMouseMoveWrapper.bind(this)
+    this.windowTouchWrapper = this.windowTouchWrapper.bind(this)
+    this.windowGyroWrapper = this.windowGyroWrapper.bind(this)
+    this.resize = this.resize.bind(this)
+    this.animationLoop = this.animationLoop.bind(this)
+    this.restart = this.restart.bind(this)
+
+    const defaultOptions = typeof this.getDefaultOptions === 'function' ? this.getDefaultOptions() : this.defaultOptions
+    this.options = extend({
+      mouseControls: true,
+      touchControls: true,
+      gyroControls: false,
+      minHeight: 200,
+      minWidth: 200,
+      scale: 1,
+      scaleMobile: 1,
+    }, defaultOptions)
+
+    if (userOptions instanceof HTMLElement || typeof userOptions === 'string') {
+      userOptions = { el: userOptions }
+    }
+    extend(this.options, userOptions)
+
+    // Set element
+    this.el = this.options.el
+    if (this.el == null) {
+      error('Instance needs "el" param!')
+    } else if (!(this.options.el instanceof HTMLElement)) {
+      const selector = this.el
+      this.el = q(selector)
+      if (!this.el) {
+        error('Cannot find element', selector)
+        return
+      }
+    }
+
+    this.prepareEl()
+    this.initThree()
+    this.setSize() // Init needs size
+
+    try {
+      this.init()
+    } catch (e) {
+      // FALLBACK - just use color
+      error('Init error', e)
+      if (this.renderer && this.renderer.domElement) {
+        this.el.removeChild(this.renderer.domElement)
+      }
+      if (this.options.backgroundColor) {
+        console.log('[VANTA] Falling back to backgroundColor')
+        this.el.style.background = color2Hex(this.options.backgroundColor)
+      }
+      return
+    }
+
+    // After init
+    this.initMouse() // Triggers mouse, which needs to be called after init
+    this.resize()
+    this.animationLoop()
+
+    // Event listeners
+    const ad = window.addEventListener
+    ad('resize', this.resize)
+    window.requestAnimationFrame(this.resize) // Force a resize after the first frame
+
+    // Add event listeners on window, because this element may be below other elements, which would block the element's own mousemove event
+    if (this.options.mouseControls) {
+      ad('scroll', this.windowMouseMoveWrapper)
+      ad('mousemove', this.windowMouseMoveWrapper)
+    }
+    if (this.options.touchControls) {
+      ad('touchstart', this.windowTouchWrapper)
+      ad('touchmove', this.windowTouchWrapper)
+    }
+    if (this.options.gyroControls) {
+      ad('deviceorientation', this.windowGyroWrapper)
+    }
+  }
+
+  setOptions (userOptions={}){
+    extend(this.options, userOptions)
+    this.triggerMouseMove()
+  }
+
+  prepareEl () {
+    let i, child
+    // wrapInner for text nodes, so text nodes can be put into foreground
+    if (typeof Node !== 'undefined' && Node.TEXT_NODE) {
+      for (i = 0; i < this.el.childNodes.length; i++) {
+        const n = this.el.childNodes[i]
+        if (n.nodeType === Node.TEXT_NODE) {
+          const s = document.createElement('span')
+          s.textContent = n.textContent
+          n.parentElement.insertBefore(s, n)
+          n.remove()
+        }
+      }
+    }
+    // Set foreground elements
+    for (i = 0; i < this.el.children.length; i++) {
+      child = this.el.children[i]
+      if (getComputedStyle(child).position === 'static') {
+        child.style.position = 'relative'
+      }
+      if (getComputedStyle(child).zIndex === 'auto') {
+        child.style.zIndex = 1
+      }
+    }
+    // Set canvas and container style
+    if (getComputedStyle(this.el).position === 'static') {
+      this.el.style.position = 'relative'
+    }
+  }
+
+  applyCanvasStyles (canvasEl, opts={}){
+    extend(canvasEl.style, {
+      position: 'absolute',
+      zIndex: 0,
+      top: 0,
+      left: 0,
+      background: '',
+    })
+    extend(canvasEl.style, opts)
+    canvasEl.classList.add('vanta-canvas')
+  }
+
+  initThree () {
+    if (!WebGLRenderer) {
+      console.warn('[VANTA] No THREE defined on window')
+      return
+    }
+    // Set renderer
+    this.renderer = new WebGLRenderer({
+      alpha: true,
+      antialias: true,
+    })
+    this.el.appendChild(this.renderer.domElement)
+    this.applyCanvasStyles(this.renderer.domElement)
+    if (isNaN(this.options.backgroundAlpha)) {
+      this.options.backgroundAlpha = 1
+    }
+
+    this.scene = new Scene()
+  }
+
+  getCanvasElement () {
+    if (this.renderer) {
+      return this.renderer.domElement // js
+    }
+    if (this.p5renderer) {
+      return this.p5renderer.canvas // p5
+    }
+  }
+
+  getCanvasRect () {
+    const canvas = this.getCanvasElement()
+    if (!canvas) {return false}
+    return canvas.getBoundingClientRect()
+  }
+
+  windowMouseMoveWrapper (e){
+    const rect = this.getCanvasRect()
+    if (!rect) {return false}
+    const x = e.clientX - rect.left
+    const y = e.clientY - rect.top
+    if (x>=0 && y>=0 && x<=rect.width && y<=rect.height) {
+      this.mouseX = x
+      this.mouseY = y
+      if (!this.options.mouseEase) {this.triggerMouseMove(x, y)}
+    }
+  }
+  windowTouchWrapper (e){
+    const rect = this.getCanvasRect()
+    if (!rect) {return false}
+    if (e.touches.length === 1) {
+      const x = e.touches[0].clientX - rect.left
+      const y = e.touches[0].clientY - rect.top
+      if (x>=0 && y>=0 && x<=rect.width && y<=rect.height) {
+        this.mouseX = x
+        this.mouseY = y
+        if (!this.options.mouseEase) {this.triggerMouseMove(x, y)}
+      }
+    }
+  }
+  windowGyroWrapper (e){
+    const rect = this.getCanvasRect()
+    if (!rect) {return false}
+    const x = Math.round(e.alpha * 2) - rect.left
+    const y = Math.round(e.beta * 2) - rect.top
+    if (x>=0 && y>=0 && x<=rect.width && y<=rect.height) {
+      this.mouseX = x
+      this.mouseY = y
+      if (!this.options.mouseEase) {this.triggerMouseMove(x, y)}
+    }
+  }
+
+  triggerMouseMove (x, y) {
+    if (x === undefined && y === undefined) { // trigger at current position
+      if (this.options.mouseEase) {
+        x = this.mouseEaseX
+        y = this.mouseEaseY
+      } else {
+        x = this.mouseX
+        y = this.mouseY
+      }
+    }
+    if (this.uniforms) {
+      this.uniforms.iMouse.value.x = x / this.scale // pixel values
+      this.uniforms.iMouse.value.y = y / this.scale // pixel values
+    }
+    const xNorm = x / this.width // 0 to 1
+    const yNorm = y / this.height // 0 to 1
+    typeof this.onMouseMove === 'function' ? this.onMouseMove(xNorm, yNorm) : void 0
+  }
+
+  setSize () {
+    this.scale || (this.scale = 1)
+    if (mobileCheck() && this.options.scaleMobile) {
+      this.scale = this.options.scaleMobile
+    } else if (this.options.scale) {
+      this.scale = this.options.scale
+    }
+    this.width = Math.max(this.el.offsetWidth, this.options.minWidth)
+    this.height = Math.max(this.el.offsetHeight, this.options.minHeight)
+  }
+  initMouse () {
+    // Init mouseX and mouseY
+    if (!this.mouseX && !this.mouseY ||
+      this.mouseX === this.options.minWidth/2 && this.mouseY === this.options.minHeight/2) {
+      this.mouseX = this.width/2
+      this.mouseY = this.height/2
+      this.triggerMouseMove(this.mouseX, this.mouseY)
+    }
+  }
+
+  resize () {
+    this.setSize()
+    if (this.camera) {
+      this.camera.aspect = this.width / this.height
+      if (typeof this.camera.updateProjectionMatrix === 'function') {
+        this.camera.updateProjectionMatrix()
+      }
+    }
+    if (this.renderer) {
+      this.renderer.setSize(this.width, this.height)
+      this.renderer.setPixelRatio(window.devicePixelRatio / this.scale)
+    }
+    typeof this.onResize === 'function' ? this.onResize() : void 0
+  }
+
+  isOnScreen () {
+    const elHeight = this.el.offsetHeight
+    const elRect = this.el.getBoundingClientRect()
+    const scrollTop = window.pageYOffset ||
+      (document.documentElement || document.body.parentNode || document.body).scrollTop
+
+    const offsetTop = elRect.top + scrollTop
+    const minScrollTop = offsetTop - window.innerHeight
+    const maxScrollTop = offsetTop + elHeight
+    return minScrollTop <= scrollTop && scrollTop <= maxScrollTop
+  }
+
+  animationLoop () {
+    // Step time
+    this.t || (this.t = 0)
+    this.t += 1
+    // Uniform time
+    this.t2 || (this.t2 = 0)
+    this.t2 += this.options.speed || 1
+    if (this.uniforms) {
+      this.uniforms.iTime.value = this.t2 * 0.016667 // iTime is in seconds
+    }
+
+    if (this.options.mouseEase) {
+      this.mouseEaseX = this.mouseEaseX || this.mouseX || 0
+      this.mouseEaseY = this.mouseEaseY || this.mouseY || 0
+      if (Math.abs(this.mouseEaseX-this.mouseX) + Math.abs(this.mouseEaseY-this.mouseY) > 0.1) {
+        this.mouseEaseX += (this.mouseX - this.mouseEaseX) * 0.05
+        this.mouseEaseY += (this.mouseY - this.mouseEaseY) * 0.05
+        this.triggerMouseMove(this.mouseEaseX, this.mouseEaseY)
+      }
+    }
+
+    // Only animate if element is within view
+    if (this.isOnScreen() || this.options.forceAnimate) {
+      if (typeof this.onUpdate === 'function') {
+        this.onUpdate()
+      }
+      if (this.scene && this.camera) {
+        this.renderer.render(this.scene, this.camera)
+        this.renderer.setClearColor(this.options.backgroundColor, this.options.backgroundAlpha)
+      }
+      // if (this.stats) this.stats.update()
+      // if (this.renderStats) this.renderStats.update(this.renderer)
+      if (this.fps && this.fps.update) {this.fps.update()}
+      if (typeof this.afterRender === 'function') {this.afterRender()}
+    }
+    return this.req = window.requestAnimationFrame(this.animationLoop)
+  }
+
+  // setupControls() {
+  //   if (DEBUGMODE && OrbitControls) {
+  //     this.controls = new OrbitControls(this.camera, this.renderer.domElement)
+  //     extend(this.controls, ORBITCONTROLS)
+  //     return this.scene.add(new AxisHelper(100))
+  //   }
+  // }
+
+  restart () {
+    // Restart the effect without destroying the renderer
+    if (this.scene) {
+      while (this.scene.children.length) {
+        this.scene.remove(this.scene.children[0])
+      }
+    }
+    if (typeof this.onRestart === 'function') {
+      this.onRestart()
+    }
+    this.init()
+  }
+
+  init () {
+    if (typeof this.onInit === 'function') {
+      this.onInit()
+    }
+    // this.setupControls()
+  }
+
+  destroy () {
+    if (typeof this.onDestroy === 'function') {
+      this.onDestroy()
+    }
+    const rm = window.removeEventListener
+    rm('touchstart', this.windowTouchWrapper)
+    rm('touchmove', this.windowTouchWrapper)
+    rm('scroll', this.windowMouseMoveWrapper)
+    rm('mousemove', this.windowMouseMoveWrapper)
+    rm('deviceorientation', this.windowGyroWrapper)
+    rm('resize', this.resize)
+
+    window.cancelAnimationFrame(this.req)
+    if (this.renderer) {
+      if (this.renderer.domElement) {
+        this.el.removeChild(this.renderer.domElement)
+      }
+      this.renderer = null
+      this.scene = null
+    }
+
+    if (VANTA.current === this) {
+      VANTA.current = null
+    }
+  }
+}
+
+export default VANTA.VantaBase
--- a/frontend/src/homepage/vanta/vanta.waves.js
+++ b/frontend/src/homepage/vanta/vanta.waves.js
@@ -0,0 +1,193 @@
+/* eslint-disable @typescript-eslint/init-declarations */
+/* eslint-disable @typescript-eslint/prefer-for-of */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import VantaBase, { VANTA } from './_base'
+import { rn, ri } from 'vanta/src/helpers.js'
+import { Geometry, MeshPhongMaterial, Vector3, Face3, Mesh, AmbientLight, PerspectiveCamera, PointLight, DoubleSide } from 'three/src/Three'
+import { FaceColors } from 'three/src/Three.Legacy'
+
+const defaultOptions = {
+  color: 0x005588,
+  shininess: 30,
+  waveHeight: 15,
+  waveSpeed: 1,
+  zoom: 1,
+}
+
+export class Waves extends VantaBase {
+  static initClass () {
+    this.prototype.ww = 100
+    this.prototype.hh = 80
+    this.prototype.waveNoise = 4 // Choppiness of water
+  }
+
+  getMaterial () {
+    const options = {
+      color: this.options.color,
+      shininess: this.options.shininess,
+      flatShading: true,
+      vertexColors: FaceColors, // Allow coloring individual faces
+      side: DoubleSide,
+    }
+    return new MeshPhongMaterial(options)
+  }
+
+  onInit () {
+    let i, j
+    const CELLSIZE = 18
+    const material = this.getMaterial()
+    const geometry = new Geometry()
+
+    // Add vertices
+    this.gg = []
+    for (i=0; i<=this.ww; i++){
+      this.gg[i] = []
+      for (j=0; j<=this.hh; j++){
+        const id = geometry.vertices.length
+        const newVertex = new Vector3(
+          (i - this.ww * 0.5) * CELLSIZE,
+          rn(0, this.waveNoise) - 10,
+          (this.hh * 0.5 - j) * CELLSIZE
+        )
+        geometry.vertices.push(newVertex)
+        this.gg[i][j] = id
+      }
+    }
+
+    // Add faces
+    // a b
+    // c d <-- Looking from the bottom right point
+    for (i=1; i<=this.ww; i++){
+      for (j=1; j<=this.hh; j++){
+        let face1, face2
+        const d = this.gg[i][j]
+        const b = this.gg[i][j-1]
+        const c = this.gg[i-1][j]
+        const a = this.gg[i-1][j-1]
+        if (ri(0, 1)) {
+          face1 = new Face3( a, b, c )
+          face2 = new Face3( b, c, d )
+        } else {
+          face1 = new Face3( a, b, d )
+          face2 = new Face3( a, c, d )
+        }
+        geometry.faces.push( face1, face2 )
+      }
+    }
+
+    this.plane = new Mesh(geometry, material)
+    this.scene.add(this.plane)
+
+    // WIREFRAME
+    // lightColor = 0x55aaee
+    // darkColor = 0x225577
+    // thresholdAngle = 2
+    // geo = new EdgesGeometry(geometry, thresholdAngle)
+    // mat = new LineBasicMaterial( { color: lightColor, linewidth: 2 } )
+    // @wireframe = new LineSegments( geo, mat )
+    // @scene.add( @wireframe )
+
+    // LIGHTS
+    const ambience = new AmbientLight( 0xffffff, 0.9 )
+    this.scene.add(ambience)
+
+    const pointLight = new PointLight( 0xffffff, 0.9 )
+    pointLight.position.set(-100, 250, -100)
+    this.scene.add(pointLight)
+
+    // CAMERA
+    this.camera = new PerspectiveCamera(
+      35,
+      this.width / this.height,
+      50, 10000)
+
+    const xOffset = -10
+    const zOffset = -10
+    this.cameraPosition = new Vector3( 250+xOffset, 200, 400+zOffset )
+    this.cameraTarget = new Vector3( 150+xOffset, -30, 200+zOffset )
+    this.camera.position.copy(this.cameraPosition)
+    this.scene.add(this.camera)
+  }
+
+  onUpdate () {
+    // Update options
+    let diff
+    this.plane.material.color.set(this.options.color)
+    this.plane.material.shininess = this.options.shininess
+    this.camera.ox = this.cameraPosition.x / this.options.zoom
+    this.camera.oy = this.cameraPosition.y / this.options.zoom
+    this.camera.oz = this.cameraPosition.z / this.options.zoom
+
+    if (this.controls != null) {
+      this.controls.update()
+    }
+
+    const c = this.camera
+    if (Math.abs(c.tx - c.position.x) > 0.01) {
+      diff = c.tx - c.position.x
+      c.position.x += diff * 0.02
+    }
+    if (Math.abs(c.ty - c.position.y) > 0.01) {
+      diff = c.ty - c.position.y
+      c.position.y += diff * 0.02
+    }
+    if (Math.abs(c.tz - c.position.z) > 0.01) {
+      diff = c.tz - c.position.z
+      c.position.z += diff * 0.02
+    }
+
+    c.lookAt( this.cameraTarget )
+
+    // Fix flickering problems
+    // c.near = Math.max((c.position.y * 0.5) - 20, 1);
+    // c.updateMatrix();
+
+    // WAVES
+    for (let i = 0; i < this.plane.geometry.vertices.length; i++) {
+      const v = this.plane.geometry.vertices[i]
+      if (!v.oy) { // INIT
+        v.oy = v.y
+      } else {
+        const s = this.options.waveSpeed
+        const crossChop = Math.sqrt(s) * Math.cos(-v.x - v.z*0.7) // + s * (i % 229) / 229 * 5
+        const delta = Math.sin(s*this.t*0.02 - s*v.x*0.025 + s*v.z*0.015 + crossChop)
+        const trochoidDelta = Math.pow(delta + 1, 2) / 4
+        v.y = v.oy + trochoidDelta * this.options.waveHeight
+      }
+    }
+
+    // @wireframe.geometry.vertices[i].y = v.y
+
+    this.plane.geometry.dynamic = true
+    this.plane.geometry.computeFaceNormals()
+    this.plane.geometry.verticesNeedUpdate = true
+    this.plane.geometry.normalsNeedUpdate = true
+
+    // @scene.remove( @wireframe )
+    // geo = new EdgesGeometry(@plane.geometry)
+    // mat = new LineBasicMaterial( { color: 0x55aaee, linewidth: 2} )
+    // @wireframe = new LineSegments( geo, mat )
+    // @scene.add( @wireframe )
+
+    if (this.wireframe) {
+      this.wireframe.geometry.fromGeometry(this.plane.geometry)
+      this.wireframe.geometry.computeFaceNormals()
+    }
+  }
+
+  onMouseMove (x, y) {
+    const c = this.camera
+    if (!c.oy) {
+      c.oy = c.position.y
+      c.ox = c.position.x
+      c.oz = c.position.z
+    }
+    c.tx = c.ox + (x-0.5) * 100 / this.options.zoom
+    c.ty = c.oy + (y-0.5) * -100 / this.options.zoom
+    return c.tz = c.oz + (x-0.5) * -50 / this.options.zoom
+  }
+}
+
+Waves.prototype.defaultOptions = defaultOptions
+Waves.initClass()
+export const WavesEffect = VANTA.register('WAVES', Waves)
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <base href="/">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1, minimal-ui, shrink-to-fit=no">
+    <link rel="icon" type="image/png">
+    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+    <title>Tabby - a terminal for a more modern age</title>
+    <meta name="title" content="Tabby - a terminal for a more modern age">
+    <meta name="description" content="Tabby is a free and open source SSH, local and Telnet terminal with everything you'll ever need.">
+
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://tabby.sh/">
+    <meta property="og:title" content="Tabby - a terminal for a more modern age">
+    <meta property="og:description" content="Tabby is a free and open source SSH, local and Telnet terminal with everything you'll ever need.">
+    <meta property="og:image" content="https://user-images.githubusercontent.com/161476/126016449-a053012a-e322-48ed-a2ab-3ed4f3281465.png">
+
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://tabby.sh/">
+    <meta property="twitter:title" content="Tabby - a terminal for a more modern age">
+    <meta property="twitter:description" content="Tabby is a free and open source SSH, local and Telnet terminal with everything you'll ever need.">
+    <meta property="twitter:image" content="https://user-images.githubusercontent.com/161476/126016449-a053012a-e322-48ed-a2ab-3ed4f3281465.png">
+
+    <meta property="theme-color" content="#0c131b">
+
+    <meta property="x-tabby-web-backend-url" content="{{backendURL}}">
+  </head>
+  <body>
+    <app></app>
+  </body>
+</html>
--- a/frontend/src/index.server.ts
+++ b/frontend/src/index.server.ts
@@ -0,0 +1,2 @@
+import './styles.scss'
+export { AppServerModule } from './app.server.module'
--- a/frontend/src/index.ts
+++ b/frontend/src/index.ts
@@ -0,0 +1,14 @@
+import 'zone.js'
+import 'core-js/proposals/reflect-metadata'
+import 'core-js/features/array/flat'
+import 'rxjs'
+
+import { enableProdMode } from '@angular/core'
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+
+import './styles.scss'
+import { AppModule } from './app.module'
+
+
+enableProdMode()
+platformBrowserDynamic().bootstrapModule(AppModule)
--- a/frontend/src/login/components/login.component.pug
+++ b/frontend/src/login/components/login.component.pug
@@ -0,0 +1,9 @@
+.login-view(*ngIf='ready')
+    .buttons
+        a.btn(
+            *ngFor='let provider of providers',
+            [class]='provider.cls',
+            href='{{commonService.backendURL}}/api/1/auth/social/login/{{provider.id}}'
+        )
+            fa-icon([icon]='provider.icon', [fixedWidth]='true')
+            span Log in with {{provider.name}}
--- a/frontend/src/login/components/login.component.scss
+++ b/frontend/src/login/components/login.component.scss
@@ -0,0 +1,25 @@
+:host {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+}
+
+.login-view {
+    margin: auto;
+    flex: none;
+}
+
+.buttons > * {
+    min-width: 200px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    >span {
+        margin: auto;
+    }
+}
--- a/frontend/src/login/components/login.component.ts
+++ b/frontend/src/login/components/login.component.ts
@@ -0,0 +1,32 @@
+import { Component } from '@angular/core'
+import { LoginService, CommonService } from 'src/common'
+
+import { faGithub, faGitlab, faGoogle, faMicrosoft } from '@fortawesome/free-brands-svg-icons'
+
+@Component({
+  selector: 'login',
+  templateUrl: './login.component.pug',
+  styleUrls: ['./login.component.scss'],
+})
+export class LoginComponent {
+  loggedIn: any
+  ready = false
+
+  providers = [
+    { name: 'GitHub', icon: faGithub, cls: 'btn-primary', id: 'github' },
+    { name: 'GitLab', icon: faGitlab, cls: 'btn-warning', id: 'gitlab' },
+    { name: 'Google', icon: faGoogle, cls: 'btn-secondary', id: 'google-oauth2' },
+    { name: 'Microsoft', icon: faMicrosoft, cls: 'btn-light', id: 'microsoft-graph' },
+  ]
+
+  constructor (
+    private loginService: LoginService,
+    public commonService: CommonService,
+  ) { }
+
+  async ngOnInit () {
+    await this.loginService.ready$.toPromise()
+    this.loggedIn = !!this.loginService.user
+    this.ready = true
+  }
+}
--- a/frontend/src/login/index.ts
+++ b/frontend/src/login/index.ts
@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-extraneous-class */
+import { NgModule } from '@angular/core'
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
+import { CommonModule } from '@angular/common'
+import { FormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { NgxImageZoomModule } from 'ngx-image-zoom'
+
+import { LoginComponent } from './components/login.component'
+import { InstanceInfoResolver } from 'src/api'
+import { CommonAppModule } from 'src/common'
+
+const ROUTES = [
+  {
+    path: '',
+    component: LoginComponent,
+    resolve: {
+      instanceInfo: InstanceInfoResolver,
+    },
+  },
+]
+
+@NgModule({
+  imports: [
+    CommonAppModule,
+    CommonModule,
+    FormsModule,
+    NgbNavModule,
+    FontAwesomeModule,
+    NgxImageZoomModule,
+    RouterModule.forChild(ROUTES),
+  ],
+  declarations: [
+    LoginComponent,
+  ],
+})
+export class LoginModule { }
--- a/frontend/src/server.ts
+++ b/frontend/src/server.ts
@@ -0,0 +1,85 @@
+import { install } from 'source-map-support'
+import * as throng from 'throng'
+
+import 'zone.js/dist/zone-node'
+import './ssr-polyfills'
+
+import { enableProdMode } from '@angular/core'
+import { ngExpressEngine } from '@nguniversal/express-engine'
+
+import * as express from 'express'
+
+import { join } from 'path'
+
+
+install()
+enableProdMode()
+
+import { AppServerModule } from './app.server.module'
+
+const engine = ngExpressEngine({
+  bootstrap: AppServerModule,
+})
+
+const hardlinks = {
+  'cwd-detection': 'https://github.com/Eugeny/tabby/wiki/Shell-working-directory-reporting',
+  'privacy-policy': 'https://github.com/Eugeny/tabby/wiki/Privacy-Policy-for-Tabby-Web',
+  'terms-of-use': 'https://github.com/Eugeny/tabby/wiki/Terms-of-Use-of-Tabby-Web',
+}
+
+function start () {
+  const app = express()
+
+  const PORT = process.env.PORT ?? 8000
+  const DIST_FOLDER = join(process.cwd(), 'build')
+
+  app.engine('html', engine)
+
+  app.set('view engine', 'html')
+  app.set('views', DIST_FOLDER)
+
+  app.use('/static', express.static(DIST_FOLDER, {
+    maxAge: '1y',
+  }))
+
+  app.get(['/', '/app', '/login', '/about', '/about/:_'], (req, res) => {
+    res.render(
+      'index',
+      {
+        req,
+        providers: [
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          { provide: 'BACKEND_URL', useValue: process.env.BACKEND_URL ?? '' },
+        ],
+      },
+      (err?: Error, html?: string) => {
+        if (html) {
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          html = html.replace('{{backendURL}}', process.env.BACKEND_URL ?? '')
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        res.status(err ? 500 : 200).send(html ?? err!.message)
+      },
+    )
+  })
+
+  app.get(['/terminal'], (req, res) => {
+    res.sendFile(join(DIST_FOLDER, 'terminal.html'))
+  })
+
+  for (const [key, value] of Object.entries(hardlinks)) {
+    app.get(`/go/${key}`, (req, res) => res.redirect(value))
+  }
+
+  process.umask(0o002)
+  app.listen(PORT, () => {
+    console.log(`Node Express server listening on http://localhost:${PORT}`)
+  })
+}
+
+const WORKERS = process.env.WEB_CONCURRENCY ?? 4
+throng({
+  workers: WORKERS,
+  lifetime: Infinity,
+  start,
+})
--- a/frontend/src/ssr-polyfills.ts
+++ b/frontend/src/ssr-polyfills.ts
@@ -0,0 +1,41 @@
+import * as domino from 'domino'
+import * as fs from 'fs'
+import * as path from 'path'
+
+const template = fs.readFileSync(path.join(process.cwd(), 'build', 'index.html')).toString()
+const win = domino.createWindow(template)
+
+global['window'] = win
+
+Object.defineProperty(win.document.body.style, 'transform', {
+  value: () => {
+    return {
+      enumerable: true,
+      configurable: true,
+    }
+  },
+})
+
+Object.defineProperty(win.document.body.style, 'z-index', {
+  value: () => {
+    return {
+      enumerable: true,
+      configurable: true,
+    }
+  },
+})
+
+global['document'] = win.document
+global['CSS'] = null
+// global['atob'] = win.atob;
+global['atob'] = (base64: string) => {
+  return Buffer.from(base64, 'base64').toString()
+}
+
+function setDomTypes () {
+  // Make all Domino types available as types in the global env.
+  Object.assign(global, domino['impl']);
+  (global as any)['KeyboardEvent'] = domino['impl'].Event
+}
+
+setDomTypes()
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -0,0 +1,16 @@
+$font-family-sans-serif: "Source Sans Pro";
+$border-radius-lg: 0;
+$btn-border-width: 3px;
+
+body {
+    overscroll-behavior: none;
+}
+
+@import "~source-code-pro/source-code-pro.css";
+@import "~source-sans-pro/source-sans-pro.css";
+
+@import "theme/index";
+
+.btn-lg {
+    border-radius: 100px;
+}
--- a/frontend/src/terminal-styles.scss
+++ b/frontend/src/terminal-styles.scss
--- a/frontend/src/terminal.html
+++ b/frontend/src/terminal.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html class="tabby">
+  <head>
+    <meta charset="utf-8" />
+    <style id="custom-css"></style>
+    <style>body { transition: 0.5s background; }</style>
+  </head>
+  <body>
+    <app-root style="display: none">
+      <div class="preload-logo">
+        <div>
+          <div class="tabby-logo"></div>
+          <h1 class="tabby-title">Tabby<sup>α</sup></h1>
+          <div class="progress">
+            <div class="bar" style="width: 0%"></div>
+          </div>
+        </div>
+      </div>
+    </app-root>
+  </body>
+</html>
--- a/frontend/src/terminal.ts
+++ b/frontend/src/terminal.ts
@@ -0,0 +1,72 @@
+import './terminal-styles.scss'
+
+async function start () {
+  window['__filename'] = ''
+
+  await new Promise<void>(resolve => {
+    window.addEventListener('message', event => {
+      if (event.data === 'connector-ready') {
+        resolve()
+      }
+    })
+    window.parent.postMessage('request-connector', '*')
+  })
+
+  const connector = window['__connector__']
+
+  const appVersion = connector.getAppVersion()
+
+  async function webRequire (url) {
+    console.log(`Loading ${url}`)
+    const e = document.createElement('script')
+    window['module'] = { exports: {} } as any
+    window['exports'] = window['module'].exports
+    await new Promise(resolve => {
+      e.onload = resolve
+      e.src = url
+      document.head.appendChild(e)
+    })
+    return window['module'].exports
+  }
+
+  async function prefetchURL (url) {
+    await (await fetch(url)).text()
+  }
+
+  const baseUrl = `${connector.getDistURL()}/${appVersion}`
+  const coreURLs = [
+    `${baseUrl}/tabby-web-container/dist/preload.js`,
+    `${baseUrl}/tabby-web-container/dist/bundle.js`,
+  ]
+
+  await Promise.all(coreURLs.map(prefetchURL))
+
+  for (const url of coreURLs) {
+    await webRequire(url)
+  }
+
+  document.querySelector('app-root')!['style'].display = 'flex'
+
+  const tabby = window['Tabby']
+
+  const pluginURLs = connector.getPluginsToLoad().map(x => `${baseUrl}/${x}`)
+  const pluginModules = await tabby.loadPlugins(pluginURLs, (current, total) => {
+        (document.querySelector('.progress .bar') as HTMLElement).style.width = `${100 * current / total}%` // eslint-disable-line
+  })
+
+  const config = connector.loadConfig()
+  tabby.bootstrap({
+    packageModules: pluginModules,
+    bootstrapData: {
+      config,
+      executable: 'web',
+      isFirstWindow: true,
+      windowID: 1,
+      installedPlugins: [],
+      userPluginsPath: '/',
+    },
+    debugMode: false,
+    connector,
+  })
+}
+start()