Bump glob-parent from 5.1.0 to 5.1.2 (#237)

Bumps [glob-parent](https://github.com/gulpjs/glob-parent) from 5.1.0 to 5.1.2.
- [Release notes](https://github.com/gulpjs/glob-parent/releases)
- [Changelog](https://github.com/gulpjs/glob-parent/blob/main/CHANGELOG.md)
- [Commits](https://github.com/gulpjs/glob-parent/compare/v5.1.0...v5.1.2)

---
updated-dependencies:
- dependency-name: glob-parent
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/push.yml

@@ -0,0 +1,20 @@
+on: push
+name: Build, Lint, Test, and Publish
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: npm install
+      - run: npm test
+      - run: npm run lint
+      - uses: primer/publish@master
+        if: github.ref == 'refs/heads/master'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+          NPM_REGISTRY_URL: registry.npmjs.org

.gitignore

@@ -1 +1,5 @@
 node_modules
+test/fixtures/*.pem
+npm-debug.log
+dist
+.DS_Store

.travis.yml

@@ -0,0 +1,16 @@
+language: node_js
+node_js:
+- 6
+- 8
+- 10
+script:
+- npm run lint
+- npm test
+deploy:
+  provider: npm
+  email: maciej.winnicki@gmail.com
+  api_key:
+    secure: OuE8bOpsq/XN2AL6z0SWqHtpfKB5Qg3wug+hZVka+AdWaU6Gm0uvs4yA7B/uw9o5gH6KKgM+CP50Lq1xhC12CZbKLjkAUuFJQb9FrU/7jEAp+t+DKpoVBcru8bBjTxxx4wO1zXFcbJZ9zb4c4h76j2nfaNVuPTBB+mDF/HDd914=
+  on:
+    tags: true
+    repo: mthenw/frontail

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:12-buster-slim
+
+WORKDIR /frontail
+ADD . .
+RUN npm install --production
+
+ENTRYPOINT ["/frontail/docker-entrypoint.sh"]
+EXPOSE 9001
+CMD ["--help"]

LICENSE

@@ -1,21 +1,20 @@
-Copyright 2012 Maciej Winnicki http://maciejwinnicki.pl
+The MIT License (MIT)
 
-This project is free software released under the MIT/X11 license:
+Copyright (c) 2017 Maciej Winnicki
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -1,8 +1,36 @@
-# frontail – tail -F output in browser
+# frontail – streaming logs to the browser
 
-## Introduction
+`frontail` is a Node.js application for streaming logs to the browser. It's a `tail -F` with UI.
 
-frontail is node.js application for serving `tail -F` output to browser using [socket.io](http://socket.io/).
+![frontial](https://user-images.githubusercontent.com/455261/29570317-660c8122-8756-11e7-9d2f-8fea19e05211.gif)
+
+[![Docker Pulls](https://img.shields.io/docker/pulls/mthenw/frontail.svg)](https://hub.docker.com/r/mthenw/frontail/)
+
+## Quick start
+
+- `npm i frontail -g` or download a binary file from [Releases](https://github.com/mthenw/frontail/releases) page
+- `frontail /var/log/syslog`
+- visit [http://127.0.0.1:9001](http://127.0.0.1:9001)
+
+## Features
+
+- log rotation (not on Windows)
+- auto-scrolling
+- marking logs
+- pausing logs
+- number of unread logs in favicon
+- themes (default, dark)
+- [highlighting](#highlighting)
+- search (`Tab` to focus, `Esc` to clear)
+- set filter from url parameter `filter`
+- tailing [multiple files](#tailing-multiple-files) and [stdin](#stdin)
+- basic authentication
+
+## Installation options
+
+- download a binary file from [Releases](https://github.com/mthenw/frontail/releases) pagegit st
+- using [npm package](https://www.npmjs.com/package/frontail): `npm i frontail -g`
+- using [Docker image](https://cloud.docker.com/repository/docker/mthenw/frontail): `docker run -d -P -v /var/log:/log mthenw/frontail /log/syslog`
 
 ## Usage
 
@@ -10,7 +38,95 @@ frontail is node.js application for serving `tail -F` output to browser using [s
 
     Options:
 
-      -h, --help             output usage information
-      -V, --version          output the version number
-      -p, --port <port>      server port, default 9001
-      -n, --number <number>  starting lines number, default 10
+      -V, --version                 output the version number
+      -h, --host <host>             listening host, default 0.0.0.0
+      -p, --port <port>             listening port, default 9001
+      -n, --number <number>         starting lines number, default 10
+      -l, --lines <lines>           number on lines stored in browser, default 2000
+      -t, --theme <theme>           name of the theme (default, dark)
+      -d, --daemonize               run as daemon
+      -U, --user <username>         Basic Authentication username, option works only along with -P option
+      -P, --password <password>     Basic Authentication password, option works only along with -U option
+      -k, --key <key.pem>           Private Key for HTTPS, option works only along with -c option
+      -c, --certificate <cert.pem>  Certificate for HTTPS, option works only along with -k option
+      --pid-path <path>             if run as daemon file that will store the process id, default /var/run/frontail.pid
+      --log-path <path>             if run as daemon file that will be used as a log, default /dev/null
+      --url-path <path>             URL path for the browser application, default /
+      --ui-hide-topbar              hide topbar (log file name and search box)
+      --ui-no-indent                don't indent log lines
+      --ui-highlight                highlight words or lines if defined string found in logs, default preset
+      --ui-highlight-preset <path>  custom preset for highlighting (see ./preset/default.json)
+      --path <path>                 prefix path for the running application, default /
+      --disable-usage-stats         disable gathering usage statistics
+      --help                        output usage information
+
+Web interface runs on **http://[host]:[port]**.
+
+### Tailing multiple files
+
+`[file ...]` accepts multiple paths, `*`, `?` and other shell special characters([Wildcards, Quotes, Back Quotes and Apostrophes in shell commands](http://www.codecoffee.com/tipsforlinux/articles/26-1.html)).
+
+### stdin
+
+Use `-` for streaming stdin:
+
+    ./server | frontail -
+
+### Highlighting
+
+`--ui-highlight` option turns on highlighting in UI. By default preset from `./preset/default.json` is used:
+
+```
+{
+    "words": {
+        "err": "color: red;"
+    },
+    "lines": {
+        "err": "font-weight: bold;"
+    }
+}
+```
+
+which means that every "err" string will be in red and every line containing "err" will be bolded.
+
+_New presets are very welcome. If you don't like default or you would like to share yours, please create PR with json file._
+
+Available presets:
+
+- default
+- npmlog
+- python
+
+### Running behind nginx
+
+Using the `--url-path` option `frontail` can run behind nginx with the example configuration
+
+Using `frontail` with `--url-path /frontail`
+
+```
+events {
+    worker_connections 1024;
+}
+
+http {
+    server {
+        listen      8080;
+        server_name localhost;
+
+        location /frontail {
+            proxy_pass http://127.0.0.1:9001/frontail;
+
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+        }
+    }
+}
+```
+
+### Usage statistics
+
+`frontail` by default (from `v4.5.0`) gathers **anonymous** usage statistics in Google Analytics. It can be disabled with
+`--disable-usage-stats`.
+
+The data is used to help me understand how `frontail` is used and I can make it better.

RELEASING.md

@@ -0,0 +1,40 @@
+# Releasing Frontail
+
+After all [pull requests](https://github.com/mthenw/frontail/pulls) for a release have been merged and all [Travis CI builds](https://travis-ci.org/mthenw/frontail) are green, you may create a release as follows:
+
+1. If you haven't already, switch to the master branch, ensure that you have no changes, and pull from origin.
+
+    ```sh
+    $ git checkout master
+    $ git status
+    $ git pull <remote> master --rebase
+    ```
+
+1. Edit the `package.json` file changing `version` field to your new release version and run `npm i`.
+
+1. Commit your changes.
+
+    ```sh
+    $ git commit -am "Release <version>"
+    ```
+
+1. Push the commit.
+
+    ```sh
+    $ git push origin head
+    ```
+
+1. GitHub action will publish new version to NPM and push new tag.
+
+1. Publish new release on GitHub with [`release`](https://github.com/zeit/release) package.
+
+    ```sh
+    $ git pull
+    $ npx release -P
+    ```
+
+1. Upload binaries
+
+    ```sh
+    $ npm run pkg
+    ```

bin/frontail

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require('./../lib/frontail');
+require('./../index');

docker-entrypoint.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+set -euo pipefail
+
+exec ./bin/frontail $@

index.js

@@ -0,0 +1,171 @@
+'use strict';
+
+const cookie = require('cookie');
+const cookieParser = require('cookie-parser');
+const crypto = require('crypto');
+const path = require('path');
+const { Server } = require('socket.io');
+const fs = require('fs');
+const untildify = require('untildify');
+const tail = require('./lib/tail');
+const connectBuilder = require('./lib/connect_builder');
+const program = require('./lib/options_parser');
+const serverBuilder = require('./lib/server_builder');
+const daemonize = require('./lib/daemonize');
+const usageStats = require('./lib/stats');
+
+/**
+ * Parse args
+ */
+program.parse(process.argv);
+if (program.args.length === 0) {
+  console.error('Arguments needed, use --help');
+  process.exit();
+}
+
+/**
+ * Init usage statistics
+ */
+const stats = usageStats(!program.disableUsageStats, program);
+stats.track('runtime', 'init');
+stats.time('runtime', 'runtime');
+
+/**
+ * Validate params
+ */
+const doAuthorization = !!(program.user && program.password);
+const doSecure = !!(program.key && program.certificate);
+const sessionSecret = String(+new Date()) + Math.random();
+const files = program.args.join(' ');
+const filesNamespace = crypto.createHash('md5').update(files).digest('hex');
+const urlPath = program.urlPath.replace(/\/$/, ''); // remove trailing slash
+
+if (program.daemonize) {
+  daemonize(__filename, program, {
+    doAuthorization,
+    doSecure,
+  });
+} else {
+  /**
+   * HTTP(s) server setup
+   */
+  const appBuilder = connectBuilder(urlPath);
+  if (doAuthorization) {
+    appBuilder.session(sessionSecret);
+    appBuilder.authorize(program.user, program.password);
+  }
+  appBuilder
+    .static(path.join(__dirname, 'web', 'assets'))
+    .index(
+      path.join(__dirname, 'web', 'index.html'),
+      files,
+      filesNamespace,
+      program.theme
+    );
+
+  const builder = serverBuilder();
+  if (doSecure) {
+    builder.secure(program.key, program.certificate);
+  }
+  const server = builder
+    .use(appBuilder.build())
+    .port(program.port)
+    .host(program.host)
+    .build();
+
+  /**
+   * socket.io setup
+   */
+  const io = new Server({ path: `${urlPath}/socket.io` });
+  io.attach(server);
+
+  if (doAuthorization) {
+    io.use((socket, next) => {
+      const handshakeData = socket.request;
+      if (handshakeData.headers.cookie) {
+        const cookies = cookie.parse(handshakeData.headers.cookie);
+        const sessionIdEncoded = cookies['connect.sid'];
+        if (!sessionIdEncoded) {
+          return next(new Error('Session cookie not provided'), false);
+        }
+        const sessionId = cookieParser.signedCookie(
+          sessionIdEncoded,
+          sessionSecret
+        );
+        if (sessionId) {
+          return next(null);
+        }
+        return next(new Error('Invalid cookie'), false);
+      }
+
+      return next(new Error('No cookie in header'), false);
+    });
+  }
+
+  /**
+   * Setup UI highlights
+   */
+  let highlightConfig;
+  if (program.uiHighlight) {
+    let presetPath;
+
+    if (!program.uiHighlightPreset) {
+      presetPath = path.join(__dirname, 'preset', 'default.json');
+    } else {
+      presetPath = path.resolve(untildify(program.uiHighlightPreset));
+    }
+
+    if (fs.existsSync(presetPath)) {
+      highlightConfig = JSON.parse(fs.readFileSync(presetPath));
+    } else {
+      throw new Error(`Preset file ${presetPath} doesn't exists`);
+    }
+  }
+
+  /**
+   * When connected send starting data
+   */
+  const tailer = tail(program.args, {
+    buffer: program.number,
+  });
+
+  const filesSocket = io.of(`/${filesNamespace}`).on('connection', (socket) => {
+    socket.emit('options:lines', program.lines);
+
+    if (program.uiHideTopbar) {
+      socket.emit('options:hide-topbar');
+    }
+
+    if (!program.uiIndent) {
+      socket.emit('options:no-indent');
+    }
+
+    if (program.uiHighlight) {
+      socket.emit('options:highlightConfig', highlightConfig);
+    }
+
+    tailer.getBuffer().forEach((line) => {
+      socket.emit('line', line);
+    });
+  });
+
+  /**
+   * Send incoming data
+   */
+  tailer.on('line', (line) => {
+    filesSocket.emit('line', line);
+  });
+
+  stats.track('runtime', 'started');
+
+  /**
+   * Handle signals
+   */
+  const cleanExit = () => {
+    stats.timeEnd('runtime', 'runtime', () => {
+      process.exit();
+    });
+  };
+  process.on('SIGINT', cleanExit);
+  process.on('SIGTERM', cleanExit);
+}

lib/connect_builder.js

@@ -0,0 +1,75 @@
+'use strict';
+
+const connect = require('connect');
+const fs = require('fs');
+const serveStatic = require('serve-static');
+const expressSession = require('express-session');
+const basicAuth = require('basic-auth-connect');
+
+function ConnectBuilder(urlPath) {
+  this.app = connect();
+  this.urlPath = urlPath;
+}
+
+ConnectBuilder.prototype.authorize = function authorize(user, pass) {
+  this.app.use(
+    this.urlPath,
+    basicAuth(
+      (incomingUser, incomingPass) =>
+        user === incomingUser && pass === incomingPass
+    )
+  );
+
+  return this;
+};
+
+ConnectBuilder.prototype.build = function build() {
+  return this.app;
+};
+
+ConnectBuilder.prototype.index = function index(
+  path,
+  files,
+  filesNamespace,
+  themeOpt
+) {
+  const theme = themeOpt || 'default';
+
+  this.app.use(this.urlPath, (req, res) => {
+    fs.readFile(path, (err, data) => {
+      res.writeHead(200, {
+        'Content-Type': 'text/html',
+      });
+      res.end(
+        data
+          .toString('utf-8')
+          .replace(/__TITLE__/g, files)
+          .replace(/__THEME__/g, theme)
+          .replace(/__NAMESPACE__/g, filesNamespace)
+          .replace(/__PATH__/g, this.urlPath),
+        'utf-8'
+      );
+    });
+  });
+
+  return this;
+};
+
+ConnectBuilder.prototype.session = function sessionf(secret) {
+  this.app.use(
+    this.urlPath,
+    expressSession({
+      secret,
+      resave: false,
+      saveUninitialized: true,
+    })
+  );
+  return this;
+};
+
+ConnectBuilder.prototype.static = function staticf(path) {
+  this.app.use(this.urlPath, serveStatic(path));
+  return this;
+};
+
+module.exports = (urlPath) => new ConnectBuilder(urlPath);

lib/daemonize.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const daemon = require('daemon-fix41');
+const fs = require('fs');
+
+const defaultOptions = {
+  doAuthorization: false,
+  doSecure: false,
+};
+
+module.exports = (script, params, opts) => {
+  const options = opts || defaultOptions;
+
+  const logFile = fs.openSync(params.logPath, 'a');
+
+  let args = [
+    '-h',
+    params.host,
+    '-p',
+    params.port,
+    '-n',
+    params.number,
+    '-l',
+    params.lines,
+    '-t',
+    params.theme,
+  ];
+
+  if (options.doAuthorization) {
+    args.push('-U', params.user, '-P', params.password);
+  }
+
+  if (options.doSecure) {
+    args.push('-k', params.key, '-c', params.certificate);
+  }
+
+  if (params.uiHideTopbar) {
+    args.push('--ui-hide-topbar');
+  }
+
+  if (params.urlPath) {
+    args.push('--url-path', params.urlPath);
+  }
+
+  if (!params.uiIndent) {
+    args.push('--ui-no-indent');
+  }
+
+  if (params.uiHighlight) {
+    args.push('--ui-highlight');
+  }
+
+  if (params.uiHighlightPreset) {
+    args.push('--ui-highlight-preset', params.uiHighlightPreset);
+  }
+
+  if (params.disableUsageStats) {
+    args.push('--disable-usage-stats', params.disableUsageStats);
+  }
+
+  args = args.concat(params.args);
+
+  const proc = daemon.daemon(script, args, {
+    stdout: logFile,
+    stderr: logFile,
+  });
+
+  fs.writeFileSync(params.pidPath, proc.pid);
+};

lib/frontail.js

@@ -1,100 +0,0 @@
-var program  = require('commander')
-  , http     = require('http')
-  , fs       = require('fs')
-  , socketio = require('socket.io')
-  , spawn    = require('child_process').spawn
-  , daemon   = require('daemon');
-
-/**
- * Parse arg
- */
-
-program
-    .version('0.2.0')
-    .usage('[options] [file ...]')
-    .option('-p, --port <port>', 'server port, default 9001', Number, 9001)
-    .option('-n, --number <number>', 'starting lines number, default 10', Number, 10)
-    .option('-d, --daemonize', 'run as daemon')
-    .option('--pid-path <path>', 'if run as deamon file that will store the process ID, default /var/run/frontail.pid',
-        String, '/var/run/frontail.pid')
-    .option('--log-path <path>', 'if run as deamon file that will be used as a log, default /dev/null',
-        String, '/dev/null')
-    .parse(process.argv);
-
-/**
- * Validate args
- */
-if (program.args.length === 0) {
-    console.error('Arguments needed, use --help');
-    process.exit();
-} else {
-    var files = program.args.join(" ");
-}
-
-if (program.daemonize) {
-    try {
-        fs.writeFileSync(program.pidPath, '');
-        fs.writeFileSync(program.logPath, '');
-    } catch (err) {
-        console.error(err.message);
-        process.exit();
-    }
-}
-
-/**
- * Server setup
- */
-
-var server = http.createServer(function (req, res) {
-    fs.readFile(__dirname + '/index.html', function (err, data) {
-        if (err) {
-            res.writeHead(500, {'Content-Type': 'text/plain'});
-            res.end('Interal error');
-        } else {
-            res.writeHead(200, {'Content-Type': 'text/html'});
-            res.end(data.toString('utf-8').replace(/__TITLE__/g, 'tail -F ' + files), 'utf-8');
-        }
-    });
-});
-server.listen(program.port);
-
-/**
- * socket.io setup
- */
-
-var io = socketio.listen(server);
-io.set('log level', 2);
-
-/**
- * Connect to socket and send starting data
- */
-
-io.sockets.on('connection', function (socket) {
-    var tail = spawn('tail', ['-n', program.number, files]);
-    tail.stdout.on('data', function (data) {
-        socket.emit('lines', data.toString('utf-8').split('\n'));
-    });
-});
-
-/*
- * Send incoming data
- */
-
-var tail = spawn('tail', ['-F', files]);
-tail.stdout.on('data', function (data) {
-    io.sockets.emit('lines', data.toString('utf-8').split('\n'));
-});
-
-/*
- * Daemon
- */
-
-if (program.daemonize) {
-    daemon.daemonize(program.logPath, program.pidPath, function (err, pid) {
-        if (err) {
-            return console.log('Error starting daemon: ' + err);
-        }
-
-        console.log('Daemon started successfully with pid: ' + pid);
-    });
-}

lib/index.html

@@ -1,195 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>__TITLE__</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <style type="text/css">
-        /* Styles mainly from http://twitter.github.com/bootstrap/ */
-        * {
-            padding: 0;
-            margin: 0;
-        }
-
-        body {
-            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-            font-size: 13px;
-            line-height: 18px;
-            color: #333;
-            padding: 45px 0 10px;
-        }
-
-        .navbar {
-            background-color: #2C2C2C;
-            background-image: -webkit-linear-gradient(top, #333, #222);
-            background-repeat: repeat-x;
-            box-shadow: rgba(0, 0, 0, 0.246094) 0px 1px 3px 0px, rgba(0, 0, 0, 0.0976563) 0px -1px 0px 0px inset;
-            position: fixed;
-            left: 0px;
-            right: 0px;
-            top: 0px;
-            color: #fff;
-            display: block;
-            height: 24px;
-            font-size: 20px;
-            font-weight: 200;
-            padding: 8px 50px;
-        }
-
-        .navbar .query {
-            background-color: #626262;
-            border-color: #151515;
-            border-radius: 14px 14px 14px 14px;
-            border-style: solid;
-            border-width: 1px;
-            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.098) inset, 0 1px 0 0 rgba(255, 255, 255, 0.15);
-            color: white;
-            display: inline-block;
-            float: right;
-            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-            font-size: 13px;
-            height: 18px;
-            line-height: 13px;
-            margin-top: -2px;
-            padding: 4px 9px;
-            width: 160px;
-        }
-
-        .navbar .query:focus,
-        .navbar .query.focused {
-          padding: 5px 10px;
-          color: #333333;
-          text-shadow: 0 1px 0 #ffffff;
-          background-color: #ffffff;
-          border: 0;
-          -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-          -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-          box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-          outline: 0;
-        }
-
-        .log {
-            white-space: pre-wrap;
-        }
-
-        .log .line {
-            padding: 0 50px;
-            margin-left: 10em;
-            text-indent: -10em;
-        }
-    </style>
-</head>
-<body>
-    <div class="navbar">
-        <span class="brand">__TITLE__</span>
-        <input type="text" class="query" placeholder="Filter" tabindex="1">
-    </div>
-    <pre class="log"></pre>
-
-    <script src="/socket.io/socket.io.js"></script>
-    <script type="text/javascript">
-        var Frontail = (function() {
-
-            /**
-             * @type {Object}
-             * @private
-             */
-            var _socket;
-
-            /**
-             * @type {HTMLElement}
-             * @private
-             */
-            var _logContainer;
-
-            /**
-             * @type {HTMLElement}
-             * @private
-             */
-            var _filterInput;
-
-            /**
-             * @type {String}
-             * @private
-             */
-            var _filterValue = '';
-
-            /**
-             * Filter logs based on _filterValue
-             *
-             * @function
-             * @private
-             */
-            var _filterLogs = function() {
-                var collection = _logContainer.childNodes;
-                var i = collection.length;
-
-                if (i == 0) return;
-
-                while (i-=1) {
-                    var e = collection[i-1];
-                    if (e.textContent.indexOf(_filterValue) === -1) {
-                        e.style.display = 'none';
-                    } else {
-                        e.style.display = '';
-                    }
-                }
-                window.scrollTo(0, document.body.scrollHeight);
-            };
-
-            return {
-                /**
-                 * Init socket.io communication and log container
-                 *
-                 * @param {Object} opts options
-                 */
-                init: function(opts) {
-                    var that = this;
-
-                    // socket.io init
-                    _socket  = new io.connect();
-                    _socket
-                        .on('lines', function(lines) {
-                            for (var i = 0; i < lines.length; i+=1) {
-                                that.log(lines[i]);
-                            }
-                        });
-
-                    // Elements
-                    _logContainer = opts.container;
-                    _filterInput = opts.filterInput;
-                    _filterInput.focus();
-
-                    // Filter input bind
-                    _filterInput.addEventListener('keyup', function(e) {
-                        if (e.keyCode === 27) { //esc
-                            this.value = '';
-                            _filterValue = '';
-                        } else {
-                            _filterValue = this.value;
-                        }
-                        _filterLogs();
-                    });
-                },
-
-                /**
-                 * Log data
-                 *
-                 * @param {string} data data to log
-                 */
-                log: function(data) {
-                    var p = document.createElement('p');
-                        p.className = 'line';
-                        p.innerHTML = data;
-                        _logContainer.appendChild(p);
-                        window.scrollTo(0, document.body.scrollHeight);
-                }
-            }
-        })();
-
-        window.load = Frontail.init({
-            container: document.getElementsByClassName('log')[0],
-            filterInput: document.getElementsByClassName('query')[0]
-        });
-  </script>
-</body>
-</html>

lib/options_parser.js

@@ -0,0 +1,87 @@
+const program = require('commander');
+
+program
+  .version(require('../package.json').version)
+  .usage('[options] [file ...]')
+  .helpOption('--help')
+  .option(
+    '-h, --host <host>',
+    'listening host, default 0.0.0.0',
+    String,
+    '0.0.0.0'
+  )
+  .option('-p, --port <port>', 'listening port, default 9001', Number, 9001)
+  .option(
+    '-n, --number <number>',
+    'starting lines number, default 10',
+    Number,
+    10
+  )
+  .option(
+    '-l, --lines <lines>',
+    'number on lines stored in browser, default 2000',
+    Number,
+    2000
+  )
+  .option(
+    '-t, --theme <theme>',
+    'name of the theme (default, dark)',
+    String,
+    'default'
+  )
+  .option('-d, --daemonize', 'run as daemon')
+  .option(
+    '-U, --user <username>',
+    'Basic Authentication username, option works only along with -P option',
+    String,
+    false
+  )
+  .option(
+    '-P, --password <password>',
+    'Basic Authentication password, option works only along with -U option',
+    String,
+    false
+  )
+  .option(
+    '-k, --key <key.pem>',
+    'Private Key for HTTPS, option works only along with -c option',
+    String,
+    false
+  )
+  .option(
+    '-c, --certificate <cert.pem>',
+    'Certificate for HTTPS, option works only along with -k option',
+    String,
+    false
+  )
+  .option(
+    '--pid-path <path>',
+    'if run as daemon file that will store the process id, default /var/run/frontail.pid',
+    String,
+    '/var/run/frontail.pid'
+  )
+  .option(
+    '--log-path <path>',
+    'if run as daemon file that will be used as a log, default /dev/null',
+    String,
+    '/dev/null'
+  )
+  .option(
+    '--url-path <path>',
+    'URL path for the browser application, default /',
+    String,
+    '/'
+  )
+  .option('--ui-hide-topbar', 'hide topbar (log file name and search box)')
+  .option('--ui-no-indent', "don't indent log lines")
+  .option(
+    '--ui-highlight',
+    'highlight words or lines if defined string found in logs, default preset'
+  )
+  .option(
+    '--ui-highlight-preset <path>',
+    'custom preset for highlighting (see ./preset/default.json)'
+  )
+  .option('--disable-usage-stats', 'disable gathering usage statistics');
+
+module.exports = program;

lib/server_builder.js

@@ -0,0 +1,54 @@
+/* eslint no-underscore-dangle: off */
+
+'use strict';
+
+const fs = require('fs');
+const http = require('http');
+const https = require('https');
+
+function ServerBuilder() {
+  this._host = null;
+  this._port = 9001;
+}
+
+ServerBuilder.prototype.build = function build() {
+  if (this._key && this._cert) {
+    const options = {
+      key: this._key,
+      cert: this._cert,
+    };
+    return https
+      .createServer(options, this._callback)
+      .listen(this._port, this._host);
+  }
+
+  return http.createServer(this._callback).listen(this._port, this._host);
+};
+
+ServerBuilder.prototype.host = function hostf(host) {
+  this._host = host;
+  return this;
+};
+
+ServerBuilder.prototype.port = function portf(port) {
+  this._port = port;
+  return this;
+};
+
+ServerBuilder.prototype.secure = function secure(keyPath, certPath) {
+  try {
+    this._key = fs.readFileSync(keyPath);
+    this._cert = fs.readFileSync(certPath);
+  } catch (e) {
+    throw new Error('No key or certificate file found');
+  }
+
+  return this;
+};
+
+ServerBuilder.prototype.use = function use(callback) {
+  this._callback = callback;
+  return this;
+};
+
+module.exports = () => new ServerBuilder();

lib/stats.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const ua = require('universal-analytics');
+const isDocker = require('is-docker');
+const Configstore = require('configstore');
+const uuidv4 = require('uuid/v4');
+const pkg = require('../package.json');
+
+const trackingID = 'UA-129582046-1';
+
+// Usage stats
+function Stats(enabled, opts) {
+  this.timer = {};
+
+  if (enabled === true) {
+    const config = new Configstore(pkg.name);
+    let clientID = uuidv4();
+    if (config.has('clientID')) {
+      clientID = config.get('clientID');
+    } else {
+      config.set('clientID', clientID);
+    }
+
+    const tracker = ua(trackingID, clientID);
+    tracker.set('aip', 1); // Anonymize IP
+    tracker.set('an', 'frontail'); // Application Name
+    tracker.set('av', pkg.version); // Application Version
+    tracker.set('ds', 'app'); // Data Source
+    tracker.set('cd1', process.platform); // platform
+    tracker.set('cd2', process.arch); // arch
+    tracker.set('cd3', process.version.match(/^v(\d+\.\d+)/)[1]); // Node version
+    tracker.set('cd4', isDocker()); // is Docker
+    tracker.set('cd5', opts.number !== 10); // is --number parameter set
+    this.tracker = tracker;
+  }
+
+  return this;
+}
+
+Stats.prototype.track = function track(category, action) {
+  if (!this.tracker) {
+    return;
+  }
+  this.tracker.event(category, action).send();
+};
+
+Stats.prototype.time = function time(category, action) {
+  if (!this.tracker) {
+    return;
+  }
+
+  if (!this.timer[category]) {
+    this.timer[category] = {};
+  }
+  this.timer[category][action] = Date.now();
+};
+
+Stats.prototype.timeEnd = function timeEnd(category, action, cb) {
+  if (!this.tracker) {
+    cb();
+    return;
+  }
+
+  this.tracker
+    .timing(category, action, Date.now() - this.timer[category][action])
+    .send(cb);
+};
+
+module.exports = (enabled, opts) => new Stats(enabled, opts);

lib/tail.js

@@ -0,0 +1,72 @@
+/* eslint no-underscore-dangle: off */
+
+'use strict';
+
+const events = require('events');
+const childProcess = require('child_process');
+const tailStream = require('fs-tail-stream');
+const util = require('util');
+const CBuffer = require('CBuffer');
+const byline = require('byline');
+const commandExistsSync = require('command-exists').sync;
+
+function Tail(path, opts) {
+  events.EventEmitter.call(this);
+
+  const options = opts || {
+    buffer: 0,
+  };
+  this._buffer = new CBuffer(options.buffer);
+
+  let stream;
+
+  if (path[0] === '-') {
+    stream = process.stdin;
+  } else {
+    /* Check if this os provides the `tail` command. */
+    const hasTailCommand = commandExistsSync('tail');
+    if (hasTailCommand) {
+      let followOpt = '-F';
+      if (process.platform === 'openbsd') {
+        followOpt = '-f';
+      }
+
+      const cp = childProcess.spawn(
+        'tail',
+        ['-n', options.buffer, followOpt].concat(path)
+      );
+      cp.stderr.on('data', (data) => {
+        // If there is any important error then display it in the console. Tail will keep running.
+        // File can be truncated over network.
+        if (data.toString().indexOf('file truncated') === -1) {
+          console.error(data.toString());
+        }
+      });
+      stream = cp.stdout;
+
+      process.on('exit', () => {
+        cp.kill();
+      });
+    } else {
+      /* This is used if the os does not support the `tail`command. */
+      stream = tailStream.createReadStream(path.join(), {
+        encoding: 'utf8',
+        start: options.buffer,
+        tail: true,
+      });
+    }
+  }
+
+  byline(stream, { keepEmptyLines: true }).on('data', (line) => {
+    const str = line.toString();
+    this._buffer.push(str);
+    this.emit('line', str);
+  });
+}
+util.inherits(Tail, events.EventEmitter);
+
+Tail.prototype.getBuffer = function getBuffer() {
+  return this._buffer.toArray();
+};
+
+module.exports = (path, options) => new Tail(path, options);

package.json

@@ -1,31 +1,94 @@
 {
-    "name": "frontail",
-    "version": "0.2.0",
-    "description": "tail -F output in browser",
-    "homepage": "https://github.com/mthenw/frontail",
-    "contributors": {
-        "name": "Maciej Winnicki",
-        "email": "maciej.winnicki@gmail.com"
-    },
-    "license": "MIT",
-    "bin": {
-        "frontail": "./bin/frontail"
-    },
-    "dependencies": {
-        "commander": ">=0.5.2",
-        "socket.io": ">=0.9.3",
-        "daemon": ">=0.4.1"
-    },
-    "repository": {
-        "type": "git",
-        "url": "http://github.com/mthenw/frontail.git"
-    },
-    "keywords": [
-        "tail",
-        "syslog"
+  "name": "frontail",
+  "version": "4.9.2",
+  "description": "streaming logs to the browser",
+  "homepage": "https://github.com/mthenw/frontail",
+  "author": "Maciej Winnicki <maciej.winnicki@gmail.com>",
+  "license": "MIT",
+  "bin": "./bin/frontail",
+  "dependencies": {
+    "CBuffer": "0.1.4",
+    "basic-auth-connect": "1.0.0",
+    "byline": "5.0.0",
+    "command-exists": "1.2.8",
+    "commander": "3.0.1",
+    "configstore": "4.0.0",
+    "connect": "3.7.0",
+    "cookie": "0.1.0",
+    "cookie-parser": "1.4.5",
+    "daemon-fix41": "1.1.2",
+    "express-session": "1.15.6",
+    "fs-tail-stream": "1.1.0",
+    "is-docker": "1.1.0",
+    "serve-static": "1.14.1",
+    "socket.io": "3.1.2",
+    "universal-analytics": "0.4.23",
+    "untildify": "3.0.2",
+    "uuid": "3.3.2"
+  },
+  "devDependencies": {
+    "eslint": "~6.8.0",
+    "eslint-config-airbnb-base": "~14.0.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-plugin-import": "~2.20.0",
+    "jsdom": "~11.12.0",
+    "mocha": "~5.2.0",
+    "pkg": "~4.4.7",
+    "should": "~3.3.2",
+    "sinon": "~1.7.3",
+    "supertest": "^3.3.0",
+    "temp": "~0.8.1"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "test": "mocha -r should --exit test/*.js",
+    "pkg": "pkg --out-path=dist ."
+  },
+  "pkg": {
+    "assets": [
+      "preset/*.json",
+      "web/**/*"
     ],
-    "engine": {
-        "node": ">=0.6"
+    "targets": [
+      "node12-alpine-x64",
+      "node12-linux-x64",
+      "node12-macos-x64",
+      "node12-windows-x64"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "airbnb-base",
+      "prettier"
+    ],
+    "rules": {
+      "no-console": "off",
+      "strict": "off",
+      "implicit-arrow-linebreak": "off"
     },
-    "preferGlobal": true
-}
+    "env": {
+      "node": true
+    },
+    "ignorePatterns": [
+      "web/assets/tinycon.min.js",
+      "web/assets/ansi_up.js"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "always"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/mthenw/frontail.git"
+  },
+  "keywords": [
+    "tail",
+    "syslog",
+    "realtime",
+    "log",
+    "devops"
+  ],
+  "main": "index",
+  "preferGlobal": true
+}

preset/default.json

@@ -0,0 +1,8 @@
+{
+  "words": {
+    "err": "color: red;"
+  },
+  "lines": {
+    "err": "font-weight: bold;"
+  }
+}

preset/npmlog.json

@@ -0,0 +1,15 @@
+{
+  "words": {
+    "verb": "color: blue; background-color: black;",
+    "info": "color: green;",
+    "http": "color: green; background-color: black;",
+    "WARN": "color: black; background-color: yellow; font-style: normal;",
+    "error": "color: red;",
+    "ERR!": "color: red; background-color: black;"
+  },
+  "lines": {
+    "WARN": "font-style: italic;",
+    "ERR!": "font-weight: bold;"
+  }
+}
+

preset/python.json

@@ -0,0 +1,12 @@
+{
+  "words": {
+    "TODO": "color: purple"
+  },
+  "lines": {
+    "CRITICAL": "color: Red; font-weight: bold",
+    "ERROR": "color: Crimson; font-weight: bold",
+    "WARN": "color: Orange; font-style: italic",
+    "INFO": "color: DeepSkyBlue;",
+    "DEBUG": "color: LightGrey;"
+  }
+}

test/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "rules": {
+    "import/no-extraneous-dependencies": "off",
+    "no-unused-expressions": "off"
+  },
+  "env": {
+    "mocha": true
+  }
+}

test/app.js

@@ -0,0 +1,242 @@
+'use strict';
+
+const fs = require('fs');
+const jsdom = require('jsdom/lib/old-api.js');
+const events = require('events');
+
+describe('browser application', () => {
+  let io;
+  let window;
+
+  function initApp() {
+    window.App.init({
+      socket: io,
+      container: window.document.querySelector('.log'),
+      filterInput: window.document.querySelector('#filter'),
+      pauseBtn: window.document.querySelector('#pauseBtn'),
+      topbar: window.document.querySelector('.topbar'),
+      body: window.document.querySelector('body'),
+    });
+  }
+
+  function clickOnElement(line) {
+    const click = window.document.createEvent('MouseEvents');
+    click.initMouseEvent(
+      'click',
+      true,
+      true,
+      window,
+      0,
+      0,
+      0,
+      0,
+      0,
+      false,
+      false,
+      false,
+      false,
+      0,
+      null
+    );
+    line.dispatchEvent(click);
+  }
+
+  beforeEach((done) => {
+    io = new events.EventEmitter();
+    const html =
+      '<title></title><body><div class="topbar"></div>' +
+      '<div class="log"></div><button type="button" id="pauseBtn"></button>' +
+      '<input type="test" id="filter"/></body>';
+    const ansiup = fs.readFileSync('./web/assets/ansi_up.js', 'utf-8');
+    const src = fs.readFileSync('./web/assets/app.js', 'utf-8');
+
+    jsdom.env({
+      html,
+      url: 'http://localhost?filter=line.*',
+      src: [ansiup, src],
+      onload: (domWindow) => {
+        window = domWindow;
+
+        initApp();
+        done();
+      },
+    });
+  });
+
+  it('should show lines from socket.io', () => {
+    io.emit('line', 'test');
+
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(1);
+    log.childNodes[0].textContent.should.be.equal('test');
+    log.childNodes[0].className.should.be.equal('line');
+    log.childNodes[0].tagName.should.be.equal('DIV');
+    log.childNodes[0].innerHTML.should.be.equal(
+      '<p class="inner-line">test</p>'
+    );
+  });
+
+  it('should select line when clicked', () => {
+    io.emit('line', 'test');
+
+    const line = window.document.querySelector('.line');
+    clickOnElement(line);
+
+    line.className.should.be.equal('line-selected');
+  });
+
+  it('should deselect line when selected line clicked', () => {
+    io.emit('line', 'test');
+
+    const line = window.document.querySelector('.line');
+    clickOnElement(line);
+    clickOnElement(line);
+
+    line.className.should.be.equal('line');
+  });
+
+  it('should limit number of lines in browser', () => {
+    io.emit('options:lines', 2);
+    io.emit('line', 'line1');
+    io.emit('line', 'line2');
+    io.emit('line', 'line3');
+
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(2);
+    log.childNodes[0].textContent.should.be.equal('line2');
+    log.childNodes[1].textContent.should.be.equal('line3');
+  });
+
+  it('should hide topbar', () => {
+    io.emit('options:hide-topbar');
+
+    const topbar = window.document.querySelector('.topbar');
+    topbar.className.should.match(/hide/);
+    const body = window.document.querySelector('body');
+    body.className.should.match(/no-topbar/);
+  });
+
+  it('should not indent log lines', () => {
+    io.emit('options:no-indent');
+
+    const log = window.document.querySelector('.log');
+    log.className.should.match(/no-indent/);
+  });
+
+  it('should highlight word', () => {
+    io.emit('options:highlightConfig', {
+      words: {
+        foo: 'background: black',
+        bar: 'background: black',
+      },
+    });
+    io.emit('line', 'foo bar');
+
+    const line = window.document.querySelector('.line');
+    line.innerHTML.should.containEql(
+      '<span style="background: black">foo</span> <span style="background: black">bar</span>'
+    );
+  });
+
+  it('should highlight line', () => {
+    io.emit('options:highlightConfig', {
+      lines: {
+        line: 'background: black',
+      },
+    });
+    io.emit('line', 'line1');
+
+    const line = window.document.querySelector('.line');
+    line.parentNode.innerHTML.should.equal(
+      '<div class="line" style="background: black"><p class="inner-line">line1</p></div>'
+    );
+  });
+
+  it('should escape HTML', () => {
+    io.emit('line', '<a/>');
+
+    const line = window.document.querySelector('.line');
+    line.innerHTML.should.equal('<p class="inner-line">&lt;a/&gt;</p>');
+  });
+
+  it('should work filter from URL', () => {
+    io.emit('line', 'line1');
+    io.emit('line', 'another');
+    io.emit('line', 'line2');
+
+    const filterInput = window.document.querySelector('#filter');
+    filterInput.value.should.be.equal('line.*');
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(3);
+    log.childNodes[0].style.display.should.be.equal('');
+    log.childNodes[1].style.display.should.be.equal('none');
+    log.childNodes[2].style.display.should.be.equal('');
+    window.location.href.should.containEql('filter=line.*');
+  });
+
+  it('should clean filter', () => {
+    io.emit('line', 'line1');
+    io.emit('line', 'another');
+    io.emit('line', 'line2');
+
+    const filterInput = window.document.querySelector('#filter');
+    const event = new window.KeyboardEvent('keyup', { keyCode: 27 });
+    filterInput.dispatchEvent(event);
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(3);
+    log.childNodes[0].style.display.should.be.equal('');
+    log.childNodes[1].style.display.should.be.equal('');
+    log.childNodes[2].style.display.should.be.equal('');
+    window.location.href.should.be.equal('http://localhost/');
+  });
+
+  it('should change filter', () => {
+    io.emit('line', 'line1');
+    io.emit('line', 'another');
+    io.emit('line', 'line2');
+
+    const log = window.document.querySelector('.log');
+    const filterInput = window.document.querySelector('#filter');
+    filterInput.value = 'other';
+    const event = new window.KeyboardEvent('keyup', { keyCode: 13 });
+    filterInput.dispatchEvent(event);
+    log.childNodes.length.should.be.equal(3);
+    log.childNodes[0].style.display.should.be.equal('none');
+    log.childNodes[1].style.display.should.be.equal('');
+    log.childNodes[2].style.display.should.be.equal('none');
+    window.location.href.should.containEql('filter=other');
+  });
+
+  it('should pause', () => {
+    io.emit('line', 'line1');
+    const btn = window.document.querySelector('#pauseBtn');
+    const event = window.document.createEvent('Event');
+    event.initEvent('mouseup', true, true);
+    btn.dispatchEvent(event);
+    io.emit('line', 'line2');
+    io.emit('line', 'line3');
+
+    btn.className.should.containEql('play');
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(2);
+    log.lastChild.textContent.should.be.equal('==> SKIPPED: 2 <==');
+  });
+
+  it('should play', () => {
+    const btn = window.document.querySelector('#pauseBtn');
+    const event = window.document.createEvent('Event');
+    event.initEvent('mouseup', true, true);
+    btn.dispatchEvent(event);
+    io.emit('line', 'line1');
+    const log = window.document.querySelector('.log');
+    log.childNodes.length.should.be.equal(1);
+    log.lastChild.textContent.should.be.equal('==> SKIPPED: 1 <==');
+    btn.className.should.containEql('play');
+    btn.dispatchEvent(event);
+    io.emit('line', 'line2');
+
+    btn.className.should.not.containEql('play');
+    log.childNodes.length.should.be.equal(2);
+    log.lastChild.textContent.should.be.equal('line2');
+  });
+});

test/connect_builder.js

@@ -0,0 +1,123 @@
+'use strict';
+
+const request = require('supertest');
+const path = require('path');
+const connectBuilder = require('../lib/connect_builder');
+
+describe('connectBuilder', () => {
+  it('should build connect app', () => {
+    connectBuilder('/').build().should.have.property('use');
+    connectBuilder().build().should.have.property('listen');
+  });
+
+  it('should build app requiring authorized user', (done) => {
+    const app = connectBuilder('/').authorize('user', 'pass').build();
+
+    request(app)
+      .get('/')
+      .expect('www-authenticate', 'Basic realm="Authorization Required"')
+      .expect(401, done);
+  });
+
+  it('should build app allowing user to login', (done) => {
+    const app = connectBuilder('/').authorize('user', 'pass').build();
+    app.use((req, res) => {
+      res.end('secret!');
+    });
+
+    request(app)
+      .get('/')
+      .set('Authorization', 'Basic dXNlcjpwYXNz')
+      .expect(200, 'secret!', done);
+  });
+
+  it('should build app that setup session', (done) => {
+    const app = connectBuilder('/').session('secret').build();
+    app.use((req, res) => {
+      res.end();
+    });
+
+    request(app)
+      .get('/')
+      .expect('set-cookie', /^connect.sid/, done);
+  });
+
+  it('should build app that serve static files', (done) => {
+    const app = connectBuilder('/')
+      .static(path.join(__dirname, 'fixtures'))
+      .build();
+
+    request(app).get('/foo.txt').expect('bar', done);
+  });
+
+  it('should build app that serve index file', (done) => {
+    const app = connectBuilder('/')
+      .index(path.join(__dirname, 'fixtures/index'), '/testfile')
+      .build();
+
+    request(app).get('/').expect(200).expect('Content-Type', 'text/html', done);
+  });
+
+  it('should build app that serve index file on specified path', (done) => {
+    const app = connectBuilder('/test')
+      .index(path.join(__dirname, 'fixtures/index'), '/testfile')
+      .build();
+
+    request(app)
+      .get('/test')
+      .expect(200)
+      .expect('Content-Type', 'text/html', done);
+  });
+
+  it('should build app that replace index title', (done) => {
+    const app = connectBuilder('/')
+      .index(path.join(__dirname, 'fixtures/index_with_title'), '/testfile')
+      .build();
+
+    request(app).get('/').expect('<head><title>/testfile</title></head>', done);
+  });
+
+  it('should build app that sets socket.io namespace based on files', (done) => {
+    const app = connectBuilder('/')
+      .index(
+        path.join(__dirname, 'fixtures/index_with_ns'),
+        '/testfile',
+        'ns',
+        'dark'
+      )
+      .build();
+
+    request(app).get('/').expect('ns', done);
+  });
+
+  it('should build app that sets theme', (done) => {
+    const app = connectBuilder('/')
+      .index(
+        path.join(__dirname, '/fixtures/index_with_theme'),
+        '/testfile',
+        'ns',
+        'dark'
+      )
+      .build();
+
+    request(app)
+      .get('/')
+      .expect(
+        '<head><title>/testfile</title><link href="dark.css" rel="stylesheet" type="text/css"/></head>',
+        done
+      );
+  });
+
+  it('should build app that sets default theme', (done) => {
+    const app = connectBuilder('/')
+      .index(path.join(__dirname, '/fixtures/index_with_theme'), '/testfile')
+      .build();
+
+    request(app)
+      .get('/')
+      .expect(
+        '<head><title>/testfile</title><link href="default.css" rel="stylesheet" type="text/css"/></head>',
+        done
+      );
+  });
+});

test/daemonize.js

@@ -0,0 +1,267 @@
+'use strict';
+
+const daemon = require('daemon-fix41');
+const sinon = require('sinon');
+const fs = require('fs');
+const optionsParser = require('../lib/options_parser');
+const daemonize = require('../lib/daemonize');
+
+describe('daemonize', () => {
+  beforeEach(() => {
+    sinon.stub(daemon, 'daemon');
+    daemon.daemon.returns({
+      pid: 1000,
+    });
+    sinon.stub(fs, 'writeFileSync');
+    sinon.stub(fs, 'openSync');
+  });
+
+  afterEach(() => {
+    daemon.daemon.restore();
+    fs.writeFileSync.restore();
+    fs.openSync.restore();
+  });
+
+  describe('should daemon', () => {
+    it('current script', () => {
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[0].should.match('script');
+    });
+
+    it('with hostname', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '-h', '127.0.0.1']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['-h', '127.0.0.1']);
+    });
+
+    it('with port', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '-p', '80']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['-p', 80]);
+    });
+
+    it('with lines number', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '-n', '1']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['-n', 1]);
+    });
+
+    it('with lines stored in browser', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '-l', '1']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['-l', 1]);
+    });
+
+    it('with theme', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '-t', 'dark']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['-t', 'dark']);
+    });
+
+    it('with authorization', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '-U',
+        'user',
+        '-P',
+        'passw0rd',
+      ]);
+
+      daemonize('script', optionsParser, {
+        doAuthorization: true,
+      });
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '-U',
+        'user',
+        '-P',
+        'passw0rd',
+      ]);
+    });
+
+    it('without authorization if option doAuthorization not passed', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '-U',
+        'user',
+        '-P',
+        'passw0rd',
+      ]);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.not.containDeep([
+        '-U',
+        'user',
+        '-P',
+        'passw0rd',
+      ]);
+    });
+
+    it('with secure connection', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '-k',
+        'key.file',
+        '-c',
+        'cert.file',
+      ]);
+
+      daemonize('script', optionsParser, {
+        doSecure: true,
+      });
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '-k',
+        'key.file',
+        '-c',
+        'cert.file',
+      ]);
+    });
+
+    it('without secure connection if option doSecure not passed', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '-k',
+        'key.file',
+        '-c',
+        'cert.file',
+      ]);
+
+      daemonize('script', optionsParser, {
+        doSecure: true,
+      });
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '-k',
+        'key.file',
+        '-c',
+        'cert.file',
+      ]);
+    });
+
+    it('with url-path option', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '--url-path', '/test']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '--url-path',
+        '/test',
+      ]);
+    });
+
+    it('with hide-topbar option', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '--ui-hide-topbar']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['--ui-hide-topbar']);
+    });
+
+    it('with no-indent option', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '--ui-no-indent']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['--ui-no-indent']);
+    });
+
+    it('with highlight option', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '--ui-highlight']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['--ui-highlight']);
+    });
+
+    it('with highlight preset option', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '--ui-highlight',
+        '--ui-highlight-preset',
+        'test.json',
+      ]);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '--ui-highlight-preset',
+        'test.json',
+      ]);
+    });
+
+    it('with disable usage stats', () => {
+      optionsParser.parse([
+        'node',
+        '/path/to/frontail',
+        '--disable-usage-stats',
+        'test.json',
+      ]);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep([
+        '--disable-usage-stats',
+        'test.json',
+      ]);
+    });
+
+    it('with file to tail', () => {
+      optionsParser.parse(['node', '/path/to/frontail', '/path/to/file']);
+
+      daemonize('script', optionsParser);
+
+      daemon.daemon.lastCall.args[1].should.containDeep(['/path/to/file']);
+    });
+  });
+
+  it('should write pid to pidfile', () => {
+    optionsParser.parse([
+      'node',
+      '/path/to/frontail',
+      '--pid-path',
+      '/path/to/pid',
+    ]);
+
+    daemonize('script', optionsParser);
+
+    fs.writeFileSync.lastCall.args[0].should.be.equal('/path/to/pid');
+    fs.writeFileSync.lastCall.args[1].should.be.equal(1000);
+  });
+
+  it('should log to file', () => {
+    optionsParser.parse([
+      'node',
+      '/path/to/frontail',
+      '--log-path',
+      '/path/to/log',
+    ]);
+    fs.openSync.returns('file');
+
+    daemonize('script', optionsParser);
+
+    fs.openSync.lastCall.args[0].should.equal('/path/to/log');
+    fs.openSync.lastCall.args[1].should.equal('a');
+    daemon.daemon.lastCall.args[2].should.eql({
+      stdout: 'file',
+      stderr: 'file',
+    });
+  });
+});

test/fixtures/foo.txt

@@ -0,0 +1 @@
+bar

test/fixtures/index

@@ -0,0 +1 @@
+index

test/fixtures/index_with_ns

@@ -0,0 +1 @@
+__NAMESPACE__

test/fixtures/index_with_theme

@@ -0,0 +1 @@
+<head><title>__TITLE__</title><link href="__THEME__.css" rel="stylesheet" type="text/css"/></head>

test/fixtures/index_with_title

@@ -0,0 +1 @@
+<head><title>__TITLE__</title></head>

test/server_builder.js

@@ -0,0 +1,127 @@
+'use strict';
+
+const fs = require('fs');
+const http = require('http');
+const https = require('https');
+const sinon = require('sinon');
+const serverBuilder = require('../lib/server_builder');
+
+describe('serverBuilder', () => {
+  describe('http server', () => {
+    let httpServer;
+    let createServer;
+
+    beforeEach(() => {
+      httpServer = sinon.createStubInstance(http.Server);
+      httpServer.listen.returns(httpServer);
+      createServer = sinon.stub(http, 'createServer').returns(httpServer);
+    });
+
+    afterEach(() => {
+      createServer.restore();
+    });
+
+    it('should build server', () => {
+      const server = serverBuilder().build();
+
+      createServer.calledOnce.should.equal(true);
+      server.should.be.an.instanceof(http.Server);
+    });
+
+    it('should build server accepting requests', () => {
+      const callback = () => {};
+
+      serverBuilder().use(callback).build();
+
+      createServer.calledWith(callback).should.equal(true);
+    });
+
+    it('should build listening server', () => {
+      serverBuilder().build();
+
+      httpServer.listen.calledOnce.should.equal(true);
+    });
+
+    it('should build server listening on specified port', () => {
+      serverBuilder().port(6666).build();
+
+      httpServer.listen.calledWith(6666).should.equal(true);
+    });
+
+    it('should build server listening on default port', () => {
+      serverBuilder().build();
+
+      httpServer.listen.calledWith(9001).should.equal(true);
+    });
+
+    it('should build server listening on specified host', () => {
+      serverBuilder().host('127.0.0.1').build();
+
+      httpServer.listen.calledWith(9001, '127.0.0.1').should.equal(true);
+    });
+
+    it('should build server listening on default host', () => {
+      serverBuilder().build();
+
+      httpServer.listen.calledWith(9001, null).should.equal(true);
+    });
+  });
+
+  describe('https server', () => {
+    let httpsServer;
+    let createHttpsServer;
+    let readFileSyncStub;
+
+    beforeEach(() => {
+      httpsServer = sinon.createStubInstance(https.Server);
+      httpsServer.listen.returns(httpsServer);
+      createHttpsServer = sinon
+        .stub(https, 'createServer')
+        .returns(httpsServer);
+      readFileSyncStub = sinon.stub(fs, 'readFileSync');
+      readFileSyncStub.withArgs('key.pem').returns('testkey');
+      readFileSyncStub.withArgs('cert.pem').returns('testcert');
+    });
+
+    afterEach(() => {
+      createHttpsServer.restore();
+      readFileSyncStub.restore();
+    });
+
+    it('should build server', () => {
+      const server = serverBuilder().secure('key.pem', 'cert.pem').build();
+
+      server.should.be.an.instanceof(https.Server);
+      createHttpsServer
+        .calledWith({
+          key: 'testkey',
+          cert: 'testcert',
+        })
+        .should.equal(true);
+    });
+
+    it('should build server accepting requests', () => {
+      const callback = () => {};
+
+      serverBuilder().use(callback).secure('key.pem', 'cert.pem').build();
+
+      createHttpsServer
+        .calledWith(
+          {
+            key: 'testkey',
+            cert: 'testcert',
+          },
+          callback
+        )
+        .should.equal(true);
+    });
+
+    it('should throw error if key or cert not provided', () => {
+      readFileSyncStub.restore();
+
+      (() => {
+        serverBuilder().secure('nofile', 'nofile');
+      }).should.throw('No key or certificate file found');
+    });
+  });
+});

test/tail.js

@@ -0,0 +1,60 @@
+'use strict';
+
+const fs = require('fs');
+const temp = require('temp');
+const tail = require('../lib/tail');
+
+const TEMP_FILE_PROFIX = '';
+const SPAWN_DELAY = 10;
+
+function writeLines(fd, count) {
+  for (let i = 0; i < count; i += 1) {
+    fs.writeSync(
+      fd,
+      `line${i}
+`
+    );
+  }
+  fs.closeSync(fd);
+}
+
+describe('tail', () => {
+  temp.track();
+
+  it('calls event line if new line appear in file', (done) => {
+    temp.open(TEMP_FILE_PROFIX, (err, info) => {
+      tail(info.path).on('line', (line) => {
+        line.should.equal('line0');
+        done();
+      });
+
+      setTimeout(writeLines, SPAWN_DELAY, info.fd, 1);
+    });
+  });
+
+  it('buffers lines on start', (done) => {
+    temp.open(TEMP_FILE_PROFIX, (err, info) => {
+      writeLines(info.fd, 20);
+
+      const tailer = tail(info.path, {
+        buffer: 2,
+      });
+      setTimeout(() => {
+        tailer.getBuffer().should.be.eql(['line18', 'line19']);
+        done();
+      }, SPAWN_DELAY);
+    });
+  });
+
+  it('buffers no lines on start by default', (done) => {
+    temp.open(TEMP_FILE_PROFIX, (err, info) => {
+      writeLines(info.fd, 3);
+
+      const tailer = tail(info.path);
+      setTimeout(() => {
+        tailer.getBuffer().should.be.empty;
+        done();
+      }, SPAWN_DELAY);
+    });
+  });
+});

web/assets/.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "rules": {
+    "no-var": "off",
+    "no-underscore-dangle": "off",
+    "prefer-arrow-callback": "off",
+    "func-names": "off",
+    "space-before-function-paren": "off",
+    "prefer-template": "off"
+  },
+  "env": {
+    "browser": true
+  }
+}

web/assets/ansi_up.js

@@ -0,0 +1,327 @@
+// ansi_up.js
+// version : 1.3.0
+// author : Dru Nelson
+// license : MIT
+// http://github.com/drudru/ansi_up
+
+(function (Date, undefined) {
+
+    var ansi_up,
+        VERSION = "1.3.0",
+
+        // check for nodeJS
+        hasModule = (typeof module !== 'undefined'),
+
+        // Normal and then Bright
+        ANSI_COLORS = [
+          [
+            { color: "0, 0, 0",        'class': "ansi-black"   },
+            { color: "187, 0, 0",      'class': "ansi-red"     },
+            { color: "0, 187, 0",      'class': "ansi-green"   },
+            { color: "187, 187, 0",    'class': "ansi-yellow"  },
+            { color: "0, 0, 187",      'class': "ansi-blue"    },
+            { color: "187, 0, 187",    'class': "ansi-magenta" },
+            { color: "0, 187, 187",    'class': "ansi-cyan"    },
+            { color: "255,255,255",    'class': "ansi-white"   }
+          ],
+          [
+            { color: "85, 85, 85",     'class': "ansi-bright-black"   },
+            { color: "255, 85, 85",    'class': "ansi-bright-red"     },
+            { color: "0, 255, 0",      'class': "ansi-bright-green"   },
+            { color: "255, 255, 85",   'class': "ansi-bright-yellow"  },
+            { color: "85, 85, 255",    'class': "ansi-bright-blue"    },
+            { color: "255, 85, 255",   'class': "ansi-bright-magenta" },
+            { color: "85, 255, 255",   'class': "ansi-bright-cyan"    },
+            { color: "255, 255, 255",  'class': "ansi-bright-white"   }
+          ]
+        ],
+
+        // 256 Colors Palette
+        PALETTE_COLORS;
+
+    function Ansi_Up() {
+      this.fg = this.bg = this.fg_truecolor = this.bg_truecolor = null;
+      this.bright = 0;
+    }
+
+    Ansi_Up.prototype.setup_palette = function() {
+      PALETTE_COLORS = [];
+      // Index 0..15 : System color
+      (function() {
+        var i, j;
+        for (i = 0; i < 2; ++i) {
+          for (j = 0; j < 8; ++j) {
+            PALETTE_COLORS.push(ANSI_COLORS[i][j]['color']);
+          }
+        }
+      })();
+
+      // Index 16..231 : RGB 6x6x6
+      // https://gist.github.com/jasonm23/2868981#file-xterm-256color-yaml
+      (function() {
+        var levels = [0, 95, 135, 175, 215, 255];
+        var format = function (r, g, b) { return levels[r] + ', ' + levels[g] + ', ' + levels[b] };
+        var r, g, b;
+        for (r = 0; r < 6; ++r) {
+          for (g = 0; g < 6; ++g) {
+            for (b = 0; b < 6; ++b) {
+              PALETTE_COLORS.push(format.call(this, r, g, b));
+            }
+          }
+        }
+      })();
+
+      // Index 232..255 : Grayscale
+      (function() {
+        var level = 8;
+        var format = function(level) { return level + ', ' + level + ', ' + level };
+        var i;
+        for (i = 0; i < 24; ++i, level += 10) {
+          PALETTE_COLORS.push(format.call(this, level));
+        }
+      })();
+    };
+
+    Ansi_Up.prototype.escape_for_html = function (txt) {
+      return txt.replace(/[&<>]/gm, function(str) {
+        if (str == "&") return "&amp;";
+        if (str == "<") return "&lt;";
+        if (str == ">") return "&gt;";
+      });
+    };
+
+    Ansi_Up.prototype.linkify = function (txt) {
+      return txt.replace(/(https?:\/\/[^\s]+)/gm, function(str) {
+        return "<a href=\"" + str + "\">" + str + "</a>";
+      });
+    };
+
+    Ansi_Up.prototype.ansi_to_html = function (txt, options) {
+      return this.process(txt, options, true);
+    };
+
+    Ansi_Up.prototype.ansi_to_text = function (txt) {
+      var options = {};
+      return this.process(txt, options, false);
+    };
+
+    Ansi_Up.prototype.process = function (txt, options, markup) {
+      var self = this;
+      var raw_text_chunks = txt.split(/\033\[/);
+      var first_chunk = raw_text_chunks.shift(); // the first chunk is not the result of the split
+
+      var color_chunks = raw_text_chunks.map(function (chunk) {
+        return self.process_chunk(chunk, options, markup);
+      });
+
+      color_chunks.unshift(first_chunk);
+
+      return color_chunks.join('');
+    };
+
+    Ansi_Up.prototype.process_chunk = function (text, options, markup) {
+
+      // Are we using classes or styles?
+      options = typeof options == 'undefined' ? {} : options;
+      var use_classes = typeof options.use_classes != 'undefined' && options.use_classes;
+      var key = use_classes ? 'class' : 'color';
+
+      // Each 'chunk' is the text after the CSI (ESC + '[') and before the next CSI/EOF.
+      //
+      // This regex matches four groups within a chunk.
+      //
+      // The first and third groups match code type.
+      // We supported only SGR command. It has empty first group and 'm' in third.
+      //
+      // The second group matches all of the number+semicolon command sequences
+      // before the 'm' (or other trailing) character.
+      // These are the graphics or SGR commands.
+      //
+      // The last group is the text (including newlines) that is colored by
+      // the other group's commands.
+      var matches = text.match(/^([!\x3c-\x3f]*)([\d;]*)([\x20-\x2c]*[\x40-\x7e])([\s\S]*)/m);
+
+      if (!matches) return text;
+
+      var orig_txt = matches[4];
+      var nums = matches[2].split(';');
+
+      // We currently support only "SGR" (Select Graphic Rendition)
+      // Simply ignore if not a SGR command.
+      if (matches[1] !== '' || matches[3] !== 'm') {
+        return orig_txt;
+      }
+
+      if (!markup) {
+        return orig_txt;
+      }
+
+      var self = this;
+
+      while (nums.length > 0) {
+        var num_str = nums.shift();
+        var num = parseInt(num_str);
+
+        if (isNaN(num) || num === 0) {
+          self.fg = self.bg = null;
+          self.bright = 0;
+        } else if (num === 1) {
+          self.bright = 1;
+        } else if (num == 39) {
+          self.fg = null;
+        } else if (num == 49) {
+          self.bg = null;
+        } else if ((num >= 30) && (num < 38)) {
+          self.fg = ANSI_COLORS[self.bright][(num % 10)][key];
+        } else if ((num >= 90) && (num < 98)) {
+          self.fg = ANSI_COLORS[1][(num % 10)][key];
+        } else if ((num >= 40) && (num < 48)) {
+          self.bg = ANSI_COLORS[0][(num % 10)][key];
+        } else if ((num >= 100) && (num < 108)) {
+          self.bg = ANSI_COLORS[1][(num % 10)][key];
+        } else if (num === 38 || num === 48) { // extend color (38=fg, 48=bg)
+          (function() {
+            var is_foreground = (num === 38);
+            if (nums.length >= 1) {
+              var mode = nums.shift();
+              if (mode === '5' && nums.length >= 1) { // palette color
+                var palette_index = parseInt(nums.shift());
+                if (palette_index >= 0 && palette_index <= 255) {
+                  if (!use_classes) {
+                    if (!PALETTE_COLORS) {
+                      self.setup_palette.call(self);
+                    }
+                    if (is_foreground) {
+                      self.fg = PALETTE_COLORS[palette_index];
+                    } else {
+                      self.bg = PALETTE_COLORS[palette_index];
+                    }
+                  } else {
+                    var klass = (palette_index >= 16)
+                          ? ('ansi-palette-' + palette_index)
+                          : ANSI_COLORS[palette_index > 7 ? 1 : 0][palette_index % 8]['class'];
+                    if (is_foreground) {
+                      self.fg = klass;
+                    } else {
+                      self.bg = klass;
+                    }
+                  }
+                }
+              } else if(mode === '2' && nums.length >= 3) { // true color
+                var r = parseInt(nums.shift());
+                var g = parseInt(nums.shift());
+                var b = parseInt(nums.shift());
+                if ((r >= 0 && r <= 255) && (g >= 0 && g <= 255) && (b >= 0 && b <= 255)) {
+                  var color = r + ', ' + g + ', ' + b;
+                  if (!use_classes) {
+                    if (is_foreground) {
+                      self.fg = color;
+                    } else {
+                      self.bg = color;
+                    }
+                  } else {
+                    if (is_foreground) {
+                      self.fg = 'ansi-truecolor';
+                      self.fg_truecolor = color;
+                    } else {
+                      self.bg = 'ansi-truecolor';
+                      self.bg_truecolor = color;
+                    }
+                  }
+                }
+              }
+            }
+          })();
+        }
+      }
+
+      if ((self.fg === null) && (self.bg === null)) {
+        return orig_txt;
+      } else {
+        var styles = [];
+        var classes = [];
+        var data = {};
+        var render_data = function (data) {
+          var fragments = [];
+          var key;
+          for (key in data) {
+            if (data.hasOwnProperty(key)) {
+              fragments.push('data-' + key + '="' + this.escape_for_html(data[key]) + '"');
+            }
+          }
+          return fragments.length > 0 ? ' ' + fragments.join(' ') : '';
+        };
+
+        if (self.fg) {
+          if (use_classes) {
+            classes.push(self.fg + "-fg");
+            if (self.fg_truecolor !== null) {
+              data['ansi-truecolor-fg'] = self.fg_truecolor;
+              self.fg_truecolor = null;
+            }
+          } else {
+            styles.push("color:rgb(" + self.fg + ")");
+          }
+        }
+        if (self.bg) {
+          if (use_classes) {
+            classes.push(self.bg + "-bg");
+            if (self.bg_truecolor !== null) {
+              data['ansi-truecolor-bg'] = self.bg_truecolor;
+              self.bg_truecolor = null;
+            }
+          } else {
+            styles.push("background-color:rgb(" + self.bg + ")");
+          }
+        }
+        if (use_classes) {
+          return '<span class="' + classes.join(' ') + '"' + render_data.call(self, data) + '>' + orig_txt + '</span>';
+        } else {
+          return '<span style="' + styles.join(';') + '"' + render_data.call(self, data) + '>' + orig_txt + '</span>';
+        }
+      }
+    };
+
+    // Module exports
+    ansi_up = {
+
+      escape_for_html: function (txt) {
+        var a2h = new Ansi_Up();
+        return a2h.escape_for_html(txt);
+      },
+
+      linkify: function (txt) {
+        var a2h = new Ansi_Up();
+        return a2h.linkify(txt);
+      },
+
+      ansi_to_html: function (txt, options) {
+        var a2h = new Ansi_Up();
+        return a2h.ansi_to_html(txt, options);
+      },
+
+      ansi_to_text: function (txt) {
+        var a2h = new Ansi_Up();
+        return a2h.ansi_to_text(txt);
+      },
+
+      ansi_to_html_obj: function () {
+        return new Ansi_Up();
+      }
+    };
+
+    // CommonJS module is defined
+    if (hasModule) {
+        module.exports = ansi_up;
+    }
+    /*global ender:false */
+    if (typeof window !== 'undefined' && typeof ender === 'undefined') {
+        window.ansi_up = ansi_up;
+    }
+    /*global define:false */
+    if (typeof define === "function" && define.amd) {
+        define("ansi_up", [], function () {
+            return ansi_up;
+        });
+    }
+})(Date);

web/assets/app.js

@@ -0,0 +1,345 @@
+/* global Tinycon:false, ansi_up:false */
+
+window.App = (function app(window, document) {
+  'use strict';
+
+  /**
+   * @type {Object}
+   * @private
+   */
+  var _socket;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _logContainer;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _filterInput;
+
+  /**
+   * @type {String}
+   * @private
+   */
+  var _filterValue = '';
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _pauseBtn;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  var _isPaused = false;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  var _skipCounter = 0;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _topbar;
+
+  /**
+   * @type {HTMLElement}
+   * @private
+   */
+  var _body;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  var _linesLimit = Math.Infinity;
+
+  /**
+   * @type {number}
+   * @private
+   */
+  var _newLinesCount = 0;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  var _isWindowFocused = true;
+
+  /**
+   * @type {object}
+   * @private
+   */
+  var _highlightConfig;
+
+  /**
+   * Hide element if doesn't contain filter value
+   *
+   * @param {Object} element
+   * @private
+   */
+  var _filterElement = function(elem) {
+    var pattern = new RegExp(_filterValue, 'i');
+    var element = elem;
+    if (pattern.test(element.textContent)) {
+      element.style.display = '';
+    } else {
+      element.style.display = 'none';
+    }
+  };
+
+  /**
+   * Filter logs based on _filterValue
+   *
+   * @function
+   * @private
+   */
+  var _filterLogs = function() {
+    var collection = _logContainer.childNodes;
+    var i = collection.length;
+
+    if (i === 0) {
+      return;
+    }
+
+    while (i) {
+      _filterElement(collection[i - 1]);
+      i -= 1;
+    }
+    window.scrollTo(0, document.body.scrollHeight);
+  };
+
+  /**
+   * Set _filterValue from URL parameter `filter`
+   *
+   * @function
+   * @private
+   */
+  var _setFilterValueFromURL = function(filterInput, uri) {
+    var _url = new URL(uri);
+    var _filterValueFromURL = _url.searchParams.get('filter');
+    if (typeof _filterValueFromURL !== 'undefined' && _filterValueFromURL !== null) {
+      _filterValue = _filterValueFromURL;
+      filterInput.value = _filterValue; // eslint-disable-line
+    }
+  };
+
+  /**
+   * Set parameter `filter` in URL
+   *
+   * @function
+   * @private
+   */
+  var _setFilterParam = function(value, uri) {
+    var _url = new URL(uri);
+    var _params = new URLSearchParams(_url.search.slice(1));
+    if (value === '') {
+      _params.delete('filter');
+    } else {
+      _params.set('filter', value);
+    }
+    _url.search = _params.toString();
+    window.history.replaceState(null, document.title, _url.toString());
+  };
+
+  /**
+   * @return void
+   * @private
+   */
+  var _faviconReset = function() {
+    _newLinesCount = 0;
+    Tinycon.setBubble(0);
+  };
+
+  /**
+   * @return void
+   * @private
+   */
+  var _updateFaviconCounter = function() {
+    if (_isWindowFocused || _isPaused) {
+      return;
+    }
+
+    if (_newLinesCount < 99) {
+      _newLinesCount += 1;
+      Tinycon.setBubble(_newLinesCount);
+    }
+  };
+
+  /**
+   * @return String
+   * @private
+   */
+  var _highlightWord = function(line) {
+    var output = line;
+
+    if (_highlightConfig && _highlightConfig.words) {
+      Object.keys(_highlightConfig.words).forEach((wordCheck) => {
+        output = output.replace(
+          wordCheck,
+          '<span style="' + _highlightConfig.words[wordCheck] + '">' + wordCheck + '</span>',
+        );
+      });
+    }
+
+    return output;
+  };
+
+  /**
+   * @return HTMLElement
+   * @private
+   */
+  var _highlightLine = function(line, container) {
+    if (_highlightConfig && _highlightConfig.lines) {
+      Object.keys(_highlightConfig.lines).forEach((lineCheck) => {
+        if (line.indexOf(lineCheck) !== -1) {
+          container.setAttribute('style', _highlightConfig.lines[lineCheck]);
+        }
+      });
+    }
+
+    return container;
+  };
+
+  return {
+    /**
+     * Init socket.io communication and log container
+     *
+     * @param {Object} opts options
+     */
+    init: function init(opts) {
+      var self = this;
+
+      // Elements
+      _logContainer = opts.container;
+      _filterInput = opts.filterInput;
+      _filterInput.focus();
+      _pauseBtn = opts.pauseBtn;
+      _topbar = opts.topbar;
+      _body = opts.body;
+
+      _setFilterValueFromURL(_filterInput, window.location.toString());
+
+      // Filter input bind
+      _filterInput.addEventListener('keyup', function(e) {
+        // ESC
+        if (e.keyCode === 27) {
+          this.value = '';
+          _filterValue = '';
+        } else {
+          _filterValue = this.value;
+        }
+        _setFilterParam(_filterValue, window.location.toString());
+        _filterLogs();
+      });
+
+      // Pause button bind
+      _pauseBtn.addEventListener('mouseup', function() {
+        _isPaused = !_isPaused;
+        if (_isPaused) {
+          this.className += ' play';
+        } else {
+          _skipCounter = 0;
+          this.classList.remove('play');
+        }
+      });
+
+      // Favicon counter bind
+      window.addEventListener(
+        'blur',
+        function() {
+          _isWindowFocused = false;
+        },
+        true,
+      );
+      window.addEventListener(
+        'focus',
+        function() {
+          _isWindowFocused = true;
+          _faviconReset();
+        },
+        true,
+      );
+
+      // socket.io init
+      _socket = opts.socket;
+      _socket
+        .on('options:lines', function(limit) {
+          _linesLimit = limit;
+        })
+        .on('options:hide-topbar', function() {
+          _topbar.className += ' hide';
+          _body.className = 'no-topbar';
+        })
+        .on('options:no-indent', function() {
+          _logContainer.className += ' no-indent';
+        })
+        .on('options:highlightConfig', function(highlightConfig) {
+          _highlightConfig = highlightConfig;
+        })
+        .on('line', function(line) {
+          if (_isPaused) {
+            _skipCounter += 1;
+            self.log('==> SKIPPED: ' + _skipCounter + ' <==', (_skipCounter > 1));
+          } else {
+            self.log(line);
+          }
+        });
+    },
+
+    /**
+     * Log data
+     *
+     * @param {string} data data to log
+     */
+    log: function log(data, replace = false) {
+      var wasScrolledBottom = window.innerHeight + Math.ceil(window.pageYOffset + 1)
+        >= document.body.offsetHeight;
+      var div = document.createElement('div');
+      var p = document.createElement('p');
+      p.className = 'inner-line';
+
+      // convert ansi color codes to html && escape HTML tags
+      data = ansi_up.escape_for_html(data); // eslint-disable-line
+      data = ansi_up.ansi_to_html(data); // eslint-disable-line
+      p.innerHTML = _highlightWord(data);
+
+      div.className = 'line';
+      div = _highlightLine(data, div);
+      div.addEventListener('click', function click() {
+        if (this.className.indexOf('selected') === -1) {
+          this.className = 'line-selected';
+        } else {
+          this.className = 'line';
+        }
+      });
+
+      div.appendChild(p);
+      _filterElement(div);
+      if (replace) {
+        _logContainer.replaceChild(div, _logContainer.lastChild);
+      } else {
+        _logContainer.appendChild(div);
+      }
+
+      if (_logContainer.children.length > _linesLimit) {
+        _logContainer.removeChild(_logContainer.children[0]);
+      }
+
+      if (wasScrolledBottom) {
+        window.scrollTo(0, document.body.scrollHeight);
+      }
+
+      _updateFaviconCounter();
+    },
+  };
+}(window, document));

web/assets/styles/dark.css

@@ -0,0 +1,67 @@
+@import 'default.css';
+
+body {
+  padding-top: 4em;
+  background-color: #2f3238;
+}
+
+.no-topbar {
+  padding-top: 10px;
+}
+
+.navbar {
+  background-color: #26292e;
+  border: 0;
+}
+
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-brand:hover {
+  color: #999;
+}
+
+.btn-pause {
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%237f8289' viewBox='0 0 8 8'><path d='M1 1v6h2v-6h-2zm4 0v6h2v-6h-2z'></path></svg>") no-repeat center center;
+    background-color: #2f3238;
+    border: 1px solid transparent;
+}
+
+.btn-pause.play {
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%237f8289' viewBox='0 0 8 8'><path d='M1 1v6l6-3-6-3z'></path></svg>") no-repeat center center;
+    background-color: #2f3238;
+}
+
+.form-control {
+  border: 0;
+  color: #7f8289;
+  background-color: #2f3238;
+}
+
+.log {
+  white-space: pre-wrap;
+  color: #7f8289;
+  font-size: 0.85em;
+  background: inherit;
+  border: 0;
+  padding: 0;
+}
+
+.log .inner-line {
+  padding: 0 15px;
+  margin-left: 84pt;
+  text-indent: -84pt;
+  margin-bottom: 0;
+}
+
+.log .inner-line:empty::after {
+  content: '.';
+  visibility: hidden;
+}
+
+.log.no-indent .inner-line {
+  margin-left: 0;
+  text-indent: 0;
+}
+
+.log .line-selected {
+  background-color: #302436;
+}

web/assets/styles/default.css

@@ -0,0 +1,84 @@
+@import 'bootstrap.min.css';
+
+body {
+  padding-top: 60px;
+}
+@media screen and (max-width: 768px) {
+  body {
+    padding-top: 120px;
+  }
+}
+
+.navbar-brand {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: inline-block;
+  width: 100%;
+}
+
+.btn-pause {
+  margin: 8px 0 8px;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 8 8'><path d='M1 1v6h2v-6h-2zm4 0v6h2v-6h-2z'></path></svg>")
+    no-repeat center center;
+  background-color: #e2e6ea;
+  background-size: contain;
+  cursor: pointer;
+  display: inline-block;
+  height: 34px;
+  width: 34px;
+  border: 1px solid #ccc;
+}
+
+.btn-pause.play {
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23999' viewBox='0 0 8 8'><path d='M1 1v6l6-3-6-3z'></path></svg>")
+    no-repeat center center;
+  background-color: #e2e6ea;
+}
+
+.navbar-form-custom {
+  padding: 8px 0;
+}
+
+.no-horiz-padding {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.no-topbar {
+  padding-top: 10px;
+}
+
+.navbar-inverse .navbar-brand {
+  color: white;
+}
+
+.log {
+  white-space: pre-wrap;
+  color: black;
+  font-size: 0.85em;
+  background: inherit;
+  border: 0;
+  padding: 0;
+}
+
+.log .inner-line {
+  padding: 0 15px;
+  margin-left: 84pt;
+  text-indent: -84pt;
+  margin-bottom: 0;
+}
+
+.log .inner-line:empty::after {
+  content: '.';
+  visibility: hidden;
+}
+
+.log.no-indent .inner-line {
+  margin-left: 0;
+  text-indent: 0;
+}
+
+.log .line-selected {
+  background-color: #ffb2b0;
+}

web/assets/tinycon.min.js

@@ -0,0 +1,8 @@
+/*!
+  Tinycon - A small library for manipulating the Favicon
+  Tom Moor, http://tommoor.com
+  Copyright (c) 2012 Tom Moor
+  MIT Licensed
+  @version 0.6.1
+*/
+!function(){var a={},b=null,c=null,d=document.title,e=null,f=null,g={},h=window.devicePixelRatio||1,i=16*h,j={width:7,height:9,font:10*h+"px arial",colour:"#ffffff",background:"#F03D25",fallback:!0,crossOrigin:!0,abbreviate:!0},k=function(){var a=navigator.userAgent.toLowerCase();return function(b){return-1!==a.indexOf(b)}}(),l={ie:k("msie"),chrome:k("chrome"),webkit:k("chrome")||k("safari"),safari:k("safari")&&!k("chrome"),mozilla:k("mozilla")&&!k("chrome")&&!k("safari")},m=function(){for(var a=document.getElementsByTagName("link"),b=0,c=a.length;c>b;b++)if((a[b].getAttribute("rel")||"").match(/\bicon\b/))return a[b];return!1},n=function(){for(var a=document.getElementsByTagName("link"),b=document.getElementsByTagName("head")[0],c=0,d=a.length;d>c;c++){var e="undefined"!=typeof a[c];e&&(a[c].getAttribute("rel")||"").match(/\bicon\b/)&&b.removeChild(a[c])}},o=function(){if(!c||!b){var a=m();c=b=a?a.getAttribute("href"):"/favicon.ico"}return b},p=function(){return f||(f=document.createElement("canvas"),f.width=i,f.height=i),f},q=function(a){n();var b=document.createElement("link");b.type="image/x-icon",b.rel="icon",b.href=a,document.getElementsByTagName("head")[0].appendChild(b)},s=function(a,b){if(!p().getContext||l.ie||l.safari||"force"===g.fallback)return t(a);var c=p().getContext("2d"),b=b||"#000000",d=o();e=document.createElement("img"),e.onload=function(){c.clearRect(0,0,i,i),c.drawImage(e,0,0,e.width,e.height,0,0,i,i),(a+"").length>0&&u(c,a,b),v()},!d.match(/^data/)&&g.crossOrigin&&(e.crossOrigin="anonymous"),e.src=d},t=function(a){g.fallback&&(document.title=(a+"").length>0?"("+a+") "+d:d)},u=function(a,b){"number"==typeof b&&b>99&&g.abbreviate&&(b=w(b));var d=(b+"").length-1,e=g.width*h+6*h*d,f=g.height*h,j=i-f,k=i-e-h,m=16*h,n=16*h,o=2*h;a.font=(l.webkit?"bold ":"")+g.font,a.fillStyle=g.background,a.strokeStyle=g.background,a.lineWidth=h,a.beginPath(),a.moveTo(k+o,j),a.quadraticCurveTo(k,j,k,j+o),a.lineTo(k,m-o),a.quadraticCurveTo(k,m,k+o,m),a.lineTo(n-o,m),a.quadraticCurveTo(n,m,n,m-o),a.lineTo(n,j+o),a.quadraticCurveTo(n,j,n-o,j),a.closePath(),a.fill(),a.beginPath(),a.strokeStyle="rgba(0,0,0,0.3)",a.moveTo(k+o/2,m),a.lineTo(n-o/2,m),a.stroke(),a.fillStyle=g.colour,a.textAlign="right",a.textBaseline="top",a.fillText(b,2===h?29:15,l.mozilla?7*h:6*h)},v=function(){p().getContext&&q(p().toDataURL())},w=function(a){for(var b=[["G",1e9],["M",1e6],["k",1e3]],c=0;c<b.length;++c)if(a>=b[c][1]){a=x(a/b[c][1])+b[c][0];break}return a},x=function(a,b){var c=new Number(a);return c.toFixed(b)};a.setOptions=function(a){g={};for(var b in j)g[b]=a.hasOwnProperty(b)?a[b]:j[b];return this},a.setImage=function(a){return b=a,v(),this},a.setBubble=function(a,b){return a=a||"",s(a,b),this},a.reset=function(){q(c)},a.setOptions(j),window.Tinycon=a}();

web/index.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>tail -f __TITLE__</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="__PATH__/styles/__THEME__.css">
+    <link rel="icon" href="__PATH__/favicon.ico">
+</head>
+
+<body>
+    <nav class="topbar navbar navbar-inverse navbar-fixed-top" role="navigation">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-sm-8">
+                    <span class="navbar-brand text-overflow" title="__TITLE__">tail -f __TITLE__</span>
+                </div>
+                <div class="col-sm-1 text-right">
+                    <button type="button" class="btn btn-light btn-pause" data-toggle="button" aria-pressed="false" autocomplete="off"></button>
+                </div>
+                <div class="col-sm-3">
+                    <form class="navbar-form-custom" role="search" onkeypress="return event.keyCode != 13;">
+                        <input type="text" class="form-control query" placeholder="Filter" tabindex="1">
+                    </form>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <div class="container-fluid no-horiz-padding">
+        <pre class="log"></pre>
+    </div>
+
+
+    <script src="__PATH__/socket.io/socket.io.js"></script>
+    <script src="__PATH__/tinycon.min.js"></script>
+    <script src="__PATH__/ansi_up.js"></script>
+    <script src="__PATH__/app.js"></script>
+    <script type="text/javascript">
+        var socket = new io.connect('/__NAMESPACE__', {
+            path: '__PATH__/socket.io',
+            transports: ['websocket']
+        });
+
+        window.load = App.init({
+            socket: socket,
+            container: document.getElementsByClassName('log')[0],
+            filterInput: document.getElementsByClassName('query')[0],
+            pauseBtn: document.getElementsByClassName('btn-pause')[0],
+            topbar: document.getElementsByClassName('topbar')[0],
+            body: document.getElementsByTagName('body')[0]
+        });
+    </script>
+</body>
+
+</html>