diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..749f333
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,8 @@
+The MIT License (MIT)
+Copyright (c) 2013-2015 Asana
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README b/README
index 169be64..a979e29 100644
--- a/README
+++ b/README
@@ -4,11 +4,10 @@ integrates Asana into your web experience in the following ways:
 
   * Creates a button in your button-bar which, when clicked, pops up a
     QuickAdd window to create a new task associated with the current web page.
-    It will populate the task name with the page title by default, and
-    put the URL in the notes, along with any text you may have selected
-    when you pressed the button.
+    You can click a button to populate the task name with the page title and
+    the URL and current selected text in the notes.
 
-  * Installs the special Asana TAB+Q keyboard shortcut. When this key combo
+  * Installs the special Asana ALT+A keyboard shortcut. When this key combo
     is pressed from any web page, it brings up the same popup.
     This functionality will operate on any window opened after the extension
     is loaded.
diff --git a/api_bridge.js b/api_bridge.js
index 38b2286..1e9da67 100644
--- a/api_bridge.js
+++ b/api_bridge.js
@@ -1,14 +1,13 @@
 /**
  * Functionality to communicate with the Asana API. This should get loaded
  * in the "server" portion of the chrome extension because it will make
- * HTTP requests and needs cross-domain priveleges.
+ * HTTP requests and needs cross-domain privileges.
  *
  * The bridge does not need to use an auth token to connect to
- * the API, because since it is a browser extension it can access
- * the user's cookies, and can use them to authenticate to the API.
- * This capability is specific to browser extensions, and other
- * types of applications would have to obtain an auth token to communicate
- * with the API.
+ * the API. Since it is a browser extension it can access the user's cookies
+ * and can use them to authenticate to the API. This capability is specific
+ * to browser extensions, and other types of applications would have to obtain
+ * an auth token to communicate with the API.
  */
 Asana.ApiBridge = {
 
@@ -17,6 +16,26 @@ Asana.ApiBridge = {
    */
   API_VERSION: "1.0",
 
+  /**
+   * @type {Integer} How long an entry stays in the cache.
+   */
+  CACHE_TTL_MS: 15 * 60 * 1000,
+
+  /**
+   * @type {Boolean} Set to true on the server (background page), which will
+   *     actually make the API requests. Clients will just talk to the API
+   *     through the ExtensionServer.
+   *
+   */
+  is_server: false,
+
+  /**
+   * @type {dict} Map from API path to cache entry for recent GET requests.
+   *     date {Date} When cache entry was last refreshed
+   *     response {*} Cached request.
+   */
+  _cache: {},
+
   /**
    * @param opt_options {dict} Options to use; if unspecified will be loaded.
    * @return {String} The base URL to use for API requests.
@@ -37,9 +56,64 @@ Asana.ApiBridge = {
    *     data {dict} Object representing response of API call, depends on
    *         method. Only available if response was a 200.
    *     error {String?} Error message, if there was a problem.
+   * @param options {dict?}
+   *     miss_cache {Boolean} Do not check cache before requesting
    */
-  request: function(http_method, path, params, callback) {
-    var url = this.baseApiUrl() + path;
+  request: function(http_method, path, params, callback, options) {
+    var me = this;
+    http_method = http_method.toUpperCase();
+
+    // If we're not the server page, send a message to it to make the
+    // API request.
+    if (!me.is_server) {
+      console.info("Client API Request", http_method, path, params);
+      chrome.runtime.sendMessage({
+        type: "api",
+        method: http_method,
+        path: path,
+        params: params,
+        options: options || {}
+      }, callback);
+      return;
+    }
+
+    console.info("Server API Request", http_method, path, params);
+
+    // Serve from cache first.
+    if (!options.miss_cache && http_method === "GET") {
+      var data = me._readCache(path, new Date());
+      if (data) {
+        console.log("Serving request from cache", path);
+        callback(data);
+        return;
+      }
+    }
+
+    // Be polite to Asana API and tell them who we are.
+    var manifest = chrome.runtime.getManifest();
+    var client_name = [
+      "chrome-extension",
+      chrome.i18n.getMessage("@@extension_id"),
+      manifest.version,
+      manifest.name
+    ].join(":");
+
+    var url = me.baseApiUrl() + path;
+    var body_data;
+    if (http_method === "PUT" || http_method === "POST") {
+      // POST/PUT request, put params in body
+      body_data = {
+        data: params,
+        options: { client_name: client_name }
+      };
+    } else {
+      // GET/DELETE request, add params as URL parameters.
+      var url_params = Asana.update({ opt_client_name: client_name }, params);
+      url += "?" + $.param(url_params);
+    }
+
+    console.log("Making request to API", http_method, url);
+
     chrome.cookies.get({
       url: url,
       name: 'ticket'
@@ -59,10 +133,14 @@ Asana.ApiBridge = {
         url: url,
         timeout: 30000,   // 30 second timeout
         headers: {
-          "X-Requested-With": "XMLHttpRequest"
+          "X-Requested-With": "XMLHttpRequest",
+          "X-Allow-Asana-Client": "1"
         },
         accept: "application/json",
         success: function(data, status, xhr) {
+          if (http_method === "GET") {
+            me._writeCache(path, data, new Date());
+          }
           callback(data);
         },
         error: function(xhr, status, error) {
@@ -80,7 +158,7 @@ Asana.ApiBridge = {
             }
             callback(response);
           } else {
-            callback({ error: error || status });
+            callback({ errors: [{message: error || status }]});
           }
         },
         xhrFields: {
@@ -88,12 +166,27 @@ Asana.ApiBridge = {
         }
       };
       if (http_method === "POST" || http_method === "PUT") {
-        attrs.data = JSON.stringify({data: params});
+        attrs.data = JSON.stringify(body_data);
         attrs.dataType = "json";
         attrs.processData = false;
         attrs.contentType = "application/json";
       }
       $.ajax(attrs);
     });
+  },
+
+  _readCache: function(path, date) {
+    var entry = this._cache[path];
+    if (entry && entry.date >= date - this.CACHE_TTL_MS) {
+      return entry.response;
+    }
+    return null;
+  },
+
+  _writeCache: function(path, response, date) {
+    this._cache[path] = {
+      response: response,
+      date: date
+    };
   }
 };
diff --git a/asana.js b/asana.js
index 719d6b7..a4d1d41 100644
--- a/asana.js
+++ b/asana.js
@@ -1,4 +1,68 @@
 /**
  * Define the top-level Asana namespace.
  */
-Asana = {};
\ No newline at end of file
+Asana = {
+
+  // When popping up a window, the size given is for the content.
+  // When resizing the same window, the size must include the chrome. Sigh.
+  CHROME_TITLEBAR_HEIGHT: 24,
+  // Natural dimensions of popup window. The Chrome popup window adds 10px
+  // bottom padding, so we must add that as well when considering how tall
+  // our popup window should be.
+  POPUP_UI_HEIGHT: 310 + 10,
+  POPUP_UI_WIDTH: 410,
+  // Size of popup when expanded to include assignee list.
+  POPUP_EXPANDED_UI_HEIGHT: 310 + 10 + 129,
+
+  // If the modifier key is TAB, amount of time user has from pressing it
+  // until they can press Q and still get the popup to show up.
+  QUICK_ADD_WINDOW_MS: 5000
+
+
+};
+
+/**
+ * Things borrowed from asana library.
+ */
+
+
+Asana.update = function(to, from) {
+  for (var k in from) {
+    to[k] = from[k];
+  }
+  return to;
+};
+
+Asana.Node = {
+
+  /**
+   * Ensures that the bottom of the element is visible. If it is not then it
+   * will be scrolled up enough to be visible.
+   *
+   * Note: this does not take account of the size of the window. That's ok for
+   * now because the scrolling element is not the top-level element.
+   */
+  ensureBottomVisible: function(node) {
+    var el = $(node);
+    var pos = el.position();
+    var element_from_point = document.elementFromPoint(
+        pos.left, pos.top + el.height());
+    if (element_from_point === null ||
+        $(element_from_point).closest(node).size() === 0) {
+      node.scrollIntoView(/*alignWithTop=*/ false);
+    }
+  }
+
+};
+
+if (!RegExp.escape) {
+  // Taken from http://simonwillison.net/2006/Jan/20/escape/
+  RegExp.escape = function(text, opt_do_not_escape_spaces) {
+    if (opt_do_not_escape_spaces !== true) {
+      return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&"); // nolint
+    } else {
+      // only difference is lack of escaping \s
+      return text.replace(/[-[\]{}()*+?.,\\^$|#]/g, "\\$&"); // nolint
+    }
+  };
+}
diff --git a/background.html b/background.html
deleted file mode 100644
index ea54961..0000000
--- a/background.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<html>
-<head>
-	<script src="asana.js"></script>
-	<script src="api_bridge.js"></script>
-	<script src="extension_server.js"></script>
-    <script src="options.js"></script>
-	<script>
-
-    Asana.ExtensionServer.listen();
-
-  </script>
-</head>
-</html>
\ No newline at end of file
diff --git a/background.js b/background.js
new file mode 100644
index 0000000..fb62544
--- /dev/null
+++ b/background.js
@@ -0,0 +1,26 @@
+Asana.ExtensionServer.listen();
+Asana.ServerModel.startPrimingCache();
+
+// Modify referer header sent to typekit, to allow it to serve to us.
+// See http://stackoverflow.com/questions/12631853/google-chrome-extensions-with-typekit-fonts
+chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
+  var requestHeaders = details.requestHeaders;
+  for (var i = 0; i < requestHeaders.length; ++i) {
+    if (requestHeaders[i].name.toLowerCase() === 'referer') {
+      // The request was certainly not initiated by a Chrome extension...
+      return;
+    }
+  }
+  // Set Referer
+  requestHeaders.push({
+    name: 'referer',
+    // Host must match the domain in our Typekit kit settings
+    value: 'https://abkfopjdddhbjkiamjhkmogkcfedcnml'
+  });
+  return {
+    requestHeaders: requestHeaders
+  };
+}, {
+  urls: ['*://use.typekit.net/*'],
+  types: ['stylesheet', 'script']
+}, ['requestHeaders','blocking']);
diff --git a/extension_server.js b/extension_server.js
index eaeb190..5d74ce3 100644
--- a/extension_server.js
+++ b/extension_server.js
@@ -9,22 +9,19 @@ Asana.ExtensionServer = {
    * requests from page clients, which can't make cross-domain requests.
    */
   listen: function() {
-    var self = this;
-    chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
+    var me = this;
+
+    // Mark our Api Bridge as the server side (the one that actually makes
+    // API requests to Asana vs. just forwarding them to the server window).
+    Asana.ApiBridge.is_server = true;
+
+    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
       if (request.type === "api") {
         // Request to the API. Pass it on to the bridge.
-        Asana.ApiBridge.api(
-            request.method, request.path, request.data || {}, sendResponse);
-
-      } else if (request.type === "quick_add") {
-        // QuickAdd request, made from a content window.
-        // Open up a new popup, and set the request information on its window
-        // (see popup.html for how it's used)
-        var popup = window.open(
-            chrome.extension.getURL('popup.html') + '?external=true',
-            "asana_quick_add",
-            "dependent=1,resizable=0,location=0,menubar=0,status=0,toolbar=0,width=410,height=310");
-        popup.quick_add_request = request;
+        Asana.ApiBridge.request(
+            request.method, request.path, request.params, sendResponse,
+            request.options || {});
+        return true;  // will call sendResponse asynchronously
       }
     });
   }
diff --git a/icon128.png b/icon128.png
index f08c0e3..b7c3889 100644
Binary files a/icon128.png and b/icon128.png differ
diff --git a/icon16.png b/icon16.png
new file mode 100644
index 0000000..8378423
Binary files /dev/null and b/icon16.png differ
diff --git a/icon19.png b/icon19.png
deleted file mode 100644
index b85547a..0000000
Binary files a/icon19.png and /dev/null differ
diff --git a/icon48.png b/icon48.png
new file mode 100644
index 0000000..00ed2f0
Binary files /dev/null and b/icon48.png differ
diff --git a/manifest.json b/manifest.json
index e67fc44..49e8e72 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,43 +1,34 @@
 {
-  "manifest_version": 2,
-  "name": "Asana Extension for Chrome",
-  "version": "0.9.1",
-  "description": "Integrates Asana with your browsing experience.",
-  "icons": {
-    "128": "icon128.png"
-  },
-  "minimum_chrome_version": "16",
-
-  "browser_action": {
-    "default_icon": "icon19.png",
-    "default_title": "Asana",
-    "default_popup": "popup.html"
-  },
-  "background": {
-    "page": "background.html"
-  },
-  "options_page": "options.html",
-  "permissions": [
-    "tabs",
-    "*://*/*",
-    "cookies",
-    "*://*.asana.com/*",
-    "*://localhost.org/*"
-  ],
-
-  "content_scripts": [{
-    "matches": [
-      "<all_urls>"
-    ],
-    "exclude_matches": [
-      "*://*.asana.com/*"
-    ],
-    "js": [
-      "asana.js",
-      "selection_client.js",
-      "quick_add_client.js"
-    ],
-    "run_at": "document_start",
-    "all_frames": false
-  }]
+   "background": {
+      "persistent": true,
+      "scripts": [ "jquery-1.7.1.min.js", "asana.js", "api_bridge.js", "extension_server.js", "server_model.js", "options.js", "background.js" ]
+   },
+   "browser_action": {
+      "default_icon": "icon48.png",
+      "default_popup": "popup.html",
+      "default_title": "Asana"
+   },
+   "commands": {
+      "_execute_browser_action": {
+         "suggested_key": {
+            "default": "Alt+Shift+A"
+         }
+      }
+   },
+   "content_security_policy": "script-src 'self'; object-src 'self'",
+   "description": "Quickly add tasks to Asana from any web page.",
+   "icons": {
+      "128": "icon128.png",
+      "16": "icon16.png",
+      "48": "icon48.png"
+   },
+   "incognito": "split",
+   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4sI7XDofuEsAUZM1sM8mT0DSprcta07RgHfxG1PDJm5WJv5WmF6STIyE4xkSZY42UI+Ogei/YZeG4F7VWiB5k5pMLbktMoKE8GZRzD5/Jpyx9W7F7auYct1Pqf35wdC1atN7bVwxnsAK/KNXQvSI7kW3JUqGGg4wSGW4ADbJaYwIDAQAB",
+   "manifest_version": 2,
+   "minimum_chrome_version": "25",
+   "name": "Asana Extension for Chrome",
+   "offline_enabled": false,
+   "permissions": [ "activeTab", "cookies", "webRequest", "webRequestBlocking", "*://*.asana.com/*" ],
+   "update_url": "https://clients2.google.com/service/update2/crx",
+   "version": "1.2.0"
 }
diff --git a/nopicture.png b/nopicture.png
new file mode 100644
index 0000000..be98f2a
Binary files /dev/null and b/nopicture.png differ
diff --git a/common.css b/options.css
similarity index 71%
rename from common.css
rename to options.css
index 7c816a7..337d8b7 100644
--- a/common.css
+++ b/options.css
@@ -1,3 +1,4 @@
+/* Common styles? */
 body, td, div {
   font-size: 14px;
   font-family: "Helvetica Neue", Arial, sans-serif;
@@ -5,8 +6,8 @@ body, td, div {
 }
 
 .close-x {
+  display: block;
   cursor: pointer;
-  float: right;
   width: 14px;
   height: 14px;
   background-image: url(sprite.png);
@@ -75,4 +76,60 @@ a:link, a:visited {
 }
 a:hover {
   text-decoration: underline;
+}
+
+
+
+/* Styles for options.html */
+body {
+  padding: 0;
+  margin: 0;
+  background-color: #DDE4EA;
+}
+body, td, div {
+  font-size: 13px;
+}
+
+#layout {
+  width: 100%;
+}
+#options {
+  width: 600px;
+  min-width: 600px;
+  max-width: 600px;
+}
+
+#status {
+  height: 30px;
+}
+
+.v-spacer {
+  height: 100px;
+}
+.form {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+td.field-name {
+    width: 150px;
+    padding: 2px 2px 2px 0;
+    vertical-align: top;
+}
+td.field-value {
+    padding: 2px 0 2px 2px;
+    vertical-align: top;
+}
+td.field-notes {
+    font-size: 11px;
+    margin-top: 12px;
+    padding: 2px 0 2px 2px;
+    vertical-align: top;
+}
+td.field-spacer {
+    height: 12px;
+}
+
+#reset_button {
+    margin-left: 10px;
 }
\ No newline at end of file
diff --git a/options.html b/options.html
index e44be0a..fdede4a 100644
--- a/options.html
+++ b/options.html
@@ -1,4 +1,13 @@
 <html>
+<!--
+This page is no longer in use.
+
+To enable it, simply add the following line to the top level dict
+in manifest.json:
+
+  "options_page": "options.html",
+
+-->
 <head><title>Asana Options</title>
 <script type="text/javascript" src="asana.js"></script>
 <script type="text/javascript" src="options.js"></script>
@@ -6,8 +15,7 @@
 <script type="text/javascript" src="api_bridge.js"></script>
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 <script type="text/javascript" src="jquery-ui-1.8.10.custom.min.js"></script>
-<link rel="stylesheet" href="common.css"/>
-<link rel="stylesheet" href="options_style.css"/>
+<link rel="stylesheet" href="options.css"/>
 <script type="text/javascript" src="options_page.js"></script>
 </head>
 
@@ -19,22 +27,6 @@
   <td id="options">
 
   <table class="form">
-    <tr>
-      <td class="field-name">Default Workspace:</td>
-      <td class="field-value">
-        <div id="domains_group">Loading...</div>
-      </td>
-    </tr>
-    <tr>
-      <td class="field-name"></td>
-      <td class="field-notes">
-        The default workspace where new tasks are added. You can always select
-        a different workspace when you're creating a task.
-      </td>
-    </tr>
-
-    <tr><td colspan="2" class="field-spacer"></td></tr>
-
     <tr>
       <td class="field-name">Asana Host:</td>
       <td class="field-value">
diff --git a/options.js b/options.js
index 3ad9b54..e2f10c7 100644
--- a/options.js
+++ b/options.js
@@ -23,6 +23,14 @@ Asana.Options = {
     return 'https://' + options.asana_host_port + '/';
   },
 
+  /**
+   * @param opt_options {dict} Options to use; if unspecified will be loaded.
+   * @return {String} The URL for the signup page.
+   */
+  signupUrl: function(opt_options) {
+    return 'http://asana.com/?utm_source=chrome&utm_medium=ext&utm_campaign=ext';
+  },
+
   /**
    * @return {dict} Default options.
    */
diff --git a/options_style.css b/options_style.css
deleted file mode 100644
index fe382ed..0000000
--- a/options_style.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/* Styles for options.html */
-body {
-  padding: 0;
-  margin: 0;
-  background-color: #DDE4EA;
-}
-body, td, div {
-  font-size: 13px;
-}
-
-#layout {
-  width: 100%;
-}
-#options {
-  width: 600px;
-  min-width: 600px;
-  max-width: 600px;
-}
-
-#status {
-  height: 30px;
-}
-
-.v-spacer {
-  height: 100px;
-}
-.form {
-    border: 0;
-    margin: 0;
-    padding: 0;
-}
-td.field-name {
-    width: 150px;
-    padding: 2px 2px 2px 0;
-    vertical-align: top;
-}
-td.field-value {
-    padding: 2px 0 2px 2px;
-    vertical-align: top;
-}
-td.field-notes {
-    font-size: 11px;
-    margin-top: 12px;
-    padding: 2px 0 2px 2px;
-    vertical-align: top;
-}
-td.field-spacer {
-    height: 12px;
-}
-
-#reset_button {
-    margin-left: 10px;
-}
\ No newline at end of file
diff --git a/popup.css b/popup.css
new file mode 100644
index 0000000..8538bd8
--- /dev/null
+++ b/popup.css
@@ -0,0 +1,644 @@
+/* Styles for popup.html */
+
+/* Fonts */
+
+@font-face {
+  font-family: 'proxima-nova';
+  src: url("https://app.asana.com/-/static/apps/asana/media/fonts/proxima-nova/ProximaNova-ThinWeb.woff") format('woff');
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'proxima-nova';
+  src: url("https://app.asana.com/-/static/apps/asana/media/fonts/proxima-nova/ProximaNova-RegWeb.woff") format('woff');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'proxima-nova';
+  src: url("https://app.asana.com/-/static/apps/asana/media/fonts/proxima-nova/ProximaNova-SboldWeb.woff") format('woff');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'proxima-nova';
+  src: url("https://app.asana.com/-/static/apps/asana/media/fonts/proxima-nova/ProximaNova-BoldWeb.woff") format('woff');
+  font-weight: 700;
+}
+
+
+/* Common widgets, from Asana app */
+
+.buttonView {
+  -webkit-box-align: center;
+  -webkit-box-pack: center;
+  -webkit-box-sizing: border-box;
+  align-items: center;
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  cursor: pointer;
+  display: inline-flex;
+  flex-shrink: 0;
+  font-size: 14px;
+  min-width: 60px;
+  transition: background 200ms,border 200ms,box-shadow 200ms,color 200ms;
+}
+
+.buttonView:focus, .buttonView:hover {
+  outline: none;
+}
+
+.buttonView.buttonView--primary {
+  background: #1AAFD0;
+  border-color: #1AAFD0;
+  color: #fff;
+}
+
+.buttonView.buttonView--primary.is-disabled {
+  -webkit-box-shadow: inset 0 0 transparent,0 0 0 0 transparent;
+  background: #EFF0F1;
+  border: 1px solid #E1E2E4;
+  color: #898E95;
+  fill: #898E95;
+  cursor: default;
+}
+
+.buttonView.buttonView--primary:focus:not(.is-disabled),
+.buttonView.buttonView--primary:hover:not(.is-disabled) {
+  background: #02ceff;
+  border-color: #02ceff;
+  -webkit-box-shadow: inset 0 0 transparent,0 0 0 3px #80E6FF;
+}
+
+.buttonView.buttonView--primary:active:not(.is-disabled) {
+  -webkit-box-shadow: inset 0 1px rgba(0,0,0,0.2),0 0 0 0 transparent;
+}
+
+.buttonView.buttonView--large {
+  height: 40px;
+  padding: 0 15px;
+}
+
+.Avatar {
+  -webkit-box-align: center;
+  -webkit-box-pack: center;
+  align-items: center;
+  background: center/cover #cdcfd2;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
+  box-sizing: border-box;
+  color: #fff;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+  vertical-align: top;
+}
+
+.Avatar--small {
+  font-size: 12px;
+  height: 24px;
+  width: 24px;
+}
+
+.Avatar--inbox {
+  font-size: 12px;
+  height: 30px;
+  width: 30px;
+}
+
+.generic-input {
+  -webkit-border-radius: 3px 3px 3px 3px;
+  -webkit-box-sizing: border-box;
+  border: 1px solid #CDCFD2;
+  color: #1B2432;
+  display: inline-block;
+}
+.generic-input:hover {
+  border-color: #A1A4AA;
+  transition: border-color 150ms;
+}
+.generic-input:focus {
+  -webkit-box-shadow: inset 0 1px #E1E2E4;
+  animation: input-outline-glow 0.5s ease-out 75ms;
+  outline: none;
+  border-color: #A1A4AA;
+}
+
+.tokenAreaView {
+  background: #fff;
+  cursor: text;
+  padding: 5px 0 0 5px;
+  min-width: 100px;
+}
+
+.tokenView {
+  background: #E8F7FB;
+  border-color: #80E6FF;
+  color: #1AAFD0;
+
+  -webkit-box-align: center;
+  align-items: center;
+  -ms-flex-align: center;
+  border: 1px solid;
+  border-radius: 15px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  height: 30px;
+  padding-left: 15px;
+  position: relative;
+}
+.tokenView:hover {
+  background: #E8F7FB;
+  border-color: #02ceff;
+  color: #02ceff;
+  transition: background .15s,border .15s,color .15s,fill .15s;
+}
+.tokenView:focus {
+  background: #02ceff;
+  border-color: #02ceff;
+  color: #fff;
+  fill: #fff;
+  outline:none;
+}
+.tokenAreaView .tokenView {
+  margin: 0 5px 5px 0;
+}
+
+.tokenView-label {
+  -webkit-box-align: center;
+  align-items: center;
+  display: flex;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tokenView-label .tokenView-labelText {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.tokenView-remove {
+  -webkit-box-align: center;
+  -webkit-box-sizing: border-box;
+  align-items: center;
+  border-radius: 50%;
+  display: inline-flex;
+  fill: #B9BCC0;
+  height: 16px;
+  -webkit-box-pack: center;
+  justify-content: center;
+  margin: 0 5px;
+  padding: 3px;
+  width: 16px;
+}
+.tokenView .tokenView-remove {
+  fill: #80E6FF;
+}
+.tokenView:focus .tokenView-remove {
+  fill: #fff;
+}
+.tokenView .tokenView-remove:hover {
+  fill: #fff;
+  background: #80E6FF;
+}
+
+.photo-view {
+  -webkit-box-sizing: border-box;
+  display: inline-block;
+}
+.photo-view.small {
+  height: 24px;
+  width: 24px;
+}
+.photo-view.inbox {
+  height: 30px;
+  width: 30px;
+}
+
+.tokenView-photo {
+  margin-left: -13px;
+  margin-right: 5px;
+}
+
+.tokenAreaView .token-input {
+  -webkit-box-sizing: border-box;
+  -webkit-box-shadow: none;
+  border: none;
+  color: #1B2432;
+  height: 30px;
+  line-height: 30px;
+  margin-bottom: 5px;
+  overflow: hidden;
+  padding-left: 2px;
+  resize: none;
+  vertical-align: top;
+}
+
+.svgIcon {
+  height: 16px;
+  width: 16px;
+}
+
+
+.close-x {
+  display: block;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  margin: 8px 0px 0px -4px;
+  background-position: -175px 0px;
+}
+.close-x:hover {
+  background-position: -175px -25px;
+}
+
+.svgIcon-dropdownarrow {
+  width: 16px;
+  height: 16px;
+  fill: #898E95;
+}
+.svgIcon-dropdownarrow:hover {
+  fill: #80E6FF;
+}
+
+
+a:link, a:visited {
+  color: #1AAFD0;
+  cursor: pointer;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+
+::-webkit-scrollbar{
+  width: 14px;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(0,0,0,.05);
+  box-shadow: inset 0px -1px rgba(0,0,0,.12);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(0,0,0, .08);
+}
+
+::-webkit-scrollbar-track {
+  background-color: rgba(0,0,0, .05);
+}
+
+textarea::-webkit-scrollbar {
+  width: 7px;
+  background: #E5F1FF;
+}
+textarea::-webkit-scrollbar-thumb {
+  background: rgba(116, 193, 237, 0.3);
+}
+textarea::-webkit-scrollbar-thumb:hover {
+  background: rgba(116, 193, 237, 0.5);
+}
+
+
+/* Popup-specific layout */
+
+body {
+  overflow: hidden;
+  /* Also affects Asana.POPUP_UI_WIDTH and Asana.POPUP_UI_HEIGHT */
+  width: 410px;
+  height: 310px;  /* keep this correct for the window-based (non-button) version */
+  padding: 0px;
+  margin: 0px;
+  background-color: #fff;
+  font-size: 14px;
+  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
+}
+
+a, input, textarea {
+  outline: none;
+}
+
+.sprite {
+  background-image: url('./sprite.png');
+  background-repeat: no-repeat;
+  display: inline-block;
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+	.sprite {
+    background-image: url('./sprite-retina.png');
+    background-size: 250px 75px;
+  }
+}
+
+.left-column {
+  display: inline-block;
+  margin-left: 12px;
+  width: 24px;
+  height: 24px;
+  vertical-align: middle;
+}
+.middle-column {
+  display: inline-block;
+  width: 304px;
+  padding: 0 8px 0 8px;
+  vertical-align: middle;
+}
+.right-column {
+  display: inline-block;
+  margin-right: 8px;
+  margin-left: 4px;
+  width: 30px;
+  height: 30px;
+  vertical-align: middle;
+  text-align: center;
+}
+
+.left-column .sprite {
+  margin-top: 3px;
+  height: 18px;
+  width: 24px;
+}
+
+/* Popup areas */
+
+.banner {
+  font-size: 19px;
+  font-weight: 600;
+  background-color:#f2f2f2;
+  color: #596573;
+  text-shadow: 0px 1px #fff;
+  border-bottom: 1px solid #c0ccd7;
+  -webkit-border-radius: 1px 1px 0px 0px;
+  background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(100%, #edf1f4));
+}
+
+.notes-row .left-column, .notes-row .middle-column, .notes-row .right-column,
+.assignee-row .left-column, .assignee-row .middle-column, .assignee-row .right-column {
+  vertical-align: top;
+}
+
+.banner .middle-column {
+  line-height: 46px;
+  padding-top: 2px;
+}
+
+.banner .button {
+  height: 26px;
+  width: 26px;
+  border: 1px solid #c0ccd7;
+  box-shadow: 0px 1px 0px 0px white;
+  padding: 0;
+}
+
+.banner-add {
+  position: relative;
+}
+
+.banner-add #workspace {
+  font-weight: 200;
+}
+
+.icon-checkbox {
+  background-position: -25px 0px;
+}
+
+.sprite.icon-notes {
+  margin-top: 5px;
+  background-position: -50px 0px;
+}
+
+.sprite.icon-assignee {
+  margin-top: 12px;
+  background-position: -75px 0px;
+}
+
+#workspace_select_container {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 100%;
+}
+
+#workspace_select {
+  opacity: 0;
+  position: absolute;
+  right: 0px;
+  top: -4px;
+  padding: 8px 0px;
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.name-row {
+  padding-top: 11px;
+  padding-bottom: 12px;
+}
+
+.name-row .left-column .sprite { margin-top: 2px; }
+
+#name_input, #notes_input, #assignee {
+  width: 100%;
+}
+
+.name-row #name_input {
+  font-size: 20px;
+}
+
+.notes-row {
+  border-bottom: 1px solid #e5e5e5;
+  padding-bottom: 8px;
+}
+
+.assignee-row {
+  padding-top: 12px;
+}
+
+.notes-row #notes_input {
+  resize: none;
+  height: 96px;
+}
+
+#use_page_details {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  padding: 5px 2px 3px 6px;
+  cursor: pointer;
+}
+
+#use_page_details:not(.disabled):hover {
+  border: 1px solid #e5e5e5;
+}
+
+#use_page_details.disabled {
+  opacity: .25;
+  cursor: default;
+}
+
+#use_page_details:not(.disabled):hover .icon-use-link-arrow {
+  background-position: -225px -25px;
+}
+
+.icon-use-link {
+  height: 16px;
+  width: 16px;
+  background-size: 16px 16px;
+}
+
+.icon-use-link.no-favicon {
+  height: 18px;
+  width: 18px;
+  background-position: -200px 0px;
+  background-size: auto auto;
+}
+
+#use_page_details:not(.disabled):hover .icon-use-link.no-favicon {
+  background-position: -200px -25px;
+}
+
+.icon-use-link-arrow {
+  height: 18px;
+  width: 18px;
+  background-position: -225px 0px;
+  position: absolute;
+  top: 7px;
+  left: 3px;
+}
+
+#assignee {
+  font-weight: 600;
+}
+
+#assignee .unassigned {
+  color: #a9a9a9;
+  font-weight: normal;
+}
+
+.user {
+  height: 32px;
+  font-size: 14px;
+  padding: 8px 0 8px 54px;
+  cursor: pointer;
+}
+
+.user.selected {
+  background-color: #1AAFD0;
+  color: white;
+}
+
+.user .Avatar {
+  vertical-align: middle;
+  margin-right: 10px;
+}
+
+.user-name {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: 3px;
+}
+
+#assignee_list_container {
+  /* Also affects Asana.POPUP_EXPANDED_UI_HEIGHT */
+  height: 121px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  border-bottom: 1px solid #e5e5e5;
+  margin-top: 8px;
+}
+
+.buttons {
+  padding: 14px 0 0 0;
+}
+
+.footer {
+  padding: 14px 0 0 0;
+}
+
+.footer-status {
+  width: 100%;
+  color: #1B2432;
+  display: inline-block;
+  vertical-align: middle;
+  padding: 12px 16px;
+  font-size: 14px;
+  line-height: 17px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.footer-status a {
+  font-weight: 600;
+  text-decoration: none;
+  color: #5998c0;
+}
+
+#success {
+  background-color: #fff;
+}
+
+#error {
+  background-color: #FD9A00;
+  color: #fff;
+}
+
+#login_view {
+  width: 100%;
+  height: 100%;
+  background-color: #edf1f4;
+}
+
+#login_view .content {
+  padding-top: 65px;
+  width: 250px;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 19px;
+  font-weight: 400;
+  color: #596573;
+}
+
+#login_view .buttonView {
+  margin-top: 24px;
+}
+
+#login_view #signup_button {
+  margin-right: 8px;
+}
+
+.icon-success, .icon-error {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: top;
+  margin-right: 3px;
+}
+
+.icon-success { background-position: -100px 0px; }
+.icon-error { background-position: -125px 0px; margin-right: 7px; }
+
+input, textarea, #assignee {
+  color: #212F40;
+  padding: 6px 5px;
+  border: 1px solid transparent;
+  -webkit-border-radius: 3px;
+  font-size: 14px;
+  font-family: proxima-nova, "Helvetica Neue", Arial, sans-serif;
+  margin: 0;
+}
+
+input:hover, textarea:hover, #assignee:hover {
+  border: 1px solid #cccccc;
+  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1);
+}
+
+input:focus, textarea:focus {
+  border: 1px solid #74C1ED;
+  box-shadow: 0px 0px 5px 1px rgba(31, 141, 214, 0.3);
+}
diff --git a/popup.html b/popup.html
index 5d3aecf..8e91c44 100644
--- a/popup.html
+++ b/popup.html
@@ -1,3 +1,10 @@
+<!DOCTYPE html>
+<!--
+The above DOCTYPE declaration is actually required for Chrome to
+properly resize the window as content size changes. See:
+http://stackoverflow.com/questions/9498685/resize-popup-html-in-chrome-extension
+-->
+
 <html>
 <head>
   <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
@@ -6,74 +13,120 @@
   <script type="text/javascript" src="options.js"></script>
   <script type="text/javascript" src="api_bridge.js"></script>
   <script type="text/javascript" src="server_model.js"></script>
-  <link rel="stylesheet" href="common.css"/>
-  <link rel="stylesheet" href="popup_style.css"/>
+  <link rel="stylesheet" href="popup.css"/>
+  <title>
+    Asana Quick Add
+  </title>
 </head>
 
 <body>
 
-  <div id="banner">
-    Add to Asana
-    <a id="close-banner" class="close-x"></a>
-  </div>
+  <div id="add_view" style="display:none">
+    <div class="banner">
+      <div class="left-column">
+        <div id="logo" class="sprite"></div>
+      </div>
+      <div class="middle-column">
+        <span class="banner-add">
+          Add to
+          <span id="workspace"></span>
+          <div id="workspace_select_container">
+            <select id="workspace_select"><option>Loading...</option></select>
+            <svg class="svgIcon  svgIcon-dropdownarrow " viewBox="0 0 32 32" title="dropdownarrow">
+              <polygon points="28,12.5 25.5,10 16.586,18.914 7.5,10 5,12.5 16.5,24"></polygon>
+            </svg>
+          </div>
+        </span>
+      </div>
+      <div class="right-column">
+        <a id="close_popup" class="sprite close-x" tabindex="-1"></a>
+      </div>
+    </div>
+    <div class="name-row">
+      <div class="left-column">
+        <span class="icon-checkbox sprite"></span>
+      </div>
+      <div class="middle-column">
+        <input id="name_input" class="generic-input" tabindex="0" placeholder="Task" />
+      </div>
+      <div class="right-column">
+        <div id="use_page_details" title="Insert page title and URL"><div class="icon-use-link-arrow sprite"></div><div class="icon-use-link"></div></div>
+      </div>
+    </div>
+    <div class="notes-row">
+      <div class="left-column">
+        <span class="icon-notes sprite"></span>
+      </div>
+      <div class="middle-column">
+        <textarea id="notes_input" class="generic-input" tabindex="0" placeholder="Description"></textarea>
+      </div>
+      <div class="right-column"></div>
+    </div>
+    <div class="assignee-row">
+      <div class="left-column">
+        <span class="icon-assignee sprite"></span>
+      </div>
+      <div class="middle-column">
+        <span class="token-area-view-container">
+          <div id="assignee_token_area" class="tokenAreaView generic-input" tabindex="0">
+            <input id="assignee_input" class="token-input" placeholder="Assignee" tabindex="-1"/>
+            <div id="assignee_token" class="tokenView"></div>
+          </div>
+        </span>
+      </div>
+      <div class="right-column"></div>
+    </div>
 
-  <div id="error" style="display:none">
-    <span class="error-icon"></span>
-    Sorry, an error occurred. Please try again later.
-  </div>
+    <div id="assignee_list_container">
+      <div id="assignee_list"></div>
+    </div>
 
-  <div id="content">
-    <div id="add_view" style="display:none">
-      <table class="form">
-        <tr>
-          <td class="field-name">Name:</td>
-          <td class="field-value">
-            <input id="name"/>
-          </td>
-        </tr>
 
-        <tr>
-          <td class="field-name">Notes:</td>
-          <td class="field-value">
-            <textarea id="notes"></textarea>
-          </td>
-        </tr>
+    <div class="buttons">
+      <div class="left-column"></div>
+      <div class="middle-column">
+        <div id="add_button" tabindex="0" class="buttonView buttonView--primary buttonView--large is-disabled">
+          <span class="new-button-text">Add to Asana</span>
+        </div>
+      </div>
+    </div>
 
-        <tr>
-          <td class="field-name">Workspace:</td>
-          <td class="field-value">
-            <select id="workspace"><option>Loading...</option></select>
-          </td>
-        </tr>
+    <div class="footer">
+      <div id="error" class="footer-status" style="display:none">
+        <span class="error-message">
+          Sorry, there was a problem. Please try again.
+        </span>
+      </div>
+      <div id="success" class="footer-status" style="display:none">
+        <div class="sprite icon-success"></div>
+        <span class="success-message">
+          Added <a id="new_task_link" target="_blank" href=""></a>
+        </span>
+      </div>
+    </div>
 
-        <tr>
-          <td class="field-name">Assignee:</td>
-          <td class="field-value">
-            <select id="assignee"><option>Loading...</option></select>
-          </td>
-        </tr>
 
-        <tr>
-          <td class="field-name"></td>
-          <td class="field-value">
-            <div id="add_button" tabindex="0" class="button primary-button disabled">
-              <span class="button-text">Add to Asana</span>
-            </div>
-          </td>
-        </tr>
-      </table>
-    </div>
+  </div>
 
-    <div id="success_view" style="display:none">
-      <span class="success-icon"></span>
-      Created task <a id="new_task_link" target="_blank" href=""></a>.
+  <div id="login_view" style="display:none">
+    <div class="banner">
+      <div class="left-column">
+        <div id="logo" class="sprite"></div>
+      </div>
+      <div class="middle-column">
+        <span class="banner-add">
+          Add to Asana
+        </span>
+      </div>
+      <div class="right-column">
+        <a id="close_login" class="sprite close-x" tabindex="-1"></a>
+      </div>
     </div>
-
-    <div id="login_view" style="display:none">
-      Please <a id="login_link" href="#">log into Asana</a> to start adding
-      tasks.
+    <div class="content">
+      You must log in to Asana before you can add tasks.
+      <span id="signup_button" class="buttonView buttonView--large"><span class="new-button-text">Sign Up</span></span>
+      <span id="login_button" class="buttonView buttonView--primary buttonView--large"><span class="new-button-text">Log In</span></span>
     </div>
-
   </div>
 
 </body>
@@ -81,4 +134,4 @@
 <!-- Adds event handlers to elements, so we include at the end -->
 <script type="text/javascript" src="popup.js"></script>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/popup.js b/popup.js
index 11b2b4b..1281661 100644
--- a/popup.js
+++ b/popup.js
@@ -1,32 +1,75 @@
-window.addEventListener('load', function() {
-
-  // Our default error handler.
-  Asana.ServerModel.onError = function(response) {
-    showError(response.errors[0].message);
-  };
-
-  // Ah, the joys of asynchronous programming.
-  // To initialize, we've got to gather various bits of information.
-  // Starting with a reference to the window and tab that were active when
-  // the popup was opened ...
-  chrome.windows.getCurrent(function(w) {
+/**
+ * Code for the popup UI.
+ */
+Popup = {
+
+  // Is this an external popup window? (vs. the one from the menu)
+  is_external: false,
+
+  // Options loaded when popup opened.
+  options: null,
+
+  // Info from page we were triggered from
+  page_title: null,
+  page_url: null,
+  page_selection: null,
+  favicon_url: null,
+
+  // State to track so we only log events once.
+  has_edited_name: false,
+  has_edited_notes: false,
+  has_reassigned: false,
+  has_used_page_details: false,
+  is_first_add: true,
+
+  // Data from API cached for this popup.
+  workspaces: null,
+  users: null,
+  user_id: null,
+  
+  // Typeahead ui element
+  typeahead: null,
+
+  onLoad: function() {
+    var me = this;
+
+    me.is_external = ('' + window.location.search).indexOf("external=true") !== -1;
+
+    // Our default error handler.
+    Asana.ServerModel.onError = function(response) {
+      me.showError(response.errors[0].message);
+    };
+
+    // Ah, the joys of asynchronous programming.
+    // To initialize, we've got to gather various bits of information.
+    // Starting with a reference to the window and tab that were active when
+    // the popup was opened ...
     chrome.tabs.query({
       active: true,
-      windowId: w.id
+      currentWindow: true
     }, function(tabs) {
+      var tab = tabs[0];
       // Now load our options ...
       Asana.ServerModel.options(function(options) {
+        me.options = options;
         // And ensure the user is logged in ...
         Asana.ServerModel.isLoggedIn(function(is_logged_in) {
           if (is_logged_in) {
             if (window.quick_add_request) {
+              Asana.ServerModel.logEvent({
+                name: "ChromeExtension-Open-QuickAdd"
+              });
               // If this was a QuickAdd request (set by the code popping up
               // the window in Asana.ExtensionServer), then we have all the
               // info we need and should show the add UI right away.
-              showAddUi(
+              me.showAddUi(
                   quick_add_request.url, quick_add_request.title,
-                  quick_add_request.selected_text, options);
+                  quick_add_request.selected_text,
+                  quick_add_request.favicon_url);
             } else {
+              Asana.ServerModel.logEvent({
+                name: "ChromeExtension-Open-Button"
+              });
               // Otherwise we want to get the selection from the tab that
               // was active when we were opened. So we set up a listener
               // to listen for the selection send event from the content
@@ -34,190 +77,710 @@ window.addEventListener('load', function() {
               var selection = "";
               var listener = function(request, sender, sendResponse) {
                 if (request.type === "selection") {
-                  chrome.extension.onRequest.removeListener(listener);
+                  chrome.runtime.onMessage.removeListener(listener);
                   console.info("Asana popup got selection");
                   selection = "\n" + request.value;
                 }
               };
-              chrome.extension.onRequest.addListener(listener);
-
-              // ... and then we make a request to the content window to
-              // send us the selection.
-              var tab = tabs[0];
-              chrome.tabs.executeScript(tab.id, {
-                code: "(Asana && Asana.SelectionClient) ? Asana.SelectionClient.sendSelection() : 0"
-              }, function() {
-                // The requests appear to be handled synchronously, so the
-                // selection should have been sent by the time we get this
-                // completion callback. If the timing ever changes, however,
-                // that could break and we would never show the add UI.
-                // So this could be made more robust.
-                showAddUi(tab.url, tab.title, selection, options);
-              });
+              chrome.runtime.onMessage.addListener(listener);
+              me.showAddUi(tab.url, tab.title, '', tab.favIconUrl);
             }
           } else {
             // The user is not even logged in. Prompt them to do so!
-            showLogin(Asana.Options.loginUrl(options));
+            me.showLogin(
+                Asana.Options.loginUrl(options),
+                Asana.Options.signupUrl(options));
           }
         });
       });
     });
-  });
-});
 
-// Helper to show a named view.
-var showView = function(name) {
-  ["login", "add", "success"].forEach(function(view_name) {
-    $("#" + view_name + "_view").css("display", view_name === name ? "" : "none");
-  });
-};
+    // Wire up some events to DOM elements on the page.
 
-// Show the add UI
-var showAddUi = function(url, title, selected_text, options) {
-  var self = this;
-  showView("add");
-  $("#notes").val(url + selected_text);
-  $("#name").val(title);
-  $("#name").focus();
-  $("#name").select();
-  Asana.ServerModel.me(function(user) {
-    // Just to cache result.
-    Asana.ServerModel.workspaces(function(workspaces) {
-      $("#workspace").html("");
-      workspaces.forEach(function(workspace) {
-        $("#workspace").append(
-            "<option value='" + workspace.id + "'>" + workspace.name + "</option>");
-      });
-      $("#workspace").val(options.default_workspace_id);
-      onWorkspaceChanged();
-      $("#workspace").change(onWorkspaceChanged);
+    $(window).keydown(function(e) {
+      // Close the popup if the ESCAPE key is pressed.
+      if (e.which === 27) {
+        if (me.is_first_add) {
+          Asana.ServerModel.logEvent({
+            name: "ChromeExtension-Abort"
+          });
+        }
+        window.close();
+      } else if (e.which === 9) {
+        // Don't let ourselves TAB to focus the document body, so if we're
+        // at the beginning or end of the tab ring, explicitly focus the
+        // other end (setting body.tabindex = -1 does not prevent this)
+        if (e.shiftKey && document.activeElement === me.firstInput().get(0)) {
+          me.lastInput().focus();
+          e.preventDefault();
+        } else if (!e.shiftKey && document.activeElement === me.lastInput().get(0)) {
+          me.firstInput().focus();
+          e.preventDefault();
+        }
+      }
     });
-  });
-};
 
-// Enable/disable the add button.
-var setAddEnabled = function(enabled) {
-  var button = $("#add_button");
-  if (enabled) {
-    button.removeClass("disabled");
-    button.addClass("enabled");
-    button.click(function() {
-      createTask();
-      return false;
-    });
-    button.keydown(function(e) {
-      if (e.keyCode === 13) {
-        createTask();
+    // Close if the X is clicked.
+    $(".close-x").click(function() {
+      if (me.is_first_add) {
+        Asana.ServerModel.logEvent({
+          name: "ChromeExtension-Abort"
+        });
       }
+      window.close();
     });
-  } else {
-    button.removeClass("enabled");
-    button.addClass("disabled");
-    button.unbind('click');
-    button.unbind('keydown');
-  }
-};
 
-// Set the add button as being "working", waiting for the Asana request
-// to complete.
-var setAddWorking = function(working) {
-  setAddEnabled(!working);
-  $("#add_button").find(".button-text").text(
-      working ? "Adding..." : "Add to Asana");
-};
+    $("#name_input").keyup(function() {
+      if (!me.has_edited_name && $("#name_input").val() !== "") {
+        me.has_edited_name = true;
+        Asana.ServerModel.logEvent({
+          name: "ChromeExtension-ChangedTaskName"
+        });
+      }
+      me.maybeDisablePageDetailsButton();
+    });
+    $("#notes_input").keyup(function() {
+      if (!me.has_edited_notes && $("#notes_input").val() !== "") {
+        me.has_edited_notes= true;
+        Asana.ServerModel.logEvent({
+          name: "ChromeExtension-ChangedTaskNotes"
+        });
+      }
+      me.maybeDisablePageDetailsButton();
+    });
 
-// When the user changes the workspace, update the list of users.
-var onWorkspaceChanged = function() {
-  var workspace_id = readWorkspaceId();
-  $("#assignee").html("<option>Loading...</option>");
-  setAddEnabled(false);
-  Asana.ServerModel.users(workspace_id, function(users) {
-    $("#assignee").html("");
-    users = users.sort(function(a, b) {
-      return (a.name < b.name) ? -1 : ((a.name > b.name) ? 1 : 0);
+    // The page details button fills in fields with details from the page
+    // in the current tab (cached when the popup opened).
+    var use_page_details_button = $("#use_page_details");
+    use_page_details_button.click(function() {
+      if (!(use_page_details_button.hasClass('disabled'))) {
+        // Page title -> task name
+        $("#name_input").val(me.page_title);
+        // Page url + selection -> task notes
+        var notes = $("#notes_input");
+        notes.val(notes.val() + me.page_url + "\n" + me.page_selection);
+        // Disable the page details button once used.        
+        use_page_details_button.addClass('disabled');
+        if (!me.has_used_page_details) {
+          me.has_used_page_details = true;
+          Asana.ServerModel.logEvent({
+            name: "ChromeExtension-UsedPageDetails"
+          });
+        }
+      }
     });
-    users.forEach(function(user) {
-      $("#assignee").append(
-          "<option value='" + user.id + "'>" + user.name + "</option>");
+
+    // Make a typeahead for assignee
+    me.typeahead = new UserTypeahead("assignee");
+  },
+
+  maybeDisablePageDetailsButton: function() {
+    if ($("#name_input").val() !== "" || $("#notes_input").val() !== "") {
+      $("#use_page_details").addClass('disabled');
+    } else {
+      $("#use_page_details").removeClass('disabled');
+    }
+  },
+
+  setExpandedUi: function(is_expanded) {
+    if (this.is_external) {
+      window.resizeTo(
+          Asana.POPUP_UI_WIDTH,
+          (is_expanded ? Asana.POPUP_EXPANDED_UI_HEIGHT : Asana.POPUP_UI_HEIGHT)
+              + Asana.CHROME_TITLEBAR_HEIGHT);
+    }
+  },
+
+  showView: function(name) {
+    ["login", "add"].forEach(function(view_name) {
+      $("#" + view_name + "_view").css("display", view_name === name ? "" : "none");
     });
+  },
+
+  showAddUi: function(url, title, selected_text, favicon_url) {
+    var me = this;
+
+    // Store off info from page we got triggered from.
+    me.page_url = url;
+    me.page_title = title;
+    me.page_selection = selected_text;
+    me.favicon_url = favicon_url;
+
+    // Populate workspace selector and select default.
     Asana.ServerModel.me(function(user) {
-      $("#assignee").val(user.id);
+      me.user_id = user.id;
+      Asana.ServerModel.workspaces(function(workspaces) {
+        me.workspaces = workspaces;
+        var select = $("#workspace_select");
+        select.html("");
+        workspaces.forEach(function(workspace) {
+          $("#workspace_select").append(
+              "<option value='" + workspace.id + "'>" + workspace.name + "</option>");
+        });
+        if (workspaces.length > 1) {
+          $("workspace_select_container").show();
+        } else {
+          $("workspace_select_container").hide();
+        }
+        select.val(me.options.default_workspace_id);
+        me.onWorkspaceChanged();
+        select.change(function() {
+          if (select.val() !== me.options.default_workspace_id) {
+            Asana.ServerModel.logEvent({
+              name: "ChromeExtension-ChangedWorkspace"
+            });
+          }
+          me.onWorkspaceChanged();
+        });
+
+        // Set initial UI state
+        me.resetFields();
+        me.showView("add");
+        var name_input = $("#name_input");
+        name_input.focus();
+        name_input.select();
+
+        if (favicon_url) {
+          $(".icon-use-link").css("background-image", "url(" + favicon_url + ")");
+        } else {
+          $(".icon-use-link").addClass("no-favicon sprite");
+        }
+      });
     });
-    setAddEnabled(true);
-  });
-};
+  },
 
-var readAssignee = function() {
-  return $("#assignee").val();
-};
+  /**
+   * @param enabled {Boolean} True iff the add button should be clickable.
+   */
+  setAddEnabled: function(enabled) {
+    var me = this;
+    var button = $("#add_button");
+    if (enabled) {
+      // Update appearance and add handlers.
+      button.removeClass("is-disabled");
+      button.unbind("click");
+      button.unbind("keydown");
+      button.click(function() {
+        me.createTask();
+        return false;
+      });
+      button.keydown(function(e) {
+        if (e.keyCode === 13) {
+          me.createTask();
+        }
+      });
+    } else {
+      // Update appearance and remove handlers.
+      button.addClass("is-disabled");
+      button.unbind("click");
+      button.unbind("keydown");
+    }
+  },
 
-var readWorkspaceId = function() {
-  return $("#workspace").val();
-};
+  showError: function(message) {
+    console.log("Error: " + message);
+    $("#error").css("display", "inline-block");
+  },
+
+  hideError: function() {
+    $("#error").css("display", "none");
+  },
+
+  /**
+   * Clear inputs for new task entry.
+   */
+  resetFields: function() {
+    $("#name_input").val("");
+    $("#notes_input").val("");
+    this.typeahead.setSelectedUserId(this.user_id);
+  },
+
+  /**
+   * Set the add button as being "working", waiting for the Asana request
+   * to complete.
+   */
+  setAddWorking: function(working) {
+    this.setAddEnabled(!working);
+    $("#add_button").find(".button-text").text(
+        working ? "Adding..." : "Add to Asana");
+  },
+
+  /**
+   * Update the list of users as a result of setting/changing the workspace.
+   */
+  onWorkspaceChanged: function() {
+    var me = this;
+    var workspace_id = me.selectedWorkspaceId();
+
+    // Update selected workspace
+    $("#workspace").html($("#workspace_select option:selected").text());
+
+    // Save selection as new default.
+    Popup.options.default_workspace_id = workspace_id;
+    Asana.ServerModel.saveOptions(me.options, function() {});
 
-var createTask = function() {
-  console.info("Creating task");
-  hideError();
-  setAddWorking(true);
-  Asana.ServerModel.createTask(
-      readWorkspaceId(),
-      {
-        name: $("#name").val(),
-        notes: $("#notes").val(),
-        assignee: readAssignee()
-      },
-      function(task) {
-        setAddWorking(false);
-        showSuccess(task);
-      },
-      function(response) {
-        setAddWorking(false);
-        showError(response.errors[0].message);
+    me.setAddEnabled(true);
+  },
+
+  /**
+   * @param id {Integer}
+   * @return {dict} Workspace data for the given workspace.
+   */
+  workspaceById: function(id) {
+    var found = null;
+    this.workspaces.forEach(function(w) {
+      if (w.id === id) {
+        found = w;
+      }
+    });
+    return found;
+  },
+
+  /**
+   * @return {Integer} ID of the selected workspace.
+   */
+  selectedWorkspaceId: function() {
+    return parseInt($("#workspace_select").val(), 10);
+  },
+
+  /**
+   * Create a task in asana using the data in the form.
+   */
+  createTask: function() {
+    var me = this;
+
+    // Update UI to reflect attempt to create task.
+    console.info("Creating task");
+    me.hideError();
+    me.setAddWorking(true);
+
+    if (!me.is_first_add) {
+      Asana.ServerModel.logEvent({
+        name: "ChromeExtension-CreateTask-MultipleTasks"
       });
-};
+    }
 
-var showError = function(message) {
-  console.log("Error: " + message);
-  $("#error").css("display", "");
-};
+    Asana.ServerModel.createTask(
+        me.selectedWorkspaceId(),
+        {
+          name: $("#name_input").val(),
+          notes: $("#notes_input").val(),
+          // Default assignee to self
+          assignee: me.typeahead.selected_user_id || me.user_id
+        },
+        function(task) {
+          // Success! Show task success, then get ready for another input.
+          Asana.ServerModel.logEvent({
+            name: "ChromeExtension-CreateTask-Success"
+          });
+          me.setAddWorking(false);
+          me.showSuccess(task);
+          me.resetFields();
+          $("#name_input").focus();
+        },
+        function(response) {
+          // Failure. :( Show error, but leave form available for retry.
+          Asana.ServerModel.logEvent({
+            name: "ChromeExtension-CreateTask-Failure"
+          });
+          me.setAddWorking(false);
+          me.showError(response.errors[0].message);
+        });
+  },
 
-var hideError = function() {
-  $("#error").css("display", "none");
-};
+  /**
+   * Helper to show a success message after a task is added.
+   */
+  showSuccess: function(task) {
+    var me = this;
+    Asana.ServerModel.taskViewUrl(task, function(url) {
+      var name = task.name.replace(/^\s*/, "").replace(/\s*$/, "");
+      var link = $("#new_task_link");
+      link.attr("href", url);
+      link.text(name !== "" ? name : "Task");
+      link.unbind("click");
+      link.click(function() {
+        chrome.tabs.create({url: url});
+        window.close();
+        return false;
+      });
+
+      // Reset logging for multi-add
+      me.has_edited_name = true;
+      me.has_edited_notes = true;
+      me.has_reassigned = true;
+      me.is_first_add = false;
 
-// Helper to show a success message after a task is added.
-var showSuccess = function(task) {
-  Asana.ServerModel.taskViewUrl(task, function(url) {
-    var name = task.name.replace(/^\s*/, "").replace(/\s*$/, "");
-    $("#new_task_link").attr("href", url);
-    $("#new_task_link").text(name !== "" ? name : "unnamed task");
-    $("#new_task_link").unbind("click");
-    $("#new_task_link").click(function() {
-      chrome.tabs.create({url: url});
+      $("#success").css("display", "inline-block");
+    });
+  },
+
+  /**
+   * Show the login page.
+   */
+  showLogin: function(login_url, signup_url) {
+    var me = this;
+    $("#login_button").click(function() {
+      chrome.tabs.create({url: login_url});
       window.close();
       return false;
     });
-    showView("success");
-  });
+    $("#signup_button").click(function() {
+      chrome.tabs.create({url: signup_url});
+      window.close();
+      return false;
+    });
+    me.showView("login");
+  },
+
+  firstInput: function() {
+    return $("#workspace_select");
+  },
+
+  lastInput: function() {
+    return $("#add_button");
+  }
 };
 
-// Helper to show the login page.
-var showLogin = function(url) {
-  $("#login_link").attr("href", url);
-  $("#login_link").unbind("click");
-  $("#login_link").click(function() {
-    chrome.tabs.create({url: url});
-    window.close();
-    return false;
+/**
+ * A jQuery-based typeahead similar to the Asana application, which allows
+ * the user to select another user in the workspace by typing in a portion
+ * of their name and selecting from a filtered dropdown.
+ *
+ * Expects elements with the following IDs already in the DOM
+ *   ID: the element where the current assignee will be displayed.
+ *   ID_input: an input element where the user can edit the assignee
+ *   ID_list: an empty DOM whose children will be populated from the users
+ *       in the selected workspace, filtered by the input text.
+ *   ID_list_container: a DOM element containing ID_list which will be
+ *       shown or hidden based on whether the user is interacting with the
+ *       typeahead.
+ *
+ * @param id {String} Base ID of the typeahead element.
+ * @constructor
+ */
+UserTypeahead = function(id) {
+  var me = this;
+  me.id = id;
+  me.users = [];
+  me.filtered_users = [];
+  me.user_id_to_user = {};
+  me.selected_user_id = null;
+  me.user_id_to_select = null;
+  me.has_focus = false;
+
+  me._request_counter = 0;
+
+  // Store off UI elements.
+  me.input = $("#" + id + "_input");
+  me.token_area = $("#" + id + "_token_area");
+  me.token = $("#" + id + "_token");
+  me.list = $("#" + id + "_list");
+  me.list_container = $("#" + id + "_list_container");
+
+  // Open on focus.
+  me.input.focus(function() {
+    me.user_id_to_select = me.selected_user_id;
+    if (me.selected_user_id !== null) {
+      // If a user was already selected, fill the field with their name
+      // and select it all.  The user_id_to_user dict may not be populated yet.
+      if (me.user_id_to_user[me.selected_user_id]) {
+        var assignee_name = me.user_id_to_user[me.selected_user_id].name;
+        me.input.val(assignee_name);
+      } else {
+        me.input.val("");
+      }
+    } else {
+      me.input.val("");
+    }
+    me.has_focus = true;
+    Popup.setExpandedUi(true);
+    me._updateUsers();
+    me.render();
+    me._ensureSelectedUserVisible();
+    me.token_area.attr('tabindex', '-1');
   });
-  showView("login");
+
+  // Close on blur. A natural blur does not cause us to accept the current
+  // selection - there had to be a user action taken that causes us to call
+  // `confirmSelection`, which would have updated user_id_to_select.
+  me.input.blur(function() {
+    me.selected_user_id = me.user_id_to_select;
+    me.has_focus = false;
+    if (!Popup.has_reassigned) {
+      Popup.has_reassigned = true;
+      Asana.ServerModel.logEvent({
+        name: (me.selected_user_id === Popup.user_id || me.selected_user_id === null) ?
+            "ChromeExtension-AssignToSelf" :
+            "ChromeExtension-AssignToOther"
+      });
+    }
+    me.render();
+    Popup.setExpandedUi(false);
+    me.token_area.attr('tabindex', '0');
+  });
+
+  // Handle keyboard within input
+  me.input.keydown(function(e) {
+    if (e.which === 13) {
+      // Enter accepts selection, focuses next UI element.
+      me._confirmSelection();
+      $("#add_button").focus();
+      return false;
+    } else if (e.which === 9) {
+      // Tab accepts selection. Browser default behavior focuses next element.
+      me._confirmSelection();
+      return true;
+    } else if (e.which === 27) {
+      // Abort selection. Stop propagation to avoid closing the whole
+      // popup window.
+      e.stopPropagation();
+      me.input.blur();
+      return false;
+    } else if (e.which === 40) {
+      // Down: select next.
+      var index = me._indexOfSelectedUser();
+      if (index === -1 && me.filtered_users.length > 0) {
+        me.setSelectedUserId(me.filtered_users[0].id);
+      } else if (index >= 0 && index < me.filtered_users.length) {
+        me.setSelectedUserId(me.filtered_users[index + 1].id);
+      }
+      me._ensureSelectedUserVisible();
+      e.preventDefault();
+    } else if (e.which === 38) {
+      // Up: select prev.
+      var index = me._indexOfSelectedUser();
+      if (index > 0) {
+        me.setSelectedUserId(me.filtered_users[index - 1].id);
+      }
+      me._ensureSelectedUserVisible();
+      e.preventDefault();
+    }
+  });
+
+  // When the input changes value, update and re-render our filtered list.
+  me.input.bind("input", function() {
+    me._updateUsers();
+    me._renderList();
+  });
+
+  // A user clicking or tabbing to the label should open the typeahead
+  // and select what's already there.
+  me.token_area.focus(function() {
+    me.input.focus();
+    me.input.get(0).setSelectionRange(0, me.input.val().length);
+  });
+
+  me.render();
 };
 
-// Close the popup if the ESCAPE key is pressed.
-window.addEventListener("keydown", function(e) {
-  if (e.keyCode === 27) {
-    window.close();
+Asana.update(UserTypeahead, {
+
+  SILHOUETTE_URL: "./nopicture.png",
+
+  /**
+   * @param user {dict}
+   * @param size {string} small, inbox, etc.
+   * @returns {jQuery} photo element
+   */
+  photoForUser: function(user, size) {
+    var photo = $('<div class="Avatar Avatar--' + size + '">');
+    var url = user.photo ? user.photo.image_60x60 : UserTypeahead.SILHOUETTE_URL;
+    photo.css("background-image", "url(" + url + ")");
+    return $('<div class="photo-view ' + size + ' tokenView-photo">').append(photo);
   }
-}, /*capture=*/false);
 
-$("#close-banner").click(function() { window.close(); });
+});
+
+Asana.update(UserTypeahead.prototype, {
+
+  /**
+   * Render the typeahead, changing elements and content as needed.
+   */
+  render: function() {
+    var me = this;
+    if (this.has_focus) {
+      // Focused - show the list and input instead of the label.
+      me._renderList();
+      me.input.show();
+      me.token.hide();
+      me.list_container.show();
+    } else {
+      // Not focused - show the label, not the list or input.
+      me._renderTokenOrPlaceholder();
+      me.list_container.hide();
+    }
+  },
+
+  /**
+   * Update the set of all (unfiltered) users available in the typeahead.
+   *
+   * @param users {dict[]}
+   */
+  updateUsers: function(users) {
+    var me = this;
+    // Build a map from user ID to user
+    var this_user = null;
+    var users_without_this_user = [];
+    me.user_id_to_user = {};
+    users.forEach(function(user) {
+      if (user.id === Popup.user_id) {
+        this_user = user;
+      } else {
+        users_without_this_user.push(user);
+      }
+      me.user_id_to_user[user.id] = user;
+    });
+
+    // Put current user at the beginning of the list.
+    // We really should have found this user, but if not .. let's not crash.
+    me.users = this_user ?
+        [this_user].concat(users_without_this_user) : users_without_this_user;
+
+    // If selected user is not in this workspace, unselect them.
+    if (!(me.selected_user_id in me.user_id_to_user)) {
+      me.selected_user_id = null;
+      me._updateInput();
+    }
+    me._updateFilteredUsers();
+    me.render();
+  },
+
+  _renderTokenOrPlaceholder: function() {
+    var me = this;
+    var selected_user = me.user_id_to_user[me.selected_user_id];
+    if (selected_user) {
+      me.token.empty();
+      if (selected_user.photo) {
+        me.token.append(UserTypeahead.photoForUser(selected_user, 'small'));
+      }
+      me.token.append(
+          '<span class="tokenView-label">' +
+          '  <span class="tokenView-labelText">' + selected_user.name + '</span>' +
+          '</span>' +
+          '<a id = "' + me.id + '_token_remove" class="tokenView-remove">' +
+          '  <svg class="svgIcon tokenView-removeIcon" viewBox="0 0 32 32" title="remove">' +
+          '    <polygon points="23.778,5.393 16,13.172 8.222,5.393 5.393,8.222 13.172,16 5.393,23.778 8.222,26.607 16,18.828 23.778,26.607 26.607,23.778 18.828,16 26.607,8.222"></polygon>' +
+          '  </svg>' +
+          '</a>');
+      $('#' + me.id + '_token_remove').mousedown(function(e) {
+        me.selected_user_id = null;
+        me._updateInput();
+        me.input.focus();
+      });
+      me.token.show();
+      me.input.hide();
+    } else {
+      me.token.hide();
+      me.input.show();
+    }
+  },
+
+  _renderList: function() {
+    var me = this;
+    me.list.empty();
+    me.filtered_users.forEach(function(user) {
+      me.list.append(me._entryForUser(user, user.id === me.selected_user_id));
+    });
+  },
+
+  _entryForUser: function(user, is_selected) {
+    var me = this;
+    var node = $('<div id="user_' + user.id + '" class="user"></div>');
+    node.append(UserTypeahead.photoForUser(user, 'inbox'));
+    node.append($('<div class="user-name">').text(user.name));
+    if (is_selected) {
+      node.addClass("selected");
+    }
+
+    // Select on mouseover.
+    node.mouseenter(function() {
+      me.setSelectedUserId(user.id);
+    });
+
+    // Select and confirm on click. We listen to `mousedown` because a click
+    // will take focus away from the input, hiding the user list and causing
+    // us not to get the ensuing `click` event.
+    node.mousedown(function() {
+      me.setSelectedUserId(user.id);
+      me._confirmSelection();
+    });
+    return node;
+  },
+
+  _confirmSelection: function() {
+    this.user_id_to_select = this.selected_user_id;
+  },
+
+  _updateUsers: function() {
+    var me = this;
+
+    this._request_counter += 1;
+    var current_request_counter = this._request_counter;
+    Asana.ServerModel.userTypeahead(
+      Popup.options.default_workspace_id,
+      this.input.val(),
+      function (users) {
+        // Only update the list if no future requests have been initiated.
+        if (me._request_counter === current_request_counter) {
+          // Update the ID -> User map.
+          users.forEach(function (user) {
+            me.user_id_to_user[user.id] = user
+          });
+          // Insert new uers at the end.
+          me.filtered_users = users;
+          me._renderList();
+        }
+      });
+  },
+
+  _indexOfSelectedUser: function() {
+    var me = this;
+    var selected_user = me.user_id_to_user[me.selected_user_id];
+    if (selected_user) {
+      return me.filtered_users.indexOf(selected_user);
+    } else {
+      return -1;
+    }
+  },
+
+  /**
+   * Helper to call this when the selection was changed by something that
+   * was not the mouse (which is pointing directly at a visible element),
+   * to ensure the selected user is always visible in the list.
+   */
+  _ensureSelectedUserVisible: function() {
+    var index = this._indexOfSelectedUser();
+    if (index !== -1) {
+      var node = this.list.children().get(index);
+      Asana.Node.ensureBottomVisible(node);
+    }
+  },
+
+  _updateInput: function() {
+    var me = this;
+    var selected_user = me.user_id_to_user[me.selected_user_id];
+    if (selected_user) {
+      me.input.val(selected_user.name);
+    } else {
+      me.input.val("");
+    }
+  },
+
+  setSelectedUserId: function(id) {
+    if (this.selected_user_id !== null) {
+      $("#user_" + this.selected_user_id).removeClass("selected");
+    }
+    this.selected_user_id = id;
+    if (this.selected_user_id !== null) {
+      $("#user_" + this.selected_user_id).addClass("selected");
+    }
+    this._updateInput();
+  }
+
+});
+
+
+$(window).load(function() {
+  Popup.onLoad();
+});
diff --git a/popup_style.css b/popup_style.css
deleted file mode 100644
index 15e99c7..0000000
--- a/popup_style.css
+++ /dev/null
@@ -1,128 +0,0 @@
-/* Styles for popup.html */
-body {
-  overflow: hidden;
-  width: 410px;
-  height: 310px;  /* keep this correct for the window-based (non-button) version */
-  padding: 0px;
-  margin: 0px;
-  margin-top: 1px;
-  background-color: #fff;
-  border: 1px solid #AFBCC8;
-  -webkit-border-radius: 6px;
-  font-size: 14px;
-  font-family: "Helvetica Neue", Arial, sans-serif;
-}
-
-
-#banner {
-  font-size: 17px;
-  font-weight: 800;
-  background-color:#f2f2f2;
-  padding: 10px 14px 8px;
-  color: #596573;
-  text-transform: uppercase;
-  text-shadow: 0px 1px #fff;
-  border-bottom: 1px solid #E5E5E5;
-  -webkit-box-shadow: inset 0px -1px rgba(0,0,0,0.1);
-  -webkit-border-radius: 5px 5px 0px 0px;
-
-}
-
-#content {
-  padding: 10px 14px;
-  width: 100%;
-}
-
-#error {
-  width: 100%;
-  padding: 10px 14px;
-  background-color: #434C56;
-  font-weight: 500;
-  color: #ECF0F3;
-}
-.error-icon {
-  background-image: url(sprite.png);
-  background-position: 0px 0px;
-  background-repeat: no-repeat;
-  width: 19px;
-  min-width: 19px;
-  height: 16px;
-  min-height: 16px;
-  margin-bottom: -2px;
-  display: inline-block;
-
-}
-
-
-#add_view {
-  padding-bottom: 12px;
-}
-
-.form {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-.field-name {
-  width: 80px;
-  padding: 6px 2px 2px 0px;
-  vertical-align: top;
-  font-size: 12px;
-  font-weight: bold;
-  color: #999999;
-  
-}
-.field-value {
-    width: 294px;
-    padding: 2px 0 2px 2px;
-    vertical-align: top;
-}
-#name {
-    width: 100%;
-}
-#notes {
-    width: 100%;
-    height: 100px;
-}
-#add_button {
-    margin-top: 10px;
-}
-
-#login_view {
-    padding-top: 10px;
-    width: 100%;
-    text-align: center;
-    font-weight: 600;
-    width: 382px;
-}
-#success_view {
-    padding-top: 84px;
-    text-align: center;
-    font-weight: 600;
-    width: 382px;
-    
-}
-.success-icon {
-  background-image: url(sprite.png);
-  background-position: 0px -50px;
-  background-repeat: no-repeat;
-  width: 19px;
-  min-width: 19px;
-  height: 16px;
-  min-height: 16px;
-  margin-bottom: -2px;
-  display: inline-block;
-
-}
-input, textarea {
-  -webkit-border-radius: 3px;
-  border: 1px solid rgba(0,0,0,0.2);
-  color: #212F40;
-  padding: 4px 5px 3px;
-  -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.1), 0px 1px #fff;
-}
-select, input, textarea {
-  font-size: 14px;
-  font-family: "Helvetica Neue", Arial, sans-serif;
-  color: #212F40;
-}
\ No newline at end of file
diff --git a/quick_add_client.js b/quick_add_client.js
deleted file mode 100644
index 538dcb3..0000000
--- a/quick_add_client.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * A module to run in a content window to enable QuickAdd from that window.
- * That is, pressing Tab+Q anywhere in the window will open the same popup
- * as is available from the chrome menu.
- *
- * This is not a perfect solution (though it might be refined further with
- * a little more effort). For one thing, we don't swallow the TAB key because
- * we don't want to interfere with the underlying page (especially if the user
- * wasn't going to press TAB+Q). So using the hotkey may cause you to focus
- * a new input on the page before opening the popup.
- *
- * Also, there's no way to trigger the chrome extension popup itself, so this
- * opens a new window with the popup content in it. This looks slightly
- * different than the real popup (and appears in a different place), but it
- * does the job.
- */
-Asana.QuickAddClient = {
-
-  _tab_down_time: 0,
-
-  keyDown: function(e) {
-    var self = Asana.QuickAddClient;
-    if (e.keyCode === 9) {
-      // Mark tab key as pressed at the current time.
-      // If the Q key gets pressed soon enough afterward, we've hit our
-      // hotkey combo.
-      self._tab_down_time = new Date().getTime();
-    } else if (e.keyCode === 81) {
-      if (new Date().getTime() < self._tab_down_time + 5000) {  // 5s timeout
-        self._tab_down_time = 0;
-        // Tab-Q!
-        // We cannot open the popup programmatically.
-        // http://code.google.com/chrome/extensions/faq.html#faq-open-popups
-        // So we do this roundabout thing.
-        chrome.extension.sendRequest({
-          type: "quick_add",
-          url: window.location.href,
-          title: document.title,
-          selected_text: "" + window.getSelection()
-        });
-        e.preventDefault();
-        return false;
-      }
-    }
-  },
-
-  keyUp: function(e) {
-    var self = Asana.QuickAddClient;
-    if (e.keyCode === 9) {
-      // Mark tab key as released.
-      self._tab_down_time = 0;
-    }
-  },
-
-  listen: function() {
-    // Don't run against Asana, which already has a QuickAdd feature. ;)
-    if (!/^https?:\/\/app[.]asana[.]com/.test(window.location.href) &&
-        !/^https?:\/\/localhost/.test(window.location.href)) {
-      window.addEventListener("keydown", Asana.QuickAddClient.keyDown, true);
-      window.addEventListener("keyup", Asana.QuickAddClient.keyUp, true);
-    }
-  }
-};
-
-Asana.QuickAddClient.listen();
diff --git a/selection_client.js b/selection_client.js
deleted file mode 100644
index 049b979..0000000
--- a/selection_client.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Module to install on a page that allows sending of the selection over to
- * the popup window when the user pops up the new task window. The popup
- * calls this method on our content window, and we get the selection
- * and send it back.
- */
-Asana.SelectionClient = {
-  // We get called when added to asana.
-  sendSelection: function() {
-    var selected_text = "" + window.getSelection();
-    console.info("Sending selection to Asana popup");
-    chrome.extension.sendRequest({
-      type: "selection",
-      value: selected_text
-    });
-  }
-};
diff --git a/server_model.js b/server_model.js
index 62ca5a4..b0e83d1 100644
--- a/server_model.js
+++ b/server_model.js
@@ -7,7 +7,10 @@
  */
 Asana.ServerModel = {
 
-  _cached_user: null,
+  // Make requests to API to refresh cache at this interval.
+  CACHE_REFRESH_INTERVAL_MS: 15 * 60 * 1000, // 15 minutes
+
+  _url_to_cached_image: {},
 
   /**
    * Called by the model whenever a request is made and error occurs.
@@ -23,12 +26,23 @@ Asana.ServerModel = {
    * Requests the user's preferences for the extension.
    *
    * @param callback {Function(options)} Callback on completion.
-   *     workspaces {dict[]} See Asana.Options for details.
+   *     options {dict} See Asana.Options for details.
    */
   options: function(callback) {
     callback(Asana.Options.loadOptions());
   },
 
+  /**
+   * Saves the user's preferences for the extension.
+   *
+   * @param options {dict} See Asana.Options for details.
+   * @param callback {Function()} Callback on completion.
+   */
+  saveOptions: function(options, callback) {
+    Asana.Options.saveOptions(options);
+    callback();
+  },
+
   /**
    * Determine if the user is logged in.
    *
@@ -65,12 +79,12 @@ Asana.ServerModel = {
    * @param callback {Function(workspaces)} Callback on success.
    *     workspaces {dict[]}
    */
-  workspaces: function(callback, errback) {
+  workspaces: function(callback, errback, options) {
     var self = this;
     Asana.ApiBridge.request("GET", "/workspaces", {},
         function(response) {
           self._makeCallback(response, callback, errback);
-        });
+        }, options);
   },
 
   /**
@@ -79,12 +93,17 @@ Asana.ServerModel = {
    * @param callback {Function(users)} Callback on success.
    *     users {dict[]}
    */
-  users: function(workspace_id, callback) {
+  users: function(workspace_id, callback, errback, options) {
     var self = this;
-    Asana.ApiBridge.request("GET", "/workspaces/" + workspace_id + "/users", {},
+    Asana.ApiBridge.request(
+        "GET", "/workspaces/" + workspace_id + "/users",
+        { opt_fields: "name,photo.image_60x60" },
         function(response) {
-          self._makeCallback(response, callback);
-        });
+          response.forEach(function (user) {
+            self._updateUser(workspace_id, user);
+          });
+          self._makeCallback(response, callback, errback);
+        }, options);
   },
 
   /**
@@ -93,19 +112,12 @@ Asana.ServerModel = {
    * @param callback {Function(user)} Callback on success.
    *     user {dict[]}
    */
-  me: function(callback) {
+  me: function(callback, errback, options) {
     var self = this;
-    if (self._cached_user !== null) {
-      callback(self._cached_user);
-    } else {
-      Asana.ApiBridge.request("GET", "/users/me", {},
-          function(response) {
-            if (!response.errors) {
-              self._cached_user = response.data;
-            }
-            self._makeCallback(response, callback);
-          });
-    }
+    Asana.ApiBridge.request("GET", "/users/me", {},
+        function(response) {
+          self._makeCallback(response, callback, errback);
+        }, options);
   },
 
   /**
@@ -125,12 +137,96 @@ Asana.ServerModel = {
         });
   },
 
+  /**
+   * Requests user type-ahead completions for a query.
+   */
+  userTypeahead: function(workspace_id, query, callback, errback) {
+    var self = this;
+
+    Asana.ApiBridge.request(
+      "GET",
+      "/workspaces/" + workspace_id + "/typeahead",
+      {
+        type: 'user',
+        query: query,
+        count: 10,
+        opt_fields: "name,photo.image_60x60",
+      },
+      function(response) {
+        self._makeCallback(
+          response,
+          function (users) {
+            users.forEach(function (user) {
+              self._updateUser(workspace_id, user);
+            });
+            callback(users);
+          },
+          errback);
+      },
+      {
+        miss_cache: true, // Always skip the cache.
+      });
+  },
+
+  logEvent: function(event) {
+    Asana.ApiBridge.request(
+        "POST",
+        "/logs",
+        event,
+        function(response) {});
+  },
+
+  /**
+   * All the users that have been seen so far, keyed by workspace and user.
+   */
+  _known_users: {},
+
+  _updateUser: function(workspace_id, user) {
+    this._known_users[workspace_id] = this._known_users[workspace_id] || {}
+    this._known_users[workspace_id][user.id] = user;
+    this._cacheUserPhoto(user);
+  },
+
   _makeCallback: function(response, callback, errback) {
     if (response.errors) {
       (errback || this.onError).call(null, response);
     } else {
       callback(response.data);
     }
-  }
+  },
+
+  _cacheUserPhoto: function(user) {
+    var me = this;
+    if (user.photo) {
+      var url = user.photo.image_60x60;
+      if (!(url in me._url_to_cached_image)) {
+        var image = new Image();
+        image.src = url;
+        me._url_to_cached_image[url] = image;
+      }
+    }
+  },
 
-};
\ No newline at end of file
+  /**
+   * Start fetching all the data needed by the extension so it is available
+   * whenever a popup is opened.
+   */
+  startPrimingCache: function() {
+    var me = this;
+    me._cache_refresh_interval = setInterval(function() {
+      me.refreshCache();
+    }, me.CACHE_REFRESH_INTERVAL_MS);
+    me.refreshCache();
+  },
+
+  refreshCache: function() {
+    var me = this;
+    // Fetch logged-in user.
+    me.me(function(user) {
+      if (!user.errors) {
+        // Fetch list of workspaces.
+        me.workspaces(function(workspaces) {}, null, { miss_cache: true })
+      }
+    }, null, { miss_cache: true });
+  }
+};
diff --git a/sprite-retina.png b/sprite-retina.png
new file mode 100644
index 0000000..b1c8946
Binary files /dev/null and b/sprite-retina.png differ
diff --git a/sprite.png b/sprite.png
index 7f59048..162c3d4 100644
Binary files a/sprite.png and b/sprite.png differ