.

frontend/src/api.ts

@@ -0,0 +1,47 @@
+import { HttpClient } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { Resolve } from '@angular/router'
+import { Observable } from 'rxjs'
+
+export interface User {
+    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
+}
+
+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
+}
+
+export interface Gateway {
+    host: string
+    port: number
+    url: string
+    auth_token: string
+}
+
+@Injectable({ providedIn: 'root' })
+export class InstanceInfoResolver implements Resolve<Observable<InstanceInfo>> {
+    constructor (private http: HttpClient) { }
+
+    resolve(): Observable<InstanceInfo> {
+        return this.http.get('/api/1/instance-info').toPromise()
+    }
+}

frontend/src/app.module.ts

@@ -0,0 +1,81 @@
+import { NgModule } from '@angular/core'
+import { NgbDropdownModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
+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 { HttpClientModule, HttpClientXsrfModule, HTTP_INTERCEPTORS } from '@angular/common/http'
+import { ClipboardModule } from '@angular/cdk/clipboard'
+import { TransferHttpCacheModule } from '@nguniversal/common'
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome'
+import { UniversalInterceptor } from './interceptor'
+import { AppComponent } from './components/app.component'
+import { MainComponent } from './components/main.component'
+import { ConfigModalComponent } from './components/configModal.component'
+import { SettingsModalComponent } from './components/settingsModal.component'
+import { HomeComponent } from './components/home.component'
+import { LoginComponent } from './components/login.component'
+import { InstanceInfoResolver } from './api'
+
+// import '@fortawesome/fontawesome-svg-core/styles.css'
+
+const ROUTES = [
+    {
+        path: '',
+        component: HomeComponent,
+        resolve: {
+            instanceInfo: InstanceInfoResolver,
+        },
+    },
+    {
+        path: 'app',
+        component: MainComponent,
+        resolve: {
+            instanceInfo: InstanceInfoResolver,
+        },
+    },
+    {
+        path: 'login',
+        component: LoginComponent,
+        resolve: {
+            instanceInfo: InstanceInfoResolver,
+        },
+    },
+]
+
+@NgModule({
+    imports: [
+        BrowserModule.withServerTransition({
+            appId: 'tabby',
+        }),
+        TransferHttpCacheModule,
+        BrowserAnimationsModule,
+        CommonModule,
+        FormsModule,
+        HttpClientModule,
+        HttpClientXsrfModule,
+        NgbDropdownModule,
+        NgbModalModule,
+        FontAwesomeModule,
+        ClipboardModule,
+        RouterModule.forRoot(ROUTES),
+    ],
+    providers: [
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: UniversalInterceptor,
+            multi: true,
+        },
+    ],
+    declarations: [
+        AppComponent,
+        MainComponent,
+        HomeComponent,
+        LoginComponent,
+        ConfigModalComponent,
+        SettingsModalComponent,
+    ],
+    bootstrap: [AppComponent],
+})
+export class AppModule { }

frontend/src/app.server.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core'
+import { ServerModule, ServerTransferStateModule } from '@angular/platform-server'
+import { AppModule } from './app.module'
+import { AppComponent } from './components/app.component'
+
+@NgModule({
+  imports: [
+    // The AppServerModule should import your AppModule followed
+    // by the ServerModule from @angular/platform-server.
+    AppModule,
+    ServerModule,
+    ServerTransferStateModule,
+  ],
+  // Since the bootstrapped component is not inherited from your
+  // imported AppModule, it needs to be repeated here.
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

frontend/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 1024 1024" xml:space="preserve" style="enable-background:new 0 0 1024 1024"><style type="text/css">.st0{fill:url(#SVGID_1_)}.st1{opacity:.16;fill:url(#SVGID_2_)}.st2{fill:url(#SVGID_3_)}.st3{opacity:.16;fill:url(#SVGID_4_)}.st4{fill:url(#SVGID_5_)}.st5{opacity:.15;fill:url(#SVGID_6_)}.st6{fill:url(#SVGID_7_)}</style><g><linearGradient id="SVGID_1_" x1="260.967" x2="919.184" y1="871.181" y2="491.16" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#669abd"/><stop offset="1" style="stop-color:#77dbdb"/></linearGradient><polygon points="297.54 934.52 882.6 596.72 882.61 427.82 297.54 765.65" class="st0"/><linearGradient id="SVGID_2_" x1="553.505" x2="626.647" y1="617.828" y2="744.513" gradientUnits="userSpaceOnUse"><stop offset=".559" style="stop-color:#000;stop-opacity:0"/><stop offset="1" style="stop-color:#000"/></linearGradient><polygon points="297.54 934.52 882.6 596.72 882.61 427.82 297.54 765.65" class="st1"/></g><g><linearGradient id="SVGID_3_" x1="114.663" x2="334.091" y1="744.528" y2="871.214" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#6a8fad"/><stop offset="1" style="stop-color:#669abd"/></linearGradient><polygon points="151.23 681.18 151.22 850.09 297.54 934.52 297.54 765.65" class="st2"/><linearGradient id="SVGID_4_" x1="260.948" x2="187.806" y1="744.528" y2="871.213" gradientUnits="userSpaceOnUse"><stop offset=".559" style="stop-color:#000;stop-opacity:0"/><stop offset="1" style="stop-color:#000"/></linearGradient><polygon points="151.23 681.18 151.22 850.09 297.54 934.52 297.54 765.65" class="st3"/></g><g><linearGradient id="SVGID_5_" x1="114.663" x2="553.503" y1="237.793" y2="491.157" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#6a8fad"/><stop offset="1" style="stop-color:#669abd"/></linearGradient><polygon points="151.23 174.45 151.21 343.36 443.79 512.27 590.08 427.81" class="st4"/><linearGradient id="SVGID_6_" x1="370.656" x2="297.509" y1="301.128" y2="427.822" gradientUnits="userSpaceOnUse"><stop offset=".559" style="stop-color:#000;stop-opacity:0"/><stop offset="1" style="stop-color:#000"/></linearGradient><polygon points="151.23 174.45 151.21 343.36 443.79 512.27 590.08 427.81" class="st5"/></g><linearGradient id="SVGID_7_" x1="78.091" x2="736.337" y1="554.498" y2="174.459" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#ccecff"/><stop offset="1" style="stop-color:#9feced"/></linearGradient><polygon points="297.51 765.64 151.23 681.18 590.08 427.81 151.23 174.45 297.5 90 882.61 427.82" class="st6"/></svg>

frontend/src/components/app.component.pug

@@ -0,0 +1 @@
+router-outlet

frontend/src/components/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core'
+
+@Component({
+    selector: 'app',
+    templateUrl: './app.component.pug',
+    // styleUrls: ['./app.component.scss'],
+})
+export class AppComponent {
+}

frontend/src/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

frontend/src/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 '../services/config.service'
+import { faCopy, faFile, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { Config, Version } from '../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,
+    ) {
+    }
+
+    async ngOnInit () {
+    }
+
+    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 (confirm('Delete this config? This cannot be undone.')) {
+            await this.configService.deleteConfig(this.configService.activeConfig)
+        }
+        this.configService.selectDefaultConfig()
+        this.modalInstance.dismiss()
+    }
+}

frontend/src/components/home.component.pug

@@ -0,0 +1,144 @@
+.top-half
+    .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='/login', *ngIf='instanceInfo.login_enabled')
+            fa-icon([icon]='_loginIcon', [fixedWidth]='true')
+            span Login
+
+    .container
+        .intro
+            h1 Hey.
+            div My name is Eugene and I've built a nice terminal app, #[em.ms-1 just for you].
+            div Crossplatform, local, SSH, serial, Telnet - it's all there.
+            div Here's a demo 👇
+
+        iframe(#iframe)
+
+.bottom-half
+    .container
+        .d-flex.m-auto.mb-5
+            a.btn.btn-lg.btn-primary.ms-auto.me-3([href]='releaseURL', target='_blank')
+                fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
+                span Latest release
+
+            a.btn.btn-lg.btn-secondary.me-auto([href]='githubURL', target='_blank')
+                fa-icon([icon]='_githubIcon', [fixedWidth]='true')
+                span GitHub
+
+        .quotes
+            .quote
+                .text "reasonable"
+                .author — Michael
+
+            .quote
+                .text "cool"
+                .author — some dude on my ko-fi
+
+            .quote
+                .text "very cool"
+                .author — datsukan
+
+    .section.section-a
+        .container
+            .row
+                .col-12.col-xl-6
+                    img.screenshot([src]='screenshots.window', loading='lazy')
+                .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
+                    img.screenshot([src]='screenshots.tabs', loading='lazy')
+
+    .section.section-a
+        .container
+            .row
+                .col-12.col-xl-6
+                    img.screenshot([src]='screenshots.ssh', loading='lazy')
+                .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
+                    img.screenshot([src]='screenshots.win', loading='lazy')
+
+    .section.section-a
+        .container
+            .row
+                .col-12.col-xl-6
+                    img.screenshot([src]='screenshots.serial', loading='lazy')
+                .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

frontend/src/components/home.component.scss

@@ -0,0 +1,111 @@
+@import "../theme/vars.scss";
+@import "~@fontsource/fira-code/latin.css";
+
+:host {
+    font-size: 20px;
+    font-family: 'Fira Code', monospace;
+
+    button, a, .quote {
+        font-family: $font-family-sans-serif;
+    }
+}
+
+.top-half {
+    background: linear-gradient(#0c141c, #15202b);
+
+    h1 {
+        font-size: 80px;
+    }
+}
+
+.navbar {
+    display: flex;
+    padding: 15px 30px;
+
+    a, button {
+        margin-left: 10px;
+    }
+}
+
+.brand {
+    width: 32px;
+}
+
+h1 {
+    font-family: $font-family-monospace;
+    font-weight: bold;
+    font-size: 48px;
+    text-shadow: 0 0 1px black;
+    margin: 0 0 25px;
+}
+
+.intro {
+    width: 60vw;
+    margin: auto;
+}
+
+iframe {
+    display: block;
+    margin: auto;
+    position: relative;
+    top: 20vw;
+    margin-top: -16vw;
+
+    width: calc(min(max(480px, 60vw), 100vw));
+    height: calc(max(460px, 42vw));
+    overflow: hidden;
+    border-radius: 5px;
+    box-shadow: 0 0 2px black, 0 0 50px #6ef2ff05, 0 0 150px #6854ff14;
+}
+
+
+.bottom-half {
+    padding-top: 24vw;
+}
+
+.quotes {
+    margin: 50px 0;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+
+    .quote {
+        margin: 0 30px;
+
+        .text {
+            font-size: 50px;
+            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;
+
+    .screenshot {
+        min-width: 0;
+        max-width: 100%;
+    }
+}
+
+.section-a {
+    background: rgba(0, 0, 0, .5);
+}
+
+.section-b {
+}

frontend/src/components/home.component.ts

@@ -0,0 +1,129 @@
+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 { InstanceInfo, Version } from '../api'
+import { faCoffee, faDownload, faSignInAlt } from '@fortawesome/free-solid-svg-icons'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+import { ActivatedRoute } from '@angular/router'
+import { CommonService } from '../services/common.service'
+
+
+class DemoConnector {
+    constructor (
+        targetWindow: Window,
+        private commonService: CommonService,
+        private version: Version,
+    ) {
+        this.getDistURL().then(distURL => {
+            targetWindow['tabbyWebDemoDataPath'] = `${distURL}/${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
+    }
+
+    async getDistURL (): Promise<string> {
+        return await 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<Buffer>()
+    close$ = new Subject<Buffer>()
+
+    async connect (options) {
+        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: 'home',
+    templateUrl: './home.component.pug',
+    styleUrls: ['./home.component.scss'],
+})
+export class HomeComponent {
+    @ViewChild('iframe') iframe: ElementRef
+    connector: DemoConnector
+    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
+    _githubIcon = faGithub
+    _donateIcon = faCoffee
+
+    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'),
+    }
+
+    instanceInfo: InstanceInfo
+
+    constructor (
+        private http: HttpClient,
+        private commonService: CommonService,
+        route: ActivatedRoute,
+    ) {
+        window.addEventListener('message', this.connectorRequestHandler)
+        this.instanceInfo = route.snapshot.data.instanceInfo
+    }
+
+    // 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()
+        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.html'
+    }
+
+    ngOnDestroy (): void {
+        window.removeEventListener('message', this.connectorRequestHandler)
+    }
+}

frontend/src/components/login.component.pug

@@ -0,0 +1,10 @@
+main(*ngIf='ready && loggedIn')
+.login-view(*ngIf='ready && !loggedIn')
+    .buttons
+        a.btn(
+            *ngFor='let provider of providers',
+            [class]='provider.cls',
+            href='{{commonService.backendURL$|async}}/api/1/auth/social/login/{{provider.id}}'
+        )
+            fa-icon([icon]='provider.icon', [fixedWidth]='true')
+            span Log in with {{provider.name}}

frontend/src/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;
+    }
+}

frontend/src/components/login.component.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core'
+import { LoginService } from '../services/login.service'
+import { CommonService } from '../services/common.service'
+
+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
+    }
+}

frontend/src/components/main.component.pug

@@ -0,0 +1,14 @@
+.sidebar
+    img.logo(src='{{_logo}}')
+
+    button.btn.mt-auto((click)='openConfig()')
+        fa-icon([icon]='_configIcon', [fixedWidth]='true')
+
+    button.btn((click)='openSettings()')
+        fa-icon([icon]='_settingsIcon', [fixedWidth]='true')
+
+    button.btn.mt-3((click)='logout()')
+        fa-icon([icon]='_logoutIcon', [fixedWidth]='true')
+
+.terminal([hidden]='!showApp')
+    iframe(#iframe)

frontend/src/components/main.component.scss

@@ -0,0 +1,61 @@
+@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;
+    }
+
+    >button, >[ngbdropdown] > button {
+        width: 64px;
+        height: 64px;
+        background: transparent;
+        box-shadow: none;
+
+        &::after {
+            display: none;
+        }
+    }
+}
+
+.terminal {
+    flex: 1 1 0;
+    overflow: hidden;
+    position: relative;
+}
+
+iframe {
+    background: $body-bg;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+
+.config-menu {
+    .header {
+        border-bottom: 1px solid black;
+    }
+}

frontend/src/components/main.component.ts

@@ -0,0 +1,110 @@
+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, faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
+import { LoginService } from '../services/login.service'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { SettingsModalComponent } from './settingsModal.component'
+import { ConfigModalComponent } from './configModal.component'
+import { ConfigService } from '../services/config.service'
+import { combineLatest } from 'rxjs'
+import { Config, Version } from '../api'
+import { Router } from '@angular/router'
+
+@Component({
+    selector: 'main',
+    templateUrl: './main.component.pug',
+    styleUrls: ['./main.component.scss'],
+})
+export class MainComponent {
+    _logo = require('../assets/logo.svg')
+    _settingsIcon = faCog
+    _logoutIcon = faSignOutAlt
+    _addIcon = faPlus
+    _configIcon = faFile
+
+    showApp = false
+
+    @ViewChild('iframe') iframe: ElementRef
+
+    constructor (
+        titleService: Title,
+        public appConnector: AppConnectorService,
+        private http: HttpClient,
+        public loginService: LoginService,
+        private ngbModal: NgbModal,
+        private config: ConfigService,
+        private router: Router,
+    ) {
+        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()
+        if (!this.loginService.user) {
+            this.router.navigate(['/login'])
+            return
+        }
+
+        combineLatest(
+            this.config.activeConfig$,
+            this.config.activeVersion$
+        ).subscribe(([config, version]) => {
+            if (config && version) {
+                this.reloadApp(config, version)
+            }
+        })
+        this.config
+        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.html'
+        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
+        this.unloadApp()
+        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 = '/'
+    }
+}

frontend/src/components/settingsModal.component.pug

@@ -0,0 +1,73 @@
+.modal-header
+    h3.modal-title Settings
+
+.modal-body
+    .mb-3
+        h5 GitHub account
+        a.btn.btn-info(href='/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
+
+    div(*ngIf='appConnector.sockets.length')
+        h5 Active connections
+        .list-group.list-group-flush
+            .list-group-item(*ngFor='let socket of appConnector.sockets')
+                div {{socket.options.host}}:{{socket.options.port}}
+                .text-muted via {{socket.url}}
+
+.modal-footer
+    button.btn.btn-primary((click)='apply()') Apply
+    button.btn.btn-secondary((click)='cancel()') Cancel

frontend/src/components/settingsModal.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core'
+import { LoginService } from '../services/login.service'
+
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { User } from '../api'
+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',
+    // styleUrls: ['./settingsModal.component.scss'],
+})
+export class SettingsModalComponent {
+    user: User
+    customGatewayEnabled = false
+    _githubIcon = faGithub
+    _copyIcon = faCopy
+    _okIcon = faCheck
+
+    constructor (
+        public appConnector: AppConnectorService,
+        private modalInstance: NgbActiveModal,
+        private loginService: LoginService,
+    ) {
+        this.user = { ...loginService.user }
+        this.customGatewayEnabled = !!this.user.custom_connection_gateway
+    }
+
+    async ngOnInit () {
+    }
+
+    async apply () {
+        Object.assign(this.loginService.user, this.user)
+        this.modalInstance.close()
+        await this.loginService.updateUser()
+    }
+
+    cancel () {
+        this.modalInstance.dismiss()
+    }
+}

frontend/src/index.html

@@ -0,0 +1,28 @@
+<!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">
+  </head>
+  <body>
+    <app></app>
+  </body>
+</html>

frontend/src/index.server.ts

@@ -0,0 +1,2 @@
+import './styles.scss'
+export { AppServerModule } from './app.server.module'

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)

frontend/src/interceptor.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core'
+import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http'
+import { Observable, from } from 'rxjs'
+import { switchMap } from 'rxjs/operators'
+import { CommonService } from './services/common.service'
+
+@Injectable()
+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('/')) {
+            return from(this.commonService.backendURL$).pipe(switchMap((baseUrl: string) => {
+                const endpoint = request.url
+
+                request = request.clone({
+                    url: `${baseUrl}${endpoint}`,
+                    withCredentials: true,
+                })
+                return next.handle(request)
+            }))
+        }
+        return next.handle(request)
+    }
+}

frontend/src/server.ts

@@ -0,0 +1,52 @@
+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,
+})
+
+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.get('*.*', express.static(DIST_FOLDER, {
+        maxAge: '1y',
+    }))
+
+    app.get('*', (req, res) => {
+        res.render('index', { req })
+    })
+
+    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,
+})

frontend/src/services/appConnector.service.ts

@@ -0,0 +1,201 @@
+import { Buffer } from 'buffer'
+import { Subject } from 'rxjs'
+import { debounceTime } from 'rxjs/operators'
+import { HttpClient } from '@angular/common/http'
+import { Injectable, Injector } from '@angular/core'
+import { Config, Gateway, Version } from '../api'
+import { LoginService } from './login.service'
+import { CommonService } from './common.service'
+
+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
+
+    constructor (
+        injector: Injector,
+    ) {
+        this.appConnector = injector.get(AppConnectorService)
+        this.loginService = injector.get(LoginService)
+    }
+
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    async connect (options: any): Promise<void> {
+        this.options = options
+        this.url = this.loginService.user.custom_connection_gateway
+        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 = err => {
+            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) {
+        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) {
+        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
+    sockets: SocketProxy[] = []
+
+    constructor (
+        private injector: Injector,
+        private http: HttpClient,
+        private commonService: CommonService,
+    ) {
+
+        this.configUpdate.pipe(debounceTime(1000)).subscribe(async content => {
+            const result = await this.http.patch(`/api/1/configs/${this.config.id}`, { content }).toPromise()
+            Object.assign(this.config, result)
+        })
+    }
+
+    setState (config: Config, version: Version) {
+        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
+    }
+
+    async getDistURL (): Promise<string> {
+        return await 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 () {
+        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()
+        } catch (err){
+            if (err.status === 503) {
+                throw new Error('All connections gateway are unavailable right now')
+            }
+            throw err
+        }
+    }
+}

frontend/src/services/common.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core'
+
+
+@Injectable({ providedIn: 'root' })
+export class CommonService {
+    private configPromise: Promise<any>
+    backendURL$: Promise<string>
+
+    constructor () {
+        this.configPromise = this.getConfig()
+        this.backendURL$ = this.configPromise.then(cfg => {
+            let backendURL = cfg.backendURL
+            if (backendURL.endsWith('/')) {
+                backendURL = backendURL.slice(0, -1)
+            }
+            return backendURL
+        })
+    }
+
+    private async getConfig () {
+        return (await fetch('/config.json')).json()
+    }
+}

frontend/src/services/config.service.ts

@@ -0,0 +1,96 @@
+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 { return this._activeConfig }
+    get activeVersion (): Version { return this._activeVersion }
+
+    private _activeConfig: Config|null = null
+    private _activeVersion: Version|null = null
+
+    constructor (
+        private http: HttpClient,
+        private loginService: LoginService,
+    ) {
+        this.init()
+    }
+
+    async updateUser () {
+        await this.http.put('/api/1/user', this.user).toPromise()
+    }
+
+    async createNewConfig (): Promise<Config> {
+        const config = await this.http.post('/api/1/configs', {
+            content: '{}',
+            last_used_with_version: this._activeVersion?.version ?? this.getLatestStableVersion().version,
+        }).toPromise()
+        this.configs.push(config)
+        return config
+    }
+
+    getLatestStableVersion () {
+        return this.versions[0]
+    }
+
+    async duplicateActiveConfig () {
+        const copy = {...this._activeConfig, pk: undefined}
+        this.configs.push(await this.http.post('/api/1/configs', copy).toPromise())
+    }
+
+    async selectVersion (version: Version) {
+        this._activeVersion = version
+        this.activeVersion$.next(version)
+    }
+
+    async selectConfig (config: Config) {
+        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)
+        this.loginService.user.active_config = config.id
+        await this.loginService.updateUser()
+    }
+
+    async selectDefaultConfig () {
+        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) {
+        await this.http.delete(`/api/1/configs/${config.id}`).toPromise()
+        this.configs = this.configs.filter(x => x.id !== config.id)
+    }
+
+    private async init () {
+        this.configs = await this.http.get('/api/1/configs').toPromise()
+        this.versions = await this.http.get('/api/1/versions').toPromise()
+        this.versions.sort((a, b) => -semverCompare(a.version, b.version))
+
+        if (!this.configs.length) {
+            await this.createNewConfig()
+        }
+
+        this.ready$.next()
+        this.ready$.complete()
+    }
+}

frontend/src/services/login.service.ts

@@ -0,0 +1,30 @@
+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
+    ready$ = new AsyncSubject<void>()
+
+    constructor (private http: HttpClient) {
+        this.init()
+    }
+
+    async updateUser () {
+        await this.http.put('/api/1/user', this.user).toPromise()
+    }
+
+    private async init () {
+        try {
+            this.user = await this.http.get('/api/1/user').toPromise()
+        } catch {
+            this.user = null
+        }
+
+        this.ready$.next()
+        this.ready$.complete()
+    }
+}

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();

frontend/src/styles.scss

@@ -0,0 +1,12 @@
+$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.scss"

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>

frontend/src/terminal.ts

@@ -0,0 +1,70 @@
+import './terminal-styles.scss'
+
+async function start () {
+    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.querySelector('head').appendChild(e)
+        })
+        return window['module'].exports
+    }
+
+    async function prefetchURL (url) {
+        await (await fetch(url)).text()
+    }
+
+    const baseUrl = `${await 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()

frontend/src/theme/index.scss

@@ -0,0 +1,82 @@
+@import "vars";
+
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/utilities";
+
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+// @import "~bootstrap/scss/images";
+@import "~bootstrap/scss/containers";
+@import "~bootstrap/scss/grid";
+// @import "~bootstrap/scss/tables";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/transitions";
+@import "~bootstrap/scss/dropdown";
+@import "~bootstrap/scss/button-group";
+// @import "~bootstrap/scss/nav";
+// @import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/card";
+// @import "~bootstrap/scss/accordion";
+// @import "~bootstrap/scss/breadcrum/b";
+// @import "~bootstrap/scss/pagination";
+@import "~bootstrap/scss/badge";
+@import "~bootstrap/scss/alert";
+// @import "~bootstrap/scss/progress";
+@import "~bootstrap/scss/list-group";
+// @import "~bootstrap/scss/close";
+// @import "~bootstrap/scss/toasts";
+@import "~bootstrap/scss/modal";
+// @import "~bootstrap/scss/tooltip";
+// @import "~bootstrap/scss/popover";
+// @import "~bootstrap/scss/carousel";
+// @import "~bootstrap/scss/spinners";
+// @import "~bootstrap/scss/offcanvas";
+
+// Helpers
+@import "~bootstrap/scss/helpers";
+@import "~bootstrap/scss/utilities/api";
+
+::-webkit-scrollbar-track
+{
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+  background-color: $gray-900;
+}
+
+::-webkit-scrollbar
+{
+  height: 6px;
+  width: 6px;
+  background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb
+{
+  background-color: $gray-700;
+}
+
+
+.dropdown-menu {
+  box-shadow: $dropdown-box-shadow;
+}
+
+.modal-header, .modal-body {
+  padding: $modal-inner-padding $modal-inner-padding * 2;
+}
+
+.modal-footer {
+  background: #00000030;
+}
+
+a, button {
+  fa-icon {
+    opacity: .75;
+  }
+
+  fa-icon + * {
+    margin-left: 5px;
+  }
+}

frontend/src/theme/vars.scss

@@ -0,0 +1,197 @@
+$white:    #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black:    #000;
+
+
+$red:    #d9534f !default;
+$orange: #f0ad4e !default;
+$yellow: #ffd500 !default;
+$green:  #5cb85c !default;
+$blue:   #0275d8 !default;
+$teal:   #5bc0de !default;
+$pink:   #ff5b77 !default;
+$purple: #613d7c !default;
+$semi: rgba(0,0,0, .5);
+
+
+@import "~bootstrap/scss/functions";
+
+$table-bg: rgba(255,255,255,.05);
+$table-bg-hover: rgba(255,255,255,.1);
+$table-border-color: rgba(255,255,255,.1);
+
+$theme-colors: (
+  primary: $blue,
+  secondary: #38434e,
+  success: $green,
+  info: $blue,
+  warning: $orange,
+  danger: $red,
+  light: $gray-300,
+  dark: #0e151d,
+  rare: $purple,
+  semi: $semi
+);
+
+$body-color: #ccc;
+$body-bg: #0c131b;
+
+$font-family-sans-serif: "Source Sans Pro";
+$font-family-monospace: "Source Code Pro";
+$font-size-base: 14rem / 16;
+$font-size-lg: 1.28rem;
+$font-size-sm: .85rem;
+
+$line-height-base: 1.6;
+
+$border-radius:               .35rem;
+$border-radius-lg:            .35rem;
+$border-radius-sm:            .2rem;
+
+$box-shadow: 0 .5rem 1rem rgba($black, .5) !default;
+
+// -----
+
+$headings-color: #ced9e2;
+$headings-font-weight: lighter;
+
+$input-btn-padding-y: .3rem;
+$input-btn-padding-x: .9rem;
+$input-btn-line-height: 1.6;
+$input-btn-line-height-sm: 1.8;
+$input-btn-line-height-lg: 1.8;
+$btn-focus-width: 1px;
+
+$h4-font-size: 18px;
+
+$link-color: $gray-400;
+$link-hover-color: $white;
+$link-hover-decoration: none;
+
+$component-active-color: $white;
+$component-active-bg: $blue;
+
+$list-group-color: $body-color;
+$list-group-bg: $table-bg;
+$list-group-border-color: $table-border-color;
+
+$list-group-item-padding-y: 0.8rem;
+$list-group-item-padding-x: 1rem;
+
+$list-group-hover-bg: $table-bg-hover;
+$list-group-active-bg: rgba(255,255,255,.2);
+$list-group-active-color: $component-active-color;
+$list-group-active-border-color: translate;
+
+$list-group-action-color: $body-color;
+$list-group-action-hover-color: white;
+
+$list-group-action-active-color: $component-active-color;
+$list-group-action-active-bg: $list-group-active-bg;
+
+$alert-padding-y: 0.9rem;
+$alert-padding-x: 1.25rem;
+
+$transition-base: all .15s ease-in-out;
+$transition-fade: opacity .1s linear;
+$transition-collapse: height .35s ease;
+$btn-transition: all .15s ease-in-out;
+
+$popover-bg: $body-bg;
+$popover-body-color: $body-color;
+$popover-header-bg: $table-bg-hover;
+$popover-header-color: $headings-color;
+$popover-arrow-color: $popover-bg;
+$popover-max-width: 360px;
+
+$btn-border-width:  2px;
+
+$input-bg:                       $black;
+$input-disabled-bg:              #2e3235;
+
+$input-color:                    #ddd;
+$input-border-color:             $input-bg;
+$input-border-width:             2px;
+
+$input-focus-bg:                 $input-bg;
+$input-focus-border-color:       rgba(171, 171, 171, 0.61);
+$input-focus-color:              $input-color;
+
+$input-group-addon-color: $input-color;
+$input-group-addon-bg: $input-bg;
+$input-group-addon-border-color: transparent;
+$input-group-btn-border-color: $input-bg;
+
+$form-switch-color:               rgba(255,255,255, .25);
+
+$nav-tabs-border-radius: 0;
+$nav-tabs-border-color: transparent;
+$nav-tabs-border-width: 2px;
+$nav-tabs-link-hover-border-color: transparent;
+$nav-tabs-link-active-color: #eee;
+$nav-tabs-link-active-bg: transparent;
+$nav-tabs-link-active-border-color: #eee;
+
+$navbar-padding-y: 0;
+$navbar-padding-x: 0;
+
+$dropdown-bg: $body-bg;
+$dropdown-color: $body-color;
+$dropdown-border-width: 1px;
+$dropdown-border-color: #ffffff24;
+$dropdown-header-color: $gray-500;
+
+$dropdown-link-color: $body-color;
+$dropdown-link-hover-color: #eee;
+$dropdown-link-hover-bg: rgba(255,255,255,.04);
+$dropdown-link-active-color: white;
+$dropdown-link-active-bg: rgba(0, 0, 0, .2);
+$dropdown-item-padding-y: 0.5rem;
+$dropdown-item-padding-x: 1.5rem;
+
+
+$code-color: $orange;
+$code-bg: rgba(0, 0, 0, .25);
+$code-padding-y: 3px;
+$code-padding-x: 5px;
+$pre-bg: $dropdown-bg;
+$pre-color: $dropdown-link-color;
+
+$badge-font-size: 0.75rem;
+$badge-font-weight: bold;
+$badge-padding-y: 4px;
+$badge-padding-x: 6px;
+
+
+$custom-control-indicator-size: 1.2rem;
+$custom-control-indicator-bg: $body-bg;
+$custom-control-indicator-border-color: lighten($body-bg, 25%);
+$custom-control-indicator-checked-bg: theme-color("primary");
+$custom-control-indicator-checked-color: $body-bg;
+$custom-control-indicator-checked-border-color: transparent;
+$custom-control-indicator-active-bg: rgba(255, 255, 0, 0.5);
+
+
+$modal-content-bg:               $body-bg;
+$modal-content-border-color:     $body-bg;
+$modal-header-border-width:         0;
+$modal-footer-border-width:         0;
+
+$modal-content-border-color:        #ffffff24;
+$modal-content-border-width:        1px;
+
+
+$progress-bg: $table-bg;
+$progress-height: 3px;
+
+$alert-bg-scale: 90%;
+$alert-border-scale: 50%;
+$alert-color-scale: 50%;