diff --git a/data-src/index.html b/data-src/index.html
index 398f0f0..4772b99 100644
--- a/data-src/index.html
+++ b/data-src/index.html
@@ -179,10 +179,6 @@
                                 </select>
                                 <label for="fldPinEntry">Security Type</label>
                             </div>
-                            <div id="divPermissions" class="field-group" style="display:none;vertical-align:middle;float:right;width:auto;">
-                                <input id="cbSecureConfigOnly" data-bind="security.permissions.configOnly" type="checkbox" style="display:inline-block;" />
-                                <label for="cbSecureConfigOnly" style="display:inline-block;cursor:pointer;">Secure Config Only</label>
-                            </div>
                         </div>
                         <div id="divPinSecurity" style="display:none;">
                             <div class="field-group" style="text-align:center;">
diff --git a/data-src/index.js b/data-src/index.js
index 444b929..7bbb3c4 100644
--- a/data-src/index.js
+++ b/data-src/index.js
@@ -245,7 +245,7 @@ var httpStatusText = {
     '504': 'Gateway Timeout',
     '505': 'HTTP Version Not Supported'
 };
-function getJSON(url, cb, attempt) {
+function getJSON(url, cb) {
     let xhr = new XMLHttpRequest();
     console.log({ get: url });
     xhr.open('GET', baseUrl.length > 0 ? `${baseUrl}${url}` : url, true);
@@ -253,10 +253,6 @@ function getJSON(url, cb, attempt) {
     xhr.responseType = 'json';
     xhr.onload = () => {
         let status = xhr.status;
-        if (isBusy(status, xhr.response) && (attempt || 0) < 10) {
-            setTimeout(() => getJSON(url, cb, (attempt || 0) + 1), 250);
-            return;
-        }
         if (status !== 200) {
             let err = xhr.response || {};
             err.htmlError = status;
@@ -278,17 +274,12 @@ function getJSON(url, cb, attempt) {
     };
     xhr.send();
 }
-function getJSONSync(url, cb, attempt) {
+function getJSONSync(url, cb) {
     let overlay = ui.waitMessage(document.getElementById('divContainer'));
     let xhr = new XMLHttpRequest();
     xhr.responseType = 'json';
     xhr.onload = () => {
         let status = xhr.status;
-        if (isBusy(status, xhr.response) && (attempt || 0) < 10) {
-            if (typeof overlay !== 'undefined') overlay.remove();
-            setTimeout(() => getJSONSync(url, cb, (attempt || 0) + 1), 250);
-            return;
-        }
         if (status !== 200) {
             let err = xhr.response || {};
             err.htmlError = status;
@@ -320,109 +311,6 @@ function getJSONSync(url, cb, attempt) {
     xhr.setRequestHeader('apikey', security.apiKey);
     xhr.send();
 }
-function getText(url, cb) {
-    let xhr = new XMLHttpRequest();
-    console.log({ get: url });
-    xhr.open('GET', baseUrl.length > 0 ? `${baseUrl}${url}` : url, true);
-    xhr.setRequestHeader('apikey', security.apiKey);
-    xhr.responseType = 'text';
-    xhr.onload = () => {
-        let status = xhr.status;
-        if (status !== 200) {
-            let err = xhr.response || {};
-            err.htmlError = status;
-            err.service = `GET ${url}`;
-            if (typeof err.desc === 'undefined') err.desc = xhr.statusText || httpStatusText[xhr.status || 500];
-            cb(err, null);
-        }
-        else
-            cb(null, xhr.response);
-    };
-    xhr.onerror = (evt) => {
-        let err = {
-            htmlError: xhr.status || 500,
-            service: `GET ${url}`
-        };
-        if (typeof err.desc === 'undefined') err.desc = xhr.statusText || httpStatusText[xhr.status || 500];
-        cb(err, null);
-    };
-    xhr.send();
-}
-function postJSONSync(url, data, cb) {
-    let overlay = ui.waitMessage(document.getElementById('divContainer'));
-    try {
-        let xhr = new XMLHttpRequest();
-        console.log({ post: url, data: data });
-        let fd = new FormData();
-        for (let name in data) {
-            fd.append(name, data[name]);
-        }
-        xhr.open('POST', baseUrl.length > 0 ? `${baseUrl}${url}` : url, true);
-        xhr.responseType = 'json';
-        xhr.setRequestHeader('Accept', 'application/json');
-        xhr.setRequestHeader('apikey', security.apiKey);
-        xhr.onload = () => {
-            let status = xhr.status;
-            console.log(xhr);
-            if (status !== 200) {
-                let err = xhr.response || {};
-                err.htmlError = status;
-                err.service = `POST ${url}`;
-                err.data = data;
-                if (typeof err.desc === 'undefined') err.desc = xhr.statusText || httpStatusText[xhr.status || 500];
-                cb(err, null);
-            }
-            else {
-                cb(null, xhr.response);
-            }
-            overlay.remove();
-        };
-        xhr.onerror = (evt) => {
-            console.log(xhr);
-            let err = {
-                htmlError: xhr.status || 500,
-                service: `POST ${url}`
-            };
-            if (typeof err.desc === 'undefined') err.desc = xhr.statusText || httpStatusText[xhr.status || 500];
-            cb(err, null);
-            overlay.remove();
-        };
-        xhr.send(fd);
-    } catch (err) { ui.serviceError(document.getElementById('divContainer'), err); }
-}
-function putJSON(url, data, cb) {
-    let xhr = new XMLHttpRequest();
-    console.log({ put: url, data: data });
-    xhr.open('PUT', baseUrl.length > 0 ? `${baseUrl}${url}` : url, true);
-    xhr.responseType = 'json';
-    xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
-    xhr.setRequestHeader('Accept', 'application/json');
-    xhr.setRequestHeader('apikey', security.apiKey);
-    xhr.onload = () => {
-        let status = xhr.status;
-        if (status !== 200) {
-            let err = xhr.response || {};
-            err.htmlError = status;
-            err.service = `PUT ${url}`;
-            err.data = data;
-            if (typeof err.desc === 'undefined') err.desc = xhr.statusText || httpStatusText[xhr.status || 500];
-            cb(err, null);
-        }
-        else {
-            cb(null, xhr.response);
-        }
-    };
-    xhr.onerror = (evt) => {
-        console.log(xhr);
-        let err = {
-            htmlError: xhr.status || 500,
-            service: `PUT ${url}`
-        };
-        if (typeof err.desc === 'undefined') err.desc = xhr.statusText || httpStatusText[xhr.status || 500];
-        cb(err, null);
-    };
-    xhr.send(JSON.stringify(data));
-}
 function putJSONSync(url, data, cb) {
     let overlay = ui.waitMessage(document.getElementById('divContainer'));
     try {
@@ -462,264 +350,195 @@ function putJSONSync(url, data, cb) {
         xhr.send(JSON.stringify(data));
     } catch (err) { ui.serviceError(document.getElementById('divContainer'), err); }
 }
-// Edits of rooms, shades, groups and repeaters run on the device's main loop
-// after the reply, so the reply only says the edit was accepted.  How it went
-// comes over the socket as requestResult with the same requestId.  On success
-// readUrl(id) is read back, so cb gets what the edit route itself used to
-// return; without readUrl cb gets the result.
-var pendingEdits = {};
-var earlyResults = {};
-function editJSON(url, data, readUrl, cb) {
-    let overlay = ui.waitMessage(document.getElementById('divContainer'));
-    let attempts = 0;
-    let finish = (result) => {
-        overlay.remove();
-        if (!result.ok) {
-            let err = { htmlError: 500, service: `PUT ${url}`, desc: result.desc, data: data };
-            if (result.code) err.code = result.code;
-            cb(err, null);
-        }
-        else if (typeof readUrl === 'function') getJSONSync(readUrl(result.id), cb);
-        else cb(null, result);
-    };
-    let send = () => {
-        putJSON(url, data, (err, reply) => {
-            // Another edit is still being applied.
-            if (err && err.htmlError === 503 && typeof err.desc === 'string' && err.desc.startsWith('Busy') && ++attempts < 10) {
-                setTimeout(send, 300);
-                return;
-            }
-            if (err) {
-                overlay.remove();
-                cb(err, null);
-                return;
-            }
-            let id = reply.requestId;
-            if (typeof earlyResults[id] !== 'undefined') {
-                let result = earlyResults[id];
-                delete earlyResults[id];
-                finish(result);
-                return;
-            }
-            let timer = setTimeout(() => {
-                delete pendingEdits[id];
-                overlay.remove();
-                let prompt = ui.promptMessage('The device did not confirm the change.', () => { location.reload(); });
-                prompt.querySelector('.sub-message').innerHTML = '<p>It may or may not have been made.  Press YES to reload the page and see.</p>';
-            }, 5000);
-            pendingEdits[id] = (result) => {
-                clearTimeout(timer);
-                finish(result);
-            };
-        });
-    };
-    send();
-}
-function procRequestResult(result) {
-    let fn = pendingEdits[result.requestId];
-    if (typeof fn === 'function') {
-        delete pendingEdits[result.requestId];
-        fn(result);
-    }
-    // The socket can beat the reply that carries the id.  Results of other
-    // clients' edits land here too, so only the latest few are kept.
-    else {
-        earlyResults[result.requestId] = result;
-        let ids = Object.keys(earlyResults);
-        if (ids.length > 10) delete earlyResults[ids[0]];
-    }
-}
-function editsPending() { return Object.keys(pendingEdits).length > 0; }
-// Reads are served from a copy of the shade model the device takes for each,
-// and it takes at most two at once: a third is told to try again.
-function isBusy(status, response) {
-    return status === 503 && response && typeof response.desc === 'string' && response.desc.startsWith('Busy');
-}
-var socket;
-var tConnect = null;
-var sockIsOpen = false;
-var connecting = false;
-var connects = 0;
+// The device over socket protocol 2 (docs/PROTOCOL.md; the client is in
+// data-src/js).  Everything but the login and the file transfers goes over the
+// one socket: a page load opens no other connection, which the device's heap
+// can't spare (docs/adr/0005-one-websocket-protocol.md).
+var proto = null;
+var protoSynced = false;
+var everSynced = false;
 var connectFailed = 0;
-async function initSockets() {
-    if (connecting) return;
-    console.log('Connecting to socket...');
-    connecting = true;
-    if (tConnect) clearTimeout(tConnect);
-    tConnect = null;
-    let wms = document.getElementsByClassName('socket-wait');
-    for (let i = 0; i < wms.length; i++) {
-        wms[i].remove();
-    }
-    ui.waitMessage(document.getElementById('divContainer')).classList.add('socket-wait');
-    let host = window.location.protocol === 'file:' ? hst : window.location.hostname;
-    try {
-        socket = new WebSocket(`ws://${host}:8080/`);
-        socket.onmessage = (evt) => {
-            if (evt.data.startsWith('42')) {
-                let ndx = evt.data.indexOf(',');
-                let eventName = evt.data.substring(3, ndx);
-                let data = evt.data.substring(ndx + 1, evt.data.length - 1);
-                try {
-                    var reISO = /^(\d{4}|\+010000)-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*))(?:Z|(\+|-)([\d|:]*))?$/;
-                    var reMsAjax = /^\/Date\((d|-|.*)\)[\/|\\]$/;
-                    var msg = JSON.parse(data, (key, value) => {
-                        if (typeof value === 'string') {
-                            var a = reISO.exec(value);
-                            if (a) return new Date(value);
-                            a = reMsAjax.exec(value);
-                            if (a) {
-                                var b = a[1].split(/[-+,.]/);
-                                return new Date(b[0] ? +b[0] : 0 - +b[1]);
-                            }
-                        }
-                        return value;
-                    });
-                    switch (eventName) {
-                        case 'memStatus':
-                            firmware.procMemoryStatus(msg);
-                            break;
-                        case 'fwStatus':
-                            firmware.procFwStatus(msg);
-                            break;
-                        case 'remoteFrame':
-                            somfy.procRemoteFrame(msg);
-                            break;
-                        case 'groupState':
-                            somfy.procGroupState(msg);
-                            break;
-                        case 'shadeState':
-                            somfy.procShadeState(msg);
-                            break;
-                        case 'shadeCommand':
-                            console.log(msg);
-                            break;
-                        case 'requestResult':
-                            procRequestResult(msg);
-                            break;
-                        case 'roomRemoved':
-                            somfy.procRoomRemoved(msg);
-                            break;
-                        case 'roomAdded':
-                            somfy.procRoomAdded(msg);
-                            break;
-                        // Another client changed the lists.  This one's own edits
-                        // refresh them when their result comes in.
-                        case 'shadeRemoved':
-                        case 'shadeAdded':
-                            if (!editsPending()) somfy.updateShadeList();
-                            break;
-                        case 'groupRemoved':
-                        case 'groupAdded':
-                            if (!editsPending()) somfy.updateGroupList();
-                            break;
-                        case 'ethernet':
-                            wifi.procEthernet(msg);
-                            break;
-                        case 'wifiStrength':
-                            wifi.procWifiStrength(msg);
-                            break;
-                        case 'packetPulses':
-                            console.log(msg);
-                            break;
-                        case 'frequencyScan':
-                            somfy.procFrequencyScan(msg);
-                            break;
-
-                    }
-                } catch (err) {
-                    console.log({ eventName: eventName, data: data, err: err });
-                }
-            }
-        };
-        socket.onopen = (evt) => {
-            if (tConnect) clearTimeout(tConnect);
-            tConnect = null;
-            console.log({ msg: 'open', evt: evt });
-            sockIsOpen = true;
-            connecting = false;
-            connects++;
-            connectFailed = 0;
-            let wms = document.getElementsByClassName('socket-wait');
-            for (let i = 0; i < wms.length; i++) {
-                wms[i].remove();
-            }
-            let errs = document.getElementsByClassName('socket-error');
-            for (let i = 0; i < errs.length; i++)
-                errs[i].remove();
-            if (general.reloadApp) {
-                general.reload();
-            }
-            else {
-                (async () => {
-                    ui.clearErrors();
-                    await general.loadGeneral();
-                    await wifi.loadNetwork();
-                    await somfy.loadSomfy();
-                    await mqtt.loadMQTT();
-                    if (ui.isConfigOpen()) socket.send('join:0');
-
-                    //await general.init();
-                    //await somfy.init();
-                    //await mqtt.init();
-                    //await wifi.init();
-                })();
-            }
-        };
-        socket.onclose = (evt) => {
-            wifi.procWifiStrength({ ssid: '', channel: -1, strength: -100 });
-            wifi.procEthernet({ connected: false, speed: 0, fullduplex: false });
-            if (document.getElementsByClassName('socket-wait').length === 0)
-                ui.waitMessage(document.getElementById('divContainer')).classList.add('socket-wait');
-            if (evt.wasClean) {
-                console.log({ msg: 'close-clean', evt: evt });
-                connectFailed = 0;
-                tConnect = setTimeout(async () => { await reopenSocket(); }, 7000);
-                console.log('Reconnecting socket in 7 seconds');
-            }
-            else {
-                console.log({ msg: 'close-died', reason: evt.reason, evt: evt, sock: socket });
-                if (connects > 0) {
-                    console.log('Reconnecting socket in 3 seconds');
-                    tConnect = setTimeout(async () => { await reopenSocket(); }, 3000);
-                }
-                else {
-                    if (connecting) {
-                        connectFailed++;
-                        let timeout = Math.min(connectFailed * 500, 10000);
-                        console.log(`Initial socket did not connect try again (server was busy and timed out ${connectFailed} times)`);
-                        tConnect = setTimeout(async () => { await reopenSocket(); }, timeout);
-                        if (connectFailed === 5) {
-                            ui.socketError('Too many clients connected.  A maximum of 5 clients may be connected at any one time.  Close some connections to the ESP Somfy RTS device to proceed.');
-                        }
-                        let spanAttempts = document.getElementById('spanSocketAttempts');
-                        if (spanAttempts) spanAttempts.innerHTML = connectFailed.fmt("#,##0");
-
-                    }
-                    else {
-                        console.log('Connecting socket in .5 seconds');
-                        tConnect = setTimeout(async () => { await reopenSocket(); }, 500);
-                    }
-
-                }
-
-            }
-            connecting = false;
-        };
-        socket.onerror = (evt) => {
-            console.log({ msg: 'socket error', evt: evt, sock: socket });
-        };
-    } catch (err) {
-        console.log({
-            msg: 'Websocket connection error', err: err
+// An op as a promise of its reply, refused with what ui.serviceError shows.
+// retryBusy sends it again while the device says busy: it saves settings and
+// applies edits one at a time, whoever sent them.  A busy command is the
+// radio's queue or a moving shade, which the user decides about.
+function runOp(name, fields, retryBusy) {
+    return new Promise((resolve, reject) => {
+        if (!proto) {
+            reject(ProtoViews.opError(name, { code: 'notConnected', desc: 'Not connected to the device' }));
+            return;
+        }
+        let attempts = 0;
+        let send = () => proto.op(name, fields).then(resolve, (err) => {
+            if (retryBusy && err.code === 'busy' && ++attempts < 10) setTimeout(send, 300);
+            else reject(ProtoViews.opError(name, err));
         });
-        tConnect = setTimeout(async () => { await reopenSocket(); }, 5000);
-    }
+        send();
+    });
 }
-async function reopenSocket() {
-    if (tConnect) clearTimeout(tConnect);
-    tConnect = null;
-    await initSockets();
+// cb(err, reply) as the HTTP helpers did.  With wait the spinner shows until
+// the reply.
+function sendOp(name, fields, cb, wait) {
+    let overlay = wait ? ui.waitMessage(document.getElementById('divContainer')) : null;
+    let done = (err, d) => {
+        if (overlay) overlay.remove();
+        if (typeof cb === 'function') cb(err, d);
+    };
+    runOp(name, fields, name === 'saveSettings').then((d) => done(null, d), (err) => done(err, null));
+}
+// Where an edit's room, shade or group is once its event is in: the event to
+// wait for, and the item's id from the reply (an add's new id) or the fields.
+function editTarget(kind, idOf) {
+    let key = `${kind}Id`;
+    let map = { room: 'rooms', shade: 'shades', group: 'groups' }[kind];
+    return {
+        event: kind, idOf: idOf, match: (d, id) => d[key] === id,
+        read: (id) => kind === 'group' ? ProtoViews.group(proto.model, proto.model.groups.get(id)) : proto.model[map].get(id)
+    };
+}
+// An edit, with the spinner up until it is done.  Its events follow the
+// reply: with a target, cb gets the item once its event is in; without, the
+// lists redraw from the events anyway.
+function sendEdit(name, fields, target, cb) {
+    let overlay = ui.waitMessage(document.getElementById('divContainer'));
+    let finish = (err, item) => {
+        overlay.remove();
+        if (typeof cb === 'function') cb(err, item);
+    };
+    runOp(name, fields, true).then((reply) => {
+        if (!target) {
+            finish(null, reply);
+            return;
+        }
+        let id = target.idOf(reply);
+        // Without the event the reply is all there is, an add's new id in it.
+        proto.waitFor(target.event, (d) => target.match(d, id), 3000).then(() => finish(null, target.read(id) || reply));
+    }, (err) => finish(err, null));
+}
+// A command's repeat count, when the caller gave one.
+function repeatOf(repeat) { return typeof repeat === 'number' ? repeat : undefined; }
+function gone(what) { ui.errorMessage(`The ${what} is no longer there.`); }
+// The lists redraw from the model after events, a burst of them at once.
+// While the socket is down they wait for the next sync.
+var renderPending = {};
+var renderTimer = null;
+function render(part) {
+    renderPending[part] = true;
+    if (!protoSynced || renderTimer) return;
+    renderTimer = setTimeout(() => {
+        renderTimer = null;
+        let p = renderPending;
+        renderPending = {};
+        // Shades and groups show their room's name.
+        if (p.rooms) somfy.setRoomsList(proto.model.roomList());
+        if (p.rooms || p.shades) somfy.setShadesList(proto.model.shadeList());
+        if (p.rooms || p.groups) somfy.setGroupsList(proto.model.groupList().map((g) => ProtoViews.group(proto.model, g)));
+        if (p.repeaters) somfy.setRepeaterList(proto.model.repeaters);
+    }, 20);
+}
+function renderAll() {
+    renderPending = { rooms: true, shades: true, groups: true, repeaters: true };
+    render('rooms');
+}
+function showSocketWait() {
+    if (document.getElementsByClassName('socket-wait').length === 0)
+        ui.waitMessage(document.getElementById('divContainer')).classList.add('socket-wait');
+}
+function clearSocketWait() {
+    for (let el of [...document.getElementsByClassName('socket-wait')]) el.remove();
+    for (let el of [...document.getElementsByClassName('socket-error')]) el.remove();
+}
+function showStatus(status) {
+    firmware.procMemoryStatus({ free: status.freeHeap, max: status.maxHeap, min: status.minHeap, uptime: status.uptime });
+    if (proto.model.header.connType === 'Ethernet') wifi.procEthernet({ connected: status.connected, speed: status.speed, fullduplex: status.fullDuplex });
+    else wifi.procWifiStrength({ ssid: status.ssid, channel: status.channel, strength: status.strength });
+}
+// The feeds the config panel shows: received frames and the frequency scan.
+// The client keeps them across reconnects, so they are set even while the
+// socket is down.
+function subscribeConfigFeeds(on) {
+    if (!proto) return;
+    for (let feed of ['frames', 'frequencyScan']) (on ? proto.subscribe(feed) : proto.unsubscribe(feed)).catch(() => {});
+}
+function showVersionMismatch(v) {
+    if (document.getElementById('divVersionMismatch')) return;
+    let div = document.createElement('div');
+    div.id = 'divVersionMismatch';
+    div.className = 'version-banner';
+    div.innerHTML = `This page speaks protocol ${v.client} but the device speaks ${v.device}.  Update the application files, or reload the page.`;
+    document.body.prepend(div);
+}
+// Opens the socket, or opens it again with the token a login gave.
+function startSocket() {
+    if (proto) {
+        proto.setToken(security.apiKey);
+        return;
+    }
+    let host = window.location.protocol === 'file:' ? hst : window.location.host;
+    proto = new ProtoClient({ host: host, token: security.apiKey });
+    // Each sync, the first and after a reconnect: what changed meanwhile shows.
+    proto.on('synced', () => {
+        let first = !everSynced;
+        everSynced = true;
+        protoSynced = true;
+        connectFailed = 0;
+        clearSocketWait();
+        if (general.reloadApp) {
+            general.reload();
+            return;
+        }
+        if (first) ui.clearErrors();
+        general.loadGeneral();
+        wifi.loadNetwork();
+        somfy.loadSomfy();
+        mqtt.loadMQTT();
+        showStatus(proto.model.status);
+        if (first && ui.isConfigOpen()) subscribeConfigFeeds(true);
+    });
+    let lost = (refused) => {
+        protoSynced = false;
+        wifi.procWifiStrength({ ssid: '', channel: -1, strength: -100 });
+        wifi.procEthernet({ connected: false, speed: 0, fullduplex: false });
+        showSocketWait();
+        if (++connectFailed === 5)
+            ui.socketError('The device does not answer, or 5 clients are connected to it already.  Close some connections to the ESP Somfy RTS device to proceed.');
+        let spanAttempts = document.getElementById('spanSocketAttempts');
+        if (spanAttempts) spanAttempts.innerHTML = connectFailed.fmt('#,##0');
+        if (refused) security.socketRefused();
+    };
+    proto.on('closed', () => lost(false));
+    proto.on('refused', () => lost(true));
+    proto.on('versionMismatch', showVersionMismatch);
+    proto.on('shadeState', (d) => {
+        let shade = proto.model.shades.get(d.shadeId);
+        if (shade) somfy.procShadeState(shade);
+    });
+    proto.on('groupState', (d) => {
+        let group = proto.model.groups.get(d.groupId);
+        if (group) somfy.procGroupState(group);
+    });
+    for (let e of ['room', 'roomRemoved', 'roomOrder']) proto.on(e, () => render('rooms'));
+    for (let e of ['shade', 'shadeRemoved', 'shadeOrder']) proto.on(e, () => render('shades'));
+    for (let e of ['group', 'groupRemoved', 'groupOrder']) proto.on(e, () => render('groups'));
+    proto.on('repeaters', () => render('repeaters'));
+    proto.on('memory', () => showStatus(proto.model.status));
+    proto.on('wifi', () => showStatus(proto.model.status));
+    proto.on('ethernet', () => showStatus(proto.model.status));
+    proto.on('frame', (d) => somfy.procRemoteFrame(ProtoViews.frame(proto.schema, d)));
+    proto.on('frequencyScan', (d) => somfy.procFrequencyScan(ProtoViews.scan(proto.schema, d)));
+    proto.on('shadeCommanded', (d) => console.log(d));
+    // Another client saved settings: show them as they are now.
+    proto.on('settingsChanged', (d) => {
+        switch (d.section) {
+            case 'general': general.loadGeneral(); break;
+            case 'network': wifi.loadNetwork(); break;
+            case 'mqtt': mqtt.loadMQTT(); break;
+            case 'radio': somfy.loadRadio(); break;
+        }
+    });
+    proto.on('error', (err) => console.log(err));
+    showSocketWait();
+    proto.connect();
 }
 async function init() {
     await security.init();
@@ -1213,17 +1032,8 @@ class UIBinder {
         divHome.style.display = 'none';
         divCfg.style.display = '';
         document.getElementById('icoConfig').className = 'icss-home';
-        if (sockIsOpen) socket.send('join:0');
-        let overlay = ui.waitMessage(document.getElementById('divSecurityOptions'));
-        overlay.style.borderRadius = '5px';
-        getJSON('/getSecurity', (err, security) => {
-            overlay.remove();
-            if (err) ui.serviceError(err);
-            else {
-                console.log(security);
-                general.setSecurityConfig(security);
-            }
-        });
+        subscribeConfigFeeds(true);
+        general.loadSecurity();
     }
     setHomePanel() {
         if (!this.isConfigOpen()) return;
@@ -1232,8 +1042,8 @@ class UIBinder {
         divHome.style.display = '';
         divCfg.style.display = 'none';
         document.getElementById('icoConfig').className = 'icss-gear';
-        if (sockIsOpen) socket.send('leave:0');
-        general.setSecurityConfig({ type: 0, username: '', permissions: 0 });
+        subscribeConfigFeeds(false);
+        general.setSecurityConfig({ securityType: 0, username: '' });
     }
     toggleConfig() {
         if (this.isConfigOpen())
@@ -1257,21 +1067,62 @@ class Security {
     type = 0;
     authenticated = false;
     apiKey = '';
-    permissions = 0;
+    checkingRefusal = false;
+    // The token lives as long as the tab: a reload keeps it, closing the tab
+    // drops it (docs/SECURITY_PLAN.md).
+    static TOKEN_KEY = 'espsomfyToken';
+    loadToken() {
+        try { return sessionStorage.getItem(Security.TOKEN_KEY) || ''; } catch (e) { return ''; }
+    }
+    setToken(token) {
+        this.apiKey = token || '';
+        try {
+            if (this.apiKey) sessionStorage.setItem(Security.TOKEN_KEY, this.apiKey);
+            else sessionStorage.removeItem(Security.TOKEN_KEY);
+        } catch (e) { /* No storage: a reload asks for the login again. */ }
+    }
+    showApp() {
+        document.getElementById('divUnauthenticated').style.display = 'none';
+        document.getElementById('divAuthenticated').style.display = '';
+        document.getElementById('divContainer').setAttribute('data-auth', true);
+    }
     async init() {
-        let fld = document.getElementById('divUnauthenticated').querySelector('.pin-digit[data-bind="security.pin.d0"]');
         document.getElementById('divUnauthenticated').querySelector('.pin-digit[data-bind="login.pin.d3"]').addEventListener('digitentered', (evt) => {
             security.login();
         });
         await this.loadContext();
-        if (this.type === 0 || (this.permissions & 0x01) === 0x01) { // No login required or only the config is protected.
-            if (typeof socket === 'undefined' || !socket) (async () => { await initSockets(); })();
-            //ui.setMode(mode);
-            document.getElementById('divUnauthenticated').style.display = 'none';
-            document.getElementById('divAuthenticated').style.display = '';
-            document.getElementById('divContainer').setAttribute('data-auth', true);
+        this.apiKey = this.loadToken();
+        // Under Secured the socket needs a token; one kept from earlier in this
+        // tab is tried, and a refusal brings the login back.
+        if (this.type === 0 || this.apiKey) {
+            this.authenticated = this.type !== 0;
+            this.showApp();
+            startSocket();
         }
     }
+    // The socket closed before it opened.  A browser can't tell a refused
+    // token from a device that is down, so ask the device: if it answers and
+    // wants a login, stop retrying and show the login.
+    socketRefused() {
+        if (this.checkingRefusal) return;
+        this.checkingRefusal = true;
+        getJSON('/loginContext', (err, ctx) => {
+            this.checkingRefusal = false;
+            if (err || ctx.type === 0) return;
+            this.type = ctx.type;
+            this.tokenRefused();
+        });
+    }
+    // The device refused the token: open the login, with no retry.  Logging
+    // in connects the socket again with the new one.
+    tokenRefused() {
+        if (proto) proto.close();
+        clearSocketWait();
+        this.setToken('');
+        this.authenticated = false;
+        this.authUser();
+        document.getElementById('btnCancelLogin').style.display = 'none';
+    }
     async loadContext() {
         let pnl = document.getElementById('divUnauthenticated');
         pnl.querySelector('#loginButtons').style.display = 'none';
@@ -1286,7 +1137,6 @@ class Security {
                     console.log(ctx);
                     document.getElementById('divContainer').setAttribute('data-securitytype', ctx.type);
                     this.type = ctx.type;
-                    this.permissions = ctx.permissions;
                     switch (ctx.type) {
                         case 1:
                             pnl.querySelector('#divLoginPin').style.display = '';
@@ -1351,14 +1201,10 @@ class Security {
                             navigator.credentials.store(cred);
                         } catch (e) { /* ignore; browsers without support fall back to the form-submit heuristic */ }
                     }
-                    if (typeof socket === 'undefined' || !socket) (async () => { await initSockets(); })();
-                    //ui.setMode(mode);
-
-                    document.getElementById('divUnauthenticated').style.display = 'none';
-                    document.getElementById('divAuthenticated').style.display = '';
-                    document.getElementById('divContainer').setAttribute('data-auth', true);
-                    this.apiKey = log.apiKey;
+                    this.setToken(log.apiKey);
                     this.authenticated = true;
+                    this.showApp();
+                    startSocket();
                     let evt2 = new CustomEvent('afterlogin', { detail: { authenticated: true } });
                     document.getElementById('divContainer').dispatchEvent(evt2);
                 }
@@ -1397,7 +1243,6 @@ class General {
         if (this.initialized) return;
         this.setAppVersion();
         this.setTimeZones();
-        if (sockIsOpen && ui.isConfigOpen()) socket.send('join:0');
         ui.toElement(document.getElementById('divSystemSettings'), { general: { hostname: 'ESPSomfyRTS', username: '', password: '', posixZone: 'UTC0', ntpServer: 'pool.ntp.org' } });
         this.initialized = true;
     }
@@ -1528,44 +1373,25 @@ class General {
     ];
     loadGeneral() {
         let pnl = document.getElementById('divSystemOptions');
-        getJSONSync('/modulesettings', (err, settings) => {
-            if (err) {
-                console.log(err);
-            }
-            else {
-                console.log(settings);
-                document.getElementById('spanFwVersion').innerText = settings.fwVersion;
-                document.getElementById('spanHwVersion').innerText = settings.chipModel.length > 0 ? '-' + settings.chipModel : '';
-                document.getElementById('divContainer').setAttribute('data-chipmodel', settings.chipModel);
-                somfy.initPins();
-                general.setAppVersion();
-                ui.toElement(pnl, { general: settings });
-            }
+        // The firmware and the chip come with the sync.
+        let header = proto.model.header;
+        document.getElementById('spanFwVersion').innerText = header.fw;
+        document.getElementById('spanHwVersion').innerText = header.chipModel.length > 0 ? '-' + header.chipModel : '';
+        document.getElementById('divContainer').setAttribute('data-chipmodel', header.chipModel);
+        somfy.initPins();
+        general.setAppVersion();
+        sendOp('getSettings', { section: 'general' }, (err, settings) => {
+            if (err) console.log(err);
+            else ui.toElement(pnl, { general: ProtoViews.settings(proto.schema, 'general', settings) });
         });
     }
-    loadLogin() {
-        getJSONSync('/loginContext', (err, ctx) => {
+    loadSecurity() {
+        let overlay = ui.waitMessage(document.getElementById('divSecurityOptions'));
+        overlay.style.borderRadius = '5px';
+        sendOp('getSettings', { section: 'security' }, (err, security) => {
+            overlay.remove();
             if (err) ui.serviceError(err);
-            else {
-                console.log(ctx);
-                let pnl = document.getElementById('divContainer');
-                pnl.setAttribute('data-securitytype', ctx.type);
-                let fld;
-                switch (ctx.type) {
-                    case 1:
-                        document.getElementById('divPinSecurity').style.display = '';
-                        fld = document.getElementById('divPinSecurity').querySelector('.pin-digit[data-bind="security.pin.d0"]');
-                        document.getElementById('divPinSecurity').querySelector('.pin-digit[data-bind="security.pin.d3"]').addEventListener('digitentered', (evt) => {
-                            general.login();
-                        });
-                        break;
-                    case 2:
-                        document.getElementById('divPasswordSecurity').style.display = '';
-                        fld = document.getElementById('fldUsername');
-                        break;
-                }
-                if (fld) fld.focus();
-            }
+            else general.setSecurityConfig(ProtoViews.settings(proto.schema, 'security', security));
         });
     }
     async setAppVersion() {
@@ -1598,8 +1424,8 @@ class General {
             ui.errorMessage('Invalid Host Name').querySelector('.sub-message').innerHTML = 'The host name must only include numbers, letters, or dash.';
             valid = false;
         }
-        if (valid && obj.hostname.length > 32) {
-            ui.errorMessage('Invalid Host Name').querySelector('.sub-message').innerHTML = 'The maximum Host Name length is 32 characters.';
+        if (valid && obj.hostname.length > 31) {
+            ui.errorMessage('Invalid Host Name').querySelector('.sub-message').innerHTML = 'The maximum Host Name length is 31 characters.';
             valid = false;
         }
         if (valid && typeof obj.ntpServer === 'string' && obj.ntpServer.length > 64) {
@@ -1607,20 +1433,21 @@ class General {
             valid = false;
         }
         if (valid) {
-            putJSONSync('/setgeneral', obj, (err, response) => {
+            sendOp('saveSettings', { section: 'general', hostname: obj.hostname, ssdpBroadcast: obj.ssdpBroadcast, ntpServer: obj.ntpServer,
+                posixZone: obj.posixZone }, (err, response) => {
                 if (err) ui.serviceError(err);
                 console.log(response);
-            });
+            }, true);
         }
     }
+    // security: the security section's settings.
     setSecurityConfig(security) {
         // The device never returns the stored password or PIN, only whether one is set.
-        this.savedSecurity = { type: security.type, username: security.username, hasPassword: makeBool(security.hasPassword), hasPin: makeBool(security.hasPin) };
+        this.savedSecurity = { type: security.securityType, username: security.username, hasPassword: makeBool(security.hasPassword), hasPin: makeBool(security.hasPin) };
         // We need to transform the security object so that it can be set to the configuration.
         let obj = {
             security: {
-                type: security.type, username: security.username, password: '', repeatpassword: '',
-                permissions: { configOnly: makeBool(security.permissions & 0x01) },
+                type: security.securityType, username: security.username, password: '', repeatpassword: '',
                 pin: { d0: '', d1: '', d2: '', d3: '' }
             }
         };
@@ -1634,10 +1461,9 @@ class General {
     }
     rebootDevice() {
         ui.promptMessage(document.getElementById('divContainer'), 'Are you sure you want to reboot the device?', () => {
-            if(typeof socket !== 'undefined') socket.close(3000, 'reboot');
-            putJSONSync('/reboot', {}, (err, response) => {
+            sendOp('reboot', {}, (err, response) => {
                 document.getElementById('btnSaveGeneral').classList.remove('disabled');
-                console.log(response);
+                if (err) ui.serviceError(err);
             });
             ui.clearErrors();
         });
@@ -1647,17 +1473,14 @@ class General {
         let sec = ui.fromElement(pnl).security;
         switch (sec.type) {
             case 0:
-                pnl.querySelector('#divPermissions').style.display = 'none';
                 pnl.querySelector('#divPinSecurity').style.display = 'none';
                 pnl.querySelector('#divPasswordSecurity').style.display = 'none';
                 break;
             case 1:
-                pnl.querySelector('#divPermissions').style.display = '';
                 pnl.querySelector('#divPinSecurity').style.display = '';
                 pnl.querySelector('#divPasswordSecurity').style.display = 'none';
                 break;
             case 2:
-                pnl.querySelector('#divPermissions').style.display = '';
                 pnl.querySelector('#divPinSecurity').style.display = 'none';
                 pnl.querySelector('#divPasswordSecurity').style.display = '';
                 break;
@@ -1665,25 +1488,24 @@ class General {
         }
     }
     saveSecurity() {
-        let security = ui.fromElement(document.getElementById('divSecurityOptions')).security;
-        console.log(security);
-        let sec = { type: security.type, username: security.username, password: security.password, pin: '', perm: 0 };
+        let form = ui.fromElement(document.getElementById('divSecurityOptions')).security;
+        console.log(form);
+        let sec = { type: form.type, username: form.username, password: form.password, pin: '' };
         // Pin entry.
         for (let i = 0; i < 4; i++) {
-            sec.pin += security.pin[`d${i}`];
+            sec.pin += form.pin[`d${i}`];
         }
-        sec.permissions |= security.permissions.configOnly ? 0x01 : 0x00;
         // Blank secret fields keep the stored value while the type (and username) stay the same.
         let saved = this.savedSecurity || {};
-        let keepPin = security.type === 1 && sec.pin === '' && saved.hasPin && saved.type === 1;
-        let keepPassword = security.type === 2 && sec.password === '' && security.repeatpassword === '' &&
+        let keepPin = form.type === 1 && sec.pin === '' && saved.hasPin && saved.type === 1;
+        let keepPassword = form.type === 2 && sec.password === '' && form.repeatpassword === '' &&
             saved.hasPassword && saved.type === 2 && sec.username === saved.username;
         // Only send the secret for the selected type so the other one stays stored.
-        if (security.type !== 1 || keepPin) delete sec.pin;
-        if (security.type !== 2 || keepPassword) delete sec.password;
+        if (form.type !== 1 || keepPin) delete sec.pin;
+        if (form.type !== 2 || keepPassword) delete sec.password;
         let confirm = '';
         console.log(sec);
-        if (security.type === 1 && !keepPin) { // Pin Entry
+        if (form.type === 1 && !keepPin) { // Pin Entry
             // Make sure our pin is 4 digits.
             if (sec.pin.length !== 4) {
                 ui.errorMessage('Invalid Pin').querySelector('.sub-message').innerHTML = 'Pins must be exactly 4 alpha-numeric values in length.  Please enter a complete pin.';
@@ -1691,7 +1513,7 @@ class General {
             }
             confirm = '<p>Please keep your PIN safe and above all remember it.  The only way to recover a lost PIN is to completely reload the onboarding firmware which will wipe out your configuration.</p><p>Have you stored your PIN in a safe place?</p>';
         }
-        else if (security.type === 2) { // Password
+        else if (form.type === 2) { // Password
             if (sec.username.length === 0) {
                 ui.errorMessage('No Username Provided').querySelector('.sub-message').innerHTML = 'You must provide a username for password security.';
                 return;
@@ -1701,7 +1523,7 @@ class General {
                 return;
             }
         }
-        if (security.type === 2 && !keepPassword) { // Password
+        if (form.type === 2 && !keepPassword) { // Password
             if (sec.password.length === 0) {
                 ui.errorMessage('No Password Provided').querySelector('.sub-message').innerHTML = 'You must provide a password for password security.';
                 return;
@@ -1711,24 +1533,33 @@ class General {
                 return;
             }
 
-            if (security.repeatpassword.length === 0) {
+            if (form.repeatpassword.length === 0) {
                 ui.errorMessage('Re-enter Password').querySelector('.sub-message').innerHTML = 'You must re-enter the password in the Re-enter Password field.';
                 return;
             }
-            if (sec.password !== security.repeatpassword) {
+            if (sec.password !== form.repeatpassword) {
                 ui.errorMessage('Passwords do not Match').querySelector('.sub-message').innerHTML = 'Please re-enter the password exactly as you typed it in the Re-enter Password field.';
                 return;
             }
             confirm = '<p>Please keep your password safe and above all remember it.  The only way to recover a password is to completely reload the onboarding firmware which will wipe out your configuration.</p><p>Have you stored your username and password in a safe place?</p>';
         }
         let prompt = ui.promptMessage('Confirm Security', () => {
-            putJSONSync('/saveSecurity', sec, (err, objApiKey) => {
+            let fields = { section: 'security', securityType: sec.type, username: sec.username, password: sec.password, pin: sec.pin };
+            sendOp('saveSettings', fields, (err, reply) => {
                 prompt.remove();
-                if (err) ui.serviceError(err);
-                else {
-                    console.log(objApiKey);
+                if (err) {
+                    ui.serviceError(err);
+                    return;
                 }
-            });
+                // The device closes every socket when a save leaves it Secured or
+                // changes its mode; this one comes back with the token in the
+                // reply.  None to None closes nothing.
+                let closed = sec.type !== 0 || security.type !== 0;
+                security.type = sec.type;
+                security.authenticated = sec.type !== 0;
+                security.setToken(reply.apiKey);
+                if (closed) startSocket();
+            }, true);
         });
         prompt.querySelector('.sub-message').innerHTML = confirm;
 
@@ -1801,16 +1632,25 @@ class Wifi {
         }
     }
     onDHCPClicked(cb) { document.getElementById('divStaticIP').style.display = cb.checked ? 'none' : ''; }
+    // Saves part of the network section; the device may restart for it.
+    saveNetworkSection(fields, done) {
+        sendOp('saveSettings', Object.assign({ section: 'network' }, fields), (err, reply) => {
+            if (err) ui.serviceError(err);
+            else if (reply.rebooting) ui.infoMessage('The device is restarting with the new network settings.');
+            if (typeof done === 'function') done(err, reply);
+        }, true);
+    }
     loadNetwork() {
         let pnl = document.getElementById('divNetAdapter');
-        getJSONSync('/networksettings', (err, settings) => {
-            console.log(settings);
+        sendOp('getSettings', { section: 'network' }, (err, reply) => {
             if (err) {
                 ui.serviceError(err);
             }
             else {
-                // Firmware older than hasEthernet always built Ethernet in.
-                let hasEthernet = settings.hasEthernet !== false;
+                let settings = ProtoViews.network(proto.schema, reply);
+                console.log(settings);
+                let hasEthernet = settings.hasEthernet;
+                this.hasEthernet = hasEthernet;
                 document.getElementById('divHardwired').style.display = hasEthernet ? '' : 'none';
                 document.getElementById('cbHardwired').checked = hasEthernet && settings.connType >= 2;
                 document.getElementById('cbFallbackWireless').checked = hasEthernet && settings.connType === 3;
@@ -1861,17 +1701,14 @@ class Wifi {
         if (document.getElementById('btnScanAPs').classList.contains('disabled')) return;
         document.getElementById('divAps').innerHTML = '<div style="display:flex;justify-content:center;align-items:center;"><div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>';
         document.getElementById('btnScanAPs').classList.add('disabled');
-        //document.getElementById('btnConnectWiFi').classList.add('disabled');
-        getJSON('/scanaps', (err, aps) => {
+        let done = (networks) => {
             document.getElementById('btnScanAPs').classList.remove('disabled');
-            //document.getElementById('btnConnectWiFi').classList.remove('disabled');
-            console.log(aps);
-            if (err) {
-                this.displayAPs({ connected: { name: '' }, accessPoints: [] });
-            }
-            else {
-                this.displayAPs(aps);
-            }
+            this.displayAPs({ accessPoints: networks.map((n) => ({ name: n.ssid, channel: n.channel || 0, strength: n.strength || 0, macAddress: n.macAddress || '' })) });
+        };
+        // The scan takes a few seconds; its networks come as an event.
+        sendOp('scanWifi', {}, (err) => {
+            if (err) done([]);
+            else proto.waitFor('wifiNetworks', null, 20000).then((d) => done(d && d.networks ? d.networks : []));
         });
     }
     displayAPs(aps) {
@@ -1962,12 +1799,9 @@ class Wifi {
                 return;
             }
         }
-        putJSONSync('/setIP', obj, (err, response) => {
-            if (err) {
-                ui.serviceError(err);
-            }
-            console.log(response);
-        });
+        // With DHCP the static address stays as it was.
+        if (obj.dhcp) this.saveNetworkSection({ dhcp: true });
+        else this.saveNetworkSection({ dhcp: false, ip: obj.ip, subnet: obj.subnet, gateway: obj.gateway, dns1: obj.dns1, dns2: obj.dns2 });
     }
     saveNetwork() {
         let pnl = document.getElementById('divNetAdapter');
@@ -2012,12 +1846,10 @@ class Wifi {
     // A blank passphrase for the saved SSID keeps the stored one; for a new SSID it means an open network.
     keepSavedPassphrase(ssid, passphrase) { return passphrase === '' && ssid === this.savedSsid; }
     sendNetworkSettings(obj) {
-        putJSONSync('/setNetwork', obj, (err, response) => {
-            if (err) {
-                ui.serviceError(err);
-            }
-            console.log(response);
-        });
+        let fields = { connMode: obj.connType, ssid: obj.wifi.ssid, passphrase: obj.wifi.passphrase, roaming: obj.wifi.roaming, hidden: obj.wifi.hidden };
+        // A device without Ethernet refuses its settings.
+        if (this.hasEthernet) for (let name of ProtoViews.ETHERNET) fields[name] = obj.ethernet[name];
+        this.saveNetworkSection(fields);
     }
     connectWiFi() {
         if (document.getElementById('btnConnectWiFi').classList.contains('disabled')) return;
@@ -2035,14 +1867,8 @@ class Wifi {
             return;
         }
         if (this.keepSavedPassphrase(obj.ssid, obj.passphrase)) delete obj.passphrase;
-
-
-        let overlay = ui.waitMessage(document.getElementById('divNetAdapter'));
-        putJSON('/connectwifi', obj, (err, response) => {
-            overlay.remove();
+        this.saveNetworkSection({ ssid: obj.ssid, passphrase: obj.passphrase }, () => {
             document.getElementById('btnConnectWiFi').classList.remove('disabled');
-            console.log(response);
-
         });
     }
     procWifiStrength(strength) {
@@ -2108,31 +1934,25 @@ class Somfy {
         this.loadPins('out', document.getElementById('selShadeGPIODown'));
         this.loadPins('out', document.getElementById('selShadeGPIOMy'));
     }
-    async loadSomfy() {
-        getJSONSync('/controller', (err, somfy) => {
+    // The shade model from the sync, and the radio's settings.
+    loadSomfy() {
+        let header = proto.model.header;
+        document.getElementById('spanMaxRooms').innerText = header.maxRooms;
+        document.getElementById('spanMaxShades').innerText = header.maxShades;
+        document.getElementById('spanMaxGroups').innerText = header.maxGroups;
+        renderAll();
+        firmware.procFwStatus({ fwVersion: { name: header.fw } });
+        this.loadRadio();
+    }
+    loadRadio() {
+        sendOp('getSettings', { section: 'radio' }, (err, radio) => {
             if (err) {
-                console.log(err);
                 ui.serviceError(err);
+                return;
             }
-            else {
-                console.log(somfy);
-                document.getElementById('spanMaxRooms').innerText = somfy.maxRooms || 0;
-                document.getElementById('spanMaxShades').innerText = somfy.maxShades;
-                document.getElementById('spanMaxGroups').innerText = somfy.maxGroups;
-                ui.toElement(document.getElementById('divTransceiverSettings'), somfy);
-                if (somfy.transceiver.config.radioInit) {
-                    document.getElementById('divRadioError').style.display = 'none';
-                }
-                else {
-                    document.getElementById('divRadioError').style.display = '';
-                }
-                // Create the shades list.
-                this.setRoomsList(somfy.rooms);
-                this.setShadesList(somfy.shades);
-                this.setGroupsList(somfy.groups);
-                this.setRepeaterList(somfy.repeaters);
-                if (typeof somfy.version !== 'undefined') firmware.procFwStatus(somfy.version);
-            }
+            let config = ProtoViews.radio(proto.schema, radio);
+            ui.toElement(document.getElementById('divTransceiverSettings'), { transceiver: { config: config } });
+            document.getElementById('divRadioError').style.display = config.radioInit ? 'none' : '';
         });
     }
     saveRadio() {
@@ -2180,20 +2000,14 @@ class Somfy {
             if (valid) valid = fnValDup(trans.config, 'TXPin');
             if (valid) valid = fnValDup(trans.config, 'RXPin');
             if (valid) {
-                putJSONSync('/saveRadio', trans, (err, trans) => {
-                    if (err)
-                        ui.serviceError(err);
+                sendOp('saveSettings', ProtoViews.radioSave(trans.config), (err) => {
+                    if (err) ui.serviceError(err);
                     else {
                         document.getElementById('btnSaveRadio').classList.remove('disabled');
-                        if (trans.config.radioInit) {
-                            document.getElementById('divRadioError').style.display = 'none';
-                        }
-                        else {
-                            document.getElementById('divRadioError').style.display = '';
-                        }
+                        // Whether the radio came up with them.
+                        this.loadRadio();
                     }
-                    console.log(trans);
-                });
+                }, true);
             }
         }
     }
@@ -2242,8 +2056,9 @@ class Somfy {
         }
         if (initScan) {
             div.setAttribute('data-initscan', true);
-            putJSONSync('/beginFrequencyScan', {}, (err, trans) => {
-                if (!err) {
+            sendOp('beginFrequencyScan', {}, (err) => {
+                if (err) ui.serviceError(err);
+                else {
                     document.getElementById('btnStopScanning').style.display = '';
                     document.getElementById('btnRestartScanning').style.display = 'none';
                     document.getElementById('btnCopyFrequency').style.display = 'none';
@@ -2267,7 +2082,7 @@ class Somfy {
             div.remove();
         }
         else {
-            putJSONSync('/endFrequencyScan', {}, (err, trans) => {
+            sendOp('endFrequencyScan', {}, (err) => {
                 if (err) ui.serviceError(err);
                 else {
                     let freq = parseFloat(div.getAttribute('data-frequency'));
@@ -2281,39 +2096,6 @@ class Somfy {
     }
     btnDown = null;
     btnTimer = null;
-    procRoomAdded(room) {
-        let r = _rooms.find(x => x.roomId === room.roomId);
-        if (typeof r === 'undefined' || !r) {
-            _rooms.push(room);
-            _rooms.sort((a, b) => { return a.sortOrder - b.sortOrder });
-            this.setRoomsList(_rooms);
-        }
-    }
-    procRoomRemoved(room) {
-        if (room.roomId === 0) return;
-        let r = _rooms.find(x => x.roomId === room.roomId);
-        if (typeof r !== 'undefined' && r.roomId === room.roomId) {
-            _rooms = _rooms.filter(x => x.roomId !== room.roomId);
-            _rooms.sort((a, b) => { return a.sortOrder - b.sortOrder });
-            this.setRoomsList(_rooms);
-            let rs = document.getElementById('divRoomSelector');
-            let ss = document.getElementById('divShadeControls');
-            let gs = document.getElementById('divGroupControls');
-            let ctls = ss.querySelectorAll('.somfyShadeCtl');
-            for (let i = 0; i < ctls.length; i++) {
-                let x = ctls[i];
-                if (parseInt(x.getAttribute('data-roomid'), 10) === room.roomId)
-                    x.setAttribute('data-roomid', '0');
-            }
-            ctls = gs.querySelectorAll('.somfyGroupCtl');
-            for (let i = 0; i < ctls.length; i++) {
-                let x = ctls[i];
-                if (parseInt(x.getAttribute('data-roomid'), 10) === room.roomId)
-                    x.setAttribute('data-roomid', '0');
-            }
-            if (parseInt(rs.getAttribute('data-roomid'), 10) === room.roomId) this.selectRoom(0);
-        }
-    }
     selectRoom(roomId) {
         let room = _rooms.find(x => x.roomId === roomId) || { roomId: 0, name: '' };
         let rs = document.getElementById('divRoomSelector');
@@ -2371,9 +2153,8 @@ class Somfy {
                 order.push(parseInt(items[i].getAttribute('data-roomid'), 10));
                 // Reorder the shades on the main page.
             }
-            editJSON('/roomSortOrder', order, null, (err) => {
+            sendEdit('roomSortOrder', { ids: order }, null, (err) => {
                 if (err) ui.serviceError(err);
-                else this.updateRoomsList();
             });
         });
     }
@@ -2567,13 +2348,8 @@ class Somfy {
                 order.push(parseInt(items[i].getAttribute('data-shadeid'), 10));
                 // Reorder the shades on the main page.
             }
-            editJSON('/shadeSortOrder', order, null, (err) => {
-                for (let i = order.length - 1; i >= 0; i--) {
-                    let el = shadeControls.querySelector(`.somfyShadeCtl[data-shadeid="${order[i]}"`);
-                    if (el) {
-                        shadeControls.prepend(el);
-                    }
-                }
+            sendEdit('shadeSortOrder', { ids: order }, null, (err) => {
+                if (err) ui.serviceError(err);
             });
         });
     }
@@ -2812,13 +2588,8 @@ class Somfy {
                 order.push(parseInt(items[i].getAttribute('data-groupid'), 10));
                 // Reorder the shades on the main page.
             }
-            editJSON('/groupSortOrder', order, null, (err) => {
-                for (let i = order.length - 1; i >= 0; i--) {
-                    let el = groupControls.querySelector(`.somfyGroupCtl[data-groupid="${order[i]}"`);
-                    if (el) {
-                        groupControls.prepend(el);
-                    }
-                }
+            sendEdit('groupSortOrder', { ids: order }, null, (err) => {
+                if (err) ui.serviceError(err);
             });
         });
 
@@ -2911,12 +2682,10 @@ class Somfy {
     }
     sendShadeMyPosition(shadeId, pos, tilt) {
         console.log(`Sending My Position for shade id ${shadeId} to ${pos} and ${tilt}`);
-        let overlay = ui.waitMessage(document.getElementById('divContainer'));
-        putJSON('/setMyPosition', { shadeId: shadeId, pos: pos, tilt: tilt }, (err, response) => {
+        sendOp('setMyPosition', { shadeId: shadeId, myPos: pos, myTiltPos: tilt }, (err) => {
             this.closeShadePositioners();
-            overlay.remove();
-            console.log(response);
-        });
+            if (err) ui.serviceError(err);
+        }, true);
     }
     setLinkedRemotesList(shade) {
         let divCfg = '';
@@ -3019,22 +2788,21 @@ class Somfy {
             let obj = {
                 shadeId: parseInt(lnk.dataset.shadeid, 10),
                 remoteAddress: frame.address,
-                rollingCode: frame.rcode
+                lastRollingCode: frame.rcode
             };
-            editJSON('/linkRemote', obj, (id) => `/shade?shadeId=${id}`, (err, shade) => {
-                console.log(shade);
-                lnk.remove();
+            // The frames keep coming while the edit runs: link it once.
+            lnk.remove();
+            sendEdit('linkRemote', obj, editTarget('shade', () => obj.shadeId), (err, shade) => {
                 if (err) ui.serviceError(err);
-                else this.setLinkedRemotesList(shade);
+                else if (shade) this.setLinkedRemotesList(shade);
             });
         }
         else {
             lnk = document.getElementById('divLinkRepeater');
             if (lnk) {
-                editJSON(`/linkRepeater`, {address:frame.address}, () => '/repeaters', (err, repeaters) => {
-                    lnk.remove();
+                lnk.remove();
+                sendEdit('linkRepeater', { remoteAddress: frame.address }, null, (err) => {
                     if (err) ui.serviceError(err);
-                    else this.setRepeaterList(repeaters);
                 });
             }
         }
@@ -3151,11 +2919,12 @@ class Somfy {
         
         if (typeof roomId === 'undefined') {
             document.getElementById('btnSaveRoom').innerText = 'Add Room';
-            getJSONSync('/getNextRoom', (err, room) => {
+            sendOp('getNextRoom', {}, (err, room) => {
                 document.getElementById('spanRoomId').innerText = '*';
                 if (err) ui.serviceError(err);
                 else {
-                    console.log(room);
+                    // What the reply leaves out is a new room's default.
+                    room = proto.schema.fill(room, ProtoModel.FIELDS.room);
                     let elRoom = document.getElementById('somfyRoom');
                     room.name = '';
                     ui.toElement(elRoom, room);
@@ -3165,22 +2934,20 @@ class Somfy {
         }
         else {
             document.getElementById('btnSaveRoom').innerText = 'Save Room';
-            getJSONSync(`/room?roomId=${roomId}`, (err, room) => {
-                if (err) ui.serviceError(err);
-                else {
-                    console.log(room);
-                    document.getElementById('spanRoomId').innerText = roomId;
-                    ui.toElement(document.getElementById('somfyRoom'), room);
-                    this.showEditRoom(true);
-                    document.getElementById('btnSaveRoom').style.display = 'inline-block';
-                }
-            });
+            let room = proto.model.rooms.get(roomId);
+            if (!room) gone('room');
+            else {
+                document.getElementById('spanRoomId').innerText = roomId;
+                ui.toElement(document.getElementById('somfyRoom'), room);
+                this.showEditRoom(true);
+                document.getElementById('btnSaveRoom').style.display = 'inline-block';
+            }
 
         }
     }
     openEditShade(shadeId) {
         if (typeof shadeId === 'undefined') {
-            getJSONSync('/getNextShade', (err, shade) => {
+            sendOp('getNextShade', {}, (err, shade) => {
                 document.getElementById('btnPairShade').style.display = 'none';
                 document.getElementById('btnUnpairShade').style.display = 'none';
                 document.getElementById('btnLinkRemote').style.display = 'none';
@@ -3195,7 +2962,8 @@ class Somfy {
                     ui.serviceError(err);
                 }
                 else {
-                    console.log(shade);
+                    // What the reply leaves out is a new shade's default.
+                    shade = proto.schema.fill(shade, ProtoModel.FIELDS.shade);
                     let elShade = document.getElementById('somfyShade');
                     shade.name = '';
                     shade.downTime = shade.upTime = 10000;
@@ -3217,7 +2985,7 @@ class Somfy {
 
             document.getElementById('btnSaveShade').innerText = 'Save Shade';
             document.getElementById('spanShadeId').innerText = shadeId;
-            getJSONSync(`/shade?shadeId=${shadeId}`, (err, shade) => {
+            let fnShow = (err, shade) => {
                 if (err) {
                     ui.serviceError(err);
                 }
@@ -3252,13 +3020,16 @@ class Somfy {
                     }
                     this.setLinkedRemotesList(shade);
                 }
-            });
+            };
+            let shade = proto.model.shades.get(shadeId);
+            if (shade) fnShow(null, shade);
+            else gone('shade');
         }
     }
     openEditGroup(groupId) {
         document.getElementById('btnLinkShade').style.display = 'none';
         if (typeof groupId === 'undefined') {
-            getJSONSync('/getNextGroup', (err, group) => {
+            sendOp('getNextGroup', {}, (err, group) => {
                 document.getElementById('btnSaveGroup').innerText = 'Add Group';
                 document.getElementById('spanGroupId').innerText = '*';
                 document.getElementById('divLinkedShadeList').innerHTML = '';
@@ -3267,7 +3038,7 @@ class Somfy {
                     ui.serviceError(err);
                 }
                 else {
-                    console.log(group);
+                    group = proto.schema.fill(group, ProtoModel.FIELDS.group);
                     group.name = '';
                     group.flipCommands = false;
                     ui.toElement(document.getElementById('somfyGroup'), group);
@@ -3280,20 +3051,16 @@ class Somfy {
             document.getElementById('btnSaveGroup').style.display = 'none';
             document.getElementById('btnSaveGroup').innerText = 'Save Group';
             document.getElementById('spanGroupId').innerText = groupId;
-            getJSONSync(`/group?groupId=${groupId}`, (err, group) => {
-                if (err) {
-                    ui.serviceError(err);
-                }
-                else {
-                    console.log(group);
-                    ui.toElement(document.getElementById('somfyGroup'), group);
-                    this.showEditGroup(true);
-                    document.getElementById('btnSaveGroup').style.display = 'inline-block';
-                    document.getElementById('btnLinkShade').style.display = '';
-                    document.getElementById('btnSetRollingCode').style.display = 'inline-block';
-                    this.setLinkedShadesList(group);
-                }
-            });
+            let group = ProtoViews.group(proto.model, proto.model.groups.get(groupId));
+            if (!group) gone('group');
+            else {
+                ui.toElement(document.getElementById('somfyGroup'), group);
+                this.showEditGroup(true);
+                document.getElementById('btnSaveGroup').style.display = 'inline-block';
+                document.getElementById('btnLinkShade').style.display = '';
+                document.getElementById('btnSetRollingCode').style.display = 'inline-block';
+                this.setLinkedShadesList(group);
+            }
         }
     }
     showEditRoom(bShow) {
@@ -3362,7 +3129,7 @@ class Somfy {
         if (valid) {
             if (isNaN(roomId) || roomId === 0) {
                 // We are adding.
-                editJSON('/addRoom', obj, (id) => `/room?roomId=${id}`, (err, room) => {
+                sendEdit('addRoom', obj, editTarget('room', (r) => r.roomId), (err, room) => {
                     if (err) {
                         ui.serviceError(err);
                         console.log(err);
@@ -3372,16 +3139,13 @@ class Somfy {
                         document.getElementById('spanRoomId').innerText = room.roomId;
                         document.getElementById('btnSaveRoom').innerText = 'Save Room';
                         document.getElementById('btnSaveRoom').style.display = 'inline-block';
-                        this.updateRoomsList();
                     }
                 });
             }
             else {
                 obj.roomId = roomId;
-                editJSON('/saveRoom', obj, (id) => `/room?roomId=${id}`, (err, room) => {
+                sendEdit('saveRoom', obj, null, (err) => {
                     if (err) ui.serviceError(err);
-                    else this.updateRoomsList();
-                    console.log(room);
                 });
             }
         }
@@ -3435,7 +3199,7 @@ class Somfy {
         if (valid) {
             if (isNaN(shadeId) || shadeId >= 255) {
                 // We are adding.
-                editJSON('/addShade', obj, (id) => `/shade?shadeId=${id}`, (err, shade) => {
+                sendEdit('addShade', obj, editTarget('shade', (r) => r.shadeId), (err, shade) => {
                     if (err) {
                         ui.serviceError(err);
                         console.log(err);
@@ -3448,19 +3212,17 @@ class Somfy {
                         document.getElementById('btnLinkRemote').style.display = '';
                         document.getElementById(shade.paired ? 'btnUnpairShade' : 'btnPairShade').style.display = 'inline-block';
                         document.getElementById('btnSetRollingCode').style.display = 'inline-block';
-                        this.updateShadeList();
                     }
                 });
             }
             else {
                 obj.shadeId = shadeId;
-                editJSON('/saveShade', obj, (id) => `/shade?shadeId=${id}`, (err, shade) => {
+                sendEdit('saveShade', obj, editTarget('shade', () => shadeId), (err, shade) => {
                     if (err) {
                         ui.serviceError(err);
                         return;
                     }
-                    this.updateShadeList();
-                    console.log(shade);
+                    if (!shade) return;
                     let ico = document.getElementById('icoShade');
                     let tilt = ico.parentElement.querySelector('i.icss-window-tilt');
                     tilt.style.display = shade.tiltType !== 0 ? '' : 'none';
@@ -3490,7 +3252,7 @@ class Somfy {
         if (valid) {
             if (isNaN(groupId) || groupId >= 255) {
                 // We are adding.
-                editJSON('/addGroup', obj, (id) => `/group?groupId=${id}`, (err, group) => {
+                sendEdit('addGroup', obj, editTarget('group', (r) => r.groupId), (err, group) => {
                     if (err) ui.serviceError(err);
                     else {
                         console.log(group);
@@ -3498,68 +3260,17 @@ class Somfy {
                         document.getElementById('btnSaveGroup').innerText = 'Save Group';
                         document.getElementById('btnSaveGroup').style.display = 'inline-block';
                         document.getElementById('btnLinkShade').style.display = '';
-                        //document.getElementById('btnSetRollingCode').style.display = 'inline-block';
-                        this.updateGroupList();
                     }
                 });
             }
             else {
                 obj.groupId = groupId;
-                editJSON('/saveGroup', obj, (id) => `/group?groupId=${id}`, (err, shade) => {
+                sendEdit('saveGroup', obj, null, (err) => {
                     if (err) ui.serviceError(err);
-                    else this.updateGroupList();
-                    console.log(shade);
                 });
             }
         }
     }
-    updateRoomsList() {
-        getJSONSync('/rooms', (err, shades) => {
-            if (err) {
-                console.log(err);
-                ui.serviceError(err);
-            }
-            else {
-                this.setRoomsList(shades);
-                
-            }
-        });
-    }
-    updateShadeList() {
-        getJSONSync('/shades', (err, shades) => {
-            if (err) {
-                console.log(err);
-                ui.serviceError(err);
-            }
-            else {
-                //console.log(shades);
-                // Create the shades list.
-                this.setShadesList(shades);
-            }
-        });
-    }
-    updateGroupList() {
-        getJSONSync('/groups', (err, groups) => {
-            if (err) {
-                console.log(err);
-                ui.serviceError(err);
-            }
-            else {
-                console.log(groups);
-                // Create the groups list.
-                this.setGroupsList(groups);
-            }
-        });
-    }
-    updateRepeatList() {
-        getJSONSync('/repeaters', (err, repeaters) => {
-            if (err) {
-                console.log(err);
-                ui.serviceError(err);
-            }
-            else this.setRepeaterList(repeaters);
-        });
-    }
     deleteRoom(roomId) {
         let valid = true;
         if (isNaN(roomId) || roomId >= 255 || roomId <= 0) {
@@ -3567,21 +3278,18 @@ class Somfy {
             valid = false;
         }
         if (valid) {
-            getJSONSync(`/room?roomId=${roomId}`, (err, room) => {
-                if (err) ui.serviceError(err);
-                else {
-                    let prompt = ui.promptMessage(`Are you sure you want to delete this room?`, () => {
-                        ui.clearErrors();
-                        editJSON('/deleteRoom', { roomId: roomId }, null, (err, room) => {
-                            prompt.remove();
-                            if (err) ui.serviceError(err);
-                            else
-                                this.updateRoomsList();
-                        });
+            let room = proto.model.rooms.get(roomId);
+            if (!room) gone('room');
+            else {
+                let prompt = ui.promptMessage(`Are you sure you want to delete this room?`, () => {
+                    ui.clearErrors();
+                    sendEdit('deleteRoom', { roomId: roomId }, null, (err) => {
+                        prompt.remove();
+                        if (err) ui.serviceError(err);
                     });
-                    prompt.querySelector('.sub-message').innerHTML = `<p>If this room was previously selected for motors or groups, they will be automatically assigned to the Home room.</p>`;
-                }
-            });
+                });
+                prompt.querySelector('.sub-message').innerHTML = `<p>If this room was previously selected for motors or groups, they will be automatically assigned to the Home room.</p>`;
+            }
         }
     }
     deleteShade(shadeId) {
@@ -3591,21 +3299,19 @@ class Somfy {
             valid = false;
         }
         if (valid) {
-            getJSONSync(`/shade?shadeId=${shadeId}`, (err, shade) => {
-                if (err) ui.serviceError(err);
-                else if (shade.inGroup) ui.errorMessage(`You may not delete this shade because it is a member of a group.`);
-                else {
-                    let prompt = ui.promptMessage(`Are you sure you want to delete this shade?`, () => {
-                        ui.clearErrors();
-                        editJSON('/deleteShade', { shadeId: shadeId }, null, (err, shade) => {
-                            prompt.remove();
-                            if (err) ui.serviceError(err);
-                            this.updateShadeList();
-                        });
+            let shade = proto.model.shades.get(shadeId);
+            if (!shade) gone('shade');
+            else if (shade.inGroup) ui.errorMessage(`You may not delete this shade because it is a member of a group.`);
+            else {
+                let prompt = ui.promptMessage(`Are you sure you want to delete this shade?`, () => {
+                    ui.clearErrors();
+                    sendEdit('deleteShade', { shadeId: shadeId }, null, (err) => {
+                        prompt.remove();
+                        if (err) ui.serviceError(err);
                     });
-                    prompt.querySelector('.sub-message').innerHTML = `<p>If this shade was previously paired with a motor, you should first unpair it from the motor and remove it from any groups.  Otherwise its address will remain in the motor memory.</p><p>Press YES to delete ${shade.name} or NO to cancel this operation.</p>`;
-                }
-            });
+                });
+                prompt.querySelector('.sub-message').innerHTML = `<p>If this shade was previously paired with a motor, you should first unpair it from the motor and remove it from any groups.  Otherwise its address will remain in the motor memory.</p><p>Press YES to delete ${shade.name} or NO to cancel this operation.</p>`;
+            }
         }
     }
     deleteGroup(groupId) {
@@ -3615,144 +3321,65 @@ class Somfy {
             valid = false;
         }
         if (valid) {
-            getJSONSync(`/group?groupId=${groupId}`, (err, group) => {
-                if (err) ui.serviceError(err);
-                else {
-                    if (group.linkedShades.length > 0) {
-                        ui.errorMessage('You may not delete this group until all shades have been removed from it.');
-                    }
-                    else {
-                        let prompt = ui.promptMessage(`Are you sure you want to delete this group?`, () => {
-                            editJSON('/deleteGroup', { groupId: groupId }, null, (err, g) => {
-                                if (err) ui.serviceError(err);
-                                this.updateGroupList();
-                                prompt.remove();
-                            });
-
-                        });
-                        prompt.querySelector('.sub-message').innerHTML = `<p>Press YES to delete the ${group.name} group or NO to cancel this operation.</p>`;
-                        
-                    }
-                }
-            });
+            let group = proto.model.groups.get(groupId);
+            if (!group) gone('group');
+            else if (group.linkedShades.length > 0) {
+                ui.errorMessage('You may not delete this group until all shades have been removed from it.');
+            }
+            else {
+                let prompt = ui.promptMessage(`Are you sure you want to delete this group?`, () => {
+                    sendEdit('deleteGroup', { groupId: groupId }, null, (err) => {
+                        if (err) ui.serviceError(err);
+                        prompt.remove();
+                    });
+                });
+                prompt.querySelector('.sub-message').innerHTML = `<p>Press YES to delete the ${group.name} group or NO to cancel this operation.</p>`;
+            }
         }
     }
-    sendPairCommand(shadeId) {
-        putJSON('/pairShade', { shadeId: shadeId }, (err, shade) => {
-            if (err) {
-                console.log(err);
-            }
-            else {
-                console.log(shade);
-                document.getElementById('somfyMain').style.display = 'none';
-                document.getElementById('somfyShade').style.display = '';
-                document.getElementById('btnSaveShade').style.display = 'inline-block';
-                document.getElementById('btnLinkRemote').style.display = '';
-                document.getElementsByName('shadeAddress')[0].value = shade.remoteAddress;
-                document.getElementsByName('shadeName')[0].value = shade.name;
-                document.getElementsByName('shadeUpTime')[0].value = shade.upTime;
-                document.getElementsByName('shadeDownTime')[0].value = shade.downTime;
-                let ico = document.getElementById('icoShade');
-                ico.style.setProperty('--shade-position', `${shade.flipPosition ? 100 - shade.position : shade.position}%`);
-                ico.style.setProperty('--fpos', `${shade.position}%`);
-                //ico.style.setProperty('--shade-position', `${shade.position}%`);
-                ico.setAttribute('data-shadeid', shade.shadeId);
-                if (shade.paired) {
-                    document.getElementById('btnUnpairShade').style.display = 'inline-block';
-                    document.getElementById('btnPairShade').style.display = 'none';
-                }
-                else {
-                    document.getElementById('btnPairShade').style.display = 'inline-block';
-                    document.getElementById('btnUnpairShade').style.display = 'none';
-                }
-                this.setLinkedRemotesList(shade);
-                document.getElementById('divPairing').remove();
-            }
-
-        });
-    }
-    sendUnpairCommand(shadeId) {
-        putJSON('/unpairShade', { shadeId: shadeId }, (err, shade) => {
-            if (err) {
-                console.log(err);
-            }
-            else {
-                console.log(shade);
-                document.getElementById('somfyMain').style.display = 'none';
-                document.getElementById('somfyShade').style.display = '';
-                document.getElementById('btnSaveShade').style.display = 'inline-block';
-                document.getElementById('btnLinkRemote').style.display = '';
-                document.getElementsByName('shadeAddress')[0].value = shade.remoteAddress;
-                document.getElementsByName('shadeName')[0].value = shade.name;
-                document.getElementsByName('shadeUpTime')[0].value = shade.upTime;
-                document.getElementsByName('shadeDownTime')[0].value = shade.downTime;
-                let ico = document.getElementById('icoShade');
-                ico.style.setProperty('--shade-position', `${shade.flipPosition ? 100 - shade.position : shade.position}%`);
-                ico.style.setProperty('--fpos', `${shade.position}%`);
-                //ico.style.setProperty('--shade-position', `${shade.position}%`);
-                ico.setAttribute('data-shadeid', shade.shadeId);
-                if (shade.paired) {
-                    document.getElementById('btnUnpairShade').style.display = 'inline-block';
-                    document.getElementById('btnPairShade').style.display = 'none';
-                }
-                else {
-                    document.getElementById('btnPairShade').style.display = 'inline-block';
-                    document.getElementById('btnUnpairShade').style.display = 'none';
-                }
-                this.setLinkedRemotesList(shade);
-                document.getElementById('divPairing').remove();
-            }
-        });
-    }
     setRollingCode(shadeId, rollingCode) {
-        putJSONSync('/setRollingCode', { shadeId: shadeId, rollingCode: rollingCode }, (err, shade) => {
+        sendOp('setRollingCode', { shadeId: shadeId, lastRollingCode: rollingCode }, (err) => {
             if (err) ui.serviceError(document.getElementById('divSomfySettings'), err);
             else {
                 let dlg = document.getElementById('divRollingCode');
                 if (dlg) dlg.remove();
             }
-        });
+        }, true);
     }
     openSetRollingCode(shadeId) {
-        let overlay = ui.waitMessage(document.getElementById('divContainer'));
-        getJSON(`/shade?shadeId=${shadeId}`, (err, shade) => {
-            overlay.remove();
-            if (err) {
-                ui.serviceError(err);
-            }
-            else {
-                console.log(shade);
-                let div = document.createElement('div');
-                div.setAttribute('id', 'divRollingCode');
-                let html = `<div class="instructions" data-shadeid="${shadeId}">`;
-                html += '<div style="width:100%;color:red;text-align:center;font-weight:bold;"><span style="background:yellow;padding:10px;display:inline-block;border-radius:5px;background:white;">BEWARE ... WARNING ... DANGER<span></div>';
-                html += '<hr style="width:100%;margin:0px;"></hr>';
-                html += '<p style="font-size:14px;">If this shade is already paired with a motor then changing the rolling code WILL cause it to stop working.  Rolling codes are tied to the remote address and the Somfy motor expects these to be sequential.</p>';
-                html += '<p style="font-size:14px;">If you hesitated just a little bit do not press the red button.  Green represents safety so press it, wipe the sweat from your brow, and go through the normal pairing process.';
-                html += '<div class="field-group" style="border-radius:5px;background:white;width:50%;margin-left:25%;text-align:center">';
-                html += `<input id="fldNewRollingCode" min="0" max="65535" name="newRollingCode" type="number" length="12" style="text-align:center;font-size:24px;" placeholder="New Code" value="${shade.lastRollingCode}"></input>`;
-                html += '<label for="fldNewRollingCode">Rolling Code</label>';
-                html += '</div>';
-                html += `<div class="button-container">`;
-                html += `<button id="btnChangeRollingCode" type="button" style="padding-left:20px;padding-right:20px;display:inline-block;background:orangered;" onclick="somfy.setRollingCode(${shadeId}, parseInt(document.getElementById('fldNewRollingCode').value, 10));">Set Rolling Code</button>`;
-                html += `<button id="btnCancel" type="button" style="padding-left:20px;padding-right:20px;display:inline-block;background:lawngreen;color:gray" onclick="document.getElementById('divRollingCode').remove();">Cancel</button>`;
-                html += `</div>`;
-                div.innerHTML = html;
-                document.getElementById('somfyShade').appendChild(div);
-            }
-        });
+        let shade = proto.model.shades.get(shadeId);
+        if (!shade) {
+            gone('shade');
+            return;
+        }
+        console.log(shade);
+        let div = document.createElement('div');
+        div.setAttribute('id', 'divRollingCode');
+        let html = `<div class="instructions" data-shadeid="${shadeId}">`;
+        html += '<div style="width:100%;color:red;text-align:center;font-weight:bold;"><span style="background:yellow;padding:10px;display:inline-block;border-radius:5px;background:white;">BEWARE ... WARNING ... DANGER<span></div>';
+        html += '<hr style="width:100%;margin:0px;"></hr>';
+        html += '<p style="font-size:14px;">If this shade is already paired with a motor then changing the rolling code WILL cause it to stop working.  Rolling codes are tied to the remote address and the Somfy motor expects these to be sequential.</p>';
+        html += '<p style="font-size:14px;">If you hesitated just a little bit do not press the red button.  Green represents safety so press it, wipe the sweat from your brow, and go through the normal pairing process.';
+        html += '<div class="field-group" style="border-radius:5px;background:white;width:50%;margin-left:25%;text-align:center">';
+        html += `<input id="fldNewRollingCode" min="0" max="65535" name="newRollingCode" type="number" length="12" style="text-align:center;font-size:24px;" placeholder="New Code" value="${shade.lastRollingCode}"></input>`;
+        html += '<label for="fldNewRollingCode">Rolling Code</label>';
+        html += '</div>';
+        html += `<div class="button-container">`;
+        html += `<button id="btnChangeRollingCode" type="button" style="padding-left:20px;padding-right:20px;display:inline-block;background:orangered;" onclick="somfy.setRollingCode(${shadeId}, parseInt(document.getElementById('fldNewRollingCode').value, 10));">Set Rolling Code</button>`;
+        html += `<button id="btnCancel" type="button" style="padding-left:20px;padding-right:20px;display:inline-block;background:lawngreen;color:gray" onclick="document.getElementById('divRollingCode').remove();">Cancel</button>`;
+        html += `</div>`;
+        div.innerHTML = html;
+        document.getElementById('somfyShade').appendChild(div);
     }
     setPaired(shadeId, paired) {
         let obj = { shadeId: shadeId, paired: paired || false };
         let div = document.getElementById('divPairing');
-        let overlay = typeof div === 'undefined' ? undefined : ui.waitMessage(div);
-        editJSON('/setPaired', obj, (id) => `/shade?shadeId=${id}`, (err, shade) => {
-            if (overlay) overlay.remove();
+        sendEdit('setPaired', obj, editTarget('shade', () => shadeId), (err, shade) => {
             if (err) {
                 console.log(err);
-                ui.errorMessage(err.message);
+                ui.errorMessage(err.desc);
             }
-            else if (div) {
+            else if (div && shade) {
                 console.log(shade);
                 this.showEditShade(true);
                 document.getElementById('btnSaveShade').style.display = 'inline-block';
@@ -3887,55 +3514,30 @@ class Somfy {
 
         return div;
     }
+    // A command, or a position to move to.  shadeId may instead be an object
+    // with shadeId, command, repeat and stepSize, as the virtual remote sends.
+    // cb(err, reply): the reply carries no state; the shade's state events
+    // follow as it moves.
     sendCommand(shadeId, command, repeat, cb) {
-        let obj = {};
-        if (typeof shadeId.shadeId !== 'undefined') {
-            obj = shadeId;
-            cb = command;
-            shadeId = obj.shadeId;
-            repeat = obj.repeat;
-            command = obj.command;
-        }
-        else {
-            obj = { shadeId: shadeId };
-            if (isNaN(parseInt(command, 10))) obj.command = command;
-            else obj.target = parseInt(command, 10);
-            if (typeof repeat === 'number') obj.repeat = parseInt(repeat);
-        }
-        putJSON('/shadeCommand', obj, (err, shade) => {
-            if (typeof cb === 'function') cb(err, shade);
-        });
+        let [cmd, done] = this.commandArgs(shadeId, command, repeat, cb);
+        let fields = { shadeId: cmd.shadeId, repeat: repeatOf(cmd.repeat), stepSize: cmd.stepSize };
+        if (isNaN(parseInt(cmd.command, 10))) fields.command = cmd.command;
+        else fields.target = parseInt(cmd.command, 10);
+        sendOp('shadeCommand', fields, done);
     }
+    // The last frame again when it was this command, otherwise the command.
     sendCommandRepeat(shadeId, command, repeat, cb) {
-        //console.log(`Sending Shade command ${shadeId}-${command}`);
-        let obj = {};
-        if (typeof shadeId.shadeId !== 'undefined') {
-            obj = shadeId;
-            cb = command;
-            shadeId = obj.shadeId;
-            repeat = obj.repeat;
-            command = obj.command;
-        }
-        else {
-            obj = { shadeId: shadeId, command: command };
-            if (typeof repeat === 'number') obj.repeat = parseInt(repeat);
-        }
-        putJSON('/repeatCommand', obj, (err, shade) => {
-            if (typeof cb === 'function') cb(err, shade);
-        });
-
-        /*
-        putJSON(`/repeatCommand?shadeId=${shadeId}&command=${command}`, null, (err, shade) => {
-            if(typeof cb === 'function') cb(err, shade);
-        });
-        */
+        let [cmd, done] = this.commandArgs(shadeId, command, repeat, cb);
+        sendOp('repeatCommand', { shadeId: cmd.shadeId, command: cmd.command, repeat: repeatOf(cmd.repeat), stepSize: cmd.stepSize }, done);
+    }
+    // (shadeId, command, repeat, cb), or (object, cb) as the virtual remote
+    // calls it: the command and the callback.
+    commandArgs(shadeId, command, repeat, cb) {
+        if (typeof shadeId === 'object') return [shadeId, command];
+        return [{ shadeId: shadeId, command: command, repeat: repeat }, cb];
     }
     sendGroupRepeat(groupId, command, repeat, cb) {
-        let obj = { groupId: groupId, command: command };
-        if (typeof repeat === 'number') obj.repeat = parseInt(repeat);
-        putJSON(`/repeatCommand?groupId=${groupId}&command=${command}`, null, (err, group) => {
-            if (typeof cb === 'function') cb(err, group);
-        });
+        sendOp('repeatCommand', { groupId: groupId, command: command, repeat: repeatOf(repeat) }, cb);
     }
     sendVRCommand(el) {
         let pnl = document.getElementById('divVirtualRemote');
@@ -3981,30 +3583,21 @@ class Somfy {
         else
             somfy.sendCommand(o, (err, shade) => { fnRepeatCommand(err, shade); });
     }
+    // obj: a shade's or a group's id, and sunny, windy or both.
     sendSetSensor(obj, cb) {
-        putJSON('/setSensor', obj, (err, device) => {
-            if (typeof cb === 'function') cb(err, device);
-        });
+        let fields = { sunny: obj.sunny, windy: obj.windy, repeat: repeatOf(obj.repeat) };
+        if (typeof obj.groupId === 'number' && !isNaN(obj.groupId)) fields.groupId = obj.groupId;
+        else fields.shadeId = obj.shadeId;
+        sendOp('setSensor', fields, cb);
     }
     sendGroupCommand(groupId, command, repeat, cb) {
         console.log(`Sending Group command ${groupId}-${command}`);
-        let obj = { groupId: groupId };
-        if (isNaN(parseInt(command, 10))) obj.command = command;
-        if (typeof repeat === 'number') obj.repeat = parseInt(repeat);
-        putJSON('/groupCommand', obj, (err, group) => {
-            if (typeof cb === 'function') cb(err, group);
-        });
+        sendOp('groupCommand', { groupId: groupId, command: command, repeat: repeatOf(repeat) }, cb);
     }
     sendTiltCommand(shadeId, command, cb) {
         console.log(`Sending Tilt command ${shadeId}-${command}`);
-        if (isNaN(parseInt(command, 10)))
-            putJSON('/tiltCommand', { shadeId: shadeId, command: command }, (err, shade) => {
-                if (typeof cb === 'function') cb(err, shade);
-            });
-        else
-            putJSON('/tiltCommand', { shadeId: shadeId, target: parseInt(command, 10) }, (err, shade) => {
-                if (typeof cb === 'function') cb(err, shade);
-            });
+        if (isNaN(parseInt(command, 10))) sendOp('tiltCommand', { shadeId: shadeId, command: command }, cb);
+        else sendOp('tiltCommand', { shadeId: shadeId, target: parseInt(command, 10) }, cb);
     }
     linkRemote(shadeId) {
         let div = document.createElement('div');
@@ -4083,7 +3676,7 @@ class Somfy {
         btnOpenMemory.addEventListener('click', (evt) => {
             let obj = ui.fromElement(div);
             console.log(obj);
-            putJSONSync('/shadeCommand', { shadeId: obj.shadeId, command: 'prog', repeat: 40 }, (err, shade) => {
+            sendOp('shadeCommand', { shadeId: obj.shadeId, command: 'prog', repeat: 40 }, (err) => {
                 if (err) ui.serviceError(err);
                 else {
                     let prompt = ui.promptMessage('Confirm Motor Response', () => {
@@ -4119,11 +3712,9 @@ class Somfy {
             mouseDown = false;
             let obj = ui.fromElement(div);
             let prompt = ui.promptMessage('Confirm Motor Response', () => {
-                editJSON('/linkToGroup', { groupId: groupId, shadeId: obj.shadeId }, (id) => `/group?groupId=${id}`, (err, group) => {
-                    console.log(group);
+                sendEdit('linkToGroup', { groupId: groupId, shadeId: obj.shadeId }, editTarget('group', () => groupId), (err, group) => {
                     if (err) ui.serviceError(err);
-                    else somfy.setLinkedShadesList(group);
-                    this.updateGroupList();
+                    else if (group) somfy.setLinkedShadesList(group);
                 });
                 prompt.remove();
                 div.remove();
@@ -4131,13 +3722,15 @@ class Somfy {
             prompt.querySelector('.sub-message').innerHTML = `<hr></hr><p>Did the shade jog?  If the shade jogged press the YES button and your shade will be linked to the group.  If it did not press the NO button and try again.</p></p><p>Once the shade has jogged the shade will be added to the group and this process will be finished.</p>`;
 
         });
-        getJSONSync(`/groupOptions?groupId=${groupId}`, (err, options) => {
+        sendOp('groupOptions', { groupId: groupId }, (err, reply) => {
             if (err) {
                 div.remove();
                 ui.serviceError(err);
             }
             else {
-                console.log(options);
+                // The shades the group doesn't have yet, by name from the model.
+                let group = proto.model.groups.get(groupId) || { name: '' };
+                let options = { name: group.name, availShades: (reply.ids || []).map((id) => proto.model.shades.get(id)).filter((x) => x) };
                 if (options.availShades.length > 0) {
                     // Add in all the available shades.
                     let selAvail = div.querySelector('#selAvailShades');
@@ -4196,7 +3789,7 @@ class Somfy {
         btnOpenMemory.addEventListener('click', (evt) => {
             let obj = ui.fromElement(div);
             console.log(obj);
-            putJSONSync('/shadeCommand', { shadeId: shadeId, command: 'prog', repeat: 40 }, (err, shade) => {
+            sendOp('shadeCommand', { shadeId: shadeId, command: 'prog', repeat: 40 }, (err) => {
                 if (err) ui.serviceError(err);
                 else {
                     let prompt = ui.promptMessage('Confirm Motor Response', () => {
@@ -4210,15 +3803,13 @@ class Somfy {
         let btnUnpairFromGroup = div.querySelector('#btnUnpairFromGroup');
         btnUnpairFromGroup.addEventListener('click', (evt) => {
             let obj = ui.fromElement(div);
-            putJSONSync('/groupCommand', { groupId: groupId, command: 'prog', repeat: 1 }, (err, shade) => {
+            sendOp('groupCommand', { groupId: groupId, command: 'prog', repeat: 1 }, (err) => {
                 if (err) ui.serviceError(err);
                 else {
                     let prompt = ui.promptMessage('Confirm Motor Response', () => {
-                        editJSON('/unlinkFromGroup', { groupId: groupId, shadeId: shadeId }, (id) => `/group?groupId=${id}`, (err, group) => {
-                            console.log(group);
+                        sendEdit('unlinkFromGroup', { groupId: groupId, shadeId: shadeId }, editTarget('group', () => groupId), (err, group) => {
                             if (err) ui.serviceError(err);
-                            else somfy.setLinkedShadesList(group);
-                            this.updateGroupList();
+                            else if (group) somfy.setLinkedShadesList(group);
                         });
                         prompt.remove();
                         div.remove();
@@ -4227,35 +3818,31 @@ class Somfy {
                 }
             });
         });
-        getJSONSync(`/group?groupId=${groupId}`, (err, group) => {
-            if (err) {
-                div.remove();
-                ui.serviceError(err);
+        let group = ProtoViews.group(proto.model, proto.model.groups.get(groupId));
+        if (!group) {
+            div.remove();
+            gone('group');
+        }
+        else {
+            let shade = group.linkedShades.find((x) => { return shadeId === x.shadeId; });
+            if (typeof shade !== 'undefined') {
+                // Add in all the available shades.
+                let grpName = div.querySelector('#divGroupName');
+                if (grpName) grpName.innerHTML = group.name;
+                let divWizShadeName = div.querySelector('#divWizShadeName');
+                if (divWizShadeName) divWizShadeName.innerHTML = shade.name;
             }
             else {
-                console.log(group);
-                console.log(shadeId);
-                let shade = group.linkedShades.find((x) => { return shadeId === x.shadeId; });
-                if (typeof shade !== 'undefined') {
-                    // Add in all the available shades.
-                    let grpName = div.querySelector('#divGroupName');
-                    if (grpName) grpName.innerHTML = group.name;
-                    let divWizShadeName = div.querySelector('#divWizShadeName');
-                    if (divWizShadeName) divWizShadeName.innerHTML = shade.name;
-                }
-                else {
-                    div.remove();
-                    ui.errorMessage('The specified shade could not be found in this group.');
-                }
+                div.remove();
+                ui.errorMessage('The specified shade could not be found in this group.');
             }
-        });
+        }
         return div;
     }
     unlinkRepeater(address) {
         let prompt = ui.promptMessage('Are you sure you want to stop repeating frames from this address?', () => {
-            editJSON('/unlinkRepeater', { address: address }, () => '/repeaters', (err, repeaters) => {
+            sendEdit('unlinkRepeater', { remoteAddress: address }, null, (err) => {
                 if (err) ui.serviceError(err);
-                else this.setRepeaterList(repeaters);
                 prompt.remove();
             });
 
@@ -4268,11 +3855,10 @@ class Somfy {
                 shadeId: shadeId,
                 remoteAddress: remoteAddress
             };
-            editJSON('/unlinkRemote', obj, (id) => `/shade?shadeId=${id}`, (err, shade) => {
-                console.log(shade);
+            sendEdit('unlinkRemote', obj, editTarget('shade', () => shadeId), (err, shade) => {
                 prompt.remove();
                 if (err) ui.serviceError(err);
-                else this.setLinkedRemotesList(shade);
+                else if (shade) this.setLinkedRemotesList(shade);
             });
 
         });
@@ -4378,12 +3964,12 @@ var somfy = new Somfy();
 class MQTT {
     initialized = false;
     init() { this.initialized = true; }
-    async loadMQTT() {
-        getJSONSync('/mqttsettings', (err, settings) => {
-            if (err) 
+    loadMQTT() {
+        sendOp('getSettings', { section: 'mqtt' }, (err, reply) => {
+            if (err)
                 console.log(err);
             else {
-                console.log(settings);
+                let settings = ProtoViews.settings(proto.schema, 'mqtt', reply);
                 ui.toElement(document.getElementById('divMQTT'), { mqtt: settings });
                 // The device never returns the stored password; leave the field blank to keep it.
                 this.savedUsername = settings.username;
@@ -4425,10 +4011,12 @@ class MQTT {
                 return;
             }
         }
-        putJSONSync('/connectmqtt', obj.mqtt, (err, response) => {
+        let fields = { section: 'mqtt' };
+        for (let name of ProtoViews.SETTINGS.mqtt) if (name !== 'hasPassword') fields[name] = obj.mqtt[name];
+        fields.password = obj.mqtt.password;
+        sendOp('saveSettings', fields, (err) => {
             if (err) ui.serviceError(err);
-            console.log(response);
-        });
+        }, true);
     }
 }
 var mqtt = new MQTT();
@@ -4469,7 +4057,11 @@ class Firmware {
             xhr.onload = (evt) => {
                 if (typeof overlay !== 'undefined') overlay.remove();
                 let status = xhr.status;
-                if (status !== 200) {
+                if (status === 401) {
+                    security.tokenRefused();
+                    reject({ htmlError: status, service: 'GET /backup', desc: 'Log in again, then back up' });
+                }
+                else if (status !== 200) {
                     let err = xhr.response || {};
                     err.htmlError = status;
                     err.service = `GET /backup`;
@@ -4498,6 +4090,8 @@ class Firmware {
                 reject({ htmlError: status, service: 'GET /backup' });
             };
             xhr.open('GET', baseUrl.length > 0 ? `${baseUrl}/backup?attach=true` : '/backup?attach=true', true);
+            // Under Secured the file transfers need the token too.
+            xhr.setRequestHeader('apikey', security.apiKey);
             xhr.send();
         });
     }
@@ -4684,8 +4278,8 @@ class Firmware {
         prog.style.display = '';
         btnSelectFile.style.visibility = 'hidden';
         let xhr = new XMLHttpRequest();
-        //xhr.open('POST', service, true);
         xhr.open('POST', baseUrl.length > 0 ? `${baseUrl}${service}` : service, true);
+        xhr.setRequestHeader('apikey', security.apiKey);
         xhr.upload.onprogress = function (evt) {
             let pct = evt.total ? Math.round((evt.loaded / evt.total) * 100) : 0;
             prog.style.setProperty('--progress', `${pct}%`);
@@ -4700,6 +4294,15 @@ class Firmware {
         xhr.onload = function () {
             console.log('File upload load called');
             btnCancel.innerText = 'Close';
+            if (xhr.status === 401) {
+                el.remove();
+                security.tokenRefused();
+                return;
+            }
+            if (service !== '/restore' && (xhr.status < 200 || xhr.status >= 300)) {
+                ui.errorMessage(el, `The upload failed (${xhr.status}).`);
+                return;
+            }
             switch (service) {
                 case '/restore':
                     if (xhr.status < 200 || xhr.status >= 300) {
diff --git a/data-src/js/client.js b/data-src/js/client.js
index fff68a3..533e1ae 100644
--- a/data-src/js/client.js
+++ b/data-src/js/client.js
@@ -68,7 +68,27 @@ class ProtoClient {
     // unless a listener calls close(), as the UI does once /loginContext says
     // a login is needed (docs/SECURITY_PLAN.md).
     on(name, cb) { (this.listeners[name] = this.listeners[name] || []).push(cb); }
-    emit(name, d) { for (const cb of this.listeners[name] || []) cb(d); }
+    off(name, cb) { this.listeners[name] = (this.listeners[name] || []).filter((x) => x !== cb); }
+    emit(name, d) { for (const cb of (this.listeners[name] || []).slice()) cb(d); }
+    // The next event of that name that match(d) accepts, or null after ms.
+    // An edit's events follow its reply, so this is how a caller gets the
+    // item the edit left: the model has it by then.
+    waitFor(name, match, ms) {
+        return new Promise((resolve) => {
+            let timer = null;
+            const cb = (d) => {
+                if (match && !match(d)) return;
+                this.off(name, cb);
+                this.clearTimeout(timer);
+                resolve(d);
+            };
+            this.on(name, cb);
+            timer = this.setTimeout(() => {
+                this.off(name, cb);
+                resolve(null);
+            }, ms);
+        });
+    }
 
     connect() {
         if (!this.stopped && (this.ws || this.reconnectTimer)) return;
diff --git a/data-src/js/views.js b/data-src/js/views.js
new file mode 100644
index 0000000..e1719b6
--- /dev/null
+++ b/data-src/js/views.js
@@ -0,0 +1,80 @@
+// What the web UI's panels bind, made from socket protocol 2's items, events
+// and settings (docs/PROTOCOL.md), and back.  The UI kept its names where they
+// differ from the protocol's: a frame's address and rcode, a scan's RSSI, the
+// network panel's wifi, ethernet and ip objects, the radio's type.  The minify
+// step joins this file into index.js; Node loads it on its own for the tests
+// (test/js).
+class ProtoViews {
+    // A settings section's reply with what the device left out at its default
+    // filled in, so a form shows what is saved rather than what it showed
+    // before.
+    static settings(schema, section, d) {
+        return schema.fill(Object.assign({}, d), ProtoViews.SETTINGS[section]);
+    }
+    // A group with its shades whole, where the device sends their ids.
+    static group(model, group) {
+        if (!group) return group;
+        const view = Object.assign({}, group);
+        view.linkedShades = group.linkedShades.map((id) => model.shades.get(id) || { shadeId: id, name: `Shade ${id}`, remoteAddress: 0 });
+        return view;
+    }
+    // A received frame as the frames list and remote linking read it.
+    static frame(schema, d) {
+        const f = schema.fill(Object.assign({}, d), ['encKey', 'remoteAddress', 'lastRollingCode', 'command', 'rawCmd', 'rssi', 'bits', 'proto',
+            'valid', 'pulses']);
+        return { encKey: f.encKey, address: f.remoteAddress, rcode: f.lastRollingCode, command: f.command, rawCmd: f.rawCmd, rssi: f.rssi,
+            bits: f.bits, proto: f.proto, valid: f.valid, stepSize: d.stepSize, pulses: f.pulses };
+    }
+    static scan(schema, d) {
+        const s = schema.fill(Object.assign({}, d), ['scanning', 'testFreq', 'testRssi', 'frequency', 'rssi']);
+        return { scanning: s.scanning, testFreq: s.testFreq, testRSSI: s.testRssi, frequency: s.frequency, RSSI: s.rssi };
+    }
+    // The network section as the panel binds it: WiFi, Ethernet and the
+    // address each in an object of their own, the connection as connType.
+    static network(schema, d) {
+        const n = ProtoViews.settings(schema, 'network', d);
+        const view = { connType: n.connMode, hasEthernet: n.hasEthernet, wifi: {}, ethernet: {}, ip: {} };
+        for (const name of ProtoViews.WIFI) view.wifi[name] = n[name];
+        for (const name of ProtoViews.ETHERNET) view.ethernet[name] = n[name];
+        for (const name of ProtoViews.IP) view.ip[name] = n[name];
+        return view;
+    }
+    // The radio section as the panel binds it, where the bit length is the
+    // radio's type.
+    static radio(schema, d) {
+        const config = ProtoViews.settings(schema, 'radio', d);
+        config.type = config.bitLength;
+        delete config.bitLength;
+        return config;
+    }
+    // A save of the radio panel's config: everything but what is only shown.
+    static radioSave(config) {
+        const fields = { section: 'radio', bitLength: config.type };
+        for (const name of ProtoViews.SETTINGS.radio) {
+            if (name !== 'bitLength' && name !== 'radioInit') fields[name] = config[name];
+        }
+        return fields;
+    }
+    // An op's refusal as the UI's error box shows it.  A shade whose settings
+    // don't add up carries the reason's number, which the errors table
+    // describes.
+    static opError(name, err) {
+        const e = { htmlError: err.code, service: name, desc: err.desc };
+        if (err.data && typeof err.data.validation === 'number' && err.data.validation !== 0) e.code = err.data.validation;
+        return e;
+    }
+}
+ProtoViews.WIFI = ['ssid', 'hasPassphrase', 'roaming', 'hidden'];
+ProtoViews.ETHERNET = ['boardType', 'phyType', 'CLKMode', 'phyAddress', 'PWRPin', 'MDCPin', 'MDIOPin'];
+ProtoViews.IP = ['dhcp', 'ip', 'gateway', 'subnet', 'dns1', 'dns2'];
+// The fields of each settings section, as getSettings sends them
+// (src/DeviceOps.cpp).
+ProtoViews.SETTINGS = {
+    general: ['hostname', 'ssdpBroadcast', 'ntpServer', 'posixZone'],
+    network: ['connMode', 'hasEthernet'].concat(ProtoViews.WIFI, ProtoViews.ETHERNET, ProtoViews.IP),
+    mqtt: ['enabled', 'pubDisco', 'protocol', 'hostname', 'port', 'username', 'hasPassword', 'rootTopic', 'discoTopic'],
+    security: ['securityType', 'username', 'hasPassword', 'hasPin'],
+    radio: ['bitLength', 'proto', 'enabled', 'TXPin', 'RXPin', 'SCKPin', 'MOSIPin', 'MISOPin', 'CSNPin', 'frequency', 'rxBandwidth',
+        'deviation', 'txPower', 'noiseDetection', 'radioInit']
+};
+if (typeof module !== 'undefined' && module.exports) module.exports = { ProtoViews };
diff --git a/data-src/login.html b/data-src/login.html
deleted file mode 100644
index c789f6c..0000000
--- a/data-src/login.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="app.css?v=2.4.0" type="text/css" />
-    <link rel="icon" type="image/png" href="favicon.png" />
-    <script type="text/javascript" src="index.js?v=2.4.0"></script>
-</head>
-<body onload="general.loadLogin();">
-    <div id="divContainer" class="container" data-securitytype="0">
-        <h1 style="text-align: center;"><img src="icon.png" style="width:127px;margin-left:1px;margin-top:-10px;" /></h1>
-        <div id="divLoginPnl" class="login-content" style="position:relative;">
-            <div style="max-width:270px;margin:0px auto;">
-                <form id="frmLogin" action="/login" method="post" class="login-form" onsubmit="general.login(event); return false;">
-                    <input id="fldPin" type="hidden" name="pin">
-                    <div id="divPinSecurity" style="display:none;">
-                        <div class="field-group" style="text-align:center;">
-                            <div id="fldPinEntry" style="display:inline-block;" onkeydown="general.pinKeyPressed(event);">
-                                <input class="pin-digit" maxlength="1" data-bind="security.pin.d0" onfocus="general.pinDigitFocus(event);">
-                                <input class="pin-digit" maxlength="1" data-bind="security.pin.d1" onfocus="general.pinDigitFocus(event);">
-                                <input class="pin-digit" maxlength="1" data-bind="security.pin.d2" onfocus="general.pinDigitFocus(event);">
-                                <input class="pin-digit" maxlength="1" data-bind="security.pin.d3" onfocus="general.pinDigitFocus(event);">
-                            </div>
-                            <label for="fldPinEntry" style="margin-top:7px;">Enter Pin</label>
-                        </div>
-                    </div>
-                    <div id="divPasswordSecurity" style="display:none;">
-                        <div class="field-group">
-                            <input id="fldUsername" name="username" type="text" autocomplete="username" data-bind="security.username" length=32 placeholder="Username">
-                            <label for="fldUsername">Username</label>
-                        </div>
-                        <div class="field-group">
-                            <input id="fldPassword" name="password" type="password" autocomplete="current-password" data-bind="security.password" length=32 placeholder="Password">
-                            <label for="fldPassword">Password</label>
-                        </div>
-                    </div>
-                    <div style="text-align:center;"><span id="spanLoginMessage" style="color:red"></span></div>
-                    <div class="button-container">
-                        <button id="btnLogin" type="submit" value="Submit">
-                            Login
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-    <script type="text/javascript">
-    </script>
-</body>
-</html>
diff --git a/data-src/main.css b/data-src/main.css
index 25d716b..a35c803 100644
--- a/data-src/main.css
+++ b/data-src/main.css
@@ -868,3 +868,14 @@ div.frame-pulses {
         padding-right:14px;
     }
 }
+/* Shown when the device speaks another protocol version than this page. */
+.version-banner {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    padding: 8px 12px;
+    background: orangered;
+    color: white;
+    font-size: 14px;
+    text-align: center;
+}
diff --git a/minify.py b/minify.py
index 38060eb..fe47611 100644
--- a/minify.py
+++ b/minify.py
@@ -58,7 +58,7 @@ PNG_EXTENSIONS = {".png"}
 # comes before index.js, which uses it.  A source listed here isn't copied on
 # its own.
 BUNDLES = {
-    "index.js": ["js/schema.js", "js/model.js", "js/client.js", "index.js"],
+    "index.js": ["js/schema.js", "js/model.js", "js/client.js", "js/views.js", "index.js"],
     "app.css": ["main.css", "widgets.css", "icons.css"],
 }
 
diff --git a/test/e2e/README.md b/test/e2e/README.md
index e18355f..a42e530 100644
--- a/test/e2e/README.md
+++ b/test/e2e/README.md
@@ -17,4 +17,6 @@ Runs against a real device on your network, by hand, never in CI. It checks sock
 
 A plain run sends nothing on air, changes no setting (it saves only values the device already has) and doesn't reboot the device. The command tests send ops that are refused before they reach the radio, and one `setPositions` that sets a shade to the position the sync gave: that drops the fraction of a percent the shade's believed position may have had. The edit tests send edits that are refused, and one shade sort order set to the order it has, which saves the shades again unchanged. The settings tests send saves that are refused, and one that saves the NTP server and time zone the device already has. The frequency scan test pauses the radio's sending for a second or two, as a scan does. It does fill every socket slot for a few seconds, and replays a page load.
 
+The web UI holds one of the device's 5 socket slots for each open tab. The tests that fill every slot skip while one is taken, so close the UI's tabs before a run.
+
 The tests run in whatever security mode the device is in; the suite never changes it. To test both modes, run the suite once in each.
diff --git a/test/e2e/test_survival.py b/test/e2e/test_survival.py
index a6dcae9..8c56d29 100644
--- a/test/e2e/test_survival.py
+++ b/test/e2e/test_survival.py
@@ -2,6 +2,7 @@
 (docs/adr/0005-one-websocket-protocol.md): every client reconnecting at once,
 and a browser loading the page."""
 import threading
+import time
 import urllib.request
 
 import pytest
@@ -29,7 +30,24 @@ def watch_heap(host):
     assert after["min"] >= HEAP_FLOOR, "the heap fell to %u bytes (floor %u)" % (after["min"], HEAP_FLOOR)
 
 
-def test_every_client_reconnecting_at_once(connect, schema, watch_heap):
+@pytest.fixture
+def all_slots_free(host, token):
+    """Skips unless every socket slot is free.  The web UI holds one per open
+    tab, which would leave these tests a client short."""
+    clients = [ProtoClient(host, params={"apikey": token} if token else None) for _ in range(MAX_CLIENTS)]
+    try:
+        time.sleep(1)
+        taken = sum(1 for c in clients if c.closed.is_set())
+    finally:
+        for c in clients:
+            c.close()
+    # The device frees a slot when it sees the disconnect.
+    time.sleep(0.5)
+    if taken:
+        pytest.skip("%u socket slot(s) in use, likely by the web UI: close its tabs" % taken)
+
+
+def test_every_client_reconnecting_at_once(connect, schema, watch_heap, all_slots_free):
     clients = [connect() for _ in range(MAX_CLIENTS)]
     errors = []
 
@@ -44,7 +62,7 @@ def test_every_client_reconnecting_at_once(connect, schema, watch_heap):
     assert not errors, errors
 
 
-def test_one_client_too_many_is_closed(connect, schema):
+def test_one_client_too_many_is_closed(connect, schema, all_slots_free):
     clients = [connect(schema=schema.hash) for _ in range(MAX_CLIENTS)]
     for c in clients:
         run_sync(c)
diff --git a/test/js/client.test.js b/test/js/client.test.js
index 3966007..571ec5e 100644
--- a/test/js/client.test.js
+++ b/test/js/client.test.js
@@ -296,6 +296,40 @@ test('a new token connects again with it', () => {
     assert.match(FakeSocket.last.url, /apikey=new/);
 });
 
+test('waitFor resolves with the first event that matches, after the model has it', async () => {
+    const { c, ws } = connected();
+    const shadeId = recordedItems('S')[0].s;
+    const p = c.waitFor('shade', (d) => d.shadeId === shadeId, 3000);
+    ws.deliver({ v: 2, t: T.shade, d: { s: 250, n: 'Other' } });
+    ws.deliver({ v: 2, t: T.shade, d: { s: shadeId, n: 'Renamed' } });
+    const d = await p;
+    assert.equal(d.name, 'Renamed');
+    assert.equal(c.model.shades.get(shadeId).name, 'Renamed');
+});
+
+test('waitFor gives null when no event comes, and stops listening', async () => {
+    const { c } = connected();
+    const p = c.waitFor('room', null, 3000);
+    c.timers.runAll();
+    assert.equal(await p, null);
+    assert.equal((c.listeners.room || []).length, 0);
+});
+
+test('off stops a listener, and one that removes itself mid-event leaves the others called', () => {
+    const { c, ws } = connected();
+    const seen = [];
+    const once = (d) => { seen.push('once'); c.off('memory', once); };
+    const always = () => seen.push('always');
+    const dropped = () => seen.push('dropped');
+    c.on('memory', once);
+    c.on('memory', always);
+    c.on('memory', dropped);
+    c.off('memory', dropped);
+    ws.deliver({ v: 2, t: T.memory, d: { fr: 1 } });
+    ws.deliver({ v: 2, t: T.memory, d: { fr: 2 } });
+    assert.deepEqual(seen, ['once', 'always', 'always']);
+});
+
 test('subscribe sends the feed number', () => {
     const { c, ws } = connected();
     c.subscribe('frames');
diff --git a/test/js/views.test.js b/test/js/views.test.js
new file mode 100644
index 0000000..30e1775
--- /dev/null
+++ b/test/js/views.test.js
@@ -0,0 +1,82 @@
+// What the web UI's panels bind (data-src/js/views.js), from protocol 2's
+// shapes.
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const { ProtoViews } = require('../../data-src/js/views.js');
+const { ProtoModel } = require('../../data-src/js/model.js');
+const { recordedSchema, deviceSections } = require('./helpers.js');
+
+const schema = recordedSchema();
+function synced() {
+    const model = new ProtoModel(schema);
+    model.beginSync();
+    for (const d of deviceSections(schema)) model.applySync(d);
+    model.endSync();
+    return model;
+}
+
+test('a settings section has every field, defaults where the device left them out', () => {
+    // ssdpBroadcast off and no NTP server are at their defaults, so not sent.
+    assert.deepEqual(ProtoViews.settings(schema, 'general', { hostname: 'Somfy' }),
+        { hostname: 'Somfy', ssdpBroadcast: false, ntpServer: '', posixZone: '' });
+    assert.deepEqual(ProtoViews.settings(schema, 'security', {}), { securityType: 0, username: '', hasPassword: false, hasPin: false });
+});
+
+test('the settings sections are what the device sends', () => {
+    for (const section of Object.keys(ProtoViews.SETTINGS))
+        for (const name of ProtoViews.SETTINGS[section]) assert.ok(schema.keys[name], `${section}.${name}`);
+});
+
+test('a group shows its shades whole', () => {
+    const m = synced();
+    const group = m.groupList()[0];
+    const view = ProtoViews.group(m, group);
+    assert.equal(view.linkedShades.length, group.linkedShades.length);
+    assert.equal(view.linkedShades[0].name, m.shades.get(group.linkedShades[0]).name);
+    // The model's item is left as it is.
+    assert.equal(typeof group.linkedShades[0], 'number');
+    // A shade the model hasn't got yet still shows.
+    assert.equal(ProtoViews.group(m, Object.assign({}, group, { linkedShades: [250] })).linkedShades[0].shadeId, 250);
+    assert.equal(ProtoViews.group(m, undefined), undefined);
+});
+
+test('a frame and a scan under the names the UI reads', () => {
+    const f = ProtoViews.frame(schema, { remoteAddress: 5, lastRollingCode: 9, command: 'Up', rssi: -60, valid: true, pulses: [1, 2] });
+    assert.equal(f.address, 5);
+    assert.equal(f.rcode, 9);
+    assert.equal(f.encKey, 0);
+    assert.deepEqual(f.pulses, [1, 2]);
+    assert.equal(f.stepSize, undefined);
+    const s = ProtoViews.scan(schema, { scanning: true, testFreq: 433.1, testRssi: -80 });
+    assert.deepEqual(s, { scanning: true, testFreq: 433.1, testRSSI: -80, frequency: 0, RSSI: 0 });
+});
+
+test('the network section as the panel binds it', () => {
+    const v = ProtoViews.network(schema, { connMode: 1, ssid: 'home', hasPassphrase: true, dhcp: true, PWRPin: -1 });
+    assert.equal(v.connType, 1);
+    assert.equal(v.hasEthernet, false);
+    assert.deepEqual(v.wifi, { ssid: 'home', hasPassphrase: true, roaming: false, hidden: false });
+    assert.equal(v.ethernet.PWRPin, -1);
+    assert.deepEqual(v.ip, { dhcp: true, ip: '', gateway: '', subnet: '', dns1: '', dns2: '' });
+});
+
+test('the radio section as the panel binds it, and back', () => {
+    const config = ProtoViews.radio(schema, { bitLength: 80, frequency: 433.42, enabled: true, radioInit: true });
+    assert.equal(config.type, 80);
+    assert.equal(config.bitLength, undefined);
+    assert.equal(config.TXPin, 0);
+    const save = ProtoViews.radioSave(config);
+    assert.equal(save.section, 'radio');
+    assert.equal(save.bitLength, 80);
+    assert.equal(save.frequency, 433.42);
+    // Only shown, never saved.
+    assert.equal('radioInit' in save, false);
+    assert.equal('type' in save, false);
+});
+
+test('an op refusal for the error box, with a shade validation code', () => {
+    assert.deepEqual(ProtoViews.opError('saveShade', { code: 'badRequest', desc: 'Pin in use', data: { validation: -10 } }),
+        { htmlError: 'badRequest', service: 'saveShade', desc: 'Pin in use', code: -10 });
+    assert.deepEqual(ProtoViews.opError('reboot', { code: 'closed', desc: 'The connection closed' }),
+        { htmlError: 'closed', service: 'reboot', desc: 'The connection closed' });
+});