diff --git a/src/CallHandler.js b/src/CallHandler.js
index 187449924f..189e99b307 100644
--- a/src/CallHandler.js
+++ b/src/CallHandler.js
@@ -138,9 +138,17 @@ function _setCallListeners(call) {
 
 function _setCallState(call, roomId, status) {
     console.log(
-        "Call state in %s changed to %s (%s)", roomId, status, (call ? call.state : "-")
+        "Call state in %s changed to %s (%s)", roomId, status, (call ? call.call_state : "-")
     );
     calls[roomId] = call;
+
+    if (status === "ringing") {
+        play("ringAudio")
+    }
+    else if (call && call.call_state === "ringing") {
+        pause("ringAudio")
+    }
+
     if (call) {
         call.call_state = status;
     }
diff --git a/src/ContentMessages.js b/src/ContentMessages.js
index eba3011917..094eff18d9 100644
--- a/src/ContentMessages.js
+++ b/src/ContentMessages.js
@@ -18,6 +18,10 @@ limitations under the License.
 
 var q = require('q');
 var extend = require('./extend');
+var dis = require('./dispatcher');
+var MatrixClientPeg = require('./MatrixClientPeg');
+var sdk = require('./index');
+var Modal = require('./Modal');
 
 function infoForImageFile(imageFile) {
     var deferred = q.defer();
@@ -48,39 +52,108 @@ function infoForImageFile(imageFile) {
     return deferred.promise;
 }
 
-function sendContentToRoom(file, roomId, matrixClient) {
-    var content = {
-        body: file.name,
-        info: {
-            size: file.size,
+class ContentMessages {
+    constructor() {
+        this.inprogress = [];
+        this.nextId = 0;
+    }
+
+    sendContentToRoom(file, roomId, matrixClient) {
+        var content = {
+            body: file.name,
+            info: {
+                size: file.size,
+            }
+        };
+
+        // if we have a mime type for the file, add it to the message metadata
+        if (file.type) {
+            content.info.mimetype = file.type;
         }
-    };
 
-    // if we have a mime type for the file, add it to the message metadata
-    if (file.type) {
-        content.info.mimetype = file.type;
-    }
-
-    var def = q.defer();
-    if (file.type.indexOf('image/') == 0) {
-        content.msgtype = 'm.image';
-        infoForImageFile(file).then(function(imageInfo) {
-            extend(content.info, imageInfo);
+        var def = q.defer();
+        if (file.type.indexOf('image/') == 0) {
+            content.msgtype = 'm.image';
+            infoForImageFile(file).then(function(imageInfo) {
+                extend(content.info, imageInfo);
+                def.resolve();
+            });
+        } else {
+            content.msgtype = 'm.file';
             def.resolve();
+        }
+
+        var upload = {
+            fileName: file.name,
+            roomId: roomId,
+            total: 0,
+            loaded: 0
+        };
+        this.inprogress.push(upload);
+        dis.dispatch({action: 'upload_started'});
+
+        var self = this;
+        return def.promise.then(function() {
+            upload.promise = matrixClient.uploadContent(file);
+            return upload.promise;
+        }).progress(function(ev) {
+            if (ev) {
+                upload.total = ev.total;
+                upload.loaded = ev.loaded;
+                dis.dispatch({action: 'upload_progress', upload: upload});
+            }
+        }).then(function(url) {
+            dis.dispatch({action: 'upload_finished', upload: upload});
+            content.url = url;
+            return matrixClient.sendMessage(roomId, content);
+        }, function(err) {
+            dis.dispatch({action: 'upload_failed', upload: upload});
+            if (!upload.canceled) {
+                var desc = "The file '"+upload.fileName+"' failed to upload.";
+                if (err.http_status == 413) {
+                    desc = "The file '"+upload.fileName+"' exceeds this home server's size limit for uploads";
+                }
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Upload Failed",
+                    description: desc
+                });
+            }
+        }).finally(function() {
+            var inprogressKeys = Object.keys(self.inprogress);
+            for (var i = 0; i < self.inprogress.length; ++i) {
+                var k = inprogressKeys[i];
+                if (self.inprogress[k].promise === upload.promise) {
+                    self.inprogress.splice(k, 1);
+                    break;
+                }
+            }
         });
-    } else {
-        content.msgtype = 'm.file';
-        def.resolve();
     }
 
-    return def.promise.then(function() {
-        return matrixClient.uploadContent(file);
-    }).then(function(url) {
-        content.url = url;
-        return matrixClient.sendMessage(roomId, content);
-    });
+    getCurrentUploads() {
+        return this.inprogress;
+    }
+
+    cancelUpload(promise) {
+        var inprogressKeys = Object.keys(this.inprogress);
+        var upload;
+        for (var i = 0; i < this.inprogress.length; ++i) {
+            var k = inprogressKeys[i];
+            if (this.inprogress[k].promise === promise) {
+                upload = this.inprogress[k];
+                break;
+            }
+        }
+        if (upload) {
+            upload.canceled = true;
+            MatrixClientPeg.get().cancelUpload(upload.promise);
+        }
+    }
 }
 
-module.exports = {
-    sendContentToRoom: sendContentToRoom
-};
+if (global.mx_ContentMessage === undefined) {
+    global.mx_ContentMessage = new ContentMessages();
+}
+
+module.exports = global.mx_ContentMessage;
diff --git a/src/DateUtils.js b/src/DateUtils.js
index fe363586ab..3b11b82ccf 100644
--- a/src/DateUtils.js
+++ b/src/DateUtils.js
@@ -35,10 +35,10 @@ module.exports = {
             return days[date.getDay()] + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
         }
         else if (now.getFullYear() === date.getFullYear()) {
-            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + (date.getDay()+1) + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
+            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
         }
         else {
-            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + (date.getDay()+1) + " " + date.getFullYear() + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
+            return days[date.getDay()] + ", " + months[date.getMonth()] + " " + date.getDate() + " " + date.getFullYear() + " " + pad(date.getHours()) + ':' + pad(date.getMinutes());
         }
     }
 }
diff --git a/src/HtmlUtils.js b/src/HtmlUtils.js
index 7a3cdd277b..95c6a46458 100644
--- a/src/HtmlUtils.js
+++ b/src/HtmlUtils.js
@@ -48,8 +48,15 @@ var sanitizeHtmlParams = {
     },
 };
 
-module.exports = {
-    _applyHighlights: function(safeSnippet, highlights, html, k) {
+class Highlighter {
+    constructor(html, highlightClass, onHighlightClick) {
+        this.html = html;
+        this.highlightClass = highlightClass;
+        this.onHighlightClick = onHighlightClick;
+        this._key = 0;
+    }
+
+    applyHighlights(safeSnippet, highlights) {
         var lastOffset = 0;
         var offset;
         var nodes = [];
@@ -61,77 +68,97 @@ module.exports = {
         // If and when this happens, we'll probably have to split his method in two between
         // HTML and plain-text highlighting.
 
-        var safeHighlight = html ? sanitizeHtml(highlights[0], sanitizeHtmlParams) : highlights[0];
-        while ((offset = safeSnippet.indexOf(safeHighlight, lastOffset)) >= 0) {
+        var safeHighlight = this.html ? sanitizeHtml(highlights[0], sanitizeHtmlParams) : highlights[0];
+        while ((offset = safeSnippet.toLowerCase().indexOf(safeHighlight.toLowerCase(), lastOffset)) >= 0) {
             // handle preamble
             if (offset > lastOffset) {
-                nodes = nodes.concat(this._applySubHighlightsInRange(safeSnippet, lastOffset, offset, highlights, html, k));
-                k += nodes.length;
+                var subSnippet = safeSnippet.substring(lastOffset, offset);
+                nodes = nodes.concat(this._applySubHighlights(subSnippet, highlights));
             }
 
             // do highlight
-            if (html) {
-                nodes.push(<span key={ k++ } dangerouslySetInnerHTML={{ __html: safeHighlight }} className="mx_MessageTile_searchHighlight" />);
-            }
-            else {
-                nodes.push(<span key={ k++ } className="mx_MessageTile_searchHighlight">{ safeHighlight }</span>);
-            }
+            nodes.push(this._createSpan(safeHighlight, true));
 
             lastOffset = offset + safeHighlight.length;
         }
 
         // handle postamble
         if (lastOffset != safeSnippet.length) {
-            nodes = nodes.concat(this._applySubHighlightsInRange(safeSnippet, lastOffset, undefined, highlights, html, k));
-            k += nodes.length;
+            var subSnippet = safeSnippet.substring(lastOffset, undefined);
+            nodes = nodes.concat(this._applySubHighlights(subSnippet, highlights));
         }
         return nodes;
-    },
+    }
 
-    _applySubHighlightsInRange: function(safeSnippet, lastOffset, offset, highlights, html, k) {
-        var nodes = [];
+    _applySubHighlights(safeSnippet, highlights) {
         if (highlights[1]) {
             // recurse into this range to check for the next set of highlight matches
-            var subnodes = this._applyHighlights( safeSnippet.substring(lastOffset, offset), highlights.slice(1), html, k );
-            nodes = nodes.concat(subnodes);
-            k += subnodes.length;
+            return this.applyHighlights(safeSnippet, highlights.slice(1));
         }
         else {
             // no more highlights to be found, just return the unhighlighted string
-            if (html) {
-                nodes.push(<span key={ k++ } dangerouslySetInnerHTML={{ __html: safeSnippet.substring(lastOffset, offset) }} />);
-            }
-            else {
-                nodes.push(<span key={ k++ }>{ safeSnippet.substring(lastOffset, offset) }</span>);
-            }
+            return [this._createSpan(safeSnippet, false)];
         }
-        return nodes;
-    },    
+    }
 
-    bodyToHtml: function(content, highlights) {
-        var originalBody = content.body;
-        var body;
-        var k = 0;
+    /* create a <span> node to hold the given content
+     *
+     * spanBody: content of the span. If html, must have been sanitised
+     * highlight: true to highlight as a search match
+     */
+    _createSpan(spanBody, highlight) {
+        var spanProps = {
+            key: this._key++,
+        };
 
-        if (highlights && highlights.length > 0) {
-            var bodyList = [];
+        if (highlight) {
+            spanProps.onClick = this.onHighlightClick;
+            spanProps.className = this.highlightClass;
+        }
 
-            if (content.format === "org.matrix.custom.html") {
-                var safeBody = sanitizeHtml(content.formatted_body, sanitizeHtmlParams);
-                bodyList = this._applyHighlights(safeBody, highlights, true, k);
-            }
-            else {
-                bodyList = this._applyHighlights(originalBody, highlights, true, k);
-            }
-            body = bodyList;
+        if (this.html) {
+            return (<span {...spanProps} dangerouslySetInnerHTML={{ __html: spanBody }} />);
         }
         else {
-            if (content.format === "org.matrix.custom.html") {
-                var safeBody = sanitizeHtml(content.formatted_body, sanitizeHtmlParams);
+            return (<span {...spanProps}>{ spanBody }</span>);
+        }
+    }
+}
+
+
+module.exports = {
+    /* turn a matrix event body into html
+     *
+     * content: 'content' of the MatrixEvent
+     *
+     * highlights: optional list of words to highlight
+     *
+     * opts.onHighlightClick: optional callback function to be called when a
+     *     highlighted word is clicked
+     */
+    bodyToHtml: function(content, highlights, opts) {
+        opts = opts || {};
+
+        var isHtml = (content.format === "org.matrix.custom.html");
+
+        var safeBody;
+        if (isHtml) {
+            safeBody = sanitizeHtml(content.formatted_body, sanitizeHtmlParams);
+        } else {
+            safeBody = content.body;
+        }
+
+        var body;
+        if (highlights && highlights.length > 0) {
+            var highlighter = new Highlighter(isHtml, "mx_EventTile_searchHighlight", opts.onHighlightClick);
+            body = highlighter.applyHighlights(safeBody, highlights);
+        }
+        else {
+            if (isHtml) {
                 body = <span className="markdown-body" dangerouslySetInnerHTML={{ __html: safeBody }} />;
             }
             else {
-                body = originalBody;
+                body = safeBody;
             }
         }
 
diff --git a/src/Notifier.js b/src/Notifier.js
index 66e96fb15c..a35c3bb1ee 100644
--- a/src/Notifier.js
+++ b/src/Notifier.js
@@ -29,7 +29,7 @@ var dis = require("./dispatcher");
  * }
  */
 
-module.exports = {
+var Notifier = {
 
     notificationMessageForEvent: function(ev) {
         return TextForEvent.textForEvent(ev);
@@ -98,13 +98,16 @@ module.exports = {
 
     start: function() {
         this.boundOnRoomTimeline = this.onRoomTimeline.bind(this);
+        this.boundOnSyncStateChange = this.onSyncStateChange.bind(this);
         MatrixClientPeg.get().on('Room.timeline', this.boundOnRoomTimeline);
+        MatrixClientPeg.get().on("sync", this.boundOnSyncStateChange);
         this.toolbarHidden = false;
     },
 
     stop: function() {
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener('Room.timeline', this.boundOnRoomTimeline);
+            MatrixClientPeg.get().removeListener('sync', this.boundOnSyncStateChange);
         }
     },
 
@@ -175,8 +178,15 @@ module.exports = {
         return this.toolbarHidden;
     },
 
+    onSyncStateChange: function(state) {
+        if (state === "PREPARED" || state === "SYNCING") {
+            this.isPrepared = true;
+        }
+    },
+
     onRoomTimeline: function(ev, room, toStartOfTimeline) {
         if (toStartOfTimeline) return;
+        if (!this.isPrepared) return; // don't alert for any messages initially
         if (ev.sender && ev.sender.userId == MatrixClientPeg.get().credentials.userId) return;
 
         if (!this.isEnabled()) {
@@ -190,3 +200,8 @@ module.exports = {
     }
 };
 
+if (!global.mxNotifier) {
+    global.mxNotifier = Notifier;
+}
+
+module.exports = global.mxNotifier;
\ No newline at end of file
diff --git a/src/Resend.js b/src/Resend.js
index b1132750b8..e07e571455 100644
--- a/src/Resend.js
+++ b/src/Resend.js
@@ -1,3 +1,19 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 var MatrixClientPeg = require('./MatrixClientPeg');
 var dis = require('./dispatcher');
 
@@ -21,4 +37,13 @@ module.exports = {
             event: event
         });
     },
+
+    removeFromQueue: function(event) {
+        MatrixClientPeg.get().getScheduler().removeEventFromQueue(event);
+        var room = MatrixClientPeg.get().getRoom(event.getRoomId());
+        if (!room) {
+            return;
+        }
+        room.removeEvents([event.getId()]);
+    }
 };
\ No newline at end of file
diff --git a/src/Signup.js b/src/Signup.js
index 02ddaacc6d..74c4ad5f19 100644
--- a/src/Signup.js
+++ b/src/Signup.js
@@ -116,8 +116,17 @@ class Register extends Signup {
 
     _tryRegister(authDict) {
         var self = this;
+
+        var bindEmail;
+
+        if (this.username && this.password) {
+            // only need to bind_email when sending u/p - sending it at other
+            // times clobbers the u/p resulting in M_MISSING_PARAM (password)
+            bindEmail = true;
+        }
+
         return MatrixClientPeg.get().register(
-            this.username, this.password, this.params.sessionId, authDict
+            this.username, this.password, this.params.sessionId, authDict, bindEmail
         ).then(function(result) {
             self.credentials = result;
             self.setStep("COMPLETE");
diff --git a/src/SlashCommands.js b/src/SlashCommands.js
index e6ea7533dc..f5eaff9066 100644
--- a/src/SlashCommands.js
+++ b/src/SlashCommands.js
@@ -99,29 +99,33 @@ var commands = {
                 }
 
                 // Try to find a room with this alias
+                // XXX: do we need to do this? Doesn't the JS SDK suppress duplicate attempts to join the same room?
                 var foundRoom = MatrixTools.getRoomForAlias(
                     MatrixClientPeg.get().getRooms(),
                     room_alias
                 );
-                if (foundRoom) { // we've already joined this room, view it.
-                    dis.dispatch({
-                        action: 'view_room',
-                        room_id: foundRoom.roomId
-                    });
-                    return success();
-                }
-                else {
-                    // attempt to join this alias.
-                    return success(
-                        MatrixClientPeg.get().joinRoom(room_alias).then(
-                        function(room) {
-                            dis.dispatch({
-                                action: 'view_room',
-                                room_id: room.roomId
-                            });
-                        })
-                    );
+
+                if (foundRoom) { // we've already joined this room, view it if it's not archived.
+                    var me = foundRoom.getMember(MatrixClientPeg.get().credentials.userId);
+                    if (me && me.membership !== "leave") {
+                        dis.dispatch({
+                            action: 'view_room',
+                            room_id: foundRoom.roomId
+                        });
+                        return success();                        
+                    }
                 }
+
+                // otherwise attempt to join this alias.
+                return success(
+                    MatrixClientPeg.get().joinRoom(room_alias).then(
+                    function(room) {
+                        dis.dispatch({
+                            action: 'view_room',
+                            room_id: room.roomId
+                        });
+                    })
+                );
             }
         }
         return reject("Usage: /join <room_alias>");
diff --git a/src/TabComplete.js b/src/TabComplete.js
new file mode 100644
index 0000000000..94be0193c6
--- /dev/null
+++ b/src/TabComplete.js
@@ -0,0 +1,307 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+var Entry = require("./TabCompleteEntries").Entry;
+
+const DELAY_TIME_MS = 1000;
+const KEY_TAB = 9;
+const KEY_SHIFT = 16;
+const KEY_WINDOWS = 91;
+
+// NB: DO NOT USE \b its "words" are roman alphabet only!
+//
+// Capturing group containing the start
+// of line or a whitespace char
+//     \_______________       __________Capturing group of 1 or more non-whitespace chars
+//                    _|__  _|_         followed by the end of line
+//                   /    \/   \
+const MATCH_REGEX = /(^|\s)(\S+)$/;
+
+class TabComplete {
+
+    constructor(opts) {
+        opts.startingWordSuffix = opts.startingWordSuffix || "";
+        opts.wordSuffix = opts.wordSuffix || "";
+        opts.allowLooping = opts.allowLooping || false;
+        opts.autoEnterTabComplete = opts.autoEnterTabComplete || false;
+        opts.onClickCompletes = opts.onClickCompletes || false;
+        this.opts = opts;
+        this.completing = false;
+        this.list = []; // full set of tab-completable things
+        this.matchedList = []; // subset of completable things to loop over
+        this.currentIndex = 0; // index in matchedList currently
+        this.originalText = null; // original input text when tab was first hit
+        this.textArea = opts.textArea; // DOMElement
+        this.isFirstWord = false; // true if you tab-complete on the first word
+        this.enterTabCompleteTimerId = null;
+        this.inPassiveMode = false;
+    }
+
+    /**
+     * @param {Entry[]} completeList
+     */
+    setCompletionList(completeList) {
+        this.list = completeList;
+        if (this.opts.onClickCompletes) {
+            // assign onClick listeners for each entry to complete the text
+            this.list.forEach((l) => {
+                l.onClick = () => {
+                    this.completeTo(l.getText());
+                }
+            });
+        }
+    }
+
+    /**
+     * @param {DOMElement}
+     */
+    setTextArea(textArea) {
+        this.textArea = textArea;
+    }
+
+    /**
+     * @return {Boolean}
+     */
+    isTabCompleting() {
+        // actually have things to tab over
+        return this.completing && this.matchedList.length > 1;
+    }
+
+    stopTabCompleting() {
+        this.completing = false;
+        this.currentIndex = 0;
+        this._notifyStateChange();
+    }
+
+    startTabCompleting() {
+        this.completing = true;
+        this.currentIndex = 0;
+        this._calculateCompletions();
+    }
+
+    /**
+     * Do an auto-complete with the given word. This terminates the tab-complete.
+     * @param {string} someVal
+     */
+    completeTo(someVal) {
+        this.textArea.value = this._replaceWith(someVal, true);
+        this.stopTabCompleting();
+        // keep focus on the text area
+        this.textArea.focus();
+    }
+
+    /**
+     * @param {Number} numAheadToPeek Return *up to* this many elements.
+     * @return {Entry[]}
+     */
+    peek(numAheadToPeek) {
+        if (this.matchedList.length === 0) {
+            return [];
+        }
+        var peekList = [];
+
+        // return the current match item and then one with an index higher, and
+        // so on until we've reached the requested limit. If we hit the end of
+        // the list of options we're done.
+        for (var i = 0; i < numAheadToPeek; i++) {
+            var nextIndex;
+            if (this.opts.allowLooping) {
+                nextIndex = (this.currentIndex + i) % this.matchedList.length;
+            }
+            else {
+                nextIndex = this.currentIndex + i;
+                if (nextIndex === this.matchedList.length) {
+                    break;
+                }
+            }
+            peekList.push(this.matchedList[nextIndex]);
+        }
+        // console.log("Peek list(%s): %s", numAheadToPeek, JSON.stringify(peekList));
+        return peekList;
+    }
+
+    handleTabPress(passive, shiftKey) {
+        var wasInPassiveMode = this.inPassiveMode && !passive;
+        this.inPassiveMode = passive;
+
+        if (!this.completing) {
+            this.startTabCompleting();
+        }
+
+        if (shiftKey) {
+            this.nextMatchedEntry(-1);
+        }
+        else {
+            // if we were in passive mode we got out of sync by incrementing the
+            // index to show the peek view but not set the text area. Therefore,
+            // we want to set the *current* index rather than the *next* index.
+            this.nextMatchedEntry(wasInPassiveMode ? 0 : 1);
+        }
+        this._notifyStateChange();
+    }
+
+    /**
+     * @param {DOMEvent} e
+     */
+    onKeyDown(ev) {
+        if (!this.textArea) {
+            console.error("onKeyDown called before a <textarea> was set!");
+            return;
+        }
+
+        if (ev.keyCode !== KEY_TAB) {
+            // pressing any key (except shift, windows, cmd (OSX) and ctrl/alt combinations)
+            // aborts the current tab completion
+            if (this.completing && ev.keyCode !== KEY_SHIFT &&
+                    !ev.metaKey && !ev.ctrlKey && !ev.altKey && ev.keyCode !== KEY_WINDOWS) {
+                // they're resuming typing; reset tab complete state vars.
+                this.stopTabCompleting();
+            }
+
+
+            // explicitly pressing any key except tab removes passive mode. Tab doesn't remove
+            // passive mode because handleTabPress needs to know when passive mode is toggling
+            // off so it can resync the textarea/peek list. If tab did remove passive mode then
+            // handleTabPress would never be able to tell when passive mode toggled off.
+            this.inPassiveMode = false;
+
+            // pressing any key at all (except tab) restarts the automatic tab-complete timer
+            if (this.opts.autoEnterTabComplete) {
+                clearTimeout(this.enterTabCompleteTimerId);
+                this.enterTabCompleteTimerId = setTimeout(() => {
+                    if (!this.completing) {
+                        this.handleTabPress(true, false);
+                    }
+                }, DELAY_TIME_MS);
+            }
+
+            return;
+        }
+
+        // tab key has been pressed at this point
+        this.handleTabPress(false, ev.shiftKey)
+
+        // prevent the default TAB operation (typically focus shifting)
+        ev.preventDefault();
+    }
+
+    /**
+     * Set the textarea to the next value in the matched list.
+     * @param {Number} offset Offset to apply *before* setting the next value.
+     */
+    nextMatchedEntry(offset) {
+        if (this.matchedList.length === 0) {
+            return;
+        }
+
+        // work out the new index, wrapping if necessary.
+        this.currentIndex += offset;
+        if (this.currentIndex >= this.matchedList.length) {
+            this.currentIndex = 0;
+        }
+        else if (this.currentIndex < 0) {
+            this.currentIndex = this.matchedList.length - 1;
+        }
+        var isTransitioningToOriginalText = (
+            // impossible to transition if they've never hit tab
+            !this.inPassiveMode && this.currentIndex === 0
+        );
+
+        if (!this.inPassiveMode) {
+            // set textarea to this new value
+            this.textArea.value = this._replaceWith(
+                this.matchedList[this.currentIndex].text,
+                this.currentIndex !== 0 // don't suffix the original text!
+            );
+        }
+
+        // visual display to the user that we looped - TODO: This should be configurable
+        if (isTransitioningToOriginalText) {
+            this.textArea.style["background-color"] = "#faa";
+            setTimeout(() => { // yay for lexical 'this'!
+                 this.textArea.style["background-color"] = "";
+            }, 150);
+
+            if (!this.opts.allowLooping) {
+                this.stopTabCompleting();
+            }
+        }
+        else {
+            this.textArea.style["background-color"] = ""; // cancel blinks TODO: required?
+        }
+    }
+
+    _replaceWith(newVal, includeSuffix) {
+        // The regex to replace the input matches a character of whitespace AND
+        // the partial word. If we just use string.replace() with the regex it will
+        // replace the partial word AND the character of whitespace. We want to
+        // preserve whatever that character is (\n, \t, etc) so find out what it is now.
+        var boundaryChar;
+        var res = MATCH_REGEX.exec(this.originalText);
+        if (res) {
+            boundaryChar = res[1]; // the first captured group
+        }
+        if (boundaryChar === undefined) {
+            console.warn("Failed to find boundary char on text: '%s'", this.originalText);
+            boundaryChar = "";
+        }
+
+        var replacementText = (
+            boundaryChar + newVal + (
+                includeSuffix ?
+                    (this.isFirstWord ? this.opts.startingWordSuffix : this.opts.wordSuffix) :
+                    ""
+            )
+        );
+        return this.originalText.replace(MATCH_REGEX, function() {
+            return replacementText; // function form to avoid `$` special-casing
+        });
+    }
+
+    _calculateCompletions() {
+        this.originalText = this.textArea.value; // cache starting text
+
+        // grab the partial word from the text which we'll be tab-completing
+        var res = MATCH_REGEX.exec(this.originalText);
+        if (!res) {
+            this.matchedList = [];
+            return;
+        }
+        // ES6 destructuring; ignore first element (the complete match)
+        var [ , boundaryGroup, partialGroup] = res;
+        this.isFirstWord = partialGroup.length === this.originalText.length;
+
+        this.matchedList = [
+            new Entry(partialGroup) // first entry is always the original partial
+        ];
+
+        // find matching entries in the set of entries given to us
+        this.list.forEach((entry) => {
+            if (entry.text.toLowerCase().indexOf(partialGroup.toLowerCase()) === 0) {
+                this.matchedList.push(entry);
+            }
+        });
+
+        // console.log("_calculateCompletions => %s", JSON.stringify(this.matchedList));
+    }
+
+    _notifyStateChange() {
+        if (this.opts.onStateChange) {
+            this.opts.onStateChange(this.completing);
+        }
+    }
+};
+
+module.exports = TabComplete;
diff --git a/src/TabCompleteEntries.js b/src/TabCompleteEntries.js
new file mode 100644
index 0000000000..6d1a51c9b2
--- /dev/null
+++ b/src/TabCompleteEntries.js
@@ -0,0 +1,101 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+var React = require("react");
+var sdk = require("./index");
+
+class Entry {
+    constructor(text) {
+        this.text = text;
+    }
+
+    /**
+     * @return {string} The text to display in this entry.
+     */
+    getText() {
+        return this.text;
+    }
+
+    /**
+     * @return {ReactClass} Raw JSX
+     */
+    getImageJsx() {
+        return null;
+    }
+
+    /**
+     * @return {?string} The unique key= prop for React dedupe
+     */
+    getKey() {
+        return null;
+    }
+
+    /**
+     * Called when this entry is clicked.
+     */
+    onClick() {
+        // NOP
+    }
+}
+
+class MemberEntry extends Entry {
+    constructor(member) {
+        super(member.name || member.userId);
+        this.member = member;
+    }
+
+    getImageJsx() {
+        var MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
+        return (
+            <MemberAvatar member={this.member} width={24} height={24} />
+        );
+    }
+
+    getKey() {
+        return this.member.userId;
+    }
+}
+
+MemberEntry.fromMemberList = function(members) {
+    return members.sort(function(a, b) {
+        var userA = a.user;
+        var userB = b.user;
+        if (userA && !userB) {
+            return -1; // a comes first
+        }
+        else if (!userA && userB) {
+            return 1; // b comes first
+        }
+        else if (!userA && !userB) {
+            return 0; // don't care
+        }
+        else { // both User objects exist
+            if (userA.lastActiveAgo < userB.lastActiveAgo) {
+                return -1; // a comes first
+            }
+            else if (userA.lastActiveAgo > userB.lastActiveAgo) {
+                return 1; // b comes first
+            }
+            else {
+                return 0; // same last active ago
+            }
+        }
+    }).map(function(m) {
+        return new MemberEntry(m);
+    });
+}
+
+module.exports.Entry = Entry;
+module.exports.MemberEntry = MemberEntry;
diff --git a/src/TextForEvent.js b/src/TextForEvent.js
index 439d7b9ef5..5296ef833e 100644
--- a/src/TextForEvent.js
+++ b/src/TextForEvent.js
@@ -9,7 +9,17 @@ function textForMemberEvent(ev) {
     ) : "";
     switch (ev.getContent().membership) {
         case 'invite':
-            return senderName + " invited " + targetName + ".";
+            var threePidContent = ev.getContent().third_party_invite;
+            if (threePidContent) {
+                // TODO: When we have third_party_invite.display_name we should
+                // do this as "$displayname received the invitation from $sender"
+                // or equiv
+                return targetName + " received an invitation from " + senderName +
+                    ".";
+            }
+            else {
+                return senderName + " invited " + targetName + ".";
+            }
         case 'ban':
             return senderName + " banned " + targetName + "." + reason;
         case 'join':
@@ -101,6 +111,12 @@ function textForCallInviteEvent(event) {
     return senderName + " placed a " + type + " call." + supported;
 };
 
+function textForThreePidInviteEvent(event) {
+    var senderName = event.sender ? event.sender.name : event.getSender();
+    return senderName + " sent an invitation to " + event.getContent().display_name +
+     " to join the room.";
+};
+
 var handlers = {
     'm.room.message': textForMessageEvent,
     'm.room.name':    textForRoomNameEvent,
@@ -109,6 +125,7 @@ var handlers = {
     'm.call.invite':  textForCallInviteEvent,
     'm.call.answer':  textForCallAnswerEvent,
     'm.call.hangup':  textForCallHangupEvent,
+    'm.room.third_party_invite': textForThreePidInviteEvent
 };
 
 module.exports = {
diff --git a/src/UnreadStatus.js b/src/UnreadStatus.js
new file mode 100644
index 0000000000..c8693c1e50
--- /dev/null
+++ b/src/UnreadStatus.js
@@ -0,0 +1,30 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+module.exports = {
+    /**
+     * Returns true iff this event arriving in a room should affect the room's
+     * count of unread messages
+     */
+    eventTriggersUnreadCount: function(ev) {
+        if (ev.getType() == "m.room.member") {
+            return false;
+        } else if (ev.getType == 'm.room.message' && ev.getContent().msgtype == 'm.notify') {
+            return false;
+        }
+        return true;
+    }
+};
diff --git a/src/UserSettingsStore.js b/src/UserSettingsStore.js
new file mode 100644
index 0000000000..f2ada35b24
--- /dev/null
+++ b/src/UserSettingsStore.js
@@ -0,0 +1,67 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var MatrixClientPeg = require("./MatrixClientPeg");
+var Notifier = require("./Notifier");
+
+/*
+ * TODO: Make things use this. This is all WIP - see UserSettings.js for usage.
+ */
+
+module.exports = {
+
+    loadProfileInfo: function() {
+        var cli = MatrixClientPeg.get();
+        return cli.getProfileInfo(cli.credentials.userId);
+    },
+
+    saveDisplayName: function(newDisplayname) {
+        return MatrixClientPeg.get().setDisplayName(newDisplayname);
+    },
+
+    loadThreePids: function() {
+        return MatrixClientPeg.get().getThreePids();
+    },
+
+    saveThreePids: function(threePids) {
+        // TODO
+    },
+
+    getEnableNotifications: function() {
+        return Notifier.isEnabled();
+    },
+
+    setEnableNotifications: function(enable) {
+        if (!Notifier.supportsDesktopNotifications()) {
+            return;
+        }
+        Notifier.setEnabled(enable);
+    },
+
+    changePassword: function(old_password, new_password) {
+        var cli = MatrixClientPeg.get();
+
+        var authDict = {
+            type: 'm.login.password',
+            user: cli.credentials.userId,
+            password: old_password
+        };
+
+        return cli.setPassword(authDict, new_password);
+    },
+};
diff --git a/src/component-index.js b/src/component-index.js
index b9821b6c56..f10549ce4d 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -28,6 +28,8 @@ module.exports.components['structures.login.PostRegistration'] = require('./comp
 module.exports.components['structures.login.Registration'] = require('./components/structures/login/Registration');
 module.exports.components['structures.MatrixChat'] = require('./components/structures/MatrixChat');
 module.exports.components['structures.RoomView'] = require('./components/structures/RoomView');
+module.exports.components['structures.ScrollPanel'] = require('./components/structures/ScrollPanel');
+module.exports.components['structures.UploadBar'] = require('./components/structures/UploadBar');
 module.exports.components['structures.UserSettings'] = require('./components/structures/UserSettings');
 module.exports.components['views.avatars.MemberAvatar'] = require('./components/views/avatars/MemberAvatar');
 module.exports.components['views.avatars.RoomAvatar'] = require('./components/views/avatars/RoomAvatar');
@@ -64,6 +66,7 @@ module.exports.components['views.rooms.RoomHeader'] = require('./components/view
 module.exports.components['views.rooms.RoomList'] = require('./components/views/rooms/RoomList');
 module.exports.components['views.rooms.RoomSettings'] = require('./components/views/rooms/RoomSettings');
 module.exports.components['views.rooms.RoomTile'] = require('./components/views/rooms/RoomTile');
+module.exports.components['views.rooms.TabCompleteBar'] = require('./components/views/rooms/TabCompleteBar');
 module.exports.components['views.settings.ChangeAvatar'] = require('./components/views/settings/ChangeAvatar');
 module.exports.components['views.settings.ChangeDisplayName'] = require('./components/views/settings/ChangeDisplayName');
 module.exports.components['views.settings.ChangePassword'] = require('./components/views/settings/ChangePassword');
diff --git a/src/components/structures/CreateRoom.js b/src/components/structures/CreateRoom.js
index d6002fb84c..f520318a0a 100644
--- a/src/components/structures/CreateRoom.js
+++ b/src/components/structures/CreateRoom.js
@@ -251,13 +251,15 @@ module.exports = React.createClass({
             var UserSelector = sdk.getComponent("elements.UserSelector");
             var RoomHeader = sdk.getComponent("rooms.RoomHeader");
 
+            var domain = MatrixClientPeg.get().credentials.userId.replace(/^.*:/, '');
+
             return (
             <div className="mx_CreateRoom">
                 <RoomHeader simpleHeader="Create room" />
                 <div className="mx_CreateRoom_body">
                     <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
                     <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Topic"/> <br />
-                    <RoomAlias ref="alias" alias={this.state.alias} onChange={this.onAliasChanged}/> <br />
+                    <RoomAlias ref="alias" alias={this.state.alias} homeserver={ domain } onChange={this.onAliasChanged}/> <br />
                     <UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged}/> <br />
                     <Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/> <br />
                     <div>
diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js
index 4af6e96c96..ead0eb6492 100644
--- a/src/components/structures/MatrixChat.js
+++ b/src/components/structures/MatrixChat.js
@@ -29,6 +29,7 @@ var Login = require("./login/Login");
 var Registration = require("./login/Registration");
 var PostRegistration = require("./login/PostRegistration");
 
+var Modal = require("../../Modal");
 var sdk = require('../../index');
 var MatrixTools = require('../../MatrixTools');
 var linkifyMatrix = require("../../linkify-matrix");
@@ -41,7 +42,8 @@ module.exports = React.createClass({
         ConferenceHandler: React.PropTypes.any,
         onNewScreen: React.PropTypes.func,
         registrationUrl: React.PropTypes.string,
-        enableGuest: React.PropTypes.bool
+        enableGuest: React.PropTypes.bool,
+        startingQueryParams: React.PropTypes.object
     },
 
     PageTypes: {
@@ -75,6 +77,12 @@ module.exports = React.createClass({
         return s;
     },
 
+    getDefaultProps: function() {
+        return {
+            startingQueryParams: {}
+        };
+    },
+
     componentDidMount: function() {
         this._autoRegisterAsGuest = false;
         if (this.props.enableGuest) {
@@ -94,6 +102,9 @@ module.exports = React.createClass({
             this.startMatrixClient();
         }
         this.focusComposer = false;
+        // scrollStateMap is a map from room id to the scroll state returned by
+        // RoomView.getScrollState()
+        this.scrollStateMap = {};
         document.addEventListener("keydown", this.onKeyDown);
         window.addEventListener("focus", this.onFocus);
 
@@ -246,28 +257,38 @@ module.exports = React.createClass({
                 });
 
                 break;
-            case 'view_room':
-                this.focusComposer = true;
-                var newState = {
-                    currentRoom: payload.room_id,
-                    page_type: this.PageTypes.RoomView,
-                };
-                if (this.sdkReady) {
-                    // if the SDK is not ready yet, remember what room
-                    // we're supposed to be on but don't notify about
-                    // the new screen yet (we won't be showing it yet)
-                    // The normal case where this happens is navigating
-                    // to the room in the URL bar on page load.
-                    var presentedId = payload.room_id;
-                    var room = MatrixClientPeg.get().getRoom(payload.room_id);
-                    if (room) {
-                        var theAlias = MatrixTools.getCanonicalAliasForRoom(room);
-                        if (theAlias) presentedId = theAlias;
+            case 'leave_room':
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+                var roomId = payload.room_id;
+                Modal.createDialog(QuestionDialog, {
+                    title: "Leave room",
+                    description: "Are you sure you want to leave the room?",
+                    onFinished: function(should_leave) {
+                        if (should_leave) {
+                            var d = MatrixClientPeg.get().leave(roomId);
+                            
+                            // FIXME: controller shouldn't be loading a view :(
+                            var Loader = sdk.getComponent("elements.Spinner");
+                            var modal = Modal.createDialog(Loader);
+
+                            d.then(function() {
+                                modal.close();
+                                dis.dispatch({action: 'view_next_room'});
+                            }, function(err) {
+                                modal.close();
+                                Modal.createDialog(ErrorDialog, {
+                                    title: "Failed to leave room",
+                                    description: err.toString()
+                                });
+                            });
+                        }
                     }
-                    this.notifyNewScreen('room/'+presentedId);
-                    newState.ready = true;
-                }
-                this.setState(newState);
+                });
+                break;
+            case 'view_room':
+                this._viewRoom(payload.room_id);
                 break;
             case 'view_prev_room':
                 roomIndexDelta = -1;
@@ -284,11 +305,7 @@ module.exports = React.createClass({
                 }
                 roomIndex = (roomIndex + roomIndexDelta) % allRooms.length;
                 if (roomIndex < 0) roomIndex = allRooms.length - 1;
-                this.focusComposer = true;
-                this.setState({
-                    currentRoom: allRooms[roomIndex].roomId
-                });
-                this.notifyNewScreen('room/'+allRooms[roomIndex].roomId);
+                this._viewRoom(allRooms[roomIndex].roomId);
                 break;
             case 'view_indexed_room':
                 var allRooms = RoomListSorter.mostRecentActivityFirst(
@@ -296,11 +313,7 @@ module.exports = React.createClass({
                 );
                 var roomIndex = payload.roomIndex;
                 if (allRooms[roomIndex]) {
-                    this.focusComposer = true;
-                    this.setState({
-                        currentRoom: allRooms[roomIndex].roomId
-                    });
-                    this.notifyNewScreen('room/'+allRooms[roomIndex].roomId);
+                    this._viewRoom(allRooms[roomIndex].roomId);
                 }
                 break;
             case 'view_room_alias':
@@ -324,21 +337,15 @@ module.exports = React.createClass({
                 });
                 break;
             case 'view_user_settings':
-                this.setState({
-                    page_type: this.PageTypes.UserSettings,
-                });
+                this._setPage(this.PageTypes.UserSettings);
                 this.notifyNewScreen('settings');
                 break;
             case 'view_create_room':
-                this.setState({
-                    page_type: this.PageTypes.CreateRoom,
-                });
+                this._setPage(this.PageTypes.CreateRoom);
                 this.notifyNewScreen('new');
                 break;
             case 'view_room_directory':
-                this.setState({
-                    page_type: this.PageTypes.RoomDirectory,
-                });
+                this._setPage(this.PageTypes.RoomDirectory);
                 this.notifyNewScreen('directory');
                 break;
             case 'notifier_enabled':
@@ -367,6 +374,58 @@ module.exports = React.createClass({
         }
     },
 
+    _setPage: function(pageType) {
+        // record the scroll state if we're in a room view.
+        this._updateScrollMap();
+
+        this.setState({
+            page_type: pageType,
+        });
+    },
+
+    _viewRoom: function(roomId) {
+        // before we switch room, record the scroll state of the current room
+        this._updateScrollMap();
+
+        this.focusComposer = true;
+        var newState = {
+            currentRoom: roomId,
+            page_type: this.PageTypes.RoomView,
+        };
+        if (this.sdkReady) {
+            // if the SDK is not ready yet, remember what room
+            // we're supposed to be on but don't notify about
+            // the new screen yet (we won't be showing it yet)
+            // The normal case where this happens is navigating
+            // to the room in the URL bar on page load.
+            var presentedId = roomId;
+            var room = MatrixClientPeg.get().getRoom(roomId);
+            if (room) {
+                var theAlias = MatrixTools.getCanonicalAliasForRoom(room);
+                if (theAlias) presentedId = theAlias;
+            }
+            this.notifyNewScreen('room/'+presentedId);
+            newState.ready = true;
+        }
+        this.setState(newState);
+        if (this.scrollStateMap[roomId]) {
+            var scrollState = this.scrollStateMap[roomId];
+            this.refs.roomView.restoreScrollState(scrollState);
+        }
+    },
+
+    // update scrollStateMap according to the current scroll state of the
+    // room view.
+    _updateScrollMap: function() {
+        if (!this.refs.roomView) {
+            return;
+        }
+
+        var roomview = this.refs.roomView;
+        var state = roomview.getScrollState();
+        this.scrollStateMap[roomview.props.roomId] = state;
+    },
+
     onLoggedIn: function(credentials) {
         credentials.guest = Boolean(credentials.guest);
         console.log("onLoggedIn => %s (guest=%s)", credentials.userId, credentials.guest);
@@ -385,7 +444,10 @@ module.exports = React.createClass({
     startMatrixClient: function() {
         var cli = MatrixClientPeg.get();
         var self = this;
-        cli.on('sync', function(state) {
+        cli.on('sync', function(state, prevState) {
+            if (state === "SYNCING" && prevState === "SYNCING") {
+                return;
+            }
             console.log("MatrixClient sync state => %s", state);
             if (state !== "PREPARED") { return; }
             self.sdkReady = true;
@@ -434,7 +496,9 @@ module.exports = React.createClass({
         Notifier.start();
         UserActivity.start();
         Presence.start();
-        cli.startClient();
+        cli.startClient({
+            pendingEventOrdering: "end"
+        });
     },
 
     onKeyDown: function(ev) {
@@ -610,6 +674,22 @@ module.exports = React.createClass({
         this.showScreen("settings");
     },
 
+    onUserSettingsClose: function() {
+        // XXX: use browser history instead to find the previous room?
+        if (this.state.currentRoom) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: this.state.currentRoom,
+            });
+        }
+        else {
+            dis.dispatch({
+                action: 'view_indexed_room',
+                roomIndex: 0,
+            });
+        }
+    },
+
     render: function() {
         var LeftPanel = sdk.getComponent('structures.LeftPanel');
         var RoomView = sdk.getComponent('structures.RoomView');
@@ -634,6 +714,7 @@ module.exports = React.createClass({
                 case this.PageTypes.RoomView:
                     page_element = (
                         <RoomView
+                            ref="roomView"
                             roomId={this.state.currentRoom}
                             key={this.state.currentRoom}
                             ConferenceHandler={this.props.ConferenceHandler} />
@@ -641,7 +722,7 @@ module.exports = React.createClass({
                     right_panel = <RightPanel roomId={this.state.currentRoom} collapsed={this.state.collapse_rhs} />
                     break;
                 case this.PageTypes.UserSettings:
-                    page_element = <UserSettings />
+                    page_element = <UserSettings onClose={this.onUserSettingsClose} />
                     right_panel = <RightPanel collapsed={this.state.collapse_rhs}/>
                     break;
                 case this.PageTypes.CreateRoom:
@@ -702,6 +783,7 @@ module.exports = React.createClass({
                     clientSecret={this.state.register_client_secret}
                     sessionId={this.state.register_session_id}
                     idSid={this.state.register_id_sid}
+                    email={this.props.startingQueryParams.email}
                     hsUrl={this.props.config.default_hs_url}
                     isUrl={this.props.config.default_is_url}
                     registrationUrl={this.props.registrationUrl}
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 5b7496e8b2..56dd41d929 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -23,10 +23,8 @@ limitations under the License.
 
 var React = require("react");
 var ReactDOM = require("react-dom");
-var GeminiScrollbar = require('react-gemini-scrollbar');
 var q = require("q");
 var classNames = require("classnames");
-var filesize = require('filesize');
 var Matrix = require("matrix-js-sdk");
 
 var MatrixClientPeg = require("../../MatrixClientPeg");
@@ -35,18 +33,26 @@ var WhoIsTyping = require("../../WhoIsTyping");
 var Modal = require("../../Modal");
 var sdk = require('../../index');
 var CallHandler = require('../../CallHandler');
+var TabComplete = require("../../TabComplete");
+var MemberEntry = require("../../TabCompleteEntries").MemberEntry;
 var Resend = require("../../Resend");
 var dis = require("../../dispatcher");
 
 var PAGINATE_SIZE = 20;
 var INITIAL_SIZE = 20;
 
+var DEBUG_SCROLL = false;
+
 module.exports = React.createClass({
     displayName: 'RoomView',
     propTypes: {
         ConferenceHandler: React.PropTypes.any
     },
 
+    /* properties in RoomView objects include:
+     *
+     * eventNodes: a map from event id to DOM node representing that event
+     */
     getInitialState: function() {
         var room = this.props.roomId ? MatrixClientPeg.get().getRoom(this.props.roomId) : null;
         return {
@@ -59,7 +65,8 @@ module.exports = React.createClass({
             searching: false,
             searchResults: null,
             syncState: MatrixClientPeg.get().getSyncState(),
-            hasUnsentMessages: this._hasUnsentMessages(room)
+            hasUnsentMessages: this._hasUnsentMessages(room),
+            callState: null,
         }
     },
 
@@ -71,11 +78,26 @@ module.exports = React.createClass({
         MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
         MatrixClientPeg.get().on("RoomState.members", this.onRoomStateMember);
         MatrixClientPeg.get().on("sync", this.onSyncStateChange);
-        this.atBottom = true;
+        // xchat-style tab complete, add a colon if tab
+        // completing at the start of the text
+        this.tabComplete = new TabComplete({
+            startingWordSuffix: ": ",
+            wordSuffix: " ",
+            allowLooping: false,
+            autoEnterTabComplete: true,
+            onClickCompletes: true,
+            onStateChange: (isCompleting) => {
+                this.forceUpdate();
+            }
+        });
     },
 
     componentWillUnmount: function() {
         if (this.refs.messagePanel) {
+            // disconnect the D&D event listeners from the message panel. This
+            // is really just for hygiene - the messagePanel is going to be
+            // deleted anyway, so it doesn't matter if the event listeners
+            // don't get cleaned up.
             var messagePanel = ReactDOM.findDOMNode(this.refs.messagePanel);
             messagePanel.removeEventListener('drop', this.onDrop);
             messagePanel.removeEventListener('dragover', this.onDragOver);
@@ -91,6 +113,8 @@ module.exports = React.createClass({
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
             MatrixClientPeg.get().removeListener("sync", this.onSyncStateChange);
         }
+
+        window.removeEventListener('resize', this.onResize);        
     },
 
     onAction: function(payload) {
@@ -107,22 +131,41 @@ module.exports = React.createClass({
                 this.forceUpdate();
                 break;
             case 'notifier_enabled':
+            case 'upload_failed':
+            case 'upload_started':
+            case 'upload_finished':
                 this.forceUpdate();
                 break;
             case 'call_state':
-                if (CallHandler.getCallForRoom(this.props.roomId)) {
+                // don't filter out payloads for room IDs other than props.room because
+                // we may be interested in the conf 1:1 room
+
+                if (!payload.room_id) {
+                    return;
+                }
+
+                var call = CallHandler.getCallForRoom(payload.room_id);
+                var callState;
+
+                if (call) {
                     // Call state has changed so we may be loading video elements
                     // which will obscure the message log.
                     // scroll to bottom
-                    var scrollNode = this._getScrollNode();
-                    if (scrollNode) {
-                        scrollNode.scrollTop = scrollNode.scrollHeight;
-                    }
+                    this.scrollToBottom();
+                    callState = call.call_state;
+                }
+                else {
+                    callState = "ended";
                 }
 
                 // possibly remove the conf call notification if we're now in
                 // the conf
                 this._updateConfCallNotification();
+
+                this.setState({
+                    callState: callState
+                });
+
                 break;
             case 'user_activity':
                 this.sendReadReceipt();
@@ -130,18 +173,10 @@ module.exports = React.createClass({
         }
     },
 
-    _getScrollNode: function() {
-        var panel = ReactDOM.findDOMNode(this.refs.messagePanel);
-        if (!panel) return null;
-
-        if (panel.classList.contains('gm-prevented')) {
-            return panel;
-        } else {
-            return panel.children[2]; // XXX: Fragile!
+    onSyncStateChange: function(state, prevState) {
+        if (state === "SYNCING" && prevState === "SYNCING") {
+            return;
         }
-    },
-
-    onSyncStateChange: function(state) {
         this.setState({
             syncState: state
         });
@@ -167,19 +202,11 @@ module.exports = React.createClass({
         if (this.state.joining) return;
         if (room.roomId != this.props.roomId) return;
 
-        var scrollNode = this._getScrollNode();
-        if (scrollNode) {
-            this.atBottom = (
-                scrollNode.scrollHeight - scrollNode.scrollTop <=
-                (scrollNode.clientHeight + 150) // 150?
-            );
-        }
-
         var currentUnread = this.state.numUnreadMessages;
         if (!toStartOfTimeline &&
                 (ev.getSender() !== MatrixClientPeg.get().credentials.userId)) {
             // update unread count when scrolled up
-            if (this.atBottom) {
+            if (!this.state.searchResults && this.refs.messagePanel && this.refs.messagePanel.isAtBottom()) {
                 currentUnread = 0;
             }
             else {
@@ -187,15 +214,10 @@ module.exports = React.createClass({
             }
         }
 
-
         this.setState({
             room: MatrixClientPeg.get().getRoom(this.props.roomId),
             numUnreadMessages: currentUnread
         });
-
-        if (toStartOfTimeline && !this.state.paginating) {
-            this.fillSpace();
-        }
     },
 
     onRoomName: function(room) {
@@ -217,6 +239,11 @@ module.exports = React.createClass({
     },
 
     onRoomStateMember: function(ev, state, member) {
+        if (member.roomId === this.props.roomId) {
+            // a member state changed in this room, refresh the tab complete list
+            this._updateTabCompleteList(this.state.room);
+        }
+
         if (!this.props.ConferenceHandler) {
             return;
         }
@@ -266,77 +293,113 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         if (this.refs.messagePanel) {
-            var messagePanel = ReactDOM.findDOMNode(this.refs.messagePanel);
-
-            messagePanel.addEventListener('drop', this.onDrop);
-            messagePanel.addEventListener('dragover', this.onDragOver);
-            messagePanel.addEventListener('dragleave', this.onDragLeaveOrEnd);
-            messagePanel.addEventListener('dragend', this.onDragLeaveOrEnd);
-
-            var messageWrapperScroll = this._getScrollNode();
-
-            messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
-
-            this.sendReadReceipt();
-
-            this.fillSpace();
+            this._initialiseMessagePanel();
         }
 
+        var call = CallHandler.getCallForRoom(this.props.roomId);
+        var callState = call ? call.call_state : "ended";
+        this.setState({
+            callState: callState
+        });
+
         this._updateConfCallNotification();
+
+        window.addEventListener('resize', this.onResize);
+        this.onResize();
+
+        this._updateTabCompleteList(this.state.room);
+    },
+
+    _updateTabCompleteList: function(room) {
+        if (!room || !this.tabComplete) {
+            return;
+        }
+        this.tabComplete.setCompletionList(
+            MemberEntry.fromMemberList(room.getJoinedMembers())
+        );
+    },
+
+    _initialiseMessagePanel: function() {
+        var messagePanel = ReactDOM.findDOMNode(this.refs.messagePanel);
+        this.refs.messagePanel.initialised = true;
+
+        messagePanel.addEventListener('drop', this.onDrop);
+        messagePanel.addEventListener('dragover', this.onDragOver);
+        messagePanel.addEventListener('dragleave', this.onDragLeaveOrEnd);
+        messagePanel.addEventListener('dragend', this.onDragLeaveOrEnd);
+
+        this.scrollToBottom();
+        this.sendReadReceipt();
+
+        this.refs.messagePanel.checkFillState();
     },
 
     componentDidUpdate: function() {
+        // we need to initialise the messagepanel if we've just joined the
+        // room. TODO: we really really ought to factor out messagepanel to a
+        // separate component to avoid this ridiculous dance.
         if (!this.refs.messagePanel) return;
 
-        var messageWrapperScroll = this._getScrollNode();
-
-        if (this.state.paginating && !this.waiting_for_paginate) {
-            var heightGained = messageWrapperScroll.scrollHeight - this.oldScrollHeight;
-            messageWrapperScroll.scrollTop += heightGained;
-            this.oldScrollHeight = undefined;
-            if (!this.fillSpace()) {
-                this.setState({paginating: false});
-            }
-        } else if (this.atBottom) {
-            messageWrapperScroll.scrollTop = messageWrapperScroll.scrollHeight;
-            if (this.state.numUnreadMessages !== 0) {
-                this.setState({numUnreadMessages: 0});
-            }
+        if (!this.refs.messagePanel.initialised) {
+            this._initialiseMessagePanel();
         }
     },
 
-    fillSpace: function() {
-        if (!this.refs.messagePanel) return;
-        if (this.state.searchResults) return; // TODO: paginate search results
-        var messageWrapperScroll = this._getScrollNode();
-        if (messageWrapperScroll.scrollTop < messageWrapperScroll.clientHeight && this.state.room.oldState.paginationToken) {
-            this.setState({paginating: true});
+    _paginateCompleted: function() {
+        if (DEBUG_SCROLL) console.log("paginate complete");
 
-            this.oldScrollHeight = messageWrapperScroll.scrollHeight;
+        this.setState({
+            room: MatrixClientPeg.get().getRoom(this.props.roomId)
+        });
 
-            if (this.state.messageCap < this.state.room.timeline.length) {
-                this.waiting_for_paginate = false;
-                var cap = Math.min(this.state.messageCap + PAGINATE_SIZE, this.state.room.timeline.length);
-                this.setState({messageCap: cap, paginating: true});
-            } else {
-                this.waiting_for_paginate = true;
-                var cap = this.state.messageCap + PAGINATE_SIZE;
-                this.setState({messageCap: cap, paginating: true});
-                var self = this;
-                MatrixClientPeg.get().scrollback(this.state.room, PAGINATE_SIZE).finally(function() {
-                    self.waiting_for_paginate = false;
-                    if (self.isMounted()) {
-                        self.setState({
-                            room: MatrixClientPeg.get().getRoom(self.props.roomId)
-                        });
-                    }
-                    // wait and set paginating to false when the component updates
-                });
-            }
+        this.setState({paginating: false});
 
-            return true;
+        // we might not have got enough (or, indeed, any) results from the
+        // pagination request, so give the messagePanel a chance to set off
+        // another.
+
+        if (this.refs.messagePanel) {
+            this.refs.messagePanel.checkFillState();
         }
-        return false;
+    },
+
+    onSearchResultsFillRequest: function(backwards) {
+        if (!backwards || this.state.searchInProgress)
+            return;
+
+        if (this.nextSearchBatch) {
+            if (DEBUG_SCROLL) console.log("requesting more search results");
+            this._getSearchBatch(this.state.searchTerm,
+                                 this.state.searchScope);
+        } else {
+            if (DEBUG_SCROLL) console.log("no more search results");
+        }
+    },
+
+    // set off a pagination request.
+    onMessageListFillRequest: function(backwards) {
+        if (!backwards || this.state.paginating)
+            return;
+
+        // Either wind back the message cap (if there are enough events in the
+        // timeline to do so), or fire off a pagination request.
+
+        if (this.state.messageCap < this.state.room.timeline.length) {
+            var cap = Math.min(this.state.messageCap + PAGINATE_SIZE, this.state.room.timeline.length);
+            if (DEBUG_SCROLL) console.log("winding back message cap to", cap);
+            this.setState({messageCap: cap});
+        } else if(this.state.room.oldState.paginationToken) {
+            var cap = this.state.messageCap + PAGINATE_SIZE;
+            if (DEBUG_SCROLL) console.log("starting paginate to cap", cap);
+            this.setState({messageCap: cap, paginating: true});
+            MatrixClientPeg.get().scrollback(this.state.room, PAGINATE_SIZE).finally(this._paginateCompleted).done();
+        }
+    },
+
+    // return true if there's more messages in the backlog which we aren't displaying
+    _canPaginate: function() {
+        return (this.state.messageCap < this.state.room.timeline.length) ||
+            this.state.room.oldState.paginationToken;
     },
 
     onResendAllClick: function() {
@@ -365,15 +428,10 @@ module.exports = React.createClass({
     },
 
     onMessageListScroll: function(ev) {
-        if (this.refs.messagePanel) {
-            var messageWrapperScroll = this._getScrollNode();
-            var wasAtBottom = this.atBottom;
-            this.atBottom = messageWrapperScroll.scrollHeight - messageWrapperScroll.scrollTop <= messageWrapperScroll.clientHeight + 1;
-            if (this.atBottom && !wasAtBottom) {
-                this.forceUpdate(); // remove unread msg count
-            }
+        if (this.state.numUnreadMessages != 0 &&
+                this.refs.messagePanel.isAtBottom()) {
+            this.setState({numUnreadMessages: 0});
         }
-        if (!this.state.paginating) this.fillSpace();
     },
 
     onDragOver: function(ev) {
@@ -408,30 +466,10 @@ module.exports = React.createClass({
     },
 
     uploadFile: function(file) {
-        this.setState({
-            upload: {
-                fileName: file.name,
-                uploadedBytes: 0,
-                totalBytes: file.size
-            }
-        });
         var self = this;
         ContentMessages.sendContentToRoom(
             file, this.props.roomId, MatrixClientPeg.get()
-        ).progress(function(ev) {
-            //console.log("Upload: "+ev.loaded+" / "+ev.total);
-            self.setState({
-                upload: {
-                    fileName: file.name,
-                    uploadedBytes: ev.loaded,
-                    totalBytes: ev.total
-                }
-            });
-        }).finally(function() {
-            self.setState({
-                upload: undefined
-            });
-        }).done(undefined, function(error) {
+        ).done(undefined, function(error) {
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
                 title: "Failed to upload file",
@@ -445,7 +483,95 @@ module.exports = React.createClass({
     },
 
     onSearch: function(term, scope) {
+        this.setState({
+            searchTerm: term,
+            searchScope: scope,
+            searchResults: [],
+            searchHighlights: [],
+            searchCount: null,
+            searchCanPaginate: null,
+        });
+
+        // if we already have a search panel, we need to tell it to forget
+        // about its scroll state.
+        if (this.refs.searchResultsPanel) {
+            this.refs.searchResultsPanel.resetScrollState();
+        }
+
+        this.nextSearchBatch = null;
+        this._getSearchBatch(term, scope);
+    },
+
+    // fire off a request for a batch of search results
+    _getSearchBatch: function(term, scope) {
+        this.setState({
+            searchInProgress: true,
+        });
+
+        // make sure that we don't end up merging results from
+        // different searches by keeping a unique id.
+        //
+        // todo: should cancel any previous search requests.
+        var searchId = this.searchId = new Date().getTime();
+
+        var self = this;
+
+        if (DEBUG_SCROLL) console.log("sending search request");
+        MatrixClientPeg.get().search({ body: this._getSearchCondition(term, scope),
+                                       next_batch: this.nextSearchBatch })
+        .then(function(data) {
+            if (DEBUG_SCROLL) console.log("search complete");
+            if (!self.state.searching || self.searchId != searchId) {
+                console.error("Discarding stale search results");
+                return;
+            }
+
+            var results = data.search_categories.room_events;
+
+            // postgres on synapse returns us precise details of the
+            // strings which actually got matched for highlighting.
+
+            // combine the highlight list with our existing list; build an object
+            // to avoid O(N^2) fail
+            var highlights = {};
+            results.highlights.forEach(function(hl) { highlights[hl] = 1; });
+            self.state.searchHighlights.forEach(function(hl) { highlights[hl] = 1; });
+
+            // turn it back into an ordered list. For overlapping highlights,
+            // favour longer (more specific) terms first
+            highlights = Object.keys(highlights).sort(function(a, b) { b.length - a.length });
+
+            // sqlite doesn't give us any highlights, so just try to highlight the literal search term
+            if (highlights.length == 0) {
+                highlights = [ term ];
+            }
+
+            // append the new results to our existing results
+            var events = self.state.searchResults.concat(results.results);
+
+            self.setState({
+                searchHighlights: highlights,
+                searchResults: events,
+                searchCount: results.count,
+                searchCanPaginate: !!(results.next_batch),
+            });
+            self.nextSearchBatch = results.next_batch;
+        }, function(error) {
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Search failed",
+                description: error.toString()
+            });
+        }).finally(function() {
+            self.setState({
+                searchInProgress: false
+            });
+        }).done();
+    },
+
+    _getSearchCondition: function(term, scope) {
         var filter;
+
         if (scope === "Room") {
             filter = {
                 // XXX: it's unintuitive that the filter for searching doesn't have the same shape as the v2 filter API :(
@@ -455,163 +581,155 @@ module.exports = React.createClass({
             };
         }
 
-        var self = this;
-        MatrixClientPeg.get().search({
-            body: {
-                search_categories: {
-                    room_events: {
-                        search_term: term,
-                        filter: filter,
-                        order_by: "recent",
-                        include_state: true,
-                        groupings: {
-                            group_by: [
-                                {
-                                    key: "room_id"
-                                }
-                            ]
-                        },
-                        event_context: {
-                            before_limit: 1,
-                            after_limit: 1,
-                            include_profile: true,
-                        }
+        return {
+            search_categories: {
+                room_events: {
+                    search_term: term,
+                    filter: filter,
+                    order_by: "recent",
+                    event_context: {
+                        before_limit: 1,
+                        after_limit: 1,
+                        include_profile: true,
                     }
                 }
-            }            
-        }).then(function(data) {
-            // for debugging:
-            // data.search_categories.room_events.highlights = ["hello", "everybody"];
-
-            var highlights;
-            if (data.search_categories.room_events.highlights &&
-                data.search_categories.room_events.highlights.length > 0)
-            {
-                // postgres on synapse returns us precise details of the
-                // strings which actually got matched for highlighting.
-                // for overlapping highlights, favour longer (more specific) terms first
-                highlights = data.search_categories.room_events.highlights
-                             .sort(function(a, b) { b.length - a.length });
             }
-            else {
-                // sqlite doesn't, so just try to highlight the literal search term
-                highlights = [ term ];
+        }
+    },
+
+    getSearchResultTiles: function() {
+        var DateSeparator = sdk.getComponent('messages.DateSeparator');
+        var cli = MatrixClientPeg.get();
+
+        var ret = [];
+
+        var EventTile = sdk.getComponent('rooms.EventTile');
+
+        // XXX: todo: merge overlapping results somehow?
+        // XXX: why doesn't searching on name work?
+
+
+        if (this.state.searchCanPaginate === false) {
+            if (this.state.searchResults.length == 0) {
+                ret.push(<li key="search-top-marker">
+                         <h2 className="mx_RoomView_topMarker">No results</h2>
+                         </li>
+                        );
+            } else {
+                ret.push(<li key="search-top-marker">
+                         <h2 className="mx_RoomView_topMarker">No more results</h2>
+                         </li>
+                        );
+            }
+        }
+
+        var lastRoomId;
+
+        for (var i = this.state.searchResults.length - 1; i >= 0; i--) {
+            var result = this.state.searchResults[i];
+            var mxEv = new Matrix.MatrixEvent(result.result);
+
+            if (!EventTile.haveTileForEvent(mxEv)) {
+                // XXX: can this ever happen? It will make the result count
+                // not match the displayed count.
+                continue;
             }
 
-            self.setState({
-                highlights: highlights,
-                searchResults: data,
-                searchScope: scope,
-            });
-        }, function(error) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
-                title: "Search failed",
-                description: error.toString()
-            });
-        });
+            var eventId = mxEv.getId();
+
+            if (this.state.searchScope === 'All') {
+                var roomId = result.result.room_id;
+                if(roomId != lastRoomId) {
+                    ret.push(<li key={eventId + "-room"}><h1>Room: { cli.getRoom(roomId).name }</h1></li>);
+                    lastRoomId = roomId;
+                }
+            }
+
+            var ts1 = result.result.origin_server_ts;
+            ret.push(<li key={ts1 + "-search"}><DateSeparator ts={ts1}/></li>); // Rank: {resultList[i].rank}
+
+            if (result.context.events_before[0]) {
+                var mxEv2 = new Matrix.MatrixEvent(result.context.events_before[0]);
+                if (EventTile.haveTileForEvent(mxEv2)) {
+                    ret.push(<li key={eventId+"-1"} data-scroll-token={eventId+"-1"}><EventTile mxEvent={mxEv2} contextual={true} /></li>);
+                }
+            }
+
+            ret.push(<li key={eventId+"+0"} data-scroll-token={eventId+"+0"}><EventTile mxEvent={mxEv} highlights={this.state.searchHighlights}/></li>);
+
+            if (result.context.events_after[0]) {
+                var mxEv2 = new Matrix.MatrixEvent(result.context.events_after[0]);
+                if (EventTile.haveTileForEvent(mxEv2)) {
+                    ret.push(<li key={eventId+"+1"} data-scroll-token={eventId+"+1"}><EventTile mxEvent={mxEv2} contextual={true} /></li>);
+                }
+            }
+        }
+        return ret;
     },
 
     getEventTiles: function() {
         var DateSeparator = sdk.getComponent('messages.DateSeparator');
-        var cli = MatrixClientPeg.get();
 
         var ret = [];
         var count = 0;
 
         var EventTile = sdk.getComponent('rooms.EventTile');
-        var self = this;
 
-        if (this.state.searchResults &&
-            this.state.searchResults.search_categories.room_events.results &&
-            this.state.searchResults.search_categories.room_events.groups)
-        {
-            // XXX: this dance is foul, due to the results API not directly returning sorted results
-            var results = this.state.searchResults.search_categories.room_events.results;
-            var roomIdGroups = this.state.searchResults.search_categories.room_events.groups.room_id;
 
-            Object.keys(roomIdGroups)
-                  .sort(function(a, b) { roomIdGroups[a].order - roomIdGroups[b].order }) // WHY NOT RETURN AN ORDERED ARRAY?!?!?!
-                  .forEach(function(roomId)
-            {
-                // XXX: todo: merge overlapping results somehow?
-                // XXX: why doesn't searching on name work?
-                if (self.state.searchScope === 'All') {
-                    ret.push(<li key={ roomId }><h1>Room: { cli.getRoom(roomId).name }</h1></li>);
-                }
-
-                var resultList = roomIdGroups[roomId].results.map(function(eventId) { return results[eventId]; });
-                for (var i = resultList.length - 1; i >= 0; i--) {
-                    var ts1 = resultList[i].result.origin_server_ts;
-                    ret.push(<li key={ts1 + "-search"}><DateSeparator ts={ts1}/></li>); // Rank: {resultList[i].rank}
-                    var mxEv = new Matrix.MatrixEvent(resultList[i].result);
-                    if (resultList[i].context.events_before[0]) {
-                        var mxEv2 = new Matrix.MatrixEvent(resultList[i].context.events_before[0]);
-                        if (EventTile.haveTileForEvent(mxEv2)) {
-                            ret.push(<li key={mxEv.getId() + "-1"}><EventTile mxEvent={mxEv2} contextual={true} /></li>);
-                        }
-                    }
-                    if (EventTile.haveTileForEvent(mxEv)) {
-                        ret.push(<li key={mxEv.getId() + "+0"}><EventTile mxEvent={mxEv} highlights={self.state.highlights}/></li>);
-                    }
-                    if (resultList[i].context.events_after[0]) {
-                        var mxEv2 = new Matrix.MatrixEvent(resultList[i].context.events_after[0]);
-                        if (EventTile.haveTileForEvent(mxEv2)) {
-                            ret.push(<li key={mxEv.getId() + "+1"}><EventTile mxEvent={mxEv2} contextual={true} /></li>);
-                        }
-                    }
-                }
-            });
-            return ret;
-        }
-
-        for (var i = this.state.room.timeline.length-1; i >= 0 && count < this.state.messageCap; --i) {
+        var prevEvent = null; // the last event we showed
+        var startIdx = Math.max(0, this.state.room.timeline.length - this.state.messageCap);
+        for (var i = startIdx; i < this.state.room.timeline.length; i++) {
             var mxEv = this.state.room.timeline[i];
 
             if (!EventTile.haveTileForEvent(mxEv)) {
                 continue;
             }
-
-            var continuation = false;
-            var last = false;
-            var dateSeparator = null;
-            if (i == this.state.room.timeline.length - 1) {
-                last = true;
+            if (this.props.ConferenceHandler && mxEv.getType() === "m.room.member") {
+                if (this.props.ConferenceHandler.isConferenceUser(mxEv.getSender()) ||
+                        this.props.ConferenceHandler.isConferenceUser(mxEv.getStateKey())) {
+                    continue; // suppress conf user join/parts
+                }
             }
-            if (i > 0 && count < this.state.messageCap - 1) {
-                if (this.state.room.timeline[i].sender &&
-                    this.state.room.timeline[i - 1].sender &&
-                    (this.state.room.timeline[i].sender.userId ===
-                        this.state.room.timeline[i - 1].sender.userId) &&
-                    (this.state.room.timeline[i].getType() ==
-                        this.state.room.timeline[i - 1].getType())
+
+            // is this a continuation of the previous message?
+            var continuation = false;
+            if (prevEvent !== null) {
+                if (mxEv.sender &&
+                    prevEvent.sender &&
+                    (mxEv.sender.userId === prevEvent.sender.userId) &&
+                    (mxEv.getType() == prevEvent.getType())
                     )
                 {
                     continuation = true;
                 }
-
-                var ts0 = this.state.room.timeline[i - 1].getTs();
-                var ts1 = this.state.room.timeline[i].getTs();
-                if (new Date(ts0).toDateString() !== new Date(ts1).toDateString()) {
-                    dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1}/></li>;
-                    continuation = false;
-                }
             }
 
-            if (i === 1) { // n.b. 1, not 0, as the 0th event is an m.room.create and so doesn't show on the timeline
-                var ts1 = this.state.room.timeline[i].getTs();
-                dateSeparator = <li key={ts1}><DateSeparator ts={ts1}/></li>;
+            // do we need a date separator since the last event?
+            var ts1 = mxEv.getTs();
+            if ((prevEvent == null && !this._canPaginate()) ||
+                (prevEvent != null &&
+                 new Date(prevEvent.getTs()).toDateString() !== new Date(ts1).toDateString())) {
+                var dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1}/></li>;
+                ret.push(dateSeparator);
                 continuation = false;
             }
 
-            ret.unshift(
-                <li key={mxEv.getId()} ref={this._collectEventNode.bind(this, mxEv.getId())}><EventTile mxEvent={mxEv} continuation={continuation} last={last}/></li>
-            );
-            if (dateSeparator) {
-                ret.unshift(dateSeparator);
+            var last = false;
+            if (i == this.state.room.timeline.length - 1) {
+                // XXX: we might not show a tile for the last event.
+                last = true;
             }
-            ++count;
+
+            var eventId = mxEv.getId();
+            ret.push(
+                <li key={eventId} ref={this._collectEventNode.bind(this, eventId)} data-scroll-token={eventId}>
+                    <EventTile mxEvent={mxEv} continuation={continuation} last={last}/>
+                </li>
+            );
+
+            prevEvent = mxEv;
         }
+
         return ret;
     },
 
@@ -781,7 +899,27 @@ module.exports = React.createClass({
     },
 
     onCancelClick: function() {
-        this.setState(this.getInitialState());
+        this.setState({editingRoomSettings: false});
+    },
+
+    onLeaveClick: function() {
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.roomId,
+        });
+    },
+
+    onForgetClick: function() {
+        MatrixClientPeg.get().forget(this.props.roomId).done(function() {
+            dis.dispatch({ action: 'view_next_room' });
+        }, function(err) {
+            var errCode = err.errcode || "unknown error code";
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Error",
+                description: `Failed to forget room (${errCode})`
+            });
+        });
     },
 
     onRejectButtonClicked: function(ev) {
@@ -807,6 +945,13 @@ module.exports = React.createClass({
         this.setState({ searching: true });
     },
 
+    onCancelSearchClick: function () {
+        this.setState({
+            searching: false,
+            searchResults: null,
+        });
+    },
+
     onConferenceNotificationClick: function() {
         dis.dispatch({
             action: 'place_call',
@@ -823,9 +968,129 @@ module.exports = React.createClass({
     },
 
     scrollToBottom: function() {
-        var scrollNode = this._getScrollNode();
-        if (!scrollNode) return;
-        scrollNode.scrollTop = scrollNode.scrollHeight;
+        var messagePanel = this.refs.messagePanel;
+        if (!messagePanel) return;
+        messagePanel.scrollToBottom();
+    },
+
+    // scroll the event view to put the given event at the bottom.
+    //
+    // pixel_offset gives the number of pixels between the bottom of the event
+    // and the bottom of the container.
+    scrollToEvent: function(eventId, pixelOffset) {
+        var messagePanel = this.refs.messagePanel;
+        if (!messagePanel) return;
+
+        var idx = this._indexForEventId(eventId);
+        if (idx === null) {
+            // we don't seem to have this event in our timeline. Presumably
+            // it's fallen out of scrollback. We ought to backfill until we
+            // find it, but we'd have to be careful we didn't backfill forever
+            // looking for a non-existent event.
+            //
+            // for now, just scroll to the top of the buffer.
+            console.log("Refusing to scroll to unknown event "+eventId);
+            messagePanel.scrollToTop();
+            return;
+        }
+
+        // we might need to roll back the messagecap (to generate tiles for
+        // older messages). This just means telling getEventTiles to create
+        // tiles for events we already have in our timeline (we already know
+        // the event in question is in our timeline, so we shouldn't need to
+        // backfill).
+        //
+        // we actually wind back slightly further than the event in question,
+        // because we want the event to be at the *bottom* of the container.
+        // Don't roll it back past the timeline we have, though.
+        var minCap = this.state.room.timeline.length - Math.min(idx - INITIAL_SIZE, 0);
+        if (minCap > this.state.messageCap) {
+            this.setState({messageCap: minCap});
+        }
+
+        // the scrollTokens on our DOM nodes are the event IDs, so we can pass
+        // eventId directly into _scrollToToken.
+        messagePanel.scrollToToken(eventId, pixelOffset);
+    },
+
+    // get the current scroll position of the room, so that it can be
+    // restored when we switch back to it
+    getScrollState: function() {
+        var messagePanel = this.refs.messagePanel;
+        if (!messagePanel) return null;
+
+        return messagePanel.getScrollState();
+    },
+
+    restoreScrollState: function(scrollState) {
+        var messagePanel = this.refs.messagePanel;
+        if (!messagePanel) return null;
+
+        if(scrollState.atBottom) {
+            // we were at the bottom before. Ideally we'd scroll to the
+            // 'read-up-to' mark here.
+            messagePanel.scrollToBottom();
+
+        } else if (scrollState.lastDisplayedScrollToken) {
+            // we might need to backfill, so we call scrollToEvent rather than
+            // scrollToToken here. The scrollTokens on our DOM nodes are the
+            // event IDs, so lastDisplayedScrollToken will be the event ID we need,
+            // and we can pass it directly into scrollToEvent.
+            this.scrollToEvent(scrollState.lastDisplayedScrollToken,
+                               scrollState.pixelOffset);
+        }
+    },
+
+    onResize: function(e) {
+        // It seems flexbox doesn't give us a way to constrain the auxPanel height to have
+        // a minimum of the height of the video element, whilst also capping it from pushing out the page
+        // so we have to do it via JS instead.  In this implementation we cap the height by putting
+        // a maxHeight on the underlying remote video tag.
+        var auxPanelMaxHeight;
+        if (this.refs.callView) {
+            // XXX: don't understand why we have to call findDOMNode here in react 0.14 - it should already be a DOM node.
+            var video = ReactDOM.findDOMNode(this.refs.callView.refs.video.refs.remote);
+
+            // header + footer + status + give us at least 100px of scrollback at all times.
+            auxPanelMaxHeight = window.innerHeight - (83 + 72 + 36 + 100);
+
+            // XXX: this is a bit of a hack and might possibly cause the video to push out the page anyway
+            // but it's better than the video going missing entirely
+            if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
+
+            video.style.maxHeight = auxPanelMaxHeight + "px";
+        }
+    },
+
+    onFullscreenClick: function() {
+        dis.dispatch({
+            action: 'video_fullscreen',
+            fullscreen: true
+        }, true);
+    },
+
+    onMuteAudioClick: function() {
+        var call = CallHandler.getCallForRoom(this.props.roomId);
+        if (!call) {
+            return;
+        }
+        var newState = !call.isMicrophoneMuted();
+        call.setMicrophoneMuted(newState);
+        this.setState({
+            audioMuted: newState
+        });
+    },
+
+    onMuteVideoClick: function() {
+        var call = CallHandler.getCallForRoom(this.props.roomId);
+        if (!call) {
+            return;
+        }
+        var newState = !call.isLocalVideoMuted();
+        call.setLocalVideoMuted(newState);
+        this.setState({
+            videoMuted: newState
+        });
     },
 
     render: function() {
@@ -834,6 +1099,7 @@ module.exports = React.createClass({
         var CallView = sdk.getComponent("voip.CallView");
         var RoomSettings = sdk.getComponent("rooms.RoomSettings");
         var SearchBar = sdk.getComponent("rooms.SearchBar");
+        var ScrollPanel = sdk.getComponent("structures.ScrollPanel");
 
         if (!this.state.room) {
             if (this.props.roomId) {
@@ -850,7 +1116,8 @@ module.exports = React.createClass({
         }
 
         var myUserId = MatrixClientPeg.get().credentials.userId;
-        if (this.state.room.currentState.members[myUserId].membership == 'invite') {
+        var myMember = this.state.room.getMember(myUserId);
+        if (myMember && myMember.membership == 'invite') {
             if (this.state.joining || this.state.rejecting) {
                 var Loader = sdk.getComponent("elements.Spinner");
                 return (
@@ -859,7 +1126,8 @@ module.exports = React.createClass({
                     </div>
                 );
             } else {
-                var inviteEvent = this.state.room.currentState.members[myUserId].events.member.event;
+                var inviteEvent = myMember.events.member;
+                var inviterName = inviteEvent.sender ? inviteEvent.sender.name : inviteEvent.getSender();
                 // XXX: Leaving this intentionally basic for now because invites are about to change totally
                 var joinErrorText = this.state.joinError ? "Failed to join room!" : "";
                 var rejectErrorText = this.state.rejectError ? "Failed to reject invite!" : "";
@@ -867,7 +1135,7 @@ module.exports = React.createClass({
                     <div className="mx_RoomView">
                         <RoomHeader ref="header" room={this.state.room} simpleHeader="Room invite"/>
                         <div className="mx_RoomView_invitePrompt">
-                            <div>{inviteEvent.user_id} has invited you to a room</div>
+                            <div>{inviterName} has invited you to a room</div>
                             <br/>
                             <button ref="joinButton" onClick={this.onJoinButtonClicked}>Join</button>
                             <button onClick={this.onRejectButtonClicked}>Reject</button>
@@ -883,9 +1151,7 @@ module.exports = React.createClass({
                 loading: this.state.paginating
             });
 
-            var statusBar = (
-                <div />
-            );
+            var statusBar;
 
             // for testing UI...
             // this.state.upload = {
@@ -894,31 +1160,12 @@ module.exports = React.createClass({
             //     fileName: "testing_fooble.jpg",
             // }
 
-            if (this.state.upload) {
-                var innerProgressStyle = {
-                    width: ((this.state.upload.uploadedBytes / this.state.upload.totalBytes) * 100) + '%'
-                };
-                var uploadedSize = filesize(this.state.upload.uploadedBytes);
-                var totalSize = filesize(this.state.upload.totalBytes);
-                if (uploadedSize.replace(/^.* /,'') === totalSize.replace(/^.* /,'')) {
-                    uploadedSize = uploadedSize.replace(/ .*/, '');
-                }
-                statusBar = (
-                    <div className="mx_RoomView_uploadBar">
-                        <div className="mx_RoomView_uploadProgressOuter">
-                            <div className="mx_RoomView_uploadProgressInner" style={innerProgressStyle}></div>
-                        </div>
-                        <img className="mx_RoomView_uploadIcon" src="img/fileicon.png" width="17" height="22"/>
-                        <img className="mx_RoomView_uploadCancel" src="img/cancel.png" width="18" height="18"/>
-                        <div className="mx_RoomView_uploadBytes">
-                            { uploadedSize } / { totalSize }
-                        </div>
-                        <div className="mx_RoomView_uploadFilename">Uploading {this.state.upload.fileName}</div>
-                    </div>
-                );
-            } else {
+            if (ContentMessages.getCurrentUploads().length > 0) {
+                var UploadBar = sdk.getComponent('structures.UploadBar');
+                statusBar = <UploadBar room={this.state.room} />
+            } else if (!this.state.searchResults) {
                 var typingString = this.getWhoIsTypingString();
-                //typingString = "Testing typing...";
+                // typingString = "S͚͍̭̪̤͙̱͙̖̥͙̥̤̻̙͕͓͂̌ͬ͐̂k̜̝͎̰̥̻̼̂̌͛͗͊̅̒͂̊̍̍͌̈̈́͌̋̊ͬa͉̯͚̺̗̳̩ͪ̋̑͌̓̆̍̂̉̏̅̆ͧ̌̑v̲̲̪̝ͥ̌ͨͮͭ̊͆̾ͮ̍ͮ͑̚e̮̙͈̱̘͕̼̮͒ͩͨͫ̃͗̇ͩ͒ͣͦ͒̄̍͐ͣ̿ͥṘ̗̺͇̺̺͔̄́̊̓͊̍̃ͨ̚ā̼͎̘̟̼͎̜̪̪͚̋ͨͨͧ̓ͦͯͤ̄͆̋͂ͩ͌ͧͅt̙̙̹̗̦͖̞ͫͪ͑̑̅ͪ̃̚ͅ is typing...";
                 var unreadMsgs = this.getUnreadMessagesString();
                 // no conn bar trumps unread count since you can't get unread messages
                 // without a connection! (technically may already have some but meh)
@@ -927,7 +1174,7 @@ module.exports = React.createClass({
                 if (this.state.syncState === "ERROR") {
                     statusBar = (
                         <div className="mx_RoomView_connectionLostBar">
-                            <img src="img/warning2.png" width="30" height="30" alt="/!\ "/>
+                            <img src="img/warning.svg" width="24" height="23" alt="/!\ "/>
                             <div className="mx_RoomView_connectionLostBar_textArea">
                                 <div className="mx_RoomView_connectionLostBar_title">
                                     Connectivity to the server has been lost.
@@ -939,10 +1186,25 @@ module.exports = React.createClass({
                         </div>
                     );
                 }
+                else if (this.tabComplete.isTabCompleting()) {
+                    var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar');
+                    statusBar = (
+                        <div className="mx_RoomView_tabCompleteBar">
+                            <div className="mx_RoomView_tabCompleteImage">...</div>
+                            <div className="mx_RoomView_tabCompleteWrapper">
+                                <TabCompleteBar entries={this.tabComplete.peek(6)} />
+                                <div className="mx_RoomView_tabCompleteEol">
+                                    <img src="img/eol.svg" width="22" height="16" alt="->|"/>
+                                    Auto-complete
+                                </div>
+                            </div>
+                        </div>
+                    );
+                }
                 else if (this.state.hasUnsentMessages) {
                     statusBar = (
                         <div className="mx_RoomView_connectionLostBar">
-                            <img src="img/warning2.png" width="30" height="30" alt="/!\ "/>
+                            <img src="img/warning.svg" width="24" height="23" alt="/!\ "/>
                             <div className="mx_RoomView_connectionLostBar_textArea">
                                 <div className="mx_RoomView_connectionLostBar_title">
                                     Some of your messages have not been sent.
@@ -971,7 +1233,7 @@ module.exports = React.createClass({
                     statusBar = (
                         <div className="mx_RoomView_typingBar">
                             <div className="mx_RoomView_typingImage">...</div>
-                            {typingString}
+                            <span className="mx_RoomView_typingText">{typingString}</span>
                         </div>
                     );
                 }
@@ -986,7 +1248,7 @@ module.exports = React.createClass({
                 aux = <Loader/>;
             }
             else if (this.state.searching) {
-                aux = <SearchBar ref="search_bar" onCancelClick={this.onCancelClick} onSearch={this.onSearch}/>;
+                aux = <SearchBar ref="search_bar" searchInProgress={this.state.searchInProgress } onCancelClick={this.onCancelSearchClick} onSearch={this.onSearch}/>;
             }
 
             var conferenceCallNotification = null;
@@ -1006,41 +1268,129 @@ module.exports = React.createClass({
             if (this.state.draggingFile) {
                 fileDropTarget = <div className="mx_RoomView_fileDropTarget">
                                     <div className="mx_RoomView_fileDropTargetLabel">
-                                        <img src="img/upload-big.png" width="43" height="57" alt="Drop File Here"/><br/>
+                                        <img src="img/upload-big.svg" width="45" height="59" alt="Drop File Here"/><br/>
                                         Drop File Here
                                     </div>
                                  </div>;
             }
 
-            var messageComposer;
-            if (!this.state.searchResults) {
+            var messageComposer, searchInfo;
+            var canSpeak = (
+                // joined and not showing search results
+                myMember && (myMember.membership == 'join') && !this.state.searchResults
+            );
+            if (canSpeak) {
                 messageComposer =
-                    <MessageComposer room={this.state.room} roomView={this} uploadFile={this.uploadFile} />
+                    <MessageComposer
+                        room={this.state.room} roomView={this} uploadFile={this.uploadFile}
+                        callState={this.state.callState} tabComplete={this.tabComplete} />
             }
 
+            // TODO: Why aren't we storing the term/scope/count in this format
+            // in this.state if this is what RoomHeader desires?
+            if (this.state.searchResults) {
+                searchInfo = {
+                    searchTerm : this.state.searchTerm,
+                    searchScope : this.state.searchScope,
+                    searchCount : this.state.searchCount,
+                };
+            }
+
+            var call = CallHandler.getCallForRoom(this.props.roomId);
+            //var call = CallHandler.getAnyActiveCall();
+            var inCall = false;
+            if (call && (this.state.callState !== 'ended' && this.state.callState !== 'ringing')) {
+                inCall = true;
+                var zoomButton, voiceMuteButton, videoMuteButton;
+
+                if (call.type === "video") {
+                    zoomButton = (
+                        <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick}>
+                            <img src="img/fullscreen.svg" title="Fill screen" alt="Fill screen" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
+                        </div>
+                    );
+
+                    videoMuteButton =
+                        <div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
+                            <img src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"} width="31" height="27"/>
+                        </div>
+                }
+                voiceMuteButton =
+                    <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
+                        <img src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"} width="21" height="26"/>
+                    </div>
+
+                if (!statusBar) {
+                    statusBar =
+                        <div className="mx_RoomView_callBar">
+                            <img src="img/sound-indicator.svg" width="23" height="20" alt=""/>
+                            <b>Active call</b>
+                        </div>;
+                }
+
+                statusBar =
+                    <div className="mx_RoomView_callStatusBar">
+                        { voiceMuteButton }
+                        { videoMuteButton }
+                        { zoomButton }
+                        { statusBar }
+                        <img className="mx_RoomView_voipChevron" src="img/voip-chevron.svg" width="22" height="17"/>
+                    </div>
+            }
+
+
+            // if we have search results, we keep the messagepanel (so that it preserves its
+            // scroll state), but hide it.
+            var searchResultsPanel;
+            var hideMessagePanel = false;
+
+            if (this.state.searchResults) {
+                searchResultsPanel = (
+                    <ScrollPanel ref="searchResultsPanel" className="mx_RoomView_messagePanel"
+                            onFillRequest={ this.onSearchResultsFillRequest }>
+                        <li className={scrollheader_classes}></li>
+                        {this.getSearchResultTiles()}
+                    </ScrollPanel>
+                );
+                hideMessagePanel = true;
+            }
+
+            var messagePanel = (
+                    <ScrollPanel ref="messagePanel" className="mx_RoomView_messagePanel"
+                            onScroll={ this.onMessageListScroll } 
+                            onFillRequest={ this.onMessageListFillRequest }
+                            style={ hideMessagePanel ? { display: 'none' } : {} } >
+                        <li className={scrollheader_classes}></li>
+                        {this.getEventTiles()}
+                    </ScrollPanel>
+            );
+
             return (
-                <div className="mx_RoomView">
-                    <RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings} onSearchClick={this.onSearchClick}
-                        onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick} onCancelClick={this.onCancelClick} />
+                <div className={ "mx_RoomView" + (inCall ? " mx_RoomView_inCall" : "") }>
+                    <RoomHeader ref="header" room={this.state.room} searchInfo={searchInfo}
+                        editing={this.state.editingRoomSettings}
+                        onSearchClick={this.onSearchClick}
+                        onSettingsClick={this.onSettingsClick}
+                        onSaveClick={this.onSaveClick}
+                        onCancelClick={this.onCancelClick}
+                        onForgetClick={
+                            (myMember && myMember.membership === "leave") ? this.onForgetClick : null
+                        }
+                        onLeaveClick={
+                            (myMember && myMember.membership === "join") ? this.onLeaveClick : null
+                        } />
+                    { fileDropTarget }    
                     <div className="mx_RoomView_auxPanel">
-                        <CallView room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}/>
+                        <CallView ref="callView" room={this.state.room} ConferenceHandler={this.props.ConferenceHandler}/>
                         { conferenceCallNotification }
                         { aux }
                     </div>
-                    <GeminiScrollbar autoshow={true} ref="messagePanel" className="mx_RoomView_messagePanel" onScroll={ this.onMessageListScroll }>
-                        <div className="mx_RoomView_messageListWrapper">
-                            { fileDropTarget }    
-                            <ol className="mx_RoomView_MessageList" aria-live="polite">
-                                <li className={scrollheader_classes}>
-                                </li>
-                                {this.getEventTiles()}
-                            </ol>
-                        </div>
-                    </GeminiScrollbar>
+                    { messagePanel }
+                    { searchResultsPanel }
                     <div className="mx_RoomView_statusArea">
                         <div className="mx_RoomView_statusAreaBox">
                             <div className="mx_RoomView_statusAreaBox_line"></div>
-                            { this.state.searchResults ? null : statusBar }
+                            { statusBar }
                         </div>
                     </div>
                     { messageComposer }
diff --git a/src/components/structures/ScrollPanel.js b/src/components/structures/ScrollPanel.js
new file mode 100644
index 0000000000..4a45bf5a39
--- /dev/null
+++ b/src/components/structures/ScrollPanel.js
@@ -0,0 +1,288 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var React = require("react");
+var ReactDOM = require("react-dom");
+var GeminiScrollbar = require('react-gemini-scrollbar');
+
+var DEBUG_SCROLL = false;
+
+/* This component implements an intelligent scrolling list.
+ *
+ * It wraps a list of <li> children; when items are added to the start or end
+ * of the list, the scroll position is updated so that the user still sees the
+ * same position in the list.
+ *
+ * It also provides a hook which allows parents to provide more list elements
+ * when we get close to the start or end of the list.
+ *
+ * We don't save the absolute scroll offset, because that would be affected by
+ * window width, zoom level, amount of scrollback, etc. Instead we save an
+ * identifier for the last fully-visible message, and the number of pixels the
+ * window was scrolled below it - which is hopefully be near enough.
+ *
+ * Each child element should have a 'data-scroll-token'. This token is used to
+ * serialise the scroll state, and returned as the 'lastDisplayedScrollToken'
+ * attribute by getScrollState().
+ */
+module.exports = React.createClass({
+    displayName: 'ScrollPanel',
+
+    propTypes: {
+        /* stickyBottom: if set to true, then once the user hits the bottom of
+         * the list, any new children added to the list will cause the list to
+         * scroll down to show the new element, rather than preserving the
+         * existing view.
+         */
+        stickyBottom: React.PropTypes.bool,
+
+        /* onFillRequest(backwards): a callback which is called on scroll when
+         * the user nears the start (backwards = true) or end (backwards =
+         * false) of the list
+         */
+        onFillRequest: React.PropTypes.func,
+
+        /* onScroll: a callback which is called whenever any scroll happens.
+         */
+        onScroll: React.PropTypes.func,
+
+        /* className: classnames to add to the top-level div
+         */
+        className: React.PropTypes.string,
+
+        /* style: styles to add to the top-level div
+         */
+        style: React.PropTypes.object,
+    },
+
+    getDefaultProps: function() {
+        return {
+            stickyBottom: true,
+            onFillRequest: function(backwards) {},
+            onScroll: function() {},
+        };
+    },
+
+    componentWillMount: function() {
+        this.resetScrollState();
+    },
+
+    componentDidUpdate: function() {
+        // after adding event tiles, we may need to tweak the scroll (either to
+        // keep at the bottom of the timeline, or to maintain the view after
+        // adding events to the top).
+        this._restoreSavedScrollState();
+    },
+
+    onScroll: function(ev) {
+        var sn = this._getScrollNode();
+        if (DEBUG_SCROLL) console.log("Scroll event: offset now:", sn.scrollTop, "recentEventScroll:", this.recentEventScroll);
+
+        // Sometimes we see attempts to write to scrollTop essentially being
+        // ignored. (Or rather, it is successfully written, but on the next
+        // scroll event, it's been reset again).
+        //
+        // This was observed on Chrome 47, when scrolling using the trackpad in OS
+        // X Yosemite.  Can't reproduce on El Capitan. Our theory is that this is
+        // due to Chrome not being able to cope with the scroll offset being reset
+        // while a two-finger drag is in progress.
+        //
+        // By way of a workaround, we detect this situation and just keep
+        // resetting scrollTop until we see the scroll node have the right
+        // value.
+        if (this.recentEventScroll !== undefined) {
+            if(sn.scrollTop < this.recentEventScroll-200) {
+                console.log("Working around vector-im/vector-web#528");
+                this._restoreSavedScrollState();
+                return;
+            }
+            this.recentEventScroll = undefined;
+        }
+
+        this.scrollState = this._calculateScrollState();
+        if (DEBUG_SCROLL) console.log("Saved scroll state", this.scrollState);
+
+        this.props.onScroll(ev);
+
+        this.checkFillState();
+    },
+
+    // return true if the content is fully scrolled down right now; else false.
+    //
+    // Note that if the content hasn't yet been fully populated, this may
+    // spuriously return true even if the user wanted to be looking at earlier
+    // content. So don't call it in render() cycles.
+    isAtBottom: function() {
+        var sn = this._getScrollNode();
+        // + 1 here to avoid fractional pixel rounding errors
+        return sn.scrollHeight - sn.scrollTop <= sn.clientHeight + 1;
+    },
+
+    // check the scroll state and send out backfill requests if necessary.
+    checkFillState: function() {
+        var sn = this._getScrollNode();
+
+        if (sn.scrollTop < sn.clientHeight) {
+            // there's less than a screenful of messages left - try to get some
+            // more messages.
+            this.props.onFillRequest(true);
+        }
+    },
+
+    // get the current scroll position of the room, so that it can be
+    // restored later
+    getScrollState: function() {
+        return this.scrollState;
+    },
+
+    /* reset the saved scroll state.
+     *
+     * This will cause the scroll to be reinitialised on the next update of the
+     * child list.
+     *
+     * This is useful if the list is being replaced, and you don't want to
+     * preserve scroll even if new children happen to have the same scroll
+     * tokens as old ones.
+     */
+    resetScrollState: function() {
+        this.scrollState = null;
+    },
+
+    scrollToTop: function() {
+        this._getScrollNode().scrollTop = 0;
+        if (DEBUG_SCROLL) console.log("Scrolled to top");
+    },
+
+    scrollToBottom: function() {
+        var scrollNode = this._getScrollNode();
+        scrollNode.scrollTop = scrollNode.scrollHeight;
+        if (DEBUG_SCROLL) console.log("Scrolled to bottom; offset now", scrollNode.scrollTop);
+    },
+
+    // scroll the message list to the node with the given scrollToken. See
+    // notes in _calculateScrollState on how this works.
+    //
+    // pixel_offset gives the number of pixels between the bottom of the node
+    // and the bottom of the container.
+    scrollToToken: function(scrollToken, pixelOffset) {
+        /* find the dom node with the right scrolltoken */
+        var node;
+        var messages = this.refs.itemlist.children;
+        for (var i = messages.length-1; i >= 0; --i) {
+            var m = messages[i];
+            if (!m.dataset.scrollToken) continue;
+            if (m.dataset.scrollToken == scrollToken) {
+                node = m;
+                break;
+            }
+        }
+
+        if (!node) {
+            console.error("No node with scrollToken '"+scrollToken+"'");
+            return;
+        }
+
+        var scrollNode = this._getScrollNode();
+        var wrapperRect = ReactDOM.findDOMNode(this).getBoundingClientRect();
+        var boundingRect = node.getBoundingClientRect();
+        var scrollDelta = boundingRect.bottom + pixelOffset - wrapperRect.bottom;
+        if(scrollDelta != 0) {
+            scrollNode.scrollTop += scrollDelta;
+
+            // see the comments in onMessageListScroll regarding recentEventScroll
+            this.recentEventScroll = scrollNode.scrollTop;
+        }
+
+        if (DEBUG_SCROLL) {
+            console.log("Scrolled to token", node.dataset.scrollToken, "+", pixelOffset+":", scrollNode.scrollTop, "(delta: "+scrollDelta+")");
+            console.log("recentEventScroll now "+this.recentEventScroll);
+        }
+    },
+
+    _calculateScrollState: function() {
+        // Our scroll implementation is agnostic of the precise contents of the
+        // message list (since it needs to work with both search results and
+        // timelines). 'refs.messageList' is expected to be a DOM node with a
+        // number of children, each of which may have a 'data-scroll-token'
+        // attribute. It is this token which is stored as the
+        // 'lastDisplayedScrollToken'.
+
+        var atBottom = this.isAtBottom();
+
+        var itemlist = this.refs.itemlist;
+        var wrapperRect = ReactDOM.findDOMNode(this).getBoundingClientRect();
+        var messages = itemlist.children;
+
+        for (var i = messages.length-1; i >= 0; --i) {
+            var node = messages[i];
+            if (!node.dataset.scrollToken) continue;
+
+            var boundingRect = node.getBoundingClientRect();
+            if (boundingRect.bottom < wrapperRect.bottom) {
+                return {
+                    atBottom: atBottom,
+                    lastDisplayedScrollToken: node.dataset.scrollToken,
+                    pixelOffset: wrapperRect.bottom - boundingRect.bottom,
+                }
+            }
+        }
+
+        // apparently the entire timeline is below the viewport. Give up.
+        return { atBottom: true };
+    },
+
+    _restoreSavedScrollState: function() {
+        var scrollState = this.scrollState;
+        if (!scrollState || (this.props.stickyBottom && scrollState.atBottom)) {
+            this.scrollToBottom();
+        } else if (scrollState.lastDisplayedScrollToken) {
+            this.scrollToToken(scrollState.lastDisplayedScrollToken,
+                               scrollState.pixelOffset);
+        }
+    },
+
+    /* get the DOM node which has the scrollTop property we care about for our
+     * message panel.
+     */
+    _getScrollNode: function() {
+        var panel = ReactDOM.findDOMNode(this.refs.geminiPanel);
+
+        // If the gemini scrollbar is doing its thing, this will be a div within
+        // the message panel (ie, the gemini container); otherwise it will be the
+        // message panel itself.
+
+        if (panel.classList.contains('gm-prevented')) {
+            return panel;
+        } else {
+            return panel.children[2]; // XXX: Fragile!
+        }
+    },
+
+    render: function() {
+        // TODO: the classnames on the div and ol could do with being updated to
+        // reflect the fact that we don't necessarily contain a list of messages.
+        // it's not obvious why we have a separate div and ol anyway.
+        return (<GeminiScrollbar autoshow={true} ref="geminiPanel" onScroll={ this.onScroll }
+                className={this.props.className} style={this.props.style}>
+                    <div className="mx_RoomView_messageListWrapper">
+                        <ol ref="itemlist" className="mx_RoomView_MessageList" aria-live="polite">
+                            {this.props.children}
+                        </ol>
+                    </div>
+                </GeminiScrollbar>
+               );
+    },
+});
diff --git a/src/components/structures/UploadBar.js b/src/components/structures/UploadBar.js
new file mode 100644
index 0000000000..717c7f57b2
--- /dev/null
+++ b/src/components/structures/UploadBar.js
@@ -0,0 +1,93 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+var React = require('react');
+var ContentMessages = require('../../ContentMessages');
+var dis = require('../../dispatcher');
+var filesize = require('filesize');
+
+module.exports = React.createClass({displayName: 'UploadBar',
+    propTypes: {
+        room: React.PropTypes.object
+    },
+
+    componentDidMount: function() {
+        dis.register(this.onAction);
+        this.mounted = true;
+    },
+
+    componentWillUnmount: function() {
+        this.mounted = false;
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            case 'upload_progress':
+            case 'upload_finished':
+            case 'upload_failed':
+                if (this.mounted) this.forceUpdate();
+                break;
+        }
+    },
+
+    render: function() {
+        var uploads = ContentMessages.getCurrentUploads();
+        if (uploads.length == 0) {
+            return <div />
+        }
+
+        var upload;
+        for (var i = 0; i < uploads.length; ++i) {
+            if (uploads[i].roomId == this.props.room.roomId) {
+                upload = uploads[i];
+                break;
+            }
+        }
+        if (!upload) {
+            upload = uploads[0];
+        }
+
+        var innerProgressStyle = {
+            width: ((upload.loaded / (upload.total || 1)) * 100) + '%'
+        };
+        var uploadedSize = filesize(upload.loaded);
+        var totalSize = filesize(upload.total);
+        if (uploadedSize.replace(/^.* /,'') === totalSize.replace(/^.* /,'')) {
+            uploadedSize = uploadedSize.replace(/ .*/, '');
+        }
+
+        var others;
+        if (uploads.length > 1) {
+            others = 'and '+(uploads.length - 1) + ' other' + (uploads.length > 2 ? 's' : '');
+        }
+
+        return (
+            <div className="mx_UploadBar">
+                <div className="mx_UploadBar_uploadProgressOuter">
+                    <div className="mx_UploadBar_uploadProgressInner" style={innerProgressStyle}></div>
+                </div>
+                <img className="mx_UploadBar_uploadIcon" src="img/fileicon.png" width="17" height="22"/>
+                <img className="mx_UploadBar_uploadCancel" src="img/cancel.svg" width="18" height="18"
+                    onClick={function() { ContentMessages.cancelUpload(upload.promise); }}
+                />
+                <div className="mx_UploadBar_uploadBytes">
+                    { uploadedSize } / { totalSize }
+                </div>
+                <div className="mx_UploadBar_uploadFilename">Uploading {upload.fileName}{others}</div>
+            </div>
+        );
+    }
+});
diff --git a/src/components/structures/UserSettings.js b/src/components/structures/UserSettings.js
index 59187bb69f..c8916bfd44 100644
--- a/src/components/structures/UserSettings.js
+++ b/src/components/structures/UserSettings.js
@@ -17,14 +17,22 @@ var React = require('react');
 var sdk = require('../../index');
 var MatrixClientPeg = require("../../MatrixClientPeg");
 var Modal = require('../../Modal');
+var dis = require("../../dispatcher");
 var q = require('q');
 var version = require('../../../package.json').version;
+var UserSettingsStore = require('../../UserSettingsStore');
 
 module.exports = React.createClass({
     displayName: 'UserSettings',
-    Phases: {
-        Loading: "loading",
-        Display: "display",
+
+    propTypes: {
+        onClose: React.PropTypes.func
+    },
+
+    getDefaultProps: function() {
+        return {
+            onClose: function() {}
+        };
     },
 
     getInitialState: function() {
@@ -32,131 +40,227 @@ module.exports = React.createClass({
             avatarUrl: null,
             threePids: [],
             clientVersion: version,
-            phase: this.Phases.Loading,
+            phase: "UserSettings.LOADING", // LOADING, DISPLAY
         };
     },
 
     componentWillMount: function() {
         var self = this;
-        var cli = MatrixClientPeg.get();
-
-        var profile_d = cli.getProfileInfo(cli.credentials.userId);
-        var threepid_d = cli.getThreePids();
-
-        q.all([profile_d, threepid_d]).then(
-            function(resps) {
-                self.setState({
-                    avatarUrl: resps[0].avatar_url,
-                    threepids: resps[1].threepids,
-                    phase: self.Phases.Display,
-                });
-            },
-            function(err) { console.err(err); }
-        );
+        this._refreshFromServer();
     },
 
-    editAvatar: function() {
-        var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl);
-        var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
-        var avatarDialog = (
-            <div>
-                <ChangeAvatar initialAvatarUrl={url} />
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this.onAvatarDialogCancel}>Cancel</button>
-                </div>
-            </div>
-        );
-        this.avatarDialog = Modal.createDialogWithElement(avatarDialog);
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        this._me = MatrixClientPeg.get().credentials.userId;
     },
 
-    addEmail: function() {
-
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
     },
 
-    editDisplayName: function() {
-        this.refs.displayname.edit();
+    _refreshFromServer: function() {
+        var self = this;
+        q.all([
+            UserSettingsStore.loadProfileInfo(), UserSettingsStore.loadThreePids()
+        ]).done(function(resps) {
+            self.setState({
+                avatarUrl: resps[0].avatar_url,
+                threepids: resps[1].threepids,
+                phase: "UserSettings.DISPLAY",
+            });
+        }, function(error) {
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Can't load user settings",
+                description: error.toString()
+            });
+        });
     },
 
-    changePassword: function() {
-        var ChangePassword = sdk.getComponent('settings.ChangePassword');
-        Modal.createDialog(ChangePassword);
+    onAction: function(payload) {
+        if (payload.action === "notifier_enabled") {
+            this.forceUpdate();
+        }
+    },
+
+    onAvatarSelected: function(ev) {
+        var self = this;
+        var changeAvatar = this.refs.changeAvatar;
+        if (!changeAvatar) {
+            console.error("No ChangeAvatar found to upload image to!");
+            return;
+        }
+        changeAvatar.onFileSelected(ev).done(function() {
+            // dunno if the avatar changed, re-check it.
+            self._refreshFromServer();
+        }, function(err) {
+            var errMsg = (typeof err === "string") ? err : (err.error || "");
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Error",
+                description: "Failed to set avatar. " + errMsg
+            });
+        });
     },
 
     onLogoutClicked: function(ev) {
         var LogoutPrompt = sdk.getComponent('dialogs.LogoutPrompt');
-        this.logoutModal = Modal.createDialog(LogoutPrompt, {onCancel: this.onLogoutPromptCancel});
+        this.logoutModal = Modal.createDialog(
+            LogoutPrompt, {onCancel: this.onLogoutPromptCancel}
+        );
+    },
+
+    onPasswordChangeError: function(err) {
+        var errMsg = err.error || "";
+        if (err.httpStatus === 403) {
+            errMsg = "Failed to change password. Is your password correct?";
+        }
+        else if (err.httpStatus) {
+            errMsg += ` (HTTP status ${err.httpStatus})`;
+        }
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createDialog(ErrorDialog, {
+            title: "Error",
+            description: errMsg
+        });
+    },
+
+    onPasswordChanged: function() {
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createDialog(ErrorDialog, {
+            title: "Success",
+            description: `Your password was successfully changed. You will not
+                          receive push notifications on other devices until you
+                          log back in to them.`
+        });
     },
 
     onLogoutPromptCancel: function() {
         this.logoutModal.closeDialog();
     },
 
-    onAvatarDialogCancel: function() {
-        this.avatarDialog.close();
+    onEnableNotificationsChange: function(event) {
+        UserSettingsStore.setEnableNotifications(event.target.checked);
     },
 
     render: function() {
-        var Loader = sdk.getComponent("elements.Spinner");
-        if (this.state.phase === this.Phases.Loading) {
-            return <Loader />
+        switch (this.state.phase) {
+            case "UserSettings.LOADING":
+                var Loader = sdk.getComponent("elements.Spinner");
+                return (
+                    <Loader />
+                );
+            case "UserSettings.DISPLAY":
+                break; // quit the switch to return the common state
+            default:
+                throw new Error("Unknown state.phase => " + this.state.phase);
         }
-        else if (this.state.phase === this.Phases.Display) {
-            var ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
-            var EnableNotificationsButton = sdk.getComponent('settings.EnableNotificationsButton');
-            return (
+        // can only get here if phase is UserSettings.DISPLAY
+        var RoomHeader = sdk.getComponent('rooms.RoomHeader');
+        var ChangeDisplayName = sdk.getComponent("views.settings.ChangeDisplayName");
+        var ChangePassword = sdk.getComponent("views.settings.ChangePassword");
+        var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
+        var avatarUrl = (
+            this.state.avatarUrl ? MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl) : null
+        );
+
+        return (
             <div className="mx_UserSettings">
-                <div className="mx_UserSettings_User">
-                    <h1>User Settings</h1>
-                    <hr/>
-                    <div className="mx_UserSettings_User_Inner">
-                        <div className="mx_UserSettings_Avatar">
-                            <div className="mx_UserSettings_Avatar_Text">
-                                Profile Photo
+                <RoomHeader simpleHeader="Settings" />
+
+                <h2>Profile</h2>
+
+                <div className="mx_UserSettings_section">
+                    <div className="mx_UserSettings_profileTable">
+                        <div className="mx_UserSettings_profileTableRow">
+                            <div className="mx_UserSettings_profileLabelCell">
+                                <label htmlFor="displayName">Display name</label>
                             </div>
-                            <div className="mx_UserSettings_Avatar_Edit" onClick={this.editAvatar}>
-                                Edit
+                            <div className="mx_UserSettings_profileInputCell">
+                                <ChangeDisplayName />
                             </div>
                         </div>
 
-                        <div className="mx_UserSettings_DisplayName">
-                            <ChangeDisplayName ref="displayname" />
-                            <div className="mx_UserSettings_DisplayName_Edit" onClick={this.editDisplayName}>
-                                Edit
-                            </div>
-                        </div>
+                        {this.state.threepids.map(function(val, pidIndex) {
+                            var id = "email-" + val.address;
+                            return (
+                                <div className="mx_UserSettings_profileTableRow" key={pidIndex}>
+                                    <div className="mx_UserSettings_profileLabelCell">
+                                        <label htmlFor={id}>Email</label>
+                                    </div>
+                                    <div className="mx_UserSettings_profileInputCell">
+                                        <input key={val.address} id={id} value={val.address} disabled />
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
 
-                        <div className="mx_UserSettings_3pids">
-                            {this.state.threepids.map(function(val) {
-                                return <div key={val.address}>{val.address}</div>;
-                            })}
-                        </div>
-
-                        <div className="mx_UserSettings_Add3pid" onClick={this.addEmail}>
-                            Add email
+                    <div className="mx_UserSettings_avatarPicker">
+                        <ChangeAvatar ref="changeAvatar" initialAvatarUrl={avatarUrl}
+                            showUploadSection={false} className="mx_UserSettings_avatarPicker_img"/>
+                        <div className="mx_UserSettings_avatarPicker_edit">
+                            <label htmlFor="avatarInput">
+                                <img src="img/upload.svg"
+                                    alt="Upload avatar" title="Upload avatar"
+                                    width="19" height="24" />
+                            </label>
+                            <input id="avatarInput" type="file" onChange={this.onAvatarSelected}/>
                         </div>
                     </div>
                 </div>
 
-                <div className="mx_UserSettings_Global">
-                    <h1>Global Settings</h1>
-                    <hr/>
-                    <div className="mx_UserSettings_Global_Inner">
-                        <div className="mx_UserSettings_ChangePassword" onClick={this.changePassword}>
-                            Change Password
-                        </div>
-                        <div className="mx_UserSettings_ClientVersion">
-                            Version {this.state.clientVersion}
-                        </div>
-                        <div className="mx_UserSettings_EnableNotifications">
-                            <EnableNotificationsButton />
-                        </div>
-                        <div className="mx_UserSettings_Logout">
-                            <button onClick={this.onLogoutClicked}>Sign Out</button>
+                <h2>Account</h2>
+
+                <div className="mx_UserSettings_section">
+                    <ChangePassword
+                        className="mx_UserSettings_accountTable"
+                        rowClassName="mx_UserSettings_profileTableRow"
+                        rowLabelClassName="mx_UserSettings_profileLabelCell"
+                        rowInputClassName="mx_UserSettings_profileInputCell"
+                        buttonClassName="mx_UserSettings_button"
+                        onError={this.onPasswordChangeError}
+                        onFinished={this.onPasswordChanged} />                   
+                </div>
+
+                <div className="mx_UserSettings_logout">
+                    <div className="mx_UserSettings_button" onClick={this.onLogoutClicked}>
+                        Log out
+                    </div>
+                </div>
+
+                <h2>Notifications</h2>
+
+                <div className="mx_UserSettings_section">
+                    <div className="mx_UserSettings_notifTable">
+                        <div className="mx_UserSettings_notifTableRow">
+                            <div className="mx_UserSettings_notifInputCell">
+                                <input id="enableNotifications"
+                                    ref="enableNotifications"
+                                    type="checkbox"
+                                    checked={ UserSettingsStore.getEnableNotifications() }
+                                    onChange={ this.onEnableNotificationsChange } />
+                            </div>
+                            <div className="mx_UserSettings_notifLabelCell">
+                                <label htmlFor="enableNotifications">
+                                    Enable desktop notifications
+                                </label>
+                            </div>
                         </div>
                     </div>
                 </div>
+
+                <h2>Advanced</h2>
+
+                <div className="mx_UserSettings_section">
+                    <div className="mx_UserSettings_advanced">
+                        Logged in as {this._me}
+                    </div>
+                    <div className="mx_UserSettings_advanced">
+                        Version {this.state.clientVersion}
+                    </div>
+                </div>
             </div>
-            );
-        }
+        );
     }
 });
diff --git a/src/components/structures/login/Registration.js b/src/components/structures/login/Registration.js
index 1570641556..19e55c4d76 100644
--- a/src/components/structures/login/Registration.js
+++ b/src/components/structures/login/Registration.js
@@ -39,6 +39,7 @@ module.exports = React.createClass({
         idSid: React.PropTypes.string,
         hsUrl: React.PropTypes.string,
         isUrl: React.PropTypes.string,
+        email: React.PropTypes.string,
         // registration shouldn't know or care how login is done.
         onLoginClick: React.PropTypes.func.isRequired
     },
@@ -185,6 +186,7 @@ module.exports = React.createClass({
                 registerStep = (
                     <RegistrationForm
                         showEmail={true}
+                        defaultEmail={this.props.email}
                         minPasswordLength={MIN_PASSWORD_LENGTH}
                         onError={this.onFormValidationFailed}
                         onRegisterClick={this.onFormSubmit} />
diff --git a/src/components/views/create_room/RoomAlias.js b/src/components/views/create_room/RoomAlias.js
index 9a30d3fbff..cc7382aadb 100644
--- a/src/components/views/create_room/RoomAlias.js
+++ b/src/components/views/create_room/RoomAlias.js
@@ -56,8 +56,9 @@ module.exports = React.createClass({
 
         if (this.props.homeserver) {
             if (curr_val == "") {
+                var self = this;
                 setTimeout(function() {
-                    target.value = "#:" + this.props.homeserver;
+                    target.value = "#:" + self.props.homeserver;
                     target.setSelectionRange(1, 1);
                 }, 0);
             } else {
diff --git a/src/components/views/elements/EditableText.js b/src/components/views/elements/EditableText.js
index 0ed443fbae..ee88f1a853 100644
--- a/src/components/views/elements/EditableText.js
+++ b/src/components/views/elements/EditableText.js
@@ -113,6 +113,10 @@ module.exports = React.createClass({
         }
     },
 
+    onBlur: function() {
+        this.cancelEdit();
+    },
+
     render: function() {
         var editable_el;
 
@@ -125,7 +129,8 @@ module.exports = React.createClass({
         } else if (this.state.phase == this.Phases.Edit) {
             editable_el = (
                 <div>
-                    <input type="text" defaultValue={this.state.value} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onFinish} placeholder={this.props.placeHolder} autoFocus/>
+                    <input type="text" defaultValue={this.state.value}
+                        onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onBlur} placeholder={this.props.placeHolder} autoFocus/>
                 </div>
             );
         }
diff --git a/src/components/views/login/PasswordLogin.js b/src/components/views/login/PasswordLogin.js
index fabd71d67e..baaf3236d6 100644
--- a/src/components/views/login/PasswordLogin.js
+++ b/src/components/views/login/PasswordLogin.js
@@ -51,7 +51,7 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
                 <form onSubmit={this.onSubmitForm}>
                 <input className="mx_Login_field" ref="user" type="text"
                     value={this.state.username} onChange={this.onUsernameChanged}
-                    placeholder="Email or user name" />
+                    placeholder="Email or user name" autoFocus />
                 <br />
                 <input className="mx_Login_field" ref="pass" type="password"
                     value={this.state.password} onChange={this.onPasswordChanged}
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index be7f2f0593..193cafe255 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -54,8 +54,8 @@ module.exports = React.createClass({
 
         if (httpUrl) {
             return (
-                <span className="mx_MFileTile">
-                    <div className="mx_MImageTile_download">
+                <span className="mx_MFileBody">
+                    <div className="mx_MImageBody_download">
                         <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
                             <img src="img/download.png" width="10" height="12"/>
                             Download {text}
@@ -65,7 +65,7 @@ module.exports = React.createClass({
             );
         } else {
             var extra = text ? ': '+text : '';
-            return <span className="mx_MFileTile">
+            return <span className="mx_MFileBody">
                 Invalid file{extra}
             </span>
         }
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 93e2ce1b06..6afdddc307 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -48,18 +48,23 @@ module.exports = React.createClass({
         }
     },
 
-    onClick: function(ev) {
+    onClick: function onClick(ev) {
         if (ev.button == 0 && !ev.metaKey) {
             ev.preventDefault();
             var content = this.props.mxEvent.getContent();
             var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(content.url);
             var ImageView = sdk.getComponent("elements.ImageView");
-            Modal.createDialog(ImageView, {
+            var params = {
                 src: httpUrl,
-                width: content.info.w,
-                height: content.info.h,
-                mxEvent: this.props.mxEvent,
-            }, "mx_Dialog_lightbox");
+                mxEvent: this.props.mxEvent
+            };
+
+            if (content.info) {
+                params.width = content.info.w;
+                params.height = content.info.h;
+            }
+
+            Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
         }
     },
 
@@ -104,14 +109,14 @@ module.exports = React.createClass({
         var thumbUrl = this._getThumbUrl();
         if (thumbUrl) {
             return (
-                <span className="mx_MImageTile">
+                <span className="mx_MImageBody">
                     <a href={cli.mxcUrlToHttp(content.url)} onClick={ this.onClick }>
-                        <img className="mx_MImageTile_thumbnail" src={thumbUrl}
+                        <img className="mx_MImageBody_thumbnail" src={thumbUrl}
                             alt={content.body} style={imgStyle}
                             onMouseEnter={this.onImageEnter}
                             onMouseLeave={this.onImageLeave} />
                     </a>
-                    <div className="mx_MImageTile_download">
+                    <div className="mx_MImageBody_download">
                         <a href={cli.mxcUrlToHttp(content.url)} target="_blank">
                             <img src="img/download.png" width="10" height="12"/>
                             Download {content.body} ({ content.info && content.info.size ? filesize(content.info.size) : "Unknown size" })
@@ -121,13 +126,13 @@ module.exports = React.createClass({
             );
         } else if (content.body) {
             return (
-                <span className="mx_MImageTile">
+                <span className="mx_MImageBody">
                     Image '{content.body}' cannot be displayed.
                 </span>
             );
         } else {
             return (
-                <span className="mx_MImageTile">
+                <span className="mx_MImageBody">
                     This image cannot be displayed.
                 </span>
             );
diff --git a/src/components/views/messages/MVideoBody.js b/src/components/views/messages/MVideoBody.js
index 0d022f1648..ddd3dceca7 100644
--- a/src/components/views/messages/MVideoBody.js
+++ b/src/components/views/messages/MVideoBody.js
@@ -70,8 +70,8 @@ module.exports = React.createClass({
         }
 
         return (
-            <span className="mx_MVideoTile">
-                <video className="mx_MVideoTile" src={cli.mxcUrlToHttp(content.url)} alt={content.body}
+            <span className="mx_MVideoBody">
+                <video className="mx_MVideoBody" src={cli.mxcUrlToHttp(content.url)} alt={content.body}
                     controls preload={preload} autoPlay="0"
                     height={height} width={width} poster={poster}>
                 </video>
diff --git a/src/components/views/messages/MessageEvent.js b/src/components/views/messages/MessageEvent.js
index 164bf11930..63e77e9652 100644
--- a/src/components/views/messages/MessageEvent.js
+++ b/src/components/views/messages/MessageEvent.js
@@ -47,6 +47,7 @@ module.exports = React.createClass({
             TileType = tileTypes[msgtype];
         }
 
-        return <TileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} />;
+        return <TileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} 
+                    onHighlightClick={this.props.onHighlightClick} />;
     },
 });
diff --git a/src/components/views/messages/TextualBody.js b/src/components/views/messages/TextualBody.js
index 7134d5faf4..0c9710f06e 100644
--- a/src/components/views/messages/TextualBody.js
+++ b/src/components/views/messages/TextualBody.js
@@ -49,25 +49,26 @@ module.exports = React.createClass({
     render: function() {
         var mxEvent = this.props.mxEvent;
         var content = mxEvent.getContent();
-        var body = HtmlUtils.bodyToHtml(content, this.props.highlights);
+        var body = HtmlUtils.bodyToHtml(content, this.props.highlights,
+                                       {onHighlightClick: this.props.onHighlightClick});
 
         switch (content.msgtype) {
             case "m.emote":
                 var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
                 return (
-                    <span ref="content" className="mx_MEmoteTile mx_MessageTile_content">
+                    <span ref="content" className="mx_MEmoteBody mx_EventTile_content">
                         * { name } { body }
                     </span>
                 );
             case "m.notice":
                 return (
-                    <span ref="content" className="mx_MNoticeTile mx_MessageTile_content">
+                    <span ref="content" className="mx_MNoticeBody mx_EventTile_content">
                         { body }
                     </span>
                 );
             default: // including "m.text"
                 return (
-                    <span ref="content" className="mx_MTextTile mx_MessageTile_content">
+                    <span ref="content" className="mx_MTextBody mx_EventTile_content">
                         { body }
                     </span>
                 );
diff --git a/src/components/views/messages/TextualEvent.js b/src/components/views/messages/TextualEvent.js
index 5a9a1408c5..a2db21cfae 100644
--- a/src/components/views/messages/TextualEvent.js
+++ b/src/components/views/messages/TextualEvent.js
@@ -34,7 +34,7 @@ module.exports = React.createClass({
         if (text == null || text.length == 0) return null;
 
         return (
-            <div className="mx_EventAsTextTile">
+            <div className="mx_TextualEvent">
                 {TextForEvent.textForEvent(this.props.mxEvent)}
             </div>
         );
diff --git a/src/components/views/messages/UnknownBody.js b/src/components/views/messages/UnknownBody.js
index ae49af198d..f831e08a2c 100644
--- a/src/components/views/messages/UnknownBody.js
+++ b/src/components/views/messages/UnknownBody.js
@@ -24,7 +24,7 @@ module.exports = React.createClass({
     render: function() {
         var content = this.props.mxEvent.getContent();
         return (
-            <span className="mx_UnknownMessageTile">
+            <span className="mx_UnknownBody">
                 {content.body}
             </span>
         );
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index 8292cdf826..67daebccbc 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -44,6 +44,7 @@ var eventTileTypes = {
     'm.call.hangup' : 'messages.TextualEvent',
     'm.room.name'   : 'messages.TextualEvent',
     'm.room.topic'  : 'messages.TextualEvent',
+    'm.room.third_party_invite': 'messages.TextualEvent'
 };
 
 var MAX_READ_AVATARS = 5;
@@ -73,6 +74,32 @@ module.exports = React.createClass({
         }
     },
 
+    propTypes: {
+        /* the MatrixEvent to show */
+        mxEvent: React.PropTypes.object.isRequired,
+
+        /* true if this is a continuation of the previous event (which has the
+         * effect of not showing another avatar/displayname
+         */
+        continuation: React.PropTypes.bool,
+
+        /* true if this is the last event in the timeline (which has the effect
+         * of always showing the timestamp)
+         */
+        last: React.PropTypes.bool,
+
+        /* true if this is search context (which has the effect of greying out
+         * the text
+         */
+        contextual: React.PropTypes.bool,
+
+        /* a list of words to highlight */
+        highlights: React.PropTypes.array,
+
+        /* a function to be called when the highlight is clicked */
+        onHighlightClick: React.PropTypes.func,
+    },
+
     getInitialState: function() {
         return {menu: false, allReadAvatars: false};
     },
@@ -133,6 +160,9 @@ module.exports = React.createClass({
 
         for (var i = 0; i < receipts.length; ++i) {
             var member = room.getMember(receipts[i].userId);
+            if (!member) {
+                continue;
+            }
 
             // Using react refs here would mean both getting Velociraptor to expose
             // them and making them scoped to the whole RoomView. Not impossible, but
@@ -279,7 +309,8 @@ module.exports = React.createClass({
                 { avatar }
                 { sender }
                 <div className="mx_EventTile_line">
-                    <EventTileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} />
+                    <EventTileType mxEvent={this.props.mxEvent} highlights={this.props.highlights} 
+                          onHighlightClick={this.props.onHighlightClick} />
                 </div>
             </div>
         );
diff --git a/src/components/views/rooms/MemberInfo.js b/src/components/views/rooms/MemberInfo.js
index 6b4b441463..bf17195664 100644
--- a/src/components/views/rooms/MemberInfo.js
+++ b/src/components/views/rooms/MemberInfo.js
@@ -43,11 +43,16 @@ module.exports = React.createClass({
     componentDidMount: function() {
         // work out the current state
         if (this.props.member) {
-            var memberState = this._calculateOpsPermissions();
+            var memberState = this._calculateOpsPermissions(this.props.member);
             this.setState(memberState);
         }
     },
 
+    componentWillReceiveProps: function(newProps) {
+        var memberState = this._calculateOpsPermissions(newProps.member);
+        this.setState(memberState);
+    },
+
     onKick: function() {
         var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         var roomId = this.props.member.roomId;
@@ -221,36 +226,10 @@ module.exports = React.createClass({
         }
     },
 
-    // FIXME: this is horribly duplicated with MemberTile's onLeaveClick.
-    // Not sure what the right solution to this is.
     onLeaveClick: function() {
-        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-
-        var roomId = this.props.member.roomId;
-        Modal.createDialog(QuestionDialog, {
-            title: "Leave room",
-            description: "Are you sure you want to leave the room?",
-            onFinished: function(should_leave) {
-                if (should_leave) {
-                    var d = MatrixClientPeg.get().leave(roomId);
-                    
-                    // FIXME: controller shouldn't be loading a view :(
-                    var Loader = sdk.getComponent("elements.Spinner");
-                    var modal = Modal.createDialog(Loader);
-
-                    d.then(function() {
-                        modal.close();
-                        dis.dispatch({action: 'view_next_room'});
-                    }, function(err) {
-                        modal.close();
-                        Modal.createDialog(ErrorDialog, {
-                            title: "Failed to leave room",
-                            description: err.toString()
-                        });
-                    });
-                }
-            }
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.member.roomId,
         });
         this.props.onFinished();        
     },
@@ -269,13 +248,13 @@ module.exports = React.createClass({
         }
     },
 
-    _calculateOpsPermissions: function() {
+    _calculateOpsPermissions: function(member) {
         var defaultPerms = {
             can: {},
             muted: false,
             modifyLevel: false
         };
-        var room = MatrixClientPeg.get().getRoom(this.props.member.roomId);
+        var room = MatrixClientPeg.get().getRoom(member.roomId);
         if (!room) {
             return defaultPerms;
         }
@@ -286,7 +265,7 @@ module.exports = React.createClass({
             return defaultPerms;
         }
         var me = room.getMember(MatrixClientPeg.get().credentials.userId);
-        var them = this.props.member;
+        var them = member;
         return {
             can: this._calculateCanPermissions(
                 me, them, powerLevels.getContent()
@@ -377,7 +356,7 @@ module.exports = React.createClass({
         var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         return (
             <div className="mx_MemberInfo">
-                <img className="mx_MemberInfo_cancel" src="img/cancel-black.png" width="18" height="18" onClick={this.onCancel}/>
+                <img className="mx_MemberInfo_cancel" src="img/cancel.svg" width="18" height="18" onClick={this.onCancel}/>
                 <div className="mx_MemberInfo_avatar">
                     <MemberAvatar member={this.props.member} width={48} height={48} />
                 </div>
diff --git a/src/components/views/rooms/MemberTile.js b/src/components/views/rooms/MemberTile.js
index 4d99529d98..38d9285c0c 100644
--- a/src/components/views/rooms/MemberTile.js
+++ b/src/components/views/rooms/MemberTile.js
@@ -31,33 +31,11 @@ module.exports = React.createClass({
     },
 
     onLeaveClick: function() {
-        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-
-        var roomId = this.props.member.roomId;
-        Modal.createDialog(QuestionDialog, {
-            title: "Leave room",
-            description: "Are you sure you want to leave the room?",
-            onFinished: function(should_leave) {
-                if (should_leave) {
-                    var d = MatrixClientPeg.get().leave(roomId);
-
-                    // FIXME: controller shouldn't be loading a view :(
-                    var Loader = sdk.getComponent("elements.Spinner");
-                    var modal = Modal.createDialog(Loader);
-
-                    d.then(function() {
-                        modal.close();
-                        dis.dispatch({action: 'view_next_room'});
-                    }, function(err) {
-                        modal.close();
-                        Modal.createDialog(ErrorDialog, {
-                            title: "Failed to leave room",
-                            description: err.toString()
-                        });
-                    });
-                }
-            }
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.member.roomId,
         });
+        this.props.onFinished();        
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {
diff --git a/src/components/views/rooms/MessageComposer.js b/src/components/views/rooms/MessageComposer.js
index 36be8829ff..5ac4a24908 100644
--- a/src/components/views/rooms/MessageComposer.js
+++ b/src/components/views/rooms/MessageComposer.js
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 var React = require("react");
+
 var marked = require("marked");
 marked.setOptions({
     renderer: new marked.Renderer(),
@@ -25,9 +26,12 @@ marked.setOptions({
     smartLists: true,
     smartypants: false
 });
+
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var SlashCommands = require("../../../SlashCommands");
 var Modal = require("../../../Modal");
+var CallHandler = require('../../../CallHandler');
+var MemberEntry = require("../../../TabCompleteEntries").MemberEntry;
 var sdk = require('../../../index');
 
 var dis = require("../../../dispatcher");
@@ -61,14 +65,13 @@ function mdownToHtml(mdown) {
 module.exports = React.createClass({
     displayName: 'MessageComposer',
 
+    propTypes: {
+        tabComplete: React.PropTypes.any
+    },
+
     componentWillMount: function() {
         this.oldScrollHeight = 0;
         this.markdownEnabled = MARKDOWN_ENABLED;
-        this.tabStruct = {
-            completing: false,
-            original: null,
-            index: 0
-        };
         var self = this;
         this.sentHistory = {
             // The list of typed messages. Index 0 is more recent
@@ -169,6 +172,9 @@ module.exports = React.createClass({
             this.props.room.roomId
         );
         this.resizeInput();
+        if (this.props.tabComplete) {
+            this.props.tabComplete.setTextArea(this.refs.textarea);
+        }
     },
 
     componentWillUnmount: function() {
@@ -194,13 +200,6 @@ module.exports = React.createClass({
             this.sentHistory.push(input);
             this.onEnter(ev);
         }
-        else if (ev.keyCode === KeyCode.TAB) {
-            var members = [];
-            if (this.props.room) {
-                members = this.props.room.getJoinedMembers();
-            }
-            this.onTab(ev, members);
-        }
         else if (ev.keyCode === KeyCode.UP) {
             var input = this.refs.textarea.value;
             var offset = this.refs.textarea.selectionStart || 0;
@@ -219,10 +218,9 @@ module.exports = React.createClass({
                 this.resizeInput();
             }
         }
-        else if (ev.keyCode !== KeyCode.SHIFT && this.tabStruct.completing) {
-            // they're resuming typing; reset tab complete state vars.
-            this.tabStruct.completing = false;
-            this.tabStruct.index = 0;
+
+        if (this.props.tabComplete) {
+            this.props.tabComplete.onKeyDown(ev);
         }
 
         var self = this;
@@ -316,6 +314,9 @@ module.exports = React.createClass({
         if (isEmote) {
             contentText = contentText.substring(4);
         }
+        else if (contentText[0] === '/') {
+            contentText = contentText.substring(1);   
+        }
 
         var htmlText;
         if (this.markdownEnabled && (htmlText = mdownToHtml(contentText)) !== contentText) {
@@ -343,104 +344,6 @@ module.exports = React.createClass({
         ev.preventDefault();
     },
 
-    onTab: function(ev, sortedMembers) {
-        var textArea = this.refs.textarea;
-        if (!this.tabStruct.completing) {
-            this.tabStruct.completing = true;
-            this.tabStruct.index = 0;
-            // cache starting text
-            this.tabStruct.original = textArea.value;
-        }
-
-        // loop in the right direction
-        if (ev.shiftKey) {
-            this.tabStruct.index --;
-            if (this.tabStruct.index < 0) {
-                // wrap to the last search match, and fix up to a real index
-                // value after we've matched.
-                this.tabStruct.index = Number.MAX_VALUE;
-            }
-        }
-        else {
-            this.tabStruct.index++;
-        }
-
-        var searchIndex = 0;
-        var targetIndex = this.tabStruct.index;
-        var text = this.tabStruct.original;
-
-        var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text);
-        // console.log("Searched in '%s' - got %s", text, search);
-        if (targetIndex === 0) { // 0 is always the original text
-            textArea.value = text;
-        }
-        else if (search && search[1]) {
-            // console.log("search found: " + search+" from "+text);
-            var expansion;
-
-            // FIXME: could do better than linear search here
-            for (var i=0; i<sortedMembers.length; i++) {
-                var member = sortedMembers[i];
-                if (member.name && searchIndex < targetIndex) {
-                    if (member.name.toLowerCase().indexOf(search[1].toLowerCase()) === 0) {
-                        expansion = member.name;
-                        searchIndex++;
-                    }
-                }
-            }
-
-            if (searchIndex < targetIndex) { // then search raw mxids
-                for (var i=0; i<sortedMembers.length; i++) {
-                    if (searchIndex >= targetIndex) {
-                        break;
-                    }
-                    var userId = sortedMembers[i].userId;
-                    // === 1 because mxids are @username
-                    if (userId.toLowerCase().indexOf(search[1].toLowerCase()) === 1) {
-                        expansion = userId;
-                        searchIndex++;
-                    }
-                }
-            }
-
-            if (searchIndex === targetIndex ||
-                    targetIndex === Number.MAX_VALUE) {
-                // xchat-style tab complete, add a colon if tab
-                // completing at the start of the text
-                if (search[0].length === text.length) {
-                    expansion += ": ";
-                }
-                else {
-                    expansion += " ";
-                }
-                textArea.value = text.replace(
-                    /@?([a-zA-Z0-9_\-:\.]+)$/, expansion
-                );
-                // cancel blink
-                textArea.style["background-color"] = "";
-                if (targetIndex === Number.MAX_VALUE) {
-                    // wrap the index around to the last index found
-                    this.tabStruct.index = searchIndex;
-                    targetIndex = searchIndex;
-                }
-            }
-            else {
-                // console.log("wrapped!");
-                textArea.style["background-color"] = "#faa";
-                setTimeout(function() {
-                     textArea.style["background-color"] = "";
-                }, 150);
-                textArea.value = text;
-                this.tabStruct.index = 0;
-            }
-        }
-        else {
-            this.tabStruct.index = 0;
-        }
-        // prevent the default TAB operation (typically focus shifting)
-        ev.preventDefault();
-    },
-
     onTypingActivity: function() {
         this.isTyping = true;
         if (!this.userTypingTimer) {
@@ -524,6 +427,20 @@ module.exports = React.createClass({
         this.refs.uploadInput.value = null;
     },
 
+    onHangupClick: function() {
+        var call = CallHandler.getCallForRoom(this.props.room.roomId);
+        //var call = CallHandler.getAnyActiveCall();
+        if (!call) {
+            return;
+        }
+        dis.dispatch({
+            action: 'hangup',
+            // hangup the call for this room, which may not be the room in props
+            // (e.g. conferences which will hangup the 1:1 room instead)
+            room_id: call.roomId
+        });
+    },
+
     onCallClick: function(ev) {
         dis.dispatch({
             action: 'place_call',
@@ -544,6 +461,27 @@ module.exports = React.createClass({
         var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
         var uploadInputStyle = {display: 'none'};
         var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+
+        var callButton, videoCallButton, hangupButton;
+        var call = CallHandler.getCallForRoom(this.props.room.roomId);
+        //var call = CallHandler.getAnyActiveCall();
+        if (this.props.callState && this.props.callState !== 'ended') {
+            hangupButton =
+                <div className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
+                    <img src="img/hangup.svg" alt="Hangup" title="Hangup" width="25" height="26"/>
+                </div>;
+        }
+        else {
+            callButton =
+                <div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick}>
+                    <img src="img/voice.svg" alt="Voice call" title="Voice call" width="16" height="26"/>
+                </div>
+            videoCallButton =
+                <div className="mx_MessageComposer_videocall" onClick={this.onCallClick}>
+                    <img src="img/call.svg" alt="Video call" title="Video call" width="30" height="22"/>
+                </div>
+        }
+
         return (
         <div className="mx_MessageComposer">
             <div className="mx_MessageComposer_wrapper">
@@ -555,15 +493,12 @@ module.exports = React.createClass({
                         <textarea ref="textarea" rows="1" onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} placeholder="Type a message..." />
                     </div>
                     <div className="mx_MessageComposer_upload" onClick={this.onUploadClick}>
-                        <img src="img/upload.png" alt="Upload file" title="Upload file" width="17" height="22"/>
+                        <img src="img/upload.svg" alt="Upload file" title="Upload file" width="19" height="24"/>
                         <input type="file" style={uploadInputStyle} ref="uploadInput" onChange={this.onUploadFileSelected} />
                     </div>
-                    <div className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick}>
-                        <img src="img/voice.png" alt="Voice call" title="Voice call" width="16" height="26"/>
-                    </div>
-                    <div className="mx_MessageComposer_videocall" onClick={this.onCallClick}>
-                        <img src="img/call.png" alt="Video call" title="Video call" width="28" height="20"/>
-                    </div>
+                    { hangupButton }
+                    { callButton }
+                    { videoCallButton }
                 </div>
             </div>
         </div>
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index 76724d88fd..13959a16b9 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -16,15 +16,9 @@ limitations under the License.
 
 'use strict';
 
-/*
- * State vars:
- * this.state.call_state = the UI state of the call (see CallHandler)
- */
-
 var React = require('react');
 var sdk = require('../../../index');
 var dis = require("../../../dispatcher");
-var CallHandler = require("../../../CallHandler");
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 
 module.exports = React.createClass({
@@ -35,6 +29,8 @@ module.exports = React.createClass({
         editing: React.PropTypes.bool,
         onSettingsClick: React.PropTypes.func,
         onSaveClick: React.PropTypes.func,
+        onSearchClick: React.PropTypes.func,
+        onLeaveClick: React.PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -45,34 +41,6 @@ module.exports = React.createClass({
         };
     },
 
-    componentDidMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-        if (this.props.room) {
-            var call = CallHandler.getCallForRoom(this.props.room.roomId);
-            var callState = call ? call.call_state : "ended";
-            this.setState({
-                call_state: callState
-            });
-        }
-    },
-
-    componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);
-    },
-
-    onAction: function(payload) {
-        // don't filter out payloads for room IDs other than props.room because
-        // we may be interested in the conf 1:1 room
-        if (payload.action !== 'call_state' || !payload.room_id) {
-            return;
-        }
-        var call = CallHandler.getCallForRoom(payload.room_id);
-        var callState = call ? call.call_state : "ended";
-        this.setState({
-            call_state: callState
-        });
-    },
-
     onVideoClick: function(e) {
         dis.dispatch({
             action: 'place_call',
@@ -80,6 +48,7 @@ module.exports = React.createClass({
             room_id: this.props.room.roomId
         });
     },
+
     onVoiceClick: function() {
         dis.dispatch({
             action: 'place_call',
@@ -87,38 +56,6 @@ module.exports = React.createClass({
             room_id: this.props.room.roomId
         });
     },
-    onHangupClick: function() {
-        var call = CallHandler.getCallForRoom(this.props.room.roomId);
-        if (!call) { return; }
-        dis.dispatch({
-            action: 'hangup',
-            // hangup the call for this room, which may not be the room in props
-            // (e.g. conferences which will hangup the 1:1 room instead)
-            room_id: call.roomId
-        });
-    },
-    onMuteAudioClick: function() {
-        var call = CallHandler.getCallForRoom(this.props.room.roomId);
-        if (!call) {
-            return;
-        }
-        var newState = !call.isMicrophoneMuted();
-        call.setMicrophoneMuted(newState);
-        this.setState({
-            audioMuted: newState
-        });
-    },
-    onMuteVideoClick: function() {
-        var call = CallHandler.getCallForRoom(this.props.room.roomId);
-        if (!call) {
-            return;
-        }
-        var newState = !call.isLocalVideoMuted();
-        call.setLocalVideoMuted(newState);
-        this.setState({
-            videoMuted: newState
-        });
-    },
 
     onNameChange: function(new_name) {
         if (this.props.room.name != new_name && new_name) {
@@ -129,10 +66,6 @@ module.exports = React.createClass({
     getRoomName: function() {
         return this.refs.name_edit.value;
     },
-
-    onFullscreenClick: function() {
-        dis.dispatch({action: 'video_fullscreen', fullscreen: true}, true);
-    },
     
     render: function() {
         var EditableText = sdk.getComponent("elements.EditableText");
@@ -140,53 +73,23 @@ module.exports = React.createClass({
 
         var header;
         if (this.props.simpleHeader) {
+            var cancel;
+            if (this.props.onCancelClick) {
+                cancel = <img className="mx_RoomHeader_simpleHeaderCancel" src="img/cancel-black.png" onClick={ this.props.onCancelClick } alt="Close" width="18" height="18"/>
+            }
             header =
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_simpleHeader">
                         { this.props.simpleHeader }
+                        { cancel }
                     </div>
                 </div>
         }
         else {
             var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
 
-            var call_buttons;
-            if (this.state && this.state.call_state != 'ended') {
-                //var muteVideoButton;
-                var activeCall = (
-                    CallHandler.getCallForRoom(this.props.room.roomId)
-                );
-/*                
-                if (activeCall && activeCall.type === "video") {
-                    muteVideoButton = (
-                        <div className="mx_RoomHeader_textButton mx_RoomHeader_voipButton"
-                                onClick={this.onMuteVideoClick}>
-                            {
-                                (activeCall.isLocalVideoMuted() ?
-                                    "Unmute" : "Mute") + " video"
-                            }
-                        </div>
-                    );
-                }
-                        {muteVideoButton}
-                        <div className="mx_RoomHeader_textButton mx_RoomHeader_voipButton"
-                                onClick={this.onMuteAudioClick}>
-                            {
-                                (activeCall && activeCall.isMicrophoneMuted() ?
-                                    "Unmute" : "Mute") + " audio"
-                            }
-                        </div>
-*/                
-
-                call_buttons = (
-                    <div className="mx_RoomHeader_textButton"
-                            onClick={this.onHangupClick}>
-                        End call
-                    </div>
-                );
-            }
-
             var name = null;
+            var searchStatus = null;
             var topic_el = null;
             var cancel_button = null;
             var save_button = null;
@@ -203,11 +106,20 @@ module.exports = React.createClass({
                 save_button = <div className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save Changes</div>
             } else {
                 // <EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />
+
+                var searchStatus;
+                // don't display the search count until the search completes and
+                // gives us a non-null searchCount.
+                if (this.props.searchInfo && this.props.searchInfo.searchCount !== null) {
+                    searchStatus = <div className="mx_RoomHeader_searchStatus">&nbsp;(~{ this.props.searchInfo.searchCount } results)</div>;
+                }
+
                 name =
                     <div className="mx_RoomHeader_name" onClick={this.props.onSettingsClick}>
-                        <div className="mx_RoomHeader_nametext">{ this.props.room.name }</div>
+                        <div className="mx_RoomHeader_nametext" title={ this.props.room.name }>{ this.props.room.name }</div>
+                        { searchStatus }
                         <div className="mx_RoomHeader_settingsButton">
-                            <img src="img/settings.png" width="12" height="12"/>
+                            <img src="img/settings.svg" width="12" height="12"/>
                         </div>
                     </div>
                 if (topic) topic_el = <div className="mx_RoomHeader_topic" title={topic.getContent().topic}>{ topic.getContent().topic }</div>;
@@ -220,23 +132,22 @@ module.exports = React.createClass({
                 );
             }
 
-            var zoom_button, video_button, voice_button;
-            if (activeCall) {
-                if (activeCall.type == "video") {
-                    zoom_button = (
-                        <div className="mx_RoomHeader_button" onClick={this.onFullscreenClick}>
-                            <img src="img/zoom.png" title="Fullscreen" alt="Fullscreen" width="32" height="32" style={{ 'marginTop': '-5px' }}/>
-                        </div>
-                    );
-                }
-                video_button = 
-                        <div className="mx_RoomHeader_button mx_RoomHeader_video" onClick={activeCall && activeCall.type === "video" ? this.onMuteVideoClick : this.onVideoClick}>
-                            <img src="img/video.png" title="Video call" alt="Video call" width="32" height="32" style={{ 'marginTop': '-8px' }}/>
-                        </div>;
-                voice_button =
-                        <div className="mx_RoomHeader_button mx_RoomHeader_voice" onClick={activeCall ? this.onMuteAudioClick : this.onVoiceClick}>
-                            <img src="img/voip.png" title="VoIP call" alt="VoIP call" width="32" height="32" style={{ 'marginTop': '-8px' }}/>
-                        </div>;
+            var leave_button;
+            if (this.props.onLeaveClick) {
+                leave_button =
+                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton">
+                        <img src="img/leave.svg" title="Leave room" alt="Leave room"
+                            width="26" height="20" onClick={this.props.onLeaveClick}/>
+                    </div>;
+            }
+
+            var forget_button;
+            if (this.props.onForgetClick) {
+                forget_button =
+                    <div className="mx_RoomHeader_button mx_RoomHeader_leaveButton">
+                        <img src="img/leave.svg" title="Forget room" alt="Forget room"
+                            width="26" height="20" onClick={this.props.onForgetClick}/>
+                    </div>;
             }
 
             header =
@@ -250,15 +161,13 @@ module.exports = React.createClass({
                             { topic_el }
                         </div>
                     </div>
-                    {call_buttons}
                     {cancel_button}
                     {save_button}
                     <div className="mx_RoomHeader_rightRow">
-                        { video_button }
-                        { voice_button }
-                        { zoom_button }
+                        { forget_button }
+                        { leave_button }
                         <div className="mx_RoomHeader_button">
-                            <img src="img/search.png" title="Search" alt="Search" width="21" height="19" onClick={this.props.onSearchClick}/>
+                            <img src="img/search.svg" title="Search" alt="Search" width="21" height="19" onClick={this.props.onSearchClick}/>
                         </div>
                     </div>
                 </div>
diff --git a/src/components/views/rooms/RoomList.js b/src/components/views/rooms/RoomList.js
index db5195d3c0..6a19e21d27 100644
--- a/src/components/views/rooms/RoomList.js
+++ b/src/components/views/rooms/RoomList.js
@@ -19,7 +19,9 @@ var React = require("react");
 var ReactDOM = require("react-dom");
 var GeminiScrollbar = require('react-gemini-scrollbar');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
+var CallHandler = require('../../../CallHandler');
 var RoomListSorter = require("../../../RoomListSorter");
+var UnreadStatus = require('../../../UnreadStatus');
 var dis = require("../../../dispatcher");
 var sdk = require('../../../index');
 
@@ -37,13 +39,16 @@ module.exports = React.createClass({
     getInitialState: function() {
         return {
             activityMap: null,
+            isLoadingLeftRooms: false,
             lists: {},
+            incomingCall: null,
         }
     },
 
     componentWillMount: function() {
         var cli = MatrixClientPeg.get();
         cli.on("Room", this.onRoom);
+        cli.on("deleteRoom", this.onDeleteRoom);
         cli.on("Room.timeline", this.onRoomTimeline);
         cli.on("Room.name", this.onRoomName);
         cli.on("Room.tags", this.onRoomTags);
@@ -65,7 +70,21 @@ module.exports = React.createClass({
                 this.tooltip = payload.tooltip;
                 this._repositionTooltip();
                 if (this.tooltip) this.tooltip.style.display = 'block';
-                break
+                break;
+            case 'call_state':
+                var call = CallHandler.getCall(payload.room_id);
+                if (call && call.call_state === 'ringing') {
+                    this.setState({
+                        incomingCall: call
+                    });
+                    this._repositionIncomingCallBox(undefined, true);
+                }
+                else {
+                    this.setState({
+                        incomingCall: null
+                    });            
+                }
+                break;
         }
     },
 
@@ -87,7 +106,26 @@ module.exports = React.createClass({
     },
 
     onRoom: function(room) {
-        this.refreshRoomList();
+        this._delayedRefreshRoomList();
+    },
+
+    onDeleteRoom: function(roomId) {
+        this._delayedRefreshRoomList();
+    },
+
+    onArchivedHeaderClick: function(isHidden) {
+        if (!isHidden) {
+            var self = this;
+            this.setState({ isLoadingLeftRooms: true });
+            // we don't care about the response since it comes down via "Room"
+            // events.
+            MatrixClientPeg.get().syncLeftRooms().catch(function(err) {
+                console.error("Failed to sync left rooms: %s", err);
+                console.error(err);
+            }).finally(function() {
+                self.setState({ isLoadingLeftRooms: false });
+            });
+        }
     },
 
     onRoomTimeline: function(ev, room, toStartOfTimeline) {
@@ -98,47 +136,85 @@ module.exports = React.createClass({
             room.roomId != this.props.selectedRoom &&
             ev.getSender() != MatrixClientPeg.get().credentials.userId)
         {
-            // don't mark rooms as unread for just member changes
-            if (ev.getType() != "m.room.member") {
+            if (UnreadStatus.eventTriggersUnreadCount(ev)) {
                 hl = 1;
             }
 
+            var me = room.getMember(MatrixClientPeg.get().credentials.userId);
             var actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
-            if (actions && actions.tweaks && actions.tweaks.highlight) {
+            if ((actions && actions.tweaks && actions.tweaks.highlight) ||
+                (me && me.membership == "invite"))
+            {
                 hl = 2;
             }
         }
 
+        var newState = this.getRoomLists();
         if (hl > 0) {
-            var newState = this.getRoomLists();
-
             // obviously this won't deep copy but this shouldn't be necessary
             var amap = this.state.activityMap;
             amap[room.roomId] = Math.max(amap[room.roomId] || 0, hl);
 
             newState.activityMap = amap;
 
-            this.setState(newState);
         }
+        // still want to update the list even if the highlight status
+        // hasn't changed because the ordering may have
+        this.setState(newState);
     },
 
     onRoomName: function(room) {
-        this.refreshRoomList();
+        this._delayedRefreshRoomList();
     },
 
     onRoomTags: function(event, room) {
-        this.refreshRoomList();        
+        this._delayedRefreshRoomList();
     },
 
     onRoomStateEvents: function(ev, state) {
-        setTimeout(this.refreshRoomList, 0);
+        this._delayedRefreshRoomList();
     },
 
     onRoomMemberName: function(ev, member) {
-        setTimeout(this.refreshRoomList, 0);
+        this._delayedRefreshRoomList();
+    },
+
+    _delayedRefreshRoomList: function() {
+        // There can be 1000s of JS SDK events when rooms are initially synced;
+        // we don't want to do lots of work rendering until things have settled.
+        // Therefore, keep a 1s refresh buffer which will refresh the room list
+        // at MOST once every 1s to prevent thrashing.
+        var MAX_REFRESH_INTERVAL_MS = 1000;
+        var self = this;
+
+        if (!self._lastRefreshRoomListTs) {
+            self.refreshRoomList(); // first refresh evar
+        }
+        else {
+            var timeWaitedMs = Date.now() - self._lastRefreshRoomListTs;
+            if (timeWaitedMs > MAX_REFRESH_INTERVAL_MS) {
+                clearTimeout(self._refreshRoomListTimerId);
+                self._refreshRoomListTimerId = null;
+                self.refreshRoomList(); // refreshed more than MAX_REFRESH_INTERVAL_MS ago
+            }
+            else {
+                // refreshed less than MAX_REFRESH_INTERVAL_MS ago, wait the difference
+                // if we aren't already waiting. If we are waiting then NOP, it will
+                // fire soon, promise!
+                if (!self._refreshRoomListTimerId) {
+                    self._refreshRoomListTimerId = setTimeout(function() {
+                        self.refreshRoomList();
+                    }, 10 + MAX_REFRESH_INTERVAL_MS - timeWaitedMs); // 10 is a buffer amount
+                }
+            }
+        }
     },
 
     refreshRoomList: function() {
+        // console.log("DEBUG: Refresh room list delta=%s ms",
+        //     (!this._lastRefreshRoomListTs ? "-" : (Date.now() - this._lastRefreshRoomListTs))
+        // );
+
         // TODO: rather than bluntly regenerating and re-sorting everything
         // every time we see any kind of room change from the JS SDK
         // we could do incremental updates on our copy of the state
@@ -146,27 +222,31 @@ module.exports = React.createClass({
         // us re-rendering all the sublists every time anything changes anywhere
         // in the state of the client.
         this.setState(this.getRoomLists());
+        this._lastRefreshRoomListTs = Date.now();
     },
 
     getRoomLists: function() {
         var self = this;
         var s = { lists: {} };
 
-        s.lists["m.invite"] = [];
+        s.lists["im.vector.fake.invite"] = [];
         s.lists["m.favourite"] = [];
-        s.lists["m.recent"] = [];
+        s.lists["im.vector.fake.recent"] = [];
         s.lists["m.lowpriority"] = [];
-        s.lists["m.archived"] = [];
+        s.lists["im.vector.fake.archived"] = [];
 
         MatrixClientPeg.get().getRooms().forEach(function(room) {
             var me = room.getMember(MatrixClientPeg.get().credentials.userId);
 
             if (me && me.membership == "invite") {
-                s.lists["m.invite"].push(room);
+                s.lists["im.vector.fake.invite"].push(room);
+            }
+            else if (me && me.membership === "leave") {
+                s.lists["im.vector.fake.archived"].push(room);
             }
             else {
                 var shouldShowRoom =  (
-                    me && (me.membership == "join")
+                    me && (me.membership == "join" || me.membership === "ban")
                 );
 
                 // hiding conf rooms only ever toggles shouldShowRoom to false
@@ -178,7 +258,7 @@ module.exports = React.createClass({
                             return m.userId !== me.userId
                         })[0];
                         var ConfHandler = self.props.ConferenceHandler;
-                        if (ConfHandler && ConfHandler.isConferenceUser(otherMember)) {
+                        if (ConfHandler && ConfHandler.isConferenceUser(otherMember.userId)) {
                             // console.log("Hiding conference 1:1 room %s", room.roomId);
                             shouldShowRoom = false;
                         }
@@ -195,23 +275,71 @@ module.exports = React.createClass({
                         }
                     }
                     else {
-                        s.lists["m.recent"].push(room); 
+                        s.lists["im.vector.fake.recent"].push(room); 
                     }
                 }
             }
         });
 
-        //console.log("calculated new roomLists; m.recent = " + s.lists["m.recent"]);
+        //console.log("calculated new roomLists; im.vector.fake.recent = " + s.lists["im.vector.fake.recent"]);
 
         // we actually apply the sorting to this when receiving the prop in RoomSubLists.
 
         return s;
     },
 
+    _getScrollNode: function() {
+        var panel = ReactDOM.findDOMNode(this);
+        if (!panel) return null;
+
+        if (panel.classList.contains('gm-prevented')) {
+            return panel;
+        } else {
+            return panel.children[2]; // XXX: Fragile!
+        }
+    },
+
+    _repositionTooltips: function(e) {
+        this._repositionTooltip(e);
+        this._repositionIncomingCallBox(e, false);
+    },
+
     _repositionTooltip: function(e) {
         if (this.tooltip && this.tooltip.parentElement) {
             var scroll = ReactDOM.findDOMNode(this);
-            this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - scroll.children[2].scrollTop) + "px"; 
+            this.tooltip.style.top = (scroll.parentElement.offsetTop + this.tooltip.parentElement.offsetTop - this._getScrollNode().scrollTop) + "px"; 
+        }
+    },
+
+    _repositionIncomingCallBox: function(e, firstTime) {
+        var incomingCallBox = document.getElementById("incomingCallBox");
+        if (incomingCallBox && incomingCallBox.parentElement) {
+            var scroll = this._getScrollNode();
+            var top = (scroll.offsetTop + incomingCallBox.parentElement.offsetTop - scroll.scrollTop);
+
+            if (firstTime) {
+                // scroll to make sure the callbox is on the screen...
+                if (top < 10) { // 10px of vertical margin at top of screen
+                    scroll.scrollTop = incomingCallBox.parentElement.offsetTop - 10;
+                }
+                else if (top > scroll.clientHeight - incomingCallBox.offsetHeight + 50) {
+                    scroll.scrollTop = incomingCallBox.parentElement.offsetTop - scroll.offsetHeight + incomingCallBox.offsetHeight - 50;
+                }
+                // recalculate top in case we clipped it.
+                top = (scroll.offsetTop + incomingCallBox.parentElement.offsetTop - scroll.scrollTop);
+            }
+            else {
+                // stop the box from scrolling off the screen
+                if (top < 10) {
+                    top = 10;
+                }
+                else if (top > scroll.clientHeight - incomingCallBox.offsetHeight + 50) {
+                    top = scroll.clientHeight - incomingCallBox.offsetHeight + 50;
+                }
+            }
+
+            incomingCallBox.style.top = top + "px";
+            incomingCallBox.style.left = scroll.offsetLeft + scroll.offsetWidth + "px";
         }
     },
 
@@ -230,16 +358,17 @@ module.exports = React.createClass({
         var self = this;
 
         return (
-            <GeminiScrollbar className="mx_RoomList_scrollbar" autoshow={true} onScroll={self._repositionTooltip}>
+            <GeminiScrollbar className="mx_RoomList_scrollbar" autoshow={true} onScroll={ self._repositionTooltips }>
             <div className="mx_RoomList">
                 { expandButton }
 
-                <RoomSubList list={ self.state.lists['m.invite'] }
+                <RoomSubList list={ self.state.lists['im.vector.fake.invite'] }
                              label="Invites"
                              editable={ false }
                              order="recent"
                              activityMap={ self.state.activityMap }
                              selectedRoom={ self.props.selectedRoom }
+                             incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed } />
 
                 <RoomSubList list={ self.state.lists['m.favourite'] }
@@ -250,19 +379,21 @@ module.exports = React.createClass({
                              order="manual"
                              activityMap={ self.state.activityMap }
                              selectedRoom={ self.props.selectedRoom }
+                             incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed } />
 
-                <RoomSubList list={ self.state.lists['m.recent'] }
-                             label="Conversations"
+                <RoomSubList list={ self.state.lists['im.vector.fake.recent'] }
+                             label="Rooms"
                              editable={ true }
                              verb="restore"
                              order="recent"
                              activityMap={ self.state.activityMap }
                              selectedRoom={ self.props.selectedRoom }
+                             incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed } />
 
                 { Object.keys(self.state.lists).map(function(tagName) {
-                    if (!tagName.match(/^m\.(invite|favourite|recent|lowpriority|archived)$/)) {
+                    if (!tagName.match(/^(m\.(favourite|lowpriority)|im\.vector\.fake\.(invite|recent|archived))$/)) {
                         return <RoomSubList list={ self.state.lists[tagName] }
                              key={ tagName }
                              label={ tagName }
@@ -272,6 +403,7 @@ module.exports = React.createClass({
                              order="manual"
                              activityMap={ self.state.activityMap }
                              selectedRoom={ self.props.selectedRoom }
+                             incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed } />
 
                     }
@@ -283,21 +415,25 @@ module.exports = React.createClass({
                              verb="demote"
                              editable={ true }
                              order="recent"
-                             bottommost={ self.state.lists['m.archived'].length === 0 }
                              activityMap={ self.state.activityMap }
                              selectedRoom={ self.props.selectedRoom }
+                             incomingCall={ self.state.incomingCall }
                              collapsed={ self.props.collapsed } />
 
-                <RoomSubList list={ self.state.lists['m.archived'] }
+                <RoomSubList list={ self.state.lists['im.vector.fake.archived'] }
                              label="Historical"
                              editable={ false }
                              order="recent"
-                             bottommost={ true }
                              activityMap={ self.state.activityMap }
                              selectedRoom={ self.props.selectedRoom }
-                             collapsed={ self.props.collapsed } />
+                             collapsed={ self.props.collapsed }
+                             alwaysShowHeader={ true }
+                             startAsHidden={ true }
+                             showSpinner={ self.state.isLoadingLeftRooms }
+                             onHeaderClick= { self.onArchivedHeaderClick }
+                             incomingCall={ self.state.incomingCall } />
             </div>
             </GeminiScrollbar>
         );
     }
-});
\ No newline at end of file
+});
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index b1c5ad1d85..37a77f9561 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -38,6 +38,7 @@ module.exports = React.createClass({
         highlight: React.PropTypes.bool.isRequired,
         isInvite: React.PropTypes.bool.isRequired,
         roomSubList: React.PropTypes.object.isRequired,
+        incomingCall: React.PropTypes.object,
     },
 
     getInitialState: function() {
@@ -70,14 +71,9 @@ module.exports = React.createClass({
             'mx_RoomTile_invited': (me && me.membership == 'invite'),
         });
 
-        var name;
-        if (this.props.isInvite) {
-            name = this.props.room.getMember(myUserId).events.member.getSender();
-        }
-        else {
-            // XXX: We should never display raw room IDs, but sometimes the room name js sdk gives is undefined
-            name = this.props.room.name || this.props.room.roomId;
-        }
+        // XXX: We should never display raw room IDs, but sometimes the
+        // room name js sdk gives is undefined (cannot repro this -- k)
+        var name = this.props.room.name || this.props.room.roomId;
 
         name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
         var badge;
@@ -110,6 +106,12 @@ module.exports = React.createClass({
             label = <RoomTooltip room={this.props.room}/>;
         }
 
+        var incomingCallBox;
+        if (this.props.incomingCall) {
+            var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
+            incomingCallBox = <IncomingCallBox incomingCall={ this.props.incomingCall }/>;
+        }
+
         var RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
 
         // These props are injected by React DnD,
@@ -125,6 +127,7 @@ module.exports = React.createClass({
                     { badge }
                 </div>
                 { label }
+                { incomingCallBox }
             </div>
         ));
     }
diff --git a/src/components/views/rooms/TabCompleteBar.js b/src/components/views/rooms/TabCompleteBar.js
new file mode 100644
index 0000000000..9668c4b3ac
--- /dev/null
+++ b/src/components/views/rooms/TabCompleteBar.js
@@ -0,0 +1,46 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var MatrixClientPeg = require("../../../MatrixClientPeg");
+
+module.exports = React.createClass({
+    displayName: 'TabCompleteBar',
+
+    propTypes: {
+        entries: React.PropTypes.array.isRequired
+    },
+
+    render: function() {
+        return (
+            <div className="mx_TabCompleteBar">
+            {this.props.entries.map(function(entry, i) {
+                return (
+                    <div key={entry.getKey() || i + ""} className="mx_TabCompleteBar_item"
+                            onClick={entry.onClick.bind(entry)} >
+                        {entry.getImageJsx()}
+                        <span className="mx_TabCompleteBar_text">
+                            {entry.getText()}
+                        </span>
+                    </div>
+                );
+            })}
+            </div>
+        );
+    }
+});
diff --git a/src/components/views/settings/ChangeAvatar.js b/src/components/views/settings/ChangeAvatar.js
index 2ae50a0cae..ee2b5ad5e1 100644
--- a/src/components/views/settings/ChangeAvatar.js
+++ b/src/components/views/settings/ChangeAvatar.js
@@ -23,6 +23,9 @@ module.exports = React.createClass({
     propTypes: {
         initialAvatarUrl: React.PropTypes.string,
         room: React.PropTypes.object,
+        // if false, you need to call changeAvatar.onFileSelected yourself.
+        showUploadSection: React.PropTypes.bool,
+        className: React.PropTypes.string
     },
 
     Phases: {
@@ -31,6 +34,13 @@ module.exports = React.createClass({
         Error: "error",
     },
 
+    getDefaultProps: function() {
+        return {
+            showUploadSection: true,
+            className: "mx_Dialog_content" // FIXME - shouldn't be this by default
+        };
+    },
+
     getInitialState: function() {
         return {
             avatarUrl: this.props.initialAvatarUrl,
@@ -55,7 +65,7 @@ module.exports = React.createClass({
             phase: this.Phases.Uploading
         });
         var self = this;
-        MatrixClientPeg.get().uploadContent(file).then(function(url) {
+        var httpPromise = MatrixClientPeg.get().uploadContent(file).then(function(url) {
             newUrl = url;
             if (self.props.room) {
                 return MatrixClientPeg.get().sendStateEvent(
@@ -67,7 +77,9 @@ module.exports = React.createClass({
             } else {
                 return MatrixClientPeg.get().setAvatarUrl(url);
             }
-        }).done(function() {
+        });
+
+        httpPromise.done(function() {
             self.setState({
                 phase: self.Phases.Display,
                 avatarUrl: MatrixClientPeg.get().mxcUrlToHttp(newUrl)
@@ -78,11 +90,13 @@ module.exports = React.createClass({
             });
             self.onError(error);
         });
+
+        return httpPromise;
     },
 
     onFileSelected: function(ev) {
         this.avatarSet = true;
-        this.setAvatarFromFile(ev.target.files[0]);
+        return this.setAvatarFromFile(ev.target.files[0]);
     },
 
     onError: function(error) {
@@ -106,19 +120,26 @@ module.exports = React.createClass({
             avatarImg = <img src={this.state.avatarUrl} style={style} />;
         }
 
+        var uploadSection;
+        if (this.props.showUploadSection) {
+            uploadSection = (
+                <div className={this.props.className}>
+                    Upload new:
+                    <input type="file" onChange={this.onFileSelected}/>
+                    {this.state.errorText}
+                </div>  
+            );
+        }
+
         switch (this.state.phase) {
             case this.Phases.Display:
             case this.Phases.Error:
                 return (
                     <div>
-                        <div className="mx_Dialog_content">
+                        <div className={this.props.className}>
                             {avatarImg}
                         </div>
-                        <div className="mx_Dialog_content">
-                            Upload new:
-                            <input type="file" onChange={this.onFileSelected}/>
-                            {this.state.errorText}
-                        </div>    
+                        {uploadSection}
                     </div>
                 );
             case this.Phases.Uploading:
diff --git a/src/components/views/settings/ChangeDisplayName.js b/src/components/views/settings/ChangeDisplayName.js
index 4af413cfbe..9410b02290 100644
--- a/src/components/views/settings/ChangeDisplayName.js
+++ b/src/components/views/settings/ChangeDisplayName.js
@@ -98,7 +98,9 @@ module.exports = React.createClass({
         } else {
             var EditableText = sdk.getComponent('elements.EditableText');
             return (
-                <EditableText ref="displayname_edit" initialValue={this.state.displayName} label="Click to set display name." onValueChanged={this.onValueChanged}/>
+                <EditableText ref="displayname_edit" initialValue={this.state.displayName}
+                    label="Click to set display name."
+                    onValueChanged={this.onValueChanged} />
             );
         }
     }
diff --git a/src/components/views/settings/ChangePassword.js b/src/components/views/settings/ChangePassword.js
index a6666b7ed1..219ad10714 100644
--- a/src/components/views/settings/ChangePassword.js
+++ b/src/components/views/settings/ChangePassword.js
@@ -18,30 +18,47 @@ limitations under the License.
 
 var React = require('react');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
+var sdk = require("../../../index");
 
 module.exports = React.createClass({
     displayName: 'ChangePassword',
     propTypes: {
         onFinished: React.PropTypes.func,
+        onError: React.PropTypes.func,
+        onCheckPassword: React.PropTypes.func,
+        rowClassName: React.PropTypes.string,
+        rowLabelClassName: React.PropTypes.string,
+        rowInputClassName: React.PropTypes.string,
+        buttonClassName: React.PropTypes.string
     },
 
     Phases: {
         Edit: "edit",
         Uploading: "uploading",
-        Error: "error",
-        Success: "Success"
+        Error: "error"
     },
 
     getDefaultProps: function() {
         return {
             onFinished: function() {},
+            onError: function() {},
+            onCheckPassword: function(oldPass, newPass, confirmPass) {
+                if (newPass !== confirmPass) {
+                    return {
+                        error: "New passwords don't match."
+                    };
+                } else if (!newPass || newPass.length === 0) {
+                    return {
+                        error: "Passwords can't be empty"
+                    };
+                }
+            }
         };
     },
 
     getInitialState: function() {
         return {
-            phase: this.Phases.Edit,
-            errorString: ''
+            phase: this.Phases.Edit
         }
     },
 
@@ -55,60 +72,72 @@ module.exports = React.createClass({
         };
 
         this.setState({
-            phase: this.Phases.Uploading,
-            errorString: '',
-        })
-
-        var d = cli.setPassword(authDict, new_password);
+            phase: this.Phases.Uploading
+        });
 
         var self = this;
-        d.then(function() {
-            self.setState({
-                phase: self.Phases.Success,
-                errorString: '',
-            })
+        cli.setPassword(authDict, new_password).then(function() {
+            self.props.onFinished();
         }, function(err) {
+            self.props.onError(err);
+        }).finally(function() {
             self.setState({
-                phase: self.Phases.Error,
-                errorString: err.toString()
-            })
-        });
+                phase: self.Phases.Edit
+            });
+        }).done();
     },
 
     onClickChange: function() {
         var old_password = this.refs.old_input.value;
         var new_password = this.refs.new_input.value;
         var confirm_password = this.refs.confirm_input.value;
-        if (new_password != confirm_password) {
-            this.setState({
-                state: this.Phases.Error,
-                errorString: "Passwords don't match"
-            });
-        } else if (new_password == '' || old_password == '') {
-            this.setState({
-                state: this.Phases.Error,
-                errorString: "Passwords can't be empty"
-            });
-        } else {
+        var err = this.props.onCheckPassword(
+            old_password, new_password, confirm_password
+        );
+        if (err) {
+            this.props.onError(err);
+        }
+        else {
             this.changePassword(old_password, new_password);
         }
     },
 
     render: function() {
+        var rowClassName = this.props.rowClassName;
+        var rowLabelClassName = this.props.rowLabelClassName;
+        var rowInputClassName = this.props.rowInputClassName
+        var buttonClassName = this.props.buttonClassName;
+
         switch (this.state.phase) {
             case this.Phases.Edit:
-            case this.Phases.Error:
                 return (
-                    <div>
-                        <div className="mx_Dialog_content">
-                            <div>{this.state.errorString}</div>
-                            <div><label>Old password <input type="password" ref="old_input"/></label></div>
-                            <div><label>New password <input type="password" ref="new_input"/></label></div>
-                            <div><label>Confirm password <input type="password" ref="confirm_input"/></label></div>
+                    <div className={this.props.className}>
+                        <div className={rowClassName}>
+                            <div className={rowLabelClassName}>
+                                <label htmlFor="passwordold">Current password</label>
+                            </div>
+                            <div className={rowInputClassName}>
+                                <input id="passwordold" type="password" ref="old_input" />
+                            </div>
                         </div>
-                        <div className="mx_Dialog_buttons">
-                            <button onClick={this.onClickChange}>Change Password</button>
-                            <button onClick={this.props.onFinished}>Cancel</button>
+                        <div className={rowClassName}>
+                            <div className={rowLabelClassName}>
+                                <label htmlFor="password1">New password</label>
+                            </div>
+                            <div className={rowInputClassName}>
+                                <input id="password1" type="password" ref="new_input" />
+                            </div>
+                        </div>
+                        <div className={rowClassName}>
+                            <div className={rowLabelClassName}>
+                                <label htmlFor="password2">Confirm password</label>
+                            </div>
+                            <div className={rowInputClassName}>
+                                <input id="password2" type="password" ref="confirm_input" />
+                            </div>
+                        </div>
+                        <div className={buttonClassName} onClick={this.onClickChange}>
+                            Change Password
                         </div>
                     </div>
                 );
@@ -119,17 +148,6 @@ module.exports = React.createClass({
                         <Loader />
                     </div>
                 );
-            case this.Phases.Success:
-                return (
-                    <div>
-                        <div className="mx_Dialog_content">
-                            Success!
-                        </div>
-                        <div className="mx_Dialog_buttons">
-                            <button onClick={this.props.onFinished}>Ok</button>
-                        </div>
-                    </div>
-                )
         }
     }
 });
diff --git a/src/components/views/voip/CallView.js b/src/components/views/voip/CallView.js
index fbaed1dcd7..d67147dd1e 100644
--- a/src/components/views/voip/CallView.js
+++ b/src/components/views/voip/CallView.js
@@ -35,19 +35,13 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
-        this._trackedRoom = null;
         if (this.props.room) {
-            this._trackedRoom = this.props.room;
-            this.showCall(this._trackedRoom.roomId);
+            this.showCall(this.props.room.roomId);
         }
         else {
+            // XXX: why would we ever not have a this.props.room?
             var call = CallHandler.getAnyActiveCall();
             if (call) {
-                console.log(
-                    "Global CallView is now tracking active call in room %s",
-                    call.roomId
-                );
-                this._trackedRoom = MatrixClientPeg.get().getRoom(call.roomId);
                 this.showCall(call.roomId);
             }
         }
@@ -81,7 +75,7 @@ module.exports = React.createClass({
             // and for the voice stream of screen captures
             call.setRemoteAudioElement(this.getVideoView().getRemoteAudioElement());
         }
-        if (call && call.type === "video" && call.state !== 'ended') {
+        if (call && call.type === "video" && call.call_state !== "ended" && call.call_state !== "ringing") {
             // if this call is a conf call, don't display local video as the
             // conference will have us in it
             this.getVideoView().getLocalVideoElement().style.display = (
diff --git a/src/components/views/voip/IncomingCallBox.js b/src/components/views/voip/IncomingCallBox.js
index 263bbf543c..a9601931bb 100644
--- a/src/components/views/voip/IncomingCallBox.js
+++ b/src/components/views/voip/IncomingCallBox.js
@@ -21,87 +21,29 @@ var CallHandler = require("../../../CallHandler");
 module.exports = React.createClass({
     displayName: 'IncomingCallBox',
 
-    componentDidMount: function() {
-        this.dispatcherRef = dis.register(this.onAction);
-    },
-
-    componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);
-    },
-
-    getInitialState: function() {
-        return {
-            incomingCall: null
-        }
-    },
-
-    onAction: function(payload) {
-        if (payload.action !== 'call_state') {
-            return;
-        }
-        var call = CallHandler.getCall(payload.room_id);
-        if (!call || call.call_state !== 'ringing') {
-            this.setState({
-                incomingCall: null,
-            });
-            this.getRingAudio().pause();
-            return;
-        }
-        if (call.call_state === "ringing") {
-            this.getRingAudio().load();
-            this.getRingAudio().play();
-        }
-        else {
-            this.getRingAudio().pause();
-        }
-
-        this.setState({
-            incomingCall: call
-        });
-    },
-
     onAnswerClick: function() {
         dis.dispatch({
             action: 'answer',
-            room_id: this.state.incomingCall.roomId
+            room_id: this.props.incomingCall.roomId
         });
     },
 
     onRejectClick: function() {
         dis.dispatch({
             action: 'hangup',
-            room_id: this.state.incomingCall.roomId
+            room_id: this.props.incomingCall.roomId
         });
     },
 
-    getRingAudio: function() {
-        return this.refs.ringAudio;
-    },
-
     render: function() {
-        // NB: This block MUST have a "key" so React doesn't clobber the elements
-        // between in-call / not-in-call.
-        var audioBlock = (
-            <audio ref="ringAudio" key="voip_ring_audio" loop>
-                <source src="media/ring.ogg" type="audio/ogg" />
-                <source src="media/ring.mp3" type="audio/mpeg" />
-            </audio>
-        );
 
-        if (!this.state.incomingCall || !this.state.incomingCall.roomId) {
-            return (
-                <div>
-                    {audioBlock}
-                </div>
-            );
-        }
-        var caller = MatrixClientPeg.get().getRoom(this.state.incomingCall.roomId).name;
+        var room = this.props.incomingCall ? MatrixClientPeg.get().getRoom(this.props.incomingCall.roomId) : null;
+        var caller = room ? room.name : "unknown";
         return (
-            <div className="mx_IncomingCallBox">
-                {audioBlock}
+            <div className="mx_IncomingCallBox" id="incomingCallBox">
                 <img className="mx_IncomingCallBox_chevron" src="img/chevron-left.png" width="9" height="16" />
                 <div className="mx_IncomingCallBox_title">
-                    Incoming { this.state.incomingCall ? this.state.incomingCall.type : '' } call from { caller }
+                    Incoming { this.props.incomingCall ? this.props.incomingCall.type : '' } call from { caller }
                 </div>
                 <div className="mx_IncomingCallBox_buttons">
                     <div className="mx_IncomingCallBox_buttons_cell">