Repository: cpsubrian/redis-explorer
Branch: master
Commit: fc8e9d10848e
Files: 66
Total size: 138.7 KB

Directory structure:
gitextract_o7xj8uxf/

├── .gitignore
├── Gruntfile.js
├── LICENSE
├── Makefile
├── README.md
├── fonts/
│   ├── .gitkeep
│   ├── MaterialIcons/
│   │   └── MaterialIcons.css
│   └── Roboto/
│       ├── LICENSE.txt
│       └── Roboto.css
├── images/
│   └── .gitkeep
├── index.html
├── package.json
├── resources/
│   ├── .gitkeep
│   ├── redisexplorer.icns
│   └── redisexplorer.psd
├── src/
│   ├── actions/
│   │   ├── browseActions.js
│   │   └── hostsActions.js
│   ├── alt.js
│   ├── app.js
│   ├── browser.js
│   ├── components/
│   │   ├── Header.js
│   │   ├── Highlight.js
│   │   ├── HostInfo.js
│   │   ├── HostsNav.js
│   │   ├── Icon.js
│   │   ├── KeyDetails.js
│   │   ├── LoadingRow.js
│   │   ├── ScrollList.js
│   │   ├── SidePanel.js
│   │   ├── TypeIcon.js
│   │   ├── ValuesRow.js
│   │   ├── ValuesTable.js
│   │   ├── details/
│   │   │   ├── Details.js
│   │   │   ├── HashDetails.js
│   │   │   ├── ListDetails.js
│   │   │   ├── SetDetails.js
│   │   │   ├── SortedSetDetails.js
│   │   │   └── StringDetails.js
│   │   └── handlers/
│   │       ├── BrowseHandler.js
│   │       ├── InfoHandler.js
│   │       ├── MainHandler.js
│   │       └── NotFoundHandler.js
│   ├── conf.js
│   ├── main.js
│   ├── router.js
│   ├── stores/
│   │   ├── browseStore.js
│   │   └── hostsStore.js
│   └── utils/
│       ├── db.js
│       ├── keys.js
│       ├── perf.js
│       ├── regex.js
│       ├── settings.js
│       ├── spawn.js
│       └── throttle.js
└── styles/
    ├── .gitkeep
    ├── components/
    │   ├── header.less
    │   ├── key-details.less
    │   └── values-table.less
    ├── handlers/
    │   ├── browse.less
    │   ├── info.less
    │   └── main.less
    ├── index.less
    └── utils/
        ├── highlight.less
        ├── material-colors.less
        ├── mixins.less
        └── variables.less

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
.DS_Store
.swp
build
dist
installer
node_modules
coverage
npm-debug.log

================================================
FILE: Gruntfile.js
================================================
var electron = require('electron-prebuilt')
var packagejson = require('./package.json')
var conf = require('./src/conf.js')

module.exports = function (grunt) {
  require('load-grunt-tasks')(grunt)

  var BASENAME = conf['BASENAME']
  var APPNAME = BASENAME
  var DEVELPER_ID = conf['DEVELPER_ID']
  var COMPANY = conf['COMPANY']
  var ICON = conf['ICON']
  var ICON_URL = conf['ICON_URL']
  var BUNDLE_ID = conf['BUNDLE_ID']
  var OSX_OUT = conf['OSX_OUT']
  var OSX_FILENAME = conf['OSX_FILENAME']
  var ELECTRON_VERSION = require('./node_modules/electron-prebuilt/package.json').version
  var target = grunt.option('target') || 'development'
  var env = process.env
  var certificateFile = grunt.option('certificateFile')
  var certificatePassword = grunt.option('certificatePassword')

  env.NODE_PATH = '..:' + env.NODE_PATH
  env.NODE_ENV = target

  grunt.initConfig({
    IDENTITY: 'Developer ID Application: ' + DEVELPER_ID,
    APPNAME: APPNAME,
    OSX_OUT: OSX_OUT,
    OSX_FILENAME: OSX_FILENAME,
    OSX_FILENAME_ESCAPED: OSX_FILENAME.replace(' ', '\\ ').replace('(', '\\(').replace(')', '\\)'),

    // Electron
    electron: {
      windows: {
        options: {
          name: BASENAME,
          dir: 'build',
          out: 'dist',
          version: ELECTRON_VERSION,
          platform: 'win32',
          arch: 'x64',
          asar: true,
          icon: ICON + '.ico'
        }
      },
      osx: {
        options: {
          name: APPNAME,
          dir: 'build',
          out: 'dist',
          version: ELECTRON_VERSION,
          platform: 'darwin',
          arch: 'x64',
          asar: true,
          'app-bundle-id': BUNDLE_ID
        }
      }
    },

    // Edits .exe files.
    rcedit: {
      exes: {
        files: [{
          expand: true,
          cwd: 'dist/' + BASENAME + '-win32',
          src: [BASENAME + '.exe']
        }],
        options: {
          icon: ICON + '.ico',
          'file-version': packagejson.version,
          'product-version': packagejson.version,
          'version-string': {
            'CompanyName': COMPANY,
            'ProductVersion': packagejson.version,
            'ProductName': APPNAME,
            'FileDescription': APPNAME,
            'InternalName': BASENAME + '.exe',
            'OriginalFilename': BASENAME + '.exe',
            'LegalCopyright': 'Copyright 2015 ' + COMPANY + ' All rights reserved.'
          }
        }
      }
    },

    // Windows installer options.
    'create-windows-installer': {
      appDirectory: 'dist/' + BASENAME + '-win32/',
      authors: COMPANY,
      // loadingGif: 'resources/loading.gif',
      // setupIcon: 'resources/setup.ico',
      iconUrl: ICON_URL,
      description: APPNAME,
      title: APPNAME,
      exe: BASENAME + '.exe',
      version: packagejson.version,
      signWithParams: '/f ' + certificateFile + ' /p ' + certificatePassword + ' /tr http://timestamp.comodoca.com/rfc3161'
    },

    // Copy files.
    copy: {
      dev: {
        files: [{
          expand: true,
          cwd: '.',
          src: ['package.json', 'conf.json', 'index.html'],
          dest: 'build/'
        }, {
          expand: true,
          cwd: 'images/',
          src: ['**/*'],
          dest: 'build/images/'
        }, {
          expand: true,
          cwd: 'fonts/',
          src: ['**/*'],
          dest: 'build/fonts/'
        }, {
          expand: true,
          cwd: 'node_modules/material-design-icons/iconfont/',
          src: ['MaterialIcons-Regular.woff2'],
          dest: 'build/fonts/MaterialIcons/'
        }, {
          expand: true,
          cwd: 'node_modules/',
          src: Object.keys(packagejson.dependencies).map(function (dep) { return dep + '/**/*' }),
          dest: 'build/node_modules/'
        }, {
          src: ICON + '.png',
          dest: 'build/images/logo.png'
        }]
      },
      windows: {
        files: [{
          expand: true,
          cwd: 'resources',
          src: [],
          dest: 'dist/' + BASENAME + '-win32/resources/resources/'
        }],
        options: {
          mode: true
        }
      },
      osx: {
        files: [{
          expand: true,
          cwd: 'resources',
          src: [],
          dest: '<%= OSX_FILENAME %>/Contents/Resources/resources/'
        }, {
          src: ICON + '.icns',
          dest: '<%= OSX_FILENAME %>/Contents/Resources/atom.icns'
        }],
        options: {
          mode: true
        }
      }
    },

    // Javascript (Babel)
    babel: {
      options: {
        stage: 0,
        sourceMap: 'inline',
        blacklist: 'regenerator'
      },
      dist: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.js'],
          dest: 'build/'
        }]
      }
    },

    // Styles (LESS)
    less: {
      options: {
        sourceMapFileInline: true
      },
      dist: {
        files: {
          'build/main.css': 'styles/index.less'
        }
      }
    },

    // Rename files.
    rename: {
      installer: {
        src: 'installer/Setup.exe',
        dest: 'installer/' + BASENAME + 'Setup-' + packagejson.version + '.exe'
      }
    },

    // Shell options.
    shell: {
      electron: {
        command: electron + ' build',
        options: {
          async: true,
          execOptions: {
            env: env
          }
        }
      },
      sign: {
        options: {
          failOnError: false
        },
        command: [
          'codesign --deep -v -f -s "<%= IDENTITY %>" <%= OSX_FILENAME_ESCAPED %>/Contents/Frameworks/*',
          'codesign -v -f -s "<%= IDENTITY %>" <%= OSX_FILENAME_ESCAPED %>',
          'codesign -vvv --display <%= OSX_FILENAME_ESCAPED %>',
          'codesign -v --verify <%= OSX_FILENAME_ESCAPED %>'
        ].join(' && ')
      },
      zip: {
        command: 'ditto -c -k --sequesterRsrc --keepParent <%= OSX_FILENAME_ESCAPED %> <%= OSX_OUT %>/' + BASENAME + '-' + packagejson.version + '.zip'
      }
    },

    // Clean options
    clean: {
      release: ['build/', 'dist/', 'installer/']
    },

    // Live Reload
    watchChokidar: {
      options: {
        spawn: true
      },
      livereload: {
        options: {livereload: true},
        files: ['build/**/*']
      },
      js: {
        files: ['src/**/*.js'],
        tasks: ['newer:babel']
      },
      less: {
        files: ['styles/**/*.less'],
        tasks: ['less']
      },
      copy: {
        files: ['images/*', 'index.html', 'fonts/*'],
        tasks: ['newer:copy:dev']
      }
    }
  })

  // Define default (development) task.
  grunt.registerTask('default', ['newer:babel', 'less', 'newer:copy:dev', 'shell:electron', 'watchChokidar'])

  // Define platform-specific release task.
  if (process.platform === 'win32') {
    grunt.registerTask('release', ['clean:release', 'babel', 'less', 'copy:dev', 'electron:windows', 'copy:windows', 'rcedit:exes', 'create-windows-installer', 'rename:installer'])
  } else {
    grunt.registerTask('release', ['clean:release', 'babel', 'less', 'copy:dev', 'electron:osx', 'copy:osx', 'shell:sign', 'shell:zip'])
  }

  // Bail-out on electron command if this dies.
  process.on('SIGINT', function () {
    grunt.task.run(['shell:electron:kill'])
    process.exit(1)
  })
}


================================================
FILE: LICENSE
================================================
Copyright 2015 Terra Eclipse, Inc.
http://www.terraeclipse.com/

Copyright 2015 Brian Link

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.


-------------------------------------------------------------------------
                              Apache License
                        Version 2.0, January 2004
                     http://www.apache.org/licenses/


TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

1. Definitions.

   "License" shall mean the terms and conditions for use, reproduction,
   and distribution as defined by Sections 1 through 9 of this document.

   "Licensor" shall mean the copyright owner or entity authorized by
   the copyright owner that is granting the License.

   "Legal Entity" shall mean the union of the acting entity and all
   other entities that control, are controlled by, or are under common
   control with that entity. For the purposes of this definition,
   "control" means (i) the power, direct or indirect, to cause the
   direction or management of such entity, whether by contract or
   otherwise, or (ii) ownership of fifty percent (50%) or more of the
   outstanding shares, or (iii) beneficial ownership of such entity.

   "You" (or "Your") shall mean an individual or Legal Entity
   exercising permissions granted by this License.

   "Source" form shall mean the preferred form for making modifications,
   including but not limited to software source code, documentation
   source, and configuration files.

   "Object" form shall mean any form resulting from mechanical
   transformation or translation of a Source form, including but
   not limited to compiled object code, generated documentation,
   and conversions to other media types.

   "Work" shall mean the work of authorship, whether in Source or
   Object form, made available under the License, as indicated by a
   copyright notice that is included in or attached to the work
   (an example is provided in the Appendix below).

   "Derivative Works" shall mean any work, whether in Source or Object
   form, that is based on (or derived from) the Work and for which the
   editorial revisions, annotations, elaborations, or other modifications
   represent, as a whole, an original work of authorship. For the purposes
   of this License, Derivative Works shall not include works that remain
   separable from, or merely link (or bind by name) to the interfaces of,
   the Work and Derivative Works thereof.

   "Contribution" shall mean any work of authorship, including
   the original version of the Work and any modifications or additions
   to that Work or Derivative Works thereof, that is intentionally
   submitted to Licensor for inclusion in the Work by the copyright owner
   or by an individual or Legal Entity authorized to submit on behalf of
   the copyright owner. For the purposes of this definition, "submitted"
   means any form of electronic, verbal, or written communication sent
   to the Licensor or its representatives, including but not limited to
   communication on electronic mailing lists, source code control systems,
   and issue tracking systems that are managed by, or on behalf of, the
   Licensor for the purpose of discussing and improving the Work, but
   excluding communication that is conspicuously marked or otherwise
   designated in writing by the copyright owner as "Not a Contribution."

   "Contributor" shall mean Licensor and any individual or Legal Entity
   on behalf of whom a Contribution has been received by Licensor and
   subsequently incorporated within the Work.

2. Grant of Copyright License. Subject to the terms and conditions of
   this License, each Contributor hereby grants to You a perpetual,
   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
   copyright license to reproduce, prepare Derivative Works of,
   publicly display, publicly perform, sublicense, and distribute the
   Work and such Derivative Works in Source or Object form.

3. Grant of Patent License. Subject to the terms and conditions of
   this License, each Contributor hereby grants to You a perpetual,
   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
   (except as stated in this section) patent license to make, have made,
   use, offer to sell, sell, import, and otherwise transfer the Work,
   where such license applies only to those patent claims licensable
   by such Contributor that are necessarily infringed by their
   Contribution(s) alone or by combination of their Contribution(s)
   with the Work to which such Contribution(s) was submitted. If You
   institute patent litigation against any entity (including a
   cross-claim or counterclaim in a lawsuit) alleging that the Work
   or a Contribution incorporated within the Work constitutes direct
   or contributory patent infringement, then any patent licenses
   granted to You under this License for that Work shall terminate
   as of the date such litigation is filed.

4. Redistribution. You may reproduce and distribute copies of the
   Work or Derivative Works thereof in any medium, with or without
   modifications, and in Source or Object form, provided that You
   meet the following conditions:

   (a) You must give any other recipients of the Work or
       Derivative Works a copy of this License; and

   (b) You must cause any modified files to carry prominent notices
       stating that You changed the files; and

   (c) You must retain, in the Source form of any Derivative Works
       that You distribute, all copyright, patent, trademark, and
       attribution notices from the Source form of the Work,
       excluding those notices that do not pertain to any part of
       the Derivative Works; and

   (d) If the Work includes a "NOTICE" text file as part of its
       distribution, then any Derivative Works that You distribute must
       include a readable copy of the attribution notices contained
       within such NOTICE file, excluding those notices that do not
       pertain to any part of the Derivative Works, in at least one
       of the following places: within a NOTICE text file distributed
       as part of the Derivative Works; within the Source form or
       documentation, if provided along with the Derivative Works; or,
       within a display generated by the Derivative Works, if and
       wherever such third-party notices normally appear. The contents
       of the NOTICE file are for informational purposes only and
       do not modify the License. You may add Your own attribution
       notices within Derivative Works that You distribute, alongside
       or as an addendum to the NOTICE text from the Work, provided
       that such additional attribution notices cannot be construed
       as modifying the License.

   You may add Your own copyright statement to Your modifications and
   may provide additional or different license terms and conditions
   for use, reproduction, or distribution of Your modifications, or
   for any such Derivative Works as a whole, provided Your use,
   reproduction, and distribution of the Work otherwise complies with
   the conditions stated in this License.

5. Submission of Contributions. Unless You explicitly state otherwise,
   any Contribution intentionally submitted for inclusion in the Work
   by You to the Licensor shall be under the terms and conditions of
   this License, without any additional terms or conditions.
   Notwithstanding the above, nothing herein shall supersede or modify
   the terms of any separate license agreement you may have executed
   with Licensor regarding such Contributions.

6. Trademarks. This License does not grant permission to use the trade
   names, trademarks, service marks, or product names of the Licensor,
   except as required for reasonable and customary use in describing the
   origin of the Work and reproducing the content of the NOTICE file.

7. Disclaimer of Warranty. Unless required by applicable law or
   agreed to in writing, Licensor provides the Work (and each
   Contributor provides its Contributions) on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
   implied, including, without limitation, any warranties or conditions
   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
   PARTICULAR PURPOSE. You are solely responsible for determining the
   appropriateness of using or redistributing the Work and assume any
   risks associated with Your exercise of permissions under this License.

8. Limitation of Liability. In no event and under no legal theory,
   whether in tort (including negligence), contract, or otherwise,
   unless required by applicable law (such as deliberate and grossly
   negligent acts) or agreed to in writing, shall any Contributor be
   liable to You for damages, including any direct, indirect, special,
   incidental, or consequential damages of any character arising as a
   result of this License or out of the use or inability to use the
   Work (including but not limited to damages for loss of goodwill,
   work stoppage, computer failure or malfunction, or any and all
   other commercial damages or losses), even if such Contributor
   has been advised of the possibility of such damages.

9. Accepting Warranty or Additional Liability. While redistributing
   the Work or Derivative Works thereof, You may choose to offer,
   and charge a fee for, acceptance of support, warranty, indemnity,
   or other liability obligations and/or rights consistent with this
   License. However, in accepting such obligations, You may act only
   on Your own behalf and on Your sole responsibility, not on behalf
   of any other Contributor, and only if You agree to indemnify,
   defend, and hold each Contributor harmless for any liability
   incurred by, or claims asserted against, such Contributor by reason
   of your accepting any such warranty or additional liability.

END OF TERMS AND CONDITIONS

================================================
FILE: Makefile
================================================
all: install dev

install:
	@echo ""
	@test -d ./node_modules || npm install

dev:
	@echo ""
	@./node_modules/.bin/standard ./src/**/*.js
	@./node_modules/.bin/grunt

release: install
	@echo ""
	@./node_modules/.bin/grunt release --target="production"

run:
	@echo ""
	@open ./dist/RedisExplorer-darwin-x64/RedisExplorer.app

copy:
	@echo ""
	@rm -Rf /Applications/RedisExplorer.app
	@cp -R ./dist/RedisExplorer-darwin-x64/RedisExplorer.app /Applications/

.PHONY: install
.PHONY: dev
.PHONY: release
.PHONY: run
.PHONY: copy

================================================
FILE: README.md
================================================
RedisExplorer
==============

An [electron](http://electron.atom.io/)-powered GUI for [redis](http://redis.io/).

![screencap](https://raw.githubusercontent.com/cpsubrian/redis-explorer/master/resources/screencap.gif)

Installation
------------

Currently, I'm only building for Mac OSX, but that may change as the feature-set
becomes more stable.

You'll find all the latest releases [here](https://github.com/cpsubrian/redis-explorer/releases).

Connecting to Remote Hosts
--------------------------

The app currently **only** supports connecting to remote hosts via an ssh tunnel
via your local `ssh-agent` and **no password**. Right now only redis servers
running on the default port can be connected to, but many more configuration
options are on the roadmap.

Available hosts will be parsed from your `~/.ssh/config`, which should contain
entries like:

```
Host myhost
  Hostname [ip address]
  User [username]

Host anotherhost
  Hostname [ip address]
  Port [port]
  User [username]
```

Development
-----------

I would love to add **your** name as a collaborator here :) Please discuss bugs
or new features here on the issues queue before spending time on them, because
I'm working through an internal list of TODOs at the moment and want to avoid
stepping on toes. Once I get the main feature list implemented, I'll maintain
a roadmap and wishlist here in the README so others can contribute more easily.

Roadmap
-------

- Read All Key Types
  - [x] String
  - [x] List
    - [ ] Change from `LRANGE -inf +inf` to an iterator, to handle really
          large lists better.
  - [x] Set
    - [ ] Change from `SMEMBERS` to `SSCAN`, to handle large sets better.
  - [x] Sorted Set
    - [ ] Change from `ZRANGEBYSCORE` to `ZSCAN` or and interator-style range, to handle large sets better.
  - [ ] Hash
- Keyspace 'overview'
  - [ ] Implement a collapsable tree-structure for browsing the keyspace
    - Configurable delimeter per hosts
- Manage Remote Hosts
  - [ ] CRUD Hosts
  - [ ] Import from ~/.ssh/config ?
  - [ ] Support other auth schemes
    - [x] ssh-agent tunnel
    - others?
- Console/REPL
  - [ ] Add a 'console' tab that replecates the functionality of the redis-client REPL
- Delete Data
  - [ ] Delete keys
  - [ ] Delete from lists
  - [ ] Delete form sets/sorted-sets
  - [ ] Delete hash keys
  - [ ] Bulk Delete all of the above
- Edit Data
  - [ ] Edit string keys
  - [ ] Edit lists, Add items
  - [ ] Edit sets, Add items
  - [ ] Edit hashes


### How to Build

For development, you'll just need to clone this repo and run `make`.

If you want to build a release, you'll probably need to go edit the config
and include your Apple developer ID, which will need to have been set up
via XCode. How to do that is beyond the scope of this project.


- - -

#### Developed by [TerraEclipse](https://github.com/TerraEclipse)

Terra Eclipse, Inc. is a nationally recognized political technology and
strategy firm located in Santa Cruz, CA and Washington, D.C.


================================================
FILE: fonts/.gitkeep
================================================


================================================
FILE: fonts/MaterialIcons/MaterialIcons.css
================================================
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

================================================
FILE: fonts/Roboto/LICENSE.txt
================================================

                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/

   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

   1. Definitions.

      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.

      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.

      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.

      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.

      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.

      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.

      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).

      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.

      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."

      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.

   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.

   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.

   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:

      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and

      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and

      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and

      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.

      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.

   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.

   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.

   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.

   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.

   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.

   END OF TERMS AND CONDITIONS

   APPENDIX: How to apply the Apache License to your work.

      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.

   Copyright [yyyy] [name of copyright owner]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.


================================================
FILE: fonts/Roboto/Roboto.css
================================================
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Thin.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-ThinItalic.ttf') format('truetype');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Light.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-LightItalic.ttf') format('truetype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Medium.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('Roboto-MediumItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
}

================================================
FILE: images/.gitkeep
================================================


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <title>RedisExplorer</title>
    <link rel="stylesheet" href="main.css"/>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

================================================
FILE: package.json
================================================
{
  "name": "redis-explorer",
  "version": "0.0.6",
  "description": "A GUI for Redis",
  "main": "browser.js",
  "repository": {
    "type": "git",
    "url": "git://github.com/cpsubrian/redis-explorer.git"
  },
  "homepage": "https://github.com/cpsubrian/redis-explorer",
  "keywords": [
    "redis"
  ],
  "author": "Brian Link <cpsubrian@gmail.com>",
  "licenses": [
    {
      "type": "Apache-2.0",
      "url": "http://www.apache.org/licenses/LICENSE-2.0.html"
    }
  ],
  "bugs": {
    "url": "https://github.com/cpsubrian/redis-explorer/issues"
  },
  "scripts": {
    "test": "echo 'No Tests'"
  },
  "standard": {
    "parser": "babel-eslint"
  },
  "dependencies": {
    "alt": "^0.17.1",
    "autobind-decorator": "^1.2.0",
    "babel": "^5.6.7",
    "highlight.js": "^8.6.0",
    "immutable": "^3.7.4",
    "material-ui": "^0.9.1",
    "mkdirp": "^0.5.1",
    "pure-render-decorator": "^0.1.0",
    "react": "^0.13.3",
    "react-hotkeys": "^0.3.3",
    "react-immutable-proptypes": "^1.0.0",
    "react-router": "^0.13.3",
    "react-tap-event-plugin": "^0.1.7",
    "redis": "^0.12.1",
    "redis-info": "^3.0.6",
    "ssh-config": "^0.1.0",
    "tunnel-ssh": "^1.0.2",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel": "^5.5.8",
    "babel-eslint": "^3.1.19",
    "electron-prebuilt": "^0.29.2",
    "grunt": "^0.4.5",
    "grunt-babel": "^5.0.1",
    "grunt-chmod": "^1.0.3",
    "grunt-cli": "^0.1.13",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-copy": "^0.8.0",
    "grunt-contrib-less": "^1.0.1",
    "grunt-contrib-watch-chokidar": "^1.0.0",
    "grunt-download-electron": "^2.1.1",
    "grunt-electron": "^2.0.0",
    "grunt-electron-installer": "^0.33.0",
    "grunt-if-missing": "^1.0.0",
    "grunt-newer": "^1.1.1",
    "grunt-rcedit": "^0.3.1",
    "grunt-rename": "^0.1.4",
    "grunt-shell-spawn": "^0.3.8",
    "load-grunt-tasks": "^3.2.0",
    "material-design-icons": "^2.0.0",
    "shell-escape": "^0.2.0",
    "source-map-support": "^0.3.1",
    "standard": "^4.3.3"
  }
}


================================================
FILE: resources/.gitkeep
================================================


================================================
FILE: src/actions/browseActions.js
================================================
import alt from '../alt'
import db from '../utils/db'

// 'Global' scan object.
let _scan

// Browse Actions.
class BrowseActions {

  /* General
   ****************************************************************************/
  resetKeys () {
    this.dispatch()
  }

  setOffset (offset) {
    this.dispatch(offset)
  }

  setMatch (match) {
    this.dispatch(match)
  }

  toggleSelectedKey (key) {
    this.dispatch(key)
  }

  toggleSelectedIndex (index) {
    this.dispatch(index)
  }

  // `item` should be {key, index}
  toggleSelected (item) {
    this.dispatch(item)
  }

  /* Fetch Keys Lifecycle
   ****************************************************************************/
  fetchKeys (options = {}) {
    this.dispatch()

    // Stop an active scan.
    if (_scan) _scan.stop()

    // Create the scan.
    options.match = options.match ? options.match + '*' : null
    options.loadTypes = true
    _scan = db.scan(options)

    // Start the scan.
    this.actions.fetchKeysNext()
  }

  fetchKeysNext () {
    this.dispatch()

    _scan.next((err, keys) => {
      if (err) {
        this.actions.fetchKeysFailed(err)
      } else if (keys) {
        this.actions.fetchKeysAdd(keys)
      } else {
        this.actions.fetchKeysFinished()
      }
    })
  }

  fetchKeysAdd (keys) {
    this.dispatch(keys)
    this.actions.fetchValues(keys)
  }

  fetchKeysFailed (err) {
    this.dispatch(err)
  }

  fetchKeysFinished () {
    this.dispatch()
  }

  /* Fetch Values Lifecycle
   ****************************************************************************/
  fetchValues (keys) {
    this.dispatch(keys)

    // Start loading the values.
    db.fetchValues(keys, (err, values) => {
      if (err) {
        this.actions.fetchValuesFailed(err)
      } else {
        this.actions.fetchValuesAdd(values)
      }
    })
  }

  fetchValuesAdd (values) {
    this.dispatch(values)
  }

  fetchValuesFailed (err) {
    this.dispatch(err)
  }
}

export default alt.createActions(BrowseActions)


================================================
FILE: src/actions/hostsActions.js
================================================
import alt from '../alt'
import db from '../utils/db'

class HostsActions {

  /* Connection Lifecycle
   ****************************************************************************/
  connectToHost (host) {
    this.dispatch(host)

    db.connect(host.toJS(), (err) => {
      if (err) {
        this.actions.connectToHostFailed(err)
      } else {
        this.actions.connectedToHost()
      }
    })
  }

  connectToHostFailed (err) {
    this.dispatch(err)
  }

  connectedToHost () {
    this.dispatch()
  }

  /* Fetch Info Lifecycle
   ****************************************************************************/
  fetchHostInfo (isRefresh) {
    this.dispatch(isRefresh)

    db.fetchInfo((err, info) => {
      if (err) {
        this.actions.fetchHostInfoFailed(err)
      } else {
        this.actions.fetchHostInfoFinished(info)
      }
    })
  }

  fetchHostInfoFinished (info) {
    this.dispatch(info)
  }

  fetchHostInfoFailed (err) {
    this.dispatch(err)
  }

}

export default alt.createActions(HostsActions)


================================================
FILE: src/alt.js
================================================
import Alt from 'alt'

// Create alt instance.
const alt = new Alt()

// Debug dispatcher.
if (process.env.NODE_ENV === 'development') {
  alt.dispatcher.register((dispatch) => {
    console.log(dispatch.action, dispatch.data)
  })
}

export default alt


================================================
FILE: src/app.js
================================================
import remote from 'remote'
import React from 'react'
import router from './router'
import injectTapEventPlugin from 'react-tap-event-plugin'

// Constants
const app = remote.require('app')
const Menu = remote.require('menu')
const shell = remote.require('shell')
const BrowserWindow = remote.require('browser-window')
const CMDORCTRL = (process.platform === 'win32') ? 'Ctrl' : 'Command'

// Needed for onTouchTap
// Can go away when react 1.0 release
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin()

// Run the router.
router.run((Handler) => {
  React.render(<Handler/>, document.body)
})

// Application Menu
Menu.setApplicationMenu(Menu.buildFromTemplate([
  {
    label: 'RedisExplorer',
    submenu: [
      {
        label: 'About RedisExplorer',
        selector: 'orderFrontStandardAboutPanel:'
      },
      {
        type: 'separator'
      }, {
        label: 'Hide RedisExplorer',
        accelerator: CMDORCTRL + '+H',
        selector: 'hide:'
      },
      {
        label: 'Hide Others',
        accelerator: CMDORCTRL + '+Shift+H',
        selector: 'hideOtherApplications:'
      },
      {
        label: 'Show All',
        selector: 'unhideAllApplications:'
      },
      {
        type: 'separator'
      },
      {
        label: 'Quit',
        accelerator: CMDORCTRL + '+Q',
        click: () => app.quit()
      }
    ]
  },
  {
    label: 'Edit',
    submenu: [
      {
        label: 'Undo',
        accelerator: CMDORCTRL + '+Z',
        selector: 'undo:'
      },
      {
        label: 'Redo',
        accelerator: 'Shift+' + CMDORCTRL + '+Z',
        selector: 'redo:'
      },
      {
        type: 'separator'
      },
      {
        label: 'Cut',
        accelerator: CMDORCTRL + '+X',
        selector: 'cut:'
      },
      {
        label: 'Copy',
        accelerator: CMDORCTRL + '+C',
        selector: 'copy:'
      },
      {
        label: 'Paste',
        accelerator: CMDORCTRL + '+V',
        selector: 'paste:'
      },
      {
        label: 'Select All',
        accelerator: CMDORCTRL + '+A',
        selector: 'selectAll:'
      }
    ]
  },
  {
    label: 'View',
    submenu: [
      {
        label: 'Reload',
        accelerator: CMDORCTRL + '+R',
        click: () => {
          var focusedWindow = BrowserWindow.getFocusedWindow()
          if (focusedWindow) {
            focusedWindow.reload()
          }
        }
      },
      {
        label: 'Toggle Full Screen',
        accelerator: 'Ctrl+Command+F',
        click: () => {
          var focusedWindow = BrowserWindow.getFocusedWindow()
          if (focusedWindow) {
            focusedWindow.setFullScreen(!focusedWindow.isFullScreen())
          }
        }
      },
      {
        label: 'Toggle DevTools',
        accelerator: 'Alt+' + CMDORCTRL + '+I',
        click: () => remote.getCurrentWindow().toggleDevTools()
      }
    ]
  },
  {
    label: 'Window',
    submenu: [
    {
      label: 'Minimize',
      accelerator: CMDORCTRL + '+M',
      selector: 'performMiniaturize:'
    },
    {
      label: 'Close',
      accelerator: CMDORCTRL + '+W',
      click: () => remote.getCurrentWindow().hide()
    },
    {
      type: 'separator'
    },
    {
      label: 'Bring All to Front',
      selector: 'arrangeInFront:'
    }
    ]
  },
  {
    label: 'Help',
    submenu: [
      {
        label: 'Report Issue or Suggest Feedback',
        click: () => shell.openExternal('https://github.com/cpsubrian/redis-explorer/issues/new')
      }
    ]
  }
]))


================================================
FILE: src/browser.js
================================================
import app from 'app'
import conf from './conf'
import settings from './utils/settings'
import BrowserWindow from 'browser-window'

// Report crashes to our server.
// require('crash-reporter').start()

// Keep a reference of the window object, if you don't, the window will
// be closed automatically when the javascript object is GCed.
let mainWindow = null

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// Get save bounds or use fallback defaults.
let bounds = settings.get('bounds', {
  x: 50,
  y: 50,
  width: 1100,
  height: 800
})

// This method will be called when Electron has done everything
// initialization and ready for creating browser windows.
app.on('ready', () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    'x': bounds.x,
    'y': bounds.y,
    'width': bounds.width,
    'height': bounds.height,
    'min-width': 400,
    'min-height': 260,
    'standard-window': false,
    'resizable': true,
    'show': false
  })

  // Open dev tools. Probably should remove this when this is more production ready.
  if (process.env.NODE_ENV === 'development') {
    mainWindow.openDevTools()
  }

  // Load the index.html of the app.
  mainWindow.loadUrl('file://' + __dirname + '/index.html')

  // Show window after the url is loaded.
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.setTitle(conf['BASENAME'])
    mainWindow.show()
    mainWindow.focus()
  })

  // Don't allow navigation to weird endpoints.
  mainWindow.webContents.on('will-navigate', (e, url) => {
    if (url.indexOf('build/index.html#') < 0) {
      e.preventDefault()
    }
  })

  // Save size and position of window.
  mainWindow.on('resize', () => {
    settings.set('bounds', mainWindow.getBounds())
  })
  mainWindow.on('move', () => {
    settings.set('bounds', mainWindow.getBounds())
  })

  // Handle window close depending on platform.
  app.on('window-all-closed', () => {
    app.quit()
  })
})


================================================
FILE: src/components/Header.js
================================================
import React from 'react'
import ImmutablePropTypes from 'react-immutable-proptypes'
import autobind from 'autobind-decorator'
import {Link} from 'react-router'
import Icon from '../components/Icon'
import {Toolbar, ToolbarGroup} from 'material-ui'
import HostsNav from '../components/HostsNav'

// @todo add pureRender after I figure out how to account for Router state
// for <Link> changes.
@autobind
class Header extends React.Component {

  static propTypes = {
    hosts: ImmutablePropTypes.list,
    activeHost: ImmutablePropTypes.map,
    connecting: React.PropTypes.bool,
    connected: React.PropTypes.bool
  }

  onClickHostButton (e) {
    e.preventDefault()
    this.refs.hostsNav.toggle()
  }

  getHostButtonClass () {
    if (this.props.connecting) {
      return 'connecting'
    } else if (this.props.connected) {
      return 'connected'
    } else {
      return 'disconnected'
    }
  }

  render () {
    return (
      <div className='header'>
        <Toolbar className='toolbar'>
          <ToolbarGroup key={0} float='left'>
            <Link to='/' className='button'>
              <Icon type='search'/> Browse
            </Link>
            <Link to='/info' className='button'>
              <Icon type='info'/> Info
            </Link>
          </ToolbarGroup>
          <ToolbarGroup key={1} float='right' className='no-drag'>
            {this.props.activeHost ?
              <Link to='/hosts' className={'button host-button ' + this.getHostButtonClass()} onClick={this.onClickHostButton}>
                {this.props.activeHost.get('Host')} <Icon type='public'/>
              </Link>
            :/*else*/
              <span>Not Connected</span>
            }
            <HostsNav ref='hostsNav' {...this.props}/>
          </ToolbarGroup>
        </Toolbar>
      </div>
    )
  }
}

export default Header


================================================
FILE: src/components/Highlight.js
================================================
import React from 'react'
import autobind from 'autobind-decorator'
import hljs from 'highlight.js'

@autobind
class Highlight extends React.Component {

  static propTypes = {
    className: React.PropTypes.string,
    innerHTML: React.PropTypes.bool,
    children: React.PropTypes.node
  }

  static defaultProps = {
    innerHTML: false,
    className: ''
  }

  componentDidMount () {
    this.highlightCode()
  }

  componentDidUpdate () {
    this.highlightCode()
  }

  highlightCode () {
    let nodes = React.findDOMNode(this).querySelectorAll('pre code')
    if (nodes.length > 0) {
      for (let i = 0; i < nodes.length; i = i + 1) {
        hljs.highlightBlock(nodes[i])
      }
    }
  }

  render () {
    if (this.props.innerHTML) {
      return <div dangerouslySetInnerHTML={{__html: this.props.children}} className={this.props.className || null}></div>
    } else {
      return <pre><code className={this.props.className}>{this.props.children}</code></pre>
    }
  }
}

export default Highlight


================================================
FILE: src/components/HostInfo.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import {Paper} from 'material-ui'

@pureRender
class HostInfo extends React.Component {

  static propTypes = {
    hostInfo: ImmutablePropTypes.map
  }

  static infoGroups = [
    {
      title: 'Server',
      props: [
        'redis_version',
        'redis_git_sha1',
        'redis_git_dirty',
        'redis_build_id',
        'redis_mode',
        'os',
        'arch_bits',
        'multiplexing_api',
        'gcc_version',
        'process_id',
        // 'run_id',
        'tcp_port',
        'uptime_in_seconds',
        'uptime_in_days',
        'hz',
        'lru_clock',
        'config_file'
      ]
    }, {
      title: 'Clients',
      props: [
        'connected_clients',
        'client_longest_output_list',
        'client_biggest_input_buf',
        'blocked_clients'
      ]
    }, {
      title: 'Memory',
      props: [
        'used_memory',
        'used_memory_human',
        'used_memory_rss',
        'used_memory_peak',
        'used_memory_peak_human',
        'used_memory_lua',
        'mem_fragmentation_ratio',
        'mem_allocator'
      ]
    }, {
      title: 'Persistence',
      props: [
        'loading',
        'rdb_changes_since_last_save',
        'rdb_bgsave_in_progress',
        'rdb_last_save_time',
        'rdb_last_bgsave_status',
        'rdb_last_bgsave_time_sec',
        'rdb_current_bgsave_time_sec',
        'aof_enabled',
        'aof_rewrite_in_progress',
        'aof_rewrite_scheduled',
        'aof_last_rewrite_time_sec',
        'aof_current_rewrite_time_sec',
        'aof_last_bgrewrite_status',
        'aof_last_write_status'
      ]
    }, {
      title: 'Stats',
      props: [
        'total_connections_received',
        'total_commands_processed',
        'instantaneous_ops_per_sec',
        'total_net_input_bytes',
        'total_net_output_bytes',
        'instantaneous_input_kbps',
        'instantaneous_output_kbps',
        'rejected_connections',
        'sync_full',
        'sync_partial_ok',
        'sync_partial_err',
        'expired_keys',
        'evicted_keys',
        'keyspace_hits',
        'keyspace_misses',
        'pubsub_channels',
        'pubsub_patterns',
        'latest_fork_usec'
      ]
    }, {
      title: 'Replication',
      props: [
        'role',
        'connected_slaves',
        'master_repl_offset',
        'repl_backlog_active',
        'repl_backlog_size',
        'repl_backlog_first_byte_offset',
        'repl_backlog_histlen:0'
      ]
    }, {
      title: 'CPU',
      props: [
        'used_cpu_sys',
        'used_cpu_user',
        'used_cpu_sys_children',
        'used_cpu_user_children'
      ]
    }, {
      title: 'Keyspace',
      getInfo () {
        let databases = this.props.hostInfo.get('databases')
        if (databases) {
          let dbs = []
          let rows = []
          for (let i = 0; i <= 16; i++) {
            if (databases[i]) {
              databases[i].num = i
              dbs.push(databases[i])
            }
          }
          dbs.forEach((db) => {
            rows.push(
              <tr key={'db-' + db.num + '-label'}>
                <td className='prop' colSpan='2'>
                  <strong>db{db.num}</strong>
                </td>
              </tr>
            )
            rows.push(
              <tr key={'db-' + db.num + '-keys'}>
                <td className='prop'>keys</td>
                <td className='value'>{db.keys}</td>
              </tr>
            )
            rows.push(
              <tr key={'db-' + db.num + '-expires'}>
                <td className='prop'>expires</td>
                <td className='value'>{db.expires}</td>
              </tr>
            )
          })
          return (
            <table>
              {rows}
            </table>
          )
        } else {
          return null
        }
      }
    }
  ]

  renderGroup (group) {
    return (
      <Paper key={'group-' + group.title} className='host-info-group'>
        <h3>{group.title}</h3>
        {group.getInfo ?
          group.getInfo.call(this)
        :/*else*/
          <table>
          {group.props.map((prop) => {
            return (
              <tr key={'prop-' + prop}>
                <td className='prop'>{prop}</td>
                <td className='value'>{this.props.hostInfo.get(prop)}</td>
              </tr>
            )
          })}
          </table>
        }
      </Paper>
    )
  }

  render () {
    return (
      <div className='host-info'>
        {HostInfo.infoGroups.map((group) => {
          return this.renderGroup(group)
        })}
      </div>
    )
  }
}

export default HostInfo


================================================
FILE: src/components/HostsNav.js
================================================
import React from 'react'
import autobind from 'autobind-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import hostsActions from '../actions/hostsActions'
import browseActions from '../actions/browseActions'
import Icon from '../components/Icon'
import {LeftNav, MenuItem} from 'material-ui'

@autobind
class HostsNav extends React.Component {

  static propTypes = {
    hosts: ImmutablePropTypes.list,
    activeHost: ImmutablePropTypes.map
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !(
      nextProps.hosts === this.props.hosts &&
      nextProps.activeHost.get('Host') === this.props.activeHost.get('Host')
    )
  }

  toggle () {
    this.refs.nav.toggle()
  }

  onChangeHost (e, i, menuItem) {
    if (menuItem.host.get('Host') !== this.props.activeHost.get('Host')) {
      browseActions.resetKeys()
      hostsActions.connectToHost(menuItem.host)
    }
  }

  render () {
    let selectedIndex
    let menuItems

    menuItems = this.props.hosts.map((host, i) => {
      if (this.props.activeHost === host) {
        selectedIndex = i
      }
      return {
        host: host,
        text: <span className='host-option'><Icon type='public'/> {host.get('Host')}</span>
      }
    }).toArray()

    // Splice in subheaders.
    menuItems.splice(0, 0, {type: MenuItem.Types.SUBHEADER, text: 'Local' })
    menuItems.splice(2, 0, {type: MenuItem.Types.SUBHEADER, text: 'Remote' })

    // Adjust selected index.
    if (selectedIndex === 0) {
      selectedIndex = 1
    } else {
      selectedIndex += 2
    }

    return (
      <LeftNav ref='nav'
        docked={false}
        openRight={true}
        onChange={this.onChangeHost}
        selectedIndex={selectedIndex}
        menuItems={menuItems} />
    )
  }
}

export default HostsNav


================================================
FILE: src/components/Icon.js
================================================
import React from 'react'

class Icon extends React.Component {

  static propTypes = {
    type: React.PropTypes.string.isRequired,
    style: React.PropTypes.object,
    title: React.PropTypes.string,
    className: React.PropTypes.string
  }

  static defaultProps = {
    style: {}
  }

  render () {
    return (
      <i className={'icon material-icons ' + (this.props.className || '')}
         style={this.props.style}
         title={this.props.title}
      >{this.props.type}</i>
    )
  }
}

export default Icon


================================================
FILE: src/components/KeyDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import HashDetails from '../components/details/HashDetails'
import ListDetails from '../components/details/ListDetails'
import SetDetails from '../components/details/SetDetails'
import SortedSetDetails from '../components/details/SortedSetDetails'
import StringDetails from '../components/details/StringDetails'

@pureRender
class KeyDetails extends React.Component {

  static propTypes = {
    item: ImmutablePropTypes.map
  }

  render () {
    switch (this.props.item.get('type')) {
      case 'string':
        return <StringDetails {...this.props}/>
      case 'list':
        return <ListDetails {...this.props}/>
      case 'set':
        return <SetDetails {...this.props}/>
      case 'zset':
        return <SortedSetDetails {...this.props}/>
      case 'hash':
        return <HashDetails {...this.props}/>
    }
  }
}

export default KeyDetails


================================================
FILE: src/components/LoadingRow.js
================================================
import React from 'react'

class LoadingRow extends React.Component {

  static propTypes = {
    cols: React.PropTypes.number
  }

  static defaultProps = {
    cols: 1
  }

  render () {
    return (
      <tr className='loading-row'>
        <td colSpan={this.props.cols}>
          Loading&hellip;
        </td>
      </tr>
    )
  }
}

export default LoadingRow


================================================
FILE: src/components/ScrollList.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import autobind from 'autobind-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'

@pureRender
@autobind
class ScrollList extends React.Component {

  static propTypes = {
    items: ImmutablePropTypes.iterable,
    itemHeight: React.PropTypes.number.isRequired,
    renderRoot: React.PropTypes.func,
    renderItem: React.PropTypes.func,
    renderPlaceholder: React.PropTypes.func,
    offset: React.PropTypes.number
  }

  static defaultProps = {
    offset: 0,
    limit: 60,
    renderRoot: (props, children) => {
      return (
        <ul {...props}>
          {children}
        </ul>
      )
    },
    renderItem: (props, item) => {
      return (
        <li {...props}>
          {item}
        </li>
      )
    },
    renderPlaceholder: (props) => {
      return <li {...props}></li>
    }
  }

  state = {
    offset: this.props.offset
  }

  componentDidMount () {
    React.findDOMNode(this).scrollTop = this.state.offset * this.props.itemHeight
  }

  onScroll (e) {
    let top = e.currentTarget.scrollTop
    let count = Math.floor(top / this.props.itemHeight)
    let newOffset

    if (count !== this.state.offset) {
      newOffset = count
      this.setState({offset: newOffset})
    }
    if (this.props.scrollHandler) {
      this.props.scrollHandler(e, newOffset)
    }
  }

  getDisplayOffset () {
    let offset = this.state.offset - Math.floor(this.props.limit / 3)
    return (offset >= 0) ? offset : 0
  }

  ensureVisible (index) {
    let container = React.findDOMNode(this)
    let itemTop = index * this.props.itemHeight
    let top = container.scrollTop
    let height = container.offsetHeight
    let count = Math.floor(height / this.props.itemHeight)

    if (itemTop < top) {
      container.scrollTop = (index - count + 2) * this.props.itemHeight
    }
    if ((itemTop + this.props.itemHeight) > (top + height - this.props.itemHeight)) {
      container.scrollTop = index * this.props.itemHeight
    }
  }

  renderItems () {
    let offset = this.getDisplayOffset()
    let slice = this.props.items.slice(offset, offset + this.props.limit)
    let results = []
    let baseStyles = {
          visibility: 'hidden !important',
          lineHeight: '0 !important',
          padding: '0 !important',
          margin: '0 !important',
          border: 'none !important',
          fontSize: '0 !important'
        }

    // Add top placeholder.
    results.push(this.props.renderPlaceholder({
      key: 'scroll-list-placeholder-top',
      style: Object.assign({
        height: (offset * this.props.itemHeight) + 'px'
      }, baseStyles)
    }))

    // Add currently visible items.
    let index = offset
    slice.forEach((item, key) => {
      results.push(this.props.renderItem({key}, item, index++))
    })

    // Add bottom placeholder.
    results.push(this.props.renderPlaceholder({
      key: 'scroll-list-placeholder-bottom',
      style: Object.assign({
        height: ((this.props.items.size - offset - slice.size) * this.props.itemHeight) + 'px'
      }, baseStyles)
    }))

    return results
  }

  render () {
    return this.props.renderRoot({
      style: {
        overflow: 'auto'
      },
      onScroll: this.onScroll
    }, this.renderItems())
  }
}

export default ScrollList


================================================
FILE: src/components/SidePanel.js
================================================
import React from'react'
import KeyCode from'material-ui/lib/utils/key-code'
import StylePropable from'material-ui/lib/mixins/style-propable'
import AutoPrefix from'material-ui/lib/styles/auto-prefix'
import Transitions from'material-ui/lib/styles/transitions'
import WindowListenable from'material-ui/lib/mixins/window-listenable'
import Overlay from'material-ui/lib/overlay'
import Paper from'material-ui/lib/paper'

/**
 * Based on material-ui LeftNav component.
 */
const SidePanel = React.createClass({

  mixins: [StylePropable, WindowListenable],

  contextTypes: {
    muiTheme: React.PropTypes.object
  },

  propTypes: {
    className: React.PropTypes.string,
    docked: React.PropTypes.bool,
    onOpen: React.PropTypes.func,
    onClose: React.PropTypes.func,
    openRight: React.PropTypes.bool,
    width: React.PropTypes.number,
    style: React.PropTypes.object,
    children: React.PropTypes.node
  },

  windowListeners: {
    'keyup': '_onWindowKeyUp'
  },

  getDefaultProps () {
    return {
      docked: true
    }
  },

  getInitialState () {
    return {
      open: this.props.docked,
      maybeSwiping: false,
      swiping: false
    }
  },

  componentDidMount () {
    this._enableSwipeHandling()
  },

  componentDidUpdate (prevProps, prevState) {
    this._enableSwipeHandling()
  },

  componentWillUnmount () {
    this._disableSwipeHandling()
  },

  toggle () {
    this.setState({ open: !this.state.open })
    return this
  },

  close () {
    this.setState({ open: false })
    if (this.props.onClose) this.props.onClose()
    return this
  },

  open () {
    this.setState({ open: true })
    if (this.props.onOpen) this.props.onOpen()
    return this
  },

  getThemePalette () {
    return this.context.muiTheme.palette
  },

  getTheme () {
    return this.context.muiTheme.component.leftNav
  },

  getWidth () {
    return this.props.width || this.getTheme().width
  },

  getStyles () {
    var x = this._getTranslateMultiplier() * (this.state.open ? 0 : this._getMaxTranslateX()) + 'px'
    var styles = {
      root: {
        height: '100%',
        width: this.getWidth(),
        position: 'fixed',
        zIndex: 10,
        left: 0,
        top: 0,
        transform: 'translate3d(' + x + ', 0, 0)',
        transition: !this.state.swiping && Transitions.easeOut(),
        backgroundColor: this.getTheme().color,
        overflow: 'hidden'
      },
      rootWhenOpenRight: {
        left: 'auto',
        right: '0'
      }
    }
    return styles
  },

  render () {
    var overlay

    var styles = this.getStyles()
    if (!this.props.docked) {
      overlay = (
        <Overlay
          ref='overlay'
          show={this.state.open}
          transitionEnabled={!this.state.swiping}
          onTouchTap={this._onOverlayTouchTap}/>
      )
    }

    return (
      <div className={this.props.className}>
        {overlay}
        <Paper
          ref='clickAwayableElement'
          className='side-panel'
          zDepth={2}
          rounded={false}
          transitionEnabled={!this.state.swiping}
          style={this.mergeAndPrefix(
            styles.root,
            this.props.openRight && styles.rootWhenOpenRight,
            this.props.style)}>
          {this.props.children}
        </Paper>
      </div>
    )
  },

  _onOverlayTouchTap () {
    this.close()
  },

  _onWindowKeyUp (e) {
    if (e.keyCode === KeyCode.ESC &&
        !this.props.docked &&
        this.state.open) {
      this.close()
    }
  },

  _getMaxTranslateX () {
    return this.getWidth() + 10
  },

  _getTranslateMultiplier () {
    return this.props.openRight ? 1 : -1
  },

  _enableSwipeHandling () {
    if (this.state.open && !this.props.docked) {
      document.body.addEventListener('touchstart', this._onBodyTouchStart)
    } else {
      this._disableSwipeHandling()
    }
  },

  _disableSwipeHandling () {
    document.body.removeEventListener('touchstart', this._onBodyTouchStart)
  },

  _onBodyTouchStart (e) {
    var touchStartX = e.touches[0].pageX
    var touchStartY = e.touches[0].pageY
    this.setState({
      maybeSwiping: true,
      touchStartX: touchStartX,
      touchStartY: touchStartY
    })

    document.body.addEventListener('touchmove', this._onBodyTouchMove)
    document.body.addEventListener('touchend', this._onBodyTouchEnd)
    document.body.addEventListener('touchcancel', this._onBodyTouchEnd)
  },

  _onBodyTouchMove (e) {
    var currentX = e.touches[0].pageX
    var currentY = e.touches[0].pageY

    if (this.state.swiping) {
      e.preventDefault()
      var translateX = Math.min(
        Math.max(
          this._getTranslateMultiplier() * (currentX - this.state.swipeStartX),
          0
        ),
        this._getMaxTranslateX()
      )

      var leftNav = React.findDOMNode(this.refs.clickAwayableElement)
      leftNav.style[AutoPrefix.single('transform')] =
        'translate3d(' + (this._getTranslateMultiplier() * translateX) + 'px, 0, 0)'
      this.refs.overlay.setOpacity(1 - translateX / this._getMaxTranslateX())
    } else if (this.state.maybeSwiping) {
      var dXAbs = Math.abs(currentX - this.state.touchStartX)
      var dYAbs = Math.abs(currentY - this.state.touchStartY)
      // If the user has moved his thumb ten pixels in either direction,
      // we can safely make an assumption about whether he was intending
      // to swipe or scroll.
      var threshold = 10

      if (dXAbs > threshold && dYAbs <= threshold) {
        this.setState({
          swiping: true,
          swipeStartX: currentX
        })
      } else if (dXAbs <= threshold && dYAbs > threshold) {
        this._onBodyTouchEnd()
      }
    }
  },

  _onBodyTouchEnd () {
    var shouldClose = false

    if (this.state.swiping) shouldClose = true

    this.setState({
      maybeSwiping: false,
      swiping: false
    })

    // We have to call close() after setting swiping to false,
    // because only then CSS transition is enabled.
    if (shouldClose) this.close()

    document.body.removeEventListener('touchmove', this._onBodyTouchMove)
    document.body.removeEventListener('touchend', this._onBodyTouchEnd)
    document.body.removeEventListener('touchcancel', this._onBodyTouchEnd)
  }
})

export default SidePanel


================================================
FILE: src/components/TypeIcon.js
================================================
import React from 'react'
import Icon from '../components/Icon'
import keys from '../utils/keys'

class TypeIcon extends React.Component {

  static propTypes = {
    title: React.PropTypes.string,
    type: React.PropTypes.string
  }

  render () {
    let props = {
      title: keys.getTypeName(this.props.type)
    }
    if (this.props.type === 'string') {
      props.type = 'vpn_key'
    }
    if (this.props.type === 'list') {
      props.type = 'format_list_numbered'
    }
    if (this.props.type === 'set') {
      props.type = 'reorder'
    }
    if (this.props.type === 'zset') {
      props.type = 'format_line_spacing'
    }
    if (this.props.type === 'hash') {
      props.type = 'code'
    }
    return <Icon className='type-icon' {...props}/>
  }
}

export default TypeIcon


================================================
FILE: src/components/ValuesRow.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import autobind from 'autobind-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import browseActions from '../actions/browseActions'
import TypeIcon from '../components/TypeIcon'

@pureRender
@autobind
class ValuesRow extends React.Component {

  static propTypes = {
    index: React.PropTypes.number,
    style: React.PropTypes.object,
    matchRegExp: React.PropTypes.object,
    item: ImmutablePropTypes.map // @todo Enforce more specific shape here and elsewhere
  }

  onClick (e) {
    browseActions.toggleSelected({
      key: this.props.item.get('key'),
      index: this.props.index
    })
  }

  renderKey () {
    let key = this.props.item.get('key')

    // Highlight search pattern matches.
    if (this.props.matchRegExp) {
      return key
        .split(this.props.matchRegExp)
        .map((part, i) => {
          if (i > 0 && i % 2) {
            return <strong key={i}>{part}</strong>
          } else {
            return part
          }
        })
    // Else, just spit out the key.
    } else {
      return key
    }
  }

  renderValue () {
    let type = this.props.item.get('type')
    let value = this.props.item.get('value')

    if (value) {
      let teaser
      let parts = []
      let length = 0

      switch (type) {
        case 'list':
        case 'set':
          for (let i = 0; (length <= 400 && i < value.length); i++) {
            parts.push(value[i])
            length += value[i].length
          }
          teaser = parts.join(', ')
          break
        case 'zset':
          for (let i = 0; (length <= 400 && i < value.length); i++) {
            parts.push(value[i].value)
            length += value[i].value.length
          }
          teaser = parts.join(', ')
          break
        default:
          teaser = value
          break
      }
      return teaser ? teaser.substr(0, 400) : null
    } else {
      return null
    }
  }

  render () {
    let {selected, type} = this.props.item.toJS()
    let classes = 'values-row' + (selected ? ' selected' : '')
    return (
      <tr className={classes} style={this.props.style} onClick={this.onClick}>
        <td className='key'>{this.renderKey()}</td>
        <td className='value'>{this.renderValue()}</td>
        <td className='type'><TypeIcon type={type}/></td>
      </tr>
    )
  }
}

export default ValuesRow


================================================
FILE: src/components/ValuesTable.js
================================================
import React from 'react'
import ImmutablePropTypes from 'react-immutable-proptypes'
import pureRender from 'pure-render-decorator'
import autobind from 'autobind-decorator'
import shell from 'shell'
import browseActions from '../actions/browseActions'

import {TextField} from 'material-ui'
import {HotKeys} from 'react-hotkeys'
import ScrollList from '../components/ScrollList'
import LoadingRow from '../components/LoadingRow'
import ValuesRow from '../components/ValuesRow'

@pureRender
@autobind
class ValuesTable extends React.Component {

  static propTypes = {
    keys: ImmutablePropTypes.orderedMap.isRequired,
    loading: React.PropTypes.bool,
    finished: React.PropTypes.bool,
    offset: React.PropTypes.number,
    itemHeight: React.PropTypes.number,
    match: React.PropTypes.string,
    matchRegExp: React.PropTypes.object,
    selectedIndex: React.PropTypes.number
  }

  static defaultProps = {
    loading: false,
    offset: 0,
    itemHeight: 30
  }

  componentDidUpdate (prevProps) {
    if (this.refs.scrollList &&
        (this.props.selectedIndex !== null) &&
        (prevProps.selectedIndex !== this.props.selectedIndex)) {
      this.refs.scrollList.ensureVisible(this.props.selectedIndex)
    }
  }

  getHotKeys () {
    return {
      down: (event) => {
        if ((this.props.selectedIndex !== null) && this.props.selectedIndex < (this.props.keys.size - 1)) {
          browseActions.toggleSelectedIndex(this.props.selectedIndex + 1)
        } else {
          shell.beep()
        }
      },
      up: (event) => {
        if ((this.props.selectedIndex !== null) && this.props.selectedIndex > 0) {
          browseActions.toggleSelectedIndex(this.props.selectedIndex - 1)
        } else {
          shell.beep()
        }
      },
      esc: (event) => {
        if (this.props.selectedIndex !== null) {
          browseActions.toggleSelected()
        } else {
          shell.beep()
        }
      }
    }
  }

  onSearchChange (e) {
    browseActions.setMatch(e.currentTarget.value)
  }

  onScroll (e, newOffset) {
    if (newOffset) {
      browseActions.setOffset(newOffset)

      if (!this.props.finished) {
        let top = e.currentTarget.scrollTop
        let sh = e.currentTarget.scrollHeight
        let h = e.currentTarget.offsetHeight

        // If we're nearing the bottom, load more keys.
        if ((sh - top - h) <= (h * 2)) {
          browseActions.fetchKeysNext()
        }
      }
    }
  }

  renderRoot (props, children) {
    return <tbody {...props}>{children}</tbody>
  }

  renderItem (props, item, index) {
    return <ValuesRow matchRegExp={this.props.matchRegExp} item={item} index={index} {...props}/>
  }

  renderPlaceholder (props) {
    return <tr key={props.key}><td colSpan='2' {...props}></td></tr>
  }

  render () {
    return (
      <HotKeys handlers={this.getHotKeys()}>
        <div className='values-table'>
          <table>
            <thead>
              <tr>
                <th className='key' colSpan='3'>
                  <TextField
                    className='search'
                    hintText='key:*:pattern'
                    floatingLabelText='Search'
                    value={this.props.match}
                    onChange={this.onSearchChange}
                    fullWidth />
                </th>
              </tr>
            </thead>
            {this.props.loading ?
              <tbody>
                <LoadingRow/>
              </tbody>
            :/*else*/
              <ScrollList
                ref='scrollList'
                renderRoot={this.renderRoot}
                renderItem={this.renderItem}
                renderPlaceholder={this.renderPlaceholder}
                items={this.props.keys}
                itemHeight={this.props.itemHeight}
                offset={this.props.offset}
                scrollHandler={this.onScroll} />
            }
          </table>
        </div>
      </HotKeys>
    )
  }
}

export default ValuesTable


================================================
FILE: src/components/details/Details.js
================================================
import React from 'react'
import keys from '../../utils/keys'
import TypeIcon from '../../components/TypeIcon'

class Details extends React.Component {

  static propTypes = {
    _key: React.PropTypes.string.isRequired,
    type: React.PropTypes.string.isRequired,
    value: React.PropTypes.node.isRequired,
    buttons: React.PropTypes.node
  }

  render () {
    return (
      <div className='key-details'>
        <div className='key'>
          {this.props._key}
        </div>
        <div className='type'>
          <TypeIcon type={this.props.type}/>
          <span className='type-name'>{keys.getTypeName(this.props.type)}</span>
          {this.props.buttons ?
            <div className='buttons'>
              {this.props.buttons}
            </div>
          : null}
        </div>
        <div className='value'>
          {this.props.value}
        </div>
      </div>
    )
  }
}

export default Details


================================================
FILE: src/components/details/HashDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import Details from '../../components/details/Details'

@pureRender
class HashDetails extends React.Component {

  static propTypes = {
    item: ImmutablePropTypes.map
  }

  render () {
    return (
      <Details {...this.props.item.toJS()}/>
    )
  }
}

export default HashDetails


================================================
FILE: src/components/details/ListDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import clipboard from 'clipboard'
import Details from '../../components/details/Details'
import Highlight from '../../components/Highlight'
import Icon from '../../components/Icon'

@pureRender
class ListDetails extends React.Component {

  static propTypes = {
    item: ImmutablePropTypes.map
  }

  state = {
    types: ['JSON', 'Raw'],
    show: 'JSON',
    hasJSON: false
  }

  renderValue () {
    let values = this.props.item.get('value')
    return values.map((value, i) => {
      let result
      try {
        if (this.state.show === 'Raw') {
          result = <pre><code>{value}</code></pre>
        } else {
          result = (
            <Highlight className='json'>
              {JSON.stringify(JSON.parse(value), null, 2)}
            </Highlight>
          )
        }
        this.state.hasJSON = true
      } catch (e) {
        result = <pre><code>{value}</code></pre>
      }
      return (
        <div key={i} className='value-item'>
          {result}
          <div className='actions'>
            <span className='index'>{i}</span>
            <a href='#' onClick={(e) => clipboard.writeText(value)}>
              <Icon type='content_paste'/>
            </a>
          </div>
        </div>
      )
    })
  }

  renderButtons () {
    let buttons = {}

    // Create types buttons.
    if (this.state.hasJSON) {
      buttons.show = (
        <div className='pill'>
          {this.state.types.map((type) => {
            return (
              <a
                key={type}
                href='#'
                className={(this.state.show === type) ? 'active' : null}
                onClick={(e) => {
                  e.preventDefault()
                  this.setState({show: type})
                }}
              >
                {type}
              </a>
            )
          })}
        </div>
      )
    }

    return React.addons.createFragment(buttons)
  }

  render () {
    let {_key, type} = this.props.item.toJS()
    return (
      <Details _key={_key} type={type} value={this.renderValue()} buttons={this.renderButtons()}/>
    )
  }
}

export default ListDetails


================================================
FILE: src/components/details/SetDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import clipboard from 'clipboard'
import Details from '../../components/details/Details'
import Highlight from '../../components/Highlight'
import Icon from '../../components/Icon'

@pureRender
class SetDetails extends React.Component {

  static propTypes = {
    item: ImmutablePropTypes.map
  }

  state = {
    types: ['JSON', 'Raw'],
    show: 'JSON',
    hasJSON: false
  }

  renderValue () {
    let values = this.props.item.get('value')
    return values.map((value, i) => {
      let result
      try {
        if (this.state.show === 'Raw') {
          result = <pre><code>{value}</code></pre>
        } else {
          result = (
            <Highlight className='json'>
              {JSON.stringify(JSON.parse(value), null, 2)}
            </Highlight>
          )
        }
        this.state.hasJSON = true
      } catch (e) {
        result = <pre><code>{value}</code></pre>
      }
      return (
        <div key={i} className='value-item'>
          {result}
          <div className='actions'>
            <a href='#' onClick={(e) => clipboard.writeText(value)}>
              <Icon type='content_paste'/>
            </a>
          </div>
        </div>
      )
    })
  }

  renderButtons () {
    let buttons = {}

    // Create types buttons.
    if (this.state.hasJSON) {
      buttons.show = (
        <div className='pill'>
          {this.state.types.map((type) => {
            return (
              <a
                key={type}
                href='#'
                className={(this.state.show === type) ? 'active' : null}
                onClick={(e) => {
                  e.preventDefault()
                  this.setState({show: type})
                }}
              >
                {type}
              </a>
            )
          })}
        </div>
      )
    }

    return React.addons.createFragment(buttons)
  }

  render () {
    let {_key, type} = this.props.item.toJS()
    return (
      <Details _key={_key} type={type} value={this.renderValue()} buttons={this.renderButtons()}/>
    )
  }
}

export default SetDetails


================================================
FILE: src/components/details/SortedSetDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import clipboard from 'clipboard'
import Details from '../../components/details/Details'
import Highlight from '../../components/Highlight'
import Icon from '../../components/Icon'

@pureRender
class SortedSetDetails extends React.Component {

  static propTypes = {
    item: ImmutablePropTypes.map
  }

  state = {
    types: ['JSON', 'Raw'],
    show: 'JSON',
    hasJSON: false
  }

  renderValue () {
    let values = this.props.item.get('value')
    return values.map((value, i) => {
      let result
      try {
        if (this.state.show === 'Raw') {
          result = <pre><code>{value.value}</code></pre>
        } else {
          result = (
            <Highlight className='json'>
              {JSON.stringify(JSON.parse(value.value), null, 2)}
            </Highlight>
          )
        }
        this.state.hasJSON = true
      } catch (e) {
        result = <pre><code>{value.value}</code></pre>
      }
      return (
        <div key={i} className='value-item'>
          {result}
          <div className='actions'>
            <span className='index'>{value.score}</span>
            <a href='#' onClick={(e) => clipboard.writeText(value.value)}>
              <Icon type='content_paste'/>
            </a>
          </div>
        </div>
      )
    })
  }

  renderButtons () {
    let buttons = {}

    // Create types buttons.
    if (this.state.hasJSON) {
      buttons.show = (
        <div className='pill'>
          {this.state.types.map((type) => {
            return (
              <a
                key={type}
                href='#'
                className={(this.state.show === type) ? 'active' : null}
                onClick={(e) => {
                  e.preventDefault()
                  this.setState({show: type})
                }}
              >
                {type}
              </a>
            )
          })}
        </div>
      )
    }

    return React.addons.createFragment(buttons)
  }

  render () {
    let {_key, type} = this.props.item.toJS()
    return (
      <Details _key={_key} type={type} value={this.renderValue()} buttons={this.renderButtons()}/>
    )
  }
}

export default SortedSetDetails


================================================
FILE: src/components/details/StringDetails.js
================================================
import React from 'react'
import pureRender from 'pure-render-decorator'
import ImmutablePropTypes from 'react-immutable-proptypes'
import clipboard from 'clipboard'
import Details from '../../components/details/Details'
import Highlight from '../../components/Highlight'

@pureRender
class KeyDetails extends React.Component {

  static propTypes = {
    item: ImmutablePropTypes.map
  }

  state = {
    types: ['JSON', 'Raw'],
    show: 'JSON',
    hasJSON: false
  }

  renderValue () {
    let value = this.props.item.get('value')
    try {
      if (this.state.show === 'Raw') {
        value = <pre><code>{value}</code></pre>
      } else {
        value = (
          <Highlight className='json'>
            {JSON.stringify(JSON.parse(value), null, 2)}
          </Highlight>
        )
      }
      this.state.hasJSON = true
    } catch (e) {
      value = <pre><code>{value}</code></pre>
    }
    return value
  }

  renderButtons () {
    let buttons = {}
    let value = this.props.item.get('value')

    // Create types buttons.
    if (this.state.hasJSON) {
      buttons.show = (
        <div className='pill'>
          {this.state.types.map((type) => {
            return (
              <a
                key={type}
                href='#'
                className={(this.state.show === type) ? 'active' : null}
                onClick={(e) => {
                  e.preventDefault()
                  this.setState({show: type})
                }}
              >
                {type}
              </a>
            )
          })}
        </div>
      )
    }

    // Todo make this into a component maybe?
    buttons.copy = (
      <a href='#' onClick={(e) => clipboard.writeText(value)}>Copy</a>
    )

    return React.addons.createFragment(buttons)
  }

  render () {
    return (
      <Details {...this.props.item.toJS()}
        value={this.renderValue()}
        buttons={this.renderButtons()}
      />
    )
  }
}

export default KeyDetails


================================================
FILE: src/components/handlers/BrowseHandler.js
================================================
import React from 'react'
import autobind from 'autobind-decorator'
import connectToStores from 'alt/utils/connectToStores'
import pureRender from 'pure-render-decorator'
import throttle from '../../utils/throttle'
import hostsStore from '../../stores/hostsStore'
import browseStore from '../../stores/browseStore'
import browseActions from '../../actions/browseActions'
import {IconButton} from 'material-ui'
import ValuesTable from '../../components/ValuesTable'
import KeyDetails from '../../components/KeyDetails'
import SidePanel from '../../components/SidePanel'
import Icon from '../../components/Icon'

/**
 * Wrap the Browse component so we can handle transitions.
 */
@pureRender
class BrowseHandler extends React.Component {

  static willTransitionTo () {
    let state = Object.assign({}, hostsStore.getState(), browseStore.getState())
    let {loaded, connected, match} = state
    if (!loaded && connected) {
      browseActions.fetchKeys({match})
    }
  }

  render () {
    return <Browse/>
  }
}

/**
 * Browse component.
 */
@connectToStores
@pureRender
@autobind
class Browse extends React.Component {

  static propTypes = {
    loaded: React.PropTypes.bool,
    connected: React.PropTypes.bool,
    match: React.PropTypes.string,
    selectedKey: React.PropTypes.object
  }

  static getStores () {
    return [hostsStore, browseStore]
  }

  static getPropsFromStores () {
    return Object.assign({}, hostsStore.getState(), browseStore.getState())
  }

  state = {
    keyDetailsDocked: !!this.props.selectedKey
  }

  componentWillReceiveProps (nextProps) {
    // Match text changed.
    if (this.props.match !== nextProps.match) {
      this.fetchKeys({match: nextProps.match})
    }
    // Just connected to a new host.
    if (!this.props.connected && nextProps.connected) {
      this.fetchKeys({match: this.props.match})
    }
    // A new key was selected.
    if (nextProps.selectedKey && !this.state.keyDetailsDocked) {
      this.toggleKeyDetails()
    }
    // A key was unselected.
    if (this.props.selectedKey && !nextProps.selectedKey) {
      this.toggleKeyDetails()
    }
  }

  @throttle(250)
  fetchKeys (options = {}) {
    browseActions.fetchKeys.defer(options)
  }

  toggleKeyDetails () {
    this.refs.keyDetailsPanel.toggle()
    this.setState({
      keyDetailsDocked: !this.state.keyDetailsDocked
    })
  }

  onClickClose (e) {
    browseActions.toggleSelected()
  }

  render () {
    return (
      <div className='browse'>
        <ValuesTable {...this.props}/>
        <SidePanel
          ref='keyDetailsPanel'
          className='key-details-panel'
          openRight={true}
          docked={this.state.keyDetailsDocked}
          width={550}>
          <IconButton className='close' onClick={this.onClickClose}>
            <Icon type='cancel'/>
          </IconButton>
          {this.props.selectedKey ?
            <KeyDetails ref='keyDetails' item={this.props.selectedKey}/>
          :/*else*/
            null
          }
        </SidePanel>
      </div>
    )
  }
}

export default BrowseHandler


================================================
FILE: src/components/handlers/InfoHandler.js
================================================
import React from 'react'
import ImmutablePropTypes from 'react-immutable-proptypes'
import autobind from 'autobind-decorator'
import pureRender from 'pure-render-decorator'
import connectToStores from 'alt/utils/connectToStores'
import throttle from '../../utils/throttle'
import hostsStore from '../../stores/hostsStore'
import hostsActions from '../../actions/hostsActions'
import HostInfo from '../../components/HostInfo'

/**
 * Wrap the Info component so we can handle transisions.
 */
@pureRender
class InfoHandler extends React.Component {

  static willTransitionTo () {
    let {hostInfo, connected} = hostsStore.getState()
    if (!hostInfo && connected) {
      hostsActions.fetchHostInfo()
    }
  }

  render () {
    return <Info />
  }
}

/**
 * Info component.
 */
@connectToStores
@pureRender
@autobind
class Info extends React.Component {

  static propTypes = {
    connected: React.PropTypes.bool,
    hostInfoLoading: React.PropTypes.bool,
    hostInfo: ImmutablePropTypes.map
  }

  static getStores () {
    return [hostsStore]
  }

  static getPropsFromStores () {
    return hostsStore.getState()
  }

  componentDidMount () {
    this.refreshInterval = setInterval(() => this.fetchHostInfo(true), 1000)
  }

  componentWillUnmount () {
    clearInterval(this.refreshInterval)
  }

  componentWillReceiveProps (nextProps) {
    // Connected to a new server.
    if (this.props.connected !== nextProps.connected) {
      this.fetchHostInfo()
    }
  }

  @throttle(250)
  fetchHostInfo (isRefresh) {
    hostsActions.fetchHostInfo.defer(isRefresh)
  }

  render () {
    return (
      <div className='info'>
        {!this.props.hostInfo ?
          (this.props.hostInfoLoading ?
            <p>Loading Info</p>
          : null)
        :/*else*/
          <HostInfo {...this.props}/>
        }
      </div>
    )
  }
}

export default InfoHandler


================================================
FILE: src/components/handlers/MainHandler.js
================================================
import React from 'react'
import autobind from 'autobind-decorator'
import connectToStores from 'alt/utils/connectToStores'
import hostsStore from '../../stores/hostsStore'
import hostsActions from '../../actions/hostsActions'
import {RouteHandler} from 'react-router'
import mui from 'material-ui'
import Header from '../../components/Header'

// Create an mui theme manager.
const themeManager = new mui.Styles.ThemeManager()

/**
 * Wrap the Main component so we can handle transitions.
 */
class MainHandler extends React.Component {

  static willTransitionTo () {
    hostsActions.connectToHost(hostsStore.getState().activeHost)
  }

  render () {
    return <Main />
  }
}

/**
 * Main component.
 */
@connectToStores
@autobind
class Main extends React.Component {

  static propTypes = {
    activeHost: React.PropTypes.object
  }

  static getStores () {
    return [hostsStore]
  }

  static getPropsFromStores () {
    return hostsStore.getState()
  }

  static childContextTypes = {
    muiTheme: React.PropTypes.object
  }

  getChildContext () {
    return {
      muiTheme: themeManager.getCurrentTheme()
    }
  }

  render () {
    return (
      <div className='main'>
        <Header {...this.props}/>
        <RouteHandler/>
      </div>
    )
  }
}

export default MainHandler
export {themeManager}


================================================
FILE: src/components/handlers/NotFoundHandler.js
================================================
import React from 'react'

class NotFoundHandler extends React.Component {

  render () {
    return (
      <div className='not-found'>
        <h1>Sorry, Page Not Found</h1>
      </div>
    )
  }
}

export default NotFoundHandler


================================================
FILE: src/conf.js
================================================
var conf = {}

conf.BASENAME = 'RedisExplorer'
conf.APPNAME = conf.BASENAME
conf.DEVELPER_ID = 'Brian Link'
conf.COMPANY = 'Terra Eclipse, Inc.'
conf.ICON = 'resources/redisexplorer'
conf.ICON_URL = 'https://raw.githubusercontent.com/cpsubrian/redisexplorer/master/' + conf.ICON + '.ico'
conf.BUNDLE_ID = 'com.terraeclipse.redisexplorer'
conf.OSX_OUT = './dist/' + conf.APPNAME + '-darwin-x64'
conf.OSX_FILENAME = conf.OSX_OUT + '/' + conf.APPNAME + '.app'

module.exports = conf


================================================
FILE: src/main.js
================================================
/**
 * Entry point for babel.
 */

import 'babel/polyfill'
import './app'


================================================
FILE: src/router.js
================================================
import React from 'react'
import Router, {Route, NotFoundRoute} from 'react-router'

import MainHandler from './components/handlers/MainHandler'
import NotFoundHandler from './components/handlers/NotFoundHandler'
import BrowseHandler from './components/handlers/BrowseHandler'
import InfoHandler from './components/handlers/InfoHandler'

const routes = (
  <Route handler={MainHandler}>
    <Route name='browse' path='/' handler={BrowseHandler}/>
    <Route name='info' path='/info' handler={InfoHandler}/>
    <NotFoundRoute handler={NotFoundHandler}/>
  </Route>
)

const router = Router.create({
  routes: routes
})

export default router
export {routes, router}


================================================
FILE: src/stores/browseStore.js
================================================
import alt from '../alt'
import _ from 'underscore'
import Immutable from 'immutable'
import immutable from 'alt/utils/ImmutableUtil'
import regex from '../utils/regex'
import settings from '../utils/settings'
import browseActions from '../actions/browseActions'

@immutable
class BrowseStore {

  constructor () {
    // Bind actions.
    this.bindActions(browseActions)

    // Initialize state.
    this.keys = Immutable.OrderedMap()
    this.keysIndex = Immutable.List()
    this.selectedKey = null
    this.selectedIndex = null
    this.loading = false
    this.loaded = false
    this.finished = false
    this.error = null
    this.offset = 0
    this.match = settings.get('browse:match', null)
    this.matchRegExp = null
  }

  /* General
   ****************************************************************************/
  onResetKeys () {
    this.keys = this.keys.clear()
    this.keysIndex = this.keysIndex.clear()
    this.selectedKey = null
    this.selectedIndex = null
    this.loading = false
    this.loaded = false
    this.finished = false
    this.error = null
    this.offset = 0
    this.match = null
    this.matchRegExp = null
    settings.set('browse:match', null)
  }

  onSetOffset (offset) {
    this.offset = offset
  }

  onSetMatch (match) {
    this.matchRegExp = null
    if (match && match.length) {
      this.match = match
    } else {
      this.match = null
    }
    settings.set('browse:match', match)
  }

  onToggleSelectedKey (key) {
    if (key) {
      let index = this.keysIndex.indexOf(key)
      this.onToggleSelected({key, index})
    } else {
      this.onToggleSelected()
    }
  }

  onToggleSelectedIndex (index) {
    let key = this.keysIndex.get(index)
    this.onToggleSelected({key, index})
  }

  onToggleSelected (item = {}) {
    let {key, index} = item
    key = (typeof key !== 'undefined') ? key : this.selectedKey.get('key')
    index = (typeof index !== 'undefined') ? index : this.selectedIndex
    this.keys = this.keys.withMutations((keys) => {
      if (keys.get(key).get('selected')) {
        keys.update(key, (item) => item.set('selected', false))
        this.selectedKey = null
        this.selectedIndex = null
      } else {
        if (this.selectedKey) {
          keys.update(this.selectedKey.get('key'), (item) => item.set('selected', false))
        }
        keys.update(key, (item) => item.set('selected', true))
        this.selectedKey = keys.get(key)
        this.selectedIndex = index
      }
    })
  }

  /* Fetch Keys Lifecycle
   ****************************************************************************/
  onFetchKeys () {
    this.keys = this.keys.clear()
    this.keysIndex = this.keysIndex.clear()
    this.selectedKey = null
    this.selectedIndex = null
    this.loading = true
    this.loaded = false
    this.finished = false
    this.error = null
    this.offset = 0

    // Compute match regular expression.
    if (this.match && !this.matchRegExp) {
      this.matchRegExp = regex.fromGlob(this.match)
    }
  }

  onFetchKeysAdd (newKeys) {
    this.loading = false
    this.loaded = true
    this.keys = this.keys.withMutations((keys) => {
      this.keysIndex = this.keysIndex.withMutations((index) => {
        newKeys.forEach((key) => {
          if (!keys.has(key.key)) {
            index.push(key.key)
          }
          keys.set(key.key, Immutable.Map(key))
        })
      })
    })
  }

  onFetchKeysFailed (err) {
    this.loading = false
    this.loaded = true
    this.error = err
  }

  onFetchKeysFinished () {
    this.loading = false
    this.loaded = true
    this.finished = true
  }

  /* Fetch Values Lifecycle
   ****************************************************************************/
  onFetchValues (keys) {
    // @todo Maybe set a loading flag on each key?
  }

  onFetchValuesAdd (values) {
    this.keys = this.keys.withMutations((keys) => {
      _.each(values, (value, key) => {
        keys.update(key, (item) => item.set('value', value))
      })
    })
  }

  onFetchValuesFailed (err) {
    this.error = err
  }
}

export default alt.createStore(BrowseStore)


================================================
FILE: src/stores/hostsStore.js
================================================
import alt from '../alt'
import path from 'path'
import fs from 'fs'
import _ from 'underscore'
import Immutable from 'immutable'
import immutable from 'alt/utils/ImmutableUtil'
import sshConfig from 'ssh-config'
import hostsActions from '../actions/hostsActions'
import settings from '../utils/settings'

@immutable
class HostsStore {

  constructor () {
    // Bind actions.
    this.bindActions(hostsActions)

    // Initialize state.
    this.error = null
    this.connected = false
    this.connecting = false
    this.hostInfoLoading = false
    this.hostInfoError = null
    this.hostInfo = null
    this.hosts = Immutable.List()

    // Load hosts from .ssh.
    let configPath = path.join(
      process.env[(process.platform === 'win32') ? 'USERPROFILE' : 'HOME'],
      '.ssh',
      'config'
    )
    let hostsFile = fs.readFileSync(configPath, 'utf8')
    if (hostsFile && hostsFile.length) {
      let config = sshConfig.parse(hostsFile)

      this.hosts = this.hosts.withMutations((hosts) => {
        _.each(config, (host) => {
          hosts.push(Immutable.Map(host))
        })
      })
    }

    // Alphabetize.
    this.hosts = this.hosts.sortBy((host) => host.get('Host').toLowerCase())

    // Add localhost and set active host.
    this.hosts = this.hosts.unshift(Immutable.Map({
      Host: 'localhost',
      Hostname: 'localhost'
    }))

    // Set active host.
    let name = settings.get('hosts:active', 'localhost')
    this.activeHost = this.hosts.find((host) => host.get('Host') === name)
  }

  /* Connection Lifecycle
   ****************************************************************************/
  onConnectToHost (host) {
    if ((!this.connected && !this.connecting) || (this.activeHost !== host)) {
      this.activeHost = host
      this.connected = false
      this.connecting = true
      this.hostInfoLoading = false
      this.hostInfoError = null
      this.hostInfo = null
      settings.set('hosts:active', host.get('Host'))
    }
  }

  onConnectToHostFailed (err) {
    this.error = err
    this.connecting = false
  }

  onConnectedToHost () {
    this.connected = true
    this.connecting = false
  }

  /* Fetch Host Info Lifecycle
   ****************************************************************************/
  onFetchHostInfo (isRefresh) {
    if (!isRefresh) {
      this.loadingHostInfo = true
      this.hostInfo = null
    }
    this.hostInfoError = null
  }

  onFetchHostInfoFailed (err) {
    this.hostInfoLoading = false
    this.hostInfoError = err
  }

  onFetchHostInfoFinished (info) {
    this.hostInfoLoading = false
    this.hostInfoError = null
    this.hostInfo = Immutable.Map(info)
  }
}

export default alt.createStore(HostsStore)


================================================
FILE: src/utils/db.js
================================================
import redis from 'redis'
import redisInfo from 'redis-info'
import tunnel from 'tunnel-ssh'
import _ from 'underscore'

const DST_PORT = 6379
const LOCAL_PORT = 8379
const DEFAULT_COUNT = 250

// Abstraction around redis.
class DB {

  // Clean up open connections, then initiate a new host connection.
  connect (host, cb) {
    if (this.client) {
      this.client.end()
    }
    if (this.tunnel) {
      this.tunnel.close((err) => {
        if (err && err.message !== 'Not running') return cb(err)
        this.connectToHost(host, cb)
      })
    } else {
      this.connectToHost(host, cb)
    }
  }

  // Connect to localhost or remote.
  connectToHost (host, cb) {
    if (host.Host === 'localhost') {
      setImmediate(() => {
        this.client = redis.createClient()
        this.client.on('ready', () => {
          cb()
        })
      })
    } else {
      this.connectToRemoteHost(host, cb)
    }
  }

  // Connect to a remote host using privateKey auth via ssh-agent.
  connectToRemoteHost (host, cb) {
    let config = {
      host: host.Hostname,
      dstPort: DST_PORT,
      localPort: LOCAL_PORT,
      username: host.User,
      agent: process.env.SSH_AUTH_SOCK
    }
    this.tunnel = tunnel(config, (err) => {
      if (err) return cb(err)
      this.client = redis.createClient(config.localPort)
      this.client.on('ready', () => {
        cb()
      })
    })
  }

  // An iterator-like api to scan keys.
  scan (options = {}) {
    let db = this

    options.cmd = 'SCAN'
    options.count = options.count || DEFAULT_COUNT

    let _scan = {
      options: options,
      cursor: 0,
      stopped: false,
      results: [],
      // Perform the next iteration of the scan.
      next: (cb) => {
        let args = []
        if (_scan.stopped) return
        if (_scan.cursor !== false) {
          args.push(_scan.cursor)
          if (options.key) {
            args.push(options.key)
          }
          if (options.count) {
            args.push('COUNT')
            args.push(options.count)
          }
          if (options.match) {
            args.push('MATCH')
            args.push(options.match)
          }
          args.push(_scan.process.bind(db, cb))
          db.client[options.cmd].apply(db.client, args)
        } else {
          if (cb) cb(null, false)
        }
      },
      // Collect results.
      process: (cb, err, results) => {
        if (err) return cb(err)
        if (_scan.stopped) return
        let [cursor, keys] = results
        _scan.cursor = (cursor === '0') ? false : cursor
        _scan.results = _scan.results.concat(keys.map(key => {
          return {key: key, _key: key}
        }))
        // Make sure we have at least options.count results.
        if (!_scan.cursor || (_scan.results.length >= options.count)) {
          ((results) => {
            _scan.results = []
            _scan.postProcess(cb, results)
          })(_scan.results)
        } else {
          _scan.next(cb)
        }
      },
      // Lookup data types of the matching keys.
      postProcess: (cb, results) => {
        if (_scan.stopped) return
        if (!results.length || !_scan.options.loadTypes) {
          return cb(null, results)
        }
        db.client.multi(results.map((result) => {
          return ['TYPE', result.key]
        })).exec((err, types) => {
          if (err) return cb(err)
          types.forEach((type, i) => {
            results[i].type = type
          })
          cb(null, results)
        })
      },
      stop: () => {
        _scan.stopped = true
      }
    }
    return _scan
  }

  // Fetch and parse the redis server info.
  fetchInfo (cb) {
    this.client.INFO((err, result) => {
      if (err) return cb(err)
      try {
        let info = redisInfo.parse(result)
        return cb(null, info)
      } catch (e) {
        return cb(e)
      }
    })
  }

  // Load values for a set of keys ({key, type}).
  fetchValues (keys, cb) {
    // Collect keys by type.
    let types = keys.reduce((memo, key) => {
      memo[key.type] = memo[key.type] || []
      memo[key.type].push(key.key)
      return memo
    }, {})

    // Create tasks.
    let tasks = _.map(types, (keys, type) => {
      switch (type) {
        case 'string':
          return this.fetchStringValues(keys)
        case 'list':
          return this.fetchListValues(keys)
        case 'set':
          return this.fetchSetValues(keys)
        case 'zset':
          return this.fetchSortedSetValues(keys)
        case 'hash':
          return this.fetchHashValues(keys)
        default:
          return Promise.reject(new Error('Unknown type: ' + type))
      }
    })

    Promise.all(tasks).then((values) => {
      cb(null, Object.assign.apply(null, values))
    }, (err) => {
      cb(err)
    })
  }

  // Fetch string values for an array of keys.
  fetchStringValues (keys) {
    return new Promise((resolve, reject) => {
      this.client.multi(keys.map((key) => {
        return ['GET', key]
      })).exec((err, results) => {
        if (err) return reject(err)
        resolve(keys.reduce((memo, key, i) => {
          memo[key] = results[i]
          return memo
        }, {}))
      })
    })
  }

  // Fetch list values for an array of keys.
  fetchListValues (keys) {
    return new Promise((resolve, reject) => {
      this.client.multi(keys.map((key) => {
        return ['LRANGE', key, 0, -1]
      })).exec((err, results) => {
        if (err) return reject(err)
        resolve(keys.reduce((memo, key, i) => {
          memo[key] = results[i]
          return memo
        }, {}))
      })
    })
  }

  // Fetch set values for an array of keys.
  fetchSetValues (keys) {
    return new Promise((resolve, reject) => {
      this.client.multi(keys.map((key) => {
        return ['SMEMBERS', key]
      })).exec((err, results) => {
        if (err) return reject(err)
        resolve(keys.reduce((memo, key, i) => {
          memo[key] = results[i]
          return memo
        }, {}))
      })
    })
  }

  // Fetch sorted-set values for an array of keys.
  fetchSortedSetValues (keys) {
    return new Promise((resolve, reject) => {
      this.client.multi(keys.map((key) => {
        return ['ZRANGEBYSCORE', key, '-inf', '+inf', 'WITHSCORES']
      })).exec((err, results) => {
        if (err) return reject(err)
        resolve(keys.reduce((memo, key, i) => {
          memo[key] = []
          results[i].forEach((val, j) => {
            if (j % 2 === 0 || j === 0) {
              memo[key].push({
                value: val,
                score: parseFloat(results[i][j + 1])
              })
            }
          })
          return memo
        }, {}))
      })
    })
  }

  // Fetch hash values for an array of keys.
  fetchHashValues (keys) {
    return Promise.resolve(keys.reduce((memo, key) => {
      memo[key] = '[value]'
      return memo
    }, {}))
  }
}

export default (new DB())


================================================
FILE: src/utils/keys.js
================================================
const keysUtils = {

  getTypeName (type) {
    switch (type) {
      case 'string': return 'String'
      case 'list': return 'List'
      case 'set': return 'Set'
      case 'zset': return 'Sorted Set'
      case 'hash': return 'Hash'
    }
  }
}

export default keysUtils


================================================
FILE: src/utils/perf.js
================================================
import React from 'react/addons'
export default React.addons.Perf


================================================
FILE: src/utils/regex.js
================================================
const regex = {

  escape (s) {
    return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
  },

  fromGlob (s) {
    let converted = s
      .split('*')
      .map((part) => {
        return regex.escape(part)
      })
      .map((part) => {
        return '(' + part + ')'
      })
      .join('(.*)')

    return new RegExp('^' + converted, 'g')
  }
}

export default regex


================================================
FILE: src/utils/settings.js
================================================
import fs from 'fs'
import path from 'path'
import mkdirp from 'mkdirp'
import conf from '../conf'
import throttle from '../utils/throttle'

let basePath = path.join(
      process.env[(process.platform === 'win32') ? 'USERPROFILE' : 'HOME'],
      'Library',
      'Application\ Support',
      conf['APPNAME']
    )
let settingsPath = path.join(basePath, 'settings.json')

// Create basePath if it doesn't exist.
mkdirp.sync(basePath)

// Load settings from the file.
let cache = {}
try {
  cache = JSON.parse(fs.readFileSync(settingsPath))
} catch (e) {}

// Settings API.
const settings = {

  get (key, fallback) {
    return cache[key] || fallback
  },

  set (key, value) {
    cache[key] = value
    settings.write()
  },

  @throttle(1000)
  write () {
    fs.writeFileSync(settingsPath, JSON.stringify(cache))
  }
}

export default settings


================================================
FILE: src/utils/spawn.js
================================================
/**
 * ES7-like async via a wrapped generator function.
 * Inside the function you can yield Promises.
 */
function spawn (genF) {
  return new Promise((resolve, reject) => {
    let gen = genF()
    let step = (nextF) => {
      let next
      try {
        next = nextF()
      } catch(e) {
        // Finished with failure, reject the promise.
        reject(e)
        return
      }
      if (next.done) {
        // Finished with success, resolve the promise.
        resolve(next.value)
        return
      }
      // Not finished, chain off the yielded promise and `step` again.
      Promise
        .cast(next.value)
        .then((v) => {
          step(() => gen.next(v))
        }, (e) => {
          step(() => gen.throw(e))
        })
    }
    step(() => gen.next(undefined))
  })
}

export default spawn


================================================
FILE: src/utils/throttle.js
================================================
import _ from 'underscore'

/**
 * Throttle decorator.
 *
 * Use like:
 *
 *   @throttle(250)
 *   myFunction () {
 *     // Probably does something.
 *   }
 */
function throttle (delay, options = {}) {
  return function throttleDecorator (target, name, descriptor) {
    descriptor.value = _.throttle(descriptor.value, delay, options)
    return descriptor
  }
}

export default throttle


================================================
FILE: styles/.gitkeep
================================================


================================================
FILE: styles/components/header.less
================================================
.header {
  .icon {
    vertical-align: middle;
  }
  .toolbar {
    padding: 0 !important;
  }
  .button {
    display: inline-block;
    padding: 0 @space;
    color: @grey-600;
    line-height: @toolbarHeight;
    text-decoration: none;

    &:hover {
      color: @black;
      text-decoration: none;
    }
    &.active {
      color: @pink;
    }
    .icon {
      vertical-align: middle;
      margin-right: 4px;
    }
  }
  .host-button {
    &.disconnected i {
      color: @grey-600;
    }
    &.connecting i {
      color: @pink-100;
    }
    &.connected i {
      color: @pink;
    }
  }
  .host-option {
    font-size: 14px;

    .icon {
      font-size: 16px;
      color: @grey-400;
    }
  }
}

================================================
FILE: styles/components/key-details.less
================================================
.key-details-panel {
  .side-panel {
    position: relative;

    .close {
      position: absolute !important;
      top: 0;
      right: 0;
      color: @cyan-600;

      &:hover {
        color: @cyan-300;
      }
    }

    .key-details {
      display: flex;
      flex-direction: column;
      height: 100%;
      background-color: @grey-50;
      color: @cyan-900;
      font-size: 12px;

      & > * {
        box-sizing: border-box;
      }
      .key {
        min-height: 48px;
        padding: 15px 48px 12px 24px;
        background: @cyan-700;
        border-bottom: 1px solid @cyan-600;
        color: @cyan-100;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-size: 16px;
      }
      .type {
        padding: 12px 24px;
        background: @cyan-800;
        border-bottom: 1px solid @cyan-700;
        color: @cyan-400;
        position: relative;

        .type-icon {
          font-size: 16px;
          margin-right: 6px;
          vertical-align: middle;
        }
        .type-name {
          vertical-align: middle;
        }
        .buttons {
          position: absolute;
          top: 11px;
          right: 24px;

          & > * {
            margin-left: 8px;
            float: left;
          }
          a {
            font-size: 10px;
            line-height: 1em;
            display: inline-block;
            padding: 4px 8px;
            color: @cyan-900;
            text-decoration: none;
            background: @cyan-600;
            border-radius: 4px;
            transition: background 300ms;
          }
          a:hover {
            background: @cyan-500;
          }
          a.active, a:active {
            color: @cyan-50;
            background: @cyan-400;
          }
          .pill {
            a {
              margin-left: 1px;
              border-radius: 0;
            }
            a:first-child {
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
            }
            a:last-child {
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
            }
          }
        }
      }
      .value {
        flex: 1;
        overflow: auto;
        padding: 24px;
        position: relative;

        .value-item {
          position: relative;
        }
        .value-item .actions {
          display: inline-block;
          position: absolute;
          top: 1px;
          right: 1px;
          padding: 2px 6px;
          font-size: 9px;
          line-height: 12px;
          background: @cyan-50;
          color: @white;
          border-bottom-left-radius: 5px;
        }
        .value-item:hover .actions {
          background-color: @cyan-300;
        }
        .value-item .actions a {
          display: inline-block;
          margin-left: 6px;
          color: @white;
          font-size: 12px;
          vertical-align: middle;
        }
        .value-item .actions a:first-child {
          margin-left: 0;
        }
        .value-item .actions a i {
          font-size: 12px;
        }
        .value-item .actions a:hover {
          color: @cyan-800;
        }
        .value-item .actions a:active {
          color: @cyan-900;
        }

        pre {
          display: block;
          padding: 0;
          margin: 0 0 12px 0;
          white-space: pre-wrap;
          word-wrap: break-word;
        }
        pre:last-child {
          margin-bottom: 0;
        }
        pre code {
          display: block;
          padding: 12px;
          background: @white !important;
          border: 1px solid @grey-100;
          border-bottom-color: @grey-200;
        }
      }
    }
  }
}


================================================
FILE: styles/components/values-table.less
================================================
.values-table {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  table {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  thead {
    flex: 0 0 auto;
    display: block;
    .zDepth(1);

    tr {
      display: flex;
      flex-direction: row;
    }
    th {
      flex: 1;
      padding: 0 @space;
      text-align: left;
      background: @grey-100;
      border-bottom: none;
    }
    .search {
      margin-top: -12px;
      margin-bottom: -9px;
    }
  }
  tbody {
    flex: 1 1 auto;
    display: block;

    tr {
      display: flex;
      flex-direction: row;

      td {
        border-bottom: 1px solid @grey-100;
        padding: @space/2 @space;
        height: (30 - @space);
        line-height: (30 - @space);
        font-size: 12px;
      }
      td.key {
        color: @grey-800;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        strong {
          color: @cyan-600;
        }
      }
      td.value {
        flex: 1;
        color: @grey-300;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      td.type i {
        font-size: 16px;
        vertical-align: middle;
        color: @blue-grey-200;
      }
    }
    tr:hover {
      td {
        cursor: pointer;
        background: @grey-50;
      }
      td.key {
        color: @grey-900;
      }
      td.value {
        color: @grey-600;
      }
    }
    tr.selected {
      td {
        background: @cyan-50;
      }
      td.key {
        color: @cyan-900;
      }
      td.value {
        color: @cyan-700;
      }
    }
  }
}

================================================
FILE: styles/handlers/browse.less
================================================
.main {
  .browse {
    flex: 1;
    position: relative;
  }
}

================================================
FILE: styles/handlers/info.less
================================================
.main {
  .info {
    flex: 1;
    position: relative;
    overflow-y: auto;
    background: @grey-100;
  }
  .host-info {
    padding: 24px;
    -webkit-column-count: 3;
    -webkit-column-gap: 24px;

    .host-info-group {
      box-sizing: border-box;
      display: inline-block;
      padding: 12px;
      margin-bottom: 24px;
      width: 100%;

      h3 {
        margin: 0 0 4px 0;
        padding: 0;
        font-size: 12px;
        color: @cyan;
      }
      table {
        width: 100%;
        font-size: 11px;

        tr {
          td {
            padding: 2px 0;
            white-space: pre-wrap;
            word-wrap: break-word;

            strong {
              color: @cyan-200;
              margin-top: 5px;
            }
          }
          td.prop {
            padding-right: 12px;
            color: @grey-500;
          }
          td.value {

          }
        }
        tr:nth-child(2n) {
          td {
            background: #fbfbfb;
          }
        }
      }
    }
  }
}

================================================
FILE: styles/handlers/main.less
================================================
.main {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;

  .header {
    flex: 0 0 @toolbarHeight;
    .zDepth(2);
  }
}

================================================
FILE: styles/index.less
================================================
// Fonts
@import url(fonts/Roboto/Roboto.css);
@import url(fonts/MaterialIcons/MaterialIcons.css);

// Utils
@import "utils/variables.less";
@import "utils/material-colors.less";
@import "utils/mixins.less";
@import "utils/highlight.less";

// Handlers
@import "handlers/main.less";
@import "handlers/browse.less";
@import "handlers/info.less";

// Components
@import "components/header.less";
@import "components/key-details.less";
@import "components/values-table.less";

// Reset html/body
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: none;
  //-webkit-user-select: none;
  //-webkit-user-drag: none;
  font-family: @font-regular;
  cursor: default;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizelegibility;
  //-webkit-font-smoothing: antialiased;
  img {
    pointer-events: none;
  }
}

================================================
FILE: styles/utils/highlight.less
================================================
/*

github.com style (c) Vasily Polovnyov <vast@whiteants.net>

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
  -webkit-text-size-adjust: none;
}

.hljs-comment,
.diff .hljs-header {
  color: #998;
  font-style: italic;
}

.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
  color: #333;
  font-weight: bold;
}

.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
  color: #008080;
}

.hljs-string,
.hljs-tag .hljs-value,
.hljs-doctag,
.tex .hljs-formula {
  color: #d14;
}

.hljs-title,
.hljs-id,
.scss .hljs-preprocessor {
  color: #900;
  font-weight: bold;
}

.hljs-list .hljs-keyword,
.hljs-subst {
  font-weight: normal;
}

.hljs-class .hljs-title,
.hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
  color: #458;
  font-weight: bold;
}

.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rule .hljs-property,
.django .hljs-tag .hljs-keyword {
  color: #000080;
  font-weight: normal;
}

.hljs-attribute,
.hljs-variable,
.lisp .hljs-body,
.hljs-name {
  color: #008080;
}

.hljs-regexp {
  color: #009926;
}

.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.clojure .hljs-keyword,
.scheme .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
  color: #990073;
}

.hljs-built_in {
  color: #0086b3;
}

.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
  color: #999;
  font-weight: bold;
}

.hljs-deletion {
  background: #fdd;
}

.hljs-addition {
  background: #dfd;
}

.diff .hljs-change {
  background: #0086b3;
}

.hljs-chunk {
  color: #aaa;
}

================================================
FILE: styles/utils/material-colors.less
================================================
// ==========================================================================
//
// Name:           UI Color Palette
// Description:    The color palette of material design.
// Version:        2.1.0
//
// Author:         Denis Malinochkin
// Git:            https://github.com/mrmlnc/material-color
//
// twitter:        @mrmlnc
//
// ==========================================================================

// Palettes
// --------------------------------------------------------------------------

// Red
@list-red:                             #ffebee, #ffcdd2, #ef9a9a, #e57373, #ef5350,
                                       #f44336, #e53935, #d32f2f, #c62828, #b71c1c,
                                       #ff8a80, #ff5252, #ff1744, #d50000;

// Pink
@list-pink:                            #fce4ec, #f8bbd0, #f48fb1, #f06292, #ec407a,
                                       #e91e63, #d81b60, #c2185b, #ad1457, #880e4f,
                                       #ff80ab, #ff4081, #f50057, #c51162;

// Purple
@list-purple:                          #f3e5f5, #e1bee7, #ce93d8, #ba68c8, #ab47bc,
                                       #9c27b0, #8e24aa, #7b1fa2, #6a1b9a, #4a148c,
                                       #ea80fc, #e040fb, #d500f9, #aa00ff;

// Deep Purple
@list-deep-purple:                     #ede7f6, #d1c4e9, #b39ddb, #9575cd, #7e57c2,
                                       #673ab7, #5e35b1, #512da8, #4527a0, #311b92,
                                       #b388ff, #7c4dff, #651fff, #6200ea;

// Indigo
@list-indigo:                          #e8eaf6, #c5cae9, #9fa8da, #7986cb, #5c6bc0,
                                       #3f51b5, #3949ab, #303f9f, #283593, #1a237e,
                                       #8c9eff, #536dfe, #3d5afe, #304ffe;

// Blue
@list-blue:                            #e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5,
                                       #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1,
                                       #82b1ff, #448aff, #2979ff, #2962ff;

// Light Blue
@list-light-blue:                      #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6,
                                       #03a9f4, #039be5, #0288d1, #0277bd, #01579b,
                                       #80d8ff, #40c4ff, #00b0ff, #0091ea;

// Cyan
@list-cyan:                            #e0f7fa, #b2ebf2, #80deea, #4dd0e1, #26c6da,
                                       #00bcd4, #00acc1, #0097a7, #00838f, #006064,
                                       #84ffff, #18ffff, #00e5ff, #00b8d4;

// Teal
@list-teal:                            #e0f2f1, #b2dfdb, #80cbc4, #4db6ac, #26a69a,
                                       #009688, #00897b, #00796b, #00695c, #004d40,
                                       #a7ffeb, #64ffda, #1de9b6, #00bfa5;

// Green
@list-green:                           #e8f5e9, #c8e6c9, #a5d6a7, #81c784, #66bb6a,
                                       #4caf50, #43a047, #388e3c, #2e7d32, #1b5e20,
                                       #b9f6ca, #69f0ae, #00e676, #00c853;

// Light Green
@list-light-green:                     #f1f8e9, #dcedc8, #c5e1a5, #aed581, #9ccc65,
                                       #8bc34a, #7cb342, #689f38, #558b2f, #33691e,
                                       #ccff90, #b2ff59, #76ff03, #64dd17;

// Lime
@list-lime:                            #f9fbe7, #f0f4c3, #e6ee9c, #dce775, #d4e157,
                                       #cddc39, #c0ca33, #afb42b, #9e9d24, #827717,
                                       #f4ff81, #eeff41, #c6ff00, #aeea00;

// Yellow
@list-yellow:                          #fffde7, #fff9c4, #fff59d, #fff176, #ffee58,
                                       #ffeb3b, #fdd835, #fbc02d, #f9a825, #f57f17,
                                       #ffff8d, #ffff00, #ffea00, #ffd600;

// Amber
@list-amber:                           #fff8e1, #ffecb3, #ffe082, #ffd54f, #ffca28,
                                       #ffc107, #ffb300, #ffa000, #ff8f00, #ff6f00,
                                       #ffe57f, #ffd740, #ffc400, #ffab00;

// Orange
@list-orange:                          #fff3e0, #ffe0b2, #ffcc80, #ffb74d, #ffa726,
                                       #ff9800, #fb8c00, #f57c00, #ef6c00, #e65100,
                                       #ffd180, #ffab40, #ff9100, #ff6d00;

// Deep Orange
@list-deep-orange:                     #fbe9e7, #ffccbc, #ffab91, #ff8a65, #ff7043,
                                       #ff5722, #f4511e, #e64a19, #d84315, #bf360c,
                                       #ff9e80, #ff6e40, #ff3d00, #dd2c00;

// Brown
@list-brown:                           #efebe9, #d7ccc8, #bcaaa4, #a1887f, #8d6e63,
                                       #795548, #6d4c41, #5d4037, #4e342e, #3e2723;

// Grey
@list-grey:                            #fafafa, #f5f5f5, #eeeeee, #e0e0e0, #bdbdbd,
                                       #9e9e9e, #757575, #616161, #424242, #212121;

// Blue Grey
@list-blue-grey:                       #eceff1, #cfd8dc, #b0bec5, #90a4ae, #78909c,
                                       #607d8b, #546e7a, #455a64, #37474f, #263238;



// Definitions
// --------------------------------------------------------------------------

// Red
@red:                              extract(@list-red, 6);

@red-50:                           extract(@list-red, 1);
@red-100:                          extract(@list-red, 2);
@red-200:                          extract(@list-red, 3);
@red-300:                          extract(@list-red, 4);
@red-400:                          extract(@list-red, 5);
@red-500:                          extract(@list-red, 6);
@red-600:                          extract(@list-red, 7);
@red-700:                          extract(@list-red, 8);
@red-800:                          extract(@list-red, 9);
@red-900:                          extract(@list-red, 10);
@red-A100:                         extract(@list-red, 11);
@red-A200:                         extract(@list-red, 12);
@red-A400:                         extract(@list-red, 13);
@red-A700:                         extract(@list-red, 14);


// Pink
@pink:                             extract(@list-pink, 6);

@pink-50:                          extract(@list-pink, 1);
@pink-100:                         extract(@list-pink, 2);
@pink-200:                         extract(@list-pink, 3);
@pink-300:                         extract(@list-pink, 4);
@pink-400:                         extract(@list-pink, 5);
@pink-500:                         extract(@list-pink, 6);
@pink-600:                         extract(@list-pink, 7);
@pink-700:                         extract(@list-pink, 8);
@pink-800:                         extract(@list-pink, 9);
@pink-900:                         extract(@list-pink, 10);
@pink-A100:                        extract(@list-pink, 11);
@pink-A200:                        extract(@list-pink, 12);
@pink-A400:                        extract(@list-pink, 13);
@pink-A700:                        extract(@list-pink, 14);


// Purple
@purple:                           extract(@list-purple, 6);

@purple-50:                        extract(@list-purple, 1);
@purple-100:                       extract(@list-purple, 2);
@purple-200:                       extract(@list-purple, 3);
@purple-300:                       extract(@list-purple, 4);
@purple-400:                       extract(@list-purple, 5);
@purple-500:                       extract(@list-purple, 6);
@purple-600:                       extract(@list-purple, 7);
@purple-700:                       extract(@list-purple, 8);
@purple-800:                       extract(@list-purple, 9);
@purple-900:                       extract(@list-purple, 10);
@purple-A100:                      extract(@list-purple, 11);
@purple-A200:                      extract(@list-purple, 12);
@purple-A400:                      extract(@list-purple, 13);
@purple-A700:                      extract(@list-purple, 14);


// Deep Purple
@deep-purple:                      extract(@list-deep-purple, 6);

@deep-purple-50:                   extract(@list-deep-purple, 1);
@deep-purple-100:                  extract(@list-deep-purple, 2);
@deep-purple-200:                  extract(@list-deep-purple, 3);
@deep-purple-300:                  extract(@list-deep-purple, 4);
@deep-purple-400:                  extract(@list-deep-purple, 5);
@deep-purple-500:                  extract(@list-deep-purple, 6);
@deep-purple-600:                  extract(@list-deep-purple, 7);
@deep-purple-700:                  extract(@list-deep-purple, 8);
@deep-purple-800:                  extract(@list-deep-purple, 9);
@deep-purple-900:                  extract(@list-deep-purple, 10);
@deep-purple-A100:                 extract(@list-deep-purple, 11);
@deep-purple-A200:                 extract(@list-deep-purple, 12);
@deep-purple-A400:                 extract(@list-deep-purple, 13);
@deep-purple-A700:                 extract(@list-deep-purple, 14);


// Indigo
@indigo:                           extract(@list-indigo, 6);

@indigo-50:                        extract(@list-indigo, 1);
@indigo-100:                       extract(@list-indigo, 2);
@indigo-200:                       extract(@list-indigo, 3);
@indigo-300:                       extract(@list-indigo, 4);
@indigo-400:                       extract(@list-indigo, 5);
@indigo-500:                       extract(@list-indigo, 6);
@indigo-600:                       extract(@list-indigo, 7);
@indigo-700:                       extract(@list-indigo, 8);
@indigo-800:                       extract(@list-indigo, 9);
@indigo-900:                       extract(@list-indigo, 10);
@indigo-A100:                      extract(@list-indigo, 11);
@indigo-A200:                      extract(@list-indigo, 12);
@indigo-A400:                      extract(@list-indigo, 13);
@indigo-A700:                      extract(@list-indigo, 14);


// Blue
@blue:                             extract(@list-blue, 6);

@blue-50:                          extract(@list-blue, 1);
@blue-100:                         extract(@list-blue, 2);
@blue-200:                         extract(@list-blue, 3);
@blue-300:                         extract(@list-blue, 4);
@blue-400:                         extract(@list-blue, 5);
@blue-500:                         extract(@list-blue, 6);
@blue-600:                         extract(@list-blue, 7);
@blue-700:                         extract(@list-blue, 8);
@blue-800:                         extract(@list-blue, 9);
@blue-900:                         extract(@list-blue, 10);
@blue-A100:                        extract(@list-blue, 11);
@blue-A200:                        extract(@list-blue, 12);
@blue-A400:                        extract(@list-blue, 13);
@blue-A700:                        extract(@list-blue, 14);


// Light Blue
@light-blue:                       extract(@list-light-blue, 6);

@light-blue-50:                    extract(@list-light-blue, 1);
@light-blue-100:                   extract(@list-light-blue, 2);
@light-blue-200:                   extract(@list-light-blue, 3);
@light-blue-300:                   extract(@list-light-blue, 4);
@light-blue-400:                   extract(@list-light-blue, 5);
@light-blue-500:                   extract(@list-light-blue, 6);
@light-blue-600:                   extract(@list-light-blue, 7);
@light-blue-700:                   extract(@list-light-blue, 8);
@light-blue-800:                   extract(@list-light-blue, 9);
@light-blue-900:                   extract(@list-light-blue, 10);
@light-blue-A100:                  extract(@list-light-blue, 11);
@light-blue-A200:                  extract(@list-light-blue, 12);
@light-blue-A400:                  extract(@list-light-blue, 13);
@light-blue-A700:                  extract(@list-light-blue, 14);


// Cyan
@cyan:                             extract(@list-cyan, 6);

@cyan-50:                          extract(@list-cyan, 1);
@cyan-100:                         extract(@list-cyan, 2);
@cyan-200:                         extract(@list-cyan, 3);
@cyan-300:                         extract(@list-cyan, 4);
@cyan-400:                         extract(@list-cyan, 5);
@cyan-500:                         extract(@list-cyan, 6);
@cyan-600:                         extract(@list-cyan, 7);
@cyan-700:                         extract(@list-cyan, 8);
@cyan-800:                         extract(@list-cyan, 9);
@cyan-900:                         extract(@list-cyan, 10);
@cyan-A100:                        extract(@list-cyan, 11);
@cyan-A200:                        extract(@list-cyan, 12);
@cyan-A400:                        extract(@list-cyan, 13);
@cyan-A700:                        extract(@list-cyan, 14);


// Teal
@teal:                             extract(@list-teal, 6);

@teal-50:                          extract(@list-teal, 1);
@teal-100:                         extract(@list-teal, 2);
@teal-200:                         extract(@list-teal, 3);
@teal-300:                         extract(@list-teal, 4);
@teal-400:                         extract(@list-teal, 5);
@teal-500:                         extract(@list-teal, 6);
@teal-600:                         extract(@list-teal, 7);
@teal-700:                         extract(@list-teal, 8);
@teal-800:                         extract(@list-teal, 9);
@teal-900:                         extract(@list-teal, 10);
@teal-A100:                        extract(@list-teal, 11);
@teal-A200:                        extract(@list-teal, 12);
@teal-A400:                        extract(@list-teal, 13);
@teal-A700:                        extract(@list-teal, 14);


// Green
@green:                            extract(@list-green, 6);

@green-50:                         extract(@list-green, 1);
@green-100:                        extract(@list-green, 2);
@green-200:                        extract(@list-green, 3);
@green-300:                        extract(@list-green, 4);
@green-400:                        extract(@list-green, 5);
@green-500:                        extract(@list-green, 6);
@green-600:                        extract(@list-green, 7);
@green-700:                        extract(@list-green, 8);
@green-800:                        extract(@list-green, 9);
@green-900:                        extract(@list-green, 10);
@green-A100:                       extract(@list-green, 11);
@green-A200:                       extract(@list-green, 12);
@green-A400:                       extract(@list-green, 13);
@green-A700:                       extract(@list-green, 14);


// Light Green
@light-green:                      extract(@list-light-green, 6);

@light-green-50:                   extract(@list-light-green, 1);
@light-green-100:                  extract(@list-light-green, 2);
@light-green-200:                  extract(@list-light-green, 3);
@light-green-300:                  extract(@list-light-green, 4);
@light-green-400:                  extract(@list-light-green, 5);
@light-green-500:                  extract(@list-light-green, 6);
@light-green-600:                  extract(@list-light-green, 7);
@light-green-700:                  extract(@list-light-green, 8);
@light-green-800:                  extract(@list-light-green, 9);
@light-green-900:                  extract(@list-light-green, 10);
@light-green-A100:                 extract(@list-light-green, 11);
@light-green-A200:                 extract(@list-light-green, 12);
@light-green-A400:                 extract(@list-light-green, 13);
@light-green-A700:                 extract(@list-light-green, 14);


// Lime
@lime:                             extract(@list-lime, 6);

@lime-50:                          extract(@list-lime, 1);
@lime-100:                         extract(@list-lime, 2);
@lime-200:                         extract(@list-lime, 3);
@lime-300:                         extract(@list-lime, 4);
@lime-400:                         extract(@list-lime, 5);
@lime-500:                         extract(@list-lime, 6);
@lime-600:                         extract(@list-lime, 7);
@lime-700:                         extract(@list-lime, 8);
@lime-800:                         extract(@list-lime, 9);
@lime-900:                         extract(@list-lime, 10);
@lime-A100:                        extract(@list-lime, 11);
@lime-A200:                        extract(@list-lime, 12);
@lime-A400:                        extract(@list-lime, 13);
@lime-A700:                        extract(@list-lime, 14);


//Yellow
@yellow:                           extract(@list-yellow, 6);

@yellow-50:                        extract(@list-yellow, 1);
@yellow-100:                       extract(@list-yellow, 2);
@yellow-200:                       extract(@list-yellow, 3);
@yellow-300:                       extract(@list-yellow, 4);
@yellow-400:                       extract(@list-yellow, 5);
@yellow-500:                       extract(@list-yellow, 6);
@yellow-600:                       extract(@list-yellow, 7);
@yellow-700:                       extract(@list-yellow, 8);
@yellow-800:                       extract(@list-yellow, 9);
@yellow-900:                       extract(@list-yellow, 10);
@yellow-A100:                      extract(@list-yellow, 11);
@yellow-A200:                      extract(@list-yellow, 12);
@yellow-A400:                      extract(@list-yellow, 13);
@yellow-A700:                      extract(@list-yellow, 14);


// Amber
@amber:                            extract(@list-amber, 6);

@amber-50:                         extract(@list-amber, 1);
@amber-100:                        extract(@list-amber, 2);
@amber-200:                        extract(@list-amber, 3);
@amber-300:                        extract(@list-amber, 4);
@amber-400:                        extract(@list-amber, 5);
@amber-500:                        extract(@list-amber, 6);
@amber-600:                        extract(@list-amber, 7);
@amber-700:                        extract(@list-amber, 8);
@amber-800:                        extract(@list-amber, 9);
@amber-900:                        extract(@list-amber, 10);
@amber-A100:                       extract(@list-amber, 11);
@amber-A200:                       extract(@list-amber, 12);
@amber-A400:                       extract(@list-amber, 13);
@amber-A700:                       extract(@list-amber, 14);


// Orange
@orange:                           extract(@list-orange, 6);

@orange-50:                        extract(@list-orange, 1);
@orange-100:                       extract(@list-orange, 2);
@orange-200:                       extract(@list-orange, 3);
@orange-300:                       extract(@list-orange, 4);
@orange-400:                       extract(@list-orange, 5);
@orange-500:                       extract(@list-orange, 6);
@orange-600:                       extract(@list-orange, 7);
@orange-700:                       extract(@list-orange, 8);
@orange-800:                       extract(@list-orange, 9);
@orange-900:                       extract(@list-orange, 10);
@orange-A100:                      extract(@list-orange, 11);
@orange-A200:                      extract(@list-orange, 12);
@orange-A400:                      extract(@list-orange, 13);
@orange-A700:                      extract(@list-orange, 14);


// Deep Orange
@deep-orange:                      extract(@list-deep-orange, 6);

@deep-orange-50:                   extract(@list-deep-orange, 1);
@deep-orange-100:                  extract(@list-deep-orange, 2);
@deep-orange-200:                  extract(@list-deep-orange, 3);
@deep-orange-300:                  extract(@list-deep-orange, 4);
@deep-orange-400:                  extract(@list-deep-orange, 5);
@deep-orange-500:                  extract(@list-deep-orange, 6);
@deep-orange-600:                  extract(@list-deep-orange, 7);
@deep-orange-700:                  extract(@list-deep-orange, 8);
@deep-orange-800:                  extract(@list-deep-orange, 9);
@deep-orange-900:                  extract(@list-deep-orange, 10);
@deep-orange-A100:                 extract(@list-deep-orange, 11);
@deep-orange-A200:                 extract(@list-deep-orange, 12);
@deep-orange-A400:                 extract(@list-deep-orange, 13);
@deep-orange-A700:                 extract(@list-deep-orange, 14);


// Brown
@brown:                            extract(@list-brown, 6);

@brown-50:                         extract(@list-brown, 1);
@brown-100:                        extract(@list-brown, 2);
@brown-200:                        extract(@list-brown, 3);
@brown-300:                        extract(@list-brown, 4);
@brown-400:                        extract(@list-brown, 5);
@brown-500:                        extract(@list-brown, 6);
@brown-600:                        extract(@list-brown, 7);
@brown-700:                        extract(@list-brown, 8);
@brown-800:                        extract(@list-brown, 9);
@brown-900:                        extract(@list-brown, 10);


// Grey
@grey:                             extract(@list-grey, 6);

@grey-50:                          extract(@list-grey, 1);
@grey-100:                         extract(@list-grey, 2);
@grey-200:                         extract(@list-grey, 3);
@grey-300:                         extract(@list-grey, 4);
@grey-400:                         extract(@list-grey, 5);
@grey-500:                         extract(@list-grey, 6);
@grey-600:                         extract(@list-grey, 7);
@grey-700:                         extract(@list-grey, 8);
@grey-800:                         extract(@list-grey, 9);
@grey-900:                         extract(@list-grey, 10);


// Blue Grey
@blue-grey:                        extract(@list-blue-grey, 6);

@blue-grey-50:                     extract(@list-blue-grey, 1);
@blue-grey-100:                    extract(@list-blue-grey, 2);
@blue-grey-200:                    extract(@list-blue-grey, 3);
@blue-grey-300:                    extract(@list-blue-grey, 4);
@blue-grey-400:                    extract(@list-blue-grey, 5);
@blue-grey-500:                    extract(@list-blue-grey, 6);
@blue-grey-600:                    extract(@list-blue-grey, 7);
@blue-grey-700:                    extract(@list-blue-grey, 8);
@blue-grey-800:                    extract(@list-blue-grey, 9);
@blue-grey-900:                    extract(@list-blue-grey, 10);



// UI Color Application
// --------------------------------------------------------------------------

// Typography
@ui-display-4:                     @grey-600;
@ui-display-3:                     @grey-600;
@ui-display-2:                     @grey-600;
@ui-display-1:                     @grey-600;
@ui-headline:                      @grey-900;
@ui-title:                         @grey-900;
@ui-subhead-1:                     @grey-900;
@ui-body-2:                        @grey-900;
@ui-body-1:                        @grey-900;
@ui-caption:                       @grey-600;
@ui-menu:                          @grey-900;
@ui-button:                        @grey-900;

================================================
FILE: styles/utils/mixins.less
================================================
// Paper-like shadows based on 'zDepth'.
.zDepth(0) {
  box-shadow: none;
  z-index: 0;
}
.zDepth(1) {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.12);
  z-index: 1;
}
.zDepth(2) {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10), 0 3px 10px rgba(0, 0, 0, 0.18);
  z-index: 2;
}
.zDepth(3) {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 6px 10px rgba(0, 0, 0, 0.23);
  z-index: 3;
}
.zDepth(4) {
  box-shadow: 0 14px 45px rgba(0, 0, 0, 0.20), 0 10px 18px rgba(0, 0, 0, 0.22);
  z-index: 4;
}
.zDepth(5) {
  box-shadow: 0 19px 60px rgba(0, 0, 0, 0.25), 0 15px 20px rgba(0, 0, 0, 0.22);
  z-index: 5;
}

================================================
FILE: styles/utils/variables.less
================================================
// Fonts
@font-regular: 'Roboto';
@font-code: Menlo, Consolas;

// Sizes
@toolbarHeight: 56px;
@space: 16px;

// Extra Colors
@black: #000;
@white: #fff;