bdy 1.12.12-dev-pipeline-run → 1.13.0-dev

package/distTs/src/output/interactive/tunnel.js

@@ -0,0 +1,860 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_js_1 = require("../../utils.js");
+const termkit_no_lazy_require_1 = __importDefault(require("terminal-kit/lib/termkit-no-lazy-require"));
+const isbinaryfile_1 = require("isbinaryfile");
+const format_1 = __importDefault(require("../../format"));
+const COLOR_CYAN = 6;
+const COLOR_LIGHT_GRAY = 7;
+const COLOR_RED = 9;
+const COLOR_GREEN = 10;
+const COLOR_WHITE = 15;
+const ROW_LENGTH = 200;
+const COLUMN_LENGTH = 30;
+const REQUESTS_MAX = 10;
+const REQUESTS_MAX_LENGTH = 80;
+const REQUEST_INFO_MAX_LENGTH = 100;
+const REQUEST_INFO_START_Y = 3;
+const fillString = (str, len) => {
+    if (str.length > len)
+        return str.substring(0, len);
+    const need = len - str.length;
+    for (let i = 0; i < need; i += 1) {
+        str += ' ';
+    }
+    return str;
+};
+const formatBytes = (len) => {
+    if (len < 1024)
+        return `${len}B`;
+    len = Math.round(len / 1024);
+    if (len < 1024)
+        return `${len}KB`;
+    len = Math.round(len / 1024);
+    if (len < 1024)
+        return `${len}MB`;
+    len = Math.round(len / 1024);
+    return `${len}GB`;
+};
+class OutputInteractiveTunnel {
+    constructor(terminal, tunnel) {
+        this.terminal = terminal;
+        this.tunnel = tunnel;
+        this.viewPort = null;
+        this.sprites = {};
+        this.selectedRequest = null;
+    }
+    retry() {
+        if (this.selectedRequest && !this.selectedRequest.requestBody.tooLarge) {
+            this.tunnel.retryHttpLogRequest(this.selectedRequest);
+        }
+    }
+    draw() {
+        let y = 0;
+        y += this.updateSpriteHeader(y);
+        y += this.updateSpriteStatus(y);
+        y += this.updateSpriteDns(y);
+        y += this.updateSpriteType(y);
+        y += this.updateSpriteRegion(y);
+        y += this.updateSpriteTarget(y);
+        y += this.updateSpriteIdentify(y);
+        y += this.updateSpriteTerminate(y);
+        y += this.updateSpriteEntry(y);
+        y += this.updateSpriteLatency(y);
+        y += this.updateSpriteConnections(y);
+        y += this.updateSpriteRequests(y);
+        y += this.updateSpriteRequestInfo(y);
+        this.updateSpriteRequestScrollable();
+        if (y < this.terminal.height) {
+            this.viewPort.fill({
+                char: ' ',
+                region: {
+                    x: 0,
+                    y,
+                    width: this.terminal.width,
+                    height: this.terminal.height - y,
+                },
+            });
+        }
+        this.viewPort.draw();
+    }
+    createSpriteConnections() {
+        let init = fillString('', ROW_LENGTH);
+        init += '\n';
+        init += fillString('Connections', ROW_LENGTH);
+        init += '\n';
+        init += fillString('', ROW_LENGTH);
+        init += '\n';
+        init += fillString('', ROW_LENGTH);
+        this.sprites.connections = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, init);
+        this.sprites.connections.put({
+            x: 0,
+            y: 2,
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString('  Current:', ROW_LENGTH));
+        this.sprites.connections.put({
+            x: 0,
+            y: 3,
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString('  Total:', ROW_LENGTH));
+    }
+    createSpriteRequestInfo() {
+        this.sprites.requestInfo = new termkit_no_lazy_require_1.default.ScreenBuffer({
+            x: 0,
+            y: 0,
+            width: ROW_LENGTH,
+            height: this.terminal.height,
+        });
+        this.sprites.requestInfoScroll = new termkit_no_lazy_require_1.default.ScreenBuffer({
+            x: 0,
+            y: REQUEST_INFO_START_Y,
+            width: REQUEST_INFO_MAX_LENGTH,
+            height: this.terminal.height,
+        });
+    }
+    createSpriteRequests() {
+        let header = fillString('', ROW_LENGTH);
+        header += '\n';
+        header += fillString('Requests (use arrows ↑↓ to inspect & `enter` to retry)', ROW_LENGTH);
+        header += '\n';
+        header += fillString('-------------------------------------------------------------------------------------------------------', ROW_LENGTH);
+        this.sprites.requestsHeader = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, header);
+        this.sprites.requests = new termkit_no_lazy_require_1.default.ScreenBuffer({
+            x: 10,
+            y: 0,
+            width: ROW_LENGTH,
+            height: REQUESTS_MAX,
+        });
+        this.sprites.requestsSelected = new termkit_no_lazy_require_1.default.ScreenBuffer({
+            x: 0,
+            y: 0,
+            width: 10,
+            height: REQUESTS_MAX,
+        });
+        this.sprites.requestsSelectedLast = new termkit_no_lazy_require_1.default.ScreenBuffer({
+            x: 0,
+            y: 0,
+            width: ROW_LENGTH,
+            height: 1,
+        });
+    }
+    logRequestToText(r) {
+        let msg = `${r.method} ${r.url}`;
+        if (msg.length > REQUESTS_MAX_LENGTH)
+            msg = msg.substring(0, REQUESTS_MAX_LENGTH);
+        else
+            msg = fillString(msg, REQUESTS_MAX_LENGTH);
+        if (r.status === 'NEW') {
+            msg += ' ^KNEW^';
+        }
+        else if (r.status >= 500) {
+            msg += ` ^R${r.status}^`;
+        }
+        else if (r.status >= 400) {
+            msg += ` ^Y${r.status}^`;
+        }
+        else if (r.status >= 300) {
+            msg += ` ^B${r.status}^`;
+        }
+        else {
+            msg += ` ${r.status}`;
+        }
+        if (r.finished)
+            msg += ` in ^K${r.time}ms`;
+        return msg;
+    }
+    getPathAndQuery(url) {
+        let query = {};
+        let path;
+        try {
+            const u = new URL(url, 'https://test.com');
+            path = u.pathname;
+            u.searchParams.forEach((val, name) => {
+                query[name] = val;
+            });
+        }
+        catch {
+            path = url;
+        }
+        return {
+            path,
+            query,
+        };
+    }
+    updateSpriteRequestScrollable() {
+        if (this.selectedRequest) {
+            this.sprites.requestInfoScroll.y = this.sprites.requestInfoScrollY;
+            this.sprites.requestInfoScroll.fill({
+                char: ' ',
+                x: 0,
+                y: 0,
+                width: REQUEST_INFO_MAX_LENGTH,
+                height: this.terminal.height,
+            });
+            const { query, path } = this.getPathAndQuery(this.selectedRequest.url);
+            let msg = '^KStatus:^ ';
+            msg += `^W${this.selectedRequest.status}^\n`;
+            msg += '\n^KMethod:^ ';
+            msg += `^WHTTP ${this.selectedRequest.httpVersion} ${this.selectedRequest.method}^\n`;
+            msg += '\n^KPath:^ ';
+            msg += `^W${path}^\n`;
+            const queryKeys = Object.keys(query);
+            if (queryKeys.length > 0) {
+                msg += '\n^WQuery:^\n';
+                queryKeys.forEach((name) => {
+                    msg += `^K${name}:^ ^W${query[name]}^\n`;
+                });
+            }
+            if (this.selectedRequest.requestBody.realLength > 0) {
+                msg += '\n^WBody:^\n';
+                if (this.selectedRequest.requestBody.tooLarge ||
+                    this.selectedRequest.requestBody.realLength >
+                        20 * REQUEST_INFO_MAX_LENGTH) {
+                    msg += `^K<Too large (${formatBytes(this.selectedRequest.requestBody.realLength)})>^\n`;
+                }
+                else {
+                    const isBinary = (0, isbinaryfile_1.isBinaryFileSync)(this.selectedRequest.requestBody.data);
+                    if (isBinary) {
+                        msg += '^K<Binary>^\n';
+                    }
+                    else {
+                        msg += `^K${this.selectedRequest.requestBody.data.toString('utf8')}^\n`;
+                    }
+                }
+            }
+            msg += '\n^WHeaders:^\n';
+            const headers = this.selectedRequest.headers || {};
+            Object.keys(headers).forEach((name) => {
+                msg += `^K${name}:^ ^W${headers[name]}^\n`;
+            });
+            if (this.selectedRequest.finished) {
+                if (this.selectedRequest.responseBody.realLength > 0) {
+                    msg += '\n^WResponse body:^\n';
+                    if (this.selectedRequest.responseBody.tooLarge ||
+                        this.selectedRequest.responseBody.realLength >
+                            20 * REQUEST_INFO_MAX_LENGTH) {
+                        msg += `^K<Too large (${formatBytes(this.selectedRequest.responseBody.realLength)})>^\n`;
+                    }
+                    else {
+                        const isBinary = (0, isbinaryfile_1.isBinaryFileSync)(this.selectedRequest.responseBody.data);
+                        if (isBinary) {
+                            msg += '^K<Binary>^\n';
+                        }
+                        else {
+                            msg += `^K${this.selectedRequest.responseBody.data.toString('utf8')}^\n`;
+                        }
+                    }
+                }
+                msg += '\n^WResponse headers:^\n';
+                const headers = this.selectedRequest.responseHeaders || {};
+                Object.keys(headers).forEach((name) => {
+                    msg += `^K${name}:^ ^W${headers[name]}^\n`;
+                });
+            }
+            this.sprites.requestInfoScroll.put({
+                x: 0,
+                y: 0,
+                newLine: true,
+                markup: true,
+                wrap: true,
+            }, msg);
+        }
+    }
+    updateSpriteRequestInfo(y) {
+        if (this.tunnel.log) {
+            this.sprites.requestInfo.fill({
+                char: ' ',
+                region: {
+                    x: 0,
+                    y: 0,
+                    width: ROW_LENGTH,
+                    height: this.terminal.height,
+                },
+            });
+            if (this.selectedRequest) {
+                this.sprites.requestInfoScroll.draw({
+                    dst: this.sprites.requestInfo,
+                });
+                this.sprites.requestInfo.put({
+                    attr: {
+                        color: COLOR_LIGHT_GRAY,
+                    },
+                    x: 0,
+                    y: 0,
+                }, fillString('', ROW_LENGTH));
+                this.sprites.requestInfo.put({
+                    attr: {
+                        color: COLOR_LIGHT_GRAY,
+                    },
+                    x: 0,
+                    y: 1,
+                }, fillString('Request details (use `space` to scroll)', ROW_LENGTH));
+                this.sprites.requestInfo.put({
+                    attr: {
+                        color: COLOR_LIGHT_GRAY,
+                    },
+                    x: 0,
+                    y: 2,
+                }, fillString('-------------------------------------------------------------------------------------------------------', ROW_LENGTH));
+            }
+            this.sprites.requestInfo.draw({
+                dst: this.viewPort,
+                y,
+            });
+            return this.sprites.requestInfo.height;
+        }
+        return 0;
+    }
+    updateSpriteRequests(y) {
+        if (this.tunnel.log && this.tunnel.httpLog) {
+            const requests = this.tunnel.httpLog.requests;
+            const max = requests.length > REQUESTS_MAX ? REQUESTS_MAX : requests.length;
+            let col = 0;
+            let selectedY = -1;
+            for (let i = 0; i < max; i += 1) {
+                const r = requests[i];
+                if (this.selectedRequest === r) {
+                    selectedY = i;
+                }
+                this.sprites.requests.put({
+                    markup: true,
+                    x: 0,
+                    y: col,
+                }, fillString(this.logRequestToText(r), ROW_LENGTH - 10));
+                col += 1;
+            }
+            if (col < REQUESTS_MAX) {
+                this.sprites.requests.fill({
+                    char: ' ',
+                    region: {
+                        x: 0,
+                        y: col,
+                        width: ROW_LENGTH,
+                        height: REQUESTS_MAX - col,
+                    },
+                });
+            }
+            this.sprites.requestsSelected.fill({
+                char: ' ',
+                region: {
+                    x: 0,
+                    y: 0,
+                    width: 10,
+                    height: REQUESTS_MAX,
+                },
+            });
+            this.sprites.requestsSelectedLast.fill({
+                char: ' ',
+                region: {
+                    x: 0,
+                    y: 0,
+                    width: ROW_LENGTH,
+                    height: 1,
+                },
+            });
+            if (this.selectedRequest) {
+                let last;
+                let seltxt;
+                let selcol;
+                if (this.selectedRequest.requestBody.tooLarge) {
+                    last = '^R[ LARGE ]^ ';
+                    seltxt = '[ LARGE ]';
+                    selcol = COLOR_RED;
+                }
+                else {
+                    last = '^c[ RETRY ]^ ';
+                    seltxt = '[ RETRY ]';
+                    selcol = COLOR_CYAN;
+                }
+                if (selectedY >= 0) {
+                    this.sprites.requestsSelected.put({
+                        attr: {
+                            color: selcol,
+                        },
+                        x: 0,
+                        y: selectedY,
+                    }, fillString(seltxt, 10));
+                }
+                else {
+                    last += this.logRequestToText(this.selectedRequest);
+                    this.sprites.requestsSelectedLast.put({
+                        x: 0,
+                        y: 0,
+                        markup: true,
+                    }, fillString(last, ROW_LENGTH));
+                }
+            }
+            this.sprites.requestsHeader.draw({
+                dst: this.viewPort,
+                y,
+            });
+            let h = this.sprites.requestsHeader.height;
+            this.sprites.requests.draw({
+                dst: this.viewPort,
+                y: y + h,
+            });
+            this.sprites.requestsSelected.draw({
+                dst: this.viewPort,
+                y: y + h,
+            });
+            h += this.sprites.requests.height;
+            this.sprites.requestsSelectedLast.draw({
+                dst: this.viewPort,
+                y: y + h,
+            });
+            h += this.sprites.requestsSelectedLast.height;
+            return h;
+        }
+        return 0;
+    }
+    moveUpDown(up = true) {
+        if (this.tunnel.log &&
+            this.tunnel.httpLog &&
+            this.tunnel.httpLog.requests.length > 0) {
+            const r = this.tunnel.httpLog.requests;
+            const max = r.length > REQUESTS_MAX ? REQUESTS_MAX : r.length;
+            if (!this.selectedRequest)
+                this.selectedRequest = !up ? r[0] : r[max - 1];
+            else {
+                let idx = -1;
+                for (let i = 0; i < max; i += 1) {
+                    if (r[i].id === this.selectedRequest.id) {
+                        idx = !up ? i + 1 : i - 1;
+                        break;
+                    }
+                }
+                if (r[idx] && idx < max)
+                    this.selectedRequest = r[idx];
+                else if (up)
+                    this.selectedRequest = r[max - 1];
+                else
+                    this.selectedRequest = null;
+            }
+            this.sprites.requestInfoScrollY = REQUEST_INFO_START_Y;
+            this.updateSpriteRequestScrollable();
+        }
+    }
+    moveUp() {
+        this.moveUpDown(true);
+    }
+    moveDown() {
+        this.moveUpDown(false);
+    }
+    space() {
+        if (this.selectedRequest && this.sprites.requestInfoScroll) {
+            this.sprites.requestInfoScrollY -= 1;
+        }
+    }
+    createSpriteLatency() {
+        let init = fillString('', ROW_LENGTH);
+        init += '\n';
+        init += fillString('Latencies', ROW_LENGTH);
+        init += '\n';
+        init += fillString('', ROW_LENGTH);
+        init += '\n';
+        init += fillString('', ROW_LENGTH);
+        this.sprites.latency = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, init);
+        this.sprites.latency.put({
+            x: 0,
+            y: 2,
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString('  Region:', ROW_LENGTH));
+        this.sprites.latency.put({
+            x: 0,
+            y: 3,
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString('  Target:', ROW_LENGTH));
+    }
+    createSpriteEntry() {
+        this.sprites.entry = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString('Entry:', ROW_LENGTH));
+    }
+    createSpriteTerminate() {
+        if (this.tunnel.type === utils_js_1.TUNNEL_TLS) {
+            this.sprites.terminate = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+                attr: {
+                    color: COLOR_LIGHT_GRAY,
+                },
+            }, fillString('Terminate:', ROW_LENGTH));
+        }
+    }
+    createSpriteTarget() {
+        this.sprites.target = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString('', ROW_LENGTH));
+    }
+    createSpriteHeader() {
+        this.sprites.header = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+            attr: {
+                color: COLOR_WHITE,
+            },
+        }, `${fillString(`Buddy Tunnel ${(0, utils_js_1.getVersion)()}`, ROW_LENGTH)}\n${fillString('', ROW_LENGTH)}`);
+    }
+    createSpriteStatus() {
+        this.sprites.status = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString('Status:', ROW_LENGTH));
+    }
+    createSpriteType() {
+        this.sprites.type = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString('Type:', ROW_LENGTH));
+    }
+    createSpriteDns() {
+        this.sprites.dns = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString('DNS:', ROW_LENGTH));
+    }
+    createSpriteRegion() {
+        this.sprites.region = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString('Region:', ROW_LENGTH));
+    }
+    createSpriteIdentify() {
+        this.sprites.identify = termkit_no_lazy_require_1.default.ScreenBuffer.createFromString({
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString('HTTP:', ROW_LENGTH));
+    }
+    updateSpriteDns(y) {
+        let text;
+        let color;
+        const { checking, valid } = this.tunnel.dns;
+        if (valid) {
+            text = 'OK';
+            color = COLOR_GREEN;
+        }
+        else if (checking) {
+            text = 'Checking...';
+            color = COLOR_WHITE;
+        }
+        else {
+            text = 'Wrong. Clear DNS local cache';
+            color = COLOR_RED;
+        }
+        this.sprites.dns.put({
+            x: COLUMN_LENGTH,
+            y: 0,
+            attr: {
+                color,
+            },
+        }, fillString(text, ROW_LENGTH - COLUMN_LENGTH));
+        this.sprites.dns.draw({
+            dst: this.viewPort,
+            y,
+        });
+        return this.sprites.dns.height;
+    }
+    updateSpriteHeader(y) {
+        this.sprites.header.draw({
+            dst: this.viewPort,
+            y,
+        });
+        return this.sprites.header.height;
+    }
+    updateSpriteStatus(y) {
+        let text;
+        let color;
+        if (this.tunnel.status === utils_js_1.TUNNEL_OPEN) {
+            text = 'OPEN  ';
+            color = COLOR_GREEN;
+        }
+        else {
+            text = 'CLOSED';
+            color = COLOR_RED;
+        }
+        this.sprites.status.put({
+            x: COLUMN_LENGTH,
+            y: 0,
+            attr: {
+                color,
+            },
+        }, fillString(text, ROW_LENGTH - COLUMN_LENGTH));
+        this.sprites.status.draw({
+            dst: this.viewPort,
+            y,
+        });
+        return this.sprites.status.height;
+    }
+    updateSpriteType(y) {
+        this.sprites.type.put({
+            x: COLUMN_LENGTH,
+            y: 0,
+            attr: {
+                color: COLOR_WHITE,
+            },
+        }, fillString(format_1.default.type(this.tunnel.type), ROW_LENGTH - COLUMN_LENGTH));
+        this.sprites.type.draw({
+            dst: this.viewPort,
+            y,
+        });
+        return this.sprites.type.height;
+    }
+    updateSpriteIdentify(y) {
+        if (this.tunnel.type === utils_js_1.TUNNEL_HTTP) {
+            this.sprites.identify.put({
+                x: COLUMN_LENGTH,
+                y: 0,
+                attr: {
+                    color: COLOR_WHITE,
+                },
+            }, fillString(format_1.default.identify(this.tunnel.identify?.type), ROW_LENGTH - COLUMN_LENGTH));
+            this.sprites.identify.draw({
+                dst: this.viewPort,
+                y,
+            });
+            return this.sprites.identify.height;
+        }
+        return 0;
+    }
+    updateSpriteTarget(y) {
+        let titleText;
+        let valueText;
+        if (this.tunnel.serve) {
+            titleText = 'Serve:';
+            valueText = format_1.default.serve(this.tunnel.serve);
+        }
+        else {
+            titleText = 'Target:';
+            valueText = format_1.default.target(this.tunnel.type, this.tunnel.target);
+        }
+        this.sprites.target.put({
+            x: 0,
+            y: 0,
+            attr: {
+                color: COLOR_LIGHT_GRAY,
+            },
+        }, fillString(titleText, ROW_LENGTH));
+        this.sprites.target.put({
+            x: COLUMN_LENGTH,
+            y: 0,
+            attr: {
+                color: COLOR_WHITE,
+            },
+        }, fillString(valueText, ROW_LENGTH - COLUMN_LENGTH));
+        this.sprites.target.draw({
+            dst: this.viewPort,
+            y,
+        });
+        return this.sprites.target.height;
+    }
+    updateSpriteRegion(y) {
+        this.sprites.region.put({
+            x: COLUMN_LENGTH,
+            y: 0,
+            attr: {
+                color: COLOR_WHITE,
+            },
+        }, fillString(format_1.default.region(this.tunnel.region), ROW_LENGTH - COLUMN_LENGTH));
+        this.sprites.region.draw({
+            dst: this.viewPort,
+            y,
+        });
+        return this.sprites.region.height;
+    }
+    updateSpriteTerminate(y) {
+        if (this.tunnel.type === utils_js_1.TUNNEL_TLS) {
+            this.sprites.terminate.put({
+                x: COLUMN_LENGTH,
+                y: 0,
+                attr: {
+                    color: COLOR_WHITE,
+                },
+            }, fillString(format_1.default.terminate(this.tunnel.terminate), ROW_LENGTH - COLUMN_LENGTH));
+            this.sprites.terminate.draw({
+                dst: this.viewPort,
+                y,
+            });
+            return this.sprites.terminate.height;
+        }
+        return 0;
+    }
+    updateSpriteEntry(y) {
+        this.sprites.entry.put({
+            x: COLUMN_LENGTH,
+            y: 0,
+            attr: {
+                color: COLOR_CYAN,
+                bold: true,
+            },
+        }, fillString(format_1.default.entry(this.tunnel), ROW_LENGTH - COLUMN_LENGTH));
+        this.sprites.entry.draw({
+            dst: this.viewPort,
+            y,
+        });
+        return this.sprites.entry.height;
+    }
+    updateSpriteConnections(y) {
+        const count = Object.keys(this.tunnel.connections).length;
+        this.sprites.connections.put({
+            x: COLUMN_LENGTH,
+            y: 2,
+            attr: {
+                color: COLOR_WHITE,
+            },
+        }, fillString(String(count), ROW_LENGTH - COLUMN_LENGTH));
+        this.sprites.connections.put({
+            x: COLUMN_LENGTH,
+            y: 3,
+            attr: {
+                color: COLOR_WHITE,
+            },
+        }, fillString(String(this.tunnel.totalConnections), ROW_LENGTH - COLUMN_LENGTH));
+        this.sprites.connections.draw({
+            dst: this.viewPort,
+            y,
+        });
+        return this.sprites.connections.height;
+    }
+    updateSpriteLatency(y) {
+        let regionLatency = -1;
+        let targetLatency = -1;
+        if (this.tunnel.regionLatency)
+            regionLatency = this.tunnel.regionLatency.latency;
+        if (this.tunnel.serve)
+            targetLatency = 0;
+        else if (this.tunnel.targetLatency)
+            targetLatency = this.tunnel.targetLatency.latency;
+        let region;
+        let regionColor;
+        let target;
+        let targetColor;
+        if (regionLatency < 0) {
+            region = 'Unreachable';
+            regionColor = COLOR_RED;
+        }
+        else {
+            region = format_1.default.latency(regionLatency);
+            regionColor = COLOR_WHITE;
+        }
+        if (targetLatency < 0) {
+            target = 'Unreachable';
+            targetColor = COLOR_RED;
+        }
+        else {
+            target = format_1.default.latency(targetLatency);
+            targetColor = COLOR_WHITE;
+        }
+        this.sprites.latency.put({
+            x: COLUMN_LENGTH,
+            y: 2,
+            attr: {
+                color: regionColor,
+            },
+        }, fillString(region, ROW_LENGTH - COLUMN_LENGTH));
+        this.sprites.latency.put({
+            x: COLUMN_LENGTH,
+            y: 3,
+            attr: {
+                color: targetColor,
+            },
+        }, fillString(target, ROW_LENGTH - COLUMN_LENGTH));
+        this.sprites.latency.draw({
+            dst: this.viewPort,
+            y,
+        });
+        return this.sprites.latency.height;
+    }
+    init() {
+        this.viewPort = new termkit_no_lazy_require_1.default.ScreenBuffer({
+            dst: this.terminal,
+            width: Math.min(this.terminal.width),
+            height: Math.min(this.terminal.height),
+            x: 1,
+            y: 1,
+        });
+        this.createSpriteHeader();
+        this.createSpriteStatus();
+        this.createSpriteType();
+        this.createSpriteDns();
+        this.createSpriteRegion();
+        this.createSpriteTarget();
+        this.createSpriteIdentify();
+        this.createSpriteTerminate();
+        this.createSpriteEntry();
+        this.createSpriteLatency();
+        this.createSpriteConnections();
+        this.createSpriteRequests();
+        this.createSpriteRequestInfo();
+        this.terminal.grabInput();
+        this.terminal.hideCursor();
+        this.terminal.fullscreen(true);
+        this.terminal.on('key', (name) => {
+            if (name === 'CTRL_C') {
+                this.terminate();
+            }
+            else if (name === 'ENTER') {
+                this.retry();
+            }
+            else if (name === 'DOWN') {
+                this.moveDown();
+            }
+            else if (name === 'UP') {
+                this.moveUp();
+            }
+            else if (name === ' ') {
+                this.space();
+            }
+        });
+        this.terminal.on('resize', () => {
+            this.draw();
+        });
+        this.tunnel.on(utils_js_1.TUNNEL_EVENT_STOPPED, () => {
+            this.terminate();
+        });
+    }
+    terminate() {
+        this.terminal.fullscreen(false);
+        this.terminal.hideCursor(false);
+        this.terminal.grabInput(false);
+        process.exit();
+    }
+    animate() {
+        this.draw();
+        setTimeout(() => {
+            this.animate();
+        }, 50);
+    }
+    start() {
+        this.init();
+        this.animate();
+    }
+}
+exports.default = OutputInteractiveTunnel;