vines-services 0.1.3 → 0.1.4

data/Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gemspec

data/{README → README.md}

@@ -1,4 +1,4 @@
-== Welcome to Vines Services
+# Welcome to Vines Services
 
 Vines Services are dynamically updated groups of systems based on criteria like
 hostname, installed software, operating system, etc. Send a command to the
@@ -13,22 +13,32 @@ be managed as one group.
 
 Additional documentation can be found at www.getvines.org.
 
-== Usage
+## Usage
 
-1. gem install vines-services
-2. vines-services init wonderland.lit
-3. cd wonderland.lit && vines-services start
+```
+$ gem install vines-services
+$ vines-services init wonderland.lit
+$ cd wonderland.lit && vines-services start
+```
 
-== Dependencies
+## Dependencies
 
-Vines Services requires Ruby 1.9.2 or better. Instructions for installing the
+Vines Services requires Ruby 1.9.3 or better. Instructions for installing the
 needed OS packages, as well as Ruby itself, are available at
 http://www.getvines.org/ruby.
 
-== Contact
+## Development
+
+```
+$ script/bootstrap
+$ script/tests
+$ script/server
+```
+
+## Contact
 
 * David Graham <david@negativecode.com>
 
-== License
+## License
 
 Vines Services is released under the MIT license. Check the LICENSE file for details.

data/Rakefile

@@ -1,50 +1,15 @@
 require 'rake'
 require 'rake/clean'
 require 'rake/testtask'
-require 'rubygems/package_task'
-require 'nokogiri'
-require_relative 'lib/vines/services/version'
+require './lib/vines/services/version'
 
-CLOBBER.include('pkg', 'web/javascripts', 'web/stylesheets/app.css')
+CLOBBER.include('pkg', 'public/assets')
 
-spec = Gem::Specification.new do |s|
-  s.name    = "vines-services"
-  s.version = Vines::Services::VERSION
+directory 'pkg'
 
-  s.summary     = "An XMPP component that broadcasts shell commands to many agents."
-  s.description = "Vines Services are dynamically updated groups of systems based
-on criteria like hostname, installed software, operating system, etc. Send a
-command to the service and it runs on every system in the group. Services, files
-and permissions are managed via the bundled web application."
-
-  s.authors      = ["David Graham"]
-  s.email        = %w[david@negativecode.com]
-  s.homepage     = "http://www.getvines.org"
-
-  s.test_files   = FileList["test/**/*"]
-  s.executables  = %w[vines-services]
-  s.require_path = "lib"
-
-  s.add_dependency "bcrypt-ruby", "~> 3.0.1"
-  s.add_dependency "blather", "~> 0.5.12"
-  s.add_dependency "citrus", "~> 2.4.0"
-  s.add_dependency "couchrest_model", "~> 1.1.2"
-  s.add_dependency "em-http-request", "~> 1.0.1"
-  s.add_dependency "sqlite3", "~> 1.3.5"
-  s.add_dependency "vines", ">= 0.4.0"
-
-  s.add_development_dependency "minitest"
-  s.add_development_dependency "rake"
-
-  s.required_ruby_version = '>= 1.9.2'
-end
-
-# Set gem file list after CoffeeScripts have been compiled, so web/javascripts/
-# is included in the gem.
-task :gemprep do
-  spec.files = FileList['[A-Z]*', '{bin,lib,conf,web}/**/*']
-  Gem::PackageTask.new(spec).define
-  Rake::Task['gem'].invoke
+desc 'Build distributable packages'
+task :build => [:pkg, :assets] do
+  system 'gem build vines-services.gemspec && mv vines-*.gem pkg/'
 end
 
 Rake::TestTask.new(:test) do |test|
@@ -53,80 +18,22 @@ Rake::TestTask.new(:test) do |test|
   test.warning = false
 end
 
-# Return an array of local, non-library, js includes.
-def scripts(doc)
-  scripts = []
-  doc.css('script').each do |node|
-    file = node['src'].split('/').last()
-    if node['src'].start_with?('javascripts/')
-      scripts << file
-    end
-  end
-  scripts
-end
-
-# Replace script tags with combined and minimized files.
-def rewrite_js(doc)
-  doc.css('script').each {|node| node.remove }
-  doc.css('head').each do |node|
-    %w[/lib/javascripts/base.js javascripts/app.js].each do |src|
-      script = doc.create_element('script',
-        'type' => 'text/javascript',
-        'src' => src)
-      node.add_child(script)
-      node.add_child(doc.create_text_node("\n"))
-    end
-  end
-end
+desc 'Compile web assets'
+task :assets do
+  require 'sprockets'
+  require 'vines/web'
 
-def stylesheets(doc)
-  sheets = []
-  doc.css('link[rel="stylesheet"]').each do |node|
-    file = node['href'].split('/').last()
-    if node['href'].start_with?('stylesheets/')
-      sheets << file
-    end
-  end
-  sheets
-end
+  env = Sprockets::Environment.new
+  env.cache = Sprockets::Cache::FileStore.new(Dir.tmpdir)
+  env.append_path 'app/assets/javascripts'
+  env.append_path 'app/assets/stylesheets'
+  Vines::Web.paths.each {|path| env.append_path path }
+  env.js_compressor = :uglifier
 
-def rewrite_css(doc)
-  doc.css('link[rel="stylesheet"]').each {|node| node.remove }
-  doc.css('head').each do |node|
-    %w[/lib/stylesheets/base.css /lib/stylesheets/login.css stylesheets/app.css].each do |file|
-      link = doc.create_element('link',
-        'rel' => 'stylesheet',
-        'href' => file)
-      node.add_child(link)
-      node.add_child(doc.create_text_node("\n"))
-    end
+  assets = %w[application.js application.css]
+  assets.each do |asset|
+    env[asset].write_to "public/assets/#{asset}"
   end
 end
 
-task :compile do
-  index = 'web/index.html'
-  doc = Nokogiri::HTML(File.read(index))
-  scripts, sheets = scripts(doc), stylesheets(doc)
-
-  rewrite_js(doc)
-  rewrite_css(doc)
-
-  # save index.html before rewriting
-  FileUtils.cp(index, '/tmp/index.html')
-  File.open(index, 'w') {|f| f.write(doc.to_xml(:indent => 2)) }
-
-  js_files = scripts.map {|f| "web/javascripts/#{f}"}.join(' ')
-  css_files = sheets.map {|f| "web/stylesheets/#{f}"}.join(' ')
-
-  sh %{coffee -c -b -o web/javascripts web/coffeescripts/*.coffee}
-  sh %{cat #{js_files} | uglifyjs -nc > web/javascripts/app.js}
-  sh %{cat #{css_files} > web/stylesheets/app.css}
-end
-
-task :cleanup do
-  # move index.html back into place after gem packaging
-  FileUtils.cp('/tmp/index.html', 'web/index.html')
-  File.delete('/tmp/index.html')
-end
-
-task :default => [:clobber, :test, :compile, :gemprep, :cleanup]
+task :default => [:clobber, :test, :build]

data/{web/coffeescripts → app/assets/javascripts}/api.coffee

@@ -1,4 +1,4 @@
-class Api
+class @Api
   USERS = 'http://getvines.com/protocol/users'
 
   constructor: (@session) ->

data/{web/coffeescripts/init.coffee → app/assets/javascripts/application.coffee}

@@ -1,3 +1,12 @@
+#= require vendor
+#= require lib
+#= require api
+#= require commands
+#= require systems
+#= require services
+#= require files
+#= require setup
+
 $ ->
   session = new Session()
   nav = new NavBar(session)

data/{web/coffeescripts → app/assets/javascripts}/commands.coffee

@@ -1,4 +1,4 @@
-class Commands
+class @Commands
   constructor: ->
     @buf = []
     @index = 0

data/{web/coffeescripts → app/assets/javascripts}/files.coffee

@@ -1,4 +1,4 @@
-class FilesPage
+class @FilesPage
   FILES  = 'http://getvines.com/protocol/files'
   LABELS = 'http://getvines.com/protocol/files/labels'
 

data/{web/coffeescripts → app/assets/javascripts}/services.coffee

@@ -1,4 +1,4 @@
-class ServicesPage
+class @ServicesPage
   SERVICES = 'http://getvines.com/protocol/services'
   MEMBERS  = 'http://getvines.com/protocol/services/members'
   SYSTEMS  = 'http://getvines.com/protocol/systems'

data/{web/coffeescripts → app/assets/javascripts}/setup.coffee

@@ -1,4 +1,4 @@
-class SetupPage
+class @SetupPage
   SERVICES = 'http://getvines.com/protocol/services'
   SYSTEMS  = 'http://getvines.com/protocol/systems'
   USERS    = 'http://getvines.com/protocol/users'

data/{web/coffeescripts → app/assets/javascripts}/systems.coffee

@@ -1,4 +1,4 @@
-class SystemsPage
+class @SystemsPage
   constructor: (@session) ->
     @session.onRoster   ( ) => this.roster()
     @session.onMessage  (m) => this.message(m)

data/app/assets/stylesheets/application.css

@@ -0,0 +1,9 @@
+/*
+ *= require base
+ *= require login
+ *= require common
+ *= require files
+ *= require services
+ *= require setup
+ *= require systems
+ */

data/config.ru

@@ -0,0 +1,12 @@
+require 'sprockets'
+require 'vines/web'
+
+use Rack::Static, urls: ['/images'], root: 'public', index: 'index.html'
+
+map '/assets' do
+  env = Sprockets::Environment.new
+  env.append_path 'app/assets/javascripts'
+  env.append_path 'app/assets/stylesheets'
+  Vines::Web.paths.each {|path| env.append_path path }
+  run env
+end

data/lib/vines/services/command/init.rb

@@ -39,8 +39,11 @@ module Vines
           FileUtils.mv(Dir.glob("#{@domain}/*"), '.')
           FileUtils.remove_dir(@domain)
           FileUtils.remove_dir('data')
-          web = File.expand_path("../../../../../web", __FILE__)
+
+          `vines-web install web`
+          web = File.expand_path("../../../../../public", __FILE__)
           FileUtils.cp_r(Dir.glob("#{web}/*"), 'web')
+
           update_server_config('conf/config.rb')
           `vines start -d`
           puts "Started vines server: vines start -d"

data/lib/vines/services/version.rb

@@ -2,6 +2,6 @@
 
 module Vines
   module Services
-    VERSION = '0.1.3'
+    VERSION = '0.1.4'
   end
 end

data/{web/stylesheets/app.css → public/assets/application.css}

@@ -1,407 +1,510 @@
-#editor-buttons {
-  background: #f8f8f8;
-  border-top: 1px solid #dfdfdf;
-  height: 50px;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-}
-#editor-buttons {
-  text-align: right;
-}
-#editor-buttons #save {
-  position: relative;
-  right: 10px;
-  top: 10px;
-}
-form.sections h2 {
-  background: none;
+* {
+  margin: 0;
+  padding: 0; }
+
+html, body {
+  height: 100%;
+  overflow: hidden; }
+
+body {
+  color: #222;
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 10pt;
+  line-height: 20pt; }
+
+input[type="text"],
+input[type="email"],
+input[type="password"],
+textarea {
+  border-radius: 2px;
   border: none;
-  padding-left: 0;
-}
-form.sections label {
-  display: block;
+  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 10pt;
+  outline: none;
+  padding: 6px; }
+
+/* ipad */
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  textarea {
+    border: 1px solid #eee; } }
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+textarea:focus {
+  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.6); }
+
+input[type="button"],
+input[type="submit"] {
+  background: -moz-linear-gradient(#ececec, gainsboro);
+  background: -ms-linear-gradient(#ececec, gainsboro);
+  background: -o-linear-gradient(#ececec, gainsboro);
+  background: -webkit-linear-gradient(#ececec, gainsboro);
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-shadow: 0 1px 1px white, inset 0 1px 1px rgba(255, 255, 255, 0.5);
+  color: #222;
+  cursor: pointer;
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 13px;
   font-weight: bold;
-  font-size: 9pt;
-  color: rgba(0,0,0,0.8);
-  margin: 10px 0 -2px 0;
-}
-form.sections input[type="text"],
-form.sections input[type="email"],
-form.sections input[type="password"],
-form.sections textarea {
-  width: 90%;
-}
-form.sections section {
-  border-bottom: 1px solid #ddd;
-  margin: 0 20px;
-}
-form.sections section fieldset {
-  padding-left: 30%;
-  margin-top: -33px;
-  margin-bottom: 10px;
-}
-form.sections section:last-child {
-  border-bottom: none;
-  margin-bottom: 20px;
-}
-form.sections .error {
-  color: #dd2828;
-  font-size: 8pt;
-  width: 89%;
-}
-.hint {
-  color: #aaa;
-  font-size: 8pt;
+  height: 27px;
   line-height: 1;
-  margin-top: 3px;
-}
-#systems-page #container {
-  height: 100%;
-}
-#systems-page #alpha {
-  background: #fff;
-  box-shadow: none;
-  left: 0;
-}
-#systems-page #blank-slate {
-  margin-top: -65px;
-  margin-left: -215px;
-  text-align: center;
-  width: 430px;
+  padding: 0 20px;
+  margin-bottom: 10px;
+  margin-left: 7px;
+  text-shadow: 0 1px 1px #fff; }
+
+input[type="submit"] {
+  background: #8dd2f7;
+  background: -moz-linear-gradient(#8dd2f7, #58b8f4);
+  background: -ms-linear-gradient(#8dd2f7, #58b8f4);
+  background: -o-linear-gradient(#8dd2f7, #58b8f4);
+  background: -webkit-linear-gradient(#8dd2f7, #58b8f4);
+  border: 1px solid #448ccd;
+  border-top: 1px solid #5da8db;
+  color: #0d4078;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4); }
+
+input[type="button"]:active,
+input[type="submit"]:active {
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); }
+
+input[type="button"].cancel,
+input[type="submit"].cancel {
+  background: #ff3137;
+  background: -moz-linear-gradient(#ff3137, #dd2828);
+  background: -ms-linear-gradient(#ff3137, #dd2828);
+  background: -o-linear-gradient(#ff3137, #dd2828);
+  background: -webkit-linear-gradient(#ff3137, #dd2828);
+  border: 1px solid #981a1a;
+  border-top: 1px solid #ac1f23;
+  color: #4a0f11; }
+
+fieldset {
+  border: none; }
+
+optgroup {
+  font-style: normal; }
+
+optgroup option {
+  padding-left: 20px; }
+
+#container {
+  position: relative; }
+
+#navbar {
+  background: #0c1a2d;
+  background: -moz-linear-gradient(#1e4171, #0c1a2d);
+  background: -ms-linear-gradient(#1e4171, #0c1a2d);
+  background: -o-linear-gradient(#1e4171, #0c1a2d);
+  background: -webkit-linear-gradient(#1e4171, #0c1a2d);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 3px 1px #222;
+  color: #bdd5ff;
+  height: 60px;
+  position: relative;
+  text-shadow: 0 1px 1px #000, 0 0 1px #fff;
+  z-index: 10; }
+
+#navbar #logo {
+  background: url(../images/logo-small.png) no-repeat;
+  color: transparent;
+  height: 40px;
+  opacity: 0.2;
   position: absolute;
-  top: 50%;
-  left: 50%;
-}
-#systems-page #blank-slate p {
-  color: rgba(0, 0, 0, 0.3);
-  font-size: 12pt;
-  margin-bottom: 20px;
-}
-#systems-page #messages {
-  list-style: none;
-  width: 100%;
-}
-#systems-page #messages li {
-  padding: 0 10px;
+  top: 10px;
+  right: 10px;
+  width: 125px;
+  text-shadow: none; }
+
+#navbar #current-user {
+  height: 50px;
+  width: 240px;
   position: relative;
-}
-#systems-page #messages li:first-child {
-  padding-top: 10px;
-}
-#systems-page #messages li:hover > span .time {
-  opacity: 0.3;
-}
-#systems-page #messages li pre,
-#systems-page #messages li footer {
-  font-family: Menlo, monospace;
-  font-size: 11px;
-  line-height: 1.3;
-  word-wrap: break-word;
-}
-#systems-page #messages li footer {
+  top: 5px;
+  left: 10px; }
+
+#navbar #current-user-avatar {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 0 1px 0px #bdd5ff;
+  height: 48px;
+  width: 48px; }
+
+#navbar #current-user-info {
+  position: relative;
+  top: -60px;
+  left: 58px; }
+
+#navbar #current-user-name {
+  font-size: 10pt;
+  font-weight: normal;
+  line-height: 1.7;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 180px; }
+
+#navbar #current-user-presence-form .select {
+  background: rgba(255, 255, 255, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 30px;
+  color: rgba(255, 255, 255, 0.8);
+  line-height: 16px; }
+
+#navbar #current-user-presence {
+  border: 1px solid; }
+
+#navbar #app-nav {
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  left: 260px;
+  top: 0;
+  width: 600px; }
+
+#navbar #nav-links {
+  height: 100%; }
+
+#navbar #nav-links li {
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  color: rgba(255, 255, 255, 0.8);
+  display: inline-block;
+  font-family: "Trebuchet MS", "Helvetica Neue", Helvetica, sans-serif;
   font-weight: bold;
-}
-#systems-page #message-form {
-  height: 21px;
+  font-size: 11px;
+  height: 100%;
+  min-width: 100px;
   line-height: 1;
+  list-style: none;
+  text-align: center;
+  text-transform: uppercase; }
+
+#navbar #nav-links li:hover,
+#navbar #nav-links li.selected {
+  background: rgba(255, 255, 255, 0.1);
+  border-left: 1px solid rgba(255, 255, 255, 0.15);
+  border-right: 1px solid rgba(255, 255, 255, 0.15); }
+
+#navbar #nav-links li a {
+  color: inherit;
+  display: inline-block;
+  height: 100%;
+  line-height: 60px;
   position: relative;
-  width: 100%;
-}
-#systems-page #message-label {
-  background: transparent;
-  cursor: pointer;
-  font-family: Menlo, monospace;
-  font-size: 11px;
-  padding: 0 2px 0 10px;
-}
-#systems-page #message-label::after {
-  margin: 0;
-  content: '$';
-}
-#systems-page #message-label:hover {
-  text-decoration: underline;
-}
-#systems-page #message {
-  box-shadow: none;
+  text-decoration: none;
+  width: 100%; }
+
+#navbar #nav-links li a svg {
+  height: 32px;
+  width: 32px;
+  position: absolute !important;
+  left: 33px;
+  top: 4px; }
+
+#navbar #nav-links li a span {
+  position: relative;
+  top: 15px; }
+
+.select {
+  background: #f0f0f0;
+  border-radius: 3px;
   display: inline-block;
-  font-family: Menlo, monospace;
   font-size: 11px;
-  margin: 0;
-  padding: 0;
-}
-#systems-page #message:focus {
-  box-shadow: none;
-}
-#systems-page #roster {
-  background: rgba(60, 60, 60, 0.98);
-  border: 2px solid rgb(12, 12, 12);
-  border-radius: 3px;
-  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.75);
-  min-width: 250px;
+  line-height: 18px;
+  padding: 0 5px;
+  position: relative; }
+
+.select span::after {
+  margin-left: 3px;
+  content: '\25be'; }
+
+.select select {
+  cursor: pointer;
+  opacity: 0;
   position: absolute;
-  left: 10px;
-}
-#systems-page #roster-items {
-  color: #fff;
-  font-size: 13px;
-  font-weight: 500;
-  overflow-y: auto;
-  text-shadow: 0 1px 1px rgb(21, 21, 21);
-}
-#systems-page #roster-items li {
-  border-top: 1px solid rgb(80, 80, 80);
-  border-bottom: 1px solid rgb(48, 48, 48);
-  line-height: 38px;
-  list-style: none;
-  padding-right: 50px;
-  position: relative;
-}
-#systems-page #roster-items li.offline {
-  color: #888;
-}
-#systems-page #roster-items li.offline .icon {
-  opacity: 0.3;
-}
-#systems-page #roster-items li:hover:not(.group) {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0; }
+
+.filter-button {
+  cursor: pointer;
+  display: inline-block;
+  line-height: 1;
+  position: absolute;
+  right: 10px;
+  top: 6px; }
+
+.filter-button svg {
+  height: 16px;
+  width: 16px; }
+
+.filter-form {
+  border-bottom: 1px solid #ddd;
+  padding: 5px 10px; }
+
+.filter-text {
+  width: 100%; }
+
+.scroll {
+  overflow-y: auto; }
+
+.scroll::-webkit-scrollbar {
+  width: 6px; }
+
+.scroll::-webkit-scrollbar-thumb {
+  border-radius: 10px; }
+
+.scroll::-webkit-scrollbar-thumb:vertical {
+  background: rgba(0, 0, 0, 0.2); }
+
+ul.selectable li.selected {
   background: #319be7;
   background: -moz-linear-gradient(#319be7, #1b78d9);
   background: -ms-linear-gradient(#319be7, #1b78d9);
   background: -o-linear-gradient(#319be7, #1b78d9);
   background: -webkit-linear-gradient(#319be7, #1b78d9);
   border-top: 1px solid #148ddf;
+  border-bottom: 1px solid #095bba;
   color: #fff;
-  cursor: pointer;
-  text-shadow: -1px 1px 1px hsl(210, 51%, 45%), 0px -1px 1px hsl(210, 51%, 49%);
-}
-#systems-page #roster-items li.group {
-  background: #404040;
-  background: -moz-linear-gradient(#404040, #353535);
-  background: -ms-linear-gradient(#404040, #353535);
-  background: -o-linear-gradient(#404040, #353535);
-  background: -webkit-linear-gradient(#404040, #353535);
-  color: #ccc;
-  font-size: 10px;
-  font-weight: bold;
-  line-height: 2;
-  padding-left: 10px;
-  text-transform: uppercase;
-}
-#systems-page #roster-items li .icon {
-  position: absolute;
-  height: 32px;
-  width: 32px;
-  top: 2px;
-}
-#systems-page #roster-items li .icon svg {
-  height: 32px;
-  width: 32px;
-}
-#systems-page #roster-items li .text {
-  padding-left: 32px;
-}
-#systems-page #roster-items li .unread {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 30px;
+  text-shadow: -1px 1px 1px #3873ad, 0px -1px 1px #3d7dbd; }
+
+ul.selectable li.selected.secondary {
+  background: #bdc7db;
+  background: -moz-linear-gradient(#bdc7db, #9cabc4);
+  background: -ms-linear-gradient(#bdc7db, #9cabc4);
+  background: -o-linear-gradient(#bdc7db, #9cabc4);
+  background: -webkit-linear-gradient(#bdc7db, #9cabc4);
+  border-top: 1px solid #bdc6d6;
+  border-bottom: 1px solid #94a1b8;
   color: #fff;
-  display: inline-block;
-  font-size: 11px;
-  font-weight: bold;
-  line-height: 15px;
-  padding: 0 6px;
-  position: absolute;
-  right: 10px;
-  top: 12px;
-}
-#systems-page #roster-items li:hover .unread {
-  color: #fff;
-}
-#systems-page #roster-form {
-  background: rgb(80, 80, 80);
-  background: -moz-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
-  background: -ms-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
-  background: -o-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
-  background: -webkit-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
-  padding: 3px 5px;
-}
-#systems-page #roster-form form {
-  padding: 0;
-  border: none;
-}
-#systems-page #roster-filter {
-  width: 100%;
-}
-#services-page #container {
+  text-shadow: -1px 1px 1px #94a1b8; }
+
+.column {
   height: 100%;
-}
-#services-page #beta {
-  background: #fff;
-}
-#services-page #services {
-  height: 100%;
-  list-style: none;
-  text-shadow: 0 1px 1px #fff;
-  width: 260px;
-}
-#services-page #services li {
-  cursor: pointer;
+  position: absolute; }
+
+.column h2 {
   border-bottom: 1px solid #ddd;
-  font-weight: bold;
-  min-height: 42px;
-  padding: 0 10px;
+  font-size: 10pt;
+  padding-left: 10px;
   position: relative;
-  -moz-transition: background 0.3s;
-  -o-transition: background 0.3s;
-  -webkit-transition: background 0.3s;
-  transition: background 0.3s;
-}
-#services-page #services li #status{
-  margin-left:100px;
-}
-#services-page #services li:hover:not(.selected) {
-  background: rgba(255, 255, 255, 1.0);
-}
-#services-page #services li.selected .count {
-  color: rgba(255, 255, 255, 0.85);
-}
-#services-page #operators {
-  margin-bottom: 10px;
-}
-#services-page #operators li {
+  text-shadow: 0 -1px 1px #fff; }
+
+.column .controls {
+  background: rgba(255, 255, 255, 0.05);
+  border-top: 1px solid #ddd;
+  height: 50px;
+  position: absolute;
+  bottom: 0;
+  width: 260px; }
+
+.column .controls > div {
   cursor: pointer;
-  position: relative;
-  -moz-transition: background 0.3s;
-  -o-transition: background 0.3s;
-  -webkit-transition: background 0.3s;
-  transition: background 0.3s;
   display: inline-block;
-  border: 1px solid #DDD;
-  border-radius: 30px;
-  width: 60px;
-  height: 15px;
-  line-height: 15px;
-  text-align: center;
-  font-size: 8pt;
-  margin-left: 10px;
-}
-#services-page #operators li:hover:not(.selected) {
-  color: rgba(23, 51, 88, 1.0);
-  background: rgba(255, 255, 255, 1.0);
-}
-#services-page #attributes li {
-  cursor: pointer;
-  border-bottom: 1px solid #ddd;
-  padding: 0 10px;
+  height: 27px;
+  margin: 0 10px;
   position: relative;
-  color: rgba(23, 51, 88, 0.85);
-  -moz-transition: background 0.3s;
-  -o-transition: background 0.3s;
-  -webkit-transition: background 0.3s;
-  transition: background 0.3s;
-}
-#services-page #attributes li:hover:not(.selected) {
-  color: rgba(23, 51, 88, 1.0);
-  background: rgba(255, 255, 255, 1.0);
-}
-#services-page #services .count {
-  display: block;
-  font-size: 11px;
-  font-weight: normal;
-  line-height: 11px;
-}
-#services-page #charlie-controls {
-  text-align: right;
-}
-#services-page #search-services-form {
-  background: #f8f8f8;
-}
-#services-page #syntax {
-  height: 45px;
-}
-#services-page #syntax-status {
-  font-size: 8pt;
-  height: 12px;
+  top: 10px;
+  width: 27px; }
+
+.column .controls > div > svg {
+  height: 27px;
+  width: 27px; }
+
+.primary {
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+  width: 460px;
+  left: 260px;
+  z-index: 1; }
+
+.sidebar {
+  background: url(../images/light-gray.png);
+  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
+  width: 260px; }
+
+form.overlay {
+  background: rgba(255, 255, 255, 0.95);
+  border-bottom: 1px solid #ddd;
+  border-top: 1px solid #fff;
+  box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.1);
+  padding-top: 10px;
+  position: absolute;
+  bottom: 50px;
+  left: 0;
+  width: 260px; }
+
+form.overlay h2,
+form.inset h2 {
+  border: none !important;
   line-height: 1;
-  margin: -5px 0 10px 0;
-  width: 93%;
-}
-#services-page #service-preview {
-  margin-top: -15px;
-}
-#services-page #members {
-  height: 200px;
-  margin-bottom: 20px;
-}
-#services-page #members li {
-  display: inline-block;
-  background-color: #fff;
-  font-size: 8pt;
-  width: 150px;
-  max-width: 150px;
-  height: 25px;
-  max-height: 25px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space:nowrap;
-  float: left;
+  margin-bottom: 10px; }
+
+form.overlay p,
+form.inset p {
+  line-height: 1.5;
+  margin: 0 10px 10px 10px;
+  text-shadow: 0 1px 1px #fff; }
+
+form.inset p {
+  margin-top: -5px; }
+
+form.overlay .buttons,
+form.inset .buttons {
+  padding-right: 10px;
+  text-align: right; }
+
+form.overlay input[type="text"],
+form.overlay input[type="password"],
+form.overlay input[type="email"] {
+  margin-bottom: 10px;
+  width: 228px;
+  position: relative;
+  left: 10px; }
+
+.notification {
+  background: rgba(12, 26, 45, 0.75);
+  border-radius: 30px;
+  color: #fff;
+  font-size: 10pt;
+  font-weight: bold;
+  padding: 5px 100px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  text-align: center;
+  text-shadow: 0 1px 1px #000;
+  z-index: 2; }
+#login-page {
+  background: -moz-radial-gradient(rgba(26, 55, 98, 0.8), rgba(12, 26, 45, 0.8)), url(../images/dark-gray.png);
+  background: -ms-radial-gradient(center, 500px 500px, rgba(26, 55, 98, 0.8), rgba(12, 26, 45, 0.8)), url(../images/dark-gray.png);
+  background: -o-radial-gradient(rgba(26, 55, 98, 0.8), rgba(12, 26, 45, 0.8)), url(../images/dark-gray.png);
+  background: -webkit-radial-gradient(center, 500px 500px, rgba(26, 55, 98, 0.8), rgba(12, 26, 45, 0.8)), url(../images/dark-gray.png); }
+
+#login-page #container {
+  height: 100%;
+  width: 100%;
+  text-align: center; }
+
+#login-page #login-form {
+  margin: 0 auto;
+  position: relative;
+  width: 640px; }
+
+#login-page #login-form h1 {
+  background: url(../images/logo-large.png) no-repeat;
+  color: transparent;
+  height: 82px;
+  line-height: 1;
+  margin: 0 auto 40px auto;
+  text-shadow: none;
+  width: 245px; }
+
+#login-page #jid,
+#login-page #password {
+  margin: 0 auto;
   margin-bottom: 10px;
-  margin-right: 10px;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
+  width: 240px;
+  display: block; }
+
+#login-page #icon {
+  position: absolute;
+  left: 90px;
+  top: 0px;
+  width: 100px;
+  height: 80px; }
+
+#login-page #login-form-controls {
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
+  margin: 0 auto;
+  padding: 20px; }
+
+#login-page #start {
+  width: 100px;
+  margin-left: 0;
+  margin-bottom: 0; }
+
+#login-page #start:active {
+  box-shadow: inset 0 1px 7px #0c1a2d; }
+
+#login-page input[type="submit"] {
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.5); }
+
+#login-page #error {
+  background: rgba(255, 255, 255, 0.05);
   border-radius: 3px;
-  border: 1px solid #ccc;
+  color: #4693FF;
+  font-size: 10pt;
+  margin: 20px auto;
+  text-shadow: 0 1px 1px #000;
+  width: 250px; }
+#editor-buttons {
+  background: #f8f8f8;
+  border-top: 1px solid #dfdfdf;
+  height: 50px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
 }
-#services-page #members li span.text {
-  margin-left: 5px;
+#editor-buttons {
+  text-align: right;
 }
-#services-page #members li span.icon {
-  width: 15px;
-  height: 15px;
-  display: inline-block;
+#editor-buttons #save {
   position: relative;
-  top: 2px;
-  left: 3px;
+  right: 10px;
+  top: 10px;
 }
-#services-page #members li:hover:not(.selected) {
-  background-color: #ededed;
-  background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#e0e0e0));
-  background: -moz-linear-gradient(#ededed, #e0e0e0);
-  cursor: pointer;
+form.sections h2 {
+  background: none;
+  border: none;
+  padding-left: 0;
 }
-#services-page #members li.selected {
-  background: #4693FF;
-  background: -moz-linear-gradient(#4693FF, #015de6);
-  background: -o-linear-gradient(#4693FF, #015de6);
-  background: -webkit-gradient(linear, left top, left bottom, from(#4693FF), to(#015de6));
-  border-bottom: 1px solid #fff;
-  color: #fff;
-  text-shadow: 0 -1px 1px #1b3a65;
+form.sections label {
+  display: block;
+  font-weight: bold;
+  font-size: 9pt;
+  color: rgba(0,0,0,0.8);
+  margin: 10px 0 -2px 0;
 }
-#services-page #users {
-  max-height: 140px;
-  list-style: none;
+form.sections input[type="text"],
+form.sections input[type="email"],
+form.sections input[type="password"],
+form.sections textarea {
+  width: 90%;
 }
-#services-page #users label {
-  color: inherit;
-  display: inline;
-  font-size: inherit;
-  font-weight: normal;
-  margin-left: 2px;
+form.sections section {
+  border-bottom: 1px solid #ddd;
+  margin: 0 20px;
 }
-#services-page #blank-slate {
-  margin-top: -65px;
-  margin-left: -215px;
-  text-align: center;
-  width: 430px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
+form.sections section fieldset {
+  padding-left: 30%;
+  margin-top: -33px;
+  margin-bottom: 10px;
 }
-#services-page #blank-slate p {
-  color: rgba(0, 0, 0, 0.3);
-  font-size: 12pt;
+form.sections section:last-child {
+  border-bottom: none;
   margin-bottom: 20px;
 }
+form.sections .error {
+  color: #dd2828;
+  font-size: 8pt;
+  width: 89%;
+}
+.hint {
+  color: #aaa;
+  font-size: 8pt;
+  line-height: 1;
+  margin-top: 3px;
+}
 #files-page #container {
   height: 100%;
 }
@@ -580,45 +683,216 @@ form.sections .error {
   text-shadow: 0 1px 1px #fff;
   width: 260px;
 }
-#files-page #labels li .text {
-  text-transform: capitalize;
+#files-page #labels li .text {
+  text-transform: capitalize;
+}
+#files-page #labels li,
+#files-page #uploads li {
+  cursor: pointer;
+  border-bottom: 1px solid #ddd;
+  font-weight: bold;
+  min-height: 42px;
+  padding: 0 10px;
+  position: relative;
+  -moz-transition: background 0.3s;
+  -o-transition: background 0.3s;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+}
+#files-page #uploads li {
+  font-weight: normal;
+  padding: 10px 0 0 0;
+  background: #f8f8f8;
+}
+#files-page #labels li:hover:not(.selected),
+#files-page #uploads li:hover {
+  background: rgba(255, 255, 255, 1.0);
+}
+#files-page #labels li.selected .count {
+  color: rgba(255, 255, 255, 0.85);
+}
+#files-page #labels .count {
+  display: block;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 11px;
+}
+#files-page #charlie-controls {
+  text-align: right;
+}
+#files-page #search-files-form {
+  background: #f8f8f8;
+}
+#services-page #container {
+  height: 100%;
+}
+#services-page #beta {
+  background: #fff;
+}
+#services-page #services {
+  height: 100%;
+  list-style: none;
+  text-shadow: 0 1px 1px #fff;
+  width: 260px;
+}
+#services-page #services li {
+  cursor: pointer;
+  border-bottom: 1px solid #ddd;
+  font-weight: bold;
+  min-height: 42px;
+  padding: 0 10px;
+  position: relative;
+  -moz-transition: background 0.3s;
+  -o-transition: background 0.3s;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+}
+#services-page #services li #status{
+  margin-left:100px;
+}
+#services-page #services li:hover:not(.selected) {
+  background: rgba(255, 255, 255, 1.0);
+}
+#services-page #services li.selected .count {
+  color: rgba(255, 255, 255, 0.85);
+}
+#services-page #operators {
+  margin-bottom: 10px;
+}
+#services-page #operators li {
+  cursor: pointer;
+  position: relative;
+  -moz-transition: background 0.3s;
+  -o-transition: background 0.3s;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+  display: inline-block;
+  border: 1px solid #DDD;
+  border-radius: 30px;
+  width: 60px;
+  height: 15px;
+  line-height: 15px;
+  text-align: center;
+  font-size: 8pt;
+  margin-left: 10px;
+}
+#services-page #operators li:hover:not(.selected) {
+  color: rgba(23, 51, 88, 1.0);
+  background: rgba(255, 255, 255, 1.0);
+}
+#services-page #attributes li {
+  cursor: pointer;
+  border-bottom: 1px solid #ddd;
+  padding: 0 10px;
+  position: relative;
+  color: rgba(23, 51, 88, 0.85);
+  -moz-transition: background 0.3s;
+  -o-transition: background 0.3s;
+  -webkit-transition: background 0.3s;
+  transition: background 0.3s;
+}
+#services-page #attributes li:hover:not(.selected) {
+  color: rgba(23, 51, 88, 1.0);
+  background: rgba(255, 255, 255, 1.0);
+}
+#services-page #services .count {
+  display: block;
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 11px;
+}
+#services-page #charlie-controls {
+  text-align: right;
+}
+#services-page #search-services-form {
+  background: #f8f8f8;
+}
+#services-page #syntax {
+  height: 45px;
+}
+#services-page #syntax-status {
+  font-size: 8pt;
+  height: 12px;
+  line-height: 1;
+  margin: -5px 0 10px 0;
+  width: 93%;
+}
+#services-page #service-preview {
+  margin-top: -15px;
+}
+#services-page #members {
+  height: 200px;
+  margin-bottom: 20px;
+}
+#services-page #members li {
+  display: inline-block;
+  background-color: #fff;
+  font-size: 8pt;
+  width: 150px;
+  max-width: 150px;
+  height: 25px;
+  max-height: 25px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space:nowrap;
+  float: left;
+  margin-bottom: 10px;
+  margin-right: 10px;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+}
+#services-page #members li span.text {
+  margin-left: 5px;
 }
-#files-page #labels li,
-#files-page #uploads li {
-  cursor: pointer;
-  border-bottom: 1px solid #ddd;
-  font-weight: bold;
-  min-height: 42px;
-  padding: 0 10px;
+#services-page #members li span.icon {
+  width: 15px;
+  height: 15px;
+  display: inline-block;
   position: relative;
-  -moz-transition: background 0.3s;
-  -o-transition: background 0.3s;
-  -webkit-transition: background 0.3s;
-  transition: background 0.3s;
+  top: 2px;
+  left: 3px;
 }
-#files-page #uploads li {
-  font-weight: normal;
-  padding: 10px 0 0 0;
-  background: #f8f8f8;
+#services-page #members li:hover:not(.selected) {
+  background-color: #ededed;
+  background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#e0e0e0));
+  background: -moz-linear-gradient(#ededed, #e0e0e0);
+  cursor: pointer;
 }
-#files-page #labels li:hover:not(.selected),
-#files-page #uploads li:hover {
-  background: rgba(255, 255, 255, 1.0);
+#services-page #members li.selected {
+  background: #4693FF;
+  background: -moz-linear-gradient(#4693FF, #015de6);
+  background: -o-linear-gradient(#4693FF, #015de6);
+  background: -webkit-gradient(linear, left top, left bottom, from(#4693FF), to(#015de6));
+  border-bottom: 1px solid #fff;
+  color: #fff;
+  text-shadow: 0 -1px 1px #1b3a65;
 }
-#files-page #labels li.selected .count {
-  color: rgba(255, 255, 255, 0.85);
+#services-page #users {
+  max-height: 140px;
+  list-style: none;
 }
-#files-page #labels .count {
-  display: block;
-  font-size: 11px;
+#services-page #users label {
+  color: inherit;
+  display: inline;
+  font-size: inherit;
   font-weight: normal;
-  line-height: 11px;
+  margin-left: 2px;
 }
-#files-page #charlie-controls {
-  text-align: right;
+#services-page #blank-slate {
+  margin-top: -65px;
+  margin-left: -215px;
+  text-align: center;
+  width: 430px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
 }
-#files-page #search-files-form {
-  background: #f8f8f8;
+#services-page #blank-slate p {
+  color: rgba(0, 0, 0, 0.3);
+  font-size: 12pt;
+  margin-bottom: 20px;
 }
 #setup-page #container {
   height: 100%;
@@ -736,3 +1010,188 @@ form.sections .error {
 #setup-page #info p {
   line-height: 1;
 }
+#systems-page #container {
+  height: 100%;
+}
+#systems-page #alpha {
+  background: #fff;
+  box-shadow: none;
+  left: 0;
+}
+#systems-page #blank-slate {
+  margin-top: -65px;
+  margin-left: -215px;
+  text-align: center;
+  width: 430px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+#systems-page #blank-slate p {
+  color: rgba(0, 0, 0, 0.3);
+  font-size: 12pt;
+  margin-bottom: 20px;
+}
+#systems-page #messages {
+  list-style: none;
+  width: 100%;
+}
+#systems-page #messages li {
+  padding: 0 10px;
+  position: relative;
+}
+#systems-page #messages li:first-child {
+  padding-top: 10px;
+}
+#systems-page #messages li:hover > span .time {
+  opacity: 0.3;
+}
+#systems-page #messages li pre,
+#systems-page #messages li footer {
+  font-family: Menlo, monospace;
+  font-size: 11px;
+  line-height: 1.3;
+  word-wrap: break-word;
+}
+#systems-page #messages li footer {
+  font-weight: bold;
+}
+#systems-page #message-form {
+  height: 21px;
+  line-height: 1;
+  position: relative;
+  width: 100%;
+}
+#systems-page #message-label {
+  background: transparent;
+  cursor: pointer;
+  font-family: Menlo, monospace;
+  font-size: 11px;
+  padding: 0 2px 0 10px;
+}
+#systems-page #message-label::after {
+  margin: 0;
+  content: '$';
+}
+#systems-page #message-label:hover {
+  text-decoration: underline;
+}
+#systems-page #message {
+  box-shadow: none;
+  display: inline-block;
+  font-family: Menlo, monospace;
+  font-size: 11px;
+  margin: 0;
+  padding: 0;
+}
+#systems-page #message:focus {
+  box-shadow: none;
+}
+#systems-page #roster {
+  background: rgba(60, 60, 60, 0.98);
+  border: 2px solid rgb(12, 12, 12);
+  border-radius: 3px;
+  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.75);
+  min-width: 250px;
+  position: absolute;
+  left: 10px;
+}
+#systems-page #roster-items {
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  overflow-y: auto;
+  text-shadow: 0 1px 1px rgb(21, 21, 21);
+}
+#systems-page #roster-items li {
+  border-top: 1px solid rgb(80, 80, 80);
+  border-bottom: 1px solid rgb(48, 48, 48);
+  line-height: 38px;
+  list-style: none;
+  padding-right: 50px;
+  position: relative;
+}
+#systems-page #roster-items li.offline {
+  color: #888;
+}
+#systems-page #roster-items li.offline .icon {
+  opacity: 0.3;
+}
+#systems-page #roster-items li:hover:not(.group) {
+  background: #319be7;
+  background: -moz-linear-gradient(#319be7, #1b78d9);
+  background: -ms-linear-gradient(#319be7, #1b78d9);
+  background: -o-linear-gradient(#319be7, #1b78d9);
+  background: -webkit-linear-gradient(#319be7, #1b78d9);
+  border-top: 1px solid #148ddf;
+  color: #fff;
+  cursor: pointer;
+  text-shadow: -1px 1px 1px hsl(210, 51%, 45%), 0px -1px 1px hsl(210, 51%, 49%);
+}
+#systems-page #roster-items li.group {
+  background: #404040;
+  background: -moz-linear-gradient(#404040, #353535);
+  background: -ms-linear-gradient(#404040, #353535);
+  background: -o-linear-gradient(#404040, #353535);
+  background: -webkit-linear-gradient(#404040, #353535);
+  color: #ccc;
+  font-size: 10px;
+  font-weight: bold;
+  line-height: 2;
+  padding-left: 10px;
+  text-transform: uppercase;
+}
+#systems-page #roster-items li .icon {
+  position: absolute;
+  height: 32px;
+  width: 32px;
+  top: 2px;
+}
+#systems-page #roster-items li .icon svg {
+  height: 32px;
+  width: 32px;
+}
+#systems-page #roster-items li .text {
+  padding-left: 32px;
+}
+#systems-page #roster-items li .unread {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 30px;
+  color: #fff;
+  display: inline-block;
+  font-size: 11px;
+  font-weight: bold;
+  line-height: 15px;
+  padding: 0 6px;
+  position: absolute;
+  right: 10px;
+  top: 12px;
+}
+#systems-page #roster-items li:hover .unread {
+  color: #fff;
+}
+#systems-page #roster-form {
+  background: rgb(80, 80, 80);
+  background: -moz-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
+  background: -ms-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
+  background: -o-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
+  background: -webkit-linear-gradient(rgb(80,80,80), rgb(48, 48, 48));
+  padding: 3px 5px;
+}
+#systems-page #roster-form form {
+  padding: 0;
+  border: none;
+}
+#systems-page #roster-filter {
+  width: 100%;
+}
+/*
+
+
+
+
+
+
+
+ */
+