diff --git a/Makefile b/Makefile
index ea49bb4..5cf4f9f 100644
--- a/Makefile
+++ b/Makefile
@@ -60,6 +60,9 @@
 # https://github.com/substack/node-browserify/issues/1063
 	touch node_modules
 
+public/bundle.min.css: $(shell find stylesheets) node_modules
+	lessc -sm=on stylesheets/index.less | postcss -u autoprefixer -u cssnano > $@
+
 public/bundle.min.js: browser/index.js $(shell find browser) node_modules
 ifdef DEBUG
 	$(call BROWSERIFY,$<,$@)
@@ -68,7 +71,7 @@
 endif
 
 .PHONY: build
-build: bin node_modules public/bundle.min.js
+build: bin node_modules public/bundle.min.css public/bundle.min.js
 
 .PHONY: serve
 serve: build
@@ -76,7 +79,7 @@
 
 .PHONY: clean
 clean:
-	rm -rf bin node_modules public/bundle.min.js
+	rm -rf bin node_modules public/bundle.*
 
 .PHONY: lint
 lint:
diff --git a/README.md b/README.md
index 00169cd..9b9bf64 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@
 By default, the web app will use an in-memory (in-browser-tab) local storage
 engine, and will not talk to Syncbase at all. To configure the app to talk to
 Syncbase, add `d=syncbase` to the url query params, or simply click the storage
-engine indicator in the upper right corner to toggle it.
+engine indicator in the top right corner to toggle it.
 
 When using Syncbase, by default the app attempts to contact the Syncbase service
 using the Vanadium object name `/localhost:8200`. To specify a different name,
@@ -132,28 +132,19 @@
 To run a simple benchmark (100 puts, followed by a scan of those rows), specify
 query param `bm=1`.
 
-### Open questions
+### Benchmark performance
 
-- Why can test browser talk to normal syncbase and not to test syncbase? This is
-  the opposite of what I'd expect given the blessings.
-  - Glob from test browser to test syncbase (service.listApps) fails with "does
-    not have Resolve access".
-  - RPCs from test browser to normal syncbase should fail with "untrusted root",
-    but instead they succeed.
+All numbers assume dev console is closed, and assume non-test setup as described
+above.
 
-- Why do test and normal browsers have different performance talking to the
-  same (normal) syncbase?
-  - Test browser: 100 puts takes 2s, scan takes 3.5s.
-  - Normal browser: 100 puts takes 5s, scan takes 9s.
+Currently, parallel 100 puts takes 4s, and scanning 100 rows takes 0.6s.
 
-  With dev console closed, scan takes roughly 0.6s on both (see below), but 100
-  puts still takes 2s in test browser vs. 4s in normal browser.
+For the puts, avoiding unnecessarily cautious Signature RPC and avoiding 2x
+blowup from unnecessary Resolve calls will help. Parallelism doesn't help as
+much as one would hope, need to understand why.
 
-- Why is JS scan so slow? Note, latency appears to be proportional to data size,
-  with some small fixed overhead. Also note, vrpc scan takes less than 0.3s.
-
-  ANSWER: Turns out if the dev console is closed, scan is much faster (0.6s).
-  Issue filed: https://github.com/vanadium/issues/issues/610
+For the scan, 100ms comes from JS encode/decode, and probably much of the rest
+from WSPR. Needs further digging.
 
 [syncbase]: https://docs.google.com/document/d/12wS_IEPf8HTE7598fcmlN-Y692OWMSneoe2tvyBEpi0/edit#
 [crx]: https://v.io/tools/vanadium-chrome-extension.html
diff --git a/browser/benchmark.js b/browser/benchmark.js
index 9e264a0..d6ba9a7 100644
--- a/browser/benchmark.js
+++ b/browser/benchmark.js
@@ -8,21 +8,21 @@
 
 var util = require('./util');
 
-exports.logLatency = logLatency;
+exports.logFn = logFn;
 exports.runBenchmark = runBenchmark;
 
 var LOG_EVERYTHING = false;
 
 function logStart(name) {
-  util.log(name + ' start');
+  console.log(name + ' start');
   return Date.now();
 }
 
 function logStop(name, start) {
-  util.log(name + ' took ' + (Date.now() - start) + 'ms');
+  console.log(name + ' took ' + (Date.now() - start) + 'ms');
 }
 
-function logLatency(name, cb) {
+function logFn(name, cb) {
   var start = logStart(name);
   return function() {
     logStop(name, start);
@@ -31,24 +31,17 @@
 }
 
 // Does n parallel puts with a common prefix, then returns the prefix.
-// TODO(sadovsky): According to Shyam, since these puts are being done in
-// parallel, it may be the case that each one is setting up its own VC (doing
-// auth handshake, fetching discharge, etc.), rather than all puts sharing a
-// single VC. Ali or Suharsh should know the state of VC sharing. Possible
-// workaround would be to do something that forces VC creation before starting
-// the parallel puts. (OTOH, we always run service.listApps before the puts,
-// which should create the VC.)
 function doPuts(ctx, tb, n, cb) {
-  cb = logLatency('doPuts', cb);
+  cb = logFn('doPuts', cb);
   var prefix = util.timestamp() + '.';
   async.times(100, function(n, cb) {
     // TODO(sadovsky): Remove this once we loosen Syncbase's naming rules.
     prefix = prefix.replace(/:/g, '.');
     var key = prefix + n;
     var value = '';
-    if (LOG_EVERYTHING) util.log('put: ' + key);
+    if (LOG_EVERYTHING) console.log('put: ' + key);
     tb.put(ctx, key, value, function(err) {
-      if (LOG_EVERYTHING) util.log('put done: ' + key);
+      if (LOG_EVERYTHING) console.log('put done: ' + key);
       cb(err);
     });
   }, function(err) {
@@ -58,16 +51,16 @@
 
 // Scans (and logs) all records with the given prefix.
 function doScan(ctx, tb, prefix, cb) {
-  cb = logLatency('doScan(' + prefix + ')', cb);
+  cb = logFn('doScan(' + prefix + ')', cb);
   var bytes = 0, streamErr = null;
   tb.scan(ctx, nosql.rowrange.prefix(prefix), function(err) {
     err = err || streamErr;
     if (err) return cb(err);
-    util.log('scanned ' + bytes + ' bytes');
+    console.log('scanned ' + bytes + ' bytes');
     cb();
   }).on('data', function(row) {
     bytes += row.key.length + row.value.length;
-    if (LOG_EVERYTHING) util.log('scan: ' + JSON.stringify(row));
+    if (LOG_EVERYTHING) console.log('scan: ' + JSON.stringify(row));
   }).on('error', function(err) {
     streamErr = streamErr || err.error;
   });
@@ -75,7 +68,7 @@
 
 // Assumes table 'tb' exists.
 function runBenchmark(ctx, db, cb) {
-  cb = logLatency('runBenchmark', cb);
+  cb = logFn('runBenchmark', cb);
   var tb = db.table('tb');
   doPuts(ctx, tb, 100, function(err, prefix) {
     if (err) return cb(err);
diff --git a/browser/defaults.js b/browser/defaults.js
index bae85e3..d41e637 100644
--- a/browser/defaults.js
+++ b/browser/defaults.js
@@ -2,12 +2,13 @@
 
 var async = require('async');
 var syncbase = require('syncbase');
+var vanadium = require('vanadium');
+var verror = vanadium.verror;
 
 var bm = require('./benchmark');
 var CollectionDispatcher = require('./collection_dispatcher');
 var MemCollection = require('./mem_collection');
 var SyncbaseDispatcher = require('./syncbase_dispatcher');
-var util = require('./util');
 
 // Copied from meteor/todos/server/bootstrap.js.
 var data = [
@@ -48,11 +49,12 @@
 ];
 
 function initData(disp, cb) {
+  cb = bm.logFn('initData', cb);
   var timestamp = Date.now();
   async.each(data, function(list, cb) {
     disp.addList({name: list.name}, function(err, listId) {
       if (err) return cb(err);
-      async.eachSeries(list.contents, function(info, cb) {
+      async.each(list.contents, function(info, cb) {
         timestamp += 1;  // ensure unique timestamp
         disp.addTodo(listId, {
           text: info[0],
@@ -62,7 +64,13 @@
         }, cb);
       }, cb);
     });
-  }, cb);
+  }, function(err) {
+    // NOTE(sadovsky): Based on console logs, it looks like browser async.each
+    // doesn't use process.nextTick for its final callback!
+    process.nextTick(function() {
+      return cb(err);
+    });
+  });
 }
 
 // Returns a new Vanadium context object with a timeout.
@@ -70,45 +78,37 @@
   return ctx.withTimeout(timeout || 5000);
 }
 
-function appExists(ctx, service, name, cb) {
-  service.listApps(ctx, function(err, names) {
-    if (err) return cb(err);
-    return cb(null, names.indexOf(name) >= 0);
-  });
-}
-
 exports.initSyncbaseDispatcher = function(rt, name, benchmark, cb) {
-  cb = bm.logLatency('initSyncbaseDispatcher', cb);
-  var service = syncbase.newService(name);
-  // TODO(sadovsky): Instead of appExists, simply check for ErrExist in the
-  // app.create response.
+  cb = bm.logFn('initSyncbaseDispatcher', cb);
   var ctx = rt.getContext();
-  appExists(wt(ctx), service, 'todos', function(err, exists) {
-    if (err) return cb(err);
-    var app = service.app('todos'), db = app.noSqlDatabase('db');
-    var disp = new SyncbaseDispatcher(rt, db);
-    if (exists) {
-      if (benchmark) {
-        return bm.runBenchmark(ctx, db, cb);
+  var service = syncbase.newService(name);
+  var app = service.app('todos'), db = app.noSqlDatabase('db');
+  var disp = new SyncbaseDispatcher(rt, db);
+  // TODO(sadovsky): Check that the VC (and discharge, etc.) for this RPC is
+  // reused for all subsequent RPCs.
+  app.create(wt(ctx), {}, function(err) {
+    if (err) {
+      if (err instanceof verror.ExistError) {
+        if (benchmark) {
+          return bm.runBenchmark(ctx, db, cb);
+        }
+        console.log('app exists; assuming database has been initialized');
+        return cb(null, disp);
       }
-      util.log('app exists; assuming everything has been initialized');
-      return cb(null, disp);
+      return cb(err);
     }
-    util.log('app does not exist; initializing everything');
-    app.create(wt(ctx), {}, function(err) {
+    console.log('app did not exist; initializing database');
+    db.create(wt(ctx), {}, function(err) {
       if (err) return cb(err);
-      db.create(wt(ctx), {}, function(err) {
+      db.createTable(wt(ctx), 'tb', {}, function(err) {
         if (err) return cb(err);
-        db.createTable(wt(ctx), 'tb', {}, function(err) {
+        if (benchmark) {
+          return bm.runBenchmark(ctx, db, cb);
+        }
+        console.log('hierarchy created; writing rows');
+        initData(disp, function(err) {
           if (err) return cb(err);
-          if (benchmark) {
-            return bm.runBenchmark(ctx, db, cb);
-          }
-          util.log('hierarchy created; writing rows');
-          initData(disp, function(err) {
-            if (err) return cb(err);
-            cb(null, disp);
-          });
+          cb(null, disp);
         });
       });
     });
@@ -116,7 +116,7 @@
 };
 
 exports.initCollectionDispatcher = function(cb) {
-  cb = bm.logLatency('initCollectionDispatcher', cb);
+  cb = bm.logFn('initCollectionDispatcher', cb);
   var lists = new MemCollection('lists'), todos = new MemCollection('todos');
   var disp = new CollectionDispatcher(lists, todos);
   initData(disp, function(err) {
diff --git a/browser/index.js b/browser/index.js
index 00e3eff..6b4df96 100644
--- a/browser/index.js
+++ b/browser/index.js
@@ -1,11 +1,12 @@
-// TODO(sadovsky): Maybe update to the new Meteor Todos UI.
 // https://github.com/meteor/simple-todos
 
 'use strict';
 
 /* jshint newcap: false */
+/* global Mousetrap */
 
 var _ = require('lodash');
+var async = require('async');
 var page = require('page');
 var React = require('react');
 var url = require('url');
@@ -25,13 +26,44 @@
 ////////////////////////////////////////
 // Global state
 
-var disp;  // type Dispatcher
+// Dispatcher, initialized by initDispatcher.
+var disp;
+
+// Used for query params.
+var u = url.parse(window.location.href, true);
 
 ////////////////////////////////////////
 // Helpers
 
 function noop() {}
 
+function initDispatcher(dispType, syncbaseName, benchmark, cb) {
+  var clientCb = cb;
+  cb = function(err, resDisp) {
+    if (err) return clientCb(err);
+    disp = resDisp;
+    clientCb();
+  };
+  if (dispType === 'collection') {
+    console.assert(!benchmark);
+    defaults.initCollectionDispatcher(cb);
+  } else if (dispType === 'syncbase') {
+    var vanadiumConfig = {
+      logLevel: vanadium.vlog.levels.INFO,
+      namespaceRoots: u.query.mounttable ? [u.query.mounttable] : undefined,
+      proxy: u.query.proxy
+    };
+    vanadium.init(vanadiumConfig, function(err, rt) {
+      if (err) return cb(err);
+      defaults.initSyncbaseDispatcher(rt, syncbaseName, benchmark, cb);
+    });
+  } else {
+    process.nextTick(function() {
+      cb(new Error('unknown dispType: ' + dispType));
+    });
+  }
+}
+
 function activateInput(input) {
   input.focus();
   input.select();
@@ -40,27 +72,27 @@
 function okCancelEvents(cbs) {
   var ok = cbs.ok || noop;
   var cancel = cbs.cancel || noop;
-  function done(ev) {
-    var value = ev.target.value;
+  function done(e) {
+    var value = e.target.value;
     if (value) {
-      ok(value, ev);
+      ok(value, e);
     } else {
-      cancel(ev);
+      cancel(e);
     }
   }
   return {
-    onKeyDown: function(ev) {
-      if (ev.which === 27) {  // esc
-        cancel(ev);
+    onKeyDown: function(e) {
+      if (e.which === 27) {  // esc
+        cancel(e);
       }
     },
-    onKeyUp: function(ev) {
-      if (ev.which === 13) {  // enter
-        done(ev);
+    onKeyUp: function(e) {
+      if (e.which === 13) {  // enter
+        done(e);
       }
     },
-    onBlur: function(ev) {
-      done(ev);
+    onBlur: function(e) {
+      done(e);
     }
   };
 }
@@ -68,8 +100,8 @@
 ////////////////////////////////////////
 // Components
 
-var TagFilter = React.createFactory(React.createClass({
-  displayName: 'TagFilter',
+var TagsPane = React.createFactory(React.createClass({
+  displayName: 'TagsPane',
   render: function() {
     var that = this;
     var tagFilter = this.props.tagFilter;
@@ -94,22 +126,23 @@
       count: totalCount,
       selected: tagFilter === null
     });
-    return h('div#tag-filter.tag-list', [
-      h('div.label', 'Show:')
+    return h('div#tags-pane', [
+      h('div.label', {key: 'label'}, 'Show:')
     ].concat(_.map(tagInfos, function(tagInfo) {
-      var count = h('span.count', '(' + tagInfo.count + ')');
+      var count = h('span.count', {key: 'count'}, '(' + tagInfo.count + ')');
       return h('div.tag' + (tagInfo.selected ? '.selected' : ''), {
+        key: 'tag:' + (tagInfo.tag || ''),
         onMouseDown: function() {
           var newTagFilter = tagFilter === tagInfo.tag ? null : tagInfo.tag;
           that.props.setTagFilter(newTagFilter);
         }
-      }, [tagInfo.tag === null ? 'All items' : tagInfo.tag, ' ', count]);
+      }, [(tagInfo.tag || 'All items'), count]);
     })));
   }
 }));
 
-var Tags = React.createFactory(React.createClass({
-  displayName: 'Tags',
+var TodoTags = React.createFactory(React.createClass({
+  displayName: 'TodoTags',
   getInitialState: function() {
     return {
       addingTag: false
@@ -124,25 +157,20 @@
     var that = this;
     var children = [];
     _.each(this.props.tags, function(tag) {
-      // Note, we must specify the "key" prop so that React doesn't reuse the
-      // opacity=0 node after a tag is removed.
-      children.push(h('div.tag.removable_tag', {key: tag}, [
-        h('div.name', tag),
+      children.push(h('div.tag.removable', {key: tag}, [
+        h('div.name', {key: 'name'}, tag),
         h('div.remove', {
-          onClick: function(ev) {
-            ev.target.parentNode.style.opacity = 0;
-            // Wait for CSS animation to finish.
-            window.setTimeout(function() {
-              // TODO(sadovsky): If no other todos have the removed tag, maybe
-              // set tagFilter to null.
-              disp.removeTag(that.props.todoId, tag);
-            }, 200);
+          key: 'remove',
+          onClick: function(e) {
+            disp.removeTag(that.props.todoId, tag);
           }
         })
       ]));
     });
     if (this.state.addingTag) {
-      children.push(h('div.tag.edittag', h('input#edittag-input', _.assign({
+      children.push(h('div.tag.edittag', {
+        key: 'edittag'
+      }, h('input#edittag-input', _.assign({
         type: 'text',
         defaultValue: ''
       }, okCancelEvents({
@@ -156,6 +184,7 @@
       })))));
     } else {
       children.push(h('div.tag.addtag', {
+        key: 'addtag',
         onClick: function() {
           that.setState({addingTag: true});
         }
@@ -178,10 +207,12 @@
     }
   },
   render: function() {
-    var that = this;
-    var todo = this.props.todo, children = [];
-    if (this.state.editingText) {
-      children.push(h('div.edit', h('input#todo-input', _.assign({
+    var that = this, todo = this.props.todo, et = this.state.editingText;
+    var hDescription;
+    if (et) {
+      hDescription = h('div.description', {
+        key: 'description'
+      }, h('input#todo-input', _.assign({
         type: 'text',
         defaultValue: todo.text
       }, okCancelEvents({
@@ -192,67 +223,71 @@
         cancel: function() {
           that.setState({editingText: false});
         }
-      })))));
+      }))));
     } else {
-      children.push(h('div.destroy', {
+      hDescription = h('div.description', {
+        key: 'description',
+        onDoubleClick: function() {
+          that.setState({editingText: true});
+        }
+      }, todo.text);
+    }
+    var opts = (et ? '.edit' : '') + (todo.done ? '.done' : '');
+    return h('li.todo-row' + opts, [
+      h('div.destroy', {
+        key: 'destroy',
         onClick: function() {
           disp.removeTodo(todo._id);
         }
-      }));
-      children.push(h('div.display', [
-        h('input.check', {
-          type: 'checkbox',
-          checked: todo.done,
-          onClick: function() {
-            disp.markTodoDone(todo._id, !todo.done);
-          }
-        }),
-        h('div.todo-text', {
-          onDoubleClick: function() {
-            that.setState({editingText: true});
-          }
-        }, todo.text)
-      ]));
-    }
-    children.push(Tags({todoId: todo._id, tags: todo.tags}));
-    return h('li.todo' + (todo.done ? '.done' : ''), children);
+      }),
+      h('input.checkbox', {
+        key: 'checkbox',
+        type: 'checkbox',
+        checked: todo.done,
+        onChange: function() {
+          disp.markTodoDone(todo._id, !todo.done);
+        }
+      }),
+      hDescription,
+      TodoTags({key: 'tags', todoId: todo._id, tags: todo.tags})
+    ]);
   }
 }));
 
-var Todos = React.createFactory(React.createClass({
-  displayName: 'Todos',
+var TodosPane = React.createFactory(React.createClass({
+  displayName: 'TodosPane',
   render: function() {
     var that = this;
     if (!this.props.listId) {
       return null;
     }
     var children = [];
-    if (this.props.todos === null) {
-      children.push('Loading...');
+    if (!this.props.todos) {
+      children.push(h('div.loading', {key: 'loading'}, 'Loading...'));
     } else {
       var tagFilter = this.props.tagFilter, items = [];
       _.each(this.props.todos, function(todo) {
         if (tagFilter === null || _.contains(todo.tags, tagFilter)) {
-          items.push(Todo({todo: todo}));
+          items.push(Todo({key: todo._id, todo: todo}));
         }
       });
-      children.push(h('div#new-todo-box', h('input#new-todo', _.assign({
+      children.push(h('div#new-todo', {key: 'new-todo'}, h('input', _.assign({
         type: 'text',
         placeholder: 'New item'
       }, okCancelEvents({
-        ok: function(value, ev) {
+        ok: function(value, e) {
           disp.addTodo(that.props.listId, {
             text: value,
             tags: tagFilter ? [tagFilter] : [],
             done: false,
             timestamp: Date.now()
           });
-          ev.target.value = '';
+          e.target.value = '';
         }
       })))));
-      children.push(h('ul#item-list', items));
+      children.push(h('ul#todo-list', {key: 'todo-list'}, items));
     }
-    return h('div#items-view', children);
+    return h('div#todos-pane', children);
   }
 }));
 
@@ -269,11 +304,13 @@
     }
   },
   render: function() {
-    var that = this;
-    var list = this.props.list, child;
+    var that = this, list = this.props.list;
+    var children = [];
     // http://facebook.github.io/react/docs/forms.html#controlled-components
     if (this.state.editingName) {
-      child = h('div.edit', h('input#list-name-input', _.assign({
+      children.push(h('div.edit', {
+        key: 'edit'
+      }, h('input#list-name-input', _.assign({
         type: 'text',
         defaultValue: list.name
       }, okCancelEvents({
@@ -284,14 +321,23 @@
         cancel: function() {
           that.setState({editingName: false});
         }
-      }))));
+      })))));
     } else {
-      child = h('div.display', h('a.list-name' + (list.name ? '' : '.empty'), {
-        href: '/lists/' + list._id,
-        onClick: function(ev) {
-          ev.preventDefault();
+      children.push(h('div.status', {
+        key: 'status',
+        onClick: function(e) {
+          e.preventDefault();
+          that.props.showStatusDialog();
         }
-      }, list.name));
+      }, h('div.circle')));
+      children.push(h('div.display', {
+        key: 'display'
+      }, h('a.list-name' + (list.name ? '' : '.empty'), {
+        href: '/lists/' + list._id,
+        onClick: function(e) {
+          e.preventDefault();
+        }
+      }, list.name)));
     }
     return h('div.list' + (list.selected ? '.selected' : ''), {
       onMouseDown: function() {
@@ -300,48 +346,98 @@
       onDoubleClick: function() {
         that.setState({editingName: true});
       }
-    }, child);
+    }, children);
   }
 }));
 
-var Lists = React.createFactory(React.createClass({
-  displayName: 'Lists',
+var StatusPane = React.createFactory(React.createClass({
+  displayName: 'StatusPane',
+  componentDidMount: function() {
+    var that = this;
+    Mousetrap.bind('esc', function() {
+      that.props.close();
+    });
+  },
+  componentWillUnmount: function() {
+    Mousetrap.unbind('esc');
+  },
   render: function() {
     var that = this;
-    var children = [h('h3', 'Todo Lists')];
-    if (this.props.lists === null) {
-      children.push(h('div#lists', 'Loading...'));
+    return h('div#status-pane', {
+      onClick: function(e) {
+        if (e.target === e.currentTarget) {
+          that.props.close();
+        }
+      }
+    }, h('div.status-dialog', [
+      // TODO(sadovsky): Add stuff here.
+      h('h4', {key: 'title'}, 'Share with others'),
+      // FIXME: Finish implementing this.
+      h('div.close', {
+        key: 'close',
+        onClick: function() {
+          that.props.close();
+        }
+      })
+    ]));
+  }
+}));
+
+var ListsPane = React.createFactory(React.createClass({
+  displayName: 'ListsPane',
+  getInitialState: function() {
+    return {
+      statusDialog: null  // null or list id
+    };
+  },
+  render: function() {
+    var that = this;
+    var children = [h('div.lists-title', {key: 'title'}, 'Todo Lists')];
+    if (!this.props.lists) {
+      children.push(h('div.loading', {key: 'loading'}, 'Loading...'));
     } else {
       var lists = [];
       _.each(this.props.lists, function(list) {
         list.selected = that.props.listId === list._id;
         lists.push(List({
+          key: list._id,
           list: list,
-          setListId: that.props.setListId
+          setListId: that.props.setListId,
+          showStatusDialog: function() {
+            that.setState({statusDialog: list._id});
+          }
         }));
       });
-      children.push(h('div#lists', lists));
-      children.push(h('div#createList', h('input#new-list', _.assign({
+      children.push(h('div', {key: 'lists'}, lists));
+      children.push(h('div.new-list', {key: 'new-list'}, h('input', _.assign({
         type: 'text',
         placeholder: 'New list'
       }, okCancelEvents({
-        ok: function(value, ev) {
+        ok: function(value, e) {
           disp.addList({name: value}, function(err, listId) {
             if (err) throw err;
             that.props.setListId(listId);
           });
-          ev.target.value = '';
+          e.target.value = '';
         }
       })))));
+      if (this.state.statusDialog) {
+        children.push(StatusPane({
+          key: 'status',
+          close: function() {
+            that.setState({statusDialog: null});
+          }
+        }));
+      }
     }
-    return h('div', children);
+    return h('div#lists-pane', children);
   }
 }));
 
 var DispType = React.createFactory(React.createClass({
   render: function() {
     var that = this;
-    return h('div.disp-type.' + this.props.dispType, {
+    return h('div#disp-type.' + this.props.dispType, {
       onClick: function() {
         that.props.toggleDispType();
       }
@@ -353,8 +449,11 @@
   displayName: 'Page',
   getInitialState: function() {
     return {
-      lists: null,  // all lists
-      todos: null,  // all todos for current listId
+      dispInitialized: false,
+      lists: {seq: 0, items: null},  // all lists
+      todos: {},  // map of listId to {seq, items}
+      // FIXME: Populate and use this.
+      syncgroups: {},  // map of listId to sgInfo
       listId: this.props.initialListId,  // current list
       tagFilter: null  // current tag
     };
@@ -382,58 +481,120 @@
     // Note, this doesn't trigger a re-render; it's purely visual.
     window.history.replaceState({}, '', pathname + window.location.search);
   },
-  componentDidMount: function() {
-    var that = this;
-
-    // TODO(sadovsky): Only read (and only update) what's needed based on what
-    // changed.
-    disp.on('change', function() {
-      var listId = that.state.listId;
-      that.getLists_(function(err, lists) {
-        if (err) throw err;
-        that.getTodos_(listId, function(err, todos) {
-          if (err) throw err;
-          // TODO(sadovsky): Maybe don't call setState if a newer change has
-          // been observed.
-          var nextState = {lists: lists};
-          if (that.state.listId === listId) {
-            nextState.todos = todos;
-          }
-          that.setState(nextState);
-        });
-      });
-    });
-
-    that.getLists_(function(err, lists) {
+  componentWillMount: function() {
+    var that = this, props = this.props;
+    var dt = props.dispType, sn = props.syncbaseName, bm = props.benchmark;
+    initDispatcher(dt, sn, bm, function(err) {
       if (err) throw err;
-      var listId = that.state.listId;
-      if ((!listId || !_.includes(_.pluck(lists, '_id'), listId)) &&
-          lists.length > 0) {
+      that.setState({dispInitialized: true});
+    });
+  },
+  componentDidMount: function() {
+    console.assert(!this.state.dispInitialized);
+  },
+  componentDidUpdate: function(prevProps, prevState) {
+    var that = this;
+    this.updateURL();
+
+    // Only run the code below when disp has just been initialized.
+    if (prevState.dispInitialized || !this.state.dispInitialized) {
+      return;
+    }
+
+    // Returns the list id for the list that should be displayed.
+    function getListId() {
+      var listId = that.state.listId, lists = that.state.lists.items;
+      // If listId refers to an unknown list, set it to null.
+      if (!_.includes(_.pluck(lists, '_id'), listId)) {
+        listId = null;
+      }
+      // If listId is not set, set it to the id of the first list.
+      if (!listId && lists.length > 0) {
         listId = lists[0]._id;
       }
+      return listId;
+    }
+
+    // Updates lists. Calls cb once the setState call has completed.
+    // TODO(sadovsky): If possible, simplify how we deal with concurrent state
+    // updates, here and elsewhere. The current approach is fairly subtle and
+    // error-prone. Our goal is simple: never show stale data, even in the
+    // presence of sync.
+    function updateLists(cb) {
+      var listsSeq = that.state.lists.seq + 1;
+      that.getLists_(function(err, lists) {
+        if (err) return cb(err);
+        // Use setState(cb) form to ensure atomicity.
+        // References: https://goo.gl/CZ82Vp and https://goo.gl/vVCp8B
+        that.setState(function(state) {
+          if (listsSeq <= state.lists.seq) {
+            return {};
+          }
+          return {lists: {seq: listsSeq, items: lists}};
+        }, cb);
+      });
+    }
+
+    // Updates todos for the specified list. Calls cb once the setState call
+    // has completed.
+    function updateTodos(listId, cb) {
+      var stateTodos = that.state.todos[listId];
+      var todosSeq = (stateTodos ? stateTodos.seq : 0) + 1;
       that.getTodos_(listId, function(err, todos) {
+        if (err) return cb(err);
+        // Use setState(cb) form to ensure atomicity.
+        // https://goo.gl/CZ82Vp
+        that.setState(function(state) {
+          var stateTodos = state.todos[listId];
+          if (stateTodos && todosSeq <= stateTodos.seq) {
+            return {};
+          }
+          state.todos[listId] = {seq: todosSeq, items: todos};
+          return {todos: state.todos};
+        }, cb);
+      });
+    }
+
+    // TODO(sadovsky): Only read (and only redraw) what's needed based on what
+    // changed.
+    disp.on('change', function() {
+      updateLists(function(err) {
         if (err) throw err;
-        that.setState({
-          lists: lists,
-          todos: todos,
-          listId: listId
+        var listId = getListId();
+        updateTodos(listId, function(err) {
+          if (err) throw err;
         });
       });
     });
-  },
-  componentWillUpdate: function(nextProps, nextState) {
-    if (false) {
-      util.log(this.props, nextProps);
-      util.log(this.state, nextState);
-    }
-  },
-  componentDidUpdate: function() {
-    this.updateURL();
+
+    // Load initial lists and todos. Note that changes can come in concurrently
+    // via sync.
+    updateLists(function(err) {
+      if (err) throw err;
+      // Set initial listId if needed.
+      var listId = getListId();
+      if (listId !== that.state.listId) {
+        that.setState({listId: listId});
+      }
+      // Get todos for all lists.
+      var listIds = _.pluck(that.state.lists.items, '_id');
+      async.each(listIds, updateTodos, function(err) {
+        if (err) throw err;
+      });
+    });
   },
   render: function() {
+    if (this.props.benchmark) {
+      return null;
+    }
+
     var that = this;
-    return h('div', [
+    var listId = this.state.listId;
+    // If currTodos is {}, todos.items will be undefined, as desired.
+    var currTodos = this.state.todos[listId] || {};
+    return h('div#page-pane', [
       DispType({
+        key: 'DispType',
         dispType: this.props.dispType,
         toggleDispType: function() {
           var newDispType = DISP_TYPE_SYNCBASE;
@@ -443,44 +604,35 @@
           window.location.href = '/?d=' + newDispType + '&n=' + SYNCBASE_NAME;
         }
       }),
-      h('div#top-tag-filter', TagFilter({
-        todos: this.state.todos,
-        tagFilter: this.state.tagFilter,
-        setTagFilter: function(tagFilter) {
-          that.setState({tagFilter: tagFilter});
-        }
-      })),
-      h('div#main-pane', Todos({
-        todos: this.state.todos,
-        listId: this.state.listId,
-        tagFilter: this.state.tagFilter
-      })),
-      h('div#side-pane', Lists({
-        lists: this.state.lists,
-        listId: this.state.listId,
+      ListsPane({
+        key: 'ListsPane',
+        lists: this.state.lists.items,
+        listId: listId,
         setListId: function(listId) {
           if (listId !== that.state.listId) {
             that.setState({
-              todos: null,
               listId: listId,
               tagFilter: null
-            }, function() {
-              // Run getTodos_ in the setState callback to ensure that it will
-              // execute after the 'change' event handler executes when a list
-              // is created locally.
-              // TODO(sadovsky): Maybe hold all todos (for all lists) in memory
-              // so that we don't show a brief "loading" message on every list
-              // change.
-              that.getTodos_(listId, function(err, todos) {
-                if (err) throw err;
-                if (listId === that.state.listId) {
-                  that.setState({todos: todos});
-                }
-              });
             });
           }
         }
-      }))
+      }),
+      h('div#tags-and-todos-pane', {key: 'tags-and-todos-pane'}, [
+        TagsPane({
+          key: 'TagsPane',
+          todos: currTodos.items,
+          tagFilter: this.state.tagFilter,
+          setTagFilter: function(tagFilter) {
+            that.setState({tagFilter: tagFilter});
+          }
+        }),
+        TodosPane({
+          key: 'TodosPane',
+          todos: currTodos.items,
+          listId: listId,
+          tagFilter: this.state.tagFilter
+        })
+      ])
     ]);
   }
 }));
@@ -488,63 +640,36 @@
 ////////////////////////////////////////
 // Initialization
 
+// TODO(sadovsky): Override other console methods and add window.onerror
+// handler.
 var logEl = document.querySelector('#log');
-util.addLogger(function() {
+var consoleLog = console.log.bind(console);
+console.log = function() {
+  var args = [util.timestamp()].concat(Array.prototype.slice.call(arguments));
+  consoleLog.apply(null, args);
   var msgEl = document.createElement('div');
   msgEl.className = 'msg';
-  msgEl.innerText = Array.prototype.slice.call(arguments).join(' ');
+  msgEl.innerText = args.join(' ');
   logEl.appendChild(msgEl);
+  logEl.scrollTop = logEl.scrollHeight;  // scroll to bottom
+};
+
+Mousetrap.bind(['ctrl+l', 'meta+l'], function() {
+  logEl.classList.toggle('visible');
 });
-util.log('starting app');
-
-var u = url.parse(window.location.href, true);
-
-var rc;  // React component
-function render(props) {
-  console.assert(!rc);
-  rc = React.render(Page(props), document.querySelector('#page'));
-}
-
-function initDispatcher(dispType, syncbaseName, benchmark, cb) {
-  if (dispType === 'collection') {
-    console.assert(!benchmark);
-    defaults.initCollectionDispatcher(cb);
-  } else if (dispType === 'syncbase') {
-    var vanadiumConfig = {
-      logLevel: vanadium.vlog.levels.INFO,
-      namespaceRoots: u.query.mounttable ? [u.query.mounttable] : undefined,
-      proxy: u.query.proxy
-    };
-    vanadium.init(vanadiumConfig, function(err, rt) {
-      if (err) return cb(err);
-      defaults.initSyncbaseDispatcher(rt, syncbaseName, benchmark, cb);
-    });
-  } else {
-    process.nextTick(function() {
-      cb(new Error('unknown dispType: ' + dispType));
-    });
-  }
-}
 
 // Note, ctx here is a Page.js context, not a Vanadium context.
 function main(ctx) {
-  console.assert(!rc);
   var dispType = u.query.d || 'collection';
   var syncbaseName = u.query.n || SYNCBASE_NAME;
   var benchmark = Boolean(u.query.bm);
   var props = {
     initialListId: ctx.params.listId,
     dispType: dispType,
-    syncbaseName: syncbaseName
+    syncbaseName: syncbaseName,
+    benchmark: benchmark
   };
-  initDispatcher(dispType, syncbaseName, benchmark, function(err, resDisp) {
-    if (err) throw err;
-    if (benchmark) return;
-    disp = resDisp;
-    // TODO(sadovsky): initDispatcher with DISP_TYPE_SYNCBASE is slow. We should
-    // show a "loading" message in the UI.
-    render(props);
-  });
+  React.render(Page(props), document.querySelector('#page'));
 }
 
 page('/', main);
diff --git a/browser/mem_collection.js b/browser/mem_collection.js
index 2156dc4..3b2dc16 100644
--- a/browser/mem_collection.js
+++ b/browser/mem_collection.js
@@ -27,7 +27,7 @@
     return that.matches_(v, q);
   });
   if (opts.sort) {
-    // TODO(sadovsky): Eliminate simplifying assumptions.
+    // Note, we make various simplifying assumptions.
     var keys = _.keys(opts.sort);
     console.assert(keys.length === 1);
     var key = keys[0];
@@ -72,7 +72,7 @@
     return that.matches_(v, q);
   });
 
-  // TODO(sadovsky): Eliminate simplifying assumptions.
+  // Note, we make various simplifying assumptions.
   var keys = _.keys(opts);
   console.assert(keys.length === 1);
   var key = keys[0];
diff --git a/browser/syncbase_dispatcher.js b/browser/syncbase_dispatcher.js
index 1c64ccc..e840b44 100644
--- a/browser/syncbase_dispatcher.js
+++ b/browser/syncbase_dispatcher.js
@@ -13,10 +13,10 @@
 // enables us to use simple last-one-wins conflict resolution for all records
 // stored in Syncbase.
 //
-// TODO(sadovsky): Unfortunately, orphaning degrades performance, because scan
-// RPCs (e.g. scan to get all lists) read (and discard) orphaned records. If we
-// switch from scans to queries, performance should improve since all row
-// filtering will happen on the server side.
+// TODO(sadovsky): Orphaning degrades performance, because scan responses (e.g.
+// scan to get all lists) include orphaned records. If we switch from scans to
+// queries, performance should improve since all row filtering will happen
+// server side.
 
 'use strict';
 
@@ -31,7 +31,6 @@
 
 var bm = require('./benchmark');
 var Dispatcher = require('./dispatcher');
-var util = require('./util');
 
 inherits(SyncbaseDispatcher, Dispatcher);
 module.exports = SyncbaseDispatcher;
@@ -115,7 +114,7 @@
     // Drop ctx and cb, convert to JSON, drop square brackets.
     var cb = args[args.length - 1];
     var argsStr = JSON.stringify(args.slice(1, -1)).slice(1, -1);
-    args[args.length - 1] = bm.logLatency(name + '(' + argsStr + ')', cb);
+    args[args.length - 1] = bm.logFn(name + '(' + argsStr + ')', cb);
     return fn.apply(this, args);
   };
 }
@@ -249,7 +248,7 @@
 };
 
 SyncbaseDispatcher.prototype.logTraceRecords = function() {
-  util.log(vtrace.formatTraces(this.getTraceRecords()));
+  console.log(vtrace.formatTraces(this.getTraceRecords()));
 };
 
 // TODO(sadovsky): Watch for changes on Syncbase itself so that we can detect
diff --git a/browser/util.js b/browser/util.js
index 999ca99..0584383 100644
--- a/browser/util.js
+++ b/browser/util.js
@@ -23,20 +23,7 @@
 };
 
 // Returns a string timestamp, useful for logging.
-var timestamp = exports.timestamp = function(t) {
+exports.timestamp = function(t) {
   t = t || Date.now();
   return moment(t).format('HH:mm:ss.SSS');
 };
-
-var LOGGERS = [console.log.bind(console)];
-
-exports.addLogger = function(logger) {
-  LOGGERS.push(logger);
-};
-
-exports.log = function() {
-  var args = [timestamp()].concat(Array.prototype.slice.call(arguments));
-  _.forEach(LOGGERS, function(logger) {
-    logger.apply(null, args);
-  });
-};
diff --git a/package.json b/package.json
index 139877b..026b9ef 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,14 @@
     "react": "^0.13.3"
   },
   "devDependencies": {
+    "autoprefixer": "^5.2.0",
     "browserify": "^10.2.6",
     "browserify-shim": "^3.8.9",
+    "cssnano": "^2.1.0",
     "exorcist": "~0.4.0",
     "jshint": "^2.8.0",
+    "less": "^2.5.1",
+    "postcss-cli": "^1.4.0",
     "uglifyify": "~3.0.1"
   }
 }
diff --git a/public/extras.css b/public/extras.css
deleted file mode 100644
index 2edb974..0000000
--- a/public/extras.css
+++ /dev/null
@@ -1,54 +0,0 @@
-*,
-:before,
-:after {
-  box-sizing: border-box;
-}
-
-.disp-type {
-  position: fixed;
-  top: 0;
-  right: 0;
-  padding: 4px 8px;
-  cursor: pointer;
-  color: white;
-  font-weight: bold;
-  z-index: 1;
-}
-
-/* https://www.google.com/design/spec/style/color.html */
-.disp-type.collection {
-  background-color: #388e3c;
-}
-.disp-type.syncbase {
-  background-color: #673ab7;
-}
-
-#log {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  width: 20px;
-  height: 20px;
-  background-color: #e91e63;
-  font: 400 14px/1.4 monospace;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-#log .msg {
-  display: none;
-}
-
-#log:hover {
-  width: 100%;
-  height: 300px;
-  padding: 16px;
-  background-color: #fff;
-  border-top: 1px solid #000;
-}
-
-#log:hover .msg {
-  display: block;
-}
diff --git a/public/index.css b/public/index.css
deleted file mode 100644
index 7ada0b4..0000000
--- a/public/index.css
+++ /dev/null
@@ -1,266 +0,0 @@
-/* Copy of the original Meteor Todos app CSS file (only slightly modified). */
-
-* {
-  padding: 0;
-  margin: 0;
-}
-
-ul {
-  list-style: none;
-}
-
-html, body {
-  height: 100%;
-}
-
-body {
-  font-size: 16px;
-  line-height: 1.5;
-  background: #eeeeee;
-  color: #333333;
-}
-
-body, input {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-input {
-  font-size: 100%;
-}
-
-a,
-a:visited,
-a:active {
-  color: #258;
-}
-
-h3 {
-  font-weight: bold;
-  text-decoration: underline;
-  font-size: 120%;
-  padding: 8px 6px;
-  text-align: center;
-}
-
-#top-tag-filter, #main-pane, #side-pane, #bottom-pane {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  overflow: hidden;
-}
-
-#top-tag-filter {
-  left: 200px;
-  height: 44px;
-  bottom: auto;
-  background: #ddd;
-  border-bottom: 1px solid #999;
-}
-
-#help {
-  padding: 8px;
-}
-
-#main-pane {
-  top: 45px;
-  bottom: 0;
-  left: 220px;
-  overflow: auto;
-}
-
-#side-pane {
-  width: 200px;
-  right: auto;
-  overflow: auto;
-  background: #eee;
-  border-right: 1px solid #999;
-  background: #ddd;
-}
-
-.tag {
-  cursor: pointer;
-  float: left;
-  margin: 5px;
-  padding: 2px 7px;
-  font-size: 80%;
-  font-weight: bold;
-  background: #999;
-  color: #fff;
-  border-radius: 4px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  -o-border-radius: 4px;
-
-  opacity: 1;
-  transition: opacity 0.3s linear;
-  -moz-transition: opacity 0.3s linear;
-  -webkit-transition: opacity 0.3s linear;
-  -o-transition: opacity 0.3s linear;
-
-  position: relative;
-}
-
-#tag-filter .label {
-  float: left;
-  margin-top: 9px;
-  margin-left: 12px;
-  margin-right: 8px;
-}
-
-#tag-filter .tag {
-  margin-top: 10px;
-  border: 1px solid #777;
-}
-
-#tag-filter .selected {
-  background: #69d;
-}
-
-#tag-filter .count {
-  font-weight: normal;
-  padding-left: 2px;
-}
-
-#lists .list {
-  padding: 3px 6px;
-}
-
-#lists .selected {
-  padding: 2px 6px;
-  background: #9be;
-  font-weight: bold;
-}
-
-#lists .list-name {
-  cursor: pointer;
-  color: black;
-  text-decoration: none;
-}
-
-#createList {
-  padding: 3px 6px;
-  margin-top: 5px;
-}
-
-#createList input {
-  width: 180px;
-}
-
-#new-todo-box {
-  margin-top: 10px;
-  margin-bottom: 10px;
-  margin-left: 60px;
-  margin-right: 20px;
-  font-size: 160%;
-  position: relative;
-  height: 40px;
-}
-
-#new-todo {
-  position: absolute;
-  width: 100%;
-}
-
-#items-view {
-  margin-top: 5px;
-  margin-left: 5px;
-}
-
-#item-list .todo {
-  display: block;
-  height: 50px;
-  position: relative;
-  overflow: hidden;
-  border-top: 1px solid #ccc;
-}
-
-#item-list .todo .destroy {
-  cursor: pointer;
-  position: absolute;
-  left: 5px;
-  top: 15px;
-  height: 20px;
-  width: 20px;
-}
-
-#item-list .todo .display, #item-list .todo .edit {
-  margin-left: 30px;
-  height: 100%;
-  width: auto;
-  float: left;
-  padding-top: 18px;
-  line-height: 1;
-}
-
-#todo-input {
-  width: 300px;
-  position: relative;
-  top: -3px;
-}
-
-#item-list .done .todo-text {
-  text-decoration: line-through;
-  color: #999;
-}
-
-#item-list .todo:hover .destroy {
-  background: url("/public/destroy.png") no-repeat 0 0;
-}
-
-#item-list .todo .destroy:hover {
-  background-position: 0 -20px;
-}
-
-#item-list .todo .item-tags {
-  overflow: auto;
-  float: right;
-  margin-right: 8px;
-}
-
-#item-list .todo .item-tags .tag {
-  margin-top: 15px;
-}
-
-#item-list .todo .item-tags .removable_tag {
-  padding-right: 22px;
-}
-
-#item-list .todo .item-tags .tag .remove {
-  position: absolute;
-  top: 0;
-  right: 4px;
-  bottom: 0;
-  width: 16px;
-  background: url("/public/close_16.png") no-repeat 0 center;
-}
-
-#item-list .todo .item-tags .tag .remove:hover {
-  background-position: -16px center;
-}
-
-#item-list .todo .item-tags div.addtag {
-  background: none;
-  color: #333;
-  border: 1px dashed #999;
-}
-
-#item-list .todo .check {
-  float: left;
-  width: 25px;
-}
-
-#item-list .todo .todo-text {
-  float: left;
-  margin-left: 10px;
-  font-size: 100%;
-}
-
-#item-list .todo .edit input {
-  margin-left: 35px;
-}
-
-#edittag-input {
-  width: 80px;
-}
diff --git a/public/index.html b/public/index.html
index 9cf329c..b76dc6d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,8 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
-    <link rel="stylesheet" href="/public/index.css">
-    <link rel="stylesheet" href="/public/extras.css">
+    <link rel="stylesheet" href="/public/bundle.min.css">
     <link rel="icon" href="about:blank">
     <title>Todos</title>
   </head>
@@ -14,6 +13,7 @@
     <script src="/third_party/async.min.js"></script>
     <script src="/third_party/lodash.min.js"></script>
     <script src="/third_party/moment.min.js"></script>
+    <script src="/third_party/mousetrap.min.js"></script>
     <!--<script src="public/third_party/react.min.js"></script>-->
     <script src="/third_party/react-with-addons.js"></script>
     <script src="/public/bundle.min.js"></script>
diff --git a/stylesheets/constants.less b/stylesheets/constants.less
new file mode 100644
index 0000000..8e996ff
--- /dev/null
+++ b/stylesheets/constants.less
@@ -0,0 +1,3 @@
+/* https://www.google.com/design/spec/style/color.html */
+@color-green-700: #388e3c;
+@color-red-700: #d32f2f;
diff --git a/stylesheets/index.less b/stylesheets/index.less
new file mode 100644
index 0000000..b2b6897
--- /dev/null
+++ b/stylesheets/index.less
@@ -0,0 +1,384 @@
+/* Adapted from the original Meteor Todos app CSS file. */
+
+@import "constants";
+
+*,
+:before,
+:after {
+  box-sizing: border-box;
+}
+
+html {
+  font: 400 16px/1.5 sans-serif;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: #eee;
+  color: #333;
+  margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+
+  &:not(:last-child) {
+    margin-bottom: 1em;
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  &:not(:first-child) {
+    margin-top: 2em;
+  }
+}
+
+p {
+  &:not(:first-child) {
+    margin-top: 1em;
+  }
+}
+
+input {
+  font: inherit;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+/* Pane arrangement ***********************************************************/
+
+#page-pane {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+}
+
+#page-pane, #tags-and-todos-pane {
+  display: flex;
+}
+
+#tags-and-todos-pane {
+  flex-direction: column;
+}
+
+#tags-and-todos-pane, #todos-pane {
+  flex: 1;
+}
+
+#lists-pane {
+  flex: 0 0 240px;
+}
+
+#tags-pane {
+  flex: 0 0 48px;
+}
+
+#todos-pane, #lists-pane, #tags-pane {
+  overflow: auto;
+}
+
+/* Generic classes ************************************************************/
+
+.hcenter {
+  display: flex;
+  justify-content: center;
+}
+
+.vcenter {
+  display: flex;
+  align-items: center;
+}
+
+.loading {
+  padding: 4px 8px;
+}
+
+.tag {
+  display: inline-block;
+  margin-left: 8px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  background-color: #999;
+  color: #fff;
+  font-size: 13px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+/* Lists pane *****************************************************************/
+
+#lists-pane {
+  border-right: 1px solid #999;
+  background-color: #ddd;
+
+  .lists-title {
+    font-weight: bold;
+    text-decoration: underline;
+    font-size: 20px;
+    margin: 8px 0;
+    text-align: center;
+  }
+
+  .list, .new-list {
+    .vcenter;
+    padding: 0 12px;
+    width: 100%;
+    height: 40px;
+  }
+
+  .list{
+    &.selected {
+      background-color: #9be;
+      font-weight: bold;
+    }
+
+    .status {
+      position: relative;
+      display: inline-block;
+      margin-left: -8px;
+      padding: 8px;
+      cursor: pointer;
+
+      .circle {
+	      width: 8px;
+	      height: 8px;
+        border-radius: 50%;
+        background-color: #888;
+      }
+    }
+
+    .list-name {
+      cursor: pointer;
+      color: #000;
+      text-decoration: none;
+    }
+  }
+
+  .new-list input {
+    margin-top: 8px;
+    width: 100%;
+  }
+}
+
+/* Status pane (currently, within #lists-pane) ********************************/
+
+#status-pane {
+  .hcenter;
+  .vcenter;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 0.85);
+  z-index: 10;  /* above everything */
+
+  .status-dialog {
+    position: relative;
+    width: 600px;
+    padding: 32px;
+    background-color: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+
+    .title {
+      font-size: 18px;
+      margin-bottom: 1em;
+    }
+
+    .close {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 6px;
+      background: url("/public/destroy.png") no-repeat 0 0;
+      cursor: pointer;
+      height: 20px;
+      width: 20px;
+
+      &:hover {
+        background-position: 0 -20px;
+      }
+    }
+  }
+}
+
+/* Tags pane ******************************************************************/
+
+#tags-pane {
+  .vcenter;
+  border-bottom: 1px solid #999;
+  background-color: #ddd;
+
+  .label {
+    display: inline-block;
+  }
+
+  .label {
+    margin-left: 16px;
+    margin-right: 8px;
+  }
+
+  .tag {
+    border: 1px solid #666;
+
+    &.selected {
+      background: #69d;
+    }
+  }
+
+  .count {
+    font-weight: normal;
+
+    &:before {
+      content: " ";
+    }
+  }
+}
+
+/* Todos pane *****************************************************************/
+
+#todos-pane {
+  overflow-y: scroll;
+
+  #new-todo {
+    margin: 16px 32px;
+    font-size: 20px;
+
+    input {
+      width: 100%;
+    }
+  }
+
+  #todo-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  #todo-list .todo-row {
+    .vcenter;
+    display: flex;
+    height: 48px;
+    margin: 0 16px;
+    border-top: 1px solid #ccc;
+    overflow: hidden;
+
+    &.edit {
+      .destroy, .checkbox {
+        visibility: hidden;
+      }
+    }
+
+    .destroy {
+      cursor: pointer;
+      height: 20px;
+      width: 20px;
+      margin: 6px;
+    }
+
+    &:hover .destroy {
+      background: url("/public/destroy.png") no-repeat 0 0;
+
+      &:hover {
+        background-position: 0 -20px;
+      }
+    }
+
+    .description {
+      flex: 1;
+      margin-left: 16px;
+    }
+
+    &.done .description {
+      text-decoration: line-through;
+      color: #999;
+    }
+
+    .item-tags {
+      overflow: auto;
+
+      #edittag-input {
+        width: 80px;
+      }
+
+      .tag.removable {
+        position: relative;
+        padding-right: 24px;
+      }
+
+      .remove {
+        position: absolute;
+        top: 0;
+        right: 4px;
+        bottom: 0;
+        width: 16px;
+        background: url("/public/close_16.png") no-repeat 0 center;
+
+        &:hover {
+          background-position: -16px center;
+        }
+      }
+
+      .addtag {
+        margin-right: 8px;
+        border: 1px dashed #999;
+        background-color: transparent;
+        color: #333;
+      }
+    }
+  }
+}
+
+/* Other **********************************************************************/
+
+#log {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 300px;
+  z-index: 2;  /* above .disp-type */
+  padding: 16px;
+  border-top: 1px solid #000;
+  overflow-y: scroll;
+  background-color: #fff;
+  color: #000;
+  font: 400 14px/1.4 monospace;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  transform: translate3d(0, 100%, 0);
+  transition: transform 0.2s ease-out;
+
+  &.visible {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+#disp-type {
+  position: fixed;
+  top: 0;
+  right: 0;
+  padding: 0 16px;
+  color: #fff;
+  cursor: pointer;
+  z-index: 1;
+
+  &.collection {
+    background-color: @color-red-700;
+  }
+
+  &.syncbase {
+    background-color: @color-green-700;
+  }
+}
diff --git a/third_party/mousetrap.min.js b/third_party/mousetrap.min.js
new file mode 100644
index 0000000..291aff8
--- /dev/null
+++ b/third_party/mousetrap.min.js
@@ -0,0 +1,11 @@
+/* mousetrap v1.5.3 craig.is/killing/mice */
+(function(C,r,g){function t(a,b,h){a.addEventListener?a.addEventListener(b,h,!1):a.attachEvent("on"+b,h)}function x(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return l[a.which]?l[a.which]:p[a.which]?p[a.which]:String.fromCharCode(a.which).toLowerCase()}function D(a){var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");return b}function u(a){return"shift"==a||"ctrl"==a||"alt"==a||
+"meta"==a}function y(a,b){var h,c,e,g=[];h=a;"+"===h?h=["+"]:(h=h.replace(/\+{2}/g,"+plus"),h=h.split("+"));for(e=0;e<h.length;++e)c=h[e],z[c]&&(c=z[c]),b&&"keypress"!=b&&A[c]&&(c=A[c],g.push("shift")),u(c)&&g.push(c);h=c;e=b;if(!e){if(!k){k={};for(var m in l)95<m&&112>m||l.hasOwnProperty(m)&&(k[l[m]]=m)}e=k[h]?"keydown":"keypress"}"keypress"==e&&g.length&&(e="keydown");return{key:c,modifiers:g,action:e}}function B(a,b){return null===a||a===r?!1:a===b?!0:B(a.parentNode,b)}function c(a){function b(a){a=
+a||{};var b=!1,n;for(n in q)a[n]?b=!0:q[n]=0;b||(v=!1)}function h(a,b,n,f,c,h){var g,e,l=[],m=n.type;if(!d._callbacks[a])return[];"keyup"==m&&u(a)&&(b=[a]);for(g=0;g<d._callbacks[a].length;++g)if(e=d._callbacks[a][g],(f||!e.seq||q[e.seq]==e.level)&&m==e.action){var k;(k="keypress"==m&&!n.metaKey&&!n.ctrlKey)||(k=e.modifiers,k=b.sort().join(",")===k.sort().join(","));k&&(k=f&&e.seq==f&&e.level==h,(!f&&e.combo==c||k)&&d._callbacks[a].splice(g,1),l.push(e))}return l}function g(a,b,n,f){d.stopCallback(b,
+b.target||b.srcElement,n,f)||!1!==a(b,n)||(b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation?b.stopPropagation():b.cancelBubble=!0)}function e(a){"number"!==typeof a.which&&(a.which=a.keyCode);var b=x(a);b&&("keyup"==a.type&&w===b?w=!1:d.handleKey(b,D(a),a))}function l(a,c,n,f){function e(c){return function(){v=c;++q[a];clearTimeout(k);k=setTimeout(b,1E3)}}function h(c){g(n,c,a);"keyup"!==f&&(w=x(c));setTimeout(b,10)}for(var d=q[a]=0;d<c.length;++d){var p=d+1===c.length?h:e(f||
+y(c[d+1]).action);m(c[d],p,f,a,d)}}function m(a,b,c,f,e){d._directMap[a+":"+c]=b;a=a.replace(/\s+/g," ");var g=a.split(" ");1<g.length?l(a,g,b,c):(c=y(a,c),d._callbacks[c.key]=d._callbacks[c.key]||[],h(c.key,c.modifiers,{type:c.action},f,a,e),d._callbacks[c.key][f?"unshift":"push"]({callback:b,modifiers:c.modifiers,action:c.action,seq:f,level:e,combo:a}))}var d=this;a=a||r;if(!(d instanceof c))return new c(a);d.target=a;d._callbacks={};d._directMap={};var q={},k,w=!1,p=!1,v=!1;d._handleKey=function(a,
+c,e){var f=h(a,c,e),d;c={};var k=0,l=!1;for(d=0;d<f.length;++d)f[d].seq&&(k=Math.max(k,f[d].level));for(d=0;d<f.length;++d)f[d].seq?f[d].level==k&&(l=!0,c[f[d].seq]=1,g(f[d].callback,e,f[d].combo,f[d].seq)):l||g(f[d].callback,e,f[d].combo);f="keypress"==e.type&&p;e.type!=v||u(a)||f||b(c);p=l&&"keydown"==e.type};d._bindMultiple=function(a,b,c){for(var d=0;d<a.length;++d)m(a[d],b,c)};t(a,"keypress",e);t(a,"keydown",e);t(a,"keyup",e)}var l={8:"backspace",9:"tab",13:"enter",16:"shift",17:"ctrl",18:"alt",
+20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},p={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},A={"~":"`","!":"1","@":"2","#":"3",$:"4","%":"5","^":"6","&":"7","*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},z={option:"alt",command:"meta","return":"enter",
+escape:"esc",plus:"+",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},k;for(g=1;20>g;++g)l[111+g]="f"+g;for(g=0;9>=g;++g)l[g+96]=g;c.prototype.bind=function(a,b,c){a=a instanceof Array?a:[a];this._bindMultiple.call(this,a,b,c);return this};c.prototype.unbind=function(a,b){return this.bind.call(this,a,function(){},b)};c.prototype.trigger=function(a,b){if(this._directMap[a+":"+b])this._directMap[a+":"+b]({},a);return this};c.prototype.reset=function(){this._callbacks={};this._directMap=
+{};return this};c.prototype.stopCallback=function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")||B(b,this.target)?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable};c.prototype.handleKey=function(){return this._handleKey.apply(this,arguments)};c.init=function(){var a=c(r),b;for(b in a)"_"!==b.charAt(0)&&(c[b]=function(b){return function(){return a[b].apply(a,arguments)}}(b))};c.init();C.Mousetrap=c;"undefined"!==typeof module&&module.exports&&(module.exports=
+c);"function"===typeof define&&define.amd&&define(function(){return c})})(window,document);
diff --git a/tools/get_third_party_scripts.sh b/tools/get_third_party_scripts.sh
index 2c7350e..ac21c5d 100755
--- a/tools/get_third_party_scripts.sh
+++ b/tools/get_third_party_scripts.sh
@@ -14,5 +14,6 @@
 get async.min.js https://raw.githubusercontent.com/caolan/async/master/dist/async.min.js
 get lodash.min.js https://raw.githubusercontent.com/lodash/lodash/3.10.0/lodash.min.js
 get moment.min.js https://raw.githubusercontent.com/moment/moment/2.10.3/min/moment.min.js
+get mousetrap.min.js https://raw.githubusercontent.com/ccampbell/mousetrap/1.5.3/mousetrap.min.js
 get react.min.js https://fb.me/react-0.13.3.min.js
 get react-with-addons.js https://fb.me/react-with-addons-0.13.3.js