diff --git a/package.json b/package.json
index 0b5a18168f..4a55f111bb 100644
--- a/package.json
+++ b/package.json
@@ -38,8 +38,9 @@
   "//depsbuglink": "https://github.com/webpack/webpack/issues/1472",
   "devDependencies": {
     "babel": "^5.8.23",
-    "rimraf": "^2.4.3",
     "json-loader": "^0.5.3",
+    "require-json": "0.0.1",
+    "rimraf": "^2.4.3",
     "source-map-loader": "^0.1.5"
   }
 }
diff --git a/reskindex.js b/reskindex.js
index e028979122..b628ae59e7 100755
--- a/reskindex.js
+++ b/reskindex.js
@@ -8,40 +8,13 @@ var args = require('optimist').argv;
 
 var header = args.h || args.header;
 
-if (args._.length == 0) {
-    console.log("No skin given");
-    process.exit(1);
-}
+var componenetsDir = path.join('src', 'components');
 
-var skin = args._[0];
+var componentIndex = path.join('src', 'component-index.js');
 
-try {
-    fs.accessSync(path.join('src', 'skins', skin), fs.F_OK);
-} catch (e) {
-    console.log("Skin "+skin+" not found: "+e);
-    process.exit(1);
-}
+var packageJson = JSON.parse(fs.readFileSync('./package.json'));
 
-var skinfoFile = path.join('src', 'skins', skin, 'skinfo.json');
-
-try {
-    fs.accessSync(skinfoFile, fs.F_OK);
-} catch (e) {
-    console.log("Skin "+skin+" has no skinfo.json");
-    process.exit(1);
-}
-
-try {
-    fs.accessSync(path.join('src', 'skins', skin, 'views'), fs.F_OK);
-} catch (e) {
-    console.log("Skin "+skin+" has no views directory");
-    process.exit(1);
-}
-
-var skindex = path.join('src', 'skins', skin, 'skindex.js');
-var viewsDir = path.join('src', 'skins', skin, 'views');
-
-var strm = fs.createWriteStream(skindex);
+var strm = fs.createWriteStream(componentIndex);
 
 if (header) {
    strm.write(fs.readFileSync(header));
@@ -55,28 +28,38 @@ strm.write(" * so you'd just be trying to swim upstream like a salmon.\n");
 strm.write(" * You are not a salmon.\n");
 strm.write(" */\n\n");
 
-var mySkinfo = JSON.parse(fs.readFileSync(skinfoFile, "utf8"));
+if (packageJson['matrix-react-parent']) {
+    strm.write("module.exports.components = require('"+packageJson['matrix-react-parent']+"/lib/component-index').components;\n\n");
+} else {
+    strm.write("module.exports.components = {};\n");
+}
 
-strm.write("var skin = {};\n");
-strm.write('\n');
-
-var files = glob.sync('**/*.js', {cwd: viewsDir});
+var files = glob.sync('**/*.js', {cwd: componenetsDir});
 for (var i = 0; i < files.length; ++i) {
     var file = files[i].replace('.js', '');
+
     var module = (file.replace(/\//g, '.'));
 
-    strm.write("skin['"+module+"'] = require('./views/"+file+"');\n");
+    strm.write("module.exports.components['"+module+"'] = require('./components/"+file+"');");
+    strm.write('\n');
     strm.uncork();
 }
 
-strm.write("\n");
+// Temporary Vector transition
+var vectorViewsPath = path.join('src', 'skins', 'vector', 'views');
+if (fs.existsSync(vectorViewsPath)) {
+    strm.write('\n');
+    strm.write('// Old, unported Vector views:\n');
+    var files = glob.sync('**/*.js', {cwd: vectorViewsPath});
+    for (var i = 0; i < files.length; ++i) {
+        var file = files[i].replace('.js', '');
 
-if (mySkinfo.baseSkin) {
-    strm.write("module.exports = require('"+mySkinfo.baseSkin+"');");
-    strm.write("var extend = require('matrix-react-sdk/lib/extend');\n");
-    strm.write("extend(module.exports, skin);\n");
-} else {
-    strm.write("module.exports = skin;");
+        var module = (file.replace(/\//g, '.'));
+
+        strm.write("module.exports.components['"+module+"'] = require('./skins/vector/views/"+file+"');");
+        strm.write('\n');
+        strm.uncork();
+    }
 }
 
 strm.end();
diff --git a/src/ContentMessages.js b/src/ContentMessages.js
index eba3011917..607c677994 100644
--- a/src/ContentMessages.js
+++ b/src/ContentMessages.js
@@ -18,6 +18,7 @@ limitations under the License.
 
 var q = require('q');
 var extend = require('./extend');
+var dis = require('./dispatcher');
 
 function infoForImageFile(imageFile) {
     var deferred = q.defer();
@@ -48,39 +49,94 @@ 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;
+        }).then(function(url) {
+            content.url = url;
+            return matrixClient.sendMessage(roomId, content);
+        }).progress(function(ev) {
+            if (ev) {
+                upload.total = ev.total;
+                upload.loaded = ev.loaded;
+                dis.dispatch({action: 'upload_progress', upload: upload});
+            }
+        }).then(function() {
+            dis.dispatch({action: 'upload_finished', upload: upload});
+        }, function(err) {
+            dis.dispatch({action: 'upload_failed', upload: upload});
+        }).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) {
+                    delete self.inprogress[k];
+                    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(self.inprogress);
+        for (var i = 0; i < self.inprogress.length; ++i) {
+            var k = inprogressKeys[i];
+            if (self.inprogress[k].promise === promise) {
+                self.inprogress[k].canceled = true;
+                break;
+            }
+        }
+        MatrixClientPeg.get().cancelUpload(promise);
+    }
 }
 
-module.exports = {
-    sendContentToRoom: sendContentToRoom
-};
+if (global.mx_ContentMessage === undefined) {
+    global.mx_ContentMessage = new ContentMessages();
+}
+
+module.exports = global.mx_ContentMessage;
diff --git a/src/Skinner.js b/src/Skinner.js
index ae48d85633..934a68ddf1 100644
--- a/src/Skinner.js
+++ b/src/Skinner.js
@@ -32,6 +32,11 @@ class Skinner {
         if (comp) {
             return comp;
         }
+        // XXX
+        var comp = this.components['views.'+name];
+        if (comp) {
+            return comp;
+        }
         throw new Error("No such component: "+name);
     }
 
@@ -42,7 +47,25 @@ class Skinner {
                 "If you want to change the active skin, call resetSkin first"
             );
         }
-        this.components = skinObject;
+        this.components = {};
+        var compKeys = Object.keys(skinObject.components);
+        for (var i = 0; i < compKeys.length; ++i) {
+            var comp = skinObject.components[compKeys[i]];
+            this.addComponent(compKeys[i], comp);
+        }
+    }
+
+    addComponent(name, comp) {
+        var slot = name;
+        if (comp.replaces !== undefined) {
+            if (comp.replaces.indexOf('.') > -1) {
+                slot = comp.replaces;
+            } else {
+                slot = name.substr(0, name.lastIndexOf('.') + 1) + comp.replaces.split('.').pop();
+            }
+        }
+        console.log(slot+" = "+name);
+        this.components[slot] = comp;
     }
 
     reset() {