bdy 1.7.46-dev

package/src/output/interactive/tunnel.js

@@ -0,0 +1,871 @@
+const {
+  getVersion,
+  TUNNEL_HTTP,
+  TUNNEL_OPEN,
+  TUNNEL_TLS
+} = require('../../utils.js');
+const TerminalKit = require('terminal-kit/lib/termkit-no-lazy-require');
+const { isBinaryFileSync } = require('isbinaryfile');
+const Format = require('../../format');
+const { TUNNEL_EVENT_STOPPED } = require('../../utils');
+
+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 = TerminalKit.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 TerminalKit.ScreenBuffer({
+      x: 0,
+      y: 0,
+      width: ROW_LENGTH,
+      height: this.terminal.height
+    });
+    this.sprites.requestInfoScroll = new TerminalKit.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 = TerminalKit.ScreenBuffer.createFromString({
+      attr: {
+        color: COLOR_LIGHT_GRAY
+      }
+    }, header);
+    this.sprites.requests = new TerminalKit.ScreenBuffer({
+      x: 10,
+      y: 0,
+      width: ROW_LENGTH,
+      height: REQUESTS_MAX
+    });
+    this.sprites.requestsSelected = new TerminalKit.ScreenBuffer({
+      x: 0,
+      y: 0,
+      width: 10,
+      height: REQUESTS_MAX
+    });
+    this.sprites.requestsSelectedLast = new TerminalKit.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 = 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 = 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 = TerminalKit.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 = TerminalKit.ScreenBuffer.createFromString({
+      attr: {
+        color: COLOR_LIGHT_GRAY
+      }
+    }, fillString('Entry:', ROW_LENGTH));
+  }
+
+  createSpriteTerminate() {
+    if (this.tunnel.type === TUNNEL_TLS) {
+      this.sprites.terminate = TerminalKit.ScreenBuffer.createFromString({
+        attr: {
+          color: COLOR_LIGHT_GRAY
+        }
+      }, fillString('Terminate:', ROW_LENGTH));
+    }
+  }
+
+  createSpriteTarget() {
+    this.sprites.target = TerminalKit.ScreenBuffer.createFromString({
+      attr: {
+        color: COLOR_LIGHT_GRAY
+      }
+    }, fillString('', ROW_LENGTH));
+  }
+
+  createSpriteHeader() {
+    this.sprites.header = TerminalKit.ScreenBuffer.createFromString({
+      attr: {
+        color: COLOR_WHITE
+      }
+    }, `${fillString(`Buddy Tunnel ${getVersion()}`, ROW_LENGTH)}\n${fillString('', ROW_LENGTH)}`);
+  }
+
+  createSpriteStatus() {
+    this.sprites.status = TerminalKit.ScreenBuffer.createFromString({
+      attr: {
+        color: COLOR_LIGHT_GRAY
+      }
+    }, fillString('Status:', ROW_LENGTH));
+  }
+
+  createSpriteType() {
+    this.sprites.type = TerminalKit.ScreenBuffer.createFromString({
+      attr: {
+        color: COLOR_LIGHT_GRAY
+      }
+    }, fillString('Type:', ROW_LENGTH));
+  }
+
+  createSpriteDns() {
+    this.sprites.dns = TerminalKit.ScreenBuffer.createFromString({
+      attr: {
+        color: COLOR_LIGHT_GRAY
+      }
+    }, fillString('DNS:', ROW_LENGTH));
+  }
+
+  createSpriteRegion() {
+    this.sprites.region = TerminalKit.ScreenBuffer.createFromString({
+      attr: {
+        color: COLOR_LIGHT_GRAY
+      }
+    }, fillString('Region:', ROW_LENGTH));
+  }
+
+  createSpriteIdentify() {
+    this.sprites.identify = TerminalKit.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 === 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.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 === TUNNEL_HTTP) {
+      this.sprites.identify.put({
+        x: COLUMN_LENGTH,
+        y: 0,
+        attr: {
+          color: COLOR_WHITE
+        }
+      }, fillString(Format.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.serve(this.tunnel.serve);
+    } else {
+      titleText = 'Target:';
+      valueText = Format.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.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 === TUNNEL_TLS) {
+      this.sprites.terminate.put({
+        x: COLUMN_LENGTH,
+        y: 0,
+        attr: {
+          color: COLOR_WHITE
+        }
+      }, fillString(Format.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.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.latency(regionLatency);
+      regionColor = COLOR_WHITE;
+    }
+    if (targetLatency < 0) {
+      target = 'Unreachable';
+      targetColor = COLOR_RED;
+    } else {
+      target = Format.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 TerminalKit.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(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();
+  }
+}
+
+module.exports = OutputInteractiveTunnel;